/* =========================
   Theme · Dark · Modern · Warm
   ========================= */
:root{
    /* Surfaces */
    --bg-1: #141014;              /* near-black with warmth */
    --bg-2: #1c1517;              /* deep plum-brown */
    --panel:        rgba(30,24,26,.78);
    --panel-2:      rgba(26,20,22,.66);
    --panel-core:   rgba(44,34,38,.85);
    --panel-border: rgba(255,190,140,.18);
    --panel-rim:    rgba(255,220,180,.22);

    /* Text & shadows */
    --ink:   #f9efe8;
    --muted: #d2b6a7;
    --shadow: rgba(0,0,0,.45);

    /* Accents */
    --accent:   #ff8a5a;          /* coral ember */
    --accent-2: #f0b35a;          /* amber */
    --ring:     rgba(240,179,90,.45);

    /* Spectator bar sizing (5 avatars max) */
    --avatar-size: 60px;
    --avatar-gap:  12px;
    --bar-radius:  18px;
    --bar-width:   96px;
    --bar-left:    52px;          /* offset from left */
    --bar-pad:     12px;
    --bar-height: calc(5 * var(--avatar-size) + 4 * var(--avatar-gap) + 2 * var(--bar-pad));
}

/* =========================
   Base
   ========================= */
* { box-sizing: border-box; scrollbar-width: none; }     /* Firefox: hide scrollbars */
*::-webkit-scrollbar { width: 0; height: 0; }            /* WebKit: hide scrollbars */

html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body{
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background:
            radial-gradient(1100px 520px at 78% -8%, rgba(255,138,90,.10), transparent 60%),
            radial-gradient(900px 460px  at 8% 108%, rgba(240,179,90,.09), transparent 60%),
            linear-gradient(180deg, var(--bg-1), var(--bg-2));
    background-blend-mode: soft-light, soft-light, normal;
    min-height: 100%;
}

/* Root container and stage (JS builds these) */
#root { position: relative; min-height: 100vh; }
#stage{
    min-height: 100vh;
    display: grid;
    place-items: center;
    position: relative;
}

/* Hide-only utility (not used yet, handy for later) */
.hidden { display: none !important; }

/* =========================
   Spectator bar (fixed left)
   ========================= */
.spectator-bar{
    position: fixed;
    left: var(--bar-left);
    top: 50%;
    transform: translateY(-50%);
    width: var(--bar-width);
    height: var(--bar-height);
    padding: var(--bar-pad) 10px;
    border-radius: var(--bar-radius);
    background: linear-gradient(180deg, var(--panel), var(--panel-2));
    box-shadow:
            0 18px 40px var(--shadow),
            inset 0 0 0 1px var(--panel-border);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

/* outer ledge (extrusion) */
.spectator-bar::before{
    content:"";
    position:absolute; inset:-7px -8px -12px -8px;
    border-radius: calc(var(--bar-radius) + 8px);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.12));
    box-shadow:
            0 22px 46px rgba(0,0,0,.55),
            0 0 0 1px rgba(0,0,0,.24) inset;
    z-index:-1;
}

/* inner highlight rim */
.spectator-bar::after{
    content:"";
    position:absolute; inset:3px;
    border-radius: calc(var(--bar-radius) - 3px);
    background: linear-gradient(180deg, var(--panel-core), rgba(255,255,255,.05));
    box-shadow:
            0 0 0 1px var(--panel-rim) inset,
            0 10px 20px rgba(0,0,0,.25) inset;
    pointer-events:none;
    opacity:.9;
}

/* UL built by JS: #player-list.player-list */
.player-list{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--avatar-gap);
}
.player-list > li{
    width: var(--avatar-size);
    height: var(--avatar-size);
}
.player-list img{
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 999px;
    object-fit: cover;
    box-shadow:
            0 8px 16px rgba(0,0,0,.45),
            inset 0 0 0 1px rgba(255,190,140,.15);
}

/* =========================
   Hero (menu) — generated via buildMenu()
   ========================= */
.hero{
    display: grid;
    grid-template-rows: 1fr auto auto 1fr;
    place-items: center;
    gap: 18px;
    min-height: 100vh;
    padding-left: calc(var(--bar-left) + var(--bar-width) + 36px);
    text-align: center;
}

.brand{
    grid-row: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.brand-icon{
    width: 76px;
    height: 76px;
    border-radius: 16px;
    background: radial-gradient(60% 60% at 35% 30%, #3a2a28, #22181a 70%);
    box-shadow:
            0 14px 28px var(--shadow),
            0 0 0 1px rgba(255,190,140,.14) inset;
}
.title{
    margin: 0;
    font-weight: 900;
    letter-spacing: .02em;
    font-size: clamp(2.1rem, 4.5vw, 3.2rem);
}
.subtitle{
    margin: 0;
    color: var(--muted);
}

/* =========================
   Buttons
   ========================= */
.cta{ grid-row: 3; display: flex; gap: 14px; }

.btn{
    appearance: none;
    border: none;
    cursor: pointer;
    padding: 1rem 1.45rem;
    border-radius: 14px;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .02em;
    transition: transform .08s ease, box-shadow .2s ease, filter .2s ease, background .2s ease;
    color: var(--ink);
}
.btn:focus-visible{
    outline: 3px solid var(--ring);
    outline-offset: 2px;
}
.btn:active{ transform: translateY(1px) scale(.99); }

.btn-primary{
    color: #1c1517;
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
    box-shadow:
            0 14px 28px rgba(240,179,90,.25),
            inset 0 0 0 1px rgba(255,255,255,.06);
}
.btn-primary:hover{ filter: saturate(1.08) brightness(1.05); }

.btn-ghost{
    color: var(--ink);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    box-shadow:
            0 12px 22px rgba(0,0,0,.35),
            inset 0 0 0 1px rgba(255,190,140,.14);
}
.btn-ghost:hover{
    background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
}

/* =========================
   Board (for later game view)
   ========================= */
.board{
    width: min(92vw, 780px);
    height: min(78vh, 620px);
    display: grid;
    grid-template-rows: repeat(6, 1fr);
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    padding: 12px;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(40,30,32,.9), rgba(32,24,26,.86));
    border: 1px solid rgba(255,190,140,.14);
    box-shadow: 0 20px 44px var(--shadow);
}
.board .cell{
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 12px;
    background: radial-gradient(65% 65% at 35% 30%, #2b2123, #1a1315 70%);
    box-shadow:
            inset 0 0 0 2px rgba(255,190,140,.10),
            inset 0 -6px 18px rgba(0,0,0,.35);
}
.board .cell.red{
    background: radial-gradient(circle at 30% 30%, #7a2b23, #ff6a54 65%);
}
.board .cell.yellow{
    background: radial-gradient(circle at 30% 30%, #7d5b1a, #f0b35a 65%);
}

/* =========================
   Responsive tweaks
   ========================= */
@media (max-width: 720px){
    :root{
        --bar-left: 34px;
        --bar-width: 92px;
    }
    .hero{
        padding-left: calc(var(--bar-left) + var(--bar-width) + 28px);
    }
}

/* =========================
   Motion prefs
   ========================= */
@media (prefers-reduced-motion: reduce){
    * { transition: none !important; animation: none !important; }
}