/* block-puzzle - game UI. The frame (game-frame.css) owns the header, stage card and buttons;
 * everything here is prefixed .bp-. Tokens come from site.css. */
.bp-home,.bp-play{display:grid;gap:12px}
.bp-home[hidden],.bp-play[hidden]{display:none}
.bp-modes{display:grid;gap:10px}
.bp-mode{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:10px 14px;text-align:left;font:inherit;color:var(--color-ink,#171c36);background:var(--color-paper,#fffdf6);border:3px solid var(--color-ink,#171c36);border-radius:18px;box-shadow:0 5px 0 0 var(--color-ink,#171c36);cursor:pointer;transition:transform .12s var(--ease-press,ease),box-shadow .12s;touch-action:manipulation}
.bp-mode:active{transform:translateY(4px);box-shadow:0 1px 0 0 var(--color-ink,#171c36)}
.bp-mode:focus-visible,.bp-chip:focus-visible,.bp-pow:focus-visible,.bp-lv:focus-visible{outline:3px solid var(--color-focus,#3b6fd8);outline-offset:3px}
.bp-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--bp-c);border:3px solid var(--color-ink,#171c36);position:relative;box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.bp-ico::after{content:"";position:absolute;left:6px;top:5px;width:16px;height:5px;border-radius:3px;background:rgba(255,255,255,.55)}
.bp-mtxt{display:grid;gap:3px;min-width:0}
.bp-mtxt b{font:800 1.05rem/1.1 var(--font-display,inherit)}
.bp-mtxt small{font:500 12px/1.3 var(--font-label,monospace);color:var(--color-muted,#555);overflow-wrap:anywhere}
.bp-mode.is-done{opacity:.6}
.bp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:2px 0 0}
.bp-stats div{padding:8px 6px;border:2px solid var(--color-ink,#171c36);border-radius:12px;background:var(--color-paper-2,#f4efe0);text-align:center}
.bp-stats dt{font:500 10px/1.2 var(--font-label,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted,#555)}
.bp-stats dd{font:800 1.1rem/1.3 var(--font-display,inherit);font-variant-numeric:tabular-nums}
.bp-toggle{display:flex;align-items:center;gap:10px;min-height:44px;font:600 var(--text-sm,.875rem)/1.2 var(--font-body,inherit)}
.bp-toggle input{width:22px;height:22px;accent-color:#5B6CFF}

.bp-levels{padding:12px;border:3px solid var(--color-ink,#171c36);border-radius:18px;background:var(--color-paper-2,#f4efe0)}
.bp-lvhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.bp-lvgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.bp-lv{position:relative;display:grid;gap:2px;justify-items:center;min-height:62px;padding:6px 2px;font:inherit;color:var(--color-ink,#171c36);background:var(--color-paper,#fffdf6);border:2px solid var(--color-ink,#171c36);border-radius:12px;cursor:pointer;touch-action:manipulation}
.bp-lv b{font:800 1.15rem/1 var(--font-display,inherit)}
.bp-lv small{font:500 9px/1.1 var(--font-label,monospace);text-align:center;color:var(--color-muted,#555);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bp-lv i{font:600 9px/1 var(--font-label,monospace);font-style:normal;color:#168a5a}
.bp-lv.is-clear{background:#d8f7e8}
.bp-lv:disabled{opacity:.45;cursor:not-allowed}

.bp-hud{display:grid;grid-template-columns:auto 1fr 1fr;gap:8px;align-items:stretch}
.bp-chip{min-height:44px;padding:0 14px;font:700 var(--text-sm,.875rem)/1 var(--font-display,inherit);color:var(--color-ink,#171c36);background:var(--color-paper,#fffdf6);border:2px solid var(--color-ink,#171c36);border-radius:999px;cursor:pointer;touch-action:manipulation}
.bp-card{display:grid;align-content:center;gap:2px;padding:4px 12px;border:3px solid var(--color-ink,#171c36);border-radius:14px;background:var(--color-ink,#171c36);color:#fff;min-width:0}
.bp-card span{font:500 10px/1 var(--font-label,monospace);letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.bp-card b{font:800 1.35rem/1.1 var(--font-display,inherit);font-variant-numeric:tabular-nums;transform-origin:left center}
#bp-score.pop{animation:bp-pop .28s var(--ease-spring,ease)}
@keyframes bp-pop{0%{transform:scale(1)}40%{transform:scale(1.22);color:#ffe066}100%{transform:scale(1)}}
.bp-mode-label{text-align:center;font:500 11px/1 var(--font-label,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--color-muted,#555)}
.bp-goal{display:grid;gap:5px}
.bp-goal[hidden]{display:none}
.bp-goalbar{height:12px;border:2px solid var(--color-ink,#171c36);border-radius:999px;background:var(--color-paper,#fffdf6);overflow:hidden}
.bp-goalbar i{display:block;height:100%;width:0;background:#3ddc97;transition:width .35s var(--ease-out,ease)}
#bp-goaltxt{font:700 var(--text-sm,.875rem)/1.2 var(--font-body,inherit)}

.bp-stage{position:relative;touch-action:none;user-select:none;-webkit-user-select:none}
#bp-canvas{display:block;touch-action:none;-webkit-touch-callout:none;margin:0;max-width:none;border-radius:0}
.bp-banner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);max-width:92%;padding:10px 18px;border-radius:18px;background:var(--color-ink,#171c36);color:#fff;font:800 var(--text-sm,.9rem)/1.2 var(--font-display,inherit);text-align:center;box-shadow:0 4px 0 rgba(0,0,0,.25);pointer-events:none;z-index:2}
.bp-banner[hidden]{display:none}
.bp-banner.in{animation:bp-bn .3s var(--ease-spring,ease)}
@keyframes bp-bn{from{transform:translate(-50%,-30%) scale(.7);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
.bp-toast{position:absolute;right:8px;top:8px;padding:8px 14px;border-radius:999px;background:#ffd23f;color:#171c36;border:3px solid #171c36;font:800 var(--text-sm,.9rem)/1 var(--font-display,inherit);opacity:0;transform:translateY(-10px) scale(.8);pointer-events:none;z-index:3}
.bp-toast.show{animation:bp-toast 1.9s var(--ease-out,ease) forwards}
@keyframes bp-toast{0%{opacity:0;transform:translateY(-10px) scale(.8)}12%{opacity:1;transform:translateY(0) scale(1.08)}22%{transform:scale(1)}80%{opacity:1}100%{opacity:0;transform:translateY(-8px)}}

.bp-result{position:absolute;inset:0;display:grid;place-items:center;padding:14px;background:rgba(23,28,54,.72);z-index:4;animation:bp-fade .25s ease}
.bp-result[hidden]{display:none}
@keyframes bp-fade{from{opacity:0}to{opacity:1}}
.bp-sheet{width:100%;max-width:340px;padding:18px 16px;text-align:center;background:var(--color-paper,#fffdf6);border:3px solid var(--color-ink,#171c36);border-radius:22px;box-shadow:0 8px 0 0 var(--color-ink,#171c36);animation:bp-up .35s var(--ease-spring,ease)}
@keyframes bp-up{from{transform:translateY(24px) scale(.94);opacity:0}to{transform:none;opacity:1}}
.bp-sheet h2{font:800 var(--text-xl,1.6rem)/1.1 var(--font-display,inherit);letter-spacing:-.02em}
.bp-sub{margin:6px 0 2px;font:600 var(--text-sm,.875rem)/1.3 var(--font-body,inherit);color:var(--color-muted,#555)}
.bp-big{font:800 3rem/1.1 var(--font-display,inherit);font-variant-numeric:tabular-nums;color:#5B6CFF}
.bp-lines{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;margin:8px 0;font:500 12px/1.4 var(--font-label,monospace);text-align:left}
.bp-coins{min-height:1.2em;margin-bottom:10px;font:700 var(--text-sm,.875rem)/1.3 var(--font-body,inherit);color:#9a6a00}
.bp-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
body[data-pip-frame] .game-wrap .btn.bp-ghost{background:var(--color-paper-2,#f4efe0);border:2px solid var(--color-ink,#171c36)}

.bp-powers{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.bp-pow{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:4px 10px;font:800 var(--text-sm,.9rem)/1 var(--font-display,inherit);color:var(--color-ink,#171c36);background:var(--color-paper,#fffdf6);border:3px solid var(--color-ink,#171c36);border-radius:14px;box-shadow:0 4px 0 0 var(--color-ink,#171c36);cursor:pointer;touch-action:manipulation}
.bp-pow span{font-size:1.2rem;line-height:1}
.bp-pow small{font:500 10px/1 var(--font-label,monospace);color:var(--color-muted,#555)}
.bp-pow:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 0 var(--color-ink,#171c36)}
.bp-pow.is-armed{background:#ffd23f}
.bp-pow:disabled{opacity:.4;box-shadow:none;transform:translateY(3px);cursor:not-allowed}
.bp-pow:disabled small{visibility:hidden}
.bp-combo{position:absolute;left:8px;top:8px;z-index:3;margin:0;padding:6px 12px;border-radius:999px;background:#ff7a1a;color:#fff;border:3px solid #171c36;font:800 12px/1 var(--font-display,inherit);pointer-events:none}
.bp-combo[hidden]{display:none}

.bp-article{max-width:44rem;margin:var(--space-lg,1.5rem) auto;padding:0 var(--page-gutter,1rem);font:400 var(--text-md,1.0625rem)/1.65 var(--font-body,inherit);color:var(--color-ink,#171c36)}
.bp-article h2{margin:var(--space-lg,1.5rem) 0 var(--space-xs,.5rem);font:800 var(--text-lg,1.25rem)/1.2 var(--font-display,inherit);letter-spacing:-.01em}
.bp-article p{margin:0 0 .85em}
.bp-article ul{margin:0 0 1em 1.2em}
.bp-article li{margin:0 0 .5em}
.bp-article details{border:2px solid var(--color-ink,#171c36);border-radius:12px;margin:0 0 8px;background:var(--color-paper-2,#f4efe0)}
.bp-article summary{cursor:pointer;padding:12px 14px;min-height:44px;font-weight:700}
.bp-article details p{padding:0 14px;margin-bottom:.8em}
@media (prefers-reduced-motion:reduce){.bp-toast.show,.bp-banner.in,.bp-sheet,.bp-result,#bp-score.pop{animation:none}.bp-toast.show{opacity:1;transform:none}}

/* compact title while playing so board + tray sit higher on a phone */
body.bp-playing[data-pip-frame] .game-title p{display:none}
body.bp-playing[data-pip-frame] .game-title{margin-bottom:4px}
body.bp-playing[data-pip-frame] .game-title h1{font-size:1.05rem}