/* Look follows CHEF!'s concept art and brand style guide
   (Roles/Art Director/brands/chef/STYLE.md): warm wood frames, cream panels,
   terracotta accents, chalkboard signage. Cozy and toylike, never cold.
   Terracotta is #B54E1F on light surfaces; on dark wood use #D66430, since
   #B54E1F fails contrast there (and headings/small text on cream use #A3441A,
   because #B54E1F measures 4.503:1 — the Art Director's rule as of 2026-09-17).
   The brand colours themselves come from the Art Director's own
   assets/brand/chef-tokens.css (linked first in index.html); the values below
   are fallbacks for anything opening style.css without it. Everything else
   here (wood, tile, chalk, lantern) is CHEF!'s own UI palette, derived from
   the concept art rather than delivered as tokens. */
:root {
  --wood-dark: #2e1b0f;
  --wood: #5c3620;
  --wood-light: #7a4a2b;
  --cream: var(--chef-cream, #f7efdd);
  --cream-deep: #efe2c6;
  --tile: #fbf5e8;
  --tile-edge: #e4d2b0;
  --card-edge: #c9a97e;
  --card-base: #a9814f;
  --terracotta: var(--chef-terracotta, #b54e1f);
  --terracotta-dark: #8f3c16;
  --terracotta-heading: var(--chef-terracotta-heading, #a3441a);
  --terracotta-on-dark: var(--chef-terracotta-on-dark, #d66430);
  --ink: var(--chef-brown, #4a2e1a);
  --muted: #7a5a42; /* 5.4:1 on cream, for small labels */
  --chalk-bg: #2f3a33;
  --chalk-ink: #eee8da;
  --chalk-muted: #a9b3a6;
  --lantern: #f3b562;
  font-family: "Segoe UI", -apple-system, Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  /* Dark walnut planks behind everything — the restaurant's wooden frame. */
  background-color: var(--wood-dark);
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(243, 181, 98, 0.18), transparent 60%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 2px, transparent 2px 64px),
    linear-gradient(90deg, #3a2213, #2e1b0f 40%, #36200f);
  /* The game fills the window: the top bar, then the board in all the space
     left, and no page scrolling (the Owner, 2026-09-27: a widescreen needed
     resizing by hand, and the panels below the board wanted a tall monitor). */
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

h1, h2 { font-family: Georgia, "Times New Roman", serif; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 18px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border-bottom: 4px solid var(--wood-dark);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  flex-wrap: wrap;
  gap: 8px;
}

.topbar h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 20px;
}

/* The lockup's 1500x600 canvas has transparent padding, mostly on the
   right (art spans x 48-1352). Anchored left and cropped to the art so the
   subtitle sits right beside it (Art Director's note). */
.logo {
  display: block;
  height: 56px;
  width: 128px;
  object-fit: cover;
  object-position: left center;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}

.subtitle {
  font-family: "Segoe UI", -apple-system, Roboto, sans-serif;
  font-size: 12px;
  font-weight: normal;
  color: var(--cream-deep);
  letter-spacing: 0.02em;
}

.controls { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Chunky, toylike buttons: a raised terracotta tile with a darker base. */
button {
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff7e8;
  /* Both stops keep cream text above 4.5:1 (4.8 top, 5.8 bottom). */
  background: linear-gradient(180deg, var(--terracotta), var(--terracotta-heading));
  border: 1px solid var(--terracotta-dark);
  border-bottom-width: 3px;
  border-radius: 10px;
  padding: 6px 12px;
  transition: filter 0.1s, transform 0.05s;
}

button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); border-bottom-width: 2px; }

button.active {
  background: var(--terracotta-dark);
  border-color: #6b2c0f;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35), 0 0 0 2px var(--lantern);
}

.speed-group { display: flex; gap: 4px; }
.speed-group .speed-btn { min-width: 36px; }

/* The board fills everything under the top bar; the panels open as a
   drawer over it from the icon bar down its left edge. */
.layout {
  flex: 1;
  min-height: 0;
  position: relative;
  padding: 10px;
}

/* A thick wooden frame around the restaurant, like the concept art's
   diorama edge. */
.board-panel {
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 3px solid var(--wood-dark);
  border-radius: 14px;
  padding: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 6px 18px rgba(0, 0, 0, 0.45);
  height: 100%;
}

#board {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid var(--wood-dark);
  border-radius: 6px;
  cursor: pointer;
  background: #faf6ee;
}

.board-hint {
  font-size: 12px;
  color: var(--cream-deep);
  margin: 8px 2px 0;
}

/* The icon bar: one button per panel, down the board's left edge. */
.panel-bar {
  position: absolute;
  left: 22px;
  top: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}
.panel-bar button {
  width: 44px;
  height: 44px;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.panel-bar button img { width: 30px; height: 30px; display: block; }

/* The drawer: the open panel, over the board's right side, scrolling on its
   own. Closed (no panel open) it's hidden. */
.side-panel {
  position: absolute;
  top: 22px;
  right: 22px;
  bottom: 22px;
  width: min(400px, calc(100vw - 110px));
  overflow-y: auto;
  z-index: 5;
  display: none;
}
.side-panel.open { display: block; }
.side-panel > .card { display: none; }
.side-panel > .card.shown { display: block; }
.drawer-close {
  position: sticky;
  top: 0;
  float: right;
  z-index: 1;
  margin: 6px 6px -40px 0;
  padding: 2px 9px;
}

/* A few numbers kept in the top bar with every drawer closed. */
.hud {
  font-size: 13px;
  color: var(--cream);
  background: rgba(0, 0, 0, 0.22);
  border-radius: 8px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Cream panels on a wooden base. */
.card {
  background: var(--cream);
  border: 2px solid var(--card-edge);
  border-radius: 12px;
  padding: 10px 12px 12px;
  box-shadow: 0 4px 0 var(--card-base), 0 8px 16px rgba(0, 0, 0, 0.3);
}

.card h2 {
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--terracotta-heading);
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 2px dashed var(--tile-edge);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 10px;
}

.stat {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  background: var(--tile);
  border: 1px solid var(--tile-edge);
  border-radius: 8px;
  padding: 6px 8px;
}

.stat span { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; }
.stat b { font-size: 17px; color: var(--ink); }
/* Negative cash: a quiet warning only (Simulation._noteDebt). The heading
   terracotta keeps 5.4:1 on the cream panel. */
.stat b.in-debt { color: var(--terracotta-heading); }
/* The money stat's change since opening (UI._updateMoneyDelta). The green
   keeps ~5:1 on the stat tile, like the terracotta. */
.money-delta { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--muted); }
.money-delta[data-dir="up"] { color: #2e7d32; }
.money-delta[data-dir="down"] { color: var(--terracotta-heading); }

.activity-line {
  font-size: 11px;
  color: var(--muted);
  margin: 8px 0 0;
}

.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-item { align-items: center; }
.recipe-icon { width: 28px; height: 28px; margin: -4px 6px -4px -2px; vertical-align: middle; }
.menu-item {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 8px;
  background: var(--tile);
  border: 1px solid var(--tile-edge);
  border-radius: 6px;
}

/* Wraps onto extra rows instead of overflowing: the Staff card's five hire
   buttons don't fit on one line in a ~260px-wide grid column, and without
   wrapping the last one was clipped off the card. */
.card h2:has(.hire-buttons) { flex-wrap: wrap; gap: 6px; }
.hire-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }

/* Buttons inside cards: a lighter cream tile, so the terracotta top-bar
   controls stay the loudest thing on the page. */
.hire-buttons button,
.shop-btn,
.fire-btn,
.sell-btn {
  font-family: "Segoe UI", -apple-system, Roboto, sans-serif;
  color: var(--terracotta-dark);
  background: linear-gradient(180deg, #fffaf0, var(--cream-deep));
  border-color: var(--card-edge);
}
.hire-buttons button { font-size: 11px; padding: 3px 7px; white-space: nowrap; letter-spacing: 0; }

.pantry-category { color: var(--muted); text-transform: capitalize; font-size: 11px; }
/* A pantry ingredient's icon (UI.ingredientIcon), before its name. */
.ing-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; image-rendering: auto; }
.role-icon { width: 20px; height: 20px; vertical-align: -5px; margin-right: 4px; }

/* Tall enough for the 8-person default crew (about 30px a row) plus one
   hire; bigger crews still scroll. */
.staff-list { display: flex; flex-direction: column; gap: 4px; max-height: 280px; overflow-y: auto; }
/* A raise request on a staff row (Simulation.answerRaise). */
.raise-ask { font-size: 11px; color: var(--terracotta-heading); white-space: nowrap; }
.raise-btn { font-size: 11px; padding: 0 5px; margin-left: 2px; }
/* Where tips go (Staff.TIP_MODES). */
.tip-mode { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); margin-bottom: 6px; }
.tip-mode select { font-size: 12px; padding: 2px 4px; border: 1px solid var(--card-edge); border-radius: 4px; background: var(--tile); color: var(--ink); }
/* Hiring: a role's candidates (UI._renderCandidates). */
.hire-candidates { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; padding: 8px; border: 1px solid var(--card-edge); border-radius: 8px; background: var(--cream-deep); }
.candidates-head { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); }
.candidates-head button { margin-left: auto; font-size: 11px; padding: 2px 7px; }
.candidate { display: flex; flex-direction: column; gap: 3px; padding: 6px; border-radius: 6px; background: var(--tile); border: 1px solid var(--tile-edge); font-size: 12px; color: var(--ink); }
.cand-name { display: flex; justify-content: space-between; gap: 6px; }
.cand-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 8px; }
.cand-stat b { color: var(--terracotta-heading); font-weight: 400; letter-spacing: 1px; }
.cand-trait { color: var(--terracotta-heading); }
.cand-trait.none { color: var(--muted); }
.candidate button { align-self: flex-start; font-size: 11px; padding: 3px 9px; }
.staff-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--tile);
  border: 1px solid var(--tile-edge);
  cursor: pointer;
  gap: 6px;
}
.staff-row.selected { outline: 2px solid var(--terracotta); }
/* One line, cut with an ellipsis: a long state like "TAKING DISHES TO
   COUNTER" used to wrap, making rows uneven and pushing the crew past the
   list's height. */
.staff-state {
  color: var(--muted);
  font-size: 10px;
  flex: 1;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-wage { color: #9a6a12; font-size: 10px; white-space: nowrap; }
.fire-btn { padding: 1px 6px; font-size: 10px; border-bottom-width: 2px; }

#inspector { font-size: 12px; min-height: 40px; }
.inspect-row { display: flex; justify-content: space-between; padding: 2px 0; border-bottom: 1px dashed var(--tile-edge); }
.hint { color: var(--muted); }
/* Helper sentences sit at label size so they don't outweigh the lists. */
.card > p.hint { font-size: 11px; line-height: 1.4; margin: 8px 0 0; }
.card h2 .hint { font-family: "Segoe UI", -apple-system, Roboto, sans-serif; font-size: 11px; letter-spacing: 0.04em; }

.shop-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.shop-btn { font-size: 11px; padding: 3px 7px; }
.shop-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.sell-btn { display: block; margin-top: 6px; }

/* The event log as a chalkboard in a wooden frame, like the "Good Food"
   signs in the concept art. */
.log-card {
  flex: 1;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  background: var(--chalk-bg);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 70%);
  border: 5px solid var(--wood-light);
  box-shadow: 0 4px 0 var(--wood-dark), 0 8px 16px rgba(0, 0, 0, 0.35);
}
.log-card h2 { color: var(--chalk-ink); border-bottom-color: rgba(238, 232, 218, 0.25); }
.event-log {
  font-size: 11px;
  font-family: "Cascadia Mono", Consolas, "SF Mono", monospace;
  color: var(--chalk-ink);
  overflow-y: auto;
  flex: 1;
  max-height: 240px;
}
.log-row { padding: 2px 0; border-bottom: 1px solid rgba(238, 232, 218, 0.1); }
.log-t { color: var(--chalk-muted); margin-right: 4px; }

@media (max-width: 600px) {
  .logo { height: 44px; width: 100px; }
}

/* The day loop: clock in the top bar, end-of-day results. */
.day-clock {
  color: var(--cream);
  font-weight: 700;
  padding: 0 6px;
  white-space: nowrap;
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20, 12, 6, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  max-width: 420px;
  width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  overflow: auto;
}
.results-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.results-row.total { font-weight: 700; border-top: 1px solid var(--tile-edge); margin-top: 4px; padding-top: 4px; }
.results-warning { color: var(--terracotta-heading); font-weight: 700; }
.staff-comments { margin: 6px 0 10px; }
.staff-comment { display: flex; gap: 8px; align-items: flex-start; padding: 3px 0; }
.staff-comment img { width: 24px; height: 24px; flex: none; image-rendering: pixelated; }
#btn-next-day { margin-top: 12px; }

/* Stock (Pantry panel). */
.sold-out { color: var(--terracotta-heading); font-weight: 700; }
.sold-out-tag { width: 34px; height: 34px; vertical-align: -12px; margin: -8px 0 -8px 4px; }
/* A button's icon art before its label; clicks go to the button itself. */
.btn-icon { width: 18px; height: 18px; vertical-align: -4px; margin-right: 4px; pointer-events: none; }
.btn-icon:only-child { margin-right: 0; }
.btn-icon.after { margin: 0 0 0 4px; }
/* The end-of-day card's header picture: the storefront at night, closed. */
.results-header { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 6px; margin-bottom: 8px; }
.fire-btn .btn-icon { width: 14px; height: 14px; vertical-align: -3px; }
.stock-row { padding: 3px 0; border-bottom: 1px dashed var(--tile-edge); }
.stock-controls { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-top: 2px; }
.stock-controls button { padding: 1px 6px; font-size: 11px; }
.pricing-price { min-width: 44px; text-align: center; }
.pricing-reputation { margin: 0 0 6px; font-size: 12px; }
.pricing-verdict { font-size: 11px; }
.pricing-a-bargain { color: #2e7d32; }
.pricing-pricey { color: #9a6a12; }
.pricing-too-pricey { color: var(--terracotta-heading); font-weight: 700; }

/* Difficulty picker in the top bar. */
.difficulty-pick { color: var(--cream); font-weight: 700; display: flex; gap: 4px; align-items: center; }
/* The select matches the top-bar buttons (Art Director's UI direction): the
   same raised terracotta pill, cream text, and a custom cream chevron. */
.difficulty-pick select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #fff7e8;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23fff7e8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
      no-repeat right 10px center,
    linear-gradient(180deg, var(--terracotta), var(--terracotta-heading));
  border: 1px solid var(--terracotta-dark);
  border-bottom-width: 3px;
  border-radius: 10px;
  padding: 6px 28px 6px 12px;
}
.difficulty-pick select:hover:not(:disabled) { filter: brightness(1.08); }
.difficulty-pick select:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--lantern); }
.difficulty-pick select:disabled { cursor: default; filter: saturate(0.5) brightness(0.9); }
.difficulty-pick select option { color: var(--ink); background: var(--cream); }

/* Esc's pause menu (PauseMenu.js). Above the help, the results and the tutorial's cards (900). */
.pause-menu { z-index: 1000; }
.pause-card { max-width: 300px; display: flex; flex-direction: column; gap: 8px; text-align: center; }
.pause-card h2 { margin: 0 0 4px; }
.pause-btn { width: 100%; padding: 9px 12px; font-size: 15px; }
.pause-main { font-size: 17px; }
.pause-btn:disabled { opacity: 0.5; cursor: default; }
/* The studio's shared parts (vendor/studio-games/studio-games.css) in CHEF!'s
   colours: the "are you sure?" dialog is a cream card with terracotta for
   the action, like the pause menu. */
:root {
  --sg-bg: var(--cream);
  --sg-text: #4a2e1a;
  --sg-border: var(--card-edge);
  --sg-btn-bg: #efe2c8;
  --sg-main-bg: var(--terracotta);
  --sg-main-text: #fff7e8;
  --sg-radius: 8px;
}
.sg-dialog .sg-btn { font-size: 15px; }
.pause-sound { display: flex; align-items: center; gap: 6px; justify-content: center; padding: 4px 0; }
.pause-sound input[type="range"] { flex: 1; min-width: 0; }
.pause-note { margin: 2px 0 0; font-size: 12px; }

/* Help overlay. */
.modal.help { max-width: 560px; }
.help ul { margin: 4px 0 10px; padding-left: 18px; }
.help li { margin: 3px 0; line-height: 1.35; }
#btn-help { min-width: 32px; font-weight: 800; }
.help .credits { font-size: 12px; color: #6b5a46; }
.help ul.credits li { word-break: break-word; }

/* A slimmer top bar, so the board gets the height (2026-09-27): smaller
   logo and controls, kept to one row on a desktop-width window. */
.topbar { padding: 4px 12px; flex-wrap: nowrap; }
.topbar .logo { height: 40px; width: 92px; }
.topbar .controls { gap: 6px; flex-wrap: nowrap; }
.topbar button { font-size: 12px; padding: 4px 9px; border-radius: 8px; }
.topbar .speed-group .speed-btn { min-width: 30px; }
.topbar .subtitle { font-size: 11px; white-space: nowrap; }
@media (max-width: 1500px) {
  .topbar, .topbar .controls { flex-wrap: wrap; }
}

/* ---- Front screens: gate, brand intro, load screen, main menu, story
   (src/ui/Campaign.js). The brand screens use the LuvzillaGames site's
   dark look (--bg #120a0c, --brand #e5323b, --spike #f7c948). ---- */
.front-screens { position: fixed; inset: 0; z-index: 1000; transition: opacity 0.4s; }
.front-screens.fs-leaving { opacity: 0; pointer-events: none; }
.fs-screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #120a0c center / cover no-repeat; color: #f4e8d8; overflow: hidden;
}
.fs-load { justify-content: flex-end; }
.fs-load-shade {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 45% at 18% 16%, rgba(18, 10, 12, 0.58), transparent 70%),
    linear-gradient(180deg, transparent 55%, rgba(18, 10, 12, 0.85));
}
.fs-load-logo { position: absolute; left: 4vw; top: 4vh; width: min(32vw, 440px); filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.5)); }
.fs-load-tip { position: relative; margin: 0 0 12px; font: italic 16px Georgia, serif; color: #f7efdd; }
.fs-bar { position: relative; width: min(60vw, 520px); height: 10px; margin-bottom: 48px; border-radius: 6px; background: rgba(247, 239, 221, 0.2); overflow: hidden; }
.fs-bar-fill { width: 0; height: 100%; background: linear-gradient(90deg, #d66430, #f3b562); border-radius: 6px; }
.fs-menu { align-items: flex-start; }
.fs-menu-bg { position: absolute; inset: -20px; background: center / cover no-repeat; filter: blur(8px) brightness(0.65); }
/* Dark over the left and the top, where the art's painted logo is. */
.fs-menu::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(30, 17, 9, 0.85) 0, rgba(30, 17, 9, 0.2) 38%, transparent 60%),
    linear-gradient(90deg, rgba(30, 17, 9, 0.92) 0, rgba(30, 17, 9, 0.6) 38%, rgba(30, 17, 9, 0.15) 70%);
}
.fs-menu-panel { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 14px; margin-left: 7vw; width: min(360px, 80vw); }
.fs-menu-logo { width: 100%; margin-bottom: 18px; }
.fs-menu-foot { margin: 16px 0 0; font-size: 12px; color: #c9b69c; }
.fs-btn {
  font: 700 18px/1 "Segoe UI", sans-serif; padding: 14px 20px; border: 0; border-radius: 12px; cursor: pointer;
  color: #f7efdd; background: #5c3620; box-shadow: 0 4px 0 #2e1b0f;
}
.fs-btn:hover { filter: brightness(1.12); }
.fs-btn-main { background: #b54e1f; box-shadow: 0 4px 0 #8f3c16; font-size: 22px; }
/* The main menu's Continue: the save's day and cash under it. */
.fs-btn-continue { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fs-btn-sub { font-size: 13px; font-weight: 600; color: #f3d9bf; }
.fs-menu-note { margin: 4px 0 0; font-size: 13px; color: #f3d9bf; max-width: 300px; text-align: center; }
.fs-menu-files { display: flex; justify-content: center; gap: 18px; margin-top: 6px; }
.fs-link { font: 600 13px "Segoe UI", sans-serif; background: none; border: 0; padding: 2px; color: #d9c3a3; text-decoration: underline; cursor: pointer; }
.fs-link:disabled { opacity: 0.4; cursor: default; text-decoration: none; }
.fs-story { background: radial-gradient(ellipse at center, #3a2414 0%, #1e1109 75%); }
.fs-card {
  max-width: 560px; margin: 16px; padding: 32px 36px; border-radius: 16px; background: #f7efdd; color: #4a2e1a;
  box-shadow: 0 8px 0 #a9814f, 0 20px 50px rgba(0, 0, 0, 0.5); animation: fs-pop 0.5s ease-out both;
}
.fs-card h2 { margin: 0 0 10px; color: #a3441a; font-size: 30px; }
.fs-card p { margin: 0 0 24px; font: 20px/1.5 Georgia, serif; }
.fs-recipes { max-width: 980px; padding: 16px; text-align: center; }
.fs-recipes-title { margin: 0; font-size: 34px; color: #f3b562; }
.fs-recipes-sub { margin: 8px 0 22px; color: #efe2c6; }
.fs-recipe-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.fs-recipe {
  width: 280px; max-width: 100%; padding: 18px; border: 0; border-radius: 16px; cursor: pointer; text-align: center;
  background: #f7efdd; color: #4a2e1a; box-shadow: 0 6px 0 #a9814f; transition: transform 0.15s;
}
.fs-recipe:hover { transform: translateY(-4px); }
.fs-recipe-dishes { display: flex; justify-content: center; gap: 4px; }
.fs-recipe-dishes { margin: -6px -8px 0; }
.fs-recipe-dishes img { width: 92px; height: 92px; image-rendering: auto; }
.fs-recipe h3 { margin: 8px 0 4px; color: #a3441a; font: bold 24px Georgia, serif; }
.fs-recipe-blurb { margin: 0 0 8px; font-size: 14px; }
.fs-recipe-list { margin: 0 0 6px; font-size: 13px; color: #7a5a42; }
.fs-recipe-price { margin: 0; font-weight: bold; color: #b54e1f; }
@keyframes fs-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* The tutorial's popup (Campaign.js Tutorial). */
.tut-card {
  position: fixed; left: 18px; top: 18px; z-index: 900; width: min(320px, calc(100vw - 36px)); padding: 14px 16px 12px;
  transition: left 0.25s ease-out, top 0.25s ease-out;
  border-radius: 14px; background: #f7efdd; color: #4a2e1a; border: 3px solid #c9a97e; box-shadow: 0 6px 0 #a9814f, 0 14px 30px rgba(0, 0, 0, 0.45);
  animation: fs-pop 0.35s ease-out both;
}
/* The pointer toward what the popup is about (Campaign.js Tutorial._place). */
.tut-card::before {
  content: ""; position: absolute; width: 14px; height: 14px; background: #f7efdd;
  border-left: 3px solid #c9a97e; border-bottom: 3px solid #c9a97e;
}
.tut-card[data-point="left"]::before { left: -10px; top: calc(var(--tip, 50%) - 7px); transform: rotate(45deg); }
.tut-card[data-point="right"]::before { right: -10px; top: calc(var(--tip, 50%) - 7px); transform: rotate(-135deg); }
.tut-card[data-point="up"]::before { top: -10px; left: calc(var(--tip, 50%) - 7px); transform: rotate(135deg); }
.tut-card h3 { margin: 0 0 6px; color: #a3441a; font: bold 19px Georgia, serif; }
.tut-card p { margin: 0 0 10px; font-size: 14px; line-height: 1.45; }
.tut-card .tut-hint { color: #7a5a42; font-style: italic; font-size: 13px; }
.tut-next { padding: 8px 16px; border: 0; border-radius: 9px; background: #b54e1f; color: #f7efdd; font-weight: bold; cursor: pointer; box-shadow: 0 3px 0 #8f3c16; }
.tut-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; }
.tut-skip { padding: 0; border: 0; background: none; color: #7a5a42; font-size: 12px; text-decoration: underline; cursor: pointer; }

/* The shop (src/ui/Shop.js): tabs, then a grid of cards with each piece's art. */
.shop-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 2px 0 8px; }
.shop-tab { font-size: 11px; padding: 4px 8px; border-radius: 6px; opacity: 0.75; }
.shop-tab.active { opacity: 1; outline: 2px solid var(--accent, #e0a040); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.shop-card { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; font-size: 11px; line-height: 1.2; text-align: center; white-space: normal; }
.shop-card.unaffordable { opacity: 0.45; }
.shop-pic { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.08); border-radius: 6px; overflow: hidden; }
.shop-pic img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.shop-noart { font-size: 24px; font-weight: 700; opacity: 0.6; }
.shop-name { font-weight: 600; }
.shop-price { opacity: 0.8; }
.shop-tools { font-size: 11px; opacity: 0.85; margin-top: 8px; }
.shop-tools button { font-size: 11px; padding: 3px 7px; margin-right: 6px; }