/* games-web/theme.css — VaultGames commercial-grade UI layer. Linked AFTER each game's own CSS and BEFORE responsive.css. Elevates shared chrome (buttons, panels, headers, cards, banners, toasts, badges, lobby rows, etc.) to a modern, premium look with glassmorphism, depth, gradients, glows and micro-animations. Game-specific board/piece/ felt/token rules are intentionally left untouched so gameplay visuals remain. Strategy: use higher-spec / later-order rules only on generic chrome classes. Games keep their own --bg / --gold / --text variables; we reuse them so the theme adapts to each game's palette. */ /* ============================================================================= * DESIGN TOKENS * * The games do NOT share a palette, and they should not: Rummy's green baize, Chess's * slate and the maroon lobby are each right for their game. What made them read as three * separate products was the FORM being different too — a survey of the stylesheets found * eight border-radius values in common use and twelve distinct font sizes on the lobby * alone. Shape and rhythm are what a token layer should unify; colour stays per game. * * These are consumed by the shared chrome below (buttons, panels, headers, VGScreen, the * voice panel). A game can still override anything locally — this is a default, not a * cage — but new work should reach for a token before inventing a number. * ============================================================================= */ :root { /* spacing — a 4px base, because every control here is a multiple of 4 already */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; /* radius — four steps plus a pill. Anything between these was noise. */ --r-1: 8px; /* chips, small controls */ --r-2: 12px; /* buttons, inputs */ --r-3: 16px; /* cards, panels */ --r-4: 22px; /* hero, modals */ --r-pill: 999px; /* elevation — three heights. A shadow that is not one of these is usually a mistake. */ --e-1: 0 2px 6px rgba(0, 0, 0, .28); --e-2: 0 8px 22px rgba(0, 0, 0, .35), 0 2px 6px rgba(0, 0, 0, .25); --e-3: 0 20px 50px rgba(0, 0, 0, .5), 0 6px 14px rgba(0, 0, 0, .32); /* type ramp — six sizes instead of twelve. Fluid so phones and desktops share one scale. */ --t-xs: 11px; --t-sm: 12.5px; --t-md: clamp(13px, 3.4vw, 15px); --t-lg: clamp(16px, 4vw, 18px); --t-xl: clamp(19px, 4.6vw, 24px); --t-2xl: clamp(24px, 5.6vw, 34px); } /* ===== premium base background with ambient glow + subtle grain ===== */ body { background-attachment: fixed; position: relative; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 40% at 50% -10%, color-mix(in srgb, var(--gold, #f3c245) 14%, transparent), transparent 70%), radial-gradient(45% 30% at 100% 0%, rgba(124, 58, 237, .10), transparent 60%), radial-gradient(40% 28% at 0% 10%, rgba(16, 185, 129, .08), transparent 60%); } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(255, 255, 255, .025) 1px, transparent 1.4px); background-size: 22px 22px; } /* ===== logo ===== */ .logo { letter-spacing: .4px; text-shadow: 0 2px 14px color-mix(in srgb, var(--gold, #f3c245) 40%, transparent); } /* ===== glass primitive ===== */ .glass, .lobby, .panel, .section, .levelbar, .leaderboard, .tablecard, .panel-card { border-color: color-mix(in srgb, var(--gold, #f3c245) 28%, var(--line, #4d1d1d)) !important; box-shadow: 0 18px 50px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06), inset 0 0 0 1px rgba(255, 255, 255, .02) !important; } /* ===== header / topbar ===== */ .hdr, .topbar, .tablebar { background: linear-gradient(180deg, color-mix(in srgb, var(--panel, #2a0b0b) 92%, white 4%), color-mix(in srgb, var(--panel-2, #1d0707) 94%, black 6%)) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 22%, var(--line, #4d1d1d)) !important; backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); box-shadow: 0 10px 30px rgba(0, 0, 0, .4) !important; } /* ===== buttons — commercial grade ===== */ .btn, .iconbtn { position: relative; overflow: hidden; border-radius: var(--r-2); transition: transform .14s cubic-bezier(.2, .8, .2, 1), box-shadow .2s, border-color .2s, filter .2s, background .2s; touch-action: manipulation; } .btn:hover, .iconbtn:hover { transform: translateY(-2px); } .btn:active, .iconbtn:active { transform: translateY(0) scale(.97); } .btn:disabled { transform: none !important; filter: grayscale(.3) brightness(.85); } /* primary gold */ .btn.gold, .btn.primary { color: #1a1206 !important; background: linear-gradient(135deg, var(--gold-2, #ffdd72), var(--gold, #f3c245) 55%, var(--gold-deep, #a9791b)) !important; border: 1px solid var(--gold-deep, #a9791b) !important; box-shadow: 0 8px 24px color-mix(in srgb, var(--gold, #f3c245) 35%, transparent), inset 0 1px 0 rgba(255, 255, 255, .4) !important; } .btn.gold:hover, .btn.primary:hover { filter: brightness(1.06); box-shadow: 0 12px 32px color-mix(in srgb, var(--gold, #f3c245) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .5) !important; } /* shimmer sweep on gold buttons */ .btn.gold::after, .btn.primary::after { content: ""; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); pointer-events: none; } .btn.gold:hover::after, .btn.primary:hover::after { animation: sweep .9s ease; } @keyframes sweep { to { left: 130%; } } /* danger / red */ .btn.red, .btn.danger { color: #fff !important; background: linear-gradient(135deg, #fb7185, #e11d48 60%, #a30f2e) !important; border: 1px solid #7d0f2a !important; box-shadow: 0 8px 24px rgba(225, 29, 72, .35), inset 0 1px 0 rgba(255,255,255,.25) !important; } /* secondary */ .btn:not(.gold):not(.primary):not(.red):not(.danger):not(.ghost) { background: linear-gradient(180deg, color-mix(in srgb, var(--panel, #2a0b0b) 80%, white 6%), color-mix(in srgb, var(--panel-2, #1d0707) 88%, black 8%)) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 18%, var(--line, #4d1d1d)) !important; box-shadow: 0 6px 18px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.05) !important; } .btn:not(.gold):not(.primary):not(.red):not(.danger):not(.ghost):hover { border-color: color-mix(in srgb, var(--gold, #f3c245) 55%, var(--line, #4d1d1d)) !important; box-shadow: 0 10px 28px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* icon buttons */ .iconbtn { background: linear-gradient(180deg, color-mix(in srgb, var(--panel, #2a0b0b) 80%, white 6%), color-mix(in srgb, var(--panel-2, #1d0707) 88%, black 8%)) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 18%, var(--line, #4d1d1d)) !important; box-shadow: 0 4px 14px rgba(0,0,0,.3) !important; } .iconbtn:hover { border-color: var(--gold, #f3c245) !important; box-shadow: 0 8px 20px color-mix(in srgb, var(--gold, #f3c245) 22%, transparent) !important; } /* ===== badges ===== */ .fairbadge { box-shadow: 0 4px 14px rgba(16, 185, 129, .35) !important; } .rankbadge, .grate { box-shadow: 0 4px 14px color-mix(in srgb, var(--gold, #f3c245) 30%, transparent) !important; } /* ===== lobby player rows ===== */ .players li { background: linear-gradient(180deg, color-mix(in srgb, var(--panel-2, #1d0707) 86%, white 5%), color-mix(in srgb, var(--panel-2, #1d0707) 94%, black 6%)) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 14%, var(--line, #4d1d1d)) !important; transition: transform .14s, border-color .2s, box-shadow .2s; } .players li:hover { transform: translateX(2px); border-color: color-mix(in srgb, var(--gold, #f3c245) 38%, var(--line, #4d1d1d)) !important; box-shadow: 0 6px 18px rgba(0,0,0,.35) !important; } .tag { font-weight: 700 !important; letter-spacing: .3px; } .tag.you { box-shadow: 0 4px 12px color-mix(in srgb, var(--gold, #f3c245) 30%, transparent) !important; } /* ===== banner (result / status) ===== */ .banner { background: linear-gradient(180deg, color-mix(in srgb, var(--panel, #2a0b0b) 90%, white 5%), color-mix(in srgb, var(--panel-2, #1d0707) 94%, black 6%)) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 30%, var(--line, #4d1d1d)) !important; box-shadow: 0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06) !important; } .banner.win { color: var(--gold-2, #ffdd72) !important; border-color: color-mix(in srgb, var(--gold, #f3c245) 55%, var(--line, #4d1d1d)) !important; box-shadow: 0 0 30px color-mix(in srgb, var(--gold, #f3c245) 30%, transparent), 0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08) !important; animation: winglow 1.6s ease-in-out infinite; } @keyframes winglow { 0%, 100% { box-shadow: 0 0 22px color-mix(in srgb, var(--gold, #f3c245) 22%, transparent), 0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08); } 50% { box-shadow: 0 0 44px color-mix(in srgb, var(--gold, #f3c245) 42%, transparent), 0 12px 34px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12); } } /* ===== toast ===== */ .toast { background: color-mix(in srgb, var(--panel-2, #1d0707) 88%, black 8%) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 30%, var(--line, #4d1d1d)) !important; backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 14px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06) !important; } /* ===== dice ===== */ .die { box-shadow: 0 8px 22px rgba(0,0,0,.45), inset 0 2px 6px rgba(255,255,255,.5) !important; } /* ===== inputs ===== */ .input, .fld input, .fld select, .raise-row input { background: color-mix(in srgb, var(--bg-2, #240606) 88%, black 8%) !important; border: 1px solid color-mix(in srgb, var(--gold, #f3c245) 18%, var(--line, #4d1d1d)) !important; transition: border-color .2s, box-shadow .2s; } .input:focus, .fld input:focus, .fld select:focus { border-color: var(--gold, #f3c245) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold, #f3c245) 28%, transparent) !important; } /* ===== coin / wallet chips ===== */ .coins { box-shadow: 0 4px 14px color-mix(in srgb, var(--gold, #f3c245) 30%, transparent), inset 0 1px 0 rgba(255,255,255,.4) !important; } /* ===== premium entrance animations ===== */ .fade-up { animation: fadeUp .45s cubic-bezier(.2, .8, .2, 1) both; } .pop-in { animation: popIn .35s cubic-bezier(.2, 1.4, .4, 1) both; } @keyframes popIn { 0% { opacity: 0; transform: scale(.92); } 100% { opacity: 1; transform: scale(1); } } /* hover lift for cards (used by lobby grid + game cards) */ .gcard, .tablecard, a.card { transition: transform .18s cubic-bezier(.2, .8, .2, 1), border-color .2s, box-shadow .25s; } .gcard:hover, .tablecard:hover, a.card:hover { box-shadow: 0 16px 42px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08) !important; } /* scrollbar polish */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--gold, #f3c245) 30%, var(--line, #4d1d1d)); border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--gold, #f3c245) 50%, var(--line, #4d1d1d)); } /* selection */ ::selection { background: color-mix(in srgb, var(--gold, #f3c245) 45%, transparent); color: #1a1206; } /* ============================================================================= * LANGUAGE (vgi18n.js) * ============================================================================= */ /* Devanagari is not in Sora or Nunito Sans. Without a fallback the browser substitutes whatever it has, which reads noticeably worse next to the Latin UI. These are SYSTEM fonts on the platforms that matter (Noto on Android/ChromeOS, Nirmala UI on Windows, Kohinoor on iOS/macOS) — no download, no external request, no CSP concern. */ html.vg-indic body, html.vg-indic button, html.vg-indic input, html.vg-indic select { font-family: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal", "Nunito Sans", system-ui, sans-serif; } /* Devanagari sits taller than Latin; the tight heading leading clips matras (ि ी ै). */ html.vg-indic h1, html.vg-indic h2, html.vg-indic .title, html.vg-indic .vgs-title { line-height: 1.35; } .vg-lang { appearance: none; -webkit-appearance: none; cursor: pointer; text-align: center; text-align-last: center; padding-right: 10px; padding-left: 10px; max-width: 108px; } /* A closed