/* ========================================================================== Gateway Themes — "Cribbage Den" web editions -------------------------------------------------------------------------- Admin-selectable reskins of the gateway page, styled after the iOS gateway themes (DenThemeKit): deep green felt, warm walnut wood, soft brass, cream and serif type. One theme class goes on (plus the marker class `gw-themed`), e.g. . - Desktop themes use the `gw-desk-` prefix, mobile themes `gw-mob-`. Selection + persistence (per device type) live in gateway-script.js; the saved theme is applied before first paint by the inline script in gateway.html . - Every theme carries a hero badge naming it as the web version (--gw-web-label rendered into .gw-web-badge::before). - The shared base below maps a small set of --gw-* variables onto every gateway surface; each theme block only supplies palette values (plus the occasional flourish). Modals deliberately keep their default white styling so forms stay readable on every theme. ========================================================================== */ /* -------------------------------------------------------------------------- Shared base — den defaults (deep felt + brass), all surface mappings -------------------------------------------------------------------------- */ html.gw-themed { --gw-serif: Georgia, 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif; --gw-web-label: 'Web Edition'; /* Palette (defaults = Emerald Felt) */ --gw-bg: #0f2013; --gw-surface: #1c3a23; --gw-surface-2: #16301c; --gw-border: rgba(201, 165, 90, 0.28); --gw-text: #f2e8d5; --gw-muted: rgba(242, 232, 213, 0.68); --gw-heading: #e6c982; --gw-ink: #241505; --gw-accent: #c9a55a; --gw-accent-light: #e6c982; --gw-accent-dark: #8a6a30; --gw-primary: #2f5a3a; --gw-secondary: #5f3b1f; --gw-hero-bg: radial-gradient(circle at 50% 18%, rgba(230, 201, 130, 0.16), transparent 55%), linear-gradient(180deg, #2f5a3a 0%, #1c3a23 55%, #102415 100%); --gw-hero-text: #f2e8d5; --gw-footer-bg: #0b190e; --gw-footer-text: #f2e8d5; --gw-profile-grad: linear-gradient(135deg, #2f5a3a 0%, #16301c 100%); --gw-btn-a: #e6c982; --gw-btn-b: #c9a55a; --gw-btn-text: #241505; --gw-btn-border: rgba(138, 106, 48, 0.6); --gw-btn2-a: #7d5028; --gw-btn2-b: #5f3b1f; --gw-btn2-text: #f2e8d5; --gw-hover: rgba(201, 165, 90, 0.1); --gw-track: rgba(0, 0, 0, 0.3); --gw-badge-bg: rgba(0, 0, 0, 0.18); /* Remap the legacy palette so small one-off usages follow the theme */ --background: var(--gw-bg); --light-text: var(--gw-muted); --primary-color: var(--gw-primary); --secondary-color: var(--gw-secondary); --accent-color: var(--gw-accent); } html.gw-themed body { background-color: var(--gw-bg); color: var(--gw-text); } /* Den typography — heavy serif display, like the iOS DenTitleBlock */ html.gw-themed .hero-title, html.gw-themed .section-title, html.gw-themed .play-card h3, html.gw-themed .guide-overview h3, html.gw-themed .guide-card h4, html.gw-themed .cribbage-board-info h3, html.gw-themed .leaderboard-title, html.gw-themed .profile-username, html.gw-themed .btn { font-family: var(--gw-serif); } /* Hero */ html.gw-themed .hero-section { background: var(--gw-hero-bg); color: var(--gw-hero-text); } html.gw-themed .hero-subtitle { color: var(--gw-hero-text); opacity: 0.85; } /* Gold suit divider under the subtitle, like the iOS GoldSuitDivider. Each suit carries U+FE0E (text-presentation selector) — without it mobile browsers render the hearts/diamonds as red emoji instead of taking the gold CSS color the desktop and iOS versions show. */ html.gw-themed .hero-subtitle::after { content: '\2660\FE0E \2665\FE0E \2666\FE0E \2663\FE0E'; display: block; margin-top: 14px; font-size: 0.95rem; letter-spacing: 10px; color: var(--gw-accent-light); opacity: 0.9; text-shadow: none; } /* Sign-in hint takes the theme's brass/gold tint, like the iOS GatewaySignInHint (tint at 0.7 opacity). */ html.gw-themed .hero-signin-hint { color: var(--gw-accent-light); opacity: 0.78; } html.gw-themed .hero-signin-hint:hover { color: var(--gw-accent-light); opacity: 1; } /* The two parchment ledger themes are the only ones with a LIGHT hero, so the white top-right Login capsule washes out there — flip it to dark ink, the same way iOS keys ProfileMenuView off hasLightBackground. */ html.gw-desk-ledger .nav-login-btn, html.gw-mob-pocket-ledger .nav-login-btn { color: #241505; background: rgba(36, 21, 5, 0.08); border-color: rgba(36, 21, 5, 0.4); } html.gw-desk-ledger .nav-login-btn:hover, html.gw-mob-pocket-ledger .nav-login-btn:hover { background: rgba(36, 21, 5, 0.16); } /* Web-edition badge — brass capsule kicker above the hero title. Hidden unless a theme is active; each theme names itself via --gw-web-label so the "web version" fact is always on screen. */ .gw-web-badge { display: none; } html.gw-themed .gw-web-badge { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 18px; padding: 7px 18px; border: 1px solid var(--gw-accent); border-radius: 999px; background: var(--gw-badge-bg); color: var(--gw-accent-light); font-family: var(--gw-serif); font-size: 0.78rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; } html.gw-themed .gw-web-badge::before { content: var(--gw-web-label, 'Web Edition'); } /* Navigation */ html.gw-themed .main-nav { background-color: var(--gw-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } html.gw-themed .nav-link { color: var(--gw-text); } html.gw-themed .nav-link:hover, html.gw-themed .nav-link.active { background-color: var(--gw-accent); color: var(--gw-ink); } html.gw-themed .nav-toggle span { background-color: var(--gw-accent-light); } html.mobile-device.gw-themed .nav-menu { background-color: var(--gw-surface); } html.mobile-device.gw-themed .nav-link { border-color: var(--gw-border); } html.mobile-device.gw-themed .nav-user { border-bottom-color: var(--gw-border); } /* Play section */ html.gw-themed .play-section { background-color: var(--gw-surface); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25); } html.gw-themed .section-title { color: var(--gw-heading); } html.gw-themed .play-card { background-color: var(--gw-surface-2); border-color: var(--gw-border); } html.gw-themed .play-card:hover { border-color: var(--gw-accent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); } html.gw-themed .play-card h3 { color: var(--gw-heading); } html.gw-themed .play-card p { color: var(--gw-muted); } html.gw-themed .login-note { background-color: var(--gw-surface-2); border-color: var(--gw-border); color: var(--gw-muted); } /* Guide + stats sections sit directly on the page background */ html.gw-themed .guide-section, html.gw-themed .stats-section { background-color: transparent; } /* Installed-PWA mode (gateway-styles.css "display-mode: standalone" block) force-whites .main-content, which the transparent sections above would otherwise show through instead of the themed page background. */ html.gw-themed .main-content { background-color: var(--gw-bg); } html.gw-themed .guide-overview, html.gw-themed .guide-card { background-color: var(--gw-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); } html.gw-themed .guide-overview h3, html.gw-themed .guide-card h4, html.gw-themed .guide-card strong { color: var(--gw-heading); } html.gw-themed .guide-overview p { color: var(--gw-muted); } html.gw-themed .guide-card li { color: var(--gw-text); border-bottom-color: var(--gw-border); } html.gw-themed .guide-icon { background-color: var(--gw-accent); color: var(--gw-ink); } html.gw-themed .cribbage-board-info h3 { color: var(--gw-heading); } html.gw-themed .board-description p { color: var(--gw-muted); } /* The board PNG relies on mix-blend-mode: multiply against a light page; give it a cream mat so it reads like a board on the table everywhere. */ html.gw-themed .board-image { background: #f2e8d5; border-radius: 10px; padding: 10px 14px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); } /* Stats dashboard */ html.gw-themed .player-profile-card { background: var(--gw-profile-grad); } html.gw-themed .stats-detail-card { background: var(--gw-surface); border-color: var(--gw-border); } html.gw-themed .detail-card-header { border-bottom-color: var(--gw-border); } html.gw-themed .detail-card-header h4 { color: var(--gw-text); } html.gw-themed .detail-stat, html.gw-themed .win-rate-display { background: var(--gw-surface-2); } html.gw-themed .multiplayer-card .detail-value, html.gw-themed .computer-card .detail-value, html.gw-themed .multiplayer-card .win-rate-value, html.gw-themed .computer-card .win-rate-value { color: var(--gw-heading); } html.gw-themed .detail-card-footer { background: var(--gw-surface-2); border-top-color: var(--gw-border); } html.gw-themed .progress-bar-container { background: var(--gw-track); } html.gw-themed .multiplayer-progress { background: linear-gradient(90deg, var(--gw-accent-dark), var(--gw-accent-light)); } html.gw-themed .computer-progress { background: linear-gradient(90deg, var(--gw-primary), var(--gw-accent)); } /* Leaderboard */ html.gw-themed .leaderboard-container { background-color: var(--gw-surface); } html.gw-themed .leaderboard-header { background: var(--gw-profile-grad); color: var(--gw-text); } html.gw-themed .leaderboard-title { color: var(--gw-heading); } html.gw-themed .leaderboard-subtitle { color: var(--gw-muted); } html.gw-themed .leaderboard-item { color: var(--gw-text); border-bottom-color: var(--gw-border); } html.gw-themed .leaderboard-item:hover, html.gw-themed .leaderboard-item.current-user { background: var(--gw-hover); } /* Buttons — brass "gold" primary and wood-plank secondary, like the iOS DenActionButton materials */ html.gw-themed .btn-primary { background: linear-gradient(180deg, var(--gw-btn-a), var(--gw-btn-b)); color: var(--gw-btn-text); border: 1px solid var(--gw-btn-border); text-shadow: none; } html.gw-themed .btn-primary:hover:not(:disabled) { background: linear-gradient(180deg, var(--gw-btn-a), var(--gw-btn-a)); color: var(--gw-btn-text); } html.gw-themed .btn-secondary { background: linear-gradient(180deg, var(--gw-btn2-a), var(--gw-btn2-b)); color: var(--gw-btn2-text); border: 1px solid var(--gw-btn-border); } html.gw-themed .btn-secondary:hover:not(:disabled) { background: linear-gradient(180deg, var(--gw-btn2-a), var(--gw-btn2-a)); } html.gw-themed .btn-outline { background-color: transparent; color: var(--gw-accent-light); border-color: var(--gw-accent); } html.gw-themed .btn-outline:hover:not(:disabled) { background-color: var(--gw-accent); color: var(--gw-ink); } /* Inside white modals the pale brass outline would wash out — use the darker brass there. Modals otherwise keep their default styling. */ html.gw-themed .modal-content .btn-outline { color: var(--gw-accent-dark); border-color: var(--gw-accent-dark); } html.gw-themed .modal-content .btn-outline:hover:not(:disabled) { background-color: var(--gw-accent-dark); color: #ffffff; } /* Modals (Create Game, Join Game, Profile, etc.) intentionally keep their default light styling on every theme so forms stay readable — but some base rules (.game-type-card p, .modal-close, .modal-header h3) read color through the legacy custom-property remap at the top of this file, which points --light-text/--primary-color etc. at colors meant for this theme's dark surfaces. On the white modal background that goes near-invisible (light text on white). Reset those variables back to their un-themed values for anything inside .modal-content. */ html.gw-themed .modal-content { --background: #f8f9fa; --light-text: #666; --primary-color: #2c5234; --secondary-color: #8B4513; --accent-color: #ffd700; } html.gw-themed .modal-close:hover { background-color: #ececec; color: #333333; } /* Footer */ html.gw-themed .main-footer { background-color: var(--gw-footer-bg); color: var(--gw-footer-text); } /* ========================================================================== Current iOS Theme (gw-desk-ios-den / gw-mob-ios-den) -------------------------------------------------------------------------- The one deliberately MATCHED desktop/mobile pair: a faithful port of the iOS app's default gateway (CribbageDen2GatewayView + FeltBackground) — same brand palette (#2c5234 green, #8B4513 brown, #ffd700 gold), the felt backdrop with the warm "lit window" glow, the wood-sign badge, and the gold uppercase kicker over a white serif title. Desktop simply renders it at a larger scale. ========================================================================== */ html.gw-desk-ios-den, html.gw-mob-ios-den { --gw-bg: #142a19; --gw-surface: #1c3a23; --gw-surface-2: #16301c; --gw-border: rgba(255, 215, 0, 0.28); --gw-text: #f5f1e6; --gw-muted: rgba(245, 241, 230, 0.7); --gw-heading: #ffd700; --gw-accent: #ffd700; --gw-accent-light: #ffe066; --gw-accent-dark: #b39700; --gw-primary: #2c5234; --gw-secondary: #8B4513; /* FeltBackground: gold glow at (0.5, 0.28), #1c3a23 → brand green → #163019 vertical felt, settled by a soft vignette */ --gw-hero-bg: radial-gradient(circle at 50% 28%, rgba(255, 215, 0, 0.22), transparent 45%), radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, 0.28) 100%), linear-gradient(180deg, #1c3a23 0%, #2c5234 55%, #163019 100%); --gw-hero-text: #ffffff; --gw-footer-bg: #122417; --gw-profile-grad: linear-gradient(135deg, #2c5234 0%, #163019 100%); --gw-btn-a: #ffe066; --gw-btn-b: #ffd700; --gw-btn-text: #241505; --gw-btn-border: rgba(179, 151, 0, 0.6); --gw-btn2-a: #a3591f; --gw-btn2-b: #8B4513; --gw-btn2-text: #ffffff; --gw-hover: rgba(255, 215, 0, 0.1); } html.gw-desk-ios-den { --gw-web-label: 'Web Edition'; } html.gw-mob-ios-den { --gw-web-label: 'Mobile Web Version'; } /* Desktop variant: stack the sign badge above the title like the mobile layout does, instead of beside it. */ html.gw-desk-ios-den .hero-content { flex-direction: column; gap: 28px; } /* The board PNG is genuinely transparent outside the wood frame — drop the cream "mat" and multiply blend (added for lighter themes) so it sits directly on this theme's felt, matching the green around it. */ html.gw-desk-ios-den .board-image, html.gw-mob-ios-den .board-image { background: transparent; padding: 0; box-shadow: none; } html.gw-desk-ios-den .mini-board, html.gw-mob-ios-den .mini-board { mix-blend-mode: normal; filter: none; } /* Player names and win counts default to un-themed dark text (they set their own color rather than inheriting the leaderboard row's), which is unreadable on this theme's dark green surface. */ html.gw-desk-ios-den .leaderboard-name, html.gw-mob-ios-den .leaderboard-name { color: var(--gw-text); } html.gw-desk-ios-den .leaderboard-wins, html.gw-mob-ios-den .leaderboard-wins { color: var(--gw-heading); } /* Fixed top-right nav avatar — outline it in the same gold used for the hero badge/wood-sign border elsewhere in this theme, instead of the base translucent white ring. */ html.gw-desk-ios-den .profile-avatar--nav, html.gw-mob-ios-den .profile-avatar--nav { border-color: var(--gw-accent); } /* Wood-sign badge above the title — the app-icon sign with the same brass edge and warm gold lift the iOS signBadge() uses. The .hero-image div is empty and hidden by default; this theme turns it into the sign. */ html.gw-desk-ios-den .hero-image, html.gw-mob-ios-den .hero-image { display: block; width: 122px; height: 122px; margin: 0 auto; background: url('cribbage-den-sign.png') center / cover no-repeat; border-radius: 22%; border: 1.5px solid rgba(255, 215, 0, 0.55); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45), 0 0 24px rgba(255, 215, 0, 0.35); flex-shrink: 0; } html.mobile-device.gw-mob-ios-den .hero-image { display: none; } /* Desktop only: drop the small sign badge and use the iOS app's landscape launch-screen photo as the hero background instead of the plain gradient. The wood sign in the middle of that photo is edited out (replaced with matching felt) since it would collide with the title text, but the card/cribbage-board corner decorations are kept. */ html.gw-desk-ios-den .hero-image { display: none; } html.gw-desk-ios-den .hero-section { background: url('cribbage-den-hero-bg.jpg') center / cover no-repeat; } /* Title block like the iOS DenTitleBlock: small gold uppercase kicker ("Welcome to") stacked over the heavy white serif "Cribbage Den". */ html.gw-desk-ios-den .hero-title, html.gw-mob-ios-den .hero-title { flex-direction: column; gap: 8px; align-items: center; } html.gw-desk-ios-den .hero-title-line-1, html.gw-mob-ios-den .hero-title-line-1 { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 0.95rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: rgba(255, 215, 0, 0.9); text-shadow: none; } html.gw-desk-ios-den .hero-title-line-2, html.gw-mob-ios-den .hero-title-line-2 { color: #ffffff; } /* The "Play Cribbage Online" section duplicates the Create/Join Game buttons already in the hero — drop it (and its nav/footer entries) on this theme only. */ html.gw-desk-ios-den .play-section, html.gw-mob-ios-den .play-section, html.gw-desk-ios-den .nav-link[href="#play"], html.gw-mob-ios-den .nav-link[href="#play"] { display: none; } /* ========================================================================== Desktop themes (gw-desk-*) ========================================================================== */ /* ── Walnut Lounge — warm walnut wood, brass trim, cream lettering ─────── */ html.gw-desk-walnut-lounge { --gw-web-label: 'Walnut Lounge · Web Edition'; --gw-bg: #201207; --gw-surface: #2e1c0e; --gw-surface-2: #3b2513; --gw-border: rgba(230, 201, 130, 0.22); --gw-heading: #e6c982; --gw-primary: #7d5028; --gw-secondary: #4a2d18; --gw-hero-bg: radial-gradient(circle at 50% 15%, rgba(230, 201, 130, 0.14), transparent 55%), linear-gradient(160deg, #4a2d18 0%, #2e1c0e 60%, #201207 100%); --gw-footer-bg: #170d04; --gw-profile-grad: linear-gradient(135deg, #5f3b1f 0%, #2e1c0e 100%); --gw-btn2-a: #2f5a3a; --gw-btn2-b: #1c3a23; } /* ── Emerald Felt — the classic den card table (base palette) ──────────── */ html.gw-desk-emerald-felt { --gw-web-label: 'Emerald Felt · Web Edition'; } /* ── Midnight Den — near-black felt, amber lamplight ───────────────────── */ html.gw-desk-midnight-den { --gw-web-label: 'Midnight Den · The Web After Dark'; --gw-bg: #07120a; --gw-surface: #0d1f12; --gw-surface-2: #122619; --gw-border: rgba(255, 184, 77, 0.24); --gw-text: #efe6d0; --gw-muted: rgba(239, 230, 208, 0.62); --gw-heading: #ffd08a; --gw-accent: #ffb84d; --gw-accent-light: #ffd08a; --gw-accent-dark: #b97f2e; --gw-primary: #1c3a23; --gw-hero-bg: radial-gradient(circle at 50% 8%, rgba(255, 184, 77, 0.18), transparent 50%), linear-gradient(180deg, #0d1f12 0%, #07120a 70%, #040a06 100%); --gw-footer-bg: #040a06; --gw-profile-grad: linear-gradient(135deg, #16301c 0%, #07120a 100%); --gw-btn-a: #ffd08a; --gw-btn-b: #ffb84d; --gw-btn-border: rgba(185, 127, 46, 0.6); --gw-hover: rgba(255, 184, 77, 0.1); } /* ── Brass & Baize — felt table dressed in heavy polished brass ────────── */ html.gw-desk-brass-baize { --gw-web-label: 'Brass & Baize · Web Edition'; --gw-border: rgba(201, 165, 90, 0.5); --gw-hero-bg: radial-gradient(circle at 22% 20%, rgba(230, 201, 130, 0.2), transparent 45%), radial-gradient(circle at 78% 30%, rgba(230, 201, 130, 0.14), transparent 45%), linear-gradient(180deg, #2f5a3a 0%, #1c3a23 55%, #102415 100%); } html.gw-desk-brass-baize .section-title { text-transform: uppercase; letter-spacing: 4px; font-size: 2rem; } html.gw-desk-brass-baize .play-card, html.gw-desk-brass-baize .stats-detail-card { border-width: 2px; } /* ── The Card Room — cream daylight room, felt-green trim (light) ──────── */ html.gw-desk-card-room { --gw-web-label: 'The Card Room · Web Edition'; --gw-bg: #f2e8d5; --gw-surface: #faf4e6; --gw-surface-2: #ece0c8; --gw-border: rgba(74, 45, 24, 0.25); --gw-text: #241505; --gw-muted: #5f4a33; --gw-heading: #1c3a23; --gw-primary: #1c3a23; --gw-secondary: #4a2d18; --gw-hero-bg: radial-gradient(circle at 50% 18%, rgba(230, 201, 130, 0.16), transparent 55%), linear-gradient(180deg, #2f5a3a 0%, #1c3a23 60%, #102415 100%); --gw-footer-bg: #2e1c0e; --gw-profile-grad: linear-gradient(135deg, #1c3a23 0%, #102415 100%); --gw-btn-border: rgba(138, 106, 48, 0.7); --gw-hover: rgba(138, 106, 48, 0.1); --gw-track: rgba(36, 21, 5, 0.15); --gw-badge-bg: rgba(0, 0, 0, 0.22); } html.gw-desk-card-room .btn-outline { color: var(--gw-accent-dark); border-color: var(--gw-accent-dark); } /* ── Tavern Oak — dark oak bar, amber pour ─────────────────────────────── */ html.gw-desk-tavern-oak { --gw-web-label: 'Tavern Oak · Poured for the Web'; --gw-bg: #26150a; --gw-surface: #33200f; --gw-surface-2: #402a14; --gw-border: rgba(255, 184, 77, 0.24); --gw-text: #f6e7c9; --gw-muted: rgba(246, 231, 201, 0.66); --gw-heading: #ffcf7d; --gw-accent: #e09b3d; --gw-accent-light: #ffcf7d; --gw-accent-dark: #a86c22; --gw-primary: #5f3b1f; --gw-secondary: #2f5a3a; --gw-hero-bg: radial-gradient(circle at 50% 100%, rgba(255, 184, 77, 0.2), transparent 60%), linear-gradient(160deg, #5f3b1f 0%, #33200f 55%, #26150a 100%); --gw-footer-bg: #1b0e05; --gw-profile-grad: linear-gradient(135deg, #5f3b1f 0%, #26150a 100%); --gw-btn-a: #ffcf7d; --gw-btn-b: #e09b3d; --gw-btn-border: rgba(168, 108, 34, 0.6); --gw-hover: rgba(255, 184, 77, 0.1); } /* ── Velvet Den — deep burgundy velvet with brass fittings ─────────────── */ html.gw-desk-velvet-den { --gw-web-label: 'Velvet Den · Web Edition'; --gw-bg: #2a0f16; --gw-surface: #3a1420; --gw-surface-2: #471a28; --gw-border: rgba(230, 201, 130, 0.26); --gw-primary: #5c2033; --gw-secondary: #4a2d18; --gw-hero-bg: radial-gradient(circle at 50% 12%, rgba(230, 201, 130, 0.16), transparent 55%), linear-gradient(180deg, #5c2033 0%, #3a1420 55%, #23090f 100%); --gw-footer-bg: #1d0a0f; --gw-profile-grad: linear-gradient(135deg, #5c2033 0%, #2a0f16 100%); --gw-hover: rgba(230, 201, 130, 0.09); } /* ── Scorekeeper's Ledger — aged parchment, ink and rule lines (light) ── */ html.gw-desk-ledger { --gw-web-label: 'Scorekeeper’s Ledger · Web Edition'; --gw-bg: #efe6cf; --gw-surface: #f7f0dd; --gw-surface-2: #e7dcc0; --gw-border: rgba(36, 21, 5, 0.3); --gw-text: #241505; --gw-muted: #6b5a41; --gw-heading: #241505; --gw-accent: #8a6a30; --gw-accent-light: #a5854a; --gw-accent-dark: #6e5326; --gw-primary: #3a2a12; --gw-secondary: #1c3a23; --gw-hero-bg: linear-gradient(180deg, #f2e8d5 0%, #e7d9b8 100%); --gw-hero-text: #241505; --gw-footer-bg: #241505; --gw-profile-grad: linear-gradient(135deg, #3a2a12 0%, #241505 100%); --gw-btn-a: #4a3416; --gw-btn-b: #241505; --gw-btn-text: #f2e8d5; --gw-btn-border: rgba(36, 21, 5, 0.7); --gw-btn2-a: #1c3a23; --gw-btn2-b: #102415; --gw-hover: rgba(138, 106, 48, 0.12); --gw-track: rgba(36, 21, 5, 0.15); --gw-badge-bg: rgba(36, 21, 5, 0.06); } html.gw-desk-ledger .hero-title { text-shadow: none; } html.gw-desk-ledger .play-card, html.gw-desk-ledger .stats-detail-card { border-style: double; border-width: 3px; } html.gw-desk-ledger .btn-outline { color: var(--gw-accent-dark); border-color: var(--gw-accent-dark); } /* ── Gold Pip — charcoal-green baize under bright gold pips ────────────── */ html.gw-desk-gold-pip { --gw-web-label: 'Gold Pip · Web Edition'; --gw-bg: #10150f; --gw-surface: #182016; --gw-surface-2: #1f2a1d; --gw-border: rgba(240, 214, 138, 0.26); --gw-text: #f0ead8; --gw-muted: rgba(240, 234, 216, 0.62); --gw-heading: #f0d68a; --gw-accent: #d9b45c; --gw-accent-light: #f0d68a; --gw-accent-dark: #9b7d35; --gw-primary: #26361f; --gw-hero-bg: radial-gradient(circle at 50% 20%, rgba(240, 214, 138, 0.18), transparent 55%), linear-gradient(180deg, #26361f 0%, #182016 55%, #0b0f0a 100%); --gw-footer-bg: #0b0f0a; --gw-profile-grad: linear-gradient(135deg, #26361f 0%, #10150f 100%); --gw-btn-a: #f0d68a; --gw-btn-b: #d9b45c; --gw-hover: rgba(240, 214, 138, 0.09); } html.gw-desk-gold-pip .hero-section::before { opacity: 0.22; } /* ── Winner's Table — championship felt washed in trophy gold ──────────── */ html.gw-desk-winners-table { --gw-web-label: 'Winner’s Table · Web Champions'; --gw-heading: #f0d68a; --gw-accent-light: #f0d68a; --gw-hero-bg: radial-gradient(circle at 85% 0%, rgba(240, 214, 138, 0.3), transparent 55%), linear-gradient(135deg, #1c3a23 0%, #2f5a3a 55%, #8a6a30 130%); --gw-profile-grad: linear-gradient(135deg, #2f5a3a 0%, #8a6a30 140%); --gw-btn-a: #f0d68a; } html.gw-desk-winners-table .leaderboard-header { background: linear-gradient(135deg, #8a6a30 0%, #5c4620 100%); } /* ========================================================================== Mobile themes (gw-mob-*) ========================================================================== */ /* ── Pocket Den — the den felt, sized for one hand ─────────────────────── */ html.gw-mob-pocket-den { --gw-web-label: 'Pocket Den · Web Edition'; --gw-hero-bg: radial-gradient(circle at 50% 10%, rgba(230, 201, 130, 0.18), transparent 50%), linear-gradient(180deg, #2f5a3a 0%, #1c3a23 50%, #102415 100%); } /* ── Travel Board — a folding walnut board on the go ───────────────────── */ html.gw-mob-travel-board { --gw-web-label: 'Travel Board · Web Edition'; --gw-bg: #201207; --gw-surface: #2e1c0e; --gw-surface-2: #3b2513; --gw-border: rgba(230, 201, 130, 0.22); --gw-primary: #7d5028; --gw-secondary: #4a2d18; --gw-hero-bg: radial-gradient(circle at 50% 12%, rgba(230, 201, 130, 0.14), transparent 55%), linear-gradient(160deg, #4a2d18 0%, #2e1c0e 60%, #201207 100%); --gw-footer-bg: #170d04; --gw-profile-grad: linear-gradient(135deg, #5f3b1f 0%, #2e1c0e 100%); --gw-btn2-a: #2f5a3a; --gw-btn2-b: #1c3a23; } /* ── Night Deal — cards after midnight, amber glow ─────────────────────── */ html.gw-mob-night-deal { --gw-web-label: 'Night Deal · The Web After Dark'; --gw-bg: #07120a; --gw-surface: #0d1f12; --gw-surface-2: #122619; --gw-border: rgba(255, 184, 77, 0.24); --gw-text: #efe6d0; --gw-muted: rgba(239, 230, 208, 0.62); --gw-heading: #ffd08a; --gw-accent: #ffb84d; --gw-accent-light: #ffd08a; --gw-accent-dark: #b97f2e; --gw-primary: #1c3a23; --gw-hero-bg: radial-gradient(circle at 50% 6%, rgba(255, 184, 77, 0.2), transparent 45%), linear-gradient(180deg, #0d1f12 0%, #07120a 70%, #040a06 100%); --gw-footer-bg: #040a06; --gw-profile-grad: linear-gradient(135deg, #16301c 0%, #07120a 100%); --gw-btn-a: #ffd08a; --gw-btn-b: #ffb84d; --gw-btn-border: rgba(185, 127, 46, 0.6); --gw-hover: rgba(255, 184, 77, 0.1); } /* ── Vest Pocket — cream linen and a morning game (light) ──────────────── */ html.gw-mob-vest-pocket { --gw-web-label: 'Vest Pocket · Web Edition'; --gw-bg: #f2e8d5; --gw-surface: #faf4e6; --gw-surface-2: #ece0c8; --gw-border: rgba(74, 45, 24, 0.25); --gw-text: #241505; --gw-muted: #5f4a33; --gw-heading: #1c3a23; --gw-primary: #1c3a23; --gw-secondary: #4a2d18; --gw-hero-bg: radial-gradient(circle at 50% 15%, rgba(230, 201, 130, 0.16), transparent 55%), linear-gradient(180deg, #2f5a3a 0%, #1c3a23 60%, #102415 100%); --gw-footer-bg: #2e1c0e; --gw-profile-grad: linear-gradient(135deg, #1c3a23 0%, #102415 100%); --gw-btn-border: rgba(138, 106, 48, 0.7); --gw-hover: rgba(138, 106, 48, 0.1); --gw-track: rgba(36, 21, 5, 0.15); --gw-badge-bg: rgba(0, 0, 0, 0.22); } html.gw-mob-vest-pocket .btn-outline { color: var(--gw-accent-dark); border-color: var(--gw-accent-dark); } /* ── Tap Room — oak snug, amber pour, phone in hand ────────────────────── */ html.gw-mob-tap-room { --gw-web-label: 'Tap Room · Poured for the Web'; --gw-bg: #26150a; --gw-surface: #33200f; --gw-surface-2: #402a14; --gw-border: rgba(255, 184, 77, 0.24); --gw-text: #f6e7c9; --gw-muted: rgba(246, 231, 201, 0.66); --gw-heading: #ffcf7d; --gw-accent: #e09b3d; --gw-accent-light: #ffcf7d; --gw-accent-dark: #a86c22; --gw-primary: #5f3b1f; --gw-secondary: #2f5a3a; --gw-hero-bg: radial-gradient(circle at 50% 100%, rgba(255, 184, 77, 0.22), transparent 55%), linear-gradient(160deg, #5f3b1f 0%, #33200f 55%, #26150a 100%); --gw-footer-bg: #1b0e05; --gw-profile-grad: linear-gradient(135deg, #5f3b1f 0%, #26150a 100%); --gw-btn-a: #ffcf7d; --gw-btn-b: #e09b3d; --gw-btn-border: rgba(168, 108, 34, 0.6); --gw-hover: rgba(255, 184, 77, 0.1); } /* ── Pocket Velvet — burgundy velvet, brass clasp ──────────────────────── */ html.gw-mob-pocket-velvet { --gw-web-label: 'Pocket Velvet · Web Edition'; --gw-bg: #2a0f16; --gw-surface: #3a1420; --gw-surface-2: #471a28; --gw-border: rgba(230, 201, 130, 0.26); --gw-primary: #5c2033; --gw-secondary: #4a2d18; --gw-hero-bg: radial-gradient(circle at 50% 10%, rgba(230, 201, 130, 0.16), transparent 50%), linear-gradient(180deg, #5c2033 0%, #3a1420 55%, #23090f 100%); --gw-footer-bg: #1d0a0f; --gw-profile-grad: linear-gradient(135deg, #5c2033 0%, #2a0f16 100%); --gw-hover: rgba(230, 201, 130, 0.09); } /* ── Pocket Ledger — parchment scorebook for the road (light) ──────────── */ html.gw-mob-pocket-ledger { --gw-web-label: 'Pocket Ledger · Web Edition'; --gw-bg: #efe6cf; --gw-surface: #f7f0dd; --gw-surface-2: #e7dcc0; --gw-border: rgba(36, 21, 5, 0.3); --gw-text: #241505; --gw-muted: #6b5a41; --gw-heading: #241505; --gw-accent: #8a6a30; --gw-accent-light: #a5854a; --gw-accent-dark: #6e5326; --gw-primary: #3a2a12; --gw-secondary: #1c3a23; --gw-hero-bg: linear-gradient(180deg, #f2e8d5 0%, #e7d9b8 100%); --gw-hero-text: #241505; --gw-footer-bg: #241505; --gw-profile-grad: linear-gradient(135deg, #3a2a12 0%, #241505 100%); --gw-btn-a: #4a3416; --gw-btn-b: #241505; --gw-btn-text: #f2e8d5; --gw-btn-border: rgba(36, 21, 5, 0.7); --gw-btn2-a: #1c3a23; --gw-btn2-b: #102415; --gw-hover: rgba(138, 106, 48, 0.12); --gw-track: rgba(36, 21, 5, 0.15); --gw-badge-bg: rgba(36, 21, 5, 0.06); } html.gw-mob-pocket-ledger .hero-title { text-shadow: none; } html.gw-mob-pocket-ledger .btn-outline { color: var(--gw-accent-dark); border-color: var(--gw-accent-dark); } /* ── Skunk Line — deep felt with the double-skunk red stripe ───────────── */ html.gw-mob-skunk-line { --gw-web-label: 'Skunk Line · Web Edition'; --gw-bg: #0d1d11; --gw-surface: #17301d; --gw-surface-2: #122718; --gw-border: rgba(201, 165, 90, 0.28); --gw-hero-bg: radial-gradient(circle at 50% 14%, rgba(230, 201, 130, 0.14), transparent 55%), linear-gradient(180deg, #2f5a3a 0%, #17301d 55%, #0d1d11 100%); } html.gw-mob-skunk-line .hero-section { box-shadow: inset 0 -4px 0 #a93226; } html.gw-mob-skunk-line .section-title::after { content: ''; display: block; width: 64px; height: 3px; margin: 10px auto 0; background: #a93226; border-radius: 2px; } /* ── Brass Rail — charcoal den behind a polished brass rail ────────────── */ html.gw-mob-brass-rail { --gw-web-label: 'Brass Rail · Web Edition'; --gw-bg: #10150f; --gw-surface: #182016; --gw-surface-2: #1f2a1d; --gw-border: rgba(240, 214, 138, 0.34); --gw-text: #f0ead8; --gw-muted: rgba(240, 234, 216, 0.62); --gw-heading: #f0d68a; --gw-accent: #d9b45c; --gw-accent-light: #f0d68a; --gw-accent-dark: #9b7d35; --gw-primary: #26361f; --gw-hero-bg: radial-gradient(circle at 50% 16%, rgba(240, 214, 138, 0.18), transparent 55%), linear-gradient(180deg, #26361f 0%, #182016 55%, #0b0f0a 100%); --gw-footer-bg: #0b0f0a; --gw-profile-grad: linear-gradient(135deg, #26361f 0%, #10150f 100%); --gw-btn-a: #f0d68a; --gw-btn-b: #d9b45c; --gw-hover: rgba(240, 214, 138, 0.09); } html.gw-mob-brass-rail .main-nav { box-shadow: 0 2px 0 var(--gw-accent-dark), 0 4px 12px rgba(0, 0, 0, 0.4); } /* ── Quiet Game — muted sage, low lamps, soft voices ───────────────────── */ html.gw-mob-quiet-game { --gw-web-label: 'Quiet Game · Web Edition'; --gw-bg: #2c352c; --gw-surface: #374237; --gw-surface-2: #313b31; --gw-border: rgba(181, 168, 120, 0.3); --gw-text: #e8e6da; --gw-muted: rgba(232, 230, 218, 0.62); --gw-heading: #d6cfae; --gw-accent: #b5a878; --gw-accent-light: #d6cfae; --gw-accent-dark: #8a7f54; --gw-primary: #4a584a; --gw-secondary: #5f3b1f; --gw-hero-bg: radial-gradient(circle at 50% 20%, rgba(214, 207, 174, 0.12), transparent 55%), linear-gradient(180deg, #4a584a 0%, #374237 55%, #262e26 100%); --gw-footer-bg: #222922; --gw-profile-grad: linear-gradient(135deg, #4a584a 0%, #2c352c 100%); --gw-btn-a: #d6cfae; --gw-btn-b: #b5a878; --gw-btn-text: #262013; --gw-btn-border: rgba(138, 127, 84, 0.6); --gw-btn2-a: #5a6b5a; --gw-btn2-b: #4a584a; --gw-hover: rgba(181, 168, 120, 0.1); } /* ========================================================================== Themes submenu (avatar menu) — admin-only picker, not theme-dependent ========================================================================== */ .nav-themes-submenu { background: #f7f7f9; border-top: 1px solid #e5e5ea; border-bottom: 1px solid #e5e5ea; max-height: min(320px, 55vh); overflow-y: auto; } .nav-themes-submenu .nav-avatar-menu-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 16px 9px 28px; font-size: 13.5px; } .nav-theme-check { color: #2c5234; font-weight: 700; flex-shrink: 0; } #nav-themes-link .nav-themes-caret { display: inline-block; margin-left: 6px; transition: transform 0.15s ease; } #nav-themes-link[aria-expanded='true'] .nav-themes-caret { transform: rotate(90deg); }