html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  color: #9af07a;
  --accent: #ffe24a;
}

#stylus9Root {
  position: relative;
  width: 100%;
  height: 100%;
  background: #000;
}

#stylus9Canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

#stylus9UI {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-template-columns: 1fr auto;
  padding: 16px;
  gap: 14px;
  text-shadow: 0 0 8px rgba(154, 240, 122, 0.4);
}

#stylus9Top {
  grid-row: 1;
  grid-column: 1 / span 2;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.pill {
  pointer-events: none;
  border: 1px solid rgba(154, 240, 122, 0.65);
  background: rgba(0, 0, 0, 0.55);
  padding: 8px 10px;
  border-radius: 8px;
  letter-spacing: 0.06em;
  font-weight: 700;
  font-size: 12px;
  box-shadow: 0 0 16px rgba(154, 240, 122, 0.15);
}

#stylus9Condition,
#stylus9Score,
#stylus9Distance,
#stylus9Contact {
  color: #9af07a;
}

#stylus9Contact {
  border-color: rgba(154, 240, 122, 0.45);
  opacity: 0.85;
}

#stylus9Contact.warn {
  color: #ff7777;
  border-color: rgba(255, 100, 100, 0.6);
  background: rgba(40, 0, 0, 0.55);
  text-shadow: 0 0 10px rgba(255, 100, 100, 0.55);
  animation: stylus9Warn 0.8s ease-in-out infinite alternate;
}

@keyframes stylus9Warn {
  from { transform: scale(1); }
  to { transform: scale(1.04); }
}

#stylus9Combo {
  border-color: rgba(255, 204, 60, 0.85);
  color: #ffcc3c;
  text-shadow: 0 0 10px rgba(255, 204, 60, 0.6);
  box-shadow: 0 0 22px rgba(255, 204, 60, 0.28);
  animation: stylus9ComboPulse 0.55s ease-in-out infinite alternate;
}

@keyframes stylus9ComboPulse {
  from { transform: scale(1); }
  to { transform: scale(1.06); }
}

#stylus9NowPlaying {
  grid-row: 2;
  grid-column: 1;
  align-self: start;
  max-width: min(440px, 50vw);
  border: 1px solid rgba(154, 240, 122, 0.35);
  background: rgba(0, 0, 0, 0.45);
  padding: 12px 12px;
  border-radius: 10px;
  box-shadow: 0 0 26px rgba(154, 240, 122, 0.12);
}

#stylus9NowPlaying .label {
  font-size: 10px;
  opacity: 0.75;
  letter-spacing: 0.18em;
}

#stylus9NowPlaying .value {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  word-break: break-word;
}

/* Wire status: 4 colored cables visible. Damaged ones flicker. */
.wires {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 10px;
  letter-spacing: 0.14em;
  opacity: 0.95;
}

.wires .ch {
  font-weight: 700;
  margin-right: 2px;
  margin-left: 4px;
  opacity: 0.7;
}

.wires .ch.L { color: #cccccc; }
.wires .ch.R { color: #ff8888; }

.wires .wire {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.wires .wire.L1.ok { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.55); }
.wires .wire.L2.ok { background: #3a8cff; box-shadow: 0 0 8px rgba(58,140,255,.55); }
.wires .wire.R1.ok { background: #ff3344; box-shadow: 0 0 8px rgba(255,51,68,.55); }
.wires .wire.R2.ok { background: #33ff66; box-shadow: 0 0 8px rgba(51,255,102,.55); }

.wires .wire.dead {
  background: #1a1a1a;
  opacity: 0.45;
  animation: stylus9WireFlicker 0.6s linear infinite;
}

@keyframes stylus9WireFlicker {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.18; }
}

/* Spinning album cover label */
#stylus9Label {
  grid-row: 2;
  grid-column: 2;
  align-self: start;
  justify-self: end;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 2px solid var(--accent, #ffe24a);
  box-shadow: 0 0 26px rgba(255, 226, 74, 0.18), 0 8px 20px rgba(0,0,0,.55);
  overflow: hidden;
  background: #0a1a0d;
  pointer-events: none;
  animation: stylus9Spin33 1.81818s linear infinite;
}

#stylus9Label img {
  width: 100%;
  height: 100%;
  display: block;
}

@keyframes stylus9Spin33 {
  to { transform: rotate(360deg); }
}

#stylus9Bottom {
  grid-row: 3;
  grid-column: 1 / span 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: end;
}

#stylus9Meters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 280px;
  max-width: 420px;
}

#stylus9Signal {
  position: relative;
  height: 22px;
  border: 1px solid var(--accent, #ffe24a);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 18px rgba(255, 226, 74, 0.15);
}

#stylus9Signal .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg, #74c462 0%, #ffe24a 70%, #ff8a50 100%);
  transition: width 0.18s ease-out;
}

#stylus9Signal .label {
  position: absolute;
  right: 8px;
  top: 4px;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: #07070d;
  mix-blend-mode: screen;
  font-weight: 700;
}

#stylus9Packet {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  letter-spacing: 0.14em;
}

#stylus9Packet .lbl {
  opacity: 0.8;
  margin-right: 4px;
}

#stylus9Packet .pip {
  display: inline-block;
  width: 14px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg, #444 0%, #222 100%);
}

#stylus9Packet .pip.on {
  background: linear-gradient(180deg, #ffe24a 0%, #ff8a50 100%);
  box-shadow: 0 0 6px rgba(255, 226, 74, 0.45);
}

#stylus9Packet .pip.off { opacity: 0.35; }

#stylus9Help {
  justify-self: end;
  font-size: 11px;
  opacity: 0.75;
  line-height: 1.4;
  max-width: 32ch;
  text-align: right;
}

button {
  pointer-events: auto;
  font: inherit;
  color: var(--accent, #ffe24a);
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid var(--accent, #ffe24a);
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 900;
  letter-spacing: 0.12em;
  cursor: pointer;
  box-shadow: 0 0 24px rgba(255, 226, 74, 0.16);
}

button:hover { filter: brightness(1.15); }
button:active { transform: translateY(1px); }

.hidden { display: none !important; }

#stylus9Flash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: rgba(255, 0, 56, 0.18);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity 120ms linear;
}

#stylus9Flash.on { opacity: 1; }
/* Directional hit flash — brighter on the side you were struck from. */
#stylus9Flash.hitL {
  background: linear-gradient(90deg, rgba(255,0,56,0.42) 0%, rgba(255,0,56,0.10) 40%, transparent 70%);
}
#stylus9Flash.hitR {
  background: linear-gradient(270deg, rgba(255,0,56,0.42) 0%, rgba(255,0,56,0.10) 40%, transparent 70%);
}

#stylus9Modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(2px);
  pointer-events: auto;
  z-index: 10;
}

#stylus9Modal .modalInner {
  width: min(560px, 92vw);
  border: 1px solid var(--accent, #ffe24a);
  background: rgba(0, 0, 0, 0.78);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 0 40px rgba(255, 226, 74, 0.18);
}

#stylus9Modal .title {
  font-weight: 1000;
  letter-spacing: 0.2em;
  font-size: 14px;
  color: var(--accent, #ffe24a);
}

#stylus9Modal .body {
  margin-top: 10px;
  opacity: 0.9;
  line-height: 1.4;
  font-size: 12px;
  white-space: pre-line;
}

#stylus9Modal button {
  margin-top: 14px;
  width: 100%;
}

/* Quarter goo overlays — one per screen corner. Grow + glow as the wire
   in that quarter takes damage. When the wire is dead, full opacity +
   "dead" tint to indicate "this corner is offline (limp-home)." */
.goo {
  position: absolute;
  width: 220px;
  height: 220px;
  pointer-events: none;
  z-index: 6;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.5);
  transform-origin: center;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  mix-blend-mode: screen;
  filter: blur(2px);
}
.gooL1 {
  top: -80px; left: -80px;
  background: radial-gradient(circle, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.0) 65%);
}
.gooL2 {
  bottom: -80px; left: -80px;
  background: radial-gradient(circle, rgba(58,140,255,0.85) 0%, rgba(58,140,255,0.0) 65%);
}
.gooR1 {
  top: -80px; right: -80px;
  background: radial-gradient(circle, rgba(255,51,68,0.85) 0%, rgba(255,51,68,0.0) 65%);
}
.gooR2 {
  bottom: -80px; right: -80px;
  background: radial-gradient(circle, rgba(51,255,102,0.85) 0%, rgba(51,255,102,0.0) 65%);
}
.goo.dead {
  filter: blur(4px) saturate(0.4);
}

/* v1.3b: 4 X-wing-style POWER METER BARS, one per wire, in each corner.
   The actual readable HP — goo overlays are the atmospheric tell. */
.wireMeter {
  position: absolute;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 800;
  color: #eee;
  text-shadow: 0 0 4px rgba(0,0,0,0.85);
  pointer-events: none;
}
.wireMeter .bar {
  width: 80px;
  height: 8px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.6);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
}
.wireMeter .bar .fill {
  height: 100%;
  width: 100%;
  transition: width 0.18s ease-out, background-color 0.18s;
}
.wireMeter .lbl {
  min-width: 18px;
  text-align: center;
}

/* Corner positions — match the wire→corner mapping (white=TL, blue=BL, red=TR, green=BR) */
.wireMeterL1 { top: 50px;  left: 18px; }
.wireMeterL1 .bar .fill { background: #ffffff; box-shadow: 0 0 8px rgba(255,255,255,.7); }
.wireMeterL1 .lbl { color: #ffffff; }

.wireMeterL2 { bottom: 90px; left: 18px; }
.wireMeterL2 .bar .fill { background: #3a8cff; box-shadow: 0 0 8px rgba(58,140,255,.7); }
.wireMeterL2 .lbl { color: #3a8cff; }

.wireMeterR1 { top: 50px;  right: 18px; flex-direction: row-reverse; }
.wireMeterR1 .bar .fill { background: #ff3344; box-shadow: 0 0 8px rgba(255,51,68,.7); }
.wireMeterR1 .lbl { color: #ff3344; }

.wireMeterR2 { bottom: 90px; right: 18px; flex-direction: row-reverse; }
.wireMeterR2 .bar .fill { background: #33ff66; box-shadow: 0 0 8px rgba(51,255,102,.7); }
.wireMeterR2 .lbl { color: #33ff66; }

/* Dead-wire indicator — bar visibly broken */
.wireMeter.dead .bar { border-color: rgba(120, 30, 30, 0.7); background: rgba(50,10,10,0.7); }
.wireMeter.dead .bar .fill { width: 0% !important; }
.wireMeter.dead .lbl { color: #642222; }

/* DJ-blow cooldown indicator (bottom-center) */
#stylus9Blow {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: 220px;
  height: 18px;
  pointer-events: none;
  z-index: 7;
  border: 1px solid rgba(255, 226, 74, 0.6);
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(255, 226, 74, 0.18);
}
#stylus9Blow .fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, #ff8a50 0%, #ffe24a 100%);
  opacity: 0.65;
  transition: width 0.08s linear;
}
#stylus9Blow .label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #ffe24a;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(255,226,74,0.6);
}
#stylus9Blow.ready {
  animation: stylus9BlowPulse 1.4s ease-in-out infinite alternate;
  border-color: #ffe24a;
}
@keyframes stylus9BlowPulse {
  from { box-shadow: 0 0 12px rgba(255, 226, 74, 0.18); }
  to   { box-shadow: 0 0 20px rgba(255, 226, 74, 0.55); }
}

/* Record-edge dashboard arc at top of screen — the "curves like a record"
   status bar inspired by the SW1983 SHIELD arc. */
#stylus9RecordDash {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 110px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.92;
}

/* Crosshair — follows the mouse via JS in v1.2-vector. Initial position
   is screen-center (overridden by JS on pointermove). */
#stylus9Crosshair {
  position: absolute;
  left: calc(50% - 14px);
  top: calc(50% - 14px);
  width: 28px;
  height: 28px;
  pointer-events: none;
  z-index: 6;
  opacity: 0.85;
  transition: opacity 0.2s;
}

#stylus9Crosshair .ring {
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent, #ffe24a);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 226, 74, 0.45);
  opacity: 0.65;
}

#stylus9Crosshair .dot {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  margin-top: -2px;
  background: var(--accent, #ffe24a);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(255, 226, 74, 0.85);
}

/* Pitch fader — vertical slider on the right edge, like a Technics SL-1200 */
#stylus9Pitch {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 220px;
  pointer-events: none;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

#stylus9Pitch .track {
  position: relative;
  width: 14px;
  height: 200px;
  border: 1px solid rgba(255, 226, 74, 0.55);
  background: rgba(0, 0, 0, 0.45);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(255, 226, 74, 0.15);
}

#stylus9Pitch .centerline {
  position: absolute;
  left: -2px;
  right: -2px;
  top: 50%;
  height: 1px;
  background: rgba(255, 226, 74, 0.65);
  margin-top: -0.5px;
}

#stylus9Pitch .fill {
  position: absolute;
  left: -3px;
  right: -3px;
  height: 6px;
  background: var(--accent, #ffe24a);
  box-shadow: 0 0 10px rgba(255, 226, 74, 0.85);
  border-radius: 2px;
  bottom: 50%;
  margin-bottom: -3px;
  transition: bottom 0.12s ease-out;
}

#stylus9Pitch .label {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--accent, #ffe24a);
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(255, 226, 74, 0.6);
  margin-top: 4px;
}

/* CRT scanlines + subtle vignette */
#stylus9Root::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0),
    rgba(0, 0, 0, 0.0) 2px,
    rgba(0, 0, 0, 0.18) 3px
  );
  opacity: 0.7;
  mix-blend-mode: multiply;
  z-index: 5;
}

#stylus9Root::after {
  content: "";
  position: absolute;
  inset: -10%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(154, 240, 122, 0.06), rgba(0, 0, 0, 0.0) 55%, rgba(0, 0, 0, 0.4) 80%);
  z-index: 4;
}

#stylus9Root {
  animation: stylus9Flicker 6s infinite;
}

@keyframes stylus9Flicker {
  0%   { filter: contrast(1.05) brightness(1.02); }
  10%  { filter: contrast(1.08) brightness(1.04); }
  11%  { filter: contrast(0.98) brightness(0.98); }
  12%  { filter: contrast(1.09) brightness(1.05); }
  55%  { filter: contrast(1.06) brightness(1.03); }
  56%  { filter: contrast(0.96) brightness(0.98); }
  57%  { filter: contrast(1.08) brightness(1.04); }
  100% { filter: contrast(1.05) brightness(1.02); }
}

@media (max-width: 720px) {
  #stylus9UI { padding: 10px; }
  #stylus9Bottom { grid-template-columns: 1fr; gap: 8px; }
  #stylus9Help { justify-self: start; text-align: left; max-width: 60ch; }
  #stylus9Label { width: 120px; height: 120px; }
  #stylus9Meters { min-width: 0; max-width: none; }
}

/* ── Title splash — Nano Banana key art under the cold-open modal ─────── */
#stylus9Splash {
  position: absolute;
  inset: 0;
  z-index: 2;                 /* over the canvas, under every HUD element */
  background: #000 url(./assets/art/keyart.jpg) center / cover no-repeat;
  opacity: 0.62;
  pointer-events: none;
}