: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:72px}.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}.moves-badge{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1}.moves-num{font-family:var(--font-mono);font-size:.85rem;font-weight:400;color:var(--ink);letter-spacing:.01em}.moves-label{font-family:var(--font-mono);font-size:.55rem;color:var(--muted);letter-spacing:.06em;text-transform:lowercase;margin-top:1px}.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}.round-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;display:flex;align-items:center;justify-content:center;background:#f7f3edeb;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:overlayIn .35s ease-out}.round-card{display:flex;flex-direction:column;align-items:center;gap:0;animation:completionContentIn .45s .1s cubic-bezier(.34,1.56,.64,1) both}.round-icon{margin-bottom:20px;opacity:.8}.round-eyebrow{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.14em;text-transform:lowercase;color:var(--muted);margin-bottom:12px}.round-score{display:flex;flex-direction:column;align-items:center;gap:2px;margin-bottom:10px}.round-score-num{font-family:var(--font-display);font-size:5rem;font-weight:300;font-style:italic;color:var(--ink);line-height:1;letter-spacing:-.02em}.round-score-unit{font-family:var(--font-mono);font-size:.65rem;letter-spacing:.12em;color:var(--muted);text-transform:lowercase}.round-best{min-height:24px;display:flex;align-items:center;margin-bottom:32px}.round-new-best{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.06em;color:var(--correct);animation:streakPop .4s .5s cubic-bezier(.34,1.56,.64,1) both}.round-prev-best{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted)}.round-play-again{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;text-transform:lowercase;color:var(--ink);background:none;border:1px solid rgba(30,58,76,.25);border-radius:24px;padding:10px 28px;cursor:pointer;transition:background .15s,border-color .15s,opacity .15s;opacity:.85}.round-play-again:hover{background:#1e3a4c0d;border-color:#1e3a4c73;opacity:1}.round-play-again:active{opacity:.55}@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)}