:root{--bg:#f4f7f4;--card:#fff;--text:#27312a;--muted:#7a837d;--green:#69bf7d;--green-dark:#408d55;--line:#dfe6e0;--danger:#df5e54;--raw:#a9ada9;--early:#55a3da;--perfect:#52b86d;--late:#e69a43;--burnt:#5a3d32;--safe-bottom:max(env(safe-area-inset-bottom),10px);--safe-top:max(env(safe-area-inset-top),8px)}
*{box-sizing:border-box}html,body{height:100%;overscroll-behavior:none}body{margin:0;color:var(--text);background:#e8ede9;font-family:system-ui,-apple-system,"Segoe UI","Hiragino Sans","Yu Gothic UI","Yu Gothic",sans-serif;-webkit-font-smoothing:antialiased}button,a{font:inherit}button{color:inherit}a{color:inherit;text-decoration:none}:focus-visible{outline:3px solid rgba(82,184,109,.42);outline-offset:3px}.app-shell{position:relative;width:100%;height:100dvh;min-height:600px;max-width:520px;margin:auto;overflow:hidden;background:var(--bg);box-shadow:0 0 38px rgba(30,48,35,.12)}.screen{display:none;width:100%;height:100%}.screen.is-active{display:flex}
.brand{position:absolute;top:calc(var(--safe-top) + 9px);left:20px;font-size:14px;font-weight:850;letter-spacing:.12em}.brand span{color:var(--green-dark)}.kicker{margin:0;color:var(--green-dark);font-size:11px;font-weight:850;letter-spacing:.23em}.start-screen{overflow-y:auto;padding:calc(var(--safe-top) + 55px) 20px calc(var(--safe-bottom) + 18px);text-align:center;background:radial-gradient(circle at 80% 8%,rgba(105,191,125,.17),transparent 24%),linear-gradient(160deg,#fff 0,#f4f8f4 62%,#edf5ee 100%)}.start-inner{width:100%;max-width:420px;margin:auto}.start-screen h1{margin:10px 0 10px;font-size:clamp(30px,9vw,42px);line-height:1.12;letter-spacing:-.055em}.lead{margin:0 auto;color:#606a63;font-size:clamp(12px,3.35vw,14px);line-height:1.75}.hint{margin:12px auto 18px;color:var(--muted);font-size:11px;line-height:1.65}.start-pot{position:relative;width:150px;height:102px;margin:17px auto 4px}.start-pot::before{content:"";position:absolute;inset:20px 4px 0;border:8px solid #596660;border-radius:48% 48% 42% 42%;background:radial-gradient(circle at 30% 28%,#fff 0 2px,transparent 3px),radial-gradient(circle at 62% 62%,#fff 0 3px,transparent 4px),#a7e0e4;box-shadow:inset 0 0 0 5px #d7e1dc,0 8px 16px rgba(48,63,54,.15)}.start-pot::after{content:"";position:absolute;left:-15px;right:-15px;top:59px;height:13px;border-radius:8px;background:#596660;z-index:-1}.start-pot>i{position:absolute;left:56px;top:0;width:10px;height:29px;border-radius:50%;border-left:3px solid rgba(124,139,130,.42);transform:rotate(15deg)}
.legend{display:flex;justify-content:center;gap:clamp(4px,2vw,10px)}.legend-item{min-width:0;display:grid;justify-items:center;gap:4px;color:var(--muted);font-size:9px;white-space:nowrap}.legend-potato,.potato{position:relative;display:block;background:#d0a062;border:2px solid rgba(102,67,30,.13);border-radius:48% 52% 44% 56%;box-shadow:inset -4px -5px 8px rgba(98,56,22,.13),inset 3px 3px 5px rgba(255,255,255,.28)}.legend-potato{width:27px;height:22px}.legend-potato::before,.potato::before{content:"";position:absolute;left:25%;top:25%;width:3px;height:3px;background:rgba(100,65,33,.35);border-radius:50%;box-shadow:11px 6px 0 rgba(100,65,33,.28),4px 12px 0 rgba(100,65,33,.22)}.state-raw{filter:saturate(.45);background:#c8b69b}.state-early{background:#d9b574}.state-perfect{background:#ebc36c;box-shadow:0 0 0 2px rgba(82,184,109,.28),inset -4px -5px 8px rgba(98,56,22,.1)}.state-late{background:#c98946}.state-burnt{background:#5a3d32}.start-legend{margin:18px auto 0;padding:13px 8px;border:1px solid var(--line);border-radius:15px;background:rgba(255,255,255,.75)}.start-actions,.result-actions{display:grid;gap:9px}.primary-button,.secondary-button{min-height:49px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-weight:800;cursor:pointer}.primary-button{border:0;color:#fff;background:var(--green);box-shadow:0 7px 18px rgba(64,141,85,.2)}.primary-button span{margin-left:8px}.secondary-button{border:1px solid var(--line);background:#fff;color:#566059;font-size:13px}
.game-screen{position:relative;flex-direction:column;padding:var(--safe-top) 12px var(--safe-bottom);background:linear-gradient(#fbfcfb,#f0f5f1);touch-action:none;user-select:none}.status-bar{height:52px;display:flex;align-items:center;justify-content:space-between;padding:3px 6px 5px;border-bottom:1px solid var(--line)}.status-bar div{display:flex;flex-direction:column}.status-bar small{color:var(--green-dark);font-size:8px;font-weight:850;letter-spacing:.15em}.status-bar strong{max-width:230px;overflow:hidden;font-size:13px;text-overflow:ellipsis;white-space:nowrap}.score-box{text-align:right}.score-box strong{font-size:23px;line-height:1}.score-box em{font-size:9px;font-style:normal}.game-legend{flex:0 0 auto;margin:6px 0 7px}.game-legend .legend-item{font-size:8px}.game-legend .legend-potato{width:23px;height:18px}
.tray-panel{position:relative;flex:0 0 auto;padding:8px 10px 10px;border:1px solid var(--line);border-radius:15px;background:#fff;transition:.25s}.tray-heading{height:19px;display:flex;align-items:start;justify-content:space-between}.tray-heading h2{margin:0;color:#6d756f;font-size:9px;letter-spacing:.16em}.tray-heading h2 span{margin-left:5px;color:#959b96;letter-spacing:.04em}.tray-heading>strong{color:var(--danger);font-size:9px;letter-spacing:.16em}.tray{height:clamp(98px,17.5dvh,128px);display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);align-items:center;justify-items:center;gap:3px;padding:3px 5px;border-radius:11px;background:repeating-linear-gradient(0deg,#eef0ed 0 2px,#e4e8e3 2px 4px);box-shadow:inset 0 2px 5px rgba(55,70,59,.11)}.tray-panel.danger-7{border-color:#efb2ac;background:#fff8f7}.tray-panel.danger-8{border-color:#e9857c;background:#fff0ee}.tray-panel.danger-9{border-color:var(--danger);background:#ffe5e2;animation:danger-pulse .85s ease-in-out infinite}.tray-panel.danger-full{background:#ffd7d3;animation:danger-shake .18s linear 3}.tray-potato{display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;padding:0;touch-action:none;cursor:grab}.tray-potato .potato{transition:transform .16s,filter .16s}.tray-potato.size-s .potato{width:31px;height:27px}.tray-potato.size-m .potato{width:38px;height:32px}.tray-potato.size-l .potato{width:44px;height:37px}.tray-potato.selected .potato{transform:translateY(-2px);filter:drop-shadow(0 0 4px rgba(64,141,85,.52))}.tray-potato.selected::after{content:"✓";position:absolute;margin:-33px 0 0 31px;width:17px;height:17px;display:grid;place-items:center;color:#fff;background:var(--green);border:2px solid #fff;border-radius:50%;font-size:10px;font-weight:900}.tray-potato{position:relative}.tray-potato.drag-source{opacity:.25}
.pot-zone{position:relative;flex:1;min-height:235px;display:flex;align-items:center;justify-content:center;padding-top:12px}.pot{position:relative;width:clamp(242px,72vw,335px);aspect-ratio:1;border:10px solid #56625c;border-radius:50%;background:#dbe2de;box-shadow:inset 0 0 0 5px #aab5af,0 12px 22px rgba(38,52,43,.18);z-index:2}.water{position:absolute;inset:8px;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.45),transparent 20%),radial-gradient(circle,#a7e5e7,#7bcbd2);box-shadow:inset 0 0 20px rgba(30,128,139,.25)}.pot-handles{position:absolute;width:calc(clamp(242px,72vw,335px) + 68px);height:38px;display:flex;justify-content:space-between;z-index:1}.pot-handles i{width:43px;height:25px;border-radius:9px;background:#505d56;box-shadow:0 4px 8px rgba(30,40,33,.2)}.steam{position:absolute;top:0;left:50%;width:160px;height:80px;transform:translateX(-50%);pointer-events:none}.steam i{position:absolute;bottom:0;width:15px;height:55px;border-left:4px solid rgba(255,255,255,.85);border-radius:50%;animation:steam 2s ease-in-out infinite}.steam i:nth-child(1){left:29px}.steam i:nth-child(2){left:76px;animation-delay:.6s}.steam i:nth-child(3){right:24px;animation-delay:1.15s}.bubbles i{position:absolute;width:9px;height:9px;border:2px solid rgba(255,255,255,.64);border-radius:50%;animation:bubble 2s ease-in-out infinite}.bubbles i:nth-child(1){left:19%;top:22%}.bubbles i:nth-child(2){left:70%;top:18%;animation-delay:.5s}.bubbles i:nth-child(3){left:56%;top:71%;animation-delay:1.1s}.bubbles i:nth-child(4){left:24%;top:64%;animation-delay:1.5s}.bubbles i:nth-child(5){left:81%;top:53%;animation-delay:.8s}.pot-caption{position:absolute;z-index:3;bottom:-1px;margin:0;padding:5px 10px;color:#657069;background:rgba(255,255,255,.86);border-radius:999px;font-size:9px;font-weight:700}.cooking-potato{position:absolute;z-index:3;width:52px;height:52px;border:0;background:transparent;padding:0;transform:translate(-50%,-50%);cursor:pointer;animation:potato-float 2.4s ease-in-out infinite}.cooking-potato .potato{width:100%;height:82%}.cooking-potato.size-s{width:43px;height:43px}.cooking-potato.size-l{width:60px;height:60px}.progress-ring{position:absolute;inset:-5px;border-radius:50%;background:conic-gradient(var(--ring-color,var(--early)) var(--progress,0%),rgba(255,255,255,.62) 0);mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 0)}.cooking-potato.scooping{z-index:8;pointer-events:none;animation:scoop .48s ease-in forwards}.cooking-potato.scooping::after{content:"";position:absolute;left:-35px;top:-8px;width:92px;height:55px;border:7px solid #aab3ae;border-top:0;border-radius:0 0 50% 50%;transform:rotate(-18deg);box-shadow:46px 29px 0 -19px #7b8580}
.drag-ghost{position:fixed;z-index:1000;width:52px;height:46px;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);filter:drop-shadow(0 8px 8px rgba(40,50,43,.25))}.judgement-layer{position:absolute;z-index:20;inset:0;pointer-events:none}.judge-pop{position:absolute;left:50%;top:66%;padding:6px 11px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 5px 14px rgba(36,51,40,.13);font-size:13px;font-weight:900;transform:translate(-50%,-50%);animation:judge-pop .8s ease-out forwards}.judge-raw{color:#737975}.judge-early{color:#2984c1}.judge-perfect{color:#258e40;font-size:16px}.judge-late{color:#cc7416}.countdown{position:absolute;z-index:50;inset:0;display:none;place-items:center;background:rgba(255,255,255,.78);backdrop-filter:blur(4px)}.countdown.show{display:grid}.countdown strong{color:var(--green-dark);font-size:clamp(72px,25vw,126px);letter-spacing:-.06em;animation:count-pop .8s ease both}.gameover-flash{position:absolute;z-index:45;left:50%;top:50%;display:none;width:max-content;max-width:90%;padding:13px 20px;color:#fff;background:rgba(200,55,46,.92);border-radius:13px;font-size:clamp(20px,6vw,30px);font-weight:900;transform:translate(-50%,-50%);box-shadow:0 10px 30px rgba(98,28,24,.3)}.gameover-flash.show{display:block;animation:flash-in .25s ease-out}
.result-overlay{position:absolute;z-index:100;inset:0;display:grid;place-items:center;padding:calc(var(--safe-top) + 14px) 18px calc(var(--safe-bottom) + 14px);background:rgba(26,36,29,.48);backdrop-filter:blur(5px)}.result-overlay[hidden]{display:none}.result-card{width:min(100%,390px);max-height:100%;overflow-y:auto;padding:24px 20px 19px;text-align:center;background:#fff;border-radius:22px;box-shadow:0 24px 70px rgba(22,35,26,.3);animation:result-in .3s ease-out}.result-card h2{margin:5px 0 4px;font-size:29px;letter-spacing:-.04em}.result-reason{min-height:1.5em;margin:0 0 13px;color:var(--danger);font-size:12px;font-weight:700}.ranking{padding:14px 14px 13px;border:1px solid #dce8de;border-radius:15px;background:#f5faf6}.ranking h3{margin:0;color:var(--green-dark);font-size:10px;letter-spacing:.2em}.ranking-position{margin:4px 0 6px}.ranking-position strong{font-size:43px;line-height:1}.ranking-position span{margin-left:3px;font-size:14px;font-weight:800}.ranking-title{margin:0;display:flex;align-items:center;justify-content:center;gap:8px}.ranking-title span{color:var(--muted);font-size:9px}.ranking-title strong{color:var(--green-dark);font-size:14px}.ranking-meta{margin:7px 0 0;color:var(--muted);font-size:10px}.final-score{margin:13px 0;display:flex;align-items:center;justify-content:center;gap:13px}.final-score>span{color:var(--muted);font-size:10px;font-weight:850;letter-spacing:.15em}.final-score strong{font-size:29px}.final-score small{font-size:10px}.result-actions{grid-template-columns:1fr 1fr}.result-actions .primary-button,.result-actions .secondary-button{min-height:47px;font-size:12px}
@keyframes steam{0%{transform:translateY(12px) scale(.8);opacity:0}45%{opacity:.75}100%{transform:translate(8px,-20px) scale(1.2);opacity:0}}@keyframes bubble{0%,100%{transform:translateY(7px) scale(.6);opacity:.25}50%{transform:translateY(-7px) scale(1.1);opacity:.9}}@keyframes potato-float{50%{margin-top:-4px;transform:translate(-50%,-50%) rotate(4deg)}}@keyframes scoop{0%{transform:translate(-50%,-50%)}55%{transform:translate(-50%,-95%) rotate(-8deg) scale(1.08)}100%{transform:translate(-110%,-160%) rotate(-16deg) scale(.65);opacity:0}}@keyframes judge-pop{0%{opacity:0;transform:translate(-50%,-20%) scale(.7)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}100%{opacity:0;transform:translate(-50%,-130%) scale(1)}}@keyframes count-pop{0%{opacity:0;transform:scale(.65)}30%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.12)}}@keyframes flash-in{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}}@keyframes result-in{from{opacity:0;transform:translateY(18px) scale(.96)}}@keyframes danger-pulse{50%{box-shadow:0 0 0 5px rgba(223,94,84,.13)}}@keyframes danger-shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.start-pot .potato{position:absolute;z-index:2}.start-pot .potato:nth-of-type(1){left:31px;top:43px;width:35px;height:29px;transform:rotate(-12deg)}.start-pot .potato:nth-of-type(2){left:62px;top:36px;width:43px;height:35px;transform:rotate(10deg)}.start-pot .potato:nth-of-type(3){left:79px;top:62px;width:49px;height:38px;transform:rotate(-5deg)}.pot-zone.drop-ready .pot{border-color:var(--green);box-shadow:inset 0 0 0 5px #bcd7c2,0 0 0 6px rgba(82,184,109,.18),0 12px 22px rgba(38,52,43,.18)}.cooking-potato.is-burnt{z-index:10;filter:drop-shadow(0 0 10px rgba(160,45,34,.8));animation:danger-shake .18s linear infinite}
.start-thumbnail{display:block;width:min(100%,420px);aspect-ratio:4/3;margin:16px auto 13px;object-fit:cover;border-radius:18px;background:linear-gradient(145deg,#e7f2e9,#d7e8db);box-shadow:0 10px 27px rgba(39,65,47,.14)}.potato{background:transparent;border:0;box-shadow:none}.potato::before{display:none}.potato img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}.potato.state-raw img{filter:saturate(.52) brightness(1.12)}.potato.state-early img{filter:saturate(.86) sepia(.12) brightness(1.06)}.potato.state-perfect img{filter:saturate(1.12) sepia(.08) brightness(1.04) drop-shadow(0 0 3px rgba(82,184,109,.38))}.potato.state-late img{filter:saturate(1.18) sepia(.42) brightness(.82)}.potato.state-burnt img{filter:saturate(.55) sepia(.75) brightness(.38)}.legend-potato{overflow:visible}.tray-potato{touch-action:none}.tray-potato.drag-source{opacity:.28}.drag-ghost .potato{width:100%;height:100%}.pot{border:0;background:url("https://game-assets.izumilabo.com/game-003/assets/game-003-pot.png") center/contain no-repeat;box-shadow:none}.water{inset:14%;background:radial-gradient(circle at 40% 35%,rgba(255,255,255,.42),transparent 20%),radial-gradient(circle,rgba(167,229,231,.72),rgba(76,178,190,.48));box-shadow:inset 0 0 18px rgba(30,128,139,.18)}.pot-handles{display:none}.pot-zone.drop-ready .pot{border:0;filter:drop-shadow(0 0 9px rgba(82,184,109,.68));box-shadow:none}.cooking-potato.scooping::after{left:-46px;top:-44px;width:116px;height:116px;border:0;border-radius:0;background:url("https://game-assets.izumilabo.com/game-003/assets/game-003-ladle.png") center/contain no-repeat;box-shadow:none;transform:rotate(-13deg)}
@media(max-height:690px){.status-bar{height:45px}.game-legend{margin-block:4px}.tray{height:100px}.pot-zone{min-height:220px}.pot{width:min(63dvh,285px)}.pot-handles{width:calc(min(63dvh,285px) + 62px)}.pot-caption{bottom:-2px}.start-thumbnail{width:min(82%,300px);margin-block:8px}.start-legend{margin-top:8px}.hint{margin:7px auto 10px}}
@media(max-width:359px){.game-screen{padding-inline:8px}.tray-panel{padding-inline:6px}.tray{padding-inline:2px}.tray-potato.size-l .potato{width:40px;height:34px}.pot{width:238px}.pot-handles{width:300px}.legend{gap:3px}.legend-item{font-size:7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* State legend clarity and main-pot scale */
.legend-item{gap:5px;font-weight:800}.legend-potato{width:32px;height:28px;padding:3px;border:2px solid currentColor;border-radius:11px;background:rgba(255,255,255,.82);box-shadow:0 2px 6px rgba(34,48,38,.08)}.legend-item:nth-child(1){color:var(--raw)}.legend-item:nth-child(2){color:#2f8fcf}.legend-item:nth-child(3){color:#258d42;font-size:10px;font-weight:950}.legend-item:nth-child(3) .legend-potato{border-width:3px;box-shadow:0 0 0 3px rgba(82,184,109,.14),0 3px 8px rgba(37,141,66,.16)}.legend-item:nth-child(4){color:#d77b1e}.legend-item:nth-child(5){color:var(--burnt)}.start-legend{padding:12px 7px}.game-legend{padding:4px 2px}.pot-zone{min-height:290px;padding-top:2px}.pot{width:clamp(310px,86vw,420px)}.pot-caption{bottom:1px}
@media(max-height:690px){.pot-zone{min-height:242px;padding-top:0}.pot{width:min(80vw,330px)}.game-legend{margin-block:2px}.legend-potato{width:29px;height:25px}.pot-caption{bottom:-2px}}
@media(max-width:359px){.pot{width:310px}.legend-potato{width:29px;height:25px}.legend-item{font-size:7px}.legend-item:nth-child(3){font-size:8px}}