:root{--bg: #1b1310;--surface: #2a1e18;--surface-hover: #33251d;--border: #46342a;--text: #f6ece0;--muted: #bba795;--accent: #46d6b4;--accent-text: #062a22;--sun: #ffc861;--radius: 14px;color-scheme:dark}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;background:#120c0a;color:var(--text);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}html.playing,html.playing body{overflow:hidden;overscroll-behavior:none}button,input{font:inherit;color:inherit}button{border:0;background:none;cursor:pointer}a{color:inherit}h1,h2,p{margin:0}:focus-visible{outline:3px solid var(--sun);outline-offset:2px}.app{position:relative;max-width:480px;height:var(--app-height, 100dvh);margin:0 auto;background:radial-gradient(120% 70% at 50% 0%,#3a2618 0%,var(--bg) 60%);overflow:hidden}@media(orientation:landscape)and (min-width:700px){.app{max-width:1100px}.screen:not(.play)>*{width:100%;max-width:560px;margin-left:auto;margin-right:auto}}@media(min-width:520px){.app{border-left:1px solid var(--border);border-right:1px solid var(--border)}}.screen{position:absolute;inset:0;display:flex;flex-direction:column;padding:calc(12px + env(safe-area-inset-top,0px)) 16px calc(16px + env(safe-area-inset-bottom,0px))}.scroll{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:0 -16px;padding:0 16px 12px}.spacer{flex:1}.muted{color:var(--muted);font-size:14px}.small{font-size:12px}.topbar{display:flex;align-items:center;gap:8px;min-height:48px}.topbar h1{flex:1;font-size:17px;text-align:center}.topbar-actions{min-width:44px}.icon-button{width:44px;height:44px;flex:none;border-radius:12px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--border)}.icon-button svg{width:20px;height:20px}.btn,.button{min-height:52px;padding:0 18px;border-radius:var(--radius);font-weight:700;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;text-decoration:none}.btn.primary{background:var(--accent);border-color:transparent;color:var(--accent-text)}.btn:disabled{opacity:.4}.btn:active,.mode.primary:active,.icon-button:active{transform:scale(.98)}.link{color:var(--accent);font-weight:600}.hero{flex:none;padding:4px 0 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.logo{font-size:clamp(44px,15vw,60px);font-weight:800;letter-spacing:-.03em;margin:6px 0 2px;color:var(--sun)}.tagline{color:var(--muted);font-size:15px}.modes{display:grid;gap:10px}.mode{display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 14px;text-align:left;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}.mode.primary{background:linear-gradient(135deg,#4a3016,#2a1d14);border-color:#ffb84d8c}.mode.disabled{opacity:.6}.mode-icon{flex:0 0 40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;background:#3a2a20}.mode-icon svg{width:22px;height:22px}.mode.primary .mode-icon{background:#5a4223}.mode-icon.c1{background:#22402a}.mode-icon.c2{background:#1f3846}.mode-icon.plum{background:#3a2333}.mode-text{flex:1;display:flex;flex-direction:column}.mode-text b{font-size:16px}.mode-text small{font-size:13px;color:var(--muted)}.chevron{font-size:22px}.badge{font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;background:#2a3150;color:var(--muted);margin-left:6px;vertical-align:2px}.controls-hint{margin-top:12px;text-align:center;font-size:13px;color:var(--muted)}@media(max-height:640px){.hero-art{zoom:.62}.logo{font-size:40px}.mode{min-height:56px}}.pausebox{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#120a069e;backdrop-filter:blur(4px);z-index:5}.pausebox .card{width:min(320px,86%);display:grid;gap:10px;padding:18px;text-align:center;border-radius:18px;background:var(--surface);border:1px solid var(--border)}.pausebox h2{margin:4px 0 6px}.pausebox .legal-links{font-size:13px}.result-top{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.pill{display:inline-block;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700;background:#ffd16624;color:var(--sun)}.pill.invisible{visibility:hidden}.big{font-size:clamp(64px,22vw,92px);font-weight:800;letter-spacing:-.04em;line-height:1;margin:14px 0 4px;font-variant-numeric:tabular-nums}.big small{font-size:.35em;color:var(--muted);margin-left:4px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:22px}.stat{padding:12px 8px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}.stat b{display:block;font-size:20px;font-variant-numeric:tabular-nums}.stat span{font-size:12px;color:var(--muted)}.actions{display:grid;grid-template-columns:1fr 2fr;gap:10px}.label{margin-top:12px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.setting{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:8px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}.setting small{display:block;font-size:12px;color:var(--muted)}.setting input{width:22px;height:22px;accent-color:var(--accent)}.consent{position:absolute;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:10;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--border);box-shadow:0 12px 30px #0006;font-size:14px}.consent .row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}.hero-art{position:relative;width:280px;height:180px}.hero-cauldron{position:absolute;left:55px;top:14px;filter:drop-shadow(0 0 26px rgba(70,214,180,.35))}.hero-art .sprite{position:absolute;filter:drop-shadow(0 6px 8px rgba(0,0,0,.35))}.hero-art .a1{left:4px;top:30px;z-index:1}.hero-art .a2{left:222px;top:22px;z-index:1}.hero-art .a3{left:18px;top:112px;z-index:1;transform:rotate(-12deg)}.hero-art .a4{left:210px;top:106px;z-index:1}.app:not(.reduced-motion) .hero-art .sprite{animation:bob 4s ease-in-out infinite}.app:not(.reduced-motion) .hero-art .sprite:nth-child(2n){animation-delay:-2s}@keyframes bob{50%{translate:0 -5px}}.sprite{display:inline-block;flex:none;background-repeat:no-repeat}.mode-icon .sprite{display:block}.star-pill{padding:6px 12px;border-radius:999px;background:var(--surface);border:1px solid var(--border);font-size:14px;font-weight:700;color:var(--sun);font-variant-numeric:tabular-nums}.badge.warm{background:#ffb84d29;color:var(--sun)}.stars{letter-spacing:.08em;color:#5e4a3c;white-space:nowrap}.stars .on{color:var(--sun)}.home-links{display:grid;margin-top:10px}.home-links .btn{min-height:48px}.center{text-align:center}.level-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:8px}.level-tile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border)}.level-tile b{font-size:26px;line-height:1.1}.level-tile small{font-size:12px;color:var(--muted)}.level-tile.next{border-color:#ffb84d99}.level-tile.locked{opacity:.45}.level-tile svg{width:16px;height:16px;color:var(--muted)}.play{padding:calc(8px + env(safe-area-inset-top,0px)) 12px calc(10px + env(safe-area-inset-bottom,0px));gap:8px}.play-top{display:flex;gap:8px;align-items:stretch}.play-top .icon-button{height:auto;min-height:48px}.box{flex:1;min-width:0;padding:6px 10px;border-radius:12px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column}.box.wide{flex:2}.box b{font-size:20px;font-variant-numeric:tabular-nums;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.box span{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}.box:first-of-type b{color:var(--sun)}.stage{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.stage canvas{position:absolute;inset:0;display:block;width:100%;height:100%}.banner{position:absolute;left:50%;top:14px;translate:-50% 0;padding:6px 14px;border-radius:999px;background:#0e111bb8;font-weight:700;font-size:14px;white-space:nowrap;pointer-events:none;animation:banner 2.4s ease forwards}@keyframes banner{0%,70%{opacity:1}to{opacity:0}}.help{position:absolute;left:50%;top:54px;translate:-50% 0;max-width:calc(100% - 24px);padding:5px 12px;border-radius:999px;background:#0e111b9e;color:#e6e9f2;font-size:13px;text-align:center;pointer-events:none}.result-title{margin-top:6px;font-size:30px}.result-stars{margin-top:10px}.app:not(.reduced-motion) .result-stars .on{display:inline-block;animation:pop .5s ease backwards}.result-stars .on:nth-child(2){animation-delay:.2s}.result-stars .on:nth-child(3){animation-delay:.4s}@keyframes pop{0%{transform:scale(0)}70%{transform:scale(1.25)}}.result .big{font-size:clamp(48px,16vw,68px);margin-top:10px}.hint-line{margin-top:12px}.again{margin-top:10px;align-self:center;min-height:44px}.setting input.range{width:50%;height:auto;accent-color:var(--accent)}.topbar h1 small{display:block;font-size:12px;font-weight:500;color:var(--muted)}@media(max-height:600px){.hero-art{display:none}}.play-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.recipe{display:flex;flex-direction:column;gap:6px;padding:8px 10px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}.recipe-title{display:none;font-size:15px}.recipe-title small{margin-left:6px;font-size:12px;font-weight:500;color:var(--muted)}.recipe ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}.recipe li{display:flex;align-items:center;gap:6px;font-size:14px}.recipe li img,.recipe li .sprite,.recipe li svg{flex:none}.recipe li b{font-variant-numeric:tabular-nums}.recipe li.done b{color:var(--accent)}.goal-text{color:var(--muted);font-size:13px}.goal-soot{display:inline-block;border-radius:50%;background:radial-gradient(circle,#080605 35%,#0806051a 72%)}.goal-mix{display:inline-flex}.gauge{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.gauge-bar{flex:1;height:7px;border-radius:4px;background:#1a2a27;overflow:hidden}.gauge-bar div{height:100%;border-radius:4px;background:linear-gradient(90deg,#2fae91,#8ff5d8);transition:width .3s ease}.gauge b{min-width:32px;text-align:right;color:var(--text);font-variant-numeric:tabular-nums}.box .arrow{color:var(--sun)}.box .stars{font-size:11px}.stage canvas:focus-visible{outline:none}.stage:has(canvas:focus-visible){box-shadow:inset 0 0 0 2px #ffc86180}.app:not(.reduced-motion) .stage.tilt-left canvas{animation:tilt-left .45s ease}.app:not(.reduced-motion) .stage.tilt-right canvas{animation:tilt-right .45s ease}.app:not(.reduced-motion) .stage.tilt-down canvas{animation:tilt-down .45s ease}.app:not(.reduced-motion) .stage.tilt-up canvas{animation:tilt-up .45s ease}@keyframes tilt-left{35%{transform:rotate(-3.5deg) translate(-4px)}}@keyframes tilt-right{35%{transform:rotate(3.5deg) translate(4px)}}@keyframes tilt-down{35%{transform:perspective(700px) rotateX(-9deg) translateY(4px)}}@keyframes tilt-up{35%{transform:perspective(700px) rotateX(9deg) translateY(-4px)}}.toast{position:absolute;left:50%;bottom:12px;translate:-50% 0;max-width:calc(100% - 24px);padding:8px 14px;border-radius:999px;background:#3a2612eb;border:1px solid rgba(255,200,97,.5);color:var(--sun);font-size:14px;font-weight:700;text-align:center;pointer-events:none}.banner{background:#3a2612d9;color:var(--sun);animation:none}.tools{display:flex;gap:8px}.tool{position:relative;flex:1;min-height:52px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;background:var(--surface);border:1px solid var(--border);font-size:14px;font-weight:700}.tool svg{width:20px;height:20px}.tool .count{min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:var(--sun);color:#2a1a05;font-size:12px;line-height:20px}.tool:disabled{opacity:.4}.tool:active:not(:disabled){transform:scale(.97)}.card.intro p{color:var(--muted);margin-bottom:6px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}@media(orientation:landscape)and (min-width:700px),(orientation:landscape)and (max-height:500px){.play-body{flex-direction:row}.recipe{flex:0 0 220px;align-self:flex-start}.recipe-title{display:block}.recipe ul{flex-direction:column}.gauge{margin-top:6px}.play-top,.tools{max-width:560px;width:100%;margin:0 auto}}@media(orientation:landscape)and (max-height:500px){.app{max-width:none}.play-top .box span{display:none}.tool{min-height:40px}}.chapter .level-grid{grid-template-columns:repeat(4,1fr)}.level-tile{position:relative}.level-tile .new{position:absolute;top:4px;right:6px;font-size:10px;color:var(--accent);font-weight:700}.book-entry{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}.book-entry.unknown{opacity:.6}.book-entry.unknown .mix-icon{filter:grayscale(1) brightness(.6)}.mix-icon{display:inline-flex;align-items:center;flex:none}.mix-icon .plus{margin:0 1px;color:var(--muted);font-weight:700}.discovered{margin-top:10px}.mix-line{display:flex;align-items:center;gap:8px;justify-content:center}.result-top img.dim{filter:saturate(.4) brightness(.8)}.app:not(.reduced-motion) .result-top img.bubbling{animation:bob 2.4s ease-in-out infinite}.result .scroll{justify-content:center}.app.contrast{--surface: #33251c;--border: #9a7a5c;--muted: #e2d3c2}.pl-info{color:#e3d6c6}.legal-links{margin:4px 0}.share-note{position:fixed;z-index:20;left:50%;top:calc(64px + env(safe-area-inset-top,0px));translate:-50% 0;max-width:calc(100% - 32px);padding:8px 14px;border-radius:999px;background:#3a2612eb;border:1px solid rgba(255,200,97,.5);color:var(--sun);font-size:14px;font-weight:700;pointer-events:none}