/**
 * vum_instructions.css — Shared "how to play" screen + visual controls.
 *
 * Auto-injected via apps/games/views.py so every game gets it automatically.
 * The visual components (piano, drum pads) expect real beginners — actions
 * are shown directly on a picture of the hardware, not described in prose.
 *
 * Instruction screen:
 *   <div class="vum-intro">
 *     <div class="vum-intro__badge">How to Play</div>
 *     <h1 class="vum-intro__title">GAME NAME</h1>
 *     <p  class="vum-intro__tagline">One short sentence.</p>
 *     <div class="vum-intro__visual"> ...piano or pads... </div>
 *     <p  class="vum-intro__start">Press any key to start</p>
 *   </div>
 *
 * Piano (2-octave, 14 white keys C3→B4 by default):
 *   <div class="vum-piano" data-lowest="48">
 *     <!-- whites in order; blacks placed after with data-semi -->
 *     ...see vum-piano markup below
 *   </div>
 *
 * Drum pads (1–4):
 *   <div class="vum-pads">
 *     <div class="vum-pad"><span class="vum-pad__label">←</span></div>
 *     ...
 *   </div>
 */

/* ── Intro screen ───────────────────────────────────────────────────── */
.vum-intro {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  padding: 32px 24px;
  text-align: center;
  color: #eaf2ff;
  background:
    radial-gradient(ellipse at top, rgba(0,255,255,0.08), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(255,102,255,0.08), transparent 60%),
    rgba(10,10,18,0.96);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}

.vum-intro.hidden { display: none; }

.vum-intro__badge {
  display: inline-block;
  font-family: 'Orbitron', 'Segoe UI', monospace;
  font-size: 12px;
  letter-spacing: 4px;
  font-weight: 700;
  padding: 6px 14px;
  margin-bottom: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0,255,255,0.5);
  color: #00ffff;
  background: rgba(0,255,255,0.08);
  box-shadow: 0 0 20px rgba(0,255,255,0.15);
  text-transform: uppercase;
}

.vum-intro__title {
  font-family: 'Orbitron', 'Segoe UI', monospace;
  font-size: clamp(36px, 6vw, 60px);
  font-weight: 900;
  margin: 0 0 10px;
  letter-spacing: 2px;
  background: linear-gradient(135deg, #00ffff, #ff66ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.vum-intro__tagline {
  font-size: clamp(15px, 1.7vw, 18px);
  opacity: 0.8;
  margin: 0 0 28px;
  max-width: 640px;
}

.vum-intro__visual {
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.vum-intro__start {
  font-family: 'Orbitron', monospace;
  font-size: 14px;
  letter-spacing: 3px;
  color: #00ffff;
  margin: 8px 0 0;
  animation: vum-intro-pulse 1.8s ease-in-out infinite;
  text-transform: uppercase;
}

@keyframes vum-intro-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

/* ── Visual piano (2 octaves, 14 whites + 10 blacks) ────────────────── */
/*
 * Layout: whites are a flex row (14 children), blacks are absolutely
 * positioned on top using nth-of-type offsets. Black keys sit centered
 * on the white-key boundaries: C#, D#, F#, G#, A# in each octave.
 *
 * Each octave spans 50% of the piano; one white = 1/14 ≈ 7.143%.
 * A black key is 0.6 white wide (≈4.286%), so its left edge is:
 *   (k * 7.143%) − 2.143%
 * where k is the index of the white key it sits BEFORE (1-based).
 * Black key k positions (per octave of 7 whites at indices 0..6):
 *   C# after white 0 → k=1 → left = 5.00%
 *   D# after white 1 → k=2 → left = 12.14%
 *   F# after white 3 → k=4 → left = 26.43%
 *   G# after white 4 → k=5 → left = 33.57%
 *   A# after white 5 → k=6 → left = 40.71%
 * Second octave: add 50%.
 */
.vum-piano {
  position: relative;
  width: min(720px, 96vw);
  height: clamp(140px, 22vw, 200px);
  user-select: none;
  --hl: #00ffff;
  --hl2: #ff66ff;
}

.vum-piano__whites {
  display: flex;
  height: 100%;
  gap: 0;
}

.vum-piano__white {
  flex: 1 1 0;
  background: linear-gradient(180deg, #fafafa 0%, #d8d8d8 100%);
  border: 1px solid #1c1c1c;
  border-top: none;
  border-radius: 0 0 6px 6px;
  position: relative;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.08);
}

/* First white has a left border; make interior borders share (avoid doubling) */
.vum-piano__white + .vum-piano__white { border-left: 0; }

.vum-piano__blacks {
  position: absolute;
  top: 0;
  left: 0; right: 0;
  height: 62%;
  pointer-events: none;
}

.vum-piano__black {
  position: absolute;
  top: 0;
  width: 4.286%;
  height: 100%;
  background: linear-gradient(180deg, #1e1e1e 0%, #000 100%);
  border: 1px solid #000;
  border-radius: 0 0 4px 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.6), inset 0 -4px 0 rgba(255,255,255,0.04);
}

/* Semitone offsets within a single octave (12 semitones starting at C) */
.vum-piano__black[data-semi="1"]  { left:  5.000%; } /* C# */
.vum-piano__black[data-semi="3"]  { left: 12.143%; } /* D# */
.vum-piano__black[data-semi="6"]  { left: 26.429%; } /* F# */
.vum-piano__black[data-semi="8"]  { left: 33.571%; } /* G# */
.vum-piano__black[data-semi="10"] { left: 40.714%; } /* A# */
.vum-piano__black[data-semi="13"] { left: 55.000%; } /* C#2 */
.vum-piano__black[data-semi="15"] { left: 62.143%; } /* D#2 */
.vum-piano__black[data-semi="18"] { left: 76.429%; } /* F#2 */
.vum-piano__black[data-semi="20"] { left: 83.571%; } /* G#2 */
.vum-piano__black[data-semi="22"] { left: 90.714%; } /* A#2 */

/* Highlighted keys: a bright glow + an action label floats above the key */
.vum-piano__white.hl {
  background: linear-gradient(180deg, #c8fbff 0%, #66e4e8 100%);
  box-shadow: 0 0 26px var(--hl), inset 0 -6px 0 rgba(0,0,0,0.08);
}
.vum-piano__white.hl.p2 {
  background: linear-gradient(180deg, #ffd4f4 0%, #f39ad9 100%);
  box-shadow: 0 0 26px var(--hl2), inset 0 -6px 0 rgba(0,0,0,0.08);
}
.vum-piano__black.hl {
  background: linear-gradient(180deg, #00e4e4 0%, #007088 100%);
  box-shadow: 0 0 22px var(--hl);
}
.vum-piano__black.hl.p2 {
  background: linear-gradient(180deg, #e04fc7 0%, #7a2872 100%);
  box-shadow: 0 0 22px var(--hl2);
}

/* Action icons sit directly ON the highlighted key like a sticker. */
.vum-piano__white .vum-piano__label {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', 'Segoe UI', monospace;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 900;
  color: #0a3c42;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}
.vum-piano__white.p2 .vum-piano__label { color: #4a0a3a; }
.vum-piano__black .vum-piano__label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Orbitron', 'Segoe UI', monospace;
  font-size: clamp(13px, 1.6vw, 18px);
  font-weight: 900;
  color: #fff;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(0,255,255,0.8);
}
.vum-piano__black.p2 .vum-piano__label { text-shadow: 0 0 6px rgba(255,102,255,0.8); }

/* Optional "any white/black" diffuse glow across a range (e.g., whole octave)
   used for games where the whole keyboard is active */
.vum-piano__white.glow-p1 { background: linear-gradient(180deg, #e5ffff 0%, #b2f2f2 100%); }
.vum-piano__white.glow-p2 { background: linear-gradient(180deg, #ffeaff 0%, #f6c2ec 100%); }

/* ── Visual drum pads ───────────────────────────────────────────────── */
.vum-pads {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.vum-pad {
  width: clamp(80px, 12vw, 110px);
  height: clamp(80px, 12vw, 110px);
  border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.08), transparent 60%),
    linear-gradient(180deg, #2a2433 0%, #14101c 100%);
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), inset 0 -4px 0 rgba(0,0,0,0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: relative;
}

.vum-pad.hl {
  border-color: var(--pad-color, #00ffff);
  box-shadow: 0 0 24px var(--pad-color, #00ffff), inset 0 -4px 0 rgba(0,0,0,0.4);
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--pad-color, #00ffff) 35%, transparent), transparent 65%),
    linear-gradient(180deg, #2a2433 0%, #14101c 100%);
}

.vum-pad__label {
  font-family: 'Orbitron', monospace;
  font-size: 28px;
  font-weight: 900;
  color: var(--pad-color, #fff);
  text-shadow: 0 0 12px var(--pad-color, rgba(255,255,255,0.6));
  line-height: 1;
}

.vum-pad__sub {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.7;
  color: #fff;
}

@media (max-width: 640px) {
  .vum-piano { height: 96px; }
  .vum-pad   { width: 70px; height: 70px; }
  .vum-pad__label { font-size: 22px; }
}