@import url("https://fonts.googleapis.com/css2?family=Alegreya:ital,wght@0,400;0,600;0,800;1,500&family=Alegreya+Sans+SC:wght@400;500;700&family=Stardos+Stencil:wght@400;700&display=swap");
:root{
  --bg:#120c08;--bg2:#1b130d;--surface:#211812;--surface2:#2b2018;--line:#3d2e22;--fg:#ecdfc8;--muted:#b5a389;
  --gold:#d2a456;--gold2:#f0cb82;--gold-deep:#8a6330;--red:#c24a3b;--green:#5fbf84;--blue:#6aa7d8;
  --humanos:#8a6549;--orcs:#4f6e6c;--elfos:#3f8b69;--criaturas:#73548c;
  --glow-humanos:#e8ad6e;--glow-orcs:#8fd8d0;--glow-elfos:#7fe8b2;--glow-criaturas:#c99af5;
  --f-display:"Stardos Stencil","Alegreya",Georgia,serif;--f-body:"Alegreya",Georgia,serif;--f-label:"Alegreya Sans SC","Trebuchet MS",system-ui,sans-serif;
  --speed:1;
}
*{box-sizing:border-box}
html{overflow-x:clip}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:18px;line-height:1.45;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;overflow-x:clip}
button{font:inherit;color:inherit;cursor:pointer}
img{max-width:100%;display:block}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:.03em;line-height:1.1}
.screen{display:none;min-height:100dvh}.screen.on{display:block;animation:fadeIn .45s ease both}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.fac-humanos{--c:var(--humanos);--g:var(--glow-humanos)}.fac-orcs{--c:var(--orcs);--g:var(--glow-orcs)}
.fac-elfos{--c:var(--elfos);--g:var(--glow-elfos)}.fac-criaturas{--c:var(--criaturas);--g:var(--glow-criaturas)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--gold-deep);background:linear-gradient(#3a2a1b,#26190f);color:var(--gold2);font-family:var(--f-label);letter-spacing:.1em;text-transform:uppercase;font-size:.95rem;padding:11px 20px;border-radius:6px;transition:transform .15s,box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.15);box-shadow:0 0 18px rgba(210,164,86,.25)}.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(#e2b765,#b98534);color:#20140a;border-color:#f3d493;font-weight:700}
.btn.ghost{background:transparent}.btn[disabled]{opacity:.4;pointer-events:none}
.btn.small{padding:6px 12px;font-size:.8rem}
.chip{display:inline-block;font-family:var(--f-label);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding:1px 8px;border-radius:99px;border:1px solid var(--line);color:var(--muted);background:rgba(0,0,0,.25)}
.tipo{--tc:#999}.tipo-passiva{--tc:#a9a9a9}.tipo-suprema{--tc:#f0cb82}.tipo-superior{--tc:#e8a14f}.tipo-sacrificio{--tc:#d76f6f}.tipo-defesa{--tc:#6aa7d8}
.tipo-contra{--tc:#e0745a}.tipo-inutilizacao{--tc:#b58be0}.tipo-melhoria{--tc:#7fd39b}.tipo-reacao{--tc:#9ed}.tipo-sabotagem{--tc:#d98fb0}.tipo-restauracao{--tc:#78d6c4}
.tipo-drenagem{--tc:#c1688a}.tipo-ofensiva{--tc:#f07f4a}.tipo-comum{--tc:#cbbd9f}
.tipo-chip{color:var(--tc);border-color:color-mix(in srgb,var(--tc) 55%,transparent);background:color-mix(in srgb,var(--tc) 12%,transparent)}

/* ---------- menu ---------- */
#s-menu{position:relative;display:none;place-items:center;text-align:center;padding:24px 16px;background:radial-gradient(120% 80% at 50% 0%,rgba(18,12,8,.55),var(--bg) 78%),url(../img/hero-bg.jpg) center/cover}
#s-menu.on{display:grid}
.menu-box{width:min(560px,100%);display:grid;gap:18px}
.menu-logo{width:min(300px,70vw);margin:0 auto;filter:drop-shadow(0 6px 24px rgba(0,0,0,.6));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-6px)}}
.badge-dev{justify-self:center;font-family:var(--f-label);letter-spacing:.16em;font-size:.78rem;text-transform:uppercase;color:#ffd9a0;border:1px solid var(--gold-deep);padding:3px 14px;border-radius:99px;background:rgba(0,0,0,.35)}
.menu-card{background:rgba(27,19,13,.86);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:10px;padding:20px;display:grid;gap:12px;text-align:left;box-shadow:0 22px 60px rgba(0,0,0,.55)}
.menu-card h3{font-size:1.15rem;color:var(--gold);text-align:center}
.seg{display:grid;grid-auto-flow:column;gap:6px}
.seg button{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 6px;font-family:var(--f-label);letter-spacing:.07em;font-size:.82rem;text-transform:uppercase;color:var(--muted)}
.seg button.on{background:linear-gradient(#4a3520,#33230f);border-color:var(--gold);color:var(--gold2)}
.field-l{font-family:var(--f-label);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:4px 0 -2px}
.menu-foot{font-size:.85rem;color:var(--muted)}
.hint{font-size:.85rem;color:var(--muted);margin:0}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(18,12,8,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .logo{height:34px;width:auto}
.topbar .ttl{font-family:var(--f-display);font-size:1.05rem;color:var(--gold)}
.topbar .sp{flex:1}
.iconbtn{background:transparent;border:1px solid var(--line);border-radius:6px;color:var(--muted);padding:5px 10px;font-family:var(--f-label);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.iconbtn:hover,.iconbtn.on{color:var(--gold2);border-color:var(--gold-deep)}

/* ---------- dados ---------- */
#s-dice{display:none;place-items:center;text-align:center;padding:30px 16px;background:radial-gradient(70% 60% at 50% 40%,#2a1c11,var(--bg))}
#s-dice.on{display:grid}
.dice-row{display:flex;gap:46px;justify-content:center;margin:28px 0}
.die-wrap{display:grid;gap:10px;justify-items:center}
.die{width:96px;height:96px;border-radius:18px;background:linear-gradient(145deg,#f4e8cf,#c9b283);color:#2a1a0c;display:grid;place-items:center;font-family:var(--f-display);font-size:3rem;box-shadow:0 12px 30px rgba(0,0,0,.5),inset 0 -6px 0 rgba(0,0,0,.18);position:relative}
.die.roll{animation:dieRoll .9s cubic-bezier(.3,.7,.3,1) both}
@keyframes dieRoll{0%{transform:rotate(0) scale(.6)}40%{transform:rotate(540deg) scale(1.15) translateY(-26px)}70%{transform:rotate(700deg) scale(.95)}100%{transform:rotate(720deg) scale(1)}}
.die.win{box-shadow:0 0 0 3px var(--gold),0 0 36px rgba(240,203,130,.7)}
.die-name{font-family:var(--f-label);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;font-size:.85rem}
.dice-msg{max-width:520px;margin:0 auto;color:var(--fg)}

/* ---------- draft ---------- */
#s-draft{background:linear-gradient(var(--bg),#160f0a)}
.draft-wrap{display:grid;grid-template-columns:230px minmax(0,1fr) 230px;gap:14px;padding:12px 14px 90px;max-width:1500px;margin:0 auto}
.draft-prompt{grid-column:1/-1;text-align:center;padding:10px 0 2px}
.draft-prompt h2{font-size:clamp(1.15rem,2.4vw,1.6rem);color:var(--gold2)}
.draft-prompt p{margin:4px 0 0;color:var(--muted);font-size:.95rem}
.steps{display:flex;gap:4px;justify-content:center;margin:8px 0 0;flex-wrap:wrap}
.steps i{width:22px;height:8px;border-radius:4px;background:var(--line)}
.steps i.done{background:var(--gold-deep)}.steps i.now{background:var(--gold2);box-shadow:0 0 10px var(--gold)}
.steps i.ban{outline:1px solid rgba(194,74,59,.7)}
.teampanel{background:rgba(33,24,18,.8);border:1px solid var(--line);border-radius:8px;padding:10px;display:grid;gap:8px;align-content:start;align-self:start;position:sticky;top:56px}
.teampanel h3{font-size:1rem;color:var(--gold)}
.teampanel .lbl{font-family:var(--f-label);font-size:.72rem;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;margin-top:4px}
.slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.slot{aspect-ratio:1/1;border:1px dashed var(--line);border-radius:6px;background:rgba(0,0,0,.25);overflow:hidden;position:relative}
.slot img{width:100%;height:100%;object-fit:cover}
.slot.filled{border-style:solid;border-color:var(--c,var(--gold-deep))}
.slot.ban img{filter:grayscale(1) brightness(.55)}
.slot.ban::after{content:"✕";position:absolute;inset:0;display:grid;place-items:center;color:#e86a58;font-size:1.6rem;text-shadow:0 0 6px #000}
.slot.pop{animation:pop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
.draft-main{display:grid;gap:10px;min-width:0}
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center;justify-content:center}
.filters button{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:99px;padding:3px 12px;font-family:var(--f-label);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase}
.filters button.on{color:var(--gold2);border-color:var(--gold)}
.filters input{background:var(--surface);border:1px solid var(--line);border-radius:99px;color:var(--fg);padding:4px 14px;font:inherit;font-size:.9rem;width:160px}
.hgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.tile{position:relative;border:2px solid color-mix(in srgb,var(--c) 70%,#000);border-radius:8px;overflow:hidden;background:#000;padding:0;text-align:left;transition:transform .18s,box-shadow .2s,filter .3s}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(0,0,0,.5),0 0 14px color-mix(in srgb,var(--g) 40%,transparent)}
.tile img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top}
.tile .nm{display:block;padding:3px 6px;font-family:var(--f-label);font-size:.8rem;letter-spacing:.04em;background:linear-gradient(color-mix(in srgb,var(--c) 55%,#000),#1a120c);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .st{position:absolute;top:4px;left:4px;display:flex;gap:3px}
.tile .st span{background:rgba(0,0,0,.65);border-radius:4px;font-size:.72rem;padding:0 5px;font-family:var(--f-label)}
.tile.sel{outline:3px solid var(--gold2);box-shadow:0 0 22px rgba(240,203,130,.6)}
.tile.out{filter:grayscale(.9) brightness(.4);pointer-events:none}
.tile.out::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 46%,rgba(194,74,59,.9) 48%,rgba(194,74,59,.9) 52%,transparent 54%)}
.tile.mine{border-color:var(--gold2)}.tile.mine::before{content:"✓";position:absolute;top:3px;right:6px;color:var(--gold2);font-weight:700;z-index:2}
.detail{position:fixed;right:0;top:0;bottom:0;width:min(420px,92vw);background:linear-gradient(#1f150e,#150e09);border-left:1px solid var(--gold-deep);box-shadow:-20px 0 50px rgba(0,0,0,.6);transform:translateX(104%);transition:transform .32s cubic-bezier(.2,.8,.2,1);z-index:60;overflow:auto;padding:14px;display:grid;gap:10px;align-content:start}
.detail:not(.open){visibility:hidden;pointer-events:none;transition:transform .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
.detail.open{transform:none;visibility:visible}
.detail .card-img{width:min(300px,70%);margin:0 auto;border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.6)}
.detail .x{position:absolute;right:10px;top:8px;background:transparent;border:0;color:var(--muted);font-size:1.6rem}
.abil{border:1px solid var(--line);border-left:3px solid var(--tc,#888);background:rgba(0,0,0,.22);border-radius:6px;padding:8px 10px}
.abil b{font-family:var(--f-label);letter-spacing:.05em}.abil p{margin:3px 0 0;font-size:.92rem;color:#d6c8ae}
.abil .tag{margin-left:6px}
.actionbar{position:fixed;left:0;right:0;bottom:0;padding:10px 14px;display:flex;justify-content:center;gap:10px;background:linear-gradient(transparent,rgba(18,12,8,.96) 40%);z-index:40;pointer-events:none}
.actionbar>*{pointer-events:auto}

/* ---------- batalha ---------- */
#s-battle{background:radial-gradient(90% 60% at 50% 40%,#2a1d12,#130c07 70%)}
.arena{max-width:1180px;margin:0 auto;padding:8px 10px 20px;display:grid;gap:6px}
.side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.side-label{font-family:var(--f-label);letter-spacing:.14em;font-size:.78rem;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.side-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.mid{position:relative;display:grid;place-items:center;min-height:92px}
.banner{font-family:var(--f-display);font-size:clamp(1.05rem,2.6vw,1.5rem);color:var(--gold2);text-align:center;text-shadow:0 2px 12px #000;min-height:1.6em;padding:4px 12px;border-radius:8px}
.banner.pop{animation:bannerPop .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes bannerPop{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
.banner small{display:block;font-family:var(--f-label);font-size:.8rem;letter-spacing:.14em;color:var(--muted);text-transform:uppercase}
.unit{--c:#555;position:relative;border:2px solid color-mix(in srgb,var(--c) 75%,#000);border-radius:12px;background:linear-gradient(#22180f,#140d08);overflow:visible;transition:transform .25s,filter .4s,box-shadow .3s;cursor:pointer;min-width:0}
.unit:hover{box-shadow:0 0 18px color-mix(in srgb,var(--g) 40%,transparent)}
.u-art{position:relative;border-radius:10px 10px 0 0;overflow:hidden;aspect-ratio:16/10}
.u-art img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;transition:filter .4s}
.u-art img.u-fac{position:absolute;left:8px;top:6px;width:26px;height:auto;object-fit:contain}
.u-art::after{content:"";position:absolute;inset:auto 0 0;height:46%;background:linear-gradient(transparent,rgba(10,6,3,.9))}
.u-name{position:absolute;left:8px;bottom:4px;z-index:2;font-family:var(--f-display);font-size:clamp(.9rem,1.9vw,1.15rem);text-shadow:0 2px 6px #000;color:#fff7e6}
.u-fac{position:absolute;left:8px;top:6px;z-index:2;width:26px;opacity:.95;filter:drop-shadow(0 0 5px var(--g))}
.u-ord{position:absolute;right:8px;top:6px;z-index:3;width:30px;height:30px;border-radius:50%;display:none;place-items:center;background:radial-gradient(#f5d58c,#b8832c);color:#2a1a07;font-family:var(--f-display);font-size:1.1rem;border:2px solid #fff3d0;box-shadow:0 2px 8px #000}
.unit.reveal .u-ord{display:grid;animation:ordIn .45s cubic-bezier(.2,1.4,.4,1)}
@keyframes ordIn{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
.u-body{padding:7px 9px 8px;display:grid;gap:5px}
.u-pips{display:flex;gap:2px;flex-wrap:wrap}
.pip{width:9px;height:11px;border-radius:2px 2px 5px 5px;background:#3a2a20;border:1px solid rgba(0,0,0,.4);transition:background .35s,transform .25s}
.pip.on{background:linear-gradient(#e8786a,#a52f24)}.pip.on.hi{background:linear-gradient(#8fe1a6,#3a9a5c)}.pip.over{background:linear-gradient(#f2d27c,#c08a2e)}
.u-line{display:flex;align-items:center;justify-content:space-between;gap:6px;font-family:var(--f-label);letter-spacing:.06em;font-size:.84rem}
.u-line .hpn{color:#f0b3a9}.u-line .atk{color:var(--gold2)}
.u-tags{display:flex;flex-wrap:wrap;gap:3px;min-height:20px}
.u-tags .tg{font-family:var(--f-label);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;padding:0 6px;border-radius:99px;background:rgba(210,164,86,.15);border:1px solid rgba(210,164,86,.4);color:var(--gold2)}
.u-tags .tg.bad{background:rgba(194,74,59,.16);border-color:rgba(194,74,59,.5);color:#ffb3a6}
.u-tags .tg.good{background:rgba(95,191,132,.14);border-color:rgba(95,191,132,.5);color:#b6f0cb}
.u-bubble{position:absolute;left:50%;top:-12px;transform:translate(-50%,-100%);z-index:6;min-width:60%;max-width:112%;text-align:center;background:#f3e4c2;color:#2b1a0b;border-radius:10px;padding:3px 9px;font-family:var(--f-label);font-size:.78rem;letter-spacing:.04em;box-shadow:0 6px 16px rgba(0,0,0,.5);display:none;white-space:nowrap}
.u-bubble::after{content:"";position:absolute;left:50%;bottom:-6px;margin-left:-6px;border:6px solid transparent;border-top-color:#f3e4c2;border-bottom:0}
.unit.reveal .u-bubble{display:block;animation:bubIn .35s ease both}
@keyframes bubIn{from{opacity:0;margin-top:6px}to{opacity:1;margin-top:0}}
.side.top .u-bubble{top:auto;bottom:-12px;transform:translate(-50%,100%)}
.side.top .u-bubble::after{bottom:auto;top:-6px;border-top:0;border-bottom:6px solid #f3e4c2}
.unit.dead{filter:grayscale(1) brightness(.5)}.unit.dead::after{content:"CAIU";position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-display);font-size:1.6rem;letter-spacing:.2em;color:#e86a58;text-shadow:0 0 12px #000}
.unit.removed::after{content:"REMOVIDO"}
.unit.acting{transform:translateY(-6px) scale(1.03);box-shadow:0 0 0 3px var(--gold2),0 0 28px rgba(240,203,130,.55);z-index:5}
.unit.targeted{box-shadow:0 0 0 3px #e46c58,0 0 24px rgba(228,108,88,.5)}
.unit.targeted.ally{box-shadow:0 0 0 3px var(--green),0 0 24px rgba(95,191,132,.45)}
.unit.shake{animation:shake .45s}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}
.unit.flash .u-art::before{content:"";position:absolute;inset:0;z-index:4;background:rgba(255,70,50,.5);animation:flashA .5s forwards}
.unit.glow .u-art::before{content:"";position:absolute;inset:0;z-index:4;background:rgba(95,220,140,.42);animation:flashA .7s forwards}
@keyframes flashA{to{opacity:0}}
.u-fx{position:absolute;inset:0;pointer-events:none;z-index:8;overflow:visible}
.float{position:absolute;left:50%;top:30%;transform:translateX(-50%);font-family:var(--f-display);font-size:2rem;text-shadow:0 2px 0 #000,0 0 10px #000;white-space:nowrap;animation:floatUp 1.5s ease-out forwards}
.float.dmg{color:#ff7d68}.float.heal{color:#8df0b0}.float.txt{font-size:1.05rem;color:var(--gold2);font-family:var(--f-label);letter-spacing:.06em}.float.blk{font-size:1.1rem;color:#9bd0ff;font-family:var(--f-label)}
@keyframes floatUp{0%{opacity:0;transform:translate(-50%,10px) scale(.6)}15%{opacity:1;transform:translate(-50%,0) scale(1.15)}100%{opacity:0;transform:translate(-50%,-62px) scale(1)}}

/* painel do pad */
.padbox{position:relative;margin:6px auto 0;max-width:1180px;border-radius:12px;border:1px solid var(--gold-deep);background:linear-gradient(rgba(14,9,6,.78),rgba(14,9,6,.88)),url(../img/hero-bg.jpg) center/cover;box-shadow:0 18px 50px rgba(0,0,0,.55),inset 0 0 0 1px rgba(210,164,86,.15)}
.padhead{display:flex;align-items:center;gap:10px;padding:8px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.padhead h3{font-size:1.1rem;color:var(--gold2)}
.padhead .sp{flex:1}
.padtabs{display:none;gap:6px;padding:8px 10px 0}
.padtabs button{flex:1;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:5px;font-family:var(--f-label);font-size:.8rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.padtabs button.on{border-color:var(--gold);color:var(--gold2)}
.padcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0}
.pcol{padding:10px 12px 12px;border-right:1px solid var(--line);display:grid;gap:8px;align-content:start;min-width:0}
.pcol:last-child{border-right:0}
.pcol.off{opacity:.45;pointer-events:none}
.ph{display:flex;gap:8px;align-items:center}
.ph img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 15%;border:2px solid var(--c,#555)}
.ph b{font-family:var(--f-display);font-size:1.05rem}.ph span{display:block;font-family:var(--f-label);font-size:.75rem;color:var(--muted);letter-spacing:.06em}
.rlabel{font-family:var(--f-display);letter-spacing:.1em;font-size:.85rem;color:#fff;text-transform:uppercase;opacity:.9}
.ords{display:flex;gap:8px}
.ordb{width:42px;height:38px;border-radius:50%/52%;background:#f4efe6;color:#26180d;border:2px solid transparent;font-family:var(--f-display);font-size:1.15rem;transition:transform .15s,box-shadow .2s,background .2s}
.ordb:hover{transform:scale(1.08)}.ordb.on{background:radial-gradient(#f9dd96,#d29a37);border-color:#fff3d0;box-shadow:0 0 14px rgba(240,203,130,.7)}
.acts{display:grid;gap:6px}
.actb{text-align:left;border:1px solid var(--line);background:rgba(33,24,18,.9);border-left:3px solid var(--tc,#888);border-radius:6px;padding:6px 9px;display:grid;gap:1px;transition:background .2s,border-color .2s,transform .15s;position:relative}
.actb:hover{background:rgba(52,38,26,.95)}
.actb.on{background:linear-gradient(90deg,color-mix(in srgb,var(--tc,#d2a456) 28%,#2b2018),#2b2018);border-color:var(--gold2);box-shadow:0 0 14px rgba(240,203,130,.3)}
.actb .an{font-family:var(--f-label);font-size:.92rem;letter-spacing:.04em;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.actb .at{font-size:.8rem;color:#c9bba2;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.actb:hover .at{-webkit-line-clamp:unset}
.actb[disabled]{opacity:.45;pointer-events:none}.actb .why{font-family:var(--f-label);font-size:.7rem;color:#e89c8e;letter-spacing:.08em;text-transform:uppercase}
.tgts{display:flex;gap:8px;flex-wrap:wrap}
.tg-b{position:relative;width:64px;display:grid;justify-items:center;gap:2px;background:transparent;border:0;padding:0}
.tg-b .circ{width:52px;height:52px;border-radius:50%;overflow:hidden;border:3px solid #f4efe6;background:#000;transition:transform .15s,box-shadow .2s}
.tg-b img{width:100%;height:100%;object-fit:cover;object-position:50% 12%}
.tg-b:hover .circ{transform:scale(1.08)}
.tg-b.on .circ{border-color:var(--gold2);box-shadow:0 0 0 2px #000,0 0 16px rgba(240,203,130,.85)}
.tg-b.on2 .circ{border-color:#8fd0ff;box-shadow:0 0 0 2px #000,0 0 14px rgba(143,208,255,.8)}
.tg-b span{font-family:var(--f-label);font-size:.66rem;letter-spacing:.04em;color:#e6d9bf;text-align:center;line-height:1.1}
.tg-b small{font-size:.62rem;color:#caa;display:block}
.tg-b.dead .circ{filter:grayscale(1) brightness(.5)}
.padfoot{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);flex-wrap:wrap}
.padfoot .warn{flex:1;color:#ffb69d;font-size:.9rem;min-width:200px}
.padfoot .ok{color:#a6e6bb}
.cover{position:fixed;inset:0;z-index:80;display:none;place-items:center;text-align:center;padding:20px;background:radial-gradient(70% 60% at 50% 40%,#2a1c11,#0b0705)}
.cover.on{display:grid}
.cover h2{color:var(--gold2);font-size:clamp(1.4rem,4vw,2.2rem);margin-bottom:8px}.cover p{color:var(--muted);max-width:460px;margin:0 auto 18px}
.modal-back{position:fixed;inset:0;z-index:90;background:rgba(5,3,2,.78);display:none;place-items:center;padding:16px}
.modal-back.on{display:grid;animation:fadeIn .25s}
.modal{width:min(560px,100%);max-height:92dvh;overflow:auto;background:linear-gradient(#271b11,#170f09);border:1px solid var(--gold-deep);border-radius:12px;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.7);display:grid;gap:12px}
.modal h3{color:var(--gold2);font-size:1.3rem}.modal p{margin:0}
.modal .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.optlist{display:grid;gap:8px}
.opt{display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px}
.opt:hover{border-color:var(--gold)}.opt img{width:44px;height:44px;border-radius:50%;object-fit:cover;object-position:50% 12%}
.opt.on{border-color:var(--gold2);background:#3a2a1b}
.dicepop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:50;display:none;text-align:center;pointer-events:none}
.dicepop.on{display:grid;gap:6px;justify-items:center;animation:pop .35s cubic-bezier(.2,1.4,.4,1)}
.dicepop .die{width:78px;height:78px;font-size:2.4rem}
.dicepop .need{font-family:var(--f-label);letter-spacing:.08em;background:rgba(0,0,0,.75);padding:2px 10px;border-radius:99px;font-size:.85rem}
.dicepop .need.ok{color:#9ff0b9}.dicepop .need.no{color:#ffa89a}
.logbox{position:fixed;right:0;top:56px;bottom:0;width:min(380px,92vw);background:rgba(18,12,8,.97);border-left:1px solid var(--line);z-index:50;transform:translateX(104%);transition:transform .3s;display:grid;grid-template-rows:auto 1fr;min-height:0}
.logbox:not(.open){visibility:hidden;transition:transform .3s,visibility 0s .3s}.logbox.open{transform:none;visibility:visible}
.st-tabs{display:flex;border-bottom:1px solid var(--line);background:#120b07}
.st-tabs button{background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer;flex:1;padding:10px 6px;font-family:var(--f-label);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid transparent;line-height:1.2}
.st-tabs button.on{color:var(--gold2);border-bottom-color:var(--gold)}.st-tabs .x{flex:0 0 38px;font-size:1.3rem;padding:0}
.st-pane{display:none;overflow:auto;min-height:0}.st-pane.on{display:block}
#storybody,#priobody{padding:10px 10px 30px;display:grid;gap:8px;align-content:start}
.st-empty{color:var(--muted);font-size:.9rem;line-height:1.5;padding:8px 4px}
.st-turn{border:1px solid var(--line);border-radius:10px;background:rgba(255,255,255,.02)}
.st-turn>summary{cursor:pointer;padding:8px 10px;font-family:var(--f-label);letter-spacing:.12em;text-transform:uppercase;color:var(--gold2);font-size:.82rem}
.st-turn[open]>summary{border-bottom:1px solid var(--line)}
.st-turn>*:not(summary){margin:8px}
.st-step{background:rgba(212,175,106,.06);border:1px solid rgba(212,175,106,.22);border-radius:8px;padding:8px 10px}
.st-sh{font-family:var(--f-label);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.st-tie{font-size:.82rem;color:#d9b6ff;margin-top:4px}
.st-ord{margin:6px 0 4px;padding-left:20px;display:grid;gap:3px;font-size:.84rem}
.st-ord li{color:var(--fg)}.st-ord li.p0::marker{color:#6fd0c0}.st-ord li.p1::marker{color:#ff9a8a}
.st-ord li.did{opacity:.65}.st-ord li.gone,.st-ord li.pre{text-decoration:line-through;opacity:.55}
.st-ord .tag{margin-left:6px;font-size:.7rem;color:#ffb4a8;text-decoration:none;display:inline-block;border:1px solid rgba(255,180,168,.4);border-radius:8px;padding:0 6px}
.st-note{font-size:.76rem;color:var(--muted);line-height:1.4}
.st-card{border-left:3px solid #6fd0c0;background:rgba(0,0,0,.28);border-radius:0 8px 8px 0;padding:7px 9px;display:grid;gap:5px}
.st-card.p1{border-left-color:#ff8a78}.st-card.cancelc{background:rgba(120,40,40,.18)}.st-card.tailc,.st-card.endturn,.st-card.special{border-left-color:var(--gold-deep)}
.st-h{display:flex;gap:8px;align-items:center;font-size:.9rem;line-height:1.35}
.st-av{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:50% 20%;border:1px solid var(--gold-deep);flex:0 0 auto}
.st-t .who{color:var(--gold2)}.st-t i{color:#fff}
.st-t .chip{font-size:.62rem;padding:1px 6px;vertical-align:1px}
.st-line{display:flex;gap:6px;font-size:.86rem;line-height:1.4}.st-line .ic{flex:0 0 1.2em;text-align:center}
.st-line.d{color:#ffb4a8}.st-line.h{color:#a9ecc0}.st-line.b{color:#9bd0ff}.st-line.s{color:#d9b6ff}.st-line.no{color:#ffb4a8}.st-line.ok{color:#a9ecc0}.st-line.m{color:var(--fg)}
.st-why{font-size:.8rem;line-height:1.45;color:#f3e4c2;background:rgba(212,175,106,.12);border-radius:6px;padding:6px 8px}
.st-why b{color:var(--gold2)}
.pr{display:flex;gap:10px;align-items:flex-start;padding:7px 8px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.2)}
.pr .n{flex:0 0 26px;height:26px;border-radius:50%;background:var(--gold-deep);color:#1a1008;display:grid;place-items:center;font-size:.85rem}
.pr .pt{font-size:.84rem;line-height:1.4;margin-top:3px}.pr .pe{font-size:.76rem;color:var(--muted);margin-top:3px}
@media (min-width:1100px){body.story-on .arena{margin-right:392px;max-width:none}}
.logbody{overflow:auto;padding:8px 12px;font-size:.88rem;display:grid;gap:3px;align-content:start}
.logbody div{padding:2px 0;border-bottom:1px dashed rgba(255,255,255,.06)}.logbody .t{color:var(--gold2);font-family:var(--f-label);letter-spacing:.1em;margin-top:8px;border-bottom:1px solid var(--gold-deep)}
.logbody .d{color:#ffb4a8}.logbody .h{color:#a9ecc0}.logbody .b{color:#9bd0ff}.logbody .c{color:#d9b6ff}
.speedbar{display:flex;gap:6px}
.vignette{position:fixed;inset:0;z-index:70;pointer-events:none;opacity:0;background:radial-gradient(circle,transparent 30%,rgba(190,140,70,.55));mix-blend-mode:normal}
.vignette.on{animation:rew 1.6s ease both}
@keyframes rew{0%{opacity:0;filter:hue-rotate(0)}30%{opacity:1}100%{opacity:0;filter:sepia(1)}}
/* ---------- fim ---------- */
#s-over{display:none;place-items:center;text-align:center;padding:24px 14px;background:radial-gradient(80% 60% at 50% 30%,#35230f,var(--bg))}
#s-over.on{display:grid}
.over-box{width:min(680px,100%);display:grid;gap:14px}
.over-box h1{font-size:clamp(2.2rem,8vw,4rem);color:var(--gold2);text-shadow:0 0 30px rgba(240,203,130,.4)}
.over-box.lose h1{color:#d97a6b}.over-box.draw h1{color:#cbbd9f}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{background:rgba(33,24,18,.8);border:1px solid var(--line);border-radius:8px;padding:8px}
.stat b{display:block;font-family:var(--f-display);font-size:1.5rem;color:var(--gold2)}.stat span{font-family:var(--f-label);font-size:.72rem;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.teamshow{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.teamshow .ts{width:96px;display:grid;gap:3px}.teamshow img{border-radius:8px;border:2px solid var(--c)}.teamshow span{font-family:var(--f-label);font-size:.8rem}
/* ---------- galeria / ajuda ---------- */
#s-gallery,#s-help{background:linear-gradient(var(--bg),#160f0a)}
.page{max-width:1100px;margin:0 auto;padding:14px 14px 60px;display:grid;gap:14px}
.page h2{font-size:1.6rem;color:var(--gold2)}
.prio{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:6px}
.prio div{display:flex;gap:8px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:4px 10px}
.prio b{font-family:var(--f-display);color:var(--gold);width:1.6em}
.help p,.help li{color:#d9ccb3}.help ul{margin:6px 0 0;padding-left:20px}.help h3{margin-top:8px;color:var(--gold)}

/* ---------- responsivo ---------- */
@media (max-width:980px){
  .draft-wrap{grid-template-columns:1fr;padding-bottom:110px}
  .teampanel{position:static;grid-template-columns:auto 1fr 1fr;align-items:center}
  .teampanel h3{grid-column:1/-1}.teampanel .lbl{display:none}
  .teampanel .slot-row{grid-column:auto}
  .hgrid{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))}
  .detail{top:auto;left:0;width:100%;height:min(78dvh,640px);border-left:0;border-top:1px solid var(--gold-deep);border-radius:16px 16px 0 0;transform:translateY(104%)}
  .detail.open{transform:none}
}
@media (max-width:820px){
  .padtabs{display:flex}
  .padcols{grid-template-columns:1fr}.pcol{display:none;border-right:0}.pcol.act-tab{display:grid}
  .side{gap:6px}.u-art{aspect-ratio:1/1}.unit{border-radius:9px}
  .u-name{font-size:.82rem}.u-art img.u-fac{width:18px}.u-ord{width:24px;height:24px;font-size:.9rem}
  .u-body{padding:5px 6px 6px}.pip{width:6px;height:8px}.u-line{font-size:.72rem}.u-tags .tg{font-size:.55rem;padding:0 4px}
  .u-bubble{font-size:.62rem;padding:2px 5px;white-space:normal;min-width:100%}
  .stats{grid-template-columns:repeat(2,1fr)}
  .dice-row{gap:26px}
  .topbar .ttl{display:none}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- Tutorial ---------- */
.tut-card h3{margin-bottom:2px}
.tutlist{display:grid;gap:8px}
.tutbtn{display:flex;align-items:center;gap:12px;text-align:left;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:linear-gradient(#2b2018,#1f160f);color:var(--fg);transition:border-color .2s,transform .15s}
.tutbtn:hover{border-color:var(--gold);transform:translateY(-1px)}
.tutbtn .tn{flex:0 0 30px;height:30px;border-radius:50%;background:var(--gold-deep);color:#1a1008;display:grid;place-items:center;font-weight:700}
.tutbtn .tt{flex:1;display:grid;line-height:1.25}.tutbtn .tt b{font-family:var(--f-display);color:var(--gold2)}.tutbtn .tt small{color:var(--muted);font-size:.8rem}
.tutbtn .tk{color:var(--gold);font-size:1.1rem}.tutbtn.done .tk{color:var(--green)}.tutbtn.done .tn{background:var(--green)}
.tut-k{font-family:var(--f-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.tut-body{font-size:.98rem;line-height:1.55;color:var(--fg);text-align:left}
.tut-body p{margin:.6em 0}.tut-body ul{padding-left:1.2em;display:grid;gap:7px;margin:.6em 0}
.modal ul.tut-body{list-style:disc}
.coach{border:1px solid var(--gold-deep);background:linear-gradient(#2d2115,#1f160e);border-radius:12px;padding:12px 14px;margin:0 0 12px;display:grid;gap:8px;box-shadow:0 0 0 1px rgba(212,175,106,.12),0 6px 22px rgba(0,0,0,.4)}
.coach.ok{border-color:var(--green)}
.coach-h{display:grid;gap:2px}.coach-h b{font-family:var(--f-display);color:var(--gold2);font-size:1.1rem}
.coach p{margin:0;line-height:1.5;font-size:.95rem}
.coach-l{margin:0;padding-left:18px;display:grid;gap:3px;font-size:.9rem;color:#e7d9bc}
.coach-f{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}.coach-s{font-size:.84rem;color:var(--muted)}.coach.ok .coach-s{color:#a9ecc0}
.need{outline:2px solid var(--gold2);outline-offset:2px;animation:needp 1.1s ease-in-out infinite;position:relative}
@keyframes needp{0%,100%{box-shadow:0 0 0 0 rgba(240,203,130,.55)}50%{box-shadow:0 0 14px 4px rgba(240,203,130,.5)}}
.tg-b.need{border-radius:10px}

/* ---------- Fagulha, a mascote ---------- */
.mascot-box{width:100%;aspect-ratio:220/240;position:relative}
.mascot{width:100%;height:100%;overflow:visible;display:block}
.mascot .m-all{animation:mbob 3.2s ease-in-out infinite;transform-origin:110px 230px}
@keyframes mbob{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-4px) scale(1.012,.99)}}
.mascot .m-tail{transform-origin:150px 190px;animation:mtail 2.4s ease-in-out infinite}
@keyframes mtail{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.mascot .m-flame{transform-box:fill-box;transform-origin:50% 100%;animation:mflame .5s ease-in-out infinite alternate}
@keyframes mflame{from{transform:scale(1,1)}to{transform:scale(.88,1.14)}}
.mascot .m-wl{transform-origin:70px 142px;animation:mflapl 2.2s ease-in-out infinite}.mascot .m-wr{transform-origin:150px 142px;animation:mflapr 2.2s ease-in-out infinite}
@keyframes mflapl{0%,100%{transform:rotate(0)}50%{transform:rotate(-9deg)}}@keyframes mflapr{0%,100%{transform:rotate(0)}50%{transform:rotate(9deg)}}
.mascot .m-eye{transform-box:fill-box;transform-origin:center;animation:mblink 4.8s infinite}
@keyframes mblink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.mascot .m-eyes,.mascot .m-brows,.mascot .m-arm,.mascot .m-head{transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.mascot .m-head{transform-origin:110px 150px}
.mascot .mo{display:none}
.mascot[data-mood=happy] .mo-smile,.mascot[data-mood=cheer] .mo-smile{display:block}
.mascot[data-mood=think] .mo-flat{display:block}
.mascot[data-mood=wow] .mo-o{display:block}
.mascot[data-mood=think] .m-eyes{transform:translate(-4px,-5px)}
.mascot[data-mood=think] .b-r{transform:translateY(-6px) rotate(-6deg);transform-box:fill-box;transform-origin:center}
.mascot[data-mood=think] .m-head{transform:rotate(-5deg)}
.mascot[data-mood=wow] .m-eyes{transform:scale(1.1);transform-origin:110px 102px}
.mascot[data-mood=wow] .m-brows{transform:translateY(-7px)}
.mascot[data-mood=cheer] .m-al{transform-origin:62px 172px;transform:rotate(130deg)}
.mascot[data-mood=cheer] .m-ar{transform-origin:158px 172px;transform:rotate(-130deg)}
.mascot .m-sparks{opacity:0;transition:opacity .3s}
.mascot[data-mood=cheer] .m-sparks{opacity:1;animation:mspark 1.2s ease-in-out infinite alternate}
@keyframes mspark{from{transform:scale(.85) rotate(-4deg);transform-origin:110px 80px}to{transform:scale(1.08) rotate(4deg);transform-origin:110px 80px}}
.mascot-box.talking .mascot .mo{display:none}
.mascot-box.talking .mascot .mo-open{display:block;transform-box:fill-box;transform-origin:50% 0;animation:mtalk .26s ease-in-out infinite alternate}
@keyframes mtalk{from{transform:scaleY(.35)}to{transform:scaleY(1.05)}}
.mascot-box.talking .mascot .m-head{animation:mnod .5s ease-in-out infinite alternate}
@keyframes mnod{from{transform:rotate(-1.6deg)}to{transform:rotate(1.6deg) translateY(1px)}}
.tut-name{display:block;text-align:center;font-family:var(--f-label);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.modal.tutwide{width:min(780px,94vw);max-width:780px;text-align:left}
.tutrow{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:end}
.tut-mascot{align-self:end}
.tut-bubble{position:relative;background:linear-gradient(#2d2115,#21170f);border:1px solid var(--gold-deep);border-radius:16px;padding:16px 18px;display:grid;gap:10px;box-shadow:0 8px 28px rgba(0,0,0,.45)}
.tut-bubble::before{content:"";position:absolute;left:-10px;bottom:54px;width:18px;height:18px;background:#2a1e14;border-left:1px solid var(--gold-deep);border-bottom:1px solid var(--gold-deep);transform:rotate(45deg)}
.tut-bubble h3{margin:0;color:var(--gold2)}
.tut-bubble .row{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:4px}
.coach{grid-template-columns:96px 1fr;align-items:end;gap:14px}
.coach-m{align-self:end}.coach-main{display:grid;gap:8px;min-width:0}
.tut-hello{display:flex;align-items:center;gap:12px;justify-content:center;margin:-4px 0 4px}
.tut-hello .mascot-box{width:74px;flex:0 0 74px}.tut-hello .tut-name{text-align:left;letter-spacing:.06em;text-transform:none;font-size:.95rem;color:var(--gold2)}
@media (max-width:620px){
  .tutrow{grid-template-columns:1fr;gap:6px}
  .tut-mascot{display:flex;align-items:flex-end;gap:10px}.tut-mascot .mascot-box{width:92px;flex:0 0 92px}
  .tut-bubble::before{left:36px;bottom:auto;top:-10px;transform:rotate(135deg)}
  .coach{grid-template-columns:1fr}.coach-m{display:flex;align-items:flex-end;gap:8px}.coach-m .mascot-box{width:70px;flex:0 0 70px}
}

/* duelo final */
.modal.duel{max-width:560px;text-align:center}
.duel-vs{display:flex;align-items:center;justify-content:center;gap:18px;margin:8px 0}
.duel-vs>div:not(.vs){display:flex;flex-direction:column;align-items:center;gap:3px}
.duel-vs img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:2px solid var(--gold,#d9a441)}
.duel-vs .vs{font-size:28px;opacity:.7}
.duel-story{font-style:italic;line-height:1.55;margin:10px 0 14px}
.duel-dice{display:flex;justify-content:center;gap:26px;margin:8px 0}
.duel-dice>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.duel-dice b{font-size:34px}
.actb.tipo-rest{border-color:rgba(120,170,200,.5)}