/* Opening Zero · Ecos. Interfaz legible, campo de batalla protagonista. */
:root {
  --ink: #2a1525;
  --bg: #21121f;
  --bg-deep: #100b14;
  --paper: #f6f0e6;
  --paper-dim: #c6b9c9;
  --gold: #d0c6d9;
  --sea: #c5b3eb;
  --danger: #fa9eab;
  --ok: #b3d7bd;
  --panel: #351d31;
  --panel-2: #47233c;
  --line: #80697f;
  --hp: #ef8eaa;
  --en: #bba7e8;
  --tension: #e7d7b8;
  --font: "Segoe UI", system-ui, -apple-system, sans-serif;
  --radius: 5px;
}
html { color-scheme: dark; }
.alias-modal { max-width: 520px; }
.alias-modal label { display: block; margin: 22px 0 7px; color: var(--gold); font-size: 13px; }
.alias-modal input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-deep); color: var(--paper); font: inherit; font-size: 18px; }
.podcast-links { display: grid; gap: 7px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--paper-dim); font-size: 12px; line-height: 1.5; }
.podcast-links > div { display: flex; flex-wrap: wrap; column-gap: 20px; }
.podcast-links a { display: inline-flex; align-items: center; min-height: 36px; color: var(--paper); text-underline-offset: 4px; }
.ranking-tabs { display: flex; gap: 6px; margin: 20px 0 14px; flex-wrap: wrap; }
.ranking-tabs button { flex: 1 1 90px; min-height: 44px; padding: 8px 12px; background: var(--panel); color: var(--paper); border: 1px solid var(--line); border-radius: 4px; font: inherit; font-size: 13px; }
.ranking-tabs button[aria-selected="true"] { color: var(--ink); background: var(--paper); border-color: var(--paper); }
:root[data-input-modality="keyboard"] .ranking-tabs button:focus, :root[data-input-modality="keyboard"] .podcast-links a:focus { outline: 3px solid var(--paper); outline-offset: 3px; }
.ranking-table-wrap { max-height: 42dvh; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.ranking-table { margin: 0; width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ranking-table th { position: sticky; top: 0; padding: 10px 8px; background: var(--panel-2); text-align: left; }
.ranking-table th:not(:nth-child(2)), .ranking-table td:not(:nth-child(2)) { text-align: right; }
.ranking-table td:nth-child(2) { overflow-wrap: anywhere; min-width: 100px; }
.ranking-table tr:nth-child(even) { background: #ffffff05; }
.ranking-message { min-height: 100px; display: grid; align-content: center; gap: 12px; color: var(--paper-dim); }
.ranking-note { margin-top: 14px; }
.ranking-order { color: var(--paper); line-height: 1.5; }
.ranking-rules { margin: 14px 0; padding: 0 12px; background: #211521; border: 1px solid #654c64; border-radius: 4px; }
.ranking-rules summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 13px; color: var(--paper); }
.ranking-rules dl { display: grid; grid-template-columns: 85px minmax(0, 1fr); gap: 10px 14px; margin: 4px 0 14px; font-size: 12px; line-height: 1.5; }
.ranking-rules dt { color: var(--paper); font-weight: 600; }
.ranking-rules dd { margin: 0; color: var(--paper-dim); }
.ranking-rules > p { margin-bottom: 14px; line-height: 1.5; }
.ranking-ineligible { margin-top: 18px; padding-left: 12px; border-left: 2px solid var(--gold); }
.ranking-ineligible > b { font-size: 14px; color: var(--paper); }
.ranking-ineligible p { line-height: 1.5; }
.ranked-result { margin: 22px 0 8px; padding: 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.ranked-result-name { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.ranked-result-name h3 { margin: 3px 0 0; color: var(--paper); font-size: 22px; overflow-wrap: anywhere; }
.ranked-result-name .cmd { min-height: 44px; font-size: 12px; }
.ranked-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 20px 0; }
.ranked-metrics > div { display: flex; flex-direction: column; gap: 4px; }
.ranked-metrics b { font-size: 30px; font-weight: 500; font-variant-numeric: tabular-nums; }
.ranked-metrics span { font-size: 12px; color: var(--paper-dim); }
.ranking-filters { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 14px 0; }
.ranking-filters label { display: flex; align-items: center; flex: 1 1 210px; gap: 8px; font-size: 12px; color: var(--paper-dim); }
.ranking-filters select { min-width: 0; flex: 1; min-height: 44px; padding: 7px; font: 13px var(--font); color: var(--paper); border: 1px solid var(--line); border-radius: 4px; background: var(--panel); }
.ranking-table .ranking-alias { min-width: 150px; max-width: 280px; overflow-wrap: normal; word-break: normal; }
.ranking-alias > b { display: block; margin-bottom: 5px; }
.ranking-team { display: flex; flex-wrap: nowrap; gap: 4px; margin: 3px 0; }
.ranking-team .portrait { width: 32px; height: 32px; min-width: 32px; flex: 0 0 32px; }
.ranking-lineup { margin-top: 5px; font-size: 11px; }
.ranking-lineup summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--paper-dim); }
.ranking-lineup summary::before { content: '+ '; white-space: pre; }
.ranking-lineup[open] summary::before { content: '− '; }
.ranking-lineup > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ranking-time { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .ranked-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ranking-filters { gap: 6px; }
  .ranking-filters label { flex-basis: 100%; }
  .ranking-table { min-width: 550px; font-size: 12px; }
  .ranking-table-wrap { max-height: 46dvh; overscroll-behavior: contain; }
  .ranking-table th { white-space: nowrap; }
}
.island-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; }
.island-choice { min-height: 116px; align-items: flex-start; text-align: left; padding: 18px; }
.island-choice > span { font: 600 23px Georgia, serif; }
.island-choice small { max-width: 32ch; }
.island-result { max-width: 720px; }
body { height: 100dvh; min-height: 0; }
#app {
  max-width: none;
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
button, input { -webkit-tap-highlight-color: transparent; }
:root[data-input-modality="keyboard"] :is(button, summary, #screen):focus, input:focus-visible {
  outline: 3px solid var(--paper); outline-offset: 3px;
}
/* No borrar la selección ni los bordes del diseño al ocultar el foco automático. */
:root[data-input-modality="pointer"] :is(button, a, summary, select, #screen):focus { outline: none; }
.hud-chip, .seg button { min-height: 44px; font-size: 12px; }
#hud { padding: 4px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(90deg, #351a2d, #251325); }
.hud-brand { display: flex; gap: 10px; align-items: center; flex: 0 0 auto; }
.hud-brand img { width: 70px; height: 32px; object-fit: contain; }
.hud-brand > div { display: flex; flex-direction: column; gap: 2px; }
.hud-game-title { color: var(--paper); font-size: 13px; font-weight: 600; }
#hud-location { color: var(--gold); font-size: 12px; }
#app[data-scene="battle"] #hud-bag, #app[data-scene="battle"] #hud-berries,
#app[data-scene="battle"] #hud-objective { display: none; }
#app[data-scene="battle"] #hud-right { flex: 0 0 auto; }
#app[data-scene="battle"] .hud-brand { flex: 1 1 auto; }
.hud-label { color: var(--gold); font-size: 11px; }
#hud-objective-text { font-size: 13px; }
#stage { padding: 4px; background: #100b14; }
#screen { box-shadow: none; }
#panel { padding: 12px 16px; }
.panel-title { font-size: 12px; letter-spacing: .12em; }
.cmd {
  min-height: 48px; font-size: 14px; font-weight: 600;
  border: 1px solid var(--line); padding: 10px 14px;
  justify-content: center; background: #43253a;
  transition: background-color .12s ease, border-color .12s ease;
}
.cmd:hover:not(:disabled) { background: #5a304b; }
.cmd small, .pick small { font-size: 12px; line-height: 1.35; font-weight: 400; }
.cmd--primary { background: var(--paper); border-color: var(--paper); color: #35182e; }
.cmd--primary small { color: #63465f; }
.cmd--primary:hover:not(:disabled) { background: #fffaf2; border-color: #fffaf2; }
.cmd--danger { border-color: var(--danger); }
.cmd--quiet { background: transparent; }
.cmd:disabled { opacity: .57; }
.preview { font-size: 13px; padding: 10px 12px; border-color: var(--sea); }
.bar { height: 7px; border: 0; border-radius: 2px; margin-top: 4px; background: #160f1c; }
.bar-label { font-size: 12px; letter-spacing: 0; }
.card-tag { font-size: 11px; }
.table { font-size: 13px; }
.table td { padding: 8px 6px; }
.table th { font-size: 12px; }
.pick { font-size: 13px; padding: 12px; }
.pick b { font-size: 14px; }
.locked-note { font-size: 12px; }
.modal {
  border: 1px solid var(--gold); border-radius: 8px;
  box-shadow: 0 22px 100px #0009; padding: 22px;
}
.modal h2 { font: 600 clamp(23px, 4vw, 32px)/1.12 Georgia, serif; color: var(--paper); }
.modal h3 { font-size: 12px; color: var(--gold); }
.modal p { font-size: 14px; }
.modal .muted { font-size: 13px; }
.modal-actions { padding-top: 12px; border-top: 1px solid var(--line); }
.setting { margin: 16px 0; gap: 12px; font-size: 14px; }
.setting-label, .setting label { flex: 1 1 190px; }
.setting input[type="range"] { min-height: 44px; }
.seg button { min-width: 52px; }
.dialogue { border-width: 1px; padding: 24px; box-shadow: 0 22px 100px #0009; }
.dialogue-speaker { font-size: 13px; }
.dialogue-text { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; }
.dialogue-hint { align-items: center; margin-top: 24px; font-size: 12px; }
.dialogue-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.toast { font-size: 13px; }

/* Entrada editorial: el nombre y los controles siempre son HTML. */
#app[data-scene="title"] #stage { display: none; }
#app[data-scene="title"] #panel { flex: 1 1 auto; max-height: none; padding: 0; }
.title-screen {
  min-height: 100%; display: flex; flex-direction: column; text-align: left;
  padding: clamp(22px, 4vw, 48px);
  background: linear-gradient(90deg, #200f20fa 0%, #301526eb 28%, #39182578 66%, #39182538 100%),
    linear-gradient(0deg, #150e1bf5 0%, transparent 40%), url('../assets/arabasta-v2/bg-arabasta.png') center / cover;
}
.title-brand { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.oz-logo { width: 165px; height: 48px; object-fit: contain; object-position: left center; }
.edition-label { font-size: 12px; letter-spacing: .09em; color: var(--paper-dim); }
.title-content { flex: 1; padding: clamp(30px, 6vh, 68px) 0 30px; max-width: 680px; }
.title-eyebrow { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: 12px; }
.title-screen h1 {
  margin: 18px 0; color: var(--paper); font: 500 clamp(42px, 6.5vw, 76px)/.98 Georgia, "Times New Roman", serif;
  letter-spacing: -.04em; text-wrap: balance;
}
.title-screen h1 span { color: #e6bdcc; }
.title-lead { font-size: clamp(16px, 2vw, 19px); line-height: 1.55; max-width: 390px; color: #e0d4df; }
.title-menu { max-width: 370px; margin: 26px 0 0; gap: 10px; }
.title-play { min-height: 72px; padding: 16px 22px; font-size: 18px; }
.title-play small { font-size: 12px; margin-top: 3px; }
.title-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; min-width: 0; }
.title-secondary .cmd { width: 100%; min-width: 0; min-height: 52px; white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.title-secondary .cmd > span { max-width: 100%; }
.title-secondary .cmd:last-child:nth-child(odd) { grid-column: 1 / -1; }
.title-caption { font-size: 11px; letter-spacing: .16em; color: var(--gold); margin-top: 28px; }
.title-footer { display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.title-screen .notice { font-size: 12px; margin: 0; max-width: 390px; line-height: 1.5; }
.title-tools { display: flex; gap: 8px; }
.title-tools .cmd { min-width: 78px; font-size: 13px; }

/* Ventana RPG: campo arriba, comandos y tripulación dentro del mismo marco. */
#app { border: 2px solid var(--line); border-radius: 0; margin: 0; }
#app[data-scene="battle"] { position: relative; }
#app[data-scene="battle"] #hud { position: absolute; z-index: 3; top: 4px; left: 4px; right: 4px; border: 0; background: linear-gradient(180deg, #1a1024ec, #1a1024a3 75%, transparent); }
#app[data-scene="battle"] #stage { border-left: 4px solid var(--bg); border-right: 4px solid var(--bg); }
#app[data-scene="battle"] #panel { flex: 0 0 224px; height: 224px; max-height: 46dvh; padding: 4px 8px 0; border-top: 2px solid var(--line); background: #261522; }
.battle-panel { width: 100%; }
.battle-controls { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 8px; align-items: stretch; min-height: 174px; }
.action-workspace, .party-panel { min-width: 0; border: 2px solid #b6a4b8; border-radius: 5px; background: linear-gradient(145deg, #40223a, #27192d); box-shadow: inset 0 0 0 2px #160f1c; padding: 8px 12px; }
.battle-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0 0 3px; }
.battle-step { color: var(--paper); font-size: 13px; font-weight: 700; }
.round-label { font-size: 11px; color: var(--paper-dim); white-space: nowrap; }
.action-caption { color: var(--paper-dim); font-size: 12px; line-height: 1.4; }
.battle-controls .commands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 5px; }
.battle-controls .cmd { min-width: 0; min-height: 44px; font-size: 13px; padding: 5px 8px; border-color: #77627b; line-height: 1.18; }
.battle-controls .cmd small { font-size: 11px; line-height: 1.2; }
.battle-controls .cmd:hover:not(:disabled) { border-color: var(--paper); }
.target-picker > .cmd { margin-top: 5px; min-height: 44px; min-width: 84px; }
.party-heading, .battle-controls .card { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(65px, 1fr) minmax(55px, .8fr); column-gap: 12px; align-items: center; }
.party-heading { padding: 1px 10px 7px; color: var(--paper-dim); font-size: 11px; }
.party-heading > :first-child { color: var(--paper); font-size: 13px; font-weight: 700; }
.party-heading > :not(:first-child) { text-align: right; }
.battle-controls .cards { display: grid; grid-template-columns: 1fr; gap: 3px; }
.battle-controls .card { min-height: 46px; padding: 5px 8px; border: 1px solid transparent; border-radius: 3px; background: #211827; opacity: 1; }
.battle-controls .card:hover:not(:disabled) { background: #4a2944; border-color: var(--paper-dim); }
.battle-controls .card[data-selected="true"] { border-color: var(--paper); background: #59314e; box-shadow: inset 3px 0 var(--paper); }
.battle-controls .card[data-acted="true"] { color: #b8abbc; background: #241a2a; }
.battle-controls .card[data-ko="true"] { border-color: var(--danger); }
.party-identity { min-width: 0; }
.battle-controls .card-head { gap: 3px; justify-content: start; flex-wrap: wrap; }
.battle-controls .card-name { font-size: 14px; line-height: 1.25; }
.battle-controls .card-tag { font-size: 9px; padding: 0 3px; }
.battle-controls .card-status { min-height: 0; margin: 2px 0 0; }
.status-icon { width: 16px; height: 16px; background-size: 208px 16px; }
.party-tension { display: block; font-size: 10px; color: var(--paper-dim); margin-top: 2px; }
@media (min-width: 1001px) and (min-height: 521px) {
  /* Estados y nombre comparten fila: las transformaciones no agrandan el dock. */
  .battle-controls .party-identity { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 5px; }
  .battle-controls .card-head { grid-column: 1; grid-row: 1; min-width: 0; flex-wrap: nowrap; }
  .battle-controls .card-status { grid-column: 2; grid-row: 1; flex-wrap: nowrap; margin: 0; gap: 2px; }
  .battle-controls .party-tension { grid-column: 1 / -1; grid-row: 2; margin: 0; line-height: 12px; }
}
.party-vital { min-width: 0; }
.party-number { display: flex; justify-content: end; align-items: baseline; gap: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.party-number b { font-size: 16px; font-weight: 600; }
.party-number small { color: var(--paper-dim); font-size: 11px; }
.party-vital .bar { margin-top: 3px; height: 4px; }
.action-help { margin-top: 3px; }
.action-help summary { min-height: 26px; display: flex; align-items: center; cursor: pointer; color: var(--paper-dim); font-size: 11px; }
.action-help summary::before { content: '+ '; white-space: pre; color: var(--paper); }
.action-help[open] summary::before { content: '− '; }
.action-help-text { font-size: 12px; line-height: 1.45; padding: 0 2px; }
.action-help-text p { margin: 4px 0 8px; }
.battle-resolving { padding: 24px 4px; color: var(--paper); font-size: 14px; }
.battle-footnotes { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.battle-intel { min-width: 0; }
.battle-intel summary { min-height: 44px; display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 11px; }
.battle-intel summary > span:first-child { font-weight: 700; color: var(--paper); }
.intent-summary { flex: 1; min-width: 0; color: var(--paper-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.intel-hint { white-space: nowrap; color: var(--sea); }
.battle-intel[open] .intel-hint { font-size: 0; }
.battle-intel[open] .intel-hint::after { content: 'Cerrar −'; font-size: 11px; }
.intent { min-height: 44px; font-size: 12px; }
.intent-rule { font-size: 11px; }
.battle-log { min-width: 0; }
.battle-log > .bar-label { margin-top: 0; justify-content: end; }
.battle-log .hud-chip { min-height: 44px; background: none; border-color: transparent; font-size: 11px; padding: 5px 0; }
.battle-log .log { font-size: 12px; max-width: 340px; }
.console-panel { background: #26182c; border-color: #bba7e8; margin-bottom: 4px; padding: 4px 8px; }
.console-panel .console-opening {
  grid-column: 1 / -1; flex: 1 0 100%; width: 100%; min-width: 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px;
  padding: 6px 9px; border-left: 3px solid #d8c7a2; border-radius: 2px;
  background: #463644; color: #f5eee1; font-size: 12px; line-height: 1.4;
}
.console-opening b { flex: 0 1 auto; font-size: 12px; font-weight: 600; }
.console-opening > span { flex: 1 1 350px; color: #e0d6dc; }
.console-slot { border-color: #bba7e8; background: #201428; }
.console-slot[data-on="true"] { background: #bba7e8; }
.pick[data-picked="true"] { background: #503044; }
#hud-save { min-width: auto; font-size: 11px; background: transparent; border-color: transparent; }
#hud-save::after { content: none; }
#hud-save[data-state="error"] { font-weight: 700; }
@media (min-width: 900px) {
  #app { height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom)); margin: 0; }
}
@media (max-width: 1000px) {
  .battle-controls .commands { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .party-heading, .battle-controls .card { column-gap: 6px; }
  .action-workspace, .party-panel { padding: 8px; }
}
@media (max-width: 760px) {
  #panel { padding: 10px 12px; }
  #hud { padding: 3px 8px; }
  #hud-right { gap: 4px; }
  #hud-right .hud-chip { padding-left: 6px; padding-right: 6px; }
  #app[data-scene="battle"] #hud { flex-wrap: nowrap; }
  #app[data-scene="battle"] #hud-right { order: 0; }
  #app[data-scene="battle"] #hud-save { display: none; }
  #app:not([data-scene="battle"]) .hud-brand { flex: 1 1 100%; }
  .hud-brand { gap: 6px; }
  .hud-brand img { width: 58px; }
  .hud-game-title { font-size: 12px; }
  #hud-location { font-size: 11px; }
  .battle-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 5px; }
  .battle-controls .commands { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .battle-controls .cmd { font-size: 12px; padding: 5px; }
  .action-workspace, .party-panel { padding: 6px; }
  .party-heading, .battle-controls .card { grid-template-columns: minmax(0, 1.15fr) minmax(42px, 1fr) minmax(35px, .75fr); gap: 4px; }
  .party-heading { padding: 1px 4px 8px; }
  .party-heading > :first-child { font-size: 12px; }
  .battle-controls .card { min-height: 50px; padding: 6px 3px; }
  .battle-controls .card-name { font-size: 12px; }
  .party-number { flex-wrap: wrap; column-gap: 0; }
  .party-number b { font-size: 14px; }
  .party-number small { font-size: 10px; }
  .battle-step { font-size: 12px; }
  .round-label { font-size: 10px; }
  .action-caption { font-size: 11px; }
  #app[data-scene="battle"] #panel { flex-basis: 340px; height: 340px; max-height: 62dvh; padding: 4px 4px 0; }
  .battle-footnotes { gap: 8px; }
  .battle-intel summary { gap: 6px; }
  .intel-hint { display: none; }
  .battle-log .log { max-width: 120px; }
  .title-screen { padding: 24px; background-position: 60% center; }
  .title-brand { gap: 12px; }
  .edition-label { max-width: 120px; text-align: right; line-height: 1.4; }
  .title-content { padding-top: 40px; }
  .title-footer { flex-direction: column; align-items: start; gap: 18px; }
  .title-screen h1 { font-size: clamp(42px, 9vw, 64px); }
  .title-lead { max-width: 290px; }
  .dialogue { padding: 20px; }
  .dialogue-hint { align-items: start; }
  .dialogue-actions { justify-content: end; }
}
@media (max-width: 420px) {
  #app[data-scene="battle"] #panel { flex-basis: 390px; height: 390px; }
  .battle-controls { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
  .battle-controls .commands { grid-template-columns: 1fr; gap: 2px; }
  .battle-controls .cmd { flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; min-height: 44px; text-align: left; }
  .battle-controls .cmd small { font-size: 10px; text-align: right; }
  .battle-controls .card { grid-template-columns: minmax(0, 1fr) minmax(38px, .8fr); row-gap: 4px; }
  .battle-controls .party-identity { grid-column: 1 / -1; }
  .party-heading { grid-template-columns: 1fr; }
  .party-heading > :not(:first-child) { display: none; }
  .party-vital::before { content: 'HP'; float: left; font-size: 9px; color: var(--paper-dim); }
  .party-vital--en::before { content: 'EN'; }
  .party-number b { font-size: 12px; }
  .party-number small { font-size: 9px; }
  .party-tension { font-size: 9px; }
  .battle-heading { flex-wrap: wrap; gap: 1px 5px; }
  .action-help summary { min-height: 44px; }
  .oz-logo { width: 142px; height: 40px; }
  .title-screen { padding: 22px; }
  .title-secondary { flex-wrap: wrap; }
}
@media (max-width: 900px) and (orientation: portrait) {
  #app[data-scene="battle"] #stage { flex: 0 0 calc(100vw * .434 + 64px); height: calc(100vw * .434 + 64px); max-height: 36dvh; align-items: flex-end; }
  #app[data-scene="battle"] #panel { flex: 1 1 auto; height: auto; max-height: none; }
  .battle-controls { grid-template-columns: 1fr; gap: 6px; }
  .battle-controls .commands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .battle-controls .cmd { flex-direction: column; align-items: start; justify-content: center; font-size: 13px; padding: 6px 9px; }
  .battle-controls .cmd small { font-size: 11px; text-align: left; }
  .battle-heading { flex-wrap: nowrap; }
  .action-workspace, .party-panel { padding: 7px 9px; }
  .party-heading, .battle-controls .card { grid-template-columns: minmax(0, 1.2fr) minmax(65px, 1fr) minmax(55px, .8fr); gap: 8px; }
  .party-heading > :not(:first-child) { display: block; }
  .battle-controls .party-identity { grid-column: auto; }
  .battle-controls .card { min-height: 46px; padding: 5px 6px; }
  .battle-controls .card-name { font-size: 13px; }
  .party-vital::before { display: none; }
  .party-number b { font-size: 15px; }
  .party-number small { font-size: 11px; }
  .action-help summary { min-height: 36px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #app { display: flex; flex-direction: column; flex-wrap: nowrap; }
  #hud { min-height: 44px; flex-wrap: nowrap; padding: 0 8px; }
  #hud-objective { display: none; }
  #hud-right { flex: 0 0 auto; justify-content: end; order: 0; }
  #app:not([data-scene="battle"]) .hud-brand { flex: 1; }
  #app[data-scene="battle"] #panel { flex: 0 0 184px; height: 184px; width: 100%; max-height: 49dvh; min-width: 0; }
  .battle-controls .commands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .battle-controls .cmd { font-size: 11px; }
  .action-workspace, .party-panel { padding: 4px 6px; }
  .battle-controls .card { min-height: 44px; padding: 2px 3px; }
  .party-heading { padding-bottom: 3px; }
  .action-help summary { min-height: 32px; }
  #app:not([data-scene="battle"]):not([data-scene="title"]) #panel { max-height: 30dvh; min-width: 0; }
  #touch { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; background: transparent; padding: 4px 8px; pointer-events: none; }
  #touch button { pointer-events: auto; background: #351d31ed; }
  #dpad { grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 2px; }
  #touch-actions .touch-btn { min-width: 100px; padding: 8px; font-size: 12px; }
  #app[data-scene="title"] #panel { border: 0; padding: 0; }
  .title-screen { min-height: 100%; padding: 20px 28px; }
  .title-content { padding: 24px 0; }
  .title-screen h1 { font-size: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}
body.reduced-motion *, body.reduced-motion *::before, body.reduced-motion *::after { transition: none !important; animation: none !important; }
body.high-contrast { --line: #d2bfd2; --paper-dim: #efe5f1; --panel: #281527; --panel-2: #3f2540; }

/* Campaña completa · ventanas de plata, ciruela y marfil. */
button, summary, a, input, select { touch-action: manipulation; }
:root[data-input-modality="keyboard"] :is(button, summary, select, a):focus {
  outline: 2px solid #fff7df; outline-offset: 3px;
  box-shadow: 0 0 0 5px #2c1833;
}
:root[data-input-modality="keyboard"] :is(.cmd, .pick):focus { outline: 2px solid #fff7df; outline-offset: 3px; }
#hud-menu.hud-menu-button {
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 14px;
  border: 1px solid #c6b9cb; border-radius: 4px;
  background: linear-gradient(#533049, #301d32); box-shadow: inset 0 0 0 2px #221424;
  font-weight: 600; letter-spacing: .04em;
}
#hud-menu:hover { background: #65425f; }
.menu-glyph { font-size: 16px; font-weight: 400; color: #e5dce9; }
kbd { font: 10px/1.1 var(--font); color: #eee6ee; padding: 2px 4px; border: 1px solid #9c879e; border-radius: 3px; white-space: nowrap; }
#desktop-controls {
  flex: 0 0 auto; min-height: 27px; display: flex; justify-content: space-between; align-items: center;
  gap: 14px; padding: 5px 18px; color: var(--paper-dim); font-size: 10px;
  background: #1e1421; border-top: 1px solid #574058;
}
#desktop-controls > span { display: flex; align-items: center; gap: 5px; }
#desktop-controls .controls-battle { display: none; }
#app[data-scene="battle"] #desktop-controls .controls-explore { display: none; }
#app[data-scene="battle"] #desktop-controls .controls-battle { display: flex; }
#app:is([data-scene="title"], [data-scene="partySelect"], [data-scene="loading"], [data-scene="complete"]) #desktop-controls { display: none; }
.keyboard-help { font-size: 11px !important; color: var(--paper-dim); line-height: 1.5; }
.title-screen .keyboard-help { max-width: 390px; margin-top: 20px; }
#modal-root { background: #100b18d9; backdrop-filter: blur(5px); padding: 24px; }
.modal, .dialogue {
  border: 2px solid #b5a6bd; border-radius: 6px;
  background: linear-gradient(135deg, #47283e, #281b30 70%);
  box-shadow: inset 0 0 0 3px #1c1124, 0 24px 100px #000b;
}
.modal { width: min(920px, 100%); padding: 26px; max-height: calc(100dvh - 48px); scrollbar-color: #9d789b #26172b; }
.modal > h2 { margin: 3px 0 12px; }
.modal h3 { letter-spacing: .1em; line-height: 1.5; }
.modal p { line-height: 1.55; }
.modal > .modal-actions {
  position: sticky; bottom: -26px; z-index: 2; margin: 24px -8px -8px; padding: 16px 8px 8px;
  background: linear-gradient(#2e1c30ed, #2e1c30); justify-content: flex-end;
}
.modal .grid--roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.modal .grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.modal .pick { border: 1px solid #806b82; background: #241a2dd9; padding: 15px; gap: 10px; min-width: 0; }
.modal div.pick { cursor: default; }
.modal button.pick:hover:not(:disabled) { background: #5b3653; border-color: #e4d8e6; }
.modal button.pick[data-picked="true"] { border-color: #f1e8df; background: linear-gradient(145deg, #714358, #442f48); box-shadow: inset 0 0 0 2px #bba3b24d; }
.modal .pick small { font-size: 12px; overflow-wrap: anywhere; }
.modal .pick b { font-size: 16px; }
.modal .pick .cmd { min-width: 0; flex: 1; font-size: 12px; padding: 8px; }
.modal .pick select { width: 100%; min-width: 0; white-space: normal; }
.portrait { width: 72px; height: 72px; border: 1px solid #a186a4; border-radius: 3px; flex: 0 0 auto; }
.portrait--sm { width: 44px; height: 44px; }
.portrait--art { background: radial-gradient(ellipse at 50% 38%, #815f78, #281a30 85%); image-rendering: auto; }
.portrait--locked { filter: grayscale(1) brightness(.62); }
.menu-eyebrow { display: block; color: #d7c4d7; text-transform: uppercase; letter-spacing: .16em; font-size: 10px; line-height: 1.5; margin-bottom: 6px; }
.pick-order { background: var(--paper); border: 0; color: #331e30; font-weight: 700; width: 24px; height: 24px; }
.roster-modal .pick-top { align-items: start; position: relative; }
.roster-modal .pick-top .pick-order { position: absolute; left: 52px; top: -7px; }
.roster-modal .pick-top > div { padding-top: 5px; }
.formation-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0; }
.formation-slot { display: flex; gap: 9px; align-items: center; min-width: 0; padding: 10px; border: 1px dashed #8c758d; border-radius: 4px; background: #211628; }
.formation-slot--filled { border-style: solid; border-color: #bba7bd; }
.formation-number { color: #d8c5dc; font: 16px Georgia, serif; }
.formation-empty { display: grid; place-items: center; width: 44px; height: 44px; color: #89748d; font-size: 28px; }
.formation-slot b { min-width: 0; font-size: 12px; line-height: 1.4; }
.camp-panel { max-width: 1100px; margin: 0 auto; }
.camp-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.camp-heading h2 { margin: 0; font: 24px/1.2 Georgia, serif; }
.camp-heading .menu-eyebrow { margin-bottom: 4px; }
.camp-crew { display: flex; gap: 6px; }
.camp-commands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.camp-commands .cmd { min-height: 64px; }
.camp-note { display: flex; align-items: baseline; gap: 12px; margin-top: 12px; color: var(--paper-dim); font-size: 12px; }
.camp-note > span { color: #eee0dd; white-space: nowrap; font-weight: 600; }
.camp-note p { margin: 0; line-height: 1.5; }
.camp-tools { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 6px; }
.camp-tools .cmd { min-height: 44px; padding: 6px 10px; font-size: 12px; }
.camp-tools .keyboard-help { margin: 0; }
#hud-bag { display: inline-flex; align-items: center; gap: 9px; }
.settings-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.settings-section { background: #201728; border: 1px solid #826a84; padding: 8px 18px; border-radius: 4px; }
.settings-section h3 { margin: 8px 0 20px; }
.settings-section .setting { padding: 8px 0; border-bottom: 1px solid #46334c; }
.settings-section .setting:last-child { border: 0; }
.settings-section .setting-label, .settings-section .setting label { flex-basis: 100%; }
.settings-section input[type="range"] { width: 100%; accent-color: #d9bedc; }
.settings-controls { padding: 3px 4px; }
.settings-controls p { font-size: 13px; color: var(--paper-dim); }
.seg button { border-color: #8e7790; }
.seg button[aria-pressed="true"] { background: #e7dfe4; color: #34203a; border-color: #e7dfe4; }
.pause-modal {
  width: min(980px, 100%); height: min(660px, calc(100dvh - 48px));
  padding: 0; overflow: hidden; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto;
}
.pause-header { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 25px 28px 16px; }
.pause-header img { object-fit: contain; flex: 0 0 auto; }
.pause-header h2 { font-size: clamp(25px, 4vw, 34px); margin: 0; }
.pause-meta { display: flex; gap: 18px; padding: 0 28px 18px; font-size: 12px; color: #d9cbdc; }
.pause-meta > span + span { border-left: 1px solid #846b86; padding-left: 18px; }
.pause-tabs { display: flex; padding: 0 28px; gap: 5px; border-bottom: 1px solid #9b809a; }
.pause-tabs button { position: relative; font: 600 14px var(--font); color: #cbbacd; background: transparent; border: 1px solid transparent; border-radius: 4px 4px 0 0; padding: 13px 24px; min-height: 48px; cursor: pointer; }
.pause-tabs button:hover { color: var(--paper); background: #4b304a; }
.pause-tabs button[aria-selected="true"] { border-color: #9b809a; border-bottom-color: #281c30; background: #281c30; color: var(--paper); margin-bottom: -1px; }
.pause-tabs button[aria-selected="true"]::after { content: ''; position: absolute; top: 0; height: 3px; background: #eadfce; left: 12px; right: 12px; }
.pause-pages { overflow-y: auto; min-height: 0; background: #281c30; scrollbar-color: #9d789b #26172b; }
.pause-page { padding: 16px 28px 24px; }
.pause-page[hidden] { display: none; }
.pause-section-heading { display: flex; gap: 12px; justify-content: space-between; align-items: baseline; margin-bottom: 12px; }
.pause-section-heading h3 { margin: 0; color: #e9dcd7; }
.pause-section-heading > span { font-size: 11px; color: var(--paper-dim); }
.pause-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.pause-crew-card .pick-top { margin-bottom: 3px; }
.pause-crew-card > .muted { min-height: 4em; margin-top: 5px; }
.pause-crew-card .bar-label { margin-top: 5px; }
.crew-techniques { border-top: 1px solid #705573; margin-top: 2px; }
.crew-techniques summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 12px; gap: 7px; }
.crew-techniques summary::before { content: '+'; color: #e6d9e7; }
.crew-techniques[open] summary::before { content: '−'; }
.crew-techniques .table { font-size: 11px; }
.crew-techniques .table td { padding: 7px 1px; white-space: normal; }
.pause-note { margin-top: 14px !important; }
.pause-inventory { margin-top: 18px; align-items: start; }
.inventory-vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.inventory-vitals > div { display: grid; gap: 4px; padding: 10px; border: 1px solid #806681; background: #302137; border-radius: 3px; }
.inventory-vitals span { font-size: 12px; font-variant-numeric: tabular-nums; }
.pause-inventory .commands { grid-template-columns: 1fr; }
.pause-inventory .cmd small { white-space: normal; line-height: 1.4; }
.pause-page > div > .cmd--primary { margin-top: 14px; }
.pause-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 28px; border-top: 1px solid #8c708d; background: #24172b; }
.pause-footer > div { display: flex; align-items: center; gap: 18px; }
.pause-footer .cmd { flex: 0 0 auto; }
.pause-footer .keyboard-help { max-width: 260px; margin: 0; font-size: 10px !important; }
.journey-banner { padding: 18px; border: 1px solid #94758e; background: linear-gradient(110deg, #583347, #2c2238); border-radius: 4px; }
.journey-banner h3 { font: 27px Georgia, serif; color: var(--paper); text-transform: none; letter-spacing: 0; margin: 0; }
.journey-banner p { color: #d6c7d8; }
.journey-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; }
.journey-stats > div { padding: 14px 16px; border: 1px solid #6c5471; border-radius: 4px; background: #201828; }
.journey-stats b { display: block; font: 25px Georgia, serif; margin-bottom: 5px; }
.journey-stats span { font-size: 12px; color: var(--paper-dim); }
.journey-perks { color: var(--paper-dim); padding-left: 19px; font-size: 13px; line-height: 1.6; }
.journey-actions { display: flex; flex-wrap: wrap; gap: 12px; border-top: 1px solid #6c5471; padding-top: 18px; margin-top: 22px; }
.dialogue-speaker { display: inline-block; border-bottom: 1px solid #9c809d; padding-bottom: 8px; margin-bottom: 16px; color: #eee2dd; }
.signature-warning { margin-top: 5px; padding: 7px 10px; border-left: 3px solid #f0cfab; background: #543443; color: #f8e7ce; font-size: 11px; display: flex; gap: 12px; align-items: baseline; }
.signature-warning b { flex: 0 0 auto; }
.signature-warning span { line-height: 1.4; }
.signature-warning--broken { background: #293e39; color: #d0e9d9; border-color: #bdd9c8; }
.intent-special { color: #f5d9b7; font-weight: 700; }
#app[data-scene="battle"] #panel[data-signature="true"] { flex-basis: 266px; height: 266px; }
@media (max-width: 760px) {
  #modal-root { padding: 12px; }
  .modal { padding: 20px; max-height: calc(100dvh - 24px); }
  .modal > .modal-actions { bottom: -20px; }
  .modal .grid--roster, .modal .grid--shop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formation-preview { gap: 6px; }
  .formation-slot { flex-wrap: wrap; gap: 5px; padding: 8px; }
  .formation-slot b { width: 100%; font-size: 11px; }
  .formation-number { font-size: 13px; }
  .roster-modal .pick-top { flex-wrap: wrap; }
  .roster-modal .pick-top > div { flex: 1 1 80px; }
  .settings-columns { grid-template-columns: 1fr; }
  .settings-section .setting-label, .settings-section .setting label { flex-basis: 180px; }
  .settings-section input[type="range"] { width: min(220px, 100%); }
  .pause-modal { padding: 0; height: calc(100dvh - 24px); max-height: 780px; }
  .pause-header { padding: 20px 18px 14px; }
  .pause-header img { width: 84px; height: 32px; }
  .pause-header h2 { font-size: 25px; }
  .pause-meta { padding: 0 18px 15px; gap: 10px; font-size: 11px; }
  .pause-meta > span + span { padding-left: 10px; }
  .pause-tabs { padding: 0 12px; gap: 2px; }
  .pause-tabs button { padding: 12px 8px; flex: 1; font-size: 13px; }
  .pause-page { padding: 16px; }
  .pause-roster { grid-template-columns: 1fr; }
  .pause-crew-card { display: grid !important; grid-template-columns: 1.3fr 1fr; gap: 6px 15px !important; align-items: center; }
  .pause-crew-card .pick-top { grid-row: span 2; }
  .pause-crew-card > .muted, .pause-crew-card .crew-techniques { grid-column: 1 / -1; min-height: 0; }
  .pause-section-heading { align-items: start; }
  .pause-section-heading > span { max-width: 120px; text-align: right; }
  .pause-footer { padding: 12px 16px; gap: 10px; }
  .pause-footer .keyboard-help { display: none; }
  .pause-footer > div { display: block; }
  .pause-footer .cmd { min-width: 0; font-size: 13px; padding: 10px; }
  .journey-stats { gap: 7px; }
  .journey-stats > div { padding: 12px 9px; }
  .journey-stats span { font-size: 11px; }
  .journey-stats b { font-size: 23px; }
  .camp-heading h2 { font-size: 21px; }
  .camp-commands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .camp-note { display: block; }
  .camp-note p { margin-top: 4px; }
  #desktop-controls { display: none; }
  #hud-menu.hud-menu-button { gap: 7px; padding: 5px 10px; }
  #hud-menu kbd { display: none; }
  .signature-warning { display: block; }
  .signature-warning span { display: block; margin-top: 3px; }
}
@media (max-width: 420px) {
  .modal .grid--shop { grid-template-columns: 1fr; }
  .modal .pick { padding: 11px; }
  .modal .pick b { font-size: 14px; }
  .pause-header { gap: 8px; }
  .pause-header img { width: 66px; }
  .pause-header h2 { font-size: 23px; }
  .pause-crew-card { grid-template-columns: 1.2fr 1fr; }
  .pause-crew-card .pick-top { gap: 7px; }
  .pause-crew-card .portrait { width: 55px; height: 55px; }
  .pause-crew-card .pick-top b { font-size: 13px; }
  .pause-crew-card .pick-top small { font-size: 10px; }
  .pause-footer .cmd { font-size: 12px; }
  .camp-crew .portrait--sm { width: 36px; height: 36px; }
}
@media (max-width: 900px) and (orientation: portrait) {
  #app[data-scene="battle"] #panel[data-signature="true"] { flex: 1 1 auto; height: auto; }
}
@media (max-height: 520px) and (orientation: landscape) {
  #desktop-controls, .keyboard-help { display: none; }
  #modal-root { padding: 8px; }
  .modal { max-height: calc(100dvh - 16px); }
  .pause-modal { height: calc(100dvh - 16px); padding: 0; }
  .pause-header { padding: 12px 20px 8px; }
  .pause-header h2 { font-size: 24px; }
  .pause-header .menu-eyebrow { display: none; }
  .pause-meta { padding-bottom: 9px; }
  .pause-tabs button { min-height: 44px; padding: 8px 22px; }
  .pause-footer { padding: 7px 20px; }
  .pause-page { padding: 14px 20px; }
  .pause-roster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pause-crew-card { display: flex !important; }
  .pause-crew-card .portrait { width: 50px; height: 50px; }
  .pause-crew-card .pick-top b { font-size: 14px; }
  #app[data-scene="battle"] #panel[data-signature="true"] { flex-basis: 220px; height: 220px; max-height: 56dvh; }
}
@media (pointer: coarse) { #desktop-controls, .keyboard-help, #hud-menu kbd { display: none; } }

/* Cabecera: marca, recorrido y acciones; las provisiones viven en la mochila. */
#app #hud {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 18px; min-height: 56px; padding: 4px 16px;
  border-bottom: 1px solid #725568; background: linear-gradient(100deg, #321b2c, #241522);
}
#app #hud .hud-brand {
  display: flex; align-items: center; gap: 9px; min-height: 44px; min-width: 0;
  padding-right: 18px; border-right: 1px solid #72556899; color: var(--paper); text-decoration: none;
}
#hud .hud-brand img { width: 54px; height: 32px; object-fit: contain; flex: none; }
.hud-podcast-copy { display: flex; flex-direction: column; gap: 3px; white-space: nowrap; }
.hud-podcast-copy b { font-size: 12px; font-weight: 600; letter-spacing: .01em; }
.hud-podcast-copy small { font-size: 10px; color: var(--paper-dim); }
.hud-podcast-category { display: none; }
.hud-podcast-cta { font-size: 10px; color: #e0c7df; }
#hud .hud-brand:hover .hud-podcast-copy small { color: var(--paper); }
.hud-route { min-width: 0; display: grid; gap: 3px; }
.hud-location-line { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
#hud .hud-game-title { flex: none; color: #bdadbc; font-size: 10px; font-weight: 400; }
#hud #hud-location { min-width: 0; font-size: 14px; font-weight: 600; color: var(--paper); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#app #hud #hud-objective { display: flex; gap: 7px; order: 0; flex: none; align-items: baseline; }
#hud .hud-label { font-size: 9px; letter-spacing: .06em; color: #bda9bf; }
#hud #hud-objective-text { font-size: 12px; line-height: 1.3; color: #dbcfda; }
#app #hud #hud-right { display: flex; gap: 6px; flex: none; order: 0; justify-content: end; }
#app #hud-right .hud-resources { display: flex; flex-direction: column; justify-content: center; align-items: end; gap: 4px; padding-right: 9px; }
#app #hud .hud-resources .hud-chip { min-height: 0; padding: 0; font-size: 10px; line-height: 1.3; border: 0; background: transparent; color: #cbbdca; }
#app #hud #hud-save { display: flex; align-items: center; gap: 4px; }
#app #hud #hud-save::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #b3d7bd; }
#app #hud #hud-save[data-state="error"] { color: var(--danger); }
#app #hud #hud-save[data-state="error"]::before { background: var(--danger); }
#app #hud #hud-bag, #app #hud #hud-menu, #app #hud #hud-home {
  min-height: 44px; flex: none; gap: 7px; padding: 6px 11px; font-size: 12px; letter-spacing: 0; box-shadow: none;
}
#app #hud #hud-bag { display: inline-flex; border-color: #80697f; background: #392237; font-weight: 500; }
#app #hud #hud-menu { border-color: #d2c1d0; background: #ede1dd; color: #321b2c; font-weight: 600; }
#hud #hud-menu kbd { color: #50354a; border-color: #b8a2b3; }
#app #hud #hud-home { background: transparent; border-color: transparent; color: #d7c8d3; font-weight: 400; }
#app #hud #hud-home:hover { color: var(--paper); border-color: #80697f; }
#app #hud #hud-bag:hover { background: #503047; }
#app #hud #hud-menu:hover { background: #fff6ec; }
#app #hud #hud-bag-text.hud-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app[data-scene="battle"] #hud .hud-route { align-self: center; }
#app[data-scene="battle"] #hud #hud-objective,
#app[data-scene="battle"] #hud #hud-bag,
#app[data-scene="battle"] #hud #hud-berries { display: none; }
@media (max-width: 1050px) {
  #app #hud { gap: 12px; padding-inline: 10px; }
  #hud .hud-game-title { display: none; }
  #app #hud .hud-brand { padding-right: 12px; }
  #app #hud .hud-resources { display: none; }
}
@media (max-width: 760px) {
  #app #hud { gap: 9px; }
  #hud .hud-brand img { width: 44px; }
  .hud-podcast-copy b { font-size: 11px; }
  .hud-podcast-copy small { font-size: 9px; }
  #app #hud #hud-right { gap: 3px; }
  #app #hud #hud-bag, #app #hud #hud-menu, #app #hud #hud-home { padding-inline: 9px; }
  #hud #hud-bag kbd { display: none; }
}
body.high-contrast .modal, body.high-contrast .dialogue { border-color: #eadfe9; background: #25132b; }
body.high-contrast .pick, body.high-contrast .pause-pages, body.high-contrast .settings-section { background: #1b1220; }
body.high-contrast .pause-tabs button[aria-selected="true"] { color: #fff7df; border-color: #ebd7e5; }

/* Decisiones de combate: información visible, sin cubrir el escenario. */
body:not(.handset) #app[data-scene="battle"] #panel { flex-basis: 320px; height: 320px; max-height: 52dvh; }
.enemy-overview { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 5px; margin-bottom: 5px; }
.enemy-vital { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; padding: 4px 8px; min-width: 0; border: 1px solid #806681; border-radius: 4px; background: #211624; font-size: 11px; line-height: 1.3; }
.enemy-vital > b { color: var(--paper); }
.enemy-vital > span { text-align: right; overflow-wrap: anywhere; color: #ddcddd; }
.enemy-vital .bar { grid-column: 1 / -1; height: 3px; margin: 0; }
.action-context { border-left: 2px solid #c4a5c2; background: #1c122366; padding: 6px 8px; margin-top: 6px; color: #ede2dd; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.action-context b { color: #fff0de; }
.area-targets { display: grid; gap: 3px; margin: 6px 0; }
.area-target { display: grid; grid-template-columns: minmax(90px, .7fr) minmax(0, 1.3fr); gap: 7px; padding: 4px 6px; background: #201527; border-radius: 3px; font-size: 12px; line-height: 1.3; }
.area-target > span { text-align: right; }
.preview-notes { margin: 5px 0; color: #d8c4db; font-size: 11px; line-height: 1.4; }
.battle-controls .commands.area-confirm { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.battle-footnotes { grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); align-items: start; gap: 12px; margin-top: 4px; }
.battle-log { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; align-items: start; }
.battle-log > .bar-label { grid-column: 2; grid-row: 1; }
.battle-log .hud-chip { min-height: 44px; padding: 4px 7px; white-space: nowrap; }
.log-recent { grid-column: 1; grid-row: 1; font-size: 11px; line-height: 1.4; padding: 4px 0; color: #e1d2e1; }
.log-recent > div + div { color: #fff0e4; margin-top: 2px; }
.battle-log .log { grid-column: 1 / -1; max-width: none; }
.console-rule { flex-basis: 100%; color: #e6d4ea; font-size: 11px; line-height: 1.35; }

/* Tienda y equipo: lista a la izquierda, decisión y comparación a la derecha. */
.rpg-menu { width: min(920px, 94vw); }
.shop-wallet { color: #e5d5b6; font-size: 13px; }
.rpg-tabs { display: flex; gap: 5px; margin: 15px 0; padding-bottom: 5px; border-bottom: 1px solid #967899; }
.rpg-tabs button { flex: 1; min-height: 44px; padding: 8px 16px; border: 1px solid #765a79; border-radius: 4px; background: #25182d; color: #d5c1d7; font: 600 14px var(--font); cursor: pointer; }
.rpg-tabs button[aria-selected="true"] { color: #302032; background: #ecdfd3; border-color: #ecdfd3; }
.rpg-columns { display: grid; grid-template-columns: minmax(170px, .75fr) minmax(0, 1.65fr); gap: 18px; align-items: start; }
.rpg-list { display: grid; gap: 6px; min-width: 0; }
.rpg-list .cmd { text-align: left; min-height: 62px; padding: 9px 11px; align-items: start; overflow-wrap: anywhere; }
.rpg-list .cmd[aria-pressed="true"], .formation-reserves .cmd[aria-pressed="true"] { border-color: #f0decb; background: #633b54; box-shadow: inset 3px 0 #f0decb; }
.rpg-detail { min-width: 0; padding: 16px; background: #211426; border: 1px solid #826786; border-radius: 5px; font-size: 13px; line-height: 1.5; }
.rpg-detail h3 { margin: 0; font-size: 19px; color: #f3e4d5; }
.rpg-detail p { margin: 9px 0; }
.rpg-detail > .cmd { width: 100%; min-height: 48px; margin-top: 9px; white-space: normal; }
.equipment-label { display: grid; gap: 5px; font-size: 12px; color: #d8c4dc; margin: 10px 0; }
.equipment-select { width: 100%; max-width: 100%; min-height: 44px; padding: 8px; border: 1px solid #9b7c9e; border-radius: 3px; background: #332039; color: #f4e6d8; font: 13px var(--font); }
.comparison-labels { display: grid; gap: 3px; margin: 10px 0 5px; font-size: 12px; }
.comparison-labels > :last-child { color: #ead4a9; }
.comparison-table { font-size: 12px; width: 100%; margin: 0; }
.comparison-table th, .comparison-table td { padding: 4px 7px; text-align: right; }
.comparison-table th:first-child, .comparison-table td:first-child { text-align: left; }
.comparison-table th { color: #cbb5cd; font-weight: 400; }
.comparison-table .stat-up { color: #b9e3c3; font-weight: 700; }
.comparison-table .stat-down { color: #f7b4b4; font-weight: 700; }
.comparison-effect { color: #cbb8d1; font-size: 12px; }
.formation-active .cmd { display: flex; flex-direction: row; gap: 9px; align-items: center; }
.formation-active .cmd > span { min-width: 0; display: grid; gap: 4px; }
.formation-active .cmd small { font-size: 10px; line-height: 1.4; }
.formation-reserves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.formation-reserves .cmd { min-height: 54px; padding: 6px; font-size: 12px; }
.formation-reserves .cmd small { font-size: 10px; }
.formation-synergies { font-size: 12px; line-height: 1.45; color: #ded1bc; }
.formation-synergies p { margin: 7px 0; }
@media (max-width: 680px) {
  .rpg-columns { grid-template-columns: 1fr; gap: 10px; }
  .rpg-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formation-active { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .formation-active .cmd { flex-direction: column; align-items: start; gap: 4px; }
  .formation-active .portrait { display: none; }
  .rpg-detail { padding: 12px; }
  .rpg-tabs { margin: 10px 0; }
  .formation-reserves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Exploration uses the monitor for the world, with a short command strip. */
@media (min-width: 1001px) {
  body:not(.handset) #app[data-scene="exploration"] #panel { padding: 8px 16px; }
  body:not(.handset) .exploration-panel { display: flex; align-items: center; gap: 18px; }
  body:not(.handset) .exploration-panel > .panel-title,
  body:not(.handset) .exploration-panel > .log { display: none; }
  body:not(.handset) .exploration-commands { flex: 0 0 auto; margin: 0; flex-wrap: nowrap; }
  body:not(.handset) .exploration-panel > .preview { flex: 1; margin: 0; }
}