/* Sprint 12 — `hot-spades` palette. * * The signature theme. Hot Spades branded — pure black felt with * blood-red and neon-orange accents, animated flame glow around the * felt surface, and a fire-textured card back. This palette goes * harder than the standard four; it's the one that says "you're in * the right place." * * felt-mid pure black (#0a0a0a) — the depth where flames glow * accent neon orange (#ff6b1a) — bright torch flame * amber saturated yellow-orange (#ffaa00) — secondary flame * team-ns deep blood red (#c8102e) * team-ew neon orange (matches accent — hot vs hot, both teams * are in the fire) * red crimson (#e8232f) — saturated for hot-theme energy * * Authoring note: per the original red-felt.css comment, don't put * leading `--name:` in comments — the contrast linter regex catches * the first match. Comments here describe tokens conceptually. */ body[data-theme="hot-spades"] { --bg: #1a0e0a; --paper: #1f120d; --ink: #f8e8d8; --ink-soft: #c8a888; --felt-mid: #0a0a0a; --card-bg: #1f120d; --card-border: #5a2a1a; --red: #e8232f; --spade: #ff6b1a; --accent: #ff6b1a; --team-ns: #c8102e; --team-ew: #ff8c1a; --amber: #ffaa00; /* Dark-paper override: brighten the red 60/40 toward white so the cancel/danger button text reaches ~5+:1 on the #1f120d paper instead of vanishing into it. Light-paper themes inherit the default darkened-red --danger-text from tokens.css. */ --danger-text: color-mix(in oklab, var(--red) 60%, white); /* Sprint 12 — Hot Spades per-card emblem card back. Single inline-SVG: flame-orange spade glyph framed by a double orange border + a soft radial fire-glow behind it, all on near- black. Same per-card emblem approach as highlander (no tiling, each card gets one complete design centered + clipped by the card border). */ --card-back-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 144' preserveAspectRatio='xMidYMid meet'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='65%25' r='55%25'%3E%3Cstop offset='0%25' stop-color='%23ff6b1a' stop-opacity='0.50'/%3E%3Cstop offset='100%25' stop-color='%23ff6b1a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect width='100' height='144' fill='%230a0a0a'/%3E%3Crect width='100' height='144' fill='url(%23g)'/%3E%3Crect x='4' y='4' width='92' height='136' rx='8' fill='none' stroke='%23ff6b1a' stroke-width='2.5'/%3E%3Crect x='10' y='10' width='80' height='124' rx='5' fill='none' stroke='%23ffaa00' stroke-width='0.8' stroke-opacity='0.7'/%3E%3Ctext x='50' y='95' font-family='Georgia, serif' font-size='78' text-anchor='middle' fill='%23ff6b1a'%3E%E2%99%A0%3C/text%3E%3C/svg%3E"); --card-back-size: 100% 100%; --card-back-repeat: no-repeat; --card-back-position: center; /* Bespoke flame card-back above carries its own art — hide the default mask ::after layer so it doesn't paint over the SVG. */ --card-back-mask: none; --card-emblem-display: none; /* Hot-spades felt surface: deep black with a slow radial flame glow pulsing from the table center. Layered on top of the base felt color via the play-surface gradient stack. */ --felt-overlay: radial-gradient( ellipse 80% 60% at 50% 80%, rgba(255, 107, 26, 0.22) 0%, rgba(232, 35, 47, 0.10) 35%, transparent 75% ); } /* Animated flame glow on the play surface — only active for this palette. The pseudo-element overlays the felt with a flickering radial gradient. Keep the keyframe opacity range narrow so it feels like flame breathing, not flashing. Pointer-events: none so it never intercepts clicks on cards underneath. */ body[data-theme="hot-spades"] .play-surface::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; background: var(--felt-overlay); animation: hotspades-flame-flicker 4.2s ease-in-out infinite; mix-blend-mode: screen; } @keyframes hotspades-flame-flicker { 0% { opacity: 0.70; transform: scale(1) translateY(0px); } 25% { opacity: 0.95; transform: scale(1.04) translateY(-2px); } 50% { opacity: 0.78; transform: scale(0.98) translateY(1px); } 75% { opacity: 1.00; transform: scale(1.06) translateY(-3px); } 100% { opacity: 0.70; transform: scale(1) translateY(0px); } } /* Sprint 12 — cinders rising from the bottom edge. A second layer (.play-surface::after) carries 6 small radial-gradient "embers" at staggered x positions. The whole layer animates a translateY from 0 → ~80% of viewport height while opacity ramps in then out, producing the visual of glowing particles drifting up and burning out. mix-blend-mode: screen so cinders brighten the felt rather than overlay it darkly. */ body[data-theme="hot-spades"] .play-surface::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(circle 3px at 12% 96%, rgba(255, 170, 30, 1) 0%, rgba(255, 170, 30, 0) 70%), radial-gradient(circle 2px at 28% 98%, rgba(255, 100, 0, 1) 0%, rgba(255, 100, 0, 0) 70%), radial-gradient(circle 4px at 47% 95%, rgba(255, 200, 60, 1) 0%, rgba(255, 200, 60, 0) 70%), radial-gradient(circle 2px at 64% 99%, rgba(255, 80, 0, 1) 0%, rgba(255, 80, 0, 0) 70%), radial-gradient(circle 3px at 79% 96%, rgba(255, 130, 30, 1) 0%, rgba(255, 130, 30, 0) 70%), radial-gradient(circle 2px at 92% 98%, rgba(255, 200, 100, 1) 0%, rgba(255, 200, 100, 0) 70%); animation: hotspades-cinder-rise 7s linear infinite; mix-blend-mode: screen; } @keyframes hotspades-cinder-rise { /* Embers start at the bottom (translate 0), brighten as they rise, drift upward, then fade out around the top of their path so they appear to burn out mid-flight. */ 0% { opacity: 0; transform: translateY(0%) scale(1); } 10% { opacity: 0.85; transform: translateY(-8%) scale(1.05); } 50% { opacity: 0.95; transform: translateY(-45%) scale(1.10); } 85% { opacity: 0.50; transform: translateY(-78%) scale(1.20); } 100% { opacity: 0; transform: translateY(-95%) scale(1.30); } } /* Accent-glow neon ring on accent-bearing buttons (Create new game, Quick play, Blind Nil pill) — only in hot-spades. The accent token already drives their fill; this adds a soft outer-glow pulse so the buttons feel lit-up. */ body[data-theme="hot-spades"] .lobby__create-btn, body[data-theme="hot-spades"] .lobby__public-cta, body[data-theme="hot-spades"] .bid-btn--blind-nil { box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.85), 0 0 14px 2px rgba(255, 107, 26, 0.55), 0 4px 18px rgba(232, 35, 47, 0.35); animation: hotspades-button-glow 2.6s ease-in-out infinite; } @keyframes hotspades-button-glow { 0%, 100% { box-shadow: 0 0 0 1px rgba(255, 107, 26, 0.85), 0 0 12px 2px rgba(255, 107, 26, 0.45), 0 4px 18px rgba(232, 35, 47, 0.30); } 50% { box-shadow: 0 0 0 1px rgba(255, 170, 0, 0.95), 0 0 22px 6px rgba(255, 107, 26, 0.75), 0 6px 26px rgba(232, 35, 47, 0.55); } } /* Honor prefers-reduced-motion — kill ALL keyframe animations so users with motion sensitivity see steady high-glow + no rising cinders (cinders are pure decoration, safe to hide). */ @media (prefers-reduced-motion: reduce) { body[data-theme="hot-spades"] .play-surface::before { animation: none; opacity: 0.85; } body[data-theme="hot-spades"] .play-surface::after { animation: none; opacity: 0; } body[data-theme="hot-spades"] .lobby__create-btn, body[data-theme="hot-spades"] .lobby__public-cta, body[data-theme="hot-spades"] .bid-btn--blind-nil { animation: none; } }