*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    background: var(--night);
}

body {
    min-width: 320px;
    min-height: 100svh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    font-family: "Space Grotesk", sans-serif;
    background:
        radial-gradient(circle at 10% -10%, rgba(255, 106, 42, 0.2), transparent 32rem),
        radial-gradient(circle at 95% 25%, rgba(35, 121, 143, 0.18), transparent 34rem),
        linear-gradient(180deg, #050b12 0%, #071826 55%, #06131f 100%);
}

body::before {
    position: fixed;
    inset: 0;
    z-index: -1;
    content: "";
    opacity: 0.22;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

body::after {
    position: fixed;
    inset: auto -4vw 3vh auto;
    z-index: -1;
    content: "BX  ·  LES  ·  BK  ·  QNS";
    transform: rotate(-8deg);
    color: transparent;
    font: 900 clamp(5rem, 15vw, 13rem)/0.7 "Barlow Condensed", sans-serif;
    letter-spacing: -0.04em;
    text-transform: uppercase;
    -webkit-text-stroke: 2px rgba(125, 228, 220, 0.045);
    pointer-events: none;
}

button {
    appearance: none;
    border: 0;
    font: inherit;
}

button,
[role="button"] {
    cursor: pointer;
}

button:focus-visible,
a:focus-visible,
canvas:focus-visible,
summary:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

kbd {
    display: inline-grid;
    min-width: 1.35rem;
    min-height: 1.35rem;
    place-items: center;
    padding: 0 0.25rem;
    border: 1px solid rgba(5, 11, 18, 0.24);
    border-radius: 4px;
    color: inherit;
    font: 700 0.68rem/1 "Space Grotesk", sans-serif;
    background: rgba(255, 255, 255, 0.18);
}

.app-shell {
    width: min(1520px, 100%);
    margin: 0 auto;
    padding: max(0.85rem, env(safe-area-inset-top)) clamp(0.75rem, 2vw, 2rem) max(1rem, env(safe-area-inset-bottom));
}

.topbar,
.site-footer,
.match-board,
.control-deck,
.court-note {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.topbar {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.brand-lockup {
    display: flex;
    align-items: center;
    gap: 0.72rem;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    transform: skew(-6deg);
    border: 2px solid var(--orange);
    color: var(--orange);
    font: 900 1.55rem/1 "Barlow Condensed", sans-serif;
    box-shadow:
        4px 4px 0 rgba(255, 106, 42, 0.24),
        -4px -3px 0 rgba(125, 228, 220, 0.08);
}

.brand-name,
.brand-place {
    margin: 0;
}

.brand-name {
    font: 800 1.35rem/1 "Barlow Condensed", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-shadow: 2px 1px 0 rgba(255, 77, 131, 0.55), -1px -1px 0 rgba(125, 228, 220, 0.42);
}

.brand-place {
    display: block;
    margin-top: 0.24rem;
    padding: 0;
    color: var(--muted);
    font-size: 0.67rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    background: transparent;
    transition: color 150ms ease;
}

.brand-place:hover {
    color: var(--orange);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.utility-button--training {
    border-color: rgba(215, 243, 106, 0.34);
    color: var(--lime);
    transform: skew(-3deg);
    background:
        linear-gradient(110deg, rgba(215, 243, 106, 0.12), transparent 60%),
        rgba(10, 29, 43, 0.76);
}

.utility-button--avatar {
    border-color: rgba(229, 169, 255, 0.34);
    color: #e5a9ff;
    background:
        linear-gradient(110deg, rgba(229, 169, 255, 0.12), transparent 60%),
        rgba(10, 29, 43, 0.76);
}

.utility-button--rhythm {
    border-color: rgba(255, 77, 131, 0.42);
    color: #ff8fb1;
    transform: skew(2deg);
    background:
        linear-gradient(110deg, rgba(255, 77, 131, 0.16), transparent 62%),
        rgba(10, 29, 43, 0.76);
    box-shadow: 3px 3px 0 rgba(125, 228, 220, 0.09);
}

.utility-button--rhythm .utility-icon {
    color: var(--pink);
    text-shadow: 2px 1px 0 rgba(125, 228, 220, 0.36);
}

.utility-button--accuracy {
    border-color: rgba(215, 243, 106, 0.48);
    color: var(--lime);
    text-decoration: none;
    background:
        linear-gradient(115deg, rgba(215, 243, 106, 0.18), transparent 62%),
        rgba(10, 29, 43, 0.82);
    box-shadow: 3px 3px 0 rgba(255, 77, 131, 0.14);
}

.utility-button--accuracy .utility-icon {
    color: var(--lime);
    text-shadow: 2px 1px 0 rgba(255, 77, 131, 0.46);
}

.gamepad-status {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.52rem;
    border: 1px dashed var(--line-bright);
    color: var(--muted);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.gamepad-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5d6b72;
}

.gamepad-status.is-connected {
    color: var(--aqua);
    border-color: rgba(125, 228, 220, 0.48);
}

.gamepad-status.is-connected i {
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
}

.utility-button {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 0.48rem;
    padding: 0.55rem 0.72rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--muted);
    background: rgba(10, 29, 43, 0.72);
    transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
}

.utility-button:hover {
    border-color: var(--line-bright);
    color: var(--ink);
    background: rgba(16, 39, 54, 0.9);
}

.utility-icon {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    color: var(--orange);
    font: 800 0.84rem/1 "Space Grotesk", sans-serif;
}

.utility-label {
    font-size: 0.76rem;
    font-weight: 700;
}

.game-shell {
    display: grid;
    gap: 0.72rem;
}

.match-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    padding: 0.6rem 1rem;
    border-block: 1px solid var(--line);
    background: linear-gradient(90deg, transparent, rgba(16, 39, 54, 0.5), transparent);
}

.player-score {
    display: flex;
    align-items: center;
    gap: 0.68rem;
    opacity: 0.7;
    transition: opacity 180ms ease;
}

.player-score.is-serving {
    opacity: 1;
}

.player-score.is-serving .score-label {
    color: var(--ink);
}

.player-score.is-serving .player-dot {
    animation: server-pulse 1.4s ease-in-out infinite;
}

.player-score--ghost {
    justify-content: flex-end;
    text-align: right;
}

.player-dot {
    width: 8px;
    height: 36px;
    background: var(--orange);
    box-shadow: 0 0 18px rgba(255, 178, 62, 0.5);
}

.player-score--ghost .player-dot {
    background: var(--aqua);
    box-shadow: 0 0 18px rgba(125, 228, 220, 0.42);
}

.score-label {
    display: block;
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.player-score strong {
    display: block;
    margin-top: -0.08rem;
    font: 800 clamp(2rem, 4vw, 3rem)/0.9 "Barlow Condensed", sans-serif;
    font-variant-numeric: tabular-nums;
}

.match-context {
    display: grid;
    min-width: 112px;
    justify-items: center;
    gap: 0.18rem;
    color: var(--muted);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.match-rally strong {
    color: var(--lime);
    font-variant-numeric: tabular-nums;
}

@keyframes server-pulse {
    50% {
        transform: scaleY(0.72);
        filter: brightness(1.35);
    }
}

.arena-panel {
    display: grid;
    gap: 0.72rem;
}

.court-stage {
    position: relative;
    width: min(100%, calc(70svh * 1.6));
    aspect-ratio: 16 / 10;
    margin-inline: auto;
    overflow: hidden;
    border: 1px solid var(--line-bright);
    border-radius: 6px;
    background: #101c24;
    box-shadow:
        0 32px 80px var(--shadow),
        6px 6px 0 rgba(255, 77, 131, 0.12),
        -5px -5px 0 rgba(125, 228, 220, 0.08),
        0 0 0 1px rgba(255, 178, 62, 0.08);
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.court-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 4px),
        linear-gradient(180deg, rgba(0, 0, 0, 0.06), transparent 25%, transparent 68%, rgba(0, 0, 0, 0.32)),
        radial-gradient(ellipse at center, transparent 56%, rgba(0, 0, 0, 0.3));
    mix-blend-mode: screen, normal, normal;
}

.court-readouts {
    position: absolute;
    top: 0.8rem;
    left: 0.8rem;
    display: flex;
    gap: 0.38rem;
}

.court-readouts span,
.rhythm-chip {
    display: flex;
    min-height: 30px;
    align-items: center;
    gap: 0.42rem;
    padding: 0.35rem 0.58rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    color: rgba(242, 244, 237, 0.72);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(5, 11, 18, 0.72);
    backdrop-filter: blur(8px);
}

.court-readouts i,
.rhythm-chip i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px var(--lime);
}

.court-readouts span + span i {
    background: var(--aqua);
    box-shadow: 0 0 10px var(--aqua);
}

.court-readouts b {
    color: var(--ink);
}

.rhythm-chip {
    border-color: rgba(255, 77, 131, 0.34);
    color: rgba(242, 244, 237, 0.72);
}

.rhythm-chip:hover {
    border-color: var(--pink);
    background: rgba(26, 12, 29, 0.88);
}

.rhythm-chip i {
    border-radius: 0;
    background: var(--pink);
    box-shadow: 0 0 10px var(--pink);
}

.rhythm-chip small {
    color: var(--lime);
    font: 900 0.54rem/1 "Space Grotesk", sans-serif;
}

.training-hud {
    position: absolute;
    top: 3.2rem;
    left: 0.8rem;
    z-index: 3;
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.12rem 0.85rem;
    min-width: 225px;
    padding: 0.58rem 0.7rem;
    border: 2px solid var(--lime);
    transform: rotate(-1deg);
    color: var(--ink);
    background: rgba(5, 11, 18, 0.9);
    box-shadow: 5px 5px 0 rgba(255, 77, 131, 0.42);
}

.training-hud[hidden] {
    display: none;
}

.training-hud > span {
    color: var(--lime);
    font: 900 0.84rem/1 "Barlow Condensed", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.training-hud strong {
    grid-row: span 2;
    font: 900 1.25rem/1 "Barlow Condensed", sans-serif;
}

.training-hud small {
    color: var(--muted);
    font-size: 0.56rem;
}

.training-hud button {
    grid-column: 1 / -1;
    justify-self: start;
    padding: 0.3rem 0 0;
    color: var(--orange);
    font-size: 0.54rem;
    font-weight: 800;
    text-transform: uppercase;
    background: transparent;
}

.timing-meter {
    position: absolute;
    right: 50%;
    bottom: 5.9rem;
    z-index: 4;
    width: min(320px, calc(100% - 2rem));
    padding: 0.55rem 0.65rem 0.62rem;
    transform: translateX(50%) rotate(-0.6deg);
    border: 2px solid var(--ink);
    color: var(--ink);
    background: rgba(5, 11, 18, 0.92);
    box-shadow: 4px 4px 0 rgba(255, 77, 131, 0.45);
    backdrop-filter: blur(8px);
}

.timing-meter[hidden] {
    display: none;
}

.timing-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 0.38rem;
    font: 900 0.58rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}

.timing-copy span {
    color: var(--aqua);
}

.timing-copy strong {
    color: var(--lime);
    text-align: right;
}

.timing-track {
    position: relative;
    height: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.24);
    background:
        linear-gradient(90deg, rgba(125, 228, 220, 0.24) 0 18%, transparent 18% 58%, rgba(255, 77, 131, 0.22) 82%),
        #101a22;
}

.timing-sweet-spot {
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: var(--sweet-start, 58%);
    width: var(--sweet-width, 24%);
    border-inline: 1px solid rgba(255, 255, 255, 0.72);
    background: rgba(215, 243, 106, 0.3);
}

.timing-track b {
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 0;
    background: var(--aqua);
    box-shadow: 0 0 12px currentColor;
}

.timing-read {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    margin-top: 0.34rem;
    color: var(--muted);
    font: 800 0.48rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.timing-read span:first-child {
    color: var(--orange);
}

.timing-meter[data-grade="sweet"] .timing-track b {
    background: var(--lime);
}

.timing-meter[data-grade="late"] .timing-track b {
    background: var(--orange);
}

.timing-meter[data-grade="over"] .timing-track b {
    background: var(--pink);
}

.camera-controls {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    display: grid;
    grid-template-columns: 32px minmax(86px, auto) 32px;
    min-height: 32px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 4px;
    background: rgba(5, 11, 18, 0.76);
    backdrop-filter: blur(8px);
}

.camera-controls button {
    min-width: 32px;
    color: var(--ink);
    background: transparent;
}

.camera-controls button:hover {
    color: var(--lime);
    background: rgba(255, 255, 255, 0.08);
}

.camera-mode-button {
    display: grid;
    grid-template-columns: auto auto;
    align-items: center;
    gap: 0.35rem;
    padding-inline: 0.5rem;
    border-inline: 1px solid rgba(255, 255, 255, 0.12);
    font: 700 0.62rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.camera-mode-button small {
    color: var(--orange);
    font-size: 0.52rem;
}

.status-dock {
    position: absolute;
    right: 0.8rem;
    bottom: 0.8rem;
    left: 0.8rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.72rem 0.82rem;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--ink);
    background: linear-gradient(90deg, rgba(5, 11, 18, 0.88), rgba(5, 11, 18, 0.56));
    backdrop-filter: blur(10px);
}

.status-dock::before {
    position: absolute;
    top: -0.55rem;
    left: 0.8rem;
    content: "LIVE FROM THE PARK";
    padding: 0.16rem 0.35rem;
    transform: rotate(-1.5deg);
    color: #10160d;
    font: 900 0.48rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.1em;
    background: var(--lime);
}

.status-dock p {
    margin: 0;
}

#statusLine {
    font: 700 clamp(1rem, 2vw, 1.24rem)/1.1 "Space Grotesk", sans-serif;
}

#detailLine {
    margin-top: 0.24rem;
    color: var(--muted);
    font-size: clamp(0.7rem, 1.3vw, 0.82rem);
}

#metaLine {
    flex: 0 0 auto;
    color: var(--orange);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: right;
    text-transform: uppercase;
}

.point-banner {
    position: absolute;
    top: 48%;
    left: 50%;
    display: grid;
    min-width: min(78%, 480px);
    justify-items: center;
    padding: 0.7rem 1.1rem 0.88rem;
    transform: translate(-50%, -50%) scale(0.9);
    border-block: 2px solid var(--lime);
    opacity: 0;
    color: var(--ink);
    text-align: center;
    background: rgba(5, 11, 18, 0.86);
    pointer-events: none;
}

.point-banner.is-visible {
    animation: point-call 1.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.point-banner span {
    color: var(--lime);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

.point-banner strong {
    margin-top: 0.18rem;
    font: 900 clamp(2.2rem, 7vw, 4.8rem)/0.86 "Barlow Condensed", sans-serif;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 4px 3px 0 rgba(255, 77, 131, 0.5), -3px -2px 0 rgba(125, 228, 220, 0.38);
}

.point-banner.is-loss {
    border-color: var(--orange-hot);
}

.point-banner.is-loss span {
    color: var(--orange-hot);
}

@keyframes point-call {
    0% { opacity: 0; transform: translate(-50%, -44%) scale(0.86); }
    16%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -54%) scale(1.02); }
}

.control-deck {
    display: grid;
    grid-template-columns: auto minmax(0, 1.45fr) minmax(0, 0.72fr);
    align-items: end;
    gap: 0.78rem;
}

.primary-actions {
    display: flex;
    gap: 0.45rem;
}

.serve-button,
.reset-button,
.swing-button {
    min-height: 50px;
    border-radius: 6px;
    color: #0b1113;
    font-weight: 800;
    background: var(--orange);
    box-shadow: 5px 5px 0 rgba(255, 106, 42, 0.22);
    transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}

.serve-button {
    display: flex;
    min-width: 130px;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0.7rem 0.85rem 0.7rem 1rem;
    text-transform: uppercase;
}

.serve-button:hover,
.swing-button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 5px 7px 0 rgba(255, 106, 42, 0.18);
}

.serve-button:active,
.swing-button:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(255, 106, 42, 0.22);
}

.reset-button {
    width: 50px;
    color: var(--muted);
    border: 1px solid var(--line-bright);
    background: var(--surface);
    box-shadow: none;
    font-size: 1.15rem;
}

.reset-button:hover {
    color: var(--ink);
    background: var(--surface-raised);
}

.selector-group {
    display: grid;
    gap: 0.3rem;
}

.selector-label {
    color: var(--muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.segmented-control {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    min-height: 50px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: rgba(5, 11, 18, 0.64);
}

.shot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, 1fr);
    min-height: 76px;
}

.shot-grid .shot-button {
    padding: 0.34rem 0.4rem;
    font-size: 0.67rem;
}

.shot-button[data-shot="palm"][aria-pressed="true"] { background: var(--lime); }
.shot-button[data-shot="slice"][aria-pressed="true"] { background: var(--aqua); }
.shot-button[data-shot="fist"][aria-pressed="true"] { background: var(--orange); }
.shot-button[data-shot="backhand"][aria-pressed="true"] { color: #180d1f; background: #e5a9ff; }
.shot-button[data-shot="kill"][aria-pressed="true"] { color: #1d0c08; background: #ff7048; }
.shot-button[data-shot="roller"][aria-pressed="true"] { color: #230612; background: #ff4d83; }
.shot-button[data-shot="lob"][aria-pressed="true"] { color: #081421; background: #8fc9ff; }

.shot-button,
.difficulty-button {
    min-width: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 3px;
    color: var(--muted);
    font-size: 0.74rem;
    font-weight: 700;
    background: transparent;
    transition: color 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.shot-button:hover,
.difficulty-button:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
}

.shot-button.active,
.shot-button[aria-pressed="true"] {
    color: #11180f;
    background: var(--lime);
}

.difficulty-button.active,
.difficulty-button[aria-pressed="true"] {
    color: #071315;
    background: var(--aqua);
}

.shot-button kbd {
    margin-left: 0.25rem;
    opacity: 0.7;
}

.mobile-controls {
    display: none;
}

.court-note {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: clamp(0.8rem, 3vw, 2.2rem);
    padding: 0.65rem 0;
    color: var(--muted);
    font-size: 0.68rem;
}

.court-note p {
    margin: 0;
}

.court-note span {
    margin-right: 0.3rem;
    color: var(--ink);
    font-weight: 700;
}

.court-note button {
    min-height: 36px;
    padding: 0.4rem;
    color: var(--orange);
    font-size: inherit;
    font-weight: 700;
    background: transparent;
}

.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.4rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(207, 227, 235, 0.08);
    color: rgba(169, 186, 194, 0.58);
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.help-dialog {
    width: min(720px, calc(100% - 1.5rem));
    max-height: min(760px, calc(100svh - 2rem));
    padding: 0;
    overflow: auto;
    border: 1px solid var(--line-bright);
    border-radius: 8px;
    color: var(--ink);
    background: #091924;
    box-shadow: 0 40px 120px rgba(0, 0, 0, 0.72);
}

.help-dialog::backdrop {
    background: rgba(2, 6, 10, 0.8);
    backdrop-filter: blur(8px);
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.2rem, 4vw, 2rem);
    border-bottom: 1px solid var(--line);
    background: linear-gradient(135deg, rgba(255, 106, 42, 0.15), transparent 48%);
}

.dialog-kicker {
    color: var(--orange);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.dialog-header h2 {
    margin: 0.2rem 0 0;
    font: 900 clamp(3rem, 9vw, 5.6rem)/0.86 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}

.dialog-close {
    width: 44px;
    height: 44px;
    border: 1px solid var(--line-bright);
    border-radius: 4px;
    color: var(--ink);
    background: rgba(5, 11, 18, 0.6);
    font-size: 1.5rem;
}

.dialog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: clamp(1.2rem, 4vw, 2rem);
}

.dialog-grid h3 {
    margin: 0 0 0.9rem;
    font: 700 1.2rem/1 "Barlow Condensed", sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dialog-grid ol,
.dialog-grid dl {
    display: grid;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dialog-grid li,
.dialog-grid dl div {
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

.dialog-grid li span,
.dialog-grid dt {
    color: var(--lime);
    font-weight: 700;
}

.dialog-grid dt,
.dialog-grid dd {
    margin: 0;
}

.dialog-grid dd {
    margin-top: 0.18rem;
}

.dialog-rule {
    margin: 0;
    padding: 1rem clamp(1.2rem, 4vw, 2rem) 1.4rem;
    border-top: 1px solid var(--line);
    color: var(--orange);
    font-size: 0.78rem;
    line-height: 1.5;
}

.rhythm-dialog {
    width: min(980px, calc(100% - 1.5rem));
    max-height: min(860px, calc(100svh - 1.5rem));
    padding: 0;
    overflow: auto;
    border: 2px solid var(--pink);
    border-radius: 2px;
    color: var(--ink);
    background:
        linear-gradient(rgba(125, 228, 220, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(125, 228, 220, 0.035) 1px, transparent 1px),
        radial-gradient(circle at 8% 15%, rgba(255, 77, 131, 0.2), transparent 24rem),
        #07141d;
    background-size: 16px 16px, 16px 16px, auto, auto;
    box-shadow:
        12px 12px 0 rgba(125, 228, 220, 0.22),
        -7px -7px 0 rgba(215, 243, 106, 0.13),
        0 50px 140px #000;
}

.rhythm-dialog::backdrop {
    background: rgba(2, 6, 10, 0.88);
    backdrop-filter: blur(8px) saturate(0.65);
}

.rhythm-dialog .dialog-header h2 {
    transform: skew(-4deg) rotate(-0.5deg);
    color: var(--lime);
    text-shadow: 5px 4px 0 #842c5b, -3px -2px 0 #226b72;
}

.rhythm-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
}

.rhythm-presets,
.rhythm-mixer {
    padding: clamp(1rem, 3vw, 1.5rem);
}

.rhythm-presets {
    border-right: 1px solid var(--line);
    background: rgba(5, 11, 18, 0.42);
}

.rhythm-presets > p {
    margin: 0 0 1rem;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.55;
}

.rhythm-preset-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
}

.rhythm-preset-grid button {
    display: grid;
    min-height: 112px;
    align-content: end;
    gap: 0.28rem;
    padding: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--ink);
    text-align: left;
    background:
        linear-gradient(145deg, rgba(255, 77, 131, 0.14), transparent 58%),
        #102431;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.34);
}

.rhythm-preset-grid button:nth-child(2) {
    background:
        linear-gradient(145deg, rgba(215, 243, 106, 0.16), transparent 58%),
        #102431;
}

.rhythm-preset-grid button:nth-child(3) {
    background:
        linear-gradient(145deg, rgba(125, 228, 220, 0.15), transparent 58%),
        #102431;
}

.rhythm-preset-grid button:hover,
.rhythm-preset-grid button.active {
    transform: translate(-2px, -2px);
    border-color: var(--lime);
    box-shadow: 5px 5px 0 rgba(255, 77, 131, 0.42);
}

.rhythm-preset-grid span {
    color: var(--aqua);
    font: 800 0.52rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.rhythm-preset-grid strong {
    font: 900 1.25rem/1 "Barlow Condensed", sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rhythm-preset-grid small {
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.35;
}

.rhythm-verdict {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    border: 1px dashed rgba(215, 243, 106, 0.46);
    transform: rotate(-0.4deg);
    background: rgba(5, 11, 18, 0.72);
}

.rhythm-verdict span {
    color: var(--pink);
    font: 900 0.58rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.rhythm-verdict strong {
    color: var(--lime);
    font: 900 1.05rem/1.1 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}

.rhythm-verdict small {
    color: var(--muted);
    font-size: 0.64rem;
    line-height: 1.45;
}

.rhythm-mixer {
    display: grid;
    align-content: start;
    gap: 0.82rem;
}

.rhythm-mixer label {
    display: grid;
    gap: 0.36rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid var(--line);
}

.rhythm-mixer label > span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.rhythm-mixer b {
    font: 900 0.82rem/1 "Space Grotesk", sans-serif;
    text-transform: uppercase;
}

.rhythm-mixer output {
    color: var(--lime);
    font: 900 1.05rem/1 "Barlow Condensed", sans-serif;
}

.rhythm-mixer small {
    color: var(--muted);
    font-size: 0.62rem;
    line-height: 1.4;
}

.rhythm-mixer input[type="range"] {
    width: 100%;
    height: 22px;
    margin: 0;
    accent-color: var(--pink);
    cursor: ew-resize;
}

.rhythm-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
    border-top: 1px solid var(--line);
    background: rgba(5, 11, 18, 0.96);
    backdrop-filter: blur(10px);
}

.rhythm-savebar p {
    max-width: 520px;
    margin: 0;
    color: var(--muted);
    font-size: 0.68rem;
    line-height: 1.4;
}

.rhythm-savebar div {
    display: flex;
    flex: 0 0 auto;
    gap: 0.5rem;
}

.rhythm-savebar button {
    min-height: 42px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--line-bright);
    color: var(--ink);
    background: #102431;
    font: 800 0.62rem/1 "Space Grotesk", sans-serif;
    text-transform: uppercase;
}

.rhythm-savebar button:last-child {
    border-color: var(--lime);
    color: #10160d;
    background: var(--lime);
    box-shadow: 4px 4px 0 rgba(255, 77, 131, 0.42);
}

.avatar-dialog {
    width: min(1060px, calc(100% - 1.5rem));
    max-height: min(900px, calc(100svh - 1.5rem));
    padding: 0;
    overflow: auto;
    border: 2px solid #e5a9ff;
    border-radius: 3px;
    color: var(--ink);
    background:
        radial-gradient(circle at 12% 15%, rgba(125, 228, 220, 0.16), transparent 24rem),
        radial-gradient(circle at 92% 75%, rgba(255, 77, 131, 0.18), transparent 28rem),
        #07141d;
    box-shadow: 12px 12px 0 rgba(125, 228, 220, 0.25), -7px -7px 0 rgba(255, 77, 131, 0.2), 0 50px 140px #000;
}

.avatar-dialog::backdrop {
    background: rgba(2, 6, 10, 0.88);
    backdrop-filter: blur(8px) saturate(0.7);
}

.avatar-dialog .dialog-header h2 {
    transform: skew(-4deg);
    color: #e5a9ff;
    text-shadow: 5px 4px 0 #842c5b, -3px -2px 0 #226b72;
}

.avatar-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.7fr) minmax(0, 1.7fr);
    min-height: 520px;
}

.avatar-preview-panel {
    display: grid;
    align-content: start;
    gap: 0.8rem;
    padding: 1.2rem;
    border-right: 1px solid var(--line);
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        rgba(5, 11, 18, 0.45);
    background-size: 18px 18px;
}

#avatarPreview {
    width: 100%;
    max-width: 300px;
    aspect-ratio: 14 / 16.5;
    justify-self: center;
    image-rendering: pixelated;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: #0c2330;
    box-shadow: 6px 6px 0 rgba(255, 77, 131, 0.34);
}

.avatar-name {
    display: grid;
    gap: 0.35rem;
}

.avatar-name span,
.avatar-option-group h3 {
    margin: 0;
    color: var(--muted);
    font: 800 0.62rem/1 "Space Grotesk", sans-serif;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.avatar-name input {
    min-height: 44px;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--line-bright);
    border-radius: 3px;
    color: var(--ink);
    background: rgba(5, 11, 18, 0.86);
    font: 800 1rem/1 "Space Grotesk", sans-serif;
}

.avatar-actions,
.avatar-presets,
.avatar-pose-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
}

.avatar-actions button,
.avatar-presets button,
.avatar-pose-controls button,
.avatar-option-button {
    min-height: 36px;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 3px;
    color: var(--muted);
    background: rgba(5, 11, 18, 0.72);
    font: 700 0.65rem/1 "Space Grotesk", sans-serif;
}

.avatar-actions button:hover,
.avatar-presets button:hover,
.avatar-pose-controls button:hover,
.avatar-pose-controls button[aria-pressed="true"],
.avatar-option-button:hover,
.avatar-option-button[aria-pressed="true"] {
    color: #071018;
    border-color: var(--lime);
    background: var(--lime);
}

.avatar-pose-controls {
    justify-content: center;
}

.avatar-pose-controls button {
    min-height: 30px;
    padding: 0.35rem 0.48rem;
    color: var(--aqua);
    font-size: 0.58rem;
}

.avatar-workbench {
    min-width: 0;
    padding: 1.2rem;
}

.avatar-presets {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.avatar-presets button {
    color: var(--aqua);
    border-color: rgba(125, 228, 220, 0.28);
}

.avatar-option-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
    padding-top: 1rem;
}

.avatar-option-group {
    min-width: 0;
}

.avatar-option-group h3 {
    margin-bottom: 0.55rem;
}

.avatar-option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.36rem;
}

.avatar-option-button {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.avatar-option-button i {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 50%;
    background: var(--swatch, transparent);
}

.avatar-savebar {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1.2rem;
    border-top: 1px solid var(--line);
    background: rgba(5, 11, 18, 0.96);
    backdrop-filter: blur(10px);
}

.avatar-savebar p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
}

.avatar-savebar button {
    min-height: 44px;
    padding: 0.65rem 1rem;
    color: #10160d;
    background: var(--lime);
    box-shadow: 4px 4px 0 rgba(255, 77, 131, 0.42);
    font-weight: 900;
    text-transform: uppercase;
}

.training-dialog {
    width: min(900px, calc(100% - 1.5rem));
    max-height: min(820px, calc(100svh - 1.5rem));
    padding: 0;
    overflow: auto;
    border: 2px solid var(--lime);
    border-radius: 2px;
    color: var(--ink);
    background:
        radial-gradient(circle at 90% 5%, rgba(255, 77, 131, 0.2), transparent 28rem),
        #07141d;
    box-shadow: 12px 12px 0 rgba(255, 77, 131, 0.42), -8px -8px 0 rgba(125, 228, 220, 0.14), 0 50px 140px #000;
}

.training-dialog::backdrop {
    background: rgba(2, 6, 10, 0.86);
    backdrop-filter: blur(7px) saturate(0.7);
}

.training-dialog .dialog-header h2 {
    transform: skew(-4deg);
    color: var(--lime);
    text-shadow: 5px 4px 0 #842c5b, -3px -2px 0 #226b72;
}

.training-intro {
    max-width: 680px;
    margin: 0;
    padding: 1.2rem clamp(1.2rem, 4vw, 2rem) 0;
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.55;
}

.training-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
    padding: 1.2rem clamp(1.2rem, 4vw, 2rem);
}

.training-card {
    position: relative;
    display: grid;
    min-height: 150px;
    align-content: end;
    gap: 0.38rem;
    overflow: hidden;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ink);
    text-align: left;
    background: #102431;
    transition: transform 140ms ease, border-color 140ms ease, filter 140ms ease;
}

.training-card::before {
    position: absolute;
    top: -3.3rem;
    right: -1rem;
    content: "W";
    transform: rotate(12deg);
    color: rgba(255, 255, 255, 0.06);
    font: 900 10rem/1 "Barlow Condensed", sans-serif;
}

.training-card::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0.18;
    background-image: radial-gradient(circle, #fff 1px, transparent 1.5px);
    background-size: 7px 7px;
    mask-image: linear-gradient(135deg, transparent 20%, #000);
}

.training-card:hover {
    z-index: 1;
    transform: translateY(-3px) rotate(-0.5deg);
    border-color: var(--lime);
    filter: brightness(1.12);
}

.training-card > * {
    position: relative;
    z-index: 1;
}

.training-card span {
    color: var(--lime);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.training-card strong {
    font: 900 2rem/0.9 "Barlow Condensed", sans-serif;
    text-transform: uppercase;
}

.training-card small {
    max-width: 34ch;
    color: rgba(242, 244, 237, 0.72);
    font-size: 0.68rem;
    line-height: 1.4;
}

.training-card--corners { background: linear-gradient(135deg, #244c48, #102431 64%); }
.training-card--spin { background: linear-gradient(135deg, #5a2851, #102431 64%); }
.training-card--kill { background: linear-gradient(135deg, #7b3225, #102431 64%); }
.training-card--rally { background: linear-gradient(135deg, #345626, #102431 64%); }

.controller-map {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 1rem clamp(1.2rem, 4vw, 2rem) 1.4rem;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.64rem;
}

.controller-map span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 800px) {
    .app-shell {
        padding-inline: 0.55rem;
    }

    .utility-label,
    .court-note,
    .site-footer {
        display: none;
    }

    .gamepad-status {
        display: none;
    }

    .utility-button {
        width: 44px;
        justify-content: center;
        padding-inline: 0;
    }

    .match-board {
        padding-inline: 0.45rem;
    }

    .court-stage {
        width: 100%;
        height: clamp(350px, 44svh, 460px);
        aspect-ratio: auto;
    }

    .status-dock {
        display: block;
        right: 0.45rem;
        bottom: 0.45rem;
        left: 0.45rem;
        padding: 0.62rem 0.68rem;
    }

    .timing-meter {
        bottom: 7.1rem;
        width: min(280px, calc(100% - 1rem));
        padding: 0.48rem 0.55rem 0.52rem;
    }

    .timing-copy {
        font-size: 0.52rem;
    }

    #metaLine {
        margin-top: 0.35rem;
        text-align: left;
    }

    .court-readouts {
        top: 0.45rem;
        left: 0.45rem;
    }

    .camera-controls {
        top: 0.45rem;
        right: 0.45rem;
        grid-template-columns: 30px minmax(72px, auto) 30px;
    }

    .camera-mode-button {
        padding-inline: 0.35rem;
        font-size: 0.56rem;
    }

    .court-readouts span {
        font-size: 0.58rem;
    }

    .court-readouts span:nth-child(2) {
        display: none;
    }

    .control-deck {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .difficulty-control {
        display: none;
    }

    .serve-button {
        min-width: 112px;
    }

    .mobile-controls {
        display: grid;
        grid-template-columns: 1fr 1.18fr;
        gap: 0.8rem;
        width: min(100%, 540px);
        margin: 0.2rem auto 0;
        padding-bottom: env(safe-area-inset-bottom);
        user-select: none;
        touch-action: none;
    }

    .move-pad {
        position: relative;
        width: 150px;
        height: 150px;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.06), rgba(5, 11, 18, 0.76) 62%);
    }

    .move-pad::before,
    .move-pad::after {
        position: absolute;
        content: "";
        background: rgba(207, 227, 235, 0.08);
        pointer-events: none;
    }

    .move-pad::before {
        top: 16px;
        bottom: 16px;
        left: 50%;
        width: 1px;
    }

    .move-pad::after {
        top: 50%;
        right: 16px;
        left: 16px;
        height: 1px;
    }

    .move-pad-label {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        transform: translate(-50%, -50%);
        color: var(--muted);
        font-size: 0.56rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        pointer-events: none;
    }

    .move-button {
        position: absolute;
        z-index: 2;
        display: grid;
        width: 50px;
        height: 50px;
        place-items: center;
        border-radius: 50%;
        color: var(--muted);
        background: transparent;
        touch-action: none;
    }

    .move-button.is-held {
        color: var(--night);
        background: var(--lime);
    }

    .move-up { top: 2px; left: 50px; }
    .move-right { top: 50px; right: 2px; }
    .move-down { bottom: 2px; left: 50px; }
    .move-left { top: 50px; left: 2px; }

    .touch-actions {
        display: grid;
        grid-template-rows: auto 1fr;
        gap: 0.55rem;
    }

    .spin-actions {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.4rem;
    }

    .spin-button {
        min-height: 44px;
        padding: 0.4rem;
        border: 1px solid var(--line);
        border-radius: 6px;
        color: var(--muted);
        font-size: 0.62rem;
        font-weight: 700;
        background: rgba(5, 11, 18, 0.72);
        touch-action: none;
    }

    .spin-button.is-held {
        border-color: var(--aqua);
        color: var(--aqua);
    }

    .yield-button {
        border-color: rgba(255, 184, 77, 0.44);
        color: var(--orange);
    }

    .yield-button.is-held {
        border-color: var(--lime);
        color: #071018;
        background: var(--lime);
    }

    .swing-button {
        min-height: 98px;
        color: #12160c;
        background: var(--lime);
        box-shadow: 5px 5px 0 rgba(125, 228, 220, 0.2);
        font: 900 2.2rem/1 "Barlow Condensed", sans-serif;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        touch-action: manipulation;
    }

    .dialog-grid {
        grid-template-columns: 1fr;
    }

    .rhythm-layout {
        grid-template-columns: 1fr;
    }

    .rhythm-presets {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .rhythm-savebar {
        align-items: stretch;
        flex-direction: column;
    }

    .rhythm-savebar div {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .training-grid {
        grid-template-columns: 1fr;
    }

    .training-card {
        min-height: 118px;
    }

    .avatar-dialog .dialog-header h2 {
        font-size: clamp(2.6rem, 14vw, 4.4rem);
    }

    .avatar-layout {
        grid-template-columns: 1fr;
    }

    .avatar-preview-panel {
        grid-template-columns: minmax(130px, 0.72fr) 1fr;
        align-items: start;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    #avatarPreview {
        grid-row: span 3;
    }

    .avatar-option-groups {
        grid-template-columns: 1fr;
    }

    .avatar-savebar {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 430px) {
    .brand-place {
        max-width: 142px;
        overflow: hidden;
        font-size: 0.56rem;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .brand-name {
        font-size: 1.16rem;
    }

    .brand-mark {
        width: 38px;
        height: 38px;
    }

    .topbar {
        min-height: 44px;
        margin-bottom: 0.55rem;
    }

    .topbar-actions {
        gap: 0.25rem;
    }

    .utility-button {
        width: 38px;
        min-height: 38px;
    }

    .utility-icon {
        width: 20px;
    }

    .utility-button--rhythm {
        display: none;
    }

    #soundButton {
        display: none;
    }

    .match-context {
        min-width: 86px;
        font-size: 0.56rem;
    }

    .camera-controls {
        grid-template-columns: 28px minmax(64px, auto) 28px;
    }

    .camera-mode-button small {
        display: none;
    }

    .control-deck {
        grid-template-columns: 1fr;
    }

    .primary-actions {
        grid-row: 2;
    }

    .serve-button {
        flex: 1;
    }

    .selector-group {
        grid-row: 1;
    }

    .shot-grid {
        display: flex;
        min-height: 58px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .shot-grid .shot-button {
        flex: 0 0 76px;
        scroll-snap-align: start;
    }

    .training-hud {
        top: 3rem;
        right: 0.45rem;
        left: 0.45rem;
        min-width: 0;
    }

    .timing-meter {
        bottom: 7.35rem;
    }

    .avatar-preview-panel {
        grid-template-columns: 118px 1fr;
        padding: 0.8rem;
    }

    .avatar-workbench {
        padding: 0.9rem 0.8rem;
    }

    .avatar-savebar {
        padding: 0.75rem 0.8rem;
    }

    .rhythm-preset-grid {
        grid-template-columns: 1fr 1fr;
    }

    .mobile-controls {
        grid-template-columns: 140px 1fr;
        gap: 0.55rem;
    }

    .move-pad {
        width: 140px;
        height: 140px;
    }

    .move-up { left: 45px; }
    .move-down { left: 45px; }
    .move-right { top: 45px; }
    .move-left { top: 45px; }
}

@media (max-width: 350px) {
    #helpButton {
        display: none;
    }

    .brand-place {
        max-width: 110px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}