/* MERP JOC 1989 v7.0 PÚNICO REAL - ESTILOS SANEADOS KELLS + CANNAS */
@import url('https://fonts.googleapis.com/css2?family=Almendra:ital,wght@0,400;0,700;1,400&family=Cinzel+Decorative:wght@700&family=Metamorphous&display=swap');

:root{
  --fondo:#060504; --fondo2:#12100e; --fondo3:#1a1612;
  --pergamino:#f4eae1; --pergamino2:#e8d9b0; --borde:#8a6d3b; --borde2:#2b1f14; --borde3:#5a4a2f;
  --oro:#d4af37; --oro5:#ffd700; --oro-glow:0 0 12px rgba(212,175,55,.6);
  --rojo-bermellon:#8c1c13; --rojo:#8a1a1a; --verde:#2e7d32;
  --texto:#ede2c4; --texto-tinta:#1a140e;
  --roma:#8c1c13; --cartago:#1d3557; --topado:#ff4444;
}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--borde) var(--fondo)}
body{
  margin:0; padding:20px; background:#0a0a0a;
  background-image:url('../marco-kells.jpg'); background-repeat:no-repeat;
  background-position:center center; background-attachment:fixed; background-size:100% 100%;
  color:var(--texto); font-family:'Almendra',serif; min-height:100vh;
}
.header-merp{
  background:linear-gradient(180deg,#1e1a16 0%,#12100e 100%);
  border-bottom:3px double var(--borde2); padding:14px 22px; display:flex;
  justify-content:space-between; align-items:center; max-width:1150px; margin:0 auto; width:100%;
}
.header-merp h1{margin:0; font-family:'Cinzel Decorative',serif; font-size:1.6rem; letter-spacing:5px}
.header-merp h1 span{color:var(--oro)}
.mesa{display:grid; grid-template-columns:320px 1fr 380px; gap:18px; padding:16px; max-width:1150px; margin:15px auto 0; width:100%}
.columna-izq,.columna-centro,.columna-der{
  background:linear-gradient(180deg,rgba(26,20,16,.96),rgba(15,13,9,.98));
  border:2px solid var(--borde2); padding:14px; box-shadow:0 10px 25px rgba(0,0,0,.7);
}
.selector-heroes{display:flex!important; gap:14px; overflow-x:auto; padding:10px 5px; flex-wrap:nowrap}
.tarjeta-tactil-pj{
  width:105px;height:135px;flex-shrink:0;position:relative;overflow:hidden;
  background:radial-gradient(circle at center, #211910 0%, #0d0a06 100%);
  border:2px solid var(--borde2); cursor:pointer; transition:all.25s;
}
.tarjeta-tactil-pj:hover{transform:scale(1.05) translateY(-3px); border-color:var(--oro5)!important; box-shadow:0 8px 20px rgba(212,175,55,.3)!important}
.activo-heráldico{border:3px solid var(--oro)!important; box-shadow:0 0 20px var(--oro)!important}
.objetivo-target{outline:2px solid #ff3333!important; box-shadow:0 0 18px #a6241b!important}
.ficha{
  background-color:var(--pergamino); color:var(--texto-tinta); padding:24px;
  border:6px double var(--borde2); box-shadow:0 15px 35px rgba(0,0,0,.8);
  min-height:560px; max-height:85vh; overflow-y:auto;
}
.log{
  background:#030302; border:2px solid var(--borde2); padding:16px; margin-top:12px;
  font-size:.85rem; min-height:140px; max-height:220px; overflow-y:auto; color:#d4b483;
}

/* --- PARCHE PÚNICO v7.0 - NUEVO --- */
#bestiario-grid{display:block; width:100%}
.escenario-selector{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; padding:8px; background:rgba(0,0,0,0.4); border:1px solid var(--borde2)}
.escenario-selector button{
  flex:1; min-width:80px; background:linear-gradient(135deg,#1a1612,#12100e);
  border:1px solid var(--borde3); color:var(--texto); padding:8px 6px;
  font-family:'Metamorphous',serif; font-size:.7rem; cursor:pointer; text-transform:uppercase;
}
.escenario-selector button.activo{background:var(--oro); color:#000; font-weight:900; border-color:var(--oro5)}
.escenario-info{
  background:linear-gradient(135deg,rgba(212,175,55,0.1),rgba(0,0,0,0.3));
  border-left:4px solid var(--oro); padding:8px 10px; margin-bottom:10px;
  font-size:.78rem; line-height:1.4;
}
.escenario-info b{color:var(--oro5)}
.faccion-tag{display:inline-block; font-size:.65rem; padding:2px 6px; border-radius:2px; font-weight:900; letter-spacing:1px; margin-right:4px}
.faccion-roma{background:var(--roma); color:#fff}
.faccion-cartago{background:var(--cartago); color:#fff}
.faccion-mercenario{background:#3a2e26; color:var(--oro)}
.tope-historico{font-size:.7rem; color:var(--oro); border:1px dashed var(--borde); padding:2px 5px; display:inline-block; margin-top:4px}
.tope-historico.agotado{background:var(--topado); color:#fff; border-color:var(--topado); animation:parpadeo 1s infinite}
.bestiario-card-punico{
  background:linear-gradient(135deg,#2a1f0f,#1a1207); border:1px solid var(--borde3);
  padding:8px; font-size:.8rem; position:relative; transition:all.2s;
}
.bestiario-card-punico:hover{border-color:var(--oro); transform:translateY(-2px)}
.bestiario-card-punico.topado{opacity:0.4; filter:grayscale(1); pointer-events:none}
.bestiario-card-punico.topado::after{content:'TOPE POLIBIO ALCANZADO'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-15deg); background:var(--topado); color:#fff; font-weight:900; font-size:.7rem; padding:3px 8px; letter-spacing:1px}
.horda-contador{
  position:absolute; top:5px; right:5px; background:var(--oro); color:#000;
  font-weight:900; font-size:.75rem; width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 5px #000;
}
#modal-retrato{display:none; position:fixed; inset:0; background:rgba(0,0,0,.88); z-index:99999; align-items:center; justify-content:center; cursor:zoom-out}
/* Tanda 2/2 - botones y responsive púnico */
.btn-oro{
  background:linear-gradient(135deg,var(--oro),#a17d16); color:#000; border:1px solid #70560f;
  padding:13px 10px; font-weight:900; cursor:pointer; letter-spacing:1.5px;
  text-transform:uppercase; font-family:'Metamorphous',serif;
}
.btn-oro:hover{filter:brightness(1.15); transform:translateY(-1px)}
.btn-tab{background:#2a221c; border:1px solid var(--borde3); color:var(--texto); padding:10px; cursor:pointer}
.btn-tab:hover{background:#3a2e26; border-color:var(--oro)}
.grid-heroes{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.grid-heroes button{background:#1e1814; border:1px solid var(--borde3); color:var(--texto); padding:12px; cursor:pointer}
.grid-heroes button.seleccionado{outline:2px solid var(--oro); background:#3a2e26}
.panel-dano{background:linear-gradient(135deg,#1f1410,#2a1812); border:2px solid var(--rojo); padding:12px; margin-top:12px}
.estado-badge{display:inline-block; font-size:.65rem; padding:3px 8px; border-radius:2px; margin-right:4px; font-weight:900; font-family:'Metamorphous',serif}
.estado-badge.aturdido{background:#d49300; color:#000}
.estado-badge.sangrando{background:var(--rojo-bermellon); color:#fff}
.estado-badge.muerto{background:#3d0505; color:#ff3333}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes pulsoOroElfico{0%,100%{filter:drop-shadow(0 0 2px rgba(212,175,55,.4))}50%{filter:drop-shadow(0 0 12px rgba(212,175,55,.8))}}
@media(max-width:980px){.mesa{grid-template-columns:1fr} .header-merp{position:relative}}