:root{
  --c-bg:#120a14; --c-bg2:#1a1020; --c-ink:#e9e2d4; --c-dim:#a99f8c;
  --c-acc:#9d82c4; --c-acc2:#6f5b8c; --c-peligro:#8a3340; --c-oro:#d9a441; --c-borde:#3a2b42;
  --c-hielo:#8fb8c6;
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--c-bg)}
body{
  font-family:'Spectral',serif;font-weight:300;color:var(--c-ink);
  background:radial-gradient(ellipse 120% 60% at 50% -10%, var(--c-bg2) 0%, transparent 60%), var(--c-bg);
  min-height:100vh;padding:3rem 1.25rem 7rem;line-height:1.55;
}
.ficha{max-width:720px;margin:0 auto}
nav.migas{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-dim);margin-bottom:2.2rem}
nav.migas a{color:var(--c-acc);text-decoration:none}
nav.migas a:hover{text-decoration:underline}
nav.migas span{color:var(--c-borde);margin:0 .5rem}

.ficha-head{text-align:center;margin-bottom:2.5rem}
.f-badge{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--c-acc);margin-bottom:.6rem}
.f-nombre{
  font-family:'IM Fell English',serif;font-weight:400;font-size:clamp(2rem,7vw,3.2rem);
  text-align:center;width:100%;background:none;border:none;color:var(--c-ink);
  letter-spacing:.06em;border-bottom:1px solid transparent;transition:border-color .3s;
}
.f-nombre:focus{outline:none;border-bottom-color:var(--c-borde)}
.f-concepto{
  font-family:'IM Fell English',serif;font-style:italic;font-size:1.05rem;text-align:center;
  width:100%;background:none;border:none;color:var(--c-peligro);margin-top:.3rem;
}
.f-concepto:focus{outline:none}

.f-sec{margin-top:2.5rem}
.f-sec h2{
  font-family:'IM Fell English',serif;font-weight:400;font-size:1.25rem;letter-spacing:.12em;
  color:var(--c-acc);text-transform:uppercase;text-align:center;margin-bottom:1.1rem;
  position:relative;
}
.f-sec h2::before,.f-sec h2::after{
  content:"";display:inline-block;vertical-align:middle;width:14%;height:1px;
  background:linear-gradient(90deg,transparent,var(--c-borde));margin:0 .8rem;
}
.f-sec h2::after{background:linear-gradient(90deg,var(--c-borde),transparent)}

.f-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:.6rem}
.f-stat{
  background:linear-gradient(180deg,var(--c-bg2),transparent);border:1px solid var(--c-borde);
  border-radius:2px 2px 14px 14px;text-align:center;padding:.6rem .3rem .7rem;
}
.f-stat .nombre{font-size:.62rem;letter-spacing:.12em;color:var(--c-dim);text-transform:uppercase}
.f-stat .valor{
  font-family:'IM Fell English',serif;font-size:1.6rem;color:var(--c-ink);
  width:100%;text-align:center;background:none;border:none;
}
.f-stat .valor:focus{outline:none;color:var(--c-acc)}
.f-stat .valor::-webkit-outer-spin-button,.f-stat .valor::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f-stat .sub{font-size:.8rem;color:var(--c-acc);min-height:1rem}

.f-combate .comb-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem}
.comb-cell{
  display:flex;align-items:center;gap:.4rem;border:1px solid var(--c-borde);background:rgba(0,0,0,.18);
  border-radius:2px;padding:.35rem .5rem;
}
.comb-nom{
  width:6.5rem;background:none;border:none;color:var(--c-dim);font-family:'Spectral',serif;font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;text-align:right;
}
.comb-nom:focus{outline:none;color:var(--c-ink)}
.comb-val{
  width:2.6rem;background:none;border:none;border-bottom:1px solid var(--c-borde);color:var(--c-ink);
  font-family:'IM Fell English',serif;font-size:1.2rem;text-align:center;
}
.comb-val:focus{outline:none;color:var(--c-acc)}
.comb-val::-webkit-outer-spin-button,.comb-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.comb-x{
  font-size:.8rem;width:18px;height:18px;background:none;color:var(--c-borde);border:none;cursor:pointer;
}
.comb-x:hover{color:var(--c-peligro)}
.comb-add{display:flex;gap:.5rem;align-items:center;justify-content:center;margin-top:1rem;flex-wrap:wrap}
.comb-add input[type=text]{
  background:var(--c-bg);border:1px solid var(--c-borde);border-radius:2px;color:var(--c-ink);
  font-family:'Spectral',serif;font-size:.9rem;padding:.4rem .6rem;
}
.comb-add input[type=text]:focus{outline:none;border-color:var(--c-acc)}
.comb-chk{font-size:.8rem;color:var(--c-dim);display:flex;align-items:center;gap:.3rem}
.comb-add button{
  font-family:'Spectral',serif;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;
  background:var(--c-bg2);color:var(--c-acc);border:1px solid var(--c-borde);border-radius:2px;padding:.4rem .8rem;cursor:pointer}
.comb-add button:hover{border-color:var(--c-acc)}

.f-vitales{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1rem}
.f-recurso.destacado{position:relative;border:1px solid var(--c-borde);background:linear-gradient(180deg,var(--c-bg2),transparent);border-radius:2px;padding:1.1rem .9rem 1.2rem}
.f-recurso.destacado .num{font-family:'IM Fell English',serif;font-size:2.4rem;transition:color .4s,text-shadow .4s}
.f-recurso.destacado.estado-tocado .num{color:var(--c-oro)}
.f-recurso.destacado.estado-grave .num{color:var(--c-peligro);text-shadow:0 0 14px color-mix(in srgb,var(--c-peligro) 50%,transparent)}
.f-recurso.destacado.estado-caido .num{color:var(--c-peligro);text-shadow:0 0 20px color-mix(in srgb,var(--c-peligro) 70%,transparent)}
.f-recurso.destacado.estado-caido .etiqueta{color:var(--c-peligro)}
.f-recurso.destacado.estado-sobre .num{color:var(--c-hielo);text-shadow:0 0 14px color-mix(in srgb,var(--c-hielo) 45%,transparent)}
.f-recurso.destacado .curar{
  display:block;margin:.6rem auto 0;font-family:'Spectral',serif;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  background:none;color:var(--c-acc);border:1px solid var(--c-borde);border-radius:2px;padding:.22rem .7rem;cursor:pointer;transition:border-color .3s}
.f-recurso.destacado .curar:hover{border-color:var(--c-acc)}
.rec-x{position:absolute;top:.4rem;right:.4rem;width:18px;height:18px;background:none;border:none;color:var(--c-borde);font-size:.85rem;cursor:pointer}
.rec-x:hover{color:var(--c-peligro)}
.f-recurso{position:relative}

.gemas-cell{border:1px solid var(--c-borde);background:rgba(0,0,0,.18);border-radius:2px;padding:.9rem .7rem;text-align:center}
.gemas-fila{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-top:.4rem}
.gemas{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:center;max-width:14rem}
.gema{width:18px;height:18px;transform:rotate(45deg);border:1px solid var(--c-acc);background:transparent;transition:background .3s,box-shadow .3s}
.gema.llena{background:radial-gradient(circle at 30% 30%,var(--c-acc),var(--c-acc2) 70%);box-shadow:0 0 10px color-mix(in srgb,var(--c-acc) 50%,transparent)}
.gema.peligro{border-color:var(--c-peligro)}
.gema.peligro.llena{background:radial-gradient(circle at 30% 30%,var(--c-peligro),var(--c-acc2) 80%);box-shadow:0 0 10px color-mix(in srgb,var(--c-peligro) 50%,transparent)}
.gemas-cell button,.gemas-fila button{
  font-family:'IM Fell English',serif;font-size:1rem;width:26px;height:26px;flex:none;
  background:var(--c-bg2);color:var(--c-ink);border:1px solid var(--c-borde);border-radius:2px;cursor:pointer;transition:border-color .3s,color .3s}
.gemas-cell button:hover{border-color:var(--c-acc);color:var(--c-acc)}

.rec-add{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:1.2rem;justify-content:center}
.rec-add input[type=text]{flex:1;min-width:10rem;background:var(--c-bg);border:1px solid var(--c-borde);border-radius:2px;color:var(--c-ink);font-family:'Spectral',serif;font-size:.9rem;padding:.4rem .6rem}
.rec-add .rec-max{width:3.5rem;background:var(--c-bg);border:1px solid var(--c-borde);border-radius:2px;color:var(--c-ink);font-family:'Spectral',serif;font-size:.9rem;padding:.4rem;text-align:center}
.rec-add input:focus,.rec-add select:focus{outline:none;border-color:var(--c-acc)}
.rec-add select{background:var(--c-bg);border:1px solid var(--c-borde);border-radius:2px;color:var(--c-ink);font-family:'Spectral',serif;font-size:.88rem;padding:.4rem}
.rec-add button{font-family:'Spectral',serif;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;background:var(--c-bg2);color:var(--c-acc);border:1px solid var(--c-borde);border-radius:2px;padding:.4rem .8rem;cursor:pointer}
.rec-add button:hover{border-color:var(--c-acc)}

.f-recursos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.f-recurso{border:1px solid var(--c-borde);background:rgba(0,0,0,.2);border-radius:2px;padding:.9rem .7rem;text-align:center}
.f-recurso .etiqueta{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--c-dim);margin-bottom:.5rem}
.f-recurso .ctrl{display:flex;align-items:center;justify-content:center;gap:.4rem}
.f-recurso .num{font-family:'IM Fell English',serif;font-size:1.7rem;color:var(--c-ink);min-width:2rem}
.f-recurso.tipo-vida .num{color:var(--c-ink)}
.f-recurso.tipo-peligro .num{color:var(--c-peligro)}
.f-recurso .sep{color:var(--c-dim)}
.f-recurso .max{
  font-family:'IM Fell English',serif;font-size:1.1rem;color:var(--c-dim);width:2.6rem;text-align:center;
  background:none;border:none;border-bottom:1px solid var(--c-borde);
}
.f-recurso .max:focus{outline:none;color:var(--c-ink)}
.f-recurso .max::-webkit-outer-spin-button,.f-recurso .max::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.f-recurso button{
  font-family:'IM Fell English',serif;font-size:1rem;width:26px;height:26px;flex:none;
  background:var(--c-bg2);color:var(--c-ink);border:1px solid var(--c-borde);border-radius:2px;cursor:pointer;
  transition:border-color .3s,color .3s;
}
.f-recurso button:hover{border-color:var(--c-acc);color:var(--c-acc)}

.f-habs{display:grid;grid-template-columns:1fr 1fr;gap:.1rem 2rem}
.f-hab{display:flex;align-items:center;gap:.6rem;padding:.4rem 0;border-bottom:1px solid rgba(128,128,128,.12)}
.f-hab .nom{flex:1;color:var(--c-dim);font-size:.9rem}
.f-hab .mod{
  font-family:'IM Fell English',serif;width:3rem;text-align:center;color:var(--c-ink);font-size:1rem;
  background:none;border:none;border-bottom:1px solid var(--c-borde);
}
.f-hab .mod:focus{outline:none;color:var(--c-acc)}
.f-hab .mod::-webkit-outer-spin-button,.f-hab .mod::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

button.dado{
  display:inline-flex;align-items:center;gap:.3rem;font-family:'Spectral',serif;font-size:.72rem;
  letter-spacing:.06em;background:var(--c-bg2);color:var(--c-acc);border:1px solid var(--c-borde);
  border-radius:2px;padding:.2rem .5rem;cursor:pointer;transition:border-color .3s,box-shadow .3s;
}
button.dado svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linejoin:round}
button.dado:hover{border-color:var(--c-acc);box-shadow:0 0 10px color-mix(in srgb,var(--c-acc) 30%,transparent)}
button:focus-visible,input:focus-visible{outline:2px solid var(--c-acc);outline-offset:2px}

.f-inv .inv-add,.prog-add{display:flex;gap:.5rem;margin-bottom:.8rem}
.f-inv .inv-add input,.prog-add input{
  flex:1;background:var(--c-bg);border:1px solid var(--c-borde);border-radius:2px;color:var(--c-ink);
  font-family:'Spectral',serif;font-size:.92rem;padding:.45rem .6rem;
}
.f-inv .inv-add input:focus,.prog-add input:focus{outline:none;border-color:var(--c-acc)}
.f-inv .inv-add button,.prog-add button{
  font-family:'Spectral',serif;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;flex:none;
  background:var(--c-bg2);color:var(--c-acc);border:1px solid var(--c-borde);border-radius:2px;
  padding:.45rem .9rem;cursor:pointer;transition:border-color .3s}
.f-inv .inv-add button:hover,.prog-add button:hover{border-color:var(--c-acc)}
.inv-lista,.prog-log{list-style:none}
.inv-lista li,.prog-log li{display:flex;align-items:center;gap:.7rem;padding:.5rem .1rem;border-bottom:1px solid rgba(128,128,128,.12)}
.inv-lista .inom{flex:1;color:var(--c-ink);font-size:.92rem}
.inv-cant{display:flex;align-items:center;gap:.35rem}
.inv-cant button,.inv-quitar,.m-x{
  font-family:'IM Fell English',serif;font-size:.85rem;width:22px;height:22px;flex:none;
  background:var(--c-bg2);color:var(--c-dim);border:1px solid var(--c-borde);border-radius:2px;cursor:pointer;
  transition:border-color .3s,color .3s}
.inv-cant button:hover{border-color:var(--c-acc);color:var(--c-acc)}
.inv-cant .n{font-family:'IM Fell English',serif;min-width:1.4rem;text-align:center;color:var(--c-ink)}
.inv-quitar:hover,.m-x:hover{border-color:var(--c-peligro);color:var(--c-peligro)}
.inv-vacio,.prog-vacio,.lista-vacia{font-style:italic;color:var(--c-dim);font-size:.85rem;padding:.4rem .1rem}

.f-notas{
  width:100%;min-height:120px;resize:vertical;background:var(--c-bg);border:1px solid var(--c-borde);
  border-radius:2px;color:var(--c-ink);font-family:'Spectral',serif;font-size:.92rem;line-height:1.5;padding:.8rem;
}
.f-notas:focus{outline:none;border-color:var(--c-acc)}
.f-notas::placeholder{color:var(--c-dim);opacity:.6;font-style:italic}

.f-prog .prog-marcador{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:1.2rem}
.prog-lbl{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c-dim)}
.prog-num{font-family:'IM Fell English',serif;font-size:1.8rem;color:var(--c-ink);min-width:2rem;text-align:center}
.prog-marcador button{
  font-family:'IM Fell English',serif;font-size:1.1rem;width:30px;height:30px;
  background:var(--c-bg2);color:var(--c-ink);border:1px solid var(--c-borde);border-radius:2px;cursor:pointer;transition:border-color .3s,color .3s}
.prog-marcador button:hover{border-color:var(--c-oro);color:var(--c-oro)}
.prog-xp{
  font-family:'IM Fell English',serif;font-size:1.4rem;width:6rem;text-align:center;background:var(--c-bg);
  border:1px solid var(--c-borde);border-radius:2px;color:var(--c-ink);padding:.2rem}
.prog-xp:focus{outline:none;border-color:var(--c-oro)}
.m-fecha{font-size:.72rem;color:var(--c-dim);min-width:5rem}
.m-txt{flex:1;color:var(--c-ink);font-size:.9rem}

.f-pie{margin-top:3rem;text-align:center;color:var(--c-dim);font-size:.82rem;font-style:italic}
.f-borrar{
  display:block;margin:1.4rem auto 0;font-family:'Spectral',serif;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  background:none;color:var(--c-peligro);border:1px solid var(--c-borde);border-radius:2px;padding:.35rem .9rem;cursor:pointer;transition:border-color .3s}
.f-borrar:hover{border-color:var(--c-peligro)}
.aviso{text-align:center;color:var(--c-dim)}
.aviso a{color:var(--c-acc)}

#tyd-tirada{
  position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%) translateY(20px);
  background:linear-gradient(180deg,var(--c-bg2),var(--c-bg));border:1px solid var(--c-acc);border-radius:2px;
  padding:.8rem 1.6rem;text-align:center;min-width:240px;opacity:0;pointer-events:none;
  transition:opacity .35s,transform .35s;box-shadow:0 10px 40px rgba(0,0,0,.6);z-index:50;
}
#tyd-tirada.visible{opacity:1;transform:translateX(-50%) translateY(0)}
#tyd-tirada .quien{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c-dim)}
#tyd-tirada .resultado{font-family:'IM Fell English',serif;font-size:2rem;line-height:1.15;color:var(--c-ink)}
#tyd-tirada .desglose{font-size:.8rem;color:var(--c-dim);font-style:italic}
#tyd-tirada .grito{font-family:'IM Fell English',serif;font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;display:none}
#tyd-tirada.critico{border-color:var(--c-oro)}
#tyd-tirada.critico .resultado{color:var(--c-oro)}
#tyd-tirada.critico .grito{display:block;color:var(--c-oro)}
#tyd-tirada.pifia{border-color:var(--c-peligro)}
#tyd-tirada.pifia .resultado{color:var(--c-peligro)}
#tyd-tirada.pifia .grito{display:block;color:var(--c-peligro)}

@media (max-width:560px){
  .f-habs{grid-template-columns:1fr}
  body{padding:2rem 1rem 7rem}
}
@media (prefers-reduced-motion:reduce){#tyd-tirada{transition:opacity .2s}}