/* Potato Tycoon. Chunky borders, hard shadows, warm city colours.
   The glow up: a deep red and gold top bar, the crowned emblem
   in a cream disc, soft corners on every card, gradient buttons. */
:root {
  --ink: #26221f;
  --paper: #fdf6e9;
  --panel: #fffdf6;
  --green: #58b368;
  --green-dark: #3d8a4e;
  --gold: #e8c33a;
  --gold-soft: #f5d95e;
  --red: #d9534f;
  --red-deep: #8e2f28;
  --blue: #4f7ad9;
  --muted: #6e6255;
  --shell: 1560px;
}

* { box-sizing: border-box; }

/* Touch rules for a clicker game: no double tap zoom while he
   works, no grey flash on tap, no accidental text selection. */
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
#scene { touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.work-btn { user-select: none; -webkit-user-select: none; }

body {
  margin: 0;
  font-family: "Trebuchet MS", Verdana, system-ui, sans-serif;
  background:
    radial-gradient(circle at 20% 0%, #fff8e6 0, rgba(255, 248, 230, 0) 55%),
    radial-gradient(rgba(176, 58, 46, 0.055) 1.5px, rgba(176, 58, 46, 0) 1.7px) 0 0 / 22px 22px,
    var(--paper);
  color: var(--ink);
}

.topbar {
  padding: 14px 18px;
  background: linear-gradient(135deg, #b03a2e 0%, var(--red-deep) 70%);
  border-bottom: 4px solid var(--gold);
  color: var(--paper);
  box-shadow: 0 3px 0 rgba(38, 34, 31, 0.85);
}

/* The bar itself runs edge to edge; its contents live in the
   same centred shell as everything below it. */
.topbar-inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 12px; }
.brand-badge {
  background: var(--paper);
  padding: 2px;
  border: 3px solid var(--gold);
  border-radius: 50%;
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.3);
  line-height: 0;
}
.brand-logo { width: 42px; height: 42px; display: block; border-radius: 50%; }
.brand-alt { color: var(--gold-soft); }
.intro-banner {
  width: 100%;
  display: block;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink);
  margin-bottom: 12px;
}
.brand h1 { margin: 0; font-size: 26px; letter-spacing: 1px; text-transform: uppercase; }
.tagline { margin: 2px 0 0; font-size: 14px; color: #f7e3c1; }

.stats { display: flex; gap: 10px; flex-wrap: wrap; }
.stat {
  background: linear-gradient(180deg, var(--panel), #fdf3d8);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 12px;
  min-width: 130px;
}
.stat-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }
.stat-value { font-size: 18px; font-weight: 900; }

/* The showroom's four story facts. In the scene they hang as
   gold plaques under the stage; on a wide screen they also sit
   here, as cards in the flow under the scene, so nothing rides
   the scene's bottom edge. The strip only displays inside the
   wide screen block at the end of this file. */
.showroom-stats { display: none; }
.showroom-stat {
  background: linear-gradient(180deg, #3a2110, #2a1608);
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 8px 12px;
  text-align: center;
}
.showroom-stat-label {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--gold);
}
.showroom-stat-value {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 900;
  color: #fff8ea;
}

.scene-wrap { max-width: var(--shell); margin: 10px auto 0; padding: 0 8px; position: relative; }
#scene {
  width: 100%;
  display: block;
  border: 4px solid var(--ink);
  border-radius: 10px;
  box-shadow: 6px 6px 0 var(--ink);
  image-rendering: pixelated;
  background: #79bfe6;
  cursor: pointer;
}
.offline-note {
  margin-top: 10px;
  background: #dff3e2;
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}

.controls {
  max-width: var(--shell);
  margin: 18px auto;
  padding: 0 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  align-items: start;
}
@media (max-width: 860px) {
  .controls { grid-template-columns: 1fr; }
}

.investor-info { font-weight: 700; margin: 8px 0 2px; }
.investor-sub { color: var(--muted); font-size: 14px; margin: 0 0 8px; }
.investor-btn { margin-top: 10px; width: 100%; }

.vital {
  display: block;
  width: 86px;
  height: 8px;
  margin: 4px 0 2px;
  background: #e7ddc9;
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
}
.vital-fill { display: block; height: 100%; width: 100%; transition: width 0.2s linear; }
.vital-health { background: #d9534f; }
.vital-mood { background: #e8a33a; }

.shop-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.cycle-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 8px;
}
.cycle-dial { width: 64px; height: 64px; }
.phase-line {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}
.phase-line.is-night { color: #6a5fd0; font-weight: 700; }
.shop-toggle {
  font: inherit;
  font-size: 14px;
  font-weight: 900;
  padding: 8px 16px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.shop-drawer {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  padding: 12px 14px;
  margin-top: 12px;
  animation: shop-open 0.22s ease-out;
}
@keyframes shop-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
/* The food shop's own picture, hanging over its shelves. */
.shop-banner {
  display: block;
  width: 100%;
  height: 128px;
  object-fit: cover;
  border: 2px solid #e9d9b4;
  border-radius: 10px;
  margin: 2px 0 10px;
}
.shop-banner[hidden] { display: none; }

.panel {
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}
.panel h2 {
  margin: 0 0 8px;
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 3px solid var(--gold);
  padding-bottom: 6px;
}
.panel-sub { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }

.work-btn {
  width: 100%;
  padding: 16px 12px;
  font: inherit;
  font-size: 20px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, #6cc477, var(--green-dark));
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
}
.work-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.work-pay { font-size: 14px; font-weight: 700; }
.goal-line { font-size: 13px; font-weight: 700; margin: 10px 0; min-height: 18px; }

.list { display: flex; flex-direction: column; gap: 10px; }
.row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
.row:hover { transform: translateY(-1px); box-shadow: 2px 3px 0 rgba(38, 34, 31, 0.35); }
.row-info { min-width: 0; }
.row-name { font-weight: 900; font-size: 15px; }
.row-sub { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.row-meta { font-size: 12.5px; font-weight: 700; margin-top: 3px; color: var(--green-dark); }
.row-btn {
  font: inherit;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
  padding: 9px 12px;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  border: 2px solid var(--ink);
  border-radius: 9px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.row-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.row-btn:disabled { background: #ddd6c4; color: #8a8378; cursor: not-allowed; box-shadow: none; }
.row-btn.is-active { background: var(--green); color: #fff; }

.intro-card {
  max-width: 600px;
  margin: 16px auto 0;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 16px 18px;
  text-align: center;
}
.intro-card h2 { margin: 0 0 8px; font-size: 21px; text-transform: uppercase; letter-spacing: 1px; }
.intro-card p { margin: 6px 0; font-size: 14.5px; line-height: 1.5; }
.intro-btn { margin-top: 10px; background: var(--green); color: #fff; }

.row.is-locked { opacity: 0.55; }

/* The friends drawer: the crew, the rival, and the story log. */
.friends-heading {
  margin: 14px 0 8px;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 3px solid var(--gold);
  padding-bottom: 5px;
}
.friends-heading:first-child { margin-top: 0; }
.friends-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; }
.friend-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 9px 10px;
  background: #fff;
  margin-bottom: 10px;
}
.friends-list .friend-card { margin-bottom: 0; }
.friend-card.is-locked { opacity: 0.55; }
.friend-rival { border-color: var(--red-deep); }
.friend-medal {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 19px;
}
.friend-avatar {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  object-fit: cover;
  image-rendering: pixelated;
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
}
/* A friend not yet met is a face in shadow: the portrait
   stands on the card greyed and darkened, on top of the
   locked card's own fade. */
.friend-card.is-locked .friend-avatar {
  filter: grayscale(1) brightness(0.55) contrast(1.15);
}
.friend-info { min-width: 0; }
.friend-name { font-weight: 900; font-size: 15px; }
.friend-role {
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--green-dark);
  margin-top: 1px;
}
.friend-story { font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
.friend-bonus { font-size: 12.5px; font-weight: 700; margin-top: 3px; color: var(--green-dark); }
.friend-goal { font-size: 12.5px; font-weight: 700; margin-top: 3px; color: var(--muted); }
.friend-progress { font-size: 12.5px; font-weight: 700; margin-top: 2px; }

.howto p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.5; }
.howto p:last-child { margin-bottom: 0; }

.qty-bar { display: flex; gap: 6px; align-items: center; margin: 0 0 10px; flex-wrap: wrap; }
.qty-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; }
.qty-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 6px 12px;
  min-height: 36px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.qty-btn.is-active { background: var(--ink); color: var(--gold); }
.effect-neg { color: #b03a2e; font-weight: 700; }

/* The Captain cutscene plays as a pop up over the page, so it is
   never missed because the page was scrolled somewhere else. The
   canvas itself moves into the modal while the story plays. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(24, 18, 10, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}
.modal[hidden] { display: none; }
.modal-card {
  width: min(700px, 96vw);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: 6px 6px 0 var(--ink);
  padding: 14px;
}
.modal-title {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
}
.modal-card canvas { width: 100%; height: auto; display: block; }
.modal-skip { margin-top: 10px; width: 100%; min-height: 44px; }
.ad-card { text-align: center; }
.ad-img { width: 100%; aspect-ratio: 84 / 44; object-fit: cover; border-radius: 10px; display: block; }
.ad-business { margin: 10px 0 2px; font-size: 17px; font-weight: 700; }
.ad-line { margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
.ad-bar { height: 10px; background: #e5d3ac; border-radius: 6px; overflow: hidden; }
.ad-bar-fill { height: 100%; width: 0%; background: #d9a441; transition: width 0.12s linear; }
.ad-count { margin: 8px 0 10px; font-size: 13px; font-weight: 700; }
#ad-claim { width: 100%; min-height: 44px; }
#ad-skip { margin-top: 8px; }
body.modal-open { overflow: hidden; }

/* Guided tour: a small card that walks new players around the
   page, one glowing stop at a time. */
/* Early game hint card: floats in the middle of the screen,
   fades in, holds, fades out. Never takes a tap. */
.hint-toast {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 60;
  width: min(420px, calc(100vw - 40px));
  background: #fff7e0;
  border: 3px solid #d9a441;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(30, 20, 0, 0.35);
  padding: 16px 18px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
  pointer-events: none;
}
.hint-toast.is-visible {
  opacity: 1;
  visibility: visible;
}
.achievement-toast {
  position: fixed;
  left: 50%;
  top: 16px;
  transform: translate(-50%, -8px);
  z-index: 61;
  width: min(420px, calc(100vw - 40px));
  background: #241538;
  border: 3px solid #e8c33a;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(10, 4, 24, 0.5);
  padding: 12px 18px 14px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease, transform 0.6s ease;
  pointer-events: none;
}
.achievement-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}
.achievement-kicker {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff5da2;
}
.achievement-toast h3 {
  margin: 0 0 4px;
  font-size: 19px;
  color: #ffd94d;
}
.achievement-toast p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #fff8ea;
}
.hint-toast h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: #6b4e12;
}
.hint-toast p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #4a3a14;
}

.tour-card {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 14px;
  z-index: 55;
  width: min(480px, 94vw);
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 14px;
}
.tour-step {
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #b03a2e;
}
.tour-card h3 { margin: 0 0 6px; font-size: 19px; }
.tour-card p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.5; }
.tour-btns { display: flex; gap: 8px; }
.tour-btns .qty-btn { min-height: 42px; }
#tour-next { background: var(--ink); color: var(--gold); }
#tour-end { margin-left: auto; }
.tour-highlight {
  outline: 4px solid #b03a2e;
  outline-offset: 3px;
  box-shadow: 0 0 0 8px rgba(232, 195, 58, 0.55), 6px 6px 0 var(--ink);
  position: relative;
  z-index: 5;
}

.work-btn.pulse { animation: work-pulse 0.18s ease-out; }
@keyframes work-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(0.965); }
  100% { transform: scale(1); }
}

/* Every button answers a press with a quick squash and brighten,
   so a click never feels ignored, in the shop above all. */
button { transition: transform 0.07s ease-out, filter 0.07s ease-out; }
button:active { transform: scale(0.94); filter: brightness(1.13); }

/* Stat changes float up in the middle of the screen and fade:
   what a purchase did to him, shown the moment it lands. */
#floaters {
  position: fixed;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  z-index: 40;
}
.floater {
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.35;
  text-shadow: 0 2px 0 rgba(26, 22, 18, 0.85), 0 0 10px rgba(26, 22, 18, 0.5);
  animation: float-up 1.5s ease-out forwards;
}
.floater span { display: block; }
.floater .good { color: #7be495; }
.floater .bad { color: #ff8a7a; }
.floater .buff { color: var(--gold); }
@keyframes float-up {
  0% { opacity: 0; transform: translateY(10px) scale(0.9); }
  12% { opacity: 1; transform: translateY(0) scale(1.05); }
  25% { transform: translateY(-4px) scale(1); }
  100% { opacity: 0; transform: translateY(-46px) scale(1); }
}

/* Blocked actions explain themselves in a card mid screen:
   why not, and when it will work again. Tap it to dismiss. */
#action-popup {
  position: fixed;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  z-index: 50;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 7px 7px 0 var(--ink);
  padding: 14px 20px;
  max-width: min(88vw, 340px);
  text-align: center;
  cursor: pointer;
  animation: popup-in 0.16s ease-out;
}
#action-popup-title { font-weight: 800; font-size: 1.15rem; margin: 0 0 4px; }
#action-popup-text { margin: 0; color: var(--muted); }
@keyframes popup-in {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .shop-drawer { animation: none; }
  .work-btn.pulse { animation: none; }
  .floater { animation: none; }
  #action-popup { animation: none; }
  .vital-fill, .study-fill { transition: none; }
}

.footer {
  max-width: var(--shell);
  margin: 0 auto 26px;
  padding: 0 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 13px;
}

.city-bar {
  max-width: var(--shell);
  margin: 16px auto 0;
  padding: 0 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.city-chip {
  font: inherit;
  font-weight: 900;
  font-size: 14px;
  padding: 9px 14px;
  background: var(--panel);
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.city-chip.is-active { background: linear-gradient(180deg, #6f97e8, var(--blue)); color: #fff; }
.city-chip:disabled { cursor: default; }
.city-chip:not(.is-active):disabled { background: #ddd6c4; color: #8a8378; box-shadow: none; }
.city-line {
  max-width: var(--shell);
  margin: 8px auto 0;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 700;
}

.view-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  flex-wrap: wrap;
}
.view-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; font-weight: 900; }
.view-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 7px 12px;
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 8px;
  box-shadow: 2px 2px 0 var(--ink);
  cursor: pointer;
}
.view-btn.is-active { background: var(--ink); color: var(--gold); }

/* The tab bar over the three big lists: Work, School and
   Business. One panel shows at a time; the picked tab wears
   the same ink and gold as a picked camera button. */
.tab-bar {
  display: flex;
  gap: 8px;
}
.tab-btn {
  flex: 1;
  font: inherit;
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  min-height: 48px;
  padding: 10px 8px;
  background: var(--panel);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 10px;
  box-shadow: 3px 3px 0 var(--ink);
  cursor: pointer;
}
.tab-btn.is-active { background: var(--ink); color: var(--gold); }
.tab-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
[data-tab-panel][hidden] { display: none; }

.study-banner {
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #dff3e2;
  box-shadow: 3px 3px 0 var(--ink);
  padding: 9px 11px;
  margin-bottom: 12px;
  font-weight: 900;
  font-size: 14px;
}
.study-track {
  margin-top: 7px;
  height: 10px;
  border: 2px solid var(--ink);
  background: #fff;
}
.study-fill { height: 100%; width: 0; background: var(--green); transition: width 0.15s linear; }
.work-btn:disabled { background: #a8b8a4; cursor: wait; }
.reset-btn {
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  background: none;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.reset-btn:hover { background: var(--red); color: #fff; }

/* Phones: one column, big tap targets, nothing sideways. */
@media (max-width: 640px) {
  .topbar { padding: 10px 12px; gap: 10px; }
  .topbar-inner { gap: 10px; }
  .brand h1 { font-size: 21px; }
  .tagline { font-size: 12.5px; }
  .stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
  .stat { min-width: 0; padding: 5px 9px; box-shadow: 2px 2px 0 var(--ink); }
  .stat-value { font-size: 15px; }
  .vital { width: 100%; }

  .city-bar {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .city-bar::-webkit-scrollbar { display: none; }
  .city-chip { flex: 0 0 auto; font-size: 13px; padding: 10px 12px; }
  .city-line { font-size: 12.5px; }

  .scene-wrap { padding: 0 10px; margin-top: 12px; }
  #scene { box-shadow: 4px 4px 0 var(--ink); }
  /* Camera becomes one segmented row: three equal buttons, no wrap. */
  .view-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .view-label { display: none; }
  .view-btn { min-height: 44px; width: 100%; padding: 8px 4px; font-size: 12.5px; }
  .shop-bar { flex-direction: column; align-items: stretch; }
  .shop-toggle { min-height: 48px; width: 100%; padding: 10px 18px; font-size: 15px; }
  .shop-drawer { padding: 10px; }

  .controls { padding: 0 10px; gap: 12px; margin-top: 14px; }
  .tab-bar { gap: 6px; }
  .tab-btn { min-height: 54px; font-size: 14px; padding: 10px 4px; }
  .panel { padding: 12px; box-shadow: 4px 4px 0 var(--ink); }
  .panel h2 { font-size: 17px; }

  .work-btn { font-size: 19px; padding: 18px 10px; }

  .row { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px; }
  .row-btn { width: 100%; min-height: 46px; font-size: 15px; text-align: center; }
  .tile-btn { min-height: 54px; font-size: 15px; padding: 10px 6px; }
  .row-name { font-size: 15.5px; }
  .qty-btn { min-height: 40px; }

  .footer { flex-direction: column; align-items: flex-start; }
}

/* The outfit boutique: a grid of little potato cards */
.outfit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.outfit-sec {
  grid-column: 1 / -1;
  font-weight: bold;
  font-size: 13px;
  color: #6b4a2a;
  margin-top: 4px;
}
.outfit-card {
  background: #fff8ea;
  border: 2px solid #e5d3ac;
  border-radius: 10px;
  padding: 8px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.outfit-swatch {
  width: 42px;
  height: 36px;
  image-rendering: pixelated;
}
.outfit-name {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.25;
  min-height: 30px;
}
.outfit-meta {
  font-size: 12px;
  color: #6b4a2a;
}
.outfit-buy {
  min-height: 34px;
  padding: 4px 10px;
  font-size: 13px;
}

/* --- picture tiles: the lists became grids ------------------------
   One option per tile, a little picture on top, the words in
   the middle, the button at the bottom. Four across on a wide
   screen, two on a phone, and far less scrolling everywhere. */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 8px;
}
.tile {
  background: #fffdf4;
  border: 2px solid #e9d9b4;
  border-radius: 12px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tile-pic {
  width: 100%;
  height: auto;
  aspect-ratio: 84 / 44;
  object-fit: cover;
  border-radius: 7px;
  background: #bfe3ef;
  image-rendering: pixelated;
  display: block;
}
.tile-name { font-weight: bold; font-size: 12.5px; line-height: 1.2; }
.tile-sub { font-size: 11px; color: #77572e; line-height: 1.3; }
.tile-meta { font-size: 11px; color: #77572e; line-height: 1.3; }
.tile .tile-sub { flex: 1; }
.tile-btn { min-height: 48px; font-size: 14px; padding: 9px 6px; width: 100%; white-space: normal; line-height: 1.25; text-align: center; }

/* --- phones: two tiles per row, pictures full width --------------
   The owner asked for the business tiles bigger on mobile;
   the shared grid takes the jobs and the school with it, so
   every picture list reads the same way on a phone. */
@media (max-width: 700px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tile-grid .tile-pic {
    width: 100%;
    height: auto;
  }
}

/* --- wide screens: one shell, aligned rows ----------------------
   Above 1100px the page stops reading as a tall phone page.
   The shell (var(--shell)) already centres everything; here the
   city chips centre their rows, the showroom facts move under
   the scene, the control panels line up in rows whose bottoms
   agree, and the shop and boutique spread into even grids.
   Below this width none of it applies: the phone layout, with
   its 860px and 640px breakpoints, behaves exactly as before. */
@media (min-width: 1101px) {
  /* City chips: centred rows, so a wrapped row never leaves
     a ragged tail with a hole at one end. */
  .city-bar { justify-content: center; }
  .city-line { text-align: center; }

  /* The showroom strip: four cards across, in the flow. */
  .showroom-stats:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 12px;
  }

  /* Sections in aligned rows on a 12 column grid: Work beside
     School, Businesses wide with three tiles across, Investors
     beside Achievements, How to play wide with its text in two
     columns so the lines stay readable. Stretch makes the
     bottoms of each row agree. */
  .controls {
    grid-template-columns: repeat(12, 1fr);
    align-items: stretch;
  }
  /* The study banner and the tab bar sit above the panels
     and run the full width of the grid. */
  .study-banner, .tab-bar { grid-column: 1 / -1; }
  .panel-work { grid-column: span 6; }
  #panel-school { grid-column: span 6; }
  #panel-business { grid-column: span 12; }
  #panel-investors { grid-column: span 6; }
  .panel-achievements { grid-column: span 6; }
  .panel-howto { grid-column: span 12; }
  .panel-howto .howto { columns: 2; column-gap: 30px; }
  #business-list { grid-template-columns: repeat(3, 1fr); }

  /* The food shop: five wide tiles to a row, names held to two
     lines so every card in the row matches, and every buy
     button one line tall with its full price inside. */
  #shop-list { grid-template-columns: repeat(5, 1fr); }
  #shop-list .tile-name {
    min-height: 30px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  #shop-list .tile-btn { white-space: nowrap; }

  /* The boutique: six cards to a row, and because the row is
     a centred flex wrap, a part full last row centres itself
     instead of stranding one lonely card at the left edge. */
  .outfit-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  .outfit-sec { flex: 1 1 100%; }
  .outfit-card { flex: 0 1 calc((100% - 40px) / 6); }
  .outfit-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}