.drag-overlay{--ice:#c9f4ff;--cyan:#7be5f4;--orange:#ffb561;--glass:rgba(7,23,34,.84);position:fixed;inset:0;z-index:34;display:none;color:#e9faff;font-family:Arial,Helvetica,sans-serif;pointer-events:none;text-shadow:0 2px 8px rgba(0,10,20,.8)}
.drag-overlay.visible{display:block}
.drag-overlay *{box-sizing:border-box}
.drag-rush{position:absolute;top:14%;bottom:10%;width:19vw;max-width:300px;opacity:calc(var(--rush,0) * .43);pointer-events:none;mix-blend-mode:screen;animation:dragRush .34s linear infinite;background:repeating-linear-gradient(168deg,transparent 0 34px,rgba(210,248,255,.02) 36px,rgba(224,251,255,.52) 38px,transparent 40px 100px);mask-image:linear-gradient(90deg,#000,transparent);-webkit-mask-image:linear-gradient(90deg,#000,transparent)}
.drag-rush-left{left:0}.drag-rush-right{right:0;transform:scaleX(-1)}
@keyframes dragRush{to{background-position:0 180px}}
.drag-top{position:absolute;left:50%;top:16px;transform:translateX(-50%);min-width:min(510px,80vw);padding:10px 27px 12px;display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(120deg,rgba(8,27,39,.92),rgba(19,50,62,.84));border:1px solid rgba(136,224,244,.37);clip-path:polygon(0 0,100% 0,96% 100%,4% 100%);box-shadow:0 12px 32px rgba(0,15,22,.35)}
.drag-kicker{font-size:10px;font-weight:800;letter-spacing:.33em;color:var(--cyan)}
.drag-title{font-size:25px;line-height:1.05;letter-spacing:.15em;font-style:italic;font-weight:900}
.drag-course{font-size:10px;font-weight:800;letter-spacing:.24em;color:#a9c7d4}
.drag-tree,.drag-readout,.drag-belt-zone{position:absolute;background:var(--glass);border:1px solid rgba(147,218,235,.31);box-shadow:0 12px 35px rgba(2,15,24,.31);backdrop-filter:blur(9px)}
.drag-tree-label{font-size:10px;letter-spacing:.22em;color:#94bfd0;font-weight:800}
.drag-tree{top:100px;left:50%;transform:translateX(-50%);width:170px;padding:12px 12px 15px;text-align:center}
.drag-tree-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:10px}
.drag-tree-columns>div{display:flex;align-items:center;flex-direction:column;gap:2px}
.drag-tree-name{font-size:10px;font-weight:900;max-width:65px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#b9d7e3}
.drag-tree i{display:block;width:19px;height:18px;border-radius:50%;background:#19313d;border:2px solid #426070;box-shadow:inset 0 2px 4px rgba(0,0,0,.65)}
.drag-tree i.prestage,.drag-tree i.stage{width:17px;height:13px;border-radius:5px}
.drag-tree i.on.prestage,.drag-tree i.on.stage{background:#ffe394;box-shadow:0 0 13px #ffc65e,inset 0 0 5px #fff3ca}
.drag-tree i.on.amber1,.drag-tree i.on.amber2,.drag-tree i.on.amber3{background:#ffbd40;box-shadow:0 0 17px #ffc13e,inset 0 0 6px #fff6d8}
.drag-tree i.on.green{background:#56ffa0;box-shadow:0 0 19px #65ffaf,inset 0 0 6px #e8fff2}
.drag-tree i.on.red{background:#ff516b;box-shadow:0 0 19px #ff4567,inset 0 0 6px #ffe6ec}
.drag-readout{top:100px;right:18px;width:185px;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:9px 5px}
.drag-readout>div{min-width:0}
.drag-readout span{display:block;font-size:9px;letter-spacing:.13em;color:#8cadbd;font-weight:800}
.drag-readout strong{display:block;margin-top:2px;white-space:nowrap;font-size:13px;font-weight:900;color:#e7faff}
.drag-readout .warn{color:#ffbb63}
.drag-line-readout{grid-column:1/-1;padding-top:7px;border-top:1px solid rgba(155,219,233,.2)}
.drag-belt-zone{top:301px;left:50%;transform:translateX(-50%);width:min(390px,42vw);min-width:250px;padding:12px 17px 11px;text-align:center;border-color:rgba(154,240,217,.56);background:linear-gradient(140deg,rgba(5,26,38,.94),rgba(16,54,62,.89));box-shadow:0 14px 38px rgba(2,15,24,.39),inset 0 1px rgba(193,255,236,.12)}
.drag-belt-caption{display:flex;justify-content:space-between;align-items:center;gap:5px}
.drag-belt-caption span{font-size:11px;letter-spacing:.19em;font-weight:900;color:#c3f6e8}
.drag-belt-caption strong{margin:0;font-size:13px;color:#8fc1d0;letter-spacing:.14em}
.drag-belt-zone.optimal .drag-belt-caption strong{color:#72efb1}
.drag-belt-zone.hot .drag-belt-caption strong{color:#ffb16f}
.drag-belt-current{font-size:27px;font-weight:900;line-height:1.1;margin-top:5px;letter-spacing:.05em;color:#f0fffb}
.drag-belt-zone.optimal .drag-belt-current{color:#8dffd0}
.drag-belt-zone.hot .drag-belt-current{color:#ffd0a5}
.drag-belt-scale{position:relative;height:18px;margin-top:9px;border:1px solid #7194a0;border-radius:8px;background:linear-gradient(90deg,#397b99,#8cbecc 28%,#b9c9c3 51%,#c8a16c 72%,#d64e4f);box-shadow:inset 0 1px 5px rgba(0,9,16,.7)}
.drag-belt-scale i{position:absolute;top:-3px;height:22px;border:2px solid #a3ffd1;border-radius:3px;background:rgba(80,239,156,.33);box-shadow:0 0 11px rgba(117,248,179,.65),inset 0 0 7px rgba(117,248,179,.2)}
.drag-belt-scale b{position:absolute;top:-6px;width:5px;height:28px;transform:translateX(-50%);border-radius:3px;background:#fff;box-shadow:0 0 0 1px #102d3b,0 0 9px #fff}
.drag-belt-ticks{display:flex;justify-content:space-between;color:#aac7d0;font-size:9px;font-weight:800;margin-top:5px}
.drag-belt-target{margin-top:2px;text-align:center;font-size:10px;font-weight:900;letter-spacing:.13em;color:#a0e8c1}
.drag-bottom{position:absolute;bottom:82px;left:50%;transform:translateX(-50%);width:min(650px,65vw);padding:11px 18px 12px;background:linear-gradient(90deg,rgba(4,20,30,.89),rgba(20,53,66,.87),rgba(4,20,30,.89));border:1px solid rgba(127,212,230,.27);text-align:center;box-shadow:0 12px 36px rgba(0,10,18,.43)}
.drag-phase{font-size:13px;font-weight:900;letter-spacing:.25em;color:#e4faff}
.drag-distance{height:4px;margin:9px 0;background:#244859;overflow:hidden}
.drag-distance i{display:block;height:100%;width:0;background:linear-gradient(90deg,#78ddf6,#ffd08b);box-shadow:0 0 14px #9ae8f7}
.drag-controls{font-size:9px;letter-spacing:.1em;font-weight:800;color:#a4bfca;margin-top:8px}
.drag-actions{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:8px;width:min(840px,95vw);pointer-events:auto}
.drag-actions button,.drag-actions select{appearance:none;border:1px solid rgba(152,233,249,.38);background:rgba(8,29,42,.95);color:#e8faff;border-radius:4px;padding:12px 15px;font-size:11px;font-weight:900;letter-spacing:.08em;cursor:pointer;white-space:nowrap;touch-action:none}
.drag-actions button:hover,.drag-actions button:focus-visible,.drag-actions select:focus-visible{border-color:#b8f3ff;background:#174556;outline:0}
.drag-actions button:active{transform:translateY(2px)}
.drag-actions #dragLaunch{min-width:205px;background:linear-gradient(120deg,#d5792b,#ffb04d);color:#14232b;border-color:#ffca80;box-shadow:0 3px 18px rgba(255,148,54,.33)}
.drag-actions #dragShift{background:#167185;border-color:#6cdef0}
.drag-actions .drag-steer{min-width:77px;background:#163e50;border-color:#79bfdb;color:#e4faff}
.drag-actions .drag-steer:active{background:#4f8fa9}
.drag-actions #dragExit{padding-inline:10px;background:rgba(9,25,34,.78)}
.drag-length-label{display:flex;align-items:center;gap:7px;font-size:10px;letter-spacing:.12em;font-weight:900;color:#afd1dc;white-space:nowrap}
.drag-actions select{padding:10px 22px 10px 9px}
/* Pointer or thumb, nothing in the run row goes under 44px. */
@media(min-width:721px){.drag-actions button,.drag-actions select{min-height:44px}}
.drag-results{display:none;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(580px,91vw);max-height:calc(100vh - 160px);overflow:auto;padding:20px 23px 22px;background:linear-gradient(145deg,rgba(6,25,37,.97),rgba(16,47,61,.97));border:2px solid rgba(145,230,246,.68);box-shadow:0 20px 70px #00121ecc;pointer-events:auto}
.drag-results.visible{display:block}
.drag-fan{display:none;margin-top:7px;color:#a3f0f8;font-size:11px;font-weight:900;letter-spacing:.07em;text-align:center}
.drag-fan.visible{display:block}.drag-fan.angry{color:#ffb266}
#dragAgain{display:block;width:100%;margin-top:14px;padding:13px;border:1px solid #ffcc89;background:#f59d39;color:#122630;font-size:11px;font-weight:900;letter-spacing:.14em;cursor:pointer}
#dragResultsExit{display:block;width:100%;min-height:44px;margin-top:8px;border:1px solid #86adba;background:#173a48;color:#e9faff;font-size:11px;font-weight:900;letter-spacing:.14em;cursor:pointer}
.drag-utility{display:contents}
#dragMenu{display:none}
.drag-results-heading{text-align:center;font-size:22px;font-weight:900;font-style:italic;letter-spacing:.2em;color:#daf7ff;border-bottom:1px solid #4b8293;padding-bottom:14px}
.drag-results-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;text-align:right;margin-top:8px}
.drag-results-grid>div{padding:9px 7px;border-bottom:1px solid rgba(156,223,235,.17);font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drag-results-grid>div:nth-child(3n+1){text-align:left;color:#8eb2c0;font-size:11px;letter-spacing:.09em}
.drag-results-grid>div:nth-child(3n+2){color:#8eeaff}
.drag-results-grid>div:nth-child(3n){color:#ffc783}
.drag-results-grid>div[data-result-player="quarter"],.drag-results-grid>div[data-result-opponent="quarter"]{font-size:19px;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.08);overflow:visible}
.drag-results-grid>div[data-result-player="quarter"]{color:#bcf6ff}
.drag-results-grid>div[data-result-opponent="quarter"]{color:#ffcf91}
.drag-result-callout{text-align:center;margin-top:19px;font-size:18px;letter-spacing:.17em;font-weight:900;color:#89f3cd}
.drag-result-callout.red{color:#ff6879}
.drag-reward:not([hidden]){display:block;text-align:center;margin-top:10px;padding:10px;border:1px solid rgba(139,255,183,.55);background:rgba(39,100,76,.27);font-size:16px;font-weight:900;letter-spacing:.12em;color:#aaffc8}
@media(max-width:720px){
  .drag-top{top:5px;min-width:min(290px,calc(100vw - 16px));padding:7px 17px 8px}
  .drag-title{font-size:17px}.drag-kicker,.drag-course{font-size:8px}
  .drag-tree{top:82px;left:50%;right:auto;width:108px;padding:8px 7px 10px}
  .drag-tree-columns{gap:6px;margin-top:6px}.drag-tree i{width:15px;height:15px}
  .drag-tree i.prestage,.drag-tree i.stage{width:14px;height:10px}
  .drag-tree-columns>div{gap:2px}.drag-tree-name,.drag-tree-label{font-size:8px}
  .drag-readout{top:82px;right:6px;width:clamp(94px,30vw,118px);grid-template-columns:1fr 1fr;padding:7px;gap:5px 3px}
  .drag-readout span{font-size:6px;letter-spacing:.02em}.drag-readout strong{font-size:9px;margin:0}
  .drag-line-readout{padding-top:4px}
  .drag-belt-zone{top:256px;width:min(270px,calc(100vw - 20px));min-width:0;padding:9px 12px 8px}
  .drag-belt-caption span{font-size:9px}.drag-belt-caption strong{font-size:10px}
  .drag-belt-current{font-size:22px;margin-top:3px}
  .drag-belt-scale{height:15px;margin-top:7px}.drag-belt-scale i{height:19px}.drag-belt-scale b{height:25px}
  .drag-belt-ticks{font-size:7px;margin-top:4px}.drag-belt-target{font-size:8px}
  .drag-bottom{bottom:172px;width:calc(100vw - 12px);padding:7px 9px}
  .drag-phase{font-size:10px}
  /* Keyboard hints on a touch screen are pure clutter, and the room is needed. */
  .drag-controls{display:none}
  /* This row is the whole interface on a phone. Every control was 24-42px tall
     at 8px type, and TEST & TUNE had no grid slot at all so it landed in a 24px
     implicit row overlapping the home indicator. Three even rows, 44px minimum. */
  .drag-actions{bottom:max(6px,env(safe-area-inset-bottom));display:grid;align-items:stretch;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:44px 46px 58px;gap:6px;width:calc(100vw - 12px)}
  .drag-actions button,.drag-actions select{font-size:10px;padding:4px 6px;min-width:0}
  /* The word DISTANCE is dropped visually so the select gets the whole cell.
     The label element stays, so the select keeps its accessible name. */
  .drag-actions .drag-length-label{grid-column:1;grid-row:1;justify-content:stretch;gap:0;font-size:0}
  .drag-length-label select{flex:1;min-width:0;height:100%;font-size:10px;padding:0 15px 0 7px}
  #dragSkipBurnout{grid-column:2;grid-row:1}#dragTestTune{grid-column:3;grid-row:1}#dragExit{grid-column:4;grid-row:1}
  #dragShift{grid-column:1/-1;grid-row:2}
  #dragSteerLeft{grid-column:1;grid-row:3}.drag-actions #dragLaunch{grid-column:2/4;grid-row:3;min-width:0}#dragSteerRight{grid-column:4;grid-row:3}
  .drag-actions .drag-steer{min-width:0;font-size:10px}
  #dragSkipBurnout,#dragTestTune{white-space:normal;line-height:1.1;font-size:9px}
  .drag-belt-zone.compact{top:300px;bottom:auto;right:6px}
  .drag-results{max-height:calc(100vh - 138px);padding:14px}.drag-results-heading{font-size:17px}.drag-results-grid>div{font-size:12px;padding:8px 4px}.drag-results-grid>div:nth-child(3n+1){font-size:9px}
}
@media(max-width:720px) and (max-height:740px){
  .drag-tree i{width:12px;height:11px}.drag-tree i.prestage,.drag-tree i.stage{width:11px;height:8px}.drag-tree-columns>div{gap:1px}
  .drag-belt-zone{top:208px;padding:3px 10px}.drag-belt-caption span{font-size:8px}.drag-belt-caption strong{font-size:9px}.drag-belt-current{font-size:16px;margin-top:1px}.drag-belt-scale{height:11px;margin-top:4px}.drag-belt-scale i{height:15px}.drag-belt-scale b{height:21px}.drag-belt-ticks{display:none}.drag-belt-target{font-size:7px;margin-top:2px}
  .drag-actions{grid-template-rows:40px 44px 52px;gap:5px}
  .drag-bottom{bottom:158px;padding:5px}.drag-controls{display:none}
}
@media(max-height:600px) and (min-width:721px){
  .drag-top{top:5px;padding:5px 20px}.drag-title{font-size:18px}
  .drag-tree,.drag-readout{top:64px}
  .drag-readout{padding:7px 9px;gap:4px 3px}.drag-readout span{font-size:7px;letter-spacing:.05em}.drag-readout strong{font-size:11px}
  .drag-tree{width:140px;padding:7px 10px}.drag-tree-columns{margin-top:5px}.drag-tree-columns>div{gap:1px}.drag-tree i{width:13px;height:11px}.drag-tree i.prestage,.drag-tree i.stage{width:12px;height:8px}
  .drag-belt-zone{top:210px;width:310px;padding:5px 12px;background:linear-gradient(140deg,rgba(5,26,38,.69),rgba(16,54,62,.66))}.drag-belt-caption span{font-size:8px}.drag-belt-caption strong{font-size:9px}.drag-belt-current{font-size:18px;margin-top:1px}.drag-belt-scale{height:12px;margin-top:5px}.drag-belt-scale i{height:16px}.drag-belt-scale b{height:22px}.drag-belt-ticks{display:none}.drag-belt-target{font-size:7px;margin-top:2px}
  .drag-bottom{bottom:58px;padding:5px}.drag-distance,.drag-controls{display:none}.drag-actions{bottom:5px}.drag-actions button{padding:8px 7px;font-size:9px}.drag-actions .drag-steer{min-width:58px}
  .drag-results{max-height:calc(100vh - 120px)}
}
@media(prefers-reduced-motion:reduce){.drag-rush{animation:none;opacity:calc(var(--rush,0) * .2)}}
.drag-tree-columns>div{min-width:0}.drag-tree-name{display:block;width:100%;min-width:0}
.drag-belt-zone.compact{top:auto;bottom:92px;left:18px;right:auto;transform:none;width:230px;min-width:0;padding:7px 10px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:0 8px;text-align:left;background:rgba(5,26,38,.87)}
.drag-belt-zone.compact .drag-belt-caption{display:contents}
.drag-belt-zone.compact .drag-belt-caption span{grid-column:1;grid-row:1;font-size:8px;letter-spacing:.12em}
.drag-belt-zone.compact .drag-belt-caption strong{grid-column:1;grid-row:2;font-size:9px}
.drag-belt-zone.compact .drag-belt-current{grid-column:2;grid-row:1/3;margin:0;font-size:21px}
.drag-belt-zone.compact .drag-belt-scale,.drag-belt-zone.compact .drag-belt-ticks,.drag-belt-zone.compact .drag-belt-target{display:none}
@media(max-width:720px){.drag-belt-zone.compact{top:300px;bottom:auto;left:auto;right:6px;width:174px;padding:5px 7px}.drag-belt-zone.compact .drag-belt-current{font-size:17px}.drag-belt-zone.compact .drag-belt-caption span{font-size:7px}}
@media(max-width:720px) and (max-height:740px){.drag-belt-zone.compact{top:186px;bottom:auto;right:6px}}
@media(max-height:600px) and (min-width:721px){.drag-belt-zone.compact{top:206px;bottom:auto;right:8px;left:auto;width:190px}}
.drag-readout{width:230px}.drag-readout .drag-tach strong,.drag-readout .drag-speed strong{font-size:22px;line-height:1.05;color:#f0fcff}.drag-readout .drag-tach span,.drag-readout .drag-speed span{color:#a8dce8}.drag-boost-scale{height:5px;margin-top:5px;background:#294756;border-radius:4px;overflow:hidden}.drag-boost-scale i{display:block;height:100%;width:0;background:linear-gradient(90deg,#74d9f1,#ffad69)}
.drag-wideband{position:absolute;top:327px;right:18px;width:230px;padding:9px 11px;background:rgba(7,23,34,.86);border:1px solid rgba(147,218,235,.38);box-shadow:0 12px 35px rgba(2,15,24,.3);backdrop-filter:blur(9px)}.drag-wideband>div:first-child{display:flex;align-items:baseline;gap:7px}.drag-wideband span{font-size:9px;font-weight:900;letter-spacing:1.2px;color:#aad1dc}.drag-wideband strong{font-size:24px;color:#a9f4c9}.drag-wideband em{margin-left:auto;font-size:10px;font-style:normal;font-weight:900}.drag-wideband-scale{position:relative;height:11px;margin:7px 0 3px;border:1px solid #809fa8;border-radius:6px;background:linear-gradient(90deg,#5aa7bd,#76c6ac 38%,#9ac467 54%,#f3c271 75%,#d85d54)}.drag-wideband-scale i{position:absolute;top:-2px;height:13px;border:1px solid #bdffe3;background:#7ff7a86b}.drag-wideband-scale b{position:absolute;top:-4px;width:3px;height:17px;background:#fff;box-shadow:0 0 7px white}.drag-wideband-ticks{display:flex;justify-content:space-between}.drag-wideband-ticks span{font-size:8px;letter-spacing:0}.drag-wideband small{display:block;margin-top:5px;font-size:8px;font-weight:900;color:#aae3c5;letter-spacing:.7px}.drag-wideband.warn{border-color:#ff845d}.drag-wideband.warn strong,.drag-wideband.warn small{color:#ffac83}
@media(max-width:720px){.drag-readout{width:clamp(94px,30vw,118px)}.drag-readout .drag-tach strong,.drag-readout .drag-speed strong{font-size:14px}.drag-wideband{top:355px;right:6px;width:118px;padding:5px 6px}.drag-wideband>div:first-child{flex-wrap:wrap;gap:1px 5px}.drag-wideband span{font-size:7px;letter-spacing:.3px}.drag-wideband strong{font-size:18px}.drag-wideband em{font-size:8px}.drag-wideband small{font-size:7px}.drag-wideband-ticks span{font-size:6px}}
@media(max-width:720px) and (max-height:740px){.drag-wideband{top:295px}}
@media(max-height:600px) and (min-width:721px){.drag-wideband{top:275px;right:8px;width:190px;padding:5px 7px}.drag-wideband strong{font-size:18px}.drag-wideband-ticks{display:none}}

/* Rolling, the round gauges carry rpm, speed, boost and AFR. The side panel
   keeps only what they do not: gear, the warning state, belt temperature. */
.drag-overlay.running .drag-readout [data-tier="2"]{display:none}
.drag-overlay.results-open .drag-belt-zone{display:none}

/* Test and tune: no rival, no tree wait, straight back to the line. */
.drag-actions #dragTestTune.on{background:#f59d39;color:#122630;border-color:#ffcc89}

/* Phone drag HUD: keep the lane and sled clear. The physical tree and the
   launch button already tell the rider when to stage; the timing slip belongs
   at the finish, not across the active controls. */
@media (max-width:720px), (max-height:600px) and (pointer:coarse){
  .drag-overlay .drag-top,.drag-overlay .drag-readout,.drag-overlay .drag-bottom{display:none}
  .drag-overlay .drag-tree{top:6px;left:6px;right:auto;transform:none;width:84px;padding:6px 5px 7px;background:rgba(6,25,35,.79);border-color:rgba(135,212,228,.35)}
  .drag-overlay .drag-tree-label{display:none}
  .drag-overlay .drag-tree-columns{gap:5px;margin-top:0}
  .drag-overlay .drag-tree-columns>div{gap:1px}
  .drag-overlay .drag-tree-name{font-size:0;line-height:1.1;max-width:32px;height:9px}
  .drag-overlay [data-tree-side="player"] .drag-tree-name::after{content:'YOU';font-size:7px}
  .drag-overlay [data-tree-side="opponent"] .drag-tree-name::after{content:'RIVAL';font-size:7px}
  .drag-overlay .drag-tree i{width:12px;height:10px;border-width:1px}
  .drag-overlay .drag-tree i.prestage,.drag-overlay .drag-tree i.stage{width:12px;height:8px}
  .drag-overlay.running .drag-tree{display:none}
  .drag-overlay .drag-belt-zone,.drag-overlay .drag-belt-zone.compact{top:6px;right:6px;bottom:auto;left:auto;transform:none;display:block;width:170px;min-width:0;padding:7px 9px 8px;text-align:left;background:rgba(5,26,38,.87)}
  .drag-overlay .drag-belt-zone .drag-belt-caption,.drag-overlay .drag-belt-zone.compact .drag-belt-caption{display:flex;justify-content:space-between}
  .drag-overlay .drag-belt-caption span,.drag-overlay .drag-belt-zone.compact .drag-belt-caption span{font-size:8px;letter-spacing:.08em}
  .drag-overlay .drag-belt-caption strong,.drag-overlay .drag-belt-zone.compact .drag-belt-caption strong{font-size:9px;letter-spacing:.04em}
  .drag-overlay .drag-belt-current,.drag-overlay .drag-belt-zone.compact .drag-belt-current{display:block;margin-top:3px;font-size:21px;line-height:1}
  .drag-overlay .drag-belt-scale{height:10px;margin-top:7px}
  .drag-overlay .drag-belt-scale i{height:14px;top:-3px}
  .drag-overlay .drag-belt-scale b{height:18px;top:-5px}
  .drag-overlay .drag-belt-ticks{display:none}
  .drag-overlay .drag-belt-target{font-size:8px;letter-spacing:.04em;margin-top:4px}
  .drag-overlay .drag-belt-zone.compact{width:135px;padding:6px 8px}
  .drag-overlay .drag-belt-zone.compact .drag-belt-scale,.drag-overlay .drag-belt-zone.compact .drag-belt-target{display:none}
  .drag-overlay .drag-actions{bottom:max(6px,env(safe-area-inset-bottom));left:6px;transform:none;width:calc(100vw - 12px);height:60px;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;grid-template-rows:60px;gap:6px;align-items:stretch}
  .drag-overlay .drag-actions button{min-height:44px;font-size:11px;padding:5px 7px;line-height:1.1}
  .drag-overlay .drag-actions .drag-steer{min-width:0;font-size:10px}
  .drag-overlay .drag-actions #dragSteerLeft{grid-column:1;grid-row:1}
  .drag-overlay .drag-actions #dragLaunch{grid-column:2;grid-row:1;min-width:0;font-size:12px}
  .drag-overlay .drag-actions #dragSteerRight{grid-column:3;grid-row:1}
  .drag-overlay .drag-actions #dragShift{grid-column:2;grid-row:1;min-width:0;font-size:12px}
  .drag-overlay:not(.running) .drag-actions #dragShift{display:none}
  .drag-overlay.running .drag-actions #dragLaunch{display:none}
  .drag-overlay .drag-actions #dragSkipBurnout{position:absolute;grid-column:auto;grid-row:auto;left:0;bottom:calc(100% + 6px);width:154px;height:44px;white-space:nowrap;font-size:10px}
  .drag-overlay .drag-actions #dragMenu{position:absolute;right:0;bottom:calc(100% + 6px);display:block;width:70px;height:44px;font-size:10px;background:rgba(8,29,42,.89)}
  .drag-overlay .drag-utility{position:absolute;right:0;bottom:calc(100% + 56px);z-index:14;display:none;flex-direction:column;gap:6px;width:min(210px,calc(100vw - 12px));padding:8px;background:rgba(5,23,33,.98);border:1px solid rgba(147,218,235,.6);box-shadow:0 12px 30px #00121e9c;pointer-events:auto}
  .drag-overlay.menu-open .drag-utility{display:flex}
  .drag-overlay .drag-utility .drag-length-label{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;grid-column:auto;grid-row:auto;font-size:10px}
  .drag-overlay .drag-utility .drag-length-label select{flex:0 0 105px;min-width:0;height:44px;font-size:10px}
  .drag-overlay .drag-utility button{width:100%;min-height:44px}
  .drag-overlay.results-open .drag-actions{display:none}
  .drag-overlay .drag-results{z-index:16;max-height:calc(100vh - 24px)}
  .drag-results-grid{grid-template-columns:minmax(57px,.72fr) repeat(2,minmax(0,1fr))}
  .drag-results-grid>div[data-result-player="quarter"],.drag-results-grid>div[data-result-opponent="quarter"]{font-size:16px;letter-spacing:-.02em}
}
@media (max-height:600px) and (min-width:721px) and (pointer:coarse){
  .drag-overlay .drag-tree{width:76px}
  .drag-overlay .drag-belt-zone,.drag-overlay .drag-belt-zone.compact{width:165px}
  .drag-overlay .drag-actions{width:calc(100vw - 12px)}
}

/* The start lights are a real two-lane tower, centered until the sled leaves. */
.drag-overlay .drag-tree{z-index:9;top:102px;left:50%;right:auto;transform:translateX(-50%);width:186px;padding:8px 11px 10px;background:linear-gradient(90deg,#071118 0%,#19323a 9%,#07141b 23%,#07141b 77%,#213942 91%,#071118 100%);border:2px solid #72878e;border-radius:9px 9px 5px 5px;box-shadow:inset 0 1px #d7e6e5a8,inset 0 -6px 12px #0009,0 3px 0 #09151c,0 14px 30px #000a;text-shadow:none}
.drag-overlay .drag-tree::after{content:'';position:absolute;top:100%;left:calc(50% - 7px);width:14px;height:25px;background:linear-gradient(90deg,#162a33,#68818a 48%,#0b1920);border:1px solid #526b74;box-shadow:0 8px 17px #001922a8}
.drag-tree-crown{font-size:8px;font-weight:950;letter-spacing:.1em;color:#d8edf0;white-space:nowrap;border-bottom:1px solid #4e6972;padding:0 0 6px}
.drag-tree-crown b{color:#f9aa51}
.drag-overlay .drag-tree-columns{gap:10px;margin-top:6px}
.drag-overlay .drag-tree-columns>div{gap:3px;padding:4px 3px 5px;background:linear-gradient(90deg,#030b10,#13242a 48%,#030b10);border:1px solid #39515a;border-radius:4px;box-shadow:inset 0 1px 7px #000c}
.drag-overlay .drag-tree-name{max-width:none;height:auto;font-size:8px;line-height:1.2;letter-spacing:.08em;color:#d6eef0}
.drag-overlay .drag-tree i{width:23px;height:23px;border:3px solid #46545b;background:radial-gradient(circle at 42% 30%,#32434b,#111c23 68%);box-shadow:inset 0 3px 6px #000,0 1px 1px #9ab0ae4d}
.drag-overlay .drag-tree i.prestage,.drag-overlay .drag-tree i.stage{width:25px;height:10px;border-width:2px;border-radius:3px}
.drag-overlay .drag-tree i.on.prestage,.drag-overlay .drag-tree i.on.stage{background:#ffe3a0;border-color:#b59452;box-shadow:0 0 13px #ffd17b,inset 0 0 4px #fff6d7}
.drag-overlay .drag-tree i.on.amber1,.drag-overlay .drag-tree i.on.amber2,.drag-overlay .drag-tree i.on.amber3{background:radial-gradient(circle at 40% 35%,#fff5c4,#ffc344 52%,#bd651d);border-color:#aa783b;box-shadow:0 0 17px #ffbf4a,inset 0 0 5px #fff6cf}
.drag-overlay .drag-tree i.on.green{background:radial-gradient(circle at 40% 35%,#edffe9,#64fcb0 55%,#09894e);border-color:#458c66;box-shadow:0 0 18px #4cff9b,inset 0 0 5px #e5ffec}
.drag-overlay .drag-tree i.on.red{background:radial-gradient(circle at 40% 35%,#ffe4df,#ff5b65 55%,#9b112b);border-color:#a45b62;box-shadow:0 0 18px #ff526a,inset 0 0 5px #ffe4df}
.drag-tree-foot{padding-top:6px;font-size:7px;font-weight:900;letter-spacing:.14em;color:#88aeb8}
.drag-overlay.running .drag-tree,.drag-overlay.results-open .drag-tree{display:none}
.drag-overlay:not(.running) .drag-actions #dragShift{display:none}
.drag-overlay.running .drag-actions #dragLaunch{display:none}
.drag-overlay.results-open .drag-actions{display:none}
.drag-live-clock{display:none;position:absolute;z-index:10;top:12px;right:14px;width:148px;padding:9px 12px 8px;background:linear-gradient(145deg,#06141bed,#173844ed);border:1px solid #8dd9dc9c;border-top:3px solid #f4a856;border-radius:4px;box-shadow:0 8px 26px #00151bc9;text-align:right;text-shadow:none;font-variant-numeric:tabular-nums}
.drag-overlay.running:not(.results-open) .drag-live-clock{display:flex;flex-direction:column}
.drag-live-clock span{font-size:8px;font-weight:900;letter-spacing:.15em;color:#9dd8e1}
.drag-live-clock strong{font-size:31px;line-height:1.1;letter-spacing:-.05em;color:#fff1d4}
.drag-live-clock small{font-size:8px;font-weight:900;letter-spacing:.09em;color:#b8dce0}
.drag-crash-banner{display:none;position:absolute;z-index:12;top:108px;left:50%;transform:translateX(-50%) skewX(-8deg);padding:8px 18px;background:linear-gradient(120deg,#681f21eb,#291618ec);border:2px solid #ffc27d;box-shadow:0 9px 28px #0009,inset 0 1px #fff5;color:#fff0d7;font:950 19px system-ui,Arial,sans-serif;letter-spacing:.16em;white-space:nowrap;text-shadow:0 2px 4px #000}
.drag-overlay.crashing .drag-crash-banner{display:block}
.drag-overlay:not(.running) .drag-belt-zone{top:305px;right:18px;left:auto;transform:none;width:min(340px,32vw)}

/* Molded, high-contrast controls with a clear pressed state for thumbs. */
.drag-actions button,.drag-actions select{font-family:system-ui,Arial,sans-serif;border:1px solid #8bb7c8;border-bottom-color:#3a5967;border-radius:9px;background:linear-gradient(165deg,#285367,#102d3b 58%,#0b2330);box-shadow:inset 0 1px #d4f9ff70,inset 0 -2px #03141ba8,0 6px 15px #00141da8;color:#f5feff;text-shadow:0 1px 1px #0009;letter-spacing:.08em;transition:filter .12s,transform .12s,box-shadow .12s}
.drag-actions button:hover,.drag-actions button:focus-visible,.drag-actions select:focus-visible{border-color:#d4faff;background:linear-gradient(165deg,#37718a,#164151 64%,#102d3b);outline:2px solid #e7faff;outline-offset:2px}
.drag-actions button:active,.drag-actions button.pressed{transform:translateY(3px);filter:brightness(1.2);box-shadow:inset 0 3px 10px #001a24ce,0 1px 3px #00131aa6}
.drag-actions #dragLaunch{background:linear-gradient(165deg,#ffe5a3,#f6a13d 43%,#a94d17);border-color:#ffe2a0;border-bottom-color:#864117;color:#1b2428;text-shadow:0 1px #fff5b58f;box-shadow:inset 0 1px #fff5cb,0 6px 19px #b7541d80}
.drag-actions #dragShift{background:linear-gradient(165deg,#b0f9ff,#32aec5 42%,#14566c);border-color:#bdfdff;border-bottom-color:#0c4556;color:#09232b;text-shadow:0 1px #e9ffff9c}
.drag-actions .drag-steer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:linear-gradient(155deg,#3c7188,#143c4f 52%,#0a2330);border-color:#9ed8e8}
.drag-actions .drag-steer b{font-size:19px;line-height:1;color:#eefcff}
.drag-actions .drag-steer small{font-size:8px;line-height:1.1;letter-spacing:.16em;color:#c4eaf4}
.drag-actions #dragMenu,.drag-actions #dragSkipBurnout{background:linear-gradient(160deg,#254554,#0b2532);border-color:#789bab}
.drag-actions .drag-utility{border-radius:10px;background:linear-gradient(165deg,#14313e,#061a25)}
.drag-results #dragAgain,.drag-results #dragResultsExit{min-height:48px;border-radius:9px;font-family:system-ui,Arial,sans-serif;font-size:12px;letter-spacing:.1em;box-shadow:inset 0 1px #ffffff91,0 6px 16px #00131db0}
.drag-results #dragAgain{background:linear-gradient(160deg,#ffe3a2,#ef922c 58%,#ac531c);border-color:#ffe3a2;color:#14242a}
.drag-results #dragResultsExit{background:linear-gradient(160deg,#375d6d,#102f3f 70%);border-color:#8bb7c8;color:#effcff}
.drag-results #dragAgain:focus-visible,.drag-results #dragResultsExit:focus-visible{outline:2px solid #fff;outline-offset:2px}
.drag-results #dragAgain:active,.drag-results #dragResultsExit:active{transform:translateY(2px)}

@media (max-width:720px), (max-height:600px) and (pointer:coarse){
  .drag-overlay .drag-tree{top:max(8px,env(safe-area-inset-top));left:50%;right:auto;transform:translateX(-50%);width:170px;padding:7px 9px 8px}
  .drag-overlay .drag-tree-name{font-size:8px;max-width:none;height:auto}
  .drag-overlay [data-tree-side="player"] .drag-tree-name::after,.drag-overlay [data-tree-side="opponent"] .drag-tree-name::after{content:none}
  .drag-overlay .drag-tree-columns{gap:8px;margin-top:5px}
  .drag-overlay .drag-tree i{width:21px;height:21px;border-width:2px}
  .drag-overlay .drag-tree i.prestage,.drag-overlay .drag-tree i.stage{width:22px;height:9px}
  .drag-overlay:not(.running) .drag-belt-zone,.drag-overlay .drag-belt-zone.compact{top:242px;right:6px;left:auto;bottom:auto;transform:none;width:164px}
  .drag-overlay .drag-actions button{font-size:11px;line-height:1.12;white-space:normal}
  .drag-overlay .drag-actions .drag-steer{font-size:10px;padding:3px}
  .drag-overlay .drag-actions #dragLaunch,.drag-overlay .drag-actions #dragShift{font-size:11px;letter-spacing:.025em}
  .drag-overlay .drag-actions #dragMenu{width:76px}
  .drag-overlay .drag-actions #dragSkipBurnout{width:142px;font-size:10px}
  .drag-live-clock{top:max(7px,env(safe-area-inset-top));right:6px;width:128px;padding:6px 9px 5px}
  .drag-live-clock strong{font-size:27px}
  .drag-crash-banner{top:86px;padding:6px 12px;font-size:13px}
}
@media (max-width:720px) and (max-height:740px){
  .drag-overlay .drag-tree{width:150px;padding:5px 7px 6px}
  .drag-overlay .drag-tree-columns{gap:5px;margin-top:3px}
  .drag-overlay .drag-tree-columns>div{gap:2px;padding:3px 2px}
  .drag-overlay .drag-tree i{width:17px;height:17px}
  .drag-overlay .drag-tree i.prestage,.drag-overlay .drag-tree i.stage{width:19px;height:7px}
  .drag-overlay:not(.running) .drag-belt-zone,.drag-overlay .drag-belt-zone.compact{top:195px}
}
@media (max-height:600px) and (min-width:721px) and (pointer:coarse){
  .drag-overlay .drag-tree{top:5px;width:142px;padding:4px 6px}
  .drag-overlay .drag-tree-columns{gap:5px;margin-top:3px}
  .drag-overlay .drag-tree-columns>div{gap:1px;padding:2px}
  .drag-overlay .drag-tree i{width:15px;height:15px;border-width:2px}
  .drag-overlay .drag-tree i.prestage,.drag-overlay .drag-tree i.stage{width:17px;height:6px}
  .drag-overlay .drag-belt-zone,.drag-overlay .drag-belt-zone.compact{top:6px;width:154px}
}

/* Physical timing hardware: anodized case, visor cups and prismatic lenses. */
.drag-overlay .drag-tree {
  border-color:#687278 #292f35 #10161b #7e898f;border-width:2px 3px 5px;
  background:linear-gradient(90deg,#12171c,#353e44 3%,#11191e 8%,#090e13 49%,#182229 94%,#4a555c 98%,#12171c);
  box-shadow:inset 0 1px #c6cbd199,inset 0 -3px #000,0 2px 0 #5c6870,0 7px 0 #091119,0 16px 28px #0009;
  border-radius:11px 11px 7px 7px;
}
.drag-tree-crown {
  padding:5px 2px 7px;background:linear-gradient(#222c34,#0b1218);
  border:1px solid #46555f;border-bottom:2px solid #070c10;border-radius:4px;
  font-family:system-ui,sans-serif;letter-spacing:.085em;text-shadow:0 1px #000;
}
.drag-overlay .drag-tree-columns>div {
  background:repeating-linear-gradient(0deg,#10171d 0 2px,#131c23 2px 3px);
  border-color:#34434f #11181e #060a0f #4b5a62;box-shadow:inset 0 2px 5px #000c;
}
.drag-overlay .drag-tree-name {
  padding:3px 1px;background:linear-gradient(#39454c,#1c252d);border:1px solid #596269;
  border-radius:2px;width:100%;font-size:8px;color:#edf0e8;letter-spacing:.16em;
}
.drag-overlay .drag-tree i {
  position:relative;isolation:isolate;flex:none;
  background:linear-gradient(145deg,#6d7880,#1c252d 29%,#02080c 63%,#54616a);
  border-color:#45515a #0a1218 #66747a #222e35;box-shadow:0 3px 2px #000b,inset 0 1px #abb7bb8c;
}
.drag-overlay .drag-tree i:not(.prestage):not(.stage)::before {
  content:'';position:absolute;z-index:2;top:-4px;left:-3px;right:-3px;height:44%;
  border:1px solid #7f8c93;border-bottom:0;border-radius:50% 50% 0 0;
  background:linear-gradient(#59666e,#202c33 48%,#070e13);box-shadow:0 2px 3px #000b;
}
.drag-overlay .drag-tree i .drag-lamp-lens {
  position:absolute;inset:1px;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 36% 24%,#d0e1ed40 0 9%,transparent 13%),
    repeating-radial-gradient(circle at 50% 57%,transparent 0 2px,#edf4f017 2px 3px),
    repeating-conic-gradient(from 4deg,#edf6eb08 0 7deg,transparent 7deg 18deg),
    radial-gradient(circle at 52% 58%,var(--lamp-off,#20313d),#03080c 82%);
  box-shadow:inset 0 0 3px #000,inset 0 -1px 2px #d6e3eb4d;
}
.drag-overlay .drag-tree i.amber1,.drag-overlay .drag-tree i.amber2,.drag-overlay .drag-tree i.amber3 { --lamp-off:#5a3e14;--lamp-on:#ffb41d;--lamp-glow:#ffad27; }
.drag-overlay .drag-tree i.green { --lamp-off:#123b2d;--lamp-on:#39f891;--lamp-glow:#2cff8e; }
.drag-overlay .drag-tree i.red { --lamp-off:#531c23;--lamp-on:#ff3c4e;--lamp-glow:#ff3649; }
.drag-overlay .drag-tree i.on:not(.prestage):not(.stage) { background:#16212a;box-shadow:0 0 16px var(--lamp-glow),inset 0 1px #b0b7bd; }
.drag-overlay .drag-tree i.on .drag-lamp-lens {
  background:radial-gradient(circle at 37% 28%,#fff7d1 0 9%,transparent 14%),
    repeating-radial-gradient(circle at 50% 58%,transparent 0 2px,#fff9dc60 2px 3px),
    repeating-conic-gradient(from 4deg,#fff7cf28 0 7deg,transparent 7deg 18deg),
    radial-gradient(circle at 50% 54%,#fff9c6,var(--lamp-on) 44%,#24130b 100%);
  box-shadow:inset 0 0 4px #fff9b7,0 0 12px var(--lamp-glow);
}
.drag-overlay .drag-tree i.prestage,.drag-overlay .drag-tree i.stage {
  display:flex;gap:3px;justify-content:center;align-items:center;background:#070d12;
  border:1px solid #405058;box-shadow:inset 0 2px 4px #000;border-radius:7px;
}
.drag-beam-lens { width:6px;height:6px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#82938c,#293832 45%,#101813);box-shadow:0 1px #5a6f71; }
.drag-overlay .drag-tree i.on .drag-beam-lens { background:radial-gradient(circle at 35% 28%,#fff,#fffbc4 55%,#e5b651);box-shadow:0 0 6px #fffbc7; }
.drag-overlay .drag-tree i.on.prestage,.drag-overlay .drag-tree i.on.stage { background:#0c1418;box-shadow:inset 0 2px 3px #000; }
.drag-tree-foot { color:#a4b2b7;font-size:6px;letter-spacing:.11em; }

/* Thermal cassette: live temperature and the fitted belt's actual grip window. */
.drag-overlay .drag-belt-zone,
.drag-overlay .drag-belt-zone:not(.compact),
.drag-overlay .drag-belt-zone.compact {
  isolation:isolate;border-radius:9px;border:2px solid;border-color:#697780 #263741 #07131c #51636e;
  background:linear-gradient(150deg,#222f39,#071019 58%,#1a2832);
  box-shadow:inset 0 1px #d1dce270,inset 0 -3px #03090d,0 3px 0 #06121b,0 10px 22px #0010189c;
  text-shadow:none;
}
.drag-belt-zone::before {
  content:'';position:absolute;z-index:-1;inset:4px;border-radius:5px;border:1px solid #39464f;
  background:linear-gradient(158deg,#ccdfea13,transparent 31%),repeating-linear-gradient(0deg,#010a115c 0 1px,transparent 1px 3px),#08141d;
}
.drag-belt-zone::after {
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 6px 6px,#090d10 0 1px,#7a858c 1px 2px,#121c24 2px 3px,transparent 3px),radial-gradient(circle at calc(100% - 6px) 6px,#090d10 0 1px,#7a858c 1px 2px,#121c24 2px 3px,transparent 3px);
}
.drag-overlay .drag-belt-caption span { font-size:9px;letter-spacing:.14em;color:#c6d2d5; }
.drag-overlay .drag-belt-caption strong { font:800 8px system-ui,sans-serif;letter-spacing:.08em;white-space:nowrap;padding:2px 4px;color:#93bacb;background:#03111a;border:1px solid #2b4653;border-radius:3px; }
.drag-overlay .drag-belt-current { font-family:Consolas,'Courier New',monospace;font-weight:900;letter-spacing:-.04em;color:#eaf8ff;text-shadow:0 0 8px #b9d3ea35; }
.drag-belt-aim { display:flex;justify-content:space-between;gap:5px;margin-top:3px;font:700 8px system-ui,sans-serif;color:#7e9ea8;letter-spacing:.015em; }
.drag-belt-aim b { color:#cbefb3; }
.drag-overlay .drag-belt-zone.optimal .drag-belt-current { color:#adffc2;text-shadow:0 0 9px #66f89460; }
.drag-overlay .drag-belt-zone.hot .drag-belt-current { color:#ff9e65;text-shadow:0 0 9px #ff66304d; }
.drag-overlay .drag-belt-scale { height:12px;border:1px solid #101a22;border-bottom-color:#516773;border-radius:3px;background:linear-gradient(90deg,#304b67,#1f3d4c 35%,#2b3d36 59%,#825f2d 77%,#992737);box-shadow:inset 0 3px 5px #000b,0 1px #69819430; }
.drag-belt-scale::after { content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 5px,#030b1580 5px 6px);pointer-events:none; }
.drag-overlay .drag-belt-scale i { top:0;height:100%;border:1px solid #b3f6a8;border-radius:2px;background:linear-gradient(#cbffa740,#54ff822b);box-shadow:0 0 5px #66ff9c60; }
.drag-overlay .drag-belt-scale b { z-index:3;width:3px;top:-4px;height:19px;background:#f6ffff;border-radius:1px;box-shadow:0 0 5px #e1feff,0 1px 3px #001015; }
.drag-belt-scale em { position:absolute;z-index:2;top:-1px;height:calc(100% + 2px);width:1px;background:#e6ffc2;box-shadow:0 0 6px #d3ff89; }
.drag-overlay .drag-belt-ticks { display:block;position:relative;height:12px;font:700 8px Consolas,monospace;color:#8eabb5; }
.drag-belt-ticks span { position:absolute;top:0; }
.drag-belt-ticks span:first-child { left:0; }
.drag-belt-ticks span:last-child { right:0; }
.drag-belt-ticks [data-drag="belt-min-tick"],.drag-belt-ticks [data-drag="belt-max-tick"] { transform:translateX(-50%);color:#c4f2b6; }
.drag-overlay .drag-belt-target { font:750 8px system-ui,sans-serif;letter-spacing:.01em;color:#b1c6cd; }
.drag-overlay .drag-belt-zone.compact .drag-belt-aim { display:none; }
.drag-overlay .drag-belt-zone.compact .drag-belt-scale { display:block;height:5px;margin-top:4px; }
.drag-overlay .drag-belt-zone.compact .drag-belt-scale b { top:-2px;height:9px;width:2px; }

/* Timing stays readable in the pass; RT has a short launch acknowledgement. */
.drag-live-clock { border:2px solid;border-color:#6f8189 #283e49 #08121b #3a5360;border-radius:8px;background:linear-gradient(145deg,#23313f,#061019 65%);box-shadow:inset 0 1px #e2edf660,inset 0 -3px #02070d,0 5px 13px #001017a6; }
.drag-live-clock>strong { font-family:Consolas,'Courier New',monospace;color:#edf7ff;font-weight:900;letter-spacing:-.055em;text-shadow:0 0 8px #b0dfff40; }
.drag-live-clock>span { color:#94adb9;font-size:7px; }
.drag-live-clock>small { color:#758f9b;font-size:7px;padding-top:3px;border-top:1px solid #35444f;margin-top:3px; }
.drag-live-reaction { display:flex;align-items:baseline;justify-content:flex-end;gap:6px; }
.drag-live-reaction span,.drag-live-reaction em { font:700 7px system-ui,sans-serif;font-style:normal;color:#829da9; }
.drag-live-reaction b { font:900 14px Consolas,monospace;color:#aeefb4; }
.drag-live-reaction b.foul { color:#ff827a; }
.drag-reaction-toast { display:none;position:absolute;z-index:11;top:12px;left:50%;transform:translateX(-50%);width:132px;padding:6px 10px;text-align:center;border:1px solid #98d49b;border-bottom-width:3px;border-radius:6px;background:linear-gradient(145deg,#133425f2,#061912f2);box-shadow:0 6px 18px #00120c80;text-shadow:none; }
.drag-reaction-toast.visible { display:block;animation:reactionReveal .16s ease-out; }
.drag-reaction-toast span { display:block;font:800 7px system-ui,sans-serif;letter-spacing:.14em;color:#93b5a1; }
.drag-reaction-toast strong { display:block;font:900 27px/1.15 Consolas,monospace;color:#c0ffcf;letter-spacing:-.03em; }
.drag-reaction-toast small { display:block;font:800 7px system-ui,sans-serif;letter-spacing:.13em;color:#b5e9bb; }
.drag-reaction-toast.foul { border-color:#e88478;background:linear-gradient(145deg,#46211bf2,#1b0c0df2); }
.drag-reaction-toast.foul strong,.drag-reaction-toast.foul small { color:#ffa18d; }
.drag-overlay.results-open .drag-reaction-toast { display:none; }
@keyframes reactionReveal { from { opacity:0;translate:0 -7px; } to { opacity:1;translate:0 0; } }

/* Rubber grip pads and cast-metal bezels make controls feel like game hardware. */
.drag-actions button { position:relative;overflow:hidden;border-radius:11px;border-width:2px 2px 4px;border-color:#667b88 #1d3342 #08131e #405c6d;background:linear-gradient(155deg,#324454,#0c1a28 44%,#122738);box-shadow:inset 0 1px #c0d5e666,inset 0 -2px #0009,0 2px 0 #3b5260,0 6px 10px #00121b80; }
.drag-actions button::after { content:'';position:absolute;pointer-events:none;inset:6px;border:1px solid #a9cfe515;border-radius:5px;background:linear-gradient(150deg,#dcf4ff09,transparent 50%); }
.drag-actions .drag-steer { background:linear-gradient(145deg,#364958,#0d1c2b 45%,#142f40);border-color:#6c8797 #1a3445 #081521 #425f70;box-shadow:inset 0 1px #c3e8f066,inset 0 -3px #010a12,0 3px 0 #2c4659,0 6px 12px #00112199; }
.drag-actions .drag-steer b { font-size:24px;filter:drop-shadow(0 2px 1px #0009);color:#d7eaf0; }
.drag-actions .drag-steer small { margin-top:3px;font-size:7px;letter-spacing:.2em;color:#8ba8b8; }
.drag-actions #dragLaunch { border-color:#ffd28c #a05f2a #57280d #dc9b53;background:linear-gradient(160deg,#ffce85,#ef932e 34%,#c86516 71%,#91410e);box-shadow:inset 0 2px #ffedba99,inset 0 -3px #63320999,0 3px 0 #914c20,0 8px 18px #31120470;color:#22150c;font-size:12px;letter-spacing:.065em; }
.drag-actions #dragShift { border-color:#94d9e5 #286378 #143346 #599dad;background:linear-gradient(160deg,#8edfe9,#3eacc0 34%,#21788e 72%,#164d62);box-shadow:inset 0 2px #d0fbff80,inset 0 -3px #12364f99,0 3px 0 #2c5f73,0 8px 18px #00202a70;color:#061922; }
.drag-actions button.pressed,.drag-actions button:active { transform:translateY(3px);filter:brightness(1.08);border-bottom-width:2px;box-shadow:inset 0 2px 8px #00121b77,0 1px #69879955; }
.drag-actions button.pressed::after { border-color:#d5f4ff77;box-shadow:inset 0 0 8px #efffff35; }
.drag-actions #dragMenu,.drag-actions #dragSkipBurnout { border-radius:8px;background:linear-gradient(150deg,#1f3544,#0b1a28);border-color:#4a6577 #1d3243 #06111c #37566a;font-size:9px;color:#becdd6;box-shadow:inset 0 1px #c7e5f233,0 3px 8px #00111b77; }

@media (max-width:720px), (max-height:600px) and (pointer:coarse) {
  .drag-tree-crown { padding:1px 0 3px;border-width:1px; }
  .drag-overlay .drag-tree-name { padding:1px 0; }
  .drag-reaction-toast { top:10px;width:120px;padding:5px 7px; }
  .drag-reaction-toast strong { font-size:25px; }
  .drag-live-clock { padding:6px 8px 5px; }
  .drag-live-clock>strong { font-size:26px;line-height:1.1; }
  .drag-overlay .drag-belt-zone.compact .drag-belt-caption span { font-size:7px;letter-spacing:.05em; }
  .drag-overlay .drag-belt-zone.compact .drag-belt-caption strong { font-size:6px;padding:1px 2px;letter-spacing:0; }
}
@media (prefers-reduced-motion:reduce) { .drag-reaction-toast.visible { animation:none; } }

/* The timing slip on a phone. It was laid out at desktop scale - 22px heading,
   14px rows, 20px padding - which filled a 390px screen top to bottom and
   overflowed a 320px one (612px of content into 540px of card). Everything a
   racer reads at a glance stays; it is the spacing and the type that shrink,
   and the four buttons keep their 44px targets. */
@media(max-width:620px){
  .drag-overlay .drag-results{width:min(420px,94vw);max-height:calc(100dvh - 24px);
    padding:12px 13px 14px;border-radius:12px}
  .drag-overlay .drag-results-heading{font-size:14px;letter-spacing:.14em;padding-bottom:8px}
  .drag-overlay .drag-results-grid{margin-top:4px}
  .drag-overlay .drag-results-grid>div{padding:5px 5px;font-size:12.5px}
  .drag-overlay .drag-results-grid>div:nth-child(3n+1){font-size:9.5px;letter-spacing:.06em}
  .drag-overlay .drag-result-callout{font-size:15px;margin:8px 0 6px;letter-spacing:.08em}
  .drag-overlay .drag-reward{font-size:12px;padding:7px 9px;margin-bottom:8px}
  .drag-overlay .drag-results button{min-height:44px;font-size:12px;padding:10px 12px}
  .drag-overlay .drag-results #dragAgain{min-height:48px;font-size:13px;margin-top:2px}
  .drag-overlay .drag-result-actions{gap:7px;margin-top:7px}
  .drag-overlay .drag-results #dragResultsExit{margin-top:7px}
}
/* Very small phones: the slip is the point, so let it scroll rather than
   shrink the numbers to the edge of legibility. */
@media(max-width:620px) and (max-height:620px){
  .drag-overlay .drag-results{top:8px;transform:translateX(-50%);max-height:calc(100dvh - 16px)}
  .drag-overlay .drag-results-grid>div{padding:4px 5px;font-size:12px}
}