:root{--bg:#1b2330;--panel:#263143;--gold:#d4a94c;--ember:#c4503a;--text:#ece6d6;--muted:#9aa5b5}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse at top,#243044,var(--bg) 60%) fixed;color:var(--text);
  font:19px/1.55 Alegreya,Georgia,serif;min-height:100vh}
h1,h2,.brand{font-family:Cinzel,Georgia,serif;letter-spacing:.04em;margin:0 0 .5em}
.top{display:flex;justify-content:space-between;align-items:center;padding:.8rem 1.2rem;border-bottom:2px solid var(--gold)}
.brand{color:var(--gold);font-size:1.4rem;text-decoration:none;font-weight:800;margin:0}
.top nav{display:flex;gap:1rem;align-items:center;color:var(--muted)}
.top a,.link{color:var(--text);background:none;border:0;font:inherit;cursor:pointer;text-decoration:underline}
main{max-width:1000px;margin:0 auto;padding:2rem 1.2rem}
.hero{font-size:clamp(2rem,6vw,3.6rem);text-align:center;margin:1rem 0 2rem;color:var(--gold)}
.portals{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem}
.portal{display:block;text-decoration:none;color:var(--text);background:var(--panel);padding:2rem 1.5rem;
  border:2px solid var(--gold);border-radius:60px 60px 6px 6px;min-height:220px;transition:transform .15s,border-color .15s}
.portal:hover,.portal:focus-visible{border-color:var(--ember);outline:none;transform:translateY(-3px)}
.portal h2{color:var(--gold);font-size:1.5rem}
.portal p{color:var(--muted);margin:0}
.panel{background:var(--panel);border:2px solid var(--gold);padding:1.5rem 2rem;border-radius:6px}
.narrow{max-width:420px;margin:2rem auto}
label{display:block;margin:1rem 0;color:var(--muted)}
input{display:block;width:100%;margin-top:.3rem;padding:.7rem;font:inherit;color:var(--text);
  background:var(--bg);border:1px solid var(--muted);border-radius:4px}
input:focus{outline:2px solid var(--gold)}
.btn{width:100%;padding:.8rem;font:600 1rem Cinzel,serif;background:var(--gold);color:#1b2330;border:0;border-radius:4px;cursor:pointer}
.btn:hover{background:#e6bd62}
.error{color:#ff9d8a;margin:.5rem 0}
@media (prefers-reduced-motion:reduce){.portal{transition:none}}
.muted{color:var(--muted)}
.board-title{text-shadow:0 3px 0 #000}
.board{position:relative;margin:0 auto;max-width:1100px;padding:0}
.row{position:absolute;left:0;right:0;height:84px;display:flex;align-items:center;gap:1rem;padding:0 1.5rem;
  border:3px solid #1a1109;border-left:18px solid var(--c);border-radius:6px;
  background:repeating-linear-gradient(90deg,#5a3b22 0 120px,#52351f 120px 124px),#5a3b22;
  box-shadow:0 4px 0 #000;transition:transform .9s cubic-bezier(.3,1.3,.5,1)}
.row .name{flex:1;font:800 clamp(1.4rem,3.2vw,2.6rem) Cinzel,serif;color:#f3e6c8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .pts{font:800 clamp(1.8rem,4vw,3.2rem) Cinzel,serif;color:var(--gold);min-width:4ch;text-align:right}
.row .gain{position:absolute;right:1.5rem;top:-6px;font:800 1.6rem Cinzel,serif;opacity:0}
.gain.up{color:#8fe388}.gain.down{color:#ff8a76}
.gain.show{animation:pop 1.8s ease-out}
@keyframes pop{0%{opacity:0;transform:translateY(14px)}15%{opacity:1;transform:translateY(0)}70%{opacity:1}100%{opacity:0;transform:translateY(-14px)}}
.row.flash{animation:glow 1.4s ease-out}
@keyframes glow{0%,30%{box-shadow:0 0 28px 6px var(--gold),0 4px 0 #000}100%{box-shadow:0 4px 0 #000}}
.admin-link{position:fixed;right:12px;bottom:10px;color:var(--muted);font-size:.9rem}
.inline{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.6rem 0}
.inline input{margin:0;width:auto;flex:1;min-width:140px}
.inline input[type=color]{flex:0 0 56px;height:44px;padding:2px}
.btn.small{width:auto;padding:.5rem .9rem}
.team{margin:1rem 0}.team h2{margin-bottom:.3rem}
.hist{justify-content:space-between;border-bottom:1px solid #3a475b;padding:.3rem 0}
@media (prefers-reduced-motion:reduce){.row{transition:none}.row.flash,.gain.show{animation:none}}

/* ===== Tablón de madera ===== */
.board-title{position:relative;display:table;margin:3.5rem auto 2.5rem;padding:.5em 1.4em;color:#2a1507;
  text-shadow:0 1px 0 rgba(255,225,180,.45),0 -1px 0 rgba(0,0,0,.25);
  border:3px solid #3a2410;border-radius:6px;box-shadow:inset 0 2px 0 rgba(255,255,255,.25),0 8px 14px rgba(0,0,0,.6);
  background:repeating-linear-gradient(90deg,rgba(60,30,10,.18) 0 2px,transparent 2px 9px),linear-gradient(#c49a62,#a97c45)}
.board-title::before,.board-title::after{content:"";position:absolute;bottom:100%;height:60px;width:6px;
  background:repeating-linear-gradient(#8d949c 0 8px,#3b4047 8px 12px);border-radius:3px}
.board-title::before{left:12%}.board-title::after{right:12%}
.row{--wood:#b9894f;left:var(--dl,0);right:var(--dr,0);rotate:var(--rot,0deg);gap:1rem;padding:0 2.2rem 0 4.6rem;
  border:2px solid #3a2410;border-radius:5px;
  background:
    radial-gradient(ellipse 16px 10px at var(--kx,40%) 55%,rgba(60,30,10,.6),rgba(60,30,10,.2) 60%,transparent 72%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='84'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.35' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.14 0 0 0 0 0.05 0 0 0 1.1 -0.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(180deg,transparent 0 9px,rgba(60,30,10,.08) 9px 11px),
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%,rgba(0,0,0,.2)),
    var(--wood);
  background-size:auto,600px 100%,auto,auto,auto;background-position:0 0,var(--off,0) 0,0 0,0 0,0 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.25),0 7px 10px rgba(0,0,0,.65)}
.row::before{content:"";position:absolute;left:34px;top:-3px;bottom:-12px;width:30px;background:var(--c);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  box-shadow:inset 3px 0 0 rgba(0,0,0,.25),inset -3px 0 0 rgba(255,255,255,.18)}
.row::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 6px at 15px 50%,#9aa0a8 0 30%,#2c2f34 62%,transparent 68%),
             radial-gradient(circle 6px at calc(100% - 15px) 50%,#9aa0a8 0 30%,#2c2f34 62%,transparent 68%)}
.row .name,.row .pts{color:#2a1507;text-shadow:0 1px 0 rgba(255,225,180,.45),0 -1px 0 rgba(0,0,0,.25)}
.row .gain{top:-14px;padding:0 .6em;background:#1a1109;border-radius:20px;z-index:3}
.gain.up{color:#9ff59a}.gain.down{color:#ff9d8a}
@media (max-width:600px){.row{padding:0 1.2rem 0 4rem}}

/* ===== Panel del GM ===== */
.back-link{left:12px;right:auto;top:10px;bottom:auto;font-size:1rem}
.gm-bar{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center;justify-content:space-between}
.big{font:800 2rem Cinzel,serif;color:var(--gold)}.code{letter-spacing:.15em}
.turns{margin:0;display:flex;align-items:center;gap:.6rem}.turns input{width:5rem;margin:0}
.heroes{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.2rem;margin-top:1rem}
.hcard h2{cursor:pointer;color:var(--gold)}
.hcard.down{opacity:.65;filter:grayscale(.7)}
.hpbar{position:relative;height:38px;background:var(--bg);border:2px solid #15171a;border-radius:6px;overflow:hidden}
.hpbar i{position:absolute;inset:0 auto 0 0;background:linear-gradient(#d9573f,#9c2f1d);transition:width .3s}
.hpbar b{position:absolute;inset:0;display:grid;place-items:center;cursor:pointer;text-shadow:0 1px 2px #000}
.btns{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:.6rem 0}
.btns>.lbl{width:3.2rem;color:var(--muted)}
.btns:empty{display:none}
.btn.alt{background:#4b5c78;color:var(--text)}.btn.alt:hover{background:#5b6e8d}
.tog{flex:1;padding:.55rem .3rem;font:inherit;color:var(--text);background:#2f6b3f;border:2px solid #4c9a5f;border-radius:4px;cursor:pointer}
.tog.used{background:var(--bg);border-color:#444;color:var(--muted);text-decoration:line-through}
.chip{white-space:nowrap;display:inline-flex;gap:.4rem;align-items:center;padding:.2rem .3rem .2rem .7rem;border-radius:20px;border:2px solid}
.chip.fire{background:#4a2218;border-color:#e0713a}.chip.poison{background:#1f3a1d;border-color:#7ac04f}
.chip button{background:none;border:0;color:var(--text);font-size:1.2rem;cursor:pointer}

/* ===== Jugadores ===== */
.codein{text-transform:uppercase;letter-spacing:.3em;font:800 1.8rem Cinzel,serif;text-align:center}
.pick{display:block;margin:.7rem 0;text-align:center;text-decoration:none;font-size:1.3rem}
.pj{max-width:520px;margin:0 auto}
.pj-name{font-size:2.2rem;color:var(--gold);margin:.2rem 0 .8rem}
.pj .hpbar{height:60px;font:800 1.9rem Cinzel,serif}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1rem 0}
.slot{display:flex;flex-direction:column;align-items:center;padding:.9rem .3rem;border-radius:6px;font:800 1rem Cinzel,serif;
  background:#2f6b3f;border:2px solid #4c9a5f}
.slot small{font:400 .85rem Alegreya,serif;color:#cfe8d5}
.slot.used{background:var(--bg);border-color:#444;color:var(--muted);text-decoration:line-through}
.slot.used small{color:var(--muted);text-decoration:none}
.pj .chip{font-size:1.1rem;padding:.35rem .9rem}

/* ===== Juegos y tablón vistoso ===== */
.row.overtake{animation:take 1.6s ease-out}
@keyframes take{0%{scale:1}25%{scale:1.05;filter:brightness(1.35)}100%{scale:1;filter:none}}
.srow{border-bottom:1px solid #3a475b;padding:.3rem 0}.sname{flex:1;min-width:120px}
.srow input{max-width:130px;flex:0 0 130px}
select{padding:.7rem;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--muted);border-radius:4px}
details{margin-top:.6rem}summary{cursor:pointer;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.row.overtake{animation:none}}

/* ===== Niveles y monstruos ===== */
.sec{margin-top:1.6rem;color:var(--gold)}
.end{padding:.8rem 1rem;margin-bottom:1rem;border:2px solid var(--gold);border-radius:6px;background:#3a2f12;font:800 1.2rem Cinzel,serif}
.btns>.lbl.wide{width:auto;margin-right:.4rem}
.btn.sel{background:var(--ember);color:#fff}
.threat{margin:1rem 0}
.threat .hpbar i{background:linear-gradient(#d4a94c,#9a7420)}
.threat .hpbar.over i{background:linear-gradient(#d9573f,#9c2f1d)}
.threat .hpbar b{font-size:1.05rem}
.monster{border-color:var(--ember)}.monster h2{color:#ff9d8a}
textarea{display:block;width:100%;margin:.6rem 0;padding:.7rem;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--muted);border-radius:4px}
.lvl{margin:0 0 .6rem;font:600 1.1rem Cinzel,serif}
.pj .end{margin:.6rem 0}
.mate{margin:.6rem 0;padding:.5rem .7rem;background:var(--panel);border-radius:6px}
.mrow{display:flex;justify-content:space-between}
.mbar{height:8px;background:var(--bg);border-radius:4px;overflow:hidden;margin:.3rem 0}
.mbar i{display:block;height:100%;background:#c4503a}

/* ===== Editor de mazo y rankings por juego ===== */
.decks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.2rem;align-items:start}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem}
.mcard{position:relative;padding:.9rem .8rem .6rem;border:2px solid var(--gold);border-radius:10px;
  background:linear-gradient(160deg,#2f3d55,#212b3b);box-shadow:0 3px 0 #000}
.mcard h3{margin:.2rem 1.8rem .4rem 0;font:600 1.05rem Cinzel,serif;color:var(--text);overflow-wrap:anywhere}
.mthreat{position:absolute;top:-10px;right:-10px;width:36px;height:36px;line-height:32px;text-align:center;border-radius:50%;
  background:var(--ember);border:3px solid #15171a;font:800 1.1rem Cinzel,serif}
.mstats{display:flex;justify-content:space-between;margin:.2rem 0 .4rem;color:var(--muted);font-size:.95rem}
.medit{display:grid;gap:.4rem;margin-top:.5rem}.medit label{margin:0}.medit input,.medit select{margin:0}
.mcard summary{cursor:pointer;color:var(--gold)}
.gamecap{text-align:center;margin:-.4rem 0 1.4rem;color:#e9d9b5;text-shadow:0 2px 0 #000;font-size:1.1rem}
.wtabs{display:flex;flex-wrap:wrap;gap:1rem 1.1rem;justify-content:center;margin:.6rem 0 1.8rem}
.wtab{--wood:#b9894f;position:relative;min-width:120px;padding:.75rem 2.6rem;cursor:pointer;
  font:800 clamp(1rem,2.6vw,1.35rem) Cinzel,serif;color:#2a1507;text-shadow:0 1px 0 rgba(255,225,180,.45),0 -1px 0 rgba(0,0,0,.25);
  border:2px solid #3a2410;border-radius:5px;rotate:var(--rot,0deg);
  background:
    radial-gradient(ellipse 14px 9px at var(--kx,40%) 55%,rgba(60,30,10,.6),rgba(60,30,10,.2) 60%,transparent 72%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='56'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.004 0.35' numOctaves='3' seed='4'/><feColorMatrix values='0 0 0 0 0.25 0 0 0 0 0.14 0 0 0 0 0.05 0 0 0 1.1 -0.3'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
    repeating-linear-gradient(180deg,transparent 0 9px,rgba(60,30,10,.08) 9px 11px),
    linear-gradient(180deg,rgba(255,255,255,.14),transparent 30%,rgba(0,0,0,.2)),
    var(--wood);
  background-size:auto,300px 100%,auto,auto,auto;background-position:0 0,var(--off,0) 0,0 0,0 0,0 0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.25),inset 0 -3px 0 rgba(0,0,0,.25),0 6px 9px rgba(0,0,0,.65);
  filter:brightness(.74) saturate(.9);transition:filter .2s,transform .2s,box-shadow .2s}
.wtab::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle 5px at 13px 50%,#9aa0a8 0 30%,#2c2f34 62%,transparent 68%),
             radial-gradient(circle 5px at calc(100% - 13px) 50%,#9aa0a8 0 30%,#2c2f34 62%,transparent 68%)}
.wtab:hover{filter:brightness(.95) saturate(1)}
.wtab:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wtab.on{filter:none;transform:translateY(-4px);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.3),inset 0 -3px 0 rgba(0,0,0,.25),0 0 0 3px var(--gold),0 10px 14px rgba(0,0,0,.7)}
@media (prefers-reduced-motion:reduce){.wtab{transition:none}}

#catalog{max-height:440px;overflow-y:auto}
.seen{opacity:.65}.tag{margin-left:.4rem;padding:.05rem .5rem;border:1px solid var(--gold);border-radius:12px;color:var(--gold);font-size:.85rem}

main a{color:var(--gold)}

.chip.advantage{background:#1f3550;border-color:#5aa0e0}.chip.disadvantage{background:#3a2548;border-color:#a77acc}
.mate .chip{margin:.2rem .3rem 0 0;padding:.1rem .7rem;font-size:.95rem}.mate.mon{border-left:4px solid var(--ember)}
/* Nombres en varias líneas y separación del estandarte (todos los tablones) */
.row{padding-left:5rem}
.row .name{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;line-height:1.05;min-width:0}
@media (max-width:600px){.row{padding:0 2.4rem 0 4.9rem}.row .name{font-size:clamp(1.05rem,4.8vw,1.5rem)}}

/* ===== Menú de GM y gestión ===== */
a.btn.small{display:inline-block;width:auto;text-decoration:none}
.mtabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:.8rem 0 1.2rem}
.portal.gm{position:relative;border-style:dashed}
.gmtag{position:absolute;top:12px;right:16px;padding:.05rem .6rem;border:1px solid var(--ember);border-radius:12px;color:#ff9d8a;font-size:.8rem}