/* Per-location game-board theming. * * Activated by the .story-mode class on (added by main.js when a * story-mode battle launches). Each location gets its own .location-XXX * class that retints felt, table edges, accents, and card borders. * * Classic mode never sees these styles because won't have the * .story-mode class — original game.css remains the single source of * truth for default appearance. */ /* ---------- shared story-mode tweaks ---------- */ body.story-mode #cards-section, body.story-mode #players, body.story-mode #bar { /* Slightly transparent so the location bg wash bleeds through */ background-color: transparent; } /* Player portrait — fully opaque so the character reads clearly, with a soft edge fade so it still blends into the card. The classic-mode default uses opacity:0.55 (whole image dimmed) — that reads as "ghosted through the table" in story mode. */ body.story-mode .player-portrait { opacity: 1; mask-image: radial-gradient(ellipse 110% 100% at 80% 100%, black 55%, transparent 95%); -webkit-mask-image: radial-gradient(ellipse 110% 100% at 80% 100%, black 55%, transparent 95%); } body.story-mode .player.dead .player-portrait { opacity: 0.45; } /* Stage modal in story mode: drop the opaque backdrop so the body's animated location bg pans through behind the stage actor. The basic game view (bar + players) is hidden whenever the stage is showing — otherwise we'd see two table layers fighting through each other. */ body.story-mode #stage:not(.hidden) ~ #game-container { visibility: hidden; } body.story-mode #stage:not(.hidden) #stage-backdrop { background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.55) 100%) !important; } /* In story mode the top-of-screen chrome (RICE STREET wordmark + rule book link) breaks immersion — the player is in the salon, not on a product page. Hide the wordmark and the rules link; keep log, settings, and the exposed-cards toggle since they're in-game tools. */ body.story-mode #top-toolbar h1, body.story-mode #rules-btn { display: none !important; } /* Story mode never sees the homepage setup/lobby/multiplayer chrome. Hide via CSS as soon as the parser encounters these elements so they don't flash for the seconds it takes the async story bootstrap to run. The body.story-mode class is set synchronously by an inline script at the top of , so by the time #setup parses these rules apply. */ body.story-mode #setup, body.story-mode #lobby, body.story-mode #counter-section { display: none !important; } /* Also hide the "Your character" setting row inside Settings while in campaign mode — the story locks the PC to Reynard, so the picker is a distraction. */ body.story-mode #settings-modal .setting-row:has(#character-picker-preview) { display: none !important; } body.story-mode .player { border-color: var(--loc-accent, rgba(212,175,55,0.4)); box-shadow: 0 0 12px var(--loc-glow, rgba(0,0,0,0.5)); transition: border-color 0.4s, box-shadow 0.4s; } body.story-mode .card, body.story-mode .card-back { border-color: var(--loc-card-border, rgba(40,40,40,0.6)); } /* Page background — two stacked fixed pseudo-elements behind body content: * ::before = location image, scaled slightly larger than viewport, * slowly panning side-to-side via translateX. The image is landscape, * so the pan surfaces parts of the venue you'd otherwise never see * and makes the room feel inhabited. * ::after = static accent vignette painted over the moving image so * the edges fade and the cards stay readable. * Both are z-index: -1 (behind body content); they stack in DOM source * order, so ::after paints over ::before. body itself is just the * fallback floor color. */ body.story-mode { background: #050505; min-height: 100vh; min-height: 100dvh; } body.story-mode::before, body.story-mode::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body.story-mode::before { background: var(--loc-bg-image, none) center / cover no-repeat; /* Scale 1.18 so a ±7% translateX pan never reveals the image edge. 25s alternates — full left→right sweep in 25s, right→left in the next 25s, so a single pan cycle takes 50s. Slow enough to feel ambient, fast enough to notice. */ transform: scale(1.18) translateX(0); animation: loc-bg-pan 25s ease-in-out infinite alternate; will-change: transform; } body.story-mode::after { background: radial-gradient(ellipse at center, transparent 35%, var(--loc-tint, rgba(0,0,0,0.55)) 100%); } @keyframes loc-bg-pan { from { transform: scale(1.18) translateX(-7%); } to { transform: scale(1.18) translateX(7%); } } /* Honor reduced-motion: show a static, slightly-zoomed image instead. */ @media (prefers-reduced-motion: reduce) { body.story-mode::before { animation: none; transform: scale(1.05); } } /* Bar = light tinted glass. The page background reads through; the bar just supplies a subtle felt-color wash + accent border so it still reads as a distinct element. NO dark image overlay. */ body.story-mode #bar { background: linear-gradient(180deg, color-mix(in srgb, var(--loc-felt-mid, rgba(26,77,51,1)) 55%, transparent), color-mix(in srgb, var(--loc-felt-deep, rgba(10,41,27,1)) 70%, transparent)) !important; border-top: 2px solid var(--loc-accent, rgba(212,175,55,0.6)); border-bottom: 2px solid var(--loc-accent, rgba(212,175,55,0.6)); backdrop-filter: blur(4px); } /* Slot labels (Hand / Settled / Bar / etc.) are too low-contrast against a busy location image. Brighten them in story mode and add a shadow so they read against any background. */ body.story-mode .slot-label, body.story-mode .bar-total-prev { color: var(--ivory) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.9), 0 0 6px rgba(0,0,0,0.6); font-weight: 600; } /* Rule pills — table rules ride on the right side of the bar; player perks ride directly under the user's avatar. Both pick up the location accent so they feel like part of the venue, not bolted-on UI. */ .rule-pills { display: flex; flex-wrap: wrap; gap: 4px; } .rule-pills-table { margin-left: auto; align-self: center; max-width: 40%; justify-content: flex-end; } .rule-pills-perk { /* Perks stack vertically in the top-right corner of the player card, starting just below the score counter and dropping down. They are always visible — they're persistent buffs, not in-flight state. */ position: absolute; top: 38px; right: 8px; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 3; max-width: 50%; } .rule-pill { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,0.55); border: 1px solid rgba(212,175,55,0.45); color: var(--ivory); white-space: nowrap; text-shadow: 0 1px 1px rgba(0,0,0,0.8); } body.story-mode .rule-pill { background: color-mix(in srgb, var(--loc-felt-deep, rgba(0,0,0,0.7)) 75%, transparent); border-color: var(--loc-accent, rgba(212,175,55,0.5)); color: var(--ivory); } body.story-mode .rule-pill-perk { /* Perks are buffs the player owns — tint with the bullet color so they read as "yours" against the table's neutral. */ border-color: var(--loc-bullet-hot, var(--loc-accent, #ffd060)); box-shadow: 0 0 6px color-mix(in srgb, var(--loc-bullet-hot, #ffd060) 35%, transparent); } body.story-mode .rule-pill-boss { /* Boss perks — red/danger tint so it reads as "they have this, watch it". */ background: rgba(80,10,10,0.75); border-color: rgba(255,70,70,0.7); color: #ffb0b0; box-shadow: 0 0 6px rgba(255,40,40,0.35); } .rule-pills-boss { position: absolute; top: 38px; right: 8px; flex-direction: column; align-items: flex-end; gap: 4px; z-index: 3; max-width: 50%; } /* Both bars (the sticky main #bar and the stage modal's mini #stage-bar) now share the same DOM structure: compact-left column on the left, a cards row in the middle, table-rule pills on the right. Layout is the same; the per-element classes handle sizing differences. */ body.story-mode #bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; text-align: left; /* override game.css's centered legacy alignment */ } body.story-mode #bar > .bar-compact-left { display: flex; flex-direction: column; align-items: flex-start; flex-shrink: 0; min-width: 90px; } body.story-mode #bar > .bar-cards { flex: 1 1 auto; } /* Center the bar-total within its column even though parent is left-aligned. In the main bar the total is the headline number; the column width is enough for it to read clearly without competing with the cards row. */ body.story-mode #bar > .bar-compact-left > #bar-total { margin-bottom: 4px; } body.story-mode #bar > .bar-compact-left > #deck-count { margin-top: 2px; font-size: 10px; letter-spacing: 1.5px; color: var(--ash); } /* The cards row in the main bar shouldn't have the legacy left-padding offset (it was centering itself against the bar's old text-align:center). With flex layout, anchor naturally. */ body.story-mode #bar > #bar-cards { padding-left: 44px; /* keep the overlap-offset so the leftmost card isn't clipped */ justify-content: flex-start; } /* Team-mode game-over screen — show the team name and all members' portraits, no cards. Different ask from the solo win-screen, which spotlights a single winner with their hand. */ .go-team-block { display: flex; flex-direction: column; align-items: center; gap: 14px; margin: 14px 0 18px; } .go-team-ribbon { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; letter-spacing: 6px; padding: 8px 32px; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--team-color, #888) 88%, #fff), var(--team-color, #888), color-mix(in srgb, var(--team-color, #888) 70%, #000)); border-top: 1px solid color-mix(in srgb, var(--team-color, #888) 50%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--team-color, #888) 60%, #000); text-shadow: 0 2px 4px rgba(0,0,0,0.85); box-shadow: 0 4px 14px rgba(0,0,0,0.6); clip-path: polygon( 12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0% 50%); } .go-team-members { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; max-width: 600px; } .go-team-member { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 88px; } .go-team-portrait { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: center top; border: 2px solid var(--gold, #d4af37); box-shadow: 0 0 12px rgba(0,0,0,0.7); background: rgba(0,0,0,0.5); } .go-team-member.fallen .go-team-portrait { filter: grayscale(1); opacity: 0.45; } .go-team-name { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ivory, #f5e8c0); text-shadow: 0 1px 2px rgba(0,0,0,0.8); } .go-team-member.fallen .go-team-name { color: rgba(200,200,200,0.5); text-decoration: line-through; } /* Team ribbon — diagonal corner banner anchored at the bottom-right of the character card (think "SALE" sticker on a product photo). The card already has overflow:hidden in game.css so the ribbon ends naturally clip at the corner edges — no need to compute exact widths. */ body.story-mode .player { position: relative; /* anchors the ribbon */ } .team-ribbon { position: absolute; /* Anchor at bottom-right and rotate -45° around that point. The ribbon overshoots the card corner; the card's overflow:hidden clips the ends into a clean diagonal stripe. */ right: -38px; bottom: 22px; width: 130px; text-align: center; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; font-weight: 800; padding: 3px 0; color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--team-color, #888) 88%, #fff), var(--team-color, #888), color-mix(in srgb, var(--team-color, #888) 70%, #000)); border-top: 1px solid color-mix(in srgb, var(--team-color, #888) 50%, #fff); border-bottom: 1px solid color-mix(in srgb, var(--team-color, #888) 60%, #000); text-shadow: 0 1px 2px rgba(0,0,0,0.85); box-shadow: 0 2px 6px rgba(0,0,0,0.55); transform: rotate(-45deg); transform-origin: center center; z-index: 4; pointer-events: none; } /* Loaded chambers in the revolver — recolor per location so bullets read thematically (gold in the salon, hot pink in the cabaret, blood red in the pit, etc.) while still being saturated enough to register as "danger" against any backdrop. Empty chambers stay neutral steel. */ body.story-mode .chamber.loaded { background: radial-gradient(circle at 35% 30%, var(--loc-bullet-hot, #ff6b6b) 0%, var(--loc-bullet, #c41212) 50%, var(--loc-bullet-deep, #6a0404) 100%) !important; box-shadow: 0 0 5px var(--loc-bullet, rgba(255,0,0,0.7)), inset 0 0 2px #000 !important; } body.story-mode .revolver { background: linear-gradient(180deg, color-mix(in srgb, var(--loc-felt-deep, #2a2a2a) 80%, #2a2a2a), color-mix(in srgb, var(--loc-felt-edge, #111) 80%, #111)) !important; border-color: var(--loc-accent, #333) !important; } body.story-mode .revolver-count { color: var(--loc-bullet-hot, var(--danger)) !important; } /* Stage modal backdrop — show the actual location interior dimmed (the modal is a focused overlay so it can be heavier than the bar). */ body.story-mode #stage-backdrop { background: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.78)), var(--loc-bg-image, none) center/cover no-repeat, radial-gradient(ellipse at center, var(--loc-felt-mid, rgba(26,77,51,0.96)) 0%, var(--loc-felt-edge, rgba(8,24,15,1)) 100%) !important; } /* Stage modal's mini-bar (the focused turn-spotlight panel) — match the main bar's location-tinted glass so the salon doesn't have a green felt strip floating in the middle of an oxblood scene. */ body.story-mode #stage .stage-bar { background: linear-gradient(180deg, color-mix(in srgb, var(--loc-felt-mid, rgba(26,77,51,1)) 65%, transparent), color-mix(in srgb, var(--loc-felt-deep, rgba(10,41,27,1)) 80%, transparent)) !important; border-color: var(--loc-accent, rgba(212,175,55,0.4)) !important; backdrop-filter: blur(6px); } /* ---------- per-location accent palettes ---------- Each location defines: --loc-accent borders, table edges --loc-glow player-card halo --loc-tint full-page vignette tint --loc-card-border playing-card border tint --loc-felt-* bar gradient stops (mid/deep/edge) And a #stage-backdrop image override pulling the location's interior bg. */ body.story-mode.location-main_entrance { --loc-accent: rgba(212,175,55,0.6); --loc-glow: rgba(212,175,55,0.25); --loc-tint: rgba(20,40,28,0.55); --loc-card-border: rgba(80,60,20,0.7); --loc-felt-mid: rgba(26,77,51,0.95); --loc-felt-deep: rgba(10,41,27,0.97); --loc-felt-edge: rgba(8,24,15,1); --loc-bg-image: url('../bg/inside-01-main-floor.jpg'); --loc-bullet-hot: #ffd060; --loc-bullet: #c8941a; --loc-bullet-deep: #5a3a08; } body.story-mode.location-salon { --loc-accent: rgba(240,216,121,0.7); --loc-glow: rgba(240,216,121,0.3); --loc-tint: rgba(40,18,28,0.65); --loc-card-border: rgba(80,52,20,0.75); /* Salon = oxblood velvet + brass, not green felt. */ --loc-felt-mid: rgba(80,30,38,0.92); --loc-felt-deep: rgba(46,16,22,0.96); --loc-felt-edge: rgba(20,8,12,1); --loc-bg-image: url('../bg/inside-02-salon.jpg'); --loc-bullet-hot: #ffe48a; --loc-bullet: #d4a534; --loc-bullet-deep: #5a3a0a; } body.story-mode.location-cabaret { --loc-accent: rgba(232,121,165,0.7); --loc-glow: rgba(232,121,165,0.3); --loc-tint: rgba(60,10,30,0.6); --loc-card-border: rgba(80,20,40,0.7); --loc-felt-mid: rgba(80,20,38,0.95); --loc-felt-deep: rgba(46,8,22,0.97); --loc-felt-edge: rgba(20,2,10,1); --loc-bg-image: url('../bg/inside-03-cabaret.jpg'); --loc-bullet-hot: #ff8ac4; --loc-bullet: #d2317a; --loc-bullet-deep: #5a0c2c; } body.story-mode.location-rooftop_spa { --loc-accent: rgba(102,204,255,0.7); --loc-glow: rgba(102,204,255,0.3); --loc-tint: rgba(15,20,50,0.55); --loc-card-border: rgba(40,80,120,0.7); --loc-felt-mid: rgba(20,40,72,0.95); --loc-felt-deep: rgba(12,24,52,0.97); --loc-felt-edge: rgba(6,10,28,1); --loc-bg-image: url('../bg/inside-04-rooftop-spa.jpg'); --loc-bullet-hot: #b0e8ff; --loc-bullet: #4ab8e0; --loc-bullet-deep: #0c4060; } body.story-mode.location-cigar_lounge { --loc-accent: rgba(200,154,74,0.7); --loc-glow: rgba(200,154,74,0.3); --loc-tint: rgba(30,15,5,0.65); --loc-card-border: rgba(80,55,20,0.7); --loc-felt-mid: rgba(56,32,16,0.95); --loc-felt-deep: rgba(28,18,8,0.97); --loc-felt-edge: rgba(12,8,4,1); --loc-bg-image: url('../bg/inside-05-cigar-lounge.jpg'); --loc-bullet-hot: #ffb060; --loc-bullet: #c87018; --loc-bullet-deep: #4a2408; } body.story-mode.location-counting_room { --loc-accent: rgba(200,232,144,0.65); --loc-glow: rgba(160,200,120,0.25); --loc-tint: rgba(15,25,15,0.6); --loc-card-border: rgba(60,80,40,0.7); --loc-felt-mid: rgba(28,40,24,0.95); --loc-felt-deep: rgba(14,22,12,0.97); --loc-felt-edge: rgba(6,12,6,1); --loc-bg-image: url('../bg/inside-06-counting-room.jpg'); --loc-bullet-hot: #d4ff80; --loc-bullet: #7ac030; --loc-bullet-deep: #2a4a0a; } body.story-mode.location-sportsbook { --loc-accent: rgba(74,220,138,0.7); --loc-glow: rgba(74,220,138,0.25); --loc-tint: rgba(8,40,20,0.55); --loc-card-border: rgba(20,60,30,0.7); --loc-felt-mid: rgba(20,72,42,0.95); --loc-felt-deep: rgba(10,40,22,0.97); --loc-felt-edge: rgba(4,18,10,1); --loc-bg-image: url('../bg/inside-07-sportsbook.jpg'); --loc-bullet-hot: #80ffaa; --loc-bullet: #28c060; --loc-bullet-deep: #0a4020; } body.story-mode.location-diner { --loc-accent: rgba(255,90,90,0.7); --loc-glow: rgba(255,90,90,0.25); --loc-tint: rgba(40,8,8,0.55); --loc-card-border: rgba(80,20,20,0.7); --loc-felt-mid: rgba(64,18,18,0.95); --loc-felt-deep: rgba(34,10,10,0.97); --loc-felt-edge: rgba(14,4,4,1); --loc-bg-image: url('../bg/inside-08-diner.jpg'); --loc-bullet-hot: #ff9a9a; --loc-bullet: #e03030; --loc-bullet-deep: #5a0808; } body.story-mode.location-koi_lounge { --loc-accent: rgba(255,138,170,0.7); --loc-glow: rgba(255,138,170,0.3); --loc-tint: rgba(50,8,20,0.6); --loc-card-border: rgba(80,20,40,0.7); --loc-felt-mid: rgba(70,16,32,0.95); --loc-felt-deep: rgba(40,8,18,0.97); --loc-felt-edge: rgba(18,2,10,1); --loc-bg-image: url('../bg/inside-09-koi-lounge.jpg'); --loc-bullet-hot: #ffb0c8; --loc-bullet: #e8508a; --loc-bullet-deep: #5a0a28; } body.story-mode.location-chapel { --loc-accent: rgba(255,182,224,0.75); --loc-glow: rgba(255,182,224,0.35); --loc-tint: rgba(70,30,55,0.5); --loc-card-border: rgba(110,60,90,0.7); --loc-felt-mid: rgba(96,40,76,0.95); --loc-felt-deep: rgba(56,22,46,0.97); --loc-felt-edge: rgba(24,10,22,1); --loc-bg-image: url('../bg/inside-10-chapel.jpg'); --loc-bullet-hot: #ffd0e8; --loc-bullet: #d878b0; --loc-bullet-deep: #5a2848; } body.story-mode.location-fight_pit { --loc-accent: rgba(255,48,48,0.85); --loc-glow: rgba(255,48,48,0.4); --loc-tint: rgba(40,5,5,0.7); --loc-card-border: rgba(80,20,20,0.8); --loc-felt-mid: rgba(70,12,12,0.95); --loc-felt-deep: rgba(36,6,6,0.97); --loc-felt-edge: rgba(14,2,2,1); --loc-bg-image: url('../bg/inside-11-fight-pit.jpg'); --loc-bullet-hot: #ff5a5a; --loc-bullet: #d40000; --loc-bullet-deep: #4a0000; } body.story-mode.location-devils_lair { --loc-accent: rgba(255,125,87,0.85); --loc-glow: rgba(255,80,40,0.4); --loc-tint: rgba(50,8,5,0.7); --loc-card-border: rgba(80,20,10,0.85); --loc-felt-mid: rgba(80,16,10,0.95); --loc-felt-deep: rgba(40,8,6,0.97); --loc-felt-edge: rgba(16,3,2,1); --loc-bg-image: url('../bg/inside-12-devils-lair.jpg'); --loc-bullet-hot: #ff9050; --loc-bullet: #e84020; --loc-bullet-deep: #5a1008; } /* --- Four new locations: gulf / vault / seance / under-table --- */ body.story-mode.location-gulf { --loc-accent: rgba(159,228,208,0.75); --loc-glow: rgba(120,200,200,0.3); --loc-tint: rgba(6,36,44,0.65); --loc-card-border: rgba(30,70,90,0.75); --loc-felt-mid: rgba(14,62,72,0.95); --loc-felt-deep: rgba(6,34,40,0.97); --loc-felt-edge: rgba(2,14,18,1); --loc-bg-image: url('../bg/inside-13-gulf.jpg'); /* Bioluminescent-pale bullets against teal water. */ --loc-bullet-hot: #c8ffe8; --loc-bullet: #5ac8b0; --loc-bullet-deep: #0a4048; } body.story-mode.location-vault { --loc-accent: rgba(216,192,120,0.8); --loc-glow: rgba(200,160,80,0.35); --loc-tint: rgba(28,22,8,0.7); --loc-card-border: rgba(80,60,28,0.8); --loc-felt-mid: rgba(44,54,28,0.95); --loc-felt-deep: rgba(22,28,12,0.97); --loc-felt-edge: rgba(8,12,4,1); --loc-bg-image: url('../bg/inside-14-vault.jpg'); /* Banker-lamp amber against the green felt of a counting table. */ --loc-bullet-hot: #ffd870; --loc-bullet: #d09820; --loc-bullet-deep: #5a3a08; } body.story-mode.location-seance_chamber { --loc-accent: rgba(228,160,112,0.8); --loc-glow: rgba(200,120,80,0.3); --loc-tint: rgba(36,14,50,0.7); --loc-card-border: rgba(80,40,90,0.8); --loc-felt-mid: rgba(56,22,70,0.95); --loc-felt-deep: rgba(30,12,42,0.97); --loc-felt-edge: rgba(12,4,18,1); --loc-bg-image: url('../bg/inside-15-seance.jpg'); /* Candle-flame warm orange against deep occult purple. */ --loc-bullet-hot: #ffc878; --loc-bullet: #e4802a; --loc-bullet-deep: #5a2808; } body.story-mode.location-under_table { --loc-accent: rgba(200,216,232,0.8); --loc-glow: rgba(150,180,210,0.3); --loc-tint: rgba(26,20,14,0.7); --loc-card-border: rgba(70,60,50,0.8); --loc-felt-mid: rgba(40,40,48,0.95); --loc-felt-deep: rgba(22,24,30,0.97); --loc-felt-edge: rgba(8,10,14,1); --loc-bg-image: url('../bg/inside-16-under-table.jpg'); /* Cold electric cyan against sepia — the glitch-chamber. */ --loc-bullet-hot: #a8f0ff; --loc-bullet: #48c8e0; --loc-bullet-deep: #0a3a4a; } body.story-mode.location-racetrack { --loc-accent: rgba(216,184,120,0.8); --loc-glow: rgba(200,160,90,0.3); --loc-tint: rgba(22,30,20,0.7); --loc-card-border: rgba(80,70,40,0.8); --loc-felt-mid: rgba(44,60,36,0.95); --loc-felt-deep: rgba(22,32,18,0.97); --loc-felt-edge: rgba(8,12,4,1); --loc-bg-image: url('../bg/inside-17-racetrack.jpg'); --loc-bullet-hot: #ffe080; --loc-bullet: #d09820; --loc-bullet-deep: #5a3a08; } body.story-mode.location-furrier { --loc-accent: rgba(216,168,104,0.8); --loc-glow: rgba(200,140,70,0.3); --loc-tint: rgba(34,22,12,0.7); --loc-card-border: rgba(80,58,30,0.8); --loc-felt-mid: rgba(56,36,18,0.95); --loc-felt-deep: rgba(28,18,8,0.97); --loc-felt-edge: rgba(12,8,4,1); --loc-bg-image: url('../bg/inside-18-furrier.jpg'); --loc-bullet-hot: #ffc070; --loc-bullet: #d08028; --loc-bullet-deep: #5a2808; } body.story-mode.location-print_shop { --loc-accent: rgba(200,168,104,0.8); --loc-glow: rgba(180,140,80,0.3); --loc-tint: rgba(24,18,10,0.7); --loc-card-border: rgba(70,54,28,0.8); --loc-felt-mid: rgba(40,30,18,0.95); --loc-felt-deep: rgba(22,16,8,0.97); --loc-felt-edge: rgba(10,6,2,1); --loc-bg-image: url('../bg/inside-19-print-shop.jpg'); /* Printer's ink — black to rose-red — with sepia floor. */ --loc-bullet-hot: #ffb080; --loc-bullet: #d06038; --loc-bullet-deep: #401808; } body.story-mode.location-docks { --loc-accent: rgba(168,200,232,0.8); --loc-glow: rgba(120,180,220,0.3); --loc-tint: rgba(8,16,28,0.7); --loc-card-border: rgba(40,60,80,0.8); --loc-felt-mid: rgba(20,36,56,0.95); --loc-felt-deep: rgba(10,20,36,0.97); --loc-felt-edge: rgba(4,8,16,1); --loc-bg-image: url('../bg/inside-20-docks.jpg'); --loc-bullet-hot: #c0e0ff; --loc-bullet: #5090c8; --loc-bullet-deep: #0a3048; } body.story-mode.location-penthouse { --loc-accent: rgba(232,212,112,0.85); --loc-glow: rgba(200,170,60,0.35); --loc-tint: rgba(10,8,18,0.75); --loc-card-border: rgba(60,50,80,0.8); --loc-felt-mid: rgba(20,18,30,0.95); --loc-felt-deep: rgba(10,8,16,0.97); --loc-felt-edge: rgba(4,2,8,1); --loc-bg-image: url('../bg/inside-21-penthouse.jpg'); /* Gold bullets against black marble — the stolen-crown vibe. */ --loc-bullet-hot: #ffe080; --loc-bullet: #d8b040; --loc-bullet-deep: #4a3808; } body.story-mode.location-archives { --loc-accent: rgba(184,212,120,0.75); --loc-glow: rgba(140,180,80,0.3); --loc-tint: rgba(18,22,14,0.7); --loc-card-border: rgba(60,70,36,0.8); --loc-felt-mid: rgba(32,44,22,0.95); --loc-felt-deep: rgba(16,22,10,0.97); --loc-felt-edge: rgba(6,10,4,1); --loc-bg-image: url('../bg/inside-22-archives.jpg'); /* Banker-lamp amber — same as vault. */ --loc-bullet-hot: #ffd870; --loc-bullet: #c89820; --loc-bullet-deep: #5a3a08; } /* =========================================================== * 28 expansion locations. Each uses one of eight shared palettes * (ruby/green/rose/jade/steel/aqua/amber/violet) and supplies its * own --loc-bg-image. Palettes are duplicated inline (CSS has no * @apply / mixins). Keeps the fallback --loc-* defaults intact * for any location that forgets a var. * =========================================================== */ /* --- RUBY palette: deep red + gold (luxury, opera, limo) --- */ body.story-mode.location-penthouse_suite, body.story-mode.location-limo_interior, body.story-mode.location-opera_house, body.story-mode.location-orchestra_pit, body.story-mode.location-train_bar_car { --loc-accent: rgba(232,80,80,0.75); --loc-glow: rgba(200,60,60,0.3); --loc-tint: rgba(40,10,14,0.7); --loc-card-border: rgba(80,24,28,0.8); --loc-felt-mid: rgba(72,20,24,0.95); --loc-felt-deep: rgba(36,10,12,0.97); --loc-felt-edge: rgba(14,4,6,1); --loc-bullet-hot: #ff9090; --loc-bullet: #d03030; --loc-bullet-deep: #5a0808; } body.story-mode.location-penthouse_suite { --loc-bg-image: url('../bg/inside-23-penthouse-suite.jpg'); } body.story-mode.location-limo_interior { --loc-bg-image: url('../bg/inside-26-limo-interior.jpg'); } body.story-mode.location-opera_house { --loc-bg-image: url('../bg/inside-41-opera-house.jpg'); } body.story-mode.location-orchestra_pit { --loc-bg-image: url('../bg/inside-44-orchestra-pit.jpg'); } body.story-mode.location-train_bar_car { --loc-bg-image: url('../bg/inside-50-train-bar-car.jpg'); } /* --- GREEN palette: banker / money-room --- */ body.story-mode.location-cashcage_backroom { --loc-accent: rgba(156,255,87,0.75); --loc-glow: rgba(100,200,50,0.3); --loc-tint: rgba(12,22,10,0.7); --loc-card-border: rgba(40,80,30,0.8); --loc-felt-mid: rgba(24,56,22,0.95); --loc-felt-deep: rgba(12,30,10,0.97); --loc-felt-edge: rgba(4,12,4,1); --loc-bg-image: url('../bg/inside-24-cashcage-backroom.jpg'); --loc-bullet-hot: #d0ff90; --loc-bullet: #60c028; --loc-bullet-deep: #205018; } /* --- ROSE palette: cabaret / glamour / rose-pink --- */ body.story-mode.location-vip_dressing_room, body.story-mode.location-rehearsal_hall, body.story-mode.location-makeup_counter, body.story-mode.location-back_alley { --loc-accent: rgba(255,138,170,0.75); --loc-glow: rgba(232,100,150,0.3); --loc-tint: rgba(44,12,24,0.7); --loc-card-border: rgba(80,30,48,0.8); --loc-felt-mid: rgba(72,22,40,0.95); --loc-felt-deep: rgba(36,10,20,0.97); --loc-felt-edge: rgba(14,4,8,1); --loc-bullet-hot: #ffb0c8; --loc-bullet: #e8508a; --loc-bullet-deep: #5a0a28; } body.story-mode.location-vip_dressing_room { --loc-bg-image: url('../bg/inside-25-vip-dressing-room.jpg'); } body.story-mode.location-rehearsal_hall { --loc-bg-image: url('../bg/inside-42-rehearsal-hall.jpg'); } body.story-mode.location-makeup_counter { --loc-bg-image: url('../bg/inside-43-makeup-counter.jpg'); } body.story-mode.location-back_alley { --loc-bg-image: url('../bg/inside-39-back-alley.jpg'); } /* --- JADE palette: zen / calculating --- */ body.story-mode.location-rooftop_garden, body.story-mode.location-betting_pit { --loc-accent: rgba(136,220,180,0.75); --loc-glow: rgba(100,180,140,0.3); --loc-tint: rgba(10,24,20,0.7); --loc-card-border: rgba(40,80,60,0.8); --loc-felt-mid: rgba(24,64,48,0.95); --loc-felt-deep: rgba(12,32,24,0.97); --loc-felt-edge: rgba(4,14,10,1); --loc-bullet-hot: #a0ffcc; --loc-bullet: #40b080; --loc-bullet-deep: #104a30; } body.story-mode.location-rooftop_garden { --loc-bg-image: url('../bg/inside-27-rooftop-garden.jpg'); } body.story-mode.location-betting_pit { --loc-bg-image: url('../bg/inside-35-betting-pit.jpg'); } /* --- STEEL palette: concrete, industrial, shadow --- */ body.story-mode.location-underground_parking, body.story-mode.location-loading_dock, body.story-mode.location-warehouse { --loc-accent: rgba(180,190,200,0.7); --loc-glow: rgba(140,160,180,0.25); --loc-tint: rgba(14,16,20,0.7); --loc-card-border: rgba(60,70,80,0.8); --loc-felt-mid: rgba(36,40,48,0.95); --loc-felt-deep: rgba(18,22,28,0.97); --loc-felt-edge: rgba(6,8,12,1); --loc-bullet-hot: #c0d0e0; --loc-bullet: #6080a0; --loc-bullet-deep: #203040; } body.story-mode.location-underground_parking { --loc-bg-image: url('../bg/inside-28-underground-parking.jpg'); } body.story-mode.location-loading_dock { --loc-bg-image: url('../bg/inside-38-loading-dock.jpg'); } body.story-mode.location-warehouse { --loc-bg-image: url('../bg/inside-40-warehouse.jpg'); } /* --- AQUA palette: underwater / gulf --- */ body.story-mode.location-gulf_reef, body.story-mode.location-pearl_farm, body.story-mode.location-floating_barge, body.story-mode.location-shipwreck_lounge { --loc-accent: rgba(159,228,208,0.75); --loc-glow: rgba(120,200,200,0.3); --loc-tint: rgba(6,36,44,0.65); --loc-card-border: rgba(30,70,90,0.75); --loc-felt-mid: rgba(14,62,72,0.95); --loc-felt-deep: rgba(6,34,40,0.97); --loc-felt-edge: rgba(2,14,18,1); --loc-bullet-hot: #c8ffe8; --loc-bullet: #5ac8b0; --loc-bullet-deep: #0a4048; } body.story-mode.location-gulf_reef { --loc-bg-image: url('../bg/inside-29-gulf-reef.jpg'); } body.story-mode.location-pearl_farm { --loc-bg-image: url('../bg/inside-30-pearl-farm.jpg'); } body.story-mode.location-floating_barge { --loc-bg-image: url('../bg/inside-31-floating-barge.jpg'); } body.story-mode.location-shipwreck_lounge { --loc-bg-image: url('../bg/inside-32-shipwreck-lounge.jpg'); } /* --- AMBER palette: tracks / tailors / speakeasy — warm old-world --- */ body.story-mode.location-racetrack_paddock, body.story-mode.location-jockey_quarters, body.story-mode.location-stables, body.story-mode.location-tailor_shop, body.story-mode.location-speakeasy { --loc-accent: rgba(232,180,100,0.78); --loc-glow: rgba(200,150,70,0.3); --loc-tint: rgba(28,20,10,0.7); --loc-card-border: rgba(80,60,28,0.8); --loc-felt-mid: rgba(64,44,22,0.95); --loc-felt-deep: rgba(30,20,10,0.97); --loc-felt-edge: rgba(12,8,4,1); --loc-bullet-hot: #ffd080; --loc-bullet: #d09028; --loc-bullet-deep: #5a3a08; } body.story-mode.location-racetrack_paddock { --loc-bg-image: url('../bg/inside-33-racetrack-paddock.jpg'); } body.story-mode.location-jockey_quarters { --loc-bg-image: url('../bg/inside-34-jockey-quarters.jpg'); } body.story-mode.location-stables { --loc-bg-image: url('../bg/inside-36-stables.jpg'); } body.story-mode.location-tailor_shop { --loc-bg-image: url('../bg/inside-37-tailor-shop.jpg'); } body.story-mode.location-speakeasy { --loc-bg-image: url('../bg/inside-49-speakeasy.jpg'); } /* --- VIOLET palette: occult / crypts / old-church --- */ body.story-mode.location-crypt, body.story-mode.location-fortune_booth, body.story-mode.location-crossroads, body.story-mode.location-old_church { --loc-accent: rgba(200,150,232,0.78); --loc-glow: rgba(160,110,200,0.3); --loc-tint: rgba(30,14,44,0.7); --loc-card-border: rgba(70,40,90,0.8); --loc-felt-mid: rgba(50,24,70,0.95); --loc-felt-deep: rgba(26,12,42,0.97); --loc-felt-edge: rgba(10,4,18,1); --loc-bullet-hot: #e0a8ff; --loc-bullet: #9040d0; --loc-bullet-deep: #3a0860; } body.story-mode.location-crypt { --loc-bg-image: url('../bg/inside-45-crypt.jpg'); } body.story-mode.location-fortune_booth { --loc-bg-image: url('../bg/inside-46-fortune-booth.jpg'); } body.story-mode.location-crossroads { --loc-bg-image: url('../bg/inside-47-crossroads.jpg'); } body.story-mode.location-old_church { --loc-bg-image: url('../bg/inside-48-old-church.jpg'); } /* --- v11 international expansion: 18 globe-trotting venues --- */ body.story-mode.location-ice_cave { --loc-bg-image: url('../bg/inside-51-ice-cave.jpg'); --loc-bullet-hot:#d0f0ff; --loc-bullet:#5090c8; --loc-bullet-deep:#0a3048; --loc-felt-mid:rgba(20,40,60,0.95); --loc-felt-deep:rgba(10,20,36,0.97); --loc-felt-edge:rgba(2,6,12,1); --loc-accent:rgba(192,224,255,0.8); } body.story-mode.location-tropical_beach { --loc-bg-image: url('../bg/inside-52-tropical-beach.jpg'); --loc-bullet-hot:#ffe080; --loc-bullet:#e89028; --loc-bullet-deep:#5a3a08; --loc-felt-mid:rgba(40,72,80,0.95); --loc-felt-deep:rgba(18,36,40,0.97); --loc-felt-edge:rgba(4,12,16,1); --loc-accent:rgba(255,160,200,0.8); } body.story-mode.location-magma_cave { --loc-bg-image: url('../bg/inside-53-magma-cave.jpg'); --loc-bullet-hot:#ffb060; --loc-bullet:#e84020; --loc-bullet-deep:#5a1008; --loc-felt-mid:rgba(80,28,12,0.95); --loc-felt-deep:rgba(40,14,6,0.97); --loc-felt-edge:rgba(16,4,2,1); --loc-accent:rgba(255,140,80,0.85); } body.story-mode.location-factory_floor { --loc-bg-image: url('../bg/inside-54-factory-floor.jpg'); --loc-bullet-hot:#ffe080; --loc-bullet:#c8a020; --loc-bullet-deep:#5a3a08; --loc-felt-mid:rgba(36,40,48,0.95); --loc-felt-deep:rgba(18,22,28,0.97); --loc-felt-edge:rgba(6,8,12,1); --loc-accent:rgba(220,200,120,0.8); } body.story-mode.location-server_room { --loc-bg-image: url('../bg/inside-55-server-room.jpg'); --loc-bullet-hot:#a0ffe8; --loc-bullet:#28b0c8; --loc-bullet-deep:#0a3a4a; --loc-felt-mid:rgba(12,28,40,0.95); --loc-felt-deep:rgba(6,16,24,0.97); --loc-felt-edge:rgba(2,6,10,1); --loc-accent:rgba(120,255,232,0.8); } body.story-mode.location-desert_dunes { --loc-bg-image: url('../bg/inside-56-desert-dunes.jpg'); --loc-bullet-hot:#ffd080; --loc-bullet:#d09028; --loc-bullet-deep:#5a3a08; --loc-felt-mid:rgba(64,44,22,0.95); --loc-felt-deep:rgba(30,20,10,0.97); --loc-felt-edge:rgba(12,8,4,1); --loc-accent:rgba(255,208,128,0.78); } body.story-mode.location-western_saloon { --loc-bg-image: url('../bg/inside-57-western-saloon.jpg'); --loc-bullet-hot:#ffd080; --loc-bullet:#d08028; --loc-bullet-deep:#5a2808; --loc-felt-mid:rgba(56,32,16,0.95); --loc-felt-deep:rgba(28,18,8,0.97); --loc-felt-edge:rgba(12,8,4,1); --loc-accent:rgba(232,180,100,0.78); } body.story-mode.location-jail_cell { --loc-bg-image: url('../bg/inside-58-jail-cell.jpg'); --loc-bullet-hot:#ff9090; --loc-bullet:#d03030; --loc-bullet-deep:#5a0808; --loc-felt-mid:rgba(36,40,48,0.95); --loc-felt-deep:rgba(18,22,28,0.97); --loc-felt-edge:rgba(6,8,12,1); --loc-accent:rgba(220,220,180,0.7); } body.story-mode.location-nyc_street { --loc-bg-image: url('../bg/inside-59-nyc-street.jpg'); --loc-bullet-hot:#ffb0c8; --loc-bullet:#e8508a; --loc-bullet-deep:#5a0a28; --loc-felt-mid:rgba(40,30,20,0.95); --loc-felt-deep:rgba(20,15,10,0.97); --loc-felt-edge:rgba(8,6,4,1); --loc-accent:rgba(255,170,100,0.8); } body.story-mode.location-china_lanterns { --loc-bg-image: url('../bg/inside-60-china-lanterns.jpg'); --loc-bullet-hot:#ff9090; --loc-bullet:#d03030; --loc-bullet-deep:#5a0808; --loc-felt-mid:rgba(80,16,16,0.95); --loc-felt-deep:rgba(40,8,8,0.97); --loc-felt-edge:rgba(16,4,4,1); --loc-accent:rgba(255,210,80,0.85); } body.story-mode.location-india_bazaar { --loc-bg-image: url('../bg/inside-61-india-bazaar.jpg'); --loc-bullet-hot:#ffd870; --loc-bullet:#e8a028; --loc-bullet-deep:#5a3a08; --loc-felt-mid:rgba(72,30,40,0.95); --loc-felt-deep:rgba(36,15,20,0.97); --loc-felt-edge:rgba(14,6,8,1); --loc-accent:rgba(255,180,80,0.85); } body.story-mode.location-australian_outback { --loc-bg-image: url('../bg/inside-62-australian-outback.jpg'); --loc-bullet-hot:#ffb070; --loc-bullet:#d06028; --loc-bullet-deep:#5a2008; --loc-felt-mid:rgba(60,28,18,0.95); --loc-felt-deep:rgba(30,14,8,0.97); --loc-felt-edge:rgba(12,6,4,1); --loc-accent:rgba(255,180,100,0.8); } body.story-mode.location-deep_jungle { --loc-bg-image: url('../bg/inside-63-deep-jungle.jpg'); --loc-bullet-hot:#a0ffcc; --loc-bullet:#40b080; --loc-bullet-deep:#104a30; --loc-felt-mid:rgba(20,40,24,0.95); --loc-felt-deep:rgba(10,20,12,0.97); --loc-felt-edge:rgba(4,8,6,1); --loc-accent:rgba(160,255,180,0.8); } body.story-mode.location-mexican_fiesta { --loc-bg-image: url('../bg/inside-64-mexican-fiesta.jpg'); --loc-bullet-hot:#ff9090; --loc-bullet:#d03030; --loc-bullet-deep:#5a0808; --loc-felt-mid:rgba(64,24,40,0.95); --loc-felt-deep:rgba(32,12,20,0.97); --loc-felt-edge:rgba(12,4,8,1); --loc-accent:rgba(255,200,80,0.85); } body.story-mode.location-antarctica_igloo { --loc-bg-image: url('../bg/inside-65-antarctica-igloo.jpg'); --loc-bullet-hot:#c8e8ff; --loc-bullet:#5090c8; --loc-bullet-deep:#0a3048; --loc-felt-mid:rgba(16,32,48,0.95); --loc-felt-deep:rgba(8,16,24,0.97); --loc-felt-edge:rgba(2,6,10,1); --loc-accent:rgba(170,230,255,0.8); } body.story-mode.location-ancient_egypt { --loc-bg-image: url('../bg/inside-66-ancient-egypt.jpg'); --loc-bullet-hot:#ffd070; --loc-bullet:#c89028; --loc-bullet-deep:#5a3a08; --loc-felt-mid:rgba(40,28,12,0.95); --loc-felt-deep:rgba(20,14,6,0.97); --loc-felt-edge:rgba(8,6,2,1); --loc-accent:rgba(220,180,80,0.85); } body.story-mode.location-mount_olympus { --loc-bg-image: url('../bg/inside-67-mount-olympus.jpg'); --loc-bullet-hot:#e0c0ff; --loc-bullet:#9070c8; --loc-bullet-deep:#3a2060; --loc-felt-mid:rgba(40,30,60,0.95); --loc-felt-deep:rgba(20,15,30,0.97); --loc-felt-edge:rgba(8,6,12,1); --loc-accent:rgba(220,200,255,0.8); } body.story-mode.location-american_prairie { --loc-bg-image: url('../bg/inside-68-american-prairie.jpg'); --loc-bullet-hot:#ffd080; --loc-bullet:#d09028; --loc-bullet-deep:#5a3a08; --loc-felt-mid:rgba(56,40,18,0.95); --loc-felt-deep:rgba(28,20,9,0.97); --loc-felt-edge:rgba(12,8,4,1); --loc-accent:rgba(255,200,120,0.8); } body.story-mode.location-luxury_yacht { --loc-bg-image: url('../bg/inside-69-luxury-yacht.jpg'); --loc-bullet-hot:#ffd080; --loc-bullet:#d89028; --loc-bullet-deep:#5a3808; --loc-felt-mid:rgba(60,30,60,0.95); --loc-felt-deep:rgba(30,15,40,0.97); --loc-felt-edge:rgba(12,6,18,1); --loc-accent:rgba(255,200,160,0.85); } body.story-mode.location-pirate_ship { --loc-bg-image: url('../bg/inside-70-pirate-ship.jpg'); --loc-bullet-hot:#ffd080; --loc-bullet:#c07028; --loc-bullet-deep:#4a2408; --loc-felt-mid:rgba(40,24,12,0.95); --loc-felt-deep:rgba(20,12,6,0.97); --loc-felt-edge:rgba(8,4,2,1); --loc-accent:rgba(230,190,120,0.85); } body.story-mode.location-grand_hotel_lobby { --loc-bg-image: url('../bg/inside-71-grand-hotel-lobby.jpg'); --loc-bullet-hot:#ffd860; --loc-bullet:#d8a028; --loc-bullet-deep:#5a3808; --loc-felt-mid:rgba(70,18,26,0.95); --loc-felt-deep:rgba(34,10,14,0.97); --loc-felt-edge:rgba(14,4,6,1); --loc-accent:rgba(255,210,100,0.85); } body.story-mode.location-botanical_garden { --loc-bg-image: url('../bg/inside-72-botanical-garden.jpg'); --loc-bullet-hot:#a0ffcc; --loc-bullet:#40b080; --loc-bullet-deep:#104a30; --loc-felt-mid:rgba(22,42,28,0.95); --loc-felt-deep:rgba(10,22,14,0.97); --loc-felt-edge:rgba(4,10,6,1); --loc-accent:rgba(180,255,200,0.8); } body.story-mode.location-heavens_gate { --loc-bg-image: url('../bg/inside-73-heavens-gate.jpg'); --loc-bullet-hot:#ffffb0; --loc-bullet:#e8c828; --loc-bullet-deep:#8a6a00; --loc-felt-mid:rgba(80,70,40,0.85); --loc-felt-deep:rgba(50,44,24,0.92); --loc-felt-edge:rgba(20,16,8,1); --loc-accent:rgba(255,240,180,0.9); } body.story-mode.location-purgatory_waiting_room { --loc-bg-image: url('../bg/inside-74-purgatory-waiting-room.jpg'); --loc-bullet-hot:#c0c0c0; --loc-bullet:#808080; --loc-bullet-deep:#303030; --loc-felt-mid:rgba(40,40,44,0.95); --loc-felt-deep:rgba(20,20,24,0.97); --loc-felt-edge:rgba(8,8,10,1); --loc-accent:rgba(200,200,210,0.75); } body.story-mode.location-black_market_vault { --loc-bg-image: url('../bg/inside-75-black-market-vault.jpg'); --loc-bullet-hot:#ff9090; --loc-bullet:#a83030; --loc-bullet-deep:#3a0808; --loc-felt-mid:rgba(48,12,16,0.95); --loc-felt-deep:rgba(24,6,8,0.97); --loc-felt-edge:rgba(10,2,4,1); --loc-accent:rgba(220,140,100,0.85); }