:root{
      --frame-max-width: 480px;

      /* bars are only 50px now */
      --topbar-h: 50px;
      --bottombar-h: 50px;

      --side-stop-w: 20px;

      /* bottom buttons should all fit in one row -> images scale with width */
      --bottom-btn-max-h: 168px;
      --bottom-btn-overlap: 18px; /* goes upward over the bar */

      /* top mini buttons: go DOWN over the bar */
      --top-btn-h: 44px;
      --top-btn-overlap-down: 4px;

      --frame-radius: 0px;
    }

    *{ box-sizing: border-box; }
    /*
      IMPORTANT (Popup visibility)
      ---------------------------
      The game should not rely on the *browser page* scroll. All scrolling is
      handled inside `.game-content`.

      If the document can scroll (e.g., mobile 100vh quirks / address bar),
      popups that are positioned fixed inside the game frame can end up
      partially outside the visible viewport after the user scrolls the page.

      => Lock document scrolling. This keeps every popup fully visible.
    */
    html, body{
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }

    body{
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      background: url("../img/design/full_background.jpg") center / cover no-repeat fixed;
      display: grid;
      place-items: center;
    }

    /* Centered portrait game area */
    .game-shell{
		height: min(100vh, 920px);
		@supports (height: 100svh){
		  height: min(100svh, 920px);
		}
      aspect-ratio: 9 / 16;
      max-width: var(--frame-max-width);

      position: relative;
      border-radius: var(--frame-radius);
      overflow: hidden;

      box-shadow: 0 0px 20px rgba(0,0,0,.95), 0 0px 40px rgba(0,0,0,.95), 0 0px 40px rgba(0,0,0,.95);
      outline: 1px solid rgba(255,255,255,.08);
      background: #000;
    }

    .mobile-frame{
      height: 100%;
      width: 100%;
      position: relative;
      display: flex;
      flex-direction: column;

      background: url("../img/design/background.jpg") center / cover no-repeat;
    }

    /* Side repeats */
    .mobile-frame::before,
    .mobile-frame::after{
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: var(--side-stop-w);
      z-index: 2;
      background-image: url("../img/design/side_stop_brown.jpg");
      background-repeat: repeat-y;
      background-position: center top;
      background-size: 100% auto;
      pointer-events: none;
    }
    .mobile-frame::before{ left: 0; }
    .mobile-frame::after{ right: 0; }

    /* TOP BAR (50px) */
    .top-bar{
      position: relative;
      z-index: 4;
      height: var(--topbar-h);
      background: url("../img/design/top_bar.jpg") center / cover no-repeat;

      display: flex;
      align-items: flex-start; /* so the buttons can hang DOWN */
      justify-content: flex-end;

      padding: 0 8px;
	  
	  overflow: visible;
	  padding-top: env(safe-area-inset-top);
	  height: calc(var(--topbar-h) + env(safe-area-inset-top));	  
    }

    /* Only right half may contain the top buttons */
    .top-right-half{
      width: auto;
      height: 100%;
      margin-left: auto;

      display: flex;
      justify-content: flex-end;
      align-items: flex-start;

      /* padding-right: calc(var(--side-stop-w) - 10px);*/
    }

    .top-buttons{
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    /* BOTTOM BAR (50px) */
    .bottom-bar{
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9500;
      height: var(--bottombar-h);
      background: url("../img/design/bottom_bar.jpg") center / cover no-repeat;

      display: flex;
      align-items: flex-end;
      justify-content: center;

      padding: 0 10px 4px;
	  
	  overflow: visible;
	  padding-bottom: env(safe-area-inset-bottom);
      height: calc(var(--bottombar-h) + env(safe-area-inset-bottom));	  
    }

    .bottom-buttons{
      width: 100%;
      display: flex;
      justify-content: space-between; /* ensure they spread out */
      align-items: flex-end;
      gap: 3px;

      /*
	  padding-left: calc(var(--side-stop-w) - 6px);
      padding-right: calc(var(--side-stop-w) - 6px);
	  */
    }

    /* Generic image button */
    .img-btn{
      appearance: none;
      border: 0;
      background: transparent;
      padding: 0;
      margin: 0;
      cursor: pointer;
      line-height: 0;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
      transition: transform .08s ease;
    }
    .img-btn:active{ transform: translateY(2px) scale(0.98); }
    .img-btn:focus-visible{
      outline: 2px solid rgba(255,255,255,.75);
      outline-offset: 4px;
      border-radius: 8px;
    }

    /* TOP mini buttons: fixed height 110px and hang DOWN */
    .top-buttons .img-btn img{
      height: var(--top-btn-h);
      width: auto;
      display: block;
      transform: translateY(var(--top-btn-overlap-down)); /* DOWN over the bar */
    }

    /* BOTTOM big buttons: MUST fit in one row.
       => Buttons share width equally, image scales to fit width, max height stays 168px.
       They still hang UP over the bar. */
    .bottom-buttons .img-btn{
      flex: 1 1 0;   /* equal widths */
      min-width: 0;  /* allow shrink */
      display: flex;
      justify-content: center;
    }
    .bottom-buttons .img-btn img{
      width: 100%;
      height: auto;
      max-height: var(--bottom-btn-max-h);
      display: block;
      transform: translateY(calc(-1 * var(--bottom-btn-overlap))); /* UP over the bar */
    }

    /* Main content area */
    .game-content{
      position: relative;
      z-index: 1;
      flex: 1 1 auto;
      min-height: 0;

      padding: 14px;
      padding-bottom: calc(14px + var(--bottombar-h) + env(safe-area-inset-bottom));
      /*
	  padding-left: calc(5px + var(--side-stop-w));
      padding-right: calc(5px + var(--side-stop-w));
	  */

      overflow: auto;
    }

    .content-placeholder{
      height: 100%;
      background: rgba(0,0,0,.18);
      backdrop-filter: blur(2px);
      outline: 1px dashed rgba(255,255,255,.25);

      display: grid;
      place-items: center;
      color: rgba(255,255,255,.85);
      text-align: center;
      padding: 18px;
    }
    .content-placeholder small{
      display:block;
      opacity: .85;
      margin-top: 8px;
    }

    /* Full-bleed on real phones */
    @media (max-width: 560px){
      body{
        place-items: stretch;
        background-attachment: scroll;
      }
		.game-shell{
		  height: 100vh;
			width: 100vw;
			max-width: none;
			aspect-ratio: auto;
			border-radius: 0;
			box-shadow: none;
			outline: none;
      }
	@supports (height: 100svh){
		  .game-shell{ height: 100svh; }
		}
    	  
    }

/* -----------------------------
   Hero Agency integration tweaks
------------------------------*/
.mobile-frame{
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden; /* scroll inside .game-content */
}

.game-content{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /*
  padding-bottom: calc(var(--bottombar-h) + env(safe-area-inset-bottom) + 20px);
  */
}

/* Keep bars visible while scrolling */
.top-bar{ position: sticky; top: 0; }
.bottom-bar{ position: sticky; bottom: 0; }

/* Left side in top bar */
.top-left{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding-top: 0;
  margin-right: auto;
  flex: 1 1 auto;
  min-width: 0;
}


#logo{
  height: 34px !important;
  margin: 0 !important;
  width: auto;
}

.guild-header{
  display: flex;
  align-items: center;
  gap: 8px;
}

.guild-header-icon{
  height: 28px;
  width: 28px;
}

.guild-header-name{
  font-size: 14px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 6px rgba(0,0,0,.45);
}

/* Small text button for pause/console */
.mini-text-btn{
  appearance: none;
  border: 0;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.95);
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
}
.mini-text-btn:active{ transform: translateY(1px); }

/* =========================================================
   POPUPS (Unified)
   =========================================================
   Keep all overlays/popups constrained to the 9:16 game frame.
   Use ONE consistent modal layout, and let PopupManager handle scrolling.
*/

/*
  IMPORTANT:
  We want modal overlays to stay visually fixed inside the 9:16 game frame,
  even when the inner `.game-content` scrolls.

  If overlays are `position: absolute` inside `.game-content`, they move with scroll.

  Solution:
  - Give `.game-shell` a transform to create a containing block.
  - Make overlays `position: fixed` so they pin to the frame, not to the scroll area.
*/
.game-shell{
  position: relative;
  transform: translateZ(0);
  will-change: transform;
}

/* Overlays should cover the frame (not the whole browser window) */
.game-shell .pm-overlay,
.game-shell .popup-overlay,
.game-shell #heroOverlay,
.game-shell #assignmentOverlay,
.game-shell #landSelectOverlay,
.game-shell #worldMapOverlay,
.game-shell #topPopupLayer,
.game-shell .daily-rewards-overlay,
.game-shell .mini-info-overlay,
.game-shell [id$="Overlay"]{
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

/* Unified popup sizing inside the frame */
.game-shell .pm-fullscreen{
  --pm-pad: 16px;

  /* Fixed to the game frame (because .game-shell is transformed) */
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(520px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  max-height: calc(100% - 24px) !important;

  /* IMPORTANT: do NOT force display here.
     PopupManager controls visibility via inline style (display: none / flex).
     Forcing display with !important would make some popups permanently visible. */
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 16px !important;
  padding-top: 20px;
  padding-bottom: 90px;
}

/* Scroll area + footer are standardized by PopupManager */
.game-shell .pm-fullscreen .pm-popup-content{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: var(--pm-pad);
}

.game-shell .pm-fullscreen > .popup-footer,
.game-shell .pm-fullscreen > .pm-popup-footer{
  flex: 0 0 auto;
  padding: 12px var(--pm-pad);
}

/* Avoid nested scroll containers inside the PopupManager scroll area */
.game-shell .pm-fullscreen #heroPopupBody,
.game-shell .pm-fullscreen #assignmentPopupBody,
.game-shell .pm-fullscreen .popup-body,
.game-shell .pm-fullscreen .guild-popup-body,
.game-shell .pm-fullscreen .guild-chest-body,
.game-shell .pm-fullscreen .questlog-body{
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* If a bottom close button exists, hide any top-right X buttons (we want one consistent way to close). */
.game-shell .pm-has-bottom-close .popup-header .popup-close,
.game-shell .pm-has-bottom-close .popup-header .close-btn,
.game-shell .pm-has-bottom-close .guild-popup-header .close-btn,
.game-shell .pm-has-bottom-close .guild-chest-header .close-btn,
.game-shell .pm-has-bottom-close .questlog-header .close-btn,
.game-shell .pm-has-bottom-close .worldmap-header .worldmap-close,
.game-shell .pm-has-bottom-close #assignmentPopupHeader #assignmentPopupCloseBtn,
.game-shell .pm-has-bottom-close #collectionQuestPopupHeader #collectionQuestPopupCloseBtn{
  display: none !important;
}

/* Main navigation popups: no header bar, no X (title can stay as plain text). */
.game-shell #guildPopup .guild-popup-header,
.game-shell #settingsPopup .guild-popup-header,
.game-shell #rankingPopup .guild-popup-header,
.game-shell #craftingPopup .guild-popup-header,
.game-shell #guildChestPanel .guild-chest-header,
.game-shell #questLogPanel .questlog-header,
.game-shell #dailyQuestsPopup .popup-header{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

.game-shell #guildPopup .guild-popup-header .close-btn,
.game-shell #settingsPopup .guild-popup-header .close-btn,
.game-shell #rankingPopup .guild-popup-header .close-btn,
.game-shell #craftingPopup .guild-popup-header .close-btn,
.game-shell #guildChestPanel .guild-chest-header .close-btn,
.game-shell #questLogPanel .questlog-header .close-btn,
.game-shell #dailyQuestsPopup .popup-header .close-btn{
  display: none !important;
}



/* --- Coin HUD in top-left --- */
.coin-hud{ 
  position: relative;
  height: var(--top-btn-h);
  display: flex;
  align-items: flex-start;
}
.coin-hud img{
  height: var(--top-btn-h);
  width: auto;
  display: block;
  transform: translateY(var(--top-btn-overlap-down));
}
.coin-hud-text{
  position: absolute;
  /* left: clamp(70px, calc(var(--top-btn-h) * 1.7), 95px); */
  right: clamp(8px, 3vw, 12px);
  top: calc(50% + var(--top-btn-overlap-down));
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 16px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 2px rgba(0,0,0,.55);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Gem HUD next to coins --- */
.gem-hud{
  position: relative;
  height: var(--top-btn-h);
  display: flex;
  align-items: flex-start;
}
.gem-hud img{
  height: var(--top-btn-h);
  width: auto;
  display: block;
  transform: translateY(var(--top-btn-overlap-down));
}
.gem-hud-text{
  position: absolute;
  left: clamp(62px, calc(var(--top-btn-h) * 1.45), 80px);
  right: clamp(10px, 2.5vw, 16px);
  top: calc(50% + var(--top-btn-overlap-down));
  transform: translateY(-50%);
  font-weight: 800;
  font-size: 16px;
  color: rgba(255,255,255,.96);
  text-shadow: 0 2px 2px rgba(0,0,0,.55);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --------------------------------------------------
   Journal (Activity Feed) badge + tabs + cards
   -------------------------------------------------- */

/* Notification badge on the top-right feed button */
#openQuestLogBtn{ position: relative; }
.notif-badge{
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 11px;
  line-height: 1;
  background: #c81e1e;
  color: #ffffff;
  border: 2px solid rgba(0,0,0,0.65);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
  pointer-events: none;
  /* Gentle periodic bounce to draw attention (every 2s) */
  animation: notifBadgeBounce 2s infinite;
}
.notif-badge.hidden{ display:none; }

@keyframes notifBadgeBounce {
  0%, 78%, 100% { transform: translateY(0) scale(1); }
  84% { transform: translateY(-4px) scale(1.08); }
  90% { transform: translateY(0) scale(1); }
  95% { transform: translateY(-2px) scale(1.04); }
}

/* Journal tabs */
#questLogPanel .questlog-tabs{
  display:flex;
  gap: 8px;
  margin: 0 0 10px 0;
}
#questLogPanel .questlog-tab{
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.9);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  user-select: none;
}
#questLogPanel .questlog-tab:hover{
  background: rgba(255,255,255,0.10);
}
#questLogPanel .questlog-tab.active{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.22);
}

/* Override legacy questlog layout: body becomes a simple stack, quests tab provides its own grid */
#questLogPanel .questlog-body{
  display: block;
  padding: 0.65rem 0.75rem 0.75rem;
  max-height: calc(70vh - 3rem);
  overflow: hidden;
}

#questLogPanel .questlog-tabpage.hidden{ display:none; }

#questLogPanel .questlog-quests-grid{
  display: grid;
  grid-template-columns: 1.1fr 1.6fr;
  gap: 0.6rem;
  max-height: calc(70vh - 4.5rem);
}

/* Activity cards */
#questLogPanel .activity-feed-list{
  display:flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(70vh - 4.5rem);
  overflow-y: auto;
  padding-right: 4px;
}

#questLogPanel .activity-feed-empty{
  margin-top: 8px;
  font-size: 13px;
  opacity: 0.75;
}

#questLogPanel .activity-card{
  display:flex;
  gap: 10px;
  align-items: flex-start;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 10px 10px;
}

#questLogPanel .activity-card.unseen{
  border-color: rgba(255,255,255,0.22);
  box-shadow: 0 10px 22px rgba(0,0,0,0.25);
}

#questLogPanel .activity-icon{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 16px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);
  flex: 0 0 auto;
}

#questLogPanel .activity-content{ flex: 1 1 auto; }

#questLogPanel .activity-title{
  font-weight: 900;
  font-size: 13px;
  margin: 0 0 2px 0;
}

#questLogPanel .activity-message{
  font-size: 12px;
  opacity: 0.9;
  line-height: 1.35;
  margin: 0 0 6px 0;
}

#questLogPanel .activity-meta{
  font-size: 11px;
  opacity: 0.65;
}

#questLogPanel .activity-actions{
  margin-top: 8px;
}

#questLogPanel .activity-action-btn{
  padding: 0.25rem 0.6rem;
  font-size: 12px;
}

/* Hidden legacy guild header elements kept for JS bindings */
.guild-header-hidden{
  display: none !important;
}

/* Hard reset for any remaining legacy styles on image buttons */
#openSettingsBtn,
#openQuestLogBtn,
#openRankingBtn,
#openGuildBtn,
#openGuildChestBtn,
#openDailyQuestsBtn,
#changeLandBtn,
#openCraftingBtn{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}



/* --- Guild Chest overlay/frame fix --- */
.game-shell .pm-overlay{
    position: fixed;
    inset: 0;
	background:
	  linear-gradient(165deg,
		rgba(12, 8, 6, 0.85) 0%,
		rgba(22, 16, 12, 0.85) 35%,
		rgba(35, 24, 18, 0.85) 50%,
		rgba(22, 16, 12, 0.85) 65%,
		rgba(12, 8, 6, 0.85) 100%
	  ),
	  url("../img/design/background.jpg") center / cover no-repeat;
	background-size: cover;
	background-position: center;
	/*background: rgba(11, 11, 11, 1.00);*/
    z-index: 8995; 
    display: none;
/*	
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: RGBA(11, 11, 11, 1.0);
*/
}

.game-shell .pm-fullscreen{
/*  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;

  width: min(520px, calc(100% - 24px)) !important;
  max-width: calc(100% - 24px) !important;
  max-height: calc(100% - 24px) !important;

  flex-direction: column !important;
  overflow: hidden !important; /* keep panel within frame * /
  padding-top: 20px;
  padding-bottom: 90px;
*/
}

/* Respect the legacy hidden class and PopupManager inline display toggles */
.game-shell .guild-chest-panel.hidden{
  display: none !important;
}


.game-shell .pm-body{
  min-height: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}
/* --- Popup padding: +5px left/right in the new frame --- */
.mobile-frame [id$="PopupBody"]{
  padding-left: calc(0.75rem + 5px) !important;
  padding-right: calc(0.75rem + 5px) !important;
}
.mobile-frame #dailyRewardsPopup .daily-rewards-content,
.mobile-frame #dailyRewardsPopup .daily-rewards-footer{
  padding-left: 5px !important;
  padding-right: 5px !important;
}


/* Keep tile grid inside the portrait frame (no 'invisible' overflow on desktop) */
.game-shell #tileContainerWrapper{
  max-width: 100%;
  overflow-x: visible !important;
}


/* =====================================================================
   HERO CHOICE POPUP (Assignment start)
   - Shows a "hero choice" image for ~1.5s and fades out
   ===================================================================== */

.hero-choice-popup{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 99999;
  pointer-events: none;
  display: none;
}

.hero-choice-popup-img{
  width: min(220px, calc(100vw - 250px));
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.55));
}

.hero-choice-popup.is-playing{
  display: block;
  animation: heroChoicePopupFade 2.5s ease-in-out forwards;
}

@keyframes heroChoicePopupFade{
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.98); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
  80%  { opacity: 1; transform: translate(-50%, -50%) scale(1.00); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.02); }
}