/* skins.css — Wizard + Commoner skin overlays. Layered on top of style.css. Both skins keep the existing DOM and component structure; they only re-map design tokens and add a small number of skin-specific accents that carry the identity (borders, glow, brand plaque treatment). Toggled via [data-skin] on . Default (no attribute) = commoner, so first-load users see the polished modern look. Wizard opts in via the skin toggle. */ :root { --skin-accent: var(--blue); --skin-accent-2: var(--blue-2); --skin-glow: color-mix(in srgb, var(--blue) 55%, transparent); --skin-card-border: transparent; --skin-card-border-w: 0px; --skin-title-stroke: transparent; --skin-tick-bg: color-mix(in srgb, var(--bg) 88%, transparent); } /* ============================================================ COMMONER — matte neumorphic, lime backlight, soft pads. Aligns to design-handoff option 2a. ============================================================ */ [data-skin='commoner'] { --bg: #0a0b0d; --bg-hi: #0d0f12; --surf: #101317; --surf-2: #14181d; --surf-in: #0a0c10; --tx: #eaeef4; --mut: #96a0af; /* Lime backlight is the Commoner signature accent */ --skin-accent: #c7ff2e; --skin-accent-2: #dcff6a; --skin-glow: 0 0 24px -4px rgba(199, 255, 46, .55); --glow-green: 0 0 0 1px color-mix(in srgb, #c7ff2e 45%, transparent), 0 0 26px -4px color-mix(in srgb, #c7ff2e 55%, transparent); --skin-card-border: transparent; --skin-card-border-w: 0px; } /* ============================================================ WIZARD — arcade cabinet, magenta glow, hard borders, gold anchors. Aligns to design-handoff option 3a. ============================================================ */ [data-skin='wizard'] { --bg: #070b1c; --bg-hi: #0a1030; --surf: #0d1330; --surf-2: #111a3f; --surf-in: #06091c; --tx: #eaf0ff; --mut: #93a6d2; /* Magenta backlight + gold anchor colors */ --skin-accent: #ff2d95; --skin-accent-2: #ff69b4; --skin-glow: 0 0 24px -3px rgba(255, 45, 149, .6); --gold: #ffcf22; --blue: #3d7dff; --blue-2: #5ea3ff; --skin-card-border: rgba(120, 150, 220, .28); --skin-card-border-w: 2px; --skin-title-stroke: rgba(4, 5, 12, .9); /* Arcade cards render with hard borders instead of soft neumorphic pads */ --nm-out: 0 3px 0 rgba(4,5,12,.7), 0 0 22px -6px rgba(255,45,149,.35); --nm-out-sm: 0 2px 0 rgba(4,5,12,.7), 0 0 14px -6px rgba(255,45,149,.28); } /* Wizard background gets the CRT floor-grid gradient */ [data-skin='wizard'] body { background-image: radial-gradient(1100px 620px at 12% -8%, rgba(255, 45, 149, .10), transparent 62%), radial-gradient(900px 560px at 92% 4%, rgba(61, 125, 255, .10), transparent 60%), linear-gradient(180deg, #070b1c 0%, #0a1030 100%); } [data-skin='wizard'] .nm.card, [data-skin='wizard'] .feature-card, [data-skin='wizard'] .st-well { border: var(--skin-card-border-w) solid var(--skin-card-border); background: linear-gradient(180deg, var(--surf) 0%, var(--surf-2) 100%); } /* Wizard title lockup gets an ink-stroke + drop-shadow */ [data-skin='wizard'] .brand-title, [data-skin='wizard'] h2.ttl, [data-skin='wizard'] .card-title { -webkit-text-stroke: 1.5px var(--skin-title-stroke); paint-order: stroke fill; filter: drop-shadow(0 2px 0 rgba(4,5,12,.55)); } /* Wizard active tab gets a magenta gradient pill */ [data-skin='wizard'] .tab-btn.on, [data-skin='wizard'] .tab-btn[aria-selected='true'] { background: linear-gradient(180deg, var(--skin-accent-2), var(--skin-accent)); color: #04050c; box-shadow: 0 0 16px -3px var(--skin-accent), inset 0 1px 0 rgba(255,255,255,.35); } /* Commoner active tab gets a lime gradient pill */ [data-skin='commoner'] .tab-btn.on, [data-skin='commoner'] .tab-btn[aria-selected='true'] { background: linear-gradient(180deg, var(--skin-accent-2), var(--skin-accent)); color: #04050c; box-shadow: 0 0 20px -4px var(--skin-accent); } /* Bottom ticker adopts the skin accent color */ [data-skin='wizard'] .bt-label { background: linear-gradient(180deg, var(--skin-accent-2), var(--skin-accent)); color: #04050c; } [data-skin='commoner'] .bt-label { background: linear-gradient(180deg, var(--skin-accent-2), var(--skin-accent)); color: #04050c; } /* Skin toggle button — sits next to theme toggle */ .skin-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 999px; background: var(--surf-in); box-shadow: var(--nm-in-sm); font-family: var(--f-body); } .skin-toggle button { appearance: none; border: 0; padding: 5px 11px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); background: transparent; cursor: pointer; transition: color .15s, background .15s, box-shadow .15s; } .skin-toggle button[aria-pressed='true'] { color: #04050c; background: linear-gradient(180deg, var(--skin-accent-2), var(--skin-accent)); box-shadow: 0 0 14px -3px var(--skin-accent); } /* Default: full label visible, single-letter abbreviation hidden. On phones the four tabs + toggle + theme won't fit on one row, so swap to the single-letter abbreviation there. */ .skin-toggle button .skin-full { display: inline; } .skin-toggle button .skin-abbr { display: none; } @media (max-width: 540px) { .skin-toggle button .skin-full { display: none; } .skin-toggle button .skin-abbr { display: inline; } } /* Wildcards pass — Wizard uses arcade-magenta glow, Commoner uses lime */ [data-skin='wizard'] .glow-blue-sm { box-shadow: var(--nm-out-sm), var(--glow-blue); } [data-skin='wizard'] .glow-red-sm { box-shadow: var(--nm-out-sm), var(--glow-red); } [data-skin='wizard'] .glow-gold { box-shadow: var(--nm-out-sm), var(--glow-gold); } [data-skin='commoner'] .glow-blue-sm, [data-skin='commoner'] .glow-red-sm, [data-skin='commoner'] .glow-gold { box-shadow: var(--nm-out-sm); } [data-skin='commoner'] .glow-blue-sm { border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); } [data-skin='commoner'] .glow-red-sm { border: 1px solid color-mix(in srgb, var(--red) 22%, transparent); } [data-skin='commoner'] .glow-gold { border: 1px solid color-mix(in srgb, var(--gold) 22%, transparent); } /* Skin toggle label separator */ .head-actions .skin-toggle { margin-right: 4px; }