:root{color-scheme:dark;--gold:#fcd44e;--ink:#18101c;--edge:#59404b;--text:#f6f0e2}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#382332,var(--ink) 65%);color:var(--text);font:15px/1.5 ui-sans-serif,system-ui,sans-serif}
header,footer,main{max-width:1440px;margin:auto}header{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px}header span{font-weight:800;letter-spacing:.12em;color:var(--gold)}small{font-weight:400;letter-spacing:0;color:#c8b3be;margin-left:10px}a{color:#e4c091;text-underline-offset:4px}
button,input,summary{font:inherit}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
#game{height:calc(100svh - 64px);min-height:320px;max-height:1000px;display:grid;grid-template-rows:minmax(0,1fr) auto}
#stage{position:relative;background:#08040c;overflow:hidden;border:1px solid var(--edge);min-height:160px;min-width:0}
canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important;image-rendering:pixelated;touch-action:none;outline:none}
#loading{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse at center,#382332,#18101c);text-align:center;padding:20px}
#intro-art{display:flex;align-items:center;gap:24px;margin:22px 0 5px}#intro-art img:first-child{width:120px}#intro-art img:last-child{width:80px}#loading strong{font-size:clamp(24px,5vw,52px);color:var(--gold)}#start{min-width:160px}
#controls{position:relative;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:12px;background:#140d19;border:1px solid var(--edge);border-top:0}
.dpad,.actions,#pockets,#end-controls,#confirm-controls{display:flex;gap:5px;flex-wrap:wrap;justify-content:center}.dpad button{width:48px}#pockets button{min-width:38px;padding-left:6px;padding-right:6px}button.empty{opacity:.45}
#inventory summary{display:none}#inventory{position:relative}#pocket-count{color:var(--gold)}
footer{padding:8px 12px 28px;text-align:center;color:#c8b3be;font-size:13px}footer p{margin:9px 0}#run-status{color:#f3d498}form{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px}input{width:100px;background:#241827;border:1px solid var(--edge);color:var(--text);padding:9px;border-radius:6px}form a{margin-left:8px}#error{color:#ffacac;overflow-wrap:anywhere}
#game:fullscreen{height:100dvh;max-height:none;max-width:none;background:var(--ink)}
#compact-hud{position:absolute;inset:0;pointer-events:none;padding:10px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;font-size:14px}
.hud-top{display:flex;justify-content:space-between;gap:8px}.hud-top>div,.hud-bottom{background:#211623eb;border:1px solid #755349;border-radius:8px;padding:7px 10px}.hud-top>div{display:flex;flex-direction:column;min-width:100px}.hud-top strong{color:var(--gold);font-size:16px}.hud-top span{font-size:12px;color:#d8c7d2}.hud-top progress{width:100px;accent-color:#f68c42}
.vitals{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}.vitals strong{color:#ffacac}.vitals progress{width:80px;accent-color:#e24640}#stats-label{font-size:12px;color:#ead7b8}#message{margin:5px 0 0;font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#modal{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;padding:12px;background:#08040cbf;overflow:hidden}.modal-card{width:min(100%,520px);max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:#241827;border:1px solid #997157;border-radius:12px;padding:18px;box-shadow:0 6px 30px #0008}h2{color:var(--gold);font-size:24px;line-height:1.15;margin:0 0 14px}#modal-body p{margin:8px 0}#modal-body ul{padding-left:20px}#modal-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}#modal-actions button{flex:1}.perk-choice{display:block;text-align:left;width:100%;margin:10px 0;padding:12px}.perk-choice strong{display:block;color:var(--gold);font-size:17px}.perk-choice span{display:block;margin-top:4px}
body.compact #inventory summary{display:flex}body.compact #inventory #pockets{position:absolute;z-index:5;bottom:calc(100% + 8px);right:0;width:min(320px,85vw);max-height:45svh;overflow-y:auto;background:#241827;border:1px solid #997157;border-radius:10px;padding:10px;box-shadow:0 6px 30px #0008}body.compact #pockets button{display:block;width:100%;text-align:left;padding:10px}body.compact #pockets button.empty{display:none}
[hidden]{display:none!important}
@media(max-width:700px){header{height:54px;padding:5px 10px}small{display:none}header span{font-size:14px}#game{height:calc(100svh - 54px)}#controls{display:grid;grid-template-columns:150px 1fr;gap:8px;padding:10px 8px;padding-bottom:max(10px,env(safe-area-inset-bottom))}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px;gap:4px}.dpad button{width:44px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.actions button{font-size:13px;padding:7px 8px}.actions button:last-child{grid-column:span 2}kbd{display:none}#inventory{grid-column:1}#inventory summary{text-align:center;font-size:14px}#end-controls,#confirm-controls{grid-column:1/-1}footer{font-size:12px}form button{font-size:12px}body.compact #inventory #pockets{left:0;right:auto}}
@media(max-height:520px) and (min-width:600px){header{height:50px}#game{height:calc(100svh - 50px);min-height:260px;grid-template-columns:minmax(0,1fr) 192px;grid-template-rows:1fr}#controls{border-left:0;border-top:1px solid var(--edge);display:flex;flex-direction:column;flex-wrap:nowrap;gap:7px;padding:8px;overflow-y:auto;align-items:stretch}.dpad{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:44px 44px;gap:3px;align-self:center}.dpad button{width:44px}.dpad button:nth-child(1){grid-column:2}.dpad button:nth-child(2){grid-column:1;grid-row:2}.dpad button:nth-child(3){grid-column:2;grid-row:2}.dpad button:nth-child(4){grid-column:3;grid-row:2}.actions{display:grid;grid-template-columns:1fr 1fr}.actions button{font-size:12px;padding:5px}.actions button:last-child{grid-column:span 2}kbd,small{display:none}#inventory summary{text-align:center}body.compact #inventory #pockets{position:fixed;left:auto;right:10px;bottom:10px;width:300px;max-height:80svh}#compact-hud{padding:7px}.hud-top>div{padding:5px 8px}.hud-bottom{padding:5px 8px}#message{-webkit-line-clamp:1}}

.hud-top>div:first-child{min-width:0;max-width:calc(100% - 126px)}.hud-top span{line-height:1.25;margin-top:3px}

body.menu-open #game{grid-template-columns:1fr;grid-template-rows:1fr}body.menu-open #controls{display:none}
#recipe-label{flex-basis:100%;margin:0 0 2px;color:#e6d3c2;font-size:13px}#recipe-label:empty{display:none}
#loading p#daily-line{margin:8px 0 0;color:#f3d498;font-size:14px}
#start-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px}#start-random{min-width:160px}
.header-actions{display:flex;gap:8px;align-items:center}
#settings-open span{font-weight:inherit;letter-spacing:0;color:inherit}
#settings-open span[aria-hidden]{font-size:18px}
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;padding:12px;background:#08040cbf}
.settings-card{max-height:100%}
.setting{margin:0 0 14px;padding:0;border:0;min-width:0}
.setting legend{color:var(--gold);font-weight:700;padding:0;margin-bottom:4px}
.setting label{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.setting input[type=radio],.setting input[type=checkbox]{width:auto;min-height:auto;margin:0;accent-color:var(--gold);flex:none}
.setting input[type=range]{display:block;width:100%;padding:0;margin:6px 0 0;background:none;border:0;accent-color:var(--gold)}
.setting output{color:var(--gold);margin-left:8px}
.setting .hint{margin:4px 0 0;font-size:13px;color:#c8b3be}
.reset button{min-width:44px}#reset-confirm{margin-top:8px;padding:10px;border:1px solid #997157;border-radius:8px;background:#211623}
#reset-confirm p{margin:0 0 10px}.setting-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
#settings-status{min-height:1.5em;color:#f3d498;margin:0}
#end-result{flex-basis:100%;margin:0 0 4px;text-align:center;color:#f3d498}
#end-controls button{min-width:120px}
#modal-body p.result-line{margin:6px 0;color:#f3d498}
body.touch-hide .dpad,body.touch-hide .actions{display:none}
@media (hover:hover) and (pointer:fine) and (min-width:701px){body.touch-auto .dpad,body.touch-auto .actions{display:none}}
body.touch-hide #controls,body.touch-auto #controls{grid-template-columns:1fr}
body.text-large{font-size:18px}
body.text-large footer{font-size:15px}
body.text-large h2{font-size:30px}
body.text-large #compact-hud{font-size:16px}
body.text-large .hud-top strong{font-size:18px}
body.text-large .hud-top span,body.text-large #stats-label{font-size:14px}
body.text-large #message{font-size:15px}
body.text-large .actions button,body.text-large .dpad button{font-size:17px}
body.text-large kbd{font-size:12px}
body.text-large #pockets button{font-size:17px}
body.text-large .perk-choice strong{font-size:20px}
body.text-large #modal-body p,body.text-large .setting .hint{font-size:17px}
@media(max-width:700px){.label-text{display:none}}

/* ---- art pass: sprites in the page, recipe chips, vending machine, polish ---- */
canvas.ico{position:static;width:32px!important;height:32px!important;image-rendering:pixelated;flex:none;touch-action:auto}
#pockets button{display:inline-flex;align-items:center;justify-content:center;gap:6px}
body.compact #pockets button{justify-content:flex-start;text-align:left}
#recipe-label{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px;border:1px solid #755349;border-radius:10px;background:#1b1220;font-size:13px}
#recipe-label strong{flex-basis:100%;color:var(--gold);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.chip{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:2px 10px 2px 4px;border-radius:999px;background:#30212e;border:1px solid var(--edge);color:var(--text)}
.chip canvas.ico{width:28px!important;height:28px!important}.chip b{color:var(--gold);font-size:13px}
.chip.combo{padding-left:10px;font-weight:700}
.chip.combo.on{background:#5a3f10;border-color:var(--gold);color:#ffe28a;box-shadow:0 0 12px #fcd44e55}
.chip.combo.hint{color:#b9a7b3;border-style:dashed;background:transparent}
.chip.combo span{color:var(--gold)}
@media(prefers-reduced-motion:no-preference){.chip.combo.on{animation:glow 2.4s ease-in-out infinite alternate}}
@keyframes glow{to{box-shadow:0 0 18px #fcd44e99}}

/* vending machine */
.modal-card.vend{width:min(100%,560px);background:linear-gradient(#3a4ea6,#2b3b86);border:3px solid #1a2458;box-shadow:0 0 0 3px #18101c,0 8px 30px #000a;padding:14px}
.modal-card.vend h2{margin:0 0 10px;padding:10px 8px;text-align:center;background:#0e1230;border-radius:8px;color:#a8d0ff;letter-spacing:.08em;font-size:clamp(18px,5vw,26px);text-shadow:0 0 10px #6eb0ff88;border-bottom:3px dotted #ffe27888}
.modal-card.vend #modal-body p{text-align:center;color:#dbe6ff;font-size:13px;margin:0 0 10px}
.vend-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:8px;background:#0e1230;border:3px solid #1a2458;border-radius:8px;box-shadow:inset 0 0 0 1px #3a4ea6}
.vend-slot{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 4px 8px;min-height:44px;background:transparent;border:0;border-radius:0;box-shadow:none;text-align:center;color:var(--text);height:auto;font:15px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-shadow:none}
.vend-slot+.vend-slot{border-left:2px solid #1f2a66;border-radius:0}
.vend-slot:hover,.vend-slot:focus-visible{background:#1c2766}
.vend-key{position:absolute;top:6px;left:6px;width:24px;height:24px;line-height:22px;border-radius:0;background:var(--gold);color:var(--ink);font:400 20px/22px var(--mono);text-align:center;box-shadow:0 -2px 0 #14101c,0 2px 0 #14101c,-2px 0 0 #14101c,2px 0 0 #14101c,inset 0 2px 0 #ffec9a,inset 0 -3px 0 #c28f1c}
.vend-art{display:flex;align-items:center;justify-content:center;width:64px;height:56px;border-bottom:3px solid #5a5f90}
.vend-art canvas.ico{width:56px!important;height:56px!important}
.vend-name{font-size:13px;line-height:1.2;min-height:2.4em;display:flex;align-items:center;justify-content:center}
.vend-lcd{display:block;width:100%;padding:3px 2px;border:2px solid #3c6048;border-radius:6px;background:#06140c;color:#78ff96;font:700 14px ui-monospace,monospace}
.vend-slot.sold{opacity:.7}.vend-slot.sold .vend-name{color:#ff8c82;font-weight:700}.vend-slot.sold .vend-lcd{color:#46644e}
.vend-slot.mystery .vend-art{font:800 24px ui-monospace,monospace;color:#ffbef0;text-shadow:0 0 12px #ff64dc;border-bottom-color:#ff64dc88}
.vend-flap{flex:0 1 auto!important;margin:0 auto;min-width:200px;--face:#0e1230;--lit:#26327a;--shade:#070a1c;--rim:#1a2458;--hover-rim:#a8d0ff}
.modal-card.vend #modal-actions{margin-top:12px}
.modal-card.vend.moody{background:linear-gradient(#7a3a96,#5b2a78);border-color:#3a1854}
.modal-card.vend.moody h2{background:#200e2e;color:#ff96e0;text-shadow:0 0 10px #ff64dc88}
.modal-card.vend.moody .vend-slots{background:#200e2e;border-color:#3a1854;box-shadow:inset 0 0 0 1px #7a3a96}.modal-card.vend.moody .vend-flap{--face:#200e2e;--lit:#5b2a78;--shade:#12061c;--rim:#3a1854;--hover-rim:#ff96e0}
.modal-card.vend.moody #modal-body p{color:#ffc8f0}
.modal-card.vend.moody .vend-slot+.vend-slot{border-left-color:#3a1854}.modal-card.vend.moody .vend-slot:hover,.modal-card.vend.moody .vend-slot:focus-visible{background:#4a2266}
@media(max-width:360px){.vend-slots{grid-template-columns:1fr}.vend-slot{flex-direction:row;padding:6px 6px 6px 40px;text-align:left}.vend-slot+.vend-slot{border-left:0;border-top:2px solid #1f2a66}.vend-key{top:50%;margin-top:-12px}.vend-art{width:44px;height:44px}.vend-art canvas.ico{width:40px!important;height:40px!important}.vend-name{flex:1;justify-content:flex-start}.vend-lcd{width:auto;min-width:64px}}

/* start screen */
#loading strong{text-shadow:0 3px 0 #59404b,0 0 24px #fcd44e44}
#intro-art img{filter:drop-shadow(0 6px 0 #0006)}
#loading p#daily-line{padding:4px 14px;border:1px solid var(--edge);border-radius:999px;background:#1b1220}
#start-actions button{min-height:52px;font-size:32px}
#start-cookbook{min-width:160px}
#load-status{color:#c8b3be;min-height:1.5em}

/* settings */
.settings-card{width:min(100%,460px);border-color:var(--gold)}
.settings-card h2{padding-bottom:10px;border-bottom:2px dotted var(--edge)}
.setting legend{font-size:13px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px}
fieldset.setting label{padding:4px 12px;margin-bottom:4px;border:1px solid var(--edge);border-radius:8px;background:#1b1220}
fieldset.setting label:hover{border-color:#997157}
fieldset.setting label:has(input:checked){border-color:var(--gold);background:#3a2a1e;color:#ffe9a8}
fieldset.setting label:has(input:focus-visible),.setting label:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:2px}
.setting:has(#set-mute) label,.setting:has(#set-tips) label{padding:4px 12px;border:1px solid var(--edge);border-radius:8px;background:#1b1220}
.setting input[type=radio],.setting input[type=checkbox]{width:20px;height:20px}
.setting input[type=range]{height:44px}
.setting-actions button{min-width:110px}.setting.reset{padding-top:6px;border-top:2px dotted var(--edge)}

/* end of run */
#end-controls{align-items:center;gap:8px}
#end-result{padding:8px 14px;border:1px solid var(--gold);border-radius:10px;background:#2a1d14;color:#ffe9a8;font-weight:600}
#end-result:empty{display:none}
#modal-body p.result-line,#modal-body p{overflow-wrap:anywhere}
body.compact #pockets button{display:flex;align-items:center;gap:8px}
#loading p#daily-line{border-radius:14px;max-width:92%}
.setting:has(#set-volume) label{margin-bottom:0;min-height:32px}

/* pixel font (monogram, CC0) for titles and labels only; paragraphs stay in the system font for readability.
   It is designed on a 16px grid, so sizes are kept at 24 and 32 where they can be. */
@font-face{font-family:"Monogram";src:url(monogram.ttf) format("truetype");font-display:swap}
header>span,#loading strong,h2,.hud-top strong,.perk-choice strong,.setting legend{font-family:Monogram,ui-monospace,monospace;font-weight:400;letter-spacing:.04em}
header>span{font-size:32px;line-height:1}#loading strong{font-size:clamp(48px,8vw,80px);line-height:1.05}
h2{font-size:32px}.hud-top strong{font-size:24px;line-height:1.1}.perk-choice strong{font-size:32px;line-height:1.1}.setting legend{font-size:32px}#start,#start-random{line-height:1.1}
body.text-large h2{font-size:32px}body.text-large .hud-top strong{font-size:24px}
@media(max-width:700px){header>span{font-size:24px}}

/* ---- soup band badge: icon + band name in the compact HUD ---- */
.hud-top .band{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;margin-top:3px;padding:1px 8px 1px 5px;border-radius:999px;border:1px solid currentColor;font-family:Monogram,ui-monospace,monospace;font-size:16px;line-height:1.2;letter-spacing:.06em;background:#ffffff14}
.hud-top .band::before{content:"";width:12px;height:12px;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
.band[data-band=scalding]{color:#ff783c;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3 0h1v1h1v1h1v1h1v4H6v1H2V7H1V4h1V3h1z'/%3E%3C/svg%3E")}
.band[data-band=hot]{color:#f0aa50;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 0h1v1h1v1H2v1h1v1H2V3H1V2h1V1H1zM5 0h1v1h1v1H6v1h1v1H6V3H5V2h1V1H5zM0 6h8v2H0z'/%3E%3C/svg%3E")}
.band[data-band=lukewarm]{color:#cebe82;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3 0h2v2h1v1h1v3H6v1H5v1H3V7H2V6H1V3h1V2h1z'/%3E%3C/svg%3E")}
.band[data-band=cold]{color:#78a0dc;--ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M3 0h2v2H3zM0 0h1v1h1v1h1v1H2V2H1V1H0zM7 0h1v1H7v1H6v1H5V2h1V1h1zM0 3h8v2H0zM3 5h2v1H6v1h1v1H6V7H5v1H3V7H2v1H1V7h1V6h1z'/%3E%3C/svg%3E")}
@media(prefers-reduced-motion:no-preference){body:not(.motion-reduced) .band.pulse{animation:bandpulse .7s ease-out}}
@keyframes bandpulse{0%{transform:scale(1.35);box-shadow:0 0 0 0 currentColor}60%{transform:scale(1);box-shadow:0 0 10px 3px currentColor}100%{box-shadow:0 0 0 0 transparent}}

/* ---- starting soups: the picker on the start screen ---- */
#loading{overflow-y:auto;justify-content:flex-start}
#loading>:first-child{margin-top:auto}#loading>:last-child{margin-bottom:auto}
@media(max-width:700px){.header-actions{gap:6px}.header-actions button{padding:8px 10px}}
@media(max-width:700px) and (max-height:820px){#intro-art{display:none}}

#reset-cookbook-confirm{margin-top:8px;padding:10px;border:1px solid #997157;border-radius:8px;background:#211623}
#reset-cookbook-confirm p{margin:0 0 10px}

/* ---- art pass: starting soups, the cookbook and the halfway kitchen ---- */
:root{--mono:Monogram,ui-monospace,monospace;--ink-brown:#3c2214;--paper:#f3e4c2}

/* the soup picker: three bowls on a shelf. A locked soup is a greyed bowl with a padlock and a meter. */
#soup-picker{margin:12px 0 0;padding:6px 10px 10px;min-width:0;width:min(100%,540px);border:0;border-radius:10px;background:linear-gradient(#2a1a24,#1b1220);box-shadow:inset 0 0 0 1px var(--edge),0 3px 0 #0007}
#soup-picker legend{padding:0 8px;color:var(--gold);font-family:var(--mono);font-size:24px;letter-spacing:.06em;text-shadow:0 2px 0 #59404b}
#soup-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.soup-option{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto 1fr;gap:1px 10px;align-items:center;align-content:start;min-height:64px;padding:8px 10px 10px;border:2px solid #4a3340;border-radius:8px;background:#241827;text-align:left;cursor:pointer;box-shadow:0 3px 0 #0006}
.soup-option:hover:not(.locked){border-color:#997157;background:#2c1e2c}
.soup-option:has(input:checked){border-color:var(--gold);background:linear-gradient(#4a3322,#32221a);color:#ffe9a8;box-shadow:0 3px 0 #a07a1c}
.soup-option:has(input:checked)::after{content:"\2713";position:absolute;top:-8px;right:-6px;width:22px;height:22px;line-height:22px;text-align:center;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:800;font-size:14px;box-shadow:0 2px 0 #14101c}
.soup-option:has(input:focus-visible){outline:2px solid var(--gold);outline-offset:3px}
.soup-option input[type=radio]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:inherit}
.soup-option input[type=radio]:disabled{cursor:not-allowed}
.soup-bowl{grid-row:1 / span 2;position:relative;display:block;width:40px;height:22px;margin-top:10px;border-radius:2px 2px 20px 20px;background:linear-gradient(#e6e9ee 0 4px,#b7bcc7 4px);box-shadow:0 3px 0 #0006,inset 0 -4px 0 #00000026;--soup:#e5502e}
.soup-bowl::before{content:"";position:absolute;left:3px;right:3px;top:1px;height:7px;border-radius:50%;background:var(--soup);box-shadow:inset 0 -2px 0 #0003}
.soup-bowl::after{content:"";position:absolute;left:10px;top:-10px;width:3px;height:3px;background:#ffffff99;box-shadow:9px -3px #ffffff80,18px 0 #ffffff99,3px -7px #ffffff55,12px -9px #ffffff4d}
.soup-tomato .soup-bowl{--soup:#e5502e}
.soup-miso .soup-bowl{--soup:#c99a52}.soup-miso .soup-bowl::before{background:radial-gradient(circle at 25% 50%,#f5e7bd 0 2px,#0000 2.5px),radial-gradient(circle at 70% 55%,#4b8a4a 0 1.5px,#0000 2px),#c99a52}
.soup-chowder .soup-bowl{--soup:#f2e2b8}.soup-chowder .soup-bowl::before{background:radial-gradient(circle at 30% 55%,#d6a35c 0 2px,#0000 2.5px),radial-gradient(circle at 72% 45%,#d6a35c 0 2px,#0000 2.5px),#f2e2b8}
.soup-option .soup-name{grid-column:2;font-family:var(--mono);font-size:28px;font-weight:400;line-height:1;letter-spacing:.04em;color:var(--gold);text-shadow:0 2px 0 #0006}
.soup-option span{grid-column:2;grid-row:2;align-self:start;font-size:13px;line-height:1.3;color:#d2bfca}
.soup-option.locked{cursor:not-allowed;border-style:dashed;border-color:#4a3340;background:#1d1520;box-shadow:none}
.soup-option.locked .soup-bowl{filter:grayscale(1) brightness(.6)}
.soup-option.locked .soup-bowl::before{left:13px;right:auto;top:10px;width:14px;height:11px;border-radius:2px;background:#e4dcc6;box-shadow:0 0 0 1px #000a,inset 0 -3px 0 #00000030}
.soup-option.locked .soup-bowl::after{left:15px;top:-1px;width:6px;height:9px;border:3px solid #c9c0a8;border-bottom:0;border-radius:7px 7px 0 0;background:none;box-shadow:none}
.soup-option.locked .soup-name{color:#b9a7b3;text-shadow:none}
.soup-option.locked span{color:#cdb8c6}
.soup-option .unlock-meter{grid-column:1 / -1;grid-row:3;display:block;height:8px;margin-top:6px;border-radius:4px;background:#0d0810;box-shadow:inset 0 0 0 1px #59404b}
.soup-option .unlock-meter u{display:block;height:100%;min-width:0;border-radius:4px;background:var(--gold);text-decoration:none}
@media(max-width:700px){#soup-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .soup-option{grid-template-columns:1fr;grid-template-rows:none;justify-items:center;text-align:center;padding:10px 4px 8px;gap:2px}
  .soup-bowl{grid-row:auto;margin-top:12px}.soup-option .soup-name,.soup-option span{grid-column:1;grid-row:auto}
  .soup-option .soup-name{font-size:22px}.soup-option span{font-size:11.5px;line-height:1.25}
  .soup-option .unlock-meter{grid-row:auto;width:100%}#soup-picker legend{font-size:20px}}
@media(max-width:700px) and (max-height:700px){.soup-option span{display:none}.soup-option.locked span{display:block}}

/* the cookbook: a leather-bound recipe book with a ribbon, parchment pages and ink */
.cookbook-card{position:relative;width:min(100%,660px);max-height:100%;display:flex;flex-direction:column;padding:16px 18px 14px;color:var(--ink-brown);border:4px solid #6b3f26;border-radius:10px;background:repeating-linear-gradient(#0000 0 27px,#d9bf8f55 27px 28px),var(--paper);box-shadow:0 0 0 3px #18101c,0 10px 34px #000a,inset 0 0 0 2px #b98d5a,inset 14px 0 18px -12px #7a4a2a66}
.cookbook-card::after{content:"";position:absolute;top:-4px;right:26px;width:22px;height:46px;background:#c6402f;clip-path:polygon(0 0,100% 0,100% 100%,50% 78%,0 100%);box-shadow:inset 0 0 0 0 #0000}
.cookbook-card h2{margin:0 0 4px;padding-right:44px;font-family:var(--mono);font-weight:400;font-size:clamp(34px,8vw,46px);letter-spacing:.05em;line-height:1;color:#8a2f1d;text-shadow:0 2px 0 #fff6dc}
#cookbook-progress{margin:0 0 4px;color:#5a3a28;font-weight:700;font-size:14px}
#cookbook-meter{height:10px;margin:0 0 8px;border:2px solid #6b3f26;border-radius:6px;background:#e0c897;overflow:hidden}
#cookbook-meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(45deg,#e5502e 0 8px,#f08a3a 8px 16px)}
#cookbook-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 6px 4px 0;scrollbar-color:#8a5a3a #e0c897}
#cookbook-body:focus-visible{outline:2px solid #8a2f1d;outline-offset:2px}
#cookbook-body h3{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 2px;padding-bottom:2px;border-bottom:2px dotted #a97a4c;color:#8a2f1d;font-family:var(--mono);font-size:30px;font-weight:400;letter-spacing:.04em;line-height:1.1}
#cookbook-body h3 .sec-count{flex:none;padding:1px 9px;border-radius:999px;background:#6b3f26;color:#ffe9b8;font:700 12px/1.5 ui-sans-serif,system-ui,sans-serif;letter-spacing:0}
#cookbook-body .hint{margin:3px 0 6px;font-size:13px;color:#6a4a36;font-style:italic}
.cookbook-list{list-style:none;margin:0 0 6px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:6px}
.cookbook-list li{display:grid;grid-template-columns:24px 1fr;column-gap:8px;align-items:start;margin:0;padding:6px 10px 7px 8px;border:1px solid #cfb27c;border-radius:6px;background:#fbf0d6;box-shadow:0 2px 0 #b98d5a66;overflow-wrap:anywhere}
.cookbook-list .mark{grid-row:1 / span 2;display:block;width:22px;height:22px;margin-top:1px;border-radius:50%;background:#5f9a4e;color:#f4ffe8;font:700 13px/22px ui-sans-serif,system-ui,sans-serif;font-style:normal;text-align:center;box-shadow:0 2px 0 #3c6a32}
.cookbook-list li.unknown{border-style:dashed;border-color:#b9a07a;background:#ecdcb8;box-shadow:none}
.cookbook-list li.unknown .mark{background:#c8b48c;color:#7a6446;box-shadow:none}
.cookbook-list strong{grid-column:2;color:var(--ink-brown);font-size:15px;line-height:1.25}
.cookbook-list li.unknown strong{color:#7a6446}
.cookbook-list span{grid-column:2;font-size:14px;line-height:1.35;color:#5e4030}
.cookbook-list li.unknown span{color:#76604a}
.cookbook-card .setting-actions{margin-top:10px}
@media(max-width:520px){.cookbook-card{padding:14px 12px 12px}.cookbook-list{grid-template-columns:1fr}#cookbook-body h3{font-size:26px}}
body.text-large #cookbook-body h3{font-size:34px}
body.text-large .cookbook-list span,body.text-large .soup-option span{font-size:17px}
body.text-large .cookbook-list strong{font-size:18px}

/* the halfway kitchen: a striped awning over a wooden wall, recipe cards on a brass rail, a counter below */
.modal-card.kitchen{position:relative;width:min(100%,580px);padding:50px 14px 0;border:3px solid #3a2216;border-radius:12px;background:repeating-linear-gradient(90deg,#0000 0 46px,#62402766 46px 48px),linear-gradient(#7a4e34,#5e3b26);box-shadow:0 0 0 3px #18101c,0 8px 30px #000a;overflow-x:hidden}
.modal-card.kitchen::before{content:"";position:absolute;top:0;left:0;right:0;height:18px;background:repeating-linear-gradient(90deg,#ce4638 0 18px,#ffeece 18px 36px)}
.modal-card.kitchen::after{content:"";position:absolute;top:18px;left:0;right:0;height:10px;background:radial-gradient(circle at 9px 0,#ce4638 8.5px,#0000 9px) 0 0/36px 10px repeat-x,radial-gradient(circle at 27px 0,#ffeece 8.5px,#0000 9px) 0 0/36px 10px repeat-x;filter:drop-shadow(0 3px 0 #0004)}
.modal-card.kitchen h2{margin:0 0 6px;padding:0;text-align:center;background:none;color:#ffeed2;font-family:var(--mono);font-weight:400;letter-spacing:.07em;font-size:clamp(28px,8vw,44px);line-height:1;text-shadow:0 3px 0 #28160e,0 0 18px #ffb84d44}
.modal-card.kitchen #modal-body p{text-align:center;color:#f6e2c8;font-size:13px;margin:0 0 20px}
.kit-slots{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 4px 18px}
.kit-slots::before{content:"";position:absolute;left:-14px;right:-14px;top:-9px;height:6px;background:linear-gradient(#fad682 0 2px,#c49642 2px);box-shadow:0 2px 0 #0004}
.kit-slot{--kr:#a87a50;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:32px 8px 10px;min-height:44px;background:#f8e8c6;border:0;border-radius:0;text-align:center;color:var(--ink-brown);height:auto;box-shadow:0 -2px 0 var(--kr),0 2px 0 var(--kr),-2px 0 0 var(--kr),2px 0 0 var(--kr),5px 6px 0 0 #1a0a0866;font:15px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-shadow:none}
.kit-slot::before{content:"";position:absolute;top:-10px;left:0;right:0;height:12px;background:linear-gradient(#c49642,#c49642) 22% 0/2px 100% no-repeat,linear-gradient(#c49642,#c49642) 78% 0/2px 100% no-repeat}
.kit-slot::after{content:"";position:absolute;top:1px;left:0;right:0;height:10px;background:radial-gradient(circle at 22% 4px,#c8403a 0 3.5px,#0000 4px),radial-gradient(circle at 78% 4px,#c8403a 0 3.5px,#0000 4px)}
.kit-slot:hover,.kit-slot:focus-visible{background:#fff6dc;--kr:#ffd24e;outline:0}
.kit-slot:focus-visible{outline:3px solid #fff6dc;outline-offset:3px}
.kit-slot:active{box-shadow:0 -2px 0 var(--kr),0 2px 0 var(--kr),-2px 0 0 var(--kr),2px 0 0 var(--kr),2px 3px 0 0 #1a0a0866}
.kit-ico{display:block;width:48px!important;height:48px!important;margin-top:2px;image-rendering:pixelated}
.kit-name{font-family:var(--mono);font-size:22px;line-height:1.05;letter-spacing:.02em;color:var(--ink-brown);padding-bottom:5px;border-bottom:2px solid #d67864;width:100%}
.kit-desc{font-size:12.5px;line-height:1.35;color:#6a4a36}
.kit-slot .vend-lcd{margin-top:auto;border:2px solid #8a603a;background:#1e2822;color:#bdf5c6;font:700 15px ui-monospace,monospace;letter-spacing:.02em;border-radius:5px}
.kit-slot.short .vend-lcd{color:#ff9a86}
.kit-slot.bought{background:#d2c6b4;border-color:#9a8c7c}.kit-slot.bought .kit-ico{filter:grayscale(1);opacity:.55}.kit-slot.bought .kit-name{color:#867a6c;border-color:#9a8c7c}.kit-slot.bought .kit-desc{color:#867a6c}.kit-slot.bought .vend-lcd{color:#7a847c}.kit-slot.bought::after{filter:grayscale(1) brightness(.8)}
.modal-card.kitchen #modal-actions{margin:0 -14px;padding:16px 14px 12px;background:radial-gradient(circle at 26px 55%,#6a6e7a 0 7px,#262a32 7.5px 9px,#0000 9.5px) 0 0/auto 100% no-repeat,radial-gradient(circle at 56px 55%,#6a6e7a 0 7px,#262a32 7.5px 9px,#0000 9.5px) 0 0/auto 100% no-repeat,radial-gradient(circle at 86px 55%,#6a6e7a 0 7px,#262a32 7.5px 9px,#0000 9.5px) 0 0/auto 100% no-repeat,linear-gradient(#5c3826,#4a2c1e);border-top:9px solid #deb074;box-shadow:inset 0 2px 0 #2a160e}
.kit-flap{flex:0 1 auto!important;margin:0 auto;min-width:220px;--face:#2a180f;--lit:#6a4630;--shade:#170c07;--rim:#c49642;--hover-rim:#ffd24e;--btn-ink:#ffeed2}
@media(max-width:560px){.kit-slots{grid-template-columns:1fr;gap:12px}.kit-slot{display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto auto;gap:2px 10px;text-align:left;justify-items:start;padding:10px 10px 10px 40px}
  .kit-slot .vend-key{top:10px}.kit-ico{grid-row:1 / span 2;width:48px!important;height:48px!important;margin:0}
  .kit-name{grid-column:2;font-size:21px;width:auto;padding-bottom:3px}.kit-desc{grid-column:1 / -1;grid-row:3}.kit-slot .vend-lcd{grid-column:1 / -1;margin-top:4px;text-align:center}
  .modal-card.kitchen #modal-actions{background:linear-gradient(#5c3826,#4a2c1e)}}
/* while the start screen is up, the touch controls give the soup picker the room */
#game:has(#loading:not([hidden])) #controls{display:none}
/* ---- tutorial tips: a warm panel with a gold rule and the bowl icon; under the HUD on desktop, a slim strip above the vitals when compact ---- */
#tip-layer{position:absolute;left:0;right:0;top:12px;z-index:2;display:flex;justify-content:center;padding:0 12px;pointer-events:none}
.tip{pointer-events:auto;display:grid;grid-template-columns:auto 1fr;align-items:start;gap:4px 12px;width:min(100%,430px);background:#211623f2;border:1px solid #755349;border-top:3px solid var(--gold);border-radius:10px;padding:10px 12px;box-shadow:0 6px 24px #000a;color:var(--text);font-size:14px;line-height:1.4}
.tip[hidden]{display:none}
.tip-icon{width:38px;height:auto;margin-top:2px;image-rendering:pixelated}
.tip-label{display:block;font-family:Monogram,ui-monospace,monospace;font-size:22px;line-height:1;letter-spacing:.14em;color:var(--gold)}
.tip p{margin:4px 0 0}
.tip button{grid-column:2;justify-self:end;min-height:40px;padding:2px 14px 6px}
.ok-x{display:none}
body.compact .tip{grid-template-columns:auto 1fr auto;align-items:center;gap:8px;width:100%;padding:6px 6px 6px 10px;font-size:13px;line-height:1.3}
body.compact .tip-icon{width:26px;margin:0}
body.compact .tip-label{display:none}
body.compact .tip button{grid-column:auto;min-height:44px;min-width:44px;padding:0 0 4px;font-size:32px;line-height:1}
body.compact .ok-full{display:none}body.compact .ok-x{display:inline}
body:not(.motion-reduced) .tip{animation:tipIn .25s ease-out}
@keyframes tipIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
body.compact:not(.motion-reduced) .tip{animation-name:tipInUp}
@keyframes tipInUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
body.text-large .tip{font-size:16px}
body.text-large.compact .tip{font-size:14px}

/* ---- one button system, shared with the canvas buttons (souplike.c, pix_btn) ----
   Chunky pixel buttons: a hard 2px outline whose corners are stepped (the outline is four offset box-shadows, so
   the corners are notched instead of rounded), a lit top edge, and a darker bottom edge that squashes when pressed.
   Variants set the colours with custom properties: .primary (gold), .danger (red), .brown (brass and leather),
   .icon (square keys) and .small. Nothing here changes a button's box, so a press never moves the layout. */
button,summary,header>a{
  --rim:#120a16;--face:#3a2836;--lit:#5c4458;--shade:#231621;--btn-ink:#f6f0e2;--hover-rim:#fcd44e;--eb:4px;
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:4px 16px 8px;margin:0;
  font:400 24px/1 var(--mono);letter-spacing:.04em;text-align:center;text-decoration:none;color:var(--btn-ink);text-shadow:0 2px 0 #0008;
  background:var(--face);border:0;border-radius:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;
  box-shadow:0 -2px 0 0 var(--rim),0 2px 0 0 var(--rim),-2px 0 0 0 var(--rim),2px 0 0 0 var(--rim),inset 0 2px 0 0 var(--lit),inset 0 calc(var(--eb) * -1) 0 0 var(--shade)}
summary{list-style:none}summary::-webkit-details-marker{display:none}
button:hover:not(:disabled),summary:hover,header>a:hover{--rim:var(--hover-rim);background:color-mix(in srgb,var(--face) 86%,#fff)}
button:active:not(:disabled),summary:active,header>a:active{--eb:2px;--lit:var(--shade);transform:translateY(2px)}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,summary:focus-visible,header>a:focus-visible{outline:3px solid var(--gold);outline-offset:5px;--rim:var(--hover-rim)}
@media(prefers-reduced-motion:no-preference){body:not(.motion-reduced) button,body:not(.motion-reduced) summary,body:not(.motion-reduced) header>a{transition:transform .05s linear}}
header>a{padding:4px 14px 8px}
.primary,#start,#settings-close,#end-controls button:first-of-type{--face:#fcd44e;--lit:#fff0a8;--shade:#c28f1c;--rim:#3a2410;--hover-rim:#fff6cc;--btn-ink:#18101c;text-shadow:none}
.danger,#confirm-controls [data-key="89"]{--face:#8c2f2a;--lit:#c4574c;--shade:#5a1b18;--rim:#1c0a0c;--hover-rim:#ff8a7a;--btn-ink:#ffe9e4}
.brown,.cookbook-card .setting-actions button,.tip button{--face:#6b3f26;--lit:#a56a44;--shade:#42261a;--rim:#2a160c;--hover-rim:#ffd24e;--btn-ink:#ffe9b8}
.cookbook-card{--hover-rim:#8a2f1d}.cookbook-card button:focus-visible{outline-color:#8a2f1d}
.icon,.dpad button{padding:0 0 6px;min-width:44px;font-size:28px}
button.small{min-height:36px;font-size:16px;padding:2px 10px 6px}
.perk-choice{--face:#2f2030;font:400 15px/1.4 ui-sans-serif,system-ui,sans-serif;letter-spacing:0;text-shadow:none;display:block;text-align:left}
.perk-choice strong,.perk-choice span{text-shadow:none}
.dpad{gap:6px}
kbd{display:inline-block;margin-left:6px;padding:2px 5px 3px;font:400 16px/1 var(--mono);letter-spacing:.04em;color:#f0d58a;background:#140c18;text-shadow:none;box-shadow:0 -2px 0 #59404b,0 2px 0 #59404b,-2px 0 0 #59404b,2px 0 0 #59404b}
body.text-large kbd{font-size:16px}
body.text-large .actions button,body.text-large .dpad button,body.text-large #pockets button{font-size:24px}
.actions button,.actions{gap:6px}

/* inputs: the seed box, the volume slider, check boxes and radios */
input:not([type]),input[type=number]{font:400 24px/1 var(--mono);letter-spacing:.04em;min-height:44px;padding:4px 10px 6px;border:0;border-radius:0;background:#140c18;box-shadow:0 -2px 0 #59404b,0 2px 0 #59404b,-2px 0 0 #59404b,2px 0 0 #59404b,inset 0 3px 0 #0008}
input[type=number]:hover,input[type=number]:focus{box-shadow:0 -2px 0 var(--gold),0 2px 0 var(--gold),-2px 0 0 var(--gold),2px 0 0 var(--gold),inset 0 3px 0 #0008}
#seed-form{gap:12px}
.setting input[type=checkbox],.setting input[type=radio]{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:20px;height:20px;margin:0 4px;border-radius:0;background:#140c18;cursor:pointer;box-shadow:0 -2px 0 #997157,0 2px 0 #997157,-2px 0 0 #997157,2px 0 0 #997157,inset 0 3px 0 #0008}
.setting input[type=checkbox]::before,.setting input[type=radio]::before{content:"";width:10px;height:10px;background:var(--gold);box-shadow:inset 0 -2px 0 #c28f1c;visibility:hidden}
.setting input[type=radio]::before{width:8px;height:8px;box-shadow:0 -2px 0 var(--gold),0 2px 0 var(--gold),-2px 0 0 var(--gold),2px 0 0 var(--gold)}
.setting input:checked::before{visibility:visible}
.setting input:checked{box-shadow:0 -2px 0 var(--gold),0 2px 0 var(--gold),-2px 0 0 var(--gold),2px 0 0 var(--gold),inset 0 3px 0 #0008}
.setting input[type=range]{-webkit-appearance:none;appearance:none;background:none;cursor:pointer}
.setting input[type=range]::-webkit-slider-runnable-track{height:10px;background:#140c18;box-shadow:0 -2px 0 #997157,0 2px 0 #997157,-2px 0 0 #997157,2px 0 0 #997157,inset 0 3px 0 #0008}
.setting input[type=range]::-moz-range-track{height:10px;background:#140c18;box-shadow:0 -2px 0 #997157,0 2px 0 #997157,-2px 0 0 #997157,2px 0 0 #997157,inset 0 3px 0 #0008}
.setting input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:30px;margin-top:-10px;border:0;border-radius:0;background:var(--gold);box-shadow:0 -2px 0 #3a2410,0 2px 0 #3a2410,-2px 0 0 #3a2410,2px 0 0 #3a2410,inset 0 2px 0 #fff0a8,inset 0 -4px 0 #c28f1c}
.setting input[type=range]::-moz-range-thumb{width:20px;height:30px;border:0;border-radius:0;background:var(--gold);box-shadow:0 -2px 0 #3a2410,0 2px 0 #3a2410,-2px 0 0 #3a2410,2px 0 0 #3a2410,inset 0 2px 0 #fff0a8,inset 0 -4px 0 #c28f1c}
.setting input[type=range]:active::-webkit-slider-thumb{box-shadow:0 -2px 0 #3a2410,0 2px 0 #3a2410,-2px 0 0 #3a2410,2px 0 0 #3a2410,inset 0 2px 0 #c28f1c}

/* phones: the header and the touch pad use the font's native 16px grid so labels fit */
@media(max-width:700px){
  header>a,.header-actions button{font-size:16px;padding:2px 8px 6px}
  .header-actions button#settings-open{min-width:44px;padding:0 0 4px;font-size:24px}
  .actions button{font-size:32px;padding:0 6px 6px}
  #inventory summary{font-size:32px}
  .dpad{gap:6px}
  kbd{display:none}
}
/* short landscape phones: touch only, so no keyboard hints either */
@media(max-height:520px) and (min-width:600px){kbd{display:none}.actions button{font-size:16px;padding:2px 6px 6px}#controls>*{flex-shrink:0}#controls{justify-content:flex-start}}

/* desktop: the canvas draws its own recipe and pockets list, so the page's pocket row (and its recipe line) sits
   out of the layout. It stays in the page for screen readers, and shows as an overlay if it takes keyboard focus.
   The end-of-run and abandon buttons float over the canvas, so no run state can resize it. */
body:not(.compact) #inventory{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body:not(.compact) #inventory:focus-within{left:12px;right:12px;bottom:calc(100% + 12px);width:auto;height:auto;margin:0;padding:8px;overflow:visible;clip-path:none;white-space:normal;z-index:6;background:#241827f2;box-shadow:0 0 0 2px #997157}
body:not(.compact) #inventory:focus-within #recipe-label{display:none}
body:not(.compact) #end-controls{position:absolute;left:12px;right:12px;bottom:calc(100% + 14px);z-index:6}
/* the canvas draws its own clickable abandon buttons, so on desktop the page's pair is for screen readers only */
body:not(.compact) #confirm-controls:not(:focus-within){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body:not(.compact) #confirm-controls:focus-within{position:absolute;left:12px;right:12px;bottom:calc(100% + 14px);z-index:6}
body:not(.compact).touch-hide #controls,body:not(.compact).touch-auto #controls{padding:0;border:0;gap:0}
@media (hover:none),(pointer:coarse),(max-width:700px){body:not(.compact).touch-auto #controls{padding:12px;border:1px solid var(--edge);border-top:0}}
/* desktop end of run: the canvas draws New run and Same seed, so the page keeps its result line and Share button visible */
body:not(.compact) #end-controls button[data-key]:not(:focus){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* the start screen keeps its shape while the game loads: the picker's cards arrive with the game, so their
   space is held, and the start buttons don't jump as they become clickable */
#load-status{min-height:23px}
#soup-options{min-height:134px}
@media(max-width:700px){#soup-options{min-height:156px}}
@media(max-height:520px) and (min-width:600px){#soup-options{min-height:150px}}