/* Shared navigation stays in #header. This screen owns only the race viewport. */
.race-room.has-drag{padding:0;background:#10131d;font-family:Manrope,Arial,sans-serif}
.drag-screen{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#131925;color:#f4f1eb}
.drag-stage,.drag-stage canvas,.drag-shade{position:absolute;inset:0;width:100%;height:100%;display:block}
.drag-stage{touch-action:none}
.drag-shade{pointer-events:none;background:linear-gradient(#090d1670 0,transparent 26%,transparent 65%,#090b10dd 100%);z-index:1}
.drag-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.drag-ui :is(button,a){pointer-events:auto}
.drag-heading{position:absolute;top:clamp(12px,2vh,25px);left:max(20px,env(safe-area-inset-left));display:flex;gap:16px;align-items:flex-start;text-shadow:0 2px 8px #000}
.drag-heading>button{width:52px;height:52px;font-size:32px;padding:0!important;line-height:1;background:linear-gradient(#22252bbf,#11141bcf)!important;border:1px solid #e4d8b984!important;border-radius:12px!important}
.drag-heading h1{font-size:clamp(24px,2.7vw,42px);line-height:1.05;margin:0 0 12px;letter-spacing:-.05em;font-weight:850}
.drag-heading p{display:flex;gap:clamp(12px,2.4vw,40px);margin:0;color:#e0dad4;font-size:clamp(12px,1.25vw,20px)}
.drag-heading p span{white-space:nowrap}
.drag-versus{position:absolute;top:clamp(95px,15vh,145px);left:3.2%;right:3.2%;display:grid;grid-template-columns:minmax(0,1fr) 18% minmax(0,1fr);align-items:center;gap:0}
.drag-driver{height:clamp(86px,12.5vh,122px);display:flex;align-items:center;gap:12px;position:relative;padding:10px 12px;background:linear-gradient(110deg,#141519f2,#0d1119dc);border:1px solid #bab6b578;border-radius:18px;box-shadow:0 6px 24px #0008,inset 0 1px #ffffff15;min-width:0;animation:drag-enter .5s ease both}
.drag-driver.is-player{border-color:#ffcc62;box-shadow:0 0 0 1px #ffc44544,0 0 20px #ffa82740,inset 0 1px #fff2}
.drag-avatar{display:grid;place-items:center;width:clamp(44px,5.5vw,86px);height:85%;flex:none;border:1px solid #a8a6a05c;border-radius:10px;background:radial-gradient(ellipse at 50% 25%,#69513c,#191e25 80%);font-size:clamp(23px,3vw,44px);font-weight:800;color:#f0b748}
.drag-driver.is-player .drag-avatar{border-color:#ffcb67}
.drag-driver-copy{min-width:0;align-self:center;z-index:1}
.drag-driver-copy>strong{display:block;font-size:clamp(14px,1.45vw,23px);max-width:22ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drag-driver.is-player .drag-driver-copy>strong{color:#ffcf58}
.drag-driver h2{font-size:clamp(13px,1.42vw,23px);font-weight:650;line-height:1.1;margin:6px 0}
.drag-driver p{font-size:clamp(11px,1.05vw,17px);color:#bdbabc;margin:0}
.drag-car-render{height:93%;width:40%;margin-left:auto;object-fit:contain;filter:drop-shadow(0 4px 4px #0009);mask-image:linear-gradient(90deg,transparent,#000 15%);pointer-events:none}
.drag-power{position:absolute;right:12px;bottom:7px;color:#ffce61;background:#12161beb;border:1px solid #e8b851;border-radius:9px;padding:1px 9px;font-size:clamp(13px,1.3vw,21px);white-space:nowrap}
.drag-power small{font-size:.7em;font-weight:600}
.drag-vs{justify-self:center;font-size:clamp(40px,5vw,80px);font-style:italic;font-weight:900;line-height:1;color:#ffdc8b;text-shadow:0 0 5px #fff3d6,0 0 14px #ffaf3b,0 0 35px #ff6c1777;letter-spacing:-.07em}
.drag-bottom{position:absolute;left:2.3%;right:2.3%;bottom:max(20px,env(safe-area-inset-bottom));display:grid;grid-template-columns:1fr 1.15fr 1fr;gap:clamp(15px,3vw,50px);align-items:end}
.drag-actions{display:flex;gap:8px;min-width:0}
.race-room .drag-actions button{min-height:70px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:8px 10px;background:linear-gradient(#33312de8,#14151aeb);border:1px solid #aaa39a88;border-radius:13px;box-shadow:inset 0 1px #ffffff14,0 6px 12px #0005;font-size:clamp(11px,.9vw,15px);white-space:nowrap}
.drag-actions .icon{width:29px;height:29px}
.drag-start-wrap{display:grid;justify-items:stretch;gap:12px;min-width:0;text-align:center}
.drag-start-wrap>span{font-size:clamp(15px,1.6vw,25px);font-weight:700;text-shadow:0 3px 9px #000}
.race-room button.drag-start{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:16px;min-height:74px;padding:12px 24px;background:linear-gradient(155deg,#ffe58f 0,#ffc73c 25%,#ffb609 60%,#f6a509)!important;border:2px solid #ffe9a5!important;border-radius:18px!important;color:#181006!important;box-shadow:inset 0 1px 2px #fff9,0 0 4px #ffe486,0 0 22px #ffae2266,0 6px 25px #ff960b36;font-size:clamp(20px,2.2vw,35px);font-weight:900;letter-spacing:-.035em;overflow:hidden;transition:transform .16s,filter .2s,box-shadow .2s;animation:drag-neon 3s ease-in-out infinite}
.drag-start .icon{width:1.25em;height:1.25em}
.drag-start:before{content:"";position:absolute;inset:-100% 55% -100% -15%;transform:skew(-28deg);background:linear-gradient(90deg,transparent,#fff4,transparent);pointer-events:none;z-index:-1}
.race-room .drag-start:disabled{animation:none;opacity:.55;filter:saturate(.5);box-shadow:0 0 8px #ffaa2220;cursor:default}
.drag-start-wrap>small:empty{display:none}
.drag-start-wrap>small{font-size:11px;color:#ffd59f;background:#10141ade;padding:4px;border-radius:5px;max-width:100%;max-height:2.8em;overflow:auto}
.drag-prize{justify-self:end;padding:12px 15px;background:linear-gradient(135deg,#211c18ee,#10151be8);border:1px solid #c5ab7a8c;border-radius:16px;box-shadow:inset 0 1px #fff2;min-width:0}
.drag-prize>strong{display:block;font-size:clamp(13px,1.35vw,21px);margin-bottom:8px}
.drag-prize>div{display:flex;align-items:center;gap:12px;white-space:nowrap;color:#ffd06b}
.drag-prize b,.drag-prize span{font-size:clamp(13px,1.25vw,21px);padding:6px 10px;border:1px solid #c1a56c33;background:#0d1118a6;border-radius:9px}
.drag-prize .icon{width:34px;height:34px}
.drag-notice{position:absolute;bottom:2px;left:10%;right:10%;margin:0;font-size:12px;line-height:1.3;text-align:center;color:#ffe0a6;background:#0a1018e8;border-radius:7px;padding:5px;z-index:8;pointer-events:none;max-height:3em;overflow:hidden}
.drag-notice:empty{display:none}
.drag-loading,.drag-fatal{position:absolute;inset:35% 20%;z-index:3;display:grid;place-content:center;text-align:center;background:#0e1620e8;border:1px solid #b88a3a;border-radius:12px;padding:20px}
.drag-loading{animation:drag-load 1.5s ease-in-out infinite}
.drag-dialog{width:min(590px,94vw);max-height:calc(100dvh - 20px);padding:0;color:#e8eaed;font:500 14px/1.5 Manrope,Arial,sans-serif;overflow:auto}
.drag-dialog>header{display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;padding:12px 18px;background:#171d26;z-index:1}
.drag-dialog h2{margin:0;font-size:21px}
.drag-dialog-body{padding:10px 20px 18px}
.drag-dialog-body label{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 0;border-bottom:1px solid #ffffff16}
.drag-dialog-body input{accent-color:#ffbf48;width:22px;height:22px}
.drag-dialog-body :is(button,select){color:#f3e8ce;background:#222a34;border:1px solid #c0a56c69;border-radius:7px;padding:9px 13px;min-height:40px}
.drag-dialog-body dl>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0;border-bottom:1px solid #ffffff12}
.drag-dialog-body dd{margin:0;text-align:right}
.drag-pick-car{display:flex;width:100%;text-align:left;margin:8px 0}
.drag-pick-car small{display:block;color:#c1b8a6}
.drag-live-ui{touch-action:none;user-select:none;-webkit-user-select:none}
.drag-telemetry{position:absolute;top:15px;left:max(20px,env(safe-area-inset-left));display:flex;gap:22px;align-items:center;padding:12px 18px 18px;border:1px solid #d2a65e88;border-radius:14px;background:linear-gradient(130deg,#0d1522ee,#11151ed9);box-shadow:0 6px 20px #0006}
.drag-telemetry>div:not(.drag-tach){display:grid;gap:2px}
.drag-telemetry strong{font-size:44px;line-height:1;color:#ffd16c}
.drag-telemetry [data-rpm]{font-size:23px;font-variant-numeric:tabular-nums}
.drag-telemetry small{font-size:9px;color:#a9acb7;letter-spacing:.14em}
.drag-tach{position:absolute;left:12px;right:12px;bottom:5px;height:4px;border-radius:3px;background:#555b6855;overflow:hidden}
.drag-tach i{display:block;height:100%;background:linear-gradient(90deg,#e1b257,#ffd16c 75%,#ff4b30);transition:width .1s}
.drag-telemetry.shift-now{border-color:#fff1a2;box-shadow:0 0 24px #ffc43677}
.drag-progress{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:32%;max-width:490px;text-shadow:0 2px 5px #000}
.drag-progress>div:first-child{display:flex;justify-content:space-between;gap:5px;margin-bottom:7px;font-size:13px}
.drag-progress small{display:block;text-align:center;color:#d3c9b9;font-size:12px;margin-top:5px}
.drag-lanes{position:relative;height:13px;border-block:1px solid #ffffff3a;background:#111722aa}
.drag-lanes i{position:absolute;left:0;width:5%;height:4px;top:1px;background:#ffc34b;box-shadow:0 0 8px #ffbe4d88;transition:left .14s linear}
.drag-lanes i+ i{top:7px;background:#bed2e8;box-shadow:none}
.drag-live-exit{position:absolute;right:max(16px,env(safe-area-inset-right));top:18px;min-height:40px!important;background:#111923d9!important}
.drag-countdown{position:absolute;left:50%;top:35%;transform:translateX(-50%);font-size:clamp(42px,7vw,100px);font-style:italic;font-weight:900;color:#ffdc78;text-shadow:0 0 25px #ff8f20c0,0 2px 3px #000}
.drag-false-start{position:absolute;top:26%;left:50%;transform:translateX(-50%);padding:5px 12px;border:1px solid #e85c34;background:#220b09de;color:#ffb18d;font-weight:800;white-space:nowrap}
.drag-pedals{position:absolute;left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));bottom:max(15px,env(safe-area-inset-bottom));display:flex;justify-content:space-between;align-items:end;gap:12px}
.drag-pedals>div{display:flex;gap:8px;align-items:end}
.race-room .drag-pedals button{min-width:70px;min-height:65px;padding:12px 17px;touch-action:none;background:linear-gradient(#303845ed,#111923f2);border:1px solid #e6c0717a;border-radius:13px;font-weight:800;font-size:16px;box-shadow:inset 0 1px #fff2,0 4px 16px #0005}
.race-room .drag-pedals .drag-gas{min-width:135px;min-height:78px;background:linear-gradient(#ffe184,#e6a121);border-color:#ffdf8d;color:#1d150c;font-size:23px;box-shadow:0 0 20px #ffac293c}
.race-room .drag-pedals .is-held{transform:translateY(2px);filter:brightness(1.35);box-shadow:inset 0 0 15px #ffc86a55}
.drag-launch-hint{padding:8px 12px;margin:0;background:#101722dd;border-radius:7px;text-align:center;color:#e3d4b5;font-size:12px}
.drag-result{position:absolute;inset:14% 25% 9%;z-index:4;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;text-align:center;border:1px solid #c1a379;border-radius:20px;background:linear-gradient(145deg,#17202bed,#0b111bef);box-shadow:0 14px 70px #0009;overflow:auto;animation:drag-enter .5s ease both}
.drag-result.won{border-color:#ffcb5c;box-shadow:0 0 40px #ffa42b25,0 14px 70px #0009}
.drag-result-kicker{color:#fbd17c;font-size:13px;letter-spacing:.2em}
.drag-result h1{font-size:clamp(28px,3.3vw,55px);margin:0;line-height:1.1}
.drag-result-time{font-size:clamp(26px,3vw,45px);color:#ffcf67;font-variant-numeric:tabular-nums}
.drag-result p{margin:0;font-size:12px;color:#c9cbd2}
.drag-result-reward{display:flex;gap:14px;padding:12px 0;border-block:1px solid #d4bc7740;color:#eac682}
.drag-result details{font-size:12px;width:100%;text-align:center}
.drag-result summary{cursor:pointer;min-height:25px}
.drag-result-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.drag-result .drag-result-actions .drag-start{font-size:17px;min-height:45px;padding:8px 16px;border-radius:10px!important}
.drag-result .drag-result-actions>button:not(.drag-start),.drag-result a{padding:9px;font-size:13px}
.drag-result .drag-notice{position:static;max-height:none;padding:0;background:none}
@media(hover:hover){.race-room button.drag-start:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-2px)}.race-room .drag-actions button:hover{border-color:#ffce73;background:#34302a}}
.race-room button.drag-start:not(:disabled):active{transform:translateY(2px) scale(.99)}
@media(max-width:1000px) and (orientation:landscape),(max-height:540px) and (orientation:landscape){
 .drag-heading{top:9px;left:max(12px,env(safe-area-inset-left));gap:9px}
 .drag-heading>button{width:34px;height:34px;font-size:24px;border-radius:8px!important}
 .drag-heading h1{font-size:23px;margin:0 0 6px}
 .drag-heading p{font-size:10px;gap:13px}
 .drag-versus{top:66px;left:2.5%;right:2.5%;grid-template-columns:minmax(0,1fr) 13% minmax(0,1fr)}
 .drag-driver{height:62px;padding:6px 8px;gap:8px;border-radius:11px}
 .drag-avatar{width:37px;height:44px;border-radius:6px;font-size:22px}
 .drag-driver-copy>strong{font-size:12px;max-width:19ch}
 .drag-driver h2{font-size:12px;margin:4px 0}
 .drag-driver p{font-size:9px}
 .drag-car-render{width:33%;height:100%;max-width:110px;position:absolute;right:5px;top:-3px;opacity:.8}
 .drag-driver-copy{max-width:73%}
 .drag-power{font-size:11px;padding:0 5px;bottom:4px;right:6px;border-radius:5px}
 .drag-vs{font-size:37px}
 .drag-bottom{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom));grid-template-columns:1fr 1.13fr .85fr;gap:13px}
 .drag-actions{gap:5px}
 .race-room .drag-actions button{min-height:47px;padding:5px 7px;font-size:9px;border-radius:9px;gap:3px}
 .drag-actions .icon{width:20px;height:20px}
 .drag-start-wrap{gap:5px}
 .drag-start-wrap>span{font-size:12px}
 .race-room button.drag-start{min-height:49px;font-size:23px;gap:9px;padding:7px 12px;border-radius:12px!important}
 .drag-prize{padding:7px 9px;border-radius:10px}
 .drag-prize>strong{font-size:11px;margin-bottom:5px}
 .drag-prize>div{gap:5px}
 .drag-prize b,.drag-prize span{font-size:11px;padding:4px 5px;border-radius:6px}
 .drag-prize .icon{display:none}
 .drag-notice{font-size:9px;padding:3px;max-height:2.8em}
 .drag-start-wrap>small{font-size:9px;position:absolute;bottom:56px;left:28%;right:28%}
 .drag-telemetry{top:9px;left:max(12px,env(safe-area-inset-left));gap:14px;padding:8px 12px 13px;border-radius:10px}
 .drag-telemetry strong{font-size:29px}
 .drag-telemetry [data-rpm]{font-size:17px}
 .drag-telemetry small{font-size:7px}
 .drag-progress{top:11px;width:33%;max-width:310px;left:55%}
 .drag-progress>div:first-child{font-size:10px;margin-bottom:5px}
 .drag-progress small{font-size:9px}
 .drag-live-exit{top:10px;right:max(10px,env(safe-area-inset-right));font-size:10px;min-height:32px!important;padding:6px 10px!important}
 .drag-countdown{font-size:46px;top:34%}
 .drag-false-start{font-size:11px;top:25%}
 .drag-pedals{left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));gap:8px}
 .race-room .drag-pedals button{min-width:50px;min-height:46px;padding:9px 13px;font-size:12px;border-radius:10px}
 .race-room .drag-pedals .drag-gas{min-width:106px;min-height:57px;font-size:20px}
 .drag-launch-hint{font-size:9px;padding:6px}
 .drag-result{inset:6% 18%;gap:6px;padding:15px;border-radius:15px}
 .drag-result-kicker{font-size:10px}
 .drag-result h1{font-size:29px}
 .drag-result-time{font-size:28px}
 .drag-result-reward{padding:7px 0;font-size:13px}
 .drag-result p,.drag-result details{font-size:10px}
 .drag-result .drag-result-actions .drag-start{min-height:38px;font-size:14px;padding:6px 10px}
 .drag-result .drag-result-actions>button:not(.drag-start),.drag-result a{font-size:11px;padding:6px}
}
@media(max-width:760px) and (orientation:landscape){
 .drag-heading h1{font-size:21px}.drag-heading p{font-size:9px;gap:10px}.drag-versus{top:62px}.drag-driver{height:57px;gap:6px}.drag-avatar{width:30px;height:38px;font-size:20px}.drag-driver-copy>strong{font-size:10px}.drag-driver h2{font-size:10px}.drag-driver p{font-size:8px}.drag-car-render{width:29%;opacity:.6}.drag-driver-copy{max-width:80%}.drag-vs{font-size:32px}.drag-power{font-size:10px}.drag-bottom{grid-template-columns:1fr 1.23fr .8fr;gap:8px}.race-room .drag-actions button{font-size:8px;padding:5px}.race-room button.drag-start{font-size:21px;min-height:47px}.drag-prize>strong{font-size:9px}.drag-prize b,.drag-prize span{font-size:10px;padding:3px 4px}.drag-prize{padding:7px}.drag-start-wrap>span{font-size:11px}.drag-result{inset:5% 16%}
}
@media(prefers-reduced-motion:reduce){.drag-driver,.drag-start,.drag-result,.drag-loading{animation:none!important}}
body.no-motion .drag-screen *{animation:none!important;transition:none!important}
@keyframes drag-enter{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
@keyframes drag-neon{50%{box-shadow:inset 0 1px 2px #fff9,0 0 7px #ffe486,0 0 28px #ffae2280,0 6px 25px #ff960b36}}
@keyframes drag-load{50%{opacity:.65}}