:root{--bg: #15161a;--bg-2: #1d1f25;--fg: #e8e4dc;--muted: #8d8a82;--accent: #f2c14e;--accent-2: #62d0ff;--danger: #ff5a5a;--light-sq: #e9dcc2;--dark-sq: #9a7551;--rim: #3a2a1c;--glow: rgba(120, 235, 205, .9);--glow-soft: rgba(120, 235, 205, .55);--font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif}*{box-sizing:border-box}html{margin:0;scroll-behavior:smooth}body{margin:0;font-family:var(--font);color:var(--fg);background:radial-gradient(120% 90% at 50% 10%,#464a5459,#0000 55%),linear-gradient(#0000,#00000059),url(../assets/bg.webp) center top / 480px 480px repeat var(--bg);-webkit-tap-highlight-color:transparent}.app-shell{--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px);--topbar-h: 50px;--footer-h: 20px;height:100vh;height:100dvh;display:flex;flex-direction:column;padding-top:var(--safe-top);padding-bottom:var(--safe-bottom);user-select:none;overflow:hidden}.topbar{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;gap:12px;height:var(--topbar-h);flex:none}.brand{display:flex;align-items:baseline;gap:8px;font-size:15px;letter-spacing:.02em;margin:0;font-weight:500}.brand-mark{font-size:22px;line-height:1;color:var(--accent);position:relative}.brand-drop{font-size:11px;position:absolute;right:-8px;bottom:-2px;color:var(--accent-2)}.brand-text b{color:var(--accent);font-weight:700}.pos-label{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}.controls{display:flex;align-items:center;gap:8px;flex:none}.controls>*,.seg button{flex:none}.brand{min-width:0;overflow:hidden}.icon-btn,.seg button{background:var(--bg-2);color:var(--fg);border:1px solid #2c2f37;border-radius:10px;width:38px;height:34px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s}.icon-btn:hover,.seg button:hover{background:#2a2d35}.icon-btn:disabled{opacity:.35;cursor:default}.icon-btn.big{width:56px;height:48px;border-radius:14px}.seg{display:inline-flex;border-radius:10px;overflow:hidden;border:1px solid #2c2f37}.seg button{border:0;border-radius:0}.seg button.active,.icon-btn.active{background:var(--accent);color:#1a1408}.level{background:var(--bg-2);color:var(--fg);border:1px solid #2c2f37;border-radius:10px;height:34px;padding:0 8px;font:inherit;font-size:13px}.badge{font-size:12px;padding:4px 8px;border-radius:8px;background:#3a2a10;color:var(--accent)}.badge.warn{background:#4a1f1f;color:#ffb4b4}.thinking{display:inline-flex;gap:4px;align-items:center;padding:0 4px}.thinking[hidden],.opt-row[hidden],.badge[hidden]{display:none}.thinking i{width:7px;height:7px;border-radius:50%;background:var(--accent-2);opacity:.35;animation:breathe 1.2s infinite ease-in-out}.thinking i:nth-child(2){animation-delay:.2s}.thinking i:nth-child(3){animation-delay:.4s}@keyframes breathe{0%,to{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}.stage{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:0 6px;min-height:0}.board-host{--avail-h: calc(100dvh - var(--safe-top) - var(--safe-bottom) - var(--topbar-h) - var(--footer-h) - 8px);--root-aspect: 1;width:min(100vw - 12px,calc(var(--avail-h) / var(--root-aspect)),860px);aspect-ratio:1 / var(--root-aspect);position:relative}.board-host:has(.board-root[data-tall="1"]){--root-aspect: 1.2}.footer{text-align:center;color:var(--muted);font-size:12px;height:var(--footer-h);line-height:var(--footer-h);flex:none;transition:opacity .2s}body.toasting .footer{opacity:0}.board-root{position:absolute;inset:0}.board-root{isolation:isolate}.board-root .layer{position:absolute;inset:0;width:100%;height:100%}.board-root svg.layer{overflow:visible;pointer-events:none}.board-root .layer.under{z-index:0}.board-root .layer.board-img{z-index:1}.board-root .layer.squares{z-index:2}.board-root .layer.highlights{z-index:3}.board-root .layer.shadows{z-index:4}.board-root .layer.pockets{z-index:5;pointer-events:none}.board-root .layer.hits{z-index:6;pointer-events:none}.board-root .layer.hits .hit{fill:transparent;pointer-events:all;cursor:pointer}.board-root .layer.pieces{z-index:7;pointer-events:none}.board-root .layer.pieces .piece{pointer-events:auto;cursor:pointer}.sq.light{fill:var(--light-sq)}.sq.dark{fill:var(--dark-sq)}.rim{fill:var(--rim);stroke:#241a11;stroke-width:14;stroke-linejoin:round;filter:drop-shadow(0 18px 22px rgba(0,0,0,.55))}body[data-view=top] .rim{stroke-width:10;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}.coord{fill:#d8c9a8;opacity:.8;font-family:var(--font);font-weight:600}.last-move{fill:#62d0ff47}.selected{fill:#62d0ff61}.check{fill:#ff3c3c8c;animation:pulse-check 1s infinite ease-in-out}@keyframes pulse-check{0%,to{opacity:.55}50%{opacity:1}}.move-dot{fill:#1e1e1e59}.capture-target{fill:none;stroke:#ff5a5ae6;stroke-width:6;stroke-linejoin:round}.drop-target{fill:#62d0ff1f;stroke:#62d0ffd9;stroke-width:3;animation:pulse-drop 1.1s infinite ease-in-out}@keyframes pulse-drop{0%,to{stroke-opacity:.55}50%{stroke-opacity:1}}.piece-shadow{fill:#0000008c}.board-root .layer.shadows{pointer-events:none}.piece{position:absolute;transition:left .28s cubic-bezier(.2,.8,.2,1),top .28s cubic-bezier(.2,.8,.2,1),width .28s,height .28s,opacity .35s,filter .2s;will-change:left,top}.piece img{width:100%;height:100%;display:block}.piece .shadow{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse at center,#0009,#00000073 45%,#0000 72%);transform-origin:center;will-change:transform,opacity}body[data-view=top] .piece .shadow{display:none}.piece.hop{--hop-t: .42s;--hop-h: -38%;--hop-y0: 0%;--hop-s0: 1;transition-duration:var(--hop-t),var(--hop-t),var(--hop-t),var(--hop-t),.35s,.2s;transition-timing-function:linear;z-index:450!important}.piece.hop img{animation:hop var(--hop-t) linear both!important}.piece.hop .shadow{animation:hop-shadow var(--hop-t) linear both}@keyframes hop{0%{transform:translateY(var(--hop-y0)) scale(var(--hop-s0))}25%{transform:translateY(calc(var(--hop-h) * .75)) scale(1.05)}50%{transform:translateY(var(--hop-h)) scale(1.07)}75%{transform:translateY(calc(var(--hop-h) * .75)) scale(1.05)}to{transform:translateY(0) scale(1)}}@keyframes hop-shadow{0%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.55}to{transform:scale(1);opacity:1}}.piece.captured .shadow{opacity:0;transition:opacity .2s}.board-root.intro .piece.hop img,.no-anim .piece.hop img{animation:none!important}.board-root.intro .piece.hop{z-index:auto!important}.no-anim,.no-anim .piece,.piece.no-anim{transition:none!important}.piece.movable img{animation:glow 1.8s infinite ease-in-out}@keyframes glow{0%,to{filter:drop-shadow(0 0 1px var(--glow-soft))}50%{filter:drop-shadow(0 0 7px var(--glow)) drop-shadow(0 0 2px var(--glow))}}.piece.selected{z-index:400!important}.piece.selected img{filter:drop-shadow(0 0 10px rgba(98,208,255,.95)) drop-shadow(0 0 3px #e6f7ff);transform:translateY(-6%) scale(1.06);animation:none}.piece.in-check img{filter:drop-shadow(0 0 10px var(--danger))}.piece.captured{pointer-events:none;transition-duration:.6s,.6s,.6s,.6s,.25s,.2s;transition-delay:0s,0s,0s,0s,.4s,0s;transition-timing-function:linear}.piece.captured img{animation:toss .6s linear both}@keyframes toss{0%{transform:translateY(0) scale(1)}25%{transform:translateY(-55%) scale(1.04)}50%{transform:translateY(-72%) scale(1.05)}75%{transform:translateY(-50%) scale(.98)}to{transform:translateY(0) scale(.9)}}body[data-phase=ai] .piece.movable img{animation:none}body[data-phase=over] .piece img{filter:saturate(.6)}.board-root.intro .piece{transition-duration:.85s;transition-timing-function:cubic-bezier(.3,.7,.2,1)}.pocket-tray,.pocket-item{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s}.pocket-tray-3d{position:absolute;left:0;top:0;transform-origin:0 0;transition:opacity .55s}.board-root.pockets-hidden .pocket-tray-3d{opacity:0}.board-root.pockets-hidden .pocket-tray[data-color=w],.board-root.pockets-hidden .pocket-item[data-color=w]{transform:translateY(60%);opacity:0}.board-root.pockets-hidden .pocket-tray[data-color=b],.board-root.pockets-hidden .pocket-item[data-color=b]{transform:translateY(-60%);opacity:0}.pocket-tray{position:absolute;border-radius:999px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 2px 8px #00000059}.pocket-item{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;pointer-events:all;z-index:2;transition:transform .15s,opacity .25s;-webkit-appearance:none;appearance:none;font:inherit;color:var(--fg)}.pocket-item img{width:100%;height:100%;display:block}.pocket-item.empty{opacity:0;pointer-events:none}.pocket-item .count:empty{display:none}.layer.pockets.standing .pocket-item .count{bottom:4%;right:8%}.layer.pockets.standing .pocket-item.selected{transform:translateY(-4%) scale(1.06)}.layer.pockets.standing .pocket-item:hover:not(.empty){transform:scale(1.03)}.pocket-item .count{position:absolute;right:-4%;bottom:-2%;font-size:12px;font-weight:700;background:var(--bg-2);border:1px solid #3a3d45;border-radius:999px;padding:1px 5px;line-height:1.2}.pocket-item.movable img,.pocket-item.hint img{animation:glow 1.8s infinite ease-in-out}body[data-phase=ai] .pocket-item img{animation:none}.pocket-item.selected{transform:scale(1.15)}.pocket-item.selected img{filter:drop-shadow(0 0 10px rgba(98,208,255,.95)) drop-shadow(0 0 3px #e6f7ff);animation:none}.pocket-item:hover:not(.empty){transform:scale(1.08)}.chip{display:inline-block;width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 1px #ffffff40,0 1px 2px #0009}.chip.metal{background:radial-gradient(circle at 35% 30%,#fff3c4,#f0c95a 30%,#b8862b 70%,#7a5416)}.chip.wood{background:repeating-linear-gradient(115deg,#6b3d1e 0 2px,#4a2812 2px 4px,#5b3319 4px 7px),#5b3319}.theme-icon{width:26px;height:26px;display:block;filter:drop-shadow(0 1px 1px rgba(0,0,0,.6))}.icon-btn.active .theme-icon{filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.theme-peek .chip-btn{width:30px;height:30px;overflow:hidden;position:relative}.theme-peek .knight{position:absolute;top:0;width:60px;height:30px;object-fit:cover}.theme-peek .knight.gold{left:0;object-position:left center;clip-path:inset(0 50% 0 0)}.theme-peek .knight.wood{left:-30px;object-position:right center;clip-path:inset(0 0 0 50%)}.theme-peek .chip-btn.active{box-shadow:0 0 0 2px var(--accent);border-radius:8px}.theme-peek{position:absolute;right:118px;top:calc(100% + 4px);z-index:61;display:flex;gap:8px;padding:6px 8px;border-radius:999px;background:var(--bg-2);border:1px solid #3a3d45;box-shadow:0 10px 24px #00000080;animation:peek-in .35s cubic-bezier(.2,.8,.2,1) both}.theme-peek[hidden]{display:none}.theme-peek:before{content:"";position:absolute;left:calc(var(--arrow-x, 50%) - 5px);top:-6px;width:10px;height:10px;background:var(--bg-2);border-left:1px solid #3a3d45;border-top:1px solid #3a3d45;transform:rotate(45deg)}.theme-peek .chip-btn{background:none;border:0;padding:2px;cursor:pointer;border-radius:50%;display:inline-flex}.theme-peek .chip{width:26px;height:26px}.theme-peek .chip-btn.active .chip{box-shadow:0 0 0 2px var(--accent),0 1px 2px #0009}.theme-peek.leaving{animation:peek-out .3s ease-in both}@keyframes peek-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@keyframes peek-out{to{opacity:0;transform:translateY(-6px)}}.popover[hidden]{display:none}.popover{position:absolute;right:10px;top:calc(100% + 6px);z-index:60;background:var(--bg-2);border:1px solid #3a3d45;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 12px 30px #0000008c}.opt-row{display:flex;align-items:center;justify-content:space-between;gap:14px}.opt-label{font-size:13px;color:var(--fg-dim, #b8bcc6);min-width:48px}.popover .seg button{width:auto;min-width:48px;padding:0 10px;gap:6px;font-size:12px;font-weight:600}.popover .seg button.active{background:var(--accent);color:#1a1408}.topbar{position:relative}.toast{position:absolute;left:50%;bottom:-14px;transform:translate(-50%,8px);z-index:60;background:#141418d9;color:var(--fg);padding:6px 14px;border-radius:999px;font-size:14px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(6px)}.toast.show{opacity:1;transform:translate(-50%)}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#0a0a0c59;backdrop-filter:blur(1.5px);z-index:900}.overlay[hidden]{display:none}.overlay-card{background:#18191ef0;border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 28px;text-align:center;box-shadow:0 20px 50px #0009;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:200px}.overlay-icon{width:160px;height:160px;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}@media (max-height: 520px){.overlay-icon{width:110px;height:110px}}.overlay-actions{display:flex;gap:12px;margin-top:4px}.icon-btn.primary{background:var(--accent);color:#1a1408;border-color:transparent}.icon-btn.primary:hover{background:#ffd36a}.result-badge{position:absolute;right:10px;top:8px;z-index:50;width:40px;height:36px;border-radius:10px;background:#18191ee6;border:1px solid rgba(255,255,255,.12);color:var(--fg);font-size:18px;cursor:pointer}.result-badge[hidden]{display:none}.overlay-text{font-size:16px;color:var(--fg)}.learn{max-width:760px;margin:0 auto;padding:32px 20px 48px;color:#cfcac0;line-height:1.6;font-size:15px;content-visibility:auto;contain-intrinsic-size:1px 1600px}.learn h2{color:var(--fg);font-size:20px;margin:28px 0 8px}.learn h3{color:var(--fg);font-size:15px;margin:16px 0 4px}.learn p{margin:8px 0}.learn ul{padding-left:20px}.learn a{color:var(--accent-2)}.learn-footer{margin-top:32px;color:var(--muted);font-size:13px;border-top:1px solid #2c2f37;padding-top:12px}@media (max-width: 640px){.brand-text,.pos-label{display:none}.topbar{padding:6px;gap:4px}.controls{gap:4px}.icon-btn,.seg button{width:34px;height:32px}.level{font-size:12px;padding:0 2px;max-width:64px;height:32px}}@media (max-width: 400px){.icon-btn,.seg button{width:32px;height:32px}.level{max-width:56px}.popover{right:4px}.brand-mark{display:none}.stage{padding:0 2px}.board-host{width:min(100vw - 4px,var(--avail-h),860px)}.toast{font-size:13px}}@media (max-height: 520px) and (orientation: landscape){.app-shell{--topbar-h: 42px;--footer-h: 0px}.footer{display:none}.icon-btn,.seg button,.level{height:30px}}.board-root .layer.board-img{pointer-events:none;overflow:visible}.board-img-stage{position:absolute;left:0;top:0;width:1000px;height:1000px;transform-origin:0 0}.board-img-stage img{position:absolute;left:0;top:0;transform-origin:0 0;display:block;backface-visibility:hidden}.front-face{fill:#2a190f;stroke:#160d07;stroke-width:1}.board-drop-shadow{fill:#0000008c;filter:blur(14px)}.pocket-tray.has-image{background-size:100% 100%;background-repeat:no-repeat;border:0;box-shadow:0 8px 18px #00000080;border-radius:6%/30%}