/* 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,.mini-piece,.result-piece{position:absolute;border:0;border-radius:50%;background:center/contain no-repeat url('assets/halma-blue.webp');box-shadow: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-rival .piece,.rival-piece,.rival-result{background-image:url('assets/halma-red.webp')}
.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:none!important}
.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)}
html:not(.preview-capture) .premium-stage{justify-content:flex-start;padding-top:30px}