:root {
  --night: #0d1117;
  --panel: #151b23;
  --panel-2: #1b222c;
  --line: rgba(255, 255, 255, 0.1);
  --cream: #f4f0e7;
  --muted: #9ca7b5;
  --coral: #ff6b57;
  --coral-dark: #d94a3b;
  --aqua: #63d8c5;
  --gold: #e7bd6b;
  --steel: #bcc7d1;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--night);
  color: var(--cream);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-tap-highlight-color: transparent;
}
button, select, a { color: inherit; font: inherit; }
button, select { cursor: pointer; }
a { text-decoration: none; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(99, 216, 197, 0.45); outline-offset: 3px; }

.topbar {
  min-height: 72px;
  padding: 0 clamp(20px, 4vw, 72px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  background: rgba(13, 17, 23, 0.88);
  backdrop-filter: blur(18px);
}
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; letter-spacing: -0.02em; }
.brand-mark { width: 34px; height: 34px; display: flex; align-items: flex-end; justify-content: center; gap: 3px; padding: 8px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 5px rgba(255, 107, 87, 0.1); }
.brand-mark i { width: 3px; border-radius: 3px; background: #fff; }
.brand-mark i:nth-child(1) { height: 9px; }
.brand-mark i:nth-child(2) { height: 16px; }
.brand-mark i:nth-child(3) { height: 12px; }
.topbar-note { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.topbar-note span { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px rgba(99, 216, 197, 0.1); }

.hero {
  width: min(1600px, calc(100% - clamp(30px, 7vw, 120px)));
  margin: 0 auto;
  padding: clamp(55px, 7vw, 112px) 0 clamp(38px, 5vw, 70px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 60px;
}
.eyebrow { margin: 0 0 16px; color: var(--aqua); font-size: 10px; font-weight: 800; letter-spacing: 0.17em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(64px, 8.4vw, 148px); line-height: 0.79; letter-spacing: -0.075em; }
h1 em { color: var(--coral); font-family: Georgia, "Times New Roman", serif; font-weight: 400; }
.intro { max-width: 430px; margin: 0 0 7px; color: var(--muted); font-size: clamp(13px, 1.1vw, 16px); line-height: 1.75; }

.studio-shell {
  width: min(1760px, calc(100% - clamp(20px, 4vw, 72px)));
  margin: 0 auto clamp(90px, 10vw, 160px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, #171e27, #10151c);
  box-shadow: 0 38px 110px rgba(0, 0, 0, 0.4);
}
.control-bar {
  min-height: 76px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.kit-select { height: 48px; min-width: 210px; padding: 7px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 11px; background: #0f141b; }
.kit-select span { grid-column: 1 / -1; margin-bottom: -5px; color: #778492; font-size: 8px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.kit-select select { width: 100%; border: 0; outline: 0; appearance: none; background: transparent; color: var(--cream); font-size: 12px; font-weight: 700; }
.control-button, .download-button {
  min-height: 48px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  color: #c3ccd6;
  font-size: 11px;
}
.control-button:hover { border-color: var(--line); background: rgba(255, 255, 255, 0.05); }
.control-button:disabled { opacity: 0.3; cursor: default; }
.keys-button[aria-pressed="true"] { border-color: rgba(99, 216, 197, 0.25); background: rgba(99, 216, 197, 0.09); color: var(--aqua); }
.transport { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.record-button { border-color: rgba(255, 107, 87, 0.25); background: rgba(255, 107, 87, 0.08); color: #ff9a8d; }
.record-button.recording { border-color: var(--coral); background: var(--coral); color: #fff; }
.record-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--coral); }
.recording .record-dot { background: #fff; animation: record-pulse 1s ease-in-out infinite; }
.download-button { border-color: rgba(99, 216, 197, 0.36); background: var(--aqua); color: #0c2420; font-weight: 800; box-shadow: 0 5px 15px rgba(99, 216, 197, 0.18); }
.download-button:hover { background: #8be7d8; }
.download-button.disabled { border-color: var(--line); background: rgba(255, 255, 255, 0.04); color: #65717d; box-shadow: none; pointer-events: none; }
.fullscreen-button {
  min-height: 42px;
  padding-inline: 13px;
  border-color: rgba(99,216,197,.28);
  color: #9ce9dd;
  background: rgba(99,216,197,.07);
  box-shadow: none;
  font-weight: 750;
}
.fullscreen-button svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.control-button.fullscreen-button:hover,
.fullscreen-button:focus-visible,
.fullscreen-button[aria-pressed="true"] { border-color:rgba(99,216,197,.55); color:#d9fff8; background:rgba(99,216,197,.14); box-shadow:0 4px 14px rgba(99,216,197,.1); }

.studio-shell:fullscreen,
.studio-shell:-webkit-full-screen {
  width:100vw;
  height:100vh;
  height:100dvh;
  margin:0;
  overflow:auto;
  border:0;
  border-radius:0;
  background:linear-gradient(145deg,#171e27,#10151c);
}

.take-status { min-height: 44px; padding: 0 20px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); color: #7f8b98; font-size: 10px; }
.take-status strong { color: #c4cdd7; letter-spacing: 0.08em; text-transform: uppercase; }
.take-status time { padding-left: 10px; border-left: 1px solid var(--line); color: var(--cream); font-variant-numeric: tabular-nums; }
.take-status small { margin-left: auto; }
.status-light { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); }
.take-status.live .status-light { background: var(--coral); box-shadow: 0 0 0 6px rgba(255, 107, 87, 0.1); animation: record-pulse 1s ease-in-out infinite; }
@keyframes record-pulse { 50% { opacity: 0.35; transform: scale(0.76); } }

.kit-wrap { position: relative; padding: clamp(20px, 3vw, 54px); background: radial-gradient(circle at 50% 42%, rgba(74, 101, 117, 0.24), transparent 46%), linear-gradient(180deg, #111820, #0b1016); }
.kit-wrap:before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.18; background-image: linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size: 36px 36px; }
.kit-stage { position: relative; z-index: 1; min-height: clamp(620px, 48vw, 810px); display: grid; grid-template-columns: 1.05fr 1fr 1.2fr 1fr 1.05fr; grid-template-rows: 0.85fr 1fr 1.12fr; gap: clamp(10px, 1.4vw, 22px); }
.instrument { position: relative; min-width: 0; min-height: 0; padding: 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.065); border-radius: 18px; background: linear-gradient(150deg, rgba(255,255,255,.045), rgba(255,255,255,.012)); }
.instrument-heading { position: absolute; left: 13px; top: 12px; display: flex; align-items: center; gap: 7px; color: #798592; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.instrument-heading span { color: var(--coral); font-weight: 800; }
.instrument-heading strong { font-size: 9px; }
.crash-panel { grid-column: 1 / 2; grid-row: 1 / 3; transform: rotate(-1deg); }
.ride-panel { grid-column: 5 / 6; grid-row: 1 / 3; transform: rotate(1deg); }
.toms-panel { grid-column: 2 / 5; grid-row: 1 / 2; }
.hats-panel { grid-column: 1 / 2; grid-row: 3 / 4; }
.snare-panel { grid-column: 2 / 3; grid-row: 2 / 4; }
.bass-panel { grid-column: 3 / 4; grid-row: 2 / 4; }
.floor-panel { grid-column: 4 / 5; grid-row: 2 / 4; }

.drum-hit { position: relative; border: 0; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.drum-hit:active { transform: scale(.97); }
.keycap { position: absolute; z-index: 6; right: 9px; top: 9px; min-width: 24px; min-height: 22px; padding: 0 6px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; background: #11171f; color: var(--aqua); box-shadow: 0 3px 7px rgba(0,0,0,.3); font-size: 8px; font-style: normal; font-weight: 850; letter-spacing: .04em; opacity: 0; transform: translateY(-3px); transition: .18s ease; }
.show-keys .keycap { opacity: 1; transform: none; }

.cymbal { width: min(100%, 260px); aspect-ratio: 1.9 / 1; border-radius: 50%; background: radial-gradient(ellipse at center, #f8d891 0 8%, #8b632c 9% 11%, #d8a957 12% 35%, #8f672f 36% 38%, #d5a655 39% 61%, #8b642f 62% 64%, #c99549 65%); box-shadow: inset 0 -13px 18px rgba(74,42,5,.32), 0 18px 24px rgba(0,0,0,.3); transform-origin: center; overflow: visible; }
.cymbal i { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: #161b21; transform: translate(-50%,-50%); box-shadow: 0 0 0 5px #6f4d20; }
.cymbal.active { animation: cymbal-swing .72s ease-out; filter: brightness(1.25); }
@keyframes cymbal-swing { 0%,100% { transform: rotateX(0) rotateZ(0); } 12% { transform: rotateX(18deg) rotateZ(-2deg); } 28% { transform: rotateX(-12deg) rotateZ(2deg); } 48% { transform: rotateX(7deg) rotateZ(-1deg); } 72% { transform: rotateX(-3deg); } }
.hats-stack { width: 100%; display: grid; place-items: center; gap: 12px; }
.hats { width: min(100%, 210px); }
.articulation-row { width: min(100%, 230px); display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mini-hit, .rim-hit { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.05); color: #aeb8c3; font-size: 9px; font-weight: 750; }
.mini-hit .keycap, .rim-hit .keycap { position: static; display: inline-grid; margin-left: 5px; vertical-align: middle; }
.mini-hit.active, .rim-hit.active { border-color: var(--aqua); background: rgba(99,216,197,.15); color: #fff; box-shadow: 0 0 18px rgba(99,216,197,.2); }

.twin-drums { width: min(100%, 560px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vw, 28px); }
.drum-pad { width: min(100%, 235px); aspect-ratio: 1.15 / 1; display: grid; place-items: center; border: 6px solid #8f9aa4; border-radius: 50%; background: radial-gradient(circle at 46% 40%, #edf0ee 0 45%, #aeb8bd 73%, #727e87 100%); box-shadow: inset 0 0 0 3px #dfe5e4, inset 0 -15px 25px rgba(58,72,80,.28), 0 15px 22px rgba(0,0,0,.28); }
.drum-pad i { color: #5d6870; font-size: 9px; font-style: normal; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.drum-pad.active { animation: drum-hit .33s ease-out; box-shadow: inset 0 0 0 4px #fff, 0 0 0 8px rgba(255,107,87,.24), 0 0 38px rgba(255,107,87,.4); }
@keyframes drum-hit { 0% { transform: scale(1); } 25% { transform: scale(.93); filter: brightness(1.24); } 100% { transform: scale(1); } }
.snare-panel .snare, .floor-panel .floor { width: min(100%, 245px); }
.snare-panel .rim-hit { width: min(100%, 210px); margin-top: 13px; }

.bass-drum { width: min(100%, 330px); aspect-ratio: 1 / 1; display: grid; place-items: center; border: 9px solid #66737e; border-radius: 50%; background: radial-gradient(circle, #212a34 0 55%, #10151c 56% 100%); box-shadow: inset 0 0 0 5px #aab4bc, inset 0 0 60px rgba(0,0,0,.8), 0 24px 35px rgba(0,0,0,.45); }
.bass-face { width: 67%; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; color: #d4dbe0; text-transform: uppercase; letter-spacing: .18em; }
.bass-face i { position: absolute; width: 19%; aspect-ratio: 1; border-radius: 50%; background: var(--coral); box-shadow: 0 0 32px rgba(255,107,87,.42); }
.bass-face b { z-index: 1; font-size: clamp(12px, 1.4vw, 20px); }
.bass-drum.active { animation: bass-hit .38s ease-out; }
@keyframes bass-hit { 20% { transform: scale(.95); filter: brightness(1.28); box-shadow: inset 0 0 0 5px #d7e1e7, 0 0 0 10px rgba(255,107,87,.2), 0 0 55px rgba(255,107,87,.34); } }

.studio-footer { min-height: 62px; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); color: #778492; font-size: 10px; }
.studio-footer p { margin: 0; line-height: 1.6; }
.studio-footer p span { margin-right: 7px; color: var(--aqua); font-weight: 850; text-transform: uppercase; }
.studio-footer strong { flex: 0 0 auto; color: #a9b4bf; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }

.guide { padding: clamp(75px, 10vw, 150px) clamp(22px, 7vw, 120px); background: var(--cream); color: #171d24; }
.guide .eyebrow { color: var(--coral-dark); }
.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 5vw, 80px); }
.guide article { padding-top: 18px; border-top: 1px solid #c9c4ba; }
.guide article > span { color: var(--coral-dark); font-size: 10px; font-weight: 850; }
.guide h2 { margin: 30px 0 12px; font-size: clamp(25px, 2.4vw, 38px); letter-spacing: -.035em; }
.guide article p { max-width: 370px; margin: 0; color: #687079; font-size: 12px; line-height: 1.75; }
.page-footer { min-height: 110px; padding: 25px clamp(20px, 4vw, 72px); display: flex; align-items: center; justify-content: space-between; color: #7f8b98; font-size: 11px; }

@media (max-width: 1120px) {
  .control-bar { flex-wrap: wrap; }
  .transport { width: 100%; margin-left: 0; padding-top: 8px; border-top: 1px solid var(--line); }
  .transport > * { flex: 1 1 0; }
  .kit-stage { min-height: 690px; grid-template-columns: 1fr 1fr 1.08fr 1fr 1fr; }
}

@media (max-width: 820px) {
  .hero { align-items: flex-start; flex-direction: column; gap: 28px; }
  .intro { max-width: 560px; }
  .studio-shell { width: calc(100% - 20px); border-radius: 16px; }
  .kit-wrap { padding: 12px; }
  .kit-stage { min-height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; gap: 10px; }
  .instrument { min-height: 235px; transform: none; }
  .crash-panel, .ride-panel, .toms-panel, .hats-panel, .snare-panel, .bass-panel, .floor-panel { grid-column: auto; grid-row: auto; }
  .toms-panel { grid-column: 1 / -1; }
  .bass-panel { grid-row: span 2; }
  .cymbal { max-width: 220px; }
  .bass-drum { max-width: 275px; }
  .guide-grid { grid-template-columns: 1fr; }
  .guide article { max-width: 600px; }
}

@media (max-width: 560px) {
  .topbar { min-height: 62px; padding: 0 15px; }
  .topbar-note { display: none; }
  .hero { width: calc(100% - 28px); padding-top: 48px; }
  h1 { font-size: clamp(58px, 20vw, 86px); }
  .control-bar { padding: 9px; display: grid; grid-template-columns: 1fr auto; }
  .kit-select { min-width: 0; }
  .transport { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; }
  .transport .download-button { grid-column: auto; }
  .control-button, .download-button { min-height: 46px; padding: 0 9px; font-size: 10px; }
  .take-status { padding: 10px 12px; flex-wrap: wrap; }
  .take-status small { width: 100%; margin-left: 17px; }
  .kit-stage { display: flex; flex-direction: column; }
  .instrument { width: 100%; min-height: 220px; }
  .toms-panel { min-height: 205px; }
  .hats-panel { min-height: 285px; }
  .bass-panel { min-height: 340px; }
  .twin-drums { max-width: 390px; }
  .studio-footer { align-items: flex-start; flex-direction: column; }
  .page-footer { align-items: flex-start; flex-direction: column; gap: 25px; }
}

@media (hover: none) and (pointer: coarse) {
  .drum-hit { min-height: 44px; }
  .control-button, .download-button, select { min-height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
  .drum-hit.active, .recording .record-dot, .take-status.live .status-light { animation: none !important; }
}

/* Real six-kit instrument built from the supplied local reference artwork. */
.kit-choices {
  padding: 10px 14px;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
  border-bottom: 1px solid var(--line);
  background: #0c1117;
}

.kit-choice {
  min-width: 0;
  min-height: 51px;
  padding: 7px 9px;
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  column-gap: 8px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.025);
  color: #d5dbe2;
  text-align: left;
}

.kit-choice i {
  grid-row: 1 / 3;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--choice-color, #d62d27);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.18), 0 3px 8px rgba(0,0,0,.32);
}
.kit-choice[data-kit="standard"] { --choice-color: #d62d27; }
.kit-choice[data-kit="powerful"] { --choice-color: #202124; }
.kit-choice[data-kit="monumental"] { --choice-color: #a91dca; }
.kit-choice[data-kit="minimalistic"] { --choice-color: #18b7bd; }
.kit-choice[data-kit="smooth"] { --choice-color: #2136bd; }
.kit-choice[data-kit="energetic"] { --choice-color: #d3a917; }
.kit-choice span { align-self: end; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 800; white-space: nowrap; }
.kit-choice small { align-self: start; color: #727f8b; font-size: 8px; }
.kit-choice:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.05); }
.kit-choice.selected { border-color: var(--choice-color); background: color-mix(in srgb, var(--choice-color) 13%, #111820); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--choice-color) 40%, transparent); }

.realistic-wrap {
  overflow: hidden;
  padding: clamp(10px, 2.2vw, 32px);
  background:
    radial-gradient(ellipse at 50% 91%, rgba(71, 82, 91, .16), transparent 42%),
    linear-gradient(180deg, #f9fafb, #e9edf0);
}
.realistic-wrap:before { display: none; }
.touch-hint { display: none; margin: 0 0 8px; color: #65717b; font-size: 9px; font-weight: 750; text-align: center; letter-spacing: .06em; text-transform: uppercase; }

.kit-stage.real-kit {
  --kit-color: #d62d27;
  position: relative;
  width: min(100%, 1300px);
  min-height: 0;
  aspect-ratio: 1300 / 825;
  margin: 0 auto;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 26px 24px rgba(24, 31, 36, .18));
}

.kit-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.kit-photo.switching { opacity: .22; transform: scale(.985); }

.real-cymbal {
  position: absolute;
  z-index: 2;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 50%;
}
.crash-cymbal { left: 17%; top: 1%; width: 21%; height: 15%; }
.ride-cymbal { left: 67%; top: 3.5%; width: 26%; height: 23%; }
.real-cymbal.active { animation: real-cymbal-shake .85s cubic-bezier(.2,.7,.3,1); }
@keyframes real-cymbal-shake {
  0%,100% { transform: rotate(0) scaleY(1); }
  10% { transform: rotate(-2.4deg) scaleY(.78); filter: brightness(1.18); }
  24% { transform: rotate(2deg) scaleY(1.18); }
  42% { transform: rotate(-1.3deg) scaleY(.87); }
  62% { transform: rotate(.8deg) scaleY(1.08); }
  82% { transform: rotate(-.35deg) scaleY(.97); }
}

.hit-zone {
  position: absolute;
  z-index: 5;
  min-height: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: #172028;
  touch-action: manipulation;
}
.hit-zone:hover { border-color: color-mix(in srgb, var(--kit-color) 52%, transparent); background: color-mix(in srgb, var(--kit-color) 7%, transparent); }
.hit-zone:before { content: ""; position: absolute; inset: 10%; border: 2px solid transparent; border-radius: inherit; pointer-events: none; }
.hit-zone.active:before { animation: real-drum-pulse .42s ease-out; }
@keyframes real-drum-pulse {
  0% { border-color: var(--kit-color); box-shadow: inset 0 0 22px color-mix(in srgb, var(--kit-color) 55%, transparent), 0 0 0 0 color-mix(in srgb, var(--kit-color) 38%, transparent); transform: scale(.9); }
  100% { border-color: transparent; box-shadow: inset 0 0 0 transparent, 0 0 0 18px transparent; transform: scale(1.08); }
}

.zone-name, .zone-key {
  position: absolute;
  z-index: 7;
  left: 50%;
  padding: 4px 7px;
  border-radius: 6px;
  box-shadow: 0 3px 9px rgba(0,0,0,.28);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: .16s ease;
}
.zone-name { bottom: 14%; background: rgba(17, 23, 29, .88); color: #fff; font-size: 8px; font-weight: 800; }
.zone-key { top: 12%; background: var(--kit-color); color: #fff; font-size: 8px; font-weight: 900; }
.show-keys .zone-name, .show-keys .zone-key, .hit-zone:hover .zone-name { opacity: 1; transform: translate(-50%, 0); }

.crash-zone { left: 17%; top: 1.576%; width: 21%; height: 15%; }
.ride-zone { left: 67%; top: 5.515%; width: 26%; height: 23%; }
.hihat-open-zone { left: 0; top: 15%; width: 20%; height: 6.5%; }
.hihat-zone { left: 0; top: 21.5%; width: 20%; height: 6.5%; }
.hihat-foot-zone { left: 10%; bottom: 6%; width: 6.3%; height: 14%; border-radius: 30%; }
.tom1-zone { left: 32%; top: 17.333%; width: 15%; height: 24%; }
.tom2-zone { left: 47%; top: 15.758%; width: 18%; height: 26%; }
.snare-zone { left: 12%; top: 29.782%; width: 21%; height: 14%; }
.snare-stick-zone { left: 12%; top: 39.5%; width: 21%; height: 6.5%; border-radius: 30%; }
.floor-zone { left: 63%; top: 31.515%; width: 24%; height: 46%; }
.bass-zone { left: 32%; top: 42.545%; width: 30%; height: 43%; }

/* Shortcut coordinates copied from the reference component rules. */
.crash-zone .zone-key { left: 41%; top: 19%; }
.ride-zone .zone-key { left: 42%; top: 29%; }
.hihat-open-zone .zone-key { left: 44%; top: 0; }
.hihat-zone .zone-key { left: 44%; top: 20%; }
.hihat-foot-zone .zone-key { left: 30%; top: 30%; }
.tom1-zone .zone-key { left: 35%; top: 45%; }
.tom2-zone .zone-key { left: 43%; top: 47%; }
.floor-zone .zone-key { left: 50%; top: 50%; }
.bass-zone .zone-key { left: 43%; top: 28%; }
.snare-zone .zone-key { left: 50%; top: 12%; bottom: auto; }
.snare-stick-zone .zone-key { left: 68%; right: auto; top: 8%; transform: translate(-50%, 0); }

@media (max-width: 820px) {
  .kit-choices { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .kit-choice { flex: 0 0 148px; }
  .kit-stage.real-kit { display: block; min-height: 0; }
  .realistic-wrap { padding: 12px 5px 16px; }
  .touch-hint { display: block; }
  .hit-zone { min-height: 0; }
}

@media (max-width: 560px) {
  .kit-choice { flex-basis: 135px; }
  .zone-name { display: none; }
  .zone-key { padding: 3px 5px; font-size: 7px; }
  .hihat-foot-zone { min-width: 42px; min-height: 42px; }
  .snare-stick-zone { min-height: 32px; }
}

/* Physical performance mechanics: sticks, cymbal motion, and kick beater. */
.hit-zone:hover,
.hit-zone.active {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}
.hit-zone:before { display: none; }
.hit-zone:active { transform: none; }
.zone-name { display: none !important; }

.real-hihat {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 11.5%;
  width: 21%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 50% 44%;
}
.real-hihat.active { animation: real-hihat-hit .48s ease-out; }
@keyframes real-hihat-hit {
  0%,100% { transform: translateY(0) rotate(0); filter: brightness(1); }
  20% { transform: translateY(2.5%) rotate(-1.2deg); filter: brightness(1.14); }
  48% { transform: translateY(-1.2%) rotate(.7deg); }
  75% { transform: translateY(.5%) rotate(-.25deg); }
}

.stick-rig {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.drum-stick {
  position: absolute;
  width: 1%;
  min-width: 4px;
  border-radius: 80% 80% 32% 32%;
  background: linear-gradient(90deg, #6d4525 0 8%, #b98148 22%, #f1d19a 49%, #d5a467 69%, #754926 100%);
  box-shadow: 1px 3px 4px rgba(0,0,0,.3), inset 1px 0 rgba(255,255,255,.45);
  transform-origin: left bottom;
  will-change: transform, opacity;
}
.drum-stick:before {
  content: "";
  position: absolute;
  left: 50%;
  top: -2.8%;
  width: 160%;
  aspect-ratio: .7 / 1;
  border-radius: 50% 50% 44% 44%;
  background: linear-gradient(90deg, #9a6b3e, #f1d39c 48%, #8a5a33);
  transform: translateX(-50%);
}
.stick-target { opacity: 0; }
.stick-default-left { left: 25%; top: 10%; height: 50%; transform: rotate(30deg); }
.stick-default-right { left: 70%; top: 10%; height: 50%; transform: rotate(-30deg); }
.stick-snare-left { left: 35%; top: 20%; height: 30%; transform: rotate(-30deg); }
.stick-snare-right { left: 41%; top: 17%; height: 30%; transform: rotate(-30deg); }
.stick-hihat-left { left: 25%; top: 5%; height: 30%; transform: rotate(-30deg); }
.stick-hihat-right { left: 30%; top: 2%; height: 30%; transform: rotate(-30deg); }
.stick-crash { left: 45%; top: -6%; height: 50%; transform: rotate(-30deg); }
.stick-ride { left: 45%; top: 5%; height: 50%; transform: rotate(30deg); }
.stick-tom1 { left: 41%; top: 5%; height: 30%; transform: rotate(-10deg); }
.stick-tom2 { left: 52%; top: 5%; height: 30%; transform: rotate(10deg); }
.stick-floor { left: 42%; top: 2%; height: 50%; transform: rotate(40deg); }

.real-kit.strike-crash .stick-default-left,
.real-kit.strike-hihat-left .stick-default-left,
.real-kit.strike-snare-left .stick-default-left,
.real-kit.strike-tom1 .stick-default-left,
.real-kit.strike-ride .stick-default-right,
.real-kit.strike-hihat-right .stick-default-right,
.real-kit.strike-snare-right .stick-default-right,
.real-kit.strike-tom2 .stick-default-right,
.real-kit.strike-floor-tom .stick-default-right { opacity: 0; }

.real-kit.strike-crash .stick-crash { opacity: 1; animation: target-crash .21s linear; }
.real-kit.strike-ride .stick-ride { opacity: 1; animation: target-ride .25s linear; }
.real-kit.strike-hihat-left .stick-hihat-left { opacity: 1; animation: target-hihat-left .25s linear; }
.real-kit.strike-hihat-right .stick-hihat-right { opacity: 1; animation: target-hihat-right .25s linear; }
.real-kit.strike-snare-left .stick-snare-left { opacity: 1; animation: target-snare .25s linear; }
.real-kit.strike-snare-right .stick-snare-right { opacity: 1; animation: target-snare .25s linear; }
.real-kit.strike-tom1 .stick-tom1 { opacity: 1; animation: target-tom1 .25s linear; }
.real-kit.strike-tom2 .stick-tom2 { opacity: 1; animation: target-tom2 .25s linear; }
.real-kit.strike-floor-tom .stick-floor { opacity: 1; animation: target-floor .25s linear; }

@keyframes target-snare {
  0% { transform: rotate(-30deg); }
  20% { transform: rotate(-70deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes target-hihat-left {
  0% { transform: rotate(-30deg); }
  20% { transform: rotate(-70deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes target-hihat-right {
  0% { transform: rotate(-30deg); }
  20% { transform: rotate(-75deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes target-crash {
  0% { height: 50%; transform: rotate(-30deg); }
  5% { height: 40%; transform: rotate(-50deg); }
  100% { height: 50%; transform: rotate(-30deg); }
}
@keyframes target-ride {
  0% { transform: rotate(30deg); }
  20% { transform: rotate(50deg); }
  100% { transform: rotate(30deg); }
}
@keyframes target-tom1 {
  0% { transform: rotate(-10deg) rotateX(0); }
  20% { transform: rotate(-40deg) rotateX(-75deg); }
  100% { transform: rotate(-10deg) rotateX(0); }
}
@keyframes target-tom2 {
  0% { transform: rotate(10deg) rotateX(0); }
  20% { transform: rotate(10deg) rotateX(-75deg); }
  100% { transform: rotate(10deg) rotateX(0); }
}
@keyframes target-floor {
  0% { transform: rotate(40deg); }
  20% { transform: rotate(70deg); }
  100% { transform: rotate(40deg); }
}

.bass-action {
  position: absolute;
  z-index: 4;
  top: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 30%;
  height: 43%;
  margin: 27% 32%;
  pointer-events: none;
}
.kick-mechanism {
  position: relative;
  width: 30%;
  height: 55%;
}
.kick-head {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("./kits/bass-beater-head.png") no-repeat;
  background-position: 55% 0;
  background-size: 35%;
}
.kick-pedal {
  position: absolute;
  right: 5%;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: url("./kits/bass-pedal.png") no-repeat 50%;
  background-size: 60%;
  transform-origin: 50% 100%;
}
.real-kit.strike-bass .kick-head { animation: kick-head-hit .1s linear; }
.real-kit.strike-bass .kick-pedal { animation: kick-pedal-hit .16s linear; }
@keyframes kick-head-hit {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(10%); }
}
@keyframes kick-pedal-hit {
  0%,100% { right: 5%; bottom: 0; height: 50%; transform: rotateX(0); }
  50% { right: 3%; bottom: -5%; height: 50%; transform: rotateX(30deg); }
}

.hihat-pedal-mechanism {
  position: absolute;
  z-index: 4;
  left: 10%;
  bottom: 6%;
  width: 6.3%;
  height: 14%;
  overflow: hidden;
  pointer-events: none;
}
.hihat-pedal-link {
  position: absolute;
  z-index: 0;
  top: -20%;
  width: 15%;
  height: 100%;
  background: url("./kits/hihat-chain.png") no-repeat;
  background-size: contain;
  transform-origin: top right;
  transition: transform .08s linear;
}
.hihat-pedal-plate {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  background: url("./kits/hihat-pedal.png") no-repeat;
  background-size: contain;
  transform-origin: center;
  transition: height .08s linear, margin .08s linear, transform .08s linear;
}
.real-kit.hihat-closed .hihat-pedal-link { transform: translateY(10%); }
.real-kit.hihat-closed .hihat-pedal-plate { height: 76%; margin-top: 2px; transform: translateY(5%) rotate(-10deg); }
.real-kit.strike-hihat-foot .hihat-pedal-link { animation: hihat-link-press .12s ease-out; }
.real-kit.strike-hihat-foot .hihat-pedal-plate { animation: hihat-pedal-press .12s ease-out; }
@keyframes hihat-link-press {
  0% { transform: translateY(0); }
  50%,100% { transform: translateY(10%); }
}
@keyframes hihat-pedal-press {
  0% { height: 100%; margin-left: 0; margin-top: 0; transform: translateY(0) rotate(0); }
  50%,100% { height: 76%; margin-left: 0; margin-top: 2px; transform: translateY(5%) rotate(-10deg); }
}

@media (max-width: 560px) {
  .drum-stick { min-width: 3px; }
  .zone-key { min-width: 20px; min-height: 18px; }
}