@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Onest";
  src: url("/fonts/onest-latin-ext-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Indigo night, cornflower (rukkilill) and sunny yellow. Coral red means "on air" and nothing else.
   Shapes are round, outlines are thick, shadows are hard and offset: sticker, not glass. */
:root {
  color-scheme: dark;
  --night: #121a3f;
  --surface: #1c2757;
  --line: #2f3d7d;
  --corn: #6c8cff;
  --corn-hover: #8ea6ff;
  --sun: #ffd23f;
  --live: #ff4d6d;
  --snow: #f5f7ff;
  --mist: #aab5de;
  --display: "Bricolage Grotesque", "Arial Black", system-ui, sans-serif;
  --body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --radius: 20px;
  --pop: 0.15s ease-out;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night) radial-gradient(rgb(47 61 125 / 0.45) 1.2px, transparent 1.2px) 0 0 / 26px 26px;
  color: var(--snow);
  font: 400 1.0625rem/1.55 var(--body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--corn); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--corn-hover); }
img { max-width: 100%; display: block; }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: var(--gutter); top: 8px; background: var(--sun); color: var(--night); padding: 8px 12px; z-index: 10; }
.muted { color: var(--mist); }

main { padding: 0 var(--gutter); max-width: 1320px; margin: 0 auto; }

/* Header: brand + account on the first row, links on a scrollable second row until 760px */
.top {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
  padding: 14px var(--gutter) 6px; max-width: 1320px; margin: 0 auto;
}
.brand { order: 1; display: flex; align-items: center; gap: 10px; color: var(--snow); text-decoration: none; font: 800 1.35rem var(--display); letter-spacing: -0.02em; }
.brand:hover { color: var(--snow); }
.brand .mascot { width: 40px; height: 40px; transition: transform var(--pop); }
.brand:hover .mascot { transform: rotate(-8deg) scale(1.08); }
.me { order: 2; margin-left: auto; display: flex; align-items: center; gap: 4px 18px; }
.links { order: 3; flex-basis: 100%; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; }
.links::-webkit-scrollbar { display: none; }
.links a, .me a:not(.btn), .me .link { color: var(--snow); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 999px; white-space: nowrap; }
.links a:hover, .me a:not(.btn):hover, .me .link:hover { background: var(--surface); color: var(--snow); }
.me form { margin: 0; }
@media (min-width: 760px) {
  .top { padding-block: 18px; }
  .links { order: 2; flex: 1; flex-basis: auto; margin: 0; padding: 0; overflow: visible; }
  .me { order: 3; }
}

/* Mascot colours (the SVG is inline) */
.m-corn { fill: var(--corn); }
.m-sun { fill: var(--sun); }
.m-night { fill: var(--night); }
.m-snow { fill: var(--snow); }
.m-line { fill: none; stroke: var(--corn); stroke-width: 3.5; stroke-linecap: round; }
.m-face { fill: none; stroke: var(--snow); stroke-width: 2.5; stroke-linecap: round; }
.m-zz { fill: none; stroke: var(--sun); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Buttons: yellow pill with a hard cornflower shadow that pops on hover and presses on click */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--sun); color: var(--night); border: 0; border-radius: 999px;
  padding: 12px 22px; font: 700 1rem var(--body); text-decoration: none; cursor: pointer;
  box-shadow: 4px 4px 0 var(--corn); transition: transform var(--pop), box-shadow var(--pop);
}
.btn:hover { color: var(--night); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--corn); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--corn); }
.btn-small { padding: 9px 16px; font-size: 0.9rem; }
.btn-ghost { background: var(--night); color: var(--snow); box-shadow: inset 0 0 0 2px var(--line), 4px 4px 0 var(--line); }
.btn-ghost:hover { color: var(--snow); box-shadow: inset 0 0 0 2px var(--snow), 6px 6px 0 var(--line); }
.btn-ghost:active { box-shadow: inset 0 0 0 2px var(--snow), 1px 1px 0 var(--line); }
.link { background: none; border: 0; padding: 0; color: var(--corn); font: inherit; cursor: pointer; }
.link:hover { color: var(--corn-hover); text-decoration: underline; }

/* On air */
.dot { display: inline-block; width: 0.5em; height: 0.5em; border-radius: 50%; background: var(--live); margin-right: 0.4em; vertical-align: 0.1em; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.3; } }
.on-air { color: var(--live); font-weight: 700; }
.on-air::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: currentColor; margin-right: 8px; vertical-align: 1px; }
.count { display: inline-grid; place-items: center; min-width: 1.5em; height: 1.5em; padding: 0 0.35em; border-radius: 999px; background: var(--sun); color: var(--night); font-size: 0.55em; font-weight: 800; vertical-align: 0.35em; margin-left: 0.15em; }
.sticker {
  position: absolute; top: -14px; left: -10px; z-index: 1; transform: rotate(-6deg);
  background: var(--sun); color: var(--night); font: 800 1.05rem var(--display); padding: 6px 14px; border-radius: 999px;
  box-shadow: 3px 3px 0 var(--night);
}
.sticker::before { content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--live); margin-right: 7px; vertical-align: 1px; animation: pulse 1.6s ease-in-out infinite; }

/* Live wall */
.live { padding-block: clamp(16px, 4vw, 40px) 8px; }
.live-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.live-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
.off-air { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px clamp(20px, 4vw, 48px); padding-block: clamp(16px, 5vw, 56px); }
.off-air .mascot { width: clamp(110px, 18vw, 180px); height: auto; grid-row: span 2; }
.off-air h1 { font-size: clamp(2rem, 5.5vw, 3.8rem); align-self: end; }
.off-air p { color: var(--mist); font-size: 1.15rem; max-width: 34ch; align-self: start; }

.featured { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(24px, 3vw, 44px); align-items: center; padding: 10px 0 0 8px; }
.featured-thumb {
  position: relative; display: block; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--surface);
  border: 3px solid var(--snow); box-shadow: 10px 10px 0 var(--live); transition: transform var(--pop), box-shadow var(--pop);
}
.featured-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 3px); }
.featured-thumb:hover { transform: translate(-3px, -3px); box-shadow: 13px 13px 0 var(--live); }
.featured-info { display: grid; gap: 14px; justify-items: start; container-type: inline-size; }
/* Bricolage at 800 is about 0.6em per character; size the name so it fits one line. */
.featured-name { font-size: clamp(1.6rem, 20cqi, 4.4rem); line-height: 1; overflow-wrap: anywhere; }
.featured-name.len-m { font-size: clamp(1.6rem, 14cqi, 4.4rem); }
.featured-name.len-l { font-size: clamp(1.6rem, 9.6cqi, 4.4rem); }
.featured-name.len-xl { font-size: clamp(1.4rem, 6.6cqi, 4.4rem); }
.featured-name a { color: var(--snow); text-decoration: none; }
.featured-name a:hover { color: var(--sun); }
.featured-title { font-size: 1.15rem; max-width: 34ch; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.facts dt { color: var(--mist); font-size: 0.85rem; }
.facts dd { margin: 0; font-weight: 700; }

.live-grid { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px 24px; }
.card { display: grid; gap: 6px; color: var(--snow); text-decoration: none; }
.card-thumb {
  position: relative; display: block; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--surface); margin-bottom: 6px;
  border: 2px solid var(--line); transition: transform var(--pop), box-shadow var(--pop), border-color var(--pop);
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius) - 2px); }
.card:hover .card-thumb, .card:focus-visible .card-thumb { border-color: var(--snow); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--corn); }
.badge { position: absolute; left: 12px; bottom: 12px; background: var(--night); color: var(--snow); padding: 4px 11px; border-radius: 999px; font-size: 0.82rem; font-weight: 700; }
.badge::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; }
.card-name { display: flex; align-items: center; gap: 8px; font: 700 1.1rem var(--display); }
.card-title { color: var(--mist); font-size: 0.95rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-game { color: var(--corn); font-size: 0.9rem; font-weight: 600; }

/* Avatars */
.avatar { border-radius: 50%; object-fit: cover; flex: none; width: 56px; height: 56px; background: var(--surface); border: 3px solid var(--line); }
.avatar-xs { width: 30px; height: 30px; border-width: 2px; }
.avatar-lg { width: 104px; height: 104px; border-width: 4px; }
.avatar-empty { display: grid; place-items: center; font: 800 1.2rem var(--display); color: var(--mist); text-transform: uppercase; }
.avatar.is-live, .is-live .avatar { border-color: var(--live); }

/* Directory */
.directory { padding-block: clamp(48px, 7vw, 88px) 24px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.section-head h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.search, input, textarea, select {
  font: inherit; color: var(--snow); background: var(--surface); border: 2px solid var(--line); border-radius: 12px; padding: 10px 14px; min-height: 44px;
}
.search { width: min(100%, 320px); border-radius: 999px; padding-inline: 18px; }
input:focus, textarea:focus, select:focus { border-color: var(--sun); outline: none; }
::placeholder { color: #7f8bb5; }

.people { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 6px 14px; }
.person { display: flex; align-items: center; gap: 14px; padding: 8px 12px 8px 8px; border-radius: 999px; color: var(--snow); text-decoration: none; min-height: 60px; transition: transform var(--pop), background var(--pop); }
.person:hover { background: var(--surface); color: var(--snow); transform: translateX(4px); }
.person strong { display: block; overflow-wrap: anywhere; font: 700 1.05rem var(--display); }
.person small { color: var(--mist); font-size: 0.85rem; }
.person.is-live small { color: var(--live); font-weight: 700; }
.person:not(.is-live) img.avatar { filter: saturate(0.5); }
.empty { color: var(--mist); padding-block: 24px; }

.join { position: relative; overflow: hidden; margin-block: 40px clamp(48px, 7vw, 88px); padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: var(--surface); border: 2px solid var(--line); display: grid; gap: 14px; justify-items: start; }
.join h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
.join p { max-width: 48ch; color: var(--mist); }
.join .mascot { position: absolute; right: clamp(8px, 4vw, 48px); bottom: -18px; width: clamp(90px, 14vw, 170px); height: auto; transform: rotate(6deg); }
@media (max-width: 640px) { .join .mascot { width: 72px; right: 12px; bottom: 8px; } .join p, .join h2 { padding-right: 70px; } }

/* Streamer page */
.streamer { padding-block: clamp(16px, 3vw, 32px) 64px; }
.streamer-head { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; align-items: center; margin-bottom: 20px; }
.streamer-head h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); overflow-wrap: anywhere; }
.realname { font-size: 1.1rem; }
.streamer-head > div { display: grid; gap: 4px; }
.links-list { grid-column: 1 / -1; list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.links-list a { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); color: var(--snow); text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: transform var(--pop), box-shadow var(--pop), border-color var(--pop); }
.links-list a:hover { border-color: var(--snow); color: var(--snow); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--corn); }
.stream-title { font-size: 1.15rem; margin-bottom: 16px; max-width: 70ch; }
.stream-title .muted { margin-left: 8px; }
.watch { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; }
.watch iframe { border: 2px solid var(--line); border-radius: var(--radius); background: #000; width: 100%; }
.player { aspect-ratio: 16 / 9; }
.chat { height: 100%; min-height: 420px; }
.bio { margin-top: 40px; max-width: 70ch; }
.bio h2 { font-size: 1.4rem; margin-bottom: 12px; }
.bio p { white-space: pre-line; overflow-wrap: anywhere; }

/* Watch together */
.page-head { padding-block: clamp(16px, 4vw, 40px) 24px; display: grid; gap: 10px; max-width: 48rem; }
.page-head h1 { font-size: clamp(2rem, 4.5vw, 3rem); }
.chips { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-block; padding: 8px 16px; border-radius: 999px; border: 2px solid var(--line); color: var(--snow); text-decoration: none; font-weight: 600; }
.chip:hover { color: var(--snow); border-color: var(--snow); }
.chip[aria-pressed="true"] { background: var(--sun); color: var(--night); border-color: var(--sun); box-shadow: 3px 3px 0 var(--corn); }
.add-channel { display: grid; gap: 6px; margin-bottom: 28px; max-width: 420px; }
.add-channel label { color: var(--mist); font-size: 0.9rem; }
.row { display: flex; gap: 10px; }
.row input { flex: 1; min-width: 0; }
.multi-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 64px; }
.multi-1 { grid-template-columns: minmax(0, 1fr); }
.multi-cell { display: grid; gap: 6px; }
.multi-cell iframe { border: 2px solid var(--line); border-radius: var(--radius); background: #000; width: 100%; aspect-ratio: 16 / 9; }
.multi-remove { font-size: 0.85rem; justify-self: end; }

/* Forms */
.form { display: grid; gap: 20px; max-width: 40rem; padding-bottom: 64px; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label, legend { font-weight: 700; font-size: 0.95rem; }
fieldset { border: 0; padding: 0; margin: 8px 0 0; display: grid; gap: 16px; }
legend { font: 800 1.3rem var(--display); margin-bottom: 12px; }
textarea { resize: vertical; }
.hint { color: var(--mist); font-size: 0.85rem; }
.error { color: #ff8fa3; font-size: 0.9rem; }
.has-error input, .has-error textarea { border-color: #ff8fa3; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.notice { background: var(--surface); border: 2px solid var(--line); border-left: 6px solid var(--sun); padding: 12px 16px; border-radius: 12px; margin-bottom: 20px; max-width: 40rem; }
.notice-error { border-left-color: var(--live); }

/* Admin */
.admin-tools { display: flex; flex-wrap: wrap; align-items: end; gap: 16px 32px; margin-bottom: 32px; }
.admin-tools .add-channel { margin: 0; }
.table-wrap { overflow-x: auto; padding-bottom: 64px; }
.admin-table { border-collapse: collapse; width: 100%; min-width: 640px; }
.admin-table th { text-align: left; color: var(--mist); font-weight: 500; font-size: 0.85rem; padding: 8px 12px; border-bottom: 2px solid var(--line); }
.admin-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.admin-table td small { display: block; }
.admin-table select { padding: 6px 10px; min-height: 36px; }
.admin-table input[type="checkbox"] { width: 20px; height: 20px; min-height: 0; accent-color: var(--sun); }

.error-page { padding-block: clamp(32px, 8vw, 100px); justify-items: start; }
.error-page .mascot { width: 120px; height: auto; }

.foot { max-width: 1320px; margin: 0 auto; padding: 32px var(--gutter) 40px; border-top: 2px solid var(--line); color: var(--mist); font-size: 0.9rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot nav { display: flex; gap: 16px; }

@media (max-width: 900px) {
  .featured { grid-template-columns: minmax(0, 1fr); padding-right: 10px; }
  .featured-thumb { box-shadow: 7px 7px 0 var(--live); }
  .watch { grid-template-columns: minmax(0, 1fr); }
  .chat { min-height: 480px; }
}
@media (max-width: 600px) {
  .multi-grid, .pair { grid-template-columns: minmax(0, 1fr); }
  .off-air { grid-template-columns: 1fr; }
  .off-air .mascot { grid-row: auto; }
  .streamer-head { gap: 4px 16px; }
  .section-head .search { width: 100%; }
  .admin-tools { flex-direction: column; align-items: stretch; }
}
@media (prefers-reduced-motion: reduce) {
  .dot, .sticker::before { animation: none; }
  .btn, .btn:hover, .btn:active, .card-thumb, .card:hover .card-thumb, .featured-thumb:hover, .person:hover, .links-list a:hover, .brand:hover .mascot { transform: none; transition: none; }
}