@import url('../global.css');

:root {
  --title-color: var(--color-rhythmtap);
  --rhythmtap-line-position: 78%;
  --rhythmtap-lane-gap: 3px;
  --rhythmtap-note-size: clamp(2.1rem, 8vw, 3.75rem);
  --rhythmtap-track-bottom: 3.5rem;
  --rhythmtap-judge-zone-height: clamp(2.75rem, 8vw, 4rem);
  --rhythmtap-progress-height: 0.25rem;
  --rhythmtap-lane-1: #a78bfa;
  --rhythmtap-lane-2: #60a5fa;
  --rhythmtap-lane-3: #2dd4bf;
  --rhythmtap-lane-4: #f472b6;
  --rhythmtap-rail: #5a3a24;
  --rhythmtap-rail-dark: #3a2416;
  --rhythmtap-panel: #232628;
  --rhythmtap-panel-dark: #17191a;
  --rhythmtap-screw: #0e0f10;
}

.rhythmtap-area {
  width: min(100%, 42rem);
}

.rhythmtap-board[data-visual-theme='arcade'] {
  --rhythmtap-rail: #7a1b5e;
  --rhythmtap-rail-dark: #3a0f34;
  --rhythmtap-panel: #2a0e26;
  --rhythmtap-panel-dark: #170714;
  --rhythmtap-screw: #0c0210;
}

.rhythmtap-board[data-visual-theme='midnight'] {
  --rhythmtap-rail: #16283b;
  --rhythmtap-rail-dark: #0b1d3a;
  --rhythmtap-panel: #0e1a2a;
  --rhythmtap-panel-dark: #050c1a;
  --rhythmtap-screw: #030811;
}

.rhythmtap-board[data-visual-theme='daylight'] {
  --rhythmtap-rail: #7c3aed;
  --rhythmtap-rail-dark: #4c2f8a;
  --rhythmtap-panel: #2a1a4d;
  --rhythmtap-panel-dark: #1c1136;
  --rhythmtap-screw: #120b26;
}

.rhythmtap-board[data-visual-theme='amber'] {
  --rhythmtap-rail: #7a4b12;
  --rhythmtap-rail-dark: #3d2408;
  --rhythmtap-panel: #2c1a06;
  --rhythmtap-panel-dark: #1a1004;
  --rhythmtap-screw: #0d0702;
}

/* A rack-mounted synth console: brushed-steel faceplate framed by a warm
   walnut rail, so the lanes read as illuminated key channels rather than a
   flat neon grid. */
.rhythmtap-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--rhythmtap-lane-gap);
  min-height: clamp(24rem, 70vh, 38rem);
  padding: var(--spacing-sm) var(--spacing-xs);
  overflow: hidden;
  background:
    repeating-linear-gradient(
      100deg,
      rgb(255 255 255 / 3%) 0,
      rgb(255 255 255 / 3%) 1px,
      transparent 1px,
      transparent 3px
    ),
    radial-gradient(
      circle at 50% 78%,
      color-mix(in srgb, var(--accent) 14%, transparent),
      transparent 30%
    ),
    linear-gradient(180deg, var(--rhythmtap-panel), var(--rhythmtap-panel-dark) 60%);
  border: 0.6rem solid var(--rhythmtap-rail);
  border-radius: var(--border-radius-lg);
  box-shadow:
    inset 0 0 0 2px var(--rhythmtap-rail-dark),
    inset 0 0 3rem rgb(0 0 0 / 45%),
    0 1rem 3rem rgb(0 0 0 / 35%);
}

.rhythmtap-board::before,
.rhythmtap-board::after {
  content: '';
  position: absolute;
  z-index: 5;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #7a7f83, var(--rhythmtap-screw));
}

.rhythmtap-board::before {
  top: 0.35rem;
  left: 0.35rem;
}

.rhythmtap-board::after {
  right: 0.35rem;
  bottom: 0.35rem;
}

.rhythmtap-lane {
  position: relative;
  z-index: 1;
  display: flex;
  min-width: 0;
  min-height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  color: #f2f2f2;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--lane-color) 16%, var(--rhythmtap-panel)),
    var(--rhythmtap-panel-dark) 82%
  );
  border: 1px solid color-mix(in srgb, var(--lane-color) 30%, #000 45%);
  border-radius: var(--border-radius-md);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 6%),
    inset 0 0 2rem color-mix(in srgb, var(--lane-color) 6%, transparent);
  touch-action: manipulation;
  user-select: none;
}

.rhythmtap-lane--1 {
  --lane-color: var(--rhythmtap-lane-1);
}

.rhythmtap-lane--2 {
  --lane-color: var(--rhythmtap-lane-2);
}

.rhythmtap-lane--3 {
  --lane-color: var(--rhythmtap-lane-3);
}

.rhythmtap-lane--4 {
  --lane-color: var(--rhythmtap-lane-4);
}

.rhythmtap-lane:active {
  background: color-mix(in srgb, var(--lane-color) 26%, var(--surface-2));
}

.rhythmtap-lane.is-hit {
  background: color-mix(in srgb, var(--lane-color) 30%, var(--surface-2));
  border-color: color-mix(in srgb, white 72%, var(--lane-color));
  box-shadow:
    inset 0 0 2rem color-mix(in srgb, var(--lane-color) 22%, transparent),
    0 0 1rem color-mix(in srgb, var(--lane-color) 42%, transparent);
}

.rhythmtap-lane.is-miss {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
}

.rhythmtap-track {
  position: absolute;
  inset: 0 0 var(--rhythmtap-track-bottom);
}

.rhythmtap-note {
  position: absolute;
  left: 50%;
  width: var(--rhythmtap-note-size);
  height: var(--rhythmtap-note-size);
  transform: translate(-50%, -50%);
  background: var(--lane-color);
  border: 2px solid color-mix(in srgb, white 70%, var(--lane-color));
  border-radius: 0.7rem;
  box-shadow: 0 0 1rem color-mix(in srgb, var(--lane-color) 70%, transparent);
  transition: box-shadow 80ms linear;
}

.rhythmtap-note.is-near {
  box-shadow: 0 0 1.5rem color-mix(in srgb, white 70%, var(--lane-color));
  transform: translate(-50%, -50%) scale(1.12);
}

.rhythmtap-note.is-in-window {
  border-color: color-mix(in srgb, white 90%, var(--lane-color));
}

.rhythmtap-key {
  position: relative;
  z-index: 2;
  display: grid;
  width: 100%;
  min-height: var(--rhythmtap-track-bottom);
  margin: 0 0.15rem 0.15rem;
  place-items: center;
  color: color-mix(in srgb, var(--lane-color) 55%, white 40%);
  background: linear-gradient(180deg, #34383b, #1c1e20 88%);
  border-top: 1px solid rgb(255 255 255 / 10%);
  border-radius: 0 0 var(--border-radius-sm) var(--border-radius-sm);
  box-shadow: inset 0 0 0.75rem color-mix(in srgb, var(--lane-color) 18%, transparent);
  font-size: var(--font-size-lg);
  font-weight: 800;
  letter-spacing: 0.12em;
  text-shadow: 0 0 0.6rem color-mix(in srgb, var(--lane-color) 70%, transparent);
}

.rhythmtap-judgement-line {
  position: absolute;
  z-index: 3;
  top: var(--rhythmtap-line-position);
  right: var(--spacing-xs);
  left: var(--spacing-xs);
  height: 0.2rem;
  pointer-events: none;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 0 0.75rem color-mix(in srgb, var(--accent) 70%, transparent);
}

.rhythmtap-judgement-zone {
  position: absolute;
  z-index: 2;
  top: calc(var(--rhythmtap-line-position) - var(--rhythmtap-judge-zone-height) / 2);
  right: var(--spacing-xs);
  left: var(--spacing-xs);
  height: var(--rhythmtap-judge-zone-height);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb, var(--accent) 10%, transparent) 50%,
    transparent
  );
  border-top: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}

.rhythmtap-progress {
  position: absolute;
  z-index: 4;
  top: var(--spacing-xs);
  right: var(--spacing-sm);
  left: var(--spacing-sm);
  height: var(--rhythmtap-progress-height);
  overflow: hidden;
  pointer-events: none;
  background: color-mix(in srgb, var(--surface-3) 80%, transparent);
  border-radius: 999px;
}

.rhythmtap-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: linear-gradient(90deg, var(--rhythmtap-lane-1), var(--accent));
  border-radius: inherit;
  transition: transform 120ms linear;
}

.rhythmtap-feedback {
  position: absolute;
  z-index: 3;
  top: calc(var(--rhythmtap-line-position) - 3.5rem);
  right: 0;
  left: 0;
  min-height: 2rem;
  color: var(--text-color);
  font-size: var(--font-size-lg);
  font-weight: 800;
  text-align: center;
  pointer-events: none;
}

.rhythmtap-feedback.is-perfect {
  color: var(--success);
}

.rhythmtap-feedback.is-good {
  color: var(--color-rhythmtap);
}

.rhythmtap-feedback.is-miss {
  color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
  .rhythmtap-progress-fill {
    transition: none;
  }
}