/*! POPCORN DRIFT style.css - base, touch pads and in-race chrome. Every menu
   screen lives in ui.css (the park's cream-and-wood vocabulary). */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; background: #6b4a2a; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
#game { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }

/* The finished-ghost's END RACE button. Above the touch pads (which keep
   driving while you spectate) and clear of the phone's own gesture bar. */
#endRaceBtn { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(19vh, calc(env(safe-area-inset-bottom) + 120px)); z-index: 30;
  padding: 12px 22px; border-radius: 999px; border: 1px solid #333f58;
  background: rgba(16, 20, 28, 0.9); color: #eef1f6; font: 700 15px system-ui, sans-serif;
  letter-spacing: .04em; cursor: pointer; backdrop-filter: blur(8px); }
#endRaceBtn:hover { background: rgba(30, 38, 54, 0.94); }
#endRaceBtn.called { border-color: #ffcf33; color: #ffcf33; }

/* ---- touch ---- */
#touchUI { position: fixed; inset: 0; pointer-events: none; }
/* Mobile browser chrome fights the game: iOS has ignored user-scalable=no
   since iOS 10, so pinch and double-tap zoom have to be refused per element,
   and a long press otherwise selects text or opens a callout mid-corner.
   The overlay keeps pan-y so a long setup screen can still be scrolled. */
html, body { overscroll-behavior:none; -webkit-text-size-adjust:100%; }
body { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
#game { touch-action:none; }
#overlay { touch-action:pan-y; }
input, select, textarea { user-select:text; -webkit-user-select:text; }

#controlMode { position:absolute; left:max(16px, env(safe-area-inset-left)); bottom:calc(max(12px, env(safe-area-inset-bottom)) + clamp(104px, 20vh, 124px)); min-height:36px; padding:7px 13px; border:1px solid rgba(255,255,255,.38); border-radius:18px; background:rgba(14,20,30,.72); color:#fff; font:800 12px/1 system-ui,sans-serif; letter-spacing:.5px; box-shadow:0 3px 10px rgba(0,0,0,.25); pointer-events:auto; touch-action:manipulation; }
#controlMode.tiltOn { color:#ffe27a; border-color:rgba(255,207,51,.72); }
#touchUI.tiltMode .touchSteerDeck { opacity:0; pointer-events:none; }
.touchSteerDeck { position:absolute; left:max(12px, env(safe-area-inset-left)); bottom:max(12px, env(safe-area-inset-bottom)); display:flex; gap:6px; padding:6px; border-radius:28px; background:rgba(10,15,24,.30); pointer-events:auto; touch-action:none; }
.tPad { width:clamp(88px, 13vw, 112px); height:clamp(88px, 20vh, 108px); border-radius:24px; background:rgba(20,26,38,.60); border:2px solid rgba(255,255,255,.32); box-shadow:0 5px 14px rgba(0,0,0,.25), inset 0 1px rgba(255,255,255,.12); color:rgba(255,255,255,.92); display:flex; flex-direction:column; gap:2px; align-items:center; justify-content:center; pointer-events:auto; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; touch-action:none; transition:transform .05s, background .05s, border-color .05s; }
.tPad svg { width:42px; height:42px; pointer-events:none; }
.tPad span { font:800 10px/1 system-ui,sans-serif; letter-spacing:.8px; pointer-events:none; }
.tPad.pressed, .tPad:active { transform:scale(.94); background:rgba(255,207,51,.40); border-color:rgba(255,230,130,.85); }
.tSteer { border-radius:21px; }
#tBrake { position:absolute; right:calc(max(12px, env(safe-area-inset-right)) + clamp(104px, 15vw, 126px)); bottom:max(12px, env(safe-area-inset-bottom)); width:clamp(76px, 11vw, 92px); height:clamp(76px, 17vh, 92px); }
#tFire { position:absolute; right:max(12px, env(safe-area-inset-right)); bottom:max(12px, env(safe-area-inset-bottom)); width:clamp(96px, 14vw, 116px); height:clamp(96px, 22vh, 116px); border-radius:50%; color:#ffe27a; border-color:rgba(255,207,51,.62); }
#tMirror { position:absolute; right:max(20px, env(safe-area-inset-right)); bottom:calc(max(12px, env(safe-area-inset-bottom)) + clamp(126px, 24vh, 142px)); width:clamp(64px, 9vw, 76px); height:clamp(52px, 10vh, 64px); border-radius:18px; color:#d8eeff; border-color:rgba(170,220,255,.62); }
@media (max-width: 520px) {
  .touchSteerDeck { gap:3px; padding:4px; }
  .tPad { width:82px; height:88px; }
  #tBrake { right:108px; width:72px; height:76px; }
  #tFire { width:94px; height:94px; }
  #controlMode { bottom:108px; }
}

/* Mid-race the dock is a column down the left edge, over the road. Everything
   in it that cannot be opened right now is dead weight on the playfield, so it
   goes away and PAUSE is left alone - the one button a phone has no other way
   to reach. [disabled] is the module's own answer to "this cannot be opened
   now" (canOpen()), which is why the rule reads that rather than counting
   buttons: a reordered dock would silently hide the wrong one. */
.soc-dock.ingame .soc-btn[disabled] { display:none; }

/* Out of a race the dock and the toasts are both pinned to the top-right, so a
   message landed on top of the FRIENDS button that answers it - and three of
   them buried the dock. Mid-race they already live in different corners
   (.ingame), so only the resting position needs moving: one dock's height down. */
.soc-toasts:not(.ingame) { top: calc(max(10px, env(safe-area-inset-top)) + 58px); }