@font-face {
  font-family: "Kit SC";
  src: url("../fonts/noto-sans-sc-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Kit SC";
  src: url("../fonts/noto-sans-sc-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #100d0b;
  --ink: #f6f0e6;
  --muted: #d9c7aa;
  --gold: #e7c15a;
  --gold-deep: #8a6416;
  --line: rgba(244, 214, 150, 0.34);
  --toolbar: rgba(12, 9, 8, 0.88);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  height: 100dvh;
  background: var(--bg);
  color: var(--ink);
  font-family: "Kit SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

button, input { font: inherit; color: inherit; }

button {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  line-height: 1.15;
  cursor: pointer;
  white-space: nowrap;
}

button:disabled { opacity: 0.38; cursor: default; }

button:focus-visible, input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

button[aria-pressed="true"] {
  background: var(--gold);
  color: #2a1c08;
  border-color: var(--gold);
}

#record[aria-pressed="true"] {
  background: #d64545;
  border-color: #ffb4b0;
  color: #fff;
}

.app {
  height: 100%;
  display: flex;
  flex-direction: column;
  touch-action: manipulation;
}

.toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
  background: var(--toolbar);
  border-bottom: 1px solid rgba(255, 220, 160, 0.12);
  z-index: 20;
  touch-action: manipulation;
}

.title {
  margin: 0 4px 0 0;
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.title b { font-size: 16px; letter-spacing: 0.08em; }
.title small {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--muted);
  font-weight: 400;
}

.slider {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  touch-action: manipulation;
}

input[type="range"] {
  width: 72px;
  accent-color: var(--gold);
  touch-action: pan-x;
  margin: 0;
}

output { min-width: 2ch; font-variant-numeric: tabular-nums; color: var(--ink); }

.beats { display: flex; gap: 4px; }
.beats i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
}
.beats i.on { background: var(--gold); box-shadow: 0 0 8px var(--gold); }
.beats i.on.accent { background: #fff4cc; }

.stage {
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  position: relative;
  container-type: size;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%, rgba(255, 196, 130, 0.16), transparent 68%),
    linear-gradient(#221814 0%, #120e0c 55%, #090807 100%);
  touch-action: none;
}

.kit-frame {
  position: relative;
  width: min(100cqw, calc(100cqh * 2.35));
  height: min(100cqh, calc(100cqw / 2.35));
  touch-action: none;
}

@supports not (width: 1cqw) {
  .kit-frame { width: 100%; height: 100%; }
}

.rug {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -2%;
  height: 74%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 0 46%, rgba(0, 0, 0, 0.28) 47% 48.2%, transparent 49%),
    radial-gradient(ellipse at 50% 45%, #9a3142 0%, #6c1c2c 62%, #3e1018 100%);
  box-shadow: inset 0 18px 30px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.kit { position: absolute; inset: 0; touch-action: none; }

.veil {
  position: absolute;
  inset: 0;
  margin: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 16px;
  background: rgba(8, 6, 5, 0.45);
  z-index: 9;
  font-size: clamp(16px, 3cqh, 22px);
}

.veil[hidden] { display: none; }

.piece {
  position: absolute;
  border: 0;
  padding: 0;
  background: transparent;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 46%;
}

.piece > * { pointer-events: none; }

.piece:focus { outline: none; }
.piece:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- placement: drummer's view, left = hi-hat / crash ---------- */
.hardware { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pole {
  position: absolute;
  width: 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #8e979e, #f4f6f7 42%, #626a70);
  box-shadow: 2px 0 3px rgba(0, 0, 0, 0.35);
}
.pole.left { left: 10%; top: 16%; bottom: 3%; }
.pole.right { right: 13%; top: 12%; bottom: 6%; }
.rack {
  position: absolute;
  left: 32%;
  width: 30%;
  top: 18%;
  height: 7px;
  border-radius: 4px;
  background: linear-gradient(#f7f7f7, #7c868e);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
}

.crash    { left: 0;   top: 0;   width: 24%; height: 31%; z-index: 3; transform: rotate(-6deg); }
.hh-open  { left: 0;   top: 33%; width: 24%; height: 32%; z-index: 4; }
.hh-closed{ left: 0;   top: 67%; width: 25%; height: 33%; z-index: 6; }
.tom-high { left: 28%; top: 0;   width: 17%; height: 34%; z-index: 3; transform: rotate(-7deg); }
.tom-mid  { left: 46%; top: 0;   width: 18%; height: 34%; z-index: 3; transform: rotate(6deg); }
.ride     { left: 71%; top: 0;   width: 29%; height: 34%; z-index: 2; transform: rotate(5deg); }
.snare    { left: 24%; top: 44%; width: 22%; height: 54%; z-index: 8; }
.kick     { left: 45%; top: 40%; width: 30%; height: 60%; z-index: 5; }
.floor    { left: 74%; top: 42%; width: 26%; height: 58%; z-index: 6; transform: rotate(3deg); }

.shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 6%;
  height: 16%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(2px);
}

.stand {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 5px;
  height: 48%;
  transform: translateX(-50%);
  border-radius: 4px;
  background: linear-gradient(#f7f7f7, #8b949b 42%, #d5dbe0 68%, #5e676e);
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.35) inset;
}

/* cymbals */
.cymbal-gfx, .hat .cymbal-gfx {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 46%, #fff6d4 0 5%, #e8c56a 6.5% 9%, transparent 10%),
    repeating-radial-gradient(circle at 50% 50%, #f8e7b0 0 1px, #e0b44a 2px 3px, #f3d78a 4px 5px, #b8882c 6px 8px);
  box-shadow:
    0 10px 14px rgba(0, 0, 0, 0.38),
    inset 0 -10px 14px rgba(90, 50, 0, 0.35),
    inset 0 8px 10px rgba(255, 255, 230, 0.35);
}

.cymbal .cymbal-gfx {
  left: 4%;
  right: 4%;
  top: 6%;
  height: 62%;
}

.ride .cymbal-gfx { height: 58%; }
.ride .bell { width: 18%; height: 22%; }

.bell {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 14%;
  height: 18%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff8dc, #d7a441 55%, #8d6418);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
}

.plates { position: absolute; inset: 4% 6% 16% 6%; }
.plates .cymbal-gfx { left: 0; right: 0; height: 48%; }
.plates .bottom { left: -3%; right: -3%; }

.hh-closed .top { top: 16%; }
.hh-closed .bottom { top: 26%; }
.hh-open .top { top: 2%; }
.hh-open .bottom { top: 36%; }
.hh-open .cymbal-gfx { height: 44%; }

.foot {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 36%;
  height: 11%;
  transform: translateX(-50%);
  border-radius: 3px 3px 6px 6px;
  background: linear-gradient(#e4e7ea, #6d747b);
  box-shadow: 0 3px 0 #3e4448;
}

/* shells and heads */
.shell {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 16%;
  height: 44%;
  border-radius: 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 220, 170, 0.18) 0 2px, transparent 2px 7px),
    linear-gradient(#e0a15a, #a86b32 40%, #6d3e1c 100%);
  box-shadow:
    inset 0 -12px 16px rgba(0, 0, 0, 0.35),
    inset 0 8px 10px rgba(255, 220, 170, 0.25),
    0 12px 16px rgba(0, 0, 0, 0.35);
}

.snare .shell {
  height: 30%;
  bottom: 24%;
  background:
    linear-gradient(180deg, transparent 0 70%, rgba(40, 40, 40, 0.35) 70% 74%, transparent 74%),
    linear-gradient(#f5f8f8, #b7c2c8 28%, #f2f5f6 48%, #7d8b94 100%);
}

.floor .shell { height: 48%; bottom: 12%; }

.head {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 60%, rgba(150, 120, 70, 0.18) 61% 66%, transparent 67%),
    radial-gradient(circle at 36% 32%, #ffffff 0%, #f3efe4 42%, #d4cbb8 100%);
  box-shadow:
    inset 0 0 0 4px #d7b56a,
    inset 0 0 0 7px #6d5124,
    0 8px 10px rgba(0, 0, 0, 0.25);
}

.drum .head, .snare .head, .floor .head {
  left: 12%;
  right: 12%;
  top: 12%;
  height: 50%;
}

.snare .head { top: 16%; height: 46%; }
.floor .head { top: 8%; height: 48%; }

.shine {
  position: absolute;
  left: 18%;
  top: 14%;
  width: 34%;
  height: 22%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.85), transparent 70%);
}

.lugs {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 12%;
  height: 50%;
  z-index: 2;
}

.snare .lugs { top: 16%; height: 46%; }
.floor .lugs { top: 8%; height: 48%; }

.lugs i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8%;
  height: 16%;
  border-radius: 2px;
  background: linear-gradient(#f4f4f4, #8d8d8d 55%, #d9d9d9);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-300%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

/* kick, seen from the front */
.kick .head {
  left: 10%;
  right: 10%;
  top: 8%;
  height: 70%;
  background:
    radial-gradient(circle at 38% 34%, #ffffff 0%, #f4f1e6 40%, #cfc6b2 100%);
  box-shadow:
    0 0 0 7px #161616,
    0 0 0 12px #d7b15a,
    0 0 0 16px #111,
    0 16px 22px rgba(0, 0, 0, 0.45);
}

.kick .lugs {
  left: 10%;
  right: 10%;
  top: 8%;
  height: 70%;
  z-index: 3;
}

.kick .lugs i { background: linear-gradient(#f7f7f7, #9a9a9a); }

.port {
  position: absolute;
  width: 22%;
  height: 22%;
  right: 16%;
  bottom: 22%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a4a4a, #070707 70%);
  box-shadow: inset 0 0 6px #000, 0 0 0 3px #1a1a1a;
}

.kick .spur {
  position: absolute;
  bottom: 8%;
  width: 6px;
  height: 20%;
  border-radius: 3px;
  background: linear-gradient(#eee, #777);
}
.kick .spur.left { left: 16%; transform: rotate(16deg); }
.kick .spur.right { right: 16%; transform: rotate(-16deg); }

.kick .pedal {
  position: absolute;
  left: 50%;
  bottom: 1%;
  width: 22%;
  height: 9%;
  transform: translateX(-50%);
  border-radius: 3px 3px 5px 5px;
  background: linear-gradient(#d5d8dc, #5f666c);
  box-shadow: 0 3px 0 #2e3336;
}

.floor .leg {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 24%;
  border-radius: 3px;
  background: linear-gradient(#f3f3f3, #7a7a7a);
}
.floor .leg.a { left: 22%; transform: rotate(12deg); }
.floor .leg.b { right: 22%; transform: rotate(-12deg); }
.floor .leg.c { left: 50%; height: 16%; transform: translateX(-50%); }

.badge {
  position: absolute;
  left: 50%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px 2px 2px;
  border-radius: 999px;
  background: rgba(12, 8, 6, 0.72);
  color: #fff;
  line-height: 1.05;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}

.keys { display: inline-flex; gap: 2px; align-items: center; }

.drum .badge, .snare .badge, .floor .badge { bottom: 18%; transform: translateX(-50%); }
.kick .badge { top: 40%; transform: translate(-50%, -50%); }
.cymbal .badge, .hat .badge { top: 38%; transform: translate(-50%, -50%); }
.hh-closed .badge { top: 34%; }
.hh-open .badge { top: 30%; }

kbd {
  font-family: inherit;
  font-weight: 700;
  font-size: clamp(11px, 3.4cqh, 17px);
  background: #f3e0a6;
  color: #2c1d09;
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 1.2em;
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(80, 50, 10, 0.28);
}

.names { display: flex; flex-direction: column; }
.names b { font-size: clamp(11px, 3.4cqh, 16px); font-weight: 700; }
.names small { font-size: clamp(8px, 2.2cqh, 11px); color: #f0e0c4; font-weight: 400; }

@container (max-height: 430px) {
  .names small { display: none; }
}

/* hit feedback */
.piece::after {
  content: "";
  position: absolute;
  left: 16%;
  right: 16%;
  top: 18%;
  height: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 214, 0.9), rgba(255, 210, 90, 0) 68%);
  opacity: 0;
  z-index: 4;
}

.kick::after { top: 16%; height: 58%; }

.piece.is-hit::after { animation: burst 0.16s ease-out; }
.piece.is-hit .head,
.piece.is-hit .cymbal-gfx {
  animation: dip 0.12s ease-out;
}

@keyframes burst {
  0% { opacity: 0.95; transform: scale(0.72); }
  100% { opacity: 0; transform: scale(1.28); }
}

@keyframes dip {
  0% { filter: brightness(1.85); }
  100% { filter: brightness(1); }
}

.piece:active .head,
.piece:active .cymbal-gfx { filter: brightness(1.35); }

@media (hover: hover) and (pointer: fine) {
  .piece:hover .head,
  .piece:hover .cymbal-gfx { filter: brightness(1.08); }
}

/* portrait phones */
.portrait-gate {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 24px 20px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(231, 193, 90, 0.16), transparent 55%),
    #120e0c;
  align-items: center;
  justify-content: center;
  text-align: center;
  touch-action: none;
}

@media (orientation: portrait) and (max-width: 820px) {
  .portrait-gate { display: flex; }
}

@media (orientation: portrait) and (max-width: 820px) and (hover: hover) and (pointer: fine) {
  .portrait-gate { display: none; }
}

.gate-card { max-width: 26rem; }
.gate-card h2 { margin: 12px 0 8px; font-size: 28px; }
.gate-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.gate-card button {
  font-size: 18px;
  padding: 12px 18px;
  background: var(--gold);
  color: #2a1c08;
  border-color: var(--gold);
  touch-action: manipulation;
}
#rotate-note { margin-top: 14px; font-size: 14px; }

.phone {
  width: 74px;
  height: 120px;
  margin: 0 auto;
  border: 3px solid var(--gold);
  border-radius: 12px;
  position: relative;
  animation: tilt 2.4s ease-in-out infinite;
}

.phone span {
  position: absolute;
  left: 50%;
  bottom: 8px;
  width: 22px;
  height: 4px;
  transform: translateX(-50%);
  border-radius: 4px;
  background: var(--gold);
}

@keyframes tilt {
  0%, 20% { transform: rotate(0); }
  45%, 80% { transform: rotate(90deg); }
  100% { transform: rotate(0); }
}

dialog {
  border: 1px solid var(--line);
  background: #1b1512;
  color: var(--ink);
  border-radius: 16px;
  max-width: min(640px, calc(100vw - 24px));
  padding: 16px 18px 12px;
  touch-action: manipulation;
}

dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

dialog h2 { margin: 0 0 8px; }
dialog p { line-height: 1.5; color: var(--muted); }
dialog table { width: 100%; border-collapse: collapse; font-size: 14px; }
dialog th, dialog td { text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
dialog form { margin: 12px 0 0; text-align: right; }
.credit { font-size: 13px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript {
  position: fixed;
  inset: auto 12px 12px 12px;
  background: #3a1010;
  padding: 10px 12px;
  border-radius: 8px;
}

.diag {
  position: fixed;
  z-index: 36;
  left: 0;
  right: 0;
  top: 0;
  max-height: 46vh;
  overflow: auto;
  padding: max(8px, env(safe-area-inset-top)) 10px 8px;
  background: rgba(12, 9, 8, 0.94);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.45;
  touch-action: manipulation;
}

.diag[hidden] { display: none; }

.diag-bar,
.diag-modes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.diag-readout {
  white-space: pre-line;
  margin: 6px 0;
  font-variant-numeric: tabular-nums;
}

.diag-note {
  margin: 6px 0 0;
  color: var(--muted);
}

@media (max-width: 760px) {
  .title small { display: none; }
  input[type="range"] { width: 58px; }
  button { padding: 6px 8px; }
  .toolbar { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  .piece.is-hit::after,
  .piece.is-hit .head,
  .piece.is-hit .cymbal-gfx,
  .phone { animation: none; }
  .piece.is-hit .head,
  .piece.is-hit .cymbal-gfx { filter: brightness(1.5); }
}