/* ═══════════════════════════════════════════════════════════════════════ PLAYMATCH STYLES (css/style.css) ┌─ RULES FOR EVERY FUTURE CHANGE (keep this block) ──────────────────────────┐ │ 1. Every change gets a comment next to it: what it does and why. │ │ 2. NEVER use "prefers-reduced-motion" (no @media (prefers-reduced-motion) │ │ and no matchMedia for it). All animations must always play, on every │ │ device, whatever the accessibility setting is. │ └────────────────────────────────────────────────────────────────────────────┘ All colours / sizes / scene settings. Section banners inside show where things are: ENDING SCENE SETTINGS (top), themes (dark/light), signup scene, question carousel, sheets, game mode sheet, GAME PAGE (chess + backgammon boards, chat box). ═══════════════════════════════════════════════════════════════════════ */ /* NO GREY BOX WHEN TAPPING (phones) The grey / blue rectangle that flashes on a button, disc or circle is the browser's own "tap highlight". This turns it off everywhere. The outline rule also removes the focus box after a TAP or CLICK, but keeps the normal focus ring for keyboard users (Tab key), so the page stays accessible. */ * { -webkit-tap-highlight-color: transparent; } button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), [tabindex]:focus:not(:focus-visible) { outline: none; } button, [role="button"] { touch-action: manipulation; } /* also removes the 300ms tap delay / double-tap zoom on buttons */ /* FONT: Outfit (hosted on our own site, folder fonts/). One variable, --font, is used everywhere. Outfit covers LATIN letters only (unicode-range). Persian / Arabic text automatically uses the system font. CHANGE: moved here from the old "DESIGN PASS" block at the end of the file, so the font is defined in ONE place. */ @font-face { font-family: 'Outfit'; font-weight: 400 500; font-style: normal; font-display: swap; src: local('Outfit'), url('../fonts/outfit-400.woff') format('woff'); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC, U+2122; } @font-face { font-family: 'Outfit'; font-weight: 600 700; font-style: normal; font-display: swap; src: local('Outfit Bold'), url('../fonts/outfit-700.woff') format('woff'); unicode-range: U+0020-007E, U+00A0-00FF, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC, U+2122; } :root { --font: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } html, body, button, input, select, textarea { font-family: var(--font); } /* ═══════════════════════════════════════════════════════════ ENDING SCENE SETTINGS (the two slots + the 3 game discs) Edit MOBILE values here, DESKTOP values in the block below. All positions are measured from the TOP of the screen. ═══════════════════════════════════════════════════════════ */ :root { /* MOBILE (phones / screens narrower than 900px) */ --gap-top: 22%; /* lowest point of slot2's curved edge (smaller = slot2 higher) */ --gap-bottom: 82%; /* highest point of slot1's curved edge (bigger = slot1 lower) */ --slot-r: 50vw; /* curve of BOTH slots. 50vw = round arch. Flatter: e.g. 50vw / 25vh */ --games-y: 47%; /* vertical centre of title + 3 discs */ --game-disc: clamp(78px, 22vw, 150px); /* disc size */ --games-gap: clamp(12px, 4vw, 48px); /* space between discs */ /* Left/right shift and tilt, last scene only. Pivot = the middle of each curved edge. x: positive = right, negative = left (use vw or px). rot: positive = clockwise (deg). */ --slot1-x: 85vw; --slot1-rot: 55deg; /* bottom slot */ --slot2-x: -85vw; --slot2-rot: 55deg; /* top slot */ --rot-delay: 0.2s; /* how long the tilt waits before starting (0s = together with the move) */ } @media (min-width: 900px) { :root { /* DESKTOP (screens 900px wide and up) */ --gap-top: 4%; --gap-bottom: 97%; --slot-r: 50vw; --games-y: 47%; --game-disc: clamp(78px, 12vw, 150px); --games-gap: clamp(12px, 3vw, 48px); --slot1-x: 85vw; --slot1-rot: 55deg; --slot2-x: -85vw; --slot2-rot: 55deg; --rot-delay: 0.2s; } } /* REFACTORED: single-page flow */ :root { --ease-reveal: cubic-bezier(0.22, 1, 0.36, 1); --wt-top: 7%; --wt-h1: clamp(16px, 4.5vw, 22px); --wt-p: clamp(10px, 2.8vw, 13px); --slot-top: -100%; --slot-bottom: 38%; --slot-width: 100%; --oval-bottom: -13%; --oval-width: 55%; --oval-height: 31%; --disc-bottom: 13%; --disc-width: 70%; } @media (min-width: 900px) { :root { --wt-top: 6%; --wt-h1: clamp(20px, 2.4vw, 30px); --wt-p: clamp(12px, 1.4vw, 16px); --slot-top: -250%; --slot-bottom: 25%; --slot-width: 100%; --oval-bottom: -55%; --oval-width: 38%; --oval-height: 70%; --disc-bottom: 4%; --disc-width: 25%; } } [data-theme="light"] { --bg: oklch(96% 0.006 258); --slot-recess: oklch(89% 0.010 256); --slot-rim: oklch(82% 0.008 260); --slot-rim-hi: oklch(97% 0.005 262); --disc-face: oklch(86% 0.012 252); --disc-hi: oklch(94% 0.008 244); --disc-rim: oklch(78% 0.010 256); --disc-rim-hi: oklch(98% 0.006 246); --gold-a: oklch(84% 0.118 88); --gold-b: oklch(68% 0.098 78); --gold-c: oklch(54% 0.080 70); --text-primary: oklch(22% 0.012 260); --text-muted: oklch(46% 0.012 260); --icon-bg: oklch(91% 0.007 260); --icon-border: oklch(74% 0.010 258); --neon-bg: oklch(96% 0.006 258); --neon-mid-bg: oklch(92% 0.009 260); --neon-mid-border: oklch(76% 0.010 258); --neon-glow: rgba(0, 180, 210, 0.85); --neon-glow-soft: rgba(0, 170, 200, 0.30); --neon-bloom: rgba(0, 185, 215, 0.40); --input-bg: oklch(98% 0.004 258); --input-border: oklch(78% 0.010 258); --input-focus: oklch(60% 0.120 220); --btn-bg: oklch(40% 0.080 230); --btn-hover: oklch(34% 0.090 230); --btn-text: oklch(98% 0.004 258); } [data-theme="dark"] { /* Slate dark palette (soft blue-grey, not pure black) */ --bg: #1E293B; --slot-recess: #172033; --slot-rim: #334155; --slot-rim-hi: #475569; --disc-face: #3A4A63; --disc-hi: #55677F; --disc-rim: #2A384E; --disc-rim-hi: #64748B; --gold-a: oklch(84% 0.118 88); --gold-b: oklch(68% 0.098 78); --gold-c: oklch(54% 0.080 70); --text-primary: #F1F5F9; --text-muted: #AAB8CC; --icon-bg: #334155; --icon-border: #52627A; --neon-bg: #1E293B; --neon-mid-bg: #28364C; --neon-mid-border: #3F4F68; --neon-glow: rgba(56, 189, 248, 1); --neon-glow-soft: rgba(56, 189, 248, 0.45); --neon-bloom: rgba(56, 189, 248, 0.45); --input-bg: #2A384E; --input-border: #52627A; --input-focus: #38BDF8; --btn-bg: #38BDF8; --btn-hover: #7DD3FC; --btn-text: #0F172A; } /* ── FAST THEME SWITCH ────────────────────────────────────────── setTheme() (in the script below) adds the class "theme-switching" to for a split second while dark/light changes. During that time every transition is switched off, so the browser repaints ONCE instead of animating dozens of backgrounds and big glow shadows for 0.4s. Result: the theme changes instantly and without lag. This only affects the theme change; all other animations stay as they are. */ html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: none !important; } *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); transition: background 0.4s ease; /* font-family: see the FONT block at the top */ } .page { position: fixed; inset: 0; display: grid; place-items: center; } #page-home { z-index: 2; background: var(--bg); transition: background 0.4s ease; } #page-home.hidden { display: none; } #page-second { z-index: 3; background: var(--bg); transition: background 0.4s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; } .neon-stage-inner { position: absolute; inset: 0; pointer-events: none; z-index: 0; display: flex; flex-direction: column; } .neon-stage-inner .n-top { flex: 1; background: var(--bg); transition: background 0.4s; } .neon-stage-inner .n-mid { flex: 0 0 40%; background: var(--neon-mid-bg); border-left: 1.5px solid var(--neon-mid-border); border-right: 1.5px solid var(--neon-mid-border); position: relative; transition: background 0.4s, border-color 0.4s; } .neon-stage-inner .n-bot { flex: 1; background: var(--bg); transition: background 0.4s; } /* QUESTION CAROUSEL — added styles go here via injection */ .theme-btn { position: fixed; top: 20px; right: 20px; z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--icon-border); background: var(--icon-bg); color: var(--text-primary); cursor: pointer; display: grid; place-items: center; transition: background 0.3s, border-color 0.3s, transform 0.18s; } .theme-btn:hover { transform: scale(1.08); } .icon-moon { display: block; } .icon-sun { display: none; } [data-theme="light"] .icon-moon { display: none; } [data-theme="light"] .icon-sun { display: block; } .scene { position: relative; width: 100vw; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; } .welcome-text { position: absolute; top: var(--wt-top); left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; z-index: 10; pointer-events: none; opacity: 1; transition: opacity 0.45s ease; } .welcome-text.fade-out { opacity: 0; } .welcome-text h1 { font-size: var(--wt-h1); font-weight: 300; letter-spacing: 0.12em; color: var(--text-primary); transition: color 0.4s; } .welcome-text p { margin-top: 10px; font-size: clamp(11px, 2.8vw, 14px); /* CHANGE: was var(--wt-p); the DESIGN PASS value is now here */ font-weight: 500; text-transform: uppercase; letter-spacing: 0.28em; color: var(--text-muted); transition: color 0.4s; } .slot { position: absolute; top: var(--slot-top); left: 50%; transform: translateX(-50%); width: var(--slot-width); /* ALWAYS the final (dropped) size. The slot is never resized any more: the 18% "drop" is a cheap GPU move of #layer-slot (see SMOOTH OPENING below). */ bottom: calc(var(--slot-bottom) - 18%); background: var(--slot-recess); border-radius: var(--slot-r); box-shadow: -2px -2px 0 0 var(--slot-rim-hi), 2px 2px 0 0 var(--slot-rim), inset 0 12px 40px rgba(0,0,0,.45), inset 0 2px 8px rgba(0,0,0,.3), inset 0 0 0 2px oklch(0% 0 0 / 0.18); transition: background 0.4s, box-shadow 0.4s, bottom 0.7s var(--ease-reveal); z-index: 1; } /* .drop now only fades the neon edge in (::after below). The move itself is #layer-slot.slot-down */ /* Neon edge on the slot: fades in once the user clicks Create Account */ .slot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 0.7s ease 0.15s; box-shadow: /* crisp bright rim */ inset 0 0 0 1.5px var(--neon-glow), /* light spilling into the recess = depth */ inset 0 0 14px 2px var(--neon-glow-soft), inset 0 -14px 50px -8px var(--neon-bloom), /* glow leaking outside the edge */ 0 0 8px 1px var(--neon-glow), 0 0 26px 4px var(--neon-glow-soft), 0 0 70px 12px var(--neon-bloom); } .slot.drop::after { opacity: 1; } [data-theme="light"] .slot.drop::after { opacity: 0.7; } /* HERO CIRCLE under "Let's Play": now follows the accent colour (--input-focus) and is softly blurred. TUNE: blur(7px) = softness (0 = sharp), the big shadow = glow around it. */ .gold-oval { position: absolute; bottom: var(--oval-bottom); left: 50%; transform: translateX(-50%); width: var(--oval-width); height: var(--oval-height); border-radius: 50%; background: radial-gradient(ellipse 55% 40% at 50% 20%, color-mix(in srgb, var(--input-focus) 70%, #fff) 0%, transparent 72%), linear-gradient(160deg, color-mix(in srgb, var(--input-focus) 88%, #fff) 0%, var(--input-focus) 48%, color-mix(in srgb, var(--input-focus) 55%, #000) 100%); filter: blur(7px); opacity: 0.92; box-shadow: 0 0 70px 14px color-mix(in srgb, var(--input-focus) 40%, transparent); z-index: 2; transition: bottom 0.6s var(--ease-reveal), opacity 0.45s ease; } .gold-oval.exit { bottom: -80%; opacity: 0; } .disc-wrap { position: absolute; bottom: var(--disc-bottom); left: 50%; transform: translateX(-50%); width: var(--disc-width); aspect-ratio: 1; z-index: 3; cursor: pointer; transition: bottom 0.75s var(--ease-reveal), width 0.75s var(--ease-reveal), transform 0.75s var(--ease-reveal), opacity 0.3s ease; } .disc-wrap.rise { bottom: 50%; transform: translateX(-50%) translateY(50%); width: clamp(90px, 22vw, 160px); } .disc { width: 100%; height: 100%; border-radius: 50%; position: relative; background: var(--disc-rim); box-shadow: 0 12px 48px rgba(0,0,0,.55), 0 2px 0 0 var(--disc-rim-hi), inset 0 1px 2px oklch(30% 0.01 260 / 0.25); transition: background 0.4s, box-shadow 0.4s, transform 0.18s ease; } .disc-wrap:hover .disc { transform: scale(1.015); } .disc-wrap:active .disc { transform: scale(0.985); } .disc-wrap.rise:hover .disc, .disc-wrap.rise:active .disc { transform: none; } .disc::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient( circle at 35% 28%, var(--disc-hi) 0%, var(--disc-face) 55%, var(--slot-recess) 100% ); box-shadow: inset 0 2px 12px rgba(0,0,0,.4), inset 0 0 0 1px oklch(0% 0 0 / 0.22); transition: background 0.4s; } .disc-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; pointer-events: none; z-index: 1; transition: opacity 0.3s ease; } /* Keep the label visible on the raised disc so it can act as the nickname screen's Next control. */ .disc-wrap.rise .disc-label { opacity: 1; } .disc-label span { /* CHANGE: brighter, bolder, bigger (merged from the old DESIGN PASS block) */ font-size: clamp(12px, 3vw, 15px); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); transition: color 0.4s; } .disc-label svg { opacity: 0.45; } /* First page only ("Let's Play"): bigger and brighter. Next / Start (class "rise") keep the small size above. */ .disc-wrap:not(.rise) .disc-label span { font-size: clamp(17px, 4.8vw, 26px); font-weight: 600; letter-spacing: 0.04em; text-transform: none; color: var(--text-primary); } .disc-wrap:not(.rise) .disc-label svg { opacity: 0.8; } .n-top { flex: 1; background: var(--bg); transition: background 0.4s; } .n-mid { flex: 0 0 40%; background: var(--neon-mid-bg); border-left: 1.5px solid var(--neon-mid-border); border-right: 1.5px solid var(--neon-mid-border); position: relative; transition: background 0.4s, border-color 0.4s; } .n-bot { flex: 1; background: var(--bg); transition: background 0.4s; } [data-theme="light"] .glow-line { opacity: 0.45; } [data-theme="light"] .bloom { opacity: 0.25; } .glow-line { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient( to right, transparent 0%, var(--neon-glow-soft) 6%, var(--neon-glow) 28%, var(--neon-glow) 72%, var(--neon-glow-soft) 94%, transparent 100% ); } .glow-top { top: 0; box-shadow: 0 0 8px 2px var(--neon-glow), 0 0 18px 4px var(--neon-glow-soft), 0 -4px 14px 4px var(--neon-glow), 0 -20px 60px 10px var(--neon-glow-soft); } .glow-bot { bottom: 0; box-shadow: 0 0 8px 2px var(--neon-glow), 0 0 18px 4px var(--neon-glow-soft), 0 4px 14px 4px var(--neon-glow), 0 20px 60px 10px var(--neon-glow-soft); } .bloom { position: absolute; left: 0; right: 0; pointer-events: none; } .bloom-up { bottom: 100%; height: 200px; background: radial-gradient(ellipse 50% 100% at 50% 100%, var(--neon-bloom) 0%, var(--neon-glow-soft) 30%, transparent 75%); } .bloom-dn { top: 100%; height: 200px; background: radial-gradient(ellipse 50% 100% at 50% 0%, var(--neon-bloom) 0%, var(--neon-glow-soft) 30%, transparent 75%); } .back-btn { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 10; background: var(--icon-bg); border: 1px solid var(--icon-border); border-radius: 999px; padding: 12px 28px; color: var(--text-muted); font-size: 13px; letter-spacing: 0.06em; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s ease, background 0.2s, border-color 0.4s, color 0.4s; } .back-btn.visible { opacity: 1; pointer-events: auto; } .back-btn:hover { background: var(--slot-rim); } .layer { position: absolute; inset: 0; pointer-events: none; } #layer-disc { pointer-events: auto; } /* ── QUESTION CAROUSEL (multi-step signup) ── */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } #question-area { position: absolute; bottom: calc(50% + clamp(90px,22vw,160px)/2 + 24px); left: 50%; transform: translateX(-50%); z-index: 10; width: min(420px, 88vw); max-height: calc(50vh - clamp(90px,22vw,160px)/2 - 40px); padding: 4px 4px 6px; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } #question-area::-webkit-scrollbar { display: none; } #question-area.visible { opacity: 1; pointer-events: auto; } .q-panel { display: none; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0 4px; } .q-panel.q-active { display: flex; animation: qIn 0.46s var(--ease-reveal) both; } @keyframes qIn { from { opacity: 0; transform: translateX(var(--q-from, 60px)); } to { opacity: 1; transform: none; } } .q-label { /* CHANGE: hierarchy values merged from the old DESIGN PASS block */ font-size: clamp(17px, 3.4vw, 23px); font-weight: 500; letter-spacing: 0.03em; color: var(--text-primary); text-align: center; transition: color 0.4s; } .q-hint { font-size: 12px; letter-spacing: 0.02em; color: var(--text-muted); text-align: center; margin-top: -6px; min-height: 15px; } .q-error { font-size: 12px; letter-spacing: 0.02em; color: oklch(62% 0.20 25); text-align: center; min-height: 15px; } .q-input { width: 100%; padding: 13px 16px; border-radius: 12px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-size: clamp(14px, 2.2vw, 16px); font-weight: 400; letter-spacing: 0.02em; outline: none; transition: border-color 0.2s, background 0.4s, color 0.4s; text-align: center; } .q-input::placeholder { color: var(--text-muted); } .q-input:focus { border-color: var(--input-focus); } /* Dropdown menus */ .q-select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 32px; text-align-last: center; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a8f98' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* Birthday: Month / Day / Year in one row */ .q-row { display: flex; gap: 8px; width: 100%; } .q-row .q-select { padding-left: 10px; padding-right: 26px; background-position: right 9px center; } .q-row .sel-month { flex: 1.7; } .q-row .sel-day { flex: 1; } .q-row .sel-year { flex: 1.25; } /* Click-to-choose option chips */ .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; } .chip { padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.14s; } .chip:hover { border-color: var(--input-focus); } .chip:active { transform: scale(0.96); } .chip.selected { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); } /* Password field with Show / Hide */ .pw-wrap { position: relative; width: 100%; } .pw-wrap .q-input { padding-right: 64px; } .pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: none; background: transparent; color: var(--text-muted); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 8px; cursor: pointer; } .pw-toggle:hover { color: var(--text-primary); } /* Progress dots */ .q-progress { display: flex; justify-content: center; gap: 7px; padding: 10px 0 2px; } .q-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--input-border); transition: background 0.3s, transform 0.3s; } .q-dot.done { background: var(--text-muted); } .q-dot.active { background: var(--input-focus); transform: scale(1.35); } /* Disc looks dimmed until the current answer is valid */ .disc-wrap.rise.not-ready .disc-label { opacity: 0.55; } /* CHANGE: 0.4 -> 0.55 (value from the old DESIGN PASS block) */ /* Final blank page: Welcome, nickname */ /* ── FINAL WELCOME MESSAGE ── Sits ABOVE everything but is transparent, so the slot arch stays visible. It stays invisible until JS adds the class "show". */ #page-welcome { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: transparent; /* transparent so the slot arch stays visible behind the text */ pointer-events: none; /* never blocks clicks */ } #page-welcome h1 { font-size: clamp(24px, 6vw, 44px); font-weight: 300; letter-spacing: 0.30em; /* starts wide... */ color: var(--text-primary); text-align: center; padding: 0 24px; word-break: break-word; opacity: 0; transform: translateY(14px) scale(0.96); filter: blur(6px); /* The 1.2s delay (the 3rd value) is only for the reveal effect. color has NO delay, so the dark / light theme switch is instant. */ transition: opacity 0.9s ease 1.2s, transform 0.9s var(--ease-reveal) 1.2s, letter-spacing 1.2s var(--ease-reveal) 1.2s, filter 0.9s ease 1.2s, color 0.4s ease 0s; } /* ...and settles to normal spacing when revealed */ #page-welcome.show h1 { opacity: 1; transform: none; letter-spacing: 0.12em; filter: blur(0); } /* ── RULES CHECKBOX + RULES POPUP ── */ .agree { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); transition: color 0.4s; } .agree input { /* real checkbox stays for keyboard + screen readers */ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .agree-box { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--input-border); background: var(--input-bg); display: grid; place-items: center; transition: background 0.18s, border-color 0.18s, box-shadow 0.18s; } .agree-box::after { /* the check mark */ content: ''; width: 5px; height: 10px; border: solid var(--btn-text); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg) scale(0); transition: transform 0.16s ease; } .agree:hover .agree-box { border-color: var(--input-focus); } .agree input:checked + .agree-box { background: var(--btn-bg); border-color: var(--btn-bg); } .agree input:checked + .agree-box::after { transform: translateY(-1px) rotate(45deg) scale(1); } .agree input:focus-visible + .agree-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 35%, transparent); } .rules-link { border: none; background: none; padding: 0; font: inherit; letter-spacing: inherit; color: var(--input-focus); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; transition: color 0.2s; } .rules-link:hover { color: var(--text-primary); } .rules-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 4px; font-size: 14px; line-height: 1.55; color: var(--text-primary); } .rules-intro { color: var(--text-muted); margin-bottom: 14px; } .rules-list { list-style: none; counter-reset: rule; display: flex; flex-direction: column; gap: 14px; } .rules-list li { counter-increment: rule; position: relative; padding-left: 34px; color: var(--text-muted); } .rules-list li::before { content: counter(rule); position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--input-border); display: grid; place-items: center; font-size: 11px; color: var(--text-primary); } .rules-list strong { display: block; font-weight: 500; color: var(--text-primary); } .rules-foot { margin-top: 16px; font-size: 13px; color: var(--text-muted); } /* ── SLOT DESCEND ANIMATION ── No flip, no scaling. The whole slot layer just slides DOWN until the top edge of the slot (its glowing arch) shows near the top of the screen, and stays there. The distance is calculated from --slot-top, so it works on mobile and desktop. Tune: 2s = speed, the cubic-bezier = feel, 6.5% = how far the arch sits below the top of the screen (bigger = lower). */ #layer-slot.descend { animation: slotDescend 2s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes slotDescend { from { transform: translateY(0); } to { transform: translateY(calc(var(--slot-top) * -1 + 6.5%)); } } /* Makes the round button fade out so the center is free for the message */ .disc-wrap.vanish { opacity: 0; pointer-events: none; } /* ── STEP 2 OF THE ENDING: slot1 sinks further, slot2 arrives, game discs appear ── */ #page-welcome.leaving h1 { /* leaves quickly: no reveal delay */ transition: opacity 0.5s ease 0s, transform 0.5s ease 0s, letter-spacing 0.5s ease 0s, filter 0.5s ease 0s, color 0.4s ease 0s; } #layer-slot.descend2 { animation: slotDescend2 1.4s cubic-bezier(0.65, 0, 0.35, 1) forwards; } @keyframes slotDescend2 { from { transform: translateY(calc(var(--slot-top) * -1 + 6.5%)); } to { transform: translateY(calc(var(--slot-top) * -1 + var(--gap-bottom))); } } /* slot2: same material as slot, hanging from above (its rounded edge faces down) */ .slot2 { position: absolute; left: 0; width: 100%; top: -300%; /* tall enough that the radius is never clamped -> same shape as slot1 */ bottom: calc(100% - var(--gap-top)); background: var(--slot-recess); border-radius: var(--slot-r); box-shadow: -2px 2px 0 0 var(--slot-rim-hi), 2px -2px 0 0 var(--slot-rim), inset 0 -12px 40px rgba(0,0,0,.45), inset 0 -2px 8px rgba(0,0,0,.3), inset 0 0 0 2px oklch(0% 0 0 / 0.18); transform: translateY(-100vh); translate: var(--slot2-x) 0; rotate: 0deg; transform-origin: 50% 100%; visibility: hidden; /* off-screen until the ending scene; skips painting its big glow */ transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1), rotate 1.2s cubic-bezier(0.65, 0, 0.35, 1) var(--rot-delay), background 0.4s, box-shadow 0.4s; } .slot2.in { visibility: visible; transform: translateY(0); rotate: var(--slot2-rot); } /* slot1 in the last scene: shift / tilt around the top of its curve */ .slot.end { left: 0; /* same position as left:50% + translateX(-50%) */ transform: none; translate: var(--slot1-x) 0; rotate: var(--slot1-rot); transform-origin: 50% 0; transition: background 0.4s, box-shadow 0.4s, bottom 0.7s var(--ease-reveal), translate 1.4s cubic-bezier(0.65, 0, 0.35, 1), rotate 1.2s cubic-bezier(0.65, 0, 0.35, 1) var(--rot-delay); } .slot2::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1.5px var(--neon-glow), inset 0 0 14px 2px var(--neon-glow-soft), inset 0 -14px 50px -8px var(--neon-bloom), 0 0 8px 1px var(--neon-glow), 0 0 26px 4px var(--neon-glow-soft), 0 0 70px 12px var(--neon-bloom); } [data-theme="light"] .slot2::after { opacity: 0.7; } /* CHANGE: FLASH FIX (carousel visible for a moment on the first page after sign out / reload). Before game-carousel.js adds the class "diag", the row had no opacity rule (= fully visible). When the class arrived, css/party-games.css started a fade from 1 to 0 (0.6 s, delayed 0.15 s), so the discs showed on the first page while fading out. Now the row is invisible from the very first paint and only appears with ".games.open", exactly like the discs themselves. */ .games-row { opacity: 0; } .games.open .games-row { opacity: 1; } /* Game choice: title + 3 discs, centred between the two slots */ .games { position: absolute; left: 0; right: 0; top: var(--games-y); transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 3.5vh, 30px); pointer-events: none; } .games-title { font-size: clamp(14px, 2.6vw, 19px); font-weight: 500; /* CHANGE: merged from the old DESIGN PASS block */ letter-spacing: 0.04em; color: var(--text-primary); text-align: center; opacity: 0; transition: opacity 0.6s ease, color 0.4s; } /* CHANGE: the live activity line, a child of .games-title (see index.html). position:absolute under the title = it never changes the title's own position or the carousel layout. Smaller, quieter and in normal letters, so it reads as a second level under the spaced capitals of the title. Only the opacity changes when it appears, so nothing jumps. The dot pulses like the green friend dot. */ .games-activity { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 7px; width: max-content; max-width: 92vw; white-space: nowrap; pointer-events: none; font-size: 13.5px; font-weight: 400; letter-spacing: 0.03em; text-transform: none; /* absolute size: the title is only 12px, 0.78em was too small */ color: color-mix(in srgb, var(--text-primary) 88%, var(--bg)); /* CHANGE: brighter (was --text-muted) */ opacity: 0; transition: opacity 0.5s ease, color 0.4s; } .games.open .games-activity.show { opacity: 1; } .ga-dot { display: none; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); animation: pc-online-pulse 2s ease-out infinite; } .games-activity.live .ga-dot { display: inline-block; } /* dot only for live numbers (waiting / online) */ .games-row { display: flex; justify-content: center; align-items: flex-start; gap: var(--games-gap); } .game-btn { display: flex; flex-direction: column; align-items: center; gap: 12px; border: none; background: none; padding: 0; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; opacity: 0; transform: translateY(26px) scale(0.6); transition: opacity 0.5s ease, transform 0.7s var(--ease-reveal); transition-delay: calc(var(--i) * 140ms); } .games.open .game-title, .games.open .games-title { opacity: 1; } .games.open .game-btn { opacity: 1; transform: none; pointer-events: auto; } .game-disc { position: relative; width: var(--game-disc); height: var(--game-disc); border-radius: 50%; display: grid; place-items: center; background: var(--disc-rim); box-shadow: 0 12px 36px rgba(0,0,0,.5), 0 2px 0 0 var(--disc-rim-hi), inset 0 1px 2px oklch(30% 0.01 260 / 0.25); transition: box-shadow 0.3s, transform 0.18s ease, background 0.4s; } .game-disc::before { content: ''; position: absolute; inset: 6%; border-radius: 50%; background: radial-gradient(circle at 35% 28%, var(--disc-hi) 0%, var(--disc-face) 55%, var(--slot-recess) 100%); box-shadow: inset 0 2px 12px rgba(0,0,0,.4), inset 0 0 0 1px oklch(0% 0 0 / 0.22); } .game-icon { /* CHANGE: icons are SVG now (merged from the old DESIGN PASS block); font-size 0 hides the old emoji text */ position: relative; z-index: 1; display: grid; place-items: center; font-size: 0; line-height: 1; color: var(--input-focus); } .game-name { font-size: clamp(11px, 2.4vw, 14px); font-weight: 500; /* CHANGE: merged from the old DESIGN PASS block */ letter-spacing: 0.06em; color: var(--text-muted); transition: color 0.3s; } .games.open .game-btn:hover .game-disc { transform: scale(1.04); } .games.open .game-btn:active .game-disc { transform: scale(0.96); } .game-btn:focus-visible .game-disc { box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 55%, transparent), 0 12px 36px rgba(0,0,0,.5); } .game-btn.selected .game-disc { box-shadow: 0 0 0 2px var(--neon-glow), 0 0 22px 3px var(--neon-glow-soft), 0 0 60px 8px var(--neon-bloom), 0 12px 36px rgba(0,0,0,.5); } .game-btn.selected .game-name { color: var(--text-primary); } /* ── BIRTHDAY WHEEL PICKER ── */ :root { --wheel-item: 34px; } @media (max-height: 760px) { :root { --wheel-item: 30px; } } .wheel-picker { position: relative; display: flex; width: 100%; height: calc(var(--wheel-item) * 5); border-radius: 14px; border: 1.5px solid var(--input-border); background: var(--input-bg); overflow: hidden; transition: background 0.4s, border-color 0.4s; } .wheel { position: relative; z-index: 1; flex: 1; height: 100%; padding: calc(var(--wheel-item) * 2) 0; overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; overscroll-behavior: contain; touch-action: pan-y; cursor: grab; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 28%, #000 72%, transparent 100%); } .wheel::-webkit-scrollbar { display: none; } .wheel.dragging { scroll-snap-type: none; cursor: grabbing; } .wheel:focus-visible { background: color-mix(in srgb, var(--input-focus) 8%, transparent); } .w-month { flex: 1.7; } .w-day { flex: 1; } .w-year { flex: 1.25; } .wheel-item { height: var(--wheel-item); line-height: var(--wheel-item); text-align: center; scroll-snap-align: center; font-size: 15px; letter-spacing: 0.04em; white-space: nowrap; color: var(--text-muted); opacity: 0.3; transition: opacity 0.15s, color 0.15s; } .wheel-item.near2 { opacity: 0.5; } .wheel-item.near1 { opacity: 0.75; } .wheel-item.sel { opacity: 1; color: var(--text-primary); font-size: 17px; } .wheel-item.ph { font-style: italic; } .wheel-item.sel.ph { color: var(--text-muted); } .wheel-highlight { position: absolute; left: 8px; right: 8px; top: 50%; height: var(--wheel-item); transform: translateY(-50%); z-index: 2; pointer-events: none; border-top: 1.5px solid var(--input-focus); border-bottom: 1.5px solid var(--input-focus); border-radius: 8px; background: color-mix(in srgb, var(--input-focus) 10%, transparent); box-shadow: 0 0 14px -2px var(--neon-glow-soft); } /* ── COUNTRY: custom button + bottom sheet ── */ button.q-select { font-family: inherit; text-align: center; } .q-select.placeholder { color: var(--text-muted); } .sheet-wrap { position: fixed; inset: 0; z-index: 90; visibility: hidden; pointer-events: none; transition: visibility 0s linear 0.4s; } .sheet-wrap.open { visibility: visible; pointer-events: auto; transition-delay: 0s; } .sheet-backdrop { position: absolute; inset: 0; background: rgba(5, 10, 20, 0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; transition: opacity 0.35s ease; } .sheet-wrap.open .sheet-backdrop { opacity: 1; } .sheet { position: absolute; left: 50%; bottom: 0; width: min(480px, 100%); height: min(560px, 72vh); height: min(560px, 72dvh); display: flex; flex-direction: column; gap: 12px; padding: 10px 18px 18px; background: var(--bg); border: 1.5px solid var(--neon-mid-border); border-bottom: none; border-radius: 22px 22px 0 0; box-shadow: 0 -1px 0 var(--neon-glow), 0 -12px 40px -12px var(--neon-glow-soft); transform: translate(-50%, 100%); transition: transform 0.45s var(--ease-reveal), background 0.4s, border-color 0.4s; } .sheet-wrap.open .sheet { transform: translate(-50%, 0); } .sheet-handle { width: 38px; height: 4px; border-radius: 4px; margin: 0 auto; background: var(--input-border); flex: none; } .sheet-head { display: flex; align-items: center; justify-content: space-between; flex: none; } .sheet-head h2 { font-size: 14px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-primary); } .sheet-close { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--icon-border); background: var(--icon-bg); color: var(--text-primary); font-size: 13px; cursor: pointer; } .sheet-search { flex: none; text-align: left; } .country-list { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px; } .country-item { display: block; width: 100%; text-align: left; padding: 13px 14px; border: none; border-radius: 10px; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 15px; letter-spacing: 0.03em; cursor: pointer; transition: background 0.15s; } .country-item:hover { background: var(--input-bg); } .country-item.selected { background: var(--btn-bg); color: var(--btn-text); } .country-item.selected::after { content: '✓'; float: right; } .sheet-empty { padding: 28px 0; text-align: center; color: var(--text-muted); font-size: 14px; } @media (min-width: 900px) { .sheet { bottom: auto; top: 50%; border-bottom: 1.5px solid var(--neon-mid-border); border-radius: 22px; padding-top: 18px; opacity: 0; transform: translate(-50%, -42%); transition: transform 0.45s var(--ease-reveal), opacity 0.3s ease, background 0.4s; } .sheet-wrap.open .sheet { opacity: 1; transform: translate(-50%, -50%); } .sheet-handle { display: none; } } /* Mobile only: position of the disc when it moves to the center */ @media (max-width: 899px) { .disc-wrap.rise { bottom: 35%; /* disc center height from the bottom of the screen */ width: clamp(90px, 28vw, 140px); /* disc size on mobile */ } #question-area { /* keep the question box just above the disc: same 35% and same size as above */ bottom: calc(40% + clamp(90px, 28vw, 140px) / 2 + 24px); max-height: calc(65vh - clamp(90px, 28vw, 140px) / 2 - 40px); } } /* ── GAME MODE SHEET (Search opponent / Practice offline / filters) ── */ .game-sheet { height: auto; max-height: min(620px, 88dvh); overflow-y: auto; scrollbar-width: none; } .game-sheet::-webkit-scrollbar { display: none; } .gview { display: none; flex-direction: column; gap: 14px; } .gview.active { display: flex; animation: qIn 0.4s var(--ease-reveal) both; --q-from: 30px; } .gintro { font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: center; } .mode-main { display: block; width: 100%; padding: 28px 20px; border-radius: 22px; border: 1.5px solid var(--neon-glow); background: var(--btn-bg); color: var(--btn-text); font-family: inherit; font-size: 20px; font-weight: 500; letter-spacing: 0.06em; cursor: pointer; box-shadow: 0 0 22px 2px var(--neon-glow-soft), 0 10px 30px -10px var(--neon-bloom); transition: background 0.2s, transform 0.15s; } .mode-main:hover { background: var(--btn-hover); } .mode-main:active { transform: scale(0.985); } .mode-main small { display: block; margin-top: 6px; font-size: 12px; font-weight: 400; letter-spacing: 0.04em; opacity: 0.8; } .mode-alt { align-self: center; width: 62%; padding: 11px 16px; border-radius: 999px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-muted); font-family: inherit; font-size: 13px; letter-spacing: 0.05em; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .mode-alt:hover { border-color: var(--input-focus); color: var(--text-primary); } .f-group { display: flex; flex-direction: column; gap: 8px; } .f-label { font-size: 13px; letter-spacing: 0.06em; color: var(--text-primary); } .f-group .chips { justify-content: flex-start; } .f-group .q-select { text-align: left; text-align-last: left; padding-left: 14px; } .f-group .q-row .q-select { flex: 1; } .f-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } .f-actions .mode-main { padding: 16px 20px; font-size: 16px; } .link-btn { border: none; background: none; padding: 6px; font: inherit; font-size: 13px; letter-spacing: 0.05em; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .link-btn:hover { color: var(--text-primary); } .search-state { align-items: center; text-align: center; padding: 18px 0 6px; } .search-pulse { width: 64px; height: 64px; border-radius: 50%; border: 2px solid var(--neon-glow); box-shadow: 0 0 18px 2px var(--neon-glow-soft); animation: searchPulse 1.6s ease-in-out infinite; } @keyframes searchPulse { 0%,100% { transform: scale(0.8); opacity: 0.6; } 50% { transform: scale(1.1); opacity: 1; } } .search-sum { font-size: 13px; line-height: 1.5; color: var(--text-muted); } .toast { position: fixed; left: 50%; bottom: 9%; transform: translate(-50%, 12px); z-index: 95; padding: 12px 22px; border-radius: 999px; border: 1.5px solid var(--neon-mid-border); background: var(--bg); color: var(--text-primary); font-size: 14px; letter-spacing: 0.06em; box-shadow: 0 0 20px -4px var(--neon-glow-soft); opacity: 0; pointer-events: none; transition: opacity 0.3s ease, transform 0.4s var(--ease-reveal); } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ── PREMIUM LOCK, ROOM (chat + voice), VIBE ── */ [hidden] { display: none !important; } .f-fields { display: flex; flex-direction: column; gap: 14px; transition: opacity 0.3s; } .is-locked .f-fields { opacity: 0.38; filter: grayscale(0.5); pointer-events: none; } .is-locked #btn-start { display: none; } #gv-filters:not(.is-locked) #btn-unlock { display: none; } .lock-tag { font-size: 13px; letter-spacing: 0.06em; color: var(--text-muted); text-align: center; } .perk-list { list-style: none; display: flex; flex-direction: column; gap: 12px; } .perk-list li { font-size: 13px; line-height: 1.5; color: var(--text-muted); padding-left: 14px; border-left: 2px solid var(--neon-glow-soft); } .perk-list strong { display: block; font-size: 14px; font-weight: 500; color: var(--text-primary); } .game-sheet.in-room .sheet-close { visibility: hidden; } .chat-log { height: 150px; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 14px; border: 1.5px solid var(--input-border); background: var(--input-bg); scrollbar-width: none; } .chat-log::-webkit-scrollbar { display: none; } .msg { max-width: 82%; padding: 7px 12px; border-radius: 14px; font-size: 14px; line-height: 1.4; word-break: break-word; } .msg.me { align-self: flex-end; background: var(--btn-bg); color: var(--btn-text); } .msg.them { align-self: flex-start; background: var(--icon-bg); color: var(--text-primary); } .msg.sys { align-self: center; background: none; color: var(--text-muted); font-size: 13px; text-align: center; } .chat-row { display: flex; gap: 8px; } .chat-row .q-input { text-align: left; } .chat-row .chip { flex: none; } .pill-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .pill { padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-family: inherit; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: background 0.18s, border-color 0.18s, color 0.18s; } .pill:hover { border-color: var(--input-focus); } .pill[aria-pressed="true"] { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); } .pill.voice { border-color: var(--neon-glow); } .vibe-row { display: flex; gap: 10px; } .vibe-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 6px; border-radius: 18px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font-family: inherit; font-size: 13px; letter-spacing: 0.04em; cursor: pointer; transition: border-color 0.18s, transform 0.14s; } .vibe-btn span { font-size: 28px; line-height: 1; } .vibe-btn:hover { border-color: var(--input-focus); } .vibe-btn:active { transform: scale(0.96); } /* ═══════════════════════════════════════════════════════════ GAME PAGE (chess + backgammon, offline and online) Sections: 1 page frame · 2 player bars · 3 chess board 4 backgammon board · 5 dialog · 6 practice view Colours come from the theme variables above, so dark/light mode works automatically. Board colours are in section 3/4. ═══════════════════════════════════════════════════════════ */ /* 1. PAGE FRAME ─ sits above the signup scene, below the sheets (z-index 90) */ :root { --sq-light: #CBD5E1; /* chess light squares */ --sq-dark: #64748B; /* chess dark squares */ } [data-theme="light"] { --sq-light: #E8EDF3; --sq-dark: #8FA1B8; } .gpage { position: fixed; inset: 0; z-index: 85; display: none; flex-direction: column; align-items: center; overflow-x: hidden; overflow-y: auto; scrollbar-width: none; background: var(--bg); opacity: 0; transition: opacity 0.35s ease, background 0.4s; /* --bw = chess board size, --gw = width of the player bars. EDIT HERE to resize. */ --bw: max(250px, min(94vw, 560px, calc(100vh - 330px))); --gw: var(--bw); } @supports (height: 100dvh) { .gpage { --bw: max(250px, min(94vw, 560px, calc(100dvh - 330px))); } } .gpage[data-game="backgammon"] { --gw: max(300px, min(94vw, 820px, calc((100vh - 340px) * 1.52))); } /* 1.52 = board width/height ratio */ @supports (height: 100dvh) { .gpage[data-game="backgammon"] { --gw: max(300px, min(94vw, 820px, calc((100dvh - 340px) * 1.52))); } } .gpage::-webkit-scrollbar { display: none; } .gpage.open { display: flex; } .gpage.show { opacity: 1; } .gpage[data-game="backgammon"] .g-moves { display: none; } /* move list is chess only */ .g-top { width: min(94vw, 820px); flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; } .g-iconbtn { position: relative; flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--icon-border); background: var(--icon-bg); color: var(--text-primary); font-size: 16px; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: transform 0.18s, background 0.3s, border-color 0.3s; } .g-iconbtn:hover { transform: scale(1.07); } .g-top { position: relative; } /* Title sits right after the back button and shrinks (…) instead of colliding with Resign */ .g-title { flex: 1; min-width: 0; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; } .g-top-actions { margin-left: auto; } .g-title b { display: block; font-weight: 400; font-size: 16px; letter-spacing: 0.14em; color: var(--text-primary); } .g-title small { font-size: 13px; letter-spacing: 0.06em; color: var(--text-muted); } .g-top-actions { display: flex; gap: 8px; flex: none; } .g-stage { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; width: var(--gw); } .g-status { flex: none; min-height: 22px; padding: 6px 12px 0; font-size: 13px; letter-spacing: 0.06em; text-align: center; color: var(--text-muted); transition: color 0.4s; } .g-moves { /* chess move list (scrolls sideways) */ flex: none; width: var(--gw); height: 34px; display: flex; align-items: center; gap: 6px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; font-size: 13px; letter-spacing: 0.03em; color: var(--text-primary); } .g-moves::-webkit-scrollbar { display: none; } .g-moves .mn { color: var(--text-muted); margin-left: 6px; } .g-moves .mv { padding: 2px 6px; border-radius: 6px; background: var(--input-bg); } .g-actions { flex: none; width: var(--gw); display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding: 8px 0 22px; } .pill.primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-text); } .pill.danger:hover { border-color: oklch(62% 0.20 25); color: oklch(70% 0.18 25); } /* 2. PLAYER BARS (avatar, name, captured pieces / pips) */ .g-player { flex: none; width: var(--gw); display: flex; align-items: center; gap: 10px; padding: 8px 2px; } .g-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; color: var(--text-primary); background: radial-gradient(circle at 35% 28%, var(--disc-hi), var(--disc-face) 60%, var(--slot-recess)); border: 2px solid var(--disc-rim); transition: box-shadow 0.3s, border-color 0.3s; } .g-player.on .g-avatar { /* glowing ring = whose turn it is */ border-color: var(--neon-glow); box-shadow: 0 0 14px 2px var(--neon-glow-soft); } .g-pmeta { min-width: 0; } .g-pname { font-size: 14px; letter-spacing: 0.06em; color: var(--text-primary); } .g-pinfo { min-height: 20px; display: flex; align-items: center; gap: 2px; font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); } .g-pinfo .cap { font-size: 16px; line-height: 1; margin-right: -3px; } .g-pinfo .adv { margin-left: 8px; font-size: 13px; } /* 3. CHESS BOARD */ .cboard { width: var(--bw); height: var(--bw); display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); font-size: calc(var(--bw) / 8 * 0.78); border-radius: 10px; overflow: hidden; user-select: none; -webkit-user-select: none; border: 2px solid var(--slot-rim); box-shadow: 0 0 28px -6px var(--neon-glow-soft), 0 14px 40px rgba(0,0,0,.4); -webkit-tap-highlight-color: transparent; } .csq { position: relative; display: grid; place-items: center; cursor: pointer; line-height: 1; } .csq.l { background: var(--sq-light); } .csq.d { background: var(--sq-dark); } .csq .pc, .g-promo .pc { position: relative; z-index: 1; font-family: 'Segoe UI Symbol', 'Noto Sans Symbols 2', 'Apple Symbols', sans-serif; } .pc.w { color: #F8FAFC; -webkit-text-stroke: 1px #1E293B; text-shadow: 0 2px 3px rgba(0,0,0,.45); } .pc.b { color: #0B1220; -webkit-text-stroke: 0.6px #94A3B8; text-shadow: 0 1px 2px rgba(255,255,255,.18); } .csq .coord { position: absolute; font-size: 10px; line-height: 1; letter-spacing: 0; pointer-events: none; opacity: 0.8; font-family: system-ui, sans-serif; } .csq .coord.r { left: 3px; top: 3px; } .csq .coord.f { right: 3px; bottom: 3px; } .csq.l .coord { color: var(--sq-dark); } .csq.d .coord { color: var(--sq-light); } .csq.last::before, .csq.hint::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--input-focus) 32%, transparent); } .csq.hint::before { background: rgba(250, 204, 21, 0.5); } .csq.sel { box-shadow: inset 0 0 0 3px var(--input-focus); } .csq.chk { box-shadow: inset 0 0 22px 6px rgba(239, 68, 68, 0.85); } /* king in check */ .csq.tgt::after { /* legal move dot */ content: ''; position: absolute; z-index: 2; width: 28%; height: 28%; border-radius: 50%; background: color-mix(in srgb, var(--input-focus) 75%, transparent); } .csq.tgt.cap::after { width: 86%; height: 86%; background: none; border: 4px solid color-mix(in srgb, var(--input-focus) 80%, transparent); } .g-promo { /* promotion picker, drawn over the board */ position: absolute; z-index: 5; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; background: rgba(5, 10, 20, 0.62); border-radius: 10px; font-size: calc(var(--bw) / 8 * 0.9); } .g-promo button { border: 1.5px solid var(--input-border); border-radius: 14px; background: var(--sq-light); padding: 4px 8px; cursor: pointer; font-size: inherit; line-height: 1.1; } .g-promo button.g-promo-x { font-size: 16px; padding: 10px 14px; color: var(--text-primary); background: var(--icon-bg); } /* 4. BACKGAMMON BOARD (drawn as SVG by BgUI) */ .bgwrap { width: var(--gw); } .bgsvg { width: 100%; height: auto; display: block; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; } .bgsvg .bg-frame { fill: var(--slot-recess); stroke: var(--slot-rim); stroke-width: 3; } .bgsvg .bar-fill { fill: var(--slot-rim); opacity: 0.55; } .bgsvg .tray-bg { fill: var(--bg); stroke: var(--slot-rim); stroke-width: 2; } .bgsvg .pt { cursor: pointer; } .bgsvg .pt .tri.a { fill: var(--disc-hi); } .bgsvg .pt .tri.b { fill: var(--disc-face); opacity: 0.8; } .bgsvg .pt.sel .tri { fill: color-mix(in srgb, var(--input-focus) 55%, var(--disc-rim)); } .bgsvg .pt.dest .tri { stroke: var(--neon-glow); stroke-width: 3; } .bgsvg .pt.tray.dest .tray-bg { stroke: var(--neon-glow); stroke-width: 3; } .bgsvg .pt.flash .tri { stroke: var(--text-primary); stroke-width: 2; } .bgsvg .dest-dot { fill: var(--neon-glow); opacity: 0.85; } .bgsvg .ck > circle { stroke-width: 2; } .bgsvg .ck.w > circle { fill: #F1F5F9; stroke: #94A3B8; } .bgsvg .ck.b > circle { fill: #0B1220; stroke: var(--gold-b); } /* black checkers get a gold rim so they show on dark boards */ .bgsvg .ck > .ring { fill: none; stroke-width: 1.5; opacity: 0.6; } .bgsvg .pt.movable .ck.top > circle:first-child { stroke: var(--neon-glow); stroke-width: 3.5; } .bgsvg .pt.sel .ck.top > circle:first-child { stroke: var(--input-focus); stroke-width: 4.5; } .bgsvg .ck-n { font-size: 20px; font-weight: 600; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .bgsvg .ck-n.w { fill: #0F172A; } .bgsvg .ck-n.b { fill: #F1F5F9; } .bgsvg .off-ck.w { fill: #F1F5F9; stroke: #94A3B8; stroke-width: 1.5; } .bgsvg .off-ck.b { fill: #0B1220; stroke: var(--gold-b); stroke-width: 1.5; } .bg-dice { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; min-height: 66px; padding: 4px 0; } .die { width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center; font-size: 42px; line-height: 1; color: #0F172A; background: #F1F5F9; box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 -3px 0 rgba(0,0,0,.12); transition: opacity 0.3s; } .die.used { opacity: 0.22; } .die.roll { animation: dieRoll 0.55s var(--ease-reveal); } @keyframes dieRoll { from { transform: rotate(-200deg) scale(0.4); opacity: 0; } to { transform: none; opacity: 1; } } .roll-btn { padding: 14px 34px; border-radius: 999px; border: 1.5px solid var(--neon-glow); background: var(--btn-bg); color: var(--btn-text); font-family: inherit; font-size: 16px; font-weight: 500; letter-spacing: 0.08em; cursor: pointer; box-shadow: 0 0 22px 2px var(--neon-glow-soft); transition: background 0.2s, transform 0.15s; } .roll-btn:hover { background: var(--btn-hover); } .roll-btn:active { transform: scale(0.97); } /* 5. DIALOG (game over, resign, leave) */ .g-dialog { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(5, 10, 20, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .g-card { width: min(340px, 100%); padding: 26px 22px 20px; text-align: center; border-radius: 22px; background: var(--bg); border: 1.5px solid var(--neon-mid-border); box-shadow: 0 0 34px -6px var(--neon-glow-soft); animation: qIn 0.4s var(--ease-reveal) both; --q-from: 0px; } .g-card h3 { font-size: 22px; font-weight: 300; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 8px; } .g-card p { font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-bottom: 18px; } .g-card-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; } /* 7. CHAT BOX (online games only) Mobile: below the board. Desktop (900px+): right of the board. --ch = height of the board, used to line the chat box up with it. */ .gpage { --ch: var(--bw); } .gpage[data-game="backgammon"] { --ch: calc(var(--gw) / 1.52); } .g-layout { display: flex; flex-direction: column; align-items: center; width: 100%; } .g-main { display: flex; flex-direction: column; align-items: center; width: var(--gw); flex: none; } .g-chatpanel { flex: none; width: var(--gw); height: 280px; margin: 0 0 24px; display: flex; flex-direction: column; gap: 8px; padding: 12px 12px 10px; border-radius: 18px; background: var(--slot-recess); border: 1.5px solid var(--neon-mid-border); box-shadow: 0 0 24px -8px var(--neon-glow-soft); transition: background 0.4s, border-color 0.4s; } .g-chat-head { flex: none; font-size: 13px; letter-spacing: 0.1em; color: var(--text-muted); } /* The chat room is re-used from the sheet; inside the box it is always shown as a grid: message log on top, text input, then the voice / mute / report buttons. */ .g-chatpanel .gview { display: grid !important; animation: none; flex: 1; min-height: 0; gap: 8px; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) auto auto; } .g-chatpanel .chat-log { grid-column: 1 / -1; height: auto; min-height: 0; } .g-chatpanel .chat-row { grid-column: 1 / -1; } .g-chatpanel .pill-row { justify-content: flex-start; gap: 6px; } .g-chatpanel .pill { padding: 6px 11px; font-size: 12px; white-space: nowrap; } .g-chatpanel .q-input { padding: 9px 12px; font-size: 14px; } .g-chatpanel .link-btn { display: none; } /* "Back to board" / "End game": not needed here (use Resign) */ @media (max-width: 899px) { /* online on a phone: leave room for the chat box under the board */ .gpage.online { --bw: max(250px, min(94vw, 560px, calc(100vh - 600px))); } .gpage.online[data-game="backgammon"] { --gw: max(300px, min(94vw, 820px, calc((100vh - 600px) * 1.52))); } } @supports (height: 100dvh) { @media (max-width: 899px) { .gpage.online { --bw: max(250px, min(94vw, 560px, calc(100dvh - 600px))); } .gpage.online[data-game="backgammon"] { --gw: max(300px, min(94vw, 820px, calc((100dvh - 600px) * 1.52))); } } } @media (min-width: 900px) { .g-layout { flex-direction: row; align-items: flex-start; justify-content: center; gap: 24px; } .g-chatpanel { width: 330px; height: calc(var(--ch) + 56px); margin: 56px 0 0; } /* lined up with the board */ .gpage.online .g-top { width: min(94vw, 1180px); } .gpage.online[data-game="backgammon"] { --gw: max(300px, min(calc(94vw - 360px), 820px, calc((100vh - 300px) * 1.52))); } } @supports (height: 100dvh) { @media (min-width: 900px) { .gpage.online[data-game="backgammon"] { --gw: max(300px, min(calc(94vw - 360px), 820px, calc((100dvh - 300px) * 1.52))); } } } /* 6. PRACTICE SETUP (inside the game sheet) */ #gv-practice .f-group .chips { justify-content: center; } /* 8. CHESS ON MOBILE, ONLINE ─ full-width board. The chat box is the SAME as in backgammon (see section 7), so both games look and feel identical. */ @media (max-width: 899px) { .gpage.online[data-game="chess"] { --bw: max(250px, min(91vw, 560px)); } } /* 9. HEADER RESIGN BUTTON */ .g-resign { flex: none; height: 42px; padding: 0 14px; border-radius: 999px; border: 1.5px solid transparent; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 13px; letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.2s, color 0.2s, transform 0.18s; } .g-resign:hover { border-color: oklch(62% 0.20 25); color: oklch(72% 0.17 25); } .g-actions:empty { display: none; } /* no buttons left in the row = no gap */ /* Header on narrow phones: slightly smaller title + Resign so the centred title never touches the buttons */ @media (max-width: 480px) { .g-title b { font-size: 14px; letter-spacing: 0.08em; } .g-title small { font-size: 12px; letter-spacing: 0.04em; } .g-resign { padding: 0 11px; font-size: 12px; } } @media (max-width: 380px) { .g-title b { font-size: 13px; letter-spacing: 0.05em; } .g-resign { padding: 0 9px; } .g-top { gap: 8px; } } /* 11. CHESS ONE-SCREEN LAYOUT Goal: on a phone the board AND the whole chat box are visible without scrolling. • The status text ("Your move", "Check!") is a small pill on the right of YOUR bar (same grid cell as the bar), so the extra line under the board is gone. • Player bars are slim: avatar + name + captured pieces on one line. • On phones the chat box grows to fill all the height that is left under the board. EDIT HERE: 32px = avatar size, 91vw = board width (section 8). */ .gpage[data-game="chess"] .g-main { display: grid; grid-template-columns: 100%; justify-items: center; } .gpage[data-game="chess"] .g-main > * { grid-column: 1; } /* everything in ONE column; the status shares the row of your bar */ .gpage[data-game="chess"] #g-opp { grid-row: 1; } .gpage[data-game="chess"] .g-stage { grid-row: 2; } .gpage[data-game="chess"] #g-me { grid-row: 3; } .gpage[data-game="chess"] .g-status { grid-row: 3; justify-self: end; align-self: center; z-index: 1; pointer-events: none; min-height: 0; padding: 4px 12px; font-size: 12px; white-space: nowrap; background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 999px; } .gpage[data-game="chess"] .g-status:empty { display: none; } .gpage[data-game="chess"] .g-moves { grid-row: 4; height: 28px; } .gpage[data-game="chess"] .g-actions { grid-row: 5; } .gpage[data-game="chess"] .g-player { padding: 4px 2px; } .gpage[data-game="chess"] .g-avatar { width: 32px; height: 32px; font-size: 13px; } .gpage[data-game="chess"] .g-pmeta { display: flex; align-items: center; gap: 10px; min-width: 0; } @media (max-width: 899px) { .gpage[data-game="chess"] .g-top { padding: 10px 0 4px; } .gpage[data-game="chess"] .g-layout { flex: 1 0 auto; } .gpage.online[data-game="chess"] .g-chatpanel { flex: 1 1 0; height: auto; min-height: 190px; margin: 6px 0 12px; padding: 10px; } .gpage.online[data-game="chess"] .g-chat-head { display: none; } /* the opponent's name is already above the board */ /* buttons under the input: voice | mute | report on ONE line */ .gpage.online[data-game="chess"] .g-chatpanel .gview { grid-template-columns: auto 1fr; column-gap: 6px; } .gpage.online[data-game="chess"] .g-chatpanel .pill-row { flex-wrap: nowrap; align-items: center; } .gpage.online[data-game="chess"] .g-chatpanel .pill { padding: 6px 9px; } } /* polish: chat buttons keep their natural height; on desktop the chess chat box lines up with the board */ .g-chatpanel .pill-row { align-items: center; } @media (min-width: 900px) { .gpage.online[data-game="chess"] .g-chatpanel { margin-top: 38px; height: calc(var(--ch) + 40px); } } /* ═══════════════════════════════════════════════════════════ SMOOTH OPENING OF THE SIGNUP (all devices) The click on "Create Account" used to animate the slot's HEIGHT (`bottom`), which forces the browser to re-layout and repaint a huge shape with big blurry shadows on every frame = small glitch. Now: • the slot keeps one fixed size, and its whole layer is moved with `translate` (GPU only, no repaint). Start = 18% higher (the old undropped look). Class "slot-down" (added by openSecond) = moved down. • will-change = the browser prepares these layers at page load, so nothing has to be built at the moment of the click. • --par-dur: the mouse / tilt "parallax" offset used to be wiped in ONE frame when you click (a small jump). While html has the class "parallax-settle" (set by settleParallax() in the script) the layers glide back smoothly instead. ═══════════════════════════════════════════════════════════ */ :root { --par-dur: 0s; } html.parallax-settle { --par-dur: 0.45s; } .layer { transition: transform var(--par-dur) var(--ease-reveal); } #layer-slot, #layer-gold, #layer-disc { will-change: transform; } #layer-slot { translate: 0 -18%; /* 18% of the screen height = the old "bottom" shift */ transition: translate 0.7s var(--ease-reveal), transform var(--par-dur) var(--ease-reveal); } #layer-slot.slot-down { translate: 0 0; } /* ═══════════════════════════════════════════════════════════ MOBILE ONLY: QUESTION 1 (NICKNAME) SITS NEAR THE TOP Why: on phones the keyboard covers the lower half of the screen, so during the first question the slot, the round button and the question are lifted up. When the user presses Next, they glide back down to their normal place (the place used by all the other questions). How it works: • JS toggles the class "q1-lift" on (see openSecond, showStep and closeSecond in the main script). Class ON = lifted. • The class moves 3 things UP by the same amount, using the CSS "translate" property (so it never clashes with their own "transform"): #layer-slot the big curved slot #layer-disc the round Next button #question-area the question, the input and the progress dots • Class OFF = translate goes back to 0, and the transition below makes the move smooth (0.8s, same easing as the rest of the page). TUNE HERE: --q1-lift how far UP during question 1 (bigger = higher, e.g. 34vh) 0.8s speed of the move down / up Desktop (900px and wider) is not affected at all. ═══════════════════════════════════════════════════════════ */ @media (max-width: 899px) { :root { --q1-lift: 28vh; } /* the smooth movement (only "translate" is animated here) */ #layer-slot, #layer-disc { transition: translate 0.8s var(--ease-reveal), transform var(--par-dur) var(--ease-reveal); } #question-area { transition: opacity 0.45s ease, translate 0.8s var(--ease-reveal); } /* keeps its fade-in too */ /* the lifted position, used only while the class is on */ html.q1-lift #layer-slot, html.q1-lift #layer-disc, html.q1-lift #question-area { translate: 0 calc(var(--q1-lift) * -1); } } /* ═══════════════════════════════════════════════════════════ LOGIN / SIGN OUT / REMEMBERED LOGIN • .login-btn "Already have an account? Log in" pill, just above the Create Account disc (position = disc bottom + disc size + 14px; the 2 variables copy the disc values from the top of this file: EDIT THEM TOGETHER if you move the disc) • .profile-chip top-left corner (nickname), only visible in the game choice scene (see PROFILE MENU at the end) • has-session on while app.js checks a remembered login (hides the first page, no flash) • instant-scene on for a split second: jumps straight to the game choice scene, no animation ═══════════════════════════════════════════════════════════ */ :root { --disc-b-vh: 13vh; --disc-w-vw: 70vw; } /* MOBILE: disc bottom + disc width */ @media (min-width: 900px) { :root { --disc-b-vh: 4vh; --disc-w-vw: 25vw; } } /* DESKTOP */ .login-btn { position: fixed; left: 50%; z-index: 12; bottom: calc(var(--disc-b-vh) + var(--disc-w-vw) + 14px); transform: translateX(-50%); padding: 10px 20px; border-radius: 999px; border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text-muted); font-family: inherit; font-size: 13px; letter-spacing: 0.05em; white-space: nowrap; cursor: pointer; opacity: 1; transition: opacity 0.45s ease, border-color 0.2s, color 0.2s, background 0.4s; } .login-btn b { font-weight: 500; color: var(--input-focus); } .login-btn:hover { border-color: var(--input-focus); color: var(--text-primary); } .login-btn.fade-out { opacity: 0; pointer-events: none; } /* hidden while signing up / in the game scene */ #login-btn { color: var(--input-focus); font-size: 14px; padding: 8px 12px; margin-top: 2px; } /* "I have an account" link on question 1 */ #login-btn:hover { color: var(--text-primary); } html.has-session #welcome-text, html.has-session #layer-slot, html.has-session #layer-gold, html.has-session #layer-disc, html.has-session #login-btn { visibility: hidden; } html.instant-scene *, html.instant-scene *::before, html.instant-scene *::after { transition: none !important; } /* Final position of the slot in the game choice scene (same place the "descend2" animation ends) */ #layer-slot.slot-final { transform: translateY(calc(var(--slot-top) * -1 + var(--gap-bottom))); } #login-sheet .sheet { gap: 14px; } #login-sheet .q-input { text-align: left; } #login-form { display: flex; flex-direction: column; gap: 14px; } /* LOGIN BUTTON LOADING BAR: while the server answers (2-3 s) a bar keeps sliding along the bottom of the button, so it never looks frozen. app.js adds / removes the class "loading". TUNE: 4px = bar thickness, 1.1s = speed */ #login-go { position: relative; overflow: hidden; } #login-go.loading { opacity: 1; cursor: progress; } #login-go.loading::after { content: ''; position: absolute; left: 0; bottom: 0; height: 4px; width: 40%; border-radius: 4px; background: rgba(0, 0, 0, 0.38); animation: loginBar 1.1s ease-in-out infinite; } @keyframes loginBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } } /* LOGIN SHEET ON PHONES: slides DOWN from the TOP of the screen (the keyboard never covers it). Only the login sheet is affected; the country / rules / game sheets still come from the bottom. TUNE: the translate(-50%, -100%) is where it starts (above the screen); padding = space inside. */ @media (max-width: 899px) { #login-sheet .sheet { top: 0; bottom: auto; border: 1.5px solid var(--neon-mid-border); border-top: none; border-radius: 0 0 22px 22px; padding: calc(6px + env(safe-area-inset-top, 0px)) 18px 10px; box-shadow: 0 1px 0 var(--neon-glow), 0 12px 40px -12px var(--neon-glow-soft); transform: translate(-50%, -100%); } #login-sheet.open .sheet { transform: translate(-50%, 0); } #login-sheet .sheet-handle { order: 99; margin-top: 2px; } /* the little bar moves to the bottom edge */ #login-sheet .sheet-head h2 { padding: 14px 0; } } #signup-fields { display: flex; flex-direction: column; gap: 14px; width: 100%; } /* email + password of the last question */ /* ═══════════════════════════════════════════════════════════ A) LOADING RING AROUND THE START BUTTON While the account is being created (2-3 s) app.js adds the class "busy" to #disc-wrap. A glowing arc (conic-gradient cut into a thin ring by a mask) spins around the disc. TUNE: inset -7px = distance from the disc | 5px = ring thickness | 1s = spin speed ═══════════════════════════════════════════════════════════ */ .disc-wrap::after { content: ''; position: absolute; inset: -7px; /* ring sits just outside the disc */ border-radius: 50%; pointer-events: none; /* never blocks clicks */ opacity: 0; /* invisible until .busy */ transition: opacity 0.3s ease; /* the arc: transparent for most of the circle, then a tail that gets brighter = "comet" look */ background: conic-gradient(from 0deg, transparent 0deg, transparent 200deg, var(--neon-glow-soft) 280deg, var(--neon-glow) 360deg); /* the mask turns the filled circle into a thin ring (only the outer 5px stay visible) */ -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); filter: drop-shadow(0 0 6px var(--neon-glow)); /* the glow */ } .disc-wrap.busy::after { opacity: 1; animation: discSpin 1s linear infinite; } @keyframes discSpin { to { transform: rotate(360deg); } } /* ═══════════════════════════════════════════════════════════ B) SOUND BUTTON + PALETTE BUTTON (right column, under the theme button) Theme button = top 20px. Each next button is 52px lower (44px button + 8px gap). ═══════════════════════════════════════════════════════════ */ /* speaker icons: html gets the class "sound-off" (set by app.js / the head script) when muted */ .ic-off { display: none; } html.sound-off .ic-on { display: none; } html.sound-off .ic-off { display: block; } /* ═══════════════════════════════════════════════════════════ C) COLOUR PALETTES (5 for dark + 5 for light) HOW IT WORKS • "ocean" is the ORIGINAL look: it has NO data-palette attribute, so the dark/light blocks at the top of this file are used unchanged. • The other four set TWO numbers on : --h = hue of the surfaces (backgrounds, discs, slots) 0-360 --ha = hue of the accent (neon glow, buttons, focus colour) 0-360 and the two generic blocks below build every colour from them (oklch(lightness chroma hue)). HOW TO ADD / CHANGE A PALETTE • Change a palette: edit its --h / --ha numbers. • Add one: copy a [data-palette="..."] line, give it a new name, and add the same name to PALETTES in app.js and to the regex in the script of index.html. • Hue guide: 25 red · 70 amber · 140 green · 200 cyan · 260 blue · 300 violet · 350 pink ═══════════════════════════════════════════════════════════ */ [data-palette="violet"] { --h: 295; --ha: 300; } [data-palette="emerald"] { --h: 165; --ha: 160; } [data-palette="rose"] { --h: 5; --ha: 10; } [data-palette="amber"] { --h: 70; --ha: 78; } /* DARK versions (same lightness values as the original slate palette, only the hue changes) */ [data-theme="dark"][data-palette] { --bg: oklch(27.9% 0.037 var(--h)); --slot-recess: oklch(23% 0.035 var(--h)); --slot-rim: oklch(37% 0.040 var(--h)); --slot-rim-hi: oklch(44.6% 0.040 var(--h)); --disc-face: oklch(39% 0.055 var(--h)); --disc-hi: oklch(50% 0.050 var(--h)); --disc-rim: oklch(32% 0.045 var(--h)); --disc-rim-hi: oklch(55% 0.040 var(--h)); --text-muted: oklch(77% 0.030 var(--h)); --icon-bg: oklch(37% 0.040 var(--h)); --icon-border: oklch(48% 0.045 var(--h)); --neon-bg: oklch(27.9% 0.037 var(--h)); --neon-mid-bg: oklch(32% 0.040 var(--h)); --neon-mid-border: oklch(41% 0.050 var(--h)); --neon-glow: oklch(76% 0.15 var(--ha)); --neon-glow-soft: oklch(76% 0.15 var(--ha) / 0.45); --neon-bloom: oklch(76% 0.15 var(--ha) / 0.45); --input-bg: oklch(32% 0.045 var(--h)); --input-border: oklch(48% 0.045 var(--h)); --input-focus: oklch(76% 0.15 var(--ha)); --btn-bg: oklch(76% 0.15 var(--ha)); --btn-hover: oklch(84% 0.11 var(--ha)); } /* LIGHT versions (same lightness values as the original light palette) */ [data-theme="light"][data-palette] { --bg: oklch(96% 0.012 var(--h)); --slot-recess: oklch(89% 0.020 var(--h)); --slot-rim: oklch(82% 0.018 var(--h)); --slot-rim-hi: oklch(97% 0.008 var(--h)); --disc-face: oklch(86% 0.025 var(--h)); --disc-hi: oklch(94% 0.015 var(--h)); --disc-rim: oklch(78% 0.020 var(--h)); --disc-rim-hi: oklch(98% 0.008 var(--h)); --text-primary: oklch(22% 0.020 var(--h)); --text-muted: oklch(46% 0.020 var(--h)); --icon-bg: oklch(91% 0.015 var(--h)); --icon-border: oklch(74% 0.020 var(--h)); --neon-bg: oklch(96% 0.012 var(--h)); --neon-mid-bg: oklch(92% 0.018 var(--h)); --neon-mid-border: oklch(76% 0.020 var(--h)); --neon-glow: oklch(68% 0.15 var(--ha) / 0.85); --neon-glow-soft: oklch(68% 0.15 var(--ha) / 0.30); --neon-bloom: oklch(68% 0.15 var(--ha) / 0.40); --input-bg: oklch(98% 0.008 var(--h)); --input-border: oklch(78% 0.020 var(--h)); --input-focus: oklch(55% 0.15 var(--ha)); --btn-bg: oklch(42% 0.12 var(--ha)); --btn-hover: oklch(35% 0.13 var(--ha)); } /* ═══════════════════════════════════════════════════════════ DESIGN PASS: clear primary action, game icons, Bazdate hero, stronger light mode CHANGE: this block used to OVERRIDE older rules (font, labels, hierarchy). Those values now live in the ORIGINAL rules above, so one class = one place. What is left here are only NEW rules (nothing here repeats a rule from higher up). ═══════════════════════════════════════════════════════════ */ /* Disc label while the account is being created. (Brighter / bolder / bigger disc labels: now in .disc-label span above.) */ .disc-wrap.busy .disc-label { opacity: 0.4; } /* Next / Start = the main action: lights up in the accent colour as soon as the answer is valid */ .disc-wrap.rise:not(.not-ready) .disc { filter: drop-shadow(0 0 16px color-mix(in oklch, var(--input-focus) 70%, transparent)); animation: readyPop 0.5s var(--ease-reveal); } .disc-wrap.rise:not(.not-ready) .disc-label span { color: var(--input-focus); } @keyframes readyPop { 0% { transform: scale(0.96); } 55% { transform: scale(1.045); } 100% { transform: scale(1); } } /* Game icons: one matching line style (SVG) instead of emoji */ .game-icon svg { width: calc(var(--game-disc) * 0.44); height: calc(var(--game-disc) * 0.44); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .game-icon svg .f { fill: currentColor; stroke: none; } /* Bazdate hero: big glowing wordmark. TUNE: font-size, the 2 glow sizes (18px / 46px), animation speed (5s) */ .welcome-text h1.brand { font-size: clamp(46px, 13vw, 88px); font-weight: 600; letter-spacing: 0.02em; line-height: 1.05; color: var(--text-primary); animation: brandGlow 5s ease-in-out infinite; } .welcome-text h1.brand span { color: var(--input-focus); } @keyframes brandGlow { 0%, 100% { text-shadow: 0 0 18px color-mix(in oklch, var(--input-focus) 45%, transparent), 0 0 46px color-mix(in oklch, var(--input-focus) 25%, transparent); } 50% { text-shadow: 0 0 24px color-mix(in oklch, var(--input-focus) 70%, transparent), 0 0 64px color-mix(in oklch, var(--input-focus) 40%, transparent); } } /* Light mode: tinted background, stronger accent, darker text (default blue palette; other palettes keep their own light colours) */ [data-theme="light"]:not([data-palette]) { --bg: oklch(94% 0.022 250); --neon-bg: oklch(94% 0.022 250); --text-primary: oklch(18% 0.03 262); --text-muted: oklch(40% 0.03 262); --input-bg: oklch(99% 0.006 250); --input-border: oklch(70% 0.03 252); --input-focus: oklch(52% 0.19 250); --btn-bg: oklch(46% 0.19 252); --btn-hover: oklch(39% 0.2 252); --neon-glow: rgba(30, 110, 255, 0.85); --neon-glow-soft: rgba(30, 110, 255, 0.30); --neon-bloom: rgba(30, 110, 255, 0.40); } /* ═══════════════════════════════════════════════════════════ PROFILE MENU + GAME MENU • .profile-chip top-left on the game choice scene: avatar + nickname (+ chevron) • .pm-menu the pop-up: Sound, Accent colour, Sign out (game page: Sound, Dark / light) Dark / light stays top-right on the home page (.theme-btn). ═══════════════════════════════════════════════════════════ */ .profile-chip { position: fixed; top: 20px; left: 20px; z-index: 20; height: 44px; max-width: min(46vw, 260px); padding: 0 14px 0 6px; display: flex; align-items: center; gap: 8px; border-radius: 999px; border: 1.5px solid var(--icon-border); background: var(--icon-bg); color: var(--text-primary); font-family: inherit; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.5s ease, background 0.3s, border-color 0.3s; } .profile-chip.visible { opacity: 1; pointer-events: auto; } .profile-chip:hover, .profile-chip[aria-expanded="true"] { border-color: var(--input-focus); } .pc-avatar { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: var(--text-primary); background: color-mix(in srgb, var(--input-focus) 30%, var(--icon-bg)); border: 1.5px solid var(--input-focus); } .pc-name { min-width: 0; font-size: 14px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pc-chev { flex: none; color: var(--text-muted); transition: transform 0.25s ease; } .profile-chip[aria-expanded="true"] .pc-chev { transform: rotate(180deg); } .pm-menu { position: fixed; top: 72px; left: 20px; z-index: 30; width: min(280px, calc(100vw - 40px)); padding: 8px; border-radius: 18px; border: 1.5px solid var(--icon-border); background: var(--bg); box-shadow: 0 18px 50px -12px rgba(0,0,0,.55), 0 0 30px -8px var(--neon-glow-soft); opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 0.2s ease, transform 0.25s var(--ease-reveal); } .pm-menu.open { opacity: 1; pointer-events: auto; transform: none; } .pm-row { width: 100%; min-height: 48px; padding: 0 12px; border-radius: 12px; display: flex; align-items: center; gap: 12px; border: 0; background: transparent; color: var(--text-primary); font-family: inherit; font-size: 15px; letter-spacing: 0.02em; text-align: left; cursor: pointer; transition: background 0.2s, color 0.2s; } .pm-row:hover { background: color-mix(in srgb, var(--input-focus) 12%, transparent); } .pm-row > svg { flex: none; color: var(--text-muted); } .pm-label { flex: 1; white-space: nowrap; } .pm-sep { height: 1px; margin: 6px 8px; background: var(--icon-border); opacity: 0.6; } .pm-danger:hover { background: color-mix(in srgb, oklch(62% 0.20 25) 14%, transparent); color: oklch(72% 0.17 25); } .pm-danger:hover > svg { color: inherit; } /* on/off switch (sound): off when has the class "sound-off" */ .pm-switch { flex: none; position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--input-focus); transition: background 0.25s; } .pm-switch::after { content: ''; position: absolute; top: 3px; left: 19px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left 0.25s; } html.sound-off .pm-switch { background: var(--icon-border); } html.sound-off .pm-switch::after { left: 3px; } /* accent colour row */ .pm-colors { cursor: default; } .pm-colors:hover { background: transparent; } .pm-swatches { display: flex; align-items: center; gap: 6px; flex: none; } .pm-swatches .sw { flex: none; } .pm-swatches .sw { width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid transparent; /* background colour is set by app.js (from PALETTES) */ transition: transform 0.15s, border-color 0.2s; } .pm-swatches .sw:hover { transform: scale(1.12); } .pm-swatches .sw.active { border-color: var(--text-primary); } /* game page: menu opens under the ⋯ button, on the right */ .g-menu { position: absolute; top: 58px; left: auto; right: 0; transform-origin: top right; width: min(240px, calc(100vw - 24px)); } .g-top { z-index: 25; } .g-menu .icon-moon, .g-menu .icon-sun { display: none; } [data-theme="dark"] .g-menu .icon-moon { display: block; } [data-theme="light"] .g-menu .icon-sun { display: block; } .g-menu .pm-row > svg.icon-moon, .g-menu .pm-row > svg.icon-sun { flex: none; } /* ACCENT COLOUR BUTTON on the first page + sign-up (top-left, mirrors the dark/light button). Hidden when the player is signed in: html gets "signed-in" (set in startEnding). */ .palette-btn { position: fixed; top: 20px; left: 20px; z-index: 20; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--icon-border); background: var(--icon-bg); display: grid; place-items: center; cursor: pointer; transition: opacity 0.4s ease, background 0.3s, border-color 0.3s, transform 0.18s; } .palette-btn:hover { transform: scale(1.08); } /* CHANGE: the round button now shows the CURRENT LANGUAGE (tiny globe above a two-letter code) instead of a plain accent dot. Colour = the accent (--input-focus), so the player still sees the accent colour on the button. `dir="ltr"` is set in the html so the code never flips in right-to-left pages. No letter-spacing on purpose (rtl.css switches it off anyway). */ .palette-lang { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; color: var(--input-focus); } .palette-lang svg { display: block; flex: none; filter: drop-shadow(0 0 4px var(--neon-glow-soft)); } .palette-code { font-size: 11px; font-weight: 700; text-transform: uppercase; text-shadow: 0 0 8px var(--neon-glow-soft); } .palette-pre { position: fixed; top: 72px; left: 20px; z-index: 21; width: min(264px, calc(100vw - 40px)); padding: 8px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px; border: 1.5px solid var(--icon-border); background: var(--bg); box-shadow: 0 18px 50px -12px rgba(0,0,0,.55), 0 0 30px -8px var(--neon-glow-soft); opacity: 0; pointer-events: none; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 0.2s ease, transform 0.25s var(--ease-reveal); } .palette-pre.open { opacity: 1; pointer-events: auto; transform: none; } .pp-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; min-height: 44px; font-size: 15px; color: var(--text-primary); } .pp-col { flex-wrap: wrap; align-items: flex-start; } .pp-col .pm-label { flex-basis: 100%; } .palette-pre .sw { flex: none; width: 24px; height: 24px; border-radius: 50%; padding: 0; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s, border-color 0.2s; } .palette-pre .sw:hover { transform: scale(1.12); } .palette-pre .sw.active { border-color: var(--text-primary); } html.signed-in .palette-btn, html.signed-in .palette-pre { opacity: 0; pointer-events: none; } html.has-session .palette-btn { visibility: hidden; } /* remembered login: no flash of this button */ /* ═══════════════════════════════════════════════════════════════════════ VISUAL STYLES (profile menu → Style). Independent from dark/light and from the accent colour: every style works in both themes and keeps using --input-focus (the accent). "classic" = no data-style attribute = everything above. Blocks: GLASS, SOFT (neumorphism), INK (comic / anime line art). ═══════════════════════════════════════════════════════════════════════ */ /* style picker inside the profile menu */ .pm-styles { flex-wrap: wrap; align-items: flex-start; padding-top: 10px; padding-bottom: 12px; cursor: default; } .pm-styles:hover { background: transparent; } .pm-styles .pm-label { flex-basis: 100%; } .pm-segs { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .seg { height: 36px; border-radius: 999px; border: 1.5px solid var(--icon-border); background: transparent; color: var(--text-muted); font-family: inherit; font-size: 14px; letter-spacing: 0.03em; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .seg:hover { color: var(--text-primary); } .seg.active { color: var(--text-primary); border-color: var(--input-focus); background: color-mix(in srgb, var(--input-focus) 18%, transparent); } /* ───────────── GLASS (liquid glass) ───────────── Real glass = almost clear + a bright bevel on the top-left edge + colour fringes in the corners (dispersion) + the blurred, saturated scene seen THROUGH it. TUNE: blur(6px) = how frosted it is. */ html[data-style="glass"][data-theme="dark"] { --bg:#0e1020; --g-fill: rgba(255,255,255,.05); --g-line: rgba(255,255,255,.38); --g-shadow: rgba(0,0,0,.55); } html[data-style="glass"][data-theme="light"] { --bg:#e8ecf4; --g-fill: rgba(255,255,255,.22); --g-line: rgba(140,160,195,.55); --g-shadow: rgba(70,90,130,.28); } html[data-style="glass"][data-theme] { --icon-bg: var(--g-fill); --icon-border: var(--g-line); --input-bg: var(--g-fill); --input-border: var(--g-line); } html[data-style="glass"] body { background: radial-gradient(42% 30% at 10% 8%, color-mix(in srgb, var(--input-focus) 75%, transparent), transparent 70%), radial-gradient(45% 32% at 95% 32%, rgba(255,120,175,.50), transparent 70%), radial-gradient(50% 38% at 15% 88%, rgba(90,200,255,.50), transparent 70%), radial-gradient(42% 30% at 88% 96%, color-mix(in srgb, var(--input-focus) 65%, transparent), transparent 70%), var(--bg); } html[data-style="glass"] .neon-stage-inner .n-top, html[data-style="glass"] .neon-stage-inner .n-bot { background: transparent; } html[data-style="glass"] :is(.theme-btn, .palette-btn, .profile-chip, .g-iconbtn, .palette-pre, .pm-menu, .chip, .pill, .q-input, .back-btn, .login-btn, .sheet, .seg, .g-resign) { background-color: var(--g-fill); background-image: radial-gradient(circle at 0% 0%, rgba(120,190,255,.50), transparent 42%), radial-gradient(circle at 100% 100%, rgba(255,170,100,.50), transparent 42%), linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0) 50%); -webkit-backdrop-filter: blur(6px) saturate(190%) brightness(1.1); backdrop-filter: blur(6px) saturate(190%) brightness(1.1); border: 1px solid var(--g-line); box-shadow: inset 2px 3px 3px -1px rgba(255,255,255,.95), inset -2px -3px 4px -1px rgba(255,255,255,.40), inset 0 0 16px rgba(255,255,255,.18), 0 14px 30px -10px var(--g-shadow); } html[data-style="glass"] .slot, html[data-style="glass"] .slot2 { background: color-mix(in srgb, var(--bg) 40%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--g-line), inset 0 22px 44px rgba(255,255,255,.07); } html[data-style="glass"] :is(.disc, .game-disc) { background: radial-gradient(circle at 30% 18%, rgba(255,255,255,.85), transparent 22%), radial-gradient(circle at 0% 0%, rgba(120,190,255,.55), transparent 45%), radial-gradient(circle at 100% 100%, rgba(255,170,100,.55), transparent 45%), var(--g-fill); -webkit-backdrop-filter: blur(6px) saturate(190%); backdrop-filter: blur(6px) saturate(190%); box-shadow: inset 3px 4px 6px -1px rgba(255,255,255,.9), inset -3px -4px 8px -1px rgba(255,255,255,.35), 0 0 0 1px var(--g-line), 0 24px 50px -14px color-mix(in srgb, var(--input-focus) 70%, transparent); } html[data-style="glass"] :is(.disc, .game-disc)::before { background: radial-gradient(circle at 50% 120%, color-mix(in srgb, var(--input-focus) 45%, transparent), transparent 65%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.35), inset 0 6px 14px rgba(255,255,255,.25); } html[data-style="glass"] .gold-oval { filter: blur(14px); opacity: .85; } /* ───────────── SOFT (neumorphism) ───────────── */ html[data-style="soft"][data-theme="light"] { --bg:#e4e8ef; --sh-d: rgba(150,163,186,.7); --sh-l: #fff; --text-primary:#2b3240; --text-muted:#566074; --neon-mid-bg:#dce1ea; } html[data-style="soft"][data-theme="dark"] { --bg:#262a33; --sh-d: rgba(0,0,0,.55); --sh-l: rgba(255,255,255,.06); --text-primary:#e8ebf2; --text-muted:#9ea7b9; --neon-mid-bg:#22252d; } html[data-style="soft"][data-theme] { --icon-bg: var(--bg); --icon-border: transparent; --input-bg: var(--bg); --input-border: transparent; --neon-mid-border: transparent; --neon-bg: var(--bg); --slot-recess: var(--bg); --slot-rim: transparent; --slot-rim-hi: transparent; --disc-rim: var(--bg); --disc-face: var(--bg); --disc-hi: var(--bg); --disc-rim-hi: transparent; --neon-glow: color-mix(in srgb, var(--input-focus) 55%, transparent); --neon-glow-soft: transparent; --neon-bloom: transparent; } html[data-style="soft"] :is(.theme-btn, .palette-btn, .profile-chip, .g-iconbtn, .palette-pre, .pm-menu, .chip, .pill, .back-btn, .login-btn, .g-resign, .seg) { background: var(--bg); border-color: transparent; box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l); } html[data-style="soft"] :is(.q-input, .msg.me) { border-color: transparent; box-shadow: inset 3px 3px 7px var(--sh-d), inset -3px -3px 7px var(--sh-l); } html[data-style="soft"] :is(.chip.selected, .seg.active) { color: var(--input-focus); background: var(--bg); box-shadow: inset 3px 3px 7px var(--sh-d), inset -3px -3px 7px var(--sh-l); } html[data-style="soft"] .sheet { background: var(--bg); border-color: transparent; box-shadow: 0 -10px 30px var(--sh-d); } html[data-style="soft"] .mode-main { background: var(--bg); color: var(--input-focus); border-color: transparent; box-shadow: 7px 7px 16px var(--sh-d), -7px -7px 16px var(--sh-l); } html[data-style="soft"] .mode-main:active { box-shadow: inset 4px 4px 9px var(--sh-d), inset -4px -4px 9px var(--sh-l); } html[data-style="soft"] :is(.disc, .game-disc) { background: var(--bg); box-shadow: 12px 12px 28px var(--sh-d), -12px -12px 28px var(--sh-l); } html[data-style="soft"] :is(.disc, .game-disc)::before { background: var(--bg); box-shadow: inset 7px 7px 14px var(--sh-d), inset -7px -7px 14px var(--sh-l); } html[data-style="soft"] :is(.slot, .slot2) { box-shadow: inset 10px 10px 24px var(--sh-d), inset -10px -10px 24px var(--sh-l); } html[data-style="soft"] .pm-menu { box-shadow: 10px 10px 26px var(--sh-d), -8px -8px 22px var(--sh-l); } html[data-style="soft"] .pm-switch { box-shadow: inset 2px 2px 4px rgba(0,0,0,.25); } /* ───────────── INK (comic / anime line art) ───────────── */ html[data-style="ink"][data-theme="light"] { --bg:#f6f3ea; --ink:#141414; --text-primary:#141414; --text-muted:#4a4740; --icon-bg:#fffdf7; --neon-mid-bg:#ece7d8; --disc-face:#fffdf7; --disc-hi:#fffdf7; } html[data-style="ink"][data-theme="dark"] { --bg:#17171c; --ink:#f4f1ea; --text-primary:#f4f1ea; --text-muted:#bdb9ae; --icon-bg:#24242c; --neon-mid-bg:#1f1f26; --disc-face:#24242c; --disc-hi:#24242c; } html[data-style="ink"][data-theme] { --icon-border: var(--ink); --input-bg: var(--icon-bg); --input-border: var(--ink); --neon-bg: var(--bg); --neon-mid-border: var(--ink); --slot-recess: var(--neon-mid-bg); --slot-rim: var(--ink); --slot-rim-hi: var(--ink); --disc-rim: var(--ink); --disc-rim-hi: var(--ink); --neon-glow: var(--ink); --neon-glow-soft: transparent; --neon-bloom: transparent; } html[data-style="ink"] :is(.theme-btn, .palette-btn, .profile-chip, .g-iconbtn, .palette-pre, .pm-menu, .chip, .pill, .q-input, .back-btn, .login-btn, .g-resign, .seg, .mode-main, .mode-alt, .sheet) { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-weight: 600; } html[data-style="ink"] :is(.theme-btn, .palette-btn, .profile-chip, .g-iconbtn, .chip, .pill, .back-btn, .seg, .mode-main):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } html[data-style="ink"] :is(.chip.selected, .seg.active) { background: var(--input-focus); color: #141414; border-color: var(--ink); } html[data-style="ink"] .mode-main { background: var(--input-focus); color: #141414; } html[data-style="ink"] .pm-menu { box-shadow: 5px 5px 0 var(--ink); } html[data-style="ink"] .pm-sep { background: var(--ink); opacity: 1; height: 2px; } html[data-style="ink"] .pm-switch { border: 2px solid var(--ink); } html[data-style="ink"] .pc-avatar, html[data-style="ink"] .g-avatar { border-color: var(--ink); background: var(--input-focus); color: #141414; } html[data-style="ink"] :is(.disc, .game-disc) { background: var(--ink); box-shadow: 6px 6px 0 var(--ink); } html[data-style="ink"] :is(.disc, .game-disc)::before { background: radial-gradient(rgba(0,0,0,.2) 1.3px, transparent 1.8px) 0 0 / 7px 7px, var(--input-focus); /* halftone dots on a flat accent */ box-shadow: inset 0 0 0 3px var(--ink); } html[data-style="ink"] .game-icon, html[data-style="ink"] .disc-wrap .disc-label span, html[data-style="ink"] .disc-wrap:not(.rise) .disc-label span { color: #141414; } html[data-style="ink"] .gold-oval { filter: none; opacity: 1; box-shadow: none; border: 3px solid var(--ink); } /* hero circle: flat, outlined */ html[data-style="ink"] .disc-label svg { stroke: #141414; } html[data-style="ink"] :is(.slot, .slot2) { box-shadow: 0 0 0 3px var(--ink); } html[data-style="ink"] .brand span { -webkit-text-stroke: 0; } /* ───────────── INK: comic fonts ───────────── Files go in the "fonts" folder: bangers-400.woff, comicneue-400.woff, comicneue-700.woff (both fonts are free, SIL Open Font License). Until they are uploaded the browser falls back to Comic Sans / system fonts, so nothing breaks. */ @font-face { font-family: 'Bangers'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/bangers-400.woff') format('woff'); } @font-face { font-family: 'Comic Neue'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/comicneue-400.woff') format('woff'); } @font-face { font-family: 'Comic Neue'; font-weight: 600 700; font-style: normal; font-display: swap; src: url('../fonts/comicneue-700.woff') format('woff'); } html[data-style="ink"] { --font: 'Comic Neue', 'Comic Sans MS', 'Chalkboard SE', system-ui, sans-serif; --font-display: 'Bangers', 'Comic Sans MS', Impact, sans-serif; } html[data-style="ink"] :is(.brand, .q-label, .games-title, .game-name, .g-title b, .disc-label span, .mode-main, .chip, .pill, .g-resign, .seg, .pc-name, .roll-btn, .sheet-head h2, .pm-label, #welcome-name, .login-btn, .back-btn) { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.07em; } html[data-style="ink"] :is(.seg, .pm-label, .pc-name, .chip, .pill, .g-resign, .game-name) { font-size: 17px; } html[data-style="ink"] .brand { font-size: clamp(54px, 15vw, 96px); letter-spacing: 0.04em; text-shadow: 4px 4px 0 var(--ink-shadow, var(--ink)); } html[data-style="ink"][data-theme="dark"] { --ink-shadow: color-mix(in srgb, var(--input-focus) 45%, #000); } html[data-style="ink"] :is(.neon-stage-inner .n-top, .neon-stage-inner .n-bot) { background-image: radial-gradient(color-mix(in srgb, var(--ink) 12%, transparent) 1.3px, transparent 1.8px); background-size: 10px 10px; /* halftone paper */ } /* ───────────── READABILITY (all styles except Classic) ───────────── Rule: text colour is ALWAYS set together with its background. • selected / pressed = accent tint + normal text colour • primary (filled) = solid accent + dark text */ html[data-style] { --on-accent: #10131a; } html[data-style] :is(.chip.selected, .pill[aria-pressed="true"], .seg.active, .country-item.selected) { background-color: color-mix(in srgb, var(--input-focus) 34%, var(--bg)); background-image: none; color: var(--text-primary); border-color: var(--input-focus); } html[data-style] :is(.roll-btn, .pill.primary, .msg.me, .mode-main) { background-color: var(--input-focus); background-image: none; color: var(--on-accent); text-shadow: none; } html[data-style] .mode-main small { color: var(--on-accent); opacity: 0.85; } html[data-style] :is(.g-resign, .g-iconbtn, .pill, .chip, .back-btn, .seg) { color: var(--text-primary); } html[data-style] .g-resign { color: var(--text-muted); } html[data-style="glass"] :is(.roll-btn, .pill.primary, .mode-main) { background-image: linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 55%); } html[data-style="ink"] :is(.chip.selected, .pill[aria-pressed="true"], .seg.active, .country-item.selected) { background-color: var(--input-focus); color: #141414; } html[data-style="ink"] :is(.roll-btn, .pill.primary, .mode-main) { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } /* ═══════════════════════════════════════════════════════════════════════ GAME BOARDS PER STYLE (chess + backgammon, dice, avatars, dialogs) Rule: the style changes the frame, surface tones, shadows and the look of the pieces. Piece contrast, highlights and move dots stay as strong as in Classic. Chat stays flat in Soft on purpose (no extra rules for it here). ═══════════════════════════════════════════════════════════════════════ */ /* ───────────── SOFT: boards ───────────── */ /* avatars: raised discs (turn = accent ring) */ html[data-style="soft"] .g-player .g-avatar { background: var(--bg); border: 0; color: var(--text-primary); box-shadow: 4px 4px 10px var(--sh-d), -4px -4px 10px var(--sh-l); } html[data-style="soft"] .g-player.on .g-avatar { border: 0; box-shadow: 0 0 0 2.5px var(--input-focus), 4px 4px 10px var(--sh-d), -4px -4px 10px var(--sh-l); } /* chess: a raised tile; two close tones, dark squares lightly tinted with the accent */ html[data-style="soft"] .cboard { border: 0; border-radius: 16px; box-shadow: 10px 10px 24px var(--sh-d), -10px -10px 24px var(--sh-l); } html[data-style="soft"][data-theme="light"] .csq.l { background: color-mix(in srgb, #fff 62%, var(--bg)); } html[data-style="soft"][data-theme="light"] .csq.d { background: color-mix(in srgb, var(--input-focus) 42%, var(--bg)); } html[data-style="soft"][data-theme="dark"] .csq.l { background: color-mix(in srgb, #fff 40%, #3b4150); } html[data-style="soft"][data-theme="dark"] .csq.d { background: color-mix(in srgb, var(--input-focus) 40%, #343947); } html[data-style="soft"][data-theme="dark"] .csq.l .coord { color: #2b3240; } html[data-style="soft"][data-theme="dark"] .csq.d .coord { color: #f1f3f8; } html[data-style="soft"][data-theme="light"] .csq.l .coord { color: color-mix(in srgb, var(--input-focus) 70%, #2b3240); } html[data-style="soft"][data-theme="light"] .csq.d .coord { color: #fff; } html[data-style="soft"] .g-promo button { background: var(--bg); border-color: transparent; box-shadow: 5px 5px 12px var(--sh-d), -5px -5px 12px var(--sh-l); } /* backgammon: the board is a pressed-in tray, checkers are raised coins */ html[data-style="soft"] .bgwrap { --pt-a: color-mix(in srgb, var(--text-primary) 13%, var(--bg)); --pt-b: color-mix(in srgb, var(--input-focus) 34%, var(--bg)); padding: 10px; box-sizing: border-box; border-radius: 22px; background: var(--bg); box-shadow: inset 7px 7px 16px var(--sh-d), inset -7px -7px 16px var(--sh-l); } html[data-style="soft"] .bgsvg .bg-frame { fill: none; stroke: none; } html[data-style="soft"] .bgsvg .bar-fill { fill: color-mix(in srgb, var(--text-primary) 8%, var(--bg)); opacity: 1; } html[data-style="soft"] .bgsvg .tray-bg { fill: color-mix(in srgb, var(--text-primary) 8%, var(--bg)); stroke: none; } html[data-style="soft"] .bgsvg .pt .tri.a { fill: var(--pt-a); opacity: 1; } html[data-style="soft"] .bgsvg .pt .tri.b { fill: var(--pt-b); opacity: 1; } html[data-style="soft"] .bgsvg .pt.sel .tri { fill: color-mix(in srgb, var(--input-focus) 62%, var(--bg)); } html[data-style="soft"] .bgsvg .pt.dest .tri { stroke: var(--input-focus); stroke-width: 3; } html[data-style="soft"] .bgsvg .pt.tray.dest .tray-bg { stroke: var(--input-focus); stroke-width: 3; } html[data-style="soft"] .bgsvg .pt.flash .tri { stroke: var(--input-focus); stroke-width: 3; } html[data-style="soft"] .bgsvg .dest-dot { fill: var(--input-focus); opacity: 1; } html[data-style="soft"] .bgsvg .ck { filter: drop-shadow(3px 4px 3px var(--sh-d)) drop-shadow(-2px -2px 2px var(--sh-l)); } /* if a browser ignores this, the coins simply stay flat */ html[data-style="soft"] .bgsvg .ck.w > circle:first-child { fill: #f3f5f9; stroke: #fff; stroke-width: 2; } html[data-style="soft"] .bgsvg .ck.b > circle:first-child { fill: #2a2f3b; stroke: #4a5163; stroke-width: 2; } html[data-style="soft"] .bgsvg .ck.w > .ring { stroke: #b4bccb; stroke-width: 2; opacity: 1; } html[data-style="soft"] .bgsvg .ck.b > .ring { stroke: #0f1218; stroke-width: 2; opacity: 1; } html[data-style="soft"] .bgsvg .pt.movable .ck.top > circle:first-child { stroke: var(--input-focus); stroke-width: 4; } html[data-style="soft"] .bgsvg .pt.sel .ck.top > circle:first-child { stroke: var(--input-focus); stroke-width: 5; } html[data-style="soft"] .bgsvg .ck-n.w { fill: #2b3240; } html[data-style="soft"] .bgsvg .off-ck.w { fill: #f3f5f9; stroke: #fff; stroke-width: 1.5; } html[data-style="soft"] .bgsvg .off-ck.b { fill: #2a2f3b; stroke: #4a5163; stroke-width: 1.5; } html[data-style="soft"] .die { background: var(--bg); color: var(--text-primary); box-shadow: 5px 5px 12px var(--sh-d), -5px -5px 12px var(--sh-l); } html[data-style="soft"] .roll-btn { border-color: transparent; box-shadow: 6px 6px 14px var(--sh-d), -6px -6px 14px var(--sh-l); } html[data-style="soft"] .roll-btn:active { box-shadow: inset 3px 3px 7px rgba(0,0,0,.25), inset -3px -3px 7px rgba(255,255,255,.25); } html[data-style="soft"] .g-dialog { background: color-mix(in srgb, var(--bg) 55%, transparent); } html[data-style="soft"] .g-card { border-color: transparent; box-shadow: 10px 10px 26px var(--sh-d), -8px -8px 22px var(--sh-l); } /* ───────────── INK: boards (flat colour, thick outlines, hard shadows) ───────────── */ html[data-style="ink"] .g-player .g-avatar { box-shadow: 2px 2px 0 var(--ink); border-width: 2.5px; } html[data-style="ink"] .g-player.on .g-avatar { border-color: var(--ink); box-shadow: 0 0 0 3px #ffd60a, 2px 2px 0 3px var(--ink); } html[data-style="ink"] .cboard { border: 3px solid var(--ink); border-radius: 8px; box-shadow: 6px 6px 0 var(--ink); } html[data-style="ink"] .csq.l { background: #f4f1ea; } html[data-style="ink"] .csq.d { background: var(--input-focus); } html[data-style="ink"] .csq.l .coord, html[data-style="ink"] .csq.d .coord { color: #141414; opacity: .75; } html[data-style="ink"] .pc.w { color: #fffdf7; -webkit-text-stroke: 1.6px #141414; text-shadow: 2px 2px 0 #141414; } html[data-style="ink"] .pc.b { color: #141414; -webkit-text-stroke: 1px #f4f1ea; text-shadow: 2px 2px 0 rgba(20,20,20,.35); } html[data-style="ink"] .csq.last::before { background: rgba(255,214,10,.6); } html[data-style="ink"] .csq.hint::before { background: rgba(255,255,255,.7); } html[data-style="ink"] .csq.sel { box-shadow: inset 0 0 0 4px #141414; } html[data-style="ink"] .csq.tgt::after { background: #141414; opacity: .8; } html[data-style="ink"] .csq.tgt.cap::after { background: none; border-color: #141414; opacity: 1; } html[data-style="ink"] .g-promo button { background: #f4f1ea; border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } html[data-style="ink"] .g-card { border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); border-radius: 16px; } html[data-style="ink"] .bgsvg .bg-frame { fill: var(--neon-mid-bg); stroke: var(--ink); stroke-width: 5; } html[data-style="ink"] .bgsvg .bar-fill { fill: color-mix(in srgb, var(--ink) 24%, var(--bg)); opacity: 1; } html[data-style="ink"] .bgsvg .tray-bg { fill: var(--icon-bg); stroke: var(--ink); stroke-width: 3; } html[data-style="ink"] .bgsvg .pt .tri { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; } html[data-style="ink"] .bgsvg .pt .tri.a { fill: var(--input-focus); opacity: 1; } html[data-style="ink"] .bgsvg .pt .tri.b { fill: var(--icon-bg); opacity: 1; } html[data-style="ink"] .bgsvg .pt.sel .tri { fill: #ffd60a; } html[data-style="ink"] .bgsvg .pt.dest .tri { stroke: #ffd60a; stroke-width: 6; paint-order: stroke; } html[data-style="ink"] .bgsvg .pt.tray.dest .tray-bg { stroke: #ffd60a; stroke-width: 5; } html[data-style="ink"] .bgsvg .pt.flash .tri { stroke: #ffd60a; stroke-width: 5; } html[data-style="ink"] .bgsvg .dest-dot { fill: #ffd60a; stroke: #141414; stroke-width: 2.5; opacity: 1; } html[data-style="ink"] .bgsvg .ck { filter: drop-shadow(2px 2px 0 #141414); } html[data-style="ink"] .bgsvg .ck.w > circle:first-child { fill: #fffdf7; stroke: #141414; stroke-width: 3; } html[data-style="ink"] .bgsvg .ck.b > circle:first-child { fill: #141414; stroke: var(--ink); stroke-width: 3; } html[data-style="ink"] .bgsvg .ck.w > .ring { stroke: #141414; stroke-width: 2; stroke-dasharray: 3 3; opacity: .55; } html[data-style="ink"] .bgsvg .ck.b > .ring { stroke: var(--input-focus); stroke-width: 2; stroke-dasharray: 3 3; opacity: 1; } html[data-style="ink"] .bgsvg .pt.movable .ck.top > circle:first-child { stroke: #ffd60a; stroke-width: 5; } html[data-style="ink"] .bgsvg .pt.sel .ck.top > circle:first-child { stroke: #ffd60a; stroke-width: 6; } html[data-style="ink"] .bgsvg .ck-n { font-family: var(--font-display); font-weight: 400; font-size: 24px; } html[data-style="ink"] .bgsvg .ck-n.w { fill: #141414; } html[data-style="ink"] .bgsvg .ck-n.b { fill: #fffdf7; } html[data-style="ink"] .bgsvg .off-ck.w { fill: #fffdf7; stroke: #141414; stroke-width: 2.5; } html[data-style="ink"] .bgsvg .off-ck.b { fill: #141414; stroke: var(--ink); stroke-width: 2.5; } html[data-style="ink"] .die { background: #fffdf7; color: #141414; border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); } /* ───────────── GLASS: boards (see-through squares and points over the colourful scene) ───────────── */ html[data-style="glass"][data-theme="dark"] .gpage { background: radial-gradient(45% 30% at 8% 6%, color-mix(in srgb, var(--input-focus) 70%, transparent), transparent 70%), radial-gradient(45% 32% at 98% 40%, rgba(255,120,175,.42), transparent 70%), radial-gradient(50% 36% at 12% 92%, rgba(90,200,255,.42), transparent 70%), var(--bg); } html[data-style="glass"][data-theme="light"] .gpage { background: radial-gradient(45% 30% at 8% 6%, color-mix(in srgb, var(--input-focus) 70%, transparent), transparent 70%), radial-gradient(45% 32% at 98% 40%, rgba(255,120,175,.45), transparent 70%), radial-gradient(50% 36% at 12% 92%, rgba(90,200,255,.5), transparent 70%), var(--bg); } html[data-style="glass"] .g-player .g-avatar { background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%), var(--g-fill); border: 1px solid var(--g-line); box-shadow: inset 2px 2px 3px -1px rgba(255,255,255,.9), 0 8px 18px -6px var(--g-shadow); } html[data-style="glass"] .g-player.on .g-avatar { border-color: var(--input-focus); box-shadow: inset 2px 2px 3px -1px rgba(255,255,255,.9), 0 0 16px 2px color-mix(in srgb, var(--input-focus) 70%, transparent); } html[data-style="glass"] .cboard { position: relative; border: 1px solid var(--g-line); border-radius: 18px; -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); box-shadow: inset 2px 3px 3px -1px rgba(255,255,255,.8), 0 22px 44px -14px var(--g-shadow); } html[data-style="glass"] .cboard::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.26), rgba(255,255,255,0) 38%); } html[data-style="glass"][data-theme="dark"] .csq.l { background: rgba(255,255,255,.42); } html[data-style="glass"][data-theme="dark"] .csq.d { background: color-mix(in srgb, var(--input-focus) 45%, rgba(110,118,150,.45)); } html[data-style="glass"][data-theme="dark"] .pc.b { color: #0B1220; -webkit-text-stroke: 0.9px #e2e8f0; } html[data-style="glass"][data-theme="light"] .csq.l { background: rgba(255,255,255,.78); } html[data-style="glass"][data-theme="light"] .csq.d { background: color-mix(in srgb, var(--input-focus) 42%, rgba(255,255,255,.35)); } html[data-style="glass"] .csq.l .coord, html[data-style="glass"] .csq.d .coord { color: var(--text-primary); opacity: .7; } html[data-style="glass"] .g-promo button { background: var(--g-fill); border: 1px solid var(--g-line); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html[data-style="glass"] .g-card { background: var(--g-fill); border: 1px solid var(--g-line); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: inset 2px 3px 3px -1px rgba(255,255,255,.9), 0 24px 50px -14px var(--g-shadow); } html[data-style="glass"] .bgsvg .bg-frame { fill: rgba(255,255,255,.06); stroke: var(--g-line); stroke-width: 1.5; } html[data-style="glass"] .bgsvg .bar-fill { fill: rgba(255,255,255,.16); opacity: 1; } html[data-style="glass"] .bgsvg .tray-bg { fill: rgba(255,255,255,.10); stroke: var(--g-line); stroke-width: 1.5; } html[data-style="glass"][data-theme="dark"] .bgsvg .pt .tri.a { fill: rgba(255,255,255,.26); opacity: 1; } html[data-style="glass"][data-theme="dark"] .bgsvg .pt .tri.b { fill: color-mix(in srgb, var(--input-focus) 42%, rgba(8,10,24,.3)); opacity: 1; } html[data-style="glass"][data-theme="light"] .bgsvg .pt .tri.a { fill: rgba(255,255,255,.75); opacity: 1; } html[data-style="glass"][data-theme="light"] .bgsvg .pt .tri.b { fill: color-mix(in srgb, var(--input-focus) 45%, rgba(255,255,255,.3)); opacity: 1; } html[data-style="glass"] .bgsvg .pt .tri { stroke: rgba(255,255,255,.35); stroke-width: 1; } html[data-style="glass"] .bgsvg .pt.sel .tri { fill: color-mix(in srgb, var(--input-focus) 70%, rgba(255,255,255,.2)); } html[data-style="glass"] .bgsvg .pt.dest .tri { stroke: var(--input-focus); stroke-width: 3; } html[data-style="glass"] .bgsvg .pt.tray.dest .tray-bg { stroke: var(--input-focus); stroke-width: 3; } html[data-style="glass"] .bgsvg .pt.flash .tri { stroke: var(--text-primary); stroke-width: 2; } html[data-style="glass"] .bgsvg .dest-dot { fill: var(--input-focus); opacity: 1; } html[data-style="glass"] .bgsvg .ck { filter: drop-shadow(0 4px 5px var(--g-shadow)); } html[data-style="glass"] .bgsvg .ck.w > circle:first-child { fill: rgba(255,255,255,.92); stroke: rgba(255,255,255,1); stroke-width: 2; } html[data-style="glass"][data-theme="light"] .bgsvg .ck.w > circle:first-child { stroke: rgba(120,140,175,.7); } html[data-style="glass"] .bgsvg .ck.b > circle:first-child { fill: rgba(14,18,36,.82); stroke: rgba(255,255,255,.6); stroke-width: 2; } html[data-style="glass"] .bgsvg .ck.w > .ring { stroke: rgba(120,140,175,.6); opacity: 1; } html[data-style="glass"] .bgsvg .ck.b > .ring { stroke: rgba(255,255,255,.4); opacity: 1; } html[data-style="glass"] .bgsvg .pt.movable .ck.top > circle:first-child { stroke: var(--input-focus); stroke-width: 4; } html[data-style="glass"] .bgsvg .pt.sel .ck.top > circle:first-child { stroke: var(--input-focus); stroke-width: 5; } html[data-style="glass"] .bgsvg .off-ck.w { fill: rgba(255,255,255,.92); stroke: rgba(255,255,255,1); stroke-width: 1.5; } html[data-style="glass"] .bgsvg .off-ck.b { fill: rgba(14,18,36,.82); stroke: rgba(255,255,255,.6); stroke-width: 1.5; } html[data-style="glass"] .die { background: linear-gradient(180deg, rgba(255,255,255,.4), rgba(255,255,255,.05) 60%), var(--g-fill); color: var(--text-primary); border: 1px solid var(--g-line); -webkit-backdrop-filter: blur(6px) saturate(170%); backdrop-filter: blur(6px) saturate(170%); box-shadow: inset 2px 3px 3px -1px rgba(255,255,255,.9), 0 12px 24px -8px var(--g-shadow); } /* ═══════════════════════════════════════════════════════════════════════ BAZDATE WORDMARK PER STYLE (Ink keeps its own comic logo above) Classic = bold, gradient letters + a slow light sweep over "date" Soft = embossed letters pressed out of the surface (no glow) Glass = lowercase frosted-glass letters with a coloured sheen TUNE: sweep speed = the 7s in "brandSweep"; glow size = the drop-shadow values. ═══════════════════════════════════════════════════════════════════════ */ @keyframes brandSweep { 0% { background-position: 0 0, 100% 0; } 50%, 100% { background-position: 0 0, 0% 0; } } @keyframes brandAura { 0%, 100% { filter: drop-shadow(0 0 14px color-mix(in oklch, var(--input-focus) 40%, transparent)) drop-shadow(0 6px 30px color-mix(in oklch, var(--input-focus) 22%, transparent)); } 50% { filter: drop-shadow(0 0 20px color-mix(in oklch, var(--input-focus) 62%, transparent)) drop-shadow(0 6px 44px color-mix(in oklch, var(--input-focus) 36%, transparent)); } } /* tagline with thin accent lines on both sides (all styles except Ink) */ html:not([data-style="ink"]) .welcome-text p { display: flex; align-items: center; justify-content: center; gap: 14px; } html:not([data-style="ink"]) .welcome-text p::before, html:not([data-style="ink"]) .welcome-text p::after { content: ''; width: clamp(22px, 7vw, 44px); height: 1px; flex: none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--input-focus) 80%, transparent)); } html:not([data-style="ink"]) .welcome-text p::after { transform: scaleX(-1); } /* ── CLASSIC ── */ html:not([data-style]) .welcome-text h1.brand { font-size: clamp(54px, 15vw, 100px); font-weight: 700; letter-spacing: -0.015em; line-height: 1; background: linear-gradient(180deg, var(--text-primary) 35%, color-mix(in srgb, var(--text-primary) 62%, var(--bg)) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: brandAura 5s ease-in-out infinite; } html:not([data-style]) .welcome-text h1.brand span { -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; background: linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0) 58%), linear-gradient(100deg, var(--input-focus) 0%, var(--input-focus) 38%, color-mix(in srgb, var(--input-focus) 35%, #fff) 50%, var(--input-focus) 62%, var(--input-focus) 100%); background-size: 100% 100%, 300% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; animation: brandSweep 7s ease-in-out infinite; } /* ── SOFT: letters embossed out of the surface ── */ html[data-style="soft"] .welcome-text h1.brand { font-size: clamp(54px, 15vw, 100px); font-weight: 700; letter-spacing: 0; line-height: 1; animation: none; color: var(--bg); -webkit-text-fill-color: var(--bg); text-shadow: -3px -3px 6px var(--sh-l), 4px 4px 9px var(--sh-d); } html[data-style="soft"] .welcome-text h1.brand span { color: var(--input-focus); -webkit-text-fill-color: var(--input-focus); text-shadow: -3px -3px 6px var(--sh-l), 4px 4px 9px var(--sh-d), 0 0 22px color-mix(in srgb, var(--input-focus) 22%, transparent); } html[data-style="soft"][data-theme="light"] .welcome-text h1.brand { color: #4a5368; -webkit-text-fill-color: #4a5368; } html[data-style="soft"][data-theme="dark"] .welcome-text h1.brand { color: #d3d9e6; -webkit-text-fill-color: #d3d9e6; text-shadow: -2px -2px 5px rgba(255,255,255,.10), 4px 4px 9px rgba(0,0,0,.7); } /* ── GLASS: lowercase, airy, frosted ── */ html[data-style="glass"] .welcome-text h1.brand { text-transform: lowercase; font-size: clamp(54px, 15vw, 100px); font-weight: 400; letter-spacing: 0.05em; line-height: 1; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; animation: none; filter: drop-shadow(0 8px 22px color-mix(in srgb, var(--input-focus) 38%, transparent)); } html[data-style="glass"][data-theme="dark"] .welcome-text h1.brand { background-image: linear-gradient(180deg, rgba(255,255,255,.98) 10%, rgba(255,255,255,.55) 100%); } html[data-style="glass"][data-theme="light"] .welcome-text h1.brand { background-image: linear-gradient(180deg, #1d2a48 10%, #5a6a90 100%); } html[data-style="glass"] .welcome-text h1.brand span { -webkit-text-fill-color: transparent; color: transparent; text-shadow: none; font-weight: 700; background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 55%), linear-gradient(100deg, var(--input-focus) 0%, var(--input-focus) 38%, color-mix(in srgb, var(--input-focus) 30%, #fff) 50%, var(--input-focus) 62%, var(--input-focus) 100%); background-size: 100% 100%, 300% 100%; background-position: 0 0, 100% 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; animation: brandSweep 7s ease-in-out infinite; } /* ───────────── "I agree to the Rules" checkbox: clearly visible in every style ───────────── */ /* Soft: a pressed-in well; when ticked it turns into a raised accent tile */ html[data-style="soft"] .agree-box { width: 24px; height: 24px; border-radius: 8px; border: 0; background: var(--bg); box-shadow: inset 3px 3px 6px var(--sh-d), inset -3px -3px 6px var(--sh-l), 0 0 0 1.5px color-mix(in srgb, var(--text-muted) 60%, transparent); } html[data-style="soft"] .agree:hover .agree-box { box-shadow: inset 3px 3px 6px var(--sh-d), inset -3px -3px 6px var(--sh-l), 0 0 0 2px var(--input-focus); } html[data-style="soft"] .agree input:checked + .agree-box { background: var(--input-focus); border: 0; box-shadow: 3px 3px 8px var(--sh-d), -3px -3px 8px var(--sh-l); } html[data-style="soft"] .agree-box::after { border-color: var(--on-accent); width: 6px; height: 11px; } html[data-style="soft"] .agree input:focus-visible + .agree-box { box-shadow: 0 0 0 3px color-mix(in srgb, var(--input-focus) 55%, transparent); } /* Glass */ html[data-style="glass"] .agree-box { width: 22px; height: 22px; border: 1px solid var(--g-line); background: linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,.05)), var(--g-fill); box-shadow: inset 1px 2px 2px rgba(255,255,255,.7); } html[data-style="glass"] .agree input:checked + .agree-box { background: var(--input-focus); border-color: var(--input-focus); } html[data-style="glass"] .agree-box::after { border-color: var(--on-accent); } /* Ink */ html[data-style="ink"] .agree-box { width: 24px; height: 24px; border: 2.5px solid var(--ink); border-radius: 6px; background: var(--icon-bg); box-shadow: 2px 2px 0 var(--ink); } html[data-style="ink"] .agree input:checked + .agree-box { background: var(--input-focus); border-color: var(--ink); } html[data-style="ink"] .agree-box::after { border-color: #141414; border-width: 0 3px 3px 0; } /* ───────────── INK: Next / Start label stays dark and readable on the accent disc (also when the button lights up) ───────────── */ html[data-style="ink"] .disc-wrap.rise .disc-label span, html[data-style="ink"] .disc-wrap.rise:not(.not-ready) .disc-label span { color: #141414; text-shadow: none; } html[data-style="ink"] .disc-wrap.rise.not-ready .disc-label { opacity: 0.7; } /* ───────────── INK: Back button (centred with a transform, so its pressed state must keep the centring) ───────────── */ html[data-style="ink"] .back-btn:hover { background: var(--input-focus); color: #141414; border-color: var(--ink); } html[data-style="ink"] .back-btn:active { transform: translateX(-50%) translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); } /* Sound row inside the first-page / sign-up card: same spacing as the Accent and Style rows */ .palette-pre .pm-row { padding: 0 10px; min-height: 44px; } /* ═══════════════════════════════════════════════════════════════════════ FRIENDS (Friends row in the profile menu, Friends sheet, "Add friend" step after a great vibe) • .fr-badge number of waiting requests, on the "Friends" row of the profile menu • .pc-dot small dot on the profile chip, so a waiting request is noticed before the menu is opened • .fr-item one person (avatar, name, age · country, buttons). Buttons reuse .chip (primary) and .pill (other), so they already follow every style (Classic / Glass / Soft / Ink) and both themes. Per-style touches for the new boxes are at the very end of this block. ═══════════════════════════════════════════════════════════════════════ */ .fr-badge { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; line-height: 1; background: var(--input-focus); color: var(--on-accent, #10131a); } .pc-dot { position: absolute; left: 29px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--input-focus); border: 2px solid var(--bg); } /* green dot on the profile chip: at least one friend is online / in a game right now */ .pc-online { position: absolute; left: 30px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: #2ecc71; border: 2px solid var(--bg); box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); animation: pc-online-pulse 2s ease-out infinite; } @keyframes pc-online-pulse { 70% { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0); } 100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0); } } /* green dot next to "Friends" in the profile menu */ .fr-online { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 0 rgba(46, 204, 113, .6); animation: pc-online-pulse 2s ease-out infinite; } /* same dot on a friend's avatar in the Friends sheet (green = online, amber = in a game) CHANGE: the phase-2 values (12px, oklch colours) were merged in here; the second copy further down was removed. */ .fr-avatar { position: relative; } .fr-avatar.is-online::after, .fr-avatar.is-playing::after { content: ""; position: absolute; right: -2px; bottom: -2px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); background: oklch(72% 0.17 150); /* online = green */ } .fr-avatar.is-playing::after { background: oklch(78% 0.15 75); } /* in a game = amber */ .fr-body { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; } .fr-head { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 13px; letter-spacing: 0.06em; color: var(--text-muted); } .fr-head:first-child { margin-top: 0; } .fr-count { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--text-primary); background: color-mix(in srgb, var(--input-focus) 30%, transparent); } .fr-empty { padding: 12px 8px; font-size: 14px; line-height: 1.5; color: var(--text-muted); text-align: center; } .fr-item { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 12px; border-radius: 18px; border: 1.5px solid var(--input-border); background: var(--input-bg); } .fr-avatar { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 600; color: var(--text-primary); background: color-mix(in srgb, var(--input-focus) 30%, var(--icon-bg)); border: 1.5px solid var(--input-focus); } .fr-meta { flex: 1 1 110px; min-width: 0; } .fr-name { font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-sub { font-size: 13px; letter-spacing: 0.02em; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fr-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; } .fr-actions :is(.chip, .pill) { padding: 8px 13px; } .fr-actions button:disabled { opacity: 0.55; cursor: progress; } @media (max-width: 420px) { /* narrow phones: the buttons move under the name, lined up with it (38px avatar + 12px gap) */ .fr-actions { flex: 1 1 100%; margin-left: 50px; } } /* Soft: raised tiles */ html[data-style="soft"] .fr-item { border-color: transparent; box-shadow: 5px 5px 12px var(--sh-d), -5px -5px 12px var(--sh-l); } /* Glass: same bevel + frosted look as the other glass boxes */ html[data-style="glass"] .fr-item { background-color: var(--g-fill); border: 1px solid var(--g-line); -webkit-backdrop-filter: blur(6px) saturate(160%); backdrop-filter: blur(6px) saturate(160%); box-shadow: inset 1px 2px 2px rgba(255,255,255,.6), inset -1px -2px 3px rgba(255,255,255,.2), 0 10px 20px -10px var(--g-shadow); } /* Ink: outlined with a hard shadow, comic font for names */ html[data-style="ink"] .fr-item { border: 2.5px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); } html[data-style="ink"] .fr-avatar { border-color: var(--ink); background: var(--input-focus); color: #141414; } html[data-style="ink"] :is(.fr-badge, .pc-dot) { border: 2px solid var(--ink); color: #141414; } html[data-style="ink"] .fr-count { border: 2px solid var(--ink); background: var(--input-focus); color: #141414; } html[data-style="ink"] :is(.fr-name, .fr-head) { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.07em; font-size: 17px; } html[data-style="ink"] .fr-sub { font-weight: 600; } html[data-style="ink"] .fr-actions :is(.chip, .pill) { padding: 7px 11px; font-size: 15px; } /* keeps 3 buttons on one line */ /* ═══════════════════════════════════════════════════════════════════════ FRIENDS · PHASE 2 (online status, Challenge button, challenge banner) • .fr-avatar.is-online / .is-playing small status dot on a friend's avatar (no dot = offline) • .fr-pick "Play: Chess / Backgammon" row that opens under a friend • .ch-banner "Nora challenges you to Chess" card at the top, with Accept / Decline Buttons reuse .chip / .pill, so they follow every style and both themes. Per-style touches are at the end. ═══════════════════════════════════════════════════════════════════════ */ /* (the avatar status dot is defined once, in the first friends block above) */ .fr-actions .chip:disabled, .fr-actions .pill:disabled { cursor: not-allowed; opacity: 0.5; } .fr-pick { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding-top: 8px; border-top: 1px dashed var(--input-border); } .fr-pick-label { font-size: 13px; letter-spacing: 0.04em; color: var(--text-muted); margin-right: 2px; } .fr-pick :is(.chip, .pill) { padding: 8px 14px; } .ch-banner { position: fixed; z-index: 120; left: 50%; top: max(12px, env(safe-area-inset-top, 0px)); transform: translateX(-50%); width: min(440px, calc(100vw - 24px)); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 12px; border-radius: 20px; border: 1.5px solid var(--input-focus); background: var(--bg); color: var(--text-primary); box-shadow: 0 12px 30px -10px var(--neon-glow-soft), 0 0 0 4px color-mix(in srgb, var(--input-focus) 18%, transparent); animation: chIn 0.35s var(--ease-reveal, ease-out); } @keyframes chIn { from { opacity: 0; transform: translate(-50%, -14px); } to { opacity: 1; transform: translate(-50%, 0); } } .ch-text { flex: 1 1 120px; min-width: 0; } .ch-actions { display: flex; gap: 6px; margin-left: auto; } .ch-actions :is(.chip, .pill) { padding: 8px 14px; } .ch-actions button:disabled { opacity: 0.55; cursor: progress; } @media (max-width: 420px) { .ch-actions { flex: 1 1 100%; margin-left: 50px; } } /* Soft */ html[data-style="soft"] .ch-banner { border-color: transparent; box-shadow: 8px 8px 20px var(--sh-d), -6px -6px 18px var(--sh-l); } /* Glass */ html[data-style="glass"] .ch-banner { background-color: var(--g-fill); border: 1px solid var(--g-line); -webkit-backdrop-filter: blur(14px) saturate(180%); backdrop-filter: blur(14px) saturate(180%); box-shadow: inset 1px 2px 2px rgba(255,255,255,.6), 0 18px 36px -12px var(--g-shadow); } /* Ink */ html[data-style="ink"] .ch-banner { border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); } html[data-style="ink"] .fr-avatar.is-online::after, html[data-style="ink"] .fr-avatar.is-playing::after { border-color: var(--ink); } html[data-style="ink"] .fr-pick { border-top: 2.5px dashed var(--ink); } html[data-style="ink"] .ch-actions :is(.chip, .pill) { padding: 7px 11px; font-size: 15px; } /* ── Legal links (footer), legal sheet tabs, placeholders in the draft legal text ── */ .legal-links { position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 6px); z-index: 5; display: flex; justify-content: center; gap: 4px; pointer-events: none; } .legal-links button { pointer-events: auto; background: none; border: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--text-muted); padding: 8px 10px; min-height: 32px; opacity: .8; } .legal-links button:hover, .legal-links button:focus-visible { color: var(--text-primary); opacity: 1; text-decoration: underline; } .legal-tabs { display: flex; gap: 8px; justify-content: center; margin: 0 0 12px; } .legal-body .legal-pane[hidden] { display: none; } mark.todo { background: #fde68a; color: #1a1a1a; border-radius: 3px; padding: 0 3px; } /* ── Report sheet + new-password sheet: above the game page; the details box looks like the other inputs ── */ #report-sheet, #reset-sheet { z-index: 200; } #report-details { width: 100%; resize: vertical; min-height: 84px; font: inherit; font-size: 14px; line-height: 1.45; padding: 12px 14px; } #report-reasons { justify-content: center; margin-bottom: 12px; }