/* Shared design tokens + base styles across Parlour Games */ :root { --bg: #f4ecdc; --bg-2: #ebe0c8; --paper: #fbf6ea; --ink: #1c2a3a; --ink-soft: #3a4a5e; --muted: #7a7565; --line: #d6c8a8; --line-strong: #1f3a5f; --accent: #1f3a5f; --accent-2: #2d5a8c; --accent-soft: #f4e3b2; --danger: #c0392b; --success: #2e7d4f; --shadow: 0 1px 0 rgba(31, 58, 95, 0.08), 0 18px 40px -22px rgba(31, 58, 95, 0.35); --shadow-lift: 0 1px 0 rgba(31, 58, 95, 0.08), 0 28px 50px -22px rgba(31, 58, 95, 0.45); --radius: 14px; --tap: 44px; /* min tap target */ --hero-glow-1: #f9efd6; --hero-glow-2: #efe2c2; color-scheme: light; } /* Dark theme — applied when [data-theme="dark"] is set on by shared.js. Auto-detects via prefers-color-scheme too. */ :root[data-theme="dark"] { --bg: #11161f; --bg-2: #1a2230; --paper: #1d2535; --ink: #ecedf2; --ink-soft: #b7bcd1; --muted: #8a90a6; --line: #2a334a; --line-strong: #6892d4; --accent: #6ea8ff; --accent-2: #8fbdff; --accent-soft: #2a3a5e; --danger: #ff7a6b; --success: #6dd09a; --shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 18px 40px -22px rgba(0, 0, 0, 0.7); --shadow-lift: 0 1px 0 rgba(0, 0, 0, 0.4), 0 28px 50px -22px rgba(0, 0, 0, 0.8); --hero-glow-1: #1d2a45; --hero-glow-2: #16243a; color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: radial-gradient(1200px 600px at 10% -10%, var(--hero-glow-1) 0%, transparent 60%), radial-gradient(900px 500px at 110% 10%, var(--hero-glow-2) 0%, transparent 55%), var(--bg); color: var(--ink); min-height: 100vh; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color 200ms ease, color 200ms ease; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-2); } .shell { max-width: 1100px; margin: 0 auto; padding: 28px 22px 60px; } /* Site header — shared across hub + game pages */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .site-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); flex: 0 0 auto; } .site-brand:hover { color: var(--ink); } .site-logo { width: 38px; height: 38px; color: var(--accent); } .site-brand-text { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 22px; letter-spacing: -0.01em; line-height: 1; } .site-brand-text small { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-top: 4px; } /* Right-side cluster: nav + utility buttons */ .header-tools { display: flex; align-items: center; gap: 8px; flex: 0 1 auto; } .nav-links { display: flex; gap: 6px; align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: 4px; box-shadow: var(--shadow); flex-wrap: wrap; max-width: 100%; } .nav-link { font: 600 13px 'Inter', sans-serif; color: var(--ink-soft); padding: 7px 14px; border-radius: 999px; transition: background 160ms ease, color 160ms ease; white-space: nowrap; } .nav-link:hover { color: var(--ink); background: var(--accent-soft); } .nav-link.is-active { background: var(--accent); color: var(--paper); } .nav-link.is-active:hover { color: var(--paper); background: var(--accent); } /* Icon buttons in the header (fullscreen, menu, install) */ .icon-btn { appearance: none; width: 40px; height: 40px; min-width: 40px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); transition: background 160ms ease, color 160ms ease, transform 120ms ease; } .icon-btn:hover { background: var(--accent-soft); } .icon-btn:active { transform: translateY(1px); } .icon-btn svg { width: 18px; height: 18px; } .icon-btn[hidden] { display: none !important; } /* Language picker */ .lang-wrap { position: relative; display: inline-flex; } .lang-btn { font-family: 'Inter', sans-serif; font-size: 13px; padding: 0 10px; gap: 6px; min-width: 40px; } .lang-btn .lang-code { font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .lang-menu { position: absolute; top: calc(100% + 6px); right: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 6px; min-width: 180px; z-index: 1000; max-height: min(70vh, 460px); overflow-y: auto; } .lang-menu[hidden] { display: none; } .lang-menu button { width: 100%; text-align: start; background: transparent; border: 0; padding: 9px 12px; border-radius: 8px; font: 500 13px 'Inter', sans-serif; color: var(--ink); cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lang-menu button:hover { background: var(--accent-soft); } .lang-menu button.is-active { background: var(--accent); color: var(--paper); } .lang-menu .lang-name { flex: 1; } .lang-menu .lang-sub { font-size: 11px; opacity: 0.7; } .lang-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 2px; } [dir="rtl"] .lang-menu { right: auto; left: 0; } /* Theme toggle icons */ .theme-btn .theme-icon { display: none; width: 18px; height: 18px; } .theme-btn[data-mode="light"] .theme-icon-sun { display: inline-block; } .theme-btn[data-mode="dark"] .theme-icon-moon { display: inline-block; } .theme-btn[data-mode="auto"] .theme-icon-auto { display: inline-block; } /* When data-mode isn't set yet, show the auto half-circle */ .theme-btn:not([data-mode]) .theme-icon-auto { display: inline-block; } /* Buttons used across pages */ .btn { appearance: none; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 10px; padding: 11px 14px; font: 600 14px 'Inter', sans-serif; cursor: pointer; transition: background 160ms ease, transform 120ms ease, color 160ms ease; min-height: var(--tap); } .btn:hover { background: var(--accent-soft); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-2); color: var(--paper); } .btn-ghost { background: transparent; border-color: transparent; color: var(--ink-soft); } .btn-ghost:hover { background: var(--accent-soft); color: var(--ink); } .foot { margin-top: 32px; text-align: center; color: var(--muted); font-size: 12px; } .foot-link { display: inline; margin-left: 10px; padding: 0; background: none; border: none; color: var(--muted); font: inherit; font-size: 12px; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color 0.15s ease; } .foot-link:hover { color: var(--ink); } .foot-link:focus-visible { outline: 2px solid var(--accent, #1f3a5f); outline-offset: 3px; border-radius: 3px; } /* ─── Shared micro-animations ─────────────────────────────────────────── Subtle motion that makes every page feel alive without being showy. Respects prefers-reduced-motion for accessibility. */ /* Soft entrance for every page's main content */ @keyframes gr-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } body > .wrap, body > main, body > .app, body > .stage { animation: gr-fade-in 320ms ease-out both; } /* Button press feedback — works with .btn, .chip, .icon-btn */ .btn, .chip, .icon-btn, button { transition: transform 120ms ease-out, box-shadow 160ms ease-out, background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out; } .btn:active, .chip:active, .icon-btn:active, button:active { transform: translateY(1px) scale(0.985); } /* Focus ring — quietly draws attention for keyboard users */ @keyframes gr-focus-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 58, 95, 0.35); } 100% { box-shadow: 0 0 0 6px rgba(31, 58, 95, 0.00); } } .btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible { animation: gr-focus-pulse 600ms ease-out; } /* Win pulse — any game can add .win-pulse to its result element */ @keyframes gr-win-pulse { 0% { transform: scale(1); filter: brightness(1); } 40% { transform: scale(1.04); filter: brightness(1.06); } 100% { transform: scale(1); filter: brightness(1); } } .win-pulse { animation: gr-win-pulse 620ms ease-out; } /* Toast entrance — upgrade the existing .gr-toast if used */ .gr-toast { transition: opacity 220ms ease-out, transform 260ms ease-out; } .gr-toast[data-show="true"] { transform: translateX(-50%) translateY(0); } .gr-toast[data-show="false"] { transform: translateX(-50%) translateY(8px); } /* Accessibility: honour reduced-motion */ @media (prefers-reduced-motion: reduce) { body > .wrap, body > main, body > .app, body > .stage { animation: none; } .btn, .chip, .icon-btn, button { transition: none; } .btn:active, .chip:active, .icon-btn:active, button:active { transform: none; } .btn:focus-visible, .chip:focus-visible, .icon-btn:focus-visible { animation: none; } .win-pulse { animation: none; } } /* ─── FULLSCREEN MODE ───────────────────────────────────────────────── When body has data-fullscreen="true" (or :fullscreen is active), hide chrome and let the play surface fill the viewport. */ .fs-exit { position: fixed; top: 12px; right: 12px; z-index: 1000; width: 40px; height: 40px; border-radius: 999px; background: rgba(28, 42, 58, 0.85); color: #fff; border: 0; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .fs-exit svg { width: 18px; height: 18px; } body[data-fullscreen="true"] .fs-exit { display: inline-flex; } body[data-fullscreen="true"] .site-header, body[data-fullscreen="true"] .page-head, body[data-fullscreen="true"] .aside-info, body[data-fullscreen="true"] .foot, body[data-fullscreen="true"] .hero, body[data-fullscreen="true"] .controls, body[data-fullscreen="true"] .filter-row { display: none !important; } /* Hide any direct child of .shell that isn't the play area (catches custom sections). */ body[data-fullscreen="true"] .shell > *:not(.play):not(script) { display: none !important; } body[data-fullscreen="true"] .shell { max-width: 100%; padding: 0; } body[data-fullscreen="true"] .play { border-radius: 0; border: 0; box-shadow: none; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: clamp(8px, 2vw, 24px); } /* Hub fullscreen: show games grid prominently */ body[data-fullscreen="true"] .games-grid { padding: clamp(12px, 3vw, 32px); } /* Toast for hints (bookmark instructions, etc.) */ .gr-toast { position: fixed; bottom: max(20px, env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%) translateY(20px); background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 10px; font-size: 14px; font-weight: 500; box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4); opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease; z-index: 1000; max-width: 90vw; text-align: center; line-height: 1.4; } .gr-toast[data-show="true"] { opacity: 1; transform: translateX(-50%) translateY(0); } /* ─── MOBILE LAYOUT ─────────────────────────────────────────────────── */ @media (max-width: 760px) { .shell { padding: 16px 12px 40px; } .site-header { gap: 8px; } .site-brand-text { font-size: 18px; } .site-brand-text small { font-size: 10px; letter-spacing: 0.14em; } .site-logo { width: 32px; height: 32px; } .icon-btn { width: 38px; height: 38px; min-width: 38px; } .nav-link { padding: 6px 12px; font-size: 12px; } } @media (max-width: 400px) { .site-brand-text small { display: none; } } /* ─── UX v5: usability pass ───────────────────────────────────────── Shared improvements landing across all 25 games: - Larger tap targets on coarse pointers (touch devices) - Global visible focus ring - Motion-reduce respect - Horizontal scroll containers for wide game boards - Segmented control minimums */ /* Universal focus ring — 2px outline w/ offset, colour follows accent */ :where(button, [role="button"], a, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--line-strong); outline-offset: 2px; border-radius: 8px; } /* Respect the user's reduced-motion preference */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* Coarse-pointer devices (phones, tablets) — enforce ≥40px tap targets on the small "pill" and "chip" style controls used across games. */ @media (pointer: coarse), (max-width: 760px) { .opt, .seg-btn, .diff-btn { min-height: 40px; padding: 8px 14px; font-size: 13px; } /* Selects and native controls should also be reachable */ select, input[type="text"], input[type="number"] { min-height: 40px; } } /* Board scroll — for games whose board is wider than the mobile viewport (FreeCell, Spider, Battleships, Mahjong, Nonograms, Solitaire, etc.). Add class .board-scroll on the wrapping element to opt in. */ .board-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line) transparent; scroll-snap-type: x proximity; padding-bottom: 4px; } .board-scroll::-webkit-scrollbar { height: 6px; } .board-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; } .board-scroll::-webkit-scrollbar-track { background: transparent; } /* Small helper — allows a game to hint that a board is horizontally scrollable */ .scroll-hint { position: relative; } .scroll-hint::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 22px; pointer-events: none; background: linear-gradient(to left, var(--paper), transparent); opacity: 0; transition: opacity 200ms ease; } .scroll-hint[data-can-scroll="true"]::after { opacity: 1; } /* Selection highlight token — for games that highlight a picked piece / card. */ .is-selected { outline: 2px solid var(--accent); outline-offset: -2px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); } /* Legal-move dot — for chess, draughts, reversi (data-legal="true") */ [data-legal="true"]::before { content: ""; position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: 28%; aspect-ratio: 1; border-radius: 999px; background: color-mix(in srgb, var(--accent) 55%, transparent); pointer-events: none; } [data-legal="capture"]::before { content: ""; position: absolute; inset: 4%; border-radius: 999px; border: 3px solid color-mix(in srgb, var(--danger) 65%, transparent); background: transparent; pointer-events: none; } /* Toolbar helper — for game top-bars that want to wrap gracefully. */ .tool-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }