/* =====================================================================
   SIGNAL COMBAT 1.0 · the duel
   One column, the same on a phone and a desk: their fighter at the top, the two lanes, yours at the bottom, the pads under
   your thumbs. Dark, exact, quiet until something happens. Colour belongs to fighters (--you, --them); white is "lit";
   red is a hit; cream is a charge. Text is a word, rarely a sentence.
   ===================================================================== */
.sg-duel { position: fixed; inset: 0; z-index: 30; background: radial-gradient(120% 70% at 50% 50%, #100E15 0%, #08070B 70%); overflow: hidden; }
.sg-duel[hidden] { display: none !important; }
.du { --you: #08C1FE; --them: #CECF66; position: absolute; inset: 0; margin: 0 auto; max-width: 560px; display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto; color: var(--ink, #F9F4EE); font: 400 14px/1.4 var(--f-text, system-ui);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: none; }
.du *, .du *::before, .du *::after { box-sizing: border-box; }
.du > .du-top { grid-row: 1; } .du > .du-wire { grid-row: 2; } .du > .du-stage { grid-row: 3; } .du > .du-deck { grid-row: 4; }
.du button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }

/* ---------- top: who you're facing, their five, their gear; LEAVE ---------- */
.du-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 4px; min-height: 44px; }
.du-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.du-nm { font: italic 700 17px/1 var(--f-head, sans-serif); letter-spacing: .01em; white-space: nowrap; }
.du-who.them .du-nm { color: var(--them); }
.du-who.you .du-nm { color: var(--you); }
.du-segs { display: flex; gap: 3px; }
.du-segs > i { width: 16px; height: 6px; background: currentColor; transition: background-color .2s, transform .2s; }   /* 3.8.2 · the row's own marks only (it drew a bar over the den's count) */
.du-who.them .du-segs { color: var(--them); } .du-who.you .du-segs { color: var(--you); }
.du-segs > i.off { background: rgba(249, 244, 238, .1); transform: scaleY(.6); }
.du.drill .du-segs { visibility: hidden; }
.du-gear { display: flex; gap: 5px; flex-wrap: wrap; }
.du-gear i, .du-uses i { font: 700 9px/1 var(--f-mono, monospace); font-style: normal; letter-spacing: .14em; padding: 4px 6px; color: var(--ink-2, #C9C5C0);
  box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .16); white-space: nowrap; }
.du-leave { height: 30px; padding: 0 12px; border: 0; background: transparent; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .2); cursor: pointer;
  font: 700 10px/1 var(--f-mono, monospace) !important; letter-spacing: .2em; color: var(--ink-2, #C9C5C0) !important; }
.du-leave:hover { box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .55); }

/* ---------- HARDWIRE: what they've done, counted ---------- */
.du-wire { display: flex; justify-content: center; gap: 18px; padding: 2px 14px 4px; font: 600 9px/1.6 var(--f-mono, monospace); letter-spacing: .14em; color: var(--dim, #8A8784); }
.du-wire[hidden] { display: none; }
.du-wire span { display: inline-flex; align-items: center; gap: 4px; }
.du-wire b { font-weight: 600; margin-right: 4px; }
.du-wire i { font-style: normal; width: 15px; height: 15px; display: inline-grid; place-items: center; color: var(--them); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .14); }
.du-wire i.full { color: #0A0A0A; background: var(--them); }
.du-wire em { font-style: normal; opacity: .5; }

/* ---------- the stage: them, the court, you ---------- */
.du-stage { position: relative; display: grid; grid-template-rows: 21% minmax(0, 1fr) 15%; min-height: 0; }
.du-f { position: relative; display: flex; justify-content: center; min-height: 0; pointer-events: none; }
.du-f.them { align-items: flex-end; }
.du-f.you { align-items: flex-start; }
.du-bust { position: relative; height: 100%; aspect-ratio: 1; display: block; }
.du-bust > .sav, .du-bust > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.du-f.them .du-bust { filter: drop-shadow(0 10px 22px color-mix(in srgb, var(--them) 30%, transparent)); }
.du-f.you .du-bust { height: 135%; filter: drop-shadow(0 -8px 20px color-mix(in srgb, var(--you) 26%, transparent)); }
.du-f.hit .du-bust { animation: du-hit 420ms cubic-bezier(.2, .8, .2, 1); }
.du-f.hit.heavy .du-bust { animation: du-hit-h 620ms cubic-bezier(.2, .8, .2, 1); }
.du-f.them.hit .du-bust { --dy: -14px; } .du-f.you.hit .du-bust { --dy: 14px; }
@keyframes du-hit { 0% { transform: translateY(0); filter: brightness(3) saturate(0); } 18% { transform: translateY(var(--dy)) rotate(-2deg); } 100% { transform: none; } }
@keyframes du-hit-h { 0% { transform: translateY(0); filter: brightness(4) saturate(0); } 14% { transform: translateY(calc(var(--dy) * 2)) rotate(3deg); } 40% { transform: translateY(calc(var(--dy) * -.4)); } 100% { transform: none; } }
.du-f.off .du-bust { animation: du-off 420ms ease-in-out; opacity: .7; }
@keyframes du-off { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg) translateX(-4px); } 75% { transform: rotate(3deg) translateX(3px); } }
.du-stage.jolt { animation: du-jolt 260ms linear; }
@keyframes du-jolt { 0%, 100% { transform: none; } 20% { transform: translate(5px, -3px); } 40% { transform: translate(-4px, 3px); } 60% { transform: translate(3px, 2px); } 80% { transform: translate(-2px, -1px); } }
/* the court sits in a wrapper that takes the row's size; the canvas fills it. (A canvas as a grid item with height: 100% is sized
   by its own aspect ratio in WebKit, which grew it past its row on phones: v13 fix) */
.du-courtwrap { position: relative; z-index: 0; min-height: 0; min-width: 0; overflow: hidden; }
.du-court { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

/* a fighter speaks: a short line by their bust */
.du-say { position: absolute; left: 50%; max-width: min(78%, 360px); transform: translate(-50%, 6px); opacity: 0; transition: opacity .2s, transform .2s;
  font: italic 500 14px/1.3 var(--f-text, system-ui); text-align: center; padding: 6px 10px; background: rgba(8, 7, 11, .78); pointer-events: none; }
.du-f.them .du-say { top: 6px; color: var(--them); }
.du-f.you .du-say { bottom: 8px; color: var(--you); }
.du-say.in { opacity: 1; transform: translate(-50%, 0); }
/* 3.3 · beside the opponent, by their head (js/duel.js beside()): left-aligned, nothing over their face */
.du-f.them .du-say.side, .du-f.you .du-say.side { transform: translate(-6px, 0); text-align: left; font-size: 13.5px; bottom: auto; }
.du-f.them .du-say.side.in, .du-f.you .du-say.side.in { transform: translate(0, 0); }   /* 3.5 · yours beside you too (js/duel.js beside) */

/* tempo: four steps up the side; FULL SPEED lights them */
.du-tempo { position: absolute; right: 8px; top: 26%; display: grid; gap: 4px; justify-items: end; pointer-events: none; }
.du-tempo i { width: 4px; height: 16px; background: rgba(249, 244, 238, .12); transition: background-color .2s, box-shadow .2s; }
.du-tempo i.on { background: var(--ink, #F9F4EE); }
.du-tempo b { font: 700 8.5px/1 var(--f-mono, monospace); letter-spacing: .2em; writing-mode: vertical-rl; color: var(--orange, #FC4C01); opacity: 0; transition: opacity .2s; margin-top: 4px; }
.du-tempo.full i.on { background: var(--orange, #FC4C01); box-shadow: 0 0 10px var(--orange, #FC4C01); }
.du-tempo.full b { opacity: 1; }
.du-tempo { display: flex; flex-direction: column-reverse; align-items: flex-end; }

/* captions: the word, then why */
.du-cap { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%) scale(.96); width: min(92%, 440px); display: grid; justify-items: center; gap: 6px;
  text-align: center; pointer-events: none; opacity: 0; transition: opacity .18s, transform .18s; }
.du-cap.in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.du-cap b { font: italic 700 clamp(34px, 9vw, 54px)/.95 var(--f-head, sans-serif); letter-spacing: .01em; text-shadow: 0 4px 30px rgba(0, 0, 0, .8); }
.du-cap span { font: 500 14px/1.35 var(--f-text, system-ui); color: var(--ink-2, #C9C5C0); padding: 5px 10px; background: rgba(8, 7, 11, .72); }
.du-cap.good b { color: var(--you); } .du-cap.bad b { color: #FF4D3D; } .du-cap.full b { color: var(--orange, #FC4C01); }
.du-cap.win b { color: var(--you); font-size: clamp(44px, 12vw, 72px); } .du-cap.lose b { color: var(--them); font-size: clamp(40px, 11vw, 64px); }
.du-cap.soft b, .du-cap.note b { font-size: 26px; }
.du-cap.note span { color: var(--them); font: 700 11px/1.4 var(--f-mono, monospace); letter-spacing: .18em; }

/* small words where it happened */
.du-tag { position: absolute; left: 50%; font: 700 11px/1 var(--f-mono, monospace); font-style: normal; letter-spacing: .2em; padding: 4px 7px; pointer-events: none;
  background: rgba(8, 7, 11, .8); animation: du-tag 1100ms ease-out both; transform: translateX(calc(-50% + (var(--n) - 1) * min(118px, 28vw))); white-space: nowrap; }
.du-tag.you { bottom: 17%; color: var(--you); } .du-tag.them { top: 22%; color: var(--them); }
.du-tag.boost { color: #0A0A0A; background: var(--orange, #FC4C01); } .du-tag.clean, .du-tag.ready { color: #0A0A0A; background: #F9F4EE; }
.du-tag.own { color: #0A0A0A; background: var(--you); } .du-tag.bad { color: #fff; background: #FF4D3D; } .du-tag.dim { opacity: .75; }
@keyframes du-tag { 0% { opacity: 0; translate: 0 6px; } 15% { opacity: 1; translate: 0 0; } 75% { opacity: 1; } 100% { opacity: 0; translate: 0 -8px; } }

/* the walk-up */
.du-intro { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: 24px;
  background: radial-gradient(70% 50% at 50% 45%, color-mix(in srgb, var(--them) 14%, transparent), rgba(8, 7, 11, .7) 70%); animation: du-fade 420ms ease-out both; }
.du-intro[hidden] { display: none; }
.du-intro .du-k { margin: 0; font: 600 10.5px/1.3 var(--f-mono, monospace); letter-spacing: .24em; color: var(--them); }
.du-intro h2 { margin: 0; font: italic 700 clamp(52px, 15vw, 96px)/.88 var(--f-head, sans-serif); color: var(--them); text-shadow: 0 0 50px color-mix(in srgb, var(--them) 35%, transparent); }
.du-intro .du-line { margin: 4px 0 0; max-width: 34ch; font: italic 500 17px/1.35 var(--f-text, system-ui); color: var(--ink, #F9F4EE); }
.du-intro .du-rules { margin: 0; font: 600 10.5px/1.5 var(--f-mono, monospace); letter-spacing: .16em; color: var(--ink-2, #C9C5C0); }
.du-intro .du-go { margin: 10px 0 0; font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .3em; color: var(--ink-2, #C9C5C0); animation: du-blink 900ms 800ms ease-in-out infinite alternate; }
@keyframes du-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes du-blink { from { opacity: .35; } to { opacity: 1; } }

/* the trial's words */
.du-lesson { position: absolute; left: 50%; top: 3%; transform: translateX(-50%); width: min(94%, 460px); padding: 10px 14px 12px; text-align: center; pointer-events: none;
  background: rgba(8, 7, 11, .84); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .1); animation: du-fade 300ms ease-out both; z-index: 3; }
.du-lesson[hidden] { display: none; }
.du-lesson .du-k { margin: 0 0 4px; font: 600 10px/1.3 var(--f-mono, monospace); letter-spacing: .22em; color: var(--orange, #FC4C01); }
.du-lesson h3 { margin: 2px 0 6px; font: italic 700 34px/.95 var(--f-head, sans-serif); }
.du-lesson p { margin: 0; font: 500 14.5px/1.4 var(--f-text, system-ui); color: var(--ink, #F9F4EE); }
.du-lesson.big { top: 30%; padding: 18px 18px 20px; }
.du-pips { display: flex; justify-content: center; gap: 6px; margin-top: 8px !important; }
.du-pips i { width: 22px; height: 5px; background: rgba(249, 244, 238, .16); }
.du-pips i.on { background: var(--you); }

/* ---------- the deck: you, your uses, the pads ---------- */
.du-deck { position: relative; z-index: 2; display: grid; gap: 8px; padding: 6px 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.du-deck .du-uses i:not(.du-mk) { background: rgba(8, 7, 11, .82); }   /* 3.5 · (the old chips') never a mark: it out-ranked .du-mk.tech and left your technique a dark, empty box */
.du-deck .du-who { justify-content: space-between; flex-wrap: wrap; gap: 6px 10px; }
.du-uses { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; justify-content: center; }
.du-pads { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; height: clamp(86px, 15vh, 132px); touch-action: none; }
.du-pad.L { grid-column: 1; } .du-ctr { grid-column: 2; } .du-pad.R { grid-column: 3; }
.du-pad { position: relative; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--you) 10%, #0D0C11), #0B0A0E); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--you) 26%, transparent);
  touch-action: none; transition: box-shadow .12s, background-color .12s; }
.du-pad b { font: 700 12px/1 var(--f-mono, monospace); letter-spacing: .2em; color: var(--ink-2, #C9C5C0); opacity: .7; }
.du-pad i { position: absolute; left: 12%; right: 12%; top: 0; height: 3px; background: var(--you); opacity: .55; }
.du-pad.tap { animation: du-tap 220ms ease-out; }
@keyframes du-tap { 0% { background: color-mix(in srgb, var(--you) 45%, #0D0C11); box-shadow: inset 0 0 0 2px var(--you); } 100% { } }
.du-pad.hint { box-shadow: inset 0 0 0 2px #F9F4EE, 0 0 24px -4px #F9F4EE; }
.du-pads.wait .du-pad { opacity: .35; }
.du[data-hold="you"] .du-pad { box-shadow: inset 0 0 0 1.5px var(--you), 0 0 26px -10px var(--you); }
.du[data-hold="you"] .du-pad i { opacity: 1; height: 4px; }
.du[data-off="1"] .du-pad { opacity: .45; filter: saturate(.3); }
.du[data-phase="intro"] .du-pad, .du[data-phase="done"] .du-pad { opacity: .45; }
.du-ctr { width: 64px; display: grid; place-content: center; gap: 4px; border: 0; cursor: pointer; background: transparent; padding: 0; }
.du-ctr[hidden] { display: none; }
.du-ctr b { width: 44px; height: 44px; margin: 9px auto;   /* 2.1: the rotated square reaches 9 px past its box: room for it, so it never covers its label */ display: grid; place-items: center; transform: rotate(45deg); background: #121117;
  box-shadow: inset 0 0 0 1.5px var(--orange, #FC4C01); font: 700 0/1 var(--f-mono, monospace); color: transparent; position: relative; }
.du-ctr b::after { content: attr(data-w); }
.du-ctr i { font: 700 8.5px/1 var(--f-mono, monospace); font-style: normal; letter-spacing: .16em; color: var(--orange, #FC4C01); text-align: center; }
.du-ctr:disabled { opacity: .35; cursor: default; }
.du-ctr:not(:disabled) b { background: color-mix(in srgb, var(--orange, #FC4C01) 22%, #121117); }

/* keys only matter with a keyboard; on touch, the pads just say the lane */
@media (hover: none) and (pointer: coarse) { .du-pad b { font-size: 0; } }
@media (max-height: 700px) { .du-stage { grid-template-rows: 18% minmax(0, 1fr) 12%; } .du-pads { height: 84px; } }
@media (prefers-reduced-motion: reduce) { .du-f.hit .du-bust, .du-stage.jolt, .du-tag, .du-intro .du-go { animation: none !important; } }

/* =====================================================================
   v13 · perks in the fight, the Wardens' kits, PERK TRIALS
   ===================================================================== */
.du-ic { display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none; }
.du-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.du-ic.big { width: 54px; height: 54px; color: var(--orange, #FC4C01); }

/* your perks: a mark each, by your name. It rings when its condition is met, bursts when it fires, fades when you let it pass */
.du-uses .du-pk { display: inline-flex; align-items: center; gap: 5px; color: var(--ink, #F9F4EE); transition: box-shadow .15s, color .15s, opacity .3s; }
.du-uses .du-pk b { font: inherit; }
.du-uses .du-pk.rdy { color: #0A0A0A; background: #F9F4EE; box-shadow: 0 0 0 2px #F9F4EE, 0 0 18px rgba(249, 244, 238, .55); animation: du-ring 700ms ease-in-out infinite alternate; }
.du-uses .du-pk.fire { animation: du-burst 650ms ease-out both; }
.du-uses .du-pk.miss { opacity: .35; }
@keyframes du-ring { from { box-shadow: 0 0 0 1px #F9F4EE, 0 0 8px rgba(249, 244, 238, .3); } to { box-shadow: 0 0 0 3px #F9F4EE, 0 0 22px rgba(249, 244, 238, .7); } }
@keyframes du-burst { 0% { color: #0A0A0A; background: var(--orange, #FC4C01); box-shadow: 0 0 0 6px color-mix(in srgb, var(--orange, #FC4C01) 45%, transparent), 0 0 30px var(--orange, #FC4C01); } 100% { } }

/* the cue: what you can do right now (a word, the perk, its window draining). Sits between the lanes, above your line */
.du-cue { position: absolute; left: 50%; bottom: 19%; transform: translate(-50%, 6px); display: grid; justify-items: center; gap: 2px; min-width: 96px; padding: 6px 12px 7px;
  pointer-events: none; opacity: 0; transition: opacity .12s, transform .12s; background: rgba(8, 7, 11, .86); box-shadow: inset 0 0 0 1.5px #F9F4EE; z-index: 2; color: #F9F4EE; }
.du-cue.in { opacity: 1; transform: translate(-50%, 0); }
.du-cue .du-ic { width: 16px; height: 16px; }
.du-cue b { font: italic 700 30px/.9 var(--f-head, sans-serif); letter-spacing: .02em; }
.du-cue span { font: 700 9px/1 var(--f-mono, monospace); letter-spacing: .22em; color: var(--ink-2, #C9C5C0); }
.du-cue u { display: block; height: 3px; width: 100%; margin-top: 4px; background: #F9F4EE; transform-origin: left; animation: du-drain linear both; text-decoration: none; }
@keyframes du-drain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.du-cue.quiet { min-width: 0; padding: 6px 9px; }
.du-cue.quiet span { display: none; }
.du-cue.k-cool { box-shadow: inset 0 0 0 1.5px #08C1FE; } .du-cue.k-cool b { color: #08C1FE; } .du-cue.k-cool u { background: #08C1FE; }
.du-cue.k-echo b { color: var(--orange, #FC4C01); }
.du-cue.fire { background: var(--orange, #FC4C01); box-shadow: none; color: #0A0A0A; }
.du-cue.fire span { color: #0A0A0A; }
.du-cue.fire b { color: #0A0A0A; font-size: 24px; }

/* the diamond, when ECHO is what it does right now */
.du-ctr.hot b { background: var(--orange, #FC4C01) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange, #FC4C01) 40%, transparent), 0 0 24px var(--orange, #FC4C01); animation: du-ring2 600ms ease-in-out infinite alternate; }
.du-ctr.hot i { color: #F9F4EE; }
@keyframes du-ring2 { from { filter: brightness(1); } to { filter: brightness(1.35); } }
.du-ctr.tap b { animation: du-ctap 300ms ease-out; }
.du-ctr { position: relative; }
.du-ctr.no b { animation: du-no 280ms ease-in-out; }
.du-ctr.no::after { content: attr(data-no); position: absolute; left: 50%; top: -20px; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  font: 700 10px/1 var(--f-mono, monospace); letter-spacing: .18em; color: #F9F4EE; background: rgba(8, 7, 11, .9); padding: 4px 6px; }
@keyframes du-no { 25% { transform: rotate(45deg) translateX(-4px); } 75% { transform: rotate(45deg) translateX(4px); } }
@keyframes du-ctap { 0% { transform: rotate(45deg) scale(.82); background: #F9F4EE; } 100% { transform: rotate(45deg) scale(1); } }

/* their kit: chips at the top, lit when they use one; the tag names the piece the first time */
.du-gear i.lit { animation: du-lit 900ms ease-out both; }
@keyframes du-lit { 0% { color: #0A0A0A; background: var(--them); box-shadow: 0 0 16px var(--them); } 100% { } }
.du-tag.kit { color: #0A0A0A; background: var(--them); }
.du-intro .du-kit { margin: 2px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 40ch; font: 600 10px/1.4 var(--f-mono, monospace); letter-spacing: .14em; color: var(--ink-2, #C9C5C0); }
.du-intro .du-kit > i { font-style: normal; color: var(--them); width: 100%; }
.du-intro .du-kit b { font-weight: 700; padding: 4px 7px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--them) 50%, transparent); color: var(--ink, #F9F4EE); }
.du-intro .du-kit b.new { box-shadow: inset 0 0 0 1.5px var(--orange, #FC4C01); }
.du-intro .du-kit em { font-style: normal; color: var(--orange, #FC4C01); }

/* tempo: a meet made toward the next step */
.du-tempo i.half { background: linear-gradient(0deg, rgba(249, 244, 238, .7) 50%, rgba(249, 244, 238, .12) 50%); }

/* NOW: the moment, said once (a lesson's second miss) */
.du-cap.now b { color: #F9F4EE; font-size: clamp(56px, 16vw, 92px); }

/* ---------- PERK TRIALS ---------- */
.du-lesson.les { pointer-events: none; }
.du-lesson.les .du-mini { pointer-events: auto; }
.du-lesson.les h3 { font-size: 30px; }
.du-lesson.les.intro { top: 26%; padding: 18px 18px 20px; }
.du-lesson.les.intro h3 { font-size: 36px; }
/* 3.8.2 · a lesson's card: who does it (the kicker, in your colour for TRY IT, theirs for ANSWER IT), the move's name, its lines, one button */
.du-lesson.les.intro .du-k { font-size: 11px; }
.du-lesson.les.intro.try .du-k { color: var(--you, #FC4C01); }
.du-lesson.les.intro.answer .du-k { color: var(--them, #D9D4CC); }
.du-lesson.les.intro p + p { margin-top: 6px; }
.du-lesson.les.show h3 { color: var(--ink-2, #C9C5C0); }
.du-lesson.les.do h3 { color: var(--you); }
.du-lesson .du-use { margin-top: 6px; font: 700 10px/1.3 var(--f-mono, monospace) !important; letter-spacing: .2em; color: var(--orange, #FC4C01) !important; }
.du-lesson .du-tip { margin-top: 6px !important; font: 600 11px/1.4 var(--f-mono, monospace) !important; letter-spacing: .12em; color: #0A0A0A !important; background: #F9F4EE; padding: 4px 8px; display: inline-block; }
.du-mini { margin-top: 8px; height: 30px; padding: 0 12px; border: 0; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .35);
  font: 700 10px/1 var(--f-mono, monospace) !important; letter-spacing: .2em; color: var(--ink, #F9F4EE) !important; }
.du-mini.hot { background: #F9F4EE; color: #0A0A0A !important; }
.du-mini:hover { box-shadow: inset 0 0 0 1px #F9F4EE; }
/* the ghost's hands: the pad it pressed, lit like a press */
.du-pad.gdown { background: color-mix(in srgb, var(--you) 38%, #0D0C11); box-shadow: inset 0 0 0 2px #F9F4EE, 0 0 22px -6px #F9F4EE; }
.du-pad.gdown::after { content: ''; position: absolute; width: 22px; height: 22px; border: 2px solid #F9F4EE; border-radius: 50%; animation: du-touch 600ms ease-out infinite; }
@keyframes du-touch { from { transform: scale(.6); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }
.du[data-les="show"] .du-pad { cursor: default; }
.du[data-les="show"] .du-pad:not(.gdown) { opacity: .55; }
/* hands off: when not pressing is the move (COOL's wait, ECHO's ◆ instead of a send, OPENING's hold) */
.du[data-hands="off"] .du-pad { opacity: .3; filter: saturate(.2); }
.du[data-hands="off"] .du-pad::before { content: 'WAIT'; position: absolute; font: 700 10px/1 var(--f-mono, monospace); letter-spacing: .3em; color: #F9F4EE; }
/* FEEL: the perk, stamped, with its result */
.du-stamp { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; text-align: center; pointer-events: none; z-index: 4; }
.du-stamp[hidden] { display: none; }
.du-stamp .du-ic { width: 44px; height: 44px; color: var(--orange, #FC4C01); }
.du-stamp b { font: italic 700 clamp(46px, 13vw, 76px)/.9 var(--f-head, sans-serif); color: #F9F4EE; text-shadow: 0 0 40px color-mix(in srgb, var(--orange, #FC4C01) 60%, transparent); }
.du-stamp span { font: 700 11px/1.3 var(--f-mono, monospace); letter-spacing: .22em; color: #0A0A0A; background: var(--orange, #FC4C01); padding: 5px 9px; }
.du-stamp.in { animation: du-stamp 1600ms cubic-bezier(.2, .9, .2, 1) both; }
.du-stamp.in.big { animation-name: du-stamp-big; }
.du-stamp.in.big::before { content: ''; position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 3px solid var(--orange, #FC4C01); animation: du-shock 900ms ease-out both; }
@keyframes du-stamp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.25); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes du-stamp-big { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); filter: brightness(3); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(.96); } 18% { transform: translate(-50%, -50%) scale(1); filter: none; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes du-shock { from { transform: rotate(45deg) scale(.4); opacity: 1; } to { transform: rotate(45deg) scale(5); opacity: 0; } }
/* UNDERSTAND: the card */
.du-card { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92%, 400px); padding: 20px 20px 18px; display: grid; justify-items: center; gap: 12px;
  background: #0C0B10; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .16), 0 30px 80px rgba(0, 0, 0, .7); z-index: 5; animation: du-fade 260ms ease-out both; text-align: center; }
.du-card[hidden] { display: none; }
.du-card .du-k { margin: 0; font: 700 10px/1.3 var(--f-mono, monospace); letter-spacing: .24em; color: var(--orange, #FC4C01); }
.du-wdr { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; width: 100%; }
.du-wdr li { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 10px; padding: 8px 10px; text-align: left; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .1); }
.du-wdr li i { font: 700 9px/1 var(--f-mono, monospace); font-style: normal; letter-spacing: .22em; color: var(--ink-2, #C9C5C0); }
.du-wdr li b { font: italic 700 17px/1.1 var(--f-head, sans-serif); color: #F9F4EE; }
.du-wdr li:nth-child(2) b { color: var(--you); }
.du-wdr li:nth-child(3) { box-shadow: inset 0 0 0 1.5px var(--orange, #FC4C01); }
.du-card .du-use { margin: 0; font: 700 10px/1.3 var(--f-mono, monospace); letter-spacing: .2em; color: var(--ink-2, #C9C5C0); }
.du-card-row { display: flex; gap: 8px; width: 100%; }
.du-btn { flex: 1; height: 46px; border: 0; cursor: pointer; background: transparent; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .3);
  font: 700 12px/1 var(--f-mono, monospace) !important; letter-spacing: .24em; color: var(--ink, #F9F4EE) !important; }
.du-btn.go { background: var(--orange, #FC4C01); color: #0A0A0A !important; box-shadow: none; }
.du-btn:focus-visible, .du-mini:focus-visible { outline: 2px solid #F9F4EE; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .du-stamp.in, .du-uses .du-pk.rdy, .du-ctr.hot b, .du-pad.gdown::after, .du-stamp.in.big::before { animation: none !important; } .du-stamp.in { opacity: 1; } }
.du-uses .du-pk svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.du-lesson.les { background: rgba(8, 7, 11, .62); }
/* a timing cue is there the instant its window opens (a fade-in would eat into a 0.4 s window) */
.du-cue { transition: none; }
/* above your line and the signal in your hands (the orb), never over a lane's landing spot: it only shows while you hold it */
.du-cue { bottom: calc(21.5% + 30px); }
@media (max-height: 700px) { .du-cue { bottom: calc(18% + 26px); } }
/* 3.5 · what just fired is said off the court, by your side (left of your bust), small: in the middle, an orange block stayed a
   second over both lanes' landing spots while the next shot came in. (Its mark in your row bursts too; the ready cue, shown only
   while you hold the shot, keeps its place) */
.du-cue.in.fire { left: 12px; bottom: 30px; transform: none; min-width: 0; max-width: calc(50% - 80px); padding: 5px 9px 6px; justify-items: start; text-align: left; }
.du-cue.in.fire .du-ic { display: none; }
.du-cue.in.fire b { font-size: 15px; line-height: 1; white-space: normal; }
.du-cue.in.fire span { font-size: 9.5px; letter-spacing: .12em; }

/* =====================================================================
   v14 · solid, legible type in the fight (Red Hat Display for words you act on, never 9 px mono); the device's own hints
   (keys on a keyboard, nothing on touch); the lesson card that shows what happened; COOL you can see; busts without a cut edge
   ===================================================================== */
.du-gear i, .du-uses i { font: 700 10.5px/1 var(--f-disp, sans-serif); letter-spacing: .08em; padding: 5px 7px; }
.du-leave { height: 36px; padding: 0 14px; font: 700 12px/1 var(--f-disp, sans-serif) !important; letter-spacing: .1em; }
.du-wire { font: 600 10.5px/1.6 var(--f-text, sans-serif); letter-spacing: .1em; gap: 14px; flex-wrap: wrap; }
.du-wire i { width: auto; min-width: 18px; height: 18px; padding: 0 4px; font: 700 10px/1 var(--f-disp, sans-serif); letter-spacing: .04em; }
.du-wire.lit { animation: du-wirelit 1.4s ease-out; }
@keyframes du-wirelit { 0%, 30% { color: #F9F4EE; text-shadow: 0 0 12px rgba(249, 244, 238, .8); } }
.du-tempo em { font: 700 9.5px/1 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--dim, #8A8784); font-style: normal; writing-mode: vertical-rl; transform: rotate(180deg); margin-bottom: 4px; }
@media (max-height: 560px) { .du-tempo em { display: none; } }   /* 3.5 · a short court (a laptop at 150 %): the SPEED label ran into your name; the bars stay */
@media (max-width: 340px) { .du.drill .du-tempo em { display: none; } }   /* 3.8.1 · the same in a lesson on a 320 px phone (its name sits lower right); the bars stay */
.du-tempo b { font: 700 10px/1 var(--f-disp, sans-serif); letter-spacing: .16em; }
.du-intro .du-k { font: 700 11.5px/1.3 var(--f-disp, sans-serif); letter-spacing: .16em; }
.du-intro .du-rules { font: 700 11.5px/1.5 var(--f-disp, sans-serif); letter-spacing: .1em; }
.du-intro .du-go { font: 700 13px/1 var(--f-disp, sans-serif); letter-spacing: .2em; }
.du-intro .du-kit { font: 700 11px/1.4 var(--f-disp, sans-serif); letter-spacing: .08em; }
.du-cap.note span { font: 700 12px/1.4 var(--f-disp, sans-serif); letter-spacing: .1em; }
.du-tag { font: 700 12px/1 var(--f-disp, sans-serif); letter-spacing: .1em; padding: 5px 8px; }
.du-lesson .du-k { font: 700 11px/1.3 var(--f-disp, sans-serif); letter-spacing: .14em; }
.du-lesson .du-use { font: 700 11px/1.3 var(--f-disp, sans-serif) !important; letter-spacing: .12em; }
.du-lesson .du-tip { font: 600 13px/1.4 var(--f-text, sans-serif) !important; letter-spacing: 0; padding: 6px 10px; }
.du-mini { height: 38px; padding: 0 14px; font: 700 12px/1 var(--f-disp, sans-serif) !important; letter-spacing: .1em; }
.du-cue span { font: 700 10px/1 var(--f-disp, sans-serif); letter-spacing: .14em; }
.du-stamp span { font: 700 12.5px/1.3 var(--f-disp, sans-serif); letter-spacing: .12em; }
.du[data-hands="off"] .du-pad::before { font: 700 12px/1 var(--f-disp, sans-serif); letter-spacing: .2em; }
/* the pads: the arrow keys on a keyboard; nothing on touch (the pad is the button) */
.du-pad b.du-key { font: 600 26px/1 var(--f-text, sans-serif); letter-spacing: 0; opacity: .55; }
.du-ctr i { font: 700 10px/1.15 var(--f-disp, sans-serif); letter-spacing: .06em; max-width: 72px; }
.du-ctr em.du-key { display: block; margin-top: 3px; font: 700 9px/1 var(--f-disp, sans-serif); letter-spacing: .14em; color: var(--dim, #8A8784); font-style: normal; text-align: center; }
.du[data-input="touch"] .du-key { display: none !important; }
.du[data-input="mouse"] .du-pad .du-key { opacity: .3; }
/* the lesson card: what to do, what happens, and what you just did */
.du-card { gap: 14px; padding: 24px 22px 20px; width: min(92%, 430px); }
.du-card .du-k { font: 700 11px/1.3 var(--f-disp, sans-serif); letter-spacing: .16em; }
.du-card h3 { margin: 0; font: italic 700 30px/1 var(--f-head, sans-serif); text-transform: uppercase; }
.du-card .du-how { margin: 0; font: 500 15px/1.45 var(--f-text, sans-serif); color: var(--ink, #F9F4EE); }
.du-card .du-res, .du-card .du-saw { margin: 0; width: 100%; display: grid; gap: 5px; padding: 11px 13px; text-align: left; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .16);
  font: 500 14px/1.4 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); }
.du-card .du-res i, .du-card .du-saw i { font: 700 10.5px/1 var(--f-disp, sans-serif); letter-spacing: .14em; font-style: normal; color: var(--dim, #8A8784); }
.du-card .du-saw { box-shadow: inset 0 0 0 1.5px var(--orange, #FC4C01); color: var(--ink, #F9F4EE); }
.du-card .du-saw i { color: var(--orange, #FC4C01); }
.du-btn { height: 48px; font: 700 13px/1 var(--f-disp, sans-serif) !important; letter-spacing: .12em; }
.du-cmp { display: inline-block; margin: 0 0 6px !important; padding: 5px 9px; font: 700 11px/1 var(--f-disp, sans-serif) !important; letter-spacing: .14em; }
.du-cmp.off { color: #FF6B5C !important; box-shadow: inset 0 0 0 1px #FF6B5C; }
.du-cmp.on { color: var(--you) !important; box-shadow: inset 0 0 0 1px var(--you); }
/* COOL: the rally comes down where you can see it (a cold wash over the court, the speed bars stepping down) */
.du-courtwrap::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(75% 60% at 50% 62%, rgba(8, 193, 254, .22), rgba(8, 193, 254, .06) 55%, transparent 75%); }
.du.cooled .du-courtwrap::after { animation: du-cool 1.9s ease-out both; }
.du.cooled .du-tempo i { transition: background-color .7s ease, box-shadow .7s ease; }
@keyframes du-cool { 0% { opacity: 0; } 14% { opacity: 1; } 100% { opacity: 0; } }
/* the busts: the cut edge of the art dissolves (no box under a fighter) */
.du-bust > .sav, .du-bust > img { -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .6) 9%, #000 22%); mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .6) 9%, #000 22%); }
/* 3.8.2 · and the sides and the top of a layered fighter. SAN's avatar layers share one square canvas, and a piece that runs
   past it (wings, a katana, a tall hat, spiked hair) ends there in a straight line: on the court, a box. The whole figure's
   canvas fades out at its top and, a little, its sides; the pieces that are cut by it (BACKWEAR: wings, a katana) fade out
   over the outer quarter on each side and their top, so they end in the dark instead of a line; a Dream or a Nightmare (a
   scene across the frame) fades out all round. The body and the head sit well inside all of it: nothing is cropped that the
   canvas hadn't already cut */
.du-bust > .sav {
  -webkit-mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .6) 9%, #000 22%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to top, transparent 0, rgba(0, 0, 0, .6) 9%, #000 22%), linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 8%);
  mask-composite: intersect; }
.du-bust > .sav > .sav-backwear {
  -webkit-mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .35) 9%, #000 26%, #000 74%, rgba(0, 0, 0, .35) 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0, rgba(0, 0, 0, .35) 9%, #000 26%, #000 74%, rgba(0, 0, 0, .35) 91%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 16%);
  mask-composite: intersect; }
.du-bust > .sav > .sav-dream, .du-bust > .sav > .sav-nightmare {
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); mask-image: radial-gradient(closest-side, #000 55%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { .du.cooled .du-courtwrap::after { animation: none; opacity: 0; } .du-wire.lit { animation: none; } }
.du[data-hands="off"] .du-pad .du-key { display: none !important; }
/* v14: the walk-up, the lesson's words and its card appear at once (a fade held at its first frame would hide them) */
.du-intro, .du-lesson, .du-card { animation: none !important; }
/* v14 · phones: the Warden's kit gets its own row under the name and segments, so a long chip (PERFECT RETURN) can't push the
   top bar, and with it the court and your pads, past the edge of the screen */
@media (max-width: 560px) {
  .du-top { align-items: flex-start; }
  .du-top .du-who { flex: 1 1 auto; flex-wrap: wrap; row-gap: 6px; }
  .du-top .du-gear { flex: 1 1 100%; min-width: 0; }
}

/* =====================================================================
   1.0 · PAUSE (❙❙ top right, Esc): the clock stops under a card that says what each way out costs. A phone on its side gets
   one line (turn it upright) and the fight waits. The ❙❙ is drawn, not a font glyph, so it's the same on every device.
   ===================================================================== */
.du-leave.pz { display: inline-flex; align-items: center; gap: 8px; }
.du-leave.pz i { position: relative; width: 10px; height: 12px; flex: none; }
.du-leave.pz i::before, .du-leave.pz i::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3px; background: currentColor; }
.du-leave.pz i::before { left: 1px; } .du-leave.pz i::after { right: 1px; }
.du-leave:focus-visible { outline: 2px solid #F9F4EE; outline-offset: 2px; }
@media (max-width: 400px) { .du-leave.pz span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .du-leave.pz { padding: 0 12px; } }
.du-pause { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px 16px calc(24px + env(safe-area-inset-bottom, 0px));
  background: rgba(6, 5, 9, .86); -webkit-backdrop-filter: none; backdrop-filter: none; touch-action: manipulation; }
.du-pause[hidden] { display: none; }
.du-pz-in { width: min(100%, 380px); display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px 20px 20px;
  background: #0C0B10; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .16), 0 30px 80px rgba(0, 0, 0, .7); }
.du-pz-in .du-k { margin: 0; font: 700 11px/1.3 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--them); }
.du-pz-in h3 { margin: 0; font: italic 700 44px/.9 var(--f-head, sans-serif); letter-spacing: .01em; color: var(--ink, #F9F4EE); }
/* 3.5 · the heading fits its card: RECONNECTING, one 12-letter word, ran past a phone's card (and under the speed meter). It scales
   with the card's own width, never past 44 px; a typed name with no space can still break as a last resort */
.du-pz-in { container-type: inline-size; }
.du-pz-in h3 { font-size: min(44px, 12cqi); max-width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.du-pz-sub { margin: 0; max-width: 32ch; font: 500 15px/1.45 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); }
.du-pz-acts { display: grid; gap: 8px; width: 100%; margin-top: 4px; }
.du-pz-acts .du-btn { width: 100%; flex: none; }
.du-btn.warn { box-shadow: inset 0 0 0 1px #FF6B5C; color: #FF8A7D !important; }
.du-pz-note { margin: 0; max-width: 34ch; font: 500 13px/1.45 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); }
.du-pz-keys { margin: 4px 0 0; padding-top: 12px; width: 100%; border-top: 1px solid rgba(249, 244, 238, .1); font: 600 12px/1.5 var(--f-text, sans-serif); color: var(--dim, #8A8784); }
.du-turn { display: none; }
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  .du:not([data-phase="idle"]):not([data-phase="done"]):not([data-phase="tap"]) .du-turn { position: absolute; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 10px;
    padding: 24px; text-align: center; background: #08070B; }
  .du-turn b { font: italic 700 34px/.95 var(--f-head, sans-serif); color: var(--ink, #F9F4EE); }
  .du-turn span { font: 500 15px/1.45 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); max-width: 36ch; }
}
/* CALM (settings, or the system's reduce-motion): no shakes, no jolts, no blinking READY */
html.sc-calm .du-f.hit .du-bust, html.sc-calm .du-stage.jolt, html.sc-calm .du-tag, html.sc-calm .du-intro .du-go,
html.sc-calm .du-stamp.in, html.sc-calm .du-uses .du-pk.rdy, html.sc-calm .du-ctr.hot b, html.sc-calm .du-pad.gdown::after,
html.sc-calm .du-stamp.in.big::before, html.sc-calm .du.cooled .du-courtwrap::after, html.sc-calm .du-wire.lit { animation: none !important; }
html.sc-calm .du-stamp.in { opacity: 1; }

/* =====================================================================
   3.2 · THE PLAYER DECIDES WHEN IT STARTS
   The walk-up waits for START FIGHT, then 3 · 2 · 1 · GO. A Warden met for the first time (and FOLDBACK) comes in first, in
   their land's light. A lesson's words live in their own place: a row above the court on a phone, beside the court on a desk.
   Nothing that explains ever sits on the opponent, the signal or the pads.
   ===================================================================== */
.du { grid-template-rows: auto auto auto minmax(0, 1fr) auto; }
.du > .du-teach { grid-row: 3; } .du > .du-stage { grid-row: 4; } .du > .du-deck { grid-row: 5; }

/* the instruction band: one action, one or two lines */
.du-teach { position: relative; z-index: 3; margin: 2px 12px 6px; padding: 8px 12px 9px; display: grid; justify-items: center; gap: 3px; text-align: center;
  background: rgba(12, 11, 16, .92); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .1), inset 0 2px 0 var(--orange, #FC4C01); }
.du-teach[hidden] { display: none; }
.du-teach .du-k { margin: 0; font: 700 11px/1.3 var(--f-disp, sans-serif); letter-spacing: .14em; color: var(--orange, #FC4C01); }
.du-teach h3 { margin: 0; font: italic 700 22px/1 var(--f-head, sans-serif); color: var(--ink, #F9F4EE); }
.du-teach.do h3 { color: var(--you); } .du-teach.show h3 { color: var(--ink-2, #C9C5C0); }
.du-teach p { margin: 0; font: 500 14.5px/1.35 var(--f-text, sans-serif); color: var(--ink, #F9F4EE); max-width: 40ch; }
.du-teach .du-pips { margin-top: 4px !important; }
.du-teach .du-mini { pointer-events: auto; margin-top: 4px; }
.du-teach .du-tip { margin-top: 4px !important; font: 600 13px/1.4 var(--f-text, sans-serif) !important; color: #0A0A0A !important; background: #F9F4EE; padding: 5px 9px; display: inline-block; }
.du-teach .du-cmp { margin: 2px 0 !important; }
.du-teach .du-use { font: 700 11px/1.3 var(--f-disp, sans-serif) !important; letter-spacing: .12em; color: var(--orange, #FC4C01) !important; }
/* a desk has room beside the court: the band moves there (left of the column, level with the court) */
@media (min-width: 1120px) and (min-height: 560px) {   /* 3.5 · from 1120 px: below that it ran off the left edge (a 1024 px tablet) */
  .du-teach { position: absolute; top: 30%; right: calc(100% + 30px); width: clamp(230px, calc((100vw - 560px) / 2 - 64px), 330px); margin: 0;
    justify-items: start; text-align: left; padding: 14px 16px 15px; gap: 5px; box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .1), inset 3px 0 0 var(--orange, #FC4C01); }
  .du-teach h3 { font-size: 28px; }
  .du-teach p { font-size: 15.5px; line-height: 1.45; }
}

/* a card that waits (before anything moves): over the court, below them, with GO */
.du-lesson.big, .du-lesson.les.intro { top: 24%; pointer-events: auto; background: rgba(12, 11, 16, .95); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .14), 0 24px 70px rgba(0, 0, 0, .6);
  display: grid; justify-items: center; gap: 4px; padding: 20px 20px 18px; }
.du-lesson.big p, .du-lesson.les.intro p { max-width: 36ch; font-size: 16px; line-height: 1.45; }
.du-lesson .du-teach-go { margin-top: 12px; width: min(100%, 260px); flex: none; }
.du-lesson.les.intro .du-use { margin-top: 2px; }

/* the walk-up: them, bigger, above; the card over the court; START FIGHT */
.du-intro { place-content: end center; padding: 18px 16px 13%; background: linear-gradient(180deg, transparent 0%, rgba(8, 7, 11, .35) 22%, rgba(8, 7, 11, .9) 62%); }
.du-in-card { display: grid; justify-items: center; gap: 8px; width: min(100%, 440px); }
.du-intro h2 { font-size: clamp(56px, 15vw, 104px); }
.du-intro .du-line { margin: 0; font-size: 17px; }
.du-intro .du-tech { margin: 4px 0 0; display: inline-flex; align-items: center; gap: 9px; padding: 8px 12px; max-width: 100%; text-align: left;
  font: 500 14.5px/1.35 var(--f-text, sans-serif); color: var(--ink, #F9F4EE); box-shadow: inset 0 0 0 1.5px var(--orange, #FC4C01); background: rgba(12, 11, 16, .8); }
.du-intro .du-tech b { font: 700 13px/1.2 var(--f-disp, sans-serif); letter-spacing: .1em; color: var(--orange, #FC4C01); white-space: nowrap; }
.du-intro .du-tech .du-ic, .du-intro .du-tech .v-ic { width: 20px; height: 20px; color: var(--orange, #FC4C01); flex: none; }
.du-intro .du-tech svg { width: 20px; height: 20px; }
.du-intro .du-rules { color: var(--ink-2, #C9C5C0); }
.du-intro .du-start { flex: none; width: min(100%, 300px); height: 54px; margin-top: 8px; font-size: 15px !important; letter-spacing: .14em; box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--orange, #FC4C01) 70%, transparent); }
.du-intro .du-start:hover { filter: brightness(1.08); }
.du-intro.going .du-in-card { opacity: 0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.du-intro .du-more { margin-top: 2px; font: 600 12px/1.4 var(--f-disp, sans-serif); color: var(--ink-2, #C9C5C0); }
.du-intro .du-more summary { cursor: pointer; list-style: none; padding: 6px 4px; letter-spacing: .12em; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(249, 244, 238, .3); }
.du-intro .du-more summary::-webkit-details-marker { display: none; }
.du-intro .du-more .du-kit { margin-top: 6px; }
/* 3.3 · a rematch says a line only when something true is behind it (js/game.js rivalLine): shown, a size down */
.du-intro.quick .du-line { font-size: 15.5px; }
.du[data-phase="intro"] .du-f.them .du-bust { transform: scale(1.32) translateY(10%); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.du-f.them .du-bust { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }

/* 3 · 2 · 1 · GO */
.du-count { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; opacity: 0;
  font: italic 700 clamp(96px, 26vw, 170px)/.9 var(--f-head, sans-serif); color: #F9F4EE; text-shadow: 0 0 60px rgba(0, 0, 0, .8); }
.du-count.in { animation: du-count .52s cubic-bezier(.2, .9, .2, 1) both; }
.du-count.go { color: var(--orange, #FC4C01); text-shadow: 0 0 60px color-mix(in srgb, var(--orange, #FC4C01) 55%, transparent); }
/* 3.8.1 · CADENCE's count in its lessons: smaller, above the court's middle, out of the lanes' way; four, lit */
.du-count.beat { top: 24%; font-size: clamp(54px, 13vw, 92px); text-shadow: 0 0 40px rgba(0, 0, 0, .85); }
.du-count.beat.in { animation-duration: .42s; }
.du-count.beat.four { color: var(--lit, #D7E36B); }
@keyframes du-count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: .15; transform: translate(-50%, -50%) scale(.92); } }

/* a Warden comes in: their land's light, their art, the name, a line. SKIP (or any key) */
.du-ent { position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #07060A; --ent: var(--them); cursor: pointer; }
.du-ent[hidden] { display: none; }
.du-ent-sky { position: absolute; inset: 0; opacity: 0; background: radial-gradient(70% 55% at 50% 78%, color-mix(in srgb, var(--ent) 46%, transparent), transparent 70%),
  linear-gradient(180deg, #07060A 0%, color-mix(in srgb, var(--ent) 10%, #07060A) 100%); }
.du-ent-art { position: absolute; left: 50%; bottom: 26%; width: min(78vh, 92vw, 760px); aspect-ratio: 1; transform: translate(-50%, 14%) scale(1.06); opacity: 0;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .7)); -webkit-mask-image: linear-gradient(to top, transparent 0, #000 26%); mask-image: linear-gradient(to top, transparent 0, #000 26%); }
.du-ent-art > img, .du-ent-art > .sav { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.du-ent-sweep { position: absolute; top: -20%; bottom: -20%; width: 18vw; left: -30vw; transform: skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(249, 244, 238, .16), transparent); }
.du-ent-txt { position: absolute; left: 0; right: 0; bottom: 7%; display: grid; justify-items: center; gap: 6px; padding: 0 16px; text-align: center; }
.du-ent-txt .du-k { margin: 0; font: 700 12px/1.3 var(--f-disp, sans-serif); letter-spacing: .24em; color: var(--ent); opacity: 0; }
.du-ent-txt h2 { margin: 0; font: italic 700 clamp(64px, 17vw, 150px)/.86 var(--f-head, sans-serif); color: var(--ent); opacity: 0;
  text-shadow: 0 0 70px color-mix(in srgb, var(--ent) 45%, transparent); }
.du-ent-t { margin: 0; font: 700 13px/1.3 var(--f-disp, sans-serif); letter-spacing: .2em; color: var(--ink, #F9F4EE); opacity: 0; }
.du-ent-l { margin: 4px 0 0; max-width: 36ch; font: italic 500 18px/1.4 var(--f-text, sans-serif); color: var(--ink, #F9F4EE); opacity: 0; }
.du-ent-skip { position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 16px; height: 36px; padding: 0 14px; border: 0; cursor: pointer; background: rgba(8, 7, 11, .6);
  box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .3); font: 700 12px/1 var(--f-disp, sans-serif); letter-spacing: .14em; color: var(--ink-2, #C9C5C0); }
.du-ent.on .du-ent-sky { animation: du-e-sky .9s ease-out both; }
.du-ent.on .du-ent-art { animation: du-e-art 1.2s cubic-bezier(.16, .84, .2, 1) .25s both, du-e-drift 6s linear 1.45s both; }
.du-ent.on .du-ent-sweep { animation: du-e-sweep .9s ease-in-out .85s both; }
.du-ent.on .du-ent-txt .du-k { animation: du-e-up .5s ease-out .5s both; }
.du-ent.on .du-ent-txt h2 { animation: du-e-slam .5s cubic-bezier(.2, .9, .2, 1) .95s both; }
.du-ent.on .du-ent-t { animation: du-e-up .45s ease-out 1.25s both; }
.du-ent.on .du-ent-l { animation: du-e-up .6s ease-out 1.7s both; }
.du-ent.out { opacity: 0; transition: opacity .4s ease; }
@keyframes du-e-sky { from { opacity: 0; } to { opacity: 1; } }
@keyframes du-e-art { from { opacity: 0; transform: translate(-50%, 14%) scale(1.06); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@keyframes du-e-drift { from { transform: translate(-50%, 0) scale(1); } to { transform: translate(-50%, -1.5%) scale(1.04); } }
@keyframes du-e-sweep { 0% { opacity: 0; left: -30vw; } 30% { opacity: 1; } 100% { opacity: 0; left: 110vw; } }
@keyframes du-e-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes du-e-slam { 0% { opacity: 0; transform: scale(1.35); filter: blur(6px); } 60% { opacity: 1; transform: scale(.98); filter: none; } 100% { opacity: 1; transform: none; } }
.du-ent.calm .du-ent-sky, .du-ent.calm .du-ent-art, .du-ent.calm .du-ent-txt > * { animation: none !important; opacity: 1; }
.du-ent.calm .du-ent-art { transform: translate(-50%, 0); }
.du-ent.calm .du-ent-sweep { display: none; }
@media (max-width: 640px) { .du-ent-art { bottom: 34%; width: min(96vw, 60vh); } .du-ent-txt { bottom: 6%; } .du-ent-l { font-size: 16px; } }
html.sc-calm .du-ent .du-ent-sky, html.sc-calm .du-ent .du-ent-art, html.sc-calm .du-ent .du-ent-txt > * { animation: none !important; opacity: 1; }
html.sc-calm .du-ent .du-ent-art { transform: translate(-50%, 0); } html.sc-calm .du-ent .du-ent-sweep { display: none; }
html.sc-calm .du-count.in { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) { .du-count.in { animation: none; opacity: 1; } .du[data-phase="intro"] .du-f.them .du-bust { transition: none; } }

/* 3.2 · FOLDBACK on the court: it floats (no ground fade), its phase number by the line that says what this form does */
.du-bust > .fb { -webkit-mask-image: none; mask-image: none; }
.du-tech .du-ph { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: 700 12px/1 var(--f-mono, monospace);
  color: #07060A; background: var(--them); }
.du-intro.boss .du-in-card h2 { letter-spacing: .02em; }
.du-ent.boss .du-ent-art { width: min(70vh, 88vw, 680px); bottom: 30%; }
@media (max-width: 640px) { .du-ent.boss .du-ent-art { width: min(92vw, 56vh); bottom: 36%; } }

/* 3.3 · RIVALS & FITS · their body (rules version 4: js/wardens.js cues, js/duel.js body()). The Warden's own art moves; nothing
   is drawn on it. Moods last (Sprint: eager bouncing, or still once something has burned him); everything else is one gesture,
   shown when the Warden decided it. The art is small on the court, so the gestures are big enough to read at a glance (a lean
   is a tenth of its height); individual transform properties on the art, so a hit's shake (on the bust) still plays */
.du-f.them .du-bust > img { transform-origin: 50% 85%; }
.du-f.them[data-mood="eager"] .du-bust > img { animation: du-b-eager .56s ease-in-out infinite alternate; }
.du-f.them[data-mood="eager"] .du-bust { filter: drop-shadow(0 10px 26px color-mix(in srgb, var(--them) 46%, transparent)); }
.du-f.them[data-mood="wary"] .du-bust > img { translate: 0 5%; scale: .93; animation: du-b-breathe 3.2s ease-in-out infinite; filter: saturate(.8) brightness(.92); }
.du-f.them[data-mood="wary"] .du-bust { filter: drop-shadow(0 6px 10px color-mix(in srgb, var(--them) 16%, transparent)); }
@keyframes du-b-eager { from { translate: 0 0; } to { translate: 0 -4.5%; } }
@keyframes du-b-breathe { 0%, 100% { scale: .93; } 50% { scale: .945; } }
/* one gesture at a time: the latest wins (they're short) */
.du-f.them.q-snap .du-bust > img { animation: du-b-snap .42s cubic-bezier(.2, .9, .3, 1); }
.du-f.them.q-hesitate .du-bust > img { animation: du-b-hes .7s ease-out; }
.du-f.them.q-burned .du-bust > img { animation: du-b-burn .7s ease-out; }
.du-f.them.q-rattled .du-bust > img { animation: du-b-rattle 1.1s ease-in-out; }
.du-f.them.q-fidget .du-bust > img { animation: du-b-fidget .17s ease-in-out 8 alternate; }
.du-f.them.q-count .du-bust > img { animation: du-b-count var(--beat, 700ms) ease-in-out infinite alternate; }
.du-f.them.q-stumble .du-bust > img { animation: du-b-stumble .8s ease-out; }
.du-f.them.q-phrase .du-bust > img { animation: du-b-phrase .9s ease-in-out; }
.du-f.them.q-lock .du-bust > img { scale: 1.1; translate: 0 5%; filter: contrast(1.18) brightness(1.1); transition: scale .1s, translate .1s, filter .1s; }
.du-f.them.q-lock .du-bust { filter: drop-shadow(0 0 8px var(--them)); }
.du-f.them.q-recalc .du-bust > img { animation: du-b-recalc .9s steps(1, end); }
.du-f.them.q-poised .du-bust > img { scale: 1.1; translate: 0 7%; rotate: -3deg; transition: scale .22s, translate .22s, rotate .22s; }
.du-f.them.q-noticed .du-bust > img { animation: du-b-notice .9s ease-in-out; }
.du-f.them.q-composed .du-bust > img { animation: du-b-compose .9s ease-out; }
.du-f.them.q-flat .du-bust > img { animation: du-b-flat .8s ease-out; }
.du-f.them.q-still .du-bust > img { animation: none; translate: 0 3%; filter: brightness(.86) saturate(.85); transition: filter .4s, translate .4s; }
.du-f.them.q-spend .du-bust > img { animation: du-b-spend .6s cubic-bezier(.2, .9, .3, 1); }
.du-f.them.q-shrug .du-bust > img { animation: du-b-shrug .8s ease-in-out; }
@keyframes du-b-snap { 0% { scale: 1; translate: 0 0; } 30% { scale: 1.14; translate: 0 10%; } 100% { scale: 1; translate: 0 0; } }
@keyframes du-b-hes { 0% { translate: 0 0; rotate: 0deg; } 30% { translate: 0 9%; rotate: -4deg; } 55% { translate: 0 8%; rotate: -4deg; } 100% { translate: 0 4%; rotate: 0deg; } }
@keyframes du-b-burn { 0% { rotate: 0deg; filter: brightness(1.8); } 18% { rotate: 7deg; } 36% { rotate: -6deg; } 58% { rotate: 3deg; filter: none; } 100% { rotate: 0deg; } }
@keyframes du-b-rattle { 0%, 100% { rotate: 0deg; } 14% { rotate: -9deg; } 32% { rotate: 9deg; } 52% { rotate: -7deg; } 72% { rotate: 4deg; } }
@keyframes du-b-fidget { from { translate: 0 0; } to { translate: 0 -4%; } }
@keyframes du-b-count { from { translate: -4% 0; rotate: -3.5deg; } to { translate: 4% 0; rotate: 3.5deg; } }
@keyframes du-b-stumble { 0% { translate: 0 0; rotate: 0deg; } 22% { translate: 0 9%; rotate: 8deg; } 52% { translate: 0 4%; rotate: -4deg; } 100% { translate: 0 0; rotate: 0deg; } }
@keyframes du-b-phrase { 0%, 100% { scale: 1; filter: none; } 40% { scale: .94; filter: brightness(.8); } }
@keyframes du-b-recalc { 0% { translate: 0 0; filter: hue-rotate(0deg); } 10% { translate: -5% 0; filter: hue-rotate(60deg) saturate(1.8); } 20% { translate: 4% 0; } 30% { translate: -3% 0; filter: hue-rotate(-30deg); } 40% { translate: 2% 0; filter: none; } 52%, 100% { translate: 0 0; } }
@keyframes du-b-notice { 0%, 100% { rotate: 0deg; translate: 0 0; } 22%, 72% { rotate: 9deg; translate: 3% -2%; } }
@keyframes du-b-compose { 0% { rotate: 4deg; filter: brightness(.85); } 100% { rotate: 0deg; filter: none; } }
@keyframes du-b-flat { 0%, 100% { rotate: 0deg; translate: 0 0; } 35% { rotate: -6deg; translate: 0 -3%; } }
@keyframes du-b-spend { 0% { scale: 1; translate: 0 0; } 25% { scale: 1.16; translate: 0 12%; } 100% { scale: 1; translate: 0 0; } }
@keyframes du-b-shrug { 0%, 100% { translate: 0 0; } 30% { translate: 0 -6%; } 60% { translate: 0 1%; } }
@media (prefers-reduced-motion: reduce) { .du-f.them .du-bust > img { animation: none !important; } }
html.sc-calm .du-f.them .du-bust > img { animation: none !important; }

/* 3.3 · YOUR FIT at the walk-up: you as you'll fight (your fighter, the Fit's name, what you fight with as marks) by START FIGHT;
   CHANGE FIT opens your Fits in the card's place: each one your fighter wearing it */
.du-intro .du-fit { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: min(100%, 360px); margin-top: 6px; padding: 6px 8px 6px 6px;
  text-align: left; background: rgba(8, 7, 11, .55); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .14); }
.du-fit-me { position: relative; width: 46px; height: 46px; overflow: hidden; background: color-mix(in srgb, var(--you) 16%, #0D0C11); }
.du-fit-me > * { position: absolute; inset: -4% -10% auto; width: 120%; height: auto; aspect-ratio: 1; }
.du-fit-me .sav, .du-fitc-av .sav { position: absolute; inset: 0; }
.du-fit-in { display: grid; gap: 2px; min-width: 0; }
.du-fit-in i { font: 700 9.5px/1.2 var(--f-disp, sans-serif); letter-spacing: .16em; font-style: normal; color: var(--ink-2, #C9C5C0); }
.du-fit-in b { font: 700 14px/1.15 var(--f-disp, sans-serif); letter-spacing: .06em; color: var(--ink, #F9F4EE); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-fit-ms { display: flex; flex-wrap: wrap; gap: 4px; font-style: normal; }
.du-fit-ms small { font: 600 9.5px/1.4 var(--f-disp, sans-serif); letter-spacing: .1em; color: var(--ink-3, #8F8A92); }
.du-fit-m { display: inline-grid; place-items: center; width: 22px; height: 22px; color: var(--you); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--you) 45%, transparent); }
.du-fit-m .v-ic, .du-fit-m svg { width: 15px; height: 15px; }
.du-intro .du-fit-go { flex: none; height: 38px; padding: 0 12px; white-space: nowrap; font-size: 11.5px !important; letter-spacing: .12em; }
.du-fits { display: grid; justify-items: center; gap: 10px; width: min(560px, calc(100vw - 32px)); max-height: min(84vh, 640px); overflow: auto; padding: 4px; }   /* 3.5 · was 70vh/540: three Fits scrolled, BACK over the third */
.du-fits > .du-btn { flex: none; height: 40px; min-width: 140px; padding: 0 18px; }
/* BACK stays in reach when the Fits scroll (a phone with several Fits): a bar on the bottom edge until the list ends */
.du-fits.scrolls > [data-du="fit-back"] { position: sticky; bottom: -4px; z-index: 1; justify-self: stretch; background-color: #0C0B10;
  box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .3), 0 -14px 18px 2px rgba(12, 11, 16, .95); }
.du-fits[hidden] { display: none; }
.du-fit-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; width: 100%; }
.du-fitc { position: relative; display: grid; justify-items: center; gap: 4px; padding: 6px 6px 8px; border: 0; cursor: pointer; color: var(--ink, #F9F4EE);
  background: rgba(13, 12, 17, .86); box-shadow: inset 0 0 0 1px rgba(249, 244, 238, .16); font: inherit; }
.du-fitc:hover, .du-fitc:focus-visible { box-shadow: inset 0 0 0 1.5px var(--ink, #F9F4EE); outline: none; }
.du-fitc.on { box-shadow: inset 0 0 0 2px var(--orange, #FC4C01); }
.du-fitc-av { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; background: color-mix(in srgb, var(--you) 12%, #0D0C11); }
.du-fitc-av > * { position: absolute; inset: 0; }
.du-fitc b { font: 700 13px/1.15 var(--f-disp, sans-serif); letter-spacing: .06em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-fitc .du-fitc-tag { position: absolute; top: 8px; left: 8px; padding: 2px 5px; font: 700 9px/1.2 var(--f-disp, sans-serif); font-style: normal; letter-spacing: .14em; color: #0A0A0A; background: var(--ink, #F9F4EE); }
.du-fitc.on .du-fitc-tag { background: var(--orange, #FC4C01); }
@media (max-width: 640px) { .du-fit-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .du-intro .du-fit { width: 100%; } }
.du-in-card[hidden] { display: none; }
/* a pair that works together, joined in a Fit's marks */
.du-fit-m.pair { position: relative; margin-right: 6px; }
.du-fit-m.pair::after { content: ''; position: absolute; right: -9px; top: 50%; width: 8px; height: 1.5px; background: var(--you); opacity: .8; }

/* =====================================================================
   3.6 · CLARITY (Edgar's playtest, 19 Oct): whose turn, lives that break, the catch grades, the timer as a rule, FIRST NIGHT
   ===================================================================== */
/* E2/E9 · lives and rounds: diamonds, big; a hit breaks one where you can see it, a refill brings them back */
.du-segs { gap: 7px; align-items: center; }
.du-segs > i.dm { width: 15px; height: 15px; background: currentColor; transform: rotate(45deg); box-shadow: 0 0 12px -2px currentColor; transition: background-color .25s, box-shadow .25s, opacity .25s; }
.du-segs > i.dm.off { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(249, 244, 238, .22); transform: rotate(45deg) scale(.82); }
.du-segs > i.dm.brk { animation: du-brk 620ms cubic-bezier(.2, .8, .2, 1); }
.du-segs > i.dm.back { animation: du-back 520ms cubic-bezier(.2, .8, .2, 1); }
@keyframes du-brk { 0% { background: #FF4D3D; transform: rotate(45deg) scale(1.5); box-shadow: 0 0 22px #FF4D3D; opacity: 1; } 40% { transform: rotate(80deg) scale(1.15); } 100% { transform: rotate(45deg) scale(.82); } }
@keyframes du-back { 0% { transform: rotate(45deg) scale(.3); opacity: .2; } 70% { transform: rotate(45deg) scale(1.25); opacity: 1; } 100% { transform: rotate(45deg) scale(1); } }
@media (max-width: 400px) { .du-segs { gap: 5px; } .du-segs > i.dm { width: 12px; height: 12px; } }
/* the den: how many held, as a number */
/* 3.8.2 · a count and its goal ("6 / 6"). The number sits in the lives row, and the row's mark style (.du-segs i: a 16 × 6 px
   bar) was reaching it: it was squeezed to 16 px wide with a bar painted over its top, so "6" read as a mark and "12" ran into
   the "/". The marks are now the row's direct children only, and the count has its own elements. The number is the headline
   face as loaded (Jost italic 700), room left for its lean, figures one width, never wrapped */
.du-held { display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap; letter-spacing: 0; }
.du-held .n { font: italic 700 26px/1 var(--f-head, sans-serif); font-variant-numeric: tabular-nums; padding-inline-end: .12em; color: var(--them); }
.du-held .of { font: 700 13px/1 var(--f-mono, monospace); letter-spacing: .08em; color: var(--dim, #8A8784); }

/* E1 · whose turn: the one holding it glows, the other dims; the one it's flying at gets ready */
.du-f .du-bust { transition: opacity .25s, filter .25s; }
.du[data-turn="you"] .du-f.them .du-bust, .du[data-turn="them"] .du-f.you .du-bust { opacity: .5; filter: saturate(.55) brightness(.85); }
.du[data-act="send"][data-turn="you"] .du-f.you .du-bust { filter: drop-shadow(0 0 22px var(--you)) drop-shadow(0 -6px 30px color-mix(in srgb, var(--you) 60%, transparent)) brightness(1.08); }
.du[data-act="send"][data-turn="them"] .du-f.them .du-bust { filter: drop-shadow(0 0 22px var(--them)) drop-shadow(0 8px 30px color-mix(in srgb, var(--them) 60%, transparent)) brightness(1.08); }
.du[data-act="catch"][data-turn="you"] .du-f.you .du-bust { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--you) 70%, transparent)); }
.du[data-act="catch"][data-turn="them"] .du-f.them .du-bust { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--them) 70%, transparent)); }
.du[data-turn="you"] .du-who.you .du-nm, .du[data-turn="them"] .du-who.them .du-nm { text-shadow: 0 0 14px currentColor; }
.du[data-turn="you"] .du-who.them, .du[data-turn="them"] .du-who.you { opacity: .62; }
.du-who { transition: opacity .25s; }
.du-f.caught .du-bust { animation: du-caught 380ms cubic-bezier(.2, .8, .2, 1); }          /* E6: their catch, in their body */
.du-f.lofted .du-bust { animation: du-lofted 900ms cubic-bezier(.2, .8, .2, 1); }           /* 3.6.1 · their LOFT goes up: their body with it */
@keyframes du-lofted { 0% { transform: none; } 30% { transform: translateY(-12px) scale(1.05); } 100% { transform: none; } }
@keyframes du-caught { 40% { transform: translateY(-5px) scale(1.04); } }

/* E3 · the grades, where they happen: PERFECT white, GOOD in the side's colour, OK grey */
.du-tag.tier { font: 800 13px/1 var(--f-disp, sans-serif); letter-spacing: .12em; padding: 6px 9px; }
/* a grade has its own row, centred, a tag's height above (yours) or below (theirs) the move tags: the two never meet */
.du-tag.tier { transform: translateX(-50%); }
.du-tag.you.tier { bottom: calc(17% + 30px); } .du-tag.them.tier { top: calc(22% + 30px); }
.du-cue.in ~ .du-tag.you.tier { bottom: calc(19% + 76px); }   /* a perk's cue is up (it sits where your grade would): above it */
.du-tag.t-perfect { color: #0A0A0A; background: #F9F4EE; box-shadow: 0 0 22px -4px #F9F4EE; }
.du-tag.you.t-good { color: #0A0A0A; background: var(--you); } .du-tag.them.t-good { color: #0A0A0A; background: var(--them); }
.du-tag.t-ok { color: #F9F4EE; background: rgba(110, 106, 101, .85); font-size: 12px; }

/* the speed bar moves where you see it (the first step, big) */
.du-tempo.up i.on { animation: du-tup 520ms ease-out; }
.du-tempo.big { animation: du-tbig 1100ms ease-out; }
@keyframes du-tup { 0% { box-shadow: 0 0 0 0 #F9F4EE; } 40% { box-shadow: 0 0 16px 3px #F9F4EE; } 100% { box-shadow: none; } }
@keyframes du-tbig { 0%, 100% { transform: none; } 25% { transform: scale(1.6) translateX(-6px); } 60% { transform: scale(1.25) translateX(-3px); } }

/* E8 · what's left of FEINT (and SCAN, FAST START) on the button you press, big */
.du-ctr { position: relative; }
.du-ctr-pp { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); display: flex; justify-content: center; gap: 7px; pointer-events: none; }
.du-ctr-pp[hidden] { display: none; }
.du-ctr-pp i { width: 11px; height: 11px; transform: rotate(45deg); background: var(--orange, #FC4C01); box-shadow: 0 0 10px -2px var(--orange, #FC4C01); }
.du-ctr-pp i.off { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(249, 244, 238, .25); }
.du-ctr-pp i.brk { animation: du-brk 620ms cubic-bezier(.2, .8, .2, 1); }

/* a round banner: one or two words, big, in the middle (never a sentence) */
.du-banner { position: absolute; left: 50%; top: 42%; z-index: 12; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; pointer-events: none; text-align: center; white-space: nowrap; }
.du-banner[hidden] { display: none; }
.du-banner b { font: italic 700 clamp(44px, 12vw, 92px)/.9 var(--f-head, sans-serif); text-transform: uppercase; color: var(--ink, #F9F4EE); text-shadow: 0 0 40px rgba(0, 0, 0, .9), 0 0 60px color-mix(in srgb, var(--them) 40%, transparent); }
.du-banner span { font: 700 14px/1 var(--f-disp, sans-serif); letter-spacing: .24em; color: var(--dim, #8A8784); }
.du-banner.foe b { color: var(--them); } .du-banner.you b { color: var(--you); } .du-banner.win b { color: var(--you); } .du-banner.again b { color: #FF4D3D; font-size: clamp(36px, 9vw, 64px); }
.du-banner.in { animation: du-ban 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes du-ban { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); filter: blur(6px); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: none; } 100% { opacity: 1; } }

/* E10 · a demo says it's a demo: the court is marked, the pads show the ghost's presses, and yours do nothing until YOU */
.du[data-demo="1"] .du-stage::before, .du[data-les="show"] .du-stage::before { content: 'DEMO'; position: absolute; z-index: 11; left: 50%; top: 22%; transform: translateX(-50%);
  font: 800 12px/1 var(--f-disp, sans-serif); letter-spacing: .3em; padding: 6px 12px 6px 15px; color: #0A0A0A; background: #F9F4EE; pointer-events: none; }
.du[data-demo="1"] .du-pad:not(.gdown) { opacity: .4; background-image: repeating-linear-gradient(135deg, rgba(249, 244, 238, .05) 0 6px, transparent 6px 12px); }

/* FIRST NIGHT · the pads show what to press (C10: the keyboard that lights the keys) */
.du-pad.wrong { animation: du-wrong 480ms ease-out; }
@keyframes du-wrong { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); background: color-mix(in srgb, #FF4D3D 40%, #0D0C11); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
.du[data-cue="L"] .du-pad.L, .du[data-cue="R"] .du-pad.R, .du[data-cue="send"] .du-pad { animation: du-cue 900ms ease-in-out infinite; }
.du[data-guide="now"][data-cue="L"] .du-pad.L, .du[data-guide="now"][data-cue="R"] .du-pad.R { animation-duration: 520ms; }
@keyframes du-cue { 0%, 100% { box-shadow: inset 0 0 0 1.5px var(--you), 0 0 0 -4px #F9F4EE; } 50% { box-shadow: inset 0 0 0 3px #F9F4EE, 0 0 30px -2px #F9F4EE; background: color-mix(in srgb, var(--you) 26%, #0D0C11); } }
.du[data-cue="L"] .du-pad.L .du-key, .du[data-cue="R"] .du-pad.R .du-key, .du[data-cue="send"] .du-pad .du-key { opacity: 1 !important; color: #F9F4EE; }
.du[data-cue="double"] .du-pad.L { animation: du-seq 1500ms ease-in-out infinite; } .du[data-cue="double"] .du-pad.R { animation: du-seq 1500ms ease-in-out 300ms infinite; }
@keyframes du-seq { 0%, 40%, 100% { box-shadow: inset 0 0 0 1.5px var(--you); } 8%, 22% { box-shadow: inset 0 0 0 3px #F9F4EE, 0 0 30px -2px #F9F4EE; background: color-mix(in srgb, var(--you) 30%, #0D0C11); } }
.du[data-cue="charge"] .du-pad.R::after, .du[data-cue="sweep"] .du-pad.L::after { content: ''; position: absolute; left: 0; bottom: 0; height: 5px; width: 100%; background: #F9F4EE; transform-origin: left; animation: du-fill 1500ms ease-in infinite; }
@keyframes du-fill { 0% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
.du[data-cue="charge"] .du-pad.R, .du[data-cue="sweep"] .du-pad.L { box-shadow: inset 0 0 0 3px #F9F4EE; }
.du[data-cue="sweep"] .du-pad.R { animation: du-seq 1500ms ease-in-out 700ms infinite; }
.du[data-cue="feint"] .du-ctr:not(:disabled) b { animation: du-ring2 600ms ease-in-out infinite alternate; background: var(--orange, #FC4C01) !important; }
/* hide what hasn't been taught: no speed bar while it can't be read yet, no lives until they're taught */
.du.first.den .du-tempo, .du.first[data-beat="send"] .du-tempo { visibility: hidden; }
.du.first .du-gear { display: none; }
.du.first.den .du-top .du-who.you { visibility: hidden; }

/* BUG3 (phones): the lesson band keeps its place while it's hidden, so the court never changes height between cards and play */
@media (max-width: 1119px), (max-height: 559px) {
  .du.drill:not(.first) > .du-teach { min-height: 92px; align-content: center; }
  .du.drill:not(.first) > .du-teach[hidden] { display: grid; visibility: hidden; }
}
/* the pause card: the last point, in words (the court said it in a picture) */
.du-pz-why { margin: 10px 0 0; font: 400 14px/1.45 var(--f-text, sans-serif); color: var(--ink-2, #C9C5C0); max-width: 40ch; }
.du-pz-why i { display: block; font: 700 10px/1 var(--f-disp, sans-serif); letter-spacing: .16em; color: var(--dim, #8A8784); font-style: normal; margin-bottom: 4px; }
.du-pz-why b { color: var(--ink, #F9F4EE); }
@media (prefers-reduced-motion: reduce) { .du-banner.in, .du-segs i.dm.brk, .du-segs i.dm.back, .du-ctr-pp i.brk, .du-pad.wrong, .du[data-cue] .du-pad, .du-tempo.up i.on, .du-tempo.big, .du-f.caught .du-bust, .du-f.lofted .du-bust { animation: none !important; } }
html.sc-calm .du-banner.in, html.sc-calm .du-segs i.dm.brk, html.sc-calm .du-segs i.dm.back, html.sc-calm .du-ctr-pp i.brk, html.sc-calm .du-pad.wrong, html.sc-calm .du-tempo.big { animation: none !important; }