:root{
  --bg:#020608; --panel:rgba(10,18,24,.82); --panel2:rgba(8,15,20,.9);
  --line:rgba(177,211,224,.14); --line2:rgba(255,255,255,.07);
  --text:#eef5f7; --muted:#93a3a9; --soft:#c4cdd1;
  --orange:#ff7e2e; --orange2:#d94d11; --green:#39dd66;
  --shadow:0 24px 60px rgba(0,0,0,.5); --radius:18px;
  --serif:Georgia,'Times New Roman',serif; --sans:Inter,Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden}
button,input,select{font:inherit}
button{cursor:pointer;color:inherit}
a{color:inherit;text-decoration:none}
.hidden{display:none!important}
h2,h3{margin:0}

/* ---------- Backdrop ---------- */
.background{position:fixed;inset:0;z-index:-4;background:
  linear-gradient(90deg,rgba(0,0,0,.84),rgba(3,10,13,.42) 46%,rgba(0,0,0,.74)),
  linear-gradient(180deg,rgba(0,0,0,.12),#020608 88%),
  url('/assets/darknar/darknar-bg.png') center top/cover no-repeat;filter:saturate(.9) contrast(1.02)}
.vignette{position:fixed;inset:0;z-index:-3;pointer-events:none;background:
  radial-gradient(circle at 30% 12%,rgba(125,156,170,.12),transparent 34%),
  radial-gradient(circle at 80% 60%,rgba(255,105,28,.14),transparent 28%),
  radial-gradient(circle at center,transparent 0 46%,rgba(0,0,0,.86))}

.shell{width:min(1500px,calc(100% - 60px));margin:0 auto}
.glass{background:linear-gradient(180deg,rgba(12,22,29,.82),rgba(5,10,13,.8));border:1px solid var(--line);box-shadow:var(--shadow);backdrop-filter:blur(16px)}

/* ---------- Header ---------- */
.header{height:74px;border-radius:16px;display:flex;align-items:center;gap:24px;padding:12px 16px;position:sticky;top:14px;z-index:50;margin-top:16px}
.brand{display:flex;align-items:center;gap:12px;min-width:240px}
.brand img{width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 6px 12px #000)}
.brand strong{display:block;font-family:var(--serif);font-size:27px;letter-spacing:4px;line-height:1}
.brand span{display:block;margin-top:6px;color:var(--soft);font-size:10px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase}
.top-links{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.22);border:1px solid var(--line2);border-radius:13px;padding:6px}
.top-links button{border:0;background:transparent;text-transform:uppercase;color:#c2cbcf;font-weight:800;font-size:12px;letter-spacing:.6px;padding:12px 18px;border-radius:9px;transition:.15s}
.top-links button:hover{color:#fff;background:rgba(255,255,255,.05)}
.top-links button.active{color:#fff;background:linear-gradient(180deg,rgba(255,116,38,.22),rgba(92,36,12,.3));box-shadow:inset 0 0 0 1px rgba(255,116,38,.32)}
.header-actions{display:flex;align-items:center;gap:10px}
.status-pill{height:42px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:0 16px;background:rgba(0,0,0,.3);text-transform:uppercase;font-size:12px;font-weight:800}
.status-pill span{width:9px;height:9px;border-radius:50%;background:#777;box-shadow:0 0 12px currentColor}
.status-pill span.on{background:var(--green);color:var(--green)}
.status-pill span.off{background:#ff4141;color:#ff4141}
.account-menu{position:relative}
.dropdown{position:absolute;right:0;top:52px;min-width:210px;border-radius:14px;border:1px solid var(--line);background:rgba(6,11,14,.97);box-shadow:var(--shadow);padding:7px;z-index:70}
.dropdown button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:9px;padding:12px 13px;color:#d6dfe3;font-weight:700}
.dropdown button:hover{background:rgba(255,255,255,.05)}
.dropdown .danger{color:#ff7a46}

/* ---------- Buttons ---------- */
.button{border:1px solid rgba(255,255,255,.13);border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));color:#fff;font-weight:800;text-transform:uppercase;letter-spacing:.4px;font-size:13px;padding:13px 22px;display:inline-flex;align-items:center;justify-content:center;gap:9px;box-shadow:0 12px 24px rgba(0,0,0,.22);transition:.15s}
.button:hover{transform:translateY(-1px)}
.button.primary{border-color:rgba(255,145,78,.55);background:linear-gradient(180deg,#ff812e,#d94d11);box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 14px 28px rgba(255,92,22,.22)}
.button.ghost{background:rgba(6,13,17,.4)}
.button.big{min-width:160px;height:54px;font-size:14px}
.button.full{width:100%}
.button.disabled,.button.owned{opacity:.5;pointer-events:none}
.button.owned{background:rgba(57,221,102,.12);border-color:rgba(57,221,102,.4);color:#8ff0ab}

/* ---------- Main / Hero ---------- */
main{padding:0 0 30px}
.hero-section{min-height:560px;display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:center;padding:40px 0 30px}
.hero-copy{max-width:920px}
.eyebrow{display:inline-flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.4);padding:10px 17px;font-size:12px;text-transform:uppercase;font-weight:800;letter-spacing:3.5px;color:#dde6e8}
.eyebrow span,.live-line span{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 14px var(--orange)}
h1{margin:22px 0 18px;font-family:var(--serif);font-size:clamp(78px,11vw,168px);letter-spacing:2px;line-height:.84;text-transform:uppercase;text-shadow:0 12px 44px #000}
p{color:#cfd8db;line-height:1.62;margin:0}
.hero-copy p{font-size:19px;max-width:720px}
.hero-actions{display:flex;gap:16px;flex-wrap:wrap;margin-top:32px}

/* Hero side card — compacto e discreto */
.hero-card{border-radius:16px;padding:18px;align-self:center}
.live-line{display:flex;align-items:center;gap:10px;text-transform:uppercase;font-weight:800;letter-spacing:1.5px;font-size:12px;color:#cdd8da;margin-bottom:14px}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mini-grid article{border:1px solid var(--line2);border-radius:12px;padding:13px 14px;background:rgba(0,0,0,.24)}
.mini-grid small{display:block;color:#9fadb2;font-weight:800;text-transform:uppercase;letter-spacing:1.2px;font-size:10px}
.mini-grid b{display:block;font-size:26px;margin:5px 0 2px;line-height:1}
.mini-grid b.ver{font-size:22px;letter-spacing:.5px}
.mini-grid em{font-style:normal;color:#8b9a9f;font-size:11px}

/* ---------- Pages / Panels ---------- */
.page{display:none;animation:fade .25s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.warning{border:1px solid rgba(255,116,38,.3);background:rgba(255,116,38,.1);border-radius:14px;padding:14px 18px;margin-bottom:18px;color:#ffd3c0}
.panel,.download-hero,.store-hero{border-radius:var(--radius);padding:22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.panel h2,.download-hero h2,.store-hero h2{font-family:var(--serif);font-size:28px;letter-spacing:.5px;text-transform:uppercase}
.section-label{font-family:var(--serif);text-transform:uppercase;letter-spacing:1px;font-size:20px;margin:0 0 14px;color:#dfe7ea}
.mini,.mini-btn{border:1px solid var(--line);border-radius:999px;background:rgba(0,0,0,.22);padding:8px 15px;color:#c2cdd1;font-size:11px;font-weight:800;text-transform:uppercase}
.mini-btn:hover{border-color:rgba(255,116,38,.55);color:#fff}
.muted-note{color:var(--muted);padding:8px 0}

/* Home grid */
.home-layout{display:grid;grid-template-columns:1.05fr 1.5fr .9fr;grid-template-areas:'changes arsenal arsenal' 'changes characters store';gap:16px}
.changelog-panel{grid-area:changes}.arsenal-panel{grid-area:arsenal}.characters-panel{grid-area:characters}.store-highlight{grid-area:store}
.changelog-list{display:grid;gap:12px}
.change-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;border-bottom:1px solid var(--line2);padding-bottom:12px}
.change-row:last-child{border-bottom:0}
.change-badge{align-self:start;background:linear-gradient(180deg,rgba(255,126,46,.2),rgba(217,77,17,.12));border:1px solid rgba(255,126,46,.35);color:#ffb083;font-size:11px;font-weight:800;padding:5px 9px;border-radius:8px;white-space:nowrap}
.change-row h3{font-size:15px;margin:0 0 4px}
.change-row p{margin:0;color:#a6b4ba;font-size:13px;line-height:1.45}
.change-row time{color:#8b999e;font-size:11px;white-space:nowrap}

/* Carousels with generated art */
.carousel-wrap{position:relative;display:flex;align-items:center;gap:12px}
.cards-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;width:100%}
.asset-card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:linear-gradient(160deg,rgba(255,255,255,.04),rgba(0,0,0,.25))}
.art-box{position:relative;width:100%;aspect-ratio:16/10;background:radial-gradient(circle at 50% 38%,rgba(255,126,46,.12),transparent 60%),linear-gradient(180deg,rgba(20,30,36,.7),rgba(6,11,14,.6));display:grid;place-items:center;border-bottom:1px solid var(--line2)}
.art-box.small{aspect-ratio:16/9}
.art{width:88%;height:88%;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))}
.wpn-img{width:90%;height:90%;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.asset-card .content{padding:11px 13px}
.asset-card b{display:block;font-size:15px;text-transform:uppercase;letter-spacing:.5px}
.asset-card small{color:#9fadb2;text-transform:uppercase;font-weight:700;font-size:10px;letter-spacing:1px}
.arrow{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:rgba(0,0,0,.35);font-size:26px;display:grid;place-items:center;flex:0 0 auto;color:#cfd8da}
.arrow:hover{border-color:var(--orange);color:#fff}
.dots{display:flex;justify-content:center;gap:7px;margin-top:13px}
.dots button{width:7px;height:7px;border:0;border-radius:50%;background:#4d595e;padding:0}
.dots button.active{background:var(--orange)}

/* Store highlight list */
.highlight-item{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--line2);padding:11px 0}
.highlight-item:last-child{border-bottom:0}
.art-mini{width:64px;height:46px;border-radius:9px;overflow:hidden;background:rgba(0,0,0,.3);display:grid;place-items:center}
.art-mini .art{width:90%;height:90%}
.highlight-item b{display:block;font-size:14px}
.highlight-item small{color:#9fadb2;font-size:12px}
.highlight-item span{color:var(--orange);font-weight:800}

/* ---------- Tables (alinhamento profissional) ---------- */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse;table-layout:fixed}
.data-table th,.data-table td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.data-table th{color:#9fb0b5;text-transform:uppercase;font-size:11px;letter-spacing:1px;font-weight:800}
.data-table tbody tr:hover{background:rgba(255,255,255,.025)}
.data-table .num{text-align:right;font-variant-numeric:tabular-nums}
.data-table th.rank,.data-table td.rank{text-align:center}
.rank-table .c-rank{width:64px}.rank-table .c-nick{width:auto}.rank-table .c-status{width:120px}.rank-table .c-num{width:120px}
.rooms-table .c-name{width:auto}.rooms-table .c-map,.rooms-table .c-mode,.rooms-table .c-host{width:18%}.rooms-table .c-num{width:130px}.rooms-table .c-status{width:130px}
td.rank{font-weight:800;color:var(--orange)}
#playersBody tr:nth-child(1) td.rank{color:#ffd24a}
#playersBody tr:nth-child(2) td.rank{color:#cfd8dc}
#playersBody tr:nth-child(3) td.rank{color:#e8a06a}
.empty-row{text-align:center!important;color:#93a3a9;padding:30px 16px!important}
.tag{display:inline-block;padding:5px 11px;border-radius:999px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.tag-on{background:rgba(57,221,102,.13);color:#6ff09a;border:1px solid rgba(57,221,102,.3)}
.tag-off{background:rgba(255,255,255,.05);color:#9aa7ab;border:1px solid var(--line2)}
.tag-open{background:rgba(255,126,46,.14);color:#ffb083;border:1px solid rgba(255,126,46,.32)}
#playerSearch,#storeFilter{background:rgba(0,0,0,.34);border:1px solid var(--line);border-radius:10px;color:var(--text);padding:11px 13px;outline:none}
#playerSearch:focus,#storeFilter:focus{border-color:rgba(255,116,38,.55);box-shadow:0 0 0 3px rgba(255,116,38,.1)}

/* ---------- Store ---------- */
.store-hero,.download-hero{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px;min-height:190px;background:linear-gradient(90deg,rgba(6,13,17,.88),rgba(4,10,14,.5)),url('/assets/darknar/scene-signal.png') center/cover;border:1px solid var(--line);border-radius:var(--radius)}
.store-hero small,.download-hero small{color:var(--orange);text-transform:uppercase;font-weight:800;letter-spacing:2.5px;font-size:12px}
.store-hero h2,.download-hero h2{font-size:46px;margin:8px 0 10px}
.store-hero p,.download-hero p{max-width:560px}
.balance-card{min-width:200px;border:1px solid var(--line);border-radius:14px;padding:20px;background:rgba(0,0,0,.42);text-align:center}
.balance-card span{color:#9fadb2;text-transform:uppercase;font-size:11px;letter-spacing:1px;font-weight:800}
.balance-card b{font-size:38px;display:block;margin:6px 0 2px;color:var(--orange)}
.balance-card small{color:#9fadb2;text-transform:uppercase;letter-spacing:1px;font-size:11px}
.shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
.cash-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:linear-gradient(180deg,rgba(14,26,33,.85),rgba(5,10,13,.9));padding:0 16px 16px;text-align:center}
.cash-card .art-box{margin:0 -16px 12px;border-radius:0}
.cash-card small{color:#9fadb2;text-transform:uppercase;font-size:10px;letter-spacing:1px;font-weight:800}
.cash-card h3{font-size:20px;margin:4px 0}
.cash-card p{color:#cdd8da;font-weight:700}
.cash-card .price{color:var(--orange);font-size:24px;font-weight:900;margin:12px 0}
.cash-card .bonus{display:block;margin-top:8px;color:#8b999e}
.catalog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.catalog-item{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:rgba(0,0,0,.22)}
.catalog-item small{display:block;color:#9fadb2;text-transform:uppercase;font-size:10px;letter-spacing:1px;font-weight:800;padding:12px 14px 0}
.catalog-item h3{margin:2px 0 0;padding:0 14px;font-size:18px}
.catalog-item .buy-line{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px 14px}
.catalog-item .buy-line b{color:#fff;font-size:16px}
.catalog-item .buy-line b span{color:var(--orange);font-size:11px;text-transform:uppercase}
.catalog-item .button{padding:9px 16px;font-size:11px}
.empty{color:#93a3a9;padding:18px;border:1px dashed var(--line);border-radius:12px;grid-column:1/-1}

/* ---------- Download ---------- */
.download-actions{display:flex;gap:14px;flex-wrap:wrap;margin:22px 0 18px}
.download-info{display:flex;gap:10px;flex-wrap:wrap}
.download-info span{display:inline-flex;flex-direction:column;gap:3px;border:1px solid var(--line);border-radius:12px;background:rgba(0,0,0,.3);padding:10px 16px;color:#dbe4e7;font-weight:800}
.download-info span i{font-style:normal;color:#8fa0a6;font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:800}
.requirements-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.spec-list{list-style:none;margin:0;padding:0}
.spec-list li{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line2);padding:13px 0}
.spec-list li:last-child{border-bottom:0}
.spec-list span{color:#a3b1b6}
.spec-list b{text-align:right}
.download-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;margin-top:16px}
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{counter-increment:s;position:relative;padding:13px 0 13px 52px;border-bottom:1px solid var(--line2)}
.steps li:last-child{border-bottom:0}
.steps li:before{content:counter(s);position:absolute;left:0;top:12px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#ff812e,#d94d11);font-weight:800}
.steps b{display:block}.steps span{color:#a6b4ba}
.version-box b{font-size:38px}.version-box span{display:block;color:#aebcc1;margin:6px 0 14px}

/* ---------- Footer ---------- */
footer{display:flex;justify-content:space-between;gap:16px;padding:26px 0 30px;color:#6f8086;text-transform:uppercase;font-size:11px;letter-spacing:2px}

/* ---------- Modal ---------- */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:16px}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.74);backdrop-filter:blur(7px)}
.auth-card{position:relative;width:min(480px,100%);border-radius:18px;padding:24px;z-index:2}
.profile-modal{width:min(560px,100%)}
.modal-close{position:absolute;right:14px;top:14px;width:34px;height:34px;border:0;background:rgba(255,255,255,.06);border-radius:50%;font-size:22px;color:#cfd8da}
.modal-close:hover{background:rgba(255,255,255,.12)}
.auth-tabs{display:grid;border-bottom:1px solid var(--line2);margin-bottom:22px;gap:4px}
.auth-tabs.two{grid-template-columns:repeat(2,1fr)}
.auth-tabs.three{grid-template-columns:repeat(3,1fr)}
.auth-tabs button{background:transparent;border:0;color:#9fb0b5;padding:14px 6px;font-size:14px;font-weight:700;border-bottom:2px solid transparent;margin-bottom:-1px}
.auth-tabs button.active{color:#fff;border-bottom-color:var(--orange)}
.auth-pane,.profile-pane{display:none}
.auth-pane.active,.profile-pane.active{display:block}
.modal-title{display:flex;gap:14px;align-items:center;border-bottom:1px solid var(--line2);padding-bottom:18px;margin-bottom:18px}
.modal-title img{width:52px;height:52px;object-fit:contain}
.modal-title h3{margin:0 0 5px;font-size:19px}
.modal-title p{color:#a6b4ba;font-size:14px}
.form{display:grid;gap:14px}
.form label{display:grid;gap:7px;color:#a8b6bb;font-weight:800;text-transform:uppercase;font-size:11px;letter-spacing:1px}
.form input{background:rgba(0,0,0,.36);border:1px solid var(--line);border-radius:11px;color:var(--text);padding:13px 14px;outline:none}
.form input:focus{border-color:rgba(255,116,38,.55);box-shadow:0 0 0 3px rgba(255,116,38,.1)}
.form-line{display:flex;align-items:center;justify-content:space-between}
.check{display:flex!important;align-items:center;gap:8px;text-transform:none!important;font-size:13px!important;font-weight:600!important;letter-spacing:0!important;color:#bac6ca}
.check input{width:auto}
.link-btn{background:transparent;border:0;color:var(--orange);font-weight:800;font-size:13px}
.form-msg{margin:0;border:1px solid rgba(57,221,102,.35);background:rgba(57,221,102,.1);color:#9ff0ba;border-radius:11px;padding:12px 14px;font-size:13px;line-height:1.5}
.profile-box{min-height:140px}
.profile-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.profile-grid article{border:1px solid var(--line);border-radius:12px;padding:15px;background:rgba(0,0,0,.22)}
.profile-grid span{display:block;color:#9fadb2;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.profile-grid b{display:block;font-size:21px;margin-top:5px}
.settings-list{display:grid;gap:11px}
.settings-list label{display:flex;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:12px;padding:15px;color:#d8e2e5}
.settings-list input{width:20px;height:20px}

/* ---------- Responsive ---------- */
@media (max-width:1200px){
  .shell{width:calc(100% - 32px)}
  .header{flex-wrap:wrap;height:auto}
  .top-links{order:3;width:100%;overflow:auto;justify-content:flex-start}
  .hero-section{grid-template-columns:1fr;min-height:0;gap:24px}
  .hero-card{max-width:420px}
  .home-layout{grid-template-columns:1fr;grid-template-areas:'changes' 'arsenal' 'characters' 'store'}
  .shop-grid{grid-template-columns:repeat(2,1fr)}
  .requirements-grid,.download-grid{grid-template-columns:1fr}
  .cards-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .shell{width:calc(100% - 20px)}
  .brand{min-width:0}.brand strong{font-size:22px}
  .header-actions{width:100%;justify-content:space-between;order:2}
  h1{font-size:64px}
  .hero-copy p{font-size:16px}
  .mini-grid{grid-template-columns:1fr 1fr}
  .shop-grid{grid-template-columns:1fr}
  .cards-row{grid-template-columns:1fr}
  .store-hero,.download-hero{flex-direction:column;align-items:flex-start;text-align:left}
  .store-hero h2,.download-hero h2{font-size:34px}
  .profile-grid{grid-template-columns:1fr 1fr}
  footer{flex-direction:column;gap:8px}
}