/* ================================================================
   COLOR PALETTE -- change colours here and nowhere else.
   :root is the dark theme; body[data-theme="light"] re-points the
   same tokens for the light theme. Everything below the palette
   references these var(--*) names only.
   ================================================================ */
:root{
  /* ---- brand / peg identity (identical in both themes) ---- */
  --peg-red:#ed1837;
  --peg-white:#ffffff;
  --peg-blue:#3f7aef;
  --peg-red-edge:#7d1420;
  --peg-white-edge:#5a5a5a;
  --peg-blue-edge:#173a7d;
  --win:#ffd778;                 /* the 121st / winning hole */
  --win-edge:#8a5a15;
  --drag-over-fill:rgba(175, 175, 175, 0.784);

  /* ---- accent (JS overrides --accent / --seat-accent per seat) ---- */
  --accent:#e8b84b;
  --on-accent:#2a2013;           /* text / glyph on top of an accent fill */

  /* ---- surfaces & text ---- */
  --letterbox:#101010;
  --surface:#232323;
  --panel:#2c2926;
  --text:#ece6da;
  --muted:#cfcac0;
  --line:rgba(255,255,255,0.22);

  /* ---- holes & card slots ---- */
  --slot-bg:rgba(255,255,255,0.04);
  --slot-line:rgba(255,255,255,0.28);
  --hole-hover-fill:rgba(255,255,255,0.42);
  --hole-hover-edge:#1c1c1c;
  --snap-fill:rgba(255,255,255,0.10);
  --snap-edge:rgba(255,255,255,0.35);
  --seat-label-hover:rgba(128,128,128,0.22);

  /* ---- buttons (monochrome) ---- */
  --btn-bg:#5c5c5c;
  --btn-bg-hover:#707070;
  --btn-fg:#f2f2f2;
  --btn-border:rgba(0,0,0,0.32);

  /* ---- sliding hand dock ---- */
  --dock:#161411;
  --dock-line:rgba(255,255,255,0.14);
  --swatch-border:rgba(255,255,255,0.35);
  --swatch-chosen-border:#ffffff;

  /* ---- misc chrome ---- */
  --nub-bg:#4b4f54;
  --nub-fg:#ffffff;
  --icon:#4b4f54;

  /* ---- cards ---- */
  --card-face-bg:#ffffff;
  --card-face-border:#1c1c1c;
}

body[data-theme="light"]{
  --accent:#c1832c;

  --letterbox:#9f9f9f;
  --surface:#f0f0f0;
  --panel:#dcd3c2;
  --text:#2c261e;
  --muted:#5b5245;
  --line:rgba(0,0,0,0.22);

  --slot-bg:rgba(0,0,0,0.05);
  --slot-line:rgba(0,0,0,0.28);
  --hole-hover-fill:rgba(0,0,0,0.30);
  --hole-hover-edge:#1c1c1c;
  --snap-fill:rgba(0,0,0,0.08);
  --snap-edge:rgba(0,0,0,0.30);

  --btn-bg:#c2c2c2;
  --btn-bg-hover:#d5d5d5;
  --btn-fg:#515151;

  --dock:#dadada;
  --dock-line:rgba(0,0,0,0.18);
  --swatch-border:rgba(0,0,0,0.30);

  --nub-bg:#8d887c;
  --icon:#2b2b2b;
}

/* ================================================================
   LAYOUT / COMPONENTS -- colours below are all var(--*) tokens.
   ================================================================ */
  *{
    box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
    -webkit-tap-highlight-color:transparent;
    text-decoration:none;
  }
  html,body{ margin:0; padding:0; height:100%; }

  body{
    background:var(--letterbox);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color:var(--text);
    transition:background .25s ease;
  }

  /* hard-locked 16:9 box, as large as fits the viewport */
  #master-container{
    position:relative;
    aspect-ratio:16 / 9;
    width:min(100vw, calc(100vh * 16 / 9));
    height:min(100vh, calc(100vw * 9 / 16));
    overflow:hidden;
    background:var(--surface);
    transition:background .25s ease;
  }

  /* fixed 1600x900 design space; JS scales it uniformly to the container */
  #stage{
    position:absolute;
    top:50%;
    left:50%;
    width:1600px;
    height:900px;
    transform-origin:center center;
  }

  #board-svg{
    position:absolute;
    height:auto;
  }

  /* ---- interactive holes ---- */
  .hole{
    fill:transparent;
    stroke:transparent;
    stroke-width:1.1;
    cursor:pointer;
    pointer-events:all;
    touch-action:none;
    transition: fill .1s ease, stroke .1s ease;
  }
  .hole:hover{ fill:var(--hole-hover-fill); stroke:var(--hole-hover-edge); }
  .hole[data-color="red"]:hover{   fill:color-mix(in srgb, var(--peg-red) 45%, transparent);   stroke:var(--peg-red-edge); }
  .hole[data-color="white"]:hover{ fill:color-mix(in srgb, var(--peg-white) 80%, transparent); stroke:var(--peg-white-edge); }
  .hole[data-color="blue"]:hover{  fill:color-mix(in srgb, var(--peg-blue) 45%, transparent);  stroke:var(--peg-blue-edge); }
  .hole.hole-win:hover{ fill:color-mix(in srgb, var(--win) 60%, transparent); stroke:var(--win-edge); }

  .hole.snap-target{
    fill:var(--snap-fill);
    stroke:var(--snap-edge);
    stroke-width:0.8;
  }
  .hole[data-color="red"].snap-target{   fill:color-mix(in srgb, var(--peg-red) 14%, transparent);   stroke:color-mix(in srgb, var(--peg-red) 55%, transparent); }
  .hole[data-color="white"].snap-target{ fill:color-mix(in srgb, var(--peg-white) 24%, transparent); stroke:color-mix(in srgb, var(--peg-white) 60%, transparent); }
  .hole[data-color="blue"].snap-target{  fill:color-mix(in srgb, var(--peg-blue) 16%, transparent);  stroke:color-mix(in srgb, var(--peg-blue) 60%, transparent); }
  .hole.hole-win.snap-target{ fill:color-mix(in srgb, var(--win) 22%, transparent); stroke:color-mix(in srgb, var(--win) 70%, transparent); }

  .hole.drag-over{
    fill:var(--drag-over-fill) !important;
    stroke:var(--win-edge) !important;
    stroke-width:1.7 !important;
  }
  .hole[data-color="red"].drag-over{   stroke:var(--peg-red-edge) !important; }
  .hole[data-color="white"].drag-over{ stroke:var(--peg-white-edge) !important; }
  .hole[data-color="blue"].drag-over{  stroke:var(--peg-blue-edge) !important; }
  .hole.hole-win.drag-over{ stroke:var(--win-edge) !important; }

  /* ---- pegs ---- */
  .peg{
    position:absolute;
    left:0;
    top:0;
    margin-right:1px;
    margin-top:4px;
    pointer-events:auto;
    cursor:grab;
    touch-action:none;
    -webkit-user-drag:none;
    user-select:none;
    will-change:left, top;
    transition: transform .12s ease;
  }
  .peg:active{ cursor:grabbing; }
  .peg.dragging{
    transform:scale(1.05);
    transition:none;
  }
  .peg.just-dropped{ animation: peg-settle .18s ease; }
  @keyframes peg-settle{
    0%{   transform:translateY(-5px) scale(1.03); }
    60%{  transform:translateY(1px)  scale(1); }
    100%{ transform:translateY(0)    scale(1); }
  }

  /* ---- card slots ---- */
  .card-slot{
    position:absolute;
    width:111px;
    height:168px;
    aspect-ratio:111 / 168;
    border-radius:9px;
    background:var(--slot-bg);
    border:1.5px dashed var(--slot-line);
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  .card-slot.drop-hot{
    border-color:var(--accent);
    border-style:solid;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
  }
  .card-slot.dealer{
    border-style:solid;
    border-color:var(--seat-accent, var(--accent));
    box-shadow:0 0 0 2px var(--seat-accent, var(--accent)),
               0 0 22px 2px color-mix(in srgb, var(--seat-accent, var(--accent)) 60%, transparent);
  }

  /* count nub -- slides out of the stacked slot's top-left edge */
  .stack-count{
    position:absolute;
    min-width:18px;
    height:18px;
    padding:0 6px 0 7px;
    border-radius:6px 0 0 6px;
    background:var(--nub-bg);
    color:var(--nub-fg);
    font-size:11px;
    font-weight:700;
    line-height:18px;
    text-align:center;
    white-space:nowrap;
    pointer-events:none;
    z-index:499990;
    transform:translateX(0);
    opacity:0;
    transition:transform .24s cubic-bezier(.34,1.4,.5,1), opacity .16s ease;
  }
  .stack-count.show{ transform:translateX(-100%); opacity:1; }

  .slot-label{
    position:absolute;
    top:-22px;
    left:0;
    width:111px;
    text-align:center;
    font-size:13px;
    letter-spacing:.02em;
    color:var(--muted);
    pointer-events:none;
    white-space:nowrap;
  }

  /* ---- cards: no rotate -- press grows/tilts, release cuts to the other face ---- */
  .card{
    position:absolute;
    width:111px;
    height:168px;
    aspect-ratio:111 / 168;
    cursor:grab;
    touch-action:none;
    user-select:none;
    -webkit-user-drag:none;
    transform-origin:50% 60%;
    perspective:900px;
    border-radius:9px;
    border:2.5px solid var(--card-face-border);
    overflow:hidden;                 /* rounds + seals both faces -- see note below */
    transition: left .12s ease, top .12s ease, transform .14s ease;
  }
  .card:active{ cursor:grabbing; }
  .card.pressing{ transform: scale(1.07) rotate(2.6deg); }   /* held down, about to flip */
  .card.dragging{
    transition:none;
    transform:scale(1.05) rotate(2.6deg);                    /* same tilt as the flip press */
  }
  .card.cut,
  .card.cut *{ transition:none !important; }                 /* release: instant snap + face swap */
  .card-inner{
    position:absolute;
    inset:0;
    transform-style:preserve-3d;
    transition:transform .3s ease;
  }
  /* border-radius/border live on .card (not here): putting them on a
     backface-hidden, GPU-composited face produced a hairline seam at the
     rounded-corner clip. .card's overflow:hidden clips both faces instead. */
  .card-face{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:fill;
    background:var(--card-face-bg);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
  }
  .card-front{ transform:rotateX(180deg); }

  /* ---- deck drop box ---- */
  #deck-box{
    position:absolute;
    width:111px;
    height:168px;
    border-radius:9px;
    background:var(--slot-bg);
    border:1.5px dashed var(--slot-line);
    z-index:900;
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  #deck-box.drop-hot{
    border-color:var(--accent);
    border-style:solid;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 55%, transparent);
  }

  /* ---- palette buttons ---- */
  .deck-btn,
  .slot-btn{
    font:inherit;
    font-size:13px;
    border:1px solid var(--btn-border);
    background:var(--btn-bg);
    color:var(--btn-fg);
    cursor:pointer;
    transition: background .12s ease, transform .06s ease, opacity .12s ease;
  }
  .deck-btn:hover,
  .slot-btn:hover{ background:var(--btn-bg-hover); }
  .deck-btn:disabled,
  .slot-btn:disabled{ opacity:.38; cursor:not-allowed; }

  #deck-panel{
    position:absolute;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:stretch;
    z-index:500000;
  }
  .deck-btn{ padding:9px 12px; border-radius:9px; text-align:center; }
  .deck-btn:active:not(:disabled){ transform:translateY(1px); }

  .slot-btn{
    position:absolute;
    transform:translateX(-50%);
    padding:7px 15px;
    border-radius:16px;
    white-space:nowrap;
    z-index:400000;
  }
  .slot-btn:active:not(:disabled){ transform:translateX(-50%) translateY(1px); }
  .slot-btn[hidden]{ display:none; }
  .slot-btn.seat-action{
    background:var(--seat-accent, var(--accent));
    color:var(--on-accent);
    font-weight:600;
    border-color:color-mix(in srgb, var(--seat-accent, var(--accent)) 60%, #000);
  }
  .slot-btn.seat-action:hover{ background:color-mix(in srgb, var(--seat-accent, var(--accent)) 82%, #fff); }

  /* ---- day / night slider, hugging the top-right of the container ---- */
  #theme-slider{
    position:absolute;
    width:74px;
    height:34px;
    border-radius:17px;
    background:var(--panel);
    border:1px solid var(--line);
    cursor:pointer;
    z-index:600000;
    padding:0;
    overflow:hidden;
  }
  #theme-slider .ts-icon{
    position:absolute;
    top:7px;
    width:20px;
    height:20px;
    opacity:.75;
  }
  #theme-slider .ts-icon svg{
    display:block;
    width:100%;
    height:100%;
    fill:var(--icon);
  }
  #theme-slider .ts-day{ left:8px; }
  #theme-slider .ts-night{ right:8px; }
  #theme-slider .ts-knob{
    position:absolute;
    top:3px;
    left:3px;
    width:28px;
    height:28px;
    border-radius:50%;
    background:var(--btn-bg);
    transform:translateX(0);           /* dark: knob left, covers the sun -> moon shows */
    transition:transform .26s cubic-bezier(.4,1.3,.5,1), background .2s ease;
  }
  body[data-theme="light"] #theme-slider .ts-knob{
    transform:translateX(40px);        /* light: knob right, covers the moon -> sun shows */
  }

  /* ---- board reset: just the reset glyph, no chrome ---- */
  #board-reset{
    position:absolute;
    width:28px;
    height:28px;
    padding:0;
    margin-left: 4px;
    margin-right: 4px;
    margin-top: 10px;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:500000;
    opacity:.8;
    transition:opacity .12s ease, transform .1s ease;
  }
  #board-reset svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    fill:var(--icon);
  }
  #board-reset:hover{ opacity:1; }
  #board-reset:active{ transform:rotate(-40deg) scale(.94); }

  /* pegs flying home on reset */
  .peg.flyback{
    transition: left .325s cubic-bezier(.34,1.15,.5,1), top .325s cubic-bezier(.34,1.15,.5,1) !important;
  }

  /* ---- "Sit here" / player-name slot title ---- */
  .slot-label.seat-label{
    left:50%;
    width:auto;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    transform:translateX(-50%);
    pointer-events:auto;
    cursor:pointer;
    margin-bottom:4px;
    padding:3px 12px;
    border-radius:9px;
    background:var(--slot-bg);
    border:1px solid var(--line);
    transition:background .12s ease;
  }
  .slot-label.seat-label:hover{ background:var(--seat-label-hover); }
  .slot-label.seat-label.active{
    background:var(--seat-accent, var(--accent));
    color:var(--on-accent);
    border-color:var(--seat-accent, var(--accent));
  }

  /* ---- sliding hand dock ---- */
  #hand-dock{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:224px;
    background:var(--dock);
    border-top:2px solid var(--dock-line);
    transform:translateY(100%);
    transition:transform .32s cubic-bezier(.22,.61,.36,1), border-color .2s ease;
    z-index:250000;
  }
  #hand-dock.open{ transform:translateY(0); }
  #hand-dock.accent-lit{ border-top-color:var(--accent); }
  #hand-dock.drop-hot{
    border-top-color:var(--accent);
    box-shadow:0 0 24px 2px color-mix(in srgb, var(--accent) 45%, transparent);
  }
  #hand-title{
    position:absolute;
    top:9px;
    left:18px;
    font-size:13px;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--muted);
  }

  /* ---- accent picker on the right of the dock ---- */
  #accent-picker{
    position:absolute;
    top:14px;
    right:18px;
    display:flex;
    gap:8px;
    z-index:260000;
  }
  .accent-swatch{
    width:22px;
    height:22px;
    border-radius:50%;
    border:2px solid var(--swatch-border);
    cursor:pointer;
    padding:0;
    transition:transform .08s ease, border-color .12s ease;
  }
  .accent-swatch:hover{ transform:scale(1.12); }
  .accent-swatch.chosen{ border-color:var(--swatch-chosen-border); }

  /* ---- multiplayer: "who's playing" picker ---- */
  #mp-picker{
    position:absolute;
    inset:0;
    z-index:900000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.55);
  }
  .mp-picker-card{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px 32px;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
    min-width:260px;
  }
  .mp-picker-card h1{
    margin:0 0 6px;
    font-size:18px;
    font-weight:600;
    color:var(--text);
    text-align:center;
  }
  .mp-picker-btn{
    font:inherit;
    font-size:15px;
    font-weight:600;
    padding:12px 18px;
    border-radius:10px;
    border:1px solid var(--btn-border);
    background:var(--btn-bg);
    color:var(--btn-fg);
    cursor:pointer;
    transition:background .12s ease, transform .06s ease;
  }
  .mp-picker-btn:hover{ background:var(--btn-bg-hover); }
  .mp-picker-btn:active{ transform:translateY(1px); }

  /* ---- multiplayer: the other player's live cursor ---- */
  .mp-cursor{
    position:absolute;
    top:0;
    left:0;
    width:14px;
    height:14px;
    margin-left:-7px;
    margin-top:-7px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:7px;
    font-weight:700;
    color:var(--text);
    pointer-events:none;
    z-index:950000;
    opacity:0;
    transition:opacity .25s ease, left .05s linear, top .05s linear;
  }
  .mp-cursor.show{ opacity:1; }