.blk-game{max-width:640px;margin-inline:auto}.blk-toolbar{display:flex;flex-wrap:wrap;gap:.75rem 1rem;align-items:center;justify-content:center;margin-bottom:1rem}.blk-toolbar .blk-new-btn{margin:0;font-size:1rem;font-weight:600;min-height:48px;padding-inline:1.25rem}.blk-tally-wrap{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.1rem}.blk-tally{display:inline-grid;place-items:center;min-width:2.4rem;padding:.15rem .6rem;border:2px solid var(--fgs-good);border-radius:999px;background:color-mix(in srgb,var(--fgs-good) 14%,transparent);color:var(--fgs-good);font-weight:900;font-size:1.25rem}.blk-howto{text-align:center;font-size:1.2rem;font-weight:700;color:var(--fgs-ink);background:var(--fgs-accent-soft);border:2px solid color-mix(in srgb,var(--fgs-accent) 45%,transparent);border-radius:10px;max-width:560px;margin:0 auto 1rem;padding:.6rem .9rem}.blk-board{display:grid;grid-template-columns:repeat(9,1fr);gap:2px;background:var(--fgs-ink);width:min(96vw,580px);aspect-ratio:1 / 1;margin:0 auto 1rem;border:4px solid var(--fgs-ink);border-radius:8px;overflow:hidden}.blk-cell{min-height:0;margin:0;padding:0;border:0;border-radius:0;background:var(--fgs-surface);display:grid;place-items:center;cursor:pointer;position:relative}.blk-cell.blk-region-top{box-shadow:inset 0 3px 0 var(--fgs-ink)}.blk-cell.blk-region-left{box-shadow:inset 3px 0 0 var(--fgs-ink)}.blk-cell.blk-region-top.blk-region-left{box-shadow:inset 3px 3px 0 var(--fgs-ink)}.blk-cell:focus-visible{outline:4px solid var(--fgs-focus);outline-offset:-4px;z-index:3}.blk-cell.blk-filled{background:#334155;box-shadow:inset 0 0 0 2px #ffffff59,inset 0 0 0 4px #00000040}.blk-cell.blk-filled:after{content:"";width:38%;height:38%;border-radius:4px;background:#ffffff8c}.blk-cell.blk-preview-ok{background:color-mix(in srgb,var(--fgs-good) 34%,var(--fgs-surface));box-shadow:inset 0 0 0 4px var(--fgs-good);z-index:2}.blk-cell.blk-preview-ok:before{content:"✓";position:absolute;font-weight:900;font-size:1.05rem;color:var(--fgs-good-deep, var(--fgs-good))}.blk-cell.blk-preview-bad{background:color-mix(in srgb,var(--fgs-bad) 22%,var(--fgs-surface));box-shadow:inset 0 0 0 4px var(--fgs-bad);z-index:2}.blk-cell.blk-preview-bad:before{content:"✕";position:absolute;font-weight:900;font-size:1.05rem;color:var(--fgs-bad)}.blk-cell.blk-hint{background:color-mix(in srgb,var(--fgs-hint) 30%,var(--fgs-surface));box-shadow:inset 0 0 0 4px var(--fgs-hint);z-index:2;animation:blk-pulse 1.1s ease-in-out infinite}.blk-cell.blk-hint:before{content:"★";position:absolute;font-weight:900;font-size:1.05rem;color:var(--fgs-hint)}@keyframes blk-pulse{0%,to{box-shadow:inset 0 0 0 4px var(--fgs-hint)}50%{box-shadow:inset 0 0 0 7px var(--fgs-hint)}}.blk-cell.blk-cleared-flash{animation:blk-clear .6s ease-out}@keyframes blk-clear{0%{background:color-mix(in srgb,var(--fgs-good) 60%,transparent)}to{background:var(--fgs-surface)}}.blk-tray-label{text-align:center;font-weight:800;font-size:1.1rem;margin:0 0 .5rem}.blk-tray{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;max-width:560px;margin:0 auto 1rem}.blk-tray-piece{margin:0;min-height:120px;padding:.7rem;display:grid;place-items:center;background:var(--fgs-surface);border:3px solid var(--fgs-line);border-radius:14px;cursor:pointer}.blk-tray-piece:focus-visible{outline:4px solid var(--fgs-focus);outline-offset:2px}.blk-tray-piece.blk-selected{border-color:var(--fgs-focus);box-shadow:0 0 0 5px color-mix(in srgb,var(--fgs-focus) 45%,transparent);background:color-mix(in srgb,var(--fgs-focus) 16%,var(--fgs-surface));position:relative}.blk-tray-piece.blk-selected:after{content:"✓ picked up";position:absolute;top:-.7rem;left:50%;transform:translate(-50%);background:var(--fgs-focus);color:#fff;font-size:.75rem;font-weight:800;padding:.1rem .55rem;border-radius:999px;white-space:nowrap}.blk-tray-piece.blk-tray-empty{background:var(--fgs-paper-2);border-style:dashed;cursor:default;opacity:.85}.blk-tray-shape{display:grid;gap:3px}.blk-mini{width:clamp(18px,5.5vw,26px);height:clamp(18px,5.5vw,26px);border-radius:4px;background:transparent}.blk-mini-on{border:2px solid rgba(0,0,0,.35);box-shadow:inset 0 0 0 1px #fff6}.blk-tray-shape.blk-used{display:grid;place-items:center;font-size:2rem;font-weight:900;color:var(--fgs-good)}.blk-actions{display:flex;flex-wrap:wrap;gap:.85rem;justify-content:center;align-items:stretch;margin:0 auto 1rem;max-width:560px}.blk-actions button{margin:0;min-height:56px;font-size:1.25rem;font-weight:800;padding-inline:1.6rem}.blk-actions .blk-hint-btn{flex:1 1 auto;min-width:14rem;background:var(--fgs-hint);border-color:var(--fgs-hint);color:#fff}.blk-actions .blk-hint-btn:hover{background:color-mix(in srgb,var(--fgs-hint) 85%,#000);border-color:color-mix(in srgb,var(--fgs-hint) 85%,#000)}.blk-status{text-align:center;font-size:1.2rem;font-weight:700;min-height:3.2rem;padding:.5rem}.blk-game.blk-no-room .blk-board{border-color:var(--fgs-bad);box-shadow:0 0 0 4px color-mix(in srgb,var(--fgs-bad) 22%,transparent)}[data-contrast=high] .blk-board{border-color:#000;background:#000}[data-contrast=high] .blk-cell.blk-region-top{box-shadow:inset 0 3px #000}[data-contrast=high] .blk-cell.blk-region-left{box-shadow:inset 3px 0 #000}[data-contrast=high] .blk-cell.blk-region-top.blk-region-left{box-shadow:inset 3px 3px #000}[data-contrast=high] .blk-cell.blk-filled{background:#000}[data-contrast=high] .blk-cell.blk-filled:after{background:#fff}[data-contrast=high] .blk-cell.blk-preview-ok{background:#fff;box-shadow:inset 0 0 0 3px #00339c}[data-contrast=high] .blk-cell.blk-preview-ok:before{color:#00339c}[data-contrast=high] .blk-cell.blk-preview-bad{background:#fff;box-shadow:inset 0 0 0 3px #000}[data-contrast=high] .blk-cell.blk-preview-bad:before{color:#000}[data-contrast=high] .blk-cell.blk-hint{background:#fff;box-shadow:inset 0 0 0 4px #000}[data-contrast=high] .blk-cell.blk-hint:before{color:#000}[data-contrast=high] .blk-tray-piece{border:3px solid #000!important}[data-contrast=high] .blk-tray-piece.blk-selected{box-shadow:0 0 0 4px #000}[data-contrast=high] .blk-mini-on{border:2px solid #000}@media(prefers-reduced-motion:reduce){.blk-cell.blk-hint{animation:none;box-shadow:inset 0 0 0 5px var(--fgs-hint)}.blk-cell.blk-cleared-flash{animation:none}}@media(max-width:480px){.blk-tray{gap:.6rem}.blk-tray-piece{min-height:92px;padding:.45rem}.blk-actions .blk-hint-btn{flex-basis:100%;min-width:0}}
