/* Material and brightness are independent. These tokens apply to the hub and games. */
html[data-material=sand]{--ink:#493d31;--muted:#716757;--page:#f6efe2;--surface:#fff9eddb;--panel:#fff9eddb;--edge:#cbb79b8c;--accent:#955b46;--shadow:#714b3524;--glass-top:#fffaf1ec;--glass-bottom:#e9d9c3d9;--game-ink:#493d31;--game-muted:#716757;--game-bg:#f6efe2;--game-panel:#fff9edeb;--game-edge:#cbb79b8c;--material-hero:#f3e6ce;--material-glow:#e9bca7}
html[data-material=pixels]{--ink:#343b61;--muted:#646886;--page:#f0f0fa;--surface:#fcfcffdb;--panel:#fcfcffdb;--edge:#abaed58c;--accent:#6067a7;--shadow:#555a9329;--glass-top:#ffffffeb;--glass-bottom:#dfddf1d9;--game-ink:#343b61;--game-muted:#646886;--game-bg:#f0f0fa;--game-panel:#fcfcffeb;--game-edge:#abaed58c;--material-hero:#e2e2f5;--material-glow:#bbb5e9}
html[data-material=moss]{--ink:#304837;--muted:#5c705d;--page:#f0f3e8;--surface:#f9fcf2dc;--panel:#f9fcf2dc;--edge:#a8bea08f;--accent:#427650;--shadow:#395d3924;--glass-top:#fafff5eb;--glass-bottom:#d8e7d2d9;--game-ink:#304837;--game-muted:#5c705d;--game-bg:#f0f3e8;--game-panel:#f9fcf2ec;--game-edge:#a8bea08f;--material-hero:#e1ecd9;--material-glow:#b5d3ac}
html[data-material=drops]{--ink:#294d58;--muted:#657d83;--page:#eaf5f3;--surface:#f7ffffd8;--panel:#f7ffffd8;--edge:#9bcbd18a;--accent:#358597;--shadow:#37718424;--glass-top:#faffffeb;--glass-bottom:#d2edf0d9;--game-ink:#294d58;--game-muted:#657d83;--game-bg:#eaf5f3;--game-panel:#f7ffffeb;--game-edge:#9bcbd18a;--material-hero:#d9eff1;--material-glow:#9ddbe3}
html[data-material=mosaic]{--ink:#51434c;--muted:#77686f;--page:#f6f0ec;--surface:#fffbf7dc;--panel:#fffbf7dc;--edge:#d3b8be88;--accent:#a66b7f;--shadow:#79526524;--glass-top:#fffdf9ed;--glass-bottom:#eee0e0d9;--game-ink:#51434c;--game-muted:#77686f;--game-bg:#f6f0ec;--game-panel:#fffbf7ec;--game-edge:#d3b8be88;--material-hero:#f1e1dc;--material-glow:#dfb9b9}
html[data-material=crystals]{--ink:#343e62;--muted:#747b98;--page:#edf1f8;--surface:#fcfdffdb;--panel:#fcfdffdb;--edge:#b5c2df91;--accent:#7079ad;--shadow:#53659028;--glass-top:#ffffffef;--glass-bottom:#dae2f4d9;--game-ink:#343e62;--game-muted:#747b98;--game-bg:#edf1f8;--game-panel:#fcfdffed;--game-edge:#b5c2df91;--material-hero:#dee7f7;--material-glow:#b9c9ee}
html[data-material=threads]{--ink:#574349;--muted:#83727a;--page:#f7f0ee;--surface:#fffbf8dc;--panel:#fffbf8dc;--edge:#d1b8c18c;--accent:#a56d83;--shadow:#7b526329;--glass-top:#fffefbed;--glass-bottom:#efdfe1d9;--game-ink:#574349;--game-muted:#83727a;--game-bg:#f7f0ee;--game-panel:#fffbf8ed;--game-edge:#d1b8c18c;--material-hero:#f3e4e5;--material-glow:#dfbbc9}
html[data-theme=dark][data-material=sand]{--ink:#f7ead8;--muted:#bba995;--page:#211e1a;--surface:#352d26e8;--panel:#352d26e8;--edge:#92765a75;--accent:#e4ae87;--shadow:#0908068c;--glass-top:#4b3b32e9;--glass-bottom:#28231fdc;--game-ink:#f7ead8;--game-muted:#bba995;--game-bg:#211e1a;--game-panel:#352d26f2;--game-edge:#92765a75;--material-hero:#332a23;--material-glow:#8a5b48}
html[data-theme=dark][data-material=pixels]{--ink:#eeedff;--muted:#b3b3d0;--page:#171a2b;--surface:#292d46e8;--panel:#292d46e8;--edge:#858bc07c;--accent:#b9b7f2;--shadow:#090b1b8c;--glass-top:#3b405ee9;--glass-bottom:#23263cdb;--game-ink:#eeedff;--game-muted:#b3b3d0;--game-bg:#171a2b;--game-panel:#292d46f2;--game-edge:#858bc07c;--material-hero:#242b49;--material-glow:#7775bd}
html[data-theme=dark][data-material=moss]{--ink:#e6f1df;--muted:#a9bfa7;--page:#17231b;--surface:#293c2de8;--panel:#293c2de8;--edge:#799e7877;--accent:#a5d39f;--shadow:#07130b8c;--glass-top:#3d5440e9;--glass-bottom:#203024dc;--game-ink:#e6f1df;--game-muted:#a9bfa7;--game-bg:#17231b;--game-panel:#293c2df2;--game-edge:#799e7877;--material-hero:#263b29;--material-glow:#608a5e}
html[data-theme=dark][data-material=drops]{--ink:#e1f5f7;--muted:#a4c6c9;--page:#13262b;--surface:#24414ae8;--panel:#24414ae8;--edge:#65a2ae78;--accent:#91d3dd;--shadow:#06151b8c;--glass-top:#355b65e9;--glass-bottom:#1d343cda;--game-ink:#e1f5f7;--game-muted:#a4c6c9;--game-bg:#13262b;--game-panel:#24414af2;--game-edge:#65a2ae78;--material-hero:#21424b;--material-glow:#5496a3}
html[data-theme=dark][data-material=mosaic]{--ink:#f6e8e9;--muted:#c1aaaf;--page:#251c22;--surface:#3d2d34e8;--panel:#3d2d34e8;--edge:#aa7b8b77;--accent:#e5a5b7;--shadow:#140b108c;--glass-top:#563d48e9;--glass-bottom:#31242cdb;--game-ink:#f6e8e9;--game-muted:#c1aaaf;--game-bg:#251c22;--game-panel:#3d2d34f2;--game-edge:#aa7b8b77;--material-hero:#412e36;--material-glow:#a06e7f}
html[data-theme=dark][data-material=crystals]{--ink:#ebedff;--muted:#b4b9d4;--page:#171d2e;--surface:#29324ae8;--panel:#29324ae8;--edge:#8395c27a;--accent:#bbc7fa;--shadow:#090f218c;--glass-top:#3b4b65e9;--glass-bottom:#212b42da;--game-ink:#ebedff;--game-muted:#b4b9d4;--game-bg:#171d2e;--game-panel:#29324af2;--game-edge:#8395c27a;--material-hero:#293550;--material-glow:#7588c2}
html[data-theme=dark][data-material=threads]{--ink:#f8e9e9;--muted:#c7adb7;--page:#251d23;--surface:#3e3039e8;--panel:#3e3039e8;--edge:#aa80947a;--accent:#e5b0c4;--shadow:#1209108c;--glass-top:#58424fe9;--glass-bottom:#322630db;--game-ink:#f8e9e9;--game-muted:#c7adb7;--game-bg:#251d23;--game-panel:#3e3039f2;--game-edge:#aa80947a;--material-hero:#49323e;--material-glow:#ad7892}
html[data-material] body,html[data-material] .hero,html[data-material] .game-layer{background:var(--page)}
html[data-material] .hero{background:radial-gradient(ellipse at 50% 42%,color-mix(in srgb,var(--material-glow) 35%,var(--material-hero)),var(--material-hero) 62%,var(--page) 110%)}
html[data-material] .game-card{border-color:var(--edge)}
html[data-material] .game-card::before{background:radial-gradient(400px 310px at var(--mx,65%) var(--my,25%),color-mix(in srgb,var(--material-glow) 43%,transparent),transparent 75%)}
html[data-material] .variant-switcher button[aria-pressed=true],html[data-material] .primary-button{background:var(--accent);color:var(--page)}
html[data-material] .record-tabs button[aria-selected=true]{background:var(--accent);color:var(--page)}
html[data-material] .glass{border-color:var(--edge)}
html[data-material] .games-section::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;background:radial-gradient(circle at 10% 20%,var(--material-glow),transparent 31%),radial-gradient(circle at 85% 70%,var(--material-glow),transparent 29%);z-index:0}
html[data-material] body,html[data-material] .hero,html[data-material] .glass,html[data-material] .game-layer,html[data-material] .game-card{transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease}
html[data-material] .board-wrap,html[data-material] .tall-board,html[data-material] .number-board,html[data-material] .fifteen-board{border-color:var(--edge)!important}
html[data-material] .overlay{background:color-mix(in srgb,var(--panel) 90%,transparent)!important;color:var(--ink)!important}
html[data-material] .overlay span{color:var(--muted)!important}
html[data-material] .overlay button,html[data-material] .actions #start,html[data-material] .puzzle-actions #shuffle{background:var(--accent)!important;color:var(--page)!important}
html[data-material] :is(button,select,input):focus-visible{outline-color:var(--accent)}
@media(prefers-reduced-motion:reduce){html[data-material] body,html[data-material] .hero,html[data-material] .glass,html[data-material] .game-layer,html[data-material] .game-card{transition:none}}


/* The scene is drawn by the ambient canvas; the hero supplies only soft light. */
html[data-material] .hero{background:radial-gradient(ellipse 72% 52% at 50% 51%,color-mix(in srgb,var(--material-glow) 23%,#ffffff) 0%,color-mix(in srgb,var(--material-hero) 38%,#ffffff) 53%,var(--page) 100%)}
html[data-theme=dark][data-material] .hero{background:radial-gradient(ellipse 75% 55% at 50% 48%,color-mix(in srgb,var(--material-glow) 15%,var(--material-hero)),var(--page) 100%)}
.hero #ambient{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.65;pointer-events:none;mix-blend-mode:multiply}
html[data-theme=dark] .hero #ambient{mix-blend-mode:screen;opacity:.31}
.hero #playgroundCanvas{z-index:1}
html[data-material=drops] .hero #ambient{opacity:0}
.hero #mossTouchZone{display:none;position:absolute;z-index:2;left:7%;right:7%;top:29%;height:42%;touch-action:none}
.hero[data-variant=moss] #mossTouchZone,.hero[data-variant=mosaic] #mossTouchZone,.hero[data-variant=threads] #mossTouchZone{display:block}
@media(max-width:650px){.hero #mossTouchZone{left:2%;right:2%;top:39%;height:23%}}
.hero .topbar,.hero .variant-switcher,.hero .hero-scroll{z-index:3}

/* Drops stay pale and spacious; the liquid letters carry the visual weight. */
html[data-theme=light][data-material=drops] .hero{background:radial-gradient(ellipse 72% 54% at 50% 48%,#ffffff 0%,#f7fdfc 57%,#eaf7f7 100%)}

/* First-stage clay and paper palettes. Historic water/crystal tokens remain for the labs. */
html[data-material=clay]{--ink:#4b3228;--muted:#876c5e;--page:#f4e7d9;--surface:#fff6eddf;--panel:#fff6eddf;--edge:#cda98e9c;--accent:#ad6146;--shadow:#71432e28;--glass-top:#fff9f0ed;--glass-bottom:#ead0bbd9;--game-ink:#4b3228;--game-muted:#876c5e;--game-bg:#f4e7d9;--game-panel:#fff6eded;--game-edge:#cda98e9c;--material-hero:#efd8c4;--material-glow:#dfa889}
html[data-material=paper]{--ink:#47443c;--muted:#7e776b;--page:#f5f1e8;--surface:#fffdf6e5;--panel:#fffdf6e5;--edge:#c7bfb09a;--accent:#8b7861;--shadow:#514a3d23;--glass-top:#fffef8f2;--glass-bottom:#e8e0d2e0;--game-ink:#47443c;--game-muted:#7e776b;--game-bg:#f5f1e8;--game-panel:#fffdf6ef;--game-edge:#c7bfb09a;--material-hero:#eee9df;--material-glow:#d7ccba}
html[data-theme=dark][data-material=clay]{--ink:#f5e3d7;--muted:#c7a99a;--page:#261b17;--surface:#423028e9;--panel:#423028e9;--edge:#9f715c82;--accent:#e6a17e;--shadow:#0c07058c;--glass-top:#5a4034e9;--glass-bottom:#33241edc;--game-ink:#f5e3d7;--game-muted:#c7a99a;--game-bg:#261b17;--game-panel:#423028f1;--game-edge:#9f715c82;--material-hero:#422c24;--material-glow:#9f6048}
html[data-theme=dark][data-material=paper]{--ink:#f3eee3;--muted:#c3b8a7;--page:#24231f;--surface:#39372fe9;--panel:#39372fe9;--edge:#8f877887;--accent:#c9b99d;--shadow:#0909078c;--glass-top:#514b40e9;--glass-bottom:#302d27db;--game-ink:#f3eee3;--game-muted:#c3b8a7;--game-bg:#24231f;--game-panel:#39372ff1;--game-edge:#8f877887;--material-hero:#39372f;--material-glow:#81786a}
html[data-material=mosaic]{--ink:#3e3026;--muted:#755f4c;--page:#f3e7d7;--surface:#fff8eddf;--panel:#fff8eddf;--edge:#cdb59a9c;--accent:#935132;--shadow:#67492d24;--glass-top:#fff9efed;--glass-bottom:#e9d7c2d9;--material-hero:#ead6bd;--material-glow:#f4e5d1}
html[data-theme=dark][data-material=mosaic]{--ink:#f4e6d3;--muted:#c5ae94;--page:#241d18;--surface:#3b3028e9;--panel:#3b3028e9;--edge:#9b795b82;--accent:#d79c6d;--shadow:#0b07058c;--glass-top:#534034e9;--glass-bottom:#31271fdb;--material-hero:#3a2b20;--material-glow:#6f4f35}
html[data-theme=light][data-material=clay] .hero{background:radial-gradient(ellipse 72% 54% at 50% 48%,#fff5e8 0%,#f4e4d5 62%,#ecd3bc 100%)}
html[data-theme=light][data-material=paper] .hero{background:radial-gradient(ellipse 75% 56% at 50% 48%,#fffefa 0%,#f8f4eb 60%,#eae4d9 100%)}
/* The embroidery canvas paints linen; keep only a quiet textile light behind it. */
html[data-material=threads]{--ink:#513d3f;--muted:#806c69;--page:#f4ebe3;--surface:#fffaf5e2;--panel:#fffaf5e2;--edge:#d9c5bf92;--accent:#986978;--shadow:#744d5628;--glass-top:#fffaf5ed;--glass-bottom:#ebdad7db;--material-hero:#f5ebe2;--material-glow:#e7cfc6}
html[data-theme=dark][data-material=threads]{--ink:#f4e8e7;--muted:#c9b2b5;--page:#251d24;--surface:#3e3039e9;--panel:#3e3039e9;--edge:#aa80947a;--accent:#dfabb9;--shadow:#1209108c;--glass-top:#58424fe9;--glass-bottom:#322630db;--material-hero:#2f242b;--material-glow:#755260}
html[data-material=threads] .hero #ambient{opacity:.12}
html[data-theme=dark][data-material=threads] .hero #ambient{opacity:.1}

/* Moiré: shared site tokens, independent light/dark brightness. */
html[data-material=moire]{--ink:#68513e;--muted:#786554;--page:#faf3e8;--surface:#fff9f0e8;--panel:#fff9f0e8;--edge:#e5d3be;--accent:#935d43;--shadow:#714b3524;--glass-top:#fffaf1ec;--glass-bottom:#eddfcbd9;--game-ink:#68513e;--game-muted:#786554;--game-bg:#faf3e8;--game-panel:#fff9f0ed;--game-edge:#e5d3be;--material-hero:#f2e5d3;--material-glow:#dcc3a2}
html[data-theme=dark][data-material=moire]{--ink:#f2e5d4;--muted:#bea991;--page:#211c18;--surface:#352b23e8;--panel:#352b23e8;--edge:#92745580;--accent:#d7a676;--shadow:#0906048c;--glass-top:#47372be9;--glass-bottom:#2a211bdb;--game-ink:#f2e5d4;--game-muted:#bea991;--game-bg:#211c18;--game-panel:#352b23f2;--game-edge:#92745580;--material-hero:#30251d;--material-glow:#7a5839}
.hero #moireCanvas{z-index:1;touch-action:none}
.hero #moireCanvas[hidden]{display:none}
.hero[data-variant=moire] #playgroundCanvas,.hero[data-variant=moire] #ambient{visibility:hidden}
.hero[data-variant=moire] #mossTouchZone{display:none}
.hero.moire-unavailable[data-variant=moire]::after{content:'aboba';position:absolute;inset:0;display:grid;place-items:center;color:var(--ink);font:900 clamp(90px,24vw,400px)/1 Arial,sans-serif;letter-spacing:-.075em;pointer-events:none}
@media(max-width:650px){.hero[data-variant=moire] .variant-switcher{left:50%;transform:translateX(-50%);width:max-content}}

/* Game surfaces inherit the exact selected site palette, including Moiré. */
html[data-theme][data-material]{--game-ink:var(--ink);--game-muted:var(--muted);--game-bg:var(--page);--game-panel:var(--panel);--game-edge:var(--edge);--game-shadow:var(--shadow)}
html[data-material] .actions button:not(#start),html[data-material] .pad button,html[data-material] .touch-controls button{background:linear-gradient(145deg,var(--game-panel),color-mix(in srgb,var(--accent) 12%,var(--game-panel)))!important;color:var(--game-ink)!important}

/* Venom: cold fog, wet organic edges and a clear pool of light behind the word. */
html[data-material=venom]{--ink:#182530;--muted:#3e5261;--page:#bcc8cf;--surface:#e4ecf0dc;--panel:#e4ecf0ed;--edge:#667e8c70;--accent:#263f50;--shadow:#0a1c3433;--glass-top:#edf4f8e8;--glass-bottom:#acbecbd9;--material-hero:#c7d3da;--material-glow:#8caac1}
html[data-theme=dark][data-material=venom]{--ink:#e1edf5;--muted:#9bafbf;--page:#0a121a;--surface:#1b2b39df;--panel:#1b2b39ed;--edge:#6b94ae55;--accent:#b2cfe1;--shadow:#00000080;--glass-top:#30475be6;--glass-bottom:#111e2cd9;--material-hero:#132333;--material-glow:#507b9b}
html[data-material=venom] .hero{background:radial-gradient(ellipse 60% 36% at 51% 53%,#e1e8ec 0%,#ccd8df 57%,transparent 100%),radial-gradient(ellipse 48% 65% at 13% 0%,#6f8498a0,transparent 85%),radial-gradient(ellipse 60% 64% at 95% 95%,#526e87a0,transparent 90%),linear-gradient(135deg,#a1b4c1,#c5d0d5 43%,#8ba0b1)}
html[data-theme=dark][data-material=venom] .hero{background:radial-gradient(ellipse 58% 33% at 51% 53%,#3f5b71 0%,#253c50 49%,transparent 100%),radial-gradient(ellipse 45% 60% at 14% 0%,#24394c,transparent 85%),radial-gradient(ellipse 55% 58% at 96% 96%,#152f46,transparent 87%),#080f18}
html[data-material=venom] .hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:url('/assets/brand/venom-atmosphere.svg?v=1') center/cover no-repeat;opacity:.30}
html[data-theme=dark][data-material=venom] .hero::before{opacity:.65}
html[data-material=venom] .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.24;background:radial-gradient(ellipse 70% 9% at 53% 72%,#1a2d4660,transparent 85%),radial-gradient(ellipse 55% 12% at 24% 29%,#acc8dd24,transparent 90%),radial-gradient(ellipse 50% 8% at 80% 80%,#9cc3df20,transparent 90%);mask-image:linear-gradient(transparent,#000 23%,#000 80%,transparent)}
html[data-theme=dark][data-material=venom] .hero::after{opacity:.35}
@media(max-width:650px){html[data-material=venom] .hero::before{background-size:auto 100%;opacity:.2}html[data-theme=dark][data-material=venom] .hero::before{opacity:.5}}
.hero #venomCanvas{z-index:1;touch-action:pan-y;cursor:grab}
.hero #venomCanvas[hidden]{display:none}
.hero[data-variant=venom] #playgroundCanvas,.hero[data-variant=venom] #ambient{visibility:hidden}
.hero[data-variant=venom] #mossTouchZone{display:none}
#venomFallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center;pointer-events:none;transform:translateY(var(--venom-offset-y,2%));font:900 var(--venom-font,clamp(90px,27.5vw,320px))/1 Arial,sans-serif;color:#12151a;text-shadow:0 3px 2px #707987,0 12px 22px #11182425;letter-spacing:0}
.hero[data-variant=venom]:not(.venom-ready) #venomFallback{display:flex}
#venomFallback img{display:none;width:calc(var(--venom-word-width,80vw)*1.01653);height:auto;max-width:none;flex:none}
#venomFallback.has-poster span{display:none}
#venomFallback.has-poster img{display:block}
html[data-theme=dark] #venomFallback{color:#0b0e13;text-shadow:0 -2px 2px #6d7e92,0 3px 2px #2b3645,0 10px 22px #0009}
@media(max-width:650px){.hero[data-variant=venom] .variant-switcher{left:50%;transform:translateX(-50%);width:max-content}}

/* Game surfaces follow the final active material palette, including later overrides. */
html[data-material][data-theme]{--game-ink:var(--ink);--game-muted:var(--muted);--game-bg:var(--page);--game-panel:var(--panel);--game-edge:var(--edge)}