/* Guerra de Clanes 2.0 — dorado viejo, negro y blanco hueso. */

:root {
  --ink: #0b0a08;
  --coal: #13110d;
  --panel: #191712;
  --panel-raised: #211e17;
  --line: rgba(201, 162, 74, 0.26);
  --line-strong: rgba(201, 162, 74, 0.6);
  --gold: #c9a24a;
  --gold-bright: #e4c67e;
  --gold-deep: #8a6a2a;
  --bone: #f2ede1;
  --text: #e9e3d4;
  --muted: #aaa292;
  --focus: #f5dc9c;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 6px;
  --gutter: clamp(16px, 3vw, 32px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 64px; }

body {
  margin: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201, 162, 74, 0.12), transparent 70%),
    var(--ink);
  color: var(--text);
  font: 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; color: var(--bone); margin: 0; letter-spacing: 0.01em; }
h2 { font-size: 1.45rem; line-height: 1.2; }
h4 { font-size: 1rem; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
p { margin: 0; }
code { font-size: 0.9em; color: var(--gold-bright); }

:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--gutter); top: -48px; z-index: 20;
  background: var(--gold); color: var(--ink); padding: 0.5rem 0.9rem; border-radius: var(--radius);
  font-weight: 600; text-decoration: none;
}
.skip:focus { top: 12px; }

.eyebrow {
  font: 600 0.7rem/1 var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.4rem;
}

/* ---------- Cabecera ---------- */

.masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  padding: 1.25rem var(--gutter) 1rem;
  border-bottom: 1px solid var(--line);
}
.masthead__brand { display: flex; align-items: center; gap: 0.9rem; }
.masthead h1 { font-size: clamp(1.4rem, 3.4vw, 2rem); line-height: 1; }
.masthead h1 span { color: var(--gold); font-style: italic; }

.crest { width: 34px; height: 41px; flex: none; }
.crest path:first-child { fill: var(--coal); stroke: var(--gold); stroke-width: 1.6; }
.crest path:last-child { fill: var(--gold); stroke: var(--gold-bright); stroke-width: 1; stroke-linejoin: round; }

.demo-flag {
  display: flex; align-items: center; gap: 0.75rem; max-width: 34rem;
  padding: 0.55rem 0.8rem; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  font-size: 0.82rem; color: var(--muted);
}
.demo-flag strong {
  flex: none; font: 700 0.68rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: 0.35rem 0.5rem; border-radius: 3px;
}

/* ---------- Navegación ---------- */

.tabs {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 0.6rem; overflow: visible;
  padding: 0.5rem var(--gutter);
  background: rgba(11, 10, 8, 0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  scrollbar-width: none;
}
.tabs__links { display: flex; gap: 0.25rem; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.guide-trigger { flex: none; min-height: 42px; padding: 0.4rem 0.75rem; border: 1px solid var(--gold); border-radius: var(--radius); background: var(--coal); color: var(--gold-bright); font: 600 0.9rem var(--sans); cursor: pointer; }
.guide-trigger span { font-family: var(--serif); margin-right: 0.25rem; }
.guide-trigger:hover { background: var(--panel-raised); color: var(--bone); }
.quick-guide { padding: 0; width: min(680px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; border: 1px solid var(--gold); border-radius: var(--radius); color: var(--text); background: var(--panel); box-shadow: 0 16px 80px #0009; }
.quick-guide::backdrop { background: #000b; }
.quick-guide__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem 1.25rem; background: var(--panel-raised); border-bottom: 1px solid var(--line); }
.quick-guide__head .btn { min-height: 44px; flex: none; }
.quick-guide__body { padding: 1.25rem; display: grid; gap: 1.2rem; font-size: 0.95rem; line-height: 1.6; }
.quick-guide__body h3 { font-size: 1.2rem; margin-bottom: 0.65rem; }
.quick-guide__body a:not(.btn) { color: var(--gold-bright); text-decoration: underline; text-underline-offset: 3px; }
.quick-guide__steps { margin: 0; padding-left: 1.4rem; display: grid; gap: 0.6rem; }
.quick-guide__hint { font-size: 0.82rem; color: var(--muted); margin: 0.8rem 0; }
.quick-guide__body details { border-top: 1px solid var(--line); padding-top: 0.8rem; }
.quick-guide__body summary { cursor: pointer; min-height: 44px; font-weight: 600; color: var(--bone); }
.quick-guide__body details > p + p { margin-top: 0.7rem; }
.quick-guide__terms { margin: 0; display: grid; gap: 0.9rem; }
.quick-guide__terms dt { color: var(--bone); font-weight: 650; }
.quick-guide__terms dd { margin: 0.2rem 0 0; color: var(--muted); }
.guide-session { display: grid; gap: 0.65rem; padding: 0.9rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: rgba(201, 162, 74, 0.06); }
.guide-session h3, .guide-session p { margin: 0; }
.guide-session p { color: var(--text); font-size: 0.88rem; }
.guide-session__fresh { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; color: var(--muted); font-size: 0.78rem; }
@media (max-width: 480px) {
  .tabs { gap: 0.4rem; padding-inline: 12px; }
  .guide-trigger { padding-inline: 0.55rem; font-size: 0.82rem; }
  .quick-guide__head, .quick-guide__body { padding: 1rem; }
  .quick-guide__head h2 { font-size: 1.3rem; }
}
.tabs a {
  flex: none; padding: 0.5rem 0.9rem; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.9rem;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.tabs a:hover { color: var(--bone); }
.tabs a[aria-current="true"] { color: var(--ink); background: var(--gold); }

/* ---------- Rejilla ---------- */

.layout { padding: var(--gutter); display: grid; gap: var(--gutter); max-width: 1480px; margin: 0 auto; }
.row { display: grid; gap: var(--gutter); }
@media (min-width: 900px) {
  .row--top { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  .row--bottom { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); align-items: start; }
}

.panel {
  background: linear-gradient(180deg, var(--panel-raised), var(--panel) 120px);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  padding: clamp(16px, 2vw, 24px);
  display: grid; gap: 1.1rem; align-content: start;
  min-width: 0;
  position: relative;
  container-type: inline-size;
}
/* Filete dorado superior: detalle de encuadernación. */
.panel::before {
  content: ""; position: absolute; inset: 0 24px auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0.6;
}
.panel__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }

.tag {
  flex: none; display: inline-flex; align-items: center;
  font: 600 0.66rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.3rem 0.5rem; border-radius: 3px; white-space: nowrap;
}
.tag--demo { color: var(--gold-bright); border: 1px dashed var(--line-strong); }

.lede { color: var(--muted); font-size: 0.9rem; }
.muted { color: var(--muted); }
.fineprint { color: var(--muted); font-size: 0.8rem; font-style: italic; }
.warn {
  border-left: 3px solid var(--bone); padding: 0.5rem 0.75rem; background: rgba(242, 237, 225, 0.06);
  font-size: 0.85rem;
}

.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 16px; height: 16px; color: var(--gold); }

/* ---------- Estado de territorio ---------- */

.status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.75rem; font-weight: 600; color: var(--text); white-space: nowrap;
}
.status__mark {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--gold);
}
/* El estado nunca depende solo del color: forma + texto. */
.status--estable .status__mark { background: var(--gold); }
.status--intercambio .status__mark { background: linear-gradient(90deg, var(--gold) 50%, transparent 50%); }
.status--sin-datos .status__mark { border-style: dashed; border-color: var(--muted); }
.status--requiere-validacion .status__mark {
  border-radius: 2px; transform: rotate(45deg); border-color: var(--bone); background: var(--bone);
}

/* ---------- Mapa ---------- */

.map { margin: 0; display: grid; gap: 0.5rem; }
.map__svg {
  display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--coal);
}
.map__veil { fill: rgba(11, 10, 8, 0.28); pointer-events: none; }
.map figcaption { font-size: 0.78rem; color: var(--muted); }

#hatch line { stroke: rgba(242, 237, 225, 0.4); stroke-width: 3; }

.zone { cursor: pointer; }
.zone__shape {
  fill: rgba(201, 162, 74, 0.04);
  stroke: rgba(228, 198, 126, 0.75); stroke-width: 3; stroke-dasharray: 14 10;
  stroke-linejoin: round;
  transition: fill 0.2s var(--ease), stroke 0.2s var(--ease);
}
.zone.status--requiere-validacion .zone__shape { fill: url(#hatch); stroke: rgba(242, 237, 225, 0.8); }
.zone.status--sin-datos .zone__shape { stroke: rgba(170, 162, 146, 0.8); }
.zone:hover .zone__shape { fill: rgba(201, 162, 74, 0.16); }
.zone.is-selected .zone__shape {
  fill: rgba(201, 162, 74, 0.2); stroke: var(--gold-bright); stroke-width: 6; stroke-dasharray: none;
}
.zone.status--requiere-validacion.is-selected .zone__shape { stroke: var(--bone); }

.zone__marker circle { fill: var(--ink); stroke: var(--gold); stroke-width: 4; transition: transform 0.2s var(--ease); }
.zone.is-selected .zone__marker circle { fill: var(--gold); stroke: var(--bone); }
.zone__num { font: 700 46px var(--serif); fill: var(--gold-bright); text-anchor: middle; }
.zone.is-selected .zone__num { fill: var(--ink); }
.zone__label {
  font: 600 38px var(--serif); fill: var(--bone); text-anchor: middle; letter-spacing: 0.02em;
  paint-order: stroke; stroke: rgba(11, 10, 8, 0.85); stroke-width: 10px; stroke-linejoin: round;
}
@media (max-width: 599px) {
  .zone__label { display: none; }
  .zone__marker circle { r: 62px; }
  .zone__num { font-size: 64px; }
  .zone__num { transform: translateY(6px); }
}

.territory-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
@media (min-width: 600px) { .territory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.territory {
  width: 100%; min-height: 56px;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "num body" "num status";
  align-items: center; gap: 0.2rem 0.75rem;
  padding: 0.6rem 0.75rem; text-align: left;
  font: inherit; color: inherit;
  background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.territory:hover { border-color: var(--line-strong); }
.territory.is-selected { border-color: var(--gold); background: rgba(201, 162, 74, 0.1); box-shadow: inset 3px 0 0 var(--gold); }
.territory__num {
  grid-area: num; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid var(--gold); color: var(--gold-bright); font: 700 0.95rem var(--serif);
}
.territory.is-selected .territory__num { background: var(--gold); color: var(--ink); }
.territory__body { grid-area: body; display: grid; min-width: 0; }
.territory__name { font-family: var(--serif); font-weight: 600; color: var(--bone); font-size: 1.02rem; }
.territory__meta { display: flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--muted); }
.territory .status { grid-area: status; }

/* ---------- Terreno ---------- */

.facts { margin: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.facts > div:last-child, .facts > div:nth-child(3):not(:last-child) { grid-column: 1 / -1; }
.facts > div { padding: 0.6rem 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); }
.facts dt { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.25rem; }
.facts dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; color: var(--bone); font-weight: 500; }
.facts__hint { flex-basis: 100%; font-size: 0.76rem; color: var(--muted); font-weight: 400; }

.plot-body { display: grid; gap: 1rem; }
@media (min-width: 600px) and (max-width: 899px), (min-width: 1200px) {
  .plot-body:not(.plot-body--empty) { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); align-items: start; }
}

.plot-art { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.plot-art img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 40%; }
@media (min-width: 600px) and (max-width: 899px), (min-width: 1200px) {
  .plot-art img { aspect-ratio: 1145 / 1374; }
}
.plot-art figcaption {
  position: absolute; inset: auto 0 0; padding: 2rem 0.8rem 0.7rem;
  background: linear-gradient(transparent, rgba(11, 10, 8, 0.92));
  display: grid; font-size: 0.8rem; color: var(--muted);
}
.plot-art__name { font-family: var(--serif); font-size: 1.05rem; color: var(--bone); font-weight: 600; }

.plot-data { display: grid; gap: 1.1rem; align-content: start; }

.ledger { display: grid; gap: 0.7rem; }
.ledger__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 0.75rem; }
.ledger__head h4 { flex-wrap: nowrap; align-items: baseline; }
.ledger__head h4 .icon { align-self: center; }
.bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--coal); border: 1px solid var(--line); }
.bar__seg { height: 100%; }
.bar__seg--seed { background: repeating-linear-gradient(45deg, var(--gold-deep) 0 4px, transparent 4px 8px); }
.bar__seg--consumption { background: var(--gold-deep); }
.bar__seg--net { background: var(--gold-bright); }
.ledger__rows { margin: 0; display: grid; }
.ledger__row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-bottom: 1px dotted var(--line); font-size: 0.9rem; }
.ledger__row dt { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); }
.ledger__row dt::before { content: ""; width: 10px; height: 10px; border-radius: 2px; flex: none; }
.ledger__row--gross dt::before { border: 1px solid var(--gold); }
.ledger__row--seed dt::before { background: repeating-linear-gradient(45deg, var(--gold-deep) 0 2px, transparent 2px 4px); border: 1px solid var(--gold-deep); }
.ledger__row--consumption dt::before { background: var(--gold-deep); }
.ledger__row--net dt::before { background: var(--gold-bright); }
.ledger__row dd { margin: 0; font-variant-numeric: tabular-nums; color: var(--bone); font-weight: 600; }
.ledger__row--net { border-bottom: 0; border-top: 1px solid var(--line-strong); margin-top: 0.2rem; padding-top: 0.6rem; }
.ledger__row--net dt { color: var(--bone); font-weight: 600; }
.ledger__row--net dd { font: 700 1.3rem/1 var(--serif); color: var(--gold-bright); }

.workers { display: grid; gap: 0.5rem; }
.workers__count { font-size: 0.9rem; color: var(--muted); }
.workers__count strong { color: var(--bone); font: 700 1.1rem var(--serif); }
.slots { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.slot { width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; border: 1px dashed var(--line-strong); color: var(--muted); }
.slot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.slot.is-filled { border-style: solid; border-color: var(--gold); background: rgba(201, 162, 74, 0.14); color: var(--gold-bright); }

/* ---------- Sello de validación física ---------- */

.seal {
  display: flex; gap: 0.85rem; align-items: flex-start;
  padding: 0.9rem 1rem; border-radius: var(--radius);
  border: 1px solid rgba(242, 237, 225, 0.5);
  background: repeating-linear-gradient(135deg, rgba(242, 237, 225, 0.035) 0 10px, transparent 10px 20px), var(--coal);
  font-size: 0.86rem; color: var(--muted);
}
.seal__icon { width: 56px; height: 56px; flex: none; object-fit: contain; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5)); }
.seal--compact .seal__icon { width: 40px; height: 40px; }
.seal__title { color: var(--bone); font-weight: 600; margin-bottom: 0.2rem; }
.seal--compact { padding: 0.7rem 0.85rem; }

/* ---------- Mercado ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
th, td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
thead th { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--coal); }
tbody tr:last-child > * { border-bottom: 0; }
tbody th { font-weight: 600; color: var(--bone); }
tbody th .icon { vertical-align: -3px; margin-right: 0.4rem; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
/* En columnas estrechas cada orden del mercado ilustrativo se vuelve una ficha sin scroll horizontal. */
@container (max-width: 520px) {
  .table-wrap--cards { overflow: visible; border: 0; }
  .table-wrap--cards :is(table, tbody, tr, th, td) { display: block; }
  .table-wrap--cards thead { display: none; }
  .table-wrap--cards tbody { display: grid; gap: 0.5rem; }
  .table-wrap--cards tbody tr {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem;
    padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal);
  }
  .table-wrap--cards tbody th { grid-column: 1 / -1; font-family: var(--serif); font-size: 1rem; }
  .table-wrap--cards :is(tbody th, tbody td) { padding: 0; border: 0; white-space: normal; }
  .table-wrap--cards tbody td::before {
    content: attr(data-label); display: block; margin-bottom: 0.15rem;
    font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted);
  }
  .table-wrap--cards tbody td.num { text-align: left; }
}

.dir { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 3px; font-size: 0.75rem; font-weight: 600; }
.dir--buy { border: 1px solid var(--gold); color: var(--gold-bright); }
.dir--sell { background: var(--bone); color: var(--ink); }

/* ---------- Tesorería ---------- */

.coins { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.coin {
  display: grid; justify-items: center; gap: 0.2rem; padding: 0.8rem 0.4rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal);
}
.coin .icon { color: var(--gold); width: 22px; height: 22px; }
.coin__value { font: 700 1.6rem/1 var(--serif); color: var(--bone); font-variant-numeric: tabular-nums; }
.coin__label { font-size: 0.75rem; color: var(--muted); }

.proposal { display: grid; gap: 0.4rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--muted); }
.proposal__rate { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.2rem; }
.proposal__rate strong { color: var(--bone); font-family: var(--serif); font-size: 1.05rem; }

/* ---------- Estados vacío, carga y error ---------- */

.empty {
  display: grid; justify-items: center; text-align: center; gap: 0.35rem;
  padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--muted); font-size: 0.88rem;
}
.empty__glyph { width: 44px; height: 44px; fill: none; stroke: var(--gold-deep); stroke-width: 1.6; stroke-linejoin: round; margin-bottom: 0.3rem; }
.empty__title { font-family: var(--serif); color: var(--bone); font-size: 1.05rem; font-weight: 600; }

.state { justify-items: center; text-align: center; padding: clamp(24px, 5vw, 56px); }
.state--loading p { color: var(--muted); }
.state--error h2 { font-size: 1.3rem; }
.state--error p { max-width: 38rem; }
.state__glyph { width: 52px; height: 52px; fill: none; stroke: var(--bone); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

.skeleton {
  width: 100%; border-radius: var(--radius);
  background: linear-gradient(90deg, var(--coal) 0%, var(--panel-raised) 50%, var(--coal) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
.skeleton--map { aspect-ratio: 1672 / 941; max-height: 52vh; }
.skeleton--line { height: 14px; max-width: 32rem; }
.skeleton--short { max-width: 18rem; }
@keyframes shimmer { to { background-position: -200% 0; } }

.btn {
  font: 600 0.9rem var(--sans); color: var(--ink); background: var(--gold);
  border: 0; border-radius: var(--radius); padding: 0.65rem 1.2rem; min-height: 44px; cursor: pointer;
}
.btn:hover { background: var(--gold-bright); }

/* ---------- Pie ---------- */

.colophon { padding: 1rem var(--gutter) 2rem; max-width: 1480px; margin: 0 auto; color: var(--muted); font-size: 0.8rem; }

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .skeleton { animation: none; background: var(--panel-raised); }
}

/* ---------- Contrato 1.1: mantenimiento, cartera y viñeta ---------- */

.upkeep {
  display: flex; gap: 0.5rem; align-items: flex-start;
  padding: 0.6rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--radius);
  font-size: 0.84rem; color: var(--muted);
}
.upkeep .icon { margin-top: 2px; }
.upkeep strong { color: var(--bone); }

.wallet { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.wallet > div { padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); }
.wallet__reserved { border-style: dashed !important; background: repeating-linear-gradient(135deg, rgba(201, 162, 74, 0.05) 0 8px, transparent 8px 16px), var(--coal) !important; }
.wallet dt { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.wallet dd { margin: 0.2rem 0 0; font: 700 1.4rem/1 var(--serif); color: var(--bone); font-variant-numeric: tabular-nums; }
.wallet dd span { font: 500 0.8rem var(--sans); color: var(--muted); }

.param {
  display: block; font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.order--cancelled th, .order--cancelled td:not([data-label="Estado"]) { color: var(--muted); }
.order--cancelled th { text-decoration: line-through; text-decoration-color: rgba(170, 162, 146, 0.6); }
.order__status { font-weight: 600; }
.order--open .order__status { color: var(--gold-bright); }
.order--cancelled .order__status { color: var(--muted); }

.empty--art { padding-top: 0; overflow: hidden; }
.empty__art {
  width: min(100%, 420px); height: auto; aspect-ratio: 16 / 9; margin-bottom: 0.4rem;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000 55%, transparent 100%);
}
.state--error .empty__art { width: min(100%, 360px); }

/* Dato no decidido o ausente del contrato: siempre texto explícito, nunca un valor inventado. */
.pending {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font: 600 0.68rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--bone); padding: 0.28rem 0.45rem; border-radius: 3px;
  border: 1px dashed rgba(242, 237, 225, 0.55);
}
.pending::before { content: ""; width: 7px; height: 7px; border: 1.5px solid currentColor; border-radius: 50%; }

/* ---------- Casos de conquista (escenarios ilustrativos) ---------- */

.tag--scenario { color: var(--ink); background: var(--bone); }

.case-tabs { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.case-tab {
  display: flex; align-items: center; gap: 0.7rem; text-align: left; min-height: 56px;
  padding: 0.6rem 0.8rem; font: inherit; color: inherit; cursor: pointer;
  background: var(--coal); border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.case-tab > span:last-child { display: grid; }
.case-tab:hover { border-color: var(--line-strong); }
.case-tab[aria-selected="true"] { border-color: var(--gold); background: rgba(201, 162, 74, 0.1); box-shadow: inset 0 -3px 0 var(--gold); }
.case-tab__num {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 4px;
  border: 1.5px solid var(--gold); color: var(--gold-bright); font: 700 0.95rem var(--serif);
}
.case-tab[aria-selected="true"] .case-tab__num { background: var(--gold); color: var(--ink); }
.case-tab__title { font-family: var(--serif); font-weight: 600; color: var(--bone); }
.case-tab__kind { font-size: 0.76rem; color: var(--muted); }

.case { display: grid; gap: 1.1rem; border-radius: var(--radius); }
@container (min-width: 760px) { .case { grid-template-columns: minmax(220px, 0.42fr) 1fr; align-items: start; } }

.case__media { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--coal); }
.case__art { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 40%; }
@container (min-width: 760px) { .case__art { aspect-ratio: 4 / 5; } }
.case__region {
  position: absolute; inset: auto 0 0; display: grid; padding: 2rem 0.8rem 0.7rem;
  background: linear-gradient(transparent, rgba(11, 10, 8, 0.92));
  font: 600 1.1rem var(--serif); color: var(--bone);
}
.case__region span { font: 600 0.66rem/1.4 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }

.case__body { display: grid; gap: 1rem; min-width: 0; }
.case__status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; font-size: 0.85rem; }
.case__parties > div:last-child { grid-column: auto; }
.case__safe {
  display: flex; gap: 0.5rem; align-items: center; padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 0.86rem; color: var(--muted);
}
.case__lists { display: grid; gap: 1rem; }
@container (min-width: 640px) { .case__lists { grid-template-columns: 1fr 1fr; } }
.case__h { font-size: 0.95rem; margin-bottom: 0.5rem; }
.decided, .undecided { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; font-size: 0.88rem; }
.decided li { position: relative; padding-left: 1.1rem; }
.decided li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--gold); border-radius: 1px; transform: rotate(45deg); }
.undecided li { display: grid; gap: 0.3rem; justify-items: start; padding: 0.55rem 0.7rem; border: 1px dashed rgba(242, 237, 225, 0.3); border-radius: var(--radius); color: var(--text); }

/* Base protegida declarada en el contrato 1.2. */
.shield {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-right: 0.35rem;
  font: 600 0.68rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); background: var(--gold); padding: 0.28rem 0.45rem; border-radius: 3px;
}
.facts__hint .pending { margin-right: 0.35rem; }

/* ---------- Sandbox persistente ---------- */

.tag--live { color: var(--ink); background: var(--gold-bright); }
.sandbox { border-color: var(--line-strong); }
.sbx-rev { font-size: 0.8rem; }

.sbx-actors { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sbx-actors legend { width: 100%; margin-bottom: 0.5rem; font-size: 0.85rem; color: var(--bone); font-weight: 600; }
.sbx-actors legend .muted { font-weight: 400; }
.sbx-actor { position: relative; }
.sbx-actor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.sbx-actor span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--coal);
  font-family: var(--serif); font-weight: 600; color: var(--bone);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.sbx-actor input:checked + span { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.sbx-actor input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }
.sbx-actors:disabled .sbx-actor span { opacity: 0.55; }

.sbx-flash { min-height: 0; border-radius: var(--radius); font-size: 0.9rem; }
.sbx-flash:focus { outline: none; }
.sbx-flash:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sbx-flash--idle { display: none; }
.sbx-flash--busy, .sbx-flash--ok, .sbx-flash--error, .sbx-flash--info, .sbx-flash--uncertain { padding: 0.7rem 0.9rem; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.sbx-flash--busy { border: 1px dashed var(--line-strong); color: var(--muted); }
.sbx-flash--ok { border: 1px solid var(--gold); background: rgba(201, 162, 74, 0.12); color: var(--bone); }
.sbx-flash--ok::before { content: ""; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); flex: none; }
.sbx-flash--info { border: 1px solid var(--line); color: var(--text); }
.sbx-flash--error { border: 1px solid var(--bone); border-left-width: 4px; background: rgba(242, 237, 225, 0.06); color: var(--bone); }
.sbx-flash--uncertain { border: 1px dashed var(--bone); background: repeating-linear-gradient(135deg, rgba(242, 237, 225, 0.04) 0 10px, transparent 10px 20px); color: var(--bone); }
.sbx-flash__actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.sbx-spinner { width: 14px; height: 14px; border: 2px solid var(--line-strong); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.sbx-grid { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.sbx-grid:disabled { opacity: 0.7; }
.sbx-card { min-width: 0; display: grid; gap: 0.8rem; align-content: start; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); }
.sbx-card--wide { grid-column: 1 / -1; }

.sbx-balances table th, .sbx-balances table td { padding: 0.45rem 0.5rem; }
.sbx-balances .is-reserved { color: var(--gold-bright); }
.sbx-balances th .icon { vertical-align: -3px; margin-right: 0.35rem; }
.sbx-all summary { cursor: pointer; font-size: 0.85rem; color: var(--gold-bright); min-height: 44px; display: flex; align-items: center; }
.table-wrap--scroll { overflow-x: auto; }
.sbx-all .is-current th { color: var(--gold-bright); }
.sbx-all td, .sbx-all th { font-size: 0.8rem; padding: 0.4rem 0.5rem; }

.sbx-plot { display: grid; gap: 0.6rem; }
.sbx-plot h4 { font-size: 1rem; }
.sbx-tenure { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; font-size: 0.8rem; }
.sbx-tenure dt { color: var(--muted); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; }
.sbx-tenure dd { margin: 0; color: var(--bone); }
.sbx-flow { display: grid; gap: 0.3rem; font-size: 0.86rem; }
.sbx-flow__step { display: flex; align-items: flex-start; gap: 0.35rem; }
.sbx-flow__step .icon { margin-top: 2px; }
.sbx-flow strong { color: var(--bone); }

.sbx-form { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); align-items: end; }
.sbx-form label { display: grid; gap: 0.25rem; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); }
.sbx-form select, .sbx-form input {
  font: inherit; font-size: 0.95rem; color: var(--bone); background: var(--ink);
  border: 1px solid var(--line-strong); border-radius: var(--radius); min-height: 44px; padding: 0 0.6rem; width: 100%;
}
.sbx-form select:focus-visible, .sbx-form input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sbx-form__note { grid-column: 1 / -1; font-size: 0.8rem; color: var(--muted); }

.btn--ghost { background: transparent; color: var(--gold-bright); border: 1px solid var(--gold); }
.btn--ghost:hover { background: rgba(201, 162, 74, 0.12); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.sbx-list, .sbx-orders, .sbx-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.sbx-list li { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.4rem 0; border-bottom: 1px dotted var(--line); }
.sbx-list li span { display: inline-flex; align-items: center; gap: 0.35rem; }
.sbx-order { display: grid; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.sbx-order--open { border-color: var(--line-strong); }
.sbx-order--cancelled { opacity: 0.7; }
.sbx-order__main { display: flex; gap: 0.4rem; align-items: flex-start; font-size: 0.9rem; }
.sbx-order__main .icon { margin-top: 3px; }
.sbx-order__main .param { display: inline; margin-left: 0.3rem; }
.sbx-order__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.8rem; color: var(--muted); }
.sbx-order--open .order__status { color: var(--gold-bright); }
.sbx-order__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.sbx-hint { font-size: 0.78rem; color: var(--bone); }
.sbx-events li { display: flex; gap: 0.6rem; align-items: baseline; font-size: 0.82rem; }
.sbx-events__rev { color: var(--gold); font-variant-numeric: tabular-nums; min-width: 2.5ch; }
.sbx-events code { margin-left: auto; color: var(--muted); font-size: 0.72rem; }

@media (prefers-reduced-motion: reduce) { .sbx-spinner { animation: none; border-top-color: var(--line-strong); } }

/* ---------- Sandbox 0.2: obras y tierras ---------- */

.sbx-estate, .sbx-land { display: grid; gap: 0.6rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); }
.sbx-estate header h4 { font-size: 1rem; }
.sbx-recipes, .sbx-lands { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.sbx-recipe { display: grid; gap: 0.5rem; padding-top: 0.6rem; border-top: 1px dotted var(--line); font-size: 0.86rem; }
@container (min-width: 640px) { .sbx-recipe { grid-template-columns: 1fr auto; align-items: center; } }
.sbx-recipe__name { font-family: var(--serif); font-weight: 600; color: var(--bone); font-size: 0.98rem; }
.sbx-recipe__level { color: var(--text); }
.sbx-recipe__level .param { display: inline; margin-left: 0.3rem; }
.sbx-project {
  display: grid; gap: 0.45rem; padding: 0.7rem 0.8rem; border-radius: var(--radius);
  border: 1px dashed var(--gold); background: repeating-linear-gradient(135deg, rgba(201, 162, 74, 0.05) 0 8px, transparent 8px 16px);
  font-size: 0.86rem;
}
.sbx-subhead { font-size: 0.95rem; margin-top: 0.4rem; }
.sbx-disputes { display: grid; gap: 0.4rem; padding-top: 0.6rem; border-top: 1px solid var(--line); }
.sbx-disputes h4 { font-size: 0.95rem; }
.sbx-land .sbx-hint .shield { margin-right: 0.35rem; }

/* ---------- Sandbox 0.3: almacén y personal ---------- */

.sbx-balances .is-over { color: var(--bone); font-weight: 700; text-decoration: underline dotted; }
.sbx-workers { display: grid; gap: 0.5rem; padding-top: 0.7rem; border-top: 1px dotted var(--line); }
.sbx-workers__count { font-size: 0.9rem; color: var(--muted); }
.sbx-workers__count strong { color: var(--bone); font-family: var(--serif); }
.slot.is-extra { border-style: dashed; border-color: var(--gold-bright); background: rgba(228, 198, 126, 0.08); }
.sbx-form--workers { grid-template-columns: minmax(90px, 0.6fr) auto auto; }
@container (max-width: 420px) { .sbx-form--workers { grid-template-columns: 1fr 1fr; } .sbx-form--workers label { grid-column: 1 / -1; } }

/* Saldos con columna de almacén: sin desbordar la tarjeta en móvil. */
.sbx-balances table { table-layout: fixed; width: 100%; }
.sbx-balances th, .sbx-balances td { white-space: normal; }
.sbx-balances thead th:first-child { width: 36%; }
@container (max-width: 380px) {
  .sbx-balances thead th { font-size: 0.66rem; letter-spacing: 0; text-transform: none; padding: 0.4rem 0.25rem; }
  .sbx-balances thead th:first-child { width: 28%; }
  .sbx-balances tbody th, .sbx-balances tbody td { padding: 0.4rem 0.25rem; font-size: 0.82rem; }
  /* Separación visible entre columnas numéricas alineadas a la derecha («Disponible» y «Reservado»). */
  .sbx-balances :is(thead, tbody) .num { padding-left: 0.7rem; }
  .sbx-balances th .icon { display: none; }
}

/* Cada tarjeta del sandbox es su propio contenedor: las reglas estrechas dependen de su ancho real. */
.sbx-card { container-type: inline-size; }
.sbx-card > * { min-width: 0; }

/* ---------- 0.4: navegación por secciones operativas y Explorar ---------- */

/* Un único desfase: barra fija + aviso fijo, calculado en app.js (--scroll-offset). Sin scroll-margin extra en las secciones. */
html { scroll-padding-top: var(--scroll-offset, 72px); }
.tabs__secondary { margin-left: 0.4rem; border: 1px dashed var(--line-strong); color: var(--muted); }
.tabs__secondary[aria-current="true"] { border-style: solid; }

.sbx-section { display: grid; gap: 0.8rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.sbx-section__head { display: grid; gap: 0.25rem; }
.sbx-section__head h3 { font-size: 1.25rem; }
.sbx-section__lede { color: var(--muted); font-size: 0.9rem; max-width: 70ch; }
.sbx-section--minor .sbx-section__head h3 { font-size: 1rem; }
.sbx-card__title { font-family: var(--serif); font-size: 1rem; color: var(--bone); }
.sbx-anchor { display: block; }

.sbx-sync { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.4rem 1rem; }
.btn--small { min-height: 36px; padding: 0.35rem 0.8rem; font-size: 0.82rem; }

/* El resultado de una acción queda a la vista aunque la sección esté lejos del inicio del panel. */
/* Solo los resultados de acciones quedan fijos; el aviso informativo (p. ej. cambio de personaje) no tapa el contenido. */
.sbx-flash:not(.sbx-flash--idle):not(.sbx-flash--info) { position: sticky; top: var(--nav-h, 60px); z-index: 6; background-color: var(--panel-raised); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45); }

.sbx-upkeep { display: grid; gap: 0.6rem; }
.sbx-upkeep__pending { display: grid; gap: 0.35rem; }
.sbx-upkeep__ok { color: var(--gold-bright); font-size: 0.9rem; }

.explore { display: grid; gap: var(--gutter); padding-top: 0.5rem; border-top: 1px dashed var(--line-strong); }
.explore__head { display: grid; gap: 0.4rem; max-width: 80ch; }
.explore__head h2 { font-size: 1.3rem; color: var(--text); }
.explore__index { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; font-size: 0.85rem; }
.explore__index a { color: var(--gold-bright); }
.explore .panel { background: var(--coal); border-style: dashed; }
.explore .panel::before { display: none; }

.plot-data__note { color: var(--bone); }

@media (max-width: 599px) {
  .tabs__links a { padding: 0.45rem 0.7rem; font-size: 0.85rem; }
}

/* =====================================================================
   UI 0.5 — shell de juego: HUD y barra persistentes, una vista por ruta
   ===================================================================== */

html { scroll-padding-top: 0; }
.skip { border: 0; cursor: pointer; }
.game { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; }

.game-top { position: sticky; top: 0; z-index: 20; background: rgba(11, 10, 8, 0.96); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.game-top__bar { display: flex; align-items: center; gap: 0.75rem; padding: 0.45rem var(--gutter); }
.game-top__brand { display: flex; align-items: center; gap: 0.55rem; color: var(--bone); text-decoration: none; }
.game-top__brand .crest { width: 24px; height: 29px; }
.game-top__name { font: 600 1.05rem/1 var(--serif); }
.game-top__name span { color: var(--gold); font-style: italic; }
.game-top__demo { margin-right: auto; }
.guide-trigger { min-height: 36px; }

.hud { display: grid; gap: 0.35rem; padding: 0 var(--gutter) 0.5rem; }
.hud__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1rem; }
.hud__status { color: var(--muted); font-size: 0.85rem; }
.hud__actors { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; }
.hud__actors legend { float: left; margin-right: 0.5rem; font-size: 0.78rem; color: var(--bone); }
.hud__actors .sbx-actor span { min-height: 34px; padding: 0 0.75rem; font-size: 0.9rem; }
.hud__actors:disabled .sbx-actor span { opacity: 0.5; }
.hud__lock { font-size: 0.78rem; color: var(--bone); }
.hud__res { text-decoration: none; color: inherit; border-radius: var(--radius); min-width: 0; }
.hud__res:hover .res { border-color: var(--line-strong); }
.res-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; }
.res { flex: none; display: flex; align-items: baseline; gap: 0.35rem; padding: 0.25rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: var(--coal); font-size: 0.8rem; }
.res__label { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted); }
.res__coin { color: var(--gold); }
.res__val { font: 700 0.95rem var(--serif); color: var(--bone); font-variant-numeric: tabular-nums; }
.res__res { color: var(--gold-bright); font-size: 0.72rem; }
.res__rate { color: #9fc27a; font-size: 0.72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.res__rate.is-neg { color: #e0a36b; }
.res__rate.is-full { color: var(--gold-bright); text-transform: uppercase; letter-spacing: .04em; }
.hud__upkeep { font-size: 0.8rem; color: var(--text); text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.hud__upkeep.is-pending { color: var(--bone); font-weight: 600; border-bottom-color: var(--bone); }
.hud__sync { font-size: 0.75rem; margin-left: auto; }

.gamebar { display: flex; justify-content: center; gap: 0.25rem; padding: 0.35rem var(--gutter); border-bottom: 1px solid var(--line); background: var(--ink); }
.gamebar__item { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.85rem; border-radius: 999px; color: var(--muted); text-decoration: none; font-weight: 500; font-size: 0.9rem; }
.gamebar__item:hover { color: var(--bone); background: var(--coal); }
.gamebar__item[aria-current="page"] { color: var(--ink); background: var(--gold); }
.gamebar__more { display: none; }
.nav-icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.game-view { width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--gutter); }
.game-view:focus { outline: none; }
.view { display: grid; gap: 1rem; }
.view__head { position: relative; display: grid; border-radius: calc(var(--radius) + 2px); overflow: hidden; border: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-raised), var(--panel)); }
.view__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: 0.5; }
.view__head--art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 10, 8, 0.95) 0%, rgba(11, 10, 8, 0.75) 45%, rgba(11, 10, 8, 0.35) 100%); }
.view__titles { position: relative; z-index: 1; display: grid; gap: 0.4rem; padding: clamp(14px, 2.4vw, 26px); max-width: 72ch; }
.view__titles h1 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); line-height: 1.1; }
.view__titles h1:focus { outline: none; }
.view__titles h1:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.view__back { width: max-content; font-size: 0.85rem; color: var(--gold-bright); text-decoration: none; }
.view__back:hover { text-decoration: underline; }
.view__lede { color: var(--text); font-size: 0.95rem; }
.view__who { color: var(--muted); font-size: 0.9rem; }
.view__body { display: grid; gap: 1rem; }
.view__grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.view__notice { margin: 0; }
.view .sbx-flash:not(.sbx-flash--idle):not(.sbx-flash--info) { position: sticky; top: var(--top-h, 120px); }

.subnav { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.subnav a { padding: 0.4rem 0.85rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.88rem; background: rgba(11, 10, 8, 0.6); }
.subnav a[aria-current="page"] { background: var(--bone); color: var(--ink); border-color: var(--bone); font-weight: 600; }
.explore__flag { width: max-content; }

/* Campamento */
.hub { display: grid; gap: 1rem; }
.scenario-picker, .scenario-panel { display: grid; gap: 0.55rem; padding: 0.9rem 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(201, 162, 74, 0.06); }
.scenario-picker h2, .scenario-panel h2 { font-size: 1.1rem; }
.scenario-picker p, .scenario-panel p { margin: 0; max-width: 72ch; color: var(--text); }
.scenario-picker > div { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; margin: 0; }
.scenario-steps { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.scenario-step { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: 0.55rem; padding: 0.45rem; border: 1px solid var(--line); border-radius: var(--radius); }
.scenario-step.is-current { border-color: var(--gold); background: rgba(201, 162, 74, 0.1); }
.scenario-step.is-done { opacity: 0.75; }
.scenario-step__number { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--coal); color: var(--gold-bright); font-weight: 700; }
.scenario-step.is-done .scenario-step__number { background: var(--gold); color: var(--ink); }
.scenario-step strong, .scenario-step small { display: block; }
.scenario-step small { margin-top: 0.1rem; color: var(--muted); }
.settlement { display: grid; gap: 0.75rem; padding: clamp(0.8rem, 2vw, 1.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, rgba(37, 33, 24, 0.98), rgba(20, 18, 13, 0.98)); }
.settlement__copy { display: grid; gap: 0.35rem; max-width: 68ch; }
.settlement__copy h2 { font-size: clamp(1.25rem, 2.4vw, 1.7rem); }
.settlement__copy p { margin: 0; color: var(--text); }
.settlement__copy strong { color: var(--bone); }
.eyebrow { color: var(--gold-bright) !important; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
/* Marcas de nivel (lleno/vacío) con texto al lado. */
.pips { display: flex; justify-content: center; gap: 3px; margin-top: 0.2rem; }
.pips i { width: 16px; height: 6px; border: 1px solid var(--gold); border-radius: 2px; }
.pips i.is-on { background: var(--gold); }
.settlement--empty { min-height: 210px; align-content: center; }
.hub__map { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.hub__map > img { display: block; width: 100%; height: auto; aspect-ratio: 1672 / 941; object-fit: cover; filter: saturate(0.9) brightness(0.8); }
.hub__spots { position: absolute; inset: 0; }
.hub__map figcaption { padding: 0.5rem 0.75rem; font-size: 0.78rem; color: var(--muted); background: var(--coal); }
.hotspot { position: absolute; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem 0.3rem 0.3rem; border-radius: 999px; background: rgba(11, 10, 8, 0.82); border: 1px solid var(--gold); color: var(--bone); text-decoration: none; font: 600 0.88rem var(--serif); white-space: nowrap; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); transition: background-color 0.2s var(--ease); }
.hotspot:hover, .hotspot:focus-visible { background: var(--gold); color: var(--ink); }
.hotspot__pin { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 0.85rem var(--serif); }
.hotspot:hover .hotspot__pin, .hotspot:focus-visible .hotspot__pin { background: var(--ink); color: var(--gold-bright); }
.hub__alert { display: block; padding: 0.7rem 0.9rem; border: 1px solid var(--bone); border-left-width: 4px; border-radius: var(--radius); color: var(--bone); text-decoration: none; background: rgba(242, 237, 225, 0.06); }

.places { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.place { display: grid; grid-template-columns: 92px 1fr; gap: 0.75rem; align-items: center; padding: 0.55rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); color: inherit; text-decoration: none; min-height: 80px; transition: border-color 0.2s var(--ease); }
.place:hover, .place:focus-visible { border-color: var(--gold); }
.place__art { width: 92px; height: 68px; object-fit: cover; border-radius: 4px; }
.place__art--icon { display: grid; place-items: center; background: var(--panel-raised); color: var(--gold); }
.place__art--icon .nav-icon { width: 32px; height: 32px; }
.place__body { display: grid; gap: 0.15rem; min-width: 0; }
.place__title { display: flex; align-items: center; gap: 0.45rem; font: 600 1.05rem var(--serif); color: var(--bone); }
.place__num { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold-bright); font: 700 0.78rem var(--serif); }
.place__where { font-size: 0.8rem; color: var(--muted); }
.place__status { font-size: 0.82rem; color: var(--gold-bright); }

/* Tierras */
.land-list { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.land-card { display: grid; grid-template-columns: 140px 1fr; gap: 1rem; padding: 0.8rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); }
.land-card__art { width: 140px; height: 168px; object-fit: cover; border-radius: 4px; }
.land-card__body { display: grid; gap: 0.5rem; align-content: start; min-width: 0; }
.land-card__title { font-size: 1.15rem; }
.land-card__facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 0.4rem; }
.land-card__facts dt { font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.land-card__facts dd { margin: 0; color: var(--bone); }
.land-card__go { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.land-card__go .btn { text-decoration: none; display: inline-flex; align-items: center; }

/* Producir: miniatura del edificio */
.sbx-plot--art { grid-template-columns: 96px 1fr; column-gap: 0.9rem; }
.sbx-plot--art > .sbx-thumb { grid-row: span 6; width: 96px; height: 116px; object-fit: cover; border-radius: 4px; }
.sbx-plot--art > :not(.sbx-thumb) { grid-column: 2; }

.quick-guide__routes { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; list-style: none; padding: 0; margin: 0.6rem 0; }

@media (max-width: 720px) {
  .game { padding-bottom: 64px; }
  .game-top__demo { display: none; }
  .game-top__brand { margin-right: auto; }
  .hud__actors legend { float: none; width: 100%; margin: 0 0 0.25rem; }
  .hud__sync { margin-left: 0; width: 100%; }
  .gamebar { position: fixed; inset: auto 0 0 0; z-index: 30; justify-content: space-between; gap: 0; padding: 0.2rem 0.15rem calc(0.2rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-strong); border-bottom: 0; background: rgba(11, 10, 8, 0.97); }
  .gamebar__item { flex: 1 1 0; flex-direction: column; gap: 0.1rem; padding: 0.3rem 0.1rem; border-radius: var(--radius); font-size: 0.62rem; min-width: 0; }
  .gamebar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gamebar__item--secondary { display: none; }
  .gamebar__more { display: block; flex: 1 1 0; min-width: 0; }
  .gamebar__more > summary { list-style: none; cursor: pointer; }
  .gamebar__more > summary::-webkit-details-marker { display: none; }
  .gamebar__more-menu { position: fixed; right: 6px; bottom: calc(58px + env(safe-area-inset-bottom)); z-index: 31; display: grid; min-width: 148px; padding: 0.35rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--coal); box-shadow: 0 8px 28px #000b; }
  .gamebar__more-menu .gamebar__item { flex-direction: row; justify-content: flex-start; gap: 0.55rem; min-height: 44px; padding: 0.45rem 0.65rem; font-size: 0.85rem; }
  .hotspot__label { display: none; }
  .hotspot { padding: 0.15rem; }
  .land-card { grid-template-columns: 1fr; }
  .land-card__art { width: 100%; height: 140px; }
  .sbx-plot--art { grid-template-columns: 72px 1fr; }
  .sbx-plot--art > .sbx-thumb { width: 72px; height: 86px; }
  .place { grid-template-columns: 72px 1fr; }
  .place__art { width: 72px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .hotspot, .place { transition: none; } }

/* Ancho: la rejilla del juego nunca crece por el contenido (la fila de recursos se desplaza en horizontal). */
.game { grid-template-columns: minmax(0, 1fr); }
.game-top, .hud, .hud__row, .hud__res, .game-view, .gamebar { min-width: 0; }
.hud__row--res { flex-wrap: nowrap; }
.hud__row--res .hud__res { flex: 1 1 auto; }
.hud__row--res .hud__sync { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; }

@media (max-width: 720px) {
  /* En móvil el HUD no queda fijo (la barra inferior ya es la navegación permanente) y se compacta. */
  .game-top { position: static; }
  .hud { gap: 0.3rem; }
  .hud__actors legend { font-size: 0.72rem; }
  .hud__actors .sbx-actor span { min-height: 32px; padding: 0 0.6rem; font-size: 0.85rem; }
  .hud__row--res { flex-wrap: wrap; }
  .hud__row--res .hud__res { flex-basis: 100%; }
  .hud__upkeep { font-size: 0.76rem; }
  .hud__sync { font-size: 0.7rem; flex: 1 1 0; min-width: 0; }
  .view__titles h1 { font-size: 1.45rem; }
}

/* Ajustes tras revisar capturas 0.5 */
.view__titles h1 { width: fit-content; max-width: 100%; }
.view__titles h1:focus-visible { outline: 2px solid var(--line-strong); outline-offset: 6px; border-radius: 4px; }
.hud__syncbox { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.hud__syncbox .hud__sync { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; }
.hud__row--res { flex-wrap: nowrap; }
.hud__upkeep { flex: none; white-space: nowrap; }
@media (min-width: 1000px) {
  .hub { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr); align-items: start; }
  .places { grid-template-columns: 1fr; }
  .hub__alert { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .hud__syncbox { margin-left: 0; width: 100%; }
  .hud__syncbox .hud__sync { flex: 1 1 0; max-width: none; }
  .hud__row--res { flex-wrap: wrap; }
  .hud__upkeep { white-space: normal; }
}

/* HUD persistente en móvil: el encabezado es fijo con desfase negativo; al desplazarse solo queda la franja
   de recursos y manutención (con el personaje), sin fijar todo el alto ni tapar la vista. */
.hud__who { flex: none; font: 600 0.85rem var(--serif); color: var(--gold-bright); }
@media (max-width: 720px) {
  .game-top { position: sticky; top: var(--hud-stick, 0px); }
  /* Dos líneas: personaje + manutención arriba, recursos rotulados debajo. */
  .hud__row--res { flex-wrap: wrap; padding-top: 0.25rem; row-gap: 0.25rem; column-gap: 0.5rem; }
  .hud__row--res .hud__res { order: 3; flex: 1 1 100%; min-width: 0; }
  .hud__upkeep { flex: 1 1 0; min-width: 0; text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.7rem; }
}
.res__short { display: none; }
@media (max-width: 720px) {
  /* Franja compacta: cinco celdas iguales con abreviatura visible sobre la cifra (sin depender de iconos ni hover);
     el nombre completo sigue para lectores de pantalla. */
  .res__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .res-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.2rem; overflow: visible; }
  .res-list .res--empty { grid-column: 1 / -1; }
  .res { flex-direction: column; align-items: center; gap: 0; padding: 0.15rem 0.2rem; border-radius: 6px; font-size: 0.72rem; line-height: 1.15; min-width: 0; }
  .res__label { display: flex; align-items: center; gap: 0.2rem; }
  .res__label .icon, .res__coin { display: none; }
  .res__short { display: inline; color: var(--muted); white-space: nowrap; }
  .res__res { font-size: 0.6rem; }
  .res__rate { font-size: 0.6rem; }
}
@media (max-width: 720px) {
  /* El foco por teclado no queda bajo la franja fija ni bajo la barra inferior. */
  html { scroll-padding-top: calc(var(--top-h, 70px) + 8px); scroll-padding-bottom: 76px; }
}

/* Botones-enlace sin subrayado (como los botones nativos). */
a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }

/* Recorrido del escenario: un solo botón principal (paso actual); el resto, secundario. */
.scenario-step.is-later { opacity: 0.8; }
.scenario-step .btn { min-width: 6.5rem; }
.scenario-panel__guard { padding: 0.5rem 0.7rem; border-left: 3px solid var(--gold); background: rgba(201, 162, 74, 0.1); color: var(--bone) !important; }
.scenario-panel__done { color: var(--gold-bright) !important; font-weight: 600; }
.scenario-panel--compact { padding: 0.7rem 1rem; }
.scenario-panel--compact a { color: var(--gold-bright); white-space: nowrap; }

/* Escenario aislado visible en todas las pantallas: etiqueta en el encabezado y cinta sobre la vista. */
.game-top__scenario { color: var(--ink); background: var(--bone); margin-right: auto; }
.game-top__demo:has(+ .game-top__scenario) { margin-right: 0; }
.scenario-ribbon { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0 0 0.8rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: rgba(201, 162, 74, 0.06); font-size: 0.85rem; color: var(--text); }
.scenario-ribbon__tag { font: 600 0.68rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-bright); }
.scenario-ribbon a { margin-left: auto; color: var(--gold-bright); }
@media (max-width: 480px) { .game-top__scenario { display: none; } }

/* Producir en móvil: la ilustración pasa a banda superior y el texto usa todo el ancho. */
@media (max-width: 720px) {
  .sbx-plot--art { grid-template-columns: minmax(0, 1fr); }
  .sbx-plot--art > .sbx-thumb { grid-row: auto; width: 100%; height: 132px; }
  .sbx-plot--art > :not(.sbx-thumb) { grid-column: 1; }
}

/* Iconos de recurso ART-11 en el HUD (decorativos; el nombre o la abreviatura siguen en texto). */
.res__img { flex: none; width: 18px; height: 18px; object-fit: contain; }
@media (max-width: 720px) { .res__label .res__img { width: 14px; height: 14px; } }
@media (max-width: 360px) { .res__label .res__img { display: none; } }

/* Estado vacío del asentamiento (ART-12). */
.settlement--empty { grid-template-columns: minmax(0, 1fr); }
.settlement__empty-art { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; border-radius: 6px; }


/* Campamento: jerarquía. Paso actual del recorrido en franja compacta sobre la base; la lista completa,
   el selector de recorridos y la nota del escenario avanzado van después de la base. */
.scenario-now { display: grid; gap: 0.35rem; padding: 0.65rem 0.8rem; border: 1px solid var(--gold); border-radius: var(--radius); background: rgba(201, 162, 74, 0.1); }
.scenario-now__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.scenario-now__text { display: grid; gap: 0.15rem; min-width: 0; }
.scenario-now h2 { font: 600 1rem/1.25 var(--sans); color: var(--bone); }
.scenario-now p { margin: 0; font-size: 0.82rem; color: var(--text); }
.scenario-now .btn { flex: none; }
.scenario-now__guard { padding-left: 0.55rem; border-left: 3px solid var(--gold); color: var(--bone) !important; }
.scenario-now--done { display: block; padding: 0.5rem 0.8rem; color: var(--gold-bright); font-weight: 600; font-size: 0.85rem; }
.scenario-now--done .eyebrow { margin-right: 0.4rem; }
.scenario-step__here { justify-self: end; font-size: 0.75rem; font-weight: 600; color: var(--gold-bright); white-space: nowrap; }
@media (max-width: 720px) {
  /* La cabecera del Campamento se reduce a título y personaje: la base entra en la primera pantalla. */
  .view--campamento .view__lede { display: none; }
  .view--campamento .view__titles { gap: 0.15rem; padding: 10px 14px; }
  .view--campamento .view__titles h1 { font-size: 1.3rem; }
  .view--campamento .view__who { font-size: 0.8rem; }
}

/* Iconos de recurso ART-11 en Almacén y Mercado (decorativos; el nombre sigue en texto). */
.res-name { display: inline-flex; align-items: center; gap: 0.35rem; }
.res-icon { flex: none; width: 18px; height: 18px; object-fit: contain; }
.res-icon--lg { width: 28px; height: 28px; }
th.num .res-name { justify-content: flex-end; }
.sbx-order__main .res-icon--lg { margin-top: -2px; }
@container (max-width: 380px) {
  /* Tabla de saldos estrecha con iconos ART-11: icono más pequeño y primera columna algo más ancha. */
  .sbx-balances thead th:first-child { width: 34%; }
  .sbx-balances .res-icon { width: 14px; height: 14px; }
  .sbx-balances .res-name { gap: 0.2rem; }
}

/* ===== Región isométrica v0.7 (escena SVG + barra de mando) =====
   Identidad Mil Espadas: verdes tierra, carbón y dorado viejo. Luz desde el noroeste.
   Lo memorable es el mapa; el resto de la interfaz se mantiene sobria. */
.region { display: grid; gap: 0.6rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(160deg, #1a1d12, #14150f 72%); }
.region__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.region__title { font: 600 1.25rem/1.2 var(--serif); color: var(--bone); }
.region__tools { display: flex; align-items: center; gap: 0.35rem; }
.region__tools .btn--small { min-height: 36px; min-width: 36px; padding-inline: 0.6rem; }
.region__zoom { min-width: 4.8rem; text-align: center; font-size: 0.8rem; color: var(--text); }
.region__zoom-label { color: var(--muted); }
.region__frame { position: relative; overflow: auto; height: clamp(380px, 66vh, 640px); border: 1px solid rgba(201, 162, 74, 0.28); border-radius: 6px; background: #1d2112; overscroll-behavior: contain; scrollbar-width: thin; }
.iso-scene { display: block; width: max(100%, calc(100% * var(--zoom, 1))); min-width: 0; height: auto; user-select: none; -webkit-tap-highlight-color: transparent; }
.region__note { margin: 0; font-size: 0.75rem; color: var(--muted); }

/* Piezas: anillo de huella visible al pasar, al enfocar con teclado y al seleccionar (forma, no solo color). */
.iso-obj { cursor: pointer; outline: none; }
.iso-ring { fill: rgba(225, 194, 122, 0); stroke: none; transition: fill 0.12s var(--ease); }
.iso-hit { pointer-events: all; }
.iso-obj:hover .iso-ring { fill: rgba(225, 194, 122, 0.16); stroke: rgba(225, 194, 122, 0.7); stroke-width: 1.5; }
.iso-obj:focus-visible .iso-ring { fill: rgba(225, 194, 122, 0.22); stroke: var(--gold-bright); stroke-width: 2.5; stroke-dasharray: 6 4; }
.iso-obj.is-selected .iso-ring { fill: rgba(225, 194, 122, 0.34); stroke: var(--bone); stroke-width: 3.2; }
.iso-obj.is-neighbour { filter: saturate(0.62) brightness(0.9); }
.iso-obj.is-neighbour.is-selected { filter: none; }
.iso-obj.is-acted { animation: iso-acted 0.9s var(--ease) 1; }
@keyframes iso-acted { 0% { filter: brightness(1.45) drop-shadow(0 0 6px rgba(240, 210, 130, 0.9)); } 100% { filter: none; } }

/* Rótulos de distrito y distintivos de estado: siempre encima, con texto (no dependen del color). */
.iso-plate rect { fill: rgba(20, 18, 12, 0.82); stroke: rgba(207, 200, 184, 0.35); }
.iso-plate.is-own rect { stroke: #bda15c; }
.iso-plate text { font: 600 15px var(--serif); fill: var(--bone); }
.iso-badge rect { fill: rgba(20, 18, 12, 0.9); stroke: #8c9a86; stroke-width: 1.2; }
.iso-badge text { font: 600 13px var(--sans); fill: var(--bone); }
.iso-badge--ready rect { fill: #3b3112; stroke: var(--gold-bright); }
.iso-badge--ready text { fill: var(--gold-bright); }
.iso-badge--warn rect { stroke: #c98a4a; stroke-dasharray: 4 2; }
.iso-badge--warn text { fill: #ecc694; }
.iso-badge--lot rect { stroke: var(--gold); stroke-dasharray: 4 3; }
.iso-badge--lot text { fill: var(--gold-bright); }
.iso-badge--selected rect { fill: var(--gold-bright); stroke: var(--ink); }
.iso-badge--selected text { fill: var(--ink); }
.iso-selected-leader { stroke: var(--gold-bright); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.65)); }

/* Barra de mando: retrato pintado, datos y acciones de la selección. */
.region__cmd { margin: 0; padding: 0; border: 0; min-width: 0; }
.cmd { display: grid; grid-template-columns: 168px minmax(0, 1fr) minmax(220px, auto); gap: 0.9rem; align-items: start; padding: 0.75rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: linear-gradient(180deg, #24231a, #1a1912); }
.cmd--idle { grid-template-columns: minmax(0, 1fr); }
.cmd--idle { padding-block: 0.55rem; }
.cmd__choices summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; color: var(--gold-bright); font-size: 0.84rem; }
.cmd__choices[open] summary { margin-bottom: 0.35rem; }
.cmd__quick { justify-self: start; }
.cmd__portrait { width: 168px; height: 126px; object-fit: cover; border-radius: 4px; border: 1px solid rgba(201, 162, 74, 0.5); }
.cmd__body { display: grid; gap: 0.45rem; min-width: 0; }
.cmd__kind { margin: 0; font-size: 0.78rem; color: var(--gold-bright); }
.cmd__title { font: 600 1.3rem/1.15 var(--serif); color: var(--bone); }
.cmd__title:focus { outline: none; }
.cmd__lede, .cmd__note { margin: 0; color: var(--text); font-size: 0.9rem; }
.cmd__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.45rem 1rem; margin: 0; }
.cmd__facts dt { font-size: 0.72rem; color: var(--muted); }
.cmd__facts dd { margin: 0.1rem 0 0; color: var(--bone); display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; }
.cmd__actions { display: grid; gap: 0.45rem; align-content: start; }
.cmd__actions .btn { width: 100%; justify-content: center; }
.cmd__close { justify-self: end; width: auto !important; }
.cmd__hint { margin: 0; font-size: 0.78rem; color: #ecc694; }
.cmd__option { display: grid; gap: 0.35rem; padding: 0.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); }
.cmd__option p { margin: 0; font-size: 0.85rem; }
.cmd__picks { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.cmd__pick { min-height: 44px; padding: 0.35rem 0.7rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--coal); color: var(--bone); font: inherit; font-size: 0.85rem; cursor: pointer; }
.cmd__pick:hover, .cmd__pick:focus-visible { border-color: var(--gold-bright); }
@media (max-width: 860px) {
  .cmd { grid-template-columns: 96px minmax(0, 1fr); }
  .cmd--idle { grid-template-columns: minmax(0, 1fr); }
  .cmd__portrait { width: 96px; height: 72px; }
  .cmd__actions { grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .cmd__close { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .region { padding: 0.5rem; }
  /* El área disponible deja aire real para HUD y navegación fija: al abrir,
     parcela propia, placa y controles caben sin una escena interminable. */
  .region__frame { height: min(48svh, calc(100svh - var(--top-h, 88px) - 82px)); min-height: min(340px, 44svh); }
  .iso-scene { min-width: 0; }
  .region__tools [data-zoom="home"] { font-size: 0.78rem; }
  .region__zoom { min-width: 3.4rem; }
  .region__zoom-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .cmd__facts dd { font-size: 0.95rem; line-height: 1.35; }
  .cmd__facts dd strong { color: var(--gold-bright); }
}
/* Campamento: la región es el primer plano. La misma información de título
   vive en el marco del mapa, así que no se duplica en un hero decorativo. */
.view--campamento .view__head { display: none; }
.view--campamento { gap: 0.55rem; }
.view--campamento .hub { gap: 0.55rem; }
.view--campamento .hub__alert { padding: 0.45rem 0.7rem; font-size: 0.82rem; border-left-width: 3px; }
.view--campamento .region { margin-top: 0; }
@media (max-width: 720px) {
  .game-view { padding: 10px 12px; }
  .view--campamento .hub__alert { line-height: 1.35; }
  .view--campamento .region__bar { gap: 0.3rem; }
  .view--campamento .region__title { font-size: 1.12rem; }
}
@media (min-width: 1000px) {
  /* La ficha queda al costado del mapa en escritorio; en móvil conserva su
     posición inferior natural, por encima de la navegación fija. */
  .region { grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); grid-template-areas: "bar bar" "frame cmd" "note cmd"; align-items: start; }
  .region__bar { grid-area: bar; }
  .region__frame { grid-area: frame; }
  .region__note { grid-area: note; }
  .region__cmd { grid-area: cmd; position: sticky; top: calc(var(--top-h, 0px) + 10px); }
  .region__cmd .cmd { grid-template-columns: minmax(0, 1fr); }
  .region__cmd .cmd__portrait { width: 100%; height: 148px; }
  .region__cmd .cmd__actions { grid-column: auto; }
}
@media (min-width: 1000px) {
  .hub:has(> .region) { grid-template-columns: minmax(0, 1fr); }
  .hub:has(> .region) .places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .iso-ring { transition: none; } .iso-obj.is-acted { animation: none; } }
.iso-xray { pointer-events: none; }

/* ===== Mapa de campaña (07-11): provincias por clan, datos vivos ===== */
.campaign { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .campaign { grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); align-items: start; } .campaign__standings { grid-column: 1 / -1; } }
.explore__flag--live { color: var(--ink); background: var(--gold-bright); }
.campaign__zone { cursor: pointer; }
.campaign__fill { fill-opacity: 0.26; transition: fill-opacity 0.15s var(--ease); }
.campaign__border { fill: none; stroke-width: 6; stroke-opacity: 0.85; stroke-linejoin: round; }
.campaign__zone:hover .campaign__fill { fill-opacity: 0.4; }
.campaign__zone.is-selected .campaign__fill { fill-opacity: 0.46; }
.campaign__zone.is-selected .campaign__border { stroke: var(--bone); stroke-width: 9; stroke-opacity: 1; }
.campaign__crest { font: 700 34px var(--serif); fill: #1b1a14; text-anchor: middle; }
.campaign__mine { fill: none; stroke: var(--gold-bright); stroke-width: 6; stroke-dasharray: 16 10; }
.campaign__name { font: 600 34px var(--serif); fill: var(--bone); text-anchor: middle; paint-order: stroke; stroke: #0b0a08; stroke-width: 8px; stroke-linejoin: round; }
.campaign__list { display: grid; gap: 0.45rem; margin: 0.75rem 0 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.campaign__item { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 0.6rem; width: 100%; padding: 0.55rem 0.7rem; text-align: left; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); color: var(--text); font: inherit; cursor: pointer; }
.campaign__item:hover, .campaign__item:focus-visible { border-color: var(--gold-bright); }
.campaign__item.is-selected { border-color: var(--gold); background: rgba(201, 162, 74, 0.1); }
.campaign__item-body { display: grid; gap: 0.15rem; min-width: 0; }
.campaign__item-body strong { font: 600 1rem var(--serif); color: var(--bone); }
.campaign__item-body small { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; color: var(--muted); font-size: 0.78rem; }
.campaign__status--requiere-validacion { color: #ecc694 !important; }
.campaign__swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0, 0, 0, 0.5); align-self: start; margin-top: 0.25rem; }
.campaign__swatch--lg { width: 26px; height: 26px; }
.campaign__tag { display: inline-block; padding: 0.05rem 0.4rem; border-radius: 999px; background: var(--gold); color: var(--ink); font: 600 0.68rem var(--sans); vertical-align: middle; }
.campaign__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem 1rem; margin: 0 0 0.75rem; }
.campaign__facts dt { font-size: 0.72rem; color: var(--muted); }
.campaign__facts dd { margin: 0.1rem 0 0; color: var(--bone); display: flex; align-items: center; gap: 0.3rem; }
.campaign__sub { font: 600 0.95rem var(--serif); color: var(--bone); margin: 0.25rem 0 0.4rem; }
.campaign__plots { margin: 0 0 0.75rem; padding: 0; list-style: none; display: grid; gap: 0.4rem; }
.campaign__plots li { padding: 0.45rem 0.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--coal); font-size: 0.88rem; }
.campaign__rule { margin: 0 0 0.6rem; padding: 0.55rem 0.7rem; border-left: 3px solid var(--gold); background: rgba(201, 162, 74, 0.08); font-size: 0.88rem; }
.campaign__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.campaign__table th, .campaign__table td { padding: 0.45rem 0.5rem; border-bottom: 1px solid var(--line); text-align: left; }
.campaign__table th[scope="row"] { display: flex; align-items: center; gap: 0.5rem; color: var(--bone); font-weight: 600; }
.campaign__table .num { text-align: right; }
@media (prefers-reduced-motion: reduce) { .campaign__fill { transition: none; } }
.campaign__item-body > .campaign__tag { justify-self: start; }
.campaign__table-wrap { overflow-x: auto; }
.campaign__table { min-width: 420px; }
@media (max-width: 720px) {
  /* Si estás en un lugar secundario (Explorar, Obras, Tierras), «Más» se marca como actual. */
  .gamebar__more > summary.is-current { color: var(--ink); background: var(--gold); }
}

/* Mercader del camino */
.merchant__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; min-width: 520px; }
.merchant__table th, .merchant__table td { padding: 0.5rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.merchant__table .num { text-align: right; }
.merchant__btns { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.4rem; }
.merchant__btns .btn--small { min-height: 36px; padding: 0.3rem 0.6rem; }

/* Lote 2b: ritmo por período en el Almacén */
.nowrap { white-space: nowrap; }
.sbx-balances thead th { hyphens: auto; overflow-wrap: anywhere; }

/* Lote 3: obras con plazo y cola */
.countdown { display: inline-flex; align-items: center; gap: 0.5rem; font-variant-numeric: tabular-nums; }
.countdown__bar { position: relative; width: 6.5rem; height: 0.45rem; border-radius: 999px; background: rgba(242, 237, 225, 0.12); overflow: hidden; }
.countdown__bar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a6d2b, var(--gold-bright)); transition: width 0.9s linear; }
.countdown__time { color: var(--gold-bright); font-weight: 600; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .countdown__bar > span { transition: none; } }
.works-queue { border: 1px solid var(--line-strong, rgba(214, 176, 79, 0.4)); border-radius: var(--radius); padding: 0.75rem 1rem; margin: 0 0 1rem; background: rgba(214, 176, 79, 0.05); }
.works-queue h4 { margin: 0 0 0.5rem; }
.works-queue ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.works-queue li { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Lote 3: crónica, clasificación y clan */
.realm { display: grid; gap: 1rem; }
@media (min-width: 1000px) { .realm { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.chronicle { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; max-height: 34rem; overflow-y: auto; }
.chronicle__item { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.6rem; padding: 0.45rem 0.25rem; border-bottom: 1px solid rgba(242, 237, 225, 0.07); }
.chronicle__item p { margin: 0; }
.chronicle__item.is-mine { background: rgba(214, 176, 79, 0.06); }
.chronicle__item--project-completed p::before { content: '⚒ '; color: var(--gold-bright); }
.chronicle__item--period { color: var(--muted, #b9b2a0); font-style: italic; }
.chronicle__time { font-variant-numeric: tabular-nums; color: var(--gold-bright); font-size: 0.85rem; padding-top: 0.1rem; }
.campaign__table tr.is-mine { background: rgba(214, 176, 79, 0.08); }
.clan { border-top: 4px solid var(--clan, var(--gold-bright)); }
.clan__members, .clan__prod { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.clan__members li { display: flex; flex-direction: column; padding: 0.4rem 0.6rem; border-radius: var(--radius); background: rgba(242, 237, 225, 0.04); }
.clan__members li.is-mine { outline: 1px solid rgba(214, 176, 79, 0.5); }
.clan__prod li { display: flex; align-items: center; gap: 0.4rem; }
.realm__clan { display: flex; align-items: center; gap: 0.35rem; font-weight: 400; color: var(--muted, #b9b2a0); margin-top: 0.15rem; }
.realm .campaign__table th, .realm .campaign__table td { padding-inline: 0.45rem; }
.realm .campaign__table th[scope="row"] { display: table-cell; }
.realm .campaign__table abbr { text-decoration: none; }
@media (max-width: 600px) {
  .realm .campaign__table { min-width: 0; font-size: 0.82rem; }
  .realm .campaign__table thead th { font-size: 0.6rem; letter-spacing: 0.02em; }
  .realm .campaign__table th, .realm .campaign__table td { padding-inline: 0.25rem; }
}

/* Calendario de campaña (lote 4) */
.cal__progress { position: relative; height: 0.55rem; border-radius: 999px; background: rgba(242, 237, 225, 0.12); overflow: hidden; margin: 0.25rem 0 0.5rem; }
.cal__progress > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8a6d2b, var(--gold-bright)); }
.cal__events { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.cal__event { display: grid; grid-template-columns: 3.4rem 1fr; gap: 0.85rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-raised); }
.cal__event.is-held { opacity: 0.72; }
.cal__date { display: grid; place-items: center; align-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--coal); line-height: 1.05; padding: 0.35rem 0; }
.cal__date span { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold); }
.cal__date strong { font-family: var(--serif); font-size: 1.45rem; color: var(--bone); }
.cal__body h3 { margin: 0; font-family: var(--serif); font-size: 1.05rem; }
.cal__body h3 small { color: var(--muted); font-family: var(--sans); font-size: 0.8rem; font-weight: 400; }
.cal__body > p { margin: 0.15rem 0 0.4rem; }
.cal__chip { display: inline-block; font-size: 0.78rem; padding: 0.1rem 0.5rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.cal__chip--open { border-color: var(--line-strong); color: var(--gold-bright); }
.cal__chip--held { color: var(--bone); }
.cal__challenges { list-style: none; margin: 0.55rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.cal__challenge { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.5rem; }
.cal__challenge small { display: block; color: var(--muted); }
.cal__challenge.is-mine strong:first-child { color: var(--gold-bright); }
.cal__none { margin: 0.45rem 0 0; color: var(--muted); font-size: 0.85rem; }
.cal__form { display: grid; gap: 0.65rem; margin: 0.75rem 0; }
.cal__form label { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--muted); min-width: 0; }
.cal__form select { min-height: 44px; width: 100%; min-width: 0; text-overflow: ellipsis; }
/* Revisión 09-11: con el tipo de desafío son 4 piezas; antes la rejilla fija (1fr 1fr auto) desbordaba el panel. */
@media (min-width: 720px) { .cal__form { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); align-items: end; } }

/* Lote 5a: membresía y roles en «Tu clan». */
.clan__tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.35rem; }
.clan__treasury { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 1.05rem; color: var(--bone); }
.clan__name { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.clan__name .campaign__tag { width: auto; }
.clan__stock { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin: 0; padding: 0; list-style: none; color: var(--bone); }
.clan__stock li { display: flex; align-items: center; gap: 0.3rem; }
.clan__form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem 0.75rem; margin: 0.4rem 0 0.2rem; }
.clan__form label { display: grid; gap: 0.2rem; font-size: 0.78rem; color: var(--muted); }
.clan__form input, .clan__form select { min-height: 36px; }
.clan__form input[type="number"] { width: 6.5rem; }
.clan__reason { flex: 1 1 14rem; }
.clan__reason input { width: 100%; }
.realm__side { display: grid; gap: 1rem; align-content: start; }
.clan__tools > * { width: auto; }

/* Lote 6: mapa de campaña del continente (20 provincias). Pergamino sobre mar profundo; clanes en su color heráldico. */
.realm-map__figure { margin: 0; }
.realm-map__svg { display: block; width: 100%; height: auto; border-radius: var(--radius); border: 1px solid var(--line-strong); background: #0d2028; }
.realm-map__shore { fill: none; stroke: #6fa3a8; stroke-opacity: .28; stroke-width: 14; stroke-linejoin: round; }
.realm-map__land { fill: url(#rm-parchment); stroke: #3b2f1c; stroke-width: 2.4; stroke-linejoin: round; }
.realm-map__prov { cursor: pointer; }
.realm-map__fill { fill: #cbb98d; fill-opacity: .72; transition: fill-opacity .15s ease; }
.realm-map__prov.is-free .realm-map__fill { fill: url(#rm-free); fill-opacity: 1; }
.realm-map__prov.is-casa .realm-map__fill { fill-opacity: .78; }
.realm-map__edge { fill: none; stroke: #3b2f1c; stroke-width: 1.3; stroke-opacity: .7; stroke-dasharray: 5 3; pointer-events: none; }
.realm-map__prov:hover .realm-map__fill { fill-opacity: .8; }
.realm-map__prov.is-selected .realm-map__edge { stroke: #fff6dc; stroke-width: 3.2; stroke-dasharray: none; stroke-opacity: 1; }
.realm-map__prov.is-mine .realm-map__edge { stroke: var(--gold-bright); stroke-width: 2.6; stroke-dasharray: none; stroke-opacity: 1; }
.realm-map__river { fill: none; stroke: #4f8fa0; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.realm-map__lane { fill: none; stroke: #e9dcb4; stroke-opacity: .45; stroke-width: 1.6; stroke-dasharray: 2 6; stroke-linecap: round; }
.realm-map__peak { fill: #6b6355; stroke: #2b261d; stroke-width: 1; }
.realm-map__snow { fill: #efe9da; }
.realm-map__peaks, .realm-map__label { pointer-events: none; }
.realm-map__crest { font: 700 15px var(--serif); fill: #1b1a14; text-anchor: middle; }
.realm-map__keep { fill: #f2ede1; stroke: #1b1a14; stroke-width: 1.4; }
.realm-map__name { font: 600 11.5px var(--serif); fill: #1d170d; text-anchor: middle; paint-order: stroke; stroke: #efe2bd; stroke-width: 3.2px; stroke-linejoin: round; }
.realm-map__res { font: 600 8px var(--sans, system-ui); fill: #3b2f1c; text-anchor: middle; letter-spacing: .02em; paint-order: stroke; stroke: #efe2bd; stroke-width: 2.4px; }
.realm-map__comarcas th small { display: block; font-weight: 400; color: var(--muted); font-size: .72rem; }
@media (prefers-reduced-motion: reduce) { .realm-map__fill { transition: none; } }
.cal__loot { margin-top: .6rem; }
.house-plots { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }

/* ===== Lote 11: marcos de interfaz (encuadernación dorada y marco de madera para mapas) =====
   Solo CSS y cuatro SVG propios (assets/ui/frame-*.svg; la CSP solo admite imágenes del mismo origen). Las esquinas son decorativas
   (fondo), no reciben foco ni se leen con lector de pantalla. */
:root {
  --frame-tl: url('assets/ui/frame-tl.svg');
  --frame-tr: url('assets/ui/frame-tr.svg');
  --frame-bl: url('assets/ui/frame-bl.svg');
  --frame-br: url('assets/ui/frame-br.svg');
  --wood-dark: #241a0e;
  --wood: #3a2814;
}
.panel {
  background-image: var(--frame-tl), var(--frame-tr), var(--frame-bl), var(--frame-br), linear-gradient(180deg, var(--panel-raised), var(--panel) 120px);
  background-repeat: no-repeat;
  background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, 0 0;
  box-shadow: inset 0 0 0 4px rgba(11, 10, 8, .55), inset 0 0 0 5px rgba(201, 162, 74, .10), 0 14px 32px -22px #000;
}
.panel::before { inset: 0 40px auto; }
.panel__head { position: relative; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.panel__head::after {
  content: ""; position: absolute; left: 0; bottom: -4px; width: 7px; height: 7px;
  background: var(--gold); transform: rotate(45deg); box-shadow: 0 0 0 2px var(--panel);
}
.panel__head h2 { letter-spacing: .01em; }
.sbx-card, .place, .clan__members > li { box-shadow: inset 0 0 0 1px rgba(11, 10, 8, .5), inset 0 1px 0 rgba(228, 198, 126, .06); }
/* Mapas: marco de madera con filo dorado. */
.realm-map__svg, .region__frame {
  border: 4px solid var(--wood);
  outline: 1px solid var(--gold-deep); outline-offset: -1px;
  box-shadow: 0 0 0 3px var(--wood-dark), 0 0 0 4px rgba(201, 162, 74, .35), 0 18px 40px -24px #000;
}
/* Botón principal: relieve sutil de metal. */
.btn--primary, .btn:not(.btn--ghost) { box-shadow: inset 0 1px 0 rgba(255, 246, 220, .35), inset 0 -1px 0 rgba(0, 0, 0, .25); }
@media (max-width: 520px) {
  .panel { background-position: top 3px left 3px, top 3px right 3px, bottom 3px left 3px, bottom 3px right 3px, 0 0; }
}
@media (forced-colors: active) {
  .panel { background-image: none; }
  .panel__head::after { display: none; }
}
/* Explorar ya muestra datos vivos (mapa, clan, calendario, Game Master): mismo marco que el resto, sobre carbón. */
.explore .panel {
  background-image: var(--frame-tl), var(--frame-tr), var(--frame-bl), var(--frame-br), linear-gradient(180deg, var(--panel-raised), var(--coal) 120px);
  background-repeat: no-repeat;
  background-position: top 5px left 5px, top 5px right 5px, bottom 5px left 5px, bottom 5px right 5px, 0 0;
  border-style: solid;
}
@media (max-width: 520px) {
  .explore .panel { background-position: top 3px left 3px, top 3px right 3px, bottom 3px left 3px, bottom 3px right 3px, 0 0; }
}
/* Revisión 09-11: en móviles de 375 px la nota «lleno en…» del Almacén empujaba 1 px fuera de la pantalla. */
@media (max-width: 420px) { td .nowrap { white-space: normal; } }
.realm-map__fort { font: 700 8px var(--sans, system-ui); fill: #7a2630; text-anchor: middle; letter-spacing: .06em; text-transform: uppercase; paint-order: stroke; stroke: #efe2bd; stroke-width: 2.4px; }
.clan__check { display: flex !important; align-items: center; gap: .35rem; grid-auto-flow: column; }
.is-robbed small { color: var(--gold-bright); }

/* Turnos instantáneos de la demo (09-11). */
.hud__demo { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: .35rem var(--gutter); border-bottom: 1px dashed var(--line-strong); background: rgba(201, 162, 74, .07); font-size: .82rem; }
.hud__demo-label { color: var(--gold-bright); margin-right: auto; }

/* Tutorial guiado (09-11): tarjeta flotante, no modal, que acompaña paso a paso. */
.tutorial { position: fixed; right: 16px; bottom: 16px; z-index: 60; width: min(380px, calc(100vw - 32px)); padding: 16px 18px 14px;
  background: var(--panel-raised); font-family: var(--sans); color: var(--text); border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 12px 36px rgb(0 0 0 / .55); }
.tutorial h2 { margin: 2px 0 6px; font-size: 1.15rem; }
.tutorial p { margin: 0 0 10px; line-height: 1.45; }
.tutorial__bar { height: 4px; background: rgb(255 255 255 / .1); border-radius: 2px; margin-bottom: 10px; overflow: hidden; }
.tutorial__bar span { display: block; height: 100%; background: var(--gold, #c9a45a); transition: width .25s ease; }
.tutorial__nav { display: flex; gap: 8px; flex-wrap: wrap; }
.tutorial__nav [data-tut="close"] { margin-left: auto; }
.tutorial-focus { outline: 3px solid var(--gold, #c9a45a); outline-offset: 4px; border-radius: 6px; animation: tut-pulse 1.4s ease-in-out 3; }
@keyframes tut-pulse { 50% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .tutorial-focus { animation: none; } .tutorial__bar span { transition: none; } }
.gm__present { display: flex; flex-wrap: wrap; gap: 6px 14px; border: 1px solid rgb(255 255 255 / .12); border-radius: 6px; padding: 6px 10px; margin: 0; }
.gm__present legend { font-size: .85rem; padding: 0 4px; }

/* Arte v5 (Higgsfield, 09-11): iconos de sección, estandartes de clan y emblemas de fortificación. */
.art-icon { width: 28px; height: 28px; vertical-align: -7px; margin-right: 6px; object-fit: contain; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .6)); }
.art-icon--sm { width: 22px; height: 22px; vertical-align: -5px; margin-right: 4px; }
.clan__banner { float: right; width: 56px; height: auto; margin: -6px 0 6px 12px; filter: drop-shadow(0 4px 6px rgb(0 0 0 / .5)); }
.warn .art-icon { float: left; margin: 0 8px 4px 0; }

.hud__speed { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-left: auto; }

.access-page { min-height: 100vh; display: grid; place-items: center; background: var(--coal); color: var(--text); font-family: var(--sans); margin: 0; padding: 16px; }
.access { max-width: 420px; text-align: center; background: var(--panel-raised); border: 1px solid var(--line-strong); border-radius: 10px; padding: 28px 24px; }
.access h1 { font-family: var(--serif); margin: 8px 0 12px; }