@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600;700&family=Unbounded:wght@700;800&display=swap');

:root {
  --ink: #15121c;
  --paper: #f4efdf;
  --purple: #3f3261;
  --orange: #ff7a45;
  --yellow: #ffd96a;
  --blue: #76c9e8;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 15%, rgba(255, 122, 69, .18), transparent 27rem),
    linear-gradient(145deg, #191521 0%, #2b2142 55%, #18131f 100%);
  color: var(--paper);
  font-family: 'DM Sans', Arial, sans-serif;
}

main { width: min(100% - 32px, 1180px); margin: 0 auto; padding: 54px 0 70px; }
.hero { text-align: center; }
.hero-line { margin: 0; color: var(--yellow); font-size: clamp(.68rem, 1.2vw, .82rem); font-weight: 700; letter-spacing: .17em; line-height: 1.5; text-transform: uppercase; }
.hero-line > span { display: block; }
.hero-line strong { display: block; margin: 12px 0 9px; color: var(--orange); font-family: 'Unbounded', Arial, sans-serif; font-size: clamp(3.1rem, 8vw, 6.8rem); line-height: .9; letter-spacing: -.08em; }

.control-desk {
  position: relative;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr 1.5fr auto;
  align-items: end;
  gap: 22px;
  margin: 40px auto -38px;
  width: min(92%, 900px);
  padding: 20px 22px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background: rgba(21, 18, 28, .9);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  backdrop-filter: blur(14px);
}

.practice-control > span, .speed-control > span { display: block; margin-bottom: 8px; color: rgba(244,239,223,.58); font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
select { width: 100%; padding: 10px 36px 10px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 9px; background: #272131; color: var(--paper); font: inherit; font-weight: 600; }
.speed-control div { display: flex; gap: 7px; }
.speed-control button, .master-control, .music-toggle { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.speed-control button { padding: 10px 12px; border-radius: 9px; background: #272131; color: rgba(244,239,223,.6); white-space: nowrap; }
.speed-control button.is-selected { background: var(--paper); color: var(--ink); }
.master-control { min-width: 115px; padding: 12px 20px; border-radius: 10px; background: var(--orange); color: var(--ink); box-shadow: 0 7px 0 #a83f28; transition: transform .18s ease, box-shadow .18s ease; }
.master-control:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 9px 0 #a83f28; }
.master-control:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 2px 0 #a83f28; }
.master-control:disabled, select:disabled { cursor: not-allowed; opacity: .45; }
.music-toggle { grid-column: 1 / -1; justify-self: center; padding: 8px 16px; border: 1px solid rgba(118,201,232,.6); border-radius: 999px; background: transparent; color: var(--blue); }

.music-panel { width: min(100%, 1000px); margin: 60px auto -18px; padding: 18px; border-radius: 18px; background: white; position: relative; z-index: 4; }
.music-status { margin: 8px; color: var(--ink); text-align: center; }
.music-score { width: 100%; overflow-x: auto; }

.stage {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: end;
  min-height: 570px;
  padding: 118px 36px 62px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 34px;
  background:
    repeating-linear-gradient(90deg, transparent 0 49px, rgba(255,255,255,.025) 50px),
    #261f32;
  box-shadow: 0 35px 90px rgba(0,0,0,.4);
}
.stage::before { content: ''; position: absolute; inset: auto -10% 0; height: 36%; background: radial-gradient(ellipse at center, rgba(255,255,255,.12), transparent 65%); transform: perspective(260px) rotateX(52deg); transform-origin: bottom; }
.stage-sign { position: absolute; top: 70px; left: 50%; transform: translateX(-50%); color: rgba(244,239,223,.36); font-size: .65rem; font-weight: 700; letter-spacing: .3em; white-space: nowrap; }

.band-member {
  --light: var(--yellow);
  position: relative;
  display: grid;
  align-content: end;
  min-width: 0;
  height: 390px;
  padding: 0 5px 13px;
  border: 0;
  background: transparent;
  color: var(--paper);
  font: inherit;
  cursor: pointer;
}
.band-member[data-instrument='bass'] { --light: var(--orange); }
.band-member[data-instrument='drums'] { --light: var(--blue); }
.band-member[data-instrument='melody'] { --light: #d99bf0; }
.band-member[data-instrument='keyboard'] { --light: #97df91; }
.spotlight { position: absolute; z-index: 0; left: 8%; right: 8%; bottom: 43px; height: 410px; opacity: .16; background: linear-gradient(to bottom, transparent 2%, color-mix(in srgb, var(--light) 68%, transparent) 78%); clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); transition: opacity .3s ease, filter .3s ease; }
.band-member img { position: relative; z-index: 1; width: 100%; height: 280px; object-fit: contain; object-position: center bottom; opacity: .45; filter: drop-shadow(0 15px 10px rgba(0,0,0,.45)); transform-origin: bottom center; transition: opacity .28s ease, transform .28s ease, filter .28s ease; }
.member-label { position: relative; z-index: 2; display: inline-grid; justify-self: center; min-width: 105px; margin-top: 10px; padding: 8px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(21,18,28,.82); text-align: center; transition: background .28s ease, color .28s ease, transform .28s ease; }
.member-label strong { font-size: .9rem; }
.member-label small { color: rgba(244,239,223,.5); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase; }
.band-member:hover img { opacity: .72; transform: translateY(-7px); }
.band-member.is-active .spotlight { opacity: .88; filter: saturate(1.25); }
.band-member.is-active img { opacity: 1; transform: translateY(-10px); filter: drop-shadow(0 18px 14px rgba(0,0,0,.55)); }
.band-member.is-active .member-label { background: var(--light); color: var(--ink); transform: translateY(-4px); }
.band-member.is-active .member-label small { color: rgba(21,18,28,.62); }
.band-member.is-active.is-playing-beat img { animation: band-bounce 150ms ease-out; }
.stage-hint { position: absolute; bottom: 19px; left: 50%; transform: translateX(-50%); margin: 0; color: rgba(244,239,223,.35); font-size: .68rem; letter-spacing: .08em; white-space: nowrap; }

button:focus-visible, select:focus-visible { outline: 3px solid white; outline-offset: 4px; }
@keyframes band-bounce { 50% { transform: translateY(-17px) scale(1.025); } }

@media (max-width: 820px) {
  .control-desk { grid-template-columns: 1fr 1fr; }
  .master-control, .music-toggle { grid-column: 1 / -1; }
  .stage { grid-template-columns: repeat(2, 1fr); padding-top: 110px; }
  .band-member { height: 325px; }
  .band-member img { height: 230px; }
}

@media (max-width: 560px) {
  main { width: min(100% - 20px, 1180px); padding-top: 35px; }
  .hero-line strong { font-size: clamp(2.35rem, 11vw, 2.7rem); }
  .control-desk { grid-template-columns: 1fr; gap: 15px; width: 94%; margin-top: 30px; padding: 17px; }
  .master-control, .music-toggle { grid-column: auto; }
  .speed-control div { display: grid; grid-template-columns: 1fr 1fr; }
  .speed-control button { white-space: normal; font-size: .78rem; }
  .stage { min-height: 770px; padding: 105px 8px 55px; border-radius: 24px; }
  .band-member { height: 300px; }
  .band-member img { height: 212px; }
  .member-label { min-width: 90px; padding: 7px 11px; }
}

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