/* Chess puzzles page. The board / piece look is copied from chess/play/index.html (kept separate so edits there don't move this page). */
:root{--sq-light:#f0d9b5;--sq-dark:#b58863;--frame:#3e2412}
html,body{overflow-x:hidden;max-width:100%}
html{height:auto}
#pz [hidden],#pz[hidden]{display:none!important}
body{height:auto;min-height:100dvh;padding-bottom:calc(var(--navh,64px) + 12px)}
#pz{max-width:600px;width:100%;margin:0 auto;padding:0 12px 24px;min-width:0;display:flex;flex-direction:column;gap:10px}
#pz .gh{border-radius:0 0 14px 14px;margin:0 -12px}
.pz-seg{display:flex;gap:4px;flex:none}
.pz-seg button{min-height:40px;padding:6px 10px;background:rgba(255,255,255,.12);color:var(--ink);font-size:13px}
.pz-seg button[aria-pressed="true"]{background:var(--gold);color:#3b2a00}
.pz-seg button i{margin-right:3px}
@media (max-width:400px){.pz-seg button{padding:6px 8px;font-size:12px}.pz-seg button i{display:none}.gh h1{font-size:16px}}

/* streak strip */
.pz-strip{display:flex;align-items:center;gap:12px;padding:10px 14px;flex-wrap:wrap}
.pz-flame{display:flex;align-items:baseline;gap:6px;font-size:14px;color:var(--muted)}
.pz-flame i{color:#ff8a3d;font-size:20px;align-self:center;filter:drop-shadow(0 0 6px rgba(255,138,61,.5))}
.pz-flame b{font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.pz-strip.cold .pz-flame i{color:#6c8176;filter:none}
.pz-dots{display:flex;gap:6px;margin-left:auto}
.pz-dots i{width:14px;height:14px;border-radius:50%;background:rgba(255,255,255,.14);display:block}
.pz-dots i.on{background:var(--gold);box-shadow:0 0 8px rgba(255,213,79,.55)}
.pz-dots i.now{outline:2px solid rgba(255,255,255,.7);outline-offset:2px}
.pz-sub{flex:1 1 100%;font-size:13px;color:var(--muted)}
.pz-sub:empty{display:none}

/* the puzzle master */
.pz-master{display:flex;align-items:center;gap:12px;min-height:60px}
.pz-face{flex:none;width:58px;height:58px;display:grid;place-items:center}
.pz-bubble{position:relative;flex:1;min-width:0;background:rgba(0,0,0,.28);border:1px solid var(--line,rgba(255,255,255,.08));border-radius:14px;padding:8px 12px}
.pz-bubble::before{content:'';position:absolute;left:-7px;top:20px;width:12px;height:12px;background:inherit;border-left:1px solid var(--line,rgba(255,255,255,.08));border-bottom:1px solid var(--line,rgba(255,255,255,.08));transform:rotate(45deg)}
.pz-bubble b{font-size:12px;color:var(--gold);letter-spacing:.3px}
.pz-bubble p{margin:2px 0 0;font-size:15px;line-height:1.35}
.pz-meta{display:flex;justify-content:space-between;gap:8px;font-size:13px;color:var(--muted);padding:0 4px}
.pz-meta #pzSide{font-weight:700;color:var(--ink)}
.pz-status{text-align:center;min-height:24px;font-weight:700;font-size:15px}
.pz-status.ok{color:#8be0a4}.pz-status.bad{color:#ff9e94}

#boardWrap{display:flex;justify-content:center;min-width:0}
/* board */
#board{position:relative;display:grid;grid-template-columns:repeat(8,var(--sq,40px));grid-template-rows:repeat(8,var(--sq,40px));
  border:6px solid var(--frame);border-radius:8px;background:var(--frame);box-shadow:0 12px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.08);touch-action:none;flex:none}
#board.shake{animation:pzshake .38s}
@keyframes pzshake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
#board .sq{position:relative;display:block;width:var(--sq);height:var(--sq);padding:0;margin:0;border:0;border-radius:0;min-height:0;min-width:0;font:inherit;cursor:pointer;background-image:none}
#board .sq:active{transform:none}
#board .sq.light{background-color:var(--sq-light)}
#board .sq.dark{background-color:var(--sq-dark)}
#board .sq.light.last{background-color:#cfd27a}
#board .sq.dark.last{background-color:#aba445}
#board .sq.light.sel{background-color:#f3e57a}
#board .sq.dark.sel{background-color:#c9b03f}
#board .sq.sel{box-shadow:inset 0 0 0 3px var(--gold)}
#board .sq.check{background-image:radial-gradient(circle,#ff2a2a 0%,#e61e1e 28%,rgba(230,30,30,.55) 52%,rgba(230,30,30,0) 74%)}
#board .sq.hint{background-color:#86b8e0;box-shadow:inset 0 0 0 3px #1565c0}
#board .sq.dropping{box-shadow:inset 0 0 0 4px #fff}
#board .sq .cr,#board .sq .fl{position:absolute;font:700 calc(var(--sq)*.2)/1 system-ui,sans-serif;pointer-events:none;z-index:1}
#board .sq .cr{left:3px;top:3px}
#board .sq .fl{right:3px;bottom:2px}
#board .sq.light .cr,#board .sq.light .fl{color:#946a42}
#board .sq.dark .cr,#board .sq.dark .fl{color:#f6e6c8}
#board .sq.dest::after{content:'';position:absolute;inset:36%;border-radius:50%;background:rgba(24,70,22,.55);pointer-events:none;z-index:4}
#board .sq.dest.capdest::after{inset:5%;background:transparent;border:max(3px,calc(var(--sq)*.08)) solid rgba(24,70,22,.6)}
#board .sq:focus{outline:none}
#board .sq:focus-visible{outline:3px solid #fff;outline-offset:-4px;z-index:3;box-shadow:inset 0 0 0 6px rgba(0,0,0,.55)}
#pieces{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.pc{position:absolute;left:0;top:0;width:var(--sq);height:var(--sq);transition:transform .22s cubic-bezier(.3,.7,.3,1),opacity .25s;pointer-events:none;z-index:1;padding:calc(var(--sq)*.05)}
.pc svg{width:100%;height:100%;display:block;overflow:visible;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.pc svg{filter:drop-shadow(0 calc(var(--sq)*.03) calc(var(--sq)*.03) rgba(0,0,0,.45));transition:transform .15s}
.w svg,svg.w{fill:#fbfaf6;stroke:#161616;color:#161616}
.b svg,svg.b{fill:#262422;stroke:#000;color:#ece6dc}
.pc.b svg{filter:drop-shadow(0 0 .7px rgba(255,255,255,.7)) drop-shadow(0 calc(var(--sq)*.03) calc(var(--sq)*.03) rgba(0,0,0,.45))}
.pc.moving{z-index:4}
.pc.drag{transition:none;z-index:6}
.pc.drag svg{transform:scale(1.18) translateY(-6%)}
.pc.gone{opacity:0}
.pc.hintpc svg{filter:drop-shadow(0 0 4px #81d4fa) drop-shadow(0 0 2px #81d4fa)}
.pc.pop svg{animation:pzpop .5s ease-out}
@keyframes pzpop{40%{transform:scale(1.3)}}

/* buttons, hint, result */
.pz-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.pz-actions button{flex:1 1 130px;max-width:200px;min-height:46px}
.pz-actions button i{margin-right:4px}
@media (max-width:420px){.pz-actions{gap:6px}.pz-actions button{flex:1 1 0;min-width:0;padding:8px 4px;font-size:13px}.pz-actions button i{display:none}}
.pz-actions button .n{display:inline-block;min-width:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:rgba(255,213,79,.9);color:#3b2a00;font-size:11px;line-height:18px;font-weight:800}
.pz-hint{margin:0;text-align:center;font-size:14px;color:#cfe9fb;background:rgba(129,212,250,.12);border:1px solid rgba(129,212,250,.35);border-radius:12px;padding:8px 12px}
.pz-res{padding:16px;text-align:center;animation:pzin .35s ease-out}
@keyframes pzin{from{opacity:0;transform:translateY(8px)}}
.pz-res .rh{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:18px;color:#8be0a4}
.pz-res .rh.miss{color:var(--gold)}
.pz-res h2{margin:6px 0 2px;font-size:20px}
.pz-res .rm{margin:0;color:var(--muted);font-size:14px}
.pz-res .rs{margin:8px 0 0;font-size:14px}
.pz-res .rs b{color:var(--gold)}
.pz-res .rb{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;justify-content:center}
.pz-res .rb button{flex:1 1 140px;min-height:48px}
.pz-nudge{display:flex;align-items:center;gap:12px;padding:12px 14px}
.pz-nudge > i{font-size:22px;color:#ff8a3d}
.pz-nudge div{flex:1;min-width:0}
.pz-nudge p{margin:2px 0 0;font-size:13px;color:var(--muted);line-height:1.35}
.pz-filters h2.sec{margin-top:14px}
.pz-filters h2.sec span{margin-left:auto;text-transform:none;letter-spacing:0;font-size:13px;color:var(--gold)}
.pz-chips{display:flex;flex-wrap:wrap;gap:6px}
.pz-chips button{min-height:36px;padding:4px 12px;background:rgba(255,255,255,.12);color:var(--ink);font-size:13px;border-radius:18px}
.pz-chips button[aria-pressed="true"]{background:var(--gold);color:#3b2a00}
.pz-about{padding:14px 16px;margin-top:8px}
.pz-about h2{margin:0 0 6px;font-size:17px}
.pz-about p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.5}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}