/* SITE-WIDE STYLES (style.css): colours, fonts, nav, buttons, homepage and Partner page layout. Used by every page. After editing, bump ?v= on the stylesheet link in each page so browsers reload it. */
:root{--navy:#0c2d57;--navy2:#123c70;--ink:#14181f;--text:#2a313c;--bg:#0b0d12}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:17px/1.65 Inter,system-ui,sans-serif;color:var(--text);background:#fff}
h1,h2,h3{font-family:"Plus Jakarta Sans",Inter,system-ui,sans-serif;font-weight:700;letter-spacing:-.015em;color:var(--ink);line-height:1.15;margin:0 0 .5em}h2{font-size:clamp(2rem,4vw,2.8rem)}h3{font-size:1.45rem}
a{color:var(--navy2)}.wrap{max-width:1180px;margin:auto;padding:0 24px}.narrow{max-width:760px}
.btn{display:inline-block;background:var(--navy);color:#fff;padding:.8em 1.5em;border-radius:999px;font-weight:600;text-decoration:none;border:0;font-size:1rem;cursor:pointer}.btn:hover{background:var(--navy2)}
.btn.ghost{background:transparent;border:2px solid #fff}.btn.light{background:#fff;color:var(--navy)}.btn.sm{padding:.45em 1.1em;color:#fff!important}
.nav{position:sticky;top:0;z-index:9;background:rgba(255,255,255,.97);box-shadow:0 1px 8px rgba(0,0,0,.08)}.navin{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo img{height:38px}nav{display:flex;gap:26px;align-items:center}nav a{text-decoration:none;color:var(--ink);font-weight:500}.burger{display:none;background:none;border:0;font-size:1.6rem}
.hero{background:linear-gradient(90deg,rgba(5,8,14,.92) 30%,rgba(5,8,14,.55)),url(img/3-1c468b90-58c1-4a91-bcb8-67236d39fbe8-592x400.jpg) center/cover;color:#fff;padding:120px 0 90px}
.hero h1{color:#fff;font-size:clamp(2.4rem,5.5vw,4.3rem);max-width:820px}.lead{font-size:1.2rem;max-width:620px;color:#e8ecf2}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:700;color:#9fc0ea}.eyebrow.dark{color:var(--navy2)}
.ctas{display:flex;gap:14px;flex-wrap:wrap;margin:28px 0}.paths{display:flex;gap:10px;flex-wrap:wrap}.paths a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.35);padding:.4em 1em;border-radius:8px;font-size:.95rem}.paths a:hover{background:rgba(255,255,255,.1)}
.stats{background:var(--navy);color:#fff;padding:34px 0 18px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}.grid3 b{display:block;font:800 2.3rem "Plus Jakarta Sans",Inter,sans-serif}.grid3 span{color:#d4e0f0;font-size:.95rem}.note{font-size:.8rem;color:#b9cbe3;text-align:center;margin-top:14px}
.sec{padding:84px 0}.light{background:#f3f5f8}.navy{background:linear-gradient(135deg,var(--navy),#081d3a);color:#e8eef7}.navy h2,.navy h3{color:#fff}
.head{display:flex;justify-content:space-between;align-items:baseline}.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.vid{text-decoration:none;color:var(--text)}.thumb{position:relative}.thumb img,.collab img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}.dur{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.85);color:#fff;font-size:.8rem;padding:2px 7px;border-radius:4px}
.vid h3{font:600 1.02rem/1.4 Inter,sans-serif;margin:.7em 0 .2em}.meta{font-size:.88rem;color:#5a6472;margin:0}
.channels{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}.channels a{border:2px solid #dde3ea;border-radius:12px;padding:18px 22px;text-decoration:none;display:flex;flex-direction:column}.channels strong{color:var(--ink);font-size:1.1rem}.channels span{color:#4a5462}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}.sub{margin-top:56px}
.collabs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:36px}.collab{text-decoration:none;color:var(--text);background:#fff;border-radius:12px;padding:12px;box-shadow:0 2px 10px rgba(0,0,0,.06)}.collab h3{font-size:1.25rem;margin:.6em 0 .3em}.collab p{font-size:.93rem;margin:0}
.kit{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:14px;padding:28px}.kit li{margin:.45em 0}.ph{color:#c8d3e2;font-size:.9em;opacity:.8}.small{font-size:.88rem}
.rate{font:700 1.3rem "Plus Jakarta Sans",Inter,sans-serif;color:var(--navy)}.demos{display:flex;flex-direction:column;gap:12px}.demo{border:2px solid #dde3ea;border-radius:10px;padding:16px 18px;text-decoration:none;font-weight:500}.demo.ph{color:#6b7684;background:#f7f9fb;border-style:dashed;font-weight:400}
.quotes{columns:3;column-gap:24px}.q{break-inside:avoid;background:#fff;border-left:4px solid var(--navy);border-radius:8px;padding:18px 20px;margin:0 0 24px}.q blockquote{margin:0;color:var(--ink)}.q .cap{display:block;margin-top:10px;font-weight:600;color:var(--navy2)}
form{display:grid;gap:18px;margin-top:24px}label{display:grid;gap:6px;font-weight:600;color:var(--ink)}input,textarea{font:inherit;padding:.75em .9em;border:2px solid #cfd6df;border-radius:8px}input:focus,textarea:focus{outline:none;border-color:var(--navy2)}
.types{border:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}.types legend{font-weight:600;color:var(--ink);margin-bottom:8px}.types label{display:block}.types input{position:absolute;opacity:0}.types span{display:block;padding:.55em 1.2em;border:2px solid #cfd6df;border-radius:999px;cursor:pointer;font-weight:500}.types input:checked+span{background:var(--navy);border-color:var(--navy);color:#fff}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
footer{background:var(--bg);color:#c9d1dc;padding:48px 0}.foot{display:grid;grid-template-columns:2fr 1fr;gap:20px}.flogo{height:34px}.links{display:flex;flex-wrap:wrap;gap:16px;justify-content:flex-end}.links a{color:#fff}.copy{grid-column:1/-1;font-size:.85rem;color:#8e99a8}
@media(max-width:860px){.burger{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;background:#fff;flex-direction:column;padding:20px;box-shadow:0 8px 16px rgba(0,0,0,.1)}.open nav{display:flex}
.grid4{grid-template-columns:1fr 1fr}.vids,.collabs{grid-template-columns:1fr 1fr}.two,.row,.foot{grid-template-columns:1fr}.channels{grid-template-columns:1fr 1fr}.quotes{columns:1}.hero{padding:80px 0 60px}.sec{padding:60px 0}.links{justify-content:flex-start}}
@media(max-width:520px){.vids,.collabs{grid-template-columns:1fr}}

.stats{padding:34px 0}.grid3{max-width:900px}
a.q{display:block;text-decoration:none;transition:box-shadow .15s,transform .15s}a.q:hover{box-shadow:0 4px 16px rgba(0,0,0,.1);transform:translateY(-2px)}.q .cap em{font-style:normal;font-weight:500;font-size:.85rem;color:#5a6472;margin-left:6px}
.ctacards{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:20px}.ctacard{background:#fff;border-radius:12px;padding:26px;text-decoration:none;color:var(--text);box-shadow:0 2px 10px rgba(0,0,0,.06)}.ctacard:hover{box-shadow:0 4px 16px rgba(0,0,0,.12)}.ctacard span{color:var(--navy2);font-weight:600}
.hero.small{min-height:0;padding-top:120px;padding-bottom:60px}nav a.cur{color:var(--navy2);text-decoration:underline;text-underline-offset:6px}
@media(max-width:800px){.grid3{grid-template-columns:1fr}.ctacards{grid-template-columns:1fr}}
.discord{background:linear-gradient(120deg,var(--navy),#1b2f5c);color:#fff;padding:64px 0}.dband{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}.discord h2{color:#fff;margin-bottom:.3em}.discord p{color:#dbe4f1;margin:0;max-width:560px}.btn.big{font-size:1.1rem;padding:1em 2em}
.btn.light{background:#fff;color:var(--navy)}.btn.light:hover{background:#e8eef7}
@media(max-width:600px){.dband .btn{width:100%;text-align:center}}
button{font-family:inherit}.head a{white-space:nowrap}
.kitwin{font-size:.85rem;color:#b9cbe3;margin:-.3em 0 16px}.kstats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.kstats div{background:rgba(255,255,255,.07);border-radius:10px;padding:12px 8px;text-align:center}.kstats b{display:block;font:800 1.35rem "Plus Jakarta Sans",Inter,sans-serif;color:#fff}.kstats span{font-size:.8rem;color:#c8d3e2}.kit li{font-size:.95rem}.kit strong{color:#fff}
@media(max-width:520px){.kstats{grid-template-columns:1fr 1fr}}
.streams{background:#f5f7fa}
.sweek{display:grid;grid-template-columns:repeat(7,1fr);gap:14px}
.sday{background:#fff;border:2px solid #dde3ea;border-radius:12px;padding:16px 14px;min-height:150px;display:flex;flex-direction:column;gap:10px}
.sday.has{border-color:var(--navy2)}
.sday.today .sdate b{color:var(--navy2)}
.sdate{margin:0;display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid #e6ebf1;padding-bottom:8px}
.sdate b{font:700 1rem "Plus Jakarta Sans",Inter,sans-serif;color:var(--ink);text-transform:uppercase;letter-spacing:.08em}
.sdate span{font-size:.85rem;color:#5a6472}
.sitem{background:var(--navy);color:#fff;border-radius:10px;padding:10px 12px;display:flex;flex-direction:column}
.stime{font-size:.8rem;font-weight:700;letter-spacing:.06em;color:#9fc0ea}
.stitle{font-weight:600;font-size:.95rem;line-height:1.35}
.snone{margin:auto 0;font-size:.88rem;color:#8a94a2;text-align:center}
@media(max-width:1000px){.sweek{grid-template-columns:repeat(4,1fr)}}
@media(max-width:600px){.sweek{grid-template-columns:1fr;gap:10px}.sday{min-height:0;flex-direction:row;align-items:center;flex-wrap:wrap}.sdate{border:0;padding:0;min-width:92px;flex-direction:column;gap:0}.sday .sitem{flex:1}.snone{margin:0;text-align:left}}

/* live badge */
.livebadge{display:inline-flex;align-items:center;gap:7px;margin:0 auto 0 16px;padding:.32em .85em;border-radius:999px;background:#d7263d;color:#fff;font:700 .78rem "Plus Jakarta Sans",Inter,system-ui,sans-serif;letter-spacing:.1em;text-decoration:none;white-space:nowrap}
.livebadge:hover{background:#b81f33}.livebadge[hidden]{display:none}
.ldot{width:8px;height:8px;border-radius:50%;background:#fff;animation:lpulse 1.4s ease-out infinite}
@keyframes lpulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.9)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
@media(prefers-reduced-motion:reduce){.ldot{animation:none}}
@media(max-width:520px){.livebadge{margin-left:10px;padding:.3em .65em;gap:6px}.lnow{display:none}}.burger{flex-shrink:0}
@media(max-width:420px){.navin:has(.livebadge:not([hidden])) .logo img{height:30px}}

/* HOMEPAGE HERO BACKGROUND: city at dusk (homepage only; other pages keep the .hero image above). WebP with JPG fallback. */
.home-hero{background:linear-gradient(90deg,rgba(5,8,14,.88) 25%,rgba(5,8,14,.45)),url(img/hero-city-dusk.jpg) center/cover;background:linear-gradient(90deg,rgba(5,8,14,.88) 25%,rgba(5,8,14,.45)),image-set(url(img/hero-city-dusk.webp) type("image/webp"),url(img/hero-city-dusk.jpg) type("image/jpeg")) center/cover}
@media(max-width:700px){.home-hero{background:linear-gradient(rgba(5,8,14,.72),rgba(5,8,14,.72)),url(img/hero-city-dusk.jpg) 65% center/cover;background:linear-gradient(rgba(5,8,14,.72),rgba(5,8,14,.72)),image-set(url(img/hero-city-dusk.webp) type("image/webp"),url(img/hero-city-dusk.jpg) type("image/jpeg")) 65% center/cover}}

/* GAMES PAGE HERO BACKGROUND: streamer desk at night (Games page only, via .games-hero on its header; Partner page keeps the .hero image above). WebP with JPG fallback. */
.games-hero{background:linear-gradient(90deg,rgba(5,8,14,.88) 25%,rgba(5,8,14,.45)),url(img/hero-games-desk.jpg) center/cover;background:linear-gradient(90deg,rgba(5,8,14,.88) 25%,rgba(5,8,14,.45)),image-set(url(img/hero-games-desk.webp) type("image/webp"),url(img/hero-games-desk.jpg) type("image/jpeg")) center/cover}
@media(max-width:700px){.games-hero{background:linear-gradient(rgba(5,8,14,.72),rgba(5,8,14,.72)),url(img/hero-games-desk.jpg) 60% center/cover;background:linear-gradient(rgba(5,8,14,.72),rgba(5,8,14,.72)),image-set(url(img/hero-games-desk.webp) type("image/webp"),url(img/hero-games-desk.jpg) type("image/jpeg")) 60% center/cover}}

/* ===== PARTNER PAGE HERO BACKGROUND =====
   Blueprint map table (Partner page only, via .partner-hero on its top section).
   Other pages are not affected. WebP with JPG fallback. */
.partner-hero{background:linear-gradient(90deg,rgba(5,8,14,.88) 25%,rgba(5,8,14,.45)),url(img/hero-partner-blueprint.jpg) center/cover;background:linear-gradient(90deg,rgba(5,8,14,.88) 25%,rgba(5,8,14,.45)),image-set(url(img/hero-partner-blueprint.webp) type("image/webp"),url(img/hero-partner-blueprint.jpg) type("image/jpeg")) center/cover}
@media(max-width:700px){.partner-hero{background:linear-gradient(rgba(5,8,14,.72),rgba(5,8,14,.72)),url(img/hero-partner-blueprint.jpg) center/cover;background:linear-gradient(rgba(5,8,14,.72),rgba(5,8,14,.72)),image-set(url(img/hero-partner-blueprint.webp) type("image/webp"),url(img/hero-partner-blueprint.jpg) type("image/jpeg")) center/cover}}

/* ===== VIEWER QUOTES CAROUSEL (Partner page): sideways strip, 4 cards on desktop, 1 on phones ===== */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
}
.carousel .quotes {
  columns: auto;
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 2px 10px;
  flex: 1;
}
.carousel .quotes::-webkit-scrollbar {
  display: none;
}
.carousel .q {
  flex: 0 0 calc((100% - 60px) / 4);
  scroll-snap-align: start;
  margin: 0;
}
.car-btn {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: var(--navy);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}
.car-btn:hover,
.car-btn:focus-visible {
  background: var(--navy2);
  outline: 2px solid var(--navy2);
  outline-offset: 2px;
}
@media (max-width: 760px) {
  .carousel .q {
    flex: 0 0 100%;
  }
  .car-btn {
    width: 34px;
    height: 34px;
  }
}

/* ===== CAROUSEL DOTS: page indicators under the comments, navy with the active one wider ===== */
.car-dots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.car-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #c3cbd6;
  cursor: pointer;
  transition: width .2s, background .2s;
}
.car-dot:hover {
  background: var(--navy2);
}
.car-dot:focus-visible {
  outline: 2px solid var(--navy2);
  outline-offset: 2px;
}
.car-dot.active {
  width: 26px;
  background: var(--navy);
}

/* ===== SUPPORTER PERKS (homepage): photo background with navy overlay, perk text left, Discord VIP screenshot right ===== */
.perks {
  color: #fff;
  padding: 80px 0;
  background: linear-gradient(120deg, rgba(12, 45, 87, .93), rgba(5, 8, 14, .85)), url(img/hero-games-desk.jpg) center/cover;
  background: linear-gradient(120deg, rgba(12, 45, 87, .93), rgba(5, 8, 14, .85)), image-set(url(img/hero-games-desk.webp) type("image/webp"), url(img/hero-games-desk.jpg) type("image/jpeg")) center/cover;
}
.perks h2 {
  color: #fff;
}
.perks-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 48px;
  align-items: center;
}
.perk-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin: 24px 0 28px;
}
.perk {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-left: 4px solid #8fb3ff;
  border-radius: 10px;
  padding: 20px 22px;
}
.perk h3 {
  color: #fff;
  margin: 0 0 8px;
}
.perk p {
  color: #dbe4f1;
  margin: 0 0 10px;
}
.perks .ctas .btn.ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .6);
}
.perks-shot img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  object-position: top;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}
@media (max-width: 860px) {
  .perks {
    padding: 60px 0;
  }
  .perks-grid,
  .perk-cards {
    grid-template-columns: 1fr;
  }
  .perks-shot img {
    max-height: 480px;
  }
}

/* ===== CAROUSEL FIT TEXT: cards are all the tallest card's height; the quote line-height stays comfortable as the script grows short comments ===== */
.carousel .q {
  box-sizing: border-box;
  overflow: hidden;
}
.carousel .q blockquote {
  line-height: 1.45;
}

/* ===== VIEWER COMMENTS BACKGROUND: gray-blue tint from the site palette so the white comment cards stand out ===== */
.quotes-band {
  background: #d3dbe6;
}
.quotes-band .carousel .q {
  box-shadow: 0 2px 8px rgba(12, 45, 87, .12);
}
.quotes-band .car-dot {
  background: #9aa8ba;
}
.quotes-band .car-dot.active {
  background: var(--navy);
}

/* ===== PERKS RIGHT COLUMN: screenshot with the Join Discord button centered underneath ===== */
.perks-side {
  text-align: center;
}

/* ===== HOMEPAGE LATEST VIDEOS ON PHONES: 2 columns, only the first 4 videos shown. ===== */
/* ===== CSS only, so the cron block still writes all 6. Desktop is unchanged. ===== */
@media (max-width: 860px) {
  #videos .vids { grid-template-columns: 1fr 1fr; gap: 16px; }
  #videos .vids > :nth-child(n+5) { display: none; }
  #videos .vid h3 { font-size: .88rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  #videos .vid .meta { font-size: .76rem; }
  #videos .thumb img { border-radius: 8px; }
}

/* ===== STREAM SCHEDULE ON PHONES: hide days with no stream. ===== */
/* ===== Days with a stream get class "has" from both update_streams.py and the in-page script, so empty days are .sday without .has. ===== */
/* ===== If no day has a stream, one short line shows instead of a blank section. Desktop still shows all 7 days. ===== */
@media (max-width: 600px) {
  .sweek .sday:not(.has) { display: none; }
  .sweek:not(:has(.sday.has))::before {
    content: "No streams scheduled this week";
    display: block;
    padding: 14px 16px;
    color: #5a6472;
    border: 1px dashed #cfd6df;
    border-radius: 10px;
    text-align: center;
  }
}

/* ===== STREAM SCHEDULE SPACING: less empty space around the schedule. The inside of the day cards is unchanged. ===== */
/* ===== Desktop: section padding 84px down to 48px top and bottom. ===== */
#streams.sec { padding: 48px 0; }
/* ===== Phones: section padding 60px down to 24px top, 16px bottom, and 10px sides (was 24px) on both left and right. ===== */
@media (max-width: 600px) {
  #streams.sec { padding: 24px 0 16px; }
  #streams .wrap { padding: 0 10px; }
}

/* ===== HOMEPAGE HERO BUTTONS ON PHONES: YouTube, Twitch and Join Discord stay on one row from 360px to 430px. ===== */
/* ===== Smaller padding, font and gap, no wrapping, and each button shares the row width equally. ===== */
@media (max-width: 600px) {
  .home-hero .ctas { flex-wrap: nowrap; gap: 8px; }
  .home-hero .ctas .btn { flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center; padding: .7em .5em; font-size: .9rem; }
}

/* ===== STREAM DAY WITH A STREAM: tighter cell so the blue stream block fills most of it. Only days with a stream (.sday.has) change. ===== */
/* ===== Desktop: cell padding 16px 14px to 8px, gap 10px to 6px, date underline spacing 8px to 5px, and the blue block grows to fill the cell height. ===== */
.sday.has { padding: 8px; gap: 6px; }
.sday.has .sdate { padding: 2px 4px 5px; }
.sday.has .sitem { flex: 1; justify-content: center; }
/* ===== Phones: cell padding to 8px, gap to 8px, date column 92px to 64px wide so the blue block gets the rest of the row. ===== */
@media (max-width: 600px) {
  .sday.has { padding: 8px; gap: 8px; flex-wrap: nowrap; align-items: stretch; }
  .sday.has .sdate { min-width: 64px; padding: 0 0 0 6px; justify-content: center; }
}