/* Greedy Gambles Board — DISPLAY ONLY (projector/OBS). The board itself is a
   Three.js scene (static/js/board/board3d.js) on a full-viewport canvas; this
   sheet only styles the page backdrop, the floating header and the waiting
   overlay. The green/gold design lives in the painted textures, so the page
   keeps one dark casino look in both themes. */

/* Bebas Neue is baked into the board's canvas textures — the face must be
   declared on THIS page (it otherwise only lives in home.css). */
@font-face {
    font-family: 'Bebas Neue';
    src: url('/static/fonts/BebasNeue-Regular.otf') format('opentype');
    font-display: swap;
}

:root {
    --bg-core: #123524;
    --bg-edge: #04120a;
    --text: #e8e8f0;
    --muted: #9ab3a4;
    --gold: #ffd700;
    --gold-soft: #d6af5a;
}

/* `hidden` must always win over component display rules below. */
[hidden] { display: none !important; }

html, body { height: 100%; }
body {
    margin: 0;
    overflow: hidden;
    background: var(--bg-edge);
    color: var(--text);
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
}

/* Blurred money backdrop: the green money panel with the tumbling 3D "$" on
   top, blurred together behind the board. The negative inset hides the blur's
   transparent fringe at the viewport edges. */
.board-bg {
    position: fixed;
    inset: -24px;
    z-index: 0;
    overflow: hidden;
    filter: blur(7px);
    background-image: url("/static/images/greedyplain%20background.png");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.board-bg canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

.board-canvas {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: block;
}

/* Waiting state — covers the (empty) scene */
.board-wait {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    color: var(--muted);
    font-size: 1.3rem;
    padding: 24px;
}

@media (max-width: 640px) {
    .board-wait { font-size: 1.05rem; }
}