:root {
  color-scheme: dark;
  color: #fff3fc;
  background: #100820;
  font-family: ui-monospace, monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: radial-gradient(ellipse at 50% 0%, #3b1559, transparent 64%); }
main {
  --arrow: clamp(2.5rem, 13vw, 4rem);
  width: min(100% - 1.25rem, 34rem);
  min-height: 24rem;
  height: 100svh;
  margin: auto;
  padding: .65rem 0 max(.65rem, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'life life life' 'stage stage stage' 'controls pads stats';
  gap: .65rem;
}
.song-info { display: none; grid-area: song; }
h1 { margin: 0; font-size: clamp(1.6rem, 7vw, 2.45rem); line-height: 1; letter-spacing: -.05em; }
h1 span, .wordmark span { color: #ff8ccf; }
.artist { margin: .35rem 0 0; color: #ebc5ed; font-size: .74rem; }
.wordmark { display: inline-block; margin-bottom: 1.1rem; color: #fff3fc; text-decoration: none; font-weight: 800; }
.stats { grid-area: stats; align-self: end; text-align: right; display: grid; gap: .45rem; font-size: .82rem; }
.narrow-title { margin: 0; color: #ffd4f1; font-size: .69rem; line-height: 1.2; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.caption { display: block; color: #e6bee5; font-size: .62rem; letter-spacing: .12em; margin-bottom: .16rem; }
output { font-weight: 800; font-variant-numeric: tabular-nums; }
.life-stat { grid-area: life; display: flex; align-items: center; gap: .5rem; }
.life-stat .caption { margin: 0; }
#life {
  --life: 65%;
  display: flex;
  flex: 1;
  height: .72rem;
  border: 1px solid #9b76b3;
  border-radius: .3rem;
  overflow: hidden;
  background: #321f45;
}
.life-fill { width: var(--life); background: linear-gradient(90deg,#da6cf8,#9bffc1); }
.stage {
  grid-area: stage;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #8967b1;
  border-radius: .55rem;
  background: repeating-linear-gradient(90deg, #100c27 0, #100c27 calc(25% - 1px), #483168 calc(25% - 1px), #483168 25%);
  box-shadow: 0 0 2.6rem #3c146e90;
}
.receptors {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: calc(var(--arrow) + .8rem);
  border-bottom: 1px solid #9166c6;
  background: linear-gradient(180deg,#4b286cba,#2317395e);
}
.receptors div { display: grid; place-items: center; }
.left { --turn: 90deg; }
.down { --turn: 0deg; }
.up { --turn: 180deg; }
.right { --turn: -90deg; }
.arrow {
  display: block;
  width: var(--arrow);
  height: var(--arrow);
  position: relative;
  z-index: 1;
  transform: rotate(var(--turn));
  background: url(/ddr-sprites.png) 0 0 / 200% 100% no-repeat;
}
.receptors .arrow { background-position: 100% 0; opacity: .8; }
.receptors .pressed .arrow { background-position: 0 0; filter: brightness(1.7); opacity: 1; }
.note { position: absolute; top: 0; width: 25%; display: grid; justify-items: center; }
.note.quarter { --highlight: #ff9694; --ink: #ff323d; --shade: #c50c27; }
.note.eighth { --highlight: #a0daff; --ink: #309dff; --shade: #1451db; }
.note.sixteenth { --highlight: #fff7a1; --ink: #ffdb33; --shade: #e59500; }
.note .arrow {
  background: linear-gradient(145deg, var(--highlight), var(--ink) 50%, var(--shade));
  mask: url(/ddr-sprites.png) 0 0 / 200% 100% no-repeat;
}
.note .arrow::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url(/ddr-sprites.png) 0 0 / 200% 100% no-repeat;
  filter: grayscale(1) brightness(1.25);
  mix-blend-mode: multiply;
  opacity: .55;
}
.tail { position: absolute; top: calc(var(--arrow) / 2); width: 25%; border: 1px solid #b5ffc2; border-radius: .25rem; background: linear-gradient(90deg,#157039,#8aff9c,#157039); }
#judgment { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--arrow) + 1.15rem); text-align: center; margin: 0; color: #ffe692; font-weight: 900; font-size: 1.1rem; text-shadow: 0 2px 8px #1a0a32; pointer-events: none; }
#judgment.bad { color: #ff9fb3; }
.current-combo { position: absolute; z-index: 3; bottom: .45rem; left: 50%; transform: translateX(-50%); min-width: 4.5rem; padding: .3rem .55rem; border: 1px solid #946cac; border-radius: .35rem; background: #201331e8; color: #fff3fc; text-align: center; pointer-events: none; }
.current-combo .caption { margin: 0; }
#combo { font-size: 1.18rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.overlay { position: absolute; inset: 0; display: grid; overflow: auto; z-index: 4; place-items: safe center; padding: .55rem; background: #110924ae; }
.card { width: min(100%,19rem); padding: 1.15rem; border: 1px solid #ad7fc4; border-radius: .55rem; background: #281638; text-align: center; }
.card h2 { margin: 0; font-size: 1.5rem; }
.card p { color: #edcee8; font: .82rem/1.45 system-ui, sans-serif; }
.setup { display: grid; gap: .55rem; text-align: left; }
.setup label { display: block; font-size: .7rem; color: #edcee8; }
.setup select { display: block; margin-top: .25rem; }
button, select { border: 1px solid #9369ac; border-radius: .35rem; background: #2f1b48; color: #fff3fc; font: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #a8faff; outline-offset: 2px; }
button:disabled { opacity: .62; cursor: default; }
.card select, .primary { width: 100%; padding: .5rem; }
.primary { margin-top: .75rem; background: #ff9bda; color: #28122e; font-weight: 900; }
.secondary { margin-top: .45rem; padding: .4rem .6rem; font-size: .75rem; }
.pads {
  grid-area: pads;
  place-self: end center;
  display: grid;
  grid-template-columns: repeat(3, var(--pad-size));
  grid-template-rows: repeat(2, var(--pad-size));
  grid-template-areas: '. up .' 'left down right';
  gap: .25rem;
  touch-action: none;
}
.pads button { padding: 0; font: 800 1.35rem/1 system-ui, sans-serif; touch-action: none; user-select: none; }
.pads .left { grid-area: left; }
.pads .down { grid-area: down; }
.pads .up { grid-area: up; }
.pads .right { grid-area: right; }
.pads button.pressed { background: #ad69be; color: #170a29; }
.controls { grid-area: controls; place-self: end start; color: #e3bedc; font-size: .65rem; }
.controls span { display: none; }
.controls button { min-height: 2.75rem; padding: .25rem .55rem; }

@media (width < 46rem) {
  main {
    --pad-base: clamp(2.75rem, 12vw, 3.4rem);
    --pad-size: calc(1.3 * var(--pad-base));
    column-gap: .25rem;
  }
  .pads {
    position: relative;
    z-index: 1;
    margin-top: calc(2 * (var(--pad-base) - var(--pad-size)));
  }
  .pads button { font-size: 1.75rem; }
  .current-combo { left: auto; right: .45rem; transform: none; }
}

@media (min-width: 46rem) {
  main {
    --pad-size: clamp(2.75rem, 4vw, 3.5rem);
    width: min(100% - 2rem, 64rem);
    grid-template-columns: minmax(8.5rem, 1fr) 1rem minmax(0, 28rem) 1.45rem 1rem minmax(calc(3 * var(--pad-size) + .5rem), 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: 'song . stage life . .' 'stats . stage life . pads' 'controls . stage life . pads';
    column-gap: 0;
    row-gap: 1rem;
    padding: 1rem 0;
  }
  .song-info { display: block; overflow-wrap: anywhere; }
  .narrow-title { display: none; }
  .stats { align-self: start; text-align: left; font-size: 1.15rem; gap: 1rem; }
  .life-stat { position: relative; align-self: center; height: 60%; flex-direction: column; align-items: stretch; text-align: center; }
  .life-stat .caption { position: absolute; bottom: calc(100% + .35rem); left: .25rem; white-space: nowrap; }
  #life { flex-direction: column; justify-content: flex-end; width: 100%; height: auto; border-left: 0; border-radius: 0 .3rem .3rem 0; }
  .life-fill { width: 100%; height: var(--life); background: linear-gradient(0deg,#da6cf8,#9bffc1); }
  .pads { place-self: end end; }
  .controls { display: grid; gap: .6rem; line-height: 1.5; }
  .controls span { display: block; }
}