/* ============================================================================
   NanoDr — shared game shell

   The sizing here exists because of one specific phone bug: 100vh on iOS
   Safari and Chrome Android measures the viewport *including* the space behind
   the URL bar and toolbars. With `overflow:hidden` on the body that pushes the
   bottom of a 16:9 game below the fold with no way to scroll to it — the game
   looks half cut off. --app-h is the real visible height, kept up to date by
   shell.js from visualViewport, with 100dvh as the CSS-only fallback.
   ==========================================================================*/
:root{ --app-w:100vw; --app-h:100vh; }
@supports (height:100dvh){ :root{ --app-w:100dvw; --app-h:100dvh; } }

html,body{
  margin:0; padding:0; height:100%;
  overflow:hidden; overscroll-behavior:none;
  -webkit-text-size-adjust:100%;
}
#stage{
  position:fixed; left:0; top:0;
  width:var(--app-w); height:var(--app-h);
  display:flex; align-items:center; justify-content:center;
}
#frame{
  position:relative;
  width:  min(var(--app-w), calc(var(--app-h) * 16 / 9));
  height: min(var(--app-h), calc(var(--app-w) * 9 / 16));
}

/* ---------------------------- corner buttons ---------------------------- */
.nd-btn{
  position:fixed; z-index:9999;
  width:56px; height:56px; padding:0; line-height:1;
  display:flex; align-items:center; justify-content:center;
  font-size:25px; font-family:inherit;
  border-radius:50%; border:3px solid rgba(255,255,255,.95);
  background:rgba(255,255,255,.92); color:inherit; text-decoration:none; cursor:pointer;
  box-shadow:0 5px 0 rgba(0,0,0,.16), 0 10px 22px rgba(0,0,0,.22);
  transition:transform .13s ease;
}
.nd-btn:active{ transform:translateY(3px); box-shadow:0 2px 0 rgba(0,0,0,.16); }
#ndHome{ left:calc(12px + env(safe-area-inset-left,0px));  bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
#ndFull{ right:calc(12px + env(safe-area-inset-right,0px)); bottom:calc(12px + env(safe-area-inset-bottom,0px)); }
@media (max-width:560px){ .nd-btn{ width:46px; height:46px; font-size:21px; border-width:2px } }
/* no Fullscreen API (iPhone Safari) — hide the button rather than lie */
body.nd-nofull #ndFull{ display:none; }

/* ---------------------------- rotate prompt ----------------------------- */
#ndRotate{ display:none }
@media (orientation:portrait) and (max-width:820px){
  #ndRotate{
    display:flex; position:fixed; inset:0; z-index:10000;
    align-items:center; justify-content:center; padding:24px; text-align:center;
    background:linear-gradient(180deg,#d9f4ff 0%,#e9f9d9 48%,#cfeeb4 100%);
    font-family:"Nirmala UI","Noto Sans Devanagari",system-ui,-apple-system,sans-serif;
  }
  .ndr-card{ background:#fff; border-radius:30px; padding:34px 26px; max-width:420px;
    box-shadow:0 12px 0 rgba(0,0,0,.10), 0 22px 44px rgba(20,50,20,.22) }
  .ndr-phone{ font-size:72px; line-height:1; animation:ndrTurn 2.2s ease-in-out infinite }
  @keyframes ndrTurn{ 0%,45%{transform:rotate(0)} 60%,100%{transform:rotate(-90deg)} }
  .ndr-hi{ margin-top:16px; font-size:30px; font-weight:900; color:#1d3a1b }
  .ndr-en{ margin-top:6px; font-size:17px; font-weight:800; color:rgba(29,58,27,.75) }
  .ndr-note{ margin-top:16px; font-size:12.5px; font-weight:700; color:rgba(29,58,27,.6); line-height:1.6 }
  @media (prefers-reduced-motion:reduce){ .ndr-phone{ animation:none } }
}