:root {
  --fondo: #14110c;
  --panel: #241d14;
  --panel-2: #2f2619;
  --borde: #6d5530;
  --bronce: #c9a35a;
  --bronce-claro: #ecd39a;
  --texto: #efe6d2;
  --apagado: #a89a80;
  --rojo: #e2574c;
  --verde: #6fcf7f;
  --titulo: 'Cinzel', Georgia, serif;
  --cuerpo: 'Inter', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fondo); color: var(--texto); font: 14px/1.4 var(--cuerpo); user-select: none; }
canvas#lienzo { position: fixed; inset: 0; display: block; cursor: default; }
.oculto { display: none !important; }
button { font: 600 14px var(--cuerpo); color: var(--texto); background: linear-gradient(#3a2f1f, #2a2116); border: 1px solid var(--borde); border-radius: 6px; padding: 8px 14px; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--bronce); color: var(--bronce-claro); }
button:disabled { opacity: .45; cursor: default; }
button.principal { background: linear-gradient(#b8893d, #8a6326); color: #1d150b; border-color: #e0bf78; }
button.principal:hover:not(:disabled) { color: #000; filter: brightness(1.08); }
input, select { font: 14px var(--cuerpo); color: var(--texto); background: #17120c; border: 1px solid var(--borde); border-radius: 6px; padding: 8px 10px; }
input:focus, select:focus { outline: none; border-color: var(--bronce); }

/* ---------- pantallas ---------- */
.pantalla { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20;
  background: radial-gradient(ellipse at 50% 30%, rgba(60,45,20,.55), rgba(10,8,5,.92)); }
#menu { background: rgba(10,8,5,.7); }
.tarjeta { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: linear-gradient(var(--panel-2), var(--panel)); border: 1px solid var(--borde);
  border-radius: 12px; padding: 28px; box-shadow: 0 20px 60px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,230,170,.08); }
.tarjeta.ancha { width: min(820px, 100%); }
h1, h2 { font-family: var(--titulo); color: var(--bronce-claro); margin: 0 0 8px; letter-spacing: .04em; }
h1 { font-size: 46px; text-align: center; text-shadow: 0 2px 0 #5a3f15, 0 0 30px rgba(230,180,80,.25); }
h2 { font-size: 24px; }
.lema { text-align: center; color: var(--apagado); margin: 0 0 22px; }
.campo { display: flex; flex-direction: column; gap: 6px; color: var(--apagado); margin-bottom: 14px; }
#btn-crear, #btn-ingresar { width: 100%; padding: 12px; font-size: 16px; }
#btn-registrar { width: 100%; padding: 10px; margin-top: 8px; }
#acceso .sub { text-align: center; color: var(--apagado); margin: 0 0 16px; font-size: 13px; }
.hola { text-align: center; color: var(--apagado); margin: 0 0 16px; }
.hola b { color: var(--bronce-claro); }
#btn-logout { color: var(--bronce); cursor: pointer; margin-left: 4px; }
#btn-logout:hover { color: var(--bronce-claro); }
.stats { text-align: center; color: var(--apagado); font-size: 12px; margin: -8px 0 16px; }
.unirse { display: flex; gap: 8px; margin-top: 12px; }
.unirse input { flex: 1; text-transform: uppercase; letter-spacing: .3em; text-align: center; font-weight: 700; }
.error { color: var(--rojo); min-height: 20px; margin: 10px 0 0; }
.ayuda { margin-top: 14px; color: var(--apagado); }
.ayuda summary { cursor: pointer; color: var(--bronce); }
.ayuda ul { padding-left: 18px; margin: 8px 0 0; }
.ayuda li { margin: 4px 0; }

.sala-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
#sala-codigo { color: #fff; letter-spacing: .2em; background: #17120c; border: 1px solid var(--borde); border-radius: 6px; padding: 2px 10px; }
#sala-jugadores { display: grid; gap: 8px; }
.fila-jug { display: grid; grid-template-columns: 18px 1fr 130px 130px 120px; gap: 10px; align-items: center; background: rgba(0,0,0,.22); border: 1px solid rgba(109,85,48,.5); border-radius: 8px; padding: 8px 12px; }
.fila-jug .color { width: 18px; height: 18px; border-radius: 4px; cursor: pointer; border: 2px solid rgba(255,255,255,.3); }
.fila-jug .nombre { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-jug .nombre small { color: var(--apagado); font-weight: 400; margin-left: 6px; }
.fila-jug .desconectado { color: var(--rojo); }
.fila-jug select { width: 100%; padding: 6px; }
.fila-jug .fijo { color: var(--apagado); padding: 6px; }
.vacio { color: var(--apagado); font-style: italic; padding: 6px 12px; }
#panteones-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0; }
.panteon { background: rgba(0,0,0,.2); border: 1px solid rgba(109,85,48,.5); border-radius: 8px; padding: 10px 12px; color: var(--apagado); font-size: 13px; }
.panteon b { color: var(--bronce-claro); font-family: var(--titulo); font-size: 15px; display: block; margin-bottom: 2px; }
#sala-chat { border: 1px solid rgba(109,85,48,.5); border-radius: 8px; overflow: hidden; }
#sala-chat-log { height: 110px; overflow-y: auto; padding: 8px 10px; background: rgba(0,0,0,.25); font-size: 13px; user-select: text; }
#sala-chat-in { width: 100%; border: 0; border-top: 1px solid rgba(109,85,48,.5); border-radius: 0; }
.botones { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 16px; }
#sala-espera { color: var(--apagado); font-size: 13px; text-align: center; flex: 1; }
.teclas { width: 100%; border-collapse: collapse; margin: 8px 0; font-size: 13px; }
.teclas td { padding: 5px 4px; border-bottom: 1px solid rgba(109,85,48,.3); }
.teclas td:first-child { color: var(--bronce-claro); width: 52%; }
#fin-tabla { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
#fin-tabla th, #fin-tabla td { padding: 6px 8px; text-align: right; border-bottom: 1px solid rgba(109,85,48,.3); }
#fin-tabla th:first-child, #fin-tabla td:first-child { text-align: left; }
#fin-tabla th { color: var(--apagado); font-weight: 600; }
#fin-sub { color: var(--apagado); margin: 0; }

/* ---------- HUD ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud > * { pointer-events: auto; }
#barra-sup { position: absolute; top: 0; left: 0; right: 0; height: 44px; display: flex; align-items: center; gap: 18px; padding: 0 12px;
  background: linear-gradient(rgba(36,29,20,.97), rgba(28,22,15,.94)); border-bottom: 1px solid var(--borde); box-shadow: 0 2px 12px rgba(0,0,0,.4); }
#recursos { display: flex; gap: 16px; }
.rec { display: flex; align-items: center; gap: 6px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 64px; }
.rec svg { width: 20px; height: 20px; }
.rec.falta { color: var(--rojo); }
#edad { font-family: var(--titulo); color: var(--bronce-claro); margin-left: auto; white-space: nowrap; }
#reloj { color: var(--apagado); font-variant-numeric: tabular-nums; }
#ping { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
#ping.bueno { color: #6fcf7a; } #ping.medio { color: #e8c15a; } #ping.malo { color: #ef6a5a; }
#poderes { display: flex; gap: 6px; }
.poder { position: relative; width: 36px; height: 36px; padding: 0; display: grid; place-items: center; }
.poder svg { width: 22px; height: 22px; }
.poder .cd { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.6); border-radius: 6px; font-size: 12px; font-weight: 700; }
.poder.activo { border-color: #ffe08a; box-shadow: 0 0 10px rgba(255,220,120,.6); }
#btn-menu { padding: 6px 12px; }

#avisos { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.aviso { background: rgba(20,16,10,.85); border: 1px solid var(--borde); color: var(--bronce-claro); padding: 6px 14px; border-radius: 6px; font-weight: 600; animation: aparecer .2s ease-out; }
.aviso.malo { color: #ffb4a8; border-color: #8a3a2f; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-6px); } }

#chat-log { position: absolute; left: 12px; bottom: 192px; width: 380px; display: flex; flex-direction: column; gap: 3px; pointer-events: none; }
#chat-log div { background: rgba(10,8,5,.6); padding: 3px 8px; border-radius: 4px; font-size: 13px; width: fit-content; max-width: 100%; text-shadow: 0 1px 1px #000; }
#chat-in { position: absolute; left: 12px; bottom: 160px; width: 380px; }

#panel { position: absolute; left: 0; right: 0; bottom: 0; height: 150px; display: grid; grid-template-columns: 280px 1fr 390px; gap: 10px; padding: 10px;
  background: linear-gradient(rgba(36,29,20,.96), rgba(24,19,13,.98)); border-top: 1px solid var(--borde); box-shadow: 0 -2px 14px rgba(0,0,0,.45); }
#minimapa-caja { display: grid; place-items: center; background: #0d0b07; border: 1px solid #4b3b22; border-radius: 6px; }
#minimapa { cursor: crosshair; }
#info { overflow: hidden; display: flex; gap: 12px; align-items: flex-start; padding: 4px; }
#info .retrato { width: 72px; height: 72px; flex: none; background: radial-gradient(#3a3020, #1a140c); border: 1px solid var(--borde); border-radius: 8px; display: grid; place-items: center; }
#info .retrato img { width: 66px; height: 66px; image-rendering: auto; }
#info .datos { flex: 1; min-width: 0; }
#info h3 { margin: 0 0 4px; font-family: var(--titulo); color: var(--bronce-claro); font-size: 17px; }
#info .sub { color: var(--apagado); font-size: 12px; }
#info .vida { height: 8px; background: #3a1d1a; border-radius: 4px; overflow: hidden; margin: 6px 0; max-width: 220px; }
#info .vida div { height: 100%; background: linear-gradient(#6fdc80, #3fa152); }
#info .grupo { display: flex; flex-wrap: wrap; gap: 4px; }
#info .mini { position: relative; width: 40px; height: 40px; background: #1a140c; border: 1px solid #4b3b22; border-radius: 5px; cursor: pointer; }
#info .mini img { width: 38px; height: 38px; }
#info .mini span { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; text-shadow: 0 1px 2px #000; }
#info .cola { display: flex; gap: 4px; margin-top: 6px; }
#info .cola .mini .barra { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--bronce); }
#info .stats { display: flex; gap: 12px; color: var(--apagado); font-size: 12px; margin-top: 4px; }
#acciones { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 52px; gap: 5px; align-content: start; }
.accion { position: relative; padding: 0; display: grid; place-items: center; }
.accion img { width: 44px; height: 44px; }
.accion svg { width: 28px; height: 28px; }
.accion .tecla { position: absolute; left: 3px; top: 1px; font-size: 10px; color: var(--bronce); font-weight: 700; }
.accion.bloq { opacity: .4; }
.accion.sin { filter: grayscale(.6); }
.accion.sin::after { content: ''; position: absolute; inset: 0; border-radius: 6px; box-shadow: inset 0 0 0 2px rgba(226,87,76,.6); }
#tooltip { position: absolute; max-width: 280px; background: rgba(18,14,9,.97); border: 1px solid var(--bronce); border-radius: 6px; padding: 8px 10px; font-size: 13px; pointer-events: none; z-index: 30; }
#tooltip b { color: var(--bronce-claro); }
#tooltip .costo { display: flex; gap: 10px; margin: 4px 0; font-weight: 700; }
#tooltip .costo span { display: flex; align-items: center; gap: 3px; }
#tooltip .costo svg { width: 14px; height: 14px; }
#tooltip .costo .falta { color: var(--rojo); }
#tooltip .desc { color: var(--apagado); }

#conexion { position: fixed; top: 50px; left: 50%; transform: translateX(-50%); z-index: 40; background: #5a1f19; border: 1px solid var(--rojo); padding: 8px 16px; border-radius: 6px; }

@media (max-width: 1100px) {
  #panel { grid-template-columns: 200px 1fr 300px; height: 140px; }
  #minimapa { width: 190px; height: 95px; }
  #acciones { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 46px; }
  .rec { min-width: 50px; }
  #edad { display: none; }
}
@media (max-width: 640px) {
  .fila-jug { grid-template-columns: 18px 1fr; }
  .fila-jug select, .fila-jug .fijo { grid-column: 2; }
  #panteones-info { grid-template-columns: 1fr; }
}

#sala-modo { display: grid; gap: 6px; margin-bottom: 12px; }
.modo { display: flex; gap: 8px; align-items: center; background: rgba(0,0,0,.2); border: 1px solid rgba(109,85,48,.5); border-radius: 8px; padding: 8px 12px; cursor: pointer; color: var(--apagado); }
.modo.elegido { border-color: var(--bronce); color: var(--texto); }
#btn-pantalla { padding: 6px 10px; font-size: 16px; }
#misiones { position: absolute; top: 54px; left: 12px; width: 300px; background: rgba(24,19,13,.9); border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; font-size: 13px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
#misiones h4 { margin: 0 0 2px; font-family: var(--titulo); color: var(--bronce-claro); font-size: 15px; cursor: pointer; display: flex; justify-content: space-between; }
#misiones .intro { color: var(--apagado); font-size: 12px; margin-bottom: 6px; }
#misiones .mis { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; padding: 3px 0; }
#misiones .mis .ok { color: var(--verde); }
#misiones .mis.hecha span:nth-child(2) { text-decoration: line-through; color: var(--apagado); }
#misiones .barra { grid-column: 2 / 4; height: 4px; background: #3a2d1c; border-radius: 2px; overflow: hidden; }
#misiones .barra div { height: 100%; background: var(--bronce); }
#misiones .premio { color: var(--apagado); font-size: 11px; display: flex; gap: 4px; align-items: center; }
#misiones .premio svg { width: 12px; height: 12px; }
#misiones.chico .cuerpo { display: none; }

#fin-tabs { display: flex; gap: 6px; margin: 14px 0 6px; flex-wrap: wrap; }
#fin-tabs button { padding: 5px 10px; font-size: 13px; }
#fin-tabs button.activo { border-color: var(--bronce); color: var(--bronce-claro); }
#grafico { width: 100%; height: auto; background: rgba(0,0,0,.25); border: 1px solid rgba(109,85,48,.5); border-radius: 8px; }
#evento { padding: 4px 10px; border-radius: 6px; border: 1px solid var(--borde); background: rgba(0,0,0,.3); font-size: 13px; font-weight: 600; white-space: nowrap; }
#evento.malo { color: #ffb4a8; border-color: #8a3a2f; }
#evento.bueno { color: #b9f2c2; border-color: #3f7a4a; }
#reloj .astro { margin-right: 4px; }

.fila-jug.ia .nombre { display: flex; align-items: center; gap: 6px; }
.fila-jug.ia .nombre select { width: auto; padding: 3px 6px; font-size: 12px; }
.fila-jug .quitar { padding: 2px 7px; font-size: 12px; }
.agregar-ia { display: flex; align-items: center; gap: 8px; font-style: normal; }
.agregar-ia button { padding: 4px 10px; font-size: 13px; }
.agregar-ia select { padding: 4px 6px; font-size: 13px; }

.historia { width: min(900px, 100%); }
.historia h2 { font-size: 30px; margin-bottom: 2px; }
.historia .lema { text-align: left; margin: 0 0 14px; font-family: var(--titulo); color: var(--bronce); }
.historia p { color: var(--texto); line-height: 1.6; margin: 0 0 10px; }
.historia h3 { font-family: var(--titulo); color: var(--bronce-claro); margin: 18px 0 8px; font-size: 18px; }
.historia .grilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.historia .ficha { background: rgba(0,0,0,.22); border: 1px solid rgba(109,85,48,.5); border-radius: 8px; padding: 8px 10px; display: flex; gap: 10px; }
.historia .ficha img { width: 48px; height: 48px; flex: none; }
.historia .ficha b { color: var(--bronce-claro); display: block; }
.historia .ficha i { color: var(--apagado); font-size: 12.5px; display: block; margin-top: 2px; }
.historia .ficha small { color: #b9d7a0; font-size: 12px; }
.panteon i { display: block; margin-top: 4px; color: var(--apagado); font-size: 12px; }
#tooltip i { color: #cbb894; display: block; margin-top: 4px; }

#sala-opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 12px; margin-bottom: 12px; padding: 10px 12px; background: rgba(0,0,0,.2); border: 1px solid rgba(109,85,48,.5); border-radius: 8px; }
#sala-opciones label { display: flex; flex-direction: column; gap: 3px; color: var(--apagado); font-size: 12px; }
#sala-opciones select { padding: 5px 6px; font-size: 13px; }
#sala-opciones b { color: var(--texto); font-size: 13px; }
#sala-opciones .op-desc { grid-column: 1 / -1; color: var(--apagado); font-size: 12px; font-style: italic; }
@media (max-width: 640px) { #sala-opciones { grid-template-columns: 1fr 1fr; } }
#paz { padding: 4px 10px; border-radius: 6px; border: 1px solid #3f7a4a; color: #b9f2c2; background: rgba(0,0,0,.3); font-size: 13px; font-weight: 600; }

#pausa { position: fixed; inset: 0; z-index: 18; display: grid; place-items: center; background: rgba(8,6,3,.55); }
#pausa > div { display: flex; flex-direction: column; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 22px 36px; }
#pausa b { font-family: var(--titulo); font-size: 30px; color: var(--bronce-claro); }
#pausa span { color: var(--apagado); }
#btn-pausa { padding: 6px 10px; }
#tributo { margin-bottom: 10px; }
#tributo h3 { font-family: var(--titulo); color: var(--bronce-claro); font-size: 15px; margin: 0 0 6px; }
#tributo .aliado { display: flex; align-items: center; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
#tributo .aliado span { min-width: 110px; font-weight: 700; }
#tributo button { padding: 4px 8px; font-size: 12px; }
#chat-log .equipo { border-left: 3px solid #6fcf7f; }
body.espectador #acciones, body.espectador #poderes, body.espectador #recursos, body.espectador #btn-pausa { visibility: hidden; }

/* Campaña: capítulos para elegir en la sala. */
.capitulos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 4px; }
.capitulo { text-align: left; padding: 8px 10px; font-size: 13px; line-height: 1.25; }
.capitulo small { display: block; color: var(--apagado); font-size: 11px; margin-top: 2px; }
.capitulo.elegido { border-color: var(--bronce-claro); box-shadow: 0 0 0 1px var(--bronce-claro) inset; }
.capitulo:disabled { opacity: .55; cursor: default; }
@media (max-width: 700px) { .capitulos { grid-template-columns: 1fr 1fr; } }


/* ---------- campaña: narrador, metas y secundarios ---------- */
#narracion { position: fixed; left: 50%; bottom: 14%; transform: translate(-50%, 12px); max-width: min(760px, 86vw);
  text-align: center; font-family: var(--titulo); font-size: 19px; line-height: 1.4; color: #f4e4bf;
  background: linear-gradient(rgba(18,13,7,.86), rgba(10,7,4,.9)); border: 1px solid var(--borde);
  border-left: 3px solid var(--bronce); border-right: 3px solid var(--bronce); border-radius: 10px;
  padding: 14px 26px; box-shadow: 0 12px 40px rgba(0,0,0,.55); z-index: 30; pointer-events: none;
  opacity: 0; transition: opacity .6s ease, transform .6s ease; }
#narracion.ver { opacity: 1; transform: translate(-50%, 0); }
.mis.futura { opacity: .5; }
.mis.sec { font-size: 12px; }
.mis.sec .ok { color: var(--bronce-claro); }
.sec-tit { margin-top: 8px !important; color: var(--bronce) !important; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }

/* ---------- cinemática de apertura ---------- */
#cine { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 12vh; pointer-events: auto; background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 70%, rgba(0,0,0,.55)); }
#cine.oculto { display: none; }
#cine .sub { max-width: min(760px, 86vw); text-align: center; font-family: var(--titulo); font-size: 22px; line-height: 1.45;
  color: #f6e8c6; text-shadow: 0 2px 10px rgba(0,0,0,.9); opacity: 0; transition: opacity .8s ease; }
#cine .sub.ver { opacity: 1; }
#cine .saltar { position: fixed; right: 18px; bottom: 18px; pointer-events: auto; }