:root{--sky: #bfe6f7;--meadow: #9fd69a;--hay: #f3d27a;--peach: #ff9e7a;--ink: #2e3b5e;--paper: rgba(255, 252, 244, .92);--serif: "Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif;--sans: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--rise: .22s cubic-bezier(.33, 1, .68, 1)}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden}body{background:var(--sky);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}button{font:inherit;color:inherit}#app{position:fixed;inset:0}#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.hud{position:absolute;inset:0;pointer-events:none}.hud[hidden]{display:none}.hud-tl,.hud-tc,.hud-tr{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));display:flex;flex-direction:column;gap:6px}.hud-tl{left:calc(12px + env(safe-area-inset-left,0px));align-items:flex-start}.hud-tc{left:0;right:0;margin-inline:auto;width:fit-content;align-items:center}.hud-tr{right:calc(78px + env(safe-area-inset-right,0px));flex-direction:row;align-items:center;gap:10px}.clock{font-family:var(--serif);font-size:28px;font-weight:700;letter-spacing:.02em;line-height:1;font-variant-numeric:tabular-nums}.daybar{width:120px;height:6px;border-radius:3px;background:#2e3b5e2e;overflow:hidden}.daybar i{display:block;height:100%;width:0;background:var(--ink);border-radius:3px;transition:width .4s linear}.windows{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;opacity:.85}.score{font-family:var(--serif);font-size:36px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums;transition:transform .15s ease-out}.score.pop{transform:scale(1.12)}.badge{padding:4px 12px;border-radius:999px;background:var(--peach);color:var(--ink);font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;border:2px solid var(--ink);transform-origin:center;animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1)}.badge[hidden]{display:none}@keyframes badge-pop{0%{transform:scale(1.3)}to{transform:scale(1)}}.bag{display:flex;gap:5px;padding:6px;border-radius:10px;background:#fffcf4b3;border:2px solid var(--ink)}.bag i{width:22px;height:16px;border-radius:3px;border:2px solid var(--ink);background:transparent;position:relative;opacity:.35;transition:opacity .15s ease-out,background .15s ease-out}.bag i.full{background:var(--hay);opacity:1}.bag i.full:after{content:"";position:absolute;left:2px;right:2px;top:1px;height:6px;border-left:2px solid var(--ink);border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);clip-path:polygon(0 0,50% 100%,100% 0,100% 100%,0 100%);border-radius:0 0 2px 2px;transform:rotate(180deg);transform-origin:50% 70%}.icon-btn{pointer-events:auto;width:56px;height:56px;border-radius:16px;border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center;cursor:pointer;padding:0;transition:transform .12s ease-out,background .12s ease-out}.icon-btn:hover{background:#fff}.icon-btn:active{transform:scale(.94)}.icon-btn svg{width:28px;height:28px;fill:var(--ink);stroke:var(--ink)}.icon-btn.sound{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:calc(12px + env(safe-area-inset-right,0px));z-index:5}.icon-btn.sound .cross,.icon-btn.sound[aria-pressed=false] .wave{display:none}.icon-btn.sound[aria-pressed=false] .cross{display:block}.hint{position:absolute;left:0;right:0;margin-inline:auto;width:fit-content;bottom:calc(22px + env(safe-area-inset-bottom,0px));max-width:min(92vw,680px);padding:10px 20px;border-radius:22px;border:2px solid var(--ink);background:var(--paper);font-size:15px;font-weight:600;text-align:center;line-height:1.3;animation:rise var(--rise) both}.hint[hidden]{display:none}.hint.fade{opacity:0;transition:opacity .4s ease-out}.overlay{position:absolute;inset:0;display:flex;padding:16px;background:#bfe6f78c;overflow:auto;z-index:4}.overlay[hidden]{display:none}.card{width:100%;max-width:560px;padding:28px 28px 24px;border-radius:24px;border:2px solid var(--ink);background:var(--paper);box-shadow:0 12px 40px #2e3b5e2e;animation:rise var(--rise) both;text-align:center;margin:auto}.card.narrow{max-width:420px}@keyframes rise{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.eyebrow{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;opacity:.8}h1,h2{font-family:var(--serif);font-weight:700;margin:0 0 12px;line-height:1.05;letter-spacing:-.01em}h1{font-size:clamp(34px,7vw,52px)}h2{font-size:clamp(30px,6vw,40px)}.lede{margin:0 auto 20px;max-width:42ch;font-size:16px;line-height:1.45}.modes{display:grid;gap:12px;margin-bottom:20px}.btn{min-height:56px;padding:10px 22px;border-radius:16px;border:2px solid var(--ink);background:#fff;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:15px;transition:transform .12s ease-out,background .12s ease-out,box-shadow .12s ease-out;box-shadow:0 3px 0 var(--ink)}.btn:hover{transform:translateY(-1px)}.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}.btn.primary{background:var(--peach)}.btn.quiet{background:transparent;box-shadow:none}.btn .btn-sub{font-size:12px;font-weight:600;letter-spacing:.06em;opacity:.75;text-transform:none}.stack{display:grid;gap:10px}:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.btn:focus-visible{outline-offset:4px}.howto{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:6px;text-align:left;font-size:15px;line-height:1.4}.howto li{display:flex;gap:10px;align-items:baseline}.howto b{flex:0 0 24px;height:24px;border-radius:50%;background:var(--hay);border:2px solid var(--ink);display:inline-grid;place-items:center;font-size:12px;line-height:1;align-self:center}.controls{margin:0;font-size:13px;line-height:1.7;opacity:.85}.controls-touch{display:none}@media(pointer:coarse){.controls-keys{display:none}.controls-touch{display:block}}@media(max-width:400px){.badge-word{display:none}}kbd{font:inherit;font-weight:700;font-size:12px;padding:1px 6px;border-radius:6px;border:1.5px solid var(--ink);background:#fff;box-shadow:0 1.5px 0 var(--ink)}.big-score{font-family:var(--serif);font-size:56px;font-weight:700;line-height:1;margin:6px 0 14px;display:flex;flex-direction:column;align-items:center;gap:8px}.newbest{font-family:var(--sans);font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;background:var(--hay);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;animation:badge-pop .25s cubic-bezier(.34,1.56,.64,1) both}.newbest[hidden]{display:none}.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;margin:0 0 14px}.stats div{background:#2e3b5e0f;border-radius:12px;padding:8px 10px}.stats dt{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}.stats dd{margin:2px 0 0;font-family:var(--serif);font-size:24px;font-weight:700}.rank{margin:0 0 18px;font-family:var(--serif);font-size:20px;font-style:italic}.all-games{position:absolute;left:calc(14px + env(safe-area-inset-left,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;color:var(--ink);text-decoration:none;font-size:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;border-radius:999px;background:var(--paper);border:2px solid var(--ink)}#app[data-screen=play] .all-games{display:none}#app:not([data-screen=play]) .hint{display:none}@media(max-width:600px){.hud-tr{flex-direction:column-reverse;align-items:flex-end;gap:8px}.badge{font-size:11px;padding:3px 9px;letter-spacing:.04em}}@media(max-width:480px){.overlay{padding:72px 12px 68px}.card{padding:22px 18px 18px;border-radius:20px}.btn{font-size:13.5px;padding:10px 14px;letter-spacing:.06em}.eyebrow{font-size:11px;letter-spacing:.1em}.clock{font-size:24px}.score{font-size:30px}.daybar{width:90px}.bag i{width:18px;height:14px}.lede{font-size:15px}.howto{font-size:14px}.controls{font-size:12px}.hint{font-size:14px}}@media(max-height:520px){.overlay{padding:10px 10px 10px 150px}.all-games{bottom:auto;top:10px}.card{padding:16px 18px 14px}h1{font-size:30px;margin-bottom:8px}.lede{margin-bottom:12px}.howto{display:none}.modes{margin-bottom:10px}.btn{min-height:48px}}@media(prefers-reduced-motion:reduce){.card,.hint,.badge,.newbest{animation:none}.btn,.icon-btn,.score{transition:none}}
