@view-transition { navigation: auto; }
  @keyframes game-switch-old { to { opacity: 0; } }
  @keyframes game-switch-new { from { opacity: 0; } }
  @keyframes game-switch-content-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  ::view-transition-old(root) {
    animation: 120ms ease-out both game-switch-old;
  }
  ::view-transition-new(root) {
    animation: 180ms ease-out both game-switch-new;
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    :root[data-game-switch="incoming"][data-app-ready="true"] #main-content {
      animation: none;
    }
  }
  :root {
    --bg: #F9FAFE;            /* exact page bg from recordings */
    --surface: #FFFFFF;
    --ink: #1D2226;
    --muted: #56687A;
    --line: #D6DCE4;
    --accent: #0A66C2;        /* LinkedIn blue */
    --gold: #E4A01C;          /* win crown gold from recordings */
    --gold-dark: #9A4F00;
    --board-line: #1D2226;
    --pill: #EDF3F8;
    --danger: #CC1016;
    --shadow: 0 4px 16px rgba(29, 34, 38, 0.08);
  }
  :root[data-theme="dark"] {
    --bg: #1B1F23; --surface: #24292E; --ink: #E9E5DF; --muted: #9DB1C5;
    --line: #38434F; --accent: #70B5F9; --pill: #2E3A45;
    --board-line: #14171A;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }
  body[data-game="tango"] {
    --accent: #B84A24;
    --gold: #F2A43B;
    --pill: #F6EEE7;
  }
  :root[data-theme="dark"] body[data-game="tango"] {
    --accent: #FFB078;
    --pill: #3B302B;
  }
  * { box-sizing: border-box; touch-action: manipulation; }
  html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  html, body { margin: 0; min-height: 100%; }
  html { background: var(--bg); }
  :root[data-game-switch="incoming"]:not([data-app-ready="true"]) #main-content {
    opacity: 0;
  }
  :root[data-game-switch="incoming"][data-app-ready="true"] #main-content {
    animation: game-switch-content-in 180ms ease-out both;
  }
  :root[data-game-switch="incoming"] .page:not(.hidden) {
    animation: none;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--bg); color: var(--ink);
    font-family: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px; line-height: 1.45;
  }
  button { font: inherit; cursor: pointer; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .page h1[tabindex="-1"]:focus,
  .page h2[tabindex="-1"]:focus,
  .game-wrap h1[tabindex="-1"]:focus,
  .game-wrap h2[tabindex="-1"]:focus { outline: none; }
  .hidden { display: none !important; }
  /* ===== App chrome ===== */
  .topbar {
    position: sticky; top: 0; z-index: 30;
    display: flex; align-items: center; gap: 16px;
    padding: 10px 20px; background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .brand { color: var(--ink); text-decoration: none; font-weight: 800; font-size: 17px; display: flex; align-items: center; gap: 8px; }
  .brand .logo { width: 26px; height: 26px; }
  .brand-game-icon {
    width: 29px; height: 29px; flex: none; display: grid; place-items: center;
    overflow: hidden; border-radius: 9px; color: #fff; background: var(--accent);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .brand-game-icon svg { width: 22px; height: 22px; }
  .brand-game-icon img {
    width: 100%; height: 100%; display: block; border-radius: inherit;
  }
  .tabs { display: flex; gap: 4px; margin-left: 8px; }
  .tabs a {
    color: var(--muted); text-decoration: none; font-weight: 600;
    padding: 7px 14px; border-radius: 999px;
  }
  .tabs a.active { color: var(--accent); background: var(--pill); }
  .topbar .spacer { flex: 1; }
  .theme-btn { background: none; border: none; font-size: 18px; padding: 6px; color: var(--muted); }
  .account-nav {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    min-width: 74px; max-width: 190px; padding: 7px 14px;
    overflow: hidden; color: var(--muted); text-decoration: none; text-overflow: ellipsis;
    white-space: nowrap; font-weight: 750; border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface);
  }
  .account-nav:hover { color: var(--ink); border-color: var(--accent); }
  .account-nav.active {
    color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: var(--pill);
  }
  .page { max-width: 1060px; margin: 0 auto; padding: 24px 20px 60px; }
  @media (max-width: 640px) {
    .topbar { padding: 8px 12px; gap: 8px; }
    .brand-text { display: none; }
    .tabs { min-width: 0; overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { flex: none; }
    .tabs a { padding: 6px 10px; font-size: 14px; }
    .account-nav { max-width: 104px; padding: 6px 10px; font-size: 13px; }
    .page { padding: 16px 12px 40px; }
    .game-wrap { padding: 0 8px 40px; }
  }

  /* ===== Practice ===== */
  h1 { font-size: 24px; margin: 6px 0 4px; letter-spacing: -0.01em; }
  .sub { color: var(--muted); margin: 0 0 22px; }
  .day-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
  .day-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
    padding: 16px 18px; box-shadow: var(--shadow);
    display: flex; flex-direction: column; gap: 8px;
  }
  .day-card.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
  .day-head { display: flex; align-items: baseline; justify-content: space-between; }
  .day-name { font-weight: 800; font-size: 17px; }
  .today-tag { font-size: 11px; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: 0.08em; }
  .crowns { letter-spacing: 2px; font-size: 13px; }
  .crowns .on { filter: none; } .crowns .off { filter: grayscale(1); opacity: 0.28; }
  .practice-crown { width: 15px; height: 15px; fill: var(--gold); vertical-align: middle; }
  .day-meta { color: var(--muted); font-size: 13px; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }
  .progress { height: 5px; background: var(--pill); border-radius: 3px; overflow: hidden; }
  .progress > div { height: 100%; background: var(--accent); border-radius: 3px; }
  .day-actions { display: flex; gap: 8px; margin-top: 4px; }
  .btn {
    border: none; border-radius: 999px; padding: 8px 16px; font-weight: 700;
    background: var(--accent); color: #fff;
  }
  .btn.secondary { background: var(--pill); color: var(--ink); }
  .btn:disabled { opacity: 0.4; cursor: default; }

  /* ===== Browse ===== */
  .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; align-items: center; }
  .chip {
    border: 1px solid var(--line); background: var(--surface); color: var(--muted);
    border-radius: 999px; padding: 5px 13px; font-weight: 600; font-size: 13px;
  }
  .chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
  .chip-sep { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
  #browse-count { color: var(--muted); font-size: 13px; margin-left: auto; }
  .puzzle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .pz-card {
    background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
    padding: 10px; text-align: left; display: flex; flex-direction: column; gap: 7px;
  }
  .pz-card:hover { border-color: var(--accent); }
  .pz-card canvas { width: 100%; aspect-ratio: 1; border-radius: 6px; display: block; }
  .pz-mystery {
    width: 100%; aspect-ratio: 1; border-radius: 6px; background: var(--pill);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  }
  .pz-mystery svg { width: 34%; fill: var(--line); }
  .pz-mystery span { color: var(--muted); font-size: 12px; font-weight: 600; }
  .pz-title { font-weight: 700; font-size: 14px; display: flex; justify-content: space-between; align-items: center; }
  .pz-solved { display: inline-flex; align-items: center; gap: 4px; color: var(--gold); }
  .pz-solved-icon { width: 14px; height: 14px; fill: currentColor; }
  .pz-meta { color: var(--muted); font-size: 12px; display: flex; justify-content: space-between; font-variant-numeric: tabular-nums; }

  /* ===== Stats ===== */
  .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 26px; }
  .stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); }
  .stat-card .v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
  .stat-card .k { color: var(--muted); font-size: 13px; }
  .bar-chart { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 26px; }
  .bar-row { display: grid; grid-template-columns: 44px 1fr 90px; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; }
  .bar-track { background: var(--pill); border-radius: 4px; height: 18px; position: relative; }
  .bar-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent); border-radius: 4px; }
  .bar-val { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
  table.recent { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-variant-numeric: tabular-nums; }
  table.recent th, table.recent td { text-align: left; padding: 9px 14px; border-top: 1px solid var(--line); font-size: 14px; }
  table.recent th { border-top: none; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }

  /* ===== 1v1 duel ===== */
  #view-duel, #duel-content {
    width: 100%; min-width: 0; max-width: 100%; overflow-x: clip;
  }
  .duel-page-heading {
    align-items: center; margin: 0 2px 18px;
  }
  .duel-page-heading > div { min-width: 0; }
  .duel-page-heading .sub { max-width: 560px; margin: 0; overflow-wrap: anywhere; }
  .duel-page-guide {
    display: grid; grid-template-columns: repeat(3, auto); gap: 14px;
    padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px;
    color: var(--muted); background: var(--surface); box-shadow: var(--shadow);
    font-size: 11px; font-weight: 750;
  }
  .duel-page-guide span { display: grid; gap: 1px; }
  .duel-page-guide b { color: var(--ink); font-size: 12px; }
  .duel-create-layout {
    display: grid; grid-template-columns: minmax(370px, 430px) minmax(0, 1fr);
    gap: 16px; align-items: start;
  }
  .duel-create-layout > * { min-width: 0; }
  .duel-grid {
    width: 100%; min-width: 0; max-width: 100%; display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(270px, 0.9fr); gap: 16px;
  }
  .duel-grid > * { min-width: 0; max-width: 100%; }
  .duel-grid-waiting { grid-template-columns: minmax(0, 1fr); }
  .duel-panel {
    width: 100%; min-width: 0; max-width: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 20px; overflow-wrap: anywhere; box-shadow: var(--shadow);
  }
  .duel-panel h2 { margin: 0 0 4px; font-size: 19px; }
  .duel-panel .panel-sub { color: var(--muted); margin: 0 0 18px; font-size: 13.5px; }
  .duel-form { display: grid; gap: 16px; }
  .duel-create-panel {
    display: block; width: 100%; max-width: 100%; padding: 0;
    overflow: clip; touch-action: pan-y;
  }
  .duel-form-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 18px 19px 14px; border-bottom: 1px solid var(--line);
  }
  .duel-form-head .panel-sub { margin: 2px 0 0; }
  .duel-create-main { display: grid; gap: 15px; padding: 17px 19px 18px; }
  .duel-form-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: start; }
  .duel-form-pair > * { min-width: 0; }
  .duel-field { display: grid; gap: 7px; }
  .duel-field > span, .duel-field legend { font-size: 13px; font-weight: 800; }
  .duel-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  .duel-input {
    width: 100%; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; color: var(--ink); background: var(--bg); outline: none;
  }
  .duel-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent); }
  .duel-number-control {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    border: 1px solid var(--line); border-radius: 10px; background: var(--bg);
  }
  .duel-number-control:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
  }
  .duel-number-control .duel-input {
    min-width: 0; border: 0; border-radius: inherit; background: transparent; box-shadow: none;
    font-size: 17px; font-weight: 850; font-variant-numeric: tabular-nums;
  }
  .duel-number-control > span {
    padding-right: 12px; color: var(--muted); font-size: 12px; font-weight: 800;
  }
  .duel-target-field {
    padding: 12px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-soft);
  }
  .duel-target-control {
    min-width: 0; display: grid;
    grid-template-columns: auto minmax(70px, 104px) auto;
    align-items: center; gap: 9px;
  }
  .duel-target-control > span {
    color: var(--ink); font-size: 13px; font-weight: 850; white-space: nowrap;
  }
  .duel-target-control .duel-input {
    min-width: 0; padding-inline: 8px; text-align: center;
    font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums;
  }
  .duel-choice-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; margin-top: 7px; }
  .duel-choice { position: relative; cursor: pointer; }
  .duel-choice input {
    position: absolute; width: 1px; height: 1px; opacity: 0;
  }
  .duel-choice > span {
    display: block; padding: 9px 8px; border: 1px solid var(--line); border-radius: 10px;
    text-align: center; color: var(--muted); background: var(--bg); font-weight: 800;
  }
  .duel-choice input:checked + span { border-color: var(--accent); color: var(--accent); background: var(--pill); box-shadow: inset 0 0 0 1px var(--accent); }
  .duel-choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
  .duel-source-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 7px; }
  .duel-match-type-row .duel-choice > span {
    min-height: 62px; display: block; padding: 10px 12px; text-align: left;
  }
  .duel-match-type-row b, .duel-match-type-row small { display: block; }
  .duel-match-type-row small {
    margin-top: 2px; color: var(--muted); font-size: 10.5px;
    font-weight: 600; line-height: 1.25;
  }
  .duel-mode-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 7px; }
  .duel-mode > span { min-height: 78px; text-align: left; }
  .duel-mode b, .duel-mode small { display: block; }
  .duel-mode small { margin-top: 3px; color: var(--muted); font-weight: 500; line-height: 1.3; }
  .duel-create-panel .duel-mode span { min-height: 0; text-align: center; }
  .duel-visibility-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 2px; }
  .duel-visibility > span {
    min-height: 66px; display: grid; grid-template-columns: 17px minmax(0, 1fr);
    gap: 9px; align-items: center; padding: 10px 11px; text-align: left;
  }
  .duel-visibility-dot {
    width: 15px; height: 15px; border: 2px solid var(--line); border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 3px var(--surface);
  }
  .duel-visibility input:checked + span .duel-visibility-dot {
    border-color: var(--accent); background: var(--accent);
  }
  .duel-visibility b, .duel-visibility small { display: block; }
  .duel-visibility small {
    margin-top: 1px; color: var(--muted); font-size: 10.5px;
    font-weight: 600; line-height: 1.2;
  }
  .duel-rating-note {
    display: flex; align-items: center; gap: 10px; min-height: 51px;
    padding: 9px 11px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--surface-soft);
  }
  .duel-rating-note b, .duel-rating-note small { display: block; }
  .duel-rating-note small { margin-top: 1px; color: var(--muted); font-size: 11px; }
  .duel-advanced {
    overflow: hidden; border: 1px solid var(--line); border-radius: 12px;
    background: var(--surface-soft);
  }
  .duel-advanced summary {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 13px; cursor: pointer; list-style: none;
  }
  .duel-advanced summary::-webkit-details-marker { display: none; }
  .duel-advanced summary > span { min-width: 0; }
  .duel-advanced summary b, .duel-advanced summary small { display: block; }
  .duel-advanced summary small {
    overflow: hidden; margin-top: 1px; color: var(--muted); font-size: 11px;
    font-weight: 650; text-overflow: ellipsis; white-space: nowrap;
  }
  .duel-advanced summary::after {
    content: "Edit"; flex: none; padding: 4px 8px; border-radius: 999px;
    color: var(--accent); background: var(--surface); font-size: 10px; font-weight: 850;
  }
  .duel-advanced[open] summary::after { content: "Close"; }
  .duel-advanced-body { padding: 13px; border-top: 1px solid var(--line); background: var(--surface); }
  .duel-advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 13px 10px; }
  .duel-advanced-rule { grid-column: 1 / -1; }
  .duel-order-field, .duel-weekday-field { grid-column: 1 / -1; }
  #duel-min-puzzle-field { grid-column: 1 / -1; }
  .duel-field-note { color: var(--muted); font-size: 10.5px; line-height: 1.3; }
  .duel-create-footer {
    display: grid; gap: 9px; padding: 14px 19px 18px;
    border-top: 1px solid var(--line); background: var(--surface-soft);
  }
  .duel-create-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: var(--muted); font-size: 11px;
  }
  .duel-create-summary > * { min-width: 0; }
  .duel-create-summary b {
    overflow: hidden; color: var(--ink); text-align: right;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .duel-create-footer .btn { width: 100%; min-height: 43px; }
  .duel-create-panel .duel-error:empty { display: none; }
  .duel-day-picker { margin-top: 9px; }
  .duel-steps { display: grid; gap: 14px; margin-top: 18px; }
  .duel-step { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; }
  .duel-step-num { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--pill); color: var(--accent); font-weight: 800; }
  .duel-step-num svg { width: 16px; height: 16px; }
  .duel-step b, .duel-step span { display: block; }
  .duel-step span { color: var(--muted); font-size: 13px; margin-top: 2px; }
  .duel-error { color: var(--danger); font-size: 13px; font-weight: 650; min-height: 1.4em; }
  .duel-link-row { display: flex; gap: 8px; margin: 14px 0; }
  .duel-link-row .duel-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
  .duel-code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 24px; letter-spacing: 0.14em; font-weight: 800; color: var(--accent); }
  .duel-meta { display: flex; flex-wrap: wrap; gap: 7px; margin: 10px 0 18px; }
  .duel-meta span { background: var(--pill); color: var(--muted); padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
  .duel-players {
    width: 100%; min-width: 0; display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: stretch; gap: 10px; margin: 16px 0;
  }
  .duel-player-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  .duel-game-choices {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 7px; margin-bottom: 8px;
  }
  .duel-format-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .duel-game-choices label { position: relative; cursor: pointer; }
  .duel-game-choices input { position: absolute; opacity: 0; pointer-events: none; }
  .duel-game-choices span {
    display: block; padding: 8px 10px; border: 1px solid var(--line);
    border-radius: 9px; color: var(--muted); background: var(--surface-soft);
    font-size: 12px; font-weight: 800; text-align: center;
  }
  .duel-game-choices input:checked + span {
    border-color: var(--accent); color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  }
  .duel-players > * { min-width: 0; max-width: 100%; }
  .duel-players-waiting { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duel-player-grid.duel-players-waiting { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .duel-players-waiting .duel-vs { display: none; }
  .duel-players-waiting > .duel-player { height: 100%; align-self: stretch; }
  .duel-player { border: 1px solid var(--line); border-radius: 13px; padding: 14px; background: var(--bg); min-width: 0; }
  .duel-player.you { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .duel-player-placeholder {
    min-height: 82px; display: grid; align-content: center; gap: 3px;
    border-style: dashed; text-align: center;
  }
  .duel-player-placeholder .duel-player-name { justify-content: center; white-space: normal; }
  .duel-player-name { display: flex; align-items: center; gap: 7px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .duel-player-status { color: var(--muted); font-size: 12px; margin-top: 4px; }
  .duel-vs { align-self: center; color: var(--muted); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; }
  .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: none; }
  .status-dot.online { background: #1D9B52; box-shadow: 0 0 0 3px color-mix(in srgb, #1D9B52 15%, transparent); }
  .duel-ready-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--line); }
  .duel-ready-actions { display: flex; align-items: center; gap: 8px; }
  .duel-expiry { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
  .duel-scorebar {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
    margin: 4px 0 8px; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface); box-shadow: var(--shadow);
  }
  .duel-scorebar:has(.duel-score-players) { grid-template-columns: minmax(0, 1fr) auto; }
  .duel-score-players { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
  .duel-score-players > span {
    padding: 4px 7px; border-radius: 8px; background: var(--pill);
    font-size: 11px; font-weight: 800;
  }
  .duel-score-players > span.you { box-shadow: inset 0 0 0 1px var(--accent); }
  .duel-score-players b { margin-left: 4px; color: var(--accent); font-size: 15px; }
  .duel-score-player { min-width: 0; font-size: 13px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .duel-score-player:last-child { text-align: right; }
  .duel-score-player b { color: var(--accent); font-size: 18px; margin: 0 5px; }
  .duel-round-label { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; text-align: center; }
  .duel-round-label strong {
    display: block; margin: 2px 0; color: var(--ink); font-size: 12px;
    letter-spacing: 0.02em; text-transform: none;
  }
  .duel-live-leave {
    margin-top: 3px; padding: 2px 5px; border: 0; color: var(--muted);
    background: transparent; font: inherit; font-size: 9px; text-decoration: underline;
    text-underline-offset: 2px; cursor: pointer;
  }
  .duel-live-leave:hover { color: var(--danger); }
  .duel-wait { display: grid; place-items: center; min-height: 180px; color: var(--muted); text-align: center; }
  .duel-spinner { width: 28px; height: 28px; margin: 0 auto 12px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; }
  .duel-hub { display: grid; gap: 18px; }
  .arena-directory { padding: 0; overflow: hidden; }
  .arena-directory-head {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 17px 20px; border-bottom: 1px solid var(--line);
  }
  .arena-directory-head h2 { margin: 0; }
  .arena-counts { display: flex; gap: 7px; }
  .arena-counts span { padding: 4px 9px; border-radius: 999px; color: var(--muted); background: var(--pill); font-size: 11px; font-weight: 800; }
  .arena-columns { display: grid; grid-template-columns: 1fr 1fr; }
  .arena-column { min-width: 0; padding: 17px 20px 20px; }
  .arena-column + .arena-column { border-left: 1px solid var(--line); }
  .arena-column-title {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 850;
    letter-spacing: 0.08em; text-transform: uppercase;
  }
  .arena-list { display: grid; gap: 8px; }
  .arena-match {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
    align-items: center; min-height: 72px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 12px; background: var(--bg);
  }
  .arena-match-main { min-width: 0; }
  .arena-match-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-weight: 850; }
  .arena-match-meta { margin-top: 3px; color: var(--muted); font-size: 12px; }
  .arena-join { padding: 7px 13px; text-decoration: none; white-space: nowrap; }
  .arena-live-status { text-align: right; color: var(--muted); font-size: 11px; font-weight: 800; }
  .arena-live-status b { display: block; color: var(--ink); font-size: 17px; font-variant-numeric: tabular-nums; }
  .arena-empty {
    display: grid; gap: 3px; min-height: 86px; place-content: center;
    padding: 15px; border: 1px dashed var(--line); border-radius: 12px;
    color: var(--muted); background: var(--surface-soft); text-align: center;
  }
  .arena-empty b { color: var(--ink); font-size: 13px; }
  .arena-empty span { max-width: 220px; font-size: 11px; }
  .personal-score {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px;
    background: var(--pill); text-align: center;
  }
  .personal-score b, .personal-score span { display: block; }
  .personal-score b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .personal-score span { color: var(--muted); font-size: 11px; }
  .personal-score-value { color: var(--accent); font-size: 22px; font-weight: 900; font-variant-numeric: tabular-nums; }
  .rematch-callout {
    display: grid; gap: 3px; margin: 14px 0 4px; padding: 15px 16px;
    border: 2px solid var(--accent);
    border-radius: 12px; color: var(--accent);
    background: color-mix(in srgb, var(--accent) 15%, var(--surface));
    text-align: left;
  }
  .rematch-callout strong { color: var(--ink); font-size: 15px; }
  .rematch-callout span:last-child { color: var(--muted); font-size: 12px; font-weight: 650; }
  .rematch-kicker { font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
  .rematch-callout.waiting { border-width: 1px; border-color: var(--line); animation: none; }
  .btn.rematch-accept {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
  }
  .rematch-toast {
    position: fixed; z-index: 1200; top: max(16px, env(safe-area-inset-top));
    left: 50%; width: min(430px, calc(100% - 28px)); transform: translateX(-50%);
    display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center;
    padding: 14px 15px; border: 2px solid var(--accent); border-radius: 13px;
    background: var(--surface); box-shadow: 0 16px 48px rgba(28, 45, 64, 0.24);
  }
  .rematch-toast b, .rematch-toast span { display: block; }
  .rematch-toast b { color: var(--accent); }
  .rematch-toast span { margin-top: 2px; color: var(--muted); font-size: 12px; }
  @media (prefers-reduced-motion: reduce) {
    .rematch-callout, .btn.rematch-accept { animation: none; }
  }
  .duel-share-group { display: grid; gap: 10px; margin: 14px 0; }
  .duel-share-item > span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
  .duel-share-item .duel-link-row { margin: 0; }
  .watch-shell { display: grid; gap: 16px; }
  .watch-summary {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .watch-summary h2 { margin: 2px 0 4px; font-size: 20px; }
  .watch-summary p { margin: 0; color: var(--muted); font-size: 13px; }
  .watch-live {
    display: inline-flex; align-items: center; gap: 7px; flex: none;
    padding: 6px 10px; border-radius: 999px; color: #075E34; background: #DDF7E9;
    font-size: 11px; font-weight: 850; letter-spacing: 0.05em; text-transform: uppercase;
  }
  .watch-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #1D9B52; }
  :root[data-theme="dark"] .watch-live { color: #8FE3B7; background: #193C2D; }
  .watch-scoreboard {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, auto) minmax(0, 1fr);
    align-items: center; gap: 7px 18px; padding: 15px 20px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .watch-scoreboard-name {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 14px; font-weight: 900;
  }
  .watch-scoreboard-name.left, .watch-score-number.left { text-align: right; }
  .watch-scoreboard-name.right, .watch-score-number.right { text-align: left; }
  .watch-scoreboard-versus {
    color: var(--muted); font-size: 10px; font-weight: 900;
    letter-spacing: 0.14em; text-align: center; text-transform: uppercase;
  }
  .watch-score-number {
    color: var(--ink); font-size: 31px; font-weight: 950; line-height: 1;
    font-variant-numeric: tabular-nums;
    transition: color 180ms ease, transform 180ms ease;
  }
  .watch-score-number.round-winner { color: #11884D; transform: scale(1.06); }
  .watch-score-number.round-loser { color: var(--muted); }
  .watch-score-number.round-tie { color: var(--accent); }
  :root[data-theme="dark"] .watch-score-number.round-winner { color: #6FE1A0; }
  :root[data-theme="dark"] .watch-score-number.round-loser { color: var(--muted); }
  .watch-score-label { display: grid; justify-items: center; line-height: 1.1; text-align: center; }
  .watch-score-label b { color: var(--ink); font-size: 12px; }
  .watch-score-label span { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; }
  .watch-score-divider { grid-column: 1 / -1; height: 1px; margin: 1px 0; background: var(--line); }
  .watch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 14px; }
  .watch-scoreboard-multi { grid-template-columns: minmax(0, 1fr) auto; }
  .watch-multi-scores { display: flex; flex-wrap: wrap; gap: 7px; }
  .watch-multi-scores > span { display: grid; grid-template-columns: auto auto; gap: 1px 7px; padding: 6px 8px; border-radius: 9px; background: var(--pill); font-size: 11px; font-weight: 800; }
  .watch-multi-scores b { color: var(--accent); font-size: 16px; }
  .watch-multi-scores small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; }
  .watch-card {
    min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow);
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }
  .watch-card.watch-round-winner {
    border-color: color-mix(in srgb, #1A9A57 68%, var(--line));
    box-shadow: 0 14px 38px rgba(18, 133, 73, 0.19);
  }
  .watch-card.watch-round-loser {
    border-color: color-mix(in srgb, #D24B55 62%, var(--line));
    box-shadow: 0 14px 38px rgba(183, 48, 60, 0.16);
  }
  .watch-card.watch-round-tie { border-color: var(--accent); }
  .watch-player-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
  .watch-player-name { min-width: 0; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .watch-player-name .status-dot { display: inline-block; margin-right: 2px; }
  .watch-player-meta { color: var(--muted); font-size: 11px; text-align: right; white-space: nowrap; }
  .watch-board-slot { position: relative; overflow: hidden; border-radius: 4px; }
  .watch-board {
    display: grid; width: 100%; aspect-ratio: 1; overflow: hidden;
    border: 5px solid var(--board-line); border-radius: 4px; background: var(--pill);
    pointer-events: none; user-select: none;
    transition: filter 220ms ease, transform 220ms ease;
    animation: watch-board-reveal 240ms ease-out both;
  }
  .watch-cell { position: relative; min-width: 0; min-height: 0; border-style: solid; border-color: var(--board-line); }
  .watch-cell svg { display: block; position: absolute; inset: 0; margin: auto; pointer-events: none; }
  .watch-cell .mark-x { width: 18.3%; height: 18.3%; }
  .watch-cell .mark-x line { stroke: #1D2226; stroke-width: 14; stroke-linecap: round; }
  .watch-cell .crown-svg { width: 46%; height: 46%; fill: #1D2226; }
  .watch-cell.watch-move-pop svg { animation: watch-mark-arrive 150ms ease-out; }
  .watch-round-result .watch-board { filter: blur(8px) saturate(0.68); transform: scale(0.982); }
  .watch-standby {
    position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
    border: 5px solid var(--board-line); border-radius: 4px;
    background: var(--pill); isolation: isolate;
  }
  .watch-standby-grid {
    position: absolute; z-index: 0; inset: -16px;
    background-color: #C8D6DF;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.45) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.45) 1px, transparent 1px),
      linear-gradient(135deg, #B9D7CA 0 25%, #D9C7DE 25% 50%, #BFD2E9 50% 75%, #E7D1B5 75%);
    background-size: 25% 25%, 25% 25%, 100% 100%;
    filter: blur(9px) saturate(.68); transform: scale(1.08);
  }
  :root[data-theme="dark"] .watch-standby-grid {
    background-color: #2B3943;
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
      linear-gradient(135deg, #29473E 0 25%, #44364A 25% 50%, #2D4155 50% 75%, #4A4032 75%);
  }
  .watch-countdown-overlay {
    position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; justify-items: center;
    color: #fff; background: rgba(17, 29, 39, .42);
    text-align: center; text-shadow: 0 2px 18px rgba(0,0,0,.5);
  }
  .watch-countdown-overlay span {
    font-size: 11px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  }
  .watch-countdown-overlay b {
    min-width: 1.2em; font-size: clamp(72px, 11vw, 116px); font-weight: 950;
    line-height: .95; font-variant-numeric: tabular-nums;
  }
  .watch-countdown-overlay b.ticking { animation: watch-countdown-tick 720ms cubic-bezier(.2,.72,.2,1) both; }
  .watch-countdown-overlay small { margin-top: 10px; font-size: 12px; font-weight: 800; }
  .watch-result-overlay {
    position: absolute; z-index: 2; inset: 0; display: grid; place-content: center;
    text-align: center; color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
    backdrop-filter: blur(2px);
    animation: watch-score-arrive 220ms ease-out both;
  }
  .watch-result-overlay.winner {
    background: linear-gradient(145deg, rgba(7, 95, 48, .56), rgba(26, 171, 91, .68));
  }
  .watch-result-overlay.loser {
    background: linear-gradient(145deg, rgba(120, 22, 32, .52), rgba(214, 61, 73, .66));
  }
  .watch-result-overlay.tie { background: rgba(36, 62, 100, .8); }
  .watch-result-overlay span {
    font-size: 11px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase;
  }
  .watch-result-overlay b {
    font-size: clamp(64px, 10vw, 104px); line-height: 0.9; font-variant-numeric: tabular-nums;
  }
  .watch-result-overlay small {
    margin-top: 10px; font-size: 15px; font-weight: 850; letter-spacing: 0.04em;
  }
  @keyframes watch-mark-arrive {
    from { opacity: 0.35; transform: scale(0.58); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes watch-board-reveal {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes watch-countdown-tick {
    0% { opacity: .3; transform: scale(1.08); }
    30% { opacity: 1; transform: scale(1); }
    100% { opacity: .88; transform: scale(.98); }
  }
  @keyframes watch-score-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .watch-empty {
    display: grid; min-height: 220px; place-items: center; padding: 24px;
    border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center;
  }
  .duel-identity {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--pill);
  }
  .duel-identity b, .duel-identity small { display: block; }
  .duel-identity small { color: var(--muted); margin-top: 2px; }
  .duel-rating { font-weight: 900; font-variant-numeric: tabular-nums; }
  .duel-account-rating { flex: none; text-align: right; }
  .duel-account-rating > small {
    margin: 0 0 2px; font-size: 9px; font-weight: 850;
    letter-spacing: .06em; text-transform: uppercase;
  }
  .player-tag, .match-tag {
    display: inline-flex; align-items: center; padding: 2px 7px; border-radius: 999px;
    font-size: 10px; line-height: 1.5; font-weight: 850; letter-spacing: 0.04em;
    text-transform: uppercase; white-space: nowrap;
  }
  .player-tag { color: var(--muted); background: var(--pill); }
  .match-tag.rated { color: #075E34; background: #DDF7E9; }
  .match-tag.unrated { color: var(--muted); background: var(--pill); }
  :root[data-theme="dark"] .match-tag.rated { color: #8FE3B7; background: #193C2D; }

  /* ===== Accounts and ratings ===== */
  .rating-unrated { --rating-color: #000000; }
  .rating-newbie { --rating-color: #666666; }
  .rating-pupil { --rating-color: #008000; }
  .rating-specialist { --rating-color: #00766F; }
  .rating-expert { --rating-color: #1759D1; }
  .rating-candidate-master { --rating-color: #AA00AA; }
  .rating-master { --rating-color: #A34B00; }
  .rating-grandmaster { --rating-color: #C80000; }
  .rating-international-grandmaster { --rating-color: #D10000; }
  .rating-legendary-grandmaster { --rating-color: #B00000; }
  :root[data-theme="dark"] .rating-unrated {
    --rating-color: #F4F7F9;
    --rating-chip: #090C0F;
  }
  :root[data-theme="dark"] .rating-newbie { --rating-color: #B4BBC2; }
  :root[data-theme="dark"] .rating-pupil { --rating-color: #63D16F; }
  :root[data-theme="dark"] .rating-specialist { --rating-color: #43D9D0; }
  :root[data-theme="dark"] .rating-expert { --rating-color: #72A7FF; }
  :root[data-theme="dark"] .rating-candidate-master { --rating-color: #E184E1; }
  :root[data-theme="dark"] .rating-master { --rating-color: #FFB04A; }
  :root[data-theme="dark"] .rating-grandmaster { --rating-color: #FF8A8A; }
  :root[data-theme="dark"] .rating-international-grandmaster { --rating-color: #FF9696; }
  :root[data-theme="dark"] .rating-legendary-grandmaster { --rating-color: #FFAAAA; }
  .rating-handle, .rating-value {
    color: var(--rating-color); font-weight: 900; font-variant-numeric: tabular-nums;
  }
  .rating-legendary-first { color: #000000; }
  :root[data-theme="dark"] .rating-unrated.rating-handle:not(.account-nav),
  :root[data-theme="dark"] .rating-unrated.rating-value {
    padding: 1px 5px; border: 1px solid #414B54; border-radius: 5px;
    color: var(--rating-color); background: var(--rating-chip);
  }
  :root[data-theme="dark"] .rating-legendary-first { color: #FFE5E5; }
  .rating-handle.profile-link { color: var(--rating-color); text-decoration: none; }
  .rating-handle.profile-link:hover {
    color: var(--rating-color); text-decoration: underline; text-decoration-color: currentColor;
  }
  .account-nav.rating-handle,
  .account-nav.rating-handle.active { color: var(--rating-color); }
  .account-grid {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 16px; align-items: start;
  }
  .account-stack { display: grid; gap: 16px; }
  .account-panel {
    background: var(--surface); border: 1px solid var(--line); border-radius: 16px;
    padding: 20px; box-shadow: var(--shadow);
  }
  .account-panel h2 { margin: 0 0 4px; font-size: 19px; }
  .account-panel .panel-sub { margin: 0 0 18px; color: var(--muted); font-size: 13.5px; }
  .auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .auth-form { display: grid; gap: 12px; }
  .auth-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 750; }
  .auth-error { min-height: 1.4em; color: var(--danger); font-size: 13px; font-weight: 650; }
  .account-note {
    margin: 0; padding: 12px 14px; border-left: 3px solid var(--accent);
    border-radius: 0 10px 10px 0; color: var(--muted); background: var(--pill);
    font-size: 13px;
  }
  .profile-hero {
    position: relative; overflow: hidden; display: grid;
    grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center;
    padding: 24px; color: #fff; border: 0;
    background: linear-gradient(125deg, #003B73 0%, #0A66C2 58%, #147A73 100%);
  }
  .profile-hero::after {
    content: ""; position: absolute; right: -42px; bottom: -65px;
    width: 190px; aspect-ratio: 1; border: 16px solid rgba(255,255,255,.72);
    border-radius: 34px; opacity: .1; pointer-events: none; transform: rotate(16deg);
    background:
      repeating-linear-gradient(90deg, transparent 0 36px, rgba(255,255,255,.7) 37px 39px),
      repeating-linear-gradient(0deg, transparent 0 36px, rgba(255,255,255,.7) 37px 39px);
  }
  .profile-name { position: relative; z-index: 1; font-size: 25px; font-weight: 850; }
  .profile-name-line {
    position: relative; z-index: 1; display: flex; align-items: center;
    flex-wrap: wrap; gap: 9px;
  }
  .staff-badge {
    display: inline-flex; align-items: center; gap: 6px; min-height: 25px;
    padding: 4px 9px; border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px; color: #fff; background: rgba(4,20,33,.24);
    font-size: 10px; font-weight: 950; letter-spacing: .09em;
    line-height: 1; text-transform: uppercase; box-shadow: 0 5px 15px rgba(0,0,0,.12);
  }
  .staff-badge::before {
    content: ""; width: 5px; height: 14px; border-radius: 999px;
    background: #73D6FF; box-shadow: 0 0 12px rgba(115,214,255,.7);
  }
  .staff-badge.admin::before { background: #FFD35D; box-shadow: 0 0 12px rgba(255,211,93,.7); }
  .profile-name .rating-handle {
    display: inline-block; max-width: 100%; padding: 2px 9px; border-radius: 9px;
    background: rgba(255, 255, 255, 0.94); box-shadow: 0 5px 18px rgba(0, 0, 0, 0.13);
    overflow-wrap: anywhere;
  }
  .profile-sub { position: relative; z-index: 1; margin-top: 4px; opacity: 0.78; }
  .profile-rating {
    position: relative; z-index: 1; min-width: 116px; padding: 11px 13px;
    border-radius: 13px; color: var(--rating-color);
    background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.13);
    text-align: right;
  }
  .profile-rating b { display: block; font-size: 42px; line-height: 1; font-variant-numeric: tabular-nums; }
  .profile-rating.rating-unrated b { font-size: 21px; line-height: 1.15; }
  .profile-rating span { display: block; margin-top: 5px; font-size: 10px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; opacity: 0.82; }
  .profile-ratings {
    position: relative; z-index: 1; display: grid;
    grid-template-columns: repeat(2, minmax(112px, 1fr)); gap: 8px;
  }
  .profile-ratings .profile-rating {
    width: 100%; min-width: 0; justify-self: stretch; text-align: center;
  }
  .profile-ratings .profile-rating b { font-size: 31px; }
  .profile-ratings .profile-rating.rating-unrated b { font-size: 16px; }
  :root[data-theme="dark"] .profile-name .rating-handle {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--rating-color); background: rgba(10, 18, 25, 0.72);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.2);
  }
  :root[data-theme="dark"] .profile-name .rating-unrated.rating-handle {
    padding: 2px 9px; border-radius: 9px;
    color: var(--rating-color); background: var(--rating-chip);
  }
  :root[data-theme="dark"] .profile-rating {
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--rating-color); background: rgba(10, 18, 25, 0.78);
    box-shadow: 0 9px 26px rgba(0, 0, 0, 0.24);
  }
  :root[data-theme="dark"] .profile-rating.rating-unrated {
    color: var(--rating-color); background: var(--rating-chip);
  }
  .profile-link {
    color: inherit; text-decoration-color: color-mix(in srgb, currentColor 32%, transparent);
    text-decoration-thickness: 1px; text-underline-offset: 3px;
  }
  .profile-link:hover { color: var(--accent); text-decoration-color: currentColor; }
  .profile-hero .profile-link:hover { color: #fff; }
  .profile-hero .rating-handle.profile-link:hover { color: var(--rating-color); }
  .profile-page-actions { display: flex; align-items: center; gap: 8px; }
  .profile-page-actions .btn { text-decoration: none; }
  .profile-page-heading > div:first-child { min-width: 0; }
  #profile-page-title { overflow-wrap: anywhere; }
  .account-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .account-stat { padding: 12px; border-radius: 11px; background: var(--pill); }
  .account-stat b, .account-stat span { display: block; }
  .account-stat b { font-size: 19px; font-variant-numeric: tabular-nums; }
  .account-stat span { color: var(--muted); font-size: 11px; margin-top: 2px; }
  .account-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
  .rating-card { overflow: hidden; }
  .rating-chart-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  }
  .rating-chart-head .panel-sub { margin-bottom: 0; }
  .rating-trend {
    flex: none; padding: 7px 10px; border-radius: 999px;
    font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums;
  }
  .rating-trend.up { color: #075E34; background: #DDF7E9; }
  .rating-trend.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
  .rating-trend.flat { color: var(--muted); background: var(--pill); }
  :root[data-theme="dark"] .rating-trend.up { color: #8FE3B7; background: #193C2D; }
  .rating-metrics {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px;
    margin: 17px 0 12px;
  }
  .rating-metric {
    min-width: 0; padding: 9px 10px; border-radius: 10px; background: var(--pill);
  }
  .rating-metric b, .rating-metric span { display: block; }
  .rating-metric b { font-size: 16px; font-variant-numeric: tabular-nums; }
  .rating-metric .rating-value { color: var(--rating-color); }
  .rating-metric span {
    overflow: hidden; margin-top: 2px; color: var(--muted); font-size: 10px;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .rating-chart-frame {
    overflow: hidden; border: 1px solid var(--line); border-radius: 13px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 70%),
      var(--bg);
  }
  .rating-chart { display: block; width: 100%; height: auto; min-height: 180px; }
  .rating-grid-line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 4 5; }
  .rating-axis-label { fill: var(--muted); font-size: 10px; font-weight: 650; }
  .rating-area { fill: url("#rating-area-gradient"); }
  .rating-line {
    fill: none; stroke: var(--rating-color, var(--accent)); stroke-width: 3; stroke-linecap: round;
    stroke-linejoin: round; vector-effect: non-scaling-stroke;
  }
  .rating-point { fill: var(--surface); stroke: var(--rating-color, var(--accent)); stroke-width: 2; vector-effect: non-scaling-stroke; }
  .rating-point.latest { fill: var(--rating-color, var(--accent)); stroke: var(--surface); stroke-width: 3; }
  .recent-form {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px;
  }
  .recent-form > span {
    color: var(--muted); font-size: 10px; font-weight: 850;
    letter-spacing: 0.06em; text-transform: uppercase;
  }
  .recent-form-list { display: flex; gap: 5px; }
  .form-result {
    width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px;
    font-size: 10px; font-weight: 900;
  }
  .form-result.win { color: #075E34; background: #DDF7E9; }
  .form-result.loss { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
  :root[data-theme="dark"] .form-result.win { color: #8FE3B7; background: #193C2D; }
  .history-list { display: grid; gap: 8px; }
  .history-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 11px;
    align-items: center; padding: 11px 12px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--bg);
  }
  .history-result {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px;
    font-weight: 900;
  }
  .history-result.win { color: #075E34; background: #DDF7E9; }
  .history-result.loss { color: var(--danger); background: color-mix(in srgb, var(--danger) 11%, transparent); }
  .history-result.tie { color: var(--accent); background: var(--pill); }
  :root[data-theme="dark"] .history-result.win { color: #8FE3B7; background: #193C2D; }
  .history-opponent { min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .history-meta { color: var(--muted); font-size: 12px; margin-top: 2px; }
  .history-score { text-align: right; font-weight: 850; font-variant-numeric: tabular-nums; }
  .history-delta { font-size: 12px; margin-top: 2px; }
  .history-delta.up { color: #087F4B; }
  .history-delta.down { color: var(--danger); }
  .rival-list { display: grid; gap: 8px; }
  .rival-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px;
    align-items: center; padding: 11px 12px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--bg);
  }
  .rival-score { color: var(--accent); font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; }
  .leaderboard { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
  .leaderboard th, .leaderboard td { padding: 9px 7px; border-top: 1px solid var(--line); text-align: left; }
  .leaderboard th { border-top: 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
  .leaderboard td:first-child { width: 34px; color: var(--muted); }
  .leaderboard td:nth-child(3), .leaderboard th:nth-child(3) { text-align: right; font-weight: 800; }
  .leaderboard-more {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--line);
  }
  .leaderboard-more span { color: var(--muted); font-size: 11px; font-weight: 700; }
  .leaderboard-more .btn { flex: none; min-height: 34px; padding: 7px 11px; font-size: 11px; }
  @media (pointer: coarse) {
    .leaderboard-more .btn { min-height: 44px; }
  }
  .stats-leaderboard-hub {
    margin-bottom: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 16px;
    background:
      radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 32%),
      var(--surface);
    box-shadow: var(--shadow);
  }
  .stats-leaderboard-hub .panel-heading { align-items: flex-end; margin-bottom: 13px; }
  .stats-leaderboard-hub .panel-heading p { max-width: 470px; margin: 3px 0 0; color: var(--muted); font-size: 12px; }
  .stats-leaderboard-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
  .stats-leaderboard-link {
    position: relative; min-width: 0; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 9px; align-items: center; min-height: 66px; padding: 10px;
    border: 1px solid var(--line); border-radius: 12px; color: var(--ink);
    background: color-mix(in srgb, var(--surface-soft) 88%, transparent); text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
  }
  .stats-leaderboard-link:hover {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: var(--surface-soft); transform: translateY(-2px);
  }
  .stats-leaderboard-link > i {
    width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    color: #fff; background: var(--accent); font-size: 12px; font-style: normal; font-weight: 950;
  }
  .stats-leaderboard-link.rush > i { background: #008F83; }
  .stats-leaderboard-link.daily > i { color: #3B2A07; background: var(--gold); }
  .stats-leaderboard-link b, .stats-leaderboard-link small { display: block; }
  .stats-leaderboard-link b { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
  .stats-leaderboard-link small { margin-top: 2px; color: var(--muted); font-size: 9px; line-height: 1.25; }
  .stats-leaderboard-link > strong { color: var(--muted); font-size: 18px; }
  .leaderboard-page-heading { align-items: center; }
  .leaderboard-page-heading .stats-toolbar { display: flex; gap: 8px; }
  .leaderboard-switcher {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px;
    margin-bottom: 12px; padding: 5px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--surface-soft);
  }
  .leaderboard-switcher a {
    min-width: 0; padding: 9px 10px; border-radius: 9px; color: var(--muted);
    font-size: 11px; font-weight: 850; text-align: center; text-decoration: none;
  }
  .leaderboard-switcher a:hover { color: var(--ink); background: var(--surface); }
  .leaderboard-switcher a.active {
    color: var(--accent-strong); background: var(--surface);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 10%, transparent);
  }
  .full-leaderboard-panel {
    padding: 18px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow);
  }
  .full-leaderboard-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
    margin-bottom: 12px;
  }
  .full-leaderboard-head h2 { margin: 2px 0 0; font-size: 20px; }
  .full-leaderboard-head p { margin: 4px 0 0; color: var(--muted); font-size: 11px; }
  .full-leaderboard-mark {
    flex: none; min-width: 58px; padding: 7px 9px; border-radius: 10px;
    color: var(--accent-strong); background: var(--accent-soft);
    font-size: 10px; font-weight: 900; text-align: center;
  }
  .full-leaderboard-actions {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 40px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .full-leaderboard-summary { color: var(--muted); font-size: 11px; font-weight: 700; }
  .daily-full-leaderboard td:nth-child(3), .daily-full-leaderboard th:nth-child(3) {
    text-align: right; font-weight: 850;
  }
  @media (max-width: 760px) {
    .stats-leaderboard-links { grid-template-columns: 1fr; }
    .stats-leaderboard-link { min-height: 58px; }
  }
  @media (max-width: 520px) {
    .leaderboard-more, .full-leaderboard-actions {
      align-items: stretch; flex-direction: column;
    }
    .leaderboard-more .btn, .full-leaderboard-actions .btn { width: 100%; }
    .stats-leaderboard-hub, .full-leaderboard-panel { padding: 13px 11px; border-radius: 13px; }
    .leaderboard-switcher a { padding-inline: 5px; font-size: 10px; }
    .leaderboard-page-heading .stats-toolbar { width: 100%; }
    .leaderboard-page-heading .stats-toolbar .btn { width: 100%; }
  }
  .empty-state { padding: 28px 14px; color: var(--muted); text-align: center; }
  @keyframes spin { to { transform: rotate(360deg); } }
  @media (max-width: 1040px) {
    .duel-create-layout { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .duel-grid { grid-template-columns: 1fr; }
    .duel-page-guide { display: none; }
    .duel-mode-row { grid-template-columns: 1fr; }
    .duel-ready-row { align-items: stretch; flex-direction: column; }
    .duel-ready-row .btn { width: 100%; }
    .arena-columns { grid-template-columns: 1fr; }
    .arena-column + .arena-column { border-left: 0; border-top: 1px solid var(--line); }
    .watch-summary { align-items: stretch; flex-direction: column; }
    .watch-live { align-self: flex-start; }
    .watch-scoreboard { gap: 7px 10px; padding: 13px 14px; }
    .watch-scoreboard-name { font-size: 12px; }
    .watch-grid { grid-template-columns: 1fr; }
    .account-grid, .auth-grid { grid-template-columns: 1fr; }
    .profile-hero { grid-template-columns: 1fr auto; }
    .account-stats { grid-template-columns: 1fr 1fr; }
    .rating-metrics { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 480px) {
    .duel-form-pair { grid-template-columns: 1fr; }
    .duel-format-pair { grid-template-columns: 1fr; }
    .duel-page-heading { margin-bottom: 14px; }
    .duel-form-head, .duel-create-main { padding-left: 14px; padding-right: 14px; }
    .duel-create-footer { padding-left: 14px; padding-right: 14px; }
    .duel-advanced-grid { grid-template-columns: 1fr; }
    .duel-order-field, .duel-weekday-field, #duel-min-puzzle-field { grid-column: auto; }
    .duel-visibility > span { min-height: 62px; padding: 9px; }
    .watch-scoreboard { grid-template-columns: minmax(0, 1fr) 104px minmax(0, 1fr); }
    .watch-score-number { font-size: 27px; }
    .watch-score-label b { font-size: 11px; }
    .watch-score-label span { font-size: 8px; }
    .profile-hero { grid-template-columns: 1fr; gap: 14px; }
    .profile-ratings { width: 100%; grid-template-columns: 1fr 1fr; }
    .profile-rating { justify-self: stretch; text-align: center; }
    .profile-page-heading { align-items: flex-start; flex-direction: column; }
  }
  @media (prefers-reduced-motion: reduce) {
    .watch-board, .watch-countdown-overlay b.ticking,
    .watch-result-overlay, .watch-cell.watch-move-pop svg { animation: none; }
  }

  /* ===== Random puzzles ===== */
  .random-shell {
    display: grid; grid-template-columns: minmax(250px, 0.85fr) minmax(320px, 1.15fr);
    gap: 18px; align-items: stretch;
  }
  .random-visual {
    position: relative; overflow: hidden; min-height: 430px;
    border-radius: 24px; border: 1px solid color-mix(in srgb, var(--teal) 30%, var(--line));
    background:
      linear-gradient(135deg, rgba(255,255,255,0.12), transparent 42%),
      linear-gradient(145deg, #004B5A, #087C75 54%, #0A66C2);
    box-shadow: var(--shadow-lg);
  }
  .random-visual::before {
    content: ""; position: absolute; inset: 30px;
    border: 5px solid rgba(255,255,255,0.88); border-radius: 8px;
    background:
      linear-gradient(90deg, transparent 49%, rgba(255,255,255,0.26) 50%, transparent 51%),
      linear-gradient(transparent 49%, rgba(255,255,255,0.26) 50%, transparent 51%);
    background-size: 25% 25%;
    transform: rotate(-4deg);
    box-shadow: 0 22px 50px rgba(0,0,0,0.2);
  }
  .random-visual .random-crown {
    position: absolute; inset: 0; display: grid; place-items: center;
    color: #FFD46A;
    filter: drop-shadow(0 12px 20px rgba(0,0,0,0.28));
  }
  .random-visual .random-crown svg {
    width: clamp(78px, 12vw, 132px); height: auto; fill: currentColor;
  }
  .random-panel {
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(22px, 4vw, 38px); border: 1px solid var(--line);
    border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .random-panel h2 { margin: 0 0 24px; font-size: 23px; letter-spacing: -0.025em; }
  .random-field { margin: 0 0 22px; padding: 0; border: 0; }
  .random-field legend { margin-bottom: 9px; font-size: 13px; font-weight: 850; }
  .random-size-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .random-difficulty-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .random-choice { position: relative; }
  .random-choice input { position: absolute; opacity: 0; pointer-events: none; }
  .random-choice span {
    display: grid; min-height: 43px; place-items: center; padding: 8px;
    border: 1px solid var(--line); border-radius: 11px;
    color: var(--muted); background: var(--surface-soft); font-weight: 800;
  }
  .random-choice input:checked + span {
    color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  .random-generate { width: 100%; min-height: 44px; }
  .random-status { min-height: 20px; margin-top: 10px; color: var(--muted); font-size: 12px; text-align: center; }
  .daily-feature {
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
    gap: 14px; margin-bottom: 22px;
  }
  .daily-hero, .daily-standings {
    position: relative; overflow: hidden; min-width: 0;
    border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-sm);
  }
  .daily-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px; align-items: center;
    padding: clamp(22px, 4vw, 34px); color: #fff;
    background:
      radial-gradient(circle at 86% 15%, rgba(255, 212, 106, 0.34) 0 10%, transparent 10.5%),
      linear-gradient(125deg, #003B73 0%, #0A66C2 55%, #087C75 100%);
  }
  .daily-hero::after {
    content: ""; position: absolute; right: -48px; bottom: -76px;
    width: 216px; aspect-ratio: 1; border: 18px solid rgba(255,255,255,.72);
    border-radius: 38px; opacity: .1; pointer-events: none; transform: rotate(16deg);
    background:
      repeating-linear-gradient(90deg, transparent 0 41px, rgba(255,255,255,.7) 42px 44px),
      repeating-linear-gradient(0deg, transparent 0 41px, rgba(255,255,255,.7) 42px 44px);
  }
  .daily-copy, .daily-action { position: relative; z-index: 1; }
  .daily-kicker {
    margin-bottom: 8px; color: #BDE8FF; font-size: 11px; font-weight: 900;
    letter-spacing: 0.13em; text-transform: uppercase;
  }
  .daily-hero h2 { margin: 0; font-size: clamp(25px, 3.2vw, 38px); letter-spacing: -0.04em; }
  .daily-hero p { max-width: 530px; margin: 8px 0 0; color: rgba(255,255,255,0.8); font-size: 13.5px; }
  .daily-code {
    display: inline-flex; gap: 7px; align-items: center; margin-top: 16px;
    padding: 6px 10px; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px;
    background: rgba(0,0,0,0.12); color: rgba(255,255,255,0.86);
    font: 750 11px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  .daily-action {
    display: grid; justify-items: center; gap: 8px; min-width: 120px;
  }
  .daily-action-buttons {
    width: 100%; display: grid; justify-items: stretch; gap: 8px;
  }
  .daily-action-buttons > :is(a, button) { width: 100%; min-width: 118px; }
  .daily-action .btn {
    min-width: 118px; color: #17324B; background: #FFD46A; text-decoration: none;
    box-shadow: 0 8px 22px rgba(0,0,0,0.18);
  }
  .daily-action .daily-share {
    color: #fff; border-color: rgba(255,255,255,.68);
    background: rgba(5,31,50,.2); box-shadow: 0 8px 22px rgba(0,0,0,.12);
  }
  .daily-action small { color: rgba(255,255,255,0.72); font-size: 10.5px; }
  .daily-standings { padding: 18px; background: var(--surface); }
  .daily-standings-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
  .daily-standings h3 { margin: 0; font-size: 17px; }
  .daily-standings-head span { color: var(--muted); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: 0.08em; }
  .daily-leaderboard { display: grid; gap: 6px; margin-top: 13px; }
  .daily-rank {
    display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; align-items: center;
    min-height: 34px; padding: 5px 7px; border-radius: 9px; background: var(--surface-soft);
    font-size: 12px;
  }
  .daily-rank > b:first-child { color: var(--muted); text-align: center; }
  .daily-rank .profile-link { overflow: hidden; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
  .daily-rank time { font-weight: 850; font-variant-numeric: tabular-nums; }
  .daily-empty { padding: 20px 8px; color: var(--muted); font-size: 12px; text-align: center; }
  .random-section-label {
    margin: 0 0 10px; color: var(--muted); font-size: 11px; font-weight: 900;
    letter-spacing: 0.12em; text-transform: uppercase;
  }
  @media (max-width: 760px) {
    .daily-feature { grid-template-columns: 1fr; }
    .daily-hero { grid-template-columns: 1fr; }
    .daily-action { justify-items: start; }
    .random-shell { grid-template-columns: 1fr; }
    .random-visual { min-height: 230px; }
    .random-visual::before { inset: 22px 42px; }
    .random-panel { border-radius: 18px; }
  }
  @media (max-width: 560px) {
    .random-difficulty-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* ===== Game screen (LinkedIn-faithful) ===== */
  .game-wrap { max-width: 560px; margin: 0 auto; padding: 0 14px 50px; }
  .g-header {
    display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px 40px; align-items: center;
    padding: 10px 0 6px;
  }
  .g-header .icon-btn { background: none; border: none; font-size: 20px; color: var(--ink); padding: 6px; }
  .g-title { text-align: center; font-weight: 800; font-size: 19px; display: flex; align-items: center; justify-content: center; gap: 8px; }
  .g-title .logo { width: 22px; height: 22px; }
  .g-subhead { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 14px; }
  .g-timer { font-weight: 700; font-size: 17px; display: flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
  .g-diff {
    background: var(--pill); color: var(--muted); font-weight: 700; font-size: 12px;
    padding: 5px 12px; border-radius: 999px; letter-spacing: 0.04em;
  }
  .pill-btn {
    background: var(--pill); border: none; border-radius: 999px;
    padding: 8px 22px; font-weight: 700; color: var(--ink);
  }
  .pill-btn:disabled { color: var(--muted); opacity: 0.5; cursor: default; }
  .board-holder { position: relative; isolation: isolate; }
  .board-holder.launch-visible .board { visibility: hidden; }
  .board {
    display: grid; width: 100%; aspect-ratio: 1;
    border: 6px solid var(--board-line); border-radius: 4px;
    touch-action: manipulation;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none; overscroll-behavior: auto;
    position: relative; overflow: clip;
  }
  .cell {
    position: relative; border-style: solid; border-color: var(--board-line);
    min-width: 0; min-height: 0;
    touch-action: manipulation;
  }
  body[data-game="zip"] .board,
  body[data-game="zip"] .cell,
  body[data-game="patches"] .board,
  body[data-game="patches"] .cell { touch-action: none; }
  body[data-game="queens"] .board,
  body[data-game="queens"] .cell { touch-action: none; }
  body[data-game="queens"] .board-holder { touch-action: none; }
  body[data-game="tango"] .board,
  body[data-game="tango"] .cell,
  body[data-game="tango"] .board-holder { touch-action: none; }
  .cell svg { display: block; position: absolute; inset: 0; margin: auto; pointer-events: none; }
  .cell .mark-x { width: 18.3%; height: 18.3%; }
  .cell .mark-x line { stroke: #1D2226; stroke-width: 14; stroke-linecap: round; }
  .cell .crown-svg { width: 46%; height: 46%; fill: #1D2226; }
  .cell.gold .crown-svg { width: 57%; height: 57%; fill: url(#crown-gold); stroke: #994A00; stroke-width: 4.5; animation: pulse 0.56s ease-in-out 3; }
  @keyframes no-guess-rise {
    0% { opacity: 0; transform: translate(-50%, 3px) scale(.94); }
    12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    72% { opacity: 1; transform: translate(-50%, -3px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -7px) scale(.98); }
  }
  @media (prefers-reduced-motion: reduce) {
    .watch-penalty-pop { animation-name: no-guess-fade; }
    .watch-penalty-total.is-fresh { animation: none; }
  }
  @keyframes no-guess-fade {
    0%, 82% { opacity: 1; }
    100% { opacity: 0; }
  }
  @keyframes penalty-total-notice {
    0% { transform: scale(.96); box-shadow: none; }
    14% { transform: scale(1.04); box-shadow: 0 0 0 4px color-mix(in srgb, var(--danger) 12%, transparent); }
    38%, 100% { transform: none; box-shadow: none; }
  }
  .board-holder.duel-finish-pending .board {
    filter: grayscale(.88) saturate(.2) brightness(.82);
    pointer-events: none;
  }
  .board-holder.duel-finish-pending .cell.gold .crown-svg {
    fill: #1D2226; stroke: none; animation: none;
  }
  .duel-finish-pending-overlay {
    position: absolute; z-index: 18; inset: 0; display: grid; place-content: center;
    justify-items: center; gap: 11px; padding: 16px; border-radius: 4px;
    color: #F7FAFC; background: rgba(32, 42, 50, .48);
    text-align: center; pointer-events: none; backdrop-filter: blur(1.5px);
  }
  .duel-finish-pending-overlay > span {
    font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  }
  .duel-finish-pending-overlay > b {
    font-size: clamp(34px, 8vw, 54px); font-weight: 950; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .duel-finish-breakdown {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    width: min(380px, calc(100vw - 56px)); max-width: 100%; overflow: hidden;
    border: 1px solid rgba(255,255,255,.26); border-radius: 12px;
    background: rgba(13, 28, 38, .64); box-shadow: 0 10px 28px rgba(0,0,0,.16);
  }
  .duel-finish-breakdown > div {
    min-width: 0; display: grid; gap: 4px; padding: 10px 3px;
  }
  .duel-finish-breakdown > div + div { border-left: 1px solid rgba(255,255,255,.18); }
  .duel-finish-breakdown small {
    color: rgba(255,255,255,.68); font-size: 8px; font-weight: 900;
    letter-spacing: .08em; line-height: 1; text-transform: uppercase;
  }
  .duel-finish-breakdown b {
    min-width: 0; overflow: hidden; color: rgba(255,255,255,.9);
    font-size: clamp(14px, 3.6vw, 23px); font-weight: 950; line-height: 1;
    font-variant-numeric: tabular-nums; letter-spacing: -.045em;
  }
  .duel-finish-breakdown .final b { color: #FFF; }
  .duel-finish-pending-overlay > small {
    max-width: 90%; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 800;
  }
  .duel-scoreline {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 7px;
    margin: 10px 0;
  }
  .duel-scoreline > span {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px;
    border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft);
  }
  .duel-scoreline > i { align-self: center; color: var(--muted); font-size: 16px; font-style: normal; font-weight: 900; }
  .duel-scoreline b { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
  .duel-scoreline strong { color: var(--accent); font-size: 18px; font-variant-numeric: tabular-nums; }
  .modal.duel-result-modal { width: min(100%, 640px); max-width: 640px; }
  .duel-progress-chart {
    width: 100%; min-width: 0; margin: 20px 0; padding: 18px;
    border: 1px solid var(--line); border-radius: 4px;
    background: var(--surface); text-align: left;
  }
  .duel-progress-chart-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
  .duel-progress-chart-head > div { min-width: 0; }
  .duel-progress-chart-head > div > b { display: block; margin-top: 4px; color: var(--ink); font-size: 18px; font-weight: 650; line-height: 1.25; }
  .duel-progress-kicker { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
  .duel-progress-duration { flex: 0 0 auto; text-align: right; }
  .duel-progress-duration small, .duel-progress-duration b { display: block; }
  .duel-progress-duration small { color: var(--muted); font-size: 11px; }
  .duel-progress-duration b { margin-top: 4px; color: var(--ink); font-size: 16px; font-weight: 650; font-variant-numeric: tabular-nums; }
  .duel-progress-axis-labels { display: flex; justify-content: space-between; gap: 8px; margin-top: 20px; color: var(--muted); font-size: 11px; }
  .duel-progress-plot { width: 100%; min-width: 0; container-type: inline-size; }
  .duel-progress-chart svg { display: block; width: 100%; height: auto; margin-top: 4px; overflow: visible; }
  .duel-progress-chart svg .axis { stroke: var(--line); stroke-width: 1; }
  .duel-progress-chart svg .duel-progress-grid line { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 6; }
  .duel-progress-chart svg .duel-progress-finish-line { stroke: var(--line); stroke-width: 1; }
  .duel-progress-chart svg .duel-progress-time-tick line { stroke: var(--line); stroke-width: 1; }
  .duel-progress-chart svg .duel-progress-line { fill: none; stroke: var(--progress-color); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
  .duel-progress-chart svg .duel-progress-point, .duel-progress-chart svg .duel-progress-endpoint { fill: var(--progress-color); stroke: var(--surface); stroke-width: 1; }
  .duel-progress-chart svg text { fill: var(--muted); font-size: clamp(14px, calc(44px - 5cqw), 32px); font-weight: 500; font-variant-numeric: tabular-nums; }
  .duel-progress-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .duel-progress-legend > span { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .duel-progress-legend > span > span { min-width: 0; }
  .duel-progress-legend b, .duel-progress-legend small { display: block; }
  .duel-progress-legend b { color: var(--ink); font-size: 12px; font-weight: 600; overflow-wrap: anywhere; line-height: 1.4; }
  .duel-progress-legend small { margin-top: 2px; color: var(--muted); font-size: 11px; }
  .duel-progress-legend i { flex: 0 0 22px; width: 22px; height: 0; border-top: 3px solid var(--progress-color); }
  .duel-progress-legend i.dashed { border-top-style: dashed; }
  .duel-progress-chart .duel-progress-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
  @media (max-width: 520px) {
    .duel-progress-chart { padding: 12px; }
    .duel-progress-chart-head { gap: 10px; }
    .duel-progress-chart-head > div > b { font-size: 16px; }
    .duel-progress-legend { gap: 10px; }
  }
  .duel-result-modal .modal-card { max-height: min(92dvh, 920px); overflow-y: auto; }
  .cell.tango-cell { background: var(--surface); border: 1px solid var(--board-line); }
  .cell.tango-cell.tango-given {
    background: color-mix(in srgb, var(--pill) 76%, var(--surface));
    cursor: default;
  }
  .tango-symbol {
    width: 57%; height: 57%; z-index: 1; overflow: visible;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
  }
  .tango-symbol.sun { color: #E79A25; }
  .tango-symbol.moon { color: #4979C7; }
  :root[data-theme="dark"] .tango-symbol.sun { color: #FFC35B; }
  :root[data-theme="dark"] .tango-symbol.moon { color: #8AB5FF; }
  .tango-relation {
    position: absolute; z-index: 5; display: grid; place-items: center;
    width: clamp(15px, 32%, 25px); height: clamp(15px, 32%, 25px);
    border: 1px solid color-mix(in srgb, var(--board-line) 38%, transparent);
    border-radius: 999px; color: var(--ink); background: var(--surface);
    font-size: clamp(9px, 2.3vw, 15px); font-weight: 950; line-height: 1;
    pointer-events: none;
  }
  .tango-relation.horizontal { top: 50%; right: 0; transform: translate(50%, -50%); }
  .tango-relation.vertical { left: 50%; bottom: 0; transform: translate(-50%, 50%); }
  .watch-cell .tango-relation { width: 21%; height: 21%; min-width: 11px; min-height: 11px; font-size: clamp(7px, 1.1vw, 12px); }
  @keyframes pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.22); } }
  .cell.clash::after {
    content: ""; position: absolute; inset: 0;
    background: repeating-linear-gradient(45deg, rgba(204,16,22,0.38) 0 6px, transparent 6px 12px);
    pointer-events: none;
  }
  .cell.hint-region::after {
    content: ""; position: absolute; inset: 0;
    background: rgba(10,102,194,0.22); animation: hintblink 0.7s ease-in-out 4; pointer-events: none;
  }
  .cell.hint-target::after {
    content: ""; position: absolute; inset: 8%;
    border: max(2px, 0.045em) solid var(--accent); border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    animation: hintblink 0.7s ease-in-out 4; pointer-events: none;
  }
  .cell.hint-cross::after {
    content: "×"; position: absolute; inset: 7%; display: grid; place-items: center;
    border: 2px solid var(--accent); border-radius: 7px;
    color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent);
    font-size: clamp(18px, 4.8vw, 34px); font-weight: 900; line-height: 1;
    animation: hintblink 0.7s ease-in-out 4; pointer-events: none;
  }
  .cell.hint-source {
    box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--gold) 78%, #8A5B00);
  }
  .cell.hint-error::after {
    content: ""; position: absolute; inset: 0;
    border: max(2px, 0.045em) solid var(--danger);
    background: color-mix(in srgb, var(--danger) 18%, transparent);
    animation: hintblink 0.7s ease-in-out 4; pointer-events: none;
  }
  @keyframes hintblink { 0%,100% { opacity: 1; } 50% { opacity: 0.15; } }
  .mark-pop { animation: pop 0.08s ease-out; }
  @keyframes pop { from { transform: scale(0.4); } to { transform: scale(1); } }
  .shine { position: absolute; inset: 0; pointer-events: none; overflow: hidden; opacity: 0; }
  .shine::after {
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 60%;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.75), transparent);
  }
  .shine.run { opacity: 1; }
  .shine.run::after { animation: shine 0.45s linear 1; }
  @keyframes shine { from { transform: translateY(0); } to { transform: translateY(-267%); } }
  .g-actions { display: flex; justify-content: space-between; gap: 12px; margin: 16px 0 8px; }
  .g-actions .pill-btn { flex: 1; }
  .daily-run-strip {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px;
    margin: 0 3px 10px; padding: 9px 12px; border: 1px solid var(--line);
    border-radius: 12px; color: var(--muted); background: var(--surface);
    box-shadow: var(--shadow-sm); font-size: 12px; font-weight: 800;
  }
  .daily-run-strip > span {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .daily-run-strip strong { color: var(--accent-strong); font-variant-numeric: tabular-nums; }
  .daily-mix-skip {
    min-width: 122px; min-height: 34px; padding: 6px 11px;
    border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--line));
    border-radius: 9px; color: var(--danger); background: var(--surface);
    font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  }
  .daily-mix-skip:disabled {
    border-color: var(--line); color: var(--muted); cursor: default; opacity: .72;
  }
  .daily-viewer-nav {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px; align-items: center; margin: 12px 0 8px;
  }
  .daily-viewer-nav .pill-btn { min-width: 0; padding-inline: 14px; }
  .daily-viewer-nav .pill-btn:last-child { justify-self: stretch; }
  .daily-viewer-status {
    min-width: 86px; color: var(--muted); font-size: 12px; font-weight: 850;
    text-align: center; white-space: nowrap;
  }
  .board[aria-readonly="true"] .cell { cursor: default; }
  .nudge {
    background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
    padding: 11px 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink); margin: 10px 0; box-shadow: var(--shadow);
  }
  .nudge[data-kind="hint"] { border-color: color-mix(in srgb, var(--accent) 48%, var(--line)); }
  .nudge[data-kind="error"] { border-color: color-mix(in srgb, var(--danger) 52%, var(--line)); }
  .hint-reason-label {
    display: block; margin-bottom: 4px; color: var(--accent-strong);
    font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  }
  .howto {
    overflow: hidden; margin-top: 16px; border: 1px solid var(--line);
    border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .howto summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    min-height: 66px; padding: 11px 14px; list-style: none; cursor: pointer;
    user-select: none;
  }
  .howto summary::-webkit-details-marker { display: none; }
  .howto-summary-main { display: flex; align-items: center; gap: 11px; min-width: 0; }
  .howto-summary-icon {
    width: 40px; height: 40px; flex: none; display: grid; place-items: center;
    border-radius: 11px; color: #fff; background: var(--accent);
    box-shadow: 0 7px 16px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .howto-summary-icon :is(svg, img) {
    width: 24px; height: 24px; display: block; object-fit: contain;
  }
  .howto-summary-copy { min-width: 0; display: grid; gap: 2px; }
  .howto-summary-copy strong { color: var(--ink); font-size: 14px; font-weight: 850; }
  .howto-summary-copy small {
    overflow: hidden; color: var(--muted); font-size: 11px; font-weight: 650;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .howto-chevron {
    width: 28px; height: 28px; flex: none; display: grid; place-items: center;
    border: 1px solid var(--line); border-radius: 9px; color: var(--muted);
    transition: transform 160ms ease;
  }
  .howto-chevron svg {
    width: 14px; height: 14px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  }
  .howto[open] .howto-chevron { transform: rotate(180deg); }
  .howto-content {
    display: grid; grid-template-columns: minmax(150px, .8fr) minmax(0, 1.2fr);
    gap: 16px; padding: 16px; border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
  }
  .howto-modal-content {
    margin-top: 14px; border: 1px solid var(--line); border-radius: 15px;
  }
  .howto-demo {
    min-height: 150px; display: grid; place-items: center; padding: 15px;
    overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
    border-radius: 14px; background:
      radial-gradient(circle at 76% 18%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42%),
      var(--surface);
  }
  .howto-rules {
    margin: 0; padding: 0; list-style: none; display: grid; align-content: center; gap: 10px;
  }
  .howto-rule {
    display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px;
    align-items: start; margin: 0;
  }
  .howto-rule-number {
    width: 28px; height: 28px; display: grid; place-items: center;
    border-radius: 9px; color: var(--accent-strong); background: var(--accent-soft);
    font-size: 11px; font-weight: 900;
  }
  .howto-rule-copy { min-width: 0; display: grid; gap: 2px; }
  .howto-rule-copy strong { color: var(--ink); font-size: 12px; line-height: 1.25; }
  .howto-rule-copy span { color: var(--muted); font-size: 11.5px; line-height: 1.42; }
  .guide-grid { display: grid; overflow: hidden; border: 2px solid var(--ink); background: var(--line); }
  .guide-cell { position: relative; display: grid; place-items: center; background: var(--surface); }
  .guide-queens-grid {
    width: min(100%, 138px); aspect-ratio: 1; grid-template-columns: repeat(4, 1fr); gap: 1px;
    border-radius: 7px;
  }
  .guide-queens-grid .guide-cell:nth-child(-n+2),
  .guide-queens-grid .guide-cell:nth-child(n+5):nth-child(-n+6) { background: #F4C998; }
  .guide-queens-grid .guide-cell:nth-child(n+3):nth-child(-n+4),
  .guide-queens-grid .guide-cell:nth-child(n+7):nth-child(-n+8) { background: #AFCFF6; }
  .guide-queens-grid .guide-cell:nth-child(n+9):nth-child(-n+10),
  .guide-queens-grid .guide-cell:nth-child(n+13):nth-child(-n+14) { background: #B8DDA8; }
  .guide-queens-grid .guide-cell:nth-child(n+11):nth-child(-n+12),
  .guide-queens-grid .guide-cell:nth-child(n+15) { background: #C9B2E8; }
  .guide-queen { width: 68%; color: #142530; filter: drop-shadow(0 2px 1px rgba(255,255,255,.42)); }
  .guide-queen svg { width: 100%; display: block; fill: currentColor; }
  .guide-x::before, .guide-x::after {
    content: ""; position: absolute; width: 46%; height: 2px; border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 72%, transparent); transform: rotate(45deg);
  }
  .guide-x::after { transform: rotate(-45deg); }
  .guide-tango-grid {
    width: min(100%, 162px); grid-template-columns: repeat(6, 1fr); gap: 1px;
    border-color: var(--line); border-radius: 7px;
  }
  .guide-tango-grid .guide-cell { aspect-ratio: 1; }
  .guide-tango-symbol { width: 64%; height: 64%; display: block; }
  .guide-tango-symbol.sun { border: 3px solid #D97D22; border-radius: 50%; background: #FFBE45; }
  .guide-tango-symbol.moon {
    border-radius: 50%; background: #3C69A8;
    box-shadow: inset -7px 1px 0 1px var(--surface);
  }
  .guide-relation {
    position: absolute; right: -7px; z-index: 2; width: 13px; height: 13px;
    display: grid; place-items: center; color: var(--ink); background: var(--surface);
    font-size: 10px; font-weight: 900;
  }
  .guide-zip-svg { width: min(100%, 175px); height: auto; overflow: visible; }
  .guide-zip-grid { fill: none; stroke: var(--line); stroke-width: 1; }
  .guide-zip-route {
    fill: none; stroke: color-mix(in srgb, var(--ink) 84%, var(--accent)); stroke-width: 8;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .guide-zip-checkpoint { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
  .guide-zip-number { fill: var(--ink); font: 900 12px sans-serif; text-anchor: middle; dominant-baseline: central; }
  .guide-patches-grid {
    position: relative; width: min(100%, 150px); aspect-ratio: 4 / 3;
    border: 2px solid var(--ink); border-radius: 7px; background-image:
      linear-gradient(to right, var(--line) 1px, transparent 1px),
      linear-gradient(to bottom, var(--line) 1px, transparent 1px);
    background-size: 25% 33.333%; background-color: var(--surface);
  }
  .guide-patch { position: absolute; display: grid; place-items: center; border: 3px solid; border-radius: 8px; font-size: 13px; font-weight: 900; }
  .guide-patch.one { inset: 4px 50% 50% 4px; color: #9C372C; border-color: #E86051; background: rgba(232,96,81,.25); }
  .guide-patch.two { inset: 4px 4px 50% 50%; color: #785307; border-color: #E5A21B; background: rgba(229,162,27,.24); }
  .guide-patch.three { inset: 50% 50% 4px 4px; color: #145B56; border-color: #2BA89E; background: rgba(43,168,158,.24); }
  .guide-patch.four { inset: 50% 4px 4px 50%; color: #3A598D; border-color: #7299DA; background: rgba(114,153,218,.24); }
  .guide-sudoku-grid {
    width: min(100%, 142px); aspect-ratio: 1; grid-template-columns: repeat(4, 1fr);
    gap: 1px; border-radius: 7px;
  }
  .guide-sudoku-grid .guide-cell { color: var(--ink); font-size: 17px; font-weight: 800; }
  .guide-sudoku-grid .guide-cell:nth-child(2n) { border-right: 1px solid var(--ink); }
  .guide-sudoku-grid .guide-cell:nth-child(4n) { border-right: 0; }
  .guide-sudoku-grid .guide-cell:nth-child(n+5):nth-child(-n+8) { border-bottom: 1px solid var(--ink); }
  .guide-akari-grid, .guide-mines-grid {
    width: min(100%, 160px); grid-template-columns: repeat(5, 1fr); gap: 1px;
    border-color: #243B4B; border-radius: 7px;
  }
  .guide-akari-grid .guide-cell, .guide-mines-grid .guide-cell { aspect-ratio: 1; }
  .guide-akari-grid .lit { background: #58C9EA; box-shadow: inset 0 0 14px rgba(255,255,255,.48); }
  .guide-akari-grid .wall { color: #fff; background: #11181D; font-weight: 850; }
  .guide-bulb { width: 43%; aspect-ratio: 1; display: block; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px rgba(255,255,255,.68); }
  .guide-mines-grid .covered { background: color-mix(in srgb, var(--accent) 28%, var(--surface)); }
  .guide-mines-grid .revealed { color: var(--accent-strong); background: var(--surface-soft); font-size: 15px; font-weight: 900; }
  .guide-flag { width: 50%; height: 58%; position: relative; display: block; border-left: 2px solid var(--ink); }
  .guide-flag::before { content: ""; position: absolute; top: 0; left: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid var(--danger); }
  .guide-wordle { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, 190px); }
  .guide-wordle span {
    aspect-ratio: 1; display: grid; place-items: center; border: 2px solid var(--line);
    border-radius: 5px; color: #fff; background: #70767C; font-size: 18px; font-weight: 900;
  }
  .guide-wordle .present { background: #B59F3B; border-color: #B59F3B; }
  .guide-wordle .correct { background: #538D4E; border-color: #538D4E; }
  .guide-nonogram { width: min(100%, 188px); display: grid; grid-template-columns: auto 1fr; gap: 9px; align-items: center; }
  .guide-nonogram-clue { color: var(--ink); font-size: 16px; font-weight: 900; letter-spacing: .12em; }
  .guide-nonogram-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2px; }
  .guide-nonogram-row span {
    position: relative; aspect-ratio: 1; border: 1px solid var(--line); border-radius: 3px;
    background: var(--surface);
  }
  .guide-nonogram-row .filled { background: var(--ink); border-color: var(--ink); }
  .guide-nonogram-row .cross::before, .guide-nonogram-row .cross::after {
    content: ""; position: absolute; left: 20%; top: calc(50% - 1px); width: 60%; height: 2px;
    border-radius: 2px; background: var(--muted); transform: rotate(45deg);
  }
  .guide-nonogram-row .cross::after { transform: rotate(-45deg); }
  /* launch overlay */
  .launch {
    position: absolute; inset: 0; z-index: 30; border-radius: 4px;
    background: var(--surface); border: 4px solid var(--board-line);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  }
  .launch .big-crown { display: grid; place-items: center; min-height: 58px; }
  .launch-crown { width: 58px; height: 51px; fill: var(--gold); filter: drop-shadow(0 8px 12px rgba(154,79,0,0.18)); }
  .launch .l-num { font-weight: 800; font-size: 21px; }
  .launch .l-date { color: var(--muted); }
  .launch .start-btn { background: var(--accent); color: #fff; border: none; border-radius: 999px; padding: 12px 34px; font-weight: 700; font-size: 16px; }
  /* modals */
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; }
  .modal { background: var(--surface); border-radius: 14px; padding: 22px 24px; max-width: 420px; width: 100%; box-shadow: 0 12px 40px rgba(0,0,0,0.3); position: relative; }
  .modal h3 { margin: 0 0 10px; font-size: 18px; }
  .modal .close-x { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 18px; color: var(--muted); }
  .modal.howto-modal { max-width: 560px; }
  .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
  .btn-outline { background: none; border: 1.5px solid var(--accent); color: var(--accent); border-radius: 999px; padding: 8px 20px; font-weight: 700; }
  .toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; gap: 14px; }
  .toggle-row .lbl { font-weight: 600; }
  .toggle-row .desc { color: var(--muted); font-size: 12.5px; }
  .switch { position: relative; width: 42px; height: 24px; flex: none; }
  .switch input { opacity: 0; width: 100%; height: 100%; position: absolute; margin: 0; cursor: pointer; }
  .switch .knob { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background 0.15s; pointer-events: none; }
  .switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left 0.15s; }
  .switch input:checked + .knob { background: var(--accent); }
  .switch input:checked + .knob::after { left: 21px; }
  .setup-rule-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 12px 14px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--surface-soft);
  }
  .setup-rule-toggle > span:first-child { min-width: 0; display: grid; gap: 2px; }
  .setup-rule-toggle b { color: var(--ink); font-size: 14px; }
  .setup-rule-toggle small { color: var(--muted); font-size: 11px; line-height: 1.35; }
  .setup-rule-toggle.setup-rule-choice { flex-wrap: wrap; }
  .setup-rule-select {
    flex: 0 1 210px; width: min(100%, 210px); min-width: 0; margin-left: auto;
  }
  /* results */
  .results { text-align: center; }
  .results .r-time { font-size: 46px; font-weight: 800; font-variant-numeric: tabular-nums; margin: 6px 0 0; }
  .results .r-sub { color: var(--muted); margin-bottom: 6px; }
  .results .r-pill { display: inline-block; background: var(--pill); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 13px; margin: 4px 3px; }
  .results .r-pill.gold { background: color-mix(in srgb, var(--gold) 22%, transparent); color: var(--gold-dark); }
  :root[data-theme="dark"] .results .r-pill.gold { color: var(--gold); }
  .results .modal-actions { justify-content: center; }
  .practice-results { padding-top: 4px; }
  .practice-results .result-share {
    position: absolute; top: 14px; right: 14px;
    width: auto; min-width: 0; padding: 6px 11px;
    font-size: 12px; line-height: 1.2; white-space: nowrap;
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .practice-results .modal-actions {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .practice-results .modal-actions > button {
    width: 100%; min-width: 0; padding-inline: 12px; white-space: normal;
  }
  .practice-results .modal-actions #res-next { grid-column: 1 / -1; }
  .practice-results .daily-results-actions {
    display: flex; flex-direction: column; align-items: center;
  }
  .practice-results .daily-results-actions > button {
    width: min(100%, 300px); flex: 0 0 auto;
  }
  body[data-game="queens"] .daily-results .result-icon > svg {
    color: var(--gold); fill: var(--gold);
    filter: drop-shadow(0 7px 10px color-mix(in srgb, var(--gold) 24%, transparent));
  }
  .result-community {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center;
    margin: 13px 0 2px; padding: 12px 13px; border: 1px solid var(--line);
    border-radius: 12px; background: var(--surface-soft); text-align: left;
  }
  .result-community:empty { display: none; }
  .result-community strong, .result-community span { display: block; }
  .result-community strong { color: var(--accent); font-size: 17px; }
  .result-community span { margin-top: 2px; color: var(--muted); font-size: 11px; }
  .result-community .community-average { color: var(--ink); font-size: 15px; font-weight: 850; font-variant-numeric: tabular-nums; text-align: right; }
  .result-community .community-average small { display: block; color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
  #confetti-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 70; }

.daily-mix-stage-notice { padding: 10px 12px; margin-bottom: 10px; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); color: var(--text-dim); background: var(--pill); font-size: 12px; line-height: 1.5; }
  /* ===== 2026 visual system ===== */
  :root {
    --surface-soft: #F3F7FA;
    --surface-raised: rgba(255, 255, 255, 0.88);
    --accent-strong: #004182;
    --accent-soft: #DDEFFC;
    --teal: #087C75;
    --teal-soft: #DDF4F1;
    --warm: #FFF4D7;
    --shadow-sm: 0 1px 2px rgba(18, 44, 67, 0.06), 0 5px 18px rgba(18, 44, 67, 0.05);
    --shadow-lg: 0 18px 50px rgba(18, 44, 67, 0.12);
    --radius: 18px;
  }
  :root[data-theme="dark"] {
    --surface-soft: #202930;
    --surface-raised: rgba(36, 41, 46, 0.9);
    --accent-strong: #A8D6FF;
    --accent-soft: #193A55;
    --teal: #67D5CD;
    --teal-soft: #173D3A;
    --warm: #46391B;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 5px 18px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 20px 56px rgba(0, 0, 0, 0.36);
  }
  body {
    background:
      radial-gradient(circle at 8% -8%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 31rem),
      radial-gradient(circle at 96% 15%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 28rem),
      var(--bg);
    background-repeat: no-repeat;
  }
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0.23;
    background-image: radial-gradient(color-mix(in srgb, var(--muted) 28%, transparent) 0.55px, transparent 0.55px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to bottom, #000, transparent 64%);
  }
  .topbar {
    min-height: 68px;
    padding: 10px max(18px, calc((100vw - 1180px) / 2));
    background: color-mix(in srgb, var(--surface) 87%, transparent);
    border-bottom-color: color-mix(in srgb, var(--line) 76%, transparent);
    box-shadow: 0 1px 0 rgba(29, 34, 38, 0.02);
    backdrop-filter: blur(18px) saturate(1.2);
  }
  .brand { color: var(--ink); font-size: 18px; letter-spacing: -0.025em; }
  .brand .logo {
    width: 31px; height: 31px; padding: 6px; overflow: visible;
    border-radius: 9px; background: linear-gradient(145deg, var(--accent), var(--accent-strong));
    filter: drop-shadow(0 5px 10px color-mix(in srgb, var(--accent) 24%, transparent));
  }
  .brand .logo use { fill: #FFD46A; }
  .brand-text small {
    margin-left: 4px; color: var(--muted); font-size: 10px; font-weight: 850;
    letter-spacing: 0.12em; text-transform: uppercase; vertical-align: 2px;
  }
  .tabs {
    gap: 3px; margin-left: 18px; padding: 4px;
    border: 1px solid color-mix(in srgb, var(--line) 74%, transparent);
    border-radius: 999px; background: color-mix(in srgb, var(--surface-soft) 76%, transparent);
  }
  .tabs a {
    padding: 7px 15px; border-radius: 999px; font-size: 13px; font-weight: 750;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  }
  .tabs a:hover { color: var(--ink); }
  .tabs a.active {
    color: var(--accent-strong); background: var(--surface);
    box-shadow: 0 1px 7px rgba(18, 44, 67, 0.1);
  }
  .account-nav {
    font-size: 13px; font-weight: 800;
    box-shadow: 0 1px 7px rgba(18, 44, 67, 0.07);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease,
      box-shadow 160ms ease, transform 160ms ease;
  }
  .account-nav:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
  .account-nav.active {
    color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
    background: var(--accent-soft); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent);
  }
  :root[data-theme="dark"] .account-nav.rating-handle {
    color: var(--rating-color); background: var(--surface-soft);
  }
  :root[data-theme="dark"] .account-nav.rating-unrated {
    border-color: #46515B; color: var(--rating-color); background: var(--rating-chip);
  }
  .theme-btn {
    width: 38px; height: 38px; display: grid; place-items: center; padding: 0;
    border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
    transition: transform 160ms ease, border-color 160ms ease;
  }
  .theme-btn:hover { transform: rotate(14deg); border-color: var(--accent); }
  .page { max-width: 1180px; padding: 36px 24px 76px; }
  .page:not(.hidden) { animation: page-in 360ms cubic-bezier(.2,.72,.2,1) both; }
  @keyframes page-in { from { opacity: 0; transform: translateY(9px); } }
  .page-eyebrow {
    color: var(--accent); font-size: 11px; font-weight: 900;
    letter-spacing: 0.15em; text-transform: uppercase;
  }
  .section-heading {
    display: flex; align-items: end; justify-content: space-between; gap: 18px; margin: 0 2px 16px;
  }
  .section-heading h2 { margin: 0; font-size: 22px; letter-spacing: -0.025em; }
  .section-heading p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

  .day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
  .day-card {
    position: relative; overflow: hidden; min-height: 224px; padding: 19px;
    border-radius: var(--radius); border-color: color-mix(in srgb, var(--line) 82%, transparent);
    box-shadow: var(--shadow-sm); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .day-card::after {
    content: attr(data-level); position: absolute; right: -4px; top: -17px;
    color: color-mix(in srgb, var(--accent) 6%, transparent);
    font-size: 92px; line-height: 1; font-weight: 950; pointer-events: none;
  }
  .day-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 38%, var(--line)); box-shadow: var(--shadow-lg); }
  .day-card.today {
    border-color: var(--accent); background:
      linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 52%, var(--surface)));
    box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-sm);
  }
  .day-card.any-day {
    color: #fff; background: linear-gradient(135deg, #004182, #0A66C2 55%, #087C75);
    border-color: transparent;
  }
  .day-card.any-day .day-meta, .day-card.any-day .crowns { color: rgba(255,255,255,0.78) !important; }
  .day-card.any-day .progress { background: rgba(255,255,255,0.2); }
  .day-card.any-day .progress > div { background: #fff; }
  .day-card.any-day .btn { color: var(--accent-strong); background: #fff; }
  .day-card.any-day .btn.secondary { color: #fff; background: rgba(255,255,255,0.16); }
  .day-card.any-day::after { color: rgba(255,255,255,0.08); }
  .day-head { position: relative; z-index: 1; }
  .day-name { font-size: 19px; letter-spacing: -0.02em; }
  .day-level { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; }
  .today-tag { padding: 3px 7px; border-radius: 999px; background: var(--accent); color: #fff; }
  .crowns { position: relative; z-index: 1; margin: 7px 0 3px; }
  .progress { height: 7px; border-radius: 999px; }
  .progress > div { background: linear-gradient(90deg, var(--accent), var(--teal)); border-radius: 999px; }
  .day-meta { position: relative; z-index: 1; margin-top: 2px; }
  .day-actions { position: relative; z-index: 1; margin-top: auto; }
  .day-actions .btn { flex: 1; padding: 8px 12px; }
  .btn {
    box-shadow: 0 5px 12px color-mix(in srgb, var(--accent) 15%, transparent);
    transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease;
  }
  .btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.04); }
  .btn.secondary { box-shadow: none; }

  .page-heading {
    display: flex; align-items: end; justify-content: space-between; gap: 24px;
    margin: 5px 2px 24px;
  }
  .page-heading h1 { margin: 5px 0 4px; font-size: clamp(31px, 5vw, 48px); letter-spacing: -0.045em; }
  .page-heading .sub { max-width: 650px; margin: 0; }
  .heading-badge {
    flex: none; min-width: 132px; padding: 13px 17px;
    border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .heading-badge b { display: block; color: var(--accent); font-size: 22px; line-height: 1; }
  .heading-badge span { color: var(--muted); font-size: 11px; font-weight: 700; }
  .heading-badge .progress { height: 5px; margin-top: 9px; }
  .filters {
    position: sticky; top: 79px; z-index: 20; padding: 12px; margin-bottom: 18px;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(14px);
  }
  .chip { padding: 6px 12px; transition: transform 140ms ease, border-color 140ms ease; }
  .chip:hover { transform: translateY(-1px); border-color: var(--accent); }
  .puzzle-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 13px; }
  .pz-card {
    min-width: 0; border-radius: 16px; padding: 11px; box-shadow: var(--shadow-sm);
    transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
  }
  .pz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
  .pz-card canvas, .pz-mystery { border-radius: 10px; }
  .pz-mystery {
    position: relative; overflow: hidden;
    background:
      linear-gradient(145deg, color-mix(in srgb, var(--pill) 90%, transparent), var(--surface-soft));
  }
  .pz-mystery::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.24), transparent 68%);
    transform: translateX(-100%); transition: transform 450ms ease;
  }
  .pz-card:hover .pz-mystery::after { transform: translateX(100%); }

  .stats-toolbar { display: flex; align-items: center; gap: 9px; }
  .danger-quiet {
    color: var(--danger) !important; border: 1px solid color-mix(in srgb, var(--danger) 20%, var(--line));
    background: var(--surface) !important;
  }
  .stat-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
  .stat-card {
    position: relative; overflow: hidden; min-height: 112px; border-radius: 17px;
    border-color: color-mix(in srgb, var(--line) 80%, transparent); box-shadow: var(--shadow-sm);
  }
  .stat-card::after {
    content: ""; position: absolute; width: 54px; height: 54px; right: -18px; bottom: -19px;
    border: 12px solid color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 50%;
  }
  .stat-card .v { font-size: clamp(23px, 3vw, 31px); letter-spacing: -0.035em; color: var(--accent-strong); }
  .stats-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 14px; margin: 26px 0; }
  .bar-chart, .weekday-manager, .recent-panel {
    margin: 0; border: 1px solid var(--line); border-radius: 18px;
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .bar-chart { padding: 20px; }
  .panel-heading { margin: 0 0 16px; }
  .panel-heading h2 { margin: 0; font-size: 18px; }
  .panel-heading p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
  .bar-row { grid-template-columns: 38px 1fr 86px; margin: 10px 0; }
  .bar-track { height: 20px; border-radius: 999px; }
  .bar-fill { background: linear-gradient(90deg, var(--accent), var(--teal)); border-radius: 999px; }
  .weekday-manager { padding: 20px; }
  .weekday-reset-list { display: grid; gap: 7px; }
  .weekday-reset-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 9px; align-items: center;
    padding: 8px 9px; border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 11px; background: var(--surface-soft);
  }
  .weekday-reset-name { min-width: 0; font-weight: 800; }
  .weekday-reset-meta { color: var(--muted); font-size: 11px; white-space: nowrap; }
  .weekday-reset-button {
    border: 0; padding: 5px 8px; border-radius: 999px;
    color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); font-size: 11px; font-weight: 800;
  }
  .weekday-reset-button:disabled { opacity: 0.35; cursor: default; }
  .recent-panel { overflow: hidden; }
  .recent-panel .panel-heading { padding: 19px 19px 0; }
  table.recent { border: 0; border-radius: 0; }
  table.recent th, table.recent td { padding: 11px 16px; }

  .duel-panel { border-radius: 18px; box-shadow: var(--shadow-sm); }
  .duel-code { letter-spacing: 0.17em; }
  .duel-player { background: var(--surface-soft); }

  #view-game {
    min-height: 100vh; padding: 22px 14px 70px;
    background:
      radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 42rem),
      var(--bg);
  }
  .game-wrap { max-width: 590px; padding: 0; }
  .g-header {
    margin-bottom: 10px; padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 16px; background: color-mix(in srgb, var(--surface) 90%, transparent);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(12px);
  }
  .g-header .icon-btn {
    width: 34px; height: 34px; display: grid; place-items: center; padding: 0;
    border-radius: 50%; transition: background 150ms ease;
  }
  .g-header .icon-btn:hover { background: var(--pill); }
  .g-title { font-size: 18px; }
  .g-subhead {
    margin: 0 0 11px; padding: 0 5px;
  }
  .g-timer { color: var(--accent-strong); }
  .g-diff { color: var(--accent-strong); background: var(--accent-soft); }
  .board-holder {
    padding: 8px; border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-lg);
  }
  .board { border-radius: 6px; }
  .launch { inset: 8px; border-radius: 6px; background:
    radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 45%),
    var(--surface); }
  .launch .big-crown { filter: drop-shadow(0 8px 12px rgba(154,79,0,0.18)); }
  .g-actions { gap: 9px; margin-top: 13px; }
  .g-actions .pill-btn, .g-subhead .pill-btn { border: 1px solid color-mix(in srgb, var(--line) 75%, transparent); }
  .howto { border-radius: 16px; box-shadow: var(--shadow-sm); }
  .nudge { border-radius: 13px; }
  .modal { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 80px rgba(0,0,0,0.3); }
  .scrim { backdrop-filter: blur(8px); }

  @media (max-width: 980px) {
    .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-layout { grid-template-columns: 1fr; }
  }
  @media (max-width: 720px) {
    .topbar { min-height: 60px; padding: 8px 10px; gap: 7px; }
    .brand { gap: 0; }
    .brand .logo { width: 30px; height: 30px; }
    .brand-text { display: none; }
    .tabs { min-width: 0; margin-left: 0; overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs a { padding: 6px 10px; white-space: nowrap; font-size: 12px; }
    .theme-btn { width: 34px; height: 34px; flex: none; }
    .account-nav { max-width: 104px; padding: 6px 10px; font-size: 12px; }
    .page { padding: 22px 12px 54px; }
    .page-heading { align-items: flex-start; }
    .heading-badge { display: none; }
    .filters { top: 67px; }
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #view-game {
      padding:
        max(10px, env(safe-area-inset-top))
        max(8px, env(safe-area-inset-right))
        max(46px, env(safe-area-inset-bottom))
        max(8px, env(safe-area-inset-left));
    }
    .g-header { margin-bottom: 7px; }
  }
  @media (pointer: coarse) {
    .g-header .icon-btn { width: 44px; height: 44px; }
    .g-actions .pill-btn, .g-subhead .pill-btn { min-height: 44px; }
    input, select, textarea { font-size: 16px; }
  }
  @media (max-width: 480px) {
    .topbar { padding: 8px; gap: 4px; }
    .brand .logo { width: 28px; height: 28px; }
    .tabs { gap: 1px; padding: 3px; }
    .tabs a { padding: 6px 8px; font-size: 11.5px; }
    .theme-btn { width: 30px; height: 30px; }
    .account-nav { min-width: 62px; max-width: 88px; padding: 6px 8px; font-size: 11.5px; }
    .day-grid { grid-template-columns: 1fr; }
    .day-card { min-height: 208px; }
    .puzzle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pz-card { padding: 8px; border-radius: 13px; }
    .pz-meta { display: grid; gap: 2px; }
    .stat-cards { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { min-height: 96px; padding: 13px; }
    .weekday-reset-row { grid-template-columns: minmax(0, 1fr) auto; }
    .weekday-reset-meta { grid-column: 1; grid-row: 2; }
    table.recent th:nth-child(2), table.recent td:nth-child(2),
    table.recent th:nth-child(3), table.recent td:nth-child(3) { display: none; }
  }
  @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; }
  }
  /* ===== Unified arena interface ===== */
  :root {
    color-scheme: light;
    --bg: #F3F7F9;
    --surface: #FFFFFF;
    --surface-soft: #ECF2F5;
    --surface-raised: rgba(255, 255, 255, 0.94);
    --ink: #14232D;
    --muted: #5B6E7B;
    --line: #CBD7DE;
    --line-strong: #A9BBC6;
    --accent: #0A66C2;
    --accent-strong: #004A91;
    --accent-soft: #E1F0FB;
    --teal: #007B73;
    --teal-soft: #DDF3F0;
    --gold: #DA990F;
    --gold-dark: #795100;
    --danger: #C52A38;
    --danger-soft: #FCE8EA;
    --success: #087A45;
    --success-soft: #DFF3E8;
    --pill: #EAF1F5;
    --board-line: #18242C;
    --shadow: 0 1px 2px rgba(21, 44, 58, 0.06), 0 10px 28px rgba(21, 44, 58, 0.07);
    --shadow-sm: 0 1px 2px rgba(21, 44, 58, 0.05), 0 5px 15px rgba(21, 44, 58, 0.055);
    --shadow-lg: 0 24px 64px rgba(21, 44, 58, 0.14);
    --radius-sm: 9px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius: var(--radius-lg);
    --font-body: "Aptos", "Avenir Next", "Trebuchet MS", sans-serif;
    --font-display: "Avenir Next", "Century Gothic", "Trebuchet MS", sans-serif;
    --ease-out: cubic-bezier(.2, .72, .2, 1);
  }
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #11181E;
    --surface: #19232B;
    --surface-soft: #212E37;
    --surface-raised: rgba(25, 35, 43, 0.94);
    --ink: #F3F0E9;
    --muted: #A6B5BF;
    --line: #344650;
    --line-strong: #536872;
    --accent: #78BBF7;
    --accent-strong: #B4DBFF;
    --accent-soft: #183B55;
    --teal: #68D2C8;
    --teal-soft: #173E3B;
    --gold: #F1BB43;
    --gold-dark: #FFD979;
    --danger: #FF7D88;
    --danger-soft: #4B252B;
    --success: #72D69F;
    --success-soft: #193B2D;
    --pill: #25333D;
    --board-line: #0A0F13;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 12px 30px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 0, 0, 0.16);
    --shadow-lg: 0 26px 68px rgba(0, 0, 0, 0.38);
  }

  html {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    background: var(--bg);
  }
  body {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
    color: var(--ink);
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent), transparent 340px),
      radial-gradient(circle at 4% 8%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 24rem),
      var(--bg);
    background-attachment: fixed;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
  }
  body::before {
    opacity: 0.17;
    background-image:
      linear-gradient(color-mix(in srgb, var(--muted) 10%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--muted) 10%, transparent) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, #000, transparent 54rem);
  }
  body.modal-open { overflow: hidden; }
  ::selection { color: var(--ink); background: color-mix(in srgb, var(--accent) 24%, transparent); }
  h1, h2, h3, .brand, .g-title {
    font-family: var(--font-display);
    text-wrap: balance;
  }
  p { text-wrap: pretty; }
  a { color: var(--accent-strong); }
  button, input, select, textarea { font: inherit; }
  button { color: inherit; -webkit-tap-highlight-color: transparent; }
  button, a, summary, label { touch-action: manipulation; }
  button:focus-visible, a:focus-visible, summary:focus-visible,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 72%, white);
    outline-offset: 3px;
  }
  .skip-link {
    position: fixed; z-index: 2000; left: 14px; top: 10px;
    padding: 9px 13px; border-radius: var(--radius-sm);
    color: #fff; background: var(--accent-strong); box-shadow: var(--shadow-lg);
    font-weight: 800; text-decoration: none;
    transform: translateY(-160%); transition: transform 160ms var(--ease-out);
  }
  .skip-link:focus { transform: translateY(0); }
  .sr-only {
    position: absolute !important; width: 1px !important; height: 1px !important;
    padding: 0 !important; margin: -1px !important; overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important;
  }

  .topbar {
    min-height: 66px;
    gap: 12px;
    padding:
      9px max(18px, calc((100vw - 1180px) / 2))
      9px max(18px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--surface-raised) 91%, transparent);
    box-shadow: 0 1px 0 rgba(20, 35, 45, 0.02);
    backdrop-filter: blur(20px) saturate(1.2);
  }
  .brand {
    flex: none; gap: 9px; min-width: 0;
    color: var(--ink); font-size: 18px; font-weight: 900;
    letter-spacing: -0.035em;
  }
  .brand .logo {
    width: 34px; height: 34px; padding: 7px;
    border: 1px solid color-mix(in srgb, white 18%, transparent);
    border-radius: 11px;
    background: linear-gradient(145deg, var(--accent-strong), var(--accent) 62%, var(--teal));
    box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .brand .logo use { fill: #FFD66D; }
  .brand-text small {
    color: var(--muted); font-size: 9px; font-weight: 900;
    letter-spacing: 0.14em; vertical-align: 2px;
  }
  .tabs {
    gap: 2px; margin-left: 9px; padding: 4px;
    border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    border-radius: 13px; background: color-mix(in srgb, var(--surface-soft) 78%, transparent);
  }
  .tabs a {
    min-width: 72px; padding: 7px 13px;
    border-radius: 9px; color: var(--muted);
    font-size: 13px; font-weight: 800; text-align: center;
    transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  }
  .tabs a:hover { color: var(--ink); }
  .tabs a.active {
    color: var(--accent-strong); background: var(--surface);
    box-shadow: 0 1px 2px rgba(20, 35, 45, 0.08), 0 4px 10px rgba(20, 35, 45, 0.07);
  }
  .theme-btn {
    flex: none; width: 38px; height: 38px; padding: 9px;
    border: 1px solid var(--line); border-radius: 11px;
    color: var(--muted); background: var(--surface);
    box-shadow: none;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 150ms ease;
  }
  .theme-btn:hover { color: var(--accent-strong); border-color: var(--accent); transform: translateY(-1px); }
  .theme-btn svg { display: block; width: 100%; height: 100%; fill: currentColor; }
  .theme-sun { display: none; }
  .theme-moon { display: block; }
  :root[data-theme="dark"] .theme-sun { display: block; }
  :root[data-theme="dark"] .theme-moon { display: none; }
  .account-nav {
    min-width: 78px; max-width: 180px; min-height: 38px; padding: 8px 13px;
    border: 1px solid var(--line); border-radius: 11px;
    color: var(--muted); background: var(--surface);
    box-shadow: none; font-size: 13px; font-weight: 850;
  }
  .account-nav:hover {
    color: var(--ink); border-color: var(--accent); transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
  .account-nav.active {
    color: var(--accent-strong); border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background: var(--accent-soft);
  }
  :root[data-theme="dark"] .account-nav.rating-handle { background: var(--surface); }

  main { min-height: calc(100dvh - 66px); }
  .page {
    width: min(100%, 1180px); max-width: 1180px;
    padding: 34px 24px 80px;
  }
  #view-duel, #view-watch { max-width: 1240px; }
  .page:not(.hidden) { animation: page-in 320ms var(--ease-out) both; }
  @keyframes page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
  }
  .page-heading {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 20px;
    margin: 2px 0 24px;
  }
  .page-heading > div:first-child { flex: 1 1 360px; min-width: 0; }
  .page-heading h1 {
    margin: 4px 0 5px; font-size: clamp(32px, 4.4vw, 46px);
    font-weight: 900; line-height: 1.02; letter-spacing: -0.055em;
  }
  .page-heading .sub { max-width: 650px; margin: 0; color: var(--muted); font-size: 14px; }
  .page-eyebrow {
    color: var(--accent-strong); font-size: 10px; font-weight: 900;
    letter-spacing: 0.16em; text-transform: uppercase;
  }
  .section-heading {
    align-items: center; margin: 0 1px 13px; padding-top: 3px;
  }
  .section-heading h2 { font-size: 18px; font-weight: 900; letter-spacing: -0.025em; }
  .heading-badge {
    min-width: 132px; padding: 11px 14px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .heading-badge b { color: var(--accent-strong); font-size: 20px; font-weight: 900; }
  .heading-badge span { font-size: 10px; font-weight: 800; }

  .btn, .btn-outline, .pill-btn, .start-btn {
    min-height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; padding: 8px 15px;
    font-weight: 850; line-height: 1.15; text-align: center;
    text-decoration: none;
    transition: transform 140ms ease, filter 140ms ease, border-color 140ms ease,
      background 140ms ease, color 140ms ease, box-shadow 140ms ease;
  }
  .btn {
    border: 1px solid color-mix(in srgb, var(--accent-strong) 25%, transparent);
    color: var(--game-accent-ink, #fff);
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, white), var(--accent));
    box-shadow: 0 6px 15px color-mix(in srgb, var(--accent) 19%, transparent);
  }
  .btn.secondary, .pill-btn {
    border: 1px solid var(--line); color: var(--ink); background: var(--surface);
    box-shadow: none;
  }
  .btn-outline {
    border: 1px solid color-mix(in srgb, var(--accent) 62%, var(--line));
    color: var(--accent-strong); background: transparent;
  }
  .btn:hover:not(:disabled), .btn-outline:hover:not(:disabled),
  .pill-btn:hover:not(:disabled), .start-btn:hover:not(:disabled) {
    transform: translateY(-1px); filter: brightness(1.03); box-shadow: var(--shadow-sm);
  }
  .btn:active:not(:disabled), .btn-outline:active:not(:disabled),
  .pill-btn:active:not(:disabled), .start-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.985);
  }
  .btn:disabled, .btn-outline:disabled, .pill-btn:disabled, .start-btn:disabled {
    opacity: 0.46; cursor: not-allowed; filter: saturate(0.55); box-shadow: none;
  }
  .btn[aria-disabled="true"], .btn-outline[aria-disabled="true"] {
    opacity: 0.46; pointer-events: none; filter: saturate(0.55); box-shadow: none;
  }
  .btn[aria-busy="true"] { cursor: wait; }
  .btn[aria-busy="true"]::after {
    content: ""; width: 12px; height: 12px; flex: none; margin-left: 8px;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: control-spin 650ms linear infinite;
  }
  @keyframes control-spin { to { transform: rotate(1turn); } }
  .danger-quiet {
    color: var(--danger) !important; border-color: color-mix(in srgb, var(--danger) 34%, var(--line)) !important;
    background: var(--surface) !important;
  }
  .btn-danger {
    color: #fff !important; border-color: color-mix(in srgb, var(--danger) 72%, black) !important;
    background: var(--danger) !important; box-shadow: 0 6px 15px color-mix(in srgb, var(--danger) 18%, transparent) !important;
  }
  .stats-toolbar { gap: 6px; }
  .practice-nav {
    flex: 0 1 390px; width: min(100%, 390px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  }
  .practice-nav-action {
    min-width: 0; min-height: 58px;
    display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px;
    align-items: center; gap: 9px; padding: 9px 10px;
    border: 1px solid var(--line); border-radius: 13px;
    color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 160ms ease;
  }
  .practice-nav-action:hover {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 12%, transparent);
    transform: translateY(-2px);
  }
  .practice-nav-action:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
    outline-offset: 2px;
  }
  .practice-nav-icon {
    width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 10px; color: var(--accent-strong); background: var(--accent-soft);
  }
  .practice-nav-action.random .practice-nav-icon {
    color: var(--teal); background: var(--teal-soft);
  }
  .practice-nav-icon svg, .practice-nav-arrow svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-linecap: round; stroke-linejoin: round; stroke-width: 2;
  }
  .practice-nav-copy { min-width: 0; display: grid; gap: 2px; }
  .practice-nav-copy strong {
    overflow: hidden; font-size: 13.5px; font-weight: 900; line-height: 1.05;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .practice-nav-copy small {
    overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 700;
    line-height: 1.15; text-overflow: ellipsis; white-space: nowrap;
  }
  .practice-nav-arrow {
    display: grid; place-items: center; color: var(--muted);
    transition: color 160ms ease, transform 160ms var(--ease-out);
  }
  .practice-nav-arrow svg { width: 15px; height: 15px; }
  .practice-nav-action:hover .practice-nav-arrow {
    color: var(--accent-strong); transform: translateX(2px);
  }

  .day-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .day-card {
    min-height: 194px; gap: 8px; padding: 17px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-sm);
    transition: transform 170ms var(--ease-out), border-color 170ms ease, box-shadow 170ms ease;
  }
  .day-card::after { content: none; }
  .day-card::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 3px;
    background: color-mix(in srgb, var(--accent) 28%, transparent);
  }
  .day-card.today {
    border-color: color-mix(in srgb, var(--accent) 60%, var(--line));
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 44%, var(--surface)));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent), var(--shadow-sm);
  }
  .day-card.today::before { background: var(--accent); }
  .day-card.any-day {
    color: #fff; border-color: transparent;
    background:
      linear-gradient(130deg, rgba(255,255,255,.08), transparent 46%),
      linear-gradient(135deg, #003F78, #0A66C2 55%, #007B73);
  }
  .day-card.any-day::before { background: #FFD66D; }
  .day-name { font-size: 18px; font-weight: 900; }
  .day-level { font-size: 9.5px; font-weight: 850; letter-spacing: 0.1em; }
  .day-level-inverse { color: rgba(255, 255, 255, .72); }
  .today-tag { padding: 3px 7px; background: var(--accent); font-size: 9px; }
  .crowns { margin: 4px 0 1px; font-size: 12px; letter-spacing: 1px; }
  .day-meta { gap: 8px; font-size: 11px; }
  .progress { height: 6px; background: var(--pill); }
  .progress > div { background: linear-gradient(90deg, var(--accent), var(--teal)); }
  .day-actions { gap: 7px; margin-top: auto; }
  .day-actions .btn { min-height: 36px; padding: 7px 10px; font-size: 12px; }

  .filters {
    position: sticky; z-index: 20; top: 76px;
    display: grid; gap: 10px; padding: 12px; margin-bottom: 16px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(18px);
  }
  .filter-groups { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: end; }
  .filter-group { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .filter-label {
    width: 100%; color: var(--muted); font-size: 9px; font-weight: 900;
    letter-spacing: 0.11em; text-transform: uppercase;
  }
  .filter-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  .filter-summary strong { font-size: 12px; }
  #browse-count {
    margin-left: 0; padding: 4px 8px; border-radius: 999px;
    color: var(--accent-strong); background: var(--accent-soft); font-size: 10px; font-weight: 850;
  }
  .chip-sep { display: none; }
  .chip {
    min-height: 31px; padding: 5px 10px; border-color: var(--line); border-radius: 9px;
    color: var(--muted); background: var(--surface); font-size: 11px; font-weight: 800;
    transition: color 130ms ease, background 130ms ease, border-color 130ms ease, transform 130ms ease;
  }
  .chip:hover { transform: none; color: var(--ink); border-color: var(--accent); }
  .chip.on { color: #fff; border-color: var(--accent); background: var(--accent); box-shadow: none; }
  .puzzle-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 11px; }
  .pz-card {
    gap: 7px; min-width: 0; padding: 9px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    color: var(--ink); background: var(--surface); box-shadow: var(--shadow-sm);
    transition: transform 160ms var(--ease-out), border-color 160ms ease, box-shadow 160ms ease;
  }
  .pz-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow); }
  .pz-card canvas, .pz-mystery { border-radius: 9px; }
  .pz-title { font-size: 13px; font-weight: 900; }
  .pz-meta { font-size: 10.5px; }
  .pz-mystery svg { fill: color-mix(in srgb, var(--muted) 42%, transparent); }

  .stat-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
  .stat-card {
    min-height: 104px; padding: 15px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .stat-card::after { display: none; }
  .stat-card .v { color: var(--accent-strong); font-size: clamp(21px, 2.7vw, 29px); font-weight: 900; }
  .stat-card .k { margin-top: 4px; font-size: 11px; font-weight: 700; }
  .stats-layout { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 12px; margin: 18px 0; }
  .bar-chart, .weekday-manager, .recent-panel {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .bar-chart, .weekday-manager { padding: 18px; }
  .panel-heading { margin-bottom: 13px; }
  .panel-heading h2 { font-size: 17px; font-weight: 900; }
  .bar-row { grid-template-columns: 34px 1fr 82px; gap: 8px; margin: 9px 0; font-size: 11px; }
  .bar-track { height: 16px; }
  .weekday-reset-row { border-radius: 9px; background: var(--surface-soft); }
  .weekday-reset-button { min-height: 29px; border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); }
  .recent-panel .panel-heading { padding: 17px 17px 0; }
  .table-scroll { width: 100%; overflow-x: auto; border-radius: 0 0 var(--radius-md) var(--radius-md); }
  table.recent { min-width: 620px; border: 0; border-radius: 0; background: transparent; }
  table.recent th, table.recent td { padding: 10px 15px; font-size: 12px; }
  table.recent th { background: var(--surface-soft); font-size: 9px; font-weight: 900; }
  table.recent .recent-empty { padding: 28px 15px; color: var(--muted); text-align: center; }

  .duel-page-heading { align-items: center; margin-bottom: 16px; }
  .duel-page-guide {
    grid-template-columns: repeat(3, minmax(86px, 1fr)); gap: 0; padding: 5px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .duel-page-guide span { gap: 0; padding: 7px 11px; border-radius: 9px; }
  .duel-page-guide span + span { border-left: 1px solid var(--line); }
  .duel-page-guide b { font-size: 11px; }
  .duel-page-guide span { font-size: 9.5px; }
  .duel-create-layout { grid-template-columns: minmax(390px, 450px) minmax(0, 1fr); gap: 13px; }
  .duel-create-panel { position: sticky; top: 80px; align-self: start; }
  .duel-panel, .account-panel {
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .duel-panel { padding: 18px; }
  .duel-panel h2, .account-panel h2 { font-size: 18px; font-weight: 900; letter-spacing: -0.025em; }
  .duel-panel .panel-sub, .account-panel .panel-sub { color: var(--muted); font-size: 12px; }
  .duel-form-head { padding: 16px 17px 13px; }
  .duel-form-head h2 { margin-bottom: 2px; }
  .duel-create-main { gap: 13px; padding: 15px 17px 16px; }
  .duel-field { gap: 5px; }
  .duel-field > span, .duel-field legend { font-size: 11.5px; font-weight: 850; }
  .duel-input {
    min-height: 41px; padding: 9px 11px; border-color: var(--line);
    border-radius: 10px; color: var(--ink); background: var(--surface-soft);
  }
  .duel-input:hover:not(:disabled) { border-color: var(--line-strong); }
  .duel-input:focus { border-color: var(--accent); background: var(--surface); }
  .duel-number-control { border-color: var(--line); background: var(--surface-soft); }
  .duel-choice { cursor: pointer; }
  .duel-choice > span {
    min-height: 40px; display: grid; place-content: center;
    border-color: var(--line); border-radius: 10px; color: var(--muted); background: var(--surface-soft);
    font-size: 12px; transition: color 130ms ease, background 130ms ease, border-color 130ms ease;
  }
  .duel-choice:hover > span { color: var(--ink); border-color: var(--line-strong); }
  .duel-choice input:checked + span {
    color: var(--accent-strong); border-color: var(--accent);
    background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  }
  .duel-visibility > span { min-height: 62px; padding: 9px 10px; }
  .duel-visibility small { font-size: 9.5px; }
  .duel-match-type-row .duel-choice > span {
    min-height: 58px; padding: 9px 10px; place-content: initial;
  }
  .duel-match-type-row small { font-size: 9.5px; }
  .duel-rating-note { min-height: 48px; border-color: var(--line); background: var(--surface-soft); }
  .duel-advanced {
    border-color: var(--line); border-radius: 10px; background: var(--surface-soft);
  }
  .duel-advanced summary { min-height: 48px; padding: 10px 11px; }
  .duel-advanced summary b { font-size: 12px; }
  .duel-advanced summary small { font-size: 9.5px; }
  .duel-advanced summary::after { color: var(--accent-strong); font-size: 9px; }
  .duel-advanced-body { padding: 12px; background: var(--surface); }
  .duel-create-footer { gap: 8px; padding: 12px 17px 16px; background: var(--surface-soft); }
  .duel-create-footer .btn { min-height: 42px; }
  .duel-create-summary { font-size: 9.5px; }
  .duel-error { min-height: 0; font-size: 11px; }
  .duel-error:not(:empty) {
    padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
    border-radius: 9px; background: var(--danger-soft);
  }
  .arena-directory { padding: 0; }
  .duel-side-stack {
    min-width: 0; display: grid; align-content: start; gap: 13px;
  }
  .arena-directory-head { padding: 15px 17px; }
  .arena-directory-head h2 { font-size: 17px; }
  .arena-counts span { padding: 4px 7px; font-size: 9px; }
  .arena-column { padding: 14px 15px 16px; }
  .arena-column-title { margin-bottom: 8px; font-size: 9px; }
  .arena-list { gap: 7px; }
  .arena-match {
    min-height: 68px; padding: 10px 11px;
    border-color: var(--line); border-radius: 10px; background: var(--surface-soft);
    transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
  }
  .arena-match:hover { border-color: var(--accent); background: var(--surface); transform: translateY(-1px); }
  .arena-match-title { font-size: 12px; }
  .arena-match-meta { font-size: 10px; line-height: 1.4; }
  .arena-join { min-height: 34px; padding: 6px 11px; font-size: 11px; }
  .arena-empty { min-height: 92px; border-radius: 10px; background: var(--surface-soft); }
  .arena-rating-board { min-width: 0; padding: 17px; overflow: hidden; }
  .arena-rating-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 12px;
  }
  .arena-rating-head h2 { margin: 1px 0 0; }
  .arena-rating-head > span {
    flex: none; padding: 5px 8px; border-radius: 999px;
    color: var(--accent-strong); background: var(--accent-soft);
    font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  }
  .arena-rating-board .leaderboard-wrap { margin-top: 12px; }
  .duel-grid { gap: 12px; }
  .duel-code { color: var(--accent-strong); font-size: 20px; font-weight: 900; }
  .duel-identity { border-color: var(--line); border-radius: 10px; background: var(--surface-soft); }
  .duel-player { border-color: var(--line); border-radius: 11px; background: var(--surface-soft); }
  .duel-player.you { border-color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 24%, transparent); }
  .duel-link-row { gap: 6px; }
  .duel-link-row .btn { flex: none; }
  .duel-meta span { padding: 4px 8px; font-size: 10px; }
  .duel-step-num { color: var(--accent-strong); background: var(--accent-soft); }
  .personal-score { border-color: var(--line); border-radius: 10px; background: var(--surface-soft); }
  .personal-score-value { color: var(--accent-strong); }
  .duel-scorebar {
    margin: 0 0 9px; padding: 8px 10px;
    border-color: var(--line); border-radius: 11px; box-shadow: var(--shadow-sm);
  }
  .duel-wait {
    min-height: 260px; border-style: dashed;
    background: linear-gradient(145deg, var(--surface), color-mix(in srgb, var(--accent-soft) 18%, var(--surface)));
  }
  .duel-spinner { border-width: 2px; }
  .state-icon { width: 42px; height: 42px; margin: 0 auto 8px; color: var(--muted); }
  .state-icon svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; }
  .state-title { margin: 0 0 5px; }
  .state-action { margin-top: 8px; }
  .full-action { width: 100%; margin-top: 14px; }
  .duel-lobby-title { margin-top: 5px !important; }

  .watch-shell { gap: 12px; }
  .watch-summary {
    padding: 15px 17px; border-color: var(--line); border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
  }
  .watch-summary h2 { font-size: 18px; }
  .watch-summary p { font-size: 11px; }
  .watch-live { color: var(--success); background: var(--success-soft); font-size: 9px; }
  .watch-scoreboard {
    gap: 6px 16px; padding: 13px 17px;
    border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .watch-score-number { font-size: 29px; }
  .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .watch-card {
    padding: 11px; border-color: var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .watch-player-head { margin-bottom: 8px; }
  .watch-board-slot, .watch-board, .watch-standby { border-radius: 7px; }
  .watch-result-overlay.winner {
    background: linear-gradient(145deg, rgba(5, 86, 44, .62), rgba(19, 157, 80, .76));
  }
  .watch-result-overlay.loser {
    background: linear-gradient(145deg, rgba(112, 18, 29, .58), rgba(198, 47, 61, .74));
  }

  .account-grid { grid-template-columns: minmax(0, 1.4fr) minmax(290px, .6fr); gap: 12px; }
  .account-grid > *, .account-stack, .auth-grid, .account-panel { min-width: 0; }
  .account-stack { gap: 12px; }
  .account-panel { padding: 18px; }
  .profile-hero {
    min-height: 178px; padding: 22px; border: 1px solid color-mix(in srgb, #fff 12%, transparent);
    background:
      linear-gradient(120deg, rgba(255,255,255,.08), transparent 46%),
      linear-gradient(125deg, #003B70 0%, #0A66C2 58%, #08756F 100%);
    box-shadow: var(--shadow);
  }
  .profile-hero::after { right: -35px; bottom: -66px; width: 182px; opacity: .085; }
  .profile-name { font-size: 24px; font-weight: 900; }
  .profile-name .rating-handle { border-radius: 8px; }
  .profile-sub { font-size: 12px; }
  .profile-rating { min-width: 112px; padding: 11px 12px; border-radius: 11px; }
  .profile-rating b { font-size: 38px; }
  .account-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .account-stat { min-width: 0; padding: 11px; border-radius: 9px; background: var(--surface-soft); }
  .account-stat b { overflow-wrap: anywhere; font-size: 17px; }
  .account-stat span { font-size: 9.5px; }
  .auth-grid { gap: 12px; }
  .auth-form { gap: 11px; }
  .auth-form label { font-size: 11px; }
  .account-note { border-radius: 0 9px 9px 0; background: var(--accent-soft); font-size: 11px; }
  .rating-metrics { margin: 14px 0 10px; }
  .rating-metric { border-radius: 9px; background: var(--surface-soft); }
  .rating-chart-frame { border-radius: 10px; background: var(--surface-soft); }
  .history-row, .rival-row {
    border-color: var(--line); border-radius: 10px; background: var(--surface-soft);
  }
  .history-row:hover, .rival-row:hover { border-color: var(--line-strong); }
  .history-meta { font-size: 10.5px; line-height: 1.4; }
  .leaderboard-wrap { width: 100%; overflow-x: auto; }
  .leaderboard { min-width: 310px; }
  .leaderboard th, .leaderboard td { padding: 9px 6px; font-size: 11px; }
  .leaderboard th { font-size: 9px; }
  .empty-state {
    min-height: 110px; display: grid; place-content: center;
    padding: 22px 14px; border: 1px dashed var(--line); border-radius: 10px;
    background: var(--surface-soft); font-size: 12px;
  }

  .daily-feature { gap: 12px; margin-bottom: 18px; }
  .daily-page-feature {
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    margin-bottom: 0;
  }
  .daily-page-feature .daily-hero { min-height: 300px; }
  .daily-page-feature .daily-standings { min-height: 300px; }
  .daily-hero, .daily-standings { border-color: var(--line); border-radius: var(--radius-md); }
  .daily-hero {
    min-height: 215px; padding: 24px;
    background:
      radial-gradient(circle at 87% 15%, rgba(255, 214, 109, .32) 0 8%, transparent 8.5%),
      linear-gradient(125deg, #003B70 0%, #0A66C2 58%, #08756F 100%);
  }
  .daily-hero h2 { font-size: clamp(24px, 3vw, 34px); }
  .daily-hero p { font-size: 12px; }
  .daily-action .btn { color: #182D3B; background: #FFD66D; border-color: #FFD66D; }
  .daily-standings { padding: 16px; }
  .random-section-label { margin-bottom: 8px; font-size: 9px; }
  .random-shell { grid-template-columns: minmax(220px, .55fr) minmax(370px, 1.45fr); gap: 12px; }
  .random-visual {
    min-height: 350px; border-radius: var(--radius-md); box-shadow: var(--shadow);
    background:
      linear-gradient(135deg, rgba(255,255,255,.12), transparent 42%),
      linear-gradient(145deg, #064C58, #087B73 54%, #0A66C2);
  }
  .random-visual::before { inset: 27px; border-width: 4px; border-radius: 7px; }
  .random-panel {
    padding: clamp(20px, 3vw, 30px); border-color: var(--line);
    border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
  }
  .random-panel h2 { margin-bottom: 19px; font-size: 21px; }
  .random-field { margin-bottom: 17px; }
  .random-field legend { font-size: 11px; }
  .random-choice span {
    min-height: 40px; border-color: var(--line); border-radius: 9px;
    color: var(--muted); background: var(--surface-soft); font-size: 11px;
  }
  .random-choice input:checked + span {
    color: var(--accent-strong); border-color: var(--accent); background: var(--accent-soft);
  }
  .random-generate { min-height: 43px; }

  #view-game {
    width: 100%; min-width: 0; max-width: 100%; min-height: 100dvh;
    padding: 14px 12px max(48px, env(safe-area-inset-bottom)); overflow-x: clip;
    background:
      radial-gradient(circle at 50% -15%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34rem),
      var(--bg);
  }
  .game-wrap {
    width: min(100%, 610px); min-width: 0; max-width: 610px; padding: 0;
  }
  .game-wrap > *,
  .g-header > *,
  .g-subhead > *,
  .g-actions > *,
  .duel-scorebar > * {
    min-width: 0; max-width: 100%;
  }
  .g-header, .duel-scorebar, .daily-run-strip, .g-subhead,
  .board-holder, .g-actions, .nudge, .howto {
    width: 100%; min-width: 0; max-width: 100%;
  }
  .g-title { min-width: 0; overflow: hidden; }
  h1.g-title { margin: 0; line-height: 1.15; }
  #g-title-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .duel-scorebar {
    grid-template-columns: minmax(0, 1fr) minmax(92px, 38%) minmax(0, 1fr);
    overflow: hidden;
  }
  .duel-round-label { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; }
  .g-header {
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px 42px;
    gap: 3px; margin-bottom: 9px; padding: 6px;
    border: 1px solid var(--line); border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-raised) 92%, transparent);
    box-shadow: var(--shadow-sm); backdrop-filter: blur(16px);
  }
  .g-header .icon-btn {
    width: 38px; height: 38px; padding: 9px; border: 1px solid transparent;
    border-radius: 10px; color: var(--muted);
  }
  .g-header .icon-btn:hover { color: var(--ink); border-color: var(--line); background: var(--surface-soft); }
  .g-header .icon-btn svg { display: block; width: 100%; height: 100%; fill: currentColor; }
  .g-title { min-width: 0; font-size: 17px; font-weight: 900; }
  .g-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .g-subhead { gap: 8px; margin: 0 0 9px; padding: 0 3px; }
  .g-timer { color: var(--accent-strong); font-size: 16px; }
  .g-timer > svg {
    width: 17px; height: 17px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }
  .g-diff {
    max-width: 54%; overflow: hidden; padding: 5px 9px;
    color: var(--accent-strong); background: var(--accent-soft);
    font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap;
  }
  .g-subhead .pill-btn { min-height: 34px; padding: 6px 13px; font-size: 11px; }
  .board-holder {
    padding: 7px; border: 1px solid var(--line); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-lg);
  }
  .board { border-width: 5px; border-radius: 6px; background: var(--board-line); }
  .cell { outline: none; }
  .cell[tabindex="0"]:focus-visible {
    z-index: 2; outline: 3px solid #fff; outline-offset: -4px;
    box-shadow: inset 0 0 0 6px var(--accent);
  }
  #view-game .board[data-pointer-focus] .cell[tabindex="0"]:focus-visible {
    outline: none;
    box-shadow: none;
  }
  .launch {
    inset: 7px; border-width: 0; border-radius: 7px;
    background:
      radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 42%),
      var(--surface);
    backdrop-filter: blur(10px);
  }
  .launch .big-crown { font-size: 48px; }
  .launch .l-num { font-size: 20px; }
  .launch .l-date { padding: 0 18px; font-size: 11px; text-align: center; }
  .launch .start-btn {
    min-width: 150px; color: #fff; border: 1px solid var(--accent);
    background: var(--accent); box-shadow: 0 8px 20px color-mix(in srgb, var(--accent) 23%, transparent);
  }
  .g-actions { gap: 8px; margin: 11px 0 7px; }
  .g-actions .pill-btn { min-height: 42px; border-color: var(--line); }
  .nudge {
    margin: 9px 0; padding: 10px 12px; border-radius: 10px;
    background: var(--surface); box-shadow: var(--shadow-sm); font-size: 12px;
  }
  .howto {
    margin-top: 10px; border-color: var(--line); border-radius: 11px; box-shadow: none;
    background: var(--surface);
  }
  .howto summary { min-height: 58px; padding: 9px 11px; }
  .howto-summary-icon { width: 36px; height: 36px; border-radius: 10px; }
  .howto-summary-icon :is(svg, img) { width: 21px; height: 21px; }
  .howto-content { grid-template-columns: 1fr; gap: 11px; padding: 11px; }
  .howto-demo { min-height: 112px; padding: 10px; }
  .howto-rules { gap: 9px; }
  .howto-rule-copy span { font-size: 11px; }

  .scrim {
    z-index: 1000; align-items: center; padding:
      max(18px, env(safe-area-inset-top))
      max(14px, env(safe-area-inset-right))
      max(18px, env(safe-area-inset-bottom))
      max(14px, env(safe-area-inset-left));
    background: rgba(7, 14, 19, .62); backdrop-filter: blur(9px);
    animation: scrim-in 170ms ease-out both;
  }
  .modal {
    width: min(100%, 440px); max-height: min(88dvh, 720px); overflow-y: auto;
    padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-lg);
    background: var(--surface); box-shadow: 0 28px 90px rgba(0,0,0,.34);
    animation: modal-in 220ms var(--ease-out) both;
  }
  .modal:focus { outline: none; }
  .modal h3 { margin-bottom: 8px; font-size: 19px; font-weight: 900; }
  .modal p { color: var(--muted); font-size: 12.5px; }
  .modal .close-x {
    width: 44px; height: 44px; display: grid; place-items: center;
    top: 10px; right: 10px; padding: 0; border: 1px solid transparent;
    border-radius: 10px; font-size: 15px;
  }
  .modal .close-x svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2.25; stroke-linecap: round;
  }
  .modal .close-x:hover { border-color: var(--line); color: var(--ink); background: var(--surface-soft); }
  .modal-actions { flex-wrap: wrap; gap: 7px; margin-top: 16px; }
  .modal-actions > * { min-width: 0; }
  .result-icon { color: var(--gold); font-size: 40px; line-height: 1; }
  .result-icon > svg,
  .result-icon > span > svg,
  .result-icon > img {
    width: 48px; height: 48px; color: var(--accent); vertical-align: middle;
    object-fit: contain;
  }
  .result-icon > .daily-mix-result-mark {
    width: 58px; height: 58px; overflow: visible;
    filter: drop-shadow(0 8px 16px color-mix(in srgb, var(--ink) 17%, transparent));
  }
  .daily-mix-result-center {
    fill: var(--surface); stroke: color-mix(in srgb, var(--line) 82%, var(--ink));
    stroke-width: 2;
  }
  .daily-mix-result-check {
    fill: none; stroke: var(--ink); stroke-width: 4;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .result-warning { color: var(--danger); }
  .result-title { margin: 4px 0 0 !important; font-size: 21px !important; }
  .modal.duel-result-modal { animation: none; transform: none; }
  .result-score-card { margin-top: 12px; }
  .result-detail { margin-top: 6px !important; }
  .result-expiry { margin-top: 10px; }
  .results .r-time { margin-top: 3px; font-size: 43px; font-weight: 900; letter-spacing: -0.045em; }
  .results .r-sub { font-size: 11px; }
  .results .r-pill { padding: 5px 10px; font-size: 10.5px; }
  .practice-results .result-share {
    top: 13px; right: 13px; min-width: 108px; min-height: 44px; padding: 9px 16px;
    border-width: 2px; border-radius: 11px; font-size: 14px; font-weight: 900;
  }
  .practice-results .modal-actions { gap: 7px; }
  .practice-results .modal-actions #daily-view-puzzles,
  .practice-results .modal-actions #random-next,
  .practice-results .modal-actions #res-next { grid-column: 1 / -1; }
  .result-community { border-radius: 10px; background: var(--surface-soft); }
  .toggle-row { border-bottom: 1px solid var(--line); }
  .toggle-row:last-child { border-bottom: 0; }
  .toggle-row .lbl { font-weight: 850; }
  .modal-rules { margin: 0; padding-left: 20px; color: var(--muted); font-size: 12.5px; }
  .modal-rules li { margin: 8px 0; }
  @keyframes scrim-in { from { opacity: 0; } }
  @keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(.985); }
    to { opacity: 1; transform: none; }
  }

  .rematch-callout {
    border-color: var(--accent); border-radius: 11px;
    color: var(--accent-strong); background: var(--accent-soft);
  }
  .rematch-toast {
    border-color: var(--accent); border-radius: var(--radius-md);
    background: var(--surface); box-shadow: var(--shadow-lg);
  }

  @media (hover: hover) {
    .day-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); box-shadow: var(--shadow); }
  }
  @media (max-width: 1080px) {
    .duel-create-layout { grid-template-columns: 1fr; }
    .duel-create-panel { position: static; }
    .day-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }
  @media (max-width: 860px) {
    .page { padding-top: 27px; }
    .day-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .stat-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .stats-layout { grid-template-columns: 1fr; }
    .account-grid { grid-template-columns: minmax(0, 1fr); }
    .random-shell { grid-template-columns: minmax(170px, .42fr) minmax(360px, 1.58fr); }
    .arena-columns { grid-template-columns: 1fr; }
    .arena-column + .arena-column { border-left: 0; border-top: 1px solid var(--line); }
  }
  @media (max-width: 680px) {
    .topbar {
      min-height: 58px; gap: 6px; padding:
        7px max(8px, env(safe-area-inset-right))
        7px max(8px, env(safe-area-inset-left));
    }
    .brand { gap: 0; }
    .brand .logo { width: 31px; height: 31px; padding: 6px; }
    .brand-text { display: none; }
    .tabs {
      flex: 1 1 auto; min-width: 0; margin-left: 0; padding: 3px;
      overflow: visible;
    }
    .tabs a { flex: 1; min-width: 0; padding: 6px 7px; font-size: 11px; }
    .topbar .spacer { display: none; }
    .theme-btn { width: 34px; height: 34px; padding: 8px; }
    .account-nav { min-width: 58px; max-width: 82px; min-height: 34px; padding: 6px 8px; font-size: 10.5px; }
    main { min-height: calc(100dvh - 58px); }
    .page { padding: 22px 12px 58px; }
    .page-heading { align-items: flex-start; margin-bottom: 19px; }
    .page-heading > div:first-child { flex-basis: 100%; }
    .page-heading h1 { font-size: clamp(29px, 9vw, 38px); }
    .page-heading .sub { font-size: 12px; }
    .heading-badge { display: none; }
    .stats-toolbar { width: 100%; }
    .practice-nav { flex-basis: 100%; width: 100%; }
    .filters { position: static; padding: 10px; }
    .filter-groups { gap: 8px 12px; }
    .stat-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .duel-page-guide { display: none; }
    .duel-grid { grid-template-columns: 1fr; }
    .duel-ready-row { align-items: stretch; flex-direction: column; }
    .duel-ready-row .btn { width: 100%; }
    .watch-summary { align-items: stretch; flex-direction: column; }
    .watch-live { align-self: flex-start; }
    .watch-scoreboard { grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr); gap: 5px 8px; padding: 11px; }
    .watch-scoreboard-name { font-size: 11px; }
    .watch-score-number { font-size: 25px; }
    .watch-card { padding: 8px; }
    .watch-player-head { display: grid; gap: 2px; }
    .watch-player-name { font-size: 10px; }
    .watch-player-meta { font-size: 8.5px; text-align: left; }
    .random-shell { grid-template-columns: 1fr; }
    .daily-page-feature { grid-template-columns: 1fr; }
    .daily-page-feature .daily-hero,
    .daily-page-feature .daily-standings { min-height: 0; }
    .random-visual { min-height: 145px; }
    .random-visual::before { inset: 16px 28px; }
    .random-visual .random-crown { font-size: 62px; }
    .random-panel { padding: 18px; }
    .profile-page-heading { flex-direction: column; }
    .profile-hero { grid-template-columns: 1fr auto; }
    .account-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rating-metrics { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 500px) {
    .page-eyebrow { font-size: 9px; }
    .day-grid { grid-template-columns: 1fr; }
    .day-card { min-height: 174px; }
    .puzzle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .pz-card { padding: 7px; }
    .pz-meta { display: grid; gap: 1px; }
    .duel-form-pair, .duel-advanced-grid { grid-template-columns: 1fr; }
    .duel-order-field, .duel-weekday-field, #duel-min-puzzle-field { grid-column: auto; }
    .duel-form-head, .duel-create-main, .duel-create-footer { padding-left: 13px; padding-right: 13px; }
    .duel-players { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .duel-players .duel-vs { justify-self: center; }
    .duel-player { padding: 10px; }
    .duel-player-name { font-size: 10.5px; }
    .duel-player-status { font-size: 9px; }
    .duel-target-control {
      grid-template-columns: auto minmax(64px, 92px) auto; gap: 7px;
    }
    .duel-scorebar {
      grid-template-columns: minmax(0, 1fr) minmax(76px, 36%) minmax(0, 1fr);
      gap: 5px; padding-inline: 7px;
    }
    .duel-score-player { font-size: 10px; }
    .duel-score-player b { margin-inline: 2px; font-size: 15px; }
    .duel-round-label { font-size: 8px; letter-spacing: .03em; }
    .duel-round-label strong { font-size: 9px; }
    .duel-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
    .personal-score { gap: 5px; padding: 10px 8px; }
    .personal-score b { font-size: 10px; }
    .personal-score-value { font-size: 19px; }
    .watch-scoreboard { grid-template-columns: minmax(0, 1fr) 94px minmax(0, 1fr); }
    .watch-score-label b { font-size: 9.5px; }
    .watch-score-label span { font-size: 7px; }
    .watch-grid { gap: 6px; }
    .watch-card { padding: 6px; border-radius: 10px; }
    .watch-player-name .player-tag { display: none; }
    .watch-player-meta { display: none; }
    .watch-board, .watch-standby { border-width: 3px; }
    .watch-result-overlay b { font-size: 46px; }
    .watch-result-overlay small { font-size: 9px; }
    .random-size-row { gap: 5px; }
    .random-difficulty-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
    .random-choice span { min-height: 40px; padding: 6px 4px; font-size: 10px; line-height: 1.15; }
    .profile-hero { grid-template-columns: 1fr; min-height: 205px; }
    .profile-rating { justify-self: start; text-align: left; }
    .history-row { grid-template-columns: 33px minmax(0, 1fr) auto; gap: 7px; padding: 9px; }
    .history-result { width: 31px; height: 31px; }
    .history-meta { font-size: 9px; }
    .g-header { grid-template-columns: 38px minmax(0, 1fr) 38px 38px 38px; }
    .g-header .icon-btn { width: 34px; height: 34px; padding: 8px; }
    .g-title { font-size: 14px; }
    .g-title .logo { display: none; }
    .g-diff { font-size: 8.5px; }
    .board-holder { padding: 5px; border-radius: 11px; }
    .launch { inset: 5px; }
    .daily-run-strip { margin-inline: 1px; font-size: 11px; }
    .daily-viewer-nav { grid-template-columns: 1fr 76px 1fr; gap: 6px; }
    .daily-viewer-nav .pill-btn { padding-inline: 8px; font-size: 11px; }
    .daily-viewer-status { min-width: 0; font-size: 10.5px; }
    .modal {
      align-self: end; width: 100%; max-height: min(90dvh, 720px);
      padding: 20px 17px max(18px, env(safe-area-inset-bottom));
      border-radius: 20px 20px 12px 12px;
      animation-name: sheet-in;
    }
    .modal.duel-result-modal {
      max-height: min(90vh, 720px);
      max-height: min(90svh, 720px);
      overscroll-behavior: contain;
      animation: none;
      transform: none;
    }
    .scrim { align-items: flex-end; padding: 0; }
    .modal-actions > .btn, .modal-actions > .btn-outline { flex: 1; }
    .practice-results .modal-actions { grid-template-columns: 1fr 1fr; }
    .practice-results .modal-actions #res-next { grid-column: 1 / -1; }
    @keyframes sheet-in {
      from { opacity: 0; transform: translateY(24px); }
      to { opacity: 1; transform: none; }
    }
  }
  @media (max-width: 430px) {
    .daily-run-strip.is-mix {
      grid-template-columns: minmax(0, 1fr) auto; gap: 7px 10px;
    }
    .daily-run-strip.is-mix .daily-mix-skip {
      grid-column: 1 / -1; width: 100%; min-height: 36px;
    }
  }
  @media (max-width: 420px) {
    .brand { display: none; }
    .tabs a { padding-inline: 5px; font-size: 10.5px; }
    .account-nav { min-width: 52px; max-width: 64px; }
    .practice-nav { gap: 6px; }
    .practice-nav-action {
      min-height: 64px; grid-template-columns: 28px minmax(0, 1fr) 13px;
      gap: 7px; padding: 8px;
    }
    .practice-nav-icon { width: 28px; height: 28px; border-radius: 8px; }
    .practice-nav-icon svg { width: 16px; height: 16px; }
    .practice-nav-copy strong { font-size: 12px; }
    .practice-nav-copy small {
      display: -webkit-box; font-size: 9.5px; line-height: 1.2;
      text-overflow: clip; white-space: normal;
      -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    }
    .duel-advanced summary small {
      line-height: 1.25; text-overflow: clip; white-space: normal;
    }
    .duel-create-summary { grid-template-columns: 1fr; display: grid; gap: 3px; }
    .duel-create-summary b {
      overflow: visible; text-align: left; text-overflow: clip; white-space: normal;
    }
  }
  @media (pointer: coarse) {
    .btn, .btn-outline, .pill-btn, .start-btn, .duel-input,
    .duel-choice > span, .random-choice span { min-height: 44px; }
    .practice-nav-action, .day-actions .btn, .duel-create-footer .btn,
    .g-actions .pill-btn, .g-subhead .pill-btn { min-height: 44px; }
    .chip { min-height: 36px; }
    .g-header .icon-btn { min-height: 42px; }
  }
  @media (prefers-contrast: more) {
    :root { --line: #8296A2; --muted: #41535E; }
    :root[data-theme="dark"] { --line: #70848F; --muted: #C7D2D8; }
    .btn, .btn-outline, .duel-input, .chip, .duel-choice > span, .random-choice span { border-width: 2px; }
  }
  @media (forced-colors: active) {
    .brand .logo, .profile-hero, .daily-hero, .day-card.any-day, .random-visual {
      forced-color-adjust: none;
    }
    .cell[tabindex="0"]:focus-visible { outline: 4px solid Highlight; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .page:not(.hidden), .scrim, .modal { animation: none; }
    .btn, .btn-outline, .pill-btn, .start-btn, .day-card, .pz-card, .arena-match {
      transition: none;
    }
  }
  /* Readability refinement: preserve density without relying on sub-10px UI text. */
  body { font-size: 16px; }
  .brand-text small { font-size: 10px; }
  .tabs a, .account-nav { font-size: 13.5px; }
  .page-heading .sub { font-size: 15px; }
  .page-eyebrow { font-size: 11px; }
  .heading-badge {
    min-width: 150px; padding: 14px 16px;
  }
  .heading-badge b {
    display: flex; align-items: baseline; gap: 7px;
    color: var(--accent-strong); font-size: 23px; font-weight: 900; line-height: 1;
  }
  .heading-badge b > span { color: inherit; font-size: inherit; font-weight: inherit; }
  .heading-badge b > .heading-badge-separator {
    color: var(--muted); font-size: 13px; font-weight: 750;
  }
  .heading-badge > span {
    display: block; margin-top: 7px; font-size: 12.5px; font-weight: 800;
  }
  .heading-badge .progress { height: 6px; margin-top: 11px; }
  .btn, .btn-outline, .pill-btn, .start-btn {
    min-height: 42px; padding: 9px 16px; font-size: 14px; line-height: 1.2;
  }
  :root[data-theme="dark"] .btn:not(.secondary):not(.btn-danger),
  :root[data-theme="dark"] .start-btn,
  :root[data-theme="dark"] .chip.on,
  :root[data-theme="dark"] .today-tag {
    color: #102536;
  }
  .practice-nav-action { min-height: 58px; }

  .day-level { font-size: 11px; letter-spacing: .09em; }
  .today-tag { padding: 4px 8px; font-size: 10px; }
  .crowns { font-size: 13px; }
  .day-meta { font-size: 12.5px; }
  .day-actions .btn { min-height: 40px; padding: 8px 11px; font-size: 13px; }

  .filter-label, table.recent th, .leaderboard th,
  .arena-column-title, .random-section-label { font-size: 10.5px; }
  .filter-summary strong { font-size: 13.5px; }
  #browse-count { font-size: 11.5px; }
  .chip { min-height: 35px; padding: 6px 11px; font-size: 12px; }
  .pz-title { font-size: 14px; }
  .pz-meta { font-size: 11.5px; }

  .stat-card .k { font-size: 12.5px; }
  .stat-card .v { display: flex; align-items: baseline; gap: 6px; }
  .stat-card .stat-separator { color: var(--muted); font-size: .56em; font-weight: 750; }
  .bar-row {
    grid-template-columns: 36px minmax(0, 1fr) 92px;
    font-size: 12.5px;
  }
  .weekday-reset-button {
    min-height: 34px; padding-inline: 10px; font-size: 12px;
  }
  table.recent th, table.recent td { padding: 11px 15px; }
  table.recent td { font-size: 13px; }

  .duel-page-guide b { font-size: 12px; }
  .duel-page-guide span, .arena-counts span { font-size: 10.5px; }
  .duel-panel .panel-sub, .account-panel .panel-sub { font-size: 13.5px; }
  .duel-field > span, .duel-field legend { font-size: 12.5px; }
  .duel-choice > span, .duel-advanced summary b { font-size: 13px; }
  .duel-visibility small, .duel-advanced summary small,
  .duel-create-summary { font-size: 11px; }
  .duel-advanced summary::after { font-size: 10.5px; }
  .duel-error { font-size: 12px; }
  .arena-counts span { padding: 4px 8px; }
  .arena-match-title { font-size: 13.5px; }
  .arena-match-meta { font-size: 11.5px; line-height: 1.45; }
  .arena-join { min-height: 38px; padding: 7px 12px; font-size: 12.5px; }
  .duel-meta span, .player-tag, .match-tag { font-size: 11px; }

  .watch-summary p { font-size: 12.5px; }
  .watch-live { font-size: 10.5px; }
  .watch-score-label span { font-size: 10px; }
  .profile-sub { font-size: 13.5px; }
  .account-stat span { font-size: 11px; }
  .auth-form label { font-size: 12.5px; }
  .account-note { font-size: 12px; }
  .history-meta { font-size: 12px; line-height: 1.45; }
  .leaderboard th, .leaderboard td { padding: 10px 7px; }
  .leaderboard td { font-size: 12.5px; }

  .daily-hero p { font-size: 13.5px; }
  .daily-action small, .daily-standings-head span { font-size: 11px; }
  .random-field legend { font-size: 12.5px; }
  .random-choice span { font-size: 12.5px; }

  .g-diff { font-size: 11px; }
  .g-subhead .pill-btn { min-height: 38px; padding: 7px 13px; font-size: 12.5px; }
  .launch .l-date { font-size: 12.5px; }
  .nudge { font-size: 13.5px; }
  .howto summary { padding: 12px 13px; font-size: 13.5px; }
  .howto ol { font-size: 13px; }
  .modal p, .modal-rules { font-size: 14px; }
  .results .r-sub { font-size: 12.5px; }
  .results .r-pill { padding: 6px 11px; font-size: 11.5px; }

  @media (max-width: 680px) {
    .tabs a { font-size: 11px; }
    .account-nav {
      min-width: 58px; max-width: 82px; min-height: 36px;
      padding: 6px 8px; font-size: 11px;
    }
    .btn, .btn-outline, .pill-btn, .start-btn, .duel-input,
    .duel-choice > span, .random-choice span { min-height: 44px; }
    .practice-nav-action, .day-actions .btn, .duel-create-footer .btn,
    .g-actions .pill-btn, .g-subhead .pill-btn { min-height: 44px; }
    .chip, .weekday-reset-button { min-width: 44px; min-height: 44px; }
    .g-header { grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px; }
    .g-header .icon-btn { width: 44px; height: 44px; min-height: 44px; }
    .match-replay-link, .match-history-pagination .btn { min-height: 44px; }
    .page-heading .sub { font-size: 13px; }
    .watch-player-name { font-size: 11.5px; }
    .watch-player-meta { font-size: 9.5px; }
  }
  @media (max-width: 500px) {
    .page-eyebrow { font-size: 10px; }
    .duel-player-name { font-size: 11.5px; }
    .duel-player-status, .history-meta { font-size: 10.5px; }
    .personal-score b, .watch-score-label b { font-size: 10.5px; }
    .watch-score-label span { font-size: 8.5px; }
    .leaderboard {
      width: 100%; min-width: 0; table-layout: fixed;
    }
    .leaderboard th, .leaderboard td { padding: 9px 3px; }
    .leaderboard th:first-child, .leaderboard td:first-child { width: 28px; }
    .leaderboard th:last-child, .leaderboard td:last-child { width: 58px; text-align: right; }
    .leaderboard td:nth-child(2) .profile-link {
      display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .leaderboard .history-meta { font-size: 9.5px; }
    .recent-panel .table-scroll { overflow: visible; }
    table.recent {
      display: block; min-width: 0; border: 0; background: transparent;
    }
    table.recent tbody {
      display: grid; gap: 8px; padding: 0 10px 12px;
    }
    table.recent tr {
      display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px;
      padding: 11px; border: 1px solid var(--line); border-radius: 9px;
      background: var(--surface-soft);
    }
    table.recent tr:first-child { display: none; }
    table.recent td {
      display: grid; gap: 2px; min-width: 0; padding: 0;
      border: 0; overflow-wrap: anywhere;
    }
    table.recent td::before {
      content: attr(data-label); color: var(--muted);
      font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
    }
    table.recent td:last-child { grid-column: 1 / -1; }
    table.recent .recent-empty {
      display: block; grid-column: 1 / -1; padding: 18px 10px;
    }
    table.recent .recent-empty::before { content: none; }
    .random-choice span { min-height: 42px; font-size: 11.5px; }
    .g-diff { font-size: 10px; }
  }
  @media (max-width: 380px) {
    .tabs a { padding-inline: 4px; font-size: 10.25px; }
    .account-nav { min-width: 52px; max-width: 64px; }
  }
  @media (pointer: coarse) {
    .btn, .btn-outline, .pill-btn, .start-btn, .duel-input,
    .duel-choice > span, .random-choice span { min-height: 44px; }
    .practice-nav-action, .day-actions .btn, .duel-create-footer .btn,
    .g-actions .pill-btn, .g-subhead .pill-btn { min-height: 44px; }
    .chip, .weekday-reset-button { min-height: 44px; }
    .tabs a, .account-nav, .theme-btn { min-height: 44px; }
  }

  /* ===== Live spectator broadcast ===== */
  #view-watch {
    width: min(100%, 1180px); max-width: 1180px;
    padding-top: 22px;
  }
  .watch-page-heading {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    margin: -1px; padding: 0; clip-path: inset(50%); white-space: nowrap;
  }
  .watch-page-heading h1 { font-size: clamp(28px, 3.2vw, 38px); }
  .watch-page-heading .sub { font-size: 13px; }
  .watch-shell {
    --watch-left: #2383E2;
    --watch-right: #0A9B8E;
    position: relative; gap: 12px;
  }
  .watch-summary {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(160px, auto) auto;
    align-items: center; gap: 12px; min-height: 78px; padding: 10px 14px;
    border: 0; border-radius: 18px; color: #F7FBFF;
    background:
      radial-gradient(circle at 91% 18%, rgba(113, 235, 220, .25), transparent 25%),
      linear-gradient(118deg, #06365D 0%, #075EAB 54%, #087A72 118%);
    box-shadow: 0 16px 40px rgba(5, 54, 93, .18);
  }
  .watch-summary::before {
    content: ""; position: absolute; z-index: -1; inset: 0;
    background-image:
      linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
    background-size: 24px 24px;
    mask-image: linear-gradient(90deg, transparent 20%, #000);
  }
  .watch-summary::after {
    content: ""; position: absolute; z-index: -1; right: -42px; bottom: -116px;
    width: 260px; height: 260px; border: 34px solid rgba(255,255,255,.065);
    border-radius: 50%; transform: rotate(-18deg);
  }
  .watch-summary-main { min-width: 0; }
  .watch-kicker {
    display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
    margin-bottom: 4px;
  }
  .watch-summary .duel-code {
    padding: 4px 8px; border: 1px solid rgba(255,255,255,.22); border-radius: 7px;
    color: #E9F6FF; background: rgba(3, 26, 46, .22);
    font-size: 11px; line-height: 1; letter-spacing: .12em;
  }
  .watch-live {
    position: relative; padding: 5px 9px; color: #063823;
    background: #92F0BE; font-size: 10px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.2);
  }
  .watch-live::before {
    width: 7px; height: 7px; background: #087A45;
    animation: watch-live-beacon 1.7s ease-in-out infinite;
  }
  :root[data-theme="dark"] .watch-live { color: #063823; background: #92F0BE; }
  .watch-round-chip {
    padding: 5px 9px; border-radius: 999px;
    color: rgba(255,255,255,.88); background: rgba(255,255,255,.12);
    font-size: 10px; font-weight: 850; letter-spacing: .06em; text-transform: uppercase;
  }
  .watch-summary h2 {
    margin: 0 0 3px; color: #FFFFFF;
    font-size: clamp(18px, 2vw, 25px); line-height: 1.05; letter-spacing: -.03em;
  }
  .watch-summary h1 {
    margin: 0 0 3px; color: #FFFFFF;
    font-size: clamp(18px, 2vw, 25px); line-height: 1.05; letter-spacing: -.03em;
  }
  .watch-summary p {
    max-width: 780px; margin: 0; color: rgba(239, 248, 255, .76);
    font-size: 12px; line-height: 1.35;
  }
  .watch-summary-actions {
    position: relative; z-index: 1; grid-column: 3; grid-row: 1;
    display: flex; align-items: center;
  }
  .watch-audience {
    position: relative; z-index: 1; grid-column: 2; grid-row: 1;
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px;
    align-items: center; min-width: 0; max-width: 320px; padding-left: 12px;
    border-left: 1px solid rgba(255,255,255,.15);
  }
  .watch-audience-count {
    display: inline-flex; align-items: center; gap: 7px;
    color: rgba(245,251,255,.82); font-size: 10px; font-weight: 850;
    white-space: nowrap;
  }
  .watch-audience-count::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: #7EE4CE; box-shadow: 0 0 0 4px rgba(126,228,206,.13);
  }
  .watch-audience-list {
    display: flex; gap: 6px; min-width: 0; overflow-x: auto;
    padding-bottom: 2px; overscroll-behavior-inline: contain;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.28) transparent;
  }
  .watch-audience-list::-webkit-scrollbar { height: 3px; }
  .watch-audience-list::-webkit-scrollbar-thumb {
    border-radius: 999px; background: rgba(255,255,255,.28);
  }
  .watch-spectator {
    flex: none; max-width: 190px; overflow: hidden;
    padding: 5px 9px; border: 1px solid rgba(255,255,255,.17);
    border-radius: 999px; color: #F6FBFF; background: rgba(3,24,42,.24);
    font-size: 9.5px; font-weight: 800; line-height: 1.15;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .watch-spectator.registered {
    color: #13232D; background: rgba(255,255,255,.94);
    border-color: rgba(255,255,255,.7);
  }
  .watch-spectator .profile-link { color: inherit; }
  .watch-spectator .watch-guest-label {
    color: rgba(239,248,255,.66); font-size: .92em; font-weight: 700;
  }
  .watch-spectator.anonymous { color: rgba(246,251,255,.82); }
  .watch-audience-empty {
    color: rgba(239,248,255,.62); font-size: 9.5px; font-weight: 700;
  }
  .watch-sound-toggle {
    display: grid; grid-template-columns: 30px; gap: 0;
    align-items: center; min-width: 42px; min-height: 42px; padding: 5px;
    border: 1px solid rgba(255,255,255,.24); border-radius: 11px;
    color: #FFFFFF; background: rgba(3, 24, 42, .25);
    text-align: left; backdrop-filter: blur(8px);
    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
  }
  .watch-sound-toggle:hover:not(:disabled) {
    border-color: rgba(255,255,255,.52); background: rgba(3, 24, 42, .38);
    transform: translateY(-1px);
  }
  .watch-sound-toggle:disabled { cursor: not-allowed; opacity: .62; }
  .watch-sound-icon {
    display: grid; width: 30px; height: 30px; place-items: center;
    border-radius: 8px; color: #CDE9FF; background: rgba(255,255,255,.12);
  }
  .watch-sound-icon svg { width: 20px; height: 20px; fill: currentColor; }
  .watch-sound-toggle[aria-pressed="true"] .watch-sound-icon {
    color: #072F27; background: #7EE4CE;
    box-shadow: 0 0 0 5px rgba(126,228,206,.12);
  }
  .watch-sound-copy { display: none; min-width: 0; }
  .watch-sound-copy b { font-size: 12px; line-height: 1.1; }
  .watch-sound-copy small {
    margin-top: 3px; color: rgba(239,248,255,.68);
    font-size: 9.5px; line-height: 1.2; white-space: nowrap;
  }
  .watch-scoreboard {
    --watch-score-center-width: clamp(180px, 20vw, 240px);
    position: relative; display: grid; overflow: hidden;
    grid-template-columns: minmax(0, 1fr) var(--watch-score-center-width) minmax(0, 1fr);
    gap: 14px; align-items: center; min-height: 88px; padding: 11px 18px;
    border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .watch-scoreboard::before, .watch-scoreboard::after {
    content: ""; position: absolute; inset-block: 12px; width: 4px;
    border-radius: 999px;
  }
  .watch-scoreboard::before { left: 7px; background: var(--watch-left); }
  .watch-scoreboard::after { right: 7px; background: var(--watch-right); }
  .watch-scoreboard > * {
    min-width: 0; max-width: 100%; overflow: hidden;
  }
  .watch-score-player {
    position: relative; min-width: 0; max-width: 100%; min-height: 64px;
    display: flex; align-items: center; overflow: hidden; padding-block: 14px;
  }
  .watch-score-player.left { justify-content: flex-start; text-align: left; }
  .watch-score-player.right { justify-content: flex-end; text-align: right; }
  .watch-scoreboard-name {
    width: 100%; min-width: 0; overflow: hidden; font-size: 17px; font-weight: 900;
    line-height: 1.2; text-overflow: ellipsis; white-space: nowrap;
  }
  .watch-scoreboard-name .profile-link {
    display: block; max-width: 100%; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .watch-penalty-total {
    position: absolute; inset-block-end: 3px; min-width: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 3px 6px; border: 1px solid transparent;
    border-radius: 999px; visibility: hidden; opacity: 0;
    color: var(--danger); background: var(--danger-soft);
    font-size: 9px; font-weight: 900; line-height: 1; text-align: center;
  }
  .watch-score-player.left .watch-penalty-total { left: 0; }
  .watch-score-player.right .watch-penalty-total { right: 0; }
  .watch-penalty-total.is-visible {
    visibility: visible; opacity: 1;
    border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  }
  .watch-penalty-total.is-fresh { animation: penalty-total-notice 1650ms ease-out; }
  .watch-session-score {
    max-width: 100%; display: inline-flex; align-items: baseline;
    justify-content: center; gap: 3px; margin: 1px 0 2px;
    color: var(--muted); font-size: 10px; font-weight: 800;
    letter-spacing: .04em; line-height: 1; white-space: nowrap;
  }
  .watch-session-score > span {
    font-size: 10px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase;
  }
  .watch-session-score .watch-score-number {
    color: var(--muted); font-size: 11px; font-weight: 950;
  }
  .watch-session-score .watch-score-number.left { color: var(--watch-left); }
  .watch-session-score .watch-score-number.right { color: var(--watch-right); }
  .watch-session-score i { color: var(--line-strong); font-style: normal; }
  .watch-score-center {
    --watch-score-meta-height: 40px;
    display: grid; align-content: center; justify-items: center;
    min-width: 0; max-width: 100%; overflow: hidden;
    padding-inline: 12px; text-align: center;
    border-inline: 1px solid var(--line);
  }
  .watch-score-heading {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    color: var(--accent-strong); font-size: 10.5px; font-weight: 900;
    letter-spacing: .09em; text-transform: uppercase;
  }
  .watch-score-heading i { color: var(--line-strong); font-style: normal; }
  .watch-current-score {
    display: grid; grid-template-columns: minmax(1.5ch, auto) 20px minmax(1.5ch, auto);
    align-items: center; justify-content: center; margin: 2px 0 1px;
  }
  .watch-current-score .watch-score-number {
    min-width: 1.5ch; color: var(--ink); font-size: 34px; font-weight: 950;
    line-height: .95; letter-spacing: -.045em; text-align: center;
  }
  .watch-current-score .watch-score-number.left {
    text-decoration: underline 3px color-mix(in srgb, var(--watch-left) 66%, transparent);
    text-underline-offset: 5px;
  }
  .watch-current-score .watch-score-number.right {
    text-decoration: underline 3px color-mix(in srgb, var(--watch-right) 66%, transparent);
    text-underline-offset: 5px;
  }
  .watch-current-score-separator {
    color: var(--muted); font-size: 23px; font-weight: 650; line-height: 1;
  }
  .watch-score-meta {
    display: flex; width: 100%; min-width: 0;
    height: var(--watch-score-meta-height); min-height: var(--watch-score-meta-height);
    align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  }
  .watch-score-meta small {
    max-width: 86px; overflow: hidden; color: var(--muted);
    font-size: 11px; font-weight: 750; line-height: 1.15;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .watch-score-meta small::before {
    content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 6px 2px 0;
    border-radius: 50%; background: var(--line-strong);
  }
  .watch-score-number {
    transition: color 220ms ease, filter 220ms ease;
  }
  .watch-score-number.round-winner {
    color: var(--success);
    filter: drop-shadow(0 4px 9px color-mix(in srgb, var(--success) 24%, transparent));
  }
  .watch-score-number.round-loser { color: var(--muted); }
  .watch-grid {
    position: relative; grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%; max-width: 1180px; gap: 12px; margin-inline: auto;
  }
  .watch-card {
    --watch-player-accent: var(--watch-left);
    --watch-mirror: 1;
    position: relative; isolation: isolate; min-width: 0; padding: 11px;
    overflow: hidden; border: 1px solid var(--line); border-radius: 16px;
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--watch-player-accent) 5%, var(--surface)), var(--surface) 90px);
    box-shadow: var(--shadow-sm);
    transition: border-color 260ms ease, box-shadow 260ms ease;
  }
  .watch-card.watch-side-right {
    --watch-player-accent: var(--watch-right);
    --watch-mirror: -1;
  }
  .watch-card.watch-card-empty {
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    align-self: stretch;
  }
  .watch-card-empty .watch-player-head { width: 100%; }
  .watch-card-empty .watch-empty {
    width: 100%; height: 100%; min-height: 0; align-self: stretch;
    place-items: center;
  }
  .watch-card::before {
    content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0;
    height: 3px; background: var(--watch-player-accent);
    opacity: .72; transform-origin: left;
  }
  .watch-player-head {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 4px 10px; min-height: 42px; margin-bottom: 8px;
  }
  .watch-player-identity { min-width: 0; }
  .watch-seat-label {
    display: block; margin-bottom: 1px; color: var(--watch-player-accent);
    font-size: 8.5px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
  }
  .watch-player-name {
    color: var(--ink); font-size: 14px; line-height: 1.2;
  }
  .watch-player-state {
    display: grid; justify-items: end; gap: 3px; min-width: 0;
  }
  .watch-player-meta {
    color: var(--muted); font-size: 10px; font-weight: 750; line-height: 1.2;
  }
  .watch-conflict-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px; border: 1px solid color-mix(in srgb, var(--danger) 48%, transparent);
    border-radius: 999px; color: var(--danger); background: var(--danger-soft);
    font-size: 8.5px; font-weight: 900; line-height: 1.2;
    letter-spacing: .05em; text-transform: uppercase;
  }
  .watch-conflict-badge::before {
    content: "!"; display: grid; width: 13px; height: 13px; place-items: center;
    border-radius: 50%; color: #FFF; background: var(--danger);
    font-size: 9px; line-height: 1;
  }
  .watch-board-slot {
    position: relative; isolation: isolate; width: 100%; aspect-ratio: 1;
    overflow: hidden; contain: paint;
    border-radius: 9px; background: var(--pill);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--board-line) 25%, transparent);
  }
  .watch-board-slot > .watch-board,
  .watch-board-slot > .watch-standby {
    position: absolute; inset: 0; width: 100%; height: 100%;
  }
  .watch-board {
    position: relative; border-width: clamp(3px, .42vw, 6px); border-radius: 9px;
    transform-origin: center;
    animation: watch-board-reveal 200ms ease-out both;
  }
  .watch-cell {
    position: relative; isolation: isolate; overflow: hidden;
  }
  .watch-cell::before, .watch-cell::after { pointer-events: none; }
  .watch-cell .mark-x line { stroke: #18242C; }
  .watch-cell .crown-svg { fill: #18242C; }
  .watch-cell.watch-move-pop {
    animation: watch-cell-touch 240ms var(--ease-out);
  }
  .watch-cell.watch-move-pop .mark-x { animation: none; }
  .watch-cell.watch-move-pop .mark-x line {
    animation: watch-x-draw 180ms ease-out both;
  }
  .watch-cell.watch-move-pop .mark-x line:nth-child(2) { animation-delay: 45ms; }
  .watch-cell.watch-move-pop .crown-svg {
    animation: watch-queen-land 300ms cubic-bezier(.14,.9,.34,1.18);
    transform-origin: center;
  }
  .watch-cell.watch-conflict {
    z-index: 2;
    box-shadow:
      inset 0 0 0 max(2px, .16vw) rgba(190, 22, 39, .92),
      inset 0 0 18px rgba(204, 16, 22, .32);
  }
  .watch-cell.watch-conflict::after {
    content: ""; position: absolute; z-index: 2; inset: 0;
    background: color-mix(in srgb, var(--danger) 10%, transparent);
  }
  .watch-cell.watch-conflict .crown-svg {
    z-index: 3; fill: #8F101E;
    filter: drop-shadow(0 0 4px rgba(255,255,255,.9)) drop-shadow(0 2px 5px rgba(127,0,12,.45));
    animation: none;
  }
  .watch-card.watch-has-conflict {
    border-color: color-mix(in srgb, var(--danger) 60%, var(--line));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--danger) 14%, transparent);
  }
  .watch-conflict-flow {
    position: absolute; z-index: 4; inset: clamp(3px, .42vw, 6px);
    pointer-events: none;
    background-image: linear-gradient(
      135deg,
      rgba(204, 16, 22, .36) 0 25%,
      transparent 25% 50%,
      rgba(204, 16, 22, .36) 50% 75%,
      transparent 75% 100%
    );
    background-size: 14px 14px;
    animation: watch-conflict-flow 1100ms linear infinite;
  }
  .watch-cell.watch-penalty-cell {
    z-index: 5;
    box-shadow: inset 0 0 0 max(2px, .16vw) color-mix(in srgb, var(--danger) 78%, #FFF);
  }
  .watch-penalty-pop {
    position: absolute; z-index: 7; left: 50%; top: 9%;
    padding: 3px 6px; border: 1px solid color-mix(in srgb, var(--danger) 42%, transparent);
    border-radius: 999px; color: #A71F29; background: color-mix(in srgb, var(--danger-soft) 92%, #FFF);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--danger) 18%, transparent);
    font-size: clamp(10px, 1.5vw, 16px); font-weight: 950; line-height: 1;
    transform: translateX(-50%); pointer-events: none;
    animation: no-guess-rise 1650ms cubic-bezier(.2,.72,.25,1) forwards;
  }
  .watch-standby {
    z-index: 2; border-width: clamp(3px, .42vw, 6px); border-radius: 9px;
    background: #172631;
    opacity: 1; transition: opacity 150ms ease-out;
  }
  .watch-standby.is-revealing { pointer-events: none; opacity: 0; }
  .watch-standby::after {
    content: ""; position: absolute; z-index: 1; inset: -40% -55%;
    background: linear-gradient(108deg, transparent 42%, rgba(255,255,255,.18) 50%, transparent 58%);
    opacity: .22; transform: scaleX(var(--watch-mirror)) rotate(8deg);
  }
  .watch-standby-grid {
    inset: -22px; filter: blur(11px) saturate(.72) brightness(.82);
    transform: scaleX(var(--watch-mirror)) scale(1.1);
  }
  .watch-countdown-overlay {
    z-index: 3; gap: 7px; padding: 10px;
    background:
      radial-gradient(circle at center, rgba(5, 79, 132, .18), rgba(10, 21, 30, .7));
    backdrop-filter: blur(1px);
  }
  .watch-countdown-overlay.is-dismissed {
    pointer-events: none;
    animation: watch-countdown-dismiss 150ms ease-out forwards;
  }
  .watch-countdown-overlay > span {
    color: rgba(255,255,255,.8); font-size: clamp(8px, 1vw, 11px);
  }
  .watch-countdown-stage {
    position: relative; display: grid; width: clamp(88px, 14vw, 152px);
    aspect-ratio: 1; place-items: center;
  }
  .watch-countdown-ring {
    position: absolute; inset: 0; border-radius: 50%;
    background: conic-gradient(#7EE4CE var(--watch-countdown-progress, 0deg), rgba(255,255,255,.17) 0);
    filter: drop-shadow(0 8px 20px rgba(0,0,0,.25));
    animation: watch-ring-breathe 1s ease-in-out infinite;
  }
  .watch-countdown-ring::before {
    content: ""; position: absolute; inset: 6px; border-radius: inherit;
    background: rgba(8, 31, 48, .84);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .watch-countdown-overlay b {
    position: relative; z-index: 1; min-width: 0;
    font-size: clamp(56px, 9vw, 98px); letter-spacing: -.07em;
  }
  .watch-countdown-overlay b.watch-waiting-dots {
    display: flex; width: 100%; height: 100%; align-items: center; justify-content: center;
    gap: 4%; padding: 0; font-size: 0; line-height: 1; letter-spacing: 0;
  }
  .watch-waiting-dots i {
    display: block; width: 17%; aspect-ratio: 1; flex: 0 0 auto;
    border-radius: 50%; background: currentColor;
  }
  .watch-countdown-overlay.is-go b {
    font-size: clamp(36px, 6vw, 66px); letter-spacing: -.05em;
  }
  .watch-countdown-overlay b.ticking {
    animation: watch-countdown-tick 760ms cubic-bezier(.16,.82,.24,1) both;
  }
  .watch-countdown-overlay small {
    max-width: 210px; margin-top: 0; color: rgba(255,255,255,.77);
    font-size: clamp(8px, 1vw, 11px); line-height: 1.25;
  }
  .watch-round-result .watch-board {
    filter: grayscale(.88) saturate(.18) brightness(.68);
  }
  .watch-card.watch-finished-wait .watch-board {
    filter: grayscale(.9) saturate(.16) brightness(.72);
  }
  .watch-finish-wait-overlay {
    position: absolute; z-index: 7; inset: 0; display: grid; place-content: center;
    justify-items: center; gap: 4px; padding: 10px; color: #F7FAFC;
    background: rgba(36, 45, 52, .48); text-align: center;
    pointer-events: none; backdrop-filter: blur(1.5px);
    animation: watch-finish-wait-in 240ms ease-out both;
  }
  .watch-finish-wait-overlay span {
    font-size: clamp(9px, 1.1vw, 12px); font-weight: 900;
    letter-spacing: .1em; text-transform: uppercase;
  }
  .watch-finish-wait-overlay b {
    font-size: clamp(34px, 6vw, 68px); font-weight: 950; line-height: 1;
    font-variant-numeric: tabular-nums; text-shadow: 0 5px 20px rgba(0,0,0,.24);
  }
  .watch-finish-wait-overlay small {
    max-width: 90%; color: rgba(255,255,255,.8); font-size: clamp(9px, 1vw, 12px);
    font-weight: 750;
  }
  .watch-card.watch-round-winner {
    border-color: color-mix(in srgb, #13A35D 76%, var(--line));
    box-shadow: 0 18px 46px rgba(9, 130, 69, .24);
  }
  .watch-card.watch-round-loser {
    border-color: color-mix(in srgb, var(--muted) 42%, var(--line));
    box-shadow: var(--shadow-sm);
  }
  .watch-round-result .watch-conflict-badge { display: none; }
  .watch-result-overlay {
    z-index: 8; gap: 4px; padding: 12px;
    overflow: hidden; backdrop-filter: blur(3px);
    animation: watch-score-arrive 420ms var(--ease-out) both;
  }
  .watch-result-overlay::before {
    content: ""; position: absolute; inset: -45%;
    background-image:
      radial-gradient(circle, rgba(255,255,255,.72) 0 2px, transparent 2.5px),
      radial-gradient(circle, rgba(255,221,113,.72) 0 2px, transparent 2.5px);
    background-position: 0 0, 18px 22px; background-size: 44px 44px, 53px 53px;
    opacity: 0; pointer-events: none;
  }
  .watch-result-overlay.winner {
    background:
      radial-gradient(circle at 50% 40%, rgba(84, 236, 151, .28), transparent 38%),
      linear-gradient(145deg, rgba(3, 76, 39, .78), rgba(15, 157, 82, .88));
  }
  .watch-result-overlay.winner::before {
    opacity: .32;
  }
  .watch-result-overlay.loser {
    background:
      radial-gradient(circle at 50% 40%, rgba(255,255,255,.1), transparent 38%),
      linear-gradient(145deg, rgba(48, 57, 64, .76), rgba(75, 85, 92, .88));
  }
  .watch-result-kicker {
    position: relative; z-index: 1; font-size: clamp(9px, 1.2vw, 13px) !important;
  }
  .watch-result-overlay b {
    position: relative; z-index: 1; margin: 2px 0;
    font-size: clamp(58px, 9vw, 112px);
    text-shadow: 0 7px 26px rgba(0,0,0,.28);
    animation: watch-result-number 520ms cubic-bezier(.14,.9,.28,1.16) 100ms both;
  }
  .watch-result-overlay small {
    position: relative; z-index: 1; margin-top: 0;
    font-size: clamp(9px, 1.1vw, 13px);
  }
  .watch-result-name {
    position: relative; z-index: 1; margin-top: 5px;
    color: rgba(255,255,255,.84); font-size: clamp(9px, 1.05vw, 12px);
    font-style: normal; font-weight: 800;
  }
  .watch-footer {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 12px;
    min-height: 52px; padding: 9px 12px 9px 15px;
    border: 1px solid var(--line); border-radius: 13px;
    color: var(--muted); background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .watch-footer .duel-expiry {
    min-width: 0; overflow: hidden; justify-self: start; font-size: 11px;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .watch-footer-center { grid-column: 2; justify-self: center; }
  .watch-footer-actions { grid-column: 3; justify-self: end; }
  .watch-footer .btn { min-height: 36px; padding: 7px 13px; font-size: 12px; }

  @keyframes watch-live-beacon {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .55; transform: scale(.78); }
  }
  @keyframes watch-countdown-dismiss {
    to { opacity: 0; visibility: hidden; }
  }
  @keyframes watch-cell-touch {
    0% { filter: brightness(1); }
    38% { filter: brightness(1.23); }
    100% { filter: brightness(1); }
  }
  @keyframes watch-x-draw {
    from { stroke-dasharray: 122; stroke-dashoffset: 122; }
    to { stroke-dasharray: 122; stroke-dashoffset: 0; }
  }
  @keyframes watch-queen-land {
    0% { opacity: .3; transform: translateY(-10%) scale(.72); }
    68% { opacity: 1; transform: translateY(1%) scale(1.05); }
    100% { transform: none; }
  }
  @keyframes watch-conflict-flow {
    from { background-position: 0 0; }
    to { background-position: 14px 0; }
  }
  @keyframes watch-finish-wait-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes watch-ring-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); }
  }
  @keyframes watch-result-number {
    from { opacity: 0; transform: translateY(5px) scale(.92); }
    to { opacity: 1; transform: none; }
  }
  @keyframes watch-winner-particles {
    from { transform: translate3d(-3%, 8%, 0) rotate(0deg); }
    to { transform: translate3d(3%, -8%, 0) rotate(8deg); }
  }

  @media (max-width: 720px) {
    #view-watch { padding: 10px 8px max(34px, env(safe-area-inset-bottom)); }
    .watch-shell { gap: 8px; }
    .watch-summary {
      grid-template-columns: minmax(0, 1fr) auto; min-height: 70px;
      gap: 8px; padding: 9px 10px; border-radius: 14px;
    }
    .watch-summary-actions { grid-column: 2; grid-row: 1; }
    .watch-summary h1, .watch-summary h2 { font-size: clamp(19px, 5.6vw, 25px); }
    .watch-summary p {
      max-width: 50ch; overflow: hidden; font-size: 10px;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .watch-kicker { margin-bottom: 5px; }
    .watch-summary .duel-code, .watch-round-chip { font-size: 9.5px; }
    .watch-round-chip { display: none; }
    .watch-live { align-self: auto; font-size: 10px; }
    .watch-audience {
      grid-column: 1 / -1; grid-row: 2; gap: 7px; max-width: none;
      padding: 5px 0 0; border-top: 1px solid rgba(255,255,255,.15); border-left: 0;
    }
    .watch-audience-count { gap: 5px; font-size: 10px; }
    .watch-audience-count::before {
      width: 6px; height: 6px; box-shadow: 0 0 0 3px rgba(126,228,206,.13);
    }
    .watch-audience-list { gap: 4px; }
    .watch-spectator { max-width: 140px; padding: 4px 7px; font-size: 10px; }
    .watch-audience-empty { font-size: 10px; }
    .watch-sound-toggle {
      grid-template-columns: 30px; min-width: 0; min-height: 46px; padding: 7px;
      border-radius: 11px;
    }
    .watch-sound-icon { width: 30px; height: 30px; border-radius: 8px; }
    .watch-sound-copy { display: none; }
    .watch-scoreboard {
      --watch-score-center-width: clamp(106px, 31vw, 118px);
      gap: 5px; min-height: 86px; padding: 7px 9px; border-radius: 12px;
    }
    .watch-scoreboard::before, .watch-scoreboard::after {
      inset-block: 9px; width: 3px;
    }
    .watch-score-player {
      width: 100%; min-height: 70px; display: flex; align-items: center;
      padding-block: 14px;
    }
    .watch-score-player.left { justify-content: flex-start; }
    .watch-score-player.right { justify-content: flex-end; }
    .watch-scoreboard-name {
      width: 100%; max-width: 100%; font-size: clamp(13px, 3.8vw, 15px);
    }
    .watch-scoreboard-name .player-tag { display: none; }
    .watch-penalty-total {
      inset-block-end: 4px; min-width: 27px; padding: 2px 4px; font-size: 7.5px;
    }
    .watch-session-score {
      min-height: 15px; gap: 3px; margin: 4px 0 0; padding: 2px 5px;
      border-radius: 999px; background: var(--surface-soft); font-size: 11px;
    }
    .watch-session-score > span { display: none; }
    .watch-session-score .watch-score-number { font-size: 11px; }
    .watch-score-center {
      --watch-score-meta-height: 17px;
      width: 100%; min-height: 78px; grid-template-rows: 16px 25px 17px 17px;
      align-content: center; row-gap: 1px; padding: 2px 5px;
    }
    .watch-score-heading {
      display: grid; gap: 0; width: 100%; font-size: 11px;
      line-height: 1.05; letter-spacing: .045em;
    }
    .watch-score-heading i, .watch-score-heading span:last-child { display: none; }
    .watch-current-score {
      grid-template-columns: minmax(1.35ch, auto) 13px minmax(1.35ch, auto);
      margin-top: 3px;
    }
    .watch-current-score .watch-score-number {
      font-size: clamp(20px, 5.8vw, 24px);
    }
    .watch-current-score-separator { font-size: 14px; }
    .watch-score-meta {
      display: grid; width: 100%; place-items: center;
    }
    .watch-score-meta small { display: none; }
    .watch-score-meta small::before { margin-right: 3px; }
    .watch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .watch-card { padding: 5px; border-radius: 11px; }
    .watch-player-head {
      min-height: 37px; gap: 2px 5px; margin-bottom: 4px;
    }
    .watch-seat-label { font-size: 9px; }
    .watch-player-name { font-size: 11px; }
    .watch-player-name .player-tag { display: none; }
    .watch-player-state { gap: 1px; }
    .watch-player-meta { display: block; font-size: 11px; }
    .watch-conflict-badge {
      gap: 2px; padding: 2px 4px; font-size: 0; letter-spacing: .025em;
    }
    .watch-conflict-badge::before { width: 10px; height: 10px; font-size: 7px; }
    .watch-conflict-badge::after { content: "Clash"; font-size: 8px; }
    .watch-board-slot, .watch-board, .watch-standby { border-radius: 6px; }
    .watch-countdown-stage { width: clamp(66px, 22vw, 92px); }
    .watch-countdown-ring::before { inset: 4px; }
    .watch-countdown-overlay { gap: 4px; }
    .watch-countdown-overlay b { font-size: clamp(43px, 14vw, 62px); }
    .watch-countdown-overlay.is-go b { font-size: clamp(27px, 9vw, 40px); }
    .watch-finish-wait-overlay { gap: 2px; padding: 5px; }
    .watch-finish-wait-overlay b { font-size: clamp(22px, 7.5vw, 34px); }
    .watch-finish-wait-overlay small { font-size: 8px; }
    .watch-result-overlay { gap: 2px; padding: 5px; }
    .watch-result-overlay b {
      max-width: 100%; overflow-wrap: anywhere;
      font-size: clamp(34px, 11vw, 48px);
    }
    .watch-result-overlay small { margin-top: 0; }
    .watch-result-name {
      max-width: 100%; overflow: hidden; margin-top: 2px;
      text-overflow: ellipsis; white-space: nowrap;
    }
    .watch-footer { gap: 5px; min-height: 44px; padding: 6px 7px; }
    .watch-footer .duel-expiry { font-size: 10.5px; }
    .watch-footer .btn { min-height: 44px; padding: 8px 10px; font-size: 10px; }
  }
  @media (max-width: 380px) {
    .watch-summary p { display: none; }
    .watch-summary { min-height: 78px; }
    .watch-round-chip { display: none; }
    .watch-scoreboard { --watch-score-center-width: 102px; gap: 3px; padding-inline: 7px; }
    .watch-scoreboard-name { font-size: 13.5px; }
    .watch-session-score { font-size: 11px; }
    .watch-session-score .watch-score-number { font-size: 11px; }
    .watch-penalty-total { min-width: 24px; padding-inline: 3px; }
    .watch-score-meta small { display: none; }
    .watch-player-meta { font-size: 10.5px; }
    .watch-conflict-badge { max-width: 69px; overflow: hidden; white-space: nowrap; }
  }
  /* Match records, precise finishes, and replay studio */
  .leaderboard-wrap { min-width: 0; overflow: hidden; }
  .leaderboard {
    width: 100%; min-width: 0; table-layout: fixed;
  }
  .leaderboard th:first-child, .leaderboard td:first-child { width: 30px; }
  .leaderboard th:last-child, .leaderboard td:last-child {
    width: 66px; padding-right: 2px; text-align: right;
  }
  .leaderboard th:nth-child(2), .leaderboard td:nth-child(2) { min-width: 0; }
  .leaderboard td:nth-child(2) .profile-link {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .leaderboard td:last-child .rating-value { white-space: nowrap; }

  .watch-score-center .watch-round-clock {
    display: grid; min-width: 72px; height: var(--watch-score-meta-height); place-items: center;
    color: var(--ink); line-height: 1;
    font-size: clamp(18px, 2.4vw, 28px); font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
  }
  .watch-score-center.is-final .watch-round-clock {
    color: var(--muted); font-size: 13px; letter-spacing: .08em;
  }
  .watch-result-overlay b.watch-finish-time {
    font-size: clamp(30px, 5.4vw, 68px); letter-spacing: -.055em;
  }
  .watch-result-overlay b.watch-finish-time.did-not-finish {
    max-width: 18ch; font-size: clamp(19px, 3vw, 34px); letter-spacing: -.02em;
  }
  .watch-footer-actions { display: flex; gap: 7px; }

  .duel-round-times {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0 4px;
  }
  .duel-round-time {
    min-width: 0; padding: 11px; border: 1px solid var(--line); border-radius: 11px;
    background: var(--surface-soft); text-align: left;
  }
  .duel-round-time.winner {
    border-color: color-mix(in srgb, var(--success) 55%, var(--line));
    background: var(--success-soft);
  }
  .duel-round-time.loser {
    border-color: color-mix(in srgb, var(--danger) 42%, var(--line));
    background: var(--danger-soft);
  }
  .duel-round-time.tie {
    border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
    background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  }
  .duel-round-time > span, .duel-round-time > b, .duel-round-time > small { display: block; }
  .duel-round-time > span {
    overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .duel-round-time > b {
    margin-top: 4px; font-size: 23px; font-variant-numeric: tabular-nums;
    letter-spacing: -.04em;
  }
  .duel-round-time > small { margin-top: 4px; color: var(--muted); font-size: 9px; }
  .duel-round-breakdown {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px; margin-top: 7px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    border-radius: 8px; background: color-mix(in srgb, var(--surface) 72%, transparent);
  }
  .duel-round-breakdown > div {
    min-width: 0; display: grid; gap: 3px; padding: 7px 4px;
    text-align: center;
  }
  .duel-round-breakdown > div + div { border-left: 1px solid var(--line); }
  .duel-round-breakdown small {
    color: var(--muted); font-size: 7px; font-weight: 900;
    letter-spacing: .06em; line-height: 1; text-transform: uppercase;
  }
  .duel-round-breakdown b {
    min-width: 0; overflow: hidden; color: var(--ink); font-size: 13px;
    font-weight: 950; line-height: 1; letter-spacing: -.035em;
    font-variant-numeric: tabular-nums;
  }
  .duel-round-breakdown .final b { color: var(--accent); }
  .duel-result-actions {
    display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .duel-result-actions > * { width: 100%; }
  .duel-result-actions .primary-wide { grid-column: 1 / -1; }
  .duel-result-actions .secondary-centered {
    grid-column: 1 / -1; justify-self: center; width: calc(50% - 3.5px);
  }

  .round-overview { text-align: left; }
  .round-overview-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
  }
  .round-overview-head h3 { margin: 0; }
  .round-overview-head p { margin: 4px 0 0; color: var(--muted); }
  .round-overview-list { display: grid; gap: 7px; max-height: 48vh; overflow-y: auto; }
  .round-overview-row {
    display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 9px;
    align-items: center; padding: 10px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--surface-soft);
  }
  a.round-overview-row { color: inherit; text-decoration: none; }
  a.round-overview-row:hover { border-color: var(--accent); }
  .round-overview-number {
    display: grid; width: 36px; height: 36px; place-items: center; border-radius: 9px;
    color: var(--accent-strong); background: var(--accent-soft); font-weight: 900;
  }
  .round-overview-names {
    min-width: 0; overflow: hidden; font-size: 11px; font-weight: 800;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .round-overview-times {
    margin-top: 3px; color: var(--muted); font-size: 10px;
    font-variant-numeric: tabular-nums;
  }
  .round-overview-score { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }

  .viewer-h2h {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 12px; align-items: center; padding: 16px;
    border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
    border-radius: 13px; background:
      linear-gradient(130deg, var(--accent-soft), var(--surface) 58%);
  }
  .viewer-h2h-player { min-width: 0; }
  .viewer-h2h-player:last-child { text-align: right; }
  .viewer-h2h-player b, .viewer-h2h-player span { display: block; }
  .viewer-h2h-player b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .viewer-h2h-player span { margin-top: 2px; color: var(--muted); font-size: 10px; }
  .viewer-h2h-score {
    color: var(--accent-strong); font-size: 31px; font-weight: 950;
    font-variant-numeric: tabular-nums; letter-spacing: -.05em;
  }

  .match-history-list { display: grid; gap: 8px; }
  .match-history-row {
    display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px;
    align-items: center; padding: 11px; border: 1px solid var(--line);
    border-radius: 11px; background: var(--surface-soft);
  }
  .match-history-copy { min-width: 0; }
  .match-history-title {
    display: flex; align-items: center; gap: 7px; min-width: 0;
    font-size: 13px; font-weight: 850;
  }
  .match-history-title > span:first-child {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .match-history-score {
    font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums;
  }
  .match-history-actions {
    display: grid; justify-items: end; gap: 4px; text-align: right;
  }
  .match-replay-link {
    min-height: 36px; display: inline-flex; align-items: center;
    color: var(--accent-strong); font-size: 11px; font-weight: 850;
    text-decoration: none;
  }
  .match-replay-link:hover { text-decoration: underline; }
  .match-moderation-button {
    min-height: 28px; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--danger) 42%, var(--line));
    border-radius: 7px; color: var(--danger); background: transparent;
    font: inherit; font-size: 10px; font-weight: 850; cursor: pointer;
  }
  .match-moderation-button:hover { background: color-mix(in srgb, var(--danger) 9%, transparent); }
  .match-moderation-button:disabled { opacity: .55; cursor: wait; }
  .staff-panel {
    overflow: hidden; border-color: color-mix(in srgb, #E7A928 42%, var(--line));
    background:
      linear-gradient(130deg, color-mix(in srgb, #F8C452 12%, var(--surface)), var(--surface) 55%);
  }
  .staff-panel-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  }
  .staff-panel .staff-badge { color: #26313A; border-color: rgba(92,69,12,.2); background: rgba(255,255,255,.72); }
  :root[data-theme="dark"] .staff-panel .staff-badge { color: #FFF4CE; background: rgba(0,0,0,.22); }
  .staff-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
  .staff-action-danger {
    color: #fff; border-color: var(--danger); background: var(--danger);
  }
  .staff-action-danger:hover { filter: brightness(.94); }
  .staff-panel-note {
    margin: 12px 0 0; color: var(--muted); font-size: 11px; font-weight: 700;
  }
  .staff-ban-form {
    display: grid; grid-template-columns: minmax(120px, .32fr) minmax(190px, 1fr) auto;
    align-items: end; gap: 8px; margin-top: 14px;
  }
  .staff-ban-form label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 850; }
  .staff-ban-form .duel-input { min-height: 40px; }
  .staff-ban-status {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-top: 14px; padding: 12px; border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
    border-radius: 11px; background: color-mix(in srgb, var(--danger-soft) 62%, var(--surface));
  }
  .staff-ban-status b, .staff-ban-status span { display: block; }
  .staff-ban-status span { margin-top: 3px; color: var(--muted); font-size: 10px; }
  .multiplayer-ban-banner {
    width: min(calc(100% - 28px), 1180px); display: flex; align-items: center;
    justify-content: space-between; gap: 14px; margin: 12px auto 0; padding: 12px 15px;
    border: 1px solid color-mix(in srgb, var(--danger) 48%, var(--line));
    border-radius: 13px; color: var(--ink);
    background:
      linear-gradient(105deg, color-mix(in srgb, var(--danger-soft) 78%, var(--surface)), var(--surface));
    box-shadow: var(--shadow-sm);
  }
  .multiplayer-ban-banner b, .multiplayer-ban-banner span { display: block; }
  .multiplayer-ban-banner span { margin-top: 2px; color: var(--muted); font-size: 11px; }
  .multiplayer-ban-panel { max-width: 720px; margin: 22px auto; text-align: center; }
  .multiplayer-ban-panel h2 { margin-bottom: 6px; }
  .multiplayer-ban-panel .staff-ban-status { text-align: left; }
  .admin-shell { display: grid; gap: 14px; }
  .admin-toolbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px;
    padding: 16px; border: 1px solid var(--line); border-radius: 16px;
    background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .admin-toolbar form { display: flex; gap: 8px; }
  .admin-toolbar .duel-input { min-width: 210px; }
  .admin-summary { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 800; }
  .admin-room-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .admin-room-card {
    display: grid; gap: 11px; padding: 15px; border: 1px solid var(--line);
    border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm);
  }
  .admin-room-head, .admin-room-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
  }
  .admin-room-code { font-size: 20px; font-weight: 950; letter-spacing: .1em; }
  .admin-room-meta { color: var(--muted); font-size: 10px; font-weight: 750; }
  .admin-room-players { display: flex; flex-wrap: wrap; gap: 6px; }
  .admin-room-player {
    padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface-2); font-size: 10px; font-weight: 800;
  }
  .admin-ban-list { display: grid; gap: 8px; }
  .admin-ban-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-2);
  }
  .admin-ban-row b, .admin-ban-row span { display: block; }
  .admin-ban-row span { margin-top: 2px; color: var(--muted); font-size: 10px; }
  .match-history-pagination {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 12px;
  }
  .match-history-pagination span { color: var(--muted); font-size: 11px; font-weight: 750; }
  .match-history-pagination .btn { min-height: 36px; padding: 7px 12px; font-size: 11px; }
  .history-pages { display: flex; align-items: center; gap: 4px; }
  .history-pages > span { padding: 0 3px; }
  .history-pages .btn { min-width: 34px; padding-inline: 8px; }

  #view-replay {
    width: min(100%, 1240px); min-width: 0; max-width: 1240px;
    overflow-x: clip;
  }
  #replay-content { width: 100%; min-width: 0; max-width: 100%; overflow-x: clip; }
  .replay-shell {
    width: 100%; min-width: 0; max-width: 100%; display: grid;
    grid-template-columns: minmax(0, 1fr); gap: 12px;
  }
  .replay-shell > * { width: 100%; min-width: 0; max-width: 100%; }
  [data-replay-round-strip] {
    width: 100%; min-width: 0; max-width: 100%; overflow: hidden;
  }
  .replay-strip-shell {
    width: 100%; min-width: 0; display: grid;
    grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: stretch;
    gap: 6px;
  }
  .replay-strip-scroll {
    width: 44px; min-height: 44px; display: grid; place-items: center;
    padding: 0; border: 1px solid var(--line); border-radius: 12px;
    color: var(--accent-strong); background: var(--surface);
    box-shadow: var(--shadow-sm); cursor: pointer;
  }
  .replay-strip-scroll svg {
    width: 18px; height: 18px; fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  }
  .replay-strip-scroll:disabled { color: var(--muted); opacity: .42; cursor: default; box-shadow: none; }
  .replay-strip-scroll:not(:disabled):hover { border-color: var(--accent); background: var(--accent-soft); }
  .replay-hero {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px;
    align-items: center; padding: 18px 20px; border: 1px solid var(--line);
    border-radius: 16px; background:
      radial-gradient(circle at 88% 5%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 34%),
      var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .replay-hero > div:first-child { min-width: 0; }
  .replay-kicker {
    color: var(--accent-strong); font-size: 10px; font-weight: 900;
    letter-spacing: .13em; text-transform: uppercase;
  }
  .replay-hero h2 { margin: 4px 0 2px; font-size: clamp(24px, 4vw, 42px); letter-spacing: -.045em; }
  .replay-hero p { margin: 0; color: var(--muted); font-size: 12px; }
  .replay-final-score {
    min-width: 112px; padding: 11px 14px; border: 1px solid var(--line);
    border-radius: 13px; background: var(--surface-soft); text-align: center;
  }
  .replay-final-score b, .replay-final-score span { display: block; }
  .replay-final-score b {
    font-size: 34px; font-weight: 950; font-variant-numeric: tabular-nums;
    letter-spacing: -.06em; line-height: 1; white-space: nowrap;
  }
  .replay-final-score span { color: var(--muted); font-size: 9px; font-weight: 850; text-transform: uppercase; }
  .replay-round-strip {
    width: 100%; min-width: 0; max-width: 100%;
    display: flex; gap: 6px; padding: 7px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    border: 1px solid var(--line);
    border-radius: 13px; background: var(--surface); scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .replay-round-button {
    flex: 0 0 auto; min-width: 72px; padding: 8px 10px; border: 1px solid transparent;
    border-radius: 9px; color: var(--muted); background: transparent;
    font: inherit; font-size: 10px; font-weight: 850; cursor: pointer;
  }
  .replay-round-button b { display: block; color: var(--ink); font-size: 14px; }
  .replay-round-button.active {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
    color: var(--accent-strong); background: var(--accent-soft);
  }
  .replay-round-navigation {
    width: 100%; min-width: 0; max-width: 100%;
    display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr);
    align-items: center; gap: 8px;
  }
  .replay-round-navigation .btn:first-child { justify-self: start; }
  .replay-round-navigation .btn:last-child { justify-self: end; }
  .replay-round-position {
    color: var(--muted); font-size: 11px; font-weight: 850; text-align: center;
  }
  .replay-round-position b { display: block; color: var(--ink); font-size: 14px; }
  .replay-round-content {
    width: 100%; min-width: 0; display: grid;
    grid-template-columns: minmax(0, 1fr); gap: 12px; overflow-anchor: none;
  }
  .replay-round-content.is-loading { pointer-events: none; cursor: progress; }
  .replay-stage {
    width: 100%; min-width: 0; max-width: 100%; overflow: hidden;
    padding: 12px; border-radius: 17px; color: #ECF6FF;
    background:
      radial-gradient(circle at 50% -20%, rgba(45,142,215,.24), transparent 42%),
      linear-gradient(145deg, #101C25, #172A37);
    box-shadow: 0 20px 55px rgba(5, 20, 30, .22);
  }
  .replay-stage-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 9px;
  }
  .replay-stage-head b { font-size: 13px; }
  .replay-stage-head span { color: rgba(236,246,255,.62); font-size: 10px; }
  .replay-board-grid {
    width: 100%; min-width: 0; max-width: 100%; overflow: hidden; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  }
  .replay-seat {
    min-width: 0; padding: 8px; border: 1px solid rgba(255,255,255,.11);
    border-radius: 12px; background: rgba(255,255,255,.045);
  }
  .replay-seat.winner { border-color: rgba(81,226,146,.5); }
  .replay-seat.tie { border-color: #9cbbeb; }
  .replay-seat-head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    min-height: 32px; margin-bottom: 6px;
  }
  .replay-seat-name {
    min-width: 0; overflow: hidden; font-size: 12px; font-weight: 850;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .replay-seat-time { color: rgba(236,246,255,.72); font-size: 11px; font-variant-numeric: tabular-nums; }
  .replay-seat .watch-board-slot {
    width: 100%; min-width: 0; max-width: 100%; overflow: hidden; border-radius: 7px;
  }
  .replay-seat .watch-board {
    width: 100%; min-width: 0; max-width: 100%;
    border-width: clamp(3px, .4vw, 5px); border-radius: 7px;
  }
  .replay-controls {
    width: 100%; min-width: 0; max-width: 100%; overflow: hidden;
    display: grid; grid-template-columns: auto auto auto minmax(100px, 1fr) auto auto;
    gap: 8px; align-items: center; margin-top: 10px; padding: 9px;
    border: 1px solid rgba(255,255,255,.1); border-radius: 12px;
    background: rgba(0,0,0,.18);
  }
  .replay-control {
    display: grid; min-width: 38px; min-height: 36px; place-items: center;
    border: 1px solid rgba(255,255,255,.16); border-radius: 9px;
    color: #F4FAFF; background: rgba(255,255,255,.07);
    font: inherit; font-size: 12px; font-weight: 850; cursor: pointer;
  }
  .replay-control:hover { background: rgba(255,255,255,.13); }
  .replay-control.primary { color: #06243A; background: #8CD8FF; border-color: #8CD8FF; }
  .replay-timeline {
    --replay-progress: 0%;
    width: 100%; min-width: 0; height: 28px; margin: 0;
    appearance: none; -webkit-appearance: none;
    border: 0; outline: 0; background: transparent; cursor: pointer;
  }
  .replay-timeline::-webkit-slider-runnable-track {
    width: 100%; height: 6px; border: 0; border-radius: 99px;
    background: linear-gradient(to right,
      #8CD8FF 0 var(--replay-progress),
      rgba(236,246,255,.2) var(--replay-progress) 100%);
  }
  .replay-timeline::-webkit-slider-thumb {
    width: 17px; height: 17px; margin-top: -5.5px;
    appearance: none; -webkit-appearance: none;
    border: 3px solid #8CD8FF; border-radius: 50%;
    background: #102431; box-shadow: 0 1px 5px rgba(0,0,0,.35);
  }
  .replay-timeline::-moz-range-track {
    width: 100%; height: 6px; border: 0; border-radius: 99px;
    background: rgba(236,246,255,.2);
  }
  .replay-timeline::-moz-range-progress {
    height: 6px; border-radius: 99px; background: #8CD8FF;
  }
  .replay-timeline::-moz-range-thumb {
    width: 12px; height: 12px; border: 3px solid #8CD8FF;
    border-radius: 50%; background: #102431; box-shadow: 0 1px 5px rgba(0,0,0,.35);
  }
  .replay-timeline:focus-visible {
    outline: 2px solid #8CD8FF; outline-offset: 2px; border-radius: 99px;
  }
  .replay-clock {
    min-width: 92px; color: rgba(236,246,255,.84); font-size: 11px;
    font-variant-numeric: tabular-nums; text-align: right;
  }
  .replay-speed {
    min-height: 36px; padding: 0 8px; border: 1px solid rgba(255,255,255,.16);
    border-radius: 9px; color: #F4FAFF; background: #203746; font: inherit;
    font-size: 11px; font-weight: 800;
  }
  .replay-footer {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 11px 13px; border: 1px solid var(--line); border-radius: 13px;
    background: var(--surface);
  }
  .replay-footer-actions { display: flex; gap: 7px; }
  .replay-unavailable {
    min-height: 360px; display: grid; place-content: center; justify-items: center;
    gap: 8px; padding: 28px; border: 1px dashed var(--line); border-radius: 16px;
    background: var(--surface); text-align: center;
  }
  .replay-unavailable-icon {
    width: 52px; height: 52px; color: var(--muted);
  }
  .replay-unavailable-icon svg {
    display: block; width: 100%; height: 100%; fill: none; stroke: currentColor;
    stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
  }
  .replay-unavailable h2 { margin: 0; }
  .replay-unavailable p { max-width: 52ch; margin: 0; color: var(--muted); }

  @media (max-width: 720px) {
    .match-replay-link {
      min-width: 44px; min-height: 44px; justify-content: flex-end;
      touch-action: manipulation;
    }
    .match-history-pagination .btn {
      min-width: 44px; min-height: 44px; touch-action: manipulation;
    }
    .watch-score-center .watch-round-clock {
      min-width: 0; font-size: 11px; line-height: 1;
    }
    .watch-result-overlay b.watch-finish-time { font-size: clamp(22px, 6vw, 34px); }
    .watch-result-overlay b.watch-finish-time.did-not-finish { font-size: clamp(13px, 3.8vw, 20px); }
    .watch-footer-actions { gap: 4px; }
    .watch-footer-actions .btn { padding-inline: 8px; }
    .duel-round-time b { font-size: 19px; }
    .round-overview-row { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 8px; }
    .match-history-row { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
    .match-history-actions {
      grid-column: 2; grid-row: 2; grid-auto-flow: column; justify-content: space-between;
      justify-items: stretch; width: 100%; text-align: left;
    }
    .match-history-score { font-size: 17px; }
    .match-history-pagination { flex-wrap: wrap; }
    .match-history-pagination > span { order: 3; width: 100%; text-align: center; }
    .history-pages { order: 2; }
    .replay-hero { padding: 14px; border-radius: 14px; }
    .replay-strip-shell { gap: 4px; }
    .replay-final-score { min-width: 86px; padding: 9px; }
    .replay-final-score b { font-size: 27px; }
    .replay-stage { padding: 6px; border-radius: 13px; }
    .replay-board-grid { gap: 5px; }
    .replay-seat { padding: 5px; border-radius: 9px; }
    .replay-seat-head { min-height: 27px; margin-bottom: 4px; }
    .replay-seat-name, .replay-seat-time { font-size: 9px; }
    .replay-controls {
      grid-template-columns: auto auto auto minmax(70px, 1fr) auto; gap: 5px; padding: 6px;
    }
    .replay-control { min-width: 44px; min-height: 44px; font-size: 11px; }
    .replay-clock { grid-column: 1 / -1; grid-row: 2; width: 100%; text-align: center; }
    .replay-speed { min-height: 44px; padding-inline: 7px; }
    .replay-timeline { height: 44px; }
    .replay-footer { align-items: stretch; flex-direction: column; }
    .replay-footer-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .replay-round-navigation {
      grid-template-columns: 1fr auto 1fr; gap: 5px;
    }
    .replay-round-navigation .btn { min-width: 0; padding-inline: 10px; font-size: 11px; }
    .replay-round-position { font-size: 9px; }
    .replay-round-position b { font-size: 12px; }
    .staff-actions { display: grid; grid-template-columns: 1fr; }
    .staff-actions .btn { width: 100%; }
    .staff-ban-form, .admin-room-grid { grid-template-columns: 1fr; }
    .admin-toolbar { grid-template-columns: 1fr; }
    .admin-toolbar form { align-items: stretch; flex-direction: column; }
    .admin-toolbar .duel-input { min-width: 0; }
  }
  @media (max-width: 430px) {
    .watch-summary p { display: none; }
    .leaderboard th:last-child, .leaderboard td:last-child { width: 59px; }
    .leaderboard th, .leaderboard td { padding-inline: 3px; }
    .leaderboard .history-meta { white-space: normal; }
    .duel-round-times { grid-template-columns: 1fr; }
    .viewer-h2h { gap: 7px; padding: 12px 10px; }
    .viewer-h2h-score { font-size: 25px; }
    .replay-hero { grid-template-columns: minmax(0, 1fr) minmax(86px, auto); gap: 8px; }
    .replay-hero h2 { font-size: 22px; }
    .replay-hero p { display: none; }
  }
  @media (max-width: 380px) {
    .replay-controls {
      grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(54px, .85fr);
    }
    .replay-control { min-width: 0; }
    .replay-timeline { grid-column: 1 / -1; grid-row: 2; }
    .replay-speed {
      grid-column: 4; grid-row: 1; width: 100%; min-width: 0; padding-inline: 5px;
    }
    .replay-clock { grid-column: 1 / -1; grid-row: 3; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn[aria-busy="true"]::after,
    .watch-live::before,
    .watch-cell.watch-move-pop, .watch-cell.watch-move-pop .mark-x line,
    .watch-cell.watch-move-pop .crown-svg, .watch-cell.watch-conflict::after,
    .watch-cell.watch-conflict .crown-svg,
    .watch-conflict-flow, .watch-penalty-total.is-fresh, .watch-penalty-pop,
    .watch-finish-wait-overlay,
    .watch-countdown-ring,
    .watch-result-overlay, .watch-result-overlay b { animation: none; }
    .watch-countdown-overlay.is-dismissed {
      opacity: 0; visibility: hidden; animation: none;
    }
  }

  /* Replay controls use the same paper, ink, and game accent as the puzzle. */
  #view-replay .replay-shell { gap: 20px; }
  #view-replay .btn { min-height: 44px; }
  #view-replay :is(.replay-hero, .replay-stage, .replay-footer,
      .replay-round-strip, .replay-final-score, .replay-seat,
      .replay-controls, .replay-strip-scroll, .replay-round-button,
      .replay-control, .replay-speed, .replay-unavailable) {
    border-radius: 3px;
    box-shadow: none;
  }
  #view-replay .replay-hero {
    padding: 24px;
    border-top: 3px solid var(--accent);
    background: var(--surface);
  }
  #view-replay .replay-kicker { font-size: 11px; letter-spacing: .08em; }
  #view-replay .replay-hero h2 { margin: 8px 0; line-height: 1.12; overflow-wrap: anywhere; }
  #view-replay .replay-hero p { display: block; font-size: 13px; line-height: 1.5; }
  #view-replay .replay-final-score { padding: 16px; background: var(--surface-soft); }
  #view-replay .replay-final-score span { margin-top: 8px; font-size: 10px; letter-spacing: .06em; }
  #view-replay .replay-round-strip { padding: 5px; gap: 4px; }
  #view-replay .replay-round-button { min-height: 48px; min-width: 76px; font-size: 11px; }
  #view-replay .replay-round-button.active { border-color: var(--accent); }
  #view-replay .replay-round-content { gap: 16px; }
  #view-replay .replay-stage {
    padding: 16px; border: 1px solid var(--line);
    color: var(--ink); background: var(--surface);
  }
  #view-replay .replay-stage-head { margin-bottom: 16px; flex-wrap: wrap; gap: 6px 16px; }
  #view-replay .replay-stage-head b { font-size: 15px; }
  #view-replay .replay-stage-head span { color: var(--muted); font-size: 12px; }
  #view-replay .replay-board-grid { gap: 16px; }
  #view-replay .replay-seat { padding: 12px; border-color: var(--line); background: var(--surface-soft); }
  #view-replay .replay-seat.winner { border-color: var(--success); }
  #view-replay .replay-seat.tie { border-color: var(--accent); }
  #view-replay .replay-seat-head { min-height: 32px; margin-bottom: 10px; }
  #view-replay .replay-seat-name { font-size: 14px; }
  #view-replay .replay-seat-time { color: var(--muted); font-size: 12px; white-space: nowrap; }
  #view-replay .replay-controls {
    gap: 8px; margin-top: 16px; padding: 12px;
    border-color: var(--line); background: var(--surface-soft);
  }
  #view-replay :is(.replay-control, .replay-speed) {
    min-width: 44px; min-height: 44px; border-color: var(--line);
    color: var(--ink); background: var(--surface); font-size: 13px;
  }
  #view-replay .replay-control:hover { border-color: var(--accent); background: var(--accent-soft); }
  #view-replay .replay-control.primary { color: var(--accent-contrast); background: var(--accent); border-color: var(--accent); }
  #view-replay .replay-clock { color: var(--muted); font-size: 12px; }
  #view-replay .replay-timeline { min-height: 44px; }
  #view-replay .replay-timeline::-webkit-slider-runnable-track {
    border-radius: 2px;
    background: linear-gradient(to right, var(--accent) 0 var(--replay-progress), var(--line) var(--replay-progress) 100%);
  }
  #view-replay .replay-timeline::-webkit-slider-thumb { border-color: var(--accent); border-radius: 2px; background: var(--surface); box-shadow: none; }
  #view-replay .replay-timeline::-moz-range-track { border-radius: 2px; background: var(--line); }
  #view-replay .replay-timeline::-moz-range-progress { border-radius: 2px; background: var(--accent); }
  #view-replay .replay-timeline::-moz-range-thumb { border-color: var(--accent); border-radius: 2px; background: var(--surface); box-shadow: none; }
  #view-replay .replay-timeline:focus-visible { outline-color: var(--accent); border-radius: 2px; }
  #view-replay .replay-footer { padding: 16px; }
  #view-replay .replay-round-position { font-size: 12px; }
  #view-replay .replay-round-position b { font-size: 15px; }
  @media (max-width: 600px) {
    #view-replay .replay-shell { gap: 16px; }
    #view-replay .replay-hero { padding: 16px; gap: 16px; grid-template-columns: minmax(0, 1fr); }
    #view-replay .replay-hero h2 { font-size: 28px; }
    #view-replay .replay-final-score { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; }
    #view-replay .replay-final-score span { margin: 0; text-align: right; }
    #view-replay .replay-stage { padding: 12px; }
    #view-replay .replay-board-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    #view-replay .replay-seat { padding: 10px; }
    #view-replay .replay-controls { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(54px, .85fr); padding: 8px; }
    #view-replay .replay-timeline { grid-column: 1 / -1; grid-row: 2; }
    #view-replay .replay-speed { grid-column: 4; grid-row: 1; width: 100%; min-width: 0; padding-inline: 4px; }
    #view-replay .replay-clock { grid-column: 1 / -1; grid-row: 3; text-align: center; }
    #view-replay .replay-round-navigation { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
    #view-replay .replay-round-navigation .btn { padding-inline: 8px; min-height: 44px; }
  }

  #view-replay .replay-multiplayer-hero { grid-template-columns: minmax(0, 1fr); }
  .replay-standings {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px; margin: 0; padding: 0; list-style: none;
  }
  .replay-standings li {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-width: 0; padding: 12px; border: 1px solid var(--line);
    border-radius: 10px; background: var(--surface-soft);
  }
  .replay-standings span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 650; }
  .replay-standings b { color: var(--accent-strong); font-size: 22px; font-variant-numeric: tabular-nums; }
  #view-replay .replay-round-button { max-width: 240px; white-space: normal; overflow-wrap: anywhere; }
  .replay-round-result { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .replay-round-game { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 600; }
  #view-replay .replay-seat-head { flex-wrap: wrap; gap: 4px 12px; }
  #view-replay .replay-seat-name { min-width: 0; overflow-wrap: anywhere; }
  #view-replay .replay-seat-time { white-space: normal; }
  .round-overview-score { overflow-wrap: anywhere; }
  @media (max-width: 430px) {
    .replay-standings { grid-template-columns: minmax(0, 1fr); }
  }
  /* Puzzle Rush uses a compact racing language without changing the core board. */
  #view-rush, #view-rush-watch, #view-watch, #view-profile,
  #rush-content, #rush-watch-content, #watch-content, #replay-content {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }
  #view-duel, #view-rush, #view-rush-watch, #view-watch, #view-profile {
    width: min(100%, 1180px);
    max-width: 1180px;
    margin-inline: auto;
  }
  #rush-content > *, #rush-watch-content > *, #watch-content > *,
  #replay-content > *, #view-profile > * {
    min-width: 0;
    max-width: 100%;
  }
  #view-rush :where(section, article, aside, form, fieldset, div),
  #view-rush-watch :where(section, article, aside, footer, div),
  #view-watch :where(section, article, aside, footer, div),
  #view-replay :where(section, article, aside, footer, div) {
    min-width: 0;
  }
  #view-rush :where(input, select, textarea, button, img, svg, canvas),
  #view-rush-watch :where(input, select, textarea, button, img, svg, canvas),
  #view-watch :where(input, select, textarea, button, img, svg, canvas),
  #view-replay :where(input, select, textarea, button, img, svg, canvas) {
    max-width: 100%;
  }
  .nav-short { display: none; }
  .rush-page-heading {
    position: relative; overflow: hidden; min-height: 148px; padding: 25px 28px;
    border: 1px solid color-mix(in srgb, #008F83 30%, var(--line));
    border-radius: 22px; background:
      radial-gradient(circle at 90% 18%, color-mix(in srgb, #FFB64D 28%, transparent) 0 46px, transparent 47px),
      linear-gradient(125deg,
        color-mix(in srgb, var(--surface) 91%, #0A66C2) 0%,
        color-mix(in srgb, var(--surface) 88%, #008F83) 100%);
    box-shadow: var(--shadow);
  }
  .rush-page-heading::after {
    content: ""; position: absolute; inset: auto 0 0; height: 8px; opacity: .42;
    background:
      linear-gradient(45deg, #1D2226 25%, transparent 25% 75%, #1D2226 75%) 0 0 / 16px 16px,
      linear-gradient(45deg, #1D2226 25%, transparent 25% 75%, #1D2226 75%) 8px 8px / 16px 16px;
  }
  .rush-page-heading .page-eyebrow { color: #08756F; }
  :root[data-theme="dark"] .rush-page-heading .page-eyebrow { color: #63D8CD; }
  .rush-heading-mark {
    position: relative; flex: 0 0 190px; height: 84px;
    display: block;
  }
  .rush-heading-mark i {
    position: absolute; left: 7px; right: 14px; bottom: 16px;
    height: 3px; border-radius: 99px; background: color-mix(in srgb, var(--accent) 66%, var(--line));
  }
  .rush-heading-car {
    position: absolute; z-index: 2; left: 31px; bottom: 17px;
    width: 84px; height: 54px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 7px 5px rgba(29,34,38,.16));
  }
  #rush-content, .rush-hub { min-width: 0; max-width: 100%; }
  .rush-hub { display: grid; gap: 16px; }
  .rush-create-layout {
    display: grid; grid-template-columns: minmax(390px, 450px) minmax(0, 1fr);
    align-items: start; gap: 13px;
  }
  .rush-create-layout > * { min-width: 0; }
  .rush-setup-sidebar {
    min-width: 0; display: grid; align-content: start;
  }
  .rush-side-stack {
    min-width: 0; display: grid; align-content: start; gap: 13px;
  }
  .rush-panel {
    min-width: 0; max-width: 100%; padding: 22px; border: 1px solid var(--line);
    border-radius: 18px; background: var(--surface); box-shadow: var(--shadow);
    overflow-wrap: anywhere;
  }
  .rush-panel h2 { margin: 0; font-size: 23px; letter-spacing: -.025em; }
  .rush-panel h3 { margin: 0; font-size: 16px; }
  .rush-panel .panel-sub { margin: 4px 0 0; color: var(--muted); }
  .rush-form { display: grid; gap: 18px; }
  .rush-form-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding-bottom: 16px; border-bottom: 1px solid var(--line);
  }
  .rush-create-panel {
    display: block; width: 100%; max-width: 100%; padding: 0;
    overflow: clip; touch-action: pan-y;
  }
  .rush-create-panel .rush-form-head {
    padding: 16px 17px 13px; border-bottom: 1px solid var(--line);
  }
  .rush-create-panel .rush-form-head h2 {
    margin-bottom: 2px; font-size: 18px; font-weight: 900;
  }
  .rush-create-panel .rush-form-head .panel-sub { font-size: 12px; }
  .rush-create-main { display: grid; gap: 13px; padding: 15px 17px 16px; }
  .rush-create-identity { border-radius: 10px; background: var(--surface-soft); }
  .rush-create-footer {
    display: grid; gap: 8px; padding: 12px 17px 16px;
    border-top: 1px solid var(--line); background: var(--surface-soft);
  }
  .rush-create-summary {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    color: var(--muted); font-size: 9.5px;
  }
  .rush-create-summary > * { min-width: 0; }
  .rush-create-summary b {
    overflow: hidden; color: var(--ink); text-align: right;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .rush-create-panel .rush-error { min-height: 0; font-size: 11px; }
  .rush-create-panel .rush-error:empty { display: none; }
  .rush-create-panel .rush-error:not(:empty) {
    padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--danger) 34%, var(--line));
    border-radius: 9px; background: var(--danger-soft);
  }
  .rush-unrated-tag {
    flex: none; padding: 6px 10px; border-radius: 999px;
    color: #08756F; background: color-mix(in srgb, #19B5A5 14%, var(--surface));
    font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  }
  :root[data-theme="dark"] .rush-unrated-tag { color: #63D8CD; }
  .rush-identity {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--pill) 82%, transparent);
  }
  .rush-identity b, .rush-identity small { display: block; }
  .rush-identity small { margin-top: 2px; color: var(--muted); font-size: 11px; }
  .rush-identity-player {
    min-width: 0; display: flex; align-items: center; gap: 10px;
  }
  .rush-identity-player > div { min-width: 0; }
  .rush-identity-player b { overflow-wrap: anywhere; }
  .rush-identity-car {
    flex: none; width: 54px; height: 36px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 3px 2px rgba(29,34,38,.18));
  }
  .rush-identity-rating { flex: none; font-size: 16px; font-weight: 950; }
  .rush-field-note {
    display: block; margin-top: 5px; color: var(--muted);
    font-size: 10px; line-height: 1.35;
  }
  .rush-guest-note {
    display: flex; align-items: center; gap: 10px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
  }
  .rush-guest-note b, .rush-guest-note small { display: block; }
  .rush-guest-note small { margin-top: 2px; color: var(--muted); font-size: 10px; }
  .rush-field { display: grid; gap: 7px; min-width: 0; }
  .rush-field > span, .rush-field legend {
    color: var(--ink); font-size: 12px; font-weight: 850;
  }
  .rush-fieldset { margin: 0; padding: 0; border: 0; }
  .rush-input {
    width: 100%; min-width: 0; min-height: 41px; padding: 9px 11px;
    border: 1px solid var(--line); border-radius: 11px;
    color: var(--ink); background: var(--bg); font: inherit;
  }
  .rush-input:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 17%, transparent); }
  .rush-mode-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .rush-choice { position: relative; display: block; min-width: 0; cursor: pointer; }
  .rush-choice > input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  }
  .rush-choice > span {
    min-height: 48px; display: flex; align-items: center; justify-content: center;
    gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px;
    color: var(--muted); background: var(--bg); text-align: center;
    font-weight: 800; white-space: nowrap;
    transition: border-color .16s ease, background .16s ease, color .16s ease;
  }
  .rush-choice > input:checked + span {
    color: #075A54; border-color: #008F83;
    background: color-mix(in srgb, #19B5A5 14%, var(--surface));
    box-shadow: inset 0 0 0 1px #008F83;
  }
  :root[data-theme="dark"] .rush-choice > input:checked + span { color: #8BE7DE; }
  .rush-mode-choice > span {
    min-height: 58px; display: grid; grid-template-columns: 22px minmax(0, 1fr);
    align-items: center; justify-content: stretch; gap: 9px;
    padding: 9px 10px; text-align: left; white-space: normal;
  }
  .rush-mode-choice > span > span:last-child { width: 100%; min-width: 0; }
  .rush-mode-choice .rush-mode-icon {
    width: 22px; height: 22px; display: grid; place-items: center; color: #08756F;
  }
  .rush-mode-choice .rush-mode-icon .rush-icon { width: 20px; height: 20px; }
  .rush-mode-choice b, .rush-mode-choice small { display: block; }
  .rush-mode-choice b { color: var(--ink); font-size: 12px; }
  .rush-mode-choice small {
    margin-top: 1px; color: var(--muted); font-size: 9.5px;
    font-weight: 600; line-height: 1.2;
  }
  .rush-chip-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
  .rush-time-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rush-custom-time-choice { grid-column: auto; }
  .rush-time-picks .rush-choice > span { min-height: 41px; padding: 8px 5px; font-size: 11px; }
  .rush-chip-row.two { grid-template-columns: 1fr 1fr; }
  .rush-custom-time {
    grid-template-columns: auto minmax(0, 1fr); align-items: center;
    gap: 10px; max-width: none; margin-top: 8px;
  }
  .rush-custom-time > span { white-space: nowrap; }
  .rush-inline-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .rush-target-control {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
  }
  .rush-target-control:focus-within {
    border-color: var(--accent);
    outline: 2px solid color-mix(in srgb, var(--accent) 17%, transparent);
  }
  .rush-target-control .rush-input {
    min-width: 0; border: 0; border-radius: 0; outline: 0; background: transparent;
    appearance: textfield; -moz-appearance: textfield;
  }
  .rush-target-control .rush-input:focus { border: 0; outline: 0; }
  .rush-target-control .rush-input::-webkit-inner-spin-button,
  .rush-target-control .rush-input::-webkit-outer-spin-button {
    margin: 0; -webkit-appearance: none;
  }
  .rush-target-control span { padding-right: 12px; color: var(--muted); font-size: 12px; font-weight: 750; }
  .rush-form-note {
    margin: -4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.35;
  }
  .rush-match-type-row .rush-choice > span {
    min-height: 58px; display: block; padding: 9px 10px; text-align: left;
    white-space: normal;
  }
  .rush-match-type-row b, .rush-match-type-row small,
  .rush-visibility b, .rush-visibility small { display: block; }
  .rush-match-type-row b, .rush-visibility b { color: var(--ink); font-size: 12px; }
  .rush-match-type-row small, .rush-visibility small {
    margin-top: 1px; color: var(--muted); font-size: 9.5px;
    font-weight: 600; line-height: 1.2;
  }
  .rush-visibility > span {
    min-height: 62px; display: grid; grid-template-columns: 15px minmax(0, 1fr);
    gap: 9px; align-items: center; padding: 9px 10px; text-align: left;
    white-space: normal;
  }
  .rush-visibility-dot {
    width: 15px; height: 15px; border: 2px solid var(--line); border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 3px var(--surface);
  }
  .rush-visibility input:checked + span .rush-visibility-dot {
    border-color: #008F83; background: #008F83;
  }
  .rush-expiry-note {
    margin: 20px 0 0; padding-top: 15px; border-top: 1px solid var(--line);
    line-height: 1.55;
  }
  .rush-settings {
    overflow: hidden; border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface-soft);
  }
  .rush-settings summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; min-height: 48px; padding: 10px 11px; cursor: pointer; list-style: none;
  }
  .rush-settings summary::-webkit-details-marker { display: none; }
  .rush-settings summary::after {
    content: "Edit"; flex: none; padding: 4px 8px; border-radius: 999px;
    color: #08756F; background: var(--surface); font-size: 9px; font-weight: 850;
  }
  .rush-settings[open] summary::after { content: "Close"; }
  .rush-settings summary b, .rush-settings summary small { display: block; }
  .rush-settings summary b { color: var(--ink); font-size: 12px; }
  .rush-settings summary small { margin-top: 1px; color: var(--muted); font-size: 9.5px; }
  .rush-settings-body {
    display: grid; gap: 12px; padding: 12px;
    border-top: 1px solid var(--line); background: var(--surface);
  }
  .rush-settings-rule { border-radius: 10px; }
  .rush-car-control {
    min-width: 0; display: grid;
    grid-template-columns: 76px minmax(0, 1fr) auto;
    align-items: center; gap: 11px; padding: 11px 12px;
    border: 1px solid var(--line); border-radius: 13px;
    background:
      linear-gradient(115deg,
        color-mix(in srgb, #0A66C2 7%, var(--bg)),
        color-mix(in srgb, #19B5A5 8%, var(--bg)));
  }
  .rush-car-control-image {
    width: 76px; height: 48px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 4px 2px rgba(29,34,38,.2));
  }
  .rush-car-control-copy { min-width: 0; display: grid; gap: 1px; }
  .rush-car-control-copy small {
    color: var(--muted); font-size: 9px; font-weight: 800;
    letter-spacing: .045em; text-transform: uppercase;
  }
  .rush-car-control-copy b {
    overflow: hidden; color: var(--ink); font-size: 13px;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .rush-car-control-copy > span {
    min-height: 13px; color: #08756F; font-size: 9px; font-weight: 750;
  }
  :root[data-theme="dark"] .rush-car-control-copy > span { color: #63D8CD; }
  .rush-change-car {
    min-width: 91px; padding: 8px 11px; white-space: nowrap;
  }
  .race-car-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
  .race-car-fieldset > legend {
    margin-bottom: 9px; color: var(--ink); font-size: 12px; font-weight: 850;
  }
  .race-car-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px; padding: 2px;
  }
  .race-car-choice { position: relative; min-width: 0; cursor: pointer; }
  .race-car-choice > input {
    position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
  }
  .race-car-choice > span {
    min-height: 92px; display: grid; place-items: center; align-content: center; gap: 5px;
    padding: 8px 5px; border: 1px solid var(--line); border-radius: 11px;
    color: var(--muted); background: var(--bg); text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .race-car-choice:hover > span { border-color: color-mix(in srgb, #008F83 65%, var(--line)); }
  .race-car-choice > input:checked + span {
    border-color: #008F83; color: #075A54;
    background: color-mix(in srgb, #19B5A5 13%, var(--surface));
    box-shadow: inset 0 0 0 1px #008F83;
  }
  :root[data-theme="dark"] .race-car-choice > input:checked + span { color: #8BE7DE; }
  .race-car-choice > input:focus-visible + span {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }
  .race-car-option-image {
    width: 72px; max-width: 100%; height: 47px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 2px 1px rgba(29,34,38,.16));
  }
  .race-car-choice small {
    width: 100%; overflow: hidden; font-size: 9px; font-weight: 800;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .race-car-settings-panel {
    display: grid; grid-template-columns: minmax(180px, .72fr) minmax(300px, 1.28fr);
    align-items: center; gap: 18px;
  }
  .race-car-settings-head {
    min-width: 0;
  }
  .race-car-settings-head .panel-sub { margin-bottom: 0; }
  .race-car-modal {
    width: min(100%, 830px); height: min(84dvh, 690px); max-height: calc(100dvh - 36px);
    padding: 0; overflow: hidden;
  }
  .race-car-modal .close-x { z-index: 2; top: 14px; right: 14px; }
  .race-car-modal-form {
    min-width: 0; min-height: 0; height: 100%; display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .race-car-modal-head {
    min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 20px; padding: 23px 62px 17px 24px;
    border-bottom: 1px solid var(--line);
    background:
      radial-gradient(circle at 82% 12%, color-mix(in srgb, #FFB64D 18%, transparent) 0 45px, transparent 46px),
      linear-gradient(120deg,
        color-mix(in srgb, #0A66C2 7%, var(--surface)),
        color-mix(in srgb, #19B5A5 9%, var(--surface)));
  }
  .race-car-modal-head h3 { margin: 2px 0 4px; font-size: 25px; letter-spacing: -.035em; }
  .race-car-modal-head p { max-width: 480px; margin: 0; line-height: 1.45; }
  .race-car-modal-selected {
    min-width: 178px; display: grid; grid-template-columns: 88px minmax(0, 1fr);
    align-items: center; gap: 8px; padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #008F83 40%, var(--line));
    border-radius: 13px; background: color-mix(in srgb, var(--surface) 86%, transparent);
  }
  .race-car-modal-selected-image {
    width: 88px; height: 54px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 4px 2px rgba(29,34,38,.2));
  }
  .race-car-modal-selected span { min-width: 0; display: grid; }
  .race-car-modal-selected small {
    color: var(--muted); font-size: 8px; font-weight: 850;
    letter-spacing: .055em; text-transform: uppercase;
  }
  .race-car-modal-selected b {
    max-width: 120px; overflow: hidden; font-size: 11px;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .race-car-modal-catalog {
    min-width: 0; min-height: 0; padding: 17px 20px 20px;
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  }
  .race-car-modal-footer {
    min-width: 0; display: flex; align-items: center; justify-content: space-between;
    gap: 14px; padding: 13px 20px;
    border-top: 1px solid var(--line); background: var(--surface);
  }
  .race-car-modal-footer .modal-actions { flex: none; margin: 0; }
  .race-car-modal-status {
    min-width: 0; color: var(--danger); font-size: 11px; font-weight: 750;
    overflow-wrap: anywhere;
  }
  .rush-error { min-height: 18px; color: var(--danger); font-size: 12px; font-weight: 700; }
  .rush-submit {
    width: 100%; min-height: 42px; border-radius: 10px;
    background: linear-gradient(105deg, #0A66C2, #008F83);
    box-shadow: 0 8px 22px rgba(10,102,194,.2);
  }
  .rush-directory { padding: 0; overflow: hidden; }
  .rush-directory-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 19px 20px; border-bottom: 1px solid var(--line);
  }
  .rush-directory-head span { color: var(--muted); font-size: 11px; }
  .rush-directory-list { display: grid; gap: 0; }
  .rush-room-card {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
    gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line);
  }
  .rush-room-card > div { min-width: 0; }
  .rush-room-card:last-child { border-bottom: 0; }
  .rush-room-card:hover { background: color-mix(in srgb, var(--pill) 45%, transparent); }
  .rush-room-title {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    font-size: 14px; font-weight: 850;
  }
  .rush-room-meta {
    margin-top: 3px; color: var(--muted); font-size: 11px;
    overflow-wrap: anywhere;
  }
  .rush-mode-tag {
    padding: 3px 7px; border-radius: 999px;
    color: #075A54; background: color-mix(in srgb, #19B5A5 16%, var(--surface));
    font-size: 9px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  }
  .rush-mode-tag.rated {
    color: #0750A1; background: color-mix(in srgb, #0A66C2 13%, var(--surface));
  }
  :root[data-theme="dark"] .rush-mode-tag.rated { color: #8EC5FF; }
  :root[data-theme="dark"] .rush-mode-tag { color: #8BE7DE; }
  .rush-room-card .btn { min-width: 74px; }
  .rush-empty {
    min-height: 145px; display: grid; place-content: center; gap: 3px;
    padding: 22px; color: var(--muted); text-align: center;
  }
  .rush-empty b { color: var(--ink); }
  .rush-duel-cta {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center; gap: 14px; padding: 17px 19px;
    border: 1px solid color-mix(in srgb, #008F83 45%, var(--line));
    border-radius: 16px; color: var(--ink); text-decoration: none;
    background:
      linear-gradient(110deg,
        color-mix(in srgb, #0A66C2 8%, var(--surface)),
        color-mix(in srgb, #19B5A5 11%, var(--surface)));
  }
  .rush-duel-cta:hover { border-color: #008F83; }
  .rush-duel-cta-car {
    width: 58px; height: 38px; object-fit: contain; image-rendering: pixelated;
    filter: drop-shadow(0 3px 2px rgba(29,34,38,.18));
  }
  .rush-duel-cta b, .rush-duel-cta small { display: block; }
  .rush-duel-cta small { margin-top: 2px; color: var(--muted); font-size: 11px; }
  .rush-duel-cta > strong { color: #08756F; font-size: 12px; }
  :root[data-theme="dark"] .rush-duel-cta > strong { color: #63D8CD; }
  .rush-lobby { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 16px; }
  .rush-lobby-code {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px;
  }
  .rush-lobby-code > div { min-width: 0; }
  .rush-code {
    max-width: 100%; font-size: clamp(20px, 8vw, 39px); font-weight: 950;
    letter-spacing: clamp(.04em, 1vw, .11em); font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }
  .rush-share-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 13px 0 18px; }
  .rush-roster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .rush-player {
    min-width: 0; padding: 11px 12px; border: 1px solid var(--line);
    border-radius: 11px; background: var(--bg);
  }
  .rush-player.you { border-color: #008F83; }
  .rush-player b {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: 13px;
  }
  .rush-player small {
    min-width: 0; display: flex; align-items: center; flex-wrap: wrap; gap: 3px 5px;
    margin-top: 2px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere;
  }
  .rush-player-main { min-width: 0; display: flex; align-items: center; gap: 8px; }
  .rush-player-main > div { min-width: 0; }
  .rush-player-car {
    flex: none; width: 48px; height: 31px; object-fit: contain; image-rendering: pixelated;
  }
  .rush-player-slot { border-style: dashed; color: var(--muted); }
  .rush-online-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
  .rush-online-dot.online { background: #13A06F; box-shadow: 0 0 0 3px color-mix(in srgb, #13A06F 14%, transparent); }
  .rush-lobby-actions { display: grid; gap: 9px; margin-top: 18px; }
  .rush-lobby-actions .btn { min-height: 46px; border-radius: 12px; }
  .rush-rule-list { display: grid; gap: 12px; margin-top: 17px; }
  .rush-rule {
    display: grid; grid-template-columns: 35px minmax(0, 1fr); align-items: center; gap: 10px;
  }
  .rush-rule i {
    width: 35px; height: 35px; display: grid; place-items: center;
    border-radius: 10px; background: var(--pill); font-style: normal;
  }
  .rush-rule .rush-icon { width: 20px; height: 20px; color: #08756F; }
  .rush-rule-car {
    width: 31px; height: 23px; object-fit: contain; image-rendering: pixelated;
  }
  .rush-rule b, .rush-rule span { display: block; }
  .rush-rule span { color: var(--muted); font-size: 10px; }
  .rush-countdown {
    min-height: 390px; display: grid; place-content: center; justify-items: center;
    text-align: center; background:
      radial-gradient(circle, color-mix(in srgb, #19B5A5 13%, transparent), transparent 60%),
      var(--surface);
  }
  .rush-countdown-number {
    width: 132px; height: 132px; display: grid; place-items: center;
    border: 8px solid color-mix(in srgb, #008F83 42%, var(--line));
    border-radius: 50%; color: #08756F; font-size: 66px; font-weight: 950;
    font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 10px var(--surface);
    animation: rush-countdown-pulse .8s ease-in-out infinite alternate;
  }
  :root[data-theme="dark"] .rush-countdown-number { color: #8BE7DE; }
  .rush-countdown h2 { margin-top: 20px; }
  .rush-countdown p { margin: 4px 0 0; color: var(--muted); }
  @keyframes rush-countdown-pulse {
    from { transform: scale(.96); }
    to { transform: scale(1.03); }
  }
  .rush-result { max-width: 760px; margin: 0 auto; text-align: center; }
  .rush-result-crown { display: grid; place-items: center; color: #08756F; }
  .rush-result-crown .rush-icon { width: 58px; height: 58px; stroke-width: 1.45; }
  .rush-result h2 { margin-top: 9px; font-size: 32px; }
  .rush-result > p { color: var(--muted); overflow-wrap: anywhere; }
  .rush-standings { display: grid; gap: 8px; margin: 20px 0; text-align: left; }
  .rush-standing {
    display: grid; grid-template-columns: 34px 52px minmax(0, 1fr) auto;
    align-items: center; gap: 10px; padding: 11px 13px;
    border: 1px solid var(--line); border-radius: 11px; background: var(--bg);
  }
  .rush-standing.winner {
    border-color: color-mix(in srgb, var(--gold) 70%, var(--line));
    background: color-mix(in srgb, var(--gold) 10%, var(--surface));
  }
  .rush-standing.eliminated {
    border-color: color-mix(in srgb, var(--muted) 34%, var(--line));
    background: color-mix(in srgb, var(--muted) 7%, var(--surface));
  }
  .rush-standing.eliminated .rush-standing-car {
    opacity: .5; filter: grayscale(.72) saturate(.45);
  }
  .rush-standing-rank { color: var(--muted); font-weight: 900; text-align: center; }
  .rush-standing-car {
    width: 50px; height: 34px; object-fit: contain; image-rendering: pixelated;
  }
  .rush-standing-copy { min-width: 0; overflow: hidden; }
  .rush-standing-copy b {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .rush-standing b, .rush-standing small { display: block; }
  .rush-standing small {
    color: var(--muted); font-size: 10px; overflow-wrap: anywhere;
  }
  .rush-standing-score {
    flex: none; font-size: 20px; font-weight: 950; text-align: right;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .rush-rematch-panel {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto);
    align-items: center; gap: 13px; margin: 4px 0 12px; padding: 14px;
    border: 1px solid color-mix(in srgb, #008F83 46%, var(--line));
    border-radius: 14px; background: color-mix(in srgb, #19B5A5 8%, var(--surface));
    text-align: left;
  }
  .rush-rematch-copy b, .rush-rematch-copy small { display: block; }
  .rush-rematch-copy small {
    margin-top: 2px; color: var(--muted); font-size: 10px; overflow-wrap: anywhere;
  }
  .rush-rematch-status {
    min-width: 88px; color: var(--muted); text-align: center;
  }
  .rush-rematch-status strong, .rush-rematch-status span { display: block; }
  .rush-rematch-status strong {
    color: #08756F; font-size: 20px; font-weight: 950;
  }
  :root[data-theme="dark"] .rush-rematch-status strong { color: #8BE7DE; }
  .rush-rematch-status span { font-size: 8px; font-weight: 800; }
  .rush-rematch-panel > .rush-error {
    grid-column: 1 / -1; min-height: 0; margin-top: -6px;
  }
  .rush-result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .rush-result-actions .btn { min-height: 46px; border-radius: 12px; }
  .rush-rating-board { padding: 20px; }
  .rush-rating-head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    margin-bottom: 13px;
  }
  .rush-rating-head > span {
    flex: none; padding: 5px 8px; border-radius: 999px; color: #08756F;
    background: color-mix(in srgb, #19B5A5 13%, var(--surface));
    font-size: 9px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase;
  }
  .rush-rating-board .leaderboard-wrap { margin-top: 13px; }

  .rush-racebar {
    margin: 10px 0 12px; padding: 12px 14px 13px; overflow: hidden;
    border: 1px solid color-mix(in srgb, #008F83 42%, var(--line));
    border-radius: 17px; background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--surface) 94%, #0A66C2),
        color-mix(in srgb, var(--surface) 93%, #19B5A5));
    box-shadow: var(--shadow);
  }
  .rush-race-head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-bottom: 8px;
  }
  .rush-race-head > * { min-width: 0; }
  .rush-race-head b { font-size: 14px; letter-spacing: .01em; }
  .rush-race-clock {
    padding: 4px 8px; border-radius: 999px; color: #075A54;
    background: color-mix(in srgb, #19B5A5 15%, var(--surface));
    font-size: 11px; font-weight: 900; font-variant-numeric: tabular-nums;
  }
  :root[data-theme="dark"] .rush-race-clock { color: #8BE7DE; }
  .rush-lanes {
    display: grid; gap: 6px;
  }
  .rush-lane {
    display: grid; grid-template-columns: minmax(112px, .72fr) minmax(170px, 3fr);
    align-items: center; gap: 9px; min-width: 0;
  }
  .rush-lane-copy {
    display: grid; grid-template-columns: 23px minmax(0, 1fr) auto;
    align-items: center; gap: 6px; min-width: 0;
  }
  .rush-lane-rank {
    display: grid; place-items: center; width: 23px; height: 23px;
    border-radius: 50%; color: var(--muted); background: var(--surface-2);
    font-size: 9px; font-weight: 950; font-variant-numeric: tabular-nums;
  }
  .rush-lane-name {
    min-width: 0; overflow: hidden; color: var(--muted);
    font-size: 11px; font-weight: 850; text-overflow: ellipsis; white-space: nowrap;
  }
  .rush-lane.you .rush-lane-name { color: var(--accent); }
  .rush-lane.eliminated .rush-lane-name,
  .rush-lane.eliminated .rush-lane-rank { color: var(--muted); }
  .rush-lane.eliminated .rush-track { opacity: .58; filter: grayscale(.72); }
  .rush-lane-score {
    color: var(--ink); font-size: 10px; font-weight: 950;
    font-variant-numeric: tabular-nums;
  }
  .rush-track {
    position: relative; height: 45px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
    border-radius: 13px; background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), var(--bg));
  }
  .rush-track-line {
    position: absolute; z-index: 0; left: 10px; right: 13px; bottom: 10px;
    height: 3px; border-radius: 999px;
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 66%, var(--line)),
      color-mix(in srgb, #008F83 72%, var(--line)));
    box-shadow: 0 2px 0 color-mix(in srgb, var(--ink) 10%, transparent);
  }
  .rush-track-line::before {
    content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px;
    border: 2px solid var(--surface); border-radius: 50%; background: var(--accent);
    transform: translate(-1px, -50%);
  }
  .rush-car {
    position: absolute; z-index: 2; left: clamp(35px, var(--rush-position), calc(100% - 49px));
    bottom: 7px; width: 58px; height: 38px; object-fit: contain;
    image-rendering: pixelated; transform: translateX(-50%);
    filter: drop-shadow(0 4px 2px rgba(29,34,38,.24));
    transition: left .3s cubic-bezier(.2,.8,.2,1);
  }
  .rush-all-racers { margin-top: 8px; border-top: 1px solid var(--line); }
  .rush-all-racers > summary {
    min-height: 44px; display: flex; align-items: center; justify-content: center;
    color: var(--muted); cursor: pointer; font-size: 10px; font-weight: 900;
  }
  .rush-full-field {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px;
    max-height: 180px; overflow-y: auto; scrollbar-width: thin;
  }
  .rush-field-row {
    display: grid; grid-template-columns: 22px minmax(0, 1fr) auto;
    align-items: center; gap: 6px; min-height: 31px; padding: 4px 8px;
    border-radius: 8px; color: var(--muted); background: var(--surface-2);
    font-size: 9px;
  }
  .rush-field-row b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rush-field-row strong { color: var(--ink); font-variant-numeric: tabular-nums; }
  .rush-field-row.you { color: var(--accent); box-shadow: inset 3px 0 var(--accent); }
  .rush-finish-marker {
    position: absolute; z-index: 3; right: 5px; bottom: 7px;
    width: 28px; height: 44px; pointer-events: none;
  }
  .rush-finish-pole {
    position: absolute; right: 2px; bottom: 0; width: 3px; height: 43px;
    border-radius: 2px; background: #344653;
    box-shadow: 0 0 0 1px color-mix(in srgb, #fff 34%, transparent);
  }
  .rush-finish-flag {
    position: absolute; z-index: 1; top: 1px; right: 4px; width: 24px; height: 18px;
    border: 1px solid #344653;
    background:
      conic-gradient(from 90deg, #172631 25%, #fff 0 50%, #172631 0 75%, #fff 0)
      0 0 / 8px 8px;
    clip-path: polygon(0 0, 100% 0, 83% 50%, 100% 100%, 0 100%);
    filter: drop-shadow(0 2px 1px rgba(29,34,38,.2));
  }
  .rush-finish-pole::after {
    content: ""; position: absolute; left: 50%; bottom: -1px;
    width: 11px; height: 3px; border-radius: 50%; background: #344653;
    transform: translateX(-50%);
  }
  .rush-finish-marker.rush-heading-finish {
    right: 3px; bottom: 14px; transform: scale(1.17); transform-origin: right bottom;
  }

  .page-heading.rush-watch-page-heading {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    margin: -1px; padding: 0; clip-path: inset(50%); white-space: nowrap;
  }
  .rush-watch-shell { width: 100%; min-width: 0; max-width: 100%; display: grid; gap: 12px; }
  .rush-watch-hero {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    padding: 10px 12px; overflow: hidden;
    border: 1px solid color-mix(in srgb, #008F83 34%, var(--line));
    border-radius: 14px; background:
      linear-gradient(125deg,
        color-mix(in srgb, var(--surface) 96%, #0A66C2),
        color-mix(in srgb, var(--surface) 91%, #19B5A5));
    box-shadow: var(--shadow-sm);
  }
  .rush-watch-hero-copy { min-width: 0; }
  .rush-watch-hero h2 {
    margin: 3px 0 1px; color: var(--ink);
    font-size: clamp(18px, 2.2vw, 25px); letter-spacing: -.03em;
  }
  .rush-watch-hero p {
    margin: 0; color: var(--muted); font-size: 10px; overflow-wrap: anywhere;
  }
  .rush-watch-hero p span {
    margin-left: 6px; color: #08756F; font-weight: 850; white-space: nowrap;
  }
  :root[data-theme="dark"] .rush-watch-hero p span { color: #73E1D6; }
  .rush-watch-live {
    display: inline-flex; align-items: center; gap: 6px; color: #08756F;
    font-size: 9px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase;
  }
  .rush-watch-live i {
    width: 8px; height: 8px; border-radius: 50%; background: #19A66D;
    box-shadow: 0 0 0 4px color-mix(in srgb, #19A66D 16%, transparent);
  }
  .rush-watch-live.is-paused i { background: var(--muted); box-shadow: none; animation: none; }
  .rush-watch-clock {
    flex: none; min-width: 104px; padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #008F83 30%, var(--line));
    border-radius: 14px; color: #075A54;
    background: color-mix(in srgb, var(--surface) 82%, #A8EEE6);
    font-size: 14px; font-weight: 950; text-align: center;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  :root[data-theme="dark"] .rush-watch-clock { color: #8BE7DE; }
  .rush-watch-leader-rail {
    width: 100%; min-width: 0; max-width: 100%;
    position: sticky; top: 74px; z-index: 4;
    display: grid; gap: 6px; padding: 12px 14px; max-height: 236px; overflow-y: auto;
    border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
    box-shadow: var(--shadow-sm); scrollbar-width: thin;
  }
  .rush-watch-leader-lane {
    display: grid; grid-template-columns: 24px minmax(74px, .55fr) minmax(150px, 2fr);
    align-items: center; gap: 8px; min-width: 0;
  }
  .rush-watch-leader-lane.is-eliminated { opacity: .58; }
  .rush-watch-leader-lane.is-eliminated .rush-watch-leader-track {
    filter: grayscale(.75) saturate(.45);
  }
  .rush-watch-leader-place {
    color: var(--muted); font-size: 10px; font-weight: 950; text-align: center;
  }
  .rush-watch-leader-name {
    min-width: 0; overflow: hidden; color: var(--ink); font-size: 11px;
    font-weight: 850; text-overflow: ellipsis; white-space: nowrap;
  }
  .rush-watch-leader-track, .rush-watch-progress {
    position: relative; height: 40px; overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
    border-radius: 11px; background:
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 82%, transparent), var(--bg));
  }
  .rush-watch-leader-track .rush-track-line,
  .rush-watch-progress .rush-track-line {
    left: 7px; right: 10px; bottom: 7px; height: 2px;
  }
  .rush-watch-leader-car, .rush-watch-car {
    position: absolute; z-index: 2;
    left: clamp(26px, var(--rush-watch-progress), calc(100% - 36px));
    bottom: 6px; width: 52px; height: 34px; object-fit: contain;
    image-rendering: pixelated; transform: translateX(-50%);
    filter: drop-shadow(0 3px 2px rgba(29,34,38,.2));
    transition: left 300ms var(--ease-out);
  }
  .rush-watch-leader-track .rush-finish-marker {
    right: 1px; bottom: 4px; transform: scale(.68); transform-origin: right bottom;
  }
  .rush-watch-list {
    width: 100%; min-width: 0; max-width: 100%; display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px;
  }
  .rush-watch-card {
    display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-areas:
      "rank player"
      "board board";
    align-items: stretch; gap: 11px; width: 100%; min-width: 0; max-width: none; margin-inline: auto;
    padding: 13px; overflow: hidden;
    border: 1px solid var(--line); border-radius: 18px;
    background:
      linear-gradient(100deg,
        color-mix(in srgb, #0A66C2 5%, var(--surface)),
        var(--surface) 46%);
    box-shadow: var(--shadow-sm);
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }
  .rush-watch-card.is-winner {
    border-color: color-mix(in srgb, #19A66D 62%, var(--line));
    background:
      linear-gradient(100deg,
        color-mix(in srgb, #19A66D 12%, var(--surface)),
        var(--surface) 52%);
    box-shadow: 0 16px 38px color-mix(in srgb, #11884D 17%, transparent);
  }
  .rush-watch-card.is-eliminated {
    border-color: color-mix(in srgb, var(--muted) 36%, var(--line));
    background: color-mix(in srgb, var(--muted) 6%, var(--surface));
  }
  .rush-watch-card.is-eliminated .rush-watch-progress,
  .rush-watch-card.is-eliminated .rush-watch-board-slot {
    opacity: .62; filter: grayscale(.66) saturate(.5);
  }
  .rush-watch-card.watch-has-conflict {
    border-color: color-mix(in srgb, var(--danger) 58%, var(--line));
  }
  .rush-watch-rank {
    grid-area: rank; display: grid; align-content: center; justify-items: center; gap: 3px;
    border-right: 1px solid var(--line); color: var(--muted);
  }
  .rush-watch-rank span {
    font-size: 10px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
  }
  .rush-watch-rank strong {
    color: var(--ink); font-size: 29px; font-weight: 950; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .rush-watch-card.is-winner .rush-watch-rank strong { color: #11884D; }
  :root[data-theme="dark"] .rush-watch-card.is-winner .rush-watch-rank strong { color: #72E6A7; }
  .rush-watch-player {
    grid-area: player; position: relative; display: grid; align-content: center; gap: 9px; min-width: 0;
  }
  .rush-watch-player-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
  }
  .rush-watch-player-head > div { min-width: 0; max-width: 100%; }
  .rush-watch-name {
    min-width: 0; overflow: hidden; color: var(--ink); font-size: 18px;
    font-weight: 950; text-overflow: ellipsis; white-space: nowrap;
  }
  .rush-watch-player-head small {
    display: flex; align-items: center; gap: 6px; margin-top: 3px;
    color: var(--muted); font-size: 11px;
  }
  .rush-watch-progress { height: 58px; }
  .rush-watch-progress .rush-track-line { left: 9px; right: 13px; bottom: 9px; height: 3px; }
  .rush-watch-progress .rush-watch-car {
    left: clamp(35px, var(--rush-watch-progress), calc(100% - 49px));
    bottom: 8px; width: 70px; height: 45px;
  }
  .rush-watch-progress .rush-finish-marker { right: 4px; bottom: 6px; }
  .rush-watch-player-meta {
    display: flex; flex-wrap: wrap; gap: 5px 11px; color: var(--muted);
    font-size: 11px; font-weight: 750; overflow-wrap: anywhere;
  }
  .rush-watch-player-meta span:not(:first-child)::before {
    content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 7px 2px 0;
    border-radius: 50%; background: var(--line-strong);
  }
  .rush-watch-conflict {
    width: max-content; max-width: 100%; padding: 4px 7px; border-radius: 999px;
    color: var(--danger); background: var(--danger-soft);
    font-size: 8px; font-weight: 900; text-transform: uppercase; overflow-wrap: anywhere;
  }
  .rush-watch-board-slot {
    grid-area: board; align-self: center; width: min(100%, 360px); max-width: none; justify-self: center;
    overflow: hidden; border-radius: 10px;
  }
  .rush-watch-board-slot .watch-board {
    border-width: 4px; border-radius: 10px; animation: none;
  }
  .rush-watch-standby {
    position: relative; width: 100%; aspect-ratio: 1; overflow: hidden;
    border: 4px solid var(--board-line); border-radius: 10px; background: #152A37;
  }
  .rush-watch-standby-grid {
    position: absolute; inset: -22px;
    background:
      linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px),
      linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px),
      linear-gradient(135deg, #315F72 0 25%, #64536E 25% 50%, #486C62 50% 75%, #74664C 75%);
    background-size: 25% 25%, 25% 25%, 100% 100%;
    filter: blur(10px) saturate(.62); transform: scale(1.08);
  }
  .rush-watch-standby-copy {
    position: absolute; inset: 0; display: grid; place-content: center; justify-items: center;
    gap: 5px; color: #FFF; background: rgba(9, 22, 31, .5); text-align: center;
  }
  .rush-watch-standby-copy b {
    font-size: clamp(42px, 6vw, 70px); font-weight: 950; line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  .rush-watch-standby-copy span {
    padding-inline: 8px; color: rgba(255,255,255,.82); font-size: 9px; font-weight: 800;
  }
  .rush-watch-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 2px 18px; color: var(--muted); font-size: 10px;
  }
  .rush-watch-footer > span { min-width: 0; overflow-wrap: anywhere; }
  .rush-watch-footer-actions {
    display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px;
  }
  .rush-watch-empty {
    display: flex; min-height: 180px; align-items: center; justify-content: center;
    gap: 13px; text-align: left;
  }
  .rush-watch-empty b, .rush-watch-empty small { display: block; }
  .rush-watch-empty small { margin-top: 3px; color: var(--muted); }
  .rush-watch-loader {
    width: 24px; height: 24px; border: 3px solid var(--line); border-top-color: #008F83;
    border-radius: 50%; animation: rush-watch-spin .75s linear infinite;
  }
  @keyframes rush-watch-spin { to { transform: rotate(360deg); } }
  @media (min-width: 1041px) {
    .rush-setup-sidebar {
      position: sticky; top: 80px;
    }
  }
  @media (max-width: 1040px) {
    .rush-create-layout { grid-template-columns: 1fr; }
    .rush-setup-sidebar { position: static; }
  }
  @media (max-width: 820px) {
    .rush-lobby { grid-template-columns: 1fr; }
    .rush-directory { min-height: 0; }
    .rush-heading-mark { flex-basis: 145px; }
    .race-car-settings-panel { grid-template-columns: 1fr; }
    .race-car-modal .race-car-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .rush-watch-card {
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 10px;
    }
  }
  @media (max-width: 560px) {
    .rush-page-heading { min-height: 0; padding: 20px 18px 24px; }
    .rush-heading-mark { display: none; }
    .rush-panel { padding: 17px 14px; border-radius: 15px; }
    .rush-create-panel { padding: 0; }
    .rush-create-panel .rush-form-head { padding: 14px 13px 11px; }
    .rush-create-main { gap: 11px; padding: 12px 13px 13px; }
    .rush-create-footer { padding: 10px 13px 13px; }
    .rush-create-summary { display: grid; gap: 2px; }
    .rush-create-summary b { text-align: left; white-space: normal; }
    .rush-mode-choice > span { min-height: 58px; padding: 8px; }
    .rush-mode-choice .rush-mode-icon { width: 20px; height: 20px; }
    .rush-mode-choice .rush-mode-icon .rush-icon { width: 18px; height: 18px; }
    .rush-mode-choice b { font-size: 12px; }
    .rush-mode-choice small { font-size: 9px; }
    .rush-inline-grid { grid-template-columns: 1fr; }
    .rush-roster { grid-template-columns: 1fr 1fr; }
    .rush-lobby-code { align-items: flex-start; }
    .rush-share-row { grid-template-columns: 1fr; }
    .rush-share-row .btn { width: 100%; }
    .rush-room-card { padding: 12px 14px; }
    .rush-form-head { align-items: flex-start; }
    .rush-unrated-tag { max-width: 112px; text-align: center; line-height: 1.25; }
    .rush-expiry-note { margin-top: 22px; padding-top: 17px; }
    .rush-rating-head > span { display: none; }
    .rush-rematch-panel {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
    }
    .rush-rematch-panel > .btn { grid-column: 1 / -1; width: 100%; }
    .rush-rematch-panel > .rush-error { grid-column: 1 / -1; }
    .rush-result-actions { grid-template-columns: 1fr; }
    .rush-car-control {
      grid-template-columns: 68px minmax(0, 1fr) auto; padding-inline: 9px;
    }
    .rush-car-control-image { width: 68px; height: 44px; }
    .race-car-modal {
      width: 100%; height: min(89dvh, 720px); max-height: calc(100dvh - 28px);
    }
    .race-car-modal-head {
      grid-template-columns: 1fr; gap: 12px; padding: 20px 54px 14px 18px;
    }
    .race-car-modal-head p { font-size: 11px; }
    .race-car-modal-selected {
      width: min(100%, 290px); min-width: 0;
    }
    .race-car-modal-catalog { padding: 14px; }
    .race-car-modal-footer { align-items: stretch; flex-direction: column; padding: 12px 14px; }
    .race-car-modal-footer .modal-actions {
      width: 100%; display: grid; grid-template-columns: 1fr 1fr;
    }
    .race-car-modal-footer .btn { width: 100%; }
    .rush-duel-cta { grid-template-columns: 48px minmax(0, 1fr); }
    .rush-duel-cta > strong { grid-column: 1 / -1; text-align: right; }
    .rush-racebar { padding: 10px 8px; border-radius: 12px; }
    .rush-lane { grid-template-columns: 88px minmax(118px, 1fr); gap: 6px; }
    .rush-lane-copy { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 4px; }
    .rush-lane-rank { width: 18px; height: 18px; font-size: 10px; }
    .rush-lane-name { font-size: 11px; }
    .rush-track { height: 39px; border-radius: 10px; }
    .rush-car {
      left: clamp(25px, var(--rush-position), calc(100% - 36px));
      bottom: 5px; width: 50px; height: 33px;
    }
    .rush-track .rush-finish-marker {
      right: 2px; bottom: 5px; transform: scale(.82); transform-origin: right bottom;
    }
    .page-heading.rush-watch-page-heading { padding: 0; }
    .rush-watch-page-heading .btn { width: 100%; }
    .rush-watch-hero { align-items: center; padding: 10px 11px; }
    .rush-watch-hero p { font-size: 10px; line-height: 1.35; }
    .rush-watch-hero p span { display: block; margin: 3px 0 0; }
    .rush-watch-clock { min-width: 91px; padding: 9px; font-size: 13px; }
    .rush-watch-leader-rail { padding: 9px; border-radius: 13px; }
    .rush-watch-leader-lane {
      grid-template-columns: 18px minmax(58px, .6fr) minmax(100px, 1.5fr); gap: 5px;
    }
    .rush-watch-leader-name { font-size: 9px; }
    .rush-watch-card {
      grid-template-columns: 39px minmax(0, 1fr); grid-template-areas:
        "rank player"
        "board board";
      gap: 9px; padding: 9px; border-radius: 14px;
    }
    .rush-watch-rank {
      grid-area: rank; min-height: 74px; border-right: 1px solid var(--line);
    }
    .rush-watch-rank strong { font-size: 22px; }
    .rush-watch-player { grid-area: player; gap: 8px; }
    .rush-watch-name { font-size: 14px; }
    .rush-watch-progress { height: 52px; }
    .rush-watch-progress .rush-watch-car {
      left: clamp(30px, var(--rush-watch-progress), calc(100% - 42px));
      width: 60px; height: 39px;
    }
    .rush-watch-player-meta { gap: 3px 7px; font-size: 10px; }
    .rush-watch-board-slot {
      grid-area: board; width: min(100%, 420px); max-width: none; justify-self: center;
    }
    .rush-watch-board-slot .watch-board, .rush-watch-standby { border-width: 3px; }
    .rush-watch-footer { align-items: stretch; flex-direction: column; }
    .rush-watch-footer-actions { display: grid; grid-template-columns: 1fr; }
    .rush-watch-footer-actions .btn { width: 100%; }
    .rush-watch-empty { flex-wrap: wrap; padding: 18px 14px; }
  }
  @media (max-width: 430px) {
    .rush-mode-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .rush-roster { grid-template-columns: 1fr; }
    .rush-time-picks { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .rush-custom-time-choice { grid-column: auto; }
    .rush-room-card {
      grid-template-columns: 1fr; align-items: stretch; gap: 9px;
    }
    .rush-room-card .btn { width: 100%; }
    .rush-lobby-code { flex-wrap: wrap; }
    .rush-directory-head { align-items: flex-start; flex-direction: column; }
    .rush-car-control {
      grid-template-columns: 64px minmax(0, 1fr);
    }
    .rush-car-control-image { width: 64px; height: 42px; }
    .rush-change-car { grid-column: 1 / -1; width: 100%; }
    .race-car-modal .race-car-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .race-car-choice > span { min-height: 84px; }
    .race-car-option-image { width: 62px; height: 42px; }
    .rush-watch-hero {
      display: grid; grid-template-columns: minmax(0, 1fr) auto;
      align-items: center; gap: 8px;
    }
    .rush-watch-clock { width: auto; min-width: 78px; }
    .rush-watch-leader-lane {
      grid-template-columns: 18px minmax(48px, .5fr) minmax(88px, 1.5fr);
    }
    .rush-watch-list { gap: 7px; }
    .rush-watch-card { grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding: 6px; }
    .rush-watch-rank { min-height: 58px; }
    .rush-watch-rank span { display: none; }
    .rush-watch-rank strong { font-size: 19px; }
    .rush-watch-player { gap: 5px; }
    .rush-watch-name { font-size: 11px; }
    .rush-watch-player-head small { font-size: 11px; }
    .rush-watch-progress { height: 38px; }
    .rush-watch-progress .rush-watch-car {
      left: clamp(24px, var(--rush-watch-progress), calc(100% - 33px));
      bottom: 4px; width: 47px; height: 31px;
    }
    .rush-watch-player-meta span:nth-child(2) { display: none; }
    .rush-watch-board-slot { width: 100%; }
    .rush-full-field { grid-template-columns: 1fr; }
    .rush-standing {
      grid-template-columns: 27px 44px minmax(0, 1fr) auto;
      gap: 7px; padding-inline: 8px;
    }
    .rush-standing-car { width: 42px; height: 30px; }
    .rush-rematch-panel { grid-template-columns: 1fr; align-items: stretch; }
    .rush-rematch-status { text-align: left; }
    .rush-rematch-status strong, .rush-rematch-status span {
      display: inline; margin-right: 3px;
    }
  }
  @media (max-width: 350px) {
    .rush-race-head { align-items: flex-start; flex-direction: column; }
    .rush-lane { grid-template-columns: 1fr; gap: 3px; }
    .rush-lane-name { padding-inline: 3px; }
    .rush-standing {
      grid-template-columns: 25px 39px minmax(0, 1fr);
    }
    .rush-standing-car { width: 37px; height: 27px; }
    .rush-standing-score {
      grid-column: 3; display: flex; align-items: baseline; gap: 4px; text-align: left;
    }
    .rush-standing-score small { display: inline; }
    .rush-watch-card {
      grid-template-columns: 34px minmax(0, 1fr);
    }
    .rush-watch-player-meta span::before { display: none !important; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rush-countdown-number { animation: none; }
    .rush-car { transition: none; }
    .rush-watch-live i, .rush-watch-loader { animation: none; }
    .rush-watch-leader-car, .rush-watch-car { transition: none; }
  }

  /* Race rooms are calm scorecards; the moving cars provide the character. */
  #view-rush :is(.rush-panel, .rush-player, .rush-rule i, .rush-standing,
      .rush-rematch-panel, .rush-empty, .rush-input, .rush-settings,
      .rush-target-control, .rush-choice > span, .rush-mode-tag),
  #view-rush-watch :is(.rush-watch-hero, .rush-watch-clock,
      .rush-watch-leader-rail, .rush-watch-card, .rush-watch-progress,
      .rush-watch-leader-track, .rush-watch-board-slot, .rush-watch-standby) {
    border-radius: 3px;
    box-shadow: none;
  }
  #view-rush .rush-page-heading {
    min-height: 0; padding: 24px;
    border: 1px solid var(--line); border-top: 3px solid var(--accent);
    border-radius: 3px; background: var(--surface); box-shadow: none;
  }
  #view-rush .rush-page-heading::after { display: none; }
  #view-rush .rush-panel { background: var(--surface); }
  #view-rush .rush-lobby { gap: 20px; }
  #view-rush .rush-lobby-code { gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
  #view-rush .rush-roster { gap: 10px; margin-top: 20px; }
  #view-rush .rush-player { padding: 14px; background: var(--surface-soft); }
  #view-rush .rush-lobby-actions { gap: 10px; margin-top: 24px; }
  #view-rush .rush-lobby-actions .btn { border-radius: 3px; }
  #view-rush .rush-rule { padding-block: 12px; }
  #view-rush .rush-result { max-width: 760px; padding: 28px; border-top: 3px solid var(--accent); }
  #view-rush .rush-result-crown { color: var(--accent); }
  #view-rush .rush-result-crown .rush-icon { width: 44px; height: 44px; }
  #view-rush .rush-result h2 { margin-top: 16px; font-size: clamp(28px, 4vw, 38px); line-height: 1.15; }
  #view-rush .rush-result > p { margin-top: 12px; font-size: 13px; line-height: 1.6; }
  #view-rush .rush-standings { gap: 0; margin: 24px 0; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
  #view-rush .rush-standing { padding: 16px 12px; border: 0; border-radius: 0; background: var(--surface); }
  #view-rush .rush-standing + .rush-standing { border-top: 1px solid var(--line); }
  #view-rush .rush-standing.winner { background: var(--accent-soft); box-shadow: inset 3px 0 var(--accent); }
  #view-rush .rush-standing.eliminated { background: var(--surface-soft); }
  #view-rush .rush-standing-copy b { font-size: 14px; }
  #view-rush .rush-standing small { margin-top: 4px; font-size: 12px; line-height: 1.5; }
  #view-rush .rush-standing-score { font-size: 24px; }
  #view-rush .rush-rematch-panel { gap: 16px; padding: 16px; border-color: var(--line); background: var(--surface-soft); }
  #view-rush .rush-rematch-copy b { font-size: 14px; }
  #view-rush .rush-rematch-copy small { margin-top: 6px; font-size: 12px; line-height: 1.5; }
  #view-rush .rush-rematch-status strong { color: var(--accent); }
  #view-rush .rush-rematch-status span { font-size: 11px; line-height: 1.4; }
  #view-rush .rush-result-actions { gap: 10px; margin-top: 16px; }
  #view-rush .rush-result-actions .btn { border-radius: 3px; }
  #view-game .rush-racebar { border-radius: 3px; background: var(--surface); box-shadow: none; }
  #view-game .rush-track { border-radius: 2px; background: var(--surface-soft); }
  #view-rush-watch .rush-watch-shell { gap: 20px; }
  #view-rush-watch .rush-watch-hero {
    gap: 20px; padding: 20px; border-color: var(--line);
    border-top: 3px solid var(--accent); background: var(--surface);
  }
  #view-rush-watch .rush-watch-hero h2 { margin: 8px 0; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; }
  #view-rush-watch .rush-watch-hero p { font-size: 12px; line-height: 1.5; }
  #view-rush-watch .rush-watch-live { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
  #view-rush-watch .rush-watch-live i { width: 6px; height: 6px; border-radius: 1px; box-shadow: none; }
  #view-rush-watch .rush-watch-clock { min-height: 44px; padding: 12px; border-color: var(--line); color: var(--accent); background: var(--accent-soft); font-size: 16px; }
  #view-rush-watch .rush-watch-leader-rail { gap: 8px; padding: 16px; background: var(--surface); }
  #view-rush-watch .rush-watch-leader-name { font-size: 12px; }
  #view-rush-watch .rush-watch-leader-place { font-size: 12px; }
  #view-rush-watch :is(.rush-watch-leader-track, .rush-watch-progress) { border-color: var(--line); background: var(--surface-soft); }
  #view-rush-watch .rush-watch-list { gap: 20px; }
  #view-rush-watch .rush-watch-card { padding: 16px; gap: 12px; background: var(--surface); }
  #view-rush-watch .rush-watch-card.is-winner { border-color: var(--success); }
  #view-rush-watch .rush-watch-name { font-size: 16px; }
  #view-rush-watch .rush-watch-player-head small { font-size: 12px; line-height: 1.5; }
  #view-rush-watch .rush-watch-player-meta { gap: 6px 12px; font-size: 12px; line-height: 1.5; }
  #view-rush-watch .rush-watch-rank span { font-size: 10px; letter-spacing: .04em; }
  #view-rush-watch .rush-watch-board-slot .watch-board { border-radius: 3px; }
  #view-rush-watch .rush-watch-standby { border-color: var(--line); background: var(--surface-soft); }
  #view-rush-watch .rush-watch-standby-grid { display: none; }
  #view-rush-watch .rush-watch-standby-copy { color: var(--ink); background: transparent; }
  #view-rush-watch .rush-watch-standby-copy span { color: var(--muted); font-size: 12px; }
  #view-rush-watch .rush-watch-footer { padding: 0 0 16px; font-size: 12px; line-height: 1.5; }
  #view-rush-watch .rush-watch-footer-actions .btn { min-height: 44px; }
  @media (max-width: 640px) {
    #view-rush .rush-result { padding: 20px 14px; }
    #view-rush .rush-standing { padding: 14px 10px; }
    #view-rush .rush-rematch-panel { padding: 14px; }
    #view-rush-watch .rush-watch-shell, #view-rush-watch .rush-watch-list { gap: 16px; }
    #view-rush-watch .rush-watch-list { grid-template-columns: minmax(0, 1fr); }
    #view-rush-watch .rush-watch-hero { gap: 12px; padding: 16px; }
    #view-rush-watch .rush-watch-clock { font-size: 14px; min-width: 78px; }
    #view-rush-watch .rush-watch-leader-rail { position: static; padding: 12px; }
    #view-rush-watch .rush-watch-card { grid-template-columns: 34px minmax(0, 1fr); padding: 12px; gap: 12px; }
    #view-rush-watch .rush-watch-name { font-size: 15px; }
    #view-rush-watch .rush-watch-rank span { display: block; }
    #view-rush-watch .rush-watch-player-meta { font-size: 11px; }
    #view-rush-watch .rush-watch-board-slot { width: min(100%, 420px); }
  }
  /* Dedicated authentication routes keep account data and credential forms separate. */
  .auth-page {
    width: min(100%, 840px); display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr);
    gap: 14px; margin: 0 auto;
  }
  .auth-intro {
    position: relative; overflow: hidden; min-height: 390px;
    display: flex; flex-direction: column; justify-content: center;
    padding: clamp(24px, 5vw, 46px);
    color: #fff; border: 0;
    background:
      radial-gradient(circle at 88% 16%, rgba(255,255,255,.19) 0 42px, transparent 43px),
      linear-gradient(135deg, #003F78 0%, #0A66C2 58%, #08756F 100%);
  }
  .auth-intro::after {
    content: ""; position: absolute; right: -46px; bottom: -70px;
    width: 210px; aspect-ratio: 1; border: 17px solid rgba(255,255,255,.72);
    border-radius: 38px; opacity: .1; pointer-events: none; transform: rotate(16deg);
    background:
      repeating-linear-gradient(90deg, transparent 0 40px, rgba(255,255,255,.7) 41px 43px),
      repeating-linear-gradient(0deg, transparent 0 40px, rgba(255,255,255,.7) 41px 43px);
  }
  .auth-intro .page-eyebrow { color: #B9DCFF; }
  .auth-intro h2 {
    position: relative; z-index: 1; max-width: 420px;
    margin: 9px 0 10px; font-size: clamp(28px, 4.2vw, 43px);
    line-height: 1.02; letter-spacing: -.045em;
  }
  .auth-intro > p {
    position: relative; z-index: 1; max-width: 450px;
    margin: 0; color: rgba(255,255,255,.78); font-size: 14px;
  }
  .auth-benefits {
    position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 28px;
  }
  .auth-benefits > div {
    padding: 10px 12px; border: 1px solid rgba(255,255,255,.16);
    border-radius: 10px; background: rgba(0,27,54,.18);
  }
  .auth-benefits b, .auth-benefits span { display: block; }
  .auth-benefits b { font-size: 13px; }
  .auth-benefits span { margin-top: 1px; color: rgba(255,255,255,.7); font-size: 11px; }
  .auth-card {
    align-content: center; padding: clamp(23px, 4vw, 38px);
  }
  .auth-card h2 { font-size: 25px; letter-spacing: -.025em; }
  .auth-card .btn { width: 100%; }
  .auth-switch { margin: 2px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
  .auth-switch a {
    min-height: 44px; display: inline-flex; align-items: center;
    color: var(--accent-strong); font-weight: 850;
  }
  .auth-guest-note { width: min(100%, 840px); margin: 14px auto 0; }
  @media (max-width: 720px) {
    .auth-page { grid-template-columns: 1fr; }
    .auth-intro { min-height: 0; padding: 24px; }
    .auth-intro h2 { font-size: 29px; }
    .auth-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
    .auth-benefits > div { padding: 9px; }
  }
  @media (max-width: 500px) {
    .auth-intro { padding: 21px 18px; }
    .auth-intro > p { font-size: 12px; }
    .auth-benefits { grid-template-columns: 1fr; gap: 6px; }
    .auth-benefits > div { padding: 8px 10px; }
    .auth-card { padding: 21px 18px; }
  }

  .game-menu {
    position: relative; flex: none;
  }
  .game-switcher-button.brand {
    width: fit-content; max-width: 100%; min-height: 42px; padding: 5px 8px 5px 6px;
    border: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 13px; color: var(--ink);
    background: color-mix(in srgb, var(--surface) 92%, transparent);
    box-shadow: 0 1px 2px rgba(20, 35, 45, .05);
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  }
  .game-switcher-button.brand:hover,
  .game-switcher-button.brand[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
    background: var(--surface);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--ink) 9%, transparent);
  }
  .game-switcher-button .brand-text {
    width: max-content; min-width: 0; max-width: 100%; overflow: hidden;
    white-space: nowrap; text-align: left; text-overflow: ellipsis;
  }
  .game-menu-chevron {
    width: 14px; height: 14px; flex: none;
    fill: none; stroke: currentColor; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform 150ms ease;
  }
  .game-switcher-button[aria-expanded="true"] .game-menu-chevron {
    transform: rotate(180deg);
  }
  .game-dropdown {
    position: absolute; z-index: 90; top: calc(100% + 8px); left: 0;
    width: min(300px, calc(100vw - 24px)); padding: 9px;
    border: 1px solid var(--line); border-radius: 15px;
    background: var(--surface); background-color: var(--surface);
    box-shadow: 0 18px 45px color-mix(in srgb, var(--ink) 18%, transparent);
    opacity: 1; isolation: isolate;
    max-height: calc(100dvh - 84px); overflow-y: auto; overscroll-behavior: contain;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .game-dropdown[hidden] { display: none; }
  .game-dropdown-label {
    padding: 5px 8px 7px; color: var(--muted);
    font-size: 10px; font-weight: 900; letter-spacing: .13em;
    text-transform: uppercase;
  }
  .game-dropdown-list { display: grid; gap: 2px; }
  .game-dropdown-divider {
    height: 1px; margin: 8px 4px; background: var(--line);
  }
  .game-dropdown-item {
    min-width: 0; display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center; gap: 9px; padding: 7px 8px;
    border-radius: 10px; color: var(--ink); text-decoration: none;
  }
  .game-dropdown-item[hidden] { display: none; }
  .game-dropdown-item:hover,
  .game-dropdown-item:focus-visible {
    color: var(--ink); background: var(--surface-soft);
  }
  .game-dropdown-item.game-locked {
    cursor: default;
    color: color-mix(in srgb, var(--ink) 74%, var(--surface));
    opacity: 1;
  }
  .game-dropdown-item.game-locked:hover,
  .game-dropdown-item.game-locked:focus-visible {
    color: color-mix(in srgb, var(--ink) 74%, var(--surface));
    background: transparent;
  }
  .game-dropdown-more {
    border: 1px solid var(--line); background: var(--surface-soft);
  }
  .game-dropdown-more:hover,
  .game-dropdown-more:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  }
  .game-dropdown-icon {
    width: 28px; height: 28px; display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
    border-radius: 8px; color: var(--muted); background: var(--surface);
  }
  .game-dropdown-icon svg { width: 17px; height: 17px; }
  .game-dropdown-icon img {
    width: 100%; height: 100%; display: block; border-radius: inherit;
  }
  .game-dropdown-icon.queens {
    color: #FFD46A; background: linear-gradient(145deg, #075A9E, #0A66C2);
  }
  .game-dropdown-icon.queens svg { fill: currentColor; }
  .game-dropdown-icon.tango {
    background: linear-gradient(145deg, #8D3E24, #C95D2D);
  }
  .game-dropdown-icon.zip {
    color: #F6F7F8; background: transparent;
  }
  .game-dropdown-icon.patches {
    color: #FFF7F1; background: linear-gradient(145deg, #9B3924, #D06442);
  }
  .game-dropdown-icon.mini-sudoku {
    color: #F4FFF9; background: linear-gradient(145deg, #205F47, #3D8E6D);
  }
  .game-dropdown-icon.akari {
    color: #FFF7D8; background: linear-gradient(145deg, #81550A, #C68A18);
  }
  .game-dropdown-icon.minesweeper {
    color: #F6FBFC; background: linear-gradient(145deg, #354B55, #6F8993);
  }
  .game-dropdown-icon.wordle {
    color: #F7FFF7; background: linear-gradient(145deg, #315C35, #578B58);
  }
  .game-dropdown-icon.nonogram {
    color: #F7FFFC; background: linear-gradient(145deg, #235D52, #4D9384);
  }
  .game-dropdown-icon.fifteen {
    color: #F7FAFF; background: linear-gradient(145deg, #285B91, #5689C2);
  }
  .game-dropdown-copy { min-width: 0; display: grid; gap: 1px; }
  .game-dropdown-copy strong {
    overflow: hidden; font-size: 13px; font-weight: 900;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .game-dropdown-copy small {
    overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 650;
    text-overflow: ellipsis; white-space: nowrap;
  }
  .game-dropdown-item.game-locked .game-dropdown-copy small {
    color: color-mix(in srgb, var(--ink) 68%, var(--surface));
  }
  .game-coming-soon {
    padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px;
    color: color-mix(in srgb, var(--ink) 76%, var(--surface));
    background: var(--surface-soft);
    font-size: 9px; font-weight: 950; letter-spacing: .06em;
    line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  }
  .game-current-indicator {
    display: none; padding: 3px 6px;
    border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
    border-radius: 999px; color: var(--accent); background: var(--accent-soft);
    font-size: 7px; font-weight: 950; letter-spacing: .07em;
    line-height: 1.1; text-transform: uppercase; white-space: nowrap;
  }
  .game-dropdown-item[aria-current="page"] .game-current-indicator {
    display: inline-flex;
  }
  .game-dropdown-arrow {
    width: 17px; height: 17px; fill: none; stroke: var(--muted);
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  .topbar-logout {
    flex: none; min-height: 38px; display: inline-flex; align-items: center;
    justify-content: center; gap: 7px; padding: 8px 11px;
    border: 1px solid var(--line); border-radius: 11px;
    color: var(--muted); background: var(--surface);
    font-size: 12px; font-weight: 850;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease,
      transform 150ms ease;
  }
  .topbar-logout:hover {
    color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, var(--line));
    background: var(--danger-soft); transform: translateY(-1px);
  }
  .topbar-logout svg {
    width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  }

  /* Mobile chrome: keep navigation centered independently of side controls. */
  @media (max-width: 680px) {
    .topbar {
      min-height: 0; display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto auto auto;
      grid-template-areas:
        "brand spacer theme account logout"
        "tabs tabs tabs tabs tabs";
      align-items: center; gap: 7px 6px;
      padding:
        max(7px, env(safe-area-inset-top))
        max(8px, env(safe-area-inset-right))
        7px
        max(8px, env(safe-area-inset-left));
    }
    .topbar .game-menu { grid-area: brand; }
    .topbar .brand {
      display: flex; align-items: center; justify-content: center;
    }
    .topbar .brand .logo { width: 32px; height: 32px; }
    .topbar .game-switcher-button.brand {
      min-height: 44px; gap: 4px; padding: 5px 7px;
    }
    .topbar .game-switcher-button .brand-text {
      display: block; width: max-content; min-width: 0; max-width: min(34vw, 140px); overflow: hidden;
      font-size: 13.5px; text-overflow: ellipsis;
    }
    .topbar .game-menu-chevron { width: 12px; height: 12px; }
    .topbar .game-dropdown {
      top: calc(100% + 54px);
      max-height: calc(100dvh - 112px);
    }
    .topbar .spacer { grid-area: spacer; display: block; }
    .topbar .theme-btn {
      grid-area: theme; width: 44px; height: 44px; min-height: 44px; padding: 11px;
    }
    .topbar .account-nav {
      grid-area: account; min-width: 64px; max-width: min(42vw, 148px);
      min-height: 44px; padding: 8px 10px; font-size: 11.5px; line-height: 1;
    }
    .topbar .topbar-logout {
      grid-area: logout; width: 44px; min-height: 44px; padding: 11px;
    }
    .topbar .topbar-logout span { display: none; }
    .topbar .tabs {
      grid-area: tabs; display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      justify-self: center; width: 100%; max-width: 520px;
      min-width: 0; margin: 0; padding: 3px; gap: 2px; overflow: visible;
    }
    .topbar .tabs a {
      width: 100%; min-width: 0; min-height: 44px;
      display: flex; align-items: center; justify-content: center;
      padding: 0 5px; line-height: 1; text-align: center; white-space: nowrap;
      font-size: 12px;
    }
    .topbar .tabs .nav-full { display: none; }
    .topbar .tabs .nav-short { display: inline; }
  }
  @media (max-width: 340px) {
    .topbar .game-switcher-button .brand-text {
      max-width: 96px; font-size: 12.5px;
    }
  }
  @media (max-width: 360px) {
    :root[data-game="minesweeper"] .topbar .game-switcher-button.brand {
      gap: 3px; padding-inline: 5px;
    }
    :root[data-game="minesweeper"] .topbar .brand-game-icon {
      width: 24px; height: 24px;
    }
    :root[data-game="minesweeper"] .topbar .game-switcher-button .brand-text {
      font-size: 11.5px; letter-spacing: -.04em;
    }
  }
  @media (pointer: coarse) {
    .leaderboard-switcher a, .game-dropdown-item { min-height: 44px; }
  }
  /* Tango uses one warm sunset system across every surface and mode. */
  :root[data-game="tango"],
  body[data-game="tango"] {
    --bg: #FFF6EB;
    --surface: #FFFCF8;
    --surface-soft: #FCEBDD;
    --surface-raised: rgba(255, 252, 248, 0.95);
    --ink: #302119;
    --muted: #765E4E;
    --line: #E8CDBA;
    --line-strong: #CFA78B;
    --accent: #C84D1A;
    --accent-strong: #8C3518;
    --accent-soft: #FBE0CC;
    --teal: #E58A2B;
    --teal-soft: #FAE8C9;
    --gold: #E39A22;
    --gold-dark: #784500;
    --pill: #F8E7D8;
    --board-line: #3B281F;
    --shadow: 0 1px 2px rgba(104, 48, 20, 0.06), 0 10px 28px rgba(104, 48, 20, 0.08);
    --shadow-sm: 0 1px 2px rgba(104, 48, 20, 0.05), 0 5px 15px rgba(104, 48, 20, 0.065);
    --shadow-lg: 0 24px 64px rgba(104, 48, 20, 0.15);
    --tango-page: #F8F9FE;
    --tango-cell: #ffffff;
    --tango-given: #eeebe7;
    --tango-line: #ebe4da;
    --tango-clue: #8c724c;
    --tango-sun: #ffb31e;
    --tango-sun-edge: #cb6c2f;
    --tango-moon: #4c8ce6;
    --tango-moon-edge: #1855aa;
  }
  :root[data-theme="dark"][data-game="tango"],
  :root[data-theme="dark"] body[data-game="tango"] {
    --bg: #1B120E;
    --surface: #281A14;
    --surface-soft: #34231B;
    --surface-raised: rgba(40, 26, 20, 0.95);
    --ink: #FFF3E9;
    --muted: #CFB4A2;
    --line: #594033;
    --line-strong: #7B5946;
    --accent: #FF9D61;
    --accent-strong: #FFD0AE;
    --accent-soft: #4A291D;
    --teal: #F1A24D;
    --teal-soft: #49331F;
    --gold: #F2B85A;
    --gold-dark: #FFD998;
    --pill: #38261E;
    --board-line: #140D09;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 12px 30px rgba(0, 0, 0, 0.22);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 6px 18px rgba(0, 0, 0, 0.18);
    --shadow-lg: 0 26px 68px rgba(0, 0, 0, 0.4);
    --tango-page: #1B120E;
    --tango-cell: #2B201A;
    --tango-given: #392A21;
    --tango-line: #655044;
    --tango-clue: #DEC5AF;
    --tango-sun: #FFB432;
    --tango-sun-edge: #D87535;
    --tango-moon: #79A6E9;
    --tango-moon-edge: #B5D0F7;
  }
  body[data-game="tango"] {
    background:
      radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--gold) 19%, transparent), transparent 27rem),
      radial-gradient(circle at 6% 34%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 32rem),
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 42%, transparent), transparent 32rem),
      var(--bg);
  }
  body[data-game="tango"] .daily-hero {
    background:
      radial-gradient(circle at 87% 15%, rgba(255, 218, 126, .42) 0 8%, transparent 8.5%),
      radial-gradient(circle at 76% 82%, rgba(255, 244, 213, .14) 0 16%, transparent 16.5%),
      linear-gradient(125deg, #702813 0%, #CC501D 56%, #F0A13C 100%);
  }
  body[data-game="tango"] .daily-hero::after {
    right: -34px; bottom: -55px; width: 190px; border: 0; border-radius: 50%;
    opacity: .2; transform: rotate(-8deg);
    background:
      radial-gradient(circle at 32% 38%, #FFE8A7 0 17%, transparent 18%),
      radial-gradient(circle at 69% 61%, #BCD8FF 0 17%, transparent 18%),
      radial-gradient(circle, rgba(255,255,255,.34) 0 48%, transparent 49%);
  }
  body[data-game="tango"] .daily-kicker { color: #FFE1A3; }
  body[data-game="tango"] .daily-action .btn {
    color: #4A251B; border-color: #FFF0C5; background: #FFF0C5;
  }
  :root[data-theme="dark"] body[data-game="tango"] .daily-hero {
    background:
      radial-gradient(circle at 87% 15%, rgba(255, 190, 78, .3) 0 8%, transparent 8.5%),
      radial-gradient(circle at 76% 82%, rgba(255, 235, 200, .08) 0 16%, transparent 16.5%),
      linear-gradient(125deg, #351D18 0%, #6F3023 56%, #9F592B 100%);
  }
  body[data-game="tango"] .random-visual {
    border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
    background:
      radial-gradient(circle at 82% 16%, rgba(255, 224, 151, .25), transparent 24%),
      linear-gradient(135deg, rgba(255,255,255,.13), transparent 42%),
      linear-gradient(145deg, #7B2D16, #D85B20 54%, #F1A33D);
  }
  body[data-game="tango"] .day-card.any-day,
  body[data-game="tango"] .profile-hero,
  body[data-game="tango"] .auth-intro {
    background:
      linear-gradient(125deg, rgba(255,255,255,.09), transparent 46%),
      linear-gradient(135deg, #762A14, #CF511D 56%, #EE9A36);
  }
  body[data-game="tango"] .profile-hero::after,
  body[data-game="tango"] .auth-intro::after {
    right: -28px; bottom: -42px; width: 176px; border: 0; border-radius: 50%;
    opacity: .2; transform: rotate(-8deg);
    background:
      radial-gradient(circle at 32% 38%, #FFE8A7 0 17%, transparent 18%),
      radial-gradient(circle at 69% 61%, #BCD8FF 0 17%, transparent 18%),
      radial-gradient(circle, rgba(255,255,255,.34) 0 48%, transparent 49%);
  }
  body[data-game="tango"] .auth-intro .page-eyebrow { color: #FFE3A7; }
  :root[data-theme="dark"] body[data-game="tango"] .profile-hero,
  :root[data-theme="dark"] body[data-game="tango"] .auth-intro {
    background:
      radial-gradient(circle at 88% 16%, rgba(255,205,119,.12) 0 42px, transparent 43px),
      linear-gradient(135deg, #351B15 0%, #6E2E20 58%, #96542B 100%);
  }
  body[data-game="tango"] .watch-summary {
    background:
      radial-gradient(circle at 91% 18%, rgba(255, 213, 123, .26), transparent 25%),
      linear-gradient(118deg, #5D2112 0%, #B6431A 54%, #E58A2B 118%);
    box-shadow: 0 16px 40px rgba(112, 43, 18, .2);
  }
  body[data-game="tango"] .rush-page-heading {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
    background:
      radial-gradient(circle at 90% 18%, color-mix(in srgb, var(--gold) 34%, transparent) 0 46px, transparent 47px),
      linear-gradient(125deg,
        color-mix(in srgb, var(--surface) 84%, #FFD5A8) 0%,
        color-mix(in srgb, var(--surface) 72%, #F18B45) 100%);
  }
  body[data-game="tango"] .rush-page-heading .page-eyebrow,
  body[data-game="tango"] .rush-mode-choice .rush-mode-icon,
  body[data-game="tango"] .rush-car-control-copy > span,
  body[data-game="tango"] .rush-duel-cta > strong,
  body[data-game="tango"] .rush-watch-hero p span,
  body[data-game="tango"] .rush-watch-live {
    color: var(--accent-strong);
  }
  body[data-game="tango"] .rush-unrated-tag,
  body[data-game="tango"] .rush-mode-tag,
  body[data-game="tango"] .rush-rating-head > span,
  body[data-game="tango"] .rush-race-clock {
    color: var(--accent-strong);
    background: var(--accent-soft);
  }
  body[data-game="tango"] .rush-choice > input:checked + span,
  body[data-game="tango"] .race-car-choice > input:checked + span {
    color: var(--accent-strong); border-color: var(--accent);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  body[data-game="tango"] .rush-settings summary::after {
    color: var(--accent-strong); background: var(--accent-soft);
  }
  body[data-game="tango"] .rush-car-control,
  body[data-game="tango"] .race-car-modal-head,
  body[data-game="tango"] .rush-duel-cta {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background:
      linear-gradient(115deg,
        color-mix(in srgb, var(--gold) 9%, var(--bg)),
        color-mix(in srgb, var(--accent) 10%, var(--bg)));
  }
  body[data-game="tango"] .rush-submit {
    background: linear-gradient(105deg, #7D2C13, #C84D1A 58%, #A83A13);
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 24%, transparent);
  }
  body[data-game="tango"] .rush-racebar {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--surface) 92%, var(--gold)),
        color-mix(in srgb, var(--surface) 90%, var(--accent)));
  }
  body[data-game="tango"] .rush-track-line {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 72%, var(--line)),
      color-mix(in srgb, var(--gold) 76%, var(--line)));
  }
  body[data-game="tango"] .rush-watch-page-heading,
  body[data-game="tango"] .rush-watch-hero {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background:
      radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--gold) 17%, transparent), transparent 27%),
      linear-gradient(130deg, var(--surface), color-mix(in srgb, var(--surface) 84%, var(--accent)));
  }
  body[data-game="tango"] .rush-watch-clock {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: color-mix(in srgb, var(--surface) 76%, var(--accent-soft));
  }
  body[data-game="tango"] #view-game {
    background: var(--tango-page);
  }
  body[data-game="tango"] #view-game .game-wrap {
    width: min(100%, 590px);
  }
  body[data-game="tango"] #view-game .g-header {
    margin-bottom: 3px; padding: 7px 0;
    border: 0; border-radius: 0; background: transparent;
    box-shadow: none; backdrop-filter: none;
  }
  body[data-game="tango"] #view-game .g-header .icon-btn {
    color: var(--ink); border: 0; background: transparent;
  }
  body[data-game="tango"] #view-game .g-header .icon-btn:hover {
    color: var(--ink); border: 0; background: color-mix(in srgb, var(--ink) 7%, transparent);
  }
  .tango-title-icons {
    display: inline-flex; align-items: center; gap: 2px;
  }
  .tango-title-icons .tango-rule-symbol {
    top: 0; margin: 0;
  }
  body[data-game="tango"] .random-visual .tango-practice-icons {
    position: absolute; z-index: 1; inset: 0;
    display: flex; align-items: center; justify-content: center;
    gap: clamp(14px, 2.4vw, 26px);
  }
  body[data-game="tango"] .random-visual .tango-practice-icons .tango-symbol {
    position: relative; flex: 0 0 auto;
    width: clamp(68px, 9vw, 116px); height: clamp(68px, 9vw, 116px);
    filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .28));
  }
  body[data-game="tango"] .crowns {
    display: flex; align-items: center; gap: 3px; min-height: 22px;
    letter-spacing: 0;
  }
  body[data-game="tango"] .crowns > span {
    display: inline-grid; place-items: center;
  }
  body[data-game="tango"] .crowns .tango-symbol {
    width: 18px; height: 18px;
  }
  body[data-game="tango"] .pz-mystery .tango-archive-icons {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    width: 58%;
  }
  body[data-game="tango"] .pz-mystery .tango-archive-icons .tango-symbol {
    width: 48%; height: auto; fill: currentColor;
  }
  body[data-game="tango"] .pz-solved {
    color: var(--teal); font-size: 11px;
  }
  body[data-game="tango"] #view-game .g-title {
    gap: 5px; font-size: 19px; font-weight: 750;
  }
  body[data-game="tango"] #view-game .g-subhead {
    min-height: 42px; margin: 0 0 9px; padding: 0 1px;
  }
  body[data-game="tango"] #view-game .g-timer {
    color: var(--ink); font-size: 17px;
  }
  body[data-game="tango"] #view-game .g-timer::before {
    width: 13px; height: 13px; border-width: 2px;
  }
  body[data-game="tango"] #view-game .g-diff {
    display: none;
  }
  body[data-game="tango"] #view-game .g-subhead .pill-btn,
  body[data-game="tango"] #view-game .g-actions .pill-btn {
    color: var(--ink); border: 1.5px solid var(--ink);
    background: transparent; box-shadow: none;
  }
  body[data-game="tango"] #view-game .g-subhead .pill-btn {
    min-height: 44px; padding: 7px 17px; font-size: 14px; font-weight: 500;
  }
  body[data-game="tango"] #view-game .g-actions {
    gap: 8px; margin: 12px 0 8px;
  }
  body[data-game="tango"] #view-game .g-actions .pill-btn {
    min-height: 44px; padding: 8px 16px; font-size: 14px; font-weight: 500;
  }
  body[data-game="tango"] #view-game .pill-btn:disabled {
    color: color-mix(in srgb, var(--muted) 70%, transparent);
    border-color: transparent; background: color-mix(in srgb, var(--muted) 13%, transparent);
  }
  body[data-game="tango"] #view-game .board-holder {
    padding: 0; border: 0; border-radius: 6px;
    background: transparent; box-shadow: none;
  }
  /* LinkedIn: 1px grid lines (gap-based so they stay exactly 1px at any cell size) */
  body[data-game="tango"] #view-game .board {
    border: 1px solid var(--tango-line); border-radius: 6px;
    background: var(--tango-line); gap: 1px;
  }
  body[data-game="tango"] #view-game .cell.tango-cell {
    overflow: visible; border: 0;
    background: var(--tango-cell);
  }
  body[data-game="tango"] #view-game .cell.tango-cell.tango-given {
    background: var(--tango-given);
  }
  /* LinkedIn renders the sun at 31px and the moon at 28px in a ~74px cell. */
  /* LinkedIn's glyphs don't fill their SVG boxes; these box sizes put the
     visible sun at ~46% and the visible moon at ~40% of the cell (measured). */
  body[data-game="tango"] #view-game .tango-symbol {
    width: 50%; height: 50%; z-index: 2; overflow: visible;
    filter: none;
  }
  body[data-game="tango"] #view-game .tango-symbol.moon {
    width: 51%; height: 51%;
  }
  .tango-symbol .sun-disc { fill: var(--tango-sun); stroke: var(--tango-sun-edge); }
  .tango-symbol .moon-body { fill: var(--tango-moon); stroke: var(--tango-moon-edge); }
  .tango-symbol .moon-shine {
    opacity: 0; fill: #BFD4EF;
  }
  .tango-symbol .tango-sparkles {
    opacity: 0; fill: #2B69B3;
  }
  .tango-symbol .sun-ring {
    fill: none; stroke: #F5A614; stroke-width: 3; opacity: 0;
  }
  .tango-symbol .sun-shine {
    fill: none; stroke: rgba(255, 255, 255, .82); stroke-width: 9;
    stroke-linecap: round; opacity: 0;
  }
  body[data-game="tango"] .tango-symbol.mark-pop,
  body[data-game="tango"] .watch-cell .tango-symbol.watch-symbol-arrive {
    transform-origin: center;
    animation: tango-symbol-arrive 135ms cubic-bezier(.2, .72, .35, 1) both;
  }
  @keyframes tango-symbol-arrive {
    from { opacity: .24; transform: scale(.87); }
    to { opacity: 1; transform: scale(1); }
  }
  .tango-celebrating .tango-symbol.moon .moon-shine {
    animation: tango-moon-shimmer 720ms ease-in-out 70ms both;
  }
  .tango-celebrating .tango-symbol.moon .tango-sparkles {
    animation: tango-twinkle 720ms ease-out 70ms both;
  }
  .tango-celebrating .tango-symbol.sun .sun-ring-one {
    animation: tango-sun-ring 720ms ease-out 790ms both;
  }
  .tango-celebrating .tango-symbol.sun .sun-ring-two {
    animation: tango-sun-ring 720ms ease-out 860ms both;
  }
  .tango-celebrating .tango-symbol.sun .sun-shine {
    animation: tango-sun-shimmer 720ms ease-in-out 790ms both;
  }
  @keyframes tango-moon-shimmer {
    0%, 100% { opacity: 0; transform: translate(-4px, 4px); }
    42%, 62% { opacity: .7; transform: translate(0, 0); }
  }
  @keyframes tango-twinkle {
    0%, 100% { opacity: 0; transform: scale(.35); transform-origin: 80px 17px; }
    42%, 70% { opacity: .95; transform: scale(1); }
  }
  @keyframes tango-sun-ring {
    0% { opacity: 0; transform: scale(.72); transform-origin: center; }
    32% { opacity: .66; }
    100% { opacity: 0; transform: scale(1.18); transform-origin: center; }
  }
  @keyframes tango-sun-shimmer {
    0%, 100% { opacity: 0; transform: translate(-7px, -7px); }
    43%, 62% { opacity: .76; transform: translate(2px, 2px); }
  }
  /* LinkedIn's edge chips are 19x18 / 18x18 in a ~74px cell (≈25% of the cell). */
  body[data-game="tango"] #view-game .tango-relation {
    z-index: 6; width: 30%; height: 30%; min-width: 0; min-height: 0;
    border: 0; border-radius: 0; color: var(--tango-clue);
    background: transparent; font-size: 0;
    display: flex; align-items: center; justify-content: center;
  }
  body[data-game="tango"] #view-game .tango-relation.horizontal {
    transform: translate(calc(50% + 0.5px), -50%);
  }
  body[data-game="tango"] #view-game .tango-relation.vertical {
    width: 30%; height: 30%;
    transform: translate(-50%, calc(50% + 0.5px));
  }
  .tango-relation-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  /* LinkedIn's 19x18 / 18x18 chips ≈ 25.7% of a 74px cell inside the 30% box */
  .tango-relation-glyph { display: block; width: 86%; height: auto; }
  .tango-relation-glyph .tango-relation-bg { fill: var(--tango-cell); }
  .tango-relation-glyph .tango-relation-mark { fill: var(--tango-clue); }
  body[data-game="tango"] #view-game .cell.clash::after {
    z-index: 1; inset: -1px;
    border: 2px solid rgba(240, 43, 43, .84);
    background: linear-gradient(
      135deg,
      transparent 43%, rgba(240, 43, 43, .26) 44% 51%, transparent 52%
    );
  }
  body[data-game="tango"] #view-game .nudge[data-kind="error"] {
    margin: 11px 0 8px; padding: 13px 16px;
    border: 1px solid #E53636; border-radius: 4px;
    background: var(--tango-cell); box-shadow: none; font-size: 13px;
  }
  body[data-game="tango"] #view-game .howto {
    margin-top: 9px; border-radius: 4px; background: transparent; box-shadow: none;
  }
  body[data-game="tango"] #view-game .howto summary {
    padding: 14px 16px; font-size: 14px; font-weight: 650;
  }
  body[data-game="tango"] #view-game .howto ul {
    margin: 0; padding: 0 18px 16px 36px; font-size: 13px;
  }
  body[data-game="tango"] #view-game .howto li {
    margin: 10px 0;
  }
  body[data-game="tango"] .watch-board-slot {
    overflow: hidden;
    border: 2px solid var(--tango-line); border-radius: 6px;
    background: var(--tango-line); box-shadow: none;
  }
  body[data-game="tango"] .watch-board {
    overflow: visible;
    border: 0; border-radius: 3px;
    background: var(--tango-line);
  }
  body[data-game="tango"] .watch-cell.tango-cell {
    isolation: auto; overflow: visible;
    border: 1px solid var(--tango-line);
    background: var(--tango-cell);
  }
  body[data-game="tango"] .watch-cell.tango-given {
    background: var(--tango-given);
  }
  body[data-game="tango"] .watch-cell .tango-symbol {
    width: 62%; height: 62%; z-index: 2;
    overflow: visible; filter: none;
  }
  body[data-game="tango"] .watch-cell .tango-relation {
    z-index: 6; width: 25%; height: 18%; min-width: 9px; min-height: 7px;
    border: 0; border-radius: 0; color: var(--tango-clue);
    background: var(--tango-cell);
    font-size: clamp(7px, 1.15vw, 13px); font-weight: 650;
  }
  body[data-game="tango"] .watch-cell .tango-relation.horizontal {
    transform: translate(50%, -50%);
  }
  body[data-game="tango"] .watch-cell .tango-relation.vertical {
    width: 18%; height: 25%;
    transform: translate(-50%, 50%);
  }
  body[data-game="tango"] .watch-cell.watch-move-pop,
  body[data-game="tango"] .watch-cell.watch-move-pop .tango-symbol { animation: none; }
  body[data-game="tango"] .watch-cell.watch-conflict {
    z-index: 2; box-shadow: none;
  }
  body[data-game="tango"] .watch-cell.watch-conflict::after {
    z-index: 1; inset: -1px;
    border: 2px solid rgba(240, 43, 43, .84);
    background: linear-gradient(
      135deg,
      transparent 43%, rgba(240, 43, 43, .26) 44% 51%, transparent 52%
    );
    animation: none;
  }
  .tango-rule-symbol {
    position: relative; top: 2px; width: 16px; height: 16px;
    display: inline-block; margin: 0 1px;
  }
  .tango-result-icons {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  }
  .tango-result-icons .tango-symbol {
    width: 34px; height: 34px; overflow: visible;
  }
  .tango-rule-symbol.sun {
    border: 2px solid var(--tango-sun-edge); border-radius: 50%;
    background: var(--tango-sun);
  }
  .tango-rule-symbol.moon {
    overflow: hidden; border: 2px solid var(--tango-moon-edge);
    border-radius: 50%; background: var(--tango-moon);
  }
  .tango-rule-symbol.moon::after {
    content: ""; position: absolute; width: 13px; height: 13px;
    left: 7px; top: -2px; border-radius: 50%; background: var(--tango-cell);
  }
  @media (max-width: 620px) {
    body[data-game="tango"] #view-game {
      padding:
        max(6px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(34px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    }
    body[data-game="tango"] #view-game .g-header {
      grid-template-columns: 44px minmax(0, 1fr) 44px 44px 44px;
    }
    body[data-game="tango"] #view-game .g-actions .pill-btn {
      min-height: 44px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .tango-celebrating .tango-symbol * { animation: none !important; }
    body[data-game="tango"] .tango-symbol.mark-pop,
    body[data-game="tango"] .watch-cell .tango-symbol.watch-symbol-arrive {
      animation: none; opacity: 1;
    }
  }

  /* LinkedIn Tango board spans ~91.4% of a phone screen (measured from recordings). */
  @media (max-width: 640px) {
    body[data-game="tango"] #view-game { padding-inline: 4.3vw; }
  }
  /* LinkedIn Tango is a flat near-white page: no decorative backdrop gradients or pattern. */
  body[data-game="tango"]::before { display: none; }
  body[data-game="tango"] { background-image: none; }
  body[data-game="tango"] #view-game { background: var(--tango-page); }
  /* ===== Shared first-class boards: Zip, Patches, and Sudoku ===== */
  body[data-game="zip"] {
    --accent: #25282C;
    --accent-strong: #111315;
    --accent-soft: #E9EAEC;
    --teal: #555B61;
    --teal-soft: #ECEDEF;
  }
  body[data-game="patches"] {
    --accent: #C64D3D;
    --accent-strong: #8C2F26;
    --accent-soft: #F8E0DC;
    --teal: #A83B32;
    --teal-soft: #F5DEDA;
  }
  body[data-game="mini-sudoku"] {
    --accent: #3E8D73;
    --accent-strong: #246650;
    --accent-soft: #DDF3EA;
    --teal: #4B7EA5;
    --teal-soft: #DFEAF3;
  }
  body[data-game="akari"] {
    --accent: #C58A18;
    --accent-strong: #80550B;
    --accent-soft: #FFF0C9;
    --teal: #486C78;
    --teal-soft: #E2EDF0;
  }
  body[data-game="minesweeper"] {
    --accent: #5A7580;
    --accent-strong: #344D57;
    --accent-soft: #E2EBEE;
    --teal: #B46437;
    --teal-soft: #F4E6DD;
  }
  :root[data-theme="dark"] body[data-game="zip"] {
    --accent: #F3F4F5;
    --accent-strong: #FFFFFF;
    --accent-soft: #34383D;
  }
  :root[data-theme="dark"] body[data-game="zip"] .brand-game-icon {
    color: #111315;
  }
  :root[data-theme="dark"] body[data-game="akari"] {
    --accent: #F4C85A;
    --accent-strong: #FFE29A;
    --accent-soft: #463B23;
  }
  :root[data-theme="dark"] body[data-game="minesweeper"] {
    --accent: #9DBBC5;
    --accent-strong: #C5DCE3;
    --accent-soft: #2E3D43;
  }
  body[data-game="zip"] .random-visual,
  body[data-game="zip"] .daily-hero,
  body[data-game="zip"] .profile-hero,
  body[data-game="zip"] .auth-intro,
  body[data-game="zip"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(255,255,255,.2), transparent 24%),
      linear-gradient(140deg, #050607 0%, #292C30 58%, #656A70 100%);
  }
  body[data-game="patches"] .random-visual,
  body[data-game="patches"] .daily-hero,
  body[data-game="patches"] .profile-hero,
  body[data-game="patches"] .auth-intro,
  body[data-game="patches"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(255,224,203,.22), transparent 24%),
      linear-gradient(140deg, #5D1719 0%, #A93231 55%, #E06B55 100%);
  }
  body[data-game="mini-sudoku"] .random-visual,
  body[data-game="mini-sudoku"] .daily-hero,
  body[data-game="mini-sudoku"] .profile-hero,
  body[data-game="mini-sudoku"] .auth-intro,
  body[data-game="mini-sudoku"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(218,255,233,.22), transparent 24%),
      linear-gradient(140deg, #0C4635 0%, #26775A 56%, #78B597 100%);
  }
  body[data-game="akari"] .random-visual,
  body[data-game="akari"] .daily-hero,
  body[data-game="akari"] .profile-hero,
  body[data-game="akari"] .auth-intro,
  body[data-game="akari"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(255,245,183,.3), transparent 24%),
      linear-gradient(140deg, #422B08 0%, #9A650A 56%, #E0AF32 100%);
  }
  body[data-game="minesweeper"] .random-visual,
  body[data-game="minesweeper"] .daily-hero,
  body[data-game="minesweeper"] .profile-hero,
  body[data-game="minesweeper"] .auth-intro,
  body[data-game="minesweeper"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(220,239,244,.2), transparent 24%),
      linear-gradient(140deg, #1C2E35 0%, #48646E 56%, #7D959D 100%);
  }
  .classic-title-icon {
    width: 24px; height: 24px; display: inline-grid; place-items: center;
  }
  .classic-title-icon svg,
  .classic-launch-icon svg,
  .classic-practice-icon svg {
    display: block; width: 100%; height: 100%;
  }
  .classic-title-icon svg { color: var(--accent-strong); }
  .classic-launch-icon {
    width: 74px; height: 74px; display: inline-grid; place-items: center;
    color: var(--accent-strong);
  }
  .classic-practice-icon {
    width: min(56%, 190px); aspect-ratio: 1; display: grid; place-items: center;
    color: var(--accent-strong);
  }
  .classic-day-mark,
  .classic-mystery-icon {
    display: inline-grid; place-items: center; color: var(--accent-strong);
  }
  .classic-day-mark { width: 20px; height: 20px; }
  .classic-day-mark svg,
  .classic-mystery-icon svg { width: 100%; height: 100%; }
  .day-card.any-day .classic-day-mark { color: #fff; }
  .classic-mystery-icon { width: 54%; max-width: 58px; aspect-ratio: 1; }

  .board.zip-board,
  .watch-board.zip-board {
    isolation: isolate;
    overflow: hidden;
    --zip-path-start: #444A4E;
    --zip-path-end: #101315;
    --zip-path-shadow: rgba(11, 14, 16, .24);
    border: 2px solid #AEB8C0; border-radius: 12px;
    background: #FBFCFD;
  }
  .zip-cell {
    isolation: auto; z-index: auto; overflow: visible;
    border: .65px solid #D4DADE;
    background: transparent;
  }
  .zip-cell.zip-visited {
    background: rgba(17, 19, 21, .055);
    box-shadow:
      inset 0 0 0 1px rgba(17, 19, 21, .025),
      inset 0 0 13px rgba(17, 19, 21, .065);
  }
  .zip-path-layer {
    position: absolute; z-index: 2; inset: 0;
    width: 100%; height: 100%; overflow: visible;
    pointer-events: none;
  }
  .zip-path-segment,
  .zip-path-live {
    fill: none; stroke-width: .54;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .zip-path-line { filter: drop-shadow(0 .035px .055px var(--zip-path-shadow)); }
  .zip-path-segment,
  .zip-path-live {
    stroke: color-mix(
      in srgb,
      var(--zip-path-start) var(--zip-segment-start-weight, 0%),
      var(--zip-path-end)
    );
  }
  .zip-path-live[hidden] { display: none; }
  .zip-wall-line {
    fill: none; stroke: #111315; stroke-width: .17;
    stroke-linecap: square; stroke-linejoin: miter;
  }
  .zip-checkpoint {
    position: absolute; z-index: 5; inset: 50% auto auto 50%;
    width: clamp(25px, 54%, 47px); aspect-ratio: 1;
    display: grid; place-items: center;
    transform: translate(-50%, -50%);
    border: 0; border-radius: 50%; color: #fff; background: #15191C;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    font-family: var(--font-display); font-size: clamp(14px, 3.45vw, 26px);
    font-weight: 900; font-variant-numeric: tabular-nums;
    line-height: 1; pointer-events: none;
  }
  :root[data-theme="dark"] .board.zip-board,
  :root[data-theme="dark"] .watch-board.zip-board { background: #F6F8FA; }

  .board.patches-board,
  .watch-board.patches-board {
    isolation: isolate;
    overflow: hidden;
    --patch-board-color: #FEFEFE;
    --patch-grid-color: #8E999F;
    --patch-label-color: #FFFFFF;
    border: 2px solid #D5DADD; border-radius: 12px;
    background: var(--patch-board-color);
  }
  .patches-cell {
    z-index: auto;
    overflow: visible;
    border: 0;
    background-color: transparent;
  }
  .patches-cell::before,
  .patches-cell::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
  }
  .patches-cell::before {
    top: 0; left: 0; right: 0; height: 1px;
    background: repeating-linear-gradient(
      to right,
      var(--patch-grid-color) 0 4.2%,
      transparent 4.2% 11.111%
    );
  }
  .patches-cell::after {
    top: 0; bottom: 0; left: 0; width: 1px;
    background: repeating-linear-gradient(
      to bottom,
      var(--patch-grid-color) 0 4.2%,
      transparent 4.2% 11.111%
    );
  }
  .patches-cell[aria-rowindex="1"]::before,
  .patches-cell[aria-colindex="1"]::after { display: none; }
  .patches-cell.patch-filled { background-color: transparent; }
  .patches-region-layer {
    position: absolute; z-index: 3; inset: 0;
    width: 100%; height: 100%; overflow: hidden;
    pointer-events: none;
    contain: paint;
  }
  .patch-region,
  .patch-region-preview {
    --patch-rest-fill: color-mix(in srgb, var(--patch-color) 42%, transparent);
  }
  .patch-region rect,
  .patch-region-preview rect {
    fill: var(--patch-rest-fill);
    stroke: var(--patch-color); stroke-width: .026;
  }
  .patch-area-badge { color: var(--patch-color); }
  .patch-area-badge circle {
    fill: color-mix(in srgb, var(--patch-color) 28%, var(--patch-board-color));
    stroke: currentColor; stroke-width: .018;
  }
  .patch-area-badge text {
    fill: currentColor; font-family: var(--font); font-size: .15px;
    font-weight: 900;
  }
  .patch-clue {
    position: absolute; z-index: 4; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    border: 0; outline: 0; color: var(--patch-color); background: none;
    box-shadow: none;
    line-height: 1; pointer-events: none; contain: layout paint;
    container-type: inline-size;
  }
  .patch-clue-body,
  .patch-clue::before,
  .patch-clue::after {
    content: "";
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    border-radius: 16%;
    pointer-events: none;
  }
  .patch-clue-body {
    background: var(--patch-color);
    border: 1px solid color-mix(in srgb, var(--patch-color) 82%, #263139);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--patch-color) 20%, transparent);
  }
  .patch-clue-square .patch-clue-body {
    width: 58%; height: 58%;
  }
  .patch-clue-horizontal .patch-clue-body {
    width: 76%; height: 44%;
    border-radius: 15% / 27%;
  }
  .patch-clue-vertical .patch-clue-body {
    width: 44%; height: 76%;
    border-radius: 27% / 15%;
  }
  .patch-clue-unknown .patch-clue-body { display: none; }
  .patch-clue-unknown::before {
    display: block;
    width: 76%; height: 44%;
    border-radius: 15% / 27%;
  }
  .patch-clue-unknown::after {
    display: block;
    width: 44%; height: 76%;
    border-radius: 27% / 15%;
  }
  .patch-clue-unknown::before,
  .patch-clue-unknown::after {
    border: 1px dashed color-mix(in srgb, var(--patch-color) 78%, #263139);
    background: color-mix(in srgb, var(--patch-color) 48%, transparent);
  }
  .patch-size-clue {
    position: absolute; z-index: 5; left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    display: grid; place-items: center;
    width: 100%; height: 100%;
    color: var(--patch-label-color);
    background: transparent;
    box-shadow: none;
    /* Size against this cell, including compact watch boards and resizes. */
    font-size: min(31px, 34cqw);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
    text-shadow: 0 1px 1px color-mix(in srgb, var(--patch-color) 64%, #1E262C);
    pointer-events: none;
  }
  .patch-clue-unknown .patch-size-clue {
    width: 48%; height: 48%;
    display: grid; place-items: center;
    border-radius: 13%;
    background: var(--patch-color);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--patch-color) 24%, transparent);
  }
  .patch-size-clue[data-digits="2"] {
    font-size: min(25px, 24cqw);
  }
  .patch-size-clue[data-digits="3"] {
    font-size: min(20px, 18cqw);
  }

  .board.mini-sudoku-board,
  .watch-board.mini-sudoku-board {
    overflow: hidden;
    border: 3px solid #7D888E; border-radius: 7px;
    background: #fff;
  }
  .mini-sudoku-cell {
    display: grid; place-items: center; overflow: hidden;
    border: .65px solid #BFC7CB; background: #fff;
    color: #626C72;
  }
  .mini-sudoku-cell.mini-region-right {
    border-right-width: 3px; border-right-color: #7D888E;
  }
  .mini-sudoku-cell.mini-region-bottom {
    border-bottom-width: 3px; border-bottom-color: #7D888E;
  }
  .mini-sudoku-cell.mini-peer { background: #E8F5F0; }
  .mini-sudoku-cell.mini-same-value { background: #CDEADD; }
  .mini-sudoku-cell.mini-selected {
    z-index: 3;
    box-shadow: inset 0 0 0 3px #3E8D73;
  }
  .mini-value {
    position: relative; z-index: 2;
    font-family: var(--font-display);
    font-size: clamp(22px, 7vw, 48px); font-weight: 720;
    line-height: 1;
  }
  .mini-sudoku-given .mini-value { color: #171B1E; }
  .mini-notes {
    position: absolute; z-index: 2; inset: 7%;
    display: grid; grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1fr; align-items: center;
  }
  .mini-notes i {
    min-width: 0; color: #59666D;
    font-family: "Comic Sans MS", "Bradley Hand", cursive;
    font-size: clamp(8px, 2.4vw, 15px); font-style: italic;
    font-weight: 700; text-align: center;
  }
  .mini-sudoku-cell.clash::after {
    z-index: 1; inset: 0;
    background: repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, .22) 0 7px,
      rgba(217, 63, 63, .64) 7px 10px
    );
  }
  .mini-sudoku-keypad {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px; width: 100%; margin: 13px 0 4px;
  }
  .mini-sudoku-keypad button {
    min-height: 48px; padding: 7px;
    border: 1px solid #BBD8CC; border-radius: 10px;
    color: #215C48; background: #E3F3EC;
    font-size: 20px; font-weight: 850;
  }
  .mini-sudoku-tools {
    display: flex; justify-content: center; gap: 9px; width: 100%; margin: 12px 0 0;
  }
  .mini-sudoku-tools button {
    min-width: 96px; min-height: 38px; padding: 7px 16px;
    border: 1px solid var(--line); border-radius: 999px;
    color: var(--muted); background: var(--surface); font-weight: 800;
  }
  .mini-sudoku-tools [data-mini-notes].active {
    color: #fff; border-color: var(--accent-strong);
    background: var(--accent);
  }
  .mini-sudoku-keypad button:disabled {
    color: #98A29E; border-color: #D8DEDB; background: #EDF1EF;
    box-shadow: none; cursor: default;
  }
  body[data-game="mini-sudoku"] #view-game .g-actions { display: none; }

  .board.minesweeper-board,
  .watch-board.minesweeper-board {
    overflow: hidden; border: 3px solid #4D6069; border-radius: 9px;
    background: #DCE4E7;
  }
  .minesweeper-cell {
    display: grid; place-items: center; overflow: hidden;
    border: 1px solid #9AABB2; background: #EFF3F4;
    color: #31454E; font-size: clamp(17px, 5vw, 34px); font-weight: 900;
  }
  .minesweeper-cell.mine-hidden {
    background: linear-gradient(145deg, #D5DEE1, #BCCACE);
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.62), inset -2px -2px 0 rgba(70,91,100,.18);
  }
  .mine-flag {
    width: 48%; height: 55%; color: #B84B32;
  }
  .mine-safe-mark { color: #637A83; }
  .mine-clue[data-value="1"] { color: #2068A8; }
  .mine-clue[data-value="2"] { color: #367A43; }
  .mine-clue[data-value="3"] { color: #B24B34; }
  .mine-clue[data-value="4"],
  .mine-clue[data-value="5"],
  .mine-clue[data-value="6"],
  .mine-clue[data-value="7"],
  .mine-clue[data-value="8"] { color: #6C4A86; }
  .minesweeper-cell.clash { box-shadow: inset 0 0 0 4px #D5483F; }

  @media (max-width: 620px) {
    body[data-game="zip"] #view-game,
    body[data-game="patches"] #view-game,
    body[data-game="mini-sudoku"] #view-game,
    body[data-game="akari"] #view-game,
    body[data-game="minesweeper"] #view-game {
      padding:
        max(6px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(34px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
    }
    .mini-sudoku-keypad { gap: 5px; }
    .mini-sudoku-keypad button { min-height: 44px; }
  }

  @media (pointer: coarse) {
    .modal .close-x,
    .watch-footer .btn,
    .rush-all-racers > summary,
    body[data-game="tango"] #view-game .g-subhead .pill-btn,
    body[data-game="tango"] #view-game .g-actions .pill-btn {
      min-width: 44px; min-height: 44px;
    }
  }
  /* ===== Complete per-game presentation systems ===== */
  :root[data-game="queens"],
  body[data-game="queens"] {
    --bg: #F9FAFE;
    --surface: #FCFEFF;
    --surface-soft: #E3EEF5;
    --surface-raised: rgba(252, 254, 255, .95);
    --ink: #122A3A;
    --muted: #587184;
    --line: #C5D7E3;
    --line-strong: #9CB9CB;
    --accent: #176FB9;
    --accent-strong: #064B86;
    --accent-soft: #D9ECF9;
    --teal: #16847C;
    --teal-soft: #D9F0ED;
    --pill: #E1ECF3;
    --board-line: #1D2226;
    --game-backdrop-primary: rgba(23, 111, 185, .18);
    --game-backdrop-secondary: rgba(22, 132, 124, .14);
    --game-pattern-line: rgba(35, 103, 145, .13);
    --game-hero-start: #063B68;
    --game-hero-mid: #0A66C2;
    --game-hero-end: #08756F;
    --game-hero-glow: rgba(255, 214, 109, .34);
    --game-hero-ink: #F7FBFF;
    --game-hero-muted: #C9E5FA;
    --game-hero-button: #FFD66D;
    --game-hero-button-ink: #182D3B;
    --game-stage-start: #101C25;
    --game-stage-end: #172A37;
    --game-stage-accent: #8CD8FF;
    --game-player-left: #2383E2;
    --game-player-right: #0A9B8E;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="queens"],
  :root[data-theme="dark"] body[data-game="queens"] {
    --bg: #0D1822;
    --surface: #142531;
    --surface-soft: #1B303D;
    --surface-raised: rgba(20, 37, 49, .95);
    --ink: #F1F7FA;
    --muted: #A8BBC7;
    --line: #304A59;
    --line-strong: #567384;
    --accent: #78BBF7;
    --accent-strong: #B4DBFF;
    --accent-soft: #183F5B;
    --teal: #65CEC5;
    --teal-soft: #173E3B;
    --pill: #203743;
    --game-backdrop-primary: rgba(52, 142, 216, .22);
    --game-backdrop-secondary: rgba(36, 164, 153, .17);
    --game-pattern-line: rgba(133, 190, 224, .1);
    --game-hero-start: #0B2840;
    --game-hero-mid: #0A4E88;
    --game-hero-end: #0B5C58;
    --game-hero-glow: rgba(120, 187, 247, .2);
    --game-accent-ink: #092238;
  }

  :root[data-game="tango"],
  body[data-game="tango"] {
    --bg: #F8F9FE;
    --surface: #FFFFFF;
    --surface-soft: #F7E4D6;
    --surface-raised: rgba(255, 253, 252, .95);
    --ink: #38241D;
    --muted: #7D6256;
    --line: #E6CABB;
    --line-strong: #CDA58F;
    --accent: #C14F29;
    --accent-strong: #8F321C;
    --accent-soft: #F8DCCB;
    --teal: #6079A8;
    --teal-soft: #E3E9F4;
    --gold: #E39A22;
    --gold-dark: #784500;
    --pill: #F4E2D6;
    --board-line: #3B281F;
    --game-backdrop-primary: rgba(197, 84, 45, .2);
    --game-backdrop-secondary: rgba(224, 145, 57, .17);
    --game-pattern-line: rgba(151, 81, 48, .13);
    --game-hero-start: #6B2419;
    --game-hero-mid: #B84A24;
    --game-hero-end: #D4864A;
    --game-hero-glow: rgba(255, 224, 151, .36);
    --game-hero-ink: #FFF9F3;
    --game-hero-muted: #FFE3C7;
    --game-hero-button: #FFF0C5;
    --game-hero-button-ink: #4A251B;
    --game-stage-start: #211611;
    --game-stage-end: #3D2118;
    --game-stage-accent: #FFB078;
    --game-player-left: #D06335;
    --game-player-right: #6686BF;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="tango"],
  :root[data-theme="dark"] body[data-game="tango"] {
    --bg: #1C1310;
    --surface: #291C18;
    --surface-soft: #35241E;
    --surface-raised: rgba(41, 28, 24, .95);
    --ink: #F8EDE6;
    --muted: #C9AFA1;
    --line: #5A3A2F;
    --line-strong: #805344;
    --accent: #FFAE76;
    --accent-strong: #FFD0AD;
    --accent-soft: #4A2A20;
    --teal: #9FB8E8;
    --teal-soft: #29364D;
    --pill: #3A2821;
    --game-backdrop-primary: rgba(206, 89, 47, .22);
    --game-backdrop-secondary: rgba(107, 137, 196, .18);
    --game-pattern-line: rgba(238, 172, 132, .1);
    --game-hero-start: #351B15;
    --game-hero-mid: #6E2E20;
    --game-hero-end: #704B2E;
    --game-hero-glow: rgba(255, 174, 118, .18);
    --game-accent-ink: #32180E;
  }

  :root[data-game="zip"],
  body[data-game="zip"] {
    --bg: #ECEEF0;
    --surface: #FAFAFA;
    --surface-soft: #E2E5E8;
    --surface-raised: rgba(250, 250, 250, .95);
    --ink: #17191C;
    --muted: #5F666D;
    --line: #C7CDD2;
    --line-strong: #9DA5AC;
    --accent: #272A2E;
    --accent-strong: #08090A;
    --accent-soft: #DADDE0;
    --teal: #676E74;
    --teal-soft: #E0E3E5;
    --pill: #E0E3E6;
    --board-line: #111315;
    --game-backdrop-primary: rgba(34, 37, 41, .16);
    --game-backdrop-secondary: rgba(109, 117, 124, .13);
    --game-pattern-line: rgba(28, 31, 34, .12);
    --game-hero-start: #050607;
    --game-hero-mid: #292C30;
    --game-hero-end: #656A70;
    --game-hero-glow: rgba(255, 255, 255, .2);
    --game-hero-ink: #F9FAFB;
    --game-hero-muted: #D9DDE1;
    --game-hero-button: #F6F7F8;
    --game-hero-button-ink: #151719;
    --game-stage-start: #090A0B;
    --game-stage-end: #222529;
    --game-stage-accent: #F4F5F6;
    --game-player-left: #2C3034;
    --game-player-right: #747B82;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="zip"],
  :root[data-theme="dark"] body[data-game="zip"] {
    --bg: #08090A;
    --surface: #111315;
    --surface-soft: #1A1D20;
    --surface-raised: rgba(17, 19, 21, .96);
    --ink: #F6F7F8;
    --muted: #A8AFB5;
    --line: #363B40;
    --line-strong: #5A6269;
    --accent: #F3F4F5;
    --accent-strong: #FFFFFF;
    --accent-soft: #303439;
    --teal: #AAB0B5;
    --teal-soft: #292D31;
    --pill: #22262A;
    --game-backdrop-primary: rgba(226, 231, 235, .11);
    --game-backdrop-secondary: rgba(121, 129, 136, .13);
    --game-pattern-line: rgba(238, 241, 243, .08);
    --game-hero-start: #020303;
    --game-hero-mid: #17191C;
    --game-hero-end: #383C41;
    --game-hero-glow: rgba(255, 255, 255, .12);
    --game-accent-ink: #101214;
  }

  :root[data-game="patches"],
  body[data-game="patches"] {
    --bg: #FBEEEB;
    --surface: #FFFDFC;
    --surface-soft: #F7DED9;
    --surface-raised: rgba(255, 253, 252, .95);
    --ink: #3B211E;
    --muted: #7D5B56;
    --line: #E6C3BC;
    --line-strong: #CA978E;
    --accent: #C34B3D;
    --accent-strong: #8A2E27;
    --accent-soft: #F8DCD6;
    --teal: #A83B32;
    --teal-soft: #F2DAD6;
    --pill: #F2DEDA;
    --board-line: #34201E;
    --game-backdrop-primary: rgba(201, 79, 64, .2);
    --game-backdrop-secondary: rgba(155, 58, 49, .13);
    --game-pattern-line: rgba(164, 65, 54, .12);
    --game-hero-start: #5D1719;
    --game-hero-mid: #A93231;
    --game-hero-end: #E06B55;
    --game-hero-glow: rgba(255, 224, 203, .24);
    --game-hero-ink: #FFF8F5;
    --game-hero-muted: #FFDAD2;
    --game-hero-button: #FFE0D7;
    --game-hero-button-ink: #4C1C18;
    --game-stage-start: #211112;
    --game-stage-end: #411E1C;
    --game-stage-accent: #FF9B88;
    --game-player-left: #D45C4D;
    --game-player-right: #913A35;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="patches"],
  :root[data-theme="dark"] body[data-game="patches"] {
    --bg: #1D1111;
    --surface: #2A1918;
    --surface-soft: #38211F;
    --surface-raised: rgba(42, 25, 24, .95);
    --ink: #FAECE9;
    --muted: #C9AAA5;
    --line: #593632;
    --line-strong: #81514A;
    --accent: #FF8D7B;
    --accent-strong: #FFC1B5;
    --accent-soft: #4B2824;
    --teal: #E67D70;
    --teal-soft: #462622;
    --pill: #3B2422;
    --game-backdrop-primary: rgba(211, 68, 58, .21);
    --game-backdrop-secondary: rgba(255, 141, 123, .13);
    --game-pattern-line: rgba(245, 164, 151, .09);
    --game-hero-start: #351416;
    --game-hero-mid: #742623;
    --game-hero-end: #9A4035;
    --game-hero-glow: rgba(255, 141, 123, .16);
    --game-accent-ink: #35100D;
  }

  :root[data-game="mini-sudoku"],
  body[data-game="mini-sudoku"] {
    --bg: #EDF7F1;
    --surface: #FCFFFD;
    --surface-soft: #DDEFE5;
    --surface-raised: rgba(252, 255, 253, .95);
    --ink: #17372B;
    --muted: #567467;
    --line: #BCD8C8;
    --line-strong: #8BB7A1;
    --accent: #337D64;
    --accent-strong: #226149;
    --accent-soft: #D6EEE3;
    --teal: #4B7EA5;
    --teal-soft: #DCEAF3;
    --pill: #DBECE3;
    --board-line: #18342A;
    --game-backdrop-primary: rgba(59, 139, 111, .2);
    --game-backdrop-secondary: rgba(75, 126, 165, .14);
    --game-pattern-line: rgba(54, 124, 99, .12);
    --game-hero-start: #0C4635;
    --game-hero-mid: #26775A;
    --game-hero-end: #629D81;
    --game-hero-glow: rgba(218, 255, 233, .24);
    --game-hero-ink: #F5FFF9;
    --game-hero-muted: #CDEBDD;
    --game-hero-button: #D8F5E5;
    --game-hero-button-ink: #173E2F;
    --game-stage-start: #0D1E18;
    --game-stage-end: #18382B;
    --game-stage-accent: #8BE1BC;
    --game-player-left: #3F9A78;
    --game-player-right: #5386AD;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="mini-sudoku"],
  :root[data-theme="dark"] body[data-game="mini-sudoku"] {
    --bg: #0E1B16;
    --surface: #172821;
    --surface-soft: #20352C;
    --surface-raised: rgba(23, 40, 33, .95);
    --ink: #ECF8F1;
    --muted: #A9C4B6;
    --line: #355849;
    --line-strong: #547B68;
    --accent: #77C8A8;
    --accent-strong: #A8E6CC;
    --accent-soft: #234A3A;
    --teal: #87B7DA;
    --teal-soft: #263D4C;
    --pill: #263E34;
    --game-backdrop-primary: rgba(80, 177, 139, .2);
    --game-backdrop-secondary: rgba(75, 126, 165, .17);
    --game-pattern-line: rgba(151, 211, 184, .09);
    --game-hero-start: #102C22;
    --game-hero-mid: #205741;
    --game-hero-end: #3B7058;
    --game-hero-glow: rgba(119, 200, 168, .16);
    --game-accent-ink: #102C22;
  }

  :root[data-game="akari"],
  body[data-game="akari"] {
    --bg: #F4F7F8;
    --surface: #FFFFFF;
    --surface-soft: #E9EFF2;
    --surface-raised: rgba(255, 255, 255, .96);
    --ink: #182831;
    --muted: #60727D;
    --line: #CAD6DD;
    --line-strong: #9DAFB9;
    --accent: #C68A16;
    --accent-strong: #7D5308;
    --accent-soft: #FFE9AE;
    --teal: #486C78;
    --teal-soft: #DDE8EB;
    --pill: #EDF2F4;
    --board-line: #2C2B28;
    --game-backdrop-primary: rgba(218, 158, 38, .14);
    --game-backdrop-secondary: rgba(72, 108, 120, .1);
    --game-pattern-line: rgba(72, 108, 120, .1);
    --game-hero-start: #422B08;
    --game-hero-mid: #8D5D0A;
    --game-hero-end: #C89625;
    --game-hero-glow: rgba(255, 245, 183, .32);
    --game-hero-ink: #FFFDF5;
    --game-hero-muted: #FFE7A0;
    --game-hero-button: #FFF0AE;
    --game-hero-button-ink: #3B2A08;
    --game-stage-start: #19160D;
    --game-stage-end: #332A12;
    --game-stage-accent: #FFD96A;
    --game-player-left: #D39B2B;
    --game-player-right: #597E8A;
    --game-accent-ink: #3B2A08;
  }
  :root[data-theme="dark"][data-game="akari"],
  :root[data-theme="dark"] body[data-game="akari"] {
    --bg: #10171A;
    --surface: #18232B;
    --surface-soft: #22313B;
    --surface-raised: rgba(24, 35, 43, .95);
    --ink: #F5F5EE;
    --muted: #A9BBC4;
    --line: #3A505E;
    --line-strong: #5E7480;
    --accent: #F4C85A;
    --accent-strong: #FFE49B;
    --accent-soft: #3E3723;
    --teal: #63B5D5;
    --teal-soft: #203D49;
    --pill: #293740;
    --game-backdrop-primary: rgba(244, 200, 90, .17);
    --game-backdrop-secondary: rgba(64, 167, 212, .16);
    --game-pattern-line: rgba(244, 216, 143, .08);
    --game-hero-start: #292008;
    --game-hero-mid: #5B430C;
    --game-hero-end: #75601C;
    --game-hero-glow: rgba(244, 200, 90, .16);
    --game-accent-ink: #312408;
  }

  :root[data-game="minesweeper"],
  body[data-game="minesweeper"] {
    --bg: #EEF3F4;
    --surface: #FCFEFE;
    --surface-soft: #DFE8EA;
    --surface-raised: rgba(252, 254, 254, .95);
    --ink: #20343B;
    --muted: #617780;
    --line: #C2D0D4;
    --line-strong: #98ADB4;
    --accent: #5B7883;
    --accent-strong: #334E58;
    --accent-soft: #DDE9EC;
    --teal: #B46437;
    --teal-soft: #F2E3DA;
    --pill: #E0E9EB;
    --board-line: #35474E;
    --game-backdrop-primary: rgba(91, 120, 131, .2);
    --game-backdrop-secondary: rgba(180, 100, 55, .14);
    --game-pattern-line: rgba(73, 103, 114, .12);
    --game-hero-start: #1C2E35;
    --game-hero-mid: #48646E;
    --game-hero-end: #7D959D;
    --game-hero-glow: rgba(220, 239, 244, .22);
    --game-hero-ink: #F7FCFD;
    --game-hero-muted: #D4E5EA;
    --game-hero-button: #E6F0F2;
    --game-hero-button-ink: #233A43;
    --game-stage-start: #10191D;
    --game-stage-end: #20333A;
    --game-stage-accent: #B7D0D8;
    --game-player-left: #607F8A;
    --game-player-right: #BD7045;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="minesweeper"],
  :root[data-theme="dark"] body[data-game="minesweeper"] {
    --bg: #10171A;
    --surface: #192428;
    --surface-soft: #223137;
    --surface-raised: rgba(25, 36, 40, .95);
    --ink: #EDF4F5;
    --muted: #A8BBC1;
    --line: #3B5058;
    --line-strong: #61767E;
    --accent: #9DBBC5;
    --accent-strong: #C5DCE3;
    --accent-soft: #2D4047;
    --teal: #D98B5B;
    --teal-soft: #4B3024;
    --pill: #29383D;
    --game-backdrop-primary: rgba(124, 163, 176, .18);
    --game-backdrop-secondary: rgba(217, 139, 91, .16);
    --game-pattern-line: rgba(180, 207, 216, .08);
    --game-hero-start: #17262C;
    --game-hero-mid: #354E57;
    --game-hero-end: #675044;
    --game-hero-glow: rgba(157, 187, 197, .16);
    --game-accent-ink: #18282E;
  }

  body[data-game] {
    background:
      radial-gradient(ellipse at 10% -8%, var(--game-backdrop-primary), transparent 35rem),
      radial-gradient(circle at 94% 16%, var(--game-backdrop-secondary), transparent 29rem),
      linear-gradient(180deg, color-mix(in srgb, var(--surface) 28%, transparent), transparent 430px),
      var(--bg);
    background-attachment: fixed;
  }
  body[data-game]::before {
    opacity: .32;
    background-image:
      linear-gradient(var(--game-pattern-line) 1px, transparent 1px),
      linear-gradient(90deg, var(--game-pattern-line) 1px, transparent 1px);
    background-size: 32px 32px;
    mask-image: linear-gradient(to bottom, #000 0, rgba(0,0,0,.65) 28rem, transparent 58rem);
  }
  body[data-game] .topbar {
    background: color-mix(in srgb, var(--surface) 90%, transparent);
    border-bottom-color: color-mix(in srgb, var(--accent) 17%, var(--line));
  }
  body[data-game] :is(.profile-hero, .daily-hero, .random-visual, .auth-intro, .watch-summary, .day-card.any-day) {
    color: var(--game-hero-ink);
    border-color: color-mix(in srgb, var(--game-hero-ink) 14%, transparent);
    background:
      radial-gradient(circle at 86% 15%, var(--game-hero-glow), transparent 25%),
      linear-gradient(128deg, var(--game-hero-start) 0%, var(--game-hero-mid) 57%, var(--game-hero-end) 100%);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--game-hero-start) 22%, transparent);
  }
  body[data-game] :is(.daily-kicker, .auth-intro .page-eyebrow) {
    color: var(--game-hero-muted);
  }
  body[data-game] .daily-action .btn {
    color: var(--game-hero-button-ink);
    border-color: var(--game-hero-button);
    background: var(--game-hero-button);
  }
  body[data-game] .random-visual {
    border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  }
  body[data-game] .watch-shell {
    --watch-left: var(--game-player-left);
    --watch-right: var(--game-player-right);
  }
  body[data-game] .watch-summary {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--game-hero-start) 24%, transparent);
  }
  body[data-game] .watch-summary .duel-code {
    color: var(--game-hero-ink);
    background: color-mix(in srgb, var(--game-hero-start) 54%, transparent);
  }
  body[data-game] #view-game {
    background:
      radial-gradient(circle at 50% -14%, var(--game-backdrop-primary), transparent 35rem),
      var(--bg);
  }
  body[data-game] .rush-page-heading {
    border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
    background:
      radial-gradient(circle at 90% 18%, var(--game-backdrop-secondary) 0 46px, transparent 47px),
      linear-gradient(125deg,
        color-mix(in srgb, var(--surface) 88%, var(--accent-soft)) 0%,
        color-mix(in srgb, var(--surface) 82%, var(--teal-soft)) 100%);
  }
  body[data-game] .rush-page-heading::after {
    background:
      linear-gradient(45deg, color-mix(in srgb, var(--ink) 76%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--ink) 76%, transparent) 75%) 0 0 / 16px 16px,
      linear-gradient(45deg, color-mix(in srgb, var(--ink) 76%, transparent) 25%, transparent 25% 75%, color-mix(in srgb, var(--ink) 76%, transparent) 75%) 8px 8px / 16px 16px;
  }
  body[data-game] :is(
    .rush-page-heading .page-eyebrow,
    .rush-mode-choice .rush-mode-icon,
    .rush-car-control-copy > span,
    .rush-duel-cta > strong,
    .rush-watch-hero p span,
    .rush-watch-live,
    .rush-rule .rush-icon,
    .rush-result-crown
  ) { color: var(--accent-strong); }
  body[data-game] :is(.rush-unrated-tag, .rush-mode-tag, .rush-rating-head > span, .rush-race-clock) {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface));
  }
  body[data-game] .rush-mode-tag.rated {
    color: var(--accent-strong);
    background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface));
  }
  body[data-game] :is(.rush-choice, .race-car-choice) > input:checked + span {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 78%, var(--surface));
    box-shadow: inset 0 0 0 1px var(--accent);
  }
  body[data-game] .race-car-choice:hover > span {
    border-color: color-mix(in srgb, var(--accent) 65%, var(--line));
  }
  body[data-game] .race-car-modal-selected {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--line));
  }
  body[data-game] .rush-visibility input:checked + span .rush-visibility-dot {
    border-color: var(--accent); background: var(--accent);
  }
  body[data-game] .rush-settings summary::after {
    color: var(--accent-strong); background: var(--surface);
  }
  body[data-game] :is(.rush-car-control, .race-car-modal-head, .rush-duel-cta) {
    border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
    background:
      linear-gradient(115deg,
        color-mix(in srgb, var(--accent-soft) 36%, var(--surface)),
        color-mix(in srgb, var(--teal-soft) 34%, var(--surface)));
  }
  body[data-game] .rush-submit {
    color: var(--game-hero-ink);
    background: linear-gradient(105deg, var(--game-hero-start), var(--game-hero-mid) 58%, var(--game-hero-end));
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 24%, transparent);
  }
  body[data-game] :is(.rush-player.you, .rush-duel-cta:hover) {
    border-color: var(--accent);
  }
  body[data-game] .rush-countdown {
    background:
      radial-gradient(circle, var(--game-backdrop-primary), transparent 60%),
      var(--surface);
  }
  body[data-game] .rush-countdown-number {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  }
  body[data-game] .rush-rematch-panel {
    border-color: color-mix(in srgb, var(--accent) 46%, var(--line));
    background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  }
  body[data-game] .rush-rematch-status strong { color: var(--accent-strong); }
  body[data-game] :is(.rush-racebar, .rush-watch-page-heading, .rush-watch-hero) {
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background:
      radial-gradient(circle at 84% 18%, var(--game-backdrop-secondary), transparent 28%),
      linear-gradient(130deg, var(--surface), color-mix(in srgb, var(--surface) 78%, var(--accent-soft)));
  }
  body[data-game] .rush-track-line {
    background: linear-gradient(90deg,
      color-mix(in srgb, var(--accent) 72%, var(--line)),
      color-mix(in srgb, var(--teal) 72%, var(--line)));
  }
  body[data-game] .rush-watch-clock {
    color: var(--accent-strong);
    border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
    background: color-mix(in srgb, var(--surface) 70%, var(--accent-soft));
  }
  body[data-game] .rush-watch-card {
    background: linear-gradient(100deg,
      color-mix(in srgb, var(--accent-soft) 34%, var(--surface)),
      var(--surface) 48%);
  }
  :root[data-theme="dark"] body[data-game] :is(
    .rush-page-heading .page-eyebrow,
    .rush-mode-choice .rush-mode-icon,
    .rush-car-control-copy > span,
    .rush-duel-cta > strong,
    .rush-watch-hero p span,
    .rush-watch-live,
    .rush-rule .rush-icon,
    .rush-result-crown,
    .rush-countdown-number,
    .rush-rematch-status strong,
    .rush-watch-clock
  ) { color: var(--accent-strong); }
  :root[data-theme="dark"] body[data-game] :is(
    .rush-unrated-tag,
    .rush-mode-tag,
    .rush-mode-tag.rated,
    .rush-rating-head > span,
    .rush-race-clock
  ) { color: var(--accent-strong); }
  :root[data-theme="dark"] body[data-game] :is(.rush-choice, .race-car-choice) > input:checked + span {
    color: var(--accent-strong);
  }
  body[data-game] .replay-stage {
    color: var(--game-hero-ink);
    background:
      radial-gradient(circle at 50% -20%, color-mix(in srgb, var(--game-stage-accent) 22%, transparent), transparent 42%),
      linear-gradient(145deg, var(--game-stage-start), var(--game-stage-end));
    box-shadow: 0 20px 55px color-mix(in srgb, var(--game-stage-start) 38%, transparent);
  }
  body[data-game] .replay-control.primary {
    color: var(--game-stage-start);
    border-color: var(--game-stage-accent);
    background: var(--game-stage-accent);
  }
  body[data-game] .replay-timeline::-webkit-slider-runnable-track {
    background: linear-gradient(to right,
      var(--game-stage-accent) 0 var(--replay-progress),
      rgba(236,246,255,.2) var(--replay-progress) 100%);
  }
  body[data-game] .replay-timeline::-webkit-slider-thumb {
    border-color: var(--game-stage-accent);
    background: var(--game-stage-start);
  }
  body[data-game] .replay-timeline::-moz-range-progress { background: var(--game-stage-accent); }
  body[data-game] .replay-timeline::-moz-range-thumb {
    border-color: var(--game-stage-accent); background: var(--game-stage-start);
  }
  body[data-game] .replay-timeline:focus-visible { outline-color: var(--game-stage-accent); }
  body[data-game] .replay-speed {
    background: color-mix(in srgb, var(--game-stage-end) 78%, #000);
  }
  body[data-game] :is(.chip.on, .today-tag, .start-btn) {
    color: var(--game-accent-ink);
  }
  :root[data-theme="dark"] body[data-game] .btn:not(.secondary):not(.btn-danger),
  :root[data-theme="dark"] body[data-game] :is(.start-btn, .chip.on, .today-tag) {
    color: var(--game-accent-ink);
  }
  body[data-game] :is(.daily-action .btn, .rush-submit) {
    color: var(--game-hero-button-ink);
  }
  body[data-game] .rush-submit { color: var(--game-hero-ink); }

  @media (max-width: 620px) {
    body[data-game]::before {
      opacity: .24; background-size: 26px 26px;
      mask-image: linear-gradient(to bottom, #000, transparent 40rem);
    }
  }
  /* ===== Refined classic-game boards ===== */
  body:is(
    [data-game="zip"],
    [data-game="patches"],
    [data-game="mini-sudoku"],
    [data-game="akari"],
    [data-game="minesweeper"]
  ) #view-game .board-holder {
    padding: 7px;
    border-color: color-mix(in srgb, var(--line-strong) 72%, var(--line));
    border-radius: 17px;
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--surface) 92%, #fff),
        color-mix(in srgb, var(--surface-soft) 46%, var(--surface)));
    box-shadow:
      0 18px 42px color-mix(in srgb, var(--ink) 10%, transparent),
      inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent);
  }
  body:is([data-game="zip"], [data-game="patches"]) #view-game .board-holder {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body:is([data-game="zip"], [data-game="patches"]) #view-game .game-wrap {
    width: min(100%, 680px, max(300px, calc(100dvh - 190px)));
    max-width: 680px;
  }
  body:is(
    [data-game="zip"],
    [data-game="patches"],
    [data-game="mini-sudoku"],
    [data-game="akari"],
    [data-game="minesweeper"]
  ) #view-game .board {
    transform: translateZ(0);
    transition: border-color 180ms ease, box-shadow 180ms ease;
  }

  .board.zip-board,
  .watch-board.zip-board {
    --zip-path-start: #444A4E;
    --zip-path-end: #101315;
    --zip-path-shadow: rgba(11, 14, 16, .24);
    border: 2px solid #9AA4AA;
    border-radius: 13px;
    background: #FBFCFD;
    box-shadow: none;
  }
  .zip-cell {
    border: .55px solid #CDD3D7;
    background: transparent;
  }
  /* A focused cell must not trap its checkpoint below the sibling path SVG. */
  .zip-board .zip-cell[tabindex="0"]:focus-visible {
    z-index: auto;
  }
  .zip-path-segment,
  .zip-path-live {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: .54;
    transition: stroke-width 280ms ease-out, stroke 280ms ease-out;
  }
  .zip-path-line {
    filter: drop-shadow(0 .035px .055px var(--zip-path-shadow));
  }
  .zip-cell.zip-visited {
    background: rgba(16, 19, 21, .055);
    box-shadow:
      inset 0 0 0 1px rgba(16, 19, 21, .025),
      inset 0 0 13px rgba(16, 19, 21, .065);
    transition: background-color 110ms ease-out, box-shadow 110ms ease-out;
  }
  .zip-wall-line {
    stroke: #151719;
    stroke-width: .15;
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
  .zip-checkpoint {
    width: clamp(25px, 56%, 48px);
    border: 0;
    background: #111315;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    font-family: var(--font-display);
    font-size: clamp(14px, 3.45vw, 26px);
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    transform: translate(-50%, -50%);
    transition: color 120ms ease-out, background-color 120ms ease-out;
  }
  .zip-checkpoint-cell { cursor: pointer; }
  .zip-checkpoint-next .zip-checkpoint,
  .zip-checkpoint-passed .zip-checkpoint {
    width: clamp(25px, 56%, 48px);
    transform: translate(-50%, -50%);
  }
  .zip-checkpoint-rejected .zip-checkpoint {
    animation: zip-checkpoint-reject 440ms ease-out both;
  }
  :is(.board, .watch-board).zip-complete {
    --zip-finish-color: #D89A28;
    border-color: var(--zip-finish-color) !important;
    box-shadow:
      0 0 0 3px color-mix(in srgb, var(--zip-finish-color) 20%, transparent),
      inset 0 0 18px color-mix(in srgb, var(--zip-finish-color) 10%, transparent) !important;
  }
  .zip-complete .zip-path-segment {
    stroke-width: .68;
    stroke: var(--zip-finish-color);
  }
  .zip-complete .zip-checkpoint {
    box-shadow: 0 0 0 2px var(--zip-finish-color);
  }
  .zip-complete .zip-path-line {
    animation: zip-path-finish-settle 700ms cubic-bezier(.2,.74,.2,1) both;
  }
  body[data-game="zip"] .nudge[data-source="zip-complete"] {
    border-color: #D89A28;
    font-weight: 750;
  }
  @keyframes zip-path-finish-settle {
    0% { filter: drop-shadow(0 0 0 transparent); opacity: .84; }
    42% { filter: drop-shadow(0 0 .11px color-mix(in srgb, var(--zip-finish-color) 65%, transparent)); opacity: 1; }
    100% { filter: drop-shadow(0 .035px .055px var(--zip-path-shadow)); opacity: 1; }
  }
  @keyframes zip-checkpoint-reject {
    0%, 100% { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 13%, transparent); }
    45% { box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--danger) 84%, transparent); }
  }

  .board.patches-board,
  .watch-board.patches-board {
    --patch-board-color: #FEFEFE;
    --patch-grid-color: #8E999F;
    --patch-label-color: #FFFFFF;
    border: 2px solid #D5DADD;
    border-radius: 12px;
    background: var(--patch-board-color);
    box-shadow: none;
  }
  .patches-cell {
    border: 0;
    background-color: transparent;
  }
  .patches-cell.patch-filled { background-color: transparent; }
  .patches-cell:active { background-color: rgba(35,43,48,.025); }
  .patch-region,
  .patch-region-preview {
    --patch-rest-fill: color-mix(in srgb, var(--patch-color) 42%, transparent);
  }
  .patch-region rect,
  .patch-region-preview rect {
    fill: var(--patch-rest-fill);
    stroke: var(--patch-color);
    stroke-width: .026;
    transition:
      fill 180ms ease-out,
      stroke 180ms ease-out,
      stroke-width 180ms ease-out;
  }
  .patch-area-badge {
    color: var(--ink);
    pointer-events: none;
  }
  .patch-area-badge .patch-handle-ring {
    fill: var(--patch-board-color);
    stroke: var(--patch-color);
    stroke-width: 1.5;
  }
  .patch-area-badge text {
    fill: currentColor;
    font-family: Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }
  .patch-area-badge text[data-digits="2"] { font-size: 16px; }
  .patch-area-badge text[data-digits="3"] { font-size: 13px; }
  .patch-region-preview rect {
    fill: color-mix(in srgb, var(--patch-color) 36%, transparent);
    stroke-width: .026;
    filter: none;
    transition: none;
  }
  .patch-error-marker { display: none; pointer-events: none; }
  .patch-error-marker circle { fill: var(--ink); stroke: var(--patch-board-color); stroke-width: 2; }
  .patch-error-marker path { fill: none; stroke: var(--patch-board-color); stroke-width: 2.5; stroke-linecap: round; }
  body[data-game="patches"] :is(.patch-region.is-autocheck-error, .patch-region-preview.is-blocked) > rect {
    stroke: var(--ink);
    stroke-width: .06;
    stroke-dasharray: .13 .07;
  }
  :is(.patch-region.is-autocheck-error, .patch-region-preview.is-blocked) .patch-error-marker { display: block; }
  [data-patch-preview][hidden] { display: none; }
  .patch-clue {
    border: 0;
    outline: 0;
    box-shadow: none;
    width: 100%; height: 100%;
    background: none;
  }
  .patches-complete .patches-cell,
  .patches-complete .patch-clue,
  .patches-complete .patch-size-clue,
  .patches-complete .patch-area-badge {
    animation: patches-detail-out 180ms ease-out forwards;
  }
  .patches-complete .patch-region.is-complete {
    transform-box: fill-box;
    transform-origin: center;
    animation: patches-finish-shape 820ms cubic-bezier(.2,.78,.2,1) both;
  }
  .patches-complete .patch-region.is-complete rect {
    animation: patches-finish-color 760ms ease-out both;
  }
  body[data-game="patches"] .cell.hint-target::after,
  body:is([data-game="mini-sudoku"], [data-game="akari"], [data-game="minesweeper"])
    .cell.hint-target::after {
    inset: 7%;
    border-radius: 7px;
    border-width: 2px;
    background: color-mix(in srgb, var(--accent) 9%, transparent);
  }
  @keyframes patches-detail-out {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes patches-finish-shape {
    0% { transform: scale(1); }
    38% { transform: scale(1.025); }
    70% { transform: scale(.992); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes patches-finish-color {
    0% { fill: var(--patch-rest-fill); }
    100% { fill: var(--patch-color); }
  }

  .board.mini-sudoku-board,
  .watch-board.mini-sudoku-board {
    border: 2px solid #68746F;
    border-radius: 10px;
    background: #FFFFFF;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.9),
      0 5px 16px rgba(20,52,40,.08);
  }
  .mini-sudoku-cell {
    border: .6px solid #C7CFCC;
    color: #4B6259;
    background: #FFFFFF;
    transition: background-color 130ms ease, box-shadow 130ms ease;
  }
  .mini-sudoku-cell.mini-region-right {
    border-right-width: 2px;
    border-right-color: #75817C;
  }
  .mini-sudoku-cell.mini-region-bottom {
    border-bottom-width: 2px;
    border-bottom-color: #75817C;
  }
  .mini-sudoku-cell.mini-peer { background: #EDF7F2; }
  .mini-sudoku-cell.mini-same-value { background: #D6EDE2; }
  .mini-sudoku-cell.mini-selected,
  #view-game .board[data-pointer-focus]
    .mini-sudoku-cell.mini-selected[tabindex="0"]:focus-visible {
    z-index: 4;
    outline: 3px solid #287F60;
    outline-offset: -3px;
    box-shadow:
      inset 0 0 0 3px #32936F,
      inset 0 0 16px rgba(50,147,111,.1);
  }
  .mini-value {
    color: #526A60;
    font-family: var(--font-display);
    font-size: clamp(21px, 6.8vw, 43px);
    font-weight: 720;
    font-variant-numeric: tabular-nums;
  }
  .mini-sudoku-given .mini-value { color: #171D1A; }
  .mini-sudoku-board[data-sudoku-size="9"] .mini-value {
    font-size: clamp(17px, 4.8vw, 32px);
  }
  .mini-sudoku-board[data-sudoku-size="9"] .mini-notes {
    inset: 3%;
  }
  .mini-sudoku-board[data-sudoku-size="9"] .mini-notes i {
    font-size: clamp(6px, 1.3vw, 10px);
  }
  .mini-value.mark-pop,
  .mini-notes.mark-pop { animation: mini-value-arrive 150ms cubic-bezier(.2,.78,.24,1); }
  .mini-sudoku-keypad {
    gap: 8px;
    margin: 12px 0 4px;
  }
  .mini-sudoku-keypad button {
    min-height: 52px;
    border: 1px solid #C4DDD2;
    border-radius: 12px;
    color: #28664F;
    background: linear-gradient(145deg, #EFF8F4, #DDEFE7);
    box-shadow:
      0 2px 5px rgba(30,83,63,.08),
      inset 0 1px 0 rgba(255,255,255,.72);
    font-size: 21px;
    font-weight: 760;
    transition: transform 90ms ease, background-color 120ms ease, opacity 120ms ease;
  }
  .mini-sudoku-keypad button:active:not(:disabled) { transform: scale(.965); }
  .mini-sudoku-tools .mini-erase-button,
  .mini-sudoku-tools .mini-undo-button {
    display: grid;
    grid-template-columns: 19px auto;
    place-items: center;
    gap: 6px;
    color: #5D6D66;
    background: transparent;
  }
  .mini-sudoku-tools :is(.mini-erase-button, .mini-undo-button) svg,
  .mini-sudoku-tools svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mini-sudoku-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 0;
  }
  .mini-sudoku-tools button {
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px 12px;
    border: 0;
    border-radius: 10px;
    color: #53665E;
    background: transparent;
    box-shadow: none;
    font-size: 12px;
    font-weight: 760;
  }
  .mini-sudoku-tools button:hover:not(:disabled) { background: rgba(48,132,100,.07); }
  .mini-sudoku-tools button:disabled {
    opacity: .36;
    cursor: default;
  }
  .mini-sudoku-tools [data-mini-notes].active {
    color: #236A50;
    border: 0;
    background: #E1F1E9;
  }
  .mini-sudoku-tools small {
    color: #8B9792;
    font-size: 9px;
    font-weight: 760;
    text-transform: uppercase;
  }
  .mini-sudoku-tools [data-mini-notes].active small { color: currentColor; }
  .mini-sudoku-keypad button:disabled {
    opacity: .36;
    color: #7F8B86;
    border-color: #D8DFDC;
    background: #EEF1F0;
  }
  .mini-sudoku-complete {
    border-color: #3A956F !important;
    box-shadow: inset 0 0 0 3px rgba(58,149,111,.12) !important;
  }
  @keyframes mini-value-arrive {
    from { opacity: .35; transform: scale(.72); }
    to { opacity: 1; transform: scale(1); }
  }

  :root[data-theme="dark"] body[data-game="zip"] :is(.board.zip-board, .watch-board.zip-board) {
    --zip-path-start: #D7DCDF;
    --zip-path-end: #A7B0B5;
    --zip-path-shadow: rgba(255,255,255,.16);
    border-color: #68747B;
    background: #101315;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.08),
      inset 0 8px 22px rgba(0,0,0,.24);
  }
  :root[data-theme="dark"] body[data-game="zip"] .zip-cell {
    border-color: #343B40;
  }
  :root[data-theme="dark"] body[data-game="zip"] .zip-cell:active {
    background: rgba(255,255,255,.07);
  }
  :root[data-theme="dark"] body[data-game="zip"] .zip-wall-line { stroke: #F4F6F7; }
  :root[data-theme="dark"] body[data-game="zip"] .zip-cell.zip-visited {
    background: rgba(244, 246, 247, .075);
    box-shadow:
      inset 0 0 0 1px rgba(244, 246, 247, .035),
      inset 0 0 13px rgba(244, 246, 247, .075);
  }
  :root[data-theme="dark"] body[data-game="zip"] .zip-checkpoint {
    color: #111416;
    background: #F4F6F7;
    box-shadow: inset 0 0 0 1px rgba(17,20,22,.14);
  }

  :root[data-theme="dark"] body[data-game="patches"] :is(
    .board.patches-board,
    .watch-board.patches-board
  ) {
    --patch-board-color: #171A1D;
    --patch-grid-color: #657078;
    --patch-label-color: #FFFFFF;
    border-color: #69747B;
    background: var(--patch-board-color);
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07),
      inset 0 8px 22px rgba(0,0,0,.22);
  }
  :root[data-theme="dark"] body[data-game="patches"] .patches-cell:active {
    background-color: rgba(255,255,255,.055);
  }
  :root[data-theme="dark"] body[data-game="patches"] :is(
    .patch-region,
    .patch-region-preview
  ) {
    --patch-rest-fill: color-mix(in srgb, var(--patch-color) 44%, transparent);
  }
  :root[data-theme="dark"] body[data-game="patches"] :is(
    .patch-region rect,
    .patch-region-preview rect
  ) {
    fill: var(--patch-rest-fill);
    stroke: color-mix(in srgb, var(--patch-color) 86%, #F4EDE9);
  }
  :root[data-theme="dark"] body[data-game="patches"] .patch-area-badge .patch-handle-ring {
    fill: var(--patch-board-color);
  }

  :root[data-theme="dark"] body[data-game="mini-sudoku"] :is(
    .board.mini-sudoku-board,
    .watch-board.mini-sudoku-board
  ) {
    border-color: #7B9187;
    background: #121A17;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07),
      0 6px 18px rgba(0,0,0,.24);
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-cell {
    border-color: #3D4C45;
    color: #C9DDD3;
    background: #17211D;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-cell.mini-region-right {
    border-right-color: #7B9187;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-cell.mini-region-bottom {
    border-bottom-color: #7B9187;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-cell.mini-peer {
    background: #20372F;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-cell.mini-same-value {
    background: #28513F;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-cell.mini-selected,
  :root[data-theme="dark"] body[data-game="mini-sudoku"] #view-game
    .board[data-pointer-focus]
    .mini-sudoku-cell.mini-selected[tabindex="0"]:focus-visible {
    outline-color: #83D9B4;
    box-shadow:
      inset 0 0 0 3px #69C59E,
      inset 0 0 16px rgba(105,197,158,.13);
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-value {
    color: #B8D8C9;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-given .mini-value {
    color: #F4F8F6;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-notes i {
    color: #9EB8AC;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-keypad button {
    border-color: #3E6655;
    color: #BCE6D2;
    background: linear-gradient(145deg, #203B31, #192D26);
    box-shadow:
      0 2px 6px rgba(0,0,0,.2),
      inset 0 1px 0 rgba(255,255,255,.06);
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-keypad button:disabled {
    border-color: #35423D;
    color: #6F8179;
    background: #202824;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-tools button {
    color: #AABCB4;
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-tools button:hover:not(:disabled) {
    background: rgba(105,197,158,.1);
  }
  :root[data-theme="dark"] body[data-game="mini-sudoku"] .mini-sudoku-tools [data-mini-notes].active {
    color: #C9F3DF;
    background: #244737;
  }

  :root[data-theme="dark"] body[data-game="patches"] :is(.patch-region.is-autocheck-error, .patch-region-preview.is-blocked) > rect {
    stroke: var(--ink);
    stroke-width: .06;
    stroke-dasharray: .13 .07;
  }

  .board.akari-board,
  .watch-board.akari-board {
    --akari-beam-edge: rgba(255, 225, 118, .08);
    --akari-beam-center: rgba(255, 248, 205, .68);
    --akari-beam-glow: rgba(245, 185, 45, .24);
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border: 2px solid #C9D5DC;
    border-radius: 14px;
    background: #FFFFFF;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.92),
      0 10px 28px rgba(38,61,74,.14);
    transition: border-color 240ms ease, box-shadow 240ms ease;
    contain: layout paint;
  }
  body[data-game="akari"] #view-game .game-wrap {
    width: min(
      100%,
      var(--akari-board-max, 704px),
      max(300px, calc(100dvh - 182px))
    );
    max-width: var(--akari-board-max, 704px);
  }
  body[data-game="akari"] :is(.akari-board, .akari-cell) { touch-action: none; }
  .akari-cell {
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    border: .75px solid #D7E0E5;
    color: #53636D;
    font-size: var(--board-cell-font-size, 28px);
    --akari-lit-fill: #FFE58D;
    --akari-lit-complete-fill: #B9EBC8;
    --akari-retract-fill: linear-gradient(135deg, #FFF2B8 0%, #FFE176 48%, #FFF8D8 100%);
    --akari-conflict-fill: rgba(213, 153, 61, .62);
    transition:
      background-color 240ms cubic-bezier(.2,.7,.2,1),
      box-shadow 180ms ease,
      filter 150ms ease;
  }
  .akari-beam-layer {
    position: absolute;
    z-index: 2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .akari-beam {
    position: absolute;
    display: block;
    opacity: 0;
    border-radius: 999px;
    background: linear-gradient(
      90deg,
      var(--akari-beam-edge),
      var(--akari-beam-center) 48%,
      var(--akari-beam-edge)
    );
    box-shadow: 0 0 10px var(--akari-beam-glow);
    will-change: transform, opacity;
  }
  .akari-beam.vertical {
    background: linear-gradient(
      180deg,
      var(--akari-beam-edge),
      var(--akari-beam-center) 48%,
      var(--akari-beam-edge)
    );
  }
  .akari-beam-layer.is-revealing .akari-beam.horizontal {
    animation: akari-beam-horizontal-in 390ms cubic-bezier(.18,.76,.2,1) both;
  }
  .akari-beam-layer.is-revealing .akari-beam.vertical {
    animation: akari-beam-vertical-in 390ms cubic-bezier(.18,.76,.2,1) both;
  }
  .akari-beam-layer.is-retracting .akari-beam.horizontal {
    animation: akari-beam-horizontal-out 280ms cubic-bezier(.38,0,.56,1) both;
  }
  .akari-beam-layer.is-retracting .akari-beam.vertical {
    animation: akari-beam-vertical-out 280ms cubic-bezier(.38,0,.56,1) both;
  }
  .akari-cell.akari-open.akari-even { background-color: #FFFFFF; }
  .akari-cell.akari-open.akari-odd { background-color: #F7F9FA; }
  .akari-cell.akari-open::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1px;
    opacity: 0;
    pointer-events: none;
    transition:
      opacity 260ms cubic-bezier(.2,.72,.2,1),
      background-color 320ms ease-out;
  }
  .akari-cell.akari-open::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -1px;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(105deg,
      rgba(255,194,235,0) 0%, rgba(255,194,235,.88) 26%,
      rgba(255,255,255,.98) 50%, rgba(255,209,240,.82) 72%,
      rgba(255,194,235,0) 100%);
    transform: scale(.94);
    will-change: opacity, transform;
  }
  .akari-cell.akari-open.akari-light-wave::before {
    opacity: 0;
    animation: akari-light-settle 410ms steps(1, end)
      var(--akari-wave-delay, 0ms) both;
  }
  .akari-cell.akari-open.akari-light-wave::after {
    animation: akari-cell-light-wave 410ms cubic-bezier(.16,.72,.18,1)
      var(--akari-wave-delay, 0ms) both;
  }
  .akari-cell.akari-light-retract::after,
  .akari-cell.akari-conflict-wave::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: -1px;
    pointer-events: none;
    will-change: opacity, transform;
  }
  .akari-cell.akari-light-retract::after {
    background: var(--akari-retract-fill);
    animation: akari-light-retract 350ms cubic-bezier(.3,.02,.5,1)
      var(--akari-wave-delay, 0ms) both;
  }
  .akari-cell.akari-conflict-wave::after {
    border: max(1px, .055em) solid rgba(171, 91, 35, .34);
    background: var(--akari-conflict-fill);
    animation: akari-conflict-flash 470ms cubic-bezier(.2,.72,.22,1)
      var(--akari-wave-delay, 0ms) both;
  }
  .akari-cell.akari-open.akari-lit::before {
    opacity: 1;
    background: var(--akari-lit-fill);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  }
  .akari-cell.akari-wall {
    z-index: 3;
    overflow: hidden;
    border-color: #0B1115;
    color: #F7FAFC;
    background: linear-gradient(145deg, #27323A 0%, #10171C 72%);
    font-size: var(--board-cell-font-size, 28px);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.1),
      inset -1px -1px 0 rgba(0,0,0,.58);
  }
  .akari-bulb {
    position: relative;
    z-index: 6;
    display: grid;
    width: 72%;
    aspect-ratio: 1;
    place-items: center;
    color: #F2A20B;
    pointer-events: none;
  }
  .akari-sun {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    filter: drop-shadow(0 2px 2px rgba(177,100,0,.2));
  }
  .akari-orb { display: none; }
  .akari-bulb::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: max(1px, .07em) solid rgba(242,162,11,.58);
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
  }
  .akari-bulb.mark-pop {
    animation: akari-sun-arrive 300ms cubic-bezier(.18,.82,.24,1.12);
  }
  .akari-bulb.mark-pop::after {
    animation: akari-placement-ring 470ms cubic-bezier(.18,.7,.2,1) both;
  }
  .akari-wall-number {
    position: relative;
    z-index: 4;
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    pointer-events: none;
  }
  @keyframes akari-beam-horizontal-in {
    0% { opacity: .15; transform: scaleX(.04); }
    62% { opacity: .92; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1); }
  }
  @keyframes akari-beam-vertical-in {
    0% { opacity: .15; transform: scaleY(.04); }
    62% { opacity: .92; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(1); }
  }
  @keyframes akari-beam-horizontal-out {
    0% { opacity: .62; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(.03); }
  }
  @keyframes akari-beam-vertical-out {
    0% { opacity: .62; transform: scaleY(1); }
    100% { opacity: 0; transform: scaleY(.03); }
  }
  .akari-wall-digit { display: none !important; }
  .akari-clue-tally {
    grid-area: 1 / 1;
    display: flex;
    width: 44%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: max(2px, .11em);
    opacity: 1;
    transform: scale(1);
    transition:
      opacity 150ms ease,
      transform 260ms cubic-bezier(.2,.74,.2,1);
  }
  .akari-wall-number[data-remaining="2"] .akari-clue-tally {
    gap: max(5px, .32em);
  }
  .akari-wall-number[data-remaining="3"] .akari-clue-tally {
    gap: max(3px, .18em);
  }
  .akari-clue-bar {
    display: block;
    width: 100%;
    height: max(1px, .085em);
    min-height: 1px;
    border-radius: 999px;
    background: currentColor;
    box-shadow: 0 1px 0 rgba(255,255,255,.12);
  }
  .akari-wall-number[data-remaining="2"] .akari-clue-bar:first-child {
    width: 76%;
  }
  .akari-wall-number[data-remaining="3"] .akari-clue-bar:first-child {
    width: 86%;
  }
  .akari-wall-number[data-remaining="3"] .akari-clue-bar:nth-child(2) {
    width: 68%;
  }
  .akari-clue-four {
    display: block;
    color: inherit;
    font-family: var(--font-display);
    font-size: .72em;
    font-weight: 800;
    line-height: 1;
  }
  .akari-clue-zero {
    display: block;
    width: 62%;
    aspect-ratio: 1;
    margin: auto;
    border: max(1px, .085em) solid currentColor;
    border-radius: 50%;
  }
  .akari-clue-face {
    grid-area: 1 / 1;
    width: 68%;
    height: 68%;
    overflow: visible;
    opacity: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
    transform: scale(.62) translateY(4%);
  }
  .akari-wall-number.is-satisfied .akari-clue-tally {
    opacity: 0;
    transform: scale(.58) rotate(-6deg);
  }
  .akari-wall-number.is-satisfied .akari-clue-face {
    opacity: 1;
    transform: scale(1) translateY(0);
    animation: akari-clue-satisfied 480ms cubic-bezier(.18,.82,.2,1.08) both;
  }
  .akari-mark,
  .mine-safe-mark {
    position: relative;
    z-index: 5;
    width: 36%;
    aspect-ratio: 1;
  }
  .akari-mark::before,
  .akari-mark::after,
  .mine-safe-mark::before,
  .mine-safe-mark::after {
    content: "";
    position: absolute;
    left: calc(50% - 1px);
    top: 4%;
    width: max(1.5px, .065em);
    height: 92%;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
  }
  .akari-mark::after,
  .mine-safe-mark::after { transform: rotate(-45deg); }
  .akari-mark.mark-pop {
    animation: akari-mark-arrive 190ms cubic-bezier(.2,.72,.22,1);
  }
  .akari-mark { color: #7E8D95; }
  .akari-cell:active:not(.akari-wall) { filter: brightness(.97); }
  .akari-cell.clash {
    box-shadow: inset 0 0 0 max(2px, .1em) #D94747;
  }
  .akari-board.akari-complete,
  .watch-board.akari-complete {
    border-color: #62AA7A;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.9),
      0 10px 28px rgba(41,125,74,.16);
  }
  .akari-board.akari-complete .akari-open.akari-even,
  .watch-board.akari-complete .akari-open.akari-even { background-color: #E2F8E8; }
  .akari-board.akari-complete .akari-open.akari-odd,
  .watch-board.akari-complete .akari-open.akari-odd { background-color: #D8F3E0; }
  .akari-board.akari-complete .akari-open.akari-lit::before,
  .watch-board.akari-complete .akari-open.akari-lit::before {
    opacity: 1;
    background: var(--akari-lit-complete-fill);
  }
  :root[data-theme="dark"] body[data-game="akari"] :is(.board.akari-board, .watch-board.akari-board) {
    --akari-beam-edge: rgba(96, 208, 244, .06);
    --akari-beam-center: rgba(204, 247, 255, .52);
    --akari-beam-glow: rgba(47, 191, 230, .24);
    border-color: #6E7E8B;
    background: #0B1116;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07),
      0 10px 30px rgba(0,0,0,.28);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-cell {
    border-color: #101A22;
    color: #E9F0F4;
    --akari-lit-fill: #20A8D5;
    --akari-lit-complete-fill: #28B768;
    --akari-retract-fill: linear-gradient(135deg, #1685B5 0%, #28B9DD 50%, #147AA7 100%);
    --akari-conflict-fill: rgba(205, 203, 96, .56);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-cell.akari-open.akari-even {
    background-color: #344D61;
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-cell.akari-open.akari-odd {
    background-color: #3F596E;
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-cell.akari-open.akari-lit::before {
    opacity: 1;
    background: var(--akari-lit-fill);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-cell.akari-open::after {
    background: linear-gradient(105deg,
      rgba(255,181,240,0) 0%, rgba(255,181,240,.92) 26%,
      rgba(255,255,255,.99) 50%, rgba(238,183,255,.86) 72%,
      rgba(255,181,240,0) 100%);
  }
  :root[data-theme="dark"] body[data-game="akari"]
    .akari-cell.akari-open.akari-light-retract::after {
    background: var(--akari-retract-fill);
  }
  :root[data-theme="dark"] body[data-game="akari"]
    .akari-cell.akari-open.akari-conflict-wave::after {
    background: var(--akari-conflict-fill);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-cell.akari-wall {
    overflow: hidden;
    border-color: #030608;
    color: #EEF4F7;
    background: linear-gradient(145deg, #12191F 0%, #020405 72%);
    box-shadow:
      inset 1px 1px 0 rgba(255,255,255,.08),
      inset -1px -1px 0 rgba(0,0,0,.68);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-bulb {
    width: 45%;
    color: #FFFFFF;
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-sun { display: none; }
  :root[data-theme="dark"] body[data-game="akari"] .akari-orb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.52),
      0 0 7px rgba(226,247,255,.38);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-bulb::after {
    border-color: rgba(150,231,255,.6);
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-bulb.mark-pop {
    animation-name: akari-orb-arrive;
  }
  :root[data-theme="dark"] body[data-game="akari"] .akari-mark {
    color: rgba(235,244,248,.72);
  }
  :root[data-theme="dark"] body[data-game="akari"] :is(.akari-board, .watch-board).akari-complete {
    border-color: #5DA879;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.07),
      0 10px 30px rgba(17,118,59,.2);
  }
  :root[data-theme="dark"] body[data-game="akari"] :is(.akari-board, .watch-board).akari-complete .akari-open.akari-even {
    background-color: #157E48;
  }
  :root[data-theme="dark"] body[data-game="akari"] :is(.akari-board, .watch-board).akari-complete .akari-open.akari-odd {
    background-color: #1B9152;
  }
  :root[data-theme="dark"] body[data-game="akari"] :is(.akari-board, .watch-board).akari-complete .akari-open.akari-lit::before {
    opacity: 1;
    background: var(--akari-lit-complete-fill);
  }
  @keyframes akari-cell-light-wave {
    0% { opacity: 0; transform: scale(.94); }
    14% { opacity: 1; transform: scale(1); }
    72% { opacity: .98; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.04); }
  }
  @keyframes akari-light-settle {
    0%, 82% { opacity: 0; }
    83%, 100% { opacity: 1; }
  }
  @keyframes akari-light-retract {
    0%, 18% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(.96); }
  }
  @keyframes akari-conflict-flash {
    0% { opacity: 0; transform: scale(.96); }
    24%, 64% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.02); }
  }
  @keyframes akari-clue-satisfied {
    0% { opacity: 0; transform: scale(.55) translateY(8%); }
    64% { opacity: 1; transform: scale(1.1) translateY(-2%); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
  }
  @keyframes akari-sun-arrive {
    0% { opacity: 0; transform: rotate(-14deg) scale(.56); }
    68% { opacity: 1; transform: rotate(2deg) scale(1.06); }
    100% { opacity: 1; transform: rotate(0) scale(1); }
  }
  @keyframes akari-orb-arrive {
    0% { opacity: 0; transform: scale(.58); }
    68% { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
  }
  @keyframes akari-placement-ring {
    0% { opacity: .72; transform: scale(.52); }
    100% { opacity: 0; transform: scale(1.65); }
  }
  @keyframes akari-mark-arrive {
    0% { opacity: 0; transform: scale(.72); }
    100% { opacity: 1; transform: scale(1); }
  }

  .board.minesweeper-board,
  .watch-board.minesweeper-board {
    overflow: clip;
    border: 2px solid #536873;
    border-radius: 14px;
    background: #B8C7CD;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.72),
      0 10px 28px rgba(29,48,56,.14);
  }
  .minesweeper-cell {
    position: relative;
    isolation: isolate;
    overflow: clip;
    border: 1px solid #A8B7BD;
    color: #263B45;
    background: #F1F5F6;
    font-size: var(--board-cell-font-size, 28px);
    font-weight: 850;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    transition: background-color 130ms ease, box-shadow 130ms ease, transform 90ms ease;
  }
  .minesweeper-cell.mine-hidden {
    z-index: 1;
    border-color: #8FA1A9;
    background:
      linear-gradient(145deg, rgba(255,255,255,.38), transparent 42%),
      linear-gradient(145deg, #DCE6E9, #B8C7CC);
    box-shadow:
      inset 2px 2px 0 rgba(255,255,255,.78),
      inset -2px -2px 0 rgba(45,67,77,.24);
  }
  .minesweeper-cell.mine-hidden:active {
    transform: scale(.975);
    background: #C3D0D4;
    box-shadow: inset 1px 1px 4px rgba(42,63,72,.24);
  }
  .minesweeper-cell.mine-hidden.mine-touch-pending {
    z-index: 2;
    transform: scale(.975);
    box-shadow:
      inset 1px 1px 4px rgba(42,63,72,.24),
      inset 0 0 0 2px color-mix(in srgb, var(--accent-strong) 48%, transparent);
  }
  .minesweeper-cell.mine-hidden.mine-touch-pending::after {
    content: "";
    position: absolute;
    inset: 17%;
    border: 2px solid color-mix(in srgb, var(--teal) 78%, transparent);
    border-radius: 50%;
    opacity: 0;
    transform: scale(.72);
    animation: mine-hold-cue 400ms linear forwards;
    pointer-events: none;
  }
  @media (hover: hover) {
    .minesweeper-cell.mine-hidden:hover {
      z-index: 2;
      background:
        linear-gradient(145deg, rgba(255,255,255,.5), transparent 44%),
        linear-gradient(145deg, #E7EEF0, #C2D0D4);
      box-shadow:
        inset 2px 2px 0 rgba(255,255,255,.82),
        inset -2px -2px 0 rgba(45,67,77,.19),
        0 0 0 2px rgba(44,105,128,.16);
    }
  }
  .minesweeper-cell.mine-revealed,
  .minesweeper-cell.mine-shown,
  .minesweeper-cell.mine-wrong-flag,
  .minesweeper-cell.mine-exploded {
    z-index: 0;
    border-color: #B8C5CA;
    background: #EEF3F4;
    box-shadow: inset 0 1px 2px rgba(46,68,77,.07);
    cursor: default;
  }
  .minesweeper-cell.mine-revealed.mine-opening {
    animation: mine-cell-reveal 180ms cubic-bezier(.2,.76,.24,1) both;
    animation-delay: var(--mine-reveal-delay, 0ms);
  }
  .minesweeper-cell.mine-clue-cell { background: #F5F8F9; }
  .mine-flag-wrap {
    position: relative;
    display: grid;
    width: 56%;
    aspect-ratio: 1;
    place-items: center;
  }
  .mine-flag {
    width: 100%;
    height: 100%;
    color: #C74630;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.72));
  }
  .mine-safe-mark { width: 32%; color: #667C85; }
  .mine-bomb {
    width: 64%;
    height: 64%;
    overflow: visible;
    color: #27383F;
  }
  .mine-bomb-body { fill: currentColor; }
  .mine-bomb-spark,
  .mine-bomb-feet,
  .mine-bomb-shine {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .mine-bomb-shine { stroke: rgba(255,255,255,.65); stroke-width: 2.4; }
  .mine-exploded {
    background: radial-gradient(circle at 50% 50%, #FFD8C6 0 31%, #F28A64 72%, #D9503E 100%) !important;
    box-shadow: inset 0 0 0 3px rgba(154,35,25,.32) !important;
  }
  .mine-exploded .mine-bomb { color: #8F251E; animation: mine-explode 430ms cubic-bezier(.2,.76,.22,1) both; }
  .mine-shown .mine-bomb { color: #35474E; animation: mine-mark-arrive 180ms ease-out both; }
  .mine-wrong-flag { background: #F5DAD5 !important; }
  .mine-wrong-x {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
  }
  .mine-wrong-x::before,
  .mine-wrong-x::after {
    content: "";
    position: absolute;
    left: 48%;
    top: 0;
    width: max(2px, .08em);
    height: 100%;
    border-radius: 999px;
    background: #A92F28;
    transform: rotate(45deg);
  }
  .mine-wrong-x::after { transform: rotate(-45deg); }
  .mine-revealed-count { font-variant-numeric: tabular-nums; }
  .mine-clue[data-value="1"] { color: #1E67B1; }
  .mine-clue[data-value="2"] { color: #247346; }
  .mine-clue[data-value="3"] { color: #BD3E35; }
  .mine-clue[data-value="4"] { color: #553E9C; }
  .mine-clue[data-value="5"] { color: #8C332C; }
  .mine-clue[data-value="6"] { color: #16727A; }
  .mine-clue[data-value="7"] { color: #30343A; }
  .mine-clue[data-value="8"] { color: #66727A; }
  .minesweeper-cell .mark-pop { animation: mine-mark-arrive 180ms cubic-bezier(.2,.78,.24,1); }
  .minesweeper-complete {
    border-color: #4E8B70 !important;
    box-shadow: inset 0 0 0 3px rgba(61,139,101,.14) !important;
  }
  .minesweeper-exploded { border-color: #AD4B3C !important; }
  .minesweeper-tools {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 8px;
    width: min(100%, 430px);
    margin: 12px auto 0;
  }
  .minesweeper-remaining,
  .minesweeper-mode-switch {
    min-height: 52px;
    border: 1px solid color-mix(in srgb, var(--line-strong) 72%, var(--line));
    border-radius: 14px;
    background: color-mix(in srgb, var(--surface) 88%, var(--surface-soft));
    box-shadow: 0 5px 15px color-mix(in srgb, var(--ink) 7%, transparent);
  }
  .minesweeper-remaining {
    display: flex;
    min-width: 70px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 10px;
    color: var(--muted);
  }
  .minesweeper-remaining svg,
  .minesweeper-mode-button svg {
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .minesweeper-remaining strong {
    color: var(--ink);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
  }
  .minesweeper-mode-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
  }
  .minesweeper-mode-button {
    min-width: 0;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 12px;
    border: 0;
    border-radius: 10px;
    color: var(--muted);
    background: transparent;
    font-size: 13px;
    font-weight: 850;
  }
  .minesweeper-mode-button[aria-pressed="true"] {
    color: var(--surface);
    background: var(--accent-strong);
    box-shadow: 0 3px 9px color-mix(in srgb, var(--accent-strong) 24%, transparent);
  }
  .minesweeper-mode-button[data-mine-mode="flag"][aria-pressed="true"] {
    color: #fff;
    background: var(--teal);
  }
  .minesweeper-mode-button:disabled {
    cursor: default;
    opacity: .56;
  }
  .mine-loss-icon {
    display: grid;
    width: 92px;
    height: 92px;
    margin-inline: auto;
    place-items: center;
    border-radius: 28px;
    color: #8F251E;
    background: #FCE2D6;
  }
  .mine-loss-icon .mine-bomb { width: 66px; height: 66px; }
  :root[data-theme="dark"] .board.minesweeper-board,
  :root[data-theme="dark"] .watch-board.minesweeper-board {
    border-color: #4E6570;
    background: #17262D;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.055), 0 12px 30px rgba(0,0,0,.3);
  }
  :root[data-theme="dark"] .minesweeper-cell.mine-hidden {
    border-color: #263B44;
    background:
      linear-gradient(145deg, rgba(255,255,255,.055), transparent 45%),
      linear-gradient(145deg, #334A54, #21343C);
    box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), inset -2px -2px 0 rgba(0,0,0,.3);
  }
  :root[data-theme="dark"] .minesweeper-cell.mine-revealed,
  :root[data-theme="dark"] .minesweeper-cell.mine-shown,
  :root[data-theme="dark"] .minesweeper-cell.mine-wrong-flag,
  :root[data-theme="dark"] .minesweeper-cell.mine-exploded,
  :root[data-theme="dark"] .minesweeper-cell.mine-clue-cell {
    border-color: #30464F;
    background: #182A32;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.25);
  }
  :root[data-theme="dark"] .mine-flag { color: #FF7660; filter: none; }
  :root[data-theme="dark"] .mine-shown .mine-bomb { color: #B8C8CE; }
  :root[data-theme="dark"] .mine-wrong-flag { background: #482824 !important; }
  :root[data-theme="dark"] .mine-loss-icon { background: #4B2924; color: #FF8A71; }
  @keyframes mine-mark-arrive {
    from { opacity: .3; transform: scale(.68); }
    to { opacity: 1; transform: scale(1); }
  }
  @keyframes mine-cell-reveal {
    from { opacity: .45; filter: brightness(1.1); transform: scale(.92); }
    to { opacity: 1; filter: brightness(1); transform: scale(1); }
  }
  @keyframes mine-hold-cue {
    0%, 34% { opacity: 0; transform: scale(.72); }
    55% { opacity: .42; }
    100% { opacity: .9; transform: scale(1); }
  }
  @keyframes mine-explode {
    0% { opacity: .1; transform: scale(.42) rotate(-14deg); }
    62% { opacity: 1; transform: scale(1.16) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
  }

  @media (max-width: 620px) {
    body:is(
      [data-game="zip"],
      [data-game="patches"],
      [data-game="mini-sudoku"],
      [data-game="akari"],
      [data-game="minesweeper"]
    ) #view-game .board-holder {
      padding: 5px;
      border-radius: 14px;
    }
    .mini-sudoku-keypad { gap: 6px; }
    .mini-sudoku-keypad button { min-height: 48px; }
    .mini-sudoku-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .minesweeper-tools { width: 100%; margin-top: 9px; }
    .minesweeper-remaining { min-width: 64px; padding-inline: 8px; }
    .minesweeper-mode-button { padding-inline: 8px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .zip-complete .zip-path-line,
    .patches-complete .patches-cell,
    .patches-complete .patch-clue,
    .patches-complete .patch-size-clue,
    .patches-complete .patch-area-badge,
    .patches-complete .patch-region.is-complete,
    .patches-complete .patch-region.is-complete rect,
    .zip-checkpoint-rejected .zip-checkpoint,
    .mini-value.mark-pop,
    .mini-notes.mark-pop,
    .akari-bulb.mark-pop,
    .akari-bulb.mark-pop::after,
    .akari-mark.mark-pop,
    .akari-cell.akari-open.akari-light-wave::before,
    .akari-cell.akari-open.akari-light-wave::after,
    .akari-cell.akari-light-retract::after,
    .akari-cell.akari-conflict-wave::after,
    .akari-beam,
    .akari-wall-number.is-satisfied .akari-clue-face,
    .minesweeper-cell.mine-opening,
    .minesweeper-cell.mine-touch-pending::after,
    .minesweeper-cell .mark-pop,
    .minesweeper-cell .mine-bomb {
      animation: none !important;
    }
    .zip-cell,
    .zip-checkpoint,
    .zip-path-segment,
    .zip-path-live,
    .patch-region rect,
    .patch-area-badge,
    .patch-area-badge .patch-handle-ring,
    .mini-sudoku-cell,
    .mini-sudoku-keypad button,
    .akari-cell,
    .akari-cell.akari-open::before,
    .akari-clue-tally,
    .minesweeper-cell {
      transition: none !important;
    }
    .patches-complete :is(.patches-cell, .patch-clue, .patch-size-clue, .patch-area-badge) {
      opacity: 0 !important;
    }
    .patches-complete .patch-region.is-complete {
      transform: none !important;
    }
    .patches-complete .patch-region.is-complete rect {
      fill: var(--patch-color) !important;
    }
  }


/* LinkedIn-fidelity presentation for Queens (measured from real-app recordings):
   flat page background, no decorative pattern, no card chrome around the board,
   board spans ~91.5% of a phone screen. */
body[data-game="queens"]::before { display: none; }
body[data-game="queens"] #view-game { background: var(--bg); }
body[data-game="queens"] .board-holder {
  padding: 0; border: none; background: transparent; box-shadow: none;
}
@media (max-width: 640px) {
  body[data-game="queens"] #view-game { padding-inline: 4.25vw; }
}

/* Glyph sizes measured from real-app recordings are relative to the cell pitch;
   percentage widths would resolve against the border-shrunk content box instead. */
body[data-game="queens"] .cell .crown-svg {
  width: calc(var(--cell-px, 60px) * 0.458);
  height: calc(var(--cell-px, 60px) * 0.458);
}
body[data-game="queens"] .cell.gold .crown-svg {
  width: calc(var(--cell-px, 60px) * 0.57);
  height: calc(var(--cell-px, 60px) * 0.57);
}
body[data-game="queens"] .cell .mark-x {
  width: calc(var(--cell-px, 60px) * 0.183);
  height: calc(var(--cell-px, 60px) * 0.183);
}
  /* ===== Wordle ===== */
  :root[data-game="wordle"],
  body[data-game="wordle"] {
    --bg: #F2F4EC;
    --surface: #FEFFFB;
    --surface-soft: #E7EBDF;
    --surface-raised: rgba(254, 255, 251, .95);
    --ink: #202A20;
    --muted: #657064;
    --line: #CAD2C4;
    --line-strong: #9EAA99;
    --accent: #477A4A;
    --accent-strong: #315E35;
    --accent-soft: #DDEBDD;
    --teal: #9A7628;
    --teal-soft: #F3E8C9;
    --pill: #E8ECE2;
    --board-line: #787C7E;
    --game-backdrop-primary: rgba(71, 122, 74, .18);
    --game-backdrop-secondary: rgba(196, 154, 58, .14);
    --game-pattern-line: rgba(79, 102, 75, .1);
    --game-hero-start: #253E29;
    --game-hero-mid: #477A4A;
    --game-hero-end: #8B773B;
    --game-hero-glow: rgba(231, 210, 139, .2);
    --game-hero-ink: #F8FFF7;
    --game-hero-muted: #E0EBDF;
    --game-hero-button: #F5E4A9;
    --game-hero-button-ink: #293827;
    --game-stage-start: #172019;
    --game-stage-end: #29382B;
    --game-stage-accent: #A9CFAA;
    --game-player-left: #5C9A62;
    --game-player-right: #C49A3A;
    --game-accent-ink: #FFFFFF;
  }
  :root[data-theme="dark"][data-game="wordle"],
  :root[data-theme="dark"] body[data-game="wordle"] {
    --bg: #121612;
    --surface: #1C221C;
    --surface-soft: #293129;
    --surface-raised: rgba(28, 34, 28, .95);
    --ink: #F0F4ED;
    --muted: #A9B3A6;
    --line: #414C40;
    --line-strong: #667264;
    --accent: #7EBC82;
    --accent-strong: #A6D8A8;
    --accent-soft: #2B422D;
    --teal: #E1BD62;
    --teal-soft: #493D21;
    --pill: #2A312A;
    --game-backdrop-primary: rgba(126, 188, 130, .15);
    --game-backdrop-secondary: rgba(225, 189, 98, .12);
    --game-pattern-line: rgba(185, 207, 181, .07);
    --game-hero-start: #1A2A1C;
    --game-hero-mid: #355939;
    --game-hero-end: #62542B;
    --game-accent-ink: #142016;
  }
  body[data-game="wordle"] .random-visual,
  body[data-game="wordle"] .daily-hero,
  body[data-game="wordle"] .profile-hero,
  body[data-game="wordle"] .auth-intro,
  body[data-game="wordle"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(246, 224, 151, .24), transparent 24%),
      linear-gradient(140deg, #253E29 0%, #477A4A 56%, #8B773B 100%);
  }
  body[data-game="wordle"] #view-game .board-holder {
    width: min(100%, 440px); margin-inline: auto; padding: 10px;
    border-color: color-mix(in srgb, var(--line-strong) 68%, var(--line));
    border-radius: 18px;
  }
  .board.wordle-board,
  .watch-board.wordle-board {
    aspect-ratio: 5 / 6; overflow: visible; border: 0; border-radius: 0;
    gap: clamp(4px, 1.25vw, 8px); background: transparent;
  }
  .wordle-cell {
    display: grid; place-items: center; overflow: hidden;
    border: 2px solid #D3D6DA; border-radius: 3px;
    color: var(--ink); background: var(--surface);
    font-size: clamp(22px, 7.4vw, 38px); font-weight: 900;
    line-height: 1; text-transform: uppercase;
    transition: border-color 120ms ease, background-color 160ms ease, color 160ms ease;
  }
  .wordle-cell.is-filled:not(.is-scored) {
    border-color: #878A8C;
    animation: wordle-letter-pop 110ms cubic-bezier(.2,.75,.2,1);
  }
  .wordle-cell.is-absent { color: #FFF; border-color: #5B6166; background: #5B6166; }
  .wordle-cell.is-present { color: #FFF; border-color: #80631D; background: #80631D; }
  .wordle-cell.is-correct { color: #FFF; border-color: #42753E; background: #42753E; }
  .wordle-cell.wordle-flip { animation: wordle-tile-flip 420ms ease both; }
  .wordle-cell.wordle-flip:nth-child(5n + 2) { animation-delay: 70ms; }
  .wordle-cell.wordle-flip:nth-child(5n + 3) { animation-delay: 140ms; }
  .wordle-cell.wordle-flip:nth-child(5n + 4) { animation-delay: 210ms; }
  .wordle-cell.wordle-flip:nth-child(5n + 5) { animation-delay: 280ms; }
  .board.wordle-shake .wordle-cell[data-active-row="true"] {
    animation: wordle-row-shake 320ms ease;
  }
  .wordle-keyboard {
    --wordle-key-gap: 5px;
    width: min(100%, 560px); display: grid; gap: 7px; margin: 13px auto 2px;
    user-select: none; -webkit-user-select: none;
  }
  .wordle-keyboard-row { display: flex; justify-content: center; gap: var(--wordle-key-gap); }
  /* Inset the nine-key row by half a key so all letter keys keep the same width. */
  .wordle-keyboard-row:nth-child(2) { margin-inline: calc((100% + var(--wordle-key-gap)) / 20); }
  .wordle-key {
    min-width: 0; height: 52px; flex: 1 1 0; display: grid; place-items: center;
    padding: 0 3px; border: 0; border-radius: 6px; color: var(--ink);
    background: #D3D6DA; font: inherit; font-size: 13px; font-weight: 900;
    text-transform: uppercase; cursor: pointer; touch-action: manipulation;
  }
  .wordle-key.wide { flex: 1.55 1 0; font-size: 10px; }
  .wordle-key svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
  .wordle-key.is-absent { color: #FFF; background: #5B6166; }
  .wordle-key.is-present { color: #FFF; background: #80631D; }
  .wordle-key.is-correct { color: #FFF; background: #42753E; }
  .wordle-key:active { transform: translateY(1px); }
  .wordle-key:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  body[data-game="wordle"] .watch-board-slot,
  body[data-game="wordle"] .rush-watch-board-slot {
    width: min(100%, 360px); aspect-ratio: 5 / 6; margin-inline: auto;
    background: transparent; box-shadow: none;
  }
  .watch-board.wordle-board { gap: clamp(2px, .45vw, 5px); }
  .watch-board .wordle-cell {
    border-width: clamp(1px, .2vw, 2px); font-size: clamp(12px, 3.3vw, 27px);
  }
  :root[data-theme="dark"] .wordle-cell {
    color: var(--ink); border-color: #68717A; background: var(--surface);
  }
  :root[data-theme="dark"] .wordle-cell.is-filled:not(.is-scored) { border-color: #8C958A; }
  :root[data-theme="dark"] .wordle-cell.is-absent { color: #FFF; border-color: #3E4247; background: #3E4247; }
  :root[data-theme="dark"] .wordle-cell.is-present { color: #FFF; border-color: #80631D; background: #80631D; }
  :root[data-theme="dark"] .wordle-cell.is-correct { color: #FFF; border-color: #42753E; background: #42753E; }
  :root[data-theme="dark"] .wordle-key { color: #FFF; background: #454B52; }
  :root[data-theme="dark"] .wordle-key.is-absent { color: #FFF; background: #3E4247; }
  :root[data-theme="dark"] .wordle-key.is-present { color: #FFF; background: #80631D; }
  :root[data-theme="dark"] .wordle-key.is-correct { color: #FFF; background: #42753E; }
  @keyframes wordle-letter-pop {
    0% { transform: scale(.84); }
    100% { transform: scale(1); }
  }
  @keyframes wordle-tile-flip {
    0% { transform: rotateX(0); }
    45% { transform: rotateX(90deg); }
    55% { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
  }
  @keyframes wordle-row-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
  }
  @media (max-width: 620px) {
    body[data-game="wordle"] #view-game .board-holder { width: min(100%, 390px); padding: 7px; }
    .wordle-keyboard { --wordle-key-gap: 4px; gap: 6px; margin-top: 10px; }
    .wordle-key { height: 48px; font-size: 12px; }
    .wordle-key.wide { font-size: 9px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .wordle-cell, .wordle-key { transition: none !important; animation: none !important; }
  }
  /* ===== Nonogram ===== */
  :root[data-game="nonogram"],
  body[data-game="nonogram"] {
    --bg: #EDF5F2;
    --surface: #FBFEFC;
    --surface-soft: #E2EEE9;
    --surface-raised: rgba(251, 254, 252, .96);
    --ink: #172B27;
    --muted: #5B716B;
    --line: #C5D7D1;
    --line-strong: #8FA9A1;
    --accent: #397A6D;
    --accent-strong: #235D52;
    --accent-soft: #D5E9E2;
    --teal: #AA7040;
    --teal-soft: #F1E2D3;
    --pill: #DFECE7;
    --board-line: #294A43;
    --game-backdrop-primary: rgba(57, 122, 109, .18);
    --game-backdrop-secondary: rgba(170, 112, 64, .12);
    --game-pattern-line: rgba(51, 104, 94, .1);
    --game-hero-start: #173E36;
    --game-hero-mid: #397A6D;
    --game-hero-end: #8A6745;
    --game-hero-glow: rgba(220, 239, 230, .26);
    --game-hero-ink: #F7FFFC;
    --game-hero-muted: #D8EEE7;
    --game-hero-button: #E8D5B9;
    --game-hero-button-ink: #203D36;
    --game-stage-start: #13231F;
    --game-stage-end: #26463E;
    --game-stage-accent: #9DD6C8;
    --game-player-left: #397A6D;
    --game-player-right: #B47443;
    --game-accent-ink: #FFFFFF;
    --nonogram-cell: #F8FBFA;
    --nonogram-filled: #397A6D;
    --nonogram-cross: #94A9A3;
    --nonogram-clue: #E5EFEB;
  }
  :root[data-theme="dark"][data-game="nonogram"],
  :root[data-theme="dark"] body[data-game="nonogram"] {
    --bg: #101A18;
    --surface: #182522;
    --surface-soft: #22332F;
    --surface-raised: rgba(24, 37, 34, .96);
    --ink: #EDF7F3;
    --muted: #A5BAB4;
    --line: #354A45;
    --line-strong: #59716A;
    --accent: #79B9AA;
    --accent-strong: #A8D8CC;
    --accent-soft: #29483F;
    --pill: #263833;
    --board-line: #4E6B63;
    --game-accent-ink: #13231F;
    --nonogram-cell: #1B2A26;
    --nonogram-filled: #79B9AA;
    --nonogram-cross: #718B84;
    --nonogram-clue: #22352F;
  }
  body[data-game="nonogram"] .random-visual,
  body[data-game="nonogram"] .daily-hero,
  body[data-game="nonogram"] .profile-hero,
  body[data-game="nonogram"] .auth-intro,
  body[data-game="nonogram"] .watch-summary {
    background:
      radial-gradient(circle at 84% 16%, rgba(231, 216, 183, .24), transparent 24%),
      linear-gradient(140deg, #173E36 0%, #397A6D 58%, #8A6745 100%);
  }
  body[data-game="nonogram"] #view-game .game-wrap {
    width: min(100%, 760px, max(320px, calc(100dvh - 180px)));
    max-width: 760px;
  }
  body[data-game="nonogram"] #view-game .board-holder {
    width: 100%;
    padding: 7px;
    border-color: color-mix(in srgb, var(--line-strong) 72%, var(--line));
    border-radius: 17px;
    background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
    box-shadow: 0 18px 42px color-mix(in srgb, var(--ink) 10%, transparent);
  }
  body[data-game="nonogram"] :is(.board, .cell, .board-holder) { touch-action: none; }
  .board.nonogram-board,
  .watch-board.nonogram-board {
    position: relative;
    overflow: hidden;
    border: 2px solid var(--board-line);
    border-radius: 10px;
    gap: 1px;
    padding: 1px;
    background: var(--board-line);
  }
  .nonogram-cell {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 0;
    background: var(--nonogram-cell);
    cursor: pointer;
    transition: background-color 90ms ease, box-shadow 90ms ease;
  }
  .nonogram-cell.is-filled { background: var(--nonogram-filled); }
  .nonogram-fill {
    width: 100%;
    height: 100%;
    background: var(--nonogram-filled);
    transform-origin: center;
    animation: nonogram-fill-in 105ms cubic-bezier(.2,.72,.2,1) both;
  }
  .nonogram-cross {
    position: relative;
    width: 42%;
    aspect-ratio: 1;
    color: var(--nonogram-cross);
  }
  .nonogram-cross::before,
  .nonogram-cross::after {
    content: "";
    position: absolute;
    top: 48%;
    left: 0;
    width: 100%;
    height: max(1px, .08em);
    border-radius: 999px;
    background: currentColor;
  }
  .nonogram-cross::before { transform: rotate(45deg); }
  .nonogram-cross::after { transform: rotate(-45deg); }
  .nonogram-clue-corner,
  .nonogram-row-clue,
  .nonogram-col-clue {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    color: var(--muted);
    background: var(--nonogram-clue);
    font-size: clamp(7px, calc(var(--board-cell-font-size, 20px) * .58), 15px);
    font-weight: 850;
    line-height: 1;
    pointer-events: none;
  }
  .nonogram-row-clue {
    justify-content: flex-end;
    gap: .38em;
    padding-inline: .45em;
    border-right: 1px solid var(--board-line);
  }
  .nonogram-col-clue {
    flex-direction: column;
    justify-content: flex-end;
    gap: .24em;
    padding-block: .3em;
    border-bottom: 1px solid var(--board-line);
  }
  .nonogram-clue-corner {
    border-right: 1px solid var(--board-line);
    border-bottom: 1px solid var(--board-line);
  }
  .nonogram-row-clue.is-complete,
  .nonogram-col-clue.is-complete {
    color: color-mix(in srgb, var(--muted) 54%, transparent);
  }
  .watch-board.nonogram-board .nonogram-row-clue,
  .watch-board.nonogram-board .nonogram-col-clue {
    font-size: clamp(5px, 1.15vw, 10px);
  }
  .nonogram-tools { display: none; }
  .nonogram-tools button {
    min-width: 104px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    color: var(--muted);
    background: var(--surface);
    font: inherit;
    font-weight: 800;
  }
  .nonogram-tools button[aria-pressed="true"] {
    color: var(--accent-strong);
    border-color: var(--accent);
    background: var(--accent-soft);
  }
  .nonogram-tool-fill {
    width: 17px;
    height: 17px;
    border-radius: 3px;
    background: var(--nonogram-filled);
  }
  .nonogram-tool-cross {
    position: relative;
    width: 18px;
    height: 18px;
  }
  .nonogram-tool-cross::before,
  .nonogram-tool-cross::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 1px;
    width: 16px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
  }
  .nonogram-tool-cross::before { transform: rotate(45deg); }
  .nonogram-tool-cross::after { transform: rotate(-45deg); }
  @keyframes nonogram-fill-in {
    from { opacity: .45; transform: scale(.72); }
    to { opacity: 1; transform: scale(1); }
  }
  @media (max-width: 620px) {
    body[data-game="nonogram"] #view-game .board-holder { padding: 4px; border-radius: 13px; }
    .board.nonogram-board, .watch-board.nonogram-board { border-radius: 8px; }
    .nonogram-tools {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 10px auto 2px;
    }
  }
  @media (pointer: coarse) {
    .nonogram-tools {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 10px auto 2px;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .nonogram-cell, .nonogram-fill { transition: none !important; animation: none !important; }
  }
/* ===== 15 Puzzle: precision mechanical board ===== */
:root[data-game="fifteen"],
body[data-game="fifteen"] {
  --bg: #EEF3F4;
  --surface: #FCFDFB;
  --surface-soft: #E4ECEE;
  --surface-raised: rgba(252, 253, 251, .96);
  --ink: #142B3B;
  --muted: #5E7180;
  --line: #C6D4D8;
  --line-strong: #91A8B1;
  --accent: #176A9D;
  --accent-strong: #0C4B72;
  --accent-soft: #D9EAF2;
  --teal: #C36931;
  --teal-soft: #F4E4D6;
  --pill: #E2EBED;
  --board-line: #153B53;
  --game-backdrop-primary: rgba(23, 106, 157, .18);
  --game-backdrop-secondary: rgba(195, 105, 49, .13);
  --game-pattern-line: rgba(27, 79, 109, .09);
  --game-hero-start: #0D334C;
  --game-hero-mid: #176A9D;
  --game-hero-end: #8B4C2B;
  --game-hero-glow: rgba(255, 241, 211, .28);
  --game-hero-ink: #FBFDFF;
  --game-hero-muted: #DCEBF1;
  --game-hero-button: #F8D99B;
  --game-hero-button-ink: #173246;
  --game-stage-start: #0A2638;
  --game-stage-end: #183F55;
  --game-stage-accent: #F4C979;
  --game-player-left: #287FB3;
  --game-player-right: #C8733E;
  --game-accent-ink: #FFFFFF;
  --fifteen-frame: #16435F;
  --fifteen-frame-deep: #092B3F;
  --fifteen-well: #0C3046;
  --fifteen-groove: #061F2F;
  --fifteen-tile: #FFF8E8;
  --fifteen-tile-highlight: #FFFEF8;
  --fifteen-tile-edge: #D8C9AE;
  --fifteen-tile-ink: #17364B;
  --fifteen-tile-shadow: #84939A;
  --fifteen-correct: #DDF1E5;
  --fifteen-correct-edge: #7AA28D;
  --fifteen-brass: #D79239;
  --fifteen-brass-deep: #944B1B;
  --fifteen-brass-soft: #F8E3B9;
  --fifteen-focus: #F3B64F;
}

:root[data-theme="dark"][data-game="fifteen"],
:root[data-theme="dark"] body[data-game="fifteen"] {
  --bg: #0C151C;
  --surface: #15232D;
  --surface-soft: #1E313D;
  --surface-raised: rgba(21, 35, 45, .97);
  --ink: #F2F5F3;
  --muted: #AAB9C0;
  --line: #334B59;
  --line-strong: #627C8A;
  --accent: #72B7DC;
  --accent-strong: #B2DAEE;
  --accent-soft: #1E4055;
  --teal: #E29B68;
  --teal-soft: #472F23;
  --pill: #203541;
  --board-line: #829BA8;
  --game-accent-ink: #102737;
  --fifteen-frame: #456A7D;
  --fifteen-frame-deep: #091B26;
  --fifteen-well: #091A24;
  --fifteen-groove: #030D12;
  --fifteen-tile: #243C4B;
  --fifteen-tile-highlight: #2F4B5C;
  --fifteen-tile-edge: #506E7E;
  --fifteen-tile-ink: #FFF6E5;
  --fifteen-tile-shadow: #050C10;
  --fifteen-correct: #254A3E;
  --fifteen-correct-edge: #5E927A;
  --fifteen-brass: #F0B65C;
  --fifteen-brass-deep: #B96F2E;
  --fifteen-brass-soft: #4C3922;
  --fifteen-focus: #FFD27B;
}

body[data-game="fifteen"] main,
body[data-game="fifteen"] #view-game {
  background:
    radial-gradient(circle at 12% 5%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--fifteen-brass) 9%, transparent), transparent 24rem),
    linear-gradient(115deg, transparent 0 49.7%, color-mix(in srgb, var(--game-pattern-line) 72%, transparent) 49.8% 50.2%, transparent 50.3%) 0 0 / 34px 34px,
    var(--bg);
}

body[data-game="fifteen"] :is(.page-eyebrow, .random-section-label) {
  color: var(--fifteen-brass-deep);
}

:root[data-theme="dark"] body[data-game="fifteen"] :is(.page-eyebrow, .random-section-label) {
  color: var(--fifteen-brass);
}

body[data-game="fifteen"] :is(.random-visual, .daily-hero, .profile-hero, .auth-intro, .watch-summary) {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 16%, rgba(255, 228, 177, .3), transparent 24%),
    linear-gradient(140deg, var(--game-hero-start), var(--game-hero-mid) 56%, var(--game-hero-end));
}

body[data-game="fifteen"] :is(.daily-hero, .profile-hero, .auth-intro, .watch-summary)::after {
  content: "";
  position: absolute;
  right: -28px;
  bottom: -34px;
  width: 176px;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .24;
  border: 18px solid rgba(255, 255, 255, .3);
  border-radius: 26px;
  transform: rotate(12deg);
  box-shadow:
    -42px -42px 0 -24px rgba(255, 255, 255, .34),
    -84px -84px 0 -48px rgba(255, 255, 255, .22);
}

body[data-game="fifteen"] .random-panel {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 97%, #fff), var(--surface));
  box-shadow:
    0 18px 42px color-mix(in srgb, var(--accent-strong) 9%, transparent),
    inset 0 3px 0 var(--fifteen-brass);
}

body[data-game="fifteen"] .random-visual {
  border-color: color-mix(in srgb, var(--fifteen-brass) 52%, transparent);
  background:
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px) 0 0 / 14px 14px,
    linear-gradient(145deg, var(--fifteen-frame), var(--fifteen-frame-deep));
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .08);
}

body[data-game="fifteen"] .random-visual .classic-practice-icon {
  width: 40px;
  height: 40px;
  padding: 6px;
  color: var(--fifteen-tile-ink);
  border: 1px solid var(--fifteen-tile-edge);
  border-radius: 10px;
  background: linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile));
  box-shadow: 0 4px 0 rgba(0, 0, 0, .22);
}

body[data-game="fifteen"] .random-choice span {
  border-color: color-mix(in srgb, var(--line) 86%, var(--accent));
  background: color-mix(in srgb, var(--surface-soft) 68%, var(--surface));
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}

body[data-game="fifteen"] .random-choice input:checked + span {
  color: var(--accent-strong);
  border-color: var(--accent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--accent-soft) 70%, var(--surface)),
    var(--accent-soft));
  box-shadow:
    inset 0 -3px 0 var(--accent),
    0 5px 14px color-mix(in srgb, var(--accent) 13%, transparent);
}

body[data-game="fifteen"] .random-generate {
  border-color: var(--accent-strong);
  background: linear-gradient(135deg, var(--accent), var(--accent-strong));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 24%, transparent);
}

body[data-game="fifteen"] #view-game .game-wrap {
  width: min(100%, 600px, max(310px, calc(100dvh - 180px)));
  max-width: 600px;
}

body[data-game="fifteen"] #view-game .g-header {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--surface-raised) 96%, var(--accent-soft)),
      var(--surface-raised) 48%,
      color-mix(in srgb, var(--surface-raised) 94%, var(--fifteen-brass-soft)));
  box-shadow:
    0 10px 28px color-mix(in srgb, var(--fifteen-frame-deep) 10%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 54%, transparent);
}

body[data-game="fifteen"] #view-game .classic-title-icon {
  width: 28px;
  height: 28px;
  padding: 4px;
  color: var(--fifteen-tile-ink);
  border: 1px solid var(--fifteen-tile-edge);
  border-radius: 8px;
  background: linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--fifteen-frame) 28%, transparent);
}

body[data-game="fifteen"] #view-game .g-title {
  color: var(--ink);
  letter-spacing: -.035em;
}

body[data-game="fifteen"] #view-game .g-header .icon-btn {
  color: var(--accent-strong);
}

body[data-game="fifteen"] #view-game .g-header .icon-btn:hover {
  color: var(--fifteen-brass-deep);
  border-color: color-mix(in srgb, var(--fifteen-brass) 46%, var(--line));
  background: var(--fifteen-brass-soft);
}

body[data-game="fifteen"] #view-game .g-subhead {
  min-height: 46px;
  margin-bottom: 10px;
  padding: 5px 6px 5px 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fifteen-frame-deep) 7%, transparent);
}

body[data-game="fifteen"] #view-game .g-timer {
  color: var(--accent-strong);
  font-size: 18px;
  font-variant-numeric: tabular-nums;
}

body[data-game="fifteen"] #view-game .g-diff {
  color: var(--fifteen-brass-deep);
  border: 1px solid color-mix(in srgb, var(--fifteen-brass) 42%, transparent);
  background: var(--fifteen-brass-soft);
  letter-spacing: .09em;
}

:root[data-theme="dark"] body[data-game="fifteen"] #view-game .g-diff {
  color: var(--fifteen-brass);
}

body[data-game="fifteen"] #view-game .board-holder {
  width: 100%;
  padding: clamp(8px, 1.6vw, 13px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fifteen-frame) 62%, transparent);
  border-radius: clamp(18px, 3vw, 25px);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--surface) 94%, #fff),
    color-mix(in srgb, var(--surface-soft) 76%, var(--surface)));
  box-shadow:
    0 24px 50px color-mix(in srgb, var(--fifteen-frame-deep) 17%, transparent),
    0 4px 10px color-mix(in srgb, var(--fifteen-frame-deep) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 64%, transparent);
}

.board.fifteen-board,
.watch-board.fifteen-board {
  gap: clamp(4px, .85vw, 7px);
  padding: clamp(6px, 1.15vw, 10px);
  overflow: hidden;
  border: clamp(4px, .75vw, 7px) solid var(--fifteen-frame);
  border-radius: clamp(13px, 2.2vw, 19px);
  background:
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 25% 25%,
    var(--fifteen-well);
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--fifteen-groove) 74%, transparent),
    inset 0 9px 18px color-mix(in srgb, #000 31%, transparent),
    0 2px 0 color-mix(in srgb, #fff 46%, transparent);
}

.fifteen-cell {
  position: relative;
  display: grid;
  place-items: stretch;
  overflow: hidden;
  border: 0;
  border-radius: clamp(7px, 1.25vw, 12px);
  background: color-mix(in srgb, var(--fifteen-groove) 72%, transparent);
  cursor: pointer;
}

.fifteen-cell.fifteen-blank {
  cursor: default;
  background:
    radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 50%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 4px, transparent 4px 8px),
    var(--fifteen-groove);
  box-shadow:
    inset 0 5px 12px color-mix(in srgb, #000 42%, transparent),
    inset 0 0 0 1px color-mix(in srgb, #000 26%, transparent);
}

.fifteen-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--fifteen-tile-edge);
  border-radius: inherit;
  color: var(--fifteen-tile-ink);
  background:
    linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile) 68%);
  box-shadow:
    0 clamp(3px, .52vw, 5px) 0 var(--fifteen-tile-shadow),
    0 clamp(5px, .8vw, 9px) clamp(7px, 1.3vw, 13px) color-mix(in srgb, #000 20%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 82%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--fifteen-tile-edge) 56%, transparent);
  font-size: clamp(20px, calc(var(--board-cell-font-size, 30px) * 1.22), 48px);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 54%, transparent);
  transition:
    transform 130ms cubic-bezier(.2,.75,.2,1),
    border-color 130ms ease,
    box-shadow 130ms ease,
    filter 130ms ease;
}

.fifteen-tile::before {
  content: "";
  position: absolute;
  inset: 5px;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--fifteen-tile-edge) 40%, transparent);
  border-radius: max(3px, calc(clamp(7px, 1.25vw, 12px) - 4px));
}

.fifteen-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,.18), transparent 34% 76%, rgba(0,0,0,.035));
}

.fifteen-tile > span {
  position: relative;
  z-index: 1;
  letter-spacing: -.055em;
}

.fifteen-cell.fifteen-correct .fifteen-tile {
  border-color: var(--fifteen-correct-edge);
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--fifteen-correct) 78%, #fff),
    var(--fifteen-correct));
}

:root[data-theme="dark"] .fifteen-cell.fifteen-correct .fifteen-tile {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--fifteen-correct) 82%, var(--fifteen-tile-highlight)),
    var(--fifteen-correct));
}

.board.fifteen-board:not([aria-readonly="true"]) .fifteen-cell:not(.fifteen-blank):hover .fifteen-tile {
  filter: brightness(1.025) saturate(1.03);
  transform: translateY(-1px);
}

.board.fifteen-board:not([aria-readonly="true"]) .fifteen-cell:not(.fifteen-blank):active .fifteen-tile {
  transform: translateY(2px);
  box-shadow:
    0 1px 0 var(--fifteen-tile-shadow),
    0 3px 6px color-mix(in srgb, #000 15%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 68%, transparent);
}

.board.fifteen-board .fifteen-cell:focus-visible {
  z-index: 2;
  outline: 3px solid var(--fifteen-focus);
  outline-offset: -3px;
  box-shadow: 0 0 0 3px var(--fifteen-frame-deep);
}

.fifteen-cell .fifteen-tile.mark-pop,
.watch-cell.watch-move-pop .fifteen-tile {
  animation: fifteen-slide-settle 175ms cubic-bezier(.18, .82, .2, 1) both;
}
.fifteen-slide-up .fifteen-tile.mark-pop { --fifteen-slide-x: 0; --fifteen-slide-y: -105%; }
.fifteen-slide-right .fifteen-tile.mark-pop { --fifteen-slide-x: 105%; --fifteen-slide-y: 0; }
.fifteen-slide-down .fifteen-tile.mark-pop { --fifteen-slide-x: 0; --fifteen-slide-y: 105%; }
.fifteen-slide-left .fifteen-tile.mark-pop { --fifteen-slide-x: -105%; --fifteen-slide-y: 0; }
.watch-cell.fifteen-slide-up .fifteen-tile { --fifteen-slide-x: 0; --fifteen-slide-y: -105%; }
.watch-cell.fifteen-slide-right .fifteen-tile { --fifteen-slide-x: 105%; --fifteen-slide-y: 0; }
.watch-cell.fifteen-slide-down .fifteen-tile { --fifteen-slide-x: 0; --fifteen-slide-y: 105%; }
.watch-cell.fifteen-slide-left .fifteen-tile { --fifteen-slide-x: -105%; --fifteen-slide-y: 0; }

:is(.board, .watch-board).fifteen-complete {
  animation: fifteen-board-complete 520ms cubic-bezier(.2,.78,.2,1) both;
}

:is(.board, .watch-board).fifteen-complete .fifteen-tile {
  border-color: var(--fifteen-correct-edge);
}

body[data-game="fifteen"] #view-game .launch {
  inset: clamp(8px, 1.55vw, 13px);
  color: #F8FBFC;
  background:
    radial-gradient(circle at 50% 34%, rgba(245, 192, 102, .2), transparent 36%),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0 / 25% 25%,
    linear-gradient(145deg, var(--fifteen-frame), var(--fifteen-frame-deep));
  box-shadow: inset 0 0 0 5px color-mix(in srgb, #fff 8%, transparent);
}

body[data-game="fifteen"] #view-game .launch .classic-launch-icon {
  width: 78px;
  height: 78px;
  padding: 13px;
  color: var(--fifteen-tile-ink);
  border: 1px solid var(--fifteen-tile-edge);
  border-radius: 18px;
  background: linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile));
  box-shadow:
    0 6px 0 var(--fifteen-tile-shadow),
    0 14px 30px rgba(0,0,0,.25);
}

body[data-game="fifteen"] #view-game .launch :is(.l-num, .l-date) {
  color: inherit;
}

body[data-game="fifteen"] #view-game .launch .l-num {
  letter-spacing: -.03em;
}

body[data-game="fifteen"] #view-game .launch .l-date {
  color: rgba(248, 251, 252, .72);
}

body[data-game="fifteen"] #view-game .launch .start-btn {
  color: #193044;
  border-color: var(--fifteen-brass);
  background: linear-gradient(180deg, #F9DEA5, var(--fifteen-brass));
  box-shadow:
    0 5px 0 var(--fifteen-brass-deep),
    0 12px 24px rgba(0,0,0,.24);
}

body[data-game="fifteen"] #view-game .launch .start-btn:hover {
  filter: brightness(1.035);
  transform: translateY(-1px);
}

body[data-game="fifteen"] #view-game .g-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 12px;
}

body[data-game="fifteen"] #view-game .g-actions .pill-btn {
  min-height: 46px;
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 13px;
  background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--accent-soft) 32%, var(--surface)));
  box-shadow:
    0 5px 13px color-mix(in srgb, var(--fifteen-frame-deep) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
  font-size: 12px;
  font-weight: 900;
}

body[data-game="fifteen"] #view-game .g-actions .pill-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 8px 18px color-mix(in srgb, var(--fifteen-frame-deep) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent);
}

body[data-game="fifteen"] #view-game .g-actions .pill-btn:disabled {
  opacity: .45;
  box-shadow: none;
}

body[data-game="fifteen"] #view-game .nudge {
  color: var(--accent-strong);
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-left: 4px solid var(--fifteen-brass);
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
}

body[data-game="fifteen"] #view-game .howto {
  border-color: color-mix(in srgb, var(--accent) 19%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
}

body[data-game="fifteen"] #view-game .howto-summary-icon {
  color: var(--fifteen-tile-ink);
  border: 1px solid var(--fifteen-tile-edge);
  background: linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile));
  box-shadow: 0 3px 0 color-mix(in srgb, var(--fifteen-frame) 25%, transparent);
}

.watch-board.fifteen-board {
  gap: clamp(2px, .5vw, 5px);
  padding: clamp(4px, .7vw, 7px);
  border-width: clamp(3px, .55vw, 5px);
}

.watch-board.fifteen-board .fifteen-tile {
  font-size: clamp(11px, calc(var(--board-cell-font-size, 20px) * 1.12), 29px);
  box-shadow:
    0 2px 0 var(--fifteen-tile-shadow),
    inset 0 1px 0 color-mix(in srgb, #fff 62%, transparent);
}

body[data-game="fifteen"] .results.practice-results .result-icon {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-inline: auto;
  padding: 14px;
  color: var(--fifteen-tile-ink);
  border: 1px solid var(--fifteen-tile-edge);
  border-radius: 20px;
  background: linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile));
  box-shadow:
    0 6px 0 var(--fifteen-tile-shadow),
    0 14px 28px color-mix(in srgb, var(--fifteen-frame-deep) 16%, transparent);
}

body[data-game="fifteen"] .results.practice-results .result-icon > :is(svg, span > svg) {
  width: 100%;
  height: 100%;
}

body[data-game="fifteen"] .results.practice-results .result-title {
  color: var(--accent-strong);
  letter-spacing: -.035em;
}

.guide-fifteen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: min(100%, 124px);
  padding: 6px;
  border: 4px solid var(--fifteen-frame);
  border-radius: 12px;
  background: var(--fifteen-well);
  box-shadow: inset 0 4px 8px color-mix(in srgb, #000 25%, transparent);
}

.guide-fifteen span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border: 1px solid var(--fifteen-tile-edge);
  border-radius: 5px;
  color: var(--fifteen-tile-ink);
  background: linear-gradient(145deg, var(--fifteen-tile-highlight), var(--fifteen-tile));
  box-shadow: 0 2px 0 var(--fifteen-tile-shadow);
  font-size: 11px;
  font-weight: 900;
}

.guide-fifteen .blank {
  border-color: transparent;
  background: var(--fifteen-groove);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}

@keyframes fifteen-slide-settle {
  from {
    transform: translate(var(--fifteen-slide-x, 0), var(--fifteen-slide-y, 0));
  }
  78% { transform: translate(0, -1px); }
  to { opacity: 1; transform: none; }
}

@keyframes fifteen-board-complete {
  0%, 100% { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--fifteen-groove) 74%, transparent), inset 0 9px 18px color-mix(in srgb, #000 31%, transparent); }
  48% { box-shadow: inset 0 0 0 3px var(--fifteen-brass), inset 0 9px 18px color-mix(in srgb, #000 25%, transparent), 0 0 0 5px color-mix(in srgb, var(--fifteen-brass) 18%, transparent); }
}

@media (max-width: 560px) {
  body[data-game="fifteen"] #view-game .game-wrap {
    width: min(100%, max(290px, calc(100dvh - 175px)));
  }
  body[data-game="fifteen"] #view-game .board-holder {
    padding: 6px;
    border-radius: 16px;
    background:
      linear-gradient(145deg,
        color-mix(in srgb, var(--surface) 94%, #fff),
        color-mix(in srgb, var(--surface-soft) 76%, var(--surface)));
  }
  .board.fifteen-board,
  .watch-board.fifteen-board {
    gap: 3px;
    padding: 5px;
    border-width: 4px;
  }
  .fifteen-tile::before { inset: 3px; }
  body[data-game="fifteen"] #view-game .launch { inset: 6px; }
  body[data-game="fifteen"] #view-game .g-subhead {
    min-height: 44px;
    padding-left: 9px;
  }
  body[data-game="fifteen"] #view-game .g-actions .pill-btn { min-height: 44px; }
}

@media (min-width: 561px) and (max-width: 900px) {
  body[data-game="fifteen"] #view-game .g-header {
    --g-header-action-size: 44px;
    --g-header-side-width: 138px;
  }
}

@media (min-width: 501px) and (max-height: 620px) {
  body[data-game="fifteen"] #view-game .game-wrap {
    width: min(100%, 600px, max(250px, calc(100dvh - 140px)));
  }
}

@media (max-width: 360px) {
  body[data-game="fifteen"] #view-game .g-subhead { gap: 5px; }
  body[data-game="fifteen"] #view-game .g-timer { font-size: 16px; }
  body[data-game="fifteen"] #view-game .g-diff { max-width: 42%; padding-inline: 7px; }
  body[data-game="fifteen"] #view-game #g-reset { padding-inline: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .fifteen-cell .fifteen-tile.mark-pop,
  .watch-cell.watch-move-pop .fifteen-tile,
  :is(.board, .watch-board).fifteen-complete {
    animation: none;
  }
  body[data-game="fifteen"] :is(.fifteen-tile, .pill-btn, .start-btn) {
    transition: none;
  }
}

/* One shared tile mark at every logo size. */
body[data-game="fifteen"] :is(.classic-title-icon, .classic-launch-icon, .classic-practice-icon, .classic-day-mark, .classic-mystery-icon) img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

:root body[data-game="fifteen"] :is(.classic-practice-icon, .classic-title-icon, .classic-launch-icon) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
:root body[data-game="fifteen"] .random-visual .classic-practice-icon img {
  border-radius: 0;
}
  /* Keep every in-game identity centered independently of asymmetric controls. */
  body[data-game] #view-game .g-header {
    --g-header-action-size: 38px;
    --g-header-side-width: 120px;
    position: relative;
    grid-template-columns:
      minmax(var(--g-header-side-width), 1fr)
      minmax(0, auto)
      minmax(var(--g-header-side-width), 1fr);
    column-gap: 0;
  }
  .g-header > #g-back {
    grid-column: 1;
    justify-self: start;
  }
  .g-header > .g-title {
    grid-column: 2;
    justify-self: center;
    width: max-content;
    max-width: 100%;
  }
  .g-header-actions {
    grid-column: 3;
    display: flex;
    align-items: center;
    justify-self: end;
    gap: 3px;
    min-width: 0;
  }
  .g-header > #g-back,
  .g-header-actions > .icon-btn {
    flex: 0 0 var(--g-header-action-size);
    min-width: var(--g-header-action-size);
    width: var(--g-header-action-size);
    height: var(--g-header-action-size);
  }
  @media (max-width: 680px) {
    body[data-game] #view-game .g-header {
      --g-header-action-size: 44px;
      --g-header-side-width: 138px;
    }
  }
  @media (max-width: 500px) {
    body[data-game] #view-game .g-header {
      --g-header-action-size: 44px;
      --g-header-side-width: 91px;
      grid-template-columns: minmax(var(--g-header-side-width), 1fr) minmax(0, auto) minmax(var(--g-header-side-width), 1fr);
    }
    .g-header > #g-back,
    .g-header-actions > .icon-btn {
      min-height: 44px;
      padding: 11px;
    }
    body[data-game] #view-game .g-title {
      grid-column: 2;
      grid-row: 1;
      width: auto;
      white-space: nowrap;
      font-size: 15px;
    }
    .g-header > #g-back,
    .g-header > .g-header-actions {
      grid-row: 1;
    }
    .g-title :is(.logo, .classic-title-icon, .tango-title-icons) {
      display: none;
    }
    /* The full rules disclosure remains directly below the board. */
    body[data-game] #view-game #g-help { display: none; }
  }
  @media (min-width: 501px) and (max-height: 620px) {
    body[data-game] #view-game .g-header {
      --g-header-action-size: 44px;
      --g-header-side-width: 138px;
    }
    body[data-game] #view-game .g-title {
      font-size: 14px;
    }
    .g-header-actions {
      gap: 0;
    }
    .g-title :is(.logo, .classic-title-icon, .tango-title-icons) {
      display: none;
    }
  }
  @media (max-width: 360px) {
    body[data-game="minesweeper"] #view-game #g-help {
      display: none;
    }
    body[data-game="minesweeper"] #view-game .g-title {
      font-size: 13px;
      letter-spacing: -.02em;
    }
  }

  /* Generated practice keeps the choices primary and the game mark secondary. */
  #view-random {
    width: min(100%, 900px);
    max-width: 900px;
  }
  #view-random .page-heading {
    width: min(100%, 760px);
    margin: 2px auto 18px;
  }
  #view-random .page-heading h1,
  #view-random .page-heading .sub {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }
  .random-shell {
    display: block;
    width: min(100%, 760px);
    margin-inline: auto;
  }
  .random-panel {
    display: block;
    padding: clamp(20px, 3vw, 28px);
    border-color: var(--line);
    border-radius: 20px;
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .random-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .random-panel-title { min-width: 0; }
  .random-panel .random-panel-title h2 {
    margin: 0;
    font-size: clamp(20px, 2.5vw, 24px);
    line-height: 1.05;
    letter-spacing: -.035em;
  }
  .random-panel-head .random-section-label {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 10px;
  }
  body[data-game] .random-visual {
    position: relative;
    flex: 0 0 64px;
    width: 64px;
    min-height: 0;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--game-hero-ink) 18%, transparent);
    border-radius: 16px;
    box-shadow: none;
  }
  .random-visual::before {
    content: none;
    display: none;
  }
  .random-visual .random-crown {
    position: static;
    width: 38px;
    display: grid;
    place-items: center;
    filter: none;
  }
  .random-visual .random-crown svg {
    width: 100%;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .2));
  }
  body[data-game] .random-visual .classic-practice-icon {
    width: 34px;
    height: 34px;
    aspect-ratio: 1;
    color: var(--game-hero-ink);
  }
  body[data-game] .random-visual .classic-practice-icon img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 9px;
  }
  body[data-game] .random-visual .tango-practice-icons {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
  }
  body[data-game] .random-visual .tango-practice-icons .tango-symbol {
    width: 25px;
    height: 25px;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .18));
  }
  .random-field { margin-bottom: 17px; }
  .random-field legend {
    margin-bottom: 9px;
    font-size: 12.5px;
  }
  .random-choice span {
    min-height: 44px;
    border-radius: 10px;
    font-size: 12.5px;
  }
  .random-generate { min-height: 46px; }
  .random-status { min-height: 18px; margin-top: 7px; }

  @media (max-width: 680px) {
    #view-random { padding-top: 20px; }
    #view-random .page-heading { margin-bottom: 14px; }
    .random-panel { padding: 17px; border-radius: 16px; }
    .random-panel-head {
      gap: 11px;
      margin-bottom: 17px;
      padding-bottom: 15px;
    }
    body[data-game] .random-visual {
      flex-basis: 54px;
      width: 54px;
      border-radius: 14px;
    }
    .random-visual .random-crown { width: 32px; }
    body[data-game] .random-visual .classic-practice-icon {
      width: 30px;
      height: 30px;
    }
    body[data-game] .random-visual .tango-practice-icons .tango-symbol {
      width: 22px;
      height: 22px;
    }
    .random-field { margin-bottom: 15px; }
  }
  @media (max-width: 360px) {
    #view-random .page-heading h1 { font-size: 32px; }
    .random-panel { padding-inline: 14px; }
    .random-choice span { padding-inline: 3px; font-size: 11px; }
  }
  @media (min-width: 681px) and (max-height: 700px) {
    #view-random { padding-top: 20px; }
    #view-random .page-heading { margin-bottom: 13px; }
    .random-panel { padding-block: 19px; }
    .random-panel-head {
      margin-bottom: 15px;
      padding-bottom: 14px;
    }
    .random-field { margin-bottom: 13px; }
  }
:root[data-game="set"], body[data-game="set"] { --accent: #794b99; --accent-hover: #633981; --accent-soft: #f0e7f6; --game-hero-start: #352243; --game-hero-mid: #794b99; --game-hero-end: #3b6b60; --game-hero-glow: #d0a2ee33; --game-hero-ink: #fff8ff; --game-hero-muted: #ead8f4; --game-hero-button: #e4f0b4; --game-hero-button-ink: #24372d; --game-stage-start: #21192a; --game-stage-end: #382745; --game-stage-accent: #d0a2ee; --game-player-left: #a566d2; --game-player-right: #36a777; --game-accent-ink: #fff; }
:root[data-game="set"][data-theme="dark"] { --accent: #d0a2ee; --accent-hover: #e2bcfa; --accent-soft: #3c2c48; }
.set-board, .set-demo { --set-red: #b82940; --set-green: #087447; --set-purple: #7841a3; --set-panel: #fffefa; --set-line: #bbc4c5; --set-accent: #794b99; --set-selected: #f0e7f6; }
[data-theme="dark"] .set-board, [data-theme="dark"] .set-demo { --set-red: #ff8599; --set-green: #64dca4; --set-purple: #c89aff; --set-panel: #202c33; --set-line: #52616a; --set-accent: #d0a2ee; --set-selected: #3c2c48; }
.board.set-board, .watch-board.set-board { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); grid-template-rows: none; gap: 9px; padding: 0; background: transparent; border: 0; border-radius: 0; aspect-ratio: auto; width: 100%; height: auto; box-shadow: none; touch-action: manipulation; overflow: visible; }
.set-board .set-card { position: relative; display: grid; place-items: center; width: 100%; min-width: 0; height: auto; min-height: 0; aspect-ratio: 1.38; padding: 9px 7px; border: 2px solid var(--set-line); border-radius: 3px; background: var(--set-panel); box-shadow: none; touch-action: manipulation; cursor: pointer; user-select: none; -webkit-user-select: none; }
.set-board .set-card[hidden] { display: none !important; }
.set-board .set-card svg, .set-demo svg { width: 100%; height: 100%; display: block; pointer-events: none; overflow: visible; }
.set-board .set-card.set-selected { border-color: var(--set-accent); box-shadow: inset 0 0 0 1px var(--set-accent); background: var(--set-selected); }
.set-board .set-card.set-invalid, .set-board .set-card.watch-conflict { border-color: #d4524a; outline: 1px solid #d4524a; }
.set-board .set-card:disabled { opacity: 1; cursor: default; }
.set-board .set-card:focus-visible { outline: 3px solid var(--set-accent); outline-offset: 2px; z-index: 2; }
.set-board .set-card.hint-target { border-color: var(--set-green); box-shadow: inset 0 0 0 1px var(--set-green); }
.set-board .set-card.hint-target::after { display: none; }
.set-selection-badge { display: none; position: absolute; top: 3px; right: 3px; width: 19px; height: 19px; text-align: center; line-height: 19px; font-size: 11px; font-weight: 800; color: var(--set-panel); background: var(--set-accent); border-radius: 2px; }
.set-selected .set-selection-badge { display: block; }
.set-color-name { display: none; position: absolute; bottom: 3px; font-size: 10px; color: var(--text-dim); }
.set-color-labels .set-color-name { display: block; }
.set-color-labels .set-card { padding-bottom: 17px; }
.set-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0; }
.set-progress { display: flex; flex-direction: column; gap: 3px; font-size: 14px; }
.set-progress span { font-size: 12px; color: var(--text-dim); }
.set-tools button { min-height: 44px; }
.set-complete .set-card { border-color: var(--set-green); }
.set-demo { display: flex; gap: 7px; max-width: 330px; }
.set-demo > span { width: 100%; aspect-ratio: 1.4; padding: 7px; background: var(--set-panel); border: 1px solid var(--set-line); border-radius: 2px; }
.set-watch-progress { padding: 8px 0; font-size: 12px; font-weight: 700; text-align: center; }
.watch-board.set-board { gap: 5px; }
.watch-board.set-board .set-card { padding: 5px 3px; cursor: default; }
@media (max-width: 600px) { .board.set-board, .watch-board.set-board { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; } }

.watch-board-slot:has(> .set-board) { aspect-ratio: auto; background: transparent; box-shadow: none; }
.watch-board-slot > .watch-board.set-board { position: relative; inset: auto; height: auto; }

.watch-board.set-board.set-color-labels .set-card { aspect-ratio: .9; padding-bottom: 19px; }
.watch-board.set-board .set-card > svg { position: static; inset: auto; min-height: 0; }
@media (max-width: 720px) {
  [data-game="set"] .watch-conflict-badge { font-size: 8px; }
  [data-game="set"] .watch-conflict-badge::after { content: none; }
}