:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #090b0a;
  color: #eee7d7;
  --bg: #090b0a;
  --panel: #0e1110;
  --panel-2: #131715;
  --panel-3: #171b18;
  --line: #2f302a;
  --line-gold: #5d4a2d;
  --gold: #d1aa69;
  --gold-soft: #a48759;
  --text: #eee7d7;
  --muted: #9c9b92;
  --muted-2: #73766f;
  --good: #8aad7f;
  --danger: #c48478;
  --header-h: 68px;
  --app-height: 100dvh;
  --visual-offset-top: 0px;
  --mobile-nav-h: 58px;
}

* { box-sizing: border-box; }
html { height: 100%; scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 50% -20%, #18201d 0, #0b0e0c 33%, #090b0a 70%); color: var(--text); }
body:not(.player-map-page) { height: var(--app-height, 100dvh); overflow: hidden; overscroll-behavior: none; }
button, textarea, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line-gold);
  background: rgba(8, 10, 9, .95);
  backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0,0,0,.2);
}

.brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; width: max-content; }
.brand-mark { width: 34px; height: 34px; border: 1px solid #765d36; display: grid; place-items: center; transform: rotate(45deg); color: var(--gold); }
.brand-mark::first-letter { transform: rotate(-45deg); }
.brand strong { display: block; font: 500 25px/1 Georgia, "Times New Roman", serif; letter-spacing: .02em; color: #e7c893; }
.brand small { display: block; margin-top: 4px; color: #77786f; font: 700 8px/1.2 Inter, sans-serif; letter-spacing: .18em; text-transform: uppercase; }

.desktop-nav { display: flex; align-items: center; gap: 28px; }
.desktop-nav a, .desktop-nav button { position: relative; border: 0; background: transparent; padding: 0; color: #aaa99f; text-decoration: none; font: 14px Georgia, serif; cursor: pointer; }
.desktop-nav > *:not(:last-child)::after { content: '•'; color: #7f643d; position: absolute; right: -17px; }
.desktop-nav a:hover, .desktop-nav button:hover { color: #e5d4b4; }

.header-metrics { justify-self: end; display: flex; align-items: stretch; height: 100%; }
.header-clock, .header-money { display: flex; align-items: center; gap: 10px; min-width: 128px; padding: 0 18px; border-left: 1px solid #252822; }
.header-clock > span, .header-money > span { color: var(--gold); font-size: 23px; }
.header-clock strong, .header-money strong { display: block; color: #dfbd84; font: 18px/1 Georgia, serif; }
.header-clock small, .header-money small { display: block; color: #85877f; font-size: 9px; margin-top: 3px; }

.world-shell {
  height: calc(var(--app-height, 100dvh) - var(--header-h));
  min-height: 0;
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  max-width: 1720px;
  margin: 0 auto;
  border-left: 1px solid #20231f;
  border-right: 1px solid #20231f;
  overflow: hidden;
}

.desktop-rail { min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; background: rgba(13, 16, 14, .76); scrollbar-width: thin; scrollbar-color: #333a33 #0d100e; }
.left-rail { border-right: 1px solid #252821; }
.right-rail { border-left: 1px solid #252821; }
.rail-card, .rail-section { padding: 18px 16px; border-bottom: 1px solid #252821; }
.player-card { display: flex; align-items: center; gap: 12px; }
.player-portrait { width: 58px; height: 68px; flex: 0 0 auto; border: 1px solid #6b532f; border-radius: 3px; background: linear-gradient(145deg, #252a25, #0f1210); display: grid; place-items: center; color: #c8a56f; font: 30px Georgia, serif; box-shadow: inset 0 0 25px rgba(0,0,0,.4); }
.player-copy strong { display: block; color: #e8d4ae; font: 21px Georgia, serif; margin: 3px 0; }
.player-copy small { color: var(--muted); font-size: 11px; }
.section-kicker { color: #8a816f; font-size: 9px; font-weight: 800; letter-spacing: .16em; }
.rail-title { display: flex; align-items: center; gap: 8px; color: #d7bc8a; font: 16px Georgia, serif; margin-bottom: 12px; }
.rail-title > span { color: #9c7640; width: 20px; text-align: center; }
.rail-title.with-count b { color: #73766f; font: 10px Inter, sans-serif; margin-left: auto; border: 1px solid #31352e; border-radius: 999px; padding: 2px 6px; }

.location-list { display: grid; gap: 3px; }
.anchor-list { display: grid; gap: 5px; }
.anchor-button { width: 100%; border: 1px solid #292e29; border-radius: 6px; background: #101310; color: #aeb3ac; padding: 8px 9px; display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 7px; align-items: center; text-align: left; cursor: pointer; }
.anchor-button:hover { border-color: #4d4534; background: #141713; }
.anchor-button.current { border-color: #705531; background: #19160f; color: #ddbd82; cursor: default; }
.anchor-button .anchor-icon { color: #9d8158; text-align: center; }
.anchor-button strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px Georgia, serif; }
.anchor-button small { color: #6f766f; font-size: 8px; white-space: nowrap; }
.location-button { width: 100%; border: 1px solid transparent; background: transparent; color: #aaa99f; text-align: left; padding: 9px 10px; border-radius: 5px; display: flex; align-items: center; gap: 9px; cursor: pointer; }
.location-button:hover { color: #e1d2b4; background: #141815; }
.location-button.current { color: #e5c58c; border-color: #70522b; background: linear-gradient(90deg, rgba(103,70,30,.25), rgba(103,70,30,.03)); }
.location-button.exit { color: #c5bba7; }
.location-button .route-icon { width: 20px; color: #9a7441; text-align: center; }
.location-button small { margin-left: auto; font-size: 8px; color: #61665f; text-transform: uppercase; letter-spacing: .08em; }

.compact-stats { display: grid; gap: 7px; }
.compact-stats .rail-title { margin-bottom: 6px; }
.stat-row { display: flex; justify-content: space-between; gap: 12px; color: #8e918a; font-size: 11px; padding: 5px 2px; }
.stat-row strong { color: #d5c6a8; font-weight: 600; text-align: right; }
.mini-list { display: grid; gap: 6px; }
.mini-card { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #292e29; background: #111411; border-radius: 5px; padding: 8px 9px; color: #d0cec6; }
.mini-card.active { border-color: #665035; background: #171611; }
.mini-card span { min-width: 0; }
.mini-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12px Georgia, serif; color: #cfbd9d; }
.mini-card small { display: block; margin-top: 3px; color: #737a73; font-size: 8px; text-transform: uppercase; letter-spacing: .05em; }
.mini-card b { color: #9e8054; font-size: 10px; }
.mini-card button { border: 1px solid #5e4528; background: #21170d; color: #d2ad72; border-radius: 4px; padding: 5px 7px; font-size: 9px; cursor: pointer; }
.mini-empty { color: #666c66; font-size: 9px; line-height: 1.45; padding: 4px 2px; }
.guidance-list { display: grid; gap: 6px; }
.guidance-card { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 8px; align-items: start; border: 1px solid #2d3029; background: #111411; border-radius: 5px; padding: 8px; }
.guidance-card > span { color: #aa8854; text-align: center; padding-top: 1px; }
.guidance-card strong { display: block; color: #cfbc9c; font: 11px Georgia, serif; }
.guidance-card small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; color: #747b74; font-size: 8px; line-height: 1.35; }

.center-stage { position: relative; min-width: 0; min-height: 0; height: 100%; overflow: hidden; padding: 14px 18px 10px; display: grid; grid-template-rows: auto minmax(170px, 40%) auto minmax(190px, 1fr) auto auto; gap: 8px; }
.location-heading { min-height: 70px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 3px 4px 15px; }
.location-heading > div:first-child { display: flex; align-items: center; gap: 13px; min-width: 0; }
.location-icon { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid #5d4a2d; display: grid; place-items: center; color: #c79c5d; font-size: 24px; transform: rotate(45deg); }
.location-heading h1 { margin: 2px 0 3px; font: 400 clamp(26px, 3vw, 38px)/1 Georgia, serif; color: #e5c997; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb { color: #85887f; font: 11px Georgia, serif; }
.anchor-name { margin-top: 3px; color: #a58d65; font: 11px Georgia, serif; }
.location-heading blockquote { margin: 0; max-width: 300px; color: #83857f; font: italic 12px/1.45 Georgia, serif; text-align: right; }

.scene-card { min-height: 0; height: 100%; border: 1px solid #5d4a2d; background: #111411; box-shadow: 0 15px 45px rgba(0,0,0,.28); }
.scene-media { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; background: radial-gradient(circle at 30% 45%, #4d2915 0, #171b18 42%, #0d100e 75%); }
.scene-media img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.88) contrast(1.06) brightness(.8); transition: opacity .25s ease; }
.scene-media.no-art img { display: none; }
.scene-vignette { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.04) 35%, rgba(5,7,6,.95) 100%), linear-gradient(90deg, rgba(0,0,0,.25), transparent 24%, transparent 75%, rgba(0,0,0,.2)); }
.scene-live-strip { position: absolute; top: 10px; left: 10px; right: 10px; z-index: 4; display: flex; flex-wrap: wrap; gap: 6px; pointer-events: none; }
.scene-chip { border: 1px solid rgba(214,194,156,.24); border-radius: 999px; background: rgba(8,11,9,.72); backdrop-filter: blur(8px); color: #d3c4a7; padding: 5px 8px; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; box-shadow: 0 4px 14px rgba(0,0,0,.16); }
.scene-chip[data-level="alta"] { border-color: rgba(178,112,70,.45); color: #dfb082; }
.scene-chip[data-level="média"] { border-color: rgba(155,136,89,.4); }
.scene-chip.hidden { display: none; }
.scene-chip.signal-suppressed { display: none; }
.scene-chip.position { border-color: rgba(190,157,101,.42); color: #dfc28f; }
.scene-chip.crisis { border-color: rgba(185,111,72,.62); color: #f0bd91; background: rgba(44,22,13,.78); }
.scene-chip.danger { border-color: rgba(190,91,75,.65); color: #e9aaa0; background: rgba(48,17,15,.82); }
.scene-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 32px 26px 20px; max-width: 900px; }
.scene-caption span { color: #b59058; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; font-weight: 800; }
.scene-caption p { margin: 5px 0 0; color: #e5e0d6; font: 14px/1.55 Georgia, serif; text-shadow: 0 2px 5px #000; }

.interaction-area { min-height: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(270px, .92fr); gap: 10px; }
.interaction-tabs { display: none; }
.interaction-panel { min-height: 0; border: 1px solid #262b25; border-radius: 7px; background: rgba(13,16,14,.7); overflow: hidden; }
.story-shell { margin-top: 0; display: flex; flex-direction: column; }
.world-feed-shell { display: flex; flex-direction: column; }
.story-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 13px 4px 9px; border-bottom: 1px solid #232720; }
.interaction-panel .story-head { padding: 10px 12px 8px; }
.story-head strong { display: block; margin-top: 3px; font: 16px Georgia, serif; color: #cfc2aa; }
.conversation-meta { display: block; margin-top: 3px; max-width: 520px; color: #737b73; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ghost-button { border: 1px solid #30342e; background: transparent; color: #777d76; border-radius: 7px; padding: 7px 9px; cursor: pointer; font-size: 10px; }
.story { flex: 1; height: auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; padding: 9px; display: flex; flex-direction: column; gap: 7px; scrollbar-width: thin; scrollbar-color: #41453d #0d100e; }
.turn { position: relative; border: 1px solid #252a25; background: linear-gradient(180deg, #141815, #111411); padding: 10px 13px 10px 47px; min-height: 46px; border-radius: 6px; color: #d7d6d0; white-space: pre-wrap; font: 13px/1.5 Georgia, serif; }
.turn::before { position: absolute; left: 10px; top: 9px; width: 27px; height: 27px; border-radius: 4px; border: 1px solid #655033; display: grid; place-items: center; color: #d0ac70; background: #1b1d19; font: 700 11px Inter, sans-serif; }
.turn.player { background: #121614; color: #c7c8c2; }
.turn.player::before { content: 'V'; border-color: #404842; color: #aeb3ad; }
.turn.npc { color: #ebe4d6; border-color: #2b2c25; }
.turn.npc::before { content: 'N'; }
.turn.world { padding-left: 47px; color: #aaa99f; font-size: 12px; background: #0f1210; border-color: #242821; }
.turn.world::before { content: '✦'; color: #a4824d; border-color: #4d402a; }

.composer { position: static; z-index: 15; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 9px; padding: 0; background: transparent; }
.composer-field { display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: stretch; border: 1px solid #614a2b; border-radius: 6px; background: #101310; overflow: hidden; }
.quill { display: grid; place-items: center; border-right: 1px solid #2e312b; color: #b59058; font-size: 17px; }
textarea { width: 100%; min-height: 48px; max-height: 150px; resize: none; border: 0; outline: none; background: transparent; color: #ece7dc; padding: 13px 14px; line-height: 1.45; }
textarea::placeholder { color: #60645e; }
.send-button { min-width: 125px; border: 1px solid #7d5a2c; border-radius: 6px; background: linear-gradient(180deg, #5e411f, #332111); color: #f0ce92; padding: 0 18px; display: flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; font: 15px Georgia, serif; }
.send-button:hover { filter: brightness(1.12); }
.send-button:disabled { opacity: .45; cursor: default; }
.status { min-height: 18px; margin: -3px 0 0; color: #7c817a; font-size: 10px; }

.action-strip { min-width: 0; display: grid; grid-template-columns: minmax(150px, .36fr) minmax(0, 1fr); align-items: center; gap: 8px; border: 1px solid #333126; border-radius: 7px; background: rgba(15,18,15,.9); padding: 6px 7px; }
.action-strip-copy { min-width: 0; padding: 0 5px; }
.action-strip-copy span { display: block; color: #d7b879; font: 12px Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-strip-copy small { display: block; color: #6f766f; font-size: 8px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.context-actions { min-width: 0; display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; padding: 1px 0; }
.context-actions::-webkit-scrollbar { display: none; }
.context-action { flex: 0 0 auto; min-height: 31px; border: 1px solid #394039; border-radius: 6px; background: #121612; color: #b7beb7; padding: 5px 9px; cursor: pointer; font-size: 9px; white-space: nowrap; }
.context-action:hover { border-color: #6c5533; color: #e0c693; background: #19160f; }
.context-action.conflict { border-color: #554033; color: #c8a08b; }
.context-action.crime { border-color: #573934; color: #c79187; }
.context-action.economy { border-color: #4f4a31; color: #c3b27b; }
.context-action.social { border-color: #3c4b40; color: #a8bea9; }
.context-action:disabled { opacity: .38; cursor: not-allowed; }
.context-action small { display: block; max-width: 115px; overflow: hidden; text-overflow: ellipsis; color: #746e63; font-size: 6px; }
.action-empty { color: #666e67; font-size: 9px; }

body[data-location-category="shop"] .scene-card { border-color: #69472d; }
body[data-location-category="shop"] .scene-vignette { background: linear-gradient(180deg, rgba(74,33,13,.08) 20%, rgba(10,8,6,.95) 100%), linear-gradient(90deg, rgba(0,0,0,.28), transparent 25%, transparent 75%, rgba(0,0,0,.2)); }
body[data-location-category="district"] .scene-card { border-color: #60583c; }
body[data-location-category="district"] .scene-vignette { background: linear-gradient(180deg, rgba(91,73,31,.05) 18%, rgba(8,9,7,.94) 100%), linear-gradient(90deg, rgba(0,0,0,.18), transparent 22%, transparent 78%, rgba(0,0,0,.14)); }
body[data-location-category="port"] .scene-card { border-color: #3f5260; }
body[data-location-category="port"] .scene-vignette { background: linear-gradient(180deg, rgba(37,61,76,.08) 18%, rgba(6,9,11,.95) 100%), linear-gradient(90deg, rgba(0,0,0,.22), transparent 25%, transparent 75%, rgba(0,0,0,.2)); }

.world-feed-head strong { color: #bfc7bd; }
.live-indicator { display: inline-flex; align-items: center; gap: 5px; color: #68726a; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.live-indicator i { width: 6px; height: 6px; border-radius: 50%; background: #789b7c; box-shadow: 0 0 0 3px rgba(120,155,124,.09); }
.world-feed { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 9px; display: grid; align-content: end; gap: 6px; scrollbar-width: thin; scrollbar-color: #3a413a #0d100e; }
.world-event { position: relative; border: 1px solid #252b26; background: #101411; border-radius: 6px; padding: 8px 9px 8px 34px; color: #adb4ad; font-size: 11px; line-height: 1.4; }
.world-event::before { content: '·'; position: absolute; left: 11px; top: 7px; width: 14px; height: 14px; display: grid; place-items: center; color: #81765f; font-size: 16px; }
.world-event.dialogue { border-color: #343127; background: #14140f; }
.world-event.dialogue::before { content: '◌'; color: #b39460; font-size: 11px; }
.world-event.activity::before { content: '•'; color: #788579; }
.world-event.move::before { content: '→'; color: #778594; font-size: 10px; }
.world-event.event::before { content: '✦'; color: #a87568; font-size: 9px; }
.world-event.important { border-color: #6d5038; background: #18130f; box-shadow: inset 3px 0 0 #9b6f4d; }
.world-event .world-meta { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; color: #666e67; font-size: 8px; text-transform: uppercase; letter-spacing: .06em; }
.world-event .world-speaker { color: #cdb486; font: 11px Georgia, serif; }
.world-event .world-line + .world-line { margin-top: 3px; }
.world-empty { display: grid; place-items: center; min-height: 100%; color: #626962; font-size: 10px; text-align: center; padding: 20px; }

.npc-stack, .guild-stack { display: grid; gap: 6px; }
.npc-card { border: 1px solid #2b302a; background: #111411; padding: 9px; border-radius: 6px; transition: border-color .15s ease, background .15s ease; }
.npc-card.active { border-color: #75562f; background: #17150f; }
.npc-card.distant { background: #0f1210; border-color: #242924; }
.npc-card.distant .npc-avatar { opacity: .72; }
.npc-main { display: flex; gap: 10px; align-items: flex-start; }
.npc-avatar { width: 39px; height: 42px; flex: 0 0 auto; border: 1px solid #71542d; background: linear-gradient(145deg, #2d2e29, #121512); display: grid; place-items: center; color: #d0aa6d; font: 17px Georgia, serif; }
.npc-copy { min-width: 0; flex: 1; }
.npc-copy strong { display: block; color: #dfbd84; font: 15px Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npc-copy small { display: block; color: #858a83; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npc-status { display: inline-flex; max-width: 100%; align-items: center; gap: 5px; margin-top: 4px; color: #8b938b; font-size: 8px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npc-status i { flex: 0 0 auto; width: 5px; height: 5px; border-radius: 50%; background: #697169; }
.npc-status.work i { background: #92966c; }
.npc-status.social i { background: #789b7c; }
.npc-status.rest i { background: #788391; }
.npc-status.event i { background: #a77667; }
.npc-signals { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.npc-signals span { border: 1px solid #34372f; border-radius: 999px; padding: 2px 5px; color: #92988f; background: #111411; font-size: 7px; line-height: 1.2; }
.human-relation { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.npc-relation { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.npc-proximity { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: #7f877f; font-size: 8px; }
.npc-proximity.near { color: #85a187; }
.npc-proximity i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.relation-pill { border: 1px solid #30352e; border-radius: 999px; padding: 3px 6px; font-size: 8px; color: #80857e; }
.talk-button { width: 100%; margin-top: 7px; border: 1px solid #684c2a; background: rgba(83,55,25,.2); color: #dcb979; border-radius: 4px; padding: 6px 8px; cursor: pointer; font: 11px Georgia, serif; }
.talk-button:hover { background: rgba(101,66,28,.3); }
.talk-button.approach { border-color: #3f4c3f; background: rgba(53,72,55,.17); color: #a6bba7; }
.npc-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px; }
.npc-actions .talk-button { margin-top: 7px; }
.npc-secondary { margin-top: 7px; border: 1px solid #343a34; background: #121612; color: #8f978f; border-radius: 4px; padding: 6px 8px; cursor: pointer; font-size: 9px; }
.guild-card { display: flex; align-items: center; gap: 9px; border: 1px solid #292d28; background: #111411; padding: 9px; border-radius: 4px; }
.guild-emblem { width: 35px; height: 40px; border: 1px solid #624c2e; display: grid; place-items: center; color: #d4ad70; background: #181a17; }
.guild-copy { min-width: 0; flex: 1; }
.guild-copy strong { display: block; color: #d5c4a6; font: 14px Georgia, serif; }
.guild-copy small { display: block; margin-top: 3px; color: #777d76; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.guild-metrics { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.guild-metrics span { border: 1px solid #30342d; border-radius: 999px; padding: 2px 5px; color: #767d76; font-size: 7px; text-transform: uppercase; letter-spacing: .04em; }
.mobile-route { display: inline-flex; align-items: center; gap: 5px; }
.mobile-route small { color: #747c75; font-size: 7px; }
.mobile-current-anchor { width: 100%; height: 46px; border: 1px solid #4c412f; border-radius: 7px; background: #15140f; color: #d1b47f; padding: 6px 8px; text-align: left; font: 11px Georgia, serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mobile-move-list { display: grid; gap: 7px; }
.mobile-move-item { width: 100%; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid #2d322d; border-radius: 8px; background: #121512; color: #a8afa8; padding: 9px; text-align: left; }
.mobile-move-item.current { border-color: #6c5230; background: #19160f; }
.mobile-move-item > span:first-child { color: #aa8958; font-size: 16px; text-align: center; }
.mobile-move-item strong { display: block; color: #d1bc96; font: 12px Georgia, serif; }
.mobile-move-item small { display: block; margin-top: 2px; color: #727972; font-size: 8px; }
.mobile-move-item b { color: #8d948d; font-size: 9px; font-weight: 500; }

.prologue-overlay { position: fixed; inset: 0; z-index: 150; display: none; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 30%, rgba(53,45,31,.25), rgba(5,7,6,.96) 55%); backdrop-filter: blur(12px); }
.prologue-overlay.open { display: grid; }
.prologue-card { width: min(760px, 100%); max-height: min(88dvh, 760px); overflow-y: auto; border: 1px solid #675238; border-radius: 12px; background: linear-gradient(180deg,#121511,#0d100e); box-shadow: 0 30px 90px rgba(0,0,0,.62); padding: clamp(20px,4vw,38px); }
.prologue-card h2 { margin: 7px 0 16px; color: #e0c28e; font: 400 clamp(28px,5vw,42px)/1 Georgia, serif; }
.prologue-copy { display: grid; gap: 11px; color: #b9b9b0; font: 14px/1.65 Georgia, serif; }
.prologue-copy p { margin: 0; }
.prologue-question { margin: 24px 0 10px; color: #d0b17c; font: 19px Georgia, serif; }
.prologue-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.prologue-option { border: 1px solid #32372f; border-radius: 8px; background: #111411; color: #d5c7ac; padding: 12px; text-align: left; cursor: pointer; }
.prologue-option:hover { border-color: #6f5633; background: #18150f; }
.prologue-option strong { display: block; font: 14px Georgia, serif; color: #dfbd84; }
.prologue-option small { display: block; margin-top: 4px; color: #7e847d; font-size: 9px; line-height: 1.4; }

.mobile-context, .mobile-bottom-nav { display: none; }

@media (max-width: 1180px) {
  .world-shell { grid-template-columns: minmax(0, 1fr) 292px; }
  .left-rail { display: none; }
  .desktop-nav { gap: 20px; }
  .brand small { display: none; }
}

@media (max-width: 900px) {
  :root { --header-h: 58px; }
  body { padding-bottom: 0; }
  .site-header { grid-template-columns: 1fr auto; padding: 0 14px; gap: 10px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand strong { font-size: 20px; }
  .desktop-nav, .right-rail, .header-money { display: none; }
  .header-metrics { height: 100%; }
  .header-clock { min-width: 88px; border-left: 0; padding: 0; justify-content: flex-end; }
  .header-clock > span { font-size: 18px; }
  .header-clock strong { font-size: 15px; }
  .world-shell { display: block; height: calc(var(--app-height, 100dvh) - var(--header-h) - var(--mobile-nav-h) - env(safe-area-inset-bottom)); min-height: 0; border: 0; overflow: hidden; }
  .center-stage { height: 100%; min-height: 0; overflow: hidden; padding: 8px 10px 7px; display: grid; grid-template-rows: auto minmax(96px, 21dvh) auto auto minmax(0,1fr) auto; gap: 5px; }
  .location-heading { min-height: 0; height: 44px; gap: 10px; padding: 0 1px 4px; }
  .location-icon { width: 35px; height: 35px; font-size: 18px; }
  .location-heading h1 { font-size: clamp(20px, 6.5vw, 28px); }
  .breadcrumb { display: none; }
  .anchor-name { font-size: 9px; max-width: 55vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .location-heading blockquote { display: none; }
  .scene-media { min-height: 0; }
  .scene-caption { padding: 32px 12px 9px; }
  .scene-live-strip { top: 6px; left: 6px; right: 6px; gap: 4px; }
  .scene-chip { padding: 4px 6px; font-size: 6px; }
  .scene-caption span { font-size: 7px; }
  .scene-caption p { font-size: 10px; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .mobile-context { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(110px,.65fr); gap: 7px; margin-top: 0; min-height: 58px; max-height: 72px; overflow: hidden; }
  .mobile-context-block { min-width: 0; overflow: hidden; }
  .mobile-section-title { color: #9f8b68; font: 10px Georgia, serif; margin-bottom: 4px; }
  .mobile-card-strip, .mobile-route-strip { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 3px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .mobile-card-strip::-webkit-scrollbar, .mobile-route-strip::-webkit-scrollbar { display: none; }
  .mobile-npc-card { flex: 0 0 154px; height: 48px; scroll-snap-align: start; border: 1px solid #2e322d; background: #111411; border-radius: 6px; padding: 5px 6px; display: grid; grid-template-columns: 31px minmax(0,1fr) auto; gap: 6px; align-items: center; }
  .mobile-npc-card.active { border-color: #70512c; background: #17150f; }
  .mobile-npc-card .npc-avatar { width: 31px; height: 34px; font-size: 13px; }
  .mobile-npc-card strong { color: #dfbd84; font: 12px Georgia, serif; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-npc-card small { color: #7d827c; font-size: 7px; display: block; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-npc-card button { border: 1px solid #5c4326; background: #24180d; color: #d4b27a; border-radius: 4px; width: 28px; height: 28px; padding: 0; font-size: 0; }
  .mobile-npc-card button::before { content: '›'; font-size: 17px; }
  .mobile-route { flex: 0 0 auto; border: 1px solid #3c3d34; background: #111411; color: #c4b69d; border-radius: 999px; padding: 7px 9px; font-size: 9px; }
  .mobile-route.current { border-color: #72532c; color: #e0bb7a; }
  .mobile-journal { display: none; }
  .action-strip { grid-template-columns: 105px minmax(0,1fr); min-height: 40px; padding: 4px 5px; gap: 4px; }
  .action-strip-copy { padding: 0 3px; }
  .action-strip-copy span { font-size: 10px; }
  .action-strip-copy small { font-size: 7px; }
  .context-action { min-height: 30px; padding: 4px 8px; font-size: 8px; }
  .context-action small { display: none; }
  .mobile-journal summary { cursor: pointer; list-style: none; color: #c8af82; font: 13px Georgia, serif; padding: 11px 12px; }
  .mobile-journal summary::-webkit-details-marker { display: none; }
  .mobile-journal summary::after { content: '＋'; float: right; color: #776348; }
  .mobile-journal[open] summary::after { content: '−'; }
  .mobile-journal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px 10px; }
  .mobile-journal-list { display: grid; gap: 6px; }
  .mobile-journal-entry { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: 1px solid #272b26; background: #141714; border-radius: 5px; padding: 8px; }
  .mobile-journal-entry strong { display: block; color: #d3c3a5; font: 11px Georgia, serif; }
  .mobile-journal-entry small { display: block; color: #6f756e; font-size: 8px; margin-top: 3px; }
  .mobile-journal-entry button { border: 1px solid #5c4326; background: #21170d; color: #d3ae73; border-radius: 4px; padding: 5px 7px; font-size: 9px; }
  .interaction-area { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr; grid-template-rows: 34px minmax(0,1fr); gap: 5px; }
  .interaction-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
  .interaction-tab { border: 1px solid #292e29; background: #0f1210; color: #777e77; border-radius: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; }
  .interaction-tab.active { border-color: #665033; color: #d3b47d; background: #17150f; }
  .interaction-tab b { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 999px; background: #20251f; color: #929991; font-size: 8px; font-weight: 600; }
  .interaction-tab .tab-dot { width: 6px; min-width: 6px; height: 6px; background: #7d9d7d; }
  .interaction-panel { display: none; min-height: 0; height: 100%; overflow: hidden; }
  .interaction-panel.active { display: flex; min-height: 0; }
  .interaction-panel .story-head { padding: 7px 9px 6px; min-height: 42px; }
  .interaction-panel .story-head strong { font-size: 12px; }
  .interaction-panel .section-kicker { font-size: 7px; }
  .story-shell { min-height: 0; overflow: hidden; }
  .story { flex: 1 1 auto; height: 0; min-height: 0; max-height: 100%; overflow-y: auto; padding: 6px; gap: 5px; }
  .world-feed { padding: 6px; gap: 5px; }
  .turn { min-height: 38px; padding: 7px 8px 7px 38px; font-size: 11px; line-height: 1.38; }
  .turn::before { left: 7px; top: 6px; width: 24px; height: 24px; font-size: 9px; }
  .world-event { padding: 6px 7px 6px 29px; font-size: 10px; }
  .world-event::before { left: 8px; top: 5px; }
  .composer { position: sticky; bottom: 0; margin: 0; padding: 0; background: #090b0a; border-top: 0; min-height: 44px; z-index: 24; }
  .center-stage.world-tab-active .composer { display: none; }
  .composer-field { grid-template-columns: 34px minmax(0,1fr); }
  textarea { min-height: 44px; max-height: 82px; padding: 10px; font-size: 12px; }
  .send-button { min-width: 50px; width: 50px; padding: 0; }
  .send-button span { display: none; }
  .send-button b { font-size: 16px; }
  .mobile-bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; height: calc(var(--mobile-nav-h) + env(safe-area-inset-bottom)); padding: 0 4px env(safe-area-inset-bottom); border-top: 1px solid #4a3b25; background: rgba(8,10,9,.98); backdrop-filter: blur(16px); display: grid; grid-template-columns: repeat(5,1fr); transition: transform .16s ease, opacity .16s ease; }
  .mobile-bottom-nav button, .mobile-bottom-nav a { border: 0; background: transparent; color: #787d76; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 8px; }
  .mobile-bottom-nav span { color: #b28c54; font-size: 17px; }
  .status { display: none; }

  .mobile-sheet { position: fixed; inset: 0; z-index: 90; display: none; align-items: end; }
  .mobile-sheet.open { display: flex; }
  .mobile-sheet-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.68); }
  .mobile-sheet-card { position: relative; width: 100%; max-height: min(72dvh, 620px); border: 1px solid #4a3c28; border-bottom: 0; border-radius: 14px 14px 0 0; background: #0d100e; box-shadow: 0 -25px 70px rgba(0,0,0,.55); overflow: hidden; }
  .mobile-sheet-head { height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-bottom: 1px solid #272b26; }
  .mobile-sheet-head strong { font: 18px Georgia, serif; color: #dbc08e; }
  .mobile-sheet-head button { width: 32px; height: 32px; border: 1px solid #343833; background: #151815; color: #aaa; border-radius: 50%; font-size: 20px; }
  .mobile-sheet-content { max-height: calc(min(72dvh, 620px) - 50px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 14px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 18px; }
  .mobile-people-list { display: grid; gap: 8px; align-content: start; }
  .mobile-person-row { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; gap: 9px; align-items: center; border: 1px solid #2d322d; border-radius: 8px; background: #121512; padding: 8px; }
  .mobile-person-row.active { border-color: #72532f; background: #18150f; }
  .mobile-person-row .npc-avatar { width: 42px; height: 44px; font-size: 16px; }
  .mobile-person-row strong { display: block; color: #ddbd85; font: 14px Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-person-row small { display: block; margin-top: 2px; color: #777e77; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-person-row .npc-status { margin-top: 3px; font-size: 8px; }
  .mobile-person-meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
  .mobile-person-row button { border: 1px solid #654827; background: #24180d; color: #d6b377; border-radius: 6px; padding: 8px 9px; font-size: 10px; }
  .mobile-person-row.distant { opacity: .9; }
  .mobile-person-row.distant button { border-color: #425044; background: #152016; color: #a9bbaa; }
  .mobile-admin-link { display: block; text-align: center; border: 1px solid #3a3e38; border-radius: 7px; color: #aaa99f; text-decoration: none; padding: 10px; font-size: 11px; }
  .prologue-overlay { padding: 10px; align-items: end; }
  .prologue-card { width: 100%; max-height: 88dvh; border-radius: 14px 14px 0 0; padding: 20px 14px calc(22px + env(safe-area-inset-bottom)); }
  .prologue-card h2 { font-size: 28px; }
  .prologue-copy { font-size: 12px; line-height: 1.55; }
  .prologue-question { font-size: 16px; margin-top: 18px; }
  .prologue-options { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  body.keyboard-open .mobile-bottom-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  body.keyboard-open .world-shell {
    height: calc(var(--app-height, 100dvh) - var(--header-h));
  }
  body.keyboard-open .center-stage {
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 5px;
    padding-top: 5px;
    padding-bottom: calc(5px + env(safe-area-inset-bottom));
  }
  body.keyboard-open .location-heading,
  body.keyboard-open .quick-hud,
  body.keyboard-open .scene-card,
  body.keyboard-open .mobile-context,
  body.keyboard-open .action-deck {
    display: none !important;
  }
  body.keyboard-open .interaction-area {
    grid-row: 1;
    min-height: 0;
  }
  body.keyboard-open .composer {
    grid-row: 2;
    min-height: 48px;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
  body.keyboard-open .interaction-tabs {
    display: grid;
  }
}

/* Compact mobile composer: keep conversation history visible by default.
   It only grows when the player actually types multiple lines. */
@media (max-width: 900px) {
  .composer {
    min-height: 46px !important;
    gap: 5px;
  }
  .composer-field {
    min-height: 46px;
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .composer .quill {
    display: none;
  }
  .composer textarea {
    min-height: 46px;
    max-height: 76px;
    padding: 11px 12px;
    line-height: 1.35;
    overflow-y: auto;
  }
  .composer .send-button {
    width: 46px;
    min-width: 46px;
    min-height: 46px;
    max-height: 76px;
    border-radius: 7px;
  }
}

@media (display-mode: standalone), (display-mode: fullscreen) {
  :root { --mobile-nav-h: 60px; }
  .site-header { padding-top: env(safe-area-inset-top); height: calc(var(--header-h) + env(safe-area-inset-top)); }
  .world-shell { height: calc(var(--app-height, 100dvh) - var(--header-h) - env(safe-area-inset-top)); }
}

@media (max-width: 900px) and (display-mode: standalone), (max-width: 900px) and (display-mode: fullscreen) {
  .world-shell { height: calc(var(--app-height, 100dvh) - var(--header-h) - env(safe-area-inset-top) - var(--mobile-nav-h) - env(safe-area-inset-bottom)); }
  body.keyboard-open .world-shell { height: calc(var(--app-height, 100dvh) - var(--header-h) - env(safe-area-inset-top)); }
}

@media (max-width: 560px) {
  .mobile-journal-grid { grid-template-columns: 1fr; }
}

/* Player map */
.player-map-page { min-height: 100vh; background: #090b0a; color: var(--text); }
.player-map-header { position: sticky; top: 0; z-index: 20; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 22px; border-bottom: 1px solid #514126; background: rgba(8,10,9,.96); backdrop-filter: blur(14px); }
.player-map-header h1 { margin: 3px 0 0; font: 400 28px Georgia, serif; color: #e2c38b; }
.player-map-header a { color: #c4ad82; text-decoration: none; border: 1px solid #4a4030; border-radius: 7px; padding: 8px 11px; font-size: 11px; }
.player-map-shell { display: grid; grid-template-columns: minmax(0,1fr) 300px; min-height: calc(100vh - 66px); }
.player-map-toolbar { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid #242821; color: #7e847d; font-size: 10px; background: #0f1210; }
.player-map-viewport { position: relative; overflow: auto; min-height: 660px; background-image: radial-gradient(circle at center, rgba(108,85,48,.10), transparent 58%), linear-gradient(#111512 1px, transparent 1px), linear-gradient(90deg,#111512 1px,transparent 1px); background-size: auto, 44px 44px, 44px 44px; }
.player-map-lines, .player-map-nodes { position: absolute; left: 0; top: 0; }
.player-map-lines { pointer-events: none; }
.player-map-lines line { stroke: #6b5532; stroke-width: 2; stroke-dasharray: 8 6; opacity: .72; }
.player-map-node { position: absolute; width: 150px; min-height: 92px; transform: translate(-50%,-50%); border: 1px solid #4c4434; border-radius: 9px; padding: 10px; color: #ded6c7; background: linear-gradient(rgba(13,16,14,.68), rgba(13,16,14,.94)), var(--map-art, none) center/cover; text-align: left; cursor: pointer; box-shadow: 0 10px 28px rgba(0,0,0,.28); }
.player-map-node.frontier { opacity: .72; filter: saturate(.45); }
.player-map-node.current { border-color: #c09758; outline: 2px solid rgba(192,151,88,.25); }
.player-map-node span { display: block; color: #d1aa69; font-size: 20px; margin-bottom: 5px; }
.player-map-node strong { display: block; font: 14px Georgia, serif; }
.player-map-node small { display: block; color: #858b84; font-size: 9px; margin-top: 4px; }
.player-map-node em { display: block; color: #b09b75; font-size: 8px; font-style: normal; margin-top: 4px; }
.player-map-inspector { border-left: 1px solid #282b26; background: #0d100e; overflow: auto; }
.player-map-inspector img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-bottom: 1px solid #282b26; }
.player-map-inspector-body { padding: 16px; }
.player-map-inspector h2 { margin: 5px 0 8px; font: 400 26px Georgia, serif; color: #dfc18d; }
.player-map-inspector p { color: #999e98; font-size: 11px; line-height: 1.55; }
.player-map-inspector .map-route-button { width: 100%; border: 1px solid #6c4e2a; background: #291b0d; color: #d9b475; border-radius: 5px; padding: 9px; margin-top: 12px; }
.map-people { margin-top: 14px; display: grid; gap: 6px; }
.map-person { border: 1px solid #272c27; background: #121512; border-radius: 6px; padding: 7px 8px; }
.map-person strong { display: block; color: #d0b47f; font: 11px Georgia, serif; }
.map-person small { display: block; color: #737a73; font-size: 8px; margin-top: 2px; }

@media (max-width: 800px) {
  .player-map-header { padding: 9px 12px; }
  .player-map-header h1 { font-size: 23px; }
  .player-map-shell { grid-template-columns: 1fr; }
  .player-map-toolbar { overflow-x: auto; white-space: nowrap; }
  .player-map-viewport { min-height: 58vh; }
  .player-map-inspector { border-left: 0; border-top: 1px solid #282b26; min-height: 260px; }
}

@media (max-width: 520px) {
  .center-stage { padding-left: 9px; padding-right: 9px; }
  .scene-card { margin: 0 -1px; }
  .scene-caption { padding-left: 12px; padding-right: 12px; }
  .ghost-button { display: none; }
  .turn { border-radius: 5px; }
}

@media (max-width: 390px), (max-height: 700px) and (max-width: 900px) {
  .center-stage { grid-template-rows: auto minmax(82px, 18dvh) auto auto minmax(0,1fr) auto; gap: 4px; }
  .location-heading { height: 39px; }
  .location-icon { width: 31px; height: 31px; font-size: 16px; }
  .location-heading h1 { font-size: 20px; }
  .mobile-context { min-height: 52px; max-height: 60px; }
  .mobile-npc-card { height: 42px; flex-basis: 142px; }
  .mobile-npc-card .npc-avatar { height: 30px; width: 28px; }
  .mobile-section-title { margin-bottom: 2px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Gameplay UX v2: foco, ações contextuais e progressive disclosure           */
/* -------------------------------------------------------------------------- */

body:not(.player-map-page) { overflow-x: hidden; }

.world-shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: 1380px;
  border-left: 0;
  border-right: 0;
}

.center-stage {
  max-width: 1380px;
  width: 100%;
  margin: 0 auto;
  padding: 12px 18px 10px;
  grid-template-rows: auto auto minmax(150px, 31%) auto minmax(190px, 1fr) auto auto;
}

.location-heading { padding-bottom: 6px; min-height: 56px; }
.location-heading blockquote { max-width: 360px; }

.quick-hud {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(250px, 1fr) minmax(360px, .9fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 58px;
  padding: 7px 9px;
  border: 1px solid #2b302a;
  border-radius: 8px;
  background: rgba(14,17,15,.88);
}

.objective-now { min-width: 0; padding: 0 4px; }
.objective-now strong { display: block; margin-top: 2px; color: #dec28f; font: 14px/1.25 Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.objective-now small { display: block; margin-top: 3px; color: #777f78; font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.quick-vitals { min-width: 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.quick-vital, .quick-money { min-width: 0; border-left: 1px solid #292d28; padding: 1px 8px; }
.quick-vital span, .quick-money span { display: block; color: #757c75; font-size: 7px; text-transform: uppercase; letter-spacing: .09em; }
.quick-vital strong, .quick-money strong { display: block; margin-top: 2px; color: #d7c49f; font: 12px Georgia, serif; }
.quick-vital i { display: block; height: 3px; margin-top: 5px; overflow: hidden; border-radius: 999px; background: #272b27; }
.quick-vital i b { display: block; width: 100%; height: 100%; border-radius: inherit; transition: width .25s ease; }
.quick-vital.health i b { background: #8d6d61; }
.quick-vital.energy i b { background: #7f8d69; }
.quick-money { min-width: 72px; }
.quick-money strong { color: #e0bb79; }

.important-alerts { min-width: 0; display: flex; gap: 5px; justify-content: flex-end; }
.important-alert { min-width: 0; max-width: 190px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid #4a3e2e; border-radius: 999px; background: #17150f; color: #cdb58c; padding: 6px 8px; font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.important-alert { cursor: pointer; }
.important-alert strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.important-alert.crisis, .important-alert.warning { border-color: #70462e; color: #d8a37c; }
.important-alert.danger { border-color: #703a35; color: #db948b; background: #1d1110; }

.scene-card { border-radius: 8px; overflow: hidden; }
.scene-caption { min-width: 0; max-width: min(920px, 94%); }
.scene-caption p { max-width: 100%; overflow-wrap: anywhere; word-break: normal; }

.action-deck {
  position: relative;
  min-width: 0;
  border: 1px solid #383126;
  border-radius: 9px;
  background: rgba(15,18,15,.94);
  padding: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,.14);
}
.outcome-feedback {
  position: absolute;
  z-index: 9;
  right: 8px;
  top: -36px;
  max-width: calc(100% - 16px);
  display: flex;
  justify-content: flex-end;
  gap: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
  pointer-events: none;
}
.outcome-feedback.visible { opacity: 1; transform: none; }
.outcome-chip {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #4b4334;
  border-radius: 999px;
  background: rgba(13,16,14,.96);
  box-shadow: 0 8px 22px rgba(0,0,0,.38);
  padding: 4px 7px 4px 5px;
  color: #c7b799;
}
.outcome-chip.positive { border-color: #405644; color: #aec3aa; }
.outcome-chip.negative { border-color: #633f38; color: #d09b90; }
.outcome-chip strong { white-space: nowrap; font-size: 8px; font-weight: 700; }
.outcome-chip .pixel-glyph { width: 19px; height: 19px; border: 0; background: transparent; }
.action-deck-head { min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 1px 4px 5px; }
.action-strip-copy { min-width: 0; padding: 0; }
.action-strip-copy span { display: block; color: #d7b879; font: 11px Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-strip-copy small { display: block; color: #687068; font-size: 7px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.action-progress { min-width: 0; max-width: 56%; display: none; align-items: center; gap: 7px; color: #cdb88f; font-size: 9px; }
.action-progress.active { display: flex; }
.action-progress strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.action-spinner { width: 11px; height: 11px; flex: 0 0 auto; border: 2px solid #373b34; border-top-color: #c4995e; border-radius: 50%; animation: action-spin .7s linear infinite; }
@keyframes action-spin { to { transform: rotate(360deg); } }

.action-core-nav { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
.action-core-nav button { position: relative; min-width: 0; min-height: 42px; border: 1px solid #30362f; border-radius: 7px; background: #111511; color: #a8afa8; padding: 6px 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px; }
.action-core-nav button > span { color: #b28c54; font-size: 15px; }
.action-core-nav button > strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px Georgia, serif; font-weight: 500; }
.action-core-nav button::after { content: attr(data-count); min-width: 14px; height: 14px; display: grid; place-items: center; position: absolute; top: 3px; right: 4px; border-radius: 999px; background: #20251f; color: #777e77; font-size: 7px; }
.action-core-nav button:hover, .action-core-nav button.active { border-color: #735430; background: #19160f; color: #dfc38f; }
.action-core-nav button.urgent { border-color: #69443a; color: #d0a095; }
.action-core-nav button:disabled { opacity: .34; cursor: default; }
.action-processing .action-core-nav button, .action-processing .action-menu { pointer-events: none; opacity: .55; }
.legacy-actions { display: none !important; }

.action-menu { position: absolute; z-index: 35; left: 6px; right: 6px; bottom: calc(100% + 7px); display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; max-height: min(48vh, 420px); overflow-y: auto; border: 1px solid #51422f; border-radius: 10px; background: rgba(10,13,11,.98); box-shadow: 0 20px 60px rgba(0,0,0,.6); padding: 9px; }
.action-menu.open { display: grid; }
.action-menu-sheet-head { display: none; }
.action-menu-section { min-width: 0; display: grid; align-content: start; gap: 5px; }
.action-menu-section:only-child { grid-column: 1 / -1; grid-template-columns: repeat(2,minmax(0,1fr)); }
.action-menu-section:only-child .action-menu-title { grid-column: 1 / -1; }
.action-menu-title { color: #8c816e; font-size: 8px; text-transform: uppercase; letter-spacing: .12em; padding: 2px 4px; }
.action-menu-item, .action-menu-person, .action-menu-utility { min-width: 0; display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid #292e29; border-radius: 7px; background: #111511; color: #c6c4bb; padding: 7px 8px; text-align: left; text-decoration: none; cursor: pointer; }
.action-menu-item:hover, .action-menu-person:hover, .action-menu-utility:hover { border-color: #665035; background: #17150f; }
.action-menu-item > span, .action-menu-person > span, .action-menu-utility > span { min-width: 0; }
.action-menu-item strong, .action-menu-person strong, .action-menu-utility strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d5c09b; font: 11px Georgia, serif; }
.action-menu-item small, .action-menu-person small, .action-menu-utility small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #6f776f; font-size: 8px; margin-top: 2px; }
.action-menu-person b { color: #aa8a5b; font-size: 8px; font-weight: 500; }
.action-menu-item:disabled { opacity: .4; cursor: default; }
.action-menu-empty { grid-column: 1 / -1; color: #727872; font-size: 10px; padding: 15px; text-align: center; }

.pixel-glyph { position: relative; width: 24px; height: 24px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #4a4030; border-radius: 3px; background: #171a16; image-rendering: pixelated; }
.pixel-glyph img { width: 16px; height: 16px; display: block; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; }
.pixel-glyph i { width: 10px; height: 10px; background: #ad8956; box-shadow: -3px 0 #ad8956, 3px 0 #705738, 0 -3px #c6a46c, 0 3px #705738; }
.pixel-item i, .pixel-ore i, .pixel-tool i { transform: rotate(45deg); background: #a68b66; box-shadow: -3px 0 #6d756e, 3px 0 #c3a36e, 0 -3px #b8c0b6, 0 3px #705f47; }
.pixel-person i { width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 7px 0 2px #8e6e4b; }
.pixel-clue i { width: 8px; height: 8px; transform: rotate(45deg); background: #b79459; box-shadow: none; }
.pixel-risk i, .pixel-event i, .pixel-consequence i, .pixel-law i { width: 0; height: 0; background: transparent; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 11px solid #aa6757; box-shadow: none; }
.pixel-safe i { width: 10px; height: 6px; border-left: 3px solid #78947a; border-bottom: 3px solid #78947a; background: transparent; transform: rotate(-45deg); box-shadow: none; }
.pixel-economy i, .pixel-coin i { width: 10px; height: 10px; border: 2px solid #b58d4e; border-radius: 50%; background: transparent; box-shadow: none; }
.pixel-house i { width: 10px; height: 8px; margin-top: 4px; background: #9e7950; box-shadow: 0 -4px 0 -1px #b28c59; transform: rotate(0); }
.pixel-shop i { width: 12px; height: 8px; background: #8e7652; box-shadow: 0 -4px #b18d58; }
.pixel-map i, .pixel-world i, .pixel-journal i { width: 12px; height: 12px; background: repeating-linear-gradient(90deg,#a98754 0 3px,#4e4334 3px 5px); box-shadow: none; }

.interaction-area { grid-template-columns: 1fr; grid-template-rows: 34px minmax(0,1fr); gap: 6px; }
.interaction-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.interaction-tab { border: 1px solid #292e29; background: #0f1210; color: #777e77; border-radius: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 10px; cursor: pointer; }
.interaction-tab.active { border-color: #665033; color: #d3b47d; background: #17150f; }
.interaction-tab b { min-width: 17px; height: 17px; display: grid; place-items: center; border-radius: 999px; background: #20251f; color: #929991; font-size: 8px; font-weight: 600; }
.interaction-tab .tab-dot { width: 6px; min-width: 6px; height: 6px; background: #7d9d7d; }
.interaction-panel { display: none; min-height: 0; height: 100%; }
.interaction-panel.active { display: flex; }
.story, .world-feed { overflow-x: hidden; }
.turn, .world-event, .world-line, .conversation-meta, .story-head > div { min-width: 0; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
.turn { width: 100%; }

.world-feed-shell { overflow: hidden; }
.surroundings-grid { flex: 1; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; padding: 8px; align-content: start; }
.surrounding-card { min-width: 0; border: 1px solid #272d27; border-radius: 7px; background: #111411; padding: 8px; }
.surrounding-card.risks { border-color: #3b302b; }
.surrounding-title { display: flex; align-items: center; gap: 6px; color: #c8b38d; margin-bottom: 6px; }
.surrounding-title > span { color: #9d7b4b; font-size: 12px; }
.surrounding-title strong { font: 11px Georgia, serif; }
.surrounding-list { min-width: 0; display: grid; gap: 4px; }
.surrounding-entry { min-width: 0; display: grid; grid-template-columns: 25px minmax(0,1fr); gap: 7px; align-items: center; border-top: 1px solid #20241f; padding: 5px 0 1px; }
.surrounding-entry:first-child { border-top: 0; }
.surrounding-entry > span { min-width: 0; }
.surrounding-entry strong { display: block; min-width: 0; color: #c6c2b7; font: 10px Georgia, serif; overflow-wrap: anywhere; }
.surrounding-entry small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 2px; color: #6e766f; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.surrounding-entry .pixel-glyph { width: 23px; height: 23px; }
.activity-log { flex: 0 0 auto; min-width: 0; border-top: 1px solid #242821; background: #0e110f; }
.activity-log summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; color: #777f78; padding: 8px 10px; font-size: 9px; }
.activity-log summary::-webkit-details-marker { display: none; }
.activity-log summary::before { content: '＋'; color: #9b7a4b; margin-right: 7px; }
.activity-log[open] summary::before { content: '−'; }
.activity-log summary b { margin-left: auto; border-radius: 999px; background: #20251f; color: #8c948c; padding: 2px 6px; font-size: 8px; }
.activity-log .world-feed { max-height: 180px; border-top: 1px solid #20241f; align-content: start; }

.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap: 7px; }
.inventory-card { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 8px; align-items: center; border: 1px solid #292e29; background: #111411; border-radius: 7px; padding: 8px; }
.inventory-card > span:not(.pixel-glyph) { min-width: 0; }
.inventory-card strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d0bc98; font: 12px Georgia, serif; }
.inventory-card small { display: block; color: #747a73; font-size: 8px; margin-top: 2px; text-transform: uppercase; }
.inventory-card b { color: #b28d59; font-size: 10px; }

.game-menu { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: flex-end; }
.game-menu.open { display: flex; }
.game-menu-backdrop { position: absolute; inset: 0; border: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(5px); }
.game-menu-card { position: relative; width: min(760px, 86vw); height: min(86dvh, 820px); display: grid; grid-template-rows: 62px 44px minmax(0,1fr); border-left: 1px solid #5a472f; border-radius: 12px 0 0 12px; background: #0d100e; box-shadow: -30px 0 80px rgba(0,0,0,.48); overflow: hidden; }
.game-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 18px; border-bottom: 1px solid #282c27; }
.game-menu-head strong { display: block; margin-top: 2px; color: #dfc28e; font: 22px Georgia, serif; }
.game-menu-head button { width: 34px; height: 34px; border: 1px solid #363a34; border-radius: 50%; background: #141714; color: #aaa; font-size: 21px; cursor: pointer; }
.game-menu-tabs { min-width: 0; display: flex; overflow-x: auto; border-bottom: 1px solid #282c27; background: #101310; scrollbar-width: none; }
.game-menu-tabs::-webkit-scrollbar { display: none; }
.game-menu-tabs button { flex: 1 0 auto; min-width: 92px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: #777f78; padding: 0 12px; font-size: 9px; cursor: pointer; }
.game-menu-tabs button.active { color: #d3b681; border-bottom-color: #9a7647; background: #14150f; }
.game-menu-content { min-width: 0; min-height: 0; overflow: hidden; }
.game-menu-panel { display: none; height: 100%; overflow-y: auto; padding: 14px 16px 24px; align-content: start; gap: 14px; }
.game-menu-panel.active { display: grid; }
.menu-player-card { display: flex; align-items: center; gap: 12px; min-width: 0; }
.menu-player-card .player-copy { min-width: 0; }
.menu-player-card .player-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
.menu-stat-grid > div, .menu-meta-row { min-width: 0; border: 1px solid #282d28; border-radius: 6px; background: #111411; padding: 8px 9px; }
.menu-stat-grid span, .menu-meta-row span { display: block; color: #737a73; font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }
.menu-stat-grid strong, .menu-meta-row strong { display: block; margin-top: 3px; color: #d0bd9b; font: 11px Georgia, serif; overflow-wrap: anywhere; }
.menu-section { min-width: 0; display: grid; gap: 7px; }
.menu-section-title { color: #ac9369; font: 13px Georgia, serif; display: flex; justify-content: space-between; }
.menu-section-title b { color: #767d76; font: 9px Inter, sans-serif; }
.menu-columns { min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.detail-list { min-width: 0; display: grid; gap: 6px; }
.detail-card { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); align-items: center; gap: 9px; border: 1px solid #292e29; border-radius: 7px; background: #111411; padding: 8px 9px; }
.detail-card > div { min-width: 0; }
.detail-card strong { display: block; color: #d2bd98; font: 12px Georgia, serif; overflow-wrap: anywhere; }
.detail-card small { display: block; margin-top: 2px; color: #727a72; font-size: 8px; line-height: 1.4; overflow-wrap: anywhere; }
.detail-metrics { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.detail-metrics span { border: 1px solid #30352e; border-radius: 999px; padding: 2px 5px; color: #7e867e; font-size: 7px; }
.menu-map-link { min-width: 0; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 9px; border: 1px solid #55432e; border-radius: 8px; background: #17140f; color: #d4ba8b; padding: 10px; text-decoration: none; }
.menu-map-link > span { grid-row: 1 / 3; display: grid; place-items: center; color: #ba9156; font-size: 22px; }
.menu-map-link strong { font: 13px Georgia, serif; }
.menu-map-link small { color: #79766d; font-size: 8px; }

.toast-stack { position: fixed; z-index: 140; right: 18px; top: calc(var(--header-h) + 14px); width: min(340px, calc(100vw - 24px)); display: grid; gap: 7px; pointer-events: none; }
.game-toast { min-width: 0; display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 9px; align-items: center; border: 1px solid #5c4931; border-radius: 8px; background: rgba(16,19,16,.96); box-shadow: 0 14px 38px rgba(0,0,0,.45); padding: 9px 10px; opacity: 0; transform: translateY(-8px); transition: opacity .2s ease, transform .2s ease; }
.game-toast.visible { opacity: 1; transform: none; }
.game-toast strong { display: block; color: #d8c29a; font: 12px Georgia, serif; overflow-wrap: anywhere; }
.game-toast small { display: block; margin-top: 2px; color: #777e77; font-size: 8px; line-height: 1.35; overflow-wrap: anywhere; }
.game-toast.event, .game-toast.consequence { border-color: #704a36; }

.journal-section { min-width: 0; border: 1px solid #292e29; border-radius: 8px; background: #111411; overflow: hidden; }
.journal-section summary { list-style: none; cursor: pointer; color: #c8af82; font: 12px Georgia, serif; padding: 10px 11px; }
.journal-section summary::-webkit-details-marker { display: none; }
.journal-section summary::after { content: '＋'; float: right; color: #776348; }
.journal-section[open] summary::after { content: '−'; }
.journal-section .mobile-journal-list { padding: 0 8px 8px; }

/* Defensive wrapping for all dynamic text paths. */
.player-copy, .guidance-card > div, .mini-card > span, .npc-copy, .guild-copy,
.mobile-person-row > *, .mobile-journal-entry > div, .mobile-move-item > span,
.world-event, .world-line, .turn, .scene-caption, .surrounding-card,
.action-menu-item, .action-menu-person, .action-menu-utility,
.game-menu-card, .game-menu-panel, .detail-card, .inventory-card {
  min-width: 0;
  max-width: 100%;
}
.turn, .world-line, .world-event, .mobile-journal-entry small, .mobile-journal-entry strong,
.guidance-card small, .detail-card small, .detail-card strong, .mini-card small,
.action-menu-item small, .action-menu-person small, .action-menu-utility small {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .center-stage {
    padding: 7px 9px 6px;
    grid-template-rows: auto auto minmax(82px, 18dvh) auto minmax(0,1fr) auto auto;
    gap: 4px;
  }
  .location-heading { height: 40px; padding-bottom: 2px; }
  .quick-hud { grid-template-columns: minmax(0,1fr) auto; min-height: 48px; gap: 5px; padding: 5px 6px; }
  .objective-now strong { font-size: 10px; }
  .objective-now small { display: none; }
  .quick-vitals { grid-template-columns: 64px 64px 54px; gap: 2px; }
  .quick-vital, .quick-money { padding: 0 5px; }
  .quick-vital span, .quick-money span { font-size: 6px; }
  .quick-vital strong, .quick-money strong { font-size: 9px; }
  .quick-vital i { margin-top: 3px; }
  .important-alerts { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .important-alerts:empty { display: none; }
  .important-alert { padding: 4px 7px; font-size: 7px; }
  .scene-caption { padding: 28px 11px 8px; }
  .scene-caption p { -webkit-line-clamp: 2; }
  .mobile-context { display: none; }
  .action-deck { padding: 4px; }
  .outcome-feedback { top: -29px; right: 3px; max-width: calc(100% - 6px); gap: 3px; overflow: hidden; }
  .outcome-chip { padding: 3px 5px 3px 3px; gap: 3px; }
  .outcome-chip strong { font-size: 7px; }
  .outcome-chip .pixel-glyph { width: 17px; height: 17px; }
  .outcome-chip .pixel-glyph img { width: 14px; height: 14px; }
  .action-deck-head { padding: 0 2px 3px; }
  .action-strip-copy span { font-size: 9px; }
  .action-strip-copy small { font-size: 6px; }
  .action-progress { max-width: 67%; font-size: 8px; }
  .action-core-nav { gap: 3px; }
  .action-core-nav button { min-height: 38px; padding: 4px 3px; gap: 3px; flex-direction: column; }
  .action-core-nav button > span { font-size: 12px; line-height: 1; }
  .action-core-nav button > strong { font-size: 8px; }
  .action-core-nav button::after { top: 2px; right: 2px; transform: scale(.84); }
  .action-menu {
    position: fixed;
    z-index: 80;
    left: 8px;
    right: 8px;
    bottom: calc(64px + env(safe-area-inset-bottom));
    grid-template-columns: 1fr;
    max-height: min(54dvh, 520px);
    padding: 7px;
    border-radius: 14px;
    overscroll-behavior: contain;
    box-shadow: 0 -12px 50px rgba(0,0,0,.72), 0 0 0 1px rgba(176,137,82,.06);
  }
  .action-menu-sheet-head {
    position: sticky;
    top: -7px;
    z-index: 2;
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: -1px -1px 2px;
    padding: 8px 7px 9px;
    border-bottom: 1px solid #2c302b;
    background: rgba(10,13,11,.985);
  }
  .action-menu-sheet-head span { min-width: 0; }
  .action-menu-sheet-head small { display: block; color: #6f776f; font-size: 6px; letter-spacing: .14em; }
  .action-menu-sheet-head strong { display: block; margin-top: 2px; color: #dfbf87; font: 16px Georgia, serif; }
  .action-menu-sheet-head button {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border: 1px solid #373d36;
    border-radius: 50%;
    background: #151815;
    color: #a7ada7;
    font-size: 19px;
  }
  .action-menu-section:only-child { grid-template-columns: 1fr; }
  .action-menu-section:only-child .action-menu-title { grid-column: auto; }
  .action-menu-item, .action-menu-person, .action-menu-utility { grid-template-columns: 28px minmax(0,1fr) auto; padding: 6px 7px; }
  .surroundings-grid { grid-template-columns: 1fr 1fr; gap: 5px; padding: 6px; }
  .surrounding-card { padding: 6px; }
  .surrounding-title { margin-bottom: 3px; }
  .surrounding-title strong { font-size: 9px; }
  .surrounding-entry { grid-template-columns: 21px minmax(0,1fr); gap: 5px; padding-top: 3px; }
  .surrounding-entry .pixel-glyph { width: 20px; height: 20px; transform: scale(.88); }
  .surrounding-entry strong { font-size: 8px; }
  .surrounding-entry small { font-size: 7px; -webkit-line-clamp: 1; }
  .activity-log .world-feed { max-height: 150px; }
  .game-menu { align-items: end; }
  .game-menu-card { width: 100%; height: min(82dvh, 720px); border-left: 1px solid #5a472f; border-top: 1px solid #5a472f; border-radius: 14px 14px 0 0; grid-template-rows: 52px 42px minmax(0,1fr); }
  .game-menu-head { padding: 0 13px; }
  .game-menu-head strong { font-size: 18px; }
  .game-menu-tabs button { min-width: 82px; padding: 0 8px; font-size: 8px; }
  .game-menu-panel { padding: 11px 12px calc(20px + env(safe-area-inset-bottom)); }
  .menu-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .menu-columns { grid-template-columns: 1fr; }
  .toast-stack { top: calc(var(--header-h) + 8px); right: 8px; width: calc(100vw - 16px); }
  .game-toast { padding: 7px 8px; }
  .mobile-sheet-content { gap: 8px; }
  .mobile-journal-entry { min-width: 0; }
  .mobile-journal-entry strong, .mobile-journal-entry small { white-space: normal; overflow: visible; text-overflow: clip; }
}

@media (max-width: 430px) {
  .center-stage { padding-left: 7px; padding-right: 7px; }
  .quick-hud { grid-template-columns: minmax(0,1fr) auto; }
  .quick-vitals { grid-template-columns: 58px 58px 48px; }
  .quick-vital strong, .quick-money strong { font-size: 8px; }
  .surroundings-grid { grid-template-columns: 1fr; }
  .surrounding-card { padding: 5px 6px; }
  .action-progress { max-width: 62%; }
  .game-menu-card { height: 84dvh; }
}

/* -------------------------------------------------------------------------- */
/* Character creator + modular pixel avatar                                   */
/* -------------------------------------------------------------------------- */

.avatar-frame {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 35%, rgba(160,126,73,.16), transparent 52%),
    linear-gradient(180deg, #1d211d, #101310);
}

.avatar-sprite {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 64 / 80;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.avatar-sprite img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  pointer-events: none;
}

.avatar-sprite .avatar-layer-hair-back { z-index: 1; }
.avatar-sprite .avatar-layer-body { z-index: 2; }
.avatar-sprite .avatar-layer-outfit { z-index: 3; }
.avatar-sprite .avatar-layer-hair-front { z-index: 4; }
.avatar-sprite .avatar-layer-accessory { z-index: 5; }

.player-portrait.avatar-frame {
  width: 60px;
  height: 75px;
  padding: 1px;
  border-color: #705531;
  border-radius: 5px;
}

.player-portrait.avatar-frame .avatar-sprite { width: 100%; height: 100%; }

.menu-player-card { position: relative; }
.edit-character-button {
  margin-left: auto;
  align-self: center;
  border: 1px solid #3a4039;
  border-radius: 6px;
  background: #121612;
  color: #90988f;
  padding: 7px 9px;
  font-size: 8px;
  cursor: pointer;
}
.edit-character-button:hover { border-color: #6b5332; color: #d7bd8a; background: #19160f; }

.mobile-avatar-card {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr);
  align-items: center;
  gap: 9px;
  padding: 8px;
  margin-bottom: 7px;
  border: 1px solid #30362f;
  border-radius: 7px;
  background: #101410;
}
.mobile-avatar-preview { width: 48px; height: 60px; border: 1px solid #5b472d; border-radius: 4px; }
.mobile-avatar-card > div:last-child { min-width: 0; display: grid; gap: 2px; }
.mobile-avatar-card strong { color: #d8bf91; font: 12px Georgia, serif; overflow-wrap: anywhere; }
.mobile-avatar-card small { color: #747b74; font-size: 7px; overflow-wrap: anywhere; }
.mobile-avatar-card button {
  justify-self: start;
  margin-top: 3px;
  border: 0;
  background: transparent;
  color: #9b7a49;
  padding: 0;
  font-size: 7px;
  text-decoration: underline;
  cursor: pointer;
}

.prologue-overlay.creator-mode { padding: 14px; }
.prologue-overlay.creator-mode .prologue-card {
  width: min(1040px, 100%);
  max-height: min(94dvh, 900px);
  padding: clamp(18px, 2.8vw, 30px);
  overflow: hidden;
}

.character-creator[hidden], .prologue-story[hidden] { display: none !important; }
.character-creator { min-width: 0; }

.creator-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}
.creator-head > div { min-width: 0; }
.creator-headline-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.creator-step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #3a3327;
  border-radius: 999px;
  background: #13150f;
  color: #777d73;
  padding: 4px 7px;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}
.creator-step b { color: #c19a5b; font-weight: 900; }
.creator-head h2 { margin: 5px 0 7px; }
.creator-head p {
  max-width: 760px;
  margin: 0;
  color: #8e958d;
  font-size: 10px;
  line-height: 1.5;
}
.creator-close {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: 1px solid #373d36;
  border-radius: 50%;
  background: #151815;
  color: #aaa;
  font-size: 20px;
  cursor: pointer;
}

.creator-layout {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.65fr);
  gap: 18px;
}

.creator-preview-panel {
  position: relative;
  min-width: 0;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #51422f;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(28,31,26,.94), rgba(13,16,14,.98)),
    repeating-linear-gradient(0deg, transparent 0 7px, rgba(191,153,91,.025) 7px 8px);
}
.creator-preview-panel::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 76px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  filter: blur(8px);
}
.creator-preview-glow {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 58px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,142,77,.12), transparent 68%);
  pointer-events: none;
}
.creator-avatar {
  position: relative;
  z-index: 2;
  width: 192px;
  height: 240px;
  border: 0;
  background: transparent;
}
.creator-preview-copy { position: relative; z-index: 2; text-align: center; margin-top: 5px; min-width: 0; max-width: 90%; }
.creator-preview-copy span { display: block; color: #756b5c; font-size: 7px; font-weight: 800; letter-spacing: .16em; }
.creator-preview-copy strong { display: block; margin-top: 3px; color: #dfc18b; font: 19px Georgia, serif; overflow-wrap: anywhere; }
.creator-preview-copy small { display: block; margin-top: 3px; color: #737a73; font-size: 8px; }
.creator-randomize {
  position: relative;
  z-index: 2;
  margin-top: 13px;
  border: 1px solid #4b4232;
  border-radius: 6px;
  background: #141612;
  color: #b9a27a;
  padding: 8px 10px;
  font-size: 9px;
  cursor: pointer;
}
.creator-randomize:hover { border-color: #7b5c34; color: #e0c28c; }

.creator-form {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}
.creator-name-field { display: grid; gap: 5px; }
.creator-name-field > span { color: #c9ad7d; font: 12px Georgia, serif; }
.creator-name-field input {
  width: 100%;
  min-width: 0;
  border: 1px solid #3b413a;
  border-radius: 7px;
  outline: none;
  background: #0f1210;
  color: #eee7d7;
  padding: 10px 11px;
  font: 14px Georgia, serif;
}
.creator-name-field input:focus { border-color: #80613a; box-shadow: 0 0 0 2px rgba(128,97,58,.12); }
.creator-name-field small { color: #646b65; font-size: 7px; }

.creator-options-scroll {
  min-width: 0;
  min-height: 0;
  max-height: 470px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 5px;
  display: grid;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: #423a2d #101310;
}
.creator-option-section { min-width: 0; display: grid; gap: 6px; }
.creator-option-section + .creator-option-section { padding-top: 9px; border-top: 1px solid #252a24; }
.creator-option-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.creator-option-title strong { color: #aaa28f; font: 10px Georgia, serif; }
.creator-option-title small { min-width: 0; color: #6f776f; font-size: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.creator-choice-grid { min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 5px; }
.creator-choice {
  min-width: 0;
  min-height: 35px;
  border: 1px solid #2e342e;
  border-radius: 6px;
  background: #111511;
  color: #858d85;
  padding: 6px 5px;
  font-size: 8px;
  line-height: 1.15;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.creator-choice:hover { border-color: #554730; color: #c8b38d; }
.creator-choice.active { border-color: #8a6738; background: #1c180f; color: #e0c18a; box-shadow: inset 0 -2px 0 rgba(193,148,79,.22); }
.creator-choice.has-preview {
  min-height: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 3px 5px;
}
.creator-choice-avatar { position: relative; display: block; width: 34px; height: 43px; flex: 0 0 auto; overflow: hidden; }
.creator-choice-avatar .avatar-sprite { width: 100%; height: 100%; }
.creator-choice-label { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.creator-swatch-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.creator-swatch {
  position: relative;
  width: 29px;
  height: 29px;
  border: 2px solid #2b302b;
  border-radius: 5px;
  background: var(--swatch, #777);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.creator-swatch::after { content: ''; position: absolute; inset: -5px; border: 1px solid transparent; border-radius: 7px; }
.creator-swatch.active::after { border-color: #c19353; }
.creator-swatch:hover { filter: brightness(1.1); }

.creator-submit-row { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding-top: 4px; }
.creator-error { min-width: 0; margin-right: auto; color: #d08e83; font-size: 8px; overflow-wrap: anywhere; }
.creator-submit {
  min-width: 180px;
  border: 1px solid #86602f;
  border-radius: 7px;
  background: linear-gradient(180deg, #644621, #362311);
  color: #f0cf93;
  padding: 10px 14px;
  font: 13px Georgia, serif;
  cursor: pointer;
}
.creator-submit:hover { filter: brightness(1.1); }
.creator-submit:disabled { opacity: .5; cursor: default; }
.creator-submit b { margin-left: 8px; }

@media (max-width: 900px) {
  .prologue-overlay.creator-mode { padding: 0; align-items: stretch; }
  .prologue-overlay.creator-mode .prologue-card {
    width: 100%;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
  }
  .creator-head { margin-bottom: 9px; }
  .creator-head h2 { font-size: 25px; margin: 3px 0 4px; }
  .creator-head p { font-size: 8px; line-height: 1.35; }
  .creator-layout { height: calc(100dvh - 92px - env(safe-area-inset-bottom)); grid-template-columns: 132px minmax(0,1fr); gap: 9px; }
  .creator-preview-panel { min-height: 0; height: 100%; justify-content: flex-start; padding-top: 20px; }
  .creator-preview-glow { width: 130px; height: 130px; top: 34px; }
  .creator-avatar { width: 112px; height: 140px; }
  .creator-preview-panel::before { bottom: auto; top: 150px; }
  .creator-preview-copy { margin-top: 4px; }
  .creator-preview-copy strong { font-size: 13px; }
  .creator-preview-copy small { font-size: 6px; }
  .creator-randomize { margin-top: 9px; padding: 7px 6px; font-size: 7px; }
  .creator-form { gap: 7px; }
  .creator-name-field { gap: 3px; }
  .creator-name-field input { padding: 8px 9px; font-size: 12px; }
  .creator-name-field small { display: none; }
  .creator-options-scroll { max-height: none; height: 100%; gap: 8px; }
  .creator-option-section { gap: 4px; }
  .creator-option-section + .creator-option-section { padding-top: 6px; }
  .creator-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; }
  .creator-choice { min-height: 31px; padding: 5px 4px; font-size: 7px; }
  .creator-swatch { width: 25px; height: 25px; }
  .creator-submit-row { gap: 6px; }
  .creator-submit { min-width: 0; width: 100%; padding: 9px; font-size: 11px; }
  .creator-error { position: absolute; left: 154px; bottom: calc(50px + env(safe-area-inset-bottom)); max-width: calc(100vw - 168px); }
  .edit-character-button { font-size: 7px; padding: 6px 7px; }
}

@media (max-width: 520px) {
  .prologue-overlay.creator-mode {
    overflow: hidden;
    background: #0b0e0c;
  }
  .prologue-overlay.creator-mode .prologue-card {
    display: block;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    padding: calc(13px + env(safe-area-inset-top)) 14px calc(20px + env(safe-area-inset-bottom));
    scrollbar-width: none;
  }
  .prologue-overlay.creator-mode .prologue-card::-webkit-scrollbar { display: none; }
  .character-creator { min-height: 100%; }
  .creator-head {
    position: relative;
    display: block;
    margin-bottom: 12px;
    padding-right: 46px;
  }
  .creator-headline-row { gap: 7px; }
  .creator-head .section-kicker { font-size: 8px; letter-spacing: .13em; }
  .creator-step { padding: 3px 6px; font-size: 6px; }
  .creator-head h2 {
    margin: 5px 0 5px;
    font-size: clamp(31px, 9vw, 38px);
    line-height: .98;
  }
  .creator-head p {
    max-width: 100%;
    font-size: 9px;
    line-height: 1.42;
  }
  .creator-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
  .creator-layout {
    display: flex;
    flex-direction: column;
    height: auto;
    gap: 12px;
  }
  .creator-preview-panel {
    width: 100%;
    height: 132px;
    min-height: 132px;
    display: grid;
    grid-template-columns: 106px minmax(0, 1fr);
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: stretch;
    column-gap: 12px;
    padding: 8px 12px 9px 8px;
    border-radius: 9px;
  }
  .creator-preview-glow {
    width: 126px;
    height: 126px;
    top: 3px;
    left: -3px;
  }
  .creator-preview-panel::before {
    left: 17px;
    right: auto;
    top: auto;
    bottom: 12px;
    width: 78px;
    height: 16px;
  }
  .creator-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 96px;
    height: 120px;
    align-self: center;
    justify-self: center;
  }
  .creator-preview-copy {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    max-width: 100%;
    margin: 0;
    text-align: left;
  }
  .creator-preview-copy span { font-size: 7px; }
  .creator-preview-copy strong { margin-top: 2px; font-size: 18px; }
  .creator-preview-copy small {
    margin-top: 3px;
    font-size: 8px;
    line-height: 1.3;
    white-space: normal;
  }
  .creator-randomize {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    max-width: none;
    margin: 7px 0 0;
    padding: 8px 10px;
    font-size: 8px;
  }
  .creator-form {
    display: block;
    min-height: 0;
  }
  .creator-name-field {
    gap: 5px;
    margin-bottom: 14px;
  }
  .creator-name-field > span { font-size: 13px; }
  .creator-name-field input {
    min-height: 48px;
    padding: 10px 12px;
    font-size: 15px;
  }
  .creator-name-field small { display: block; font-size: 7px; }
  .creator-options-scroll {
    display: grid;
    height: auto;
    max-height: none;
    overflow: visible;
    gap: 15px;
    padding: 0;
  }
  .creator-option-section { gap: 8px; }
  .creator-option-section + .creator-option-section {
    padding-top: 12px;
    border-top-color: #2c302b;
  }
  .creator-option-title strong { font-size: 12px; }
  .creator-option-title small { font-size: 7px; }
  .creator-choice-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }
  .creator-choice {
    min-height: 43px;
    padding: 8px 5px;
    border-radius: 7px;
    font-size: 8px;
    line-height: 1.15;
  }
  .creator-choice.has-preview { min-height: 64px; padding: 3px 2px 4px; }
  .creator-choice-avatar { width: 29px; height: 37px; }
  .creator-swatch-grid { gap: 10px; }
  .creator-swatch {
    width: 36px;
    height: 36px;
    border-radius: 7px;
  }
  .creator-submit-row {
    position: static;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin: 18px 0 0;
    padding: 0 0 calc(8px + env(safe-area-inset-bottom));
    background: transparent;
  }
  .creator-error {
    position: static;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0 2px;
    font-size: 8px;
  }
  .creator-submit {
    width: 100%;
    min-height: 48px;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 13px;
  }
}

/* Keyboard focus mode must come last so later mobile layout refinements cannot
   push the composer below the visual viewport. */
@media (max-width: 900px) {
  body.keyboard-open .mobile-bottom-nav {
    transform: translateY(110%);
    opacity: 0;
    pointer-events: none;
  }
  body.keyboard-open .world-shell {
    height: calc(var(--app-height, 100dvh) - var(--header-h));
  }
  body.keyboard-open .center-stage {
    grid-template-rows: minmax(0, 1fr) auto !important;
    gap: 5px;
    padding: 5px 7px calc(5px + env(safe-area-inset-bottom));
  }
  body.keyboard-open .location-heading,
  body.keyboard-open .quick-hud,
  body.keyboard-open .scene-card,
  body.keyboard-open .mobile-context,
  body.keyboard-open .action-deck {
    display: none !important;
  }
  body.keyboard-open .interaction-area {
    min-height: 0;
    overflow: hidden;
    grid-row: 1;
  }
  body.keyboard-open .composer {
    grid-row: 2;
    min-height: 48px;
    position: sticky;
    bottom: 0;
    padding-bottom: max(2px, env(safe-area-inset-bottom));
  }
}