/* ==========================================================================
   STARDEW VALLEY WIKI — PIXEL DESIGN SYSTEM
   Stardew's menu boxes rebuilt in CSS: a dark ink outline with notched
   ("pixel-rounded") corners, a wooden band, parchment inside, and hard
   offset shadows that are never blurred. Radii are zero everywhere; the only
   "rounding" is the one-pixel notch the outline leaves at each corner.

   The notch trick: four box-shadows, each pushed out by one pixel on a single
   side, draw the outline but leave the four corner squares empty.
   ========================================================================== */

:root {
  /* --- One "game pixel". Every border, notch and shadow is a multiple. --- */
  --px: 3px;

  /* --- Ink & wood --- */
  --ink: #2b1408;
  --wood-900: #4a2410;
  --wood-700: #7a3d14;
  --wood-500: #b8652a;
  --wood-300: #e0a35a;

  /* --- Parchment surfaces (lightest = cards, darker = insets/panels) --- */
  --parch-50: #fff8e6;
  --parch-100: #fdebc4;
  --parch-200: #f6d79a;
  --parch-300: #e2b872;

  /* --- Text. Muted is >= 7:1 on --parch-50 and >= 5.5:1 on --parch-200 --- */
  --text: #2b1408;
  --text-muted: #6b4423;
  --text-light: #fff8e6;

  /* --- Game accents --- */
  --gold: #ffcd38;
  --gold-dark: #c98a10;
  --green: #6abe30;
  --green-dark: #2f7a2f;
  --red: #d64532;
  --red-dark: #8e1f12;
  --blue: #5b9be0;
  --blue-dark: #1f4f8f;
  --purple: #9a62d0;
  --purple-dark: #4a1f7a;
  --orange: #e8822a;
  --teal: #3fb5a3;

  /* --- Structure --- */
  --frame:
    0 calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 0 var(--ink),
    calc(var(--px) * -1) 0 0 0 var(--ink),
    var(--px) 0 0 0 var(--ink);
  --bevel:
    inset var(--px) var(--px) 0 0 rgba(255, 255, 255, 0.45),
    inset calc(var(--px) * -1) calc(var(--px) * -1) 0 0 rgba(43, 20, 8, 0.12);
  --drop: calc(var(--px) * 2) calc(var(--px) * 2) 0 0 rgba(20, 8, 2, 0.55);
  --drop-lg: calc(var(--px) * 3) calc(var(--px) * 3) 0 0 rgba(20, 8, 2, 0.55);
  --lift: 0 calc(var(--px) * 2) 0 0 var(--ink);

  /* --- Type: VT323 is a true pixel face and ships a Vietnamese subset --- */
  --font: 'VT323', ui-monospace, monospace;

  /* --- Motion: short steps, nothing eased over long durations --- */
  --t: 0.1s steps(2, end);

  /* --- Season (spring default) --- */
  --bg: #3f7f3a;
  --bg-dither: rgba(0, 0, 0, 0.09);
  --season: #ff8fb1;
}

:root[data-season='summer'] { --bg: #2f8a4a; --season: #ffcd38; }
:root[data-season='fall']   { --bg: #8a4a1c; --season: #e8822a; }
:root[data-season='winter'] { --bg: #3d5f80; --season: #9fd3ff; --bg-dither: rgba(255, 255, 255, 0.07); }

/* ==========================================================================
   RESET & BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Class rules set display on many elements; `hidden` must still win */
[hidden] { display: none !important; }

html {
  font-size: 21px; /* VT323 is drawn on a pixel grid; this size keeps it crisp */
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  color: var(--text);
  line-height: 1.35;
  letter-spacing: 0.02em;
  min-height: 100vh;
  overflow-x: hidden;
  background-color: var(--bg);
  transition: background-color 0.3s steps(3, end);
}

/* 2x2 checker dither, like the grass tiles. It sits on a fixed layer so the
   page scrolls over it (background-attachment: fixed is ignored on iOS). */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: repeating-conic-gradient(var(--bg-dither) 0 25%, transparent 0 50%);
  background-size: 12px 12px;
}

button, input, select, textarea {
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}
button { cursor: pointer; background: none; border: 0; }
button:disabled { cursor: not-allowed; }

h1, h2, h3, h4 { font-weight: 400; line-height: 1.1; }
p + p { margin-top: 0.4rem; }
a { color: var(--blue-dark); }
code {
  background: var(--parch-200);
  padding: 0 4px;
  outline: 1px solid var(--parch-300);
}

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: var(--px) solid var(--gold);
  outline-offset: calc(var(--px) * 2);
}

.pixel-img {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.muted { color: var(--text-muted); font-size: 0.85rem; }
.muted-strong { color: var(--wood-700); font-size: 0.85rem; }

/* Pixel scrollbar */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--wood-900); }
::-webkit-scrollbar-thumb {
  background: var(--wood-300);
  border: var(--px) solid var(--wood-900);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

#seasonCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
}

.app {
  position: relative;
  z-index: 2;
  max-width: 1380px;
  margin: 0 auto;
  padding: 18px 22px 60px;
}

/* ==========================================================================
   PRIMITIVES
   ========================================================================== */

/* --- Panel: the menu box everything else is built from --- */
.panel,
.card,
.stat-card,
.modal__box {
  background: var(--parch-50);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop), var(--bevel);
}

.panel {
  padding: 18px 20px;
  margin-bottom: 24px;
}
.panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: var(--px) dashed var(--parch-300);
}
.panel__title { font-size: 1.45rem; color: var(--wood-900); }
.panel__hint { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 14px; }

/* --- Inset box: recessed parchment inside a panel --- */
.inset-box {
  background: var(--parch-100);
  border: var(--px) solid var(--parch-300);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(43, 20, 8, 0.08);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.inset-box--plain { background: var(--parch-50); }
.inset-box__title {
  font-size: 1.15rem;
  color: var(--wood-700);
  margin-bottom: 8px;
}

/* --- Buttons. Press = the button sinks into its own bottom edge --- */
.btn,
.chip,
.seg-btn,
.check-btn,
.qty__btn,
.modal-close-btn {
  --btn-bg: var(--parch-200);
  --btn-fg: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow:
    var(--frame),
    var(--lift),
    inset 0 calc(var(--px) * -1) 0 0 rgba(0, 0, 0, 0.22),
    inset 0 var(--px) 0 0 rgba(255, 255, 255, 0.4);
  transition: transform var(--t), filter var(--t);
  white-space: nowrap;
  user-select: none;
}
.btn:hover,
.chip:hover,
.seg-btn:hover,
.check-btn:hover,
.qty__btn:hover,
.modal-close-btn:hover { filter: brightness(1.08); }

.btn:active,
.chip:active,
.seg-btn:active,
.check-btn:active,
.qty__btn:active,
.modal-close-btn:active,
.card--clickable:active {
  transform: translateY(var(--px));
  box-shadow:
    var(--frame),
    0 var(--px) 0 0 var(--ink),
    inset 0 var(--px) 0 0 rgba(0, 0, 0, 0.18);
}
.seg-btn:disabled,
.btn:disabled { filter: grayscale(0.8) opacity(0.6); transform: none; }

.btn { padding: 6px 14px; font-size: 1rem; margin-bottom: calc(var(--px) * 2); }
.btn--sm { padding: 2px 10px; font-size: 0.88rem; }
.btn--lg { padding: 9px 20px; font-size: 1.1rem; }
.btn--ghost { --btn-bg: var(--parch-100); }
.btn--green { --btn-bg: var(--green); }
.btn--gold { --btn-bg: var(--gold); }
.btn--wood { --btn-bg: var(--wood-500); --btn-fg: var(--text-light); }
.btn--blue { --btn-bg: var(--blue); }
.btn--purple { --btn-bg: var(--purple); --btn-fg: #fff; }
.btn--danger { --btn-bg: var(--red); --btn-fg: #fff; }
.btn.is-playing { --btn-bg: var(--orange); }

/* Chips: filters and quick-time presets */
.chip { padding: 3px 12px; font-size: 0.95rem; }
.chip.is-active { --btn-bg: var(--gold); }

/* Segmented buttons: season, weather */
.seg { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.seg-btn { padding: 4px 12px; font-size: 1rem; margin-bottom: calc(var(--px) * 2); }
.seg-btn.is-active { --btn-bg: var(--gold); }

/* --- Pixel checkbox --- */
.px-check {
  appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: var(--parch-50);
  border: var(--px) solid var(--ink);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(43, 20, 8, 0.15);
  cursor: pointer;
  display: grid;
  place-content: center;
}
.px-check:checked { background: var(--green); box-shadow: none; }
.px-check:checked::after {
  content: '';
  width: 6px;
  height: 10px;
  margin-top: -3px;
  border: solid var(--ink);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* --- Badges, tags, pills (small labels: square, thin ink outline) --- */
.badge,
.tag,
.buff,
.count-chip,
.gift {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--parch-100);
  border: 2px solid var(--ink);
}
.badge { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.badge--v16 { background: var(--teal); }
.badge--gold { background: var(--gold); }
.badge--green { background: var(--green); }
.badge--purple { background: var(--purple); color: #fff; }
.badge--heart { background: var(--red); color: #fff; }
.badge--bday {
  background: var(--gold);
  animation: blink 1s steps(2, end) infinite;
}

.tag--blue { background: #d9ebff; }
.tag--gold { background: #fff0b3; }
.tag--green { background: #dcf5c8; }
.tag--red { background: #ffd9d2; }
.tag--orange { background: #ffe1c2; }
.tag--slate { background: #e6ebf0; }

.count-chip { background: var(--wood-700); color: var(--text-light); border-color: var(--ink); }

.buff { background: #e3f6d6; }
.buff--speed { background: #d9ebff; }
.buff--luck { background: #fff0b3; }
.buff--special { background: #efe0ff; }

.pill-row { display: flex; flex-wrap: wrap; gap: 6px; }

.section-label {
  font-size: 0.95rem;
  color: var(--wood-700);
  margin-bottom: 6px;
}
.section-label--red { color: var(--red-dark); }

/* --- Icon frames --- */
.icon-box {
  position: relative;
  flex-shrink: 0;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 4px;
  background: var(--parch-100);
  border: var(--px) solid var(--ink);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(255, 255, 255, 0.6);
}
.icon-box img { width: 100%; height: 100%; object-fit: contain; }
.icon-box__emoji { display: none; font-size: 1.6rem; line-height: 1; }
.icon-box.is-broken img { display: none; }
.icon-box.is-broken .icon-box__emoji { display: block; }
.icon-box--sm { width: 40px; height: 40px; }
.icon-box--sm .icon-box__emoji { font-size: 1.2rem; }
.icon-box--lg { width: 76px; height: 76px; }
.icon-box--lg .icon-box__emoji { font-size: 2.4rem; }

.portrait {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: var(--wood-300);
  border: var(--px) solid var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--wood-500);
  overflow: hidden;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--lg { width: 88px; height: 88px; }

/* Ingredient icon: hidden entirely when the image is missing */
.ing-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
}
.ing-icon img { width: 100%; height: 100%; object-fit: contain; }
.ing-icon--md { width: 32px; height: 32px; }
.ing-icon.is-broken { display: none; }

/* ==========================================================================
   HERO
   ========================================================================== */

.hero {
  position: relative;
  height: 280px;
  margin-bottom: 26px;
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop-lg);
  background: var(--wood-900);
  overflow: hidden;
}
.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 38%;
  image-rendering: pixelated;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 22px 28px;
  /* Hard-stepped fade instead of a smooth gradient */
  background: linear-gradient(180deg,
    transparent 0 35%,
    rgba(43, 20, 8, 0.35) 35% 55%,
    rgba(43, 20, 8, 0.65) 55% 75%,
    rgba(43, 20, 8, 0.85) 75%);
}
.hero__brand { display: flex; align-items: center; gap: 16px; }
.junimo {
  width: 64px;
  height: 64px;
  animation: hop 1.2s steps(2, end) infinite;
}
.hero__title {
  font-size: 2.6rem;
  color: var(--text-light);
  text-shadow:
    var(--px) 0 0 var(--ink), calc(var(--px) * -1) 0 0 var(--ink),
    0 var(--px) 0 var(--ink), 0 calc(var(--px) * -1) 0 var(--ink),
    var(--px) var(--px) 0 var(--ink), var(--px) calc(var(--px) * 2) 0 var(--ink);
}
/* Each phrase wraps as a whole ("Co-op" never splits at its hyphen) */
.hero__subtitle span { white-space: nowrap; }
.hero__subtitle {
  color: var(--gold);
  font-size: 1.05rem;
  text-shadow: 2px 2px 0 var(--ink);
}
/* Season/audio group on the left, the coffee button pinned to the right */
.hero__bar {
  flex-basis: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.hero__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 8px;
  padding: 8px 10px 4px;
  background: var(--wood-900);
  box-shadow: var(--frame);
}
.hero__controls .seg-btn { font-size: 0.95rem; }

.hero__extras { display: flex; flex-wrap: wrap; gap: 10px; }

.btn--notes {
  --btn-bg: var(--parch-100);
  --btn-fg: var(--ink);
  position: relative;
  padding: 7px 14px;
  font-size: 1.05rem;
}
/* Unread teammate notes */
.notes-dot {
  display: none;
  position: absolute;
  top: -6px;
  right: -6px;
  width: 12px;
  height: 12px;
  background: var(--red);
  box-shadow: 0 0 0 2px var(--ink);
}
.btn--notes.has-unread .notes-dot { display: block; animation: blink 1s steps(2, end) infinite; }

.modal__box--notes { width: min(680px, 100%); }
.note-input { width: 100%; resize: vertical; min-height: 150px; line-height: 1.4; }
.note-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: -8px 0 18px; font-size: 0.9rem; }
.note-count { color: var(--text-muted); }
.note-count.is-full { color: var(--red-dark); }
.team-notes { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.team-note { padding: 8px 12px; background: var(--parch-100); border: 2px solid var(--parch-300); }
.team-note__head { display: flex; justify-content: space-between; gap: 10px; font-size: 0.92rem; margin-bottom: 4px; }
.team-note__head strong { font-weight: 400; color: var(--wood-900); }
.team-note__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 1rem; }

.btn--coop {
  --btn-bg: var(--teal);
  --btn-fg: var(--ink);
  padding: 7px 14px;
  font-size: 1.05rem;
}

.btn--coffee {
  --btn-bg: var(--orange);
  --btn-fg: var(--ink);
  padding: 7px 14px;
  font-size: 1.05rem;
}
.coffee-cup { width: 28px; height: 28px; margin: -4px 0; }

/* ==========================================================================
   MINES
   A shaft drawn to scale: each zone is a band positioned by floor
   (--from/--to as % of the deepest floor); milestones sit at --at.
   ========================================================================== */

.mines-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.mines-layout__shaft { position: sticky; top: 12px; }

/* Zone theme colours: band fill, band shade, card header */
.shaft__band--earth, .zone--earth { --zc: #a0703c; --zd: #6b4423; }
.shaft__band--ice, .zone--ice { --zc: #8fd0ec; --zd: #3d7fa8; }
.shaft__band--lava, .zone--lava { --zc: #e0603a; --zd: #8e1f12; }
.shaft__band--dark, .zone--dark { --zc: #6b5a8a; --zd: #3a2d52; }
.shaft__band--desert, .zone--desert { --zc: #e0b062; --zd: #a06a24; }
.shaft__band--volcano, .zone--volcano { --zc: #c0392b; --zd: #5c1a0f; }
.shaft__band--quarry, .zone--quarry { --zc: #a6a9ad; --zd: #5d6066; }

.shaft { display: flex; flex-direction: column; gap: 12px; }
.shaft__column {
  position: relative;
  height: 560px;
  margin-left: 30px;
  background: var(--wood-900);
  border: var(--px) solid var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--wood-700);
}
.shaft__band {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--from);
  height: calc(var(--to) - var(--from));
  display: grid;
  place-items: center;
  /* Dithered rock texture in the zone colour */
  background:
    repeating-conic-gradient(rgba(0, 0, 0, 0.14) 0 25%, transparent 0 50%) 0 0 / 8px 8px,
    var(--zc);
  border-bottom: var(--px) solid var(--zd);
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
  transition: filter var(--t);
}
.shaft__band:hover { filter: brightness(1.12); }
/* Label on the left, markers on the right: never overlap */
.shaft__band-label {
  justify-self: start;
  max-width: calc(100% - 72px);
  padding-left: 8px;
  font-size: 1rem;
  line-height: 1.1;
  text-align: left;
}
.shaft--endless .shaft__band-label { max-width: none; justify-self: center; text-align: center; }

.shaft__tick {
  position: absolute;
  left: -30px;
  top: var(--at);
  width: 24px;
  border-top: 2px solid var(--parch-300);
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text-muted);
  text-align: left;
}
.shaft__tick--major { border-top-color: var(--wood-700); }
.shaft__marker {
  position: absolute;
  right: 6px;
  top: var(--at);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 3px;
  height: 28px;
  background: var(--parch-50);
  box-shadow: var(--frame);
  pointer-events: auto;
}
.shaft__marker img { width: 22px; height: 22px; }

.shaft--endless .shaft__band {
  position: static;
  height: 90px;
  border: var(--px) solid var(--ink);
  border-bottom-width: 0;
}
.shaft__abyss {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 0;
  color: var(--parch-100);
  background: linear-gradient(var(--wood-900), #000);
  border: var(--px) solid var(--ink);
  border-top: 0;
}
.shaft__legend { display: flex; flex-wrap: wrap; gap: 6px 12px; font-size: 0.8rem; color: var(--text-muted); }

/* Area intro */
.mine-intro { display: flex; gap: 16px; align-items: flex-start; }
.mine-intro__icon img { width: 64px; height: 64px; }
.mine-intro__facts { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font-size: 0.92rem; }
.mine-area-title { font-size: 1.4rem; color: var(--text-light); text-shadow: 2px 2px 0 var(--ink); margin: 8px 0 12px; }

/* Zone cards */
.zone {
  margin-bottom: 26px;
  background: var(--parch-50);
  border: var(--px) solid var(--zd);
  box-shadow: var(--frame), var(--drop), var(--bevel);
}
.zone.is-flash { animation: flash 0.3s steps(2, end) 3; }
.zone__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #fff;
  text-shadow: 2px 2px 0 var(--ink);
  background:
    repeating-conic-gradient(rgba(0, 0, 0, 0.14) 0 25%, transparent 0 50%) 0 0 / 8px 8px,
    var(--zc);
  border-bottom: var(--px) solid var(--zd);
}
.zone__floors { font-size: 0.9rem; letter-spacing: 0.06em; }
.zone__title { font-size: 1.6rem; }
.zone__title small { font-size: 0.9rem; opacity: 0.9; }
.zone__head .badge { text-shadow: none; color: var(--ink); }
.mines-layout__shaft .panel__title { font-size: 1.2rem; }
.zone__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; }
.zone__desc { font-size: 1rem; }
.zone__section-title { font-size: 1.1rem; color: var(--wood-700); margin-bottom: 8px; }

.mine-items { display: flex; flex-wrap: wrap; gap: 8px; }
.mine-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  font-size: 0.92rem;
  background: var(--parch-100);
  border: 2px solid var(--ink);
}
.mine-item .game-icon { width: 24px; height: 24px; }
.mine-item__note { font-size: 0.78rem; color: var(--text-muted); }
.mine-item.is-hit, .monster.is-hit { outline: var(--px) solid var(--gold); outline-offset: 1px; }

.monsters { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.monster {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 6px 10px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
}
.monster__sprite {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: var(--wood-900);
  border: 2px solid var(--ink);
}
.monster__sprite img { width: 36px; height: 36px; object-fit: contain; }
.monster__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.monster__name { font-size: 1rem; }
.monster__drops { font-size: 0.85rem; color: var(--green-dark); }

.milestones { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.milestone {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background: #fff3cf;
  border: 2px solid var(--ink);
  border-left: calc(var(--px) * 3) solid var(--gold-dark);
  font-size: 0.95rem;
}
.milestone__floor { min-width: 72px; color: var(--wood-900); }
.milestone strong { font-weight: 400; color: var(--wood-900); }

/* ==========================================================================
   MAP
   The image is scaled with transform: scale(n) for whole n only, and drawn
   pixelated, so map pixels stay square. Hotspots/portraits sit in an overlay
   positioned in screen pixels (they don't scale with the map).
   ========================================================================== */

.map-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 24px;
  margin-bottom: 14px;
}
.map-bar__zoom { display: flex; align-items: center; gap: 8px; }
.map-bar__zoom-label { min-width: 34px; text-align: center; }
.map-bar__time { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; flex: 1; min-width: 260px; }
.map-bar__time .px-range { flex: 1; min-width: 140px; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }

.map-viewport {
  position: relative;
  overflow: hidden;
  height: 520px;
  background: #1d3b5c;
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.map-viewport:active { cursor: grabbing; }
.map-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  image-rendering: pixelated;
  pointer-events: none;
}
.map-overlay { position: absolute; inset: 0; pointer-events: none; }

.map-spot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
}
.map-spot__pin {
  width: 12px;
  height: 12px;
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--ink), 2px 2px 0 2px rgba(0, 0, 0, 0.4);
}
.map-spot--shop .map-spot__pin { background: var(--gold); }
.map-spot--home .map-spot__pin { background: var(--orange); }
.map-spot--landmark .map-spot__pin, .map-spot--area .map-spot__pin { background: var(--teal); }
.map-spot__label {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 1px 6px;
  font-size: 0.85rem;
  color: var(--ink);
  background: var(--parch-50);
  box-shadow: var(--frame);
}
.map-spot:hover .map-spot__label, .map-spot:focus-visible .map-spot__label, .map-spot.is-selected .map-spot__label { display: block; }
.map-spot.is-selected .map-spot__pin { background: var(--red); }
.map-spot:hover { z-index: 3; }

.map-npcs {
  position: absolute;
  transform: translate(-50%, calc(-100% - 10px));
  display: flex;
  gap: 2px;
  pointer-events: none;
}
.map-npcs__more {
  order: 2;
  align-self: center;
  padding: 0 3px;
  font-size: 0.75rem;
  color: var(--ink);
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--ink);
}
.map-npc {
  pointer-events: auto;
  width: 26px;
  height: 26px;
  padding: 0;
  background: var(--wood-300);
  box-shadow: 0 0 0 2px var(--ink);
  transition: transform var(--t);
}
.map-npc:hover { transform: translateY(-3px) scale(1.4); z-index: 4; }
.map-npc img { width: 100%; height: 100%; object-fit: cover; }

.map-info {
  padding: 12px 14px;
  background: var(--parch-100);
  border: var(--px) solid var(--parch-300);
  max-height: 520px;
  overflow-y: auto;
}
.place { display: flex; flex-direction: column; gap: 10px; }
.place__head { display: flex; gap: 10px; align-items: center; }
.place__icon img { width: 44px; height: 44px; }
.place__title { font-size: 1.35rem; color: var(--wood-900); }
.place__row { font-size: 0.95rem; }
.place__group { display: flex; flex-direction: column; gap: 6px; }
.place__faces { display: flex; flex-wrap: wrap; gap: 8px; }
.place__face { display: inline-flex; align-items: center; gap: 4px; font-size: 0.9rem; }
.place__face img, .place__here img { width: 24px; height: 24px; box-shadow: 0 0 0 2px var(--ink); background: var(--wood-300); }
.place__here { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.place__here li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.place__here strong { font-weight: 400; color: var(--wood-900); }
.map-credit { margin: 12px 0 0; }

/* ==========================================================================
   MEMORY QUIZ
   ========================================================================== */

.quiz { max-width: 760px; margin-left: auto; margin-right: auto; }
.quiz-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  padding: 8px 12px;
  margin-bottom: 18px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
  font-size: 1rem;
}
.quiz-stats strong { font-weight: 400; color: var(--wood-900); }

.quiz-q { text-align: center; margin-bottom: 18px; }
.quiz-q__prompt { font-size: 1.1rem; color: var(--text-muted); }
.quiz-q__name { font-size: 2.4rem; line-height: 1.1; color: var(--wood-900); }
.quiz-q__en { font-size: 1rem; color: var(--text-muted); min-height: 1.3em; }

.quiz-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.quiz-option {
  --btn-bg: var(--parch-50);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px 10px;
  background: var(--btn-bg);
  box-shadow: var(--frame), var(--lift), var(--bevel);
  margin-bottom: calc(var(--px) * 2);
  transition: transform var(--t);
}
.quiz-option:not(:disabled):hover { transform: translateY(-3px); background: var(--parch-100); }
.quiz-option:not(:disabled):active { transform: translateY(var(--px)); box-shadow: var(--frame), 0 var(--px) 0 0 var(--ink); }
.quiz-option:disabled { cursor: default; }
.quiz-option img { width: 96px; height: 96px; object-fit: contain; }
.quiz-option__key {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 0.85rem;
  padding: 0 5px;
  background: var(--parch-200);
  box-shadow: 0 0 0 2px var(--ink);
}
.quiz-option__name { min-height: 1.3em; font-size: 0.95rem; text-align: center; }
.quiz-option.is-right { --btn-bg: #cfeeb4; box-shadow: var(--frame), 0 0 0 calc(var(--px) * 2) var(--green-dark); }
.quiz-option.is-wrong { --btn-bg: #ffd9d2; box-shadow: var(--frame), 0 0 0 calc(var(--px) * 2) var(--red); }
.quiz-option:disabled:not(.is-right):not(.is-wrong) img { opacity: 0.45; }

.quiz-feedback { text-align: center; margin-top: 14px; min-height: 1.6em; font-size: 1.05rem; }
.quiz-feedback strong { font-weight: 400; color: var(--wood-900); }

/* ==========================================================================
   CO-OP ROOM POPUP
   ========================================================================== */

.modal__box--coop { width: min(860px, 100%); }
.coop-title { font-size: 1.8rem; color: var(--wood-900); margin-bottom: 12px; }
.coop-intro { margin-bottom: 14px; }

.coop-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; font-size: 0.95rem; }
.coop-field--inline { margin: 12px 0 0; }
.coop-input {
  padding: 6px 10px;
  font-size: 1.1rem;
  background: #fff;
  border: var(--px) solid var(--ink);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(43, 20, 8, 0.12);
}
.coop-input:focus { outline: none; border-color: var(--gold-dark); }
.coop-input--code { font-size: 1.6rem; letter-spacing: 0.3em; text-transform: uppercase; text-align: center; }

.coop-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 14px; }
.coop-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  background: var(--parch-100);
  border: var(--px) solid var(--parch-300);
}
.coop-card__title { font-size: 1.2rem; color: var(--wood-700); }
.coop-card .btn { align-self: flex-start; }
.coop-radio { display: flex; gap: 8px; align-items: flex-start; font-size: 0.92rem; cursor: pointer; }
.coop-radio input { margin-top: 4px; accent-color: var(--green-dark); }

.coop-room {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--wood-900);
  color: var(--parch-100);
  box-shadow: var(--frame);
}
.coop-room .muted { color: var(--parch-300); }
.coop-code { font-size: 2.6rem; line-height: 1; letter-spacing: 0.25em; color: var(--gold); }

.coop-status { display: flex; align-items: center; gap: 8px; min-height: 1.4em; margin-bottom: 12px; font-size: 0.95rem; }
.coop-dot { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--ink); flex-shrink: 0; }
.coop-dot--ok { background: var(--green); }
.coop-dot--pending { background: var(--gold); animation: blink 1s steps(2, end) infinite; }
.coop-dot--offline { background: var(--orange); }
.coop-dot--error { background: var(--red); }
.coop-dot--idle { background: var(--parch-300); }

.coop-members, .coop-activity { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.coop-activity { max-height: 260px; overflow-y: auto; }
.coop-member, .coop-act {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 2px dotted var(--parch-300);
  font-size: 0.92rem;
}
.coop-act strong { font-weight: 400; color: var(--wood-900); }
.coop-act .muted, .coop-member .muted { white-space: nowrap; }
.coop-google { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.92rem; }
.coop-account strong { font-weight: 400; color: var(--wood-900); }

/* ==========================================================================
   BUY ME A COFFEE POPUP
   ========================================================================== */

.modal__box--coffee {
  width: min(380px, 100%);
  text-align: center;
}
.coffee-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.7rem;
  color: var(--wood-900);
  margin: 4px 0 22px;
}
.coffee-title img { width: 36px; height: 36px; }

.qr-frame {
  --qr: 305px; /* 61 modules incl. quiet zone x 5px: whole pixels keep modules crisp */
  position: relative;
  display: inline-block;
  padding: 10px;
  background: #fff;
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop);
}
.qr-frame__code { display: block; width: var(--qr); height: var(--qr); }

/* Centre badge: covers ~11x11 of the 53x53 data modules (about 4%),
   well inside what error-correction level Q can recover */
.qr-frame__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--qr) * 11 / 61);
  height: calc(var(--qr) * 11 / 61);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  background: #fff;
  border: var(--px) solid var(--wood-500);
  box-shadow: 0 0 0 2px var(--ink);
}
.qr-frame__badge img { width: 78%; height: 78%; }

/* Corner treats hang off the wooden frame, outside the quiet zone */
.qr-frame__corner {
  position: absolute;
  width: 34px;
  height: 34px;
  filter: drop-shadow(2px 2px 0 rgba(43, 20, 8, 0.45));
}
.qr-frame__corner--tl { left: -22px; top: -22px; transform: rotate(-12deg); }
.qr-frame__corner--tr { right: -22px; top: -22px; transform: rotate(10deg); }
.qr-frame__corner--bl { left: -22px; bottom: -22px; transform: rotate(8deg); }
.qr-frame__corner--br { right: -22px; bottom: -22px; transform: rotate(-10deg); }

.coffee-hint { margin-top: 20px; font-size: 0.95rem; color: var(--text-muted); }
.coffee-thanks { margin-top: 4px; font-size: 1rem; color: var(--green-dark); }

/* ==========================================================================
   TABS
   ========================================================================== */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 10px;
  margin-bottom: 22px;
}
.tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 1.05rem;
  color: var(--text-light);
  background: var(--wood-700);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--lift);
  margin-bottom: calc(var(--px) * 2);
  transition: transform var(--t);
}
.tab:hover { background: var(--wood-500); }
.tab.is-active {
  background: var(--parch-50);
  color: var(--ink);
  border-color: var(--gold);
  transform: translateY(calc(var(--px) * -1));
  box-shadow: var(--frame), 0 calc(var(--px) * 3) 0 0 var(--ink);
}
.tab__badge {
  font-size: 0.8rem;
  padding: 0 6px;
  background: var(--ink);
  color: var(--gold);
}
.tab.is-active .tab__badge { background: var(--red); color: #fff; }

/* ==========================================================================
   TOOLBAR
   ========================================================================== */

.toolbar { display: flex; flex-direction: column; gap: 14px; }

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  background: #fff;
  border: var(--px) solid var(--ink);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(43, 20, 8, 0.12);
}
.search__icon { font-size: 1.1rem; }
.search__input {
  flex: 1;
  min-width: 0;
  padding: 8px 0;
  font-size: 1.1rem;
  background: transparent;
  border: 0;
  outline: 0;
}
.search:focus-within { border-color: var(--gold-dark); }

.chip-group { display: flex; flex-wrap: wrap; gap: 12px 8px; }

.toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding-top: 10px;
  border-top: var(--px) dashed var(--parch-300);
}
.toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  cursor: pointer;
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 26px 24px;
  margin-bottom: 40px;
}

.card {
  display: flex;
  flex-direction: column;
  transition: transform var(--t);
}
.card:hover {
  transform: translate(calc(var(--px) * -1), calc(var(--px) * -1));
  box-shadow: var(--frame), var(--drop-lg), var(--bevel);
}
.card--clickable { cursor: pointer; }
.card.is-done { background: #eaf7dc; border-color: var(--green-dark); }

.card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  background: var(--parch-200);
  border-bottom: var(--px) solid var(--parch-300);
}
.card.is-done .card__head { background: #cfeeb4; }
.card__title-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.card__title { font-size: 1.3rem; color: var(--wood-900); }
.card__title--lg { font-size: 1.45rem; }
.card__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.check-btn {
  width: 34px;
  height: 34px;
  font-size: 1.2rem;
  color: transparent;
  margin-bottom: calc(var(--px) * 2);
}
.check-btn:hover { color: var(--text-muted); }
.card.is-done .check-btn { --btn-bg: var(--green); color: var(--ink); }

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
}
.card__body > .inset-box { margin-bottom: 0; }
.card__desc { font-size: 0.98rem; line-height: 1.4; }

.card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px 6px;
  border-top: var(--px) dashed var(--parch-300);
}
.card__foot--end { justify-content: flex-end; }

/* Ingredient list */
.ing-list { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 2px dotted var(--parch-300);
  font-size: 0.98rem;
}
.ing-row:last-child { border-bottom: 0; }
.ing-row__left { display: flex; align-items: center; gap: 8px; }
.ing-list--lg .ing-row { font-size: 1.08rem; padding: 3px 0; }
.ing-list--lg .ing-icon { width: 30px; height: 30px; }

.stat-row { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.95rem; }
.stat b { font-weight: 400; color: var(--wood-900); background: var(--parch-200); padding: 0 4px; }

.source-tag {
  font-size: 0.88rem;
  padding: 6px 10px;
  background: var(--parch-100);
  border-left: calc(var(--px) * 2) solid var(--wood-500);
}

.info-row { display: flex; gap: 6px; font-size: 0.88rem; }
.info-row--red { color: var(--red-dark); }
.info-row--green { color: var(--green-dark); }

.split-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }

.step-list { padding-left: 22px; display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; }
.step-list--lg { font-size: 1rem; gap: 8px; }
.bullet-list { padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }

/* Spoilers stay unreadable until revealed */
.is-spoiler { filter: blur(5px); user-select: none; pointer-events: none; }

/* --- Callouts: coloured notes with a thick left rule --- */
.callout {
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 2px solid var(--ink);
  border-left-width: calc(var(--px) * 3);
  background: var(--parch-100);
}
.callout p { margin-top: 4px; }
.callout__title { font-size: 1.1rem; margin-bottom: 6px; }
.callout--compact { margin-bottom: 0; font-size: 0.95rem; }
.callout--tip { background: #fff3cf; border-left-color: var(--orange); }
.callout--red { background: #ffece8; border-left-color: var(--red); }
.callout--green { background: #e9f8dc; border-left-color: var(--green-dark); }
.callout--purple { background: #f3e9ff; border-left-color: var(--purple); }
.callout--blue { background: #e5f1ff; border-left-color: var(--blue-dark); }
.callout--slate { background: #eef1f4; border-left-color: #56606b; }
.callout--pink { background: #ffe9f3; border-left-color: #c2347a; }
.callout--row { display: flex; gap: 12px; align-items: flex-start; }
.callout__big-icon { font-size: 2rem; line-height: 1; }

/* --- Empty state --- */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 50px 20px;
  color: var(--text-light);
  text-shadow: 2px 2px 0 var(--ink);
}
.empty-state__icon { font-size: 3rem; margin-bottom: 10px; }
.empty-state h3 { font-size: 1.5rem; }
.empty-state p { color: var(--parch-200); margin-top: 6px; }

/* ==========================================================================
   ITEMS: CATEGORY GROUPS & DETAIL SPECS
   ========================================================================== */

.group { margin-bottom: 34px; }
.group__head {
  margin-bottom: 18px;
  padding: 12px 16px;
  background: var(--wood-700);
  color: var(--text-light);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop);
}
.group__title-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.group__title { font-size: 1.5rem; text-shadow: 2px 2px 0 var(--ink); }
.group__desc { color: var(--parch-200); font-size: 0.92rem; margin-top: 4px; }

.spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.spec { padding: 8px 12px; border: 2px solid var(--ink); background: var(--parch-100); }
.spec__label { font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0.04em; }
.spec__value { font-size: 1.1rem; margin-top: 2px; }
.spec--gold { background: #fff3cf; }
.spec--teal { background: #dff6f1; }
.spec--blue { background: #e5f1ff; }
.spec--slate { background: #eef1f4; }
.spec--green { background: #e9f8dc; }

/* ==========================================================================
   NPC SIMULATOR
   ========================================================================== */

.sim { display: flex; flex-direction: column; gap: 16px; }
.sim__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.sim__title-group { display: flex; gap: 12px; align-items: center; }
.sim__icon {
  font-size: 1.8rem;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--gold);
  box-shadow: var(--frame);
}
.sim__title { font-size: 1.5rem; color: var(--wood-900); }
.sim__subtitle { color: var(--text-muted); font-size: 0.92rem; }
.sim__head-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.sim__top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 16px;
  align-items: start;
}

.sim-box {
  padding: 10px 14px;
  background: var(--parch-100);
  border: var(--px) solid var(--parch-300);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sim-box__label { font-size: 0.85rem; color: var(--wood-700); letter-spacing: 0.06em; }
.sim-box__note { font-size: 0.82rem; color: var(--text-muted); }

/* Calendar */
.cal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.date-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 2px 10px;
  background: var(--wood-900);
  color: var(--gold);
  box-shadow: var(--frame);
}
.date-badge__week { background: var(--gold); color: var(--ink); padding: 0 6px; font-size: 0.85rem; }

.event-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  background: #fff3cf;
  border: 2px solid var(--ink);
  border-left: calc(var(--px) * 3) solid var(--orange);
  font-size: 0.95rem;
}
.event-banner__icon { font-size: 1.4rem; }

.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal__dow { margin-bottom: 5px; }
.cal__dow span {
  text-align: center;
  font-size: 0.75rem;
  padding: 2px 0;
  background: var(--wood-700);
  color: var(--text-light);
}

.cal-cell {
  position: relative;
  min-height: 54px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: #fff;
  border: 2px solid var(--parch-300);
  transition: transform var(--t);
}
.cal-cell:hover { border-color: var(--wood-500); transform: translateY(-2px); }
.cal-cell.has-bday { background: #fff0e0; border-color: var(--orange); }
.cal-cell.has-fest { background: #fff6d0; border-color: var(--gold-dark); }
.cal-cell.is-active {
  background: var(--gold);
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--ink);
  z-index: 1;
}
.cal-cell__num { align-self: flex-start; font-size: 0.95rem; line-height: 1; }
.cal-cell__bday { position: relative; display: inline-flex; }
.cal-cell__bday img {
  width: 26px;
  height: 26px;
  object-fit: cover;
  border: 2px solid var(--ink);
  background: var(--wood-300);
}
.cal-cell__cake { position: absolute; right: -6px; bottom: -4px; font-size: 0.7rem; }
.cal-cell__fest { font-size: 1.15rem; line-height: 1; }

/* Time controller */
.time-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.time-badge {
  padding: 2px 12px;
  font-size: 1.1rem;
  background: var(--ink);
  color: var(--gold);
}
.slider-row { display: flex; align-items: center; gap: 12px; }
.quick-times { display: flex; flex-wrap: wrap; gap: 12px 8px; }

.px-range {
  flex: 1;
  appearance: none;
  height: 12px;
  background: var(--wood-700);
  border: var(--px) solid var(--ink);
  cursor: pointer;
}
.px-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 26px;
  background: var(--gold);
  border: var(--px) solid var(--ink);
  box-shadow: inset 0 calc(var(--px) * -1) 0 0 var(--gold-dark);
}
.px-range::-moz-range-thumb {
  width: 18px;
  height: 26px;
  border-radius: 0;
  background: var(--gold);
  border: var(--px) solid var(--ink);
}

/* NPC cards */
.live-loc {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 8px 12px;
  background: #ecf8e4;
  border: 2px solid var(--ink);
  border-left: calc(var(--px) * 3) solid var(--green-dark);
}
.live-loc--fest { background: #fff3cf; border-left-color: var(--orange); }
.live-loc--lg { margin-bottom: 16px; }
.live-loc__time { font-size: 0.88rem; color: var(--green-dark); }
.live-loc--fest .live-loc__time { color: var(--wood-700); }
.live-loc__short { font-size: 1.05rem; }
.live-loc__desc { font-size: 0.95rem; }

.live-dot {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  background: var(--green);
  border: 2px solid var(--ink);
  animation: blink 1s steps(2, end) infinite;
}

.gift { background: #fff; }
.gift__icon { width: 20px; height: 20px; display: grid; place-items: center; }
.gift__icon img { width: 100%; height: 100%; object-fit: contain; }
.gift__icon.is-broken { display: none; }
.gift--more { background: var(--parch-200); }
.gift--loved { background: #ffece8; }
.gift--liked { background: #e9f8dc; }
.gift--disliked { background: #f4efe3; color: var(--text-muted); }
.gift--hated { background: #ffd9d2; color: var(--red-dark); }

.gift-group + .gift-group { margin-top: 12px; }
.gift-group__title { font-size: 0.95rem; margin-bottom: 6px; }
.gift-group__title--loved { color: var(--red-dark); }
.gift-group__title--liked { color: var(--green-dark); }
.gift-group__title--disliked { color: var(--wood-700); }
.gift-group__title--hated { color: #6b0f06; }

.sched-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
  margin: 10px 0 14px;
}
.sched { padding: 10px 12px; border: 2px solid var(--ink); background: var(--parch-50); }
.sched--sunny { background: #fff8de; }
.sched--rainy { background: #e5f1ff; }
.sched--day { background: #f5eefc; }
.sched__title { font-size: 1rem; margin-bottom: 6px; }
.sched__list { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; }
.sched__list li { padding-bottom: 4px; border-bottom: 2px dotted rgba(43, 20, 8, 0.18); }

.heart-list { display: flex; flex-direction: column; gap: 8px; }
.heart-event { padding: 8px 12px; background: #fff; border: 2px solid var(--ink); }
.heart-event__head { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.heart-event p { font-size: 0.92rem; color: var(--text-muted); }

/* ==========================================================================
   PLANNER
   ========================================================================== */

.planner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 24px;
  align-items: start;
}
.planned-list { display: flex; flex-direction: column; gap: 8px; }
.planned-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
}
.planned-row__info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.planned-row__name { font-size: 1.05rem; color: var(--wood-900); }

.qty { display: flex; align-items: center; gap: 8px; padding-bottom: calc(var(--px) * 2); }
.qty__btn { width: 30px; height: 30px; font-size: 1.1rem; }
.qty__btn--danger { --btn-bg: var(--red); --btn-fg: #fff; margin-left: 4px; }
.qty__num { min-width: 30px; text-align: center; font-size: 1.15rem; }

.material-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.material {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
  cursor: pointer;
}
.material__info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.material__info .muted { display: block; }
.material__name { font-size: 1rem; }
.material__right { display: flex; align-items: center; gap: 8px; }
.material.is-done { background: #e9f8dc; border-color: var(--green-dark); }
.material.is-done .material__name { text-decoration: line-through; color: var(--green-dark); }

.panel-empty { text-align: center; padding: 30px 12px; color: var(--text-muted); }
.panel-empty--wide { grid-column: 1 / -1; }
.panel-empty__icon { font-size: 2.2rem; margin-bottom: 6px; }

/* ==========================================================================
   TRACKER
   ========================================================================== */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-bottom: 28px;
}
.stat-card { padding: 16px; text-align: center; }
.stat-card__icon { font-size: 2rem; }
.stat-card__value { font-size: 2.6rem; line-height: 1; color: var(--wood-900); }
.stat-card__label { font-size: 0.95rem; color: var(--text-muted); min-height: 2.6em; }
.stat-card__sub { font-size: 0.9rem; color: var(--wood-700); margin: 4px 0 10px; }

/* Segmented, blocky progress bar */
.progress {
  height: 18px;
  padding: 2px;
  background: var(--wood-900);
  border: 2px solid var(--ink);
}
.progress__fill {
  width: var(--pct, 0%);
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green) 0 10px, var(--green-dark) 10px 12px);
  transition: width 0.3s steps(6, end);
}

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }

/* ==========================================================================
   MODALS
   ========================================================================== */

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(20, 8, 2, 0.72);
  animation: fade-in 0.12s steps(2, end);
}
.modal__box {
  position: relative;
  width: min(820px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 26px;
  box-shadow: var(--frame), var(--drop-lg), var(--bevel);
}
.modal__box--faq { width: min(900px, 100%); }
.modal__foot { display: flex; justify-content: flex-end; margin-top: 18px; }

.modal-close-btn {
  --btn-bg: var(--red);
  --btn-fg: #fff;
  position: sticky;
  top: 0;
  float: right;
  width: 36px;
  height: 36px;
  font-size: 1.1rem;
  margin: -8px -10px 0 10px;
  z-index: 2;
}

.detail-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.detail-head__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 1.9rem;
  color: var(--wood-900);
}
.detail-head__sub { color: var(--text-muted); font-size: 1rem; }
.wiki-link { display: inline-block; margin-top: 4px; font-size: 0.88rem; }
.detail-lead { font-size: 1.08rem; line-height: 1.5; margin-bottom: 16px; }
.detail-actions { margin-top: 20px; }

/* FAQ modal pieces */
.faq-head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: var(--px) dashed var(--parch-300);
}
.faq-head__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  font-size: 1.9rem;
  box-shadow: var(--frame);
}
.faq-head__icon--blue { background: var(--blue); }
.faq-head__icon--purple { background: var(--purple); }
.faq-head__title { font-size: 1.6rem; color: var(--wood-900); }

.faq-q, .faq-a {
  padding: 10px 14px;
  margin-bottom: 14px;
  border: 2px solid var(--ink);
}
.faq-q { background: var(--parch-100); }
.faq-a { background: #e5f1ff; border-left: calc(var(--px) * 3) solid var(--blue-dark); }
.faq-q--purple { background: #f8f1ff; }
.faq-a--purple { background: #f3e9ff; border-left-color: var(--purple); }
.faq-q__label, .faq-a__label { font-size: 0.85rem; color: var(--text-muted); letter-spacing: 0.06em; }
.faq-q__text { font-size: 1.1rem; font-style: italic; }

.faq-section { font-size: 1.3rem; margin: 18px 0 10px; color: var(--wood-900); }
.faq-section--blue { color: var(--blue-dark); }
.faq-section--purple { color: var(--purple-dark); }

.tech-steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.tech-steps li {
  counter-increment: step;
  position: relative;
  padding: 8px 12px 8px 52px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
}
.tech-steps li::before {
  content: counter(step);
  position: absolute;
  left: 10px;
  top: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--gold);
  box-shadow: var(--frame);
}
.tech-steps p { font-size: 0.95rem; margin-top: 2px; }

.luck-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.luck { padding: 8px 12px; border: 2px solid var(--ink); border-left-width: calc(var(--px) * 3); }
.luck__title { font-size: 1rem; }
.luck p { font-size: 0.9rem; margin-top: 2px; }
.luck--best { background: #e6f9e0; border-left-color: var(--green-dark); }
.luck--good { background: #e5f4ff; border-left-color: var(--blue); }
.luck--neutral { background: #f1f3f5; border-left-color: #7b8794; }
.luck--bad { background: #fff6dc; border-left-color: var(--gold-dark); }
.luck--worst { background: #ffe5e0; border-left-color: var(--red); }

/* Shown only when the JS module graph failed to load */
.load-error {
  position: fixed;
  left: 50%;
  top: 20px;
  z-index: 300;
  width: min(640px, calc(100% - 40px));
  transform: translateX(-50%);
  padding: 14px 18px;
  background: #ffe5e0;
  border: var(--px) solid var(--red);
  box-shadow: var(--frame), var(--drop);
}
.load-error p { margin-top: 6px; font-size: 0.95rem; }

/* ==========================================================================
   COMMUNITY CENTER: BRANCH MAP
   Root node -> horizontal rail -> one column per room -> stem of bags.
   Connectors are plain blocks of wood colour, one "pixel" pair thick.
   ========================================================================== */

.cc-tree {
  --branch: calc(var(--px) * 2);
  --branch-c: var(--wood-700);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cc-root {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  margin-bottom: 30px;
  background: var(--gold);
  box-shadow: var(--frame), var(--lift);
}
.cc-root::after {
  content: '';
  position: absolute;
  left: 50%;
  top: calc(100% + var(--px));
  width: var(--branch);
  height: 27px;
  transform: translateX(-50%);
  background: var(--branch-c);
}
.cc-root__icon { font-size: 2rem; }
.cc-root__title { font-size: 1.4rem; }
.cc-root__sub { font-size: 0.9rem; color: var(--wood-900); }

.cc-branches {
  display: flex;
  width: 100%;
  overflow-x: auto;
  padding-bottom: 10px;
}

.cc-room {
  position: relative;
  flex: 1 1 0;
  min-width: 150px;
  padding: 26px 6px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Rail segment across the column; trimmed to the centre on the outer ends */
.cc-room::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--branch);
  background: var(--branch-c);
}
.cc-room:first-child::before { left: 50%; }
.cc-room:last-child::before { right: 50%; }
/* Drop from the rail to the room node */
.cc-room::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--branch);
  height: 26px;
  transform: translateX(-50%);
  background: var(--branch-c);
}

.cc-room__node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 170px;
  padding: 8px 6px;
  color: var(--text-light);
  background: var(--wood-700);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--lift);
  margin-bottom: calc(var(--px) * 2);
  transition: transform var(--t);
}
.cc-room__node:hover { background: var(--wood-500); }
.cc-room__node:active { transform: translateY(var(--px)); box-shadow: var(--frame), 0 var(--px) 0 0 var(--ink); }
.cc-room__icon { font-size: 1.6rem; line-height: 1; }
.cc-room__name { font-size: 1rem; text-align: center; line-height: 1.1; }
.cc-room__count { font-size: 0.8rem; padding: 0 6px; background: var(--ink); color: var(--gold); }
.cc-room.is-selected .cc-room__node { background: var(--gold); color: var(--ink); border-color: var(--gold-dark); }
.cc-room.is-done .cc-room__node { background: var(--green); color: var(--ink); border-color: var(--green-dark); }
.cc-room.is-done .cc-room__count { color: var(--green); }

/* Stem running down through the bags */
.cc-room__bundles {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 18px;
}
.cc-room__bundles::before {
  content: '';
  position: absolute;
  top: -21px;
  bottom: 24px;
  left: 50%;
  width: var(--branch);
  transform: translateX(-50%);
  background: var(--branch-c);
}

.cc-bag {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  max-width: 150px;
  padding: 6px 4px 4px;
  background: var(--parch-50);
  border: 2px solid var(--parch-300);
  box-shadow: var(--frame);
  transition: transform var(--t);
}
.cc-bag:hover { transform: translateY(-2px); border-color: var(--wood-500); }
.cc-bag .bag { width: 40px; height: 40px; }
.cc-bag__name { font-size: 0.8rem; text-align: center; line-height: 1.05; }
.cc-bag__count { font-size: 0.75rem; padding: 0 5px; background: var(--parch-200); }
.cc-bag.is-done { background: #e3f6d6; border-color: var(--green-dark); }
.cc-bag.is-done .cc-bag__count { background: var(--green); }
.cc-bag.is-done::after {
  content: '★';
  position: absolute;
  top: 2px;
  right: 6px;
  color: var(--gold-dark);
  font-size: 1.1rem;
  text-shadow: 1px 1px 0 var(--ink);
}

.bag { image-rendering: pixelated; flex-shrink: 0; }

/* ==========================================================================
   COMMUNITY CENTER: ROOMS & BUNDLE SLOTS
   ========================================================================== */

.room { margin-bottom: 30px; }
.room-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 18px;
  padding: 10px 16px;
  color: var(--text-light);
  background: var(--wood-700);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop);
}
.room-head.is-done { background: var(--green-dark); border-color: var(--green); }
.room-head__title { font-size: 1.5rem; text-shadow: 2px 2px 0 var(--ink); }
.room-head__title .muted { color: var(--parch-200); }
.room-head__reward { font-size: 0.92rem; color: var(--parch-100); }

.bundle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 26px 24px;
}

.bundle {
  display: flex;
  flex-direction: column;
  background: var(--parch-50);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop), var(--bevel);
}
.bundle.is-done { border-color: var(--green-dark); background: #f0fae8; }
.bundle.is-flash { animation: flash 0.3s steps(2, end) 3; }

.bundle__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--parch-200);
  border-bottom: var(--px) solid var(--parch-300);
}
.bundle.is-done .bundle__head { background: #cfeeb4; }
.bundle__head .bag { width: 48px; height: 48px; }
.bundle__titles { flex: 1; min-width: 0; }
.bundle__title { font-size: 1.25rem; color: var(--wood-900); }
.bundle__progress { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }

.bundle__slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px 8px;
  padding: 14px;
}

/* Inventory-style slot: the item sits ghosted until it is ticked */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.slot__frame {
  position: relative;
  width: 60px;
  height: 60px;
  display: grid;
  place-items: center;
  background: var(--parch-200);
  border: var(--px) solid var(--wood-500);
  box-shadow: inset var(--px) var(--px) 0 0 rgba(43, 20, 8, 0.18), 0 0 0 2px var(--ink);
  transition: transform var(--t);
}
.slot__frame img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.4;
  filter: grayscale(0.7);
}
.slot__frame.is-broken img { display: none; }
.slot:hover .slot__frame { transform: translateY(-2px); background: var(--parch-100); }
.slot.is-done .slot__frame { background: #cfeeb4; border-color: var(--green-dark); }
.slot.is-done .slot__frame img { opacity: 1; filter: none; }
.slot.is-hit .slot__frame { box-shadow: 0 0 0 2px var(--ink), 0 0 0 5px var(--gold); }

.slot__count {
  position: absolute;
  right: 2px;
  bottom: -2px;
  font-size: 1rem;
  color: #fff;
  text-shadow: 1px 0 0 var(--ink), -1px 0 0 var(--ink), 0 1px 0 var(--ink), 0 -1px 0 var(--ink);
}
.slot__quality {
  position: absolute;
  left: 2px;
  bottom: -2px;
  font-size: 1rem;
  text-shadow: 1px 1px 0 var(--ink);
}
.q-silver { color: #d9e2ec; }
.q-gold { color: var(--gold); }
.q-iridium { color: #c77dff; }
.slot__tick {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  place-items: center;
  font-size: 0.85rem;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--ink);
}
.slot.is-done .slot__tick { display: grid; }
.slot__name { font-size: 0.85rem; line-height: 1.1; }
.slot__source { font-size: 0.7rem; line-height: 1.15; color: var(--text-muted); }

.bundle__reward {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 8px 14px;
  font-size: 0.92rem;
  border-top: var(--px) dashed var(--parch-300);
}
.bundle__reward-label { color: var(--wood-700); }

/* ==========================================================================
   MUSEUM
   ========================================================================== */

.museum-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 24px;
  align-items: start;
}
.museum-summary { display: flex; flex-direction: column; gap: 14px; }
.museum-meter__head { display: flex; justify-content: space-between; font-size: 1rem; margin-bottom: 4px; }
.museum-meter--main .museum-meter__head { font-size: 1.2rem; }
.museum-meter--main .progress { height: 24px; }

.reward-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 340px;
  overflow-y: auto;
  padding-right: 4px;
}
.reward {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
}
.reward.is-done { background: #e3f6d6; border-color: var(--green-dark); }
.reward__state { width: 22px; text-align: center; }
.reward.is-done .reward__state { color: var(--green-dark); }
.reward__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.reward__text strong { font-weight: 400; font-size: 1rem; }

.case { margin-bottom: 30px; }
.case__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 10px 16px;
  color: var(--text-light);
  background: var(--wood-900);
  border: var(--px) solid var(--wood-700);
  box-shadow: var(--frame), var(--drop);
}
.case__title { font-size: 1.5rem; text-shadow: 2px 2px 0 var(--ink); }

/* Display case: dark wood cabinet, glass-blue pedestal for each piece */
.case__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 14px;
  padding: 16px;
  background: var(--wood-700);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop), inset 0 0 0 var(--px) var(--wood-900);
}
.case-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px;
  text-align: center;
  background: var(--parch-50);
  box-shadow: var(--frame);
  transition: transform var(--t);
}
.case-tile:hover { transform: translateY(-2px); }
.case-tile__pedestal {
  position: relative;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  background: #cfe3ee;
  border: var(--px) solid #6f8fa3;
  box-shadow: inset var(--px) var(--px) 0 0 rgba(255, 255, 255, 0.6);
}
/* Items always show their real art so they are easy to recognise and tick */
.case-tile__pedestal img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}
.case-tile__pedestal.is-broken img { display: none; }
/* Donated: the whole tile turns green, like the done state elsewhere */
.case-tile.is-donated { background: #cfeeb4; }
.case-tile.is-donated .case-tile__pedestal { background: #e3f6d6; border-color: var(--green-dark); }
.case-tile.is-donated .case-tile__name { color: var(--green-dark); }
.case-tile__tick {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  place-items: center;
  font-size: 0.85rem;
  background: var(--green);
  box-shadow: 0 0 0 2px var(--ink);
}
.case-tile.is-donated .case-tile__tick { display: grid; }
.case-tile__name { font-size: 0.9rem; line-height: 1.1; }
.case-tile__source {
  font-size: 0.7rem;
  line-height: 1.15;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   TOASTS & FOOTER
   ========================================================================== */

.toast-container {
  position: fixed;
  right: 20px;
  bottom: 88px;   /* above the back-to-top button */
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--wood-900);
  color: var(--gold);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), var(--drop);
  animation: toast 3s steps(1, end) forwards;
}

.footer {
  text-align: center;
  color: var(--parch-100);
  font-size: 0.95rem;
  text-shadow: 2px 2px 0 var(--ink);
  padding-top: 10px;
}
.footer a { color: var(--gold); }
.footer__small { font-size: 0.82rem; opacity: 0.85; margin-top: 4px; }
.footer__share { margin-top: 14px; font-size: 1rem; }
.footer__love { margin-top: 4px; font-size: 1.05rem; }

/* 7x6 pixel heart, scaled by whole pixels (x3) so it stays crisp */
/* 9x9 pixel icons (assets/pixel-*.svg), scaled x2 to stay crisp */
/* Game item art inline with text (non-square art like buildings is contained) */
.game-icon {
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  object-fit: contain;
  vertical-align: middle;
  margin-top: -0.15em;
}
.coop-title .game-icon { width: 1.5em; height: 1.5em; }
.btn--coop .game-icon { width: 26px; height: 26px; margin: -4px 0; }

.pixel-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: -3px;
  image-rendering: pixelated;
}

/* Icon sizes per context (all icons come from js/lib/icons.js). Pixel
   glyphs step in whole multiples of their 9px grid: 18, 27, 36, 45. */
h2 .pixel-icon, h3 .pixel-icon, .panel__title .pixel-icon { width: 27px; height: 27px; vertical-align: -5px; }
.panel__title .game-icon, .group__title .game-icon, .room-head__title .game-icon,
.case__title .game-icon, .sim__title .game-icon { width: 1.3em; height: 1.3em; }
.empty-state__icon img, .panel-empty__icon img { width: 54px; height: 54px; }
.stat-card__icon img { width: 45px; height: 45px; }
.cc-root__icon img { width: 45px; height: 45px; }
.cc-room__icon img { width: 32px; height: 32px; }
.sim__icon img, .faq-head__icon img, .callout__big-icon img { width: 36px; height: 36px; }
.event-banner__icon img { width: 28px; height: 28px; }
.cal-cell__fest img { width: 24px; height: 24px; }
.cal-cell__cake img { width: 14px; height: 14px; }
.gift .pixel-icon { width: 18px; height: 18px; }
.empty-state__icon img { filter: drop-shadow(2px 2px 0 var(--ink)); }

.pixel-heart {
  display: inline-block;
  width: 21px;
  height: 18px;
  vertical-align: -3px;
  image-rendering: pixelated;
}

/* ==========================================================================
   ANIMATION (stepped, like sprite frames)
   ========================================================================== */

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes flash {
  50% { box-shadow: var(--frame), 0 0 0 calc(var(--px) * 3) var(--gold); }
}
@keyframes blink {
  50% { opacity: 0.45; }
}
@keyframes fade-in {
  from { opacity: 0; }
}
@keyframes toast {
  0% { transform: translateX(12px); opacity: 0; }
  4% { transform: none; opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; }
}

/* ==========================================================================
   FARM PLANNER
   A 1280x1040 canvas (1 px per game pixel) scaled with CSS width, drawn
   pixelated. Palette on the left, stats on the right.
   ========================================================================== */

.farm-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  margin-bottom: 14px;
}
.farm-bar__group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.farm-bar .btn.is-active { --btn-bg: var(--gold); }
.farm-alpha { display: inline-flex; align-items: center; gap: 8px; }
.farm-alpha .px-range { width: 120px; }
.farm-alpha strong { min-width: 3ch; }

.farm-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 270px;
  gap: 14px;
  align-items: start;
}

.farm-palette,
.farm-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 640px;
  overflow-y: auto;
}

.farm-groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.farm-group {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  background: var(--parch-100);
  border: 2px solid var(--parch-300);
  cursor: pointer;
}
.farm-group span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.farm-group img { width: 28px; height: 28px; }
.farm-group.is-active { background: var(--gold); border-color: var(--ink); }

.farm-items { display: flex; flex-direction: column; gap: 4px; }
.farm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  text-align: left;
  font: inherit;
  font-size: 0.92rem;
  color: var(--text);
  background: var(--parch-50);
  border: 2px solid var(--parch-300);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.farm-item:hover { border-color: var(--wood-500); }
.farm-item.is-active { background: var(--gold); border-color: var(--ink); }
.farm-item img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }

.farm-viewport {
  position: relative;
  overflow: auto;
  max-height: 640px;
  background: #2f5e1d;
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame);
  overscroll-behavior: contain;
}
.farm-stage { position: relative; touch-action: none; user-select: none; cursor: crosshair; }
.farm-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
}
.farm-canvas--overlay { pointer-events: none; }
.farm-flash {
  position: sticky;
  left: 50%;
  bottom: 12px;
  display: inline-block;
  transform: translateX(-50%);
  padding: 6px 12px;
  color: #fff;
  background: rgba(43, 20, 8, 0.85);
}

.farm-card {
  padding: 10px 12px;
  background: var(--parch-100);
  border: var(--px) solid var(--parch-300);
}
.farm-card__title { font-size: 1.1rem; color: var(--wood-900); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.farm-card p { font-size: 0.92rem; margin-bottom: 6px; }
.farm-tool { display: flex; align-items: center; gap: 6px; }
.farm-tool img { width: 28px; height: 28px; }
.farm-selected { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 6px 0; }
.farm-hover { min-height: 1.3em; font-size: 0.88rem; }
.farm-stats { list-style: none; display: flex; flex-direction: column; gap: 3px; font-size: 0.9rem; }
.farm-stats li { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px dashed var(--parch-300); padding-bottom: 2px; }
.farm-stats li span { display: inline-flex; align-items: center; gap: 4px; }
.farm-stats img { width: 18px; height: 18px; }

.farm-help { margin-top: 12px; font-size: 0.95rem; }
.farm-help summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.farm-help ul { margin: 8px 0 0 20px; display: flex; flex-direction: column; gap: 4px; }
.farm-help code { background: var(--parch-100); padding: 0 4px; }

@media (max-width: 1100px) {
  .farm-layout { grid-template-columns: 200px minmax(0, 1fr); }
  .farm-side { grid-column: 1 / -1; max-height: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}
@media (max-width: 700px) {
  .farm-layout { grid-template-columns: 1fr; }
  .farm-palette { max-height: none; }
  .farm-items { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
  .farm-item { flex-direction: column; min-width: 84px; text-align: center; font-size: 0.8rem; }
  .farm-groups { grid-template-columns: repeat(8, 1fr); }
  .farm-viewport { max-height: 70vh; }
  .farm-items { align-items: flex-start; }
}

/* ==========================================================================
   TODAY & FISHING
   ========================================================================== */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--blue-dark, #1d5fa8); text-decoration: underline; cursor: pointer; }

.today-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 12px; }
.today-pick__day { display: flex; align-items: center; gap: 8px; }
.today-pick__day label { display: inline-flex; align-items: center; gap: 6px; }
.today-num { width: 64px; padding: 4px 6px; }
.today-date { display: flex; align-items: center; gap: 8px; font-size: 1.4rem; color: var(--wood-900); margin: 6px 0 12px; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.today-card { padding: 12px 14px; background: var(--parch-100); border: var(--px) solid var(--parch-300); display: flex; flex-direction: column; gap: 8px; }
.today-card__title { display: flex; align-items: center; gap: 6px; font-size: 1.2rem; color: var(--wood-900); }
.today-bday { display: flex; gap: 10px; align-items: flex-start; }
.today-face { width: 56px; height: 56px; box-shadow: 0 0 0 2px var(--ink); background: var(--wood-300); flex-shrink: 0; }
.today-gifts { display: flex; flex-wrap: wrap; gap: 4px; }
.today-gift { width: 28px; height: 28px; background: var(--parch-50); border: 2px solid var(--parch-300); }
.today-list, .today-lines { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.today-list li { display: flex; align-items: center; gap: 6px; }
.today-list img { width: 26px; height: 26px; box-shadow: 0 0 0 2px var(--ink); background: var(--wood-300); }
.today-lines li { display: flex; gap: 8px; align-items: flex-start; }
.today-fest { display: flex; gap: 10px; align-items: flex-start; }
.today-fest > img { width: 32px; height: 32px; }
.today-crops { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.today-crop {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px;
  font: inherit; font-size: 0.85rem; text-align: center; color: var(--text);
  background: var(--parch-50); border: 2px solid var(--parch-300); cursor: pointer;
}
.today-crop:hover { border-color: var(--wood-500); }
.today-crop img { width: 32px; height: 32px; }
.today-crop small { color: var(--text-muted, #6b4a2b); }

.fish-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.fish-time { display: inline-flex; align-items: center; gap: 8px; }
.fish-time .px-range { width: 180px; }
.fish-loc { padding: 4px 8px; max-width: 240px; }
.fish-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.fish-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.fish-card { position: relative; display: flex; gap: 10px; padding: 10px 12px; background: var(--parch-50); border: var(--px) solid var(--parch-300); }
.fish-card.is-caught { background: #e3f6d6; border-color: var(--green-dark); }
.fish-card__img { width: 40px; height: 40px; flex-shrink: 0; }
.fish-card__name { font-size: 1.05rem; color: var(--wood-900); margin-bottom: 2px; }
.fish-card__row { font-size: 0.88rem; line-height: 1.5; padding-right: 28px; }
.fish-card__row img { width: 16px; height: 16px; vertical-align: -3px; margin-right: 2px; }
.fish-card__note { font-size: 0.85rem; margin-top: 2px; }
.fish-card__tick {
  position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--parch-100); border: 2px solid var(--ink); cursor: pointer;
}
.fish-card__tick img { width: 18px; height: 18px; }

/* Player profile (Progress tab) */
.profile { margin-bottom: 20px; }
.profile__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; }
.profile__head .panel__title { margin: 0; }
.profile__stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.profile--empty .btn { margin-top: 8px; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.skill-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--parch-50); border: var(--px) solid var(--parch-300); }
.skill-card.is-max { border-color: var(--gold-dark); background: #fff4d0; }
.skill-card__head { display: flex; align-items: center; gap: 10px; }
.skill-card__head > div { flex: 1; min-width: 0; }
.skill-card__icon { width: 32px; height: 32px; }
.skill-card__name { font-size: 1.15rem; color: var(--wood-900); }
.skill-card__level { font-size: 1.8rem; line-height: 1; color: var(--wood-700); min-width: 1.6ch; text-align: right; }
.skill-pips { display: flex; gap: 3px; margin-top: 3px; }
.skill-pips span { width: 10px; height: 10px; background: var(--parch-200); box-shadow: 0 0 0 1px var(--parch-300); }
.skill-pips span.is-big { width: 14px; }
.skill-pips span.is-on { background: var(--gold); box-shadow: 0 0 0 1px var(--gold-dark); }
.skill-bar { height: 10px; background: var(--parch-200); box-shadow: inset 0 0 0 2px var(--parch-300); }
.skill-bar span { display: block; height: 100%; background: var(--green); }
.skill-bar--mastery span { background: #8a5cd6; }
.skill-card__xp { font-size: 0.85rem; }
.skill-prof { font-size: 0.92rem; border-top: 1px dashed var(--parch-300); padding-top: 4px; }
.skill-prof p { font-size: 0.85rem; }
.skill-card__mastery { display: flex; align-items: center; gap: 6px; color: #6b3fb8; }

/* Farm journal */
.journal-meta { margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.journal-tabs, .journal-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.journal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 10px; }
.journal-card { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; background: var(--parch-50); border: var(--px) solid var(--parch-300); }
.journal-card h3 { font-size: 1.1rem; color: var(--wood-900); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.journal-card__title img, .machine-list img, .friend-card__row img, .friend-card__gifts img { width: 22px; height: 22px; vertical-align: -5px; }
.friend-card__head { display: flex; gap: 10px; align-items: center; }
.friend-card__face { width: 48px; height: 48px; box-shadow: 0 0 0 2px var(--ink); background: var(--wood-300); flex-shrink: 0; }
.friend-card__row { font-size: 0.92rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.friend-card__gifts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 0.88rem; }
.hearts { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 3px; }
.hearts span { width: 12px; height: 11px; background: var(--parch-200);
  clip-path: polygon(50% 100%, 0 40%, 0 15%, 20% 0, 40% 0, 50% 15%, 60% 0, 80% 0, 100% 15%, 100% 40%); }
.hearts span.is-on { background: #e0465a; }
.journal-search { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.journal-search input { flex: 1; padding: 6px 10px; }
.storage-list { display: flex; flex-direction: column; gap: 6px; }
.storage-row { display: flex; gap: 10px; align-items: flex-start; padding: 6px 10px; background: var(--parch-50); border: 2px solid var(--parch-300); }
.storage-row__icon { width: 32px; height: 32px; flex-shrink: 0; }
.storage-row__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.storage-row__places { display: flex; flex-wrap: wrap; gap: 4px; font-size: 0.85rem; }
.machine-list { list-style: none; display: flex; flex-direction: column; gap: 4px; font-size: 0.88rem; }
.machine-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-bottom: 1px dashed var(--parch-300); padding-bottom: 3px; }
.goal-list { display: flex; flex-direction: column; gap: 8px; }
.goal-row { display: flex; gap: 10px; align-items: center; padding: 8px 10px; background: var(--parch-50); border: 2px solid var(--parch-300); }
.goal-row.is-done { background: #e3f6d6; border-color: var(--green-dark); }
.goal-row__icon { width: 32px; height: 32px; }
.goal-row__body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.goal-row__head { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.perfection-total { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.perfection-total strong { font-size: 2.4rem; color: var(--wood-700); }
.journal-sub { margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; color: var(--wood-900); }
.journal-hints { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.text-red { color: #b8322e; }

/* Back-to-top button */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  width: 52px;
  height: 52px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--parch-100);
  border: var(--px) solid var(--wood-500);
  box-shadow: var(--frame), 0 4px 0 0 rgba(43, 20, 8, 0.35);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.2s steps(3, end), transform 0.2s steps(3, end), visibility 0.2s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.scroll-top:hover { background: var(--gold); transform: translateY(-3px); }
.scroll-top:active { transform: translateY(1px); }
.scroll-top img { width: 30px; height: 30px; }
@media (max-width: 600px) { .scroll-top { right: 12px; bottom: 12px; width: 46px; height: 46px; } }

/* Site update popup */
.update-notes { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }
.update-notes li { display: flex; gap: 8px; align-items: flex-start; }
.footer__version { opacity: 0.7; }

/* Farm presets */
.modal__box--wide { width: min(1100px, 96vw); }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 12px; }
.preset-card { display: flex; flex-direction: column; background: var(--parch-50); border: var(--px) solid var(--parch-300); }
.preset-card__img { width: 100%; aspect-ratio: 80 / 65; object-fit: cover; image-rendering: auto; border-bottom: var(--px) solid var(--parch-300); }
.preset-card__body { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; flex: 1; }
.preset-card__title { display: flex; align-items: center; gap: 6px; font-size: 1.15rem; color: var(--wood-900); }
.preset-card__level { display: flex; align-items: center; gap: 2px; }
.preset-card__level img { width: 18px; height: 18px; }
.preset-card__level .muted { margin-left: 8px; }
.preset-card__desc { font-size: 0.9rem; flex: 1; }
.preset-card .btn { align-self: flex-start; }

/* Recipe ingredients that open the item they name */
.ing-row--link { cursor: pointer; }
.ing-row--link:hover, .ing-row--link:focus-visible { background: var(--parch-200); outline: none; }
.empty-state__more { display: flex; justify-content: center; margin-top: -8px; margin-bottom: 20px; }

/* Progress-from-save summary */
.save-sync__part { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 4px; cursor: pointer; }
.save-sync__part > span { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.save-sync__list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin: 6px 0 8px 32px; }
.save-sync__list li { display: grid; grid-template-columns: 1fr auto 110px; gap: 10px; align-items: center; border-bottom: 1px dashed var(--parch-300); padding-bottom: 4px; }
.save-sync__list li span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.save-sync__sub { margin: 16px 0 8px; display: flex; align-items: center; gap: 6px; color: var(--wood-900); }
.save-sync__fish { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.save-sync__fish img { width: 20px; height: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .sim__top { grid-template-columns: 1fr; }
}

@media (max-width: 1100px) {
  .stats-grid { grid-template-columns: repeat(3, 1fr); }
  .museum-top { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .planner { grid-template-columns: 1fr; }
  .map-layout { grid-template-columns: 1fr; }
  .map-info { max-height: none; }
  .mines-layout { grid-template-columns: 1fr; }
  .mines-layout__shaft { position: static; }
  .shaft__column { height: 380px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  html { font-size: 19px; }
  .app { padding: 12px 12px 40px; }
  .qr-frame { --qr: 244px; } /* 4px per module on narrow screens */
  .coop-split { grid-template-columns: 1fr; }
  .coop-code { font-size: 2rem; }
  .qr-frame__corner { width: 28px; height: 28px; }
  .coffee-title { font-size: 1.35rem; gap: 6px; white-space: nowrap; }
  .coffee-title img { width: 28px; height: 28px; }
  /* Let the hero grow with its wrapped controls instead of clipping them */
  .hero { height: auto; }
  .hero__img { position: absolute; inset: 0; }
  .hero__overlay { position: relative; min-height: 300px; padding: 14px; }
  .hero__title { font-size: 1.9rem; }
  .junimo { width: 48px; height: 48px; }
  .content-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; }
  .quiz-options { gap: 10px; }
  .quiz-option img { width: 64px; height: 64px; }
  .quiz-q__name { font-size: 1.8rem; }
  .bundle-grid { grid-template-columns: 1fr; }
  .case__grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); padding: 10px; }
  .tab { font-size: 0.95rem; padding: 6px 10px; }
  .cal__dow span { font-size: 0.6rem; }
  .cal-cell { min-height: 46px; }
  .cal-cell__bday img { width: 20px; height: 20px; }
  .modal__box { padding: 18px 16px; }
  .detail-head { flex-direction: column; align-items: flex-start; }
}