/* ==========================================================================
   MartialArtsRobots.com
   Tokens, base, header, the 3D dojo module, then the page sections.
   Everything follows the light or dark theme; in dark mode the dojo is a
   dark arena, in light mode a bright studio.
   ========================================================================== */

/* --- Tokens ---------------------------------------------------------------- */
:root {
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

    --bg: #f6f4ef;
    --surface: #ffffff;
    --surface-2: #eeebe3;
    --text: #15171c;
    --muted: #525865;
    --line: #dbd6cb;
    --accent: #c8102e;
    --accent-strong: #b00d27;
    --accent-ink: #ffffff;
    --accent-soft: #fbe4e7;
    --focus: #0b5cad;
    --mark-pin: #b07b00;
    --mark-edge: #15171c;
    --shadow: 0 1px 2px rgba(20, 22, 28, .06), 0 8px 24px rgba(20, 22, 28, .06);
    --header-bg: rgba(246, 244, 239, .86);

    --belt-white: #f3f2ee;
    --belt-yellow: #f5c518;
    --belt-orange: #f28c28;
    --belt-green: #2fa84f;
    --belt-blue: #2f6fdd;
    --belt-brown: #8a5a2b;
    --belt-black: #16171a;

    /* Warning notices: the parody bar, the hero notice and the page notice. */
    --warn: #7a5200;
    --warn-icon: #b07b00;
    --warn-bg: rgba(255, 197, 61, .18);
    --warn-line: rgba(176, 123, 0, .4);
    --bar-bg: #fdf1cf;
    --bar-text: #3d3320;
    --bar-strong: #15171c;
    --bar-line: rgba(176, 123, 0, .28);

    /* The dojo module: a bright studio in light mode, a dark arena in dark mode. */
    --dj-bg: #efece5;
    --dj-panel: #ffffff;
    --dj-text: #15171c;
    --dj-heading: #15171c;
    --dj-lede: #3d424c;
    --dj-soft: #3d424c;
    --dj-muted: #525865;
    --dj-line: rgba(20, 22, 28, .12);
    --dj-line-strong: rgba(20, 22, 28, .26);
    --dj-hover-line: rgba(20, 22, 28, .6);
    --dj-accent: #c8102e;
    --dj-accent-strong: #d7192e;
    --dj-focus: #0b5cad;
    --dj-tint: rgba(255, 255, 255, .75);
    --dj-tint-hover: #ffffff;
    --dj-current: rgba(200, 16, 46, .08);
    --dj-glass: rgba(255, 255, 255, .8);
    --dj-glass-hover: #ffffff;
    --dj-glass-text: #15171c;
    --dj-hud: rgba(21, 23, 28, .82);
    --dj-hud-soft: rgba(21, 23, 28, .58);
    --dj-hint: rgba(21, 23, 28, .7);
    --dj-notice-text: #2c3039;
    --dj-stage: radial-gradient(120% 90% at 60% 55%, #fbfaf6 0%, #e4dfd4 60%);
    --dj-scrim: linear-gradient(90deg, rgba(239, 236, 229, .94) 0%, rgba(239, 236, 229, .78) 26%, rgba(239, 236, 229, 0) 52%);

    --radius: 14px;
    --max: 1240px;
    color-scheme: light;
}
/* Light is the default. Dark applies only when the visitor picks it (theme.js sets data-theme="dark"). */
:root[data-theme="dark"] {
    --bg: #0c0e13;
    --surface: #141820;
    --surface-2: #10131a;
    --text: #eceef2;
    --muted: #a5acb8;
    --line: #272d39;
    --accent: #ff5c67;
    --accent-strong: #d7192e;
    --accent-ink: #ffffff;
    --accent-soft: #2a1418;
    --focus: #7cc7ff;
    --mark-pin: #e2ac32;
    --mark-edge: #eef0f3;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .25);
    --header-bg: rgba(12, 14, 19, .84);
    --belt-black: #000000;
    --warn: #ffc53d;
    --warn-icon: #ffc53d;
    --warn-bg: rgba(255, 197, 61, .08);
    --warn-line: rgba(255, 197, 61, .45);
    --bar-bg: #15171c;
    --bar-text: #eef0f3;
    --bar-strong: #ffffff;
    --bar-line: rgba(255, 255, 255, .08);
    --dj-bg: #06070a;
    --dj-panel: #0b0d12;
    --dj-text: #eef0f3;
    --dj-heading: #ffffff;
    --dj-lede: #c9cfd9;
    --dj-soft: #d5dbe6;
    --dj-muted: #a7aebb;
    --dj-line: rgba(255, 255, 255, .14);
    --dj-line-strong: rgba(255, 255, 255, .28);
    --dj-hover-line: rgba(255, 255, 255, .6);
    --dj-accent: #ff4d5a;
    --dj-focus: #7cc7ff;
    --dj-tint: rgba(255, 255, 255, .04);
    --dj-tint-hover: rgba(255, 255, 255, .08);
    --dj-current: rgba(255, 77, 90, .14);
    --dj-glass: rgba(9, 11, 16, .66);
    --dj-glass-hover: rgba(28, 33, 44, .86);
    --dj-glass-text: #f3f5f8;
    --dj-hud: rgba(238, 240, 243, .85);
    --dj-hud-soft: rgba(238, 240, 243, .55);
    --dj-hint: rgba(238, 240, 243, .7);
    --dj-notice-text: #e6e9ee;
    --dj-stage: radial-gradient(120% 90% at 60% 55%, #151a24 0%, #07080b 60%);
    --dj-scrim: linear-gradient(90deg, rgba(5, 6, 9, .9) 0%, rgba(5, 6, 9, .72) 26%, rgba(5, 6, 9, 0) 52%);
    color-scheme: dark;
}

/* --- Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font: 400 1rem/1.6 var(--font);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--accent); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
img, svg, canvas { display: block; max-width: 100%; }
button, input { font: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--accent); color: #fff; }

.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 860px; }
.visually-hidden {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: 12px; top: -80px; z-index: 100;
    background: var(--accent-strong); color: #fff; padding: 12px 16px; border-radius: 10px; font-weight: 700;
    text-decoration: none;
}
.skip-link:focus { top: 12px; }

.eyebrow {
    font: 700 .75rem/1.3 var(--mono);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 12px;
}

/* --- Buttons ----------------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 22px; border-radius: 999px;
    font-weight: 700; font-size: 1rem; text-decoration: none; line-height: 1.1;
    border: 1px solid transparent; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s ease, color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: none; }
.btn--primary { background: var(--dj-accent-strong); color: #fff; }
.btn--primary:hover { background: #bd1427; }
.btn--ghost { border-color: var(--dj-line-strong); color: var(--dj-text); background: var(--dj-tint); }
.btn--ghost:hover { border-color: var(--dj-hover-line); background: var(--dj-tint-hover); }
.btn--small { min-height: 42px; padding: 0 18px; font-size: .95rem; background: var(--text); color: var(--bg); }
.btn--small:hover { background: var(--accent-strong); color: #fff; }

/* --- Header ---------------------------------------------------------------------- */
.site-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--header-bg);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--line);
}
.site-header__inner {
    max-width: var(--max); margin: 0 auto; padding: 10px 20px;
    display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; min-height: 44px; }
/* The logo: a microchip that has earned its black belt (white like Tori, a red visor, gold pins,
   and a black belt with a gold dan stripe on each end). The belt's white rim keeps its ends
   visible where they hang over the dark header; the chip's outline shows only in light mode. */
.brand__mark { width: 38px; height: 38px; flex: none; }
.brand__pins { fill: var(--mark-pin); }
.brand__chip { fill: #eef0f3; stroke: var(--mark-edge); stroke-width: 1.5; }
.brand__visor { fill: #ff4d5a; }
.brand__belt { fill: #111113; stroke: #eef0f3; stroke-width: 2.2; stroke-linejoin: round; paint-order: stroke; }
.brand__crease { fill: none; stroke: #3a3e46; stroke-width: 1.1; stroke-linecap: round; }
.brand__stripes { fill: #e2ac32; }
.brand__name { font: 800 1.12rem/1 var(--font-display); letter-spacing: -.01em; }
.brand__name b { color: var(--accent); font-weight: 800; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.site-nav a {
    display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
    color: var(--text); text-decoration: none; font-weight: 600; font-size: .95rem;
}
.site-nav a:hover { background: var(--surface-2); }

.theme-switch {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px;
    background: none; border: 0; color: var(--text); cursor: pointer; font-weight: 600; font-size: .92rem;
}
.theme-switch__track {
    position: relative; width: 42px; height: 24px; border-radius: 999px; flex: none;
    background: var(--surface-2); border: 1px solid var(--line); transition: background-color .2s ease;
}
.theme-switch__thumb {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--text); transition: transform .2s ease;
}
.theme-switch[aria-checked="true"] .theme-switch__track { background: var(--accent-strong); border-color: var(--accent-strong); }
.theme-switch[aria-checked="true"] .theme-switch__thumb { transform: translateX(18px); background: #fff; }

/* --- The dojo module --------------------------------------------------------------- */
.dojo-module { background: var(--dj-bg); color: var(--dj-text); }
.dojo-module .eyebrow { color: var(--dj-accent); }
.dojo-module :focus-visible { outline-color: var(--dj-focus); }

.hero { position: relative; }
.hero__copy { max-width: 720px; padding: 40px 20px 26px; }
.hero h1 { font-size: clamp(2.1rem, 6vw, 4rem); margin-bottom: 18px; color: var(--dj-heading); }
.hero__lede { font-size: clamp(1.02rem, 1.4vw, 1.18rem); color: var(--dj-lede); max-width: 54ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.stage {
    position: relative;
    height: clamp(430px, 72vh, 640px);
    background: var(--dj-stage);
    overflow: hidden;
    isolation: isolate;
    --dojo-shift: 0;
}
.stage__canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: pan-y; cursor: grab; outline: none; }
.stage__canvas:focus-visible { box-shadow: inset 0 0 0 3px var(--dj-focus); }
.stage[data-dragging] .stage__canvas { cursor: grabbing; }
.stage__fallback { display: none; position: absolute; inset: 0; margin: auto; width: min(90%, 720px); height: auto; color: var(--dj-soft); }
.stage[data-state="fallback"] .stage__canvas,
.stage[data-state="fallback"] .stage__controls,
.stage[data-state="fallback"] .stage__meter,
.stage[data-state="fallback"] .stage__hint,
.stage[data-state="fallback"] .stage__hud { display: none; }
.stage[data-state="fallback"] .stage__fallback { display: block; }
.dojo-module:has(.stage[data-state="fallback"]) .lesson { display: none; }
.stage[data-state="loading"] .stage__canvas { opacity: 0; }
.stage__canvas { transition: opacity .5s ease; }
.stage__scrim { position: absolute; inset: 0; pointer-events: none; }

.stage__controls { position: absolute; top: 14px; right: 14px; z-index: 3; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.stage-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px 0 12px;
    border-radius: 999px; border: 1px solid var(--dj-line-strong);
    background: var(--dj-glass); color: var(--dj-glass-text);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-weight: 700; font-size: .9rem; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
}
.stage-btn:hover { background: var(--dj-glass-hover); border-color: var(--dj-hover-line); }
.stage-btn__icon { width: 18px; height: 18px; fill: currentColor; flex: none; }
.stage-btn__icon .stroke { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.stage-btn--sound[aria-pressed="true"] { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; }
.stage-btn--sound[aria-pressed="false"] .stage-btn__icon--on,
.stage-btn--sound[aria-pressed="true"] .stage-btn__icon--off,
.stage-btn[data-playing="true"] .stage-btn__icon--play,
.stage-btn[data-playing="false"] .stage-btn__icon--pause { display: none; }
.stage-btn--sound[aria-pressed="false"]::after {
    content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
    box-shadow: 0 0 0 0 rgba(255, 77, 90, .55); animation: sound-call 2.4s ease-out 1.5s 4;
}
.stage-btn { position: relative; }
@keyframes sound-call {
    0% { box-shadow: 0 0 0 0 rgba(255, 77, 90, .55); }
    70% { box-shadow: 0 0 0 12px rgba(255, 77, 90, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 77, 90, 0); }
}
/* After the dojo pauses itself (the Auto-pause chips), a note on its own row under the buttons. */
.stage__notice { flex-basis: 100%; display: flex; justify-content: flex-end; margin: 0; pointer-events: none; }
.stage__notice[hidden] { display: none; }
.stage-btn[hidden] { display: none; }   /* the Sound button, without Web Audio */
.stage__notice span {
    padding: 7px 12px; border-radius: 999px; border: 1px solid var(--dj-line);
    background: var(--dj-glass); color: var(--dj-glass-text);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 600 .8rem/1.2 var(--font);
}

.stage__hud {
    position: absolute; left: 16px; bottom: 14px; z-index: 2; display: flex; gap: 16px; flex-wrap: wrap;
    font: 700 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dj-hud);
    pointer-events: none;
}
.hud__tag { display: inline-flex; align-items: center; gap: 7px; transition: opacity .3s; }
.hud__dot { width: 9px; height: 9px; border-radius: 50%; }
.hud__dot--tori { background: #ff4d5a; box-shadow: 0 0 10px rgba(255, 77, 90, .8); }
.hud__dot--uke { background: #38b6ff; box-shadow: 0 0 10px rgba(56, 182, 255, .8); }
.hud__role { color: var(--dj-hud-soft); font-weight: 600; }
/* The robot whose turn it is stays bright; the other one dims. */
.stage[data-attacker="tori"] .hud__tag--uke,
.stage[data-attacker="uke"] .hud__tag--tori { opacity: .5; }

.stage__meter {
    position: absolute; right: 14px; bottom: 12px; z-index: 2; margin: 0;
    display: flex; gap: 8px; pointer-events: none;
}
.stage__meter > div {
    padding: 8px 12px; border-radius: 12px; border: 1px solid var(--dj-line);
    background: var(--dj-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    min-width: 108px; transition: border-color .3s ease;
}
.stage__meter dt { font: 700 .66rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dj-muted); }
.stage__meter dd { margin: 3px 0 0; font: 700 1.05rem/1.1 var(--mono); color: var(--dj-heading); font-variant-numeric: tabular-nums; }
.stage__meter[data-live] > div { border-color: rgba(255, 77, 90, .6); }
/* How the strike turned out sits on its own row above the two readings, so the meter is no wider. */
.stage__meter { display: grid; grid-template-columns: auto auto; }
.stage__result { grid-column: 1 / -1; grid-row: 1; }
.stage__meter[data-result="down"] .stage__result dd { color: var(--dj-accent); }
.stage__meter[data-result="miss"] .stage__result dd { color: var(--dj-muted); }

.stage__hint {
    position: absolute; top: 20px; left: 16px; z-index: 2; pointer-events: none;
    font: 600 .8rem/1 var(--font); color: var(--dj-hint);
    transition: opacity .4s ease;
}
.stage[data-dragged] .stage__hint { opacity: 0; }

/* Desktop: the headline sits over the left of the arena; the robots are framed to the right. */
@media (min-width: 1100px) {
    .hero__copy {
        position: absolute; z-index: 2; top: 50%; transform: translateY(-54%);
        left: max(24px, calc((100vw - var(--max)) / 2 + 20px));
        width: min(520px, 40vw); padding: 0;
    }
    .stage { height: clamp(580px, 82vh, 840px); --dojo-shift: -0.36; }
    .stage__scrim { background: var(--dj-scrim); }
    .stage__hud { left: 50%; }
    .stage__hint { top: auto; bottom: 56px; left: 50%; }
}

/* --- Lesson panel -------------------------------------------------------------------- */
.lesson { background: var(--dj-panel); border-top: 1px solid var(--dj-line); outline: none; }
.lesson__inner {
    max-width: var(--max); margin: 0 auto; padding: 20px 20px 28px;
    display: grid; gap: 18px 28px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "scrub" "head" "kicks" "timeline" "tools";
}
.lesson__head { grid-area: head; }
.timeline { grid-area: timeline; display: grid; gap: 14px; min-width: 0; }
.lesson__tools { grid-area: tools; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; }
@media (min-width: 1000px) {
    .lesson__inner {
        grid-template-columns: minmax(230px, 300px) minmax(0, 1fr);
        grid-template-areas: "scrub scrub" "head kicks" "timeline timeline" "tools tools";
        align-items: end;
    }
    /* The homepage's move picker is taller than the name beside it: the name stays at the top. */
    .lesson__inner:has(.moves) { align-items: start; }
}

/* Homepage move picker: "Mix all", then one labelled row per kind of move. The rows share one
   radio group, so the arrow keys run through every move. */
.moves { grid-area: kicks; border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 12px; justify-items: start; }
.moves__group { display: grid; gap: 6px; justify-self: stretch; }
.moves__label { font: 700 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dj-muted); }
@media (min-width: 700px) {
    .moves__group { grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 12px; }
    .chip--mix { margin-left: calc(8.5rem + 12px); }
}
.lesson__label { font: 700 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dj-muted); }
.lesson__name { font: 800 1.45rem/1.2 var(--font-display); color: var(--dj-heading); margin-top: 4px; letter-spacing: -.01em; }
.lesson__native { display: block; font: 600 .95rem/1.4 var(--font); color: var(--dj-accent); letter-spacing: 0; margin-top: 2px; }
.lesson__turn { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 700 .72rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dj-muted); }
.lesson__turn[hidden] { display: none; }
.lesson__turn .hud__dot { flex: none; }
.lesson__turn[data-by="uke"] .hud__dot { background: #38b6ff; box-shadow: 0 0 10px rgba(56, 182, 255, .8); }

/* Chips: native radio buttons styled as pills. */
.chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.chips__legend { padding: 0; margin-bottom: 8px; font: 700 .7rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.dojo-module .chips__legend { color: var(--dj-muted); }
.chips__row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.chip__body {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text);
    font-weight: 700; font-size: .92rem; white-space: nowrap; user-select: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover .chip__body { border-color: var(--text); }
.chip input:checked + .chip__body { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }
.chip input:focus-visible + .chip__body { outline: 3px solid var(--focus); outline-offset: 2px; }
.dojo-module .chip__body { background: var(--dj-tint); border-color: var(--dj-line-strong); color: var(--dj-text); }
.dojo-module .chip:hover .chip__body { border-color: var(--dj-hover-line); }
.dojo-module .chip input:checked + .chip__body { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; box-shadow: 0 6px 20px rgba(215, 25, 46, .35); }
.dojo-module .chip input:focus-visible + .chip__body { outline-color: var(--dj-focus); }
.chip__belt { width: 12px; height: 12px; border-radius: 3px; background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .25); flex: none; }
.chip__icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chips--small .chip__body { min-height: 38px; padding: 0 13px; font-size: .86rem; }

.tool-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 15px 0 12px;
    border-radius: 999px; border: 1px solid var(--dj-line-strong); background: var(--dj-tint);
    color: var(--dj-text); font-weight: 700; font-size: .86rem; cursor: pointer;
}
.tool-btn:hover { border-color: var(--dj-hover-line); }
.tool-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* "More options": the settings most visitors never change, folded away under Speed and Camera. */
.more { flex-basis: 100%; }
.more > summary { list-style: none; width: max-content; user-select: none; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after {
    content: ""; width: 7px; height: 7px; margin: -3px 2px 0 2px;
    border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform .15s ease;
}
.more[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); }
.more > summary:focus-visible { outline: 3px solid var(--dj-focus); outline-offset: 2px; }
.more__body { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 28px; margin-top: 14px; }

/* Steps of the current kick. */
.phases {
    list-style: none; margin: 0; padding: 2px; display: grid; gap: 6px;
    grid-auto-flow: column; grid-auto-columns: minmax(116px, 1fr);
    overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin;
}
.phases li { scroll-snap-align: start; }
.phase {
    width: 100%; height: 100%; display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 8px 12px;
    border-radius: 12px; border: 1px solid var(--dj-line); background: var(--dj-tint);
    color: var(--dj-muted); font-weight: 700; font-size: .88rem; line-height: 1.2; text-align: left; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.phase:hover { border-color: var(--dj-line-strong); color: var(--dj-text); }
.phase__n {
    flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
    font: 700 .74rem/1 var(--mono); border: 1px solid currentColor;
}
.phase[aria-current="step"] { color: var(--dj-heading); border-color: var(--dj-accent); background: var(--dj-current); }
.phase[aria-current="step"] .phase__n { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; }

/* The scrubber leads the panel, right under the 3D view, like a video's progress bar. */
.scrub { grid-area: scrub; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.scrub__label, .scrub__time { font: 700 .72rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dj-muted); }
.scrub__time { letter-spacing: 0; min-width: 6ch; text-align: right; font-variant-numeric: tabular-nums; }
.scrub__range { width: 100%; height: 30px; margin: 0; accent-color: var(--dj-accent-strong); cursor: pointer; background: transparent; }
.cue { color: var(--dj-text); font-size: 1.05rem; max-width: 72ch; min-height: 1.6em; padding-left: 14px; border-left: 3px solid var(--dj-accent-strong); display: grid; }
/* All the step cues share one cell, so the box keeps the height of the longest and nothing below it moves. */
.cue > span { grid-area: 1 / 1; visibility: hidden; }
.cue > span[data-on] { visibility: visible; }

/* --- Sections ------------------------------------------------------------------------ */
.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--alt { background: var(--surface-2); }
.section--tight { padding: clamp(36px, 5vw, 64px) 0; }
.section__title { font-size: clamp(1.8rem, 3.6vw, 2.7rem); margin-bottom: 14px; }
.section__lede { color: var(--muted); max-width: 64ch; font-size: 1.08rem; margin-bottom: 30px; }

.features { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow); }
.feature__icon { width: 44px; height: 44px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 18px; }
.feature h3 { font-size: 1.3rem; margin-bottom: 8px; }
.feature p { color: var(--muted); }

.chips--filter { margin-bottom: 26px; }
.kicks { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.kick {
    position: relative; display: flex; flex-direction: column; gap: 16px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 26px 24px 24px; box-shadow: var(--shadow); overflow: hidden;
}
.kick::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--belt); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12); }
.kick[hidden] { display: none; }
.kick__belt { display: block; font: 700 .72rem/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kick__belt::before { content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 8px; margin: -2px 8px 0 0; border-radius: 2px; background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.kick h3 { font-size: 1.5rem; margin-top: 8px; }
.kick__names { color: var(--accent); font-weight: 600; margin-top: 4px; }
.kick__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; }
.kick__facts > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; }
.kick__facts dt { font: 700 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kick__facts dd { margin: 3px 0 0; font-weight: 600; font-size: .95rem; line-height: 1.35; }
.kick__steps { margin: 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 9px; }
.kick__steps li { position: relative; padding-left: 36px; counter-increment: step; color: var(--text); font-size: .98rem; }
.kick__steps li::before {
    content: counter(step); position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; font: 700 .74rem/1 var(--mono); background: var(--text); color: var(--bg);
}
.kick__steps strong { font-weight: 700; }
.kick__tip, .kick__drill { font-size: .95rem; color: var(--muted); }
.kick__tip { padding: 12px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--text); }
.kick .btn--small { align-self: flex-start; margin-top: auto; }

.belts {
    list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.belt { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 18px 20px; }
.belt__bar { display: block; height: 14px; border-radius: 4px; background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); margin-bottom: 16px; position: relative; }
.belt__bar::after { content: ""; position: absolute; right: 16%; top: -3px; bottom: -3px; width: 8px; border-radius: 2px; background: var(--belt); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35); filter: brightness(.85); }
.belt h3 { font-size: 1.1rem; margin-bottom: 6px; }
.belt p { color: var(--muted); font-size: .95rem; }

.practice { display: grid; gap: 30px; }
@media (min-width: 960px) { .practice { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } .practice__intro { position: sticky; top: 100px; } }
.plan { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan__step { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.plan__min { display: grid; place-items: center; height: 56px; border-radius: 12px; background: var(--text); color: var(--bg); font: 700 .9rem/1 var(--mono); }
.plan__step h3 { font-size: 1.12rem; margin-bottom: 4px; }
.plan__step p { color: var(--muted); }

.safety {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: start;
    padding: 26px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
    border-left: 6px solid var(--accent-strong); box-shadow: var(--shadow);
}
.safety__icon { width: 46px; height: 46px; fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.safety h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 8px; }
.safety p { color: var(--muted); max-width: 80ch; }

.faq { display: grid; gap: 10px; margin-top: 26px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.faq summary {
    list-style: none; cursor: pointer; padding: 18px 52px 18px 20px; font-weight: 700; font-size: 1.05rem; position: relative;
    border-radius: 12px; min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
    content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
    border-right: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent); transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { padding: 0 20px 20px; color: var(--muted); }

.site-footer { border-top: 1px solid var(--line); padding: 40px 0 48px; }
.site-footer__inner { display: grid; gap: 18px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.footer-links a { color: var(--text); font-weight: 600; display: inline-block; padding: 6px 0; }
.site-footer__note, .site-footer__copy { color: var(--muted); font-size: .92rem; max-width: 72ch; }

/* --- Scroll reveal (only once site.js has set it up) ------------------------------------- */
.reveal-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal-ready .reveal.is-visible { opacity: 1; transform: none; }

/* --- Small screens --------------------------------------------------------------------- */
@media (max-width: 760px) {
    .site-header__inner { padding: 8px 16px; }
    .site-nav { order: 3; width: 100%; margin: 0 -16px; padding: 0 16px; overflow-x: auto; scrollbar-width: none; }
    .site-nav ul { gap: 0; }
    .site-nav a { padding: 0 10px; font-size: .9rem; }
    .theme-switch { margin-left: auto; }
    .theme-switch__label { font-size: .85rem; }
    .container, .lesson__inner { padding-left: 16px; padding-right: 16px; }
    .hero__copy { padding: 30px 16px 22px; }
    .stage__controls { top: 10px; right: 10px; }
    .stage-btn { min-height: 40px; padding: 0 12px 0 10px; font-size: .84rem; }
    .stage__meter > div { min-width: 0; padding: 6px 10px; }
    .stage__meter dd { font-size: .92rem; }
    .stage__hud { display: none; }
    .stage__hint { top: 16px; left: 12px; font-size: .74rem; max-width: 40%; }
    .kick { padding: 22px 18px 20px; }
    .safety { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .brand__name { font-size: 1rem; }
    .theme-switch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
    .kick__facts { grid-template-columns: minmax(0, 1fr); }
    .plan__step { grid-template-columns: minmax(0, 1fr); }
    .plan__min { height: 36px; width: 76px; }
}

/* --- Preferences ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
    .reveal-ready .reveal { opacity: 1; transform: none; }
}
@media (forced-colors: active) {
    .chip input:checked + .chip__body { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
    .phase[aria-current="step"] { border: 3px solid Highlight; }
    .stage__fallback { color: CanvasText; }
    .brand__chip { fill: Canvas; stroke: CanvasText; }
    .brand__pins, .brand__visor, .brand__belt { fill: CanvasText; }
    .brand__belt, .brand__crease { stroke: Canvas; }
    .brand__stripes { fill: Canvas; }
    .kick::before, .belt__bar, .chip__belt, .kick__belt::before { forced-color-adjust: none; }
}
@media (prefers-contrast: more) {
    :root { --muted: #3d424c; --line: #8d8a82; --dj-muted: #3d424c; --dj-line: rgba(20, 22, 28, .5); }
    :root[data-theme="dark"] { --dj-muted: #d0d5de; --dj-line: rgba(255, 255, 255, .45); }
}

/* === Parody banner, notices, legal pages === */
.parody-bar { background: var(--bar-bg); color: var(--bar-text); border-bottom: 1px solid var(--bar-line); }
.parody-bar__text {
    position: relative; max-width: var(--max); margin: 0 auto; padding: 8px 20px 8px 48px;
    font-size: .88rem; line-height: 1.45;
}
.parody-bar__icon { position: absolute; left: 20px; top: 9px; width: 18px; height: 18px; fill: none; stroke: var(--warn-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.parody-bar strong { color: var(--bar-strong); }
.parody-bar a { color: var(--warn); font-weight: 700; white-space: nowrap; }
.parody-bar a:focus-visible { outline-color: var(--warn); }

.hero__notice {
    display: flex; gap: 10px; align-items: flex-start; margin-top: 22px; max-width: 54ch;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--warn-line);
    background: var(--warn-bg); color: var(--dj-notice-text); font-size: .92rem; line-height: 1.45;
}
.hero__notice svg { width: 20px; height: 20px; flex: none; margin-top: 1px; fill: none; stroke: var(--warn-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hero__notice strong { color: var(--dj-heading); }
.hero__notice a { color: var(--warn); font-weight: 700; }
/* The same notice on light or dark page backgrounds (used on inner pages). */
.page-notice {
    display: flex; gap: 10px; align-items: flex-start; max-width: 72ch; margin: 18px 0 0;
    padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 5px solid #d99a00;
    background: var(--surface); color: var(--text); font-size: .95rem; line-height: 1.5;
}
.page-notice svg { width: 20px; height: 20px; flex: none; margin-top: 2px; fill: none; stroke: var(--warn-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.page-notice a { font-weight: 700; }

.stage-btn--slow[aria-pressed="true"] { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; }
/* A red button stays red under the pointer (the glass hover would put white text on white). */
.stage-btn--sound[aria-pressed="true"]:hover,
.stage-btn--slow[aria-pressed="true"]:hover { background: var(--dj-accent); border-color: var(--dj-accent); color: #fff; }
.stage-btn--slow .stage-btn__icon { fill: none; }
.stage[data-slow="true"]::after {
    content: "SLOW MOTION"; position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2;
    font: 700 .72rem/1 var(--mono); letter-spacing: .3em; color: var(--dj-hint);
    padding: 7px 10px 7px 13px; border-radius: 999px; border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    pointer-events: none;
}
@media (max-width: 760px) { .stage[data-slow="true"]::after { top: auto; bottom: 64px; } }
.chips--toggle { margin: 0; }
.lesson__note { grid-column: 1 / -1; font-size: .84rem; color: var(--dj-muted); }

.kick__label { font: 700 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 -8px; }
.safety__links { margin-top: 12px; font-weight: 700; }
.footer-links--legal a { font-weight: 500; color: var(--muted); }
.site-footer__disclaimer {
    max-width: 92ch; font-size: .92rem; padding: 12px 16px; border-radius: 10px;
    background: var(--surface-2); border-left: 4px solid var(--accent-strong);
}

/* Legal pages */
.legal-hero { background: var(--surface-2); border-bottom: 1px solid var(--line); padding: clamp(40px, 6vw, 72px) 0 30px; }
.legal-hero h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); margin-bottom: 10px; }
.legal-hero__meta { color: var(--muted); }
.legal { display: grid; gap: 36px; padding: 40px 0 88px; }
@media (min-width: 1000px) {
    .legal { grid-template-columns: 250px minmax(0, 1fr); align-items: start; gap: 56px; }
    .legal__toc { position: sticky; top: 92px; }
}
.legal__toc { font-size: .93rem; }
.legal__toc h2 { font: 700 .72rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.legal__toc ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.legal__toc a { color: var(--text); }
.legal__body { max-width: 76ch; min-width: 0; }
.legal__body h2 { font-size: 1.4rem; margin: 44px 0 12px; scroll-margin-top: 90px; }
.legal__body h3 { font-size: 1.08rem; margin: 22px 0 8px; }
.legal__body p + p, .legal__body ul + p, .legal__body p + ul { margin-top: 12px; }
.legal__body ul, .legal__body ol { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 7px; }
.legal__body a { overflow-wrap: anywhere; }
.legal-summary {
    border: 1px solid var(--line); border-left: 6px solid var(--accent-strong); border-radius: var(--radius);
    background: var(--surface); box-shadow: var(--shadow); padding: 20px 22px; margin-bottom: 8px;
}
.legal-summary h2 { font-size: 1.15rem; margin: 0 0 10px; }
.legal-summary ul { margin-top: 0; }
.legal-caps { font-weight: 600; text-transform: uppercase; letter-spacing: .01em; font-size: .95rem; }
.placeholder { background: #fff0b8; color: #4d3700; padding: 1px 6px; border-radius: 5px; font-weight: 700; }
:root[data-theme="dark"] .placeholder { background: #4d3a00; color: #ffe38a; }
/* Top and bottom only, so .container keeps its side gutter on phones. */
.error-page { padding-top: clamp(60px, 10vw, 120px); padding-bottom: clamp(60px, 10vw, 120px); text-align: center; }
.error-page h1 { font-size: clamp(2.2rem, 6vw, 4rem); margin: 10px 0 16px; }
.error-page p { color: var(--muted); max-width: 52ch; margin: 0 auto 26px; }
.error-page .btn { background: var(--accent-strong); color: #fff; }
@media (max-width: 760px) {
    .parody-bar__text { padding: 8px 16px 8px 42px; font-size: .84rem; }
    .parody-bar__icon { left: 16px; }
    .legal { padding: 28px 0 64px; }
    .stage__hint { top: auto; bottom: 20px; left: 12px; max-width: 34%; line-height: 1.3; }
}
.site-nav a { white-space: nowrap; }
@media (forced-colors: active) {
    .parody-bar__icon, .hero__notice svg { stroke: CanvasText; }
    .placeholder { forced-color-adjust: none; background: Mark; color: MarkText; }
}

/* === Punch lessons === */
/* Homepage: the six punch cards. */
.punch-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.punch-card {
    position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 4px 14px; align-items: start; height: 100%;
    padding: 18px 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
    box-shadow: var(--shadow); color: var(--text); text-decoration: none; transition: border-color .15s ease, transform .15s ease;
}
.punch-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.punch-card__glyph { grid-row: span 3; width: 52px; height: 52px; border-radius: 12px; background: var(--surface-2); padding: 6px; }
.punch-card__n { font: 700 .7rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.punch-card__name { font: 800 1.25rem/1.15 var(--font-display); letter-spacing: -.01em; }
.punch-card__desc { color: var(--muted); font-size: .94rem; line-height: 1.45; }

/* Path glyphs and diagrams share these strokes. */
.pg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pg-body { stroke: var(--muted); stroke-width: 2.5; }
.pg-uke { stroke: #2f6fdd; stroke-width: 2.5; }
.pg-uke-fill { fill: #2f6fdd; opacity: .16; }
.pg-tori-fill { fill: var(--muted); opacity: .14; }
.pg-path { stroke: var(--accent); stroke-width: 3.5; }
.pg-path--soft { stroke-width: 2; stroke-dasharray: 3 6; opacity: .75; }
.pg-head { fill: var(--accent); stroke: none; }
.pg-hit { fill: var(--accent); stroke: none; opacity: .22; }
.pg-label { fill: var(--muted); font: 600 11px/1 var(--font); stroke: none; }
.pg-label--accent { fill: var(--accent); font-weight: 700; }

/* Lesson page: the dojo header. */
.crumbs { margin-bottom: 14px; font-size: .9rem; color: var(--dj-muted); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-inline-end: 8px; color: var(--dj-line-strong); }
.crumbs a { color: var(--dj-soft); }
.punch-switch { grid-area: kicks; min-width: 0; }
.punch-switch ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.punch-switch a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 15px; border-radius: 999px;
    border: 1px solid var(--dj-line-strong); background: var(--dj-tint); color: var(--dj-text);
    font-weight: 700; font-size: .92rem; text-decoration: none; white-space: nowrap;
}
.punch-switch a:hover { border-color: var(--dj-hover-line); }
.punch-switch a[aria-current="page"] { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; box-shadow: 0 6px 20px rgba(215, 25, 46, .35); }
.punch-switch__n { font: 700 .72rem/1 var(--mono); opacity: .7; }
.frame-step { display: flex; flex-wrap: wrap; gap: 8px; }
.frame-step .tool-btn svg { fill: currentColor; stroke: none; }
.lesson__keys { grid-column: 1 / -1; font-size: .84rem; color: var(--dj-muted); }
.lesson__keys kbd {
    display: inline-block; min-width: 1.6em; padding: 1px 6px; border-radius: 6px; border: 1px solid var(--dj-line-strong);
    font: 700 .78rem/1.4 var(--mono); color: var(--dj-text); text-align: center;
}
[data-dojo-state="fallback"] [data-dojo-freeze] { display: none; }

/* Lesson page: content sections. */
.section__head { max-width: 72ch; margin-bottom: 26px; }
.section__head .section__lede { margin-bottom: 0; }
.glance { display: grid; gap: 10px; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.glance > div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.glance dt { font: 700 .68rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.glance dd { margin: 5px 0 0; font-weight: 600; line-height: 1.4; }
.glance__note { margin-top: 16px; color: var(--muted); max-width: 72ch; }

.lesson-grid { display: grid; gap: 28px; }
@media (min-width: 980px) { .lesson-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } .lesson-grid__aside { position: sticky; top: 96px; } }
.punch-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; gap: 10px; }
.punch-steps li {
    position: relative; counter-increment: step; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 14px;
    padding: 16px 16px 16px 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line);
}
.punch-steps li::before {
    content: counter(step); grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    font: 700 .85rem/1 var(--mono); background: var(--text); color: var(--bg);
}
.punch-steps p { color: var(--text); }
.punch-steps strong { font-weight: 800; }
.freeze-btn {
    justify-self: start; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; margin-top: 6px; padding: 0 13px;
    border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text);
    font-weight: 700; font-size: .84rem; cursor: pointer;
}
.freeze-btn:hover { border-color: var(--accent); color: var(--accent); }
.freeze-btn svg { width: 14px; height: 14px; fill: currentColor; }

.path-figure { margin: 0; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.path-figure svg { width: 100%; height: auto; }
.path-figure figcaption { margin-top: 10px; color: var(--muted); font-size: .94rem; }
.path-figure figcaption strong { color: var(--text); }
.watch-tips { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--surface-2); font-size: .94rem; }
.watch-tips h3 { font: 700 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.watch-tips ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }

.chain { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); counter-reset: chain; }
.chain li { position: relative; counter-increment: chain; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
.chain h3 { display: flex; align-items: center; gap: 10px; font-size: 1.08rem; margin-bottom: 6px; }
.chain h3::before {
    content: counter(chain); flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center;
    background: var(--accent-strong); color: #fff; font: 700 .8rem/1 var(--mono);
}
.chain p { color: var(--muted); font-size: .96rem; }
@media (min-width: 900px) {
    .chain li + li::before {
        content: ""; position: absolute; left: -12px; top: 50%; width: 12px; height: 2px; background: var(--accent);
    }
}

.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.checks li { position: relative; padding: 14px 16px 14px 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.checks li::before {
    content: ""; position: absolute; left: 16px; top: 17px; width: 18px; height: 18px; border-radius: 50%;
    background: var(--accent-strong) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.checks strong { display: block; }
.checks span { color: var(--muted); font-size: .95rem; }

.mistakes { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mistake { padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: grid; gap: 8px; align-content: start; }
.mistake h3 { font-size: 1.1rem; }
.mistake p { color: var(--muted); font-size: .96rem; }
.mistake__fix { padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); color: var(--text) !important; }

.fist-card { display: grid; gap: 22px; align-items: center; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
@media (min-width: 760px) { .fist-card { grid-template-columns: 220px minmax(0, 1fr); } }
.fist-card svg { width: 100%; max-width: 220px; height: auto; margin: 0 auto; }
.fist-card ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fist-card h3 { font-size: 1.2rem; margin-bottom: 10px; }
.fist-svg .f-skin { fill: var(--surface-2); stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
.fist-svg .f-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.fist-svg .f-knuckle { fill: var(--accent); }
.fist-svg .f-label { fill: var(--muted); font: 600 11px/1 var(--font); }

.two-col { display: grid; gap: 28px; }
@media (min-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.two-col h3 { font-size: 1.25rem; margin-bottom: 12px; }
.combos, .defend { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.combos li, .defend li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.combo-code {
    display: inline-grid; place-items: center; min-width: 58px; height: 30px; padding: 0 10px; border-radius: 8px;
    background: var(--text); color: var(--bg); font: 700 .86rem/1 var(--mono); white-space: nowrap;
}
.defend__tag {
    display: inline-grid; place-items: center; min-width: 58px; height: 30px; padding: 0 10px; border-radius: 8px;
    border: 1px solid var(--line); background: var(--surface-2); font: 700 .78rem/1 var(--mono); text-transform: uppercase; letter-spacing: .06em;
}
.combos p, .defend p { color: var(--muted); font-size: .96rem; }
.combos strong, .defend strong { color: var(--text); }

.pager { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pager a {
    display: grid; gap: 2px; padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface);
    color: var(--text); text-decoration: none; box-shadow: var(--shadow);
}
.pager a:hover { border-color: var(--accent); }
.pager__dir { font: 700 .7rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager__name { font: 800 1.2rem/1.2 var(--font-display); }
.pager a[rel="next"] { text-align: end; }

@media (max-width: 760px) {
    .punch-steps li { padding: 14px 14px 14px 12px; grid-template-columns: 30px minmax(0, 1fr); }
    .punch-steps li::before { width: 30px; height: 30px; }
    .fist-card, .mistake, .chain li { padding: 16px; }
}
@media (forced-colors: active) {
    .pg-path, .pg-uke, .pg-body { stroke: CanvasText; }
    .pg-head, .pg-hit, .fist-svg .f-knuckle { fill: CanvasText; }
    .punch-switch a[aria-current="page"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
}

/* === Kick lessons === */
/* The kick lesson pages (kicks/*.html) reuse the punch lesson classes (.punch-switch, .punch-steps,
   .fist-card, .pg-*); these rules add what the kicks need on top. */

/* The step caption on the stage: which step Tori is on, while you watch it ("2/5 Chamber"). */
.stage__step {
    position: absolute; left: 50%; top: 18px; transform: translateX(-50%); z-index: 2; margin: 0;
    display: inline-flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px;
    border-radius: 999px; border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--dj-heading); font: 800 1.05rem/1.1 var(--font-display); white-space: nowrap;
    pointer-events: none; transition: border-color .2s ease, box-shadow .2s ease;
}
.stage__step-n {
    display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 8px; border-radius: 999px;
    background: var(--dj-accent-strong); color: var(--accent-ink); font: 700 .78rem/1 var(--mono); font-variant-numeric: tabular-nums;
}
/* While playback holds on a step, the caption lights up. */
.stage[data-holding] .stage__step { border-color: var(--dj-accent); box-shadow: 0 0 0 4px var(--dj-current); }
.stage[data-state="fallback"] .stage__step,
.stage[data-state="loading"] .stage__step { display: none; }
/* The slow-motion badge moves down under the caption. */
.stage:has(.stage__step)[data-slow="true"]::after { top: 66px; }
@media (max-width: 760px) {
    /* The stage buttons fill the top on phones: the caption sits bottom left, where the hint was. */
    .stage__step { top: auto; bottom: 14px; left: 12px; transform: none; font-size: .92rem; padding-right: 13px; }
    .stage__step-n { min-width: 30px; height: 26px; }
    .stage:has(.stage__step) .stage__hint { display: none; }
    .stage:has(.stage__step)[data-slow="true"]::after { top: auto; bottom: 64px; }
}

.lesson__aids { grid-column: 1 / -1; max-width: 80ch; font-size: .92rem; color: var(--dj-soft); }
.lesson__aids strong { color: var(--dj-heading); }

/* Path diagrams drawn from the animation: the mat, the key step on the path, and the way back. */
.pg-floor { stroke: var(--muted); stroke-width: 1.5; opacity: .45; }
.pg-dot { fill: var(--accent); }
.pg-path--back { stroke-width: 2; stroke-dasharray: 4 5; opacity: .6; }
.path-figure figcaption a { font-weight: 700; }

/* The striking surface of the foot. */
.foot-svg .f-skin { fill: var(--surface-2); stroke: var(--text); stroke-width: 2.5; stroke-linejoin: round; }
.foot-svg .f-line { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; opacity: .6; }
.foot-svg .f-strike { fill: var(--accent); }
.foot-svg .f-strike-line { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.foot-svg .f-label { fill: var(--muted); font: 600 11px/1 var(--font); }

/* Homepage kick cards: the lesson link and "Watch it in 3D" side by side. */
.kick__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.kick .kick__actions .btn--small { margin-top: 0; }
.btn--quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn--quiet:hover { background: transparent; color: var(--text); border-color: var(--text); }

@media (forced-colors: active) {
    .pg-dot, .foot-svg .f-strike { fill: CanvasText; }
    .pg-floor, .foot-svg .f-strike-line { stroke: CanvasText; }
    .stage__step-n { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* --- The homepage's game screen (js/dojo-game.js) -------------------------------------------
   .hero--game puts the headline and the controller (.deck: Watch or Play, the fighters, the speed
   and every move) on the left of the stage on wide screens, and right under the stage on narrow
   ones, so nothing needs a scroll. The section carries the mode (.dojo-module[data-dojo-mode="play"]):
   Play shows the bout, the joystick and Block/Dodge on the stage and the strike buttons in the
   controller, and hides the headline, the demo-only controls ([data-dojo-watch-only]) and the stage
   readouts. */
.deck[hidden], .deck [hidden] { display: none !important; }
.dojo-module:has(.stage[data-state="fallback"]) .deck,
.dojo-module:has(.stage[data-state="fallback"]) .pad { display: none !important; }
.deck { display: grid; gap: 14px; min-width: 0; }
.deck__mode {
    display: flex; margin: 0; padding: 4px; min-width: 0;
    border: 1px solid var(--dj-line-strong); border-radius: 999px; background: var(--dj-tint);
}
.seg { position: relative; display: flex; flex: 1 1 0; min-width: 0; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.seg__body {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 12px;
    border-radius: 999px; color: var(--dj-text); font-weight: 800; font-size: .95rem; white-space: nowrap; user-select: none;
    transition: background-color .15s ease, color .15s ease;
}
.seg:hover input:not(:checked) + .seg__body { background: var(--dj-tint-hover); }
.seg input:checked + .seg__body { background: var(--dj-accent-strong); color: #fff; box-shadow: 0 6px 20px rgba(215, 25, 46, .35); }
.seg input:focus-visible + .seg__body { outline: 3px solid var(--dj-focus); outline-offset: 2px; }
.deck__switches { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.deck .chips__legend { margin-bottom: 6px; }
.deck .chips--small .chip__body { min-height: 34px; padding: 0 11px; font-size: .82rem; }
/* The move rows: the label above each row, compact chips. */
.deck .moves { grid-area: auto; gap: 9px; }
/* The label starts its row, and the chips wrap after it. */
.deck .moves__group, .deck .arena__group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.deck .moves__group > .chips__row, .deck .arena__group > .arena__row { display: contents; }
.deck .moves__label, .deck .arena__label { min-width: 6.4rem; margin: 0; }
.deck .chip--mix { margin-left: 0; }
.deck .moves .chips__row { gap: 6px; }
.deck .moves .chip__body { min-height: 34px; padding: 0 12px; gap: 6px; font-size: .84rem; }
/* A combination's code (the boxing count, then the kick: "1-2-3", "1-2-round") before its moves,
   on the combo chips and on Play's combo buttons, which copy the chip's words. */
.chip__code { font: 800 .74rem/1 var(--mono); letter-spacing: .02em; color: var(--dj-accent); }
.chip input:checked + .chip__body .chip__code { color: inherit; }

.arena__play { display: none; gap: 12px; }
.dojo-module[data-dojo-mode="play"] .arena__play { display: grid; }
.dojo-module[data-dojo-mode="play"] [data-dojo-watch-only] { display: none; }
/* Practice (the section keeps data-dojo-mode="play" and adds data-dojo-practice): its tally and
   "Uke attacks" take the place of the match tally and New match. */
.dojo-module:not([data-dojo-practice]) [data-dojo-practice-only],
.dojo-module[data-dojo-practice] [data-dojo-match-only] { display: none; }
/* Practice with no opponent (data-dojo-solo): its own tally, and no "Uke attacks". */
.dojo-module:not([data-dojo-solo]) [data-dojo-solo-only],
.dojo-module[data-dojo-solo] [data-dojo-partner-only] { display: none; }
.tool-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
/* min-width: 0, because "Train with" below takes a whole row of its own: without it the row of chips
   at its widest would set the width of the whole controller, and push the page sideways on a phone. */
.arena__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; min-width: 0; }
/* The prompt changes all through a bout ("Your move", "Uke: roundhouse to the head!", up to four
   moves in "Next: …"), so it keeps a fixed box two lines high, and a longer one ends in "…".
   Otherwise each change of length moves the strike buttons, and on wide screens the whole
   controller, which is centred beside the stage. */
.arena__prompt {
    flex: 1 1 12rem; display: flex; align-items: center; min-width: 0; height: 2.4em; margin: 0; overflow: hidden;
    font: 800 1.25rem/1.2 var(--font-display); color: var(--dj-heading);
}
.arena__prompt > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.arena__score { margin: 0; font: 700 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dj-muted); }
.arena__score b { font-size: 1rem; color: var(--dj-heading); font-variant-numeric: tabular-nums; }
.arena__strikes { display: grid; gap: 8px; }
.arena__group { display: grid; gap: 5px; }
.arena__label { margin: 0; font: 700 .68rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dj-muted); }
.arena__row { display: flex; flex-wrap: wrap; gap: 6px; }
.arena__help, .arena__note { max-width: 80ch; margin: 0; font-size: .8rem; line-height: 1.45; color: var(--dj-muted); }
.deck__help summary { display: inline-flex; min-height: 32px; align-items: center; font-weight: 700; font-size: .84rem; color: var(--dj-text); cursor: pointer; }
.deck__help[open] summary { margin-bottom: 4px; }
/* Compact strike buttons in the controller. */
.deck .act { min-height: 36px; gap: 6px; padding: 0 6px 0 11px; font-size: .83rem; }
.deck .act kbd { min-width: 1.5em; padding: 0 4px; font-size: .68rem; }
.arena__help strong { color: var(--dj-text); }
.arena__note { font-size: .76rem; }

/* In Play the headline steps aside (still there for screen readers) and the notice makes way for the game's own note. */
.dojo-module[data-dojo-mode="play"] .hero--game .hero__copy {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.dojo-module[data-dojo-mode="play"] .hero--game .hero__notice { display: none; }

/* Wide screens: the headline and the controller on the left of the stage, the fighters framed to the
   right, and the stage as tall as the window under the header. */
@media (min-width: 1100px) {
    .hero--game .hero__side {
        position: absolute; z-index: 2; top: 0; bottom: 0;
        left: max(24px, calc((100vw - var(--max)) / 2 + 20px));
        width: min(560px, 42vw);
        display: flex; flex-direction: column; gap: 14px;
        padding: 18px 8px 18px 0; overflow-y: auto; scrollbar-width: thin;
    }
    /* Centred, but still scrollable from the top when the window is short. */
    .hero--game .hero__side > :first-child { margin-top: auto; }
    .hero--game .hero__side > :last-child { margin-bottom: auto; }
    .dojo-module[data-dojo-mode="play"] .hero--game .deck { margin-top: auto; margin-bottom: auto; }
    .hero--game .hero__copy { position: static; transform: none; width: auto; padding: 0; }
    .hero--game h1 { font-size: clamp(2rem, 3.1vw, 3rem); margin-bottom: 10px; }
    .hero--game .hero__notice { margin-top: 0; font-size: .86rem; }
    .hero--game .stage,
    .dojo-module[data-dojo-mode="play"] .hero--game .stage { height: clamp(560px, calc(100vh - 102px), 900px); }
    .hero--game .deck {
        padding: 14px; border-radius: 18px; border: 1px solid var(--dj-line);
        background: var(--dj-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    }
}
@media (min-width: 1100px) and (max-height: 820px) {
    .hero--game .hero__lede { display: none; }
}
/* Narrow screens: headline, stage, controller, notice. In Play the stage comes first, with the
   controller right under it. */
@media (max-width: 1099.98px) {
    .hero--game { display: flex; flex-direction: column; }
    .hero--game .hero__side { display: contents; }
    .hero--game .hero__copy { order: 1; }
    .hero--game .stage { order: 2; }
    .hero--game .deck { order: 3; padding: 14px 20px 18px; background: var(--dj-panel); border-top: 1px solid var(--dj-line); }
    .hero--game .hero__notice { order: 4; margin: 0 20px 20px; }
    .hero--game .stage { height: clamp(360px, 60svh, 600px); }
    .dojo-module[data-dojo-mode="play"] .hero--game .stage { height: clamp(300px, 50svh, 560px); }
    /* Under the stage: Watch/Play, then the moves, then the other switches. In Play the strike
       buttons come first, right under the fight. */
    .hero--game .deck > * { order: 3; }
    .hero--game .deck__mode { order: 1; }
    .hero--game .moves, .hero--game .arena__play { order: 2; }
    .dojo-module[data-dojo-mode="play"] .hero--game .arena__play { order: 0; }
}
@media (max-width: 760px) {
    .hero--game .deck { padding: 12px 16px 16px; }
    .hero--game .hero__notice { margin: 0 16px 16px; }
    .seg__body { font-size: .88rem; padding: 0 8px; }
    /* One line of strike buttons per kind of move, swiped sideways, so they all fit under the stage.
       The row is positioned, so that it also holds in the words each button keeps for screen readers:
       they are taken out of the flow, and without it their containing block is the whole game screen,
       which the row's own sideways scroll then cannot clip, and the page goes four screens wide. */
    .dojo-module[data-dojo-mode="play"] .deck .arena__group { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 6px; }
    .dojo-module[data-dojo-mode="play"] .deck .arena__group > .arena__row {
        position: relative;
        display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; margin-right: -16px; padding: 2px 16px 4px 0; scrollbar-width: none;
    }
    .dojo-module[data-dojo-mode="play"] .deck .arena__label { min-width: 0; font-size: .6rem; letter-spacing: .08em; }
    .dojo-module[data-dojo-mode="play"] .arena__row .act { flex: none; }
}
/* The narrowest screens: the longest chip in Watch ("1-superman-720, Jab, Superman punch, 720 kick")
   is wider than the screen on its own, so there its words wrap onto a second line rather than push the
   page sideways. Play's strike buttons keep one line each: their rows are swiped sideways. */
@media (max-width: 374.98px) {
    .deck .moves .chip__body { white-space: normal; text-align: center; }
    /* A combination's code stays in one piece, whatever its words do. */
    .deck .moves .chip__code { white-space: nowrap; }
}

/* The step-through panel under the homepage's stage: no move picker there any more. */
.lesson--home .lesson__inner { grid-template-areas: "scrub" "head" "timeline" "tools"; }
@media (min-width: 1000px) {
    .lesson--home .lesson__inner { grid-template-areas: "scrub scrub" "head timeline" "tools tools"; align-items: start; }
}

/* Strike and defence buttons: a key on each. Out of turn they stay focusable but dim. */
.act {
    display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 10px 0 14px;
    border-radius: 999px; border: 1px solid var(--dj-line-strong); background: var(--dj-tint);
    color: var(--dj-text); font: 700 .88rem/1.2 var(--font); cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.act:hover { border-color: var(--dj-hover-line); background: var(--dj-tint-hover); }
.act kbd {
    min-width: 1.7em; padding: 1px 5px; border-radius: 6px; border: 1px solid var(--dj-line-strong);
    font: 700 .74rem/1.4 var(--mono); color: var(--dj-muted); text-align: center;
}
.act[aria-disabled="true"] { opacity: .45; cursor: default; }
.act[aria-disabled="true"]:hover { border-color: var(--dj-line-strong); background: var(--dj-tint); }
.act--defend { min-height: 48px; padding: 0 12px 0 20px; font-size: 1rem; }
/* The blocks and dodges work whenever they are pressed, and light up while Uke's strike is coming. */
.act--defend[data-alert] { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; box-shadow: 0 6px 20px rgba(215, 25, 46, .35); }
.act--defend[data-alert] kbd { color: #fff; border-color: rgba(255, 255, 255, .6); }
.act--defend:active:not([aria-disabled="true"]) { transform: scale(.95); }

/* On the stage: health bars, rounds won and points along the top, the big word on each hit, the
   points it scored, the winner, and the joystick and Block/Dodge along the bottom. The readouts of
   the demo (names, meter, hint, step caption) make way. */
.bout, .bout__banner, .bout__points, .pad { display: none; }
.dojo-module[data-dojo-mode="play"] .bout,
.dojo-module[data-dojo-mode="play"] .pad { display: flex; }
.dojo-module[data-dojo-mode="play"] .bout__banner,
.dojo-module[data-dojo-mode="play"] .bout__points { display: block; }
.dojo-module[data-dojo-mode="play"] .stage__hud,
.dojo-module[data-dojo-mode="play"] .stage__meter,
.dojo-module[data-dojo-mode="play"] .stage__hint,
.dojo-module[data-dojo-mode="play"] .stage__step { display: none; }
/* Practice has no health, rounds or points, so no bout along the top (the big word stays). */
.dojo-module[data-dojo-practice] .bout { display: none; }
/* Once the match is over nobody fights or moves: the joystick and Block/Dodge make way for the
   referee's ceremony (the winner's hand raised, the medal, the joy). So they do for the weigh-in
   before a match, which stands the scale at the front of the stage. */
.dojo-module[data-dojo-mode="play"][data-dojo-phase="over"] .pad,
.dojo-module[data-dojo-mode="play"][data-dojo-phase="walk"] .pad,
.dojo-module[data-dojo-mode="play"][data-dojo-phase="weigh"] .pad,
.dojo-module[data-dojo-mode="play"][data-dojo-phase="judges"] .pad { display: none; }
.bout { position: absolute; left: 14px; right: 14px; top: 66px; z-index: 2; gap: 14px; align-items: flex-start; pointer-events: none; transition: opacity .3s ease; }
/* On a narrower stage the judges' scorecards come up where the bout runs along the top: it makes way
   while they are held up, and comes back with the verdict. */
@media (max-width: 1099.98px) {
    .dojo-module[data-dojo-mode="play"][data-dojo-phase="judges"] .bout { opacity: 0; }
}
/* The interview after a match is filmed close, with the speech bubbles over the heads where the bout
   runs: it makes way while the reporter is on air (data-interview on the stage), and comes back with the
   winner's card. */
.stage[data-interview] .bout { opacity: 0; }
.bout__side { flex: 1 1 0; min-width: 0; }
.bout__name {
    display: flex; align-items: center; gap: 7px; margin: 0 0 6px;
    font: 700 .72rem/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--dj-hud);
}
.bout__side--uke .bout__name { justify-content: flex-end; }
.bout__you { color: var(--dj-hud-soft); }
.bout__hp { color: var(--dj-heading); font-variant-numeric: tabular-nums; }
.bout__bar {
    display: flex; height: 12px; margin: 0; overflow: hidden; border-radius: 999px;
    border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
}
.bout__side--uke .bout__bar { justify-content: flex-end; }
.bout__fill { display: block; width: 100%; height: 100%; background: #ff4d5a; transition: width .45s ease; }
.bout__side--uke .bout__fill { background: #38b6ff; }
.bout__fill[data-low="true"] { animation: low-hp .7s ease-in-out infinite alternate; }
@keyframes low-hp { to { opacity: .45; } }
.bout__meta { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.bout__side--uke .bout__meta { justify-content: flex-end; }
.bout__score {
    padding: 3px 9px; border-radius: 999px; border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    font: 800 .86rem/1.2 var(--mono); color: var(--dj-heading); font-variant-numeric: tabular-nums;
}
/* One pip per round won (two win the match). */
.bout__pips { display: inline-flex; gap: 5px; }
.bout__pips > span { width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--dj-hud-soft); background: transparent; }
.bout__pips > span[data-won] { border-color: #ffbe28; background: #ffbe28; box-shadow: 0 0 10px rgba(255, 190, 40, .8); }
/* The round, and under it its clock: a minute of fight time, red for the last ten seconds. */
.bout__mid { flex: none; align-self: center; display: grid; justify-items: center; gap: 5px; }
.bout__round {
    margin: 0; padding: 5px 10px; border-radius: 999px;
    border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    font: 800 .7rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dj-heading); white-space: nowrap;
}
.bout__clock {
    margin: 0; padding: 3px 11px; border-radius: 10px;
    border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    font: 800 1.05rem/1.15 var(--mono); letter-spacing: .04em; color: var(--dj-heading); font-variant-numeric: tabular-nums;
}
/* The last ten seconds: the red swings to a darker red and back for ten seconds instead of fading,
   so the white figures keep more than 4.5:1 on it. */
.bout__clock[data-low] { border-color: transparent; background: #c8102e; color: #fff; animation: clock-low 1s ease-in-out 10 alternate; }
@keyframes clock-low { to { background-color: #9e0c24; } }
.bout__banner {
    position: absolute; z-index: 3; top: 36%; left: 50%; margin: 0; padding: 10px 22px;
    border-radius: 16px; border: 1px solid var(--dj-line-strong); background: var(--dj-glass); color: var(--dj-heading);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    font: 900 clamp(1.6rem, 4.5vw, 2.6rem)/1.05 var(--font-display); letter-spacing: -.01em; text-transform: uppercase; white-space: nowrap;
    opacity: 0; transform: translate(-50%, -50%) scale(.8); pointer-events: none;
    transition: opacity .15s ease, transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.bout__banner[data-show] { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.bout__banner[data-tone="good"] { background: rgba(18, 128, 76, .92); border-color: transparent; color: #fff; }
.bout__banner[data-tone="bad"] { background: rgba(200, 16, 46, .92); border-color: transparent; color: #fff; }
.bout__banner[data-tone="warn"] { background: rgba(255, 190, 40, .94); border-color: transparent; color: #1a1300; }
/* "+180": the points a hit, block or dodge scored, floating up from under the big word. */
.bout__points {
    position: absolute; z-index: 3; top: calc(36% + 44px); left: 50%; margin: 0;
    font: 900 1.35rem/1 var(--mono); color: #ffbe28; text-shadow: 0 2px 10px rgba(0, 0, 0, .55); white-space: nowrap;
    opacity: 0; transform: translate(-50%, 0); pointer-events: none;
}
.bout__points[data-show] { animation: points-up 1.2s ease-out forwards; }
.bout__points[data-side="uke"] { color: #38b6ff; }
@keyframes points-up {
    0% { opacity: 0; transform: translate(-50%, 10px) scale(.8); }
    15% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -34px) scale(1); }
}
/* The winner of the match, with the rounds, the points and Rematch. */
.bout__win {
    position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%, -50%);
    display: grid; justify-items: center; gap: 10px; width: min(92%, 420px); padding: 22px 24px;
    border-radius: 20px; border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}
.bout__win[hidden], .dojo-module:not([data-dojo-mode="play"]) .bout__win { display: none; }
.bout__win-title { margin: 0; font: 900 clamp(2rem, 5vw, 3rem)/1 var(--font-display); text-transform: uppercase; color: var(--dj-heading); }
.bout__win[data-won="true"] .bout__win-title { color: #12a05c; }
.bout__win[data-won="false"] .bout__win-title { color: var(--dj-accent); }
/* Your gold medal on the card when you win, popping in. */
.bout__win-medal { display: none; width: 44px; height: auto; margin-bottom: -4px; filter: drop-shadow(0 4px 10px rgba(226, 172, 50, .45)); }
.bout__win[data-won="true"] .bout__win-medal { display: block; animation: medal-in .6s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes medal-in {
    from { opacity: 0; transform: translateY(-14px) scale(.6) rotate(-12deg); }
    to { opacity: 1; transform: none; }
}
/* How the match was won: by K.O. or on points. */
.bout__win-how { margin: -2px 0 0; font: 800 .78rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dj-text); }
.bout__win-how:empty { display: none; }
.bout__win-line { margin: 0; font: 700 .92rem/1.5 var(--font); color: var(--dj-text); }
.bout__win-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; }
.bout__rematch[hidden] { display: none; }
.bout__next { background: var(--dj-accent-strong); border-color: var(--dj-accent-strong); color: #fff; }
.bout__next:hover { background: var(--dj-accent); border-color: var(--dj-accent); color: #fff; }
/* Uke's belt (the level) by its name on the stage. */
.bout__belt { color: var(--dj-hud-soft); }

/* Speech bubbles (js/dojo-scene.js): the fighters talking after a match and the trainers' calls, each
   placed at its speaker's head (left and top) with its tail pointing down at it, edged in the colour of
   the speaker's corner. */
.talk { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.dojo-module:not([data-dojo-mode="play"]) .talk, .stage[data-state="fallback"] .talk { display: none; }
.talk__bubble {
    position: absolute; left: 0; top: 0; margin: 0; width: max-content; max-width: min(220px, 44%); padding: 7px 11px;
    border-radius: 14px; border: 2px solid #fff; background: #fff; color: #16171a; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
    font: 700 .84rem/1.3 var(--font); text-align: center;
    opacity: 0; transform: translate(-50%, calc(-100% - 10px)); transform-origin: 50% 100%;
}
.talk__bubble::after {
    content: ""; position: absolute; left: 50%; bottom: -8px; width: 13px; height: 13px; margin-left: -6.5px;
    background: inherit; border-right: inherit; border-bottom: inherit; transform: rotate(45deg);
}
.talk__bubble[data-side="tori"] { border-color: #ff4d5a; }
.talk__bubble[data-side="uke"] { border-color: #38b6ff; }
/* Mike, the reporter who interviews the winner after a match: the teal of its blazer. */
.talk__bubble[data-side="press"] { border-color: #19a7ae; }
.talk__bubble[data-show] { animation: talk-in .24s cubic-bezier(.2, 1.4, .4, 1) both; }
.talk__bubble[data-off] { visibility: hidden; }
@keyframes talk-in {
    from { opacity: 0; transform: translate(-50%, calc(-100% - 2px)) scale(.75); }
    to { opacity: 1; transform: translate(-50%, calc(-100% - 10px)); }
}

/* The Level chips: a swatch of Uke's belt on each, and a tick on a level won this visit. */
.levels__hint { margin-left: 6px; font-weight: 400; letter-spacing: .06em; text-transform: none; }
.levels .chip__body { gap: 6px; }
.chip__tick { margin-left: 2px; font-weight: 900; color: #12a05c; }
.chip input:checked + .chip__body .chip__tick { color: #fff; }

/* The joystick (bottom left) and the blocks and dodges (bottom right). Only the joystick's knob moves. */
.pad { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; justify-content: space-between; align-items: flex-end; gap: 12px; pointer-events: none; }
.pad > * { pointer-events: auto; }
.stick {
    position: relative; flex: none; width: 118px; height: 118px; border-radius: 50%;
    border: 1px solid var(--dj-line-strong); background: var(--dj-glass);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.stick::before { content: ""; position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed var(--dj-line-strong); opacity: .7; }
.stick[data-active] { cursor: grabbing; border-color: var(--dj-hover-line); }
.stick__knob {
    position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%;
    background: var(--dj-accent-strong); box-shadow: 0 6px 18px rgba(215, 25, 46, .45), inset 0 -4px 0 rgba(0, 0, 0, .18);
    transform: translate(var(--kx, 0px), var(--ky, 0px)); pointer-events: none;
}
/* Block (high, low, parry, cover up) over Dodge (back, duck, slip) over Bend (over, back): one grid, so
   the buttons line up in columns, with each row's name on its left. */
.pad__defend { display: grid; grid-template-columns: auto repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; }
.pad__row { display: contents; }
/* A row with fewer buttons starts a new grid row. */
.pad__label { grid-column: 1; }
.pad__label {
    justify-self: end; padding: 5px 9px; border-radius: 999px; background: var(--dj-glass);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--dj-text); font: 800 .68rem/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
.pad .act--defend:not([data-alert]) { background: var(--dj-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pad .act--defend[aria-disabled="true"] { opacity: .6; }
.pad .act--defend { justify-content: center; min-height: 46px; padding: 0 8px 0 12px; font-size: .95rem; white-space: nowrap; }
.pad .act--defend kbd { margin-left: 2px; }
/* Beside the controller the pad has half the stage: the keys (listed under How to play) make way first,
   then the second words (kept for screen readers). */
@media (min-width: 1100px) and (max-width: 1499.98px) {
    .pad .act--defend { padding: 0 8px; font-size: .88rem; }
    .pad .act--defend kbd { display: none; }
    .pad__defend { gap: 6px; }
}
@media (min-width: 1100px) and (max-width: 1299.98px) {
    .pad__more {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
}
@media (min-width: 1100px) {
    .bout, .pad { left: calc(50% + 14px); }
    /* Over the fighters, who are framed to the right of the controller. */
    .bout__banner, .bout__points, .bout__win { left: 68%; }
    /* Watch mode: the step caption, the slow-motion badge, the names and the drag hint start where the
       controller ends too, instead of centring on the whole stage and sliding under it. The caption
       sits on the row of the stage buttons. */
    .hero--game .stage__step { left: calc(50% + 14px); top: 14px; transform: none; }
    .hero--game .stage[data-slow="true"]::after { left: calc(50% + 14px); top: 66px; transform: none; }
    .hero--game .stage__hud, .hero--game .stage__hint { left: calc(50% + 14px); }
}
/* Too narrow for the caption and the buttons on one row: the caption drops under the buttons. */
@media (min-width: 1100px) and (max-width: 1299.98px) {
    .hero--game .stage__step { top: 66px; }
    .hero--game .stage[data-slow="true"]::after { top: 118px; }
}
@media (max-width: 760px) {
    .bout { top: 58px; left: 10px; right: 10px; gap: 8px; }
    .bout__round { padding: 4px 7px; font-size: .6rem; }
    .bout__clock { padding: 2px 7px; font-size: .88rem; }
    .talk__bubble { padding: 5px 9px; font-size: .76rem; }
    .pad { left: 10px; right: 10px; bottom: 10px; }
    .stick { width: 100px; height: 100px; }
    .stick__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
    .pad__defend { gap: 6px; }
    .pad__label { writing-mode: vertical-rl; transform: rotate(180deg); padding: 5px 3px; font-size: .52rem; }
    .pad .act--defend { min-height: 38px; padding: 0 6px; font-size: .84rem; }
    .pad .act--defend kbd { display: none; }
    /* "Cover up", "Bend over", "Lean back": the second word is for screen readers only. */
    .pad__more {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    /* On a phone the joystick and the nine blocks and dodges would cover half the fighters, so in Play they
       take a strip of their own under the picture: the stage becomes a grid, the picture over the pad. The
       150px is about the pad's height (three rows of buttons, its gaps and padding). The stage keeps its
       height through a match, and while the pad makes way (walk-in, weigh-in, judges, ceremony) the
       picture takes the strip too. The big word, the points, the speech bubbles and the slow-motion badge
       are placed in the picture's cell, so they stay over the fighters and off the pad. */
    .dojo-module[data-dojo-mode="play"] .hero--game .stage {
        display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto;
        height: calc(clamp(250px, 46svh, 460px) + 150px);
    }
    .dojo-module[data-dojo-mode="play"] .hero--game .stage__canvas { position: relative; inset: auto; grid-area: 1 / 1; min-height: 0; }
    .dojo-module[data-dojo-mode="play"] .hero--game .pad {
        position: relative; left: auto; right: auto; bottom: auto; grid-area: 2 / 1;
        align-items: center; padding: 8px 10px; background: var(--dj-panel); border-top: 1px solid var(--dj-line);
    }
    .dojo-module[data-dojo-mode="play"] .hero--game .talk,
    .dojo-module[data-dojo-mode="play"] .hero--game .bout__banner,
    .dojo-module[data-dojo-mode="play"] .hero--game .bout__points,
    .dojo-module[data-dojo-mode="play"] .hero--game .stage::after { grid-area: 1 / 1; }
    .dojo-module[data-dojo-mode="play"] .hero--game .stage[data-slow="true"]::after { bottom: 12px; }
    /* Sound, Slow motion and Pause show just their icons over the fight (the words stay for screen
       readers), and the site header scrolls away instead of sitting over the top of the stage. */
    .dojo-module[data-dojo-mode="play"] .stage__controls .stage-btn { width: 40px; padding: 0; justify-content: center; }
    .dojo-module[data-dojo-mode="play"] .stage__controls .stage-btn > span {
        position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
    }
    body:has(.dojo-module[data-dojo-mode="play"]) .site-header { position: relative; }
}
@media (max-width: 374.98px) {
    .stick { width: 84px; height: 84px; }
    .stick__knob { width: 38px; height: 38px; margin: -19px 0 0 -19px; }
    .pad__defend { gap: 5px; }
    .pad .act--defend { padding: 0 4px; font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bout__banner { transition: none; transform: translate(-50%, -50%); }
    .bout__fill { transition: none; }
    .bout__fill[data-low="true"] { animation: none; }
    .bout__points[data-show] { opacity: 1; transform: translate(-50%, 0); }
    .bout__win[data-won="true"] .bout__win-medal { animation: none; }
    .bout__clock[data-low] { animation: none; }
    .talk__bubble[data-show] { animation: none; opacity: 1; }
    .bout { transition: none; }
}
@media (forced-colors: active) {
    .bout__fill { forced-color-adjust: none; background: Highlight; }
    .bout__clock[data-low] { forced-color-adjust: none; background: Highlight; color: HighlightText; animation: none; }
    .act--defend[data-alert] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
    .stick__knob, .bout__pips > span[data-won], .seg input:checked + .seg__body { forced-color-adjust: none; background: Highlight; color: HighlightText; }
}

/* --- Battery charging between rounds (js/dojo-game.js, js/dojo-corners.js) ------------------------------ */
/* In a match the health bars are the fighters' batteries: a case of five cells with a terminal on the end
   towards the round's clock, and the charge inside it. A low one (a quarter or less: the fill's data-low)
   turns its case red, and its charge blinks. Between rounds each side charges back up (data-charge on
   .bout__side: 'wait' for its crew, 'on' while it charges, 'full'): the HP gives way to the percentage
   behind a bolt (a drop of water for Hugh), stripes run along the charge towards the terminal, and a full
   battery flashes green once. */
.bout__bar { position: relative; height: 16px; padding: 2px; overflow: visible; border-radius: 5px; }
.bout__bar::after { content: ""; position: absolute; top: 4px; bottom: 4px; width: 4px; background: var(--dj-line-strong); }
.bout__side--tori .bout__bar::after { right: -6px; border-radius: 0 2px 2px 0; }
.bout__side--uke .bout__bar::after { left: -6px; border-radius: 2px 0 0 2px; }
/* The gaps between the cells, over the charge. */
.bout__bar::before {
    content: ""; position: absolute; z-index: 1; inset: 2px; pointer-events: none;
    background: linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--dj-glass) 0 calc(20% + 1px), transparent 0 calc(40% - 1px), var(--dj-glass) 0 calc(40% + 1px),
        transparent 0 calc(60% - 1px), var(--dj-glass) 0 calc(60% + 1px), transparent 0 calc(80% - 1px), var(--dj-glass) 0 calc(80% + 1px), transparent 0);
}
.bout__fill { border-radius: 3px; }
.bout__bar:has(> .bout__fill[data-low="true"]) { border-color: var(--dj-accent); box-shadow: 0 0 10px rgba(255, 77, 90, .35); }
.bout__bar:has(> .bout__fill[data-low="true"])::after { background: var(--dj-accent); }
/* Charging: the percentage and its bolt in place of the HP. */
.bout__charge { display: none; align-items: center; gap: 3px; color: var(--dj-heading); font-variant-numeric: tabular-nums; }
.bout__charge svg { flex: none; width: 9px; height: 12px; fill: var(--dj-hud-soft); }
.bout__drop, .stage[data-cast="human"] .bout__side--tori .bout__bolt { display: none; }
.stage[data-cast="human"] .bout__side--tori .bout__drop { display: block; }
.bout__side[data-charge] .bout__hp { display: none; }
.bout__side[data-charge] .bout__charge { display: inline-flex; }
.bout__side[data-charge] .bout__fill { transition: none; }
.bout__side[data-charge="on"] .bout__bar { border-color: var(--warn-icon); }
.bout__side[data-charge="on"] .bout__bar::after { background: var(--warn-icon); }
.bout__side[data-charge="on"] .bout__charge svg { fill: var(--warn-icon); animation: charge-bolt .5s ease-in-out infinite alternate; }
.bout__side[data-charge="on"] .bout__drop { fill: #2a9fe0; }
.bout__side[data-charge="on"] .bout__fill {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .42) 25%, transparent 25% 50%, rgba(255, 255, 255, .42) 50% 75%, transparent 75%);
    background-size: 12px 12px; box-shadow: 0 0 10px rgba(255, 197, 61, .55); animation: charge-run .45s linear infinite;
}
.bout__side--uke[data-charge="on"] .bout__fill { animation-direction: reverse; }
@keyframes charge-run { from { background-position: 0 0; } to { background-position: 12px 0; } }
@keyframes charge-bolt { to { opacity: .5; transform: scale(.85); } }
/* Full: a green flash round the case and through the charge. */
.bout__side[data-charge="full"] .bout__bar { border-color: #12a05c; animation: charged .9s ease-out; }
.bout__side[data-charge="full"] .bout__bar::after { background: #12a05c; }
.bout__side[data-charge="full"] .bout__charge svg { fill: #12a05c; }
.bout__side[data-charge="full"] .bout__fill { animation: charged-fill .9s ease-out; }
@keyframes charged { from { box-shadow: 0 0 0 0 rgba(18, 160, 92, .85); } to { box-shadow: 0 0 0 12px rgba(18, 160, 92, 0); } }
@keyframes charged-fill { 0%, 30% { filter: brightness(1.7); } to { filter: none; } }
@media (prefers-reduced-motion: reduce) {
    .bout__side[data-charge="on"] .bout__fill, .bout__side[data-charge="on"] .bout__charge svg,
    .bout__side[data-charge="full"] .bout__bar, .bout__side[data-charge="full"] .bout__fill { animation: none; }
}
@media (forced-colors: active) {
    .bout__bar::before { display: none; }
    .bout__bar::after { forced-color-adjust: none; background: CanvasText; }
    .bout__charge svg { forced-color-adjust: none; fill: CanvasText; }
}

/* --- Punching bags in Practice (js/dojo-bags.js) ------------------------------------------------------- */
/* What to train with (Uke, no opponent or a bag: .partners) takes a row of its own under the Practice
   tally. On a bag (data-dojo-bag on the section names it) the bag's own tally takes the place of the
   others, "Uke attacks" goes, and the stage meter comes back at the top left, over the fighter's head
   and clear of the bag and its stand: how fast each strike went and how hard it hit. */
.arena__top .partners { flex: 1 1 100%; }
.dojo-module:not([data-dojo-bag]) [data-dojo-bag-only],
.dojo-module[data-dojo-bag] [data-dojo-partner-only] { display: none; }
.dojo-module[data-dojo-mode="play"][data-dojo-bag] .stage__meter { display: grid; top: 66px; bottom: auto; left: 14px; right: auto; }
@media (min-width: 1100px) {
    .dojo-module[data-dojo-mode="play"][data-dojo-bag] .stage__meter { left: calc(50% + 14px); }
}
@media (max-width: 760px) {
    /* One line of chips, swiped sideways like the strike buttons under it, and positioned for the same
       reason: to hold in the words the chips keep for screen readers. */
    .partners .chips__row { position: relative; flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 4px 0; scrollbar-width: none; }
    .partners .chip { flex: none; }
    .dojo-module[data-dojo-mode="play"][data-dojo-bag] .stage__meter { top: 58px; left: 10px; }
    /* The big word already says whether it landed ("Missed"): the small stage keeps just the readings. */
    .dojo-module[data-dojo-mode="play"][data-dojo-bag] .stage__result { display: none; }
}