/* =========================================================
   CLUB 300 SHOWCASE THEME
   Based on the approved professional blue/purple mockup.
   Static background; no continuous animations.
   ========================================================= */

:root{
    --c3-bg:#020617;
    --c3-bg-deep:#01030b;
    --c3-panel:#060d20;
    --c3-panel-2:#090f25;
    --c3-border:#1f335a;
    --c3-blue:#168bff;
    --c3-blue-bright:#52b8ff;
    --c3-indigo:#4e57ff;
    --c3-violet:#7d2cff;
    --c3-purple:#a82cff;
    --c3-magenta:#d72bb7;
    --c3-text:#f7f8fb;
    --c3-muted:#a7b0c3;
}

/* Kill old animated/background layers without touching functionality. */
body::before,
.particle,
.hero,
.hero::before{
    display:none !important;
    animation:none !important;
}

html,body{
    background:var(--c3-bg-deep) !important;
}

body{
    color:var(--c3-text) !important;
    background:
        radial-gradient(900px 600px at 11% 36%,rgba(0,104,255,.14),transparent 62%),
        radial-gradient(800px 560px at 89% 35%,rgba(154,0,255,.12),transparent 62%),
        linear-gradient(180deg,#030719 0%,#020617 58%,#01030b 100%) !important;
    background-attachment:scroll !important;
}

/* ================= HEADER ================= */
.site-nav{
    background:rgba(2,6,20,.96) !important;
    border-bottom:1px solid rgba(80,104,165,.28) !important;
    box-shadow:0 10px 28px rgba(0,0,0,.30) !important;
    backdrop-filter:none !important;
}

.site-nav-inner{
    min-height:84px !important;
}

.club300-brand{
    display:inline-flex;
    align-items:center;
    gap:11px;
    white-space:nowrap;
    color:#fff;
}

.club300-brand-crown{
    color:#fff;
    font-size:26px;
    line-height:1;
    text-shadow:0 0 12px rgba(82,184,255,.22);
}

.club300-brand-name{
    display:inline-flex;
    align-items:baseline;
    gap:7px;
    font-size:23px;
    font-weight:1000;
    letter-spacing:-.035em;
}

.club300-brand-name strong{
    color:#f6f7fb;
}

.club300-brand-name b{
    color:transparent;
    background:linear-gradient(90deg,#7834ff,#d52db6);
    -webkit-background-clip:text;
    background-clip:text;
}

.site-nav-links{
    gap:12px !important;
}

.site-nav-links a{
    min-height:46px;
    padding:0 16px !important;
    display:inline-flex !important;
    align-items:center;
    gap:9px;
    border:1px solid transparent !important;
    border-radius:10px !important;
    color:#e5e7ee !important;
    background:transparent !important;
    font-size:13px !important;
    font-weight:800 !important;
}

.site-nav-links a:hover{
    color:#fff !important;
    border-color:rgba(75,124,255,.28) !important;
    background:rgba(17,35,78,.35) !important;
}

.site-nav-links a.active{
    color:#fff !important;
    border-color:transparent !important;
    background:
        linear-gradient(#08122b,#08122b) padding-box,
        linear-gradient(110deg,#168bff,#6d3bff 58%,#d72bb7) border-box !important;
    box-shadow:
        0 0 18px rgba(22,139,255,.09),
        inset 0 1px 0 rgba(255,255,255,.04) !important;
}

.nav-icon{
    color:#4eaaff !important;
}

/* ================= HERO ================= */
.club300-home{
    min-height:0;
}

.club300-hero{
    position:relative;
    overflow:hidden;
    padding:42px 0 34px;
}

.club300-hero-inner{
    position:relative;
    z-index:2;
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
    text-align:center;
}

.club300-kicker{
    color:#d8dbe5;
    font-size:11px;
    font-weight:850;
    letter-spacing:.38em;
    text-indent:.38em;
}

.club300-crown-row{
    width:min(330px,60%);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:16px;
    margin:13px auto 8px;
}

.club300-crown-row i{
    height:1px;
}

.club300-crown-row i:first-child{
    background:linear-gradient(90deg,transparent,#1b9fff);
}

.club300-crown-row i:last-child{
    background:linear-gradient(90deg,#9b2cff,transparent);
}

.club300-crown-row span{
    color:#fff;
    font-size:34px;
    line-height:1;
    text-shadow:0 0 15px rgba(121,88,255,.28);
}

.club300-title{
    margin:0;
    padding:0 18px 8px;
    overflow:visible;
    color:transparent;
    background:
        linear-gradient(95deg,
            #59c2ff 0%,
            #1a83ff 28%,
            #354fff 47%,
            #742cf2 68%,
            #a72ae3 100%);
    -webkit-background-clip:text;
    background-clip:text;
    font-size:clamp(74px,11.2vw,156px);
    line-height:.92;
    font-weight:1000;
    letter-spacing:-.065em;
    white-space:nowrap;
    filter:
        drop-shadow(0 16px 30px rgba(0,0,0,.50))
        drop-shadow(0 0 14px rgba(50,96,255,.08));
}

.club300-tagline{
    max-width:780px;
    margin:18px auto 0;
    color:#f3f4f8;
    font-size:clamp(29px,4vw,46px);
    line-height:1.08;
    font-weight:900;
    letter-spacing:-.035em;
}

.club300-tagline a{
    color:transparent;
    background:linear-gradient(90deg,#208cff,#7c3bff 55%,#d62cb8);
    -webkit-background-clip:text;
    background-clip:text;
    text-decoration:none;
}

.club300-copy{
    max-width:800px;
    margin:20px auto 0;
    color:#b3bbca;
    font-size:clamp(15px,1.65vw,18px);
    line-height:1.65;
}

.club300-copy strong{
    color:transparent;
    background:linear-gradient(90deg,#258dff,#6f49ff 60%,#a930de);
    -webkit-background-clip:text;
    background-clip:text;
}

.club300-divider{
    width:min(610px,74%);
    display:grid;
    grid-template-columns:1fr 10px 1fr;
    align-items:center;
    gap:12px;
    margin:18px auto;
}

.club300-divider span{
    height:1px;
    background:#253350;
}

.club300-divider i{
    width:9px;
    height:9px;
    margin:auto;
    transform:rotate(45deg);
    border:1px solid #5d68ff;
    background:#12224f;
    box-shadow:0 0 9px rgba(94,105,255,.14);
}

/* ================= DISCLAIMER ================= */
.club300-disclaimer{
    width:min(860px,100%);
    display:grid;
    grid-template-columns:54px minmax(0,1fr);
    align-items:center;
    gap:17px;
    margin:0 auto 20px;
    padding:16px 20px;
    border:1px solid rgba(52,75,127,.58);
    border-radius:12px;
    background:
        linear-gradient(180deg,rgba(6,13,33,.94),rgba(4,10,27,.96));
    text-align:left;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

.club300-info-icon{
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:2px solid #4557ff;
    border-radius:50%;
    color:#7582ff;
    font-family:Georgia,serif;
    font-size:26px;
    font-weight:700;
}

.club300-disclaimer p{
    margin:0;
    color:#b2b9c9;
    font-size:12px;
    line-height:1.55;
}

.club300-disclaimer strong{
    color:#daddE6;
}

/* ================= STAT CARDS ================= */
.club300-stats{
    width:min(950px,100%);
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin:0 auto;
}

.club300-stat{
    min-height:205px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:24px 18px;
    position:relative;
    overflow:hidden;
    border:1px solid rgba(49,68,113,.64);
    border-radius:13px;
    background:
        radial-gradient(circle at 50% 15%,rgba(62,70,190,.08),transparent 42%),
        linear-gradient(180deg,rgba(7,14,34,.98),rgba(4,10,26,.98));
    box-shadow:
        0 16px 35px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025);
}

.club300-stat::before{
    content:"";
    position:absolute;
    left:0;
    top:18%;
    bottom:18%;
    width:1px;
    opacity:.85;
}

.stat-members::before{
    background:linear-gradient(180deg,transparent,#168bff,transparent);
}

.stat-category::before{
    background:linear-gradient(180deg,transparent,#6d3bff,transparent);
}

.stat-status::before{
    background:linear-gradient(180deg,transparent,#d72bb7,transparent);
}

.club300-stat-icon{
    width:60px;
    height:60px;
    display:grid;
    place-items:center;
    margin-bottom:12px;
    border:1px solid rgba(67,83,172,.60);
    border-radius:50%;
    color:#5369ff;
    background:#081128;
    font-size:25px;
}

.stat-category .club300-stat-icon{
    color:#7b40ff;
    border-color:rgba(105,61,210,.68);
}

.stat-status .club300-stat-icon{
    color:#dc45c8;
    border-color:rgba(203,56,176,.65);
}

.club300-stat strong{
    display:block;
    font-size:45px;
    line-height:1;
    font-weight:950;
    letter-spacing:-.035em;
    color:transparent;
    -webkit-background-clip:text;
    background-clip:text;
}

.stat-members strong{
    background-image:linear-gradient(180deg,#398dff,#285eea);
}

.stat-category strong{
    background-image:linear-gradient(180deg,#8852ff,#5f36e8);
}

.stat-status strong{
    background-image:linear-gradient(180deg,#ee65d8,#b53fb4);
}

.club300-stat span{
    margin-top:14px;
    color:#e5e7ed;
    font-size:10px;
    font-weight:800;
    letter-spacing:.22em;
}

/* ================= SIDE GEOMETRY ================= */
.club300-side{
    position:absolute;
    top:84px;
    bottom:30px;
    width:210px;
    pointer-events:none;
    opacity:.92;
}

.club300-side span{
    position:absolute;
    top:50%;
    width:150px;
    height:150px;
    border-top:1px solid;
    border-right:1px solid;
}

.club300-side-left{
    left:-62px;
}

.club300-side-left span{
    left:0;
    transform:translateY(-50%) rotate(45deg);
    border-color:rgba(22,139,255,.72);
}

.club300-side-left span:nth-child(2){
    left:34px;
    width:124px;
    height:124px;
    border-color:rgba(22,139,255,.40);
}

.club300-side-left span:nth-child(3){
    left:68px;
    width:98px;
    height:98px;
    border-color:rgba(22,139,255,.22);
}

.club300-side-right{
    right:-62px;
}

.club300-side-right span{
    right:0;
    transform:translateY(-50%) rotate(225deg);
    border-color:rgba(180,44,255,.72);
}

.club300-side-right span:nth-child(2){
    right:34px;
    width:124px;
    height:124px;
    border-color:rgba(180,44,255,.40);
}

.club300-side-right span:nth-child(3){
    right:68px;
    width:98px;
    height:98px;
    border-color:rgba(180,44,255,.22);
}

/* ================= FOOTER ================= */
.footer-inner{
    border-color:rgba(52,72,112,.28) !important;
    color:#9ba4b7 !important;
}

.footer-inner a{
    color:#5b75ff !important;
}

/* ================= INNER PUBLIC PAGES ================= */
.kicker{
    color:#7f5cff !important;
}

.inner-hero h1,
.monopoly-hero h1{
    color:transparent !important;
    background:linear-gradient(95deg,#46b9ff,#3d65ff 45%,#7a35ef 74%,#bd2acb) !important;
    -webkit-background-clip:text !important;
    background-clip:text !important;
}

.member-card,
.roster-panel,
.roster-row,
.perk-public-card,
.mono-rule,
.page-button{
    border-color:rgba(48,69,117,.58) !important;
    background:
        radial-gradient(circle at 10% 15%,rgba(34,91,205,.045),transparent 40%),
        linear-gradient(180deg,rgba(7,15,36,.98),rgba(4,10,27,.98)) !important;
    box-shadow:
        0 14px 32px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.02) !important;
}

/* Static presentation + performance */
*,*::before,*::after{
    animation:none !important;
}

.roster-row,
.perk-public-card,
.mono-rule{
    content-visibility:auto;
    contain-intrinsic-size:120px;
}

@media(max-width:1000px){
    .club300-side{
        opacity:.42;
        width:140px;
    }
}

@media(max-width:820px){
    .club300-hero{
        padding-top:26px;
    }

    .club300-title{
        font-size:clamp(58px,13.8vw,108px);
        padding-inline:4px;
    }

    .club300-stats{
        grid-template-columns:1fr;
        max-width:520px;
    }

    .club300-stat{
        min-height:150px;
    }

    .club300-side{
        display:none;
    }
}

@media(max-width:560px){
    .club300-hero-inner{
        width:min(100% - 20px,1120px);
    }

    .club300-brand-name{
        font-size:19px;
    }

    .club300-title{
        font-size:clamp(46px,13vw,74px);
        letter-spacing:-.06em;
    }

    .club300-tagline{
        font-size:clamp(24px,8vw,34px);
    }

    .club300-disclaimer{
        grid-template-columns:1fr;
        text-align:center;
    }

    .club300-info-icon{
        margin:auto;
    }
}


/* FULL-SITE PUBLIC COVERAGE */
.inner-hero,.roster-hero,.perks-public-hero,.monopoly-hero{
  background:transparent!important;
}
.inner-hero p,.roster-subtitle,.perks-public-hero p,.monopoly-hero p{
  color:#a7b0c3!important;
}
.member-card h2,.roster-name,.perk-public-copy h2,.mono-rule-copy h2{
  color:#f5f7fb!important;
}
.member-card .role,.member-role,.perk-public-copy p,.mono-rule-copy p{
  color:#9fa9bd!important;
}
.roster-panel,.perks-public-wrap,.monopoly-list{
  position:relative;
}
.roster-row:hover,.perk-public-card:hover,.mono-rule:hover{
  border-color:rgba(92,91,255,.72)!important;
  transform:translateY(-2px)!important;
}
.perk-public-icon,.mono-rule-number{
  color:#fff!important;
  background:linear-gradient(135deg,#168bff,#6d3bff 58%,#d72bb7)!important;
  box-shadow:none!important;
}
.monopoly-search{
  border-color:rgba(52,75,127,.58)!important;
  background:#061028!important;
  color:#f5f7fb!important;
}
.monopoly-search:focus{
  border-color:#5b5cff!important;
  box-shadow:0 0 0 3px rgba(91,92,255,.10)!important;
}
.monopoly-search-icon{color:#6f55ff!important}
.page-button,.pagination a{
  color:#e8ebf2!important;
  border-color:rgba(52,75,127,.58)!important;
  background:#071128!important;
}
.page-button.active,.pagination a.active{
  color:#fff!important;
  background:linear-gradient(110deg,#157fe8,#6539e1 60%,#bc299f)!important;
  border-color:transparent!important;
}


/* ===== FOUNDERS / ROSTER FINAL OVERRIDES ===== */
.member-card .crown{color:#8b5cff!important}
.member-card .member-label{color:#7e76ff!important}
.member-card .avatar{border-color:#5367ff!important}
.member-card .twitch-link{border-color:rgba(89,78,255,.44)!important}
.member-card .twitch-arrow{color:#826cff!important}
.roster-count{color:#7b73ff!important}
.roster-avatar{border-color:#5367ff!important}
.roster-badge,.roster-badge.founder-badge,.founder-badge{
    color:#fff!important;
    border-color:transparent!important;
    background:linear-gradient(110deg,#285edc,#6444e8 60%,#913fc5)!important;
    box-shadow:0 0 20px rgba(86,77,220,.12)!important;
}


/* =========================================================
   PAGE TITLE WHITE EDGE
   Subtle crisp outline to lift major headings from background.
   ========================================================= */

/* Main CLUB 300% hero */
.club300-title{
    -webkit-text-stroke:2px rgba(255,255,255,.72);
    paint-order:stroke fill;
    filter:
        drop-shadow(0 16px 30px rgba(0,0,0,.50))
        drop-shadow(0 0 8px rgba(255,255,255,.10))
        drop-shadow(0 0 14px rgba(50,96,255,.08));
}

/* Main public page headings */
.inner-hero h1,
.monopoly-hero h1,
.roster-hero h1,
.perks-public-hero h1{
    -webkit-text-stroke:2px rgba(255,255,255,.68)!important;
    paint-order:stroke fill;
    filter:
        drop-shadow(0 4px 10px rgba(0,0,0,.40))
        drop-shadow(0 0 7px rgba(255,255,255,.08));
}

/* Admin page headings */
.admin-hero h1,
.admin-page-title{
    -webkit-text-stroke:.7px rgba(255,255,255,.48)!important;
    paint-order:stroke fill;
}


/* ===== CLIPS PAGE ===== */
.clips-page{padding-bottom:44px}
.clips-hero p{max-width:620px;margin:14px auto 0;color:#a7b0c3;font-size:16px}
.clips-wrap{padding-top:8px}
.clips-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.clip-card{overflow:hidden;border:1px solid rgba(48,69,117,.68);border-radius:16px;background:linear-gradient(180deg,rgba(7,15,36,.99),rgba(4,10,27,.99));box-shadow:0 16px 38px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.02)}
.clip-player{position:relative;width:100%;background:#000;border-bottom:1px solid rgba(48,69,117,.55)}
.clip-player iframe{display:block;width:100%;height:315px;border:0;background:#000}
.clip-copy{padding:17px 18px 19px}
.clip-label{color:#7d74ff;font-size:8px;font-weight:950;letter-spacing:.19em}
.clip-copy h2{margin:6px 0 0;color:#f6f7fb;font-size:20px;line-height:1.2}
.clip-copy p{margin:8px 0 0;color:#9fa9bd;font-size:13px;line-height:1.55}
.clips-empty{max-width:650px;margin:22px auto 0;padding:36px 24px;text-align:center;border:1px dashed rgba(76,96,255,.42);border-radius:16px;background:rgba(7,15,36,.76)}
.clips-empty span{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 12px;border:1px solid rgba(91,79,255,.55);border-radius:50%;color:#8e71ff;background:#071128;font-size:20px}
.clips-empty h2{margin:0;color:#f6f7fb}.clips-empty p{margin:7px 0 0;color:#9fa9bd}
@media(max-width:900px){.clips-grid{grid-template-columns:1fr}.clip-player iframe{height:360px}}
@media(max-width:560px){.clip-player iframe{height:300px}.clip-copy{padding:15px}}


/* =========================================================
   CLIPS TITLE — TWO-LAYER DESCENDER FIX
   White outline and gradient fill are rendered separately.
   This prevents the lowercase "p" fill from being clipped.
   ========================================================= */
.clips-hero .clips-title{
    position:relative!important;
    display:inline-block!important;
    margin:0!important;
    padding:.02em .08em .12em!important;
    overflow:visible!important;
    color:transparent!important;
    background:none!important;
    -webkit-text-stroke:0!important;
    line-height:1.08!important;
    font-size:clamp(50px,9vw,96px)!important;
    letter-spacing:-.055em!important;
    vertical-align:top;
}

.clips-title-outline,
.clips-title-fill{
    display:block;
    font:inherit;
    line-height:inherit;
    letter-spacing:inherit;
    white-space:nowrap;
}

.clips-title-outline{
    position:absolute;
    inset:0;
    z-index:0;
    padding:.02em .08em .12em;
    color:transparent;
    -webkit-text-stroke:2px rgba(255,255,255,.72);
    paint-order:stroke fill;
    pointer-events:none;
    filter:
        drop-shadow(0 4px 10px rgba(0,0,0,.40))
        drop-shadow(0 0 7px rgba(255,255,255,.08));
}

.clips-title-fill{
    position:relative;
    z-index:1;
    padding:.02em .08em .12em;
    color:transparent;
    background:linear-gradient(95deg,#46b9ff,#3d65ff 45%,#7a35ef 74%,#bd2acb);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* Do not let the generic inner-page title rule reapply stroke/gradient
   to the Clips title container itself. */
.inner-hero.clips-hero .clips-title{
    background:none!important;
    -webkit-background-clip:border-box!important;
    background-clip:border-box!important;
    -webkit-text-stroke:0!important;
    filter:none!important;
}


/* =========================================================
   CLIPS HEADING — NORMAL PAGE TITLE FIX
   Uses the exact same H1 markup/style system as other pages.
   Only the line box is made tall enough for lowercase descenders.
   ========================================================= */
.inner-hero.clips-hero h1{
    display:block!important;
    line-height:1.15!important;
    padding-bottom:.10em!important;
    margin-bottom:-.10em!important;
    overflow:visible!important;
}


/* Club 300 image branding */
.club300-brand-images {
    display:flex;
    align-items:center;
    gap:9px;
}
.club300-brand-images .club300-brand-mark {
    display:block;
    width:31px;
    height:31px;
    object-fit:contain;
    flex:0 0 auto;
}
.club300-brand-images .club300-brand-text-image {
    display:block;
    width:104px;
    height:auto;
    object-fit:contain;
}
.club300-logo-row img {
    display:block;
    width:42px;
    height:42px;
    object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(79,147,255,.32));
}
@media (max-width:700px) {
    .club300-brand-images .club300-brand-mark { width:28px; height:28px; }
    .club300-brand-images .club300-brand-text-image { width:92px; }
}