/* =====================================================================
   MixVerse — estilo compartilhado do portal
   ===================================================================== */
:root{
  --bg0:#0b0a22; --bg1:#141036; --bg2:#1e1850; --bg3:#2a2168;
  --panel:#171341; --panel2:#201a55; --line:#3b3180;
  --ink:#f4efff; --muted:#b9b1dc; --dim:#8c84b8;
  --gold:#f5cf6b; --gold2:#ffe7a3; --gold3:#b8862e; --gold4:#7a5518;
  --accent:#8e7bff; --accent2:#5ce1ff; --good:#7ee08a; --bad:#ff7a8a;
  --radius:18px; --radius-s:12px;
  --shadow:0 18px 40px -18px rgba(0,0,0,.75), 0 2px 0 rgba(255,255,255,.03) inset;
  --gold-grad:linear-gradient(135deg,#fff2c0 0%,#f5cf6b 22%,#b8862e 50%,#f5cf6b 78%,#fff2c0 100%);
  --panel-grad:linear-gradient(180deg,rgba(40,32,104,.92),rgba(22,18,64,.94));
  --font-display:'Macondo', 'Georgia', serif;
  --font-body:'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw:1200px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg0)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}
body{
  margin:0;min-height:100vh;display:flex;flex-direction:column;
  font-family:var(--font-body);font-size:16px;line-height:1.55;color:var(--ink);
  background:transparent;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--gold2);text-decoration-color:rgba(245,207,107,.4);text-underline-offset:3px}
a:hover{color:#fff}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;line-height:1.15;margin:0 0 .5em;letter-spacing:.01em}
h1{font-size:clamp(2.1rem,4.5vw,3.4rem)}
h2{font-size:clamp(1.6rem,3vw,2.2rem)}
h3{font-size:1.35rem}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:8px}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--gold);color:#241a05;padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.skip:focus{top:12px}

/* ---------- céu: estrelas, névoa, partículas ---------- */
.sky{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 80% -10%, rgba(142,123,255,.28), transparent 60%),
    radial-gradient(900px 600px at -10% 20%, rgba(92,225,255,.12), transparent 60%),
    radial-gradient(1000px 800px at 50% 120%, rgba(214,90,255,.18), transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1) 45%,#120e36)}
.sky .stars,.sky .stars2{position:absolute;inset:-50% -10%;background-repeat:repeat;opacity:.8}
.sky .stars{background-image:
  radial-gradient(1.2px 1.2px at 20px 30px,#fff,transparent),
  radial-gradient(1px 1px at 120px 80px,#cfd8ff,transparent),
  radial-gradient(1.4px 1.4px at 200px 160px,#fff5d0,transparent),
  radial-gradient(1px 1px at 60px 200px,#fff,transparent),
  radial-gradient(1.2px 1.2px at 260px 40px,#d8ccff,transparent);
  background-size:300px 240px;animation:drift 120s linear infinite}
.sky .stars2{background-image:
  radial-gradient(1.6px 1.6px at 50px 90px,#fff,transparent),
  radial-gradient(1.2px 1.2px at 330px 260px,#bff4ff,transparent),
  radial-gradient(2px 2px at 180px 330px,rgba(255,231,163,.9),transparent);
  background-size:420px 380px;animation:drift 200s linear infinite reverse, twinkle 5s ease-in-out infinite alternate;opacity:.6}
.sky .fog{position:absolute;left:-20%;right:-20%;height:55vh;filter:blur(40px);opacity:.5}
.sky .fog.a{bottom:-18vh;background:radial-gradient(closest-side,rgba(142,123,255,.45),transparent),radial-gradient(closest-side at 70% 50%,rgba(92,225,255,.25),transparent);animation:fog 40s ease-in-out infinite alternate}
.sky .fog.b{top:25vh;background:radial-gradient(closest-side at 30% 50%,rgba(214,90,255,.22),transparent);animation:fog 60s ease-in-out infinite alternate-reverse}
.sky .mote{position:absolute;bottom:-20px;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#fff6cf 0,rgba(245,207,107,.8) 40%,transparent 70%);animation:rise linear infinite;opacity:0}
@keyframes drift{to{transform:translate3d(-300px,-240px,0)}}
@keyframes twinkle{from{opacity:.25}to{opacity:.75}}
@keyframes fog{from{transform:translateX(-6%)}to{transform:translateX(6%)}}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:.9}90%{opacity:.6}100%{transform:translate(var(--dx,30px),-105vh);opacity:0}}

/* ---------- cabeçalho ---------- */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(245,207,107,.25);box-shadow:0 10px 30px -20px #000}
.site-header::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,10,34,.92),rgba(11,10,34,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--gold) 30%,var(--gold2) 50%,var(--gold) 70%,transparent);opacity:.6}
.nav-wrap{max-width:var(--maxw);margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:18px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.logo .gem{width:34px;height:34px;border-radius:10px;transform:rotate(45deg);background:conic-gradient(from 0deg,#ff6a3d,#f5cf6b,#6cd24a,#5ce1ff,#9a8cff,#d05aff,#ff6a3d);box-shadow:0 0 0 2px #2a1d05,0 0 0 4px var(--gold),0 0 22px rgba(245,207,107,.55)}
.logo .word{font-family:var(--font-display);font-size:1.75rem;line-height:1;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #3a2508) drop-shadow(0 0 12px rgba(245,207,107,.35))}
.logo .word b{font-weight:400;background:linear-gradient(135deg,#bff4ff,#8e7bff);-webkit-background-clip:text;background-clip:text}
.main-nav{flex:1;min-width:0}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;justify-content:center;flex-wrap:nowrap}
.main-nav a{display:block;padding:8px 11px;border-radius:10px;color:var(--muted);text-decoration:none;font-weight:800;font-size:.93rem;white-space:nowrap;transition:color .2s,background .2s}
.main-nav a:hover{color:#fff;background:rgba(142,123,255,.16)}
.main-nav a[aria-current="page"]{color:var(--gold2);background:linear-gradient(180deg,rgba(245,207,107,.16),rgba(245,207,107,.04));box-shadow:inset 0 -2px 0 var(--gold)}
.main-nav a.play{color:#241a05;background:var(--gold-grad);box-shadow:0 0 16px rgba(245,207,107,.35)}
.main-nav a.play:hover{filter:brightness(1.1)}
.user-chip{flex:none;display:flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px;text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem;background:rgba(142,123,255,.14);border:1px solid rgba(245,207,107,.35);max-width:200px}
.user-chip:hover{background:rgba(142,123,255,.26);color:#fff}
.user-chip .av{width:28px;height:28px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff2c0,#b8862e);display:grid;place-items:center;color:#2a1d05;font-family:var(--font-display);font-size:1rem;flex:none;overflow:hidden}
.user-chip .av img{width:100%;height:100%;object-fit:cover;object-position:top}
.user-chip .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:12px;border:1px solid rgba(245,207,107,.4);background:rgba(142,123,255,.14);cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{position:absolute;left:11px;right:11px;height:2px;background:var(--gold2);border-radius:2px;content:"";transition:transform .25s,opacity .2s}
.burger span{top:21px}.burger span::before{top:-7px;left:0;right:0}.burger span::after{top:7px;left:0;right:0}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1180px){ .main-nav a{padding:8px 8px;font-size:.88rem} }
@media (max-width:1060px){
  .burger{display:block}
  .user-chip{order:2}
  .burger{order:3;margin-left:0}
  .logo{margin-right:auto}
  .main-nav{position:fixed;top:64px;left:0;right:0;bottom:0;background:#0b0a22;padding:18px 16px 40px;overflow:auto;transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s}
  .main-nav.open{opacity:1;transform:none;visibility:visible}
  .main-nav ul{flex-direction:column;gap:6px;max-width:520px;margin:0 auto}
  .main-nav a{font-size:1.15rem;padding:14px 18px;border:1px solid var(--line);background:rgba(32,26,85,.6)}
  .main-nav a.play{text-align:center}
}
@media (max-width:420px){ .user-chip .nm{max-width:78px} .logo .word{font-size:1.5rem} .nav-wrap{padding:10px 16px;gap:10px} }
body.nav-open{overflow:hidden}

/* ---------- layout ---------- */
main{flex:1;width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
@media (max-width:600px){.wrap{padding:0 16px}}
.page-head{padding:48px 0 22px;text-align:center;position:relative}
.page-head .kicker{display:block;font-weight:900;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--accent2);margin-bottom:8px}
.page-head h1{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:.25em;display:inline-block;padding:0 .1em}
.page-head::before{content:"";position:absolute;left:50%;top:40px;width:min(520px,90%);height:120px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(245,207,107,.16),transparent);pointer-events:none;z-index:-1}
.page-head p{color:var(--muted);max-width:640px;margin:0 auto;font-size:1.06rem}
.ornament{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px auto 0;color:var(--gold)}
.ornament::before,.ornament::after{content:"";height:1px;width:min(140px,25vw);background:linear-gradient(90deg,transparent,var(--gold))}
.ornament::after{transform:scaleX(-1)}
.ornament i{width:10px;height:10px;transform:rotate(45deg);background:var(--gold);box-shadow:0 0 12px var(--gold)}
section{margin:0 0 56px}
.section-title{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.section-title h2{margin:0;color:var(--gold2)}
.section-title .line{flex:1;height:1px;background:linear-gradient(90deg,rgba(245,207,107,.6),transparent)}
.section-title a{font-weight:800;font-size:.92rem;white-space:nowrap}

/* ---------- painel dourado ---------- */
.panel{
  position:relative;border-radius:var(--radius);padding:22px;
  background:var(--panel-grad) padding-box, linear-gradient(160deg,rgba(255,242,192,.85),rgba(184,134,46,.55) 30%,rgba(59,49,128,.7) 60%,rgba(245,207,107,.7)) border-box;
  border:1.5px solid transparent;box-shadow:var(--shadow);
}
.panel.soft{background:linear-gradient(180deg,rgba(32,26,85,.7),rgba(22,18,64,.75)) padding-box, linear-gradient(160deg,rgba(245,207,107,.45),rgba(59,49,128,.6)) border-box}
.panel h3{color:var(--gold2)}
.corner::before,.corner::after{content:"";position:absolute;width:16px;height:16px;border:2px solid var(--gold);opacity:.8;pointer-events:none}
.corner::before{top:7px;left:7px;border-right:0;border-bottom:0;border-top-left-radius:8px}
.corner::after{bottom:7px;right:7px;border-left:0;border-top:0;border-bottom-right-radius:8px}

/* ---------- botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;border-radius:14px;border:0;cursor:pointer;font-weight:900;text-decoration:none;letter-spacing:.02em;transition:transform .15s,filter .2s,box-shadow .2s;min-height:44px}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-gold{color:#2a1d05;background:var(--gold-grad);background-size:200% 200%;box-shadow:0 0 0 2px #3a2508,0 0 0 4px rgba(245,207,107,.5),0 10px 30px -8px rgba(245,207,107,.6);text-shadow:0 1px 0 rgba(255,255,255,.4)}
.btn-gold:hover{color:#2a1d05;filter:brightness(1.08);background-position:100% 0}
.btn-arcane{color:#fff;background:linear-gradient(135deg,#6a52ff,#b25cff);box-shadow:0 0 0 2px #1c0f4a,0 0 0 4px rgba(142,123,255,.55),0 10px 30px -8px rgba(142,123,255,.7)}
.btn-arcane:hover{color:#fff;filter:brightness(1.12)}
.btn-ghost{color:var(--ink);background:rgba(142,123,255,.12);border:1px solid rgba(245,207,107,.4)}
.btn-ghost:hover{color:#fff;background:rgba(142,123,255,.24)}
.btn-lg{font-family:var(--font-display);font-weight:400;font-size:1.45rem;padding:16px 34px;border-radius:18px;letter-spacing:.04em}
.btn[disabled],.btn.disabled{opacity:.5;cursor:not-allowed;transform:none;filter:grayscale(.4)}
.btn .ico{font-size:1.1em}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:900;letter-spacing:.02em;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);white-space:nowrap;line-height:1.5}
.chip .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.chip.tribe{border-color:color-mix(in srgb,currentColor 45%,transparent);background:color-mix(in srgb,currentColor 12%,transparent)}
.chip.rank{border-color:color-mix(in srgb,currentColor 55%,transparent);background:color-mix(in srgb,currentColor 12%,transparent)}
.chip.lvl{color:var(--gold2);border-color:rgba(245,207,107,.4)}
.chips{display:flex;flex-wrap:wrap;gap:6px}

/* ---------- formulários ---------- */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-weight:800;font-size:.9rem;color:var(--muted)}
.input,select.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(11,10,34,.65);color:var(--ink);font:inherit;font-weight:700;min-height:46px}
.input::placeholder{color:var(--dim)}
.input:focus{outline:none;border-color:var(--accent2);box-shadow:0 0 0 3px rgba(92,225,255,.25)}
select.input{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
select.input option{background:var(--bg1)}
.toolbar{display:flex;flex-wrap:wrap;gap:12px;align-items:end;margin-bottom:22px;padding:16px}
.toolbar .field{margin:0;flex:1 1 180px}
.toolbar .field.grow{flex:2 1 260px}
.search{position:relative}
.search .input{padding-left:40px}
.search::before{content:"";position:absolute;left:14px;top:50%;width:12px;height:12px;border:2px solid var(--gold);border-radius:50%;transform:translateY(-62%)}
.search::after{content:"";position:absolute;left:25px;top:calc(50% + 4px);width:7px;height:2px;background:var(--gold);transform:rotate(45deg)}
.count{color:var(--muted);font-weight:800;font-size:.92rem;margin:-8px 0 16px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:6px;padding:6px;border-radius:16px;background:rgba(11,10,34,.55);border:1px solid var(--line);overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1 0 auto;padding:10px 16px;border-radius:12px;border:0;background:transparent;color:var(--muted);font-weight:900;cursor:pointer;white-space:nowrap;min-height:44px}
.tab:hover{color:#fff;background:rgba(142,123,255,.14)}
.tab[aria-selected="true"]{color:#2a1d05;background:var(--gold-grad);box-shadow:0 4px 16px -4px rgba(245,207,107,.6)}

/* ---------- cartões de monstro ---------- */
.grid{display:grid;gap:16px}
.mon-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.mon-card{--tc:#9a8cff;position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 14px 16px;border-radius:var(--radius);cursor:pointer;color:inherit;text-decoration:none;
  background:radial-gradient(120% 70% at 50% 0%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%),linear-gradient(180deg,rgba(40,32,104,.85),rgba(22,18,64,.92));
  border:1.5px solid color-mix(in srgb,var(--tc) 35%,#3b3180);transition:transform .2s,box-shadow .25s,border-color .25s;width:100%;font:inherit}
.mon-card:hover,.mon-card:focus-visible{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 0 0 1px rgba(245,207,107,.5),0 14px 34px -10px color-mix(in srgb,var(--tc) 70%,transparent),0 0 30px -6px rgba(245,207,107,.35)}
.mon-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.12) 45%,transparent 60%);background-size:250% 100%;background-position:120% 0;transition:background-position .7s;pointer-events:none}
.mon-card:hover::after{background-position:-40% 0}
.mon-card .num{position:absolute;top:10px;left:12px;font-size:.75rem;font-weight:900;color:var(--dim)}
.mon-card .rk{position:absolute;top:10px;right:10px}
.portrait{position:relative;width:112px;height:112px;display:grid;place-items:center;margin:6px 0 8px}
.portrait::before{content:"";position:absolute;inset:8px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--tc) 45%,transparent),transparent 70%);filter:blur(4px)}
.portrait::after{content:"";position:absolute;left:18%;right:18%;bottom:4px;height:10px;border-radius:50%;background:rgba(0,0,0,.45);filter:blur(3px)}
.portrait img{position:absolute;inset:0;margin:auto;z-index:1;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.4));transition:transform .3s}
.mon-card:hover .portrait img{transform:scale(1.08) translateY(-3px)}
.mon-card h3{font-size:1.3rem;margin:0 0 6px;color:#fff}
.mon-card .chips{justify-content:center}
.mon-card .meta{margin-top:10px;font-size:.84rem;color:var(--muted);font-weight:700}
.mon-card .meta b{color:var(--ink)}
.noimg{width:70%;height:70%;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff8,var(--tc));display:grid;place-items:center;font-family:var(--font-display);font-size:2rem;color:#1a1040;position:relative;z-index:1}

/* mini monstro (fórmulas, listas) */
.mini{--tc:#9a8cff;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:0;background:none;padding:4px;cursor:pointer;color:inherit;border-radius:14px;min-width:0}
.mini .portrait{width:78px;height:78px;margin:0}
.mini .nm{font-weight:900;font-size:.9rem;line-height:1.15;color:#fff}
.mini .sub{font-size:.74rem;font-weight:800;color:var(--muted)}
.mini:hover .portrait img{transform:scale(1.1)}
.mini:hover .nm{color:var(--gold2)}
.mini.sm .portrait{width:56px;height:56px}
.mini.sm .nm{font-size:.8rem}

/* ---------- fórmulas ---------- */
.f-grid{grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
@media (max-width:420px){.f-grid{grid-template-columns:1fr}}
.f-card{--tc:#9a8cff;padding:16px 14px 14px;border-radius:var(--radius);background:radial-gradient(90% 80% at 85% 20%,color-mix(in srgb,var(--tc) 22%,transparent),transparent 70%),linear-gradient(180deg,rgba(40,32,104,.85),rgba(22,18,64,.92));border:1.5px solid color-mix(in srgb,var(--tc) 30%,#3b3180);transition:transform .2s,box-shadow .25s,border-color .25s}
.f-card:hover{transform:translateY(-3px);border-color:rgba(245,207,107,.7);box-shadow:0 14px 34px -12px color-mix(in srgb,var(--tc) 70%,transparent),0 0 24px -8px rgba(245,207,107,.35)}
.f-eq{display:grid;grid-template-columns:1fr auto 1fr auto 1.15fr;align-items:center;gap:2px}
.f-op{font-family:var(--font-display);font-size:1.8rem;color:var(--gold);text-shadow:0 0 12px rgba(245,207,107,.6);line-height:1}
.f-res .portrait{width:92px;height:92px}
.f-res .portrait::before{background:radial-gradient(circle,color-mix(in srgb,var(--tc) 70%,transparent),transparent 70%)}
.f-res .nm{color:var(--gold2);font-size:1rem}
.f-foot{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;align-items:center;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(245,207,107,.25);font-size:.8rem;font-weight:800;color:var(--muted)}
.f-list{display:flex;flex-direction:column;gap:10px}
.f-row{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:center;gap:4px;padding:8px;border-radius:14px;background:rgba(11,10,34,.45);border:1px solid var(--line)}
.f-row .f-op{font-size:1.4rem}

/* ---------- modal ---------- */
.modal-back{position:fixed;inset:0;z-index:100;background:rgba(5,4,18,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;opacity:0;transition:opacity .2s}
.modal-back.show{opacity:1}
.modal{width:min(820px,100%);max-height:calc(100vh - 40px);overflow:auto;padding:0;transform:translateY(10px) scale(.98);transition:transform .25s}
.modal-back.show .modal{transform:none}
.modal .close{position:absolute;top:12px;right:12px;width:42px;height:42px;border-radius:12px;border:1px solid rgba(245,207,107,.5);background:rgba(11,10,34,.7);color:var(--gold2);font-size:1.5rem;cursor:pointer;z-index:3;line-height:1}
.modal .close:hover{background:rgba(142,123,255,.3)}
.sheet-top{--tc:#9a8cff;display:grid;grid-template-columns:230px 1fr;gap:22px;padding:26px;border-bottom:1px solid rgba(245,207,107,.2);background:radial-gradient(80% 120% at 0% 0%,color-mix(in srgb,var(--tc) 30%,transparent),transparent 70%);border-radius:var(--radius) var(--radius) 0 0}
.sheet-top .portrait{width:210px;height:210px;margin:0 auto}
.sheet-top h2{margin:0 0 8px;color:#fff;font-size:2.2rem}
.sheet-top .desc{color:var(--muted);font-size:1.05rem;margin:12px 0 0}
.sheet-body{padding:22px 26px 26px;display:grid;gap:20px}
.sheet-body h4{font-size:1.2rem;color:var(--gold2);margin:0 0 10px}
.statline{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.stat{padding:10px 12px;border-radius:12px;background:rgba(11,10,34,.5);border:1px solid var(--line)}
.stat small{display:block;color:var(--dim);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em}
.stat b{font-size:1.05rem}
.skillbox{padding:14px 16px;border-radius:14px;background:linear-gradient(90deg,rgba(142,123,255,.18),rgba(92,225,255,.06));border:1px solid rgba(142,123,255,.4)}
.skillbox b{font-family:var(--font-display);font-weight:400;font-size:1.25rem;color:#fff}
.skillbox p{margin:4px 0 0;color:var(--muted);font-weight:700}
@media (max-width:680px){
  .sheet-top{grid-template-columns:1fr;text-align:center;padding:22px 16px 18px}
  .sheet-top .portrait{width:160px;height:160px}
  .sheet-top .chips{justify-content:center}
  .sheet-top h2{font-size:1.9rem}
  .sheet-body{padding:18px 16px 20px}
  .modal-back{padding:10px}
  .modal{max-height:calc(100vh - 20px)}
}

/* ---------- estados ---------- */
.empty{text-align:center;padding:40px 20px;color:var(--muted)}
.empty .glyph{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;display:grid;place-items:center;font-size:2rem;background:radial-gradient(circle at 35% 30%,rgba(245,207,107,.35),rgba(142,123,255,.15));border:1px solid rgba(245,207,107,.4);color:var(--gold2);font-family:var(--font-display)}
.empty h3{color:var(--ink);margin-bottom:6px}
.empty p{max-width:420px;margin:0 auto 14px}
.skeleton{border-radius:14px;background:linear-gradient(90deg,rgba(142,123,255,.08),rgba(142,123,255,.2),rgba(142,123,255,.08));background-size:200% 100%;animation:shimmer 1.4s linear infinite;min-height:20px}
@keyframes shimmer{to{background-position:-200% 0}}
.notice{padding:12px 16px;border-radius:12px;font-weight:800;border:1px solid;margin-bottom:14px}
.notice.err{color:#ffd0d6;background:rgba(255,122,138,.12);border-color:rgba(255,122,138,.5)}
.notice.ok{color:#d4ffd9;background:rgba(126,224,138,.12);border-color:rgba(126,224,138,.5)}

/* ---------- tabelas ---------- */
.table-wrap{overflow-x:auto;border-radius:var(--radius)}
table.tbl{width:100%;border-collapse:separate;border-spacing:0}
.tbl th{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--dim);font-weight:900;text-align:left;padding:10px 14px;border-bottom:1px solid rgba(245,207,107,.3)}
.tbl td{padding:12px 14px;border-bottom:1px solid rgba(59,49,128,.6);font-weight:700;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums}

/* ---------- rodapé ---------- */
.site-footer{margin-top:40px;border-top:1px solid rgba(245,207,107,.2);background:linear-gradient(180deg,rgba(11,10,34,.4),rgba(5,4,18,.9));padding:34px 0 26px;color:var(--dim);font-size:.9rem}
.site-footer .cols{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:flex-start}
.site-footer .logo .word{font-size:1.5rem}
.site-footer nav ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);gap:6px 26px}
.site-footer nav a{color:var(--muted);text-decoration:none;font-weight:700}
.site-footer nav a:hover{color:var(--gold2)}
.site-footer .legal{margin-top:22px;padding-top:16px;border-top:1px solid rgba(59,49,128,.6);text-align:center;font-size:.82rem}
@media (max-width:560px){.site-footer nav ul{grid-template-columns:repeat(2,auto)}}

/* ---------- utilidades ---------- */
.muted{color:var(--muted)}
.gold{color:var(--gold2)}
.center{text-align:center}
.mt{margin-top:18px}
.hide{display:none!important}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media (max-width:860px){.two-col{grid-template-columns:1fr}}
kbd{display:inline-block;min-width:30px;padding:4px 9px;border-radius:8px;background:linear-gradient(180deg,#342a80,#221b5c);border:1px solid rgba(245,207,107,.45);box-shadow:0 3px 0 #0b0a22;font:900 .82rem var(--font-body);color:var(--gold2);text-align:center;white-space:nowrap}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
.sheet-body>*,.two-col>*{min-width:0}
.sheet-body .chips .chip{white-space:normal;text-align:left}
@media (max-width:680px){ .statline{grid-template-columns:1fr 1fr} .statline .stat:first-child{grid-column:1/-1} .f-row{padding:6px 4px} .f-row .mini.sm .portrait{width:48px;height:48px} }
.modal .close{position:sticky;top:12px;float:right;margin:12px 12px -54px 0}
@media (max-width:560px){ .toolbar select.input{font-size:.9rem} }