#hud .inventory-grid.cooking-open { width:min(380px,calc(100vw - 24px));height:min(760px,calc(100dvh - 170px));max-height:calc(100dvh - 170px); }
#hud .cooking-open #skills-panel { display:flex;flex-direction:column;padding:0;overflow:hidden; }
#hud .cooking-open #skills-panel[hidden],#hud #cooking-panel[hidden],#hud #cooking-panel [hidden],#hud .cooking-status[hidden] { display:none; }
#hud #cooking-panel { display:flex;flex:1;flex-direction:column;min-height:0;gap:8px;padding:12px;color:#eee0c6;background:radial-gradient(ellipse at 30% 0,#ad724330,transparent 60%),linear-gradient(130deg,#424539,#28392f);font:12px Georgia,serif;box-shadow:inset 0 0 0 1px #aa8b5670; }
#hud #cooking-panel button { border:1px solid #b39a6666;border-radius:3px;padding:8px;background:#17271f55;color:#eee0c6;font:11px Georgia,serif;cursor:pointer;transition:background .18s,border-color .18s; }
#hud #cooking-panel button:hover:not(:disabled),#hud #cooking-panel button[aria-pressed=true] { border-color:#e3bb76;background:#b67f3430; }
#hud #cooking-panel button:disabled { opacity:.48;cursor:default; }
#hud #cooking-panel :is(button,select,input):focus-visible { outline:2px solid #edc17e;outline-offset:2px; }
#hud #cooking-panel .cooking-back { align-self:flex-start;padding:0;border:0;background:none;color:#c0b99e; }
.cooking-heading { display:flex;align-items:center;gap:9px; }
.cooking-heading>.icon { width:42px;height:42px; }
.cooking-heading>div { flex:1; }
#hud .cooking-heading h3 { margin:0;color:#f2d29a;font:21px Georgia,serif; }
.cooking-heading span,.cooking-xp span { display:block;color:#c3b89e;font-size:10px;margin-top:5px; }
.cooking-heading button .icon { width:23px;height:23px; }
.cooking-pages { display:flex;gap:5px; }
.cooking-pages button { flex:1; }
.cooking-content { flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b79b6055 transparent;scrollbar-gutter:stable; }
#hud #cooking-panel h4 { color:#f4d6a1;font:19px Georgia,serif;margin:8px 0; }
#hud #cooking-panel label { display:block;color:#c6baa0;font-size:10px; }
#hud #cooking-panel select,#hud #cooking-panel input { width:100%;min-width:0;margin:5px 0 8px;height:33px;padding:5px;border:1px solid #aa926077;border-radius:3px;background:#24372b;color:#eee0c6;font:11px Georgia,serif;color-scheme:dark; }
.cooking-transformation { display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 3px;background:radial-gradient(ellipse,#b2893430,transparent 73%); }
.cooking-transformation>div { display:grid;justify-items:center;flex:1;text-align:center;min-width:0; }
.cooking-transformation .icon { width:76px;height:76px;filter:drop-shadow(0 4px 4px #101a1480); }
.cooking-transformation small { margin-top:6px;color:#decdaa;font-size:10px; }
.cooking-transformation>span { font:30px Georgia,serif;color:#c49b5c; }
.cooking-metrics { display:grid;grid-template-columns:repeat(3,1fr);padding:10px 0;margin:8px 0 12px;border:1px solid #ad905850;background:#17291e66; }
.cooking-metrics>span { text-align:center; }
.cooking-metrics>span+span { border-left:1px solid #ad905840; }
#hud #cooking-panel .cooking-metrics strong { display:block;font:18px Georgia,serif;color:#efc27e; }
.cooking-metrics small { display:block;margin-top:5px;color:#bfb698;font-size:9px; }
.cooking-supplies { display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0; }
.cooking-supplies>div { display:flex;align-items:center;gap:6px;padding:7px;border:1px solid #a18b5e40;background:#17271e40; }
.cooking-supplies .icon { width:32px;height:32px;flex:none; }
.cooking-supplies span { font-size:10px;line-height:1.3; }
.cooking-supplies small { display:block;margin-top:3px;font-size:9px;color:#b5c49a; }
.cooking-supplies .missing small { color:#edac85; }
.cooking-actions { display:flex;align-items:flex-end;gap:5px; }
.cooking-actions>button { flex:1;white-space:nowrap;height:34px; }
#hud #cooking-panel .cooking-quantity-label { width:52px; }
#hud #cooking-panel .cooking-quantity-label input { margin-bottom:0; }
#hud #cooking-panel .cooking-primary { width:100%;min-height:38px;background:linear-gradient(#a57f43,#775d3c);font-size:12px;color:#fff0d3; }
#hud #cooking-panel .cooking-note,#hud #cooking-panel .cooking-source-note { font-size:10px;line-height:1.6;color:#c3baa2;margin:9px 0; }
#hud #cooking-panel .cooking-source-note { color:#d7bf8d; }
.cooking-fuel { display:flex;gap:6px;align-items:center;border-top:1px solid #a28b5b55;margin-top:12px;padding-top:10px; }
.cooking-fuel label { flex:1;min-width:0; }
.cooking-fuel button { flex:none; }
.cooking-ritual-grid { display:grid;grid-template-columns:repeat(5,1fr);gap:4px; }
#hud #cooking-panel .cooking-ritual-grid button { padding:4px 1px;min-width:0; }
.cooking-ritual-grid .icon { display:block;width:51px;height:51px;max-width:100%;margin:auto; }
.cooking-ritual-grid small { font-size:9px;color:#d3c29a; }
.cooking-ritual-grid .locked .icon { filter:grayscale(.7);opacity:.55; }
.cooking-ritual-hero { display:flex;align-items:center;gap:8px;padding:14px 3px 3px; }
.cooking-ritual-hero>.icon { width:98px;height:105px;flex:none;filter:drop-shadow(0 5px 5px #101a1480); }
.cooking-ritual-hero small { font-size:8px;letter-spacing:.06em;color:#c5aa76; }
#hud #cooking-panel .cooking-ritual-hero p { color:#c8bca3;font-size:10px;line-height:1.5;margin:0; }
.cooking-footer { display:flex;align-items:center;gap:7px;font-size:9px;line-height:1.4;color:#b9b198;border-top:1px solid #aa925955;padding-top:8px; }
.cooking-footer .icon { width:25px;height:25px; }
#hud #cooking-panel .cooking-message { padding:8px;margin:0;font-size:11px;line-height:1.4;color:#f3cd99;background:#ad783526;border-left:2px solid #cf9a58; }
.cooking-fermentations { border-top:1px solid #b0935b55;padding:10px 0;color:#d7c29c;font-size:10px;line-height:1.5; }
.cooking-status { position:absolute;left:50%;bottom:145px;transform:translateX(-50%);width:min(310px,calc(100vw - 28px));padding:12px;color:#563f28;background:linear-gradient(135deg,#ecddb8,#d8c496);border:1px solid #977a50;box-shadow:0 3px 16px #17221960,inset 0 0 0 3px #fff3d526;font:11px Georgia,serif;pointer-events:auto;animation:cooking-enter .2s ease-out; }
.cooking-status>div { display:flex;align-items:center;gap:7px; }
.cooking-status .icon { width:30px;height:30px; }
.cooking-status strong { flex:1;font:15px Georgia,serif; }
.cooking-status button { border:1px solid #98794b66;padding:5px;background:#98794b20;color:#684b2c;font:10px Georgia,serif;cursor:pointer; }
.cooking-status>small { display:block;margin:8px 0; }
.cooking-status>span { display:block;text-align:right;margin-top:5px;font-size:10px; }
.cooking-status progress,.cooking-xp progress { display:block;width:100%;height:5px;border:0;border-radius:3px;overflow:hidden;background:#92784d33;accent-color:#d59f57; }
.cooking-status progress::-webkit-progress-bar,.cooking-xp progress::-webkit-progress-bar { background:#92784d33; }
.cooking-status progress::-webkit-progress-value,.cooking-xp progress::-webkit-progress-value { background:linear-gradient(90deg,#a16637,#eec479); }
@keyframes cooking-enter { from { opacity:0;translate:0 5px; } to { opacity:1;translate:0 0; } }
@media(max-width:600px) { #hud:has(#inventory.cooking-open:not([hidden])) .map-cluster { visibility:hidden;pointer-events:none; } }
@media(prefers-reduced-motion:reduce) { .cooking-status { animation:none; } #hud #cooking-panel * { transition:none; } }