/* Roma Aeterna — estilos base (mobile-first) */
:root {
  --bg: #120d0a;
  --panel: #1a120c;
  --gold: #c8a84c;
  --gold-dim: #8a7a4c;
  --ink: #f3e9d6;
  --muted: #8a7a5c;
  --line: rgba(200, 164, 76, 0.22);
  --civic: #8b0000;
  --mil: #1a3a6a;
  --eco: #1e4a1e;
  --rel: #5a1a7a;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: Georgia, 'Times New Roman', serif;
  -webkit-font-smoothing: antialiased;
}

#app { min-height: 100%; }
#boot { display: grid; place-items: center; min-height: 100vh; color: var(--muted); }

/* ── Ciudad ───────────────────────────────────────────── */
.city { max-width: 900px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 5;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem;
  padding: 0.5rem; background: rgba(10, 7, 4, 0.92);
  border-bottom: 1px solid var(--line); backdrop-filter: blur(6px);
}
@media (min-width: 560px) { .topbar { grid-template-columns: repeat(6, 1fr); } }
.res { display: flex; align-items: baseline; gap: 0.3rem; padding: 0.2rem 0.35rem; }
.res .ri { font-size: 0.9rem; }
.res b { color: var(--gold); font-variant-numeric: tabular-nums; font-size: 0.95rem; }
.res i { color: var(--muted); font-size: 0.6rem; font-style: normal; }
.scene { position: relative; height: 190px; overflow: hidden; border-bottom: 1px solid var(--line); }
.scene canvas { display: block; width: 100%; height: 100%; }
.scene-info { position: absolute; left: 12px; bottom: 10px; line-height: 1.3; }
.scene-info b { display: block; color: var(--gold); letter-spacing: 0.18em; font-size: 1.1rem; }
.scene-info span { color: var(--muted); font-size: 0.75rem; }
.queue-bar {
  display: flex; gap: 0.4rem; padding: 0.5rem; min-height: 44px; align-items: center;
  background: var(--panel); border-bottom: 1px solid var(--line); overflow-x: auto;
}
.q-empty { color: var(--muted); font-size: 0.8rem; }
.q-slot { display: flex; align-items: center; gap: 0.35rem; flex: 1 0 auto; min-width: 150px; }
.q-ic { font-size: 1rem; }
.q-bar { flex: 1; height: 6px; background: rgba(255,255,255,0.08); border-radius: 4px; overflow: hidden; }
.q-fill { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width 0.2s linear; }
.q-t { color: var(--muted); font-size: 0.65rem; font-variant-numeric: tabular-nums; min-width: 42px; text-align: right; }
.tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.25rem; padding: 0.5rem; }
.tab {
  padding: 0.5rem 0.25rem; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-family: inherit; font-size: 0.78rem; cursor: pointer;
}
.tab.active { border-color: var(--gold); color: var(--gold); background: rgba(200,164,76,0.08); }
.cards { display: grid; gap: 0.6rem; padding: 0.5rem 0.75rem 2rem; }
@media (min-width: 560px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: 0.75rem; }
.card-h { display: flex; gap: 0.5rem; align-items: center; }
.card-h .bi { font-size: 1.5rem; }
.card-h h3 { color: var(--gold); font-size: 1rem; }
.card-h .lv { color: var(--muted); font-size: 0.72rem; }
.stats { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0; }
.stat { font-size: 0.66rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: 0.1rem 0.35rem; }
.stat b { color: var(--ink); }
.desc { color: var(--muted); font-size: 0.74rem; line-height: 1.4; margin-bottom: 0.6rem; }
.up {
  width: 100%; padding: 0.55rem; border: 1px solid var(--gold-dim); border-radius: 8px;
  background: rgba(200,164,76,0.1); color: var(--gold); font-family: inherit; font-size: 0.78rem; cursor: pointer;
}
.up:disabled { color: var(--muted); border-color: var(--line); cursor: default; background: transparent; }
.toast-host { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 20; display: flex; flex-direction: column; gap: 0.4rem; align-items: center; }
.toast {
  background: rgba(10,7,4,0.96); border: 1px solid var(--gold-dim); color: var(--ink);
  padding: 0.5rem 0.9rem; border-radius: 20px; font-size: 0.8rem; opacity: 0; transform: translateY(8px);
  transition: opacity 0.25s, transform 0.25s;
}
.toast.show { opacity: 1; transform: translateY(0); }
.modal-bg { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,0.7); display: grid; place-items: center; padding: 1rem; }
.modal { max-width: 420px; width: 100%; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 14px; padding: 1.25rem; }
.ev-type { color: var(--gold-dim); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.15em; }
.modal h2 { color: var(--gold); margin: 0.25rem 0 0.5rem; }
.modal p { color: var(--ink); font-size: 0.85rem; line-height: 1.5; margin-bottom: 1rem; }
.ev-opts { display: flex; flex-direction: column; gap: 0.5rem; }
.ev-opts button {
  padding: 0.65rem; border: 1px solid var(--gold-dim); border-radius: 8px;
  background: rgba(200,164,76,0.08); color: var(--ink); font-family: inherit; font-size: 0.82rem; cursor: pointer; text-align: left;
}
.ev-opts button:hover { border-color: var(--gold); }

/* ── App shell / navegación ───────────────────────────── */
.app { max-width: 900px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; }
.screen { flex: 1; padding-bottom: 64px; }
.appnav { position: fixed; bottom: 0; left: 0; right: 0; max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(10,7,4,.97); border-top: 1px solid var(--line); }
.appnav button { padding: .65rem .1rem; background: none; border: none; color: var(--muted); font-family: inherit; font-size: .66rem; cursor: pointer; }
.appnav button.active { color: var(--gold); }
.msg { padding: 2rem 1rem; text-align: center; color: var(--muted); }
.msg button, .reward-acts button { margin-top: 1rem; padding: .6rem 1rem; border: 1px solid var(--gold-dim); border-radius: 8px; background: rgba(200,164,76,.1); color: var(--gold); font-family: inherit; cursor: pointer; }

/* ── Cohorte ──────────────────────────────────────────── */
.cohort { padding: .75rem; }
.cohort h2, .gacha h2 { color: var(--gold); margin: .5rem 0; }
.cohort h3 { color: var(--gold-dim); font-size: .9rem; margin: 1rem 0 .4rem; }
.slots { display: grid; gap: .4rem; }
.slot { display: grid; grid-template-columns: 28px 1fr 1fr; gap: .4rem; align-items: center; }
.slot-n { width: 28px; height: 28px; border-radius: 50%; background: rgba(200,164,76,.12); color: var(--gold); display: grid; place-items: center; font-size: .8rem; }
.slot select { padding: .45rem; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: .78rem; }
.battle-btn { width: 100%; margin-top: .75rem; padding: .8rem; border: 1px solid var(--gold); border-radius: 10px; background: rgba(200,164,76,.14); color: var(--gold); font-family: inherit; font-size: .95rem; cursor: pointer; }
.recruit { display: flex; gap: .4rem; flex-wrap: wrap; }
.recruit button { flex: 1; min-width: 120px; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-family: inherit; font-size: .78rem; cursor: pointer; display: flex; flex-direction: column; gap: 2px; }
.recruit button small { color: var(--muted); }
.list { display: grid; gap: .3rem; }
.row { border-left: 3px solid var(--col, var(--gold-dim)); background: var(--panel); border-radius: 6px; padding: .4rem .6rem; font-size: .78rem; display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; }
.row b { color: var(--ink); }
.row .muted, .muted { color: var(--muted); font-size: .72rem; }
.row .asc { color: var(--gold); font-size: .7rem; }

/* ── Gacha ────────────────────────────────────────────── */
.gacha { padding: .75rem; }
.wallet { display: flex; gap: 1rem; justify-content: center; color: var(--gold); margin-bottom: .75rem; font-size: .85rem; }
.banner { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); padding: 1rem; margin-bottom: .75rem; text-align: center; }
.banner h3 { color: var(--gold); }
.banner .rates { font-size: .68rem; color: var(--muted); margin: .4rem 0; }
.banner .pity { font-size: .72rem; color: var(--gold-dim); margin-bottom: .5rem; }
.banner button { padding: .65rem 1.2rem; border: 1px solid var(--gold-dim); border-radius: 8px; background: rgba(200,164,76,.12); color: var(--gold); font-family: inherit; font-size: .85rem; cursor: pointer; }
.result { min-height: 60px; display: grid; place-items: center; }
.pull { text-align: center; padding: 1rem 1.5rem; border-radius: 12px; border: 1px solid var(--gold-dim); background: rgba(200,164,76,.06); color: var(--gold); animation: pop .3s ease; }
.pull.s5 { border-color: #f5c542; box-shadow: 0 0 18px rgba(245,197,66,.4); }
.pull.s4 { border-color: #b07ad6; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.bag { margin-top: 1rem; }
.bag h4 { color: var(--gold-dim); font-size: .82rem; }
.ins-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.ins { font-size: .66rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: .15rem .4rem; }

/* ── Recompensas de batalla ───────────────────────────── */
.reward-bg { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.75); display: grid; place-items: center; padding: 1rem; }
.reward-card { max-width: 380px; width: 100%; background: var(--panel); border: 1px solid var(--gold-dim); border-radius: 14px; padding: 1.5rem; text-align: center; }
.reward-card.victory h2 { color: var(--gold); }
.reward-card.defeat h2 { color: #c55; }
.reward-card p { color: var(--ink); margin: .5rem 0; font-size: .9rem; }
.reward-acts { display: flex; gap: .5rem; justify-content: center; }

/* ── Combate (la vista de batalla vive dentro de la app) ── */
.battle { display: flex; flex-direction: column; }
.b-top { display: flex; justify-content: space-between; padding: .6rem .8rem; border-bottom: 1px solid var(--line); background: rgba(10,7,4,.9); position: sticky; top: 0; z-index: 5; }
.b-top .phase { color: var(--gold); font-size: .85rem; }
.b-top .oratory { color: var(--gold-dim); font-size: .85rem; letter-spacing: .1em; }
.field { display: grid; gap: .5rem; padding: .6rem; }
.team { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ccard { border: 1px solid var(--line); border-left: 4px solid var(--col); border-radius: 8px; background: var(--panel); padding: .5rem; }
.ccard.enemy { border-left-color: #7a1a1a; }
.ccard.current { box-shadow: 0 0 0 2px var(--gold); }
.ccard.dead { opacity: .35; filter: grayscale(1); }
.ccard.targetable { cursor: pointer; box-shadow: 0 0 0 2px #c44; animation: pulse 1s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 4px #c44; } }
.ch { display: flex; justify-content: space-between; align-items: baseline; }
.ch b { color: var(--ink); font-size: .82rem; }
.ch span { color: var(--muted); font-size: .6rem; }
.bars { margin: .35rem 0; display: flex; flex-direction: column; gap: 2px; }
.bar { height: 5px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
.bar > div { height: 100%; transition: width .25s; }
.bar.hp > div { background: linear-gradient(90deg, #6a2, #9c3); }
.bar.moral > div { background: linear-gradient(90deg, #aaa, #fff); }
.bar.bp > div { background: linear-gradient(90deg, #36c, #6af); }
.bar.furor > div { background: linear-gradient(90deg, #a30, #f72); }
.cf { display: flex; justify-content: space-between; align-items: center; }
.hpnum { color: var(--muted); font-size: .6rem; font-variant-numeric: tabular-nums; }
.sts .st { font-size: .7rem; margin-left: 2px; }
.controls { padding: .6rem .8rem; min-height: 70px; }
.turn-of { color: var(--muted); font-size: .78rem; margin-bottom: .4rem; }
.acts { display: flex; gap: .4rem; flex-wrap: wrap; }
.acts button { flex: 1; min-width: 120px; padding: .6rem; border: 1px solid var(--gold-dim); border-radius: 8px; background: rgba(200,164,76,.1); color: var(--gold); font-family: inherit; font-size: .78rem; cursor: pointer; }
.acts button:disabled { opacity: .4; cursor: default; }
.hint { color: var(--gold); font-size: .82rem; }
.hint button { margin-left: .5rem; background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 6px; padding: .2rem .5rem; cursor: pointer; }
.result.victory, .result.defeat { font-size: 1.2rem; padding: 1rem; }
.b-log { margin: .4rem .8rem 2rem; padding: .5rem; border: 1px solid var(--line); border-radius: 8px; background: rgba(0,0,0,.25); height: 130px; overflow-y: auto; font-size: .72rem; color: var(--muted); line-height: 1.5; }

/* ── Senado (M5-A) ────────────────────────────────────── */
.senate { padding: .75rem; }
.senate h2 { color: var(--gold); margin: .5rem 0; }
.senate h3 { color: var(--gold-dim); font-size: .9rem; margin: 1rem 0 .4rem; }
.pol { display: grid; gap: .5rem; margin-bottom: .5rem; }
.polbar { display: grid; grid-template-columns: 90px 1fr 32px; align-items: center; gap: .5rem; font-size: .75rem; color: var(--muted); }
.polbar .pb { height: 8px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; }
.polbar .pb > div { height: 100%; }
.polbar .pop { background: linear-gradient(90deg, #6a2, #9c3); }
.polbar .tyr { background: linear-gradient(90deg, #a30, #d44); }
.polbar b { color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.coup-warn { border: 1px solid #c55; background: rgba(200,80,80,.1); color: #e88; border-radius: 8px; padding: .5rem .7rem; font-size: .78rem; margin-bottom: .5rem; }
.laws { display: grid; gap: .5rem; }
@media (min-width: 560px) { .laws { grid-template-columns: 1fr 1fr; } }
.law { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); padding: .7rem; }
.law.on { border-color: var(--gold-dim); background: rgba(200,164,76,.06); }
.law-h { display: flex; justify-content: space-between; align-items: baseline; }
.law-h b { color: var(--gold); }
.law-h .maj { color: var(--muted); font-size: .65rem; border: 1px solid var(--line); border-radius: 5px; padding: 0 .35rem; }
.law p { color: var(--ink); font-size: .76rem; margin: .35rem 0; }
.law-sub { color: var(--muted); font-size: .68rem; margin-bottom: .5rem; }
.law-btn { width: 100%; padding: .5rem; border: 1px solid var(--gold-dim); border-radius: 8px; background: rgba(200,164,76,.1); color: var(--gold); font-family: inherit; font-size: .76rem; cursor: pointer; }
.law-btn:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: default; }

/* ── Imperio (M5-C) ───────────────────────────────────── */
.imperio { padding: .75rem; }
.imperio h2 { color: var(--gold); margin: .5rem 0; }
.imperio h3 { color: var(--gold-dim); font-size: .9rem; margin: 1rem 0 .4rem; }
.era-card { border: 1px solid var(--gold-dim); border-radius: 10px; background: rgba(200,164,76,.06); padding: .7rem; text-align: center; }
.era-name { color: var(--gold); font-size: 1.1rem; letter-spacing: .05em; }
.era-sub { color: var(--ink); font-size: .76rem; margin: .2rem 0; }
.era-next { color: var(--muted); font-size: .68rem; }
.tech { display: grid; gap: .5rem; }
@media (min-width: 560px) { .tech { grid-template-columns: 1fr 1fr; } }
.techrow { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: .55rem; }
.th { display: flex; justify-content: space-between; align-items: baseline; font-size: .78rem; color: var(--ink); }
.th b { color: var(--gold); }
.tbar { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; margin: .35rem 0; }
.tbar > div { height: 100%; background: linear-gradient(90deg, #5a7, #9c3); transition: width .3s; }
.tdesc { color: var(--muted); font-size: .68rem; }
.omens { display: grid; gap: .5rem; }
@media (min-width: 560px) { .omens { grid-template-columns: 1fr 1fr; } }
.omen { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: .55rem; }
.omen.on { border-color: var(--gold); background: rgba(200,164,76,.08); }
.omen .oh b { color: var(--gold); }
.omen p { color: var(--ink); font-size: .74rem; margin: .3rem 0; }
.omen button { width: 100%; padding: .45rem; border: 1px solid var(--gold-dim); border-radius: 7px; background: rgba(200,164,76,.1); color: var(--gold); font-family: inherit; font-size: .74rem; cursor: pointer; }
.omen button:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: default; }

/* ── Mapa (M5-B) ──────────────────────────────────────── */
.map { padding: .75rem; } .map h2 { color: var(--gold); margin: .5rem 0; }
.map-sum { color: var(--muted); font-size: .8rem; margin-bottom: .6rem; }
.provs { display: grid; gap: .5rem; } @media (min-width:560px){ .provs { grid-template-columns: 1fr 1fr; } }
.prov { border: 1px solid var(--line); border-radius: 9px; background: var(--panel); padding: .6rem; }
.prov.own { border-left: 4px solid var(--gold); } .prov.fog { opacity: .7; border-style: dashed; }
.ph { display: flex; justify-content: space-between; align-items: baseline; } .ph b { color: var(--ink); } .ph span { color: var(--muted); font-size: .7rem; }
.ctrl { display: grid; grid-template-columns: 56px 1fr 30px; align-items: center; gap: .4rem; margin: .4rem 0; font-size: .7rem; color: var(--muted); }
.ctrl .cb { height: 6px; background: rgba(255,255,255,.08); border-radius: 4px; overflow: hidden; } .ctrl .cb > div { height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); } .ctrl b { color: var(--ink); text-align: right; }
.gov { display: block; color: var(--muted); font-size: .72rem; margin-top: .3rem; } .gov select { width: 100%; margin-top: .2rem; padding: .4rem; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 6px; font-family: inherit; font-size: .74rem; }
.prov button { width: 100%; margin-top: .4rem; padding: .45rem; border: 1px solid var(--gold-dim); border-radius: 7px; background: rgba(200,164,76,.1); color: var(--gold); font-family: inherit; font-size: .74rem; cursor: pointer; }
.prov button:disabled { color: var(--muted); border-color: var(--line); background: transparent; cursor: default; }

.fast-btn { background: rgba(200,164,76,.12); border: 1px solid var(--gold-dim); color: var(--gold); border-radius: 6px; padding: .2rem .6rem; font-family: inherit; font-size: .72rem; cursor: pointer; }
.battle-btn.train { border-color: var(--gold-dim); color: var(--gold-dim); background: rgba(200,164,76,.06); font-size: .82rem; margin-top: .4rem; }