/**
 * YSkill Survivor — Stitch « Etheric Arcade » in-game overlays.
 * HUD, level-up, victory/defeat, stage select — scoped to html.ys-stitch-ui.
 */

/* ── Left HUD panel ── */
html.ys-stitch-ui #ui {
  background: var(--ys-glass, rgba(20, 18, 27, 0.72));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ys-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
}

html.ys-stitch-ui .hud-label {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.55rem;
  letter-spacing: 0.1em;
  color: var(--ys-on-surface-variant, #b9cacb);
}

html.ys-stitch-ui .level-text .hud-value {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .hud-bar-track {
  border-radius: 6px;
  border-color: rgba(0, 219, 233, 0.2);
  background: rgba(15, 13, 22, 0.9);
}

html.ys-stitch-ui .hud-bar-fill--xp {
  background: linear-gradient(90deg, #006970, var(--ys-primary-fixed-dim, #00dbe9));
  box-shadow: 0 0 10px rgba(0, 219, 233, 0.45);
}

html.ys-stitch-ui .hud-bar-fill--hp {
  background: linear-gradient(90deg, #93000a, #ffb4ab);
  box-shadow: 0 0 8px rgba(255, 180, 171, 0.35);
}

/* ── Right HUD ── */
html.ys-stitch-ui #gameHudRight .game-hud-top,
html.ys-stitch-ui #gameResHud {
  background: var(--ys-glass, rgba(20, 18, 27, 0.72));
  backdrop-filter: blur(16px);
  border: 1px solid var(--ys-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 14px;
}

html.ys-stitch-ui .game-timer-val {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  color: var(--ys-primary-fixed-dim, #00dbe9);
  text-shadow: 0 0 10px var(--ys-cyan-glow, rgba(0, 219, 233, 0.35));
}

html.ys-stitch-ui .game-timer-stage {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: var(--ys-on-surface-variant, #b9cacb);
}

html.ys-stitch-ui .game-res-val {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-weight: 700;
}

html.ys-stitch-ui .game-pause-btn {
  background: var(--ys-surface-container-high, #2b2933);
  border: 1px solid rgba(0, 219, 233, 0.35);
  border-radius: 10px;
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .hud-boss-bar {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(255, 180, 171, 0.35);
  border-radius: 12px;
}

html.ys-stitch-ui .hud-boss-bar-name {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  color: var(--ys-primary, #dbfcff);
}

/* ── Skill bar ── */
html.ys-stitch-ui #skillBar .skill-slot {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 2px solid rgba(0, 219, 233, 0.25);
  border-radius: 12px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

html.ys-stitch-ui #skillBar .skill-slot.is-ready {
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  box-shadow: 0 0 12px var(--ys-cyan-glow, rgba(0, 219, 233, 0.35));
}

/* ── Level-up / upgrade modal ── */
html.ys-stitch-ui #levelUpScreen {
  background: rgba(15, 13, 22, 0.94);
  backdrop-filter: blur(12px);
}

html.ys-stitch-ui #levelUpScreen h1 {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.06em;
  color: var(--ys-primary-fixed-dim, #00dbe9);
  text-shadow: 0 0 16px var(--ys-cyan-glow, rgba(0, 219, 233, 0.35));
}

html.ys-stitch-ui .level-up-wiki-toggle {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  border-color: rgba(0, 219, 233, 0.45);
  background: var(--ys-surface-container, #211e28);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .upgrade-card {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(0, 219, 233, 0.2);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}

html.ys-stitch-ui .upgrade-card:active,
html.ys-stitch-ui .upgrade-card:hover {
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  background: rgba(0, 219, 233, 0.08);
  box-shadow: 0 0 20px var(--ys-cyan-glow, rgba(0, 219, 233, 0.25));
}

html.ys-stitch-ui .upgrade-name {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .upgrade-card-icon-wrap {
  border-color: rgba(0, 219, 233, 0.3);
  background: rgba(0, 219, 233, 0.06);
}

/* ── Victory ── */
html.ys-stitch-ui #stageVictoryScreen {
  background: rgba(15, 13, 22, 0.94);
  backdrop-filter: blur(12px);
}

html.ys-stitch-ui #stageVictoryScreen h1 {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  color: var(--ys-secondary-container, #feb700);
  text-shadow: 0 0 20px rgba(254, 183, 0, 0.45);
}

html.ys-stitch-ui #stageVictoryScreen .stage-victory-rewards {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(254, 183, 0, 0.35);
  border-radius: 14px;
}

html.ys-stitch-ui #stageVictoryScreen .stage-victory-reward-amount {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
}

html.ys-stitch-ui #stageVictoryScreen .stage-victory-actions button {
  font-family: var(--ys-font-body, "Inter", sans-serif);
  font-weight: 700;
  border-radius: 12px;
  border: none;
  border-bottom: 4px solid rgba(0, 50, 60, 0.6);
  background: var(--ys-primary-container, #00f0ff);
  color: var(--ys-on-primary-container, #006970);
  padding: 12px 24px;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.25);
}

html.ys-stitch-ui #stageVictoryScreen .stage-victory-actions button:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

/* ── Defeat / game over ── */
html.ys-stitch-ui #gameOverScreen {
  background: rgba(15, 13, 22, 0.94);
  backdrop-filter: blur(12px);
}

html.ys-stitch-ui #gameOverScreen h1,
html.ys-stitch-ui .game-over-title {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  color: #ffb4ab;
  text-shadow: 0 0 20px rgba(147, 0, 10, 0.65);
}

html.ys-stitch-ui .score-board,
html.ys-stitch-ui .game-over-inner {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(255, 180, 171, 0.35);
  border-radius: 16px;
  padding: 16px;
}

html.ys-stitch-ui .game-over-stat-value {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui #gameOverScreen button,
html.ys-stitch-ui .game-over-actions button {
  border-radius: 12px;
  border: none;
  border-bottom: 4px solid rgba(60, 0, 8, 0.6);
  background: #ffb4ab;
  color: #690005;
  font-weight: 700;
}

/* ── Stage select ── */
html.ys-stitch-ui #stageSelectScreen {
  background: var(--ys-surface, #14121b);
}

html.ys-stitch-ui .stage-select-kicker,
html.ys-stitch-ui .stage-select-name {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .stage-select-inner {
  background: var(--ys-glass, rgba(20, 18, 27, 0.72));
  border: 1px solid var(--ys-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
}

html.ys-stitch-ui .stage-select-back,
html.ys-stitch-ui .menu-stage-step {
  background: var(--ys-surface-container-high, #2b2933);
  border: 1px solid rgba(0, 219, 233, 0.25);
  border-radius: 10px;
  color: var(--ys-on-surface, #e6e0ee);
}

/* ── Boot overlay ── */
html.ys-stitch-ui #gameBootOverlay {
  background: var(--ys-surface, #14121b);
}

html.ys-stitch-ui .game-boot-title {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.08em;
  color: var(--ys-primary-fixed-dim, #00dbe9);
  text-shadow: 0 0 16px var(--ys-cyan-glow, rgba(0, 219, 233, 0.35));
}

html.ys-stitch-ui .game-boot-bar-fill {
  background: linear-gradient(90deg, #006970, var(--ys-primary-container, #00f0ff));
  box-shadow: 0 0 12px var(--ys-cyan-glow, rgba(0, 219, 233, 0.35));
}

/* ── Mobile HUD compaction ── */
@media (max-width: 420px) {
  html.ys-stitch-ui #ui {
    border-radius: 10px;
    padding: 6px 8px;
  }

  html.ys-stitch-ui .hud-label {
    font-size: 0.5rem;
  }

  html.ys-stitch-ui #gameHudRight .game-hud-top,
  html.ys-stitch-ui #gameResHud {
    border-radius: 10px;
    padding: 4px 6px;
  }

  html.ys-stitch-ui .game-timer-val {
    font-size: 0.82rem;
  }

  html.ys-stitch-ui #skillBar .skill-slot {
    border-radius: 10px;
    border-width: 1.5px;
  }

  html.ys-stitch-ui .upgrade-card {
    border-radius: 12px;
    padding: 10px;
  }

  html.ys-stitch-ui #levelUpScreen h1 {
    font-size: 1.35rem;
  }
}