/* Playtest page. Builds on site.css tokens and the landing-page duel components. */
.playtest-page .topbar{background:#040609}
.playtest-home{display:inline-flex}
.playtest-home img{width:clamp(170px,19vw,250px);height:auto;max-height:64px;object-fit:contain}
.playtest-nav{display:flex;gap:28px}
.playtest{padding-top:calc(var(--header) + 40px)}
.playtest-head{max-width:78ch}
.playtest h1{margin:0 0 14px;font:900 clamp(48px,7vw,96px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.02em}
.playtest-flag{margin:18px 0 0;padding:12px 16px;border:1px solid #c9542c;border-radius:6px;background:#fff;color:#071018;font-size:15px;line-height:1.6;max-width:78ch}
.playtest-flag strong{color:#a3300f}

.playtest-table{margin-top:32px;display:grid;gap:20px}
.phase-strip{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.phase-strip li{padding:6px 12px;border:1px solid #a7b6bf;border-radius:4px;font:700 12px/1.4 var(--body);letter-spacing:.08em;text-transform:uppercase;color:#38464f}
.phase-strip li[aria-current]{background:#071018;border-color:#071018;color:var(--paper)}
.round-readout{margin:-8px 0 0;font:800 22px/1.2 var(--display);text-transform:uppercase}

/* Track: 3 lines × positions 0–24. Inside on top. */
.track-scroll{overflow-x:auto;border-radius:8px;background:#071018}
.track{--label:76px;--cols:25;--row:46px;position:relative;min-width:680px;padding:0 0 10px}
.track-sectors{display:grid;grid-template-columns:var(--label) 1fr 8fr 8fr 8fr;padding-top:10px;color:#bdc8cf;font:700 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase}
.track-sectors span{padding:0 0 6px 8px;border-left:2px solid #72d9e8}
.track-sectors span:first-child,.track-sectors span:nth-child(2){border:0;padding-left:0}
.track-sectors .is-squeeze{color:var(--orange)}
.track-grid{display:grid;grid-template-columns:var(--label) repeat(var(--cols),1fr);grid-auto-rows:var(--row)}
.lane-label{display:flex;align-items:center;padding-left:12px;color:#bdc8cf;font:700 11px/1 var(--body);letter-spacing:.08em;text-transform:uppercase}
.cell{border:1px solid #2a3640;border-width:1px 0 0 1px;background:#18232d}
.cell.is-grid{background:#0d151c}
.cell.sector-start{border-left:2px solid #72d9e8}
.cell.is-finish{background:repeating-conic-gradient(#f2f5f6 0 25%,#18232d 0 50%) 0 0/10px 10px}
.cell.is-closed{background:repeating-linear-gradient(135deg,#2b1610 0 6px,#18232d 6px 12px);border-color:#5a2a1c}
.cell.is-wake{box-shadow:inset 0 -3px 0 var(--cyan)}
.track-marker{position:absolute;width:24px;height:26px;left:calc(var(--label) + (100% - var(--label)) * (var(--pos,0) + .5) / var(--cols) - 12px);top:calc(31px + var(--lane,0) * var(--row) + (var(--row) - 26px) / 2);border:1px solid #fff;clip-path:polygon(0 0,70% 0,100% 50%,70% 100%,0 100%);transition:left .28s cubic-bezier(.16,1,.3,1),top .28s cubic-bezier(.16,1,.3,1)}
.marker-you{background:linear-gradient(90deg,#f2f5f6 0 45%,#e0301e 45% 62%,#f2f5f6 62%)}
.marker-rival{border-color:#d68a4c;background:linear-gradient(90deg,#3a332e 0 38%,#c27a3e 38%)}
.track-marker.is-shared{margin-top:-8px}
.track-marker.marker-rival.is-shared{margin-top:8px}

.racer-panels{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.racer-panel{position:relative;padding:16px 18px;border:1px solid #a7b6bf;border-radius:8px;background:#fff}
.racer-panel header{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.racer-panel h2{margin:0;font-size:28px;line-height:1}
.racer-panel h2 span{font-size:18px;color:#38464f}
.racer-meta{margin:0;font-size:14px;color:#38464f}
.edge-chip{margin-left:auto;padding:3px 10px;border-radius:4px;background:#0b5968;color:#fff;font:700 12px/1.4 var(--body);letter-spacing:.1em;text-transform:uppercase}
.racer-where{margin:8px 0 10px;font-weight:600}
.racer-stats{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin:0;align-items:center}
.racer-stats div{display:contents}
.racer-stats dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.racer-stats dd{display:flex;align-items:center;gap:12px;margin:0}
.racer-stats output{min-width:4ch;font-weight:700;font-variant-numeric:tabular-nums}
.throttle-flip{display:grid;place-items:center;width:30px;height:40px;border:1px solid #34414b;border-radius:4px;background:#18232d;color:#bdc8cf;font:800 22px/1 var(--display)}
.throttle-flip.is-revealed{background:#071018;color:var(--paper)}
.throttle-flip.is-four{color:var(--orange)}
.pips{flex:1;display:flex;gap:4px}
.pips i{flex:1;height:8px;border-radius:2px;background:#0b5968}
.pips i.is-lost{background:#c9d3d8}
.is-unstable .gauge-risk{outline:2px solid #b8371a;outline-offset:2px}
.racer-hand{margin:12px 0 0;font-size:14px;color:#38464f}

.controls{padding:18px 20px;border-radius:8px;background:#071018;color:var(--paper)}
.controls-prompt{margin:0;font:800 26px/1.15 var(--display);text-transform:uppercase}
.controls-detail{margin:6px 0 0;max-width:72ch;color:#bdc8cf;font-size:15px}
.controls-detail:empty{display:none}
.controls-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.controls-actions:empty{display:none}
.controls .duel-hand{max-width:480px;width:100%}
.controls .throttle-card{border-color:#5d6d78}
.throttle-card .redline-warn{color:#ff8a66}
.action{min-height:48px;padding:10px 18px;border:1px solid #8a9aa5;border-radius:4px;background:#111d27;color:var(--paper);font:700 14px/1.3 var(--body);letter-spacing:.04em;cursor:pointer;text-align:left}
.action:hover:not(:disabled){border-color:var(--cyan)}
.action:disabled{cursor:not-allowed;opacity:.45}
.action small{display:block;margin-top:2px;font-weight:500;font-size:12px;color:#bdc8cf;letter-spacing:0}
.action-primary{background:var(--paper);border-color:var(--paper);color:#071018}
.action-primary small{color:#38464f}
.action-card{border-color:#0b5968;background:#0d2a31}
.action-risk{border-color:#b8371a}

.race-log{max-width:80ch}
.race-log h2{margin:0 0 8px;font-size:22px}
.race-log ol{list-style:none;margin:0;padding:0;max-height:300px;overflow-y:auto;border-top:1px solid #a7b6bf}
.race-log li{padding:7px 0;border-bottom:1px solid #d3dbe0;font-size:15px;line-height:1.5}
.race-log li b{display:inline-block;min-width:5.5em;color:#38464f;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.race-log .tone-engage,.race-log .tone-danger{color:#8f2a12;font-weight:600}
.race-log .tone-risk{color:#8f2a12}
.race-log .tone-pass,.race-log .tone-card{color:#0b5968;font-weight:600}
.race-log .tone-round,.race-log .tone-finish{font-weight:700}

.playtest-settings{margin-top:40px}
.setting{display:grid;gap:6px;max-width:62ch;margin-bottom:20px;font-weight:600}
.setting em{font-style:normal;color:#a3300f;font-size:13px;margin-left:6px}
.setting select{min-height:44px;max-width:360px;padding:8px 10px;border:1px solid #38464f;border-radius:4px;background:#fff;color:#071018;font:500 16px/1.4 var(--body)}
.setting small{font-weight:400;font-size:14px;color:#38464f}
.setting-check{grid-template-columns:auto 1fr;align-items:center;column-gap:10px}
.setting-check input{width:22px;height:22px;accent-color:#0b5968}
.setting-check small{grid-column:2}
.working-values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px 24px;margin:16px 0}
.working-values div{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #d3dbe0}
.working-values dt{color:#38464f}
.working-values dd{margin:0;font-weight:700}
.playtest .details-body>p{max-width:72ch;color:#38464f}
.interpretations{padding-left:20px;max-width:72ch}
.interpretations li{margin-bottom:8px;color:#38464f}
.playtest .concept-notice{border-color:#a7b6bf}
.playtest .concept-notice strong{color:#071018}
.playtest .concept-notice p{color:#38464f}

@media(max-width:800px){
.racer-panels{grid-template-columns:1fr}
.playtest-nav{gap:16px}
.playtest-nav a{font-size:12px}
}
@media(max-width:520px){
.playtest-home img{width:150px}
.playtest-nav a[href$="#game"]{display:none}
.controls-actions .action{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.track-marker{transition:none}}