/* ============================================================ REBIRTH MU — Protótipo de identidade visual Folha de estilo compartilhada (conceito, não integrada ao CMS) ============================================================ */ :root{ --bg:#08101B; --surface:#10192B; --card:#15233A; --card-2:#1a2c48; --gold:#D8A84B; --gold-soft:#e7cd87; --blue:#4EA3FF; --success:#37D67A; --danger:#E55C5C; --text:#EAF1FB; --muted:#8A9AB4; --muted-2:#5f6f89; --line:rgba(120,150,190,.14); --line-gold:rgba(216,168,75,.35); --radius:14px; --shadow:0 18px 45px -18px rgba(0,0,0,.75); --shadow-sm:0 10px 26px -14px rgba(0,0,0,.7); --maxw:1240px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; font-family:"Inter",system-ui,sans-serif; color:var(--text); background:var(--bg); line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4,.cinzel{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.01em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{ font-size:12px;font-weight:700;letter-spacing:.24em;text-transform:uppercase; color:var(--gold);display:inline-flex;align-items:center;gap:10px; } .eyebrow::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))} .section{padding:82px 0;position:relative} .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap} .section-head h2{font-size:30px;margin:8px 0 0} .section-head p{color:var(--muted);margin:6px 0 0;max-width:520px;font-size:14px} .link-more{color:var(--blue);font-weight:600;font-size:13px;letter-spacing:.02em;display:inline-flex;gap:8px;align-items:center;transition:gap .2s} .link-more:hover{gap:12px} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; font-weight:700;font-size:14px;letter-spacing:.02em;cursor:pointer; padding:14px 26px;border-radius:11px;border:1px solid transparent; transition:transform .18s ease,box-shadow .25s ease,background .25s ease,border-color .25s; position:relative; } .btn:hover{transform:translateY(-2px)} .btn-primary{ color:#1a1305; background:linear-gradient(180deg,#f0cd7e,var(--gold)); box-shadow:0 14px 30px -10px rgba(216,168,75,.55),inset 0 1px 0 rgba(255,255,255,.4); } .btn-primary:hover{box-shadow:0 20px 40px -12px rgba(216,168,75,.7),inset 0 1px 0 rgba(255,255,255,.5)} .btn-ghost{ color:var(--text);background:rgba(78,163,255,.06); border-color:rgba(78,163,255,.35);backdrop-filter:blur(6px); } .btn-ghost:hover{background:rgba(78,163,255,.14);border-color:var(--blue)} .btn-outline{color:var(--text);background:transparent;border-color:var(--line)} .btn-outline:hover{border-color:var(--line-gold);background:rgba(216,168,75,.06)} .btn-discord{color:#fff;background:#5865f2;border-color:#5865f2} .btn-discord:hover{background:#4752c4;border-color:#4752c4;box-shadow:0 12px 26px -12px rgba(88,101,242,.6)} .btn-sm{padding:9px 16px;font-size:12.5px} .btn-block{width:100%} /* ---------- Prototype note ---------- */ .proto-note{background:#0c1c14;border-bottom:1px solid rgba(55,214,122,.25);color:#9fdcb8;font-size:12.5px;text-align:center;padding:8px 16px} .proto-note b{color:var(--success)} /* ---------- Top bar ---------- */ .topbar{border-bottom:1px solid var(--line);background:rgba(5,10,18,.6);font-size:12.5px} .topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;color:var(--muted)} .topbar .langs span{cursor:pointer;padding:0 7px;transition:color .2s} .topbar .langs span:hover,.topbar .langs .on{color:var(--text)} .topbar .info{display:flex;gap:20px;align-items:center} .topbar .info a{color:var(--muted);transition:color .2s} .topbar .info a:hover{color:var(--gold)} .topbar-discord{color:#5865f2 !important;font-weight:600} .topbar-discord:hover{color:#7983f5 !important} .topbar .sep{color:var(--muted-2)} /* ---------- Header ---------- */ header.site{ position:sticky;top:0;z-index:40; background:rgba(8,16,27,.82);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;gap:20px;height:74px} .brand{display:flex;align-items:center;gap:13px} .brand-mark{ width:42px;height:42px;border-radius:11px;display:grid;place-items:center; background:radial-gradient(circle at 35% 25%,#20304e,#0c1524); border:1px solid var(--line-gold);box-shadow:inset 0 0 20px rgba(216,168,75,.15); font-family:"Cinzel";font-weight:800;color:var(--gold);font-size:19px; } .brand-text strong{font-family:"Cinzel";font-size:17px;letter-spacing:.06em;display:block;line-height:1} .brand-text small{font-size:10px;letter-spacing:.28em;color:var(--success);font-weight:700} nav.menu{display:flex;gap:2px;margin-left:0} nav.menu a{ padding:9px 11px;border-radius:9px;font-size:13px;font-weight:600;color:var(--muted); transition:color .2s,background .2s;position:relative; } nav.menu a:hover{color:var(--text);background:rgba(120,150,190,.07)} nav.menu a.active{color:var(--text)} nav.menu a.active::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold),transparent)} .nav-right{margin-left:auto;display:flex;align-items:center;gap:10px} /* ---------- Page hero (internal pages) ---------- */ .page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line); background: radial-gradient(900px 420px at 78% -20%,rgba(78,163,255,.14),transparent 60%), radial-gradient(700px 380px at 10% 120%,rgba(216,168,75,.10),transparent 60%), linear-gradient(180deg,#0a1424,#08101B)} .page-hero .wrap{position:relative;z-index:2;padding:52px 24px 46px} .breadcrumb{display:flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted-2);margin-bottom:14px} .breadcrumb a{color:var(--muted);transition:color .2s} .breadcrumb a:hover{color:var(--gold)} .breadcrumb .sep{opacity:.5} .page-hero h1{font-size:40px;margin:8px 0 0} .page-hero p{color:var(--muted);max-width:600px;margin:12px 0 0;font-size:15px} /* ---------- Cards ---------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);transition:transform .22s ease,box-shadow .25s ease,border-color .25s} .card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--line-gold)} /* ---------- Tags ---------- */ .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:6px} .tag-event{color:var(--gold);background:rgba(216,168,75,.14);border:1px solid var(--line-gold)} .tag-update{color:var(--blue);background:rgba(78,163,255,.12);border:1px solid rgba(78,163,255,.3)} .tag-patch{color:var(--success);background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.3)} /* ---------- Footer ---------- */ footer{border-top:1px solid var(--line);background:linear-gradient(180deg,transparent,rgba(5,10,18,.6));margin-top:20px} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding:64px 0 40px} .foot-brand .brand{margin-bottom:16px} .foot-brand p{color:var(--muted);font-size:13.5px;max-width:320px} .socials{display:flex;gap:10px;margin-top:20px} .socials a{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:all .2s;font-size:15px} .socials a:hover{color:var(--text);border-color:var(--line-gold);background:rgba(216,168,75,.08);transform:translateY(-2px)} .foot-col h4{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted-2);margin:0 0 16px;font-family:"Inter";font-weight:700} .foot-col a{display:block;color:var(--muted);font-size:13.5px;padding:6px 0;transition:color .2s} .foot-col a:hover{color:var(--gold)} .foot-bottom{border-top:1px solid var(--line);padding:22px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;color:var(--muted-2);font-size:12.5px} /* ---------- Reveal ---------- */ .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease} .reveal.in{opacity:1;transform:none} /* ============================================================ HOME — hero ============================================================ */ .hero{position:relative;min-height:640px;display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line)} .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg::before{ content:"";position:absolute;inset:0; background: radial-gradient(1100px 620px at 72% 18%,rgba(78,163,255,.16),transparent 60%), radial-gradient(900px 500px at 20% 90%,rgba(216,168,75,.12),transparent 60%), linear-gradient(180deg,#0a1424 0%,#08101B 70%); } .hero-bg .vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 40%,transparent 55%,rgba(4,8,14,.85))} .hero-bg .fog{position:absolute;left:-10%;right:-10%;height:340px;bottom:-40px; background:radial-gradient(60% 100% at 50% 100%,rgba(120,150,200,.14),transparent 70%); filter:blur(24px);animation:drift 16s ease-in-out infinite alternate} @keyframes drift{from{transform:translateX(-30px)}to{transform:translateX(40px)}} canvas#particles{position:absolute;inset:0;z-index:1;opacity:.55} .hero .wrap{position:relative;z-index:2;width:100%} .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center} .hero-copy h1{font-size:56px;line-height:1.05;margin:18px 0 0;font-weight:800} .hero-copy h1 span{color:var(--gold);text-shadow:0 0 40px rgba(216,168,75,.35)} .hero-copy .lead{color:var(--muted);font-size:16.5px;max-width:520px;margin:20px 0 0} .hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .hero-meta{display:flex;gap:30px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)} .hero-meta .m b{font-family:"Cinzel";font-size:24px;color:var(--text);display:block;line-height:1} .hero-meta .m span{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:6px;display:block} .status-card{ background:linear-gradient(180deg,rgba(26,44,72,.7),rgba(21,35,58,.9)); border:1px solid var(--line);border-radius:var(--radius); box-shadow:var(--shadow);backdrop-filter:blur(10px);overflow:hidden; } .status-card .sc-head{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between} .status-card .sc-head h3{font-size:15px;margin:0;letter-spacing:.04em} .pill{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px} .pill-on{color:var(--success);background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.35)} .sc-body{padding:20px 22px} .sc-row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;font-size:13.5px;border-bottom:1px dashed var(--line)} .sc-row:last-child{border-bottom:0} .sc-row .k{color:var(--muted)} .sc-row .v{font-weight:700;font-family:"Cinzel";letter-spacing:.02em} .online-bar{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden;margin-top:6px} .online-bar>i{display:block;height:100%;width:78%;border-radius:99px; background:linear-gradient(90deg,var(--success),#7ff0b0);box-shadow:0 0 12px rgba(55,214,122,.5)} /* Server status strip */ .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line); border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)} .strip .cell{background:var(--surface);padding:24px 26px;display:flex;gap:16px;align-items:center;transition:background .25s} .strip .cell:hover{background:var(--card)} .strip .ic{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:20px; background:radial-gradient(circle at 35% 25%,rgba(216,168,75,.18),rgba(216,168,75,.04));border:1px solid var(--line-gold)} .strip .t b{font-family:"Cinzel";font-size:20px;display:block;line-height:1} .strip .t span{font-size:12px;color:var(--muted);letter-spacing:.04em} /* Home news grid */ .news-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px} .news-feature{position:relative;border-radius:var(--radius);overflow:hidden;min-height:360px;display:flex;flex-direction:column;justify-content:flex-end; background:linear-gradient(180deg,rgba(8,16,27,0) 30%,rgba(8,16,27,.94)),url("../../default/img/background.jpg") center/cover; border:1px solid var(--line);box-shadow:var(--shadow-sm)} .news-feature .body{padding:28px} .news-feature h3{font-size:24px;margin:0 0 8px} .news-feature p{color:var(--muted);font-size:13.5px;margin:0} .news-side{display:flex;flex-direction:column;gap:20px} .news-item{padding:20px;display:flex;flex-direction:column;gap:8px} .news-item .date{font-size:11px;color:var(--muted-2);letter-spacing:.08em} .news-item h4{font-size:15.5px;margin:0;line-height:1.35} .news-item:hover h4{color:var(--gold)} /* Rankings */ .rank-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px} .rank-panel{overflow:hidden} .rank-panel .ph{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,rgba(216,168,75,.06),transparent)} .rank-panel .ph h3{font-size:15px;margin:0;display:flex;gap:10px;align-items:center} .rank-row{display:grid;grid-template-columns:34px 46px 1fr auto;gap:14px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);transition:background .2s} .rank-row:last-child{border-bottom:0} .rank-row:hover{background:rgba(120,150,190,.05)} .rank-pos{font-family:"Cinzel";font-weight:800;color:var(--muted-2);text-align:center;font-size:15px} .rank-row.top1 .rank-pos{color:var(--gold)} .rank-row.top2 .rank-pos{color:#c9d3e2} .rank-row.top3 .rank-pos{color:#cd8a5b} .rank-av{width:46px;height:46px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:#0c1524} .rank-name b{font-size:14.5px;display:block;line-height:1.2} .rank-name span{font-size:11.5px;color:var(--muted)} .rank-val{text-align:right} .rank-val b{font-family:"Cinzel";font-size:15px;color:var(--gold)} .rank-val span{font-size:11px;color:var(--muted);display:block} /* Features */ .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .feat{padding:30px 26px} .feat .fi{width:52px;height:52px;border-radius:13px;display:grid;place-items:center;font-size:24px;margin-bottom:18px; background:radial-gradient(circle at 35% 25%,rgba(78,163,255,.18),rgba(78,163,255,.03));border:1px solid rgba(78,163,255,.28)} .feat h3{font-size:17px;margin:0 0 8px} .feat p{color:var(--muted);font-size:13.5px;margin:0} /* Guild ranking */ .guild-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .guild{padding:26px;display:flex;gap:18px;align-items:center} .guild .mark{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid var(--line-gold);background:#0c1524} .guild h3{font-size:18px;margin:0} .guild .master{font-size:12px;color:var(--muted);margin:2px 0 10px} .guild .stats{display:flex;gap:16px;font-size:12px;color:var(--muted)} .guild .stats b{color:var(--text);font-family:"Cinzel"} /* Castle siege banner */ .siege{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line-gold); background:linear-gradient(120deg,rgba(8,16,27,.92),rgba(8,16,27,.55)),url("../../default/img/castle_owner_bg.jpg") center/cover; box-shadow:var(--shadow)} .siege .inner{padding:56px;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap} .siege h2{font-size:34px;margin:12px 0 6px} .siege p{color:var(--muted);max-width:440px;margin:0} .siege .owner{text-align:center;background:rgba(8,16,27,.6);border:1px solid var(--line-gold);border-radius:14px;padding:22px 30px;backdrop-filter:blur(6px)} .siege .owner span{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .siege .owner b{font-family:"Cinzel";font-size:24px;color:var(--gold);display:block;margin-top:6px} .siege .owner .next{font-size:12px;color:var(--muted);margin-top:10px} /* ============================================================ NEWS PAGE ============================================================ */ .layout{display:grid;grid-template-columns:1fr 320px;gap:34px;align-items:start} .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:26px} .chip{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:rgba(120,150,190,.05); font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:all .2s} .chip:hover{color:var(--text);border-color:var(--line-gold)} .chip.on{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));border-color:transparent} .searchbox{margin-left:auto;position:relative} .searchbox input{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px 10px 36px; color:var(--text);font-family:inherit;font-size:13px;width:220px;transition:border-color .2s} .searchbox input:focus{outline:none;border-color:var(--line-gold)} .searchbox::before{content:"🔍";position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.6} .article-list{display:flex;flex-direction:column;gap:20px} .article-row{display:grid;grid-template-columns:210px 1fr;gap:0;overflow:hidden} .article-row .thumb{position:relative;min-height:170px; background:linear-gradient(180deg,rgba(8,16,27,.1),rgba(8,16,27,.6)),url("../../default/img/background.jpg") center/cover} .article-row .thumb .tag{position:absolute;top:14px;left:14px} .article-row .body{padding:24px 26px} .article-row .date{font-size:11.5px;color:var(--muted-2);letter-spacing:.06em;margin-bottom:8px} .article-row h3{font-size:19px;margin:0 0 8px;transition:color .2s} .article-row:hover h3{color:var(--gold)} .article-row p{color:var(--muted);font-size:13.5px;margin:0 0 14px} .article-row .readmore{color:var(--blue);font-size:12.5px;font-weight:700;display:inline-flex;gap:7px;align-items:center;transition:gap .2s} .article-row:hover .readmore{gap:11px} .side-widget{margin-bottom:24px;overflow:hidden} .side-widget .wh{padding:16px 20px;border-bottom:1px solid var(--line);font-family:"Cinzel";font-size:14px;font-weight:700; background:linear-gradient(180deg,rgba(216,168,75,.06),transparent)} .side-widget .wb{padding:8px 20px} .mini-post{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);align-items:center} .mini-post:last-child{border-bottom:0} .mini-post .n{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:"Cinzel";font-weight:800; color:var(--gold);background:rgba(216,168,75,.1);border:1px solid var(--line-gold);flex:none;font-size:13px} .mini-post h5{margin:0;font-size:13px;font-family:"Inter";font-weight:600;line-height:1.35} .mini-post h5:hover{color:var(--gold)} .tag-cloud{display:flex;flex-wrap:wrap;gap:8px;padding:16px 20px} /* Pagination */ .pager{display:flex;justify-content:center;gap:8px;margin-top:36px} .pager a{min-width:40px;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--line);display:grid;place-items:center; font-size:13.5px;font-weight:600;color:var(--muted);transition:all .2s} .pager a:hover{color:var(--text);border-color:var(--line-gold)} .pager a.on{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));border-color:transparent} /* ============================================================ MARKET PAGE ============================================================ */ .market-head{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:36px} .balance{padding:22px 24px;display:flex;gap:16px;align-items:center} .balance .bi{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:22px; background:radial-gradient(circle at 35% 25%,rgba(216,168,75,.2),rgba(216,168,75,.04));border:1px solid var(--line-gold)} .balance b{font-family:"Cinzel";font-size:22px;display:block;line-height:1} .balance span{font-size:12px;color:var(--muted)} .market-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .item{overflow:hidden;display:flex;flex-direction:column} .item .thumb{aspect-ratio:1;display:grid;place-items:center;position:relative; background:radial-gradient(circle at 50% 35%,#22375a,#0d1626);border-bottom:1px solid var(--line)} .item .thumb .glow{position:absolute;inset:0} .item .thumb .em{font-size:52px;position:relative;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))} .item .rar{position:absolute;top:10px;left:10px;font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:5px} .rar-legend{color:var(--gold);background:rgba(216,168,75,.15);border:1px solid var(--line-gold)} .rar-epic{color:#c58bff;background:rgba(160,90,255,.15);border:1px solid rgba(160,90,255,.35)} .rar-rare{color:var(--blue);background:rgba(78,163,255,.14);border:1px solid rgba(78,163,255,.3)} .rar-common{color:var(--muted);background:rgba(120,150,190,.12);border:1px solid var(--line)} .item .thumb.g-legend .glow{background:radial-gradient(circle at 50% 40%,rgba(216,168,75,.28),transparent 60%)} .item .thumb.g-epic .glow{background:radial-gradient(circle at 50% 40%,rgba(160,90,255,.28),transparent 60%)} .item .thumb.g-rare .glow{background:radial-gradient(circle at 50% 40%,rgba(78,163,255,.26),transparent 60%)} .item .thumb.g-common .glow{background:radial-gradient(circle at 50% 40%,rgba(120,150,190,.18),transparent 60%)} .item .info{padding:16px 18px;display:flex;flex-direction:column;gap:12px;flex:1} .item .info h4{font-size:14.5px;margin:0} .item .info .cat{font-size:11px;color:var(--muted);margin-top:-6px} .item .info .foot{display:flex;align-items:center;justify-content:space-between;margin-top:auto} .item .info .price{display:flex;align-items:center;gap:6px;color:var(--gold);font-weight:800;font-family:"Cinzel";font-size:16px} .item .info .price small{color:var(--muted);font-weight:500;font-family:"Inter";font-size:11px} /* ============================================================ AUTH / REGISTER PAGE ============================================================ */ .auth-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:0;max-width:1040px;margin:56px auto; border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:var(--card)} .auth-side{position:relative;padding:48px 44px;display:flex;flex-direction:column;justify-content:center; background:linear-gradient(160deg,rgba(11,20,36,.86),rgba(8,16,27,.94)),url("../../default/img/background.jpg") center/cover} .auth-side .eyebrow{margin-bottom:16px} .auth-side h2{font-size:30px;margin:0 0 12px;line-height:1.15} .auth-side p{color:var(--muted);font-size:14px;margin:0 0 26px} .benefits{display:flex;flex-direction:column;gap:16px} .benefit{display:flex;gap:14px;align-items:flex-start} .benefit .bi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:17px;flex:none; background:rgba(216,168,75,.1);border:1px solid var(--line-gold)} .benefit b{font-size:14px;display:block} .benefit span{font-size:12.5px;color:var(--muted)} .auth-main{padding:44px 44px} .auth-tabs{display:flex;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:5px;margin-bottom:28px} .auth-tabs button{flex:1;padding:11px;border:0;border-radius:8px;background:transparent;color:var(--muted); font-family:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:all .2s} .auth-tabs button.on{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold))} .field{margin-bottom:18px} .field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:7px;letter-spacing:.02em} .field .control{position:relative} .field input,.field select{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:13px 14px;color:var(--text);font-family:inherit;font-size:14px;transition:border-color .2s,box-shadow .2s} .field input:focus,.field select:focus{outline:none;border-color:var(--line-gold);box-shadow:0 0 0 3px rgba(216,168,75,.12)} .field input::placeholder{color:var(--muted-2)} .field .hint{font-size:11.5px;color:var(--muted-2);margin-top:6px} .field.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .strength{height:5px;border-radius:99px;background:rgba(255,255,255,.06);margin-top:8px;overflow:hidden} .strength>i{display:block;height:100%;width:66%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--success))} .check{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;color:var(--muted);margin:6px 0 22px} .check input{margin-top:3px;accent-color:var(--gold)} .check a{color:var(--blue)} .auth-alt{text-align:center;font-size:13px;color:var(--muted);margin-top:20px} .auth-alt a{color:var(--gold);font-weight:600} .form-hidden{display:none} /* ============================================================ MARKET — cabeçalho (abas + saldos) e submenu Itens/Heróis Espelha os filtros reais do plugin WebEngine, na identidade Rebirth ============================================================ */ .mkt-top{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;margin-bottom:24px} .mkt-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .mkt-tab{padding:9px 18px;border-radius:10px;border:1px solid var(--line);background:rgba(120,150,190,.05); font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s} .mkt-tab:hover{color:var(--text);border-color:var(--line-gold)} .mkt-tab.on{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));border-color:transparent} .mkt-balances{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);min-width:300px} .mkt-bal-icons{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap} .mkt-bal-ico{width:44px;height:40px;border-radius:9px;display:grid;place-items:center;font-size:15px; border:1px solid var(--line);background:var(--surface);color:var(--muted);position:relative} .mkt-bal-ico.on{border-color:rgba(55,214,122,.5);color:var(--success);background:rgba(55,214,122,.08)} .mkt-bal-ico b{position:absolute;bottom:-8px;font-family:"Cinzel";font-size:11px;color:var(--text);white-space:nowrap} .mkt-bal-note{text-align:center;color:var(--muted);font-size:12.5px;margin-top:14px} .mkt-bal-note a{color:var(--gold);font-weight:600} .mkt-bal-row{display:flex;justify-content:space-between;font-size:13px;padding:6px 2px;border-bottom:1px dashed var(--line)} .mkt-bal-row:last-child{border:0} .mkt-bal-row b{font-family:"Cinzel";color:var(--gold)} /* Submenu diferenciador de layout */ .mkt-switch{display:inline-flex;padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:12px;gap:4px;margin-bottom:24px} .mkt-switch button{border:0;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;font-size:13.5px; padding:10px 22px;border-radius:9px;cursor:pointer;transition:all .2s;display:inline-flex;gap:8px;align-items:center} .mkt-switch button.on{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold))} .mkt-view{display:none} .mkt-view.on{display:block} /* ---------- Filter bar (itens) ---------- */ .mu-filterbar{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px; box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:14px;margin-bottom:24px} .mu-fb-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap} .mu-fb-search{position:relative;flex:1;min-width:240px} .mu-fb-search-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.5;font-size:14px} .mu-fb-search input{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px; padding:12px 14px 12px 38px;color:var(--text);font-family:inherit;font-size:13.5px;transition:border-color .2s} .mu-fb-search input:focus{outline:none;border-color:var(--line-gold)} .mu-fb-classes{display:flex;gap:7px} .mu-fb-class{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer; border:1px solid var(--line);background:var(--surface);font-size:11.5px;font-weight:800;color:var(--muted); transition:all .2s;user-select:none} .mu-fb-class input{display:none} .mu-fb-class:hover{color:var(--text);border-color:var(--line-gold)} .mu-fb-class.is-on{color:var(--gold);border-color:var(--gold);background:rgba(216,168,75,.12);box-shadow:0 0 0 3px rgba(216,168,75,.12)} .mu-fb-actions{display:flex;gap:8px;margin-left:auto} .mu-fb-btn{padding:11px 20px;border-radius:10px;font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--line); background:var(--surface);color:var(--muted);transition:all .2s} .mu-fb-clear:hover{color:var(--text);border-color:var(--line-gold)} .mu-fb-apply{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));border-color:transparent} .mu-fb-apply:hover{transform:translateY(-1px)} .mu-fb-subs{gap:20px;align-items:flex-start} .mu-fb-chipgroup{display:flex;gap:6px;flex-wrap:wrap;padding-right:16px;border-right:1px solid var(--line)} .mu-fb-chipgroup:last-child{border-right:0} .mu-fb-chip{padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface); font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;user-select:none} .mu-fb-chip input{display:none} .mu-fb-chip:hover{color:var(--text);border-color:var(--line-gold)} .mu-fb-chip.is-on{color:var(--gold);border-color:var(--gold);background:rgba(216,168,75,.12)} .mu-fb-chip-clear-sub{width:34px;padding:8px 0;color:var(--muted);font-weight:800} .mu-fb-main{gap:14px} .mu-fb-kinds{display:inline-flex;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:10px;gap:3px} .mu-fb-kind{padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;transition:all .2s;user-select:none} .mu-fb-kind input{display:none} .mu-fb-kind:hover{color:var(--text)} .mu-fb-kind.is-on,.mu-fb-kind-all[data-on]{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold))} .mu-fb-kind-all{border:0;background:transparent;font-family:inherit} .mu-fb-exc{display:inline-flex;gap:6px;padding-left:14px;border-left:1px solid var(--line)} .mu-fb-excbit{padding:7px 12px;border-radius:8px;border:1px solid var(--line);background:var(--surface); font-size:11.5px;font-weight:800;letter-spacing:.04em;color:var(--muted);cursor:pointer;transition:all .2s;user-select:none} .mu-fb-excbit input{display:none} .mu-fb-excbit:hover{color:var(--text);border-color:rgba(78,163,255,.4)} .mu-fb-excbit.is-on{color:var(--blue);border-color:var(--blue);background:rgba(78,163,255,.12)} .mu-fb-excmode{display:inline-flex;gap:10px;font-size:12px;font-weight:800;color:var(--muted-2)} .mu-fb-mode{cursor:pointer;transition:color .2s;user-select:none} .mu-fb-mode input{display:none} .mu-fb-mode.is-on{color:var(--gold)} .mu-fb-level{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-size:12px;font-weight:800;color:var(--muted)} .mu-fb-level select{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:9px 12px;color:var(--text);font-family:inherit;font-size:12.5px} .mu-fb-flags{gap:8px} .mu-fb-flag{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface); font-size:11.5px;font-weight:800;letter-spacing:.06em;color:var(--muted);cursor:pointer;transition:all .2s;user-select:none} .mu-fb-flag input{display:none} .mu-fb-flag:hover{color:var(--text);border-color:rgba(78,163,255,.4)} .mu-fb-flag.is-on{color:var(--blue);border-color:var(--blue);background:rgba(78,163,255,.12)} /* ---------- Listagens (itens) ---------- */ .market-toolbar{display:flex;align-items:center;justify-content:space-between;margin:6px 2px 16px} .market-found{font-family:"Cinzel";font-weight:700;font-size:15px;color:var(--text)} .market-found b{color:var(--gold)} .market-list{display:flex;flex-direction:column;gap:12px} .mkt-row{display:grid;grid-template-columns:64px 1fr auto auto auto;gap:20px;align-items:center; background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 20px;transition:all .2s} .mkt-row:hover{border-color:var(--line-gold);transform:translateY(-2px);box-shadow:var(--shadow-sm)} .mkt-item-ico{width:64px;height:64px;border-radius:10px;display:grid;place-items:center;font-size:28px;position:relative; background:radial-gradient(circle at 50% 35%,#22375a,#0d1626);border:1px solid var(--line)} .mkt-item-ico.rar-legend-b{border-color:var(--line-gold);box-shadow:inset 0 0 18px rgba(216,168,75,.25)} .mkt-item-ico.rar-epic-b{border-color:rgba(160,90,255,.5);box-shadow:inset 0 0 18px rgba(160,90,255,.22)} .mkt-item-ico.rar-rare-b{border-color:rgba(78,163,255,.5);box-shadow:inset 0 0 18px rgba(78,163,255,.2)} .mkt-name{display:flex;flex-direction:column;gap:6px} .mkt-name .nm{font-weight:800;font-size:15px} .mkt-name .nm b{color:var(--gold)} .mkt-badges{display:flex;gap:6px;flex-wrap:wrap} .mkt-badge{font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase} .b-luck{color:var(--blue);background:rgba(78,163,255,.14);border:1px solid rgba(78,163,255,.3)} .b-opt{color:var(--success);background:rgba(55,214,122,.12);border:1px solid rgba(55,214,122,.3)} .b-exc{color:#c58bff;background:rgba(160,90,255,.14);border:1px solid rgba(160,90,255,.34)} .b-anc{color:var(--gold);background:rgba(216,168,75,.14);border:1px solid var(--line-gold)} .mkt-seller{font-size:12.5px;color:var(--muted)} .mkt-price{text-align:right} .mkt-price b{font-family:"Cinzel";font-size:17px;color:var(--gold)} .mkt-price span{font-size:11px;color:var(--muted);display:block} .mkt-acts{display:flex;gap:8px} .market-btn-buy{padding:11px 22px;border-radius:10px;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px; color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));transition:transform .18s} .market-btn-offer{padding:11px 22px;border-radius:10px;cursor:pointer;font-family:inherit;font-weight:800;font-size:13px; color:var(--text);background:transparent;border:1px solid var(--line-gold);transition:all .2s} .market-btn-buy:hover,.market-btn-offer:hover{transform:translateY(-2px)} .market-btn-offer:hover{background:rgba(216,168,75,.1)} /* ---------- Mercado de Heróis (personagens) ---------- */ .hero-mkt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .hero-card{overflow:hidden;display:flex;flex-direction:column} .hero-card .hc-top{position:relative;display:flex;gap:16px;padding:20px;border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(216,168,75,.05),transparent)} .hero-card .hc-av{width:76px;height:76px;border-radius:12px;object-fit:cover;border:1px solid var(--line-gold);background:#0c1524;flex:none} .hero-card .hc-id h4{margin:0;font-size:18px} .hero-card .hc-class{font-size:12px;color:var(--blue);font-weight:700;margin-top:2px} .hero-card .hc-reset{margin-top:8px;display:inline-block;font-family:"Cinzel";font-size:12px;color:var(--gold); background:rgba(216,168,75,.1);border:1px solid var(--line-gold);padding:3px 10px;border-radius:6px} .hero-card .hc-lvl{position:absolute;top:16px;right:18px;font-family:"Cinzel";font-size:13px;color:var(--muted)} .hero-card .hc-stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)} .hero-card .hc-stat{background:var(--card);padding:12px 18px;display:flex;justify-content:space-between;font-size:12.5px} .hero-card .hc-stat span{color:var(--muted)} .hero-card .hc-stat b{font-family:"Cinzel";color:var(--text)} .hero-card .hc-foot{padding:18px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:auto} .hero-card .hc-price b{font-family:"Cinzel";font-size:18px;color:var(--gold)} .hero-card .hc-price span{font-size:11px;color:var(--muted);display:block} /* ============================================================ RANKINGS PAGE ============================================================ */ .rank-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .podium{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:30px;align-items:end} .podium .pc{text-align:center;padding:26px 20px;position:relative;overflow:hidden} .podium .pc.first{order:2;padding-top:40px;border-color:var(--line-gold);box-shadow:0 0 0 1px var(--line-gold),var(--shadow)} .podium .pc.second{order:1} .podium .pc.third{order:3} .podium .pc .crown{font-size:26px;margin-bottom:6px} .podium .pc .pav{width:84px;height:84px;border-radius:14px;object-fit:cover;margin:0 auto 14px;border:1px solid var(--line-gold);background:#0c1524} .podium .pc.first .pav{width:104px;height:104px;box-shadow:0 0 30px rgba(216,168,75,.35)} .podium .pc h3{margin:0;font-size:19px} .podium .pc .cls{font-size:12px;color:var(--blue);font-weight:700;margin:2px 0 12px} .podium .pc .val{font-family:"Cinzel";font-size:22px;color:var(--gold)} .podium .pc .val small{display:block;font-family:"Inter";font-size:11px;color:var(--muted);font-weight:500} .podium .pc .rk{position:absolute;top:14px;left:16px;font-family:"Cinzel";font-weight:800;font-size:20px;color:var(--muted-2)} .podium .pc.first .rk{color:var(--gold)} .rank-table{overflow:hidden} .rank-table .rth{display:grid;grid-template-columns:60px 56px 1fr 1fr 140px;gap:16px;padding:14px 22px; border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700} .rank-table .rtr{display:grid;grid-template-columns:60px 56px 1fr 1fr 140px;gap:16px;padding:12px 22px;align-items:center; border-bottom:1px solid var(--line);transition:background .2s;font-size:13.5px} .rank-table .rtr:last-child{border-bottom:0} .rank-table .rtr:hover{background:rgba(120,150,190,.05)} .rank-table .rtr .rp{font-family:"Cinzel";font-weight:800;color:var(--muted-2);text-align:center} .rank-table .rtr .rav{width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--line);background:#0c1524} .rank-table .rtr .rn b{display:block} .rank-table .rtr .rn span{font-size:11.5px;color:var(--muted)} .rank-table .rtr .rv{text-align:right;font-family:"Cinzel";color:var(--gold);font-weight:700} /* ============================================================ DOWNLOADS PAGE ============================================================ */ .dl-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;margin-bottom:40px;align-items:stretch} .dl-main{padding:40px;display:flex;flex-direction:column;justify-content:center} .dl-main h2{font-size:26px;margin:14px 0 8px} .dl-main p{color:var(--muted);margin:0 0 24px;font-size:14px} .dl-main .dl-btns{display:flex;gap:12px;flex-wrap:wrap} .dl-req{padding:30px} .dl-req h4{font-family:"Cinzel";font-size:15px;margin:0 0 18px} .dl-req .rq{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed var(--line);font-size:13px} .dl-req .rq:last-child{border:0} .dl-req .rq span{color:var(--muted)} .dl-req .rq b{font-weight:600} .dl-mirrors{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:40px} .mirror{padding:22px 24px;display:flex;align-items:center;gap:16px} .mirror .mi{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;font-size:20px; background:radial-gradient(circle at 35% 25%,rgba(78,163,255,.16),rgba(78,163,255,.03));border:1px solid rgba(78,163,255,.28)} .mirror b{display:block;font-size:14.5px} .mirror span{font-size:12px;color:var(--muted)} .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .step{padding:26px 22px;position:relative} .step .sn{font-family:"Cinzel";font-size:28px;color:var(--gold);opacity:.5;font-weight:800} .step h4{font-size:15px;margin:8px 0 6px} .step p{color:var(--muted);font-size:12.5px;margin:0} /* ============================================================ USERCP PAGE (painel do jogador) ============================================================ */ .ucp-layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start} .ucp-side{position:sticky;top:98px} .ucp-profile{padding:24px;text-align:center;margin-bottom:20px} .ucp-profile .pa{width:80px;height:80px;border-radius:14px;object-fit:cover;margin:0 auto 14px;border:1px solid var(--line-gold);background:#0c1524} .ucp-profile h3{margin:0;font-size:18px} .ucp-profile .vip{display:inline-block;margin-top:8px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:var(--gold);background:rgba(216,168,75,.12);border:1px solid var(--line-gold);padding:4px 12px;border-radius:999px} .ucp-menu{display:flex;flex-direction:column;gap:4px} .ucp-menu a{padding:12px 16px;border-radius:10px;font-size:13.5px;font-weight:600;color:var(--muted);display:flex;gap:12px;align-items:center;transition:all .2s} .ucp-menu a:hover{color:var(--text);background:rgba(120,150,190,.06)} .ucp-menu a.on{color:var(--text);background:rgba(216,168,75,.1);border:1px solid var(--line-gold)} .ucp-menu a .mi{width:20px;text-align:center} .ucp-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px} .ucp-stat{padding:20px 22px} .ucp-stat .si{font-size:20px;margin-bottom:10px} .ucp-stat b{font-family:"Cinzel";font-size:22px;display:block;line-height:1} .ucp-stat span{font-size:12px;color:var(--muted)} .ucp-panel{overflow:hidden;margin-bottom:24px} .ucp-panel .ph{padding:18px 22px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between; background:linear-gradient(180deg,rgba(216,168,75,.06),transparent)} .ucp-panel .ph h3{margin:0;font-size:15px} .ucp-char{display:grid;grid-template-columns:52px 1fr auto auto;gap:16px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line)} .ucp-char:last-child{border-bottom:0} .ucp-char .ca{width:52px;height:52px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:#0c1524} .ucp-char .cn b{display:block} .ucp-char .cn span{font-size:11.5px;color:var(--muted)} .ucp-char .clv{font-family:"Cinzel";font-size:13px;color:var(--muted)} .ucp-char .crs{font-family:"Cinzel";font-size:14px;color:var(--gold)} /* ============================================================ MARKET — estados de login (guest vs. logado) ============================================================ */ .mkt-preview{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);margin-bottom:18px; background:rgba(78,163,255,.06);border:1px dashed rgba(78,163,255,.35);border-radius:9px;padding:7px 12px} .mkt-preview button{border:0;background:var(--surface);color:var(--muted);font-family:inherit;font-weight:700;font-size:11.5px; padding:5px 12px;border-radius:7px;cursor:pointer;transition:all .2s} .mkt-preview button.on{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold))} /* elementos exclusivos de logado */ body[data-auth="guest"] .auth-only{display:none !important} body[data-auth="user"] .guest-only{display:none !important} /* ============================================================ WIKI / SERVER INFO — accordion + conteúdo central ============================================================ */ .info-layout{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start} .info-sidebar{display:flex;flex-direction:column;gap:14px;position:sticky;top:98px} .info-cat{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s} .info-cat.is-open{border-color:var(--line-gold);box-shadow:0 0 0 1px var(--line-gold)} .info-cat-head{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;border:0;cursor:pointer; background:transparent;color:var(--text);text-align:left;font-family:inherit;transition:background .2s} .info-cat-head:hover{background:rgba(120,150,190,.05)} .info-cat.is-open .info-cat-head{background:linear-gradient(180deg,rgba(216,168,75,.08),transparent)} .info-cat-icon{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:none;font-family:"Cinzel";font-weight:800; font-size:13px;color:var(--gold);background:radial-gradient(circle at 35% 25%,rgba(216,168,75,.25),rgba(216,168,75,.06));border:1px solid var(--line-gold)} .info-cat-text{flex:1;min-width:0} .info-cat-title{display:block;font-weight:700;font-size:14.5px} .info-cat-sub{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);margin-top:2px} .info-cat-chevron{width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted); transform:rotate(-45deg);transition:transform .25s;flex:none} .info-cat.is-open .info-cat-chevron{transform:rotate(45deg);border-color:var(--gold)} .info-cat-subs{display:flex;flex-direction:column;padding:6px;border-top:1px solid var(--line)} .info-cat-subs[hidden]{display:none} .info-sub{text-align:left;border:0;background:transparent;color:var(--muted);font-family:inherit;font-size:13.5px;font-weight:600; padding:11px 16px;border-radius:8px;cursor:pointer;transition:all .2s} .info-sub:hover{color:var(--text);background:rgba(120,150,190,.06)} .info-sub.is-active{color:var(--text);background:rgba(216,168,75,.1);border-left:2px solid var(--gold)} .info-content{background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);overflow:hidden} .info-pane-head{padding:24px 28px;border-bottom:1px solid var(--line)} .info-pane-head h2{font-size:22px;margin:0} .info-pane-body{padding:28px} .info-pane{display:none} .info-pane.is-active{display:block} .info-pane p{color:var(--muted);font-size:14px;line-height:1.7} .info-pane h3{font-size:16px;margin:24px 0 12px} .info-table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px;border:1px solid var(--line);border-radius:10px;overflow:hidden} .info-table th,.info-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line);border-right:1px solid var(--line)} .info-table th:last-child,.info-table td:last-child{border-right:0} .info-table thead th{background:var(--surface);font-family:"Cinzel";font-weight:700;color:var(--text);font-size:13px} .info-table thead .grp{text-align:center;color:var(--gold)} .info-table tbody tr:nth-child(odd){background:rgba(120,150,190,.03)} .info-table tbody tr:hover{background:rgba(216,168,75,.05)} .info-table td.c{text-align:center;color:var(--muted)} .info-table td.hl{color:var(--gold);font-weight:600} .info-table tbody td:first-child{font-weight:600;color:var(--text)} .info-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:6px} .info-cardlet{border:1px solid var(--line);border-radius:10px;padding:16px 18px;background:var(--surface)} .info-cardlet b{font-family:"Cinzel";color:var(--gold);display:block;margin-bottom:4px} .info-cardlet span{font-size:12.5px;color:var(--muted)} /* ============================================================ NEWS — artigo completo (single) ============================================================ */ .article-single{display:grid;grid-template-columns:1fr 300px;gap:34px;align-items:start} .article-hero-img{height:320px;border-radius:14px;overflow:hidden;position:relative;margin-bottom:28px;border:1px solid var(--line); background:linear-gradient(180deg,rgba(8,16,27,.1),rgba(8,16,27,.75)),url("../../default/img/background.jpg") center/cover} .article-hero-img .meta{position:absolute;left:26px;bottom:22px;right:26px} .article-hero-img h1{font-size:32px;margin:12px 0 0;line-height:1.15} .article-meta-row{display:flex;gap:16px;align-items:center;color:var(--muted);font-size:12.5px;margin-bottom:24px;flex-wrap:wrap} .article-meta-row .av{width:30px;height:30px;border-radius:50%;background:var(--surface);border:1px solid var(--line-gold);display:grid;place-items:center;color:var(--gold);font-weight:800;font-size:12px} .prose{color:#c8d2e2;font-size:15px;line-height:1.8} .prose p{margin:0 0 18px} .prose h2{font-size:22px;margin:34px 0 14px} .prose h3{font-size:17px;margin:26px 0 10px} .prose ul{margin:0 0 18px;padding-left:22px} .prose li{margin:6px 0;color:var(--muted)} .prose blockquote{margin:22px 0;padding:14px 20px;border-left:3px solid var(--gold);background:rgba(216,168,75,.06); border-radius:0 10px 10px 0;color:var(--text);font-style:italic} .prose .callout{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin:22px 0} .prose .callout b{color:var(--gold)} .article-share{display:flex;gap:10px;align-items:center;margin:34px 0;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)} .article-share a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--line);color:var(--muted);transition:all .2s} .article-share a:hover{color:var(--text);border-color:var(--line-gold)} .article-nav{display:flex;justify-content:space-between;gap:16px;margin-top:20px} .article-nav a{flex:1;padding:18px 20px;background:var(--card);border:1px solid var(--line);border-radius:12px;transition:all .2s} .article-nav a:hover{border-color:var(--line-gold)} .article-nav a span{font-size:11px;color:var(--muted-2);letter-spacing:.08em;text-transform:uppercase} .article-nav a b{display:block;margin-top:6px;font-size:14px} .article-nav a.next{text-align:right} /* ============================================================ PROFILE — perfil de personagem ============================================================ */ .profile-hero{display:flex;gap:26px;align-items:center;padding:32px;margin-bottom:26px;position:relative;overflow:hidden; background:linear-gradient(120deg,var(--card),rgba(21,35,58,.6))} .profile-hero .pav{width:120px;height:120px;border-radius:16px;object-fit:cover;border:1px solid var(--line-gold);background:#0c1524;flex:none;box-shadow:0 0 30px rgba(216,168,75,.2)} .profile-hero h1{font-size:32px;margin:0} .profile-hero .cls{color:var(--blue);font-weight:700;margin:4px 0 12px} .profile-hero .chips{display:flex;gap:8px;flex-wrap:wrap} .profile-hero .chips .c{font-family:"Cinzel";font-size:12.5px;padding:5px 12px;border-radius:8px;background:rgba(216,168,75,.1);border:1px solid var(--line-gold);color:var(--gold)} .profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .profile-panel{padding:0;overflow:hidden} .profile-panel .ph{padding:16px 22px;border-bottom:1px solid var(--line);font-family:"Cinzel";font-weight:700;font-size:15px; background:linear-gradient(180deg,rgba(216,168,75,.06),transparent)} .profile-panel .pb{padding:8px 22px 16px} .profile-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .profile-row:last-child{border:0} .profile-row span{color:var(--muted)} .profile-row b{font-family:"Cinzel"} .stat-bar{margin:10px 0} .stat-bar .lbl{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px} .stat-bar .lbl b{font-family:"Cinzel";color:var(--gold)} .stat-bar .track{height:8px;border-radius:99px;background:rgba(255,255,255,.06);overflow:hidden} .stat-bar .track>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-soft))} /* ============================================================ CONTACT / SUPORTE ============================================================ */ .contact-grid{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start} .contact-card{padding:32px} .contact-info .ci{display:flex;gap:16px;padding:18px 0;border-bottom:1px dashed var(--line)} .contact-info .ci:last-child{border:0} .contact-info .ci .ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:20px;flex:none; background:radial-gradient(circle at 35% 25%,rgba(216,168,75,.16),rgba(216,168,75,.03));border:1px solid var(--line-gold)} .contact-info .ci b{display:block;font-size:14px} .contact-info .ci span{font-size:12.5px;color:var(--muted)} .field textarea{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px 14px; color:var(--text);font-family:inherit;font-size:14px;min-height:130px;resize:vertical;transition:border-color .2s} .field textarea:focus{outline:none;border-color:var(--line-gold);box-shadow:0 0 0 3px rgba(216,168,75,.12)} /* ============================================================ LEGAL (Termos / Privacidade / Reembolso) ============================================================ */ .legal-layout{display:grid;grid-template-columns:240px 1fr;gap:34px;align-items:start} .legal-toc{position:sticky;top:98px;padding:20px;font-size:13px} .legal-toc h4{font-family:"Cinzel";font-size:13px;margin:0 0 12px;color:var(--muted-2);letter-spacing:.1em;text-transform:uppercase} .legal-toc a{display:block;color:var(--muted);padding:7px 0;transition:color .2s;border-left:2px solid transparent;padding-left:12px;margin-left:-12px} .legal-toc a:hover{color:var(--gold)} .legal-body{padding:40px 44px} .legal-body .upd{font-size:12.5px;color:var(--muted-2);margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line)} /* ============================================================ DONATION / VIP ============================================================ */ .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:20px} .plan{padding:0;overflow:hidden;position:relative;display:flex;flex-direction:column} .plan.featured{border-color:var(--line-gold);box-shadow:0 0 0 1px var(--line-gold),var(--shadow)} .plan-badge{position:absolute;top:16px;right:16px;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));padding:5px 12px;border-radius:999px} .plan-head{padding:30px 28px 22px;text-align:center;border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(216,168,75,.05),transparent)} .plan.featured .plan-head{background:linear-gradient(180deg,rgba(216,168,75,.14),transparent)} .plan-tier{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .plan-price{font-family:"Cinzel";font-size:40px;color:var(--gold);margin:10px 0 2px;line-height:1} .plan-price small{font-size:14px;color:var(--muted);font-family:"Inter"} .plan-wc{font-size:13px;color:var(--blue);font-weight:700} .plan-body{padding:24px 28px;flex:1} .plan-body ul{list-style:none;margin:0;padding:0} .plan-body li{padding:9px 0;font-size:13.5px;color:var(--muted);display:flex;gap:10px;align-items:flex-start} .plan-body li::before{content:"✓";color:var(--success);font-weight:800;flex:none} .plan-foot{padding:0 28px 28px} .pay-methods{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px;color:var(--muted-2);font-size:12.5px;align-items:center} .pay-methods .pm{padding:8px 16px;border:1px solid var(--line);border-radius:9px;background:var(--surface);font-weight:700;color:var(--muted)} /* ============================================================ CASTLE SIEGE (página dedicada) ============================================================ */ .cs-page-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line);min-height:360px;display:flex;align-items:center; background:linear-gradient(180deg,rgba(8,16,27,.55),rgba(8,16,27,.92)),url("../../default/img/castle_owner_bg.jpg") center/cover} .cs-page-hero .wrap{position:relative;z-index:2;padding:56px 24px} .cs-page-hero h1{font-size:46px;margin:12px 0 0} .cs-page-hero p{color:var(--muted);max-width:560px;margin:14px 0 0;font-size:15.5px} .cs-owner-bar{display:flex;gap:24px;flex-wrap:wrap;margin-top:28px} .cs-owner-bar .o{background:rgba(8,16,27,.55);border:1px solid var(--line-gold);border-radius:12px;padding:16px 26px;backdrop-filter:blur(6px)} .cs-owner-bar .o span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .cs-owner-bar .o b{font-family:"Cinzel";font-size:20px;color:var(--gold);display:block;margin-top:4px} .cs-countdown{display:flex;gap:12px;margin-top:6px} .cs-countdown .u{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 16px;text-align:center;min-width:64px} .cs-countdown .u b{font-family:"Cinzel";font-size:24px;color:var(--text);display:block;line-height:1} .cs-countdown .u span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)} .cs-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:8px 0 10px;counter-reset:cs} .cs-tl{position:relative;padding:24px 20px 24px 0} .cs-tl::before{content:"";position:absolute;left:0;top:34px;width:14px;height:14px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(216,168,75,.18)} .cs-tl::after{content:"";position:absolute;left:7px;top:44px;bottom:-24px;width:2px;background:var(--line)} .cs-tl:last-child::after{display:none} .cs-tl .t{padding-left:28px} .cs-tl .when{font-family:"Cinzel";color:var(--gold);font-size:13px} .cs-tl h4{margin:4px 0 4px;font-size:15px} .cs-tl p{margin:0;color:var(--muted);font-size:12.5px} .cs-rules{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cs-rule{padding:26px 24px} .cs-rule .ri{font-size:24px;margin-bottom:12px} .cs-rule h4{font-size:16px;margin:0 0 6px} .cs-rule p{color:var(--muted);font-size:13px;margin:0} .cs-history{overflow:hidden} .cs-history .hr{display:grid;grid-template-columns:120px 1fr 1fr;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);font-size:13.5px;align-items:center} .cs-history .hr:last-child{border:0} .cs-history .hr.head{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-weight:700} .cs-history .hr b{font-family:"Cinzel"} .cs-history .hr .win{color:var(--gold)} /* ============================================================ SHOP — loja do servidor (produtos comprados com moedas do Admin) Moedas = Credits Configs cadastradas no AdminCP (config_display) ============================================================ */ .shop-wallet{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px} .wallet-coin{flex:1;min-width:180px;display:flex;gap:14px;align-items:center;padding:16px 20px; background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-sm);transition:border-color .2s} .wallet-coin:hover{border-color:var(--line-gold)} .wallet-coin .wc-ico{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;font-size:20px;flex:none; background:radial-gradient(circle at 35% 25%,rgba(216,168,75,.2),rgba(216,168,75,.04));border:1px solid var(--line-gold)} .wallet-coin.blue .wc-ico{background:radial-gradient(circle at 35% 25%,rgba(78,163,255,.2),rgba(78,163,255,.04));border-color:rgba(78,163,255,.4)} .wallet-coin .wc-t{min-width:0} .wallet-coin .wc-t b{font-family:"Cinzel";font-size:20px;display:block;line-height:1} .wallet-coin .wc-t span{font-size:12px;color:var(--muted)} .wallet-coin .wc-add{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;place-items:center;flex:none; border:1px solid var(--line);color:var(--muted);font-size:16px;transition:all .2s} .wallet-coin .wc-add:hover{color:var(--gold);border-color:var(--line-gold);background:rgba(216,168,75,.08)} .wallet-guest{width:100%;padding:18px 22px;text-align:center;color:var(--muted);font-size:13.5px; background:var(--card);border:1px dashed var(--line-gold);border-radius:12px} .wallet-guest a{color:var(--gold);font-weight:600} .shop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} .shop-card{overflow:hidden;display:flex;flex-direction:column} .shop-card .sh-thumb{aspect-ratio:16/11;display:grid;place-items:center;position:relative;border-bottom:1px solid var(--line); background:radial-gradient(circle at 50% 30%,#22375a,#0d1626)} .shop-card .sh-thumb .em{font-size:48px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.5))} .shop-card .sh-thumb .glow{position:absolute;inset:0} .shop-card.g-legend .glow{background:radial-gradient(circle at 50% 40%,rgba(216,168,75,.25),transparent 62%)} .shop-card.g-epic .glow{background:radial-gradient(circle at 50% 40%,rgba(160,90,255,.25),transparent 62%)} .shop-card.g-blue .glow{background:radial-gradient(circle at 50% 40%,rgba(78,163,255,.22),transparent 62%)} .shop-card .sh-badge{position:absolute;top:12px;left:12px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:6px} .sh-hot{color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold))} .sh-vip{color:var(--gold);background:rgba(216,168,75,.15);border:1px solid var(--line-gold)} .sh-new{color:var(--success);background:rgba(55,214,122,.14);border:1px solid rgba(55,214,122,.32)} .shop-card .sh-body{padding:18px 20px;display:flex;flex-direction:column;gap:8px;flex:1} .shop-card .sh-body h4{margin:0;font-size:15.5px} .shop-card .sh-cat{font-size:11px;color:var(--blue);font-weight:700;letter-spacing:.04em;text-transform:uppercase} .shop-card .sh-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin:0} .shop-card .sh-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:6px;flex-wrap:wrap} .shop-card .sh-price{display:flex;align-items:center;gap:7px} .shop-card .sh-price b{font-family:"Cinzel";font-size:17px;color:var(--gold)} .shop-card .sh-cur{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted); padding:3px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--line)} .shop-card .sh-buy{padding:9px 18px;border-radius:9px;border:0;cursor:pointer;font-family:inherit;font-weight:800;font-size:12.5px; color:#1a1305;background:linear-gradient(180deg,#f0cd7e,var(--gold));transition:transform .18s} .shop-card .sh-buy:hover{transform:translateY(-2px)} /* ---------- Responsive ---------- */ @media(max-width:980px){ .hero-grid,.rank-cols,.layout,.auth-wrap,.dl-hero,.info-layout,.article-single,.profile-grid,.contact-grid,.legal-layout{grid-template-columns:1fr} .shop-grid{grid-template-columns:repeat(2,1fr)} .plans,.cs-rules{grid-template-columns:1fr} .cs-timeline{grid-template-columns:1fr 1fr} .legal-toc{position:static} .strip,.feat-grid,.market-grid,.guild-grid,.market-head,.hero-mkt-grid,.dl-mirrors,.steps,.ucp-stats{grid-template-columns:repeat(2,1fr)} .news-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr 1fr} nav.menu{display:none} .hero-copy h1{font-size:42px} .auth-side{display:none} .mu-fb-actions{margin-left:0} .ucp-side,.info-sidebar{position:static} .info-cards{grid-template-columns:1fr} .profile-hero{flex-direction:column;text-align:center} } @media(max-width:560px){ .strip,.market-grid,.market-head,.hero-mkt-grid,.dl-mirrors,.steps,.ucp-stats,.podium,.shop-grid{grid-template-columns:1fr} .topbar .langs,.topbar .info{display:none} .article-row{grid-template-columns:1fr} .article-row .thumb{min-height:150px} .nav-right .btn span.lbl-full{display:none} .page-hero h1{font-size:30px} .mkt-row{grid-template-columns:52px 1fr;gap:12px} .mkt-row .mkt-price,.mkt-row .mkt-acts,.mkt-row .mkt-seller{grid-column:2} .rank-table .rth,.rank-table .rtr{grid-template-columns:40px 44px 1fr 90px} .rank-table .rth span:nth-child(4),.rank-table .rtr .rcls{display:none} .podium .pc.first{padding-top:26px} } /* ============================================================ INTEGRAÇÃO WEBENGINE — ajustes do template real (navbar via templateBuildNavbar em