:root{--bg: #e7d8bb;--bg-2: #d8c6a4;--board-surface: #3a2c22;--board-edge: #2a1f18;--ink: #3a2b21;--ink-soft: #6b5645;--accent: #b56b48;--accent-2: #cf9f4d;--danger: #a8402f;--panel: #f2e7d0;--panel-line: #d8c6a4;--life-full: #c9762f;--life-empty: #c8bca6;--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;touch-action:manipulation}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(120% 90% at 50% 0%,var(--bg) 0%,var(--bg-2) 100%) fixed;background-image:radial-gradient(120% 90% at 50% 0%,var(--bg) 0%,var(--bg-2) 100%),repeating-radial-gradient(circle at 30% 20%,rgba(0,0,0,.015) 0 1px,transparent 1px 3px);min-height:100dvh;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#app{max-width:480px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom)) 16px;display:flex;flex-direction:column;gap:14px}.top{display:flex;flex-direction:column;gap:4px}.brand{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.mascot-wrap{position:relative}.mascot{width:72px;height:72px;display:block;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18));transition:transform .2s ease,filter .3s ease,opacity .3s ease;transform-origin:50% 90%}.mascot.mood-happy{animation:mascot-bounce .5s ease}.mascot.mood-sad{transform:rotate(-6deg) scale(.97)}.mascot.mood-sleep{opacity:.7;transform:rotate(3deg)}.zzz{position:absolute;top:-4px;right:-10px;font-family:var(--serif);font-size:15px;font-weight:700;color:var(--ink-soft);opacity:0;pointer-events:none}.mascot.mood-sleep+.zzz{opacity:1;animation:zzz-in .6s ease-out}@keyframes mascot-bounce{0%{transform:scale(1)}35%{transform:scale(1.14) translateY(-4px)}70%{transform:scale(.97)}to{transform:scale(1)}}@keyframes zzz-in{0%{transform:translateY(4px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes settle{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes win-bounce{0%{transform:translateY(0)}35%{transform:translateY(-26%) scale(1.08)}70%{transform:translateY(0) scale(.97)}to{transform:translateY(0) scale(1)}}@keyframes streak-pop{0%{transform:scale(1)}45%{transform:scale(1.45)}to{transform:scale(1)}}.brand-text h1{font-family:var(--serif);font-size:30px;line-height:1;margin:0 0 2px;letter-spacing:.3px;color:var(--ink)}.status{margin:0;font-size:14px;color:var(--ink-soft);min-height:18px}.lives{display:flex;gap:5px;align-self:start}.life{width:22px;height:22px;-webkit-mask:var(--sprite-life) center / contain no-repeat;mask:var(--sprite-life) center / contain no-repeat;background:var(--life-full);transition:background .3s ease,transform .3s ease}.life.spent{background:var(--life-empty);transform:scale(.86)}.subbar{display:flex;flex-direction:column;gap:8px}.seg{display:flex;background:#0000000f;border-radius:11px;padding:3px;gap:3px}.seg button{flex:1;border:0;background:transparent;color:var(--ink-soft);font-family:var(--sans);font-size:15px;font-weight:600;padding:8px 6px;border-radius:8px;cursor:pointer}.seg.small button{font-size:14px;padding:6px 4px}.seg button.on{background:var(--panel);color:var(--ink);box-shadow:0 1px 2px #0000001f}.free-opts{display:flex;gap:8px}.free-opts .seg{flex:1}.board-wrap{display:flex;flex-direction:column;gap:8px}.board{--n: 7;width:min(92vw,440px);aspect-ratio:1;margin:0 auto;display:grid;grid-template-columns:repeat(var(--n),1fr);grid-template-rows:repeat(var(--n),1fr);gap:4px;padding:8px;background:var(--board-surface);border-radius:16px;box-shadow:inset 0 2px 6px #00000080,0 6px 18px #00000040;touch-action:none;transition:opacity .2s ease}.board.loading{opacity:.35;pointer-events:none}.tile{position:relative;border-radius:9px;background:var(--face);border:1px solid var(--edge);box-shadow:inset 0 2px #ffffff38,inset 0 -3px 3px #00000029;cursor:pointer;transition:transform 80ms ease}.tile.pressed{transform:scale(.94);box-shadow:inset 0 1px #ffffff1f,inset 0 -1px 2px #0003}.tile.settle{animation:settle .26s ease-out backwards;animation-delay:var(--settle-delay, 0ms)}.tile.win-bounce .glyph{animation:win-bounce .5s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:var(--bounce-delay, 0ms)}.tile .glyph{position:absolute;inset:0;pointer-events:none}.tile.is-mark .glyph{-webkit-mask:var(--sprite-paw) center / 58% no-repeat;mask:var(--sprite-paw) center / 58% no-repeat;background-color:var(--paw);opacity:.95;animation:mark-in .14s ease-out}.tile.is-wrong{cursor:default;box-shadow:inset 0 0 0 2px #96261bbf,inset 0 2px #ffffff1a,inset 0 -3px 3px #00000029}.tile.is-wrong:after{content:"";position:absolute;inset:0;border-radius:inherit;background:#96261b29;pointer-events:none}.tile.is-wrong .glyph{-webkit-mask:var(--sprite-paw) center / 58% no-repeat;mask:var(--sprite-paw) center / 58% no-repeat;background-color:#8e2317;opacity:.95;animation:mark-in .14s ease-out}.tile.is-wolf .glyph{background:var(--sprite-wolf) center / 88% no-repeat;filter:drop-shadow(0 1px 1px rgba(0,0,0,.28))}.tile.locked{cursor:default}.tile.pop .glyph{animation:pop .22s cubic-bezier(.34,1.56,.64,1)}.tile.shake{animation:shake .34s ease}.tile.shake:after{content:"";position:absolute;inset:0;border-radius:9px;background:var(--danger);opacity:.4;animation:red-fade .36s ease forwards}.meta-row{display:flex;justify-content:space-between;align-items:center;padding:0 4px;font-size:14px;color:var(--ink-soft)}.timer{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}.controls{display:flex;gap:8px}.btn{flex:1;border:1px solid var(--panel-line);background:var(--panel);color:var(--ink);font-family:var(--sans);font-size:15px;font-weight:600;padding:12px 10px;border-radius:12px;cursor:pointer;box-shadow:0 1px 2px #00000014}.btn:active{transform:translateY(1px)}.btn[disabled]{opacity:.45;pointer-events:none}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fdf6e8}.btn.icon{flex:0 0 auto;padding:12px 16px}.overlay,.panel{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:20px;background:#1c140e80;backdrop-filter:blur(2px)}.overlay.hidden,.panel.hidden{display:none}.overlay-card{background:var(--panel);border-radius:18px;padding:26px 24px;text-align:center;max-width:320px;width:100%;box-shadow:0 12px 40px #0000004d;animation:pop .24s cubic-bezier(.34,1.56,.64,1)}.overlay-card h2{font-family:var(--serif);margin:0 0 8px;font-size:24px}.big-time{font-size:40px;font-weight:700;font-variant-numeric:tabular-nums;margin:6px 0;color:var(--ink)}.best-flag{color:var(--accent);font-weight:600;margin:4px 0}.sub{color:var(--ink-soft);font-size:14px;margin:4px 0}.score-line{font-size:20px;font-weight:700;margin:2px 0}.score-breakdown{margin-top:0}.streak-num{display:inline-block;font-weight:700;color:var(--accent);animation:streak-pop .5s cubic-bezier(.34,1.56,.64,1) .3s backwards}.overlay-actions{display:flex;gap:8px;margin-top:16px}.overlay-card.intro{text-align:left}.overlay-card.intro h2{text-align:center}.intro-wolf{display:block;margin:0 auto 4px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}.intro-rules{margin:10px 0}.intro-rules+.intro-rules{border-top:1px solid var(--panel-line);padding-top:10px}.panel-card{background:var(--panel);border-radius:18px;padding:20px;max-width:360px;width:100%;max-height:86vh;overflow-y:auto;box-shadow:0 12px 40px #0000004d}.panel-head{display:flex;justify-content:space-between;align-items:center}.panel-card h2{font-family:var(--serif);margin:0;font-size:22px}.panel-card h3{font-size:15px;margin:18px 0 8px;color:var(--ink)}.toggles{margin-top:12px;display:flex;flex-direction:column;gap:4px}.toggle{display:flex;align-items:center;justify-content:space-between;padding:10px 0;font-size:15px;cursor:pointer}.toggle input{position:absolute;opacity:0;pointer-events:none}.toggle .track{width:46px;height:27px;border-radius:14px;background:#0000002e;position:relative;transition:background .18s ease;flex:0 0 auto}.toggle .thumb{position:absolute;top:3px;left:3px;width:21px;height:21px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #0000004d;transition:transform .18s ease}.toggle input:checked+.track{background:var(--accent)}.toggle input:checked+.track .thumb{transform:translate(19px)}.stats{width:100%;border-collapse:collapse;font-size:14px}.stats th,.stats td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--panel-line)}.stats th{color:var(--ink-soft);font-weight:600}.how{margin:0;padding-left:18px;font-size:14px;color:var(--ink-soft);line-height:1.5}.how li{margin:3px 0}.confetti-layer{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}.confetti-paw{position:absolute;top:-40px;width:20px;height:20px;-webkit-mask:var(--sprite-paw) center / contain no-repeat;mask:var(--sprite-paw) center / contain no-repeat;background:var(--accent);animation:fall linear forwards}@keyframes pop{0%{transform:scale(.4)}70%{transform:scale(1.12)}to{transform:scale(1)}}@keyframes mark-in{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:.85}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-4px)}40%{transform:translate(4px)}60%{transform:translate(-3px)}80%{transform:translate(3px)}}@keyframes red-fade{0%{opacity:.4}to{opacity:0}}@keyframes fall{0%{transform:translateY(0) rotate(0)}to{transform:translateY(105vh) rotate(320deg)}}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}