:root{--bg: #F7F3ED;--ink: #1E3A4C;--ink-faint: #C8BFB0;--correct: #4A7B6F;--accent: #C4612A;--text: #2C3E35;--muted: #8A8070;--font-display: "Fraunces", Georgia, serif;--font-mono: "DM Mono", "Courier New", monospace;--radius: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:var(--font-mono);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{user-select:none;-webkit-user-select:none}#root{height:100%;height:100dvh}.app{position:relative;display:flex;flex-direction:column;height:100dvh;max-width:430px;margin:0 auto;background:var(--bg);overflow:hidden}.grain{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:100;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}.hud{flex-shrink:0;padding:16px 20px 0;z-index:10}.hud-top{display:flex;align-items:center;justify-content:space-between;gap:8px}.hud-left,.hud-right{display:flex;align-items:center;gap:8px;min-width:56px}.hud-right{justify-content:flex-end}.hud-center{flex:1;text-align:center}.game-title{font-family:var(--font-display);font-size:1.6rem;font-weight:300;font-style:italic;letter-spacing:.04em;color:var(--ink);line-height:1;opacity:.85}.level-badge{font-family:var(--font-mono);font-size:.72rem;color:var(--muted);letter-spacing:.03em}.level-num{color:var(--ink);font-weight:400}.level-denom{opacity:.5}.streak-badge{display:inline-flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:.72rem;font-weight:400;color:var(--accent);padding:2px 6px;border-radius:20px;border:1px solid currentColor;opacity:.85;animation:streakPop .3s cubic-bezier(.34,1.56,.64,1)}.mute-btn{display:flex;align-items:center;justify-content:center;background:none;border:none;padding:6px;cursor:pointer;color:var(--muted);border-radius:6px;transition:color .15s,opacity .15s;opacity:.75}.mute-btn:hover{color:var(--ink);opacity:1}.mute-btn:active{opacity:.5}.puzzle-info{padding:12px 4px 8px;text-align:center}.puzzle-title{font-family:var(--font-display);font-size:1.1rem;font-weight:400;font-style:italic;color:var(--ink);opacity:.75;margin-bottom:2px;letter-spacing:.02em}.puzzle-hint{font-family:var(--font-mono);font-size:.68rem;font-weight:300;color:var(--muted);letter-spacing:.08em;text-transform:lowercase}.completion-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;cursor:pointer;background:transparent;animation:overlayIn .25s ease-out}.completion-content{display:flex;flex-direction:column;align-items:center;gap:8px;animation:completionContentIn .4s .1s cubic-bezier(.34,1.56,.64,1) both}.completion-icon{filter:drop-shadow(0 4px 14px rgba(74,123,111,.25))}.completion-label{font-family:var(--font-display);font-size:1rem;font-style:italic;font-weight:300;color:var(--correct);letter-spacing:.04em;opacity:.85}.completion-count{font-family:var(--font-mono);font-size:.65rem;color:var(--muted);letter-spacing:.1em}@keyframes correctPulse{0%,to{opacity:.06;r:attr(r)}50%{opacity:.14}}@keyframes nodeFloatUp{0%{transform:translateY(0) scale(1);opacity:1}40%{transform:translateY(-18px) scale(.95);opacity:.9}to{transform:translateY(-44px) scale(.8);opacity:0}}@keyframes streakPop{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:.85}}@keyframes overlayIn{0%{opacity:0}to{opacity:1}}@keyframes completionContentIn{0%{transform:scale(.7) translateY(12px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}@keyframes drawCheck{0%{stroke-dashoffset:32}to{stroke-dashoffset:0}}@keyframes puzzleIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes correctScalePulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@media (min-width: 500px){html,body{display:flex;align-items:center;justify-content:center;background:#ede8e0;padding:32px;height:100dvh;overflow:hidden}#root{display:flex;align-items:center;justify-content:center;width:100%;height:100%}.app{max-width:720px;width:100%;height:calc(100dvh - 64px);max-height:880px;border-radius:26px;overflow:hidden;padding-top:10px;box-shadow:0 0 0 1px #c8bfb073,0 8px 48px #1e3a4c1a,0 2px 8px #1e3a4c0f}}.hud{padding-top:calc(16px + env(safe-area-inset-top));padding-left:calc(20px + env(safe-area-inset-left));padding-right:calc(20px + env(safe-area-inset-right))}.completion-overlay{padding-bottom:env(safe-area-inset-bottom)}