/* Tema "pergaminho e madeira": página de pergaminho claro, painéis de madeira com cantoneiras de ferro, botões grossos com contorno escuro e barras arredondadas (estilo RPG cartoon). */
:root{
  color-scheme: light;
  /* página / pergaminho */
  --page:#f1ddb0; --page-hi:#f8ebc9; --page-dk:#d9b97c;
  --parch:#f6e6bf; --parch-dk:#e2c48b; --ink:#3b2412; --ink-2:#6e4a28; --crimson:#c0392b;
  /* madeira e ferro */
  --line:#2b190c;                       /* contorno escuro de tudo */
  --wood-hi:#b97a42; --wood:#8d5429; --wood-dk:#6a3b1b;
  --cell:#4f2e19; --cell-2:#3d2212;     /* células escuras (inventário) */
  --metal-hi:#e3e7ec; --metal:#a1a9b4; --metal-dk:#626a75;
  /* texto (trocado dentro de .wood/.top) */
  --fg:#3b2412; --muted:#7a5530; --faint:#a07a50; --title:#5a2a10;
  /* cores de botão */
  --green:#4cbf3a; --green-dk:#24801a; --red:#e2452f; --red-dk:#951f12;
  --teal:#22a58f; --teal-dk:#0f6a5a; --orange:#f5a623; --orange-dk:#a4620a;
  --blue:#3d8be0; --blue-dk:#1d5299; --stone:#9aa3ae; --stone-dk:#5d6570;
  --gold:#f2b632; --gold-hi:#ffe08a; --gold-dk:#a8700f;
  --mana:#3d8be0; --mana-hi:#9fd2ff;
  --good:#3f9e2f; --warn:#d98a0b; --bad:#d23b26;
  --r-comum:#b49a7a; --r-incomum:#4fc062; --r-raro:#3d97f0; --r-epico:#ad6cf2; --r-lendario:#f5b52e; --r-adm:#ff2a3a;
  --f-display:"Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --f-book:"Nunito", "Trebuchet MS", system-ui, sans-serif;
  --f-body:"Nunito", "Trebuchet MS", system-ui, sans-serif;
  --stroke:0 2px 0 var(--line),1.5px 0 0 var(--line),-1.5px 0 0 var(--line),0 -1.5px 0 var(--line),1px 1px 0 var(--line),-1px 1px 0 var(--line);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --noise-soft:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .28  0 0 0 0 .1  0 0 0 .2 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --grain:repeating-linear-gradient(180deg,rgba(0,0,0,.07) 0 2px,transparent 2px 7px,rgba(255,255,255,.04) 7px 8px,transparent 8px 13px);
  /* cantoneiras de ferro (sup. esq., sup. dir., inf. esq., inf. dir.) */
  --iron-tl:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23eef1f4'/><stop offset='.5' stop-color='%23a3abb6'/><stop offset='1' stop-color='%23666e79'/></linearGradient></defs><path d='M3 3H31V14H14V31H3Z' fill='url(%23g)' stroke='%232b2f36' stroke-width='2.5' stroke-linejoin='round'/><circle cx='8.5' cy='8.5' r='3' fill='%23f7f8fa' stroke='%233a3f47' stroke-width='1.5'/><circle cx='24.5' cy='8.5' r='1.8' fill='%234a4f57'/><circle cx='8.5' cy='24.5' r='1.8' fill='%234a4f57'/></svg>");
  --iron-tr:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23eef1f4'/><stop offset='.5' stop-color='%23a3abb6'/><stop offset='1' stop-color='%23666e79'/></linearGradient></defs><g transform='matrix(-1 0 0 1 34 0)'><path d='M3 3H31V14H14V31H3Z' fill='url(%23g)' stroke='%232b2f36' stroke-width='2.5' stroke-linejoin='round'/><circle cx='8.5' cy='8.5' r='3' fill='%23f7f8fa' stroke='%233a3f47' stroke-width='1.5'/><circle cx='24.5' cy='8.5' r='1.8' fill='%234a4f57'/><circle cx='8.5' cy='24.5' r='1.8' fill='%234a4f57'/></g></svg>");
  --iron-bl:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23eef1f4'/><stop offset='.5' stop-color='%23a3abb6'/><stop offset='1' stop-color='%23666e79'/></linearGradient></defs><g transform='matrix(1 0 0 -1 0 34)'><path d='M3 3H31V14H14V31H3Z' fill='url(%23g)' stroke='%232b2f36' stroke-width='2.5' stroke-linejoin='round'/><circle cx='8.5' cy='8.5' r='3' fill='%23f7f8fa' stroke='%233a3f47' stroke-width='1.5'/><circle cx='24.5' cy='8.5' r='1.8' fill='%234a4f57'/><circle cx='8.5' cy='24.5' r='1.8' fill='%234a4f57'/></g></svg>");
  --iron-br:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23eef1f4'/><stop offset='.5' stop-color='%23a3abb6'/><stop offset='1' stop-color='%23666e79'/></linearGradient></defs><g transform='matrix(-1 0 0 -1 34 34)'><path d='M3 3H31V14H14V31H3Z' fill='url(%23g)' stroke='%232b2f36' stroke-width='2.5' stroke-linejoin='round'/><circle cx='8.5' cy='8.5' r='3' fill='%23f7f8fa' stroke='%233a3f47' stroke-width='1.5'/><circle cx='24.5' cy='8.5' r='1.8' fill='%234a4f57'/><circle cx='8.5' cy='24.5' r='1.8' fill='%234a4f57'/></g></svg>");
}
*{box-sizing:border-box}
html,body{background:var(--page);color:var(--fg)}
body{margin:0;font-family:var(--f-body);font-size:16px;font-weight:600;line-height:1.45;min-height:100vh;
  background:radial-gradient(ellipse at 50% 30%,var(--page-hi) 0%,var(--page) 55%,var(--page-dk) 100%),var(--page)}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;box-shadow:inset 0 0 120px rgba(120,70,20,.35)}
#app{position:relative;z-index:1}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
b,strong{font-weight:800}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.wrap{max-width:1120px;margin:0 auto;padding-inline:16px;padding-block:0 60px}

/* ---------- contextos de cor ---------- */
.wood,.top,.loadout-slot,.mini,.slot,.combate-log{--fg:#fff4dc;--muted:#ecd3a8;--faint:#c9a77a;--title:var(--gold-hi);color:var(--fg)}
.parch{--fg:var(--ink);--muted:var(--ink-2);--faint:#9a7650;--title:#6b1f10;color:var(--ink)}

/* ---------- madeira, ferro, pergaminho ---------- */
.wood{position:relative;border:3px solid var(--line);border-radius:12px;
  background:var(--grain),linear-gradient(180deg,#5e371d,var(--cell-2));
  box-shadow:inset 0 0 0 5px var(--wood),inset 0 0 0 6px #c08850,inset 0 0 0 8px var(--line),inset 0 10px 24px rgba(0,0,0,.35),0 5px 0 rgba(43,25,12,.55),0 12px 22px rgba(60,30,10,.25)}
.iron::before,.iron::after{content:"";position:absolute;left:-10px;right:-10px;height:34px;pointer-events:none;z-index:4;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.iron::before{top:-10px;background:var(--iron-tl) left top/34px 34px no-repeat,var(--iron-tr) right top/34px 34px no-repeat}
.iron::after{bottom:-10px;background:var(--iron-bl) left bottom/34px 34px no-repeat,var(--iron-br) right bottom/34px 34px no-repeat}
.parch{position:relative;border-radius:12px;border:8px solid transparent;
  background:var(--noise-soft) padding-box,radial-gradient(ellipse at 50% 40%,#fbf0d4 0%,var(--parch) 55%,var(--parch-dk) 100%) padding-box,
    var(--grain) border-box,linear-gradient(180deg,var(--wood-hi),var(--wood) 50%,var(--wood-dk)) border-box;
  box-shadow:0 0 0 3px var(--line),inset 0 0 0 2px rgba(43,25,12,.55),inset 0 0 26px rgba(160,100,40,.35),0 6px 0 3px rgba(43,25,12,.45),0 14px 24px rgba(60,30,10,.25)}
.parch p{color:var(--ink-2)}
.parch .muted{color:var(--ink-2)}

/* ---------- topo ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;
  background:var(--grain),linear-gradient(180deg,#4a2b17,#2f1a0c);border-bottom:4px solid var(--line);
  box-shadow:inset 0 -5px 0 var(--wood),0 6px 14px rgba(60,30,10,.35)}
.top-in{max-width:1120px;margin:0 auto;padding:9px 16px 13px;display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center}
.brand{display:flex;align-items:center;gap:10px;margin-right:auto}
.brand svg{width:40px;height:46px;flex:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.45))}
.brand b{font-family:var(--f-display);font-size:27px;font-weight:400;letter-spacing:.03em;color:#fff;text-transform:uppercase;text-shadow:var(--stroke),0 4px 0 rgba(0,0,0,.35)}
.brand small{display:block;color:var(--muted);font-size:13px;line-height:1.1;font-weight:700}
.seg{display:inline-flex;gap:6px;flex-wrap:wrap}
.seg button{font-family:var(--f-display);font-weight:400;font-size:16px;letter-spacing:.03em;text-transform:uppercase;color:#fff;text-shadow:var(--stroke);
  border:3px solid var(--line);border-radius:10px;padding:6px 16px;background:linear-gradient(180deg,#c3cad3,var(--stone) 50%,var(--stone-dk));
  box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -3px 0 rgba(0,0,0,.2),0 4px 0 var(--line)}
.seg button[aria-pressed="true"]{background:linear-gradient(180deg,#ffd37a,var(--orange) 50%,var(--orange-dk))}
.who{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
select,input[type=text],input[type=number],input[type=date],textarea{background:#fffaf0;color:var(--ink);border:2px solid #9a6b3e;border-radius:8px;padding:8px 10px;min-width:0;width:100%;box-shadow:inset 0 2px 4px rgba(90,55,20,.25);font-weight:600}
.parch select,.parch input,.parch textarea{background:rgba(255,252,242,.85);border-color:#a8804f;color:var(--ink)}
.who select{width:auto;max-width:210px}
textarea{resize:vertical;min-height:76px}
label.fld{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:900;min-width:0}
.parch label.fld{color:var(--ink-2)}
label.fld > *{text-transform:none;letter-spacing:0;font-size:15px;font-weight:600}

/* ---------- botões ---------- */
.btn{--b1:#c98a4e;--b2:var(--wood);--b3:var(--wood-dk);
  border:3px solid var(--line);background:var(--grain),linear-gradient(180deg,var(--b1),var(--b2) 55%,var(--b3));color:#fff;border-radius:11px;padding:8px 18px;
  font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:.03em;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  text-shadow:var(--stroke);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -4px 0 rgba(0,0,0,.22),0 4px 0 var(--line);transition:filter .15s,transform .08s,box-shadow .08s}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:translateY(3px);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.22),0 1px 0 var(--line)}
.btn.primary{--b1:#8fe86d;--b2:var(--green);--b3:var(--green-dk);background:linear-gradient(180deg,var(--b1),var(--b2) 55%,var(--b3))}
.btn.good{--b1:#6fdcc6;--b2:var(--teal);--b3:var(--teal-dk);background:linear-gradient(180deg,var(--b1),var(--b2) 55%,var(--b3))}
.btn.danger{--b1:#ff8a70;--b2:var(--red);--b3:var(--red-dk);background:linear-gradient(180deg,var(--b1),var(--b2) 55%,var(--b3))}
.btn.sm{padding:5px 13px;font-size:15px;border-radius:9px}
.btn.ghost{background:rgba(255,255,255,.18);border:2px dashed currentColor;color:var(--fg);text-shadow:none;box-shadow:none;font-family:var(--f-body);font-weight:800;font-size:14.5px;letter-spacing:0;opacity:.85}
.btn.ghost:hover{opacity:1;filter:none;background:rgba(255,255,255,.3)}
.btn.ghost:active{transform:translateY(1px);box-shadow:none}
.parch .btn.ghost{color:var(--ink)}

/* ---------- cena ---------- */
.hero{position:relative;margin-top:20px;border-radius:16px;overflow:hidden;border:8px solid var(--wood);min-height:340px;
  box-shadow:0 0 0 3px var(--line),inset 0 0 0 3px var(--line),0 7px 0 3px rgba(43,25,12,.45),0 18px 34px rgba(60,30,10,.3)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero .champ{position:absolute;left:3%;bottom:1%;height:90%;aspect-ratio:200/260;max-width:100%;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.hero .champ svg{width:100%;height:100%;display:block;overflow:visible}
.hero-card{position:absolute;right:22px;top:22px;bottom:22px;width:min(480px,54%);padding:22px 26px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.hero-card h1{font-family:var(--f-display);font-weight:400;font-size:32px;line-height:1.1;margin:0;color:#fff;letter-spacing:.02em;text-shadow:var(--stroke),0 4px 0 rgba(0,0,0,.35);text-wrap:balance}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--line);border-radius:99px;padding:2px 11px 2px 4px;font-size:13.5px;font-weight:800;color:var(--ink);
  background:linear-gradient(180deg,#fff8e4,#f0d9a6);box-shadow:inset 0 -2px 0 rgba(120,80,30,.25),0 2px 0 var(--line);white-space:nowrap}
.chip.plain{padding:2px 11px}
.chip svg{width:18px;height:21px;flex:none}
.stats{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
.badge{width:84px;height:96px;flex:none;position:relative}
.badge svg{width:100%;height:100%;overflow:visible}
.xp{min-width:0}
.xp-row{display:flex;justify-content:space-between;gap:8px;font-size:15px;color:var(--muted);margin-bottom:6px;flex-wrap:wrap;font-weight:700}
.xp-row b{color:#a6f08a;font-weight:900}
.bar{height:24px;background:linear-gradient(180deg,#1c2738,#2c3d55);border:3px solid var(--metal);border-radius:99px;overflow:hidden;position:relative;
  box-shadow:0 0 0 2px var(--line),inset 0 3px 5px rgba(0,0,0,.6),0 3px 0 2px rgba(0,0,0,.25)}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(180deg,#b7f79a 0,#5fd146 35%,#33a321 75%,#237a16 100%);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.2),0 0 10px rgba(95,209,70,.45);position:relative;overflow:hidden;transition:width .8s cubic-bezier(.2,.8,.2,1)}
.bar i::before{content:"";position:absolute;left:8px;right:8px;top:3px;height:4px;border-radius:9px;background:rgba(255,255,255,.55)}
.bar i::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);transform:translateX(-100%);animation:sheen 3s ease-in-out infinite}
.bar.thin{height:12px;border-width:2px}
.bar.thin i::before{display:none}
@keyframes sheen{to{transform:translateX(100%)}}
.minis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini{background:linear-gradient(180deg,var(--cell-2),var(--cell));border:2px solid var(--line);border-radius:10px;padding:6px 8px;text-align:center;
  box-shadow:inset 0 3px 8px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.12)}
.mini span{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);font-weight:900}
.mini b{font-family:var(--f-display);font-weight:400;font-size:27px;line-height:1.1;color:#fff;text-shadow:0 2px 0 var(--line)}
.mini b small{font-family:var(--f-body);font-size:14px;color:var(--faint);text-shadow:none}
.mini.grade b{color:#a6f08a}
.banner{margin-top:14px;font-size:14px;color:var(--muted);border:2px dashed var(--faint);border-radius:8px;padding:8px 12px}
.banner b{color:var(--title)}

/* ---------- abas ---------- */
.tabs{display:flex;gap:8px;margin:24px 0 18px;overflow-x:auto;scrollbar-width:none;padding:4px 4px 10px}
.tabs button{font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:.04em;text-transform:uppercase;color:#fff;text-shadow:var(--stroke);
  border:3px solid var(--line);border-radius:11px;padding:7px 18px;white-space:nowrap;display:flex;gap:8px;align-items:center;
  background:linear-gradient(180deg,#c3cad3,var(--stone) 50%,var(--stone-dk));box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -4px 0 rgba(0,0,0,.2),0 4px 0 var(--line);transition:filter .15s,transform .08s}
.tabs button:hover{filter:brightness(1.08)}
.tabs button[aria-selected="true"]{background:linear-gradient(180deg,#ffd37a,var(--orange) 50%,var(--orange-dk));transform:translateY(-2px);box-shadow:inset 0 2px 0 rgba(255,255,255,.55),inset 0 -4px 0 rgba(0,0,0,.2),0 6px 0 var(--line)}
.count{background:var(--red);color:#fff;border:2px solid var(--line);border-radius:99px;font-family:var(--f-body);font-size:12px;padding:0 6px;font-weight:900;line-height:17px;text-shadow:none}

/* ---------- cartões ---------- */
.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.card{padding:18px 20px;display:flex;flex-direction:column;gap:11px;min-width:0}
.wood.card{padding:20px 22px}
.card h3{margin:0;font-size:18px;line-height:1.25;font-weight:900;text-wrap:balance}
.parch.card h3{font-family:var(--f-display);font-weight:400;font-size:23px;letter-spacing:.01em;color:#6b1f10}
.parch.card p{font-family:var(--f-book);font-size:16px;line-height:1.5;color:var(--ink-2)}
.parch .muted,.parch .small.muted{color:var(--ink-2)}
.card p{margin:0;color:var(--muted);font-size:15px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tag{font-size:11.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:900;border:2px solid currentColor;border-radius:6px;padding:0 7px;opacity:.8}
.reward{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.35);border:2px dashed rgba(110,74,40,.5);border-radius:10px;padding:9px 12px;flex-wrap:wrap}
.wood .reward{background:rgba(0,0,0,.25);border-color:var(--faint)}
.xpv{font-family:var(--f-display);font-size:25px;color:var(--blue);white-space:nowrap;text-shadow:0 2px 0 #fff}
.wood .xpv{color:var(--mana-hi);text-shadow:0 2px 0 var(--line)}
.reward .it{display:flex;align-items:center;gap:10px;min-width:0;font-size:14px;line-height:1.2}
.seal{font-family:var(--f-display);font-weight:400;font-size:13.5px;letter-spacing:.04em;border:2px solid var(--line);border-radius:99px;padding:2px 12px 2px 9px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;color:#fff;
  text-shadow:0 1px 0 var(--line),1px 0 0 var(--line),-1px 0 0 var(--line);box-shadow:inset 0 2px 0 rgba(255,255,255,.4),inset 0 -2px 0 rgba(0,0,0,.2),0 2px 0 var(--line)}
.seal::before{content:"";width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 1.5px var(--line)}
.st-disponivel{background:linear-gradient(180deg,#ffd37a,var(--orange) 55%,var(--orange-dk))}
.st-pendente{background:linear-gradient(180deg,#c3cad3,var(--stone) 55%,var(--stone-dk))}
.st-aprovada{background:linear-gradient(180deg,#8fe86d,var(--green) 55%,var(--green-dk))}
.st-devolvida{background:linear-gradient(180deg,#ff8a70,var(--red) 55%,var(--red-dk))}
.note{font-size:15px;border:2px solid var(--crimson);border-left-width:6px;padding:7px 11px;background:rgba(226,69,47,.1);border-radius:8px;font-family:var(--f-book)}
.note.ok{border-color:var(--good);background:rgba(76,191,58,.14)}
.wood .note{background:rgba(226,69,47,.18)}
.wood .note.ok{background:rgba(76,191,58,.18)}
.muted{color:var(--muted)}
.small{font-size:13.5px}
.section-title{font-family:var(--f-display);font-weight:400;font-size:25px;letter-spacing:.02em;margin:0 0 14px;color:var(--title);text-shadow:0 2px 0 rgba(255,255,255,.55)}
.wood .section-title{text-shadow:var(--stroke)}
.empty{border:3px dashed var(--faint);border-radius:12px;padding:30px;text-align:center;color:var(--muted);background:rgba(255,255,255,.28);font-weight:700}

/* ---------- molduras de item ---------- */
.gem{--rc:var(--line);width:48px;height:48px;flex:none;border-radius:10px;display:grid;place-items:center;position:relative;
  background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--rc) 45%,transparent),transparent 70%),linear-gradient(180deg,#5e371d,var(--cell-2));
  border:2.5px solid var(--rc);box-shadow:0 0 0 2px var(--line),inset 0 3px 8px rgba(0,0,0,.5),0 0 10px color-mix(in srgb,var(--rc) 40%,transparent)}
.gem svg{width:82%;height:82%;filter:drop-shadow(0 2px 1px rgba(0,0,0,.55))}
.gem.lg{width:66px;height:66px;border-radius:12px}
.gem.xl{width:88px;height:88px;border-radius:14px}
.r-comum{--rc:var(--r-comum)}.r-incomum{--rc:var(--r-incomum)}.r-raro{--rc:var(--r-raro)}.r-epico{--rc:var(--r-epico)}.r-lendario{--rc:var(--r-lendario)}.r-adm{--rc:var(--r-adm)}
.t-comum{color:#8a6e4c}.t-incomum{color:#24812f}.t-raro{color:#1e5fb0}.t-epico{color:#6a34b0}.t-lendario{color:#b06a00}.t-adm{color:#b0101c;text-shadow:0 0 6px rgba(255,200,80,.6)}
.wood .t-comum{color:#e1c9a6}.wood .t-incomum{color:#7fe08e}.wood .t-raro{color:#7cc0ff}.wood .t-epico{color:#d2a8ff}.wood .t-lendario{color:#ffcf5c}.wood .t-adm{color:#ff5a64}

/* ---------- inventário ---------- */
.inv-wrap{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:start}
.doll{display:grid;grid-template-columns:78px 176px 78px;grid-template-rows:repeat(5,78px);gap:9px;padding:22px 22px 8px;justify-content:center}
.doll .figure{grid-column:2;grid-row:1/6;display:grid;place-items:center;border-radius:12px;border:3px solid var(--line);
  background:radial-gradient(ellipse at 50% 88%,rgba(255,224,138,.3),transparent 55%),radial-gradient(circle at 50% 40%,#f8ebc9,#d9b97c 80%);box-shadow:inset 0 0 18px rgba(120,70,20,.45)}
.doll .figure svg{width:166px;height:216px;overflow:visible}
.slot{--rc:var(--line);width:78px;height:78px;border-radius:12px;border:2.5px solid var(--rc);background:linear-gradient(180deg,var(--cell-2),var(--cell));
  box-shadow:0 0 0 2px var(--line),inset 0 4px 10px rgba(0,0,0,.55),0 1px 0 2px rgba(255,255,255,.08);display:grid;place-items:center;position:relative;padding:0}
.slot.filled{background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--rc) 45%,transparent),transparent 70%),linear-gradient(180deg,#6a4026,var(--cell));box-shadow:0 0 0 2px var(--line),inset 0 3px 8px rgba(0,0,0,.45),0 0 12px color-mix(in srgb,var(--rc) 45%,transparent)}
.slot svg{width:50px;height:50px;margin-bottom:10px;filter:drop-shadow(0 2px 1px rgba(0,0,0,.55))}
.slot .lbl{position:absolute;bottom:3px;left:0;right:0;text-align:center;font-size:10.5px;color:var(--fg);text-transform:uppercase;letter-spacing:.04em;font-weight:900;text-shadow:0 1px 0 var(--line)}
.slot:not(.filled) svg{opacity:.22;filter:grayscale(1)}
.slot.power{flex-direction:column;display:flex;align-items:center;justify-content:center;border:2.5px dashed var(--gold)}
.slot.power b{font-family:var(--f-display);font-weight:400;font-size:28px;color:var(--gold-hi);line-height:1;text-shadow:0 2px 0 var(--line)}
.slot.power span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:900}
.bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.item{padding:10px 12px;display:flex;gap:10px;align-items:center;text-align:left;min-width:0;width:100%;color:var(--fg);transition:transform .1s,filter .15s}
.item.wood{border-radius:12px;box-shadow:inset 0 0 0 3px var(--wood),inset 0 0 0 5px var(--line),0 4px 0 rgba(43,25,12,.55)}
.item:hover{filter:brightness(1.12);transform:translateY(-2px)}
.item.sel{border-color:var(--gold);box-shadow:inset 0 0 0 3px var(--gold),inset 0 0 0 5px var(--line),0 0 0 3px var(--gold-hi),0 4px 0 rgba(43,25,12,.55)}
.item .nm{font-size:14.5px;font-weight:800;line-height:1.2}
.item .rr{font-size:12.5px;font-weight:900}
.eqmark{font-size:11px;color:var(--gold-hi);text-transform:uppercase;letter-spacing:.1em;font-weight:900}
.detail{margin-top:18px}
.stat-line{display:flex;gap:14px;flex-wrap:wrap;font-size:14px;color:var(--ink-2);font-weight:800}

/* ---------- tabelas e pódio ---------- */
.tbl-wrap{overflow-x:auto;border-radius:12px}
.tbl-wrap.wood{padding:8px}
table{border-collapse:collapse;width:100%;min-width:660px;font-size:15px}
th,td{padding:10px 12px;text-align:left;border-bottom:2px solid rgba(110,74,40,.25);white-space:nowrap}
th{font-family:var(--f-display);font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-2);background:rgba(110,74,40,.12)}
.wood th{color:var(--gold-hi);background:rgba(0,0,0,.28);text-shadow:0 2px 0 var(--line)}
.wood th,.wood td{border-bottom-color:rgba(0,0,0,.35)}
.wood tbody tr:nth-child(even) td{background:rgba(255,255,255,.04)}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
td.n{font-weight:900}
tr.me td,.wood tr.me td{background:rgba(255,200,70,.2)}
.person{display:flex;align-items:center;gap:10px}
.face{width:38px;height:38px;flex:none;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 30%,#8fc4ef,#3d6fa8);border:2.5px solid var(--line);box-shadow:0 2px 0 rgba(0,0,0,.3)}
.face svg{width:100%;height:100%;display:block}
.podium{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;margin-bottom:20px}
.pod{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.pod .face{width:74px;height:74px;border-width:3px}
.pod.p1 .face{width:92px;height:92px;border-color:var(--gold);box-shadow:0 0 0 3px var(--line),0 0 22px rgba(245,181,46,.6)}
.pod.p2 .face{border-color:#d2d6de;box-shadow:0 0 0 3px var(--line)}.pod.p3 .face{border-color:#c8814a;box-shadow:0 0 0 3px var(--line)}
.pod .nm{font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.2;overflow-wrap:anywhere;color:var(--title)}
.pod .block{width:100%;border-radius:12px 12px 0 0;display:grid;place-items:center;font-family:var(--f-display);font-size:38px;color:#fff;border:3px solid var(--line);border-bottom:0;
  text-shadow:var(--stroke),0 3px 0 rgba(0,0,0,.3);box-shadow:inset 0 3px 0 rgba(255,255,255,.45)}
.pod.p1 .block{height:104px;background:var(--grain),linear-gradient(180deg,#ffe08a,var(--gold) 50%,var(--gold-dk))}
.pod.p2 .block{height:78px;background:var(--grain),linear-gradient(180deg,#ffffff,#c6ccd6 50%,#6c7486)}
.pod.p3 .block{height:60px;background:var(--grain),linear-gradient(180deg,#ffc79a,#c27a44 50%,#6e3f1c)}
.pos{font-family:var(--f-display);font-size:20px;color:var(--faint);width:30px;display:inline-block}

/* ---------- habilidades / professor ---------- */
.skill{display:flex;gap:14px;align-items:flex-start}
.skill.locked .gem{filter:grayscale(1) brightness(.6)}
.skill.locked h3{color:var(--muted)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-top:22px}
.kpi{padding:16px 20px;display:flex;align-items:center;gap:12px}
.kpi span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:900;display:block}
.kpi b{display:block;font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1.1;color:#fff;text-shadow:var(--stroke)}
.kpi.alert b{color:var(--orange)}
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.form .full{grid-column:1/-1}
.emblem{width:44px;height:52px;flex:none;filter:drop-shadow(0 2px 0 rgba(0,0,0,.3))}
.emblem.lg{width:66px;height:78px}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(40,22,8,.72);display:grid;place-items:center;padding:16px;overflow:auto}
.rays{position:fixed;left:50%;top:50%;width:960px;height:960px;margin:-480px 0 0 -480px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(255,224,138,.2) 0 8deg,transparent 8deg 18deg);
  -webkit-mask:radial-gradient(circle,#000 10%,transparent 62%);mask:radial-gradient(circle,#000 10%,transparent 62%);animation:spin 28s linear infinite}
.modal{max-width:460px;width:100%;padding:30px 26px 24px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:stretch;animation:pop .45s cubic-bezier(.2,1.5,.4,1)}
.modal::before,.modal::after{content:"";position:absolute;left:-13px;right:-13px;height:34px;pointer-events:none;z-index:4;filter:drop-shadow(0 2px 1px rgba(0,0,0,.35))}
.modal::before{top:-13px;background:var(--iron-tl) left top/34px 34px no-repeat,var(--iron-tr) right top/34px 34px no-repeat}
.modal::after{bottom:-13px;background:var(--iron-bl) left bottom/34px 34px no-repeat,var(--iron-br) right bottom/34px 34px no-repeat}
.modal.wood::before,.modal.wood::after{left:-10px;right:-10px}.modal.wood::before{top:-10px}.modal.wood::after{bottom:-10px}
.modal .kicker{font-size:12px;letter-spacing:.24em;color:var(--muted);font-weight:900;text-transform:uppercase}
.modal h2{font-family:var(--f-display);font-weight:400;font-size:34px;letter-spacing:.02em;margin:0;line-height:1.05;color:var(--title)}
.modal .big{font-family:var(--f-display);font-size:60px;color:var(--blue);line-height:1;text-shadow:0 3px 0 #fff,0 0 20px rgba(61,139,224,.45)}
.lvup{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-size:22px;color:var(--green-dk);flex-wrap:wrap}
.lvup .badge{width:58px;height:66px}
.loot{display:flex;align-items:center;gap:14px;text-align:left;background:rgba(255,255,255,.4);border:3px solid var(--rc,#a88653);border-radius:12px;padding:8px 12px;box-shadow:0 0 0 2px var(--line),0 0 18px color-mix(in srgb,var(--rc,#fff) 40%,transparent);animation:rise .5s both}
.loot small{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;font-weight:900}
.loot b{font-size:17px}
.wax{position:absolute;right:18px;top:16px;width:48px;height:48px;border-radius:50%;border:3px solid var(--line);background:radial-gradient(circle at 40% 35%,#ff7a5c,var(--red) 55%,var(--red-dk));box-shadow:inset 0 3px 0 rgba(255,255,255,.35),0 3px 0 var(--line);display:grid;place-items:center;color:#fff;font-family:var(--f-display);font-size:22px;text-shadow:var(--stroke);z-index:5}
@keyframes pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;padding:13px 22px;font-size:15px;font-weight:800;max-width:calc(100% - 32px);animation:rise .3s both}
@media (prefers-reduced-motion: reduce){*,*::after{animation:none!important;transition:none!important}}

@media (max-width:780px){
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero .stage{position:relative;height:250px}
  .hero .champ{left:50%;transform:translateX(-85%);height:94%}
  .hero-card{position:relative;inset:auto;width:auto;margin:0;border-radius:0;border-width:3px 0 0}
  .hero-card.iron::before,.hero-card.iron::after{display:none}
  .inv-wrap{grid-template-columns:1fr}
  .doll{grid-template-columns:62px minmax(0,1fr) 62px;grid-template-rows:repeat(5,62px);padding:16px 12px 6px;gap:7px}
  .slot{width:62px;height:62px}.slot svg{width:38px;height:38px}.slot .lbl{font-size:9px}
  .slot.power b{font-size:22px}
  .doll .figure svg{width:128px;height:166px}
  .brand small{display:none}
  .brand b{font-size:22px}
  .grid{grid-template-columns:1fr}
  .hero-card h1{font-size:26px}
  .tabs button{font-size:15px;padding:6px 14px}
}
@media (min-width:781px){ .hero .stage{position:absolute;inset:0} }