/* Neuriosity — Sound Sequence playfield.
   Shared chrome lives in ../_shared/game-kit.css */

/* A class rather than [hidden], because the blocks below set display and a
   class beats the user-agent's [hidden] rule. */
.is-hidden { display: none !important; }

/* ---------- sound check ---------- */

.ss-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 2);
  flex: 1 1 0;
  min-height: 0;
  width: min(100%, calc(var(--gu) * 72));
  padding: calc(var(--gu) * 2);
  text-align: center;
}

.ss-check p {
  margin: 0;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 3);
  line-height: 1.4;
}

.ss-test,
.ss-go {
  min-height: max(46px, calc(var(--gu) * 10));
  padding: 0 calc(var(--gu) * 3.5);
  font: inherit;
  font-size: calc(var(--gu) * 3);
  font-weight: 800;
  border-radius: 999px;
  cursor: pointer;
}

.ss-test {
  color: #7b1f4b;
  background: #fff;
  border: calc(var(--gu) * 0.36) solid #7b1f4b;
}

.ss-go {
  color: #fff;
  background: #7b1f4b;
  border: calc(var(--gu) * 0.36) solid #7b1f4b;
}

.ss-go:disabled {
  color: rgba(255, 255, 255, 0.75);
  background: #b58aa0;
  border-color: #b58aa0;
  cursor: default;
}

.ss-warn { color: var(--coral, #f15f6d) !important; font-weight: 700; }

/* ---------- playing ---------- */

.ss-play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(var(--gu) * 2.4);
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
}

.ss-band {
  margin: 0;
  color: var(--ink-soft, #526b8e);
  font-size: calc(var(--gu) * 3.4);
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ss-band.is-turn { color: #7b1f4b; }

.ss-dots { display: flex; justify-content: center; }

/* The pads take the height the round leaves them rather than a fixed slab,
   so the play area does not float in an empty frame. */
.ss-pads {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--gu) * 2);
  flex: 1 1 auto;
  width: min(100%, calc(var(--gu) * 76));
  min-height: max(56px, calc(var(--gu) * 18));
  max-height: calc(var(--gu) * 46);
}

.ss-pad {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  min-height: max(52px, calc(var(--gu) * 16));
  padding: calc(var(--gu) * 1.4);
  background: #fff;
  border: calc(var(--gu) * 0.34) solid rgba(123, 31, 75, 0.28);
  border-radius: calc(var(--gu) * 2.2);
  cursor: pointer;
  transition: transform 100ms ease, background 100ms ease, border-color 100ms ease;
}

/* The bar height is the only cue to which pad is which: low on the left,
   high on the right, matching the pitches. */
.ss-bar {
  display: block;
  width: 58%;
  height: var(--h, 40%);
  background: #7b1f4b;
  border-radius: calc(var(--gu) * 0.8);
  opacity: 0.85;
}

.ss-pad:hover { border-color: rgba(123, 31, 75, 0.7); }
.ss-pad:active { transform: scale(0.96); }

.ss-pad.is-hit {
  background: rgba(123, 31, 75, 0.12);
  border-color: #7b1f4b;
}

.ss-pad:focus-visible,
.ss-test:focus-visible,
.ss-go:focus-visible {
  outline: calc(var(--gu) * 0.5) solid #7b1f4b;
  outline-offset: calc(var(--gu) * 0.3);
}

/* While the sequence plays the pads are visibly out of action — and they do
   NOT light in time with the notes, which is what keeps this an ear test
   rather than a second pattern-of-flashes game. */
.ss-pads.is-dark { opacity: 0.4; pointer-events: none; }

.ss-pads.is-wrong .ss-pad {
  border-color: var(--coral, #f15f6d);
  background: rgba(241, 95, 109, 0.08);
}

@media (prefers-reduced-motion: reduce) {
  .ss-pad { transition: none; }
}