/* Portrait layout: measured HUD and controls reserve their own space. */
#game{width:min(100vw,560px);border:0;--hud-space:0px;--deck-space:0px}
#view{top:var(--hud-space);bottom:var(--deck-space);height:auto;transition:none;overflow:hidden}
#view canvas{display:block}
#topHUD{position:absolute;inset:0 0 auto;z-index:4;padding:calc(5px + env(safe-area-inset-top)) 12px 6px;pointer-events:none}
#topHUD header{position:relative;padding:0;height:42px;gap:8px;pointer-events:auto}
#topHUD .brand{font-size:24px}#topHUD .brand small{font-size:7px;letter-spacing:1.2px}
#topHUD header button{min-width:44px;min-height:44px;padding:6px;font-size:8px}
.playing #topHUD{background:linear-gradient(110deg,#07111ff7,#122538f7);border-bottom:1px solid #77edc338;box-shadow:0 5px 18px #02081140}
.playing #topHUD header{height:44px;margin-bottom:1px}
.playing #topHUD header button{height:44px;min-width:44px}
.playing #topHUD .brand{font-size:19px;line-height:20px}
.playing #topHUD .brand small{display:none}
#topHUD #hud{position:static;display:flex;margin:1px 0 3px;gap:12px;align-items:center;height:25px}
#hud>div{display:flex;align-items:baseline;gap:7px}#hud .right{margin-left:auto}
#topHUD #hud small{font-size:8px;letter-spacing:1px}#topHUD #hud strong{font:700 24px/1 Impact,Arial}
#topHUD #meters{position:static;display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;font-size:9px;margin:0 0 4px}
#topHUD #meters>span{width:auto;line-height:11px}
#topHUD #meters label{display:flex;align-items:center;width:auto;font-size:7px;letter-spacing:.8px;gap:5px;line-height:11px}
#topHUD meter{height:7px;flex:1;min-width:20px;margin:0;appearance:none;border:0;background:#ffffff22;border-radius:3px;overflow:hidden}
#topHUD meter::-webkit-meter-bar{background:#ffffff22;border:0;height:7px}#topHUD meter::-webkit-meter-optimum-value{background:#b7ff7a}
#topHUD #chaosMeter::-webkit-meter-optimum-value{background:#c19aff}
#topHUD #radar{position:static;display:flex;gap:4px;margin-bottom:3px}
#topHUD #radar>div{display:flex;justify-content:space-between;align-items:center;padding:3px 4px;gap:3px;min-height:22px;border-radius:4px}
#topHUD #radar b{font-size:7px;letter-spacing:0;min-width:0}#topHUD #radar small{margin:0;font-size:8px;letter-spacing:0;white-space:nowrap}
#topHUD #mission{position:relative;inset:auto;display:none;background:none;padding:2px 0 0;border:0;border-radius:0;height:17px;margin:0}
#topHUD #mission span{display:none}#topHUD #mission b{font-size:8px;font-weight:500;line-height:10px;margin:0 0 3px;color:#b9cbd9}
#topHUD #mission>div{position:absolute;top:5px;right:0;width:38%;height:3px;border-radius:3px}
#topHUD #roadInfo,#topHUD #condition,#topHUD #combo,#topHUD #toast,#driftFeedback{position:static;inset:auto;width:auto;padding:0;text-align:left;pointer-events:none;font:600 8px/12px Arial;letter-spacing:.4px;min-height:0;text-shadow:none}
#topHUD #roadInfo{display:inline-block;margin-right:8px;color:#ffd48a}
#topHUD #condition{display:inline;color:#c3adff}
#statusLine{display:flex;gap:8px;align-items:center;min-height:12px}
#topHUD #statusLine #roadInfo{display:block;max-width:55%;margin:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#topHUD #statusLine #condition{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#feedbackLine{font-size:0}#game:not(.playing) #statusLine{display:none}
#topHUD #combo{color:#c7ff5c}#topHUD #toast{color:#f5ffcd}#driftFeedback{color:#96e6ff}
#topHUD #combo:empty,#topHUD #toast:empty,#driftFeedback:empty,#topHUD #roadInfo:empty,#topHUD #condition:empty{display:none}
#game:not(.playing) #roadInfo,#game:not(.playing) #condition,#game:not(.playing) #combo,#game:not(.playing) #radar,#game:not(.playing) #driftFeedback{display:none}
#game:not(.playing) #toast{margin-top:5px;text-align:center;font-size:10px}
#controlDeck{position:absolute;inset:auto 0 0;z-index:4;padding:7px 10px calc(8px + env(safe-area-inset-bottom));background:linear-gradient(110deg,#091624fa,#12283afa);border-top:1px solid #8ad5e944;touch-action:none;user-select:none;-webkit-user-select:none}
#controlDeck #powers{position:static;display:flex;gap:6px;margin:0 0 6px}
#controlDeck #powers button{min-height:44px;font-size:9px;border-radius:7px}
#controlDeck #powers small{font-size:7px;margin-top:4px;letter-spacing:.2px}
#driveControls{display:grid;grid-template-columns:39% 1fr;gap:8px}
#steerPad{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px}
#steerPad button{min-width:44px;min-height:100px;font:400 44px/1 Arial;background:#1b3447;border:1px solid #7396af88;border-radius:10px;padding:0 0 12px;touch-action:none}
#steerPad button:active{background:#366378}#steerPad span{position:absolute;bottom:9px;left:0;right:0;pointer-events:none;text-align:center;font-size:7px;letter-spacing:2px;color:#a7d7e5}
#controlDeck #actions{position:static;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:54px 44px;gap:5px}
#controlDeck #actions button{min-height:44px;min-width:44px;border-radius:9px;font-size:10px}
#controlDeck #actions small{font-size:6px;margin-top:4px;letter-spacing:.3px}
#drift{grid-area:1/1}#nitro{grid-area:1/2}#brake{grid-area:2/1}#horn{grid-area:2/2}
#game.playing .vignette{top:var(--hud-space);bottom:var(--deck-space);height:auto;background:linear-gradient(#06101815,transparent 60%,#040b1833)}
#game.playing #speedFX{top:var(--hud-space);bottom:var(--deck-space);height:auto}
#game.playing #powerFX{top:var(--hud-space);bottom:var(--deck-space)}
#panel{top:19%;max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;touch-action:pan-y}
@media(max-height:650px){#topHUD{padding-inline:9px}.playing #topHUD{padding-top:calc(3px + env(safe-area-inset-top));padding-bottom:3px}#topHUD #hud strong{font-size:21px}#topHUD #hud{height:23px}#topHUD #radar>div{min-height:20px;padding:2px 3px}#topHUD #mission{height:15px}#controlDeck{padding:5px 8px calc(5px + env(safe-area-inset-bottom))}#controlDeck #actions{grid-template-rows:48px 44px}#steerPad button{min-height:97px}#panel{top:15%;padding:12px}#panel h1{font-size:46px;margin:10px 0}#panel p{margin:9px 0;font-size:10px}#panel .best{margin-top:7px}#panel .primary{padding:13px}}
@media(prefers-reduced-motion:reduce){#speedFX{display:none}#actions button.active{transform:none}}