/* ============================================================================ WEAVEARENA · the table themes One file, every mood the floor can wear. A theme is not a background picture, it is the twenty-odd values every machine already reads: the ground, the ink, the metal, the four rarity tiers. Switch the value of data-theme on and the whole floor changes house without a single component knowing why. Ground first, then ink that survives it, then a metal, then the tiers climbing from the quiet common to the treasure grand. Bright grounds get a "soak" tell because a glow is invisible in daylight; dark grounds keep the glow. The House picks one for the night in the admin console; the code carries it to every device. summer is the default and the daylight beach the floor was born on. ============================================================================ */ /* ---- fonts are shared by every theme: a theme is colour, not typography ---- */ :root { --wa-head: 'Marcellus', Didot, Georgia, serif; --wa-body: ui-sans-serif, -apple-system, Inter, system-ui, sans-serif; --wa-num: 'Space Grotesk', ui-monospace, monospace; } /* ============================ SUMMER · daylight beach ====================== */ :root, [data-theme="summer"] { --wa-bg:#FBF1DE; --wa-surface:#FFFFFF; --wa-line:rgba(35,48,58,.16); --wa-ink:#1E2C36; --wa-pearl:#2C4350; --wa-muted:#6E7F88; --wa-metal:#C98A2E; --wa-metalHi:#F2B84B; --wa-grand:#E0912B; --wa-epic:#EE7455; --wa-rare:#2E9BB0; --wa-common:#7C8D96; --wa-tellSpread:80%; --wa-cardBg:radial-gradient(120% 80% at 50% 30%, #FFFBF2 0%, #FDF3E1 48%, #F6E3C4 100%); --wa-btnInk:#FFFBF2; --wa-artShadow:drop-shadow(0 20px 26px rgba(40,60,72,.28)); --wa-sealShadow:drop-shadow(0 14px 22px rgba(40,60,72,.22)); --wa-statsBg:rgba(255,255,255,.78); --sun:#FFD98A; --coral:#EE7455; --sea-shallow:#5FC6D2; --sea-deep:#1E7F97; --sand-dark:#E4C68F; --chest-wood:#A2662C; } [data-theme="summer"] #waTell.grand { background:radial-gradient(circle, rgba(224,145,43,calc(var(--waTellA)*.62)) 0%, rgba(224,145,43,0) var(--wa-tellSpread)); } [data-theme="summer"] #waTell.epic { background:radial-gradient(circle, rgba(238,116,85,calc(var(--waTellA)*.55)) 0%, rgba(238,116,85,0) var(--wa-tellSpread)); } [data-theme="summer"] #waTell.rare { background:radial-gradient(circle, rgba(46,155,176,calc(var(--waTellA)*.50)) 0%, rgba(46,155,176,0) var(--wa-tellSpread)); } [data-theme="summer"] #waTell.common{ background:radial-gradient(circle, rgba(124,141,150,calc(var(--waTellA)*.38)) 0%, rgba(124,141,150,0) var(--wa-tellSpread)); } /* ============================ MIDNIGHT · dark & luxe ====================== */ /* Navy and near-black under gold and amethyst. The evening opposite of summer: a glow reads on this ground, so the tell stays lit rather than soaking. */ [data-theme="midnight"] { --wa-bg:#0D1626; --wa-surface:#182842; --wa-line:rgba(239,235,226,.14); --wa-ink:#F2EEE3; --wa-pearl:#C7D2E2; --wa-muted:#8592A8; --wa-metal:#C8A24A; --wa-metalHi:#F2D98A; --wa-grand:#F2C24B; --wa-epic:#B884E6; --wa-rare:#54A8C6; --wa-common:#7A889E; --wa-tellSpread:70%; --wa-cardBg:radial-gradient(120% 80% at 50% 30%, #1E2F4C 0%, #142138 55%, #0C1424 100%); --wa-btnInk:#0D1626; --wa-artShadow:drop-shadow(0 22px 30px rgba(0,0,0,.55)); --wa-sealShadow:drop-shadow(0 16px 24px rgba(0,0,0,.5)); --wa-statsBg:rgba(255,255,255,.06); --sun:#F2D98A; --coral:#EE8C6A; --sea-shallow:#54A8C6; --sea-deep:#1E5C86; --sand-dark:#2A3A56; --chest-wood:#7A5A2E; } [data-theme="midnight"] #waTell.grand { background:radial-gradient(circle, rgba(242,194,75,var(--waTellA)) 0%, rgba(242,194,75,0) var(--wa-tellSpread)); } [data-theme="midnight"] #waTell.epic { background:radial-gradient(circle, rgba(184,132,230,var(--waTellA)) 0%, rgba(184,132,230,0) var(--wa-tellSpread)); } [data-theme="midnight"] #waTell.rare { background:radial-gradient(circle, rgba(84,168,198,var(--waTellA)) 0%, rgba(84,168,198,0) var(--wa-tellSpread)); } [data-theme="midnight"] #waTell.common{ background:radial-gradient(circle, rgba(122,136,158,calc(var(--waTellA)*.8)) 0%, rgba(122,136,158,0) var(--wa-tellSpread)); } /* ============================ FESTIVE · year-end ========================== */ /* Deep spruce under gold, holly green and a berry red kept for the top tiers. A dark ground, so the glow stays lit. */ [data-theme="festive"] { --wa-bg:#0F241B; --wa-surface:#163527; --wa-line:rgba(244,240,227,.15); --wa-ink:#F4F0E3; --wa-pearl:#CDE0D1; --wa-muted:#8BA593; --wa-metal:#C9A24A; --wa-metalHi:#F2D98A; --wa-grand:#EAB63C; --wa-epic:#D2432F; --wa-rare:#2E9A63; --wa-common:#7E948A; --wa-tellSpread:72%; --wa-cardBg:radial-gradient(120% 80% at 50% 30%, #1B4030 0%, #143024 55%, #0E2019 100%); --wa-btnInk:#0F241B; --wa-artShadow:drop-shadow(0 22px 30px rgba(0,0,0,.5)); --wa-sealShadow:drop-shadow(0 16px 24px rgba(0,0,0,.45)); --wa-statsBg:rgba(255,255,255,.07); --sun:#F2D98A; --coral:#D2432F; --sea-shallow:#2E9A63; --sea-deep:#1C6B47; --sand-dark:#24483A; --chest-wood:#7A5A2E; } [data-theme="festive"] #waTell.grand { background:radial-gradient(circle, rgba(234,182,60,var(--waTellA)) 0%, rgba(234,182,60,0) var(--wa-tellSpread)); } [data-theme="festive"] #waTell.epic { background:radial-gradient(circle, rgba(210,67,47,var(--waTellA)) 0%, rgba(210,67,47,0) var(--wa-tellSpread)); } [data-theme="festive"] #waTell.rare { background:radial-gradient(circle, rgba(46,154,99,var(--waTellA)) 0%, rgba(46,154,99,0) var(--wa-tellSpread)); } [data-theme="festive"] #waTell.common{ background:radial-gradient(circle, rgba(126,148,138,calc(var(--waTellA)*.8)) 0%, rgba(126,148,138,0) var(--wa-tellSpread)); } /* ============================ NEON · party ================================ */ /* Near-black violet under electric magenta and cyan. Built for a glow to bloom. */ [data-theme="neon"] { --wa-bg:#0B0913; --wa-surface:#151021; --wa-line:rgba(243,239,250,.14); --wa-ink:#F3EFFA; --wa-pearl:#CBC1DC; --wa-muted:#867B9A; --wa-metal:#34E1E6; --wa-metalHi:#7CF3F6; --wa-grand:#FF3EA5; --wa-epic:#9B5CFF; --wa-rare:#34E1E6; --wa-common:#6E7A96; --wa-tellSpread:74%; --wa-cardBg:radial-gradient(120% 80% at 50% 30%, #221733 0%, #150F22 55%, #0A0812 100%); --wa-btnInk:#0B0913; --wa-artShadow:drop-shadow(0 22px 34px rgba(0,0,0,.6)); --wa-sealShadow:drop-shadow(0 16px 26px rgba(0,0,0,.55)); --wa-statsBg:rgba(255,255,255,.06); --sun:#FFE45C; --coral:#FF3EA5; --sea-shallow:#34E1E6; --sea-deep:#1E8FA6; --sand-dark:#241B34; --chest-wood:#6E4AA0; } [data-theme="neon"] #waTell.grand { background:radial-gradient(circle, rgba(255,62,165,var(--waTellA)) 0%, rgba(255,62,165,0) var(--wa-tellSpread)); } [data-theme="neon"] #waTell.epic { background:radial-gradient(circle, rgba(155,92,255,var(--waTellA)) 0%, rgba(155,92,255,0) var(--wa-tellSpread)); } [data-theme="neon"] #waTell.rare { background:radial-gradient(circle, rgba(52,225,230,var(--waTellA)) 0%, rgba(52,225,230,0) var(--wa-tellSpread)); } [data-theme="neon"] #waTell.common{ background:radial-gradient(circle, rgba(110,122,150,calc(var(--waTellA)*.8)) 0%, rgba(110,122,150,0) var(--wa-tellSpread)); } /* ============================ BLOSSOM · soft & fresh ====================== */ /* Pale blush daylight under lilac, mint and a warm gold. A bright ground, so the tier colour soaks into the page the way it does on summer's sand. */ [data-theme="blossom"] { --wa-bg:#FBF2F5; --wa-surface:#FFFFFF; --wa-line:rgba(58,46,60,.14); --wa-ink:#3A2E3C; --wa-pearl:#5F4F63; --wa-muted:#9C8EA0; --wa-metal:#D98AA8; --wa-metalHi:#F2B8CE; --wa-grand:#E0912B; --wa-epic:#B074D6; --wa-rare:#3FAE97; --wa-common:#A99EB2; --wa-tellSpread:80%; --wa-cardBg:radial-gradient(120% 80% at 50% 30%, #FFFFFF 0%, #FBEFF4 48%, #F3DCE7 100%); --wa-btnInk:#FFFFFF; --wa-artShadow:drop-shadow(0 20px 26px rgba(80,50,70,.24)); --wa-sealShadow:drop-shadow(0 14px 22px rgba(80,50,70,.2)); --wa-statsBg:rgba(255,255,255,.8); --sun:#FFD98A; --coral:#F0889E; --sea-shallow:#7FD0C0; --sea-deep:#3FAE97; --sand-dark:#EBD3DE; --chest-wood:#C07EA0; } [data-theme="blossom"] #waTell.grand { background:radial-gradient(circle, rgba(196,140,26,calc(var(--waTellA)*.58)) 0%, rgba(196,140,26,0) var(--wa-tellSpread)); } [data-theme="blossom"] #waTell.epic { background:radial-gradient(circle, rgba(150,86,196,calc(var(--waTellA)*.5)) 0%, rgba(150,86,196,0) var(--wa-tellSpread)); } [data-theme="blossom"] #waTell.rare { background:radial-gradient(circle, rgba(46,150,130,calc(var(--waTellA)*.48)) 0%, rgba(46,150,130,0) var(--wa-tellSpread)); } [data-theme="blossom"] #waTell.common{ background:radial-gradient(circle, rgba(150,138,160,calc(var(--waTellA)*.4)) 0%, rgba(150,138,160,0) var(--wa-tellSpread)); } /* ============================================================================ PALETTE-FIRST BACKDROPS The menu and in-play scenes carry a beach photograph that only belongs to summer. Until each theme has its own painted backdrop, the off-summer themes drop the photo and wear their own ground, so text keeps its contrast and the mood is right from the palette alone. Swapping the gradient for scene art later touches only this block. ============================================================================ */ [data-theme="midnight"] #menuBg img,[data-theme="midnight"] #scene img,[data-theme="midnight"] #bg img, [data-theme="festive"] #menuBg img,[data-theme="festive"] #scene img,[data-theme="festive"] #bg img, [data-theme="neon"] #menuBg img,[data-theme="neon"] #scene img,[data-theme="neon"] #bg img, [data-theme="blossom"] #menuBg img,[data-theme="blossom"] #scene img,[data-theme="blossom"] #bg img { display:none; } [data-theme="midnight"] #menuBg,[data-theme="midnight"] #scene,[data-theme="midnight"] #bg, [data-theme="festive"] #menuBg,[data-theme="festive"] #scene,[data-theme="festive"] #bg, [data-theme="neon"] #menuBg,[data-theme="neon"] #scene,[data-theme="neon"] #bg, [data-theme="blossom"] #menuBg,[data-theme="blossom"] #scene,[data-theme="blossom"] #bg { background:radial-gradient(125% 95% at 50% -5%, var(--wa-surface) 0%, var(--wa-bg) 60%, var(--wa-bg) 100%); } [data-theme="midnight"] #menuBg:after,[data-theme="midnight"] #scene:after,[data-theme="midnight"] #bg:after, [data-theme="festive"] #menuBg:after,[data-theme="festive"] #scene:after,[data-theme="festive"] #bg:after, [data-theme="neon"] #menuBg:after,[data-theme="neon"] #scene:after,[data-theme="neon"] #bg:after { background:radial-gradient(circle at 50% 32%, transparent 42%, rgba(0,0,0,.22)); } [data-theme="blossom"] #menuBg:after,[data-theme="blossom"] #scene:after,[data-theme="blossom"] #bg:after { background:radial-gradient(circle at 50% 30%, transparent 55%, rgba(120,80,100,.10)); }