html, body { margin: 0; height: 100%; background: #04050d; overflow: hidden; touch-action: none; }
/* Usable area: the visible viewport minus notches. 100vh alone counts the
   space behind a phone's toolbars, which cropped the top and bottom. dvh
   tracks the toolbars; the vh lines are fallbacks for older browsers. */
:root {
  --sw: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --sh: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
}
@supports (height: 100dvh) {
  :root { --sh: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  html, body { height: 100dvh; }
}
#wrap {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}
#game {
  width: min(var(--sw), calc(var(--sh) * 16 / 9));
  height: min(var(--sh), calc(var(--sw) * 9 / 16));
  flex: none;
  cursor: default;
}
#rotate { display: none; }
@media (orientation: portrait) and (max-width: 900px) {
  #rotate {
    display: flex; position: fixed; inset: 0; z-index: 2; align-items: center; justify-content: center;
    background: #0b0f1e; color: #4ade80; font: 900 22px/1.4 "Arial Black", "Segoe UI Black", Impact, sans-serif; text-align: center; padding: 2em;
  }
}

/* Off-screen textarea for the iOS copy fallback. */
.sr { position: fixed; left: -9999px; top: 0; opacity: 0; }
#game.hand { cursor: pointer; }