html, body {
  margin: 0;
  height: 100%;
  background: #0a0a0b;
  overflow: hidden;
  font-family: monospace;
  color: #222;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

:root {
  --white-w: 44px;
  --white-h: 200px;
  --black-w: 28px;
  --black-h: 120px;
  --door-w: 160px;
  --door-h: 294px;
  --lock-w: 70px;
  --lock-h: 84px;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: max(env(safe-area-inset-top), 12px) 0 max(env(safe-area-inset-bottom), 12px);
  box-sizing: border-box;
}

.keys {
  position: relative;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
  margin: 0 auto;
}

.key {
  width: var(--white-w);
  height: var(--white-h);
  background: #f2efe6;
  border: 1px solid #2a2a2c;
  border-radius: 0 0 3px 3px;
  margin-right: -1px;
  cursor: pointer;
  transition: background 0.08s ease;
  flex-shrink: 0;
}
.key:active, .key.down { background: #d9d5c8; }

.key.black {
  position: absolute;
  width: var(--black-w);
  height: var(--black-h);
  background: #111;
  border: 1px solid #000;
  border-radius: 0 0 3px 3px;
  z-index: 2;
}
.key.black:active, .key.black.down { background: #2a2a2a; }

.ball {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c8c3b2;
  box-shadow: inset -1px -1px 0 #6b6860;
  opacity: 0.5;
}

.door {
  position: relative;
  width: var(--door-w);
  height: var(--door-h);
  display: block;
  text-decoration: none;
  cursor: default;
  flex-shrink: 0;
}
.door.locked { pointer-events: none; }
.door.open   { pointer-events: auto; cursor: pointer; }

.door-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
}
.lock-svg {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--lock-w);
  height: var(--lock-h);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.door.open .lock-svg {
  opacity: 0;
  transform: translate(-50%, 40px) rotate(-18deg);
}
.door.open .lock-svg .shackle {
  transform-origin: 60px 28px;
  animation: unshackle 0.9s ease forwards;
}
@keyframes unshackle {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-110deg) translate(-4px, -2px); }
}
.door.open .door-svg {
  animation: door-breathe 1.6s ease;
}
@keyframes door-breathe {
  0%   { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)) brightness(1); }
  40%  { filter: drop-shadow(0 4px 24px rgba(200,169,106,0.5)) brightness(1.25); }
  100% { filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6)) brightness(1); }
}

/* Mobile portrait: 1 octave only (7 white + 5 black). Fills viewport width.
   Keys at bottom, door at top, vertical stack. JS detects matchMedia. */
@media (max-width: 720px) {
  :root {
    --white-w: calc((100vw - 16px) / 7);
    --white-h: min(28vh, 230px);
    --black-w: calc(((100vw - 16px) / 7) * 0.62);
    --black-h: min(17vh, 140px);
    --door-w: 140px;
    --door-h: 257px;
    --lock-w: 56px;
    --lock-h: 67px;
  }
}

/* Phone landscape — short height. Keep keys but smaller door. */
@media (max-height: 500px) and (orientation: landscape) {
  :root {
    --white-w: calc((100vw - 200px) / 14);
    --white-h: min(60vh, 180px);
    --black-w: calc(((100vw - 200px) / 14) * 0.62);
    --black-h: min(36vh, 110px);
    --door-w: 110px;
    --door-h: 202px;
    --lock-w: 44px;
    --lock-h: 53px;
  }
  .stage { flex-direction: row; align-items: center; justify-content: space-around; }
}