/* 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)}
.level-stat-button{appearance:none;border:0;border-radius:0;background:transparent;color:inherit;cursor:pointer;touch-action:manipulation;min-height:44px}
.level-stat-button:hover:not(:disabled),.level-stat-button:active:not(:disabled){background:#d7b26816}
.level-stat-button:focus-visible{outline-offset:-3px}
.level-stat-button:disabled{cursor:default}
.premium-stage{min-height:0;display:block;overflow:visible;border:0;border-radius:0;padding:4px 0 8px;background:radial-gradient(ellipse at 15% 35%,#14283b,transparent 65%),radial-gradient(ellipse at 90% 70%,#241c38,transparent 65%),#080d17;box-shadow:none}
.premium-stage:before,.premium-stage:after,.premium-stage .stage-glow{display:none}
.board-wrap{display:block;width:100%;height:max(360px,calc(100svh - 180px - var(--candy-anchor-reserve,0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)));margin:0;aspect-ratio:auto;padding:0;border:0;background:transparent;box-shadow:none}
.board{position:relative;isolation:isolate;width:100%;height:100%;margin:0;inset:auto;transform:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.board.is-locked{pointer-events:none}
.tile{position:absolute;width:var(--tile-width);aspect-ratio:.92;padding:0;border:0;border-radius:10px;background:transparent;filter:none;transition:transform .16s ease;z-index:calc(var(--z) * 100 + var(--order));user-select:none;-webkit-touch-callout:none;cursor:pointer}
.tile-shell{position:absolute;inset:0;display:grid;place-items:center;border:1px solid #e6d8c1;border-radius:10px;background:#fffaf0;box-shadow:0 2px 4px #0008,calc(var(--z) * -2px) calc(var(--z) * 2px) 0 #b9aa8f;overflow:hidden}
.tile-art{position:absolute;inset:3px;border-radius:7px;background-repeat:no-repeat;background-color:#f6f0e4;filter:none;pointer-events:none}
.tile:not(.is-free) .tile-shell{background:#a5a198;border-color:#928b7d}
.tile:not(.is-free) .tile-art{opacity:.48}
@media(hover:hover){.tile.is-free:hover .tile-shell{border-color:#dfb85e}}
.tile.is-selected{transform:translateY(-2px)}
.tile.is-selected .tile-shell{border-color:#ef7194;box-shadow:inset 0 0 0 2px #ef7194,0 2px 4px #0008,calc(var(--z) * -2px) calc(var(--z) * 2px) 0 #b9aa8f}
.tile.is-hint .tile-shell{outline:2px solid #f7d36e;outline-offset:-3px}
.tile.is-wrong .tile-shell{border-color:#f04d65}
.tile:focus-visible{outline:2px solid #fff1b8;outline-offset:2px}
.tile:disabled{cursor:default}
.result-emblem{font-size:58px;color:#ffcd71}
@media(max-width:430px){.tile-shell{border-radius:8px}
.tile-art{inset:2px;border-radius:5px}}
@media(min-width:700px) and (orientation:portrait){.board-wrap{height:max(540px,calc(100svh - 180px - var(--candy-anchor-reserve,0px) - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}}
@media(orientation:landscape) and (max-height:700px){.board-wrap{height:max(320px,calc(100svh - 170px - var(--candy-anchor-reserve,0px)))}}
.preview-capture .premium-stage{min-height:0}
.preview-capture .board-wrap{height:calc(100svh - 130px)}
body.has-game-anchor{--candy-anchor-reserve:62px}
.tile-confetti{position:absolute;z-index:9999;pointer-events:none;user-select:none;transform-origin:center}
.tile-confetti:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#fff9 0%,transparent 34%,#0003 75%,#fff9 100%);pointer-events:none}
.metal-star-glint{position:absolute;inset:-10% -25%;pointer-events:none;background:linear-gradient(105deg,transparent 27%,#fff4 39%,#ffffed 48%,#fff8 53%,transparent 66%);mix-blend-mode:screen}
