/* ═══════════════════════════════════════════════════════════════════════════
   DIFFICULTY / SUB-MENU SCREEN  — image-map over SlammedSubMenu.png
   Same pattern as home screen & shop: PNG background, transparent hit zones.

   Layers:
     1. SlammedSubMenu.png  (full background, cover)
     2. .sd-hit.diff-card   (transparent hit zones over each row)
     3. .sd-hit.filter-chip (filter chip hit zones — show active state)
     4. #btn-back-diff / #btn-start-shift (bottom action buttons)

   Debug: document.getElementById('screen-difficulty').classList.add('sd-debug')
═══════════════════════════════════════════════════════════════════════════ */

#screen-difficulty {
  /* PNG is 1536×1024 (1.5:1). Phone landscape is ~2.16:1.
     100% 100% stretches to fill — nothing gets clipped.
     cover would lose ~6% top + bottom (title + back button). */
  background: url("../assets/Skins/SlammedSubMenu.webp") top center / 100% 100% no-repeat;
  /* position: absolute + inset: 0 come from .screen */
  filter: brightness(1.2);
}

/* ── Header stat display zones ───────────────────────────────────────────── */

.sd-stat {
  position: absolute;
  pointer-events: none;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
}
#sd-stat-name    { justify-content: flex-start; font-size: 9px; letter-spacing: 0.3px; }
#sd-stat-avatar  { border-radius: 50%; overflow: hidden; }

/* ── Shared hit zone base ─────────────────────────────────────────────────── */

.sd-hit {
  position: absolute;
  background: transparent;
  border: none;
  padding: 0; margin: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  border-radius: 6px;
  transition: transform 0.07s ease, background 0.1s ease;
  transform-origin: center center;
  font-size: 0; /* hide any label text — image provides all visuals */
  color: transparent;
}

.sd-hit:active { transform: scale(0.96); }

/* ── Lit-up row overlays ──────────────────────────────────────────────────── */
/* PNG overlays positioned exactly over each difficulty row.
   Shown when the row is selected; animated on press.                         */

.diff-lit {
  position: absolute;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
  /* Press in: fast, release: slightly slower fade in */
  transition: opacity 0.18s ease, transform 0.07s ease;
  z-index: 1;
}

/* Press state — row glows faintly and shrinks */
.diff-lit.pressing {
  opacity: 0.65;
  transform: scale(0.97);
}

/* Selected state — fully lit at normal size */
.diff-lit.active {
  opacity: 1;
  transform: scale(1);
}

/* ── Difficulty rows ──────────────────────────────────────────────────────── */

/* Selected card: remove the old gold glow — lit image handles the feedback */
.sd-hit.diff-card.selected {
  box-shadow: none;
  background: transparent;
}

/* Keep scale-down on active press for the hit zone itself */

/* ── Filter chips ─────────────────────────────────────────────────────────── */

/* Hit zone active: subtle underline fallback (lit image is primary feedback) */
.sd-hit.filter-chip.active {
  box-shadow: none;
  background: transparent;
}

/* Lit overlay — same transition pattern as .diff-lit */
.chip-lit {
  position: absolute;
  object-fit: fill;
  pointer-events: none;
  opacity: 0;
  transform-origin: center center;
  transition: opacity 0.15s ease, transform 0.07s ease;
  z-index: 1;
}
.chip-lit.pressing {
  opacity: 0.55;
  transform: scale(0.94);
}
.chip-lit.active {
  opacity: 1;
  transform: scale(1);
}

/* ── Bottom buttons ───────────────────────────────────────────────────────── */

#btn-start-shift {
  /* press-down pop */
  transition: transform 0.07s ease, filter 0.1s ease;
}
#btn-start-shift:active { transform: scale(0.94); filter: brightness(1.3); }
#btn-back-diff:active    { transform: scale(0.94); }

/* ── Debug mode ───────────────────────────────────────────────────────────── */

#screen-difficulty.sd-debug .sd-hit.diff-card   { outline: 2px solid rgba(0,200,255,0.8);  background: rgba(0,200,255,0.08); }
#screen-difficulty.sd-debug .sd-hit.filter-chip { outline: 2px solid rgba(255,200,0,0.8);  background: rgba(255,200,0,0.08); }
#screen-difficulty.sd-debug #btn-back-diff       { outline: 2px solid rgba(255,100,100,0.8); background: rgba(255,0,0,0.08); }
#screen-difficulty.sd-debug #btn-start-shift     { outline: 2px solid rgba(100,255,100,0.8); background: rgba(0,255,0,0.08); }