/* ════════════════════════════════════════════════════════════════════
   pixel.css — design override layer for new-lvl.pro
   Loaded AFTER existing page CSS. Remaps color tokens to warm dungeon
   palette, switches fonts to Press Start 2P + VT323, adds CRT effect,
   and provides shared .pix-nav / .pix-footer components.
   ════════════════════════════════════════════════════════════════════ */

/* ─── COLOUR TOKENS (override existing :root) ─── */
:root {
  /* Warm dungeon backgrounds */
  --bg:        #15110d;
  --bg2:       #1d1814;
  --bg3:       #2a221b;
  --bg-deep:   #0d0a08;
  --surface:   #3a2a1e;

  /* Warm borders */
  --border:    #3a2e22;
  --border2:   #5b4732;
  --border3:   #7a5a3f;

  /* Text: parchment */
  --text:      #f0e3c8;
  --muted:     #c2ad84;
  --dim:       #8a7a5e;

  /* Gold replaces "blue" everywhere except MP bar */
  --blue:      #f0b338;
  --blue-dim:  #5a3d10;

  /* Copper replaces "purple" and "teal" */
  --purple:    #d97a3a;
  --purple-dim:#5a2a10;
  --teal:      #f0b338;
  --teal-dim:  #5a3d10;

  /* Copper replaces "amber" */
  --amber:     #d97a3a;
  --amber-dim: #5a2a10;

  /* RPG bars — keep distinctive colours */
  --green:     #6dd66d;
  --green-dim: #1d4a1d;
  --red:       #e54b4b;
  --red-dim:   #5a1818;

  /* Extra dungeon palette */
  --gold:      #f0b338;
  --gold-d:    #5a3d10;
  --gold-l:    #ffd770;
  --copper:    #d97a3a;
  --copper-d:  #5a2a10;
  --parchment: #d9c79a;
  --wood:      #6b4423;
  --wood-d:    #3a2410;
}

/* ─── BODY ─── */
body {
  background: var(--bg) !important;
  background-image:
    radial-gradient(ellipse at 20% 0%,  rgba(255,160,60,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(217,122,58,0.05) 0%, transparent 55%),
    linear-gradient(180deg, #0d0a08 0%, var(--bg) 100%) !important;
  background-attachment: fixed !important;
  /* JetBrains Mono: единые метрики для кириллицы и латиницы */
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-weight: 400 !important;
  -webkit-font-smoothing: antialiased !important;
}

/* ─── PIXEL TYPOGRAPHY ─── */
/* Headings → Press Start 2P with adjusted sizes */
h1, h2, h3, h4,
.hero h1,
h2.section-title,
h3.sub-title,
.nav-logo,
.card-term,
.author-name,
.result-score,
.related-name,
.final h2,
.hero-title,
.analogy-title {
  font-family: 'Press Start 2P', monospace !important;
  -webkit-font-smoothing: none !important;
  text-rendering: geometricPrecision !important;
}

/* Hero h1: was clamp(32px, 4.5vw, 52px) → Press Start 2P */
.hero h1 {
  font-size: clamp(15px, 2.4vw, 24px) !important;
  line-height: 1.6  !important;
  letter-spacing: 0.02em !important;
  text-shadow: 3px 3px 0 #0d0a08 !important;
  margin-bottom: 22px !important;
}

/* Section h2 */
h2.section-title {
  font-size: 17px !important;
  line-height: 1.5 !important;
  text-shadow: 2px 2px 0 #0d0a08 !important;
}

/* Sub-heading h3 */
h3.sub-title {
  font-size: 11px !important;
  line-height: 1.55 !important;
}

/* Body text — JetBrains Mono для консистентных метрик */
p.body-text, .back-text, .analogy-text,
.analogy-note, .hero-lead, .attention, .tip,
.tip-green, .tip-red {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13.5px !important;
  line-height: 1.75 !important;
}

/* Mono labels (JetBrains → Press Start 2P tiny) */
.section-tag, .analogy-label, .attention-label, .tip-label,
.hero-type, .hero-read, .hero-count, .hero-badge,
.metric-label, .example-label, .interview-title,
.related-type, .hero-breadcrumb, .hero-meta,
.q-cat, .q-num, .back-label, .card-cat, .card-num,
.card-flip-hint, .card-formula, .card-short,
.filter-btn, .cards-counter,
.author-role, .author-link,
.nav-link, .nav-back, .nav-tg,
.result-score-label, .result-bars-title, .result-weak-title,
.progress-label, .progress-pct,
.bar-val, .bar-label,
.hero-hint,
th, .compare-table th {
  font-family: 'Press Start 2P', monospace !important;
}

/* Scale down all the small mono labels */
.section-tag, .hero-type, .hero-read, .hero-count, .hero-badge,
.analogy-label, .attention-label, .tip-label,
.back-label, .card-cat, .card-num, .card-flip-hint,
.card-formula, .card-short, .filter-btn, .cards-counter,
.author-role, .example-label, .interview-title, .related-type,
.hero-breadcrumb *, .q-cat, .q-num, .hero-hint,
.result-score-label, .result-bars-title, .result-weak-title,
.bar-val, .bar-label, .progress-label, .progress-pct {
  font-size: 9px !important;
  letter-spacing: 0.04em !important;
}

.compare-table th { font-size: 8px !important; }
.author-link { font-size: 8px !important; }
.nav-link, .nav-back, .nav-tg { font-size: 8px !important; }

/* Hero nav breadcrumb */
.hero-breadcrumb {
  font-size: 9px !important;
  letter-spacing: 0.06em !important;
}

/* Related card names */
.related-name {
  font-size: 11px !important;
  line-height: 1.45 !important;
}
.related-desc {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
}

/* Author block */
.author-name { font-size: 13px !important; }
.author-text {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12.5px !important;
  line-height: 1.65 !important;
}

/* Card term on flip cards */
.card-term { font-size: 14px !important; line-height: 1.4 !important; }

/* Result score big number */
.result-score {
  font-size: 44px !important;
  text-shadow: 3px 3px 0 #0d0a08 !important;
}

/* Final box */
.final h2 {
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.final p {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}

/* ─── HERO SECTION ─── */
.hero {
  background: linear-gradient(180deg, var(--bg) 0%, #0d0a08 100%) !important;
}
.hero::before {
  background: radial-gradient(circle, rgba(255,160,60,0.14) 0%, transparent 65%) !important;
}

/* ─── NAV OVERRIDE (existing .nav class) ─── */
.nav {
  background: rgba(21,17,13,0.95) !important;
  border-bottom: 3px solid #5b4732 !important;
}
.nav-logo span { color: #f0b338 !important; }
.nav-logo { font-size: 11px !important; }
.nav-tg {
  color: #f0e3c8 !important;
  border-color: #5b4732 !important;
  background: linear-gradient(180deg, #d97a3a 0%, #8a3f15 100%) !important;
  box-shadow: 0 0 0 2px #0d0a08, inset 0 -3px 0 rgba(0,0,0,0.4) !important;
  font-weight: normal !important;
}
.nav-tg:hover { background: linear-gradient(180deg, #e88a4a 0%, #9a4f25 100%) !important; }

/* Pixel-art nav hover underline colour */
.nav-link:hover { border-bottom-color: #f0b338 !important; }

/* ─── NEW PIXEL NAV (class .pix-nav) ─── */
.pix-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(21,17,13,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 3px solid #5b4732;
  padding: 0 24px;
  display: flex; align-items: center; gap: 4px;
  overflow-x: auto;
}
.pix-nav::-webkit-scrollbar { height: 0 }
.pix-nav .pn-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 11px; color: #f0e3c8; white-space: nowrap;
  margin-right: 18px; padding: 14px 0; text-decoration: none;
}
.pix-nav .pn-logo span { color: #f0b338; }
.pix-nav a.pn-link {
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; color: #c2ad84; padding: 14px 9px;
  white-space: nowrap; border-bottom: 3px solid transparent;
  letter-spacing: 0.04em; transition: color .15s, border-color .15s;
  text-transform: uppercase; text-decoration: none; line-height: 1;
}
.pix-nav a.pn-link:hover { color: #f0e3c8; border-bottom-color: #f0b338; }
.pix-nav .pn-tg {
  margin-left: auto;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px; padding: 8px 14px;
  background: linear-gradient(180deg, #d97a3a 0%, #8a3f15 100%);
  color: #fff; text-decoration: none;
  box-shadow: 0 0 0 2px #0d0a08, inset 0 -3px 0 rgba(0,0,0,0.4);
  letter-spacing: 0.04em; white-space: nowrap;
  transition: filter .15s;
}
.pix-nav .pn-tg:hover { filter: brightness(1.2); }

/* ─── PIXEL FOOTER ─── */
.pix-footer {
  border-top: 3px solid #5b4732;
  padding: 24px 40px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 16px;
  max-width: 1100px; margin: 0 auto;
  margin-top: 40px;
}
.pix-footer .pf-logo {
  font-family: 'Press Start 2P', monospace;
  font-size: 10px; color: #c2ad84;
}
.pix-footer .pf-logo span { color: #f0b338; }
.pix-footer nav { display: flex; gap: 16px; flex-wrap: wrap; }
.pix-footer nav a {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px; color: #8a7a5e; text-decoration: none;
  letter-spacing: 0.05em; text-transform: uppercase;
}
.pix-footer nav a:hover { color: #f0e3c8; }
.pix-footer .pf-copy {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px; color: #5e503c; letter-spacing: 0.05em;
}

/* ─── CRT SCANLINES (off — убрано по просьбе) ─── */
/* body::after, body::before — не используются */

/* ─── BLOCKS: pixel corners / no border-radius ─── */
.analogy, .tip, .tip-green, .tip-red, .attention,
.example-block, .interview-block, .final,
.metric-card, .related-card, .author-block,
.flip-front, .flip-back, .q-card, .result-header,
.result-bars, .result-weak, .tg-cta, .hero-toc a,
.filter-btn, .q-option, input, select, textarea, button {
  border-radius: 0 !important;
}

/* ─── ANALOGY blocks ─── */
.analogy {
  border-color: var(--gold) !important;
  background: rgba(240,179,56,0.05) !important;
}
.analogy::before { background: var(--gold) !important; }
.analogy-label { color: var(--gold) !important; }
.analogy-text strong { color: var(--copper) !important; }

/* ─── ATTENTION / TIP ─── */
.attention {
  border-color: var(--copper) !important;
  background: rgba(217,122,58,0.07) !important;
  color: #f0d8b8 !important;
}
.attention-label { color: var(--copper) !important; }

.tip {
  border-color: var(--gold) !important;
  background: rgba(240,179,56,0.06) !important;
  color: #f0e3c8 !important;
}
.tip-label { color: var(--gold) !important; }

.tip-green {
  border-color: var(--green) !important;
  background: rgba(109,214,109,0.06) !important;
  color: #c8f0c8 !important;
}
.tip-green .tip-label { color: var(--green) !important; }

.tip-red {
  border-color: var(--red) !important;
  background: rgba(229,75,75,0.07) !important;
  color: #f0c8c8 !important;
}
.tip-red .tip-label { color: var(--red) !important; }

/* ─── EXAMPLE BLOCKS ─── */
.label-bad, .tag-bad { color: var(--red) !important; }
.label-good, .tag-good { color: var(--green) !important; }
.tag-bad { border-color: var(--red-dim) !important; background: rgba(229,75,75,0.07) !important; }
.tag-good { border-color: var(--green-dim) !important; background: rgba(109,214,109,0.07) !important; }

/* ─── METRIC CARDS ─── */
.mc-blue::before { background: var(--gold) !important; }
.mc-blue .metric-label { color: var(--gold) !important; }
.mc-teal::before { background: var(--gold) !important; }
.mc-teal .metric-label { color: var(--gold) !important; }
.mc-purple::before { background: var(--copper) !important; }
.mc-purple .metric-label { color: var(--copper) !important; }
.mc-amber::before { background: var(--copper) !important; }
.mc-amber .metric-label { color: var(--copper) !important; }

/* ─── INTERVIEW BLOCK ─── */
.interview-title { color: var(--gold) !important; }
.interview-q::before {
  color: var(--gold) !important;
  background: var(--gold-d) !important;
}

/* ─── HERO TOC ─── */
.hero-toc a {
  font-size: 8px !important;
  color: var(--gold) !important;
  border-color: var(--gold-d) !important;
  background: rgba(240,179,56,0.06) !important;
}
.hero-toc a:hover { background: rgba(240,179,56,0.14) !important; }

/* ─── HERO TYPE BADGE ─── */
.hero-type {
  border-color: var(--gold-d) !important;
  color: var(--gold) !important;
  background: rgba(240,179,56,0.07) !important;
}

/* ─── FILTER BUTTONS (cards page) ─── */
.filter-btn.active {
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  background: rgba(240,179,56,0.07) !important;
}
.filter-btn:hover {
  border-color: var(--gold) !important;
  color: var(--text) !important;
}

/* ─── FLIP CARDS ─── */
.flip-front, .flip-back {
  border: 2px solid var(--border2) !important;
}
.flip-front { background: var(--bg2) !important; }
.flip-back  {
  background: linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%) !important;
  border-color: var(--gold) !important;
}
.card-cat.cat-base {
  color: var(--gold) !important;
  border-color: var(--gold-d) !important;
  background: rgba(240,179,56,0.07) !important;
}
.card-cat.cat-errors {
  color: var(--red) !important;
  border-color: var(--red-dim) !important;
}
.card-cat.cat-design {
  color: var(--green) !important;
  border-color: var(--green-dim) !important;
}
.card-cat.cat-advanced {
  color: var(--copper) !important;
  border-color: var(--copper-d) !important;
}
.back-label { color: var(--xp, #6dd66d) !important; }
.back-example {
  color: var(--copper) !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
}
.card-formula {
  color: var(--copper) !important;
  border-top-color: var(--border) !important;
}

/* ─── QUIZ ─── */
.q-cat.qc-metrics { color: var(--gold) !important; border-color: var(--gold-d) !important; }
.q-cat.qc-sql     { color: var(--copper) !important; border-color: var(--copper-d) !important; }
.q-cat.qc-ab      { color: var(--red) !important; border-color: var(--red-dim) !important; }
.q-cat.qc-case    { color: var(--green) !important; border-color: var(--green-dim) !important; }

.q-option.selected { border-color: var(--gold) !important; background: rgba(240,179,56,0.07) !important; }
.q-option.selected .q-option-letter { color: var(--gold) !important; border-color: var(--gold) !important; }
.btn-next {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: var(--gold) !important;
  border-color: var(--gold-d) !important;
  background: rgba(240,179,56,0.08) !important;
}
.btn-next:hover { background: rgba(240,179,56,0.18) !important; }
.btn-restart {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
}

.progress-bar { background: var(--gold) !important; }
.progress-pct { color: var(--gold) !important; }

/* ─── AUTHOR ─── */
.author-avatar {
  background: var(--gold-d) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
}
.author-role { color: var(--gold) !important; }
.author-link {
  color: var(--gold) !important;
  border-color: var(--gold-d) !important;
  background: rgba(240,179,56,0.06) !important;
}
.author-link:hover { background: rgba(240,179,56,0.14) !important; }

/* ─── RELATED GRID ─── */
.related-type { color: var(--gold) !important; }
.related-card:hover { border-color: var(--border3) !important; }

/* ─── TG CTA BLOCK ─── */
.tg-cta {
  background: rgba(240,179,56,0.06) !important;
  border-color: var(--gold-d) !important;
}
.tg-cta-text { color: var(--muted) !important; }
.tg-cta-text strong { color: var(--text) !important; }
.tg-cta-btn {
  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  color: var(--gold) !important;
  border-color: var(--gold) !important;
  background: rgba(240,179,56,0.08) !important;
}
.tg-cta-btn:hover { background: rgba(240,179,56,0.18) !important; }

/* ─── SUBTOPICS ─── */
.subtopic-item::before { color: var(--gold) !important; }

/* ─── SCALE BAR ─── */
.scale-seg:first-child { background: rgba(109,214,109,0.25) !important; color: var(--green) !important; }

/* ─── STAT BARS (SQL sandbox) ─── */
.bar-track { box-shadow: 0 0 0 2px var(--border2) !important; }

/* ─── SCROLLBARS ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg) !important; }
::-webkit-scrollbar-thumb { background: var(--border2) !important; }
::-webkit-scrollbar-thumb:hover { background: var(--border3) !important; }

/* ─── SELECTION ─── */
::selection {
  background: rgba(240,179,56,0.25) !important;
  color: var(--text) !important;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 640px) {
  .hero h1 { font-size: 14px !important; }
  h2.section-title { font-size: 13px !important; }
  .pix-footer { padding: 20px 24px; }
}