/* COOK — the game's windows: studio, oven, verdict, launch, menu, coin, docs. Built on the tokens in os.css. */
.px { image-rendering: pixelated; image-rendering: crisp-edges; image-rendering: pixelated; }
canvas.px, .dish-img { display: block; width: 100%; height: auto; aspect-ratio: 1; }
kbd { font: inherit; font-size: 12px; letter-spacing: .06em; border: 1px solid currentColor; padding: 0 4px; opacity: .75; margin-left: 6px; }
.lbl { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 8px 0 6px; }
.lbl b { color: var(--creme); font-weight: 400; float: right; }
.kicker-s { font-size: 13px; letter-spacing: .3em; text-transform: uppercase; color: var(--braise); margin-bottom: 8px; }
.empty { padding: 28px; color: var(--dim); grid-column: 1 / -1; }
.fine { font-size: 14px; color: var(--dim); line-height: 1.5; margin-top: 12px; }
.v-name { font: 400 46px/1 var(--font-display); color: var(--creme); margin-bottom: 10px; overflow-wrap: anywhere; } .v-name.s { font-size: 30px; margin: 10px 0 2px; }
.tick { color: var(--encre); letter-spacing: .1em; margin-bottom: 8px; }
.frame { border: 2.4px solid var(--encre); box-shadow: var(--ombre); background: var(--papier); line-height: 0; position: relative; }
.frame.small { box-shadow: 4px 4px 0 var(--braise); }
.cap { font-size: 13px; color: var(--dim); margin-top: 14px; letter-spacing: .06em; }
.meter { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin: 5px 0; }
.meter span { width: 74px; color: var(--dim); } .meter i { flex: 1; height: 8px; background: var(--grid); display: block; } .meter b { display: block; height: 100%; background: var(--encre); transition: width .5s steps(8); }
.starrow { display: inline-flex; gap: 4px; } .star { font-size: 22px; line-height: 1; color: var(--grid); transition: color .2s, text-shadow .2s; } .starrow.big .star { font-size: 46px; }
.star.on { color: var(--encre); text-shadow: 0 0 10px var(--braise); } .star.pop { animation: starpop .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes starpop { from { transform: scale(2.6) rotate(-30deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- studio ---------- */
.studio { display: grid; grid-template-columns: 252px minmax(0, 1fr) 232px; grid-template-rows: minmax(0, 1fr) auto; height: 100%; }
.pantry { border-right: 1.6px solid var(--encre); padding: 10px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.tabs { flex: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 10px; }
.tab { font-size: 12px; letter-spacing: .1em; padding: 7px 0; border: 1px solid var(--grid); color: var(--encre); transition: background .12s, color .12s, border-color .12s; }
.tab:hover { border-color: var(--encre); } .tab.on { background: var(--encre); color: var(--papier); border-color: var(--encre); text-shadow: none; }
.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; flex: 1; }
.tile { aspect-ratio: 1; border: 1px solid var(--grid); display: grid; place-items: center; position: relative; transition: transform .14s steps(3), border-color .12s, background .12s; touch-action: manipulation; }
.tile:hover { border-color: var(--encre); transform: translateY(-3px); background: color-mix(in srgb, var(--grid) 60%, transparent); }
.tile.on { border-color: var(--creme); box-shadow: 3px 3px 0 var(--braise); } .tile img { image-rendering: pixelated; pointer-events: none; display: block; max-width: 100%; }
.tile .none { font-size: 12px; color: var(--dim); letter-spacing: .1em; }
.grid .wide { grid-column: 1 / -1; margin: 6px 0 0; } .sauce-pane { grid-column: 1 / -1; }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .swatches.wide { grid-column: 1 / -1; }
.sw { aspect-ratio: 1.4; background: var(--c); border: 2px solid var(--papier); outline: 1px solid var(--grid); transition: transform .12s steps(3); } .sw:hover { transform: translateY(-2px); } .sw.on { outline: 2px solid var(--creme); }
.row { display: flex; gap: 6px; flex-wrap: wrap; }
.hint { font-size: 13px; color: var(--dim); min-height: 2.6em; margin-top: 8px; letter-spacing: .04em; }
.stage-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 12px 14px 6px; }
.stage-box { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.stage { width: min(100cqw, 100cqh); aspect-ratio: 1; position: relative; border: 2.4px solid var(--encre); box-shadow: 5px 5px 0 var(--rouille); background: var(--papier); touch-action: none; user-select: none; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.stage #over { pointer-events: none; } .stage.inking { cursor: crosshair; } .stage.drop-ok { outline: 2px dashed var(--creme); outline-offset: 3px; }
.keys { font-size: 13px; color: var(--dim); text-align: center; padding-top: 8px; letter-spacing: .04em; } .keys kbd { margin: 0 2px 0 6px; }
.side { border-left: 1.6px solid var(--encre); padding: 10px; display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow: auto; }
.critic { border: 1px solid var(--grid); padding: 10px; } .critic .stars { display: flex; gap: 4px; font-size: 30px; line-height: 1; margin-bottom: 4px; }
.critic .star { font-size: 30px; } .critic .rank { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.pairs { font-size: 13px; color: var(--encre); margin-top: 8px; line-height: 1.4; }
.layers { display: flex; flex-direction: column; gap: 3px; min-height: 40px; flex: 1; overflow: auto; }
.layer { display: flex; align-items: center; gap: 8px; padding: 3px 6px; border: 1px solid transparent; text-align: left; font-size: 14px; }
.layer img { image-rendering: pixelated; flex: none; } .layer:hover { border-color: var(--grid); } .layer.on { background: var(--encre); color: var(--papier); text-shadow: none; }
.seltools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .seltools .lbl { grid-column: 1 / -1; } .seltools .os-btn { padding: 0 4px; min-height: 28px; font-size: 13px; }
.studio-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 2.4px solid var(--encre); }
.studio-bar .grow { flex: 1; } .studio-bar .os-btn.big { width: auto; min-width: 230px; border: 2px solid var(--encre); border-top-width: 2px; }
.ghost { position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none; image-rendering: pixelated; filter: drop-shadow(4px 5px 0 rgba(0, 0, 0, .45)); }

/* ---------- oven ---------- */
.oven { display: grid; grid-template-columns: minmax(0, 1fr) 330px; height: 100%; }
.oven-stage { position: relative; display: grid; place-items: center; padding: 14px; min-height: 0; overflow: hidden; }
.oven-stage canvas { width: 100%; max-height: 100%; aspect-ratio: 288 / 252; border: 2.4px solid var(--encre); box-shadow: 5px 5px 0 var(--rouille); image-rendering: pixelated; object-fit: contain; }
.o-callout { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); font: 400 52px/1 var(--font-display); color: var(--creme); white-space: nowrap; pointer-events: none; text-shadow: 3px 3px 0 var(--rouille); animation: callout .5s cubic-bezier(.2, 1.4, .4, 1); }
.o-callout.good { color: var(--encre); } .o-callout.warn { color: var(--braise); } .o-callout.bad { color: var(--braise); animation: callout .5s, shake .3s 2; }
@keyframes callout { from { transform: translateX(-50%) scale(.3); opacity: 0; } } @keyframes shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }
.o-count { position: absolute; inset: 0; display: grid; place-items: center; font: 400 150px/1 var(--font-display); color: var(--creme); text-shadow: 6px 6px 0 var(--braise); animation: count .6s cubic-bezier(.2, 1.3, .4, 1); pointer-events: none; background: color-mix(in srgb, var(--papier) 40%, transparent); }
@keyframes count { from { transform: scale(2.4); opacity: 0; } 70% { opacity: 1; } to { transform: scale(1); } }
.oven-side { border-left: 1.6px solid var(--encre); padding: 14px; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.oven-side section { display: flex; flex-direction: column; gap: 10px; flex: 1; } .oven-side section[hidden] { display: none; }
.methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.method { text-align: left; border: 1px solid var(--grid); padding: 9px; display: flex; flex-direction: column; gap: 4px; transition: transform .14s steps(3), border-color .12s; }
.method:hover { border-color: var(--encre); transform: translateY(-2px); } .method.on { border-color: var(--creme); background: color-mix(in srgb, var(--grid) 70%, transparent); box-shadow: 3px 3px 0 var(--braise); }
.method b { font-weight: 400; font-size: 17px; color: var(--creme); } .method small { font-size: 13px; color: var(--dim); min-height: 2.4em; line-height: 1.25; }
.mm { display: grid; gap: 3px; } .mm i { font-style: normal; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; display: grid; grid-template-columns: 56px 1fr; align-items: center; color: var(--dim); } .mm u { display: block; height: 5px; background: var(--encre); }
#start { margin-top: auto; border: 2px solid var(--encre); }
.gauges { display: flex; gap: 16px; }
.thermo { width: 54px; height: 190px; border: 2px solid var(--encre); position: relative; flex: none; background: var(--papier); }
.thermo .zone { position: absolute; left: 0; right: 0; } .thermo .sweet { bottom: 50%; height: 32%; background: color-mix(in srgb, var(--creme) 22%, transparent); border-top: 1px dashed var(--creme); border-bottom: 1px dashed var(--creme); }
.thermo .hot { top: 0; height: 15%; background: color-mix(in srgb, var(--braise) 38%, transparent); }
.thermo .fill { position: absolute; left: 4px; right: 4px; bottom: 4px; background: var(--encre); height: 0; max-height: calc(100% - 8px); } .thermo .fill.hot { background: var(--braise); }
.thermo span { position: absolute; top: -20px; left: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: .14em; color: var(--dim); }
.gauges { margin-top: 20px; }
.doneness { flex: 1; min-width: 0; }
.cbar { height: 20px; border: 2px solid var(--encre); position: relative; } .cbar.slim { height: 12px; margin-bottom: 4px; }
.cbar .fill { display: block; height: 100%; background: var(--encre); width: 0; transition: width .1s linear; } .cbar .fill.ok { background: var(--creme); } .cbar .fill.burn { background: var(--braise); }
.cbar .band { position: absolute; top: -5px; bottom: -5px; border-left: 2px solid var(--creme); border-right: 2px solid var(--creme); background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--creme) 50%, transparent) 0 2px, transparent 2px 5px); pointer-events: none; }
.heat { min-height: 64px; font-size: 18px; letter-spacing: .12em; text-transform: uppercase; border-width: 2px; user-select: none; touch-action: none; }
.heat.held { background: var(--braise); border-color: var(--braise); color: var(--creme); box-shadow: 0 0 22px var(--braise); text-shadow: none; transform: translate(2px, 2px); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .serve { min-height: 52px; font-size: 18px; }
.os-btn.pulse { animation: pulse .35s steps(2) infinite; border-color: var(--creme); color: var(--creme); } @keyframes pulse { 50% { background: var(--braise); color: var(--papier); } }
.tipline { font-size: 14px; color: var(--dim); line-height: 1.45; margin-top: auto; }

/* ---------- verdict + coin ---------- */
.verdict, .coin-app { display: grid; grid-template-columns: minmax(280px, 44%) 1fr; gap: 28px; padding: 24px; height: 100%; overflow: auto; align-items: start; }
.v-info, .c-info { min-width: 0; }
.v-stars { min-height: 54px; margin: 4px 0 2px; } .v-rank { font-size: 17px; letter-spacing: .26em; text-transform: uppercase; color: var(--braise); margin-bottom: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s steps(5); min-height: 1.4em; } .v-rank.in { opacity: 1; transform: none; animation: stamp .5s cubic-bezier(.2, 1.7, .4, 1); transform-origin: left center; }
@keyframes stamp { from { transform: scale(2.6) rotate(-7deg); opacity: 0; } 60% { opacity: 1; } }
.flash { position: absolute; inset: 0; background: var(--creme); pointer-events: none; z-index: 30; animation: flash .55s ease-out forwards; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }
.v-meters { margin: 8px 0; } .v-notes { font-size: 14px; color: var(--dim); min-height: 1.4em; margin-bottom: 8px; }
.recipe { display: grid; grid-template-columns: 90px 1fr; gap: 6px 10px; border-top: 1px solid var(--grid); padding-top: 12px; font-size: 15px; }
.recipe dt { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--dim); padding-top: 3px; } .recipe dd { color: var(--creme); }
.recipe .ing { display: flex; flex-wrap: wrap; gap: 4px 14px; } .recipe .ing span { display: inline-flex; align-items: center; gap: 6px; } .recipe .ing img { image-rendering: pixelated; }
.v-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.story { font-size: 15px; line-height: 1.55; color: var(--creme); margin: 8px 0 14px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--grid); border-bottom: 1px solid var(--grid); margin: 8px 0; }
.stat-row div { padding: 10px 8px; border-right: 1px solid var(--grid); } .stat-row div:last-child { border: 0; } .stat-row small { display: block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } .stat-row b { font-weight: 400; font-size: 20px; color: var(--creme); }
.ca-chip { display: flex; gap: 10px; align-items: center; width: 100%; margin: 14px 0 0; padding: 9px 12px; border: 1px dashed var(--encre); font-size: 14px; text-align: left; transition: background .12s, color .12s; }
.ca-chip b { font-weight: 400; flex: 1; overflow: hidden; text-overflow: ellipsis; color: var(--creme); } .ca-chip i { font-style: normal; color: var(--braise); } .ca-chip:hover { background: var(--encre); color: var(--papier); } .ca-chip:hover b, .ca-chip:hover i { color: var(--papier); }

/* ---------- launch (the reference's mail window) ---------- */
.launch { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: 100%; }
.mail { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.mail-field { display: grid; grid-template-columns: 96px minmax(0, 1fr); border-bottom: 1.6px solid var(--encre); position: relative; }
.mail-field .k { padding: 13px 14px; border-right: 1.6px solid var(--encre); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; }
.mail-field.tall { flex: 1; min-height: 150px; } .mail-field.tall textarea { height: 100%; }
.mail-field .v { padding: 10px 14px; display: grid; gap: 3px; } .mail-field .v small { font-size: 13px; color: var(--dim); }
.mail-field input, .mail-field textarea { width: 100%; padding: 13px 14px; font-size: 16.5px; } .mail-field textarea { resize: none; line-height: 1.5; }
.mail-field input::placeholder, .mail-field textarea::placeholder { color: var(--dim); } .mail-field:focus-within .k { background: var(--encre); color: var(--papier); text-shadow: none; }
.side-note { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--dim); pointer-events: none; }
.status { min-height: 44px; padding: 12px 14px; font-size: 15px; color: var(--creme); } .status.bad { color: var(--braise); }
.mail .os-btn.big { margin-top: auto; flex: none; }
.l-side { border-left: 2.4px solid var(--encre); padding: 18px; overflow: auto; }

/* ---------- menu ---------- */
.menu-app { display: flex; flex-direction: column; height: 100%; }
.menu-bar { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1.6px solid var(--encre); flex-wrap: wrap; }
.seg { display: flex; } .seg button { padding: 6px 12px; border: 1px solid var(--encre); margin-left: -1px; font-size: 14px; } .seg button.on { background: var(--encre); color: var(--papier); text-shadow: none; }
.menu-bar input { flex: 1; min-width: 160px; border: 1px solid var(--grid); padding: 7px 10px; font-size: 15px; } .menu-bar input:focus { border-color: var(--encre); } .total { font-size: 14px; color: var(--dim); }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 14px; padding: 16px; overflow: auto; align-content: start; flex: 1; }
.mcard { border: 1.6px solid var(--encre); padding: 8px; display: grid; gap: 4px; transition: transform .16s steps(3), box-shadow .16s steps(3); }
.mcard:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--braise); } .mcard b { font-weight: 400; color: var(--creme); font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mcard small { font-size: 13px; color: var(--dim); }
.mimg { aspect-ratio: 1; background: var(--grid); display: block; line-height: 0; } .mimg img { width: 100%; height: 100%; image-rendering: pixelated; display: block; transition: opacity .3s; }
.mcard .starrow .star { font-size: 16px; }

/* ---------- docs + links ---------- */
.doc { padding: 26px 30px; overflow: auto; height: 100%; }
.steps { list-style: none; margin: 16px 0; } .steps li { display: grid; grid-template-columns: 64px 1fr; gap: 14px; border-top: 1px solid var(--grid); padding: 16px 0; }
.steps .fig { font: 400 42px/1 var(--font-display); color: var(--braise); } .steps b { font-weight: 400; font-size: 18px; color: var(--creme); } .steps p { font-size: 16.5px; line-height: 1.6; margin-top: 4px; color: var(--creme); }
.links { display: grid; } .lnk { display: flex; gap: 14px; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--grid); text-align: left; width: 100%; transition: background .12s, color .12s; }
.lnk:last-child { border: 0; } a.lnk:hover, button.lnk:hover { background: var(--encre); color: var(--papier); text-shadow: none; } .lnk:hover .txt small { color: var(--papier); }
.lnk .ic { width: 36px; height: 36px; border: 1.6px solid currentColor; display: grid; place-items: center; font-size: 15px; flex: none; } .lnk .txt { display: grid; gap: 2px; } .lnk b { font-weight: 400; font-size: 17px; } .lnk small { font-size: 13px; color: var(--dim); }

@media (max-width: 900px) {
  .studio { grid-template-columns: 1fr; grid-template-rows: auto auto auto auto; overflow: auto; align-content: start; }
  .stage-wrap { height: min(96vw, 560px); }
  .pantry { border-right: 0; border-bottom: 1.6px solid var(--encre); max-height: 210px; min-height: 150px; } .tabs { grid-template-columns: repeat(8, auto); overflow: auto; } .grid { grid-template-columns: repeat(auto-fill, 56px); }
  .side { border-left: 0; border-top: 1.6px solid var(--encre); } .studio-bar { flex-wrap: wrap; } .studio-bar .os-btn.big { min-width: 100%; }
  .oven { grid-template-columns: 1fr; overflow: auto; } .oven-side { border-left: 0; border-top: 1.6px solid var(--encre); } .o-callout { font-size: 34px; }
  .verdict, .coin-app, .launch { grid-template-columns: 1fr; } .l-side { border-left: 0; border-top: 2.4px solid var(--encre); } .v-name { font-size: 34px; }
}

/* legibility: body copy in cream, labels brighter */
.story, .doc p, .pairs, .tipline, .hint, .keys, .fine { color: var(--creme); } .hint, .keys, .fine, .tipline { opacity: .82; }
.lbl, .kicker-s { letter-spacing: .1em; }
.mail-field input::placeholder, .mail-field textarea::placeholder { color: var(--dim); }