/* Game surface and game-specific controls only. */
.guided-demo-focus{position:relative;z-index:2;outline:3px solid #f0d98e!important;outline-offset:4px;filter:drop-shadow(0 0 10px #d9bc78aa);animation:guided-demo-pulse .9s ease-in-out infinite alternate}
@keyframes guided-demo-pulse{from{outline-offset:2px;filter:drop-shadow(0 0 4px #d9bc7866)}to{outline-offset:7px;filter:drop-shadow(0 0 14px #f0d98ecc)}}
.guided-demo-running main>:not(.demo-bar){animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.guided-demo-focus{animation:none!important}}
[role=button]{-webkit-tap-highlight-color:transparent}
.spot:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}
.turn-stat{display:flex!important;min-height:22px;align-items:center;justify-content:center;gap:6px}
.turn-stat b{font:800 10px Arial,sans-serif;letter-spacing:.08em}
.premium-stage{position:relative;display:flex;min-height:clamp(420px,67svh,680px);flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,#1c2842b8 0,#0d1423aa 38%,#05080e05 74%)}
.stage-glow{position:absolute;width:55%;aspect-ratio:1;border-radius:50%;filter:blur(56px);opacity:.2;pointer-events:none}
.glow-left{left:-28%;top:12%;background:#1886bc}
.board-wrap{position:relative;width:min(94vw,calc(100svh - 224px),620px);aspect-ratio:1;padding:0;border:0;background:transparent;box-shadow:none}
.board-wrap:before{display:none}
.board{position:relative;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.board-art{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.board-lines line{stroke:url(#lineGold);stroke-width:2.4;stroke-linecap:round;opacity:.58}
.camp-shape{opacity:.065}
.camp-human-shape{fill:#24aee8}
.camp-rival-shape{fill:#ff416a}
.spot{position:absolute;z-index:2;width:calc(100% / var(--board-size) * .9);aspect-ratio:1;transform:translate(-50%,-50%);border:0;border-radius:50%;padding:0;background:transparent;line-height:0;touch-action:none}
.hole{position:absolute;z-index:1;left:32%;top:32%;width:36%;aspect-ratio:1;border:1px solid #8c99ab99;border-radius:50%;background:radial-gradient(circle at 45% 38%,#26334b,#05070b 72%);box-shadow:inset 0 2px 4px #000,0 0 0 1px #020307,0 1px #c9dcff22;pointer-events:none}
.piece:before,.mini-piece:before,.result-piece:before{display:none}
.piece{z-index:5;left:50%;top:50%;width:84%;aspect-ratio:1;opacity:0;transform:translate(-50%,-50%) scale(.38);transition:transform .28s cubic-bezier(.22,1.2,.36,1),opacity .16s,filter .2s;pointer-events:none}
.has-piece .piece{opacity:1;transform:translate(-50%,-50%) scale(1)}
.is-selected{z-index:8}
.is-selected .piece{filter:brightness(1.16) drop-shadow(0 0 8px #96e9ff);transform:translate(-50%,-50%) scale(.9)}
.is-selectable .piece{filter:drop-shadow(0 0 5px #78ddff55)}
.is-target:after{content:"";position:absolute;z-index:3;inset:10%;border:2px solid #bcdcff;border-radius:50%;box-shadow:0 0 12px #89cfff99,inset 0 0 9px #89cfff33;animation:target-pulse 1.1s ease-in-out infinite;pointer-events:none}
.is-jump-target:after{border-style:dashed}
.is-last .hole{box-shadow:inset 0 2px 4px #000,0 0 0 2px #d8ecff,0 0 12px #85cfff}
.moving-piece{position:absolute;z-index:12;inset:auto;opacity:1;pointer-events:none;transform:none!important;transition:none!important}
.mini-piece{position:relative;width:17px;height:17px;flex:0 0 auto}
.thinking{display:flex;min-height:18px;align-items:center;gap:5px;color:#a89c86;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.thinking i{width:5px;height:5px;border-radius:50%;background:#88cfff;animation:thinking 1s infinite}
.thinking i:nth-child(2){animation-delay:.14s}
.thinking i:nth-child(3){animation-delay:.28s}
.thinking b{margin-left:4px}
.control-list>div{display:grid;grid-template-columns:36px 1fr;align-items:start;gap:10px;border-top:1px solid #3b321f}
.control-list b{display:grid;width:32px;height:32px;margin-top:9px;place-items:center;border:1px solid #705b30;border-radius:50%;color:var(--gold-light)}
.control-list p{margin:10px 0}
.result-piece{position:relative;width:80px;height:80px;margin:10px auto 18px}
.final-score{color:var(--gold-light)!important;font-weight:800}
@keyframes target-pulse{50%{opacity:.48;transform:scale(.82)}}
@keyframes thinking{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}
@media(max-width:380px){.board-wrap{width:min(96vw,calc(100svh - 232px));padding:12px}
.premium-stage{min-height:400px}}
@media(min-width:700px) and (orientation:portrait){.premium-stage{min-height:690px}
.board-wrap{width:min(82vw,650px,calc(100svh - 280px))}
.mini-piece{width:21px;height:21px}}
@media(min-width:900px) and (orientation:landscape){.premium-stage{min-height:560px}
.board-wrap{width:min(55vw,550px,calc(100svh - 218px))}}
@media(orientation:landscape) and (max-height:700px){.premium-stage{min-height:400px}
.board-wrap{width:min(62vh,430px)}}
.preview-capture .camp-shape{display:none}
.preview-capture .premium-stage{min-height:0;padding-top:10px;background:transparent}
.preview-capture .board-wrap{width:min(100%,620px)}
.premium-stage{min-height:clamp(440px,70svh,690px);justify-content:flex-start;padding:5px 0 12px;background:radial-gradient(ellipse at 50% 40%,#40225c99,#11182aaa 48%,#05080e08 78%)}
.glow-left{left:-20%;top:10%;background:#a950ff}
.board-wrap{position:relative;width:min(92vw,540px);aspect-ratio:5/6;padding:0;border:0;background:transparent;box-shadow:none}
.number-board{display:grid;width:100%;height:100%;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(6,1fr);gap:5px;border:1px solid #765f31;border-radius:25px;padding:12px;background:#0b0d14;box-shadow:inset 0 1px #fff2,0 22px 60px #000c;touch-action:manipulation;isolation:isolate}
.number-space,.number-tile{position:relative;min-width:0;min-height:0;border-radius:16px}
.number-space{border:0;background:transparent;box-shadow:none}
.number-tile{display:grid;place-items:center;border:2px solid #ffffff7a;padding:0;background:var(--tile);box-shadow:inset 0 7px #ffffff43,inset 0 -7px #0002,0 5px 9px #0008;color:var(--text,#071318);font-size:clamp(1.35rem,7vw,2.35rem);font-weight:950;cursor:pointer;text-shadow:0 1px #fff4;transition:filter .12s,transform .12s}
.number-tile:hover{filter:brightness(1.1);transform:translateY(-1px)}
.number-tile:active{transform:scale(.93)}
.number-tile:focus-visible{z-index:4;outline:3px solid #fff;outline-offset:2px}
.number-tile:disabled{cursor:default;opacity:1}
.value-1{--tile:linear-gradient(145deg,#ffe56c,#e8a812)}
.value-2{--tile:linear-gradient(145deg,#65e5a7,#26b978)}
.value-3{--tile:linear-gradient(145deg,#5bcdf7,#2b88dc)}
.value-4{--tile:linear-gradient(145deg,#8d9cff,#6260dd)}
.value-5{--tile:linear-gradient(145deg,#c875f2,#9942d2);--text:#fff}
.value-6{--tile:linear-gradient(145deg,#ff73b2,#dc397f);--text:#fff}
.value-7{--tile:linear-gradient(145deg,#f8fbff,#98a7bb);--text:#101827}
.value-8{--tile:linear-gradient(145deg,#ff9472,#dc513c);--text:#fff}
.value-9{--tile:linear-gradient(145deg,#57ded7,#199fa7)}
.number-tile.is-raised{animation:raise .16s ease-out}
.number-tile.is-bursting{z-index:5;animation:burst .28s ease-in forwards}
.number-tile.is-falling{z-index:7;animation:fall .68s cubic-bezier(.22,.72,.24,1);will-change:transform,opacity,filter}
.mini-diamond,.diamond-fly span{display:inline-block;width:18px;height:18px;background:url('assets/diamond.png?v=20261005-mobile-images-1') center/contain no-repeat;filter:drop-shadow(0 0 5px #6be8ff99)}
.combo-label,.bonus-label{position:absolute;z-index:10;top:43%;left:50%;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.65) rotate(-7deg);background:linear-gradient(90deg,#ff476f,#ffcd38,#48e4aa,#4bbcff,#c864ff);background-clip:text;-webkit-background-clip:text;color:transparent;font:900 clamp(2.4rem,12vw,4.8rem)/1 Arial,sans-serif;filter:drop-shadow(0 4px 0 #fff) drop-shadow(0 8px 13px #000b);white-space:nowrap}
.combo-label.show,.bonus-label.show{animation:combo 1s ease-out}
.diamond-fly{position:absolute;z-index:12;top:0;left:0;width:clamp(75px,17.6vw,92px);aspect-ratio:1;opacity:0;pointer-events:none;will-change:transform,opacity}
.diamond-fly span{width:100%;height:100%;filter:drop-shadow(0 0 9px #6be8ffcc) drop-shadow(0 0 18px #fff8)}
.diamond-fly.show{animation:diamond 1.2s cubic-bezier(.2,.72,.25,1)}
.result-emblem{font-size:58px;color:#9df3ff;filter:drop-shadow(0 0 18px #42d9ff88)}
@keyframes raise{50%{filter:brightness(1.35);transform:scale(1.12)}}
@keyframes burst{45%{filter:brightness(1.65);transform:scale(1.2)}to{opacity:0;transform:scale(.2) rotate(18deg)}}
@keyframes fall{0%{z-index:7;opacity:.45;filter:brightness(1.12);transform:translateY(-190%) scaleX(.88) scaleY(1.12)}55%{opacity:1;transform:translateY(10%) scaleX(1.08) scaleY(.9)}70%{transform:translateY(-7%) scaleX(.96) scaleY(1.06)}83%{transform:translateY(4%) scaleX(1.03) scaleY(.97)}92%{transform:translateY(-2%) scaleX(.99) scaleY(1.02)}100%{z-index:7;opacity:1;filter:none;transform:translateY(0) scale(1)}}
@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-7deg)}25%,65%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-7deg)}to{opacity:0;transform:translate(-50%,-70%) scale(1.12)}}
@keyframes diamond{0%{opacity:0;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(.35)}12%{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(1.05)}36%{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(1.35)}52%{opacity:1;transform:translate(calc(var(--diamond-start-x) - 50%),calc(var(--diamond-start-y) - 50%)) scale(.72)}88%{opacity:1;transform:translate(calc(var(--diamond-end-x) - 50%),calc(var(--diamond-end-y) - 50%)) scale(.3)}100%{opacity:0;transform:translate(calc(var(--diamond-end-x) - 50%),calc(var(--diamond-end-y) - 50%)) scale(.14)}}
@media(max-width:380px){.number-board{gap:5px;padding:8px;border-radius:19px}
.number-tile{border-radius:12px}
.board-wrap{width:min(94vw,440px)}}
.preview-capture .premium-stage{min-height:670px}
.number-space,.number-tile{border-radius:8px}
.number-space{border:0;background:transparent;box-shadow:none}
.number-tile{isolation:auto;overflow:hidden;border:1px solid #e1bd69;border-radius:8px;background:var(--tile);box-shadow:inset 1px 1px #fff8,inset -1px -1px #0008,inset 0 10px 18px #ffffff18,0 6px 12px #000a,0 0 10px var(--glow);color:#fff;font-family:"Arial Narrow",Arial,sans-serif;font-weight:900;letter-spacing:-.05em;text-shadow:0 1px 2px #000b}
.number-tile:before{display:none}
.number-tile:after{content:"";position:absolute;top:8%;left:7%;width:74%;height:16%;border-radius:3px;background:linear-gradient(100deg,#fff8,transparent 76%);pointer-events:none}
.value-1{--tile:linear-gradient(145deg,#68e2bdcc 0,#159570d9 48%,#07382fe8 100%);--glow:#32e6b0}
.value-2{--tile:linear-gradient(145deg,#6cc7f1cc 0,#287fc2dc 48%,#102e64eb 100%);--glow:#39b9ff}
.value-3{--tile:linear-gradient(145deg,#aaa0f3cc 0,#6c58d3dc 48%,#302278eb 100%);--glow:#9d83ff}
.value-4{--tile:linear-gradient(145deg,#d88eeccc 0,#a43acbdc 48%,#5b176feb 100%);--glow:#ce65ff}
.value-5{--tile:linear-gradient(145deg,#f28cbdcc 0,#cf397ddd 48%,#72183feb 100%);--glow:#ff67ae}
.value-6{--tile:linear-gradient(145deg,#f39a83cc 0,#d5533cdd 48%,#792319eb 100%);--glow:#ff7b60}
.value-7{--tile:linear-gradient(145deg,#f4f7f9e8 0,#c8d0d8e8 24%,#929eaae8 50%,#5d6976f0 74%,#29333ff5 100%);--glow:#dce8f2;color:#f5cb59;text-shadow:0 1px 0 #fff7,0 2px 3px #000d,0 0 7px #d6a82d88}
.value-8{--tile:linear-gradient(145deg,#b4dc76cc 0,#70ae32dd 48%,#345c13eb 100%);--glow:#a7e54c}
.value-9{--tile:linear-gradient(145deg,#72dbdbcc 0,#229f9fdd 48%,#0b5a5beb 100%);--glow:#42ebec}
@media(max-width:380px){.number-space,.number-tile{border-radius:7px}}