/* ============================================================ THE CHALK BEDS — 2.5D holographic restyle. Active only while body.room3d-chalk (the candlelit slate table scene is mounted behind the game UI by rooms3d/chalk.mjs). The 3D scene is the ENVIRONMENT: a candlelit oak table, a slate board, dust in the light. The real PLAYABLE board is the room's own 2D — it carries the coin physics and the press-drag shove — so it STAYS, framed in brass and floating over the scene. Every other piece of chrome (HUD, wager bar, explainer, end card) becomes light holographic glass so the candlelit room reads through it. The redundant 3D slate + coins are hidden in chalk.mjs, so there is never a doubled board. Palette: bone #efe7d6, brass #c8a85e, brass-deep #5e4c25, red #cf4636. ============================================================ */ body.room3d-chalk { --ck-bone: #efe7d6; --ck-brass: #c8a85e; --ck-brass-deep: #5e4c25; --ck-red: #cf4636; } /* the room container floats over the scene; let the table show around it */ body.room3d-chalk #screen-chalk .ck-room { background: transparent; } /* --------------------------------------------------------------- THE HEAD — title + keeper line read crisp over the candlelight --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-head .label { color: var(--ck-brass); text-shadow: 0 0 16px rgba(200, 168, 94, 0.35), 0 2px 8px #000; } body.room3d-chalk #screen-chalk .ck-keeper { color: var(--ck-bone); text-shadow: 0 1px 9px rgba(0, 0, 0, 0.85); } /* --------------------------------------------------------------- THE HUD — a thin plaque rail of holographic glass --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-hud { border-bottom: 1px solid rgba(200, 168, 94, 0.28); background: linear-gradient(168deg, rgba(38, 28, 18, 0.46), rgba(16, 11, 7, 0.34)); border-radius: 4px; padding: 0.42rem 0.8rem 0.5rem; box-shadow: inset 0 1px 0 rgba(200, 168, 94, 0.12), 0 0 18px rgba(200, 168, 94, 0.1), 0 10px 28px rgba(0, 0, 0, 0.45); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); } body.room3d-chalk #screen-chalk .ck-hud > * { text-shadow: 0 1px 7px rgba(0, 0, 0, 0.8); } body.room3d-chalk #screen-chalk .ck-chips { color: var(--ck-brass); } /* --------------------------------------------------------------- THE BOARD — the real 2D play surface. It is the centerpiece; keep it solid and crisp, but lift it into the scene with a subtle brass frame and a warm candle-glow halo. --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-boardwrap { background: transparent; } body.room3d-chalk #screen-chalk .ck-canvas { border: 1px solid var(--ck-brass-deep); border-radius: 4px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6), /* the slate's own inner edge */ 0 0 0 3px rgba(94, 76, 37, 0.9), /* worn brass-deep lip */ 0 0 0 4px rgba(200, 168, 94, 0.5), /* a thin bright brass line */ 0 0 34px rgba(200, 168, 94, 0.22), /* the candle halo */ 0 18px 50px rgba(0, 0, 0, 0.8); /* it sits ABOVE the table */ } :root.mono body.room3d-chalk #screen-chalk .ck-canvas { box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.72), 0 0 0 3px rgba(94, 76, 37, 0.85), 0 0 0 4px rgba(200, 168, 94, 0.42), 0 0 30px rgba(200, 168, 94, 0.16), 0 18px 52px rgba(0, 0, 0, 0.88); } /* coin rail dots keep their look — just let any backing show the scene */ body.room3d-chalk #screen-chalk .ck-coinrail { background: transparent; } /* --------------------------------------------------------------- THE WAGER BAR — stake chips + walk, holographic glass --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-wagerwords { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.8); } body.room3d-chalk #screen-chalk .ck-chipbtn { color: var(--ck-brass); border: 1px solid rgba(200, 168, 94, 0.5); background: radial-gradient(circle at 50% -40%, rgba(200, 168, 94, 0.2), transparent 62%), linear-gradient(168deg, rgba(38, 28, 18, 0.62), rgba(16, 11, 7, 0.5)); box-shadow: 0 0 18px rgba(200, 168, 94, 0.14), inset 0 0 24px rgba(255, 190, 110, 0.05), 0 10px 26px rgba(0, 0, 0, 0.5); backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); transition: transform 0.16s, box-shadow 0.2s, border-color 0.2s; } body.room3d-chalk #screen-chalk .ck-chipbtn:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--ck-brass); box-shadow: 0 0 26px rgba(200, 168, 94, 0.28), inset 0 0 24px rgba(255, 190, 110, 0.09), 0 14px 32px rgba(0, 0, 0, 0.55); } body.room3d-chalk #screen-chalk .ck-chipbtn:disabled { color: #6a6253; border-color: rgba(94, 76, 37, 0.5); background: linear-gradient(168deg, rgba(24, 18, 11, 0.5), rgba(12, 8, 5, 0.42)); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } /* on mobile the wager bar overlays the felt — make it glass, not a slab */ @media (max-width: 600px) { body.room3d-chalk #screen-chalk .ck-wagerbar { background: linear-gradient(168deg, rgba(20, 15, 9, 0.82), rgba(10, 7, 4, 0.74)); border: 1px solid rgba(200, 168, 94, 0.45); box-shadow: 0 0 26px rgba(200, 168, 94, 0.14), 0 14px 36px rgba(0, 0, 0, 0.7); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } } /* --------------------------------------------------------------- THE FOOTER LINKS — quiet glass-edged buttons --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-footer .dim-btn { border: 1px solid rgba(200, 168, 94, 0.34); background: linear-gradient(168deg, rgba(30, 22, 14, 0.46), rgba(14, 10, 6, 0.36)); color: var(--ck-bone); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } body.room3d-chalk #screen-chalk .ck-footer .dim-btn:hover { border-color: var(--ck-brass); color: var(--ck-brass); } /* --------------------------------------------------------------- THE EXPLAINER — was a near-opaque scrim (rgba(4,6,4,.93)). Make it LIGHT holographic glass so the candlelit room glows through it; the placards become glowing glass cards. --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-explainer { background: radial-gradient(ellipse 90% 60% at 50% 30%, rgba(20, 14, 8, 0.5), rgba(6, 5, 3, 0.72) 90%); backdrop-filter: blur(3px) saturate(1.05); -webkit-backdrop-filter: blur(3px) saturate(1.05); } body.room3d-chalk #screen-chalk .ck-explainer .rule-card { background: linear-gradient(168deg, rgba(38, 28, 18, 0.62), rgba(16, 11, 7, 0.5)) !important; border: 1px solid rgba(200, 168, 94, 0.5) !important; box-shadow: 0 0 24px rgba(200, 168, 94, 0.18), inset 0 0 30px rgba(255, 190, 110, 0.06), 0 16px 40px rgba(0, 0, 0, 0.5) !important; backdrop-filter: blur(2.5px); -webkit-backdrop-filter: blur(2.5px); } body.room3d-chalk #screen-chalk .ck-explainer-house { color: var(--ck-bone); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8); } /* --------------------------------------------------------------- THE END PANEL — same: light glass over the candlelight --------------------------------------------------------------- */ body.room3d-chalk #screen-chalk .ck-end { background: radial-gradient(ellipse 80% 60% at 50% 40%, rgba(20, 14, 8, 0.55), rgba(6, 5, 3, 0.78) 92%); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } body.room3d-chalk #screen-chalk .ck-end h3 { color: var(--ck-brass); text-shadow: 0 0 20px rgba(200, 168, 94, 0.4), 0 2px 10px #000; } body.room3d-chalk #screen-chalk .ck-end h3.ck-down { color: var(--ck-red); text-shadow: 0 0 20px rgba(207, 70, 54, 0.42), 0 2px 10px #000; } body.room3d-chalk #screen-chalk .ck-end-detail, body.room3d-chalk #screen-chalk .ck-end-house, body.room3d-chalk #screen-chalk .ck-end .sub { text-shadow: 0 1px 9px rgba(0, 0, 0, 0.85); } /* THE GLASS overlay (lens + verdict) already paints its own dark felt and sits over the board — leave it alone; it is part of the play. */