:root{
 --p1-h:263;--p1-s:51%;--p2-h:39;--p2-s:72%;
 --room-bg:#11141e;--room-card:#1b202d;--room-card-top:#232a39;--room-panel:#161b27;
 --room-line:#a4aec21d;--room-text:#e9eaf0;--room-muted:#919aad;--room-accent:#c1bce9;
 --room-button:#c8c2ed;--room-button-text:#29273e;--room-shadow:#00000030;
 --room-board-top:#434e62;--room-board-bottom:#2d3547;--room-hole:#151a27;
 --room-win:#e8d7a9;--room-loss:#e5adaa;
 color-scheme:dark;
}
body[data-ui-theme="sand"]{
 --room-bg:#211b18;--room-card:#302823;--room-card-top:#3a3028;--room-panel:#29221e;
 --room-line:#e0c4a125;--room-text:#f0e7db;--room-muted:#b09d8b;--room-accent:#e4c59a;
 --room-button:#dec197;--room-button-text:#342819;--room-board-top:#65564a;--room-board-bottom:#463c35;--room-hole:#261f1e;
}
body[data-ui-theme="pearl"]{
 --room-bg:#f1f0ed;--room-card:#faf9f6;--room-card-top:#fff;--room-panel:#eae8e3;
 --room-line:#66708425;--room-text:#303444;--room-muted:#7e8290;--room-accent:#72698f;
 --room-button:#78718f;--room-button-text:#fff;--room-shadow:#31334012;
 --room-board-top:#637086;--room-board-bottom:#414c60;--room-hole:#202735;
 --room-win:#88754b;--room-loss:#a76462;color-scheme:light;
}
body{background:radial-gradient(ellipse at 85% -10%,#8c88ad0c,transparent 50%),var(--room-bg);color:var(--room-text);--bg:var(--room-bg);--ink:var(--room-text);--muted:var(--room-muted);--line:var(--room-line);--purple:var(--room-accent)}
.sidebar{background:var(--room-panel);border-color:var(--room-line);box-shadow:5px 0 30px var(--room-shadow)}
.brand{color:var(--room-text)}.brand-mark{background:var(--room-button);box-shadow:0 4px 10px var(--room-shadow),inset 0 1px 0 #ffffff60}
.brand-mark i{background:var(--room-button-text)}.brand-mark i:last-child{background:#ffffffb0}
.brand small,.nav-label,.topbar>span{color:var(--room-muted)}.nav{color:var(--room-muted)}
.nav.active{background:linear-gradient(145deg,var(--room-card-top),var(--room-card));border:1px solid var(--room-line);color:var(--room-accent);box-shadow:0 4px 10px var(--room-shadow),inset 0 1px 0 #ffffff08}
.nav.active>span{color:var(--room-accent)}.nav:hover{background:var(--room-card)}
.install,.avatar,.test-badge{background:var(--room-card);color:var(--room-muted);border-color:var(--room-line)}
.offline-dot,.maker,.maker b{color:var(--room-muted)}
.play-card,.setup-card,.history-card,.settings-card,.chat-card,.login-panel,.learn-steps article,.strategy-cards article,.rules-panel,.lesson-panel,.try-panel,.possibilities-panel,.destination-card,.ready-panel,.scene-strip{
 background:linear-gradient(140deg,var(--room-card-top),var(--room-card));border-color:var(--room-line);
 box-shadow:0 12px 28px var(--room-shadow),inset 0 1px 0 #ffffff08;
}
.play-card{border-radius:20px;box-shadow:0 18px 40px var(--room-shadow),inset 0 1px 0 #ffffff12;padding-top:26px}
h2,h3,.play-card h2,.insight-card h3{color:var(--room-text)}
h1 em,.lesson-copy h2 em{color:var(--room-accent)}
.welcome-hero,.hero{background-image:linear-gradient(90deg,#101726f2 0%,#101726d9 35%,#10172635 80%),var(--scene);border-color:var(--room-line);box-shadow:0 15px 35px var(--room-shadow)}
.welcome-copy h1,.hero h1{color:#f1f1f5}.welcome-copy h1 em,.hero h1 em{color:#d9d1f0}
.hero p,.welcome-copy>p{color:#bdc0d1}.hero .eyebrow,.welcome-copy .eyebrow{color:#ded4eb}
.hero-tags,.welcome-stats{color:#b5b9cc}.welcome-stats b{color:#eee8f5}
.destination-tag{background:#121724c9;border-color:#ffffff22}.destination-tag>span{color:#ddd4ee}.destination-tag b{color:#e3deee}.destination-tag small{color:#b5b5c8}
.primary{background:linear-gradient(150deg,color-mix(in srgb,var(--room-button) 85%,white),var(--room-button));border:1px solid #ffffff25;color:var(--room-button-text);box-shadow:0 4px 0 color-mix(in srgb,var(--room-button) 65%,#1a1722),0 7px 17px var(--room-shadow),inset 0 1px 0 #fff6;transition:box-shadow .2s,transform .2s,filter .2s}
.primary:hover:not(:disabled){background:var(--room-button);filter:brightness(1.06);box-shadow:0 4px 0 color-mix(in srgb,var(--room-button) 65%,#1a1722),0 9px 24px var(--room-shadow),inset 0 1px 0 #fff8}
.primary:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 color-mix(in srgb,var(--room-button) 65%,#1a1722),0 4px 8px var(--room-shadow)}
.secondary,.glass-button{background:var(--room-panel);border-color:var(--room-line);color:var(--room-accent)}
.welcome-actions .glass-button{background:#ffffff08;color:#e3dcec;border-color:#ffffff26}
.text-button,.text-button:hover{color:var(--room-accent)}
.section-kicker,.tiny-label,.gallery-intro,.learn-steps p,.strategy-cards p,.lesson-copy>p,.possibilities-panel p,.ready-panel p,.rules-panel p,.muted,.setup-card>.muted,.fine-print,.setup-caption,.mode-note p,.device-note p,.device-note b,.player small,.local-note,.board-footer{color:var(--room-muted)}
.lesson-caption,.possibility-numbers strong,.possibility-numbers span,.legend,.mini-board-label,.mini-board-label span:last-child,.direction-tabs button.selected{color:var(--room-accent)}
.step-icon,.step-icon i,.strategy-cards article>span{color:var(--room-accent)}.step-icon i{background:var(--room-panel);border-color:var(--room-line)}
.lesson-board-frame,.try-board-frame .mini-board{background:var(--room-panel);border-color:var(--room-line)}
.direction-tabs button,.segmented,.stakes button{background:var(--room-panel);color:var(--room-muted);border-color:var(--room-line)}
.direction-tabs button.selected,.segmented button.selected,.stakes button.selected{background:var(--room-card-top);color:var(--room-accent);border-color:var(--room-accent)}
.destination-card b{color:var(--room-text)}.destination-card p,.destination-card small{color:var(--room-muted)}.destination-card.selected{border-color:var(--room-accent)}.destination-card .scene-check{background:var(--room-button);color:var(--room-button-text)}
label{color:var(--room-muted)}select,input{background:var(--room-panel);border-color:var(--room-line);color:var(--room-text)}select option{background:var(--room-panel);color:var(--room-text)}
.scene-strip>span{color:var(--room-muted)}.scene-strip select{background:var(--room-panel);color:var(--room-text);border-color:var(--room-line)}
.mode-note b,.mode-note>span,.pill{color:var(--room-accent)}.pill{background:var(--room-panel);border-color:var(--room-line)}
.player{background:var(--room-panel);border-color:var(--room-line);border-radius:11px;box-shadow:inset 0 2px 8px #0000000b}
.player strong{color:var(--room-text)}.player.active{background:var(--room-panel);border-color:hsl(var(--p1-h) var(--p1-s) 64% / .65);box-shadow:0 0 18px hsl(var(--p1-h) var(--p1-s) 60% / .08)}
.player.active.gold-active{background:var(--room-panel);border-color:hsl(var(--p2-h) var(--p2-s) 64% / .65);box-shadow:0 0 18px hsl(var(--p2-h) var(--p2-s) 60% / .08)}
.turn-mark{color:var(--room-accent)}
.board-surface{position:relative;isolation:isolate}
.board{position:relative;background:linear-gradient(145deg,var(--room-board-top),var(--room-board-bottom));border:1px solid #b5becb40;border-radius:19px;box-shadow:0 3px 0 #cdd5e014,0 9px 0 #0b0f18,0 12px 0 #a0aaba16,0 24px 30px #00000030,inset 0 2px 1px #ffffff25,inset 0 -3px 3px #070a1430;padding:18px;gap:10px}
.cell{background:radial-gradient(ellipse at 50% 85%,#6d779120,transparent 70%),var(--room-hole);border:1px solid #00000075;box-shadow:inset 0 5px 10px #03050ab0,inset 0 -1px 1px #b0bed32b;border-radius:50%;overflow:visible;transition:filter .18s}
.p1{--metal-h:var(--p1-h);--metal-s:var(--p1-s)}.p2{--metal-h:var(--p2-h);--metal-s:var(--p2-s)}
.cell.p1,.cell.p2,.mini-cell.p1,.mini-cell.p2,.player-dot.purple,.player-dot.gold,.metal-preview .mini-cell{
 background:radial-gradient(circle at 29% 18%,#ffffffed 0 1.5%,#ffffff45 3%,transparent 11%),linear-gradient(168deg,transparent 15%,#ffffff32 24%,#ffffff06 32%,#00000033 47%,#ffffff7a 53%,#ffffff08 61%,#00000030 83%),radial-gradient(circle at 35% 25%,hsl(var(--metal-h) var(--metal-s) 83%),hsl(var(--metal-h) var(--metal-s) 53%) 44%,hsl(var(--metal-h) var(--metal-s) 24%) 79%,hsl(var(--metal-h) var(--metal-s) 15%));
 border:1px solid hsl(var(--metal-h) var(--metal-s) 86% / .7);box-shadow:inset 0 1px 2px #ffffff90,inset 1px -4px 7px #0008,1px 3px 4px #0008,0 0 0 1px #00000035;
}
.player-dot.purple{--metal-h:var(--p1-h);--metal-s:var(--p1-s);color:#fff;text-shadow:0 1px 2px #0008}.player-dot.gold{--metal-h:var(--p2-h);--metal-s:var(--p2-s);color:#fff;text-shadow:0 1px 2px #0008}
.cell.p1:after,.cell.p2:after{content:'';position:absolute;inset:9%;border:0;border-radius:50%;background:radial-gradient(ellipse at 28% 16%,#fff8,transparent 39%);box-shadow:inset 0 -1px 2px #ffffff18;opacity:.4;pointer-events:none}
.cell.p1:before,.cell.p2:before,.cell.last:before{content:attr(data-piece);position:absolute;inset:0;display:grid;place-items:center;width:auto;height:auto;background:none;color:#ffffff72;font-size:clamp(10px,1vw,14px);font-weight:650;text-shadow:0 1px 2px #0006;z-index:1}
.cell.last{outline:1px solid #ffffff55;outline-offset:3px}
.cell.winning{outline:2px solid #f1e4c1;outline-offset:3px;animation:winner-settle 1.2s ease-out both;box-shadow:inset 0 1px 2px #fff9,inset 1px -4px 7px #0008,0 0 20px #fff1b540,0 4px 5px #0007;z-index:2}
.board-finished .cell:not(.winning){filter:saturate(.72) brightness(.86)}
.winning-path{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3;overflow:visible}
.winning-path path{fill:none;stroke:#fff4d1;stroke-width:3;stroke-linecap:round;opacity:.8;filter:drop-shadow(0 0 5px #eed7a6);vector-effect:non-scaling-stroke}
.winning-path .draw-path{stroke-dasharray:1;stroke-dashoffset:1;animation:connect-line .65s .45s ease-out forwards}
.column-buttons button{color:var(--room-muted)}.column-buttons button:hover:not(:disabled){background:var(--room-panel);color:var(--room-accent)}
.game-status{color:var(--room-muted)}.status-dot{background:var(--room-accent)}
.mini-board{background:linear-gradient(140deg,var(--room-board-top),var(--room-board-bottom));border-color:#ffffff20;box-shadow:0 6px 0 #111622,0 10px 18px #0002}
.mini-cell{background:var(--room-hole);border-color:#0005;box-shadow:inset 0 3px 5px #0007}
.mini-cell.win{outline-color:#eeddb3}.mini-cell.win:after{color:#fff5cf}
.legend i.purple{background:hsl(var(--p1-h) var(--p1-s) 60%)}.legend i.gold{background:hsl(var(--p2-h) var(--p2-s) 60%)}
.practice-help{margin:17px 0 8px;background:var(--room-panel);border:1px solid var(--room-line);border-radius:10px;padding:12px 14px}
.practice-help label{display:flex;align-items:center;justify-content:space-between;margin:0;font-size:11px;color:var(--room-text);gap:12px}.practice-help input{width:17px;min-height:17px;accent-color:#a9a2d4}.practice-help small{display:block;color:var(--room-muted);font-size:9px;margin-top:6px;line-height:1.6}
.practice-help:has(input:disabled){opacity:.5}
.practice-note{padding:13px 14px;background:var(--room-panel);border:1px solid var(--room-line);border-radius:10px;color:var(--room-muted);font-size:10px;line-height:1.8;margin-top:23px}
.unassisted-game #arena :is(.insight-card,.mode-note,.device-note,#difficulty-help){display:none}
.hint-shadow:after,.ghost-preview:after{content:'';position:absolute;inset:7%;border-radius:50%;background:radial-gradient(circle at 32% 23%,hsl(var(--p1-h) var(--p1-s) 85% / .3),hsl(var(--p1-h) var(--p1-s) 58% / .1) 55%,#0000);border:1px dashed hsl(var(--p1-h) var(--p1-s) 83% / .3);box-shadow:none;pointer-events:none}
.hint-shadow:before{content:attr(data-hint);position:absolute;inset:0;display:grid;place-items:center;color:#b4bcd2;font-size:20px;font-weight:400;z-index:1;pointer-events:none}
.hint-win:after{border:1px dashed #dbe7bda0;background:#cfe1ab14}.hint-win:before{color:#d1e5b5;font-size:16px}
.hint-danger:after{border:1px dashed #d9a3a55c;background:#d0a0a50b}.hint-danger:before{color:#c58f96;font-size:17px}
.hint-block:after{border:1px dashed #e0c79b88;background:#d9c39414}.hint-block:before{color:#e3c997;font-size:18px}
.hint-build:after{border-color:#a5b3d05c}.hint-build:before{color:#b7c1dc;font-size:32px;opacity:.6}
.ghost-preview:after{background:hsl(var(--p1-h) var(--p1-s) 70% / .23);border:1px solid hsl(var(--p1-h) var(--p1-s) 87% / .65)}
.result-ribbon{display:flex;gap:13px;align-items:center;padding:15px 17px;margin:21px 0 8px;border:1px solid #d9c5983d;border-radius:12px;background:linear-gradient(110deg,#d6bf8a12,var(--room-panel));color:var(--room-text);min-height:76px}
.result-medal{display:grid;place-items:center;width:38px;height:38px;flex-shrink:0;border-radius:50%;color:#dbc28b;background:radial-gradient(circle at 32% 20%,#fff4c436,#816d3d44 60%,#211b1755);border:1px solid #dcc5955c;box-shadow:inset 0 1px 2px #fff7,0 3px 5px #0003;font-size:22px}
.result-eyebrow{font-size:6px;letter-spacing:1.6px;color:var(--room-muted)}.result-title{font-size:17px;font-weight:600;line-height:1.35;margin:5px 0 0;color:var(--room-text)}.result-net{font-size:22px;font-weight:500;white-space:nowrap;margin-left:auto;color:var(--room-win)}
.result-ribbon[data-result="loss"]{border-color:#c0929733;background:linear-gradient(110deg,#bd92970c,var(--room-panel))}.result-ribbon[data-result="loss"] .result-net{color:var(--room-loss)}.result-ribbon[data-result="loss"] .result-medal{color:#c4b9ce;border-color:#c5b2ce35;background:radial-gradient(circle at 32% 20%,#e5d8ed22,#5c4b6638)}
.result-enter{animation:result-rise .5s .5s both}.match-receipt{margin:5px 0 22px;padding:22px;background:var(--room-panel);border:1px solid var(--room-line);border-radius:13px;animation:result-rise .5s .75s both}
.receipt-heading{display:flex;gap:9px;align-items:center;color:var(--room-muted);font-size:9px;letter-spacing:.6px}.receipt-mark{font-size:20px;color:var(--room-win)}
.receipt-number{display:flex;align-items:center;gap:20px;padding:20px 0}.receipt-number strong{font-size:35px;font-weight:500;letter-spacing:-1px;color:var(--room-win);white-space:nowrap}.receipt-number span{font-size:10px;line-height:1.8;max-width:210px;color:var(--room-muted)}
.match-receipt[data-result="loss"] .receipt-number strong{color:var(--room-loss)}
.receipt-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border-top:1px solid var(--room-line);padding-top:15px}.receipt-stats>div{display:grid;gap:8px}.receipt-stats span{font-size:8px;color:var(--room-muted)}.receipt-stats b{font-size:15px;color:var(--room-text);font-weight:500}
.receipt-player{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--room-line);padding:17px 0;font-size:12px}.receipt-player strong{margin-left:auto;font-size:18px;font-weight:500}.receipt-player small{font-size:9px;color:var(--room-muted)}.positive{color:var(--room-win)}.negative{color:var(--room-loss)}
.receipt-fine,.receipt-explanation{font-size:9px;line-height:1.8;color:var(--room-muted);margin:15px 0}.receipt-explanation{font-size:10px}.match-receipt>.primary{margin-top:18px;min-height:41px;font-size:10px}.match-receipt>.secondary{margin-top:18px}
.appearance-menu{position:relative}.appearance-menu>summary{list-style:none;cursor:pointer;padding:9px 12px;border:1px solid var(--room-line);border-radius:8px;color:var(--room-accent);background:linear-gradient(140deg,var(--room-card-top),var(--room-card));box-shadow:0 3px 8px var(--room-shadow);font-size:12px}
.appearance-panel{position:absolute;right:0;top:42px;width:300px;padding:23px;background:linear-gradient(145deg,var(--room-card-top),var(--room-card));border:1px solid var(--room-line);border-radius:16px;box-shadow:0 20px 55px #0005;z-index:60}
.appearance-panel h3{margin:10px 0 18px;font-size:20px;font-weight:550;letter-spacing:-.5px}.appearance-panel>label{font-size:9px;margin-top:19px}
.theme-options{display:flex;gap:7px}.theme-options button{flex:1;font-size:9px;padding:9px 6px;border:1px solid var(--room-line);background:var(--room-panel);color:var(--room-muted);border-radius:7px}.theme-options button.selected{color:var(--room-accent);border-color:var(--room-accent);background:var(--room-card-top)}
.colour-swatches{display:flex;gap:7px;flex-wrap:wrap}.colour-swatch{width:24px;height:24px;border-radius:50%;border:1px solid #ffffff6b;background:radial-gradient(circle at 30% 20%,#fffc,transparent 32%),linear-gradient(165deg,transparent 43%,#ffffff70 52%,transparent 61%),radial-gradient(circle at 35% 25%,hsl(var(--sample-h) var(--sample-s) 75%),hsl(var(--sample-h) var(--sample-s) 44%) 55%,hsl(var(--sample-h) var(--sample-s) 15%));box-shadow:0 2px 3px #0004,inset 0 -1px 2px #0005;outline-offset:3px}
.colour-swatch.selected{outline:2px solid var(--room-accent)}.metal-preview{display:flex;justify-content:center;align-items:center;gap:24px;margin:27px 0 18px}.metal-preview>.mini-cell{width:48px;height:48px}.metal-preview i{font-size:9px;font-style:normal;color:var(--room-muted)}
.fx-menu>summary,.language-switch,.fx-panel,.icon-button{background:var(--room-panel);color:var(--room-accent);border-color:var(--room-line)}.fx-panel>label{color:var(--room-text)}.fx-panel select{background:var(--room-card)}.language-switch button{color:var(--room-muted)}.language-switch button.selected{background:var(--room-button);color:var(--room-button-text)}
.insight-card{background:var(--room-card);border-color:var(--room-line)}.insight-card p,.insight-card .section-kicker{color:var(--room-muted)}.insight-card .text-button,.insight-icon{color:var(--room-accent)}
.online-count,.person-avatar,.challenge-button,.tx-icon{background:var(--room-panel);color:var(--room-accent)}.lobby-person b,.online-profile h2{color:var(--room-text)}.online-balance b,.tx-amount,.breakdown b,.breakdown .total b{color:var(--room-accent)}.connection-pill{background:var(--room-panel);border-color:var(--room-line);color:var(--room-accent)}.chat-message p,.chat-message.mine p{background:var(--room-panel);color:var(--room-text)}.chat-message.mine p{border:1px solid var(--room-line)}
dialog{background:var(--room-card);border-color:var(--room-line);color:var(--room-text)}dialog p{color:var(--room-muted)}.result-detail,.dialog-symbol{background:var(--room-panel);color:var(--room-accent)}.toast{background:var(--room-panel);color:var(--room-text);border-color:var(--room-line)}
footer,footer>span:first-child,footer b{color:var(--room-muted);border-color:var(--room-line)}
@keyframes result-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes winner-settle{0%{filter:brightness(1)}45%{filter:brightness(1.2)}100%{filter:brightness(1)}}
@keyframes connect-line{to{stroke-dashoffset:0}}
@media(max-width:1150px){.top-actions{gap:7px}.appearance-panel{right:-30px}.board{padding:15px;gap:8px}.result-ribbon{padding:14px}.result-title{font-size:15px}.result-net{font-size:20px}.result-medal{width:32px;height:32px;font-size:19px}.receipt-number strong{font-size:30px}}
@media(max-width:700px){.sidebar{background:var(--room-panel);box-shadow:0 -4px 15px var(--room-shadow)}.sidebar .nav.active{box-shadow:none;border:0;background:transparent}.appearance-menu>summary{padding:9px 10px;font-size:11px}.appearance-panel{right:-92px;width:292px;max-width:calc(100vw - 28px);padding:22px}.play-card{border-radius:17px}.board{padding:13px;gap:7px;border-radius:15px}.result-ribbon{padding:13px 12px;gap:10px;min-height:68px;margin-top:18px}.result-title{font-size:14px}.result-net{font-size:19px}.result-medal{width:30px;height:30px;font-size:17px}.result-eyebrow{font-size:5px;letter-spacing:1px}.match-receipt{padding:18px}.receipt-number{gap:17px}.receipt-number strong{font-size:30px}.receipt-number span{font-size:9px}.receipt-player{flex-wrap:wrap}.receipt-player small{width:100%;text-align:right}.practice-note{font-size:9px;margin-top:21px}.hint-shadow:before{font-size:15px}.hint-build:before{font-size:25px}.practice-help{padding:12px}.cell.last{outline-offset:2px}.cell.winning{outline-offset:2px}.winning-path path{stroke-width:2}.welcome-hero{background-image:linear-gradient(90deg,#101726ee,#1017268f),var(--scene)}}
@media(prefers-reduced-motion:reduce){.result-ribbon,.match-receipt,.winning-path path{animation:none!important;stroke-dashoffset:0!important;opacity:1!important;transform:none!important}}
.motion-off .winning-path path{stroke-dashoffset:0!important}.motion-off .result-ribbon,.motion-off .match-receipt{opacity:1!important}

.hints-unavailable #arena #practice-help{display:none}

.lesson-panel,.try-panel{--p1-h:263;--p1-s:51%;--p2-h:39;--p2-s:72%}.prize strong{color:var(--room-accent)}.prize span,.prize small,.local-balances,.breakdown,.breakdown .total{color:var(--room-muted)}

.unassisted-game #arena .hero :is(p,.hero-tags){display:none}