/* Game UI is a control surface, not selectable page content. */
html, body { overscroll-behavior:none; }
body, body * { -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
input, textarea, select, [contenteditable]:not([contenteditable="false"]) { -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
button, a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
canvas, #hook, #boost { touch-action:none; }
img, svg, canvas { -webkit-user-drag:none; }

/* Never use a desktop minimum height for an iPhone's available viewport. */
html { height:100%; background:#08121d; }
body { position:fixed; inset:0; width:100%; height:100%; overflow:hidden; }
#app { width:100%; height:100vh; height:100dvh; height:var(--game-viewport-height,100dvh); min-height:0 !important; }
#app > header { z-index:7; top:max(12px,env(safe-area-inset-top)); left:max(4%,calc(env(safe-area-inset-left) + 10px)); right:max(4%,calc(env(safe-area-inset-right) + 10px)); }
#app .top-hud, #app .race-top { top:calc(env(safe-area-inset-top) + 84px); left:max(5%,calc(env(safe-area-inset-left) + 12px)); right:max(5%,calc(env(safe-area-inset-right) + 12px)); }
#app .bottom-hud, #app .race-bottom { bottom:calc(env(safe-area-inset-bottom) + 24px); left:max(5%,calc(env(safe-area-inset-left) + 12px)); right:max(5%,calc(env(safe-area-inset-right) + 12px)); }
#app footer { bottom:calc(env(safe-area-inset-bottom) + 14px); }
html[data-game-session=true] #app footer,
html[data-game-session=true] #app header .wordmark,
html[data-game-session=true] #app header .prototype,
html[data-game-session=true] #app header .poc-tag { display:none; }
html[data-game-session=true] #app header { justify-content:flex-end; }
html[data-game-session=true] #app .progress-track { bottom:calc(env(safe-area-inset-bottom) + 10px); }
.overlay, .screen { overscroll-behavior:contain; }
dialog { max-height:calc(var(--game-viewport-height,100dvh) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px); overscroll-behavior:contain; }
#screen-dialog { width:min(470px,calc(100vw - 32px)); color:#e8eff1; background:#10212f; border:1px solid #a5c0d15c; padding:28px; overflow:auto; }
#screen-dialog h2 { font:italic 800 32px/1.05 Arial,sans-serif; margin:12px 0 20px; letter-spacing:-1px; }
#screen-dialog p { font:14px/1.6 Arial,sans-serif; color:#b7cbd8; }
#screen-dialog button { display:block; min-height:44px; width:100%; margin:12px 0 0; padding:12px; border:1px solid #8aedff75; background:#173245; color:#d1f6ff; font:700 11px Arial,sans-serif; letter-spacing:1px; }
#screen-dialog #close-screen { width:44px; margin:0 0 0 auto; }
#screen-dialog::backdrop { background:#06121cdb; }

/* Ravage Run uses an older page shell: make its arena fill the play session. */
html[data-game=ravage-run][data-game-session=true] .shell { width:100%; max-width:none; padding:0; }
html[data-game=ravage-run][data-game-session=true] .masthead,
html[data-game=ravage-run][data-game-session=true] .footer,
html[data-game=ravage-run][data-game-session=true] .device-note { display:none; }
html[data-game=ravage-run][data-game-session=true] #arena { height:var(--game-viewport-height,100dvh); min-height:0; border:0; }
#arena .arena-top { top:calc(env(safe-area-inset-top) + 16px); left:max(18px,calc(env(safe-area-inset-left) + 12px)); right:max(18px,calc(env(safe-area-inset-right) + 12px)); }
#arena .game-bottom { bottom:calc(env(safe-area-inset-bottom) + 18px); left:max(18px,calc(env(safe-area-inset-left) + 12px)); right:max(18px,calc(env(safe-area-inset-right) + 12px)); }

@media (max-width:780px), (max-height:520px) {
  #app header .wordmark > span { display:none; }
  #app header .prototype, #app header .poc-tag { display:none; }
  #app .tool, #app .tool.square, #arena .icon-button { min-width:44px; width:auto; min-height:44px; height:44px; }
  #app .tool.square { width:44px; }
  #app header nav { gap:4px; }
  #app select { font-size:16px; }
  #app #menu { top:calc(env(safe-area-inset-top) + 95px); }
  #app #menu-status, #app #world-status { display:none; }
  #app .overlay { padding-top:calc(env(safe-area-inset-top) + 80px); padding-bottom:calc(env(safe-area-inset-bottom) + 20px); }
  html[data-game=ravage-run] .shell { width:100%; max-width:none; padding:0; }
  html[data-game=ravage-run] .masthead, html[data-game=ravage-run] .footer, html[data-game=ravage-run] .device-note { display:none; }
  html[data-game=ravage-run] #arena { height:var(--game-viewport-height,100dvh); min-height:0; border:0; }
  #arena .arena-top { flex-wrap:wrap; gap:12px; }
  #arena .idle-status { display:none; }
  #arena .utilities { margin-left:auto; gap:4px; }
  #arena .hud { order:2; width:100%; flex-basis:100%; }
  #arena .icon-button.fullscreen { display:grid; }
  #arena .menu { top:24%; }
}
@media (max-height:700px) and (max-width:780px) {
  #app #menu .slogan { display:none; }
  #app #menu h1 { margin:16px 0; }
  #app #menu .intro { margin-bottom:16px; }
  #app #menu .best { margin-top:14px; }
  #app #menu .gesture { margin-top:14px; }
}
@media (max-height:520px) and (min-width:600px) {
  #app #menu { top:calc(env(safe-area-inset-top) + 66px); }
  #app .top-hud, #app .race-top { top:calc(env(safe-area-inset-top) + 68px); }
  #app .bottom-hud, #app .race-bottom { bottom:calc(env(safe-area-inset-bottom) + 18px); }
  #app .top-hud .score > strong { font-size:24px; }
  #app .top-hud .clock > strong { font-size:28px; }
  #app #hook, #app #dash, #app #boost, #app #launch, #app #shockwave { min-height:44px; }
  #arena .arena-top { flex-wrap:nowrap; }
  #arena .hud { order:0; flex-basis:auto; width:auto; }
}

#arena.playing .arena-top { top:0; left:0; right:0; padding:calc(env(safe-area-inset-top) + 16px) max(18px,calc(env(safe-area-inset-right) + 12px)) 20px max(18px,calc(env(safe-area-inset-left) + 12px)); }

/* Fit the older desktop menu too, while retaining its corporate wordmark. */
@media (min-width:781px) and (min-height:521px) {
  html[data-game=ravage-run]:not([data-game-session=true]) .masthead { height:80px; }
  html[data-game=ravage-run]:not([data-game-session=true]) #arena { height:calc(var(--game-viewport-height,100dvh) - 80px); min-height:0; }
  html[data-game=ravage-run] .footer, html[data-game=ravage-run] .device-note { display:none; }
}
@media (max-height:520px) and (min-width:600px) {
  #arena .menu { top:78px; transform:none; }
  #arena .menu h1 { font-size:54px; line-height:.85; margin:12px 0 18px; letter-spacing:-3px; }
  #arena .menu .intro, #arena .ship-caption, #arena .idle-side { display:none; }
  #arena .menu .eyebrow { font-size:7px; }
  #arena .idle-bottom { bottom:16px; }
}

@media (max-width:780px), (max-height:520px) { #arena.playing #help { display:grid; } #app .primary, #arena .primary-button { min-height:44px; } }

#screen-dialog .all-games { display:flex; align-items:center; justify-content:center; min-height:48px; margin-top:16px; padding:12px; color:#d9f76b; border:1px solid #d9f76b55; font:700 11px Arial,sans-serif; letter-spacing:1px; text-decoration:none; }
#screen-dialog .all-games:focus-visible { outline:2px solid #d9f76b; outline-offset:3px; }