@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;800&display=swap');

:root {
    --bg: #0e0f14;
    --panel: #171922;
    --panel2: #1e2130;
    --line: #2a2e3e;
    --gold: #f4c84f;
    --text: #e6e8ef;
    --dim: #9aa0b0;
    --green: #6fd986;
    --red: #e65a52;
    --blue: #6db7ff;
}

* { box-sizing: border-box; }

/* el hero a sangre usa 100vw (incluye la barra de scroll) -> evita el scroll
   horizontal fantasma en toda la web sin romper el sticky del header */
html { overflow-x: hidden; }

body {
    margin: 0;
    overflow-x: clip; /* recorta el sobrante de los bloques a sangre SIN romper el sticky (clip != hidden) */
    background: radial-gradient(1200px 500px at 50% -10%, #1a1d2a, var(--bg)) fixed;
    color: var(--text);
    font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    position: sticky; top: 0; z-index: 50;
    background: linear-gradient(#1a1d28, #13151d);
    border-bottom: 1px solid var(--line);
}
.topbar-inner {
    padding: 12px 32px;
    display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.brand { font-size: 20px; font-weight: 700; color: var(--gold); letter-spacing: .5px; }
.brand span { color: var(--text); font-weight: 400; margin-left: 6px; opacity: .85; }
.mainnav { display: flex; align-items: center; gap: 18px; }
.mainnav a { color: var(--text); font-weight: 600; opacity: .82; }
.mainnav a:hover { opacity: 1; color: var(--gold); text-decoration: none; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.topbar-right .navlink { color: var(--text); opacity: .85; }
.langsw { display: inline-flex; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.langsw a { padding: 4px 9px; font-size: 12px; font-weight: 700; color: var(--dim); }
.langsw a.on { background: var(--gold); color: #14110a; }
.langsw a:hover { color: var(--text); text-decoration: none; }
.langsw a.on:hover { color: #14110a; }

.btn {
    display: inline-block; padding: 7px 14px; border: 1px solid var(--line);
    border-radius: 6px; background: var(--panel2); color: var(--text);
}
.btn:hover { text-decoration: none; border-color: #3b4258; filter: brightness(1.1); }
.btn.gold {
    background: linear-gradient(#f4c84f, #d39a26); color: #20180a;
    border-color: #f4c84f; font-weight: 700;
}
.btn.discord { background: #5865F2; border-color: #5865F2; color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; gap: 8px; }
.btn.discord:hover { filter: brightness(1.08); border-color: #5865F2; }
.btn.discord svg { width: 20px; height: 15px; fill: currentColor; flex: none; }
/* botón de login con el degradado azul típico de Battle.net */
.btn.bnet { background: linear-gradient(180deg, #18a0e8, #0a72c9); border-color: #0a72c9;
    color: #fff; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; }
.btn.bnet:hover { filter: brightness(1.08); border-color: #0a72c9; }
.btn.bnet svg { width: 16px; height: 16px; fill: currentColor; flex: none; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 22px 60px; }
h1 { font-size: 26px; margin: 8px 0 6px; }
h2 { font-size: 18px; margin: 28px 0 10px; color: var(--gold); }
.sub { color: var(--dim); font-size: 14px; margin: 0 0 18px; }
code { background: #0b0c11; border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; color: var(--gold); }

table.rank { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
table.rank th, table.rank td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--line); }
table.rank th { background: #12141d; color: var(--dim); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .4px; }
table.rank tr:last-child td { border-bottom: 0; }
table.rank tr:hover td { background: #1b1e2b; }
.ranknum { color: var(--dim); width: 36px; }
.big { color: var(--gold); font-weight: 700; font-size: 17px; }
.realm { color: var(--dim); font-weight: 400; }
.ontime { color: var(--green); }
.late { color: var(--red); }

.back { display: inline-block; margin-bottom: 14px; color: var(--dim); }

.hero {
    display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
    background: linear-gradient(#1c1f2c, #15171f);
    border: 1px solid var(--line); border-radius: 12px; padding: 22px 26px; margin-bottom: 10px;
}
.hero-name { font-size: 26px; font-weight: 700; }
.hero .realm { font-size: 13px; }
.hero-rating { text-align: center; padding: 0 18px; border-left: 1px solid var(--line); border-right: 1px solid var(--line); }
.hero-rating .num { font-size: 44px; font-weight: 800; color: var(--gold); line-height: 1; }
.hero-rating .tier { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; margin-top: 2px; }
.hero-rating .lbl { font-size: 12px; color: var(--dim); text-transform: uppercase; letter-spacing: .5px; }
.hero-meta { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--dim); }
.hero-meta b { color: var(--text); }

.rankbadge { display: inline-block; margin-top: 8px; padding: 3px 10px; border: 1px solid var(--line);
    border-radius: 20px; font-size: 12px; color: var(--gold); background: #0c0e14; }

/* panel de Reputación: lo que raider.io NO tiene */
.rep { margin-left: auto; text-align: center; padding: 10px 18px; border-radius: 10px;
    background: #0c0e14; border: 1px solid var(--line); min-width: 130px; }
.rep-title { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; }
.rep-tier { font-size: 20px; font-weight: 800; margin: 2px 0; }
.rep-sub { font-size: 12px; color: var(--dim); }

.legend { color: var(--dim); font-size: 13px; margin: -8px 0 18px; }
.legend b { color: var(--text); }

/* CTAs de modo de cola (Solo Q libre / estricto / raid) */
.queue-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.queue-tabs .qtab { padding: 8px 16px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--panel2); color: var(--dim); font-weight: 700; font-size: 14px; }
.queue-tabs a.qtab:hover { color: var(--text); border-color: #3b4258; text-decoration: none; }
.queue-tabs .qtab.on { background: linear-gradient(#f4c84f, #d39a26); color: #20180a; border-color: #f4c84f; }
.queue-tabs .qtab.soon { opacity: .55; cursor: default; }
.queue-tabs .qtab.soon em { font-style: normal; font-weight: 600; font-size: 11px;
    text-transform: uppercase; letter-spacing: .4px; opacity: .85; margin-left: 4px; }

.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.filters input[type=text], .filters select {
    background: var(--panel2); color: var(--text); border: 1px solid var(--line);
    border-radius: 6px; padding: 7px 10px; font-size: 14px;
}
.filters input[type=text] { min-width: 200px; }
.clearf { color: var(--dim); font-size: 13px; }

/* rejilla de mazmorras estilo raider.io */
.dungeon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
.dtile { background: var(--panel); border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; }
.dtile .dlevel { font-size: 22px; font-weight: 800; line-height: 1; }
.dtile .dname { font-size: 13px; color: var(--text); margin: 3px 0 4px; }
.dtile .dflags { font-size: 11px; color: var(--dim); }

/* ===== Lavado de cara "wowera" (sin perder legibilidad) ===== */
.brand, h1, h2, .hero-name, .hero-rating .num {
    font-family: 'Cinzel', Georgia, 'Segoe UI', serif;
}
.brand {
    background: linear-gradient(#ffe9a8, #f4c84f 55%, #c9962e);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    text-shadow: 0 0 18px rgba(244, 200, 79, .22); letter-spacing: 1px;
}
.topbar { box-shadow: 0 1px 0 rgba(244, 200, 79, .18), 0 6px 22px rgba(0, 0, 0, .45); }
h1 { letter-spacing: .5px; }
h2 { border-left: 3px solid var(--gold); padding-left: 10px; }

.hero-name { letter-spacing: .5px; }

/* acento de color de clase en el hero */
.hero { position: relative; overflow: hidden; }
.hero::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: var(--hero-accent, var(--gold));
    box-shadow: 0 0 22px var(--hero-accent, var(--gold));
}

/* medallas top-3 del ranking */
.ranknum.medal1 { color: #ffd75e; font-weight: 800; }
.ranknum.medal2 { color: #cfd6e0; font-weight: 800; }
.ranknum.medal3 { color: #e0985a; font-weight: 800; }

/* insignia de rol (T/H/D) */
.rolebadge {
    display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center;
    border-radius: 4px; font-size: 11px; font-weight: 800; color: #0c0e14;
    vertical-align: middle; margin-right: 7px;
}

/* baldosas con vida */
.dtile { transition: transform .12s ease, box-shadow .12s ease; }
.dtile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }

.rep { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04), 0 4px 14px rgba(0, 0, 0, .35); }

/* ===== Portal / home (estilo Icy-Veins) ===== */
.hero-home {
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: 14px; padding: 46px 34px; margin-bottom: 26px;
    background:
        radial-gradient(700px 240px at 82% -25%, rgba(244, 200, 79, .12), transparent 70%),
        linear-gradient(135deg, #1c2030, #11131c);
}
.hero-home::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--gold), #6f521a); }
.hero-home h1 { font-size: 38px; margin: 0 0 10px; }
.hero-home .lead { color: var(--text); opacity: .88; max-width: 660px; font-size: 16px; margin: 0 0 22px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-cta .btn { padding: 10px 22px; font-size: 15px; }
.hero-stats { display: flex; gap: 30px; margin-top: 26px; }
.hero-stats .stat { display: flex; flex-direction: column; }
.hero-stats .stat-n { font-size: 26px; font-weight: 800; color: var(--gold); line-height: 1; }
.hero-stats .stat-l { color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; margin-top: 4px; }

.featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 6px; }
.feature-card { display: block; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px; transition: transform .12s ease, border-color .12s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: var(--gold); text-decoration: none; }
.fc-icon { font-size: 30px; }
.fc-title { font-weight: 700; color: var(--gold); margin: 8px 0 4px; font-size: 16px; }
.fc-ex { color: var(--dim); font-size: 13px; }

.home-cols { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
@media (max-width: 760px) { .home-cols { grid-template-columns: 1fr; } }
.news-card { background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 8px; padding: 14px 16px; margin-bottom: 12px; }
.news-meta { font-size: 12px; color: var(--dim); margin-bottom: 5px; }
.news-tag { color: #0c0e14; background: var(--gold); border-radius: 4px; padding: 1px 8px; font-weight: 700; }
.news-title { font-weight: 700; font-size: 16px; margin-bottom: 3px; }
.news-ex { color: var(--dim); font-size: 14px; }

.topwidget { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tw-row { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--line); }
.tw-row:last-child { border-bottom: 0; }
.tw-row:hover { background: #1d2130; text-decoration: none; }
.tw-rank { color: var(--dim); width: 26px; font-size: 13px; }
.tw-name { flex: 1; font-weight: 600; }
.tw-rating { font-weight: 800; }
.seeall { display: inline-block; margin-top: 10px; color: var(--gold); font-size: 14px; }

.guide-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.guide-card { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; transition: border-color .12s ease, transform .12s ease; }
.guide-card:hover { border-color: var(--gold); transform: translateY(-2px); text-decoration: none; }
.gc-icon { font-size: 26px; }
.gc-text { display: flex; flex-direction: column; }
.gc-title { font-weight: 700; color: var(--text); }
.gc-ex { color: var(--dim); font-size: 13px; }

.app-cta { text-align: center; margin: 34px auto 0; max-width: 560px; }
.app-cta h2 { border: 0; padding: 0; margin: 0 0 6px; }
.app-cta .btn { margin-top: 6px; padding: 11px 22px; }

.guide { max-width: 760px; }
.guide .lead { color: var(--dim); font-size: 16px; margin-bottom: 18px; }
.guide p { color: var(--text); opacity: .9; }

/* ===== Join the Alpha (captación de emails) ===== */
.alpha-join {
    position: relative; text-align: center;
    margin: 36px calc(50% - 50vw);                 /* a sangre / full-width */
    margin-top: 0 !important;
    padding: 44px 22px;
    border-top: 1px solid rgba(244, 200, 79, .4);
    border-bottom: 1px solid rgba(244, 200, 79, .4);
    /* manchas doradas que fluyen (efecto líquido) sobre una base dorada oscura */
    background:
        radial-gradient(55% 75% at 18% 28%, rgba(255, 228, 150, .24), transparent 64%),
        radial-gradient(50% 70% at 82% 72%, rgba(212, 154, 38, .26), transparent 66%),
        radial-gradient(65% 85% at 65% 15%, rgba(244, 200, 79, .20), transparent 66%),
        linear-gradient(120deg, #0c0801, #190f03 48%, #281b07 100%);
    background-size: 200% 200%, 220% 220%, 240% 240%, 100% 100%;
    background-repeat: no-repeat;
    animation: ajLiquid 20s ease-in-out infinite alternate;
}
@keyframes ajLiquid {
    0%   { background-position: 0% 0%,   100% 100%, 50% 0%,   0 0; }
    50%  { background-position: 100% 60%, 0% 40%,   10% 100%, 0 0; }
    100% { background-position: 40% 100%, 60% 0%,   100% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) { .alpha-join { animation: none; } }
.alpha-join .aj-inner { max-width: 600px; margin: 0 auto; position: relative; }
.aj-badge { display: inline-block; border: 1px solid rgba(244, 200, 79, .7); color: #ffe9a8;
    background: rgba(0, 0, 0, .22);
    border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 700;
    letter-spacing: .6px; text-transform: uppercase; margin-bottom: 14px; }
.alpha-join h2 { margin: 0 0 8px; border: 0; padding: 0; font-size: 28px; color: #fff; }
.aj-sub { color: rgba(255, 255, 255, .9); font-size: 15px; margin: 0 0 18px; }
.aj-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.aj-form input[type=email] { background: #0c0e14; border: 1px solid var(--line); border-radius: 8px;
    color: var(--text); padding: 11px 14px; font-size: 15px; min-width: 260px; }
.aj-form input[type=email]:focus { outline: none; border-color: var(--gold); }
.aj-form .btn { padding: 11px 22px; }
.aj-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.aj-note { color: rgba(255, 255, 255, .7); font-size: 12px; margin: 12px 0 0; }

/* ===== Home estilo RaidPulse ===== */
.lp-hero {
    text-align: center; position: relative; overflow: hidden;
    margin: -28px calc(50% - 50vw) 0;
    padding: 72px 22px 56px;
    background:
        radial-gradient(900px 380px at 50% -8%, rgba(244, 200, 79, .10), transparent 70%),
        linear-gradient(180deg, #15171f, #0e0f14);
    border-bottom: 1px solid var(--line);
}
.lp-hero-inner { max-width: 760px; margin: 0 auto; }
.lp-badge {
    display: inline-block; border: 1px solid rgba(244, 200, 79, .5); color: var(--gold);
    border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 700;
    letter-spacing: .8px; text-transform: uppercase; margin-bottom: 20px;
}
.lp-title { font-size: 50px; line-height: 1.06; margin: 0 0 16px; letter-spacing: .5px; }
.lp-title .acc { color: var(--gold); }
.lp-sub { color: var(--dim); font-size: 16px; max-width: 600px; margin: 0 auto 26px; }

.lp-search {
    display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
    background: #0c0e14; border: 1px solid var(--line); border-radius: 10px; padding: 8px;
}
.lp-search .regions { display: inline-flex; gap: 2px; background: #15171f; border-radius: 7px; padding: 3px; }
.lp-search .rg { padding: 5px 10px; border-radius: 5px; font-size: 12px; font-weight: 700; color: var(--dim); }
.lp-search .rg.on { background: var(--gold); color: #14110a; }
.lp-search input { background: transparent; border: 0; color: var(--text); padding: 6px 10px; min-width: 240px; font-size: 14px; outline: none; }

.lp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; max-width: 720px; margin: 34px auto 0; }
@media (max-width: 620px) { .lp-stats { grid-template-columns: repeat(2, 1fr); } }
.lp-stat { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px 10px; }
.lp-stat .n { display: block; font-size: 28px; font-weight: 800; color: var(--gold); line-height: 1; }
.lp-stat .l { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; margin-top: 6px; }

.lp-section { margin-bottom: 36px; }
.lp-sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.lp-sec-head h2 { margin: 0; border: 0; padding: 0; font-size: 22px; }
.lp-sec-head .sub { margin: 4px 0 0; }

table.lb { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
table.lb th, table.lb td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
table.lb th { background: #12141d; color: var(--dim); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
table.lb tr:last-child td { border-bottom: 0; }
table.lb tbody tr { cursor: pointer; }
table.lb tbody tr:hover td { background: #1b1e2b; }
table.lb .r { text-align: right; }
table.lb .muted { color: var(--dim); }
table.lb .big { font-weight: 800; font-size: 16px; }

.how-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 860px) { .how-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .how-grid { grid-template-columns: 1fr; } }
.how-card { background: var(--panel); border: 1px solid var(--line); border-top: 2px solid var(--dot, var(--gold)); border-radius: 10px; padding: 16px; }
.how-card .how-t { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.how-card .how-t .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--dot, var(--gold)); display: inline-block; }
.how-card p { color: var(--dim); font-size: 13px; margin: 0; line-height: 1.5; }

/* etiqueta "Alpha Test" bajo el logotipo (sin mover el logo) */
.brand-wrap { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; line-height: 1; }
.brand-alpha {
    align-self: flex-start;
    font: 800 9px/1 "Segoe UI", system-ui, sans-serif; letter-spacing: 2px; text-transform: uppercase;
    color: #fff; background: linear-gradient(#ef8a3c, #d8531f);
    padding: 2px 7px; border-radius: 4px;
}

.updateform { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

textarea.export {
    width: 100%; min-height: 130px; background: #0b0c11; color: #cfe3ff;
    border: 1px solid var(--line); border-radius: 8px; padding: 10px;
    font-family: Consolas, "Courier New", monospace; font-size: 12px; resize: vertical;
}
.ok-msg { color: var(--green); font-weight: 600; }
.err-msg { color: var(--red); font-weight: 600; }

/* consentimiento del form de la Alpha */
.aj-consent { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
    font-size: 13px; color: rgba(255, 255, 255, .85); }
.aj-consent a { color: #ffe9a8; }

/* aviso de cookies */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
    display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap;
    padding: 12px 20px; background: #14151d; border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .45); font-size: 14px; color: var(--text); }
.cookie-bar .btn { padding: 7px 18px; }

/* página 404 */
.notfound { text-align: center; padding: 50px 0 30px; }
.notfound h1 { font-size: 34px; }

.site-foot { border-top: 1px solid var(--line); background: #0c0d12; margin-top: 44px; }
.foot-inner {
    max-width: 1100px; margin: 0 auto; padding: 34px 22px;
    display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 28px;
}
@media (max-width: 760px) { .foot-inner { grid-template-columns: 1fr 1fr; } }
.foot-col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--gold); margin: 0 0 10px; }
.foot-col a { display: block; color: var(--dim); font-size: 14px; padding: 3px 0; }
.foot-col a:hover { color: var(--text); }
.foot-brand .brand { font-size: 18px; }
.foot-brand p { color: var(--dim); font-size: 13px; max-width: 340px; margin: 8px 0 0; line-height: 1.5; }
.foot-bottom { border-top: 1px solid var(--line); text-align: center; color: var(--dim); font-size: 12px; padding: 16px; }