/* ===================================================== ===== STRYV4 LUCKY TICKETS · SHOP CSS · THEMES ===== ===== Phase C3 · file 4 / 4 ===== ===== Tag: STR · file: shop_themes_STR.css ===== ===================================================== */ /* * Theme overrides triggered by cheat codes: * THEME_CYCLE → Velvet / Midnight / Forest / default * THEME_WFTO → WFTO dungeon overlay * THEME_CARNIVAL → Carnival bunting overlay * THEME_HIGHCONTRAST → high-contrast accessibility * * Plus the master family-palette variables read by every ticket card: * [data-family="..."] → --card-c1, --card-c2, --card-c3 * * House conventions: CAPS headers with ===== wrappers, CodeNumber X.Y * block labels, British English. */ /* ===================================================== ===== SECTION 1: FAMILY PALETTES ===== ===================================================== */ /* CodeNumber 1.1 — Per-family card palettes. Each family maps to a 3-colour gradient: backgroundTint, hoverGlow, sparkleAccent. The card pulls these via --card-c1, --card-c2, --card-c3. These match the values in family_palettes_STR.json. */ .ticket-card[data-family="random"] { --card-c1: #4a4a55; --card-c2: #9aa0b0; --card-c3: #cab07a; } .ticket-card[data-family="position"] { --card-c1: #3a4a6a; --card-c2: #6a8aba; --card-c3: #cab07a; } .ticket-card[data-family="number-theoretic"] { --card-c1: #2a1e4a; --card-c2: #7a52a0; --card-c3: #e6c63a; } .ticket-card[data-family="frequency"] { --card-c1: #c63a3a; --card-c2: #e69a3a; --card-c3: #f0e0a0; } .ticket-card[data-family="combinatorial"] { --card-c1: #7a3a4a; --card-c2: #cab07a; --card-c3: #e8b0a0; } .ticket-card[data-family="bayesian"] { --card-c1: #5a3a8a; --card-c2: #a06ac0; --card-c3: #e6d2a0; } .ticket-card[data-family="bayesian-extended"] { --card-c1: #4a3a8a; --card-c2: #9a6ac0; --card-c3: #e0c87a; } .ticket-card[data-family="markov"] { --card-c1: #3a2a5a; --card-c2: #6a4a9a; --card-c3: #cab07a; } .ticket-card[data-family="likelihood"] { --card-c1: #3a5a7a; --card-c2: #7aa0c0; --card-c3: #e6c63a; } .ticket-card[data-family="monte-carlo"] { --card-c1: #5a3a5a; --card-c2: #a07aa0; --card-c3: #e6c63a; } .ticket-card[data-family="information"] { --card-c1: #3a3a3a; --card-c2: #7a7a8a; --card-c3: #cab07a; } .ticket-card[data-family="expected-value"] { --card-c1: #6a3a1a; --card-c2: #cab07a; --card-c3: #e6e2c0; } .ticket-card[data-family="bootstrap"] { --card-c1: #5a4a3a; --card-c2: #9a8a6a; --card-c3: #cab07a; } .ticket-card[data-family="optimisation"] { --card-c1: #6a2a1a; --card-c2: #c66a3a; --card-c3: #e6c63a; } .ticket-card[data-family="spectral"] { --card-c1: #2a3a4a; --card-c2: #5a7a9a; --card-c3: #cab07a; } .ticket-card[data-family="spectral-graph"] { --card-c1: #2a4a4a; --card-c2: #5a8a8a; --card-c3: #cab07a; } .ticket-card[data-family="spectral-qmc"] { --card-c1: #1a4a4a; --card-c2: #3a8a8a; --card-c3: #cab07a; } .ticket-card[data-family="ml-classical"] { --card-c1: #2a4a5a; --card-c2: #5a8aa0; --card-c3: #cab07a; } .ticket-card[data-family="ml-modern"] { --card-c1: #1a3a5a; --card-c2: #3a7ab0; --card-c3: #c0c8d0; } .ticket-card[data-family="ml-deep-classical"] { --card-c1: #2a4a6a; --card-c2: #5a8ac0; --card-c3: #cab07a; } .ticket-card[data-family="mixture-ml"] { --card-c1: #3a4a5a; --card-c2: #7a8aa0; --card-c3: #cab07a; } .ticket-card[data-family="topology"] { --card-c1: #3a3a5a; --card-c2: #6a6a9a; --card-c3: #cab07a; } .ticket-card[data-family="composite"] { --card-c1: #3a3a1a; --card-c2: #7a6a3a; --card-c3: #e6c63a; } .ticket-card[data-family="point-process"] { --card-c1: #5a1a3a; --card-c2: #a04a7a; --card-c3: #e0a0c0; } .ticket-card[data-family="sde"] { --card-c1: #2a4a6a; --card-c2: #5a8ab0; --card-c3: #cab07a; } .ticket-card[data-family="bandit"] { --card-c1: #5a3a1a; --card-c2: #a06a3a; --card-c3: #e6c63a; } .ticket-card[data-family="info-geometry"] { --card-c1: #3a4a4a; --card-c2: #7a9a9a; --card-c3: #cab07a; } .ticket-card[data-family="rmt"] { --card-c1: #3a2a4a; --card-c2: #6a4a7a; --card-c3: #cab07a; } .ticket-card[data-family="concentration"] { --card-c1: #3a3a2a; --card-c2: #6a6a4a; --card-c3: #cab07a; } .ticket-card[data-family="copula"] { --card-c1: #5a3a4a; --card-c2: #a06a7a; --card-c3: #e0c0c8; } .ticket-card[data-family="evt"] { --card-c1: #1a2a4a; --card-c2: #3a5a8a; --card-c3: #cab07a; } .ticket-card[data-family="dirichlet"] { --card-c1: #4a3a2a; --card-c2: #8a6a4a; --card-c3: #e6c63a; } .ticket-card[data-family="hierarchical"] { --card-c1: #3a5a5a; --card-c2: #6a9a9a; --card-c3: #cab07a; } .ticket-card[data-family="custom-mix"] { --card-c1: #3a1a4a; --card-c2: #9a5ac0; --card-c3: #e6c63a; } .ticket-card[data-family="misc"] { --card-c1: #4a4a4a; --card-c2: #8a8a8a; --card-c3: #cab07a; } /* ===================================================== ===== SECTION 2: THEME — MIDNIGHT ===== ===================================================== */ /* CodeNumber 2.1 — Late-night arcade, neon haze. Activated by THEME_CYCLE (cycle step 1) → body.stryv-theme-midnight */ body.stryv-theme-midnight { --velvet-deep: #0a0e2a; --velvet-mid: #14184a; --velvet-light: #1e2a6a; --velvet-ink: #050818; --gold-deep: #2a3a8a; --gold-mid: #6a7adb; --gold-light: #9aa8f0; --gold-bright: #d0d8ff; --gold-shimmer: #e0e8ff; --paper-cream: #d8def4; --paper-warm: #a8b0d0; --ribbon-red: #6a3aa0; } body.stryv-theme-midnight { background: radial-gradient(ellipse at top, rgba(20, 24, 74, 0.55) 0%, transparent 50%), radial-gradient(ellipse at bottom, rgba(30, 42, 106, 0.35) 0%, transparent 50%), linear-gradient(180deg, #050818 0%, #02040c 100%); background-attachment: fixed; } /* ===================================================== ===== SECTION 3: THEME — FOREST ===== ===================================================== */ /* CodeNumber 3.1 — Quiet woodland, lichen-stone. Activated by THEME_CYCLE (cycle step 2) → body.stryv-theme-forest */ body.stryv-theme-forest { --velvet-deep: #1a2e1a; --velvet-mid: #2a4a2a; --velvet-light: #3a6a3a; --velvet-ink: #0a1a0a; --gold-deep: #6a5a2a; --gold-mid: #b09a4a; --gold-light: #e0d090; --gold-bright: #f0e8c0; --gold-shimmer: #f8f0d8; --paper-cream: #e8e0c0; --paper-warm: #b8b09a; --ribbon-red: #6a3a2a; } body.stryv-theme-forest { background: radial-gradient(ellipse at top, rgba(42, 74, 42, 0.4) 0%, transparent 50%), radial-gradient(ellipse at bottom, rgba(58, 106, 58, 0.25) 0%, transparent 50%), linear-gradient(180deg, #0a1a0a 0%, #050a05 100%); background-attachment: fixed; } /* ===================================================== ===== SECTION 4: THEME — WFTO ===== ===================================================== */ /* CodeNumber 4.1 — War for the Overworld dungeon-keeper theme. Heavy stone, brass, runic glow. Activated by THEME_WFTO → body.stryv-theme-wfto */ body.stryv-theme-wfto { --velvet-deep: #1c1814; --velvet-mid: #2a241c; --velvet-light: #3a3024; --velvet-ink: #100a04; --gold-deep: #6a3a0a; --gold-mid: #b06a1a; --gold-light: #e6a052; --gold-bright: #f8c878; --gold-shimmer: #ffe0a0; --paper-cream: #e0c8a0; --paper-warm: #a8866a; --ribbon-red: #8a1a0a; } body.stryv-theme-wfto { background: radial-gradient(ellipse at center, rgba(106, 58, 10, 0.35) 0%, transparent 60%), linear-gradient(180deg, #100a04 0%, #050302 100%); background-attachment: fixed; /* Subtle ember-like dust */ } body.stryv-theme-wfto .shop-header__title { text-shadow: 0 0 16px rgba(248, 200, 120, 0.4), 0 2px 8px rgba(0, 0, 0, 0.8); font-family: var(--font-display); } /* Stone-block scrollbar accents */ body.stryv-theme-wfto .showman-console { background: linear-gradient(180deg, #0a0604 0%, #1a1208 100%); border-color: var(--gold-deep); } /* ===================================================== ===== SECTION 5: THEME — CARNIVAL ===== ===================================================== */ /* CodeNumber 5.1 — Maximal carnival overlay. Bunting, marquee lights, ferris-wheel ticker. Activated by THEME_CARNIVAL → body.stryv-theme-carnival */ body.stryv-theme-carnival { --velvet-deep: #8a0a0a; --velvet-mid: #c63a3a; --velvet-light: #e85a5a; --velvet-ink: #4a0608; } body.stryv-theme-carnival { background: repeating-linear-gradient(45deg, #c63a3a 0px, #c63a3a 60px, #fff8d8 60px, #fff8d8 120px, #c63a3a 120px, #c63a3a 180px, #3a4ab0 180px, #3a4ab0 240px); background-attachment: fixed; } /* CodeNumber 5.2 — Decorative bunting at the top, via a separate pseudo-element fixed to the viewport edge. */ body.stryv-theme-carnival::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 36px; background: /* Triangle bunting via clipped repeating gradient */ repeating-conic-gradient(from -45deg at 24px 0, var(--ribbon-red) 0deg 60deg, var(--gold-light) 60deg 120deg); -webkit-mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 100%); mask-image: linear-gradient(180deg, black 0%, black 40%, transparent 100%); pointer-events: none; z-index: 100; } /* CodeNumber 5.3 — Ferris-wheel ticker — a thin animated band of chasing lights across the very top. */ body.stryv-theme-carnival::after { content: ''; position: fixed; top: 36px; left: 0; right: 0; height: 4px; background: repeating-linear-gradient(90deg, var(--gold-light) 0px, var(--gold-light) 4px, transparent 4px, transparent 12px); background-size: 12px 4px; animation: carnival-ticker 1.2s linear infinite; pointer-events: none; z-index: 100; } @keyframes carnival-ticker { from { background-position: 0 0; } to { background-position: 12px 0; } } /* ===================================================== ===== SECTION 6: THEME — HIGH CONTRAST ===== ===================================================== */ /* CodeNumber 6.1 — Accessibility-focused: thicker borders, less gradient, larger text, deeper colour separation. Activated by THEME_HIGHCONTRAST → body.stryv-theme-highcontrast */ body.stryv-theme-highcontrast { --velvet-deep: #000000; --velvet-mid: #0a0a0a; --velvet-light: #1a1a1a; --velvet-ink: #000000; --gold-deep: #ffaa00; --gold-mid: #ffd000; --gold-light: #ffe85a; --gold-bright: #ffffff; --paper-cream: #ffffff; --paper-warm: #f0f0f0; } body.stryv-theme-highcontrast { background: #000000 !important; background-attachment: fixed; } body.stryv-theme-highcontrast body::before { display: none; /* drop grain overlay */ } body.stryv-theme-highcontrast .ticket-card { background: #1a1a1a !important; border: 2px solid var(--gold-light) !important; border-radius: 0; } body.stryv-theme-highcontrast .ticket-card__name { color: var(--gold-bright); font-style: normal; -webkit-text-fill-color: var(--gold-bright); } body.stryv-theme-highcontrast .ticket-card__description { color: var(--paper-cream); font-size: 14px; opacity: 1; } body.stryv-theme-highcontrast .ticket-card:hover { border-color: #ffffff !important; background: #2a2a2a !important; } body.stryv-theme-highcontrast .ticket-card.is-selected { background: #2a1a00 !important; border-color: #ffe85a !important; box-shadow: 0 0 0 4px #ffe85a, inset 0 0 0 1px #000000 !important; } body.stryv-theme-highcontrast .filter-pill, body.stryv-theme-highcontrast .shop-control-row__btn, body.stryv-theme-highcontrast .vendor-slot { border-width: 2px !important; } body.stryv-theme-highcontrast .shop-header__title { text-shadow: none; color: var(--gold-bright); font-style: normal; } /* ===================================================== ===== SECTION 7: BANANA EASTER EGG ===== ===================================================== */ /* CodeNumber 7.1 — When CHEAT MUMBO LOVES A YELLOW FRUIT is active, a small banana icon appears in the bottom-right corner. */ body.stryv-egg-banana::after { content: '🍌'; position: fixed; bottom: 16px; right: 16px; font-size: 32px; opacity: 0.85; z-index: 99; pointer-events: none; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.6)); animation: banana-bob 4s ease-in-out infinite; } @keyframes banana-bob { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-4px); } } /* ===================================================== ===== SECTION 8: DEV PANEL ===== ===================================================== */ /* CodeNumber 8.1 — Dev panel overlay, shown when DEV_PANEL cheat is active. Cache stats, fingerprint, formula timings. JS populates the contents. */ body.stryv-dev-panel .dev-panel { display: block; } .dev-panel { display: none; position: fixed; bottom: 16px; left: 16px; width: 320px; max-height: 50vh; overflow-y: auto; padding: 14px 16px; background: rgba(0, 0, 0, 0.9); border: 1px solid var(--gold-mid); border-radius: 8px; font-family: 'Courier New', monospace; font-size: 11px; color: var(--paper-cream); z-index: 9000; line-height: 1.6; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .dev-panel__title { font-family: var(--font-display); font-style: italic; font-size: 13px; color: var(--gold-light); margin: 0 0 8px; letter-spacing: 0.05em; text-transform: uppercase; } .dev-panel__row { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border-bottom: 1px dotted rgba(176, 138, 46, 0.2); } .dev-panel__row-label { color: var(--paper-warm); opacity: 0.7; } .dev-panel__row-value { color: var(--gold-light); } /* ===================================================== ===== SECTION 9: ADMIN PROTECTION ===== ===================================================== */ /* CodeNumber 9.1 — When admin sets master-disable, the spellbook icon hides via JS removing the button — but as a belt-and-braces, this class can override visibility too. */ body.stryv-cheats-disabled .stryv-cheat-icon-btn, body.stryv-cheats-disabled .stryv-cheat-popup-backdrop { display: none !important; }