:root {
  --gold: #d9b26a;
  --gold-dim: #8a6a33;
  --felt: #7d1220;
  --pad: clamp(8px, 1.4vw, 18px);
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; background: #08070a; }

body {
  font-family: ui-sans-serif, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #cfc7bb;
  overflow-x: hidden;
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vh, 26px);
  padding: clamp(14px, 3vh, 34px) 16px;
  background: radial-gradient(120% 90% at 50% 6%, #2a2119 0%, #140f0d 45%, #08070a 100%);
}

/* ---------- heads-up display ---------- */

.hud {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hud-item { display: flex; align-items: baseline; gap: 7px; }
.hud-item b { color: var(--gold); font-weight: 600; letter-spacing: .08em; }
.hud-item i { font-style: normal; color: #6d6459; font-size: 10px; }
.hud-btn {
  font: inherit;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #6d6459;
  background: transparent;
  border: 1px solid #3a332c;
  border-radius: 999px;
  padding: 5px 13px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.hud-btn[aria-pressed="true"] { color: var(--gold); border-color: var(--gold-dim); }
body.pedal-down #pedal { color: #ffd489; text-shadow: 0 0 12px rgba(255, 190, 120, .6); }

/* ---------- the instrument ---------- */

.piano {
  width: min(1120px, 96vw);
  position: relative;
  filter: drop-shadow(0 38px 55px rgba(0, 0, 0, .72));
}

.piano-top {
  position: relative;
  height: clamp(105px, 16vw, 210px);
  border-radius: 14px 14px 0 0;
  overflow: hidden;
}
.piano-top > * { position: absolute; inset: 0; }

/* soundboard and strings, seen through the open lid */

.piano-top .soundboard {
  background:
    repeating-linear-gradient(91deg, rgba(0, 0, 0, .12) 0 2px, rgba(255, 255, 255, .025) 2px 8px),
    linear-gradient(118deg, #3b2614 0%, #6d4a27 38%, #815a32 58%, #402917 100%);
}

.piano-top .strings { opacity: .68; }
.piano-top .strings-bass {
  right: 58%;
  background: repeating-linear-gradient(96deg,
    rgba(206, 150, 80, .85) 0 2px,
    rgba(0, 0, 0, .42) 2px 5px,
    transparent 5px 13px);
}
.piano-top .strings-treble {
  left: 42%;
  background: repeating-linear-gradient(93deg,
    rgba(198, 200, 210, .8) 0 1px,
    rgba(0, 0, 0, .38) 1px 3px,
    transparent 3px 8px);
}

.piano-top .harp-brace {
  top: 62%;
  bottom: auto;
  left: 3%;
  right: 3%;
  height: clamp(5px, .85vw, 10px);
  border-radius: 999px;
  background: linear-gradient(180deg, #c9ab74 0%, #94743c 45%, #55401a 100%);
  box-shadow: 0 5px 12px rgba(0, 0, 0, .7);
  opacity: .75;
}

/* The inside of a piano is a dark box. Without this the strings read as a
   flat gold panel instead of something sitting under a raised lid. */
.piano-top .harp-shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .85) 0%, rgba(0, 0, 0, .28) 40%, rgba(0, 0, 0, .75) 100%),
    radial-gradient(120% 75% at 50% 100%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, .7) 100%);
}

/* The lid. Both wedges are percentage clip-paths, so the gold rim stays
   perfectly aligned with the lid edge at any size. drop-shadow follows the
   clipped shape, which casts the lid edge down onto the strings. */
.piano-top .lid-rim {
  background: linear-gradient(100deg, #f7e2b2 0%, var(--gold) 42%, #6a4f24 100%);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 0 52%);
}
.piano-top .lid {
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 50%);
  filter: drop-shadow(0 5px 9px rgba(0, 0, 0, .85));
  background: linear-gradient(103deg,
    #000 0%, #16161c 16%, #050507 32%, #1d1d24 52%, #07070a 70%, #131318 86%, #000 100%);
}
.piano-top .lid-sheen {
  pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% 86%, 0 50%);
  background:
    linear-gradient(103deg, transparent 0 42%, rgba(255, 255, 255, .2) 51%, transparent 61%),
    linear-gradient(180deg, rgba(255, 255, 255, .12), transparent 60%);
}

/* ---------- case, fallboard, felt ---------- */

.case {
  position: relative;
  border-radius: 0 0 12px 12px;
  padding: 0 var(--pad) clamp(10px, 1.6vw, 20px);
  background: linear-gradient(180deg, #17171b 0%, #0c0c0f 55%, #08080a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

.fallboard {
  height: clamp(26px, 4vw, 52px);
  margin: 0 calc(-1 * var(--pad));
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #1e1e23 0%, #0e0e12 60%, #050506 100%);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .06), inset 0 -6px 10px rgba(0, 0, 0, .6);
}

.brand {
  font-family: Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
  font-size: clamp(11px, 1.5vw, 19px);
  letter-spacing: clamp(3px, .6vw, 8px);
  text-transform: uppercase;
  background: linear-gradient(180deg, #f8e4b5, var(--gold) 50%, #86672f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.felt {
  position: relative;
  z-index: 4;
  height: clamp(5px, .8vw, 9px);
  margin: 0 calc(-1 * var(--pad));
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #a5182c, var(--felt) 55%, #480a12);
  box-shadow: 0 3px 6px rgba(0, 0, 0, .65);
}

/* ---------- keys ---------- */

.keybed {
  perspective: 900px;
  padding-top: clamp(6px, 1vw, 12px);
}

.keys {
  position: relative;
  display: flex;
  height: clamp(105px, 15vw, 180px);
  transform: rotateX(6deg);
  transform-origin: top center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.key {
  transform-origin: top center;   /* keys pivot on the balance rail */
  transition: transform 60ms ease-out, background 60ms, box-shadow 60ms;
  cursor: pointer;
}

.key-white {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-left: 1px solid rgba(60, 50, 40, .22);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, #fdfcf9 0%, #fffffe 8%, #f7f4ed 72%, #e6e0d3 100%);
  box-shadow:
    inset -4px 0 5px -3px rgba(0, 0, 0, .3),
    inset 1px 0 0 rgba(255, 255, 255, .95),
    inset 0 -8px 10px -6px rgba(0, 0, 0, .18),
    0 8px 10px rgba(0, 0, 0, .45);
}
.key-white:first-child { border-left: 0; }
.key-white.is-down {
  transform: rotateX(4.5deg);
  background: linear-gradient(180deg, #ece6d9 0%, #e2dbcb 70%, #d2c9b6 100%);
  box-shadow:
    inset -4px 0 5px -3px rgba(0, 0, 0, .32),
    inset 0 6px 9px rgba(0, 0, 0, .22),
    0 2px 3px rgba(0, 0, 0, .5);
}

.key-black {
  position: absolute;   /* left/width are set in JS as percentages */
  top: 0;
  height: 62%;
  z-index: 3;
  border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, #34343a 0%, #17171c 20%, #101014 70%, #050506 100%);
  box-shadow:
    0 10px 12px rgba(0, 0, 0, .6),
    inset 0 -4px 0 rgba(255, 255, 255, .05),
    inset 1.5px 0 1px rgba(255, 255, 255, .14),
    inset -1.5px 0 1px rgba(0, 0, 0, .6);
}
.key-black.is-down {
  transform: rotateX(5.5deg);
  background: linear-gradient(180deg, #46464e 0%, #202027 30%, #101015 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .65), inset 0 5px 8px rgba(0, 0, 0, .5);
}

/* Auto-play uses its own class so a key lit by the piece and a key you are
   holding cannot cancel each other out. */
.key-white.is-playing {
  transform: rotateX(4.5deg);
  background: linear-gradient(180deg, #f4e6c8 0%, #ecdcb4 70%, #dccb9d 100%);
  box-shadow:
    inset -4px 0 5px -3px rgba(0, 0, 0, .32),
    inset 0 6px 9px rgba(0, 0, 0, .2),
    0 2px 3px rgba(0, 0, 0, .5);
}
.key-black.is-playing {
  transform: rotateX(5.5deg);
  background: linear-gradient(180deg, #5c5334 0%, #2e2a1c 30%, #14120c 100%);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .65), inset 0 5px 8px rgba(0, 0, 0, .5);
}

/* Marks the slice of the keyboard the computer keys reach. */
.typing-window {
  position: absolute;
  bottom: -8px;
  height: 3px;
  z-index: 6;
  pointer-events: none;
  border-radius: 3px;
  background: linear-gradient(90deg,
    rgba(217, 178, 106, 0), var(--gold) 10%, var(--gold) 90%, rgba(217, 178, 106, 0));
  box-shadow: 0 0 10px rgba(217, 178, 106, .45);
  opacity: .85;
  transition: left .18s ease, width .18s ease;
}

/* warm bloom on the felt above a struck key */
.key.is-down::before,
.key.is-playing::before {
  content: '';
  position: absolute;
  left: -60%;
  right: -60%;
  top: -16px;
  height: 24px;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 100%,
    rgba(255, 186, 110, .45), rgba(255, 186, 110, 0) 70%);
}

.key-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 9%;
  text-align: center;
  pointer-events: none;
  font: 600 clamp(8px, .78vw, 11px)/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #9b9182;
  transition: opacity .2s;
}
.key-black .key-label {
  bottom: 7%;
  color: #8c877e;
  font-size: clamp(7px, .68vw, 10px);
}
body:not(.show-labels) .key-label { opacity: 0; }

/* ---------- transport ---------- */

.transport {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid #2b251e;
  border-radius: 999px;
  background: linear-gradient(180deg, #16141199, #0d0b0999);
  font-size: 12px;
  color: #6d6459;
}

#piece {
  font: inherit;
  color: #d8cbb4;
  background: #1a1714;
  border: 1px solid #383026;
  border-radius: 7px;
  padding: 6px 10px;
  max-width: 210px;
  cursor: pointer;
}
#piece:focus-visible, .play-btn:focus-visible, #tempo:focus-visible {
  outline: 2px solid var(--gold-dim);
  outline-offset: 2px;
}

.play-btn {
  font: 600 12px/1 inherit;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #0d0b09;
  background: linear-gradient(180deg, #f0d49a, var(--gold) 60%, #b18f4c);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  min-width: 92px;
  cursor: pointer;
  transition: filter .15s;
}
.play-btn:hover { filter: brightness(1.08); }
.play-btn.is-playing {
  color: #d8cbb4;
  background: linear-gradient(180deg, #2a241d, #1a1613);
  box-shadow: inset 0 0 0 1px #3d3427;
}

.tempo {
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
}
.tempo b { color: var(--gold); font-size: 11px; min-width: 34px; letter-spacing: 0; }

#tempo {
  -webkit-appearance: none;
  appearance: none;
  width: 92px;
  height: 3px;
  border-radius: 999px;
  background: #383026;
  cursor: pointer;
}
#tempo::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
#tempo::-moz-range-thumb {
  width: 13px;
  height: 13px;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
}

.progress {
  width: clamp(80px, 16vw, 170px);
  height: 3px;
  border-radius: 999px;
  background: #2b251e;
  overflow: hidden;
}
.progress-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width .1s linear;
}

.time {
  font: 500 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #6d6459;
  min-width: 74px;
  text-align: right;
}

/* ---------- hint and legend ---------- */

.hint {
  margin: 0;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #6d6459;
  transition: opacity .6s;
}
body.started .hint { opacity: 0; }

.legend {
  display: grid;
  gap: 7px;
  font-size: 12px;
  color: #6d6459;
}
.legend-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.legend-tag {
  width: 96px;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #514a41;
}
.legend em {
  font-style: normal;
  color: #4d4740;
  margin: 0 10px 0 3px;
}
kbd {
  min-width: 21px;
  padding: 4px 6px;
  text-align: center;
  font: 600 10px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #c9bda9;
  background: #1a1815;
  border: 1px solid #322c25;
  border-bottom-color: #241f19;
  border-radius: 4px;
}

/* ---------- adaptations ---------- */

@media (max-width: 620px) {
  .legend-tag { width: 100%; }
  .transport { gap: 10px; padding: 10px 12px; border-radius: 18px; }
  .time { min-width: 0; }
  .keys { height: clamp(96px, 26vw, 150px); }
  .hud { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .key, .hint, .hud-btn, .key-label, .typing-window, .progress-fill { transition: none; }
  .keys { transform: none; }
  .key.is-down, .key.is-playing { transform: none; }
}