/* ------------------------------------------------------------------ themes.css — three art directions over one identical ruleset. Nothing here changes how the game plays. Swap data-theme on . ------------------------------------------------------------------ */ :root { --t-pax: .34s; --arrow-size: 13px; } /* ================================================================== A — TRANSIT Swiss transit signage. Flat, precise, no gloss. Real metro-line colours on charcoal asphalt. Reads as wayfinding, not as a toy. ================================================================== */ html[data-theme="transit"] { --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Inter", system-ui, sans-serif; --display-tracking: -.02em; --app-bg: #D9D9D4; --stage-bg: #EDEDE9; --ink: #16181C; --muted: #7A7E86; --accent: #E4002B; --on-accent: #FFFFFF; --tier-ink: #E4002B; --chip-bg: #FFFFFF; --chip-ink: #16181C; --chip-border: 1px solid #D2D2CC; --coin: #F0AB00; --bar-bg: rgba(255,255,255,.46); --bar-edge: 1px solid rgba(40,42,48,.08); --chip-lift: 0 1px 0 rgba(255,255,255,.9) inset, 0 2px 4px rgba(40,42,48,.10); --field: #F1F1EC; --knob: #9CA0A8; --rail: #FFFFFF; --track: #C9C9C2; --pax-glyph: #16181C; --deck: #2B2D31; --deck-shadow: 3px 7px 0 #1B1D21, 0 14px 26px rgba(30,32,38,.22); --bay-bg: #3A3D43; --bay-border: 1px solid #4A4E55; --bay-locked-border: 2px dashed #55595F; --vip-bg: #3A3D43; --vip-border: 2px solid #F0AB00; --vip-ink: #F0AB00; --lot-bg: #2B2D31; --lot-grid: linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px); --lot-shadow: 3px 7px 0 #1B1D21, 0 16px 30px rgba(30,32,38,.20); --veh-shadow: 0 2px 0 rgba(0,0,0,.35); --glass: rgba(0,0,0,.22); --on-bus: #FFFFFF; --mystery: #14161A; --mystery-ink: #9BA1AA; --tunnel-bg: #5A6069; --tunnel-mouth: #101215; --tunnel-ink: #D6D8DB; --tunnel-shadow: 0 2px 0 rgba(0,0,0,.4); --vw-glass: rgba(12,18,28,.55); --vw-rim: rgba(0,0,0,.22); --siren: #E4002B; --ground-tiles: linear-gradient(to right, rgba(0,0,0,.022) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,.022) 1px, transparent 1px); --ground-vignette: radial-gradient(120% 78% at 50% 32%, transparent 42%, rgba(40,42,48,.16) 100%); --tile: 44px; --lot-bays: linear-gradient(to right, rgba(255,255,255,.055) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,.055) 1px, transparent 1px); --lot-sheen: radial-gradient(140% 90% at 22% 8%, rgba(255,255,255,.07), transparent 60%); --deck-sheen: linear-gradient(160deg, rgba(255,255,255,.07), transparent 55%); --kerb: 2px solid rgba(255,255,255,.10); --safety-line: #F0AB00; --ground-strength: 1; --r-chip: 8px; --r-deck: 10px; --r-bay: 5px; --r-veh: 4px; --r-lot: 10px; --r-card: 12px; --card-bg: #FFFFFF; --card-border: 1px solid #D2D2CC; --card-shadow: 0 20px 50px rgba(0,0,0,.2); --scrim: rgba(22,24,28,.62); --toast-bg: #16181C; --toast-ink: #FFFFFF; --c0: #E4002B; /* red line */ --c1: #F0AB00; /* yellow line */ --c2: #007A33; /* green line */ --c3: #0057B8; /* blue line */ --c4: #6E2585; /* purple line */ --c5: #FF6900; /* orange line */ --c6: #00A3AD; /* teal line */ } /* ================================================================== B — NEON DEPOT Night shift. Near-black ground, vehicles as lit blocks with rim glow, the queue track a lit runway. High contrast, arcade energy. ================================================================== */ html[data-theme="neon"] { --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Inter", system-ui, sans-serif; --display-tracking: -.03em; --app-bg: #05060B; --stage-bg: radial-gradient(120% 80% at 50% 0%, #171A2E 0%, #0A0B14 55%, #06070D 100%); --ink: #EEF1FF; --muted: #7C82A6; --accent: #29B6FF; --on-accent: #04121C; --tier-ink: #FFC53D; --chip-bg: rgba(255,255,255,.06); --chip-ink: #EEF1FF; --chip-border: 1px solid rgba(255,255,255,.11); --coin: #FFC53D; --bar-bg: rgba(255,255,255,.03); --bar-edge: 1px solid rgba(255,255,255,.07); --chip-lift: 0 1px 0 rgba(255,255,255,.07) inset, 0 2px 8px rgba(0,0,0,.4); --field: rgba(255,255,255,.07); --knob: #7C82A6; --rail: rgba(150,180,255,.22); --track: #171B2B; --pax-glyph: rgba(0,0,0,.6); --deck: #141827; --deck-shadow: 0 0 0 1px rgba(255,255,255,.07), 0 10px 34px rgba(0,0,0,.6); --bay-bg: rgba(140,175,255,.055); --bay-border: 1px solid rgba(140,175,255,.16); --bay-locked-border: 2px dashed rgba(41,182,255,.4); --vip-bg: rgba(255,197,61,.07); --vip-border: 1px solid rgba(255,197,61,.45); --vip-ink: #FFC53D; --lot-bg: #0C0E17; --lot-grid: linear-gradient(to right, rgba(120,150,255,.06) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,255,.06) 1px, transparent 1px); --lot-shadow: 0 0 0 1px rgba(255,255,255,.06), inset 0 0 60px rgba(0,0,0,.6); --veh-shadow: 0 0 12px -2px var(--busColor), 0 2px 6px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.32); --glass: rgba(255,255,255,.16); --on-bus: rgba(255,255,255,.96); --mystery: #1A1D2C; --mystery-ink: #6E76A0; --tunnel-bg: #2A2F44; --tunnel-mouth: #05060B; --tunnel-ink: #8F97C0; --tunnel-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 8px rgba(0,0,0,.6); --vw-glass: rgba(216,238,255,.34); --vw-rim: rgba(0,0,0,.34); --siren: #FF2E63; --ground-tiles: linear-gradient(to right, rgba(120,150,255,.022) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,150,255,.022) 1px, transparent 1px); --ground-vignette: radial-gradient(120% 80% at 50% 26%, transparent 34%, rgba(2,3,8,.72) 100%); --tile: 40px; --lot-bays: linear-gradient(to right, rgba(41,182,255,.075) 1px, transparent 1px), linear-gradient(to bottom, rgba(41,182,255,.075) 1px, transparent 1px); --lot-sheen: radial-gradient(150% 95% at 20% 4%, rgba(120,170,255,.10), transparent 62%); --deck-sheen: linear-gradient(160deg, rgba(140,180,255,.09), transparent 55%); --kerb: 1px solid rgba(41,182,255,.22); --safety-line: #29B6FF; --ground-strength: 1; --r-chip: 11px; --r-deck: 16px; --r-bay: 9px; --r-veh: 7px; --r-lot: 16px; --r-card: 18px; --card-bg: #12141F; --card-border: 1px solid rgba(255,255,255,.1); --card-shadow: 0 30px 70px rgba(0,0,0,.7); --scrim: rgba(4,5,10,.78); --toast-bg: rgba(238,241,255,.95); --toast-ink: #0A0B14; --c0: #FF2E63; --c1: #FFC53D; --c2: #2BE08A; --c3: #29B6FF; --c4: #B57BFF; --c5: #FF8A29; --c6: #17E6D4; } /* ================================================================== C — PAPER CITY Warm paper stock, muted gouache colours, a serif for numerals. Quiet and premium. Built for long sessions rather than a first tap. ================================================================== */ html[data-theme="paper"] { --font-ui: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Fraunces", Georgia, serif; --display-tracking: -.01em; --app-bg: #E4DDD0; --stage-bg: #F6F1E7; --ink: #2E2A24; --muted: #8C8477; --accent: #C4643F; --on-accent: #FFF8EF; --tier-ink: #A8724A; --chip-bg: #FFFCF6; --chip-ink: #2E2A24; --chip-border: 1px solid #DDD3C2; --coin: #E5B45C; --bar-bg: rgba(255,252,246,.42); --bar-edge: 1px solid rgba(120,100,70,.11); --chip-lift: 0 1px 0 rgba(255,255,255,.85) inset, 0 2px 5px rgba(90,74,48,.13); --field: #F3EDE1; --knob: #B4A995; --rail: #FFFCF6; --track: #E0D7C6; --pax-glyph: rgba(46,42,36,.75); --deck: #E3D9C7; --deck-shadow: 2px 5px 0 #CFC3AD, 0 14px 26px rgba(90,74,48,.16); --bay-bg: #F3EDE1; --bay-border: 1px solid #D3C7B2; --bay-locked-border: 2px dashed #C3B49B; --vip-bg: #F1E6D0; --vip-border: 1px solid #C9A15E; --vip-ink: #9A7333; --lot-bg: #EAE1D2; --lot-grid: linear-gradient(to right, rgba(140,120,90,.09) 1px, transparent 1px), linear-gradient(to bottom, rgba(140,120,90,.09) 1px, transparent 1px); --lot-shadow: 2px 5px 0 #CFC3AD, 0 16px 30px rgba(90,74,48,.14); --veh-shadow: 0 2px 4px rgba(70,55,32,.22), inset 0 0 0 1.5px rgba(0,0,0,.13); --glass: rgba(255,252,246,.42); --on-bus: #FFFCF6; --mystery: #6E6558; --mystery-ink: #E6DCCB; --tunnel-bg: #B9AE9B; --tunnel-mouth: #4A4237; --tunnel-ink: #FFFCF6; --tunnel-shadow: 0 2px 4px rgba(70,55,32,.25), inset 0 0 0 1.5px rgba(0,0,0,.13); --vw-glass: rgba(74,64,48,.40); --vw-rim: rgba(0,0,0,.17); --siren: #C4643F; --ground-tiles: linear-gradient(to right, rgba(120,100,70,.024) 1px, transparent 1px), linear-gradient(to bottom, rgba(120,100,70,.024) 1px, transparent 1px); --ground-vignette: radial-gradient(120% 80% at 50% 30%, transparent 46%, rgba(120,100,68,.16) 100%); --tile: 48px; --lot-bays: linear-gradient(to right, rgba(255,252,246,.17) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,252,246,.17) 1px, transparent 1px); --lot-sheen: radial-gradient(140% 90% at 22% 8%, rgba(255,252,246,.22), transparent 62%); --deck-sheen: linear-gradient(160deg, rgba(255,252,246,.30), transparent 55%); --kerb: 2px solid rgba(120,100,70,.16); --safety-line: #C9A15E; --ground-strength: 1; --r-chip: 13px; --r-deck: 16px; --r-bay: 10px; --r-veh: 8px; --r-lot: 14px; --r-card: 18px; --card-bg: #FFFCF6; --card-border: 1px solid #DDD3C2; --card-shadow: 0 24px 60px rgba(90,74,48,.24); --scrim: rgba(64,54,40,.58); --toast-bg: #2E2A24; --toast-ink: #F6F1E7; --c0: #D8695A; --c1: #E5B45C; --c2: #7D9E68; --c3: #6E92B0; --c4: #9E7FA8; --c5: #D2884E; --c6: #6BAAA2; }