/* Drag Strip Legends */
.dsl-shop h3 { margin: 14px 0 8px; }
.dsl-ups { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.dsl-up { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 10px; border-radius: 12px; border: 2px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: inherit; cursor: pointer; font: 700 13px system-ui, sans-serif; }
.dsl-up:hover:not(:disabled) { border-color: #4dd9e2; }
.dsl-up:disabled { opacity: .62; cursor: default; }
.dsl-up small { font-weight: 600; opacity: .8; }
.dsl-pips { color: #facc15; letter-spacing: 2px; font-size: 12px; }
.dsl-auto { display: flex; gap: 8px; align-items: center; margin-top: 10px; font-size: 14px; }
.dsl-auto input { width: 20px; height: 20px; flex-shrink: 0; }
.dsl-hud { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: min(560px, calc(100% - 24px)); pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dsl-tree { display: flex; gap: 8px; background: rgba(8,16,28,.8); padding: 6px 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,.16); }
.dsl-tree i { width: 22px; height: 22px; border-radius: 50%; background: #332200; }
.dsl-tach { position: relative; width: 100%; height: 24px; border-radius: 12px; overflow: hidden; background: rgba(8,16,28,.85); border: 2px solid rgba(255,255,255,.3); }
.dsl-green { position: absolute; top: 0; bottom: 0; background: #22c55e; }
.dsl-green::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 100vw; background: #dc2626; }
.dsl-needle { position: absolute; top: 0; bottom: 0; width: 5px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px #fff; }
.dsl-row { display: flex; align-items: baseline; gap: 6px; font: 700 13px system-ui, sans-serif; text-shadow: 0 1px 3px #000; }
.dsl-sp { font: 900 34px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.dsl-gear { margin-left: 8px; padding: 2px 10px; border-radius: 8px; background: rgba(8,16,28,.8); font: 900 22px system-ui, sans-serif; }
.dsl-dist { margin-left: 8px; font-size: 15px; font-weight: 800; }
.dsl-msg { min-height: 30px; font: 900 clamp(18px, 3.4vw, 28px) system-ui, sans-serif; color: #fde047; text-shadow: 0 2px 6px rgba(0,0,0,.8); opacity: 0; transition: opacity .15s; }
.dsl-msg.is-on { opacity: 1; }
.dsl-msg.bad { color: #fca5a5; }
.dsl-bars { position: absolute; left: 12px; bottom: 14px; width: min(260px, 38%); display: flex; flex-direction: column; gap: 5px; pointer-events: none; font: 800 12px system-ui, sans-serif; text-shadow: 0 1px 3px #000; }
.dsl-bars u { display: block; height: 9px; border-radius: 5px; background: rgba(8,16,28,.7); overflow: hidden; text-decoration: none; }
.dsl-bars i { display: block; height: 100%; width: 0; background: #facc15; }
.dsl-bars .dsl-b2 { background: #f87171; }
.dsl-btns { position: absolute; right: 12px; bottom: 58px; display: flex; gap: 10px; align-items: flex-end; }
.dsl-btns button { touch-action: none; border-radius: 18px; border: 2px solid rgba(255,255,255,.5); color: #fff; font: 900 15px system-ui, sans-serif; cursor: pointer; }
.dsl-go { width: 112px; height: 112px; font-size: 24px !important; background: rgba(21,128,61,.85); }
.dsl-go.is-hot { background: #16a34a; box-shadow: 0 0 22px #4ade80; border-color: #fff; }
.dsl-nitro { width: 86px; height: 62px; background: rgba(29,78,216,.85); }
.dsl-nitro:disabled { opacity: .35; }
.dsl-nitro.is-on { background: #60a5fa; box-shadow: 0 0 18px #93c5fd; }
.dsl-card { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 14px; }
.dsl-card th, .dsl-card td { padding: 3px 6px; text-align: right; border-bottom: 1px solid rgba(255,255,255,.12); }
.dsl-card td:first-child { text-align: left; font-weight: 700; }
@container (max-width: 480px) { .dsl-hud { top: 50px; } .dsl-go { width: 96px; height: 96px; } .dsl-sp { font-size: 26px; } .dsl-btns { bottom: 12px; right: 8px; } .dsl-bars { bottom: 130px; width: 42%; } }