:root {
  color-scheme: light;
  --ink: #261b4f;
  --muted: #6d638f;
  --panel: rgba(255,255,255,.92);
  --panel-strong: #fff;
  --line: #ddd5fa;
  --purple: #6448dc;
  --purple-dark: #4228a6;
  --purple-soft: #eee9ff;
  --mint: #61e7c7;
  --sky: #62c8f3;
  --pink: #ff8fc7;
  --yellow: #ffd96a;
  --orange: #ff9a5a;
  --danger: #d94d78;
  --success: #22a879;
  --shadow: 0 14px 35px rgba(53, 37, 110, .18);
  --shadow-soft: 0 8px 20px rgba(53, 37, 110, .12);
  --radius: 24px;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #e9e3ff; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.8), transparent 22rem),
    radial-gradient(circle at 88% 25%, rgba(255,229,128,.46), transparent 17rem),
    linear-gradient(160deg,#e3dcff 0%,#d6f0ff 48%,#f9e5ff 100%);
}
button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 4px solid #1b93df; outline-offset: 3px; }
button { touch-action: manipulation; }
.noscript { padding: 1rem; background: #fff1cc; text-align: center; font-weight: 800; }
.sr-only { position: absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }

.app-shell { width: min(1580px, 100%); min-height: 100vh; margin: 0 auto; padding: 16px clamp(12px,2vw,28px) 20px; }
.topbar { display:flex; align-items:center; gap:16px; min-height:72px; }
.brand { border:0; background:transparent; display:flex; align-items:center; gap:10px; padding:6px; cursor:pointer; text-align:left; }
.brand-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:16px; background:linear-gradient(145deg,#6e50e8,#4a2db3); box-shadow:var(--shadow-soft); font-size:26px; }
.brand strong { display:block; font-size:1.18rem; line-height:1.05; }
.brand small { display:block; color:var(--muted); margin-top:5px; font-weight:700; }
.progress-pills { display:flex; gap:8px; margin-left:auto; }
.pill { display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.9); border-radius:999px; padding:8px 12px; box-shadow:var(--shadow-soft); }
.topnav { display:flex; gap:8px; }
.topnav button { border:1px solid rgba(255,255,255,.75); background:rgba(255,255,255,.82); border-radius:15px; padding:10px 12px; cursor:pointer; font-weight:800; box-shadow:0 5px 15px rgba(64,42,130,.08); }
.topnav button:hover { transform:translateY(-1px); background:#fff; }

.game-layout { display:grid; gap:14px; }
.customer-card { display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:center; padding:16px 18px; border:1px solid rgba(255,255,255,.8); border-radius:var(--radius); background:rgba(255,255,255,.83); box-shadow:var(--shadow); backdrop-filter:blur(12px); }
.customer-portrait { width:94px; height:94px; border-radius:30px; display:grid; place-items:center; font-size:52px; background:linear-gradient(145deg,#fff5ba,#f0d8ff); box-shadow:inset 0 0 0 4px rgba(255,255,255,.75), 0 8px 20px rgba(68,46,129,.15); animation:floaty 4s ease-in-out infinite; }
.customer-copy h1 { margin:2px 0 5px; font-size:clamp(1.2rem,2vw,1.7rem); }
.customer-copy p { margin:0; max-width:900px; color:#4d436e; line-height:1.45; font-weight:650; }
.eyebrow { display:block; color:var(--purple); text-transform:uppercase; letter-spacing:.08em; font-weight:900; font-size:.75rem; }
.request-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.hint-box { margin-top:10px!important; padding:10px 12px; background:#fff7cc; border:2px dashed #edc74b; border-radius:14px; color:#5c4b14!important; }
.clue-visuals { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.clue-chip { display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:5px 9px; font-size:.84rem; background:#f3efff; border:1px solid #ded5ff; font-weight:800; }

.lab { display:grid; grid-template-columns:minmax(250px, .82fr) minmax(360px,1.35fr) minmax(235px,.72fr); gap:14px; align-items:stretch; }
.ingredient-panel, .workbench, .controls-panel { min-width:0; }
.ingredient-panel, .workbench, .control-card { border-radius:var(--radius); background:var(--panel); border:1px solid rgba(255,255,255,.9); box-shadow:var(--shadow); }
.ingredient-panel { padding:14px; display:flex; flex-direction:column; gap:12px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.section-heading h2, .section-heading h3 { margin:0; font-size:1rem; }
.section-heading.compact h3 { font-size:.92rem; }
.mini-chip { color:var(--muted); background:#f4f0ff; border-radius:999px; padding:3px 8px; font-size:.75rem; font-weight:800; }

.ingredient-shelf { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:auto; padding:2px; min-height:250px; max-height:430px; align-content:start; }
.ingredient { position:relative; border:2px solid transparent; background:linear-gradient(145deg,#fff,#f8f6ff); border-radius:18px; padding:10px 8px; min-height:92px; cursor:pointer; text-align:center; box-shadow:0 5px 13px rgba(65,47,126,.08); transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease; }
.ingredient:hover { transform:translateY(-2px); }
.ingredient.selected { border-color:var(--purple); box-shadow:0 7px 16px rgba(92,67,211,.22); }
.ingredient.locked { filter:grayscale(.8); opacity:.52; cursor:not-allowed; }
.ingredient-icon { font-size:2rem; line-height:1; display:block; margin-bottom:6px; }
.ingredient-name { display:block; font-size:.82rem; font-weight:900; line-height:1.1; }
.ingredient-property { display:block; color:var(--muted); font-size:.68rem; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.new-dot { position:absolute; top:7px; right:7px; width:9px; height:9px; background:#ff4f94; border-radius:50%; box-shadow:0 0 0 3px #fff; }

.measuring-card { margin-top:auto; display:flex; gap:10px; padding:10px; border-radius:18px; background:linear-gradient(135deg,#f2eeff,#e8f9ff); border:1px solid #e1dafa; }
.measure-icon { font-size:2rem; width:40px; display:grid; place-items:center; }
.measure-controls { flex:1; min-width:0; }
.label { display:block; color:var(--muted); font-size:.73rem; font-weight:800; }
.stepper { display:grid; grid-template-columns:38px 1fr 38px; gap:5px; align-items:center; margin:5px 0 8px; }
.stepper button { border:0; border-radius:11px; min-height:36px; background:#fff; cursor:pointer; font-size:1.15rem; font-weight:900; box-shadow:0 4px 10px rgba(49,36,105,.08); }
.stepper output { text-align:center; font-weight:900; font-size:.9rem; }

.workbench { position:relative; padding:14px; overflow:hidden; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(246,241,255,.94)); min-height:620px; }
.workbench::before { content:""; position:absolute; inset:auto -10% 0; height:28%; background:linear-gradient(180deg,#9a70df,#7951c3); border-radius:50% 50% 0 0/12% 12% 0 0; opacity:.12; }
.thermometer-card { position:absolute; z-index:2; top:16px; left:16px; display:grid; grid-template-columns:auto auto 62px; align-items:center; gap:8px; padding:8px 10px; border-radius:16px; background:#fff; box-shadow:var(--shadow-soft); }
.thermo-icon { font-size:1.6rem; }
.thermometer-card strong { display:block; font-size:1.08rem; }
.temp-gauge { width:58px; height:10px; background:#eae6f5; border-radius:999px; overflow:hidden; }
.temp-gauge span { display:block; height:100%; width:20%; background:linear-gradient(90deg,#58c8f0,#ffcb5f,#ff6c62); border-radius:inherit; transition:width .2s ease; }
.cauldron-zone { position:relative; min-height:455px; display:grid; place-items:center; padding-top:35px; }
.cauldron { position:relative; width:min(310px,70%); aspect-ratio:1.2/1; margin-top:55px; filter:drop-shadow(0 22px 18px rgba(57,34,102,.2)); }
.cauldron-rim { position:absolute; z-index:5; top:0; left:8%; width:84%; height:20%; border-radius:50%; background:linear-gradient(180deg,#443561,#221b34); box-shadow:inset 0 7px 0 rgba(255,255,255,.1); }
.liquid { position:absolute; z-index:6; top:6.2%; left:13%; width:74%; height:13%; border-radius:50%; background:#8c72ff; overflow:hidden; box-shadow:inset 0 7px 12px rgba(255,255,255,.25),0 0 18px rgba(140,114,255,.5); transition:background .45s ease,box-shadow .45s ease; }
.liquid::after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.45),transparent 18%),linear-gradient(90deg,transparent,rgba(255,255,255,.15),transparent); animation:liquidShift 3.2s linear infinite; }
.bubble { position:absolute; z-index:3; border-radius:50%; background:rgba(255,255,255,.68); width:10px; height:10px; bottom:-10px; animation:bubbleUp 2.1s ease-in infinite; }
.b2 { left:30%; animation-delay:.45s; width:7px; height:7px; }.b3 { left:63%; animation-delay:1.2s; width:12px; height:12px; }.b4 { left:82%; animation-delay:.9s; width:6px; height:6px; }.b1 { left:12%; }
.cauldron-body { position:absolute; z-index:3; top:8%; left:12%; width:76%; height:78%; border-radius:20% 20% 46% 46%/18% 18% 52% 52%; background:linear-gradient(145deg,#443a58 0%,#241d31 50%,#17131f 100%); overflow:hidden; }
.cauldron-shine { position:absolute; left:14%; top:25%; width:18%; height:44%; border-radius:50%; transform:rotate(12deg); background:linear-gradient(90deg,rgba(255,255,255,.14),transparent); }
.cauldron-leg { position:absolute; z-index:2; bottom:0; width:18%; height:20%; background:#20192c; border-radius:0 0 50% 50%; }.cauldron-leg.left { left:22%; transform:rotate(12deg); }.cauldron-leg.right { right:22%; transform:rotate(-12deg); }
.flame { position:absolute; bottom:68px; display:flex; gap:0; align-items:end; opacity:.35; transform:scale(.72); transition:opacity .2s,transform .2s; }
.flame.hot { opacity:1; transform:scale(1); }
.flame i { display:block; width:34px; height:54px; margin:-5px; border-radius:65% 35% 60% 40%; background:linear-gradient(#ffe966,#ff733d); transform:rotate(45deg); animation:flicker .5s ease-in-out infinite alternate; }.flame i:nth-child(2){height:68px;animation-delay:.15s}.flame i:nth-child(3){animation-delay:.3s}
.cauldron-status { position:absolute; bottom:4px; width:100%; margin:0; text-align:center; color:var(--muted); font-weight:800; font-size:.9rem; }
.sparkles { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.lab-decor { position:absolute; z-index:2; right:12px; top:90px; display:grid; gap:6px; font-size:2rem; filter:drop-shadow(0 7px 8px rgba(55,39,104,.18)); }
.sparkle { position:absolute; font-size:18px; animation:sparklePop 1.2s ease-out forwards; }
.failure-effect { position:absolute; z-index:10; top:95px; left:50%; transform:translateX(-50%); pointer-events:none; font-size:5rem; opacity:0; }
.failure-effect.show { animation:effectPop 1.9s ease-in-out forwards; }
.mix-list-wrap { position:relative; z-index:3; background:rgba(255,255,255,.75); border:1px solid #eee8ff; border-radius:18px; padding:10px 12px; }
.mix-list { display:flex; gap:6px; flex-wrap:wrap; min-height:34px; align-items:center; margin-top:7px; }
.mix-chip { display:inline-flex; gap:5px; align-items:center; background:#f0ecff; border-radius:999px; padding:6px 9px; font-size:.76rem; font-weight:850; }
.empty-note { color:var(--muted); font-size:.8rem; }

.controls-panel { display:flex; flex-direction:column; gap:14px; }
.control-card { padding:14px; }
.control-card h2 { margin:0 0 10px; font-size:1rem; }
.big-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.tactile { min-height:112px; border:0; border-radius:20px; padding:10px; cursor:pointer; box-shadow:0 8px 0 rgba(51,39,104,.13),0 12px 20px rgba(64,44,126,.12); transition:transform .08s,box-shadow .08s; }
.tactile:active { transform:translateY(5px); box-shadow:0 3px 0 rgba(51,39,104,.13); }
.tactile span { display:block; font-size:2rem; margin-bottom:5px; }.tactile b,.tactile small { display:block; }.tactile small { margin-top:3px; color:#655b81; }
.tactile.heat { background:linear-gradient(145deg,#fff0dc,#ffd3bd); }.tactile.cool { background:linear-gradient(145deg,#e9f8ff,#ccefff); }.tactile.stir { background:linear-gradient(145deg,#f0eaff,#ddcffd); }
.tactile.stir .spoon { transform-origin:center; }.tactile.stir.stirring .spoon { animation:stirSpoon .45s ease-in-out; }
.full { width:100%; }
.bottle-card { margin-top:auto; text-align:center; }
.bottle-preview { position:relative; margin:3px auto 10px; width:58px; height:79px; border:5px solid #aeb2c8; border-radius:13px 13px 22px 22px; background:rgba(255,255,255,.5); overflow:hidden; }
.bottle-preview::before { content:""; position:absolute; left:16px; top:-18px; width:17px; height:24px; border:5px solid #aeb2c8; background:#f8f4ff; }
.bottle-preview span { position:absolute; left:4px; right:4px; bottom:4px; height:48%; border-radius:7px 7px 14px 14px; background:#8c72ff; transition:background .4s; }
.bottle-card small { display:block; color:var(--muted); margin-top:8px; line-height:1.3; }

.btn { border:0; border-radius:14px; min-height:40px; padding:8px 13px; cursor:pointer; font-weight:900; box-shadow:0 5px 11px rgba(52,38,112,.1); }
.btn-primary { color:#fff; background:linear-gradient(145deg,#7659e8,#5538c5); }.btn-primary:hover { background:linear-gradient(145deg,#8064ef,#5d42cb); }
.btn-soft { background:#f0ecff; color:#4f39a6; }.btn-success { color:white; background:linear-gradient(145deg,#2ac08c,#17976d); }
.text-btn { border:0; background:transparent; color:var(--purple); font-weight:850; cursor:pointer; }
.icon-btn { width:42px; height:42px; border:0; border-radius:14px; background:#f1edff; cursor:pointer; font-weight:900; }

.game-footer { display:flex; justify-content:space-between; gap:12px; padding:9px 4px 0; color:#665b86; font-size:.73rem; font-weight:700; }
kbd { display:inline-block; min-width:22px; text-align:center; padding:1px 4px; background:#fff; border:1px solid #d1c9e7; border-bottom-width:2px; border-radius:5px; }
.toast-region { position:fixed; z-index:50; right:18px; bottom:18px; display:grid; gap:8px; width:min(360px,calc(100vw - 36px)); pointer-events:none; }
.toast { padding:11px 14px; border-radius:14px; background:#251b4d; color:#fff; box-shadow:var(--shadow); font-weight:800; animation:toastIn .25s ease; }

.panel-dialog, .result-dialog { border:0; padding:0; background:transparent; max-width:none; max-height:none; }
.panel-dialog::backdrop, .result-dialog::backdrop { background:rgba(28,19,55,.6); backdrop-filter:blur(4px); }
.dialog-shell { width:min(900px,calc(100vw - 28px)); max-height:min(820px,calc(100vh - 28px)); overflow:hidden; display:flex; flex-direction:column; background:#fbfaff; border-radius:28px; box-shadow:0 28px 80px rgba(31,20,71,.36); }
.dialog-header { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #ebe5ff; background:linear-gradient(145deg,#fff,#f3efff); }
.dialog-header h2 { margin:3px 0 0; }
.dialog-content { overflow:auto; padding:18px 20px 24px; }
.book-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.recipe-card { position:relative; min-height:180px; border-radius:20px; padding:13px; background:#fff; border:1px solid #e7e0fb; box-shadow:var(--shadow-soft); }
.recipe-card.locked { display:grid; place-items:center; text-align:center; background:linear-gradient(145deg,#eeeaf8,#dad3ea); color:#777087; }
.recipe-art { display:grid; place-items:center; width:65px; height:65px; border-radius:20px; margin-bottom:9px; font-size:2rem; background:linear-gradient(145deg,var(--recipe-a,#ece4ff),var(--recipe-b,#d9f6ff)); }
.recipe-card h3 { margin:0 0 4px; font-size:1rem; }.recipe-card p { margin:0; color:var(--muted); font-size:.78rem; line-height:1.35; }
.recipe-facts { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }.recipe-facts span { font-size:.68rem; background:#f4f1ff; border-radius:999px; padding:4px 6px; font-weight:800; }
.silhouette { font-size:3.5rem; filter:brightness(0); opacity:.28; }

.tab-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }.tab-row button { border:0; border-radius:999px; padding:7px 11px; background:#eee9ff; cursor:pointer; font-weight:850; }.tab-row button.active { color:white; background:var(--purple); }
.ingredient-book-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }.ingredient-book-card { display:grid; grid-template-columns:54px 1fr; gap:10px; align-items:center; background:white; border:1px solid #e8e1fb; border-radius:17px; padding:10px; }.ingredient-book-card .big { font-size:2rem; text-align:center; }.ingredient-book-card h4 { margin:0 0 3px; }.ingredient-book-card p { margin:0; color:var(--muted); font-size:.78rem; }

.chapter-list { display:grid; gap:10px; }.chapter-card { display:grid; grid-template-columns:56px 1fr auto; gap:12px; align-items:center; background:white; border:1px solid #e8e1fb; padding:11px; border-radius:17px; }.chapter-card.locked { opacity:.55; }.chapter-icon { display:grid; place-items:center; width:54px; height:54px; border-radius:17px; background:#f1edff; font-size:1.9rem; }.chapter-card h3 { margin:0; font-size:.95rem; }.chapter-card p { margin:4px 0 0; color:var(--muted); font-size:.76rem; }.badge { display:inline-flex; align-items:center; gap:5px; background:#fff2bb; color:#705914; border-radius:999px; padding:5px 8px; font-size:.73rem; font-weight:900; }
.reward-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:16px; }.reward-card { text-align:center; background:#fff; border:1px solid #e7e0fa; border-radius:17px; padding:11px; }.reward-card.locked { opacity:.45; filter:grayscale(.5); }.reward-card .reward-icon { font-size:2rem; }.reward-card b { display:block; font-size:.84rem; margin-top:3px; }.reward-card small { color:var(--muted); }
.settings-grid { display:grid; gap:12px; }.setting-row { display:flex; align-items:center; justify-content:space-between; gap:15px; background:#fff; border:1px solid #e8e1fb; border-radius:17px; padding:12px 14px; }.setting-row h3 { margin:0; font-size:.92rem; }.setting-row p { margin:3px 0 0; color:var(--muted); font-size:.75rem; }.switch { width:52px; height:30px; border:0; border-radius:999px; padding:3px; background:#c9c2da; cursor:pointer; }.switch::after { content:""; display:block; width:24px; height:24px; border-radius:50%; background:white; transition:transform .18s; box-shadow:0 2px 5px rgba(0,0,0,.18); }.switch.on { background:var(--success); }.switch.on::after { transform:translateX(22px); }
.save-tools { display:flex; flex-wrap:wrap; gap:8px; }

.result-shell { width:min(520px,calc(100vw - 28px)); text-align:center; background:linear-gradient(180deg,#fff,#f7f4ff); border-radius:30px; padding:24px; box-shadow:0 28px 80px rgba(31,20,71,.4); }
.result-art { display:grid; place-items:center; width:105px; height:105px; margin:0 auto 12px; border-radius:34px; font-size:4rem; background:linear-gradient(145deg,#ffeeb5,#e2d7ff); animation:resultBounce .6s ease-out; }.result-shell h2 { margin:0 0 8px; }.result-shell p { margin:0; line-height:1.45; color:#564c71; font-weight:650; }.learning-note { margin:13px 0 0; padding:10px 12px; text-align:left; background:#eaf8ff; border-radius:14px; color:#24566c; font-size:.84rem; line-height:1.4; }.reward-row { display:flex; justify-content:center; gap:8px; margin:14px 0; flex-wrap:wrap; }.reward-pill { border-radius:999px; background:#fff3b8; padding:6px 10px; font-weight:900; }.result-actions { display:flex; justify-content:center; gap:8px; }.result-actions .btn { min-width:120px; }

[data-cauldron="moon"] .cauldron-body { background:linear-gradient(145deg,#6e74a5,#2d315f 55%,#171a39); }.app-shell[data-cauldron="dragon"] .cauldron-body { background:linear-gradient(145deg,#8e4938,#49271f 52%,#251713); }.app-shell[data-cauldron="ice"] .cauldron-body { background:linear-gradient(145deg,#8ad7e9,#326d8a 52%,#17384f); }

@keyframes floaty { 50% { transform:translateY(-5px) rotate(1deg); } }
@keyframes bubbleUp { 0%{transform:translateY(0) scale(.7);opacity:0}20%{opacity:.9}100%{transform:translateY(-55px) scale(1.15);opacity:0} }
@keyframes liquidShift { to { transform:translateX(40%); } }
@keyframes flicker { to { transform:rotate(40deg) scale(.88,1.05); } }
@keyframes sparklePop { 0%{opacity:0;transform:translateY(8px) scale(.4) rotate(0)}30%{opacity:1}100%{opacity:0;transform:translateY(-45px) scale(1.2) rotate(70deg)} }
@keyframes effectPop { 0%{opacity:0;transform:translate(-50%,15px) scale(.5)}25%,65%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-24px) scale(1.3)} }
@keyframes stirSpoon { 50% { transform:rotate(90deg) scale(1.08); } }
@keyframes toastIn { from { opacity:0; transform:translateY(8px); } }
@keyframes resultBounce { 0%{transform:scale(.6) rotate(-8deg)}65%{transform:scale(1.07) rotate(3deg)}100%{transform:scale(1)} }

@media (max-width: 1050px) {
  .lab { grid-template-columns:minmax(235px,.8fr) minmax(360px,1.2fr); }
  .controls-panel { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr 1fr; }
  .bottle-card { margin-top:0; }
  .workbench { min-height:580px; }
}
@media (max-width: 760px) {
  .app-shell { padding:8px 9px 14px; }
  .topbar { flex-wrap:wrap; gap:8px; }
  .brand { order:1; }.progress-pills{order:2}.topnav{order:3;width:100%;display:grid;grid-template-columns:repeat(3,1fr)}
  .topnav button span { display:none; }
  .topnav button { min-height:43px; }
  .customer-card { grid-template-columns:70px 1fr; gap:11px; padding:12px; }.customer-portrait{width:68px;height:68px;border-radius:22px;font-size:38px}.customer-copy h1{font-size:1.08rem}.customer-copy p{font-size:.85rem}
  .lab { grid-template-columns:1fr; }
  .ingredient-panel { order:2; }.workbench{order:1;min-height:500px}.controls-panel{order:3;grid-column:auto;display:grid;grid-template-columns:1fr 1fr}.bottle-card{grid-column:1/-1}
  .ingredient-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); max-height:none; min-height:0; overflow:visible; }.ingredient{min-height:84px;padding:8px 5px}.ingredient-property{display:none}
  .cauldron-zone { min-height:365px; }.cauldron { width:min(270px,72%); margin-top:45px; }.flame{bottom:57px}.thermometer-card{position:relative;top:auto;left:auto;width:max-content;margin-bottom:-58px;z-index:8}.workbench{display:flex;flex-direction:column}.cauldron-zone{flex:1}
  .game-footer { display:none; }
  .book-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 480px) {
  .customer-card { grid-template-columns:55px 1fr; }.customer-portrait{width:52px;height:52px;font-size:31px;border-radius:18px}.request-actions{grid-column:1/-1}.request-actions .btn{font-size:.76rem;padding:6px 8px;min-height:36px}
  .ingredient-shelf { grid-template-columns:repeat(3,1fr); }.ingredient-name{font-size:.72rem}.ingredient-icon{font-size:1.7rem}
  .controls-panel{grid-template-columns:1fr}.bottle-card{grid-column:auto}.big-controls{grid-template-columns:1fr 1fr}.tactile{min-height:93px}.control-card{padding:11px}
  .book-grid,.ingredient-book-grid,.reward-grid{grid-template-columns:1fr}.chapter-card{grid-template-columns:50px 1fr}.chapter-card>.badge{grid-column:2}.dialog-content{padding:14px}.dialog-header{padding:14px}.result-shell{padding:19px 15px}.result-actions{flex-direction:column}.result-actions .btn{width:100%}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms!important; animation-iteration-count:1!important; scroll-behavior:auto!important; transition-duration:.001ms!important; }
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; }