/* Referral page styles — Realm Chronos
   Uses site-global tokens from styles.css. */

.referral-container{
    max-width:1100px;
    margin:0 auto;
    padding:140px 24px 64px;  /* clears topbar + navbar */
}

.referral-hero{text-align:center;margin-bottom:64px}
.referral-hero h1{
    font-family:'Cinzel',serif;
    font-size:clamp(2.2rem, 5.5vw, 3.6rem);
    margin:0 0 14px;
    letter-spacing:3px;
    text-transform:uppercase;
    background:linear-gradient(180deg, #fff7e3 0%, var(--gold-bright) 50%, var(--gold) 100%);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    filter:drop-shadow(0 4px 20px rgba(201,161,78,.3));
}
.hero-sub{color:var(--text-dim);margin:0 0 40px;font-size:1.1rem;letter-spacing:.3px;max-width:680px;margin-left:auto;margin-right:auto}

.hero-rewards{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:16px;
    max-width:820px;
    margin:0 auto;
}
@media (max-width:720px){.hero-rewards{grid-template-columns:1fr}}

.reward-card{
    padding:28px 22px;
    background:var(--bg-glass);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    text-align:center;
    transition:all var(--t);
    position:relative;
    overflow:hidden;
}
.reward-card::before{
    content:"";position:absolute;top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
    opacity:.5;
}
.reward-card:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--shadow), var(--shadow-gold)}
.reward-card.xp::before{background:linear-gradient(90deg, transparent 0%, var(--aurora-soft) 50%, transparent 100%)}
.reward-card.xp{border-color:rgba(134,198,204,.3)}
.reward-card.xp:hover{border-color:var(--aurora-soft)}
.reward-icon{font-size:2.5rem;margin-bottom:12px;color:var(--gold-bright);filter:drop-shadow(0 0 14px rgba(201,161,78,.35))}
.reward-amount{
    font-family:'Cinzel',serif;
    font-size:2.4rem;
    font-weight:700;
    color:var(--gold-bright);
    letter-spacing:1px;
}
.reward-card.xp .reward-amount{color:var(--aurora-soft)}
.reward-amount small{font-size:.5em;opacity:.7;margin-left:2px}
.reward-label{margin-top:8px;font-weight:600;color:var(--text-bright);font-family:'Cinzel',serif;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase}
.reward-sub{margin-top:4px;color:var(--text-dim);font-size:.82rem}

.referral-cta{
    background:var(--bg-glass);
    border:1px solid var(--line-strong);
    border-radius:var(--radius-lg);
    padding:32px;
    margin-bottom:48px;
    text-align:center;
    position:relative;
}
.referral-cta::before{
    content:"";position:absolute;top:0;left:50%;
    transform:translateX(-50%);
    width:80%;height:1px;
    background:linear-gradient(90deg, transparent 0%, var(--gold) 50%, transparent 100%);
}
.referral-cta h2{
    font-family:'Cinzel',serif;
    margin:0 0 22px;
    color:var(--gold-bright);
    font-size:1.4rem;
    letter-spacing:2px;
    text-transform:uppercase;
}
.how-list{text-align:left;max-width:600px;margin:0 auto 24px;line-height:1.85;color:var(--text);counter-reset:howstep}
.how-list li{position:relative;padding-left:36px;margin-bottom:8px}
.how-list li::before{
    counter-increment:howstep;
    content:counter(howstep);
    position:absolute;left:0;top:0;
    width:24px;height:24px;
    background:linear-gradient(180deg, var(--gold-bright) 0%, var(--gold-2) 100%);
    color:#1a1409;
    border-radius:50%;
    font-family:'Cinzel',serif;
    font-weight:700;
    font-size:.85rem;
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 8px rgba(201,161,78,.3);
}
.how-list code{
    background:rgba(0,0,0,.4);
    padding:2px 8px;
    border-radius:3px;
    font-family:'Courier New',monospace;
    color:var(--gold-bright);
    border:1px dashed var(--line-strong);
    font-size:.9em;
}

.referral-stats{margin-bottom:48px}
.referral-stats h2,
.referral-top h2,
.referral-faq h2{
    font-family:'Cinzel',serif;
    color:var(--gold-bright);
    font-size:1.4rem;
    margin:0 0 22px;
    text-align:center;
    letter-spacing:2px;
    text-transform:uppercase;
}
.stats-row{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
}
@media (max-width:640px){.stats-row{grid-template-columns:repeat(2,1fr)}}
.stat-block{
    background:var(--bg-glass);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    padding:20px;
    text-align:center;
    transition:all var(--t);
}
.stat-block:hover{border-color:var(--line-strong);transform:translateY(-2px)}
.stat-num{
    font-family:'Cinzel',serif;
    font-size:2rem;
    font-weight:700;
    color:var(--gold-bright);
    line-height:1;
}
.stat-lbl{color:var(--text-dim);font-size:.8rem;margin-top:6px;letter-spacing:.3px}

.referral-top{margin-bottom:48px}
.top-list{
    background:var(--bg-glass);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    overflow:hidden;
}
.top-row{
    display:grid;
    grid-template-columns:40px 1fr auto auto;
    gap:16px;
    padding:13px 22px;
    border-bottom:1px solid var(--line);
    align-items:center;
    transition:background var(--t);
}
.top-row:hover{background:rgba(201,161,78,.04)}
.top-row:last-child{border-bottom:none}
.top-row:nth-child(1) .top-rank{color:#ffd700;text-shadow:0 0 8px rgba(255,215,0,.5)}
.top-row:nth-child(2) .top-rank{color:#d4d4d4}
.top-row:nth-child(3) .top-rank{color:#cd7f32}
.top-rank{font-family:'Cinzel',serif;font-size:1.3rem;font-weight:700;color:var(--text-mute)}
.top-name{font-weight:600;color:var(--text-bright)}
.top-count{color:var(--text-dim);font-size:.88rem}
.top-completed{color:var(--ok);font-weight:700;font-family:'Cinzel',serif}
.top-empty{padding:30px;color:var(--text-mute);text-align:center;font-style:italic}

.referral-faq details{
    background:var(--bg-glass);
    border:1px solid var(--line);
    border-radius:var(--radius-lg);
    margin-bottom:8px;
    padding:14px 22px;
    transition:border-color var(--t);
}
.referral-faq summary{
    cursor:pointer;
    font-weight:600;
    color:var(--text);
    font-family:'Cinzel',serif;
    letter-spacing:.5px;
    list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:14px;
}
.referral-faq summary::-webkit-details-marker{display:none}
.referral-faq summary::after{
    content:"+";
    color:var(--gold);
    font-size:1.4rem;
    transition:transform var(--t);
    flex-shrink:0;
}
.referral-faq summary:hover{color:var(--gold-bright)}
.referral-faq details[open]{border-color:var(--gold-deep)}
.referral-faq details[open] summary{color:var(--gold-bright)}
.referral-faq details[open] summary::after{transform:rotate(45deg)}
.referral-faq details p{margin:12px 0 0;color:var(--text-dim);line-height:1.6}