/* PING PONG: the live broadcast of a rally between two coins. A studio-dark page around one picture, the court drawn as
   pixel art (world.js), with broadcast graphics on it: a score bug, an on-air pill, a lower third. Type: Bricolage
   Grotesque for headlines, Barlow for reading, Barlow Semi Condensed with tabular figures for the score and the numbers
   (the face of sports graphics), Martian Mono for addresses. The two team colours are the only colours. */
:root {
  --bg: #111014; --surface: #1a191f; --line: rgba(255, 255, 255, 0.075); --line2: rgba(255, 255, 255, 0.13);
  --text: #f4f2f6; --muted: #aaa7b0; --faint: #8b8892;
  --ping: #ff9488; --ping-ink: #2b0e0b; --ping-deep: #e5675b;
  --pong: #9dbfff; --pong-ink: #0c1730; --pong-deep: #6e9cf2;
  --live: #ff5d6c;
  --display: "Bricolage Grotesque", "Barlow", system-ui, sans-serif;
  --ui: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --figures: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --mono: "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  --settle: cubic-bezier(0.22, 1, 0.36, 1);
  --frame-r: 22px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: #3a3842 var(--bg); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #34323b; border-radius: 10px; border: 2px solid var(--bg); }
body { margin: 0; color: var(--text); background: var(--bg); font: 400 17px/1.6 var(--ui); -webkit-font-smoothing: antialiased; caret-color: var(--pong); }
a { color: inherit; text-underline-offset: 0.2em; }
::selection { background: var(--pong); color: var(--pong-ink); }
:focus-visible { outline: 2px solid var(--pong); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.muted { color: var(--muted); }
.num { font-family: var(--figures); font-variant-numeric: tabular-nums; }

/* pill buttons: soft team colour, dark type, a ledge that presses in */
.pill {
  --c: var(--ping); --ink: var(--ping-ink); --deep: var(--ping-deep);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 600 16px/1 var(--ui); letter-spacing: -0.005em; color: var(--ink); text-decoration: none; cursor: pointer;
  padding: 16px 26px 17px; border: 0; border-radius: 999px; background: var(--c);
  box-shadow: inset 0 -3px 0 var(--deep), 0 12px 26px -14px rgba(0, 0, 0, 0.8);
  transition: transform 0.45s var(--out), box-shadow 0.45s var(--out), filter 0.25s ease;
}
.pill.pong { --c: var(--pong); --ink: var(--pong-ink); --deep: var(--pong-deep); }
.pill.sm { padding: 10px 16px 11px; font-size: 14px; }
.pill:hover { transform: translateY(-2px); filter: brightness(1.05); box-shadow: inset 0 -3px 0 var(--deep), 0 18px 34px -16px rgba(0, 0, 0, 0.85); }
.pill:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 var(--deep), 0 6px 14px -10px rgba(0, 0, 0, 0.8); transition-duration: 0.1s; }
/* before launch: an outlined pill in its team colour, clearly not live yet, never muddy */
.pill[aria-disabled="true"] { cursor: default; pointer-events: none; background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 -2px 0 var(--deep); }
.textlink { color: var(--muted); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
.textlink:hover { color: var(--text); }
.textlink.xl { display: inline-flex; align-items: center; gap: 10px; }
.xlogo { width: 17px; height: 17px; flex: none; }
.iconlink { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: var(--muted); border: 1px solid var(--line2); transition: color 0.2s ease, background 0.2s ease; }
.iconlink:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* ---- header ---- */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: 68px; padding: 0 clamp(16px, 3vw, 32px); background: rgba(17, 16, 20, 0.84); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 800 21px/1 var(--display); letter-spacing: -0.025em; }
.brand svg { width: 30px; height: 30px; image-rendering: pixelated; }
.top nav { display: flex; gap: 26px; font-size: 15px; color: var(--muted); }
.top nav a { text-decoration: none; transition: color 0.2s ease; }
.top nav a:hover { color: var(--text); }
.top .cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }
@media (max-width: 900px) { .top nav { display: none; } }
@media (max-width: 480px) { .brand span { display: none; } .top .cta { gap: 8px; } .top .iconlink { width: 36px; height: 36px; } .pill.sm { padding: 9px 12px 10px; font-size: 13px; } }

/* ---- the broadcast frame: the court is the live picture, the graphics sit on it ---- */
.hero { padding-top: clamp(14px, 2vw, 24px); }
.frame { position: relative; width: min(1240px, 100% - 40px); margin-inline: auto; border-radius: var(--frame-r); overflow: hidden; isolation: isolate; box-shadow: 0 0 0 1px var(--line), 0 40px 100px -40px rgba(0, 0, 0, 0.8); }
.art { position: relative; height: clamp(320px, 52vh, 620px); background: var(--bg); }
.world-wrap { position: absolute; inset: 0; }
#world { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
html.no-world .art { background: radial-gradient(ellipse at 50% 72%, #2b2235, var(--bg) 70%); }
@media (max-width: 640px) { .frame { width: 100%; border-radius: 0; box-shadow: none; } .art { height: clamp(300px, 46vh, 460px); } }

/* score bug: top left, dark glass over the picture, the two vault totals in rolling figures */
.bug { position: absolute; z-index: 3; top: clamp(12px, 2vw, 22px); left: clamp(12px, 2vw, 22px); display: grid; grid-template-columns: auto auto; border-radius: 14px; overflow: hidden; background: rgba(10, 9, 13, 0.66); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 18px 40px -18px rgba(0, 0, 0, 0.7); }
.bug .team { display: flex; align-items: center; gap: 10px; padding: 11px 16px 9px; }
.bug .team.pong { justify-content: flex-end; box-shadow: -1px 0 0 rgba(255, 255, 255, 0.1); }
.bug .team b { font: 800 15px/1 var(--display); letter-spacing: 0.01em; }
.bug .sw { width: 10px; height: 10px; border-radius: 3px; background: var(--ping); }
.bug .pong .sw { background: var(--pong); }
.bug .num { font-size: clamp(20px, 2.2vw, 27px); font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
.bug .cap { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 14px; margin: 0; padding: 7px 16px 8px; font-size: 11.5px; color: var(--muted); border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.025); }
.bug .cap span:nth-child(2) { color: var(--faint); }
@media (max-width: 520px) { .bug .cap span:nth-child(2) { display: none; } .bug .team { padding: 9px 12px 8px; gap: 8px; } }

/* on-air pill: live when the worker reported in the last minutes, standby when it is quiet, warm-up before launch */
.onair { position: absolute; z-index: 3; top: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 9px 14px 9px 12px; border-radius: 999px; font: 600 13px/1 var(--ui); letter-spacing: 0.02em; background: rgba(10, 9, 13, 0.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.onair .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.onair[data-state="live"] .dot { background: var(--live); animation: onair 1.8s var(--out) infinite; }
.onair[data-state="live"] { color: #ffd9dd; }
.onair[data-state="warmup"] .dot { background: var(--pong); }
.onair[data-state="demo"] .dot { background: #ffd23f; }
.onair[data-state="demo"] { color: #ffe9a8; }
.onair.flash { animation: flash 0.9s var(--out); }
@keyframes onair { 0% { box-shadow: 0 0 0 0 rgba(255, 93, 108, 0.6); } 70% { box-shadow: 0 0 0 9px rgba(255, 93, 108, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 93, 108, 0); } }
@keyframes flash { 0% { background: rgba(255, 93, 108, 0.55); } 100% { background: rgba(10, 9, 13, 0.66); } }

/* lower third: the latest shot, wiping in from the left when a new one lands */
.lower { position: absolute; z-index: 3; left: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); max-width: min(560px, calc(100% - 24px)); margin: 0; padding: 11px 16px 12px; border-radius: 12px; font-size: 14px; line-height: 1.35; color: #e9e6ee; background: rgba(10, 9, 13, 0.66); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); }
.lower.in { animation: wipe 0.9s var(--out); }
@keyframes wipe { from { clip-path: inset(0 100% 0 0 round 12px); transform: translateX(-10px); } to { clip-path: inset(0 0 0 0 round 12px); transform: none; } }
.lower b.ping { color: var(--ping); font-weight: 600; }
.lower b.pong { color: var(--pong); font-weight: 600; }
.lower svg { width: 14px; height: 14px; vertical-align: -2px; margin: 0 5px; color: var(--muted); }

/* rolling figures: each digit a strip that slides to its value */
.roll { display: inline-flex; overflow: hidden; height: 1em; line-height: 1; }
.roll .d { display: inline-flex; flex-direction: column; transition: transform 1.1s var(--out); }
.roll .d span { display: block; height: 1em; line-height: 1em; }

/* the pitch under the picture */
.pitch { padding-top: clamp(26px, 3.2vw, 44px); }
h1 { margin: 0; font: 800 clamp(34px, 5.15vw, 74px)/1 var(--display); letter-spacing: -0.04em; }
h1 .l { white-space: nowrap; }
@media (max-width: 760px) { h1 .l { white-space: normal; } }
h1 .l { display: block; }
h1 .t-ping { color: var(--ping); }
h1 .t-pong { color: var(--pong); }
.pitch .side { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "lede go" "x go"; column-gap: clamp(24px, 5vw, 72px); row-gap: 14px; align-items: start; margin-top: clamp(20px, 2.4vw, 30px); }
.lede { grid-area: lede; margin: 0; max-width: 40em; font-size: clamp(16px, 1.3vw, 18px); color: var(--muted); }
.pitch .side > .textlink { grid-area: x; justify-self: start; }
.go { grid-area: go; display: grid; gap: 10px; justify-items: end; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.launchnote { margin: 0; font-size: 13.5px; color: var(--faint); }
.launchnote[hidden] { display: none; }
@media (max-width: 900px) { .pitch .side { grid-template-columns: 1fr; grid-template-areas: "lede" "go" "x"; } .go { justify-items: start; } }

/* ---- sections: stacked blocks with deep gaps between them ---- */
main > section.wrap { padding-top: clamp(96px, 13vw, 168px); }
h2 { margin: 0 0 clamp(28px, 4vw, 44px); font: 800 clamp(34px, 4.2vw, 56px)/1.02 var(--display); letter-spacing: -0.035em; }

/* how a point works: one track, four stops; the line draws itself and a ball runs it once */
.track { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); counter-reset: stop; }
.track::before { content: ""; position: absolute; left: 6px; right: 6px; top: 6px; height: 2px; background: var(--line2); }
.track li { position: relative; display: grid; gap: 8px; padding-top: 36px; counter-increment: stop; }
.track .node { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 2px var(--ping); }
.track li:nth-child(even) .node { box-shadow: inset 0 0 0 2px var(--pong); }
.track b { font: 700 21px/1.2 var(--display); letter-spacing: -0.015em; }
.track span:not(.node) { color: var(--muted); font-size: 15.5px; }
.track .ball { position: absolute; top: -1px; left: 0; width: 16px; height: 16px; border-radius: 50%; background: #fff8ec; box-shadow: 0 6px 14px -4px rgba(0, 0, 0, 0.6); pointer-events: none; }
@media (max-width: 900px) {
  .track { grid-template-columns: 1fr; row-gap: 34px; padding-left: 34px; }
  .track::before { left: 6px; right: auto; top: 8px; bottom: 8px; width: 2px; height: auto; }
  .track li { padding-top: 0; }
  .track .node { top: 4px; left: -34px; }
  .track .ball { display: none; }
}

/* match log */
.log .head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.log .head h2 { margin-bottom: 18px; }
.log .head p { margin: 0 0 18px; font-size: 15px; }
.shots { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.shots li { display: grid; grid-template-columns: 74px minmax(0, 1.3fr) minmax(0, 0.8fr) minmax(0, 1fr) 104px; gap: 16px; align-items: center; padding: 17px 2px; border-bottom: 1px solid var(--line); font-size: 15px; }
.shots .t { font-family: var(--figures); font-variant-numeric: tabular-nums; color: var(--faint); }
.shots .dir { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.shots .dir b { font-weight: 600; }
.shots .dir b.ping { color: var(--ping); }
.shots .dir b.pong { color: var(--pong); }
.shots .dir svg { width: 14px; height: 14px; color: var(--faint); }
.shots .sol { font-family: var(--figures); font-weight: 600; font-size: 17px; font-variant-numeric: tabular-nums; }
.shots .tok { color: var(--muted); font-family: var(--figures); font-variant-numeric: tabular-nums; font-size: 16px; }
.shots .tx { justify-self: end; display: inline-flex; align-items: center; gap: 7px; color: var(--muted); text-decoration: none; font-size: 14px; }
.shots .tx:hover { color: var(--text); }
.shots .tx svg { width: 15px; height: 15px; color: #7fd8a0; }
.shots li.new { animation: rowin 0.9s var(--settle) both; }
@keyframes rowin { from { opacity: 0; transform: translateY(-14px) scale(0.98); background: rgba(157, 191, 255, 0.06); } to { opacity: 1; transform: none; background: transparent; } }
.empty { margin: 22px 0 0; color: var(--muted); font-size: 15px; }
@media (max-width: 680px) { .shots li { grid-template-columns: 54px minmax(0, 1fr) auto; } .shots .tok, .shots .tx span { display: none; } }

/* the two players */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
.player { padding: 0 clamp(22px, 2.6vw, 30px) clamp(22px, 2.6vw, 30px); border-radius: 20px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.player header { display: flex; align-items: flex-end; gap: 18px; margin: 0 calc(-1 * clamp(22px, 2.6vw, 30px)) 18px; padding: 22px clamp(22px, 2.6vw, 30px) 18px; background: rgba(255, 148, 136, 0.1); border-bottom: 1px solid var(--line); }
.player.pong header { background: rgba(157, 191, 255, 0.1); }

.player .portrait { width: clamp(92px, 9vw, 120px); height: auto; aspect-ratio: 1; border-radius: 18px; flex: none; image-rendering: pixelated; box-shadow: 0 0 0 1px var(--line2), 0 16px 30px -18px rgba(0, 0, 0, 0.8); }
.player h3 { margin: 0; font: 800 clamp(26px, 2.6vw, 32px)/1.1 var(--display); letter-spacing: -0.02em; }
.player .addr { margin: 4px 0 0; font: 400 13px/1.4 var(--mono); color: var(--faint); word-break: break-all; }
.player .addr a { text-decoration: none; }
.player .addr a[href]:hover { color: var(--text); }
.player dl { margin: 0; }
.player dl div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); font-size: 15px; }
.player dt { color: var(--faint); }
.player dd { margin: 0; }
.player .ca { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.player .ca span { font: 700 13px/1 var(--ui); padding: 6px 10px; border-radius: 999px; color: var(--ping-ink); background: var(--ping); }
.player.pong .ca span { color: var(--pong-ink); background: var(--pong); }
.player .ca code { font: 400 13.5px/1.4 var(--mono); color: var(--muted); word-break: break-all; }
@media (max-width: 760px) { .pair { grid-template-columns: 1fr; } }

/* the close */
.close h2 { font-size: clamp(48px, 7.5vw, 112px); margin-bottom: 30px; }
.close .fine { max-width: 60em; margin: clamp(56px, 7vw, 88px) 0 0; font-size: 14px; color: var(--faint); }
.foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(64px, 8vw, 104px); padding: 28px 0 40px; border-top: 1px solid var(--line); }

/* ---- labels over the picture ---- */
.labels { position: fixed; inset: 0; z-index: 65; pointer-events: none; overflow: hidden; }
.pop { position: absolute; left: 0; top: 0; white-space: nowrap; font: 700 26px/1 var(--figures); letter-spacing: -0.01em; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55); will-change: transform, opacity; }
.pop.ping { color: #ffd3cd; }
.pop.pong { color: #d8e5ff; }
.pop.say { font: 800 20px/1 var(--display); letter-spacing: -0.01em; padding: 9px 14px 10px; border-radius: 999px; color: var(--ping-ink); background: var(--ping); text-shadow: none; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.5); }
.pop.say.pong { color: var(--pong-ink); background: var(--pong); }

/* ---- the opener and the hand-over ---- */
html.intro-on body { overflow: hidden; }
html.intro-on .world-wrap { position: fixed; inset: 0; z-index: 60; }
html.intro-on .art { background: transparent; }
html.intro-on .frame { overflow: visible; box-shadow: none; }
html.intro-on:not(.intro-playing) #world { filter: blur(12px) brightness(0.55) saturate(1.1); transform: scale(1.05); }
#world { transition: filter 0.9s var(--out), transform 1.4s var(--out); }
html.intro-on .top, html.intro-on .pitch, html.intro-on .bug, html.intro-on .onair, html.intro-on .lower, html.intro-on main > section.wrap, html.intro-on .foot { opacity: 0; transform: translateY(14px); }
.top, .pitch, main > section.wrap, .foot { transition: opacity 1.1s var(--out), transform 1.2s var(--out); }
.bug, .onair, .lower { transition: opacity 0.9s var(--out), transform 1s var(--out); }
html.intro-on.ui-in .top, html.intro-on.ui-in .pitch, html.intro-on.ui-in main > section.wrap, html.intro-on.ui-in .foot { opacity: 1; transform: none; position: relative; z-index: 62; }
html.intro-on.ui-in .top { position: sticky; }
html.intro-on.ui-in .bug, html.intro-on.ui-in .onair, html.intro-on.ui-in .lower { opacity: 1; transform: none; z-index: 62; }
html.ui-in .pitch { transition-delay: 0.12s; }
html.ui-in .bug { transition-delay: 0.3s; }
html.ui-in .onair { transition-delay: 0.42s; }
html.ui-in .lower { transition-delay: 0.54s; }
.intro { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; transition: opacity 0.6s var(--out); }
html.no-intro .intro { display: none; }
.intro.out { opacity: 0; pointer-events: none; }
.intro.playing { pointer-events: none; }
.intro.playing .icorner { pointer-events: auto; }
.ienter {
  display: inline-flex; align-items: center; gap: 18px; padding: 12px 34px 12px 12px; border: 0; border-radius: 999px; cursor: pointer;
  font: 800 30px/1 var(--display); letter-spacing: -0.02em; color: var(--pong-ink); background: var(--pong);
  box-shadow: inset 0 -4px 0 var(--pong-deep), 0 0 0 1px rgba(255, 255, 255, 0.22), 0 26px 60px -20px rgba(0, 0, 0, 0.75);
  transition: transform 0.5s var(--out), opacity 0.5s var(--out);
  animation: breathe 3.2s ease-in-out infinite;
}
.ienter:hover { transform: scale(1.03); }
.ienter:active { transform: scale(0.98); }
.iplay { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--pong-ink); color: var(--pong); }
.iplay svg { width: 26px; height: 26px; margin-left: 3px; }
@keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
.intro.playing .ienter { opacity: 0; transform: scale(0.94); }
.icorner { position: absolute; right: 22px; bottom: 22px; display: flex; gap: 10px; transition: opacity 0.5s var(--out); }
html.ui-in .icorner { opacity: 0; pointer-events: none; }
.iround { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line2); background: rgba(17, 16, 20, 0.45); color: var(--text); cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background 0.2s ease; }
.iround:hover { background: rgba(255, 255, 255, 0.1); }
.iround svg { width: 22px; height: 22px; }
.isound .off { display: none; }
.isound[aria-pressed="true"] .on { display: none; }
.isound[aria-pressed="true"] .off { display: inline; }
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
  .top, .pitch, main > section.wrap, .foot, .bug, .onair, .lower, #world, .roll .d, .track::before { transition: none; }
  .lower.in, .shots li.new, .onair[data-state="live"] .dot { animation: none; }
}