:root {
  --bg: #1f2a24; --panel: #fbf7ee; --panel2: #f1eadb; --ink: #2b2a26; --muted: #7b7568; --line: #ddd3bf;
  --accent: #2f7d4f; --accent2: #e8a33d; --bad: #c0463a; --good: #2f8a4f; --top: #263a2f;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); }
button { font: inherit; cursor: pointer; border: 1px solid var(--line); background: #fff; color: var(--ink); border-radius: 8px; padding: 5px 10px; }
button:hover:not(:disabled) { background: #f4efe2; }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.primary:hover:not(:disabled) { background: #276a43; }
button.danger { color: var(--bad); }
button.small, .small { font-size: 12px; }
input.search, select, textarea { font: inherit; padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
input.search { min-width: 180px; flex: 1; }
textarea { width: 100%; font-family: ui-monospace, monospace; font-size: 11px; }
kbd { background: #eee; border: 1px solid #ccc; border-radius: 4px; padding: 0 4px; font-size: 12px; }
a { color: var(--accent); cursor: pointer; text-decoration: underline; }
.muted { color: var(--muted); }
.row { display: flex; align-items: center; }
.gap { gap: 8px; } .wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 6px; }
.hint { color: var(--muted); font-size: 13px; }
.warn { background: #fff1d6; border: 1px solid #f0c977; padding: 8px; border-radius: 8px; }

/* Top bar */
#topbar { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--top); color: #fff; }
.brand { font-weight: 800; font-size: 18px; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.brand .ico { width: 38px; height: 38px; margin: -4px 0; }
.brand .ver { font-size: 11px; font-weight: 600; opacity: 0.65; align-self: flex-end; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.pill { background: rgba(255, 255, 255, 0.1); padding: 4px 10px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#money { font-weight: 700; min-width: 110px; }
#money.neg { color: #ff9a8f; }
#dishcount { cursor: pointer; }
.speed { display: flex; gap: 2px; }
.speed button, nav button { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.15); padding: 4px 8px; }
.speed button.active { background: var(--accent2); border-color: var(--accent2); color: #222; }
.speed button:hover, nav button:hover { background: rgba(255, 255, 255, 0.2) !important; }
nav { margin-left: auto; display: flex; gap: 4px; }
nav button { position: relative; white-space: nowrap; }
.badge { position: absolute; top: -5px; right: -5px; background: var(--bad); color: #fff; font-style: normal; font-size: 11px; border-radius: 99px; padding: 0 5px; }
.badge:empty { display: none; }
.badge.faded { opacity: 0.45; }
#goalbar { height: 26px; line-height: 26px; padding: 0 14px; background: #f3e3b5; font-size: 13px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Layout */
#main { position: absolute; top: 74px; bottom: 0; left: 0; right: 0; display: flex; }
#buildbar { width: 208px; overflow-y: auto; background: var(--panel2); border-right: 1px solid var(--line); padding: 6px; }
#viewport { flex: 1; position: relative; overflow: hidden; }
#map { display: block; cursor: grab; touch-action: none; }
/* iPhones treat two quick taps as a double-tap zoom and drop the second tap: windows and bars don't zoom. */
#modal, #modal *, #topbar, #topbar *, #buildbar, #buildbar *, #inspector, #inspector * { touch-action: manipulation; }
body.placing #map { cursor: crosshair; }
#inspector { width: 330px; overflow-y: auto; background: var(--panel); border-left: 1px solid var(--line); padding: 12px; }
#hoverinfo { position: absolute; pointer-events: none; background: rgba(20, 25, 22, 0.85); color: #fff; font-size: 12px; padding: 4px 8px; border-radius: 6px; max-width: 320px; white-space: pre-line; }

/* Build menu: icon tiles in foldable groups */
.bgroup { margin-bottom: 6px; }
.bgroup-title { display: flex; align-items: center; gap: 4px; width: 100%; border: 0; background: transparent; padding: 4px 4px; margin: 2px 0;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; text-align: left; border-radius: 6px; }
.bgroup-title:hover:not(:disabled) { background: rgba(0, 0, 0, 0.05); color: var(--ink); }
.bgroup-title .chev { display: inline-block; width: 10px; font-size: 10px; transition: transform 0.15s; }
.bgroup.folded .chev { transform: rotate(-90deg); }
.bgroup-title .bcount { margin-left: auto; font-weight: 600; letter-spacing: 0; background: rgba(0, 0, 0, 0.06); border-radius: 99px; padding: 0 6px; }
.bgroup-title .newtag { order: 1; }
.bgroup.folded .bgrid { display: none; }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.bbtn { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 3px 1px 2px; text-align: center; border-radius: 7px; }
.bicon { font-size: 24px; line-height: 1; height: 26px; display: flex; align-items: center; }
.bicon .ico { width: 26px; height: 26px; }
.bname { font-size: 10.5px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.bcost { font-size: 10px; color: var(--muted); line-height: 1.2; white-space: nowrap; }
.bcost .ico { width: 0.95em !important; height: 0.95em !important; }
.bbtn.poor .bcost { color: var(--bad); opacity: 0.8; }
.bbtn.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: #eaf4ec; }
.bbtn .newtag { position: absolute; top: -3px; right: -2px; z-index: 1; }
.bown { position: absolute; top: 2px; right: 3px; font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--muted); }
.lockedb { width: 100%; margin-top: 4px; background: transparent; border-style: dashed; color: var(--muted); font-size: 12px; font-weight: 600; padding: 6px; }

/* Inspector */
.insp-head { display: flex; gap: 10px; align-items: center; }
.insp-head h3 { margin: 0; font-size: 17px; }
.insp-head .big { font-size: 32px; }
/* One close button for every window and the inspector: a muted red square at the top right. The ✕ is drawn with two
   CSS bars (the glyph is hidden) so it looks the same on every system and on every themed header. */
.insp-head .x, .modal-card .x { margin-left: auto; flex: none; align-self: flex-start; position: relative; width: 30px; height: 30px; min-width: 0; padding: 0;
  border: 1px solid #93473d; border-radius: 8px; background: #b9655a; color: transparent; font-size: 0; line-height: 0; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 235, 225, 0.35), 0 1px 2px rgba(40, 10, 5, 0.3); transition: background 0.12s, transform 0.08s; }
.insp-head .x::before, .insp-head .x::after, .modal-card .x::before, .modal-card .x::after { content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: #fff7f2; transform: rotate(45deg); }
.insp-head .x::after, .modal-card .x::after { transform: rotate(-45deg); }
.insp-head .x:hover, .modal-card .x:hover { background: #a9554b; border-color: #83392f; }
.insp-head .x:active, .modal-card .x:active { background: #96483f; transform: translateY(1px); }
.insp-head .x:focus-visible, .modal-card .x:focus-visible { outline: 2px solid #f2c9a0; outline-offset: 2px; }
.desc { font-size: 13px; color: var(--muted); }
.current { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.cur-title { font-weight: 700; margin-bottom: 4px; }
.pbar { height: 6px; background: #eee6d4; border-radius: 4px; overflow: hidden; margin: 6px 0 4px; }
.pbar div { height: 100%; background: var(--accent2); transition: width 0.2s linear; }
.status { font-size: 13px; padding: 4px 0; }
.status.missing, .status.nomoney { color: var(--bad); }
.status.ok { color: var(--good); }
#inspector h4 { margin: 14px 0 6px; }
.recipe-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.recipe-row { border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; cursor: pointer; background: #fff; }
.recipe-row:hover { border-color: var(--accent2); }
.recipe-row.active { border-color: var(--accent); background: #e9f5ec; }
.recipe-list .tile-group { padding-top: 6px; }
.recipe-list .tile-group:first-child { padding-top: 0; }
.rr-out { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.rr-emoji { font-size: 18px; }
.rr-meta { display: flex; flex-wrap: wrap; gap: 4px; font-size: 11px; margin-top: 2px; align-items: center; }
.mini { background: var(--panel2); border-radius: 5px; padding: 0 3px; }
.mini.short { background: #f8d9d4; }

/* Chips */
.io { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 4px 0; }
.chip { display: inline-flex; gap: 3px; align-items: center; background: var(--panel2); border: 1px solid var(--line); border-radius: 99px; padding: 1px 8px; font-size: 12px; white-space: nowrap; }
.chip[data-item] { cursor: pointer; }
.chip[data-item]:hover { border-color: var(--accent2); }
.chip.ok { background: #e3f3e6; border-color: #b6dcbf; }
.chip.short { background: #fbe3df; border-color: #eab5ad; }
.chip.out { background: #fff4d9; border-color: #efd28f; }
.chip.unknown { background: #eee; color: #888; }
.chip b { font-weight: 700; }
.arrow { color: var(--muted); }
span.short { color: var(--bad); }

/* Modal */
#modal { position: fixed; inset: 0; background: rgba(10, 15, 12, 0.55); display: flex; align-items: center; justify-content: center; z-index: 20; }
#modal[hidden] { display: none; }
.modal-card { background: var(--panel); border-radius: 14px; width: min(640px, 94vw); max-height: 88vh; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4); }
.modal-card.wide { width: min(1100px, 96vw); height: 88vh; }
.modal-card header { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.modal-card header h2 { margin: 0; font-size: 19px; }
.modal-card header h2 .muted { font-size: 14px; font-weight: 400; margin-left: 8px; }
/* Clock and speed buttons in modal header: hidden by default (desktop uses the background top bar) */
#modal-speed { margin-left: auto; display: none; align-items: center; gap: 2px; }
#modal-speed .m-clock { font-size: 13px; color: var(--muted, #6b6b6b); margin-right: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
#modal-speed button { padding: 2px 7px; min-width: 30px; }
#modal-speed button.active { background: var(--accent2); border-color: var(--accent2); color: #222; }
/* Mobile Test Kitchen and Orders: full screen covers the top bar, so show speed in their modal header */
@media (max-width: 760px) {
  .modal-card:has(.tk) #modal-speed, .modal-card:has(.otabs) #modal-speed { display: flex; }
  /* Only when the speed buttons show do they take the free space; otherwise the ✕ keeps margin-left: auto and stays right. */
  .modal-card:has(.tk) #modal-speed:not(:empty) + .x, .modal-card:has(.otabs) #modal-speed:not(:empty) + .x { margin-left: 10px; }
  #modal-speed .m-clock { display: none; }
  #modal-speed button { min-width: 26px; padding: 2px 4px; }
}
/* Top bar speed controls and clock stay interactive in the background above the modal backdrop on desktop/tablet */
@media (min-width: 761px) {
  body.modal-open #topbar .speed,
  body.modal-open #topbar #clock {
    position: relative;
    z-index: 25;
  }
}
#modal-body { padding: 12px 16px; overflow-y: auto; flex: 1; }
#modal-body h4 { margin: 14px 0 6px; }
.tabs { display: flex; gap: 6px; margin-bottom: 10px; align-items: center; }
.tabs button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sellabove { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.sellabove input.slider { flex: 1 1 160px; max-width: 260px; }
.tbl button.sa-row { min-width: 9em; font-variant-numeric: tabular-nums; }
.sellabove #sa-val { min-width: 2.5em; text-align: right; font-variant-numeric: tabular-nums; }
.sortbar { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.sortbar .seg { display: flex; }
.sortbar .seg button { padding: 3px 10px; border-radius: 0; margin-left: -1px; }
.sortbar .seg button:first-child { border-radius: 6px 0 0 6px; }
.sortbar .seg button:last-child { border-radius: 0 6px 6px 0; }
.sortbar .seg button.active { background: var(--accent); color: #fff; border-color: var(--accent); }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.tiles.small { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.tile { display: grid; grid-template-columns: 28px 1fr auto; grid-template-rows: auto auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 7px; cursor: pointer; column-gap: 4px; }
.tile:hover { border-color: var(--accent2); }
.tile.picked { background: #e9f5ec; border-color: var(--accent); }
.t-emoji { grid-row: span 2; font-size: 22px; align-self: center; }
.t-name { font-size: 12px; font-weight: 600; line-height: 1.15; }
.t-qty { font-weight: 700; font-size: 13px; text-align: right; }
.t-val { font-size: 11px; color: var(--muted); grid-column: 2 / 4; }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--muted); font-weight: 600; padding: 4px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 4px; border-bottom: 1px solid #eee6d4; }
.tbl .num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .btns { text-align: right; white-space: nowrap; }
.tbl .btns button { padding: 2px 8px; font-size: 12px; }

/* Cookbook cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 8px; margin-top: 10px; }
.card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.card-foot { margin-top: auto; padding-top: 4px; }
.card.unknown { background: #f6f3ec; }
.card-head { display: flex; gap: 8px; align-items: center; }
.c-emoji { font-size: 28px; }
.link { cursor: pointer; }
.link:hover { text-decoration: underline; }
.cplx { margin: 4px 0; }
.note { font-style: italic; color: #5d574b; margin: 4px 0; }
.about { color: #4a4438; margin: 4px 0; line-height: 1.35; }

/* Test kitchen */
.tk { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; height: 100%; }
.tk-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.tk-right .tiles { overflow-y: auto; align-content: start; flex: 1; }
.tile-group { grid-column: 1 / -1; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 2px 2px; }
.tile-group:first-child { padding-top: 0; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
.slot { height: 74px; border: 2px dashed var(--line); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.slot.full { border-style: solid; border-color: var(--accent2); background: #fff; cursor: pointer; }
/* With a target dish, tried ingredients show whether they go into it. */
.slot.full.fit-good { border-color: #6aa84f; background: #eef7e8; }
.slot.full.fit-bad { border-color: #d9826f; background: #fbebe7; }
.log .fit-good, .log .fit-bad { display: inline-block; border-radius: 6px; padding: 1px 2px; }
.log .fit-good { background: #dcefd2; box-shadow: inset 0 -2px 0 #6aa84f; }
.log .fit-bad { background: #f6d9d2; box-shadow: inset 0 -2px 0 #d9826f; }
.slot span { font-size: 26px; }
.slot small { font-size: 11px; text-align: center; padding: 0 3px; }
.slot i { position: absolute; top: 2px; right: 6px; font-style: normal; color: var(--muted); font-size: 11px; }
.tk-log { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.log { padding: 7px 9px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.log.new { background: #e3f3e6; border-color: #9fd0ab; }
.log.warm { background: #fff4d9; border-color: #efd28f; }
.log.fail { color: var(--muted); }
#modal-body:has(.tk) { overflow: hidden; }
/* The Test Kitchen looks like a kitchen: a tiled backsplash behind the title, a brushed steel work surface on the left
   with a wooden cutting board where the tried ingredients sit on plates, and the ingredients laid out on a butcher-block
   countertop on the right, under slate labels for their groups. */
.modal-card:has(.tk) header { border-radius: 14px 14px 0 0; border-bottom: 3px solid #b7bdc1;
  background: #ece6da url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='30'%3E%3Cg fill='%23fdfbf6'%3E%3Crect x='1' y='1' width='28' height='13' rx='2'/%3E%3Crect x='31' y='1' width='28' height='13' rx='2'/%3E%3Crect x='-14' y='16' width='28' height='13' rx='2'/%3E%3Crect x='16' y='16' width='28' height='13' rx='2'/%3E%3Crect x='46' y='16' width='28' height='13' rx='2'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Crect x='3' y='2' width='24' height='2' rx='1'/%3E%3Crect x='33' y='2' width='24' height='2' rx='1'/%3E%3Crect x='18' y='17' width='24' height='2' rx='1'/%3E%3Crect x='48' y='17' width='24' height='2' rx='1'/%3E%3Crect x='-12' y='17' width='24' height='2' rx='1'/%3E%3C/g%3E%3C/svg%3E"); }
.tk-left { min-height: 0; overflow-y: auto; padding: 12px; border-radius: 12px; border: 1px solid #c3c9cd;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.28) 0 1px, transparent 1px 3px, rgba(120, 130, 136, 0.06) 3px 4px),
    linear-gradient(170deg, #f2f4f5 0%, #dde1e4 55%, #e8ebed 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(120, 130, 136, 0.18); }
.tk-left .warn { margin-top: 0; }
.tk-target { margin-top: 0; box-shadow: 0 2px 4px rgba(60, 50, 30, 0.12); }
.tk .slots { padding: 10px; margin: 12px 0 16px; border-radius: 16px; background-color: #c99761;
  background-image: repeating-linear-gradient(2deg, transparent 0 9px, rgba(110, 62, 22, 0.08) 9px 10px, transparent 10px 23px, rgba(255, 236, 205, 0.12) 23px 25px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(0, 0, 0, 0.06));
  box-shadow: inset 0 1px 0 rgba(255, 240, 215, 0.5), 0 4px 0 #8c5f33, 0 7px 12px rgba(40, 30, 20, 0.22); }
.tk .slot { border: 2px dashed rgba(255, 245, 228, 0.6); background: rgba(80, 45, 15, 0.08); border-radius: 14px; }
/* A tried ingredient sits on a white plate; with a target dish the plate turns green or red. */
.tk .slot.full { border: 2px solid #fff; background: radial-gradient(ellipse 70% 62% at 50% 48%, #fff 0 70%, #efe9de 86%, #fbf9f4 100%);
  box-shadow: 0 2px 0 rgba(90, 55, 20, 0.35), 0 4px 8px rgba(40, 25, 10, 0.25); }
.tk .slot.full:hover { transform: translateY(-1px); }
.tk .slot.full.fit-good { border: 3px solid #6aa84f; background: radial-gradient(ellipse 70% 62% at 50% 48%, #f4fbf0 0 70%, #d6ecc9 86%, #e9f5e2 100%); }
.tk .slot.full.fit-bad { border: 3px solid #d9826f; background: radial-gradient(ellipse 70% 62% at 50% 48%, #fdf3f0 0 70%, #f4d3ca 86%, #fbe8e3 100%); }
.tk .tk-log .log { box-shadow: 0 1px 2px rgba(60, 50, 30, 0.1); }
.tk-right .tiles { padding: 10px; border-radius: 12px; border: 1px solid #b4834c; background-color: #dcb27b; background-attachment: local;
  background-image: repeating-linear-gradient(90deg, transparent 0 4px, rgba(120, 66, 20, 0.05) 4px 5px, transparent 5px 11px, rgba(255, 240, 210, 0.08) 11px 12px),
    repeating-linear-gradient(90deg, rgba(255, 236, 200, 0.16) 0 46px, rgba(110, 60, 18, 0.12) 46px 48px, rgba(150, 90, 40, 0.1) 48px 94px, rgba(110, 60, 18, 0.12) 94px 96px, rgba(255, 245, 225, 0.06) 96px 150px, rgba(110, 60, 18, 0.12) 150px 152px);
  box-shadow: inset 0 2px 6px rgba(70, 40, 10, 0.18); }
.tk-right .tile { border-color: #e6d8bd; box-shadow: 0 1px 0 rgba(100, 60, 20, 0.3), 0 2px 5px rgba(60, 35, 10, 0.12); }
.tk-right .tile.picked { box-shadow: 0 0 0 2px var(--accent), 0 2px 5px rgba(60, 35, 10, 0.15); }
.tk-right .tile.empty { background: rgba(255, 250, 240, 0.6); border-style: dashed; border-color: rgba(120, 80, 40, 0.35); box-shadow: none; opacity: 0.8; }
.tk-right .tile.empty:hover { opacity: 1; }
.tk-right .tile-group { justify-self: start; margin-top: 6px; padding: 3px 10px 3px 5px; border: 0; border-radius: 6px; color: #f5efe2;
  background: linear-gradient(180deg, #47504b, #353c38); box-shadow: 0 2px 3px rgba(40, 25, 10, 0.3); }
.tk-right .tile-group:first-child { margin-top: 0; padding-top: 3px; }
.tk-right .tiles > .hint { grid-column: 1 / -1; justify-self: start; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(255, 250, 240, 0.85); }

/* Codex */
.codex { display: grid; grid-template-columns: 260px 1fr; gap: 14px; height: 100%; }
#modal-body:has(.codex) { overflow: hidden; }
.cx-list { display: flex; flex-direction: column; gap: 6px; min-height: 0; }
.cx-list .search, .cx-list select { flex: none; }
.cx-items { overflow-y: auto; flex: 1; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.cx-item { padding: 4px 8px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f1ece0; }
.cx-item:hover { background: #fbf4e3; }
.cx-item.active { background: #e9f5ec; font-weight: 700; }
.cx-detail { overflow-y: auto; padding-right: 6px; }
.cx-head { display: flex; gap: 12px; align-items: center; }
.cx-head h2 { margin: 0; }
.cx-emoji { font-size: 48px; }
.fact { background: #fff4d9; border-left: 4px solid var(--accent2); padding: 8px 10px; border-radius: 6px; }
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 10px 0; }
.stats div { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px; text-align: center; }
.stats b { display: block; font-size: 20px; color: var(--accent); }
.stats span { font-size: 11px; color: var(--muted); }
.tree { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 13px; }
.tnode { margin-left: 14px; padding: 1px 0; }
.tree > .tnode { margin-left: 0; }
.tnode summary { cursor: pointer; }
.tnode.leaf { margin-left: 30px; }
.recipe-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 5px 8px; margin-bottom: 4px; }

/* Orders & goals */
.order { display: grid; grid-template-columns: minmax(0, 1fr) 84px 92px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 7px 10px; margin-bottom: 6px; gap: 4px 12px; }
.order.ready { box-shadow: inset 3px 0 0 var(--accent); }
.o-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.o-head > b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.o-time { margin-left: auto; font-size: 11px; color: var(--muted, #888); white-space: nowrap; }
.o-time.soon { color: #b23a26; font-weight: 700; }
.o-want { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin-top: 6px; }
.o-want > button { align-self: flex-start; }
.otile { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto 64px; align-items: center; gap: 10px; padding: 3px 10px 3px 4px; background: var(--panel2); border: 1px solid var(--line); border-left-width: 4px; border-radius: 5px; }
.otile[data-item] { cursor: pointer; }
.otile[data-item]:hover { border-color: var(--accent2); }
.otile .ot-ico { width: 34px; height: 34px; display: grid; place-items: center; background: #fff; border-radius: 4px; font-size: 20px; }
.otile .ot-ico .ico { width: 30px; height: 30px; vertical-align: middle; }
.otile .ot-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.otile .ot-have { font-size: 12px; color: var(--muted); white-space: nowrap; }
.otile .ot-qty { font-size: 15px; text-align: right; white-space: nowrap; }
.otile.ok { background: #eef7f0; border-color: #c4e2cb; border-left-color: #3f9a5a; }
.otile.short { background: #fdf0ed; border-color: #efc9c1; border-left-color: #c9503a; }
.otile.short .ot-have { color: #b23a26; }
.otile.done { opacity: 0.6; }
.otile.unknown { background: #f2f0ec; border-left-color: #b9b2a5; color: #777; }
.o-note { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 3px; }
.o-pay { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; line-height: 1.25; }
.o-pay small { font-weight: 400; opacity: 0.7; }
.o-act button { width: 100%; white-space: nowrap; }
.clue-text { font-style: italic; }
.chip.done { opacity: 0.6; }
.opbar { display: inline-block; width: 90px; height: 6px; background: #eee6d4; border-radius: 4px; overflow: hidden; }
.opbar i { display: block; height: 100%; background: var(--accent2); }
.reward { font-weight: 700; color: var(--good); white-space: nowrap; }
.goals { display: flex; flex-direction: column; gap: 4px; }
.goal { display: grid; grid-template-columns: 26px 1fr auto; padding: 6px 8px; border-radius: 8px; background: #fff; border: 1px solid var(--line); font-size: 14px; }
.goal.done { opacity: 0.6; }
.gprog { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; font-size: 12px; font-weight: 600; color: #6b5a3a; white-space: nowrap; vertical-align: middle; }
.gbar { display: inline-block; width: 60px; height: 6px; border-radius: 3px; background: #e6dcc4; overflow: hidden; }
.gbar i { display: block; height: 100%; background: var(--accent2); border-radius: 3px; }
.goal.next { border-color: var(--accent2); background: #fff8e6; font-weight: 600; }
.help ol li { margin-bottom: 6px; }
.help-go { position: sticky; bottom: -12px; background: var(--panel); padding: 10px 0 12px; margin-bottom: -12px; border-top: 1px solid var(--line); }

/* Toasts */
#toasts { position: fixed; bottom: 14px; right: 14px; transition: right 0.2s; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; z-index: 30; pointer-events: none; }
.toast { background: rgba(28, 36, 31, 0.92); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 14px; max-width: 400px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; transition: opacity 0.5s; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3); }
.toast.good { background: rgba(35, 110, 62, 0.95); }
.toast.bad { background: rgba(160, 50, 40, 0.95); }
.toast.discover { background: linear-gradient(135deg, #e8a33d, #c96b2a); font-size: 15px; }
.toast.fade { opacity: 0; }

/* Toolbar labels show only when they fit in one row (ui.js fitNav adds .labels). */
nav button span { display: none; }
#topbar.labels nav button span { display: inline; }
@media (max-width: 1100px) {
  #buildbar { width: 150px; }
  .bgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1480px) {
  .brand span, #season .lbl { display: none; }
  #topbar { gap: 6px; }
}
/* Narrow screens: a tighter one-row top bar first; it only wraps below 1020 px. */
@media (max-width: 1220px) {
  #topbar { gap: 4px; padding: 0 8px; }
  .pill { padding: 3px 7px; }
  #money { min-width: 0; }
  .speed button, nav button { padding: 3px 5px; }
  nav { gap: 2px; }
  #topbar > * { flex-shrink: 0; }
  .brand .ico { width: 32px; height: 32px; }
}
@media (max-width: 1100px) and (min-width: 1020px) { .brand .ico { display: none; } }
@media (max-width: 1019px) {
  #topbar { flex-wrap: wrap; height: auto; padding: 6px; }
  #main { top: calc(var(--tb-h, 80px) + 26px); }
}
/* Phones held upright: three fixed rows, so bigger numbers (money, day, toques) or newly unlocked buttons never add a
   fourth. Row 1 money, toques, dishes, season; row 2 logo, clock, speed; row 3 the window buttons sharing the width. */
@media (max-width: 600px) {
  #topbar { padding: 4px 6px; row-gap: 2px; column-gap: 4px; justify-content: space-between; font-size: 14px; }
  #topbar::before { content: ''; order: 1; flex-basis: 100%; height: 0; }
  .brand, #clock, .speed { order: 2; }
  .brand .ico { width: 28px; height: 28px; margin: -2px 0; }
  .brand .ver { margin-bottom: 3px; }
  nav { order: 3; flex: 1 1 100%; margin-left: 0; }
  nav button { flex: 1 1 0; min-width: 0; padding: 3px 0; }
}
@media (max-width: 360px) {
  #topbar { font-size: 12px; column-gap: 2px; }
  .pill { padding: 3px 5px; }
}
@media (max-width: 760px) {
  #buildbar { width: 120px; }
  .bname, .bcost { display: none; }
  #inspector { position: absolute; right: 0; top: 0; bottom: 0; width: 88vw; z-index: 5; }
  .tk, .codex { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}

.stockctl { margin-top: 10px; padding: 8px; background: var(--panel2); border-radius: 8px; display: grid; gap: 6px; }
.stockctl .seg { display: flex; }
.stockctl .seg button { flex: 1; padding: 3px 0; border-radius: 0; margin-left: -1px; }
.stockctl .seg button:first-child { border-radius: 6px 0 0 6px; }
.stockctl .seg button:last-child { border-radius: 0 6px 6px 0; }
.stockctl .seg button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.stockctl label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
.status.full { color: var(--muted); }
.srcs { display: grid; gap: 6px; margin-top: 4px; font-size: 13px; }
.src button { margin-top: 3px; }

.okc { color: var(--good); }
.warnc { color: #b07a10; }
.growth { margin: 2px 0; }
.plan { display: grid; gap: 8px; }
.plan-row { display: grid; grid-template-columns: 210px 1fr 170px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.plan-b { display: flex; gap: 8px; align-items: center; font-size: 22px; }
.plan-b b { font-size: 14px; }
.plan-s { display: grid; gap: 3px; justify-items: end; font-size: 13px; }
.plan-btn { margin-left: auto; align-self: center; }
.pricebar { display: flex; height: 22px; border-radius: 6px; overflow: hidden; color: #fff; font-size: 12px; font-weight: 600; }
.pricebar div { display: flex; align-items: center; justify-content: center; min-width: 2px; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; }
.toast.season { background: #2f5d8a; }
.mapbtn { position: absolute; left: 12px; bottom: 12px; background: rgba(28, 36, 31, 0.85); color: #fff; border-color: rgba(255, 255, 255, 0.2); }
.mapbtn.active { background: var(--accent2); color: #2b2a26; }
/* Flows button with its filter half; the filter panel opens above them. */
#flowctl { position: absolute; left: 12px; bottom: 12px; display: flex; }
#flowctl .mapbtn { position: relative; left: auto; bottom: auto; }
#flows-btn { border-radius: 8px 0 0 8px; }
#flowf-btn { border-radius: 0 8px 8px 0; border-left: none; padding: 5px 8px; }
#flowf-btn .badge { background: var(--accent); }
.mapbtn.active:hover:not(:disabled) { background: var(--accent2); filter: brightness(1.05); }
.mapbtn:hover:not(:disabled):not(.active) { background: rgba(28, 36, 31, 0.95); }
#flowf { position: absolute; left: 12px; bottom: 52px; z-index: 5; width: 392px; min-width: 180px; max-width: min(392px, calc(100% - 24px)); max-height: min(70%, 520px); overflow-y: auto; background: rgba(28, 36, 31, 0.92); color: #fff; border-radius: 10px; padding: 8px 10px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
#flowf[hidden] { display: none; }
#flowf h4 { margin: 6px 0 4px; font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.7); display: flex; align-items: center; justify-content: space-between; }
#flowf h4:first-child { margin-top: 0; }
#flowf .ff-grid { display: flex; flex-wrap: wrap; gap: 4px; }
#flowf .ff-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 6px 10px; }
#flowf .ff-group.wide { grid-column: 1 / -1; }
#flowf .ff-gname { display: flex; align-items: center; gap: 4px; margin: 0 0 2px; font-size: 11px; color: rgba(255, 255, 255, 0.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#flowf .ff-gname img { width: 14px; height: 14px; }
#flowf .ff-groups + h4 { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
#flowf .ff-grid button { width: 34px; height: 34px; padding: 3px; background: rgba(255, 255, 255, 0.1); border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; }
#flowf .ff-grid button:hover { background: rgba(255, 255, 255, 0.22); }
#flowf .ff-grid button.on { background: var(--accent2); border-color: #fff; }
#flowf .ff-grid button img { width: 24px; height: 24px; }
#flowf .ff-clear { background: rgba(255, 255, 255, 0.12); color: #fff; border: none; font-size: 12px; padding: 2px 8px; }
#flowf .ff-none { font-size: 12px; color: rgba(255, 255, 255, 0.7); }
@media (max-width: 760px) { .plan-row { grid-template-columns: 1fr; } .plan-s { justify-items: start; } }

/* SVG icons (assets/icons.js) */
.ico { width: 1.3em; height: 1.3em; vertical-align: -0.3em; display: inline-block; }
.t-emoji .ico, .rr-emoji .ico, .c-emoji .ico, .cx-emoji .ico, .slot span .ico, .insp-head .big .ico { width: 1.1em; height: 1.1em; vertical-align: middle; }

/* Easter egg: tarte flambée */
#easter { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 100%, rgba(120, 40, 10, 0.85), rgba(20, 10, 5, 0.88) 70%); animation: egg-in 0.4s ease-out; }
#easter canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.egg-card { position: relative; width: min(460px, calc(100vw - 32px)); background: #fff8ea; border-radius: 16px; padding: 22px 24px; text-align: center; box-shadow: 0 0 60px rgba(255, 140, 40, 0.55); }
.egg-card h2 { margin: 2px 0 8px; font-size: 30px; color: #a3302a; }
.egg-card p { margin: 6px 0; font-size: 14px; line-height: 1.45; }
.egg-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px !important; font-weight: 700; color: #c2621c; }
.egg-dish { font-size: 120px; line-height: 1; margin-top: -70px; animation: egg-bob 2.4s ease-in-out infinite; }
.egg-dish .ico { width: 1em; height: 1em; filter: drop-shadow(0 6px 14px rgba(255, 120, 30, 0.6)); }
.egg-reward { display: flex; flex-direction: column; gap: 6px; margin: 14px 0; padding: 10px; border-radius: 10px; background: #fbe9da; font-weight: 700; font-size: 14px; }
@keyframes egg-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes egg-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { #easter, .egg-dish { animation: none; } }

/* Unlocks & Shop */
.newtag { font-style: normal; font-size: 9px; font-weight: 800; background: var(--accent2); color: #2b2a26; border-radius: 4px; padding: 0 4px; vertical-align: 1px; }
.bbtn.new { border-color: var(--accent2); background: #fff8e6; }
.locked { color: #8a6d2a; }
.locked-more { margin-top: 6px; }
.unlocktag { display: inline-block; font-size: 11px; font-weight: 600; background: #f3e3b5; border-radius: 99px; padding: 0 7px; margin-left: 4px; }
.packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-top: 10px; }
.pack { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px; }
.pack p { margin: 2px 0; }
.pack button { margin-top: auto; align-self: flex-start; }
.pack.owned { background: #eef7f0; border-color: #b9dcc3; }
.pack-head { display: flex; gap: 8px; align-items: center; }
.pack-icon { font-size: 30px; }
.pack-icon .ico { width: 36px; height: 36px; }
.stages { display: flex; flex-direction: column; gap: 4px; }
.stage { display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 14px; }
.stage.done { opacity: 0.65; }
.plan-row.lockedrow { background: #f6f3ec; border-style: dashed; }
.pack-b { margin-top: 3px; line-height: 1.6; } .pack-b .ico { width: 20px; height: 20px; margin-right: 2px; }

/* Playtest 3 additions */
body.insp-open:not(.modal-open) #toasts { right: 368px; }
@media (max-width: 760px) { body.insp-open #toasts { right: 14px; } }
/* Toasts step aside from open windows: left of the Town panel and zoom buttons in town */
body.town-mode:not(.modal-open) #toasts { right: 480px; }
@media (max-width: 1100px) { body.town-mode:not(.modal-open) #toasts { right: 400px; } }
/* While a window is open, the newest toast shows as a slim line at the top-left over the brand text,
   leaving the top bar's speed buttons, clock, and the window content completely unobstructed. */
body.modal-open #toasts { top: 6px; bottom: auto; left: 14px; right: auto; transform: none; align-items: flex-start; transition: none; }
body.modal-open .toast:not(:last-child) { display: none; }
body.modal-open .toast { -webkit-line-clamp: 1; max-width: min(340px, calc(100vw - 28px)); max-height: 36px; padding: 6px 14px; line-height: 24px; }
body.modal-open .toast img { max-height: 20px; vertical-align: -5px; }
@media (max-width: 760px) {
  body.modal-open #toasts { top: auto; bottom: 14px; left: auto; right: 14px; align-items: flex-end; }
}
/* The Blueprint bar: toasts stack above it (its height is kept in --bp-h by bpBar) */
body.bp-open:not(.modal-open) #toasts { bottom: calc(var(--bp-h, 110px) + 24px); }
.tile.empty { background: #f4f1ea; opacity: 0.6; }
.tile.empty:hover { opacity: 1; }
.rates { margin: 3px 0; }
.rates .ico, .bal .ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.bal { display: grid; gap: 1px; margin: 2px 0 4px; }
.otag { font-size: 11px; font-weight: 700; white-space: nowrap; flex: none; cursor: help; background: #eef3ff; color: #3a5a9a; border-radius: 99px; padding: 1px 7px; margin-right: 4px; }
.otag.special { background: #fff1c9; color: #8a5a00; }
.order.special { border-color: #efd28f; background: #fffaf0; }
.otag.regular { background: #ffe7ea; color: #a23a4e; }
.otag.clue { background: #eaf6ee; color: #2f7a4a; }
.otag.contract { background: #efe9ff; color: #5a3fa0; }
.otag.event { background: #fff0e0; color: #9a5214; }
.order.clue { border-color: #b9dcc4; }
.order.event { border-color: #f0cfa5; background: #fffaf3; }
.order.contract { border-color: #d3c8f0; }
.order button.small { margin: 0; }
.hearts { color: #d9475f; letter-spacing: -1px; }
.hearts i { font-style: normal; color: #e6cfd4; }
.regulars { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 6px; }
.regcard { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px 8px; }
.regcard .pack-icon .ico { width: 30px; height: 30px; }
.regcard .muted { margin-top: 1px; }
/* The Orders window is a pinboard by the kitchen pass: a steel ticket rail behind the title, a cork board in a wooden
   frame, and every order a paper ticket pinned to it. The ticket paper and the pin are coloured by the kind of order,
   a perforated line runs under the customer, the bottom edge is torn off the pad, and a ticket you can fill now gets a
   green ink stamp. Regulars are index cards; About and the Dispatcher are a sheet from a notepad. */
.modal-card:has(.otabs) header { border-radius: 14px 14px 0 0; border-bottom: 4px solid #8e979d;
  background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 1px, transparent 1px 3px, rgba(110, 120, 126, 0.07) 3px 4px),
    linear-gradient(180deg, #f4f6f7 0%, #dfe3e6 58%, #c9cfd3 82%, #eef0f2 86%, #d4d9dc 100%);
  box-shadow: 0 2px 4px rgba(40, 30, 20, 0.25); position: relative; z-index: 1; }
#modal-body:has(> .otabs) { border-radius: 0 0 14px 14px; padding: 14px 18px 18px; background-color: #c99d6b; background-attachment: local;
  background-image: radial-gradient(rgba(96, 58, 24, 0.38) 0.9px, transparent 1.5px), radial-gradient(rgba(255, 238, 205, 0.4) 0.9px, transparent 1.5px),
    radial-gradient(rgba(120, 76, 34, 0.28) 1.4px, transparent 2px), radial-gradient(ellipse at 30% 20%, rgba(255, 230, 190, 0.25), transparent 60%);
  background-size: 7px 7px, 11px 11px, 17px 17px, 100% 100%; background-position: 0 0, 3px 5px, 8px 2px, 0 0;
  box-shadow: inset 0 0 0 6px #9a6a3e, inset 0 0 0 7px #6f4625, inset 0 3px 10px 7px rgba(60, 35, 15, 0.35); }
.otabs button:not(.active) { background: #fffdf6; border-color: #b78b5c; box-shadow: 0 2px 0 rgba(90, 55, 25, 0.35); }
.otabs button.active { box-shadow: 0 2px 0 #1d5634; }
#modal-body:has(> .otabs) .sortbar, .o-strip { width: fit-content; max-width: 100%; box-sizing: border-box; padding: 4px 10px; border-radius: 3px;
  background: #fffdf6; box-shadow: 0 1px 0 rgba(90, 55, 25, 0.3), 0 2px 5px rgba(60, 35, 15, 0.2); }
#modal-body:has(> .otabs) .sortbar { margin-bottom: 14px; }
#modal-body:has(> .otabs) .sortbar .muted { color: #6b6455; }
.o-strip.hint, .o-strip.muted { color: #5f594c; }
p.o-strip { margin: 10px 0 0; }
p.o-strip.disp-line { margin: 0 0 10px; }
/* A ticket: kind-coloured paper and pin. --pin is the pin colour. */
#modal-body .order { --paper: #fffdf6; --pin: #d0473a; position: relative; border: 0; border-radius: 2px 2px 0 0; background: var(--paper);
  padding: 13px 12px 12px; margin-bottom: 18px; filter: drop-shadow(0 1px 0 rgba(90, 55, 25, 0.35)) drop-shadow(0 4px 4px rgba(50, 28, 10, 0.25)); }
#modal-body .order::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px;
  background: linear-gradient(135deg, var(--paper) 4px, transparent 4.5px) 0 0 / 9px 6px repeat-x, linear-gradient(225deg, var(--paper) 4px, transparent 4.5px) 0 0 / 9px 6px repeat-x; }
#modal-body .order::before { content: ''; position: absolute; top: -5px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%; z-index: 1;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px), var(--pin);
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.3), 1px 3px 2px rgba(40, 20, 5, 0.4); }
#modal-body .order:nth-child(3n + 2)::before { left: calc(44% - 7px); }
#modal-body .order:nth-child(3n)::before { left: calc(57% - 7px); }
#modal-body .order.special { --paper: #fff6d6; --pin: #e2a52c; background: var(--paper); }
#modal-body .order.regular { --paper: #fff1f1; --pin: #d9475f; }
#modal-body .order.clue { --paper: #effaf1; --pin: #3f9a5a; }
#modal-body .order.contract { --paper: #f4f0ff; --pin: #7a5fc4; }
#modal-body .order.event { --paper: #fff1e2; --pin: #e07a2c; background: var(--paper); }
#modal-body .order .o-head { padding-bottom: 7px; border-bottom: 2px dashed rgba(120, 100, 70, 0.28); }
#modal-body .order .o-head > b { font-size: 15px; }
#modal-body .order .o-time, #modal-body .order .ot-qty { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
#modal-body .order .o-time { font-size: 12px; color: #6b6455; }
#modal-body .order .o-time.soon { color: #b23a26; }
#modal-body .order .o-want { margin-top: 8px; }
#modal-body .order .otile { background: rgba(255, 255, 255, 0.75); border-color: rgba(150, 130, 100, 0.3); border-left-width: 4px; }
#modal-body .order .otile.ok { background: rgba(232, 246, 236, 0.9); border-color: #c4e2cb; border-left-color: #3f9a5a; }
#modal-body .order .otile.short { background: rgba(253, 236, 232, 0.9); border-color: #efc9c1; border-left-color: #c9503a; }
#modal-body .order .otile.unknown { background: rgba(240, 237, 231, 0.9); border-left-color: #b9b2a5; }
#modal-body .order .otile[data-item]:hover { border-color: var(--accent2); }
/* Ready to deliver: a round green ink stamp with a tick, pressed on slightly crooked. */
#modal-body .order.ready .o-pay { position: relative; }
#modal-body .order.ready .o-pay::before { content: '✓'; position: absolute; top: -34px; right: -6px; width: 30px; height: 30px; box-sizing: border-box;
  display: grid; place-items: center; border: 2.5px solid rgba(47, 125, 79, 0.75); border-radius: 50%; outline: 1px solid rgba(47, 125, 79, 0.45); outline-offset: 2px;
  color: rgba(47, 125, 79, 0.85); font-weight: 900; font-size: 17px; line-height: 1; transform: rotate(-14deg); pointer-events: none; }
/* Regulars: index cards with a red rule under the customer's name. */
#modal-body .regulars { gap: 12px; }
#modal-body .regcard { border: 0; border-radius: 2px; padding: 9px 10px 8px; background: #fffefa; box-shadow: 0 1px 0 rgba(90, 55, 25, 0.3), 0 3px 6px rgba(50, 28, 10, 0.25); }
#modal-body .regcard > div { flex: 1; min-width: 0; }
#modal-body .regcard > div > b:first-child { display: block; padding-bottom: 2px; margin-bottom: 3px; border-bottom: 2px solid #e2726e; }
#modal-body .regcard .pack-icon { align-self: flex-start; }
/* About and the Dispatcher: a notepad sheet with a red margin line; About's text sits on blue rules. */
.o-sheet { position: relative; padding: 14px 16px 12px 46px; border-radius: 2px; background: #fffefa linear-gradient(90deg, transparent 33px, rgba(226, 114, 110, 0.6) 33px 35px, transparent 35px);
  box-shadow: 0 1px 0 rgba(90, 55, 25, 0.3), 0 4px 8px rgba(50, 28, 10, 0.28); }
.o-sheet.lined { padding-top: 16px; padding-bottom: 16px; line-height: 24px;
  background-image: linear-gradient(90deg, transparent 33px, rgba(226, 114, 110, 0.6) 33px 35px, transparent 35px), repeating-linear-gradient(180deg, transparent 0 23px, rgba(90, 140, 200, 0.24) 23px 24px);
  background-origin: border-box, content-box; }
.o-sheet.lined p { margin: 0 0 24px; line-height: 24px; }
.o-sheet::before { content: ''; position: absolute; top: -5px; left: calc(50% - 7px); width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.85) 0 2px, transparent 3px), #3a73c4;
  box-shadow: inset -2px -2px 3px rgba(0, 0, 0, 0.3), 1px 3px 2px rgba(40, 20, 5, 0.4); }
.o-sheet > p:first-child, .o-sheet > .warn:first-child, .o-sheet > .hint:first-child { margin-top: 0; }
.o-sheet > :last-child, .o-sheet.lined > p:last-child { margin-bottom: 0; }
#money { cursor: pointer; }
#inspector > input.search { display: block; width: 100%; box-sizing: border-box; }

/* Discovery card: a moment for every new dish */
#discovery { position: fixed; inset: 0; z-index: 900; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(ellipse at 50% 40%, rgba(255, 196, 92, 0.35), rgba(20, 24, 20, 0.72) 70%); animation: egg-in 0.25s ease-out; }
.dc-card { position: relative; width: min(560px, 100%); background: #fff8ea; border-radius: 18px; padding: 70px 22px 18px; margin-top: 56px; text-align: center; box-shadow: 0 0 50px rgba(255, 170, 60, 0.45), 0 20px 50px rgba(0, 0, 0, 0.35); animation: dc-rise 0.45s cubic-bezier(.2, 1.4, .4, 1); }
.dc-dish { position: absolute; left: 50%; top: -58px; width: 124px; height: 124px; margin-left: -62px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #fff 55%, #ffe7b8); box-shadow: 0 6px 18px rgba(200, 110, 30, 0.35); animation: egg-bob 2.6s ease-in-out infinite; }
.dc-dish .ico { width: 92px; height: 92px; }
.dc-kicker { margin: 0; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; font-weight: 700; color: #c2621c; }
.dc-card h2 { margin: 2px 0 2px; font-size: 28px; color: #7a3416; }
.dc-cuisine { margin: 0 0 12px; font-size: 13px; }
.dc-chain { display: grid; grid-template-columns: 1fr auto 1fr auto 0.55fr; gap: 6px; align-items: stretch; margin: 6px 0 14px; }
.dc-step { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px 6px; display: flex; flex-direction: column; gap: 2px; }
.dc-step b { font-size: 24px; color: #2f6b2a; line-height: 1.1; }
.dc-step > span { font-size: 11px; color: var(--muted); line-height: 1.25; }
.dc-plate b { color: #c2621c; }
.dc-arrow { align-self: center; color: #d08a3a; font-size: 18px; }
.dc-icons { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin-top: 4px; }
.dc-icons .ico { width: 22px; height: 22px; }
.dc-pop { display: inline-block; opacity: 0; animation: dc-pop 0.35s ease-out forwards; }
.dc-more { font-size: 11px; color: var(--muted); align-self: center; }
.dc-btns { justify-content: center; flex-wrap: wrap; }
.dc-burst { position: absolute; left: 50%; top: 4px; width: 0; height: 0; pointer-events: none; }
.dc-burst i { position: absolute; width: 8px; height: 14px; border-radius: 3px; background: #f2b640; transform: rotate(var(--a)) translateY(0); opacity: 0; animation: dc-burst 0.9s ease-out var(--d) forwards; }
.dc-burst i:nth-child(3n) { background: #e0623a; } .dc-burst i:nth-child(3n+1) { background: #6fae4a; }
@keyframes dc-rise { from { transform: translateY(30px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes dc-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes dc-burst { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-40px); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-130px); } }
@media (max-width: 560px) { .dc-chain { grid-template-columns: 1fr; } .dc-arrow { transform: rotate(90deg); } }
@media (prefers-reduced-motion: reduce) { #discovery, .dc-card, .dc-dish, .dc-pop, .dc-burst i { animation: none; } .dc-pop { opacity: 1; } .dc-burst { display: none; } }
.dc-plate .dc-icons .ico { width: 36px; height: 36px; }

/* Cookbook: dish silhouettes and progress per cuisine */
.card .c-emoji .ico { width: 48px; height: 48px; }
.card.known .c-emoji .ico { filter: drop-shadow(0 2px 3px rgba(120, 70, 20, 0.25)); }
.sil .ico { filter: brightness(0) opacity(0.38); }
.card.unknown:hover .sil .ico { filter: brightness(0) opacity(0.55); }
.cz-strip { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 6px; margin-bottom: 2px; scrollbar-width: thin; }
.cz-wrap { position: relative; }
.cz-wrap::before, .cz-wrap::after { content: ''; position: absolute; top: 8px; bottom: 6px; width: 48px; pointer-events: none; opacity: 0; transition: opacity 0.2s; z-index: 1; }
.cz-wrap::before { left: 0; background: linear-gradient(90deg, var(--panel), transparent); }
.cz-wrap::after { right: 0; background: linear-gradient(270deg, var(--panel), transparent); }
.cz-wrap.more-l::before, .cz-wrap.more-r::after { opacity: 1; }
.cz-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 50%; padding: 0; font-size: 20px; line-height: 1;
  display: none; place-items: center; background: #fff; border: 1px solid var(--line); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); cursor: pointer; }
.cz-arrow.l { left: -6px; } .cz-arrow.r { right: -6px; }
.cz-wrap.more-l .cz-arrow.l, .cz-wrap.more-r .cz-arrow.r { display: grid; }
.cz { flex: none; display: flex; align-items: center; gap: 6px; padding: 5px 9px 5px 6px; border-radius: 10px; border: 1px solid var(--line); background: #fff; text-align: left; }
.cz.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 107, 42, 0.25); }
.cz.done { background: #fff6d8; border-color: #e3b84a; }
.cz-ico .ico { width: 26px; height: 26px; }
.cz-txt { display: grid; font-size: 11px; line-height: 1.25; color: var(--muted); }
.cz-txt b { color: var(--ink); font-size: 12px; white-space: nowrap; }
.cz-bar { display: block; width: 74px; height: 4px; border-radius: 2px; background: #ece5d5; overflow: hidden; margin-top: 2px; }
.cz-bar i { display: block; height: 100%; background: var(--accent); }
.cz.done .cz-bar i { background: #d9a22b; }

/* Farm journal */
.jr-day { position: sticky; top: -12px; background: var(--panel); padding: 6px 0; margin: 10px 0 4px !important; z-index: 1; border-bottom: 1px solid var(--line); }
.jr { display: grid; grid-template-columns: 46px 1fr; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #eee6d4; font-size: 14px; align-items: start; }
.jr.unread { background: #fff6dc; border-radius: 6px; }
.jr.bad .jr-body { color: var(--bad); }
.jr-t { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.jr-dish { display: flex; gap: 10px; align-items: center; }
.jr-big .ico { width: 40px; height: 40px; }
.gazette { background: #fffdf6; border: 1px solid #d9cfb8; border-radius: 6px; padding: 10px 12px; font-family: Georgia, 'Times New Roman', serif; max-width: 640px; box-shadow: 2px 2px 0 #e9dfc6; }
.gz-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px double #6b5a40; padding-bottom: 4px; margin-bottom: 8px; }
.gz-head span { font-size: 20px; font-weight: 700; letter-spacing: 0.02em; color: #3b2b22; }
.gz-head b { font-size: 13px; color: var(--muted); }
.gz-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 12px; font-family: system-ui, sans-serif; }
.gz-stats div { display: grid; }
.gz-stats b { font-size: 16px; }
.gz-stats span { font-size: 11px; color: var(--muted); }
.gz-split { height: 8px; border-radius: 4px; background: var(--accent2); overflow: hidden; margin: 10px 0 4px; }
.gz-split i { display: block; height: 100%; background: #6fae4a; }
.gazette p { margin: 4px 0 0; }
.gz-sub { margin: 10px 0 4px !important; font-size: 13px; font-family: system-ui, sans-serif; color: #3b2b22; }
.gz-sub .muted { font-weight: normal; font-size: 11px; }
.gz-ledger { border-collapse: collapse; font-family: system-ui, sans-serif; font-size: 13px; min-width: 280px; }
.gz-ledger td { padding: 1px 12px 1px 0; }
.gz-ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.gz-ledger .gz-net td { border-top: 1px solid #6b5a40; font-weight: 700; padding-top: 3px; }

/* Buildings list: bulk stock targets & auto-sell */
.bl-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.bl-quick button.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.bl-quick button img, .bl-table img { width: 18px; height: 18px; vertical-align: -4px; }
.bl-bulk { margin: 8px 0 10px; }
.bl-table .bl-row { cursor: pointer; }
.bl-table .bl-row:hover { background: #f4efe2; }
.bl-table .bl-row.on { background: #e3f0e6; }
.bl-table .bl-group td { font-weight: 700; color: var(--muted); padding-top: 10px; }
.stockctl .row.wrap button { padding: 2px 8px; }
.bl-quick button.active .muted { color: inherit; opacity: 0.85; }
.ratectl { margin-top: 10px; padding: 8px; background: var(--panel2); border-radius: 8px; display: grid; gap: 4px; }
.ratectl input[type=range] { width: 100%; accent-color: var(--accent); }

.prox { margin-top: 4px; }
.prox > div { margin-top: 2px; }
.tk-target { display: flex; gap: 10px; align-items: center; margin-top: 10px; padding: 8px 10px; border: 2px solid #efd28f; background: #fff8e6; border-radius: 10px; }
.tk-target .c-emoji { font-size: 30px; }
.tk-t-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.tk-t-btns { display: flex; flex-direction: column; gap: 4px; }
.tk-target .io-short { display: none; }

/* Sound toggle and settings */
#sound-btn.off { opacity: 0.55; }

/* ⚙️ Settings window: quick actions, then cards for sound and save files */
.gm { display: flex; flex-direction: column; gap: 12px; }
.gm-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.gm-actions button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 10px; text-align: center; }
.gm-actions .gm-ico .ico { width: 28px; height: 28px; margin-bottom: 2px; }
.gm-card { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px 12px; }
.gm-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
#modal-body .gm-head h4 { margin: 0; font-size: 15px; }
.gm-head .switch { margin-left: auto; align-self: center; }
.gm-card details.settings { margin-top: 10px; }
.gm-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: space-between; padding-top: 2px; }
/* The Settings window is the farm workshop: a brushed steel frame with a rivet in each corner, two meshed cog wheels
   sticking out on the right (their hubs hidden behind the card) (turning slowly, still for reduced motion) and a wrench poking out of the left side, head tilted up (under the bottom on phones).
   The cogs and wrench sit behind the card (z-index -1), so they never cover a control. */
.modal-card.workshop { position: relative; border: 14px solid transparent; border-radius: 16px;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
    radial-gradient(circle at 7px 7px, #f4f5f6 0 2px, #6f767e 3px 4.5px, transparent 5px) 0 0 / 14px 14px no-repeat border-box,
    radial-gradient(circle at 7px 7px, #f4f5f6 0 2px, #6f767e 3px 4.5px, transparent 5px) 100% 0 / 14px 14px no-repeat border-box,
    radial-gradient(circle at 7px 7px, #f4f5f6 0 2px, #6f767e 3px 4.5px, transparent 5px) 0 100% / 14px 14px no-repeat border-box,
    radial-gradient(circle at 7px 7px, #f4f5f6 0 2px, #6f767e 3px 4.5px, transparent 5px) 100% 100% / 14px 14px no-repeat border-box,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 3px) border-box,
    linear-gradient(160deg, #c9ced3 0%, #9aa1a8 45%, #b7bcc2 70%, #868d94 100%) border-box;
  box-shadow: inset 0 0 0 1px #6f767e, 0 0 0 1px #5d646b, 0 20px 60px rgba(0, 0, 0, 0.45); }
.modal-card.workshop > header { border-radius: 4px 4px 0 0; }
.modal-card.workshop::before, .modal-card.workshop::after { content: ''; position: absolute; z-index: -1; pointer-events: none; background: no-repeat center / contain;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.4)); }
.modal-card.workshop::before { top: 26px; left: calc(100% - 106px); width: 190px; height: 258px; background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 190%22%3E%3Cg transform=%22rotate(0 56.0 64.0)%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 from=%220 56.0 64.0%22 to=%22360 56.0 64.0%22 dur=%2224s%22 repeatCount=%22indefinite%22/%3E%3Cpath d=%22M100.5 64.0 L100.4 66.8 L111.1 71.0 L109.6 78.4 L98.2 78.2 L94.5 86.2 L94.5 86.2 L93.1 88.6 L100.2 97.6 L95.2 103.2 L85.4 97.4 L78.2 102.5 L78.2 102.5 L75.8 103.9 L77.5 115.2 L70.4 117.6 L64.8 107.6 L56.0 108.5 L56.0 108.5 L53.2 108.4 L49.0 119.1 L41.6 117.6 L41.8 106.2 L33.8 102.5 L33.8 102.5 L31.4 101.1 L22.4 108.2 L16.8 103.2 L22.6 93.4 L17.5 86.3 L17.5 86.2 L16.1 83.8 L4.8 85.5 L2.4 78.4 L12.4 72.8 L11.5 64.0 L11.5 64.0 L11.6 61.2 L0.9 57.0 L2.4 49.6 L13.8 49.8 L17.5 41.8 L17.5 41.8 L18.9 39.4 L11.8 30.4 L16.8 24.8 L26.6 30.6 L33.7 25.5 L33.7 25.5 L36.2 24.1 L34.5 12.8 L41.6 10.4 L47.2 20.4 L56.0 19.5 L56.0 19.5 L58.8 19.6 L63.0 8.9 L70.4 10.4 L70.2 21.8 L78.2 25.5 L78.2 25.5 L80.6 26.9 L89.6 19.8 L95.2 24.8 L89.4 34.6 L94.5 41.8 L94.5 41.7 L95.9 44.2 L107.2 42.5 L109.6 49.6 L99.6 55.2 L100.5 64.0Z%22 fill=%22%23a7adb4%22 stroke=%22%234c5258%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2256.0%22 cy=%2264.0%22 r=%2239.0%22 fill=%22none%22 stroke=%22%238a9198%22 stroke-width=%222%22/%3E%3Ccircle cx=%2283.5%22 cy=%2264.0%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2264.5%22 cy=%2290.2%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2233.8%22 cy=%2280.2%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2233.8%22 cy=%2247.8%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2264.5%22 cy=%2237.8%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2256.0%22 cy=%2264.0%22 r=%2214.0%22 fill=%22%236d747c%22 stroke=%22%234c5258%22 stroke-width=%222%22/%3E%3Ccircle cx=%2256.0%22 cy=%2264.0%22 r=%225.5%22 fill=%22%232f3438%22/%3E%3C/g%3E%3Cg transform=%22rotate(25.714285714285715 56.0 143.0)%22%3E%3CanimateTransform attributeName=%22transform%22 type=%22rotate%22 from=%2225.714285714285715 56.0 143.0%22 to=%22-334.2857142857143 56.0 143.0%22 dur=%2214s%22 repeatCount=%22indefinite%22/%3E%3Cpath d=%22M79.5 143.0 L79.4 145.5 L89.7 150.4 L87.1 158.0 L76.0 155.4 L70.7 161.4 L70.7 161.4 L68.6 162.8 L71.2 173.9 L63.7 176.6 L58.7 166.3 L50.8 165.9 L50.8 165.9 L48.3 165.2 L41.3 174.2 L34.5 170.0 L39.5 159.7 L34.8 153.2 L34.8 153.2 L33.9 150.9 L22.4 151.0 L21.5 143.0 L32.6 140.5 L34.8 132.8 L34.8 132.8 L36.0 130.6 L28.8 121.7 L34.5 116.0 L43.4 123.2 L50.8 120.1 L50.8 120.1 L53.3 119.7 L55.7 108.5 L63.7 109.4 L63.7 120.8 L70.7 124.6 L70.7 124.6 L72.5 126.3 L82.8 121.2 L87.1 128.0 L78.1 135.1 L79.5 143.0Z%22 fill=%22%23b9bec4%22 stroke=%22%234c5258%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2256.0%22 cy=%22143.0%22 r=%2222.6%22 fill=%22none%22 stroke=%22%238a9198%22 stroke-width=%222%22/%3E%3Ccircle cx=%2256.0%22 cy=%22143.0%22 r=%228.1%22 fill=%22%236d747c%22 stroke=%22%234c5258%22 stroke-width=%222%22/%3E%3Ccircle cx=%2256.0%22 cy=%22143.0%22 r=%223.2%22 fill=%22%232f3438%22/%3E%3C/g%3E%3C/svg%3E"); }
.modal-card.workshop::after { top: 58%; left: -128px; width: 240px; height: 67px; transform: rotate(24deg); background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 200 56%22%3E%3Cdefs%3E%3Cmask id=%22m%22%3E%3Crect width=%22200%22 height=%2256%22 fill=%22%23fff%22/%3E%3Cpath d=%22M-2 19 L22 22 L22 34 L-2 37Z%22 fill=%22%23000%22/%3E%3Ccircle cx=%22178%22 cy=%2228%22 r=%228%22 fill=%22%23000%22/%3E%3C/mask%3E%3C/defs%3E%3Cg mask=%22url(%23m)%22 stroke=%22%234c5258%22 stroke-width=%222.5%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M30 21 L165 22 L165 34 L30 35Z%22 fill=%22%23a7adb4%22/%3E%3Ccircle cx=%2226%22 cy=%2228%22 r=%2223%22 fill=%22%23b9bec4%22/%3E%3Ccircle cx=%22178%22 cy=%2228%22 r=%2217%22 fill=%22%23b9bec4%22/%3E%3C/g%3E%3Cpath d=%22M48 27 L150 27.5%22 stroke=%22%23d6dadf%22 stroke-width=%223%22 stroke-linecap=%22round%22/%3E%3C/svg%3E"); }
#modal:has(.modal-card.workshop) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .modal-card.workshop::before { background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 140 190%22%3E%3Cg transform=%22rotate(0 56.0 64.0)%22%3E%3Cpath d=%22M100.5 64.0 L100.4 66.8 L111.1 71.0 L109.6 78.4 L98.2 78.2 L94.5 86.2 L94.5 86.2 L93.1 88.6 L100.2 97.6 L95.2 103.2 L85.4 97.4 L78.2 102.5 L78.2 102.5 L75.8 103.9 L77.5 115.2 L70.4 117.6 L64.8 107.6 L56.0 108.5 L56.0 108.5 L53.2 108.4 L49.0 119.1 L41.6 117.6 L41.8 106.2 L33.8 102.5 L33.8 102.5 L31.4 101.1 L22.4 108.2 L16.8 103.2 L22.6 93.4 L17.5 86.3 L17.5 86.2 L16.1 83.8 L4.8 85.5 L2.4 78.4 L12.4 72.8 L11.5 64.0 L11.5 64.0 L11.6 61.2 L0.9 57.0 L2.4 49.6 L13.8 49.8 L17.5 41.8 L17.5 41.8 L18.9 39.4 L11.8 30.4 L16.8 24.8 L26.6 30.6 L33.7 25.5 L33.7 25.5 L36.2 24.1 L34.5 12.8 L41.6 10.4 L47.2 20.4 L56.0 19.5 L56.0 19.5 L58.8 19.6 L63.0 8.9 L70.4 10.4 L70.2 21.8 L78.2 25.5 L78.2 25.5 L80.6 26.9 L89.6 19.8 L95.2 24.8 L89.4 34.6 L94.5 41.8 L94.5 41.7 L95.9 44.2 L107.2 42.5 L109.6 49.6 L99.6 55.2 L100.5 64.0Z%22 fill=%22%23a7adb4%22 stroke=%22%234c5258%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2256.0%22 cy=%2264.0%22 r=%2239.0%22 fill=%22none%22 stroke=%22%238a9198%22 stroke-width=%222%22/%3E%3Ccircle cx=%2283.5%22 cy=%2264.0%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2264.5%22 cy=%2290.2%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2233.8%22 cy=%2280.2%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2233.8%22 cy=%2247.8%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2264.5%22 cy=%2237.8%22 r=%228.5%22 fill=%22%237d848c%22/%3E%3Ccircle cx=%2256.0%22 cy=%2264.0%22 r=%2214.0%22 fill=%22%236d747c%22 stroke=%22%234c5258%22 stroke-width=%222%22/%3E%3Ccircle cx=%2256.0%22 cy=%2264.0%22 r=%225.5%22 fill=%22%232f3438%22/%3E%3C/g%3E%3Cg transform=%22rotate(25.714285714285715 56.0 143.0)%22%3E%3Cpath d=%22M79.5 143.0 L79.4 145.5 L89.7 150.4 L87.1 158.0 L76.0 155.4 L70.7 161.4 L70.7 161.4 L68.6 162.8 L71.2 173.9 L63.7 176.6 L58.7 166.3 L50.8 165.9 L50.8 165.9 L48.3 165.2 L41.3 174.2 L34.5 170.0 L39.5 159.7 L34.8 153.2 L34.8 153.2 L33.9 150.9 L22.4 151.0 L21.5 143.0 L32.6 140.5 L34.8 132.8 L34.8 132.8 L36.0 130.6 L28.8 121.7 L34.5 116.0 L43.4 123.2 L50.8 120.1 L50.8 120.1 L53.3 119.7 L55.7 108.5 L63.7 109.4 L63.7 120.8 L70.7 124.6 L70.7 124.6 L72.5 126.3 L82.8 121.2 L87.1 128.0 L78.1 135.1 L79.5 143.0Z%22 fill=%22%23b9bec4%22 stroke=%22%234c5258%22 stroke-width=%222%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2256.0%22 cy=%22143.0%22 r=%2222.6%22 fill=%22none%22 stroke=%22%238a9198%22 stroke-width=%222%22/%3E%3Ccircle cx=%2256.0%22 cy=%22143.0%22 r=%228.1%22 fill=%22%236d747c%22 stroke=%22%234c5258%22 stroke-width=%222%22/%3E%3Ccircle cx=%2256.0%22 cy=%22143.0%22 r=%223.2%22 fill=%22%232f3438%22/%3E%3C/g%3E%3C/svg%3E"); } }
@media (max-width: 600px) {
  .modal-card.workshop { border-width: 10px; }
  .modal-card.workshop::before { top: auto; bottom: -64px; left: calc(100% - 145px); width: 118px; height: 160px; transform: rotate(-90deg); }
  .modal-card.workshop::after { top: auto; bottom: -30px; left: 40px; width: 140px; height: 39px; transform: scaleX(-1) rotate(-14deg); }
}

/* On/off switch */
.switch { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px 3px 3px; border-radius: 999px; background: var(--panel2); border-color: var(--line); font-size: 13px; font-weight: 600; color: var(--muted); }
.switch .knob { position: relative; width: 34px; height: 20px; border-radius: 999px; background: #cfc6b2; transition: background 0.15s; }
.switch .knob::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); transition: left 0.15s; }
.switch.on { color: var(--accent); }
.switch.on .knob { background: var(--accent); }
.switch.on .knob::after { left: 16px; }

/* Volume rows */
.vol-row { display: grid; grid-template-columns: 34px minmax(150px, 210px) 1fr 42px 30px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--panel2); }
.vol-row:first-of-type { border-top: none; }
.vol-ico .ico { width: 30px; height: 30px; display: block; }
.vol-name { display: flex; flex-direction: column; line-height: 1.25; }
.vol-val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); }
.icon-btn { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.icon-btn .ico { width: 14px; height: 14px; }
.sound-card { transition: opacity 0.15s; }
.sound-card.off .vol-row { opacity: 0.45; }
.sound-card.off .vol-row:hover { opacity: 0.7; }

/* Filled slider: --p is the filled share, set from the value */
input.slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; margin: 0; border-radius: 3px; cursor: pointer;
  background: linear-gradient(to right, var(--accent) var(--p, 50%), #e4dccb var(--p, 50%)); }
input.slider:focus-visible { outline: 2px solid var(--accent2); outline-offset: 4px; }
input.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.1s; }
input.slider::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); }
input.slider:hover::-webkit-slider-thumb, input.slider:active::-webkit-slider-thumb { transform: scale(1.15); }
@media (max-width: 560px) {
  .gm-actions { grid-template-columns: 1fr; }
  .vol-row { grid-template-columns: 30px 1fr 42px 30px; }
  .vol-name { grid-column: 2 / -1; }
  .vol-row input.slider { grid-column: 1 / 3; }
}

/* Debug cheat console (js/cheats.js), toggled with the key left of 1 (` or §). */
#season.forced { outline: 2px dashed #e0a030; outline-offset: -2px; }
#cheat-console { position: fixed; left: 50%; top: 56px; transform: translateX(-50%); width: min(920px, calc(100vw - 32px)); z-index: 60; background: rgba(20, 26, 22, 0.97); color: #e8f0e0;
  border: 1px solid #4a5a4e; border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45); font: 13px/1.45 ui-monospace, Menlo, Consolas, monospace; }
#cheat-console[hidden] { display: none; }
#cheat-console .cc-log { max-height: 62vh; overflow-y: auto; padding: 10px 14px 6px; white-space: pre-wrap; overflow-wrap: anywhere; }
#cheat-console .cc-log > div { padding-left: 2ch; text-indent: -2ch; }
#cheat-console .cc-log > .item { padding-left: 4ch; }
#cheat-console .cc-log > .cc-help { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 20px; padding: 2px 0 6px 2ch; text-indent: 0; overflow-wrap: normal; }
#cheat-console .cc-help .use { color: #f0d890; max-width: 50ch; padding-left: 2ch; text-indent: -2ch; }
@media (max-width: 1000px) { #cheat-console .cc-help .use { max-width: 36ch; } }
#cheat-console .cc-help .use + div { color: #c8d4c0; }
#cheat-console .cc-log .cmd { color: #9fd08a; }
#cheat-console .cc-log .err { color: #ff9a8a; }
#cheat-console .cc-row { display: flex; align-items: center; gap: 6px; padding: 6px 12px 8px; border-top: 1px solid #3a463e; }
#fps-meter { position: fixed; right: 8px; top: calc(var(--tb-h, 56px) + 8px); z-index: 61; pointer-events: none; white-space: pre; background: rgba(20, 26, 22, 0.82);
  color: #c8f0b0; font: 11px/1.35 ui-monospace, Menlo, Consolas, monospace; padding: 4px 7px; border-radius: 6px; }
#cheat-console input { flex: 1; background: transparent; border: 0; outline: 0; color: inherit; font: inherit; padding: 2px 0; }

/* Building panel: Uses ➜ Makes columns, folded settings and quick hover tips */
#tip { position: fixed; z-index: 50; pointer-events: none; background: rgba(20, 25, 22, 0.92); color: #fff; font-size: 12px; line-height: 1.4;
  padding: 6px 9px; border-radius: 7px; max-width: 280px; white-space: pre-line; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); }
#tip .ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
#insp-live:not(.current) { margin: 8px 0; }
.cur-title { display: flex; gap: 6px; align-items: center; }
.cur-title .ico { width: 1.2em; height: 1.2em; }
.cur-meta { margin-left: auto; font-weight: 400; white-space: nowrap; cursor: help; }
.io2 { display: grid; grid-template-columns: minmax(0, 1fr) auto fit-content(42%); gap: 6px; align-items: center; margin: 6px 0 4px; }
.io2.noin { grid-template-columns: minmax(0, 1fr); }
.io-col { display: grid; gap: 3px; align-content: start; }
.io-h { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.io-arrow { color: var(--accent); font-size: 18px; font-weight: 700; }
.io-line { display: flex; gap: 4px; align-items: center; font-size: 12px; line-height: 1.25; padding: 2px 6px; border-radius: 7px; border: 1px solid var(--line);
  background: var(--panel2); cursor: pointer; }
.io-line:hover { border-color: var(--accent2); }
.io-line .ico { width: 16px; height: 16px; flex: none; }
.io-line .nm { min-width: 0; overflow-wrap: break-word; }
.io-line b { margin-left: auto; padding-left: 2px; white-space: nowrap; }
.io-line.out { background: #fff4d9; border-color: #efd28f; }
.tag { font-size: 10px; font-weight: 700; border-radius: 99px; padding: 0 4px; white-space: nowrap; flex: none; }
.tag.good { background: #cfe9d6; color: #22663a; }
.tag.bad { background: #f3c4bc; color: #9a2a1c; }
.tag .ico { width: 10px; height: 10px; }
.actions { flex-wrap: nowrap; }
.actions { gap: 6px; }
.actions button { flex: 1 1 auto; min-width: 0; white-space: nowrap; padding-left: 6px; padding-right: 6px; }
details.settings { margin-top: 10px; background: var(--panel2); border-radius: 8px; padding: 6px 8px; }
details.settings > summary { cursor: pointer; list-style: none; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }
details.settings > summary::-webkit-details-marker { display: none; }
details.settings > summary::before { content: '▸'; color: var(--muted); }
details.settings[open] > summary::before { content: '▾'; }
details.settings .ratectl, details.settings .stockctl { background: none; padding: 0; margin-top: 8px; }
.rr-out .rr-name { min-width: 0; }
.rr-out .rr-time { margin-left: auto; font-size: 11px; white-space: nowrap; }
.rr-meta .ico { width: 14px; height: 14px; vertical-align: -0.2em; }
/* Farm-wide supply of an input: made per minute vs. used per minute by every building */
.io-line { flex-wrap: wrap; }
.sup { flex-basis: 100%; display: flex; gap: 5px; align-items: center; font-size: 11px; color: var(--muted); padding-left: 20px; }
.sbar { flex: 1; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; overflow: hidden; }
.sbar i { display: block; height: 100%; }
.sup.good .sbar i { background: #3f9a5a; } .sup.warn .sbar i { background: #d99a2b; } .sup.bad .sbar i { background: #c8503c; }
.sup.bad .snum { color: #9a2a1c; font-weight: 700; } .sup.warn .snum { color: #8a5a00; font-weight: 700; }
.snum { white-space: nowrap; }
.sup.bad .sbar { background: rgba(200, 80, 60, 0.22); }
/* Input lines take the supply colour (same as their bar); low stock is the separate 📦 tag */
.io-line.s-good { background: #e3f3e6; border-color: #b6dcbf; }
.io-line.s-warn { background: #fdf0d2; border-color: #ecc874; }
.io-line.s-bad { background: #fbe3df; border-color: #eab5ad; }
.tag.stock { background: #fff; color: #9a2a1c; border: 1px solid #eab5ad; }
.tk-t-note { margin-top: 4px; padding-top: 4px; border-top: 1px dashed #efd28f; }
.log .tk-aim { display: block; margin-top: 5px; }

/* Ingredient-group dropdown (Codex, Test Kitchen): icon button with an alphabetical two-column list. */
.dd { position: relative; flex: none; }
.dd-btn { display: flex; align-items: center; gap: 6px; width: 100%; font: inherit; padding: 4px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; text-align: left; }
.dd-btn span:not(.dd-all) { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dd-btn i { font-style: normal; color: var(--muted); font-size: 11px; }
.dd-btn .ico, .dd-opt .ico { width: 24px; height: 24px; vertical-align: middle; flex: none; }
.dd-all { width: 24px; height: 24px; flex: none; display: inline-grid; place-items: center; border-radius: 50%; background: #efe7d4; color: var(--muted); font-size: 13px; }
.dd.open .dd-btn { border-color: #c9a75e; box-shadow: 0 0 0 2px #f3e3b8; }
.dd-menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; width: 420px; max-width: 86vw; max-height: min(430px, 62vh); overflow-y: auto;
  padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); }
.tk-right .dd-menu { left: auto; right: 0; }
.dd-menu.dd-list { width: max-content; min-width: 100%; max-width: min(360px, 86vw); display: flex; flex-direction: column; gap: 1px; }
.dd-wide .dd-btn { min-width: 210px; }
#town-panel .dd-menu { max-height: min(340px, 50vh); }
.dd-opt { display: flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; padding: 4px 6px; border: none; border-radius: 7px; background: none; color: var(--ink); cursor: pointer; text-align: left; }
.dd-opt span:not(.dd-all) { flex: 1; min-width: 0; }
.dd-opt small { color: var(--muted); }
.dd-opt:hover { background: #fbf4e3; }
.dd-opt.on { background: #e9f5ec; font-weight: 700; }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: 2px; margin-top: 2px; border-top: 1px solid var(--line); padding-top: 4px; }
.dd-menu > .dd-opt { width: 100%; }
.tile-group .ico, #modal-body h4.grp .ico { width: 20px; height: 20px; vertical-align: -5px; }
.tk-right .row .dd { width: 200px; }
.chip.unknown .ico { width: 17px; height: 17px; }
/* Cuisines window: one section per stage, locked stages faded */
.cz-stage { margin-top: 12px; }
.cz-stage h4 { margin: 6px 0 2px; }
.cz-stage.locked h4 { color: var(--muted, #888); }
.pack.locked { opacity: 0.55; background: #f6f4ef; }
.cz-teaser { margin: 0 0 6px; font-style: italic; }
.pack.cz-tease { opacity: 0.8; border-style: dashed; }
.cz-more { margin-top: 12px; }
.cz-prog { margin: 2px 0; }

/* Culinary Academy */
.ac-chef .io { margin: 2px 0; }
.ac-chef .gprog { margin-left: 0; }
.lvl { color: #d9a520; font-size: 13px; letter-spacing: 1px; } .lvl i { font-style: normal; color: #d9d0bc; }
.ac-picker { margin-top: 10px; background: #fffaf0; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; max-height: 340px; overflow: auto; }
.ac-cz { margin: 6px 0 10px; }
.ac-cz-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.ac-cz-head .ico { width: 22px; height: 22px; }
.ac-dishes { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-dish { display: inline-flex; align-items: center; gap: 4px; }
.ac-dish .ico { width: 18px; height: 18px; }
.ac-cards { display: flex; flex-direction: column; gap: 4px; }
.ac-card .ico { width: 18px; height: 18px; vertical-align: middle; }
.ac-mini { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ac-mini .ico { width: 18px; height: 18px; vertical-align: middle; }
/* The Academy window is a Greek temple: a pediment on top, the header as the marble beam with a row of dentils, an Ionic
   column down each side of the body (drawn as the body's own background, so they stay put while it scrolls) and two
   steps below. */
.modal-card.temple { position: relative; height: calc(88vh - 120px); max-height: calc(88vh - 120px); margin: 96px 0 28px; border-radius: 2px;
  background: radial-gradient(ellipse 60% 30% at 30% 20%, rgba(255, 255, 255, 0.5), transparent 70%), linear-gradient(180deg, #f2ede3, #e6dfd1);
  box-shadow: inset 0 0 0 1px #b9ad96, 0 22px 60px rgba(0, 0, 0, 0.45); }
.modal-card.temple::before { content: ''; position: absolute; left: -26px; right: -26px; bottom: 100%; height: 92px; pointer-events: none; background: no-repeat center / 100% 100% url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 400 46%22 preserveAspectRatio=%22none%22%3E%3Cpolygon points=%220,46 200,1.5 400,46%22 fill=%22%23efe9dd%22 stroke=%22%23a99c84%22 stroke-width=%221.5%22 vector-effect=%22non-scaling-stroke%22/%3E%3Cpolygon points=%2234,41 200,9 366,41%22 fill=%22%23e1d8c6%22 stroke=%22%23b9ad96%22 stroke-width=%221%22 vector-effect=%22non-scaling-stroke%22/%3E%3C/svg%3E");
  filter: drop-shadow(0 -2px 3px rgba(0, 0, 0, 0.18)); }
.modal-card.temple::after { content: ''; position: absolute; left: -22px; right: -22px; top: 100%; height: 28px; pointer-events: none;
  background: linear-gradient(180deg, #ebe4d6, #cfc5b2) 22px 0 / calc(100% - 44px) 14px no-repeat, linear-gradient(180deg, #e6dfd1, #c4b9a4) 0 14px / 100% 14px no-repeat;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.35); }
.modal-card.temple > header { position: relative; margin: 0 -26px; padding: 18px 44px 16px; border-bottom: 0; border-radius: 2px;
  background: linear-gradient(180deg, #f6f2ea, #e4dccc); box-shadow: inset 0 0 0 1px #a99c84, inset 0 -6px 0 #ddd4c3, inset 0 -7px 0 #b9ad96, 0 3px 0 #b9ad96; }
.modal-card.temple > header::after { content: ''; position: absolute; left: 26px; right: 26px; top: 100%; height: 14px; pointer-events: none;
  background: repeating-linear-gradient(90deg, #d8cfbd 0 16px, transparent 16px 26px); border-top: 3px solid #c9bea9; }
.modal-card.temple > header h2 { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; letter-spacing: 0.05em; color: #4a3f30; }
.modal-card.temple #modal-body { margin-top: 17px; padding: 30px 104px 26px;
  background: no-repeat left 0 top 0 / 92px 54px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 26%22%3E%3Crect x=%220.6%22 y=%220.6%22 width=%2242.8%22 height=%225%22 rx=%221%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%226%22 y=%226%22 width=%2232%22 height=%227%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Cpath d=%22M14 16 Q22 21 30 16%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%229%22 y=%2219.5%22 width=%2226%22 height=%226%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"), no-repeat right 0 top 0 / 92px 54px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 26%22%3E%3Crect x=%220.6%22 y=%220.6%22 width=%2242.8%22 height=%225%22 rx=%221%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%226%22 y=%226%22 width=%2232%22 height=%227%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Cpath d=%22M14 16 Q22 21 30 16%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%229%22 y=%2219.5%22 width=%2226%22 height=%226%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"),
    no-repeat left 0 bottom 0 / 92px 38px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 18%22%3E%3Crect x=%226%22 y=%220.6%22 width=%2232%22 height=%224.6%22 rx=%222.3%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%228%22 y=%225.2%22 width=%2228%22 height=%223.6%22 fill=%22%23e2d9c8%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%223.5%22 y=%228.8%22 width=%2237%22 height=%224.8%22 rx=%222.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%220.6%22 y=%2213.6%22 width=%2242.8%22 height=%223.8%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"), no-repeat right 0 bottom 0 / 92px 38px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 18%22%3E%3Crect x=%226%22 y=%220.6%22 width=%2232%22 height=%224.6%22 rx=%222.3%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%228%22 y=%225.2%22 width=%2228%22 height=%223.6%22 fill=%22%23e2d9c8%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%223.5%22 y=%228.8%22 width=%2237%22 height=%224.8%22 rx=%222.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%220.6%22 y=%2213.6%22 width=%2242.8%22 height=%223.8%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(90, 70, 40, 0.2), transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%, rgba(90, 70, 40, 0.24)) left 19px top 50px / 54px calc(100% - 86px) no-repeat, linear-gradient(90deg, rgba(90, 70, 40, 0.2), transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%, rgba(90, 70, 40, 0.24)) right 19px top 50px / 54px calc(100% - 86px) no-repeat,
    repeating-linear-gradient(90deg, #ece6d9 0 5px, #cbc0aa 5px 7px, #f7f3ea 7px 10px) left 19px top 50px / 54px calc(100% - 86px) no-repeat, repeating-linear-gradient(90deg, #ece6d9 0 5px, #cbc0aa 5px 7px, #f7f3ea 7px 10px) right 19px top 50px / 54px calc(100% - 86px) no-repeat,
    linear-gradient(90deg, rgba(90, 70, 40, 0.1), transparent 96px, transparent calc(100% - 96px), rgba(90, 70, 40, 0.1)); }
.modal-card.temple #modal-body h4 { margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 1px solid #cfc4b0; font-family: Georgia, 'Times New Roman', serif; font-variant: small-caps;
  letter-spacing: 0.08em; color: #5d4f3a; font-size: 18px; }
.modal-card.temple #modal-body h4:first-child { margin-top: 0; }
.modal-card.temple .pack { border-color: #d6ccb9; box-shadow: 0 1px 0 #cfc4b0; }
@media (max-width: 600px) {
  .modal-card.temple { height: calc(88vh - 66px); max-height: calc(88vh - 66px); margin: 50px 0 16px; }
  .modal-card.temple::before { left: -8px; right: -8px; height: 46px; }
  .modal-card.temple::after { left: -6px; right: -6px; height: 16px;
    background: linear-gradient(180deg, #ebe4d6, #cfc5b2) 6px 0 / calc(100% - 12px) 8px no-repeat, linear-gradient(180deg, #e6dfd1, #c4b9a4) 0 8px / 100% 8px no-repeat; }
  .modal-card.temple > header { margin: 0 -8px; padding: 12px 16px 12px; }
  .modal-card.temple > header::after { left: 8px; right: 8px; height: 9px; background: repeating-linear-gradient(90deg, #d8cfbd 0 10px, transparent 10px 16px); border-top-width: 2px; }
  .modal-card.temple > header h2 { font-size: 18px; }
  .modal-card.temple #modal-body { margin-top: 11px; padding: 26px 56px 20px;
    background: no-repeat left 0 top 0 / 50px 30px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 26%22%3E%3Crect x=%220.6%22 y=%220.6%22 width=%2242.8%22 height=%225%22 rx=%221%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%226%22 y=%226%22 width=%2232%22 height=%227%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Cpath d=%22M14 16 Q22 21 30 16%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%229%22 y=%2219.5%22 width=%2226%22 height=%226%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"), no-repeat right 0 top 0 / 50px 30px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 26%22%3E%3Crect x=%220.6%22 y=%220.6%22 width=%2242.8%22 height=%225%22 rx=%221%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%226%22 y=%226%22 width=%2232%22 height=%227%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%226.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%223.4%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Ccircle cx=%228%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Ccircle cx=%2236%22 cy=%2213%22 r=%221.2%22 fill=%22%23a99c84%22/%3E%3Cpath d=%22M14 16 Q22 21 30 16%22 fill=%22none%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%229%22 y=%2219.5%22 width=%2226%22 height=%226%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"),
    no-repeat left 0 bottom 0 / 50px 20px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 18%22%3E%3Crect x=%226%22 y=%220.6%22 width=%2232%22 height=%224.6%22 rx=%222.3%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%228%22 y=%225.2%22 width=%2228%22 height=%223.6%22 fill=%22%23e2d9c8%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%223.5%22 y=%228.8%22 width=%2237%22 height=%224.8%22 rx=%222.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%220.6%22 y=%2213.6%22 width=%2242.8%22 height=%223.8%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"), no-repeat right 0 bottom 0 / 50px 20px url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 44 18%22%3E%3Crect x=%226%22 y=%220.6%22 width=%2232%22 height=%224.6%22 rx=%222.3%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%228%22 y=%225.2%22 width=%2228%22 height=%223.6%22 fill=%22%23e2d9c8%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%223.5%22 y=%228.8%22 width=%2237%22 height=%224.8%22 rx=%222.4%22 fill=%22%23f3eee4%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3Crect x=%220.6%22 y=%2213.6%22 width=%2242.8%22 height=%223.8%22 fill=%22%23ebe4d6%22 stroke=%22%23a99c84%22 stroke-width=%221.2%22/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(90, 70, 40, 0.2), transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%, rgba(90, 70, 40, 0.24)) left 11px top 27px / 28px calc(100% - 45px) no-repeat, linear-gradient(90deg, rgba(90, 70, 40, 0.2), transparent 35%, rgba(255, 255, 255, 0.3) 50%, transparent 65%, rgba(90, 70, 40, 0.24)) right 11px top 27px / 28px calc(100% - 45px) no-repeat,
    repeating-linear-gradient(90deg, #ece6d9 0 3px, #cbc0aa 3px 4px, #f7f3ea 4px 6px) left 11px top 27px / 28px calc(100% - 45px) no-repeat, repeating-linear-gradient(90deg, #ece6d9 0 3px, #cbc0aa 3px 4px, #f7f3ea 4px 6px) right 11px top 27px / 28px calc(100% - 45px) no-repeat,
    linear-gradient(90deg, rgba(90, 70, 40, 0.1), transparent 52px, transparent calc(100% - 52px), rgba(90, 70, 40, 0.1)); }
}

/* Blueprints: the offer in Plan production, and the bar while one is being placed */
.bp-offer { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 10px; padding: 8px 10px; border-radius: 8px; background: rgba(91, 155, 213, 0.12); border: 1px solid rgba(58, 111, 166, 0.35); }
.bp-offer span { flex: 1; min-width: 200px; }
#bpbar { position: absolute; left: 154px; bottom: 12px; width: min(560px, calc(100% - 170px)); background: rgba(28, 36, 31, 0.9); color: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
#bpbar .muted { color: rgba(255, 255, 255, 0.7); }
#bpbar .bp-note { margin: 3px 0 6px; color: rgba(255, 255, 255, 0.85); }
#bpbar .short { color: #ff9c8f; }
#bpbar .bp-btns { display: flex; gap: 6px; justify-content: flex-end; }
#bpbar img { width: 18px; height: 18px; vertical-align: -4px; }

/* Town: restaurants */
.stars { position: relative; display: inline-block; color: #d9cfb8; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.stars i { position: absolute; left: 0; top: 0; overflow: hidden; color: #e3a92b; font-style: normal; white-space: nowrap; }
.tw-goal { margin: 0 0 8px; }
.tw-goal .ico { width: 18px; height: 18px; vertical-align: -4px; }
.tw-panel { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.tw-head { display: flex; align-items: flex-start; gap: 10px; }
.tw-head > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tw-head h3 { margin: 0; font-size: 17px; }
.tw-head .stars { font-size: 17px; }
.tw-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: 16px; }
@media (max-width: 760px) { .tw-cols { grid-template-columns: 1fr; } }
.tw-dish { display: grid; grid-template-columns: 30px 1fr auto auto auto; align-items: center; gap: 6px; padding: 3px 4px; border-bottom: 1px solid var(--panel2); }
.tw-dish .ico-l .ico { width: 28px; height: 28px; }
.tw-dish.out { background: #fdecea; }
.tw-pick { display: flex; flex-wrap: wrap; gap: 4px; max-height: 320px; overflow: auto; margin-top: 6px; align-content: flex-start; }
.tw-pick-cz { flex-basis: 100%; font-size: 12px; font-weight: 600; margin: 6px 0 1px; display: flex; align-items: center; gap: 5px; }
.tw-pick-cz:first-child { margin-top: 0; }
.tw-pick-cz .ico { width: 18px; height: 18px; }
.tw-stock { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.tw-pick .ico { width: 18px; height: 18px; vertical-align: -4px; }
.tw-review { padding: 6px 0; border-bottom: 1px solid var(--panel2); font-size: 13px; }
.tw-review .stars { font-size: 13px; }
.tw-dish .short { color: var(--bad); font-weight: 600; }
/* Academy chef portraits with a speciality badge */
.chef-face { position: relative; flex: none; }
.pack-icon.chef-face > .ico { width: 52px; height: 52px; background: #f6efe0; border-radius: 50%; }
.chef-face .cz-badge { position: absolute; right: -4px; bottom: -2px; width: 22px; height: 22px; background: #fff; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.chef-face .cz-badge .ico { width: 17px; height: 17px; }
.ac-mini .ico, .ac-card .ico { vertical-align: middle; }
.ac-card .ico { width: 20px; height: 20px; }
#bpbar .bp-mult { margin-right: auto; align-self: center; font-size: 13px; }
#bpbar .bp-mult button { min-width: 26px; padding: 2px 6px; }

/* Dispatcher tab in Orders */
.disp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.disp-head .switch { margin-left: auto; }
.disp-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin: 4px 0 10px; }
.disp-kind { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.disp-line { margin: 0 0 6px; }

/* ----- Town screen: full-screen isometric town (js/townmap.js) and its side panel ----- */
body.town-mode #buildbar, body.town-mode #viewport, body.town-mode #inspector { display: none; }
#townview { flex: 1; display: flex; min-width: 0; }
#townview[hidden] { display: none; }
#town-stage { flex: 1; position: relative; overflow: hidden; background: #8fbf6a; }
#town-map { position: absolute; inset: 0; cursor: grab; touch-action: none; user-select: none; }
#town-map.dragging { cursor: grabbing; }
#town-map .tm-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
#town-map .tm-backcv { display: block; position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; } /* the back layer as a picture (townmap.js drawBack) */
#town-night { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply; }
#town-night > div { position: absolute; inset: 0; mix-blend-mode: normal; }
#town-weather { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#town-glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; display: none; }
#town-glow .tm-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
#town-over { position: absolute; inset: 0; pointer-events: none; }
#town-over > * { pointer-events: auto; }
#town-btn.on { background: var(--accent2); color: #fff; }
.tw-back { position: absolute; top: 12px; left: 12px; font-weight: 700; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
#town-banner { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); }
.tw-banner { background: #fbf7ee; border: 2px solid #3b2b22; border-radius: 99px; padding: 5px 14px; font-weight: 700; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.25); white-space: nowrap; }
.tw-banner.hot { background: #f2c14e; animation: twpulse 1.6s ease-in-out infinite; }
@keyframes twpulse { 50% { transform: scale(1.05); } }
.tw-legend { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: rgba(251,247,238,.92); border-radius: 10px; padding: 6px 10px; font-size: 13px; font-weight: 600; }
.tw-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.tw-legend .muted { font-weight: 400; font-size: 12px; }
.tw-zoom { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 4px; }
.tw-zoom button { width: 34px; height: 34px; padding: 0; font-size: 18px; font-weight: 700; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
#town-panel { width: 420px; display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--line); min-height: 0; }
.tw-tabs { display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 1px solid var(--line); }
.tw-tabs button { border-radius: 8px 8px 0 0; border-bottom: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--panel2); flex: none; }
.tw-tabs .tw-lottab { flex: 0 1 auto; min-width: 0; }
.tw-tabs .hintab { align-self: center; padding: 4px 6px 6px; font-size: 13px; color: var(--muted); font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-tabs button.on { background: #fff; font-weight: 700; }
.tw-body { flex: 1; overflow-y: auto; padding: 10px 12px 16px; }
.tw-body h3 { margin: 0; font-size: 17px; }
.tw-body h4 { margin: 14px 0 6px; }
.tw-rv { border-radius: 10px; padding: 4px; }
button.ghost { border: none; background: none; padding: 0 4px; }
.warnc { color: #b2621a; font-weight: 600; }
.tw-dcard { border-left: 4px solid var(--dc); background: #fff; border-radius: 6px; padding: 6px 9px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 3px; }
.tw-dname { font-weight: 700; color: var(--dc); }
.tw-standing > div { display: grid; grid-template-columns: 1fr auto 30px 92px; gap: 6px; align-items: center; font-size: 13px; padding: 1px 0; }
.tw-standing > div.mine { font-weight: 600; color: var(--accent); }
.tw-standing .stars { font-size: 12px; }
.tw-legacy > div { display: flex; gap: 8px; align-items: center; padding: 3px 0; }
.tw-legacy > div > span:nth-child(2) { flex: 1; }
.tw-legacy > div.done { color: var(--good); font-weight: 600; }
.tw-critic { background: #fff8e3; border: 1px solid #ecd9a3; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.tw-goal { margin: 0 0 8px; }
.tw-head { display: flex; align-items: flex-start; gap: 10px; }
.tw-head > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tw-head .stars { font-size: 17px; }
.tm-svg .gr { fill: #8fbf6a; } .tm-svg .gr2 { fill: #9fcb76; } .tm-svg .water { fill: #5b9bd5; }
.tm-svg .lf { fill: #4f9a3c; } .tm-svg .lf-hi { fill: #78b95a; } .tm-svg .lf2 { fill: #3f7a3a; }
.tm-svg.s-autumn .gr { fill: #a9b866; } .tm-svg.s-autumn .gr2 { fill: #b3bf6e; } .tm-svg.s-autumn .lf { fill: #d9822b; } .tm-svg.s-autumn .lf-hi { fill: #eab04a; }
.tm-svg.s-winter .gr, .tm-svg.s-winter .gr2 { fill: #eef2f4; } .tm-svg.s-winter .lf { fill: #dfe7ea; } .tm-svg.s-winter .lf-hi { fill: #fff; } .tm-svg.s-winter .lf2 { fill: #5f8a6a; }
.tm-svg.s-winter .roof { fill: #f4f7f8; } .tm-svg.s-winter .water { fill: #6f9fc4; }
.tm-svg.s-spring .lf-hi { fill: #f2b8c6; }
.tm-svg .dash { stroke: #e9e4d6; stroke-width: 1.5; stroke-dasharray: 8 8; fill: none; }
.tm-svg .win { fill: #bfe0f5; } .tm-svg .glass { fill: #9cc8e6; }
.tm-svg.night .win, .tm-svg.night .glass { fill: #ffd36b; } .tm-svg .lampl { fill: #fff3c4; } .tm-svg.night .lampl { fill: #ffd36b; filter: drop-shadow(0 0 4px #ffd36b); }
.tm-svg .beacon { fill: #ffe9a8; } .tm-svg.night .beacon { fill: #ffd36b; filter: drop-shadow(0 0 8px #ffd36b); }
.tm-svg .tm-lot { cursor: pointer; }
.tm-svg .tm-lot:hover { filter: brightness(1.07); }
.tm-svg .tm-selring { fill: none; stroke: #f2c14e; stroke-width: 4; }
.tm-svg .tm-selring.top { stroke-width: 3; stroke-dasharray: 10 6; animation: tmsel 1.2s linear infinite; pointer-events: none; }
@keyframes tmsel { to { stroke-dashoffset: -32; } }
.tm-svg .tm-sign.big { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .tm-svg .tm-selring.top { animation: none; } }
.tm-svg .tm-sign { font: 800 9px system-ui, sans-serif; fill: #a3302a; text-anchor: middle; letter-spacing: 1px; }
.tm-svg .tm-label { cursor: pointer; }
.tm-svg .tm-label:hover rect { filter: brightness(1.12); }
.tm-svg .tm-ln { font: 700 12px system-ui, sans-serif; fill: #fff; }
.tm-svg .tm-ls { font: 600 11px system-ui, sans-serif; fill: #ffe39a; text-anchor: end; }
.tm-svg .tm-alert { font: 800 12px system-ui, sans-serif; fill: #fff; text-anchor: middle; }
.tm-svg .tm-dist { pointer-events: none; }
.tm-svg .tm-dn { font: 800 15px system-ui, sans-serif; fill: #fff; text-anchor: middle; letter-spacing: .5px; }
/* The town's looping animations (sails, fountain, boats, smoke, TO LET signs, money notes) are set by townmap.js LOOPS:
   CSS animations there would give each its own layer, which is costly next to thousands of SVG shapes. */
.tm-svg .jet { transform-box: fill-box; transform-origin: bottom; }
.tm-svg .tm-floater { font: 800 13px system-ui, sans-serif; text-anchor: middle; paint-order: stroke; stroke: rgba(0,0,0,.55); stroke-width: 3px; pointer-events: none; }
.tm-svg .tm-floater.pay { fill: #ffe39a; } .tm-svg .tm-floater.miss { fill: #ffb3a8; } .tm-svg .tm-floater.rival { font-size: 11px; opacity: .8; }
.roty .ry-head { font-size: 20px; margin-bottom: 6px; }
.ry-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 8px; align-items: center; padding: 6px 4px; border-bottom: 1px solid var(--panel2); }
.ry-row.mine { background: #f2f8ef; }
.ry-place { font-size: 22px; text-align: center; font-weight: 700; }
.ry-quote { font-style: italic; margin-top: 2px; }
.ry-sheet { margin-top: 6px; border-top: 1px dashed var(--panel2); padding-top: 4px; }
.ry-sheet > div { display: flex; justify-content: space-between; gap: 10px; padding: 1px 0; }
.ry-sheet > div b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ry-sheet .plus b { color: var(--good); } .ry-sheet .minus b { color: #b2621a; }
.ry-sheet .tot { border-top: 1px solid var(--panel2); margin-top: 2px; padding-top: 3px; font-weight: 700; }
@media (max-width: 1100px) { #town-panel { width: 340px; } }
/* Town on desktop: the long back label, no sheet controls. */
.tw-back .tw-short, .tw-tabs .tw-sheetbtn, .tw-tabs .tw-grip { display: none; }
/* Town on phones held sideways: the side panel stays, with the short back label and the critics banner beside it. */
@media (hover: none) and (pointer: coarse) and (max-height: 560px) and (min-width: 601px) {
  #town-panel { width: min(340px, 42vw); }
  .tw-back { top: 8px; left: 8px; padding: 6px 10px; }
  .tw-back .tw-long { display: none; }
  .tw-back .tw-short { display: inline; }
  #town-banner { top: 8px; left: auto; right: 8px; transform: none; max-width: calc(100% - 112px); }
  .tw-banner { font-size: 13px; padding: 5px 11px; white-space: normal; text-align: center; }
  body.town-mode:not(.modal-open) #toasts { right: calc(min(340px, 42vw) + 14px); }
}
/* Town on upright phones: the map fills the screen and the panel is a bottom sheet (ui.js townSheet). Closed, only
   its tab row peeks out at the bottom; open (body.tw-sheet), it covers the lower part of the map and scrolls. */
@media (hover: none) and (pointer: coarse) and (max-width: 600px) {
  #town-panel { position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 12; border-left: 0; border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 18px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom); }
  body.town-mode.tw-sheet #town-panel { height: min(64dvh, calc(100dvh - var(--tb-h, 80px) - 110px)); }
  body.town-mode:not(.tw-sheet) #town-panel .tw-body { display: none; }
  #town-panel .tw-tabs { position: relative; padding: 16px 8px 0; align-items: flex-end; touch-action: none; }
  body.town-mode:not(.tw-sheet) #town-panel .tw-tabs { border-bottom: 0; padding-bottom: 8px; }
  body.town-mode:not(.tw-sheet) #town-panel .tw-tabs button { border-radius: 8px; border-bottom: 1px solid var(--line); }
  .tw-tabs .tw-grip { display: block; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: var(--line); }
  .tw-tabs .tw-lottab { flex: 1 1 auto; }
  .tw-tabs .tw-sheetbtn { display: block; margin-left: auto; flex: none; width: 40px; padding: 0; align-self: stretch; min-height: 34px; background: transparent; border: 0; }
  .tw-tabs .tw-sheetbtn i { display: block; width: 10px; height: 10px; margin: 0 auto; border: solid var(--ink, #3b2b22); border-width: 2.5px 2.5px 0 0; transform: translateY(3px) rotate(-45deg); }
  body.tw-sheet .tw-tabs .tw-sheetbtn i { transform: translateY(-3px) rotate(135deg); }
  #town-panel .tw-body { padding-bottom: 24px; }
  #town-panel input[type=search] { font-size: 16px; } /* 16 px keeps phones from zooming the page in on focus */
  .tw-back { top: 8px; left: 8px; padding: 6px 10px; }
  .tw-back .tw-long { display: none; }
  .tw-back .tw-short { display: inline; }
  #town-banner { top: 8px; left: auto; right: 8px; transform: none; max-width: calc(100% - 112px); }
  .tw-banner { font-size: 13px; padding: 5px 11px; white-space: normal; text-align: center; }
  .tw-legend { left: 8px; bottom: 66px; }
  .tw-zoom { right: 8px; bottom: 66px; }
  body.town-mode:not(.modal-open) #toasts { right: 8px; bottom: 66px; }
  body.town-mode.tw-sheet:not(.modal-open) #toasts { bottom: auto; top: calc(var(--tb-h, 80px) + 74px); }
}

/* Head chef box in a restaurant's Town panel */
.tw-chefs { display: flex; flex-direction: column; gap: 6px; }
.tw-chef { display: flex; align-items: flex-start; gap: 10px; padding: 6px 8px; border: 1px solid var(--panel2); border-radius: 6px; }
.tw-chef > div { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.tw-chef .row { margin-top: 2px; }
.tw-chef button { align-self: flex-start; }
/* Town: district subtitle, sailing boats */
.tm-svg .tm-dsub { font: 600 11px system-ui, sans-serif; fill: #fff; text-anchor: middle; opacity: .95; }
.tm-svg .wake { fill: none; stroke: #e8f4fb; stroke-width: 1.6; stroke-linecap: round; opacity: 0; transition: opacity .6s; }
.tm-svg .moving .wake { opacity: .85; }
.tm-svg .smoke { fill: #d9d9d9; opacity: .7; transform-box: fill-box; transform-origin: center; }
/* Restaurant panel tabs (Menu / District / Reviews) under the always-visible header. */
.tw-sub { display: flex; gap: 4px; margin: 10px 0 8px; border-bottom: 2px solid var(--panel2); }
.tw-sub button { flex: 1 1 0; min-width: 0; border-radius: 8px 8px 0 0; border-bottom: none; background: var(--panel2); padding: 6px 4px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-sub button.on { background: #fff; font-weight: 700; box-shadow: inset 0 -2px 0 #fff, 0 2px 0 #fff; }
.tw-sub .muted, .tw-sub .tw-out { font-weight: 400; font-size: 12px; }
.tw-out { color: var(--bad); font-weight: 600; }
.tw-pickhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.tw-pickhead button { margin-left: auto; }
/* What the critic has said about a district's cuisines, with names. */
.tw-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tw-chip { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 7px 2px 5px; border-radius: 99px; border: 1px solid; white-space: nowrap; }
.tw-chip .ico { width: 16px; height: 16px; }
.tw-chip.ok { background: #eaf5e6; border-color: #a9d19a; color: #2d6a2f; }
.tw-chip.no { background: #fbecea; border-color: #e2b2ab; color: #9a3b30; }
.tw-chip.unk { background: #f4f1ea; border-color: #ddd5c4; border-style: dashed; color: #8a7f6c; }
.tw-revsum { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.tw-revsum .stars { font-size: 17px; }
.tw-manage { margin-top: 12px; }
/* Town tab: your restaurants. */
.tw-mine { display: flex; flex-direction: column; gap: 4px; }
.tw-mrow { display: grid; grid-template-columns: 1fr auto 30px 40px 74px; gap: 6px; align-items: center; text-align: left; background: #fff; border: 1px solid var(--panel2); border-left: 4px solid var(--dc); border-radius: 6px; padding: 5px 8px; font-weight: 400; }
.tw-mrow > span:first-child { display: flex; flex-direction: column; min-width: 0; }
.tw-mrow > span:first-child b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-mrow .stars { font-size: 12px; }
.tw-mrow > span:last-child { text-align: right; }
.tw-pick button.loved { border-color: #e7a3a3; background: #fff5f5; }
.tw-how { background: #fff; border-radius: 6px; padding: 7px 10px; margin: 0 0 8px; }

/* Storage capacity and per-item auto-sell (Market Sell tab, Warehouse, Buildings list) */
.storagebar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; padding: 6px 10px; background: var(--panel2); border-radius: 8px; }
.t-qty small, td.num small { font-weight: 400; opacity: 0.6; font-size: 0.85em; }
.t-qty.full, td.num.full { color: #8a5a1c; }
.asell { display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.asell select { font-size: 12px; padding: 1px 2px; }
.asell.m-off select { border-color: #d9483b; color: #a3302a; background: #fdf0ee; font-weight: 600; }
.asell.m-n select, .asell.m-n input[type=number] { border-color: #d19f1c; background: #fdf6dc; color: #7a5a0c; font-weight: 600; }
.asell input[type=number] { width: 54px; font-size: 12px; padding: 1px 3px; }
/* Town map detail (2026-10-11): shadows, windows, roofs, countryside, the modern train. */
.tm-svg .tm-shadow { fill: #22301a; fill-opacity: .17; }
.tm-svg .tsh { fill: #22301a; fill-opacity: .17; }
.tm-svg .mull { stroke: #fbfaf6; stroke-width: .7; opacity: .85; fill: none; }
.tm-svg .sill { stroke: #fbfaf6; stroke-width: 1.6; fill: none; }
.tm-svg .bloom { fill: #e0566b; } .tm-svg.s-spring .bloom { fill: #f2a3c0; } .tm-svg.s-autumn .bloom { fill: #e08a3b; } .tm-svg.s-winter .bloom { display: none; }
.tm-svg .rline { stroke: #000; stroke-opacity: .16; stroke-width: .8; fill: none; }
.tm-svg .csmoke { fill: #e9ecef; opacity: 0; } .tm-svg.s-winter .csmoke, .tm-svg.s-autumn .csmoke { transform-box: fill-box; transform-origin: center; }
.tm-svg .lf2-hi { fill: #fff; opacity: .1; } .tm-svg .lf2-ln { stroke: #000; stroke-opacity: .15; stroke-width: 1; fill: none; }
.tm-svg .fruit { fill: #d9483b; } .tm-svg.s-autumn .fruit { fill: #ee8a33; } .tm-svg.s-spring .fruit, .tm-svg.s-winter .fruit { display: none; }
.tm-svg .gr3 { fill: #7fae5c; } .tm-svg.s-autumn .gr3 { fill: #a3a35c; } .tm-svg.s-winter .gr3 { fill: #e2e9ec; }
.tm-svg .yard { fill: #d6c59c; } .tm-svg.s-winter .yard { fill: #e8ecee; }
.tm-svg .fld.f-wheat { fill: #e6c860; } .tm-svg .fld.f-veg { fill: #79ad52; } .tm-svg .fld.f-soil { fill: #a87a52; }
.tm-svg .fld.f-sun { fill: #f2c94c; } .tm-svg .fld.f-lav { fill: #9d84cf; } .tm-svg .fld.f-vine { fill: #b9a06a; }
.tm-svg.s-spring .fld.f-wheat, .tm-svg.s-spring .fld.f-sun { fill: #a7cc6a; } .tm-svg.s-spring .fld.f-lav { fill: #a3be86; } .tm-svg.s-spring .fld.f-veg { fill: #8fc160; }
.tm-svg.s-autumn .fld.f-wheat { fill: #cfae6e; } .tm-svg.s-autumn .fld.f-sun { fill: #a88a4a; } .tm-svg.s-autumn .fld.f-lav { fill: #9a8fae; } .tm-svg.s-autumn .fld.f-veg { fill: #a8a356; }
.tm-svg.s-winter .fld { fill: #eef2f4; } .tm-svg.s-winter .frow { opacity: .3; } .tm-svg.s-winter .sundot, .tm-svg.s-spring .sundot { display: none; }
.tm-svg .frow { fill: #3c280a; opacity: .17; } .tm-svg .sundot { fill: #6b4a1e; opacity: .6; } .tm-svg .vined { fill: #4f7a34; } .tm-svg.s-winter .vined { fill: #8a7a6a; }
.tm-svg .hedge { stroke: #3f7a3a; stroke-width: 6; stroke-linecap: round; fill: none; } .tm-svg .hedge-hi { stroke: #5f9a4a; stroke-width: 2.5; stroke-linecap: round; fill: none; }
.tm-svg.s-winter .hedge { stroke: #8aa28d; } .tm-svg.s-winter .hedge-hi { stroke: #f4f7f8; } .tm-svg.s-autumn .hedge-hi { stroke: #a8a050; }
.tm-svg .fence { stroke: #8a6a4a; stroke-width: 1.2; fill: none; } .tm-svg .fence.post { stroke-width: 1.8; }
.tm-svg .hay { fill: #e3c766; } .tm-svg .hay-end { fill: #f0d98a; }
.tm-svg .sail-cloth { fill: #f4efe4; opacity: .92; }
.tm-svg .sails { transform-box: fill-box; transform-origin: center; }
.tm-svg .reed { stroke: #5f8a3a; stroke-width: 1.2; fill: none; } .tm-svg.s-winter .reed { stroke: #a99a7a; }
.tm-svg .croad { stroke: #9a958a; stroke-width: 24; fill: none; } .tm-svg .lane { stroke: #cdb88e; stroke-width: 12; fill: none; opacity: .9; }
.tm-svg.s-winter .lane { stroke: #dfe3e2; }
.tm-svg .sand { fill: #ead9a6; } .tm-svg.s-winter .sand { fill: #ecebe4; }
.tm-svg .surf { stroke: #fbfaf6; stroke-width: 2.5; stroke-dasharray: 18 10; opacity: .6; fill: none; }
.tm-svg .rock { fill: #8f8a80; }
.tm-svg .zebra { fill: #f4f1e8; opacity: .85; }
.tm-svg .mast { stroke: #5a5f66; stroke-width: 2.2; fill: none; } .tm-svg .mast.arm { stroke-width: 1.4; }
.tm-svg .wire { stroke: #3b3b3b; stroke-width: 1.1; opacity: .85; fill: none; }
.tm-svg .twin { fill: #2b3a48; } .tm-svg.night .twin { fill: #ffd36b; }
.tm-svg .thl { fill: #fff6d0; } .tm-svg.night .thl { fill: #fff3b0; filter: drop-shadow(0 0 4px #fff3b0); }
.tm-svg.lod .mull, .tm-svg.lod .sill, .tm-svg.lod .rline, .tm-svg.lod .tsh, .tm-svg.lod .lf2-ln, .tm-svg.lod .lf2-hi, .tm-svg.lod .bloom, .tm-svg.lod .zebra { display: none; }
.ws-keep { align-items: center; }
.ws-keep .seg button { flex: none; padding: 3px 12px; }
.ws-keep input[type=number] { width: 80px; padding: 2px 4px; }
.tm-svg .mtn-l { fill: #a39a8a; } .tm-svg .mtn-r { fill: #7d7468; } .tm-svg .snowcap { fill: #f6f8fa; }
.tm-svg .foothill { fill: #6f9a4e; } .tm-svg.s-autumn .foothill { fill: #8f9450; } .tm-svg.s-winter .foothill { fill: #dfe7ea; } .tm-svg.s-winter .mtn-l { fill: #c9ccd0; } .tm-svg.s-winter .mtn-r { fill: #a3a8ae; }
.tm-svg .river { stroke: #5b9bd5; stroke-width: 34; stroke-linejoin: round; stroke-linecap: round; fill: none; } .tm-svg .river-hi { stroke: #7fb3e0; stroke-width: 6; stroke-dasharray: 30 40; fill: none; opacity: .7; }
.tm-svg.s-winter .river { stroke: #a9c9e3; }
.tm-svg.tm-back.s-winter .csmoke, .tm-svg.tm-back.s-autumn .csmoke { opacity: .5; }
.tm-svg .mtn.far { opacity: .75; } .tm-svg .mtn.far .foothill { fill: #7f9c86; } .tm-svg.s-winter .mtn.far .foothill { fill: #cfd9de; }
.qm { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e6dcc8; color: #5f574b; font: 700 11px system-ui, sans-serif; cursor: help; vertical-align: 1px; margin-left: 3px; }
.qm:hover { background: #d8c6a5; }
.tw-legend .qm { width: 22px; height: 22px; font-size: 13px; margin: 0; }
/* District cuisines (town): five icons, faded when the menu has none of that cuisine */
.tw-czs { display: inline-flex; gap: 2px; vertical-align: middle; }
.tw-czs img, .tw-czs svg { width: 18px; height: 18px; }
.tw-czs .off { opacity: 0.25; filter: grayscale(1); }
.tw-pick .unwanted { opacity: 0.6; }
.tw-critics { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; }
.tw-critics > div { display: flex; justify-content: space-between; gap: 8px; border-left: 4px solid var(--dc); background: #fff; border-radius: 6px; padding: 4px 8px; font-size: 13px; }
.tw-cname { font-weight: 600; cursor: help; }
.ry-block + .ry-block { margin-top: 14px; }
.tw-czs .ok, .tw-czs .no { position: relative; }
.tw-czs .ok::after, .tw-czs .no::after { position: absolute; right: -3px; bottom: -4px; font-size: 10px; font-weight: 700; }
.tw-czs .ok::after { content: '✓'; color: #2f7d4f; }
.tw-czs .no::after { content: '✗'; color: #b03a2e; }
.tw-czs .no { opacity: 0.55; }
/* Unlock splash: the same warm card as a dish discovery */
#modal:has(.modal-card.splash) { background: radial-gradient(circle at 50% 45%, rgba(255, 190, 90, 0.35), rgba(30, 18, 8, 0.7) 70%); }
.modal-card.splash { position: relative; width: min(480px, 94vw); max-height: none; margin-top: 56px; overflow: visible; background: #fff8ea; border-radius: 18px; text-align: center; box-shadow: 0 0 50px rgba(255, 170, 60, 0.45), 0 20px 50px rgba(0, 0, 0, 0.35); animation: dc-rise 0.45s cubic-bezier(.2, 1.4, .4, 1); }
.modal-card.splash header { display: none; }
.modal-card.splash #modal-body { overflow: visible; padding: 70px 22px 18px; }
.splash .sp-icon { position: absolute; left: 50%; top: -58px; width: 124px; height: 124px; margin-left: -62px; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle, #fff 55%, #ffe7b8); box-shadow: 0 6px 18px rgba(200, 110, 30, 0.35); font-size: 72px; line-height: 1; animation: egg-bob 2.6s ease-in-out infinite; }
.splash .sp-icon .ico { width: 84px; height: 84px; }
.splash .sp-title { margin: 2px 0 10px; font-size: 28px; color: #7a3416; }
.splash .sp-lines { text-align: left; margin: 0 auto 16px; padding-left: 20px; max-width: 390px; line-height: 1.5; }
.splash .sp-one { margin: 0 auto 16px; max-width: 390px; line-height: 1.5; }
.splash .sp-go button { font-size: 16px; padding: 8px 22px; }
.splash .sp-dishes { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: 0 auto 12px; max-width: 420px; }
.splash .sp-dishes .ico { width: 34px; height: 34px; }
/* Signature Dishes: names by cuisine, on the reveal card and on the Cuisines window cards */
.sig-list { margin: 4px 0; }
.sig-list ul { list-style: none; margin: 2px 0 6px; padding: 0; }
.sig-list li { margin: 2px 0; }
.sig-list li.done { color: #3f7a2a; }
.sig-list .sig-cz .ico { width: 18px; height: 18px; vertical-align: -3px; }
.sig-list button.small { padding: 1px 6px; margin-left: 4px; }
.splash .sig-splash { display: grid; gap: 6px; text-align: left; max-width: 390px; margin: 0 auto 12px; }
.splash .sig-splash .sig-cz { background: #fff; border: 1px solid #f0d9a8; border-radius: 10px; padding: 6px 10px; }
.splash .sig-splash ul { margin: 4px 0 0; }
.splash .sp-rewards { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 12px; }
.splash .sp-rewards > span { padding: 5px 12px; border-radius: 999px; background: #ffe7b0; color: #7a3416; font-weight: 700; font-size: 15px; box-shadow: inset 0 0 0 1px #f0b860; }
.splash .sp-rewards .ico { width: 18px; height: 18px; vertical-align: -3px; }
.splash .sp-icon.gold { background: radial-gradient(circle, #fff6c8 52%, #f2c14e); box-shadow: 0 0 0 5px #e3a823, 0 6px 22px rgba(220, 150, 20, 0.6); }
.splash .dc-chain { text-align: center; }
/* Trophy cabinet: the card is a tall walnut display cabinet with a carved cornice on top and two feet below. Inside, deep
   red velvet, a little spotlight over every glass shelf, a brass name plate on each shelf and a faint glare across the
   glass doors. Places not won yet show a dashed outline. */
.tc-open { display: flex; align-items: center; gap: 6px; margin: 0 0 10px; font-weight: 700; }
.modal-card.cabinet-card { --wood: #4a2a16; position: relative; width: min(760px, 96vw); max-height: calc(88vh - 40px); margin-top: 22px; padding: 0 12px 12px; border-radius: 4px 4px 8px 8px;
  background: repeating-linear-gradient(92deg, rgba(255, 220, 170, 0.04) 0 2px, transparent 2px 11px, rgba(0, 0, 0, 0.06) 11px 13px, transparent 13px 29px),
    linear-gradient(90deg, #3c2010, #5e3a20 12%, #6a4325 50%, #5e3a20 88%, #3c2010);
  box-shadow: inset 0 0 0 2px #2a1508, inset 0 0 0 5px #7d5230, inset 0 0 0 6px #2a1508, 0 22px 60px rgba(0, 0, 0, 0.5); }
.modal-card.cabinet-card::before { content: ''; position: absolute; left: -14px; right: -14px; top: -22px; height: 24px; border-radius: 6px 6px 1px 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - 26px), #e2b85a calc(50% - 26px) calc(50% + 26px), transparent calc(50% + 26px)) 0 8px / 100% 5px no-repeat,
    linear-gradient(180deg, #7d5230 0 4px, #4a2a16 4px 7px, #6a4325 7px 15px, #3c2010 15px 18px, #5e3a20 18px 100%);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); }
.modal-card.cabinet-card::after { content: ''; position: absolute; left: 22px; right: 22px; bottom: -13px; height: 14px; pointer-events: none;
  background: linear-gradient(180deg, #4a2a16, #24120a) left / 52px 100% no-repeat, linear-gradient(180deg, #4a2a16, #24120a) right / 52px 100% no-repeat;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.45)); }
.modal-card.cabinet-card > header { border-bottom: 0; padding: 12px 6px 10px; }
.modal-card.cabinet-card > header h2 { color: #fbe7c4; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.modal-card.cabinet-card > header h2 .muted { color: #d9b98c; }
.modal-card.cabinet-card #modal-body { padding: 0; border-radius: 3px; }
.cabinet { position: relative; padding: 14px 14px 6px; border-radius: 3px; background: radial-gradient(ellipse 80% 50% at 50% 0, rgba(255, 150, 140, 0.18), transparent 70%),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 2px, transparent 2px 5px), linear-gradient(180deg, #6b1622, #4a0d17 60%, #3a0912);
  box-shadow: inset 0 0 0 3px #2a1508, inset 0 6px 18px rgba(0, 0, 0, 0.6); }
.cabinet::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 18%, rgba(255, 255, 255, 0.07) 22%, transparent 30%, transparent 56%, rgba(255, 255, 255, 0.05) 60%, rgba(255, 255, 255, 0.05) 63%, transparent 66%); }
.tc-shelf { margin-bottom: 14px; background: radial-gradient(ellipse 34% 95% at 50% -12%, rgba(255, 236, 190, 0.3), transparent 72%),
  radial-gradient(ellipse 18% 70% at 16% -10%, rgba(255, 236, 190, 0.14), transparent 70%), radial-gradient(ellipse 18% 70% at 84% -10%, rgba(255, 236, 190, 0.14), transparent 70%); }
.tc-row { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-end; gap: 6px 2px; padding: 12px 8px 2px; }
.tc-ledge { position: relative; height: 7px; margin: 0 -6px; border-radius: 2px; text-align: center;
  background: linear-gradient(180deg, rgba(230, 250, 255, 0.75), rgba(160, 205, 220, 0.45) 60%, rgba(60, 100, 115, 0.6)); box-shadow: 0 5px 6px rgba(0, 0, 0, 0.45); }
.tc-ledge span { position: relative; top: -5px; display: inline-block; padding: 1px 14px; border-radius: 2px; background: linear-gradient(180deg, #f3d488, #c9963a 60%, #a8771f);
  color: #4a2a0a; font-size: 10px; font-weight: 800; letter-spacing: 0.1em; line-height: 14px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 240, 200, 0.6);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(110, 70, 15, 0.6); }
.tc-ledge span::before, .tc-ledge span::after { content: ''; position: absolute; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: #8a6018; box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.6); }
.tc-ledge span::before { left: 4px; }
.tc-ledge span::after { right: 4px; }
.tc-shelf { margin-bottom: 20px; }
.tc-shelf:last-child { margin-bottom: 14px; }
@media (max-width: 600px) { .modal-card.cabinet-card::before { left: -5px; right: -5px; } .modal-card.mc-card::before { left: -4px; right: -4px; } }
.tc-slot { position: relative; display: flex; flex-direction: column; align-items: center; width: 74px; padding: 0; border: 0; background: none; }
.tc-slot .tc-svg { width: 60px; height: 75px; }
.tc-slot.won { cursor: pointer; transition: transform 0.15s; }
.tc-slot.won .tc-svg { filter: drop-shadow(0 0 6px rgba(255, 210, 90, 0.55)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4)); }
.tc-slot.won:hover { transform: translateY(-3px); }
.tc-slot.won.shield .tc-svg { filter: drop-shadow(0 0 5px rgba(220, 230, 255, 0.5)) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.4)); }
.tc-plaque { min-width: 34px; height: 15px; margin-top: 2px; padding: 0 5px; border-radius: 3px; background: linear-gradient(#e9c46a, #b98a2c); color: #4a2a0a; font-size: 10px; font-weight: 800; line-height: 15px; }
.tc-slot:not(.won) .tc-plaque { background: rgba(255, 240, 215, 0.12); }
.tc-slot.shield .tc-plaque { color: #4a2a0a; letter-spacing: -1px; }
.tc-shelf.small .tc-row { display: grid; grid-template-columns: repeat(8, 1fr); justify-items: center; }
.tc-shelf.small .tc-slot { width: 50px; }
@media (max-width: 600px) { .tc-shelf.small .tc-row { grid-template-columns: repeat(5, 1fr); } }
.tc-shelf.small .tc-svg { width: 42px; height: 52px; }
.tc-icon { position: absolute; left: 50%; top: 14px; width: 24px; height: 24px; margin-left: -12px; display: grid; place-items: center; }
.tc-icon .ico { width: 24px; height: 24px; }
.tc-shelf.small .tc-icon { top: 8px; width: 20px; height: 20px; margin-left: -10px; }
.tc-shelf.small .tc-icon .ico { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .modal-card.splash, .splash .sp-icon { animation: none; } }
/* Welcome card on a new farm: the splash card with a subtitle and the journey of one dish */
.welcome .sp-title { margin-bottom: 0; font-size: 30px; }
.welcome .wc-sub { margin: 0 0 14px; font-style: italic; color: #9a5a2a; font-size: 16px; }
.welcome .wc-ver { margin: -10px 0 12px; font-size: 12px; color: #9a5a2a; opacity: 0.7; font-variant-numeric: tabular-nums; }
.welcome .wc-chain { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 auto 14px; padding: 8px 10px; max-width: 400px; background: #fdecc8; border-radius: 12px; }
.welcome .wc-step { display: flex; gap: 2px; }
.welcome .wc-step .ico { width: 34px; height: 34px; }
.welcome .wc-step:last-child .ico { width: 46px; height: 46px; }
.welcome .wc-arrow { color: #b0703a; font-weight: 800; }
@keyframes sp-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes sp-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* The finale: winning the Legacy */
#finale { position: fixed; inset: 0; z-index: 950; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 58%, #ffcf6e 0%, #e98a3a 22%, #7a3a4e 52%, #23203f 82%, #15142a 100%); animation: egg-in 0.6s ease-out; }
.fn-rays { position: absolute; left: 50%; top: 56%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax; background: repeating-conic-gradient(rgba(255, 236, 170, 0.13) 0 6deg, transparent 6deg 18deg); animation: fn-spin 60s linear infinite; pointer-events: none; }
.fn-cloud { position: absolute; inset: 0; }
.fn-dish { position: absolute; width: var(--sz); height: var(--sz); display: grid; place-items: center; border-radius: 50%; background: rgba(255, 250, 240, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); opacity: 0;
  animation: fn-fly 0.9s cubic-bezier(.2, 1.2, .4, 1) var(--d) forwards, fn-float var(--f) ease-in-out calc(var(--d) + 0.9s) infinite alternate; }
.fn-dish .ico { width: 82%; height: 82%; }
.fn-dish:hover { z-index: 2; scale: 1.6; transition: scale 0.15s; }
.fn-main { position: relative; z-index: 1; width: min(760px, 100%); padding: 0 16px; text-align: center; color: #fff8ea; pointer-events: none; }
.fn-main button { pointer-events: auto; }
.fn-kicker { margin: 0 auto; width: fit-content; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; font-size: 14px; color: #ffe49a; animation: dc-pop 0.6s ease-out 0.3s both; }
.fn-kicker .ico { width: 30px; height: 30px; animation: egg-bob 2.4s ease-in-out infinite; }
#finale h1 { margin: 2px auto 0; width: fit-content; font-size: clamp(36px, 6.5vw, 72px); line-height: 1.05; font-weight: 900; letter-spacing: 0.01em; background: linear-gradient(180deg, #fff6c8 10%, #ffd24a 55%, #e39a1c 90%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 0 #7a3416) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.45)); animation: fn-title 1s cubic-bezier(.2, 1.4, .4, 1) 0.8s both; }
.fn-sub { margin: 4px auto 0; width: fit-content; font-size: 18px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); animation: dc-pop 0.6s ease-out 1.7s both; }
.fn-stage { width: fit-content; max-width: 100%; margin: 6px auto 0; }
.fn-scene { display: block; height: min(44vh, 303px); width: auto; max-width: 100%; margin: 0 auto; overflow: visible; animation: dc-rise 0.8s cubic-bezier(.2, 1.3, .4, 1) 2.1s both; }
.fn-sign { font: 800 15px system-ui, sans-serif; letter-spacing: 0.14em; fill: #fbe58a; text-anchor: middle; }
.fn-star { transform-box: fill-box; transform-origin: center; animation: fn-star 0.6s cubic-bezier(.2, 1.6, .4, 1) both, fn-twinkle 2.4s ease-in-out 5s infinite; }
.fn-glow { animation: fn-glow 2.2s ease-in-out infinite alternate; }
.fn-bulb { animation: fn-bulb 1.4s ease-in-out infinite alternate; }
.fn-smoke { fill: rgba(255, 255, 255, 0.55); animation: fn-smoke 3s ease-out infinite; }
.fn-smoke.s2 { animation-delay: 1.5s; }
.fn-cheer { transform-box: fill-box; transform-origin: 50% 100%; animation: fn-cheer 0.7s ease-in-out infinite alternate; }
.fn-chat { transform-box: fill-box; transform-origin: 50% 100%; animation: fn-chat 2.6s ease-in-out infinite; }
.fn-drop { animation: fn-drop 2.2s cubic-bezier(.5, 0, .9, .6) infinite; }
.fn-bag, .fn-toque, .fn-plate { transform-box: fill-box; transform-origin: 50% 100%; animation: dc-pop 0.5s ease-out 4.2s both; }
.fn-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 14px; animation: dc-pop 0.6s ease-out 4.8s both; }
.fn-stat { min-width: 112px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 248, 234, 0.95); color: #3b2b22; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3); display: grid; justify-items: center; }
.fn-stat .ico { width: 28px; height: 28px; }
.fn-stat b { font-size: 22px; line-height: 1.15; color: #7a3416; font-variant-numeric: tabular-nums; }
.fn-stat span { font-size: 12px; color: #7a6a5a; }
.fn-go { font-size: 18px; padding: 10px 30px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); animation: dc-pop 0.5s ease-out 7s both; }
.fn-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.fn-confetti i { position: absolute; width: 9px; height: 15px; border-radius: 3px; background: #f2b640; opacity: 0; }
.fn-confetti .fc-fall { top: -20px; animation: fn-confetti var(--t) linear var(--d) var(--n) both; }
.fn-confetti .fc-shot { bottom: -10px; width: 8px; height: 13px; animation: fn-cannon var(--t) cubic-bezier(.15, .7, .5, 1) var(--d) both; }
.fn-confetti i:nth-child(5n+3) { width: 7px; height: 7px; border-radius: 50%; }
.fn-confetti i:nth-child(4n) { background: #e0623a; } .fn-confetti i:nth-child(4n+1) { background: #6fae4a; } .fn-confetti i:nth-child(4n+2) { background: #5b9bd5; }
@keyframes fn-spin { to { transform: rotate(360deg); } }
@keyframes fn-fly { from { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes fn-float { from { translate: 0 -3px; } to { translate: 0 4px; } }
@keyframes fn-title { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: none; } }
@keyframes fn-star { from { opacity: 0; transform: scale(0) rotate(-120deg); } to { opacity: 1; transform: none; } }
@keyframes fn-twinkle { 0%, 80%, 100% { transform: none; } 90% { transform: scale(1.25) rotate(12deg); } }
@keyframes fn-glow { from { fill: #fbe58a; } to { fill: #ffd36b; } }
@keyframes fn-bulb { from { opacity: 0.45; } to { opacity: 1; } }
@keyframes fn-smoke { from { opacity: 0.8; transform: translate(0, 0) scale(0.6); } to { opacity: 0; transform: translate(10px, -40px) scale(1.8); } }
@keyframes fn-cheer { from { transform: translateY(0); } to { transform: translateY(-5px); } }
@keyframes fn-chat { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-4deg); } 60% { transform: rotate(3deg); } }
@keyframes fn-drop { 0% { opacity: 0; transform: translateY(-60px); } 15% { opacity: 1; } 80% { opacity: 1; transform: translateY(70px); } 100% { opacity: 0; transform: translateY(70px); } }
@keyframes fn-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } 100% { opacity: 1; transform: translate(40px, 110vh) rotate(calc(var(--r) + 720deg)); } }
@keyframes fn-cannon { 0% { opacity: 1; transform: translate(0, 0) rotate(var(--r)); } 40% { transform: translate(var(--x), var(--y)) rotate(calc(var(--r) + 300deg)); } 90% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(var(--x) * 1.3), calc(var(--y) + 70vh)) rotate(calc(var(--r) + 900deg)); } }
@media (prefers-reduced-motion: reduce) { #finale *, #finale { animation: none !important; } .fn-dish { opacity: 1; } .fn-confetti { display: none; } }

/* Inventory Stock tab: ingredient-group heading rows when sorted by Group */
.tbl.mk-sell tr.grp-row td { border-bottom: none; padding: 8px 0 0; background: none; height: auto; }
#modal-body .tbl.mk-sell tr.grp-row h4.grp { margin: 0; padding: 0; line-height: 1.2; font-size: 14px; }
.tbl th.sell-h { text-align: right; padding-right: 8px; }

/* Inventory: Wholesaler tab */
.ws-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.ws-card h5 { margin: 0 0 8px; font-size: 13px; }
.ws-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ws-head.off { background: #f6f3ec; }
.ws-head .ws-ico .ico { width: 40px; height: 40px; }
.ws-head.off .ws-ico { filter: grayscale(1); opacity: 0.6; }
.ws-title { flex: 1; min-width: 0; }
.ws-title .small { margin-top: 2px; }
.ws-head .switch { flex: none; }
.ws-room { height: 6px; background: var(--panel2); border-radius: 3px; margin-top: 6px; max-width: 320px; overflow: hidden; }
.ws-room i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.ws-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin-bottom: 10px; }
.ws-seg { display: flex; }
.ws-seg button { flex: 1; border-radius: 0; margin-left: -1px; padding: 5px 10px; }
.ws-seg button:first-child { border-radius: 8px 0 0 8px; margin-left: 0; }
.ws-seg button:last-child { border-radius: 0 8px 8px 0; }
.ws-seg button.active { background: var(--accent); color: #fff; border-color: var(--accent); position: relative; }
.ws-own { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 13px; }
.ws-own input { width: 70px; padding: 3px 6px; }
.ws-count { font-size: 13px; margin-bottom: 8px; }
.ws-count b { font-size: 16px; color: var(--accent); }
.ws-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ws-btns button { flex: 1; }
.ws-up { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ws-actions { margin-top: 10px; }

.ws-rules { margin-bottom: 10px; }
.ws-rule { display: grid; grid-template-columns: 1fr auto 210px; align-items: center; gap: 10px; padding: 5px 0; border-top: 1px solid var(--line); font-size: 13px; }
.ws-rule:first-of-type { border-top: none; }
.ws-rule .asell { justify-self: end; }
.ws-rule .asell select { font-size: 13px; padding: 2px 4px; }

.nowrap { white-space: nowrap; }

/* ----- Touch screens only (phones, tablets): a mouse never matches these rules. ----- */
#touchbar { position: absolute; left: 8px; right: 8px; bottom: 8px; max-width: 460px; margin: 0 auto; z-index: 4; background: rgba(28, 36, 31, 0.92); color: #fff; border-radius: 12px; padding: 8px 12px 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); }
#touchbar[hidden] { display: none; }
#touchbar .muted { color: rgba(255, 255, 255, 0.7); }
#touchbar .short { color: #ff9c8f; }
#touchbar img { width: 20px; height: 20px; vertical-align: -5px; }
#touchbar .tb-note { margin: 3px 0 8px; color: rgba(255, 255, 255, 0.85); }
#touchbar .tb-btns { display: flex; gap: 8px; }
#touchbar .tb-btns button { flex: 1; padding: 9px 10px; font-size: 15px; }
body.touch-placing #toasts { bottom: 128px; }
#cheat-console .cc-close { display: none; }
@media (hover: none) and (pointer: coarse) {
  [data-tip], #topbar .brand { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
  #topbar .brand { transition: transform 0.15s; }
  #topbar .brand.cc-armed { transform: scale(1.12); }
  #cheat-console { top: 8px; }
  #cheat-console .cc-log { max-height: 45vh; }
  #cheat-console .cc-close { display: block; background: transparent; border: 0; color: inherit; font-size: 18px; padding: 4px 8px; }
  #cheat-console input { font-size: 16px; } /* 16 px keeps phones from zooming the page in on focus */
  /* Help: one column (command, then what it does); tapping a command writes it into the line. */
  #cheat-console .cc-log > .cc-help { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #cheat-console .cc-help .use { max-width: none; cursor: pointer; -webkit-tap-highlight-color: transparent; text-decoration: underline dotted rgba(240, 216, 144, 0.5); }
  #cheat-console .cc-help .use + div { margin-bottom: 6px; padding-left: 2ch; }
}
/* Short touch screens (a phone held sideways): windows taller than the screen scroll instead of being cut off. */
@media (hover: none) and (pointer: coarse) and (max-height: 560px) {
  #modal { align-items: flex-start; overflow-y: auto; }
  #modal > .modal-card { margin: auto; }
  #modal > .modal-card.splash { margin: 64px auto 16px; }
  .modal-card { max-height: 94vh; }
  .modal-card.wide { height: 94vh; }
}
@keyframes bb-pop { from { opacity: 0; transform: translateY(10px); } }
/* Touch screens: the build menu is a pop-up, opened by tapping empty ground (ui.js openBuildPop), not a side panel. */
@media (hover: none) and (pointer: coarse) {
  #buildbar { display: none; }
  body.bb-open:not(.town-mode) #buildbar { display: block; position: fixed; left: 8px; right: 8px; bottom: 8px; width: auto; max-width: 520px; max-height: 48vh; margin: 0 auto; z-index: 15;
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); animation: bb-pop 0.18s ease-out; }
  /* Groups sit side by side and wrap, so a group of one or two buildings doesn't take a whole row. */
  body.bb-open:not(.town-mode) #buildbar { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 2px 12px; overflow-y: auto; }
  body.bb-open #buildbar .bgroup { flex: 0 1 auto; min-width: 0; margin-bottom: 4px; }
  body.bb-open #buildbar .bgroup-title { font-size: 11px; }
  body.bb-open #buildbar .bgrid { display: flex; flex-wrap: wrap; gap: 4px; }
  body.bb-open #buildbar .bbtn { width: 74px; }
  body.bb-open #buildbar .lockedb { flex-basis: 100%; }
  body.bb-open #buildbar .bname, body.bb-open #buildbar .bcost { display: block; }
  body.bb-open #buildbar .bbtn { padding: 5px 2px 4px; }
}
/* Touch screens: the Test Kitchen fits a phone. Slots, buttons and the latest try stay compact at the top, earlier tries
   fold away behind a button, and the ingredient picker below always gets the rest of the window and scrolls by itself. */
.tk-hist { display: none; }
@media (hover: none) and (pointer: coarse) {
  .tk-hist { display: block; align-self: flex-start; margin: 2px 0 0; }
  .tk-log:not(.open) .log:not(:first-child) { display: none; }
  .tk-log { margin-top: 8px; }
  .log { overflow-wrap: anywhere; }
  .log .ico { width: 18px; height: 18px; }
}
@media (hover: none) and (pointer: coarse) and (max-width: 760px) {
  .modal-card.wide:has(.tk) { width: 100vw; height: 100%; max-height: none; border-radius: 0; }
  #modal-body:has(> .tk) { overflow: hidden; padding: 8px 10px; }
  .tk { display: flex; flex-direction: column; gap: 8px; height: 100%; min-width: 0; }
  .tk-left { flex: 0 1 auto; max-height: 55%; overflow-y: auto; display: flex; flex-direction: column; min-width: 0; }
  .tk-right { flex: 1 1 0; min-height: 180px; min-width: 0; }
  .tk-left { padding: 8px; }
  .tk-right .tiles { padding: 8px; }
  .tk-right .row .dd { width: auto; flex: 1; min-width: 0; }
  .tk-right .row .search { flex: 1.2; min-width: 0; }
  .tk .slots { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; padding: 6px; margin: 8px 0 12px; border-radius: 12px; }
  .tk .slot { height: 52px; border-radius: 10px; }
  .tk .slot .ico { width: 24px; height: 24px; }
  .tk .slot small { font-size: 10px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tk .slot i { top: 0; right: 3px; }
  .tk-target { margin-top: 0; padding: 6px 8px; }
  .tk-target .about, .tk-target .muted.small { display: none; }
  /* One compact row: silhouette, dish name, "Salt · Butter · 5 × ❓", and the two buttons side by side. */
  .tk-target { gap: 8px; }
  .tk-target .c-emoji { font-size: 24px; }
  .tk-t-main { gap: 2px; }
  .tk-target .tk-t-lead, .tk-target .io-full { display: none; }
  .tk-target .io-short { display: block; }
  .tk-target .io-short .chip { font-size: 11px; padding: 0 6px; }
  .tk-t-btns { flex-direction: row; }
  .tk-t-btns button { padding: 3px 7px; }
  .tk-target .tk-bl { display: none; }
  .tk .tiles { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}
@media (hover: none) and (pointer: coarse) and (max-width: 760px) { .tk .slot i .ico { width: 11px; height: 11px; } }
/* Phones: the Orders window is full screen like the Test Kitchen (a centred window clipped the cards), with the speed
   buttons in its header since it covers the top bar. */
@media (hover: none) and (pointer: coarse) and (max-width: 760px) {
  .modal-card:has(.otabs) { width: 100vw; height: 100%; max-height: none; border-radius: 0; }
}
/* Phones held upright: order cards stack. The customer line and each good get the full width (names no longer cut to
   "Harbour …" or hidden), quantity sits inside its tile, and reward + Deliver share a row under the goods. */
@media (hover: none) and (pointer: coarse) and (max-width: 600px) {
  #modal-body:has(.otabs) { padding: 12px 12px 14px; border-radius: 0; }
  .modal-card:has(.otabs) header { border-radius: 0; }
  #modal-body .order { padding: 12px 10px 10px; }
  #modal-body .order.ready .o-pay::before { display: none; }
  .o-sheet { padding: 12px 12px 10px 30px; background-image: linear-gradient(90deg, transparent 19px, rgba(226, 114, 110, 0.6) 19px 21px, transparent 21px); }
  .o-sheet.lined { padding-top: 12px; padding-bottom: 12px; background-image: linear-gradient(90deg, transparent 19px, rgba(226, 114, 110, 0.6) 19px 21px, transparent 21px),
    repeating-linear-gradient(180deg, transparent 0 23px, rgba(90, 140, 200, 0.24) 23px 24px); }
  .otabs { flex-wrap: wrap; gap: 4px; }
  .otabs button { flex: 1 1 auto; white-space: nowrap; padding: 5px 9px; font-size: 14px; }
  .order { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "main main" "pay act"; gap: 8px 10px; padding: 8px; }
  .order .o-main { grid-area: main; min-width: 0; }
  .order .o-pay { grid-area: pay; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; justify-self: start; }
  .order .o-act { grid-area: act; }
  .order .o-act button { width: auto; min-width: 110px; padding: 7px 14px; }
  .order .o-act:empty { display: none; }
  .o-head { flex-wrap: wrap; row-gap: 3px; }
  .o-head > b { flex: 1 1 9em; min-width: 0; }
  .otag { margin-right: 0; }
  .otile { grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "ico name qty" "ico have qty"; gap: 0 10px; padding: 3px 10px 3px 4px; }
  .otile .ot-ico { grid-area: ico; }
  .otile .ot-name { grid-area: name; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.2; }
  .otile .ot-have { grid-area: have; font-size: 11px; }
  .otile .ot-qty { grid-area: qty; }
  .o-want > button { align-self: stretch; }
  .clue-text { line-height: 1.3; }
  .regulars { grid-template-columns: minmax(0, 1fr); }
  #modal-body:has(.otabs) .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Test Kitchen detective skills: the Mystery Cupboard button, the Cuisine Compass switch, the cupboard window ----- */
.tk-skills { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 2px 8px 2px 4px; vertical-align: middle; font-size: 12px; font-weight: 700; }
.tk-skills .ico { width: 22px; height: 22px; }
.tk-sk-row { display: none; }
.tk-cz { display: inline-flex; align-self: flex-start; align-items: center; gap: 5px; max-width: 100%; padding: 4px 8px; border: 1px solid #b4834c; border-radius: 8px; background: #f7ecd9; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.tk-cz input { margin: 0; }
.tk-cz .ico { width: 20px; height: 20px; flex: none; }
.tk-cz span { overflow: hidden; text-overflow: ellipsis; }
.tk-cz.on { border-color: var(--accent); background: #fff6df; box-shadow: 0 0 0 1px var(--accent); }
/* Mystery Cupboard: the card is an old dark cupboard with a carved top, its two doors swung open at the sides. Each skill
   is a drawer: a locked one has a brass keyhole and a brass bar filling up; an open one is pulled out and holds a note. */
.modal-card.mc-card { position: relative; width: min(620px, 96vw); max-height: calc(88vh - 30px); margin-top: 16px; padding: 0 12px 12px; border-radius: 4px 4px 8px 8px;
  background: repeating-linear-gradient(90deg, rgba(255, 220, 200, 0.03) 0 2px, transparent 2px 13px, rgba(0, 0, 0, 0.08) 13px 15px, transparent 15px 31px),
    linear-gradient(90deg, #2a1416, #45232a 15%, #4e2a30 50%, #45232a 85%, #2a1416);
  box-shadow: inset 0 0 0 2px #1a0b0d, inset 0 0 0 5px #6b3e3f, inset 0 0 0 6px #1a0b0d, 0 22px 60px rgba(0, 0, 0, 0.55); }
.modal-card.mc-card::before { content: ''; position: absolute; left: -10px; right: -10px; top: -16px; height: 18px; border-radius: 40% 40% 2px 2px / 100% 100% 2px 2px; pointer-events: none;
  background: linear-gradient(180deg, #6b3e3f 0 3px, #2a1416 3px 6px, #4e2a30 6px 12px, #2a1416 12px 14px, #45232a 14px); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); }
.modal-card.mc-card::after { content: ''; position: absolute; left: 26px; right: 26px; bottom: -11px; height: 12px; pointer-events: none;
  background: radial-gradient(ellipse 50% 100% at 50% 0, #45232a 60%, transparent 62%) left / 40px 100% no-repeat, radial-gradient(ellipse 50% 100% at 50% 0, #45232a 60%, transparent 62%) right / 40px 100% no-repeat;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.45)); }
.modal-card.mc-card > header { border-bottom: 0; padding: 12px 6px 10px; }
.modal-card.mc-card > header h2 { color: #f6e3c8; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6); }
.modal-card.mc-card > header h2 .muted { color: #c9a98f; }
.modal-card.mc-card > header h2 .ico { filter: drop-shadow(0 0 2px rgba(255, 230, 190, 0.7)); }
.modal-card.mc-card #modal-body { padding: 0 0 2px; }
.mcup { display: flex; align-items: stretch; }
.mcup-door { flex: none; width: 26px; margin: 4px 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #e9c46a 0 2.5px, #8a6018 3.5px, transparent 4.5px) center / 100% 100% no-repeat,
    linear-gradient(90deg, rgba(0, 0, 0, 0.35), transparent 40%, rgba(255, 220, 200, 0.06)) , linear-gradient(180deg, #3a1d21, #52303a 50%, #3a1d21);
  box-shadow: inset 0 0 0 3px #2a1416, inset 0 0 0 5px #6b3e3f; }
.mcup-door.l { margin-right: 8px; transform: perspective(300px) rotateY(28deg); transform-origin: right center; }
.mcup-door.r { margin-left: 8px; transform: perspective(300px) rotateY(-28deg); transform-origin: left center; }
.mcup-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; padding: 12px 10px; border-radius: 2px;
  background: radial-gradient(ellipse 70% 40% at 50% 0, rgba(255, 220, 160, 0.12), transparent 70%), linear-gradient(180deg, #1f0f12, #2c161a);
  box-shadow: inset 0 0 0 2px #120607, inset 0 8px 20px rgba(0, 0, 0, 0.7); }
.mc-drawer { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 14px; border-radius: 3px; color: #f6e3c8;
  background: repeating-linear-gradient(90deg, rgba(255, 220, 200, 0.04) 0 2px, transparent 2px 17px), linear-gradient(180deg, #6e3f43, #55303a 70%, #482730);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 0 0 4px rgba(255, 210, 190, 0.08), inset 0 1px 0 rgba(255, 220, 200, 0.25), 0 2px 3px rgba(0, 0, 0, 0.5); }
.mc-drawer.open { margin: 0 -6px 4px; padding-bottom: 14px; color: #3b2b22; background: linear-gradient(180deg, #fbf3e2, #efe0c2);
  box-shadow: inset 0 0 0 1px #c99a5a, 0 0 0 4px #55303a, 0 6px 10px rgba(0, 0, 0, 0.55); border-radius: 2px; }
.mc-drawer.open::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: -10px; height: 12px; border-radius: 0 0 3px 3px;
  background: radial-gradient(ellipse 22px 4px at 50% 50%, #e9c46a 0 70%, transparent 75%), linear-gradient(180deg, #6e3f43, #482730); box-shadow: 0 3px 4px rgba(0, 0, 0, 0.5); }
.mc-icon { flex: none; display: grid; place-items: center; width: 48px; height: 48px; }
.mc-icon .ico { width: 44px; height: 44px; }
.mc-keyhole { width: 34px; height: 46px; border-radius: 16px 16px 6px 6px; background: radial-gradient(circle at 50% 38%, #1a0b0d 0 5px, transparent 5.5px),
    linear-gradient(#1a0b0d, #1a0b0d) 50% 66% / 5px 14px no-repeat, radial-gradient(circle at 40% 30%, #fbe39a, #d1a043 55%, #8a6018);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(110, 70, 15, 0.7); }
.mc-text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; padding-right: 40px; font-size: 13px; }
.mc-text b { font-size: 15px; }
.mc-drawer:not(.open) .mc-text b { align-self: flex-start; padding: 0 10px; border-radius: 2px; color: #4a2a0a; background: linear-gradient(180deg, #f3d488, #c9963a);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(110, 70, 15, 0.6); font-size: 14px; }
.mc-drawer.open .mc-text { padding-right: 0; }
.mc-bar { display: block; height: 6px; max-width: 220px; margin-top: 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5); overflow: hidden; }
.mc-bar i { display: block; height: 100%; max-width: 100%; background: linear-gradient(180deg, #fbe39a, #c9963a); }
.mc-count { position: absolute; right: 14px; top: 50%; margin-top: -9px; font-size: 13px; font-weight: 700; color: #e9c46a; }
.mc-foot { justify-content: flex-end; margin-top: 12px; }
@media (max-width: 600px) {
  .tk-sk-head { display: none; }
  .tk-sk-row { display: inline-flex; margin-left: auto; }
  .mc-drawer { gap: 8px; padding: 8px 10px; }
  .mc-text { font-size: 12px; }
  .mcup-door { width: 14px; }
  .mcup-door.l { margin-right: 4px; }
  .mcup-door.r { margin-left: 4px; }
  .mcup-body { padding: 10px 6px; }
  .mc-keyhole { width: 28px; height: 38px; }
}
/* Cuisines window: every stage is a red leather menu book standing on a shelf, cover in gold with its three cuisines as
   medallions. Clicking one takes it off the shelf: it grows into place and the cover swings open (ui.js openBookAnim) on
   a cream menu card, the stage on the left page, its three cuisines as Starter, Main course and Dessert on the right.
   A phone shows one page: the cover swings away and the card scrolls. */
#modal-body:has(> .mb-room) { background-color: #4a2c1c; background-attachment: local; border-radius: 0 0 14px 14px;
  background-image: repeating-linear-gradient(176deg, rgba(255, 220, 170, 0.035) 0 2px, transparent 2px 9px, rgba(0, 0, 0, 0.05) 9px 11px, transparent 11px 23px),
    radial-gradient(ellipse at 50% 20%, rgba(255, 190, 120, 0.22), transparent 70%), linear-gradient(#5a3522, #3d2416); }
.mb-room { --red: #9b1d1f; --red-d: #6a0f12; --gold: #e2bd62; --gold-l: #f6dc95; --paper: #fbf5e6; --ink: #3b2414;
  display: flex; flex-direction: column; align-items: center; min-height: 100%; }
.mb-note { align-self: stretch; }
.mb-pick { color: #f3dfbd; font-family: Georgia, 'Times New Roman', serif; font-style: italic; margin: 18px 0; }
.mb-shelf { width: min(100%, 720px); margin: 4px 0 14px; }
.mb-row { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 2.4%, 22px); padding: 0 10px; }
.mb-ledge { height: 14px; border-radius: 3px; background: linear-gradient(#b47c45, #7d5028 70%, #5d3a1c); box-shadow: 0 5px 8px rgba(0, 0, 0, 0.45); }
.mb-book { flex: 0 1 140px; min-width: 0; padding: 0; border: 0; background: none; border-radius: 3px 7px 7px 3px; cursor: pointer;
  transform-origin: 50% 100%; transition: transform 0.18s ease-out, flex-basis 0.3s; }
.mb-book:hover { transform: translateY(-6px) rotate(-1.5deg); }
.mb-book:focus { outline: none; }
.mb-book:focus-visible { outline: 2px solid var(--gold-l); outline-offset: 3px; }
.mb-book.taken .mc { visibility: hidden; }
.mb-book.taken::after { content: ''; display: block; margin-top: -4px; height: 4px; border-radius: 3px; background: rgba(0, 0, 0, 0.3); }
.mb-book.is-secret { cursor: default; }
.mb-book.is-secret:hover { transform: none; }
.mb-book.nope { animation: mb-nope 0.4s; }
@keyframes mb-nope { 25% { transform: rotate(-4deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
.mb-shelf.compact .mb-book { flex-basis: 70px; }
/* The cover. Sizes are in cqw, so the same cover reads the same on the shelf and when it flies up open. */
.mc { position: relative; container-type: inline-size; aspect-ratio: 1 / 1.4; width: 100%; border-radius: 3px 7px 7px 3px; overflow: hidden;
  background: radial-gradient(ellipse at 35% 25%, rgba(255, 120, 110, 0.28), transparent 60%), repeating-radial-gradient(circle at 30% 40%, rgba(0, 0, 0, 0.05) 0 1px, transparent 1px 3px),
    linear-gradient(160deg, var(--red), var(--red-d));
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.18), 2px 3px 6px rgba(0, 0, 0, 0.45); color: var(--gold); text-align: center; }
.mc-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 9cqw; background: linear-gradient(90deg, rgba(0, 0, 0, 0.45), rgba(255, 255, 255, 0.08) 55%, rgba(0, 0, 0, 0.3));
  box-shadow: 1px 0 0 rgba(255, 210, 120, 0.25); }
.mc-frame { position: absolute; inset: 7cqw 6cqw 7cqw 15cqw; border: 1.2cqw double var(--gold); border-width: 2.4cqw; border-radius: 2cqw; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; padding: 6cqw 3cqw; font-family: Georgia, 'Times New Roman', serif; text-shadow: 0 0.6cqw 0 rgba(0, 0, 0, 0.45); }
.mc-kicker { font-size: 12cqw; letter-spacing: 0.25em; text-transform: uppercase; padding-left: 0.25em; color: var(--gold-l); line-height: 1; }
.mc-no { font-size: 9cqw; line-height: 1; margin-top: -2cqw; }
.mc-no::before, .mc-no::after { content: ''; display: inline-block; vertical-align: middle; width: 12cqw; height: 0.8cqw; margin: 0 2cqw; background: var(--gold); }
.mc-title { font-size: 13cqw; line-height: 1.15; font-style: italic; color: var(--gold-l); overflow-wrap: break-word; }
.mc-title.long { font-size: 9.5cqw; }
.mc-q { font-size: 34cqw; font-style: normal; line-height: 1; opacity: 0.7; }
.mc-medals { display: flex; gap: 3cqw; }
.mc-medal { display: grid; place-items: center; width: 19cqw; height: 19cqw; border-radius: 50%; background: radial-gradient(circle, #fff6dc 55%, #e8d3a0); box-shadow: 0 0 0 1cqw var(--gold), 0 1cqw 1.5cqw rgba(0, 0, 0, 0.4); }
.mc-medal .ico { width: 13cqw; height: 13cqw; }
.mc-medal.shut .ico { opacity: 0.45; filter: grayscale(1); }
.mc-medal.won { box-shadow: 0 0 0 1cqw var(--gold-l), 0 0 3cqw rgba(255, 220, 120, 0.8); }
.mc.is-secret .mc-medal { background: rgba(0, 0, 0, 0.2); box-shadow: 0 0 0 1cqw rgba(226, 189, 98, 0.45); }
.mc.is-secret { filter: saturate(0.55) brightness(0.72); }
.mc.is-next .mc-medal { background: rgba(255, 246, 220, 0.75); }
.mc-seal { position: absolute; right: 3cqw; bottom: 3cqw; width: 22cqw; height: 22cqw; border-radius: 50%; display: grid; place-items: center; font-size: 13cqw; font-weight: 800;
  color: #6b4206; background: radial-gradient(circle at 35% 30%, #fff1b0, #e2b13c 55%, #b57d18); box-shadow: 0 0 0 1cqw #c99325, 0 1cqw 2cqw rgba(0, 0, 0, 0.5); text-shadow: none; }
.mc-ribbon { position: absolute; right: 18cqw; top: -1px; width: 9cqw; height: 26cqw; background: linear-gradient(90deg, #d8a73a, #f6d978, #d8a73a);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
/* The open book */
.mb-stage { display: flex; flex-direction: column; align-items: center; width: 100%; }
.mbook { position: relative; width: min(100%, 940px, calc((88vh - 290px) * 2 / 1.4)); min-width: min(100%, 520px); aspect-ratio: 2 / 1.4; perspective: 2600px;
  transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.25, 1); }
.mb-pages { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.mb-scroll { display: contents; }
.mb-page { position: relative; min-height: 0; color: var(--ink); font-family: Georgia, 'Times New Roman', serif; }
/* Each page scrolls inside its frame; what runs below the page fades into the paper (the mask stays put while it scrolls). */
.mb-in { height: 100%; display: flex; flex-direction: column; overflow-y: auto; padding: 22px 26px 56px; scrollbar-width: thin; box-sizing: border-box;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 80px), transparent calc(100% - 14px)); mask-image: linear-gradient(#000 calc(100% - 80px), transparent calc(100% - 14px)); }
.mb-page .gprog, .mb-page .small, .mb-page button, .mb-page .sig-list, .mb-page .stages { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }
.mb-right { z-index: 0; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(90, 50, 10, 0.2), transparent 7%), var(--paper);
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(176, 130, 50, 0.55), inset 0 0 0 10px var(--paper), inset 0 0 0 11px rgba(176, 130, 50, 0.35), 4px 6px 14px rgba(0, 0, 0, 0.45); }
.mb-left { z-index: 2; opacity: 0; text-align: center; transition: opacity 0.35s 0.85s; }
.mb-cover { position: absolute; z-index: 1; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.25, 1) 0.4s; }
.mb-front, .mb-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.mb-front .mc { height: 100%; box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.35), 6px 10px 22px rgba(0, 0, 0, 0.5); }
.mb-back { transform: rotateY(180deg); border-radius: 0 8px 8px 0; background: linear-gradient(270deg, rgba(90, 50, 10, 0.2), transparent 7%), var(--paper);
  box-shadow: inset 0 0 0 6px var(--paper), inset 0 0 0 7px rgba(176, 130, 50, 0.55), inset 0 0 0 10px var(--paper), inset 0 0 0 11px rgba(176, 130, 50, 0.35), -4px 6px 14px rgba(0, 0, 0, 0.45); }
.mb-back::before { content: ''; position: absolute; inset: 0; border-radius: inherit; border-left: 5px solid var(--red-d); }
.mbook.is-open .mb-cover { transform: rotateY(-180deg); }
.mbook.is-open .mb-left { opacity: 1; }
.mbook.still, .mbook.still * { transition: none !important; }
.mbook.closing .mb-cover { transition-delay: 0s; transition-duration: 0.5s; }
.mbook.closing .mb-left { transition: opacity 0.12s; }
.mbook.closing { transition-delay: 0.45s; transition-duration: 0.45s; transition-timing-function: cubic-bezier(0.5, 0, 0.8, 0.3); }
/* The menu card itself */
.mb-no { font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: #9a6b2c; }
.mb-name { margin: 4px 0 2px; font-size: 26px; font-weight: 400; font-style: italic; color: var(--red-d); }
.mb-orn { display: flex; align-items: center; justify-content: center; margin: 6px auto 10px; width: 70%; }
.mb-orn::before, .mb-orn::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #b0823280, #b08232); }
.mb-orn::after { transform: scaleX(-1); }
.mb-orn i { width: 7px; height: 7px; margin: 0 8px; transform: rotate(45deg); background: #b08232; }
.mb-orn.small { width: 40%; margin: 12px auto; }
.mb-status { margin: 0 0 6px; font-weight: 700; color: var(--ink); }
.mb-what { margin: 0 0 8px; font-size: 14px; font-style: italic; color: #6a4a2c; }
.mb-teaser { margin: 10px 0; font-style: italic; }
.mb-foot { margin-top: auto; padding-top: 14px; font-style: italic; font-size: 18px; color: #9a6b2c; }
.mb-room:not(:has(.mb-stage)) { justify-content: center; }
.mb-room:not(:has(.mb-stage)) .mb-shelf { margin-top: -40px; }
.mb-h { margin: 16px 0 6px; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 400; color: #9a6b2c; }
.mb-left .stages { text-align: left; }
.mb-left .stage { background: rgba(255, 255, 255, 0.55); }
.mb-course { text-align: center; }
.mb-ctag { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: #9a6b2c; }
.mb-cname { margin: 2px 0; font-size: 20px; font-style: italic; color: var(--red-d); display: flex; align-items: center; justify-content: center; gap: 6px; }
.mb-cname .ico { width: 26px; height: 26px; }
.mb-cdesc { margin: 0 0 6px; font-size: 14px; color: #6a4a2c; }
.mb-course .gprog { justify-content: center; }
.mb-course .gbar { max-width: 180px; }
.mb-course .sig-list { text-align: left; margin: 6px auto; max-width: 320px; font-size: 13px; }
.mb-course .pack-b { justify-content: center; }
.mb-course button { margin-top: 4px; }
.mb-course.tease .mb-cname, .mb-course.tease .mb-cdesc { color: #8c7a66; }
.mb-close { margin: 14px 0 4px; background: rgba(255, 240, 215, 0.12); border-color: rgba(255, 230, 190, 0.4); color: #f6e3c0; }
.mb-close:hover { background: rgba(255, 240, 215, 0.24); }
/* Phones: one page at a time. The cover covers the whole card, swings away to the left and fades. */
@media (max-width: 640px) {
  .mb-shelf { margin-bottom: 10px; }
  .mb-row { gap: 6px; padding: 0 4px; }
  .mb-shelf.compact .mb-book { flex-basis: 48px; }
  .mbook { width: min(100%, calc((94vh - 250px) / 1.4)); min-width: min(100%, 260px); aspect-ratio: 1 / 1.4; }
  .mb-pages { display: block; border-radius: 0 8px 8px 0; background: linear-gradient(90deg, rgba(90, 50, 10, 0.2), transparent 5%), var(--paper);
    box-shadow: inset 0 0 0 5px var(--paper), inset 0 0 0 6px rgba(176, 130, 50, 0.55), 3px 5px 12px rgba(0, 0, 0, 0.45); }
  .mb-scroll { display: block; height: 100%; overflow-y: auto; scrollbar-width: thin; padding-bottom: 30px; box-sizing: border-box;
    -webkit-mask-image: linear-gradient(#000 calc(100% - 44px), transparent calc(100% - 8px)); mask-image: linear-gradient(#000 calc(100% - 44px), transparent calc(100% - 8px)); }
  .mb-page { background: none; box-shadow: none; }
  .mb-in { height: auto; overflow: visible; padding: 16px 16px 10px; -webkit-mask-image: none; mask-image: none; }
  .mb-foot { display: none; }
  .mb-right .mb-in { padding-top: 0; }
  .mb-right .mb-in::before { content: ''; display: block; height: 1px; margin: 0 10% 14px; background: #b0823280; }
  .mb-cover { left: 0; width: 100%; transition: transform 0.75s cubic-bezier(0.45, 0.05, 0.25, 1) 0.4s, opacity 0.25s 0.85s; }
  .mbook.is-open .mb-cover { opacity: 0; pointer-events: none; }
  .mbook.closing .mb-cover { transition-delay: 0s, 0s; }
  .mb-name { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) { .mb-book, .mb-book.nope { transition: none; animation: none; } }
/* The Inventory is the inside of the barn: a barn-red header with white trim, a wall of weathered vertical planks
   behind everything (washed out so it stays in the background), and the goods on a cream ledger sheet hung on the
   wall. Each ingredient group is a small wooden sign. The planks scroll with the content (background-attachment: local). */
.modal-card.inv header { border-radius: 14px 14px 0 0; border-bottom: 5px solid #f4ecdc; position: relative; z-index: 1;
  background: repeating-linear-gradient(90deg, rgba(60, 10, 5, 0.32) 0 2px, rgba(255, 220, 200, 0.08) 2px 3px, transparent 3px 52px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 7px),
    linear-gradient(180deg, #a8402f 0%, #963426 70%, #86291f 100%);
  box-shadow: 0 2px 0 #8a6a48, 0 3px 6px rgba(50, 25, 10, 0.3); }
.modal-card.inv header h2 { color: #fff8ec; text-shadow: 0 1px 0 rgba(60, 10, 5, 0.55); }
.modal-card.inv header h2 .ico { filter: drop-shadow(0 0 1.5px #fff8ec) drop-shadow(0 0 0.5px #fff8ec); }
.modal-card.inv #modal-body { border-radius: 0 0 14px 14px; padding: 14px 18px 18px; background-color: #b9966c; background-attachment: local;
  background-image: linear-gradient(rgba(248, 238, 218, 0.24), rgba(248, 238, 218, 0.24)),
    radial-gradient(ellipse 4px 8px at 20px 60px, rgba(92, 58, 28, 0.32), transparent 100%),
    radial-gradient(ellipse 3px 6px at 150px 210px, rgba(92, 58, 28, 0.26), transparent 100%),
    repeating-linear-gradient(90deg, rgba(78, 50, 24, 0.42) 0 2px, rgba(255, 244, 222, 0.22) 2px 3px, transparent 3px 76px),
    repeating-linear-gradient(90deg, rgba(255, 246, 228, 0.12) 0 76px, rgba(110, 72, 36, 0.07) 76px 152px, rgba(255, 246, 228, 0.04) 152px 228px),
    repeating-linear-gradient(90deg, rgba(100, 66, 32, 0.07) 0 1px, transparent 1px 5px, rgba(255, 246, 228, 0.06) 5px 6px, transparent 6px 13px);
  background-size: auto, 228px 340px, 228px 340px, auto, auto, auto;
  box-shadow: inset 0 3px 8px rgba(60, 35, 15, 0.25); }
/* Tabs and the bars above the table: cream cards resting on the wall. */
.modal-card.inv .tabs button:not(.active) { background: #fffcf4; border-color: #b8976e; box-shadow: 0 2px 0 rgba(90, 58, 28, 0.35); }
.modal-card.inv .tabs button.active { box-shadow: 0 2px 0 #1d5634; }
.modal-card.inv .tabs input.search { border-color: #b8976e; background: #fffcf4; }
.modal-card.inv .storagebar { background: #fbf4e4; box-shadow: 0 1px 0 rgba(90, 58, 28, 0.3), 0 2px 5px rgba(60, 35, 15, 0.18); }
.modal-card.inv .sellabove, .modal-card.inv .sortbar, .modal-card.inv #modal-body > p { width: fit-content; max-width: 100%; box-sizing: border-box;
  padding: 4px 10px; border-radius: 6px; background: #fffaf0; box-shadow: 0 1px 0 rgba(90, 58, 28, 0.3), 0 2px 5px rgba(60, 35, 15, 0.18); }
@media (min-width: 761px) {
  .modal-card.inv .sellabove { width: max-content; flex-wrap: nowrap; }
  .modal-card.inv .sellabove input.slider { flex: 0 0 240px; }
}
.modal-card.inv .sortbar .muted, .modal-card.inv #modal-body > p.hint, .modal-card.inv #modal-body > p.muted { color: #6b6455; }
/* The goods list: a ledger sheet with a little room around the rows. */
.modal-card.inv .tbl { border-collapse: separate; border-spacing: 0; background: #fffaf0; border-radius: 8px; padding: 4px 10px 8px;
  box-shadow: 0 1px 0 rgba(90, 58, 28, 0.3), 0 4px 10px rgba(60, 35, 15, 0.22); }
.modal-card.inv .tbl th { border-bottom-color: #e2d6bd; }
.modal-card.inv .tbl td { border-bottom-color: #efe6d2; }
.modal-card.inv .tbl tr:not(.grp-row):hover td { background: rgba(232, 214, 178, 0.28); }
/* An ingredient group: a small plank sign nailed above its rows. */
.modal-card.inv .tbl.mk-sell tr.grp-row td { padding: 12px 0 4px; }
.modal-card.inv .tbl.mk-sell tr:first-child + tr.grp-row td { padding-top: 6px; }
.modal-card.inv #modal-body .tbl.mk-sell tr.grp-row h4.grp { display: inline-flex; align-items: center; gap: 5px; padding: 3px 12px 3px 6px;
  border-radius: 4px; color: #fff6e2; font-size: 13px; text-shadow: 0 1px 0 rgba(50, 28, 10, 0.5);
  background: repeating-linear-gradient(90deg, rgba(255, 240, 210, 0.07) 0 1px, transparent 1px 6px), linear-gradient(180deg, #8d6440, #765232);
  box-shadow: 0 1px 0 rgba(50, 28, 10, 0.4), inset 0 1px 0 rgba(255, 235, 200, 0.2); }
.modal-card.inv .ws-card { box-shadow: 0 1px 0 rgba(90, 58, 28, 0.3), 0 2px 6px rgba(60, 35, 15, 0.18); border-color: #e2d6bd; }
.modal-card.inv .ws-head.off { background: #f6f0e2; }
.modal-card.inv .stats div { border-color: #e2d6bd; box-shadow: 0 1px 0 rgba(90, 58, 28, 0.3), 0 2px 5px rgba(60, 35, 15, 0.16); }
/* The Cookbook is an old cloth-bound recipe book: a dark green linen cover with a gold-tooled title and gold rules, and
   inside, aged cream pages (faint ruling, darker towards the edges). Discovered dishes are white recipe cards with a red
   rule under the name; undiscovered ones are plain kraft cards still waiting for their recipe. */
.modal-card.cb header { border-radius: 14px 14px 0 0; position: relative; z-index: 1; border-bottom: 3px solid #5b3a1e;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.07) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2f5a40 0%, #26503a 60%, #1f4430 100%);
  box-shadow: inset 0 0 0 4px #26503a, inset 0 0 0 5px rgba(214, 178, 94, 0.75), 0 3px 6px rgba(40, 25, 10, 0.3); }
.modal-card.cb header h2 { color: #e9cf86; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45), 0 -1px 0 rgba(255, 240, 190, 0.15); letter-spacing: 0.02em; font-family: Georgia, 'Times New Roman', serif; }
.modal-card.cb header h2 .muted { color: #c9b98a; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.modal-card.cb header h2 .ico { filter: drop-shadow(0 0 1.5px #f2e2b0); }
.modal-card.cb #modal-body { --panel: #f5ead0; border-radius: 0 0 14px 14px; padding: 14px 18px 18px; background-color: #f5ead0; background-attachment: local;
  background-image: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(160, 110, 50, 0.16) 100%),
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(120, 140, 170, 0.10) 27px 28px),
    radial-gradient(rgba(150, 110, 60, 0.07) 1px, transparent 1.6px), radial-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1.6px);
  background-size: 100% 100%, auto, 9px 9px, 13px 13px; background-position: 0 0, 0 0, 0 0, 4px 6px;
  box-shadow: inset 0 3px 8px rgba(90, 60, 25, 0.22), inset 6px 0 10px -6px rgba(90, 60, 25, 0.25); }
.modal-card.cb #modal-body > .hint { color: #6b5f48; }
.modal-card.cb .cz { background: #fffdf7; border-color: #dccba6; box-shadow: 0 1px 0 rgba(110, 75, 35, 0.22); }
.modal-card.cb .cz.done { background: #fff4d0; border-color: #d9b354; }
.modal-card.cb .cz.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(47, 107, 42, 0.25); }
.modal-card.cb .cards { gap: 12px; }
.modal-card.cb .card.known { background: #fffefa; border: 0; border-radius: 3px; padding: 9px 11px 10px;
  box-shadow: 0 1px 0 rgba(110, 75, 35, 0.28), 0 3px 7px rgba(90, 60, 25, 0.16); }
.modal-card.cb .card.known .card-head { padding-bottom: 6px; margin-bottom: 2px; border-bottom: 1.5px solid rgba(196, 72, 58, 0.55); }
.modal-card.cb .card.unknown { background: #eadcbd; border: 1px dashed rgba(130, 95, 50, 0.45); border-radius: 3px;
  background-image: radial-gradient(rgba(120, 85, 40, 0.08) 1px, transparent 1.5px); background-size: 6px 6px;
  box-shadow: 0 1px 0 rgba(110, 75, 35, 0.18); }
.modal-card.cb .card.unknown .about { color: #5a4e38; }
.modal-card.cb .card .chip { background: #f6efdf; border-color: #e0d2b2; }
/* The farm journal as a newspaper: one cream newsprint page per day on a dark desk, a blackletter-style masthead between
   rules, a big serif headline, the news set in justified columns with rules between them, and page-turn buttons below.
   Turning slides the pages sideways (see jrTurn, .np-out and .np-in). */
.modal-card.jr-np > header { background: #3a3128; border-bottom: 0; border-radius: 14px 14px 0 0; }
.modal-card.jr-np > header h2 { color: #f1e9d6; }
.modal-card.jr-np #modal-body { display: flex; flex-direction: column; padding: 14px 18px 10px; overflow: hidden; border-radius: 0 0 14px 14px;
  background: radial-gradient(ellipse at 50% 30%, #5a4a3b, #3a3128 75%); }
.np { display: flex; flex-direction: column; min-height: 0; flex: 1; gap: 8px; }
.np-sheet { flex: 1; min-height: 0; overflow-y: auto; background-color: #f3eddc; color: #24201a; padding: 16px 26px 12px; font-family: Georgia, 'Times New Roman', serif;
  background-image: radial-gradient(ellipse at 50% 50%, transparent 60%, rgba(150, 120, 70, 0.14) 100%), radial-gradient(rgba(90, 70, 40, 0.06) 1px, transparent 1.4px);
  background-size: 100% 100%, 5px 5px; background-attachment: local;
  box-shadow: 0 1px 0 #d8ceb5, 0 2px 0 #ebe3cf, 0 3px 0 #d0c5aa, 0 4px 0 #e6ddc6, 0 8px 18px rgba(0, 0, 0, 0.45); border-radius: 2px; }
.modal-card .np-mast { display: block; text-align: center; background: none; border-radius: 0; padding: 0; border-bottom: 3px double #2c251c; padding-bottom: 4px !important; margin-bottom: 10px; }
.np-ears { display: flex; justify-content: space-between; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #5d5243; }
.np-mast h1 { margin: 2px 0 4px; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px, 5vw, 46px); font-weight: 700; font-variant: small-caps;
  letter-spacing: 0.01em; line-height: 1.05; color: #1d1913; }
.np-dateline { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid #2c251c; padding-top: 3px; font-size: 12px; font-style: italic; color: #3d3428; }
.np-headline { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 12px; font-size: clamp(20px, 2.8vw, 30px); line-height: 1.15; text-align: center;
  font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #2c251c; }
.np-hl-ico .ico { width: 54px; height: 54px; filter: sepia(0.25) drop-shadow(0 1px 1px rgba(60, 40, 10, 0.3)); }
.np-cols { columns: 3 230px; column-gap: 26px; column-rule: 1px solid #b9ad93; font-size: 14px; line-height: 1.4; text-align: justify; hyphens: auto; }
.np-art { break-inside: avoid; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #d3c8ae; }
.np-art.unread { background: linear-gradient(90deg, rgba(232, 196, 92, 0.22), transparent); box-shadow: -6px 0 0 rgba(232, 196, 92, 0.22); }
.np-art.bad { color: #8a2c1c; }
.np-time { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #7a6d58; margin-bottom: 1px; font-family: system-ui, sans-serif; }
.np-art .jr-dish { align-items: flex-start; text-align: left; }
.np-art .jr-dish b { font-size: 16px; }
.np-art .muted { color: #6d6150; }
.np-report h3 { margin: 0 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; border-bottom: 1px solid #2c251c; padding-bottom: 3px; }
.np-report .gazette { background: none; border: 0; box-shadow: none; padding: 0; max-width: none; text-align: left; }
.np-report .gz-head { display: none; }
.np-report .gz-stats { grid-template-columns: 1fr; gap: 3px; }
.np-report .gz-stats div { grid-template-columns: auto 1fr; gap: 8px; align-items: baseline; }
.np-report .gz-ledger { min-width: 0; width: 100%; font-size: 12px; }
.np-report .gz-split { background: #c9b98f; }
.np-pending p { font-style: italic; color: #6d6150; text-align: center; margin: 6px 0 0; }
.np-empty { font-style: italic; color: #6d6150; }
.np-foot { text-align: center; font-size: 11px; color: #7a6d58; border-top: 3px double #2c251c; padding-top: 4px; margin-top: 4px; letter-spacing: 0.08em; text-transform: uppercase; }
.np-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: none; }
.np-turn { display: inline-flex; align-items: center; gap: 6px; background: #f3eddc; border-color: #c9bc9d; color: #2c251c; font-family: Georgia, serif; font-size: 15px; padding: 4px 12px; min-width: 110px; justify-content: center; }
.np-turn:disabled { visibility: hidden; }
.np-pg { display: inline-flex; align-items: center; gap: 8px; color: #f1e9d6; font-family: Georgia, serif; font-size: 14px; }
.np-pg button { background: transparent; color: #f1e9d6; border-color: rgba(241, 233, 214, 0.4); padding: 1px 8px; }
/* Page turn (jrTurn): the old page (.np-out, a copy) slides off to one side, dropping and tilting down a little, while
   the new page (.np-in) slides in from the other side and straightens up. */
.modal-card.jr-np #modal-body { position: relative; }
.np-out { position: absolute; z-index: 2; margin: 0; pointer-events: none; overflow: hidden; }
.np-out.to-r { transform-origin: 0 0; animation: np-out-r 0.55s cubic-bezier(0.5, 0, 0.75, 0.4) forwards; }
.np-out.to-l { transform-origin: 100% 0; animation: np-out-l 0.55s cubic-bezier(0.5, 0, 0.75, 0.4) forwards; }
.np-in.from-l { transform-origin: 100% 0; animation: np-in-l 0.55s cubic-bezier(0.2, 0.6, 0.35, 1) both; }
.np-in.from-r { transform-origin: 0 0; animation: np-in-r 0.55s cubic-bezier(0.2, 0.6, 0.35, 1) both; }
@keyframes np-out-r { to { transform: translate(115%, 70px) rotate(7deg); } }
@keyframes np-out-l { to { transform: translate(-115%, 70px) rotate(-7deg); } }
@keyframes np-in-l { from { transform: translate(-115%, 70px) rotate(-7deg); } }
@keyframes np-in-r { from { transform: translate(115%, 70px) rotate(7deg); } }
@media (max-width: 640px) {
  .modal-card.jr-np #modal-body { padding: 10px 8px 8px; }
  .np-sheet { padding: 12px 14px 10px; }
  .np-ears { font-size: 10px; }
  .np-dateline span:last-child { display: none; }
  .np-turn { min-width: 0; padding: 4px 10px; }
  .np-hl-ico .ico { width: 40px; height: 40px; }
}

/* The Codex is a laptop the farmer looks things up on: a dark bezel with a webcam dot around a bright screen, a browser
   toolbar whose address bar holds the title, a pale sidebar of search results, and the open page on white. A silver
   keyboard deck with a thumb notch sits under the screen (the card's ::after), so the card is a little shorter. */
.modal-card.laptop { position: relative; height: 84vh; margin-bottom: 2vh; padding: 16px 16px 14px; border-radius: 20px;
  background: linear-gradient(160deg, #3a3e45 0%, #24272c 40%, #1d1f23 100%);
  box-shadow: inset 0 0 0 1px #50555d, inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.5); }
.modal-card.laptop::before { content: ''; position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #4b5a6e, #0c0e12 70%); box-shadow: 0 0 0 1px #15171b; }
.modal-card.laptop::after { content: ''; position: absolute; left: -5%; right: -5%; bottom: -18px; height: 18px; border-radius: 3px 3px 16px 16px / 3px 3px 12px 12px;
  background: radial-gradient(ellipse 60px 7px at 50% 0, #9aa0a8 0 60%, transparent 62%),
    linear-gradient(180deg, #e6e9ed 0%, #c9cdd3 35%, #a9aeb6 75%, #8e939b 100%);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.modal-card.laptop > header { gap: 10px; padding: 8px 10px; border-radius: 6px 6px 0 0; border-bottom: 1px solid #c8cdd4;
  background: linear-gradient(180deg, #f1f3f6, #e1e5ea); }
.modal-card.laptop > header h2 { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; margin-right: 6px; padding: 5px 14px;
  border-radius: 99px; background: #fff; box-shadow: inset 0 0 0 1px #cdd2d9, 0 1px 0 rgba(255, 255, 255, 0.8);
  font-size: 15px; font-weight: 600; color: #2b3138; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-card.laptop > header .x { align-self: center; }
.modal-card.laptop #modal-body { --panel: #fff; padding: 12px 14px; border-radius: 0 0 6px 6px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25); }
.modal-card.laptop .cx-list { padding: 8px; margin: -12px 0 -12px -14px; padding-left: 12px; background: #f3f5f8; border-right: 1px solid #e0e4ea; }
.modal-card.laptop .cx-list .search { border-radius: 99px; border-color: #cdd2d9; background: #fff; padding-left: 12px; }
.modal-card.laptop .cx-list .search:focus { outline: 2px solid rgba(59, 120, 216, 0.35); border-color: #3b78d8; }
.modal-card.laptop .cx-items { border: 0; background: transparent; }
.modal-card.laptop .cx-item { border-bottom: 0; border-radius: 6px; margin: 1px 0; padding: 4px 8px; color: #2b3138; }
.modal-card.laptop .cx-item:hover { background: #e6ebf2; }
.modal-card.laptop .cx-item.active { background: #dce8fb; color: #174ea6; box-shadow: inset 3px 0 0 #3b78d8; }
.modal-card.laptop .cx-detail { padding: 2px 8px 8px 4px; }
.modal-card.laptop .cx-detail h4 { padding-bottom: 3px; border-bottom: 1px solid #e6e9ee; color: #1f2a37; }
.modal-card.laptop .stats div { background: #f7f9fb; border-color: #e0e4ea; }
.modal-card.laptop .tree, .modal-card.laptop .recipe-card { background: #fbfcfd; border-color: #e0e4ea; }
@media (max-width: 760px) {
  .modal-card.laptop { height: 86vh; padding: 12px 7px 8px; border-radius: 14px; }
  .modal-card.laptop::before { top: 4px; width: 4px; height: 4px; margin-left: -2px; }
  .modal-card.laptop::after { left: -3%; right: -3%; bottom: -10px; height: 10px; }
  .modal-card.laptop > header { padding: 6px 7px; }
  .modal-card.laptop > header h2 { font-size: 14px; padding: 4px 10px; margin-right: 2px; }
  .modal-card.laptop #modal-body { padding: 10px; }
  .modal-card.laptop .cx-list { margin: -10px -10px 0; padding: 8px 10px; border-right: 0; border-bottom: 1px solid #e0e4ea; }
}

/* Plan production is a building site: the card is framed in yellow and black hazard tape. The tape is the card's border
   (a striped border-box background under a plain padding-box one), edged in black on both sides, so the contents and
   the shared close button stay as they are. */
.modal-card.hazard { border: 14px solid transparent; border-radius: 16px;
  background: linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.12)) border-box,
    repeating-linear-gradient(-45deg, #f5c518 0 18px, #1d1d1b 18px 36px) border-box;
  box-shadow: inset 0 0 0 2px #1d1d1b, 0 0 0 2px #1d1d1b, 0 20px 60px rgba(0, 0, 0, 0.45); }
.modal-card.hazard > header { border-radius: 2px 2px 0 0; }
@media (max-width: 600px) {
  .modal-card.hazard { border-width: 9px; border-radius: 12px;
    background: linear-gradient(var(--panel), var(--panel)) padding-box,
      linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.12)) border-box,
      repeating-linear-gradient(-45deg, #f5c518 0 12px, #1d1d1b 12px 24px) border-box; }
}
/* The Goals are the farmhouse kitchen's to-do list, chalked on a blackboard: a wooden frame (the header is its top rail),
   dark green slate with faint smudges of old writing, chalk-white text, chalk boxes that get a tick, a yellow chalk ring
   round the next goal, and a ledge with a stick of chalk and a felt eraser at the bottom. */
.modal-card.chalk { position: relative; width: min(680px, 96vw); padding: 0 14px 26px; border-radius: 12px;
  background: repeating-linear-gradient(90deg, rgba(255, 230, 190, 0.05) 0 1px, transparent 1px 9px, rgba(60, 30, 10, 0.06) 9px 10px, transparent 10px 23px),
    linear-gradient(180deg, #9a6a3f 0%, #84582f 55%, #6f4825 100%);
  box-shadow: inset 0 1px 0 rgba(255, 225, 180, 0.35), inset 0 0 0 1px #5a3a1c, 0 20px 60px rgba(0, 0, 0, 0.45); }
.modal-card.chalk::before { content: ''; position: absolute; left: 10px; right: 10px; bottom: 5px; height: 9px; border-radius: 2px 2px 4px 4px; pointer-events: none;
  background: linear-gradient(180deg, #a57446 0%, #7a5029 60%, #5f3e1f 100%); box-shadow: 0 1px 0 rgba(255, 225, 180, 0.25) inset, 0 2px 3px rgba(30, 15, 5, 0.45); }
.modal-card.chalk::after { content: ''; position: absolute; right: 18%; bottom: 13px; width: 130px; height: 12px; pointer-events: none;
  background: linear-gradient(180deg, #fbf8ef, #dcd8cb) 0 6px / 44px 6px no-repeat,
    linear-gradient(180deg, #c99a62 0 55%, #4d5560 55% 100%) 76px 0 / 54px 12px no-repeat;
  filter: drop-shadow(0 1px 1px rgba(30, 15, 5, 0.55)); }
.modal-card.chalk > header { border-bottom: 0; padding: 10px 2px 10px 4px; }
.modal-card.chalk > header h2 { color: #fbf1dc; text-shadow: 0 1px 0 rgba(50, 25, 5, 0.6); }
.modal-card.chalk > header h2 .ico { filter: drop-shadow(0 0 1.5px #fbf1dc); }
.modal-card.chalk #modal-body { --panel: #2d4a3b; color: #f2f1ea; padding: 14px 18px 16px; border-radius: 4px; background-color: #2d4a3b; background-attachment: local;
  background-image: radial-gradient(ellipse 160px 40px at 22% 18%, rgba(255, 255, 255, 0.05), transparent 70%),
    radial-gradient(ellipse 200px 50px at 75% 62%, rgba(255, 255, 255, 0.045), transparent 70%),
    radial-gradient(ellipse 120px 30px at 40% 88%, rgba(255, 255, 255, 0.04), transparent 70%),
    radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1.5px);
  background-size: 100% 600px, 100% 600px, 100% 600px, 5px 5px;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.55), inset 0 0 0 2px #24392d, 0 1px 0 rgba(255, 225, 180, 0.3); }
.modal-card.chalk .muted, .modal-card.chalk #modal-body .small.muted { color: #b9c4b9; }
.modal-card.chalk .tc-open { color: #3a250f; background: linear-gradient(180deg, #f1dfb2, #d9bf86); border-color: #a5844c;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 250, 230, 0.6); }
.modal-card.chalk .tc-open .muted { color: #6b5230; }
.modal-card.chalk .goals { gap: 2px; }
.modal-card.chalk .goal { align-items: start; padding: 7px 10px 7px 6px; background: transparent; border: 0; border-radius: 10px;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.12); font-size: 15px; letter-spacing: 0.01em; text-shadow: 0 0 1px rgba(255, 255, 255, 0.25); }
.modal-card.chalk .goal:last-child { border-bottom: 0; }
.modal-card.chalk .goal.done { opacity: 1; color: rgba(242, 241, 234, 0.55); }
.modal-card.chalk .goal.done > span:nth-child(2) { text-decoration: line-through; text-decoration-color: rgba(242, 241, 234, 0.6); text-decoration-thickness: 1.5px; }
.modal-card.chalk .goal.next { background: rgba(255, 255, 255, 0.05); font-weight: 600; color: #fffbe8;
  box-shadow: 0 0 0 2px rgba(246, 222, 120, 0.85), 0 0 6px rgba(246, 222, 120, 0.35); border-bottom-color: transparent; margin: 3px 0; }
.modal-card.chalk .gbox { display: inline-block; position: relative; top: 2px; width: 15px; height: 15px; box-sizing: border-box; border: 2px solid rgba(242, 241, 234, 0.85);
  border-radius: 2px 3px 2px 4px; font-style: normal; font-weight: 800; font-size: 17px; line-height: 9px; text-indent: 1px; color: #bfe7a7; }
.modal-card.chalk .goal.done .gbox { border-color: rgba(242, 241, 234, 0.5); }
.modal-card.chalk .reward { color: #f6de78; padding-left: 10px; }
.modal-card.chalk .goal.done .reward { color: rgba(246, 222, 120, 0.5); }
.modal-card.chalk .unlocktag { background: rgba(246, 222, 120, 0.16); color: #f6de78; box-shadow: inset 0 0 0 1px rgba(246, 222, 120, 0.45); text-decoration: none; }
.modal-card.chalk .gprog { color: #e3e8dc; }
.modal-card.chalk .gbar { background: rgba(255, 255, 255, 0.16); }
.modal-card.chalk .gbar i { background: #f6de78; }
.modal-card.chalk #modal-body h4 { color: #fbf1dc; margin-top: 16px; padding-top: 10px; border-top: 2px solid rgba(242, 241, 234, 0.2); }
.modal-card.chalk .farm-nums { color: #dfe5db; line-height: 1.6; }
@media (max-width: 760px) {
  .modal-card.chalk { padding: 0 8px 24px; }
  .modal-card.chalk #modal-body { padding: 10px 10px 12px; }
  .modal-card.chalk .goal { font-size: 14px; padding: 6px 6px 6px 4px; }
}