/* Eclipse Dominion - Light, Dark, and Paradox theme */

:root{
  --void:#050611;
  --night:#0b1020;
  --panel:#101729;
  --panel-2:#141d32;
  --light:#f7f3df;
  --light-soft:#d8cfa7;
  --gold:#d8b767;
  --solar:#f3d36b;
  --aether:#9fd8ff;
  --umbra:#8b72ff;
  --abyss:#d76bff;
  --muted:#aeb8ca;
  --line:rgba(216,183,103,.25);
  --shadow:0 20px 60px rgba(0,0,0,.42);
  --radius:8px;
  --max:1120px;
}

*{box-sizing:border-box}
html,body{min-height:100%;overflow-x:hidden}
body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  color:var(--light);
  font-family:Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height:1.55;
  background:
    radial-gradient(900px 520px at 18% 8%, rgba(159,216,255,.16), transparent 60%),
    radial-gradient(760px 520px at 82% 8%, rgba(139,114,255,.18), transparent 62%),
    linear-gradient(115deg, rgba(248,227,132,.10), transparent 22%, rgba(215,107,255,.10) 78%, transparent),
    var(--void);
}

main{flex:1}
a{color:inherit;text-decoration:none}
img{max-width:100%}
a:hover{color:var(--solar)}
.container{width:min(var(--max), calc(100% - 32px));margin:0 auto}

.topbar{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(5,6,17,.86);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:12px 0;
}
.brand{display:flex;align-items:center;gap:12px;min-width:230px}
.brand-mark{
  display:grid;
  place-items:center;
  width:46px;
  aspect-ratio:1;
  border:1px solid rgba(216,183,103,.55);
  border-radius:50%;
  overflow:hidden;
  background:#050611;
  box-shadow:0 0 28px rgba(216,183,103,.22);
}
.brand-mark img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.brand h1{
  margin:0;
  font-family:Cinzel, serif;
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.brand small{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.nav ul{list-style:none;display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0;padding:0}
.navlink,.submenu a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:9px 11px;
  border:1px solid rgba(216,183,103,.22);
  border-radius:var(--radius);
  background:rgba(255,255,255,.035);
  color:var(--light);
  font-family:Cinzel, serif;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  white-space:nowrap;
}
.navlink:hover,.navlink:focus,.submenu a:hover,.submenu a:focus{
  outline:none;
  border-color:rgba(216,183,103,.58);
  background:rgba(216,183,103,.10);
}
.dropdown{position:relative}
.submenu{
  position:absolute;
  top:44px;
  left:0;
  min-width:240px;
  display:none;
  padding:8px;
  background:rgba(8,11,22,.97);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.dropdown:hover .submenu,.dropdown:focus-within .submenu{display:grid;gap:6px}

.hero{
  min-height:calc(100vh - 71px);
  display:flex;
  align-items:center;
  padding:70px 0 54px;
  border-bottom:1px solid rgba(216,183,103,.16);
  background:
    linear-gradient(90deg, rgba(5,6,17,.82) 0%, rgba(5,6,17,.52) 38%, rgba(5,6,17,.38) 62%, rgba(5,6,17,.80) 100%),
    linear-gradient(180deg, rgba(5,6,17,.22) 0%, rgba(5,6,17,.38) 55%, rgba(5,6,17,.92) 100%),
    url("../img/eclipse-dominion-home.c56ce4e3b67e.png") center center / cover no-repeat;
}
.hero .content{max-width:820px}
.hero-kicker{
  margin:0 0 10px;
  color:var(--gold);
  font-family:Cinzel, serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:13px;
}
.hero h2,.pageHeader h2{
  margin:0;
  font-family:Cinzel, serif;
  font-size:clamp(32px, 6vw, 64px);
  line-height:1.02;
  letter-spacing:.035em;
  text-transform:uppercase;
}
.hero p{max-width:72ch;font-size:18px;color:#e6eaf4}
.pageHeader{padding:46px 0 16px}
.pageHeader p{max-width:76ch;color:var(--muted);margin:12px 0 0}

.panel,.card,.rankCard,.tier{
  background:linear-gradient(180deg, rgba(20,29,50,.92), rgba(12,17,31,.94));
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel{margin:18px 0;padding:0;overflow:hidden}
.panel .inner{padding:22px}
.panel h3,.card h3,.tier button{
  font-family:Cinzel, serif;
  letter-spacing:.045em;
  color:var(--solar);
}
.muted{color:var(--muted)}
.grid{display:grid;gap:16px}
.grid.two{grid-template-columns:repeat(2, minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3, minmax(0,1fr))}
.card{padding:18px}
.realm-card.light{border-color:rgba(159,216,255,.45)}
.realm-card.dark{border-color:rgba(139,114,255,.45)}
.realm-card.conflicted{border-color:rgba(216,183,103,.45)}
.realm-label{
  display:inline-flex;
  margin-bottom:8px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.ctaRow{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:10px 13px;
  border:1px solid rgba(216,183,103,.35);
  border-radius:var(--radius);
  background:rgba(216,183,103,.10);
  color:var(--light);
  font-family:Cinzel, serif;
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
}
.btn:hover{background:rgba(216,183,103,.18);border-color:rgba(216,183,103,.62)}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.accordion{display:grid;gap:10px;margin-top:14px}
.tier{overflow:hidden}
.tier button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border:0;
  background:rgba(255,255,255,.03);
  color:var(--solar);
  cursor:pointer;
}
.tier .content{display:none;padding:16px;border-top:1px solid rgba(216,183,103,.16)}
.tier.open .content{display:block}
.divisionTitle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.divisionTitle img{
  width:34px;
  height:34px;
  object-fit:contain;
  flex:0 0 auto;
}
.divisionTitle span{
  min-width:0;
  overflow-wrap:anywhere;
  text-align:left;
}
.rankGrid{display:grid;grid-template-columns:repeat(auto-fit, minmax(190px,1fr));gap:10px}
.rankCard{padding:12px}
.rankName{font-weight:700}
.rankMeta{color:var(--muted);font-size:13px;margin-top:5px}
.rankMembers{display:grid;gap:8px;margin-top:10px}
.rankMember{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:6px 8px;
  border:1px solid rgba(216,183,103,.16);
  border-radius:var(--radius);
  background:rgba(255,255,255,.035);
}
.rankMember img{
  width:42px;
  height:48px;
  object-fit:cover;
  object-position:center top;
  border-radius:6px;
  background:rgba(5,6,17,.8);
}
.rankMember strong{display:block;color:var(--light)}
.rankMember span{display:block;color:var(--muted);font-size:12px}
.metaBadge{
  display:inline-grid;
  gap:2px;
  margin:8px 0;
  padding:8px 10px;
  border:1px solid rgba(159,216,255,.28);
  border-radius:var(--radius);
  background:linear-gradient(90deg, rgba(159,216,255,.08), rgba(139,114,255,.10));
}
.metaBadge span{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.metaBadge strong{color:var(--solar)}
.teamBadge{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:10px 0;
  padding:9px 11px;
  border:1px solid rgba(159,216,255,.28);
  border-radius:var(--radius);
  background:linear-gradient(90deg, rgba(159,216,255,.08), rgba(139,114,255,.10));
}
.teamBadge img{
  width:44px;
  height:44px;
  object-fit:contain;
  flex:0 0 auto;
}
.teamBadge span{
  display:block;
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.teamBadge strong{
  display:block;
  color:var(--solar);
}
.teamLeaders{
  display:grid;
  gap:7px;
  margin:10px 0 12px;
}
.teamLeaders div{
  display:grid;
  gap:2px;
}
.teamLeaders span{
  color:var(--muted);
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.teamLeaders strong{
  color:var(--light);
}
.sponsorLevelHeader{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
.sponsorLevelHeader img{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
}
.sponsorLevelHeader h3{
  margin-top:0;
}
.searchRow{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.searchRow input,.portal-input{
  width:min(420px,100%);
  padding:11px 12px;
  border-radius:var(--radius);
  border:1px solid rgba(216,183,103,.28);
  background:rgba(4,6,14,.7);
  color:var(--light);
}
.portal-table-wrap{overflow:auto;-webkit-overflow-scrolling:touch}
.portal-table{width:100%;min-width:640px;border-collapse:collapse}
.portal-table th,.portal-table td{padding:11px;border-bottom:1px solid rgba(216,183,103,.16);text-align:left}
.portal-table th{color:var(--solar);font-family:Cinzel, serif;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.logo{width:54px;height:54px;object-fit:contain;float:right;margin-left:12px}
.logoSmall{width:42px;height:42px;object-fit:contain;float:right;margin-left:10px}

.footer{margin-top:34px;border-top:1px solid var(--line);padding:24px 0;color:var(--muted);background:rgba(5,6,17,.78)}
.footer p{margin:0 0 8px}

@media (max-width: 1100px){
  :root{--max:940px}
  .topbar .container{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:
      "brand account"
      "nav nav";
    align-items:center;
    gap:12px;
  }
  .brand{grid-area:brand}
  .nav{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    padding-bottom:2px;
  }
  .topbar .nav{grid-area:nav}
  .nav ul{
    width:100%;
    display:flex;
    flex-wrap:nowrap;
    align-items:stretch;
    justify-content:flex-start;
  }
  .nav > ul > li{flex:0 0 auto}
  .nav > ul > li > .navlink{
    justify-content:center;
    min-width:128px;
  }
  .topbar .right{
    grid-area:account;
    width:auto;
    display:flex!important;
    gap:10px;
    align-items:center;
    justify-content:flex-end;
  }
  .topbar .right .pill,
  .topbar .right .navlink{
    width:auto;
    max-width:260px;
    justify-content:center;
  }
  .topbar .right .pill{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dropdown{position:static}
  .submenu{
    position:static;
    width:100%;
    min-width:220px;
    margin-top:6px;
  }
}

@media (max-width: 780px){
  .container{width:min(100% - 24px, var(--max))}
  .brand{min-width:0}
  .brand h1{font-size:16px}
  .brand small{font-size:11px}
  .brand-mark{width:42px}
  .topbar .container{
    grid-template-columns:1fr;
    grid-template-areas:
      "brand"
      "nav"
      "account";
  }
  .nav{
    overflow:visible;
    padding-bottom:0;
  }
  .nav ul{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .dropdown{position:static}
  .submenu{
    position:static;
    width:100%;
    min-width:0;
  }
  .grid.two,.grid.three{grid-template-columns:1fr}
  .hero{
    min-height:auto;
    padding:50px 0 42px;
    background-position:center top;
  }
  .hero h2,.pageHeader h2{font-size:clamp(30px, 11vw, 46px)}
  .hero p{font-size:16px}
  .pageHeader{padding:34px 0 12px}
  .panel{margin:14px 0}
  .panel .inner{padding:16px}
  .card{padding:15px}
  .tabs{
    display:grid;
    grid-template-columns:1fr;
  }
  .btn,
  .nav > ul > li > .navlink,
  .submenu a{
    width:100%;
    justify-content:center;
    white-space:normal;
    text-align:center;
  }
  .topbar .right{
    grid-template-columns:1fr 1fr;
    width:100%;
    display:grid!important;
  }
  .topbar .right .pill,
  .topbar .right .navlink{
    width:100%;
    max-width:none;
  }
  .ctaRow{display:grid;grid-template-columns:1fr}
  .rankGrid{grid-template-columns:1fr}
  .rankMember{align-items:flex-start}
  .searchRow input,.portal-input{width:100%;min-width:0}
  .footer{font-size:13px}
}

@media (max-width: 480px){
  .container{width:min(100% - 18px, var(--max))}
  .topbar .container{padding:10px 0}
  .brand{gap:10px}
  .brand h1{font-size:14px;letter-spacing:.05em}
  .brand small{display:none}
  .brand-mark{width:38px}
  .nav ul{grid-template-columns:1fr 1fr}
  .nav > ul > li > .navlink,
  .submenu a{min-height:42px;padding:9px 8px;font-size:11px}
  .topbar .right{
    grid-template-columns:1fr;
  }
  .hero{padding:42px 0 34px}
  .hero-kicker{font-size:11px;letter-spacing:.08em}
  .hero h2,.pageHeader h2{font-size:30px}
  .panel .inner{padding:14px}
  .portal-table th,.portal-table td{padding:9px}
  .rankMember img{width:38px;height:44px}
}