/* =================================================================
   VANTA BLACK WATER — CAYMAN CUP  ·  Cayman Islands
   Sporty ocean tournament system. Rubik type (heavy italic display),
   teal + deep-sea navy + near-black, sunset-coral energy pop.
   Built loosely on the MetaBase58 foundations (Rubik, square corners).
   ================================================================= */

/* ---- Rubik (self-hosted) ---------------------------------------- */
@font-face { font-family:'Rubik'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/Rubik-Regular.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/Rubik-Medium.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/Rubik-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/Rubik-Bold.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:italic; font-weight:700; font-display:swap; src:url('fonts/Rubik-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/Rubik-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:italic; font-weight:800; font-display:swap; src:url('fonts/Rubik-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:normal; font-weight:900; font-display:swap; src:url('fonts/Rubik-Black.ttf') format('truetype'); }
@font-face { font-family:'Rubik'; font-style:italic; font-weight:900; font-display:swap; src:url('fonts/Rubik-BlackItalic.ttf') format('truetype'); }

:root{
  /* ---- Ocean palette ---- */
  --ocean:       #18B6CE;   /* primary teal (logo sky)        */
  --ocean-bright:#2DD4EC;
  --ocean-deep:  #0C7C92;
  --sea:         #0A2A3E;    /* deep navy ocean               */
  --sea-2:       #0E3850;
  --sea-3:       #12466A;
  --abyss:       #070F15;    /* near-black sport ground       */
  --abyss-2:     #0C1A23;
  --abyss-3:     #11242F;
  --rule-dark:   #1b3340;
  --foam:        #ffffff;
  --chalk:       #E9F4F7;    /* body text on dark             */
  --chalk-mute:  #8FAEBC;    /* secondary on dark             */
  --sand:        #F4EEE2;    /* warm light section band       */
  --paper:       #FBFAF7;
  --ink:         #0B1419;    /* text on light                 */
  --ink-soft:    #3C4A52;
  --ink-mute:    #6C7B84;
  --rule-light:  #E4E0D6;

  /* ---- Energy accent (Cayman sunset) ---- */
  --coral:       #FF6A3D;
  --coral-deep:  #E8501F;
  --sun:         #FFC24B;

  /* ---- Team colors ---- */
  --t-stingrays: #16B6C9;
  --t-legends:   #E8A92B;
  --t-wranglers: #EF6C2E;
  --t-defenders: #2E73C9;

  /* ---- Type ---- */
  --font: 'Rubik', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Layout ---- */
  --page-max: 1240px;
  --gutter: clamp(18px, 4.5vw, 56px);
  --nav-h: 70px;

  --tracking-caps: 0.22em;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font);
  background:var(--abyss);
  color:var(--chalk);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.wrap{ width:100%; max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); }

/* ---- Display / headings ---- */
h1,h2,h3,h4{ margin:0; font-weight:800; line-height:1.05; letter-spacing:-0.02em; }
.display{
  font-weight:900; font-style:italic;
  font-size:clamp(52px, 11vw, 150px);
  line-height:0.88; letter-spacing:-0.035em;
  text-transform:uppercase;
}
.h-xl{ font-weight:900; font-style:italic; text-transform:uppercase; font-size:clamp(38px,6.5vw,82px); line-height:0.92; letter-spacing:-0.03em; }
.h-lg{ font-weight:900; font-style:italic; text-transform:uppercase; font-size:clamp(30px,4.6vw,56px); line-height:0.95; letter-spacing:-0.025em; }
.h-md{ font-weight:800; font-size:clamp(22px,2.6vw,32px); }

/* ---- Eyebrow ---- */
.eyebrow{
  display:inline-flex; align-items:center; gap:0.7em;
  font-size:13px; font-weight:700; text-transform:uppercase;
  letter-spacing:var(--tracking-caps); color:var(--ocean-bright);
  margin:0;
}
.eyebrow.on-light{ color:var(--ocean-deep); }
.dot{ width:0.62em; height:0.62em; background:var(--coral); display:inline-block; transform:rotate(45deg); flex:none; }
.eyebrow .dot{ background:currentColor; }

.lead{ font-size:clamp(18px,2vw,21px); line-height:1.6; color:var(--chalk-mute); }
.lead.on-light{ color:var(--ink-soft); }

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; gap:0.6em;
  font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
  font-size:14px; padding:15px 26px; border:0; cursor:pointer;
  background:var(--coral); color:#fff;
  clip-path:polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition:background .16s ease, transform .16s ease;
}
.btn:hover{ background:var(--coral-deep); transform:translateY(-2px); }
.btn.ghost{ background:transparent; color:var(--foam); box-shadow:inset 0 0 0 2px rgba(255,255,255,.32); }
.btn.ghost:hover{ box-shadow:inset 0 0 0 2px var(--ocean-bright); color:var(--ocean-bright); background:transparent; }
.btn.ocean{ background:var(--ocean); color:var(--abyss); }
.btn.ocean:hover{ background:var(--ocean-bright); }
.btn svg{ width:18px; height:18px; }

/* ---- Surfaces ---- */
.sec{ padding-block:clamp(56px,8vw,108px); }
.sec.dark{ background:var(--abyss); }
.sec.sea{ background:var(--sea); }
.sec.light{ background:var(--sand); color:var(--ink); }
.sec.light .lead{ color:var(--ink-soft); }
.sec.light h1,.sec.light h2,.sec.light h3{ color:var(--ink); }

/* ===========================  NAV  =============================== */
.nav{
  position:sticky; top:0; z-index:60; height:var(--nav-h);
  background:rgba(7,15,21,.82); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--rule-dark);
}
.nav-in{ height:100%; display:flex; align-items:center; gap:24px; }
.nav-brand{ display:flex; align-items:center; gap:12px; font-weight:900; font-style:italic; text-transform:uppercase; letter-spacing:-0.01em; font-size:18px; color:#fff; flex:none; }
.nav-brand img{ height:42px; width:auto; }
.nav-brand .sub{ display:block; font-size:10px; font-style:normal; font-weight:700; letter-spacing:0.18em; color:var(--ocean-bright); line-height:1; }
.nav-links{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-links a{
  position:relative; padding:9px 14px; font-size:13.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--chalk-mute);
  transition:color .15s ease;
}
.nav-links a:hover{ color:#fff; }
.nav-links a.active{ color:#fff; }
.nav-links a.active::after{
  content:""; position:absolute; left:14px; right:14px; bottom:2px; height:3px;
  background:var(--coral);
}
.nav-burger{ margin-left:auto; display:none; background:none; border:0; color:#fff; cursor:pointer; padding:8px; }
.nav-burger svg{ width:26px; height:26px; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0; flex-direction:column; gap:0;
    background:var(--abyss-2); border-bottom:1px solid var(--rule-dark);
    padding:8px var(--gutter) 16px; align-items:stretch;
    transform:translateY(-130%); transition:transform .28s ease; box-shadow:0 24px 40px rgba(0,0,0,.5);
  }
  .nav-links.open{ transform:translateY(0); }
  .nav-links a{ padding:14px 4px; font-size:15px; border-bottom:1px solid var(--rule-dark); }
  .nav-links a.active::after{ left:4px; right:auto; width:22px; bottom:10px; }
  .nav-burger{ display:block; }
}

/* ===========================  FOOTER  ============================ */
.foot{ background:var(--abyss); border-top:1px solid var(--rule-dark); padding-block:56px 40px; }
.foot-grid{ display:flex; flex-wrap:wrap; gap:40px 64px; align-items:flex-start; }
.foot-brand img{ height:74px; width:auto; margin-bottom:16px; }
.foot-brand p{ color:var(--chalk-mute); max-width:300px; font-size:14px; margin:0; }
.foot-col h5{ margin:0 0 14px; font-size:12px; text-transform:uppercase; letter-spacing:0.2em; color:var(--ocean-bright); font-weight:700; }
.foot-col a{ display:block; color:var(--chalk-mute); font-size:14px; padding:5px 0; transition:color .15s; }
.foot-col a:hover{ color:#fff; }
.foot-spons{ margin-left:auto; }
.foot-spons .row{ display:flex; flex-wrap:wrap; gap:10px; max-width:340px; }
.foot-spons .chip{ font-size:12px; font-weight:700; letter-spacing:.04em; color:var(--chalk); background:var(--abyss-3); border:1px solid var(--rule-dark); padding:8px 12px; }
.foot-base{ margin-top:44px; padding-top:22px; border-top:1px solid var(--rule-dark); display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; color:var(--ink-mute); font-size:12.5px; letter-spacing:.03em; }
.foot-base .chalk-mute{ color:var(--chalk-mute); }

/* ---- Lite YouTube facade (click to load) ---- */
.yt-lite{ position:relative; cursor:pointer; background:#000; }
.yt-lite .yt-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.yt-lite .yt-play{ position:absolute; inset:0; margin:auto; width:84px; height:60px; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; padding:0; z-index:2; transition:transform .18s ease, filter .18s ease; }
.yt-lite .yt-play svg{ width:100%; height:100%; }
.yt-lite .yt-play .yt-bg{ fill:#000; opacity:.78; transition:fill .18s ease, opacity .18s ease; }
.yt-lite:hover .yt-play{ transform:scale(1.06); }
.yt-lite:hover .yt-play .yt-bg{ fill:var(--coral-deep); opacity:1; }
.yt-lite::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(7,15,21,.10), rgba(7,15,21,.45)); z-index:1; pointer-events:none; transition:opacity .2s ease; }
.yt-lite iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; z-index:3; }

/* ---- Team color helpers ---- */
[data-team="stingrays"]{ --tc:var(--t-stingrays); }
[data-team="legends"]{ --tc:var(--t-legends); }
[data-team="wranglers"]{ --tc:var(--t-wranglers); }
[data-team="defenders"]{ --tc:var(--t-defenders); }

/* monogram avatar (placeholder; can be swapped for a photo) */
.avatar{
  width:var(--av,44px); height:var(--av,44px); flex:none; border-radius:50%;
  display:grid; place-items:center; font-weight:900; font-style:italic;
  color:#fff; letter-spacing:-0.02em; position:relative; overflow:hidden;
  background:var(--tc, var(--ocean)); border:2px solid rgba(255,255,255,.14);
}
.avatar img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* generic reveal */
@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease; }
  .reveal.in{ opacity:1; transform:none; }
}

/* shared page intro band */
.page-head{ background:var(--sea); border-bottom:1px solid var(--rule-dark); padding-block:clamp(40px,6vw,76px) clamp(28px,4vw,44px); position:relative; overflow:hidden; }
.page-head .wrap{ position:relative; z-index:2; }
.page-head h1{ margin:10px 0 0; }
.page-head .lead{ margin:16px 0 0; max-width:620px; }
.water-stripes{ position:absolute; inset:0; opacity:.5; z-index:1;
  background:
    linear-gradient(115deg, transparent 0 60%, rgba(24,182,206,.10) 60% 64%, transparent 64%),
    linear-gradient(115deg, transparent 0 72%, rgba(24,182,206,.07) 72% 78%, transparent 78%);
}

/* =================================================================
   LIGHT THEME OVERRIDES
   ================================================================= */
body[data-theme="light"] {
  --abyss:       #FBFAF7;    /* light paper background        */
  --abyss-2:     #FFFFFF;    /* cards and sections            */
  --abyss-3:     #EAEFF2;    /* sponsors chips, scrollbars    */
  --sea:         #E8F2F6;    /* light ocean header/intro      */
  --sea-2:       #DCEAF0;
  --sea-3:       #CFDFE6;
  --rule-dark:   #E4E0D6;    /* lighter borders               */
  --chalk:       #0B1419;    /* dark text on light            */
  --chalk-mute:  #5C6E79;    /* secondary on light            */
  --foam:        #0B1419;    /* text on light buttons         */
}

/* Base body overrides */
body[data-theme="light"] {
  background: var(--abyss);
  color: var(--chalk);
}

/* Nav overrides */
body[data-theme="light"] .nav {
  background: rgba(251, 250, 247, 0.85);
  border-bottom: 1px solid var(--rule-dark);
}
body[data-theme="light"] .nav-brand,
body[data-theme="light"] .nav-brand span {
  color: var(--chalk) !important;
}
body[data-theme="light"] .nav-brand .sub {
  color: var(--ocean-deep);
}
body[data-theme="light"] .nav-links a {
  color: var(--chalk-mute);
}
body[data-theme="light"] .nav-links a:hover,
body[data-theme="light"] .nav-links a.active {
  color: var(--chalk) !important;
}
body[data-theme="light"] .nav-burger {
  color: var(--chalk);
}

/* Hero Section overrides */
body[data-theme="light"] .hero {
  background: linear-gradient(to right, var(--abyss) 25%, rgba(251, 250, 247, 0.4) 55%, transparent 80%), url('assets/hero_bg.jpg') center/cover;
}
body[data-theme="light"] .hero-bg .glow {
  opacity: 0.1;
}
body[data-theme="light"] .hero-bg .glow2 {
  opacity: 0.05;
}
body[data-theme="light"] .hero-waves {
  opacity: 0.15;
}
body[data-theme="light"] .hero .kicker {
  color: var(--ocean-deep);
}
body[data-theme="light"] .hero-sub {
  color: var(--chalk-mute);
}
body[data-theme="light"] .meta-pill {
  color: var(--chalk);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--rule-dark);
}
body[data-theme="light"] .btn.ghost {
  border: 2px solid var(--chalk);
  color: var(--chalk);
}
body[data-theme="light"] .btn.ghost:hover {
  border-color: var(--ocean-deep);
  color: var(--ocean-deep);
  background: rgba(24, 182, 206, 0.08);
}

/* At a Glance stat numbers */
body[data-theme="light"] .stat .n:not(.coral):not(.ocean) {
  color: var(--chalk);
}
body[data-theme="light"] .stat .l {
  color: var(--chalk-mute);
}

/* Card titles and text */
body[data-theme="light"] .teamcard h3,
body[data-theme="light"] .teamcard .seed {
  color: var(--chalk);
}
body[data-theme="light"] .teamcard .rec {
  color: var(--chalk-mute);
}
body[data-theme="light"] .teamcard .rec b {
  color: var(--tc);
}

/* Final card */
body[data-theme="light"] .final-card {
  background: linear-gradient(90deg, var(--abyss) 0%, var(--abyss) 30%, rgba(251, 250, 247, 0.7) 45%, rgba(251, 250, 247, 0) 70%), url('assets/poster_match_point.png') center/cover;
  border-color: var(--coral-deep);
}
body[data-theme="light"] .final-card h2 {
  color: var(--chalk) !important;
}
body[data-theme="light"] .final-card p.lead {
  color: var(--chalk-mute) !important;
}
body[data-theme="light"] .final-card .when {
  color: var(--coral-deep) !important;
}

/* Watch and headings */
body[data-theme="light"] h2[style*="color:#fff"],
body[data-theme="light"] h2[style*="color: #fff"],
body[data-theme="light"] h2[style*="color:rgb(255,255,255)"],
body[data-theme="light"] h2[style*="color: rgb(255, 255, 255)"] {
  color: var(--chalk) !important;
}

/* Teams page styling overrides */
body[data-theme="light"] .team-head {
  background: linear-gradient(110deg, color-mix(in srgb, var(--tc) 12%, var(--abyss-2)) 0%, var(--abyss-2) 62%);
}
body[data-theme="light"] .team-id h2,
body[data-theme="light"] .team-head .record .wl {
  color: var(--chalk) !important;
}
body[data-theme="light"] .team-head .record .pf {
  color: var(--chalk-mute);
}
body[data-theme="light"] .tag:not(.tc) {
  background: rgba(11, 20, 25, 0.05);
  color: var(--chalk-mute);
}
body[data-theme="light"] .player .pname {
  color: var(--chalk);
}
body[data-theme="light"] .player .prole,
body[data-theme="light"] .player .inj {
  color: var(--chalk-mute);
}
body[data-theme="light"] .anchor-rail a {
  color: var(--chalk);
}
body[data-theme="light"] .anchor-rail a:hover {
  color: var(--ocean-deep);
}

/* Results page styling overrides */
body[data-theme="light"] .day-group .day-label h3 {
  color: var(--chalk) !important;
}
body[data-theme="light"] .side .nm,
body[data-theme="light"] .side.win .nm {
  color: var(--chalk) !important;
}
body[data-theme="light"] .score {
  color: var(--chalk) !important;
}
body[data-theme="light"] .score .s.lose {
  color: var(--chalk-mute);
}
body[data-theme="light"] .chip-f {
  color: var(--chalk-mute);
}
body[data-theme="light"] .chip-f:hover,
body[data-theme="light"] .chip-f.on {
  color: var(--chalk);
}

/* Standings page overrides */
body[data-theme="light"] .tmcell .tname {
  color: var(--chalk) !important;
}
body[data-theme="light"] .num {
  color: var(--chalk) !important;
}
body[data-theme="light"] .num.l {
  color: var(--chalk-mute);
}

/* Playoffs page overrides */
body[data-theme="light"] .slot .nm {
  color: var(--chalk) !important;
}
body[data-theme="light"] .slot.win .sc {
  color: var(--chalk) !important;
}
body[data-theme="light"] .slot.lose .nm {
  color: var(--chalk-mute);
}
body[data-theme="light"] .champ-card {
  background: linear-gradient(160deg, var(--sea), var(--abyss-2));
  color: var(--chalk);
}
body[data-theme="light"] .champ-name {
  color: var(--tc) !important;
}
body[data-theme="light"] .champ-card p {
  color: var(--chalk-mute);
}

/* Media page overrides */
body[data-theme="light"] .car-nav button {
  color: var(--chalk);
}
body[data-theme="light"] .car-nav button:hover {
  border-color: var(--ocean-deep);
  color: var(--ocean-deep);
}

/* =================================================================
   THEME TOGGLE BUTTON STYLING
   ================================================================= */
.theme-toggle {
  background: none;
  border: 0;
  color: var(--chalk-mute);
  cursor: pointer;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease;
}
.theme-toggle:hover {
  color: var(--ocean-bright);
  transform: scale(1.08);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}
.theme-toggle .moon-icon {
  display: none;
}
.theme-toggle .sun-icon {
  display: block;
}
body[data-theme="light"] .theme-toggle {
  color: var(--chalk-mute);
}
body[data-theme="light"] .theme-toggle:hover {
  color: var(--ocean-deep);
}
body[data-theme="light"] .theme-toggle .sun-icon {
  display: none;
}
body[data-theme="light"] .theme-toggle .moon-icon {
  display: block;
}