/**
 * YSkill Survivor — Stitch Etheric Arcade: Shop, Leaderboard, hub submenus.
 * Scoped to html.ys-stitch-ui — preserves all IDs and JS hooks.
 */

/* ── Shared progress menus ── */
html.ys-stitch-ui .ys-progress-menu {
  background: rgba(15, 13, 22, 0.97);
  font-family: var(--ys-font-body, "Inter", system-ui, sans-serif);
  color: var(--ys-on-surface, #e6e0ee);
  --up-accent: var(--ys-primary-fixed-dim, #00dbe9);
  --up-accent-dim: rgba(0, 219, 233, 0.12);
  --up-accent-border: rgba(0, 219, 233, 0.45);
  --up-text: var(--ys-on-surface, #e6e0ee);
  --up-text-muted: var(--ys-on-surface-variant, #b9cacb);
  --up-surface: var(--ys-surface-container, #211e28);
}

html.ys-stitch-ui .ys-progress-menu .meta-header h2,
html.ys-stitch-ui .lb-modern .lb-header-title {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ys-primary-fixed-dim, #00dbe9);
  text-shadow: 0 0 12px var(--ys-cyan-glow, rgba(0, 219, 233, 0.25));
}

html.ys-stitch-ui .settings-back-btn,
html.ys-stitch-ui .lb-modern .lb-back-btn {
  border: 1px solid rgba(0, 219, 233, 0.35);
  background: var(--ys-glass, rgba(20, 18, 27, 0.72));
  backdrop-filter: blur(12px);
  color: var(--ys-primary-fixed-dim, #00dbe9);
  border-radius: 999px;
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

html.ys-stitch-ui .settings-back-btn:hover,
html.ys-stitch-ui .settings-back-btn:focus-visible,
html.ys-stitch-ui .lb-modern .lb-back-btn:hover,
html.ys-stitch-ui .lb-modern .lb-back-btn:focus-visible {
  border-color: rgba(0, 240, 255, 0.65);
  box-shadow: 0 0 14px var(--ys-cyan-glow, rgba(0, 219, 233, 0.3));
}

html.ys-stitch-ui .idle-stats-ribbon {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid var(--ys-glass-border, rgba(255, 255, 255, 0.1));
  border-radius: 12px;
  margin-bottom: 8px;
  border-bottom: none;
}

html.ys-stitch-ui .idle-stat-num--gold {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  color: var(--ys-secondary-container, #feb700);
}

html.ys-stitch-ui .section-info-panel {
  background: rgba(0, 219, 233, 0.06);
  border: 1px solid rgba(0, 219, 233, 0.2);
  border-radius: 12px;
  color: var(--ys-on-surface-variant, #b9cacb);
}

html.ys-stitch-ui .section-info-btn {
  border-color: rgba(0, 219, 233, 0.4);
  background: rgba(0, 219, 233, 0.08);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

/* ── Shop ── */
html.ys-stitch-ui .ys-progress-menu--shop .meta-header h2 {
  color: var(--ys-secondary-container, #feb700);
  text-shadow: 0 0 12px rgba(254, 183, 0, 0.25);
}

html.ys-stitch-ui .shop-soul-daily,
html.ys-stitch-ui .shop-mastery-daily,
html.ys-stitch-ui .shop-heroes {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 219, 233, 0.18);
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}

html.ys-stitch-ui .shop-soul-daily-title {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-size: 0.92rem;
  color: var(--ys-primary, #dbfcff);
}

html.ys-stitch-ui .shop-soul-daily-trade {
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(0, 219, 233, 0.15);
  border-radius: 10px;
}

html.ys-stitch-ui .shop-soul-daily-tier.is-current {
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .shop-soul-daily-btn,
html.ys-stitch-ui .shop-hero-buy-btn {
  font-family: var(--ys-font-body, "Inter", sans-serif);
  font-weight: 700;
  border-radius: 10px;
  border: none;
  border-bottom: 3px solid rgba(0, 50, 60, 0.6);
  background: linear-gradient(180deg, #00f0ff 0%, #00c8d8 100%);
  color: rgba(0, 45, 52, 0.95);
  box-shadow: 0 0 12px rgba(0, 219, 233, 0.2);
}

html.ys-stitch-ui .shop-soul-daily-btn--bulk {
  background: var(--ys-surface-container-high, #2b2933);
  border: 1px solid rgba(0, 219, 233, 0.3);
  border-bottom-width: 2px;
  color: var(--ys-on-surface, #e6e0ee);
  box-shadow: none;
}

html.ys-stitch-ui .shop-soul-daily-btn--bulk.is-active,
html.ys-stitch-ui .shop-soul-daily-btn--bulk:active {
  background: rgba(0, 219, 233, 0.15);
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .shop-hero-card {
  background: var(--ys-glass, rgba(20, 18, 27, 0.9));
  border: 1px solid rgba(0, 219, 233, 0.2);
  border-radius: 14px;
  overflow: hidden;
}

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

html.ys-stitch-ui .shop-hero-card-price {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  color: var(--ys-secondary-container, #feb700);
}

html.ys-stitch-ui .shop-hero-buy-btn.is-owned {
  background: var(--ys-surface-container-high, #2b2933);
  border: 1px solid rgba(0, 219, 233, 0.25);
  border-bottom-width: 2px;
  color: var(--ys-on-surface-variant, #b9cacb);
  box-shadow: none;
}

/* ── Leaderboard ── */
html.ys-stitch-ui .lb-modern {
  --lb-cyan: var(--ys-primary-fixed-dim, #00dbe9);
  --lb-violet: #c9a0ff;
  --lb-gold: var(--ys-secondary-container, #feb700);
  --lb-surface: var(--ys-glass, rgba(20, 18, 27, 0.85));
  --lb-surface-2: var(--ys-surface-container, #211e28);
  --lb-border: rgba(0, 219, 233, 0.2);
  --lb-glow-cyan: 0 0 16px var(--ys-cyan-glow, rgba(0, 219, 233, 0.3));
}

html.ys-stitch-ui .lb-modern .lb-header {
  border-bottom-color: rgba(0, 219, 233, 0.15);
}

html.ys-stitch-ui .lb-modern .lb-tab {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-color: rgba(0, 219, 233, 0.25);
  background: var(--ys-surface-container, #211e28);
  border-radius: 10px;
}

html.ys-stitch-ui .lb-modern .lb-tab.is-active {
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  background: rgba(0, 219, 233, 0.12);
  color: var(--ys-primary-fixed-dim, #00dbe9);
  box-shadow: var(--lb-glow-cyan);
}

html.ys-stitch-ui .lb-modern .lb-hero-tab.is-active {
  border-color: rgba(0, 219, 233, 0.55);
  box-shadow: var(--lb-glow-cyan);
}

html.ys-stitch-ui .lb-modern .lb-card {
  border-radius: 12px;
  border-color: var(--lb-border);
  background: var(--lb-surface-2);
}

html.ys-stitch-ui .lb-modern .lb-card-rank {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .lb-modern .lb-card--top1 {
  border-color: rgba(254, 183, 0, 0.55);
  background: linear-gradient(135deg, rgba(40, 28, 8, 0.95), rgba(20, 18, 27, 0.98));
  box-shadow: 0 0 20px rgba(254, 183, 0, 0.2);
}

html.ys-stitch-ui .lb-modern .lb-card--top2 {
  border-color: rgba(0, 219, 233, 0.4);
  background: linear-gradient(135deg, rgba(8, 32, 36, 0.95), rgba(20, 18, 27, 0.98));
}

html.ys-stitch-ui .lb-modern .lb-card--top3 {
  border-color: rgba(201, 160, 255, 0.4);
  background: linear-gradient(135deg, rgba(32, 16, 48, 0.95), rgba(20, 18, 27, 0.98));
}

html.ys-stitch-ui .lb-modern .lb-my-rank-card {
  background: var(--ys-glass, rgba(20, 18, 27, 0.92));
  border: 1px solid rgba(0, 219, 233, 0.35);
  border-radius: 14px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45);
}

html.ys-stitch-ui .lb-modern .lb-status.is-loading::before {
  border-top-color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .lb-modern .lb-event-strip {
  background: rgba(254, 183, 0, 0.1);
  border: 1px solid rgba(254, 183, 0, 0.35);
  border-radius: 10px;
  color: var(--ys-secondary-container, #feb700);
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.62rem;
}

/* ── Idle / UP ribbons (dock submenus) ── */
html.ys-stitch-ui .ys-progress-menu--up .idle-section-title--meta,
html.ys-stitch-ui .idle-section-title {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .idle-buy-btn,
html.ys-stitch-ui .meta-upgrade-buy {
  border-radius: 10px;
  border-bottom: 3px solid rgba(0, 50, 60, 0.55);
  background: linear-gradient(180deg, rgba(0, 240, 255, 0.95), rgba(0, 190, 205, 0.9));
  color: rgba(0, 45, 52, 0.95);
  font-weight: 700;
}

html.ys-stitch-ui .idle-card,
html.ys-stitch-ui .meta-upgrade-card {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(0, 219, 233, 0.15);
  border-radius: 12px;
}

/* ── Hero Build (hb-modern) ── */
html.ys-stitch-ui .hb-modern {
  --hb-cyan: var(--ys-primary-fixed-dim, #00dbe9);
  --hb-violet: #c9a0ff;
  --hb-gold: var(--ys-secondary-container, #feb700);
  --hb-surface: var(--ys-glass, rgba(20, 18, 27, 0.92));
  --hb-border: rgba(0, 219, 233, 0.2);
  background: rgba(15, 13, 22, 0.97);
}

html.ys-stitch-ui .hb-modern .hero-build-header {
  border-bottom-color: rgba(0, 219, 233, 0.15);
}

html.ys-stitch-ui .hb-modern .hb-header-title,
html.ys-stitch-ui .ys-progress-menu--hero-build .meta-header h2 {
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.04em;
  color: var(--ys-primary-fixed-dim, #00dbe9);
  text-shadow: 0 0 12px var(--ys-cyan-glow, rgba(0, 219, 233, 0.25));
}

html.ys-stitch-ui .hb-modern .hb-back-btn {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  border-color: rgba(0, 219, 233, 0.35);
  background: var(--ys-glass, rgba(20, 18, 27, 0.72));
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

html.ys-stitch-ui .hb-modern .hb-main-tab {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-color: rgba(0, 219, 233, 0.25);
  background: var(--ys-surface-container, #211e28);
  border-radius: 10px;
}

html.ys-stitch-ui .hb-modern .hb-main-tab.is-active {
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  background: rgba(0, 219, 233, 0.12);
  color: var(--ys-primary-fixed-dim, #00dbe9);
  box-shadow: 0 0 14px var(--ys-cyan-glow, rgba(0, 219, 233, 0.3));
}

html.ys-stitch-ui .hb-modern .hero-build-char-card {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border-color: rgba(0, 219, 233, 0.18);
  border-radius: 12px;
}

html.ys-stitch-ui .hb-modern .hero-build-char-card.is-active {
  border-color: rgba(0, 219, 233, 0.55);
  box-shadow: 0 0 16px var(--ys-cyan-glow, rgba(0, 219, 233, 0.3));
}

html.ys-stitch-ui .hb-modern .hb-hero-summary {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(0, 219, 233, 0.2);
  border-radius: 14px;
}

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

html.ys-stitch-ui .hb-modern .hb-slot-card {
  background: var(--ys-surface-container, #211e28);
  border-color: rgba(0, 219, 233, 0.2);
  border-radius: 12px;
}

html.ys-stitch-ui .hb-modern .hb-slot-card--signature {
  border-color: rgba(254, 183, 0, 0.45);
}

html.ys-stitch-ui .hb-modern .hb-slot-card.is-slot-selected {
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  box-shadow: 0 0 14px var(--ys-cyan-glow, rgba(0, 219, 233, 0.3));
}

html.ys-stitch-ui .hb-modern .hb-footer,
html.ys-stitch-ui .hb-modern .hero-build-footer.hb-footer {
  background: rgba(20, 18, 27, 0.95);
  border-top: 1px solid rgba(0, 219, 233, 0.2);
  backdrop-filter: blur(16px);
}

html.ys-stitch-ui .hb-modern .hb-apply-btn,
html.ys-stitch-ui .hb-modern .hero-build-apply-btn {
  border-radius: 12px;
  border: none;
  border-bottom: 4px solid rgba(0, 50, 60, 0.6);
  background: linear-gradient(180deg, #00f0ff 0%, #00c8d8 100%);
  color: rgba(0, 45, 52, 0.95);
  font-family: var(--ys-font-display, "Anybody", sans-serif);
  font-weight: 800;
  font-style: italic;
  letter-spacing: 0.06em;
  box-shadow: 0 0 16px rgba(0, 219, 233, 0.25);
}

html.ys-stitch-ui .hb-modern .hb-apply-btn:active,
html.ys-stitch-ui .hb-modern .hero-build-apply-btn:active {
  transform: translateY(2px);
  border-bottom-width: 2px;
}

html.ys-stitch-ui .hb-modern .hb-inv-card,
html.ys-stitch-ui .hb-modern .hero-build-inv-card {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(0, 219, 233, 0.15);
  border-radius: 10px;
}

html.ys-stitch-ui .hb-modern .hb-inv-filter-btn.is-active,
html.ys-stitch-ui .hb-modern .hero-build-inv-filter-btn.is-active {
  border-color: var(--ys-primary-fixed-dim, #00dbe9);
  background: rgba(0, 219, 233, 0.12);
  color: var(--ys-primary-fixed-dim, #00dbe9);
}

/* ── Ranked / Tournament coming-soon ── */
html.ys-stitch-ui .ys-progress-menu--ranked .meta-header h2,
html.ys-stitch-ui .ys-progress-menu--tournament .meta-header h2 {
  color: #c9a0ff;
  text-shadow: 0 0 12px rgba(201, 160, 255, 0.3);
}

html.ys-stitch-ui .hub-coming-soon-panel {
  background: var(--ys-glass, rgba(20, 18, 27, 0.85));
  border: 1px solid rgba(0, 219, 233, 0.18);
  border-radius: 16px;
  margin: 12px;
}

html.ys-stitch-ui .hub-coming-soon-badge {
  font-family: var(--ys-font-mono, "JetBrains Mono", monospace);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: rgba(0, 45, 52, 0.95);
  background: linear-gradient(180deg, var(--ys-primary-container, #00f0ff), #00c8d8);
  border: 1px solid rgba(0, 219, 233, 0.45);
  border-radius: 999px;
}

html.ys-stitch-ui .hub-coming-soon-title {
  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 .hub-coming-soon-body {
  color: var(--ys-on-surface-variant, #b9cacb);
  font-family: var(--ys-font-body, "Inter", sans-serif);
}

/* ── Ranked preview — stay inside 9:16 gameStage ── */
html.ys-stitch-ui #gameStage .ys-progress-menu--ranked-preview .ranked-preview-scroll {
  max-width: 100%;
  padding-left: 10px;
  padding-right: 10px;
}

html.ys-stitch-ui #gameStage .ys-progress-menu--ranked-preview .ranked-preview-card,
html.ys-stitch-ui #gameStage .ys-progress-menu--ranked-preview .ranked-complete-screen {
  max-width: 100%;
}