/* Styles specific to the bookshop game. Shared colors come from ../style.css. */

/* The game's header sits in the same 1120px column as the picture, so the caret at
   left: 1rem lines up with the picture's left edge whether the header is open or folded. */
.site-header.compact { max-width: 1120px; margin: 0 auto; padding: 1.2rem 1rem 1rem; }
.home-link {
  display: inline-block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.home-link:hover { color: var(--brick); }

/* The header row: stage on the left, next goal on the right, a rule between. */
.stage-row {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 0 1.6rem;
  align-items: start;
  max-width: 1120px;
  margin: 0.2rem auto 0;
  padding: 0;
}
/* The caret that folds the header. Open: it floats in the top-left corner, level with
   the big title. Folded: it leads a single slim line with the small title. */
.site-header { position: relative; }
.header-toggle {
  position: absolute;
  left: 1rem;
  top: 4.2rem;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 50%;
  background: none;
  color: #a9a294;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-toggle svg { transition: transform 0.2s ease; }
.header-toggle:hover { color: var(--brick); border-color: var(--line); background: var(--paper); }
.header-toggle:focus-visible { outline: 2px solid var(--mustard); }
.mini-title { display: none; }
/* Folded: one line reading  [caret] The Salty Jellyfish ....... <- Alanna's Workshop  */
.site-header.collapsed {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0.9rem 1rem 0.5rem;
  text-align: left;
}
.site-header.collapsed .header-toggle { position: static; }
.site-header.collapsed .header-toggle svg { transform: rotate(-90deg); }
.site-header.collapsed .mini-title { display: inline; font-size: 1rem; color: var(--teal-dark); }
.site-header.collapsed .home-link { margin: 0 0 0 auto; }
.site-header.collapsed .header-full { display: none; }
@media (max-width: 640px) { .header-toggle { top: 4.4rem; } }
/* A gold dot on the caret while an upgrade is waiting, so a folded header still says so. */
.header-toggle.ready::after {
  content: '';
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mustard);
  border: 1.5px solid var(--paper);
}
.stage-left .appeal { display: inline-block; margin: 0.25rem 0 0; cursor: help; }
.stage-left .appeal .stars { color: var(--mustard); letter-spacing: 0.12em; font-size: 1.05rem; }
.stage-left .appeal .stars .dim { color: #d9cfbb; }
.stage-left .appeal[data-tip]:not([data-tip=""]):hover::after { left: 0; transform: none; }
.stage-divider { background: var(--line); align-self: stretch; min-height: 2.6rem; }
.stage-right #goal-label { font-style: normal; color: var(--teal-dark); }
/* Written as .stage-right .goal-progress so it outranks the general .progress rule further
   down, which would otherwise reset the side margins and push the bar to the left. */
.stage-right .goal-progress {
  max-width: 320px;
  margin: 0.45rem auto 0.25rem;
  height: 8px;
}
.stage-right .footnote { margin: 0; }
.stage-right .button.upgrade { display: inline-block; width: auto; margin: 0.45rem 0 0; padding: 0.4rem 1.1rem; font-size: 0.95rem; }
@media (max-width: 640px) {
  .stage-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .stage-divider { display: none; }
}

/* The small print under the stage title. */
.footnote-mark { font-size: 0.7em; color: var(--brick); margin-left: 1px; }
.footnote {
  margin: 0.2rem 0 0;
  font-size: 0.78rem;
  font-style: italic;
  color: #8f8a80;
}
.footnote sup { font-size: 0.75em; color: var(--brick); margin-right: 1px; }

.screen {
  max-width: 1120px;
  margin: 0 auto 3rem;
  padding: 0 1rem;
}
.hidden { display: none !important; }

.intro { color: var(--ink-soft); margin-top: 0; }

/* ---- Setup screen ---- */
.location-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.location-card {
  text-align: left;
  background: var(--card);
  border: 2px solid var(--line);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: transform 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
}
.location-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 50, 30, 0.1); }
.location-card.selected { border-color: var(--brick); box-shadow: 0 0 0 3px rgba(165, 68, 58, 0.18); }
.location-card .thumb svg { display: block; width: 100%; height: auto; }
.location-card h3 { margin: 0.7rem 1rem 0.2rem; font-size: 1.15rem; }
.location-card p { margin: 0 1rem 0.9rem; color: var(--ink-soft); font-size: 0.93rem; }

.setup-actions { margin-top: 1.4rem; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.card-meta {
  margin: -0.5rem 1rem 0.9rem !important;
  font-size: 0.82rem !important;
  color: var(--brick) !important;
  font-family: Georgia, serif;
}

/* ---- Buttons ---- */
.button {
  font: inherit;
  font-size: 1rem;
  padding: 0.6rem 1.3rem;
  border-radius: 999px;
  border: 2px solid var(--teal-dark);
  background: var(--card);
  color: var(--teal-dark);
  cursor: pointer;
}
.button.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.button.primary:hover:not(:disabled) { background: var(--teal-dark); }
.button:disabled { opacity: 0.45; cursor: not-allowed; }
.link-button {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
  color: var(--brick);
  text-decoration: underline;
  cursor: pointer;
}
.hint { color: var(--ink-soft); font-size: 0.9rem; margin: 0.5rem 0 0; }

/* ---- Game screen ---- */
.dateline {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
  font-family: Georgia, serif;
  color: var(--teal-dark);
  font-size: 1.05rem;
}
.day-progress {
  flex: 1;
  height: 6px;
  background: #efe8da;
  border-radius: 999px;
  overflow: hidden;
}
#day-bar {
  height: 100%;
  width: 0;
  background: var(--mustard);
  transition: width 0.5s linear;
}
.phase {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
  white-space: nowrap;
}
.dateline .button.small { white-space: nowrap; }
.dateline.night { color: var(--navy); }
.dateline.night #day-bar { background: var(--navy); }

.hud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}
.hud-item {
  flex: 1 1 150px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.5rem 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.6rem;
}
.hud-item .label { color: var(--ink-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
.hud-item span:last-child { font-family: Georgia, serif; font-size: 1.15rem; color: var(--teal-dark); text-align: right; }
#hud-stock { white-space: nowrap; }
#hud-coins { color: var(--brick); }

.scene {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(60, 50, 30, 0.08);
}
.scene svg { display: block; width: 100%; height: auto; }

/* Things floating over the scene: the HUD chips in the top corners and the two
   buttons in the bottom corners. */
.scene-wrap { position: relative; }
.corner-button {
  position: absolute;
  bottom: 0.8rem;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  background: rgba(43, 42, 40, 0.55);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.corner-button:hover { background: rgba(43, 42, 40, 0.8); }
.corner-left { left: 0.8rem; }
.corner-right { right: 0.8rem; }

/* The night tip: a line written in the stars, below the top chips. Faint on purpose. */
.night-tip {
  position: absolute;
  top: 32%;                        /* below the moon, above the horizon */
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 62%;
  font-family: 'Caveat', 'Bradley Hand', cursive;
  font-size: 1.45rem;
  line-height: 1.2;
  color: rgba(246, 242, 228, 0.82);
  text-shadow: 0 0 10px rgba(246, 230, 184, 0.55), 0 0 2px rgba(31, 42, 90, 0.6);
  text-align: center;
  letter-spacing: 0.01em;
  pointer-events: none;
}
@media (max-width: 640px) {
  .night-tip { top: 36%; max-width: 80%; font-size: 1.05rem; }
}
/* The Begin Day button while boxes wait on the step. */
#next-day-button:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
#next-day-wrap { display: inline-block; }
#next-day-wrap.hidden { display: none; }
/* The button sits at the right edge, so its hint hangs from its right corner. */
#next-day-wrap[data-tip]:not([data-tip=""]):hover::after { left: auto; right: 0; transform: none; }

/* A small hand-drawn hover hint. Any element with class tip-wrap and a data-tip
   attribute shows the attribute's text in a little card when the mouse rests on it. */
.tip-wrap { position: relative; }
.tip-wrap[data-tip]:not([data-tip=""]):hover::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  transform: translateX(-50%);
  z-index: 20;
  width: max-content;
  max-width: 280px;
  padding: 0.45rem 0.7rem;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  font-family: Georgia, serif;
  font-style: normal;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

.hud-chip {
  position: absolute;
  top: 0.8rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  background: rgba(247, 242, 232, 0.88);
  border: 1px solid rgba(90, 80, 60, 0.18);
  box-shadow: 0 2px 8px rgba(60, 50, 30, 0.12);
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--teal-dark);
  backdrop-filter: blur(2px);
  white-space: nowrap;
}
.hud-shop { left: 0.8rem; max-width: 50%; gap: 0.3rem; }
.hud-shop #hud-name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-shop .pencil { color: #a9a294; padding: 0 0.1em; line-height: 1; }
.hud-shop .rename { width: 13em; max-width: 100%; font-size: 0.9rem; padding: 0.05rem 0.4rem; }
/* Item 6: the coin and stock pills explain themselves on hover, with the card hanging
   from the right so it stays inside the picture. */
/* relative so the hover card can hang from the pill; top: auto so the .hud-chip offset
   (meant for the absolutely placed name pill) does not push these two down. */
.hud-right .hud-chip.tip-wrap { position: relative; top: auto; }
.hud-right .hud-chip[data-tip]:not([data-tip=""]):hover::after { left: auto; right: 0; transform: none; }
.hud-right { position: absolute; top: 0.8rem; right: 0.8rem; display: flex; gap: 0.5rem; }
.hud-right .hud-chip { position: static; }
#hud-coins { color: var(--brick); }
.chip-icon { width: 20px; height: 20px; flex: 0 0 20px; }
@media (max-width: 640px) {
  .hud-chip { font-size: 0.85rem; padding: 0.2rem 0.55rem; top: 0.5rem; }
  .hud-shop { left: 0.5rem; max-width: calc(100% - 215px); }   /* leaves room for the two right-hand chips */
  .hud-right { right: 0.5rem; top: 0.5rem; gap: 0.3rem; }
  .chip-icon { width: 16px; height: 16px; flex: 0 0 16px; }
  .corner-button { font-size: 0.8rem; padding: 0.3rem 0.7rem; bottom: 0.5rem; }
  .corner-left { left: 0.5rem; }
  .corner-right { right: 0.5rem; }
}

/* Being pulled through the front door: zoom toward it and fade out, then the
   interior fades in from a slight zoom. */
.scene.entering svg {
  transform-origin: var(--door-x, 50%) var(--door-y, 78%);
  animation: pullThrough 0.9s ease-in forwards;
}
.scene.arriving svg { animation: arrive 0.7s ease-out both; }
@keyframes pullThrough {
  from { transform: scale(1); opacity: 1; }
  to   { transform: scale(3.4); opacity: 0; }
}
@keyframes arrive {
  from { transform: scale(1.1); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.below-scene {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 1.5fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: stretch;             /* the journal grows to match the side column */
}
/* The side column stacks its two cards. Its height sets the row height. */
.side-column {
  display: grid;
  gap: 1rem;
  align-content: start;
}
/* The journal's entries are positioned absolutely inside it, so they never
   make the row taller. They scroll instead. */
.panel.journal { position: relative; }
.log-scroll {
  position: absolute;
  left: 2.6rem;
  right: 1.1rem;
  top: calc(0.9rem + 2 * var(--rule));   /* below the title and the note */
  bottom: 0.9rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #b9bfd6 transparent;
}
@media (max-width: 640px) {
  .below-scene { grid-template-columns: 1fr; }
  .log-scroll { position: static; max-height: 360px; }
}
.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1rem 1.2rem;
}
.panel h3 { font-size: 1.05rem; }

/* ---- Stats card: folded by default; the numbers the old Stats tab used to show ---- */
.stats-panel { margin-top: 1rem; }
.stats-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  font-family: Georgia, serif;
  font-size: 1.05rem;
  color: var(--teal-dark);
  cursor: pointer;
  text-align: left;
}
.stats-toggle svg { color: #a9a294; transition: transform 0.2s ease; flex: 0 0 12px; }
.stats-toggle:hover svg { color: var(--brick); }
.stats-panel.collapsed .stats-toggle svg { transform: rotate(-90deg); }
.stats-hint { margin-left: auto; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-size: 0.85rem; font-style: italic; color: var(--ink-soft); }
.stats-body .intro { font-size: 0.9rem; margin: 0.8rem 0 0; }
.stats-body h4 { font-family: Georgia, serif; font-weight: normal; font-size: 0.95rem; color: var(--teal-dark); margin: 1.1rem 0 0.2rem; }
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.6rem;
  margin-top: 0.4rem;
}
.stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
}
.stat .value { display: block; font-family: Georgia, serif; font-size: 1.6rem; color: var(--brick); line-height: 1.1; }
.stat .label { display: block; margin-top: 0.3rem; color: var(--ink-soft); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }
.stat .detail { display: block; margin-top: 0.2rem; color: var(--ink); font-size: 0.85rem; }
.stat.soon { opacity: 0.55; }
.stat.soon .value { color: var(--ink-soft); }

/* ---- The shop journal: ruled paper, red margin, fountain-pen ink ---- */
.panel.journal {
  --ink-blue: #1f2a5a;              /* blue-black fountain pen ink */
  --rule: 28px;                     /* distance between ruled lines */
  position: relative;
  padding: 0.9rem 1.1rem 1.1rem 2.6rem;
  border-color: #e0d6c0;
  color: var(--ink-blue);
  background-color: #fbf7ec;
  /* Faint blue ruled lines, repeating every --rule pixels. */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(var(--rule) - 1px),
    #cdd6e6 calc(var(--rule) - 1px),
    #cdd6e6 var(--rule)
  );
  background-position: 0 0.3rem;
  box-shadow: inset 0 0 40px rgba(120, 90, 40, 0.07), 0 6px 18px rgba(60, 50, 30, 0.06);
}
/* The red margin line down the left side. */
.panel.journal::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 1.9rem;
  width: 1px;
  background: #d9a0a0;
}
.panel.journal h3,
.panel.journal .journal-note,
.panel.journal .log {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Print', cursive;
}
.panel.journal h3 {
  font-size: 1.7rem;
  line-height: var(--rule);
  margin: 0;
  color: var(--ink-blue);
  transform: rotate(-1.2deg);
}
.journal-note {
  margin: 0;
  font-size: 1.05rem;
  line-height: var(--rule);
  color: #6a6f8a;
}

.log { list-style: none; padding: 0; margin: 0; }
.log li {
  font-size: 1.3rem;
  line-height: var(--rule);             /* each line of writing sits on a ruled line */
  color: #3a4785;
  padding: 0;
}
.log li:first-child { color: var(--ink-blue); font-weight: 600; }   /* fresh ink is darker */
.log li:nth-child(even) { transform: rotate(0.25deg); }
.log li:nth-child(3n) { transform: rotate(-0.2deg); }
.log li em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: rgba(31, 42, 90, 0.45);
  text-underline-offset: 3px;
}

.progress {
  height: 12px;
  background: #efe8da;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0;
}
.progress-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--mustard), var(--brick));
  transition: width 0.4s ease;
}

.footer-actions { text-align: center; margin-top: 1.5rem; }

/* ---- The shop card: two sub-tabs ---- */
.shop-panel { padding-top: 0.6rem; }
.subtabs {
  display: flex;
  gap: 0.2rem;
  border-bottom: 1px solid var(--line);
  margin: 0 0 0.4rem;
}
.subtab {
  font: inherit;
  font-family: Georgia, serif;
  font-size: 1rem;
  padding: 0.45rem 0.8rem;
  margin-bottom: -1px;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
}
.subtab:hover { color: var(--teal-dark); }
.subtab.active {
  color: var(--teal-dark);
  background: var(--card);
  border-color: var(--line);
}
.tabpane.hidden { display: none; }

/* ---- The order form and the inventory ---- */
.catalogue, .inventory { list-style: none; padding: 0; margin: 0.4rem 0 0; }
.catalogue li, .inventory li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px dashed var(--line);
}
.inventory li:last-child { border-bottom: none; }
.item-row { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.icon { width: 26px; height: 26px; flex: 0 0 26px; display: block; }
.inventory .item-name { display: block; font-family: Georgia, serif; color: var(--teal-dark); }
.inventory .item-meta { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.inventory .empty { color: var(--ink-soft); font-style: italic; }
/* An item that can go out front or inside gets two buttons side by side. */
.place-buttons { display: flex; gap: 0.3rem; flex-shrink: 0; }
/* Renaming a pet: a small pencil beside the name, and a text box while editing. */
.pencil {
  font: inherit;
  font-size: 0.85em;
  background: none;
  border: none;
  padding: 0 0.2em;
  color: var(--ink-soft);
  cursor: pointer;
  vertical-align: baseline;
}
.pencil:hover { color: var(--brick); }
/* Decor placement: drag an item out front to another spot. While dragging, the four spots
   show as soft marks on the ground and the nearest one brightens. */
svg .decor-item { cursor: grab; touch-action: none; }
svg .decor-item.dragging { cursor: grabbing; opacity: 0.85; }
svg .slot-marker { fill: var(--mustard); opacity: 0.3; stroke: #fff8e6; stroke-width: 1; pointer-events: none; }
svg .slot-marker.near { opacity: 0.85; }
/* The Wall Bass sings when clicked: the fish swings out from its plaque, tail first, and back. */
svg .wall-bass .bass-fish { transform-box: fill-box; transform-origin: 8% 55%; }
svg .wall-bass.singing .bass-fish { animation: bass-sing 0.3s ease-in-out 5 alternate; }
@keyframes bass-sing { from { transform: rotate(0deg); } to { transform: rotate(-14deg); } }
.rename {
  font: inherit;
  font-family: Georgia, serif;
  color: var(--teal-dark);
  width: 11em;
  max-width: 100%;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
}
.rename:focus { outline: 2px solid var(--mustard); border-color: transparent; }
.swatch { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 50%; vertical-align: -0.1em; margin-right: 0.3em; border: 1px solid rgba(0,0,0,0.15); }
.catalogue li:last-child { border-bottom: none; }
.catalogue .item-name { display: block; font-family: Georgia, serif; color: var(--teal-dark); }
.catalogue .item-meta { display: block; font-size: 0.85rem; color: var(--ink-soft); }
.catalogue .item-name.mystery::after { content: ' ?'; color: var(--brick); }
.catalogue .empty { color: var(--ink-soft); font-style: italic; }
.button.small { padding: 0.35rem 0.9rem; font-size: 0.9rem; }
.ordered { font-size: 0.85rem; color: var(--teal-dark); white-space: nowrap; }
.orders { margin-top: 0.6rem; font-size: 0.9rem; }
.orders h4 { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); font-weight: normal; }
.orders ul { list-style: none; padding: 0; margin: 0; }
.orders li { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.25rem 0; }
.scene .delivery-box:hover rect:first-of-type { filter: brightness(1.06); }
/* ---- Seasons ----
   The page carries a season class; trees, ground and sky respond. */
.bare { display: none; }
.seasonal .autumn-leaves, .seasonal .snow-drifts, .seasonal .wildflowers { display: none; }
body.season-spring .wildflowers { display: inline; }
body.season-autumn .autumn-leaves { display: inline; }
body.season-autumn .leaf { fill: #c9782e; }
body.season-autumn .leaf.alt { fill: #a5443a; }
body.season-autumn .leaf-line { fill: #b58a4a; }
body.season-winter .snow-drifts { display: inline; }
body.season-winter .leaf { display: none; }
body.season-winter .bare { display: inline; }
body.season-winter .leaf-line { fill: #8a8078; }
svg .weather, svg .background-life, svg .sea-life, svg .festive-glow, svg .sky-life { pointer-events: none; }
/* ---- Holidays ----
   Each set of decorations shows only in its festive week; the page carries a fest- class
   (see festival() in game.js). Ghosts bob, jack-o'-lanterns flicker, and Christmas lights twinkle. */
.halloween, .christmas, .easter { display: none; }
body.fest-halloween .halloween, body.fest-christmas .christmas, body.fest-easter .easter { display: inline; }
.twinkle { animation: twinkle 1.9s ease-in-out infinite alternate; }
@keyframes twinkle { from { opacity: 1; } to { opacity: 0.35; } }
.ghost-bob { animation: ghostBob 3.2s ease-in-out infinite alternate; }
@keyframes ghostBob { from { transform: translateY(0); } to { transform: translateY(-4px); } }
.jack-glow { animation: flicker 2.2s ease-in-out infinite alternate; }
@keyframes flicker { 0% { opacity: 1; } 35% { opacity: 0.8; } 60% { opacity: 0.95; } 100% { opacity: 0.75; } }

/* ---- A living sky and sea: gentle, looping CSS animations on parts of the backdrop ---- */
.cloud { animation: drift var(--dur, 180s) linear infinite; animation-delay: var(--delay, 0s); }
@keyframes drift { from { transform: translateX(var(--start, -200px)); } to { transform: translateX(var(--end, 1000px)); } }
.waves { animation: sway 5s ease-in-out infinite alternate; }
.waves.late { animation-delay: -2.5s; animation-duration: 6s; }
@keyframes sway { from { transform: translateX(-5px); opacity: 0.65; } to { transform: translateX(5px); opacity: 1; } }
.foam { animation: lap 4.5s ease-in-out infinite alternate; }
@keyframes lap { from { transform: translateY(-3px); opacity: 0.3; } to { transform: translateY(3px); opacity: 0.75; } }
@media (prefers-reduced-motion: reduce) { .cloud, .waves, .foam, .ghost-bob, .jack-glow, .twinkle { animation: none; } }

/* ---- Sketch mode ----
   Every painted layer holds a color copy (.fills) and an ink copy (.lines).
   Off: ink hidden, color keeps its outlines, gentle wobble. On: color loses its
   outlines and goes a little dusty; ink shows, wobbles more, and sits slightly off
   the color; paper grain over the top. People, boxes and decor are never touched. */
svg .lines { display: none; }
svg .fills { filter: url(#wobble); }
svg .paper { display: none; pointer-events: none; }

body.sketch svg .fills { filter: url(#wobbleFill); }
body.sketch svg .fills * { stroke: none !important; }
body.sketch svg .lines { display: inline; filter: url(#wobbleLine); transform: translate(1.6px, -1.1px); }
body.sketch svg .lines * { fill: none !important; }
body.sketch svg .paper { display: inline; opacity: 0.4; mix-blend-mode: multiply; }


/* The color washes and floating text sit over the picture; clicks must pass through them. */
.scene .season-tint, .scene .daylight, .scene .effects { pointer-events: none; }
.scene .delivery-box.waiting { cursor: default; }
.button:disabled { cursor: not-allowed; }

/* The upgrade button inside the Next goal panel. */
.button.upgrade {
  display: block;
  width: 100%;
  margin: 0.6rem 0 0.2rem;
  background: var(--brick);
  border-color: var(--brick);
}
.button.upgrade:hover { background: #8a3730; }

/* Floating "+3" text inside the scene. Browsers can animate SVG text with CSS. */
/* The church bell's music notes: drift up and off to one side, then fade. */
.bell-note {
  animation: bellNote 2.3s ease-out forwards;
  pointer-events: none;
}
@keyframes bellNote {
  0% { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--drift), -70px) scale(1.1); opacity: 0; }
}
.float {
  animation: floatUp 1.1s ease-out forwards;
  font-family: Georgia, serif;
  font-weight: bold;
  pointer-events: none;
}
@keyframes floatUp {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(-34px); opacity: 0; }
}
/* A chatting customer's speech bubble: pops in, drifts up a little, fades. */
.chat-bubble {
  animation: chatUp 1.6s ease-out forwards;
  pointer-events: none;
}
@keyframes chatUp {
  0%   { transform: translateY(2px) scale(0.6); opacity: 0; }
  15%  { transform: translateY(0) scale(1); opacity: 1; }
  70%  { opacity: 1; }
  100% { transform: translateY(-8px) scale(1); opacity: 0; }
}

/* Pets and customers answer a click (hearts, a speech bubble), so they get a pointing hand. */
svg .pet, svg .customer { cursor: pointer; }
/* Watering a plant: the can tips forward, pours, and tips back; the drops fall and fade. */
.watering-can { animation: waterTip 1.7s ease-in-out forwards; pointer-events: none; }
@keyframes waterTip {
  0%   { transform: rotate(0deg); opacity: 0; }
  12%  { opacity: 1; }
  25%  { transform: rotate(-30deg); }
  75%  { transform: rotate(-30deg); opacity: 1; }
  100% { transform: rotate(0deg); opacity: 0; }
}
.water-drop { animation: waterDrop 0.5s ease-in both; pointer-events: none; }
@keyframes waterDrop {
  from { transform: translateY(0); opacity: 0.9; }
  to   { transform: translateY(16px); opacity: 0; }
}

/* ---- Typewriter lettering ----
   The title, the date line, the pills over the picture and the whole order / inventory
   card are typed rather than printed. Last in the file so it wins over the Georgia settings above. */
.site-header h1,
.mini-title,
.dateline,
.hud-chip,
.hud-chip .rename,
.corner-button,
.shop-panel,
.shop-panel .subtab,
.shop-panel .item-name,
.shop-panel .rename {
  font-family: 'Special Elite', 'Courier Prime', 'Courier New', Courier, monospace;
}