:root{--bg: #f4f1ea;--fg: #1f2430;--muted: #6b7280;--card: #ffffff;--border: #d9d4c7;--thick: #333333;--thin: rgba(0, 0, 0, .2);--ink: #1a1a1a;--hit: #d6453d;--hit-dark: #8b1d1d;--hint: #f59e0b;--ok: #16a34a;--n1: #1d4ed8;--n2: #15803d;--ease-in: cubic-bezier(0, 0, .2, 1);--ease-out: cubic-bezier(.4, 0, 1, 1)}.cell{--cell-bg: var(--rc);--cell-revealed: color-mix(in oklch, var(--rc) 40%, #ffffff)}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);-webkit-text-size-adjust:100%}#app{max-width:560px;margin:0 auto;padding:calc(8px + env(safe-area-inset-top)) 14px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px;min-height:100dvh}header{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}.brand{display:flex;flex-direction:column;gap:2px}h1{font-size:1.35rem;margin:0;letter-spacing:.02em}.label{font-size:.8rem;color:var(--muted)}.hud{display:flex;gap:12px;font-variant-numeric:tabular-nums;font-size:1rem;white-space:nowrap}.board{display:grid;grid-template-columns:repeat(var(--n, 7),1fr);width:min(100%,70dvh);aspect-ratio:1;margin:0 auto;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border:3px solid var(--thick);border-radius:var(--radius, 8px);overflow:hidden;background:var(--thick);box-shadow:var(--board-shadow, none)}.board.won{border-color:var(--ok);box-shadow:0 0 0 3px var(--ok),0 0 28px #22c55e73}.board.won .cell.mark,.board.won .cell.given,.board.won .cell.hit{color:var(--ok);background:color-mix(in oklch,var(--ok) 25%,var(--cell-bg))}.board.lost{border-color:var(--hit);box-shadow:0 0 0 3px var(--hit)}.board.busy,.toolbar.busy{opacity:.5;pointer-events:none}.cell{position:relative;display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-top:1px solid var(--thin);border-left:1px solid var(--thin);background:var(--cell-bg);color:var(--ink);font:inherit;font-variant-numeric:tabular-nums;font-size:calc(var(--cell, 40px) * .5);font-weight:700;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}.cell.bt{border-top:3px solid var(--thick)}.cell.bl{border-left:3px solid var(--thick)}.cell.revealed{background:var(--cell-revealed);cursor:default;font-weight:600}.cell.n1{color:var(--n1)}.cell.n2{color:var(--n2)}.cell.n3,.cell.n4{color:var(--hint)}.cell.mark{color:var(--ink);font-weight:500}.cell.given{color:var(--ink);font-weight:800;cursor:default}.cell.given:after{content:"";position:absolute;left:30%;right:30%;bottom:9%;height:2px;background:currentColor;border-radius:1px}.piece{display:block;width:64%;height:64%;fill:currentColor}.toolbar .ico .piece,.hud .piece{width:1.35rem;height:1.35rem}.hud .piece{width:1rem;height:1rem;vertical-align:-2px;display:inline-block}.btn.sound{padding:4px 8px;font-size:.95rem;line-height:1}.cell.x{color:var(--ink);opacity:.68;font-weight:500;font-size:calc(var(--cell, 40px) * .42)}.cell.hit{background:var(--hit);color:#fff}.cell.excluded:after{content:"";width:32%;height:32%;border:1.5px dotted currentColor;border-radius:50%;opacity:.35}.cell.conflict{box-shadow:inset 0 0 0 3px var(--hit);color:var(--hit)}.cell.conflict.revealed{box-shadow:inset 0 0 0 3px var(--hit-dark);color:var(--hit-dark)}.cell.hint{outline:3px solid var(--hint);outline-offset:-3px;z-index:1;animation:pulse .6s ease-in-out 2}.cell.hintq{outline-color:var(--hit)}.cell.shake{animation:shake .4s}.cell.pop{animation:pop .14s var(--ease-in)}.cell.fade{animation:fadein 90ms var(--ease-in)}.cell.win-pop{animation:winpop .2s var(--ease-in) both}@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.08)}to{transform:scale(1)}}@keyframes fadein{0%{opacity:.2}to{opacity:.68}}@keyframes winpop{50%{transform:scale(1.15)}}@keyframes dlgin{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.cell.hint,.board.guided .cell.hint,.cell.pop,.cell.fade,.cell.win-pop,.guide.nudge{animation:none}.cell.shake{animation:none;box-shadow:inset 0 0 0 3px var(--hit)}.board.won{transition:box-shadow .3s}dialog[open]{animation:none}}@keyframes pulse{50%{filter:brightness(1.3)}}@keyframes shake{25%{transform:translate(-3px)}75%{transform:translate(3px)}}.msg{min-height:1.5em;text-align:center;color:var(--muted);font-size:.95rem}.toolbar{display:grid;grid-template-columns:repeat(var(--tools, 4),1fr);gap:6px}.toolbar .btn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 2px 6px;min-width:0}.toolbar .ico{font-size:1.35rem;line-height:1.1}.toolbar .cap{font-size:.68rem;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.toolbar .btn.glow{box-shadow:0 0 0 3px var(--hint),0 0 14px var(--hint)}.topbar{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.topbar .btn{padding:9px 4px;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.guide{display:flex;flex-direction:column;gap:2px;border:2px solid var(--hint);border-radius:10px;padding:8px 12px;background:color-mix(in srgb,var(--hint) 14%,var(--card))}.guide[hidden]{display:none}.guide-step{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}.guide-do{font-weight:700;font-size:1rem}.guide-why{font-size:.9rem}.guide.nudge{animation:shake .4s}.board.guided .cell:not(.hint){filter:saturate(.55) brightness(.8)}.board.guided .cell.hint{outline-width:4px;animation:pulse .9s ease-in-out infinite;filter:none}.toolhelp{min-height:1.3em;text-align:center;font-size:.85rem;color:var(--muted);padding:0 4px}.btn{font:inherit;font-size:1rem;padding:12px 8px;border-radius:var(--btn-radius, 10px);border:1px solid var(--border);background:var(--card);color:var(--fg);cursor:pointer}.btn.active,.btn.primary{background:var(--fg);color:var(--bg);border-color:var(--fg)}details{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px 12px}summary{cursor:pointer;font-weight:600}.settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}.settings label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;color:var(--muted)}.settings label.check{flex-direction:row;align-items:center;gap:8px;grid-column:1 / -1;color:var(--fg)}select{font:inherit;padding:8px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--fg)}.actions{display:flex;flex-wrap:wrap;gap:8px;grid-column:1 / -1}.actions .btn{flex:1 1 40%}ol.rules{padding-left:18px;margin:6px 0;font-size:.92rem;line-height:1.45}.footer{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.8rem;color:var(--muted);padding:2px 2px 10px}.btn.small{padding:8px 10px;font-size:.85rem}.footer-actions{display:flex;gap:6px}dialog[open]{animation:dlgin .25s var(--ease-in)}dialog p.note{color:var(--ok);font-weight:600}dialog{border:0;border-radius:14px;padding:20px;max-width:340px;width:90vw;background:var(--card);color:var(--fg)}dialog::backdrop{background:#00000040}@media(max-width:600px){dialog{margin:auto auto 0;width:100%;max-width:none;border-radius:14px 14px 0 0;padding-bottom:calc(16px + env(safe-area-inset-bottom))}}dialog h2{margin:0 0 10px}dialog p.dlg{margin:6px 0;line-height:1.45;font-size:.95rem}dialog .row{display:flex;justify-content:space-between;padding:4px 0;font-variant-numeric:tabular-nums}dialog .actions{margin-top:14px;flex-wrap:wrap}:root[data-theme=pizarra]{--bg: #0f1218;--bg-image: radial-gradient(900px 520px at 50% -15%, #1e2634 0%, #0f1218 60%);--slate: #171c26;--fg: #e9ecf1;--muted: #8e97a6;--card: #171c26;--border: #27303d;--thick: #9aa6b8;--thin: rgba(233, 236, 241, .12);--ink: #f4f6f9;--hit: #ff5a4f;--hit-dark: #c23b31;--hint: #ffb020;--ok: #3ddc84;--n1: #7cc4ff;--n2: #7ee8a2;--font-display: "Sora", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--radius: 14px;--btn-radius: 12px;--board-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .05);--meta-color: #0f1218}:root[data-theme=pizarra] .cell{--cell-bg: var(--rc);--cell-revealed: color-mix(in oklch, var(--rc) 28%, #0a0d12);box-shadow:inset 0 1px #ffffff0d}:root[data-theme=pizarra] body{background:var(--bg-image),var(--bg)}:root[data-theme=pizarra] h1{font-family:var(--font-display);font-weight:600;letter-spacing:.01em}:root[data-theme=pizarra] .board{border-color:#3b4656;background:#3b4656;box-shadow:var(--board-shadow)}:root[data-theme=pizarra] .cell.revealed{text-shadow:0 0 10px currentColor}:root[data-theme=pizarra] .piece{filter:drop-shadow(0 0 4px rgba(255,255,255,.45))}:root[data-theme=pizarra] .cell.hint{outline:none;box-shadow:inset 0 0 0 3px var(--hint),0 0 16px var(--hint)}:root[data-theme=pizarra] .cell.hintq{box-shadow:inset 0 0 0 3px var(--hit),0 0 16px var(--hit)}:root[data-theme=pizarra] .btn.active,:root[data-theme=pizarra] .btn.primary{background:linear-gradient(180deg,#ffd166,#ffb020);color:#1a1407;border-color:transparent}:root[data-theme=pizarra] .topbar .btn,:root[data-theme=pizarra] .toolbar .btn:not(.active),:root[data-theme=pizarra] .footer .btn{background:#1b2130}:root[data-theme=pizarra] .board.won{box-shadow:0 0 0 3px var(--ok),0 0 40px #3ddc8480}:root[data-theme=pizarra] .guide{background:#2a2412}:root[data-theme=pizarra] dialog{background:#151a24;border:1px solid #2b3442}@media(prefers-reduced-motion:reduce){:root[data-theme=pizarra] .piece{filter:none}}