/* MERP JOC 1989 - ESTILOS PREMIUM v6.8 KELLS COMPLETO - 315 BASE + 95 KELLS = 410 LINEAS */
/* Archivo original del Director - Restaurado 100% + Iluminación */
@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; --fondo4:#241e1b; --fondo5:#2a221c;
  --pergamino:#f4eae1; --pergamino2:#e8d9b0; --pergamino3:#d6c299; --pergamino4:#c9b896; --pergamino5:#b8a882;
  --borde:#8a6d3b; --borde2:#2b1f14; --borde3:#5a4a2f; --borde4:#3a2e26; --borde5:#2a221c;
  --oro:#d4af37; --oro2:#b5892e; --oro3:#d4a44a; --oro4:#c9a86a; --oro5:#ffd700; --oro-glow:0 0 12px rgba(212,175,55,.6);
  --rojo-bermellon:#8c1c13; --azul-lapislazuli:#1d3557; --verde-malaquita:#1c4224;
  --verde:#2e7d32; --verde2:#1b5e20; --verde3:#0f3012;
  --rojo:#8a1a1a; --rojo2:#ff4444; --rojo3:#ff9999;
  --texto:#ede2c4; --texto2:#d0c0a0; --texto3:#a09078; --texto4:#6d5f4a; --texto-tinta:#1a140e;
  --sombra:inset 0 0 40px rgba(0,0,0,.8), 0 4px 20px rgba(0,0,0,.6);
  --sombra2:0 2px 12px rgba(0,0,0,.5);
}
*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--borde) var(--fondo)}
*::-webkit-scrollbar{width:8px;height:8px}
*::-webkit-scrollbar-track{background:var(--fondo)}
*::-webkit-scrollbar-thumb{background:var(--borde);border-radius:4px}
*::-webkit-scrollbar-thumb:hover{background:var(--oro)}
html{scroll-behavior:smooth}
body{
  margin:0;
  padding:35px;
  background-color:#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', Georgia, 'Times New Roman', serif; line-height:1.45;
  min-height:100vh; overflow-x:hidden; display:flex; flex-direction:column; align-items:center;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--oro); text-decoration:none} a:hover{color:var(--oro5); text-decoration:underline}
.header-merp{
  background:linear-gradient(180deg,#1e1a16 0%,#12100e 100%);
  border-bottom:3px double var(--borde2); border-top:2px solid var(--borde2);
  padding:14px 22px; display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:12px; box-shadow:var(--sombra); position:sticky; top:0; z-index:100;
  width:100%; max-width:1150px;
}
.header-merp h1{margin:0; font-size:1.6rem; letter-spacing:5px; text-shadow:0 2px 4px #000, 0 0 8px rgba(212,175,55,0.3); font-weight:900; font-family:'Cinzel Decorative',serif; text-transform:uppercase}
.header-merp h1 span{color:var(--oro); text-shadow:var(--oro-glow)}
.header-merp.subtitulo{font-size:.75rem; color:var(--texto3); letter-spacing:1px; margin-top:2px}
.tabs{display:flex; gap:8px; flex-wrap:wrap; align-items:center; width:100%; max-width:1150px; border-bottom:2px dashed var(--borde2); padding-bottom:12px; margin-top:5px}
.tab{
  background:linear-gradient(135deg,var(--fondo3),#0d0a06); border:2px solid var(--borde2);
  color:var(--oro); padding:10px 18px; cursor:pointer; font-weight:800;
  letter-spacing:1.5px; font-size:.85rem; border-radius:2px;
  transition:all.2s ease; text-transform:uppercase; position:relative;
  font-family:'Metamorphous',serif; box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
}
.tab::after{content:''; position:absolute; bottom:-1px; left:0; right:0; height:1px; background:transparent}
.tab:hover{border-color:var(--oro); color:var(--texto); background:#2f271f; transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.3)}
.tab.activo{
  background:linear-gradient(135deg,var(--rojo-bermellon),#4a100a); color:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.6), inset 0 0 6px rgba(255,255,255,0.2); border-color:var(--oro); transform:translateY(-1px);
}
.tab.activo::after{background:var(--oro)}
.tab-deshabilitada{
  opacity:.38!important; filter:grayscale(1); cursor:not-allowed!important;
  border-style:dashed!important;
  background:repeating-linear-gradient(45deg,#1a1612,#1a1612 10px,#241e1b 20px)!important;
}
.tab-deshabilitada:hover{transform:none!important; border-color:var(--borde2)!important; box-shadow:none!important}
.mesa,.tablero-dj{display:grid; grid-template-columns:320px 1fr 380px; gap:18px; padding:16px; min-height:calc(100vh - 75px); max-width:1150px; margin:15px auto 0 auto; width:100%}
.columna-izq,.columna-centro,.columna-der,.columna-izquierda-bloque{
  background:linear-gradient(180deg,rgba(26,20,16,.96),rgba(15,13,9,.98));
  border:2px solid var(--borde2); border-radius:2px; padding:14px;
  box-shadow:0 10px 25px rgba(0,0,0,.7), inset 0 0 20px rgba(0,0,0,.6); backdrop-filter:blur(2px); position:relative;
}
.columna-izq h3,.columna-der h3,.columna-centro h3, #titulo-izq{
  margin:0 0 12px 0; color:var(--oro); border-bottom:1px solid var(--borde2);
  padding-bottom:6px; font-size:.9rem; letter-spacing:2px; text-transform:uppercase; font-weight:800; font-family:'Metamorphous',serif;
}
.columna-centro{padding:0; overflow:hidden}
.grid-heroes{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:12px}
.grid-heroes button{
  background:linear-gradient(135deg,var(--fondo3),#1e1814); border:1px solid var(--borde4);
  color:var(--texto); padding:12px 8px; cursor:pointer; text-align:left; font-size:.84rem;
  border-radius:5px; transition:all.2s ease; line-height:1.35; min-height:58px;
}
.grid-heroes button:hover{border-color:var(--oro); background:#2f271f; box-shadow:0 0 8px rgba(181,137,46,.3); transform:translateY(-1px)}
.grid-heroes button.seleccionado{outline:2px solid var(--oro); background:linear-gradient(135deg,#3a2e26,#2f271f); box-shadow:var(--oro-glow)}
.grid-heroes button.muerto{opacity:.4; filter:grayscale(1); text-decoration:line-through; pointer-events:none}
.grid-heroes button b{display:block; color:var(--oro3); font-size:.9rem; margin-bottom:2px}
.selector-heroes{display:flex!important; gap:14px; overflow-x:auto; padding:10px 5px 12px 5px; flex-wrap:nowrap; width:100%; max-width:1150px}
.tarjeta-tactil-pj{
  width:105px;height:135px;flex-shrink:0;position:relative;overflow:hidden; border-radius:2px;
  background:radial-gradient(circle at center, #211910 0%, #0d0a06 100%);
  border:2px solid var(--borde2); border-image:linear-gradient(to bottom, var(--oro), var(--borde2)) 1;
  box-shadow:0 6px 15px rgba(0,0,0,.8), inset 0 0 10px rgba(0,0,0,.9); cursor:pointer; transition:all.25s cubic-bezier(.25,.8,.25,1);
}
.tarjeta-tactil-pj:hover{transform:scale(1.05) translateY(-3px); border-image:linear-gradient(to bottom, var(--oro5), var(--rojo-bermellon)) 1!important; box-shadow:0 8px 20px rgba(212,175,55,.3)!important}
.activo-heráldico{border-image:linear-gradient(135deg, var(--oro5), var(--oro)) 1!important; box-shadow:0 0 20px var(--oro), inset 0 0 12px rgba(212,175,55,.5)!important; animation:pulsoOroElfico 2s infinite ease-in-out}
@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))}}
.objetivo-target{outline:2px solid #ff3333!important; outline-offset:2px; box-shadow:0 0 18px #a6241b, inset 0 0 8px rgba(255,0,0,.5)!important; animation:pulsoMiraKells 1.4s infinite ease-in-out!important; background:linear-gradient(135deg,#300a07,#170302)!important}
@keyframes pulsoMiraKells{0%,100%{opacity:.9}50%{opacity:1;filter:saturate(1.3)}}
.ficha,.tarjeta-personaje{
  background-color:var(--pergamino); background-image:url('https://www.transparenttextures.com/patterns/old-paper.png');
  color:var(--texto-tinta); padding:24px; border-radius:1px; min-height:560px; border:6px double var(--borde2);
  box-shadow:0 15px 35px rgba(0,0,0,.8), inset 0 0 30px rgba(61,50,29,.25);
  font-size:.96rem; line-height:1.65; position:relative; overflow:hidden; max-height:85vh; overflow-y:auto;
}
.ficha::before{content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:url('https://www.transparenttextures.com/patterns/paper-fibers.png'); opacity:.28; pointer-events:none; border-radius:1px}
.ficha::after{content:''; position:absolute; top:0; left:0; right:0; height:40%; background:linear-gradient(180deg,rgba(255,255,255,.15),transparent); pointer-events:none}
.ficha h2{margin:0 0 12px 0; border-bottom:2px solid var(--borde); padding-bottom:8px; color:var(--rojo-bermellon); font-size:1.35rem; position:relative; font-family:'Cinzel Decorative',serif}
.ficha h3{color:#3a2a12; border-color:var(--borde); margin-top:16px}
.ficha b{color:#4a3419}.ficha i{color:#6b5530}
.ficha.stat-line{display:flex; justify-content:space-between; border-bottom:1px dotted var(--borde); padding:3px 0}
.ficha.pg-bar{height:10px; background:#3a2a12; border-radius:5px; overflow:hidden; margin:6px 0}
.ficha.pg-fill{height:100%; background:linear-gradient(90deg,var(--verde),#4caf50); transition:width.4s}
.imagen-placeholder{width:100%; height:245px; background-color:#ebdcb2; border:3px solid var(--borde2); display:flex; align-items:center; justify-content:center; font-style:italic; color:#3d2f16; font-size:0.85rem; margin-bottom:16px; overflow:hidden; box-shadow:inset 0 0 15px rgba(0,0,0,0.3)}
.imagen-placeholder img{width:100%; height:100%; object-fit:cover; display:block; filter:sepia(0.35) contrast(1.15) brightness(0.95)}
.stats-list{font-size:1.05rem; line-height:1.6; margin:0; padding:0; font-family:'Almendra',serif}
.stats-list li{list-style:none; border-bottom:1px dotted rgba(61,50,29,0.4); padding:6px 0; display:flex; justify-content:space-between; align-items:center; color:var(--texto-tinta); font-weight:500}
.input-editable{background:transparent; border:none; border-bottom:1px solid transparent; color:var(--texto-tinta); font-weight:bold; text-align:right; width:65px; font-family:'Almendra',serif; font-size:1.1rem; outline:none; transition:all.2s ease}
.input-editable:focus{border-bottom:1px dashed var(--rojo-bermellon); background:rgba(255,253,240,0.6); border-radius:2px}
.seccion-ficha{margin-top:16px; padding-top:10px; border-top:2px solid rgba(61,50,29,0.3)}
.seccion-ficha b.titulo{color:var(--azul-lapislazuli); font-size:0.85rem; font-family:'Metamorphous',serif; text-transform:uppercase; display:block; margin-bottom:6px; letter-spacing:1px}
.consola-operaciones{display:flex; flex-direction:column; gap:16px; background-color:#0f0d09; background-image:radial-gradient(circle at top, #1a1510 0%, #0f0d09 100%); border:2px solid var(--borde2); padding:24px; border-radius:2px; height:fit-content; box-shadow:0 10px 25px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.6)}
.control-grupo{margin-bottom:2px; display:flex; flex-direction:column; gap:6px}
.control-grupo label{display:block; font-size:.72rem; color:var(--oro); margin-bottom:5px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700; font-family:'Metamorphous',serif; text-shadow:0 1px 3px rgba(0,0,0,0.8)}
.control-grupo select,.control-grupo input{
  width:100%; background:linear-gradient(180deg,#1a1612,#12100e); border:1px solid var(--borde4);
  color:var(--texto); padding:11px 8px; border-radius:2px; font-family:'Almendra',serif; font-size:.9rem;
  transition:border.2s, box-shadow.2s; box-shadow:inset 0 2px 5px rgba(0,0,0,0.8)!important;
}
.control-grupo select:focus,.control-grupo input:focus{outline:none; border-color:var(--oro)!important; box-shadow:var(--oro-glow), inset 0 2px 5px rgba(0,0,0,0.8)!important}
.control-grupo select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='%23d4af37'><polygon points='10,14 4,6 16,6'/></svg>")!important; background-repeat:no-repeat!important; background-position:right 12px center!important; background-size:14px!important; padding-right:32px!important; -webkit-appearance:none; appearance:none}
.control-grupo small{display:block; font-size:.7rem; margin-top:4px; color:var(--texto3)}
.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; border-radius:2px;
  text-transform:uppercase; transition:all.2s; box-shadow:0 5px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
  font-family:'Metamorphous',serif; text-shadow:0 1px 0 rgba(255,255,255,0.2);
}
.btn-oro:hover{filter:brightness(1.15); transform:translateY(-1px); box-shadow:0 6px 15px rgba(212,175,55,0.25), inset 0 1px 0 rgba(255,255,255,0.4)}
.btn-oro:active{transform:translateY(0); filter:brightness(.95)}
.btn-tab{background:linear-gradient(135deg,#2a221c,#241e1b); border:1px solid var(--borde4); color:var(--texto2); padding:10px 4px; cursor:pointer; font-size:.8rem; border-radius:4px; font-weight:700; transition:all.15s ease}
.btn-tab:hover{background:#3a2e26; border-color:var(--oro); color:#fff; transform:translateY(-1px)}
.grid-criticos{margin-top:6px; display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.log{
  background:#030302; border:2px solid var(--borde2); padding:16px; margin-top:12px;
  font-family:'Almendra',serif; font-size:.85rem; min-height:140px; max-height:220px;
  overflow-y:auto; white-space:pre-wrap; border-radius:2px; line-height:1.5; box-shadow:inset 0 0 20px rgba(0,0,0,.8); color:#d4b483;
}
.log::-webkit-scrollbar-thumb{background:var(--borde4)}
.panel-dano, #panel-daño{background:linear-gradient(135deg,#1f1410,#2a1812); border:2px solid var(--rojo); padding:12px; margin-top:12px; border-radius:2px; animation:shake.35s ease; box-shadow:0 0 15px rgba(138,26,26,.4); color:var(--texto)}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.iniciativa-box{background:linear-gradient(135deg,#1a1612,#12100e); border:1px dashed var(--borde); padding:10px; margin-top:14px; border-radius:6px; box-shadow:inset 0 0 15px rgba(0,0,0,.4)}
.iniciativa-box h4{margin:0; font-size:.8rem; color:var(--texto2); line-height:1.4; font-weight:700}
.iniciativa-box span{color:var(--oro3); font-weight:900}
#seccion-criticos-joc{animation:fadeIn.3s ease}
#bloque-d100-critico{animation:fadeIn.25s ease}
#d100-critico-mesa{border:2px solid var(--oro)!important; background:#1a1208!important; font-weight:900; letter-spacing:2px}
#dado-abierta{animation:fadeIn.2s ease; background:#0f1a0f!important; border-color:#4af626!important; color:#4af626!important; font-weight:900; text-align:center}
#aviso-abierta{font-weight:700; animation:shake.4s ease; color:#4af626!important}
.tab-deshabilitada[title]{position:relative}
@media(max-width:1200px){.mesa,.tablero-dj{grid-template-columns:280px 1fr 340px}}
@media(max-width:980px){.mesa,.tablero-dj{grid-template-columns:1fr}.header-merp{position:relative}.grid-heroes{grid-template-columns:1fr 1fr 1fr}}
@media(max-width:600px){.grid-heroes{grid-template-columns:1fr 1fr}.header-merp h1{font-size:1.2rem}.mesa,.tablero-dj{padding:8px; gap:8px}}
.btn-heroe.activo{background:linear-gradient(135deg,#3a3224,#2f271f);border-color:var(--oro);box-shadow:var(--oro-glow);font-weight:700}
.btn-heroe.objetivo-target{outline:2px solid #ff4444!important;box-shadow:0 0 12px rgba(255,68,68,.6)!important;border-color:#ff4444!important}
#dado-abierta::placeholder{color:#4af626!important}
@keyframes brilloVerde{0%,100%{box-shadow:0 0 5px #4af626}50%{box-shadow:0 0 15px #4af626}}
@keyframes parpadeo{0%,100%{opacity:1}50%{opacity:.5}}
#texto-daño-pendiente{color:#ff9999!important}
#orden-iniciativa-txt{max-height:100px;overflow-y:auto;font-size:.7rem;line-height:1.3;color:var(--texto2);border-top:1px dotted #3a3224;margin-top:6px;padding-top:6px}
#panel-daño button:hover,.panel-dano button:hover{filter:brightness(1.2);transform:translateY(-1px)}
.btn-heroe.muerto{opacity:.4;filter:grayscale(1);text-decoration:line-through}
.estado-badge{display:inline-block;font-size:.65rem;padding:3px 8px;border-radius:2px;margin-right:4px;font-weight:900; font-family:'Metamorphous',serif; text-transform:uppercase; letter-spacing:.5px; border:1px solid rgba(0,0,0,.4)!important; box-shadow:0 3px 6px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.15)!important; text-shadow:0 1px 2px rgba(0,0,0,.8)!important}
.estado-badge.aturdido{background:linear-gradient(135deg,#d49300,#946500); color:#0d0b07; border-color:var(--oro)!important}
.estado-badge.sangrando{background:linear-gradient(135deg,var(--rojo-bermellon),#4a100a); color:#ede2c4; border-color:#ff4444!important; animation:parpadeo 1s infinite}
.estado-badge.inconsciente{background:linear-gradient(135deg,#241d19,#0d0a08); color:#ff5555; border-color:#4a100a!important}
.estado-badge.muerto{background:linear-gradient(135deg,#3d0505,#140000); color:#ff3333; border-color:var(--rojo-bermellon)!important; animation:parpadeoLubreKells 2s infinite ease-in-out}
@keyframes parpadeoLubreKells{0%,100%{opacity:1; filter:drop-shadow(0 0 2px var(--rojo-bermellon))}50%{opacity:.35; filter:none}}
#bestiario-panel{height:85vh; overflow-y:auto}
.bestiario-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.bestiario-card{background:#2a1f0f; border:1px solid var(--borde3); padding:5px; font-size:10px; cursor:pointer; border-radius:2px}
.bestiario-card.seleccionado{border-color:gold; background:#3d2f15}
#selector-habilidad-rival-rm{border-color:var(--borde)!important; background:#1e1a14!important; font-weight:800; text-align:center}
#selector-habilidad-rival-rm:focus{border-color:var(--oro)!important; box-shadow:var(--oro-glow)}
#dado-TR-fisico{border:2px solid var(--oro2)!important; background:#1e1a08!important; color:var(--oro3)!important; font-weight:900; text-align:center; animation:fadeIn.3s ease}
#dado-TR-fisico::placeholder{color:var(--oro)!important; font-size:.75rem}
#dado-TR-fisico.modo-TR-activo{border-color:#ff8c00!important; box-shadow:0 0 12px rgba(255,140,0,.6)!important; animation:brilloVerde 1s infinite}
.oro-vivo{cursor:pointer; border-bottom:1px dashed var(--oro); padding:0 4px; transition:all.2s}
.oro-vivo:hover{background:rgba(181,137,46,.2); box-shadow:var(--oro-glow)}
.btn-oraculo{border-color:var(--oro)!important; color:var(--oro)!important; box-shadow:0 0 8px rgba(200,164,74,0.3)}
.btn-oraculo.activo{background:linear-gradient(135deg,#b5892e,#8a6d3b)!important; color:#000!important}
#contenedor-asistente-interno{ display:none; width:100%; max-width:1150px; margin:20px auto 0; animation:aparecerManuscrito 0.4s ease-out}
#contenedor-asistente-interno.visible{ display:block}
.cabecera-oraculo{ display:flex; justify-content:space-between; align-items:center; background:#12100b; border:2px solid var(--borde); border-bottom:none; padding:10px 20px; border-radius:4px 4px 0 0; font-family:'Metamorphous',serif; color:var(--oro); font-size:.85rem; letter-spacing:1px; text-transform:uppercase}
.btn-cerrar-oraculo{ background:transparent; border:1px solid var(--rojo); color:#ff9999; padding:4px 12px; font-size:.7rem; cursor:pointer; border-radius:3px}
#contenedor-asistente-interno iframe{ width:100%; height:650px; border:2px solid var(--borde); border-radius:0 0 4px 4px; background:#0e0c08}
@keyframes aparecerManuscrito{ from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:translateY(0)}}

/* FIX v6.8.2 - SIN MARCO REPETIDO + RETRATO LATERAL */
.ficha,.tarjeta-personaje{ border: 6px double #2b1f14 !important; border-image:none !important; background-color:#f4eae1 !important; }
#app,.merp-container,main,.mesa{ border-image:none !important; border:2px solid #2b1f14 !important; background:rgba(12,10,8,0.92) !important; }
.ficha-layout{display:flex;gap:18px;align-items:flex-start}
.retrato-lateral{width:160px;flex-shrink:0;border:3px solid #2b1f14;box-shadow:0 4px 12px rgba(0,0,0,.6);background:#e8d9b0}
.retrato-lateral img{width:100%;display:block}
.pie-retrato{font-size:.7rem;text-align:center;padding:4px;background:#2b1f14;color:#d4af37}
.ficha-contenido{flex:1}
.imagen-placeholder{display:none !important}
@media print{ .no-print,.retrato-lateral,.header-merp,.columna-izq,.columna-der,.tabs{display:none !important} }
.tarjeta-tactil-pj img{
  object-fit: cover!important;
  filter: none!important;
}
/* PANEL PRINCIPAL */
#app,.merp-container, main,.mesa {
  background: rgba(12, 10, 8, 0.93);
  border: 16px solid #0a0a0a;
  border-image: url('../marco-kells.jpg') 150 150 150 150 stretch;
  border-image-width: 45px;
  box-shadow: inset 0 0 30px #000, 0 0 50px rgba(0,0,0,0.9);
  padding: 15px;
  max-width:1280px;
  margin:15px auto;
}
.retrato,.slot-retrato {
  border: 8px solid transparent;
  border-image: url('../marco-kells.jpg') 60 60 60 60 stretch;
  border-image-width: 8px;
}
.slot-retrato.activo {
  box-shadow: 0 0 15px gold;
}