/* Arrow Glow — color and type only. Shell placement is Latis SPINE. */

html,
body {
  background: #000;
  color: #f4fbff;
  font-family: system-ui, sans-serif;
}

#play {
  width: 100%;
  height: 100%;
  display: block;
  background: #000;
  touch-action: none;
  cursor: default;
}

lux-hat,
lux-head,
lux-body,
lux-tail,
lux-foot {
  color: #f4fbff;
  font-family: system-ui, sans-serif;
}

lux-foot a {
  color: #9fdfff;
  text-decoration: none;
}

.lmp {
  color: #f4fbff;
  font-family: system-ui, sans-serif;
}

.lmp-title {
  margin: 0;
  letter-spacing: 0.14em;
  font-size: 0.85rem;
  color: #f4fbff;
}

.lmp-btn {
  color: #f4fbff;
  background: transparent;
  border: 0;
  font: inherit;
}

.lmp-btn svg {
  width: 22px;
  height: 22px;
}

.lmp-art {
  width: 72px;
  height: 72px;
  object-fit: cover;
}

.lmp-eq {
  width: 100%;
  height: 36px;
  display: block;
  background: transparent;
}

.lmp-seek,
.lmp-gain {
  width: 100%;
  accent-color: #7ef0ff;
}

.boot-label {
  color: #f4fbff;
  font-family: system-ui, sans-serif;
}

.lmp-btn .icon-pause { display: none; }
.lmp-btn.is-playing .icon-play { display: none; }
.lmp-btn.is-playing .icon-pause { display: block; }

#play { min-height: 42vh; }

/* Neon sign frame around the play board only. Not the window, not the player. */
.board-frame {
  cursor: default;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 42vh;
  padding: 14px;
  border-radius: 28px;
  background: #000;
  border: 2px solid #d9fbff;
  box-shadow:
    inset 0 0 0 2px rgba(8, 10, 24, 0.95),
    inset 0 0 22px rgba(70, 190, 255, 0.28),
    inset 0 0 0 5px rgba(255, 90, 210, 0.18),
    0 0 0 1px rgba(255, 140, 230, 0.35),
    0 0 6px 1px rgba(190, 250, 255, 0.95),
    0 0 16px 2px rgba(40, 190, 255, 0.85),
    0 0 36px 4px rgba(0, 140, 255, 0.45);
}

#play {
  border-radius: 16px;
  cursor: default;
}

#play.is-arrow {
  cursor: pointer;
}