/* Zillion brand theme.
 *
 * The tokens below are not eyeballed from a screenshot — they were read out of
 * zillion.events itself with getComputedStyle, counted by frequency across every
 * element on the page. That is why they are exact:
 *
 *   #000000   the ground. Pure black, not a near-black
 *   #ff00c8   the signature magenta. 110 uses on the home page, the most used
 *             colour after white — the logo, the "the" prefixes, every accent
 *   #e0ff00   acid yellow. Used sparingly and always as an OUTLINE (their cart
 *             button), never as a fill. Copying that restraint is what makes it
 *             read as Zillion rather than as a generic dark theme
 *   #05dfd7   cyan, the quiet third accent
 *   Poppins   700 for navigation and headings, from Google Fonts
 *
 * The Samhain variant keeps the same bones and swaps the accent to the reds that
 * the event page uses (#f91110), because that is what the brand itself does: one
 * skeleton, a different temperature per event.
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,600;0,700;0,800;1,700&display=swap');

:root {
  --ink: #ffffff;
  --dim: #9aa3b0;
  --ground: #000000;
  --panel: #0d0d10;
  --panel-2: #141418;
  --line: #ffffff1a;

  --accent: #ff00c8;          /* the pink */
  --accent-soft: #ff00c826;
  --signal: #e0ff00;          /* acid yellow, outlines only */
  --cool: #05dfd7;            /* cyan */

  --hero-tint-a: #ff00c81f;
  --hero-tint-b: #0023e01a;

  --radius: 12px;
  --font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  color-scheme: dark;
}

/* Samhain — 31.10.2026, Antwerp Expo. Same skeleton, colder ground, hotter accent. */
:root[data-theme='samhain'] {
  --ground: #06040a;
  --panel: #100a0d;
  --panel-2: #170e12;
  --accent: #f91110;
  --accent-soft: #f9111026;
  --signal: #ff7a1f;
  --cool: #8b5cf6;
  --hero-tint-a: #f9111024;
  --hero-tint-b: #0023e01c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  display: flex;
  flex-direction: column;
}

/* ---------------------------------------------------------- the top strip */
/* zillion.events opens with a slim black bar carrying "Follow the madness".
 * Ours carries what a radio should say up there: whether it is on. */
.strip {
  border-bottom: 1px solid var(--line);
  background: #000;
}
.strip-in {
  max-width: 1180px; margin: 0 auto; padding: 9px 24px;
  display: flex; align-items: center; gap: 14px;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.strip .tag { color: var(--dim); }
.strip .live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--dim);
}
.strip .live .dot { width: 8px; height: 8px; border-radius: 50%; background: #3d4750; }
.strip .live[data-on='1'] { color: var(--ink); }
.strip .live[data-on='1'] .dot { background: var(--accent); box-shadow: 0 0 10px var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .strip .live[data-on='1'] .dot { animation: beat 2.4s ease-in-out infinite; }
}
@keyframes beat { 50% { opacity: .3; } }

/* ------------------------------------------------------------------- head */
header.top {
  max-width: 1180px; width: 100%; margin: 0 auto; padding: 26px 24px 18px;
  display: flex; align-items: center; gap: 4px 18px; flex-wrap: wrap;
}
.logo { display: block; line-height: 0; }
/* ⚠️ Sized by HEIGHT, not width. The logo PNG carries a lot of transparent
 * padding around the script mark, so a width clamp leaves it floating with the
 * wordmark small and the box huge -- which is exactly how the first version
 * looked. Height plus width:auto makes the visible mark the thing being sized. */
.logo img { display: block; height: clamp(48px, 5.2vw, 72px); width: auto; }

/* Their signature device: a small lowercase "the" in pink, tight against a
 * heavy white word. It is the single most recognisable thing in their nav, and
 * it costs nothing to honour. */
.the { font-weight: 800; font-size: 1rem; letter-spacing: .02em; line-height: 1; }
.the > i { font-style: normal; font-size: .62em; color: var(--accent); margin-right: 1px; }

nav.crumbs { margin-left: auto; display: flex; gap: 20px; align-items: baseline; }
nav.crumbs a { color: var(--ink); text-decoration: none; opacity: .85; }
nav.crumbs a:hover { opacity: 1; }
nav.crumbs a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* ------------------------------------------------------------------ event */
.event {
  max-width: 1180px; width: 100%; margin: 0 auto 4px; padding: 0 24px;
}
.event-card {
  position: relative; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--panel);
  padding: 26px 26px 24px;
  display: flex; align-items: center; gap: 26px; flex-wrap: wrap;
}
.event-card::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(680px 300px at 82% -30%, var(--hero-tint-a), transparent 65%),
    radial-gradient(520px 280px at 4% 120%, var(--hero-tint-b), transparent 62%);
}
.event-card > * { position: relative; }
.event-logo img { display: block; width: clamp(200px, 30vw, 330px); height: auto; }
.event-meta { min-width: 0; }
.event-meta h2 {
  margin: 0; font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
}
.event-meta p { margin: 6px 0 0; color: var(--dim); font-size: .92rem; }
.event-meta .when { color: var(--signal); font-weight: 700; letter-spacing: .06em; }

/* ------------------------------------------------------------------- main */
main {
  flex: 1 1 auto; width: 100%; max-width: 1180px; margin: 0 auto;
  padding: 18px 24px 30px;
  display: grid; gap: 20px; grid-template-columns: 1fr;
  align-content: start; align-items: start;
}
@media (min-width: 940px) {
  /* align-items: start, so the stage keeps its natural height instead of being
   * stretched to the chat's -- which left a large empty gap under the player. */
  main { grid-template-columns: minmax(0, 1fr) 400px; }
  zillion-chat { height: min(620px, calc(100dvh - 260px)); }
}

.stage {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; display: flex; flex-direction: column; gap: 18px; min-height: 0;
}
.stage h2 { margin: 0; }
.stage p { margin: 0; color: var(--dim); font-size: .92rem; line-height: 1.65; max-width: 60ch; }
.stage p b { color: var(--ink); font-weight: 600; }

/* The one outlined-yellow element, used exactly the way they use their cart
 * button: never filled, never more than one per screen. */
.pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 9px;
  border: 2px solid var(--signal); color: var(--signal);
  background: transparent; border-radius: 999px;
  padding: 9px 18px; font-weight: 700; font-size: .78rem;
  letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.pill:hover { background: var(--signal); color: #000; }
.pill:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

.embed {
  background: #000; border: 1px solid var(--line); border-radius: 9px;
  padding: 13px 15px; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: .74rem; color: var(--dim); overflow-x: auto; line-height: 1.7;
}
.embed b { color: var(--accent); font-weight: 400; }

footer {
  padding: 0 24px 28px; max-width: 1180px; margin: 0 auto; width: 100%;
  color: var(--dim); font-size: .78rem; line-height: 1.7;
}
footer code { color: var(--ink); font-family: ui-monospace, Menlo, monospace; }
footer a { color: var(--accent); }

/* --------------------------------------------------- theming the widgets */
/* Both custom elements expose their palette as CSS custom properties, so the
 * brand lands on them from here without either file being touched. That was the
 * point of building them that way. */
zillion-player {
  --zp-bg: var(--panel-2);
  --zp-fg: var(--ink);
  --zp-dim: var(--dim);
  --zp-accent: var(--accent);
  --zp-radius: var(--radius);
  --zp-font: var(--font);
  box-shadow: 0 18px 50px -30px var(--accent);
}
zillion-chat {
  --zc-bg: var(--panel-2);
  --zc-panel: var(--panel);
  --zc-fg: var(--ink);
  --zc-dim: var(--dim);
  --zc-accent: var(--accent);
  --zc-radius: var(--radius);
  --zc-font: var(--font);
}