@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
  color-scheme: dark;
  --bg: #0c211d;
  --panel: #132b25;
  --line: #2d4438;
  --gold: #efd08a;
  --muted: #a3b4a8;
  --ink: #f0f0df;
  --green: #acd3a1;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", sans-serif;
  font-size: 16px;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button:focus-visible,
a:focus-visible,
.world:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 4px;
}
button {
  border: 0;
  background: transparent;
}
a {
  color: var(--gold);
}
.topbar {
  min-height: 86px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4%;
  gap: 20px;
}
.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
  letter-spacing: 2px;
  font-weight: 700;
}
.brandmark {
  color: var(--gold);
  font-size: 37px;
  line-height: 1;
}
.brand small {
  display: block;
  font-family: "DM Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 1.9px;
  font-weight: 400;
  color: var(--muted);
  margin-top: 5px;
}
.edition {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 2.4px;
}
nav {
  display: flex;
  gap: 8px;
}
nav button {
  font-size: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px 12px;
}
nav button:hover {
  background: #243c30;
  color: var(--gold);
}
main {
  max-width: 1580px;
  margin: auto;
  padding: 35px 4% 20px;
}
.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 25px;
  margin-bottom: 29px;
}
.eyebrow {
  font:
    600 11px "Space Grotesk",
    sans-serif;
  letter-spacing: 2px;
  color: var(--gold);
}
.eyebrow span {
  margin: 0 10px;
  color: #71896d;
}
h1,
h2,
h3 {
  font-family: "Space Grotesk", sans-serif;
}
h1 {
  font-size: 49px;
  line-height: 1.15;
  letter-spacing: -2px;
  margin: 9px 0 7px;
  font-weight: 500;
}
h1 span {
  color: var(--gold);
}
.heading p {
  color: var(--muted);
  margin: 0;
  font-size: 15px;
}
.chapter-progress {
  width: 250px;
}
.chapter-progress > span:first-child {
  font-size: 11px;
  letter-spacing: 1.6px;
  color: var(--gold);
}
.progress-track {
  height: 5px;
  background: #294437;
  border-radius: 3px;
  margin: 13px 0 8px;
  overflow: hidden;
}
.progress-track i {
  display: block;
  background: var(--gold);
  height: 100%;
  width: 0;
  transition: width 0.5s;
}
.small {
  font-size: 12px;
  color: var(--muted);
}
.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 302px;
  gap: 22px;
}
.world-wrap {
  border: 1px solid #496147;
  border-radius: 10px;
  overflow: hidden;
  background: #213c2b;
}
.world {
  position: relative;
  aspect-ratio: 1.5;
  overflow: hidden;
  outline-offset: -4px !important;
}
.world img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}
.world-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 75px #091e2390;
  background: linear-gradient(
    #062b1d40,
    transparent 25%,
    transparent 75%,
    #061d20a0
  );
}
.map-title {
  position: absolute;
  top: 22px;
  left: 24px;
  text-shadow: 0 2px 5px #071b1a;
}
.map-title span {
  font-size: 10px;
  letter-spacing: 3px;
  color: #e0dbb4;
}
.map-title strong {
  display: block;
  font-family: Georgia, serif;
  font-weight: 400;
  font-size: 30px;
  margin-top: 3px;
}
.weather {
  position: absolute;
  top: 25px;
  right: 24px;
  font-size: 20px;
  color: #f4de9f;
  text-shadow: 0 2px 5px #000;
}
.weather span {
  font-size: 12px;
  vertical-align: middle;
}
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  z-index: 2;
  padding: 3px;
  white-space: nowrap;
}
.pin .pin-icon {
  background: #132d27ed;
  border: 1px solid #e9c779;
  box-shadow:
    0 3px 0 #061812,
    0 0 20px #f3c57544;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  color: var(--gold);
  font-size: 16px;
  transition: transform 0.2s;
}
.pin .pin-label {
  background: #102820ed;
  border: 1px solid #77856880;
  padding: 5px 8px;
  border-radius: 3px;
  font-size: 11px;
  color: #f4f0d7;
  box-shadow: 0 2px 5px #10251e77;
}
.pin:hover .pin-icon {
  transform: translateY(-4px);
  background: #4c582e;
}
.pin.locked {
  opacity: 0.7;
}
.pin.locked .pin-icon {
  color: #c3cbb9;
  border-color: #97a48a;
}
.pin.done .pin-icon {
  background: #b4cea0;
  color: #152d22;
}
.pin.active .pin-icon {
  animation: glow 2.5s infinite;
}
.pin.active .pin-label {
  color: var(--gold);
}
@keyframes glow {
  50% {
    box-shadow: 0 0 25px #ffe3a590;
  }
}
#traveler {
  position: absolute;
  left: 18%;
  top: 84%;
  z-index: 3;
  pointer-events: none;
  transition:
    left 0.45s ease,
    top 0.45s ease;
  text-align: center;
  color: white;
  text-shadow: 0 2px #1e3029;
  font-size: 22px;
}
#traveler span {
  display: block;
  filter: drop-shadow(0 0 5px #fdf9b7);
}
#traveler i {
  display: block;
  width: 19px;
  height: 5px;
  border-radius: 50%;
  background: #102a2680;
}
.map-caption {
  position: absolute;
  bottom: 18px;
  left: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  background: #102820dc;
  padding: 9px 13px;
  border: 1px solid #65725a;
  border-radius: 4px;
  max-width: 82%;
}
.live-light {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.compass {
  position: absolute;
  right: 19px;
  bottom: 18px;
  font-family: Georgia, serif;
  color: #f1e6b7;
  text-align: center;
  line-height: 1.2;
  font-size: 21px;
}
.map-toolbar {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #162e26;
  color: var(--muted);
  font-size: 11px;
}
.map-toolbar b {
  font-weight: 500;
  color: #d7e0ce;
}
.map-toolbar kbd {
  font-size: 10px;
  padding: 3px;
  border: 1px solid #49614d;
  border-radius: 3px;
  margin: 0 4px;
}
.mobile-help {
  display: none;
}
.quest-panel {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 23px 22px;
  background: linear-gradient(140deg, #1b332a, #122921);
  display: flex;
  flex-direction: column;
}
.quest-top {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  align-items: center;
}
.quest-top .eyebrow {
  font-size: 10px;
  letter-spacing: 1.5px;
}
.tag {
  font-size: 9px;
  letter-spacing: 1px;
  padding: 5px 6px;
  background: #314633;
  color: #d0d8b8;
  border-radius: 3px;
}
.quest-panel h2 {
  font-size: 23px;
  letter-spacing: -0.6px;
  margin: 19px 0 9px;
  font-weight: 500;
}
.quest-intro {
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 18px;
}
#quest-list {
  padding: 0;
  margin: 0;
  list-style: none;
}
#quest-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  font-size: 13px;
  color: #8f9f90;
}
#quest-list li b {
  font-size: 11px;
  width: 24px;
  height: 24px;
  border: 1px solid #425443;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 400;
  flex-shrink: 0;
}
#quest-list li.current {
  color: var(--gold);
}
#quest-list li.current b {
  border-color: var(--gold);
  background: #594e2933;
}
#quest-list li.finished {
  color: #b5d5a8;
}
#quest-list li button {
  padding: 0;
  text-align: left;
  font-size: 13px;
}
.inventory {
  border-top: 1px solid var(--line);
  margin-top: 17px;
  padding-top: 19px;
}
.inventory .eyebrow {
  font-size: 10px;
  color: var(--muted);
}
#items {
  display: flex;
  gap: 9px;
  margin-top: 12px;
}
.item {
  width: 42px;
  height: 42px;
  border: 1px dashed #466045;
  background: #10251e;
  display: grid;
  place-items: center;
  color: #61745d;
  font-size: 22px;
  border-radius: 5px;
}
.item.earned {
  border: 1px solid #b8a56c;
  background: #394129;
  color: var(--gold);
}
.guide-note {
  display: flex;
  gap: 12px;
  color: var(--gold);
  margin-top: auto;
  padding-top: 22px;
}
.guide-note > span {
  font-size: 26px;
}
.guide-note p {
  margin: 0;
  font:
    italic 14px/1.6 Georgia,
    serif;
  color: #d3d9bd;
}
.guide-note small {
  display: block;
  font:
    9px "DM Sans",
    sans-serif;
  color: var(--muted);
  letter-spacing: 1.5px;
  margin-top: 10px;
}
footer {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
  padding: 21px 0 0;
  color: #8a9d8c;
  font-size: 10px;
  letter-spacing: 1px;
}
footer i {
  margin: 0 9px;
  color: var(--gold);
}
footer button {
  font-size: 12px;
  color: #b5c2ab;
  letter-spacing: 0;
}
.save-note {
  letter-spacing: 0;
  font-size: 11px;
}
dialog {
  border: 1px solid #627555;
  border-radius: 13px;
  background: #132a24;
  color: var(--ink);
  padding: 0;
  box-shadow: 0 25px 100px #000a;
  max-height: 90dvh;
}
dialog::backdrop {
  background: #04120dc9;
  backdrop-filter: blur(5px);
}
dialog button {
  min-height: 38px;
}
.welcome {
  width: 760px;
  max-width: calc(100% - 28px);
  text-align: center;
  overflow: hidden;
}
.welcome-art {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(#10261e3b, #10261eef 58%, #10261e),
    url("assets/hearthvale.webp") center 38% / cover;
}
.welcome-body {
  position: relative;
  padding: 55px 45px 30px;
}
.welcome-body > .eyebrow {
  text-shadow: 0 2px 8px black;
}
.welcome-key {
  font-size: 66px;
  color: #ffdc8d;
  margin: 24px 0 0;
  filter: drop-shadow(0 0 20px #fdd77c80);
}
.welcome h2 {
  font-size: 65px;
  letter-spacing: -3px;
  margin: 5px 0 15px;
  text-shadow: 0 3px 0 #203424;
  font-weight: 500;
}
.welcome p {
  font-size: 17px;
  line-height: 1.8;
  color: #e2e9d4;
}
.welcome-meta {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #c5d0b6;
  margin: 25px 0;
}
.primary {
  background: var(--gold);
  color: #193126;
  font-weight: 700;
  padding: 15px 23px;
  border: 1px solid #ffe6ad;
  border-radius: 5px;
  box-shadow: 0 4px 0 #8a7847;
  font-size: 16px;
}
.primary:hover {
  background: #ffe4a7;
  transform: translateY(-1px);
}
.primary span {
  margin-left: 35px;
}
.quiet {
  display: block;
  margin: 15px auto 0;
  color: #c2ceb7;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.welcome .fine {
  font-size: 11px;
  color: #b8c5af;
  margin-top: 20px;
}
.story {
  width: 720px;
  max-width: calc(100% - 24px);
}
.story-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 22px;
  border-bottom: 1px solid var(--line);
  background: #10241e;
  gap: 12px;
}
.story-top .eyebrow {
  font-size: 10px;
  letter-spacing: 1.4px;
}
.story-top button {
  color: #bfcdb6;
  font-size: 13px;
  padding: 5px 9px;
}
.story-top > div {
  display: flex;
  gap: 9px;
}
.story-body {
  padding: 29px 33px 23px;
  max-height: 70dvh;
  overflow: auto;
}
.character {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.character .sigil {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid #778263;
  border-radius: 50%;
  font-size: 23px;
  background: #283e2d;
}
.story h2 {
  font-size: 32px;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 18px 0;
}
.prose {
  font-size: 16px;
  line-height: 1.8;
  color: #d7e1d1;
}
.prose p {
  margin: 0 0 15px;
}
.choices {
  display: grid;
  gap: 10px;
  margin-top: 25px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  width: 100%;
  padding: 15px 17px;
  border: 1px solid #4a6149;
  background: #1e372c;
  border-radius: 6px;
  transition: 0.15s;
}
.choice:hover {
  border-color: var(--gold);
  background: #334530;
  transform: translateX(3px);
}
.choice > span:first-child {
  font: 13px monospace;
  border: 1px solid #657454;
  padding: 4px 7px;
  color: var(--gold);
  border-radius: 3px;
}
.choice strong {
  font-size: 15px;
  display: block;
  font-weight: 500;
}
.choice small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.choice > span:last-child {
  margin-left: auto;
  color: var(--gold);
}
.story-bottom {
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.story-bottom button {
  font-size: 12px;
  color: #ccd5be;
}
.story-bottom button:disabled {
  opacity: 0.35;
  cursor: default;
}
.lesson {
  border-left: 3px solid var(--gold);
  background: #d9cc8020;
  padding: 15px 17px;
  margin: 18px 0;
  font-size: 15px;
  line-height: 1.65;
  color: #e7e4c2;
}
.lesson small {
  display: block;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 1.5px;
  margin-bottom: 6px;
}
.numbers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #40523c;
  border: 1px solid #40523c;
  border-radius: 5px;
  overflow: hidden;
  margin: 18px 0;
}
.numbers div {
  background: #183127;
  padding: 13px 16px;
}
.numbers small {
  display: block;
  font-size: 11px;
  color: #adbfa6;
  margin-bottom: 6px;
}
.numbers strong {
  color: #ead597;
  font:
    22px "Space Grotesk",
    sans-serif;
}
.budget-control {
  padding: 16px;
  background: #10261f;
  border-radius: 6px;
  border: 1px solid #465d42;
}
.budget-control label {
  font-size: 14px;
}
input[type="range"] {
  width: 100%;
  accent-color: var(--gold);
  margin: 18px 0;
}
.budget-control output {
  display: block;
  color: var(--gold);
  font-size: 17px;
}
.utility {
  width: 740px;
  max-width: calc(100% - 24px);
}
#utility-body {
  padding: 28px 30px;
  max-height: 77dvh;
  overflow: auto;
}
#utility-body h2 {
  font-size: 29px;
  margin: 0 0 15px;
  font-weight: 500;
}
#utility-body p {
  line-height: 1.7;
  color: #c3d0bc;
}
#utility-body li {
  line-height: 1.7;
  margin-bottom: 10px;
  color: #d0dcc7;
}
.source-card {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.source-card a {
  font-size: 16px;
}
.source-card small {
  display: block;
  color: var(--muted);
  line-height: 1.6;
  margin-top: 6px;
}
.journal-entry {
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.journal-entry h3 {
  font-size: 17px;
  color: var(--gold);
  margin: 0 0 5px;
}
.journal-entry p {
  font-size: 14px;
  margin: 0;
}
.utility-actions {
  display: flex;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.secondary {
  padding: 12px 18px;
  border: 1px solid #607554;
  border-radius: 5px;
  color: #d5e1c7;
}
.series-card {
  padding: 22px;
  border: 1px solid #556846;
  border-radius: 8px;
  margin-top: 17px;
  background: linear-gradient(120deg, #293d2a, #172c24);
}
.series-card h3 {
  font-size: 26px;
  margin: 12px 0;
}
.series-card p {
  font-size: 15px;
}
.series-card .eyebrow {
  font-size: 10px;
}
.ending-seal {
  text-align: center;
  font-size: 65px;
  color: var(--gold);
  margin: 0;
}
.ending-title {
  text-align: center;
}
.complete-metrics {
  display: flex;
  justify-content: center;
  gap: 25px;
  padding: 15px;
  color: var(--gold);
  font-size: 13px;
}
#toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: #f0d493;
  color: #163024;
  padding: 13px 22px;
  border-radius: 5px;
  z-index: 20;
  transition: transform 0.3s;
  text-align: center;
  max-width: 90%;
  font-size: 14px;
  pointer-events: none;
}
#toast.show {
  transform: translateX(-50%) translateY(0);
}
button:disabled {
  cursor: default;
}
.muted {
  color: var(--muted);
}
.fact-link {
  color: var(--gold);
  font-size: 13px;
}
.outcome-note {
  font-size: 14px;
  color: var(--green);
  line-height: 1.7;
}
.scene-enter {
  animation: fade 0.3s ease;
}
@keyframes fade {
  from {
    opacity: 0.3;
    transform: translateY(7px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (min-width: 1450px) {
  .world {
    aspect-ratio: 1.55;
  }
  .quest-panel {
    padding: 28px;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
  }
  .quest-panel h2 {
    font-size: 25px;
  }
  #quest-list li {
    padding: 13px 0;
  }
}
@media (max-width: 1100px) {
  .edition {
    display: none;
  }
  .game-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
    gap: 15px;
  }
  .quest-panel {
    padding: 17px;
  }
  .world {
    aspect-ratio: 1.25;
  }
  .world img {
    object-fit: fill;
  }
  .desktop-help {
    display: none;
  }
  .mobile-help {
    display: block;
    font-size: 10px;
  }
  .guide-note {
    padding-top: 15px;
  }
  .pin .pin-label {
    font-size: 10px;
    padding: 4px 6px;
  }
  .map-toolbar {
    padding: 13px 12px;
  }
  .quest-intro {
    font-size: 12px;
  }
}
@media (max-width: 760px) {
  .topbar {
    padding: 13px 5%;
    min-height: 73px;
    gap: 10px;
  }
  .brand {
    font-size: 13px;
    letter-spacing: 1.3px;
  }
  .brand small {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .brandmark {
    font-size: 29px;
  }
  nav {
    gap: 5px;
  }
  nav button {
    padding: 8px;
    min-width: 35px;
  }
  nav button span {
    display: none;
  }
  main {
    padding: 24px 4% 18px;
  }
  .heading {
    align-items: flex-start;
    margin-bottom: 22px;
    gap: 15px;
  }
  .heading h1 {
    font-size: 36px;
  }
  .heading p {
    font-size: 13px;
    line-height: 1.5;
    max-width: 230px;
  }
  .heading .eyebrow {
    font-size: 9px;
  }
  .chapter-progress {
    width: 110px;
    padding-top: 11px;
    flex-shrink: 0;
  }
  .chapter-progress > span:first-child {
    font-size: 9px;
    line-height: 1.7;
    letter-spacing: 0.5px;
  }
  .chapter-progress .small {
    font-size: 10px;
    line-height: 1.5;
  }
  .game-layout {
    grid-template-columns: 1fr;
  }
  .world {
    aspect-ratio: 1.13;
  }
  .world img {
    object-fit: fill;
  }
  .map-title {
    top: 16px;
    left: 16px;
  }
  .map-title strong {
    font-size: 24px;
  }
  .map-title span {
    font-size: 8px;
  }
  .weather {
    top: 17px;
    right: 15px;
  }
  .weather span {
    font-size: 10px;
  }
  .pin .pin-icon {
    height: 30px;
    width: 30px;
    font-size: 14px;
  }
  .pin .pin-label {
    font-size: 9px;
  }
  .map-caption {
    font-size: 10px;
    bottom: 13px;
    left: 12px;
    padding: 8px;
  }
  .compass {
    font-size: 18px;
    right: 12px;
  }
  .quest-panel {
    padding: 22px;
  }
  .quest-panel h2 {
    margin: 13px 0 8px;
  }
  .quest-intro {
    font-size: 14px;
  }
  #quest-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 14px;
  }
  #quest-list li {
    font-size: 12px;
    align-items: flex-start;
  }
  #quest-list li button {
    font-size: 12px;
    padding-top: 4px;
  }
  .guide-note {
    display: none;
  }
  .inventory {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
    padding-top: 15px;
  }
  #items {
    margin: 0;
  }
  .item {
    height: 35px;
    width: 35px;
    font-size: 19px;
  }
  footer {
    flex-wrap: wrap;
    font-size: 9px;
    line-height: 1.5;
    padding-top: 18px;
  }
  footer button {
    font-size: 11px;
  }
  .save-note {
    font-size: 10px;
  }
  .welcome-body {
    padding: 30px 22px 20px;
  }
  .welcome h2 {
    font-size: 49px;
  }
  .welcome p {
    font-size: 15px;
  }
  .welcome-meta {
    font-size: 11px;
    gap: 10px;
  }
  .welcome-key {
    margin-top: 20px;
    font-size: 53px;
  }
  .welcome .fine {
    font-size: 10px;
  }
  .story-body {
    padding: 22px 21px;
  }
  .story h2 {
    font-size: 28px;
  }
  .prose {
    font-size: 16px;
    line-height: 1.75;
  }
  .story-top {
    padding: 10px 13px;
  }
  .story-top .eyebrow {
    font-size: 9px;
  }
  .story-top button {
    font-size: 11px;
    padding: 4px;
  }
  .story-bottom {
    padding: 8px 12px;
    font-size: 10px;
  }
  .story-bottom button {
    font-size: 11px;
  }
  .choice {
    padding: 13px 11px;
    gap: 10px;
  }
  .choice strong {
    font-size: 14px;
  }
  .choice small {
    font-size: 12px;
  }
  #utility-body {
    padding: 23px 21px;
  }
  .numbers strong {
    font-size: 20px;
  }
  .numbers div {
    padding: 12px;
  }
  .complete-metrics {
    gap: 15px;
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  body {
    background: white;
    color: black;
  }
  .topbar,
  main,
  #welcome,
  #story,
  .story-top,
  .utility-actions {
    display: none;
  }
  #utility {
    display: block;
    position: static;
    border: 0;
    box-shadow: none;
    max-height: none;
    width: 100%;
    background: white;
    color: black;
  }
  #utility-body {
    max-height: none;
    overflow: visible;
  }
  #utility-body p,
  #utility-body li,
  .journal-entry h3 {
    color: black;
  }
}
/* Guided opening and player identity */
.topbar .edition {
  display: none;
}
.topbar nav {
  flex-wrap: wrap;
  justify-content: flex-end;
}
nav button {
  font-size: 13px;
  padding: 9px;
}
.objective-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: linear-gradient(90deg, #35412b, #1b3327);
  border: 1px solid #7d8250;
  border-radius: 7px;
  padding: 17px 20px;
  margin-bottom: 20px;
}
.objective-bar p {
  margin: 6px 0 0;
  color: #e2e7cb;
  font-size: 14px;
  line-height: 1.55;
}
.objective-bar .primary {
  font-size: 13px;
  flex-shrink: 0;
  padding: 12px 16px;
}
.objective-bar .eyebrow {
  font-size: 10px;
}
.hero-token {
  width: 34px;
  height: 47px;
  display: block !important;
  background-image: url("assets/adventurers.webp");
  background-size: 300% 100%;
  border: 1px solid #eace80;
  border-radius: 8px;
  box-shadow: 0 0 16px #f4d88b99;
  filter: none !important;
}
#traveler {
  transform: translate(-50%, -70%);
}
#traveler i {
  margin: auto;
}
.setup {
  width: 900px;
  max-width: calc(100% - 24px);
  background: #112a22;
}
.setup-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding: 18px 27px;
}
.setup-content {
  padding: 27px 35px;
  max-height: 80dvh;
  overflow: auto;
}
.setup h2 {
  font-size: 34px;
  letter-spacing: -1px;
  font-weight: 500;
  margin: 0 0 10px;
}
.setup-content > p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 22px;
}
.hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 13px;
  margin-bottom: 23px;
}
.hero-card {
  padding: 0 0 15px;
  border: 1px solid #446146;
  background: #102820;
  border-radius: 8px;
  overflow: hidden;
  text-align: center;
  transition: border-color 0.2s;
}
.hero-card.selected {
  border: 2px solid var(--gold);
  box-shadow: 0 0 20px #f1d78a20;
}
.hero-art {
  display: block;
  background-image: url("assets/adventurers.webp");
  background-size: 300% 100%;
  background-repeat: no-repeat;
}
.hero-card .hero-art {
  width: 100%;
  aspect-ratio: 0.9;
  max-height: 240px;
}
.hero-card strong {
  display: block;
  font:
    19px "Space Grotesk",
    sans-serif;
  color: var(--ink);
}
.hero-card small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  padding: 6px 8px;
}
.hero-selected {
  display: inline-block;
  font-size: 11px;
  color: var(--gold);
  margin-top: 5px;
}
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.profile-grid label,
.profile-fields label {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
  color: #d5ddc8;
}
input[type="text"],
select {
  background: #0c221b;
  border: 1px solid #557052;
  border-radius: 5px;
  font:
    16px "DM Sans",
    sans-serif;
  color: #eceddc;
  padding: 12px 13px;
  width: 100%;
  min-height: 47px;
}
input[type="text"]:focus,
select:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.setup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 26px;
}
.setup-actions .primary {
  font-size: 14px;
}
.privacy-note {
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: #9eb29b;
  margin: 22px 0 0 !important;
}
.profile-hero {
  display: flex;
  gap: 20px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  margin-bottom: 22px;
}
.profile-hero .hero-art {
  width: 86px;
  height: 125px;
  border: 1px solid #6d7850;
  border-radius: 7px;
  flex-shrink: 0;
}
.profile-hero h3 {
  font-size: 29px;
  margin: 8px 0;
}
.profile-hero p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.5;
}
.profile-fields {
  display: grid;
  gap: 18px;
}
.prologue {
  width: 1020px;
  max-width: calc(100% - 24px);
  overflow: hidden;
  border-color: #a19059;
}
.cinema-scene {
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #102820;
}
.cinema-art {
  position: absolute;
  inset: 0;
  background: url("assets/hearthvale.webp") var(--scene-position) / 180% auto
    no-repeat;
  animation: camera-drift 12s linear both;
  image-rendering: pixelated;
}
.cinema-art.paused {
  animation-play-state: paused;
}
.cinema-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    #071c2180,
    transparent 25%,
    #092219ba 48%,
    #081e19 93%
  );
}
@keyframes camera-drift {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.12);
  }
}
.cinema-controls {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  gap: 12px;
}
.cinema-controls button {
  font-size: 12px;
  background: #0b221ee0;
  border: 1px solid #80916b;
  padding: 6px 10px;
  border-radius: 4px;
}
.cinema-controls > div {
  display: flex;
  gap: 8px;
}
.cinema-caption {
  position: relative;
  padding: 170px 55px 35px;
}
.cinema-caption h2 {
  font-size: 45px;
  letter-spacing: -1.8px;
  font-weight: 500;
  max-width: 670px;
  margin: 16px 0;
}
.cinema-caption p {
  font-size: 17px;
  line-height: 1.85;
  max-width: 760px;
  color: #e3e8d4;
  min-height: 95px;
}
.cinema-progress {
  display: flex;
  gap: 8px;
  margin: 28px 0 18px;
}
.cinema-progress button {
  flex: 1;
  height: 5px;
  min-height: 5px;
  border-radius: 2px;
  background: #506548;
  cursor: pointer;
}
.cinema-progress button.viewed {
  background: var(--gold);
}
.cinema-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.cinema-bottom > span {
  font-size: 12px;
  color: var(--muted);
}
.cinema-bottom button {
  font-size: 13px;
}
.sound-panel {
  width: 360px;
  max-width: calc(100% - 30px);
  z-index: 50;
}
.sound-body {
  padding: 25px;
}
.sound-body label {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  margin-top: 12px;
}
.sound-body output {
  color: var(--gold);
}
.sound-body input {
  margin: 18px 0;
}
.sound-body .secondary {
  width: 100%;
  margin-bottom: 16px;
}
.sound-body .small {
  line-height: 1.6;
}
.buying-roadmap {
  list-style: none;
  padding: 0;
  counter-reset: stage;
}
.buying-roadmap li {
  position: relative;
  margin: 0;
  padding: 0 0 17px 42px;
  counter-increment: stage;
  border-left: 1px solid #6c7a54;
  margin-left: 14px;
}
.buying-roadmap li:last-child {
  border-left-color: transparent;
}
.buying-roadmap li::before {
  content: counter(stage);
  position: absolute;
  left: -14px;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #395037;
  color: var(--gold);
  font-size: 13px;
  border: 1px solid #8a915e;
}
.buying-roadmap b {
  display: block;
  font-weight: 500;
  font-size: 15px;
}
.buying-roadmap span {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  display: block;
  margin-top: 5px;
}
.how-steps li {
  padding-bottom: 8px;
}
.how-steps b {
  color: var(--gold);
}
.plan-heading {
  display: flex;
  align-items: center;
  gap: 20px;
}
.plan-heading .hero-art {
  width: 84px;
  height: 133px;
  flex-shrink: 0;
  border: 1px solid #78805c;
  border-radius: 5px;
}
.plan-heading h2 {
  margin: 9px 0 !important;
  font-size: 29px !important;
}
.plan-heading p {
  margin: 0;
  font-size: 13px !important;
}
.plan-focus {
  border: 1px solid #758354;
  border-radius: 7px;
  background: #31422b;
  padding: 18px;
  margin: 22px 0;
}
.plan-focus h3 {
  font-size: 23px;
  margin: 10px 0;
}
.plan-focus p {
  font-size: 14px !important;
  margin: 0;
}
.plan-progress > span {
  font-size: 13px;
  color: var(--muted);
}
.plan-progress .progress-track i {
  width: 0;
}
.plan-checklist {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}
.plan-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  border: 1px solid #496043;
  border-radius: 6px;
  padding: 17px;
  cursor: pointer;
}
.plan-checklist input {
  accent-color: var(--gold);
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  flex-shrink: 0;
}
.plan-checklist strong {
  display: block;
  font-size: 15px;
  font-weight: 500;
}
.plan-checklist small {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 6px;
}
.plan-checklist label:has(input:checked) {
  background: #2a412b;
  border-color: #91a371;
}
.plan-checklist label:has(input:checked) strong {
  color: var(--gold);
}
@media (max-width: 900px) {
  .topbar {
    align-items: flex-start;
  }
  .topbar nav {
    max-width: 400px;
  }
  .topbar .brand {
    margin-top: 7px;
  }
  nav button {
    font-size: 12px;
  }
  nav button span {
    display: none;
  }
  .objective-bar {
    align-items: flex-start;
  }
  .objective-bar p {
    font-size: 13px;
  }
  .objective-bar .primary {
    font-size: 12px;
    max-width: 210px;
    line-height: 1.5;
  }
  .cinema-scene {
    min-height: 560px;
  }
  .cinema-caption {
    padding: 150px 35px 30px;
  }
  .cinema-caption h2 {
    font-size: 36px;
  }
  .cinema-art {
    background-size: auto 120%;
  }
}
@media (max-width: 600px) {
  .objective-bar {
    display: block;
    padding: 15px;
  }
  .objective-bar .primary {
    width: 100%;
    max-width: none;
    margin-top: 12px;
  }
  .setup-top {
    padding: 14px 18px;
  }
  .setup-content {
    padding: 21px 17px;
  }
  .setup h2 {
    font-size: 27px;
  }
  .hero-grid {
    gap: 7px;
  }
  .hero-card .hero-art {
    max-height: 155px;
    aspect-ratio: 0.7;
  }
  .hero-card strong {
    font-size: 13px;
  }
  .hero-card small {
    font-size: 10px;
    padding: 5px;
    min-height: 40px;
  }
  .hero-selected {
    font-size: 10px;
  }
  .profile-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  .setup-actions {
    gap: 12px;
    align-items: flex-start;
  }
  .setup-actions > .small {
    font-size: 11px;
    max-width: 120px;
    line-height: 1.5;
  }
  .setup-actions .primary {
    font-size: 12px;
    padding: 13px;
  }
  .setup .privacy-note {
    font-size: 11px !important;
  }
  .setup-content > p {
    font-size: 14px;
  }
  .profile-hero {
    gap: 15px;
  }
  .profile-hero .hero-art {
    width: 65px;
    height: 95px;
  }
  .profile-hero h3 {
    font-size: 24px;
  }
  .profile-hero p {
    font-size: 12px;
  }
  .cinema-controls {
    padding: 12px;
    flex-wrap: wrap;
  }
  .cinema-controls > .eyebrow {
    font-size: 9px;
  }
  .cinema-controls button {
    font-size: 10px;
    padding: 5px 8px;
  }
  .cinema-scene {
    min-height: 540px;
  }
  .cinema-caption {
    padding: 115px 22px 24px;
  }
  .cinema-caption h2 {
    font-size: 31px;
  }
  .cinema-caption p {
    font-size: 15px;
    line-height: 1.75;
    min-height: 120px;
  }
  .cinema-caption > .eyebrow {
    font-size: 9px;
  }
  .cinema-bottom {
    gap: 9px;
    flex-wrap: wrap;
  }
  .cinema-bottom > span {
    font-size: 10px;
  }
  .cinema-bottom .primary {
    font-size: 12px;
    padding: 12px 14px;
  }
  .cinema-bottom .secondary {
    font-size: 11px;
    padding: 10px;
  }
  .cinema-progress {
    margin: 23px 0 15px;
  }
  .plan-heading {
    gap: 15px;
  }
  .plan-heading .hero-art {
    width: 61px;
    height: 108px;
  }
  .plan-heading h2 {
    font-size: 24px !important;
  }
  .hero-token {
    width: 27px;
    height: 37px;
  }
  .plan-focus h3 {
    font-size: 21px;
  }
  .chapter-progress {
    width: 102px;
  }
  .story-top > div {
    gap: 4px;
  }
  #story-volume {
    font-size: 10px;
  }
  .topbar nav {
    gap: 4px;
  }
  nav button {
    min-width: 28px;
    padding: 7px;
  }
}

/* ===================== v2: movement, coins, camera, flag, Erik, arcade, lead ===================== */
.world-layer {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  transition: transform 0.35s ease-out;
  will-change: transform;
}
.world.zoomed .world-layer {
  transition: transform 0.12s linear;
}
.world.zoomed .pin .pin-label {
  font-size: 9px;
}
.world.zoomed .pin .pin-icon {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
.world.zoomed .map-coin {
  width: 12px;
  height: 12px;
}
.world.zoomed #traveler {
  font-size: 14px;
}
.world.zoomed .hero-token {
  width: 24px;
  height: 33px;
}
.world.zoomed .enter-hint {
  font-size: 9px;
}
.zoom-toggle {
  position: absolute;
  right: 12px;
  bottom: 58px;
  z-index: 6;
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #132d27dd;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 18px;
}
.zoom-toggle[aria-pressed="true"] {
  border-color: var(--gold);
}
@media (max-width: 700px) {
  .zoom-toggle {
    display: grid;
    place-items: center;
  }
}
#traveler {
  transition: none;
  z-index: 4;
}
#traveler.walking .hero-token {
  animation: walk-bob 0.32s steps(2, end) infinite;
}
@keyframes walk-bob {
  0% { translate: 0 0; }
  50% { translate: 0 -3px; }
  100% { translate: 0 0; }
}
.hero-token {
  transition: transform 0.1s;
  image-rendering: pixelated;
}
.hero-token.avatar {
  background-size: cover !important;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  border: 2px solid #eace80;
}
.dust {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #e9dcc0aa;
  pointer-events: none;
  animation: dust 0.6s ease-out forwards;
  z-index: 3;
}
@keyframes dust {
  to { transform: translate(-6px, -10px) scale(2.2); opacity: 0; }
}
.enter-hint {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -8px);
  white-space: nowrap;
  background: #132d27f0;
  border: 1px solid var(--gold);
  color: var(--ink);
  font-size: 11px;
  letter-spacing: 1px;
  padding: 5px 8px;
  border-radius: 8px;
  box-shadow: 0 3px 0 #061812;
  animation: hint-pop 0.25s ease-out;
}
.enter-hint kbd {
  background: var(--gold);
  color: #102823;
  border-radius: 4px;
  padding: 1px 5px;
  font-weight: 700;
  margin-right: 4px;
}
.enter-hint[hidden] {
  display: none;
}
@keyframes hint-pop {
  from { transform: translate(-50%, 0); opacity: 0; }
}
.pin.near .pin-icon {
  transform: scale(1.18);
  box-shadow: 0 3px 0 #061812, 0 0 24px #f3c575aa;
}
.pin.teaser .pin-icon {
  background: #1b1f33ee;
  border-color: #8aa3ff;
  color: #cfd9ff;
  animation: twinkle 3s ease-in-out infinite;
}
.pin.teaser .pin-label {
  color: #cfd9ff;
}
@keyframes twinkle {
  50% { box-shadow: 0 3px 0 #061812, 0 0 26px #8aa3ff88; }
}
.map-coin {
  position: absolute;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff6d5, #efd08a 45%, #a06e30 100%);
  box-shadow: 0 2px 0 #4a3a10, 0 0 14px #efd08a99;
  animation: coin-float 1.6s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes coin-float {
  50% { transform: translateY(-4px) scaleX(0.6); }
}
.map-coin.taken {
  animation: coin-take 0.7s ease-out forwards;
}
@keyframes coin-take {
  to { transform: translateY(-40px) scale(1.6); opacity: 0; }
}
.secret {
  position: absolute;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  z-index: 2;
  padding: 0;
  opacity: 0.35;
}
.secret i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b9c8ff;
  box-shadow: 0 0 8px #b9c8ff;
  animation: shimmer 2.4s ease-in-out infinite;
}
.secret i:nth-child(1) { left: 6px; top: 12px; }
.secret i:nth-child(2) { left: 16px; top: 4px; animation-delay: 0.8s; }
.secret i:nth-child(3) { left: 24px; top: 16px; animation-delay: 1.6s; }
@keyframes shimmer {
  0%, 100% { opacity: 0.2; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}
.secret.found, .secret.open {
  opacity: 1;
  border: 1px dashed #b9c8ff88;
  background: radial-gradient(circle, #b9c8ff33, transparent 70%);
}
.secret.open i {
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
}
.flag-star {
  animation: twinkle-star 1.2s ease-in-out infinite;
  transform-origin: 104px 18px;
}
@keyframes twinkle-star {
  50% { transform: scale(1.3); opacity: 0.6; }
}
.dpad {
  display: none;
  grid-template-columns: 56px 56px 56px;
  grid-template-rows: 48px 48px 48px;
  gap: 6px;
  justify-content: center;
  margin: 14px auto 0;
}
.dpad button {
  border-radius: 12px;
  border: 2px solid var(--line);
  background: var(--panel);
  color: var(--gold);
  font-size: 18px;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.dpad button:active {
  background: #1e4033;
}
.dpad [data-dir="up"] { grid-column: 2; grid-row: 1; }
.dpad [data-dir="left"] { grid-column: 1; grid-row: 2; }
.dpad .dpad-act { grid-column: 2; grid-row: 2; border-color: var(--gold); font-size: 22px; }
.dpad [data-dir="right"] { grid-column: 3; grid-row: 2; }
.dpad [data-dir="down"] { grid-column: 2; grid-row: 3; }
@media (pointer: coarse) {
  .dpad {
    display: grid;
  }
}
.coin-pouch {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0e2621;
}
.coin-pouch .coin-icon {
  font-size: 24px;
  color: var(--gold);
  text-shadow: 0 0 12px #efd08a88;
}
.coin-pouch b {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 18px;
  color: var(--gold);
}
.coin-pouch small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}
.coin-pouch.bump {
  animation: bump 0.4s ease-out;
}
@keyframes bump {
  30% { transform: scale(1.04); border-color: var(--gold); }
}
.item.bonus.earned {
  border-color: #b9c8ff;
  color: #cfd9ff;
}
footer .legal {
  flex-basis: 100%;
  color: #6f8277;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}
footer b {
  color: var(--gold);
  font-weight: 600;
}

/* Erik bubble */
.erik-bubble {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.erik-bubble[hidden] {
  display: none;
}
.bubble-say {
  max-width: 230px;
  background: #fff9ea;
  color: #1c2a25;
  font-size: 13px;
  line-height: 1.35;
  padding: 9px 12px;
  border-radius: 14px 14px 4px 14px;
  border: 2px solid #efd08a;
  box-shadow: 0 6px 20px #00000055;
  position: relative;
  animation: say-in 0.4s ease-out;
}
.bubble-say::after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -9px;
  border: 8px solid transparent;
  border-top-color: #efd08a;
  border-bottom: 0;
}
@keyframes say-in {
  from { transform: translateY(8px); opacity: 0; }
}
.erik-bubble.dismissed .bubble-say {
  display: none;
}
.bubble-face {
  position: relative;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  padding: 0;
  border: 3px solid #efd08a;
  background: #061744;
  box-shadow: 0 8px 24px #00000077, 0 0 0 4px #06174455;
  overflow: visible;
  transition: transform 0.15s;
}
.bubble-face:hover {
  transform: scale(1.06);
}
.bubble-face img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  image-rendering: pixelated;
  display: block;
}
.bubble-dot {
  position: absolute;
  right: 2px;
  top: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #16c803;
  border: 2px solid #fff;
}
.bubble-card {
  width: min(340px, calc(100vw - 36px));
  background: var(--panel);
  border: 1px solid var(--gold);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 20px 50px #000000aa;
  position: relative;
  animation: say-in 0.25s ease-out;
}
.bubble-card[hidden] {
  display: none;
}
.bubble-close {
  position: absolute;
  right: 10px;
  top: 10px;
  color: var(--muted);
  font-size: 16px;
}
.bubble-head {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.bubble-head img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  image-rendering: pixelated;
  border: 2px solid var(--gold);
}
.bubble-head strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 17px;
}
.bubble-head small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}
.bubble-card p {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: #d9dccb;
}
.bubble-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.bubble-actions .primary {
  grid-column: 1 / -1;
  text-decoration: none;
  justify-content: center;
}
.bubble-actions a,
.bubble-actions button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 14px;
  padding: 10px 12px;
}
.bubble-actions [hidden] {
  display: none;
}
.bubble-legal {
  display: block;
  margin-top: 10px;
  color: #6f8277;
  font-size: 10px;
  line-height: 1.4;
}
@media (max-width: 760px) {
  .erik-bubble {
    right: 10px;
    bottom: 10px;
  }
  .bubble-face {
    width: 56px;
    height: 56px;
  }
  .bubble-say {
    max-width: 190px;
    font-size: 12px;
  }
}

/* Lead form dialog */
.lead {
  width: min(520px, 94vw);
  padding: 0;
}
.lead-form {
  margin: 0;
}
.lead-body {
  padding: 18px 22px 22px;
}
.lead-presenter {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.lead-presenter img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--gold);
}
.lead-presenter strong {
  display: block;
}
.lead-presenter small {
  color: var(--muted);
  font-size: 12px;
}
.lead-body h2 {
  margin: 0 0 8px;
  font-family: "Space Grotesk", sans-serif;
}
.lead-body > p {
  color: #d9dccb;
  line-height: 1.5;
  margin: 0 0 14px;
}
.lead-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lead-fields label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 13px;
  color: var(--muted);
}
.lead-fields label:first-child,
.lead-fields .wide {
  grid-column: 1 / -1;
}
.lead-fields input,
.lead-fields textarea {
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #0e2621;
  color: var(--ink);
}
.lead-fields input:focus,
.lead-fields textarea:focus {
  outline: 2px solid var(--gold);
  border-color: var(--gold);
}
.lead-fields .hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}
.lead-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 12px 0 4px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
}
.lead-consent input {
  margin-top: 2px;
  accent-color: var(--gold);
}
.lead-error {
  color: #ffb4a8;
  font-size: 13px;
  margin: 8px 0 0;
}
.lead-error[hidden] {
  display: none;
}
@media (max-width: 520px) {
  .lead-fields {
    grid-template-columns: 1fr;
  }
}

/* Story extras */
.character .portrait {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 2px solid var(--gold);
  image-rendering: pixelated;
  object-fit: cover;
  margin-right: 10px;
  vertical-align: middle;
  display: inline-block;
  background-size: cover;
}
.character .hero-portrait {
  background-image: url("assets/adventurers.webp");
  background-size: 300% 100%;
}
.character .hero-portrait.avatar {
  background-size: cover;
}
.numbers.three {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 600px) {
  .numbers.three {
    grid-template-columns: 1fr;
  }
}
.az-notes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0 6px;
}
.az-notes div {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  background: #0e2621;
}
.az-notes b {
  display: block;
  color: var(--gold);
  font-family: "Space Grotesk", sans-serif;
}
.az-notes span {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0 6px;
}
.az-notes p {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.45;
}
.az-notes a {
  font-size: 13px;
}
@media (max-width: 600px) {
  .az-notes {
    grid-template-columns: 1fr;
  }
}
.minigame-launch {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  margin: 16px 0 4px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px dashed var(--gold);
  background: linear-gradient(90deg, #1e4033, #132b25);
  color: var(--ink);
  transition: transform 0.15s, background 0.15s;
}
.minigame-launch:hover {
  transform: translateY(-2px);
  background: linear-gradient(90deg, #26503f, #173a2f);
}
.minigame-launch .mg-icon,
.arcade-row .mg-icon {
  font-size: 26px;
  color: var(--gold);
  width: 40px;
  text-align: center;
}
.minigame-launch strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
}
.minigame-launch small {
  color: var(--muted);
  font-size: 12px;
}
.minigame-launch > span:last-child {
  margin-left: auto;
  color: var(--gold);
  font-size: 22px;
}
.arcade-host-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  gap: 10px;
}
.arcade-list {
  display: grid;
  gap: 10px;
  margin: 12px 0;
}
.arcade-row {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  background: #0e2621;
}
.arcade-row > div:first-of-type {
  flex: 1;
  min-width: 0;
}
.arcade-row strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
}
.arcade-row small {
  display: block;
  font-size: 12px;
  color: #d9dccb;
}
.arcade-row small.muted {
  color: var(--muted);
}
.arcade-row-actions {
  display: flex;
  gap: 6px;
}
.arcade-row-actions .primary {
  padding: 8px 14px;
}
@media (max-width: 520px) {
  .arcade-row {
    flex-wrap: wrap;
  }
  .arcade-row-actions {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Setup: photo */
.photo-row {
  display: flex;
  gap: 16px;
  align-items: center;
  margin: 16px 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  background: #0e2621;
}
.photo-preview {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 14px;
  border: 2px solid var(--gold);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #0c211d;
}
.photo-preview img {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  display: block;
}
.photo-empty {
  font-size: 36px;
  color: #2d4438;
}
.photo-row strong {
  font-family: "Space Grotesk", sans-serif;
}
.photo-row .small {
  margin: 4px 0 8px;
}
.photo-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.file-btn {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.photo-status[hidden] {
  display: none;
}
.hero-art.avatar,
.plan-heading .hero-art.avatar,
.profile-hero .hero-art.avatar {
  background-size: cover !important;
  background-position: center !important;
  border-radius: 14px;
  image-rendering: pixelated;
}
@media (max-width: 520px) {
  .photo-row {
    flex-direction: column;
    text-align: center;
  }
  .photo-actions {
    justify-content: center;
  }
}

/* Series & plan */
.series-card.next {
  border-color: #8aa3ff66;
}
.series-card.focus {
  box-shadow: 0 0 0 2px var(--gold);
}
.series-card.planned {
  opacity: 0.8;
}
.teaser-list {
  margin: 8px 0 12px;
  padding-left: 18px;
  color: #d9dccb;
  font-size: 14px;
  line-height: 1.5;
}
.plan-erik {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--gold);
  background: #0e2621;
}
.plan-erik img {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  image-rendering: pixelated;
  border: 2px solid var(--gold);
  flex: none;
}
.plan-erik strong {
  display: block;
  font-family: "Space Grotesk", sans-serif;
}
.plan-erik small {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.card-preview {
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  border: 1px solid var(--line);
  display: block;
  margin: 12px auto;
}
.journal-entry.bonus h3 {
  color: #cfd9ff;
}
@media (prefers-reduced-motion: reduce) {
  .map-coin, .secret i, .flag-star, .pin.teaser .pin-icon, #traveler.walking .hero-token, .flag-cloth {
    animation: none !important;
  }
  .world-layer {
    transition: none;
  }
}
/* Zoomed camera: keep overlays small so they read at 1.9× */
.world.zoomed .pin .pin-label { font-size: 7px; padding: 2px 5px; }
.world.zoomed .pin .pin-icon { width: 18px; height: 18px; font-size: 10px; border-radius: 4px; }
.world.zoomed .pin { gap: 3px; }
.world.zoomed .map-coin { width: 9px; height: 9px; margin: -4px 0 0 -4px; }
.world.zoomed .hero-token { width: 20px; height: 28px; border-radius: 5px; }
.world.zoomed .hero-token.avatar { width: 24px; height: 24px; }
.world.zoomed #traveler i { width: 12px; height: 3px; }
.world.zoomed .secret { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
.world.zoomed .enter-hint { font-size: 7px; padding: 3px 5px; }
.world.zoomed .dust { width: 5px; height: 5px; }
.world.zoomed .map-title, .world.zoomed .weather, .world.zoomed .compass { display: none; }
  .lender-office { width: 12%; }
.bubble-say { transition: opacity 0.4s, transform 0.4s; }
.erik-bubble.quiet .bubble-say { opacity: 0; transform: translateY(6px); pointer-events: none; }
.weather, .map-title, .world-shade, .compass { pointer-events: none; }
/* Albert: documents and support */
.map-doc {
  position: absolute;
  width: 18px;
  height: 22px;
  margin: -11px 0 0 -9px;
  background: #f4efe0;
  border: 1px solid #8a7a5a;
  border-radius: 2px;
  box-shadow: 0 2px 0 #3b2a1a, 0 0 14px #fff6d599;
  animation: doc-float 2s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}
.map-doc::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 4px;
  height: 2px;
  background: #8a7a5a;
  box-shadow: 0 4px 0 #8a7a5a, 0 8px 0 #8a7a5a, 0 12px 0 #c9b98a;
}
.map-doc::after {
  content: attr(data-label);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 4px);
  white-space: nowrap;
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #f0f0df;
  background: #132d27dd;
  padding: 2px 5px;
  border-radius: 4px;
}
@keyframes doc-float {
  50% { transform: translateY(-3px) rotate(-4deg); }
}
.map-doc.taken {
  animation: coin-take 0.7s ease-out forwards;
}
.world.zoomed .map-doc { width: 10px; height: 12px; margin: -6px 0 0 -5px; }
.world.zoomed .map-doc::before { top: 2px; height: 1px; box-shadow: 0 2px 0 #8a7a5a, 0 4px 0 #8a7a5a; left: 2px; right: 2px; }
.world.zoomed .map-doc::after { font-size: 5px; padding: 1px 3px; }
.albert-card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0e2621;
}
.albert-card img {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  border: 2px solid #8aa3ff;
  image-rendering: pixelated;
  flex: none;
}
.albert-card .eyebrow {
  font-size: 10px;
  color: #b9c8ff;
}
.albert-card p {
  margin: 4px 0 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #d9dccb;
}
.albert-card .secondary {
  padding: 6px 12px;
  font-size: 13px;
}
.albert-hint-list li {
  margin: 0 0 8px;
  line-height: 1.5;
}
.doc-list {
  display: grid;
  gap: 8px;
  margin: 14px 0 6px;
}
.doc-list div {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e2621;
}
.doc-list div.got {
  border-color: #b9c8ff88;
}
.doc-list b {
  display: block;
  font-family: "Space Grotesk", sans-serif;
}
.doc-list small {
  color: var(--muted);
  font-size: 12px;
}
.doc-list .doc-mark {
  width: 22px;
  text-align: center;
  color: #b9c8ff;
  flex: none;
}
.character .portrait.albert {
  border-color: #8aa3ff;
}
@media (prefers-reduced-motion: reduce) {
  .map-doc { animation: none !important; }
}

/* ===================== v2.1: the traveler is a character, not a card ===================== */
/* The old token was a bordered, rounded, glowing box — it read as a playing card. A character
   should be just the art: no frame, no radius, only a soft ground shadow so it sits on the map. */
.hero-token {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent;
  width: 30px;
  height: 42px;
  filter: drop-shadow(0 2px 2px rgba(6, 24, 18, 0.55)) !important;
}
.hero-token.avatar {
  border: 0 !important;
  border-radius: 0 !important;
  width: 30px;
  height: 42px;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
}
/* Sprite-sheet mode: four walk frames side by side, stepped by data-frame on #traveler. */
.hero-token.sheet {
  background-repeat: no-repeat;
  background-size: 400% 100% !important;
  background-position: 0% 0% !important;
  image-rendering: pixelated;
}
#traveler[data-frame='1'] .hero-token.sheet { background-position: 33.333% 0% !important; }
#traveler[data-frame='2'] .hero-token.sheet { background-position: 66.667% 0% !important; }
#traveler[data-frame='3'] .hero-token.sheet { background-position: 100% 0% !important; }
/* With real walk frames the bob is redundant; keep a gentle idle breath instead. */
#traveler.walking .hero-token.sheet { animation: none; }
.hero-token.sheet { animation: idle-breathe 2.4s ease-in-out infinite; }
@keyframes idle-breathe {
  50% { translate: 0 -1px; }
}
#traveler i {
  width: 16px;
  height: 4px;
  background: #0b1c1780;
  filter: blur(1px);
}
/* Dialogue portraits use the same character, so the person on the map is the person talking. */
.character .portrait.hero-portrait.sheet {
  background-size: cover;
  background-position: center;
  border-radius: 10px;
}
@media (prefers-reduced-motion: reduce) {
  .hero-token.sheet { animation: none; }
}
/* The opening game is the main event on its scene, not a footnote. */
.minigame-launch.feature {
  border-style: solid;
  border-width: 2px;
  background: linear-gradient(90deg, #2c5a44, #1a3d31);
  box-shadow: 0 6px 0 #0a1c16;
  margin: 18px 0 10px;
  padding: 18px;
}
.minigame-launch.feature strong { font-size: 18px; }
.minigame-launch.feature:hover { box-shadow: 0 4px 0 #0a1c16; }
.voice-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.voice-row select {
  flex: 1;
  min-width: 0;
}
.voice-row .secondary {
  padding: 9px 14px;
  white-space: nowrap;
}
/* Setup: show the whole character, not a portrait in a frame. */
.photo-preview.char {
  width: 120px;
  height: 156px;
  border: 1px dashed #2d4438;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 65%, #1e4033, #0c211d 70%);
  position: relative;
}
.photo-preview.char img {
  image-rendering: pixelated;
  display: block;
  margin: auto;
}
.photo-preview.char img:not([src]) { display: none; }
.photo-preview.char .photo-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 24px;
}
.photo-preview.char .photo-empty[hidden] { display: none; }

/* ===================== v2.3: agents, offers and inspections ===================== */
/* The three people who could work for you, side by side, so the choice is a comparison
   rather than three separate sales pitches. */
.agent-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
  margin: 14px 0 6px;
}
.agent-list div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0e2621;
}
.agent-list div.mine {
  border-color: #e7c76a;
  background: #14302a;
}
.agent-list b {
  display: block;
  font-family: "Space Grotesk", sans-serif;
  font-size: 15px;
}
.agent-list span {
  display: block;
  color: #e7c76a;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 2px 0 6px;
}
.agent-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
/* Ordering an inspection spends real money out of the pouch, so the list shows the price
   before the click, not after. */
.inspect-list .doc-mark {
  color: #e7c76a;
}
.inspect-list div.got {
  border-color: #e7c76a88;
}

/* The arcade list shows each machine's screen, the same art as the cabinets in the hall. */
.arcade-row .mg-art {
  flex: none;
  width: 46px;
  height: 62px;
  border-radius: 5px;
  overflow: hidden;
  background: #050d0b;
  box-shadow: inset 0 0 0 2px #0c1a17, 0 0 14px -6px #7fe3c355;
}
.arcade-row .mg-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Said before the numbers, not after them. */
.fiction-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--gold, #efcc79);
  background: #0e2621;
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  line-height: 1.5;
  color: #b9cfc6;
}
.fiction-note b { color: #f4ead2; }

/* ================= v2.5: the story happens beside the town, not on top of it =================
   The scene used to be a modal that covered the map, so every conversation stopped the game and
   hid the world. It is a docked column now: the map stays exactly where it is, your character
   stays standing where they stopped, and the words arrive one beat at a time next to them. */
.game-layout.talking {
  grid-template-columns: minmax(0, 1fr) minmax(340px, 30%);
}
.game-layout.talking .quest-panel {
  display: none;
}
.story-dock {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: min(76vh, 720px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel, #0e2621);
  box-shadow: 0 18px 40px -26px #000a;
  overflow: hidden;
  animation: dock-in 0.26s ease-out both;
}
.story-dock[hidden] {
  display: none;
}
@keyframes dock-in {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: none; }
}
.story-dock .story-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}
/* The dock is narrower than the old modal, so the scene furniture comes down a size. */
.story-dock .story-body h2 {
  font-size: clamp(20px, 2.4vw, 26px);
  line-height: 1.2;
}
.story-dock .prose p {
  font-size: 15px;
  line-height: 1.62;
}
.story-dock .numbers {
  grid-template-columns: 1fr;
}
.story-dock .numbers.three {
  grid-template-columns: 1fr;
}
.story-dock .agent-list {
  grid-template-columns: 1fr;
}

/* One beat at a time. A scene reveals a paragraph per tap, so the town is never behind a wall
   of text — the choices only appear once the last beat has landed. */
.beat-more {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #122c26;
  color: #dff0e8;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.beat-more:hover {
  background: #1a3a32;
  border-color: #3f6a5c;
}
.beat-more .beat-caret {
  margin-left: auto;
  color: var(--gold, #efcc79);
  animation: beat-nudge 1.2s ease-in-out infinite;
}
.beat-count {
  color: var(--muted);
  font-size: 12px;
}
@keyframes beat-nudge {
  50% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .beat-more .beat-caret { animation: none; }
  .story-dock { animation: none; }
}

/* Narrow screens: the town keeps the top of the screen and the conversation sits under it. */
@media (max-width: 1080px) {
  .game-layout.talking {
    grid-template-columns: minmax(0, 1fr);
  }
  .story-dock {
    max-height: none;
  }
}
/* Each new beat fades in where the last one left off. */
.beat-new {
  animation: beat-in 0.26s ease-out both;
}
@keyframes beat-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .beat-new { animation: none; }
}

/* ================= v2.5: the opening — you are asleep, and then you are not =================
   The apartment at six in the morning, rebuilt from the original opening: the art, the Z's, the
   noise through the walls, the landlord letting himself in, and the receipt that prices a month
   of rent in hours worked. */
.opening {
  position: relative;
  background: #0a1913;
}
.opening-scene {
  position: relative;
  height: min(58vh, 460px);
  min-height: 280px;
  background: url(assets/apartment.webp) center 42% / cover no-repeat;
  image-rendering: pixelated;
  overflow: hidden;
}
.opening-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, #0a1913f2);
  pointer-events: none;
}
/* The sleeper is in the art, over on the left. The Z's rise off the pillow. */
.sleep-z {
  position: absolute;
  left: 9%;
  top: 27%;
  font: bold 22px "Press Start 2P", monospace;
  font-size: 20px;
  color: #ffdf97;
  text-shadow: 0 2px 0 #00000080;
  animation: sleep-drift 2.4s ease-in-out infinite;
}
.noise-note {
  position: absolute;
  right: 6%;
  top: 22%;
  padding: 8px 12px;
  border-radius: 6px;
  background: #17251ed9;
  border: 1px solid #3d5a4c;
  color: #fff1d0;
  font: 700 12px "Press Start 2P", monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  animation: noise-rattle 0.5s steps(2) infinite;
}
/* Bartleby, drawn in CSS so he can walk in without another asset. */
.collector {
  position: absolute;
  left: 84%;
  bottom: 14%;
  width: 54px;
  height: 92px;
  opacity: 0;
  transform: scaleX(-1);
}
.collector-coat {
  position: absolute;
  left: 8px;
  bottom: 0;
  width: 38px;
  height: 58px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(#7c3f6e, #5d2b52);
  box-shadow: inset -6px 0 10px -6px #000, 0 2px 0 #2b1226;
}
.collector-hat {
  position: absolute;
  left: 12px;
  bottom: 54px;
  width: 30px;
  height: 38px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(#5d2b52, #431d3c);
  box-shadow: 0 6px 0 -1px #f0c8a0, 0 8px 0 -1px #431d3c;
}
.collector-hat::after {
  content: "";
  position: absolute;
  left: -7px;
  bottom: -3px;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #2f1429;
}
.collector-ledger {
  position: absolute;
  left: 38px;
  bottom: 26px;
  width: 20px;
  height: 15px;
  border-radius: 2px;
  background: #f6ecd2;
  box-shadow: inset 0 0 0 2px #c8b78f, 0 2px 0 #00000040;
}
.rent-coin {
  position: absolute;
  left: 26%;
  top: 40%;
  padding: 8px 12px;
  border-radius: 6px;
  background: #4b2820e0;
  color: #ffe0a5;
  font: bold 15px "Space Grotesk", monospace;
  opacity: 0;
}
.opening[data-scene="sleeping"] .collector,
.opening[data-scene="sleeping"] .rent-coin,
.opening[data-scene="gone"] .collector,
.opening[data-scene="gone"] .rent-coin {
  opacity: 0;
}
.opening:not([data-scene="sleeping"]) .sleep-z,
.opening:not([data-scene="sleeping"]) .noise-note {
  display: none;
}
.opening[data-scene="collector"] .collector {
  animation: collector-walk 1.5s ease-out both;
}
.opening[data-scene="collector"] .rent-coin {
  animation: coin-away 2.4s 1.3s both;
}
.opening[data-scene="gone"] .opening-scene {
  filter: saturate(0.72) brightness(0.86);
}
@keyframes sleep-drift {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(-9px); opacity: 1; }
}
@keyframes noise-rattle {
  50% { transform: translate(2px, -1px) rotate(-1deg); }
}
@keyframes collector-walk {
  from { left: 96%; opacity: 0; }
  30% { opacity: 1; }
  to { left: 56%; opacity: 1; }
}
@keyframes coin-away {
  0% { opacity: 0; transform: translateY(14px); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-58px); }
}
.opening-caption {
  padding: 20px 26px 24px;
  background: #0a1913;
}
.opening-controls {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-bottom: 8px;
}
.opening-controls button {
  color: #bfcdb6;
  font-size: 13px;
  padding: 5px 9px;
}
.opening-caption h2 {
  margin: 6px 0 10px;
  font-size: clamp(24px, 3.4vw, 38px);
  line-height: 1.12;
  color: #ffdf94;
}
.opening-caption p {
  margin: 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.6;
  color: #d8e6dd;
}
.rent-receipt {
  margin-top: 14px;
  padding: 13px 16px;
  border: 1px dashed #c8b78f88;
  border-radius: 8px;
  background: #12251d;
}
.rent-receipt strong {
  display: block;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: #efcc79;
}
.rent-receipt span {
  display: block;
  margin: 5px 0 3px;
  font-size: 17px;
  color: #f4ead2;
}
.rent-receipt small {
  color: var(--muted);
  font-size: 12px;
}
.opening-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 18px;
}
.opening-dots {
  display: flex;
  gap: 6px;
}
.opening-dots i {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: #2c4a3f;
}
.opening-dots i.on {
  background: #efcc79;
}
@media (max-width: 720px) {
  .opening-scene { height: 40vh; min-height: 210px; }
  .opening-caption { padding: 16px 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .sleep-z, .noise-note { animation: none; }
  .opening[data-scene="collector"] .collector { animation: none; opacity: 1; left: 56%; }
  .opening[data-scene="collector"] .rent-coin { animation: none; opacity: 1; }
}

/* ============ v2.5: the lender's office ============
   The Patriot Home Mortgage sign used to be a flag on a pole planted in the middle of a field.
   It hangs off a building now — a little timber-framed office standing beside the road that
   leads to the castle gate, with the sign board on its bracket. */
.lender-office {
  position: absolute;
  left: 63.2%;
  top: 51.5%;
  width: 11%;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 6px 6px #0a1a1499);
}
.lender-office img {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
}
.office-sign {
  /* The shop sign, hung on the bracket over the door. Painted over the blank board in the art
     and a little larger than it, because a sign nobody can read is just a brown rectangle. */
  position: absolute;
  left: 57%;
  top: 44%;
  width: 48%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3px 4px;
  line-height: 1.15;
  text-align: center;
  border-radius: 2px;
  background: linear-gradient(#8c6234, #6b4726);
  box-shadow: inset 0 0 0 1px #c49a5e, 0 2px 3px #0008;
  color: #ffe9bd;
}
.office-sign b {
  font-family: "Press Start 2P", monospace;
  font-size: clamp(5px, 0.55vw, 9px);
  letter-spacing: 0.04em;
  color: #ffdf94;
  text-shadow: 0 1px 0 #00000090;
}
.office-sign i {
  font-family: "Press Start 2P", monospace;
  font-style: normal;
  font-size: clamp(3px, 0.31vw, 5px);
  letter-spacing: 0.03em;
  color: #e8d2a6;
  margin-top: 2px;
}
.world.zoomed .lender-office {
  width: 15%;
}
/* The dock is narrower than the old modal, so its header has to stop trying to be a toolbar. */
.story-dock .story-top {
  padding: 10px 14px;
  gap: 8px;
}
.story-dock .story-top .eyebrow {
  font-size: 9px;
  letter-spacing: 1px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.story-dock .story-top > div {
  flex: none;
  gap: 4px;
}
.story-dock .story-top button {
  padding: 4px 7px;
  font-size: 12px;
  white-space: nowrap;
}
.story-dock .story-bottom {
  padding: 9px 14px;
  font-size: 12px;
}