* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    font-family: "Segoe UI", system-ui, sans-serif;
    background: #0e1014;
    color: #e8eaf0;
    /* No click-drag text selection anywhere — it constantly triggered during table interaction.
       Re-enabled ONLY for the room code (user-select: all below) and text inputs. */
    user-select: none;
    -webkit-user-select: none;
}

input, textarea {
    user-select: text;
    -webkit-user-select: text;
}

h1:focus { outline: none; }

/* ---------- join screen ---------- */
.join-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    background: radial-gradient(ellipse at 50% 30%, #1a2030 0%, #0e1014 65%);
}

.join-card {
    width: min(420px, 92vw);
    padding: 2.5rem 2.25rem;
    background: #161a22;
    border: 1px solid #262c3a;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.logo {
    margin: 0;
    font-size: 2.6rem;
    letter-spacing: 0.45em;
    text-align: center;
    font-weight: 300;
    color: #dfe5f0;
}

.tagline {
    margin: -0.6rem 0 0.4rem;
    text-align: center;
    color: #8a93a8;
    font-size: 0.95rem;
}

.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field span { font-size: 0.8rem; color: #8a93a8; letter-spacing: 0.08em; text-transform: uppercase; }

.field input, .code-input {
    background: #0e1118;
    border: 1px solid #2a3140;
    border-radius: 8px;
    color: #e8eaf0;
    padding: 0.65rem 0.8rem;
    font-size: 1rem;
    outline: none;
}
.field input:focus, .code-input:focus { border-color: #4fc3f7; }

.code-input {
    width: 7.5rem;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    font-size: 1.15rem;
    text-align: center;
}

.join-actions { display: flex; flex-direction: column; gap: 0.9rem; }
.join-row { display: flex; gap: 0.6rem; align-items: stretch; }

.btn {
    background: #232a38;
    border: 1px solid #333c4f;
    color: #dfe5f0;
    border-radius: 8px;
    padding: 0.65rem 1.2rem;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) { background: #2c3547; border-color: #46536d; }
.btn:disabled { opacity: 0.45; cursor: default; }
.btn.primary { background: #1c5d8f; border-color: #2b7ab8; }
.btn.primary:hover:not(:disabled) { background: #226fa9; }

.divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #5b647a;
    font-size: 0.8rem;
}
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: #262c3a; }

.join-error { color: #e57373; font-size: 0.85rem; margin: 0; }
.footnote { color: #545d72; font-size: 0.8rem; }

/* ---------- table page ---------- */
.table-shell { position: fixed; inset: 0; overflow: hidden; }

#slate-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    touch-action: none;
}

#slate-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.ptr-label {
    position: absolute;
    transform: translate(-50%, -100%);
    font-size: 0.75rem;
    font-weight: 600;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.hud { position: absolute; z-index: 5; }

.hud-top {
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(rgba(10, 12, 16, 0.85), rgba(10, 12, 16, 0));
}

.hud-logo {
    color: #dfe5f0;
    text-decoration: none;
    letter-spacing: 0.35em;
    font-weight: 300;
    font-size: 1.05rem;
}

.hud-code {
    background: #161a22;
    border: 1px solid #333c4f;
    border-radius: 6px;
    padding: 0.2rem 0.7rem;
    letter-spacing: 0.3em;
    font-size: 1rem;
    color: #4fc3f7;
    user-select: all;
    -webkit-user-select: all;
}

.player-chips { display: flex; gap: 0.4rem; flex-wrap: wrap; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: rgba(22, 26, 34, 0.85);
    border: 1px solid #2a3140;
    border-radius: 999px;
    padding: 0.18rem 0.7rem 0.18rem 0.45rem;
    font-size: 0.8rem;
}
.chip i {
    width: 0.65rem; height: 0.65rem;
    border-radius: 50%;
    display: inline-block;
}

.hud-actions {
    right: 1rem; bottom: 1rem;
    display: flex;
    gap: 0.5rem;
}

.hud-help {
    left: 1rem; bottom: 1rem;
    color: #6a7490;
    font-size: 0.78rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    pointer-events: none;
}

/* "?" help toggle — sits with the seat/mute utility buttons (bottom-right stack) */
.help-btn {
    right: 96px; bottom: 44px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(18, 22, 30, 0.82);
    border: 1px solid #384258;
    border-radius: 8px;
    color: #eef2f8;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    pointer-events: auto;
}
.help-btn:hover { border-color: #4fc3f7; }
.help-pop {
    position: absolute;
    right: 12px; bottom: 86px;
    z-index: 7;
    display: flex; gap: 1.4rem;
    padding: 0.9rem 1.1rem;
    background: rgba(14, 17, 22, 0.94);
    border: 1px solid #333c4f;
    border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    max-width: min(92vw, 720px);
    flex-wrap: wrap;
}
.help-col { display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.76rem; color: #aab3c6; }
.help-col b { color: #4fc3f7; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.1rem; }

/* ---------- cards: deck labels + hand strip ---------- */
.deck-label {
    position: absolute;
    transform: translate(-50%, -50%);
    min-width: 1.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    background: rgba(22, 26, 34, 0.9);
    border: 1px solid #384258;
    color: #dfe5f0;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    pointer-events: none;
}

#hand-strip, .hand-strip {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    padding: 10px 18px 12px;
    z-index: 4;                 /* above canvas/overlay, below .hud (5) */
    pointer-events: auto;
    background: linear-gradient(rgba(10, 12, 16, 0), rgba(10, 12, 16, 0.55));
    border-radius: 16px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
/* terrain tools active → slide the card hand down out of the way (animated, not a jump) */
.hand-strip.tools-hidden {
    transform: translateX(-50%) translateY(180px);
    opacity: 0;
    pointer-events: none;
}

/* ---------- terrain-tools HUD (bottom-centre, where the hand sits) ---------- */
.tool-hud {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding: 6px;
    z-index: 5;
    pointer-events: auto;
    background: rgba(14, 17, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-family: system-ui, -apple-system, sans-serif;
    color: #cfd6df;
}
.tool-hud[hidden] { display: none; }

/* Bottom-left stack of floating tool panels (fog + water) — panels flow upward from the corner so
   both can be open at once (Battleship = water + fog) without overlapping. */
.panel-stack {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 6;
    display: flex;
    flex-direction: column-reverse;   /* first panel in markup sits closest to the corner */
    gap: 10px;
    align-items: flex-start;
    pointer-events: none;             /* the gap between panels stays click-through */
}
.panel-stack > * { pointer-events: auto; }

/* Water tuning panel — a floating glassy panel (bottom-left), separate from the crowded drawer. */
.water-panel {
    position: static;                 /* positioned by the .panel-stack flow */
    z-index: 6;
    width: 230px;
    padding: 10px 12px;
    background: rgba(10, 18, 26, 0.86);
    border: 1px solid rgba(120, 190, 230, 0.18);
    border-radius: 14px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-family: system-ui, -apple-system, sans-serif;
    color: #cfe2ef;
}
.water-panel.collapsed { width: auto; padding: 6px 8px; }
.water-panel-tab {
    display: inline-block;
    background: none;
    border: none;
    color: #7fd0ea;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    padding: 2px 2px 6px;
}
.water-panel.collapsed .water-panel-tab { padding: 2px; }
.water-panel-body { display: flex; flex-direction: column; gap: 9px; }
.wp-row { display: flex; flex-direction: column; gap: 3px; }
.wp-label { font-size: 11px; opacity: .82; }
.wp-label b { color: #7fd0ea; font-variant-numeric: tabular-nums; }
.wp-row input[type=range] { width: 100%; accent-color: #46b0c9; height: 3px; }
.wp-hint { margin-top: 2px; font-size: 10px; line-height: 1.4; opacity: .5; }

/* fog panel: same glassy shell as the water panel, grey-violet accent + compact mode buttons */
.fog-panel .water-panel-tab { color: #b9c2d8; }
.wp-mode-row { display: flex; gap: 5px; }
.wp-mode-btn {
    flex: 1;
    min-height: 26px;
    padding: 3px 6px;
    font-size: 11px;
    color: #c6cede;
    background: rgba(120, 130, 165, 0.10);
    border: 1px solid rgba(150, 165, 205, 0.22);
    border-radius: 8px;
    cursor: pointer;
}
.wp-mode-btn:hover { background: rgba(150, 165, 205, 0.2); }
.wp-mode-btn.active { color: #eef2fb; border-color: #8fa2d8; background: rgba(140, 160, 215, 0.28); }
.tool-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    min-width: 58px;
    padding: 7px 8px 5px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    color: #aab3bd;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.tool-btn:hover { background: rgba(255, 255, 255, 0.06); color: #e6ebf1; }
.tool-btn.active {
    background: rgba(56, 132, 222, 0.22);
    border-color: rgba(90, 160, 240, 0.55);
    color: #eaf3ff;
}
.tool-glyph { font-size: 18px; line-height: 1; }
.tool-label { font-size: 11px; line-height: 1; }
.tool-btn kbd {
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 8px;
    opacity: 0.5;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    padding: 0 3px;
}
.tool-sep { width: 1px; margin: 5px 2px; background: rgba(255, 255, 255, 0.1); }
.tool-size {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 54px;
    padding: 0 8px;
}
.tool-size-label {
    font-size: 9px;
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.tool-size-val { font-size: 17px; font-weight: 700; color: #eaf3ff; line-height: 1; }
.tool-size-hint { font-size: 9px; opacity: 0.45; }

.hand-card {
    position: relative;
    flex: 0 0 auto;
    width: 64px;
    height: 90px;
    margin: 0 -6px;                 /* overlap → fan */
    background: #f7f5ee;
    color: #1a1a1a;
    border: 1px solid #cbc7ba;
    border-radius: 7px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transform-origin: bottom center;
    transform: translateY(var(--lift, 0)) rotate(var(--rot, 0deg));
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
}
.hand-card:hover {
    transform: translateY(-16px) rotate(var(--rot, 0deg)) scale(1.06);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6);
    z-index: 3;
}
.hand-card.red { color: #c0392b; }
.hand-card .rank {
    position: absolute;
    top: 4px; left: 6px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}
.hand-card .suit {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    line-height: 1;
}
.hand-card.ghost {
    position: fixed;
    margin: 0;
    transform: translate(-50%, -50%) rotate(-4deg) scale(1.08);
    transition: none;
    pointer-events: none;
    opacity: 0.92;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.7);
    z-index: 50;
}

.hand-count {
    position: absolute;
    top: -7px; right: -7px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #1c5d8f;
    border: 1px solid #2b7ab8;
    color: #eaf3fb;
    font-size: 0.72rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

/* ---------- side drawer (toys + table) ---------- */
.drawer {
    position: fixed;
    top: 0; right: 0;
    height: 100%;
    width: 288px;
    max-width: 86vw;
    background: linear-gradient(180deg, #141821, #10131a);
    border-left: 1px solid #262c3a;
    box-shadow: -18px 0 48px rgba(0, 0, 0, 0.5);
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 6;                 /* above .hud (5) */
    display: flex;
    flex-direction: column;
}
.drawer.open { transform: translateX(0); }

.drawer-tab {
    position: absolute;
    top: 50%;
    left: -38px;
    transform: translateY(-50%);
    width: 38px;
    height: 76px;
    border: 1px solid #333c4f;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #1b2230;
    color: #cfd6e6;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -8px 0 20px rgba(0, 0, 0, 0.4);
}
.drawer-tab:hover { background: #232c3d; color: #fff; }

.drawer-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.drawer-tabs {
    display: flex;
    flex-wrap: wrap;               /* 5 tabs: wrap to a second row rather than pushing one off-screen */
    gap: 0.15rem;
    padding: 0.75rem 0.6rem 0;
    border-bottom: 1px solid #222836;
    flex: 0 0 auto;
}
.drawer-tabbtn {
    flex: 1 1 auto;                /* share the width; shrink before overflowing */
    min-width: max-content;       /* never squash a label to ellipsis */
    text-align: center;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: #7c869c;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    cursor: pointer;
    white-space: nowrap;
}
.drawer-tabbtn:hover { color: #b7c0d4; }
.drawer-tabbtn.active { color: #e8eaf0; border-bottom-color: #4fc3f7; }

.drawer-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 0.9rem 1.2rem; }

.drawer-section { margin-bottom: 1.4rem; }
.drawer-section:last-child { margin-bottom: 0; }
.drawer-h {
    margin: 0 0 0.7rem;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: #6a7490;
    font-weight: 600;
}

.toy-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}
.toy-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.65rem 0.3rem;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 9px;
    color: #dfe5f0;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.toy-card:hover { background: #212938; border-color: #46536d; }
.toy-card:active { transform: translateY(1px); }
.toy-glyph { font-size: 1.5rem; line-height: 1; }
.toy-label { font-size: 0.72rem; color: #aab3c6; }

/* featured game launchers — wider 2-up grid, larger than toy cards */
.game-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}
.game-card {
    padding: 0.95rem 0.4rem;
    gap: 0.45rem;
    background: linear-gradient(180deg, #1d2431, #171d28);
    border-color: #35415a;
}
.game-card:hover { background: linear-gradient(180deg, #26304180, #1d2431); border-color: #4f6285; }
.game-card .toy-glyph { font-size: 2.1rem; }
.game-card .toy-label { font-size: 0.8rem; color: #cdd5e6; letter-spacing: 0.02em; }
/* three game launchers side-by-side (chess / checkers / backgammon) */
.game-grid-3 { grid-template-columns: repeat(3, 1fr); }
.game-grid-3 .game-card { padding: 0.8rem 0.3rem; }
.game-grid-3 .game-card .toy-glyph { font-size: 1.8rem; }
.game-grid-3 .game-card .toy-label { font-size: 0.72rem; }
.games-hint {
    margin-top: 0.55rem;
    font-size: 0.72rem;
    color: #6a7490;
    letter-spacing: 0.01em;
    text-align: center;
}

/* table surface swatches */
.surface-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.surface-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    padding: 0.35rem 0.15rem;
    background: transparent;
    border: none;
    color: #9aa3b8;
    cursor: pointer;
    border-radius: 8px;
    transition: color 0.14s;
}
.surface-swatch i {
    width: 100%;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.14s, transform 0.08s;
}
.surface-swatch span { font-size: 0.62rem; letter-spacing: 0.01em; }
.surface-swatch:hover { color: #dfe5f0; }
.surface-swatch:hover i { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(79, 195, 247, 0.35); }
.surface-swatch:active i { transform: translateY(1px); }
.surface-swatch.active { color: #e8eaf0; }
.surface-swatch.active i { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 0 2px #4fc3f7; }

.surface-swatch.felt  i { background: #1f7a4d; }
.surface-swatch.blue  i { background: #244a86; }
.surface-swatch.wood  i { background: linear-gradient(90deg, #6b4a2c, #5a3d24); }
.surface-swatch.slate i { background: #5a626e; }
.surface-swatch.sand  i { background: #cdb389; }
.surface-swatch.poker i { background: radial-gradient(120% 150% at 50% 118%, rgba(255, 255, 255, 0.28) 0 34%, rgba(255, 255, 255, 0) 36%), #1f7a4d; }
.surface-swatch.terrain i { background: linear-gradient(180deg, #3f7d3a 0%, #4f7a3a 42%, #7a6a45 66%, #8b8f97 100%); }
.surface-swatch.sandpit i { background: linear-gradient(180deg, #d8c194 0%, #c2a870 60%, #a98d5c 100%); }
.surface-swatch.water   i { background: linear-gradient(180deg, #6fd3e6 0%, #2f8fbf 55%, #0f5f8f 100%); }
.surface-swatch.maptop  i { background: linear-gradient(135deg, #123a2e 0%, #1f6d4f 38%, #58a06a 60%, #93b479 78%, #6fd3e6 100%); }
.surface-swatch.coast   i { background: linear-gradient(180deg, #58a06a 0%, #93b479 34%, #d8c194 48%, #6fd3e6 62%, #1f6f9f 100%); }

/* ---------- sculpt controls (terrain style) ---------- */
.sculpt-section { margin-top: -0.4rem; }

.brush-modes {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-bottom: 0.9rem;
}
.brush-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    padding: 0.5rem 0.15rem;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 8px;
    color: #9aa3b8;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s;
}
.brush-btn span { font-size: 0.6rem; letter-spacing: 0.01em; }
.brush-btn:hover { background: #212938; border-color: #46536d; color: #dfe5f0; }
.brush-btn:active { transform: translateY(1px); }
.brush-btn.active {
    color: #e8eaf0;
    border-color: #4fc3f7;
    background: #1d2634;
    box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.4);
}

.sculpt-toggle {
    width: 100%;
    margin-top: 0.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 8px;
    color: #cdd5e6;
    padding: 0.55rem 0.8rem;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sculpt-toggle:hover { background: #212938; border-color: #46536d; }
.sculpt-dot {
    width: 0.6rem; height: 0.6rem;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #4a5468;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    transition: background 0.15s, box-shadow 0.15s;
}
.sculpt-toggle.on {
    color: #d7f5e2;
    border-color: #2f7d4f;
    background: #16281f;
}
.sculpt-toggle.on .sculpt-dot {
    background: #46d68a;
    box-shadow: 0 0 6px rgba(70, 214, 138, 0.7);
}

.sculpt-hint {
    margin-top: 0.55rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #6a7490;
}

.slider-row { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.9rem; }
.slider-row:last-child { margin-bottom: 0; }
.slider-label { font-size: 0.78rem; color: #9aa3b8; display: flex; justify-content: space-between; }
.slider-label b { color: #4fc3f7; font-weight: 700; }
.drawer input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    border-radius: 999px;
    background: #2a3140;
    outline: none;
    cursor: pointer;
}
.drawer input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #4fc3f7;
    border: 2px solid #10131a;
    cursor: pointer;
}
.drawer input[type=range]::-moz-range-thumb {
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #4fc3f7;
    border: 2px solid #10131a;
    cursor: pointer;
}

/* table shape picker — four small buttons */
.shape-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    margin-bottom: 1rem;
}
.shape-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    padding: 0.45rem 0.15rem;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 8px;
    color: #9aa3b8;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s;
}
.shape-btn span { font-size: 0.62rem; letter-spacing: 0.01em; }
.shape-btn:hover { background: #212938; border-color: #46536d; color: #dfe5f0; }
.shape-btn:active { transform: translateY(1px); }
.shape-btn.active {
    color: #e8eaf0;
    border-color: #4fc3f7;
    background: #1d2634;
    box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.4);
}

/* seats stepper */
.seats-row { display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.8rem; }
.seats-label { font-size: 0.78rem; color: #9aa3b8; display: flex; justify-content: space-between; }
.seats-label b { color: #4fc3f7; font-weight: 700; }
.seats-stepper { display: flex; align-items: center; gap: 0.55rem; }
.seats-stepper input[type=range] { flex: 1; }
.seats-btn {
    width: 26px; height: 26px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 7px;
    color: #dfe5f0;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.seats-btn:hover:not(:disabled) { background: #212938; border-color: #46536d; }
.seats-btn:active:not(:disabled) { transform: translateY(1px); }
.seats-btn:disabled { opacity: 0.4; cursor: default; }

.seat-readout {
    margin-bottom: 0.6rem;
    font-size: 0.76rem;
    color: #9aa3b8;
    letter-spacing: 0.01em;
}

.seat-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.7rem;
}
.seat-pick-btn {
    min-width: 26px; height: 26px;
    padding: 0 0.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 7px;
    color: #dfe5f0;
    font-size: 0.82rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.seat-pick-btn:hover { background: #212938; border-color: #46536d; }
.seat-pick-btn:active { transform: translateY(1px); }
.seat-pick-btn.active { background: #1c3a4a; border-color: #4fc3f7; color: #eaf6ff; }
.seat-pick-btn.spectate { font-size: 0.95rem; }

/* ---------- bottom dock: spawn hotbar + minimize/restore chrome ---------- */
.spawn-hotbar {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);   /* initial centering; dock.js takes over positioning once loaded */
    display: flex;
    gap: 6px;
    padding: 6px;
    z-index: 5;
    background: rgba(14, 17, 22, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.spawn-hotbar > button:not(.dock-min-btn) {
    width: 46px; height: 48px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 10px;
    color: #dbe2ef;
    font-size: 0.6rem;
    cursor: pointer;
    transition: background 0.14s, border-color 0.14s;
}
.spawn-hotbar > button:not(.dock-min-btn):hover { background: #212a3a; border-color: #2b7ab8; }
.spawn-hotbar .g { font-size: 1.15rem; line-height: 1; }

/* high-specificity (button.dock-…) so a panel's own big-button rules can never inflate it */
button.dock-min-btn {
    position: absolute;
    top: -7px; right: -7px;
    width: 18px; height: 18px; min-width: 18px; min-height: 18px;
    flex: 0 0 auto;
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    background: #1c2230;
    border: 1px solid #46536d;
    border-radius: 50%;
    color: #9fb0c8;
    font-size: 12px; line-height: 1;
    padding: 0;
    cursor: pointer;
    z-index: 7;
}
button.dock-min-btn:hover { background: #26304a; color: #eaf2ff; border-color: #4fc3f7; }

.dock-bar {
    position: absolute;
    left: 50%; bottom: 4px;
    transform: translateX(-50%);
    display: none;              /* dock.js shows it when something is minimized */
    gap: 6px;
    z-index: 6;
}
.dock-tab {
    background: rgba(14, 17, 22, 0.85);
    border: 1px solid #2a3140;
    border-radius: 9px;
    color: #cfd6e2;
    font-size: 0.75rem;
    padding: 5px 10px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.dock-tab:hover { border-color: #4fc3f7; color: #eaf6ff; }

/* ---------- room jukebox (docked panel; appears when the playlist has tracks) ---------- */
.juke-panel {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);   /* initial; dock.js takes over */
    width: 230px;
    padding: 8px 10px;
    z-index: 5;
    background: rgba(14, 17, 22, 0.85);
    border: 1px solid rgba(160, 108, 214, 0.3);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex; flex-direction: column; gap: 6px;
}
.juke-panel[hidden] { display: none; }
.juke-top { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; color: #d9c6f2; }
.juke-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.juke-list { display: flex; flex-direction: column; gap: 2px; max-height: 110px; overflow-y: auto; }
.juke-row { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border-radius: 6px; font-size: 0.74rem; color: #b8c0d0; }
.juke-row.on { background: rgba(160, 108, 214, 0.16); color: #eaf6ff; }
.juke-name { flex: 1; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.juke-name:hover { color: #fff; }
.juke-del { width: 18px; height: 18px; background: none; border: 0; color: #6a7490; cursor: pointer; font-size: 0.7rem; }
.juke-del:hover { color: #e57373; }
.juke-transport { display: flex; align-items: center; gap: 7px; }
.juke-transport button {
    width: 30px; height: 26px;
    background: #191e29; border: 1px solid #2a3140; border-radius: 7px;
    color: #dbe2ef; cursor: pointer; font-size: 0.8rem;
}
.juke-transport button:hover { border-color: #a06cd6; }
.juke-transport input[type=range] { flex: 1; accent-color: #a06cd6; }

/* ---------- media screens: iframe frames tracked over the 3D panels ---------- */
.screen-frame {
    position: absolute;
    z-index: 3;                 /* above canvas, below hand-strip(4)/hud(5) so UI stays on top */
    overflow: hidden;
    background: #000;
    border-radius: 3px;
    pointer-events: none;       /* orbit/grab pass through; the chip opts into interaction */
}
.screen-frame iframe,
.screen-frame video {
    width: 100%; height: 100%;
    border: 0;
    object-fit: contain;
    pointer-events: none;       /* toggled by the 🖱 chip */
}
.screen-frame .screen-chip {
    position: absolute;
    top: 4px; right: 4px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(17, 21, 29, 0.85);
    border: 1px solid #46536d;
    border-radius: 7px;
    color: #dfe5f0;
    font-size: 0.8rem;
    cursor: pointer;
    pointer-events: auto;       /* always clickable */
}
.screen-frame .screen-chip.on { border-color: #4fc3f7; background: rgba(28, 58, 74, 0.95); }

/* ---------- drag-drop radial chooser + toast ---------- */
.drop-radial { position: absolute; z-index: 9; width: 0; height: 0; }
.drop-radial-btn {
    position: absolute; left: 0; top: 0;
    width: 56px; height: 56px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    background: rgba(17, 21, 29, 0.94);
    border: 1px solid #46536d;
    border-radius: 50%;
    color: #dfe5f0;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.drop-radial-btn:hover { border-color: #4fc3f7; background: rgba(28, 58, 74, 0.96); }
.drop-radial-btn .g { font-size: 1rem; line-height: 1; }
.drop-radial-btn .l { font-size: 0.5rem; color: #9fb0c8; white-space: nowrap; }
.drop-radial-x {
    position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: #241a1c; border: 1px solid #6e3b41; border-radius: 50%;
    color: #e79a9a; font-size: 0.75rem; cursor: pointer;
}
.dnd-toast {
    position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%) translateY(8px);
    z-index: 9;
    padding: 6px 14px;
    background: rgba(17, 21, 29, 0.94);
    border: 1px solid #46536d;
    border-radius: 9px;
    color: #dfe5f0; font-size: 0.8rem;
    opacity: 0; transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}
.dnd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.dnd-toast.ok { border-color: rgba(108, 191, 88, 0.5); color: #b8e6a8; }

/* ---------- pen toolbar (docked bottom panel, shown while the pen is on) ---------- */
.pen-hud {
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translateX(-50%);   /* initial centering; dock.js takes over once loaded */
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    z-index: 5;
    background: rgba(14, 17, 22, 0.85);
    border: 1px solid rgba(255, 224, 102, 0.25);
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.pen-hud[hidden] { display: none; }
.pen-hud-label { font-size: 0.78rem; font-weight: 700; color: #ffe066; letter-spacing: 0.04em; margin-right: 2px; }
.pen-swatch {
    width: 22px; height: 22px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    flex: 0 0 auto;
}
.pen-swatch.on { box-shadow: 0 0 0 2px #4fc3f7; }
.pen-swatch:hover { border-color: #fff; }
.pen-hud input[type=color] { width: 30px; height: 24px; padding: 0; border: 1px solid #2a3140; border-radius: 6px; background: #191e29; cursor: pointer; flex: 0 0 auto; }
.pen-hud input[type=range] { width: 90px; accent-color: #ffe066; }
.pen-tool-btn {
    position: relative;            /* anchor for the hotkey badge */
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 7px;
    color: #dbe2ef;
    font-size: 0.85rem;
    cursor: pointer;
    flex: 0 0 auto;
}
.pen-tool-btn:hover { border-color: #4fc3f7; }
/* Selection box around the armed tool (there was no visual for `.on` before). */
.pen-tool-btn.on {
    border-color: #4fc3f7;
    background: #22303f;
    box-shadow: 0 0 0 2px #4fc3f7, 0 0 9px rgba(79, 195, 247, 0.55);
}
/* Hotkey number badge (top-right corner) — the digit that arms this tool. */
.tool-key {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 12px; height: 12px;
    padding: 0 2px;
    display: flex; align-items: center; justify-content: center;
    font-size: 8px; font-weight: 800; line-height: 1;
    color: #0e1116; background: #ffe066;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}
.pen-tool-btn.on .tool-key { background: #4fc3f7; }

/* ---------- whiteboard pen controls ---------- */
/* seat-layout editor (Table tab): per-edge counts + Auto / Theater presets */
.seat-arrange { display: flex; flex-direction: column; gap: 4px; margin-top: 0.55rem; }
.seat-arrange-head { display: flex; align-items: center; gap: 6px; }
.seat-arrange-head .seats-label { flex: 1; }
.arrange-btn { width: auto; padding: 0 9px; font-size: 0.78rem; white-space: nowrap; }
.seat-edge-row { display: flex; align-items: center; gap: 7px; }
.seat-edge-label { flex: 1; font-size: 0.78rem; color: #8a93a8; }
.seat-edge-count { min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }

.pen-row { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0; }
.pen-opts { display: flex; align-items: center; gap: 0.5rem; }
.pen-opts input[type=color] { width: 34px; height: 26px; padding: 0; border: 1px solid #2a3140; border-radius: 6px; background: #191e29; cursor: pointer; }
.pen-opts input[type=range] { flex: 1; }

/* ---------- right-click object context menu ---------- */
.ctx-menu {
    position: fixed;
    z-index: 60;
    min-width: 150px;
    padding: 0.3rem;
    background: rgba(22, 26, 34, 0.98);
    border: 1px solid #333c4f;
    border-radius: 9px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.6);
    font-size: 0.82rem;
    user-select: none;
}
.ctx-item {
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    color: #dfe5f0;
    cursor: pointer;
    white-space: nowrap;
}
.ctx-item:hover { background: #2c3547; }
.ctx-item.danger { color: #e57373; }
.ctx-item.danger:hover { background: #3a2426; }
.ctx-item.ctx-static { color: #8a93a8; cursor: default; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding-bottom: 0.15rem; }
.ctx-item.ctx-static:hover { background: none; }
.ctx-sep { height: 1px; background: #2a3140; margin: 0.3rem 0.2rem; }
.ctx-swatches { display: flex; flex-wrap: wrap; gap: 0.28rem; padding: 0.1rem 0.5rem 0.4rem; max-width: 190px; }
.ctx-swatch {
    width: 20px; height: 20px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 5px;
    padding: 0;
    cursor: pointer;
}
.ctx-swatch:hover { border-color: #fff; transform: scale(1.12); }
.ctx-swatch.clear {
    display: flex; align-items: center; justify-content: center;
    background: #191e29; color: #9aa3b8; font-size: 0.7rem;
}
.ctx-piece-btn {
    height: 24px;
    padding: 0 7px;
    display: flex; align-items: center; justify-content: center;
    background: #191e29;
    border: 1px solid #2a3140;
    border-radius: 6px;
    color: #dfe5f0;
    font-size: 0.85rem;
    cursor: pointer;
}
.ctx-piece-btn:hover { background: #212a3a; border-color: #4fc3f7; }
.ctx-piece-btn.on { border-color: #4fc3f7; background: #1c3a4a; }
.ctx-item.ctx-confirm { display: flex; align-items: center; gap: 0.3rem; color: #cdd5e6; text-transform: none; letter-spacing: normal; font-size: 0.82rem; }
.ctx-confirm-btn { height: 22px; padding: 0 10px; border-radius: 6px; border: 1px solid #2a3140; cursor: pointer; font-size: 0.8rem; }
.ctx-confirm-btn.yes { background: #5a2026; border-color: #a24149; color: #ffdde0; }
.ctx-confirm-btn.yes:hover { background: #6e262e; border-color: #c85560; }
.ctx-confirm-btn.no { background: #191e29; color: #dfe5f0; }
.ctx-confirm-btn.no:hover { background: #212a3a; border-color: #4fc3f7; }

/* add-a-chess-piece rows (Games tab) */
.piece-add { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.55rem; }
.piece-btn {
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #f0ead8;
    border: 1px solid #b9b09a;
    border-radius: 7px;
    color: #24211a;
    font-size: 1.05rem;
    cursor: pointer;
}
.piece-btn.dark { background: #232936; border-color: #3a4356; color: #e8ecf4; }
.piece-btn:hover { border-color: #4fc3f7; }

/* ---------- "make from image" maker grid (drag an image onto a tile) ---------- */
.maker-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.5rem; }
.maker-cell {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.2rem;
    min-height: 62px;
    padding: 0.4rem 0.3rem;
    background: #161a22;
    border: 1.5px dashed #384258;
    border-radius: 9px;
    cursor: pointer;
    text-align: center;
    transition: background 0.14s, border-color 0.14s;
}
.maker-cell:hover { background: #1c2330; border-color: #4fc3f7; }
.maker-cell.wide { grid-column: 1 / -1; flex-direction: row; gap: 0.5rem; min-height: 44px; }
.maker-glyph { font-size: 1.3rem; line-height: 1; }
.maker-label { font-size: 0.72rem; color: #b8c0d0; }
.maker-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.custom-deck-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.5rem; margin-bottom: 0.5rem; font-size: 0.75rem; color: #9aa3b8; }
.custom-deck-fields label { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; }
.custom-deck-fields input { width: 3.4rem; background: #0e1118; border: 1px solid #2a3140; border-radius: 5px; color: #e8eaf0; padding: 0.2rem 0.3rem; }

/* ---------- import model card ---------- */
.import-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1rem 0.75rem;
    background: #171d28;
    border: 1.5px dashed #3a4560;
    border-radius: 11px;
    color: #cdd5e6;
    cursor: pointer;
    text-align: center;
    transition: background 0.14s, border-color 0.14s;
}
.import-card:hover { background: #1d2431; border-color: #5a6a8c; }
.import-glyph { font-size: 1.7rem; line-height: 1; }
.import-title { font-size: 0.8rem; color: #aab3c6; letter-spacing: 0.01em; }
/* overlay the native file input across the whole card so the label is the drop zone */
.import-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* compact variant — image-board upload sits under the Boards grid */
.clear-btn {
    width: 100%;
    margin-top: 0.6rem;
    background: #3a2226;
    border: 1px solid #6e3b41;
    color: #f0c9cd;
    border-radius: 8px;
    padding: 0.55rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.clear-btn:hover { background: #4a2a2f; border-color: #8a4a52; }
.clear-btn.danger { background: #5a2026; border-color: #a24149; color: #ffdde0; font-weight: 600; margin-top: 1rem; }
.clear-btn.danger:hover { background: #6e262e; border-color: #c85560; }
.save-btn { display: block; text-align: center; text-decoration: none; background: #1a2c3a; border-color: #2b5a7a; color: #a8d4f0; margin-bottom: 0.45rem; }
.save-btn:hover { background: #22394c; border-color: #4fc3f7; }

.import-card.compact {
    flex-direction: row;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    margin-top: 0.6rem;
    border-radius: 9px;
}
.import-card.compact .import-glyph { font-size: 1.15rem; }
.import-card.compact .import-title { font-size: 0.75rem; }

.import-status {
    margin-top: 0.55rem;
    font-size: 0.76rem;
    letter-spacing: 0.01em;
    color: #9aa3b8;
}
.import-status.ok { color: #7fd39a; }
.import-status.muted { color: #9aa3b8; }
.import-status.error { color: #ff6b6b; }

.import-hint {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    line-height: 1.4;
    color: #6a7490;
}

.webgpu-fail {
    position: absolute; inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 12, 16, 0.92);
    z-index: 10;
    text-align: center;
}
.webgpu-fail[hidden] { display: none; }
.webgpu-fail h2 { color: #e57373; font-weight: 400; }
.webgpu-fail p { color: #8a93a8; max-width: 34rem; }

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #111;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; }