/* VOLT//SHIFT styles extracted from the former Leopard host. */
.sdvx-wrap {
  --sdvx-cyan: #2ef8ff;
  --sdvx-pink: #ff3bc8;
  --sdvx-violet: #9a64ff;
  --sdvx-orange: #ff7a1a;
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint style;
  background: #05050a;
  color: #f5f7ff;
  font-family: "Lucida Grande", Arial, sans-serif;
  user-select: none;
  touch-action: none;
}

.sdvx-wrap::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.025) 4px);
  mix-blend-mode: screen;
}

.sdvx-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.sdvx-hud {
  position: absolute;
  z-index: 8;
  top: 0;
  right: 0;
  left: 0;
  min-height: 55px;
  display: grid;
  grid-template-columns: minmax(120px, .75fr) minmax(155px, 1fr) 58px minmax(118px, .72fr) minmax(128px, .82fr) 92px 57px 34px;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid rgba(46,248,255,.28);
  background:
    linear-gradient(90deg, rgba(46,248,255,.08), transparent 30%, rgba(255,59,200,.08)),
    rgba(7,8,15,.94);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

.sdvx-brand b,
.sdvx-brand small,
.sdvx-track small,
.sdvx-track b,
.sdvx-track em,
.sdvx-score small,
.sdvx-score b,
.sdvx-chain b,
.sdvx-chain small {
  display: block;
}

.sdvx-brand b {
  font-size: 12px;
  font-style: italic;
  letter-spacing: 1px;
}

.sdvx-brand b span {
  color: var(--sdvx-cyan);
}

.sdvx-brand small {
  margin-top: 3px;
  color: #697086;
  font: bold 7px Monaco, monospace;
  letter-spacing: 1px;
}

.sdvx-track {
  min-width: 0;
}

.sdvx-track small,
.sdvx-score small,
.sdvx-rate small {
  color: #7d8499;
  font: bold 7px Monaco, monospace;
  letter-spacing: 1px;
}

.sdvx-track b {
  overflow: hidden;
  margin: 3px 0 2px;
  font-size: 10px;
  letter-spacing: 1px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdvx-track em {
  color: var(--sdvx-orange);
  font: normal 7px Monaco, monospace;
  white-space: nowrap;
}

.sdvx-chain {
  text-align: center;
}

.sdvx-chain b {
  color: var(--sdvx-pink);
  font: bold 20px/1 Monaco, monospace;
  text-shadow: 0 0 12px rgba(255,59,200,.65);
}

.sdvx-chain small {
  margin-top: 2px;
  color: #747b90;
  font: bold 7px Monaco, monospace;
}

.sdvx-score {
  text-align: right;
}

.sdvx-score b {
  margin-top: 3px;
  font: bold 19px/1 Monaco, monospace;
  letter-spacing: 1px;
}

.sdvx-rate {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 8px;
  align-items: center;
}

.sdvx-rate small {
  grid-column: 1 / -1;
}

.sdvx-rate > i {
  position: relative;
  height: 7px;
  overflow: hidden;
  display: block;
  background: #242636;
  transform: skew(-12deg);
}

.sdvx-rate u {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--sdvx-pink), var(--sdvx-violet), var(--sdvx-cyan));
  box-shadow: 0 0 8px var(--sdvx-cyan);
  transition: width .12s;
}

.sdvx-rate em {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: white;
}

.sdvx-rate > b {
  color: var(--sdvx-cyan);
  font: bold 10px Monaco, monospace;
}

.sdvx-render small,
.sdvx-render b {
  display: block;
  white-space: nowrap;
}

.sdvx-render small {
  color: #7d8499;
  font: bold 7px Monaco, monospace;
  letter-spacing: 1px;
}

.sdvx-render b {
  margin-top: 4px;
  color: var(--sdvx-cyan);
  font: bold 8px Monaco, monospace;
  text-shadow: 0 0 8px rgba(46,248,255,.42);
}

.sdvx-auto {
  position: relative;
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 4px;
  align-items: center;
  color: #9298aa;
  font: bold 7px Monaco, monospace;
  cursor: pointer;
}

.sdvx-auto input,
.sdvx-select-auto input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sdvx-auto i,
.sdvx-select-auto i {
  position: relative;
  width: 26px;
  height: 13px;
  display: block;
  border: 1px solid #4e5364;
  border-radius: 8px;
  background: #171923;
}

.sdvx-auto i::after,
.sdvx-select-auto i::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #71778a;
  content: "";
  transition: .15s;
}

.sdvx-auto input:checked + i,
.sdvx-select-auto input:checked + i {
  border-color: var(--sdvx-cyan);
  background: rgba(46,248,255,.15);
}

.sdvx-auto input:checked + i::after,
.sdvx-select-auto input:checked + i::after {
  left: 15px;
  background: var(--sdvx-cyan);
  box-shadow: 0 0 8px var(--sdvx-cyan);
}

.sdvx-pause {
  width: 30px;
  height: 27px;
  border: 1px solid #3d4252;
  border-radius: 3px;
  background: linear-gradient(#2a2d39, #151720);
  color: #b9bfce;
  font: bold 11px Monaco, monospace;
}

.sdvx-pause:disabled {
  opacity: .35;
}

.sdvx-feedback {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: 145px;
  width: 240px;
  text-align: center;
  transform: translateX(-50%) skew(-8deg);
  font: 900 25px Arial, sans-serif;
  font-style: italic;
  letter-spacing: 2px;
  pointer-events: none;
}

.sdvx-feedback.pure { color: var(--sdvx-cyan); text-shadow: 0 0 17px var(--sdvx-cyan); }
.sdvx-feedback.great { color: #d979ff; text-shadow: 0 0 17px var(--sdvx-violet); }
.sdvx-feedback.good { color: var(--sdvx-orange); text-shadow: 0 0 17px var(--sdvx-orange); }
.sdvx-feedback.miss { color: #ff4568; text-shadow: 0 0 17px #ff234e; }

.sdvx-feedback.flash {
  animation: sdvx-judge .36s ease-out;
}

@keyframes sdvx-judge {
  0% { opacity: 0; transform: translateX(-50%) scale(1.28) skew(-8deg); }
  24% { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) scale(1) skew(-8deg); }
}

.sdvx-deck {
  position: absolute;
  z-index: 9;
  right: 0;
  bottom: 0;
  left: 0;
  min-height: 108px;
  display: grid;
  grid-template-columns: 76px minmax(240px, 510px) 76px;
  justify-content: center;
  gap: 12px;
  padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.13);
  background:
    linear-gradient(130deg, rgba(46,248,255,.045), transparent 32%, rgba(255,59,200,.05)),
    rgba(8,9,16,.97);
  box-shadow: 0 -10px 30px rgba(0,0,0,.48);
}

.sdvx-deck.is-disabled .sdvx-keys,
.sdvx-deck.is-disabled .sdvx-dial {
  filter: saturate(.3);
  opacity: .64;
}

.sdvx-deck.lasers-disabled .sdvx-dial {
  filter: saturate(.45);
  opacity: .58;
}

.sdvx-keys {
  min-width: 0;
  display: grid;
  grid-template-rows: 34px 50px;
  gap: 7px;
}

.sdvx-fx-row,
.sdvx-bt-row {
  display: grid;
  gap: 7px;
}

.sdvx-fx-row { grid-template-columns: repeat(2, 1fr); }
.sdvx-bt-row { grid-template-columns: repeat(4, 1fr); }

.sdvx-fx-row button,
.sdvx-bt-row button {
  position: relative;
  min-width: 0;
  border: 1px solid rgba(255,255,255,.24);
  background: linear-gradient(#282b38, #11121a);
  color: #767d91;
  touch-action: none;
}

.sdvx-fx-row button {
  border-color: rgba(255,122,26,.5);
  background: linear-gradient(90deg, #321610, #181319 50%, #321610);
}

.sdvx-bt-row button {
  clip-path: polygon(5% 0, 100% 0, 95% 100%, 0 100%);
}

.sdvx-fx-row button span,
.sdvx-bt-row button span {
  position: absolute;
  bottom: 5px;
  left: 7px;
  font: bold 7px Monaco, monospace;
}

.sdvx-fx-row kbd,
.sdvx-bt-row kbd {
  position: absolute;
  top: 5px;
  right: 6px;
  min-width: 19px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 2px;
  background: rgba(255,255,255,.055);
  color: #cbd0df;
  font: bold 9px Monaco, monospace;
}

.sdvx-bt-row button.is-active {
  border-color: white;
  background: linear-gradient(#efffff, #27d5ee);
  color: #09141a;
  box-shadow: 0 0 17px var(--sdvx-cyan);
  transform: translateY(2px);
}

.sdvx-fx-row button.is-active {
  border-color: white;
  background: linear-gradient(#fff0cf, #ff6b1a);
  color: #1a0b05;
  box-shadow: 0 0 17px var(--sdvx-orange);
  transform: translateY(2px);
}

.sdvx-dial {
  --dial-angle: 0deg;
  position: relative;
  width: 68px;
  height: 68px;
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #171824;
  color: var(--sdvx-cyan);
  cursor: ew-resize;
  touch-action: none;
  box-shadow:
    inset 0 0 0 5px #0d0e16,
    inset 0 0 0 7px currentColor,
    0 6px 0 #030306,
    0 8px 18px #000;
}

.sdvx-dial-right {
  color: var(--sdvx-pink);
}

.sdvx-dial i {
  position: absolute;
  top: 7px;
  left: calc(50% - 2px);
  width: 4px;
  height: 23px;
  border-radius: 2px;
  background: currentColor;
  transform: rotate(var(--dial-angle));
  transform-origin: 2px 27px;
  box-shadow: 0 0 9px currentColor;
}

.sdvx-dial span {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  color: #656b7c;
  font: bold 6px Monaco, monospace;
  white-space: nowrap;
  transform: translateX(-50%);
}

.sdvx-overlay {
  position: absolute;
  z-index: 20;
  inset: 55px 0 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(4,4,10,.72);
  backdrop-filter: blur(7px);
}

.sdvx-select,
.sdvx-pause-card,
.sdvx-result {
  width: min(430px, 90%);
  max-height: 95%;
  overflow-y: auto;
  padding: 26px 30px;
  border: 1px solid rgba(255,255,255,.17);
  background:
    linear-gradient(145deg, rgba(46,248,255,.07), transparent 35%, rgba(255,59,200,.08)),
    rgba(11,12,20,.96);
  box-shadow: 0 20px 65px rgba(0,0,0,.65);
  text-align: center;
}

.sdvx-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--sdvx-cyan);
  font: bold 8px Monaco, monospace;
  letter-spacing: 2px;
}

.sdvx-select h1 {
  margin: 0;
  font-size: 37px;
  line-height: 1;
  font-style: italic;
  letter-spacing: -2px;
}

.sdvx-select h1 span {
  color: var(--sdvx-cyan);
}

.sdvx-select > p {
  margin: 12px auto 17px;
  color: #9aa0b3;
  font-size: 10px;
  line-height: 1.6;
}

.sdvx-difficulties {
  display: grid;
  gap: 6px;
}

.sdvx-difficulties button {
  min-height: 47px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.025);
  color: #8d93a5;
  text-align: left;
}

.sdvx-difficulties button > span {
  font: bold 9px Monaco, monospace;
  letter-spacing: 1px;
}

.sdvx-difficulties small {
  display: block;
  margin-top: 4px;
  color: #62697c;
  font-size: 7px;
  letter-spacing: 0;
}

.sdvx-difficulties b {
  color: #646b7e;
  font: bold 20px Monaco, monospace;
}

.sdvx-difficulties button.on {
  border-color: var(--sdvx-cyan);
  background: rgba(46,248,255,.075);
  color: var(--sdvx-cyan);
  box-shadow: inset 3px 0 var(--sdvx-cyan);
}

.sdvx-difficulties button.on b {
  color: var(--sdvx-cyan);
}

.sdvx-assists {
  margin: 12px auto 9px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.sdvx-select-auto {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 8px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.025);
  color: #a2a8ba;
  font: bold 8px Monaco, monospace;
  text-align: left;
}

.sdvx-select-auto span,
.sdvx-select-auto small {
  min-width: 0;
  display: block;
}

.sdvx-select-auto small {
  margin-top: 3px;
  color: #60677a;
  font-size: 6px;
}

.sdvx-select-auto em {
  color: var(--sdvx-cyan);
  font-style: normal;
}

.sdvx-start,
.sdvx-resume,
.sdvx-retry {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  border: 0;
  background: linear-gradient(105deg, var(--sdvx-cyan), #b4fdff);
  color: #071014;
  font-size: 11px;
  font-weight: bold;
  font-style: italic;
  letter-spacing: 1px;
  clip-path: polygon(0 0, 96% 0, 100% 28%, 100% 100%, 4% 100%, 0 72%);
}

.sdvx-key-guide {
  margin-top: 11px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px 11px;
  color: #71778a;
  font: bold 7px Monaco, monospace;
}

.sdvx-key-guide span {
  display: flex;
  gap: 3px;
  align-items: center;
}

.sdvx-key-guide kbd {
  min-width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 1px solid #3d4252;
  border-radius: 2px;
  background: #1a1c27;
  color: #bac1d2;
  font-size: 7px;
}

.sdvx-pause-card h2 {
  margin: 0 0 18px;
  font-size: 24px;
}

.sdvx-quit,
.sdvx-back {
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: #858b9d;
  font-size: 9px;
}

.sdvx-result > strong {
  display: block;
  color: white;
  font: 900 84px/.82 Arial, sans-serif;
  font-style: italic;
  text-shadow: 6px 0 var(--sdvx-pink), -6px 0 var(--sdvx-cyan);
}

.sdvx-result h2 {
  margin: 12px 0 4px;
  color: var(--sdvx-cyan);
  font: bold 10px Monaco, monospace;
  letter-spacing: 2px;
}

.sdvx-result-score {
  font: bold 27px Monaco, monospace;
  letter-spacing: 2px;
}

.sdvx-result-grid {
  margin: 15px 0 10px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-block: 1px solid rgba(255,255,255,.1);
}

.sdvx-result-grid span {
  padding: 10px 3px;
  color: #7e8599;
  font: bold 7px Monaco, monospace;
  border-right: 1px solid rgba(255,255,255,.07);
}

.sdvx-result-grid span:last-child {
  border-right: 0;
}

.sdvx-result-grid b {
  display: block;
  margin-top: 5px;
  color: white;
  font-size: 14px;
}

.sdvx-result > p {
  color: #7f8699;
  font: 8px Monaco, monospace;
}

.sdvx-result > p b {
  color: white;
}

.sdvx-rotate {
  display: none;
}

@media (max-width: 760px) {
  .sdvx-hud {
    grid-template-columns: 100px minmax(92px, 1fr) 44px 96px 30px;
    gap: 4px;
    padding-inline: 6px;
  }

  .sdvx-rate,
.sdvx-render,
.sdvx-auto {
    display: none;
  }

  .sdvx-deck {
    grid-template-columns: 62px minmax(210px, 1fr) 62px;
    gap: 7px;
    padding-inline: 7px;
  }

  .sdvx-dial {
    width: 58px;
    height: 58px;
  }

  .sdvx-dial i {
    height: 18px;
    transform-origin: 2px 22px;
  }
}

@media (max-height: 540px) and (orientation: landscape) {
  .sdvx-hud {
    min-height: 47px;
  }

  .sdvx-overlay {
    top: 47px;
  }

  .sdvx-select,
.sdvx-pause-card,
.sdvx-result {
    padding-block: 17px;
  }

  .sdvx-select h1 {
    font-size: 30px;
  }
}

@media (orientation: portrait) and (max-width: 700px) and (pointer: coarse) {
  .sdvx-wrap > *:not(.sdvx-rotate) {
    visibility: hidden;
  }

  .sdvx-rotate {
    position: absolute;
    z-index: 100;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    visibility: visible;
    background: radial-gradient(circle at 50% 42%, rgba(76,64,174,.27), transparent 38%), #05050a;
    color: white;
  }

  .sdvx-rotate b {
    margin: 14px 0 6px;
    font-size: 24px;
  }

  .sdvx-rotate span {
    color: #798095;
    font-size: 10px;
  }

  .sdvx-phone {
    position: relative;
    width: 72px;
    height: 72px;
  }

  .sdvx-phone i {
    position: absolute;
    top: 10px;
    left: 21px;
    width: 30px;
    height: 48px;
    border: 2px solid var(--sdvx-cyan);
    border-radius: 5px;
    box-shadow: 0 0 18px rgba(46,248,255,.24);
    animation: sdvx-rotate-phone 1.8s ease-in-out infinite;
  }

  .sdvx-phone::after {
    position: absolute;
    top: 0;
    right: -1px;
    color: var(--sdvx-pink);
    content: "↻";
    font-size: 28px;
    text-shadow: 0 0 12px var(--sdvx-pink);
  }
}

@keyframes sdvx-rotate-phone {
  0%, 22% { transform: rotate(0); }
  65%, 100% { transform: rotate(90deg); }
}
.svr-wrap {
  --svr-cyan: #20eaff;
  --svr-pink: #ff3aad;
  --svr-lime: #d8f7ff;
  --svr-mint: #77f4ff;
  --svr-panel: rgba(7, 10, 24, .94);
  --svr-deck-height: 74px;
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  contain: layout paint style;
  container-type: inline-size;
  color: #f4f8ff;
  background: #010207;
  font-family: Monaco, "Courier New", monospace;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.svr-wrap:focus {
  outline: none;
}

.svr-wrap::before,
.svr-wrap::after {
  content: "";
  position: absolute;
  z-index: 9;
  inset: 0;
  pointer-events: none;
}

.svr-wrap::before {
  background:
    radial-gradient(ellipse at 50% 43%, transparent 24%, rgba(0, 3, 12, .10) 63%, rgba(0, 1, 7, .44) 100%),
    linear-gradient(90deg, rgba(32, 234, 255, .035), transparent 13% 87%, rgba(255, 58, 173, .035));
}

.svr-wrap::after {
  opacity: .20;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(210, 245, 255, .025) 4px);
  mix-blend-mode: screen;
}

.svr-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #010207;
  touch-action: none;
}

.svr-hud {
  position: absolute;
  z-index: 12;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  display: flex;
  align-items: start;
  gap: 5px;
  padding: 5px 8px 0;
  pointer-events: none;
}

.svr-hud::before {
  display: none;
}

.svr-hud small {
  display: block;
  color: #91a28e;
  font-size: 5px;
  letter-spacing: 1px;
  line-height: 1.2;
}

.svr-select h1 span {
  color: var(--svr-lime);
}

.svr-track {
  width: 170px;
  flex: 0 0 170px;
  min-width: 0;
  height: 38px;
  padding: 5px 28px 4px 9px;
  border-top: 1px solid rgba(125,235,255,.52);
  border-left: 2px solid var(--svr-lime);
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background: linear-gradient(90deg, rgba(4,11,25,.94), rgba(6,12,25,.54), transparent);
}

.svr-track b {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  color: #fff;
  font-size: 8px;
  letter-spacing: .7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-track em {
  display: block;
  margin-top: 2px;
  color: #9cb1c8;
  font-size: 4px;
  font-style: normal;
}

.svr-progress {
  position: absolute;
  right: 24px;
  bottom: 1px;
  left: 9px;
  height: 2px;
  overflow: hidden;
  background: rgba(255,255,255,.09);
}

.svr-progress u {
  display: block;
  width: 0;
  height: 100%;
  background: linear-gradient(90deg, var(--svr-cyan), #fff, var(--svr-pink));
  box-shadow: 0 0 7px var(--svr-cyan);
}

.svr-score {
  width: 132px;
  margin-left: auto;
  flex: 0 0 132px;
  height: 38px;
  padding: 4px 8px 4px 20px;
  border-top: 1px solid rgba(125,235,255,.52);
  border-right: 2px solid var(--svr-lime);
  clip-path: polygon(18px 0, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(90deg, transparent, rgba(5,8,22,.68) 22%, rgba(5,8,22,.95));
  text-align: right;
}

.svr-score b {
  display: block;
  margin-top: 1px;
  color: #fff;
  font: italic 19px/.86 Monaco, monospace;
  letter-spacing: -1.5px;
  text-shadow: 0 0 10px rgba(186,255,69,.24);
}

.svr-score em {
  display: block;
  margin-top: 2px;
  color: var(--svr-lime);
  font: normal 5px Monaco, monospace;
}

.svr-render b {
  display: block;
  margin-top: 3px;
  color: var(--svr-mint);
  font-size: 6px;
  white-space: nowrap;
}

.svr-render,
.svr-laser-toggle,
.svr-pause {
  pointer-events: auto;
}

.svr-render {
  width: 68px;
  flex: 0 0 68px;
  margin-top: 4px;
  padding: 3px 4px;
  background: rgba(4,12,8,.72);
}

.svr-laser-toggle {
  width: 44px;
  flex: 0 0 44px;
}

.svr-pause {
  flex: 0 0 29px;
}

.svr-side-hud {
  position: absolute;
  z-index: 10;
  inset: 42px 0 var(--svr-deck-height);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease;
}

.svr-side-hud.is-visible {
  opacity: 1;
}

.svr-left-console {
  position: absolute;
  top: 13px;
  left: clamp(6px, 1.8vw, 12px);
  width: clamp(82px, 16vw, 104px);
}

.svr-side-difficulty {
  padding: 5px 7px;
  border-top: 2px solid var(--svr-diff-color);
  border-left: 1px solid color-mix(in srgb, var(--svr-diff-color) 55%, transparent);
  color: var(--svr-diff-color);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  background: linear-gradient(120deg, rgba(7,10,25,.94), rgba(7,10,25,.30));
}

.svr-side-difficulty[data-diff="novice"] { --svr-diff-color: #a57bff; }
.svr-side-difficulty[data-diff="advanced"] { --svr-diff-color: #ffb449; }
.svr-side-difficulty[data-diff="exhaust"] { --svr-diff-color: #ff4d73; }
.svr-side-difficulty[data-diff="maximum"] { --svr-diff-color: #baff45; }

.svr-side-difficulty > span {
  display: flex;
  margin-top: 2px;
  align-items: baseline;
  justify-content: space-between;
}

.svr-side-difficulty b {
  font: italic 900 20px/.9 "Arial Narrow", Arial, sans-serif;
  letter-spacing: -1px;
  text-shadow: 0 0 8px currentColor;
}

.svr-side-difficulty em {
  color: #f2f5ee;
  font: bold 6px Monaco, monospace;
}

.svr-play-values {
  display: grid;
  margin-top: 3px;
  grid-template-columns: .72fr 1.28fr;
  gap: 3px;
}

.svr-play-values > span {
  padding: 4px 5px;
  border-bottom: 1px solid rgba(186,255,69,.42);
  background: rgba(6,9,23,.72);
}

.svr-play-values small,
.svr-player-card small {
  display: block;
  color: #869885;
  font-size: 4px;
  letter-spacing: .5px;
}

.svr-play-values b {
  display: block;
  margin-top: 2px;
  color: #f4ffe7;
  font: bold 8px Monaco, monospace;
}

.svr-side-chain {
  position: absolute;
  top: 52%;
  left: calc(50% + clamp(58px, 12vw, 92px));
  color: #ecffe5;
  text-align: center;
  text-shadow: 0 2px 3px #020804, 0 0 12px rgba(186,255,69,.38);
  transform: translate(-4%, -50%);
}

.svr-side-chain small {
  display: block;
  color: var(--svr-lime);
  font: bold 6px Monaco, monospace;
  letter-spacing: 1.5px;
}

.svr-side-chain b {
  display: block;
  margin: 1px 0;
  color: #ffffff;
  font: italic 900 clamp(25px, 5vw, 36px)/.88 "Arial Narrow", Arial, sans-serif;
  letter-spacing: -2px;
}

.svr-side-chain:not(.is-active) b {
  color: rgba(225,239,220,.28);
  text-shadow: 0 2px 2px #000;
}

.svr-side-chain em {
  display: block;
  color: #91a58e;
  font: normal 5px Monaco, monospace;
}

.svr-rate-rail {
  position: absolute;
  top: 15%;
  right: clamp(6px, 1.8vw, 12px);
  width: 36px;
  height: 43%;
  border-right: 2px solid var(--svr-lime);
  color: var(--svr-lime);
  background: linear-gradient(90deg, transparent, rgba(6,9,24,.82));
}

.svr-rate-rail small {
  position: absolute;
  top: 5px;
  right: 5px;
  color: #adbeaa;
  font: 4px Monaco, monospace;
  letter-spacing: .7px;
  writing-mode: vertical-rl;
}

.svr-rate-rail i {
  position: absolute;
  top: 7px;
  bottom: 27px;
  left: 7px;
  width: 7px;
  overflow: hidden;
  border: 1px solid rgba(227,255,211,.38);
  background: rgba(255,255,255,.07);
}

.svr-rate-rail i u {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 70%;
  background: linear-gradient(0deg, #4ad6ff, var(--svr-cyan) 62%, #fff);
  box-shadow: 0 0 10px rgba(32,234,255,.75);
}

.svr-rate-rail > b {
  position: absolute;
  right: 4px;
  bottom: 6px;
  color: #f4ffe9;
  font: bold 7px Monaco, monospace;
}

.svr-player-card {
  position: absolute;
  top: 48%;
  left: clamp(6px, 1.8vw, 12px);
  width: clamp(78px, 15vw, 98px);
  padding: 7px 7px 8px;
  border-left: 2px solid var(--svr-lime);
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
  background: linear-gradient(110deg, rgba(7,10,25,.90), rgba(7,10,25,.24));
}

.svr-player-card b {
  display: block;
  margin: 3px 0;
  color: #efffe9;
  font: italic bold 12px/1 Arial, sans-serif;
}

.svr-player-card em {
  color: var(--svr-lime);
  font: normal 4px Monaco, monospace;
}

.svr-timing-monitor {
  display: block;
  margin-top: 5px;
  color: #8d9ab8;
  font-size: 4px;
  letter-spacing: .25px;
}

.svr-laser-toggle {
  display: flex;
  align-items: center;
  gap: 3px;
  color: #929ab2;
  font-size: 5px;
  cursor: pointer;
}

.svr-laser-toggle input,
.svr-assists input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.svr-laser-toggle i,
.svr-assists label > i {
  position: relative;
  display: block;
  width: 21px;
  height: 11px;
  flex: 0 0 auto;
  border: 1px solid #454b61;
  border-radius: 9px;
  background: #111522;
}

.svr-laser-toggle i::after,
.svr-assists label > i::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #777e90;
  transition: transform .15s ease, background .15s ease;
}

.svr-laser-toggle input:checked + i,
.svr-assists input:checked + i {
  border-color: rgba(186,255,69,.68);
  background: rgba(186,255,69,.16);
}

.svr-laser-toggle input:checked + i::after,
.svr-assists input:checked + i::after {
  background: #f2ffdc;
  box-shadow: 0 0 7px var(--svr-lime);
  transform: translateX(10px);
}

.svr-pause {
  width: 28px;
  height: 27px;
  border: 1px solid rgba(186,255,69,.28);
  border-radius: 2px;
  color: #d9edcf;
  background: rgba(186,255,69,.07);
  font: bold 8px Monaco, monospace;
}

.svr-pause:disabled { opacity: .35; }

.svr-feedback {
  position: absolute;
  z-index: 11;
  left: 50%;
  bottom: calc(var(--svr-deck-height) + 27px);
  color: #fff;
  font: italic bold 17px/1 Monaco, monospace;
  letter-spacing: 2px;
  text-shadow: 0 0 12px currentColor, 0 2px 2px #000;
  transform: translateX(-50%);
  pointer-events: none;
}

.svr-feedback.s-critical {
  color: #fff;
  text-shadow: 0 0 5px #fff, 0 0 18px #79edff, 0 2px 2px #000;
}
.svr-feedback.critical {
  color: #fff4b5;
  text-shadow: 0 0 5px #fff, 0 0 18px #ffd45c, 0 2px 2px #000;
}
.svr-feedback.near {
  color: #e5b2ff;
  text-shadow: 0 0 5px #fff, 0 0 18px #b66cff, 0 2px 2px #000;
}
.svr-feedback.error {
  color: #ff79a1;
  text-shadow: 0 0 5px #fff, 0 0 18px #ff3f72, 0 2px 2px #000;
}

.svr-feedback span {
  display: block;
  margin-top: 5px;
  color: #aab4ca;
  font: normal 6px/1 Monaco, monospace;
  letter-spacing: .5px;
}

.svr-feedback.flash {
  animation: svrJudge .24s ease-out;
}

.svr-deck {
  position: absolute;
  z-index: 13;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--svr-deck-height);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 56px;
  align-items: center;
  gap: 8px;
  padding: 4px 9px 6px;
  border-top: 2px solid rgba(160,235,255,.72);
  background:
    radial-gradient(ellipse at 18% 0, rgba(32,234,255,.25), transparent 23%),
    radial-gradient(ellipse at 82% 0, rgba(255,58,173,.22), transparent 23%),
    linear-gradient(115deg, rgba(70,211,255,.18), transparent 18%, transparent 82%, rgba(255,75,183,.16)),
    linear-gradient(#273249, #111827 25%, #050711 26%, #0a0e1c);
  box-shadow:
    0 -13px 34px rgba(0,0,0,.62),
    0 -2px 15px rgba(108,222,255,.13),
    inset 0 1px rgba(255,255,255,.22);
}

.svr-deck::before {
  content: "VOLT//SHIFT CONTROL DEVICE";
  position: absolute;
  top: -8px;
  left: 50%;
  padding: 2px 18px;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 100%, 0 100%);
  color: #dbf8ff;
  background: #26374a;
  font: bold 4px Monaco, monospace;
  letter-spacing: 1px;
  transform: translateX(-50%);
}

.svr-dial {
  position: relative;
  width: 51px;
  height: 51px;
  margin: auto;
  border: 2px solid rgba(235,255,224,.42);
  border-radius: 50%;
  background:
    radial-gradient(circle at 40% 32%, #edf7ff 0 5%, #68758b 8%, #171c2b 34%, #03050b 68%),
    #070a12;
  box-shadow: inset 0 0 0 4px #0a0e18, 0 0 0 1px #66758b, 0 7px 13px #000;
  transform: rotate(0deg);
  touch-action: none;
}

.svr-dial-left { color: var(--svr-cyan); }
.svr-dial-right { color: var(--svr-pink); }

.svr-dial::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .35;
  box-shadow: 0 0 10px currentColor;
}

.svr-dial i {
  position: absolute;
  top: 8px;
  left: calc(50% - 1px);
  width: 2px;
  height: 17px;
  border-radius: 2px;
  background: currentColor;
  box-shadow: 0 0 7px currentColor;
  transform: rotate(var(--svr-angle, 0deg));
  transform-origin: 50% 19px;
}

.svr-dial span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -12px;
  color: #9aab96;
  font-size: 5px;
  letter-spacing: 1px;
}

.svr-key-bank {
  min-width: 0;
  display: grid;
  grid-template-rows: 25px 31px;
  gap: 4px;
}

.svr-fx-row,
.svr-bt-row {
  display: grid;
  gap: 4px;
}

.svr-fx-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.svr-bt-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.svr-key-bank button {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(220,255,201,.28);
  border-radius: 1px;
  color: #9cac99;
  background: linear-gradient(#242b3b, #0a0d15);
  box-shadow: inset 0 1px rgba(255,255,255,.09), 0 3px 0 #020603;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  font: 6px Monaco, monospace;
  text-align: left;
  touch-action: none;
}

.svr-key-bank button::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  clip-path: inherit;
  background:
    linear-gradient(112deg, rgba(255,255,255,.14), transparent 28% 70%, rgba(125,225,255,.08)),
    repeating-linear-gradient(90deg, transparent 0 8px, rgba(255,255,255,.025) 9px);
  pointer-events: none;
}

.svr-key-bank button::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
  background: #fff;
  box-shadow: 0 0 16px #91f5ff, 0 0 30px #6a8cff;
  transform: translate(-50%, -50%) scale(.2);
  pointer-events: none;
}

.svr-fx-row button {
  border-color: rgba(255,221,95,.42);
  background: linear-gradient(rgba(81,70,24,.78), rgba(24,22,12,.96));
}

.svr-key-bank button span {
  position: absolute;
  z-index: 1;
  left: 7px;
  bottom: 5px;
}

.svr-key-bank button kbd {
  position: absolute;
  z-index: 1;
  top: 4px;
  right: 5px;
  min-width: 14px;
  padding: 2px;
  border: 1px solid rgba(255,255,255,.17);
  color: #d9e9d4;
  background: rgba(255,255,255,.04);
  font: 7px Monaco, monospace;
  text-align: center;
}

.svr-key-bank button.is-active {
  color: #0c1706;
  background: linear-gradient(#ffffff, #baff45);
  box-shadow: 0 0 18px rgba(186,255,69,.86), inset 0 0 12px #fff;
  transform: translateY(2px);
}

.svr-key-bank button.is-active::after {
  opacity: .9;
  animation: svrCabinetKeyBurst .18s ease-out both;
}

.svr-fx-row button.is-active {
  background: linear-gradient(#fff8dc, #ff7b36);
  box-shadow: 0 0 20px rgba(255,108,46,.88), inset 0 0 12px #fff5c3;
}

.svr-fx-row button.is-active::after {
  box-shadow: 0 0 16px #fff4bb, 0 0 32px #ff6d35;
}

.svr-deck.keys-disabled .svr-key-bank,
.svr-deck.lasers-disabled .svr-dial {
  filter: saturate(.45);
  opacity: .58;
}

.svr-overlay {
  position: absolute;
  z-index: 14;
  top: 44px;
  right: 0;
  bottom: var(--svr-deck-height);
  left: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 13px;
  overflow-y: auto;
  background: rgba(1,2,7,.62);
  backdrop-filter: blur(2px);
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.svr-select,
.svr-pause-card,
.svr-result {
  width: min(430px, calc(100% - 22px));
  border: 1px solid rgba(92,224,255,.34);
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
  background:
    linear-gradient(135deg, rgba(32,234,255,.09), transparent 36%, rgba(255,58,173,.065)),
    rgba(6,8,19,.96);
  box-shadow: 0 18px 46px rgba(0,0,0,.68), inset 0 0 40px rgba(50,120,190,.08);
}

.svr-select {
  width: min(590px, calc(100% - 10px));
  max-height: calc(100% - 8px);
  padding: 10px;
  overflow: hidden;
}

.svr-kicker {
  color: var(--svr-lime);
  font-size: 6px;
  letter-spacing: 2px;
}

.svr-select-head {
  min-height: 31px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
  padding: 3px 9px;
  border-left: 3px solid var(--svr-lime);
  background:
    linear-gradient(100deg, rgba(186,255,69,.16), transparent 56%),
    rgba(255,255,255,.025);
}

.svr-select-head span {
  min-width: 0;
}

.svr-select-head small {
  display: block;
  color: #82917f;
  font-size: 5px;
  letter-spacing: 1.4px;
}

.svr-select-head b {
  display: block;
  color: #fff;
  font: italic bold 12px/1.1 Arial, sans-serif;
  letter-spacing: .5px;
}

.svr-select-head em {
  padding: 4px 8px;
  border: 1px solid rgba(186,255,69,.28);
  color: var(--svr-lime);
  font-size: 6px;
  font-style: normal;
  letter-spacing: 1px;
}

.svr-select-head strong {
  color: #d9e4d7;
  font-size: 8px;
}

.svr-select-stage {
  height: 188px;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(135px, .85fr);
  gap: 7px;
}

.svr-song-focus {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(128px, 47%) minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 55%),
    rgba(2,3,11,.82);
}

.svr-jacket {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 3px solid rgba(240,255,238,.90);
  outline: 1px solid color-mix(in srgb, var(--song-a) 70%, white);
  background:
    radial-gradient(circle at calc(20% + var(--song-seed) * 3%) 28%, rgba(255,255,255,.82) 0 3%, transparent 4%),
    repeating-conic-gradient(from calc(var(--song-seed) * 13deg), var(--song-a) 0 8deg, transparent 9deg 27deg),
    linear-gradient(145deg, #070e12 0 35%, var(--song-b) 36% 51%, #05070a 52% 68%, var(--song-a) 69% 100%);
  box-shadow: 0 0 20px color-mix(in srgb, var(--song-a) 28%, transparent);
}

.svr-jacket::before,
.svr-jacket::after {
  content: "";
  position: absolute;
  inset: 16%;
  border: 2px solid rgba(255,255,255,.65);
  transform: rotate(calc(17deg + var(--song-seed) * 4deg));
}

.svr-jacket::after {
  inset: 28%;
  border-color: var(--song-b);
  transform: rotate(calc(-21deg - var(--song-seed) * 3deg));
}

.svr-jacket > i {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(255,255,255,.06) 7px);
}

.svr-jacket > span {
  position: absolute;
  z-index: 2;
  inset: auto 8px 13px;
  color: #fff;
  font: italic 900 30px/.8 Arial, sans-serif;
  letter-spacing: -2px;
  text-shadow: 0 2px 10px #000;
}

.svr-jacket > small {
  position: absolute;
  z-index: 2;
  top: 7px;
  left: 8px;
  color: #fff;
  font-size: 5px;
  letter-spacing: 1.5px;
}

.svr-song-copy {
  min-width: 0;
}

.svr-song-copy > small {
  color: var(--svr-lime);
  font-size: 5px;
  letter-spacing: 1.2px;
}

.svr-song-copy h1 {
  margin: 7px 0 5px;
  overflow-wrap: anywhere;
  color: #fff;
  font: italic 900 clamp(17px, 2.8vw, 27px)/.9 Arial, sans-serif;
  letter-spacing: -1.2px;
  text-shadow: 0 0 14px color-mix(in srgb, var(--song-a) 42%, transparent);
}

.svr-song-copy p {
  margin: 0 0 13px;
  color: #9eaa9b;
  font-size: 7px;
}

.svr-song-copy dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.svr-song-copy dl div {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr);
  gap: 5px;
  padding-top: 4px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.svr-song-copy dt {
  color: #687568;
  font-size: 5px;
}

.svr-song-copy dd {
  margin: 0;
  overflow: hidden;
  color: #dbe4da;
  font-size: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-song-wheel {
  min-height: 0;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(2,7,6,.76);
  scrollbar-width: thin;
  scrollbar-color: var(--svr-lime) rgba(255,255,255,.04);
}

.svr-song-wheel button {
  width: 100%;
  min-height: 42px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 26px;
  align-items: center;
  gap: 7px;
  padding: 4px 7px;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,.065);
  color: #8f9b8d;
  background: rgba(255,255,255,.012);
  text-align: left;
}

.svr-song-wheel button.on {
  color: #fff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--song-a) 27%, transparent), transparent),
    rgba(255,255,255,.045);
  box-shadow: inset 3px 0 var(--song-a);
}

.svr-song-wheel button > i {
  position: relative;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background:
    repeating-conic-gradient(from calc(var(--song-seed) * 10deg), var(--song-a) 0 12deg, transparent 13deg 32deg),
    linear-gradient(145deg, #07100d, var(--song-b));
}

.svr-song-wheel button > i u {
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255,255,255,.65);
  transform: rotate(calc(var(--song-seed) * 7deg));
}

.svr-song-wheel button span,
.svr-song-wheel button b,
.svr-song-wheel button small {
  min-width: 0;
  display: block;
}

.svr-song-wheel button b {
  overflow: hidden;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-song-wheel button small {
  margin-top: 3px;
  overflow: hidden;
  color: #596559;
  font-size: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-song-wheel button em {
  color: var(--song-a);
  font: normal 900 13px Arial, sans-serif;
  text-align: right;
}

.svr-fanwork-credit {
  display: grid;
  min-width: 0;
  margin-top: 5px;
  padding: 5px 8px;
  grid-template-columns: auto minmax(0, 1.35fr) minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.075);
  color: #788477;
  background: rgba(1,4,9,.62);
  font: 5px Monaco, monospace;
}

.svr-fanwork-credit b {
  color: var(--svr-lime);
  font-size: 5px;
  letter-spacing: .7px;
  white-space: nowrap;
}

.svr-fanwork-credit span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-difficulties {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 5px;
}

.svr-difficulties button {
  --tier: #a57bff;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 0;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,.12);
  color: #a5b5a1;
  background: rgba(255,255,255,.025);
  text-align: left;
}

.svr-difficulties button[data-tier="advanced"] { --tier: #ffb449; }
.svr-difficulties button[data-tier="exhaust"] { --tier: #ff4d73; }
.svr-difficulties button[data-tier="maximum"] { --tier: #baff45; }

.svr-difficulties button.on {
  border-color: var(--tier);
  color: var(--tier);
  background: color-mix(in srgb, var(--tier) 10%, transparent);
  box-shadow: inset 3px 0 var(--tier);
}

.svr-difficulties span {
  min-width: 0;
  font: bold 7px Monaco, monospace;
  letter-spacing: 1px;
}

.svr-difficulties small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #586078;
  font-size: 5px;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-difficulties b {
  font-size: 17px;
}

.svr-speed {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 30px;
  gap: 6px;
  align-items: center;
  margin: 6px 0 0;
  padding: 5px 7px;
  border: 1px solid rgba(32,234,255,.24);
  background: linear-gradient(90deg, rgba(32,234,255,.07), rgba(255,58,173,.03));
}

.svr-speed > button {
  height: 30px;
  border: 1px solid rgba(255,255,255,.14);
  color: #e4ffd3;
  background: rgba(255,255,255,.045);
  font: bold 16px/1 Arial, sans-serif;
}

.svr-speed > button:active {
  color: #101907;
  background: var(--svr-lime);
}

.svr-speed label {
  display: grid;
  grid-template-columns: auto minmax(58px, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-width: 0;
}

.svr-speed span {
  color: #a4adbf;
  font: bold 6px Monaco, monospace;
  white-space: nowrap;
}

.svr-speed span b {
  margin-left: 3px;
  color: var(--svr-lime);
  font-size: 11px;
}

.svr-speed input {
  width: 100%;
  min-width: 0;
  accent-color: var(--svr-lime);
}

.svr-speed em {
  color: #7b849c;
  font: normal 5px Monaco, monospace;
  white-space: nowrap;
}

.svr-options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  margin-top: 5px;
}

.svr-options-grid label {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  min-height: 27px;
  padding: 4px 6px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.022);
}

.svr-options-grid span {
  color: #7e89a3;
  font-size: 5px;
  white-space: nowrap;
}

.svr-options-grid span b {
  color: #d7edff;
  font-weight: normal;
}

.svr-options-grid input {
  width: 100%;
  min-width: 0;
  accent-color: var(--svr-cyan);
}

.svr-options-grid select {
  min-width: 0;
  height: 19px;
  border: 1px solid rgba(32,234,255,.25);
  color: #dffaff;
  background: #101527;
  font: 5px Monaco, monospace;
}

.svr-assists {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
  margin: 5px 0;
}

.svr-assists label {
  display: grid;
  grid-template-columns: 23px minmax(0, 1fr) auto;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid rgba(255,255,255,.09);
  color: #a4adbf;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.svr-assists span {
  min-width: 0;
  font-size: 6px;
}

.svr-assists small {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #596178;
  font-size: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.svr-assists em {
  color: var(--svr-lime);
  font-size: 6px;
  font-style: normal;
}

.svr-start,
.svr-resume,
.svr-quit,
.svr-retry,
.svr-back {
  width: 100%;
  min-height: 35px;
  padding: 0 13px;
  border: 0;
  color: #101807;
  background: linear-gradient(90deg, var(--svr-lime), #e8ffc8);
  font: bold 8px Monaco, monospace;
  letter-spacing: 1px;
  text-align: left;
}

.svr-start {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.svr-guide {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  color: #596279;
  font-size: 5px;
}

.svr-pause-card,
.svr-result {
  padding: 24px;
  text-align: center;
}

.svr-pause-card h2,
.svr-result h2 {
  margin: 9px 0 16px;
  font: italic bold 20px Arial, sans-serif;
}

.svr-result h3 {
  margin: -8px 0 12px;
  color: #9daa9c;
  font: 7px Monaco, monospace;
  letter-spacing: .7px;
}

.svr-pause-card button + button,
.svr-result button + button {
  margin-top: 6px;
  border: 1px solid rgba(255,255,255,.14);
  color: #b2bbcf;
  background: rgba(255,255,255,.04);
}

.svr-result strong {
  display: block;
  margin: 7px 0 0;
  color: var(--svr-cyan);
  font: italic bold 48px/1 Arial, sans-serif;
  text-shadow: 0 0 18px rgba(32,234,255,.45);
}

.svr-result > div {
  margin: 12px 0 8px;
  font: italic 25px/1 Monaco, monospace;
}

.svr-result > .svr-result-score {
  margin: 12px 0 8px;
  font: italic 25px/1 Monaco, monospace;
}

.svr-result > .svr-result-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin: 10px 0;
}

.svr-result-grid span {
  min-width: 0;
  padding: 6px 3px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
}

.svr-result-grid small,
.svr-result-grid b {
  display: block;
}

.svr-result-grid small {
  margin: 0 0 3px;
  color: #69758d;
  font-size: 4px;
}

.svr-result-grid b {
  color: #effaff;
  font-size: 8px;
}

.svr-result p,
.svr-result small {
  display: block;
  margin: 7px 0 12px;
  color: #8b94aa;
  font-size: 6px;
}

@container (max-width: 540px) {
  .svr-track { width: 128px; flex-basis: 128px; }
  .svr-score { width: 100px; flex-basis: 100px; }
  .svr-laser-toggle { width: 28px; flex-basis: 28px; }
  .svr-render,
.svr-laser-toggle span {
    display: none;
  }
  .svr-deck {
    grid-template-columns: 56px minmax(0, 1fr) 56px;
    gap: 5px;
    padding-inline: 7px;
  }
  .svr-dial {
    width: 52px;
    height: 52px;
  }
  .svr-overlay { padding: 4px; }
  .svr-select {
    width: calc(100% - 4px);
    max-height: calc(100% - 2px);
    padding: 6px;
  }
  .svr-select-head {
    min-height: 27px;
    margin-bottom: 4px;
    padding-block: 2px;
  }
  .svr-select-stage {
    height: 122px;
    grid-template-columns: 116px minmax(0, 1fr);
    gap: 5px;
  }
  .svr-song-focus {
    position: relative;
    display: block;
    padding: 4px;
  }
  .svr-jacket {
    width: 112px;
    max-width: 100%;
    height: 112px;
    border-width: 2px;
  }
  .svr-jacket > span { font-size: 21px; }
  .svr-song-copy {
    position: absolute;
    z-index: 4;
    right: 4px;
    bottom: 4px;
    left: 4px;
    padding: 6px 5px 5px;
    background: linear-gradient(transparent, rgba(2,3,12,.92) 25%);
  }
  .svr-song-copy > small,
.svr-song-copy dl { display: none; }
  .svr-song-copy h1 {
    max-height: 18px;
    margin: 0;
    overflow: hidden;
    color: #fff;
    font-size: 9px;
    line-height: 1;
    letter-spacing: -.2px;
    text-shadow: 0 1px 4px #000;
  }
  .svr-song-copy p {
    margin: 3px 0 0;
    overflow: hidden;
    color: #d6dce9;
    font-size: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .svr-song-wheel button {
    min-height: 29px;
    grid-template-columns: 23px minmax(0, 1fr) 23px;
    gap: 5px;
    padding: 3px 5px;
  }
  .svr-song-wheel button > i {
    width: 22px;
    height: 22px;
  }
  .svr-song-wheel button b { font-size: 6px; }
  .svr-song-wheel button small { margin-top: 1px; font-size: 4px; }
  .svr-song-wheel button em { font-size: 11px; }
  .svr-fanwork-credit { display: none; }
  .svr-difficulties { margin-top: 4px; gap: 3px; }
  .svr-difficulties button { min-height: 30px; padding-inline: 5px; }
  .svr-difficulties span { font-size: 6px; letter-spacing: .4px; }
  .svr-difficulties small { display: none; }
  .svr-difficulties b { font-size: 14px; }
  .svr-speed {
    min-height: 32px;
    margin-top: 4px;
    padding: 3px 5px;
  }
  .svr-speed > button { height: 24px; }
  .svr-options-grid { gap: 3px; margin-top: 3px; }
  .svr-options-grid label {
    min-height: 22px;
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 2px 4px;
  }
  .svr-assists { gap: 3px; margin: 3px 0; }
  .svr-assists label {
    min-height: 29px;
    grid-template-columns: 21px minmax(0, 1fr);
    gap: 4px;
    padding: 3px 4px;
  }
  .svr-assists label > em { display: none; }
  .svr-assists small { font-size: 4px; }
  .svr-start { min-height: 29px; }
  .svr-guide { display: none; }
  .svr-side-chain { left: calc(50% + 52px); }
  .svr-rate-rail { right: 5px; }
  .svr-left-console,
.svr-player-card { left: 5px; }
}

@media (pointer: coarse), (max-width: 600px) {
  .svr-wrap {
    --svr-deck-height: 120px;
    --svr-deck-height: clamp(120px, 17dvh, 140px);
  }

  .svr-deck {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: clamp(5px, 1.5vw, 7px);
    padding: 7px clamp(5px, 1.7vw, 10px) 10px;
  }

  .svr-key-bank {
    height: 100%;
    align-self: stretch;
    grid-template-rows: minmax(48px, 1.08fr) minmax(42px, .92fr);
    gap: 9px;
  }

  .svr-fx-row,
  .svr-bt-row {
    gap: clamp(5px, 1.35vw, 7px);
  }

  .svr-key-bank button {
    min-width: 0;
    font-size: 11px;
  }

  .svr-key-bank button span {
    top: 50%;
    bottom: auto;
    left: 50%;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    transform: translate(-50%, -50%);
  }

  .svr-key-bank button kbd {
    display: none;
  }

  .svr-dial {
    width: 34px;
    height: 34px;
    border-width: 1px;
    box-shadow: inset 0 0 0 3px #0a0e18, 0 2px 5px #000;
    aspect-ratio: 1;
  }

  .svr-dial::before {
    inset: 5px;
    border-width: 1px;
    box-shadow: none;
  }

  .svr-dial i {
    top: 5px;
    height: 10px;
    transform-origin: 50% 12px;
  }

  .svr-dial span {
    display: none;
  }

  .svr-hud small {
    font-size: 7px;
    letter-spacing: .7px;
  }

  .svr-track b {
    font-size: 10px;
  }

  .svr-track em,
  .svr-score em {
    font-size: 7px;
  }

  .svr-left-console,
  .svr-player-card {
    width: 94px;
  }

  .svr-side-difficulty > small,
  .svr-play-values small,
  .svr-player-card small {
    font-size: 7px;
  }

  .svr-side-difficulty em {
    font-size: 9px;
  }

  .svr-play-values b {
    font-size: 11px;
  }

  .svr-side-chain small {
    font-size: 8px;
  }

  .svr-side-chain em {
    font-size: 7px;
  }

  .svr-rate-rail small {
    font-size: 7px;
  }

  .svr-rate-rail > b {
    font-size: 10px;
  }

  .svr-player-card em,
  .svr-timing-monitor {
    font-size: 7px;
  }

  .svr-feedback {
    font-size: 20px;
  }

  .svr-feedback span {
    font-size: 8px;
  }

  .svr-select-head small {
    font-size: 7px;
  }

  .svr-select-head b {
    font-size: 14px;
  }

  .svr-select-head em {
    font-size: 8px;
  }

  .svr-select-head strong {
    font-size: 10px;
  }

  .svr-song-copy h1 {
    font-size: 12px;
  }

  .svr-song-copy p {
    font-size: 7px;
  }

  .svr-song-wheel button b {
    font-size: 9px;
  }

  .svr-song-wheel button small {
    font-size: 7px;
  }

  .svr-song-wheel button em {
    font-size: 14px;
  }

  .svr-difficulties span {
    font-size: 8px;
  }

  .svr-difficulties b {
    font-size: 16px;
  }

  .svr-speed span,
  .svr-options-grid span,
  .svr-assists small {
    font-size: 7px;
  }

  .svr-speed em {
    font-size: 7px;
  }

  .svr-options-grid select,
  .svr-assists span,
  .svr-assists em {
    font-size: 8px;
  }

  .svr-start,
  .svr-resume,
  .svr-quit,
  .svr-retry,
  .svr-back {
    font-size: 10px;
  }

  .svr-pause {
    min-width: 34px;
    min-height: 34px;
  }

  .svr-laser-toggle {
    min-height: 34px;
  }

  .svr-overlay button,
.svr-overlay label,
.svr-overlay select,
.svr-overlay input {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .svr-overlay input[type="range"] {
    touch-action: none;
  }

  .svr-select {
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .svr-song-wheel {
    touch-action: pan-y;
  }

  .svr-song-wheel button {
    min-height: 42px;
  }

  .svr-difficulties button,
.svr-assists label {
    min-height: 40px;
  }

  .svr-speed > button {
    min-width: 38px;
    height: 38px;
  }

  .svr-start {
    min-height: 44px;
  }
}

@container (max-width: 320px) {
  .svr-deck {
    grid-template-columns: 32px minmax(0, 1fr) 32px;
    gap: 4px;
    padding-inline: 5px;
  }

  .svr-dial {
    width: 30px;
    height: 30px;
  }

  .svr-fx-row,
.svr-bt-row {
    gap: 3px;
  }

  .svr-hud {
    gap: 3px;
    padding-inline: 5px;
  }

  .svr-track {
    width: 80px;
    flex-basis: 80px;
    padding-inline: 5px 14px;
  }

  .svr-track em,
.svr-score em,
.svr-laser-toggle {
    display: none;
  }

  .svr-score {
    width: 68px;
    flex-basis: 68px;
    padding-inline: 12px 5px;
  }

  .svr-score b {
    font-size: 14px;
    letter-spacing: -1px;
  }

  .svr-pause {
    margin-left: auto;
  }

  .svr-select-stage {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .svr-jacket {
    width: 78px;
    height: 78px;
  }

  .svr-difficulties span {
    display: none;
  }
}

@keyframes svrJudge {
  from { opacity: .2; transform: translateX(-50%) scale(1.35); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes svrCabinetKeyBurst {
  from { opacity: 1; transform: translate(-50%, -50%) scale(.2); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(7); }
}