/* =========================================================
       VACUUM — INTERFACE START
       ---------------------------------------------------------
       Rules for future edits:
       - Preserve working behavior before adding mechanics.
       - Meaningful numbers live in :root or JS CONFIG.
       - Layout, board geography, rendering, and rules are separate jobs.
       ========================================================= */

    :root{
      /* Lock the board palette; browser auto-darkening can distort player colors. */
      color-scheme:only light;

      /* JS-owned board sizing values; recalculated on load/resize. */
      --board-px:600px;
      --cell-px:48px;
      --grid-line-px:4px;
      --grid-step-px:calc(var(--cell-px) + var(--grid-line-px));

      /* Page / shell */
      --page-bg:#111;
      --app-font:system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
      --app-width:100vw;
      --app-height:100vh;
      --panel-bg:#1f1f1f;
      --panel-fg:#ddd;
      --panel-muted:#999;
      --panel-title-fg:#f3f3f3;
      --panel-section-bg:#171717;
      --panel-border:#333;
      --panel-padding:12px;
      --panel-gap:10px;

      /* Current-player right panel color. Driven by turn state. */
      --player-1-piece-bg:#c92b2b;
      --player-2-piece-bg:#d2a21f;
      --player-3-piece-bg:#1f9d42;
      --player-4-piece-bg:#d97818;
      --neutral-piece-bg:#777777;
      --player-1-piece-edge:#7e1111;
      --player-2-piece-edge:#7f5f07;
      --player-3-piece-edge:#0b5d24;
      --player-4-piece-edge:#7a3a05;
      --neutral-piece-edge:#3f3f3f;
      --player-1-perimeter-bg:#f2a0a0;
      --player-2-perimeter-bg:#fff96a;
      --player-3-perimeter-bg:#b8f0c2;
      --player-4-perimeter-bg:#e9902a;
      --right-panel-current-player-bg:var(--player-1-perimeter-bg);
      --right-panel-current-player-fg:#fff;
      --right-panel-section-bg:#111111;
      --right-panel-border:#333333;

      --left-panel-px:390px;
      --left-panel-min-px:64px;
      --left-panel-resize-zone-px:14px;
      --right-panel-px:280px;
      --top-panel-px:178px;
      --top-panel-min-px:82px;
      --center-padding-px:12px;
      --center-frame-px:12px;
      --center-frame-a:#8b5a2b;
      --center-frame-b:#7a4e24;
      --ocean-base:#07234A;
      --center-stripe-start:0px;
      --center-stripe-a:6px;
      --center-stripe-b:12px;

      /* Board */
      --board-bg:#000000;
      --grid-line:#000;
      --tile-radius:6px;
      --tile-hover:#00ff55;
      --tile-hover-width:3px;
      --tile-hover-offset:-2px;
      --tile-cursor:pointer;
      --tile-cursor-void:default;
      --tile-vacuum-invalid:#ff2222;
      --tile-vacuum-outline-width:4px;
      --tile-drag-origin:#00ff55;
      --tile-drag-origin-soft:rgba(0,255,85,.26);
      --tile-drag-origin-strong:rgba(0,255,85,.86);
      --tile-drag-over:#ffe761;
      --tile-teleport-cooldown:#ff2222;
      --tile-teleport-cooldown-soft:rgba(255,34,34,.22);
      --tile-teleport-cooldown-strong:rgba(255,34,34,.76);

      /* Tile colors by geography */
      --tile-void-bg:#000;
      --tile-board-bg:#6fa9e6;
      --tile-board-shine:rgba(255,255,255,.35);
      --tile-pedestal-bg:#0b2a66;
      --tile-pedestal-shine:rgba(255,255,255,.12);
      --tile-perimeter-1-bg:var(--player-1-perimeter-bg);
      --tile-perimeter-2-bg:var(--player-2-perimeter-bg);
      --tile-perimeter-3-bg:var(--player-3-perimeter-bg);
      --tile-perimeter-4-bg:var(--player-4-perimeter-bg);
      --tile-perimeter-shine:rgba(255,255,255,.24);

      /* Buttons */
      --button-bg:#111;
      --button-unavailable-bg:#171717;
      --button-action-enabled-bg:#000;
      --button-fg:#fff;
      --button-radius:6px;
      --button-border:#333;
      --button-height:32px;
      --button-font-size:14px;
      --button-gap:6px;
      --button-control-bg:#0b2a66;
      --button-control-fg:#ffe761;
      --button-commit-bg:#116611;
      --button-commit-pulse-bg:#24aa24;
      --button-selected-pulse-bg:#164d26;
      --button-selected-pulse-glow:rgba(0,255,85,.35);
      --button-danger-bg:#b00000;
      --button-danger-fg:#ffe761;
      --button-lit-outline:rgba(255,255,255,.90);
      --button-active-outline:rgba(255,255,255,.40);
      --button-disabled-opacity:.38;
      --button-disabled-filter:.55;

      /* Pebble slots */
      --pebble-slot-size:48%;
      --pebble-slot-inset:2%;
      --pebble-radius:50%;
      --pebble-border-width:1px;
      --pebble-inset-dark-x:-6px;
      --pebble-inset-dark-y:-6px;
      --pebble-inset-dark-blur:8px;
      --pebble-inset-light-x:5px;
      --pebble-inset-light-y:5px;
      --pebble-inset-light-blur:6px;
      --pebble-drop-x:2px;
      --pebble-drop-y:3px;
      --pebble-drop-blur:5px;
      --pebble-selected-outline:#fff;
      --pebble-selected-outline-width:3px;
      --pebble-selected-outline-offset:-1px;
      --stone-size:66%;
      --stone-radius:50%;
      --stone-border-width:2px;
      --stone-inset-dark-x:-10px;
      --stone-inset-dark-y:-10px;
      --stone-inset-dark-blur:14px;
      --stone-inset-light-x:8px;
      --stone-inset-light-y:8px;
      --stone-inset-light-blur:10px;
      --stone-drop-x:3px;
      --stone-drop-y:5px;
      --stone-drop-blur:8px;
      --boulder-size:96%;
      --boulder-radius:50% 43% 57% 46% / 40% 55% 45% 58%;
      --boulder-border-width:2px;
      --boulder-inset-dark-x:-16px;
      --boulder-inset-dark-y:-18px;
      --boulder-inset-dark-blur:18px;
      --boulder-inset-light-x:9px;
      --boulder-inset-light-y:7px;
      --boulder-inset-light-blur:8px;
      --boulder-drop-x:5px;
      --boulder-drop-y:9px;
      --boulder-drop-blur:10px;
      --boulder-ground-shadow-w:88%;
      --boulder-ground-shadow-h:23%;
      --boulder-ground-shadow-y:4%;
      --boulder-ground-shadow-blur:5px;
      --boulder-ground-shadow-alpha:.72;

      /* Left-panel action help */
      --help-title-size:18px;
      --help-kicker-size:11px;
      --help-body-size:13px;
      --help-line-height:1.32;
      --help-card-gap:8px;
      --help-pill-bg:rgba(255,255,255,.08);
      --help-rule-bg:rgba(0,0,0,.20);
      --help-rule-border:rgba(255,255,255,.08);

      /* Board coordinates */
      --coord-label-size:14px;
      --coord-label-weight:900;
      --coord-label-color:rgba(255,255,255,.94);
      --coord-label-shadow:0 1px 2px rgba(0,0,0,.85), 0 0 5px rgba(0,0,0,.70);
      --coord-label-offset-x:18px;
      --coord-label-offset-y:14px;
      --coord-label-box-px:20px;

      /* Fixed diagnostics */
      --diagnostic-row-height:1.22em;
      --diagnostic-name-min:4.4em;
      --diagnostic-value-min:2.8em;
    }

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


    /* Vacuum is color-coded; do not let browser forced-color modes rewrite board/piece colors. */
    html, body, .app-shell, .board, .tiles, .tile, .piece, .side-panel, .panel-section, button{
      forced-color-adjust:none;
    }

    body{
      margin:0;
      background:var(--page-bg);
      height:var(--app-height);
      overflow:hidden;
      font-family:var(--app-font);
      color:var(--panel-fg);
    }

    .game-loading-curtain{
      position:fixed;
      inset:0;
      z-index:100000;
      display:none;
      align-items:center;
      justify-content:center;
      background:#111;
      color:#f3f3f3;
    }

    body.game-boot-pending .game-loading-curtain{
      display:flex;
    }

    .game-loading-card{
      min-width:min(360px, calc(100vw - 40px));
      padding:26px 32px;
      border:1px solid #454545;
      border-radius:10px;
      background:#181818;
      box-shadow:0 18px 60px rgba(0,0,0,.58);
      text-align:center;
    }

    .game-loading-title{
      color:#6fa071;
      font-size:26px;
      font-weight:900;
      letter-spacing:.16em;
    }

    .game-loading-message{
      margin-top:10px;
      color:#d8d8d8;
      font-size:14px;
    }

    .app-shell{
      width:var(--app-width);
      height:var(--app-height);
      display:grid;
      grid-template-columns:var(--left-panel-px) minmax(0, 1fr) var(--right-panel-px);
      overflow:hidden;
    }

    .side-panel{
      min-width:0;
      background:var(--panel-bg);
      padding:var(--panel-padding);
      display:flex;
      flex-direction:column;
      gap:var(--panel-gap);
      overflow:hidden;
    }

    .left-panel{
      position:relative;
    }

    .left-panel-resize-handle{
      position:absolute;
      top:0;
      right:0;
      width:var(--left-panel-resize-zone-px);
      height:100%;
      cursor:ew-resize;
      z-index:50;
      user-select:none;
      touch-action:none;
    }

    .left-panel-resize-handle::before{
      content:"↔";
      position:absolute;
      top:50%;
      right:2px;
      transform:translateY(-50%);
      width:22px;
      height:22px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.62);
      border:1px solid rgba(255,255,255,.26);
      color:rgba(255,255,255,.86);
      font-size:13px;
      font-weight:900;
      line-height:1;
      opacity:.58;
      pointer-events:none;
    }

    .left-panel-resize-handle:hover::before,
    body.left-panel-resizing .left-panel-resize-handle::before{
      opacity:1;
      background:rgba(0,0,0,.82);
      border-color:rgba(255,255,255,.50);
    }

    body.left-panel-resizing,
    body.left-panel-resizing *{
      cursor:ew-resize !important;
      user-select:none !important;
    }

    body.top-panel-resizing,
    body.top-panel-resizing *{
      cursor:ns-resize !important;
      user-select:none !important;
    }

    [hidden]{
      display:none !important;
    }

    .panel-title-row{
      display:grid;
      grid-template-columns:auto minmax(46px, 1fr) auto auto;
      align-items:flex-start;
      gap:8px;
      min-width:0;
      flex:0 0 auto;
    }

    .left-mode-toggle{
      flex:0 0 auto;
      width:auto;
      min-width:42px;
      height:auto;
      margin:0;
      padding:3px 8px;
      border:1px solid rgba(255,255,255,.24);
      border-radius:999px;
      background:rgba(0,0,0,.38);
      color:#fff3a0;
      font-size:calc(var(--button-font-size) * .74);
      font-weight:850;
      line-height:1.1;
      cursor:pointer;
    }

    .left-mode-toggle:hover,
    .left-mode-toggle:focus{
      background:rgba(11,42,102,.88);
      color:#ffe761;
      outline:none;
    }

    .left-log-controls{
      flex:0 0 auto;
      margin-left:0;
      display:grid;
      grid-template-columns:28px 20px;
      grid-template-rows:14px 14px;
      gap:2px 4px;
      align-items:stretch;
    }

    .left-log-copy{
      grid-row:1 / span 2;
      grid-column:1;
      width:28px;
      min-width:28px;
      height:30px;
      margin:0;
      padding:0;
      border:1px solid rgba(255,255,255,.26);
      border-radius:7px;
      background:rgba(0,0,0,.48);
      color:#ffe761;
      font-size:18px;
      font-weight:900;
      line-height:1;
      cursor:pointer;
    }

    .left-log-jump-stack{
      grid-row:1 / span 2;
      grid-column:2;
      display:grid;
      grid-template-rows:1fr 1fr;
      gap:2px;
    }

    .left-log-jump{
      width:20px;
      min-width:20px;
      height:14px;
      margin:0;
      padding:0;
      border:1px solid rgba(255,255,255,.26);
      border-radius:5px;
      background:rgba(0,0,0,.48);
      color:#ffe761;
      font-size:11px;
      font-weight:900;
      line-height:1;
      cursor:pointer;
    }


    .copy-icon{
      position:relative;
      display:inline-block;
      width:17px;
      height:17px;
      vertical-align:middle;
    }

    .copy-icon::before,
    .copy-icon::after{
      content:"";
      position:absolute;
      width:10px;
      height:12px;
      border:2px solid currentColor;
      border-radius:2px;
      background:transparent;
    }

    .copy-icon::before{
      left:2px;
      top:4px;
    }

    .copy-icon::after{
      left:6px;
      top:0;
    }

    .left-log-copy:hover,
    .left-log-copy:focus,
    .left-log-jump:hover,
    .left-log-jump:focus{
      background:rgba(11,42,102,.92);
      color:#fff3a0;
      outline:none;
    }

    .left-lobby-button{
      flex:0 0 auto;
      width:34px;
      min-width:34px;
      max-width:max-content;
      height:auto;
      min-height:0;
      align-self:flex-start;
      margin:0 0 0 auto;
      padding:3px 6px;
      border:1px solid rgba(255,255,255,.24);
      border-radius:999px;
      background:rgba(11,42,102,.78);
      color:#fff3a0;
      font-size:16px;
      font-weight:850;
      line-height:1.1;
      cursor:pointer;
      white-space:nowrap;
    }

    .left-lobby-button:hover,
    .left-lobby-button:focus{
      background:rgba(11,42,102,.96);
      color:#ffe761;
      outline:none;
    }

    .left-mode-panel{
      flex:1 1 auto;
      min-height:0;
      display:flex;
      flex-direction:column;
      gap:var(--panel-gap);
    }

    .panel-title{
      color:var(--panel-title-fg);
      font-weight:700;
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:1px;
      flex-wrap:nowrap;
      white-space:nowrap;
      min-width:0;
      flex:1 1 auto;
    }

    .app-title-main{
      font-size:calc(var(--button-font-size) * 1.24);
      line-height:1.08;
      flex:0 0 auto;
      display:flex;
      align-items:center;
      gap:6px;
    }

    .game-session-timer{
      grid-column:2;
      width:auto;
      min-width:48px;
      height:24px;
      min-height:24px;
      justify-self:center;
      align-self:center;
      padding:2px 8px;
      border:1px solid #686868;
      border-radius:6px;
      background:#050505;
      color:#ffe761;
      font-size:calc(var(--button-font-size) * .75);
      font-weight:850;
      line-height:1;
    }

    .game-session-timer:hover,
    .game-session-timer:focus{ background:#151515; outline:1px solid rgba(255,255,255,.28); }

    .game-session-timer.session-expiring{ color:#ff2d2d; }

    .app-title-meta{
      display:block;
      margin-top:0;
      padding:0;
      border:0;
      color:var(--panel-muted);
      font-size:calc(var(--button-font-size) * .78);
      line-height:1.1;
      font-weight:650;
      letter-spacing:.01em;
      flex:0 1 auto;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .panel-note{
      color:var(--panel-muted);
      font-size:var(--button-font-size);
      line-height:1.35;
    }

    .context-menu-hint{
      margin-top:6px;
      font-size:calc(var(--button-font-size) * .72);
      line-height:1.15;
      opacity:.72;
    }

    .help-panel{
      flex:1 1 auto;
      min-height:0;
      overflow:auto;
    }

    .help-content{
      display:flex;
      flex-direction:column;
      gap:var(--help-card-gap);
      color:var(--panel-fg);
      font-size:var(--help-body-size);
      line-height:var(--help-line-height);
    }

    .help-kicker{
      align-self:flex-start;
      padding:2px 7px;
      border-radius:999px;
      background:var(--help-pill-bg);
      color:var(--panel-muted);
      font-size:var(--help-kicker-size);
      font-weight:800;
      letter-spacing:.04em;
      text-transform:uppercase;
    }

    .help-title{
      color:var(--panel-title-fg);
      font-size:var(--help-title-size);
      font-weight:850;
      line-height:1.08;
    }

    .help-summary{
      color:var(--panel-fg);
      font-weight:600;
    }

    .help-block{
      padding:8px;
      border:1px solid var(--help-rule-border);
      border-radius:8px;
      background:var(--help-rule-bg);
    }

    .help-block-title{
      margin-bottom:4px;
      color:var(--panel-title-fg);
      font-weight:800;
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:.03em;
    }

    .help-list{
      margin:0;
      padding-left:17px;
    }

    .help-list li{ margin:0 0 4px; }
    .help-list li:last-child{ margin-bottom:0; }

    .vacuum-context-menu{
      position:fixed;
      z-index:1000;
      min-width:150px;
      padding:6px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:8px;
      background:#171717;
      box-shadow:0 10px 22px rgba(0,0,0,.55);
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .vacuum-context-menu[hidden]{
      display:none;
    }

    .vacuum-context-menu button{
      width:100%;
      min-height:30px;
      height:auto;
      margin:0;
      padding:6px 10px;
      border:0;
      border-radius:6px;
      background:#242424;
      color:#eee;
      text-align:left;
      font:inherit;
      cursor:pointer;
    }


    .context-menu-separator{
      height:1px;
      margin:3px 2px;
      background:rgba(255,255,255,.18);
    }

    .context-menu-section-title{
      padding:2px 8px 0;
      color:var(--panel-muted);
      font-size:11px;
      font-weight:800;
      letter-spacing:.06em;
      text-transform:uppercase;
    }

    .context-menu-local-only{
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .context-menu-local-only[hidden]{
      display:none;
    }

    .vacuum-context-menu button:hover,
    .vacuum-context-menu button:focus{
      background:#0b2a66;
      color:#ffe761;
      outline:none;
    }

    .help-content strong{
      color:#fff3a0;
      font-weight:900;
    }

    .move-log-panel{
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      overflow-x:hidden;
      background:var(--panel-section-bg);
      border:1px solid var(--panel-border);
      border-radius:var(--button-radius);
      padding:var(--panel-padding);
      color:var(--panel-fg);
    }

    .move-log-content{
      display:flex;
      flex-direction:column;
      gap:2px;
      font-size:calc(var(--button-font-size) * .82);
      line-height:1.28;
      overflow-wrap:anywhere;
    }

    .move-log-empty{
      color:var(--panel-muted);
      font-style:italic;
    }

    .move-log-entry{
      padding:1px 0;
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    }

    .move-log-entry.commit{
      margin-bottom:8px;
      color:#fff3a0;
      font-weight:850;
    }

    .move-log-turn{
      margin:4px 0 2px;
      padding:4px 7px;
      border-left:5px solid currentColor;
      border-radius:6px;
      background:rgba(255,255,255,.07);
      font-weight:900;
      font-size:calc(var(--button-font-size) * .94);
      line-height:1.18;
    }

.diagnostics-section{
      flex:0 0 auto;
    }

    .diagnostics-title{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:0;
    }

    .diagnostic-tile-badge{
      flex:0 0 auto;
      padding:1px 7px;
      border:1px solid rgba(255,255,255,.18);
      border-radius:999px;
      background:rgba(0,0,0,.24);
      color:#fff3a0;
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size:calc(var(--button-font-size) * .78);
      font-weight:850;
      line-height:1.35;
      white-space:nowrap;
    }

    .diagnostic-readout{
      --diagnostic-player-count:4;
      color:var(--panel-fg);
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size:calc(var(--button-font-size) * .88);
      min-height:calc(var(--diagnostic-player-count) * var(--diagnostic-row-height));
    }

    .diagnostic-readout.empty{
      color:var(--panel-muted);
    }

    .pressure-hover-hint{
      margin-top:5px;
      font-size:calc(var(--button-font-size) * .72);
      line-height:1.15;
      opacity:.78;
    }

    .diagnostic-player-row{
      display:grid;
      grid-template-columns:minmax(var(--diagnostic-name-min), 1fr) minmax(var(--diagnostic-value-min), max-content);
      align-items:center;
      column-gap:8px;
      min-height:var(--diagnostic-row-height);
      line-height:var(--diagnostic-row-height);
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
    }

    .diagnostic-player-row.eliminated{
      text-decoration:line-through;
      opacity:.62;
    }

    .diagnostic-player-value{
      text-align:right;
    }

    .diagnostic-subtitle{
      margin:8px 0 3px;
      color:#fff3a0;
      font-size:calc(var(--button-font-size) * .76);
      font-weight:850;
      letter-spacing:.05em;
      text-transform:uppercase;
    }

    .online-boot-diagnostic{
      margin-top:7px;
      padding-top:7px;
      border-top:1px solid rgba(255,255,255,.16);
    }

    .online-boot-diagnostic[hidden]{
      display:none;
    }

    .online-boot-lines{
      max-height:9.2em;
      overflow:auto;
      color:var(--panel-fg);
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size:calc(var(--button-font-size) * .72);
      line-height:1.22;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }

    .online-debug-copy{
      width:100%;
      min-height:24px;
      height:auto;
      margin-top:6px;
      padding:4px 7px;
      font-size:calc(var(--button-font-size) * .74);
    }

    .panel-section{
      background:var(--panel-section-bg);
      border:1px solid var(--panel-border);
      border-radius:var(--button-radius);
      padding:var(--panel-padding);
    }

    .section-title{
      color:var(--panel-title-fg);
      font-weight:700;
      margin-bottom:var(--button-gap);
    }

    .right-panel{
      background:var(--right-panel-current-player-bg);
      color:var(--right-panel-current-player-fg);
    }

    .right-panel .panel-section{
      background:var(--right-panel-section-bg);
      border-color:var(--right-panel-border);
    }

    .right-panel .section-title{
      color:var(--panel-title-fg);
    }

    .right-panel .stage-title.stage-disabled{
      opacity:var(--button-disabled-opacity);
    }

    .button-row{
      display:flex;
      gap:var(--button-gap);
    }

    button{
      width:100%;
      height:var(--button-height);
      border-radius:var(--button-radius);
      border:1px solid var(--button-border);
      background:var(--button-bg);
      color:var(--button-fg);
      font-size:var(--button-font-size);
      cursor:pointer;
      user-select:none;
      touch-action:none;
    }

    .button-row button{ width:50%; }

    .panel-title-row .left-lobby-button{
      width:auto;
      min-width:62px;
      max-width:max-content;
      height:auto;
      min-height:0;
      flex:0 0 auto;
      align-self:flex-start;
      padding:3px 10px;
      line-height:1.1;
    }

    button[data-action]:not(.controlled-off){
      background:var(--button-action-enabled-bg);
    }

    .btn-control{ background:var(--button-control-bg); color:var(--button-control-fg); }
    .btn-commit{ background:var(--button-commit-bg); color:var(--button-control-fg); }
    .btn-danger{ background:var(--button-danger-bg); color:var(--button-danger-fg); }
    .resign-zone .btn-danger{ background:#e0bf26; color:#151515; }
    .resign-zone .btn-danger.resign-armed{ background:var(--button-danger-bg); color:var(--button-danger-fg); }

    button.controlled-lit{
      box-shadow:0 0 0 2px var(--button-lit-outline) inset;
    }

    button[data-control-role="commit"].controlled-lit{
      animation:commitFacePulse .82s ease-in-out infinite;
    }

    @keyframes commitFacePulse{
      0%, 100%{ background:var(--button-commit-bg); }
      50%{ background:var(--button-commit-pulse-bg); }
    }

    button.controlled-active{
      box-shadow:0 0 0 2px var(--button-lit-outline) inset, 0 0 0 4px var(--button-active-outline);
    }

    button[data-action].controlled-active{
      animation:selectedActionButtonPulse .72s ease-in-out infinite;
    }

    @keyframes selectedActionButtonPulse{
      0%, 100%{
        background:var(--button-action-enabled-bg);
        box-shadow:0 0 0 2px var(--button-lit-outline) inset, 0 0 0 4px var(--button-active-outline);
      }
      50%{
        background:var(--button-selected-pulse-bg);
        box-shadow:0 0 0 2px var(--button-lit-outline) inset, 0 0 10px 4px var(--button-selected-pulse-glow);
      }
    }

    button.controlled-off{
      background:var(--button-unavailable-bg);
      opacity:var(--button-disabled-opacity);
      filter:grayscale(var(--button-disabled-filter));
      box-shadow:none;
      cursor:not-allowed;
    }

    button:disabled{ cursor:not-allowed; }

    .right-actions{
      display:flex;
      flex-direction:column;
      gap:var(--button-gap);
    }

    .resign-zone{ margin-top:auto; }

    .center-panel{
      position:relative;
      isolation:isolate;
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:var(--center-padding-px);
      border:var(--center-frame-px) solid #04172f;
      background:var(--ocean-base);
      overflow:hidden;
    }

    .center-panel::before,
    .center-panel::after{
      content:"";
      position:absolute;
      z-index:0;
      pointer-events:none;
      will-change:transform, background-position;
    }

    .center-panel::before{
      inset:-30%;
      background:
        radial-gradient(ellipse at 16% 24%, rgba(53,128,171,.24) 0 7%, transparent 31%),
        radial-gradient(ellipse at 78% 68%, rgba(10,77,123,.42) 0 12%, transparent 38%),
        radial-gradient(ellipse at 43% 81%, rgba(90,163,187,.14) 0 6%, transparent 29%),
        linear-gradient(117deg, rgba(255,255,255,.04), transparent 22% 67%, rgba(45,119,162,.16));
      background-size:73% 61%, 91% 79%, 67% 83%, 100% 100%;
      animation:oceanDriftWide 31s ease-in-out infinite alternate;
    }

    .center-panel::after{
      inset:-18%;
      opacity:.45;
      background:
        radial-gradient(ellipse at 31% 58%, transparent 0 36%, rgba(128,195,207,.12) 41%, transparent 47%),
        radial-gradient(ellipse at 71% 30%, transparent 0 29%, rgba(91,166,189,.1) 34%, transparent 41%);
      background-size:83% 71%, 69% 87%;
      animation:oceanDriftFine 23s ease-in-out infinite alternate-reverse;
    }

    @keyframes oceanDriftWide{
      from{ transform:translate3d(-3%, -2%, 0) rotate(-.6deg) scale(1.02); }
      to{ transform:translate3d(4%, 3%, 0) rotate(.8deg) scale(1.08); }
    }

    @keyframes oceanDriftFine{
      from{ transform:translate3d(2%, -3%, 0) rotate(.4deg); }
      to{ transform:translate3d(-4%, 4%, 0) rotate(-.7deg); }
    }

    body.ocean-motion-off .center-panel::before,
    body.ocean-motion-off .center-panel::after,
    body.ocean-page-hidden .center-panel::before,
    body.ocean-page-hidden .center-panel::after{
      animation-play-state:paused;
    }

    @media (prefers-reduced-motion:reduce){
      .center-panel::before,
      .center-panel::after{ animation:none; }
    }

    .board-wrap{
      position:relative;
      z-index:2;
      width:var(--board-px);
      height:var(--board-px);
      overflow:visible;
      flex:0 0 auto;
    }

    .board-coordinate-layer{
      position:absolute;
      inset:0;
      z-index:20;
      pointer-events:none;
      font-size:var(--coord-label-size);
      font-weight:var(--coord-label-weight);
      color:var(--coord-label-color);
      text-shadow:var(--coord-label-shadow);
      font-family:Georgia, 'Times New Roman', serif;
      line-height:1;
      user-select:none;
    }

    .board-coordinate-label{
      position:absolute;
      width:var(--coord-label-box-px);
      height:var(--coord-label-box-px);
      display:flex;
      align-items:center;
      justify-content:center;
      letter-spacing:.02em;
    }

    .board-coordinate-top .board-coordinate-label{
      top:calc(-1 * var(--coord-label-offset-y));
      transform:translateX(-50%);
    }

    .board-coordinate-bottom .board-coordinate-label{
      bottom:calc(-1 * var(--coord-label-offset-y));
      transform:translateX(-50%);
    }

    .board-coordinate-left .board-coordinate-label{
      left:calc(-1 * var(--coord-label-offset-x) - var(--coord-label-box-px) * .18);
      transform:translateY(-50%);
    }

    .board-coordinate-right .board-coordinate-label{
      right:calc(-1 * var(--coord-label-offset-x) - var(--coord-label-box-px) * .18);
      transform:translateY(-50%);
    }

    .board{
      position:relative;
      width:var(--board-px);
      height:var(--board-px);
      border:0;
      background:transparent;
      overflow:visible;
    }

    .board.grid-under{
      /*
        Raised perimeter/pedestal tiles expose the board underneath. Keep that
        underlay completely black so no grid/corner pattern can show through
        barren space or around elevated tiles.
      */
      background:transparent;
      background-image:none;
    }

    .tiles{
      position:absolute;
      inset:0;
      overflow:visible;
    }

    .tile{
      position:absolute;
      border-radius:var(--tile-radius);
      outline-offset:var(--tile-hover-offset);
      cursor:var(--tile-cursor);
      user-select:none;
    }

    .tile[data-kind="void"]{
      background:transparent;
      border-radius:0;
      cursor:var(--tile-cursor-void);
    }

    .tile-grid-line,
    .tile-grid-corner{
      position:absolute;
      z-index:1;
      display:none;
      pointer-events:none;
      background:var(--grid-line);
    }

    .tile.has-grid-east > .tile-grid-east{
      display:block;
      left:100%;
      top:0;
      width:var(--grid-line-px);
      height:100%;
    }

    .tile.has-grid-south > .tile-grid-south{
      display:block;
      left:0;
      top:100%;
      width:100%;
      height:var(--grid-line-px);
    }

    .tile.has-grid-east.has-grid-south > .tile-grid-corner{
      display:block;
      left:100%;
      top:100%;
      width:var(--grid-line-px);
      height:var(--grid-line-px);
    }

    .terrain-sink-layer{
      position:absolute;
      inset:0;
      z-index:2;
      border-radius:inherit;
      opacity:0;
      pointer-events:none;
    }

    .terrain-sink-layer.active{
      animation:terrainSinkAway .52s ease-in forwards;
    }

    @keyframes terrainSinkAway{
      0%{ opacity:1; transform:translateY(0) scale(1); filter:brightness(1); }
      70%{ opacity:.72; transform:translateY(4px) scale(.985); filter:brightness(.74); }
      100%{ opacity:0; transform:translateY(8px) scale(.965); filter:brightness(.48); }
    }

    .tile[data-kind="board"]{
      background:var(--tile-board-bg);
      box-shadow:0 1px 0 var(--tile-board-shine) inset;
    }

    .tile[data-kind="pedestal"]{
      background:var(--tile-pedestal-bg);
      box-shadow:0 1px 0 var(--tile-pedestal-shine) inset;
    }

    .tile[data-kind="perimeter1"]{ background:var(--tile-perimeter-1-bg); box-shadow:0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter2"]{ background:var(--tile-perimeter-2-bg); box-shadow:0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter3"]{ background:var(--tile-perimeter-3-bg); box-shadow:0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter4"]{ background:var(--tile-perimeter-4-bg); box-shadow:0 1px 0 var(--tile-perimeter-shine) inset; }

    .tile.hovered{ outline:var(--tile-hover-width) solid var(--tile-hover); }

    .tile.vacuum-invalid{
      outline:var(--tile-vacuum-outline-width) solid var(--tile-vacuum-invalid);
    }

    .tile.drag-origin{
      outline:var(--tile-vacuum-outline-width) solid var(--tile-drag-origin);
      animation:originTilePulse .72s ease-in-out infinite;
    }

    @keyframes originTilePulse{
      0%, 100%{
        outline-color:var(--tile-drag-origin);
        box-shadow:0 0 0 0 var(--tile-drag-origin-soft);
      }
      50%{
        outline-color:var(--tile-drag-origin);
        box-shadow:0 0 0 6px var(--tile-drag-origin-strong);
      }
    }

    .tile.teleport-cooldown:not(.drag-origin){
      outline:var(--tile-vacuum-outline-width) solid var(--tile-teleport-cooldown);
      animation:teleportCooldownPulse .85s ease-in-out infinite;
    }

    @keyframes teleportCooldownPulse{
      0%, 100%{
        outline-color:var(--tile-teleport-cooldown);
        box-shadow:0 0 0 0 var(--tile-teleport-cooldown-soft);
      }
      50%{
        outline-color:var(--tile-teleport-cooldown);
        box-shadow:0 0 0 6px var(--tile-teleport-cooldown-strong);
      }
    }

    .tile.drag-over{
      outline:var(--tile-vacuum-outline-width) solid var(--tile-drag-over);
    }

    .piece-layer{
      position:absolute;
      inset:0;
      z-index:3;
      pointer-events:none;
    }

    .pebble-slot{
      position:absolute;
      width:var(--pebble-slot-size);
      height:var(--pebble-slot-size);
    }

    .pebble-slot.tl{ left:var(--pebble-slot-inset); top:var(--pebble-slot-inset); }
    .pebble-slot.tr{ right:var(--pebble-slot-inset); top:var(--pebble-slot-inset); }
    .pebble-slot.bl{ left:var(--pebble-slot-inset); bottom:var(--pebble-slot-inset); }
    .pebble-slot.br{ right:var(--pebble-slot-inset); bottom:var(--pebble-slot-inset); }

    .pebble{
      width:100%;
      height:100%;
      border-radius:var(--pebble-radius);
      background:var(--pebble-color);
      border:var(--pebble-border-width) solid var(--pebble-edge-color);
      box-shadow:
        inset var(--pebble-inset-dark-x) var(--pebble-inset-dark-y) var(--pebble-inset-dark-blur) rgba(0,0,0,.45),
        inset var(--pebble-inset-light-x) var(--pebble-inset-light-y) var(--pebble-inset-light-blur) rgba(255,255,255,.55),
        var(--pebble-drop-x) var(--pebble-drop-y) var(--pebble-drop-blur) rgba(0,0,0,.60);
    }

    .pebble.pebble-move-selected{
      outline:var(--pebble-selected-outline-width) solid var(--pebble-selected-outline);
      outline-offset:var(--pebble-selected-outline-offset);
    }

    .stone-piece,
    .boulder-piece{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .boulder-piece{
      isolation:isolate;
    }

    .boulder-piece::before{
      content:'';
      position:absolute;
      left:6%;
      bottom:var(--boulder-ground-shadow-y);
      width:var(--boulder-ground-shadow-w);
      height:var(--boulder-ground-shadow-h);
      border-radius:50%;
      background:rgba(0,0,0,var(--boulder-ground-shadow-alpha));
      filter:blur(var(--boulder-ground-shadow-blur));
      transform:rotate(-5deg) scaleX(1.08);
      z-index:0;
      pointer-events:none;
    }

    .boulder-core{
      position:relative;
      z-index:1;
      width:var(--boulder-size);
      height:var(--boulder-size);
      border-radius:52% 45% 58% 47% / 42% 55% 47% 58%;
      clip-path:polygon(17% 9%, 38% 2%, 59% 6%, 78% 17%, 91% 36%, 96% 58%, 84% 79%, 63% 94%, 38% 98%, 17% 88%, 5% 66%, 7% 31%);
      background-color:var(--boulder-color);
      background-image:
        radial-gradient(ellipse at 31% 20%, rgba(255,255,255,.38), transparent 19%),
        radial-gradient(ellipse at 52% 35%, rgba(255,255,255,.16), transparent 18%),
        radial-gradient(ellipse at 74% 73%, rgba(0,0,0,.34), transparent 27%),
        linear-gradient(145deg, rgba(255,255,255,.13), transparent 36%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.42));
      border:var(--boulder-border-width) solid var(--boulder-edge-color);
      transform:translateY(-4%) rotate(-7deg) scale(1.02);
      overflow:hidden;
      filter:drop-shadow(2px 3px 2px rgba(0,0,0,.30));
      box-shadow:
        inset -13px -17px 18px rgba(0,0,0,.62),
        inset 7px 8px 10px rgba(255,255,255,.27),
        inset 0 -8px 10px rgba(0,0,0,.22);
    }

    .boulder-core::before,
    .boulder-core::after{
      content:'';
      position:absolute;
      pointer-events:none;
    }

    .boulder-core::before{
      left:15%;
      top:15%;
      width:52%;
      height:37%;
      border-radius:53% 41% 58% 47%;
      background:
        linear-gradient(122deg, rgba(255,255,255,.20), transparent 38%),
        linear-gradient(32deg, transparent 48%, rgba(0,0,0,.22) 50%, transparent 59%);
      transform:rotate(11deg);
    }

    .boulder-core::after{
      right:9%;
      bottom:11%;
      width:43%;
      height:35%;
      border-radius:55% 43% 60% 40%;
      background:
        radial-gradient(ellipse at 56% 66%, rgba(0,0,0,.28), transparent 57%),
        linear-gradient(138deg, transparent 30%, rgba(0,0,0,.24));
      transform:rotate(-19deg);
    }

    .stone-core{
      width:var(--stone-size);
      height:var(--stone-size);
      border-radius:var(--stone-radius);
      background:var(--stone-color);
      border:var(--stone-border-width) solid var(--stone-edge-color);
      box-shadow:
        inset var(--stone-inset-dark-x) var(--stone-inset-dark-y) var(--stone-inset-dark-blur) rgba(0,0,0,.48),
        inset var(--stone-inset-light-x) var(--stone-inset-light-y) var(--stone-inset-light-blur) rgba(255,255,255,.48),
        var(--stone-drop-x) var(--stone-drop-y) var(--stone-drop-blur) rgba(0,0,0,.68);
    }


    /* =========================================================
       PORTRAIT LAYOUT
       ---------------------------------------------------------
       The normal landscape layout remains the default. When the
       viewport is tall and narrow, JS adds body.portrait-layout.
       Portrait keeps the board central, moves information to a
       resizable top shelf, and turns the right panel into a bottom
       command tray with three columns.
       ========================================================= */

    body.portrait-layout .app-shell{
      grid-template-columns:1fr;
      grid-template-rows:var(--top-panel-px) minmax(0, 1fr) auto;
    }

    body.portrait-layout .left-panel{
      grid-row:1;
      display:grid;
      grid-template-columns:minmax(180px, 40%) minmax(0, 1fr);
      grid-template-rows:auto minmax(0, 1fr) auto;
      grid-template-areas:
        "title dynamic"
        "status dynamic"
        "diagnostics dynamic";
      gap:8px 10px;
      padding:8px 12px calc(8px + var(--left-panel-resize-zone-px));
      min-height:var(--top-panel-min-px);
      overflow:hidden;
    }

    body.portrait-layout .panel-title-row{
      grid-area:title;
      align-items:center;
      min-height:0;
    }

    body.portrait-layout .panel-title{
      flex-direction:column;
      align-items:flex-start;
      gap:1px;
      white-space:normal;
    }

    body.portrait-layout .app-title-main{
      font-size:calc(var(--button-font-size) * 1.14);
    }

    body.portrait-layout .app-title-meta{
      max-width:100%;
    }

    body.portrait-layout .left-mode-panel{
      display:contents;
    }

    body.portrait-layout .left-info-panel > .panel-section:first-child{
      grid-area:status;
      min-height:0;
      overflow:auto;
    }

    body.portrait-layout .diagnostics-section{
      grid-area:diagnostics;
      min-height:max-content;
      overflow:visible;
    }

    body.portrait-layout .help-panel,
    body.portrait-layout .move-log-panel{
      grid-area:dynamic;
      min-width:0;
      min-height:0;
      overflow:auto;
    }

    body.portrait-layout .move-log-panel{
      flex:initial;
    }

    body.portrait-layout .left-panel-resize-handle{
      top:auto;
      bottom:0;
      left:0;
      right:auto;
      width:100%;
      height:var(--left-panel-resize-zone-px);
      cursor:ns-resize;
    }

    body.portrait-layout .left-panel-resize-handle::before{
      content:"↕";
      top:auto;
      bottom:1px;
      left:50%;
      right:auto;
      transform:translateX(-50%);
    }

    body.portrait-layout .center-panel{
      grid-row:2;
    }

    body.portrait-layout .right-panel{
      grid-row:3;
      width:auto !important;
      display:grid;
      grid-template-columns:minmax(0, 1.12fr) minmax(0, .92fr) minmax(0, .82fr);
      grid-template-rows:auto auto;
      grid-template-areas:
        "stage1 stage2 control"
        "stage1 stage2 resign";
      align-items:stretch;
      gap:8px;
      padding:8px 10px 10px;
      overflow:hidden;
      max-height:40vh;
    }

    body.portrait-layout .right-panel > .button-row{
      grid-area:control;
      align-self:start;
      margin:0;
    }

    body.portrait-layout .right-panel > .stage-one-actions{ grid-area:stage1; }
    body.portrait-layout .right-panel > .stage-two-actions{ grid-area:stage2; }
    body.portrait-layout .right-panel > .stage-three-actions{
      grid-area:control;
      align-self:start;
      margin-top:calc(var(--button-height) + 8px);
    }

    body.portrait-layout .right-panel > .resign-zone{
      grid-area:resign;
      align-self:end;
      margin-top:14px;
    }

    body.portrait-layout .right-actions{
      min-width:0;
      min-height:0;
      gap:4px;
    }

    body.portrait-layout .right-panel .panel-section{
      padding:7px;
      overflow:hidden;
    }

    body.portrait-layout .right-panel .section-title{
      margin-bottom:4px;
      font-size:calc(var(--button-font-size) * .94);
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    body.portrait-layout button{
      min-height:var(--button-height);
    }

    body.portrait-layout .right-panel button{
      font-size:var(--button-font-size);
      line-height:1.05;
      padding:0 4px;
    }

    body.portrait-layout .resign-zone .btn-danger{
      margin-top:8px;
    }

    @media (max-height: 760px){
      body.portrait-layout .right-panel{
        gap:6px;
        padding:6px 8px 8px;
      }

      body.portrait-layout .right-panel .panel-section{
        padding:6px;
      }

      body.portrait-layout .right-actions{
        gap:3px;
      }

      body.portrait-layout .right-panel > .stage-three-actions{
        margin-top:calc(var(--button-height) + 6px);
      }
    }


    /* Expanded board mode measures all panel combinations and hides only panels
       whose removal actually increases the quantized board size. */
    body.expanded-board.expanded-hide-left .left-panel{
      display:none !important;
    }

    body.expanded-board.expanded-hide-right .right-panel{
      display:none !important;
    }

    body.landscape-layout.expanded-board.expanded-hide-left:not(.expanded-hide-right) .app-shell{
      grid-template-columns:minmax(0, 1fr) var(--right-panel-px);
    }

    body.landscape-layout.expanded-board.expanded-hide-left:not(.expanded-hide-right) .center-panel{
      grid-column:1;
    }

    body.landscape-layout.expanded-board.expanded-hide-left:not(.expanded-hide-right) .right-panel{
      grid-column:2;
    }

    body.landscape-layout.expanded-board.expanded-hide-right:not(.expanded-hide-left) .app-shell{
      grid-template-columns:var(--left-panel-px) minmax(0, 1fr);
    }

    body.landscape-layout.expanded-board.expanded-hide-right:not(.expanded-hide-left) .left-panel{
      grid-column:1;
    }

    body.landscape-layout.expanded-board.expanded-hide-right:not(.expanded-hide-left) .center-panel{
      grid-column:2;
    }

    body.landscape-layout.expanded-board.expanded-hide-left.expanded-hide-right .app-shell{
      grid-template-columns:minmax(0, 1fr);
    }

    body.landscape-layout.expanded-board.expanded-hide-left.expanded-hide-right .center-panel{
      grid-column:1;
    }

    body.portrait-layout.expanded-board.expanded-hide-left:not(.expanded-hide-right) .app-shell{
      grid-template-columns:1fr;
      grid-template-rows:minmax(0, 1fr) auto;
    }

    body.portrait-layout.expanded-board.expanded-hide-left:not(.expanded-hide-right) .center-panel{
      grid-row:1;
    }

    body.portrait-layout.expanded-board.expanded-hide-left:not(.expanded-hide-right) .right-panel{
      grid-row:2;
    }

    body.portrait-layout.expanded-board.expanded-hide-right:not(.expanded-hide-left) .app-shell{
      grid-template-columns:1fr;
      grid-template-rows:var(--top-panel-px) minmax(0, 1fr);
    }

    body.portrait-layout.expanded-board.expanded-hide-right:not(.expanded-hide-left) .left-panel{
      grid-row:1;
    }

    body.portrait-layout.expanded-board.expanded-hide-right:not(.expanded-hide-left) .center-panel{
      grid-row:2;
    }

    body.portrait-layout.expanded-board.expanded-hide-left.expanded-hide-right .app-shell{
      grid-template-columns:1fr;
      grid-template-rows:minmax(0, 1fr);
    }

    body.portrait-layout.expanded-board.expanded-hide-left.expanded-hide-right .center-panel{
      grid-row:1;
    }




    /* Header buttons are not gameplay controls; keep them pill-sized even after global button scaling. */
    .panel-title-row .left-mode-toggle,
    .panel-title-row .left-lobby-button{
      width:auto;
      max-width:max-content;
      height:auto;
      min-height:0;
      flex:0 0 auto;
      align-self:flex-start;
      line-height:1.1;
    }

    .panel-title-row .left-mode-toggle{
      min-width:42px;
      padding:3px 8px;
    }

    .panel-title-row .left-lobby-button{
      width:34px;
      min-width:34px;
      padding:3px 6px;
    }

    .modal-overlay{
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,.68);
      padding:24px;
    }

    .modal-overlay[hidden],
    .modal-card[hidden]{
      display:none;
    }

    .modal-overlay.winner-overlay-mode{
      background:rgba(0,0,0,.26);
      pointer-events:none;
    }

    .modal-overlay.winner-overlay-mode .winner-modal{
      pointer-events:auto;
      position:fixed;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      touch-action:none;
    }

    .winner-modal .modal-title{
      cursor:move;
      user-select:none;
    }

    .turn-wait-panel{
      position:fixed;
      z-index:8000;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%);
      width:min(420px, calc(100vw - 48px));
      touch-action:none;
    }

    .turn-wait-panel[hidden]{ display:none; }

    .turn-wait-panel .modal-title{
      cursor:move;
      user-select:none;
    }

    .modal-card{
      width:min(420px, 100%);
      background:var(--panel-bg);
      color:var(--panel-fg);
      border:1px solid var(--panel-border);
      border-radius:var(--button-radius);
      padding:18px;
      box-shadow:0 20px 50px rgba(0,0,0,.65);
    }

    .modal-title{
      color:var(--panel-title-fg);
      font-weight:800;
      font-size:18px;
      margin-bottom:10px;
    }

    .modal-body{
      color:var(--panel-fg);
      line-height:1.35;
      margin-bottom:16px;
    }

    .modal-actions{
      display:flex;
      gap:var(--button-gap);
    }

    .modal-actions button{
      width:50%;
    }

    .modal-actions.single button{
      width:100%;
    }

    .recovery-key-modal,
    .delete-game-modal{
      width:min(520px, 100%);
    }

    .recovery-key-output{
      width:100%;
      height:42px;
      margin:0 0 14px;
      padding:0 10px;
      border:1px solid var(--panel-border);
      border-radius:var(--button-radius);
      background:#101010;
      color:#fff3a0;
      font:inherit;
      font-weight:850;
      letter-spacing:.06em;
      text-align:center;
    }

    .player-count-options{
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:var(--button-gap);
    }

    .player-count-options button{
      width:100%;
    }

    .pebble-count-options{
      display:grid;
      grid-template-columns:repeat(4, 1fr);
      gap:var(--button-gap);
      margin-bottom:var(--button-gap);
    }

    .pebble-count-options button{
      width:100%;
    }
  
    /* Online room seat panel */
    .room-seats-modal{
      width:min(560px, 100%);
    }

    .room-seats-summary{
      margin-bottom:12px;
      padding:10px;
      border:1px solid var(--panel-border);
      border-radius:var(--button-radius);
      background:var(--panel-section-bg);
      color:var(--panel-title-fg);
      font-weight:700;
    }

    .room-seats-list{
      display:grid;
      gap:8px;
      margin-bottom:12px;
    }

    .room-seat-row{
      display:grid;
      grid-template-columns:1fr 1fr auto;
      gap:8px;
      align-items:center;
      padding:8px;
      border:1px solid var(--panel-border);
      border-radius:var(--button-radius);
      background:var(--panel-section-bg);
    }

    .room-seat-row.inactive{
      opacity:.55;
    }

    .room-seat-name{
      font-weight:800;
    }

    .room-seat-status{
      color:var(--panel-muted);
      font-size:13px;
    }

    .room-seat-row button{
      width:auto;
      min-width:72px;
      margin:0;
    }

    .room-seats-note{
      color:var(--panel-muted);
      font-size:13px;
      line-height:1.35;
    }

/* =========================================================
   1.004.000 collapsible left stack + whole-stage dimming
   ========================================================= */
.left-panel{
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}

.panel-title-row{
  align-items:center;
  margin:-4px -4px 0;
  padding:5px 6px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
  background:#0b2a66;
}

.panel-title-row .left-lobby-button{ margin:0; }

.left-stack-nav{
  display:flex;
  gap:4px;
  flex:0 0 auto;
  grid-column:3;
}

.left-stack-nav[hidden]{ display:none !important; }

.left-stack-jump{
  width:26px;
  min-width:26px;
  height:auto;
  min-height:0;
  margin:0;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(0,0,0,.38);
  color:#fff3a0;
  font-size:16px;
  font-weight:850;
  line-height:1.1;
}

.left-stack-collapse-all{
  grid-column:4;
  width:26px;
  min-width:26px;
  height:auto;
  min-height:0;
  margin:0;
  padding:3px 6px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(0,0,0,.38);
  color:#fff3a0;
  font-size:16px;
  font-weight:900;
  line-height:1.1;
}

.right-panel .stage-title{
  position:relative;
  min-height:22px;
  margin:-2px 0 1px;
  padding:2px 28px 2px 4px;
  color:#ffe761;
  font-size:calc(var(--button-font-size) * .82);
  line-height:1.05;
  text-align:center;
}

.right-panel .stage-collapse-toggle{
  position:absolute;
  top:50%;
  right:0;
  width:23px;
  min-width:23px;
  height:20px;
  min-height:20px;
  padding:0;
  transform:translateY(-50%);
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(0,0,0,.38);
  color:#fff3a0;
  font-size:15px;
  font-weight:900;
  line-height:18px;
}

.right-actions.stage-collapsed > button[data-action]{ display:none; }

.right-actions.stage-collapsed{ gap:0; }

.left-stack-jump:disabled{
  opacity:.28;
  cursor:default;
}

.left-section-stack{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  display:flex;
  flex-direction:column;
  gap:6px;
  padding-right:2px;
  scrollbar-gutter:stable;
}

.left-collapsible-section{
  flex:0 0 auto;
  min-width:0;
  margin:0;
  padding:0;
  border:1px solid var(--panel-border);
  border-radius:var(--button-radius);
  background:var(--panel-section-bg);
  overflow:hidden;
}

.left-section-toggle{
  width:100%;
  height:auto;
  min-height:24px;
  margin:0;
  padding:3px 7px;
  border:0;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  background:rgba(11,42,102,.78);
  color:#fff3a0;
  font-size:calc(var(--button-font-size) * .82);
  font-weight:850;
  line-height:1.05;
  text-align:left;
}

.left-section-toggle:hover,
.left-section-toggle:focus{
  background:rgba(11,42,102,.96);
  color:#ffe761;
  outline:none;
}

.left-section-indicator{
  flex:0 0 auto;
  min-width:14px;
  text-align:center;
  font-size:16px;
  font-weight:900;
  line-height:1;
}

.left-section-body{
  padding:7px 8px;
  min-width:0;
}

.left-section-body[hidden]{ display:none !important; }

.info-grid{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:3px 8px;
  align-items:start;
  font-size:calc(var(--button-font-size) * .84);
  line-height:1.2;
}

.info-app-title{
  margin:0 0 7px;
  color:#fff;
  font-weight:800;
  line-height:1;
}

.info-app-name{ font-size:calc(var(--button-font-size) * 1.05); }
.info-app-version{ font-size:calc(var(--button-font-size) * .525); vertical-align:middle; }

.info-label{
  color:var(--panel-muted);
  font-weight:750;
}

.info-value{
  color:var(--panel-fg);
  min-width:0;
  overflow-wrap:anywhere;
}

.info-separator{
  grid-column:1 / -1;
  height:1px;
  margin:3px 0;
  background:rgba(255,255,255,.12);
}

.info-player-list{
  margin-top:7px;
  padding-top:6px;
  border-top:1px solid rgba(255,255,255,.12);
  display:grid;
  gap:3px;
  font-size:calc(var(--button-font-size) * .84);
  line-height:1.2;
}

.info-player-row{
  display:grid;
  grid-template-columns:58px minmax(0,1fr);
  gap:7px;
}

.info-player-color{ font-weight:850; }
.info-player-name{ color:var(--panel-fg); overflow-wrap:anywhere; }

.help-panel,
.move-log-panel{
  flex:0 0 auto;
  min-height:0;
  overflow:visible;
  padding:0;
  background:var(--panel-section-bg);
}

.move-log-content{
  overflow:visible;
}

.left-log-copy-inline{
  width:auto;
  height:auto;
  min-height:22px;
  margin:8px 0 0 0;
  padding:2px 8px;
  border:1px solid rgba(255,255,255,.24);
  border-radius:999px;
  background:rgba(0,0,0,.38);
  color:#fff3a0;
  font-size:calc(var(--button-font-size) * .72);
  font-weight:800;
}

.left-log-copy-inline:disabled{
  opacity:1;
  filter:none;
}

.diagnostics-section{
  flex:0 0 auto;
}

.right-actions.stage-disabled{
  opacity:1;
  filter:none;
}

.right-actions.stage-disabled .stage-title{
  opacity:var(--button-disabled-opacity);
  filter:grayscale(var(--button-disabled-filter));
}

.right-actions.stage-disabled button[data-action]{
  cursor:not-allowed;
}

@media (orientation:portrait), (max-aspect-ratio:4/5){
  body.portrait-layout .left-panel{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:8px 12px calc(8px + var(--left-panel-resize-zone-px));
    min-height:var(--top-panel-min-px);
    overflow:hidden;
  }

  body.portrait-layout .panel-title-row{
    flex:0 0 auto;
    grid-area:auto;
  }

  body.portrait-layout .left-section-stack{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    display:flex;
  }

  body.portrait-layout .help-panel,
  body.portrait-layout .move-log-panel,
  body.portrait-layout .diagnostics-section{
    grid-area:auto;
    overflow:visible;
  }
}

/* A single acknowledgement after restoring a rejected online action. */
dialog.sync-notice{ position:fixed; inset:0; margin:auto; max-width:min(460px, calc(100vw - 32px)); color:var(--panel-fg); }
dialog.sync-notice:not([open]){ display:none; }
dialog.sync-notice::backdrop{ background:rgba(0,0,0,.6); }
dialog.sync-notice button{ width:auto; min-width:100px; }

/* Diagnostics stays readable without forcing the left panel wider. */
.diagnostic-summary, #diagnostic-history {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font: 12px/1.45 monospace;
  margin: 8px 0;
}
.diagnostic-summary { padding: 8px; border: 1px solid currentColor; }
#diagnostic-history { max-height: 220px; overflow-y: auto; }
.diagnostic-history-panel { margin-top: 8px; }
.diagnostic-history-panel summary { cursor: pointer; }