.rhythm-game {
  --rg-ink: #162034;
  --rg-gold: #f5d06b;
  --rg-pink: #e87992;
  color: #fff2dc;
  background: linear-gradient(145deg, #263047 0%, #141c2e 72%);
  border: 3px solid #111929;
  box-shadow: 0 0 0 2px #e8b85e, 0 18px 40px #0b1123a8;
  padding: 18px;
  width: min(100%, 560px);
  max-height: min(94vh, 720px);
  overflow: auto;
  font-family: ui-monospace, 'Courier New', monospace;
  user-select: none;
  box-sizing: border-box;
}

.rhythm-game *, .rhythm-game *::before, .rhythm-game *::after { box-sizing: border-box; }

.rhythm-game__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rhythm-game__eyebrow { color: var(--rg-gold); font-size: 11px; font-weight: 900; letter-spacing: .19em; }
.rhythm-game h2 { margin: 5px 0 3px; color: #fff9e9; font-size: clamp(20px, 4vw, 28px); line-height: 1.05; text-transform: uppercase; }
.rhythm-game__header p { margin: 0; color: #c5c6c9; font-size: 12px; line-height: 1.35; }
.rhythm-game__header strong { color: #fff0af; letter-spacing: .18em; }
.rhythm-game__sound { flex: 0 0 auto; border: 1px solid #8c95a2; background: #35445c; color: #fff3d5; padding: 8px 10px; font: 700 11px ui-monospace, monospace; cursor: pointer; }
.rhythm-game__sound:hover:not(:disabled), .rhythm-game__sound:focus-visible { background: #485e79; outline: 2px solid var(--rg-gold); outline-offset: 2px; }
.rhythm-game__sound:disabled { opacity: .55; cursor: default; }

.rhythm-game__stats { display: flex; justify-content: space-between; gap: 8px; margin-top: 16px; font-size: 11px; font-weight: 900; letter-spacing: .06em; color: #a9bbc3; }
.rhythm-game__stats b { color: #fff2c4; font-size: 14px; }
.rhythm-game__progress { height: 7px; margin: 7px 0 12px; border: 1px solid #7a6777; background: #10182c; overflow: hidden; }
.rhythm-game__progress > div { width: 0; height: 100%; background: linear-gradient(90deg, #e78591, #f3d47c); }

.rhythm-game__stage { height: min(40vh, 315px); min-height: 200px; display: flex; position: relative; overflow: hidden; border: 3px solid #0b1220; background: #121c30; }
.rhythm-game__stage::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 38px, #ffffff09 39px 40px); }
.rhythm-game__lane { position: relative; width: 25%; height: 100%; border-right: 2px solid #63708a; background: linear-gradient(180deg, #1e2941, #314158 78%, #202b43); }
.rhythm-game__lane:nth-of-type(odd) { background: linear-gradient(180deg, #24304b, #3a425b 78%, #29354e); }
.rhythm-game__lane:last-of-type { border-right: 0; }
.rhythm-game__lane--active { filter: brightness(1.35); }
.rhythm-game__lane > span { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); color: #a8b9c5; font-weight: 900; font-size: 18px; }
.rhythm-game__hitline { position: absolute; top: 78%; left: 0; width: 100%; height: 5px; z-index: 3; background: var(--rg-gold); box-shadow: 0 0 13px #ffe182, 0 0 2px #fff; pointer-events: none; }
.rhythm-game__note { position: absolute; left: 50%; transform: translate(-50%, -50%); width: 68%; height: 19px; z-index: 2; border: 3px solid #ffe39a; border-radius: 4px; background: linear-gradient(180deg, #f7a1ad, #d75983); box-shadow: 0 3px 0 #762e5f, 0 0 12px #e789a1a8; }
.rhythm-game__judgement { position: absolute; left: 50%; top: 23%; transform: translateX(-50%); z-index: 5; min-width: 1px; white-space: nowrap; font-weight: 900; font-size: clamp(17px, 5vw, 27px); text-align: center; text-shadow: 3px 3px 0 #141a29, -1px -1px 0 #141a29; pointer-events: none; }
.rhythm-game__judgement--good { color: #fbe78e; }
.rhythm-game__judgement--bad { color: #ff8c9e; }

.rhythm-game__controls { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 11px; }
.rhythm-game__button { min-height: 47px; border: 2px solid #0d1727; box-shadow: 0 4px 0 #121727; background: #d2b37d; color: #172235; font: 900 21px ui-monospace, monospace; cursor: pointer; touch-action: manipulation; }
.rhythm-game__button:nth-child(2), .rhythm-game__button:nth-child(3) { background: #e5c894; }
.rhythm-game__button:hover, .rhythm-game__button:focus-visible { background: #ffe3a9; outline: 2px solid #fff; outline-offset: 2px; }
.rhythm-game__button--active { transform: translateY(3px); box-shadow: 0 1px 0 #121727; background: #ffe9aa !important; }
.rhythm-game__hint { margin: 10px 0 0; color: #aeb8bd; font-size: 11px; text-align: center; }

@media (max-width: 520px) {
  .rhythm-game { padding: 12px; max-height: 96vh; }
  .rhythm-game__sound { padding: 7px; font-size: 10px; }
  .rhythm-game__stats { margin-top: 11px; font-size: 9px; }
  .rhythm-game__stats b { font-size: 12px; }
  .rhythm-game__stage { height: 31vh; min-height: 190px; }
  .rhythm-game__controls { gap: 5px; }
}