*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Arial,Helvetica,sans-serif;background:#21170e;color:white;touch-action:manipulation}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:3px solid #ffd955;outline-offset:4px}#game{height:100dvh;width:100%;display:grid;place-items:center;background:radial-gradient(ellipse,#63432a,#21170e)}#stage{position:relative;height:min(100dvh,177.683vw);width:min(100vw,56.28dvh);isolation:isolate}#board{position:absolute;inset:0;transform:rotate(0deg);transition:transform 1s cubic-bezier(.5,0,.2,1)}#board.blue-view{transform:rotate(180deg)}#art{width:100%;height:100%;display:block;user-select:none}header{position:fixed;top:max(9px,env(safe-area-inset-top));left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;z-index:10}header>*{pointer-events:auto}#close,#turn-badge,#version{background:#111b18dc;border:1px solid #ffffff35;border-radius:30px;color:white;box-shadow:0 2px 12px #0003}#close{padding:7px 12px;font-size:14px}#close span{font-size:22px;line-height:16px;vertical-align:-1px;margin-right:3px}#turn-badge{padding:9px 13px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:7px}#turn-dot{width:10px;height:10px;border-radius:50%;background:#3de481;box-shadow:0 0 10px #3de48155}#version{font-size:12px;padding:7px 9px}#message{position:fixed;bottom:max(9px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);margin:0;padding:9px 15px;max-width:94vw;width:max-content;border-radius:16px;background:#111b18e8;border:1px solid #ffffff29;font-size:14px;text-align:center;z-index:10;box-shadow:0 3px 20px #0004}#roll-panel{position:absolute;left:79%;top:63.5%;width:11%;aspect-ratio:1;padding:9%;padding:clamp(5px,1vw,9px);border-radius:17%;background:rgba(255,255,255,.2);border:1px solid #ffffff55;box-shadow:0 4px 16px #0002;z-index:5;width:13.5%}#die{position:relative;width:100%;aspect-ratio:1;display:grid;place-items:center;border:1px solid #fff;border-radius:20%;background:linear-gradient(135deg,#fff 35%,#e5e8e7);box-shadow:0 4px 0 #b7bdbb,0 7px 9px #0005,inset 0 1px 2px white;color:#087041;font-weight:800;font-size:clamp(12px,2.8vw,22px);padding:0}#die:disabled{cursor:default}#die-face{width:100%;height:100%;display:grid;place-items:center}.pip{position:absolute;width:17%;height:17%;background:#15362c;border-radius:50%;box-shadow:inset 0 1px 1px #0008}.pip.a{left:22%;top:22%}.pip.b{left:41.5%;top:41.5%}.pip.c{right:22%;bottom:22%}.rolling{animation:rattle .13s infinite}.flash{animation:flash .22s 5}.chip{position:absolute;width:9.8%;aspect-ratio:1;transform:translate(-50%,-50%) scaleY(.83);border-radius:50%;border:1px solid #ffffff60;background:repeating-conic-gradient(from 5deg,var(--rim) 0deg 32deg,#e8ece8 32deg 45deg);box-shadow:0 5px 0 var(--edge),0 7px 0 #0009,0 10px 10px #0006,inset 0 1px 2px #ffffffcc,inset 0 -2px 4px #0007;padding:12%;padding:0;transition:left .6s ease,top .6s ease;z-index:3;touch-action:manipulation}.chip.green{--rim:#078548;--edge:#064e2d}.chip.blue{--rim:#285bd6;--edge:#102d79}.chip::after{content:'';position:absolute;inset:6%;border:1px solid #ffffff5a;border-radius:50%;pointer-events:none}.chip-face{position:absolute;inset:17%;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 25%,#fff,#f0efe9);border:1px solid #0003;box-shadow:0 1px 3px #0005,inset 0 1px 3px white}.chip canvas{height:80%;width:80%;object-fit:contain}.chip.blue canvas{transform:rotate(180deg)}.chip.selectable{filter:drop-shadow(0 0 5px #ffdf62)}.chip:disabled{cursor:default}.target{position:absolute;width:9.8%;height:3.9%;transform:translate(-50%,-50%);border:2px solid #ffe77e;background:#fff28660;border-radius:12%;z-index:2;box-shadow:0 0 0 2px #181b0c8a,0 0 13px #ffeb74;animation:target 1.2s ease-in-out infinite;padding:0}.target::after{content:'•';color:#fff6b8;text-shadow:0 1px 3px #333;font-size:22px;line-height:1}.target:focus-visible{outline:3px solid white}dialog{border:1px solid #ffffff33;border-radius:24px;background:#132a23;color:white;padding:0;max-width:360px;width:calc(100% - 40px);box-shadow:0 24px 80px #0009}dialog::backdrop{background:#060c0bd1;backdrop-filter:blur(5px)}.dialog-inner{padding:28px}.eyebrow{font-size:12px;letter-spacing:2px;color:#8fac9f}h1{font-size:27px;margin:16px 0 10px}.dialog-inner p:not(.eyebrow){font-size:16px;line-height:1.5;color:#cbd8d1}.primary,.secondary{width:100%;border:1px solid #ffffff30;border-radius:12px;padding:13px;margin-top:10px;font-weight:700;font-size:16px}.primary{background:#e4ffe9;color:#103423}.secondary{background:transparent;color:white}@keyframes rattle{0%{transform:rotate(-12deg) translateY(-2px)}50%{transform:rotate(14deg) translateY(1px)}100%{transform:rotate(-12deg) translateY(-2px)}}@keyframes flash{50%{box-shadow:0 0 0 6px #ffffffa6,0 0 28px #fff;filter:brightness(1.2)}}@keyframes target{50%{background:#fff28699;box-shadow:0 0 0 2px #181b0c8a,0 0 19px #fff08c}}@media(prefers-reduced-motion:reduce){#board,.chip{transition:none}.rolling,.flash,.target{animation:none}}

/* Alpha 0.2: artwork projection, exact cell borders and independent chip overlays. */
#stage{overflow:hidden;background:#a86c36}
#board{transform-origin:0 0;transition:transform 1s cubic-bezier(.5,0,.2,1);will-change:transform}
#pieces{position:absolute;inset:0;pointer-events:none;z-index:3}
.chip{width:8.82%;pointer-events:auto;transition:left .65s ease,top .65s ease}
#targets{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:2}
.move-outline{fill:transparent;stroke:#fff;stroke-width:4;stroke-linejoin:miter;pointer-events:all;cursor:pointer;filter:drop-shadow(0 0 3px #ffffffcc) drop-shadow(0 0 6px #ffffff80)}
.move-outline:focus-visible{outline:none;stroke-width:6;filter:drop-shadow(0 0 8px #fff)}
.chip.battle-target{filter:brightness(1.4) drop-shadow(0 0 6px #fff) drop-shadow(0 0 12px #fff);outline:2px solid #fff;outline-offset:1px;z-index:5}
.chip.battle-target .chip-face{box-shadow:inset 0 0 12px #fff,0 0 5px #fff}
#roll-panel{transition:left 1s cubic-bezier(.5,0,.2,1)}
.blue-turn #roll-panel{left:7.5%}
.blue-turn #die{color:#214dc5}
.blue-turn .pip{background:#214dc5}
.blue-turn .chip.blue canvas{transform:none}
.blue-turn .chip.green canvas{transform:rotate(180deg)}
@media(prefers-reduced-motion:reduce){#board,.chip,#roll-panel{transition:none}}
/* Alpha 0.3 — gold movement choices and two-player battles. */
[hidden]{display:none!important}
.move-outline{fill:rgba(255,192,48,.32);stroke:none;filter:drop-shadow(0 0 5px #ffc03066)}
.move-outline:focus-visible{stroke:#ffd56c;stroke-width:3;filter:drop-shadow(0 0 7px #ffc03099)}
.chip.battle-target{filter:drop-shadow(0 0 7.5px #ffc03099);outline:none}
.chip.battle-target::before{content:'';position:absolute;inset:0;border-radius:50%;background:rgba(255,192,48,.48);z-index:6;pointer-events:none}
.chip.battle-target .chip-face{box-shadow:0 1px 3px #0005,inset 0 1px 3px white}
.chip-face{transform-style:preserve-3d;transition:transform .7s ease}
.chip canvas{backface-visibility:hidden}
.defeat-mark{position:absolute;inset:0;display:grid;place-items:center;color:#e32627;font-size:clamp(20px,5vw,46px);font-weight:900;line-height:1;backface-visibility:hidden;transform:rotateY(180deg);background:#fff;border-radius:50%}
.chip.defeated .chip-face{transform:rotateY(180deg)}
.chip.defeated canvas{visibility:hidden}
#battle-screen{position:fixed;inset:0;z-index:7;display:grid;place-items:center;background:#07100dd9;backdrop-filter:blur(5px);padding:65px 16px 55px}
#battle-intro{color:#ffdd83;text-align:center;font-size:clamp(28px,7vw,56px);max-width:650px;line-height:1.15;text-shadow:0 4px 30px #000}
.announce{animation:battleIntro 1.9s both}
#battle-panel{position:relative;width:min(100%,500px);max-height:100%;overflow:auto;text-align:center;border:1px solid #e8c17155;border-radius:26px;padding:24px;background:linear-gradient(145deg,#20352ef5,#101c22f5);box-shadow:0 20px 70px #0008}
.battle-kicker{margin:0 0 9px;color:#f7d791;font-weight:700;font-size:16px}
#battle-heading{font-size:clamp(22px,5vw,30px);margin:0 0 20px}
.battle-scoreboard{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:10px}
.score-team{display:grid;gap:3px;padding:12px 3px;border-radius:15px;background:#ffffff08;border:1px solid #ffffff18}
.score-team>span{font-size:12px;letter-spacing:1.5px;font-weight:800}.score-team>strong{font-size:30px;line-height:1}.score-team>small{font-size:12px;color:#b9c9c3}.green-score{color:#86f5b0}.blue-score{color:#a9c6ff}.round-label{font-size:13px;color:#d1d9d5}.sum-slot{height:43px;font-size:30px;font-weight:800;margin-top:9px;color:white}
#battle-dice{display:flex;justify-content:center;gap:15px;margin:25px 0 18px;min-height:65px}
.battle-die{width:clamp(53px,15vw,76px);aspect-ratio:1;border-radius:15%;padding:13%;padding:9px;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;border:1px solid #ffffff55;background:linear-gradient(135deg,#21a260,#096b39);box-shadow:0 5px 0 #044c2b,0 9px 14px #0005,inset 0 2px 3px #ffffff60}
#battle-dice.blue .battle-die{background:linear-gradient(135deg,#447fe8,#2049b3);box-shadow:0 5px 0 #122d72,0 9px 14px #0005,inset 0 2px 3px #ffffff60}.battle-die i{aspect-ratio:1;border-radius:50%}.battle-die .dot{background:#fff;box-shadow:inset 0 1px 2px #0003}.dice-rolling .battle-die{animation:diceTumble .18s infinite alternate}.dice-rolling .battle-die:nth-child(2){animation-delay:-.06s}.dice-rolling .battle-die:nth-child(3){animation-delay:-.12s}.unrolled{opacity:.5}
#battle-note{min-height:44px;line-height:1.4;color:#e0e9e3;font-size:15px;margin:10px 0 16px}
#battle-roll{width:100%;min-height:66px;border-radius:15px;font-size:24px;font-weight:800;color:white;border:1px solid #ffffff44;box-shadow:inset 0 1px 2px #ffffff50,0 4px 0 #0005;background:linear-gradient(135deg,#1d9957,#08723e)}
#battle-roll.blue{background:linear-gradient(135deg,#3c77ed,#234cbb)}#battle-roll:disabled{opacity:.4;cursor:default}
#battle-pop{position:fixed;left:50%;top:50%;z-index:12;transform:translate(-50%,-50%);font-size:110px;font-weight:900;line-height:1;text-shadow:0 5px 25px #000,0 0 55px currentColor;pointer-events:none;color:#9affbf}
#battle-pop.blue{color:#a8c9ff}.total-pop{animation:totalExpand .65s both}#battle-pop.docking{animation:none;transition:left .65s ease,top .65s ease,transform .65s ease;transform:translate(-50%,-50%) scale(.273)}
.paused *{animation-play-state:paused!important}
@keyframes battleIntro{0%{opacity:0;transform:scale(.75)}20%,65%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.08)}}
@keyframes totalExpand{0%{opacity:0;transform:translate(-50%,-50%) scale(.35)}65%{opacity:1;transform:translate(-50%,-50%) scale(1.2)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes diceTumble{from{transform:rotate(-12deg) translateY(-5px)}to{transform:rotate(14deg) translateY(3px)}}
@media(max-height:650px){#battle-panel{padding:15px}#battle-heading{margin-bottom:12px}#battle-dice{margin:16px 0 10px}.score-team{padding:8px 3px}#battle-roll{min-height:53px}#battle-note{margin:6px 0 10px}}
@media(prefers-reduced-motion:reduce){.announce,.dice-rolling .battle-die,.total-pop{animation:none}#battle-pop.docking,.chip-face{transition:none}}
/* Alpha 0.4: both movement controls stay right; Unstuck is a left-side action. */
.blue-turn #roll-panel{left:79%}
#unstuck-panel{position:absolute;left:7.5%;top:63.5%;width:16%;z-index:5;border:1px solid #ffffff55;border-radius:12%;padding:4px;background:#ffffff33;box-shadow:0 4px 16px #0002}
#unstuck-button{border:0;border-radius:9px;width:100%;padding:5px 2px;background:#f9fffae8;color:#076535;box-shadow:0 3px 0 #b7bdbb;font-size:clamp(11px,2.9vw,19px)}
#unstuck-button:disabled{opacity:.55;cursor:default}
.mini-dice{display:flex;justify-content:center;gap:1px;font-size:clamp(15px,4vw,27px);line-height:1.1}.mini-dice i{font-style:normal;color:#08703d}.blue-turn .mini-dice i,.blue-turn #unstuck-button{color:#234ebf}
.chip.recoverable{filter:drop-shadow(0 0 7px #ffda65) drop-shadow(0 0 14px #ffd04ac9);outline:2px solid #ffe29a;outline-offset:2px;animation:recoverGlow 1s ease-in-out infinite}
#recovery-screen{position:fixed;inset:0;z-index:7;display:grid;place-items:center;padding:65px 18px 55px;background:#07100dbb;backdrop-filter:blur(4px)}
#recovery-panel{width:min(92vw,420px);text-align:center;background:linear-gradient(145deg,#20372ef5,#101c22f5);padding:26px 20px;border:1px solid #d9b36a77;border-radius:25px;box-shadow:0 20px 65px #0008}
#recovery-panel h2{font-size:30px;margin:0 0 12px}#recovery-note{font-size:16px;min-height:44px;line-height:1.4;color:#e7ece7}
#recovery-dice{display:flex;justify-content:center;gap:15px;margin:24px 0 10px}#recovery-dice.blue .battle-die{background:linear-gradient(135deg,#447fe8,#2049b3);box-shadow:0 5px 0 #122d72,0 9px 14px #0005,inset 0 2px 3px #ffffff60}
#recovery-result{position:relative;height:140px;display:grid;place-items:center}#recovery-total{font-size:100px;line-height:1;font-weight:900;display:block;text-shadow:0 5px 20px #0008}
#recovery-total.success{color:#ffe186;animation:recoverPop .5s both}#recovery-total.failure{color:#ff525b;animation:recoverPop .5s both}
#recovery-stars{position:absolute;inset:0;pointer-events:none}#recovery-stars span{position:absolute;left:50%;top:50%;font-size:24px;color:#ffe28a;text-shadow:0 0 10px #ffc949;animation:starBurst 1.3s var(--star-delay) both}
@keyframes recoverPop{0%{opacity:0;transform:scale(.3)}65%{opacity:1;transform:scale(1.16)}100%{opacity:1;transform:scale(1)}}
@keyframes starBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}15%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--star-x)),calc(-50% + var(--star-y))) scale(1.2) rotate(100deg)}}
@keyframes recoverGlow{50%{filter:drop-shadow(0 0 10px #ffda65) drop-shadow(0 0 18px #ffd04a)}}
@media(prefers-reduced-motion:reduce){.chip.recoverable,#recovery-stars span,#recovery-total.success,#recovery-total.failure{animation:none}#recovery-stars span{display:none}}

.mini-dice i{background:#08703d;color:#fff;border-radius:3px;padding:0 1px}.blue-turn .mini-dice i{background:#234ebf;color:#fff}
/* Alpha 0.5: option 1, thinner rims, larger silhouettes, final sixes. */
.move-outline{fill:rgba(255,192,48,.42);stroke:#ffe46c;stroke-width:4;filter:drop-shadow(0 0 1px #382508) drop-shadow(0 0 5px #ffd347cc)}
.move-outline:focus-visible{stroke:#fff3bb;stroke-width:6}
.chip-face{inset:10%}.chip canvas{width:94%;height:94%}.chip::after{inset:3%}
#end-control{position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);width:52%;padding:14px;text-align:center;border-radius:18px;background:#132a23ee;border:1px solid #ffdc8577;z-index:6;box-shadow:0 10px 28px #0006}
#end-count{margin:0 0 9px;font-size:14px;color:#fff1c5}#end-control small{display:block;margin-top:9px;font-size:12px;color:#f1e3bd}
#end-roll{width:100%;min-height:66px;font-size:28px;font-weight:900;border-radius:12px;border:1px solid #ffffff77;background:linear-gradient(#20a962,#08733e);color:white;box-shadow:0 4px 0 #044c2b}#end-control.blue #end-roll{background:linear-gradient(#447fe8,#2049b3);box-shadow:0 4px 0 #122d72}#end-roll:disabled{opacity:.65}
#end-screen{position:fixed;inset:0;z-index:7;display:grid;place-items:center;padding:24px;background:#07100dbb;backdrop-filter:blur(4px)}.end-panel{width:min(92vw,440px);padding:30px 20px;background:#152d25f5;border:1px solid #e6c87588;border-radius:24px;text-align:center}.end-panel h2{font-size:24px;margin:0 0 24px}#end-note{font-size:17px;line-height:1.5;min-height:50px;margin-top:24px}
#end-dice{display:flex;gap:18px;justify-content:center}#end-dice.blue .battle-die{background:linear-gradient(135deg,#447fe8,#2049b3);box-shadow:0 5px 0 #122d72,0 9px 14px #0005}#end-dice .battle-die{position:relative}.six-hit{outline:3px solid #ffe784;filter:drop-shadow(0 0 9px #ffdb61)}.six-stars{position:absolute;inset:0;pointer-events:none}.six-stars span,.firework span{position:absolute;left:50%;top:50%;color:#ffe583;font-size:23px;animation:starBurst 1.3s var(--star-delay) both;text-shadow:0 0 7px currentColor}
#win-screen{position:fixed;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#06170cf0;padding:20px}#win-screen.blue{background:#07152bf0}#win-title{position:relative;z-index:2;font-size:clamp(56px,14vw,130px);line-height:1.05;text-align:center;color:#a2ffbd;text-shadow:0 0 35px #15d96c99;animation:winPop .85s both;margin:0 0 35px}#win-screen.blue #win-title{color:#aed2ff;text-shadow:0 0 35px #459aff99}#play-again{position:relative;z-index:2;border:1px solid #ffdd85;border-radius:14px;background:#fff0c5;color:#1b291e;padding:15px 35px;font-size:19px;font-weight:800}#fireworks{position:absolute;inset:0;pointer-events:none}.firework{position:absolute;width:1px;height:1px}.firework span{animation-delay:calc(var(--burst-delay) + var(--star-delay));animation-duration:1.8s;animation-iteration-count:3}.firework:nth-child(3n) span{color:#80caff}.firework:nth-child(3n + 1) span{color:#95ffb5}
@keyframes winPop{0%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){#win-title,.six-stars span,.firework span{animation:none}.six-stars span,.firework span{display:none}}