/* Sportsbook room overlay: visual treatment only. */
:root {
  --sportsbook-grid: repeating-linear-gradient(90deg, transparent 0 84px, rgba(255, 255, 255, .045) 85px 86px);
  --sportsbook-lines: repeating-linear-gradient(0deg, transparent 0 46px, rgba(255, 255, 255, .035) 47px 48px);
}

.tab-page {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 138px);
  padding-top: clamp(2rem, 4vw, 3.5rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  overflow: hidden;
  background-color: #03060c;
  background-image:
    linear-gradient(135deg, rgba(2, 4, 10, .25), rgba(2, 4, 10, .12), rgba(0, 0, 0, .34)),
    var(--tab-photo) !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed;
  box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .025);
}

.tab-page::before,
.tab-page::after {
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.tab-page::before {
  content: var(--room-label);
  opacity: .24 !important;
  right: clamp(-.15rem, 2vw, 1.5rem);
  bottom: clamp(.5rem, 3vw, 2.5rem);
  color: rgba(255, 255, 255, .045);
  font-size: clamp(3.2rem, 10vw, 9rem);
  font-weight: 1000;
  line-height: .82;
  letter-spacing: .075em;
  text-align: right;
  text-transform: uppercase;
}

.tab-page::after {
  content: "";
  inset: 0;
  opacity: .72 !important;
  background:
    var(--room-glow),
    linear-gradient(115deg, rgba(255, 255, 255, .045), transparent 26%, transparent 74%, rgba(255, 255, 255, .025)),
    linear-gradient(180deg, rgba(0, 0, 0, .06), rgba(0, 0, 0, .3));
}

.tab-page > * {
  position: relative;
  z-index: 2;
}

#home {
  --room-label: "Command Center";
  --room-glow: radial-gradient(circle at 78% 14%, rgba(247, 201, 72, .25), transparent 33%), radial-gradient(circle at 14% 65%, rgba(53, 167, 255, .15), transparent 34%);
  --tab-photo: url("/assets/backgrounds/home-sportsbook.jpg");
}

#free {
  --room-label: "Ticket Window";
  --room-glow: radial-gradient(circle at 15% 12%, rgba(57, 233, 145, .2), transparent 32%), radial-gradient(circle at 84% 72%, rgba(247, 201, 72, .14), transparent 30%);
  --tab-photo: url("/assets/backgrounds/free-ticket-window.jpg");
}

#vip {
  --room-label: "Premium Vault";
  --room-glow: radial-gradient(circle at 72% 15%, rgba(255, 211, 92, .48), transparent 38%), radial-gradient(circle at 14% 82%, rgba(186, 109, 30, .38), transparent 38%);
  --tab-photo: url("/assets/backgrounds/vip-vault-lounge.jpg");
}

#odds {
  --room-label: "Live Odds Wall";
  --room-glow: radial-gradient(circle at 85% 20%, rgba(45, 230, 212, .2), transparent 34%), radial-gradient(circle at 12% 70%, rgba(53, 167, 255, .2), transparent 36%);
  --tab-photo: url("/assets/backgrounds/odds-board.jpg");
}

#sports {
  --room-label: "Arena Selector";
  --room-glow: radial-gradient(ellipse at 50% 20%, rgba(57, 233, 145, .16), transparent 42%), radial-gradient(circle at 82% 74%, rgba(255, 116, 56, .17), transparent 30%);
  --tab-photo: url("/assets/backgrounds/sports-arena.jpg");
}

#props {
  --room-label: "Props Lab";
  --room-glow: radial-gradient(circle at 15% 18%, rgba(53, 167, 255, .4), transparent 36%), radial-gradient(circle at 82% 78%, rgba(45, 230, 212, .32), transparent 34%);
  --tab-photo: url("/assets/backgrounds/props-analytics.jpg");
}

#longshots {
  --room-label: "Parlay Room";
  --room-glow: radial-gradient(circle at 76% 15%, rgba(220, 50, 45, .42), transparent 38%), radial-gradient(circle at 15% 75%, rgba(247, 201, 72, .38), transparent 38%);
  --tab-photo: url("/assets/backgrounds/longshots-parlay.jpg");
}

#results {
  --room-label: "Trophy Ledger";
  --room-glow: radial-gradient(circle at 50% 10%, rgba(247, 201, 72, .42), transparent 38%), radial-gradient(circle at 85% 80%, rgba(57, 233, 145, .3), transparent 34%);
  --tab-photo: url("/assets/backgrounds/results-trophy.jpg");
}

#yahgi {
  --room-label: "Community Intel";
  --room-glow: radial-gradient(circle at 16% 22%, rgba(152, 95, 255, .23), transparent 34%), radial-gradient(circle at 82% 74%, rgba(53, 167, 255, .16), transparent 32%);
  --tab-photo: url("/assets/backgrounds/yahgi-community.jpg");
}

#about {
  --room-label: "Sports Media";
  --room-glow: radial-gradient(circle at 78% 18%, rgba(255, 116, 56, .2), transparent 34%), radial-gradient(circle at 14% 72%, rgba(247, 201, 72, .14), transparent 34%);
  --tab-photo: url("/assets/backgrounds/about-media-room.jpg");
}

.tab-page .glass,
.tab-page .card,
.tab-page .odds-board,
.tab-page .stat {
  background: linear-gradient(145deg, rgba(9, 18, 31, .74), rgba(6, 10, 18, .56)) !important;
  backdrop-filter: blur(14px) saturate(125%) !important;
}

#vip .glass,
#vip .card,
#vip .stat {
  border-color: rgba(247, 201, 72, .24);
  box-shadow: 0 22px 62px rgba(86, 45, 5, .26);
}

#longshots .glass,
#longshots .card,
#longshots .stat {
  border-color: rgba(247, 201, 72, .2);
  box-shadow: 0 22px 62px rgba(145, 31, 23, .2);
}

#props .glass,
#props .card,
#props .stat {
  border-color: rgba(45, 230, 212, .18);
  box-shadow: 0 22px 62px rgba(17, 105, 137, .2);
}

#results .glass,
#results .card,
#results .stat {
  border-color: rgba(247, 201, 72, .2);
  box-shadow: 0 22px 62px rgba(24, 110, 72, .18);
}

.tab-page .odds-board {
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34);
}

.odds-board table,
table {
  background: linear-gradient(180deg, rgba(6, 13, 23, .9), rgba(4, 7, 13, .94)) !important;
}

#home,
#free,
#vip,
#odds,
#sports,
#props,
#longshots,
#results,
#yahgi,
#about {
  background-blend-mode: normal !important;
}

@media (max-width: 720px) {
  .tab-page {
    background-attachment: scroll;
    background-image:
      linear-gradient(135deg, rgba(2, 4, 10, .3), rgba(2, 4, 10, .18), rgba(0, 0, 0, .42)),
      var(--tab-photo) !important;
  }

  .tab-page::before {
    opacity: .2 !important;
    bottom: 1.2rem;
    font-size: clamp(2.7rem, 15vw, 5.2rem);
  }

  .tab-page::after {
    opacity: .62 !important;
  }
}