/* 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}
.square:focus-visible{outline:3px solid #fff1b8;outline-offset:2px}
.play-area{position:relative;isolation:isolate;min-height:430px;overflow:hidden;border:1px solid #7b622f;border-radius:25px;padding:18px 8px 14px;background:linear-gradient(180deg,#111827dd,#06090fef),radial-gradient(circle at 50% 20%,#7891bd55,transparent 48%);box-shadow:inset 0 1px #fff3,inset 0 -40px 80px #0008,0 22px 60px #000b}
.play-area:before{content:"";position:absolute;z-index:-1;inset:0;background:repeating-linear-gradient(105deg,transparent 0 84px,#ffffff05 86px 87px,transparent 89px 170px),linear-gradient(90deg,#0007,transparent 13% 87%,#0007)}
.board-scene{display:grid;width:min(100%,600px);margin:0 auto;place-items:center;perspective:900px;padding:3px 5px 18px}
.board-plinth{position:relative;width:min(91vw,550px);max-width:100%;aspect-ratio:1;border:1px solid #d2b05d;border-radius:9%;padding:clamp(12px,3vw,20px);background:linear-gradient(145deg,#76502d,#2e180d 54%,#120a07);box-shadow:0 23px 24px #000b,0 0 35px #d7ae4722,inset 0 0 0 4px #1a0d07,inset 0 0 0 6px #bd9140;transform:rotateX(7deg);transform-origin:center bottom}
.board-plinth:before{content:"";position:absolute;inset:4%;border:1px solid #c9a45555;border-radius:7%;background:radial-gradient(circle at 50% 45%,#38251a,#100b09 72%);box-shadow:inset 0 0 40px #000c}
.board-plinth:after{content:"";position:absolute;z-index:-1;right:3%;bottom:-12px;left:3%;height:16px;border-radius:0 0 20px 20px;background:linear-gradient(#2c160c,#0d0805);box-shadow:0 8px 14px #000}
.board{position:relative;width:100%;height:100%;touch-action:manipulation}
.board-network{position:absolute;z-index:1;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.board-network line{stroke:#d5ab51;stroke-width:.75;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 2px #ffc95c88)}
.square{--step:25.333%;position:absolute;z-index:3;top:calc(12% + var(--board-row) * var(--step));left:calc(12% + var(--board-column) * var(--step));display:grid;width:clamp(38px,12vw,64px);aspect-ratio:1;place-items:center;border:2px solid #d4aa50;border-radius:50%;padding:0;background:radial-gradient(circle at 35% 25%,#77502b 0,#342015 48%,#110b08 78%);box-shadow:inset 0 1px #ffe4a8aa,inset 0 -5px 9px #0009,0 5px 9px #000b,0 0 0 2px #26150b;cursor:pointer;transform:translate(-50%,-50%);transition:filter .18s,transform .18s}
.square:after{content:"";position:absolute;inset:11%;border:1px solid #f4d88744;border-radius:50%;transition:.18s}
.square.is-target:after{inset:2%;border:2px solid #fff0a9;background:#f3bd3038;box-shadow:0 0 15px #ffd86c,inset 0 0 9px #ffe8a0}
.square.is-selected{filter:drop-shadow(0 0 9px #ffe7a0);transform:translate(-50%,-50%) scale(1.08)}
.piece{position:absolute;z-index:4;width:165%;height:205%;left:-32%;bottom:8%;object-fit:contain;filter:drop-shadow(0 8px 5px #000c);pointer-events:none;transform-origin:50% 84%;transition:filter .18s,transform .18s}
.piece.hare{width:180%;height:220%;left:-40%;bottom:2%}
.square.is-selected .piece{filter:drop-shadow(0 0 9px #ffe9a8) drop-shadow(0 8px 5px #000c);transform:translateY(-7%) scale(1.04)}
.square.is-moving{z-index:10}
.square.is-moving .piece{will-change:transform}
.side-key{display:flex;width:min(90%,480px);align-items:center;justify-content:center;gap:10px;margin:0 auto;color:var(--muted)}
.side-key span{display:flex;align-items:center;gap:4px;font-size:9px;letter-spacing:.12em}
.side-key img{width:24px;height:36px;object-fit:contain}
.side-key i{width:28px;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.thinking{display:flex;min-height:26px;align-items:center;justify-content:center;gap:5px;margin-top:4px;color:var(--gold-soft);font-size:11px}
.thinking span{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 1s infinite}
.thinking span:nth-child(2){animation-delay:.16s}
.thinking span:nth-child(3){animation-delay:.32s}
.thinking b{margin-left:5px}
.control-list{display:grid;gap:10px}
.control-list>div{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:10px}
.control-list b{display:grid;width:34px;height:34px;place-items:center;border:1px solid #735f34;border-radius:50%;color:var(--gold-soft)}
.control-list p{margin:0}
.result-piece{width:90px;height:120px;object-fit:contain;margin:4px auto -2px;filter:drop-shadow(0 9px 7px #000)}
@keyframes arrive{0%{opacity:.2;transform:scale(.55) translateY(-28%)}70%{transform:scale(1.08) translateY(-4%)}100%{opacity:1;transform:none}}
@keyframes pulse{50%{opacity:.25;transform:translateY(-2px)}}
@media(max-width:370px){.play-area{min-height:390px;padding-inline:5px}
.board-plinth{width:100%;padding:10px}}
@media(min-width:700px){.play-area{min-height:620px;padding-top:24px}
.board-plinth{width:min(72vw,570px)}}
@media(orientation:landscape) and (max-height:700px){.play-area{min-height:340px;padding-block:5px}
.board-scene{width:min(66vh,520px);padding-bottom:8px}
.side-key{display:none}
.board-plinth{width:min(62vh,480px)}}
.square{--step:12.571%;top:calc(6% + var(--board-row) * var(--step));left:calc(6% + var(--board-column) * var(--step));width:clamp(27px,8vw,46px)}
.piece{width:145%;height:175%;left:-22%;bottom:7%;filter:drop-shadow(0 7px 4px #000c)}
.piece.hare{width:160%;height:190%;left:-30%;bottom:1%}
@media(max-width:370px){.square{width:27px}
.piece{height:168%}
.piece.hare{height:184%}}
@media(min-width:700px){.square{width:46px}}
.board-scene{perspective:none}
.board-plinth{border-radius:22px;background:linear-gradient(145deg,#38271d,#181311 52%,#38271d);box-shadow:0 16px 32px #000b,0 0 28px #d7ae4714,inset 0 0 0 4px #17100c,inset 0 0 0 6px #846735;transform:none;transform-origin:center}
.board-plinth:before{border-color:#806b4640;border-radius:15px;background:radial-gradient(circle at 50% 50%,#211c19,#0e0c0b 76%);box-shadow:inset 0 0 32px #0008}
.board-plinth:after{display:none}
.board-network line{stroke:#8e7954;stroke-width:.55;opacity:.58;filter:none}
.square{border-color:#91794f;background:radial-gradient(circle at 38% 30%,#4a3d32 0,#28211c 55%,#171310 100%);box-shadow:inset 0 1px #d3bc8a38,inset 0 -3px 7px #0008,0 3px 6px #0009,0 0 0 1px #18110d}
.square:after{border-color:#b9a27624}
.square.is-target{border-color:#d7b867;background:radial-gradient(circle at 38% 30%,#665134,#2b231c 70%)}
.square.is-selected{border-color:#e8cd83}
.piece.bubble-token,.piece.hare.bubble-token{left:-13%;bottom:-13%;width:126%;height:126%;object-fit:contain;filter:drop-shadow(0 5px 4px #000c)}
.square.is-selected .piece.bubble-token{filter:drop-shadow(0 0 7px #ffe9a8) drop-shadow(0 5px 4px #000c)}
.key-piece{display:grid;width:30px;height:38px;place-items:center}
.key-token{display:block;width:28px;height:38px;object-fit:contain;filter:drop-shadow(0 4px 3px #000b)}
.play-area{padding:8px 5px 6px}
.board-scene{width:min(100%,760px);padding:0}
.board-plinth{width:min(96vw,720px)}
.board-network line{stroke:#746b5c;opacity:.34}
.square{border-color:#696052;background:radial-gradient(circle at 38% 30%,#37322e 0,#24211f 57%,#151311 100%);box-shadow:inset 0 1px #bcae9630,inset 0 -2px 5px #0007,0 2px 4px #0008,0 0 0 1px #171411}
.square:after{border-color:#b9aa9120}
img.piece.hunters{filter:saturate(1.42) brightness(1.16) contrast(1.08) drop-shadow(0 6px 4px #000d)}
@media(orientation:landscape) and (max-height:700px){.board-scene{width:min(72vh,650px)}
.board-plinth{width:min(68vh,610px)}}
.board-scene{width:min(100%,760px);margin-inline:auto}
.board-plinth{width:100%;max-width:700px;margin-inline:auto}
@media(orientation:landscape) and (max-height:700px){.board-scene{width:min(100%,72vh,650px)}
.board-plinth{width:100%;max-width:610px}}
.piece.portrait-token{left:-30.5%;bottom:-30.5%;width:161%;height:161%;object-fit:contain;filter:drop-shadow(0 5px 4px #000c)}
.square.is-selected .piece.portrait-token{filter:drop-shadow(0 0 7px #ffe9a8) drop-shadow(0 5px 4px #000c)}
.play-area{
  min-height:0;
  overflow:visible;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
}
.play-area:before{display:none}
.board-scene{
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
}
.board-plinth{
  width:100%;
  max-width:none;
  margin:0;
  border:0;
  border-radius:0;
  padding:0;
  background:radial-gradient(circle at 50% 50%,#211c19,#0e0c0b 76%);
  box-shadow:none;
}
.board-plinth:before{display:none}
@media(max-width:370px),
       (min-width:700px),
       (orientation:landscape) and (max-height:700px){.play-area{min-height:0;padding:0}
.board-scene{width:100%;max-width:none;padding:0}
.board-plinth{width:100%;max-width:none}}
.piece.is-travelling{animation:piece-travel .65s cubic-bezier(.25,.65,.35,1) both;transition:none;will-change:transform}
@keyframes piece-travel{
  0%{transform:translate(var(--move-x),var(--move-y)) scale(1)}
  45%{transform:translate(calc(var(--move-x)*.4),calc(var(--move-y)*.4 - var(--move-lift))) scale(1.05)}
  72%{transform:translate(calc(var(--move-x)*-.04),calc(var(--move-y)*-.04)) scale(1.16,.84)}
  86%{transform:translate(0,calc(var(--move-lift)*-.35)) scale(.94,1.1)}
  100%{transform:translate(0,0) scale(1)}
}