/* DDTank Prime — portal, modelo 4 (vibrante: azul royal + laranja/amarelo, cores da arte da batalha).
   Carregado DEPOIS do portal.css e só sobrescreve. */
:root {
    --bg: #0a1a4a;
    --bg-2: #0f2463;
    --card: #142f7c;
    --card-2: #1a3a92;
    --line: rgba(120, 170, 255, 0.22);
    --line-strong: rgba(255, 170, 60, 0.55);
    --gold: #ffc83d;
    --gold-2: #ff7a1a;
    --gold-soft: rgba(255, 140, 40, 0.15);
    --orange: #ff7a1a;
    --sky: #4fb3ff;
    --text: #f2f6ff;
    --muted: #a9bbe8;
    --radius: 18px;
    --shadow: 0 18px 40px rgba(2, 8, 30, 0.5);
    --font-title: 'Baloo 2', 'Rubik', system-ui, sans-serif;
    --font-body: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body { background: linear-gradient(180deg, #0a1a4a 0%, #0c1f57 50%, #0a1a4a 100%); }
a { color: var(--gold); }
a:hover { color: #ffe08a; }

/* ---------- botões com cantos cortados ---------- */
.btn {
    --cut: 12px;
    font-family: var(--font-title); font-weight: 800; font-size: 17px; letter-spacing: .3px;
    border: 0; border-radius: 0; padding: 12px 28px; line-height: 1.2;
    clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
    transition: transform .15s ease, filter .2s ease, background-position .4s ease;
}
.btn-gold {
    color: #fff; text-shadow: 0 2px 0 rgba(150, 50, 0, .45);
    background: linear-gradient(100deg, #ffc83d 0%, #ff9a1f 45%, #ff6a00 100%);
    background-size: 160% 100%; background-position: 0 0;
    box-shadow: inset 0 -5px 0 rgba(120, 30, 0, .35), inset 0 2px 0 rgba(255, 255, 255, .45);
}
.btn-gold:hover { color: #fff; background-position: 100% 0; filter: brightness(1.08); transform: translateY(-2px); box-shadow: inset 0 -5px 0 rgba(120, 30, 0, .35), inset 0 2px 0 rgba(255,255,255,.5); }
.btn-gold:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(120, 30, 0, .35); }
.btn-ghost {
    color: #0f2463; background: #ffffff;
    box-shadow: inset 0 -5px 0 rgba(15, 36, 99, .2);
}
.btn-ghost:hover { color: #ff6a00; background: #fff6e8; transform: translateY(-2px); }
.btn-ghost:active { transform: translateY(2px); box-shadow: inset 0 -2px 0 rgba(15, 36, 99, .2); }
.btn-lg { --cut: 16px; padding: 15px 36px; font-size: 20px; }
.btn-sm { --cut: 9px; padding: 8px 20px; font-size: 15px; }
.spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }

/* ---------- topo ---------- */
.topbar { background: rgba(10, 26, 74, .88); border-bottom: 3px solid var(--orange); }
.nav a { color: #cfdcff; font-weight: 600; font-size: 15px; }
.nav a:hover { color: var(--gold); }

/* ---------- destaque ---------- */
.hero::before { filter: saturate(1.1); }
.hero::after {
    background:
        linear-gradient(90deg, rgba(10, 26, 74, .95) 0%, rgba(10, 26, 74, .78) 34%, rgba(10, 26, 74, .12) 62%, rgba(10, 26, 74, 0) 100%),
        linear-gradient(180deg, rgba(10, 26, 74, .3) 0%, rgba(10, 26, 74, 0) 25%, rgba(10, 26, 74, 0) 72%, var(--bg) 100%);
}
.hero h1 {
    font-weight: 800; font-size: clamp(32px, 4.2vw, 54px); line-height: 1.05; letter-spacing: 0; text-transform: uppercase;
    background: linear-gradient(180deg, #fff3b0 0%, #ffc83d 45%, #ff7a1a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    filter: drop-shadow(0 4px 0 rgba(4, 12, 40, .7));
}
.hero p.lead { color: #e1e9ff; font-size: 18px; }
.status { background: rgba(10, 26, 74, .75); border: 2px solid rgba(80, 220, 140, .55); font-weight: 600; }
.status b { color: #6dffaf; }
.hero-chips span { background: rgba(10, 26, 74, .75); border: 1px solid rgba(255, 200, 61, .45); color: #fff; font-weight: 500; border-radius: 8px; }

/* faixa de destaques */
.perks { background: linear-gradient(90deg, #ff6a00, #ff9a1f 50%, #ffb52e); border: 0; }
.perk + .perk { border-left: 2px solid rgba(255, 255, 255, .25); }
.perk .ico { width: 50px; height: 50px; min-width: 50px; border-radius: 12px; display: grid; place-items: center; font-size: 24px; background: #0f2463; box-shadow: inset 0 -3px 0 rgba(0,0,0,.3); }
.perk b { font-family: var(--font-title); font-weight: 800; font-size: 18px; color: #fff; text-shadow: 0 1px 0 rgba(120, 30, 0, .4); }
.perk span { color: #fff3dc; font-weight: 500; }

/* ---------- seções ---------- */
section.alt {
    border: 0;
    background:
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px),
        linear-gradient(180deg, #0f2463, #12296e);
}
.section-head .kicker, .spotlight .kicker { color: var(--orange); font-weight: 700; letter-spacing: 3px; font-size: 13px; }
.section-head h2, .spotlight h2, .community h2 { font-weight: 800; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: 0; }
.section-head p, .spotlight p { color: var(--muted); }
.divider { width: 90px; height: 5px; border-radius: 0; background: linear-gradient(90deg, #ffc83d, #ff6a00); clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }

/* recursos: cartões azuis com destaque laranja */
.feature { background: linear-gradient(160deg, #1a3a92 0%, #12296e 100%); border: 2px solid rgba(120, 170, 255, .25); border-radius: 18px; }
.feature:hover { border-color: var(--orange); box-shadow: 0 18px 40px rgba(2, 8, 30, .5), 0 0 0 4px rgba(255, 122, 26, .18); }
.feature .ico { border: 0; border-radius: 14px; background: linear-gradient(135deg, #ffc83d, #ff6a00); box-shadow: inset 0 -4px 0 rgba(120, 30, 0, .3); }
.feature h3 { font-family: var(--font-title); font-weight: 800; font-size: 22px; }
.feature p { color: #c3d1f5; }
.feature .tag { background: var(--gold); color: #3a1e00; border-radius: 6px; }

/* vitrines */
.spotlight .shot { background: linear-gradient(135deg, #ffc83d, #ff6a00); border-radius: 20px; padding: 8px; box-shadow: var(--shadow); }
.spotlight.reverse .shot { background: linear-gradient(135deg, #4fb3ff, #1f5fe0); }
.spotlight .shot img { border-radius: 14px; }
.spotlight .shot .pin { background: #fff; color: #0f2463; font-weight: 700; border-radius: 6px; }
.checks li { color: #e1e9ff; }
.checks li::before { background: linear-gradient(135deg, #ffc83d, #ff6a00); color: #fff; border-radius: 6px; }

/* download */
section.sky::before { opacity: .3; filter: none; }
section.sky { background: linear-gradient(180deg, rgba(31, 95, 224, .35), rgba(10, 26, 74, .2)); }
.dl-card { background: rgba(15, 36, 99, .94); border: 2px solid rgba(120, 170, 255, .3); border-radius: 18px; }
.dl-card h3 { font-family: var(--font-title); font-weight: 800; font-size: 24px; }
.dl-card .meta { color: #c3d1f5; }
.steps li { color: #e1e9ff; }
.steps li::before { background: linear-gradient(135deg, #ffc83d, #ff6a00); color: #fff; border-radius: 8px; }
.art-card { border: 3px solid var(--orange); border-radius: 18px; }
.art-card .caption { font-family: var(--font-title); font-weight: 800; font-size: 24px; }

/* ranking */
.ranking { background: linear-gradient(160deg, #1a3a92, #12296e); border: 2px solid rgba(120, 170, 255, .25); border-radius: 18px; }
.ranking .pos { font-family: var(--font-title); font-weight: 800; font-size: 24px; }
.ranking .power { color: var(--gold); }

/* notícias e comunidade */
.post { background: linear-gradient(160deg, #1a3a92, #12296e); border: 2px solid rgba(120, 170, 255, .25); border-radius: 18px; }
.post h3 { font-family: var(--font-title); font-weight: 800; }
.post .date { color: var(--orange); }
.community {
    border: 0; border-radius: 22px;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(255, 200, 61, .35), transparent 55%),
        linear-gradient(120deg, #1f5fe0 0%, #2a7bff 55%, #4fb3ff 100%);
    box-shadow: var(--shadow);
}
.community p { color: #eaf2ff; }

/* rodapé */
footer { background: #071338; border-top: 3px solid var(--orange); color: #8fa3d8; }
footer nav a { color: #cfdcff; }
footer nav a:hover { color: var(--gold); }

/* ---------- entrar / cadastro ---------- */
.auth-art::before { background: linear-gradient(180deg, rgba(10, 26, 74, 0) 30%, rgba(10, 26, 74, .93)); }
.auth-art h2 { font-family: var(--font-title); font-weight: 800; font-size: 36px; line-height: 1.1; }
.auth-form { background: linear-gradient(160deg, #0f2463, #0a1a4a); }
.auth-card { background: rgba(26, 58, 146, .55); padding: 34px 30px; border-radius: 20px; border: 2px solid rgba(120, 170, 255, .3); border-top: 4px solid var(--orange); box-shadow: var(--shadow); }
.auth-card h1 { font-family: var(--font-title); font-weight: 800; font-size: 40px; line-height: 1.1; }
.field label { color: #dbe5ff; font-weight: 600; }
.field input { background: #0a1a4a; border: 2px solid rgba(120, 170, 255, .3); border-radius: 10px; }
.field input:focus { border-color: var(--orange); box-shadow: 0 0 0 4px rgba(255, 122, 26, .2); }
.check input { accent-color: var(--orange); }
.notice { background: rgba(255, 200, 61, .12); border: 2px solid rgba(255, 200, 61, .45); color: #ffeab0; border-radius: 10px; }
.alert { border-radius: 10px; }

@media (max-width: 980px) {
    .hero::after { background: linear-gradient(180deg, rgba(10,26,74,.55) 0%, rgba(10,26,74,.84) 50%, var(--bg) 100%); }
    .hero p.lead { text-shadow: 0 2px 8px rgba(0,0,0,.5); }
    .perk:nth-child(3) { border-left: 0; }
    .perk:nth-child(n+3) { border-top: 2px solid rgba(255, 255, 255, .25); }
}
@media (max-width: 760px) {
    .topbar.open .nav, .topbar.open .actions { background: var(--bg-2); }
    .auth-card { padding: 26px 20px; }
}