/* House lights, the public page: the CTA home in the main app's look (2026-11-11).
   The owner, 11-11 20:31: "We need to make the public page of the same design as our main app for each season. The
   home page needs to be clear calls to action. Right now it's too busy. It should be - now playing, with small queue,
   request a song or game."
   The look is /m's ("The house at night"): its tokens come from tokens.css (made by build.py from fable.css, never
   typed in here), the season's colours from the room (the season's own four), its sky and its material (clear,
   amber, ice, portal) from look.js through season.js. This file writes the page's own rules on those tokens.
   No inline styles anywhere (the page's CSP allows these files only); scripts set custom properties. System fonts. */

:root {
  --bg: #0a1020;
  --accent: #8ecbff;
  --accent2: #c3b1ff; /* /m's name for the season's second colour: the material tokens use it */
  --second: #c3b1ff;
  --soft: #e7eefb;
  --fb-live: #8ecbff; /* /m: the colour the house is showing; here the season's accent (the page's house is a sketch) */
  --on-accent: #08101d;
  --on-second: #08101d;
  --team-a: #8ecbff;
  --team-b: #c3b1ff;
  --me: #ffd27a;
  --sky-top: #03040a;
  --sky-bot: #0b0d1e;

  --ink: #f7f2e8;
  --mute: rgba(247, 242, 232, 0.72);
  --faint: rgba(247, 242, 232, 0.56);
  --line: rgba(255, 255, 255, 0.11);
  --card: rgba(255, 255, 255, 0.05);
  --card-2: rgba(255, 255, 255, 0.085);
  --night: #04060c;
  --bad: #ff8a7a;
  --good: #7be0a0;

  /* the bulbs on a vote string: the season's own colours */
  --b0: var(--accent);
  --b1: var(--second);
  --b2: var(--soft);
  --b3: color-mix(in srgb, var(--accent) 55%, #fff);
  --b4: color-mix(in srgb, var(--second) 55%, #fff);

  /* the stage: the hero's words over the sky, then the house (width-bound on a phone: about 0.36 of the width with
     its street), so the two calls to action are in view on a 375 x 667 screen */
  --hero-h: 182px;
  --stage-h: calc(var(--hero-h) + var(--sat) + 0.4 * 100vw);
  --marq-bottom: 104px; /* where the name's bulbs end (app.js, from the stage): Now playing sits under it */
  --band: 150px; /* how much of the stage stays in view when the page scrolls: the house itself */
  --band-extra: 0px;
  --gut: 16px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --serif: var(--f-display);
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/* the marquee (d163/d164, "Keep the marquee"): the name in bulbs takes the eyebrow's place over the sky, two lines of
   dots about 52 px high on a phone, so the sky grows by the difference; the house and the cards below move down by it
   (Up next keeps to two rows on a phone that short, below) */
html.marquee {
  --hero-h: 218px;
}

/* a tablet held upright, a narrow desktop window: the house is wider, so the sky over it can be taller */
@media (min-width: 560px) {
  :root {
    --stage-h: clamp(380px, calc(var(--hero-h) + 0.34 * 100vw), 620px);
  }
}

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

[hidden] {
  display: none !important;
}

html {
  background: #000;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--band) + 76px);
}

body {
  margin: 0;
  min-height: 100vh;
  background: linear-gradient(180deg, var(--sky-top), var(--sky-bot) 40vh, color-mix(in srgb, var(--sky-bot) 45%, #000) 120vh) fixed, #000;
  color: var(--ink);
  font: 16px/1.45 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding-bottom: calc(var(--sab) + 28px);
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
h4,
p,
ol,
ul,
fieldset {
  margin: 0;
  padding: 0;
}

ol,
ul {
  list-style: none;
}

fieldset {
  border: 0;
  min-width: 0;
}

button,
input,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  touch-action: manipulation;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--soft);
  outline-offset: 2px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: fixed;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--soft);
  color: #08101d;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: calc(12px + var(--sat));
}

/* ------------------------------------------------------------ the stage */

.stage {
  position: sticky;
  top: calc(var(--band) + var(--band-extra) - var(--stage-h));
  z-index: 30;
  background: var(--night);
  transition: top 0.35s ease;
}

/* Home and Request: the page is glass over the house. The cards slide over it (and the first one sits on its
   street), its lights showing through, blurred: /m's Home. Play keeps the house on top for the throws. */
html[data-view="home"] main,
html[data-view="request"] main {
  z-index: 31;
}

/* while the visitor types (the search box, the note), only the plaque stays: the keyboard needs the room */
html.typing .stage {
  top: calc(0px - var(--stage-h));
}

/* the snowball fight needs the sky for its throws */
html.arena[data-view="play"] .stage {
  top: 0;
}

/* ...and on a phone held upright the page under it starts at the fight itself (or at a play-along, from its window
   opening until its result has had its time): the plaque already says what's on, so the lede steps aside. The head
   stays: with no tabs (11-11) its back arrow is the way home. `wide` is the page's own word for the split layout
   (app.js), which a phone on its side gets too */
html:not(.wide).arena[data-view="play"] #play-lede,
html:not(.wide).along-open[data-view="play"] #play-lede {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ...and where the browser would not take the page back to the top for it (Mobile Safari, a little way down: app.js,
   pageToTop), the view is let down by what was left, so the card's heading clears the pinned stage */
html:not(.wide).arena[data-view="play"] .view[data-view="play"] {
  padding-top: calc(16px + var(--top-gap, 0px));
}

/* the About pages are for reading: the house scrolls away with the page */
html[data-view="about"] .stage {
  position: relative;
  top: auto;
  transition: none;
}

.stage-view {
  position: relative;
  height: var(--stage-h);
  overflow: hidden;
}

.stage-gl,
.stage-field {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.stage-gl {
  touch-action: pan-y;
}

.stage-field {
  pointer-events: none;
  touch-action: pan-y;
  opacity: 0;
  transition: opacity 0.3s ease;
}

html.arena .stage-field {
  opacity: 1;
}

html[data-view="play"] .stage-field {
  pointer-events: auto;
}

html[data-view="play"].can-throw .stage-field {
  touch-action: none;
  cursor: crosshair;
}

.stage-top {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: calc(10px + var(--sat)) calc(var(--gut) + var(--sar)) 0 calc(var(--gut) + var(--sal));
  pointer-events: none;
}

.stage-top > * {
  pointer-events: auto;
}

.pill,
.my-light {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 13px 0 11px;
  border-radius: 999px;
  border: 0;
  background: var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  -webkit-backdrop-filter: var(--fb-g-blur);
  backdrop-filter: var(--fb-g-blur);
  box-shadow: var(--fb-g-rim);
  font-size: 14px;
  font-weight: 600;
  color: var(--mute);
}

.pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.pill.live {
  color: var(--ink);
}

.pill.live .dot {
  background: #ff5247;
  box-shadow: 0 0 8px #ff5247;
  animation: breathe 1.8s ease-in-out infinite;
}

.my-light {
  position: relative;
  justify-content: center;
  width: 38px;
  min-height: 38px;
  padding: 0;
  color: var(--ink);
}

/* a finger's worth of room round the small controls, without making them look bigger */
.my-light::after,
.link::after {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

.my-light .bulb {
  margin: 0;
}

/* the hero: over the sky, the name, then what's on now in the app's serif (sized to the name, two lines at most) */
.hero {
  position: absolute;
  left: calc(var(--gut) + var(--sal) + 2px);
  right: calc(var(--gut) + var(--sar) + 2px);
  top: calc(52px + var(--sat));
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* a long title wraps inside the sky, never past it */
  gap: 3px;
  pointer-events: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 10px rgba(0, 0, 0, 0.6), 0 2px 18px rgba(0, 0, 0, 0.55);
}

.brand {
  font-size: 11.5px;
  line-height: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.brand:focus {
  outline: none;
}

/* spelled in bulbs on the stage: the text stays for screen readers and the page's heading, out of sight */
html.marquee .brand {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* under the marquee, Now playing is the theatre's letter board: centred under the sign */
html.marquee .hero {
  top: calc(var(--marq-bottom) + 6px);
  justify-items: center;
  text-align: center;
}

html.marquee .hero-sub {
  justify-content: center;
}

.hero-state {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
}

.hero-title {
  margin-top: 8px;
  font: 600 30px/34px var(--serif);
  letter-spacing: -0.3px;
  color: #fff;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.hero-title[data-len="m"] {
  font-size: 26px;
  line-height: 30px;
}

.hero-title[data-len="l"] {
  font-size: 23px;
  line-height: 27px;
}

.hero-title[data-len="xl"] {
  font-size: 21px;
  line-height: 25px;
}

.hero-sub {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 22px;
  margin-top: 2px;
  font-size: 14.5px;
  line-height: 19px;
  color: rgba(255, 255, 255, 0.76);
}

.hero-meta:empty {
  display: none;
}

.hero-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* while a game or a play-along takes the sky, the words step back for it */
html.along-on .hero,
html.arena[data-view="play"] .hero {
  opacity: 0.35;
  transition: opacity 0.3s ease;
}

.stage-msg {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(4, 6, 12, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  pointer-events: none;
}

html:not([data-view="play"]) .stage-msg {
  display: none;
}

.win {
  position: absolute;
  left: 50%;
  bottom: 46px; /* over the house itself, which stays in view however far the page has scrolled */
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 14px 22px;
  border-radius: 20px;
  background: rgba(4, 6, 12, 0.86);
  border: 1px solid var(--wc, var(--soft));
  box-shadow: 0 0 40px -6px var(--wc, var(--soft));
  text-align: center;
  pointer-events: none;
  animation: rise 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.win-t {
  font: 600 26px/1.15 var(--serif);
  color: var(--wc, var(--soft));
}

.win-d {
  margin-top: 4px;
  font-size: 14px;
  color: var(--mute);
}

.eq {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 11px;
}

.eq i {
  width: 2.5px;
  height: 4px;
  border-radius: 1px;
  background: var(--faint);
}

.hero.playing .eq i {
  background: var(--accent);
  animation: eq 0.9s ease-in-out infinite;
}

.hero.playing .eq i:nth-child(2) {
  animation-delay: -0.35s;
}

.hero.playing .eq i:nth-child(3) {
  animation-delay: -0.6s;
}

.hero.playing .eq i:nth-child(4) {
  animation-delay: -0.15s;
}

/* the time left: a small ring that empties, and the minutes beside it */
.hero-time {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-family: var(--f-num);
  font-variant-numeric: tabular-nums;
}

.pl-ring {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
}

.pl-ring circle {
  fill: none;
  stroke-width: 6;
}

.pl-ring-bg {
  stroke: rgba(255, 255, 255, 0.18);
}

.pl-ring-arc {
  stroke: var(--accent);
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear;
}

.pl-left::after {
  content: " left";
}

/* ------------------------------------------------------------ connection banner, links */

.conn {
  position: sticky;
  top: var(--band);
  z-index: 32;
  margin: 0;
  padding: 8px var(--gut);
  background: #3a2a10;
  border-bottom: 1px solid rgba(255, 200, 110, 0.3);
  color: #ffe2a8;
  font-size: 14px;
  text-align: center;
}

.link {
  position: relative;
  padding: 6px 4px;
  border: 0;
  background: none;
  color: var(--soft);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------ the page under the stage */

main {
  position: relative;
  padding: 0 calc(var(--gut) + var(--sar)) 0 calc(var(--gut) + var(--sal));
}

/* the house's light falls on the page */
main::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 240px;
  background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%);
  pointer-events: none;
}

main:focus {
  outline: none;
}

.view {
  position: relative;
  display: grid;
  gap: 16px;
  padding-top: 16px;
}

.view-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 0;
}

/* back to the start: a round glass button, as /m's */
.back {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: var(--ink);
  background: var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  -webkit-backdrop-filter: var(--fb-g-blur);
  backdrop-filter: var(--fb-g-blur);
  box-shadow: var(--fb-g-rim);
}

.back svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-back {
  margin-bottom: 4px;
}

.about-sec > .view-head {
  display: grid;
  gap: 6px;
}

.eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soft);
}

.display {
  font: 600 30px/1.12 var(--serif);
  letter-spacing: -0.3px;
}

/* the page moves the focus to a heading when a tab or a link opens its part: no ring on a heading */
.display:focus,
h2[tabindex="-1"]:focus,
h3[tabindex="-1"]:focus {
  outline: none;
}

.lede {
  color: var(--mute);
}

.note {
  font-size: 14px;
  color: var(--mute);
}

.empty {
  padding: 18px 14px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  color: var(--mute);
  text-align: center;
  font-size: 15px;
}

.block {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.sec-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sec-head h2,
.sec-head h3 {
  font: 600 23px/1.15 var(--serif);
  letter-spacing: -0.15px;
}

.count {
  font-size: 13px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: var(--r-card);
  background: var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  -webkit-backdrop-filter: var(--fb-g-blur);
  backdrop-filter: var(--fb-g-blur);
  box-shadow: var(--fb-g-rim), var(--fb-g-drop);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

/* a long name and a long chip (the game's, on a phone) take a line each */
.card.arena .card-head {
  flex-wrap: wrap;
  row-gap: 6px;
}

.card h3,
.card-head h3 {
  font: 600 21px/1.2 var(--serif);
  letter-spacing: -0.1px;
}

.card h4 {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 800;
}

.chip {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card-2);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mute);
  white-space: nowrap;
}

.chip:empty {
  display: none;
}

.chip.on {
  background: var(--soft);
  color: #08101d;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  text-decoration: none;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn.wide {
  display: flex;
  width: 100%;
}

.btn.ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
}

.btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn.pulse,
.team.pulse {
  animation: pop 0.4s ease;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chips .btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--card-2);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--soft) 45%, transparent);
  font-weight: 700;
}

.chips .btn svg {
  color: var(--soft);
}

.chips:empty {
  display: none;
}

/* ------------------------------------------------------------ Home: the small queue and the two calls to action */

/* the first card sits on the house's street, as /m's first card does: glass over the reflection */
.view[data-view="home"] {
  gap: 10px;
  margin-top: -30px;
  padding-top: 0;
}

.kicker {
  font-size: 12px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.mini {
  gap: 2px;
  padding: 11px 16px 6px;
  color: var(--ink);
  text-decoration: none;
}

.mini-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 2px;
}

.mini-all {
  font-size: 14px;
  font-weight: 600;
  color: var(--soft);
}

.mini-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  border-top: 0.5px solid rgba(255, 255, 255, 0.12);
}

.mini-list li:first-child {
  border-top: 0;
}

.mini-n {
  font-family: var(--f-num);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
  text-align: center;
}

.mini-t {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
  font-weight: 600;
}

.mini-tag {
  margin-right: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}

.mini-kind {
  font-weight: 400;
  color: rgba(255, 255, 255, 0.58);
}

.mini-bulbs {
  display: flex;
  align-items: center;
  gap: 3px;
}

.mini-bulbs i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--soft);
  box-shadow: 0 0 6px var(--soft);
}

.mini-bulbs i.me {
  background: var(--me);
  box-shadow: 0 0 8px var(--me);
}

.mini-bulbs span {
  margin-left: 3px;
  font-family: var(--f-num);
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.62);
}

.mini-empty {
  padding: 6px 0 8px;
  font-size: 14.5px;
  color: var(--mute);
}

/* a call to action: a round button in the season's colour, a serif verb, a line under it, a chevron */
.cta {
  grid-template-columns: 46px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 14px;
  padding: 13px 14px 13px 14px;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s var(--spring), box-shadow 0.3s ease;
}

.cta:active {
  transform: scale(0.985);
}

.cta-orb {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 0 22px -4px var(--accent), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.cta-play .cta-orb {
  background: color-mix(in srgb, var(--second) 72%, #000);
  color: #fff;
  box-shadow: 0 0 22px -6px var(--second), inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px color-mix(in srgb, var(--second) 60%, #fff);
}

.cta-orb svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cta-text {
  display: grid;
  min-width: 0;
}

.cta-t {
  font: 600 22px/26px var(--serif);
  letter-spacing: -0.15px;
}

.cta-d {
  margin-top: 2px;
  font-size: 13.5px;
  line-height: 17px;
  color: rgba(255, 255, 255, 0.74);
}

.cta-d b {
  font-weight: 700;
  color: var(--soft);
}

.cta .chev {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Play a game lit: a game is on air, or a play-along is coming or open */
.cta.on {
  box-shadow: var(--fb-g-rim), var(--fb-g-drop), 0 0 0 1.5px color-mix(in srgb, var(--accent) 70%, transparent), 0 0 30px -6px var(--accent);
}

.cta.on .cta-orb {
  animation: breathe 1.6s ease-in-out infinite;
}

.cta-small {
  grid-template-columns: minmax(0, 1fr) 16px;
  margin-top: 6px;
}

.cta-small .cta-t {
  font-size: 18px;
  line-height: 22px;
}

.quiet-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 10px;
  font-size: 14px;
}

.quiet-links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px; /* a finger's tap */
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.64);
  text-decoration: none;
}

/* ------------------------------------------------------------ the season's material (look.js `material`; /m's)
   clear: the glass above. amber: warm glass (its tokens only). ice: rough-hewn blocks of frosted ice, crusted at the
   edges, clear and dark in the middle for the words. portal: dark openings with light running round the rim and
   smoke turning inside. The surfaces are /m's (fable.css, its material rules near lines 679-723), PORTED BY HAND for
   this page's cards on the same tokens: tools/build_look.py carries the tokens, not these rules, so a change to /m's
   material rules is copied here by hand. */

html[data-material="ice"] .card,
html[data-material="ice"] .sheet {
  background: var(--fb-ice-face), var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  border-radius: 5px;
  -webkit-clip-path: var(--fb-rough-a);
  clip-path: var(--fb-rough-a);
  text-shadow: var(--fb-ice-words);
  box-shadow: var(--fb-g-rim);
}

html[data-material="ice"] :is(.songs, .q-row) {
  border-radius: 5px;
  -webkit-clip-path: var(--fb-rough-c);
  clip-path: var(--fb-rough-c);
  text-shadow: var(--fb-ice-words);
  background: var(--fb-ice-crust-t) left top / 360px 14px repeat-x, var(--fb-ice-crust-b) left bottom / 360px 9px repeat-x,
    var(--fb-ice-grain-soft) 0 0 / 220px 220px, var(--fb-g-fill), linear-gradient(rgba(5, 17, 36, 0.4), rgba(5, 17, 36, 0.4));
}

html[data-material="portal"] :is(.songs, .q-row) {
  box-shadow: var(--fb-g-rim), 0 0 22px -6px color-mix(in srgb, var(--accent2) 80%, transparent);
  background: radial-gradient(ellipse 90% 90% at 50% 50%, rgba(4, 1, 10, 0.7) 30%, rgba(4, 1, 10, 0.2) 100%), var(--fb-smoke) 0 0 / 300px 300px, linear-gradient(rgba(6, 2, 14, 0.3), rgba(6, 2, 14, 0.3));
}

html[data-material="ice"] .card:nth-of-type(2n) {
  -webkit-clip-path: var(--fb-rough-b);
  clip-path: var(--fb-rough-b);
}

html[data-material="ice"] .card:nth-of-type(3n) {
  -webkit-clip-path: var(--fb-rough-c);
  clip-path: var(--fb-rough-c);
}

/* the first call to action carries a crack, and the season's colour frozen into it */
html[data-material="ice"] .cta-request {
  background: var(--fb-ice-crack) right -18px top -34px / 120px 130px no-repeat, var(--fb-ice-face),
    radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%),
    var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
}

html[data-material="ice"] :is(.cta-orb, .back, .pill, .my-light, .btn) {
  border-radius: 4px;
  -webkit-clip-path: var(--fb-rough-s);
  clip-path: var(--fb-rough-s);
}

html[data-material="ice"] :is(.back, .pill, .my-light) {
  text-shadow: var(--fb-ice-words);
  background: var(--fb-ice-pill), linear-gradient(142deg, rgba(236, 247, 255, 0.4), rgba(190, 224, 255, 0.12) 40%, rgba(240, 250, 255, 0.28));
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.8), inset 2px 0 0 rgba(255, 255, 255, 0.34), inset 0 -2.5px 0 rgba(120, 180, 235, 0.36);
}

html[data-material="ice"] .cta-orb {
  background: var(--fb-ice-small), linear-gradient(142deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.26)), var(--accent);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75), inset 2px 0 0 rgba(255, 255, 255, 0.3), inset 0 -2.5px 0 rgba(0, 40, 90, 0.28);
}

html[data-material="ice"] .cta-play .cta-orb {
  background: var(--fb-ice-small), linear-gradient(142deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.26)), color-mix(in srgb, var(--second) 80%, #000);
}

html[data-material="ice"] .card :is(.cta-d, .note, .mini-kind) {
  color: rgba(255, 255, 255, 0.92);
}

html[data-material="ice"] .cta.on {
  box-shadow: var(--fb-g-rim), inset 0 0 0 2px color-mix(in srgb, var(--accent) 80%, transparent), inset 0 0 26px -4px var(--accent);
}

/* portal */
@property --fb-pa {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@property --fb-ps {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@keyframes fbSwirl {
  to {
    --fb-pa: 1turn;
    --fb-ps: -300px;
  }
}

html[data-material="portal"] .card {
  border-radius: 30px;
  background:
    radial-gradient(ellipse 80% 86% at 50% 50%, rgba(4, 1, 10, 0.9) 22%, rgba(4, 1, 10, 0.6) 58%, rgba(4, 1, 10, 0) 100%),
    var(--fb-smoke) 0 var(--fb-ps) / 300px 300px,
    conic-gradient(from var(--fb-pa) at 50% 50%, color-mix(in srgb, var(--accent2) 80%, transparent), transparent 14%, color-mix(in srgb, var(--accent) 48%, transparent) 30%, transparent 46%,
      color-mix(in srgb, var(--accent2) 90%, transparent) 62%, transparent 80%, color-mix(in srgb, var(--accent2) 80%, transparent)),
    linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
}

/* the light and the smoke turn while the phone is being used (app.js `awake`), and hold still after */
html.awake[data-material="portal"] :is(.mini, .cta) {
  animation: fbSwirl 18s steps(144) infinite;
}

html[data-material="portal"] .cta-play {
  animation-delay: -7s;
}

html[data-material="portal"] .cta-orb {
  position: relative;
  color: #fff;
  background: radial-gradient(circle, #05010c 46%, color-mix(in srgb, var(--accent2) 55%, #05010c) 72%, color-mix(in srgb, var(--accent) 70%, transparent) 100%);
  box-shadow: 0 0 22px -2px color-mix(in srgb, var(--accent2) 80%, transparent), 0 0 44px -6px color-mix(in srgb, var(--accent2) 60%, transparent), inset 0 0 10px rgba(0, 0, 0, 0.8);
}

html[data-material="portal"] .cta-orb::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(from 0turn, transparent 0 8%, var(--accent2) 22%, transparent 40% 54%, var(--accent) 70%, transparent 88%);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 64%, #000 70%, transparent 73%);
  mask: radial-gradient(circle, transparent 61%, #000 64%, #000 70%, transparent 73%);
}

@keyframes fbTurn {
  to {
    transform: rotate(1turn);
  }
}

html.awake[data-material="portal"] .cta-orb::after {
  animation: fbTurn 7s linear infinite;
}

html[data-material="portal"] :is(.back, .pill, .my-light) {
  background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(4, 1, 10, 0.85) 30%, rgba(4, 1, 10, 0.35) 100%), color-mix(in srgb, var(--accent2) 30%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent2) 72%, transparent), inset 0 0 12px -3px color-mix(in srgb, var(--accent2) 90%, transparent), 0 0 16px -4px color-mix(in srgb, var(--accent2) 90%, transparent);
}

html[data-material="portal"] .cta.on {
  box-shadow: var(--fb-g-rim), var(--fb-g-drop), 0 0 60px -14px var(--fb-live);
}

/* the long lists are glass without the blur: a blur under a list many screens tall costs frames */
.songs-card,
html[data-material] .card.flat {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

@media (prefers-reduced-transparency: reduce) {
  .card,
  .pill,
  .my-light,
  .back {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #15161c;
  }

  html[data-material="ice"] .card {
    background: var(--fb-ice-face), #24364c;
  }

  html[data-material="portal"] .card {
    background: #0c0616;
    animation: none;
  }

  /* the swirl turns behind a solid card where nobody sees it: stop it (as specific as the rules that start it) */
  html.awake[data-material="portal"] :is(.mini, .cta),
  html.awake[data-material="portal"] .cta-orb::after {
    animation: none;
  }
}

/* ------------------------------------------------------------ gates (closed, offline, the location check) */

.gate {
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 4px 12px;
}

.gate-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--card-2);
}

.gate-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--soft);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gate-t {
  font-weight: 800;
}

.gate-d {
  font-size: 14px;
  color: var(--mute);
}

.gate-d:empty {
  display: none;
}

.gate .btn {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* ------------------------------------------------------------ the queue: a string of lights per pick */

.next {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--soft) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--soft) 45%, transparent);
}

.next-tag {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--soft);
  color: #08101d;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.next-title {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board {
  display: grid;
  gap: 10px;
}

.q-row {
  position: relative;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 2px 10px;
  padding: 12px 12px 12px 8px;
  border-radius: calc(var(--r-card) - 6px);
  background: var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  box-shadow: var(--fb-g-rim);
}

.q-row.leader {
  background: radial-gradient(130% 150% at 0% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 62%), var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  box-shadow: var(--fb-g-rim), 0 0 30px -14px var(--accent);
}

.q-rank {
  font-size: 15px;
  font-weight: 800;
  color: var(--faint);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.q-row.leader .q-rank {
  color: var(--soft);
}

.q-main {
  display: grid;
  min-width: 0;
}

.q-title {
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.q-sub {
  font-size: 13px;
  color: var(--mute);
}

.q-kind {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--second);
  color: var(--on-second);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: 2px;
}

.q-btn {
  min-height: 44px;
  padding: 0 14px;
  border-radius: 999px;
  font-size: 14.5px;
}

.q-btn.yours {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--me);
}

/* the string: a wire, and one bulb per vote */
.q-string {
  grid-column: 2 / -1;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px 7px;
  min-height: 22px;
  margin-top: 6px;
  padding-top: 3px;
}

.q-string::before {
  content: "";
  position: absolute;
  left: -4px;
  right: 2px;
  top: 2px;
  height: 1px;
  background: rgba(255, 255, 255, 0.24);
}

.q-more {
  align-self: center;
  margin-left: 2px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--mute);
}

.bulb {
  --c: var(--b0);
  position: relative;
  display: inline-block;
  flex: none;
  width: 11px;
  height: 14px;
  margin-top: 4px;
  border-radius: 50% 50% 50% 50% / 42% 42% 58% 58%;
  background: radial-gradient(circle at 38% 32%, #fff 0 10%, var(--c) 48%);
  box-shadow: 0 0 9px 1px var(--c);
  animation: twinkle 3.2s ease-in-out infinite;
}

.bulb::before {
  content: "";
  position: absolute;
  left: 3px;
  top: -4px;
  width: 5px;
  height: 5px;
  border-radius: 1.5px 1.5px 0 0;
  background: #8b877b;
}

.bulb.b1 {
  --c: var(--b1);
  animation-delay: -0.7s;
}

.bulb.b2 {
  --c: var(--b2);
  animation-delay: -1.5s;
}

.bulb.b3 {
  --c: var(--b3);
  animation-delay: -2.1s;
}

.bulb.b4 {
  --c: var(--b4);
  animation-delay: -2.7s;
}

.bulb.me {
  --c: var(--me);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85), 0 0 12px 3px var(--me);
  animation: mine 1.6s ease-in-out infinite;
}

.bulb.new {
  animation: screw 0.55s cubic-bezier(0.2, 0.9, 0.3, 1.4);
}

.mine {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--me) 55%, transparent);
  background: color-mix(in srgb, var(--me) 9%, transparent);
}

.mine-text {
  display: grid;
  min-width: 0;
}

.mine-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
}

.mine-title {
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mine-meta {
  font-size: 13px;
  color: var(--mute);
}

/* ------------------------------------------------------------ every song, and the games */

.search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 999px;
  background: var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  box-shadow: var(--fb-g-rim);
}

.search:focus-within {
  box-shadow: var(--fb-g-rim), 0 0 0 1.5px var(--soft);
}

.search svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--mute);
  stroke-width: 2;
  stroke-linecap: round;
}

.search input {
  flex: 1;
  min-width: 0;
  height: 46px;
  border: 0;
  outline: 0;
  background: none;
  font-size: 16px;
}

.search input::placeholder {
  color: var(--faint);
}

/* a long list: glass without the blur (/m's rule: a blur under a list many screens tall costs frames) */
.songs {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--fb-g-fill), linear-gradient(var(--fb-g-tint), var(--fb-g-tint));
  box-shadow: var(--fb-g-rim);
}

.songs li + li {
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.song {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 60px;
  padding: 10px 14px 10px 16px;
  border: 0;
  background: none;
  text-align: left;
}

.song:active:not(:disabled) {
  background: var(--card-2);
}

.song .t {
  display: block;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.song .a {
  display: block;
  font-size: 13px;
  color: var(--mute);
}

.song .tag {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent) 70%, transparent);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.song:disabled .tag {
  border-color: transparent;
  background: var(--card-2);
  color: var(--mute);
}

.song:disabled .t {
  color: var(--mute);
}

.song.mine-song .tag {
  border-color: var(--me);
  background: color-mix(in srgb, var(--me) 16%, transparent);
  color: var(--ink);
}

.song.is-game {
  background: linear-gradient(90deg, color-mix(in srgb, var(--second) 14%, transparent), transparent 70%);
}

/* ------------------------------------------------------------ play: the fight */

.score {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}

.s-team {
  display: flex;
  flex-direction: column-reverse;
  gap: 4px;
  min-width: 0;
}

.s-b {
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

.s-b .s-n {
  order: -1;
}

.s-name {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--mute);
  min-width: 0;
}

.s-n {
  font: 700 34px/1 var(--sans);
  font-variant-numeric: tabular-nums;
}

.s-a .s-n {
  color: var(--team-a);
  text-shadow: 0 0 18px color-mix(in srgb, var(--team-a) 60%, transparent);
}

.s-b .s-n {
  color: var(--team-b);
  text-shadow: 0 0 18px color-mix(in srgb, var(--team-b) 60%, transparent);
}

.clock {
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--card-2);
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.clock.on {
  background: var(--ink);
  color: #08101d;
}

.tug {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--card-2);
}

.tug i {
  display: block;
  height: 100%;
  width: 50%;
  transition: width 0.6s ease;
}

#tug-a {
  background: var(--team-a);
  box-shadow: 2px 0 0 #fff;
  z-index: 1;
}

#tug-b {
  background: var(--team-b);
}

.arena-wait {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--card-2);
  font-size: 15px;
}

.picker {
  display: grid;
  gap: 10px;
}

.picker-q {
  font-weight: 800;
}

.teams {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.team {
  --tc: var(--team-a);
  display: grid;
  justify-items: center;
  gap: 4px;
  min-height: 112px;
  padding: 14px 8px;
  border-radius: 18px;
  border: 2px solid color-mix(in srgb, var(--tc) 70%, transparent);
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  text-align: center;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}

.team-b {
  --tc: var(--team-b);
}

.team:active:not(:disabled) {
  transform: scale(0.97);
}

.team.chosen {
  border-color: var(--tc);
  box-shadow: 0 0 26px -6px var(--tc), inset 0 0 0 1px var(--tc);
}

.team:disabled {
  opacity: 0.5;
}

.team-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--tc);
  color: #08101d;
  font-size: 19px;
  font-weight: 800;
  box-shadow: 0 0 18px -2px var(--tc);
}

.team-name {
  font-weight: 800;
  line-height: 1.2;
}

.team-n {
  font-size: 13px;
  color: var(--mute);
}

.mine-team {
  --mine: var(--team-a);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--mine) 60%, transparent);
  background: color-mix(in srgb, var(--mine) 10%, transparent);
  font-weight: 700;
}

.mine-team .team-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--mine);
  box-shadow: 0 0 10px var(--mine);
}

.mine-team .link {
  margin-left: auto;
}

/* ------------------------------------------------------------ about */

.about-sec {
  display: grid;
  gap: 16px;
  scroll-margin-top: 12px;
}

.about-sec + .about-sec {
  margin-top: 18px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

.steps {
  display: grid;
  gap: 12px;
}

.step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border-radius: 20px;
  background: var(--card);
  border: 1px solid var(--line);
}

.step-art {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--night);
  border: 1px solid var(--line);
}

.step-art svg {
  width: 52px;
  height: 52px;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.st-line,
.st-wave {
  stroke: rgba(247, 242, 232, 0.6);
}

.st-a {
  fill: var(--b0);
  filter: drop-shadow(0 0 3px var(--b0));
}

.st-b {
  fill: var(--b1);
  filter: drop-shadow(0 0 3px var(--b1));
}

.st-c {
  fill: var(--b2);
  filter: drop-shadow(0 0 3px var(--b2));
}

.st-me {
  fill: var(--me);
  filter: drop-shadow(0 0 4px var(--me));
}

.st-check {
  stroke: #08101d;
}

.step h3 {
  font: 600 19px/1.2 var(--serif);
}

.step p {
  margin-top: 4px;
  font-size: 15px;
  color: var(--mute);
}

.privacy p,
.prose p {
  color: var(--mute);
}

.privacy strong {
  color: var(--ink);
}

.ticks {
  display: grid;
  gap: 6px;
}

.ticks li {
  position: relative;
  padding-left: 24px;
  font-size: 15px;
  color: var(--mute);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--b2);
  box-shadow: 0 0 8px var(--b2);
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 10px;
}

.fact {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 16px 8px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
}

.fact-v {
  font: 600 30px/1 var(--serif);
  color: #ffe2a8;
  text-shadow: 0 0 20px rgba(255, 200, 110, 0.55);
  font-variant-numeric: tabular-nums;
}

.fact-l {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
}

.prose {
  gap: 12px;
  font-size: 16.5px;
}

.season-card {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}

.season-headline {
  font: italic 600 24px/1.15 var(--serif);
}

.season-lines {
  color: var(--mute);
}

/* the note */
.form {
  gap: 16px;
}

.topics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.topics legend {
  margin-bottom: 8px;
  font-weight: 800;
}

.topic {
  position: relative;
}

.topic input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.topic span {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--card-2);
  font-weight: 700;
  font-size: 14.5px;
}

.topic input:checked + span {
  background: var(--soft);
  border-color: var(--soft);
  color: #08101d;
}

.topic input:focus-visible + span {
  outline: 2px solid var(--soft);
  outline-offset: 2px;
}

.field {
  display: grid;
  gap: 6px;
}

.field label {
  font-weight: 800;
}

.opt {
  font-weight: 500;
  color: var(--faint);
}

.field input,
.field textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  font-size: 16px;
  line-height: 1.4;
}

.field textarea {
  resize: vertical;
  min-height: 120px;
}

.field input:focus,
.field textarea:focus {
  outline: 0;
  border-color: var(--soft);
}

.field-note {
  font-size: 13px;
  color: var(--faint);
}

.hp {
  position: absolute;
  left: -5000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-error {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 90, 70, 0.14);
  color: var(--bad);
  font-size: 14.5px;
  font-weight: 700;
}

.privacy-line {
  font-size: 13px;
  color: var(--faint);
}

.sent {
  justify-items: center;
  text-align: center;
  gap: 8px;
  padding: 28px 16px;
}

.sent-badge {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 26px -4px var(--good);
}

.sent-badge svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: #08101d;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sent p {
  color: var(--mute);
}

.foot {
  display: grid;
  gap: 8px;
  margin-top: 30px;
  padding: 20px 2px 0;
  border-top: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--faint);
  text-align: center;
}

/* ------------------------------------------------------------ play: the play-along card */

.along-card {
  --al: var(--accent);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* while its song is on, the whole card is the play-along, in the window's colour */
.along-card.playing {
  border-color: color-mix(in srgb, var(--al) 65%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--al) 14%, var(--card)), var(--card) 72%);
  box-shadow: 0 0 46px -16px var(--al), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.along {
  --al: var(--accent);
  --on-al: var(--on-accent);
}

/* the songs that have a play-along: the list runs to the card's edges */
.al-pick {
  display: grid;
  gap: 12px;
}

.al-pick .songs {
  margin: 0 -16px -16px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0 0 19px 19px;
  background: none;
}

/* a row's second line is the part the crowd plays, marked with a small sight */
.song.has-along .a {
  color: var(--soft);
}

.song.has-along .a::before {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 70%, transparent);
}

.song.has-along:disabled .a {
  color: var(--mute);
}

.al-before {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 3px 12px;
}

.al-icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--al);
  animation: breathe 1.4s ease-in-out infinite;
}

.al-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: var(--al);
  stroke-width: 1.8;
  stroke-linecap: round;
}

.al-before .al-title {
  grid-column: 2;
  align-self: end;
  font-weight: 800;
  line-height: 1.2;
}

.al-when {
  grid-column: 2;
  align-self: start;
  font-size: 14px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.al-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.al-head .al-title {
  font: 600 18px/1.2 var(--serif);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.al-main {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.al-fire {
  position: relative;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 32%, color-mix(in srgb, var(--al) 70%, #fff), var(--al) 62%);
  color: var(--on-al);
  font-size: 21px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 0 34px -4px var(--al), inset 0 -6px 14px rgba(0, 0, 0, 0.25);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.al-fire:disabled {
  filter: grayscale(0.7) brightness(0.6);
}

.al-fire.armed {
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 44px 0 var(--al), inset 0 -6px 14px rgba(0, 0, 0, 0.25);
}

.al-fire.beat {
  filter: brightness(1.25);
}

.al-fire.al-tap {
  animation: tap 0.18s ease-out;
}

.al-fire.al-hit {
  animation: hit 0.5s ease-out;
}

.al-ring {
  position: absolute;
  inset: -9px;
  width: calc(100% + 18px);
  height: calc(100% + 18px);
  transform: rotate(-90deg);
  pointer-events: none;
}

.al-ring circle {
  fill: none;
  stroke-width: 4;
}

.al-ring-bg {
  stroke: rgba(255, 255, 255, 0.14);
}

.al-ring-arc {
  stroke: #fff;
  stroke-linecap: round;
}

.al-fire-t {
  position: relative;
  pointer-events: none;
}

.al-side {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.al-answer {
  min-height: 1.3em;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
}

.al-answer.hit {
  color: var(--al);
  text-shadow: 0 0 16px var(--al);
}

.al-answer.armed {
  color: var(--ink);
}

.al-answer.bad {
  color: var(--bad);
}

.al-mine,
.al-crowd {
  font-size: 14px;
  color: var(--mute);
  font-variant-numeric: tabular-nums;
}

.al-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.al-prog-t {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.al-dots {
  display: flex;
  align-items: center;
  gap: 5px;
}

.al-dots i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid color-mix(in srgb, var(--al) 70%, transparent);
}

.al-dots i.fin {
  width: 12px;
  height: 12px;
}

.al-dots i.on {
  background: var(--al);
  border-color: var(--al);
  box-shadow: 0 0 8px var(--al);
}

.al-dots i.gone {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.1);
}

.al-result {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.al-burst {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--al) 22%, transparent);
}

.al-burst svg {
  width: 28px;
  height: 28px;
  fill: var(--al);
}

.along.al-won .al-burst {
  animation: hit 0.9s ease-out 2;
}

.al-result-t {
  font: 600 19px/1.2 var(--serif);
}

.al-result-d {
  font-size: 14px;
  color: var(--mute);
}

/* ------------------------------------------------------------ toast, the location sheet */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--sab) + 16px);
  transform: translateX(-50%);
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 11px 16px;
  border-radius: 14px;
  background: #f7f2e8;
  color: #0b0f18;
  font-size: 14.5px;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  animation: rise 0.25s ease-out;
}

.toast.bad {
  background: #ffd9d2;
}

.sheet {
  width: 100%;
  max-width: 480px;
  margin: auto auto 0;
  padding: 10px 20px calc(20px + var(--sab));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: #0d111b;
  color: var(--ink);
}

.sheet[open] {
  display: grid;
  gap: 12px;
  animation: sheet 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

.sheet::backdrop {
  background: rgba(2, 3, 8, 0.72);
}

.sheet-grab {
  justify-self: center;
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
}

.sheet-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.sheet-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sheet h2 {
  font: 600 26px/1.15 var(--serif);
}

.sheet h2:focus {
  outline: none;
}

.sheet-lede {
  color: var(--mute);
}

.sheet-status {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--card-2);
  font-size: 14.5px;
}

.sheet-status.bad {
  background: rgba(255, 90, 70, 0.14);
  color: var(--bad);
}

/* ------------------------------------------------------------ motion */

@keyframes breathe {
  50% {
    opacity: 0.45;
  }
}

@keyframes eq {
  0%,
  100% {
    height: 4px;
  }
  50% {
    height: 16px;
  }
}

@keyframes twinkle {
  50% {
    filter: brightness(0.72);
  }
}

@keyframes mine {
  50% {
    transform: scale(1.18);
  }
}

@keyframes screw {
  0% {
    transform: translateY(-14px) scale(0.3);
    opacity: 0;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes pop {
  40% {
    transform: scale(1.07);
  }
}

@keyframes tap {
  0% {
    transform: scale(0.9);
  }
}

@keyframes hit {
  0% {
    box-shadow: 0 0 0 0 #fff, 0 0 34px -4px var(--al);
    filter: brightness(1.6);
  }
  100% {
    box-shadow: 0 0 0 26px transparent, 0 0 34px -4px var(--al);
  }
}

@keyframes rise {
  0% {
    opacity: 0;
    transform: translateY(14px);
  }
}

.toast,
.win {
  animation-fill-mode: backwards;
}

/* rise uses its own transform; these two are positioned with one, so they only fade in */
@keyframes fade {
  0% {
    opacity: 0;
  }
}

.toast,
.win {
  animation-name: fade;
}

@keyframes sheet {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------ wide screens and a phone on its side:
   the house takes the left of the screen, the page the right */

@media (min-width: 900px), (orientation: landscape) and (min-width: 640px) and (max-height: 520px) {
  :root {
    --panel: clamp(360px, 36vw, 520px);
    --gut: 24px;
  }

  body {
    padding-left: calc(100% - var(--panel));
    padding-right: var(--sar); /* a phone on its side, notch to the right */
    padding-bottom: 48px;
  }

  main {
    padding: 0 var(--gut);
  }

  .stage,
  html.typing .stage,
  html.arena[data-view="play"] .stage,
  html[data-view="about"] .stage {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: calc(100% - var(--panel));
    transition: none;
  }

  .stage-view {
    height: 100%;
  }

  .stage-top {
    padding: 22px 28px 0 calc(28px + var(--sal));
  }

  .hero {
    top: 92px;
    left: 40px;
    right: 40px;
    max-width: 720px;
  }

  html.marquee .hero {
    top: calc(var(--marq-bottom) + 14px);
    left: 40px;
    right: 40px;
    max-width: none;
  }

  .brand {
    font-size: 13px;
  }

  .hero-title,
  .hero-title[data-len] {
    font-size: 46px;
    line-height: 52px;
  }

  .hero-sub {
    font-size: 17px;
  }

  html[data-view] main {
    z-index: auto;
  }

  /* beside the house there is no street to sit on: Home starts at the top of its column */
  .view[data-view="home"] {
    margin-top: 0;
    padding-top: 24px;
  }

  .stage-msg {
    bottom: 124px;
  }

  .win {
    bottom: 172px;
  }

  .conn {
    top: 0;
  }

  main {
    border-left: 1px solid var(--line);
    min-height: 100vh;
  }

  body::after {
    /* the panel's edge runs the full height */
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: calc(100% - var(--panel));
    width: 1px;
    background: var(--line);
    pointer-events: none;
  }

  main {
    border-left: 0;
  }

  .toast {
    left: calc(100% - var(--panel) / 2);
    bottom: 24px;
    max-width: calc(var(--panel) - 32px);
  }

  .sheet {
    margin: auto;
    border-radius: 26px;
    border-bottom: 1px solid var(--line);
    padding-bottom: 22px;
  }

  .sheet-grab {
    display: none;
  }

}

/* a small phone (an SE at 320 x 568): the home cards tighten so both calls to action stay above the fold */
@media (max-width: 360px) and (max-height: 620px) {
  /* the sign is 44 px here (app.js applyPads), the sky over the house shorter, the house a little smaller */
  html.marquee {
    --hero-h: 190px;
    --stage-h: calc(var(--hero-h) + var(--sat) + 0.36 * 100vw);
  }

  /* ...and a title of two lines stays in the sky, clear of the roof */
  html.marquee .hero-title,
  html.marquee .hero-title[data-len] {
    font-size: 22px;
    line-height: 26px;
  }

  .mini {
    padding: 8px 14px 4px;
  }

  .mini-list li {
    min-height: 32px;
  }

  .mini-list li:nth-child(n + 3) {
    display: none;
  }

  .cta {
    grid-template-columns: 42px minmax(0, 1fr) 14px;
    gap: 12px;
    padding: 10px 12px;
  }

  .cta-orb {
    width: 42px;
    height: 42px;
  }

  .cta-t {
    font-size: 20px;
    line-height: 24px;
  }
}

/* a phone on its side: the words over the sky are smaller, the house keeps its room */
html.short .hero {
  top: 66px; /* under the Live pill (22 + 34 px), with room between */
}

html.short.marquee .hero {
  top: calc(var(--marq-bottom) + 4px);
}

/* ...and its column is narrow: the artist takes a line of its own under the state and the time */
html.short .hero-sub {
  flex-wrap: wrap;
  row-gap: 1px;
}

html.short .hero-meta {
  flex: 1 1 100%;
  order: 3;
}

html.short .hero-title,
html.short .hero-title[data-len] {
  font-size: 24px;
  line-height: 28px;
}

/* hover only where there is a pointer that hovers: on a phone a hover style can swallow the first tap */
@media (hover: hover) and (pointer: fine) {
  .song:hover:not(:disabled),
  .chips .btn:hover:not(:disabled) {
    background: var(--card-2);
  }

  .btn:hover:not(:disabled),
  .cta:hover {
    filter: brightness(1.08);
  }
}