:root {
  --qk-bg: #14251e;
  --chalk-white: #f5f0df;
  --chalk-yellow: #f4ca45;
  --chalk-teal: #43c7c2;
  --chalk-coral: #f36b56;
}

html,
body {
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--qk-bg);
}

body {
  font-family: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
}

button,
a {
  -webkit-touch-callout: none;
}

.monster-opera,
.screen,
.board-screen {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

.screen[hidden] {
  display: none !important;
}

.board-screen {
  isolation: isolate;
  overflow: hidden;
  background-color: #14251e;
  background-image: url('../assets/concept/blackboard.jpg');
  background-position: center;
  background-size: cover;
}

.chalk-control,
.platform-home,
.composer-monster,
.concert-event {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  touch-action: manipulation;
  cursor: pointer;
}

.chalk-control:focus-visible,
.platform-home:focus-visible,
.composer-monster:focus-visible,
.concert-event:focus-visible {
  outline: 5px solid var(--chalk-yellow);
  outline-offset: 5px;
}

.chalk-control,
.platform-home {
  position: absolute;
  z-index: 30;
  display: grid;
  place-items: center;
  width: clamp(96px, 8.4vw, 138px);
  height: clamp(96px, 8.4vw, 138px);
}

.chalk-control img,
.platform-home img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.chalk-control:active,
.chalk-control.is-pressed,
.platform-home:active {
  transform: scale(.9) rotate(-2deg);
}

.platform-home,
.top-left {
  top: max(14px, var(--qk-safe-top));
  left: max(14px, var(--qk-safe-left));
}

.top-right {
  top: max(14px, var(--qk-safe-top));
  right: max(14px, var(--qk-safe-right));
}

.bottom-left {
  bottom: max(12px, var(--qk-safe-bottom));
  left: max(14px, var(--qk-safe-left));
}

.bottom-right {
  right: max(14px, var(--qk-safe-right));
  bottom: max(12px, var(--qk-safe-bottom));
}

.primary-control {
  filter: drop-shadow(0 6px 2px rgb(6 13 10 / .34));
}

/* Splash — all visible art is authored raster/video. */
.splash-title {
  position: absolute;
  z-index: 10;
  top: max(2.5vh, var(--qk-safe-top));
  left: 50%;
  width: min(64vw, 840px);
  max-height: 32vh;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 8px 2px rgb(2 8 5 / .42));
  pointer-events: none;
}

.splash-stage {
  position: absolute;
  z-index: 5;
  inset: 23% 7% 8%;
  mix-blend-mode: screen;
}

.splash-performer {
  position: absolute;
  width: clamp(220px, 27vw, 430px);
  height: clamp(220px, 27vw, 430px);
  transform-origin: 50% 80%;
}

.splash-performer > img,
.splash-performer > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.splash-performer > img {
  opacity: 0;
}

.splash-performer > img,
.splash-performer > video,
.video-overlay-layer,
.monster-still,
.monster-dance,
.monster-video,
.concert-dance-source,
.concert-playhead {
  mix-blend-mode: screen;
}

.splash-performer > video,
.monster-dance,
.monster-video {
  background: #000;
  filter: contrast(1.58) saturate(1.06);
}

.splash-monster-01 {
  left: 6%;
  bottom: 2%;
  transform: rotate(-4deg);
}

.splash-monster-06 {
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) scale(1.08);
}

.splash-monster-10 {
  right: 6%;
  bottom: 1%;
  transform: rotate(4deg);
}

.splash-lanes {
  position: absolute;
  z-index: 2;
  inset: auto 4% 7%;
  height: 44%;
  opacity: .32;
  pointer-events: none;
}

.splash-lanes img {
  display: block;
  width: 100%;
  height: 33.33%;
  object-fit: fill;
}

.splash-play {
  z-index: 24;
  right: 50%;
  bottom: max(2.2vh, var(--qk-safe-bottom));
  width: clamp(118px, 11vw, 168px);
  height: clamp(118px, 11vw, 168px);
  transform: translateX(50%);
  animation: play-invitation 2.5s ease-in-out infinite;
}

.splash-play:active {
  transform: translateX(50%) scale(.9) rotate(-2deg);
}

/* Composer */
.composer-timeline {
  position: absolute;
  z-index: 8;
  top: max(4.2vh, var(--qk-safe-top));
  right: max(9.5vw, 126px);
  left: max(9.5vw, 126px);
  height: clamp(170px, 28vh, 285px);
  pointer-events: none;
}

.lane-stack {
  position: absolute;
  inset: 0;
}

.timeline-lane {
  --lane-glow: var(--chalk-white);
  position: absolute;
  right: 0;
  left: 0;
  height: 33.333%;
  opacity: .48;
  transform: scaleY(.91);
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.timeline-lane:nth-child(1) { top: 0; --lane-glow: var(--chalk-white); }
.timeline-lane:nth-child(2) { top: 33.333%; --lane-glow: var(--chalk-yellow); }
.timeline-lane:nth-child(3) { top: 66.666%; --lane-glow: var(--chalk-teal); }

.timeline-lane.is-active {
  opacity: 1;
  z-index: 2;
  transform: scaleY(1.04);
  filter: drop-shadow(0 0 11px var(--lane-glow));
}

.timeline-lane.is-nudged {
  animation: lane-nudge 900ms ease-in-out 2;
}

.lane-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.event-dots {
  position: absolute;
  inset: 0;
}

.timeline-dot {
  position: absolute;
  top: 50%;
  width: clamp(34px, 3vw, 54px);
  height: clamp(34px, 3vw, 54px);
  object-fit: contain;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 3px 1px rgb(0 0 0 / .38));
}

.timeline-dot.is-new {
  animation: dot-arrive 620ms cubic-bezier(.15,.85,.2,1);
}

.timeline-dot.is-winking {
  animation: dot-wink 620ms ease;
}

.composer-playhead,
.concert-playhead {
  position: absolute;
  z-index: 12;
  top: -6%;
  width: clamp(52px, 5vw, 78px);
  height: 112%;
  object-fit: fill;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 6px rgb(243 107 86 / .64));
  pointer-events: none;
}

.monster-lineup {
  position: absolute;
  z-index: 9;
  top: 31%;
  right: 0;
  bottom: max(5%, var(--qk-safe-bottom));
  left: 0;
  display: flex;
  align-items: end;
  gap: clamp(6px, 1.2vw, 22px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 1% 11vw 1.5%;
  scroll-padding-inline: 11vw;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  mix-blend-mode: screen;
}

.monster-lineup::-webkit-scrollbar {
  display: none;
}

.monster-lineup.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.composer-monster {
  position: relative;
  flex: 0 0 clamp(190px, 22vw, 340px);
  height: min(100%, 48vw);
  min-width: 96px;
  min-height: 96px;
  scroll-snap-align: center;
  transform-origin: 50% 78%;
  transition: transform 110ms ease, filter 160ms ease;
}

.composer-monster .monster-still,
.composer-monster .monster-dance,
.composer-monster .monster-video,
.concert-event .monster-still,
.concert-event .monster-dance,
.concert-event .monster-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.concert-event .monster-still,
.concert-event .monster-dance,
.concert-event .monster-video {
  transform: scale(var(--event-art-scale, 1));
  transform-origin: center;
}

.monster-dance,
.monster-video {
  opacity: 0;
}

.composer-monster.is-dance-ready .monster-still,
.concert-event.is-dance-ready .monster-still {
  opacity: 0;
}

.composer-monster.is-dance-ready:not(.is-performing) .monster-dance,
.concert-event.is-dance-ready:not(.is-performing) .monster-dance {
  opacity: 1;
}

.composer-monster.is-performing .monster-still,
.concert-event.is-performing .monster-still {
  opacity: 0;
}

.composer-monster.is-performing .monster-dance,
.concert-event.is-performing .monster-dance {
  opacity: 0;
}

.composer-monster.is-performing .monster-video,
.concert-event.is-performing .monster-video {
  opacity: 1;
}

.composer-monster.is-pressed {
  transform: scale(.91) translateY(2%);
}

.composer-monster.is-performing {
  z-index: 3;
  transform: scale(1.06) translateY(-2%);
}

.composer-monster.is-blocked {
  animation: blocked-wiggle 620ms ease;
}

.monster-lineup.is-nudged .composer-monster:nth-child(-n + 4) {
  animation: monster-nudge 850ms ease-in-out 2;
}

.go-control {
  right: 50%;
  bottom: max(1.4vh, var(--qk-safe-bottom));
  width: clamp(108px, 9.6vw, 154px);
  height: clamp(108px, 9.6vw, 154px);
  opacity: .45;
  transform: translateX(50%) scale(.92);
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
}

.go-control.is-ready {
  opacity: 1;
  transform: translateX(50%) scale(1);
  animation: go-ready 2.2s ease-in-out infinite;
}

.go-control.is-loading {
  opacity: .78;
  animation: go-ready 620ms ease-in-out infinite;
}

.go-control:active,
.go-control.is-ready:active {
  transform: translateX(50%) scale(.88) rotate(-2deg);
}

/* Concert */
.concert-viewport {
  position: absolute;
  z-index: 4;
  inset: 0;
  overflow: hidden;
  touch-action: manipulation;
  mix-blend-mode: screen;
}

/* Kept paintable (unlike display:none) so Safari continues decoding the pool. */
.concert-dance-pool {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.concert-dance-source {
  display: block;
  width: 1px;
  height: 1px;
}

.concert-world {
  position: absolute;
  /* Keep the marker above the world while the plate remains over its performers. */
  z-index: 1;
  inset: 0 auto 0 0;
  display: flex;
  width: 300vw;
  height: 100%;
  will-change: transform;
}

.song-panel {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: visible;
}

.concert-track-art {
  position: absolute;
  /* The chalk plate is a luminous foreground overlay: Screen keeps its black
     matte transparent while letting the dancing monsters remain visible below. */
  z-index: 20;
  inset: 3% 0;
  width: 100%;
  height: 94%;
  object-fit: fill;
  opacity: .66;
  pointer-events: none;
}

.concert-playhead {
  top: 4%;
  left: 50%;
  /* The concert-specific 140×880 marker keeps its authored proportions. */
  width: auto;
  height: 92%;
  aspect-ratio: 140 / 880;
  object-fit: contain;
}

.concert-event {
  position: absolute;
  z-index: 8;
  top: calc(var(--lane-y) + var(--event-safe-y, 0%));
  left: var(--event-x);
  width: var(--event-box-width, clamp(112px, 15vw, 230px));
  height: var(--event-box-height, clamp(112px, 28vh, 235px));
  min-width: 96px;
  min-height: 96px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition: transform 110ms ease, filter 140ms ease, top 90ms ease-out;
}

.concert-screen.is-sparse .concert-event {
  width: var(--event-box-width, clamp(132px, 18vw, 260px));
  height: var(--event-box-height, clamp(132px, 31vh, 260px));
}

.concert-event.is-pressed {
  transform: translate(-50%, -50%) scale(.9);
}

.concert-event.is-performing {
  z-index: 16;
  transform: translate(-50%, -50%) scale(1.08);
}

.concert-event.is-solo {
  transform: translate(-50%, -50%) scale(1.16) rotate(-2deg);
}

.concert-event.is-inviting {
  animation: concert-invitation 750ms ease-in-out 2;
}

.flying-dot {
  position: fixed;
  z-index: 80;
  width: clamp(34px, 3.2vw, 56px);
  height: clamp(34px, 3.2vw, 56px);
  object-fit: contain;
  pointer-events: none;
}

@keyframes play-invitation {
  0%, 100% { filter: drop-shadow(0 6px 2px rgb(6 13 10 / .34)); }
  50% { filter: drop-shadow(0 0 15px rgb(244 202 69 / .74)); }
}

@keyframes dot-arrive {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-18deg); }
  70% { opacity: 1; transform: translate(-50%, -50%) scale(1.35) rotate(5deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

@keyframes dot-wink {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  45% { transform: translate(-50%, -50%) scale(1.7) rotate(12deg); }
}

@keyframes blocked-wiggle {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-10px) rotate(-3deg); }
  55% { transform: translateX(9px) rotate(3deg); }
  80% { transform: translateX(-4px); }
}

@keyframes monster-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5%) scale(1.035); }
}

@keyframes lane-nudge {
  0%, 100% { filter: drop-shadow(0 0 11px var(--lane-glow)); }
  50% { filter: drop-shadow(0 0 22px var(--lane-glow)); }
}

@keyframes go-ready {
  0%, 100% { filter: drop-shadow(0 6px 2px rgb(6 13 10 / .34)); }
  50% { filter: drop-shadow(0 0 15px rgb(244 202 69 / .78)); }
}

@keyframes concert-invitation {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.13) rotate(-2deg); }
}

@media (orientation: portrait) {
  .splash-title {
    top: max(6vh, var(--qk-safe-top));
    width: min(84vw, 760px);
  }

  .splash-stage {
    inset: 25% 0 12%;
  }

  .splash-performer {
    width: clamp(230px, 45vw, 380px);
    height: clamp(230px, 45vw, 380px);
  }

  .splash-monster-01 { left: -7%; bottom: 6%; }
  .splash-monster-06 { bottom: 17%; }
  .splash-monster-10 { right: -8%; bottom: 4%; }

  .composer-timeline {
    top: max(108px, calc(var(--qk-safe-top) + 96px));
    right: 4vw;
    left: 4vw;
    height: 26vh;
  }

  .monster-lineup {
    top: 38%;
    bottom: max(10%, var(--qk-safe-bottom));
    gap: 1vw;
    padding-inline: 8vw;
    scroll-padding-inline: 8vw;
  }

  .composer-monster {
    flex-basis: clamp(230px, 44vw, 340px);
    height: 100%;
  }

  .concert-event {
    width: var(--event-box-width, clamp(122px, 28vw, 220px));
    height: var(--event-box-height, clamp(122px, 23vh, 220px));
  }

  .concert-track-art {
    inset-block: 8%;
    height: 84%;
  }

  .concert-playhead {
    top: 9%;
    height: 82%;
  }
}

@media (max-height: 600px) and (orientation: landscape) {
  .chalk-control,
  .platform-home {
    width: 96px;
    height: 96px;
  }

  .splash-title {
    top: max(1vh, var(--qk-safe-top));
    width: min(49vw, 610px);
    max-height: 30vh;
  }

  .splash-stage {
    inset: 17% 9% 2%;
  }

  .splash-performer {
    width: clamp(190px, 25vw, 300px);
    height: clamp(190px, 25vw, 300px);
  }

  .splash-play {
    width: 106px;
    height: 106px;
  }

  .composer-timeline {
    top: max(1.5vh, var(--qk-safe-top));
    right: 112px;
    left: 112px;
    height: 34vh;
  }

  .monster-lineup {
    top: 32%;
    bottom: 0;
    padding-block: 0;
  }

  .composer-monster {
    flex-basis: clamp(170px, 20vw, 250px);
    height: 100%;
  }

  .go-control {
    width: 104px;
    height: 104px;
  }

  .concert-event {
    width: var(--event-box-width, clamp(104px, 14vw, 176px));
    height: var(--event-box-height, clamp(104px, 28vh, 166px));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .splash-performer > video,
  .monster-dance,
  .monster-video {
    display: none;
  }

  .splash-performer > img,
  .composer-monster .monster-still,
  .composer-monster.is-dance-ready .monster-still,
  .composer-monster.is-performing .monster-still,
  .concert-event.is-dance-ready .monster-still,
  .concert-event.is-performing .monster-still {
    opacity: 1;
  }
}