/* Desktop keeps Godot's normal canvas. Only the mobile shell owns the viewport. */
html, body { touch-action: auto; overflow: auto; }
body:not(.mobile-platform) { overflow: hidden; touch-action: none; }
[hidden] { display: none !important; }
.platform-mobile {
  position: fixed; inset: 0; box-sizing: border-box;
  width: 100vw; height: 100vh; width: 100dvw; height: 100dvh;
  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);
  display: grid; place-items: center; background: #102b38;
}
.platform-mobile #canvas {
  width: min(100%, calc((100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 4 / 3));
  width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 4 / 3));
  height: auto; aspect-ratio: 4 / 3; max-height: 100%;
}
.game-active #canvas { touch-action: none; overscroll-behavior: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
body:has(.game-active) { overflow: hidden; overscroll-behavior: none; }
#platform-panel {
  position: absolute; inset: 0; z-index: 20; box-sizing: border-box;
  padding: max(18px, env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px))
    max(18px, env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  overflow: auto; font: 16px system-ui, sans-serif; text-align: center;
  background: rgba(11, 35, 46, .95); color: #fff;
}
#platform-panel h1 { font-size: clamp(20px, 4vw, 32px); margin: 8px; }
.platform-mobile[data-state="title"] #platform-panel { background: rgba(11, 35, 46, .65); }
#platform-panel button, #platform-menu {
  font: 700 18px system-ui, sans-serif; padding: 12px 22px; min-height: 48px;
  border: 2px solid #98ddd1; border-radius: 14px; background: #204758; color: white;
  cursor: pointer; touch-action: manipulation;
}
#platform-play { min-width: 220px; min-height: 70px !important; background: #286c58 !important; }
#platform-panel button:disabled { opacity: .6; cursor: wait; }
#pause-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 560px; }
#volume-settings { width: 100%; padding: 8px; }
#platform-volume { width: 160px; vertical-align: middle; }
#platform-menu { position: absolute; top: max(12px, env(safe-area-inset-top, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); z-index: 10; }
#rotate-message span { display: inline-block; font-size: 64px; animation: phone-turn 2s ease-in-out infinite; }
@keyframes phone-turn { 0%, 20% { transform: rotate(0); } 70%, 100% { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { #rotate-message span { animation: none; transform: rotate(90deg); } }