/* =========================================================
       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:#ffffff;
      --neutral-piece-bg:#777777;
      --player-1-piece-edge:#7e1111;
      --player-2-piece-edge:#7f5f07;
      --player-3-piece-edge:#0b5d24;
      --player-4-piece-edge:#202020;
      --neutral-piece-edge:#3f3f3f;
      --player-1-perimeter-bg:#f2a0a0;
      --player-2-perimeter-bg:#ffeaa0;
      --player-3-perimeter-bg:#b8f0c2;
      --player-4-perimeter-bg:#f9fbff;
      --right-panel-current-player-bg:var(--player-1-piece-bg);
      --right-panel-current-player-fg:#fff;
      --right-panel-section-bg:#171717;
      --right-panel-border:#333333;

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

      /* Board */
      --board-bg:#050505;
      --grid-line:#666;
      --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:#bfe5ff;
      --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-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);
    }

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

    [hidden]{
      display:none !important;
    }

    .panel-title-row{
      display:flex;
      align-items:baseline;
      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-copy{
      flex:0 0 auto;
      width:28px;
      min-width:28px;
      height:28px;
      margin-left:auto;
      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-copy:hover,
    .left-log-copy:focus{
      background:rgba(11,42,102,.92);
      color:#fff3a0;
      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;
      align-items:baseline;
      gap:8px;
      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;
    }

    .app-title-meta{
      display:inline-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;
      overflow:hidden;
      text-overflow:ellipsis;
    }

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

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

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

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

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

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

    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{
      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{
      min-width:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:var(--center-padding-px);
      border:var(--center-frame-px) solid var(--center-frame-a);
      background:
        repeating-linear-gradient(
          90deg,
          var(--center-frame-a) var(--center-stripe-start),
          var(--center-frame-a) var(--center-stripe-a),
          var(--center-frame-b) var(--center-stripe-a),
          var(--center-frame-b) var(--center-stripe-b)
        );
      overflow:hidden;
    }

    .board-wrap{
      position:relative;
      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:var(--grid-line-px) solid var(--grid-line);
      background:var(--board-bg);
      overflow:visible;
    }

    .board.grid-under{
      background-image:
        repeating-linear-gradient(to right,
          transparent 0 var(--cell-px),
          var(--grid-line) var(--cell-px) var(--grid-step-px)
        ),
        repeating-linear-gradient(to bottom,
          transparent 0 var(--cell-px),
          var(--grid-line) var(--cell-px) var(--grid-step-px)
        );
      background-size:var(--grid-step-px) var(--grid-step-px), var(--grid-step-px) var(--grid-step-px);
      background-position:0 0, 0 0;
    }

    .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:var(--tile-void-bg);
      cursor:var(--tile-cursor-void);
    }

    .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;
      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:
        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)),
        var(--boulder-color);
      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);
    }


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

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