:root {
      --bg: #0b0f14;
      --panel: #121821;
      --muted: #8aa0b3;
      --accent: #4aa3ff;
      --good: #46d37d;
      --warn: #ffcc66;
      --bad: #ff6b6b;
      --white: #f7f7f7;
      --black: #1a1a1a;
    }
    html, body { height: 100%; overflow: hidden; }
    @media (max-width: 980px) {
      html, body {
        height: auto;
        min-height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
      }
    }
    body {
      margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
      background: radial-gradient(1200px 800px at 70% -10%, #12202f, var(--bg));
      color: #d8e2ec;
      display: grid; place-items: center;
    }
    .app {
      width: min(1600px, 100%);
      box-sizing: border-box;
      display: grid;
      grid-template-columns: 340px repeat(3, 1fr) 340px;
      grid-auto-rows: min-content;
      gap: 28px;
      align-items: start; /* laisse le plateau définir sa hauteur via aspect-ratio */
      padding: 24px;
    }
.board-wrap {
  background: linear-gradient(180deg, #121821, #0f141c);
  border: 1px solid #1f2a36; border-radius: 16px; padding: 20px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  box-sizing: border-box; max-width: 100%; width: 100%; overflow: hidden;
}
.panel {
  background: linear-gradient(180deg, #121821, #0f141c);
  border: 1px solid #1f2a36; border-radius: 16px; padding: 16px; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  min-width: 0;
}
    .panel.side { position: relative; top: auto; height: auto; max-height: 100%; overflow: auto; align-self: stretch; transition: box-shadow .2s ease, border-color .2s ease; }
    .panel.side.active { border-color: #355179; box-shadow: 0 0 0 2px rgba(74,163,255,.35) inset, 0 6px 24px rgba(74,163,255,.18); }
    /* Légère séparation supplémentaire avec le plateau: gérée par grid gap */
    .panel.global { grid-column: 1 / -1; }
    .panel .head { display:flex; align-items:center; gap:24px; }
    /* Décale le sous-titre sous le libellé, pas sous la pastille */
    .panel .head + .sub { display:block; margin-left: 0; margin-top: 6px; }
    .stone { width: 16px; height: 16px; border-radius: 50%; display:inline-block; border: 2px solid #2a3b4c; }
    .stone.white { background: var(--white); border-color: #c8d1db; }
    .stone.black { background: var(--black); border-color: #000; }
    .onturn { color: var(--good); font-weight: 700; }
    .reserve { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .reserve .stone { width: 20px; height: 20px; }
    /* Répartit les pions sur une seule ligne, alignés à gauche sous le label */
    .reserve-row .reserve {
      flex-basis: auto;
      margin-left: 0;
      align-self: flex-start;
      flex-wrap: nowrap;
      overflow-x: auto;
      scrollbar-width: thin;
    }
    /* Visuel pour les pions capturés */
    .reserve.captured .stone { opacity: .5; filter: grayscale(20%); }
    /* Plateau et dashboards sur la même ligne (ligne 2) */
.board-span { grid-column: 2 / 5; grid-row: 2; justify-self: center; align-self: center; min-width: 0; }
    #panel-left { grid-column: 1; grid-row: 2; }
    #panel-right { grid-column: 5; grid-row: 2; }
    /* Positionnement grille pour colonnes 2/3/4 */
    .col2 { grid-column: 2; }
    .col3 { grid-column: 3; }
    .col4 { grid-column: 4; }
    /* Boutons côte à côte, occupant chacun 1/3 de la largeur du plateau */
    .btn.col2 { width: 100%; }
    .btn.col3 { width: 100%; }
    .btn.col4 { width: 100%; }
    /* Lignes dédiées boutons haut/bas */
    .top { grid-row: 1; }
    .bottom { grid-row: 3; }
    .panel h2 { margin: 0 0 8px; font-size: clamp(18px, 1.8vw, 20px); color: #e7eef6; }
    .sub { color: var(--muted); font-size: clamp(13px, 1.5vw, 14px); }
    .sub[title] { cursor: help; }
    .row { display: flex; align-items: center; gap: 12px; margin: 10px 0; flex-wrap: wrap; }
    .tag { font-size: clamp(12px, 1.3vw, 13px); padding: 7px 12px; border-radius: 999px; background: #0e1420; border: 1px solid #223246; color: #a9bed3; }
    .btn { appearance: none; border: 1px solid #223246; background: #0e1420; color: #e7eef6; padding: 12px 14px; border-radius: 10px; cursor: pointer; font-weight: 600; box-sizing: border-box; font-size: 15px; }
    .btn:hover { border-color: #355179; }
    .btn:disabled { opacity: .5; cursor: not-allowed; }
    .btn.bad { border-color: #5d2a2a; color: #ffd6d6; background: #1a0f10; }
    .btn.good { border-color: #245a3f; color: #d5ffe8; background: #0f1713; }
    .divider { height: 1px; background: #1f2a36; margin: 12px 0; border-radius: 999px; }
    .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 13px; }

    .toast { margin-top: 8px; font-size: 14px; color: #d7e7ff; }
    .toast strong { color: #fff; }

    /* SVG helpers */
    .line { stroke: #314354; stroke-width: 2; }
    .node { cursor: pointer; }
    .node .hit { fill: transparent; cursor: pointer; }
    .node .dot { stroke: #2a3b4c; stroke-width: 2; }
    .node[data-empty="true"] .dot { fill: #162030; }
    .node[data-p="1"] .dot { fill: var(--white); stroke: #c8d1db; }
    .node[data-p="2"] .dot { fill: var(--black); stroke: #000; }
    .node[data-sel="true"] .dot { stroke: var(--accent); stroke-width: 4; }
    .node[data-legal="true"] .dot { filter: drop-shadow(0 0 6px rgba(74,163,255,.8)); }
    .node[data-cap="true"] .dot { filter: drop-shadow(0 0 6px rgba(255,107,107,.85)); }
    .node[data-inmill="true"] .ring { stroke: var(--good); stroke-width: 3; }
    /* Glow bref lors de la pose */
    .node[data-placed="true"] .dot { animation: placedGlow .5s ease-out; }
    @keyframes placedGlow {
      0% { filter: drop-shadow(0 0 0 rgba(74,163,255,0)); stroke-width: 4; }
      40% { filter: drop-shadow(0 0 14px rgba(74,163,255,.95)); stroke-width: 5; }
      100% { filter: none; stroke-width: 2; }
    }
    /* Glow bref rouge pour capture */
    .overlay { pointer-events: none; }
    
    /* Fit for short-wide (low height) displays */
@media (max-height: 860px) {
  .app {
    height: 100dvh;
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
    overflow: hidden;
  }
  .panel { padding: 10px; }
  .panel.side { height: 100%; max-height: 100%; }
  .btn.top { height: 36px; font-size: 14px; }
  #color-picker { height: 36px; margin: 0; }
  #color-picker .btn.sm { height: 36px; padding: 0 10px; }
  .board-span { align-self: stretch; }
  .board-wrap {
    height: 100%;
    aspect-ratio: 1;
    max-height: 100%;
    width: auto;
    margin: 0 auto;
    padding: 10px;
  }
  /* Right dashboard: keep scroll behavior but hide the bar visually */
  #panel-right { -ms-overflow-style: none; scrollbar-width: none; }
  #panel-right::-webkit-scrollbar { width: 0; height: 0; }
}
    .cap-ghost { animation: captureGlow .5s ease-out; }
    @keyframes captureGlow {
      0% { filter: drop-shadow(0 0 0 rgba(255,107,107,0)); stroke-width: 4; }
      40% { filter: drop-shadow(0 0 14px rgba(255,107,107,.95)); stroke-width: 5; }
      100% { filter: none; stroke-width: 2; }
    }

    .banner { margin: 10px 0; padding: 10px 12px; border-radius: 12px; border: 1px dashed #2a3a4e; background: #0c131d; color: #bbcbdd; font-size: 13px; }
    .banner b { color: #dfeaf6; }
    /* Pulse vert pour changements de phase */
    .pulse-green { animation: phasePulse 5s ease-out; }
    @keyframes phasePulse {
      0% { box-shadow: 0 0 0 0 rgba(70,211,125,0); border-color: #223246; }
      25% { box-shadow: 0 0 18px 4px rgba(70,211,125,.35); border-color: rgba(70,211,125,.65); }
      60% { box-shadow: 0 0 10px 2px rgba(70,211,125,.25); border-color: rgba(70,211,125,.45); }
      100% { box-shadow: none; border-color: #223246; }
    }

    .win {
      position: fixed; inset: 0; background: rgba(0,0,0,.65); display: none; place-items: center; z-index: 10; backdrop-filter: blur(2px);
    }
    .win.show { display: grid; }
    .card { background: #0f141c; border: 1px solid #233449; border-radius: 16px; padding: 18px; width: min(520px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.55); text-align: center; }
    .card h3 { margin: 0 0 8px; }
    /* Centrage des contrôles et halo de sélection pour l'écran de fin */
    .win .row { justify-content: center; }
    .win .card { border-color: #355179; box-shadow: 0 0 0 2px rgba(74,163,255,.35) inset, 0 12px 40px rgba(74,163,255,.25), 0 0 24px rgba(74,163,255,.2); }
    /* Light mode overrides for end-game modal (lisible et cohérent) */
    :root[data-theme="light"] .win { background: rgba(0,0,0,.35); backdrop-filter: blur(2px); }
    :root[data-theme="light"] .win .card {
      background: linear-gradient(180deg, #fff7ea, #f3e6d2);
      border-color: #d7c8b4;
      color: #1f262b;
      box-shadow: 0 0 0 2px rgba(215,200,180,.55) inset, 0 10px 28px rgba(0,0,0,.25);
    }
    :root[data-theme="light"] .win .card h3 { color: #0e1f2b; }
    :root[data-theme="light"] .win-result {
      border-color: rgba(31,38,43,.12);
      background: rgba(31,38,43,.03);
      color: #1f262b;
    }
    :root[data-theme="light"] .win-result.good {
      border-color: rgba(78,140,100,.34);
      color: #2f7e58;
      background: rgba(78,140,100,.08);
    }
    :root[data-theme="light"] .win-result.bad {
      border-color: rgba(176,64,64,.30);
      color: #b44f4f;
      background: rgba(176,64,64,.08);
    }
    :root[data-theme="light"] .win-result.warn {
      border-color: rgba(169,120,54,.30);
      color: #926628;
      background: rgba(169,120,54,.08);
    }

    .hist { font-size: 12px; color: #a8bacb; max-height: 140px; overflow: auto; padding-right: 6px; }
    .hist div { padding: 2px 0; }
    .hist b { color: #e7eef6; }

    .small { font-size: 12px; color: var(--muted); }
    /* Règles — lisibilité */
    #rules .card { width: min(1000px, 96vw); padding: 24px; }
    #rules h3 { font-size: 24px; margin: 0 0 10px; }
    /* Améliore la visibilité du titre en light mode */
    :root[data-theme="light"] #rules h3 {
      color: #0e1f2b;
    }
    /* Légère mise en valeur en dark */
    :root:not([data-theme="light"]) #rules h3 { color: #eaf2ff; }
    .rules-body { font-size: 16px; line-height: 1.75; color: #cfd9e3; padding: 8px 4px; }
    .rules-body ul { margin: 14px 0 0 22px; padding: 0; }
    .rules-body li { margin: 12px 0; }
    :root[data-theme="light"] .rules-body { color: #1f262b; }
    /* Light mode style for rules modal card */
    :root[data-theme="light"] #rules .card {
      background: linear-gradient(180deg, #fff7ea, #f3e6d2);
      border-color: #d7c8b4;
      color: #1f262b;
      box-shadow: 0 0 0 2px rgba(215,200,180,.55) inset, 0 10px 28px rgba(0,0,0,.25);
    }
    /* Contrôles de mode au-dessus du plateau */
    .ctrl { display:flex; justify-content:center; align-items:center; gap:10px; margin-bottom: 8px; }
    /* Place color picker in the top row, left column, aligned with top buttons */
    #color-picker { grid-column: 1; grid-row: 1; margin: 0; height: 40px; align-self: center; }
    
    /* Color picker buttons: center label and equalize sizes */
    #color-picker .btn.sm { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-width: 80px; line-height: 1; column-gap: 4px; padding: 0 12px; height: 40px; }
    #color-picker .btn.sm .label { grid-column: 1; justify-self: start; line-height: 1; }
    #color-picker .btn.sm .stone { grid-column: 3; justify-self: end; align-self: center; margin: 0; }
    .btn.sm { padding: 6px 10px; font-size: 13px; }
    .btn.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74,163,255,.25) inset; }
    .toolbar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
    #top-tools { grid-template-columns: repeat(5, 1fr); }
    .toolbar.col4 { width: 100%; }
    .toolbar .btn { width: 100%; }
    .btn.icon { width: auto; padding: 0 12px; font-size: 16px; }
    .btn.icon svg { width: 18px; height: 18px; display: block; fill: currentColor; margin: 0 auto; }
    /* Mute icon slightly larger */
    #btn-mute svg { width: 22px; height: 22px; }
    /* Uniformiser et compacter la rangée du haut */
    .top { height: 40px; }
    .btn.top { padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
    .toolbar.top { align-items: stretch; }
    .toolbar.top .btn { height: 100%; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; }
    .btn.icon.sel { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(74,163,255,.25) inset; }
    /* Range slider (AI speed) styled to match theme */
    #ai-speed, #ai-diff, input[id^="clock-limit-"] { -webkit-appearance: none; appearance: none; height: 8px; background: linear-gradient(180deg, #0e1420, #0b0f14); border: 1px solid #223246; border-radius: 999px; box-shadow: inset 0 1px 1px rgba(0,0,0,.35); }
    #ai-speed:focus, #ai-diff:focus, input[id^="clock-limit-"]:focus { outline: none; }
    #ai-speed::-webkit-slider-runnable-track, #ai-diff::-webkit-slider-runnable-track, input[id^="clock-limit-"]::-webkit-slider-runnable-track { height: 8px; background: transparent; border: 0; border-radius: 999px; }
    #ai-speed::-webkit-slider-thumb, #ai-diff::-webkit-slider-thumb, input[id^="clock-limit-"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; margin-top: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid #1f2a36; box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(74,163,255,.25) inset; cursor: pointer; }
    #ai-speed::-moz-range-track, #ai-diff::-moz-range-track, input[id^="clock-limit-"]::-moz-range-track { height: 8px; background: transparent; border: 0; border-radius: 999px; }
    #ai-speed::-moz-range-thumb, #ai-diff::-moz-range-thumb, input[id^="clock-limit-"]::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); border: 2px solid #1f2a36; box-shadow: 0 2px 6px rgba(0,0,0,.35), 0 0 0 2px rgba(74,163,255,.25) inset; cursor: pointer; }
    /* Light theme adjustments */
    :root[data-theme="light"] #ai-speed, :root[data-theme="light"] #ai-diff, :root[data-theme="light"] input[id^="clock-limit-"] {
      background: linear-gradient(180deg, #efe6d6, #e7dbc6);
      border-color: #d7c8b4;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.12);
    }
    :root[data-theme="light"] #ai-speed::-webkit-slider-thumb,
    :root[data-theme="light"] #ai-speed::-moz-range-thumb,
    :root[data-theme="light"] #ai-diff::-webkit-slider-thumb,
    :root[data-theme="light"] #ai-diff::-moz-range-thumb,
    :root[data-theme="light"] input[id^="clock-limit-"]::-webkit-slider-thumb,
    :root[data-theme="light"] input[id^="clock-limit-"]::-moz-range-thumb {
      background: #5fa0ff; /* plus doux en clair */
      border-color: #cbbba6;
      box-shadow: 0 2px 5px rgba(0,0,0,.18), 0 0 0 2px rgba(215,200,180,.45) inset;
    }
    :root[data-theme="light"] #ai-speed:focus::-webkit-slider-thumb,
    :root[data-theme="light"] #ai-diff:focus::-webkit-slider-thumb,
    :root[data-theme="light"] input[id^="clock-limit-"]:focus::-webkit-slider-thumb {
      box-shadow: 0 2px 5px rgba(0,0,0,.2), 0 0 0 3px rgba(74,163,255,.25) inset;
    }
    /* Pulse vert temporaire pour mettre en avant le bouton Règles */
    @keyframes pulseg { 0%,100%{ box-shadow: 0 0 0 2px rgba(47,191,113,.25) inset, 0 0 8px rgba(47,191,113,.35); } 50%{ box-shadow: 0 0 0 3px rgba(47,191,113,.35) inset, 0 0 14px rgba(47,191,113,.55); } }
    .pulse-green { border-color: #2fbf71 !important; animation: pulseg 1s ease-in-out infinite; }
    /* (ancienne pastille au-dessus du centre retirée) */
    /* Thème clair */
    /* Thème clair (beige) */
    :root[data-theme="light"] { --bg: #f4ead7; --panel: #fff7ea; --muted: #6b6a64; }
    :root[data-theme="light"] body { background: radial-gradient(1200px 800px at 70% -10%, #f7f0e2, var(--bg)); color: #1f262b; }
    :root[data-theme="light"] .board-wrap, :root[data-theme="light"] .panel { background: linear-gradient(180deg, #fff7ea, #f3e6d2); border-color: #e2d6c4; }
    :root[data-theme="light"] .line { stroke: #b9aa94; }
    /* Cases (intersections) en clair: ni blanches ni noires pour contraster avec les pions */
    :root[data-theme="light"] .node .dot { stroke: #b9aa94; }
    :root[data-theme="light"] .node[data-empty="true"] .dot { fill: #eadcc6; }
    /* Lisibilité UI (boutons, tags, textes) en light */
    :root[data-theme="light"] .btn { background: #f6efe2; border-color: #cdbfa9; color: #2a2a2a; }
    :root[data-theme="light"] .btn:hover { border-color: #b8a78d; }
    :root[data-theme="light"] .btn:disabled { opacity: .6; }
    :root[data-theme="light"] .btn.good { background: #eaf5ee; border-color: #b8ddc8; color: #215c3c; }
    :root[data-theme="light"] .btn.bad { background: #faecec; border-color: #e0b3b3; color: #6b2b2b; }
    :root[data-theme="light"] .tag { background: #efe6d6; border-color: #d8c9b1; color: #3b3a35; }
    :root[data-theme="light"] .panel h2 { color: #1f262b; }
    :root[data-theme="light"] .sub, :root[data-theme="light"] .small { color: var(--muted); }
    :root[data-theme="light"] .hist { color: #4a4a4a; }
    :root[data-theme="light"] .hist b { color: #1f262b; }
    :root[data-theme="light"] .toast { color: #2f3a46; }

    /* High-contrast theme (bright board, strong outlines) */
    /* Wood theme: traditional board look for high readability */
    

    /* === Quick wins: contrast, halo, cursors, capture mode, hover dot === */
    :root { --accent: #6ca5ff; }
    .line { stroke: #3A4A5C; stroke-width: 2; transition: filter .15s ease; }
    .line.mill-glow { filter: drop-shadow(0 0 6px rgba(108,165,255,.9)); }
    .node[data-legal="true"] .dot { filter: drop-shadow(0 0 6px rgba(108,165,255,.9)); }
    /* hover indicator disabled */
    .node .hover-dot { display: none; }
    .board-wrap { aspect-ratio: 1 / 1; }
    /* =================== Responsive =================== */
    @media (max-width: 1200px) {
      .app { grid-template-columns: 300px repeat(3, 1fr) 300px; gap: 22px; }
      .panel { padding: 18px; }
    }
    @media (max-width: 980px) {
      .app { grid-template-columns: 1fr; gap: 16px; padding: 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
      .board-span, #panel-left, #panel-right { grid-column: 1; grid-row: auto; }
      .col2, .col3, .col4 { grid-column: 1; }
      /* Mobile: match shorter top height */
      #color-picker { margin: 0; }
      
      .top, .bottom { grid-row: auto; }
      .toolbar { grid-template-columns: repeat(4, 1fr); }
      #top-tools { grid-template-columns: repeat(5, 1fr); }
      .panel { padding: 14px; }
      .panel .head { gap: 16px; }
      .reserve .stone { width: 18px; height: 18px; }
    }
    @media (max-width: 640px) {
      .btn.top { height: 38px; font-size: 14px; }
      #color-picker .btn.sm { height: 38px; }
      .btn { padding: 10px 12px; font-size: 14px; }
      .reserve .stone { width: 16px; height: 16px; }
      .stone { width: 14px; height: 14px; }
      .panel .head { gap: 14px; }
    }
    .cap .node .dot { opacity: .4; }
    .cap .node[data-cap="true"] .dot { opacity: 1; }
    @keyframes nudge { 0%{ transform: translate(0,0);} 25%{ transform: translate(1px,0);} 50%{ transform: translate(0,0);} 75%{ transform: translate(-1px,0);} 100%{ transform: translate(0,0);} }
    .node[data-shake="true"] .dot { animation: nudge 80ms linear 2; }
    .panel.side.active { border-color: #355179; box-shadow: 0 0 0 2px rgba(108,165,255,.35) inset; animation: pulse 1.6s ease-in-out infinite; }
    @keyframes pulse { 0%,100%{ box-shadow: 0 0 0 2px rgba(108,165,255,.25) inset;} 50%{ box-shadow: 0 0 0 3px rgba(108,165,255,.35) inset;} }
    svg.turn-1 .node[data-p="1"] .hit { cursor: grab; }
    svg.turn-2 .node[data-p="2"] .hit { cursor: grab; }
    svg[data-phase="placement"] .node[data-empty="true"] .hit { cursor: pointer; }
    svg .node[data-legal="true"] .hit { cursor: move; }
    svg[data-phase="saut"] .node[data-empty="true"] .hit { cursor: alias; }
    /* === 2026 UI layer: menu / online / transitions === */
    :root {
      --bg-2: #091018;
      --panel-2: rgba(18, 24, 33, 0.72);
      --line-soft: rgba(138, 160, 179, 0.18);
      --shadow-xl: 0 18px 60px rgba(0, 0, 0, .35);
      --glass: blur(14px);
    }
    body {
      font-family: "Space Grotesk", "Segoe UI", Roboto, system-ui, sans-serif;
      background:
        radial-gradient(1100px 700px at 90% -10%, rgba(74,163,255,.14), transparent 55%),
        radial-gradient(900px 520px at -10% 100%, rgba(70,211,125,.08), transparent 58%),
        linear-gradient(180deg, #080b11, #0a1018 48%, #070b10);
    }
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      opacity: .22;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: radial-gradient(circle at 50% 40%, #000 50%, transparent 100%);
    }
    .app {
      animation: appFade .24s ease-out;
    }
    @keyframes appFade {
      from { opacity: 0; transform: translateY(8px) scale(.995); }
      to { opacity: 1; transform: none; }
    }
    .panel, .board-wrap, .card {
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
      border-color: rgba(255,255,255,.08);
      box-shadow: var(--shadow-xl);
    }
    .btn {
      transition: transform .14s ease, border-color .16s ease, box-shadow .18s ease, background-color .18s ease, opacity .18s ease;
    }
    .btn:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(0,0,0,.18), 0 0 0 1px rgba(74,163,255,.15) inset;
    }
    .btn:active:not(:disabled) { transform: translateY(0) scale(.99); }
    .banner {
      border-style: solid;
      border-color: rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005)),
        rgba(12,19,29,.72);
    }
    .toast {
      min-height: 1.2em;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(9, 15, 24, .75);
      border: 1px solid rgba(255,255,255,.07);
      box-shadow: 0 10px 24px rgba(0,0,0,.22);
      animation: toastIn .16s ease-out;
    }
    @keyframes toastIn {
      from { opacity: 0; transform: translateY(4px); }
      to { opacity: 1; transform: none; }
    }
    .menu-shell {
      width: min(1180px, 100vw);
      min-height: min(880px, 100dvh);
      box-sizing: border-box;
      padding: 18px;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 14px;
      animation: appFade .22s ease-out;
    }
    .shell-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(10, 15, 23, .68);
      border: 1px solid rgba(255,255,255,.07);
      box-shadow: var(--shadow-xl);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
    }
    .brand {
      display: flex; align-items: center; gap: 12px;
    }
    .brand-logo {
      width: 38px; height: 38px; border-radius: 12px;
      background: radial-gradient(circle at 35% 30%, #84c4ff, #2b5a93 58%, #15233a);
      border: 1px solid rgba(255,255,255,.14);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 20px rgba(32,82,140,.25);
      position: relative;
    }
    .brand-logo::after {
      content: "";
      position: absolute; inset: 10px;
      border-radius: 999px;
      border: 2px solid rgba(255,255,255,.85);
      box-shadow: 0 0 0 2px rgba(74,163,255,.35);
    }
    .brand h1 {
      margin: 0;
      font-size: clamp(18px, 2vw, 22px);
      letter-spacing: .01em;
    }
    .brand .sub { margin-top: 2px; }
    .screen-panel {
      background: rgba(10, 15, 23, .62);
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 18px;
      box-shadow: var(--shadow-xl);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
      overflow: hidden;
    }
    .menu-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 16px;
      padding: 16px;
      height: 100%;
      box-sizing: border-box;
    }
    .menu-card {
      background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 16px;
      padding: 16px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
    }
    .mode-list { display: grid; gap: 12px; }
    .mode-btn {
      text-align: left;
      padding: 14px 14px;
      border-radius: 14px;
      background: rgba(9, 14, 21, .74);
      border: 1px solid rgba(255,255,255,.06);
      display: grid; gap: 4px;
    }
    .mode-btn strong { font-size: 15px; }
    .mode-btn span { color: var(--muted); font-size: 13px; }
    .mode-btn:hover { border-color: rgba(74,163,255,.38); box-shadow: 0 0 0 1px rgba(74,163,255,.14) inset, 0 10px 28px rgba(74,163,255,.08); }
    .hero {
      min-height: 240px;
      display: grid; align-content: space-between;
      background:
        radial-gradient(520px 220px at 72% 10%, rgba(74,163,255,.16), transparent 65%),
        radial-gradient(400px 160px at 18% 88%, rgba(70,211,125,.11), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
    }
    .hero h2 { margin: 0; font-size: clamp(24px, 3vw, 34px); line-height: 1.05; }
    .hero p { margin: 8px 0 0; color: #b7c7d8; max-width: 55ch; }
    .stats-strip {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .stats-pill {
      padding: 10px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(6, 10, 16, .55);
      font-size: 12px;
      color: #bbcbdd;
    }
    .stats-pill b { display:block; font-size: 16px; color: #eff6ff; margin-top: 2px; }
    .online-grid {
      display: grid;
      grid-template-columns: minmax(320px, 420px) 1fr;
      gap: 16px;
      padding: 16px;
    }
    .field { display: grid; gap: 6px; margin-bottom: 10px; }
    .field label { font-size: 12px; color: #a8bbd0; }
    .input {
      width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(8, 12, 18, .75);
      color: #e7eef6;
      padding: 11px 12px;
      outline: none;
      transition: border-color .16s ease, box-shadow .16s ease;
    }
    .input:focus {
      border-color: rgba(74,163,255,.45);
      box-shadow: 0 0 0 3px rgba(74,163,255,.14);
    }
    .seg {
      display:flex; gap:8px; flex-wrap:wrap;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(6,10,16,.55);
    }
    .seg .btn {
      flex: 1;
      min-width: 120px;
      border-radius: 10px;
    }
    .list {
      display: grid; gap: 8px;
      max-height: 460px; overflow: auto;
      padding-right: 4px;
    }
    .lobby-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(8, 12, 18, .56);
      transition: border-color .16s ease, transform .12s ease;
    }
    .lobby-item:hover {
      border-color: rgba(74,163,255,.28);
      transform: translateY(-1px);
    }
    .lobby-meta { display:flex; gap:8px; flex-wrap:wrap; }
    .badge {
      font-size: 12px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.08);
      background: rgba(255,255,255,.03);
      color: #bfd0e2;
    }
    .badge.good { border-color: rgba(70,211,125,.3); color: #baf3cf; background: rgba(70,211,125,.08); }
    .badge.warn { border-color: rgba(255,204,102,.26); color: #ffe0a0; background: rgba(255,204,102,.08); }
    .badge.bad { border-color: rgba(255,107,107,.26); color: #ffc0c0; background: rgba(255,107,107,.08); }
    .lobby-stage {
      display:grid; gap: 14px;
      padding: 16px;
    }
    .player-slots {
      display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
    }
    .player-slot {
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(7,11,18,.6);
      min-height: 98px;
      display:grid; align-content:start; gap:6px;
    }
    .player-slot.joined {
      border-color: rgba(74,163,255,.3);
      box-shadow: inset 0 0 0 1px rgba(74,163,255,.1);
      animation: playerJoinPop .32s ease-out;
    }
    @keyframes playerJoinPop {
      0% { transform: scale(.98); opacity: .6; }
      100% { transform: none; opacity: 1; }
    }
    .online-status-bar {
      display:flex; gap:8px; flex-wrap:wrap; align-items:center;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(8,12,18,.6);
    }
    .loader {
      width: 16px; height: 16px;
      border-radius: 999px;
      border: 2px solid rgba(74,163,255,.24);
      border-top-color: rgba(74,163,255,.9);
      animation: spin .8s linear infinite;
      display: inline-block;
      vertical-align: middle;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .app-header {
      grid-column: 1 / -1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(9,14,22,.62);
      box-shadow: var(--shadow-xl);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
    }
    .app-header .head-left, .app-header .head-right {
      display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    }
    .app-header .title {
      font-weight: 700; letter-spacing: .01em;
    }
    .remote-play-flash {
      animation: remotePulse .55s ease-out;
    }
    @keyframes remotePulse {
      0% { box-shadow: 0 0 0 0 rgba(74,163,255,.0); }
      35% { box-shadow: 0 0 0 6px rgba(74,163,255,.16); }
      100% { box-shadow: 0 0 0 0 rgba(74,163,255,.0); }
    }
    .overlay-screen-fade {
      animation: screenFade .18s ease-out;
    }
    @keyframes screenFade {
      from { opacity: 0; transform: translateY(6px); }
      to { opacity: 1; transform: none; }
    }
    @media (max-width: 980px) {
      body { place-items: stretch; overflow: auto; }
      .menu-shell { width: 100%; min-height: 100dvh; padding: 10px; }
      .menu-grid, .online-grid { grid-template-columns: 1fr; padding: 10px; }
      .stats-strip { grid-template-columns: 1fr; }
      .player-slots { grid-template-columns: 1fr; }
      .shell-head { padding: 12px; }
      .hero { min-height: 180px; }
      .app-header { position: sticky; top: 0; z-index: 2; }
    }
    @media (prefers-reduced-motion: reduce) {
      .app, .menu-shell, .overlay-screen-fade, .toast, .player-slot.joined, .remote-play-flash { animation: none !important; }
      .loader { animation-duration: 1.6s; }
      .btn { transition: none; }
    }
    /* === Full game UI restructure (2026) === */
    .game-app {
      width: min(1700px, 100vw);
      height: 100dvh;
      padding: 14px;
      box-sizing: border-box;
      display: block;
      overflow: auto;
    }
    .game-shell-2026 {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 12px;
      min-height: calc(100dvh - 28px);
    }
    .game-header-bar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 12px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(500px 140px at 15% 0%, rgba(74,163,255,.12), transparent 70%),
        rgba(9,14,22,.66);
      box-shadow: var(--shadow-xl);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
    }
    .game-header-left { display: grid; gap: 8px; min-width: 0; }
    .game-kicker { display:flex; align-items:center; gap:10px; min-width:0; }
    .game-kicker .title {
      font-size: clamp(17px, 1.5vw, 20px);
      font-weight: 700;
      letter-spacing: .01em;
      white-space: nowrap;
    }
    .game-kicker .subtitle {
      color: #9fb4c9;
      font-size: 12px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .status-strip {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .status-strip .tag {
      background: rgba(255,255,255,.03);
      border-color: rgba(255,255,255,.07);
      color: #c1d1e2;
      padding: 6px 10px;
    }
    .game-header-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .game-toolbar-bar {
      display: grid;
      grid-template-columns: minmax(260px, auto) 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(9,14,22,.58);
      box-shadow: var(--shadow-xl);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
    }
    .mode-switch {
      display:flex;
      gap:8px;
      align-items:center;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(4,7,12,.42);
    }
    .mode-switch .btn {
      flex: 1;
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 14px;
    }
    .game-tools {
      display:flex;
      gap:8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .game-tools .btn.icon {
      min-width: 46px;
      height: 42px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 10px;
    }
    .inline-banner-stack {
      display:grid;
      gap: 8px;
    }
    .game-arena {
      display: grid;
      grid-template-columns: minmax(280px, 360px) minmax(0, 1fr) minmax(280px, 360px);
      gap: 12px;
      align-items: stretch;
      min-height: 0;
    }
    .game-side-wrap {
      min-width: 0;
      display: grid;
      align-content: start;
    }
    .game-center-wrap {
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 10px;
      min-height: 0;
    }
    .board-stage {
      border-radius: 18px;
      border: 1px solid rgba(255,255,255,.07);
      background:
        radial-gradient(520px 180px at 70% 0%, rgba(74,163,255,.10), transparent 72%),
        radial-gradient(540px 220px at 20% 100%, rgba(70,211,125,.06), transparent 70%),
        rgba(8, 12, 18, .62);
      box-shadow: var(--shadow-xl);
      padding: 10px;
      display: grid;
      align-items: stretch;
      min-height: 0;
    }
    .board-stage .board-wrap {
      height: 100%;
      min-height: 520px;
      border-radius: 14px;
      background:
        radial-gradient(450px 140px at 50% -10%, rgba(255,255,255,.035), transparent 70%),
        linear-gradient(180deg, rgba(13,19,28,.95), rgba(9,13,19,.95));
      border-color: rgba(255,255,255,.06);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02), 0 12px 30px rgba(0,0,0,.24);
    }
    .phase-rail {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .phase-step {
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(7, 11, 17, .55);
      color: #9fb4c9;
      font-size: 12px;
      display: grid;
      gap: 2px;
    }
    .phase-step b { color: #dbe8f6; font-size: 13px; }
    .phase-step.active {
      border-color: rgba(74,163,255,.35);
      background: linear-gradient(180deg, rgba(74,163,255,.10), rgba(74,163,255,.04));
      box-shadow: inset 0 0 0 1px rgba(74,163,255,.10);
      color: #d4e7fb;
    }
    .phase-step.capture {
      border-color: rgba(255,107,107,.28);
      background: linear-gradient(180deg, rgba(255,107,107,.08), rgba(255,107,107,.03));
    }
    .game-footer-dock {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,.07);
      background: rgba(9,14,22,.58);
      box-shadow: var(--shadow-xl);
      backdrop-filter: var(--glass);
      -webkit-backdrop-filter: var(--glass);
    }
    .dock-actions {
      display:flex;
      gap:8px;
      flex-wrap: wrap;
    }
    .dock-actions .btn {
      min-height: 42px;
      border-radius: 12px;
    }
    .dock-note {
      justify-self: end;
      color: #9fb4c9;
      font-size: 12px;
      text-align: right;
    }
    .panel.side {
      position: static;
      top: auto;
      height: auto;
      max-height: none;
      overflow: hidden;
      border-radius: 18px;
      background:
        radial-gradient(420px 120px at 80% 0%, rgba(255,255,255,.03), transparent 75%),
        rgba(10, 15, 23, .66);
      border-color: rgba(255,255,255,.07);
      box-shadow: var(--shadow-xl);
      padding: 14px;
    }
    .panel.side .head {
      gap: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255,255,255,.05);
      margin-bottom: 8px;
    }
    .panel.side .head .stone {
      width: 18px;
      height: 18px;
      border-width: 2px;
    }
    .panel.side .row {
      margin: 8px 0;
    }
    .panel.side .tag {
      background: rgba(255,255,255,.025);
      border-color: rgba(255,255,255,.06);
    }
    .panel.side .divider {
      background: rgba(255,255,255,.05);
      margin: 10px 0;
    }
    .panel.side.active {
      border-color: rgba(74,163,255,.32);
      box-shadow:
        inset 0 0 0 1px rgba(74,163,255,.12),
        0 18px 44px rgba(0,0,0,.28),
        0 0 0 1px rgba(74,163,255,.10);
      animation: pulse 2s ease-in-out infinite;
    }
    .line {
      stroke: rgba(173, 201, 231, .34);
      stroke-width: 2.3;
    }
    .node[data-empty="true"] .dot {
      fill: #101a28;
      stroke: rgba(173, 201, 231, .18);
    }
    .node[data-legal="true"] .dot {
      filter: drop-shadow(0 0 9px rgba(74,163,255,.78));
      stroke: #72b7ff;
    }
    .node[data-cap="true"] .dot {
      filter: drop-shadow(0 0 10px rgba(255,107,107,.9));
      stroke: #ff7f7f;
    }
    .node[data-sel="true"] .dot {
      stroke: #7ac0ff;
      stroke-width: 4;
      filter: drop-shadow(0 0 10px rgba(74,163,255,.35));
    }
    @media (max-width: 1280px) {
      .game-arena {
        grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
        grid-template-areas:
          "center center"
          "left right";
      }
      .game-side-wrap.left { grid-area: left; }
      .game-side-wrap.right { grid-area: right; }
      .game-center-wrap { grid-area: center; }
      .board-stage .board-wrap { min-height: 480px; }
    }
    @media (max-width: 980px) {
      .game-app {
        padding: 8px;
        height: auto;
      }
      .game-shell-2026 {
        min-height: auto;
        gap: 8px;
      }
      .game-header-bar {
        grid-template-columns: 1fr;
        padding: 10px;
      }
      .game-header-right {
        justify-content: flex-start;
      }
      .game-toolbar-bar {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .game-tools {
        justify-content: flex-start;
      }
      .game-arena {
        grid-template-columns: 1fr;
        grid-template-areas: none;
      }
      .game-center-wrap {
        grid-template-rows: auto auto auto 1fr auto;
      }
      .game-side-wrap.left, .game-side-wrap.right, .game-center-wrap { grid-area: auto; }
      .phase-rail {
        grid-template-columns: 1fr;
      }
      .board-stage {
        padding: 8px;
      }
      .board-stage .board-wrap {
        min-height: 0;
      }
      .game-footer-dock {
        grid-template-columns: 1fr;
      }
      .dock-note {
        justify-self: start;
        text-align: left;
      }
      .dock-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dock-actions .btn:last-child {
        grid-column: 1 / -1;
      }
    }

    /* ============================================================
       REFERENCE SKIN (matched to /Users/robin/Downloads/index.html)
       Warm stone palette + editorial typography
    ============================================================ */
    :root {
      --bg: #0d0c0e;
      --panel: #17161b;
      --muted: #a09a94;
      --accent: #b8965c;
      --good: #4e8c64;
      --warn: #b8965c;
      --bad: #b04040;
      --white: #f0ece4;
      --black: #1a1820;
      --surface: #17161b;
      --surface-2: #1f1e24;
      --rim: #2c2b34;
      --rim-hi: #3d3c48;
      --gold: #b8965c;
      --gold-hi: #d4b07a;
      --gold-dim: #7a6339;
      --chalk: #e2ddd6;
      --chalk-dim: #a09a94;
      --stone: #6e6870;
      --danger: #b04040;
      --danger-hi: #d06060;
      --signal: #4e8c64;
      --signal-hi: #72b488;
      --shadow: 0 8px 32px rgba(0,0,0,.42);
      --shadow-sm: 0 2px 10px rgba(0,0,0,.28);
      --glass: none;
      --shadow-xl: 0 8px 32px rgba(0,0,0,.42);
    }
    html, body { overflow-x: hidden; }
    body {
      font-family: "Outfit", system-ui, sans-serif;
      color: var(--chalk);
      background:
        radial-gradient(900px 600px at 80% -5%, rgba(184,150,92,.06), transparent 60%),
        radial-gradient(700px 500px at -5% 95%, rgba(78,140,100,.04), transparent 55%),
        var(--bg);
    }
    body::before {
      content: "";
      position: fixed; inset: 0;
      pointer-events: none;
      opacity: .025;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
      background-size: 256px 256px;
      mask-image: none;
    }
    h1, h2, h3 {
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 500;
      letter-spacing: .01em;
    }
    .small, .tag, .badge, .panel-label, .panel-stat span, .footer-note, .dock-note {
      font-family: "JetBrains Mono", monospace;
    }

    .btn {
      border: 1px solid var(--rim);
      background: var(--surface);
      color: var(--chalk);
      border-radius: 8px;
      font-size: 13px;
      font-weight: 500;
      letter-spacing: .02em;
      box-shadow: none;
    }
    .btn:hover:not(:disabled) {
      border-color: var(--rim-hi);
      background: var(--surface-2);
      color: var(--chalk);
      box-shadow: var(--shadow-sm);
      transform: translateY(-1px);
    }
    .btn.sel {
      border-color: var(--gold);
      color: var(--gold-hi);
      background: rgba(184,150,92,.08);
      box-shadow: none;
    }
    .btn.good {
      background: var(--gold);
      border-color: var(--gold-hi);
      color: #0d0c0e;
      font-weight: 600;
    }
    .btn.good:hover:not(:disabled) {
      background: var(--gold-hi);
      border-color: var(--gold-hi);
      color: #0d0c0e;
    }
    .btn.bad {
      border-color: rgba(176,64,64,.4);
      color: #e08080;
      background: transparent;
    }
    .btn.bad:hover:not(:disabled) {
      border-color: var(--danger-hi);
      background: rgba(176,64,64,.1);
    }
    .btn.icon {
      width: 36px; height: 36px; padding: 0;
      border-radius: 8px;
    }
    .btn.icon svg { width: 17px; height: 17px; }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      font-size: 11px;
      padding: 4px 9px;
      border-radius: 4px;
      border: 1px solid var(--rim);
      background: var(--surface);
      color: var(--chalk-dim);
    }
    .tag b { color: var(--chalk); font-weight: 500; }
    .badge {
      font-size: 11px;
      padding: 3px 7px;
      border-radius: 4px;
      border: 1px solid var(--rim);
      color: var(--stone);
      background: var(--surface);
      letter-spacing: .03em;
    }
    .badge.good { border-color: rgba(78,140,100,.4); color: var(--signal-hi); background: rgba(78,140,100,.08); }
    .badge.warn { border-color: rgba(184,150,92,.4); color: var(--gold-hi); background: rgba(184,150,92,.08); }
    .badge.bad { border-color: rgba(176,64,64,.4); color: #d07070; background: rgba(176,64,64,.08); }
    .input {
      background: var(--bg);
      border: 1px solid var(--rim);
      border-radius: 8px;
      color: var(--chalk);
      font-size: 13px;
    }
    .input:focus {
      border-color: var(--gold);
      box-shadow: 0 0 0 3px rgba(184,150,92,.12);
    }
    .input::placeholder { color: var(--stone); }
    .divider { background: var(--rim); }
    .toast {
      color: var(--chalk-dim);
      background: rgba(13,12,14,.85);
      border: 1px solid var(--rim);
      border-radius: 6px;
      box-shadow: none;
    }

    .menu-shell {
      width: min(1120px, 100%);
      min-height: 100dvh;
      padding: 24px;
      gap: 20px;
    }
    .app.menu-app {
      width: 100% !important;
      max-width: none !important;
      display: grid !important;
      grid-template-columns: 1fr !important;
      grid-template-rows: auto !important;
      grid-auto-rows: auto !important;
      gap: 0 !important;
      padding: 0 !important;
      align-items: start !important;
      justify-items: center !important;
    }
    .shell-head {
      padding: 14px 18px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--rim);
      box-shadow: var(--shadow-sm);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .brand h1, .brand-name, .brand .brand-name {
      font-family: "Playfair Display", serif;
      font-size: 17px;
      font-weight: 500;
      color: var(--chalk);
    }
    .brand-logo {
      width: 34px; height: 34px;
      border-radius: 8px;
      background: var(--surface-2);
      border: 1px solid var(--rim-hi);
      box-shadow: none;
    }
    .brand-logo::after {
      inset: 9px;
      border: 1.5px solid var(--gold);
      box-shadow: none;
    }
    .screen-panel {
      background: var(--surface);
      border: 1px solid var(--rim);
      border-radius: 14px;
      box-shadow: var(--shadow);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .menu-card {
      background: transparent;
      border: 1px solid var(--rim);
      border-radius: 10px;
      box-shadow: none;
      padding: 16px;
    }
    .hero {
      background:
        radial-gradient(500px 280px at 60% 0%, rgba(184,150,92,.07), transparent 65%),
        var(--surface);
      border-radius: 10px;
    }
    .hero h2 {
      font-family: "Playfair Display", serif;
      font-size: clamp(34px, 5vw, 58px);
      line-height: 1.08;
      font-weight: 400;
      color: var(--chalk);
    }
    .hero p {
      color: var(--chalk-dim);
      font-size: 14px;
      line-height: 1.7;
      max-width: 40ch;
    }
    .stats-strip {
      gap: 1px;
      border: 1px solid var(--rim);
      border-radius: 10px;
      overflow: hidden;
      background: var(--rim);
    }
    .stats-pill {
      background: var(--surface-2);
      border: none;
      border-radius: 0;
      text-align: center;
      color: var(--stone);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: .06em;
      padding: 14px 12px;
    }
    .stats-pill b {
      font-family: "Playfair Display", serif;
      font-size: 22px;
      color: var(--gold);
      margin-top: 0;
      text-transform: none;
      letter-spacing: normal;
    }
    .mode-btn {
      background: var(--bg);
      border: 1px solid var(--rim);
      border-radius: 10px;
      padding: 16px 18px;
      transition: border-color .16s, background .16s, transform .12s;
    }
    .mode-btn:hover {
      border-color: var(--gold-dim);
      background: var(--surface-2);
      transform: translateX(3px);
      box-shadow: none;
    }
    .mode-btn strong { font-size: 14px; }
    .mode-btn strong { color: var(--chalk); }
    .mode-btn span { font-size: 12px; color: var(--stone); }

    .hub-games-block {
      margin-top: 14px;
      display: grid;
      gap: 10px;
    }
    .hub-section-title {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      color: var(--stone);
      letter-spacing: .06em;
      text-transform: uppercase;
    }
    .hub-game-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .hub-game-card {
      text-align: left;
      width: 100%;
      display: grid;
      gap: 6px;
      padding: 12px 12px;
      border-radius: 10px;
      border: 1px solid var(--rim);
      background: var(--bg);
      color: inherit;
      text-decoration: none;
      transition: border-color .16s, background .16s, transform .12s;
      cursor: pointer;
      box-sizing: border-box;
    }
    .hub-game-card:hover {
      border-color: var(--gold-dim);
      background: var(--surface-2);
      transform: translateY(-1px);
    }
    .hub-game-card:disabled {
      opacity: 1;
      cursor: default;
    }
    .hub-game-card.active {
      border-color: var(--gold);
      background:
        radial-gradient(220px 90px at 80% 0%, rgba(184,150,92,.08), transparent 70%),
        var(--surface-2);
      box-shadow: inset 0 0 0 1px rgba(184,150,92,.12);
    }
    .hub-game-card-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .hub-game-card strong {
      font-family: "Playfair Display", serif;
      font-weight: 500;
      font-size: 16px;
      color: var(--chalk);
    }
    .hub-game-card > span {
      font-size: 12px;
      color: var(--stone);
      line-height: 1.35;
    }

    .online-grid {
      grid-template-columns: 380px 1fr;
      height: 100%;
    }
    .online-grid > .menu-card:first-child {
      border-right: 1px solid var(--rim);
      border-radius: 0;
      border-top: none;
      border-left: none;
      border-bottom: none;
      padding: 28px;
    }
    .online-grid > .menu-card:last-child {
      border-radius: 0;
      border: none;
      padding: 28px;
    }
    .lobby-item {
      border: 1px solid var(--rim);
      border-radius: 10px;
      background: var(--bg);
      transition: border-color .16s, background .16s;
    }
    .lobby-item:hover {
      border-color: var(--rim-hi);
      background: var(--surface-2);
      transform: none;
    }
    .online-status-bar {
      border-radius: 8px;
      border: 1px solid var(--rim);
      background: var(--bg);
      color: var(--stone);
    }
    .online-clock-picker {
      border: 1px solid var(--rim);
      border-radius: 10px;
      background:
        radial-gradient(220px 80px at 88% 0%, rgba(184,150,92,.06), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.01), rgba(255,255,255,.002)),
        var(--bg);
      padding: 12px;
      display: grid;
      gap: 10px;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.015);
    }
    .online-clock-picker-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }
    .online-clock-picker-kicker {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--stone);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .online-clock-picker-value {
      border-radius: 999px;
      border: 1px solid rgba(184,150,92,.28);
      background: rgba(184,150,92,.08);
      color: var(--gold);
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: .03em;
      padding: 4px 8px;
      white-space: nowrap;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
    }
    .online-clock-slider-wrap {
      --online-clock-thumb-size: 16px;
      display: grid;
      gap: 8px;
    }
    .online-clock-slider {
      width: 100%;
      display: block;
      margin: 0;
      appearance: none;
      -webkit-appearance: none;
      accent-color: transparent;
      height: 18px;
      background: transparent;
      --online-clock-progress: 0%;
      cursor: pointer;
    }
    .online-clock-slider:focus { outline: none; }
    .online-clock-slider::-webkit-slider-runnable-track {
      height: 6px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.06);
      background:
        linear-gradient(rgba(184,150,92,.72), rgba(184,150,92,.72)) left center / var(--online-clock-progress) 100% no-repeat,
        rgba(255,255,255,.07);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
    }
    .online-clock-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: var(--online-clock-thumb-size);
      height: var(--online-clock-thumb-size);
      border-radius: 50%;
      margin-top: -6px;
      border: 1px solid rgba(255,255,255,.22);
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.38) 34%, rgba(0,0,0,.06) 36%, rgba(0,0,0,0) 52%),
        linear-gradient(180deg, rgba(236,220,188,.95), rgba(184,150,92,.95));
      box-shadow:
        0 0 0 1px rgba(184,150,92,.22),
        0 2px 8px rgba(0,0,0,.35);
      cursor: pointer;
      transition: transform .12s ease, box-shadow .12s ease;
    }
    .online-clock-slider:active::-webkit-slider-thumb {
      transform: scale(1.06);
      box-shadow:
        0 0 0 1px rgba(184,150,92,.35),
        0 3px 10px rgba(0,0,0,.42);
    }
    .online-clock-slider::-moz-range-track {
      height: 6px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.06);
      background: rgba(255,255,255,.07);
      box-shadow: inset 0 1px 2px rgba(0,0,0,.35);
    }
    .online-clock-slider::-moz-range-progress {
      height: 6px;
      border-radius: 999px;
      background: rgba(184,150,92,.72);
    }
    .online-clock-slider::-moz-range-thumb {
      width: var(--online-clock-thumb-size);
      height: var(--online-clock-thumb-size);
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,.22);
      background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.95), rgba(255,255,255,.38) 34%, rgba(0,0,0,.06) 36%, rgba(0,0,0,0) 52%),
        linear-gradient(180deg, rgba(236,220,188,.95), rgba(184,150,92,.95));
      box-shadow:
        0 0 0 1px rgba(184,150,92,.22),
        0 2px 8px rgba(0,0,0,.35);
      cursor: pointer;
    }
    .online-clock-slider-scale {
      position: relative;
      height: 12px;
      width: calc(100% - var(--online-clock-thumb-size));
      margin-left: calc(var(--online-clock-thumb-size) / 2);
      color: var(--stone);
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: .03em;
    }
    .online-clock-slider-scale span {
      position: absolute;
      left: calc((var(--tick, 0) / 4) * 100%);
      top: 0;
      transform: translateX(-50%);
      text-align: center;
      opacity: .9;
      white-space: nowrap;
      line-height: 12px;
      pointer-events: none;
    }
    .loader {
      width: 14px; height: 14px;
      border-radius: 50%;
      border: 2px solid rgba(184,150,92,.2);
      border-top-color: var(--gold);
    }
    .player-slot {
      border-radius: 12px;
      border: 1px solid var(--rim);
      background: var(--bg);
      min-height: 100px;
    }
    .player-slot.joined {
      border-color: rgba(184,150,92,.35);
      background: rgba(184,150,92,.04);
      box-shadow: none;
    }
    :root[data-theme="light"] .online-clock-picker {
      box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
    }
    :root[data-theme="light"] .online-clock-slider::-webkit-slider-runnable-track {
      background:
        linear-gradient(rgba(184,150,92,.9), rgba(184,150,92,.9)) left center / var(--online-clock-progress) 100% no-repeat,
        rgba(56,61,72,.12);
      border-color: rgba(56,61,72,.14);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
    }
    :root[data-theme="light"] .online-clock-slider::-moz-range-track {
      background: rgba(56,61,72,.12);
      border-color: rgba(56,61,72,.14);
      box-shadow: inset 0 1px 1px rgba(255,255,255,.35);
    }
    :root[data-theme="light"] .online-clock-slider::-moz-range-progress {
      background: rgba(184,150,92,.9);
    }
    :root[data-theme="light"] .online-clock-picker-value {
      background: rgba(184,150,92,.11);
      border-color: rgba(184,150,92,.36);
    }

    /* Game shell (map current markup to reference look) */
    .game-app {
      width: 100%;
      min-height: 100dvh;
      padding: 16px;
      display: block;
      height: auto;
      overflow: visible;
    }
    .app.game-app {
      width: 100% !important;
      max-width: none !important;
      display: block !important;
      grid-template-columns: none !important;
      grid-template-rows: none !important;
      gap: 0 !important;
      padding: 0 !important;
    }
    .game-shell-2026 {
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 12px;
      min-height: calc(100dvh - 32px);
    }
    .game-header-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 16px;
      border-radius: 10px;
      border: 1px solid var(--rim);
      background: var(--surface);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .game-header-left { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
    .game-kicker { display:flex; align-items:center; gap:10px; }
    .game-kicker .title {
      font-family: "Playfair Display", serif;
      font-size: 17px;
      font-weight: 500;
      color: var(--chalk);
    }
    .game-kicker .subtitle {
      font-size: 11px;
      color: var(--stone);
      letter-spacing: .04em;
    }
    .status-strip { display:flex; gap:6px; flex-wrap:wrap; }

    .game-toolbar-bar {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--rim);
      background: var(--surface);
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .mode-switch {
      display: flex; gap: 6px;
      padding: 4px;
      border-radius: 8px;
      border: 1px solid var(--rim);
      background: var(--bg);
    }
    .mode-switch .btn {
      border-radius: 6px;
      font-size: 12px;
      padding: 6px 12px;
      border-color: transparent;
      background: transparent;
      color: var(--chalk);
    }
    .mode-switch .btn.sel {
      border-color: var(--rim-hi);
      background: var(--surface-2);
      color: var(--chalk);
    }
    .game-tools { display:flex; gap:6px; }

    .game-arena {
      display: grid;
      grid-template-columns: 300px 1fr 300px;
      gap: 12px;
      align-items: stretch;
      min-height: 0;
    }
    .panel.side {
      background: var(--surface);
      border: 1px solid var(--rim);
      border-radius: 12px;
      padding: 16px;
      box-shadow: none;
      display: flex;
      flex-direction: column;
      gap: 0;
      transition: border-color .2s, box-shadow .2s;
      height: 100%;
      min-height: 0;
      overflow: auto;
    }
    .panel.side.active {
      border-color: rgba(184,150,92,.35);
      box-shadow: 0 0 0 1px rgba(184,150,92,.12), inset 0 0 0 1px rgba(184,150,92,.06);
      animation: pulse 2.5s ease-in-out infinite;
    }
    .panel.side .head {
      gap: 10px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--rim);
      margin-bottom: 12px;
    }
    .panel.side h2 {
      font-family: "Playfair Display", serif;
      font-size: 16px !important;
      font-weight: 500;
    }
    .panel.side .sub { color: var(--stone); font-size: 11px; }
    .panel.side .tag { background: var(--surface-2); border-color: var(--rim); }
    .panel.side .divider { background: var(--rim); margin: 12px 0; }
    .panel.side .small { font-size: 12px; color: var(--stone); }

    .game-center-wrap {
      min-width: 0;
      display: grid;
      grid-template-rows: auto auto 1fr auto;
      gap: 10px;
      min-height: 0;
    }
    .inline-banner-stack { display:grid; gap:8px; }
    .banner {
      padding: 10px 14px;
      border-radius: 8px;
      border: 1px solid var(--rim);
      background: var(--surface);
      font-size: 13px;
      color: var(--chalk-dim);
      box-shadow: none;
    }
    .banner b { color: var(--chalk); }
    .banner.remote-play-flash { animation: remoteFlash .5s ease-out; }
    .banner:has(b:first-child) {}
    .banner.capture, .cap .banner {}
    .phase-rail {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .phase-step {
      padding: 8px 12px;
      border-radius: 8px;
      border: 1px solid var(--rim);
      background: var(--surface-2);
      font-size: 11px;
      color: var(--stone);
    }
    .phase-step b { font-size: 13px; font-weight: 600; color: var(--chalk-dim); display: block; }
    .phase-step.active {
      border-color: rgba(184,150,92,.4);
      background: rgba(184,150,92,.06);
      color: var(--gold-dim);
      box-shadow: none;
    }
    .phase-step.active b { color: var(--gold-hi); }
    .phase-step.capture {
      border-color: rgba(176,64,64,.35);
      background: rgba(176,64,64,.06);
    }
    .phase-step.capture b { color: #d07070; }

    .board-stage {
      border-radius: 12px;
      border: 1px solid var(--rim);
      background: var(--surface);
      padding: 10px;
      min-height: 0;
      display: flex;
      align-items: stretch;
      box-shadow: none;
    }
    .board-stage .board-wrap,
    .board-wrap {
      width: 100%;
      aspect-ratio: 1;
      border-radius: 10px;
      background:
        radial-gradient(ellipse 80% 40% at 50% 0%, rgba(184,150,92,.04), transparent 70%),
        #111018;
      border: 1px solid var(--rim);
      overflow: hidden;
      box-shadow: none;
      padding: 0;
    }

    .line { stroke: #2c2c3c; stroke-width: 2; }
    .line.mill-glow { filter: drop-shadow(0 0 5px rgba(184,150,92,.9)); }
    .node .dot { stroke: #2c2c3c; stroke-width: 1.5; transition: filter .1s; }
    .node[data-empty="true"] .dot { fill: #1a192290; stroke: #3a3948; }
    .node[data-p="1"] .dot { fill: var(--white); stroke: #c8c4bc; }
    .node[data-p="2"] .dot { fill: var(--black); stroke: #0a0912; }
    .node[data-sel="true"] .dot { stroke: var(--gold); stroke-width: 3.5; filter: drop-shadow(0 0 6px rgba(184,150,92,.5)); }
    .node[data-legal="true"] .dot { filter: drop-shadow(0 0 8px rgba(184,150,92,.75)); stroke: var(--gold); }
    .node[data-cap="true"] .dot { filter: drop-shadow(0 0 10px rgba(176,64,64,.9)); stroke: var(--danger-hi); }
    .node[data-inmill="true"] .ring { stroke: var(--gold); stroke-width: 2.5; }
    .cap .node .dot { opacity: .3; }
    .cap .node[data-cap="true"] .dot { opacity: 1; }

    #color-picker { margin: 0 !important; }
    #color-picker .btn.sm { padding: 6px 12px; font-size: 12px; border-radius: 6px; height: auto; }

    .game-footer-dock {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 14px;
      border-radius: 10px;
      border: 1px solid var(--rim);
      background: var(--surface);
      flex-wrap: wrap;
      box-shadow: none;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .dock-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .dock-note {
      font-size: 11px;
      color: var(--stone);
      text-align: right;
    }

    /* Overlays: align current .win to reference .overlay look */
    .win {
      background: rgba(8,7,10,.72);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      z-index: 100;
      padding: 20px;
    }
    .win .card {
      width: min(480px, 100%);
      border-color: var(--rim-hi);
      text-align: center;
      background: var(--surface);
      box-shadow: var(--shadow);
      color: var(--chalk);
      border-radius: 14px;
    }
    .win .card h3 {
      font-family: "Playfair Display", serif;
      font-size: 22px;
      color: var(--chalk);
    }
    .win-result {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin: 2px auto 10px;
      padding: 6px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.10);
      background: rgba(255,255,255,.03);
      color: var(--chalk);
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      letter-spacing: .08em;
      text-transform: uppercase;
      line-height: 1;
    }
    .win-result.good {
      border-color: rgba(70,211,125,.34);
      color: #baf3cf;
      background: rgba(70,211,125,.10);
    }
    .win-result.bad {
      border-color: rgba(255,107,107,.30);
      color: #ffc0c0;
      background: rgba(255,107,107,.10);
    }
    .win-result.warn {
      border-color: rgba(255,204,102,.28);
      color: #ffe0a0;
      background: rgba(255,204,102,.10);
    }
    #rules .card {
      width: min(720px, 100%);
      text-align: left;
      background: var(--surface);
      border-color: var(--rim-hi);
    }
    #rules .card h3 { text-align: center; color: var(--chalk); }
    .rules-body {
      font-size: 14px;
      line-height: 1.75;
      color: var(--chalk-dim);
      max-height: 60vh !important;
      padding-right: 6px;
    }
    .rules-body b { color: var(--chalk); }

    @media (max-width: 1024px) {
      .game-arena {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "center center" "left right";
      }
      .game-side-wrap.left { grid-area: left; }
      .game-side-wrap.right { grid-area: right; }
      .game-center-wrap { grid-area: center; }
      .online-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
      .online-grid > .menu-card:first-child {
        border-right: none;
        border-bottom: 1px solid var(--rim);
      }
    }
    @media (max-width: 768px) {
      .menu-shell { padding: 14px; gap: 12px; }
      .game-app { padding: 10px; }
      .game-arena { grid-template-columns: 1fr; grid-template-areas: none; }
      .game-side-wrap.left, .game-side-wrap.right, .game-center-wrap { grid-area: auto; }
      .game-toolbar-bar { grid-template-columns: 1fr; gap: 8px; }
      .phase-rail { grid-template-columns: 1fr; }
      .player-slots { grid-template-columns: 1fr; }
      .board-stage { padding: 6px; }
      .game-footer-dock { display: grid; grid-template-columns: 1fr; }
      .dock-note { text-align: left; }
    }

    @keyframes remoteFlash {
      0% { box-shadow: 0 0 0 0 rgba(184,150,92,0); }
      25% { box-shadow: 0 0 0 4px rgba(184,150,92,.3); }
      100% { box-shadow: 0 0 0 0 rgba(184,150,92,0); }
    }

    /* ============================================================
       GAME ERGONOMY RE-LAYOUT (structure only)
       Top bar / compact player cards / primary center / bottom bar / drawer
    ============================================================ */
    .game-shell-2026 {
      grid-template-rows: auto auto 1fr auto;
      gap: 10px;
      min-height: calc(100dvh - 32px);
      height: calc(100dvh - 32px);
      position: relative;
    }
    .game-header-bar {
      display: grid;
      grid-template-columns: minmax(0, auto) 1fr auto;
      align-items: center;
      gap: 10px;
    }
    .game-header-left {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
    }
    .game-kicker {
      min-width: 0;
      gap: 8px;
    }
    .game-kicker .subtitle {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status-strip {
      justify-content: center;
      min-width: 0;
    }
    .status-strip .tag {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .game-header-right {
      display: flex;
      align-items: center;
      gap: 6px;
      justify-content: flex-end;
      flex-wrap: nowrap;
    }
    .game-top-icon-group {
      display: flex;
      align-items: center;
      gap: 6px;
      padding-left: 6px;
      margin-left: 2px;
      border-left: 1px solid var(--rim);
    }

    .player-strip {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      align-items: start;
    }
    .player-card-compact {
      border: 1px solid var(--rim);
      border-radius: 10px;
      background: var(--surface);
      padding: 10px 12px;
      min-width: 0;
    }
    .player-card-compact.active {
      border-color: rgba(184,150,92,.35);
      box-shadow: 0 0 0 1px rgba(184,150,92,.12), inset 0 0 0 1px rgba(184,150,92,.06);
    }
    .player-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
      min-width: 0;
    }
    .player-card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .player-card-title .stone {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .player-card-title b {
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 500;
      color: var(--chalk);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .player-card-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .player-mini-stat {
      border: 1px solid var(--rim);
      border-radius: 8px;
      background: var(--surface-2);
      padding: 7px 8px;
      min-width: 0;
    }
    .player-mini-stat .label {
      display: block;
      font-size: 10px;
      color: var(--stone);
      margin-bottom: 2px;
      white-space: nowrap;
    }
    .player-mini-stat .val {
      display: block;
      font-size: 12px;
      color: var(--chalk);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .game-main-layout {
      min-height: 0;
      height: 100%;
      display: grid;
      grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px);
      gap: 10px;
      align-items: stretch;
    }
    .game-main-layout .game-side-wrap {
      min-width: 0;
      min-height: 0;
      height: 100%;
      display: grid;
    }
    .game-main-layout .game-side-wrap > .panel.side {
      height: 100%;
      min-height: 0;
      align-self: stretch;
    }
    .primary-stack {
      min-width: 0;
      height: 100%;
      display: grid;
      grid-template-rows: auto auto 1fr auto auto;
      gap: 10px;
      min-height: 0;
    }
    .instruction-primary {
      margin: 0;
    }
    .instruction-primary .small {
      display: block;
      margin-top: 6px;
      font-family: "Outfit", system-ui, sans-serif;
    }
    .board-stage {
      min-height: 0;
      display: flex;
      align-items: stretch;
      justify-content: center;
    }
    .board-stage .board-wrap {
      width: min(100%, min(78dvh, 920px));
      min-height: 0;
      margin: 0 auto;
    }

    .game-footer-dock {
      position: sticky;
      bottom: 8px;
      z-index: 5;
      grid-template-columns: 1fr auto;
    }

    .details-drawer {
      position: fixed;
      top: 0;
      right: 0;
      width: min(460px, 92vw);
      height: 100dvh;
      z-index: 120;
      display: grid;
      grid-template-columns: 1fr;
      transform: translateX(104%);
      transition: transform .22s ease;
      pointer-events: none;
    }
    .details-drawer.open {
      transform: translateX(0);
      pointer-events: auto;
    }
    .details-drawer-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(8,7,10,.45);
      opacity: 0;
      pointer-events: none;
      transition: opacity .18s ease;
      z-index: 119;
    }
    .details-drawer-backdrop.show {
      opacity: 1;
      pointer-events: auto;
    }
    .details-drawer-panel {
      height: 100%;
      background: var(--surface);
      border-left: 1px solid var(--rim);
      box-shadow: var(--shadow);
      display: grid;
      grid-template-rows: auto auto 1fr;
      min-height: 0;
    }
    .details-drawer-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 12px 14px;
      border-bottom: 1px solid var(--rim);
    }
    .details-drawer-head h3 {
      font-size: 18px;
      color: var(--chalk);
    }
    .details-drawer-tools {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      padding: 10px 14px;
      border-bottom: 1px solid var(--rim);
    }
    .details-drawer-body {
      overflow: auto;
      padding: 12px;
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .details-panels {
      display: grid;
      gap: 12px;
    }
    .details-panels .panel.side {
      margin: 0;
      max-height: none;
      overflow: visible;
    }

    @media (max-width: 980px) {
      .game-shell-2026 {
        min-height: auto;
        height: auto;
      }
      .game-header-bar {
        grid-template-columns: 1fr;
        align-items: stretch;
      }
      .status-strip {
        justify-content: flex-start;
      }
      .game-header-right {
        justify-content: space-between;
        flex-wrap: wrap;
      }
      .player-strip {
        grid-template-columns: 1fr;
      }
      .game-main-layout {
        grid-template-columns: 1fr;
        height: auto;
      }
      .game-main-layout .game-side-wrap {
        order: 2;
        height: auto;
      }
      .game-main-layout .game-side-wrap .panel.side {
        height: auto;
      }
      .game-main-layout .primary-stack {
        order: 1;
        height: auto;
      }
      .board-stage .board-wrap {
        width: min(100%, 92vw);
      }
      .game-footer-dock {
        position: sticky;
        bottom: 4px;
      }
      .details-drawer {
        top: auto;
        bottom: 0;
        right: 0;
        width: 100%;
        height: min(80dvh, 760px);
        transform: translateY(104%);
      }
      .details-drawer.open {
        transform: translateY(0);
      }
      .details-drawer-panel {
        border-left: none;
        border-top: 1px solid var(--rim);
        border-top-left-radius: 14px;
        border-top-right-radius: 14px;
      }
    }
    @media (max-width: 640px) {
      .player-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .player-mini-stat {
        padding: 6px;
      }
      .player-mini-stat .label { font-size: 9px; }
      .player-mini-stat .val { font-size: 11px; }
      .game-header-right {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 8px;
        align-items: center;
      }
      .game-top-icon-group {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
      }
      .game-footer-dock {
        grid-template-columns: 1fr;
      }
      .dock-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dock-actions .btn:last-child {
        grid-column: 1 / -1;
      }
      .game-main-layout {
        gap: 8px;
      }
    }

    /* Ergonomic polish (same visual language, better readability) */
    .panel.side .reserve-row .reserve {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
      width: 100%;
      overflow: visible;
      flex-wrap: unset;
      justify-items: center;
      align-items: center;
      padding: 10px;
      border: 1px solid var(--rim);
      border-radius: 8px;
      background: rgba(0,0,0,.12);
      box-sizing: border-box;
    }
    .panel.side .reserve-row .reserve .stone {
      width: 20px;
      height: 20px;
      margin: 0;
    }
    .panel.side .reserve-row .reserve.captured .stone {
      opacity: .42;
    }
    .panel.side .reserve-row {
      width: 100%;
    }
    .panel.side .reserve-row > .sub {
      margin-bottom: 6px;
    }

    .primary-stack {
      gap: 12px;
    }
    .board-stage {
      padding: 14px;
    }
    .board-stage .board-wrap {
      width: min(100%, min(82dvh, 980px));
    }

    .line {
      stroke-width: 2.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      opacity: .95;
    }
    .node[data-empty="true"]:hover .dot {
      stroke: var(--gold);
      filter: drop-shadow(0 0 6px rgba(184,150,92,.35));
    }
    .node[data-p="1"]:hover .dot,
    .node[data-p="2"]:hover .dot {
      filter: drop-shadow(0 0 8px rgba(184,150,92,.16));
    }
    .node[data-sel="true"]:hover .dot,
    .node[data-cap="true"]:hover .dot,
    .node[data-legal="true"]:hover .dot {
      filter: unset;
    }

    @media (max-width: 980px) {
      .panel.side .reserve-row .reserve {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: 6px;
        padding: 8px;
      }
      .panel.side .reserve-row .reserve .stone {
        width: 18px;
        height: 18px;
      }
      .board-stage {
        padding: 10px;
      }
      .board-stage .board-wrap {
        width: min(100%, 94vw);
      }
    }
    @media (max-width: 640px) {
      .panel.side .reserve-row .reserve {
        grid-template-columns: repeat(9, minmax(0, 1fr));
      }
      .panel.side .reserve-row .reserve .stone {
        width: 16px;
        height: 16px;
      }
    }

    /* ============================================================
       Fresh UX Reset (game screen only) — cleaner ergonomics
    ============================================================ */
    .game-shell-2026 {
      grid-template-rows: auto 1fr auto;
      gap: 12px;
      min-height: calc(100dvh - 32px);
      height: calc(100dvh - 32px);
    }
    .game-header-bar {
      grid-template-columns: auto minmax(0, 1fr) auto;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 12px;
    }
    .game-header-left { min-width: 0; }
    .game-kicker .title { font-size: 16px; }
    .game-kicker .subtitle {
      display: none;
    }
    .status-strip {
      justify-content: center;
      align-items: center;
      gap: 6px;
      min-width: 0;
      overflow: hidden;
    }
    .status-strip .tag {
      font-size: 11px;
      padding: 4px 8px;
      max-width: 100%;
    }
    .game-top-icon-group {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: 4px;
      padding-left: 8px;
      border-left: 1px solid var(--rim);
    }

    .game-main-layout {
      display: grid;
      grid-template-columns: minmax(190px, 230px) minmax(0, 1fr) minmax(190px, 230px);
      gap: 12px;
      height: 100%;
      min-height: 0;
      align-items: stretch;
    }
    .game-side-wrap {
      min-width: 0;
      min-height: 0;
      display: flex;
      align-items: stretch;
    }
    .player-compact-rail {
      width: 100%;
      border: 1px solid var(--rim);
      border-radius: 12px;
      background: var(--surface);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-height: 0;
      overflow: auto;
    }
    .player-compact-rail.active {
      border-color: rgba(184,150,92,.28);
      box-shadow: inset 0 0 0 1px rgba(184,150,92,.07);
    }
    .player-compact-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--rim);
    }
    .player-compact-title {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .player-compact-title .stone {
      width: 14px;
      height: 14px;
      flex-shrink: 0;
    }
    .player-compact-title b {
      font-family: "Playfair Display", Georgia, serif;
      font-weight: 500;
      color: var(--chalk);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .player-compact-body {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .player-compact-stat {
      border: 1px solid var(--rim);
      border-radius: 8px;
      background: var(--surface-2);
      padding: 8px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      font-size: 11px;
      color: var(--stone);
    }
    .player-compact-stat b {
      color: var(--chalk);
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      font-weight: 500;
    }
    .player-compact-reserve {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
      padding: 8px;
      border: 1px solid var(--rim);
      border-radius: 8px;
      background: rgba(0,0,0,.12);
      justify-items: center;
      min-height: 62px;
      align-content: start;
    }
    .player-compact-reserve .stone {
      width: 16px;
      height: 16px;
      margin: 0;
    }
    .player-compact-reserve.captured .stone {
      opacity: .42;
    }
    .player-compact-foot {
      margin-top: auto;
      padding-top: 8px;
      border-top: 1px solid var(--rim);
      display: grid;
      gap: 6px;
      font-size: 11px;
    }

    .primary-stack {
      display: grid;
      grid-template-rows: auto 1fr auto auto;
      gap: 10px;
      height: 100%;
      min-height: 0;
      min-width: 0;
    }
    .inline-banner-stack {
      display: grid;
      gap: 8px;
    }
    .instruction-primary {
      padding: 10px 12px;
      margin: 0;
    }
    .instruction-primary > b {
      display: block;
      font-size: 13px;
      line-height: 1.35;
    }
    .instruction-primary .small {
      margin-top: 4px;
      line-height: 1.35;
      color: var(--stone);
    }

    .board-stage {
      min-height: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px;
      border-radius: 12px;
    }
    .board-stage .board-wrap {
      width: min(100%, min(78dvh, 860px));
      max-width: 100%;
      margin: 0 auto;
    }

    .phase-rail {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: stretch;
    }
    .phase-step {
      flex: 1 1 150px;
      min-width: 0;
      padding: 7px 10px;
      border-radius: 8px;
    }
    .phase-step > span:first-child {
      display: block;
      font-size: 10px;
      line-height: 1.15;
      margin-bottom: 2px;
    }
    .phase-step b {
      font-size: 12px;
      line-height: 1.2;
      margin-bottom: 2px;
    }
    .phase-step > span:last-child {
      display: block;
      font-size: 10px;
      line-height: 1.2;
      color: var(--stone);
    }

    .game-footer-dock {
      position: sticky;
      bottom: 8px;
      z-index: 8;
      padding: 10px 12px;
      border-radius: 12px;
    }

    @media (max-width: 1180px) {
      .game-main-layout {
        grid-template-columns: minmax(170px, 210px) minmax(0, 1fr) minmax(170px, 210px);
      }
      .board-stage .board-wrap {
        width: min(100%, min(72dvh, 760px));
      }
    }
    @media (max-width: 980px) {
      .game-shell-2026 {
        min-height: auto;
        height: auto;
      }
      .game-header-bar {
        grid-template-columns: 1fr;
        gap: 8px;
      }
      .status-strip {
        justify-content: flex-start;
      }
      .game-header-right {
        justify-content: space-between;
        width: 100%;
      }
      .game-main-layout {
        grid-template-columns: 1fr;
        height: auto;
      }
      .game-side-wrap {
        order: 2;
      }
      .primary-stack {
        order: 1;
        height: auto;
      }
      .player-compact-rail {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 8px;
      }
      .player-compact-head {
        grid-column: 1 / -1;
        margin-bottom: 0;
      }
      .player-compact-foot {
        grid-column: 1 / -1;
        margin-top: 0;
      }
      .board-stage .board-wrap {
        width: min(100%, 94vw);
      }
      .phase-rail {
        display: grid;
        grid-template-columns: 1fr;
      }
      .game-footer-dock {
        bottom: 4px;
      }
    }
    @media (max-width: 640px) {
      .game-top-icon-group {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
      }
      .player-compact-rail {
        grid-template-columns: 1fr;
      }
      .player-compact-reserve {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }
      .dock-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
      .dock-actions .btn:last-child {
        grid-column: 1 / -1;
      }
      .game-footer-dock {
        grid-template-columns: 1fr;
      }
      .dock-note {
        text-align: left;
      }
    }
    /* === UX RESET V4 (game screen only, high-priority layout layer) === */
    .app.game-app.ux-reset-v4 { padding: 0 !important; display: block !important; }
    .ux4-game { width: 100%; min-height: 100dvh; padding: 12px; box-sizing: border-box; }
    .ux4-shell { min-height: calc(100dvh - 24px); display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; }
    .ux4-topbar { position: sticky; top: 8px; z-index: 12; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--rim); border-radius: 12px; background: var(--surface); }
    .ux4-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
    .ux4-title-name { font-family: "Playfair Display", Georgia, serif; font-size: 16px; color: var(--chalk); white-space: nowrap; }
    .ux4-title-mode { font-size: 11px; color: var(--stone); white-space: nowrap; }
    .ux4-status { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
    .ux4-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
    .ux4-iconset { display:flex; gap:6px; padding-left:8px; margin-left:2px; border-left:1px solid var(--rim); }
    .ux4-playerchips { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; max-width: 1200px; margin: 0 auto; }
    .ux4-chip { min-width:0; border:1px solid var(--rim); border-radius:12px; background: var(--surface); padding: 10px 12px; display:grid; gap:8px; }
    .ux4-chip.active { border-color: rgba(184,150,92,.28); box-shadow: inset 0 0 0 1px rgba(184,150,92,.07); }
    .ux4-chip-top { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; }
    .ux4-chip-name { display:flex; align-items:center; gap:8px; min-width:0; }
    .ux4-chip-name b { font-family:"Playfair Display", Georgia, serif; font-weight:500; font-size:15px; color:var(--chalk); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .ux4-chip-role { font-size:10px; color:var(--stone); white-space:nowrap; }
    .ux4-chip-stats { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:8px; }
    .ux4-chip-stat { border:1px solid var(--rim); border-radius:10px; background: var(--surface-2); padding: 7px 8px; display:grid; gap:2px; text-align:center; }
    .ux4-chip-stat .k { font-size:10px; color:var(--stone); }
    .ux4-chip-stat .v { font-size:12px; color:var(--chalk); font-family:"JetBrains Mono", monospace; }
    .ux4-main { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 1600px; margin: 0 auto; align-items: stretch; }
    .ux4-center { min-width:0; min-height:0; display:grid; grid-template-rows:auto 1fr; gap:10px; align-items:stretch; }
    .ux4-center .banner.instruction-primary { margin: 0; }
    .ux4-center .banner.instruction-primary b { display:block; font-size:13px; line-height:1.35; }
    .ux4-center .banner.instruction-primary .small { display:none; }
    .ux4-center .board-stage { min-height:0; display:flex; align-items:center; justify-content:center; padding:10px 0; }
    .ux4-center .board-stage .board-wrap { width:min(100%, min(76dvh, 920px)); max-width:100%; margin:0 auto; justify-self:center; }
    .ux4-phasebar { display:flex; gap:8px; flex-wrap:wrap; }
    .ux4-phasebar .phase-step { flex:1 1 150px; min-width:0; padding:7px 10px; }
    .ux4-bottom { position:sticky; bottom:8px; z-index:8; border:1px solid var(--rim); border-radius:12px; background:var(--surface); padding:10px 12px; display:grid; grid-template-columns:1fr; align-items:center; gap:8px; }
    .ux4-bottom-actions { display:flex; gap:8px; flex-wrap:wrap; }
    .ux4-bottom-note { font-size:11px; color:var(--stone); text-align:right; font-family:"JetBrains Mono",monospace; }
    .details-drawer .details-panels { display:grid; gap:12px; grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start; }
    .details-drawer .details-panels .panel.side { margin:0; max-height:none; overflow:auto; }
    .details-drawer .details-panels #panel-left,
    .details-drawer .details-panels #panel-right { grid-column:auto; grid-row:auto; }
    @media (max-width: 1250px) { .ux4-center .board-stage .board-wrap { width:min(100%, min(72dvh, 800px)); } }
    @media (max-width: 980px) { .ux4-game { padding:8px; } .ux4-shell { min-height:auto; } .ux4-topbar { top:4px; grid-template-columns:1fr; } .ux4-status { justify-content:flex-start; } .ux4-actions { width:100%; justify-content:space-between; flex-wrap:wrap; } .ux4-playerchips { grid-template-columns:1fr; } .ux4-center .board-stage .board-wrap { width:min(100%, 94vw); } .ux4-phasebar { display:grid; grid-template-columns:1fr; } .ux4-bottom { bottom:4px; } .details-drawer .details-panels { grid-template-columns:1fr; } }
    @media (max-width: 640px) { .ux4-iconset { border-left:none; padding-left:0; margin-left:0; } .ux4-chip { padding:8px 10px; } .ux4-chip-stats { gap:6px; } .ux4-chip-stat { padding:6px; } .ux4-chip-stat .k { font-size:9px; } .ux4-chip-stat .v { font-size:11px; } .ux4-bottom-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); } .ux4-bottom-actions .btn:last-child { grid-column:1 / -1; } }

    /* === Arena Design (from reference file) === */
    .app.game-app {
      align-self: stretch !important;
      justify-self: stretch !important;
      min-height: 100dvh;
      margin: 0 auto;
      animation: none !important; /* avoid full-screen flash on every render() */
    }
    .game-arena {
      flex:1; width:100%;
      display:flex; flex-direction:column;
      overflow:hidden;
      animation:none !important; /* render() rebuilds this node on every move */
    }
    .arena-topbar {
      display:flex; align-items:center;
      justify-content:space-between;
      padding:10px 20px;
      border-bottom:1px solid rgba(255,255,255,.05);
      flex-shrink:0; gap:12px;
      background:rgba(8,12,18,.4);
      min-width: 0;
    }
    :root[data-theme="light"] .arena-topbar { border-bottom-color:rgba(0,0,0,.07); background:rgba(255,248,238,.55); }
    .arena-brand { display:flex; align-items:center; gap:12px; min-width:0; }
    .arena-title { font-family:'Playfair Display',serif; font-size:17px; font-weight:500; color:#e0eaf5; white-space:nowrap; letter-spacing:-.01em; }
    :root[data-theme="light"] .arena-title { color:#1a2530; }
    .arena-subtitle { font-size:11px; color:var(--muted); margin-top:2px; letter-spacing:.04em; }
    .arena-topbar-tools { display:flex; align-items:center; gap:6px; flex-shrink:0; flex-wrap:wrap; justify-content:flex-end; }
    .arena-topbar-tools .btn { padding:7px 12px; font-size:13px; }
    .arena-topbar-tools .btn.icon { padding:7px 10px; }
    .arena-stage { flex:1; display:grid; grid-template-columns:230px 1fr 230px; overflow:hidden; min-height:0; }
    .arena-player {
      display:flex; flex-direction:column; gap:14px;
      padding:20px 16px;
      border-right:1px solid rgba(255,255,255,.05);
      overflow-y:auto; scrollbar-width:none; min-width:0;
      transition:background .4s ease;
    }
    .arena-player::-webkit-scrollbar { width:0; }
    .arena-player.player-right { border-right:none; border-left:1px solid rgba(255,255,255,.05); }
    :root[data-theme="light"] .arena-player { border-color:rgba(0,0,0,.07); background:rgba(255,248,238,.28); }
    :root[data-theme="light"] .arena-player.player-right { border-left-color:rgba(0,0,0,.07); }
    .arena-player.on-turn { background:linear-gradient(180deg,rgba(108,165,255,.045),rgba(108,165,255,.016) 65%,transparent); }
    :root[data-theme="light"] .arena-player.on-turn { background:rgba(74,163,255,.055); }
    .ap-ident { display:flex; align-items:center; gap:12px; position:relative; }
    .ap-jewel { width:30px; height:30px; border-radius:50%; flex-shrink:0; transition:box-shadow .35s ease; }
    .ap-jewel-w { background:#f0f0f0; border:2px solid #c0cad4; }
    .ap-jewel-b { background:#1a1a1a; border:2px solid #080808; }
    .on-turn .ap-jewel-w { box-shadow:0 0 0 4px rgba(240,240,240,.14),0 0 18px rgba(255,255,255,.09); }
    .on-turn .ap-jewel-b { box-shadow:0 0 0 4px rgba(108,165,255,.2),0 0 18px rgba(108,165,255,.11); }
    .ap-names { flex:1; min-width:0; }
    .ap-name { font-family:'Playfair Display',serif; font-size:16px; font-weight:500; color:#dce8f4; line-height:1.1; }
    :root[data-theme="light"] .ap-name { color:#1a2530; }
    .on-turn .ap-name { color:#edf4ff; }
    .ap-role { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin-top:2px; }
    .ap-turn-dot {
      position:absolute; right:0; top:50%;
      transform:translateY(-50%);
      width:7px; height:7px; border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 10px rgba(108,165,255,.9);
      animation:apDotPulse 1.4s ease-in-out infinite;
    }
    @keyframes apDotPulse {
      0%,100%{opacity:1;transform:translateY(-50%) scale(1);}
      50%{opacity:.45;transform:translateY(-50%) scale(.65);}
    }
    .ap-clock { display:flex; align-items:baseline; gap:8px; }
    .ap-time { font-family:'JetBrains Mono',monospace; font-size:26px; font-weight:500; color:#dce8f4; line-height:1; letter-spacing:-.025em; }
    :root[data-theme="light"] .ap-time { color:#1a2530; }
    .on-turn .ap-time { color:#f0f7ff; }
    .ap-avg { font-size:11px; color:var(--muted); }
    .ap-phase {
      display:inline-flex; align-items:center;
      padding:4px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.025);
      font-size:10px; color:#8aa0b3;
      text-transform:uppercase; letter-spacing:.09em;
      align-self:flex-start; transition:all .3s;
      font-family:'Outfit',system-ui,sans-serif;
    }
    :root[data-theme="light"] .ap-phase { border-color:rgba(0,0,0,.1); color:#5a6a7a; background:rgba(0,0,0,.04); }
    .ap-phase.pp { border-color:rgba(70,211,125,.45); background:rgba(70,211,125,.08); color:#8fdfb2; box-shadow:0 0 12px rgba(70,211,125,.18); }
    .ap-pion-sec { display:flex; flex-direction:column; gap:5px; }
    .ap-pion-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
    .ap-pion-row { display:flex; flex-wrap:wrap; gap:4px; min-height:16px; }
    .a-pip { width:13px; height:13px; border-radius:50%; flex-shrink:0; transition:opacity .2s; }
    .a-pip-w { background:#f0f0f0; border:1.5px solid #c0cad4; }
    .a-pip-b { background:#1a1a1a; border:1.5px solid #0a0a0a; }
    .a-pip-cap { opacity:.38; filter:grayscale(30%); }
    .a-pip-none { font-size:11px; color:#2a3a4c; }
    .ap-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
    .ap-stat { display:flex; flex-direction:column; align-items:center; padding:8px 4px; border-radius:10px; background:rgba(255,255,255,.022); border:1px solid rgba(255,255,255,.05); gap:3px; }
    :root[data-theme="light"] .ap-stat { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.07); }
    .ap-stat-v { font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:600; color:#dce8f4; line-height:1; }
    :root[data-theme="light"] .ap-stat-v { color:#1a2530; }
    .ap-stat-k { font-size:9px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; text-align:center; }
    .ap-sep { height:1px; background:rgba(255,255,255,.045); }
    :root[data-theme="light"] .ap-sep { background:rgba(0,0,0,.07); }
    .ap-ai { display:flex; flex-direction:column; gap:8px; }
    .ap-ai-label { font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
    .ap-ai-row { display:flex; align-items:center; gap:8px; }
    .ap-ai-row input[type=range] { flex:1; }
    .ap-ai-val { font-size:11px; color:var(--muted); min-width:48px; text-align:right; white-space:nowrap; }
    .ap-ai-desc { font-size:10px; color:var(--muted); opacity:.7; line-height:1.45; }
    .ap-side-pick { display:flex; gap:6px; }
    .ap-side-pick .btn.sm { padding:5px 10px; font-size:12px; }
    .arena-center { display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:14px 20px; gap:10px; min-height:0; overflow:hidden; }
    .arena-instr { flex-shrink:0; text-align:center; display:flex; flex-direction:column; gap:4px; max-width:460px; width:100%; }
    .arena-instr-main {
      font-size:13px; font-weight:500; color:#b0c4d4;
      padding:7px 16px; border-radius:8px;
      background:rgba(255,255,255,.022);
      border:1px solid rgba(255,255,255,.055);
      line-height:1.45; transition:all .25s;
    }
    :root[data-theme="light"] .arena-instr-main { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06); color:#3a4a56; }
    .arena-instr.cap-mode .arena-instr-main { border-color:rgba(255,107,107,.38); background:rgba(255,107,107,.05); color:#ffb0b0; }
    .arena-instr-sub { font-size:11px; color:var(--muted); }
    .arena-board-zone { flex:1; min-height:0; width:100%; display:flex; align-items:center; justify-content:center; }
    .arena-board-zone .board-wrap {
      width:min(calc(100dvh - 185px),100%);
      height:min(calc(100dvh - 185px),100%);
      max-width:100%; aspect-ratio:1/1;
      border-radius:22px;
      background:radial-gradient(ellipse at 30% 25%,rgba(18,28,44,.95),rgba(9,13,20,1));
      border:1px solid rgba(255,255,255,.065);
      box-shadow: 0 0 0 1px rgba(255,255,255,.022) inset, 0 32px 80px rgba(0,0,0,.5), 0 0 50px rgba(0,0,0,.28);
      padding:18px;
    }
    :root[data-theme="light"] .arena-board-zone .board-wrap { background:linear-gradient(135deg,#fff9ef,#f5e8d0); border-color:rgba(0,0,0,.08); box-shadow:0 20px 55px rgba(0,0,0,.16); }
    .arena-foot { flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:8px; }
    .arena-foot .btn { padding:9px 18px; font-size:13px; }
    @media (max-width:1100px) { .arena-stage { grid-template-columns:200px 1fr 200px; } }
    @media (max-width:860px) {
      .arena-stage { grid-template-columns:1fr !important; grid-template-rows:auto 1fr auto; overflow-y:auto; }
      .arena-player {
        flex-direction:row; flex-wrap:wrap; border-right:none; border-left:none;
        border-bottom:1px solid rgba(255,255,255,.05);
        padding:10px 14px; gap:10px; overflow-y:visible; align-items:center;
      }
      .arena-player.player-right { border-left:none; border-top:1px solid rgba(255,255,255,.05); border-bottom:none; }
      :root[data-theme="light"] .arena-player, :root[data-theme="light"] .arena-player.player-right { border-color:rgba(0,0,0,.07); }
      .ap-sep { display:none; }
      .arena-center { padding:10px 14px; }
      .arena-board-zone .board-wrap { width:min(calc(100% - 12px),500px); height:auto; }
    }
    @media (max-height: 820px) {
      .arena-topbar { padding:8px 14px; }
      .arena-stage { grid-template-columns:190px 1fr 190px; }
      .arena-player { padding:12px 12px; gap:10px; }
      .ap-time { font-size:22px; }
      .arena-center { padding:10px 14px; }
      .arena-board-zone .board-wrap {
        width:min(calc(100dvh - 150px),100%);
        height:min(calc(100dvh - 150px),100%);
      }
    }
    @media (max-width:540px) {
      .arena-topbar { padding:8px 12px; gap:8px; }
      .arena-topbar { align-items:flex-start; }
      .arena-topbar-tools { justify-content:flex-start; }
      .arena-title { font-size:14px; }
      .arena-topbar-tools .btn { padding:6px 9px; font-size:12px; }
    }

    /* === Header / Theme review fixes (all pages) === */
    .shell-head {
      display: grid !important;
      grid-template-columns: auto minmax(0, 1fr) auto;
      align-items: center;
      gap: 12px;
    }
    .shell-head .brand { min-width: 0; }
    .shell-head .brand > div:last-child { min-width: 0; }
    .shell-head .brand h1 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .shell-head-context {
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .shell-head-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .shell-head-tools {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding-left: 8px;
      margin-left: 2px;
      border-left: 1px solid var(--rim);
      flex-wrap: wrap;
    }
    .shell-head-extra {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding-left: 8px;
      margin-left: 2px;
      border-left: 1px solid var(--rim);
      flex-wrap: wrap;
    }
    .btn.icon {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      line-height: 1 !important;
      text-align: center;
      vertical-align: middle;
    }
    .btn.icon svg {
      display: block !important;
      margin: 0 !important;
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }
    #btn-mute.btn.icon svg { width: 20px; height: 20px; }
    .btn.icon > span,
    .btn.icon > strong { display:inline-flex; align-items:center; justify-content:center; width:100%; }

    .arena-shell-head {
      width: min(1072px, calc(100vw - 48px));
      max-width: min(1072px, calc(100vw - 48px));
      margin: 24px auto 0;
      flex-shrink: 0;
    }

    .hero-rules {
      display: grid;
      gap: 10px;
      margin-top: 10px;
      max-width: 60ch;
    }
    .hero-rules.prose {
      gap: 8px;
      max-width: 62ch;
      border: 1px solid var(--rim);
      border-radius: 12px;
      background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.005));
      padding: 14px;
    }
    .hero-rules.prose p {
      margin: 0;
      color: var(--chalk-dim);
      line-height: 1.55;
      font-size: 13px;
    }
    .hero-rules.prose .hero-lead {
      color: var(--chalk);
      font-size: 14px;
      line-height: 1.6;
    }
    .hero-rule {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
      padding: 8px 10px;
      border: 1px solid var(--rim);
      border-radius: 10px;
      background: rgba(255,255,255,.01);
    }
    .hero-rule > span {
      width: 28px;
      height: 28px;
      border-radius: 999px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      color: var(--gold);
      border: 1px solid var(--rim-hi);
      background: var(--surface-2);
    }
    .hero-rule > p {
      margin: 2px 0 0;
      color: var(--chalk-dim);
      line-height: 1.45;
      font-size: 13px;
      max-width: none;
    }

    @media (max-width: 980px) {
      .shell-head { grid-template-columns: 1fr; align-items: stretch; }
      .shell-head-context { justify-content: flex-start; }
      .shell-head-actions { justify-content: space-between; }
      .shell-head-tools, .shell-head-extra { border-left: none; padding-left: 0; margin-left: 0; }
      .arena-shell-head { margin: 10px auto 0; width: calc(100% - 20px); max-width: calc(100% - 20px); }
      .hub-game-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 640px) {
      .shell-head-actions { gap: 6px; }
      .shell-head-actions > .btn,
      .shell-head-extra > .btn { padding: 8px 10px; }
      .shell-head-tools .btn.icon { padding: 8px 10px; min-width: 40px; }
      .hero-rule { grid-template-columns: 24px 1fr; gap: 8px; padding: 8px; }
      .hero-rule > span { width: 24px; height: 24px; font-size: 10px; }
      .hero-rule > p { font-size: 12px; }
    }

    /* Avoid flash on screen switches (menu -> game / online) */
    .app,
    .menu-shell,
    .overlay-screen-fade,
    .screen-panel.overlay-screen-fade {
      animation: none !important;
    }

    /* === Game shell parity with home header / colors === */
    .shell-head {
      min-height: 64px;
      box-sizing: border-box;
      position: sticky;
      top: 10px;
      z-index: 40;
    }
    .shell-head-context:empty { display: none; }
    body[data-game="moulin"][data-screen="game"] #app.app.game-app {
      width: 100% !important;
      max-width: none !important;
      height: 100dvh;
      max-height: 100dvh;
      padding: 0;
      display: block;
      box-sizing: border-box;
      margin: 0 auto;
    }
    .arena-shell-head {
      width: min(1072px, calc(100vw - 48px));
      max-width: min(1072px, calc(100vw - 48px));
      margin: 24px auto 0;
    }
    .game-arena {
      background: transparent;
      color: inherit;
      height: 100%;
      min-height: 0;
    }
    .arena-topbar { display: none !important; } /* replaced by unified shell header */
    .arena-stage {
      width: 95%;
      max-width: 95%;
      margin: 10px auto 2.5dvh;
      background: var(--surface);
      border: 1px solid var(--rim);
      border-radius: 12px;
      box-shadow: var(--shadow-sm);
      overflow: hidden;
      gap: 0;
      box-sizing: border-box;
    }
    .arena-player {
      background: var(--surface);
      border-color: var(--rim) !important;
      color: var(--chalk);
    }
    .arena-player.on-turn {
      background:
        radial-gradient(220px 120px at 15% 10%, rgba(184,150,92,.05), transparent 70%),
        var(--surface);
    }
    .ap-name { color: var(--chalk); }
    .ap-time { color: var(--chalk); }
    .ap-role, .ap-avg, .ap-pion-label, .ap-stat-k, .ap-ai-label, .ap-ai-val, .ap-ai-desc { color: var(--stone); }
    .ap-phase {
      border-color: var(--rim);
      background: var(--surface-2);
      color: var(--stone);
    }
    .ap-phase.pp {
      border-color: rgba(70,211,125,.35);
      background: rgba(70,211,125,.07);
      color: #8fdfb2;
      box-shadow: none;
    }
    .ap-stat {
      background: var(--surface-2);
      border-color: var(--rim);
    }
    .ap-stat-v { color: var(--chalk); }
    .ap-sep { background: var(--rim); }
    .a-pip-none { color: var(--stone); }
    .arena-center {
      background: var(--surface);
      padding: 12px 14px;
    }
    .arena-board-zone {
      width: 100%;
      border-radius: 10px;
      background: transparent;
    }
    .arena-board-zone .board-wrap {
      width: min(calc(100dvh - 218px), 100%);
      height: min(calc(100dvh - 218px), 100%);
      background: var(--surface);
      border: 1px solid var(--rim);
      border-radius: 14px;
      box-shadow: var(--shadow-sm);
    }
    .arena-foot {
      width: 100%;
      padding-top: 4px;
      justify-content: center;
      flex-wrap: wrap;
    }

    /* Unified game typography scale (Moulin + shared game UI).
       Goal: improve readability and keep a coherent type system across games. */
    body[data-screen="game"] .arena-player .ap-name {
      font-size: clamp(17px, 1.05vw, 22px);
    }
    body[data-screen="game"] .arena-player .ap-role,
    body[data-screen="game"] .arena-player .ap-pion-label,
    body[data-screen="game"] .arena-player .ap-ai-label {
      font-size: clamp(10px, .7vw, 12px);
    }
    body[data-screen="game"] .arena-player .ap-time {
      font-size: clamp(28px, 1.7vw, 36px);
    }
    body[data-screen="game"] .arena-player .ap-avg {
      font-size: clamp(11px, .75vw, 13px);
    }
    body[data-screen="game"] .arena-player .ap-phase {
      font-size: clamp(10px, .66vw, 12px);
    }
    body[data-screen="game"] .arena-player .a-pip-none {
      font-size: clamp(11px, .72vw, 13px);
    }
    body[data-screen="game"] .arena-player .ap-stat-v {
      font-size: clamp(19px, 1.14vw, 24px);
    }
    body[data-screen="game"] .arena-player .ap-stat-k {
      font-size: clamp(9px, .58vw, 11px);
    }
    body[data-screen="game"] .arena-player .ap-ai-val {
      font-size: clamp(11px, .76vw, 13px);
      min-width: clamp(50px, 3vw, 70px);
    }
    body[data-screen="game"] .arena-player .ap-ai-desc {
      font-size: clamp(10px, .64vw, 12px);
      line-height: 1.45;
    }
    body[data-screen="game"] .arena-player .ap-side-pick .btn.sm {
      font-size: clamp(12px, .82vw, 14px);
    }
    body[data-screen="game"] .arena-instr-main {
      font-size: clamp(14px, .88vw, 16px);
    }
    body[data-screen="game"] .arena-instr-sub {
      font-size: clamp(12px, .72vw, 13px);
    }
    body[data-screen="game"] .arena-foot .btn {
      font-size: clamp(13px, .82vw, 15px);
    }
    body[data-screen="game"] .hist {
      font-size: clamp(12px, .78vw, 14px);
    }
    body[data-screen="game"] .small {
      font-size: clamp(12px, .76vw, 14px);
    }

    #win .card h3,
    #rules h3 {
      font-size: clamp(24px, 1.5vw, 30px);
    }
    .rules-body {
      font-size: clamp(16px, 1vw, 18px);
    }

    /* Laptop readability boost for game screens (Moulin + shared UI) */
    @media (min-width: 981px) and (max-width: 1600px) {
      body[data-screen="game"] .shell-head {
        min-height: clamp(70px, 6.8vh, 86px);
        padding: clamp(14px, 1.6vh, 20px) clamp(18px, 1.6vw, 26px);
      }

      body[data-screen="game"] .shell-head .brand h1 {
        font-size: clamp(20px, 1.28vw, 25px);
      }

      body[data-screen="game"] .shell-head .brand .sub {
        font-size: clamp(13px, 0.88vw, 16px);
      }

      body[data-screen="game"] .shell-head .btn {
        font-size: clamp(15px, 0.98vw, 17px);
        padding: clamp(9px, 0.66vw, 12px) clamp(12px, 0.86vw, 15px);
      }

      body[data-screen="game"] .shell-head .btn.icon {
        width: clamp(38px, 2.35vw, 44px);
        height: clamp(38px, 2.35vw, 44px);
        min-width: clamp(38px, 2.35vw, 44px);
        min-height: clamp(38px, 2.35vw, 44px);
      }

      body[data-screen="game"] .arena-player .ap-name {
        font-size: clamp(20px, 1.2vw, 25px);
      }
      body[data-screen="game"] .arena-player .ap-role,
      body[data-screen="game"] .arena-player .ap-pion-label,
      body[data-screen="game"] .arena-player .ap-ai-label {
        font-size: clamp(12px, .82vw, 14px);
      }
      body[data-screen="game"] .arena-player .ap-time {
        font-size: clamp(34px, 2vw, 44px);
      }
      body[data-screen="game"] .arena-player .ap-avg {
        font-size: clamp(13px, .88vw, 15px);
      }
      body[data-screen="game"] .arena-player .ap-phase {
        font-size: clamp(12px, .78vw, 14px);
      }
      body[data-screen="game"] .arena-player .ap-stat-v {
        font-size: clamp(22px, 1.3vw, 28px);
      }
      body[data-screen="game"] .arena-player .ap-stat-k {
        font-size: clamp(11px, .7vw, 13px);
      }
      body[data-screen="game"] .arena-player .ap-ai-val {
        font-size: clamp(13px, .88vw, 15px);
      }
      body[data-screen="game"] .arena-player .ap-ai-desc {
        font-size: clamp(12px, .76vw, 14px);
      }
      body[data-screen="game"] .arena-player .ap-side-pick .btn.sm {
        font-size: clamp(14px, .94vw, 16px);
      }
      body[data-screen="game"] .arena-instr-main {
        font-size: clamp(16px, 1.02vw, 18px);
      }
      body[data-screen="game"] .arena-instr-sub {
        font-size: clamp(13px, .84vw, 15px);
      }
      body[data-screen="game"] .arena-foot .btn {
        font-size: clamp(15px, .96vw, 17px);
      }
      body[data-screen="game"] .hist {
        font-size: clamp(14px, .9vw, 16px);
      }
      body[data-screen="game"] .small {
        font-size: clamp(14px, .88vw, 16px);
      }
      #win .card h3,
      #rules h3 {
        font-size: clamp(28px, 1.8vw, 34px);
      }
      .rules-body {
        font-size: clamp(18px, 1.12vw, 20px);
      }
    }

    /* Wide-screen game typography growth (Moulin + shared UI) */
    @media (min-width: 1366px) {
      body[data-screen="game"] .shell-head .brand h1 {
        font-size: clamp(22px, 0.85vw + 8px, 30px);
      }
      body[data-screen="game"] .shell-head .brand .sub {
        font-size: clamp(13px, 0.45vw + 4px, 18px);
      }
      body[data-screen="game"] .shell-head .btn {
        font-size: clamp(15px, 0.42vw + 7px, 19px);
      }

      body[data-screen="game"] .arena-player .ap-name {
        font-size: clamp(20px, 0.55vw + 11px, 27px);
      }
      body[data-screen="game"] .arena-player .ap-role,
      body[data-screen="game"] .arena-player .ap-pion-label,
      body[data-screen="game"] .arena-player .ap-ai-label {
        font-size: clamp(12px, 0.28vw + 7px, 15px);
      }
      body[data-screen="game"] .arena-player .ap-time {
        font-size: clamp(34px, 1.05vw + 13px, 48px);
      }
      body[data-screen="game"] .arena-player .ap-avg,
      body[data-screen="game"] .arena-player .ap-ai-val {
        font-size: clamp(13px, 0.28vw + 8px, 16px);
      }
      body[data-screen="game"] .arena-player .ap-phase {
        font-size: clamp(12px, 0.24vw + 8px, 15px);
      }
      body[data-screen="game"] .arena-player .ap-stat-v {
        font-size: clamp(22px, 0.6vw + 13px, 30px);
      }
      body[data-screen="game"] .arena-player .ap-stat-k {
        font-size: clamp(11px, 0.22vw + 7px, 14px);
      }
      body[data-screen="game"] .arena-player .ap-ai-desc {
        font-size: clamp(12px, 0.25vw + 7px, 15px);
      }
      body[data-screen="game"] .arena-player .ap-side-pick .btn.sm,
      body[data-screen="game"] .arena-foot .btn {
        font-size: clamp(14px, 0.34vw + 8px, 18px);
      }
      body[data-screen="game"] .arena-instr-main {
        font-size: clamp(16px, 0.32vw + 10px, 20px);
      }
      body[data-screen="game"] .arena-instr-sub,
      body[data-screen="game"] .hist,
      body[data-screen="game"] .small {
        font-size: clamp(13px, 0.28vw + 8px, 17px);
      }

      #win .card h3,
      #rules h3 {
        font-size: clamp(28px, 0.7vw + 14px, 38px);
      }
      .rules-body {
        font-size: clamp(18px, 0.34vw + 11px, 22px);
      }
    }

    @media (max-width: 980px) {
      .shell-head { top: 8px; min-height: 60px; }
      .arena-shell-head { width: calc(100% - 20px); max-width: calc(100% - 20px); margin-top: 10px; }
      .arena-stage { width: 95%; max-width: 95%; margin: 8px auto 2.5dvh; }
      .arena-board-zone .board-wrap {
        width: min(calc(100% - 12px), 560px);
        height: auto;
      }
    }

    /* Laptop / desktop readability for Moulin side panels:
       enlarge all panel UI pieces (name, clock, stats, sliders, buttons) and
       give side columns more width so they remain readable next to the board. */
    @media (min-width: 981px) {
      .game-arena .arena-stage {
        --arena-side-col: clamp(250px, 16vw, 340px);
        grid-template-columns: var(--arena-side-col) minmax(0, 1fr) var(--arena-side-col) !important;
      }

      .game-arena .arena-player {
        padding: clamp(16px, 1.5vw, 22px) clamp(13px, 1vw, 18px);
        gap: clamp(12px, .9vw, 16px);
      }

      .game-arena .ap-ident { gap: clamp(10px, .8vw, 14px); }
      .game-arena .ap-jewel {
        width: clamp(30px, 2vw, 38px);
        height: clamp(30px, 2vw, 38px);
      }

      .game-arena .ap-name {
        font-size: clamp(16px, 1vw, 21px);
      }

      .game-arena .ap-role,
      .game-arena .ap-pion-label,
      .game-arena .ap-ai-label {
        font-size: clamp(10px, .68vw, 12px);
      }

      .game-arena .ap-clock { gap: clamp(7px, .65vw, 10px); }
      .game-arena .ap-time {
        font-size: clamp(26px, 1.6vw, 34px);
      }
      .game-arena .ap-avg {
        font-size: clamp(11px, .72vw, 13px);
      }

      .game-arena .ap-phase {
        padding: clamp(4px, .35vw, 6px) clamp(10px, .7vw, 12px);
        font-size: clamp(10px, .65vw, 12px);
      }

      .game-arena .ap-pion-row { gap: clamp(4px, .35vw, 6px); }
      .game-arena .a-pip {
        width: clamp(13px, .9vw, 17px);
        height: clamp(13px, .9vw, 17px);
      }

      .game-arena .ap-stats {
        gap: clamp(6px, .45vw, 9px);
      }
      .game-arena .ap-stat {
        padding: clamp(8px, .6vw, 11px) clamp(5px, .35vw, 8px);
        gap: clamp(3px, .2vw, 5px);
      }
      .game-arena .ap-stat-v {
        font-size: clamp(18px, 1.1vw, 23px);
      }
      .game-arena .ap-stat-k {
        font-size: clamp(9px, .56vw, 11px);
      }

      .game-arena .ap-ai { gap: clamp(8px, .55vw, 11px); }
      .game-arena .ap-ai-row { gap: clamp(8px, .55vw, 11px); }
      .game-arena .ap-ai-val {
        min-width: clamp(52px, 3.4vw, 70px);
        font-size: clamp(11px, .72vw, 13px);
      }
      .game-arena .ap-ai-desc {
        font-size: clamp(10px, .62vw, 12px);
        line-height: 1.5;
      }
      .game-arena .ap-side-pick { gap: clamp(6px, .45vw, 8px); }
      .game-arena .ap-side-pick .btn.sm {
        padding: clamp(6px, .35vw, 8px) clamp(10px, .7vw, 13px);
        font-size: clamp(12px, .78vw, 14px);
      }

      .game-arena #ai-speed::-webkit-slider-thumb,
      .game-arena #ai-diff::-webkit-slider-thumb,
      .game-arena input[id^="clock-limit-"]::-webkit-slider-thumb {
        width: clamp(20px, 1.2vw, 24px);
        height: clamp(20px, 1.2vw, 24px);
        margin-top: clamp(-7px, -0.45vw, -6px);
      }
      .game-arena #ai-speed::-moz-range-thumb,
      .game-arena #ai-diff::-moz-range-thumb,
      .game-arena input[id^="clock-limit-"]::-moz-range-thumb {
        width: clamp(20px, 1.2vw, 24px);
        height: clamp(20px, 1.2vw, 24px);
      }

      /* Let the board yield a bit of room to the larger side panels on laptop/desktop */
      .game-arena .arena-board-zone .board-wrap {
        width: min(
          calc(100dvh - 234px),
          calc(100vw - (var(--arena-side-col) * 2) - 110px),
          100%
        ) !important;
        height: min(
          calc(100dvh - 234px),
          calc(100vw - (var(--arena-side-col) * 2) - 110px),
          100%
        ) !important;
      }
    }

    /* ============================================================
       Moulin Light Mode Rewrite (game screen only)
       Rebuilt from scratch with the same premium ivory / brass philosophy
       used for the refreshed Gomoku + Hub light modes.
    ============================================================ */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] {
      --mln-l-bg: #f3ebdd;
      --mln-l-stage: #f0e2cc; /* aligned with Gomoku board light background */
      --mln-l-panel: #f7efe1;
      --mln-l-panel-2: #f2e4d0;
      --mln-l-rim: #d8c9b0;
      --mln-l-rim-hi: #bca483;
      --mln-l-ink: #201c17;
      --mln-l-ink-soft: #4f463b;
      --mln-l-muted: #786d5d;
      --mln-l-gold: #ad8140;
      --mln-l-gold-hi: #c79a5a;
      --mln-l-gold-dim: #8a6531;
      --mln-l-accent: #3f7ce0;
      --mln-l-good: #2f7e58;
      --mln-l-danger: #b44f4f;
      --mln-l-shadow: 0 18px 42px rgba(88,67,38,.10), 0 2px 8px rgba(88,67,38,.06);
      --mln-l-shadow-sm: 0 10px 24px rgba(88,67,38,.08), 0 1px 4px rgba(88,67,38,.04);

      /* Override shared tokens locally */
      --bg: var(--mln-l-bg);
      --panel: var(--mln-l-panel);
      --surface: var(--mln-l-panel);
      --surface-2: var(--mln-l-panel-2);
      --rim: var(--mln-l-rim);
      --rim-hi: var(--mln-l-rim-hi);
      --gold: var(--mln-l-gold);
      --gold-hi: var(--mln-l-gold-hi);
      --gold-dim: var(--mln-l-gold-dim);
      --accent: var(--mln-l-accent);
      --chalk: var(--mln-l-ink);
      --chalk-dim: var(--mln-l-ink-soft);
      --stone: var(--mln-l-muted);
      --muted: var(--mln-l-muted);
      --danger: var(--mln-l-danger);
      --danger-hi: #cf6363;
      --signal: var(--mln-l-good);
      --signal-hi: #3c9368;
      --shadow: var(--mln-l-shadow);
      --shadow-sm: var(--mln-l-shadow-sm);
      --shadow-xl: 0 22px 50px rgba(88,67,38,.12);
      --glass: none;

      color-scheme: light;
      color: var(--mln-l-ink);
      background:
        radial-gradient(900px 520px at 84% -8%, rgba(173,129,64,.12), transparent 60%),
        radial-gradient(620px 420px at 8% 100%, rgba(63,124,224,.05), transparent 60%),
        linear-gradient(180deg, #f8f1e6 0%, #f3ebdd 100%);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"]::before {
      opacity: .018;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #app.app.game-app {
      color: var(--mln-l-ink);
      background: transparent;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .game-arena {
      background: transparent;
      color: inherit;
    }

    /* Shared shell header (top bar) */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head {
      background: var(--mln-l-stage);
      border-color: rgba(188,164,131,.45);
      box-shadow:
        0 1px 0 rgba(255,255,255,.78) inset,
        0 14px 30px rgba(88,67,38,.08),
        0 2px 8px rgba(88,67,38,.06);
      backdrop-filter: blur(10px);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head .brand h1 {
      color: var(--mln-l-ink);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head .brand .sub {
      color: #786d5c;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .brand-logo {
      background: linear-gradient(180deg, #f7efe1, #efe1c9);
      border-color: rgba(188,164,131,.55);
      box-shadow: 0 1px 0 rgba(255,255,255,.72) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .brand-logo::after {
      border-color: rgba(173,129,64,.86);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head-tools,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head-extra {
      border-left-color: rgba(188,164,131,.32);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head .btn {
      background: linear-gradient(180deg, rgba(255,255,255,.76), rgba(244,236,223,.88));
      border-color: rgba(188,164,131,.45);
      color: var(--mln-l-ink);
      box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head .btn:hover:not(:disabled) {
      background:
        radial-gradient(180px 70px at 92% 0%, rgba(173,129,64,.10), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,237,223,.97));
      border-color: rgba(173,129,64,.42);
      box-shadow:
        0 1px 0 rgba(255,255,255,.74) inset,
        0 6px 12px rgba(88,67,38,.07);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head .btn.sel,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head .btn.icon.sel {
      border-color: rgba(63,124,224,.42);
      box-shadow:
        0 1px 0 rgba(255,255,255,.72) inset,
        0 0 0 2px rgba(63,124,224,.12) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .badge {
      background: rgba(255,255,255,.64);
      border-color: rgba(188,164,131,.42);
      color: #675d51;
      box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .badge.good {
      border-color: rgba(47,126,88,.32);
      background: rgba(47,126,88,.08);
      color: #2f7d55;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .badge.warn {
      border-color: rgba(173,129,64,.34);
      background: rgba(173,129,64,.09);
      color: #8a6228;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .badge.bad {
      border-color: rgba(180,79,79,.34);
      background: rgba(180,79,79,.08);
      color: #a84b4b;
    }

    /* Main arena shell (white/board/black container) */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-stage {
      background:
        radial-gradient(1100px 360px at 50% -10%, rgba(173,129,64,.10), transparent 70%),
        linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,0) 28%),
        linear-gradient(180deg, #f6efe2, #eedfc7);
      border-color: rgba(188,164,131,.42);
      box-shadow:
        0 1px 0 rgba(255,255,255,.72) inset,
        0 20px 44px rgba(88,67,38,.10),
        0 2px 8px rgba(88,67,38,.06);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-player {
      background:
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,0)),
        linear-gradient(180deg, rgba(250,244,232,.92), rgba(244,236,223,.92));
      border-color: rgba(188,164,131,.34) !important;
      color: var(--mln-l-ink);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-player.on-turn {
      background:
        radial-gradient(260px 180px at 84% 6%, rgba(173,129,64,.10), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.50), rgba(255,255,255,.10)),
        linear-gradient(180deg, rgba(250,244,232,.98), rgba(244,236,223,.98));
      box-shadow:
        inset 0 0 0 1px rgba(173,129,64,.12),
        inset 0 1px 0 rgba(255,255,255,.55);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-center {
      background:
        linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
        rgba(240,226,204,.22);
    }

    /* Player panel typography and chips */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-name,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-time {
      color: var(--mln-l-ink);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .on-turn .ap-name,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .on-turn .ap-time {
      color: #17130f;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-role,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-avg,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-pion-label,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-stat-k,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-ai-label,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-ai-val,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-ai-desc,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .small {
      color: var(--mln-l-muted);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-turn-dot {
      background: var(--mln-l-accent);
      box-shadow: 0 0 10px rgba(63,124,224,.55);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-phase {
      border-color: rgba(188,164,131,.34);
      background: rgba(255,255,255,.44);
      color: #6d665c;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-phase.pp {
      border-color: rgba(47,126,88,.34);
      background: rgba(47,126,88,.07);
      color: #2d7e53;
      box-shadow: none;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-stat {
      background: linear-gradient(180deg, rgba(255,255,255,.66), rgba(244,236,223,.72));
      border-color: rgba(188,164,131,.30);
      box-shadow: 0 1px 0 rgba(255,255,255,.62) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-stat-v {
      color: #262a31;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .ap-sep,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .divider {
      background: rgba(188,164,131,.24);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .a-pip-none {
      color: #8d816f;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .a-pip-w {
      background: #fbfbfb;
      border-color: #cfd4db;
      box-shadow: 0 1px 2px rgba(0,0,0,.07);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .a-pip-b {
      background: #1b1b1d;
      border-color: #08080a;
      box-shadow: 0 1px 2px rgba(0,0,0,.18);
    }

    /* Instruction area */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-instr-main {
      background:
        linear-gradient(180deg, rgba(255,255,255,.58), rgba(255,255,255,.26)),
        rgba(240,226,204,.35);
      border-color: rgba(188,164,131,.28);
      color: #433b31;
      box-shadow: 0 1px 0 rgba(255,255,255,.55) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-instr.cap-mode .arena-instr-main {
      border-color: rgba(180,79,79,.28);
      background: rgba(180,79,79,.06);
      color: #8f4141;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-instr-sub {
      color: #6f6455;
    }

    /* Board frame */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone {
      background: transparent;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .board-wrap {
      background: #f0e2cc;
      border-color: rgba(188,164,131,.40);
      box-shadow:
        0 1px 0 rgba(255,255,255,.78) inset,
        0 22px 48px rgba(88,67,38,.11),
        0 3px 10px rgba(88,67,38,.06);
    }

    /* Moulin board SVG */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .line {
      stroke: #a89679;
      stroke-width: 2.2;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node .dot {
      stroke: #b79f7d;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-empty="true"] .dot {
      fill: #eaddc8;
      stroke: #bca17f;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="1"] .dot {
      fill: #f8f8f9;
      stroke: #c9ced6;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="2"] .dot {
      fill: #1d1d1f;
      stroke: #09090a;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.22));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-sel="true"] .dot {
      stroke: var(--mln-l-gold);
      stroke-width: 3.5;
      filter: drop-shadow(0 0 6px rgba(173,129,64,.48));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-legal="true"] .dot {
      stroke: var(--mln-l-gold);
      filter: drop-shadow(0 0 8px rgba(173,129,64,.58));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-cap="true"] .dot {
      stroke: #c45959;
      filter: drop-shadow(0 0 9px rgba(180,79,79,.68));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-inmill="true"] .ring {
      stroke: var(--mln-l-gold);
      stroke-width: 2.5;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-placed="true"] .dot {
      filter: drop-shadow(0 0 7px rgba(173,129,64,.42));
    }

    /* Buttons / controls in game content */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn {
      background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(244,236,223,.90));
      border-color: rgba(188,164,131,.38);
      color: var(--mln-l-ink);
      box-shadow: 0 1px 0 rgba(255,255,255,.70) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn:hover:not(:disabled) {
      border-color: rgba(173,129,64,.42);
      background:
        radial-gradient(220px 80px at 90% 0%, rgba(173,129,64,.10), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,236,222,.97));
      color: var(--mln-l-ink);
      box-shadow:
        0 1px 0 rgba(255,255,255,.76) inset,
        0 8px 16px rgba(88,67,38,.07);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn.sel {
      border-color: rgba(173,129,64,.48);
      color: #7f5b28;
      background:
        radial-gradient(200px 70px at 88% 0%, rgba(173,129,64,.12), transparent 72%),
        linear-gradient(180deg, rgba(255,255,255,.88), rgba(246,236,222,.94));
      box-shadow:
        0 1px 0 rgba(255,255,255,.76) inset,
        0 0 0 1px rgba(173,129,64,.10) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn.good {
      background: linear-gradient(180deg, #c89c59, #ad8140);
      border-color: rgba(140,102,49,.55);
      color: #130f0b;
      box-shadow:
        0 1px 0 rgba(255,255,255,.25) inset,
        0 6px 12px rgba(88,67,38,.14);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn.good:hover:not(:disabled) {
      background: linear-gradient(180deg, #d4ab6c, #ba8a49);
      border-color: rgba(140,102,49,.62);
      color: #100d09;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn.bad {
      border-color: rgba(180,79,79,.34);
      background: rgba(180,79,79,.07);
      color: #9f4a4a;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .btn.bad:hover:not(:disabled) {
      border-color: rgba(180,79,79,.46);
      background: rgba(180,79,79,.11);
      color: #923d3d;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .tag {
      background: rgba(255,255,255,.56);
      border-color: rgba(188,164,131,.34);
      color: #655c51;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .tag b {
      color: var(--mln-l-ink);
    }

    /* Sliders: IA speed/difficulty + chrono */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #ai-speed,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #ai-diff,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] input[id^="clock-limit-"] {
      background: linear-gradient(180deg, #efe4d0, #eadcc5);
      border-color: rgba(188,164,131,.45);
      box-shadow: inset 0 1px 1px rgba(0,0,0,.07);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #ai-speed::-webkit-slider-thumb,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #ai-diff::-webkit-slider-thumb,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] input[id^="clock-limit-"]::-webkit-slider-thumb {
      background: linear-gradient(180deg, #caa061, #ad8140);
      border-color: rgba(140,102,49,.55);
      box-shadow: 0 2px 6px rgba(88,67,38,.18), 0 0 0 2px rgba(255,255,255,.22) inset;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #ai-speed::-moz-range-thumb,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #ai-diff::-moz-range-thumb,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] input[id^="clock-limit-"]::-moz-range-thumb {
      background: linear-gradient(180deg, #caa061, #ad8140);
      border-color: rgba(140,102,49,.55);
      box-shadow: 0 2px 6px rgba(88,67,38,.18), 0 0 0 2px rgba(255,255,255,.22) inset;
    }

    /* History / small scrollers */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist {
      color: #544d43;
      background: rgba(255,255,255,.32);
      border: 1px solid rgba(188,164,131,.20);
      border-radius: 8px;
      padding: 5px 6px;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist b {
      color: #242932;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist {
      scrollbar-width: thin;
      scrollbar-color: #b98846 rgba(239,229,210,.70);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist::-webkit-scrollbar {
      width: 10px;
      height: 10px;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist::-webkit-scrollbar-track {
      background: rgba(239,229,210,.70);
      border: 1px solid rgba(188,164,131,.20);
      border-radius: 999px;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist::-webkit-scrollbar-thumb {
      background: linear-gradient(180deg, #c89c59, #a97a3b);
      border: 1px solid rgba(140,102,49,.25);
      border-radius: 999px;
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .hist::-webkit-scrollbar-thumb:hover {
      background: linear-gradient(180deg, #d3ab6d, #b58443);
    }

    /* Toasts and overlays */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .toast {
      color: #3f3a34;
      background: rgba(255,250,242,.88);
      border-color: rgba(188,164,131,.30);
      box-shadow:
        0 1px 0 rgba(255,255,255,.72) inset,
        0 8px 18px rgba(88,67,38,.08);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .toast strong {
      color: #201c17;
    }

    /* Modals during Moulin game */
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .win {
      background: rgba(43,34,20,.24);
      backdrop-filter: blur(4px);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #win .card,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #rules .card {
      background:
        radial-gradient(420px 180px at 82% 0%, rgba(173,129,64,.09), transparent 70%),
        linear-gradient(180deg, #fff8ee, #f3e7d3);
      border-color: rgba(188,164,131,.45);
      color: var(--mln-l-ink);
      box-shadow:
        0 1px 0 rgba(255,255,255,.75) inset,
        0 18px 42px rgba(88,67,38,.12);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #win .card h3,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #rules h3 {
      color: var(--mln-l-ink);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] #win .card .sub,
    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .rules-body {
      color: #3f3a34;
    }

    /* Mobile polish */
    @media (max-width: 980px) {
      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .shell-head {
        background:
          linear-gradient(180deg, rgba(255,255,255,.82), rgba(245,236,223,.88)),
          var(--mln-l-stage);
      }

      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-stage {
        box-shadow:
          0 1px 0 rgba(255,255,255,.72) inset,
          0 14px 26px rgba(88,67,38,.09);
      }

      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-player {
        background:
          linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)),
          linear-gradient(180deg, rgba(248,241,229,.95), rgba(243,233,218,.95));
      }
    }

    /* ============================================================
       Premium Token Finish (in-game)
       Bring board stones + UI pions closer to the hub preview token design.
    ============================================================ */
    body[data-screen="game"] .stone.white,
    body[data-screen="game"] .ap-jewel-w,
    body[data-screen="game"] .a-pip-w {
      background: radial-gradient(circle at 34% 30%, #fff8ee 0%, #f2e7d7 48%, #dfcfb6 100%);
      border-color: rgba(205, 188, 161, .95);
      box-shadow: 0 1px 2px rgba(0,0,0,.18);
    }

    body[data-screen="game"] .stone.black,
    body[data-screen="game"] .ap-jewel-b,
    body[data-screen="game"] .a-pip-b {
      background: radial-gradient(circle at 34% 30%, #3d3d44 0%, #1c1c21 50%, #09090b 100%);
      border-color: rgba(8, 8, 10, .96);
      box-shadow: 0 1px 2px rgba(0,0,0,.28);
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node .dot-gloss {
      pointer-events: none;
      opacity: 0;
      transition: opacity .16s ease, filter .2s ease;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-empty="true"] .dot-gloss {
      display: none;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="1"] .dot {
      fill: url(#moulin-stone-w-grad) !important;
      stroke: #cfbfa7;
      stroke-width: 1.8;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="2"] .dot {
      fill: url(#moulin-stone-b-grad) !important;
      stroke: #050506;
      stroke-width: 1.8;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="1"] .dot-gloss {
      fill: rgba(255,250,241,.66);
      opacity: .5;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="2"] .dot-gloss {
      fill: rgba(255,255,255,.20);
      opacity: .34;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-legal="true"] .dot-gloss,
    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-sel="true"] .dot-gloss {
      opacity: .8;
      filter: drop-shadow(0 0 5px rgba(184,150,92,.22));
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .cap .node .dot-gloss {
      opacity: .12;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .cap .node[data-cap="true"] .dot-gloss {
      opacity: .72;
      filter: drop-shadow(0 0 6px rgba(236,134,111,.22));
    }

    :root[data-theme="light"] body[data-screen="game"] .stone.white,
    :root[data-theme="light"] body[data-screen="game"] .ap-jewel-w,
    :root[data-theme="light"] body[data-screen="game"] .a-pip-w {
      border-color: rgba(207, 191, 166, .95);
      box-shadow: 0 1px 2px rgba(0,0,0,.10);
    }

    :root[data-theme="light"] body[data-screen="game"] .stone.black,
    :root[data-theme="light"] body[data-screen="game"] .ap-jewel-b,
    :root[data-theme="light"] body[data-screen="game"] .a-pip-b {
      border-color: rgba(8, 8, 10, .95);
      box-shadow: 0 1px 2px rgba(0,0,0,.20);
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="1"] .dot {
      fill: url(#moulin-stone-w-grad) !important;
      stroke: #ccb99c;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.08));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="2"] .dot {
      fill: url(#moulin-stone-b-grad) !important;
      stroke: #09090a;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,.22));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="1"] .dot-gloss {
      fill: rgba(255,248,236,.72);
      opacity: .54;
    }

    /* ============================================================
       Gameplay Animations (inspired by hub previews)
       Applied to live games without changing engine logic.
    ============================================================ */
    @keyframes liveStoneSpawnPop {
      0% {
        opacity: .15;
        transform: scale(.72);
      }
      55% {
        opacity: 1;
        transform: scale(1.08);
      }
      100% {
        opacity: 1;
        transform: scale(1);
      }
    }

    @keyframes liveStoneGlossSpawn {
      0% {
        opacity: 0;
        transform: scale(.62);
      }
      55% {
        opacity: .9;
        transform: scale(1.12);
      }
      100% {
        transform: scale(1);
      }
    }

    @keyframes livePreviewLikeStonePulse {
      0% { transform: scale(1); }
      50% { transform: scale(1.08); }
      100% { transform: scale(1.02); }
    }

    @keyframes liveMillLinePulse {
      0% {
        opacity: .88;
        stroke-width: 2.25;
      }
      50% {
        opacity: 1;
        stroke-width: 2.9;
      }
      100% {
        opacity: .95;
        stroke-width: 2.35;
      }
    }

    @keyframes liveWinLinePulse {
      0% {
        opacity: .88;
        stroke-width: 4;
      }
      50% {
        opacity: 1;
        stroke-width: 5.3;
      }
      100% {
        opacity: .96;
        stroke-width: 4.25;
      }
    }

    @keyframes liveCaptureNodeFlash {
      0% {
        opacity: .8;
        transform: scale(1);
      }
      35% {
        opacity: 1;
        transform: scale(1.14);
      }
      100% {
        opacity: .92;
        transform: scale(1);
      }
    }

    body[data-screen="game"] .node .dot,
    body[data-screen="game"] .node .dot-gloss {
      transform-box: fill-box;
      transform-origin: center;
      transition: filter .18s ease, opacity .18s ease, stroke .18s ease;
      will-change: transform, filter, opacity;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .line {
      transition: stroke .18s ease, filter .18s ease, opacity .18s ease, stroke-width .18s ease;
      stroke-linecap: round;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .line.mill-glow {
      filter:
        drop-shadow(0 0 6px rgba(184,150,92,.36))
        drop-shadow(0 0 12px rgba(184,150,92,.22));
      animation: liveMillLinePulse .92s ease-in-out infinite;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-placed="true"] .dot {
      animation: liveStoneSpawnPop .56s cubic-bezier(.2,.8,.2,1), placedGlow .56s ease-out;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-placed="true"] .dot-gloss {
      opacity: .86;
      animation: liveStoneGlossSpawn .56s cubic-bezier(.2,.8,.2,1);
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-shake="true"] .dot,
    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-shake="true"] .dot-gloss {
      animation: livePreviewLikeStonePulse .92s ease-in-out 2;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-shake="true"] .ring {
      filter: drop-shadow(0 0 7px rgba(184,150,92,.30));
      animation: liveCaptureNodeFlash .82s ease-in-out 2;
      transform-box: fill-box;
      transform-origin: center;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-legal="true"] .dot-gloss {
      opacity: .64;
      filter: drop-shadow(0 0 5px rgba(74,163,255,.22));
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-cap="true"] .dot-gloss {
      opacity: .74;
      filter: drop-shadow(0 0 7px rgba(236,134,111,.24));
      animation: liveCaptureNodeFlash .9s ease-in-out infinite;
    }

    body[data-game="moulin"][data-screen="game"] .arena-board-zone .overlay .cap-ghost {
      animation: captureGlow .5s ease-out, liveCaptureNodeFlash .5s ease-out;
      filter:
        drop-shadow(0 0 10px rgba(236,134,111,.34))
        drop-shadow(0 0 18px rgba(184,150,92,.18));
    }

    :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-board-zone .node[data-p="2"] .dot-gloss {
      fill: rgba(255,255,255,.18);
      opacity: .30;
    }

    /* ==========================================================================
       Shared Header Parity (Games -> same geometry as Hub)
       Keep the top shell identical in position/shape across hub and game screens.
       ========================================================================== */
    body[data-screen="game"] .arena-shell-head {
      width: 95%;
      max-width: 95%;
      margin: 24px auto 0;
      justify-self: center;
      align-self: start;
    }

    body[data-screen="game"] .shell-head {
      min-height: 64px;
      padding: 14px 18px;
      border-radius: 12px;
      gap: 12px;
      top: 10px;
      box-sizing: border-box;
    }

    body[data-screen="game"] .shell-head .brand h1 {
      font-size: 18px;
      font-weight: 500;
    }

    body[data-screen="game"] .shell-head .brand .sub {
      font-size: 12px;
      letter-spacing: 0.04em;
    }

    body[data-screen="game"] .shell-head .btn {
      font-size: 13px;
      padding: 8px 10px;
    }

    body[data-screen="game"] .shell-head .btn.icon {
      width: 36px;
      height: 36px;
      min-width: 36px;
      min-height: 36px;
      border-radius: 8px;
      padding: 0;
    }

    body[data-screen="game"] .shell-head .btn.icon svg {
      width: 18px;
      height: 18px;
    }

    body[data-screen="game"] .shell-head #btn-mute.btn.icon svg {
      width: 20px;
      height: 20px;
    }

    @media (min-width: 981px) {
      body[data-screen="game"] .shell-head {
        min-height: clamp(64px, 6.2vh, 82px);
        padding: clamp(12px, 1.4vh, 18px) clamp(16px, 1.4vw, 24px);
        gap: clamp(10px, 0.9vw, 16px);
      }

      body[data-screen="game"] .shell-head .brand {
        gap: clamp(10px, 0.8vw, 14px);
      }

      body[data-screen="game"] .brand-logo {
        width: clamp(34px, 2.2vw, 42px);
        height: clamp(34px, 2.2vw, 42px);
        border-radius: clamp(8px, 0.5vw, 10px);
      }

      body[data-screen="game"] .brand-logo::after {
        inset: clamp(8px, 0.52vw, 10px);
      }

      body[data-screen="game"] .shell-head .brand h1 {
        font-size: clamp(18px, 1.08vw, 22px);
      }

      body[data-screen="game"] .shell-head .brand .sub {
        font-size: clamp(12px, 0.72vw, 14px);
      }

      body[data-screen="game"] .shell-head-context,
      body[data-screen="game"] .shell-head-actions {
        gap: clamp(8px, 0.6vw, 10px);
      }

      body[data-screen="game"] .shell-head-tools,
      body[data-screen="game"] .shell-head-extra {
        gap: clamp(6px, 0.45vw, 8px);
        padding-left: clamp(8px, 0.55vw, 10px);
      }

      body[data-screen="game"] .shell-head .btn {
        font-size: clamp(13px, 0.82vw, 15px);
        padding: clamp(8px, 0.55vw, 10px) clamp(10px, 0.7vw, 13px);
      }

      body[data-screen="game"] .shell-head .btn.icon {
        width: clamp(36px, 2.25vw, 42px);
        height: clamp(36px, 2.25vw, 42px);
        min-width: clamp(36px, 2.25vw, 42px);
        min-height: clamp(36px, 2.25vw, 42px);
      }

      body[data-screen="game"] .shell-head .btn.icon svg {
        width: clamp(18px, 1.05vw, 20px);
        height: clamp(18px, 1.05vw, 20px);
      }

      body[data-screen="game"] .shell-head #btn-mute.btn.icon svg {
        width: clamp(20px, 1.15vw, 22px);
        height: clamp(20px, 1.15vw, 22px);
      }
    }

    @media (min-width: 981px) and (max-width: 1600px) {
      body[data-screen="game"] .shell-head {
        min-height: clamp(70px, 6.8vh, 86px);
        padding: clamp(14px, 1.6vh, 20px) clamp(18px, 1.6vw, 26px);
      }

      body[data-screen="game"] .shell-head .brand h1 {
        font-size: clamp(20px, 1.28vw, 25px);
      }

      body[data-screen="game"] .shell-head .brand .sub {
        font-size: clamp(13px, 0.88vw, 16px);
      }

      body[data-screen="game"] .shell-head .btn {
        font-size: clamp(15px, 0.98vw, 17px);
        padding: clamp(9px, 0.66vw, 12px) clamp(12px, 0.86vw, 15px);
      }

      body[data-screen="game"] .shell-head .btn.icon {
        width: clamp(38px, 2.35vw, 44px);
        height: clamp(38px, 2.35vw, 44px);
        min-width: clamp(38px, 2.35vw, 44px);
        min-height: clamp(38px, 2.35vw, 44px);
      }

      body[data-screen="game"] .shell-head .btn.icon svg {
        width: clamp(18px, 1.08vw, 21px);
        height: clamp(18px, 1.08vw, 21px);
      }

      body[data-screen="game"] .shell-head #btn-mute.btn.icon svg {
        width: clamp(20px, 1.18vw, 23px);
        height: clamp(20px, 1.18vw, 23px);
      }
    }

    @media (min-width: 1366px) {
      body[data-screen="game"] .shell-head .brand h1 {
        font-size: clamp(22px, 0.85vw + 8px, 30px);
      }

      body[data-screen="game"] .shell-head .brand .sub {
        font-size: clamp(13px, 0.45vw + 4px, 18px);
      }

      body[data-screen="game"] .shell-head .btn {
        font-size: clamp(15px, 0.42vw + 7px, 19px);
        padding: clamp(10px, 0.35vw + 4px, 13px) clamp(12px, 0.45vw + 5px, 16px);
      }
    }

    @media (max-width: 980px) {
      body[data-screen="game"] .arena-shell-head {
        width: 95%;
        max-width: 95%;
        margin-top: 10px;
      }
    }

    /* ==========================================================================
       Mobile UX Overhaul (Moulin + shared game shell + Moulin online + modals)
       ========================================================================== */
    @media (max-width: 980px) {
      /* Shared top shell on game screens (Moulin + Gomoku via app.css import) */
      body[data-screen="game"] .shell-head {
        grid-template-columns: 1fr;
        align-items: stretch;
        gap: 10px;
        top: calc(env(safe-area-inset-top) + 6px);
        min-height: 0;
        padding: 12px;
        border-radius: 12px;
      }

      body[data-screen="game"] .shell-head .brand {
        gap: 10px;
      }

      body[data-screen="game"] .shell-head .brand h1 {
        font-size: 19px;
      }

      body[data-screen="game"] .shell-head .brand .sub {
        font-size: 12px;
        line-height: 1.24;
        letter-spacing: .02em;
      }

      body[data-screen="game"] .shell-head-context {
        width: 100%;
        justify-content: flex-start;
        min-height: 0;
      }

      body[data-screen="game"] .shell-head-context:empty {
        display: none;
      }

      body[data-screen="game"] .shell-head-actions {
        width: 100%;
        justify-content: flex-start;
        gap: 8px;
      }

      body[data-screen="game"] .shell-head .btn {
        min-height: 42px;
        font-size: 14px;
        padding: 10px 12px;
      }

      body[data-screen="game"] .shell-head .btn.icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
      }

      body[data-screen="game"] .shell-head .btn.icon svg {
        width: 18px;
        height: 18px;
      }

      body[data-screen="game"] .shell-head #btn-mute.btn.icon svg {
        width: 20px;
        height: 20px;
      }

      body[data-screen="game"] .shell-head-extra {
        order: 2;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
        gap: 8px;
        border-left: none;
        padding-left: 0;
        margin-left: 0;
      }

      body[data-screen="game"] .shell-head-extra .btn {
        width: 100%;
        justify-content: center;
      }

      body[data-screen="game"] .shell-head-tools {
        order: 3;
        margin-left: auto;
        border-left: none;
        padding-left: 0;
      }
    }

    @media (max-width: 980px) {
      :root {
        --alignora-safe-x: max(env(safe-area-inset-left), env(safe-area-inset-right));
      }

      /* Moulin game screen mobile layout */
      body[data-game="moulin"][data-screen="game"] {
        overflow: auto;
      }

      body[data-game="moulin"][data-screen="game"] #app.app.game-app {
        width: 100%;
        max-width: none;
        min-height: 100dvh;
        height: auto;
        padding:
          max(8px, env(safe-area-inset-top))
          max(8px, var(--alignora-safe-x))
          max(10px, env(safe-area-inset-bottom))
          max(8px, var(--alignora-safe-x));
        box-sizing: border-box;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena {
        width: 100%;
        min-height: calc(100dvh - max(16px, env(safe-area-inset-top)) - max(10px, env(safe-area-inset-bottom)));
        overflow: visible;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-shell-head {
        width: calc(100% - 2px);
        max-width: calc(100% - 2px);
        margin: 0 auto;
      }

      body[data-game="moulin"][data-screen="game"] .arena-stage {
        width: calc(100% - 2px);
        max-width: calc(100% - 2px);
        margin: 8px auto max(2.5dvh, env(safe-area-inset-bottom));
        grid-template-columns: 1fr !important;
        grid-template-rows: auto auto auto;
        overflow: visible;
        box-sizing: border-box;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 10px 12px;
        padding: 12px;
        overflow: visible;
        border-left: none;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.05);
      }

      body[data-game="moulin"][data-screen="game"] .arena-player.player-right {
        border-left: none;
        border-top: 1px solid rgba(255,255,255,.05);
        border-bottom: none;
      }

      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-player,
      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .arena-player.player-right {
        border-color: rgba(0,0,0,.07);
      }

      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-ident,
      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-clock,
      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-phase,
      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-stats,
      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-ai,
      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-side-pick {
        grid-column: 1 / -1;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player > .ap-sep {
        display: none;
      }

      body[data-game="moulin"][data-screen="game"] .ap-ident {
        gap: 10px;
      }

      body[data-game="moulin"][data-screen="game"] .ap-jewel {
        width: 26px;
        height: 26px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-name {
        font-size: 16px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-role,
      body[data-game="moulin"][data-screen="game"] .arena-player .ap-pion-label,
      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-label {
        font-size: 10px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-time {
        font-size: clamp(24px, 7vw, 32px);
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-avg {
        font-size: 12px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-phase {
        font-size: 10px;
        padding: 4px 10px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-pion-row {
        min-height: 16px;
        gap: 4px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .a-pip {
        width: 13px;
        height: 13px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-stats {
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-stat {
        min-height: 56px;
        padding: 8px 6px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-stat-v {
        font-size: 17px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-stat-k {
        font-size: 9px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-row {
        align-items: center;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-row input[type="range"] {
        min-height: 30px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-val {
        min-width: 58px;
        font-size: 12px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-desc {
        font-size: 10px;
        line-height: 1.36;
      }

      body[data-game="moulin"][data-screen="game"] .arena-center {
        padding: 10px 10px 12px;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-board-zone {
        width: 100%;
      }

      body[data-game="moulin"][data-screen="game"] .arena-board-zone .board-wrap {
        --moulin-mobile-board-size: min(calc(100% - 2px), max(220px, calc(100dvh - 360px)));
        width: min(var(--moulin-mobile-board-size), 640px);
        height: min(var(--moulin-mobile-board-size), 640px);
        max-width: 100%;
        max-height: none;
        padding: clamp(10px, 2.2vw, 14px);
        border-radius: 16px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-board-zone svg {
        touch-action: manipulation;
      }

      body[data-game="moulin"][data-screen="game"] .arena-foot {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-foot .btn {
        width: 100%;
        min-width: 0;
        padding: 10px 12px;
        font-size: 14px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-foot .btn:last-child:nth-child(odd) {
        grid-column: 1 / -1;
      }
    }

    @media (max-width: 640px) {
      body[data-screen="game"] .shell-head {
        padding: 10px;
        gap: 8px;
      }

      body[data-screen="game"] .shell-head .brand h1 {
        font-size: 18px;
      }

      body[data-screen="game"] .shell-head .brand .sub {
        font-size: 11px;
      }

      body[data-screen="game"] .shell-head .btn {
        min-height: 40px;
        font-size: 13px;
        padding: 9px 10px;
      }

      body[data-screen="game"] .shell-head .btn.icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
        min-height: 38px;
      }

      body[data-screen="game"] .shell-head-extra {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body[data-game="moulin"][data-screen="game"] .arena-player {
        grid-template-columns: 1fr;
        gap: 8px;
        padding: 10px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-stats {
        gap: 6px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-stat {
        min-height: 52px;
        padding: 7px 5px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-time {
        font-size: clamp(22px, 7.4vw, 28px);
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-avg,
      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-val {
        font-size: 11px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-player .ap-ai-desc {
        font-size: 9px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-board-zone .board-wrap {
        --moulin-mobile-board-size: min(calc(100% - 2px), max(220px, calc(100dvh - 400px)));
        width: min(var(--moulin-mobile-board-size), 560px);
        height: min(var(--moulin-mobile-board-size), 560px);
        padding: 8px;
      }
    }

    @media (max-width: 420px) {
      body[data-game="moulin"][data-screen="game"] #app.app.game-app {
        padding:
          max(6px, env(safe-area-inset-top))
          max(6px, var(--alignora-safe-x))
          max(8px, env(safe-area-inset-bottom))
          max(6px, var(--alignora-safe-x));
      }

      body[data-game="moulin"][data-screen="game"] .arena-center {
        padding: 8px 6px 10px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-board-zone .board-wrap {
        --moulin-mobile-board-size: min(calc(100% - 2px), max(210px, calc(100dvh - 420px)));
        padding: 7px;
        border-radius: 14px;
      }

      body[data-game="moulin"][data-screen="game"] .arena-foot {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 980px) {
      /* Moulin online screens */
      body:is([data-screen="online-home"], [data-screen="online-lobby"]) .menu-shell {
        width: 100%;
        max-width: 100%;
        min-height: 100dvh;
        padding:
          max(8px, env(safe-area-inset-top))
          max(8px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(8px, env(safe-area-inset-left));
        gap: 10px;
      }

      body:is([data-screen="online-home"], [data-screen="online-lobby"]) .screen-panel {
        border-radius: 12px;
        overflow: hidden;
      }

      body[data-screen="online-home"] .online-grid {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
      }

      body[data-screen="online-home"] .online-grid > .menu-card:first-child,
      body[data-screen="online-home"] .online-grid > .menu-card:last-child {
        border: none;
        border-radius: 0;
        padding: 14px;
      }

      body[data-screen="online-home"] .online-grid > .menu-card:last-child {
        border-top: 1px solid rgba(255,255,255,.05);
      }

      :root[data-theme="light"] body[data-screen="online-home"] .online-grid > .menu-card:last-child {
        border-top-color: rgba(0,0,0,.07);
      }

      body[data-screen="online-home"] .seg {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      body[data-screen="online-home"] .seg .btn {
        min-width: 0;
        width: 100%;
        min-height: 42px;
      }

      body[data-screen="online-home"] .field > div[style*="display:flex"] {
        flex-wrap: wrap;
      }

      body[data-screen="online-home"] #online-join-code {
        min-width: 0;
        flex: 1 1 100%;
      }

      body[data-screen="online-home"] #online-join-code-btn {
        min-height: 42px;
        width: 100%;
      }

      body[data-screen="online-home"] .online-clock-picker {
        padding: 10px;
        gap: 8px;
      }

      body[data-screen="online-home"] .online-clock-picker-kicker {
        font-size: 10px;
      }

      body[data-screen="online-home"] .online-clock-picker-value {
        font-size: 11px;
        padding: 4px 8px;
      }

      body[data-screen="online-home"] .online-clock-slider-wrap {
        --online-clock-thumb-size: 18px;
      }

      body[data-screen="online-home"] .online-clock-slider-scale span {
        font-size: 10px;
      }

      body[data-screen="online-home"] .list {
        max-height: none;
        overflow: visible;
        padding-right: 0;
      }

      body[data-screen="online-home"] .lobby-item {
        grid-template-columns: 1fr;
        gap: 12px;
        align-items: start;
        padding: 12px;
      }

      body[data-screen="online-home"] .lobby-item > div:last-child {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px !important;
        justify-content: stretch !important;
      }

      body[data-screen="online-home"] .lobby-item [data-private-code-input] {
        width: 100% !important;
        min-width: 0 !important;
      }

      body[data-screen="online-home"] .lobby-item [data-join-lobby],
      body[data-screen="online-home"] .lobby-item [data-join-private-lobby] {
        width: 100%;
        min-height: 42px;
      }

      body[data-screen="online-home"] .lobby-meta {
        gap: 6px;
      }

      body[data-screen="online-home"] .badge {
        font-size: 11px;
        padding: 4px 8px;
      }

      body[data-screen="online-home"] .online-status-bar {
        align-items: flex-start;
      }

      body[data-screen="online-lobby"] .lobby-stage {
        padding: 12px;
        gap: 10px;
      }

      body[data-screen="online-lobby"] .lobby-stage > div:first-child {
        gap: 10px;
      }

      body[data-screen="online-lobby"] .lobby-stage > div:first-child > div:last-child {
        width: 100%;
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 8px !important;
      }

      body[data-screen="online-lobby"] .lobby-stage > div:first-child > div:last-child .btn {
        width: 100%;
        min-height: 42px;
      }

      body[data-screen="online-lobby"] .player-slots {
        grid-template-columns: 1fr;
        gap: 10px;
      }

      body[data-screen="online-lobby"] .player-slot {
        min-height: 0;
        padding: 12px;
      }
    }

    @media (min-width: 560px) and (max-width: 980px) {
      body[data-screen="online-home"] .seg {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      body[data-screen="online-home"] .lobby-item > div:last-child {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
      }

      body[data-screen="online-home"] .lobby-item [data-join-private-lobby] {
        width: auto;
        min-width: 130px;
      }

      body[data-screen="online-home"] .lobby-item [data-join-lobby] {
        width: auto;
        min-width: 130px;
        justify-self: end;
      }
    }

    @media (max-width: 420px) {
      body:is([data-screen="online-home"], [data-screen="online-lobby"]) .small {
        font-size: 11px;
      }

      body[data-screen="online-home"] .badge,
      body[data-screen="online-lobby"] .badge {
        font-size: 10px;
        padding: 4px 7px;
      }

      body[data-screen="online-home"] .lobby-item,
      body[data-screen="online-lobby"] .player-slot {
        padding: 10px;
      }

      body[data-screen="online-home"] .online-clock-slider-scale span {
        font-size: 9px;
      }
    }

    @media (max-width: 980px) {
      /* Global modals (rules / win) */
      .win {
        padding:
          max(8px, env(safe-area-inset-top))
          max(8px, env(safe-area-inset-right))
          max(10px, env(safe-area-inset-bottom))
          max(8px, env(safe-area-inset-left));
        box-sizing: border-box;
      }

      .win .card,
      #rules .card {
        width: min(100%, calc(100vw - 16px));
        max-width: none;
        border-radius: 14px;
        padding: 14px;
      }

      .win .card h3,
      #rules h3 {
        font-size: clamp(18px, 5vw, 22px);
        margin-bottom: 8px;
      }

      .win .row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      .win .row .btn {
        width: 100%;
        min-height: 42px;
      }

      .rules-body {
        font-size: 14px;
        line-height: 1.55;
        padding: 4px 2px;
      }

      #rules-body.rules-body {
        max-height: min(58dvh, 420px) !important;
      }
    }

    /* ==========================================================================
       Mobile Game Focus Mode (Moulin first)
       Board-first UX: side panels hidden, info/actions moved to drawer.
       ========================================================================== */
    @media (max-width: 980px) {
      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .shell-head-extra {
        display: none !important;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-stage {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr !important;
        width: calc(100% - 2px);
        max-width: calc(100% - 2px);
        box-sizing: border-box;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-stage > .arena-player {
        display: none !important;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-center {
        width: 100%;
        padding: 8px 6px 10px;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-board-zone {
        width: 100%;
        flex: 1 1 auto;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-board-zone .board-wrap {
        --moulin-mobile-focus-board: min(calc(100% - 2px), max(230px, calc(100dvh - 255px)));
        width: min(var(--moulin-mobile-focus-board), 700px);
        height: min(var(--moulin-mobile-focus-board), 700px);
        margin: 0 auto;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .mobile-focus-hud {
        width: 100%;
        display: grid;
        gap: 8px;
        border: 1px solid rgba(255,255,255,.06);
        background: rgba(8,12,18,.58);
        border-radius: 12px;
        padding: 10px;
        box-sizing: border-box;
      }

      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .mobile-focus-hud {
        border-color: rgba(0,0,0,.08);
        background: rgba(255,248,238,.72);
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-hud-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-turn {
        font-size: 13px;
        color: var(--chalk);
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-turn b {
        color: var(--gold);
        font-family: "Playfair Display", serif;
        font-weight: 600;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-phase {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 28px;
        padding: 4px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,.08);
        background: rgba(255,255,255,.02);
        color: var(--stone);
        font-family: "JetBrains Mono", monospace;
        font-size: 10px;
        letter-spacing: .05em;
        text-transform: uppercase;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-phase.warn {
        border-color: rgba(255,204,102,.30);
        background: rgba(255,204,102,.08);
        color: #ffe0a0;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timers {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer {
        width: 100%;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 8px;
        min-height: 40px;
        padding: 8px 10px;
        border-radius: 10px;
        border: 1px solid rgba(255,255,255,.06);
        background: rgba(255,255,255,.02);
        color: inherit;
        text-align: left;
        box-sizing: border-box;
        cursor: pointer;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer.active {
        border-color: rgba(184,150,92,.28);
        box-shadow: inset 0 0 0 1px rgba(184,150,92,.10);
        background: rgba(184,150,92,.06);
      }

      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .mobile-focus-timer {
        border-color: rgba(0,0,0,.08);
        background: rgba(255,255,255,.46);
      }

      :root[data-theme="light"] body[data-game="moulin"][data-screen="game"] .mobile-focus-timer.active {
        border-color: rgba(169,120,54,.28);
        background: rgba(169,120,54,.07);
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer .stone {
        width: 14px;
        height: 14px;
        margin: 0;
        flex-shrink: 0;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer-name {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 12px;
        color: var(--stone);
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer-time {
        font-family: "JetBrains Mono", monospace;
        font-size: 13px;
        color: var(--chalk);
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-actions .btn {
        width: 100%;
        min-height: 42px;
        justify-content: center;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-note {
        font-size: 12px;
        color: var(--stone);
        line-height: 1.3;
      }

      body[data-game="moulin"][data-screen="game"] .details-drawer .mobile-drawer-actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
      }

      body[data-game="moulin"][data-screen="game"] .details-drawer .mobile-drawer-actions .btn {
        width: 100%;
        min-height: 42px;
      }

      body[data-game="moulin"][data-screen="game"] .details-drawer .details-drawer-tools {
        gap: 8px;
      }
    }

    @media (min-width: 560px) and (max-width: 980px) {
      body[data-game="moulin"][data-screen="game"] .mobile-focus-actions {
        grid-template-columns: 1fr;
      }

      body[data-game="moulin"][data-screen="game"] .details-drawer .mobile-drawer-actions {
        grid-template-columns: repeat(3, minmax(0, 1fr));
      }
    }

    @media (max-width: 480px) {
      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .mobile-focus-hud {
        padding: 8px;
        gap: 7px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-turn {
        font-size: 12px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-phase {
        font-size: 9px;
        min-height: 26px;
        padding: 3px 8px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timers {
        grid-template-columns: 1fr;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer {
        min-height: 38px;
        padding: 7px 9px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer-name {
        font-size: 11px;
      }

      body[data-game="moulin"][data-screen="game"] .mobile-focus-timer-time {
        font-size: 12px;
      }

      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-board-zone .board-wrap {
        --moulin-mobile-focus-board: min(calc(100% - 2px), max(220px, calc(100dvh - 292px)));
      }
    }

    /* Mobile native page scrolling safeguard:
       keep document scroll enabled even with full-screen game shells. */
    @media (max-width: 980px) {
      html, body {
        height: auto !important;
        min-height: 100% !important;
        width: 100dvw !important;
        max-width: 100dvw !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom;
      }

      body {
        display: block !important;
      }

      #app.app,
      #app.app.menu-app,
      #app.app.game-app,
      #app.app.gomoku-game {
        width: 100dvw !important;
        max-width: 100dvw !important;
        height: auto !important;
        max-height: none !important;
        min-height: 100dvh !important;
        overflow: visible !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }

      body[data-game="moulin"][data-screen="game"] .arena-shell-head,
      body[data-game="moulin"][data-screen="game"] .arena-stage {
        width: min(100%, calc(100dvw - var(--alignora-safe-x) - var(--alignora-safe-x))) !important;
        max-width: min(100%, calc(100dvw - var(--alignora-safe-x) - var(--alignora-safe-x))) !important;
      }

      .app,
      .menu-shell,
      .arena-shell-head,
      .arena-stage,
      .gomoku-stage {
        margin-left: auto !important;
        margin-right: auto !important;
      }

      body[data-screen="game"] .shell-head,
      body[data-screen="game"] .arena-shell-head,
      body[data-screen="game"] .arena-stage,
      body[data-game="gomoku"][data-screen="game"] .gomoku-stage {
        box-sizing: border-box !important;
      }
    }

    /* Final mobile anti-offset lock:
       keep symmetric horizontal gutters around boards. */
    @media (max-width: 980px) {
      body[data-game="moulin"][data-screen="game"] .arena-center {
        padding-left: 8px !important;
        padding-right: 8px !important;
        box-sizing: border-box !important;
      }

      body[data-game="moulin"][data-screen="game"] .arena-board-zone .board-wrap,
      body[data-game="moulin"][data-screen="game"] .game-arena.mobile-focus-mode .arena-board-zone .board-wrap {
        width: min(560px, calc(100% - 16px)) !important;
        max-width: min(560px, calc(100% - 16px)) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
      }
    }