:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #10261a; }
@supports (height: 100dvh) { html, body { height: 100dvh; } }
body { font-family: Arial, Helvetica, sans-serif; touch-action: none; overscroll-behavior: none; }
#game-shell, #game { width: 100%; height: 100%; }
#game-shell { position: relative; box-sizing: border-box; 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); user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#game canvas { display: block; margin: 0 auto; }
#rotate-hint {
  display: none; position: fixed; inset: 0; z-index: 20;
  align-items: center; justify-content: center; padding: 32px;
  background: #10261a; color: #fff7dc; text-align: center;
  font-size: clamp(20px, 5vw, 34px); font-weight: 700;
}
@media (orientation: portrait) and (max-width: 900px) {
  #rotate-hint { display: flex; }
  #game { visibility: hidden; }
}

/* Web-only controls, deliberately outside the Phaser canvas. */
[hidden] { display: none !important; }
#web-fullscreen-toggle {
  position: absolute; left: max(8px, env(safe-area-inset-left, 0px));
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  z-index: 9; width: 42px; height: 42px; border: 1px solid #e9dfbb66;
  border-radius: 12px; background: #10261acc; color: #fff7dc;
  font: 28px/1 Arial, sans-serif; opacity: .65; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
#web-fullscreen-toggle:hover, #web-fullscreen-toggle:focus-visible { opacity: 1; }
#web-fullscreen-help {
  position: fixed; inset: 0; z-index: 40; display: flex;
  align-items: center; justify-content: center;
  background: #0b1b14e8; padding: max(20px, env(safe-area-inset-top, 0px))
    max(20px, env(safe-area-inset-right, 0px))
    max(20px, env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  overflow: auto; touch-action: pan-y;
}
.web-fullscreen-help-card {
  width: min(100%, 540px); max-height: 100%; overflow: auto;
  padding: clamp(16px, 3vw, 26px); border-radius: 16px; border: 1px solid #b8a46d;
  background: #193b2b; color: #fff7dc; font: 16px/1.5 Arial, sans-serif;
  text-align: left; box-shadow: 0 14px 48px #0008; touch-action: pan-y;
}
.web-fullscreen-help-card h2 { margin: 0 0 12px; font: bold clamp(19px, 3vw, 26px)/1.2 Arial, sans-serif; }
.web-fullscreen-help-card p { margin: 0 0 12px; }
#web-fullscreen-dismiss {
  min-height: 44px; margin-top: 8px; padding: 8px 22px; border: 0;
  border-radius: 10px; background: #f0c95d; color: #21381f; font: bold 17px Arial, sans-serif;
  cursor: pointer; touch-action: manipulation;
}
@media (orientation: portrait) and (max-width: 900px) { #web-fullscreen-toggle { display: none; } }