/* Front page: an original cosmic concert poster with clear level tickets. */
:root {
  --splash-ink: #1b1030;
  --splash-cream: #fff3d5;
  --splash-yellow: #ffe16a;
  --splash-pink: #ff62a0;
  --splash-blue: #63e5e5;
  --splash-lime: #caf567;
}
body:has(#welcome:not([hidden])) {
  overflow-x: hidden;
  background:
    radial-gradient(ellipse at 15% 10%, #e845a177, transparent 40%),
    radial-gradient(ellipse at 85% 30%, #6c43dc88, transparent 45%),
    radial-gradient(ellipse at 30% 90%, #1ac5c055, transparent 45%),
    linear-gradient(135deg, #120a31, #352060 54%, #110a29);
}
body:has(#welcome:not([hidden]))::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.24;
  background-image: radial-gradient(#ffe7ab 0.8px, transparent 0.8px);
  background-size: 34px 34px;
}
.site-header {
  position: relative;
  z-index: 2;
  border-bottom-color: #fff4d42e;
}
.site-header.game-marquee {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  height: auto;
  min-height: 0;
  padding: 16px 12px 10px;
}
.site-header.game-marquee .game-marquee-title,
.site-header.game-marquee .comfort {
  align-self: center;
}
.site-header.game-marquee .splash-band {
  grid-column: 1 / -1;
  width: 100%;
  margin-top: 8px;
  padding: 5px 8px;
  border-width: 1px;
  border-radius: 11px;
  box-shadow: 0 3px 0 #ff6a9b, inset 0 0 20px #a86bce44;
}
.site-header.game-marquee .splash-band-member { height: 70px; }
.site-header.game-marquee .splash-band-member canvas { width: min(48px, 82%); }
.site-header.game-marquee .splash-band-instrument {
  width: 21px;
  height: 21px;
  font-size: 12px;
}
.site-header.game-marquee .splash-band-member .member-signature { font-size: 9px; }
.site-header .wordmark { color: var(--splash-cream); }
.site-header .wordmark span { color: var(--splash-pink); }
#welcome { max-width: 1380px; }
.hero.splash {
  display: flex;
  flex-direction: column;
  padding: 22px 0 24px;
}
.funk-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  color: #f9d9e6;
  font: 500 10px "DM Mono", monospace;
  letter-spacing: 0.14em;
}
.splash-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, .65fr);
  align-items: stretch;
  gap: 22px;
  padding: 16px 0 24px;
}
.splash-band {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 7px;
  margin-top: 0;
  padding: 8px 10px;
  border: 2px solid #ffdf75;
  border-radius: 18px;
  background: linear-gradient(95deg, #271448, #173b55 48%, #3b1855);
  box-shadow: 0 6px 0 #ff6a9b, inset 0 0 26px #a86bce55;
}
.splash-band-member {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: end;
  min-width: 0;
  height: 95px;
  border-radius: 10px;
  background: radial-gradient(ellipse at 50% 75%, color-mix(in srgb, var(--member-color) 65%, transparent), transparent 68%);
  box-shadow: inset 0 -3px 0 var(--member-ink);
  animation: splash-soul-sway var(--dance-tempo, 1.5s) ease-in-out var(--dance-offset) infinite;
}
.vibe-soul-sway { animation-name: splash-soul-sway; }
.vibe-space-strut { animation-name: splash-space-strut; }
.vibe-key-bounce { animation-name: splash-key-bounce; }
.vibe-horn-step { animation-name: splash-horn-step; }
.vibe-guitar-lean { animation-name: splash-guitar-lean; }
.vibe-guitar-hop { animation-name: splash-guitar-hop; }
.vibe-rhythm-rock { animation-name: splash-rhythm-rock; }
.vibe-gospel-rise { animation-name: splash-gospel-rise; }
.vibe-drum-stomp { animation-name: splash-drum-stomp; }
.vibe-brass-slide { animation-name: splash-brass-slide; }
.splash-band-member canvas {
  width: min(65px, 85%);
  height: auto;
  filter: drop-shadow(0 3px 2px #140c27);
}
.splash-band-instrument {
  position: absolute;
  top: 2px;
  right: 4px;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid var(--member-ink-two);
  border-radius: 50%;
  background: #27133f;
  box-shadow: 0 0 10px var(--member-ink);
  font-size: 16px;
  transform: rotate(12deg);
}
.splash-band-member .member-signature {
  position: relative;
  z-index: 1;
  max-width: none;
  padding: 2px 1px;
  font-size: clamp(10px, .9vw, 14px);
  letter-spacing: 0;
  white-space: nowrap;
}
.splash-band-member .member-signature::after { display: none; }
@keyframes splash-soul-sway { 50% { transform: translateX(-5px) rotate(-10deg); } }
@keyframes splash-space-strut { 25% { transform: translate(-6px, -10px) rotate(-13deg); } 75% { transform: translate(6px, -5px) rotate(12deg); } }
@keyframes splash-key-bounce { 25%, 75% { transform: translateY(-9px) scaleY(.93); } 50% { transform: translateY(2px) scaleY(1.05); } }
@keyframes splash-horn-step { 25% { transform: translateX(-6px) rotate(-6deg); } 75% { transform: translate(6px, -8px) rotate(7deg); } }
@keyframes splash-guitar-lean { 50% { transform: translateY(-7px) rotate(16deg); } }
@keyframes splash-guitar-hop { 35% { transform: translateY(-14px) rotate(-8deg); } 70% { transform: translateY(1px) rotate(5deg); } }
@keyframes splash-rhythm-rock { 25% { transform: rotate(-12deg) translateY(-5px); } 75% { transform: rotate(11deg) translateY(-3px); } }
@keyframes splash-gospel-rise { 50% { transform: translateY(-15px) scale(1.07); } }
@keyframes splash-drum-stomp { 25%, 75% { transform: translateY(4px) scaleY(.94); } 50% { transform: translateY(-7px) scaleY(1.05); } }
@keyframes splash-brass-slide { 25% { transform: translateX(9px) skewX(-5deg); } 75% { transform: translateX(-5px) skewX(3deg); } }
.splash-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(20px, 3vw, 38px);
  border: 1px solid #ffe16a55;
  border-radius: 18px;
  background: radial-gradient(circle at 85% 15%, #ff62a026, transparent 40%), #21133d99;
}
.splash-copy .eyebrow {
  margin: 0 0 13px;
  color: var(--splash-yellow);
  font-size: 10px;
}
.splash h1 {
  max-width: 760px;
  margin: 0 0 18px;
  color: var(--splash-cream);
  font: 400 clamp(62px, 7.4vw, 110px)/0.83 "Bungee", sans-serif;
  letter-spacing: -0.075em;
  text-transform: uppercase;
  text-shadow: 4px 4px 0 #eb5b85, 8px 8px 0 #7441aa, 12px 12px 0 #120a31;
}
.splash h1 > span {
  display: flex;
  align-items: center;
  width: fit-content;
  color: var(--splash-yellow);
}
.splash-logo .splash-logo-get {
  background: radial-gradient(circle, #1b1030 0 2.4px, transparent 2.8px) 0 0 / 16px 15px,
    linear-gradient(160deg, #fff2a0, #ffd44f);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px #211239;
  filter: drop-shadow(4px 4px 0 #ec5b86) drop-shadow(4px 4px 0 #7441aa);
  text-shadow: none;
}
.splash-logo-mark {
  width: .56em;
  height: .56em;
  margin-left: .25em;
  object-fit: contain;
  -webkit-text-fill-color: initial;
  -webkit-text-stroke: 0;
  filter: drop-shadow(3px 4px 0 #170a2a);
}
.splash h1 em {
  display: block;
  width: fit-content;
  margin-top: 8px;
  color: #ff76b4;
  font-family: "Bungee", sans-serif;
  font-style: normal;
  font-size: 0.88em;
  letter-spacing: -0.085em;
  text-shadow: 3px 3px 0 #ffe16a, 7px 7px 0 #7334a7, 11px 11px 0 #120a31;
}
.splash-logo .splash-logo-phunky {
  background: repeating-linear-gradient(135deg, #2a1238 0 2px, transparent 2px 11px),
    linear-gradient(160deg, #ffa3cb, #ff5d9c);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1.2px #281237;
  filter: drop-shadow(3px 3px 0 #ffe16a) drop-shadow(4px 4px 0 #7334a7);
  text-shadow: none;
}
.splash .intro {
  max-width: 470px;
  margin: 0 0 22px;
  padding-left: 14px;
  border-left: 4px solid var(--splash-lime);
  color: var(--splash-cream);
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.4;
}
.hero-play {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  min-height: 48px;
  padding: 10px 17px 10px 22px;
  border-radius: 100px;
  background: var(--splash-yellow);
  box-shadow: 0 5px 0 #a54475;
  color: var(--splash-ink);
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}
.hero-play:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 0 #a54475;
}
.hero-play span { font-size: 22px; line-height: 1; }
.hero-poster {
  position: relative;
  isolation: isolate;
  width: min(100%, 560px);
  aspect-ratio: 1.3;
  justify-self: center;
  overflow: hidden;
  border: 3px solid #ffdf75;
  border-radius: 18px 18px 42px 18px;
  background:
    radial-gradient(circle at 50% 58%, #a241a7 0, #36246e 44%, #101638 78%),
    #151033;
  box-shadow: 9px 11px 0 #ff669b, 17px 19px 0 #090818aa;
  transform: rotate(2deg);
}
.hero-poster::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image: radial-gradient(#fff5cb 1.3px, transparent 1.5px);
  background-size: 22px 24px;
}
.hero-poster::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 17%;
  background: repeating-linear-gradient(90deg, #39184c 0 18px, #632873 19px 21px);
  border-top: 4px solid #fbd776;
}
.poster-rays {
  position: absolute;
  inset: -45%;
  z-index: -1;
  background: repeating-conic-gradient(from 4deg, #ffde6838 0 7deg, transparent 7deg 18deg);
  mask-image: radial-gradient(circle, transparent 0 20%, #000 58%);
  animation: poster-turn 32s linear infinite;
}
.poster-groove {
  position: absolute;
  inset: 10% 7% 10%;
  z-index: 0;
  border-radius: 50%;
  background: repeating-radial-gradient(ellipse at center, transparent 0 21px, #ffe6876b 22px 24px, transparent 25px 42px);
  filter: drop-shadow(0 0 12px #ff9dd3);
  animation: poster-groove-pulse 2.4s ease-in-out infinite alternate;
}
.poster-music { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.poster-music span {
  position: absolute;
  color: #ffe46c;
  font: 700 clamp(22px, 2.5vw, 34px) "Space Grotesk", sans-serif;
  text-shadow: 0 0 10px #ff75b4, 2px 3px 0 #261035;
  animation: poster-note-float 2.8s ease-in-out infinite alternate;
}
.poster-music span:nth-child(1) { top: 10%; left: 10%; animation-delay: -.5s; }
.poster-music span:nth-child(2) { top: 17%; right: 12%; color: #8af0e9; animation-delay: -1.2s; }
.poster-music span:nth-child(3) { top: 49%; left: 4%; color: #ff83bb; animation-delay: -2s; }
.poster-music span:nth-child(4) { top: 49%; right: 5%; color: #9aebff; animation-delay: -1.7s; }
.poster-music span:nth-child(5) { bottom: 13%; left: 46%; animation-delay: -2.5s; }
@keyframes poster-note-float { to { transform: translateY(-11px) rotate(11deg); opacity: .68; } }
@keyframes poster-groove-pulse { to { transform: scale(1.08); opacity: .68; } }
.poster-meteors {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.meteor {
  --meteor-light: #ff9d43;
  position: absolute;
  width: 9px;
  height: 9px;
  border: 2px solid #fff6d6;
  border-radius: 50%;
  background: var(--meteor-light);
  box-shadow: 0 0 8px 3px var(--meteor-light), 0 0 22px 7px color-mix(in srgb, var(--meteor-light) 55%, transparent);
  opacity: 0;
  animation: meteor-flash 4.2s ease-in-out infinite;
}
.meteor-blue { --meteor-light: #55dfff; }
.meteor::before {
  content: "";
  position: absolute;
  top: 2px;
  right: 8px;
  width: 34px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, var(--meteor-light));
  transform: rotate(-25deg);
  transform-origin: right center;
}
.meteor::after {
  content: "";
  position: absolute;
  inset: -8px;
  background: linear-gradient(transparent 46%, var(--meteor-light) 48% 52%, transparent 54%),
    linear-gradient(90deg, transparent 46%, var(--meteor-light) 48% 52%, transparent 54%);
  opacity: 0.8;
}
.meteor-1 { top: 14%; left: 19%; animation-delay: -0.8s; }
.meteor-2 { top: 20%; right: 12%; animation-delay: -2.7s; }
.meteor-3 { top: 42%; left: 8%; animation-delay: -3.5s; }
.meteor-4 { top: 47%; right: 9%; animation-delay: -1.4s; }
.meteor-5 { bottom: 21%; left: 28%; animation-delay: -2.2s; }
.meteor-6 { bottom: 26%; right: 26%; animation-delay: -4s; }
.meteor-2, .meteor-5 { animation-duration: 3.7s; }
.meteor-3, .meteor-6 { animation-duration: 4.8s; }
@keyframes meteor-flash {
  0%, 16%, 70%, 100% { opacity: 0; transform: translate3d(-14px, -8px, 0) scale(0.5); }
  28%, 42% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
  53% { opacity: 0.35; transform: translate3d(8px, 5px, 0) scale(0.7); }
}
.poster-ship {
  position: absolute;
  z-index: 1;
  left: -2%;
  top: 1%;
  width: 104%;
  height: 96%;
  filter: drop-shadow(0 12px 0 #190d35aa) drop-shadow(0 0 22px #ffda74dd);
  animation: ship-float 5s ease-in-out infinite alternate;
}
.poster-fruit {
  position: absolute;
  z-index: 2;
  bottom: 1%;
  width: 20%;
  height: auto;
  filter: drop-shadow(4px 6px 0 #171037cc);
}
.fruit-left { left: 4%; transform: rotate(-13deg); }
.fruit-right { right: 5%; transform: rotate(12deg); }
.poster-star {
  position: absolute;
  z-index: 2;
  line-height: 1;
  text-shadow: 0 0 12px currentColor;
}
.star-a { top: 5%; left: 5%; color: #ffe275; font-size: 42px; }
.star-b { top: 6%; right: 11%; color: #80e9ec; font-size: 35px; }
.star-c { bottom: 20%; left: 43%; color: #ff7fb7; font-size: 32px; }
.star-a, .star-c { animation: star-sparkle 3.4s ease-in-out infinite alternate; }
.star-b { animation: star-sparkle 2.8s ease-in-out -1.3s infinite alternate; }
@keyframes star-sparkle { to { opacity: 0.45; transform: scale(0.7) rotate(18deg); } }
.poster-stamp {
  position: absolute;
  z-index: 3;
  top: 3%;
  right: 24%;
  padding: 7px 9px;
  border: 2px solid #211137;
  color: #231139;
  background: #c5f069;
  box-shadow: 4px 4px 0 #211137;
  font: 800 9px/1.1 "DM Mono", monospace;
  text-align: center;
  transform: rotate(8deg);
}
@keyframes poster-turn { to { transform: rotate(360deg); } }
@keyframes ship-float { to { translate: 0 -8px; } }
.level-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 12px;
  scroll-margin-top: 22px;
}
.level-heading .eyebrow {
  margin: 0;
  color: var(--splash-lime);
  font-size: 10px;
  white-space: nowrap;
}
.level-heading h2 {
  margin: 0;
  color: var(--splash-cream);
  font-size: 20px;
  letter-spacing: -0.04em;
}
.game-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}
.game-pick {
  position: relative;
  display: grid;
  grid-template-columns: 85px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 9px 12px;
  min-width: 0;
  min-height: 210px;
  overflow: hidden;
  padding: 16px;
  border: 2px solid #190e2b;
  border-radius: 9px 22px 9px 22px;
  color: var(--splash-ink);
  text-decoration: none;
  box-shadow: 0 6px 0 #090615;
  transition: transform 0.2s, box-shadow 0.2s;
}
.game-pick::before {
  content: "";
  position: absolute;
  inset: auto -50px -80px auto;
  width: 175px;
  aspect-ratio: 1;
  border: 20px solid currentColor;
  border-radius: 50%;
  opacity: 0.08;
}
.game-pick:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 0 #090615;
}
.game-pick.is-locked {
  filter: saturate(0.58);
  box-shadow: 0 6px 0 #090615, inset 0 0 0 999px #27133933;
}
.game-pick.is-locked:hover { transform: none; }
.flash-journey-win[hidden] { display: none; }
.flash-journey-win { display: block; margin: 10px auto; padding: 9px 12px; border: 2px solid #ffe279; border-radius: 10px; background: #3a2257; color: #fff2bb; font: 700 13px "DM Mono", monospace; }
.game-pick.is-locked::after {
  content: "LOCKED";
  position: absolute;
  top: 15px;
  right: 15px;
  padding: 5px 8px;
  border-radius: 99px;
  background: #231232;
  color: #fff3d5;
  font: 700 9px "DM Mono", monospace;
  letter-spacing: 0.1em;
}
.pick-show {
  background: radial-gradient(#fff7c470 1px, transparent 2px) 0 0/18px 18px,
    linear-gradient(145deg, #ffe279, #ff9c50);
}
.pick-after {
  background: radial-gradient(#fff3cb55 1px, transparent 2px) 0 0/18px 18px,
    linear-gradient(145deg, #fc7cb7, #b893f4);
}
.pick-soon {
  background: radial-gradient(#e9fff763 1px, transparent 2px) 0 0/18px 18px,
    linear-gradient(145deg, #62e3e4, #7cd493);
}
.pick-number {
  grid-column: 1 / -1;
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid currentColor;
  border-radius: 99px;
  font: 700 10px "DM Mono", monospace;
  letter-spacing: 0.08em;
}

/* Cosmic stage-pass neon: bright tube cores, colored spill, answering lamps. */
#welcome .game-pick { --tag-neon: #5cfff1; --tag-strobe-delay: 0s; }
#welcome .pick-show { --tag-neon: #ffe66b; --tag-strobe-delay: -0.8s; }
#welcome .pick-after { --tag-neon: #ff76db; --tag-strobe-delay: -1.6s; }
#welcome .pick-soon { --tag-neon: #a9ff72; --tag-strobe-delay: -2.4s; }
#welcome .pick-number {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #211333;
  color: var(--tag-neon);
  border-color: var(--tag-neon);
  text-shadow: 0 0 2px #fff8, 0 0 7px var(--tag-neon);
  box-shadow: 0 0 2px #fff9, 0 0 7px var(--tag-neon),
    0 0 15px color-mix(in srgb, var(--tag-neon) 35%, transparent),
    inset 0 0 6px color-mix(in srgb, var(--tag-neon) 25%, transparent);
}
#welcome .pick-number::before,
#welcome .pick-number::after {
  content: "";
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 3px #fff, 0 0 7px 2px var(--tag-neon);
  opacity: 0.45;
  animation: tag-neon-strobe 4s steps(1, end) infinite;
  animation-delay: var(--tag-strobe-delay);
}
#welcome .pick-number::after { animation-name: tag-neon-answer; }
#welcome .game-pick:hover .pick-number,
#welcome .game-pick:focus-visible .pick-number {
  background: #35204f;
  color: #fff;
}
@keyframes tag-neon-strobe {
  0%, 8%, 18%, 100% { opacity: 0.45; }
  4%, 13% { opacity: 1; }
}
@keyframes tag-neon-answer {
  0%, 38%, 48%, 100% { opacity: 0.45; }
  34%, 43% { opacity: 1; }
}
.game-thumb {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  align-self: center;
  border: 2px solid currentColor;
  border-radius: 21px;
  background: #fff7d771;
  box-shadow: 5px 5px 0 #1b10302b;
  transform: rotate(-5deg);
}
.game-thumb svg { width: 75px; height: 75px; }
.thumb-paper { background: #ffeac588; transform: rotate(5deg); }
.thumb-flash { background: #22113822; }
.pick-copy { align-self: center; min-width: 0; }
.game-pick small,
.game-name {
  display: block;
  font: 700 9px "DM Mono", monospace;
  letter-spacing: 0.08em;
}
.game-pick strong {
  display: block;
  margin: 4px 0;
  font: 400 clamp(34px, 3vw, 47px)/0.95 "Bungee", sans-serif;
  letter-spacing: -0.05em;
  text-shadow: 2px 2px 0 #fff7d899;
}
.game-pick em {
  display: block;
  font-size: 12px;
  font-style: normal;
  line-height: 1.3;
}
.game-name { margin-top: 7px; opacity: 0.7; }
.game-pick .play-label {
  grid-column: 1 / -1;
  align-self: end;
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid #21122f55;
  font-weight: 700;
  font-size: 13px;
}
.level-hud {
  order: -1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 52px;
  gap: 10px;
  margin: 0 0 14px;
  padding: 9px;
  border: 1px solid #a3edee88;
  border-radius: 17px;
  background: linear-gradient(120deg, #112e46, #291849 48%, #123044);
  box-shadow: inset 0 1px 0 #ffffff38, 0 5px 0 #ff66a3;
}
.level-hud-content { min-width: 0; }
.level-hud .level-heading { margin: 0 0 7px; }
.level-hud .level-heading h2 { font-size: 16px; }
.level-hud-rail {
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #fff2c287;
  border-radius: 9px;
  box-shadow: inset 0 0 0 3px #17112e55;
}
.level-hud-rail span {
  display: block;
  writing-mode: vertical-rl;
  color: #1b1030;
  font: 400 25px/1 "Bungee", sans-serif;
  letter-spacing: .09em;
  text-shadow: 2px 2px 0 #fff3d5a8;
}
.level-hud-rail-left {
  background: repeating-linear-gradient(145deg, #ffe272 0 12px, #ff9f61 12px 16px);
  transform: skewY(-9deg);
}
.level-hud-rail-left span { transform: rotate(180deg) skewY(-10deg); }
.level-hud-rail-right {
  background: repeating-linear-gradient(35deg, #ff77b6 0 12px, #ba83ed 12px 16px);
  transform: skewY(9deg);
}
.level-hud-rail-right span { transform: skewY(-10deg); }
.level-hud .game-strip { gap: 9px; }
.level-hud .game-pick {
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  gap: 4px 9px;
  min-height: 133px;
  padding: 9px 11px;
  border-radius: 8px 15px 8px 15px;
}
.level-hud .pick-number { padding: 3px 7px; font-size: 9px; }
.level-hud .game-thumb { width: 54px; height: 54px; border-radius: 14px; }
.level-hud .game-thumb svg { width: 50px; height: 50px; }
.level-hud .game-pick strong { margin: 1px 0; font-size: clamp(25px, 2.3vw, 32px); }
.level-hud .game-pick small,
.level-hud .game-name { font-size: 8px; }
.level-hud .game-pick em { font-size: 10px; }
.level-hud .game-name { margin-top: 3px; }
.level-hud .game-pick .play-label { padding-top: 4px; font-size: 10px; }
.special-code-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  color: #fff3d5;
  font-size: 12px;
}
.special-code-form label { margin-right: 5px; font-weight: 700; }
.special-code-form input {
  width: 150px;
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #fff3d580;
  border-radius: 8px;
  background: #120b22;
  color: #fff3d5;
  font: 13px "DM Mono", monospace;
}
.special-code-form button {
  min-height: 40px;
  padding: 8px 13px;
  border-color: #caf567;
  color: #caf567;
  font-size: 12px;
}
.special-code-form button:hover { background: #caf56722; }
.special-code-form input:focus-visible { outline: 3px solid #caf567; outline-offset: 3px; }
#special-code-status { min-height: 18px; color: #caf567; }
.funk-footer {
  margin-top: 17px;
  color: var(--splash-lime);
  font-size: 9px;
}
.funk-footer a {
  color: #f9d9e6;
  text-decoration-color: var(--splash-pink);
  text-underline-offset: 3px;
}
.funk-footer a:hover,
.funk-footer a:focus-visible { color: var(--splash-yellow); }
@media (max-width: 1100px) {
  .game-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .splash-stage { grid-template-columns: minmax(0, 1fr) minmax(210px, .55fr); }
}
@media (max-width: 950px) {
  .splash-stage { grid-template-columns: minmax(0, 1fr) 250px; }
  .splash-band { gap: 3px; padding-inline: 6px; }
  .splash-band-member { height: 83px; }
  .splash-band-member canvas { width: min(57px, 88%); }
  .splash-band-instrument { width: 22px; height: 22px; font-size: 13px; }
  .splash h1 { font-size: clamp(56px, 8vw, 85px); }
  .game-pick { grid-template-columns: 1fr; min-height: 225px; }
  .game-thumb { width: 68px; height: 68px; }
  .game-thumb svg { width: 64px; height: 64px; }
  .game-pick strong { font-size: 35px; }
  .level-hud { grid-template-columns: 38px minmax(0, 1fr) 38px; gap: 6px; padding: 7px; }
  .level-hud-rail span { font-size: 19px; }
  .level-hud .game-pick { grid-template-columns: 1fr; }
  .level-hud .game-thumb { width: 45px; height: 45px; }
  .level-hud .game-thumb svg { width: 42px; height: 42px; }
}
@media (max-width: 760px) {
  .hero.splash { padding-top: 15px; }
  .splash-stage { display: block; padding: 28px 0 26px; }
  .splash-band { grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; }
  .site-header.game-marquee .splash-band { margin-top: 7px; }
  .site-header.game-marquee .splash-band-member { height: 53px; }
  .site-header.game-marquee .splash-band-member canvas { width: min(38px, 80%); }
  .site-header.game-marquee .splash-band-member .member-signature { font-size: 8px; }
  .splash-band-member { height: 76px; }
  .splash-band-member canvas { width: min(52px, 85%); }
  .splash-band-member .member-signature { font-size: 10px; }
  .splash h1 { font-size: clamp(44px, 12vw, 72px); }
  .hero-poster {
    width: min(92%, 390px);
    aspect-ratio: 1.35;
    margin: 26px auto 0;
  }
  .poster-stamp { right: 20%; font-size: 7px; }
  .level-heading { display: block; }
  .level-heading h2 { margin-top: 4px; }
  .game-strip { grid-template-columns: 1fr; gap: 11px; }
  .game-pick { grid-template-columns: 74px minmax(0, 1fr); min-height: 0; }
  .game-thumb { width: 70px; height: 70px; }
  .game-pick strong { font-size: 36px; }
  .level-hud { grid-template-columns: 25px minmax(0, 1fr) 25px; gap: 5px; margin-top: 0; padding: 5px; }
  .level-hud-rail span { font-size: 15px; }
  .level-hud .level-heading { padding: 4px 2px 8px; }
  .level-hud .game-pick { grid-template-columns: 48px minmax(0, 1fr); min-height: 0; }
  .level-hud .game-thumb { width: 46px; height: 46px; }
  .level-hud .game-thumb svg { width: 43px; height: 43px; }
  .level-hud .game-pick strong { font-size: 27px; }
  .splash-copy { padding: 24px; }
  .funk-footer { align-items: flex-start; flex-direction: column; gap: 7px; }
}
@media (max-width: 390px) {
  .splash h1 { font-size: 42px; }
  .poster-stamp { display: none; }
  .game-pick { grid-template-columns: 62px minmax(0, 1fr); gap: 8px; padding: 13px; }
  .game-thumb { width: 60px; height: 60px; }
  .game-thumb svg { width: 57px; height: 57px; }
  .game-pick strong { font-size: 31px; }
}
.less-motion .splash *,
.less-motion .splash *::before,
.less-motion .splash *::after { animation: none !important; transition: none !important; }
.less-motion .splash .meteor { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .splash *, .splash *::before, .splash *::after {
    animation: none !important;
    transition: none !important;
  }
  .splash .meteor { opacity: 1; }
}

/* Psychedelic masthead sits above the game tickets on a single line. */
.welcome-wordmark {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 42px);
  padding: clamp(130px, 18vw, 205px) 8px 32px;
  min-height: 240px;
}
.welcome-wordmark::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 36px;
  background: repeating-conic-gradient(from 15deg at 50% 42%, #ff62a038 0deg 12deg, #63e5e52e 12deg 24deg, #ffe16a22 24deg 36deg);
  mask-image: radial-gradient(ellipse, #000 15%, transparent 70%);
}
.splash .welcome-wordmark .splash-logo {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: .2em;
  max-width: none;
  margin: 0;
  white-space: nowrap;
  font-size: clamp(38px, 10vw, 132px);
  line-height: 1.1;
  letter-spacing: -.055em;
}
.splash .welcome-wordmark .splash-logo em { margin-top: 0; font-size: 1em; }
.welcome-wordmark .splash-logo-get {
  background-image: repeating-linear-gradient(155deg, #fff3a6 0 7px, #ffb94e 7px 14px, #ff78b8 14px 21px);
}
.welcome-wordmark .splash-logo-phunky {
  background-image: repeating-linear-gradient(25deg, #ff89c3 0 7px, #b08cff 7px 14px, #75efdf 14px 21px);
}
.welcome-cosmic-mark {
  color: #ffe16a;
  font-size: clamp(16px, 2.8vw, 38px);
  text-shadow: 0 0 14px #ff62a0, 3px 3px 0 #713ca0;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .welcome-wordmark { gap: 8px; padding: 132px 0 24px; min-height: 210px; }
  .welcome-cosmic-mark { font-size: 16px; }
}

.welcome-mothership {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(250px, 42vw, 480px);
  height: auto;
  max-height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 12px #63e5e580) drop-shadow(0 0 28px #ff62a080);
}
.welcome-wordmark .splash-logo { position: relative; z-index: 1; }
.welcome-wordmark .welcome-cosmic-mark { align-self: center; }

.ship-neon-tubes {
  stroke-width: 3;
  opacity: .85;
  animation: ship-neon-breathe 4s ease-in-out infinite;
}
.ship-neon-pink {
  stroke: #ffc3ed;
  filter: drop-shadow(0 0 3px #ff50c8) drop-shadow(0 0 8px #ff50c8);
}
.ship-neon-cyan {
  stroke: #d3fffc;
  filter: drop-shadow(0 0 3px #37fff0) drop-shadow(0 0 8px #37fff0);
}
.ship-neon-gold {
  stroke: #fff4bb;
  filter: drop-shadow(0 0 3px #ffd857) drop-shadow(0 0 8px #ffd857);
}
.ship-neon-portholes circle {
  opacity: .5;
  filter: drop-shadow(0 0 5px #fff5b0);
  animation: ship-neon-chase 4s steps(1, end) infinite;
}
.ship-neon-portholes circle:nth-child(2) { animation-delay: -.8s; }
.ship-neon-portholes circle:nth-child(3) { animation-delay: -1.6s; }
.ship-neon-portholes circle:nth-child(4) { animation-delay: -2.4s; }
.ship-neon-portholes circle:nth-child(5) { animation-delay: -3.2s; }
@keyframes ship-neon-breathe {
  50% { opacity: .55; }
}
@keyframes ship-neon-chase {
  0%, 18%, 100% { opacity: .5; }
  8% { opacity: 1; }
}
.less-motion .ship-neon-tubes,
.less-motion .ship-neon-portholes circle { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .ship-neon-tubes, .ship-neon-portholes circle { animation: none !important; }
}

/* Large game tickets fill the landing width; narrow screens retain two columns. */
#welcome .pick-commute {
  background: radial-gradient(#fff3d566 1px, transparent 2px) 0 0 / 18px 18px,
    linear-gradient(145deg, #a6e5f0, #78b7d9);
}
#welcome { width: 100%; max-width: none; padding-inline: clamp(8px, 2vw, 28px); }
#welcome .level-hud { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 12px; padding: 12px; }
#welcome .level-hud-content { min-width: 0; }
#welcome .level-hud .game-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
#welcome .level-hud .game-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-height: 300px; padding: 20px; }
#welcome .level-hud .pick-number { max-width: 100%; font-size: 11px; }
#welcome .level-hud .game-thumb { flex: none; width: 90px; height: 90px; border-radius: 20px; }
#welcome .level-hud .game-thumb svg { width: 82px; height: 82px; }
#welcome .level-hud .pick-copy { flex: 1; width: 100%; }
#welcome .level-hud .game-pick strong { margin: 5px 0 9px; font-size: clamp(30px, 3.3vw, 48px); }
#welcome .level-hud .game-pick small, #welcome .level-hud .game-name { font-size: 10px; }
#welcome .level-hud .game-pick em { font-size: 14px; line-height: 1.4; }
#welcome .level-hud .game-pick .play-label { width: 100%; min-height: 36px; margin-top: auto; padding-top: 12px; font-size: 13px; }
@media (max-width: 1100px) {
  #welcome .level-hud .game-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #welcome .level-hud .game-pick { min-height: 280px; }
}
@media (max-width: 600px) {
  #welcome .level-hud { grid-template-columns: 16px minmax(0, 1fr) 16px; gap: 5px; padding: 6px; }
  #welcome .level-hud-rail span { font-size: 12px; }
  #welcome .level-hud .game-strip { gap: 8px; }
  #welcome .level-hud .game-pick { min-height: 260px; gap: 10px; padding: 12px 10px; }
  #welcome .level-hud .pick-number { padding: 3px 4px; gap: 4px; font-size: 8px; }
  #welcome .level-hud .game-thumb { width: 64px; height: 64px; border-radius: 14px; }
  #welcome .level-hud .game-thumb svg { width: 58px; height: 58px; }
  #welcome .level-hud .game-pick strong { font-size: clamp(20px, 5.8vw, 32px); }
  #welcome .level-hud .game-pick small, #welcome .level-hud .game-name { font-size: 8px; letter-spacing: .02em; }
  #welcome .level-hud .game-pick em { font-size: 11px; }
  #welcome .level-hud .game-pick .play-label { min-height: 34px; font-size: 10px; }
  #welcome .game-pick.is-locked::after { top: 40px; right: 5px; padding: 4px; font-size: 8px; }
}

/* Separate practice links keep the locked journey cards intact. */
.game-choice { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
#welcome .game-choice .game-pick { flex: 1; }
.practice-button { display: block; padding: 12px; border: 2px solid #ffe66b; border-radius: 12px; color: #ffe66b; background: #211135; text-align: center; font-weight: 800; text-decoration: none; }
.practice-button:hover, .practice-button:focus-visible { background: #463060; }
.practice-button[hidden], .practice-notice[hidden] { display: none; }
.practice-notice { margin: 8px 16px; padding: 10px; color: #ffe66b; background: #211135; text-align: center; }
.practice-notice a { color: inherit; }
.funk-facts { margin-top: 24px; border: 2px solid #ff76db; border-radius: 14px; background: #211135; overflow: hidden; color: #fff0ab; }
.funk-facts-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.funk-facts-heading button { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.funk-facts-window { overflow: hidden; padding: 14px 0; }
.funk-facts-track { display: flex; width: max-content; animation: funk-facts-scroll 65s linear infinite; }
.funk-facts-track a { color: inherit; white-space: nowrap; }
.funk-facts:hover .funk-facts-track, .funk-facts:focus-within .funk-facts-track { animation-play-state: paused; }
.funk-facts.is-paused .funk-facts-track { animation: none; width: auto; flex-wrap: wrap; gap: 16px; padding: 0 16px; }
.funk-facts.is-paused a { white-space: normal; }
@keyframes funk-facts-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .funk-facts-track { animation: none; width: auto; flex-wrap: wrap; gap: 16px; padding: 0 16px; }
  .funk-facts-track a { white-space: normal; }
}

.funk-facts-group { display: flex; align-items: center; gap: 48px; padding-right: 48px; }
.funk-facts.is-paused .funk-facts-group { flex-wrap: wrap; gap: 16px; padding: 0; }
.funk-facts.is-paused .facts-repeat { display: none; }
@media (prefers-reduced-motion: reduce) {
  .funk-facts-group { flex-wrap: wrap; gap: 16px; padding: 0; }
  .facts-repeat { display: none; }
}