/* =========================================================
       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;
      --board-width-px:600px;
      --board-height-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;
      --player-5-piece-bg:#3465c5;
      --player-6-piece-bg:#7b3fb3;
      --player-7-piece-bg:#101010;
      --player-8-piece-bg:#c2447a;
      --player-9-piece-bg:#b8b8b8;
      --neutral-piece-bg:#777777;
      --player-1-piece-edge:#7e1111;
      --player-2-piece-edge:#7f5f07;
      --player-3-piece-edge:#0b5d24;
      --player-4-piece-edge:#7a3a05;
      --player-5-piece-edge:#1e3b72;
      --player-6-piece-edge:#472568;
      --player-7-piece-edge:#0d535c;
      --player-8-piece-edge:#712747;
      --player-9-piece-edge:#6b6b6b;
      --neutral-piece-edge:#3f3f3f;
      --player-1-perimeter-bg:#f2a0a0;
      --player-2-perimeter-bg:#fff96a;
      --player-3-perimeter-bg:#b8f0c2;
      --player-4-perimeter-bg:#e9902a;
      --player-5-perimeter-bg:#9dbcf7;
      --player-6-perimeter-bg:#d5acf2;
      --player-7-perimeter-bg:#404040;
      --player-8-perimeter-bg:#f2abc9;
      --player-9-perimeter-bg:#f4f4f4;
      --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 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-5-bg:var(--player-5-perimeter-bg);
      --tile-perimeter-6-bg:var(--player-6-perimeter-bg);
      --tile-perimeter-7-bg:var(--player-7-perimeter-bg);
      --tile-perimeter-8-bg:var(--player-8-perimeter-bg);
      --tile-perimeter-9-bg:var(--player-9-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 auto minmax(48px, 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:3;
      grid-row:1;
      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-split-row{
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
      gap:4px;
    }

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

    .context-menu-split-row button{
      min-width:0;
      text-align:center;
    }

    .context-menu-volume{
      display:grid;
      grid-template-columns:1fr auto;
      align-items:center;
      gap:3px 10px;
      padding:7px 10px 8px;
      border-radius:6px;
      background:#242424;
      color:#eee;
      font:inherit;
      cursor:default;
    }

    .context-menu-volume output{
      color:#ffe761;
      font-variant-numeric:tabular-nums;
      text-align:right;
    }

    .context-menu-volume input[type="range"]{
      grid-column:1 / -1;
      width:100%;
      min-width:180px;
      margin:2px 0 0;
      accent-color:#60c97a;
      cursor:pointer;
    }

    .context-resign-game{
      background:#e0bf26 !important;
      color:#151515 !important;
      font-weight:900 !important;
    }

    .context-resign-game.resign-armed{
      background:var(--button-danger-bg) !important;
      color:var(--button-danger-fg) !important;
    }

    .context-resign-game.controlled-off{
      background:var(--button-unavailable-bg) !important;
      color:var(--button-fg) !important;
      opacity:var(--button-disabled-opacity);
    }


    .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-delete-section{
      display:flex;
      flex-direction:column;
      gap:4px;
    }

    .context-menu-local-only[hidden],
    .context-menu-delete-section[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-badge-group{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:5px;
      min-width:0;
    }

    .diagnostic-color-badge{
      color:var(--diagnostic-piece-color, #fff3a0);
      border-color:color-mix(in srgb, var(--diagnostic-piece-color, #fff3a0) 48%, transparent);
    }

    .diagnostic-readout{
      --diagnostic-player-count:4;
      color:var(--panel-fg);
      font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size:var(--button-font-size);
      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), max-content) calc(var(--diagnostic-value-ch, 3) * 1ch) minmax(0, 1fr);
      align-items:center;
      column-gap:7px;
      min-height:calc(var(--diagnostic-row-height) + 4px);
      padding:2px 0;
      line-height:var(--diagnostic-row-height);
      font-variant-numeric:tabular-nums;
      white-space:nowrap;
      color:var(--diagnostic-player-color, var(--panel-fg));
    }

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

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

    .diagnostic-player-row.current-turn .diagnostic-player-name,
    .diagnostic-player-row.current-turn .diagnostic-player-value{
      font-weight:950;
    }

    .diagnostic-pressure-track{
      position:relative;
      width:100%;
      min-width:0;
      height:.78em;
      overflow:hidden;
      justify-self:stretch;
      background:rgba(0,0,0,.30);
    }

    .diagnostic-pressure-fill{
      position:absolute;
      top:0;
      right:0;
      bottom:0;
      max-width:none;
      background-image:linear-gradient(
        to right,
        var(--diagnostic-player-color) 0 var(--diagnostic-pressure-block-width, 1px),
        transparent var(--diagnostic-pressure-block-width, 1px) calc(var(--diagnostic-pressure-block-width, 1px) + 1px)
      );
      background-size:calc(var(--diagnostic-pressure-block-width, 1px) + 1px) 100%;
      background-position:left top;
    }

    .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%; }


    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;
    }

    .vacuum-ocean-layer{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      display:block;
      z-index:0;
      pointer-events:none;
      background:var(--ocean-base);
    }

    .vacuum-ocean-still{ z-index:0; }

    .vacuum-ocean-live{
      z-index:1;
      opacity:0;
      transition:opacity .48s ease;
    }

    .vacuum-ocean-live.ready{ opacity:1; }

    .board-wrap{
      position:relative;
      z-index:2;
      width:var(--board-width-px);
      height:var(--board-height-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-width-px);
      height:var(--board-height-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);
    }

    .submerged-terrain-layer{
      position:absolute;
      inset:0;
      z-index:0;
      display:none;
      border-radius:var(--tile-radius);
      opacity:.30;
      transform:none;
      filter:none;
      box-shadow:none;
      mix-blend-mode:normal;
      pointer-events:none;
      overflow:visible;
    }

    .submerged-piece-layer{
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .tile[data-kind="void"][data-submerged-kind] > .submerged-terrain-layer{
      display:block;
    }

    .tile[data-kind="void"][data-submerged-kind][data-falling-water] > .submerged-terrain-layer{
      opacity:.10;
    }

    .tile[data-submerged-kind="board"] > .submerged-terrain-layer{ background:var(--tile-board-bg); }
    .tile[data-submerged-kind="pedestal"] > .submerged-terrain-layer{ background:var(--tile-pedestal-bg); }
    .tile[data-submerged-kind="perimeter1"] > .submerged-terrain-layer{ background:var(--tile-perimeter-1-bg); }
    .tile[data-submerged-kind="perimeter2"] > .submerged-terrain-layer{ background:var(--tile-perimeter-2-bg); }
    .tile[data-submerged-kind="perimeter3"] > .submerged-terrain-layer{ background:var(--tile-perimeter-3-bg); }
    .tile[data-submerged-kind="perimeter4"] > .submerged-terrain-layer{ background:var(--tile-perimeter-4-bg); }
    .tile[data-submerged-kind="perimeter5"] > .submerged-terrain-layer{ background:var(--tile-perimeter-5-bg); }
    .tile[data-submerged-kind="perimeter6"] > .submerged-terrain-layer{ background:var(--tile-perimeter-6-bg); }
    .tile[data-submerged-kind="perimeter7"] > .submerged-terrain-layer{ background:var(--tile-perimeter-7-bg); }
    .tile[data-submerged-kind="perimeter8"] > .submerged-terrain-layer{ background:var(--tile-perimeter-8-bg); }
    .tile[data-submerged-kind="perimeter9"] > .submerged-terrain-layer{ background:var(--tile-perimeter-9-bg); }

    .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 2.15s cubic-bezier(.35, 0, .78, .34) forwards;
    }

    .terrain-sink-layer.setup-perimeter-sink{
      box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset;
    }

    body.perimeter-slide-in-progress #tiles,
    body.perimeter-slide-in-progress #right-panel{
      pointer-events:none !important;
    }

    .tile.perimeter-slide-arrival{
      visibility:hidden;
    }

    .perimeter-slide-ghost{
      position:fixed !important;
      z-index:1602 !important;
      margin:0 !important;
      pointer-events:none !important;
      will-change:transform;
      filter:drop-shadow(0 8px 8px rgba(0,0,0,.38));
    }

    .perimeter-slide-effect-layer{
      position:fixed;
      inset:0;
      z-index:1601;
      overflow:hidden;
      pointer-events:none;
    }

    .perimeter-slide-ripple{
      position:absolute;
      border:1.5px solid rgba(188,235,249,.7);
      border-radius:50%;
      opacity:0;
      transform:translate(-50%,-50%) rotate(var(--ripple-angle, 0deg)) scale(.4);
      box-shadow:0 0 5px rgba(115,204,235,.18);
      animation:perimeterSlideRipple .9s ease-out forwards;
    }

    @keyframes perimeterSlideRipple{
      0%{ opacity:.52; transform:translate(-50%,-50%) rotate(var(--ripple-angle, 0deg)) scale(.4); }
      100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--ripple-angle, 0deg)) scale(1.85); }
    }

    @keyframes terrainSinkAway{
      0%{ opacity:1; transform:translateY(0) scale(1); filter:brightness(1); }
      23%{ opacity:1; transform:translateY(14px) scale(.933); filter:brightness(.78) saturate(.88); }
      100%{ opacity:0; transform:translateY(46px) scale(.8); filter:brightness(.22) saturate(.55); }
    }

    @media (prefers-reduced-motion: reduce){
      body.action-animations-off .perimeter-slide-ripple{ animation:none; }
    }

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

    .tile[data-kind="pedestal"]{
      background:var(--tile-pedestal-surface, var(--tile-board-bg));
      box-shadow:
        0 0 0 var(--grid-line-px) var(--grid-line),
        0 0 0 2px rgba(0,0,0,.94) inset,
        0 1px 0 var(--tile-board-shine) inset;
    }

    /* Pedestal-only furniture must disappear from the live tile as soon as
       canonical terrain is no longer a pedestal. Submerged clones retain
       data-kind="pedestal", so their dimensional sides remain visible. */
    .tile:not([data-kind="pedestal"]) > .pedestal-side,
    .tile:not([data-kind="pedestal"]) > .teleport-energy-layer,
    .tile:not([data-kind="pedestal"]) > .teleport-flash-layer{
      display:none !important;
    }

    .pedestal-side{
      position:absolute;
      z-index:1;
      pointer-events:none;
      background:var(--tile-pedestal-side, var(--tile-pedestal-bg));
      filter:saturate(1.12) brightness(.84);
      box-shadow:0 0 0 1px rgba(0,0,0,.78) inset, 0 3px 7px rgba(0,0,0,.42);
    }

    .pedestal-side-west{
      right:100%;
      top:0;
      width:var(--tile-pedestal-side-depth, 6px);
      height:calc(100% + var(--tile-pedestal-side-depth, 6px));
      clip-path:polygon(100% 0,100% calc(100% - var(--tile-pedestal-side-depth, 6px)),0 100%,0 var(--tile-pedestal-side-depth, 6px));
      border-radius:2px 0 0 3px;
    }

    .pedestal-side-south{
      left:calc(-1 * var(--tile-pedestal-side-depth, 6px));
      top:100%;
      width:calc(100% + var(--tile-pedestal-side-depth, 6px));
      height:var(--tile-pedestal-side-depth, 6px);
      clip-path:polygon(var(--tile-pedestal-side-depth, 6px) 0,100% 0,calc(100% - var(--tile-pedestal-side-depth, 6px)) 100%,0 100%);
      filter:saturate(1.18) brightness(.70);
      border-radius:0 0 3px 3px;
    }

    .tile.teleport-recharging > .pedestal-side{
      opacity:0;
    }

    .tile[data-kind="perimeter1"]{ background:var(--tile-perimeter-1-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter2"]{ background:var(--tile-perimeter-2-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter3"]{ background:var(--tile-perimeter-3-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter4"]{ background:var(--tile-perimeter-4-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter5"]{ background:var(--tile-perimeter-5-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter6"]{ background:var(--tile-perimeter-6-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter7"]{ background:var(--tile-perimeter-7-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter8"]{ background:var(--tile-perimeter-8-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 0 1px 0 var(--tile-perimeter-shine) inset; }
    .tile[data-kind="perimeter9"]{ background:var(--tile-perimeter-9-bg); box-shadow:0 0 0 var(--grid-line-px) var(--grid-line), 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[data-kind="board"]{ --source-surface:var(--tile-board-bg); --source-dim:.76; --source-bright:1.34; }
    .tile[data-kind="perimeter1"]{ --source-surface:var(--tile-perimeter-1-bg); --source-dim:.58; --source-bright:1.03; }
    .tile[data-kind="perimeter2"]{ --source-surface:var(--tile-perimeter-2-bg); --source-dim:.54; --source-bright:1.01; }
    .tile[data-kind="perimeter3"]{ --source-surface:var(--tile-perimeter-3-bg); --source-dim:.57; --source-bright:1.03; }
    .tile[data-kind="perimeter4"]{ --source-surface:var(--tile-perimeter-4-bg); --source-dim:.56; --source-bright:1.04; }
    .tile[data-kind="perimeter5"]{ --source-surface:var(--tile-perimeter-5-bg); --source-dim:.56; --source-bright:1.04; }
    .tile[data-kind="perimeter6"]{ --source-surface:var(--tile-perimeter-6-bg); --source-dim:.56; --source-bright:1.04; }
    .tile[data-kind="perimeter7"]{ --source-surface:var(--tile-perimeter-7-bg); --source-dim:.56; --source-bright:1.04; }
    .tile[data-kind="perimeter8"]{ --source-surface:var(--tile-perimeter-8-bg); --source-dim:.56; --source-bright:1.04; }
    .tile[data-kind="perimeter9"]{ --source-surface:var(--tile-perimeter-9-bg); --source-dim:.56; --source-bright:1.04; }
    .tile[data-kind="pedestal"]{ --source-surface:rgba(126,225,255,.43); --source-dim:1.04; --source-bright:1.48; }

    .tile.drag-origin{ z-index:9; }
    .tile.drag-origin::after{
      content:"";
      position:absolute;
      inset:0;
      z-index:2;
      pointer-events:none;
      border-radius:inherit;
      background:var(--source-surface);
      animation:sourceSurfaceBreathe .82s ease-in-out infinite alternate;
    }

    @keyframes sourceSurfaceBreathe{
      0%{ inset:0; border-radius:inherit; filter:brightness(var(--source-dim,.65)); opacity:.58; }
      100%{ inset:-3px; border-radius:calc(var(--tile-radius) + 3px); filter:brightness(var(--source-bright,1.05)); opacity:.92; }
    }

    .tile.teleport-recharging:not(.drag-origin){ filter:none; }

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

    .teleport-energy-layer,
    .teleport-flash-layer{
      position:absolute;
      inset:-10%;
      width:120%;
      height:120%;
      pointer-events:none;
    }

    .teleport-energy-layer{ z-index:4; overflow:visible; }
    .tile.teleport-energy-off .teleport-energy-layer{ display:none; }
    .tile.teleport-inert .teleport-flash-layer{ display:none; }
    .teleport-flash-layer{
      z-index:5;
      opacity:0;
      border-radius:calc(var(--tile-radius) + 3px);
      background:#eaffff;
      mix-blend-mode:screen;
    }

    .tile.teleport-firing .teleport-flash-layer{ animation:teleportPedestalFlash .72s ease-out both; }
    .tile.teleport-firing .piece-layer{ animation:teleportPieceTransfer .72s ease-out both; }

    @keyframes teleportPedestalFlash{
      0%{ opacity:0; transform:scale(.82); box-shadow:0 0 0 rgba(255,255,255,0); }
      8%{ opacity:1; transform:scale(1.16); box-shadow:0 0 58px 28px #d8ffff; }
      19%{ opacity:.96; transform:scale(1.04); box-shadow:0 0 74px 36px #8cecff; }
      38%{ opacity:.48; transform:scale(1.12); box-shadow:0 0 42px 21px #55cfea; }
      100%{ opacity:0; transform:scale(1.28); box-shadow:0 0 0 rgba(255,255,255,0); }
    }

    @keyframes teleportPieceTransfer{
      0%, 27%{ opacity:0; }
      42%, 100%{ opacity:1; }
    }

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

    .tile.vacuum-create-pending .piece-layer{
      visibility:hidden;
    }

    .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);
    }

    /* Action presentations live above the board while authoritative state is
       updated underneath. They never intercept the pointer. */
    .vacuum-action-effect-layer{
      position:fixed;
      inset:0;
      z-index:8400;
      overflow:visible;
      pointer-events:none;
    }

    .vacuum-action-effect-layer.pebble-transfer-layer{
      position:fixed;
    }

    .pebble-transfer-clone,
    .extend-chain-moving-pebble,
    .extend-chain-birth-pebble{
      position:fixed;
      z-index:2;
      margin:0;
      will-change:transform, opacity;
    }

    .pebble-transfer-arrival-hidden,
    .extend-chain-piece-hidden{
      visibility:hidden !important;
    }

    .extend-chain-svg{
      position:fixed;
      inset:0;
      z-index:1;
      width:100vw;
      height:100vh;
      overflow:visible;
      pointer-events:none;
    }

    .extend-chain-tether{
      stroke-width:.8;
      stroke-linejoin:round;
      filter:drop-shadow(0 2px 2px rgba(0,0,0,.5));
    }

    .extend-chain-snap-flash{
      position:fixed;
      z-index:3;
      width:12px;
      height:12px;
      border:2px solid #ffe7ae;
      border-radius:50%;
      background:rgba(255,255,255,.72);
      box-shadow:0 0 11px #ffb359;
      pointer-events:none;
    }

    .vacuum-action-hidden{visibility:hidden !important;}
    .vacuum-canvas-action{right:auto !important;bottom:auto !important;}

    body.vacuum-action-effect-in-progress .tile,
    body.vacuum-action-effect-in-progress .right-panel button,
    body.vacuum-action-effect-in-progress .button-row button{
      pointer-events:none;
    }

    .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{
      position:relative;
      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);
    }

    /* Selected top-down Broken Edge image owns its outline and lighting. */
    .boulder-piece::before, .boulder-core::before, .boulder-core::after{display:none;}
    .boulder-core{
      width:calc(122.905% - 4.916px); height:calc(122.905% - 4.916px); border:0; border-radius:0;
      background:none; clip-path:none; box-shadow:none; filter:none;
      transform:none; overflow:visible; object-fit:contain;
      flex:none;
    }
    .stone-spin-texture{
      position:absolute; inset:0; border-radius:inherit; pointer-events:none;
      background:
        radial-gradient(ellipse at 31% 24%, rgba(255,255,255,.16) 0 7%, transparent 8%),
        radial-gradient(ellipse at 68% 65%, rgba(0,0,0,.25) 0 6%, transparent 7%),
        linear-gradient(32deg, transparent 43%, rgba(0,0,0,.17) 45% 48%, transparent 50%);
    }
    .stone-cast-clone{position:fixed; margin:0; box-sizing:border-box; will-change:transform,opacity;}
    .stone-cast-arrival-hidden,
    .stone-cast-destination .stone-core,
    .stone-cast-destination .boulder-core{visibility:hidden !important;}


    /* =========================================================
       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;
      padding-right:4px;
      font-size:calc(var(--button-font-size) * .94);
      line-height:1.1;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    body.portrait-layout .right-panel .stage-collapse-toggle{
      display:none !important;
    }

    body.portrait-layout .right-panel .right-actions.stage-collapsed > button[data-action]{
      display:block;
    }

    body.portrait-layout .right-panel .right-actions.stage-collapsed{
      gap:4px;
    }

    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 utility controls stay compact even after global gameplay-button scaling. */
    .panel-title-row .left-mode-toggle{
      width:auto;
      max-width:max-content;
      height:auto;
      min-height:0;
      flex:0 0 auto;
      align-self:flex-start;
      min-width:42px;
      padding:3px 8px;
      line-height:1.1;
    }

    .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;
    }

    /* A foreground confirmation may open while the persistent winner card remains.
       Restore normal modal input only for that confirmation, then return the winner
       overlay to its click-through inspection mode when the confirmation closes. */
    .modal-overlay.winner-overlay-mode.foreground-confirm-mode{
      background:rgba(0,0,0,.68);
      pointer-events:auto;
    }

    .modal-overlay.winner-overlay-mode.foreground-confirm-mode .winner-modal{
      pointer-events:none;
    }

    .modal-overlay.winner-overlay-mode.foreground-confirm-mode #diagnostics-clear-confirm-modal{
      position:relative;
      z-index:1;
      pointer-events:auto;
    }

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

    .draggable-title{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:center;
      min-height:24px;
      padding-right:30px;
      padding-left:30px;
    }

    .drag-handle-cue{
      position:absolute;
      top:50%;
      right:0;
      transform:translateY(-50%);
      display:flex;
      align-items:center;
      justify-content:center;
      width:26px;
      height:26px;
      border:1px solid rgba(255,255,255,.22);
      border-radius:6px;
      background:rgba(0,0,0,.34);
      color:#fff3a0;
      font-size:18px;
      line-height:1;
      letter-spacing:0;
    }

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

    .state-notice-panel[hidden]{ display:none; }

    .state-notice-panel .modal-title{
      cursor:move;
      user-select:none;
      padding-right:72px;
    }

    .state-notice-controls{
      position:absolute;
      top:50%;
      right:0;
      transform:translateY(-50%);
      display:flex;
      align-items:center;
      gap:6px;
    }

    .state-notice-controls .drag-handle-cue{
      position:static;
      transform:none;
    }

    .state-notice-close{
      width:26px;
      height:26px;
      margin:0;
      padding:0;
      border:1px solid rgba(255,255,255,.22);
      border-radius:6px;
      background:rgba(0,0,0,.34);
      color:#f1f1f1;
      font-size:20px;
      line-height:1;
    }

    .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-card.state-notice-panel{
      background:rgba(31,31,31,.88);
      border-color:rgba(255,255,255,.34);
      backdrop-filter:blur(2px);
      -webkit-backdrop-filter:blur(2px);
    }

    .diagnostics-popover{
      position:fixed;
      z-index:9000;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:min(720px, calc(100vw - 32px));
      min-width:min(320px, calc(100vw - 32px));
      min-height:280px;
      max-height:min(760px, calc(100vh - 32px));
      display:flex;
      flex-direction:column;
      gap:9px;
      overflow:hidden;
      resize:both;
      letter-spacing:normal;
      font-weight:600;
      box-shadow:0 16px 40px rgba(0,0,0,.72);
    }

    .diagnostics-popover[hidden]{ display:none; }

    .diagnostics-title-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      cursor:move;
      user-select:none;
      touch-action:none;
    }

    .diagnostics-title-row .modal-title{ margin-bottom:0; }

    .diagnostics-window-controls{
      position:relative;
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
      min-width:61px;
      min-height:27px;
    }

    .diagnostics-window-controls .drag-handle-cue{
      position:static;
      transform:none;
      flex:0 0 auto;
    }

    .about-popover{
      position:fixed;
      z-index:9001;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:min(680px, calc(100vw - 32px));
      max-height:min(820px, calc(100vh - 32px));
      overflow:auto;
      padding:20px 22px;
      border-color:rgba(255,255,255,.35);
      background:linear-gradient(145deg, #16191d 0%, #0c0f12 100%);
      box-shadow:0 18px 52px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.05) inset;
      letter-spacing:normal;
    }

    .about-popover[hidden]{ display:none; }

    .about-revisions-row{
      display:flex;
      justify-content:center;
      padding-top:1px;
    }

    .about-revisions-row .btn-control{
      min-width:120px;
    }

    .components-popover{
      position:fixed;
      z-index:9002;
      top:50%;
      left:50%;
      transform:translate(-50%,-50%);
      width:min(620px, calc(100vw - 32px));
      max-height:min(720px, calc(100vh - 32px));
      overflow:auto;
      padding:20px 22px;
      border-color:rgba(255,255,255,.35);
      background:linear-gradient(145deg, #16191d 0%, #0c0f12 100%);
      box-shadow:0 18px 52px rgba(0,0,0,.82), 0 0 0 1px rgba(255,255,255,.05) inset;
      letter-spacing:normal;
      resize:none;
    }

    .components-popover[hidden]{ display:none; }

    .components-title-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      cursor:move;
      user-select:none;
      touch-action:none;
    }

    .components-title-row .modal-title{ margin-bottom:0; }

    .components-grid{
      display:grid;
      gap:1px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.18);
      border-radius:9px;
      background:rgba(255,255,255,.12);
    }

    .components-header,
    .components-row{
      display:grid;
      grid-template-columns:minmax(92px,.8fr) minmax(150px,1.25fr) minmax(170px,1.35fr);
      gap:1px;
    }

    .components-header > span,
    .components-row > *{
      padding:9px 11px;
      background:#171a1f;
      min-width:0;
      overflow-wrap:anywhere;
    }

    .components-header > span{
      color:#ffe761;
      font-weight:800;
    }

    .components-row strong{ color:#fff3a0; }

    .components-note{
      margin:12px 2px 0;
      color:#b9c0ca;
      font-size:13px;
      text-align:center;
    }

    @media (max-width:560px){
      .components-header,
      .components-row{ grid-template-columns:84px 1fr; }
      .components-header > span:last-child,
      .components-row > *:last-child{ grid-column:2; }
    }

    .about-title-row{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      user-select:none;
    }

    .about-heading{
      display:flex;
      flex-wrap:wrap;
      align-items:baseline;
      gap:5px 14px;
      min-width:0;
    }

    .about-game-name{
      color:#fff;
      font-size:30px;
      font-weight:950;
      line-height:1;
      letter-spacing:.02em;
    }

    .about-release-line{
      color:#d8dde5;
      font-size:14px;
      line-height:1.3;
    }

    .about-window-controls{
      display:flex;
      align-items:center;
      gap:8px;
      flex:0 0 auto;
      color:#aeb5bf;
      font-size:19px;
    }

    .about-close-button{
      width:27px;
      height:27px;
      min-height:0;
      margin:0;
      padding:0 0 2px;
      border:1px solid #777f89;
      border-radius:6px;
      background:#4d535b;
      color:#f2f2f2;
      font:700 20px/1 system-ui, sans-serif;
    }

    .about-close-button:hover,
    .about-close-button:focus{
      background:#69717b;
      outline:2px solid rgba(255,255,255,.3);
    }

    .about-rule{
      height:1px;
      margin:15px 0;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.42) 8%, rgba(255,255,255,.42) 92%, transparent);
    }

    .about-copy{
      color:#e4e7eb;
      font-size:15px;
      font-weight:560;
      line-height:1.46;
    }

    .about-copy p{ margin:0; }

    .about-phase{
      display:grid;
      grid-template-columns:26px 1fr;
      align-items:start;
      gap:8px;
    }

    .about-phase-symbol{
      display:block;
      width:26px;
      text-align:left;
    }

    .about-diamond{
      margin:8px 0;
      color:#9098a3;
      font-size:10px;
      line-height:1;
      text-align:center;
    }

    .about-boss-line{
      color:#ffe761;
      font-weight:850;
      text-align:center;
    }

    .diagnostics-current-status{
      color:#ffffff;
      font-weight:800;
    }

    .diagnostics-popover-log-header{
      color:#f2f2f2;
      font-weight:850;
    }

    .diagnostics-popover-log{
      flex:1 1 auto;
      min-height:0;
      min-height:150px;
      max-height:none;
      margin:0;
      overflow:auto;
      padding:9px;
      border:1px solid rgba(255,255,255,.28);
      border-radius:6px;
      background:#080808;
      color:#ededed;
      font:12px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      white-space:pre-wrap;
      overflow-wrap:anywhere;
    }

    .diagnostics-popover-actions{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .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-settings-button{ grid-column:1; grid-row:1; }
.panel-title-row .left-lobby-button{ grid-column:2; grid-row:1; margin:0; }

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

.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:5;
  grid-row:1;
  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 #9aa3ad; }
#diagnostic-history { max-height:none; min-height:0; flex:1 1 auto; overflow-y:auto; }

.diagnostic-line{
  display:block;
  padding:1px 0;
  color:#f2f2f2;
}
.diagnostic-info{ color:#f2f2f2; }

.diagnostic-player{ color:#79c8ff; }
.diagnostic-important{
  color:#ffffff;
  font-weight:800;
}
.diagnostic-warn{ color:#ffe066; }
.diagnostic-error{
  color:#ff6b6b;
  font-weight:700;
}
.diagnostic-summary .diagnostic-line + .diagnostic-line{ margin-top:2px; }
.diagnostic-history-panel { margin-top: 8px; }
.diagnostic-history-panel summary { cursor: pointer; }

/* Compact, movable Settings panel. */
.settings-popover{position:fixed;z-index:5000;left:calc(100% - 318px);top:64px;width:min(306px,calc(100vw - 8px));max-height:calc(100vh - 8px);overflow:auto;padding:0;background:rgba(24,29,35,.97);color:#eee;border:1px solid #707a85;border-radius:9px;box-shadow:0 10px 36px #0009;}
.settings-title-row{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:move;touch-action:none;border-bottom:1px solid #55606a;}
.settings-title-row .drag-handle-cue{position:static;transform:none;flex:0 0 auto;}
.settings-content{padding:10px 12px;display:grid;gap:10px;}
.settings-content>button,.settings-content .context-menu-delete-section button{height:auto;min-height:38px;padding:7px 10px;text-align:left;background:var(--button-bg);border:1px solid #505050;border-top-color:#727272;border-bottom-color:#080808;box-shadow:inset 0 1px 0 #ffffff1f,0 2px 3px #0008;}
.settings-content>button:not(:disabled):hover,.settings-content .context-menu-delete-section button:not(:disabled):hover{border-color:#888;}
.settings-content>button:not(:disabled):active,.settings-content .context-menu-delete-section button:not(:disabled):active{box-shadow:inset 0 2px 3px #000b;border-top-color:#080808;border-bottom-color:#727272;}
.settings-feedback{margin:0;min-height:44px;padding:9px 10px;font-size:12px;line-height:1.45;color:#c9d7e5;background:#292929;border:1px solid #141414;border-bottom-color:#505050;border-right-color:#505050;border-radius:5px;box-shadow:inset 0 2px 5px #0009;overflow-wrap:anywhere;}
.panel-title-row .left-settings-button,
.panel-title-row .left-lobby-button{
  width:auto;
  height:28px;
  min-height:28px;
  margin:0;
  padding:3px 9px;
  border:1px solid #505050;
  border-top-color:#8b8b8b;
  border-left-color:#777;
  border-right-color:#1a1a1a;
  border-bottom-color:#080808;
  border-radius:5px;
  background:var(--button-bg);
  color:var(--button-fg);
  box-shadow:inset 0 1px 0 #ffffff24,0 2px 3px #0008;
  font-size:calc(var(--button-font-size) * .78);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}
.panel-title-row .left-settings-button{
  min-width:36px;
  padding:2px 8px;
  font-size:19px;
}
.panel-title-row .left-lobby-button{min-width:62px;}
.panel-title-row .left-settings-button:hover,
.panel-title-row .left-settings-button:focus,
.panel-title-row .left-lobby-button:hover,
.panel-title-row .left-lobby-button:focus{
  border-top-color:#aaa;
  border-left-color:#999;
  background:#303030;
  outline:none;
}
.panel-title-row .left-settings-button:active,
.panel-title-row .left-lobby-button:active{
  border-top-color:#080808;
  border-left-color:#1a1a1a;
  border-right-color:#777;
  border-bottom-color:#8b8b8b;
  box-shadow:inset 0 2px 3px #000b;
}
.settings-content .context-menu-volume{width:100%;}
.settings-content .context-menu-delete-section{margin-top:8px;border-top:1px solid #667;padding-top:8px;}
.settings-content .context-menu-delete-section button{width:100%;min-height:38px;}
.settings-content #context-delete-game-button{background:#1F0D0E;}
.falling-section-ghost{position:fixed;pointer-events:none;z-index:20;transform-origin:center;}

body.action-animations-off .perimeter-slide-ripple,body.action-animations-off .terrain-sink-layer.active{animation:none;}

.settings-popover{transform:none;}

    /* Procedural magma fits its square; shared GPU rendering preserves the approved material. */
    canvas.boulder-core.magma-canvas{width:100%;height:100%;display:block;}
    .vacuum-magma-underlay{position:fixed;z-index:8399;pointer-events:none;overflow:visible;}


/* Live-game seabed composition. Sunk terrain sits below the translucent water;
   the active board and surface sink copy remain above it. */
body.seabed-enabled .vacuum-seabed{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;background:var(--ocean-base);
}
body.seabed-enabled .vacuum-ocean-still{display:none;}
body.seabed-enabled .vacuum-submerged-layer{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;}
body.seabed-enabled .vacuum-ocean-live{z-index:2;opacity:1;transition:none;background:transparent;}
body.seabed-enabled .vacuum-ocean-layer.vacuum-board-base{z-index:3;background:transparent;}
body.seabed-enabled .vacuum-ocean-layer.vacuum-board-surf{z-index:4;background:transparent;}
body.seabed-enabled #tiles{z-index:5;}
body.seabed-enabled .vacuum-sink-surface-layer{position:absolute;inset:0;z-index:6;pointer-events:none;overflow:visible;}
body.seabed-enabled .tile[data-submerged-overlay="1"] > .submerged-terrain-layer,
body.seabed-enabled .tile[data-submerged-overlay="pending"] > .submerged-terrain-layer{display:none!important;}
body.seabed-enabled .vacuum-submerged-clone,
body.seabed-enabled .vacuum-surface-sink-clone{position:absolute!important;margin:0!important;pointer-events:none!important;box-sizing:border-box!important;}
body.seabed-enabled .vacuum-submerged-clone{opacity:.82;filter:saturate(.90) brightness(.82);}
body.seabed-enabled .vacuum-submerged-clone > .piece-layer{opacity:1!important;filter:saturate(1.12) brightness(1.08);z-index:4!important;}
body.seabed-enabled .vacuum-submerged-clone .stone-core,
body.seabed-enabled .vacuum-submerged-clone .pebble,
body.seabed-enabled .vacuum-submerged-clone .boulder-core{opacity:1!important;}
body.seabed-enabled .vacuum-submerged-clone[data-kind="board"],
body.seabed-enabled .vacuum-submerged-clone[data-kind^="perimeter"],
body.seabed-enabled .vacuum-submerged-clone[data-kind="pedestal"]{box-shadow:0 0 0 2px rgba(0,0,0,.96),0 1px 0 rgba(255,255,255,.20) inset!important;}
body.seabed-enabled .vacuum-surface-sink-clone{will-change:transform,opacity,filter;}

/* Approved ocean composition: water, solid black skirt, surf, opaque tops. */
#board-wrap{z-index:auto;}
#tiles{z-index:4;}
.vacuum-ocean-layer.vacuum-board-base{z-index:2;background:transparent;}
.vacuum-ocean-layer.vacuum-board-surf{z-index:3;background:transparent;}
#tiles>.tile[data-kind="board"]{box-shadow:0 1px 0 var(--tile-board-shine) inset;}
#tiles>.tile[data-kind="pedestal"]{box-shadow:0 0 0 2px rgba(0,0,0,.94) inset,0 1px 0 var(--tile-board-shine) inset;}
#tiles>.tile[data-kind^="perimeter"]{box-shadow:0 1px 0 var(--tile-perimeter-shine) inset;}
#tiles>.tile>.tile-grid-line,#tiles>.tile>.tile-grid-corner{display:none;}