.drag-screen{z-index:150;color:#f3f7ff;background:#070c13;padding:20px max(16px,50vw - 450px);font-family:inherit;position:fixed;inset:0;overflow:auto}.drag-screen header{justify-content:space-between;align-items:center;gap:12px;display:flex}.drag-screen h2{margin:4px 0;font-size:24px}.drag-screen small{color:#a4b7cc;font-size:14px}.drag-screen button{color:#fff;cursor:pointer;background:#18293c;border:1px solid #3d536a;border-radius:10px;padding:12px 18px;font-size:16px;font-weight:800}.drag-stats{color:#9fb4cc;justify-content:space-around;margin:20px 0;font-size:14px;display:flex}.drag-stats b{color:#fff;font-size:30px}.drag-strip{background:linear-gradient(#09152466,#091524aa),url(/graphics/tahoe-shoreline-v2.webp) 50%/cover;border:1px solid #344c62;border-radius:12px;height:210px;position:relative;overflow:hidden}.drag-lane{background:#0b101c99;border-bottom:2px dashed #9bafb566;height:90px;margin-top:15px;position:relative}.drag-lane span{font-size:12px;position:absolute;top:4px;left:12px}.drag-lane img{object-fit:contain;width:21%;height:70px;transition:left 50ms linear;position:absolute;bottom:0}.drag-lane.rival{margin-top:0}.drag-tree{z-index:3;background:#060a10;border-radius:18px;gap:7px;padding:8px;display:flex;position:absolute;top:8px;right:15px}.drag-tree i{background:#293040;border-radius:50%;width:16px;height:16px}.drag-tree .amber{background:#ffc048;box-shadow:0 0 12px #ffb300}.drag-tree .green{background:#98ff41;box-shadow:0 0 15px #92ff41}.drag-finish{writing-mode:vertical-rl;border-left:4px dashed #fff;padding:8px;font-size:14px;position:absolute;top:40px;bottom:0;right:0}.drag-message{text-align:center;color:#aaff61;min-height:46px;padding:14px 0;font-size:20px;font-weight:900}.drag-tach{background:#101c2a;border:1px solid #284158;border-radius:12px;padding:18px}.drag-tach>div:first-child{align-items:baseline;gap:10px;display:flex}.drag-tach strong{font-variant-numeric:tabular-nums;font-size:40px}.drag-tach b{color:#aaff61;margin-left:auto;font-size:14px}.drag-rpm-track{background:#243548;border-radius:6px;height:34px;margin:14px 0;position:relative;overflow:hidden}.drag-rpm-fill{background:linear-gradient(90deg,#1a88d4,#48cbf1);height:100%;position:absolute}.drag-rpm-track i{background:#99ff4566;border:2px solid #b1ff63;position:absolute;top:0;bottom:0}.drag-rpm-track em{background:#fff;width:4px;position:absolute;top:0;bottom:0}.drag-controls{grid-template-columns:1fr 1fr;gap:14px;margin-top:18px;display:grid}.drag-controls button{touch-action:none;-webkit-user-select:none;user-select:none;height:88px;font-size:24px}.drag-controls small{margin-top:5px;font-size:14px;display:block}.drag-controls .gas{background:#16466b}.drag-controls .held{background:#237fb7;box-shadow:0 0 22px #1682c866}.drag-controls .shift{background:#31541c;border-color:#a5ed68}.drag-screen footer{color:#9db2c9;text-align:center;padding:18px 0;font-size:14px}.drag-result{text-align:center;font-size:18px}.drag-screen button:disabled{opacity:.4}.drag-mode-entry{z-index:8;color:#eefbe7;cursor:pointer;background:#243c1a;border:1px solid #a9e57b;border-radius:7px;align-items:center;gap:6px;width:auto;height:38px;margin:0;padding:0 12px;font-size:14px;font-weight:800;display:flex;position:absolute;top:76px;right:12px}@media (width<=520px){.drag-screen,.drag-tach{padding:12px}.drag-tach strong{font-size:32px}.drag-tach b{font-size:12px}.drag-stats b{font-size:24px}.drag-controls button{height:80px;font-size:20px}.drag-strip{height:185px}.drag-lane{height:78px}.drag-screen h2{font-size:20px}}.drag-visual{border:1px solid #3e5a72;border-radius:12px;height:clamp(230px,34vh,390px);position:relative;overflow:hidden}.drag-3d{width:100%;height:100%;position:relative}.drag-renderer{width:100%;height:100%;position:absolute;inset:0}.drag-renderer canvas{width:100%;height:100%;display:block}.drag-3d>span{text-align:center;background:#081321b0;padding:12px;position:absolute;top:45%;left:0;right:0}.drag-distance{background:#06121dbb;border-radius:6px;padding:6px 10px;font-size:14px;font-weight:700;position:absolute;bottom:12px;left:12px}.drag-controls .gas{-webkit-touch-callout:none;-webkit-user-select:none;overscroll-behavior:contain;position:relative;overflow:hidden}.pedal-fill{pointer-events:none;background:#2b9bd788;position:absolute;inset:auto 0 0}.drag-controls .gas strong,.drag-controls .gas small{pointer-events:none;position:relative}.touch-hint{display:none}.drag-controls button{touch-action:none;-webkit-tap-highlight-color:transparent}.drag-controls .shift:active{background:#567f30;transform:translateY(1px)}.drag-title{flex:1;min-width:0}.drag-title h2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.drag-header-actions{flex-shrink:0;gap:8px;display:flex}.drag-screen .drag-sound{padding:10px;font-size:14px}.drag-sound[aria-pressed=true]{color:#bfe9ff;border-color:#6ba4ce}.drag-gap{background:#06121dcc;border-radius:6px;padding:6px 9px;font-size:14px;font-weight:800;position:absolute;top:12px;left:12px}.drag-progress{background:#06121d;height:7px;position:absolute;bottom:0;left:0;right:0}.drag-progress span,.drag-progress i{background:#47bfff;height:3px;display:block}.drag-progress i{background:#ffbd50;margin-top:1px}.drag-tree .red{background:#ff5454;box-shadow:0 0 15px #ff5454}.feedback-neutral{color:#d6e4f5}.feedback-late{color:#ff9478}.tone-ready .drag-tach{border-color:#a3ef60;box-shadow:0 0 0 1px #9fef6033}.tone-ready .drag-rpm-fill{background:#75c93d}.tone-late .drag-rpm-fill{background:#e56846}.drag-controls .shift-ready{background:#548b25;border-color:#c3ff8b;box-shadow:0 0 16px #9eee4c55}.drag-result>small{color:#b8cbe0;margin:4px 0 10px;display:block}.drag-result p span{color:#b8cbe0}.drag-result button{min-height:54px}.drag-message{font-variant-numeric:tabular-nums}@media (pointer:coarse),(width<=600px){.touch-hint{display:block}.key-hint{display:none}.drag-screen{box-sizing:border-box;height:100dvh;padding:calc(8px + env(safe-area-inset-top)) 10px calc(6px + env(safe-area-inset-bottom));overscroll-behavior:none;grid-template-rows:auto auto minmax(100px,1fr) auto auto auto auto;gap:8px;display:grid;overflow:hidden}.drag-screen header{min-height:40px}.drag-screen header>div>small{display:none}.drag-screen h2{font-size:18px;line-height:1.15}.drag-screen header button{min-height:40px;padding:8px 10px;font-size:14px}.drag-stats{min-height:32px;margin:0;font-size:12px}.drag-stats b{font-size:24px}.drag-visual{height:auto;min-height:0}.drag-message{align-self:center;min-height:28px;padding:2px 0;font-size:16px;line-height:1.2}.drag-tach{border-radius:9px;padding:8px 10px}.drag-tach strong{font-size:28px}.drag-tach b{font-size:12px}.drag-tach>small{display:none}.drag-rpm-track{height:26px;margin:7px 0 0}.drag-controls{gap:12px;margin:0}.drag-controls button{border-width:2px;border-radius:14px;height:clamp(84px,16dvh,120px);padding:10px 4px;font-size:24px}.drag-controls small{white-space:normal;font-size:12px;line-height:1.2}.drag-screen footer{margin:0;padding:0;font-size:12px;line-height:1.2}.drag-result{font-size:14px}.drag-result p{margin:0 0 6px}.drag-result button{width:100%;min-height:54px}}@media (orientation:landscape) and (height<=550px){.drag-screen{padding:8px max(10px,env(safe-area-inset-right)) 4px max(10px,env(safe-area-inset-left));box-sizing:border-box;grid-template-rows:36px 28px minmax(60px,1fr) auto 16px;grid-template-columns:minmax(0,1fr) minmax(220px,.7fr);gap:6px;height:100dvh;display:grid;overflow:hidden}.drag-screen header{grid-area:1/1;min-height:0}.drag-screen h2{font-size:16px}.drag-screen header small{display:none}.drag-screen header button{min-height:32px;padding:4px 8px;font-size:12px}.drag-stats{grid-area:2/1;min-height:0;margin:0}.drag-stats b{font-size:20px}.drag-visual{grid-area:3/1/5;height:auto;min-height:0}.drag-message{grid-area:1/2/3;min-height:0;padding:4px 0;font-size:16px}.drag-tach{grid-area:3/2;padding:8px}.drag-tach strong{font-size:26px}.drag-tach>small{display:none}.drag-rpm-track{height:24px;margin:7px 0 0}.drag-controls,.drag-result{grid-area:4/2;margin:0}.drag-controls button{height:82px;padding:6px 4px;font-size:20px}.drag-screen footer{grid-area:5/1/auto/3;padding:0;font-size:12px}}.drag-tach-console{--tach-accent:#54c9ff;background:linear-gradient(125deg,#152535,#0a131e);border:1px solid #3b5268;border-radius:14px;min-width:0;padding:12px 18px;box-shadow:inset 0 1px #ffffff0c}.tach-shift-lights{gap:5px;margin:0 0 5px;display:flex}.tach-shift-lights i{background:#1c2835;border:1px solid #425267;border-radius:2px;flex:1;height:9px}.tach-shift-lights .lit.lamp-blue{background:#57cfff;box-shadow:0 0 7px #57cfff66}.tach-shift-lights .lit.lamp-amber{background:#ffd05a;box-shadow:0 0 7px #ffd05a66}.tach-shift-lights .lit.lamp-red{background:#ff624b;box-shadow:0 0 7px #ff624b66}.tach-instruments{grid-template-columns:minmax(140px,1.2fr) minmax(115px,1fr);align-items:center;gap:10px;display:grid}.tach-dial{width:100%;height:145px;display:block;overflow:visible}.tach-dial path{fill:none;stroke-linecap:round}.tach-rail{stroke:#26384a;stroke-width:14px}.tach-red-zone{stroke:#cc4b4355;stroke-width:15px}.tach-target{stroke:#9bea53;stroke-width:18px;opacity:.65}.tach-sweep{stroke:var(--tach-accent);stroke-width:7px}.tach-tick{stroke:#9cabbc;stroke-width:1px}.tach-tick.red-tick{stroke:#ff7967}.tach-number{fill:#c9d7e5;text-anchor:middle;font-size:14px;font-weight:700}.tach-needle{stroke:#f0f8ff;stroke-width:3px;stroke-linecap:round}.tach-hub{fill:#f0f8ff}.tach-gear{fill:#f0f8ff;text-anchor:middle;font-size:34px;font-weight:900}.tach-gear-label{fill:#92a8bc;text-anchor:middle;letter-spacing:1.5px;font-size:12px}.tach-readout{font-variant-numeric:tabular-nums;flex-direction:column;align-items:flex-start;gap:3px;line-height:1;display:flex}.tach-mode{color:#bdd0df;letter-spacing:1.5px;font-size:12px;font-weight:800}.tach-readout strong{letter-spacing:-2px;color:#f2f8ff;font-size:48px;line-height:1.05}.tach-unit{color:#8fa6bd;font-size:12px}.tach-status{min-width:100px;color:var(--tach-accent);letter-spacing:.5px;border:1px solid #465c70;border-radius:4px;margin-top:3px;padding:6px 10px;font-size:14px;display:block}.drag-screen .tach-range{color:#afc3d7;margin-top:3px;font-size:14px}.tach-ready{--tach-accent:#b0f16c;border-color:#8fd84f}.tach-ready .tach-status{background:#83c93a22;border-color:#8fd84f}.tach-ready .tach-shift-lights .lit{background:#b0f16c;box-shadow:0 0 8px #a5f35a77}.tach-late{--tach-accent:#ff9e62}.tach-limiter{--tach-accent:#ff614f;border-color:#ff614f;box-shadow:inset 0 0 25px #f9472c19}.tach-limiter .tach-status{color:#fff3ea;background:#842719;border-color:#ff7967}.tach-limiter .tach-shift-lights i{background:#ff624b;border-color:#ff937e;animation:.18s steps(2,end) infinite tach-cut}.tach-limiter .tach-needle{stroke:#ff8c7d}@keyframes tach-cut{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.tach-limiter .tach-shift-lights i{animation:none}}@media (pointer:coarse),(width<=600px){.drag-tach-console{border-radius:10px;padding:8px 10px}.tach-shift-lights{gap:4px;margin-bottom:3px}.tach-shift-lights i{height:7px}.tach-instruments{grid-template-columns:minmax(130px,1.2fr) minmax(105px,1fr);gap:6px}.tach-dial{height:102px}.tach-readout{gap:2px}.tach-readout strong{font-size:38px}.tach-mode{letter-spacing:1px;font-size:12px}.tach-unit{font-size:12px}.tach-status{min-width:95px;margin-top:2px;padding:4px 8px;font-size:14px}.drag-screen .tach-range{margin-top:1px;font-size:12px}}@media (orientation:portrait) and (height<=640px){.drag-screen{gap:6px}.drag-tach-console{padding:6px 8px}.tach-dial{height:84px}.tach-readout strong{font-size:32px}.tach-unit{display:none}.tach-status{padding:4px 6px;font-size:12px}.drag-screen .tach-range{font-size:12px}}@media (orientation:landscape) and (height<=550px){.drag-tach-console{grid-area:3/2;grid-template-rows:8px minmax(0,1fr);gap:4px;min-height:0;padding:6px 8px;display:grid}.tach-shift-lights{margin:0}.tach-shift-lights i{height:6px}.tach-instruments{grid-template-columns:minmax(110px,1.1fr) minmax(90px,1fr);gap:4px;min-height:0}.tach-dial{height:100%;max-height:125px}.tach-readout{gap:2px}.tach-readout strong{font-size:32px}.tach-unit{display:none}.tach-mode{letter-spacing:0;font-size:12px}.tach-status{min-width:85px;padding:4px 6px;font-size:12px}.drag-screen .tach-range{margin-top:1px;font-size:12px}}@media (pointer:coarse),(width<=600px){.tach-number,.tach-gear-label{font-size:20px}}@media (orientation:portrait) and (height<=640px){.tach-number,.tach-gear-label{font-size:24px}}.drag-stats{text-align:center;font-variant-numeric:tabular-nums;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;display:grid}.drag-stats>span{flex-direction:column;align-items:center;gap:2px;min-width:0;display:flex}.drag-stats b{font-size:clamp(18px,5vw,28px);line-height:1.15}.drag-stats small{font-size:14px;line-height:1.15}.drag-screen footer{gap:3px;display:grid}.drag-screen.drag-finished{box-sizing:border-box;height:100dvh;padding-top:calc(10px + env(safe-area-inset-top));padding-bottom:calc(10px + env(safe-area-inset-bottom));flex-direction:column;gap:10px;display:flex;overflow:hidden}.drag-finished>header{flex-shrink:0}.drag-finished>.drag-visual{flex-shrink:0;height:clamp(92px,18dvh,170px);min-height:0}.drag-result-panel{background:#101f2d;border:1px solid #51728a;border-radius:12px;flex-direction:column;flex:1;min-height:0;display:flex;overflow:hidden}.drag-result-scroll{overscroll-behavior:contain;flex:1;min-height:0;padding:12px 16px;overflow:auto}.drag-result-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.drag-result-heading small{letter-spacing:.5px;font-size:12px}.drag-result-heading h3{color:#d9e9fa;margin:4px 0;font-size:28px;line-height:1}.result-win h3{color:#b6f574}.result-foul h3{color:#ff8f80}.drag-result-cash{text-align:right;color:#c4f198;white-space:nowrap;font-size:22px}.drag-result-cash>small{letter-spacing:0;color:#bfd0df;margin-top:4px;font-size:12px;font-weight:400;display:block}.drag-result-margin{color:#d6e6f4;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px;margin:7px 0 10px;font-size:14px;display:flex}.drag-result-margin b{color:#b6f574;font-size:12px}.drag-timeslip{border-collapse:collapse;table-layout:fixed;font-variant-numeric:tabular-nums;width:100%;font-size:14px}.drag-timeslip caption{caption-side:bottom;text-align:left;color:#a9c1d4;padding:8px 0;font-size:12px;line-height:1.3}.drag-timeslip th,.drag-timeslip td{text-align:right;border-bottom:1px solid #344c60;padding:7px 8px}.drag-timeslip th:first-child{text-align:left;width:46%;padding-left:0}.drag-timeslip thead th{color:#a5c0d5;font-size:12px}.drag-timeslip tbody th{color:#d5e5f3;font-weight:400}.drag-timeslip td:nth-child(2){color:#8be0ff;background:#20465a55;font-weight:800}.drag-timeslip td:nth-child(3){color:#ffca81}.drag-timeslip .quick-light td:nth-child(2){color:#b6f574}.drag-timeslip .red-light td:nth-child(2){color:#ff8f80}.drag-timeslip .quarter-time th,.drag-timeslip .quarter-time td{border-bottom-color:#68899f;font-size:16px;font-weight:900}.drag-pass-detail{flex-wrap:wrap;justify-content:space-between;gap:6px;margin-top:6px;font-size:14px;display:flex}.drag-result-tip{color:#d0e2f0;margin:8px 0;font-size:14px;line-height:1.35}.drag-result-build,.drag-result-best{color:#a9c1d4;margin:6px 0 0;font-size:12px;line-height:1.35}.drag-result-actions{background:#0b1722;border-top:1px solid #456279;flex-shrink:0;grid-template-columns:1fr 1fr;gap:8px;padding:10px;display:grid}.drag-screen .drag-result-actions button{touch-action:manipulation;min-height:48px;padding:8px;font-size:14px}.drag-result-actions .accept-result{color:#17310d;background:#b6ed7b;border-color:#d8ffb6}.drag-result-actions .accept-result:disabled{opacity:1;color:#b7d9ae;cursor:default;background:#294332;border-color:#486c4b}.drag-result-actions .race-again{background:#165474;border-color:#71caee}.drag-result-actions .back-to-drift{background:#182b3c;grid-column:1/-1;min-height:44px}.drag-result-actions button:focus-visible{outline-offset:-4px;outline:2px solid #fff}@media (width<=600px){.drag-result-scroll{padding:10px 12px}.drag-result-heading h3{font-size:24px}.drag-result-cash{font-size:20px}.drag-timeslip th,.drag-timeslip td{padding:6px 5px}.drag-result-actions{gap:6px;padding:8px}}@media (orientation:landscape) and (height<=550px){.drag-screen.drag-finished{padding:8px max(10px,env(safe-area-inset-right)) 6px max(10px,env(safe-area-inset-left));grid-template-rows:36px minmax(0,1fr);grid-template-columns:minmax(0,1fr) minmax(280px,1fr);gap:8px;display:grid}.drag-finished>header{grid-area:1/1/auto/-1}.drag-finished>.drag-visual{grid-area:2/1;height:100%}.drag-result-panel{grid-area:2/2;height:100%}.drag-result-actions{gap:4px;padding:6px}.drag-screen .drag-result-actions button{min-height:44px}}
