:root{--bg:#231b18;--ink:#f4e9d8;--muted:#c9b8a2;--accent:#e8a33d;--accent-ink:#2b1a07;--card:#231b18f0;--ok:#5fbf6a;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow:hidden}#app{position:fixed;inset:0}#scene{touch-action:none;cursor:grab;width:100%;height:100%;position:absolute;inset:0}#scene:active{cursor:grabbing}.hud-top{padding:max(10px, env(safe-area-inset-top)) 16px 0;pointer-events:none;flex-wrap:wrap;align-items:center;gap:8px 16px;display:flex;position:absolute;top:0;left:0;right:0}.hud-top h1{letter-spacing:.02em;color:var(--accent);margin:0;font-size:1.25rem}.steps{gap:6px;margin:0;padding:0;font-size:.85rem;list-style:none;display:flex}.steps li{color:var(--muted);background:#ffffff12;border-radius:999px;padding:3px 10px}.steps li.active{background:var(--accent);color:var(--accent-ink);font-weight:700}.steps li.done{color:var(--ok)}.message{min-height:1.3em;color:var(--ink);text-shadow:0 1px 3px #000;flex-basis:100%;margin:0;font-size:.95rem;transition:opacity .3s}.hud-bottom{padding:0 16px max(16px, env(safe-area-inset-bottom));pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.action{pointer-events:auto;touch-action:none;background:var(--accent);min-width:min(320px,100%);color:var(--accent-ink);cursor:pointer;border:0;border-radius:16px;padding:16px 28px;font:700 1.1rem system-ui,sans-serif;box-shadow:0 4px #a86c17,0 8px 20px #0006}.action:active,.action.held{transform:translateY(3px);box-shadow:0 1px #a86c17,0 4px 10px #0006}.action.idle{opacity:.5}.action:focus-visible{outline:3px solid var(--ink);outline-offset:3px}.gauge{background:#0000008c;border-radius:9px;width:min(320px,100%);height:18px;position:relative;overflow:hidden}.gauge-zone{background:#5fbf6a99;width:17.5%;position:absolute;top:0;bottom:0;left:36.25%}.pour-zone{width:12.5%;left:56.25%}.gauge-bar{background:#f4e9d873;width:0;position:absolute;top:0;bottom:0;left:0}.gauge-fill{background:var(--ink);border-radius:2px;width:3px;position:absolute;top:3px;bottom:3px;left:0}.gauge-label{color:var(--muted);font-size:.7rem;line-height:18px;position:absolute;top:0;right:8px}.overlay{background:#00000073;place-items:center;padding:16px;display:grid;position:absolute;inset:0}.overlay[hidden]{display:none}.card{background:var(--card);text-align:center;border-radius:20px;width:min(520px,100%);max-height:100%;padding:24px;overflow:auto;box-shadow:0 20px 60px #00000080}.card h2{color:var(--accent);margin:0 0 4px;font-size:1.8rem}.hint{color:var(--muted);font-size:.85rem}.mode{cursor:pointer;border:2px solid #ffffff26;border-radius:999px;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content;margin:0 auto 14px;padding:6px 14px;font-size:.95rem;transition:background .2s,border-color .2s;display:flex}.mode:has(input:checked){background:#e05a4733;border-color:#e05a47}.mode input{accent-color:#e05a47;width:18px;height:18px;margin:0}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}kbd{font:inherit;background:#ffffff1f;border-radius:4px;padding:1px 6px}.stars{letter-spacing:.15em;color:var(--accent);margin:0;font-size:2rem}.total{margin:4px 0 12px;font-size:3rem;font-weight:800}.total small{color:var(--muted);font-size:1rem}.scores{border-collapse:collapse;min-width:60%;margin:0 auto 12px}.scores th,.scores td{text-align:left;padding:4px 8px}.scores td{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}.details{color:var(--muted);margin:0 0 8px;padding:0;font-size:.85rem;line-height:1.5;list-style:none}.intro-card{padding-top:20px}.intro-pan{aspect-ratio:1;perspective:400px;background:radial-gradient(circle,#3b3b3e 58%,#1d1d1f 72%,#4a4a4e 74%,#2a2a2c);border-radius:50%;width:96px;margin:0 auto 8px;animation:2.4s ease-in-out infinite pan-bob;position:relative;box-shadow:0 8px 18px #00000080}.intro-crepe{background:radial-gradient(circle at 38% 40%,#b8792f 0 5%,#0000 6%),radial-gradient(circle at 64% 60%,#b8792f 0 7%,#0000 8%),radial-gradient(circle,#ebb862,#d9a04c 70%,#c98c3c);border-radius:50%;animation:2.4s cubic-bezier(.3,0,.4,1) infinite crepe-hop;position:absolute;inset:13%}.card .intro-title{text-shadow:0 3px #7a4a12;font-size:clamp(2rem,9vw,2.6rem);font-weight:900}.intro-steps{justify-content:center;gap:8px;margin:10px 0 18px;padding:0;list-style:none;display:flex}.intro-steps li{min-width:84px;color:var(--muted);background:#ffffff0f;border-radius:14px;flex-direction:column;align-items:center;gap:2px;padding:8px 6px;font-size:.85rem;font-weight:700;display:flex}.intro-steps span{font-size:1.7rem;animation:2.4s ease-in-out infinite step-pop}.intro-steps li:nth-child(2) span{animation-delay:.8s}.intro-steps li:nth-child(3) span{animation-delay:1.6s}.play{margin-bottom:14px;font-size:1.25rem;animation:1.6s ease-in-out infinite play-pulse}.play:active{animation:none}.howto,.board-box{text-align:left;margin-top:8px}.howto summary,.board-box summary{text-align:center;color:var(--accent);cursor:pointer;font-weight:700}.howto ul{margin:10px 0 4px;padding:0;font-size:.9rem;line-height:1.4;list-style:none}.howto li{gap:10px;margin-bottom:8px;display:flex}.howto li span{flex-shrink:0}@media (hover:none) and (pointer:coarse){.howto .mouse-only{display:none}}@media not ((hover:none) and (pointer:coarse)){.howto .touch-only{display:none}}@keyframes pan-bob{0%,20%,to{transform:none}10%{transform:translateY(4px)rotate(-4deg)}}@keyframes crepe-hop{0%,12%{transform:none}40%{transform:translateY(-70%)rotateX(180deg)scale(1.15)}62%{transform:translateY(0)rotateX(360deg)}68%{transform:scale(1.08,.92)}74%,to{transform:none}}@keyframes step-pop{0%,30%,to{transform:none}12%{transform:translateY(-5px)scale(1.2)}}@keyframes play-pulse{50%{transform:scale(1.04)}}.player{flex-direction:column;align-items:center;gap:6px;margin:0 0 14px;display:flex}.player label{font-weight:700}.player input{width:min(280px,100%);color:var(--ink);text-align:center;-webkit-user-select:text;user-select:text;background:#00000059;border:2px solid #ffffff26;border-radius:12px;padding:10px 14px;font:600 1rem system-ui,sans-serif}.player input:focus{border-color:var(--accent);outline:none}.player input.invalid{border-color:#e05a47}.error{color:#f08a78;margin:0;font-size:.85rem}.error[hidden]{display:none}.link{color:var(--muted);font:inherit;cursor:pointer;background:0 0;border:0;margin:12px auto 0;padding:4px 8px;font-size:.85rem;text-decoration:underline;display:block}.board-title{color:var(--accent);margin:8px 0 6px;font-size:1rem}.board-mode{color:var(--muted);font-size:.85em;font-weight:400}.board{counter-reset:rank;text-align:left;width:min(320px,100%);margin:8px auto 14px;padding:0;font-size:.95rem;list-style:none}.board li{counter-increment:rank;border-radius:8px;gap:10px;padding:4px 10px;display:flex}.board li:nth-child(odd){background:#ffffff0d}.board li:before{content:counter(rank) ".";min-width:1.8em;color:var(--muted);font-variant-numeric:tabular-nums}.board li:first-child:before{content:"🥇"}.board li:nth-child(2):before{content:"🥈"}.board li:nth-child(3):before{content:"🥉"}.board .name{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}.board .pts{font-variant-numeric:tabular-nums;font-weight:700}.board li.me{background:var(--accent);color:var(--accent-ink);animation:.6s ease-out board-pop}.board li.me:before{color:inherit}.board .empty{color:var(--muted);background:0 0;justify-content:center}.board .empty:before{content:none}@keyframes board-pop{0%{opacity:0;transform:scale(.9)}60%{transform:scale(1.04)}}.splash{z-index:10;background:radial-gradient(circle at 50% 40%, #3a2a22, var(--bg) 70%);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:16px;animation:.45s ease-in 1.9s forwards splash-out;display:flex;position:absolute;inset:0}.splash.done{display:none}.splash-pan{perspective:600px;aspect-ratio:1;width:min(42vw,180px);animation:.45s cubic-bezier(.2,1.4,.4,1) both pan-in,.3s ease-in-out .55s pan-toss;position:relative}.splash-handle{background:linear-gradient(#5a3a24,#3b2416);border-radius:0 999px 999px 0;width:70%;height:12%;position:absolute;top:44%;left:88%}.splash-dish{background:radial-gradient(circle,#3b3b3e 58%,#1d1d1f 72%,#4a4a4e 74%,#2a2a2c);border-radius:50%;position:absolute;inset:0;box-shadow:0 14px 30px #0009}.splash-crepe{background:radial-gradient(circle at 38% 40%,#b8792f 0 5%,#0000 6%),radial-gradient(circle at 64% 60%,#b8792f 0 7%,#0000 8%),radial-gradient(circle at 58% 30%,#c4873a 0 4%,#0000 5%),radial-gradient(circle,#ebb862,#d9a04c 70%,#c98c3c);border-radius:50%;animation:.95s cubic-bezier(.3,0,.4,1) .6s both crepe-flip;position:absolute;inset:13%}.splash-steam{justify-content:space-between;display:flex;position:absolute;bottom:70%;left:25%;right:25%}.splash-steam i{filter:blur(4px);opacity:0;background:#ffffff59;border-radius:999px;width:10px;height:40px;animation:.9s ease-out 1.5s steam}.splash-steam i:nth-child(2){animation-delay:1.6s}.splash-steam i:nth-child(3){animation-delay:1.55s}.splash-title{letter-spacing:.02em;color:var(--accent);text-shadow:0 4px #7a4a12,0 10px 30px #0009;margin:0;font-size:clamp(2.2rem,11vw,3.6rem);font-weight:900}.splash-title span{animation:.5s cubic-bezier(.2,1.6,.4,1) .9s both title-drop;display:inline-block}.splash-title span+span{animation-delay:1.05s}.splash-tag{color:var(--muted);letter-spacing:.2em;text-transform:uppercase;margin:0;font-size:.8rem;animation:.4s ease-out 1.3s both fade-up}@keyframes pan-in{0%{opacity:0;transform:translateY(40px)scale(.6)}}@keyframes pan-toss{50%{transform:translateY(-10px)rotate(-6deg)}}@keyframes crepe-flip{0%{transform:translateY(0)rotateX(0)scale(1)}50%{transform:translateY(-120%)rotateX(180deg)scale(1.15)}85%{transform:translateY(0)rotateX(360deg)scale(1)}92%{transform:scale(1.06,.94)}to{transform:none}}@keyframes steam{0%{opacity:0;transform:translateY(10px)}40%{opacity:1}to{opacity:0;transform:translateY(-30px)}}@keyframes title-drop{0%{opacity:0;transform:translateY(-60px)scale(1.4)}}@keyframes fade-up{0%{opacity:0;transform:translateY(8px)}}@keyframes splash-out{to{opacity:0;visibility:hidden}}@keyframes card-in{0%{opacity:0;transform:translateY(24px)scale(.96)}}#intro .card{animation:.4s ease-out 1.95s both card-in}.skip-intro #intro .card{animation-delay:0s}@media (prefers-reduced-motion:reduce){.splash{display:none}#intro .card,.intro-pan,.intro-crepe,.intro-steps span,.play{animation:none}}.board-note{text-align:center;margin:-8px 0 12px}.board-note:empty{display:none}.board-box .open-full{margin:-4px auto 0}.tabs{background:#ffffff12;border-radius:999px;gap:4px;margin:8px 0 4px;padding:4px;display:inline-flex}.tabs button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:999px;padding:6px 16px;font:600 .95rem system-ui,sans-serif}.tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink)}#board-full li:before{min-width:2.6em}#full-more{margin:-4px auto 14px}.link[hidden]{display:none}#fullboard .card{flex-direction:column;align-items:center;display:flex}#fullboard .card>*{flex-shrink:0}#fullboard #board-full{overscroll-behavior:contain;flex:0 auto;min-height:0;overflow-y:auto}.mute{top:max(6px, env(safe-area-inset-top));cursor:pointer;pointer-events:auto;background:#00000059;border:0;border-radius:50%;width:40px;height:40px;font-size:1.2rem;line-height:1;position:absolute;right:10px}.mute:focus-visible{outline:2px solid var(--ink)}