/* Native TKKN type and arrow actions, with just enough hardware to hold the glass. */
#app #field::before {
  inset:-9px; border-radius:6px; border-color:#596164;
  background:repeating-linear-gradient(0deg,#ffffff04 0 1px,#0000 1px 3px),linear-gradient(135deg,#4b5457,#1b2428 26%,#303b40 75%,#566165);
  box-shadow:inset 0 1px #c9d1cb44,inset 0 -2px #070b0c,0 3px 9px #0009;
}
#app #field::after { box-shadow:inset 0 0 0 1px #11191c,0 0 0 2px #05090a; }
#duel { min-height:100dvh; padding:24px clamp(16px,3vw,52px); color:var(--ink); background:#0a0d10; box-sizing:border-box; font-family:var(--ui); }
#duel[hidden],#duel [hidden] { display:none !important; }
body[data-duel="true"] #app { display:none; }
body[data-duel="true"] { overflow:auto; }
.duel-top { display:flex; align-items:center; justify-content:space-between; gap:24px; max-width:1600px; margin:0 auto 20px; }
.duel-top .eyebrow { font:11px/1.4 var(--num); margin:0 0 4px; }
.duel-top h1 { font:500 30px/1 var(--num); letter-spacing:.08em; }
.duel-top-tools { display:flex; gap:24px; align-items:center; }
.duel-sheet { max-width:600px; margin:32px auto; }
#duel-connect { max-width:520px; margin:clamp(40px,12vh,130px) auto; }
.duel-lead { font-size:clamp(28px,3vw,38px); line-height:1.2; font-weight:400; margin:0 0 28px; }
.duel-disclosure > summary { cursor:pointer; width:fit-content; color:var(--dim); font-size:13px; padding:10px 0; }
#duel-options .duel-fields { padding:20px 0; grid-template-columns:repeat(2,minmax(0,1fr)); }
#duel-options .duel-file { display:block; padding:12px 0; }
.duel-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 24px; }
.duel-fields label { display:grid; grid-template-columns:minmax(0,1fr); gap:9px; font-size:13px; color:var(--dim); }
#duel input:not([type="file"]):not([type="checkbox"]):not([type="range"]),#duel select,#duel textarea { width:100%; box-sizing:border-box; min-height:40px; border:1px solid #3b4547; border-radius:2px; padding:8px; background:#101619; color:var(--ink); font:14px/1.5 var(--ui); }
#duel textarea { resize:vertical; overflow-wrap:anywhere; font:12px/1.5 var(--num); }
#duel .primary { font-size:22px; margin-top:0; }
#duel .primary b { font-weight:400; }
#duel .link { font-size:13px; }
#duel button,#duel summary,#duel .duel-file { -webkit-tap-highlight-color:transparent; }
#duel button:focus-visible,#duel a:focus-visible,#duel summary:focus-visible { outline:1px solid var(--ink); outline-offset:5px; }
.duel-format-hint { font-size:14px; line-height:1.7; min-height:1.7em; margin:12px 0 28px; color:var(--dim); }
#duel-local-note { font-size:12px; color:var(--faint); margin:-12px 0 24px; }
#duel-recent { display:block; margin:4px 0 14px; color:var(--dim); }
#duel-storage-status,#duel-recovery-note { font-size:12px; line-height:1.6; color:#d6ad91; }
#duel-recovery-note { margin:12px 0 0; }
.duel-presets { display:flex; gap:20px; }
#duel .duel-presets button { min-height:36px; }
#duel .duel-presets [aria-pressed="true"] { color:var(--ink); text-decoration:underline; text-underline-offset:6px; }
#duel [aria-invalid="true"] { border-color:#d6a58a; }
.duel-connect-steps { display:flex; list-style:none; counter-reset:step; padding:22px 0 0; margin:28px 0 8px; border-top:1px solid var(--hair); gap:28px; font-size:13px; color:var(--faint); }
.duel-connect-steps li { counter-increment:step; }
.duel-connect-steps li::before { content:counter(step) ". "; font-family:var(--num); }
.duel-connect-steps [aria-current] { color:var(--ink); }
.duel-connect-steps [data-done="true"] { color:var(--dim); }
#duel-connect-status[data-error="true"] { color:#e2ad92; }
#duel-connect-status { color:var(--dim); margin:18px 0 8px; }
#duel-incoming-wrap > button { margin-top:10px; }
.duel-actions { display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin:22px 0; }
.duel-actions h2 { font-size:20px; font-weight:400; margin:0; }
.duel-code-label { display:block; font-size:13px; margin:20px 0 8px; color:var(--dim); }
#duel-outgoing-wrap { padding:8px 0 16px; border-bottom:1px solid var(--hair); margin-bottom:26px; }
#duel-outgoing-wrap .duel-code-label { margin-bottom:16px; }
#duel-code-details { margin-top:10px; }
#duel-incoming { min-height:78px; }
.duel-connection-note { font-size:12px; line-height:1.8; color:var(--faint); margin-top:28px; max-width:640px; }
.duel-connection-note summary { cursor:pointer; width:fit-content; }
#duel-connect-status,#duel-match-status,#duel-video-status { font-size:14px; line-height:1.6; min-height:1.6em; }
#duel-match { max-width:1800px; margin:auto; }
.duel-scorebar { display:flex; justify-content:space-between; align-items:center; gap:12px 24px; flex-wrap:wrap; margin:0 0 16px; font:14px/1.4 var(--ui); color:var(--dim); }
.duel-scorebar strong { color:var(--ink); font-weight:400; }
#duel-score { color:var(--ink); font:20px/1.4 var(--num); margin-right:auto; }
.duel-arenas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.duel-arenas figure { margin:0; min-width:0; }
.duel-view-status { min-height:20px; margin:0 auto 14px; color:var(--dim); font-size:13px; line-height:1.5; }
#duel[data-view="player"] .duel-arenas {
  width:min(100%,calc(max(220px,100dvh - 300px) * 1.5384615385 * 1.26 + 24px));
  margin-inline:auto; grid-template-columns:minmax(0,1fr) minmax(0,.26fr); align-items:start;
}
#duel[data-view="player"] figure[data-primary="true"] { grid-column:1; grid-row:1; }
#duel[data-view="player"] figure[data-primary="false"] { grid-column:2; grid-row:1; }
#duel[data-view="spectate"] .duel-arenas {
  width:min(100%,calc(max(220px,100dvh - 300px) * 1.5384615385 * 1.26 + 24px)); margin-inline:auto; grid-template-columns:minmax(0,1fr) minmax(0,.26fr); align-items:start;
}
#duel[data-view="spectate"] figure[data-primary="false"] { grid-column:2; grid-row:1; }
#duel[data-view="spectate"] figure[data-primary="true"] { grid-column:1; grid-row:1; }
@keyframes duel-spectate { from { opacity:.35; } to { opacity:1; } }
#duel[data-local-out="true"] .duel-touch-controls { visibility:hidden; }
.duel-arenas figcaption { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:4px 10px; font-size:12px; color:var(--dim); margin:0 0 10px 3px; overflow-wrap:anywhere; }
.duel-presence { color:var(--faint); font-size:12px; }
.duel-presence[data-ready="true"] { color:#c5d6c9; }
.duel-presence[data-delayed="true"] { color:#c6ad88; }
.duel-round-stakes { text-align:center; font:13px/1.6 var(--ui); color:#c7b890; letter-spacing:.08em; margin:0 0 14px; }
#duel[data-phase="playing"] .duel-round-stakes { visibility:hidden; }
.duel-screen { position:relative; padding:4px; border:1px solid #535e61; border-radius:4px; background:linear-gradient(135deg,#36434a,#11181d 30%,#424b50); box-shadow:inset 0 1px #cdd3cf33,0 3px 8px #0006; }
.duel-screen canvas { display:block; width:100%; height:auto; aspect-ratio:1000/650; background:#000; touch-action:none; }
.duel-field-state { position:absolute; inset:0; display:grid; place-content:center; pointer-events:none; color:var(--ink); font:500 clamp(18px,2.8vw,40px)/1.2 var(--num); letter-spacing:.06em; text-shadow:0 1px 6px #000; }
.duel-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:18px 0; }
.duel-bottom p { margin:0 0 8px; }
.duel-bottom .note { font-size:12px; }
.duel-loadout { width:min(100%,420px); margin:22px auto 0; }
.duel-loadout > p { color:var(--dim); font:11px/1.5 var(--ui); margin:0 0 6px; text-align:center; }
.duel-ship-picks { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
#duel .duel-ship-picks button { display:flex; align-items:center; justify-content:center; gap:6px; padding:4px 0; border-bottom:1px solid var(--hair); color:var(--dim); }
.duel-ship-picks canvas { width:60px; height:45px; }
#duel .duel-ship-picks [aria-pressed="true"] { border-bottom-color:#b5a27a; color:var(--ink); }
.duel-replay-bar { max-width:1000px; margin:18px auto 0; }
.duel-replay-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.duel-replay-meta output { color:var(--dim); font:12px/1.5 var(--num); white-space:nowrap; }
.duel-replay-seek { display:block; }
#duel-replay-seek { display:block; appearance:none; width:100%; height:32px; min-height:32px; margin:2px 0 0; padding:0; border:0; background:transparent; cursor:pointer; }
#duel-replay-seek::-webkit-slider-runnable-track { height:2px; background:linear-gradient(to right,#c6cdbf var(--replay-progress,0%),#3b4547 var(--replay-progress,0%)); }
#duel-replay-seek::-webkit-slider-thumb { appearance:none; width:10px; height:10px; margin-top:-4px; border:0; border-radius:50%; background:#d9dfd3; }
#duel-replay-seek::-moz-range-track { height:2px; background:#3b4547; }
#duel-replay-seek::-moz-range-progress { height:2px; background:#c6cdbf; }
#duel-replay-seek::-moz-range-thumb { width:10px; height:10px; border:0; border-radius:50%; background:#d9dfd3; }
#duel-replay-seek:focus-visible { outline:1px solid var(--dim); outline-offset:2px; }
.duel-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.duel-summary { width:100%; max-width:580px; padding:0; text-align:center; }
.duel-summary:focus { outline:none; }
.duel-summary .eyebrow { font:12px/1.5 var(--num); letter-spacing:.12em; color:var(--dim); margin:0 0 12px; }
.duel-summary h2 { font:500 clamp(28px,5vw,46px)/1.25 var(--ui); margin:0 0 20px; overflow-wrap:anywhere; }
.duel-score-kind { font:11px/1.4 var(--ui); color:var(--dim); margin:0 0 6px; }
#duel[data-outcome="win"] .duel-summary h2 { color:#d2dfd2; }
.duel-tally { display:flex; align-items:baseline; gap:clamp(10px,1.4vw,20px); width:max-content; max-width:100%; }
.duel-tally strong { font:500 clamp(40px,6vw,72px)/1.15 var(--num); color:var(--ink); white-space:nowrap; }
.duel-tally-divider { font:500 clamp(40px,6vw,72px)/1.15 var(--num); color:var(--faint); }
.duel-round-track { display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin:14px auto 0; max-width:400px; }
.duel-round-track:empty { display:none; }
.duel-round-track > :is(span,button) { display:grid; place-items:center; width:24px; height:24px; padding:0; border:0; border-bottom:2px solid #778b8b; background:transparent; color:var(--dim); font:11px/1 var(--num); }
.duel-round-track button { cursor:pointer; }
.duel-round-track button:hover { color:var(--ink); }
.duel-round-track [data-winner="0"] { border-color:#c2b38f; }
.duel-round-track [data-winner="1"] { border-color:#9aafc3; }
.duel-round-track [data-winner="draw"] { border-color:#394244; color:var(--faint); }
#duel[data-phase="interrupted"][data-verified-rounds="0"] :is(.duel-score-kind,.duel-tally,.duel-podium,.duel-round-track) { display:none; }
.duel-podium { --step-high:76px; --step-low:28px; --step-tie:46px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:end; margin-top:6px; }
.duel-podium figure { margin:0; min-width:0; text-align:center; }
.duel-podium canvas { display:block; width:min(100%,220px); height:auto; aspect-ratio:440/300; margin:0 auto; }
.duel-podium figcaption { font-size:14px; line-height:1.5; color:var(--dim); padding:0 8px; margin:0 0 12px; overflow-wrap:anywhere; }
#duel .duel-pilot-id { max-width:100%; padding:2px 3px; border:0; background:transparent; color:inherit; font:16px/1.5 var(--ui); overflow-wrap:anywhere; white-space:normal; }
#duel .duel-pilot-id:disabled { opacity:1; cursor:default; }
.duel-pilot-id small { display:inline-block; margin-left:6px; font:12px/1.5 var(--ui); color:var(--dim); }
.duel-pilot-id small:empty { display:none; }
.duel-pilot-id:not(:disabled) > span { text-decoration:underline dotted #77858288; text-underline-offset:4px; }
.duel-pilot-duration { display:grid; gap:4px; margin:0 0 14px; padding:0 6px; font:12px/1.5 var(--ui); color:var(--dim); }
.duel-pilot-duration strong { font:500 clamp(16px,2.2vw,21px)/1.2 var(--num); color:var(--ink); white-space:nowrap; }
.duel-identity { order:2; width:min(100%,320px); margin:22px auto 0; text-align:left; }
.duel-identity > label { display:block; font-size:13px; color:var(--dim); margin-bottom:10px; }
.duel-identity .duel-actions { justify-content:center; margin:14px 0 0; }
#duel-identity-error { font-size:13px; color:#e2ad92; }
.duel-step { display:grid; place-items:center; height:var(--step-low); border-top:1px solid #6c777755; background:linear-gradient(#52615d12,#18222004); font:12px/1 var(--num); color:var(--faint); }
.duel-podium [data-rank="1"] .duel-step { height:var(--step-high); border-top-color:#b5a27a; background:linear-gradient(#b5a27a13,#18222004); color:#c2b38f; }
.duel-podium [data-rank="1"] figcaption { color:var(--ink); }
.duel-podium [data-rank="2"] canvas { opacity:.65; }
.duel-podium [data-rank="tie"] .duel-step { height:var(--step-tie); }
@supports(grid-template-rows:subgrid) {
  .duel-podium { grid-template-rows:repeat(4,auto); align-items:stretch; }
  .duel-podium figure { display:grid; grid-template-rows:subgrid; grid-row:1 / span 4; }
  .duel-podium figure:first-child { grid-column:1; }
  .duel-podium figure:nth-child(2) { grid-column:2; }
  .duel-podium canvas { align-self:end; }
  .duel-podium figcaption { display:flex; align-items:end; justify-content:center; }
  .duel-step { align-self:end; }
  .duel-podium [data-rank="2"] > :not(.duel-step) { transform:translateY(calc(var(--step-high) - var(--step-low))); }
}
#duel[data-format="total"] .duel-tally strong { font-size:clamp(22px,3.6vw,46px); }
#duel[data-format="total"] .duel-tally-divider { font-size:clamp(22px,3.6vw,46px); }
#duel-summary-detail { margin:20px 0 0; font-size:13px; line-height:1.7; color:var(--dim); }
.duel-history { margin:18px 0 0; }
.duel-history > summary { cursor:pointer; color:var(--dim); font-size:13px; padding:12px 0; }
.duel-more-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px 22px; margin:12px 0; align-items:center; }
.duel-more-actions > * { text-align:left; }
.duel-history h2 { font-size:16px; font-weight:400; margin-bottom:14px; }
.duel-rounds { width:100%; border-collapse:collapse; table-layout:fixed; font:13px/1.5 var(--num); color:var(--dim); }
.duel-rounds th,.duel-rounds td { padding:12px 10px; border-bottom:1px solid var(--hair); text-align:right; font-weight:400; overflow-wrap:anywhere; }
.duel-rounds thead th,.duel-rounds td:last-child { font-family:var(--ui); }
.duel-rounds th:first-child { width:40px; text-align:left; padding-left:0; }
.duel-rounds [data-winner="true"] { color:var(--ink); }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match { display:flex; flex-direction:column; align-items:center; max-width:660px; margin:clamp(24px,8vh,80px) auto 0; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-scorebar { display:none; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-summary { order:1; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-bottom { order:2; flex-direction:column; gap:12px; text-align:center; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-recording { order:3; justify-content:center; gap:32px; margin:26px 0 12px; }
#duel-more { order:4; width:100%; max-width:580px; }
#duel-more > summary { margin-inline:auto; }
#duel-save-previous { align-self:flex-start; order:4; margin:4px 0 18px; }
.duel-history { order:5; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-arenas { order:6; max-width:1000px; width:100%; margin-top:12px; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]):not([data-review-fields="true"]) .duel-arenas { display:none; }
#duel:is([data-phase="between"],[data-phase="complete"]) #duel-score { display:none; }
#duel .duel-recording > .link b { font-weight:400; }
#duel:is([data-phase="playing"],[data-phase="countdown"],[data-phase="paused"],[data-phase="lobby"]) .duel-recording { display:none; }
#duel[data-phase="complete"] .duel-bottom { margin-bottom:0; }
#duel[data-phase="between"] #duel-match { margin-top:clamp(12px,3vh,28px); }
#duel[data-phase="between"] .duel-summary h2 { font-size:clamp(24px,4vw,34px); margin-bottom:12px; }
#duel[data-phase="between"] :is(.duel-tally strong,.duel-tally-divider) { font-size:clamp(36px,5vw,56px); }
#duel[data-phase="between"] .duel-podium canvas { width:min(100%,150px); }
#duel[data-phase="between"] .duel-podium { --step-high:48px; --step-low:20px; --step-tie:34px; }
#duel[data-phase="between"] #duel-summary-detail { margin-top:12px; }
.duel-file input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.duel-file:focus-within { outline:1px solid var(--dim); outline-offset:4px; }
.duel-file { cursor:pointer; }
.duel-recording { align-items:baseline; }
.duel-touch-controls { display:none; }
body[data-input="touch"] #duel:is([data-phase="playing"],[data-phase="countdown"],[data-phase="paused"]) .duel-touch-controls { display:block; }
#duel-touch-pad { height:120px; background:#10181b; border:1px solid #2c383c; display:grid; place-content:center; font-size:13px; color:var(--dim); touch-action:none; border-radius:3px; }
.duel-video-audio { font-size:14px; display:flex; align-items:center; gap:10px; margin:24px 0; }
.duel-video-name { display:grid; gap:10px; max-width:320px; color:var(--dim); font-size:13px; margin:24px 0; }
#duel-video-preview { width:100%; background:#000; }
#duel-video-progress { width:100%; }
#duel button:disabled { cursor:default; opacity:.5; }
@media(max-width:700px) {
  #duel { padding:18px 14px; }
  .duel-fields { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
  .duel-arenas { gap:16px; }
  .duel-sheet { margin-top:24px; }
  .duel-scorebar { gap:10px 16px; }
  .duel-bottom { flex-wrap:wrap; gap:12px; }
  .duel-connect-steps { gap:10px; font-size:12px; justify-content:space-between; }
  #duel .link { min-height:32px; }
  .duel-rounds { font-size:12px; }
  .duel-rounds th,.duel-rounds td { padding:10px 4px; }
  .duel-rounds th:first-child { width:24px; }
  #duel[data-format="total"] .duel-tally strong { font-size:clamp(18px,5.5vw,30px); }
  #duel[data-format="total"] .duel-tally-divider { font-size:clamp(18px,5.5vw,30px); }
}
@media(orientation:landscape) { body[data-input="touch"] #duel .duel-touch-controls { display:none; } }
@media(orientation:landscape) and (max-height:500px) {
  body[data-input="touch"] #duel { padding:10px 14px; }
  body[data-input="touch"] .duel-top { margin-bottom:10px; }
  body[data-input="touch"] .duel-top > div { display:flex; gap:16px; align-items:center; }
  body[data-input="touch"] .duel-top .eyebrow { margin:0; }
  body[data-input="touch"] .duel-top h1 { font-size:22px; }
  body[data-input="touch"] .duel-scorebar { margin-bottom:10px; }
  body[data-input="touch"] .duel-arenas { gap:16px; }
  body[data-input="touch"] .duel-arenas figcaption { margin-bottom:6px; }
  body[data-input="touch"] .duel-bottom { margin:12px 0; }
  #duel[data-view="player"] .duel-arenas { width:min(100%,calc(max(130px,100dvh - 175px) * 1.5384615385 * 1.26 + 16px)); }
  #duel[data-view="spectate"] .duel-arenas { width:min(100%,calc(max(130px,100dvh - 175px) * 1.5384615385 * 1.26 + 16px)); }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match { margin-top:10px; }
  .duel-summary h2 { font-size:28px; margin-bottom:6px; }
  .duel-summary .eyebrow { margin-bottom:6px; }
  .duel-tally strong,.duel-tally-divider { font-size:42px; }
  .duel-podium canvas { width:120px; }
  .duel-podium figcaption { font-size:12px; margin-bottom:5px; }
  .duel-podium,#duel[data-phase="between"] .duel-podium { --step-high:40px; --step-low:16px; --step-tie:28px; }
  .duel-score-kind { margin-bottom:2px; font-size:10px; }
  .duel-pilot-duration { margin-bottom:8px; gap:2px; font-size:12px; }
  .duel-pilot-duration strong { font-size:16px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-recording { margin:10px 0 0; }
}
@media(orientation:portrait) and (max-width:700px) {
  #duel .duel-touch-controls { align-self:stretch; }
  #duel #duel-touch-pad { height:max(180px,calc(100dvh - 620px)); border:0; border-radius:0; background:linear-gradient(#10171b66,#0000 70%); }
  #duel #duel-touch-pad span { display:none; }
  #duel[data-phase="playing"] .duel-bottom { visibility:hidden; }
  #duel .duel-view-status { min-height:3em; }
  .duel-arenas { grid-template-columns:1fr; }
  #duel[data-view="player"] .duel-arenas { width:100%; grid-template-columns:minmax(0,1fr); }
  #duel[data-view="player"] figure[data-primary="true"] { grid-column:1; grid-row:1; }
  #duel[data-view="player"] figure[data-primary="false"] { grid-column:1; grid-row:2; width:42%; justify-self:end; }
  #duel[data-view="spectate"] .duel-arenas { width:100%; grid-template-columns:minmax(0,1fr); }
  #duel[data-view="spectate"] figure[data-primary="false"] { grid-column:1; grid-row:2; width:42%; justify-self:end; }
  #duel[data-view="split"] .duel-arenas { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  #duel[data-phase="replay"] .duel-arenas { grid-template-columns:1fr; gap:16px; }
  .duel-field-state { font-size:24px; }
  #duel[data-view="player"] figure[data-primary="false"] .duel-field-state { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { #duel[data-view="spectate"] figure[data-primary="true"] { animation:none; } }

/* Cabinet menus reuse the TKKN title's left margin, open space and arrow actions. */
#duel { background:#000; padding:34px clamp(24px,6vw,86px); }
.duel-top { max-width:none; margin:0; }
.duel-top > div { display:flex; align-items:baseline; gap:24px; }
.duel-top .eyebrow { font:14px var(--num); color:var(--dim); }
.duel-top h1 { font:400 20px var(--ui); letter-spacing:0; margin:0; }
#duel .primary { letter-spacing:0; font:400 28px/1.3 var(--ui); }
#duel .primary i { border-left-color:var(--kill); }
#duel .link { font:14px/1.5 var(--ui); }
#duel-connect { position:relative; width:min(620px,100%); max-width:none; margin:clamp(100px,18vh,180px) 0 40px; }
.duel-wordmark { margin:0 0 32px; color:var(--ink); }
.duel-wordmark svg { display:block; width:min(100%,550px); height:auto; }
.duel-lead,#duel-connect-heading { font:400 32px/1.2 var(--ui); margin:0 0 28px; }
.duel-presets { gap:32px; }
#duel .duel-presets [aria-pressed="true"] { color:#cbb77e; text-decoration:none; border-bottom:1px solid #cbb77e; }
.duel-format-hint { margin:14px 0 28px; }
#duel-options { margin-top:32px; }
#duel .duel-disclosure > summary { color:var(--dim); }
.duel-connect-steps { border:0; padding:0; margin:0 0 30px; gap:30px; }
#duel-room-host { display:grid; grid-template-columns:1fr auto; align-items:center; border-block:1px solid var(--hair); padding:20px 0; margin:0 0 18px; gap:12px; }
#duel-room-host > span { grid-column:1/-1; color:var(--dim); font:13px var(--ui); }
#duel-room-code { font:500 clamp(44px,5.8vw,78px)/1.1 var(--num); letter-spacing:.06em; user-select:text; }
#duel #duel-room-copy { white-space:nowrap; }
#duel-room-guest { margin:0 0 22px; }
#duel-room-guest label { margin:0 0 10px; }
#duel #duel-room-input { display:block; width:100%; max-width:440px; font:500 48px/1.2 var(--num); padding:14px 0; border:0; border-bottom:1px solid var(--hair); background:#000; border-radius:0; text-transform:uppercase; letter-spacing:.08em; }
#duel-room-join { margin-top:22px !important; }
#duel-room-join::before { content:''; border:solid transparent; border-width:8px 0 8px 12px; border-left-color:var(--kill); }
#duel-manual { margin:24px 0 0; max-width:520px; }
#duel-outgoing-wrap { border:0; padding:0; margin:0; }
#duel #duel-manual .primary { font-size:16px; }
#duel-connect-status,#duel-room-status { max-width:520px; }
#duel[data-phase="lobby"] #duel-match { margin:clamp(70px,17vh,150px) 0 40px; max-width:900px; }
#duel[data-phase="lobby"] .duel-scorebar { margin-bottom:42px; }
#duel[data-phase="lobby"] #duel-score { display:none; }
#duel[data-phase="lobby"] .duel-arenas { width:100%; grid-template-columns:1fr 1fr; margin:0; }
#duel[data-phase="lobby"] .duel-arenas figure { width:auto; grid-column:auto; grid-row:auto; border-bottom:1px solid var(--hair); }
#duel[data-phase="lobby"] .duel-screen { display:none; }
#duel[data-phase="lobby"] .duel-loadout { width:min(560px,100%); margin:52px 0 32px; }
#duel[data-phase="lobby"] .duel-loadout > p { font:400 32px/1.3 var(--ui); text-align:left; color:var(--ink); margin-bottom:22px; }
#duel .duel-ship-picks button { flex-direction:column; align-items:flex-start; gap:10px; padding:12px 0; }
.duel-ship-picks canvas { width:160px; height:120px; align-self:center; }
#duel .duel-ship-picks [aria-pressed="true"] { border-color:#cbb77e; color:#cbb77e; }
#duel[data-phase="lobby"] .duel-bottom { align-items:flex-start; flex-direction:column; gap:20px; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match { margin:clamp(60px,13vh,120px) 0 40px; max-width:680px; align-items:flex-start; }
.duel-summary { max-width:600px; text-align:left; }
.duel-summary .eyebrow { letter-spacing:0; }
.duel-summary h2 { font-weight:400; font-size:42px; margin:0 0 24px; }
.duel-tally { text-align:center; }
.duel-tally strong,.duel-tally-divider { font-size:76px; }
.duel-podium { --step-high:42px; --step-low:16px; --step-tie:26px; margin-top:0; }
.duel-podium canvas { width:170px; }
.duel-step,.duel-podium [data-rank="1"] .duel-step { background:none; border-top:1px solid var(--hair); color:var(--dim); }
.duel-round-track { margin:20px 0; justify-content:flex-start; }
.duel-round-track [data-winner="0"],.duel-round-track [data-winner="1"] { border-color:#8a9694; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-bottom { text-align:left; align-items:flex-start; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-recording { justify-content:flex-start; }
#duel-more > summary { margin-inline:0; }
.duel-round-stakes { color:var(--dim); letter-spacing:0; }
@media(max-width:700px) {
  #duel { padding:24px; }
  .duel-top { align-items:flex-start; gap:12px; }
  .duel-top > div { gap:12px; flex-wrap:wrap; }
  .duel-top .eyebrow { font-size:12px; }
  .duel-top h1 { font-size:16px; }
  .duel-top-tools { gap:16px; }
  #duel .duel-top-tools .link { font-size:12px; white-space:nowrap; }
  #duel-connect { margin:130px 0 40px; }
  .duel-wordmark { margin-bottom:30px; }
  .duel-lead,#duel-connect-heading { font-size:28px; margin-bottom:24px; }
  #duel .primary { font-size:24px; }
  #duel .duel-actions { gap:24px; }
  .duel-connect-steps { gap:10px; font-size:11px; }
  #duel-room-host { grid-template-columns:1fr; }
  #duel-room-code { font-size:56px; }
  #duel #duel-room-copy { justify-self:start; font-size:14px; }
  #duel-room-host > span { grid-column:1; }
  #duel[data-phase="lobby"] #duel-match { margin-top:70px; }
  #duel[data-phase="lobby"] .duel-scorebar { font-size:12px; gap:10px; margin-bottom:28px; }
  #duel[data-phase="lobby"] .duel-arenas { gap:20px; }
  #duel[data-phase="lobby"] .duel-arenas figcaption { flex-direction:column; align-items:flex-start; }
  #duel[data-phase="lobby"] .duel-loadout { margin:40px 0 28px; }
  #duel[data-phase="lobby"] .duel-loadout > p { font-size:28px; }
  .duel-ship-picks canvas { width:130px; height:98px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match { margin-top:62px; }
  .duel-summary h2 { font-size:32px; }
  .duel-tally strong,.duel-tally-divider { font-size:60px; }
  .duel-podium canvas { width:140px; }
  #duel-options .duel-fields { grid-template-columns:1fr; }
}

@media(max-width:700px) {
 #duel[data-phase="replay"] .duel-scorebar .link,.duel-replay-bar .link {min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
 .duel-replay-seek input {min-height:44px;margin:0;width:100%}
}

/* Reveal the verdict, then the actual tally and aircraft. No moving layout. */
#duel:is([data-reveal="between"],[data-reveal="complete"]) .duel-summary h2 {animation:duel-reveal .28s ease-out both}
#duel:is([data-reveal="between"],[data-reveal="complete"]) .duel-tally {animation:duel-reveal .36s .12s ease-out both}
#duel:is([data-reveal="between"],[data-reveal="complete"]) .duel-podium {animation:duel-reveal .4s .24s ease-out both}
#duel:is([data-reveal="between"],[data-reveal="complete"]) .duel-round-track {animation:duel-reveal .3s .32s ease-out both}
#duel:is([data-reveal="between"],[data-reveal="complete"]) :is(.duel-bottom,.duel-recording) {animation:duel-reveal .3s .4s ease-out both}
@keyframes duel-reveal {from {opacity:0} to {opacity:1}}
#duel .primary b,#duel .link,#duel-stage .primary b,#duel-stage .link {transition:opacity .16s ease-out,color .16s ease-out}
#duel .primary:active b,#duel-stage .primary:active b {opacity:.55}
#duel .link:active,#duel-stage .link:active {color:var(--ink);opacity:.6}
#duel[data-rematch="waiting"] #duel-rematch i {animation:duel-ready-breathe 1.4s ease-in-out infinite}
#duel[data-rematch="invited"] #duel-rematch i {animation:duel-ready-breathe 1.4s ease-in-out infinite}
@keyframes duel-ready-breathe {0%,100% {opacity:.4} 50% {opacity:1}}
@media(prefers-reduced-motion:reduce) {#duel *,#duel *::before,#duel *::after {animation:none!important;transition:none!important}}

/* Flight has one large field and a readable opponent beside its match score. */
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) {
  --peer-width:clamp(260px,23vw,324px);
  padding:22px 24px;
}
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-top { margin-bottom:22px; }
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-match {
  position:relative; width:min(100%,calc((100dvh - 150px) * 1.5384615385 + var(--peer-width) + 24px)); margin:0 auto;
}
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]):is([data-view="player"],[data-view="spectate"]) .duel-arenas {
  width:100%; grid-template-columns:minmax(0,1fr) var(--peer-width); gap:24px; margin:0; align-items:start;
}
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-screen {
  padding:1px; border-radius:0; background:#253035; border-color:#485256; box-shadow:none;
}
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-arenas figcaption { min-height:20px; margin:0 0 8px; }
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-scorebar {
  position:absolute; right:0; top:calc(var(--peer-width) * .65 + 58px); width:var(--peer-width);
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; align-items:center;
}
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-score {
  grid-column:1/-1; grid-row:1; font:500 68px/1.1 var(--num); letter-spacing:.04em; margin:0;
}
#duel-live-round-track { grid-column:1/-1; justify-content:flex-start; gap:10px; margin:0 0 10px; }
#duel-live-round-track > span { width:30px; height:28px; font-size:13px; border-color:var(--hair); color:var(--faint); }
#duel-live-round-track [data-local="true"] { color:var(--ink); border-color:var(--ink); }
#duel-live-round-track [data-local="false"]:not([data-winner="draw"]) { color:var(--dim); border-color:var(--dim); }
#duel-live-round-track [aria-current] { color:var(--ink); border-color:var(--kill); }
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-round-label { text-align:right; }
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) :is(.duel-round-stakes,.duel-view-status) {
  position:absolute; right:0; width:var(--peer-width); top:calc(var(--peer-width) * .65 + 280px); margin:0; min-height:0; text-align:left; font-size:13px;
}
#duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-bottom { margin:12px 0 0; }
#duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-arenas { margin-top:86px; }
#duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-scorebar {
  top:-66px; width:100%; display:flex; gap:24px; flex-wrap:nowrap;
}
#duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-score { font-size:32px; }
#duel[data-view="split"] #duel-live-round-track { margin:0 auto 0 0; }
#duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) :is(.duel-round-stakes,.duel-view-status) { top:-20px; width:100%; }

/* Results use the title screen's aircraft, large type and open arrow actions. */
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match {
  max-width:1240px; width:100%; margin:clamp(64px,14vh,140px) auto 36px; align-items:stretch;
}
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-summary {
  display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); column-gap:clamp(40px,6vw,100px); max-width:none; width:100%; align-items:start;
}
.duel-summary > :not(.duel-podium) { grid-column:1; }
#duel .duel-summary h2 { font:400 clamp(42px,5.3vw,76px)/1.18 var(--ui); margin:0 0 28px; overflow-wrap:anywhere; }
#duel .duel-summary .eyebrow { margin:0 0 18px; font-size:14px; }
#duel .duel-summary .duel-tally { max-width:400px; text-align:left; }
#duel .duel-summary .duel-tally strong,#duel .duel-summary .duel-tally-divider { font-size:clamp(72px,8.6vw,124px); }
#duel .duel-summary .duel-tally strong:last-child { text-align:right; }
#duel[data-format="total"] .duel-summary .duel-tally { max-width:520px; }
#duel[data-format="total"] .duel-summary :is(.duel-tally strong,.duel-tally-divider) { font-size:clamp(22px,2.5vw,36px); }
#duel .duel-summary .duel-round-track { margin:22px 0 0; gap:12px; }
#duel .duel-summary .duel-round-track > :is(span,button) { width:32px; height:30px; font-size:14px; }
#duel .duel-summary .duel-round-track > button { min-width:44px; min-height:44px; }
#duel .duel-summary .duel-podium { grid-column:2; grid-row:1/span 7; align-self:center; margin:0; --step-high:50px; --step-low:20px; --step-tie:34px; }
#duel .duel-summary .duel-podium canvas { width:min(100%,300px); }
#duel .duel-summary .duel-pilot-duration strong { font-size:24px; }
#duel #duel-summary-detail { margin:22px 0 0; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-bottom { margin:32px 0 0; align-items:flex-start; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-recording { margin:28px 0 0; }
#duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-more { margin-top:20px; }
#duel[data-phase="replay"] #duel-live-round-track { display:none; }
#duel[data-format="total"] #duel-score { font:500 22px/1.5 var(--num); letter-spacing:0; }
.duel-score-time { display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
.duel-score-time small { font:12px/1.5 var(--ui); color:var(--dim); }

@media(orientation:portrait) and (max-width:700px) {
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) { --peer-width:58%; padding:18px 16px 0; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-top { margin-bottom:18px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-match { width:100%; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]):is([data-view="player"],[data-view="spectate"]) .duel-arenas {
    grid-template-columns:1fr; gap:22px; width:calc(100% + 32px); margin:0 -16px;
  }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-arenas figcaption { padding:0 12px; margin-bottom:6px; font-size:12px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]):is([data-view="player"],[data-view="spectate"]) figure[data-primary="false"] { width:58%; justify-self:end; margin-right:12px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-scorebar {
    top:calc(100vw * .65 + 50px); left:0; right:auto; width:38%; display:flex; flex-wrap:wrap; gap:6px 10px;
  }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-score { order:-2; flex:0 0 100%; font-size:44px; }
  #duel-live-round-track { order:-1; flex:0 0 100%; margin:0 0 4px; gap:7px; }
  #duel-live-round-track > span { width:24px; height:24px; font-size:12px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-rules { display:none; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-round-label { flex:0 0 100%; text-align:left; font-size:12px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-scorebar .link { font-size:12px; min-height:36px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) :is(.duel-round-stakes,.duel-view-status) { top:calc(100vw * .65 + 228px); left:0; right:0; width:100%; font-size:12px; line-height:1.5; }
  #duel:is([data-phase="countdown"],[data-phase="playing"]) .duel-bottom { display:none; }
  #duel #duel-touch-pad { height:max(180px,calc(100dvh - 560px)); margin-top:54px; }
  #duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-arenas { margin-top:70px; grid-template-columns:1fr; }
  #duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-scorebar { top:-54px; width:100%; gap:12px; flex-wrap:nowrap; }
  #duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-score { flex:0 0 auto; font-size:28px; }
  #duel[data-view="split"] #duel-live-round-track { flex:1; }
  #duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-round-label { display:none; }
  #duel[data-view="split"]:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) :is(.duel-round-stakes,.duel-view-status) { top:40px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match { margin:44px 0 24px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-summary { grid-template-columns:1fr; }
  #duel .duel-summary .duel-podium { grid-column:1; grid-row:1; margin:0 -8px 28px; --step-high:38px; --step-low:16px; --step-tie:24px; }
  #duel .duel-summary .duel-podium canvas { width:170px; }
  #duel .duel-summary .duel-pilot-duration { font-size:12px; margin-bottom:8px; }
  #duel .duel-summary .duel-pilot-duration strong { font-size:19px; }
  #duel .duel-summary .eyebrow { margin-bottom:10px; font-size:12px; }
  #duel .duel-summary h2 { font-size:38px; margin-bottom:16px; }
  #duel .duel-summary .duel-tally { max-width:260px; }
  #duel .duel-summary .duel-tally strong,#duel .duel-summary .duel-tally-divider { font-size:76px; }
  #duel[data-format="total"] .duel-summary .duel-tally { max-width:100%; }
  #duel[data-format="total"] .duel-summary :is(.duel-tally strong,.duel-tally-divider) { font-size:24px; }
  #duel[data-format="total"] #duel-score { font-size:18px; }
  .duel-score-time { gap:8px; }
  #duel .duel-summary .duel-round-track { margin-top:12px; }
  #duel #duel-summary-detail { margin-top:14px; font-size:12px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-bottom { margin-top:24px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) .duel-recording { margin-top:24px; gap:24px; flex-wrap:wrap; }
}

@media(orientation:landscape) and (max-height:500px) {
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) { --peer-width:200px; padding:12px 16px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-top { margin-bottom:12px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-match { width:min(100%,calc((100dvh - 122px) * 1.5384615385 + var(--peer-width) + 24px)); }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) .duel-scorebar { top:calc(var(--peer-width) * .65 + 44px); gap:4px 12px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) #duel-score { font-size:36px; }
  #duel-live-round-track { margin-bottom:0; }
  #duel-live-round-track > span { width:24px; height:22px; font-size:11px; }
  #duel:is([data-phase="countdown"],[data-phase="playing"],[data-phase="paused"]) :is(.duel-round-stakes,.duel-view-status) { top:calc(var(--peer-width) * .65 + 190px); font-size:11px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) #duel-match { margin-top:28px; }
  #duel .duel-summary h2 { font-size:36px; margin-bottom:12px; }
  #duel .duel-summary :is(.duel-tally strong,.duel-tally-divider) { font-size:56px; }
  #duel .duel-summary .duel-podium canvas { width:160px; }
  #duel .duel-summary .duel-pilot-duration strong { font-size:18px; }
  #duel .duel-summary .duel-round-track,#duel #duel-summary-detail { margin-top:10px; }
  #duel:is([data-phase="between"],[data-phase="complete"],[data-phase="interrupted"]) :is(.duel-bottom,.duel-recording) { margin-top:12px; }
}

/* Portrait-only controls: preserve both flight fields and the lower drag surface. */
@media (pointer:coarse) and (orientation:portrait) and (max-width:700px) {
  #duel .link,#duel summary { min-width:44px;min-height:44px;font-size:14px;display:inline-flex;align-items:center; }
  #duel .duel-top-tools { gap:12px; }
  #duel .duel-top-tools .link { font-size:14px; }
  #duel .duel-scorebar .link { min-height:44px;font-size:14px; }
  #duel #duel-view,#duel #duel-pause { min-height:44px;font-size:14px; }
  #duel .duel-pilot-id { min-width:44px;min-height:44px; }
  #duel :is(input:not([type="checkbox"]):not([type="file"]),select) { min-height:44px;font-size:16px; }
  #duel .duel-summary .duel-round-track button { min-width:44px;min-height:44px;font-size:14px; }
  #duel :is(.duel-round-stakes,.duel-view-status,.duel-presence,.duel-pilot-duration,#duel-summary-detail) { font-size:14px; }
}

@media (pointer:coarse) and (orientation:portrait) and (max-width:700px) {
  #duel #duel-arenas figcaption,#duel #duel-round-label,#duel .duel-score-time small,
  #duel .duel-summary .eyebrow,#duel .duel-score-kind,#duel .note { font-size:14px; }
}

@media (pointer:coarse) and (orientation:portrait) and (max-width:700px) {
  #duel #duel-touch-pad { height:clamp(180px,calc(100dvh - 640px - env(safe-area-inset-bottom)),240px); }
}