/*
 * Zenow Field Guide
 * A single book-and-field-journal visual system shared by every full-screen
 * chapter and modal. Loaded last so feature logic can keep its original DOM.
 */
:root {
  --guide-paper-image: url("../../assets/runtime/ui/book/optimized/ui-book-page-oat-seamless.webp");
  --guide-cover-image: url("../../assets/runtime/ui/book/optimized/ui-book-cover-sage-seamless.webp");
  --guide-frame-image: url("../../assets/runtime/ui/book/optimized/ui-book-page-frame-9slice.webp");
  --guide-paper: #f4edd7;
  --guide-paper-light: #fffaf0;
  --guide-paper-deep: #e5d6ad;
  --guide-ink: #253d31;
  --guide-ink-soft: #536757;
  --guide-sage: #536c51;
  --guide-sage-dark: #304b3a;
  --guide-gold: #b98a36;
  --guide-line: rgba(85, 72, 43, 0.22);
  --guide-shadow: 0 22px 54px rgba(25, 43, 32, 0.24);
  --guide-serif: "STKaiti", "KaiTi", "FangSong", "Songti SC", serif;
}

.building-layer {
  --chapter-paper:
    linear-gradient(90deg, rgba(57, 52, 36, 0.12), transparent 6%, transparent 95%, rgba(57, 52, 36, 0.08)),
    var(--guide-paper-image) center / 640px auto repeat;
}

.building-layer:has(.shop-page),
.building-layer:has(.home-page),
.building-layer:has(.ai-cottage-page) {
  background:
    linear-gradient(90deg, var(--guide-sage-dark) 0 10px, transparent 10px),
    var(--chapter-paper);
  box-shadow: var(--guide-shadow);
}

.building-layer:has(.shop-page)::after,
.building-layer:has(.home-page)::after,
.building-layer:has(.ai-cottage-page)::after {
  content: "";
  position: absolute;
  z-index: 40;
  inset: 7px 7px 7px 10px;
  border: 1px solid rgba(86, 70, 38, 0.2);
  border-left-color: rgba(255, 255, 255, 0.34);
  border-radius: 4px 15px 15px 4px;
  pointer-events: none;
  box-shadow:
    inset 3px 0 10px rgba(47, 50, 32, 0.08),
    inset 0 0 0 3px rgba(255, 255, 255, 0.2);
}

.shop-page,
.home-page,
.ai-cottage-page {
  color: var(--guide-ink);
  background:
    linear-gradient(90deg, rgba(95, 74, 36, 0.07), transparent 9%, transparent 94%, rgba(95, 74, 36, 0.05)),
    var(--guide-paper-image) center / 640px auto repeat;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shop-page::before,
.shop-page::after,
.home-page::before,
.home-page::after {
  display: none;
}

.shop-header,
.home-hero,
.ai-cottage-header {
  border: 0;
  border-bottom: 1px solid var(--guide-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shop-header h2,
.home-hero h1,
.ai-cottage-header h1,
.home-panel h2,
.ai-panel-card h2,
.shop-confirm-card h2,
.event-card h2,
.questionnaire-heading h1,
.auth-dialog h2,
.cloud-conflict-dialog h2,
.building-upgrade-card h2,
.lottery-sheet h2,
.daily-fortune-invitation h2,
.daily-fortune-picker h2 {
  font-family: var(--guide-serif);
  letter-spacing: 0.045em;
}

.feature-kicker,
.shop-card-status,
.event-eyebrow,
.questionnaire-kicker,
.lottery-kicker {
  color: var(--guide-gold);
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0.14em;
}

/* Market chapter: a specimen catalogue, not a generic product grid. */
.shop-page {
  gap: 13px;
  padding-inline: 23px 17px;
}

.shop-header {
  align-items: center;
  padding: 7px 2px 15px;
}

.shop-wallet {
  border: 1px solid rgba(143, 104, 34, 0.32);
  border-radius: 6px 12px 6px 12px;
  color: #825d20;
  background:
    linear-gradient(145deg, rgba(255, 251, 224, 0.86), rgba(226, 205, 146, 0.48)),
    var(--guide-paper-image) center / 380px auto;
  box-shadow: 2px 4px 8px rgba(78, 60, 29, 0.12);
}

.shop-tabs,
.home-entry-grid,
.ai-mode-strip,
.auth-mode-tabs {
  gap: 0;
  padding: 0 3px;
  border-bottom: 1px solid var(--guide-line);
  background: transparent;
}

.shop-tabs button,
.home-entry-grid button,
.ai-mode-strip button,
.auth-mode-tabs .ghost-button {
  min-height: 39px;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--guide-ink-soft);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shop-tabs button.is-active,
.home-entry-grid button.is-active,
.ai-mode-strip button.is-active,
.auth-mode-tabs .ghost-button.is-active {
  border-color: var(--guide-gold);
  color: var(--guide-sage-dark);
  background: linear-gradient(180deg, transparent, rgba(191, 153, 71, 0.1));
  box-shadow: none;
}

.shop-card {
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 13px;
  padding: 12px;
  border: 1px solid var(--guide-line);
  border-radius: 5px 14px 7px 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66), rgba(237, 226, 192, 0.42)),
    var(--guide-paper-image) center / 470px auto;
  box-shadow:
    2px 7px 17px rgba(64, 55, 33, 0.11),
    inset 0 0 0 2px rgba(255, 255, 255, 0.25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.shop-card:nth-child(even) {
  transform: rotate(0.2deg);
}

.shop-card:hover {
  border-color: rgba(80, 103, 69, 0.32);
  transform: translateY(-2px) rotate(-0.2deg);
}

.shop-card.is-owned {
  border-color: rgba(79, 115, 75, 0.28);
  background:
    linear-gradient(145deg, rgba(235, 244, 218, 0.74), rgba(240, 226, 187, 0.5)),
    var(--guide-paper-image) center / 470px auto;
}

.shop-preview {
  min-height: 98px;
  border: 1px solid rgba(99, 83, 50, 0.18);
  border-radius: 3px;
  background: rgba(255, 252, 235, 0.48);
  box-shadow:
    inset 0 0 18px rgba(125, 106, 62, 0.08),
    4px 4px 0 rgba(115, 95, 53, 0.06);
}

.shop-preview-img {
  min-height: 98px;
  padding: 5px;
  filter: drop-shadow(0 7px 8px rgba(53, 61, 39, 0.18));
}

.shop-card-action,
.primary-button,
.event-button,
.fortune-action + button,
.daily-fortune-invitation button,
.lottery-draw,
.lottery-claim {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 7px 14px 7px 14px;
  background:
    linear-gradient(145deg, rgba(82, 111, 78, 0.98), rgba(45, 73, 55, 0.98)),
    var(--guide-cover-image) center / cover;
  color: #fff9e8;
  box-shadow: 0 5px 12px rgba(38, 61, 45, 0.2);
}

/* Home chapter: character dossier and keepsake album. */
.home-page {
  padding-inline: 23px 17px;
}

.home-hero {
  min-height: 126px;
  padding: 8px 3px 15px;
  overflow: visible;
}

.home-hero::before,
.home-hero::after {
  display: none;
}

.home-character-orb,
.home-character-portrait {
  border: 5px solid rgba(255, 251, 232, 0.9);
  border-radius: 3px;
  background: rgba(236, 232, 204, 0.62);
  box-shadow:
    0 0 0 1px rgba(91, 75, 44, 0.22),
    5px 7px 14px rgba(65, 56, 34, 0.15);
  transform: rotate(-1.5deg);
}

.home-growth-card,
.home-function-block,
.home-panel,
.home-decoration-card,
.home-character-card,
.home-settings-panel,
.home-memory-card {
  border: 1px solid var(--guide-line);
  border-radius: 6px 15px 7px 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(235, 224, 189, 0.38)),
    var(--guide-paper-image) center / 520px auto;
  box-shadow:
    0 8px 19px rgba(65, 55, 33, 0.1),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.home-function-block,
.home-panel {
  padding: 14px;
}

.home-growth-card {
  position: relative;
  overflow: visible;
}

.home-growth-card::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 24px;
  width: 65px;
  height: 14px;
  background: rgba(218, 188, 109, 0.56);
  box-shadow: 0 2px 3px rgba(70, 55, 26, 0.08);
  transform: rotate(-2deg);
}

.home-character-card-art,
.home-decoration-card img {
  border-radius: 3px;
  background: rgba(255, 252, 235, 0.4);
  box-shadow: inset 0 0 0 1px rgba(98, 82, 48, 0.14);
}

/* Cottage chapter: letters exchanged with a companion. */
.ai-cottage-page {
  padding-inline: 23px 17px;
  gap: 13px;
}

.ai-cottage-header {
  padding: 7px 2px 15px;
}

.ai-home-hero,
.ai-assistant-switch,
.ai-panel-card,
.ai-quick-button,
.ai-action-card,
.ai-conversation-card,
.ai-config-card {
  border: 1px solid var(--guide-line);
  border-radius: 6px 15px 7px 13px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.62), rgba(236, 225, 191, 0.38)),
    var(--guide-paper-image) center / 520px auto;
  box-shadow:
    0 8px 20px rgba(61, 53, 33, 0.1),
    inset 0 0 0 2px rgba(255, 255, 255, 0.22);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.ai-companion-orb {
  border: 5px solid rgba(255, 250, 228, 0.92);
  border-radius: 3px;
  background: rgba(231, 232, 199, 0.6);
  box-shadow:
    0 0 0 1px rgba(88, 76, 45, 0.2),
    5px 7px 13px rgba(56, 52, 34, 0.14);
  transform: rotate(-1deg);
}

.ai-status-grid span,
.ai-assistant-card {
  border-radius: 4px 9px 4px 9px;
  background: rgba(232, 226, 193, 0.46);
}

.message-list {
  padding: 9px 4px;
  background:
    repeating-linear-gradient(180deg, transparent 0 29px, rgba(84, 101, 86, 0.09) 30px);
}

.message-bubble {
  border: 1px solid rgba(86, 72, 42, 0.16);
  border-radius: 3px 11px 5px 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.74), rgba(236, 226, 191, 0.46)),
    var(--guide-paper-image) center / 390px auto;
  box-shadow: 2px 4px 9px rgba(64, 54, 33, 0.08);
}

.message-bubble.is-user {
  border-color: rgba(156, 117, 47, 0.2);
  background:
    linear-gradient(145deg, rgba(255, 247, 209, 0.8), rgba(223, 202, 139, 0.4)),
    var(--guide-paper-image) center / 390px auto;
}

.ai-composer textarea,
.composer textarea,
.questionnaire-field input,
.questionnaire-field select,
.questionnaire-field textarea,
.field input,
.field select {
  border: 0;
  border-bottom: 1px solid rgba(72, 86, 71, 0.32);
  border-radius: 0;
  background: rgba(255, 253, 238, 0.32);
  color: var(--guide-ink);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, 0.28);
}

/* Inserted story cards and system chapters. */
.event-backdrop,
.auth-overlay,
.cloud-conflict-overlay,
.building-upgrade-dialog,
.lottery-backdrop,
.daily-fortune-backdrop {
  background:
    radial-gradient(circle at 50% 24%, rgba(239, 220, 157, 0.16), transparent 38%),
    rgba(24, 38, 29, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.event-card,
.auth-card,
.auth-dialog,
.cloud-conflict-dialog,
.building-upgrade-card,
.shop-confirm-card,
.lottery-sheet,
.daily-fortune-invitation {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(100, 82, 46, 0.3);
  border-radius: 5px 18px 8px 15px;
  color: var(--guide-ink);
  background:
    linear-gradient(90deg, rgba(83, 67, 36, 0.1), transparent 7%, transparent 95%, rgba(83, 67, 36, 0.06)),
    var(--guide-paper-image) center / 580px auto repeat;
  box-shadow:
    var(--guide-shadow),
    inset 0 0 0 4px rgba(255, 255, 255, 0.22);
}

.event-card::after,
.auth-card::after,
.auth-dialog::after,
.cloud-conflict-dialog::after,
.building-upgrade-card::after,
.shop-confirm-card::after,
.lottery-sheet::after,
.daily-fortune-invitation::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(91, 74, 41, 0.13);
  pointer-events: none;
}

.auth-card {
  position: relative;
  margin: 0 0 14px;
  padding: 15px;
  border: 1px solid var(--guide-line);
  border-radius: 5px 14px 6px 12px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.58), rgba(235, 224, 189, 0.36)),
    var(--guide-paper-image) center / 500px auto;
  box-shadow:
    0 7px 17px rgba(61, 52, 32, 0.1),
    inset 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.auth-card::after {
  inset: 5px;
}

.auth-card .auth-status-pill {
  border: 1px solid rgba(88, 75, 45, 0.14);
  border-radius: 4px 9px 4px 9px;
  background: rgba(226, 220, 187, 0.5);
  color: var(--guide-ink);
}

.event-illustration {
  border-radius: 0;
  border-bottom: 1px solid var(--guide-line);
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.64), transparent 55%),
    rgba(193, 205, 171, 0.34);
}

.event-body,
.event-card p,
.auth-dialog p,
.cloud-conflict-dialog p,
.building-upgrade-card p {
  color: var(--guide-ink-soft);
}

.reward-item,
.cloud-conflict-meta div,
.auth-verification-steps li,
.building-upgrade-stats,
.stat-row {
  border: 1px solid rgba(93, 78, 45, 0.16);
  border-radius: 4px 10px 4px 9px;
  background: rgba(238, 228, 195, 0.44);
  box-shadow: none;
}

.shop-confirm-sheet {
  background: rgba(25, 39, 30, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Questionnaire as the opening pages of the player's own field guide. */
.questionnaire-overlay {
  padding: max(7px, var(--safe-top)) max(7px, calc(7px + var(--safe-right))) max(7px, calc(7px + var(--safe-bottom))) max(7px, calc(7px + var(--safe-left)));
  background:
    linear-gradient(180deg, rgba(30, 53, 40, 0.24), rgba(30, 53, 40, 0.32)),
    url("../../assets/runtime/ui/optimized/questionnaire-background.webp") center / cover no-repeat;
}

.questionnaire-panel {
  position: relative;
  padding: 21px 17px 17px 23px;
  border: 1px solid rgba(88, 72, 41, 0.3);
  border-radius: 5px 18px 8px 15px;
  color: var(--guide-ink);
  background:
    linear-gradient(90deg, var(--guide-sage-dark) 0 9px, transparent 9px),
    linear-gradient(90deg, rgba(85, 68, 35, 0.12), transparent 7%, transparent 95%, rgba(85, 68, 35, 0.06)),
    var(--guide-paper-image) center / 620px auto repeat;
  box-shadow: var(--guide-shadow);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.questionnaire-header {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--guide-line);
}

.questionnaire-progress,
.goal-chip,
.questionnaire-entry-card,
.questionnaire-summary {
  border: 1px solid rgba(91, 74, 42, 0.17);
  border-radius: 4px 10px 4px 9px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.48), rgba(232, 219, 180, 0.34)),
    var(--guide-paper-image) center / 430px auto;
  color: var(--guide-ink);
  box-shadow: 2px 4px 9px rgba(61, 51, 30, 0.07);
}

.questionnaire-footer {
  padding-top: 13px;
  border-top: 1px solid var(--guide-line);
}

/* Fortune and lottery become collectible inserts from the same journal. */
.lottery-sheet {
  border-radius: 12px 12px 0 0;
  background:
    linear-gradient(90deg, rgba(80, 65, 37, 0.1), transparent 7%, transparent 95%, rgba(80, 65, 37, 0.06)),
    var(--guide-paper-image) center / 560px auto repeat;
}

.lottery-close,
.building-upgrade-close,
.shop-confirm-card [aria-label="关闭"],
.auth-dialog [aria-label="关闭"] {
  border: 1px solid rgba(87, 72, 42, 0.18);
  border-radius: 4px 10px 4px 10px;
  color: var(--guide-ink);
  background: rgba(255, 251, 229, 0.68);
}

.lottery-grid button {
  border: 1px solid rgba(86, 73, 44, 0.22);
  border-radius: 4px 10px 4px 9px;
  color: var(--guide-ink);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.6), rgba(228, 214, 172, 0.44)),
    var(--guide-paper-image) center / 320px auto;
}

.lottery-grid button.is-selected {
  border-color: var(--guide-gold);
  color: #fff8e5;
  background:
    linear-gradient(145deg, rgba(93, 119, 84, 0.96), rgba(47, 75, 57, 0.98)),
    var(--guide-cover-image) center / cover;
}

.daily-fortune-invitation {
  color: var(--guide-ink);
}

.daily-fortune-invitation p,
.daily-fortune-invitation span {
  color: var(--guide-ink-soft);
}

.fortune-icon-halo {
  box-shadow: 0 16px 32px rgba(50, 44, 30, 0.22);
}

@media (max-width: 390px) {
  .shop-page,
  .home-page,
  .ai-cottage-page {
    padding-left: 20px;
    padding-right: 14px;
  }

  .shop-card {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 11px;
    padding: 10px;
  }

  .shop-preview,
  .shop-preview-img {
    min-height: 88px;
  }

  .home-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .home-hero > :last-child {
    grid-column: 1 / -1;
  }

  .home-character-card {
    grid-template-columns: 102px minmax(0, 1fr);
  }

  .ai-home-hero {
    grid-template-columns: 76px minmax(0, 1fr);
  }

  .ai-companion-orb {
    width: 76px;
    height: 76px;
  }

  .event-card,
  .auth-dialog,
  .cloud-conflict-dialog,
  .building-upgrade-card {
    padding: 20px 17px;
  }
}

/* Material pass: layered paper fibres, worn page edges and deeper binding
   shadows. These layers reuse the production book assets without making the
   interface look like a flat repeated bitmap. */

/* Cottage mobile layout guard: both cards must grow with translated copy.
   The previous compact rules kept the book texture, but clipped the third
   status line and the bottom stat row on narrow Android webviews. */
.ai-cottage-page .ai-mode-strip,
.ai-cottage-page .ai-mode-strip.is-ready {
  height: auto;
  min-height: 72px;
  padding-block: 10px 11px;
  overflow: visible;
}

.ai-cottage-page .ai-mode-strip > div {
  min-width: 0;
  display: grid;
  grid-auto-rows: max-content;
  align-content: center;
  gap: 3px;
}

.ai-cottage-page .ai-mode-strip .feature-kicker,
.ai-cottage-page .ai-mode-strip strong,
.ai-cottage-page .ai-mode-strip > div > span {
  position: static;
  display: block;
  min-height: 0;
  margin: 0;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
}

.ai-cottage-page .ai-home-hero {
  height: auto;
  min-height: 193px;
  grid-template-rows: auto auto;
  align-content: start;
  overflow: visible;
}

.ai-cottage-page .ai-home-copy {
  min-width: 0;
  align-self: center;
}

.ai-cottage-page .ai-status-grid {
  position: static;
  min-width: 0;
  align-self: stretch;
}

.ai-cottage-page .ai-status-grid span {
  min-height: 58px;
  align-content: center;
  overflow: visible;
}

@media (max-width: 390px) {
  .ai-cottage-page .ai-home-hero {
    min-height: 184px;
    grid-template-columns: 76px minmax(0, 1fr);
    column-gap: 11px;
    row-gap: 12px;
    padding: 13px;
  }

  .ai-cottage-page .ai-status-grid {
    gap: 6px;
  }

  .ai-cottage-page .ai-status-grid span {
    min-height: 56px;
    padding: 8px 6px;
  }
}
:root {
  --guide-paper-material:
    radial-gradient(ellipse at 17% 8%, rgba(255, 255, 255, 0.68), transparent 34%),
    radial-gradient(ellipse at 82% 91%, rgba(174, 139, 69, 0.09), transparent 42%),
    repeating-linear-gradient(7deg, rgba(105, 88, 50, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, rgba(98, 76, 38, 0.12), transparent 5%, transparent 94%, rgba(91, 70, 34, 0.1)),
    var(--guide-paper-image) center / 430px auto repeat;
  --guide-paper-shadow:
    0 1px 0 rgba(255, 255, 255, 0.78) inset,
    0 0 0 1px rgba(92, 72, 38, 0.13) inset,
    3px 5px 0 rgba(112, 91, 48, 0.045),
    0 13px 27px rgba(45, 46, 29, 0.14);
}

.shop-page,
.home-page,
.ai-cottage-page {
  background: var(--guide-paper-material);
  background-blend-mode: screen, multiply, multiply, multiply, normal;
}

.shop-card,
.home-growth-card,
.home-function-block,
.home-panel,
.home-decoration-card,
.home-character-card,
.home-settings-panel,
.ai-home-hero,
.ai-assistant-switch,
.ai-panel-card,
.ai-quick-button,
.ai-action-card,
.ai-config-card,
.message-bubble,
.auth-dialog,
.cloud-conflict-dialog,
.event-card,
.building-upgrade-card,
.lottery-sheet {
  border-color: rgba(91, 71, 36, 0.22);
  background: var(--guide-paper-material);
  background-blend-mode: screen, multiply, multiply, multiply, normal;
  box-shadow: var(--guide-paper-shadow);
}

.shop-card,
.home-panel,
.ai-panel-card,
.auth-dialog,
.event-card {
  outline: 1px solid rgba(255, 255, 255, 0.32);
  outline-offset: -4px;
}

.shop-header,
.home-hero,
.ai-cottage-header {
  border-bottom-color: rgba(91, 71, 36, 0.27);
  box-shadow:
    0 1px rgba(255, 255, 255, 0.62),
    0 8px 16px -15px rgba(52, 45, 27, 0.7);
}

.shop-tabs,
.home-entry-grid,
.auth-mode-tabs {
  border-bottom-color: rgba(91, 71, 36, 0.28);
  box-shadow: 0 1px rgba(255, 255, 255, 0.52);
}

.primary-button,
.shop-card-action,
.event-button {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.24) inset,
    0 -2px 4px rgba(24, 47, 33, 0.18) inset,
    0 6px 12px rgba(38, 61, 45, 0.2);
}

@media (prefers-reduced-motion: reduce) {
  .shop-card:nth-child(even),
  .home-character-orb,
  .home-character-portrait,
  .ai-companion-orb {
    transform: none;
  }
}

/* The map task launcher is a tiny field journal rather than a plain note.
   Its footprint stays compact so the centre die and nearby buildings remain
   unobstructed, while layered page edges carry the richer book concept. */
.town-view > .task-preview {
  width: 158px;
  min-height: 130px;
  gap: 2px;
  padding: 8px 10px 7px 20px;
  overflow: visible;
  border: 1px solid rgba(73, 59, 32, 0.36);
  border-radius: 3px 14px 7px 3px;
  background:
    radial-gradient(circle at 82% 17%, rgba(197, 156, 69, 0.13), transparent 24%),
    repeating-linear-gradient(180deg, transparent 0 20px, rgba(87, 103, 77, 0.075) 21px),
    var(--guide-paper-material);
  box-shadow:
    -5px 8px 20px rgba(31, 45, 31, 0.28),
    3px 3px 0 #e4d9b7,
    5px 5px 0 rgba(249, 242, 217, 0.92),
    7px 7px 0 rgba(86, 71, 38, 0.18),
    inset 2px 0 rgba(255, 255, 255, 0.48);
  transform: rotate(0.35deg);
}

.town-view > .task-preview::before {
  z-index: 0;
  top: -3px;
  bottom: -7px;
  left: -5px;
  width: 15px;
  border: 1px solid rgba(37, 58, 40, 0.48);
  border-radius: 4px 1px 2px 5px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, #2f5039, #6f8261 47%, #294735);
  box-shadow:
    inset -3px 0 5px rgba(24, 44, 30, 0.4),
    3px 0 5px rgba(53, 48, 30, 0.18);
}

.town-view > .task-preview::after {
  z-index: 4;
  top: -1px;
  right: -1px;
  width: 27px;
  height: 27px;
  background:
    linear-gradient(225deg, #ddcfa5 0 45%, rgba(104, 83, 43, 0.16) 47%, transparent 51%);
  filter: drop-shadow(-2px 2px 2px rgba(64, 54, 33, 0.1));
}

.town-view > .task-preview > * {
  position: relative;
  z-index: 2;
}

.town-view > .task-preview .task-preview-book-crest {
  height: 15px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: #8a6526;
}

.town-view > .task-preview .task-preview-botanical {
  font-family: Georgia, serif;
  font-size: 0.86rem;
  line-height: 1;
}

.town-view > .task-preview .task-preview-book-crest small {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.43rem;
  font-weight: 700;
  letter-spacing: 0.16em;
}

.town-view > .task-preview .section-heading {
  min-height: 23px;
  padding: 1px 17px 4px 0;
  border-bottom: 1px solid rgba(92, 72, 37, 0.28);
}

.town-view > .task-preview .section-heading::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: -2px;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.7);
}

.town-view > .task-preview .section-heading span {
  color: #354331;
  font-size: 0.87rem;
  letter-spacing: 0.03em;
}

.town-view > .task-preview .task-preview-trigger {
  min-height: 67px;
  gap: 5px;
  padding-top: 3px;
}

.town-view > .task-preview .task-preview-copy-block {
  gap: 1px;
}

.town-view > .task-preview .task-preview-title {
  font-size: 0.73rem;
  -webkit-line-clamp: 1;
}

.town-view > .task-preview .task-preview-copy {
  font-size: 0.58rem;
  -webkit-line-clamp: 1;
}

.town-view > .task-preview .task-preview-metric {
  position: relative;
  padding: 4px 5px 4px;
  overflow: hidden;
  border: 1px solid rgba(96, 118, 83, 0.1);
  background: rgba(133, 158, 121, 0.11);
}

.town-view > .task-preview .task-preview-metric::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--task-preview-progress, 0%);
  height: 2px;
  background: linear-gradient(90deg, #78906c, #c69a42);
  transition: width 300ms ease;
}

.town-view > .task-preview .task-preview-page-foot {
  height: 11px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  color: rgba(85, 71, 43, 0.7);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.38rem;
  letter-spacing: 0.1em;
}

.town-view > .task-preview .task-preview-page-foot b {
  min-width: 14px;
  padding-top: 1px;
  border-top: 1px solid rgba(111, 88, 43, 0.42);
  color: #765921;
  font-size: 0.48rem;
  text-align: center;
}

@media (max-height: 700px) {
  .town-view > .task-preview {
    min-height: 122px;
    padding-block: 6px;
  }

  .town-view > .task-preview .task-preview-book-crest {
    display: none;
  }
}

/* Purchased land resolves on the map only after the event page closes. The
   hotspot owns this short-lived overlay, so the reveal stays locked to the
   footprint through camera pan and zoom without moving the building sprite. */
.map-building-hotspot > [class^="land-arrival-"] {
  position: absolute;
  pointer-events: none;
  opacity: 0;
}

.map-building-hotspot .land-arrival-home {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 42%;
  width: 150%;
  max-width: none;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 45%) scale(.18);
  transform-origin: 50% 86%;
  filter: drop-shadow(0 12px 8px rgba(43, 50, 28, .28));
}

.map-building-hotspot.is-first-home .land-arrival-soil {
  width: 155%;
  height: 105%;
}

.map-building-hotspot.is-land-arriving .land-arrival-home {
  animation: first-home-pop 1.45s .28s cubic-bezier(.17,.84,.28,1.2) both;
}

.map-building-hotspot .land-arrival-ring {
  inset: -24%;
  border: 2px solid rgba(239, 205, 108, 0.9);
  border-radius: 50%;
  box-shadow:
    0 0 0 5px rgba(255, 243, 190, 0.18),
    0 0 24px rgba(223, 177, 63, 0.6);
}

.map-building-hotspot .land-arrival-soil {
  left: 50%;
  top: 50%;
  width: 110%;
  height: 62%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse, rgba(115, 79, 36, 0.35), rgba(160, 118, 53, 0.16) 52%, transparent 72%);
  transform: translate(-50%, -50%);
}

.map-building-hotspot .land-arrival-particles {
  inset: -55%;
}

.map-building-hotspot .land-arrival-particles i {
  --particle-index: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 13px;
  border-radius: 80% 20% 70% 30%;
  background: linear-gradient(145deg, #fffbe6, #d8c36e);
}

.map-building-hotspot .land-arrival-particles i:nth-child(2n) {
  background: linear-gradient(145deg, #b8cf8b, #6f915f);
}

.map-building-hotspot .land-arrival-particles i:nth-child(1) { --particle-index: 1; }
.map-building-hotspot .land-arrival-particles i:nth-child(2) { --particle-index: 2; }
.map-building-hotspot .land-arrival-particles i:nth-child(3) { --particle-index: 3; }
.map-building-hotspot .land-arrival-particles i:nth-child(4) { --particle-index: 4; }
.map-building-hotspot .land-arrival-particles i:nth-child(5) { --particle-index: 5; }
.map-building-hotspot .land-arrival-particles i:nth-child(6) { --particle-index: 6; }
.map-building-hotspot .land-arrival-particles i:nth-child(7) { --particle-index: 7; }
.map-building-hotspot .land-arrival-particles i:nth-child(8) { --particle-index: 8; }
.map-building-hotspot .land-arrival-particles i:nth-child(9) { --particle-index: 9; }
.map-building-hotspot .land-arrival-particles i:nth-child(10) { --particle-index: 10; }

.map-building-hotspot .land-arrival-label {
  left: 50%;
  bottom: 90%;
  width: max-content;
  padding: 5px 10px 6px;
  border: 1px solid rgba(90, 70, 36, 0.26);
  border-radius: 3px 11px 4px 9px;
  color: #3e5139;
  background:
    linear-gradient(rgba(255,255,255,.3), transparent),
    var(--guide-paper-image) center / 230px auto;
  box-shadow: 0 7px 15px rgba(42, 52, 34, 0.2);
  font-family: var(--guide-serif);
  font-size: 0.68rem;
  transform: translateX(-50%);
}

.map-building-hotspot.is-land-arriving .land-arrival-ring {
  animation: land-arrival-ring 1.4s cubic-bezier(.17,.78,.24,1) both;
}

.map-building-hotspot.is-land-arriving .land-arrival-soil {
  animation: land-arrival-soil 1.1s ease-out both;
}

.map-building-hotspot.is-land-arriving .land-arrival-particles {
  opacity: 1;
}

.map-building-hotspot.is-land-arriving .land-arrival-particles i {
  animation: land-arrival-petal 1.35s cubic-bezier(.18,.74,.2,1) calc(var(--particle-index) * 35ms) both;
}

.map-building-hotspot.is-land-arriving .land-arrival-label {
  animation: land-arrival-label 2.1s ease both;
}

@keyframes land-arrival-ring {
  0% { opacity: 0; transform: scale(.35) rotate(-12deg); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.55) rotate(8deg); }
}

@keyframes land-arrival-soil {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); filter: blur(5px); }
  40% { opacity: .85; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.35); filter: blur(0); }
}

@keyframes land-arrival-petal {
  0% { opacity: 0; transform: translate(-50%, -20%) rotate(0) scale(.2); }
  20% { opacity: 1; }
  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(calc(var(--particle-index) * 67deg))
      translateY(-62px)
      rotate(160deg)
      scale(.75);
  }
}

@keyframes land-arrival-label {
  0%, 12% { opacity: 0; transform: translate(-50%, 10px) scale(.9); }
  26%, 72% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -8px) scale(.96); }
}

@keyframes first-home-pop {
  0% { opacity: 0; transform: translate(-50%, 48%) scale(.16); }
  42% { opacity: 1; transform: translate(-50%, 2%) scale(1.12); }
  68% { opacity: 1; transform: translate(-50%, 6%) scale(.96); }
  88% { opacity: 1; transform: translate(-50%, 4%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, 4%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .map-building-hotspot.is-land-arriving .land-arrival-ring,
  .map-building-hotspot.is-land-arriving .land-arrival-soil,
  .map-building-hotspot.is-land-arriving .land-arrival-particles i {
    display: none;
    animation: none;
  }

  .map-building-hotspot.is-land-arriving .land-arrival-label {
    opacity: 1;
    animation: none;
  }
}