/* Press Play — site styles. Colours and fonts are set once in :root below. */

:root {
  --white: #ffffff;
  --tint: #f4f6fb;
  --line: #e2e6f0;
  --ink: #17161c;
  --navy: #3d4260;
  --red: #d1300b;
  --red-dark: #a72609;
  --gold: #ffb800;
  --green: #22c55e;
  --dark: #0f1014;
  --dark-2: #1a1b22;
  --font: "Poppins", "Segoe UI", Arial, sans-serif;
  --max: 1200px;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Several things below are display:flex/grid, which beats the browser's own
   rule for [hidden]. The page toggles hidden from script to show and hide the
   countdown and the tournament picker, so it has to win here. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
img { max-width: 100%; display: block; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 20px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; }
h1 { font-weight: 800; text-transform: uppercase; font-size: clamp(34px, 6.5vw, 64px); letter-spacing: .01em; line-height: 1.05; }
h2 { font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); letter-spacing: .01em; }
h2.bar { position: relative; padding-bottom: 14px; }
h2.bar::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; background: var(--red); border-radius: 2px; }
h3 { font-weight: 600; font-size: 18px; }
h4 { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--red); }
p { margin: 0; }
.lede { font-size: 16px; color: var(--navy); max-width: 62ch; }
.num { font-variant-numeric: tabular-nums; }
.sec-head { display: grid; gap: 14px; margin-bottom: 32px; }
section { padding: 64px 0; }
@media (min-width: 900px) { section { padding: 88px 0; } .sec-head { margin-bottom: 40px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-weight: 700; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; padding: 14px 26px; border-radius: 8px; text-decoration: none; cursor: pointer; border: 2px solid transparent; min-height: 48px; transition: background .15s, border-color .15s, transform .1s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn-red { background: var(--red); color: #fff; border-color: var(--red); }
.btn-red:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.btn-outline { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); }
.btn-sm { padding: 10px 16px; min-height: 40px; font-size: 12px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 20; background: var(--white); border-bottom: 1px solid var(--line); box-shadow: 0 2px 12px rgba(23,22,28,.06); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 72px; }
.nav img { height: 44px; width: auto; }
.nav-links { display: none; gap: 30px; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.nav-links a { text-decoration: none; color: var(--ink); padding: 6px 0; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-bottom-color: var(--red); }
@media (min-width: 900px) { .nav-links { display: flex; } }

/* Hero */
.hero { position: relative; background: var(--dark) url("../images/hero-bg.jpg") center / cover no-repeat; color: #fff; padding: 72px 0 80px; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,16,20,.82) 0%, rgba(15,16,20,.55) 55%, rgba(15,16,20,.25) 100%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--red); }
.hero .wrap { position: relative; display: grid; gap: 22px; }
.hero-copy { display: grid; gap: 22px; min-width: 0; }
.hero .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.hero .kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(34,197,94,.25); }
.hero h1 { max-width: 14ch; text-shadow: 0 6px 30px rgba(0,0,0,.5); }
.hero .lede { color: rgba(255,255,255,.9); font-size: 17px; max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-row .btn { flex: 1 1 200px; }
.hero .cta-row { margin-top: 6px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 10px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.85); }
.hero-facts span::before { content: "✓"; color: var(--gold); margin-right: 8px; font-weight: 800; }
@media (min-width: 900px) { .hero { padding: 120px 0 128px; } .hero-copy { gap: 26px; } .cta-row .btn { flex: 0 1 auto; } }

/* Hero game cards — decorative float, wide screens only */
.hero-cards { display: none; }
@media (min-width: 1100px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
  .hero-cards { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }
  .hero-card { --r: 0deg; --y: 0px; flex: 0 0 auto; width: clamp(116px, 13.8vw, 166px); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 38px rgba(0,0,0,.45); transform: translateY(var(--y)) rotate(var(--r)); animation: hero-float 7s ease-in-out infinite; transition: box-shadow .2s; }
  .hero-card:nth-child(1) { --r: -4deg; --y: 22px; animation-delay: -.6s; }
  .hero-card:nth-child(2) { --r: 0deg; --y: -18px; width: clamp(141px, 16.8vw, 202px); animation-delay: -2.8s; }
  .hero-card:nth-child(3) { --r: 4deg; --y: 26px; animation-delay: -4.9s; }
  .hero-card:hover { box-shadow: 0 24px 48px rgba(0,0,0,.55); }
  .hero-card img { width: 100%; height: auto; }
}
@keyframes hero-float {
  0%, 100% { transform: translateY(var(--y)) rotate(var(--r)); }
  50% { transform: translateY(calc(var(--y) - 14px)) rotate(var(--r)); }
}

/* Games */
.games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
@media (min-width: 700px) { .games { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px 20px; } }
.game { display: grid; gap: 10px; align-content: start; min-width: 0; }
.tile { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--dark-2); display: block; box-shadow: 0 8px 24px rgba(23,22,28,.14); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.game:hover .tile img { transform: scale(1.05); }
.tile .badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 5px 9px; border-radius: 6px; background: var(--red); color: #fff; }
.tile .badge.live { background: var(--green); color: #05270f; }
.tile .over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(15,16,20,.55); opacity: 0; transition: opacity .2s; }
.game:hover .tile .over, .tile:focus-visible .over { opacity: 1; }
.tile-soon { display: grid; place-items: center; text-align: center; padding: 16px; color: #fff; font-weight: 600; font-size: 12px; line-height: 1.4; background: linear-gradient(160deg, #23242e, #0f1014); box-shadow: none; }
.tile-soon img { width: 58%; height: auto; margin: 0 auto 12px; }
.game-meta { display: grid; gap: 2px; min-width: 0; }
.game-meta h3 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.game-specs { font-size: 12px; color: var(--navy); line-height: 1.4; }
.game-specs b { color: var(--ink); font-weight: 700; white-space: nowrap; }
.game-specs i { font-style: italic; }
.game-links { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.game-links a { text-decoration: none; color: var(--red); }
.game-links a:hover { text-decoration: underline; }
.game-links a.alt { color: var(--navy); }
.games-foot { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 18px 22px; background: var(--tint); border-radius: 12px; }
.games-foot p { font-size: 14px; color: var(--navy); }
.games-foot .cta-row .btn { flex: 0 1 auto; }

/* Bands */
.band { background: var(--tint); }
.two { display: grid; gap: 28px; }
.two > * { min-width: 0; }
@media (min-width: 900px) { .two { grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: start; } }
.card { background: var(--white); border-radius: 12px; box-shadow: 0 8px 28px rgba(23,22,28,.08); }
.rules { display: grid; }
.rule { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); align-items: start; }
.rule:last-child { border-bottom: 0; }
.rule b { font-size: 22px; font-weight: 800; color: var(--red); line-height: 1.2; }
.rule span { font-size: 14px; color: var(--navy); }
.rule span strong { color: var(--ink); font-weight: 700; }
.countdown { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 16px 20px; background: var(--dark); color: #fff; border-radius: 0 0 12px 12px; }
.countdown b { font-size: 24px; font-weight: 800; color: var(--gold); }
.countdown small { color: rgba(255,255,255,.8); font-size: 13px; }
.steps { display: grid; gap: 10px; margin-top: 22px; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; font-size: 14px; }
.step i { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--red); color: #fff; font-weight: 800; font-size: 14px; }
.step strong { display: block; font-weight: 700; }
.step span { color: var(--navy); }
.prizes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.prize { padding: 16px 18px; display: grid; gap: 2px; }
.prize b { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
.prize span { display: flex; align-items: baseline; gap: 7px; font-size: 13px; color: var(--navy); }
.prize span strong { font-size: clamp(30px, 7.4vw, 38px); font-weight: 800; color: var(--ink); line-height: 1.05; }

/* Forms */
.form .err { display: none; padding: 12px 14px; border-radius: 8px; background: #fdeee9; border: 1px solid #f3bda9; font-size: 14px; }
.form.failed .err { display: block; }
.form button[disabled] { opacity: .6; cursor: wait; }
.form { padding: 24px; display: grid; gap: 14px; }
.form label { display: grid; gap: 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); }
.form input, .form select, .form textarea { font: inherit; font-size: 15px; color: var(--ink); background: var(--tint); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; width: 100%; min-height: 48px; text-transform: none; letter-spacing: 0; }
.form input:focus, .form select:focus, .form textarea:focus { background: var(--white); border-color: var(--ink); }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.form input::placeholder, .form textarea::placeholder { color: #7a7f99; }
.form textarea { min-height: 110px; resize: vertical; }
.form .hint { font-size: 12px; color: var(--navy); font-weight: 400; text-transform: none; letter-spacing: 0; }
.form .lbl { display: block; }
.form .opt { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--navy); }
.form .row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form .row { grid-template-columns: 1fr 1fr; } }
.form .ok { display: none; padding: 12px 14px; border-radius: 8px; background: #e8f6ee; border: 1px solid #bfe3cf; font-size: 14px; }
.form.sent .ok { display: block; }
.form.sent .btn { display: none; }
/* Submissions closed: the fields are disabled in script, this makes it look
   shut so nobody starts typing into a form that cannot be sent. */
.form .note { display: none; padding: 12px 14px; border-radius: 8px; background: #fff5e0; border: 1px solid #f0d491; font-size: 14px; color: var(--ink); }
.form.closed .note { display: block; }
.form.closed label, .form.closed .hint { opacity: .55; }
.form.closed button[disabled] { opacity: .5; cursor: not-allowed; }

/* Leaderboard */
.board-pick { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.board-pick label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); }
.board-pick select { font: inherit; font-size: 14px; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; min-height: 40px; max-width: 100%; }
.board-pick select:hover { border-color: var(--ink); }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 16px 20px; background: var(--dark); color: #fff; border-radius: 12px 12px 0 0; }
.board-head h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; }
.board-head small { color: rgba(255,255,255,.75); font-size: 12px; }
.board-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.board-meta .tag { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; background: var(--gold); color: #2b1d00; }

/* The row area: at most ten rows tall, then it scrolls inside itself.
   .board-scroll is the only scroll container and it takes both axes. The
   horizontal scroll a narrow phone needs was already here; putting the
   vertical cap on the SAME element is what keeps a phone from ending up with
   two nested scrollbars arguing over a swipe.
   The height itself is not written here. A row is as tall as its contents —
   a long channel name wraps to two lines and every hardcoded "10 × 53px"
   would then slice the tenth row in half — so js/main.js measures ten real
   rows once they are in the document and sets --board-max. No script, no
   --board-max, no cap: the table then behaves exactly as it did before. */
.board-rows { position: relative; }
/* Scroll chaining is deliberately left alone (no overscroll-behavior): a
   finger or a wheel that runs out of list carries on down the page, which is
   what everyone expects. Containing it would mean a visitor who swipes over
   the board on a phone reaches the last row and then finds the page itself
   stuck under their thumb. */
.board-scroll { overflow: auto; max-height: var(--board-max, none); }
/* The global focus ring only covers links and form controls, and this box is
   focusable so the keyboard can scroll it. Inset so the ring is not clipped
   by the box's own overflow. */
.board-scroll:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
/* Two cues that the list continues, because on a Mac the scrollbar is hidden
   until you touch it and a board that is quietly cut off at row ten reads as
   a board with ten entrants.
   1. A permanently visible, slim scrollbar. Styling ::-webkit-scrollbar is
      what opts macOS out of the overlay scrollbar that fades away. */
.board-rows.is-capped .board-scroll { scrollbar-width: thin; scrollbar-color: #aeb5cb var(--tint); }
.board-rows.is-capped .board-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.board-rows.is-capped .board-scroll::-webkit-scrollbar-track { background: var(--tint); }
.board-rows.is-capped .board-scroll::-webkit-scrollbar-thumb { background: #aeb5cb; border-radius: 6px; border: 2px solid var(--tint); }
.board-rows.is-capped .board-scroll::-webkit-scrollbar-thumb:hover { background: var(--navy); }
/* 2. A fade over the last rows. It lives on the wrapper rather than inside
      the scroll box, or it would scroll away with the rows it is describing,
      and it is switched off at the bottom of the list — a fade still sitting
      there when there is nothing below it is just a lie about the last row. */
.board-rows::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; pointer-events: none; opacity: 0; transition: opacity .15s ease; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.94)); }
.board-rows.is-capped::after { opacity: 1; }
.board-rows.is-capped.is-end::after { opacity: 0; }
table.lb { width: 100%; border-collapse: collapse; font-size: 14px; }
table.lb th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--navy); font-weight: 700; padding: 10px 16px; border-bottom: 1px solid var(--line); white-space: nowrap; background: var(--tint); }
/* The headings stay put while the rows scroll under them. The th already has
   an opaque background, so nothing shows through. The inset shadow repeats
   the bottom border: with border-collapse the collapsed border belongs to the
   row below and scrolls away with it, while a shadow is painted by the sticky
   cell itself and stays. Same colour and position as the border, so on a
   board short enough not to scroll the two land on top of each other and
   nothing looks different.
   Scoped to .board-scroll on purpose. table.lb is shared with the admin
   panel's board preview, which has its own wrapper and no height cap;
   sticking a header inside a box that never scrolls vertically is harmless,
   but scoping it means the admin preview is not touched at all, and picks
   this up only if it adopts .board-scroll. */
.board-scroll table.lb thead th { position: sticky; top: 0; z-index: 1; box-shadow: inset 0 -1px 0 var(--line); }
table.lb td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.lb tr:last-child td { border-bottom: 0; }
table.lb .rank { font-weight: 800; color: var(--navy); width: 44px; font-size: 16px; }
table.lb tr.top .rank { color: var(--red); }
table.lb .who { font-weight: 700; }
table.lb .who a { text-decoration: none; }
table.lb .who a:hover { text-decoration: underline; color: var(--red); }
table.lb .who small { display: block; font-weight: 500; color: var(--navy); font-size: 12px; }
table.lb .hits { font-weight: 800; color: var(--ink); white-space: nowrap; font-size: 17px; }
table.lb .gm { color: var(--navy); white-space: nowrap; }
table.lb .right { text-align: right; }
/* Empty placeholder rows, so a tournament with two entrants still looks like
   a leaderboard rather than a box that failed to load. Muted and plainly
   blank: nothing here may be mistakeable for a streamer who has entered, and
   .top is never put on one, so an empty row in a paying place is never dressed
   up as a winner. js/main.js also hides these from assistive technology. */
table.lb tr.ghost td { color: #9aa0b8; }
table.lb tr.ghost .rank { color: #9aa0b8; font-weight: 700; }
table.lb tr.ghost .who { font-weight: 500; }
@media (max-width: 699px) { table.lb .gm { display: none; } }
.board-foot { padding: 12px 20px; font-size: 12px; color: var(--navy); border-top: 1px solid var(--line); }
.board-empty { padding: 28px 18px; color: var(--navy); text-align: center; }

/* About */
.features { display: grid; gap: 16px; margin-top: 8px; }
@media (min-width: 760px) { .features { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
.feature { padding: 26px 24px; display: grid; gap: 10px; align-content: start; border-top: 4px solid var(--red); }
.feature svg { width: 34px; height: 34px; color: var(--red); }
.feature h3 { text-transform: uppercase; font-size: 15px; letter-spacing: .04em; }
.feature p { font-size: 14px; color: var(--navy); }

/* Contact */
.channels { display: grid; gap: 10px; margin-top: 22px; }
.channel { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 10px; text-decoration: none; background: var(--white); box-shadow: 0 4px 16px rgba(23,22,28,.06); min-height: 54px; }
.channel:hover { box-shadow: 0 6px 20px rgba(23,22,28,.12); }
.channel b { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.channel span { color: var(--red); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.ph { border-bottom: 1px dotted var(--red); cursor: help; }

/* Footer */
footer { background: var(--dark); color: rgba(255,255,255,.75); padding: 48px 0 120px; font-size: 13px; }
footer .wrap { display: grid; gap: 28px; }
.foot-grid { display: grid; gap: 24px; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.foot-brand { display: grid; gap: 14px; }
.foot-brand img { height: 36px; width: auto; }
.foot-brand p { max-width: 40ch; }
footer h4 { color: #fff; margin-bottom: 12px; }
.foot-list { display: grid; gap: 8px; }
.foot-list a { text-decoration: none; color: rgba(255,255,255,.75); }
.foot-list a:hover { color: #fff; }
.socials { display: flex; gap: 10px; }
.socials a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: var(--dark-2); color: #fff; text-decoration: none; font-weight: 800; font-size: 12px; }
.socials a:hover { background: var(--red); }
.foot-bottom { border-top: 1px solid rgba(255,255,255,.12); padding-top: 22px; display: grid; gap: 16px; }
.rg { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.rg > span:last-child { flex: 1 1 260px; }
.age { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; border: 2px solid #fff; font-weight: 800; font-size: 13px; color: #fff; flex: 0 0 auto; }
footer a { color: #fff; }