/* EL PALACIO — hoja de estilo. Paleta: mármol oscuro + oro viejo. */
:root{
  --bg:#0c0d10; --panel:#14161b; --panel2:#1a1d24; --line:#262a33;
  --ink:#e8e4d8; --ink-dim:#9a968a; --ink-faint:#84817a;
  --oro:#c8a04b; --oro-claro:#e2c987; --oro-oscuro:#8a6d2f;
  --rojo:#b0524a; --verde:#5a9e6f; --teal:#3e8e7e; --slate:#6b7fa3;
  --ochre:#b0793a; --gris:#7a7a72;
  --pueblo:#5a9e6f; --empresarios:#c8a04b; --partido:#6b7fa3; --prensa:#b0524a;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  font-size:15px; line-height:1.45; min-height:100dvh;
}
#app{max-width:760px;margin:0 auto;padding:12px 12px calc(90px + env(safe-area-inset-bottom))}
.serif{font-family:Georgia,"Times New Roman",serif}
.hidden{display:none!important}
button{
  font:inherit; color:var(--ink); background:var(--panel2);
  border:1px solid var(--line); border-radius:8px; padding:9px 14px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
button:hover{border-color:var(--oro-oscuro)}
button:disabled{opacity:.38;cursor:not-allowed}
button.primary{background:var(--oro-oscuro);border-color:var(--oro);color:#fff;font-weight:600}
button.primary:hover{background:var(--oro)}
button.danger{border-color:var(--rojo)}
small,.small{font-size:12.5px;color:var(--ink-dim)}
h1,h2,h3{font-weight:600}
.gold{color:var(--oro)}
.dim{color:var(--ink-dim)}
.faint{color:var(--ink-faint)}
.red{color:#d08a82} .green{color:var(--verde)}

/* ---------- portada ---------- */
.title-screen{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:7vh;gap:18px}
.title-crest{font-size:44px;line-height:1;filter:grayscale(.15)}
.title-name{font-size:clamp(30px,11vw,52px);letter-spacing:.14em;color:var(--oro);font-weight:400;white-space:nowrap}
.title-rule{width:130px;border:0;border-top:1px solid var(--oro-oscuro);margin:2px auto}
.title-sub{font-size:15px;color:var(--ink-dim);letter-spacing:.06em}
.title-pitch{max-width:520px;color:var(--ink);font-size:16px;line-height:1.6}
.title-pitch em{color:var(--oro-claro);font-style:normal}
.title-date{font-size:13px;color:var(--ink-faint)}
.title-screen .primary{font-size:17px;padding:13px 44px;letter-spacing:.08em}
.title-foot{margin-top:26px;font-size:11.5px;color:var(--ink-faint);max-width:460px;line-height:1.5}
.title-foot a{color:var(--ink-faint)}
.howto{max-width:560px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.howto summary{cursor:pointer;color:var(--oro);letter-spacing:.04em}
.howto p{margin:9px 0;color:var(--ink-dim);font-size:13.5px}
.howto b{color:var(--ink)}

/* ---------- HUD ---------- */
.hud{position:sticky;top:0;z-index:30;background:var(--bg);padding:8px 0 10px}
.hud::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;background:linear-gradient(var(--bg),transparent);pointer-events:none}
.hud-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px}
.hud-title{font-size:15px;letter-spacing:.12em;color:var(--oro)}
.hud-turn{font-size:13px;color:var(--ink-dim)}
.hud-money{font-size:13.5px;text-align:right}
.meters{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.meter{background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 7px 6px}
.meter .lbl{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.03em;color:var(--ink-dim);text-transform:uppercase}
.meter .bar{height:5px;background:#22252d;border-radius:3px;margin-top:4px;overflow:hidden}
.meter .fill{height:100%;border-radius:3px;transition:width .4s}
.heatline{display:flex;gap:10px;align-items:center;margin-top:7px;font-size:12px;color:var(--ink-dim)}
.heatbar{flex:1;height:5px;background:#22252d;border-radius:3px;overflow:hidden}
.heatbar .fill{height:100%;background:linear-gradient(90deg,#7a5a2a,var(--rojo));border-radius:3px;transition:width .4s}

/* ---------- paneles ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px 14px;margin-top:12px}
.panel h3{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:var(--oro);margin-bottom:9px}
.panel h3 .r{float:right;color:var(--ink-faint);text-transform:none;letter-spacing:0;font-weight:400}
.rowline{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px dashed #20232b;font-size:13.5px}
.rowline:last-child{border-bottom:0}

/* territorios */
.terr-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media(min-width:640px){.terr-grid{grid-template-columns:repeat(4,1fr)}}
.terr{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:8px 9px;cursor:pointer;transition:border-color .15s}
.terr:hover{border-color:var(--oro-oscuro)}
.terr.sel{border-color:var(--oro);box-shadow:0 0 0 1px var(--oro-oscuro)}
.terr .tname{font-size:12.5px;font-weight:600;display:flex;justify-content:space-between}
.terr .tmeta{font-size:11.5px;color:var(--ink-faint);margin:2px 0 5px}
.stack{display:flex;height:7px;border-radius:3px;overflow:hidden;background:#22252d}
.stack i{height:100%}
.terr .tfoot{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);margin-top:4px}

/* ramas / nodos */
.tabs{display:flex;gap:6px;margin-top:12px}
.tabs button{flex:1;font-size:12.5px;letter-spacing:.05em;padding:8px 4px;min-height:42px}
.tabs button.on{border-color:var(--oro);color:var(--oro-claro);background:var(--panel)}
.node{display:flex;justify-content:space-between;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;margin-top:7px}
.node .n-name{font-size:13.5px;font-weight:600}
.node .n-desc{font-size:12px;color:var(--ink-dim);margin-top:2px}
.node .n-exp{font-size:12px;color:var(--ochre)}
.node button{font-size:13px;min-height:42px}
.node button:disabled{opacity:.55}
.node.bought{border-color:var(--oro-oscuro)}
.node .n-count{color:var(--oro);font-size:11.5px}

/* barra nacional */
.natbar{margin-top:10px}
.natbar .stack{height:22px;border-radius:6px}
.natlegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;font-size:12px;color:var(--ink-dim)}
.natlegend b{color:var(--ink)}
.dotc{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px;vertical-align:baseline}

/* financistas */
.fin{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:8px;background:var(--panel2)}
.fin .f-head{display:flex;justify-content:space-between;font-size:13.5px;font-weight:600}
.fin .f-sub{font-size:12px;color:var(--ink-dim);margin:3px 0 8px}
.fin .f-actions{display:flex;gap:6px}
.fin .f-actions button{flex:1;font-size:12.5px;padding:7px 4px;min-height:42px}
.fin .f-actions button.on{border-color:var(--oro);color:var(--oro-claro)}
.fin .f-roi{font-size:12px;margin-top:6px}
.fin.withdrawn{opacity:.55}
.roi-bar{height:5px;background:#22252d;border-radius:3px;margin-top:4px;overflow:hidden}
.roi-bar .fill{height:100%;background:var(--oro);border-radius:3px}

/* acciones de gobierno */
.actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.act{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:9px 11px;cursor:pointer}
.act:hover{border-color:var(--oro-oscuro)}
.act.off{opacity:.4;pointer-events:none}
.act .a-name{font-size:13px;font-weight:600}
.act .a-desc{font-size:11.5px;color:var(--ink-dim);margin-top:2px}
.act .a-cost{font-size:12px;color:var(--oro);margin-top:3px}

/* contratos y obras */
.contract-chip{display:inline-block;font-size:10.5px;border:1px solid var(--line);border-radius:4px;padding:1px 6px;margin-right:5px;color:var(--ink-dim);letter-spacing:.03em}
.proj{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:7px 0;border-bottom:1px dashed #20232b;font-size:13px}
.proj:last-child{border-bottom:0}
.proj>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.proj .pbar{flex-basis:60px;flex-shrink:1;min-width:36px;height:5px;background:#22252d;border-radius:3px;overflow:hidden}
.proj .pbar i{display:block;height:100%;background:var(--slate)}
.proj button{font-size:12.5px;padding:4px 9px;min-height:42px;flex-shrink:0}

/* diario */
.log{margin-top:12px}
.log-entry{padding:7px 0;border-bottom:1px dashed #20232b;font-size:13px}
.log-entry .lm{color:var(--ink-faint);font-size:11px;margin-right:8px;white-space:nowrap}
.log-entry.bad{color:#d8a49e}
.log-entry.good{color:#a8cbb2}
.log-entry.gold{color:var(--oro-claro)}

/* avanzar */
.advance-bar{position:fixed;bottom:0;left:0;right:0;z-index:40;background:linear-gradient(transparent,var(--bg) 30%);padding:16px 12px calc(14px + env(safe-area-inset-bottom));display:flex;justify-content:center;gap:10px}
.advance-bar button{min-width:190px;font-size:15.5px;padding:12px 20px}

/* el reloj */
.clock-bar{position:fixed;bottom:0;left:0;right:0;z-index:40;background:linear-gradient(transparent,var(--bg) 30%);padding:12px 12px calc(12px + env(safe-area-inset-bottom));display:flex;justify-content:center;align-items:center;gap:8px}
.clock-bar button{min-width:54px;font-size:15px;padding:9px 0;min-height:44px}
.clock-bar button.on{border-color:var(--oro);color:var(--oro-claro);background:var(--panel)}
.clock-label{font-size:13px;color:var(--ink-dim);min-width:96px;text-align:center;line-height:1.3}
.clock-label b{color:var(--ink)}

/* objetivo */
.objective{background:var(--panel2);border:1px solid var(--oro-oscuro);border-radius:8px;padding:7px 11px;margin-top:8px;font-size:12.5px;line-height:1.5}
.objective b{color:var(--oro-claro)}
.behind{color:#d08a82}
.ontrack{color:#a8cbb2}

/* selección de personaje */
.cand-grid{display:grid;grid-template-columns:1fr;gap:12px;margin-top:6px}
@media(min-width:640px){.cand-grid{grid-template-columns:1fr 1fr}}
.cand-card{background:var(--panel);border:1px solid var(--line);border-top:3px solid var(--cc,#c8a04b);border-radius:10px;padding:14px 15px;display:flex;flex-direction:column;gap:9px}
.cand-head{display:flex;align-items:center;gap:12px}
.cand-img{width:72px;height:72px;border-radius:10px;object-fit:cover;border:1px solid var(--line)}
.cand-fallback{width:72px;height:72px;border-radius:10px;border:1px solid var(--cc,#c8a04b);color:var(--cc,#c8a04b);display:flex;align-items:center;justify-content:center;font-size:34px}
.cand-name{font-size:21px;color:var(--cc,#c8a04b)}
.cand-party{font-size:12.5px;color:var(--ink-dim)}
.cand-bio{font-size:13.5px;color:var(--ink-dim);line-height:1.5}
.cand-list{list-style:none;font-size:12.5px;line-height:1.6}
.cand-card .primary{margin-top:auto;font-size:13.5px;letter-spacing:.04em}

/* alianzas */
.ally-chip{font-size:11px;letter-spacing:.04em;border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--ink-dim)}
.ally-chip.ok{border-color:var(--verde);color:#a8cbb2}
.ally-chip.no{border-color:var(--rojo);color:#d08a82}

/* overlay / eventos */
#overlay{position:fixed;inset:0;background:rgba(5,6,8,.82);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;overflow-y:auto;overscroll-behavior:contain}
.modal{background:var(--panel);border:1px solid var(--oro-oscuro);border-radius:12px;max-width:520px;width:100%;padding:20px 20px 16px;margin:auto;box-shadow:0 12px 60px rgba(0,0,0,.6)}
.modal .m-kicker{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:6px}
.modal h2{font-size:20px;margin-bottom:8px;font-family:Georgia,serif;font-weight:400}
.modal .m-body{font-size:14px;color:var(--ink-dim);line-height:1.55;margin-bottom:14px}
.modal .m-body b{color:var(--ink)}
.modal .m-meta{font-size:12.5px;color:var(--ink-dim);background:var(--panel2);border:1px solid var(--line);border-radius:7px;padding:8px 10px;margin-bottom:12px}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{text-align:left;padding:11px 13px;line-height:1.4}
.choice .c-name{font-weight:600;font-size:14px}
.choice .c-fx{font-size:12px;color:var(--ink-dim);margin-top:2px}
.choice .c-risk{font-size:11.5px;color:var(--ochre);margin-top:1px}

/* elección */
.mini-cand{width:26px;height:26px;border-radius:6px;object-fit:cover;vertical-align:middle;margin-right:7px;border:1px solid var(--line)}
.elect-head{text-align:center;padding:18px 0 8px}
.elect-head h2{font-family:Georgia,serif;font-size:26px;font-weight:400;letter-spacing:.06em}
.res-row{margin-top:8px}
.res-row .r-top{display:flex;justify-content:space-between;font-size:13.5px;margin-bottom:3px}
.res-bar{height:16px;background:#22252d;border-radius:5px;overflow:hidden}
.res-bar i{display:block;height:100%;transition:width 1s ease}
.bignum{font-family:Georgia,serif;font-size:34px;color:var(--oro);text-align:center;margin:10px 0 2px}

/* final */
.end-title{font-family:Georgia,serif;font-size:34px;text-align:center;color:var(--oro);margin:22px 0 4px;letter-spacing:.06em}
.end-sub{text-align:center;color:var(--ink-dim);margin-bottom:14px}
.share-card{font-family:ui-monospace,Consolas,monospace;font-size:13px;white-space:pre-wrap;background:#0f1013;border:1px solid var(--oro-oscuro);border-radius:10px;padding:14px 16px;line-height:1.6}
.share-actions{display:flex;gap:8px;margin-top:10px}
.share-actions button{flex:1}
.epilogo{font-size:14px;color:var(--ink-dim);line-height:1.7}
.epilogo .gov-line{margin-top:12px;color:var(--ink);font-style:italic}

/* toasts */
#toasts{position:fixed;top:calc(10px + env(safe-area-inset-top));left:50%;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:6px;width:min(420px,92vw)}
.toast{background:var(--panel2);border:1px solid var(--oro-oscuro);border-radius:8px;padding:9px 13px;font-size:13px;box-shadow:0 6px 30px rgba(0,0,0,.5);animation:tin .25s ease}
.toast.bad{border-color:var(--rojo)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

@media(max-width:360px){.share-card{font-size:11.5px;padding:12px 10px}}

/* misc */
.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
.tag-oro{color:var(--oro-claro);border:1px solid var(--oro-oscuro);border-radius:4px;font-size:10.5px;padding:1px 6px;letter-spacing:.05em}
.capline{font-size:12px;color:var(--ink-dim);margin-top:6px}
.capline b{color:var(--ochre)}