/* Bundled fonts — no CDN at runtime */ @font-face { font-family: "Fraunces"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Fraunces"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/fraunces-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/cormorant-garamond-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Fredoka"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/fredoka-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Fredoka"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/fredoka-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Chakra Petch"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/chakra-petch-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Nunito Sans"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/nunito-sans-latin-700-normal.woff2") format("woff2"); } /* The Game Room — approved theme tokens (v2: piece materials + textures). Source of truth for every color, radius, shadow, texture and display face. Apply with . Default (no attribute) = felt. Components must ONLY use these tokens. Add a token to all four themes if you need a new one. Fonts: bundle locally (no CDN at runtime). npm i @fontsource/fraunces @fontsource/cormorant-garamond @fontsource/fredoka @fontsource/chakra-petch @fontsource/nunito-sans, copy the latin woff2 files to public/fonts/ and declare @font-face here. Weights needed: display 700 (Fraunces also 500), body 400/600/700. Keep the fallback stacks below. Token guide: --p1/--p1-hi, --p2/--p2-hi seat 0 / seat 1 piece color + highlight (radial gradient center) --q-light(-2), --q-dark(-2) Quarto piece woods --sq-light/--sq-dark board squares --felt/--felt-hi table (radial, hi at center) --rail/--rail-2/--rail-edge wood frame --card-face/--card-ink/--card-red/--card-back/--card-back-2 --gloss (0-1) highlight opacity on pieces --groove (0-1) groove visibility on discs --felt-noise (0-1) felt texture strength --grain-alpha (0-1) wood grain strength --noise / --grain data-URI SVG turbulence textures (shared, theme-independent) --glow "none" except Arcade: use as box-shadow: var(--glow) Family avatar colors are per-profile, not per-theme: Dad #c98a2e, Mom #b8322a, Marshall #1f8a8a, Wyatt #3f7ad9. The theme-specific piece overrides at the bottom (Arcade lit rim, Candy gummy) are part of the approved look. */ :root { --font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --noise: url("data:image/svg+xml;utf8,"); --grain: url("data:image/svg+xml;utf8,"); } /* ---------- THEME: Green Felt Club ---------- */ :root, :root[data-theme="felt"] { --font-display: "Fraunces", Georgia, "Times New Roman", serif; --bg: #0d2b21; --bg-2: #133a2c; --surface: #17392d; --surface-2: #1f4637; --line: rgba(243,234,214,.12); --ink: #f3ead6; --ink-2: #b4c6b0; --accent: #d9b24a; --accent-ink: #1e1706; --accent-2: #c0392b; --felt: #2f7c53; --felt-hi: #3a9563; --rail: #5a391b; --rail-2: #7b5232; --rail-edge: #3c2410; --sq-light: #ebe3c6; --sq-dark: #6f9a5a; --p1: #b8322a; --p1-hi: #e25a4e; --p2: #262626; --p2-hi: #5a5a5a; --q-light: #efe0bd; --q-light-2: #c4a572; --q-dark: #3a2614; --q-dark-2: #160d06; --card-face: #fdf8ee; --card-ink: #1e1e1e; --card-red: #b8322a; --card-back: #7a1f1f; --card-back-2: #e1b96a; --radius: 14px; --radius-s: 9px; --shadow: 0 10px 30px rgba(0,0,0,.35); --glow: none; --gloss: .22; --groove: 1; --felt-noise: .16; --grain-alpha: .45; --tile-grad: linear-gradient(160deg, var(--surface-2), var(--surface)); } /* ---------- THEME: Walnut Study ---------- */ :root[data-theme="walnut"] { --font-display: "Cormorant Garamond", Georgia, serif; --bg: #1a110b; --bg-2: #26180f; --surface: #2c1e14; --surface-2: #38271a; --line: rgba(239,226,203,.12); --ink: #efe2cb; --ink-2: #bba68a; --accent: #c9973a; --accent-ink: #1c1208; --accent-2: #7e2b2b; --felt: #4b3020; --felt-hi: #5a3b28; --rail: #2a1a0f; --rail-2: #3d2717; --rail-edge: #170d07; --sq-light: #d9b98c; --sq-dark: #70421f; --p1: #7e2b2b; --p1-hi: #b04e4e; --p2: #e8dcc2; --p2-hi: #fff7e6; --q-light: #e6d2a8; --q-light-2: #b08f5c; --q-dark: #2a1a0e; --q-dark-2: #0f0804; --card-face: #f3ead9; --card-ink: #1c1208; --card-red: #8c2a2a; --card-back: #1f3b2e; --card-back-2: #c9973a; --radius: 6px; --radius-s: 4px; --shadow: 0 12px 34px rgba(0,0,0,.5); --glow: none; --gloss: .26; --groove: 1; --felt-noise: .10; --grain-alpha: .55; --tile-grad: linear-gradient(160deg, var(--surface-2), var(--surface)); } /* ---------- THEME: Candy Shop ---------- */ :root[data-theme="candy"] { --font-display: "Fredoka", "Nunito Sans", system-ui, sans-serif; --bg: #fff0f6; --bg-2: #ffe3ee; --surface: #ffffff; --surface-2: #fff6fa; --line: rgba(61,43,79,.12); --ink: #3d2b4f; --ink-2: #8a6f9c; --accent: #ff5c8a; --accent-ink: #ffffff; --accent-2: #49b8f0; --felt: #ffd3e3; --felt-hi: #ffe1ec; --rail: #ff9cc0; --rail-2: #ffb9d3; --rail-edge: #f07aa6; --sq-light: #fff6e3; --sq-dark: #ffb3ce; --p1: #ff4d6d; --p1-hi: #ffa3b3; --p2: #5b8def; --p2-hi: #a9c4ff; --q-light: #fff9e8; --q-light-2: #ffd28a; --q-dark: #7b4fd6; --q-dark-2: #4a2a9c; --card-face: #ffffff; --card-ink: #3d2b4f; --card-red: #ff4d6d; --card-back: #49b8f0; --card-back-2: #ffffff; --radius: 22px; --radius-s: 14px; --shadow: 0 12px 30px rgba(255,92,138,.18); --glow: none; --gloss: .55; --groove: 0; --felt-noise: .06; --grain-alpha: 0; --tile-grad: linear-gradient(160deg, #ffffff, #fff1f6); } /* ---------- THEME: Midnight Arcade ---------- */ :root[data-theme="arcade"] { --font-display: "Chakra Petch", "Nunito Sans", system-ui, sans-serif; --bg: #070b1a; --bg-2: #0f1733; --surface: #121a38; --surface-2: #192449; --line: rgba(232,239,255,.12); --ink: #e8efff; --ink-2: #8f9cc9; --accent: #2ef2c5; --accent-ink: #04121a; --accent-2: #ff4fa3; --felt: #121b3d; --felt-hi: #1a2650; --rail: #26367a; --rail-2: #3347a0; --rail-edge: #18245a; --sq-light: #2a396f; --sq-dark: #141d45; --p1: #2ef2c5; --p1-hi: #b8fff0; --p2: #ff4fa3; --p2-hi: #ffc2dd; --q-light: #9fb4ff; --q-light-2: #4b63c9; --q-dark: #1b2552; --q-dark-2: #0a0f2a; --card-face: #0f1733; --card-ink: #e8efff; --card-red: #ff4fa3; --card-back: #0c1230; --card-back-2: #2ef2c5; --radius: 10px; --radius-s: 6px; --shadow: 0 10px 30px rgba(0,0,0,.55); --glow: 0 0 18px; --gloss: .12; --groove: .5; --felt-noise: .10; --grain-alpha: 0; --tile-grad: linear-gradient(160deg, #192449, #121a38); } /* Shared rules that every theme relies on */ html { background: var(--bg); } body { margin: 0; color: var(--ink); font-family: var(--font-body); line-height: 1.5; background: radial-gradient(1200px 600px at 20% -10%, var(--bg-2), transparent 60%), var(--bg); -webkit-font-smoothing: antialiased; touch-action: manipulation; } h1, h2, h3, .display { font-family: var(--font-display); text-wrap: balance; line-height: 1.1; } /* Table felt with nap */ .table-surface { position: relative; background-color: var(--felt); background-image: var(--noise), radial-gradient(circle at 50% 40%, var(--felt-hi), var(--felt) 70%); background-blend-mode: overlay, normal; box-shadow: inset 0 0 70px rgba(0,0,0,.28), var(--shadow); isolation: isolate; } .table-surface::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--noise); opacity: var(--felt-noise); mix-blend-mode: overlay; pointer-events: none; } /* Wood rail with grain + inlaid accent line */ .rail { position: relative; background-color: var(--rail); background-image: var(--grain), linear-gradient(135deg, var(--rail-2), var(--rail) 55%, var(--rail-edge)); background-blend-mode: multiply, normal; background-size: 400px 120px, auto; box-shadow: 0 18px 34px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.12) inset, 0 -3px 0 rgba(0,0,0,.25) inset; } .rail::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--grain); background-size: 400px 120px; opacity: var(--grain-alpha); mix-blend-mode: multiply; pointer-events: none; } .rail::after { content: ""; position: absolute; inset: 7px; border-radius: 4px; border: 1.5px solid var(--accent); opacity: .55; pointer-events: none; } /* Disc pieces (checkers, connect four) — see pieces.js for the SVG structure these classes style */ .s0 { --pc: var(--p1); --pc-hi: var(--p1-hi); } .s1 { --pc: var(--p2); --pc-hi: var(--p2-hi); } .ck .shadow { fill: #000; opacity: .38; filter: url(#blur); } .ck .edge { fill: color-mix(in srgb, var(--pc) 55%, #000); } .ck .face { fill: url(#gA); } .ck.s1 .face { fill: url(#gB); } .ck .groove { fill: none; stroke: rgba(0,0,0,.28); stroke-width: 1.6; opacity: var(--groove); } .ck .groove-hi { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 1.2; opacity: var(--groove); } .ck .gloss { fill: #fff; opacity: var(--gloss); } .ck .rim { fill: none; stroke: rgba(255,255,255,.22); stroke-width: 1.4; } .ck .crown { fill: var(--accent); stroke: rgba(0,0,0,.45); stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 1px 0 rgba(0,0,0,.4)); } .ck .crown-j { fill: var(--accent-2); } .pc { transition: transform .18s cubic-bezier(.2,.8,.2,1), filter .18s; } .pc.lift { transform: translateY(-9%) scale(1.08); filter: drop-shadow(0 14px 10px rgba(0,0,0,.45)); } /* Pressable lips */ .btn, .key { box-shadow: inset 0 -3px 0 rgba(0,0,0,.15); } .av { box-shadow: inset 0 -3px 0 rgba(0,0,0,.18), inset 0 2px 0 rgba(255,255,255,.22); } /* Theme-specific materials (approved) */ :root[data-theme="arcade"] .ck .face { fill: color-mix(in srgb, var(--pc) 22%, #0b1128); } :root[data-theme="arcade"] .ck .edge { fill: color-mix(in srgb, var(--pc) 35%, #05091a); } :root[data-theme="arcade"] .ck .rim { stroke: var(--pc); stroke-width: 4; opacity: 1; filter: drop-shadow(0 0 6px var(--pc)); } :root[data-theme="arcade"] .ck .groove { stroke: var(--pc); opacity: .45; } :root[data-theme="arcade"] .ck .groove-hi { display: none; } :root[data-theme="arcade"] .ck .shadow { opacity: 0; } :root[data-theme="arcade"] .pc { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--pc) 70%, transparent)); } :root[data-theme="candy"] .ck .edge { fill: color-mix(in srgb, var(--pc) 70%, #000); } :root[data-theme="candy"] .ck .crown { stroke: #fff; stroke-width: 2.2; } :root[data-theme="arcade"] .cp .body { fill: color-mix(in srgb, var(--pc) 22%, #0b1128); stroke: var(--pc); stroke-width: 2.2; filter: drop-shadow(0 0 6px var(--pc)); } :root[data-theme="arcade"] .cp .shadow { opacity: 0; } :root[data-theme="arcade"] .qp .side, :root[data-theme="arcade"] .qp .top { stroke: var(--accent); stroke-width: 1.2; } :root[data-theme="arcade"] .qp.dark .side, :root[data-theme="arcade"] .qp.dark .top { stroke: var(--accent-2); } :root[data-theme="arcade"] .card { box-shadow: 0 0 0 1px var(--accent), 0 0 16px rgba(46,242,197,.3); } :root[data-theme="arcade"] .cf .frame { stroke: var(--accent); opacity: .7; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }