/* Load after style.css. These overrides belong to the game alone. */
.scene { width: 100%; height: auto; max-height: none; aspect-ratio: 12 / 7; }
.world-layer { position: absolute; width: 100%; aspect-ratio: 12 / 7; top: 50%; left: 0; transform: translateY(-50%); }
.story-avatar img { width: 170% !important; height: auto !important; max-width: none; margin-left: -35%; margin-top: 0; }
.scribbit-button { width: 20%; height: 52%; }
:root {
  --game-body-size: 18px;
  --game-control-size: 16px;
  --game-label-size: 14px;
  --game-note-size: 20px;
  --game-dark-ink: #253d39;
  --game-muted-ink: #47594d;
}

body {
  font-size: var(--game-body-size);
  line-height: 1.55;
  color: var(--game-dark-ink);
}

button, input { line-height: 1.4; }
button { min-height: 44px; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 3px solid #653b95;
  outline-offset: 4px;
  box-shadow: 0 0 0 7px #fff7df;
}

.app-shell { padding-inline: clamp(14px, 3vw, 36px); }
.masthead, .header-actions, .chapter-heading { flex-wrap: wrap; }
.masthead { gap: 18px; }
.header-actions { gap: 10px; }
.chapter-heading { align-items: center; row-gap: 12px; }
.wordmark { font-size: 32px; letter-spacing: -.8px; }
.wordmark small {
  font-size: 13px;
  letter-spacing: 1px;
  line-height: 1.4;
  margin-top: 8px;
}
.prototype-label { font-size: 13px; color: #665532; letter-spacing: .8px; }
.eyebrow, .speaker {
  font-size: var(--game-label-size);
  letter-spacing: 1px;
  color: #38573b;
  line-height: 1.45;
}
h1 { font-size: clamp(30px, 3.2vw, 42px); line-height: 1.15; }
h2 { font-size: 32px; line-height: 1.22; }
.progress { flex-wrap: wrap; gap: 14px; }
.progress-dot { font-size: 14px; color: var(--game-muted-ink); gap: 8px; }
.progress-dot i { width: 30px; height: 30px; font-size: 15px; }
.game-frame { border: 2px solid #344735; }

/* Opaque label surfaces remain legible over either ink art or colored scenes. */
.scene-vignette {
  background: linear-gradient(#071c344d, transparent 26%, transparent 72%, #071c346b);
}
.scene-top { gap: 12px; align-items: flex-start; }
.location-tag {
  font-size: var(--game-label-size);
  color: #fff7df;
  background: #102d49;
  border: 1px solid #a8bfa7;
  line-height: 1.4;
}
.scene-tools { gap: 9px; flex: none; }
.scene-tool {
  font-size: var(--game-control-size);
  min-height: 48px;
  padding: 10px 13px;
  background: #fff7df;
  border: 2px solid #344735;
}
.hotspot {
  width: clamp(88px, 14%, 155px);
  min-width: 0;
  min-height: 48px;
  height: 48px;
  padding: 0;
  gap: 0;
}
.hotspot .orb { width: 48px; height: 48px; font-size: 25px; flex: none; }
.hotspot .hotspot-label {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 100%;
  font-size: var(--game-label-size);
  line-height: 1.35;
  white-space: normal;
  text-align: center;
  color: #253d39;
  background: #fff7df;
  border: 2px solid #344735;
  padding: 6px 9px;
  box-shadow: 0 3px 0 #102d494d;
}
.scribbit-button span {
  font-size: var(--game-label-size);
  line-height: 1.35;
  border: 2px solid #344735;
  padding: 6px 10px;
}
.scene-tip {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 28px);
  font-size: 13px;
  line-height: 1.4;
  color: #fff7df;
  background: #102d49;
  padding: 6px 12px;
  border-radius: 12px;
  letter-spacing: 0;
}
.complete-ribbon { font-size: 15px; line-height: 1.4; text-align: center; }

.story-bar { padding: 22px 26px; gap: 20px; align-items: flex-start; }
.story-copy { min-width: 0; }
.speaker { flex-wrap: wrap; gap: 6px 14px; margin-bottom: 9px; }
.story-copy p, .intro-card p, .modal-copy, .feedback, .reward-text,
.grownup-list, .journal-list li, .restart-confirm p {
  font-size: var(--game-body-size);
  line-height: 1.55;
}
.story-copy p { max-width: 900px; overflow-wrap: anywhere; }
.story-avatar { width: 72px; height: 72px; }
.story-avatar img { width: 72px; height: 98px; }
.quiet-button, .read-button, .primary-button, .secondary-button,
.next-goal, .hint-button, .reset-button {
  font-size: var(--game-control-size);
  min-height: 46px;
  line-height: 1.4;
}
.quiet-button { color: #253d39; padding: 10px 14px; }
.read-button {
  color: #43583f;
  border: 1px solid #a9b496;
  border-radius: 10px;
  padding: 8px 11px;
  background: #f2f0dc;
}
.hint-button { color: #653b85; padding: 10px 12px; }
.primary-button, .secondary-button, .next-goal { padding: 12px 18px; white-space: normal; }

.satchel-bar { gap: 18px; padding: 18px 24px; }
.satchel-label { min-width: 195px; max-width: 250px; }
.satchel-label b { font-size: 18px; }
.satchel-label small { display: block; font-size: 13px; color: var(--game-muted-ink); line-height: 1.45; }
.inventory { min-width: 0; flex-wrap: wrap; gap: 10px; }
.inventory-item {
  font-size: var(--game-control-size);
  line-height: 1.35;
  min-height: 78px;
  min-width: 86px;
  width: 96px;
  padding: 9px 7px;
  border-color: #899676;
  color: #505c49;
  text-align: center;
}
.inventory-item .item-glyph { font-size: 28px; }
.inventory-item.owned { color: #253d39; border-color: #738b57; }
.next-goal { flex: none; color: #613c85; }
.game-footer { font-size: 13px; color: #46574a; gap: 12px; flex-wrap: wrap; letter-spacing: 0; }

/* Tall intro content stays reachable at narrow widths and browser zoom. */
.intro-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding: 22px;
  background: #102d49d9;
}
.intro-card {
  flex: none;
  margin-block: auto;
  width: min(690px, 100%);
  padding: 30px 36px;
  background: #123b58;
}
.intro-card .eyebrow { font-size: 14px; color: #dbe9ba; padding-right: 34px; }
.intro-card h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.13; margin: 13px 0 18px; }
.intro-card p { max-width: 100%; }
.intro-card .intro-detail { display: block; font-size: 14px; color: #e0eaed; line-height: 1.5; }
.intro-card label { font-size: 15px; color: #e3eccf; line-height: 1.5; margin: 18px 0 8px; }
.intro-card input {
  font-size: var(--game-body-size);
  line-height: 1.5;
  max-width: 100%;
  min-height: 48px;
  padding: 11px 13px;
}
.intro-card .secondary-button { font-size: var(--game-control-size); color: #fff7df; background: #254b63; }
.intro-badges { font-size: 14px; line-height: 1.45; color: #e3eccf; gap: 9px 18px; }
.intro-actions { gap: 11px; }

dialog {
  width: min(750px, calc(100% - 28px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  padding: 26px 30px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 2px solid #344735;
  scrollbar-gutter: stable;
}
.modal-header {
  position: sticky;
  top: -26px;
  z-index: 2;
  background: #fff9e9;
  gap: 12px;
  padding-top: 4px;
  padding-bottom: 8px;
}
.modal-header .eyebrow { margin: 0; }
.close-button { min-height: 48px; width: 48px; height: 48px; flex: none; margin: 0; font-size: 29px; }
.modal-footer { flex-wrap: wrap; align-items: flex-start; gap: 12px 18px; }
.modal-footer span { font-size: 13px; line-height: 1.5; color: var(--game-muted-ink); max-width: 270px; }
.modal-copy { margin-block: 12px 20px; }
.note-paper {
  /* Recipe reminders currently set an inline 16px size; keep them readable too. */
  font-size: var(--game-note-size) !important;
  line-height: 1.6;
  color: #30402f;
  padding: 20px 24px;
}
.note-paper .signature { font-size: 15px; color: #495b3e; line-height: 1.5; }
.puzzle-step { font-size: var(--game-control-size); line-height: 1.55; color: #41583f; letter-spacing: 0; }
.feedback { color: #593579; overflow-wrap: anywhere; }
.choices { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.choice {
  min-width: 0;
  font-size: var(--game-control-size);
  line-height: 1.4;
  padding: 16px 10px;
  min-height: 134px;
  border-color: #8fa172;
  color: #2f4634;
  text-align: center;
}
.choice svg { max-width: 110px; width: 100%; height: auto; flex: none; }
.bridge-stones {
  display: grid;
  grid-template-columns: repeat(5, minmax(44px, 1fr));
  gap: 10px;
  padding: 23px 14px 30px;
  overflow-x: auto;
}
.stone { width: 100%; min-width: 44px; height: 68px; font-size: 29px; }
.stone.blank { background: #395f65; color: #fff7df; }
.number-palette { display: grid; grid-template-columns: repeat(4, minmax(44px, 70px)); gap: 12px; }
.number-tile { width: 100%; min-width: 44px; height: 56px; font-size: 25px; }
.symbol-slots, .symbol-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 112px));
  gap: 14px;
  justify-content: center;
}
.symbol-slot, .symbol-choices button {
  width: 100%;
  min-width: 0;
  min-height: 96px;
  padding: 10px 7px;
  font-size: var(--game-control-size);
  line-height: 1.35;
}
.symbol-slot { color: #5b492b; }
.symbol-slot .glyph, .symbol-choices .glyph { font-size: 38px; }
.puzzle-actions { gap: 12px; }
.map-card { padding: 17px; gap: 16px; align-items: flex-start; }
.map-card > span:last-child { min-width: 0; }
.map-card b { font-size: var(--game-body-size); line-height: 1.4; }
.map-card small, .journal-list small { font-size: var(--game-body-size); line-height: 1.55; color: #465c40; }
.map-card.locked { opacity: 1; background: #eeeade; border-style: dashed; }
.map-card .map-number { flex: none; width: 34px; line-height: 1.3; }
.journal-list li { gap: 14px; padding: 16px 0; }
.journal-list li > span { flex: none; }
.journal-list li > div { min-width: 0; }
.small-note { font-size: 16px; line-height: 1.55; color: #455742; }
.grownup-list { padding-left: 24px; }
.grownup-list li + li { margin-top: 10px; }
.reward-text { overflow-wrap: anywhere; }
.success-actions { flex-wrap: wrap; }

@media (max-width: 900px) {
  .satchel-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .satchel-label { min-width: 0; max-width: none; }
  .inventory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-row: 2; grid-column: 1 / -1; }
  .inventory-item { width: 100%; min-width: 0; }
  .next-goal { grid-column: 2; grid-row: 1; }
  .scene-top { left: 18px; right: 18px; }
}

@media (max-width: 650px) {
  :root { --game-body-size: 16px; --game-control-size: 15px; --game-label-size: 13px; --game-note-size: 18px; }
  .app-shell { padding: 16px 12px 10px; }
  .masthead { gap: 14px; padding-bottom: 20px; }
  .wordmark { font-size: 29px; }
  .wordmark small { font-size: 13px; letter-spacing: .7px; }
  .brand-spark { font-size: 39px; }
  .header-actions { width: 100%; justify-content: flex-end; }
  .quiet-button { padding: 9px 12px; min-height: 44px; }
  .chapter-heading .eyebrow { font-size: 13px; letter-spacing: .6px; }
  .progress { gap: 10px; }
  .progress-dot i { width: 29px; height: 29px; font-size: 14px; }
  .scene { min-height: 440px; }
  .scene.intro-scene { min-height: 520px; }
  .scene-top { left: 12px; right: 12px; top: 12px; gap: 9px; }
  .location-tag { padding: 8px 9px; }
  .scene-tools { gap: 6px; }
  .scene-tool { min-height: 44px; padding: 8px 10px; }
  .hotspot { min-height: 44px; height: 44px; }
  .hotspot .orb { width: 44px; height: 44px; font-size: 23px; }
  .hotspot .hotspot-label { padding: 5px 6px; }
  .scribbit-button span { font-size: 13px; padding: 5px 7px; }
  .scene-tip { font-size: 13px; bottom: 11px; padding: 6px 9px; }
  .story-bar { padding: 18px 15px; gap: 13px; }
  .story-avatar { width: 52px; height: 52px; }
  .story-avatar img { width: 52px; height: 71px; }
  .speaker { font-size: 13px; letter-spacing: .6px; gap: 7px; }
  .read-button { min-height: 44px; padding: 8px 10px; }
  .satchel-bar { padding: 16px 15px; gap: 13px; }
  .satchel-label { gap: 7px; }
  .satchel-label > span { font-size: 29px; }
  .satchel-label b { font-size: 16px; }
  .satchel-label small { display: block; font-size: 13px; max-width: 190px; }
  .inventory { gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-item { padding: 8px 5px; min-height: 82px; }
  .next-goal { min-height: 44px; padding: 10px 12px; }
  .game-footer { font-size: 13px; line-height: 1.45; gap: 8px; }
  .intro-layer { padding: 14px; }
  .intro-card { padding: 23px 22px; }
  .intro-card h2 { font-size: 32px; line-height: 1.15; margin: 12px 0 16px; }
  .intro-card .eyebrow { font-size: 13px; }
  .intro-card .intro-detail { display: block; font-size: 13px; }
  .intro-card label { font-size: 15px; margin-top: 16px; }
  .intro-card input { font-size: 16px; padding: 10px 12px; }
  .intro-badges { font-size: 13px; gap: 8px 14px; }
  .intro-actions { gap: 10px; }
  .primary-button, .secondary-button { min-height: 46px; padding: 12px 15px; }
  dialog { padding: 20px; width: calc(100% - 24px); }
  h2 { font-size: 28px; }
  .modal-header { top: -20px; }
  .modal-header .eyebrow { font-size: 13px; letter-spacing: .6px; }
  .modal-footer span { font-size: 13px; }
  .note-paper { padding: 18px; }
  .note-paper .signature { font-size: 14px; }
  .choice { padding: 14px 7px; min-height: 124px; }
  .choices { gap: 8px; }
  .bridge-stones { gap: 7px; padding: 22px 9px 29px; }
  .stone { height: 59px; font-size: 26px; }
  .number-palette { gap: 9px; }
  .number-tile { height: 54px; font-size: 24px; }
  .symbol-slots, .symbol-choices { gap: 10px; }
  .symbol-slot, .symbol-choices button { min-height: 90px; padding: 9px 5px; }
  .map-card { padding: 15px; gap: 11px; }
  .small-note { font-size: 16px; }
  .feedback { font-size: 16px; }
}

@media (max-width: 370px) {
  .scene-top { flex-direction: column; align-items: flex-start; gap: 8px; }
  .scene-tools { align-self: flex-end; }
  .satchel-bar { padding-inline: 12px; }
  .satchel-label small { max-width: 125px; }
  .inventory { gap: 6px; }
  .inventory-item { padding-inline: 3px; }
  .story-bar { gap: 10px; }
  .story-avatar { width: 45px; height: 45px; }
  .story-avatar img { width: 45px; height: 61px; }
  .intro-card { padding: 21px 18px; }
  .intro-actions { flex-direction: column; align-items: stretch; }
  dialog { padding: 16px; }
  .modal-header { top: -16px; }
  .bridge-stones { gap: 4px; padding-inline: 6px; }
  .note-paper { padding: 15px; }
  .symbol-slots, .symbol-choices { gap: 7px; }
}