:root{color-scheme:light;font-family:Arial Rounded MT Bold,Arial,sans-serif;--ink:#4f286b;--pink:#ed67aa;--purple:#8a58c6;--gold:#f7bd45}*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#eadcf4;touch-action:none}button,a{font:inherit}.hidden{display:none!important}#game-shell{position:relative;width:100%;height:100%;overflow:hidden;background:#ebdcf4}canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.top-bar{position:absolute;z-index:20;top:max(10px,env(safe-area-inset-top));left:14px;right:14px;display:grid;grid-template-columns:54px 1fr 54px;align-items:center;pointer-events:none}.round-button{width:52px;height:52px;display:grid;place-items:center;border:2px solid #fff;border-radius:18px;color:#fff;background:#7d53bccc;box-shadow:inset 0 2px #ffffff8c,0 6px 0 #60418e,0 11px 22px #67448745;text-decoration:none;font-size:1.2rem;pointer-events:auto;cursor:pointer}.game-title{text-align:center;color:#623981;text-shadow:0 2px #fff}.game-title small{display:block;font-size:.55rem;letter-spacing:.22em}.game-title strong{display:block;font-size:clamp(1rem,3vw,1.5rem)}.hud{position:absolute;z-index:18;top:max(74px,calc(env(safe-area-inset-top) + 68px));left:14px;right:14px;display:grid;grid-template-columns:auto minmax(180px,480px) auto;justify-content:center;gap:8px;pointer-events:none}.hud-pill,.progress-wrap{border:2px solid #fff;border-radius:16px;background:#fff9;box-shadow:0 7px 18px #7b569b2e;backdrop-filter:blur(9px)}.hud-pill{min-height:45px;display:flex;align-items:center;gap:4px;padding:7px 12px;color:var(--ink)}.hud-pill small{font-size:.48rem;letter-spacing:.13em}.hud-pill strong{font-size:1.2rem}.hud-pill span{font-size:.64rem}.stars{color:#efa93e}.progress-wrap{width:min(48vw,480px);padding:7px 11px}.progress-wrap>div{display:flex;justify-content:space-between;color:#714b88;font-size:.55rem;letter-spacing:.1em}.progress-wrap>div strong{color:#d6539a}.progress-wrap>span{height:10px;display:block;margin-top:5px;overflow:hidden;border-radius:99px;background:#cfbadc}.progress-wrap i{display:block;width:0;height:100%;border-radius:inherit;background:linear-gradient(90deg,#63d8ca,#f7c943,#ee6aa9,#8a5bd0);transition:width .3s}.voice-button{position:absolute;z-index:24;right:14px;top:137px;width:50px;height:50px;border:2px solid #fff;border-radius:17px;background:linear-gradient(145deg,#f48fbd,#8a5ac7);box-shadow:0 6px 0 #69449d;color:#fff;font-size:1.15rem;cursor:pointer}.announcement{position:absolute;z-index:17;top:139px;left:50%;transform:translateX(-50%);max-width:52%;margin:0;padding:7px 13px;border-radius:99px;color:#714382;background:#fffbd4d9;font-size:.65rem;font-weight:bold;letter-spacing:.05em;text-align:center;pointer-events:none}.recipe-card{position:absolute;z-index:16;left:50%;top:124px;transform:translateX(-50%);min-width:290px;padding:12px 18px;border:2px solid #fff;border-radius:22px;background:#fffce9e8;color:var(--ink);box-shadow:0 9px 23px #704d8e38;text-align:center}.recipe-card small{display:block;color:#9d5ca4;font-size:.5rem;letter-spacing:.14em}.recipe-card strong{display:block;margin-top:2px;font-size:.68rem}.recipe-icons{min-height:44px;display:flex;align-items:center;justify-content:center;gap:9px}.recipe-icons span{width:38px;height:38px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;color:#fff;box-shadow:0 3px 9px #6040763b;font-size:1.1rem}.recipe-icons b{color:#a36aae;font-size:1.25rem}.ingredients{position:absolute;z-index:22;left:18px;right:18px;bottom:max(14px,env(safe-area-inset-bottom));display:flex;align-items:end;justify-content:center;gap:clamp(6px,2vw,20px)}.ingredient-button{position:relative;width:clamp(88px,13vw,145px);height:clamp(125px,22vh,195px);border:0;background:transparent;filter:drop-shadow(0 8px 6px #76558545);cursor:pointer;touch-action:manipulation}.ingredient-button img{width:100%;height:100%;object-fit:contain;pointer-events:none}.ingredient-button.selected{transform:translateY(-15px);filter:drop-shadow(0 0 14px var(--glow))}.ingredient-button.procedural{display:flex;align-items:end;justify-content:center}.ingredient-button.procedural i{width:72%;height:74%;display:grid;place-items:center;border:5px solid #d6a757;border-radius:44% 44% 48% 48%;background:radial-gradient(circle at 34% 25%,#fff9,transparent 15%),var(--color);color:#fff;font-size:2rem;font-style:normal;box-shadow:inset 0 0 18px #fff8,0 0 17px var(--glow)}.ingredient-button span{position:absolute;left:50%;bottom:0;transform:translateX(-50%);padding:4px 8px;border-radius:99px;background:#fffde5;color:#6b487d;font-size:.52rem;font-weight:900;white-space:nowrap}.selected-tray{position:absolute;z-index:21;left:50%;bottom:195px;transform:translateX(-50%);min-width:170px;height:54px;display:flex;align-items:center;justify-content:center;gap:8px;padding:6px 12px;border:2px dashed #9b73b6;border-radius:18px;background:#fff9}.selected-tray span{width:38px;height:38px;display:grid;place-items:center;border:3px solid #fff;border-radius:50%;background:var(--color);color:#fff;box-shadow:0 0 11px var(--glow);font-size:1.1rem}.selected-tray i{color:#a36aae;font-style:normal}.mix-button{position:absolute;z-index:24;right:22px;bottom:188px;width:118px;height:76px;border:3px solid #fff;border-radius:26px;background:linear-gradient(145deg,#f98fbe,#e95ba5 52%,#8c58c8);color:#fff;box-shadow:inset 0 3px #ffffff8c,0 7px 0 #6c409e,0 14px 24px #6b458e55;cursor:pointer}.mix-button:disabled{filter:grayscale(.5);opacity:.55}.mix-button span{display:block;font-size:1.8rem;line-height:.8}.mix-button strong{display:block;margin-top:7px;font-size:.7rem;letter-spacing:.1em}.clear-button{position:absolute;z-index:24;left:22px;bottom:200px;width:52px;height:52px;border:2px solid #fff;border-radius:17px;background:#ffffffc9;color:#8d5aa5;box-shadow:0 5px 0 #c3a7d4;font-size:1.25rem;cursor:pointer}.overlay{position:absolute;z-index:40;inset:0;display:none;place-items:center;padding:88px 18px 18px;background:#76529852;backdrop-filter:blur(6px)}.overlay.visible{display:grid}.menu-card{width:min(94vw,555px);max-height:calc(100vh - 106px);overflow:auto;padding:26px 34px;border:2px solid #fff;border-radius:34px;background:linear-gradient(145deg,#fffef9f7,#f4e9fff4);color:var(--ink);box-shadow:inset 0 2px #fff,0 25px 60px #5c3f7770,0 0 0 8px #ffffff38;text-align:center}.menu-card small{color:#a154a4;font-size:.62rem;font-weight:900;letter-spacing:.18em}.menu-card h1{margin:8px 0 12px;font-size:clamp(2.5rem,7vw,4.2rem);line-height:.84;letter-spacing:-.07em}.menu-card h1 em{color:#e9559f;font-style:normal}.menu-card h2{margin:8px 0 14px;font-size:clamp(2rem,6vw,3.2rem);line-height:.95;letter-spacing:-.05em}.menu-card p{max-width:430px;margin:0 auto 17px;color:#745885;font-size:.88rem;font-weight:bold;line-height:1.4}.potion-badge{width:62px;height:62px;display:grid;place-items:center;margin:-2px auto 10px;border-radius:50%;background:linear-gradient(145deg,#ffdc70,#ef89bd,#9d72d2);color:#fff;font-size:2.25rem;box-shadow:0 8px 22px #875a9d45}.primary-button,.secondary-button{width:min(100%,350px);min-height:57px;display:flex;align-items:center;justify-content:center;gap:8px;margin:10px auto 0;border:0;border-radius:20px;font-size:.79rem;font-weight:900;letter-spacing:.08em;cursor:pointer}.primary-button{color:#fff;background:linear-gradient(145deg,#f887b8,#db55a4 52%,#8757c5);box-shadow:inset 0 2px #fff8,0 7px 0 #67409a,0 13px 23px #7a4d9150}.secondary-button{min-height:45px;color:#7c5592;background:#eadcf2}.menu-row{display:flex;justify-content:center;gap:7px;margin-top:14px}.small-button{min-height:41px;padding:8px 11px;border:0;border-radius:14px;color:#815a96;background:#ecdef5;font-size:.57rem;font-weight:900;cursor:pointer}.listen-button{margin-top:14px;border:0;color:#825b96;background:transparent;font-size:.61rem;font-weight:900;letter-spacing:.08em;cursor:pointer}.compact{width:min(92vw,440px)}.lessons-card{width:min(94vw,620px)}.lesson-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:9px;margin:18px 0}.lesson-grid button{aspect-ratio:1;border:0;border-radius:17px;background:linear-gradient(145deg,#f584b7,#8858c7);color:#fff;box-shadow:0 5px 0 #69429b;font-weight:900;cursor:pointer}.lesson-grid button:disabled{background:#d8ccdf;color:#9d8ea8;box-shadow:0 5px 0 #bbaec4}.setting{display:flex;align-items:center;justify-content:space-between;margin:12px 0;padding:14px 17px;border-radius:17px;background:#ecdef4;font-weight:bold}.setting input{width:25px;height:25px;accent-color:#d957a3}.tiny{font-size:.7rem!important}@media(max-width:650px){.top-bar{top:7px;left:8px;right:8px;grid-template-columns:46px 1fr 46px}.round-button{width:44px;height:44px;border-radius:15px}.hud{top:58px;left:7px;right:7px;grid-template-columns:auto 1fr auto;gap:4px}.hud-pill{min-height:40px;padding:5px 7px;border-radius:13px}.progress-wrap{width:auto;padding:6px 7px;border-radius:13px}.voice-button{top:107px;right:8px;width:44px;height:44px;border-radius:14px}.announcement{top:109px;max-width:65%;font-size:.52rem}.recipe-card{top:158px;min-width:250px;padding:8px 12px}.recipe-icons{min-height:38px}.recipe-icons span{width:32px;height:32px}.ingredients{left:4px;right:4px;bottom:7px;gap:1px}.ingredient-button{width:23vw;height:145px}.ingredient-button span{font-size:.45rem}.selected-tray{bottom:145px;height:46px;min-width:140px}.selected-tray span{width:32px;height:32px}.mix-button{right:8px;bottom:143px;width:88px;height:63px;border-radius:22px}.clear-button{left:8px;bottom:150px;width:44px;height:44px}.overlay{padding:64px 11px 9px}.menu-card{max-height:calc(100vh - 75px);padding:21px 18px;border-radius:27px}.menu-card h1{font-size:2.75rem}.menu-card p{font-size:.77rem}.menu-row{gap:4px}.small-button{padding:7px;font-size:.48rem}.lesson-grid{gap:6px}.lesson-grid button{border-radius:12px}}@media(max-height:580px) and (orientation:landscape){.top-bar{top:5px}.hud{top:59px}.voice-button{top:112px}.announcement{top:114px}.recipe-card{top:120px}.ingredients{bottom:3px}.ingredient-button{height:130px;width:105px}.selected-tray{bottom:112px}.mix-button{bottom:105px}.clear-button{bottom:115px}.overlay{padding:62px 12px 8px}.menu-card{max-height:calc(100vh - 70px);padding:14px 25px}.menu-card h1{font-size:2.45rem}.potion-badge{width:48px;height:48px;font-size:1.8rem;margin-bottom:5px}}@media(prefers-reduced-motion:reduce){.progress-wrap i{transition:none}}