:root{font-family:Segoe UI,Arial,sans-serif;color:#fff2d0;background:#1d3029;--potion:#679d96}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#475341,#172b24);min-height:100dvh}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{opacity:.5;cursor:default}button:focus-visible{outline:3px solid #fff3ab;outline-offset:4px}[hidden]{display:none!important}header,footer{max-width:1080px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:12px}header span{font-size:9px;letter-spacing:2.5px;color:#d8c89c}h1{font-family:Georgia,serif;font-size:26px;font-weight:400;margin:3px 0 0}header p{font-size:11px;opacity:.6}#world{width:min(1080px,100%);height:min(740px,calc(100svh - 126px));min-height:540px;position:relative;margin:auto;overflow:hidden;border-radius:22px;border:3px solid #a57542;background:repeating-linear-gradient(1deg,#925b32 0,#bb8248 5px,#bf884e 6px,#956039 70px);box-shadow:0 25px 60px #06160b90;isolation:isolate}.backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;user-select:none}#world:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 70px #48260955;pointer-events:none;z-index:1}.hud{position:absolute;top:15px;left:17px;right:17px;display:flex;justify-content:space-between;z-index:6;gap:8px}.hud button{border:1px solid #bc995b;background:#fff0ccf0;color:#533d25;border-radius:10px;padding:10px 15px;font-size:13px;box-shadow:0 4px 0 #5e391b40}#count{display:inline-block;border-radius:50%;background:#345d45;color:#fff1cb;min-width:20px;padding:2px;font-size:11px}#speech{position:absolute;top:17%;left:50%;transform:translateX(-50%);width:31%;max-width:340px;min-width:190px;border:1px solid #b59761;background:#fff7e7f5;color:#463c2b;border-radius:18px 18px 18px 3px;padding:13px 16px;z-index:4;box-shadow:0 4px 12px #50280c25;font-size:14px;line-height:1.4}#speech b{display:block;font-size:10px;letter-spacing:1.3px;text-transform:uppercase;color:#825482;margin-bottom:5px}#pot{position:absolute;width:33%;aspect-ratio:1.194;left:50%;bottom:174px;transform:translateX(-50%);z-index:3;max-width:360px}.pot-art{position:relative;width:100%;height:100%;object-fit:contain;display:block;pointer-events:none;filter:drop-shadow(0 8px 5px #3b1d1970)}#liquid{position:absolute;left:16.5%;top:15.1%;width:66.7%;height:14.5%;border-radius:50%;overflow:hidden;background:radial-gradient(ellipse at 40% 35%,#ffffff55,var(--potion) 50%,#273d3377);box-shadow:inset 0 4px 5px #172e3370,0 0 10px var(--potion);transition:background .5s,box-shadow .5s}#liquid>i{position:absolute;width:8%;aspect-ratio:1;border:1px solid #ffffff80;border-radius:50%;left:25%;top:40%;background:#ffffff30;animation:bubble 2.2s infinite}#liquid>i:nth-child(2){left:60%;top:20%;animation-delay:-1.1s}#liquid>i:nth-child(3){left:40%;top:60%;animation-delay:-.5s}#liquid>i:nth-child(4){left:77%;top:40%;animation-delay:-1.6s}.swirl{position:absolute;inset:10% 14%;border:2px solid #ffffff50;border-left-color:transparent;border-radius:50%;opacity:0}.aura{position:absolute;inset:4% -5% -4%;border-radius:50%;background:radial-gradient(ellipse,#f8d68288,transparent 70%);opacity:0;transition:opacity .2s}#pot.over .aura{opacity:1}#target-label{display:none;position:absolute;top:-4%;left:50%;transform:translateX(-50%);padding:6px 14px;border-radius:12px;background:#fff3c4;color:#533e25;font-weight:600;white-space:nowrap}#pot.over #target-label{display:block}.steam{position:absolute;left:35%;top:0;width:30%;height:40%;pointer-events:none}.steam i{position:absolute;border-radius:50%;width:28%;height:50%;filter:blur(9px);background:#fff4cc;opacity:0}.brewing .steam i{animation:steam 1.6s infinite}.steam i:nth-child(2){left:36%;animation-delay:-.6s}.steam i:nth-child(3){left:70%;animation-delay:-1s}.brewing #pot{animation:shake .28s infinite alternate}.brewing #liquid>i{animation-duration:.45s}.brewing .swirl{opacity:1;animation:swirl .6s linear infinite}.mix-status{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);z-index:6;text-align:center;width:90%;pointer-events:none}#mixture{display:flex;gap:6px;justify-content:center;min-height:27px}#mixture button{pointer-events:auto;border:1px solid #cda560;background:#ffedccef;padding:4px 9px;color:#4d3c23;border-radius:10px;font-size:11px}#empty{pointer-events:auto;color:#ffedcb;font-size:10px;text-shadow:0 1px 2px #372416;background:none;border:0;padding:5px;text-decoration:underline}.shelf{position:absolute;bottom:54px;left:8%;right:8%;height:106px;z-index:5;display:flex;align-items:end;justify-content:space-evenly;border-bottom:12px solid #683917;border-radius:0 0 9px 9px;box-shadow:0 6px 3px #27170850;background:linear-gradient(transparent 75%,#ce985c 76%,#a86b34)}.ingredient{background:none;border:0;color:#fff0d2;padding:0;display:flex;align-items:center;flex-direction:column;touch-action:none;user-select:none;-webkit-user-select:none;width:23%;max-width:150px;cursor:grab;position:relative}.ingredient img{width:77px;height:77px;object-fit:contain;filter:drop-shadow(1px 4px 2px #2d1b2080);pointer-events:none;transition:transform .18s}.ingredient:hover img{transform:translateY(-5px) rotate(-3deg)}.ingredient span{font-size:11px;text-shadow:0 1px 3px #321b0a;background:#50351bd9;border-radius:5px;padding:3px 7px;white-space:nowrap}.ingredient.used img{opacity:.45}.ingredient.used:after{content:'✓';position:absolute;top:10px;right:15%;color:#fff3b6}.ingredient:disabled{opacity:.5}.bottom{position:absolute;bottom:8px;left:20px;right:20px;z-index:6;display:flex;align-items:center;justify-content:space-between;gap:10px}.bottom>span{font-size:12px;text-shadow:0 1px 3px #271607}#brew{background:linear-gradient(#678152,#37573c);color:#fff3cc;border:1px solid #b5bf7c;border-bottom:4px solid #263c2a;min-width:132px;border-radius:12px;padding:9px 20px;font-weight:600}.ghost{position:fixed;width:86px;height:86px;object-fit:contain;z-index:100;pointer-events:none;transform:translate(-50%,-70%);filter:drop-shadow(0 10px 8px #1a110b77)}#effects{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}footer{font-size:10px;color:#d8d1b6}footer button{background:none;border:0;color:inherit;padding:8px;text-decoration:underline}dialog{width:min(540px,calc(100% - 26px));max-height:90dvh;overflow:auto;border:2px solid #c4a06b;border-radius:20px;background:#fbf0d7;color:#493923;padding:25px;box-shadow:0 20px 100px #081a14aa}dialog::backdrop{background:#102c257d;backdrop-filter:blur(5px)}#close{float:right;border:0;background:none;font-size:28px;color:#705334;min-width:36px;min-height:36px}dialog h2{font:28px Georgia,serif;margin:10px 0 14px}dialog p{line-height:1.6}dialog img.result{width:100%;border-radius:12px;margin:5px 0 10px}.actions{display:flex;gap:10px;flex-wrap:wrap}.actions button,.entry button{background:#3b5b42;color:#fff1ce;border:0;padding:12px 17px;border-radius:10px}dialog small{color:#817152}.entry{padding:12px 0;border-top:1px solid #d8c4a0;display:flex;gap:12px;align-items:center}.entry img{width:96px;border-radius:8px}.entry div{flex:1}.entry b{display:block;font-family:Georgia,serif;font-size:18px}.entry p{font-size:11px;margin:7px 0}.entry button{padding:9px;font-size:11px}#world.reduced *{animation:none!important;transition:none!important}#world.reduced .brewing .steam{display:none}@keyframes bubble{0%,100%{transform:scale(.3);opacity:.2}60%{transform:scale(1.2);opacity:.8}}@keyframes steam{0%{transform:translate(0,0) scale(.4);opacity:0}40%{opacity:.65}100%{transform:translate(10px,-90px) scale(2);opacity:0}}@keyframes shake{from{transform:translateX(-50%) rotate(-.8deg)}to{transform:translateX(-50%) rotate(.8deg)}}@keyframes swirl{to{transform:rotate(360deg)}}
@media(max-width:640px){header{padding:9px 12px}header h1{font-size:21px}header span{font-size:8px}header p{font-size:9px}#world{border-radius:14px;width:calc(100% - 12px);height:calc(100svh - 117px);min-height:555px;max-height:760px}.backdrop{height:60%;object-fit:cover;object-position:center top;mask-image:linear-gradient(#000 85%,transparent)}#speech{top:34%;width:80%;font-size:13px;max-width:none;padding:9px 13px;border-radius:12px}#speech b{font-size:9px;margin-bottom:2px}.hud{top:10px;left:9px;right:9px}.hud button{padding:8px;font-size:11px}#pot{width:57%;bottom:185px;max-width:265px}.shelf{left:3%;right:3%;bottom:57px;height:105px}.ingredient img{width:63px;height:70px}.ingredient span{font-size:9px;white-space:normal;min-height:30px;line-height:1.2;max-width:83px;text-align:center;display:grid;place-items:center;padding:2px 5px}.mix-status{bottom:165px}#mixture button{font-size:10px;padding:4px 7px}.bottom{left:12px;right:12px;gap:8px}.bottom>span{font-size:11px;max-width:55%}#brew{min-width:112px;padding:9px 14px}footer{padding:7px 12px;font-size:9px}.entry img{width:70px}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}}

/* Audio review controls */
.audio-bar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 auto 12px}.audio-bar button,.dialog-audio button{font:inherit;font-size:13px;padding:9px 14px;border:1px solid #a4b69c;border-radius:18px;background:#f4f2df;color:#254337;cursor:pointer}.audio-bar button[aria-pressed=true]{background:#365b45;color:white}#sound-welcome{max-width:740px;margin:0 auto 14px;padding:18px 22px;border:1px solid #b7c69e;border-radius:18px;background:#f0efd6;color:#243f30;display:grid;gap:8px}#sound-welcome strong{font-size:20px}#sound-welcome div{display:flex;gap:8px;flex-wrap:wrap}#sound-welcome button{font:inherit;border:0;border-radius:13px;padding:11px 16px;background:#365b45;color:white;cursor:pointer}#sound-welcome #sound-silent{background:transparent;color:#365b45}.dialog-audio{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;padding-top:12px;border-top:1px solid #c9d0ba}.speaking{background:#e7edcb;border-radius:8px;box-shadow:0 0 0 7px #e7edcb}#overlay-content p{transition:background .18s}@media(max-width:500px){#sound-welcome{margin:0 10px 12px;padding:14px}.audio-bar{margin-bottom:8px}header p{display:none}}

.back-link{color:#e9d5a8;font-size:12px;text-decoration:none;padding:10px 0;white-space:nowrap}.back-link:hover{text-decoration:underline}