:root {
  font-family: Georgia, "Times New Roman", serif;
  color: #20352f;
  background: #edf1ec;
  --forest: #19372f;
  --forest-light: #284a3d;
  --paper: #fbfcf8;
  --snow: #e8efec;
  --moss: #708c7d;
  --line: #d5e0d8;
  --progress-muted: #83978b;
  --progress-border: #d4dfd6;
  --progress-active: #87a892;
  --progress-done: #b8d6bf;
  --progress-ink: #386349;
  --dev-action: #78483b;
  --dev-action-soft: #fff7f4;
  --dev-action-border: #b98474;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  min-height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse at 50% 0, #f8faf6 0, transparent 48%), linear-gradient(#e3ebe6, #f0f2ec 520px);
}
button, textarea { font: inherit; }
button { cursor: pointer; }

.is-gated .topbar, .is-gated .shell { display: none; }
.alpha-gate { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(#102d28aa, #102d28db), url('/images/Snowy Woodland Logging Yard.png') center / cover; }
.alpha-panel { width: min(100%, 460px); padding: clamp(28px, 6vw, 48px); background: #fbfcf8; border: 1px solid #d6e2d9; border-radius: 18px; box-shadow: 0 24px 70px #102c2755; }
.alpha-panel h1 { margin: 0 0 12px; color: var(--forest); font-size: clamp(30px, 6vw, 40px); font-weight: 500; }
.alpha-panel p { line-height: 1.5; }
.alpha-panel label { display: block; margin: 20px 0 8px; color: var(--forest); font: 700 12px Arial, sans-serif; }
.alpha-panel input { width: 100%; min-width: 0; padding: 12px; border: 1px solid #b8cbbf; border-radius: 8px; background: white; color: #20352f; font: 16px Arial, sans-serif; }
.alpha-panel button { padding: 12px 16px; border: 1px solid var(--forest); border-radius: 8px; background: var(--forest); color: white; font: 600 13px Arial, sans-serif; }
.alpha-panel form > button { width: 100%; margin-top: 14px; }
.profile-list { display: grid; gap: 8px; max-height: 30vh; overflow: auto; }
.profile-list .profile-button { text-align: left; color: var(--forest); background: #edf3ee; border-color: #d0dfd3; }
.profile-create-row { display: flex; gap: 8px; }
.profile-create-row button { flex: 0 0 auto; }
.profile-note { color: #5b7064; font-size: 14px; }
:where(.scene-setter, .cutscene-card, .drama-card, .line) { line-height: 1.65; }
.conversation-card, .story-card, .choice-card, .cutscene-card, .drama-card { box-shadow: 0 12px 32px #253e320d; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 3px solid #b67b37; outline-offset: 3px; }
@media (max-width: 480px) { .profile-create-row { flex-direction: column; } .profile-create-row button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

.topbar {
  min-height: 68px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 max(22px, calc((100vw - 1080px)/2));
  background: #19372f;
  border-bottom: 1px solid #315447;
  box-shadow: 0 4px 18px #172f281c;
}
.brand { display: flex; align-items: center; gap: 11px; color: #f4f5ec; text-decoration: none; }
.brand-mark { color: #c5d4c7; font: 25px/1 Georgia, serif; }
.brand-copy strong { display: block; font-size: 17px; font-weight: 500; letter-spacing: .015em; }
.brand-copy small { display: block; margin-top: 3px; color: #9eb8a7; font: 8px Arial, sans-serif; letter-spacing: .2em; }
nav { display: flex; gap: 8px; }
nav button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid #527161;
  border-radius: 8px;
  padding: 8px 12px;
  background: #25473b;
  color: #edf3eb;
  font: 12px Arial, sans-serif;
  transition: background-color .16s ease, border-color .16s ease;
}
nav button:hover { border-color: #8eaa98; background: #315748; }
.nav-icon { color: #c5d6c8; font-size: 16px; line-height: 1; }
.tool-count { display: inline-grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 999px; background: #d9e8d6; color: #264936; font: 700 10px Arial, sans-serif; }
nav button.route-ready { border-color: #c2d6bd; background: #e6f0e3; color: #284b37; }

.shell { width: min(1040px, calc(100% - 36px)); margin: 25px auto 56px; }
.hero {
  height: clamp(285px, 47vw, 490px);
  position: relative;
  overflow: hidden;
  border: 1px solid #d3ded5;
  border-radius: 18px;
  background: #607b78;
  box-shadow: 0 18px 45px #253e321b;
}
.hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #132b26c9 0%, #18342d75 32%, transparent 76%), linear-gradient(0deg, #142d28a8, transparent 56%);
}
.hero-text { position: absolute; left: clamp(22px, 4vw, 42px); bottom: clamp(23px, 4vw, 38px); max-width: 78%; color: #fffdf5; }
.eyebrow { margin: 0 0 8px; color: var(--moss); font: 700 9px Arial, sans-serif; letter-spacing: .19em; }
.hero .eyebrow { color: #d0dfd2; }
h1 { margin: 0; font-size: clamp(32px, 5vw, 52px); font-weight: 400; line-height: 1.05; text-shadow: 0 2px 18px #11262066; }
h2 { margin: 0; font-size: 23px; font-weight: 500; }

.story-card, .conversation-card, .cutscene-card, .choice-card {
  border: 1px solid #d8e1d8;
  border-radius: 13px;
  background: var(--paper);
  box-shadow: 0 12px 30px #263d330c;
}
.story-card {
  position: relative;
  width: min(900px, calc(100% - 48px));
  margin: -25px auto 0;
  padding: 21px 27px 19px;
}
.scene-setter { max-width: 790px; color: #40564c; font-size: 15px; line-height: 1.68; }
.scene-setter p:last-child { margin-bottom: 0; }
.goal {
  display: block;
  margin: 13px 0 0;
  padding: 7px 11px;
  border: 1px solid #dce7da;
  border-radius: 8px;
  color: #294c39;
  background: #eaf2e7;
  font-size: 15px;
  font-weight: 600;
}

.conversation-card, .cutscene-card, .choice-card, .drama-card { margin-top: 16px; padding: 24px 28px; }
.drama-card { border: 1px solid #d8e1d8; border-radius: 13px; background: var(--paper); box-shadow: 0 12px 30px #263d330c; }
.drama-transcript { padding: 8px 0 2px; }
.drama-line:nth-of-type(even) { margin-left: auto; border-radius: 13px 4px 13px 13px; background: #e8f0e6; }
.drama-narration { max-width: 760px; margin: 20px auto; color: #647d6f; font-style: italic; line-height: 1.6; }
.drama-next { border: 0; border-radius: 8px; padding: 11px 17px; background: var(--forest-light); color: #fff; font: 700 12px Arial, sans-serif; }
.drama-next:hover { background: var(--forest); }
.action-history { display: grid; gap: 10px; }
.action-result { padding: 13px 16px; border-left: 2px solid #a2bda8; border-radius: 0 8px 8px 0; background: #f2f6f1; color: #405a4a; line-height: 1.55; }
.action-result p { margin: 0; }
.action-result .action-label { margin-bottom: 4px; color: #78917f; font: 700 10px Arial, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.action-nudge { margin: 16px 0 3px; color: #486552; font-style: italic; line-height: 1.55; }
.action-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.action-button { border: 1px solid #a9c0ad; border-radius: 8px; padding: 11px 15px; background: #edf5ec; color: #2e5940; font: 700 12px Arial, sans-serif; }
.action-button:hover { border-color: #70967a; background: #e0eee0; }
.card-heading { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e3eae3; padding-bottom: 13px; }
.card-heading .eyebrow { margin-bottom: 5px; }
.live-dot { color: #688a70; font: 11px Arial, sans-serif; }
.conversation-intro { padding: 18px 0 2px; }
.conversation-intro .scene-setter p { margin: 0; }
.scene-aim { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; padding: 10px 14px; border-left: 3px solid #779d7d; border-radius: 0 8px 8px 0; background: #eaf2e7; color: #294c39; }
.scene-aim span { flex: none; color: #54755d; font: 700 10px Arial, sans-serif; letter-spacing: .13em; text-transform: uppercase; }
.scene-aim p { margin: 0; font-size: 16px; line-height: 1.4; font-weight: 600; }
.scene-aim.is-complete { border-color: #aec5b1; background: #f0f5ed; color: #56705c; }
.transcript { min-height: 160px; max-height: 440px; overflow-y: auto; padding: 10px 2px 14px; }
.empty { color: #87978c; font-size: 14px; font-style: italic; }
.line { max-width: 80%; margin: 13px 0; padding: 12px 15px; border: 1px solid #e0e8df; border-radius: 4px 13px 13px 13px; background: #f3f6f1; color: #334940; white-space: pre-wrap; line-height: 1.56; box-shadow: 0 3px 10px #20392d08; }
.line.user { margin-left: auto; border-color: #d4e2d4; border-radius: 13px 4px 13px 13px; background: #e8f0e6; }
.line strong { display: block; margin-bottom: 4px; color: #698272; font: 700 10px Arial, sans-serif; letter-spacing: .065em; text-transform: uppercase; }
.script-indicator { display: flex; align-items: flex-start; gap: 12px; margin: 4px 0 14px; padding: 14px 16px; border: 1px solid #cdddcf; border-radius: 9px; background: #f0f6ee; color: #315543; font: 13px/1.45 Arial, sans-serif; }
.script-symbol { flex: none; color: #668973; font-size: 18px; line-height: 1; }
.script-indicator strong, .script-indicator small { display: block; }
.script-indicator small { margin-top: 4px; color: #526e5d; font-size: 12px; line-height: 1.45; }
.script-indicator.is-paused { border-color: #d7bcab; background: #fbf5ef; }
#script-retry { margin-left: auto; border: 1px solid #a9c4ad; border-radius: 6px; padding: 7px 10px; background: #fff; color: #315b43; font: 700 11px Arial, sans-serif; }

.travel-hint { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 17px 0 0; padding: 16px 18px; border: 1px solid #b9d0bf; border-radius: 10px; color: #294937; background: linear-gradient(110deg, #e5f0e8, #f2f7ed); box-shadow: 0 8px 22px #294d3310; }
.travel-copy { display: grid; gap: 4px; min-width: 0; }
.travel-kicker { color: #668671; font: 700 10px Arial, sans-serif; letter-spacing: .16em; }
.travel-copy strong { font-size: 19px; font-weight: 500; line-height: 1.3; }
.travel-copy p { margin: 2px 0 0; color: #58705e; font: 13px/1.45 Arial, sans-serif; }
.travel-hint button { flex: none; border: 0; border-radius: 8px; padding: 11px 17px; background: var(--forest-light); color: #fff; font: 700 12px Arial, sans-serif; }
.travel-hint button:hover { background: var(--forest); }
.progress-debug + .travel-hint { margin-top: 12px; }
form { border-top: 1px solid #e3eae3; padding-top: 15px; }
label { display: block; margin-bottom: 7px; color: #667b6d; font: 700 10px Arial, sans-serif; letter-spacing: .025em; }
textarea { width: 100%; min-height: 76px; padding: 12px 14px; border: 1px solid #c4d3c7; border-radius: 9px; resize: vertical; background: #fffefa; color: #243b31; font-size: 14px; line-height: 1.5; }
textarea:focus { outline: 2px solid #91b09a; outline-offset: 1px; }
.progress-debug { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.progress-caption { margin-right: 3px; color: var(--progress-muted); font: 700 9px Arial, sans-serif; letter-spacing: .12em; }
.progress-chip { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--progress-border); border-radius: 999px; background: #f7faf7; color: #718477; font: 11px Arial, sans-serif; white-space: nowrap; }
.progress-chip.is-active { border-color: var(--progress-active); background: #edf5ef; color: var(--progress-ink); font-weight: 700; }
.progress-chip.is-complete { border-color: var(--progress-done); background: #e4f0e7; color: var(--progress-ink); }
.progress-chip.is-pending { opacity: .7; }
.form-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 9px; }
.form-actions span { color: #98a49b; font: 10px Arial, sans-serif; }
.form-actions button, #continue-button { border: 0; border-radius: 8px; background: var(--forest-light); color: #fff; padding: 11px 19px; font: 700 12px Arial, sans-serif; transition: background-color .16s ease, transform .16s ease; }
.form-actions button:hover, #continue-button:hover { background: var(--forest); transform: translateY(-1px); }
button:disabled { opacity: .55; cursor: wait; }
#scene-title:focus { outline: none; }
.error { color: #9a4439; font: 13px Arial, sans-serif; }
.global-error { padding: 11px 15px; margin: 12px 0 0; border: 1px solid #e8cbc4; border-radius: 7px; background: #fff7f3; }
.chat-error { padding: 10px 12px; margin: 9px 0 0; border: 1px solid #e8cbc4; border-radius: 7px; background: #fff7f3; line-height: 1.45; }
.chat-status { margin: 9px 0 0; color: var(--moss); font: 12px/1.4 Arial, sans-serif; }
#retry-progress-button { margin-top: 9px; border: 1px solid #9bb6a1; border-radius: 7px; padding: 8px 13px; color: var(--forest); background: #edf5ec; font: 700 12px Arial, sans-serif; }
.cutscene-card { padding: 27px 31px; }
.cutscene-card p:not(.eyebrow) { color: #455c50; font-size: 17px; line-height: 1.75; }
#continue-button { margin-top: 8px; }

footer { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; }
footer button, .close { border: 1px solid #cbd9cf; border-radius: 7px; color: #476456; background: #f7faf6; padding: 8px 12px; font: 12px Arial, sans-serif; }
footer button:hover, .close:hover { background: #e7f0e8; }
footer a { color: #718f7e; font: 12px Arial, sans-serif; }

.overlay { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: flex-end; background: #15282077; }
.drawer { width: min(430px, 100%); height: 100%; overflow-y: auto; padding: 24px; background: #fafcf9; box-shadow: -12px 0 40px #213c2b33; }
.debug-drawer { width: min(720px, 100%); }
.objectives-drawer { width: min(380px, 100%); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.close { font-size: 22px; line-height: 1; }
.objectives-intro { margin: 0 0 22px; color: #6b8175; font: 13px/1.5 Arial, sans-serif; }
.objectives-list { list-style: none; margin: 0; padding: 0; }
.objectives-list li { position: relative; padding: 14px 0 14px 23px; border-top: 1px solid #dfe8de; color: #365546; font-size: 16px; line-height: 1.45; }
.objectives-list li::before { content: "✦"; position: absolute; left: 1px; top: 16px; color: #90a994; font: 12px Arial, sans-serif; }
.objectives-empty { padding: 16px 0; border-top: 1px solid #dfe8de; color: #829487; font-size: 14px; font-style: italic; }
.muted { color: #75867c; font: 13px/1.5 Arial, sans-serif; }
.destination { display: block; width: 100%; margin-top: 14px; padding: 17px; border: 1px solid #bdd1c2; border-radius: 9px; background: #edf5ed; color: #3c654d; font-size: 16px; text-align: left; }
.destination:hover { background: #e1efdf; }
.map-overlay { align-items: center; justify-content: center; padding: 18px; background: #102b2bd9; }
.map-dialog { width: min(1220px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; border: 1px solid #9bb9b4; border-radius: 16px; background: #f4f7f3; box-shadow: 0 25px 80px #061e25a8; }
.map-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 20px 24px 10px; }
.map-head .eyebrow { margin-bottom: 4px; }
.map-head h2 { color: #264b49; font-size: 30px; }
.map-head .muted { margin: 5px 0 0; }
.map-instructions { margin: 0; padding: 0 24px 12px; color: #5c776d; font: 12px/1.45 Arial, sans-serif; }
.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); align-items: start; border-top: 1px solid #d6e1d8; }
.map-scroll { overflow: auto; background: #e9eee7; }
.map-scroll:focus-visible { outline: 3px solid #c8ddca; outline-offset: -3px; }
.map-stage { position: relative; width: 100%; min-width: 760px; aspect-ratio: 4 / 3; overflow: hidden; }
.map-art, .map-tint, .map-markers { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-art { display: block; object-fit: fill; transition: filter .3s ease; }
.map-tint { pointer-events: none; transition: background-color .3s ease, opacity .3s ease; }
.map-stage[data-time="day"] .map-art { filter: none; }
.map-stage[data-time="day"] .map-tint { opacity: 0; }
.map-stage[data-time="dusk"] .map-art { filter: saturate(.97); }
.map-stage[data-time="dusk"] .map-tint { background: linear-gradient(115deg, #eca9821c, transparent 55%, #163d5a18); }
.map-stage[data-time="night"] .map-art { filter: brightness(.63) saturate(1.2); }
.map-stage[data-time="night"] .map-tint { background: linear-gradient(#132b4b47, #0b223647); }
.map-markers { pointer-events: none; }
.map-marker { position: absolute; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; transform: translate(-50%, -50%); border: 0; border-radius: 50%; background: transparent; color: #fff; pointer-events: auto; }
.map-marker .marker-dot { display: grid; place-items: center; width: 16px; height: 16px; border: 2px solid #e9f1e6; border-radius: 50%; background: #729698; color: #fff; font: 700 11px/1 Arial, sans-serif; box-shadow: 0 1px 7px #1b445d8c; }
.map-marker.is-known { cursor: default; }
.map-marker.is-known .marker-dot { width: 12px; height: 12px; border-color: #c7d6cc; background: #647e80; opacity: .8; }
.map-marker.is-current .marker-dot { width: 20px; height: 20px; border: 3px solid #fff9de; background: #315d65; box-shadow: 0 0 0 5px #ffffff70, 0 0 18px #fff1b6; }
.map-marker.is-available { cursor: pointer; }
.map-marker.is-available .marker-dot { width: 25px; height: 25px; border-color: #fff7dc; background: #9a663d; box-shadow: 0 0 0 4px #f8e3b772, 0 0 15px #ffe3a3; }
.map-marker.is-continue { cursor: pointer; }
.map-marker.is-continue .marker-dot { width: 25px; height: 25px; border: 3px solid #fff9de; background: #9a663d; box-shadow: 0 0 0 4px #f8e3b772, 0 0 15px #ffe3a3; }
.map-marker:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.map-marker.is-current, .map-marker.is-available, .map-marker.is-continue { z-index: 1; }
.map-marker:hover, .map-marker:focus { z-index: 2; }
.marker-label { position: absolute; bottom: calc(50% + 17px); left: 50%; width: max-content; max-width: 175px; padding: 6px 9px; transform: translateX(-50%); border: 1px solid #dce9df80; border-radius: 7px; background: #173c46e8; color: #f9f7ea; font: 600 12px/1.2 Arial, sans-serif; text-align: center; white-space: normal; box-shadow: 0 4px 15px #0b2f3e66; opacity: 0; visibility: hidden; }
.map-marker.is-current .marker-label, .map-marker:hover .marker-label, .map-marker:focus .marker-label { opacity: 1; visibility: visible; }
.map-foot { padding: 20px 20px 24px; }
.map-foot h3 { margin: 0 0 10px; color: #294e49; font: 22px/1.2 Georgia, serif; }
.map-legend { display: flex; flex-wrap: wrap; gap: 15px; color: #5d746b; font: 11px Arial, sans-serif; }
.map-legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #7a9291; }
.legend-dot.current { border: 2px solid #e5d6a8; background: #345e62; }
.legend-dot.available { background: #9a663d; box-shadow: 0 0 0 3px #efdab9; }
.map-destinations { margin-top: 12px; }
.map-destinations .destination { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px; font: 14px Arial, sans-serif; }
.destination-number { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: #9a663d; color: #fff; font: 700 11px Arial, sans-serif; }
.destination-copy { display: grid; min-width: 0; gap: 3px; }
.destination-copy strong { color: #2e5447; font-size: 14px; }
.destination-copy small { color: #687e71; font-size: 11px; line-height: 1.35; }
.destination-arrow { margin-left: auto; color: #678f77; font-size: 17px; }
.map-destinations .muted { margin: 9px 0; }
.map-known { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; color: #6f857d; font: 11px Arial, sans-serif; }
.map-known span:not(.map-known-title) { padding: 4px 7px; border: 1px solid #dce5dc; border-radius: 999px; background: #f9fbf7; }
.map-known-title { margin-right: 2px; font-weight: 700; }
.debug-item { padding: 13px 0; border-top: 1px solid #e0e8e1; }
.debug-item h3 { margin: 0 0 6px; color: #698272; font: 700 11px Arial, sans-serif; letter-spacing: .09em; text-transform: uppercase; }
.debug-item p { margin: 0; color: #4b6155; font: 12px/1.5 Arial, sans-serif; }
.reasoning-group { border: 0; margin: 10px 0; padding: 0; }
.reasoning-group legend { margin-bottom: 6px; color: var(--forest); font: 700 12px Arial, sans-serif; }
.reasoning-options { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.reasoning-option { position: relative; margin: 0; }
.reasoning-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.reasoning-option span { display: block; padding: 7px 12px; border: 1px solid #b9cdbd; border-radius: 7px; background: #f6faf5; color: #44634e; font: 700 12px Arial, sans-serif; cursor: pointer; }
.reasoning-option input:checked + span { border-color: var(--forest-light); background: var(--forest-light); color: #fff; }
.reasoning-option input:focus-visible + span { outline: 2px solid #6b9981; outline-offset: 2px; }
.reasoning-option input:disabled + span { opacity: .5; cursor: wait; }
.dev-jump-controls { display: flex; gap: 8px; margin-top: 10px; }
.dev-jump-controls select { flex: 1; min-width: 0; border: 1px solid #bfd0c3; border-radius: 6px; padding: 8px; background: #fff; color: #345443; font: 12px Arial, sans-serif; }
.dev-jump-controls button { border: 1px solid #7fa98b; border-radius: 6px; padding: 8px 14px; background: #e5f2e7; color: #315a3c; font: 700 12px Arial, sans-serif; }
.dev-reset-button { margin-top: 10px; border: 1px solid var(--dev-action-border); border-radius: 6px; padding: 8px 14px; background: var(--dev-action-soft); color: var(--dev-action); font: 700 12px Arial, sans-serif; cursor: pointer; }
.dev-reset-button:hover:not(:disabled) { background: #f8e8e2; }
.dev-reset-button:disabled { opacity: .55; cursor: wait; }
.dev-jump-choices { margin-top: 9px; }
.dev-choice-field { display: flex; align-items: center; gap: 10px; margin: 0; color: #4b6155; font: 12px Arial, sans-serif; }
.dev-choice-field select { flex: 1; min-width: 0; border: 1px solid #bfd0c3; border-radius: 6px; padding: 8px; background: #fff; color: #345443; font: 12px Arial, sans-serif; }
details { padding: 12px 0; border-top: 1px solid #e0e8e1; }
summary { cursor: pointer; color: #3e5d4a; font: 700 13px Arial, sans-serif; }
pre { max-height: 400px; overflow: auto; overflow-wrap: anywhere; white-space: pre-wrap; padding: 12px; border-radius: 7px; background: #eef3ee; color: #405849; font: 11px/1.5 Consolas, monospace; }

@media (max-width: 650px) {
  .topbar { min-height: 62px; padding: 0 14px; }
  .brand { gap: 8px; }
  .brand-mark { font-size: 22px; }
  .brand-copy strong { font-size: 15px; }
  nav { gap: 6px; }
  nav button { gap: 5px; padding: 8px 9px; }
  .nav-icon { font-size: 15px; }
  .shell { width: calc(100% - 20px); margin: 12px auto 35px; }
  .hero { height: clamp(220px, 46vw, 290px); border-radius: 13px; }
  .hero-text { left: 18px; bottom: 19px; max-width: 90%; }
  h1 { font-size: clamp(30px, 8vw, 39px); }
  .story-card { width: calc(100% - 20px); margin-top: -17px; padding: 17px 18px; }
  .scene-setter { font-size: 14px; }
  .conversation-card, .cutscene-card, .choice-card, .drama-card { margin-top: 13px; padding: 17px; }
  .action-buttons { display: grid; }
  .action-button { width: 100%; text-align: left; }
  .line { max-width: 96%; }
  .travel-hint { align-items: stretch; flex-direction: column; gap: 12px; }
  .travel-hint button { align-self: flex-start; }
  .progress-caption { width: 100%; }
  .form-actions span { max-width: 65%; line-height: 1.4; }
  footer { padding: 16px 2px; }
  .map-overlay { padding: 6px; }
  .map-dialog { max-height: calc(100vh - 12px); border-radius: 11px; }
  .map-head { padding: 15px 15px 7px; }
  .map-head h2 { font-size: 25px; }
  .map-instructions { padding: 0 15px 10px; }
  .map-layout { display: flex; flex-direction: column; }
  .map-foot { order: -1; width: 100%; }
  .map-scroll { width: 100%; }
  .map-known { display: none; }
  .map-foot { padding: 12px 15px 17px; }
}

@media (max-width: 480px) {
  nav .tool-label { display: none; }
  nav button { min-width: 37px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}