:root {
  --bg:      #e2e6ee;
  --surface: #080f1c;
  --card:    #ffffff;
  --border:  #cbd2dc;
  --grey:    #cfcfd2;
  --border2: #0c4b9f;
  --accent:  #b8caef;
  --accent2: #0a307f;
  --red:     #ff2d2d;
  --blue:    #0096d6;
  --ice:     #b51010;
  --muted:   #374053;
  --text:    #111827;
  --green:   #00c27a;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
  
body{
  background:var(--bg);
  color:var(--text);
  font-family:Helvetica, Arial, sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}
  
.game-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 12px;
}

body::after{
  content:'';
  position:fixed;top:-30%;left:-20%;width:80%;height:80%;
  background:radial-gradient(ellipse,rgba(240,165,0,0.04) 0%,transparent 65%);
  pointer-events:none;z-index:0;
}

.wrap{position:relative;z-index:1;max-width:575px;margin:0 auto;padding:0 16px 80px;}

/* ── HEADER ── */
header{padding:32px 0 0;margin-bottom:0;}

.header-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:0;}

.logo-tag{font-family:'Helvetica',monospace;font-size:13px;letter-spacing:5.5px;color:var(--muted);text-transform:uppercase;margin-bottom:4px;}

.logo-main{font-family:'Bebas Neue',sans-serif;font-size:70px;line-height:0.9;letter-spacing:4px;color:var(--grey);}
.logo-main span{color:var(--ice);}

.logo-sub{font-family:'Helvetica',monospace;font-size:11px;letter-spacing:2.5px;color:var(--muted);margin-top:6px;text-transform:uppercase;}

.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px;padding-top:6px;}

.live-pill{display:flex;align-items:center;gap:7px;background:rgba(255,45,45,0.07);border:1px solid rgba(255,45,45,0.2);padding:5px 12px;border-radius:1px;}

.live-dot{width:7px;height:7px;border-radius:50%;background:var(--red);animation:blink 1.3s ease-in-out infinite;}

@keyframes blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.3;transform:scale(0.7);}}

.live-label{font-family:Helvetica, Arial, sans-serif;font-size:10px;letter-spacing:3px;color:var(--red);}

#clock{font-family:Helvetica, Arial, sans-serif;font-size:10px;color:var(--muted);}

.header-divider{height:1px;background:linear-gradient(to right,var(--accent),transparent 60%);margin:20px 0 0;opacity:0.3;}

/* ── WAITLIST ── */
.waitlist{
  background:linear-gradient(135deg,rgba(240,165,0,0.06) 0%,rgba(240,165,0,0.02) 100%);
  border:1px solid rgba(240,165,0,0.15);border-top:none;
  padding:16px 20px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;
}

.waitlist-copy{flex:1;min-width:180px;}

.waitlist-title{font-family:'Bebas Neue',sans-serif;font-size:18px;letter-spacing:2px;color:var(--ice);margin-bottom:2px;}

.waitlist-desc{font-size:12px;color:var(--muted);font-weight:300;}

.waitlist-form{display:flex;gap:5px;flex:1;min-width:240px;}

.wl-input{
  flex:1;background:rgba(0,0,0,0.4);border:1px solid var(--border2);
  color:var(--text);font-family:Helvetica, Arial, sans-serif;font-size:11px;
  padding:9px 13px;border-radius:1px;outline:none;transition:border-color 0.15s;
}
.wl-input:focus{border-color:var(--accent);}
.wl-input::placeholder{color:var(--muted);}

.wl-btn{
  background:var(--accent);border:none;color:#000;
  font-family:Helvetica, Arial, sans-serif;font-size:10px;font-weight:700;
  letter-spacing:1px;padding:9px 16px;cursor:pointer;border-radius:1px;
  white-space:nowrap;transition:all 0.15s;
}
.wl-btn:hover{background:#ffd166;}
.wl-btn.ok{background:var(--green);color:#fff;pointer-events:none;}

.wl-count{font-family:Helvetica, Arial, sans-serif;font-size:9px;color:var(--muted);align-self:center;white-space:nowrap;}

/* ── SECTION HEADS ── */
.sec-head{display:flex;align-items:center;gap:12px;margin:8px 0;}
.sec-label{font-family:Helvetica, Arial, sans-serif;font-size:8px;letter-spacing:4px;color:var(--muted);white-space:nowrap;text-transform:uppercase;}
.sec-line{flex:1;height:1px;background:var(--border);}
.sec-count{font-family:Helvetica, Arial, sans-serif;font-size:8px;color:var(--accent);}

/* ── GAME CARDS ── */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:2px;
  margin-bottom:6px;overflow:hidden;transition:all 0.18s;animation:fadeUp 0.3s ease both;
}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

.card:hover{border-color:rgba(240,165,0,0.2);transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,0.5);}

.card.frenzy{border-color:rgba(255,45,45,0.3);background:linear-gradient(135deg,rgba(255,45,45,0.04) 0%,var(--card) 55%);}
.card.frenzy:hover{border-color:rgba(255,45,45,0.55);}

.heat-stripe{height:3px;}

.card-body{
  padding:14px 18px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:18px;
}

.team{display:flex;align-items:center;gap:6px;}
.team.away{justify-content:flex-end;}
.team.home{
  justify-content:flex-start;
}

.team-info{
  display:flex;
  align-items:center;
  gap:7px;
}

.team.home .team-info{
  flex-direction:row-reverse;
}

.team-badge{
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:'Bebas Neue',sans-serif;font-size:12px;color:#fff;
  flex-shrink:0;box-shadow:0 2px 10px rgba(0,0,0,0.5);letter-spacing:0.5px;
}

.team-info{
  display:flex;
  align-items:center;
  gap:10px;
}

.team.home .team-info{
  align-items:center;
  flex-direction:row;
}

.team-city{font-size:10px;color:var(--muted);font-weight:300;font-style:italic;}
.team-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:18px;
  letter-spacing:1px;
  color:var(--muted);
  line-height:1;
}
.team-rec{
  font-family:'Bebas Neue',sans-serif;
  font-size:34px;
  line-height:0.9;
  color:var(--ice);
  font-weight:700;
}

.score-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:70px;
}
.score-row{display:flex;align-items:center;gap:8px;}
.score-n{font-family:'Bebas Neue',sans-serif;font-size:48px;line-height:1;color:var(--ice);min-width:26px;text-align:center;}
.score-dash{font-family:'Bebas Neue',sans-serif;font-size:26px;color:var(--border2);margin-top:-3px;}

.game-status{font-family:Helvetica, Arial, sans-serif;font-size:8px;letter-spacing:2px;text-align:center;}
.s-live{color:var(--red);}
.s-final{color:var(--muted);}
.s-pre{color:var(--blue);}

.frenzy-badge{display:flex;align-items:center;gap:4px;font-family:Helvetica, Arial, sans-serif;font-size:7px;color:var(--red);letter-spacing:2px;margin-top:1px;}
.frenzy-dot{width:4px;height:4px;border-radius:50%;background:var(--red);animation:blink 0.9s ease-in-out infinite;}

.pre-time{
  font-family:Helvetica, Arial, sans-serif;
  font-size:12px;
  color:var(--muted);
  letter-spacing:1px;
  text-align:center;
}

.card-foot{border-top:1px solid var(--border);padding:9px 18px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.watch-label{
  font-family:Helvetica, Arial, sans-serif;
  font-size:6px;
  letter-spacing:1.5px;
  color:var(--muted);
  white-space:nowrap;
}

.nets{display:flex;gap:4px;flex-wrap:wrap;flex:1;}

.net{
  display:flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:1px;
  font-family:Helvetica, Arial, sans-serif;
  font-size:4px;
  letter-spacing:0.3px;
  font-weight:200;
  white-space:nowrap;
  text-decoration:none;
  transition:all 0.12s;
  cursor:pointer;
}
.net:hover{transform:translateY(-1px);filter:brightness(1.2);}
.nd{width:4px;height:4px;border-radius:50%;flex-shrink:0;}

.n-espn  {background:rgba(232,0,61,0.1); border:1px solid rgba(232,0,61,0.25); color:#ff5079;}
.n-espn .nd{background:#e8003d;}
.n-sn    {background:rgba(0,61,165,0.12);border:1px solid rgba(0,61,165,0.3);  color:#6b9fff;}
.n-sn .nd{background:#003da5;}
.n-tsn   {background:rgba(0,70,184,0.12);border:1px solid rgba(0,70,184,0.3);  color:#7aafff;}
.n-tsn .nd{background:#0046b8;}
.n-tnt   {background:rgba(155,89,182,0.1);border:1px solid rgba(155,89,182,0.25);color:#c9a8e8;}
.n-tnt .nd{background:#9b59b6;}
.n-abc   {background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);color:#888;}
.n-abc .nd{background:#aaa;}
.n-dazn  {background:rgba(0,180,120,0.08);border:1px solid rgba(0,180,120,0.22);color:#4de0a8;}
.n-dazn .nd{background:#00b478;}
.n-default{background:rgba(0,150,214,0.08);border:1px solid rgba(0,150,214,0.2);color:var(--blue);}
.n-default .nd{background:var(--blue);}

.share-btn{
  font-family:Helvetica, Arial, sans-serif;font-size:8px;letter-spacing:2px;
  color:var(--muted);background:transparent;border:1px solid var(--border2);
  padding:4px 9px;cursor:pointer;border-radius:1px;transition:all 0.12s;white-space:nowrap;
}
.share-btn:hover{color:var(--accent);border-color:var(--accent);}
.share-btn.copied{color:var(--green);border-color:var(--green);}

/* ── STATES ── */
.state-box{
  padding:60px 20px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.state-icon{font-size:36px;opacity:0.25;}

.state-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:22px;
  letter-spacing:3px;
  color:var(--muted);
}

.state-sub{
  font-family:Helvetica, Arial, sans-serif;
  font-size:9px;
  letter-spacing:2px;
  color:var(--muted);
  opacity:0.7;
  max-width:340px;
  line-height:1.8;
}

.state-retry{
  font-family:Helvetica, Arial, sans-serif;
  font-size:9px;
  letter-spacing:2px;
  color:var(--accent);
  background:transparent;
  border:1px solid rgba(240,165,0,0.3);
  padding:8px 16px;
  cursor:pointer;
  border-radius:1px;
  transition:all 0.12s;
  margin-top:4px;
}
.state-retry:hover{background:rgba(240,165,0,0.08);}

/* ── PAGE FOOTER ── */
.page-foot{margin-top:40px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}

.foot-brand{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:3px;color:var(--muted);}
.foot-updated{font-family:Helvetica, Arial, sans-serif;font-size:8px;color:var(--muted);letter-spacing:1px;margin-top:3px;}

.refresh{font-family:Helvetica, Arial, sans-serif;font-size:9px;letter-spacing:2px;color:var(--accent);background:transparent;border:1px solid rgba(240,165,0,0.25);padding:7px 14px;cursor:pointer;border-radius:1px;transition:all 0.12s;}
.refresh:hover{background:rgba(240,165,0,0.08);}
.refresh.spin{opacity:0.35;pointer-events:none;}

.disclosure{margin-top:14px;font-family:Helvetica, Arial, sans-serif;font-size:8px;color:var(--muted);opacity:0.5;line-height:1.8;letter-spacing:0.3px;}

@media(max-width:560px){
  .logo-main{font-size:46px;}
  .card-body{grid-template-columns:1fr auto 1fr;gap:6px;}
  .team-badge{width:30px;height:30px;font-size:9px;}
.team-rec{
  font-size:30px;
}
  .waitlist{flex-direction:column;gap:10px;}
  .controls{gap:5px;}
  .pill{font-size:8px;padding:5px 8px;}
}

/* ── GAME SECTIONS ── */

.bucket {
  margin-bottom: 36px;
}

.bucket-header {
  margin-bottom: 14px;
}

.bucket-title {
  font-family: 'Space Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--muted);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  user-select: none;
}

.bucket-subtitle {
  margin-top: 6px;
  font-size: 11px;
  color: var(--muted);
  opacity: 0.75;
}

.bucket-empty {
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-style: italic;
}

/* ── PICK YOUR FRENZY ── */

.frenzy-selector {
  margin: 28px 0 36px;
}

.frenzy-selector-header {
  margin-bottom: 16px;
}

.frenzy-selector-label {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--muted);
  margin-bottom: 7px;
}

.frenzy-selector-description {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.8;
}

.frenzy-profiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.frenzy-profile {
  appearance: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 18px 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s ease;
  color: var(--text);
}

.frenzy-profile:hover {
  transform: translateY(-2px);
  border-color: var(--accent2);
}

.frenzy-profile.active {
  border-color: var(--ice);
  box-shadow: 0 0 0 1px var(--ice);
}

.profile-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 25px;
  letter-spacing: 2px;
  color: var(--text);
  margin-bottom: 8px;
}

.profile-rule {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--ice);
  margin-bottom: 4px;
}

.profile-detail {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 1px;
  color: var(--muted);
}

.active-frenzy {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.active-frenzy-label {
  font-family: 'Space Mono', monospace;
  font-size: 8px;
  letter-spacing: 2px;
  color: var(--muted);
}

.active-frenzy-name {
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--ice);
}


/* Mobile */

@media (max-width: 560px) {

  .frenzy-profiles {
    grid-template-columns: 1fr;
  }

  .frenzy-profile {
    padding: 14px;
  }

}