:root {
  color-scheme: dark;
  --bg: #101714;
  --ink: #eee9d9;
  --muted: #b0b7a8;
  --lime: #d2ec97;
  --line: #ffffff24;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 70% 10%, #29403555, transparent 65%), var(--bg);
  color: var(--ink);
  font:
    16px "Space Grotesk",
    sans-serif;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: radial-gradient(#eee 0.7px, transparent 1px);
  background-size: 67px 79px;
  z-index: -1;
}
button,
a {
  touch-action: manipulation;
}
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 11px 18px;
  cursor: pointer;
  min-height: 44px;
}
button:hover {
  border-color: var(--lime);
  background: #d2ec9710;
}
button:disabled {
  opacity: 0.48;
  cursor: default;
}
button:focus-visible,
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 5px;
}
a {
  color: inherit;
}
h1,
h2,
p {
  margin-top: 0;
}
.site-header {
  max-width: 1280px;
  margin: auto;
  padding: 28px 36px;
  display: flex;
  gap: 24px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.wordmark {
  font-size: 28px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -2px;
}
.wordmark span {
  color: var(--lime);
  margin-left: 8px;
}
.edition,
.eyebrow,
.game-nav > span {
  font:
    11px "DM Mono",
    monospace;
  letter-spacing: 2px;
}
.edition {
  color: var(--muted);
  flex: 1;
}
.comfort {
  display: flex;
  gap: 8px;
}
.comfort button {
  font-size: 12px;
}
button[aria-pressed="true"] {
  background: var(--lime);
  color: var(--bg);
  border-color: var(--lime);
}
.page {
  max-width: 1208px;
  margin: auto;
  padding: 0 36px;
}
.hero {
  padding: 65px 0 38px;
}
.eyebrow {
  color: var(--lime);
  margin-bottom: 24px;
}
h1 {
  font-size: clamp(42px, 6vw, 78px);
  line-height: 1.04;
  letter-spacing: -4px;
  margin-bottom: 24px;
}
h1 em {
  font-family: Georgia, serif;
  font-weight: 400;
  color: var(--lime);
}
.intro {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.7;
}
.browse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.browse > span {
  font-size: 14px;
}
.moods {
  display: flex;
  gap: 8px;
}
.moods button {
  font-size: 12px;
}
.catalog {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.game-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  background: #15201b;
}
.game-card.recommended {
  border-color: var(--lime);
}
.card-art {
  height: 220px;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse, #65593666, transparent 70%), #24291f;
}
.card-art:before {
  content: "";
  position: absolute;
  width: 310px;
  height: 310px;
  border: 1px solid #e7cf8544;
  border-radius: 50%;
  box-shadow:
    0 0 0 35px #e7cf8509,
    0 0 0 70px #e7cf8507;
}
.card-art.frizz-art {
  background: radial-gradient(ellipse, #906c7a55, transparent 70%), #272731;
}
.saucer {
  font-size: 110px;
  line-height: 1;
  transform: rotate(-12deg);
  color: #e3d797;
  text-shadow: 12px 14px 0 #10171466;
}
.paper-art {
  width: 160px;
  height: 83px;
  border-radius: 50%;
  background: linear-gradient(165deg, #fff2d5 49%, #c4bbac 50%, #e9ddc6 53%);
  transform: rotate(-20deg);
  box-shadow: 0 24px 30px #0005;
  display: grid;
  place-items: center;
  color: #4f6260;
  font-size: 30px;
}
.card-body {
  padding: 26px;
}
.card-body .eyebrow {
  font-size: 10px;
  margin-bottom: 14px;
}
.card-body h2 {
  font-size: 30px;
  letter-spacing: -1px;
  margin-bottom: 12px;
}
.card-body p {
  color: var(--muted);
  line-height: 1.6;
  min-height: 52px;
}
.card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.card-foot small {
  color: var(--muted);
}
.primary,
.card-foot button {
  background: var(--lime);
  color: #172116;
  border: 0;
  font-weight: 600;
}
.suggestion {
  color: var(--lime);
  font-size: 13px;
  margin: 20px 0 35px;
}
.notes {
  padding: 22px 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.notes summary {
  cursor: pointer;
  color: var(--ink);
  padding: 6px 0;
}
.notes p {
  max-width: 780px;
  margin: 16px 0;
}
footer {
  border-top: 1px solid var(--line);
  padding: 24px 0 32px;
  color: var(--muted);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.game-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  gap: 12px;
}
.game-nav button {
  font-size: 12px;
}
.game-page {
  max-width: 100%;
  padding: 0 20px;
}
iframe {
  width: 100%;
  height: calc(100dvh - 185px);
  min-height: 500px;
  border: 0;
}
.frizz-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 18px 0 25px;
}
.frizz-heading h1 {
  font-size: clamp(36px, 5vw, 60px);
  margin: 0;
}
.frizz-heading .eyebrow {
  margin-bottom: 12px;
}
.tape {
  border-radius: 9px;
  background: #e3d8b9;
  padding: 9px;
  width: 185px;
  color: #29332a;
  transform: rotate(3deg);
}
.tape-label {
  font: 9px monospace;
  border-bottom: 2px solid #687656;
  padding: 4px;
}
.tape-window {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: #333c35;
  margin: 8px 10px;
  border-radius: 30px;
  padding: 5px;
  color: #d4c7a7;
}
.tape-window i {
  width: 27px;
  height: 27px;
  border: 6px dotted #b7b99d;
  border-radius: 50%;
}
.session-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-block: 1px solid var(--line);
  padding: 12px 0;
  justify-content: space-between;
}
.session-bar > span {
  font:
    12px "DM Mono",
    monospace;
}
.frizz-status {
  text-align: center;
  min-height: 24px;
  margin: 18px 0 0;
  color: var(--lime);
  font-size: 14px;
}
.stage {
  height: clamp(380px, 48vw, 560px);
  position: relative;
  border-radius: 30px;
  background: radial-gradient(ellipse, #58634a24, transparent 65%);
  isolation: isolate;
}
.stage svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
#flight-path {
  fill: none;
  stroke: #d9e8b050;
  stroke-width: 1.5;
  stroke-dasharray: 5 9;
}
#paper ellipse {
  fill: #f7eacc;
  stroke: #b6a482;
  stroke-width: 1;
}
#paper path {
  fill: #d2c6aa;
  stroke: #736d5c;
  stroke-width: 0.5;
}
.station,
.ship {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  border-radius: 18px;
  min-width: 100px;
  padding: 10px 14px;
  z-index: 2;
  background: #15201bf2;
}
.station .member-icon {
  font-size: 27px;
  line-height: 1.25;
  color: var(--member-color);
}
.station b {
  font-size: 14px;
}
.station small,
.ship small {
  font-size: 10px;
  margin-top: 4px;
  color: var(--muted);
}
.station[aria-pressed="true"] {
  background: #243325;
  color: var(--ink);
  box-shadow: 0 0 0 3px #d2ec9718;
}
.station.visited:after {
  content: "✧ ✦ ✧";
  position: absolute;
  left: 50%;
  top: -14px;
  transform: translateX(-50%);
  width: max-content;
  color: #fff5ca;
  font-size: 20px;
  text-shadow: 0 0 6px #fff, 0 0 14px var(--member-color);
  pointer-events: none;
  animation: received-sparkles 1.8s ease-in-out infinite alternate;
}
.ship {
  left: 50%;
  top: 51%;
  background: transparent;
  border-color: transparent;
}
.ship > span {
  font-size: 42px;
  color: #ddd2a2;
}
.ship b {
  font-size: 11px;
}
.keyboard-hint {
  text-align: center;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.session-panel {
  background: #202b23;
  border: 1px solid var(--line);
  border-radius: 18px;
  text-align: center;
  padding: 30px;
  max-width: 650px;
  margin: 20px auto;
}
.session-panel h2 {
  font-size: 28px;
  letter-spacing: -1px;
}
.session-panel p {
  color: var(--muted);
  line-height: 1.6;
}
.actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
#skip {
  display: block;
  margin: 16px auto;
}
.bloom {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 30deg,
    #d2ec9755,
    #bd9ddd66,
    #e6b37655,
    #79b7bf66,
    #d2ec9755
  );
  filter: blur(30px);
  transition: opacity 1.5s;
}
.blooming .bloom {
  opacity: 0.8;
}
.blooming .station {
  border-color: var(--member-color);
}
.paused .stage {
  opacity: 0.6;
}
.less-motion * {
  animation: none !important;
  scroll-behavior: auto !important;
  transition: none !important;
}
@media (max-width: 650px) {
  .site-header {
    padding: 18px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .edition {
    display: none;
  }
  .comfort {
    margin-left: auto;
  }
  .page {
    padding: 0 18px;
  }
  .hero {
    padding-top: 40px;
  }
  h1 {
    letter-spacing: -2px;
  }
  .browse {
    align-items: flex-start;
    flex-direction: column;
  }
  .moods {
    flex-wrap: wrap;
  }
  .catalog {
    grid-template-columns: 1fr;
  }
  .card-art {
    height: 180px;
  }
  .intro {
    font-size: 16px;
  }
  .game-nav > span {
    display: none;
  }
  .mini-tape {
    display: none;
  }
  .station {
    min-width: 80px;
    padding: 8px;
  }
  .station b {
    font-size: 12px;
  }
  .station small {
    font-size: 9px;
  }
  .session-bar {
    gap: 10px;
  }
  #pass {
    font-size: 13px;
    margin-left: auto;
  }
  .stage {
    height: 420px;
  }
  .ship {
    min-width: 80px;
    padding: 5px;
  }
  .ship small {
    max-width: 80px;
  }
  footer {
    gap: 20px;
    line-height: 1.6;
  }
  .game-page {
    padding: 0 6px;
  }
  iframe {
    min-height: 650px;
  }
  .card-foot small {
    font-size: 11px;
  }
}

/* Flash Light — a dark, spacious run toward morning. */
.flash-page {
  max-width: 1440px;
  padding-bottom: 36px;
}
.flash-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 520px);
  align-items: end;
  gap: 8px 36px;
  padding: 18px 4px 22px;
}
.flash-heading .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
}
.flash-heading h1 {
  margin: 0;
  font-size: clamp(42px, 6vw, 82px);
}
.flash-heading h1 em {
  color: #ffd76a;
}
.flash-heading > p:last-child {
  margin: 0 0 8px;
  color: #bcb0cd;
  line-height: 1.6;
}
.flash-hud {
  display: grid;
  grid-template-columns: auto auto minmax(140px, 0.8fr) minmax(230px, 1.5fr) auto;
  gap: 8px;
  padding: 8px;
  border: 1px solid #9671bb55;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(90deg, #10091e, #27103b 55%, #102d35);
}
.flash-hud > span {
  min-height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 9px;
  background: #ffffff08;
  color: #d8cce4;
}
.flash-hud small {
  color: #8edfe8;
  font:
    8px "DM Mono",
    monospace;
  letter-spacing: 0.13em;
}
.flash-hud b {
  margin-top: 4px;
  color: #ffd76a;
  font:
    400 18px "Bungee",
    sans-serif;
}
#flash-cargo {
  font-size: 13px;
}
#flash-status {
  color: #dfd5ea;
  font-size: 13px;
  text-align: left;
}
#flash-deliver {
  align-self: stretch;
  border-color: #ffd76a;
  border-radius: 9px;
  color: #ffd76a;
  font-size: 12px;
}
#flash-deliver:not(:disabled) {
  border-color: var(--member-ink, #ffd76a);
  background: linear-gradient(100deg, var(--member-ink, #ffd76a), var(--member-ink-two, #ffd76a));
  color: #1b1030;
  font-weight: 700;
}
.flash-stage {
  min-height: 430px;
  height: min(65vw, 650px);
  position: relative;
  overflow: hidden;
  border: 1px solid #9671bb55;
  border-top: 0;
  border-radius: 0 0 24px 24px;
  background: #080516;
  box-shadow: 0 24px 70px #05020caa;
}
#flash-canvas {
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}
.flash-paper-ring {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.flash-paper-choice {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 2px;
  width: 70px;
  min-height: 62px;
  padding: 5px;
  transform: translate(-50%, -50%);
  border: 1px solid #b8b0d1;
  border-radius: 11px;
  background: #180f2be8;
  color: #f7e9d2;
  font: 8px/1.1 "DM Mono", monospace;
  text-align: center;
  pointer-events: auto;
}
.flash-paper-choice img {
  width: 30px;
  height: 30px;
  border-radius: 4px;
}
.flash-paper-choice.selected {
  border: 2px solid #ffe78f;
  background: #453051;
  box-shadow: 0 0 0 3px #ffe78f55, 0 0 18px #ffe78f77;
}
.flash-paper-choice:disabled { pointer-events: none; }
.flash-member-target {
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  padding: 0;
  transform: translate(-50%, -50%);
  border: 3px solid #fff0a0;
  border-radius: 50%;
  background: #ffe27808;
  box-shadow: 0 0 12px #ffe278, 0 0 30px #ffe278aa;
  pointer-events: auto;
  animation: flash-request 1.5s ease-in-out infinite;
}
.flash-member-target[hidden] { display: none; }
.flash-member-target img {
  width: 29px;
  height: 29px;
  border: 2px solid #fff0a0;
  border-radius: 50%;
  background: #fff0a0;
  box-shadow: 0 0 12px #fff0a0;
  animation: flash-mind 0.6s steps(2, end) infinite;
}
.flash-member-target span {
  position: absolute;
  bottom: -16px;
  padding: 3px 7px;
  border-radius: 10px;
  border: 1px solid var(--member-ink-two, #fff0a0);
  background: #160d28;
  color: #fff0a0;
  font: 700 9px "DM Mono", monospace;
  white-space: nowrap;
}
@keyframes flash-request {
  50% { box-shadow: 0 0 20px #ffe278, 0 0 42px #ffe278cc; }
}
@keyframes flash-mind { 50% { opacity: 0.28; } }
.less-motion .flash-member-target,
.flash-page.paused .flash-member-target { animation: none; }
.less-motion .flash-member-target img,
.flash-page.paused .flash-member-target img { animation: none; }
.flash-panel {
  width: min(520px, calc(100% - 32px));
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 3;
  transform: translate(-50%, -50%);
  padding: 28px;
  border: 1px solid #ffd76a77;
  border-radius: 18px;
  color: #f7edf8;
  text-align: center;
  background: linear-gradient(145deg, #130a25ed, #24103bed);
  box-shadow: 0 0 60px #b76cff33;
  backdrop-filter: blur(12px);
}
.flash-panel .eyebrow {
  margin-bottom: 12px;
  color: #8edfe8;
}
.flash-panel h2 {
  margin-bottom: 10px;
  font:
    400 clamp(25px, 4vw, 40px) "Bungee",
    sans-serif;
}
.flash-panel p:not(.eyebrow) {
  color: #cbbfd5;
  line-height: 1.6;
}
.flash-panel .actions {
  margin-top: 18px;
}
@media (max-width: 700px) {
  .flash-heading {
    display: block;
    padding-block: 8px 16px;
  }
  .flash-heading h1 {
    margin: 8px 0;
  }
  .flash-hud {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  #flash-status {
    grid-column: 1 / -1;
    min-height: 38px;
    text-align: left;
  }
  #flash-deliver { grid-column: 1 / -1; }
  .flash-paper-choice {
    width: 49px;
    min-height: 49px;
    font-size: 0;
  }
  .flash-paper-choice img { width: 32px; height: 32px; }
  .flash-member-target { width: 58px; height: 58px; }
  .flash-stage {
    min-height: 520px;
    height: 68dvh;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

.card-body .eyebrow {
  min-height: 0;
  color: var(--lime);
}
#paper-marks path {
  stroke-width: 2;
  fill: none;
}

.station.answering {
  box-shadow: 0 0 24px color-mix(in srgb, var(--member-color) 25%, transparent);
  border-color: var(--member-color);
}
.tape-playing .tape-window i {
  animation: reel-turn 6s linear infinite;
}
@keyframes reel-turn {
  to {
    transform: rotate(360deg);
  }
}

/* Original paper prints inspired by documented blotter-art motifs. */
.paper-studio {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 28px;
  margin: 24px 0;
  background: linear-gradient(120deg, #30263f, #192e2c);
  border: 1px solid #bea5d94a;
  border-radius: 22px;
}
.paper-preview {
  flex: 0 0 180px;
  text-align: center;
  transform: rotate(-5deg);
}
.paper-preview img {
  display: block;
  width: 156px;
  height: 156px;
  margin: 0 auto 14px;
  box-shadow: 7px 9px 0 #080c0c55;
  border: 5px solid #fff0d5;
  animation: paper-space-spin 7.2s ease-in-out infinite;
}
@keyframes paper-space-spin {
  0%,
  100% {
    transform: perspective(280px) rotateY(-8deg) rotateZ(-2deg);
  }
  50% {
    transform: perspective(280px) rotateY(18deg) rotateZ(3deg);
  }
}
.paper-preview span {
  font:
    8px "DM Mono",
    monospace;
  letter-spacing: 1px;
  color: #e9d2a3;
}
.paper-preview span b {
  display: block;
  margin-bottom: 5px;
  color: #f2cc79;
  font-size: 10px;
}
.paper-picker {
  min-width: 0;
}
.paper-picker .eyebrow {
  color: #f2cc79;
  font-size: 10px;
  margin-bottom: 10px;
}
.paper-picker h2 {
  font-size: 30px;
  letter-spacing: -1px;
  margin-bottom: 10px;
}
.paper-picker > p:not(.eyebrow) {
  color: #c9c6ca;
  font-size: 14px;
  line-height: 1.6;
}
#paper .paper-edge {
  fill: none;
  stroke: #fff0cd;
  stroke-width: 1.5;
}
#paper .paper-fold {
  fill: #fff3d1;
  stroke: #937b76;
  stroke-width: 1;
}
#paper-marks path {
  stroke-width: 3;
  fill: none;
}
@media (max-width: 650px) {
  .paper-studio {
    gap: 22px;
    padding: 22px 18px;
    flex-direction: column;
    align-items: stretch;
  }
  .paper-preview {
    flex-basis: auto;
  }
  .paper-preview img {
    width: 126px;
    height: 126px;
  }
}

/* FB is a 2D court: catch rings mark the exact landing targets.
   The court sits at the top of the playfield and fills the viewport like the
   arcade canvas, with the compact HUD strips tucked underneath it. */
#frizzbee .stage {
  --fb-court-height: clamp(430px, calc(100dvh - 290px), 820px);
  height: var(--fb-court-height);
  touch-action: none;
  background:
    radial-gradient(ellipse, #69578538, transparent 72%),
    repeating-linear-gradient(0deg, transparent 0 39px, #c4afe509 40px), #14231f;
  border: 1px solid #b9a6d333;
  margin-top: 0;
}
#frizzbee .station {
  min-width: 80px;
  padding: 8px 10px;
}
#frizzbee .station.orbiting {
  box-shadow:
    0 0 18px color-mix(in srgb, var(--member-color) 40%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--member-color) 20%, transparent);
  border-color: color-mix(in srgb, var(--member-color) 80%, white);
  transform: translate(-50%, -50%) scale(1.04);
}
#frizzbee .ship {
  min-width: 128px;
  padding: 14px 18px 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 245, 203, 0.18),
    rgba(57, 75, 107, 0.55)
  );
  border-color: rgba(242, 204, 121, 0.9);
  box-shadow:
    0 0 28px rgba(242, 204, 121, 0.28),
    0 0 50px rgba(123, 162, 255, 0.24);
  color: #f3dca4;
  backdrop-filter: blur(2px);
}
#frizzbee .ship::before {
  content: "";
  position: absolute;
  left: 18%;
  top: 56%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 35%,
    #fff6d9,
    #ffe8a0 28%,
    #5b739b 29%,
    #172b39 100%
  );
  box-shadow: 0 0 18px rgba(255, 218, 123, 0.65);
}
#frizzbee .ship::after {
  content: "";
  position: absolute;
  right: 18%;
  top: 44%;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(246, 220, 153, 0.7);
  background: rgba(255, 245, 210, 0.35);
  box-shadow: 0 0 18px rgba(246, 220, 153, 0.4);
  transform: rotate(18deg);
}
#frizzbee .ship b {
  display: block;
  font-size: 15px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
#frizzbee .ship small {
  display: block;
  margin-top: 3px;
  letter-spacing: 0.12em;
}
#frizzbee .ship.orbiting {
  box-shadow:
    0 0 24px rgba(242, 204, 121, 0.6),
    0 0 40px rgba(142, 211, 255, 0.35);
  border-color: #f2cc79;
}
#frizzbee .ship > span:first-child {
  display: inline-block;
  animation: mothership-time-spin 3.6s linear infinite;
}
@keyframes mothership-time-spin {
  to {
    transform: rotate(360deg);
  }
}
#frizzbee .station.retired {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -65%) scale(0.72);
}
.catch-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% - var(--fb-court-height) * 0.073846));
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 2px solid var(--member-ink-two);
  border-radius: 50%;
  background: #10091ed9;
  box-shadow: 0 0 10px var(--member-color);
}
.catch-ring img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
}
.catch-ring i {
  position: absolute;
  inset: -7px;
  color: #fff5ca;
  font:
    400 12px "DM Mono",
    monospace;
  font-style: normal;
  text-align: right;
  text-shadow:
    0 0 8px #fff,
    0 0 14px var(--member-ink);
  animation: forehead-flash 1.1s ease-in-out infinite alternate;
}
@keyframes forehead-flash {
  from {
    opacity: 0.35;
    transform: rotate(-12deg) scale(0.82);
  }
  to {
    opacity: 1;
    transform: rotate(12deg) scale(1.2);
  }
}
#frizzbee .station:disabled {
  opacity: 0.7;
}
#frizzbee .station.visited .catch-ring {
  border-color: #c9f66b;
  box-shadow: 0 0 15px #c9f66b;
}
#frizzbee .station[aria-pressed="true"] .catch-ring {
  outline: 2px dashed var(--member-color);
  outline-offset: 4px;
  border-radius: 50%;
}
.fb-concert-link {
  display: inline-block;
  padding: 14px 20px;
  border-radius: 30px;
  text-decoration: none;
}
#frizzbee .blooming {
  background-color: #332846;
}
@media (max-width: 650px) {
  #frizzbee .stage {
    --fb-court-height: 760px;
  }
  #frizzbee .catch-ring {
    transform: translate(-50%, calc(-50% - var(--fb-court-height) * 0.073846));
  }
  #frizzbee .station {
    min-width: 88px;
  }
}

/* Desktop workspace: keep the paper controls beside the playing surface. */
.fb-sidebar {
  min-width: 0;
}
#fb-court {
  min-width: 0;
}
@media (min-width: 1100px) {
  .site-header {
    max-width: 1680px;
    padding: 16px 36px;
    min-height: 76px;
  }
  #frizzbee,
  #arcade {
    max-width: 1680px;
    padding-inline: 36px;
  }
  .game-nav {
    padding: 12px 0;
  }
  .frizz-heading {
    margin: 8px 0 20px;
  }
  .frizz-heading h1 {
    font-size: 46px;
    letter-spacing: -2px;
  }
  .frizz-heading .eyebrow {
    margin-bottom: 8px;
  }
  .fb-layout {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    margin-bottom: 24px;
  }
  .fb-sidebar .paper-studio {
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 22px;
    margin: 0;
  }
  .fb-sidebar .paper-preview {
    flex-basis: auto;
  }
  .fb-sidebar .paper-preview img {
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
  }
  .fb-sidebar .paper-picker h2 {
    font-size: 25px;
  }
  .fb-sidebar .paper-picker > p:not(.eyebrow) {
    font-size: 13px;
  }
  .fb-sidebar .session-panel {
    margin: 16px 0 0;
    padding: 20px;
    text-align: left;
  }
  .fb-sidebar .session-panel h2 {
    font-size: 23px;
  }
  .fb-sidebar .session-panel p {
    font-size: 13px;
  }
  .fb-sidebar .primary {
    width: 100%;
    text-align: center;
  }
  #frizzbee .stage {
    --fb-court-height: clamp(360px, calc(100dvh - 430px), 700px);
    margin-top: 0;
  }
  #frizzbee .session-bar {
    gap: 12px;
    padding: 10px 0;
  }
  #frizzbee .session-bar > span {
    font-size: 11px;
  }
  #frizzbee #pass {
    padding: 10px 12px;
    font-size: 12px;
  }
  #frizzbee .frizz-status {
    margin-top: 12px;
    font-size: 13px;
  }
  #frizzbee .keyboard-hint {
    max-width: 850px;
    margin: 12px auto 0;
  }
  #frizzbee > .notes {
    padding: 14px 0;
  }
  #arcade-frame {
    display: block;
    height: calc(100dvh - 150px);
    min-height: 480px;
  }
}
@media (min-width: 1600px) {
  .fb-layout {
    grid-template-columns: 310px minmax(0, 1fr);
    gap: 36px;
  }
  .fb-sidebar .paper-preview img {
    width: 132px;
    height: 132px;
  }
  .fb-sidebar .paper-picker > p:not(.eyebrow),
  .fb-sidebar .session-panel p {
    font-size: 14px;
  }
  #frizzbee .station {
    min-width: 100px;
  }
  #frizzbee .station b {
    font-size: 16px;
  }
  #frizzbee .station small {
    font-size: 11px;
  }
}

/* A little weightless paper, a whole band on the dance floor. */
.floating-papers {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
}
.floating-papers img {
  position: absolute;
  width: 54px;
  height: 54px;
  border: 2px solid #f7eacc;
  border-radius: 50%;
  opacity: 0.45;
  box-shadow: 0 12px 18px #0006;
  animation: paper-float 7s ease-in-out infinite alternate;
}
.floating-papers img:nth-child(1) {
  left: 29%;
  top: 42%;
  animation-delay: -2s;
}
.floating-papers img:nth-child(2) {
  left: 66%;
  top: 53%;
  animation-delay: -5s;
  width: 42px;
  height: 42px;
}
.floating-papers img:nth-child(3) {
  left: 44%;
  top: 68%;
  animation-delay: -3s;
  width: 34px;
  height: 34px;
}
.floating-papers img:nth-child(4) {
  left: 76%;
  top: 34%;
  animation-delay: -6s;
}
@keyframes paper-float {
  from {
    transform: translate(-12px, 12px) rotate(-25deg) scaleY(0.45);
  }
  to {
    transform: translate(18px, -20px) rotate(30deg) scaleY(0.65);
  }
}
#frizzbee .station {
  background: transparent;
  border-color: transparent;
  padding-top: 0;
}
#frizzbee .station:hover,
#frizzbee .station[aria-pressed="true"] {
  background: #243325b8;
  border-color: var(--member-color);
}
#frizzbee .station .member-icon {
  display: none;
}
.band-dancer {
  display: block;
  width: 64px;
  height: 72px;
  pointer-events: none;
}
.stage .band-dancer svg {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.dance-shadow {
  fill: #0005;
}
.dance-body {
  transform-origin: 40px 78px;
  animation: band-groove 1.2s ease-in-out infinite;
  animation-delay: var(--dance-delay);
}
.dance-shirt {
  fill: var(--member-color);
  stroke: #fff4;
  stroke-width: 2;
}
.dance-arm,
.dance-leg {
  fill: none;
  stroke: var(--member-color);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.dance-head {
  fill: #b67b58;
}
.dance-hair {
  fill: #231b2c;
  stroke: var(--member-color);
  stroke-width: 2;
}
.dance-glasses {
  stroke: #fff4b5;
  stroke-width: 4;
}
.dance-body text {
  fill: #222a29;
  font: bold 20px sans-serif;
}
.dance-arm {
  animation: band-arms 0.6s ease-in-out infinite alternate;
  animation-delay: var(--dance-delay);
  transform-origin: 40px 33px;
}
.leg-left {
  transform-origin: 34px 53px;
  animation: band-step 0.6s ease-in-out infinite alternate;
  animation-delay: var(--dance-delay);
}
.leg-right {
  transform-origin: 46px 53px;
  animation: band-step 0.6s ease-in-out infinite alternate-reverse;
  animation-delay: var(--dance-delay);
}
@keyframes band-groove {
  0%,
  100% {
    transform: rotate(-7deg) translateY(0);
  }
  50% {
    transform: rotate(7deg) translateY(-5px);
  }
}
@keyframes band-arms {
  to {
    transform: rotate(12deg);
  }
}
@keyframes band-step {
  to {
    transform: rotate(14deg);
  }
}
#frizzbee .station .catch-ring {
  z-index: 1;
}
#frizzbee .paper-flight {
  z-index: 3;
}
#frizzbee.paused *,
#frizzbee:not(.tape-playing) .band-dancer *,
#frizzbee:not(.tape-playing) .floating-papers img {
  animation-play-state: paused;
}
@media (max-width: 650px) {
  .band-dancer {
    width: 56px;
    height: 63px;
  }
  .floating-papers img {
    width: 36px;
    height: 36px;
  }
}

/* Keep the ending and its next actions visible inside the court. */
#frizz-results {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(92%, 560px);
  max-height: 94%;
  overflow: auto;
  margin: 0;
  padding: 24px;
  background: #202b23f5;
  box-shadow: 0 16px 70px #0008;
}
#frizz-results h2 {
  font-size: 26px;
}
#frizz-results .eyebrow {
  margin-bottom: 12px;
}
#frizz-results #tape-order {
  font-size: 13px;
}

/* Give the embedded concert nearly the entire available window. */
#arcade {
  max-width: none;
  padding-inline: 10px;
}
#arcade .game-nav > span {
  color: #ffca77;
  letter-spacing: 3px;
}
#arcade-frame {
  display: block;
  width: 100%;
  height: calc(100dvh - 140px);
  min-height: 580px;
}
@media (max-width: 760px) {
  #arcade {
    padding-inline: 0;
  }
  #arcade-frame {
    min-height: 850px;
  }
}

/* In concert mode, keep the collection chrome to one slim strip. */
body.playing-concert .site-header {
  min-height: 42px;
  height: 42px;
  padding: 3px 14px;
  gap: 12px;
  max-width: none;
  flex-wrap: nowrap;
}
body.playing-concert .wordmark {
  font-size: 20px;
}
body.playing-concert .edition {
  display: none;
}
body.playing-concert .comfort {
  margin-left: auto;
}
body.playing-concert .comfort button {
  min-height: 32px;
  padding: 5px 10px;
  font-size: 11px;
}
body.playing-concert #arcade-frame {
  height: calc(100dvh - 88px);
  min-height: 500px;
}
@media (max-width: 760px) {
  body.playing-concert #arcade-frame {
    min-height: 800px;
  }
}

/* One bright marquee above the embedded concert. */
body.playing-concert .site-header { display: none; }
body.playing-concert #arcade { padding-inline: 8px; }
body.playing-concert #arcade .arcade-marquee {
  display: grid;
  grid-template-columns: auto auto minmax(30px, 1fr) auto;
  height: 48px;
  gap: 12px;
  padding: 3px 4px 7px;
  border-bottom: 1px solid #c997f066;
}
.arcade-marquee-title { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
#arcade .arcade-marquee-title b { color: #ffe57f; font: 400 clamp(17px, 2.2vw, 27px) "Bungee", sans-serif; letter-spacing: 0; text-shadow: 0 0 12px #ffa9d5; }
#arcade .arcade-marquee-title i { color: #ff7fb3; font-size: 25px; font-style: normal; text-shadow: 0 0 12px #ff65ac; animation: arcade-icon-flash 1.7s ease-in-out infinite; }
.arcade-marquee-leds {
  height: 14px;
  align-self: center;
  border-radius: 20px;
  background-image:
    radial-gradient(circle at 7px 7px, #fff8de 0 2px, #ff5d9e 3px 5px, transparent 7px),
    radial-gradient(circle at 31px 7px, #fff8de 0 2px, #ff9850 3px 5px, transparent 7px),
    radial-gradient(circle at 55px 7px, #fff8de 0 2px, #ffe26b 3px 5px, transparent 7px),
    radial-gradient(circle at 79px 7px, #fff8de 0 2px, #baf46a 3px 5px, transparent 7px),
    radial-gradient(circle at 103px 7px, #fff8de 0 2px, #5de5e5 3px 5px, transparent 7px),
    radial-gradient(circle at 127px 7px, #fff8de 0 2px, #879dff 3px 5px, transparent 7px),
    radial-gradient(circle at 151px 7px, #fff8de 0 2px, #cb79f2 3px 5px, transparent 7px);
  background-size: 168px 14px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 7px #ff77b2);
  animation: arcade-led-chase 2s steps(7) infinite;
}
@keyframes arcade-icon-flash { 50% { opacity: 0.45; filter: brightness(1.8); } }
@keyframes arcade-led-chase { to { background-position: 168px 0; filter: brightness(1.7) drop-shadow(0 0 10px #85f4ec); } }
body.playing-concert #arcade-frame { height: calc(100dvh - 74px); min-height: 520px; }
body.less-motion #arcade .arcade-marquee *,
body.less-motion #arcade .arcade-marquee *::before,
body.less-motion #arcade .arcade-marquee *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #arcade .arcade-marquee *, #arcade .arcade-marquee *::before, #arcade .arcade-marquee *::after { animation: none !important; }
}
@media (max-width: 650px) {
  body.playing-concert #arcade .arcade-marquee { grid-template-columns: auto minmax(0, 1fr) auto; gap: 5px; }
  #arcade .arcade-marquee-title { display: flex; }
  .arcade-marquee-leds { display: none; }
  #arcade .arcade-marquee-title b { font-size: 15px; }
  #arcade .arcade-marquee-title i { font-size: 18px; }
  body.playing-concert #arcade .arcade-marquee button { padding-inline: 7px; font-size: 10px; }
}
@media (max-width: 760px) {
  body.playing-concert #arcade-frame { min-height: 700px; }
}

/* The collection HUD lives above the court, leaving the flight field open. */
.collector-hud {
  display: grid;
  grid-template-columns: repeat(10, minmax(82px, 1fr));
  gap: 6px;
  position: sticky;
  top: 0;
  z-index: 8;
  overflow-x: auto;
  padding: 9px;
  border: 1px solid #bfa4dd3d;
  border-radius: 14px;
  background: linear-gradient(100deg, #241432f2, #10282af2);
  box-shadow: 0 10px 28px #05040a80;
  backdrop-filter: blur(12px);
}
#fb-court > .session-bar,
#fb-court > .delivery-readout {
  padding-inline: 12px;
  border-color: #d2b7ee30;
  background: linear-gradient(90deg, #2b174780, #102f3080);
}
#fb-court > .session-bar {
  border-radius: 14px 14px 0 0;
}
#fb-court > .delivery-readout {
  margin-bottom: 7px;
  border-radius: 0 0 14px 14px;
}
.collector-card {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  align-items: center;
  position: relative;
  padding: 6px;
  overflow: hidden;
  border: 1px solid #ffffff20;
  border-radius: 9px;
  color: #d9cde2;
  background: #140e20cc;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease;
}
.collector-card > img {
  width: 29px;
  height: 29px;
  justify-self: center;
  border: 2px solid #fff1cf;
  border-radius: 5px;
}
.collector-card > span {
  min-width: 0;
  text-align: center;
}
.collector-card b,
.collector-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.collector-card b {
  color: #fff2d0;
  font-size: 9px;
  text-overflow: clip;
}
.collector-card small {
  margin-top: 2px;
  color: #b9a9c8;
  font:
    7px "DM Mono",
    monospace;
}
.collector-card > i {
  grid-column: 1 / -1;
  min-height: 13px;
  padding-top: 2px;
  color: #f2cc79;
  background: linear-gradient(
      90deg,
      var(--member-color) calc(var(--collection-progress, 0) * 100%),
      #ffffff16 0
    )
    left bottom / 100% 3px no-repeat;
  font:
    500 8px "DM Mono",
    monospace;
  font-style: normal;
  text-align: right;
}
.collector-card.paper-match {
  z-index: 1;
  border-color: #fff1ba;
  background: color-mix(in srgb, var(--member-color) 18%, #171020);
  box-shadow: 0 0 16px color-mix(in srgb, var(--member-color) 55%, transparent);
  transform: translateY(-2px);
}
.collector-card.paper-match::after {
  content: "MATCH";
  position: absolute;
  top: 2px;
  right: 3px;
  color: #fff1ba;
  font:
    6px "DM Mono",
    monospace;
}
.collector-card.heard {
  border-color: #c9f05b88;
  background: #1f3a2a;
}

/* Shared cast lettering: each member keeps one typeface, ink blend, and
   hand-stamped dash in every game. */
#frizzbee .station > b,
.collector-card b,
.splash-band-member .member-signature,
.flash-member-target .member-signature {
  font-family: var(--member-font), "Bungee", sans-serif;
  font-weight: var(--member-font-weight, 400);
  letter-spacing: 0.035em;
  background: linear-gradient(105deg, var(--member-ink), var(--member-ink-two));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 #08050d) drop-shadow(0 0 5px var(--member-color));
}
.flash-member-target .member-signature {
  background: #160d28;
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
  color: var(--member-ink);
  font-size: 12px;
  text-shadow: 0 0 6px var(--member-ink-two);
}
#frizzbee .station > b::after,
.collector-card b::after,
.splash-band-member .member-signature::after,
.flash-member-target .member-signature::after {
  content: var(--member-mark);
  display: inline-block;
  margin-left: 0.34em;
  color: var(--member-ink-two);
  font:
    700 0.75em "DM Mono",
    monospace;
  letter-spacing: -0.12em;
  text-shadow: 0 0 7px var(--member-ink-two);
  transform: rotate(-9deg);
}
.collector-hud .collector-card b {
  letter-spacing: 0;
}
.collector-hud .collector-card b::after { display: none; }
#frizzbee .station > small {
  color: var(--member-ink-two);
  border-bottom: 2px dashed
    color-mix(in srgb, var(--member-ink) 65%, transparent);
}
#frizzbee .station > .member-instrument {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  margin-top: 2px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--member-ink) 65%, transparent);
  border-radius: 50%;
  background: #10091ebf;
  font: 16px/1 sans-serif;
  filter: drop-shadow(0 0 5px var(--member-color));
}
.collector-card {
  box-shadow: inset 3px 0 0 var(--member-ink);
}
.collector-card > img {
  border-color: var(--member-ink-two);
}

/* Mothership delivery lock: manual aim gets clear, non-color-only feedback. */
.delivery-readout {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  padding: 8px 2px 0;
  color: #c7b9d4;
  font:
    9px "DM Mono",
    monospace;
  letter-spacing: 1px;
}
.delivery-readout #delivery-signal {
  color: #f2cc79;
  font-weight: 500;
}
.delivery-readout > span:last-child {
  margin-left: auto;
  opacity: 0.7;
}
.delivery-light {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: #f2cc79;
  box-shadow: 0 0 12px #f2cc79;
}
.delivery-aiming {
  cursor: crosshair;
}
#frizzbee .station.delivery-locked {
  background: #33284ddb;
  border-color: #fff2cf;
  box-shadow:
    0 0 0 3px var(--member-color),
    0 0 32px var(--member-color);
  transform: translate(-50%, -50%) scale(1.09);
}
#frizzbee .station.paper-match .catch-ring,
#frizzbee .station.delivery-locked .catch-ring {
  color: #fff2cf;
  text-shadow:
    0 0 8px var(--member-color),
    0 0 18px var(--member-color);
  transform: translate(-50%, calc(-50% - var(--fb-court-height) * 0.073846))
    scale(1.35);
}
#frizzbee .station.paper-match .catch-ring {
  border-color: #fff2cf;
  background: #493355;
  box-shadow: 0 0 0 4px #fff2cf99, 0 0 22px 8px var(--member-color);
  animation: request-beacon 1.6s ease-in-out infinite;
}
#frizzbee .station.paper-match .catch-ring i {
  animation: none;
  opacity: 1;
  font-size: 17px;
}
@keyframes request-beacon {
  50% {
    box-shadow: 0 0 0 8px #fff2cf22, 0 0 32px 13px var(--member-color);
    filter: brightness(1.35);
  }
}
body.less-motion #frizzbee .station.paper-match .catch-ring,
#frizzbee.paused .station.paper-match .catch-ring {
  animation: none;
}
.delivery-aiming #flight-path {
  stroke: #f2cc79;
  stroke-width: 2.5;
  filter: drop-shadow(0 0 5px #f2cc79);
}
@media (max-width: 650px) {
  .delivery-readout > span:last-child {
    display: none;
  }
  .collector-hud {
    grid-template-columns: repeat(10, 92px);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
  }
}
.dance-body {
  animation-duration: var(--dance-speed);
}
.dance-soul-sway .dance-body {
  animation-name: soul-sway;
}
.dance-space-strut .dance-body {
  animation-name: space-strut;
}
.dance-key-bounce .dance-body {
  animation-name: key-bounce;
}
.dance-guitar-lean .dance-body {
  animation-name: guitar-lean;
}
.dance-horn-step .dance-body {
  animation-name: horn-step;
}
.dance-drum-stomp .dance-body {
  animation-name: drum-stomp;
}
.dance-guitar-hop .dance-body {
  animation-name: guitar-hop;
}
.dance-rhythm-rock .dance-body {
  animation-name: rhythm-rock;
}
.dance-gospel-rise .dance-body {
  animation-name: gospel-rise;
}
.dance-brass-slide .dance-body {
  animation-name: brass-slide;
}

/* Keep the court centered beside its flight controls. */
#frizzbee .frizz-heading {
  max-width: 1280px;
  margin: 6px auto 12px;
}
#frizzbee .frizz-heading h1 {
  font-size: clamp(34px, 4vw, 54px);
}
#frizzbee .fb-layout {
  width: min(100%, 1400px);
  display: grid;
  grid-template-columns: minmax(230px, 270px) minmax(0, 1fr);
  align-items: start;
  gap: 22px;
  margin: 0 auto 24px;
}
#frizzbee #fb-court {
  width: min(100%, 1000px);
  justify-self: center;
}
#frizzbee .fb-sidebar {
  width: 100%;
  display: grid;
  gap: 14px;
}
.frizz-control-hud {
  padding: 18px;
  border: 1px solid #d6a8f777;
  border-radius: 16px;
  background: linear-gradient(155deg, #321d50, #15182f 65%, #123239);
  box-shadow: 0 8px 0 #08091988, inset 0 1px 0 #ffffff2b;
  color: #fff1d5;
}
.frizz-control-hud .eyebrow {
  margin: 0 0 6px;
  color: #8ee6e6;
  font: 700 9px "DM Mono", monospace;
  letter-spacing: 0.12em;
}
.frizz-control-hud h2 { margin: 0; font-size: 24px; }
.frizz-phase {
  margin: 9px 0 16px;
  color: #ffe18a;
  font: 500 11px "DM Mono", monospace;
}
.frizz-control-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.frizz-control-buttons .primary { grid-column: 1 / -1; }
.frizz-control-buttons button {
  width: 100%;
  min-height: 42px;
  border-radius: 9px;
  font-weight: 700;
  cursor: pointer;
}
.frizz-control-buttons .primary { justify-content: center; }
.frizz-control-buttons button:disabled { opacity: 0.45; cursor: default; }
.frizz-control-buttons button:focus-visible { outline: 3px solid #fff1a6; outline-offset: 2px; }
.frizz-audio {
  margin: 16px 0;
  padding: 10px;
  border: 1px solid #85dce17a;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 100%, #67379388, #0b132b 75%);
}
.frizz-audio-top { display: flex; justify-content: space-between; gap: 4px; color: #9bf1e9; font: 700 8px "DM Mono", monospace; }
.frizz-audio-top b { color: #ffe48e; font: inherit; }
.frizz-audio-bars { position: relative; display: flex; align-items: center; justify-content: space-around; gap: 3px; height: 50px; overflow: hidden; }
.frizz-audio-bars i { width: 6px; height: 20%; border-radius: 5px; background: linear-gradient(#fff5b0, #ff73b2 50%, #79eeeb); box-shadow: 0 0 8px #ff8bc4a0; }
.frizz-audio-bars i:nth-child(3n) { height: 38%; }
.frizz-audio-bars i:nth-child(4n) { height: 58%; }
.frizz-audio.is-playing .frizz-audio-bars i { animation: frizz-audio-beat 0.7s ease-in-out infinite alternate; }
.frizz-audio.is-playing .frizz-audio-bars i:nth-child(3n) { animation-delay: -0.3s; }
.frizz-audio.is-playing .frizz-audio-bars i:nth-child(4n) { animation-delay: -0.5s; }
.frizz-audio-bars span { position: absolute; color: #fff7b7; opacity: 0.35; }
.frizz-audio-bars span:nth-of-type(1) { left: 5%; top: 0; }
.frizz-audio-bars span:nth-of-type(2) { right: 15%; top: 7px; }
.frizz-audio-bars span:nth-of-type(3) { right: 3%; bottom: 0; }
.frizz-audio.is-playing .frizz-audio-bars span { opacity: 1; text-shadow: 0 0 10px #fff7b7; }
@keyframes frizz-audio-beat { to { height: 85%; filter: hue-rotate(50deg); } }
.frizz-audio-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.frizz-audio-actions button { min-width: 0; padding: 7px 4px; border: 1px solid #a1e9ea7a; border-radius: 7px; color: #fff4d9; background: #222342; font-size: 10px; cursor: pointer; }
.frizz-audio-actions button[aria-pressed="true"] { color: #19142c; background: #c9f46f; }
.frizz-audio-actions button:focus-visible { outline: 3px solid #fff1a6; outline-offset: 2px; }
.less-motion .frizz-audio-bars i { animation: none !important; }
@media (prefers-reduced-motion: reduce) { .frizz-audio-bars i { animation: none !important; } }
.frizz-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  margin-top: 10px;
}
.frizz-hud .session-bar,
.frizz-hud .delivery-readout,
.frizz-hud #pass {
  min-height: 52px;
  margin: 0;
  padding: 7px 14px;
  border: 0;
  border-radius: 9px;
  background: #ffffff08;
}
.frizz-hud .session-bar,
.frizz-hud .delivery-readout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
}
.frizz-hud small {
  color: #8edfe8;
  font:
    8px "DM Mono",
    monospace;
  letter-spacing: 0.13em;
}
.frizz-hud .session-bar b,
.frizz-hud #delivery-signal {
  color: #ffd76a;
  font:
    500 12px "DM Mono",
    monospace;
}
.frizz-hud .delivery-readout > span {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.frizz-hud .delivery-light {
  display: inline-block;
}
.paper-gift-controls {
  display: grid;
  gap: 7px;
  padding: 7px 0 4px;
}
.paper-gifts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.paper-gift {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  min-height: 42px;
  padding: 5px;
  border: 1px solid #bfa4dd66;
  border-radius: 8px;
  background: #1b1832;
  color: #f9edcf;
  font: 9px "DM Mono", monospace;
  cursor: pointer;
}
.paper-gift img {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: 4px;
}
.paper-gift span {
  overflow: hidden;
  text-overflow: ellipsis;
}
.paper-gift.selected {
  border-color: #ffe697;
  box-shadow: 0 0 0 2px #ffe69788, 0 0 15px #ffe69766;
  background: #4b3654;
}
.paper-gift:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}
.paper-gift:disabled {
  opacity: 0.4;
  cursor: default;
}
.paper-gift.selected:disabled { opacity: 0.4; }
.frizz-hud #pass {
  align-self: stretch;
  min-width: 0;
  border: 1px solid #ffd76a66;
  color: #fff0b8;
}
.frizz-hud #skip { width: 100%; margin: 0; }
.frizz-result-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.frizz-result-controls button { min-height: 42px; border-radius: 8px; cursor: pointer; }
.frizz-result-controls button:focus-visible,
.frizz-hud #pass:focus-visible,
.frizz-hud #skip:focus-visible { outline: 3px solid #fff1a6; outline-offset: 2px; }
#frizzbee .collector-hud {
  border-radius: 0 0 14px 14px;
}
#frizzbee .frizz-status {
  margin: 12px 0 0;
}
#frizzbee .stage {
  margin: 8px auto 0;
}
@media (max-width: 999px) {
  #frizzbee .fb-layout { grid-template-columns: 1fr; }
  #frizzbee .fb-sidebar { grid-row: 1; }
  #frizzbee #fb-court { grid-row: 2; }
  .frizz-control-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .frizz-control-buttons .primary { grid-column: auto; }
  .paper-gifts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #frizzbee .frizz-heading .mini-tape {
    display: none;
  }
  .frizz-hud #pass { min-height: 42px; }
  .paper-gifts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .frizz-hud .session-bar b,
  .frizz-hud #delivery-signal {
    font-size: 10px;
  }
  #frizzbee .fb-sidebar .paper-studio {
    align-items: center;
  }
}
@media (max-width: 500px) {
  .paper-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Side B follows the arcade's compact marquee and court-first layout. */
body:has(#frizzbee:not([hidden])) .site-header { display: none; }
#frizzbee { max-width: none; padding-inline: 8px; }
#frizzbee .frizz-marquee {
  display: grid;
  grid-template-columns: auto auto minmax(30px, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 4px 4px 7px;
  border-bottom: 1px solid #c997f066;
}
#frizzbee .frizz-marquee button {
  min-height: 34px;
  padding: 5px 12px;
  border-color: #cc8cf466;
  background: #42224b60;
}
.frizz-marquee-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.frizz-side-b {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 2px solid #ffe48a;
  border-radius: 8px;
  color: #2d1535;
  background: #ffe48a;
  box-shadow: 0 0 10px #ffe48a99;
  font: 400 21px "Bungee", sans-serif;
  animation: side-a-flash 1.8s ease-in-out infinite;
}
#frizzbee .frizz-marquee h1 {
  margin: 0;
  color: #ffe57f;
  font: 400 clamp(17px, 2.2vw, 27px) "Bungee", sans-serif;
  letter-spacing: 0;
  white-space: nowrap;
  text-shadow: 0 0 12px #ffa9d5;
}
#frizzbee .frizz-marquee-level {
  color: #9be9e8;
  font: 700 10px "DM Mono", monospace;
  letter-spacing: 0.12em;
  white-space: nowrap;
}

/* Party banner: a lit marquee strip that matches the arcade's, with a warm
   bulb chase along the underside and a soft stage glow behind the title. */
#frizzbee .frizz-marquee {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid #b98cff4d;
  background:
    radial-gradient(120% 180% at 18% 0%, #5b2f7d59, transparent 62%),
    linear-gradient(160deg, #2c1a3d, #17202e 58%, #10312f);
  box-shadow:
    inset 0 1px 0 #ffffff1f,
    0 0 26px #ae55de2e;
}
#frizzbee .frizz-marquee::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  pointer-events: none;
  background-image: radial-gradient(
    circle,
    #fff3c4 0 1.3px,
    rgba(255, 200, 119, 0.4) 1.7px,
    transparent 2.6px
  );
  background-size: 16px 3px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 4px rgba(255, 220, 140, 0.75));
  animation: frizz-bulb-chase 1.3s steps(16) infinite;
}
@keyframes frizz-bulb-chase {
  to { background-position: 16px 0; filter: brightness(1.5) drop-shadow(0 0 8px rgba(255, 220, 140, 0.9)); }
}
#frizzbee .frizz-marquee > * { position: relative; z-index: 1; }
#frizzbee .frizz-marquee > button {
  border-color: #cc8cf466;
  background: #42224b60;
}

/* Party mode: collapse the collection chrome to one banner so the court owns
   the viewport, the same way concert mode does for the arcade. */
body.playing-party .site-header { display: none; }
body.playing-party #frizzbee { padding-inline: 8px; }
body.playing-party #frizzbee .frizz-marquee { height: 44px; padding: 3px 6px; }
body.playing-party #frizzbee .frizz-marquee .game-nav,
body.playing-party #frizzbee .game-nav button { min-height: 34px; }
body.playing-party #frizzbee .fb-layout {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}
body.playing-party #frizzbee #fb-court { width: 100%; }
/* Banner + court fill the window; the HUD strips ride below the court. */
body.playing-party #frizzbee .stage {
  --fb-court-height: max(460px, calc(100dvh - 190px));
  margin-top: 0;
}
@media (max-width: 760px) {
  body.playing-party #frizzbee .stage {
    --fb-court-height: max(420px, calc(100dvh - 240px));
  }
}
#frizzbee .fb-layout {
  width: min(100%, 1680px);
  grid-template-columns: minmax(215px, 240px) minmax(0, 1fr);
  gap: 12px;
  margin-top: 8px;
}
#frizzbee #fb-court { width: min(100%, 1200px); }
#frizzbee .fb-sidebar { gap: 10px; }
#frizzbee .frizz-control-hud { padding: 12px; border-radius: 12px; }
#frizzbee .frizz-playfield-display {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(155px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 64px;
  margin-top: 2px;
  padding: 8px 14px;
  border: 1px solid #c997f077;
  border-radius: 14px 14px 0 0;
  color: #fff1d5;
  background: linear-gradient(100deg, #321d50, #171a35 50%, #123239);
  box-shadow: inset 0 1px 0 #ffffff2b;
}
.frizz-playfield-display > div { min-width: 0; }
.frizz-playfield-display small {
  display: block;
  margin-bottom: 4px;
  color: #8ee6e6;
  font: 700 8px "DM Mono", monospace;
  letter-spacing: 0.12em;
}
.frizz-playfield-display b {
  display: block;
  overflow: hidden;
  color: #ffe18a;
  font: 600 11px "DM Mono", monospace;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.frizz-display-flight > span { display: flex; align-items: center; gap: 8px; }
.frizz-display-paper { display: flex; align-items: center; justify-content: center; gap: 9px; }
.frizz-display-paper img { width: 42px; height: 42px; flex: none; border: 3px solid #fff0d5; border-radius: 6px; box-shadow: 3px 3px 0 #080c0c88; }
.frizz-display-progress { text-align: right; }
#frizzbee .frizz-playfield-display + .collector-hud { border-top: 0; border-radius: 0 0 14px 14px; }
#frizzbee .frizz-control-hud h2 { font-size: 20px; }
#frizzbee .frizz-phase { margin: 5px 0 10px; }
#frizzbee .frizz-audio { margin: 10px 0; padding: 8px; }
#frizzbee .frizz-audio-bars { height: 34px; }
#frizzbee .frizz-hud { gap: 6px; }
#frizzbee .stage {
  --fb-court-height: max(520px, calc(100dvh - 330px));
  margin-top: 0;
  border: 2px solid #c68aff;
  border-radius: 20px;
  box-shadow: 0 0 24px #ae55de25, 0 0 50px #43d6dd12;
}
body.less-motion #frizzbee .frizz-marquee *,
body.less-motion #frizzbee .frizz-marquee *::before,
body.less-motion #frizzbee .frizz-marquee *::after { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #frizzbee .frizz-marquee *, #frizzbee .frizz-marquee *::before, #frizzbee .frizz-marquee *::after { animation: none !important; }
}
@media (max-width: 999px) {
  #frizzbee .fb-layout { grid-template-columns: minmax(0, 1fr); }
  #frizzbee #fb-court { width: 100%; }
  #frizzbee .stage { --fb-court-height: 620px; }
}
@media (max-width: 650px) {
  #frizzbee .frizz-marquee { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  #frizzbee .frizz-marquee button { padding-inline: 7px; font-size: 10px; }
  #frizzbee .frizz-marquee h1 { overflow: hidden; font-size: 15px; text-overflow: ellipsis; }
  #frizzbee .frizz-marquee-level, #frizzbee .arcade-marquee-leds { display: none; }
  #frizzbee .frizz-playfield-display { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px 10px; padding: 8px 10px; }
  .frizz-display-paper { grid-column: 1 / -1; grid-row: 1; justify-content: flex-start; }
  .frizz-display-paper img { width: 34px; height: 34px; }
  .frizz-display-progress { text-align: right; }
  .frizz-playfield-display b { font-size: 9px; }
  #frizzbee .stage { --fb-court-height: 760px; border-radius: 14px; }
}
@keyframes soul-sway {
  50% {
    transform: rotate(-9deg) translateX(-3px);
  }
}
@keyframes space-strut {
  25% {
    transform: translate(-5px, -5px) rotate(-12deg);
  }
  75% {
    transform: translate(5px, -3px) rotate(12deg);
  }
}
@keyframes key-bounce {
  50% {
    transform: translateY(5px) scaleY(0.94);
  }
}
@keyframes guitar-lean {
  50% {
    transform: rotate(17deg) translateY(-2px);
  }
}
@keyframes horn-step {
  25% {
    transform: translateX(-6px) rotate(-4deg);
  }
  75% {
    transform: translateX(6px) rotate(4deg);
  }
}
@keyframes drum-stomp {
  25%,
  75% {
    transform: translateY(4px);
  }
  50% {
    transform: translateY(-2px) rotate(-5deg);
  }
}
@keyframes guitar-hop {
  40% {
    transform: translateY(-9px) rotate(-7deg);
  }
  70% {
    transform: translateY(2px) rotate(5deg);
  }
}
@keyframes rhythm-rock {
  25% {
    transform: rotate(-12deg);
  }
  75% {
    transform: rotate(12deg) scaleY(0.96);
  }
}
@keyframes gospel-rise {
  50% {
    transform: translateY(-6px) scaleY(1.06);
  }
}
@keyframes brass-slide {
  40% {
    transform: translateX(8px) skewX(-5deg);
  }
  75% {
    transform: translateX(-4px);
  }
}
.band-dancer .costume-cape,
.band-dancer .costume-instrument,
.band-dancer .costume-hat {
  display: none;
}
.costume-cape .costume-cape {
  display: block;
  fill: #f7e7aa;
  stroke: var(--member-color);
  stroke-width: 2;
}
.costume-guitar .costume-instrument,
.costume-sax .costume-instrument,
.costume-horn .costume-instrument,
.costume-star .costume-instrument {
  display: block;
  stroke: #ffd975;
  stroke-width: 5;
  fill: #c06084;
  stroke-linecap: round;
}
.costume-sax .costume-instrument {
  transform: rotate(55deg);
  transform-origin: 40px 45px;
}
.costume-horn .costume-instrument {
  transform: scaleX(1.4);
  transform-origin: 40px 45px;
  fill: none;
}
.costume-star .costume-hat {
  display: block;
  stroke: #ffe7a1;
  fill: var(--member-color);
  stroke-width: 3;
}
.costume-star .dance-glasses {
  stroke: #fff183;
  stroke-width: 6;
}
.costume-keys .dance-shirt {
  fill: #473064;
}
.costume-keys .dance-body text {
  fill: #f9e7c7;
}
.costume-drums .dance-shirt {
  fill: #f3ce72;
}
.costume-mic .dance-shirt {
  stroke: #f9e7c7;
  stroke-width: 3;
}
.dance-gospel-rise .arm-left {
  transform: rotate(28deg);
}
.dance-guitar-hop .dance-hair {
  fill: #704339;
}
.dance-guitar-lean .dance-hair {
  fill: #281924;
  stroke-width: 4;
}
#frizzbee .ship:disabled {
  pointer-events: none;
  opacity: 1;
}

#frizzbee .member-portrait {
  position: static;
  order: -1;
  display: block;
  width: 84px;
  height: 84px;
  cursor: inherit;
  pointer-events: none;
  transform-origin: 50% 80%;
}
#frizzbee .station {
  min-width: 96px;
}
@media (max-width: 650px) {
  #frizzbee .member-portrait {
    width: 72px;
    height: 72px;
  }
}

/* Side C shares the compact marquee, left controls, and open court of Play and Party. */
body.playing-freak .site-header { display: none; }
#flash-light { max-width: none; padding-inline: 8px; }
#flash-light .flash-marquee {
  display: grid;
  grid-template-columns: auto auto minmax(24px, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  min-height: 46px;
  padding: 4px 6px;
  border: 1px solid #b98cff66;
  border-radius: 14px;
  background: radial-gradient(90% 180% at 20% 0%, #6c3d8e66, transparent 65%), linear-gradient(105deg, #2d1948, #161c35 58%, #0c343b);
  box-shadow: inset 0 1px 0 #ffffff24, 0 0 22px #b266d333;
}
#flash-light .flash-marquee button { min-height: 34px; padding: 5px 12px; border-color: #cc8cf477; background: #42224b66; }
.flash-marquee-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.flash-side-c {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: #21112e;
  background: #8be9eb;
  box-shadow: 0 0 12px #8be9ebaa;
  font: 400 21px "Bungee", sans-serif;
  animation: side-a-flash 1.8s ease-in-out infinite;
}
#flash-light .flash-marquee h1 { margin: 0; color: #ffe57f; font: 400 clamp(17px, 2.2vw, 27px) "Bungee", sans-serif; white-space: nowrap; text-shadow: 0 0 12px #ffa9d5; }
.flash-marquee-level { color: #9be9e8; font: 700 10px "DM Mono", monospace; letter-spacing: .12em; white-space: nowrap; }
.flash-layout { display: grid; grid-template-columns: minmax(215px, 240px) minmax(0, 1fr); gap: 12px; margin-top: 8px; }
.flash-control-hud { align-self: start; display: grid; gap: 10px; padding: 12px; border: 1px solid #b98cff66; border-radius: 14px; background: linear-gradient(160deg, #2b1945, #151b31 67%, #0d2d35); box-shadow: inset 0 1px 0 #ffffff20; }
.flash-hud-heading { padding: 3px 3px 10px; border-bottom: 1px solid #b98cff55; }
.flash-hud-heading small, .flash-playfield-display small { display: block; color: #8ee6e6; font: 700 9px "DM Mono", monospace; letter-spacing: .1em; }
.flash-hud-heading strong { display: block; margin-top: 4px; color: #ffe57f; font: 400 28px "Bungee", sans-serif; }
.flash-hud-heading p { margin: 0; color: #d9cbe9; font-size: 12px; }
#flash-light .flash-hud { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; padding: 0; border: 0; border-radius: 0; background: none; }
#flash-light .flash-hud > span { min-height: 56px; padding: 9px 11px; border: 1px solid #bda4dd33; background: #090b22a3; }
#flash-light #flash-status { min-height: 70px; justify-content: center; border-color: #85dfe655; line-height: 1.4; }
#flash-light #flash-deliver { min-height: 50px; }
.flash-comfort { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.flash-comfort button { padding: 8px 3px; font-size: 11px; }
.flash-playfield { min-width: 0; }
.flash-playfield-display { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; min-height: 60px; padding: 8px 14px; border: 1px solid #c997f077; border-radius: 14px 14px 0 0; color: #fff1d5; background: linear-gradient(100deg, #321d50, #171a35 50%, #123239); box-shadow: inset 0 1px 0 #ffffff2b; }
.flash-playfield-display > span:last-child { text-align: right; }
.flash-playfield-display strong { display: block; margin-top: 4px; font: 400 clamp(10px, 1.2vw, 15px) "Bungee", sans-serif; }
.flash-display-spark { color: #ffe279; font-size: 24px; letter-spacing: 5px; text-shadow: 0 0 13px #ff84b9; }
#flash-light .flash-stage { height: max(510px, calc(100dvh - 154px)); min-height: 510px; border: 1px solid #c997f077; border-top: 0; border-radius: 0 0 14px 14px; }
#flash-light .keyboard-hint { margin: 7px 2px 0; }
body.less-motion .flash-marquee *, body.less-motion .flash-marquee *::before, body.less-motion .flash-marquee *::after { animation: none !important; }
@media (max-width: 950px) {
  .flash-layout { grid-template-columns: minmax(0, 1fr); }
  .flash-control-hud { grid-template-columns: minmax(130px, .7fr) minmax(0, 2fr) auto; align-items: center; }
  .flash-hud-heading { border: 0; padding: 0; }
  #flash-light .flash-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #flash-light #flash-status { grid-column: 1 / 3; min-height: 52px; }
  #flash-light #flash-deliver { grid-column: 3; }
  .flash-comfort { grid-template-columns: 1fr; }
  #flash-light .flash-stage { height: max(560px, 66dvh); }
}
@media (max-width: 650px) {
  #flash-light .flash-marquee { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  #flash-light .flash-marquee button { padding-inline: 7px; font-size: 10px; }
  #flash-light .flash-marquee h1 { overflow: hidden; font-size: 15px; text-overflow: ellipsis; }
  #flash-light .flash-marquee .arcade-marquee-leds, .flash-marquee-level { display: none; }
  .flash-control-hud { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .flash-hud-heading strong { display: none; }
  #flash-light .flash-hud { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #flash-light .flash-hud > span { padding: 6px; }
  #flash-light .flash-hud b { font-size: 13px; }
  #flash-light #flash-cargo { font-size: 10px; }
  #flash-light #flash-status { grid-column: 1 / -1; min-height: 36px; }
  #flash-light #flash-deliver { grid-column: 1 / -1; min-height: 42px; }
  .flash-comfort { grid-template-columns: minmax(0, 1fr); }
  .flash-playfield-display { grid-template-columns: minmax(0, 1fr) auto; padding: 8px; }
  .flash-playfield-display > span:last-child { display: none; }
  .flash-display-spark { font-size: 17px; }
  #flash-light .flash-stage { height: 68dvh; min-height: 520px; }
}
@media (prefers-reduced-motion: reduce) { .flash-marquee *, .flash-marquee *::before, .flash-marquee *::after { animation: none !important; } }

/* One shared top bar for the welcome screen and every game. The single light
   row blinks in place; titles and controls stay still and readable. */
:is(#commute, #arcade, #frizzbee, #flash-light) {
  width: 100%;
  max-width: none;
  padding: 8px 8px 14px;
}
.game-nav.game-marquee,
.site-header.game-marquee {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  height: 58px;
  min-height: 58px;
  padding: 14px 12px 6px;
  overflow: hidden;
  border: 1px solid #b98cff66;
  border-radius: 14px;
  background:
    radial-gradient(90% 180% at 20% 0%, #6c3d8e66, transparent 65%),
    linear-gradient(105deg, #2d1948, #171a35 58%, #0c343b);
  box-shadow: inset 0 1px 0 #ffffff24, 0 0 22px #b266d333;
}
.site-header.game-marquee {
  width: calc(100% - 16px);
  max-width: none;
  margin: 8px 8px 0;
}
body:has(main > .page:not(#welcome):not([hidden])) .site-header.game-marquee {
  display: none;
}
.game-marquee::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 0;
  right: 0;
  height: 10px;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 8px 5px, #fffbdc 0 1px, #ff5d9e 2px 3px, transparent 4px),
    radial-gradient(circle at 24px 5px, #fffbdc 0 1px, #ffe26b 2px 3px, transparent 4px),
    radial-gradient(circle at 40px 5px, #fffbdc 0 1px, #5de5e5 2px 3px, transparent 4px),
    radial-gradient(circle at 56px 5px, #fffbdc 0 1px, #cb79f2 2px 3px, transparent 4px);
  background-size: 64px 10px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 0 4px #ff77b2);
  animation: stage-lights-blink 1.6s step-end infinite;
}
.game-marquee .game-marquee-title {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: #ffe57f;
  font: 400 clamp(17px, 2.2vw, 27px) "Bungee", sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  text-overflow: ellipsis;
  text-shadow: 0 0 12px #ffa9d5;
  white-space: nowrap;
}
.game-nav.game-marquee button,
.site-header.game-marquee button {
  flex: none;
  min-height: 34px;
  padding: 5px 12px;
  border-color: #cc8cf477;
  background: #42224b66;
  font-size: 12px;
}
@keyframes stage-lights-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .25; }
}
body.less-motion .game-marquee::before { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .game-marquee::before { animation: none; }
}
@media (max-width: 650px) {
  .game-nav.game-marquee,
  .site-header.game-marquee { gap: 7px; padding-inline: 8px; }
  .game-marquee .game-marquee-title { font-size: 15px; }
  .game-nav.game-marquee button,
  .site-header.game-marquee button { padding-inline: 7px; font-size: 10px; }
}

/* Decorative sky stays behind the dancers and never intercepts a throw. */
.frizz-sky { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.frizz-sky span { position: absolute; color: #fff1b0; opacity: .35; font-size: 22px; animation: frizz-sky-float 16s ease-in-out infinite alternate; }
.frizz-sky span:nth-child(1) { left: 7%; top: 12%; }
.frizz-sky span:nth-child(2) { left: 28%; top: 8%; font-size: 40px; }
.frizz-sky span:nth-child(3) { left: 53%; top: 17%; }
.frizz-sky span:nth-child(4) { left: 81%; top: 9%; }
.frizz-sky span:nth-child(5) { left: 91%; top: 40%; font-size: 34px; }
.frizz-sky span:nth-child(6) { left: 13%; top: 45%; }
.frizz-sky span:nth-child(7) { left: 64%; top: 38%; }
.frizz-sky span:nth-child(8) { left: 9%; top: 78%; font-size: 32px; }
.frizz-sky span:nth-child(9) { left: 38%; top: 85%; }
.frizz-sky span:nth-child(10) { left: 78%; top: 76%; }
.frizz-sky span:nth-child(11) { left: 88%; top: 91%; }
.frizz-sky span:nth-child(12) { left: 47%; top: 58%; }
.frizz-sky span:nth-child(3n) { animation-delay: -8s; animation-duration: 21s; color: #b9d9ff; }
.frizz-sky span:nth-child(3n + 1) { animation-delay: -4s; }
@keyframes frizz-sky-float { to { transform: translate(12px, -18px) rotate(12deg); } }
body.less-motion .frizz-sky span { animation: none; }
@media (prefers-reduced-motion: reduce) { .frizz-sky span { animation: none; } }

/* A received sheet lights up the musician's brain beneath a sparkle crown. */
#frizzbee .station.visited::after { z-index: 4; }
#frizzbee .station.visited .catch-ring {
  border-color: #fff5ca;
  background: radial-gradient(ellipse, #fff8dc 0%, #ffd878 35%, #ff87cd 65%, transparent 75%);
  box-shadow: 0 0 9px 3px #fff5ca, 0 0 23px 8px var(--member-color);
}
#frizzbee .station.visited .catch-ring img { visibility: hidden; }
#frizzbee .station.visited .catch-ring i {
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 22px;
  text-align: center;
  animation: none;
  opacity: 1;
}
#frizzbee .station.visited:disabled { opacity: 1; }
@keyframes received-sparkles {
  from { opacity: .8; transform: translate(-50%, 0) scale(.95); }
  to { opacity: 1; transform: translate(-50%, -4px) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  #frizzbee .station.visited::after { animation: none; }
}

#frizzbee .frizz-intro {
  position: absolute;
  inset: 12px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #161022f5;
  overflow: auto;
}
#frizzbee .frizz-intro[hidden] { display: none; }
.frizz-intro ol { max-width: 540px; text-align: left; padding-left: 24px; line-height: 1.6; }
.frizz-intro li + li { margin-top: 12px; }

/* Overview start buttons share an opaque, readable finish in every state. */
:is(#commute-intro-start, #frizz-start, #flash-start) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  border: 2px solid #ffe5a5;
  border-radius: 8px;
  background: #ffca6a;
  color: #241838;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 4px 0 #6b3f32;
}
:is(#commute-intro-start, #frizz-start, #flash-start):hover:not(:disabled),
:is(#commute-intro-start, #frizz-start, #flash-start):focus-visible {
  background: #ffe5a5;
  color: #241838;
  border-color: #fff4d9;
}
:is(#commute-intro-start, #frizz-start, #flash-start):focus-visible {
  outline: 3px solid #fff4d9;
  outline-offset: 4px;
}
:is(#commute-intro-start, #frizz-start, #flash-start):active:not(:disabled) {
  background: #ffbd52;
  color: #241838;
  box-shadow: 0 2px 0 #6b3f32;
}

#frizz-result-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 8px;
  background: #ffca6a;
  color: #241838;
  font-weight: 800;
  text-decoration: none;
}
#frizz-result-next:hover, #frizz-result-next:focus-visible { background: #ffe5a5; color: #241838; }
#frizz-result-next[hidden] { display: none; }

#frizzbee .paper-picker { position: absolute; z-index: 30; inset: 12% 10%; overflow-y: auto; }
#frizzbee .paper-picker[hidden] { display: none; }
#frizzbee .paper-picker .paper-gifts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
#frizzbee .paper-picker .paper-gift { min-height: 86px; }
#frizzbee .paper-picker .paper-gift img { width: 48px; height: 48px; }
@media (max-width: 650px) {
  #frizzbee .paper-picker { inset: 8% 4%; }
  #frizzbee .paper-picker .paper-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

#frizzbee #frizz-gameover { position: absolute; z-index: 31; inset: 20% 8%; height: fit-content; }
#frizzbee #frizz-gameover[hidden] { display: none; }

#frizz-timer { padding: 10px; border: 2px solid #ffd76a; border-radius: 8px; color: #fff2cf; font-weight: bold; font-variant-numeric: tabular-nums; }

/* Keep requested prints readable above the band, especially the active target. */
#frizzbee .station:not(.visited) .catch-ring {
  width: 46px;
  height: 46px;
  border: 3px solid #fff2cf;
  background: #fff2cf;
  box-shadow: 0 0 12px 3px #fff2cf99, 0 0 24px var(--member-color);
}
#frizzbee .station:not(.visited) .catch-ring img {
  width: 38px;
  height: 38px;
  border-radius: 4px;
  filter: brightness(1.2) saturate(1.15);
}
#frizzbee .station.paper-match .catch-ring,
#frizzbee .station.delivery-locked .catch-ring {
  width: 60px;
  height: 60px;
}
#frizzbee .station.paper-match .catch-ring img,
#frizzbee .station.delivery-locked .catch-ring img {
  width: 50px;
  height: 50px;
}

#flash-canvas, #flash-member-target, #flash-deliver { touch-action: manipulation; user-select: none; }