/* ---- Mobile hero layout (portrait phones): un-transformed stage, own character arrangement, fixed bottom menu, scrolling footer ---- */
.hero-cta, .site-footer{ display:none; }

@media (max-width:680px){
  html, body{ height:auto; overflow-x:hidden; overflow-y:auto; background:#4c86d0; }
  .stage-viewport{ height:100vh; height:100dvh; overflow:hidden; background:#4c86d0; }
  .stage{ position:relative; width:100vw; height:100vh; height:100dvh; transform:none !important; will-change:auto; background:#4c86d0; }
  .stage.dusk{ background:#02062a; }
  /* the painting: a little smaller than the viewport and anchored to the ground so the sky stays open for the title, cover, medals and CTA */
  .world{ left:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; }
  .world .bg-layer{ background-size:auto 104%; background-position:60% 100%; background-repeat:no-repeat; }
  .hotspot, .star, .char[data-char="tent"]{ display:none !important; }
  .p1{ top:29%; } .p2{ top:32%; } .p3{ top:27%; } .p4{ top:34%; }

  /* title, cover, medals, CTA — top-left column */
  .title-card{ top:14px !important; left:14px; gap:6px; }
  .author-tag{ display:inline-block; font-size:10.5px; letter-spacing:.14em; margin:0 0 2px 4px; }
  .author-tag-hint{ display:none; }
  .title-wordmark-wrap{ width:132px; padding:8px 6px 2px; }
  .title-glow{ inset:-6px; }
  .book-thumb{ width:104px; margin-left:10px; transform:none; }
  .book-thumb:hover{ transform:none; }
  .medals{ top:208px !important; right:auto; left:20px; gap:10px; }
  .medal, .medal img{ width:36px; height:36px; }
  .medal:hover img, .medal:focus-visible img, .medal.pinned img{ transform:scale(2.4); }
  .medal img{ transform-origin:top left; }
  .medal figcaption{ top:calc(100% * 2.4 + 12px); right:auto; left:0; width:260px; text-align:left; }
  .medal figcaption strong{ font-size:17px; }
  .medal figcaption span{ font-size:11px; }
  .hero-cta{
    display:inline-block; position:absolute; top:118px; right:16px; left:auto; z-index:6;
    background:#1a2440; color:#fff; text-decoration:none; font-family:'Chewy','Baloo 2',cursive; font-weight:400; font-size:15px; letter-spacing:.02em;
    padding:9px 16px; border-radius:999px; box-shadow:0 6px 18px rgba(10,16,40,.45); border:1px solid rgba(255,255,255,.18);
    transition:transform .2s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
  }
  .hero-cta:active{ transform:scale(.96); background:#243158; }

  /* tooltip near the characters; JS fades it out */
  .hint{ display:block; top:auto !important; right:auto; left:50%; bottom:calc(58% + var(--dock-h, 88px) * 0); transform:translateX(-50%); font-size:12.5px; white-space:nowrap; z-index:7; transition:opacity .6s ease, transform .6s ease; }
  .hint.gone{ opacity:0; transform:translateX(-50%) translateY(-6px); pointer-events:none; }

  /* bottom menu: full-width, fixed, scrollable, above everything */
  .dock{
    position:fixed !important; left:0 !important; right:0; bottom:0 !important; transform:none !important;
    width:100%; max-width:none; border-radius:0; gap:2px; justify-content:space-between;
    padding:5px 6px calc(4px + env(safe-area-inset-bottom, 0px)); overflow-x:auto; overflow-y:hidden;
    -webkit-overflow-scrolling:touch; scrollbar-width:none; z-index:60;
    background:rgba(255,248,236,.72); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
    box-shadow:0 -8px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .dock::-webkit-scrollbar{ display:none; }
  .dock-item{ flex:1 1 0; min-width:38px; }
  .dock-icon-wrap{ width:100%; height:28px; font-size:20px; }
  .dock-label{ width:100%; font-size:9.5px; margin-top:1px; }
  .dock-dot{ width:3px; height:3px; margin-top:2px; }
  .dock-icon-wrap{ transform:none !important; transition:none; }
  .dock-item.hovered .dock-label{ color:#4a3a28; }
  /* while a drawer or game is open, the page behind must not scroll */
  body.panel-open, body.game-open{ position:fixed; inset:0; width:100%; overflow:hidden; }
  body.panel-open .stage-viewport, body.game-open .stage-viewport{ touch-action:none; }
  .panel{ -webkit-overflow-scrolling:touch; overscroll-behavior:contain; }
  /* every drawer takes the full width on phones */
  .panel, .panel.panel-resources{ width:100vw; border-radius:0; }

  /* drawer content must clear the fixed menu */
  .panel-inner{ padding-bottom:calc(40px + var(--dock-h, 88px) + env(safe-area-inset-bottom, 0px)); }
  .contact-card, .jr-card{ margin-bottom:var(--dock-h, 88px); }

  /* social + copyright leave the hero and become a scrolling footer */
  .stage .social-dock, .stage .copyright{ display:none; }
  .site-footer{
    display:flex; flex-direction:row; align-items:center; justify-content:center; gap:12px; text-align:left;
    background:#1a2440; color:rgba(253,246,230,.85); padding:10px 14px calc(10px + var(--dock-h, 60px) + env(safe-area-inset-bottom, 0px));
    font-family:'Karla',sans-serif;
  }
  .site-footer .footer-title{ display:none; }
  .site-footer .social-dock{ position:static; display:flex; gap:8px; flex-shrink:0; }
  .site-footer .social-dock a{ width:30px; height:30px; border-radius:50%; display:flex; overflow:hidden; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.35); }
  .site-footer .social-dock a svg{ width:100%; height:100%; }
  .site-footer .copyright{ position:static; font-size:10px; line-height:1.3; letter-spacing:.02em; text-shadow:none; }
}