/* ============================================================
   themes.css — GAME-GENRE THEMES
   Activated via html[data-theme="..."]. Each theme overrides the
   shared CSS variables (palette + fonts + accent), so every
   component — including the scrolling skill bar — re-skins itself.
   Time-of-day themes (dawn/day/dusk/night) live in styles.css.
   ============================================================ */

/* ----------------------------------------------------------------
   PIXEL — retro pixel, Pokémon B/W-era: bright, blue & white, chunky
   ---------------------------------------------------------------- */
html[data-theme="pixel"] {
  --bg:    #dfeaf6;
  --bg-1:  #ffffff;
  --bg-2:  #cdddf0;
  --bg-3:  #bcd0ea;
  --line:  #5a7fb5;
  --line-soft: #aac2e2;
  --text:  #16233f;
  --muted: #38507a;
  --faint: #5d76a3;
  --accent:      #ffcb05;
  --accent-2:    #ffd633;
  --accent-ink:  #16233f;
  --accent-glow: rgba(47,109,246,0.20);
  --accent-text: #2657c2;
  --grid-line: rgba(40,80,150,0.10);
  --dot:       rgba(40,80,150,0.10);
  --veil:      rgba(255,255,255,0);
  --vignette:  rgba(38,87,194,0.10);
  --nav-bg:    rgba(223,234,246,0.88);
  --glow-1:    rgba(47,109,246,0.18);
  --glow-2:    rgba(255,203,5,0.20);
  --radius: 0px; --radius-sm: 0px;
  --ff-display: 'VT323', ui-monospace, monospace;
  --ff-body: 'VT323', ui-monospace, monospace;
  --ff-mono: 'VT323', ui-monospace, monospace;
  font-size: 18px;
}
html[data-theme="pixel"] .v2-name-main { font-family: 'Press Start 2P', system-ui, sans-serif; }
html[data-theme="pixel"] .section-title { font-size: clamp(24px, 3.4vw, 40px); letter-spacing: 0; }
html[data-theme="pixel"] .v2-name-main { font-size: clamp(34px, 8vw, 92px); text-shadow: 4px 4px 0 var(--accent-text); }
html[data-theme="pixel"] .v2row-title { font-size: clamp(22px, 3.6vw, 42px); }
html[data-theme="pixel"] .contact-title { font-size: clamp(28px, 4.4vw, 52px); }
html[data-theme="pixel"] .pcard,
html[data-theme="pixel"] .skill-col,
html[data-theme="pixel"] .modal { border-width: 2px; box-shadow: 5px 5px 0 var(--line-soft); }
html[data-theme="pixel"] .btn,
html[data-theme="pixel"] .filters button,
html[data-theme="pixel"] .chip,
html[data-theme="pixel"] .lang-toggle,
html[data-theme="pixel"] .thememenu-btn,
html[data-theme="pixel"] .admin-toggle { border-radius: 0; border-width: 2px; }
html[data-theme="pixel"] .vw-arrow { border-radius: 0; }

/* ----------------------------------------------------------------
   CARD — trading-card game (Yu-Gi-Oh! / Shadowverse): foil gold, holo
   ---------------------------------------------------------------- */
html[data-theme="card"] {
  --bg:    #16132e;
  --bg-1:  #211c42;
  --bg-2:  #2a2450;
  --bg-3:  #342c60;
  --line:  #4a3f7a;
  --line-soft: #2f2a52;
  --text:  #f1ecff;
  --muted: #bbb2e4;
  --faint: #837cae;
  --accent:      #e9c25a;
  --accent-2:    #f1d588;
  --accent-ink:  #1a1430;
  --accent-glow: rgba(110,180,235,0.24);
  --accent-text: #ecd07e;
  --grid-line: rgba(150,120,240,0.07);
  --dot:       rgba(150,120,240,0.07);
  --veil:      rgba(0,0,0,0.18);
  --vignette:  rgba(8,4,24,0.6);
  --nav-bg:    rgba(22,19,46,0.84);
  --glow-1:    rgba(120,90,235,0.30);
  --glow-2:    rgba(90,200,235,0.22);
  --radius: 12px; --radius-sm: 8px;
  --ff-display: 'Playfair Display', Georgia, serif;
  --ff-body: 'EB Garamond', Georgia, serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;
  font-size: 18px;
}
html[data-theme="card"] .v2-name-main { text-shadow: 0 0 44px var(--accent-glow); letter-spacing: 0.02em; }
html[data-theme="card"] .eyebrow, html[data-theme="card"] .hud-tag { letter-spacing: 0.22em; }

/* ----------------------------------------------------------------
   STRATEGY — Age of Empires / Total War: parchment, ink, banner red
   ---------------------------------------------------------------- */
html[data-theme="strategy"] {
  --bg:    #e7dcc1;
  --bg-1:  #f1e8d2;
  --bg-2:  #ddd0b0;
  --bg-3:  #d0c19c;
  --line:  #9c8a63;
  --line-soft: #c9b890;
  --text:  #211808;
  --muted: #463a22;
  --faint: #6a5a38;
  --accent:      #9e2b25;
  --accent-2:    #b8392f;
  --accent-ink:  #f6efda;
  --accent-glow: rgba(158,43,37,0.18);
  --accent-text: #7e2019;
  --grid-line: rgba(120,90,40,0.08);
  --dot:       rgba(120,90,40,0.07);
  --veil:      rgba(255,255,255,0);
  --vignette:  rgba(120,90,40,0.16);
  --nav-bg:    rgba(231,220,193,0.92);
  --glow-1:    rgba(158,43,37,0.18);
  --glow-2:    rgba(168,123,60,0.22);
  --radius: 3px; --radius-sm: 2px;
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'EB Garamond', Georgia, serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;
  font-size: 18.5px;
}
html[data-theme="strategy"] .eyebrow, html[data-theme="strategy"] .hud-tag { letter-spacing: 0.22em; }
html[data-theme="strategy"] .v2-name-main { letter-spacing: 0.03em; }
/* parchment + thin serif was low-contrast — darker ink + heavier body weight
   so it stays readable everywhere (even under rain) */
html[data-theme="strategy"] body,
html[data-theme="strategy"] p,
html[data-theme="strategy"] li,
html[data-theme="strategy"] .lead,
html[data-theme="strategy"] .v2row-tagline,
html[data-theme="strategy"] .proc-q p { font-weight: 600; }
html[data-theme="strategy"] .proc-q p,
html[data-theme="strategy"] .v2row-tagline,
html[data-theme="strategy"] .v2row-detail p,
html[data-theme="strategy"] .v2row-detail li { color: var(--text); }

/* ----------------------------------------------------------------
   SURVIVAL — Don't Starve / Oxygen Not Included: charcoal sepia, ember
   ---------------------------------------------------------------- */
html[data-theme="survival"] {
  --bg:    #1b1813;
  --bg-1:  #241f18;
  --bg-2:  #2c261d;
  --bg-3:  #362f24;
  --line:  #4a4031;
  --line-soft: #2f2a20;
  --text:  #e9dfc8;
  --muted: #b3a585;
  --faint: #7d735a;
  --accent:      #c75b3b;
  --accent-2:    #d96f4c;
  --accent-ink:  #1b1813;
  --accent-glow: rgba(199,91,59,0.24);
  --accent-text: #db8a52;
  --grid-line: rgba(199,150,90,0.05);
  --dot:       rgba(199,150,90,0.05);
  --veil:      rgba(0,0,0,0.24);
  --vignette:  rgba(4,3,1,0.72);
  --nav-bg:    rgba(27,24,19,0.86);
  --glow-1:    rgba(150,60,30,0.26);
  --glow-2:    rgba(120,100,50,0.18);
  --radius: 6px; --radius-sm: 4px;
  --ff-display: 'EB Garamond', Georgia, serif;
  --ff-body: 'EB Garamond', Georgia, serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;
  font-size: 18px;
}
html[data-theme="survival"] .v2-name-main { text-shadow: 0 0 46px var(--accent-glow); letter-spacing: 0.01em; }
html[data-theme="survival"] body::after { opacity: 0.62; }
html[data-theme="survival"] .eyebrow, html[data-theme="survival"] .hud-tag { letter-spacing: 0.2em; }

/* ----------------------------------------------------------------
   RPG — Assassin's-Creed-ish: dark slate, parchment ink, gold, serif
   ---------------------------------------------------------------- */
html[data-theme="rpg"] {
  --bg:    #12141a;
  --bg-1:  #191c24;
  --bg-2:  #20242e;
  --bg-3:  #282d39;
  --line:  #3a4150;
  --line-soft: #2a2f3b;
  --text:  #ece4d2;
  --muted: #b4ac98;
  --faint: #7e786a;
  --accent:      #c9a24b;
  --accent-2:    #d8b667;
  --accent-ink:  #15120a;
  --accent-glow: rgba(201,162,75,0.22);
  --accent-text: #d4ad55;
  --grid-line: rgba(201,162,75,0.05);
  --dot:       rgba(201,162,75,0.05);
  --veil:      rgba(0,0,0,0.20);
  --vignette:  rgba(8,6,3,0.66);
  --nav-bg:    rgba(18,20,26,0.82);
  --glow-1:    rgba(140,40,30,0.26);
  --glow-2:    rgba(201,162,75,0.16);
  --radius: 4px; --radius-sm: 3px;
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body: 'EB Garamond', Georgia, serif;
  --ff-mono: 'Space Mono', ui-monospace, monospace;
  font-size: 18px;
}
html[data-theme="rpg"] { letter-spacing: 0.01em; }
html[data-theme="rpg"] .eyebrow,
html[data-theme="rpg"] .hud-tag { letter-spacing: 0.24em; }
html[data-theme="rpg"] .v2-name-main { text-shadow: 0 0 50px var(--accent-glow); letter-spacing: 0.04em; }
html[data-theme="rpg"] .section-title { letter-spacing: 0.02em; }
html[data-theme="rpg"] .chip,
html[data-theme="rpg"] .filters button.on { border-radius: 2px; }
html[data-theme="rpg"] .section-title::after {
  content: ""; display: block; width: 64px; height: 2px; margin-top: 14px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* All-caps decorative fonts (Card / Strategy / RPG): force uppercase on
   titles so Vietnamese accented chars from the fallback render as caps too
   (avoids tiny-lowercase "BạCH ĐằNG" mismatch). */
html[data-theme="card"] .v2row-title,
html[data-theme="card"] .section-title,
html[data-theme="card"] .contact-title,
html[data-theme="card"] .v2-name-main,
html[data-theme="strategy"] .v2row-title,
html[data-theme="strategy"] .section-title,
html[data-theme="strategy"] .contact-title,
html[data-theme="strategy"] .v2-name-main,
html[data-theme="rpg"] .v2row-title,
html[data-theme="rpg"] .section-title,
html[data-theme="rpg"] .contact-title,
html[data-theme="rpg"] .v2-name-main { text-transform: uppercase; }

/* ============================================================
   SKILL BAR — per-theme morph of the scrolling skill tokens
   ============================================================ */

/* PIXEL — Pokémon move/type tags: white rows, hard border + drop shadow */
html[data-theme="pixel"] .skilltoken {
  background: var(--bg-1); border: 2px solid var(--text); border-radius: 0;
  box-shadow: 5px 5px 0 var(--accent-text); padding: 12px 18px;
}
html[data-theme="pixel"] .skilltoken-mark {
  width: 13px; height: 13px; border-radius: 0; box-shadow: none;
  background: var(--accent); border: 2px solid var(--text);
}
html[data-theme="pixel"] .skilltoken-name { font-family: 'Pixelify Sans', system-ui, sans-serif; font-size: clamp(15px, 1.7vw, 20px); }

/* CARD — holographic trading-card chips: gold frame, foil sheen, gem */
html[data-theme="card"] .skilltoken {
  border: 1.5px solid var(--accent); border-radius: 12px; padding: 12px 20px;
  background:
    linear-gradient(135deg, rgba(120,90,235,0.18), rgba(90,200,235,0.14) 50%, rgba(233,194,90,0.16)),
    var(--bg-1);
  box-shadow: 0 0 0 4px var(--bg), 0 8px 26px -10px var(--accent-glow);
}
html[data-theme="card"] .skilltoken-mark {
  width: auto; height: auto; background: none; box-shadow: none; color: var(--accent-text);
}
html[data-theme="card"] .skilltoken-mark::before { content: "\25C6"; font-size: 13px; }
html[data-theme="card"] .skilltoken-name { font-family: 'Cinzel Decorative', serif; font-weight: 700; }

/* STRATEGY — parchment banners with a bronze border + chevron */
html[data-theme="strategy"] .skilltoken {
  background: var(--bg-1); border: 2px solid var(--accent); border-radius: 3px;
  box-shadow: 3px 3px 0 var(--line); padding: 11px 20px;
}
html[data-theme="strategy"] .skilltoken-mark {
  width: auto; height: auto; background: none; box-shadow: none; color: var(--accent);
}
html[data-theme="strategy"] .skilltoken-mark::before { content: "\25B2"; font-size: 12px; }
html[data-theme="strategy"] .skilltoken-name { font-family: 'Marcellus', serif; letter-spacing: 0.02em; }

/* SURVIVAL — rough wooden signs, off-white border, ember spark marker */
html[data-theme="survival"] .skilltoken {
  background: var(--bg-1); border: 2px solid var(--text); border-radius: 6px;
  box-shadow: 0 6px 0 -2px var(--line), 0 12px 22px -12px rgba(0,0,0,0.8); padding: 11px 19px;
}
html[data-theme="survival"] .skilltoken-mark {
  width: auto; height: auto; background: none; box-shadow: none; color: var(--accent-text);
}
html[data-theme="survival"] .skilltoken-mark::before { content: "\273A"; font-size: 13px; }
html[data-theme="survival"] .skilltoken-name { font-family: 'IM Fell English', serif; font-weight: 600; }

/* RPG — skill-tree: nodes threaded on a gilded line, diamond markers */
html[data-theme="rpg"] .skillbar-track { position: relative; gap: 26px; }
html[data-theme="rpg"] .skillbar-track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
  background: var(--accent); opacity: 0.4;
}
html[data-theme="rpg"] .skilltoken {
  background: var(--bg); border: 1px solid var(--accent); border-radius: 4px;
  box-shadow: 0 0 0 5px var(--bg), 0 0 22px -6px var(--accent-glow); padding: 12px 20px;
  position: relative; z-index: 1;
}
html[data-theme="rpg"] .skilltoken-mark {
  width: auto; height: auto; background: none; box-shadow: none; color: var(--accent-text);
}
html[data-theme="rpg"] .skilltoken-mark::before { content: "\2756"; font-size: 13px; }
html[data-theme="rpg"] .skilltoken-name { font-family: 'Cinzel', serif; font-weight: 600; letter-spacing: 0.02em; }