:root{color-scheme:dark;--mint:#a0ffe1;--text:#e6efef;--muted:#7c909b;--line:#23333b}*{box-sizing:border-box}body{margin:0;background:#080d14;color:var(--text);font-family:Inter,Arial,sans-serif;min-height:100dvh;background-image:radial-gradient(ellipse at 48% 50%,#172c333e,transparent 55%),radial-gradient(ellipse at 10% 90%,#14523d22,transparent 48%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:2px solid var(--mint);outline-offset:5px}.ambient{pointer-events:none;position:fixed;inset:0;background:linear-gradient(112deg,transparent 20%,#6cffe106 20.1%,transparent 20.3%,transparent 78%,#75dbff08 78.1%,transparent 78.3%)}.shell{max-width:1450px;margin:auto;padding:28px 48px 20px}header{display:flex;justify-content:space-between;align-items:center;padding-bottom:25px;border-bottom:1px solid #20303a}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;font-size:17px;letter-spacing:2px}.brand b{color:var(--mint);font-weight:400}.brand-icon{position:relative;width:39px;height:39px;border:1px solid #91e6ca66;border-radius:10px;display:grid;place-items:center;font-size:21px;color:var(--mint);background:linear-gradient(135deg,#b4ffe41a,#102027);box-shadow:inset 0 1px #c0ffef33,0 0 24px #71ffce0a}.brand-icon span{position:absolute;font-size:12px;right:5px;bottom:3px}.toolbar{display:flex;gap:8px}.toolbar button{width:40px;height:40px;border:1px solid #263841;border-radius:10px;background:#121d26;font-size:20px}.toolbar button.active{color:var(--mint);border-color:#79dbb9}.layout{display:grid;grid-template-columns:minmax(210px,1fr) minmax(300px,460px) minmax(180px,.8fr);gap:52px;align-items:center;padding:30px 0}.eyebrow{font-size:12px;letter-spacing:2px;color:var(--mint);display:flex;align-items:center;gap:9px}.eyebrow>span{width:5px;height:5px;background:var(--mint);box-shadow:0 0 10px var(--mint)}h1{font-size:clamp(32px,3.3vw,49px);line-height:1.14;letter-spacing:-2px;font-weight:500;margin:28px 0 20px}h1 em{font-style:normal;color:var(--mint)}.intro>p{color:#9dafb7;font-size:16px;line-height:1.75;max-width:270px}.intro strong{color:#d9eae9}.goal{margin-top:40px;max-width:270px}.goal-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);letter-spacing:1px}.goal-head b{font-size:13px;color:var(--mint);letter-spacing:0}.progress{height:3px;background:#24303b;margin:14px 0 9px}.progress i{display:block;height:100%;background:var(--mint);box-shadow:0 0 12px #8cf4cf;transition:width .5s}.milestones{display:flex;justify-content:space-between;color:#697e8b;font-size:12px}.material-swatch{display:flex;gap:12px;margin:38px 0 19px;transform:rotate(-6deg)}.mini{display:grid;place-items:center;border-radius:11px;width:59px;height:59px;background:linear-gradient(145deg,#adf7ff24,#143441cc 48%,#0e222a);border:1px solid #75d6dfb0;box-shadow:inset 0 2px #eaffff42,inset 0 -5px 9px #0007,0 0 18px #63e1ef15;color:#bcffff;font-size:19px;font-weight:700}.mini.b{color:#dabfff;border-color:#b28aff;background:linear-gradient(135deg,#c898ff33,#201934)}.mini.c{color:#ffdfac;border-color:#e9b566;background:linear-gradient(135deg,#ffdc8e33,#2f261d)}.intro .hint{font-size:14px;line-height:1.6}.keys{font-size:12px;color:#718591;margin-top:33px;display:flex;align-items:center;gap:7px}.keys span{border:1px solid #2c3b46;padding:5px 6px;border-radius:4px;font-size:11px}.game{min-width:0}.scorebar{display:grid;grid-template-columns:1.4fr 1fr .65fr;padding:0 6px 18px;gap:15px}.scorebar span{display:block;color:#859da8;letter-spacing:1.6px;font-size:12px;margin-bottom:6px}.scorebar strong{font-size:30px;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-1px}.scorebar .record strong{color:#abbbbf}.scorebar .combo{text-align:right}.scorebar .combo strong{color:var(--mint)}.board-wrap{position:relative;border:1px solid #5c8a8a59;border-radius:19px;background:linear-gradient(135deg,#b1e7e809,#16212a90 36%,#081019f0);padding:13px 12px 12px;box-shadow:inset 0 1px 0 #d7ffff22,inset 0 0 50px #0005,0 25px 60px #0008,0 0 50px #54ccaa05}.board-caption{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#6c919c;padding:1px 4px 10px}canvas{display:block;width:100%;aspect-ratio:5/7.4;touch-action:none;border-radius:10px}.dock{display:flex;justify-content:space-between;align-items:center;padding:18px 3px 0;gap:12px}.incoming{display:flex;align-items:center;gap:12px}.incoming>span{font-size:10px;letter-spacing:1.2px;color:#8ca4ae;max-width:65px;line-height:1.6}.incoming .mini{width:48px;height:48px;font-size:20px}.next{padding-left:7px;border-left:1px solid #2c3a42;display:flex;flex-direction:column;gap:6px}.next span{font-size:9px;letter-spacing:1px;color:#708891}.next b{color:#a1b2bd;font-size:17px}.drop{border:1px solid #b3ffe5a0;background:linear-gradient(130deg,#beffe8,#86d7c3);color:#122d29;border-radius:9px;padding:14px 20px;font-size:14px;font-weight:700;box-shadow:0 0 20px #83ffbd17}.drop span{padding-left:15px}.column-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}.column-buttons button{border:1px solid #243a43;background:#111d25;border-radius:7px;color:#7b939e;padding:8px;font-size:12px}.column-buttons button.selected{background:#1d3b3b;border-color:#7cdfc6;color:#c1ffed}.column-buttons button:disabled{opacity:.3;cursor:not-allowed}.sector-label{font-size:55px;color:#2b3d46;font-weight:200;letter-spacing:-3px}.sector-label span{font-size:10px;letter-spacing:2px;vertical-align:middle;color:#7c9199}.right h2{font-size:26px;line-height:1.2;font-weight:400;margin:20px 0 26px}.rule{display:flex;gap:14px;padding:18px 0;border-top:1px solid #213039}.rule>span{font-size:11px;color:#567480;padding-top:4px}.rule p{font-size:14px;color:#8096a0;line-height:1.65;margin:0}.rule strong{font-weight:500;color:#d0e1e3;display:inline-block;margin-bottom:4px}.restart{background:transparent;border:1px solid #34454e;padding:12px 20px;font-size:14px;border-radius:8px;margin-top:22px}.legend{font-size:12px;line-height:1.6;color:#637c87;margin-top:20px}.legend i{display:inline-block;background:#d6a677;width:4px;height:4px;margin:0 5px 2px 0}footer{display:flex;justify-content:space-between;font-size:10px;letter-spacing:1.5px;color:#59717d;border-top:1px solid #20303a;padding-top:19px}footer i{font-style:normal;color:#2d444e;margin:0 8px}.overlay{position:absolute;inset:0;background:#06101ce0;backdrop-filter:blur(12px);z-index:5;border-radius:18px;display:grid;place-items:center;padding:25px}.hidden{display:none!important}.modal{text-align:center;max-width:330px}.modal .eyebrow{justify-content:center}.modal h2{font-weight:500;font-size:32px;color:#d5fff0;margin:23px 0 17px}.modal p{font-size:16px;line-height:1.7;color:#a1b6c0}.primary{display:block;margin:24px auto 0;border:0;border-radius:9px;background:#b1f7df;color:#112a24;padding:14px 25px;font-weight:700;font-size:16px}.secondary{margin-top:16px;border:0;background:transparent;color:#a7babf;padding:10px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(min-width:1100px) and (max-height:880px){.shell{padding-top:20px}.layout{grid-template-columns:1fr minmax(300px,375px) .8fr;padding:23px 0;gap:48px}header{padding-bottom:18px}.material-swatch{margin-top:25px}.goal{margin-top:26px}}@media(max-width:1000px){.shell{padding:22px 25px}.layout{grid-template-columns:1fr minmax(300px,430px);gap:35px}.right{display:none}h1{font-size:40px}}@media(max-width:650px){.shell{padding:14px 15px 16px;max-width:455px}header{padding-bottom:14px}.brand{font-size:14px;letter-spacing:1.3px}.brand-icon{width:31px;height:31px;font-size:17px}.toolbar button{width:34px;height:34px;font-size:18px}.layout{display:block;padding:17px 0}.intro{display:none}.scorebar{padding-bottom:12px}.scorebar strong{font-size:25px}.scorebar span{font-size:10px}.board-wrap{padding:10px 9px;border-radius:15px}canvas{max-height:calc(100svh - 277px);min-height:270px;aspect-ratio:5/7.4}.board-caption{font-size:9px}.dock{padding-top:13px}.column-buttons{margin-top:10px}.incoming{gap:9px}.drop{padding:13px 17px}footer{font-size:8px;padding-top:12px}footer span:last-child{display:none}.modal h2{font-size:28px}.modal p{font-size:14px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.current-era{margin:27px 0 0;border-left:2px solid #8dcfb0;padding-left:15px}.current-era>span{font-size:10px;letter-spacing:1.5px;color:#77929c}.current-era h2{margin:7px 0;font-size:24px;font-weight:400}.current-era b{color:#a2b8bb;font-size:14px;font-weight:400}.material-swatch{display:none}.keys{margin-top:20px}.era-trail{color:#8498a3;font-size:10px;line-height:1.85;letter-spacing:1px;border-left:1px solid #30444e;padding-left:16px;margin-top:15px}.right .rule{padding:12px 0}.right h2{margin:13px 0 20px}.right .restart{margin-top:16px}.era-toast{position:absolute;left:9%;right:9%;top:33%;z-index:3;pointer-events:none;text-align:center;padding:24px 10px;background:linear-gradient(110deg,#07131bf2,#15242af2);border:1px solid var(--era-color,#bfffe0);border-radius:13px;box-shadow:0 0 45px #000a,0 0 30px color-mix(in srgb,var(--era-color) 30%,transparent);backdrop-filter:blur(12px);animation:epoch-in .55s cubic-bezier(.2,.9,.3,1) both}.era-toast span{display:block;font-size:10px;letter-spacing:4px;color:var(--era-color);margin-bottom:12px}.era-toast strong{display:block;font-size:clamp(22px,2.4vw,30px);font-weight:500;color:#f1fff7;letter-spacing:-.7px}.era-toast small{display:block;margin-top:10px;color:#a9bdc7;font-size:13px}@keyframes epoch-in{from{opacity:0;transform:scale(.82);filter:blur(12px)}to{opacity:1;transform:scale(1);filter:blur(0)}}@media(min-width:1100px) and (max-height:880px){.era-trail{font-size:9px;line-height:1.7}.right .rule{padding:9px 0}.right .rule p{font-size:13px}.current-era{margin-top:20px}.intro .hint{margin-bottom:10px}.sector-label{font-size:42px}}@media(prefers-reduced-motion:reduce){.era-toast{animation:none}}
@media(max-width:360px){.incoming>span{font-size:9px;max-width:55px}.incoming{gap:7px}.incoming .mini{width:40px;height:43px}.drop{padding:12px}.drop span{padding-left:6px}.next{padding-left:6px}.next span{font-size:8px}.dock{gap:7px}}button:disabled{cursor:not-allowed}.drop:disabled{opacity:.5}
.incoming .mini.joker{font-size:10px;letter-spacing:.5px;background:radial-gradient(ellipse at 40% 35%,#353044,#030208 65%);border-color:#8c72b1;color:#dfcbff;box-shadow:inset 0 0 15px #000,0 0 18px #7650b526}
.era-trail{border-left:0;padding:0;font-size:12px;letter-spacing:0;margin-top:15px;line-height:1.3}.era-trail>div{display:flex;align-items:center;gap:14px;padding:6px 8px;border-left:2px solid transparent;border-radius:0 6px 6px 0;color:#758b97}.era-trail b{width:34px;text-align:right;font-size:12px;font-weight:500;font-variant-numeric:tabular-nums}.era-trail span{font-size:13px}.era-trail small{display:block;font-size:12px;color:#627b85;margin-top:2px}.era-trail .unlocked{color:#bfcecf}.era-trail .active{background:#abffe40a;border-color:#a0ffe1;color:#e2fff3}.era-trail .active small{color:#9ebdb5}.right h2{margin-bottom:12px}.current-era h2{font-size:25px}.right .eyebrow{font-size:11px}.incoming .mini{transition:background .3s,color .3s,border-color .3s}.era-toast strong{font-size:clamp(20px,2.2vw,29px)}@media(min-width:1100px) and (max-height:880px){.era-trail{font-size:12px;line-height:1.25}.era-trail>div{padding:4px 8px}.right h2{font-size:22px;line-height:1.15}.right .legend{margin-top:12px}.right .restart{margin-top:12px}}
/* Arcade stage */
body{background:#070a1b;background-image:radial-gradient(ellipse at 48% 45%,#15285a77,transparent 56%),radial-gradient(ellipse at 9% 70%,#512c6b55,transparent 45%),radial-gradient(ellipse at 90% 20%,#007d8744,transparent 45%)}.shell{max-width:1230px;padding:20px 36px 24px}header{border:0;padding-bottom:18px}.brand{font-size:24px;font-weight:700;letter-spacing:3px}.brand b{font-size:31px;font-weight:800;color:#c2ffee;text-shadow:0 0 20px #5effd4aa}.brand-icon{width:44px;height:44px;box-shadow:inset 0 1px #c0ffef66,0 0 25px #71ffce44}.toolbar button{background:#14203a;border-color:#446584}.layout{grid-template-columns:220px minmax(300px,440px) 200px;gap:40px;justify-content:center;padding:12px 0;align-items:center}.intro .eyebrow,.right .eyebrow{font-size:12px;letter-spacing:1.5px;color:#a0b9dc}.difficulty{display:grid;gap:9px;margin-top:15px}.difficulty button{display:flex;flex-direction:column;gap:7px;text-align:left;background:linear-gradient(115deg,#192341,#0d152a);border:1px solid #375277;border-radius:12px;padding:13px 16px;font-size:17px;font-weight:600;color:#c7d5e5}.difficulty button span{font-size:12px;font-weight:400;color:#90a5c2}.difficulty button.selected{border-color:#a7ffdc;background:linear-gradient(110deg,#164344,#1b243d);color:#d9fff0;box-shadow:inset 0 0 18px #72ffd51a,0 0 22px #6affdc26}.difficulty button[data-difficulty=hard].selected{border-color:#ff82c1;background:linear-gradient(110deg,#452047,#21223b);box-shadow:0 0 22px #ff52a426}.mode-description{font-size:14px!important;line-height:1.55!important;color:#9daecc!important;margin:15px 0 25px}.current-era{border-color:#9fffde}.goal{margin-top:26px}.keys{flex-wrap:wrap;font-size:12px;color:#849dbe;margin-top:25px}.restart{margin-top:18px;background:#152440;border-color:#476588;width:100%;border-radius:10px}.game{position:relative}.scorebar{background:linear-gradient(110deg,#192c4844,#11182a33);border:1px solid #42658155;border-radius:14px;margin-bottom:14px;padding:13px 15px}.scorebar strong{font-weight:700;font-size:30px;text-shadow:0 0 22px #99d9ff44}.scorebar .combo strong{color:#ffb4dc;text-shadow:0 0 18px #ff52a480}.scorebar span{color:#aac6df}.board-wrap{border-color:#94edd488;border-radius:18px;background:linear-gradient(135deg,#8fdcff15,#0f142bb0 36%,#111a33f0);box-shadow:inset 0 1px #cafff766,0 0 30px #43ffc21a,0 30px 65px #000b}.board-caption{color:#a0cbd9;font-size:11px;letter-spacing:.8px;gap:8px}canvas{aspect-ratio:5/7;min-height:0}.drop{background:linear-gradient(125deg,#b8ffe6,#64efd3);box-shadow:0 0 23px #63ffdd55;border-color:#c5ffef;font-size:16px;border-radius:12px}.column-buttons button{background:#192843;border-color:#355579;font-size:14px;padding:9px}.column-buttons button.selected{background:#164941;border-color:#9fffda;box-shadow:0 0 15px #64ffd433}.incoming .mini{width:58px;height:58px;font-size:23px}.incoming>span{font-size:12px;letter-spacing:1px}.next span{font-size:11px}.next b{font-size:20px}.era-trail>div{padding:5px 8px;color:#7188a8}.era-trail b{color:#a4bbd3}.era-trail .active{background:linear-gradient(90deg,#68ffcf22,transparent);box-shadow:0 0 16px #66ffcf12}.era-trail small{color:#8395b1}.joker-note{margin-top:20px;border-top:1px solid #63528566;padding-top:20px;color:#c9b9eb}.joker-note b{font-size:12px;letter-spacing:1px}.joker-note p{font-size:13px;color:#99a4c2;line-height:1.6}.effects-on .ambient{background:linear-gradient(112deg,transparent 19%,#77ffe108 19.2%,#77ffe119 19.3%,transparent 19.5%,transparent 80%,#fb71dd15 80.1%,transparent 80.4%);animation:ambient-flow 12s ease-in-out infinite alternate}.effects-on .board-wrap:before{content:'';position:absolute;inset:-2px;border-radius:20px;pointer-events:none;box-shadow:-12px 0 36px #00e5df22,12px 0 36px #fb50d522;animation:stage-light 4s ease-in-out infinite alternate}.effects-on .board-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;border-radius:18px;background:linear-gradient(105deg,transparent 40%,#ffffff05 45%,transparent 52%);background-size:250% 100%;animation:glass-sweep 9s ease-in-out infinite}.effects-on .brand{text-shadow:0 0 25px #90fff455}.effects-off .ambient{opacity:.35}.effects-off .board-wrap,.effects-off .drop{box-shadow:none}@keyframes ambient-flow{to{opacity:.5;transform:translateX(2%)}}@keyframes stage-light{to{box-shadow:-12px 0 45px #00e5df44,12px 0 45px #fb50d544}}@keyframes glass-sweep{from{background-position:100% 0}to{background-position:-100% 0}}@media(min-width:1100px) and (max-height:880px){.shell{padding-top:15px}.layout{grid-template-columns:200px minmax(300px,355px) 190px;gap:38px}.brand{font-size:21px}.brand b{font-size:27px}.scorebar{padding:11px 13px}.scorebar strong{font-size:27px}.era-trail>div{padding:4px 8px}.difficulty button{padding:11px 14px}}@media(max-width:1000px){.layout{grid-template-columns:200px minmax(300px,420px);gap:28px}.right{display:none}.shell{padding:18px 25px}}@media(max-width:650px){.shell{max-width:455px;padding:12px}.brand{font-size:15px;letter-spacing:1px;gap:8px}.brand b{font-size:21px}.brand-icon{width:31px;height:31px}.toolbar{gap:5px}.toolbar button{width:32px;height:32px}.layout{display:flex;flex-direction:column;gap:12px;padding:0}.intro{display:block;width:100%}.intro>.eyebrow,.intro>.mode-description,.intro>.current-era,.intro>.goal,.intro>.keys{display:none}.difficulty{grid-template-columns:repeat(3,1fr);gap:7px;margin-top:0}.difficulty button{padding:10px 8px;font-size:14px;text-align:center;align-items:center}.difficulty button span{font-size:10px;line-height:1.2}.intro .restart{display:none}.game{width:100%}.scorebar{padding:10px 12px;margin-bottom:10px}.scorebar strong{font-size:25px}.scorebar span{font-size:10px}.board-wrap{padding:10px 8px}canvas{max-height:calc(100svh - 306px);min-height:240px}.incoming .mini{width:45px;height:45px;font-size:20px}.incoming>span{font-size:10px}.next span{font-size:9px}.next b{font-size:17px}.drop{font-size:14px;padding:13px 17px}.board-caption{font-size:9px}.dock{padding-top:12px}.column-buttons{gap:7px}.column-buttons button{padding:7px}}@media(prefers-reduced-motion:reduce){.effects-on .ambient,.effects-on .board-wrap:before,.effects-on .board-wrap:after{animation:none}}
@media(max-width:650px){header{gap:8px;flex-wrap:wrap;padding-bottom:12px}.toolbar{margin-left:auto}}@media(max-width:380px){.brand-icon{display:none}.brand{font-size:13px;letter-spacing:.5px}.brand b{font-size:19px}.toolbar button{width:28px;height:30px;font-size:17px}.toolbar{gap:4px}.difficulty button span{font-size:9px}.incoming .mini.joker{font-size:9px}.board-caption{font-size:8px;letter-spacing:0}}
/* The current epoch shapes the whole arena. */
body{--world:#181410;--panel:#34281b;--accent:#d9be91;--secondary:#b67947;--scene-radius:5px;--title-font:Georgia,serif;--texture-x:0%;--texture-y:0%;--texture-opacity:.075;--mint:var(--accent);background-color:var(--world);background-image:radial-gradient(ellipse at 50% 45%,color-mix(in srgb,var(--panel) 70%,transparent),transparent 64%),radial-gradient(ellipse at 10% 85%,color-mix(in srgb,var(--secondary) 15%,transparent),transparent 50%);transition:background-color 1s,color .8s}.era-surface{position:fixed;inset:0;pointer-events:none;background-image:url('material-01.webp');background-size:cover;background-position:center;opacity:var(--texture-opacity);filter:saturate(.75);transition:background-position 1.1s ease,opacity 1s;mix-blend-mode:screen}.shell{position:relative}.brand,.current-era h2,.era-toast strong{font-family:var(--title-font);transition:color .8s}.brand b{color:var(--accent);text-shadow:0 0 20px color-mix(in srgb,var(--accent) 55%,transparent)}.brand-icon{color:var(--accent);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 15%,transparent),var(--panel));border-color:color-mix(in srgb,var(--accent) 50%,transparent);border-radius:var(--scene-radius);box-shadow:inset 0 1px #ffffff30,0 0 24px color-mix(in srgb,var(--accent) 20%,transparent)}.toolbar button,.difficulty button,.restart,.column-buttons button{background:linear-gradient(120deg,var(--panel),var(--world));border-color:color-mix(in srgb,var(--accent) 35%,var(--panel));border-radius:clamp(5px,var(--scene-radius),14px);transition:background .8s,border-color .8s,border-radius .8s,color .8s,box-shadow .8s}.toolbar button.active{color:var(--accent);border-color:var(--accent)}.difficulty button.selected,.difficulty button[data-difficulty=hard].selected{background:linear-gradient(110deg,color-mix(in srgb,var(--accent) 20%,var(--panel)),var(--panel));border-color:var(--accent);color:#f3f4f6;box-shadow:inset 0 0 18px color-mix(in srgb,var(--accent) 8%,transparent),0 0 20px color-mix(in srgb,var(--accent) 15%,transparent)}.scorebar{background:linear-gradient(110deg,color-mix(in srgb,var(--panel) 70%,transparent),color-mix(in srgb,var(--world) 40%,transparent));border-color:color-mix(in srgb,var(--accent) 30%,transparent);border-radius:clamp(5px,var(--scene-radius),18px);transition:background .8s,border-color .8s,border-radius .8s}.scorebar strong{text-shadow:0 0 20px color-mix(in srgb,var(--accent) 25%,transparent)}.scorebar .combo strong{color:var(--secondary);text-shadow:0 0 18px color-mix(in srgb,var(--secondary) 50%,transparent)}.board-wrap{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),var(--world) 40%,var(--panel));border-color:color-mix(in srgb,var(--accent) 65%,transparent);border-radius:var(--scene-radius);box-shadow:inset 0 1px #ffffff30,0 0 32px color-mix(in srgb,var(--accent) 13%,transparent),0 30px 60px #0009;transition:background .8s,border-color .8s,border-radius 1s,box-shadow 1s}.board-caption{color:var(--accent)}.current-era{border-color:var(--accent)}.current-era h2{color:#e8edf0}.drop{background:linear-gradient(125deg,var(--accent),var(--secondary));border-color:var(--accent);color:#15131b;border-radius:clamp(6px,var(--scene-radius),16px);box-shadow:0 0 23px color-mix(in srgb,var(--accent) 35%,transparent);transition:background .8s,border-radius .8s,box-shadow 1s}.column-buttons button.selected{background:color-mix(in srgb,var(--accent) 20%,var(--panel));border-color:var(--accent);color:#f6f4f8;box-shadow:0 0 15px color-mix(in srgb,var(--accent) 20%,transparent)}.era-trail .active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 15%,transparent),transparent);border-color:var(--accent);color:var(--accent);box-shadow:0 0 16px color-mix(in srgb,var(--accent) 8%,transparent)}.era-trail .active small{color:#bdc6cc}.joker-note{border-color:color-mix(in srgb,var(--secondary) 40%,transparent)}.modal h2{color:var(--accent)}.primary{background:var(--accent);color:#15131b}.overlay{background:color-mix(in srgb,var(--world) 88%,transparent);border-radius:var(--scene-radius)}.era-toast{background:linear-gradient(110deg,var(--world),var(--panel));border-radius:clamp(6px,var(--scene-radius),20px)}.effects-on .ambient{background:linear-gradient(112deg,transparent 19%,color-mix(in srgb,var(--accent) 5%,transparent) 19.2%,color-mix(in srgb,var(--accent) 13%,transparent) 19.3%,transparent 19.5%,transparent 80%,color-mix(in srgb,var(--secondary) 10%,transparent) 80.1%,transparent 80.4%)}.effects-on .board-wrap:before{border-radius:var(--scene-radius);animation:epoch-lights 4s ease-in-out infinite alternate;box-shadow:-12px 0 36px color-mix(in srgb,var(--accent) 15%,transparent),12px 0 36px color-mix(in srgb,var(--secondary) 15%,transparent)}.effects-on .board-wrap:after{border-radius:var(--scene-radius)}.effects-on .brand{text-shadow:0 0 25px color-mix(in srgb,var(--accent) 30%,transparent)}@keyframes epoch-lights{to{box-shadow:-12px 0 45px color-mix(in srgb,var(--accent) 27%,transparent),12px 0 45px color-mix(in srgb,var(--secondary) 27%,transparent)}}body[data-epoch=earth] .board-wrap,body[data-epoch=bronze] .board-wrap{border-width:2px}body[data-epoch=ceramic] .board-wrap{box-shadow:inset 0 2px 5px #ffffff25,inset 0 -4px 12px #0005,0 20px 50px #0007}body[data-epoch=iron] .difficulty button,body[data-epoch=machine] .difficulty button{border-left-width:4px}body[data-epoch=steam] .scorebar{border-bottom:3px solid var(--secondary)}body[data-epoch=polymer] .difficulty button{box-shadow:inset 0 2px 4px #ffffff20}body[data-epoch=digital] .scorebar,body[data-epoch=photonics] .scorebar{border-top:2px solid var(--accent)}body[data-epoch=nano] .board-wrap{border-style:double;border-width:3px}body[data-epoch=quantum] .scorebar{border-radius:24px}body[data-epoch=fusion] .board-wrap{border-color:var(--secondary);box-shadow:0 0 32px color-mix(in srgb,var(--accent) 25%,transparent),0 0 55px color-mix(in srgb,var(--secondary) 14%,transparent)}@media(prefers-reduced-motion:reduce){.era-surface,.board-wrap,.scorebar,.difficulty button,.drop,body{transition:none}.effects-on .board-wrap:before{animation:none}}
.era-trail{max-height:430px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}.era-trail>div.era-locked{display:none}.era-trail b{width:70px;flex-shrink:0;font-size:12px}.era-trail span{font-size:12px;overflow-wrap:anywhere}.era-trail>div{gap:9px}.current-era h2{overflow-wrap:anywhere}.era-surface{background-image:var(--world-texture,url('material-01.webp'));mix-blend-mode:normal;filter:none}.era-illustration{width:min(100%,220px);aspect-ratio:1;margin:0 auto 16px;border-radius:14px;background-size:cover;border:1px solid var(--accent)}.modal p{font-size:14px;line-height:1.6}.modal h2{font-size:25px;margin:15px 0 10px}.modal .primary{margin-top:15px}.overlay{backdrop-filter:none;overflow-y:auto;align-items:center;padding:18px}.modal{padding:10px 0}.mini.mystery{background:linear-gradient(145deg,#665041,#14121d)!important;border-color:#f9d68a!important;color:#f9d68a!important}.effects-on .board-wrap:before{animation:light-opacity 4s ease-in-out infinite alternate;will-change:opacity}.effects-on .board-wrap:after{animation:none}.effects-on .ambient{animation:none}@keyframes light-opacity{to{opacity:.45}}@media(max-width:650px){.era-illustration{width:145px;margin-bottom:12px}.modal h2{font-size:22px}.modal p{font-size:13px}.modal .eyebrow{font-size:10px;letter-spacing:1px}.modal .primary{padding:11px 20px;font-size:14px}.modal{padding:4px 0}}@media(prefers-reduced-motion:reduce){.effects-on .board-wrap:before{animation:none}}
.bomb-bar{display:flex;align-items:center;gap:12px;margin:12px 0 0}.bomb-bar button{border:1px solid #8abccc;background:linear-gradient(110deg,#243347,#142339);border-radius:10px;color:#dcffff;padding:10px 13px;font-size:13px;flex-shrink:0}.bomb-bar b{display:inline-block;border-radius:5px;background:#a4e4eb;color:#132534;padding:2px 6px;margin-left:5px}.bomb-bar button.active{border-color:#c6ffff;background:#26515a;box-shadow:0 0 14px #9cffff38}.bomb-bar>span{color:#91b4c4;font-size:11px;line-height:1.4}.toast-illustration{width:82px;aspect-ratio:1;margin:0 auto 10px;border-radius:9px;background-image:none;background-size:cover}.era-toast{top:8%;left:12%;right:12%;padding:15px 12px;backdrop-filter:none;animation:none;box-shadow:0 5px 22px #0008}.era-toast small{font-size:12px;line-height:1.5}.board-wrap{transition:border-color .5s,box-shadow .5s;border-radius:16px!important}.scorebar,.difficulty button,.toolbar button,.drop{transition:color .4s,border-color .4s;background-clip:padding-box}.era-surface{transition:opacity .5s;background-position:center}.effects-on .board-wrap:before{animation:none;box-shadow:0 0 26px color-mix(in srgb,var(--accent) 12%,transparent)}.effects-on .board-wrap:after{display:none}.expanded-board .layout{grid-template-columns:200px minmax(320px,490px) 190px;gap:30px}.expanded-board .column-buttons{grid-template-columns:repeat(7,1fr)}@media(min-width:1100px) and (max-height:880px){.expanded-board .layout{grid-template-columns:190px minmax(320px,410px) 180px;gap:28px}}@media(max-width:1000px){.expanded-board .layout{grid-template-columns:180px minmax(320px,470px);gap:24px}}@media(max-width:650px){.expanded-board .layout{display:flex;gap:10px}.bomb-bar{gap:8px;margin-top:10px}.bomb-bar button{padding:9px;font-size:12px}.bomb-bar>span{font-size:10px}.expanded-board canvas{max-height:calc(100svh - 340px);min-height:230px}.era-toast{top:6%;padding:12px}.toast-illustration{width:60px}.era-toast strong{font-size:19px}.era-toast small{font-size:11px}.column-buttons{gap:5px}}

/* Fusion changes two fixed gradients through opacity; no animated inherited CSS properties. */
body[data-epoch=fusion].effects-on .ambient:before,body[data-epoch=fusion].effects-on .ambient:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 15% 65%,#ff92bc22,transparent 65%),radial-gradient(ellipse at 85% 30%,#ffd58b28,transparent 65%);animation:fusion-fade 180s ease-in-out infinite;will-change:opacity}
body[data-epoch=fusion].effects-on .ambient:after{background:radial-gradient(ellipse at 15% 65%,#94f3e628,transparent 65%),radial-gradient(ellipse at 85% 30%,#c4b1ff30,transparent 65%);animation-delay:-90s}
@keyframes fusion-fade{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){body[data-epoch=fusion].effects-on .ambient:before,body[data-epoch=fusion].effects-on .ambient:after{animation:none;will-change:auto}}