/*
 * forming-3d.css — the 3D "forming a table" teahouse scene.
 *
 * Full-window, like the in-game board: forming-render-3d.js adds body.forming-3d
 * and the #forming-3d-host becomes a viewport-fixed pane. The 2D compass grid
 * (#seat-list) + static rules panel are the fallback when 3D is OFF
 * (boardRenderer=2d / no WebGL / mount failure) — body never gets .forming-3d
 * then, so they render normally.
 */

/* ---- fallback (3D off): host hidden, 2D grid is the UI ---- */
#forming-3d-host[hidden] { display: none !important; }
#forming-3d-host > canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    touch-action: none;          /* OrbitControls owns drags */
}
/* 2D fallback: the labels layer carries no content (seat-name chips are only
 * projected in 3D), so it must NOT participate in the .table-area grid. Without
 * display:none it is an empty in-flow auto-placed grid item that steals
 * col-2/row-1 and pushes .rules-panel below the table at every width (#33). It
 * is repositioned out of flow + re-shown under body.forming-3d below. */
.forming-labels { pointer-events: none; display: none; }
.forming-seat-label { display: none; }   /* only shown in 3D mode */

/* ---- anti-flash (refresh into the 3D forming room) ----
   The server emits body.forming-3d-pending from the boardRenderer cookie so
   the flat 2D compass grid never paints before the 3D teahouse mounts. We hide
   the 2D forming chrome + drop the header and paint the teahouse backdrop
   immediately, so the pending window reads as the 3D scene loading rather than
   a 2D→3D flash. forming-render-3d.js removes the class on first paint (scene
   live) or in fallbackTo2D() (no WebGL / mount failure → 2D grid returns). */
body.forming-3d-pending { background: #171311; }
body.forming-3d-pending .table-area .table-grid,
body.forming-3d-pending .table-area .rules-panel { display: none; }
body.forming-3d-pending > header { display: none; }

/* ---- full-window 3D scene ---- */
body.forming-3d #forming-3d-host {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: 400;
    background: #171311;          /* teahouse bg before first paint */
}
body.forming-3d .forming-labels {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 401;
}
body.forming-3d-ready .forming-seat-label { display: flex; }

/* Hide the 2D waiting chrome while the full-window scene is up. */
body.forming-3d .table-area .table-grid,
body.forming-3d .table-area .rules-panel { display: none; }

/* ---- chrome: match the in-game play layout exactly ---- */

/* Immersive: drop the global site header (like in-game). */
body.forming-3d > header { display: none; }

/* Exit (Leave) as a top-left corner badge — same idiom + styling as the
   in-game .game-exit. Title hidden (in-game shows none). */
body.forming-3d .table-header {
    position: fixed;
    top: 0.6rem;
    left: 0.75rem;
    right: auto;
    margin: 0;
    padding: 0;
    background: none;
    z-index: 906;
    pointer-events: none;
}
body.forming-3d .table-header .table-header-titles { display: none; }
body.forming-3d .table-header form {
    pointer-events: auto;
    display: inline-block;
    margin: 0;
}
body.forming-3d .table-header .leave-table {
    padding: 6px 14px;
    border-radius: 7px;
    border: 1px solid var(--border);
    background: #0f0d0bcc;
    color: var(--muted);
    font: 700 12px ui-sans-serif;
    cursor: pointer;
}
body.forming-3d .table-header .leave-table:hover {
    color: var(--fg);
    border-color: var(--accent);
}
/* The header is pointer-events:none in 3D so the teahouse scene stays draggable through
 * the empty area; interactive children must opt back in. The Leave button gets this via
 * `.table-header form` above — the "Fill with bots" button (#42) is NOT in a form, so it
 * needs its own opt-in or the z-400 forming-3d canvas swallows every click. */
body.forming-3d .table-header .fill-bots { pointer-events: auto; }

/* tableId badge (bottom-right): same element as before, just lifted above the
   full-window host (its base z-index of 2 sat under the z-400 scene pane). */
body.forming-3d .table-id-badge { z-index: 906; }

/* Reference drawers in the SAME positions as in-game play:
     LEFT  = ruleset/scoring document (📜 scoring-drawer) + spectators below it
     RIGHT = rule values (📜 rules-drawer) + customization (🎨 decor-drawer) */
body.forming-3d .scoring-drawer {
    display: flex;
    position: fixed;            /* only set in body.game-started otherwise → would
                                   stay static and hide BEHIND the z-400 host */
    flex-direction: row;
    align-items: flex-start;
    left: 0;
    right: auto;
    top: 4.2rem;
    height: calc(100vh - 4.2rem - 3rem);
    width: 520px;
    background: transparent;
    pointer-events: none;
    z-index: 905;
}
body.forming-3d .scoring-drawer[data-open="false"] { width: 32px; }
body.forming-3d .viewer-drawer { top: calc(4.2rem + 116px); }
body.forming-3d .rules-drawer {
    display: flex;
    top: 4.2rem;
}
body.forming-3d .decor-drawer {
    display: flex;
    position: fixed;            /* same: position only set in body.game-started.board-3d */
    flex-direction: row-reverse;
    align-items: flex-start;
    right: 0;
    top: calc(4.2rem + 116px);
    height: min(440px, 62vh);
    width: 248px;
    background: transparent;
    pointer-events: none;
    z-index: 905;
}
body.forming-3d .decor-drawer[data-open="false"] { width: 32px; }

/* ---- seat-name chips (3D mode, projected each frame by JS) ---- */
.forming-seat-label {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 9px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #f3efe6;
    background: rgba(20, 22, 20, 0.42);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    white-space: nowrap;
    transition: opacity 0.25s ease;
}
.forming-seat-label .nm { display: none; }
.forming-seat-label .wait { color: rgba(243, 239, 230, 0.62); }
.forming-seat-label.on .nm {
    display: inline;
    position: relative;
    padding-left: 0.7rem;
}
.forming-seat-label.on .nm::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: #4fbf8b;
}
.forming-seat-label.on .wait { display: none; }

@media (prefers-reduced-motion: reduce) {
    .forming-seat-label { transition: none; }
}