@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{--bg:#080c14;--panel:#101722;--panel2:#141e2b;--line:#243244;--muted:#8c9caf;--text:#edf4ff;--cyan:#52e0e7;--red:#ff5268;--gold:#e6b45e;--green:#65e5ad;--purple:#a58bff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 75% -10%,#192d42 0,transparent 38%),var(--bg);color:var(--text);font-family:Inter,system-ui,sans-serif;font-size:14px}button,input,select{font:inherit}button{cursor:pointer}.app-shell{min-height:100vh;display:grid;grid-template-columns:244px minmax(0,1fr)}.sidebar{background:#0a1019;border-right:1px solid var(--line);padding:25px 16px 16px;display:flex;flex-direction:column;min-height:100vh;position:sticky;top:0;height:100vh}.brand{display:flex;gap:11px;align-items:center;color:var(--text);text-decoration:none;padding:0 9px 32px}.brand-mark{width:39px;height:39px;display:grid;place-items:center;border:1px solid var(--cyan);color:var(--cyan);font:800 29px 'Barlow Condensed';transform:skew(-7deg);box-shadow:0 0 22px #52e0e720}.brand strong{font:800 22px 'Barlow Condensed';letter-spacing:1.5px;display:block}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:2.5px;margin-top:2px}.season-label,.eyebrow{font-size:9px;letter-spacing:1.7px;color:#8295aa;font-weight:700}.season-label{padding:0 11px 13px}.live-dot{float:right;width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 9px var(--green)}nav{display:grid;gap:5px}.nav-item{background:transparent;border:1px solid transparent;color:#aab7c8;text-align:left;padding:12px 13px;border-radius:8px;display:flex;gap:12px;align-items:center;font-size:12px;transition:.2s}.nav-item span{width:19px;color:#7e91a8;font-size:17px;text-align:center}.nav-item:hover,.nav-item.active{background:linear-gradient(90deg,#1a3544,#132331);border-color:#284b5a;color:white}.nav-item.active{box-shadow:inset 2px 0 var(--cyan)}.nav-item.active span{color:var(--cyan)}.sidebar-bottom{margin-top:auto;border-top:1px solid var(--line);padding:17px 5px 0;display:flex;gap:10px;align-items:center}.mini-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,#244d65,#101722);border:1px solid #3d7a91;color:var(--cyan);font-weight:800}.sidebar-bottom strong{display:block;font-size:11px}.sidebar-bottom small{display:block;font-size:9px;color:var(--muted);margin-top:4px}.status-pill{margin-left:auto;border:1px solid #2d594a;color:var(--green);font-size:8px;padding:4px 5px;border-radius:4px}.main{min-width:0;padding:0 32px 22px}.topbar{display:flex;justify-content:space-between;align-items:center;padding:28px 0 22px;border-bottom:1px solid var(--line);margin-bottom:24px}.topbar h1{font:700 32px 'Barlow Condensed';letter-spacing:.6px;margin:6px 0 0}.top-actions{display:flex;align-items:center;gap:13px}.server-status{color:var(--muted);font-size:10px}.server-status i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;margin-right:7px}.icon-button{background:var(--panel);border:1px solid var(--line);color:#b7c5d5;width:35px;height:35px;border-radius:8px}.view{max-width:1440px;margin:auto}.grid{display:grid;gap:16px}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.panel,.stat-card{background:linear-gradient(145deg,#121c29,#0e1520);border:1px solid var(--line);border-radius:12px;padding:19px;min-width:0}.stat-card{position:relative;overflow:hidden}.stat-card:after{content:"";position:absolute;width:80px;height:80px;border:1px solid #ffffff08;border-radius:50%;right:-20px;top:-24px}.stat-top{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:1px}.stat-icon{color:var(--cyan);font-size:18px}.stat-value{font:700 34px 'Barlow Condensed';margin:11px 0 4px}.stat-sub{color:var(--muted);font-size:10px}.accent-cyan{color:var(--cyan)}.accent-red{color:var(--red)}.accent-gold{color:var(--gold)}.accent-green{color:var(--green)}.section-head{display:flex;justify-content:space-between;align-items:end;gap:14px;margin:27px 0 14px}.section-head h2,.panel h2{font:700 22px 'Barlow Condensed';margin:0;letter-spacing:.4px}.section-head p,.subtle{color:var(--muted);font-size:11px;margin:5px 0 0;line-height:1.6}.btn{border:1px solid #3e6976;background:#17313d;color:#dffcff;border-radius:7px;padding:10px 13px;font-size:11px;font-weight:700;transition:.2s}.btn:hover{background:#214857;border-color:var(--cyan)}.btn.primary{background:var(--cyan);border-color:var(--cyan);color:#071117}.btn.ghost{background:#121a26;border-color:var(--line);color:#b9c8d8}.btn.danger{border-color:#6e3441;background:#2a1820;color:#ff9eaa}.btn:disabled{opacity:.35;cursor:not-allowed}.hero{padding:27px;background:linear-gradient(110deg,#122333 0%,#101722 65%,#182330);border:1px solid #2c495a;border-radius:13px;display:grid;grid-template-columns:1.4fr .6fr;gap:20px;overflow:hidden;position:relative}.hero:after{content:"∞";font:300 230px 'Barlow Condensed';position:absolute;right:25px;top:-55px;color:#51dce709;pointer-events:none}.hero h2{font:800 36px 'Barlow Condensed';margin:9px 0}.hero p{max-width:600px;color:#a9bacd;line-height:1.7;font-size:12px}.hero-meta{display:flex;gap:24px;margin:20px 0}.hero-meta strong{font:700 23px 'Barlow Condensed';display:block}.hero-meta small{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:1px}.hero-side{display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1}.ring{width:122px;height:122px;border-radius:50%;border:6px solid #263e4c;border-top-color:var(--cyan);display:grid;place-items:center;box-shadow:0 0 35px #52e0e712}.ring strong{font:700 31px 'Barlow Condensed';display:block;text-align:center}.ring small{display:block;font-size:8px;color:var(--muted);text-align:center}.progress{height:5px;background:#263240;border-radius:10px;overflow:hidden}.progress span{height:100%;display:block;background:linear-gradient(90deg,#3bb6d1,var(--cyan));border-radius:10px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 7px;border-radius:4px;border:1px solid #314255;color:#aebed0;font-size:9px;white-space:nowrap}.tag.cyan{border-color:#2b6872;color:var(--cyan);background:#153039}.tag.red{border-color:#713543;color:#ff91a0;background:#301b23}.tag.gold{border-color:#6b5532;color:#f0c775;background:#2a2419}.tag.green{border-color:#2d644e;color:var(--green);background:#142a23}.list{display:grid;gap:8px}.list-row{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid #243141;border-radius:8px;background:#0d141e}.list-row .grow{flex:1;min-width:0}.list-row strong{display:block;font-size:11px}.list-row small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.portrait{width:38px;height:38px;display:grid;place-items:center;border-radius:8px;background:#1c2a3a;border:1px solid #334a61;font:700 17px 'Barlow Condensed';color:var(--cyan);flex-shrink:0}.bar-label{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);margin:13px 0 6px}.resource{height:7px;background:#26303d;border-radius:20px;overflow:hidden}.resource span{display:block;height:100%;border-radius:20px}.resource .hp{background:linear-gradient(90deg,#d63f59,#ff697a)}.resource .vp{background:linear-gradient(90deg,#3d6cd6,#6f9bff)}.form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.field{display:grid;gap:6px}.field label{color:#9aadc2;font-size:10px}.field input,.field select{background:#0a111a;color:var(--text);border:1px solid #2a394b;border-radius:7px;padding:10px;outline:none;width:100%;min-width:0}.field input:focus,.field select:focus{border-color:var(--cyan)}.field.wide{grid-column:span 2}.character-card{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center}.big-avatar{width:110px;height:125px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(135deg,#163448,#111925);border:1px solid #386173;font:800 55px 'Barlow Condensed';color:var(--cyan)}.attribute-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:17px}.attribute{background:#0c131d;border:1px solid #273547;border-radius:8px;padding:12px;text-align:center}.attribute span{font-size:9px;color:var(--muted);display:block}.attribute strong{font:700 26px 'Barlow Condensed';display:block;margin-top:3px}.arena-duel{display:grid;grid-template-columns:1fr 70px 1fr;gap:16px;align-items:stretch}.combatant{background:linear-gradient(160deg,#152434,#0e151f);border:1px solid #2b4154;border-radius:12px;padding:20px}.combatant.enemy{border-color:#5c2d3b;background:linear-gradient(160deg,#2a1923,#10151e)}.combatant h3{font:700 25px 'Barlow Condensed';margin:7px 0}.combatant .sigil{font:800 36px 'Barlow Condensed';color:var(--cyan)}.combatant.enemy .sigil{color:var(--red)}.versus{display:grid;place-items:center;color:#667b91;font:800 24px 'Barlow Condensed'}.action-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:15px}.action-btn{border:1px solid #2b4458;border-radius:8px;background:#13202c;color:#c6d8e8;text-align:left;padding:13px}.action-btn strong{display:block;font-size:11px}.action-btn small{display:block;color:var(--muted);font-size:9px;margin-top:6px}.action-btn:hover{border-color:var(--cyan)}.combat-log{max-height:220px;overflow:auto;font-size:11px;color:#9eb0c3;line-height:1.7}.log-line{padding:8px 0;border-bottom:1px solid #1e2a38}.log-line b{color:var(--cyan)}.chapter{padding:16px;border:1px solid var(--line);background:#111a26;border-radius:10px}.chapter.unlocked{border-color:#2e6b73}.chapter h3{font:700 20px 'Barlow Condensed';margin:8px 0}.chapter-top{display:flex;justify-content:space-between;gap:8px}.encounters{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:14px 0}.encounter{border:1px solid #2b3748;background:#0b121b;border-radius:7px;padding:10px 5px;text-align:center;min-width:0}.encounter strong{display:block;font:700 13px 'Barlow Condensed'}.encounter small{font-size:8px;color:var(--muted)}.encounter.done{border-color:#2e7058;background:#13261f}.encounter.available{border-color:#4db9c3;box-shadow:inset 0 0 15px #52e0e70c}.encounter.locked{opacity:.38}.cards-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.card-item{border:1px solid #2b394b;border-radius:10px;overflow:hidden;background:#111a26}.card-item img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#0a0f17;display:block}.card-copy{padding:11px}.card-copy strong{display:block;font-size:10px;line-height:1.4}.card-copy small{display:block;color:var(--muted);font-size:9px;margin:5px 0}.card-copy .btn{width:100%;margin-top:8px}.pill-tabs{display:flex;gap:7px;flex-wrap:wrap;margin:0 0 16px}.pill-tab{background:#111a26;color:#9dafc2;border:1px solid var(--line);border-radius:30px;padding:8px 13px;font-size:10px}.pill-tab.active{color:var(--cyan);border-color:#3b8b96;background:#132a33}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#8094a9;text-transform:uppercase;letter-spacing:.8px;font-size:9px;font-weight:600}th,td{padding:12px 10px;border-bottom:1px solid #263243;white-space:nowrap}td{color:#cad6e5}.table-wrap tr:last-child td{border-bottom:0}.empty{padding:35px;text-align:center;color:var(--muted);border:1px dashed #314154;border-radius:9px;font-size:11px}.toast{position:fixed;bottom:25px;right:25px;background:#183c3d;border:1px solid #3c9a91;color:#d6fffa;padding:13px 18px;border-radius:8px;font-size:11px;box-shadow:0 12px 35px #0008;opacity:0;transform:translateY(10px);transition:.25s;pointer-events:none;z-index:20}.toast.show{opacity:1;transform:translateY(0)}footer{color:#526579;font-size:9px;letter-spacing:1px;text-align:center;padding:30px 0 8px}footer span{color:var(--cyan);padding:0 6px}.divider{height:1px;background:var(--line);margin:18px 0}.muted{color:var(--muted)}.small{font-size:10px}.mt{margin-top:16px}.mb{margin-bottom:16px}.right{text-align:right}
@media(max-width:1100px){.app-shell{grid-template-columns:210px minmax(0,1fr)}.main{padding:0 20px}.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.cards-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:relative;height:auto;min-height:0;padding:12px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:0 5px 12px}.brand-mark{width:31px;height:31px;font-size:23px}.brand strong{font-size:18px}.season-label,.sidebar-bottom{display:none}nav{display:flex;overflow:auto;gap:5px;padding-bottom:2px}.nav-item{flex-shrink:0;padding:9px 10px;font-size:10px}.nav-item span{display:none}.main{padding:0 13px}.topbar{padding:18px 0;margin-bottom:17px}.topbar h1{font-size:26px}.server-status{display:none}.hero{grid-template-columns:1fr;padding:20px}.hero h2{font-size:30px}.hero-side{display:none}.grid-3,.grid-2{grid-template-columns:1fr}.grid-4{gap:9px}.stat-card{padding:13px}.stat-value{font-size:29px}.arena-duel{grid-template-columns:1fr}.versus{height:20px}.action-grid{grid-template-columns:repeat(2,1fr)}.cards-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.encounters{gap:4px}.encounter{padding:8px 2px}.encounter small{font-size:7px}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.character-card{grid-template-columns:70px 1fr}.big-avatar{width:70px;height:88px;font-size:39px}.attribute-grid{gap:5px}.attribute{padding:9px 3px}.attribute strong{font-size:21px}.section-head{align-items:start}.panel{padding:14px}}
/* Account gate for first-party INFINITUM API */
.game-gate{min-height:100vh;background:radial-gradient(ellipse at 50% 0%,#14263a 0%,#090d16 60%);color:#e8f1fb;padding:32px 18px}.gate-wrap{max-width:540px;margin:5vh auto}.gate-brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}.gate-brand b,.gate-brand small{display:block;letter-spacing:.12em}.gate-brand small{font-size:10px;color:#83a3bf;margin-top:4px}.gate-card{border:1px solid #263d52;background:rgba(13,22,35,.96);border-radius:16px;padding:30px;box-shadow:0 24px 80px #0006}.gate-card h1{font-size:28px;margin:12px 0}.gate-card label{display:block;font-size:12px;color:#a7bfd4;margin:16px 0}.gate-card input{display:block;box-sizing:border-box;width:100%;margin-top:8px;padding:13px 14px;border:1px solid #30485e;border-radius:8px;background:#08111d;color:#fff;font:inherit}.gate-submit,.gate-toggle{width:100%;margin-top:14px}.gate-note{display:block;text-align:center;color:#7790a7;margin:20px 0;font-size:11px}.gate-error{border:1px solid #a74652;background:#421c29;color:#ffd9de;padding:10px;border-radius:8px;margin:12px 0}.save-row{display:flex;align-items:center;gap:8px;border-top:1px solid #25374a;padding:12px 0;flex-wrap:wrap}.save-row div{flex:1;min-width:140px}.save-row small{display:block;color:#89a1b6;margin-top:4px;font-size:11px}

/* Retratos dos seis chefes da campanha */
.boss-avatar-wrap{display:flex;align-items:center;gap:12px;margin:12px 0 16px;padding:10px;border:1px solid rgba(111,210,255,.18);border-radius:12px;background:rgba(5,14,25,.45)}
.boss-avatar{display:block;width:88px;height:88px;object-fit:cover;object-position:center;border-radius:10px;border:1px solid rgba(111,210,255,.35)}
.boss-avatar-wrap span{font-size:10px;letter-spacing:.16em;color:var(--cyan,#6fd2ff);font-weight:700}

/* Controle acessível para mostrar/ocultar senha no login e registro */
.gate-card .password-field{position:relative;display:block;margin-top:8px}.gate-card .password-field input{padding-right:50px;margin-top:0}.gate-card .password-toggle{position:absolute;right:5px;top:50%;transform:translateY(-50%);width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:6px;background:transparent;color:#83a3bf;cursor:pointer}.gate-card .password-toggle:hover,.gate-card .password-toggle:focus-visible{background:#1a2b3d;color:#e8f1fb;outline:2px solid #53d9ef;outline-offset:1px}.gate-card .password-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.gate-card .password-toggle.is-visible{color:#53d9ef}

/* =========================================================
   INFINITUM RPG · Identidade Cósmica Espiritual
   Tema aplicado globalmente sem alterar regras ou fluxos.
   ========================================================= */
:root{
  color-scheme:dark;
  --bg:#080914;
  --panel:#101030;
  --panel2:#15163b;
  --line:rgba(167,139,250,.24);
  --muted:#a9a4c6;
  --text:#f5f1ff;
  --cyan:#A78BFA;             /* energia espiritual principal */
  --purple:#A78BFA;
  --lavender:#D8C4FF;
  --ethereal-cyan:#8DEBEB;
  --mystic-indigo:#7655B8;
  --gold:#FFD700;
  --green:#65d6a1;
  --red:#ff657d;
}
body{
  background:
    radial-gradient(ellipse at 78% -12%,rgba(118,85,184,.25),transparent 38%),
    radial-gradient(ellipse at 8% 32%,rgba(141,235,235,.07),transparent 34%),
    radial-gradient(ellipse at 55% 110%,rgba(167,139,250,.11),transparent 42%),
    var(--bg);
}
.sidebar{
  background:linear-gradient(180deg,rgba(16,16,48,.98),rgba(8,9,25,.98));
  border-right-color:rgba(255,215,0,.2);
}
.brand-mark{
  border-color:var(--gold);color:var(--lavender);
  background:radial-gradient(circle,rgba(167,139,250,.2),transparent 70%);
  box-shadow:0 0 20px rgba(167,139,250,.24),inset 0 0 12px rgba(216,196,255,.08);
}
.brand strong,.topbar h1,.section-head h2,.panel h2,.hero h2{
  text-shadow:0 0 22px rgba(216,196,255,.12);
}
.brand small{color:var(--lavender)}
.season-label,.eyebrow{color:#bdb2df}
.nav-item{color:#c2bddb}
.nav-item span{color:var(--lavender)}
.nav-item:hover,.nav-item.active{
  background:linear-gradient(100deg,rgba(118,85,184,.28),rgba(16,16,48,.72));
  border-color:rgba(167,139,250,.42);
  box-shadow:inset 2px 0 var(--lavender),0 0 18px rgba(118,85,184,.10);
}
.nav-item.active span{color:var(--lavender)}
.main{background:radial-gradient(ellipse at 52% 0%,rgba(118,85,184,.055),transparent 45%)}
.topbar{border-bottom-color:rgba(255,215,0,.2)}
.topbar h1{color:#fff8df}
.server-status i,.live-dot{background:var(--ethereal-cyan);box-shadow:0 0 10px rgba(141,235,235,.8)}
.panel,.stat-card{
  background:linear-gradient(145deg,rgba(21,22,59,.94),rgba(12,13,35,.97));
  border-color:rgba(167,139,250,.22);
  box-shadow:0 12px 35px rgba(0,0,0,.14),inset 0 1px rgba(216,196,255,.035);
}
.stat-card:after{border-color:rgba(216,196,255,.1)}
.stat-icon,.accent-cyan{color:var(--lavender)!important}
.accent-gold{color:var(--gold)!important}
.accent-green{color:var(--green)!important}
.accent-red{color:var(--red)!important}
.hero{
  background:
    radial-gradient(ellipse at 82% 15%,rgba(167,139,250,.2),transparent 42%),
    radial-gradient(ellipse at 12% 100%,rgba(141,235,235,.08),transparent 38%),
    linear-gradient(115deg,#17163e 0%,#101030 58%,#171333 100%);
  border-color:rgba(255,215,0,.35);
  box-shadow:inset 0 1px rgba(255,215,0,.13),0 15px 45px rgba(0,0,0,.18);
}
.hero:after{color:rgba(216,196,255,.055)}
.hero h2 .accent-cyan{color:var(--lavender)!important}
.ring{
  border-color:rgba(216,196,255,.14);
  border-top-color:var(--lavender);
  border-right-color:var(--ethereal-cyan);
  box-shadow:0 0 34px rgba(167,139,250,.2),inset 0 0 22px rgba(118,85,184,.08);
}
.progress span{background:linear-gradient(90deg,var(--mystic-indigo),var(--lavender),var(--ethereal-cyan))}
.btn{
  border-color:rgba(167,139,250,.42);
  background:linear-gradient(135deg,#27204c,#171936);
  color:#eee7ff;
}
.btn:hover{background:linear-gradient(135deg,#3b2d68,#20234b);border-color:var(--lavender)}
.btn.primary{
  background:linear-gradient(110deg,#7655B8,#A78BFA 58%,#D8C4FF);
  border-color:#D8C4FF;color:#17102d;
  box-shadow:0 0 20px rgba(167,139,250,.18),inset 0 1px rgba(255,255,255,.35);
}
.btn.primary:hover{background:linear-gradient(110deg,#8968cb,#c0aaff,#e8dcff)}
.btn.ghost{background:rgba(16,16,48,.7);border-color:rgba(216,196,255,.2);color:#d9d0f2}
.tag{border-color:rgba(216,196,255,.22);color:#d3cbea}
.tag.cyan,.pill-tab.active{
  border-color:rgba(167,139,250,.52);
  color:var(--lavender);background:rgba(118,85,184,.2);
}
.pill-tab{background:#11112f;border-color:rgba(167,139,250,.2);color:#c1badb}
.pill-tab.active{box-shadow:0 0 16px rgba(167,139,250,.12)}
.field label{color:#c5bbdf}
.field input,.field select{
  background:#090a20;border-color:rgba(167,139,250,.27);color:var(--text);
}
.field input:focus,.field select:focus{border-color:var(--lavender);box-shadow:0 0 0 3px rgba(167,139,250,.12)}
.attribute{background:linear-gradient(150deg,#15163c,#0b0c24);border-color:rgba(216,196,255,.2)}
.attribute strong{color:var(--lavender)}
.portrait,.big-avatar{
  background:radial-gradient(circle at 35% 20%,rgba(167,139,250,.32),transparent 62%),linear-gradient(145deg,#24204d,#101030);
  border-color:rgba(216,196,255,.38);color:var(--lavender);
}
.resource .vp{background:linear-gradient(90deg,var(--mystic-indigo),var(--lavender),var(--ethereal-cyan))}
.list-row,.chapter,.encounter,.card-item{
  background:linear-gradient(145deg,rgba(20,20,55,.92),rgba(10,11,30,.96));
  border-color:rgba(167,139,250,.2);
}
.chapter.unlocked,.encounter.available{border-color:rgba(141,235,235,.52);box-shadow:inset 0 0 20px rgba(141,235,235,.045)}
.encounter.done{border-color:rgba(101,214,161,.42)}
.card-item img{background:radial-gradient(ellipse at 50% 25%,rgba(118,85,184,.22),#080914 75%)}
.combatant{background:linear-gradient(150deg,#1b1948,#101030);border-color:rgba(167,139,250,.35)}
.combatant .sigil{color:var(--lavender)}
.action-btn{background:linear-gradient(145deg,#1a1944,#10102c);border-color:rgba(167,139,250,.28);color:#eee8ff}
.action-btn:hover{border-color:var(--lavender);box-shadow:0 0 18px rgba(167,139,250,.12)}
.action-btn small{color:#b7afd3}
.table-wrap th{color:var(--lavender)}
th,td{border-bottom-color:rgba(167,139,250,.16)}
td{color:#e0dbee}
footer{color:#81799f}
footer span{color:var(--lavender)}
.toast{background:#211a43;border-color:var(--lavender);color:#f1eaff}
.game-gate{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse at 50% 5%,rgba(118,85,184,.32),transparent 44%),
    radial-gradient(ellipse at 8% 80%,rgba(141,235,235,.09),transparent 38%),
    radial-gradient(ellipse at 92% 75%,rgba(167,139,250,.14),transparent 38%),
    #080914;
}
.game-gate:before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.45;
  background-image:radial-gradient(1px 1px at 12% 22%,#fff 98%,transparent),radial-gradient(1px 1px at 74% 18%,#D8C4FF 98%,transparent),radial-gradient(1px 1px at 42% 72%,#8DEBEB 98%,transparent),radial-gradient(1px 1px at 88% 62%,#fff 98%,transparent);
  background-size:270px 230px,330px 280px,390px 320px,460px 370px;
}
.gate-card{
  background:linear-gradient(145deg,rgba(21,22,59,.97),rgba(9,10,30,.98));
  border-color:rgba(255,215,0,.32);
  box-shadow:0 24px 90px rgba(0,0,0,.58),0 0 45px rgba(118,85,184,.13),inset 0 1px rgba(216,196,255,.09);
}
.gate-card h1{color:#fff7df}
.gate-card label{color:#c9c0e3}
.gate-card input{background:#090a20;border-color:rgba(167,139,250,.32)}
.gate-card input:focus{outline:none;border-color:var(--lavender);box-shadow:0 0 0 3px rgba(167,139,250,.13)}
.gate-brand small,.gate-note{color:#b5a9d7}
.gate-error{border-color:#a74662;background:#351a37;color:#ffe0ef}
.gate-card .password-toggle{color:var(--lavender)}
.gate-card .password-toggle:hover,.gate-card .password-toggle:focus-visible{background:#29204d;color:#fff;outline-color:var(--lavender)}
.gate-card .password-toggle.is-visible{color:var(--ethereal-cyan)}
.save-row{border-top-color:rgba(167,139,250,.2)}
.save-row small{color:#b7afd3}
.status-pill{border-color:rgba(141,235,235,.35);color:var(--ethereal-cyan)}
@media(max-width:760px){
  .sidebar{background:linear-gradient(180deg,#101030,#090a20);border-bottom-color:rgba(255,215,0,.2)}
  .nav-item.active{box-shadow:inset 0 -2px var(--lavender)}
}

/* =========================================================
   INFINITUM · layouts de página e composição de fantasia
   ========================================================= */
:root{--sp-violet:#A78BFA;--sp-lavender:#D8C4FF;--sp-cyan:#8DEBEB;--sp-indigo:#7655B8;--celestial-gold:#FFD700}
.app-shell{grid-template-columns:258px minmax(0,1fr);background:transparent}
.sidebar{padding:25px 16px 18px;backdrop-filter:blur(18px);box-shadow:12px 0 45px rgba(0,0,0,.18)}
.brand{padding:0 7px 25px;gap:12px}
.brand-mark{width:48px;height:48px;border-radius:50%;font-family:Georgia,serif;font-size:31px;border:1px solid var(--celestial-gold)}
.brand strong{font:700 19px Georgia,serif;letter-spacing:.12em}
.brand small{font-size:9px;letter-spacing:.24em}
.season-label{font-size:9px;letter-spacing:.18em;padding:12px 9px;border-top:1px solid rgba(255,215,0,.15)}
nav{gap:6px}
.nav-item{border-radius:10px;padding:12px 13px;font-size:12px;letter-spacing:.015em;transition:background .2s,border-color .2s,transform .2s}
.nav-item:hover{transform:translateX(2px)}
.nav-item span{width:20px;font-size:16px}
.sidebar-bottom{margin-top:24px;border-top:1px solid rgba(216,196,255,.15);padding-top:17px}
.main{padding:0 clamp(20px,3vw,48px);max-width:none}
.topbar{padding:24px 0 19px;margin-bottom:0}
.topbar .eyebrow{font-size:9px;letter-spacing:.2em}
.topbar h1{font:600 clamp(25px,2.2vw,34px) Georgia,serif;letter-spacing:.025em}
.view{max-width:1500px;margin:0 auto}
.screen-intro{position:relative;display:flex;align-items:center;gap:16px;min-height:82px;margin:8px 0 20px;padding:13px 20px;overflow:hidden;border:1px solid rgba(167,139,250,.2);border-radius:14px;background:linear-gradient(100deg,rgba(16,16,48,.9),rgba(23,19,54,.65));box-shadow:inset 0 1px rgba(216,196,255,.06)}
.screen-intro:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(118,85,184,.14),transparent 52%,rgba(141,235,235,.06))}
.screen-sigil{position:relative;z-index:1;display:grid;place-items:center;width:48px;height:48px;flex:0 0 48px;border-radius:50%;font-size:23px;color:var(--sp-lavender);border:1px solid rgba(216,196,255,.55);background:radial-gradient(circle,rgba(167,139,250,.28),rgba(16,16,48,.2) 70%);box-shadow:0 0 25px rgba(167,139,250,.2),inset 0 0 14px rgba(141,235,235,.08)}
.screen-kicker{position:relative;z-index:1;color:var(--celestial-gold);font:600 11px Georgia,serif;letter-spacing:.2em}
.screen-intro p{position:relative;z-index:1;margin:5px 0 0;color:#bdb6d5;font-size:11px;line-height:1.5}
.screen-orbit{position:absolute;right:22px;top:-22px;font:100px Georgia,serif;color:rgba(216,196,255,.07);pointer-events:none}
.screen-content{display:grid;gap:18px;padding-bottom:28px}
.screen-content .hero{min-height:260px;padding:clamp(22px,3vw,38px);border-radius:16px;grid-template-columns:minmax(0,1.4fr) minmax(170px,.6fr);align-items:center}
.screen-content .hero h2{font:600 clamp(30px,3vw,44px) Georgia,serif;line-height:1.16;letter-spacing:.01em}
.screen-content .hero p{font-size:13px;max-width:680px}
.screen-content .hero-meta{gap:clamp(16px,3vw,36px)}
.screen-content .hero-meta strong{font:600 25px Georgia,serif;color:#fff4d3}
.screen-content .panel,.screen-content .stat-card{border-radius:14px;padding:20px}
.screen-content .panel h2{font:600 18px Georgia,serif;color:#fff1d0;letter-spacing:.01em}
.screen-content .section-head{margin:9px 0 -5px}
.screen-content .section-head h2{font:600 19px Georgia,serif;color:#fff1d0}
.screen-content .section-head p{font-size:11px}
.screen-content .stat-card{position:relative;overflow:hidden;min-height:116px;background:linear-gradient(145deg,rgba(27,25,67,.96),rgba(12,13,36,.97))}
.screen-content .stat-card:before{content:"";position:absolute;width:110px;height:110px;right:-42px;top:-45px;border:1px solid rgba(216,196,255,.12);border-radius:50%;box-shadow:0 0 0 9px rgba(167,139,250,.025),0 0 0 20px rgba(167,139,250,.02)}
.screen-content .stat-top{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:#b9b0d3}
.screen-content .stat-value{font:600 30px Georgia,serif;color:#fff4d6;margin:12px 0 4px}
.screen-content .stat-sub{font-size:10px;color:#9289b2}
.screen-content .btn{border-radius:8px;padding:11px 15px;letter-spacing:.06em;font-size:10px}
.screen-content .btn.primary{font-weight:800}
.screen-content .tag{border-radius:20px;padding:5px 9px}
.screen-content .resource{height:9px;background:#282344}
.screen-content .resource .vp{background:linear-gradient(90deg,var(--sp-indigo),var(--sp-violet),var(--sp-lavender),var(--sp-cyan))}
.screen-content .resource .hp{background:linear-gradient(90deg,#a53b66,#e16a8d)}
.screen-content .progress{height:8px;background:rgba(216,196,255,.12)}
.screen-content .progress span{background:linear-gradient(90deg,var(--sp-indigo),var(--sp-violet),var(--sp-lavender),var(--sp-cyan))}
.screen-content .ring{border-width:5px;background:radial-gradient(circle,rgba(167,139,250,.12),rgba(16,16,48,.2) 68%);width:140px;height:140px}
.screen-content .ring strong{font:600 34px Georgia,serif;color:#fff2d1}
.screen-content .attribute{border-radius:10px}
.screen-content .attribute span{letter-spacing:.13em}
.screen-content .attribute strong{font:600 26px Georgia,serif}
.screen-content .list-row{border-radius:10px;padding:13px}
.screen-content .field input,.screen-content .field select{border-radius:8px;padding:11px 12px;min-height:42px}
.screen-content .field label{font-size:10px;letter-spacing:.04em}
.screen-content .table-wrap{border-radius:10px}
.screen-content th{padding-top:15px;padding-bottom:15px}
.screen-content td{padding-top:13px;padding-bottom:13px}
.screen-content .empty{border-color:rgba(216,196,255,.2);background:rgba(8,9,25,.25)}
/* 03 · Dashboard */
.screen-dashboard .hero{background:radial-gradient(ellipse at 80% 20%,rgba(167,139,250,.28),transparent 38%),radial-gradient(ellipse at 10% 90%,rgba(141,235,235,.12),transparent 35%),linear-gradient(115deg,#1d194b,#101030 58%,#151333);min-height:285px}
.screen-dashboard .hero:after{content:"✧";font:180px Georgia,serif;color:rgba(216,196,255,.08);right:6%;top:8%}
.screen-dashboard .grid-4{gap:13px}
.screen-dashboard .grid-3>.panel{background:linear-gradient(145deg,rgba(21,22,59,.96),rgba(10,11,30,.97));min-height:175px}
.screen-dashboard .grid-3>.panel .btn{margin-top:9px}
/* 04 · Ficha */
.screen-character>.grid-2{grid-template-columns:minmax(330px,.9fr) minmax(0,1.25fr);align-items:start;gap:16px}
.screen-character>.grid-2>.panel:first-child{background:radial-gradient(ellipse at 15% 0%,rgba(118,85,184,.18),transparent 45%),linear-gradient(145deg,#17163e,#0e102b)}
.screen-character .character-card{grid-template-columns:210px minmax(0,1fr);gap:22px;align-items:start}
.screen-character .big-avatar{width:210px;height:300px;border-radius:16px;font:600 66px Georgia,serif;box-shadow:0 0 36px rgba(167,139,250,.2);border-color:rgba(216,196,255,.38);background:linear-gradient(160deg,rgba(118,85,184,.3),rgba(9,10,31,.9));overflow:hidden}
.screen-character .attribute-grid{gap:9px}
.screen-character .attribute{background:linear-gradient(150deg,rgba(118,85,184,.2),rgba(9,10,31,.8));border-color:rgba(216,196,255,.23)}
.screen-character #char-form .form-grid{gap:13px}
.screen-character #char-form .divider{margin:22px 0}
.screen-character #char-form h2{margin-bottom:13px}
.screen-character #char-form button{min-width:160px}
/* 05 · Arena */
.screen-arena .arena-duel{grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);gap:18px}
.screen-arena .combatant{position:relative;overflow:hidden;border-radius:16px;padding:24px;background:radial-gradient(ellipse at 50% 0%,rgba(167,139,250,.2),transparent 46%),linear-gradient(155deg,#201b50,#101030)}
.screen-arena .combatant.enemy{background:radial-gradient(ellipse at 50% 0%,rgba(255,101,125,.15),transparent 46%),linear-gradient(155deg,#321b3b,#101030)}
.screen-arena .combatant .sigil{display:grid;place-items:center;width:82px;height:82px;border-radius:50%;border:1px solid rgba(216,196,255,.48);background:radial-gradient(circle,rgba(167,139,250,.3),rgba(16,16,48,.2));box-shadow:0 0 30px rgba(167,139,250,.16);font-size:33px}
.screen-arena .combatant.enemy .sigil{border-color:rgba(255,101,125,.4)}
.screen-arena .versus{color:var(--sp-lavender);font:600 28px Georgia,serif;text-shadow:0 0 20px var(--sp-indigo)}
.screen-arena .action-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.screen-arena .action-btn{border-radius:11px;padding:16px;background:linear-gradient(145deg,#201c4b,#11112f);min-height:80px}
.screen-arena .action-btn:hover{transform:translateY(-2px)}
.screen-arena .combat-log{max-height:280px}
/* 06 · Campanha */
.screen-campaign .hero{background:radial-gradient(ellipse at 82% 20%,rgba(141,235,235,.14),transparent 38%),radial-gradient(ellipse at 45% 100%,rgba(167,139,250,.18),transparent 42%),linear-gradient(110deg,#17163e,#101030)}
.screen-campaign .chapter{border-radius:14px;padding:20px;background:linear-gradient(145deg,rgba(24,23,65,.96),rgba(10,11,30,.97))}
.screen-campaign .chapter h3{font:600 22px Georgia,serif;color:#fff0ce}
.screen-campaign .encounters{gap:9px}
.screen-campaign .encounter{border-radius:10px;min-height:66px;background:rgba(7,8,25,.7)}
.screen-campaign .encounter.available{background:linear-gradient(145deg,rgba(118,85,184,.3),rgba(141,235,235,.07));box-shadow:0 0 22px rgba(141,235,235,.09)}
.screen-campaign .boss-avatar-wrap{border-color:rgba(216,196,255,.2);background:rgba(8,9,25,.45);border-radius:12px}
.screen-campaign .boss-avatar{width:96px;height:96px;border-color:rgba(216,196,255,.45)}
/* 07 · Cartas */
.screen-cards .panel{background:linear-gradient(145deg,rgba(20,19,55,.96),rgba(9,10,28,.98))}
.screen-cards .cards-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.screen-cards .card-item{position:relative;border-radius:13px;background:linear-gradient(160deg,#1b1948,#090a20);border-color:rgba(216,196,255,.25);box-shadow:0 12px 25px rgba(0,0,0,.2);transition:transform .22s,border-color .22s,box-shadow .22s}
.screen-cards .card-item:hover{transform:translateY(-5px);border-color:var(--sp-lavender);box-shadow:0 18px 34px rgba(0,0,0,.32),0 0 20px rgba(167,139,250,.12)}
.screen-cards .card-item img{aspect-ratio:3/4;object-fit:contain;padding:8px;background:radial-gradient(ellipse at 50% 30%,rgba(118,85,184,.25),#080914 76%)}
.screen-cards .card-copy{padding:13px}
.screen-cards .card-copy strong{font:600 13px Georgia,serif;color:#fff1d4;min-height:34px}
.screen-cards .card-copy .btn{font-size:9px;padding:9px 6px}
/* 08 · Mercado */
.screen-market .hero{min-height:210px;background:radial-gradient(ellipse at 80% 15%,rgba(255,215,0,.12),transparent 35%),linear-gradient(110deg,#17163e,#101030)}
.screen-market .hero-meta strong{color:var(--sp-lavender)}
/* 09 · Ranking */
.screen-ranking>.grid-4{gap:13px}
.screen-ranking #global-ranking-list .list-row{background:linear-gradient(100deg,rgba(118,85,184,.18),rgba(12,13,35,.95))}
.screen-ranking #online-matches>.panel{background:linear-gradient(145deg,rgba(20,20,55,.96),rgba(9,10,28,.98))}
.screen-ranking #online-challenge input{max-width:100%}
/* 10 · Codex */
.screen-rules .hero{min-height:235px;background:radial-gradient(ellipse at 85% 50%,rgba(167,139,250,.22),transparent 38%),linear-gradient(110deg,#17163e,#101030)}
.screen-rules>.grid-2>.panel{background:linear-gradient(145deg,rgba(20,19,55,.97),rgba(9,10,28,.98))}
.screen-rules .list-row{border-left:2px solid rgba(167,139,250,.4)}
/* Login e seleção de saves */
.game-gate{padding:clamp(24px,5vh,60px) 18px;min-height:100vh;display:flex;align-items:center;justify-content:center}
.gate-wrap{width:min(100%,650px);max-width:650px;margin:0 auto;position:relative}
.gate-brand{justify-content:center;margin:0 auto 25px;text-align:left}
.gate-brand .brand-mark{width:58px;height:58px;font-size:36px}
.gate-brand b{font:600 22px Georgia,serif;letter-spacing:.16em;color:#fff2d1}
.gate-brand small{font-size:9px;letter-spacing:.26em;color:var(--sp-lavender)}
.gate-card{border-radius:19px;padding:clamp(24px,4vw,42px);border-color:rgba(255,215,0,.38);background:radial-gradient(ellipse at 50% 0%,rgba(118,85,184,.22),transparent 45%),linear-gradient(145deg,rgba(21,22,59,.98),rgba(8,9,25,.99))}
.gate-card h1{font:600 clamp(27px,4vw,35px) Georgia,serif;letter-spacing:.015em}
.gate-card>p{line-height:1.7;color:#bdb6d5}
.gate-card label{font-size:11px;letter-spacing:.04em}
.gate-card input{border-radius:9px;padding:14px;background:rgba(7,8,25,.8)}
.gate-submit,.gate-toggle{min-height:46px;border-radius:9px}
.gate-submit{margin-top:20px}
.gate-toggle{margin-top:10px}
.gate-note{letter-spacing:.04em;line-height:1.6}
#save-list h3{font:600 18px Georgia,serif;color:#fff0ce;margin:24px 0 8px}
.save-row{border-top-color:rgba(216,196,255,.18);padding:15px 2px}
.save-row b{font:600 14px Georgia,serif;color:#fff0d7}
.save-row .btn{min-height:38px}
@media(max-width:1100px){
 .screen-cards .cards-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .screen-character>.grid-2{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:760px){
 .app-shell{display:block}.sidebar{padding:12px}.brand{padding-bottom:12px}
 .brand-mark{width:35px;height:35px;font-size:24px}.brand strong{font-size:16px}
 .main{padding:0 13px}.topbar{padding:18px 0 14px}
 .screen-intro{min-height:70px;padding:11px 13px;margin:7px 0 14px}
 .screen-sigil{width:40px;height:40px;flex-basis:40px}.screen-orbit{right:10px;font-size:70px}
 .screen-content .hero{grid-template-columns:1fr;padding:21px;min-height:0}
 .screen-content .hero h2{font-size:30px}.screen-content .hero-side{display:none}
 .screen-character>.grid-2{grid-template-columns:1fr}
 .screen-character .character-card{grid-template-columns:112px minmax(0,1fr);gap:13px}
 .screen-character .big-avatar{width:112px;height:158px;font-size:38px}
 .screen-arena .arena-duel{grid-template-columns:1fr;gap:8px}
 .screen-arena .versus{height:24px}
 .screen-arena .action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .screen-cards .cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .screen-content .panel{padding:14px}
 .game-gate{padding:22px 14px;align-items:flex-start}
 .gate-wrap{margin:3vh auto}
 .gate-brand{justify-content:center}
 .save-row{gap:7px}.save-row .btn{padding:9px 10px}
}

/* QA visual pass · legibilidade, conteúdo longo e retratos */
.screen-character .field select[multiple]{
  height:132px;min-height:132px;max-height:132px;
  padding:7px 9px;overflow:auto;line-height:1.45;
  font-size:10px;white-space:nowrap;
}
.screen-character .field select[multiple] option{
  padding:4px 3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.screen-character .form-grid>.field{min-width:0}
.screen-character .form-grid>.field:nth-child(11),
.screen-character .form-grid>.field:nth-child(12){align-self:start}
.screen-cards .card-copy{min-width:0;overflow:hidden}
.screen-cards .card-copy strong{
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;
  overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;
  min-height:36px;line-height:1.4;
}
.screen-cards .card-copy small{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.screen-cards .card-item img{height:auto;min-height:210px;max-height:300px}
.screen-campaign .boss-avatar-wrap{min-height:112px}
.screen-campaign .boss-avatar{
  width:92px;height:92px;flex:0 0 92px;object-fit:cover;
  background:radial-gradient(circle,rgba(167,139,250,.18),#090a20);
}
.screen-campaign .boss-avatar-wrap span{line-height:1.5}
.screen-campaign .chapter{min-width:0}
.screen-ranking .grid-2>.panel{min-width:0}
.screen-ranking #global-ranking-list,.screen-ranking #online-matches{min-width:0}
.screen-ranking #online-matches>.panel{min-width:0}
.screen-rules .list-row .grow{min-width:0}
.screen-rules .list-row strong{line-height:1.5;white-space:normal}
@media(max-width:760px){
 .screen-character .field select[multiple]{height:120px;min-height:120px}
 .screen-cards .card-item img{min-height:170px;max-height:230px}
 .screen-content .hero-meta{flex-wrap:wrap;gap:14px}
 .screen-intro p{max-width:calc(100% - 20px)}
}

/* Rito das Doze Vozes */
.element-ritual-panel,.element-ritual-locked,.element-ritual-result{padding:17px;border:1px solid rgba(167,139,250,.28);border-radius:13px;background:radial-gradient(ellipse at 50% 0%,rgba(118,85,184,.2),transparent 65%),rgba(8,9,28,.72)}
.element-ritual-panel h3,.element-ritual-result h3{font:600 21px Georgia,serif;color:#fff0ce;margin:8px 0}
.ritual-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:15px}
.ritual-stage{position:relative;min-height:150px;margin-top:15px;overflow:hidden;border:1px solid rgba(167,139,250,.18);border-radius:11px;background:radial-gradient(circle,rgba(118,85,184,.15),rgba(7,8,25,.85) 70%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.ritual-stage>small{font-size:9px;letter-spacing:2px;color:#bcb1db}
.ritual-die{width:64px;height:64px;display:grid;place-items:center;border:1px solid #c8b5ff;border-radius:15px;background:linear-gradient(145deg,#42306d,#14132f);box-shadow:0 0 26px #a78bfa66,inset 0 0 15px #fff2;color:#fff;font:700 29px Georgia,serif;transform:rotate(15deg)}
.ritual-stage.rolling .ritual-die{animation:ritual-die-spin .22s linear infinite}
.ritual-lightning{position:absolute;inset:-35%;pointer-events:none;opacity:0}
.ritual-stage.rolling .ritual-lightning{opacity:1;background:repeating-conic-gradient(from 0deg at 50% 50%,transparent 0deg,transparent 8deg,rgba(185,163,255,.95) 8.5deg,transparent 9.5deg,transparent 25deg);animation:ritual-rays .35s linear infinite;filter:drop-shadow(0 0 7px #a78bfa)}
.ritual-stage.rolling .ritual-lightning:before,.ritual-stage.rolling .ritual-lightning:after{content:"";position:absolute;inset:10%;border:2px solid transparent;border-left-color:#c9b6ff;border-right-color:#8beaff;clip-path:polygon(49% 0,55% 22%,68% 17%,57% 43%,73% 47%,53% 62%,58% 100%,42% 72%,26% 86%,38% 55%,20% 48%,42% 34%);animation:ritual-bolt .5s ease-in-out infinite alternate}
.ritual-stage.rolling .ritual-lightning:after{transform:rotate(95deg) scale(.8);animation-delay:-.2s}
@keyframes ritual-die-spin{0%{transform:rotateX(0) rotateY(0) rotateZ(0) scale(.9)}50%{transform:rotateX(180deg) rotateY(220deg) rotateZ(180deg) scale(1.12)}100%{transform:rotateX(360deg) rotateY(440deg) rotateZ(360deg) scale(.9)}}
@keyframes ritual-rays{to{transform:rotate(360deg)}}
@keyframes ritual-bolt{from{opacity:.35;filter:blur(1px)}to{opacity:1;filter:blur(0);transform:scale(1.08)}}
.ritual-reveal{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;animation:ritual-reveal .7s ease-out both}
.ritual-reveal img{width:92px;height:92px;object-fit:contain;filter:drop-shadow(0 0 18px #a78bfa88)}
.ritual-reveal h3{font:600 23px Georgia,serif;color:#fff0ce;margin:3px}
.ritual-reveal p{font-size:10px;color:#c9c0e1;margin:0;letter-spacing:1px}
.ritual-result-number{font:700 11px Georgia,serif;color:#bdaaff;letter-spacing:2px}
.element-sigil{width:58px;height:58px;object-fit:contain;filter:drop-shadow(0 0 13px #a78bfa66)}
/* Molduras elementais do PvP: o retrato ocupa a janela do card correspondente */
.pvp-fighter-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin:16px 0 8px}
.pvp-fighter-self,.pvp-fighter-opponent{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.pvp-fighter-self>small,.pvp-fighter-opponent>small{font-size:8px;letter-spacing:1.7px;color:#9eabc2}
.element-fighter-card{width:min(100%,172px);aspect-ratio:3/4;position:relative;display:grid;place-items:center;background-image:var(--element-card);background-size:100% 100%;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 7px 14px #0008)}
.element-fighter-avatar{position:absolute;left:19%;right:19%;top:19%;height:54%;display:grid;place-items:center;overflow:hidden;border-radius:48% 48% 12% 12%;background:radial-gradient(circle,#242344,#080a18 75%);border:1px solid #ffffff44;box-shadow:0 0 15px #0009}
.element-fighter-avatar img{width:100%;height:100%;object-fit:cover;object-position:center}
.element-fighter-avatar span{font:700 25px Georgia,serif;color:#e4d8ff}
.element-fighter-name{position:absolute;left:15%;right:15%;bottom:10%;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap;font:600 10px Georgia,serif;color:#fff3d5;text-shadow:0 1px 5px #000}
@keyframes ritual-reveal{from{opacity:0;transform:translateY(13px) scale(.8);filter:blur(5px)}to{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@media(max-width:760px){.pvp-fighter-strip{gap:7px}.element-fighter-card{width:min(100%,145px)}}

.rank-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:76px;max-width:110px;text-align:center}
.rank-badge img{width:68px;height:84px;object-fit:contain;filter:drop-shadow(0 4px 8px #0009)}
.rank-badge span{font-size:10px;line-height:1.2;color:#e8edff;font-weight:800;letter-spacing:.02em}
.rank-badge.compact{min-width:52px;max-width:68px;gap:1px;margin-bottom:2px}
.rank-badge.compact img{width:48px;height:56px}
.rank-badge.compact span{font-size:8px;max-width:68px}
.rank-profile-head{display:flex;align-items:center;gap:14px}
.rank-profile-head .rank-badge img{width:88px;height:104px}
.rank-profile-head>div:last-child{display:flex;flex-direction:column;gap:5px}
.pvp-fighter-self,.pvp-fighter-opponent{justify-content:flex-start}
.pvp-fighter-self .rank-badge,.pvp-fighter-opponent .rank-badge{margin-bottom:0}
.rank-profile-avatar{width:76px;height:76px;object-fit:cover;border-radius:14px;border:1px solid #8da8ff55;box-shadow:0 8px 22px #0008}
.rank-public-row{gap:10px}.rank-public-avatar{width:42px;height:42px;object-fit:cover;border-radius:9px;border:1px solid #8da8ff55}.rank-public-insignia{width:34px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 4px #0008)}

/* =========================================================
   INFINITUM 2026 · Interface modular + dock inferior
   Camada visual: preserva os módulos e regras existentes.
   ========================================================= */
:root{
  --ui-ink:#090a17;
  --ui-surface:rgba(16,17,38,.82);
  --ui-line:rgba(207,199,255,.15);
  --ui-line-strong:rgba(207,199,255,.27);
  --ui-soft:#b9b4d2;
  --ui-glow:rgba(174,151,255,.12);
}
html{scroll-behavior:smooth;scroll-padding-bottom:120px}
body{min-height:100vh;background-attachment:fixed}
.app-shell{display:block;min-height:100vh;padding-bottom:116px}
.sidebar{
  position:fixed;z-index:50;left:50%;bottom:18px;top:auto;
  transform:translateX(-50%);width:max-content;max-width:calc(100vw - 36px);
  height:auto;min-height:0;padding:8px 10px;
  border:1px solid var(--ui-line-strong);border-radius:18px;
  background:rgba(11,12,29,.82);backdrop-filter:blur(24px) saturate(145%);
  -webkit-backdrop-filter:blur(24px) saturate(145%);
  box-shadow:0 18px 60px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.07);
}
.sidebar:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,rgba(167,139,250,.08),transparent 45%,rgba(141,235,235,.045))}
.brand,.season-label,.sidebar-bottom{display:none!important}
.sidebar nav{position:relative;display:flex;align-items:center;justify-content:center;gap:4px}
.nav-item{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;min-width:76px;min-height:58px;padding:7px 9px;
  border:1px solid transparent;border-radius:12px;background:transparent;
  color:#a9a5c2;text-align:center;font-size:9px;font-weight:600;letter-spacing:.025em;
  white-space:nowrap;transition:color .22s ease,background .22s ease,border-color .22s ease,transform .22s ease;
}
.nav-item span{display:block;width:auto;color:#aaa1d0;font-size:17px;line-height:1}
.nav-item:hover{transform:translateY(-2px);background:rgba(167,139,250,.08);border-color:rgba(216,196,255,.14)}
.nav-item.active{color:#fff;background:linear-gradient(145deg,rgba(167,139,250,.2),rgba(141,235,235,.07));border-color:rgba(216,196,255,.27);box-shadow:inset 0 1px rgba(255,255,255,.07),0 4px 18px rgba(118,85,184,.13)}
.nav-item.active:after{content:"";position:absolute;bottom:3px;left:calc(50% - 9px);width:18px;height:2px;border-radius:4px;background:var(--lavender);box-shadow:0 0 10px var(--lavender)}
.nav-item.active span{color:#e1d5ff}
.main{width:min(100%,1680px);margin:0 auto;padding:0 clamp(18px,4vw,64px) 20px}
.topbar{position:relative;padding:28px 0 21px;margin-bottom:22px;border-bottom:1px solid var(--ui-line)}
.topbar:after{content:"";position:absolute;bottom:-1px;left:0;width:100px;height:1px;background:linear-gradient(90deg,var(--lavender),transparent)}
.topbar h1{font:500 clamp(25px,2.2vw,34px) Inter,system-ui,sans-serif;letter-spacing:-.045em;color:#fbf9ff}
.topbar .eyebrow{font-size:9px;letter-spacing:.2em;color:#aaa3c9}
.view{max-width:1500px}
.screen-intro{
  min-height:100px;margin:8px 0 24px;padding:20px 24px;
  border:1px solid var(--ui-line);border-radius:15px;
  background:linear-gradient(110deg,rgba(22,20,52,.82),rgba(13,15,34,.68));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
}
.screen-intro:before{background:linear-gradient(90deg,var(--page-tint,rgba(167,139,250,.12)),transparent 58%,rgba(141,235,235,.035))}
.screen-sigil{position:relative;z-index:1;width:48px;height:48px;flex:0 0 48px;display:grid;place-items:center;border:1px solid var(--page-edge,rgba(216,196,255,.25));border-radius:13px;background:var(--page-wash,rgba(167,139,250,.1));color:var(--page-accent,#d8c4ff);font-size:22px;box-shadow:inset 0 1px rgba(255,255,255,.07),0 6px 24px var(--page-glow,rgba(167,139,250,.1))}
.screen-kicker{position:relative;z-index:1;font-size:9px;letter-spacing:.22em;font-weight:800;color:var(--page-accent,#d8c4ff)}
.screen-intro p{font-size:11px;color:#aaa7c2}
.screen-orbit{right:25px;font-size:88px;color:var(--page-accent,#d8c4ff);opacity:.08}
.screen-content{gap:22px;padding-bottom:24px;animation:screen-enter .48s cubic-bezier(.2,.7,.2,1) both}
@keyframes screen-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.screen-content .panel,.screen-content .stat-card,.screen-content .chapter,.screen-content .card-item{
  border:1px solid var(--ui-line);box-shadow:0 12px 34px rgba(0,0,0,.13),inset 0 1px rgba(255,255,255,.035);
  transition:border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}
.screen-content .panel:hover{border-color:var(--page-edge,rgba(216,196,255,.28))}
.screen-content .stat-card:hover,.screen-content .chapter:hover{transform:translateY(-3px);border-color:var(--page-edge,rgba(216,196,255,.3));box-shadow:0 16px 38px rgba(0,0,0,.23),0 0 22px var(--page-glow,rgba(167,139,250,.08))}
.screen-content .section-head{padding-bottom:11px;border-bottom:1px solid var(--ui-line)}
.screen-content .section-head h2{font:600 18px Inter,system-ui,sans-serif;letter-spacing:-.035em}
.screen-content .panel h2{font:600 17px Inter,system-ui,sans-serif;letter-spacing:-.03em}
.screen-content .btn,.screen-content .pill-tab,.screen-content .field input,.screen-content .field select{transition:all .2s ease}
.screen-content .list-row{border-color:var(--ui-line);background:rgba(8,9,25,.35)}
.screen-content .attribute{border-color:var(--ui-line);background:rgba(9,10,28,.5)}
.screen-content .table-wrap{border:1px solid var(--ui-line);border-radius:12px;background:rgba(8,9,25,.25)}
.screen-content table tr:hover td{background:rgba(167,139,250,.045)}
.screen-content .empty{border-color:var(--ui-line-strong)}
/* Dashboard: visão panorâmica */
.screen-dashboard{--page-accent:#d8c4ff;--page-edge:rgba(216,196,255,.3);--page-tint:rgba(167,139,250,.16);--page-wash:rgba(167,139,250,.12);--page-glow:rgba(167,139,250,.12)}
.screen-dashboard .hero{border-radius:19px;min-height:290px;box-shadow:0 22px 60px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.08)}
.screen-dashboard .hero h2{font:500 clamp(30px,3vw,44px) Inter,system-ui,sans-serif;letter-spacing:-.055em}
.screen-dashboard .hero .btn{margin-top:8px}
.screen-dashboard .grid-4 .stat-card{min-height:126px}
.screen-dashboard .grid-3>.panel{position:relative;overflow:hidden}
.screen-dashboard .grid-3>.panel:after{content:"↗";position:absolute;right:16px;top:14px;color:#d8c4ff;opacity:.25;font-size:17px}
/* Personagem: ficha editorial */
.screen-character{--page-accent:#8de8dc;--page-edge:rgba(141,232,220,.28);--page-tint:rgba(74,190,176,.13);--page-wash:rgba(74,190,176,.1);--page-glow:rgba(74,190,176,.1)}
.screen-character .character-card{padding-bottom:18px;border-bottom:1px solid var(--ui-line)}
.screen-character .big-avatar{border-radius:17px}
.screen-character .attribute-grid .attribute{position:relative;overflow:hidden}
.screen-character .attribute-grid .attribute:after{content:"";position:absolute;left:12%;right:12%;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--page-accent),transparent);opacity:.5}
.screen-character #char-form{padding-top:4px}
.screen-character #char-form .field{padding:3px}
.screen-character #char-form .field:focus-within{background:rgba(141,232,220,.035);border-radius:9px}
/* Arena: palco de confronto */
.screen-arena{--page-accent:#ff9caa;--page-edge:rgba(255,125,151,.3);--page-tint:rgba(255,92,126,.13);--page-wash:rgba(255,92,126,.1);--page-glow:rgba(255,92,126,.1)}
.screen-arena .combatant{border-radius:18px;box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.2)}
.screen-arena .action-btn{border-color:var(--ui-line);transition:transform .2s,border-color .2s,background .2s}
.screen-arena .action-btn:hover{transform:translateY(-3px);border-color:var(--page-edge)}
.screen-arena .combat-log{padding:14px;border:1px solid var(--ui-line);border-radius:12px;background:rgba(5,6,20,.35)}
/* Campanha: trilha de capítulos */
.screen-campaign{--page-accent:#f2cf8b;--page-edge:rgba(242,207,139,.28);--page-tint:rgba(242,190,95,.12);--page-wash:rgba(242,190,95,.09);--page-glow:rgba(242,190,95,.09)}
.screen-campaign .chapter{position:relative;overflow:hidden}
.screen-campaign .chapter:before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:linear-gradient(180deg,var(--page-accent),transparent);opacity:.55}
.screen-campaign .encounter{transition:transform .2s,border-color .2s,background .2s}
.screen-campaign .encounter:not(:disabled):hover{transform:translateY(-3px);border-color:var(--page-accent)}
/* Coleção: galeria de cartas */
.screen-cards{--page-accent:#c2a8ff;--page-edge:rgba(194,168,255,.3);--page-tint:rgba(160,125,255,.13);--page-wash:rgba(160,125,255,.1);--page-glow:rgba(160,125,255,.1)}
.screen-cards .card-item{overflow:hidden}
.screen-cards .card-item img{transition:transform .35s ease,filter .35s ease}
.screen-cards .card-item:hover img{transform:scale(1.035);filter:brightness(1.08)}
/* Mercado: painel transacional */
.screen-market{--page-accent:#e7c47d;--page-edge:rgba(231,196,125,.3);--page-tint:rgba(231,196,125,.13);--page-wash:rgba(231,196,125,.1);--page-glow:rgba(231,196,125,.08)}
.screen-market .hero{border-style:solid}
.screen-market .list-row{transition:transform .2s,border-color .2s}
.screen-market .list-row:hover{transform:translateX(3px);border-color:var(--page-edge)}
/* Ranking: identidade competitiva */
.screen-ranking{--page-accent:#ff9db8;--page-edge:rgba(255,157,184,.3);--page-tint:rgba(255,100,145,.12);--page-wash:rgba(255,100,145,.1);--page-glow:rgba(255,100,145,.09)}
.screen-ranking .rank-profile-head{padding:15px;border:1px solid var(--ui-line);border-radius:14px;background:rgba(8,9,25,.28)}
.screen-ranking #global-ranking-list .list-row{border-left:2px solid rgba(255,157,184,.32)}
/* Codex: leitura e consulta */
.screen-rules{--page-accent:#91caff;--page-edge:rgba(145,202,255,.3);--page-tint:rgba(90,160,255,.13);--page-wash:rgba(90,160,255,.1);--page-glow:rgba(90,160,255,.08)}
.screen-rules .panel{background:linear-gradient(145deg,rgba(18,24,51,.94),rgba(10,12,31,.97))}
.screen-rules .list-row{border-left:2px solid rgba(145,202,255,.32)}
/* Footer e feedback */
footer{padding:20px 0 8px;color:#817b9e}
.toast{bottom:112px;right:24px;backdrop-filter:blur(16px)}
:focus-visible{outline:2px solid rgba(216,196,255,.8);outline-offset:3px}
@media(max-width:900px){
 .nav-item{min-width:68px}
 .main{padding-left:20px;padding-right:20px}
 .screen-character .character-card{grid-template-columns:145px minmax(0,1fr)}
 .screen-character .big-avatar{width:145px;height:210px}
}
@media(max-width:760px){
 .app-shell{padding-bottom:102px}
 .sidebar{left:10px;right:10px;bottom:10px;width:auto;max-width:none;transform:none;padding:6px;border-radius:15px}
 .sidebar nav{justify-content:flex-start;gap:2px;overflow-x:auto;scrollbar-width:none}
 .sidebar nav::-webkit-scrollbar{display:none}
 .nav-item{flex:1 0 58px;min-width:58px;min-height:53px;padding:6px 3px;gap:4px;font-size:8px}
 .nav-item span{font-size:16px}
 .main{padding:0 13px 14px}
 .topbar{padding:18px 0 15px;margin-bottom:15px}
 .screen-intro{min-height:76px;padding:13px 14px;margin:7px 0 16px}
 .screen-sigil{width:42px;height:42px;flex-basis:42px}
 .screen-orbit{right:10px;font-size:64px}
 .screen-content{gap:16px}
 .screen-content .section-head{align-items:flex-start;flex-wrap:wrap}
 .screen-dashboard .hero{min-height:0}
 .screen-character .character-card{grid-template-columns:100px minmax(0,1fr)}
 .screen-character .big-avatar{width:100px;height:145px}
 .toast{left:12px;right:12px;bottom:88px;text-align:center}
 footer{padding-bottom:12px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}


/* INFINITUM — Dock minimalista e identidade visual por módulo */
.sidebar{
  padding:7px 9px;
  border-color:rgba(216,196,255,.16);
  border-radius:17px;
  background:rgba(9,10,27,.78);
  box-shadow:0 16px 55px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.055);
}
.sidebar:before{background:linear-gradient(110deg,rgba(167,139,250,.055),transparent 50%,rgba(141,235,235,.035))}
.sidebar nav{gap:3px}
.nav-item{
  min-width:75px;min-height:58px;padding:7px 10px 8px;gap:5px;
  border:1px solid transparent;border-radius:12px;
  color:#aaa6c2;background:transparent;
}
.nav-item .nav-icon{width:21px;height:21px;display:grid;place-items:center}
.nav-item .nav-icon svg{
  width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.45;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease,stroke-width .25s ease;
}
.nav-item small{font-size:9px;font-weight:600;letter-spacing:.015em;color:inherit}
.nav-item:hover .nav-icon svg{transform:translateY(-2px);stroke-width:1.8}
.nav-item.active{
  background:linear-gradient(180deg,rgba(167,139,250,.13),rgba(167,139,250,.035));
  border-color:rgba(216,196,255,.18);box-shadow:inset 0 1px rgba(255,255,255,.055);
}
.nav-item.active:after{height:1px;width:22px;bottom:3px;box-shadow:0 0 9px currentColor}
.main{padding-bottom:34px}
.topbar{border-bottom-color:rgba(207,199,255,.12)}
.topbar:after{width:76px;opacity:.65}
.screen-intro{
  position:relative;overflow:hidden;isolation:isolate;
  border-radius:17px;border-color:var(--page-edge,rgba(216,196,255,.19));
  background:linear-gradient(110deg,var(--page-wash,rgba(22,20,52,.45)),rgba(13,15,34,.52) 62%,rgba(13,15,34,.24));
  box-shadow:inset 0 1px rgba(255,255,255,.035);
  transition:border-color .35s ease,background .35s ease;
}
.screen-intro:after{
  content:"";position:absolute;z-index:-1;right:-54px;top:-105px;width:250px;height:250px;
  border:1px solid var(--page-edge,rgba(216,196,255,.16));border-radius:50%;opacity:.55;
  box-shadow:0 0 0 22px rgba(255,255,255,.012),0 0 0 48px rgba(255,255,255,.009);
}
.screen-intro .screen-sigil{border-radius:15px;backdrop-filter:blur(12px)}
.screen-orbit{font-weight:200;right:34px;top:50%;transform:translateY(-50%);animation:orbit-breathe 7s ease-in-out infinite}
@keyframes orbit-breathe{0%,100%{transform:translateY(-50%) rotate(-8deg) scale(.96);opacity:.055}50%{transform:translateY(-50%) rotate(8deg) scale(1.04);opacity:.13}}
.screen-content{animation:module-enter .42s cubic-bezier(.2,.75,.25,1) both}
@keyframes module-enter{from{opacity:0;transform:translate3d(0,12px,0);filter:blur(2px)}to{opacity:1;transform:translate3d(0,0,0);filter:blur(0)}}
.screen-content>.grid>.panel,.screen-content>.grid>.stat-card,.screen-content>.panel,.screen-content>.hero{
  animation:card-rise .48s cubic-bezier(.2,.7,.25,1) both;
}
.screen-content>.grid>.panel:nth-child(2),.screen-content>.grid>.stat-card:nth-child(2){animation-delay:.045s}
.screen-content>.grid>.panel:nth-child(3),.screen-content>.grid>.stat-card:nth-child(3){animation-delay:.09s}
.screen-content>.grid>.panel:nth-child(4),.screen-content>.grid>.stat-card:nth-child(4){animation-delay:.135s}
@keyframes card-rise{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.screen-content .panel,.screen-content .stat-card,.screen-content .chapter,.screen-content .card-item{
  border-color:rgba(207,199,255,.13);
  box-shadow:0 10px 30px rgba(0,0,0,.12),inset 0 1px rgba(255,255,255,.025);
}
.screen-content .panel:hover,.screen-content .card-item:hover{
  border-color:var(--page-edge,rgba(216,196,255,.3));
  box-shadow:0 16px 38px rgba(0,0,0,.2),0 0 24px var(--page-glow,rgba(167,139,250,.07));
}
.screen-content .section-head{margin-top:32px}
.screen-content .section-head h2{letter-spacing:-.045em}
.screen-content .tag{font-weight:600}
.screen-content .btn{border-radius:9px}
.screen-content .btn:active,.nav-item:active{transform:scale(.975)}
/* Identidade do cabeçalho acompanha cada página */
#view[data-page="dashboard"] .screen-intro{--page-accent:#d8c4ff;--page-edge:rgba(216,196,255,.28);--page-wash:rgba(118,85,184,.13);--page-glow:rgba(167,139,250,.1)}
#view[data-page="character"] .screen-intro{--page-accent:#8de8dc;--page-edge:rgba(141,232,220,.28);--page-wash:rgba(74,190,176,.1);--page-glow:rgba(74,190,176,.1)}
#view[data-page="arena"] .screen-intro{--page-accent:#ff9caa;--page-edge:rgba(255,125,151,.3);--page-wash:rgba(255,92,126,.11);--page-glow:rgba(255,92,126,.1)}
#view[data-page="campaign"] .screen-intro{--page-accent:#f2cf8b;--page-edge:rgba(242,207,139,.28);--page-wash:rgba(242,190,95,.1);--page-glow:rgba(242,190,95,.09)}
#view[data-page="cards"] .screen-intro{--page-accent:#c2a8ff;--page-edge:rgba(194,168,255,.3);--page-wash:rgba(160,125,255,.11);--page-glow:rgba(160,125,255,.1)}
#view[data-page="market"] .screen-intro{--page-accent:#e7c47d;--page-edge:rgba(231,196,125,.3);--page-wash:rgba(231,196,125,.1);--page-glow:rgba(231,196,125,.08)}
#view[data-page="ranking"] .screen-intro{--page-accent:#ff9db8;--page-edge:rgba(255,157,184,.3);--page-wash:rgba(255,100,145,.1);--page-glow:rgba(255,100,145,.09)}
#view[data-page="rules"] .screen-intro{--page-accent:#91caff;--page-edge:rgba(145,202,255,.3);--page-wash:rgba(90,160,255,.1);--page-glow:rgba(90,160,255,.08)}
/* Apresentações distintas por módulo */
.screen-dashboard .hero{background:radial-gradient(circle at 85% 25%,rgba(167,139,250,.18),transparent 34%),linear-gradient(120deg,#171638,#10102c 70%,#15132f);border-color:rgba(216,196,255,.23)}
.screen-character .panel:first-child{background:linear-gradient(145deg,rgba(13,35,42,.72),rgba(10,14,29,.94))}
.screen-arena .combatant{position:relative;overflow:hidden}
.screen-arena .combatant:after{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.045);border-radius:12px;pointer-events:none}
.screen-campaign .chapter{background:linear-gradient(145deg,rgba(42,34,25,.5),rgba(12,13,31,.96))}
.screen-cards .card-item{transform:translateZ(0);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.screen-cards .card-item:hover{transform:translateY(-5px) rotate(-.35deg)}
.screen-market .panel{background:linear-gradient(145deg,rgba(40,33,20,.28),rgba(12,13,31,.96))}
.screen-ranking .panel{background:linear-gradient(145deg,rgba(42,22,36,.32),rgba(12,13,31,.96))}
.screen-rules .panel{background:linear-gradient(145deg,rgba(18,31,48,.52),rgba(10,12,31,.96))}
@media(max-width:760px){
  .app-shell{padding-bottom:94px}
  .sidebar{left:8px;right:8px;bottom:8px;width:auto;max-width:none;padding:5px 4px;border-radius:15px}
  .sidebar nav{justify-content:space-around;gap:0}
  .nav-item{flex:1 1 0;min-width:0;min-height:54px;padding:5px 1px;gap:4px;border-radius:10px}
  .nav-item .nav-icon{width:19px;height:19px}
  .nav-item .nav-icon svg{width:18px;height:18px}
  .nav-item small{font-size:7px;letter-spacing:0}
  .screen-intro{min-height:82px;padding:14px 15px}
  .screen-orbit{right:13px;font-size:60px}
  .main{padding-bottom:24px}
}
@media(max-width:430px){
  .nav-item small{font-size:6.5px}
  .screen-intro .screen-kicker{font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .screen-orbit,.screen-content,.screen-content>.grid>.panel,.screen-content>.grid>.stat-card,.screen-content>.panel,.screen-content>.hero{animation:none!important}
  .nav-item,.screen-content .panel,.screen-content .card-item{transition:none!important}
}

/* Construtor de ficha: prévia viva e controles de perícia */
.character-builder-grid{display:grid;grid-template-columns:minmax(290px,.78fr) minmax(0,1.55fr);gap:16px;align-items:start}
.character-live-card{position:sticky;top:18px;max-height:calc(100vh - 125px);overflow:auto;border-color:rgba(141,232,220,.2);background:linear-gradient(155deg,rgba(18,37,48,.72),rgba(10,13,29,.96))}
.character-live-card .stat-card{min-width:0;padding:11px 9px}
.character-live-card .stat-card small{display:block;font-size:9px;color:var(--muted)}
.character-live-card .stat-card strong{display:block;font-size:19px;margin-top:4px}
.character-builder-form{min-width:0}
.skill-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.skill-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 10px;border:1px solid rgba(207,199,255,.13);border-radius:10px;background:rgba(255,255,255,.018);transition:border-color .2s,background .2s}
.skill-choice:has(input:checked){border-color:rgba(141,232,220,.38);background:rgba(80,190,175,.065)}
.skill-check{display:flex;align-items:center;gap:9px;min-width:0;cursor:pointer;font-size:12px}
.skill-check input{appearance:none;width:15px;height:15px;flex:0 0 15px;margin:0;border:1px solid rgba(210,220,245,.48);border-radius:4px;background:transparent;display:grid;place-items:center}
.skill-check input:checked{background:#73d8ca;border-color:#73d8ca}
.skill-check input:checked:after{content:'✓';font-size:11px;font-weight:800;color:#071a20}
.skill-choice select{width:68px;min-width:68px;padding:6px 7px;font-size:11px}
.origin-points-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.origin-skill-point input{padding:8px}
.character-live-card .character-card{align-items:center}
.character-live-card .big-avatar{width:58px;height:58px;flex:0 0 58px}
@media(max-width:980px){.character-builder-grid{grid-template-columns:1fr}.character-live-card{position:relative;top:auto;max-height:none;order:-1}}
@media(max-width:560px){.skill-check-grid{grid-template-columns:1fr}.origin-points-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Ficha de personagem — painel compacto inspirado em character sheets de RPG */
.screen-character .screen-intro{display:none}
.screen-character .screen-content{padding-top:0}
.sheet-shell{--sheet-bg:#080d19;--sheet-panel:#101827;--sheet-line:rgba(139,160,199,.16);--sheet-muted:#8290a8;--sheet-text:#e8edf8;--sheet-violet:#a78bfa;--sheet-cyan:#79d9e8;color:var(--sheet-text);animation:sheet-enter .42s ease both}
@keyframes sheet-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.sheet-hero{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:15px;padding:18px 19px 15px;border:1px solid var(--sheet-line);border-radius:15px;background:radial-gradient(ellipse at 15% 0%,rgba(120,91,193,.2),transparent 42%),linear-gradient(135deg,#121b2d,#0a1120 70%);box-shadow:0 18px 50px rgba(0,0,0,.22);overflow:hidden}
.sheet-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.018),transparent 70%)}
.sheet-identity{display:flex;align-items:center;gap:15px;min-width:0}
.sheet-avatar{width:61px;height:61px;flex:0 0 61px;border-radius:50%;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(202,190,255,.55);background:radial-gradient(circle at 30% 20%,#4b4777,#11172a 70%);font:600 23px Georgia,serif;color:#fff}
.sheet-avatar img{width:100%;height:100%;object-fit:cover}
.sheet-name-block{min-width:0}.sheet-name-block h1{margin:3px 0 5px;font:650 clamp(24px,3vw,32px) Georgia,serif;letter-spacing:-.4px;color:#f5f1ff}
.sheet-eyebrow{display:block;font-size:8px;letter-spacing:1.55px;font-weight:800;color:#a99bd5}
.sheet-subtitle{display:flex;align-items:center;gap:7px;flex-wrap:wrap;color:#aab5c9;font-size:10px}
.sheet-subtitle b{border:1px solid rgba(167,139,250,.42);color:#d8c8ff;background:rgba(129,95,205,.14);padding:3px 7px;border-radius:5px;font-size:9px}
.sheet-tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.sheet-tags span{padding:4px 7px;border:1px solid var(--sheet-line);border-radius:5px;color:#a9b6ca;font-size:8px;letter-spacing:.5px}
.sheet-hero-actions{position:absolute;right:17px;top:15px;display:flex;gap:7px;z-index:2}
.sheet-icon-button{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--sheet-line);border-radius:8px;background:#111b2b;color:#c6cce0;cursor:pointer;font-size:14px}
.sheet-icon-button:hover{border-color:var(--sheet-violet);color:white;background:#201d3c}
.sheet-icon-button input{display:none}
.sheet-vitals{display:grid;grid-template-columns:minmax(150px,1.55fr) repeat(5,minmax(65px,.72fr)) minmax(130px,1.3fr);gap:7px;align-items:stretch}
.sheet-hp-card,.sheet-top-stat,.sheet-recovery{min-width:0;border:1px solid var(--sheet-line);border-radius:10px;background:rgba(6,12,24,.64);padding:10px 11px}
.sheet-hp-card{background:linear-gradient(135deg,rgba(25,54,48,.6),rgba(10,20,29,.85));border-color:rgba(101,190,160,.25)}
.sheet-vital-label,.sheet-resource-title{display:flex;justify-content:space-between;gap:6px;color:#8e9db3;font-size:8px;letter-spacing:1px;font-weight:800}
.sheet-hp-card>strong{display:block;font:650 29px Georgia,serif;color:#f6f2e9;margin:5px 0}.sheet-hp-card>strong i{font-style:normal;color:#9ac9c1;font-size:17px}
.sheet-vital-track,.sheet-resource-track{height:5px;border-radius:10px;background:#293448;overflow:hidden}.sheet-vital-track i{display:block;height:100%;border-radius:10px;background:linear-gradient(90deg,#63a98b,#b7d98d)}
.sheet-top-stat{display:flex;flex-direction:column;justify-content:center;gap:8px}.sheet-top-stat small,.sheet-recovery small{color:#8290a8;font-size:7px;letter-spacing:1.15px;font-weight:800}.sheet-top-stat strong{font:650 22px Georgia,serif;color:#e6e4f4}.sheet-top-stat strong i{font-style:normal;font-size:10px;color:#9aa8bd}
.sheet-recovery{display:flex;flex-direction:column;justify-content:center;gap:6px}.sheet-recovery span{font-size:8px;color:#b5c2d4;padding:4px 5px;border:1px solid rgba(139,160,199,.12);border-radius:5px;background:rgba(255,255,255,.025)}
.sheet-tabs{display:flex;gap:5px;margin:12px 0 13px;padding:4px;border:1px solid var(--sheet-line);border-radius:10px;background:rgba(7,12,23,.8)}
.sheet-tab{flex:1;text-align:left;padding:10px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:#8e9db4;font-size:10px;font-weight:700;transition:.2s}
.sheet-tab:hover{color:white;background:rgba(255,255,255,.04)}.sheet-tab.active{color:#f1eaff;border-color:rgba(167,139,250,.45);background:linear-gradient(110deg,rgba(123,91,194,.45),rgba(74,69,140,.2));box-shadow:0 5px 18px rgba(91,67,160,.16)}
.sheet-section-heading{display:flex;align-items:end;justify-content:space-between;gap:10px;margin:2px 0 10px}.sheet-section-heading h2{font:600 18px Georgia,serif;margin:3px 0;color:#f1ecff}.sheet-section-heading p{font-size:9px;color:var(--sheet-muted);margin:0}.sheet-muted{font-size:8px;color:var(--sheet-muted);letter-spacing:1px}
.sheet-ability-scores{padding:12px 13px;border:1px solid var(--sheet-line);border-radius:12px;background:linear-gradient(130deg,rgba(17,26,43,.95),rgba(10,16,29,.94))}
.sheet-attribute-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}
.sheet-attribute{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 8px;padding:9px 11px;border:1px solid rgba(132,157,198,.13);border-radius:8px;background:linear-gradient(145deg,#172236,#0e1727);transition:transform .2s,border-color .2s}
.sheet-attribute:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.5)}
.sheet-attribute small{font-size:8px;letter-spacing:1px;color:#9caac0;font-weight:800}.sheet-attribute strong{grid-row:span 2;font:650 23px Georgia,serif;color:#e5e8fa}.sheet-attribute span{font-size:8px;color:#a99bd5}
.sheet-tab-content{margin-top:13px}
.sheet-dashboard-grid{display:grid;grid-template-columns:minmax(170px,.82fr) minmax(210px,1fr) minmax(260px,1.35fr);gap:10px;align-items:start}
.sheet-column{display:grid;gap:10px;min-width:0}
.sheet-panel{min-width:0;padding:12px;border:1px solid var(--sheet-line);border-radius:11px;background:linear-gradient(145deg,rgba(17,26,43,.96),rgba(9,15,27,.98));box-shadow:0 10px 26px rgba(0,0,0,.12)}
.sheet-panel-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}.sheet-panel-heading h3{font:600 15px Georgia,serif;margin:3px 0 0;color:#f1ecff}.sheet-count{min-width:23px;height:23px;display:grid;place-items:center;border:1px solid rgba(167,139,250,.25);border-radius:6px;color:#c8b9ff;background:rgba(129,95,205,.1);font-size:9px}
.sheet-skills{display:grid;gap:4px}.sheet-skill-row,.sheet-save-row,.sheet-progress-row{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:7px 8px;border-bottom:1px solid rgba(139,160,199,.09);font-size:9px;color:#b6c1d3}.sheet-skill-row:last-child,.sheet-save-row:last-child,.sheet-progress-row:last-child{border-bottom:0}.sheet-skill-row b,.sheet-save-row strong,.sheet-progress-row b{min-width:25px;text-align:right;color:#e2d7ff;font:650 12px Georgia,serif}.sheet-skill-row i{width:22%;height:3px;border-radius:5px;background:linear-gradient(90deg,#8b76d4,#5a9ba9);opacity:.8}
.sheet-save-row{padding:9px 8px}.sheet-resource-block{margin:10px 0 13px}.sheet-resource-title{font-size:8px;letter-spacing:.2px;margin-bottom:6px}.sheet-resource-title b{font-size:9px;color:#d7e0ee}.sheet-resource-track .hp{display:block;height:100%;background:linear-gradient(90deg,#c65379,#e78aa0)}.sheet-resource-track .vp{display:block;height:100%;background:linear-gradient(90deg,#5579d4,#83a8f3)}
.sheet-passives{border-top:1px solid var(--sheet-line);padding-top:10px;margin-top:12px}.sheet-chip-list{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.sheet-chip-list span{padding:5px 7px;border:1px solid rgba(167,139,250,.2);border-radius:5px;background:rgba(125,97,192,.09);color:#c5b9e8;font-size:8px}
.sheet-subtabs{display:flex;gap:4px;padding:3px;margin-bottom:9px;border:1px solid rgba(139,160,199,.12);border-radius:7px}.sheet-subtabs span{flex:1;text-align:center;padding:6px 3px;color:#8492a8;font-size:8px}.sheet-subtabs .selected{color:#e5d9ff;background:rgba(129,95,205,.25);border-radius:5px}
.sheet-abilities{display:grid;gap:7px;max-height:510px;overflow:auto;padding-right:3px}.sheet-ability{padding:9px;border:1px solid rgba(139,160,199,.12);border-radius:8px;background:rgba(6,12,23,.52);transition:border-color .2s,transform .2s}.sheet-ability:hover{border-color:rgba(167,139,250,.4);transform:translateY(-1px)}.sheet-ability-top{display:flex;justify-content:space-between;color:#8996ae;font-size:7px;letter-spacing:.8px}.sheet-ability-pillar{color:#b5a3f0}.sheet-ability>strong{display:block;margin-top:6px;color:#e7e2f7;font-size:10px}.sheet-ability p{margin:5px 0 0;color:#8f9bb0;font-size:8px;line-height:1.55}
.sheet-mini-item{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid rgba(139,160,199,.09)}.sheet-mini-item>span{width:27px;height:27px;display:grid;place-items:center;border-radius:7px;background:rgba(129,95,205,.15);color:#c9baff}.sheet-mini-item strong,.sheet-mini-item small{display:block}.sheet-mini-item strong{font-size:9px}.sheet-mini-item small{font-size:8px;color:var(--sheet-muted);margin-top:3px}
.sheet-link,.sheet-action{border:1px solid rgba(167,139,250,.3);background:rgba(129,95,205,.1);color:#d1c4f7;border-radius:6px;padding:7px 9px;font-size:8px;font-weight:800}.sheet-link:hover,.sheet-action:hover{border-color:var(--sheet-violet)}
.sheet-inventory-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sheet-item{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--sheet-line);border-radius:9px;background:linear-gradient(145deg,#151e30,#0c1422)}.sheet-item-icon{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(167,139,250,.25);border-radius:8px;color:#c8b9ff;background:rgba(129,95,205,.12)}.sheet-item strong,.sheet-item small{display:block}.sheet-item strong{font-size:10px}.sheet-item small,.sheet-item p{font-size:8px;color:var(--sheet-muted);margin:4px 0 0}.sheet-item-value{font-size:8px;color:#c8b9ff}
.sheet-bio-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.sheet-bio-card{padding:13px;border:1px solid var(--sheet-line);border-radius:9px;background:#111b2c}.sheet-bio-card small,.sheet-bio-card strong{display:block}.sheet-bio-card small{font-size:8px;color:var(--sheet-muted);margin-bottom:7px}.sheet-bio-card strong{font-size:11px;color:#e6e2f4}
.sheet-empty{padding:17px;border:1px dashed rgba(139,160,199,.2);border-radius:8px;text-align:center;color:var(--sheet-muted);font-size:9px;line-height:1.6}.sheet-empty.compact{padding:11px}.sheet-footer{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:13px;padding:11px 2px 2px;border-top:1px solid var(--sheet-line);color:#68758c;font-size:7px;letter-spacing:1.2px}.sheet-footer button{border:0;background:none;color:#a99bd5;font-size:8px;letter-spacing:.8px;cursor:pointer}.sheet-edit-back{margin-top:12px;text-align:right}
@media(max-width:1180px){.sheet-vitals{grid-template-columns:repeat(4,minmax(0,1fr))}.sheet-hp-card{grid-column:span 2}.sheet-recovery{grid-column:span 2}.sheet-dashboard-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-actions-panel{grid-column:span 2}.sheet-abilities{grid-template-columns:repeat(2,minmax(0,1fr));max-height:none}}
@media(max-width:760px){.sheet-hero{padding:13px}.sheet-identity{padding-right:65px}.sheet-avatar{width:49px;height:49px;flex-basis:49px}.sheet-name-block h1{font-size:22px}.sheet-subtitle{font-size:8px}.sheet-vitals{grid-template-columns:repeat(3,minmax(0,1fr))}.sheet-hp-card{grid-column:span 3}.sheet-recovery{grid-column:span 3;display:grid;grid-template-columns:1fr 1fr}.sheet-recovery small{grid-column:span 2}.sheet-top-stat{padding:9px}.sheet-top-stat strong{font-size:18px}.sheet-tabs{overflow:auto}.sheet-tab{white-space:nowrap;font-size:9px;padding:9px 8px}.sheet-attribute-row{grid-template-columns:repeat(3,minmax(0,1fr))}.sheet-dashboard-grid{grid-template-columns:1fr}.sheet-actions-panel{grid-column:auto}.sheet-abilities{grid-template-columns:1fr}.sheet-inventory-grid{grid-template-columns:1fr}.sheet-bio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-section-heading h2{font-size:16px}}
@media(prefers-reduced-motion:reduce){.sheet-shell,.sheet-attribute,.sheet-ability{animation:none;transition:none}}

.sheet-subtabs button{flex:1;text-align:center;padding:6px 3px;border:0;border-radius:5px;background:transparent;color:#8492a8;font-size:8px;cursor:pointer}.sheet-subtabs button:hover{color:#fff;background:rgba(255,255,255,.04)}.sheet-subtabs button.selected{color:#e5d9ff;background:rgba(129,95,205,.25)}

/* Remove a introdução genérica apenas na ficha: o cabeçalho do personagem assume esse espaço. */
#view[data-page="character"]>.screen-intro{display:none}
#view[data-page="character"]>.screen-content{padding-top:0}

/* Navegação da ficha: barra discreta no rodapé, liberando a largura do painel */
body:has(#view[data-page="character"]) .app-shell{display:block;padding-bottom:76px}
body:has(#view[data-page="character"]) .sidebar{position:fixed;z-index:40;left:0;right:0;top:auto;bottom:0;width:100%;height:66px;min-height:66px;padding:6px 18px;background:rgba(8,12,23,.96);backdrop-filter:blur(18px);border:0;border-top:1px solid rgba(139,160,199,.2);display:flex;flex-direction:row;align-items:center}
body:has(#view[data-page="character"]) .sidebar .brand,
body:has(#view[data-page="character"]) .sidebar .season-label,
body:has(#view[data-page="character"]) .sidebar .sidebar-bottom{display:none}
body:has(#view[data-page="character"]) .sidebar nav{display:flex;flex:1;justify-content:center;gap:7px;min-width:0}
body:has(#view[data-page="character"]) .sidebar .nav-item{min-width:70px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:6px 11px;border-radius:8px;text-align:center;font-size:8px}
body:has(#view[data-page="character"]) .sidebar .nav-item span{display:block;width:auto;font-size:14px;line-height:1}
body:has(#view[data-page="character"]) .sidebar .nav-item small{font-size:8px}
body:has(#view[data-page="character"]) .main{padding:0 22px 14px}
body:has(#view[data-page="character"]) .main>.topbar{display:none}
body:has(#view[data-page="character"]) .main>footer{display:none}
@media(max-width:760px){
 body:has(#view[data-page="character"]) .sidebar{padding:5px 4px;height:62px;min-height:62px}
 body:has(#view[data-page="character"]) .sidebar nav{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;gap:3px}
 body:has(#view[data-page="character"]) .sidebar nav::-webkit-scrollbar{display:none}
 body:has(#view[data-page="character"]) .sidebar .nav-item{min-width:58px;padding:5px 6px}
 body:has(#view[data-page="character"]) .main{padding:0 10px 12px}
 body:has(#view[data-page="character"]) .app-shell{padding-bottom:70px}
}

body:has(#view[data-page="character"]) .sidebar{width:100vw;max-width:100vw}
body:has(#view[data-page="character"]) .sidebar nav{width:100%;overflow:visible;flex-wrap:nowrap}
body:has(#view[data-page="character"]) .sidebar .nav-item{flex:0 1 auto}
@media(max-width:760px){body:has(#view[data-page="character"]) .sidebar nav{overflow-x:auto;flex-wrap:nowrap}}

body:has(#view[data-page="character"]) .sidebar{transform:none!important;left:0;right:0;width:100vw;max-width:100vw}

/* Distribuição unificada de perícias: caixas independentes para pontos iniciais e de origem */
.skill-distribution-table{display:flex;flex-direction:column;gap:5px;margin-top:12px}
.skill-distribution-head,.skill-distribution-row{display:grid;grid-template-columns:minmax(120px,1.15fr) minmax(0,1fr) minmax(0,1fr);align-items:center;gap:10px}
.skill-distribution-head{padding:0 12px 8px;color:var(--muted,#8792a8);font-size:9px;font-weight:800;letter-spacing:.09em}
.skill-distribution-row{padding:7px 10px;border:1px solid rgba(170,185,220,.13);border-radius:9px;background:rgba(255,255,255,.018);min-height:45px;transition:border-color .18s,background .18s}
.skill-distribution-row:has(.initial input:checked){border-left:2px solid rgba(89,205,190,.75)}
.skill-distribution-row:has(.origin input:checked){background:rgba(145,112,225,.055)}
.skill-distribution-name{font-size:12px;font-weight:650;color:var(--text,#e8edf7)}
.skill-distribution-option{display:flex;align-items:center;gap:7px;min-width:0}
.skill-distribution-option>input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px}
.skill-checkmark,.skill-origin-checkmark{width:16px;height:16px;min-width:16px;border:1px solid rgba(112,211,196,.55);border-radius:4px;display:inline-grid;place-items:center;cursor:pointer;background:rgba(70,190,170,.045)}
.skill-origin-checkmark{border-color:rgba(176,145,255,.65);background:rgba(145,112,225,.06)}
.skill-distribution-option.initial input[type=checkbox]:checked+.skill-checkmark{background:#278f82;border-color:#55cbbb}
.skill-distribution-option.origin input[type=checkbox]:checked+.skill-origin-checkmark{background:#7652b8;border-color:#b293ff}
.skill-distribution-option.initial input[type=checkbox]:checked+.skill-checkmark:after,.skill-distribution-option.origin input[type=checkbox]:checked+.skill-origin-checkmark:after{content:'✓';font-size:11px;color:white;font-weight:800}
.skill-distribution-option select,.skill-distribution-option input[type=number]{width:62px;min-width:54px;padding:5px 6px;font-size:11px;margin-left:auto}
.skill-distribution-option input[type=number]{width:56px;min-width:48px}
.skill-option-label{font-size:10px;color:var(--muted,#9aa5b8)}
@media(max-width:650px){.skill-distribution-head,.skill-distribution-row{grid-template-columns:minmax(84px,.85fr) minmax(0,1fr) minmax(0,1fr);gap:6px}.skill-distribution-head{font-size:8px;padding-inline:7px}.skill-distribution-row{padding:7px 6px}.skill-distribution-name{font-size:10px}.skill-option-label{display:none}.skill-distribution-option{gap:4px}.skill-distribution-option select,.skill-distribution-option input[type=number]{width:48px;min-width:42px;padding:5px 3px}}

/* Painel de progressão contínua: recursos, ER e escolhas pendentes */
.sheet-progression-panel{margin:16px 0 18px;padding:18px;border:1px solid rgba(167,139,250,.26);border-radius:13px;background:linear-gradient(120deg,rgba(21,24,55,.96),rgba(10,17,31,.97));box-shadow:inset 0 1px rgba(255,255,255,.035)}
.sheet-progression-top{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sheet-progression-agent{display:flex;align-items:center;gap:12px;min-width:0}
.sheet-progression-avatar{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;overflow:hidden;border-radius:11px;border:1px solid rgba(216,196,255,.42);background:linear-gradient(145deg,#39275f,#101a30);color:#e5d7ff;font-weight:800;font-size:20px}
.sheet-progression-avatar img{width:100%;height:100%;object-fit:cover}
.sheet-progression-agent h2{margin:3px 0;font-size:17px;color:#f3edff}
.sheet-progression-agent p{margin:0;color:#9daac0;font-size:10px}
.sheet-progression-resources{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
.sheet-progression-resource>div:first-child{display:flex;justify-content:space-between;gap:8px;margin-bottom:6px}
.sheet-progression-resource span,.sheet-er-progress .sheet-resource-title span{font-size:9px;letter-spacing:.09em;color:#aab5cb}
.sheet-progression-resource b,.sheet-er-progress .sheet-resource-title b{font-size:11px;color:#edf0fa}
.sheet-resource-track .er{background:linear-gradient(90deg,#8b5cf6,#67d9e5)}
.sheet-er-progress{margin-top:14px;padding:12px;border-radius:9px;background:rgba(5,9,23,.48);border:1px solid rgba(167,139,250,.16)}
.sheet-er-progress .sheet-resource-title{display:flex;justify-content:space-between;gap:8px;margin-bottom:8px}
.sheet-er-progress small{display:block;margin-top:7px;color:#a99bcf;font-size:9px}
.sheet-progression-gains{margin-top:15px;padding-top:14px;border-top:1px solid rgba(167,139,250,.16)}
.sheet-progression-gains .sheet-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheet-gain-summary{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0}
.sheet-gain-summary span{padding:6px 8px;border:1px solid rgba(92,197,165,.2);border-radius:6px;background:rgba(37,120,96,.08);color:#a6e3cd;font-size:9px}
.sheet-progression-notice,.sheet-progression-hint{padding:9px 11px;border-radius:7px;background:rgba(131,96,204,.1);color:#d2c1fa;font-size:10px;line-height:1.5}
.sheet-progression-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}
.progress-choice{display:grid;gap:6px;padding:10px;border:1px solid rgba(167,139,250,.2);border-radius:8px;background:rgba(7,12,25,.5)}
.progress-choice span{font-size:10px;color:#c9b8f2}
.progress-choice select{width:100%;min-width:0;padding:8px;border:1px solid rgba(167,139,250,.3);border-radius:6px;background:#0b1020;color:#f0eaff;font-size:10px}
.sheet-confirm-progression{width:100%;margin-top:4px;border-color:#8d6bd0;background:linear-gradient(90deg,#6846a9,#8a5bc8);color:#fff}
.sheet-progression-complete{margin-top:12px;padding:10px;border:1px solid rgba(92,197,165,.2);border-radius:7px;color:#a6e3cd;font-size:10px}
.sheet-unlocked-abilities{margin-top:12px;padding-top:10px;border-top:1px solid rgba(167,139,250,.12)}
.sheet-unlocked-abilities small{font-size:8px;letter-spacing:.1em;color:#a99bcf}
.sheet-unlocked-abilities p{margin:6px 0 0;color:#c0c9d9;font-size:10px;line-height:1.6}
@media(max-width:650px){.sheet-progression-panel{padding:12px}.sheet-progression-resources{gap:8px}.sheet-progression-choices{grid-template-columns:1fr}.sheet-progression-agent h2{font-size:14px}.sheet-progression-avatar{width:46px;height:46px;flex-basis:46px}.sheet-gain-summary span{font-size:8px}}
.sheet-progression-confirmations{display:grid;gap:5px;margin-top:8px}.sheet-progression-confirmations small{color:#9ddfc6;font-size:9px;padding:4px 0}

/* =========================================================
   INFINITUM MULTIVERSE CLIENT · game launcher experience
   ========================================================= */
:root{
 --client-ink:#070914;--client-panel:rgba(12,14,35,.88);
 --client-line:rgba(180,157,255,.19);--client-gold:#f4c96b;
 --client-violet:#a78bfa;--client-cyan:#76dff2;
}
html{scroll-behavior:smooth}
body{
 background:
  radial-gradient(ellipse at 50% -20%,rgba(93,53,170,.26),transparent 48%),
  radial-gradient(ellipse at 0% 70%,rgba(27,91,152,.11),transparent 32%),
  radial-gradient(ellipse at 100% 60%,rgba(117,63,177,.12),transparent 35%),
  #070914;
 background-attachment:fixed;
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.2;background-image:radial-gradient(1px 1px at 15% 22%,#fff 98%,transparent),radial-gradient(1px 1px at 76% 16%,#b8a2ff 98%,transparent),radial-gradient(1px 1px at 42% 74%,#8debf5 98%,transparent);background-size:290px 240px,370px 310px,430px 350px}
.app-shell.client-shell{display:flex;flex-direction:column;min-height:100vh;grid-template-columns:1fr;max-width:none;overflow:clip;padding-bottom:92px}
.client-topbar{
 position:sticky;top:0;z-index:50;min-height:76px;display:flex;align-items:center;gap:24px;
 padding:10px clamp(16px,3vw,48px);border-bottom:1px solid rgba(180,157,255,.15);
 background:linear-gradient(180deg,rgba(7,9,23,.97),rgba(7,9,23,.84));
 backdrop-filter:blur(22px);box-shadow:0 8px 35px #0004
}
.client-topbar .brand{padding:0;gap:11px;min-width:210px}
.client-topbar .brand-mark{width:43px;height:43px;font-size:28px;color:#f8d98c;border-color:#d5a84c;background:radial-gradient(circle,rgba(167,139,250,.28),transparent 72%)}
.client-topbar .brand strong{font:700 17px Georgia,serif;letter-spacing:.18em;color:#fff3d6}
.client-topbar .brand small{font-size:8px;letter-spacing:.2em;color:#a99acb}
.client-world{display:flex;align-items:center;gap:9px;color:#c5bddc;font-size:9px;letter-spacing:.17em;white-space:nowrap}
.client-world small{padding-left:10px;border-left:1px solid #ffffff25;color:#8d83ab;font-size:8px}
.client-top-actions{display:flex;align-items:center;gap:13px;margin-left:auto}
.client-currency{display:flex;align-items:center;gap:8px;padding:7px 12px;border:1px solid #a78bfa28;border-radius:10px;background:#17142d88}
.currency-orb{display:grid;place-items:center;width:25px;height:25px;border-radius:50%;color:#f8d98c;border:1px solid #e4bd6d66;background:#d9a8421a}
.client-currency b,.client-currency small{display:block}.client-currency b{font-size:12px;color:#fff1d1;font-variant-numeric:tabular-nums}.client-currency small{margin-top:2px;font-size:7px;letter-spacing:.14em;color:#9e94b9}
.client-top-actions .server-status{font-size:8px;letter-spacing:.13em;padding:8px 10px;border:1px solid #6ad8bc28;border-radius:20px;background:#12342b35}
.client-top-actions .icon-button{width:34px;height:34px;border:1px solid var(--client-line);border-radius:9px;background:#111329;color:#c9b8ff}
.client-account{margin:0;padding:0 0 0 12px;border:0;border-left:1px solid #ffffff1b;gap:8px;min-width:0;cursor:pointer}
.client-account .mini-avatar{width:34px;height:34px;flex:0 0 34px;border-radius:50%;border:1px solid #d7b56a;color:#f7dc9a;background:radial-gradient(circle,#503b7c,#111329);display:grid;place-items:center}
.client-account strong{font-size:10px;color:#f1e8ff;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.client-account small{font-size:8px;color:#958bad}
.client-account .status-pill{font-size:7px;padding:4px 6px}
.client-main{width:100%;max-width:1660px;margin:0 auto;padding:0 clamp(16px,3vw,48px)}
.client-page-heading{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:23px 0 8px}
.client-page-heading .eyebrow{font-size:8px;letter-spacing:.22em;color:#9e91c0}
.client-page-heading h1{margin:5px 0 0;font:600 clamp(23px,2vw,30px) Georgia,serif;letter-spacing:.02em;color:#fff1d3}
.client-heading-meta{display:flex;align-items:center;gap:14px}
.client-heading-meta .server-status{font-size:8px;color:#85d8bd;letter-spacing:.1em}
.client-season{font-size:8px;letter-spacing:.12em;color:#a99cc5;padding:8px 11px;border:1px solid #a78bfa2b;border-radius:20px;background:#16132b88}
.client-main .view{max-width:none}
.client-main footer{padding:20px 0 4px;text-align:center;font-size:8px;letter-spacing:.14em;color:#6f6888}
.game-dock-wrap{
 position:fixed;left:50%;bottom:0;z-index:80;transform:translateX(-50%);
 width:min(100%,1080px);padding:0 18px max(8px,env(safe-area-inset-bottom));
}
.game-dock-glow{position:absolute;left:10%;right:10%;bottom:15px;height:48px;pointer-events:none;background:radial-gradient(ellipse,rgba(126,77,226,.22),transparent 70%);filter:blur(15px)}
#nav{
 position:relative;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));align-items:stretch;gap:3px;
 padding:8px 12px;border:1px solid rgba(185,164,255,.24);border-bottom-color:rgba(185,164,255,.12);
 border-radius:17px 17px 12px 12px;background:linear-gradient(180deg,rgba(22,20,49,.97),rgba(8,10,25,.98));
 box-shadow:0 0 0 1px #050610,0 -8px 36px #0008,inset 0 1px #ffffff12;backdrop-filter:blur(24px)
}
#nav:before{content:"";position:absolute;left:4%;right:4%;top:0;height:1px;background:linear-gradient(90deg,transparent,#9c7bf8,#f2ce7c,#9c7bf8,transparent);opacity:.65}
#nav .nav-item{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:58px;padding:6px 3px;border:1px solid transparent;border-radius:10px;background:transparent;color:#8f88aa;transition:color .2s,background .2s,transform .2s,box-shadow .2s}
#nav .nav-item .nav-icon{display:grid;place-items:center;width:22px;height:22px;color:currentColor}
#nav .nav-item svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round}
#nav .nav-item small{font-size:8px;line-height:1.2;letter-spacing:.08em;color:inherit}
#nav .nav-item:hover{transform:translateY(-2px);color:#e4d7ff;background:#a78bfa0d}
#nav .nav-item.active{color:#f6d58d;border-color:#d9b76c33;background:linear-gradient(180deg,#9c78f42c,#553b9d12);box-shadow:inset 0 1px #f4d78a20,0 0 20px #8e65eb1b}
#nav .nav-item.active:after{content:"";position:absolute;left:22%;right:22%;bottom:-8px;height:2px;background:linear-gradient(90deg,transparent,#d9b66c,transparent);box-shadow:0 0 12px #d9b66c}
#nav .nav-item.active .nav-icon{filter:drop-shadow(0 0 7px #ad8bff);color:#e6c57b}
.dock-center-mark{display:none}
.client-main .screen-intro{min-height:65px;margin:7px 0 17px;padding:10px 16px;border-radius:10px;border-color:#a78bfa24;background:linear-gradient(90deg,#16142eeb,#101329d9)}
.client-main .screen-sigil{width:40px;height:40px;flex-basis:40px;border-radius:10px;font-size:19px;border-color:#d7b86b77;color:#e7c77e;background:linear-gradient(145deg,#a78bfa24,#0c1027)}
.client-main .screen-kicker{font-size:9px;letter-spacing:.17em}
.client-main .screen-intro p{font-size:10px}
.client-main .screen-content{gap:15px}
.client-main .screen-content .panel,.client-main .screen-content .stat-card{border-radius:11px;border-color:#a78bfa24;background:linear-gradient(145deg,rgba(21,20,48,.94),rgba(9,12,29,.97));box-shadow:0 12px 32px #0003,inset 0 1px #ffffff08}
.client-main .screen-content .hero{position:relative;isolation:isolate;overflow:hidden;border-radius:14px;border:1px solid #c5a36b55;min-height:275px;background:radial-gradient(ellipse at 82% 10%,#7655b855,transparent 40%),linear-gradient(110deg,#181536,#0d1128 62%,#211638);box-shadow:0 15px 55px #0005,inset 0 1px #ffffff12}
.client-main .screen-content .hero:before{content:"";position:absolute;z-index:-1;right:0;top:0;bottom:0;width:52%;background:linear-gradient(90deg,#10112b00,#11122a22),url("../assets/NPC'S/Level 10 - 7 Despertar - O Arquiteto da Realidade.png") center 24%/cover no-repeat;opacity:.58;mask-image:linear-gradient(90deg,transparent,#000 30%)}
.client-main .screen-content .hero:after{content:"✧";position:absolute;z-index:-1;right:5%;top:-35px;font:220px Georgia,serif;color:#d6c0ff12;animation:client-orbit 18s linear infinite}
.client-main .screen-content .hero h2{font-size:clamp(30px,3.5vw,48px);text-shadow:0 3px 22px #050510}
.client-main .screen-content .hero p{max-width:610px;color:#c0bdd6}
.client-main .screen-content .hero .btn.primary{border-radius:7px;background:linear-gradient(100deg,#d3a84c,#f4d58c);border-color:#f7df9e;color:#24172e;box-shadow:0 0 22px #d5a74a44}
.client-main .screen-content .hero .btn.primary:hover{transform:translateY(-2px);box-shadow:0 0 28px #e4bd6b77}
.client-main .screen-content .stat-card{min-height:104px}
.client-main .screen-content .stat-value{font:600 27px Georgia,serif;color:#f3dfb0}
.client-main .screen-content .section-head{margin:7px 0 -3px}
.client-main .screen-content .section-head h2,.client-main .screen-content .panel h2{font-family:Georgia,serif}
.client-main .screen-content .tag{font-size:8px;letter-spacing:.1em;text-transform:uppercase;border-radius:5px}
.client-main .screen-content .btn{border-radius:7px;letter-spacing:.08em}
.client-main .screen-content .list-row{border-radius:8px}
.client-main .screen-content .pill-tab.active{background:linear-gradient(100deg,#7556b6,#a88cf2);color:#fff;border-color:#c4adff}
.client-main .screen-content .chapter.unlocked,.client-main .screen-content .encounter.available{box-shadow:0 0 22px #a78bfa18}
.client-main .screen-content .combatant{border-radius:13px}
.client-main .screen-content .card-item{border-radius:11px}
.client-main .screen-content .card-item:hover{transform:translateY(-5px);box-shadow:0 15px 32px #0008,0 0 20px #a78bfa22}
.client-main .screen-content .sheet-progression-panel{border-color:#d5b66d44}
.client-main .screen-content .sheet-progression-panel:before{opacity:.35}
.client-main .screen-content .sheet-progression-notice{color:#aeead5}
@keyframes client-orbit{to{transform:rotate(360deg)}}
@keyframes client-enter{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
.client-main .screen-content{animation:client-enter .35s ease both}
.gate-wrap{width:min(100%,1060px);display:grid;grid-template-columns:minmax(0,1.05fr) minmax(330px,.8fr);align-items:center;gap:clamp(24px,5vw,70px)}
.gate-brand{grid-column:1;grid-row:1;justify-content:flex-start;margin:0 0 14px 4%;z-index:1}
.gate-brand .brand-mark{width:58px;height:58px;font-size:37px;border-color:#d7b76b}
.gate-brand b{font-size:clamp(23px,3vw,36px);letter-spacing:.13em}
.gate-card{grid-column:2;grid-row:1 / span 2;position:relative;z-index:2;border-radius:13px;border-color:#d4b66a55;background:linear-gradient(145deg,#15152df2,#080b1df7);box-shadow:0 25px 90px #0009,0 0 55px #8c63d522}
.gate-wrap:before{content:"";grid-column:1;grid-row:1 / span 2;align-self:stretch;min-height:520px;margin-right:-25px;border-radius:18px;background:linear-gradient(90deg,#090b1b00,#090b1b00),url("../assets/NPC'S/Level 10 - 8 Despertar - O Primordial Absoluto-Chefe.png") center/cover no-repeat;opacity:.55;mask-image:linear-gradient(90deg,#000 50%,transparent)}
.gate-wrap:after{content:"EXPLORE O INFINITO. DESPERTE SEU POTENCIAL.";grid-column:1;grid-row:2;align-self:end;z-index:2;margin:0 0 36px 4%;font:600 18px Georgia,serif;letter-spacing:.12em;color:#f3dfb0;text-shadow:0 2px 12px #000}
.gate-brand small{font-size:9px;letter-spacing:.22em}
.gate-note{grid-column:2;grid-row:3;text-align:center}
@media(max-width:900px){
 .client-world{display:none}.client-topbar{gap:12px;padding-inline:14px}.client-topbar .brand{min-width:0}
 .client-currency{display:none}.client-account .status-pill{display:none}
 .gate-wrap{grid-template-columns:minmax(0,.8fr) minmax(320px,1fr);gap:18px}
 .gate-wrap:before{min-height:460px}
}
@media(max-width:680px){
 .app-shell.client-shell{padding-bottom:80px}
 .client-topbar{min-height:59px;padding:8px 12px;gap:8px}
 .client-topbar .brand-mark{width:35px;height:35px;font-size:22px}
 .client-topbar .brand strong{font-size:13px;letter-spacing:.12em}
 .client-topbar .brand small{font-size:6px;letter-spacing:.12em}
 .client-top-actions{gap:7px}
 .client-top-actions .server-status{display:none}
 .client-account{padding-left:8px}
 .client-account .mini-avatar{width:29px;height:29px;flex-basis:29px}
 .client-account>div:nth-child(2){display:none}
 .client-main{padding:0 12px}
 .client-page-heading{padding:15px 0 6px}
 .client-page-heading h1{font-size:23px}
 .client-heading-meta{gap:6px}.client-heading-meta .server-status{display:none}
 .client-season{font-size:6px;padding:6px 7px}
 .client-main .screen-intro{min-height:58px;margin:6px 0 12px;padding:8px 10px}
 .client-main .screen-sigil{width:34px;height:34px;flex-basis:34px}
 .client-main .screen-kicker{font-size:8px}
 .client-main .screen-intro p{font-size:9px;max-width:calc(100% - 10px)}
 .client-main .screen-content .hero{min-height:220px;padding:18px}
 .client-main .screen-content .hero:before{width:65%;opacity:.34}
 .client-main .screen-content .hero h2{font-size:29px}
 .client-main .screen-content .hero p{font-size:11px;max-width:92%}
 .client-main .screen-content .hero-meta{gap:12px}
 .client-main .screen-content .hero-meta strong{font-size:19px}
 .client-main .screen-content .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
 .client-main .screen-content .grid-3{grid-template-columns:1fr}
 .client-main .screen-content .grid-2{grid-template-columns:1fr}
 #nav{grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;padding:6px 4px;border-radius:12px 12px 7px 7px}
 #nav .nav-item{min-height:53px;gap:3px;padding:5px 0;border-radius:7px}
 #nav .nav-item .nav-icon{width:18px;height:18px}
 #nav .nav-item svg{width:16px;height:16px}
 #nav .nav-item small{font-size:6px;letter-spacing:0}
 .game-dock-wrap{width:100%;padding:0 5px max(5px,env(safe-area-inset-bottom))}
 .client-main footer{font-size:7px;padding-bottom:10px}
 .gate-wrap{width:min(100%,480px);display:flex;flex-direction:column;gap:10px}
 .gate-wrap:before{position:absolute;inset:0 0 auto;height:220px;min-height:0;margin:0;opacity:.27;mask-image:linear-gradient(#000,transparent)}
 .gate-brand{margin:8px 0 4px;justify-content:center}
 .gate-wrap:after{display:none}
 .gate-card{width:100%;padding:23px 19px}
 .gate-note{margin:0}
}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Client shell elements must stay visible despite legacy sidebar rules. */
.client-topbar .brand{display:flex!important}
.client-topbar .client-account,.client-topbar .sidebar-bottom{display:flex!important}
.client-topbar .client-account{margin:0;padding:0 0 0 12px;border:0;border-left:1px solid #ffffff1b;min-width:0}
.client-topbar .client-account .status-pill{margin-left:6px}
@media(max-width:680px){
 html,body{max-width:100%;overflow-x:hidden}
 .client-shell,.client-main,.client-main .view,.client-main .screen-content{min-width:0;width:100%}
 .client-main .screen-content>.grid,.client-main .screen-content .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .client-main .screen-content .grid-3,.client-main .screen-content .grid-2{grid-template-columns:minmax(0,1fr)!important}
 .client-main .screen-content .grid>*{min-width:0}
 .client-topbar .client-account{display:flex!important}
 .client-topbar .client-account>div:nth-child(2){display:none}
 .client-topbar .client-account .status-pill{display:none}
}