/* ════════════════════════════════════════════════════════════════
   Temporal Odyssey — Professional Redesign Override
   Inspired by: Coursera, Khan Academy, Duolingo
   Clean, minimal, no emoji — production-grade UI
   ════════════════════════════════════════════════════════════════ */

/* ── Root Override ── */
:root {
  --bg-deep: #0b0b12;
  --bg-surface: #131320;
  --bg-card: #1a1a2e;
  --bg-card-hover: #20203a;
  --border-subtle: rgba(255,255,255,.06);
  --border-accent: rgba(201,168,76,.18);
  --text-primary: #e8e4de;
  --text-secondary: #9b978f;
  --text-muted: #6b6760;
  --accent: #c9a84c;
  --accent-light: #e8d5a3;
  --myth-color: #8b7abf;
  --myth-bg: #1a1530;
  --battle-color: #d06070;
  --battle-bg: #251018;
  --dynasty-color: #c9a84c;
  --dynasty-bg: #1a1508;
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.5);
  --transition: .25s cubic-bezier(.4,0,.2,1);
}

/* ── Base ── */
body {
  background: var(--bg-deep) !important;
  color: var(--text-primary) !important;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
body::before { opacity: .15 !important; }

/* ── Hide ornamental SVGs (lotus panels) ── */
.orn-panel { display: none !important; }

/* ── Hide globe/flag on landing ── */
.globe { display: none !important; }

/* ── Typography refinements ── */
.htitle {
  font-size: clamp(28px, 5.5vw, 48px) !important;
  letter-spacing: 1px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}
.hsub {
  font-size: clamp(11px, 2vw, 14px) !important;
  letter-spacing: 3px !important;
  color: var(--text-secondary) !important;
  font-weight: 400 !important;
}
.hdesc {
  font-size: clamp(14px, 1.8vw, 17px) !important;
  color: var(--text-secondary) !important;
  font-style: normal !important;
  line-height: 1.7 !important;
  max-width: 520px !important;
}
.hdiv {
  width: 80px !important;
  height: 2px !important;
  background: var(--accent) !important;
  margin: 0 auto 20px !important;
}
.hdiv::before, .hdiv::after { content: none !important; }

/* ── Feature tag ── */
.ftag {
  background: rgba(201,168,76,.08) !important;
  border: 1px solid rgba(201,168,76,.2) !important;
  font-size: 13px !important;
  padding: 6px 18px !important;
  border-radius: 20px !important;
  animation: none !important;
  letter-spacing: .5px !important;
}

/* ══════════════════════════════════════
   NAVIGATION — Clean & Minimal
   ══════════════════════════════════════ */
.topnav {
  background: rgba(11,11,18,.85) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  padding: 12px 20px !important;
  border-bottom: 1px solid var(--border-subtle);
}
.tnbrand {
  font-size: 15px !important;
  letter-spacing: 2px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.tnlink {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  transition: color var(--transition) !important;
}
.tnlink:hover { color: var(--accent-light) !important; }

/* ── User nav ── */
.nav-hello { font-size: 13px !important; color: var(--text-secondary) !important; }
.nav-logout { font-size: 12px !important; }

/* ── Hamburger ── */
.hamburger-btn {
  font-size: 18px !important;
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════
   LANDING — Refined Hero
   ══════════════════════════════════════ */
#s-landing {
  background-image:
    linear-gradient(180deg,
      rgba(8, 8, 16, 0.35) 0%,
      rgba(8, 8, 16, 0.25) 35%,
      rgba(8, 8, 16, 0.45) 70%,
      rgba(8, 8, 16, 0.72) 100%
    ),
    url('/static/assets/images/backgrounds/763b77e7-0540-469c-bedc-8eceb70f3a21.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #0b0b12 !important;
}

.hero {
  padding: 30px 24px !important;
}

/* ── Intro trigger ── */
.intro-trigger {
  font-size: 13px !important;
  border-color: var(--border-accent) !important;
}

/* ══════════════════════════════════════
   CATEGORY CARDS — Clean & Professional
   ══════════════════════════════════════ */
.cats {
  gap: 14px !important;
  padding: 20px 20px 80px !important;
}
.cat {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border-subtle) !important;
  transition: all var(--transition) !important;
  overflow: hidden !important;
  background: var(--bg-card) !important;
}
.cat:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border-accent) !important;
  box-shadow: var(--shadow-lg) !important;
}
.cat[data-cat="myth"] { background: var(--myth-bg) !important; }
.cat[data-cat="myth"]:hover { border-color: var(--myth-color) !important; box-shadow: 0 8px 32px rgba(139,122,191,.15) !important; }
.cat[data-cat="battle"] { background: var(--battle-bg) !important; }
.cat[data-cat="battle"]:hover { border-color: var(--battle-color) !important; box-shadow: 0 8px 32px rgba(208,96,112,.15) !important; }
.cat[data-cat="dynasty"] { background: var(--dynasty-bg) !important; }
.cat[data-cat="dynasty"]:hover { border-color: var(--dynasty-color) !important; box-shadow: 0 8px 32px rgba(201,168,76,.15) !important; }

/* Category icon area — clean gradient background instead of emoji */
.cat-img {
  position: relative !important;
  min-height: 100px !important;
}
.cat-em {
  font-size: 0 !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 2 !important;
}
/* Category icons replaced with CSS initials */
.cat[data-cat="myth"] .cat-em {
  background: rgba(139,122,191,.2) !important;
  border: 1.5px solid rgba(139,122,191,.4) !important;
}
.cat[data-cat="myth"] .cat-em::after {
  content: 'HT' !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--myth-color) !important;
  letter-spacing: .5px;
}
.cat[data-cat="battle"] .cat-em {
  background: rgba(208,96,112,.2) !important;
  border: 1.5px solid rgba(208,96,112,.4) !important;
}
.cat[data-cat="battle"] .cat-em::after {
  content: 'CT' !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--battle-color) !important;
  letter-spacing: .5px;
}
.cat[data-cat="dynasty"] .cat-em {
  background: rgba(201,168,76,.2) !important;
  border: 1.5px solid rgba(201,168,76,.4) !important;
}
.cat[data-cat="dynasty"] .cat-em::after {
  content: 'TĐ' !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--dynasty-color) !important;
  letter-spacing: .5px;
}
.cat-img-ov {
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.6) 100%) !important;
}
.cat[data-cat="myth"] .cat-img { background: radial-gradient(circle at 50% 40%, #2a1a50, #131320) !important; }
.cat[data-cat="battle"] .cat-img { background: radial-gradient(circle at 50% 40%, #3a1520, #131320) !important; }
.cat[data-cat="dynasty"] .cat-img { background: radial-gradient(circle at 50% 40%, #2a2008, #131320) !important; }

.cat-foot {
  padding: 12px 14px !important;
  border-top: 1px solid var(--border-subtle) !important;
  text-align: left !important;
}
.cat-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  margin-bottom: 6px !important;
}
.cat[data-cat="myth"] .cat-name { color: var(--myth-color) !important; }
.cat[data-cat="battle"] .cat-name { color: var(--battle-color) !important; }
.cat[data-cat="dynasty"] .cat-name { color: var(--dynasty-color) !important; }

.cat-pill {
  font-size: 11px !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
}
.cat[data-cat="myth"] .cat-pill { background: rgba(139,122,191,.12) !important; color: var(--myth-color) !important; border-color: rgba(139,122,191,.25) !important; }
.cat[data-cat="battle"] .cat-pill { background: rgba(208,96,112,.12) !important; color: var(--battle-color) !important; border-color: rgba(208,96,112,.25) !important; font-size: 11px !important; }
.cat[data-cat="battle"] .cat-pill::before { font-size: 11px !important; }
.cat[data-cat="dynasty"] .cat-pill { background: rgba(201,168,76,.12) !important; color: var(--dynasty-color) !important; border-color: rgba(201,168,76,.25) !important; }

.cat-meta {
  font-size: 11px !important;
  padding: 6px 12px !important;
  color: var(--text-muted) !important;
  letter-spacing: 0 !important;
}

/* ══════════════════════════════════════
   BUTTONS — Professional
   ══════════════════════════════════════ */
.btn-main {
  background: var(--accent) !important;
  background-image: none !important;
  border: none !important;
  color: #0b0b12 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 12px 36px !important;
  border-radius: var(--radius-sm) !important;
  letter-spacing: .5px !important;
  box-shadow: 0 2px 8px rgba(201,168,76,.25) !important;
  transition: all var(--transition) !important;
  text-transform: uppercase;
}
.btn-main:hover {
  background: var(--accent-light) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 16px rgba(201,168,76,.35) !important;
}
.btn-ghost {
  font-size: 13px !important;
  padding: 8px 22px !important;
  border-radius: var(--radius-sm) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--text-secondary) !important;
  transition: all var(--transition) !important;
}
.btn-ghost:hover {
  border-color: var(--accent) !important;
  color: var(--accent-light) !important;
  background: rgba(201,168,76,.05) !important;
}

/* ══════════════════════════════════════
   AUTH SCREEN — Modern & Clean
   ══════════════════════════════════════ */
.auth-screen {
  background: rgba(11,11,18,.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.auth-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  max-width: 420px !important;
}
.auth-hero { padding: 16px 28px 10px !important; }
.auth-kicker {
  font-size: 11px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  font-weight: 600 !important;
}
.auth-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: var(--text-primary) !important;
}
.auth-subtitle {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}
.auth-demo {
  background: rgba(201,168,76,.06) !important;
  border: 1px solid rgba(201,168,76,.12) !important;
  border-radius: var(--radius-sm) !important;
  font-size: 12px !important;
  padding: 10px 16px !important;
  color: var(--text-secondary) !important;
}
.auth-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
}
.auth-tab {
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  padding: 10px 0 !important;
  transition: all var(--transition) !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
}
.auth-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.auth-input {
  background: var(--bg-deep) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 14px !important;
  padding: 11px 14px !important;
  transition: border-color var(--transition) !important;
}
.auth-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,.1) !important;
}
.auth-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: var(--text-secondary) !important;
}
.auth-btn {
  width: 100% !important;
  margin-top: 8px !important;
}
.auth-note {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
.auth-error {
  color: #e05858 !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════
   SIDE MENU — Clean Panel
   ══════════════════════════════════════ */
.side-menu {
  background: var(--bg-surface) !important;
  border-left: 1px solid var(--border-subtle) !important;
}
.side-menu-top {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 16px 18px !important;
}
.side-menu-brand {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  color: var(--accent) !important;
}
.side-menu-close {
  font-size: 18px !important;
  color: var(--text-muted) !important;
  cursor: pointer;
}
.side-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
}
.side-tab {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  padding: 10px 16px !important;
}
.side-tab.active {
  color: var(--accent) !important;
}
.side-menu-user {
  padding: 16px 18px !important;
}
.side-user-stats {
  font-size: 12px !important;
}
.side-stat {
  color: var(--text-secondary) !important;
  font-size: 12px !important;
}
.side-menu-item {
  font-size: 13px !important;
  padding: 10px 18px !important;
  color: var(--text-secondary) !important;
  transition: all var(--transition) !important;
  cursor: pointer;
}
.side-menu-item:hover {
  background: rgba(201,168,76,.04) !important;
  color: var(--text-primary) !important;
}
.side-menu-item.danger {
  color: #e05858 !important;
}
.side-menu-divider {
  border-color: var(--border-subtle) !important;
  margin: 4px 18px !important;
}
.side-menu-section {
  font-size: 10px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  padding: 12px 18px 6px !important;
  font-weight: 700 !important;
}

/* ── Side Accordion ── */
.side-acc-header {
  font-size: 13px !important;
  padding: 10px 18px !important;
  color: var(--text-primary) !important;
}
.side-acc-body {
  padding: 0 18px 12px !important;
}
.side-acc-desc {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
.side-unlock-badge {
  font-size: 10px !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle) !important;
}
.side-unlock-badge.unlocked {
  background: rgba(76,175,136,.1) !important;
  color: #4caf88 !important;
  border-color: rgba(76,175,136,.25) !important;
}
.side-acc-btn {
  font-size: 12px !important;
  padding: 6px 14px !important;
  border-radius: var(--radius-sm) !important;
  background: rgba(201,168,76,.1) !important;
  border: 1px solid var(--border-accent) !important;
  color: var(--accent) !important;
  cursor: pointer;
  transition: all var(--transition) !important;
}
.side-acc-btn:hover {
  background: rgba(201,168,76,.15) !important;
}
.side-acc-unlock-req {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  padding: 4px 0 !important;
}
.side-acc-bar {
  background: rgba(255,255,255,.06) !important;
  border-radius: 3px !important;
  height: 4px !important;
}
.side-acc-fill {
  border-radius: 3px !important;
  height: 100% !important;
}

/* ── Language Options ── */
.side-lang-opt {
  font-size: 13px !important;
  padding: 10px 18px !important;
}
.slang-flag {
  font-size: 0 !important;
  width: 24px !important;
  height: 16px !important;
  border-radius: 2px !important;
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 8px !important;
}

/* ══════════════════════════════════════
   MAP SCREEN — Clean
   ══════════════════════════════════════ */
.mapbar {
  background: rgba(11,11,18,.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 10px 16px !important;
}
.mapbar-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
  letter-spacing: .3px !important;
}
.back-btn {
  font-size: 16px !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
  transition: color var(--transition) !important;
}
.back-btn:hover { color: var(--accent) !important; }

.chip {
  font-size: 11px !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

#s-map {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(139,122,191,.04) 0, transparent 50%),
    radial-gradient(ellipse at 80% 15%, rgba(201,168,76,.03) 0, transparent 40%),
    linear-gradient(180deg, #10101a, #0b0b12) !important;
}
/* Dynamic map theme overrides */
#s-map.theme-myth {
  background:
    radial-gradient(ellipse at 30% 15%, rgba(139,122,191,.06) 0, transparent 50%),
    linear-gradient(180deg, #110f1e, #0b0b12) !important;
}
#s-map.theme-battle {
  background:
    radial-gradient(ellipse at 30% 15%, rgba(208,96,112,.05) 0, transparent 50%),
    linear-gradient(180deg, #14101a, #0b0b12) !important;
}
#s-map.theme-dynasty {
  background:
    radial-gradient(ellipse at 30% 15%, rgba(201,168,76,.05) 0, transparent 50%),
    linear-gradient(180deg, #141208, #0b0b12) !important;
}

/* ── Difficulty banner ── */
.diff-banner {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 8px 16px !important;
}
.diff-icon {
  font-size: 0 !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.diff-info strong {
  font-size: 11px !important;
  letter-spacing: .5px !important;
}
.diff-info span {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}

/* ── Reward section ── */
.reward-section {
  padding: 8px 16px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}
.reward-ttl {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}

/* ── Path arrows ── */
.path-arrow, .path-nav-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition) !important;
}
.path-arrow:hover, .path-nav-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════
   EVENT SCREEN — Content focused
   ══════════════════════════════════════ */
#s-event {
  background: var(--bg-deep) !important;
}
.evhero {
  position: relative !important;
}
.evhov {
  background: linear-gradient(180deg, transparent 0%, rgba(11,11,18,.85) 100%) !important;
}
.evhem {
  font-size: 0 !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(201,168,76,.15) !important;
  border: 1.5px solid rgba(201,168,76,.3) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.evhtitle {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
  letter-spacing: .3px !important;
}
.evhyr {
  font-size: 12px !important;
  color: var(--accent) !important;
  letter-spacing: 1px !important;
  font-weight: 600 !important;
}
.evbody {
  background: var(--bg-deep) !important;
}

/* ══════════════════════════════════════
   VIDEO MODAL — YouTube Embed
   ══════════════════════════════════════ */
.video-responsive {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 */
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.video-responsive iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
}
.video-responsive .vsim {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.vmod {
  max-width: 720px !important;
  width: 95vw !important;
}
.vmod-note {
  font-size: 11px !important;
  color: var(--text-muted) !important;
  text-align: center !important;
  margin-top: 8px !important;
}

/* ══════════════════════════════════════
   CHATBOT — Professional
   ══════════════════════════════════════ */
#chatbot-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--bg-card) !important;
  border: 1px solid var(--border-accent) !important;
  box-shadow: var(--shadow-md) !important;
  cursor: pointer;
  transition: all var(--transition) !important;
}
#chatbot-btn:hover {
  border-color: var(--accent) !important;
  transform: scale(1.05) !important;
}
.chatbot-modal {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  background: var(--bg-surface) !important;
}
.chatbot-header {
  background: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}
.chatbot-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: .5px !important;
}
.chatbot-messages {
  background: var(--bg-deep) !important;
}
.chat-bubble {
  font-size: 13px !important;
  line-height: 1.6 !important;
  border-radius: var(--radius-sm) !important;
}
.chatbot-input {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  border-radius: var(--radius-sm) !important;
}
.chatbot-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
.chatbot-send {
  background: var(--accent) !important;
  color: #0b0b12 !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
}
#s-journal {
  background: var(--bg-deep) !important;
}
.journal-wrap {
  background: transparent !important;
}
.journal-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
}
.journal-kicker {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text-muted) !important;
  font-weight: 700 !important;
}
.journal-big {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.journal-sub {
  font-size: 12px !important;
  color: var(--text-muted) !important;
  line-height: 1.5 !important;
}
.journal-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
}
.journal-tab {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  border-bottom: 2px solid transparent !important;
  transition: all var(--transition) !important;
}
.journal-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}
.journal-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
}
.journal-side-note {
  font-size: 11px !important;
  color: var(--text-muted) !important;
}
.leaderboard-item {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
}
.leaderboard-rank {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.leaderboard-score {
  color: var(--accent) !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════
   PAYWALL — Professional pricing
   ══════════════════════════════════════ */
#s-pay {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(201,168,76,.04) 0, transparent 50%),
    var(--bg-deep) !important;
}
.pw-icon {
  font-size: 0 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: rgba(201,168,76,.1) !important;
  border: 1.5px solid rgba(201,168,76,.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 16px !important;
}
.pw-icon::after {
  content: 'PRO' !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--accent) !important;
  letter-spacing: 1px;
}
.pw-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.pw-desc {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
  line-height: 1.6 !important;
}

/* XP Redeem */
.xp-redeem-box {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
}
.xp-redeem-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
}
.xp-redeem-opt {
  background: var(--bg-surface) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  transition: all var(--transition) !important;
  cursor: pointer;
}
.xp-redeem-opt:hover {
  border-color: var(--accent) !important;
}
.xp-redeem-opt.featured {
  border-color: var(--accent) !important;
  background: rgba(201,168,76,.06) !important;
}
.xp-cost {
  font-weight: 700 !important;
  color: var(--accent) !important;
}

/* Plans */
.plan {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius) !important;
  transition: all var(--transition) !important;
  cursor: pointer;
  overflow: hidden;
}
.plan:hover {
  border-color: var(--accent) !important;
}
.plan.feat {
  border-color: var(--accent) !important;
}
.plan-ribbon {
  font-size: 10px !important;
  letter-spacing: 1px !important;
  background: var(--accent) !important;
  color: #0b0b12 !important;
  font-weight: 700 !important;
}
.plan-name {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.plan-price {
  color: var(--accent) !important;
  font-weight: 700 !important;
}
.plan-feats {
  font-size: 12px !important;
  color: var(--text-secondary) !important;
}
.fy { color: #4caf88 !important; }
.fn { color: #e05858 !important; }
.pw-divider {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

/* ══════════════════════════════════════
   BOTTOM NAV — Minimal tabs
   ══════════════════════════════════════ */
.bnav {
  background: rgba(11,11,18,.95) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--border-subtle) !important;
}
.bni {
  transition: all var(--transition) !important;
}
.bni-ic {
  font-size: 0 !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
/* Map icon */
.bni:nth-child(1) .bni-ic::after,
.bnav .bni:first-child .bni-ic::after {
  content: '' !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: 0 0 0 2px currentColor, 0 0 0 3px transparent !important;
}
.bni-lb {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .3px !important;
  color: var(--text-muted) !important;
}
.bni.on .bni-lb {
  color: var(--accent) !important;
}

/* ══════════════════════════════════════
   VIDEO MODAL — Clean
   ══════════════════════════════════════ */
.vmod {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}
.vmod-x {
  color: var(--text-muted) !important;
  font-size: 18px !important;
}
.vmod-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

/* ══════════════════════════════════════
   SEARCH MODAL — Clean
   ══════════════════════════════════════ */
.search-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-lg) !important;
}
.search-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.search-subtitle {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}
.search-input {
  background: var(--bg-deep) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
}
.search-input:focus {
  border-color: var(--accent) !important;
  outline: none !important;
}
.search-btn {
  background: var(--accent) !important;
  color: #0b0b12 !important;
  font-weight: 700 !important;
  border-radius: var(--radius-sm) !important;
  font-size: 13px !important;
}

/* ══════════════════════════════════════
   TOAST — Subtle
   ══════════════════════════════════════ */
#toast {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-md) !important;
}

/* ══════════════════════════════════════
   ADMIN SCREEN — Clean table
   ══════════════════════════════════════ */
#s-admin {
  background: var(--bg-deep) !important;
}

/* ══════════════════════════════════════
   CAT SELECT SCREEN — Clean version
   ══════════════════════════════════════ */
.catselect-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--text-primary) !important;
}
.catselect-sub {
  font-size: 13px !important;
  color: var(--text-secondary) !important;
}

/* ══════════════════════════════════════
   PATH MAP
   ══════════════════════════════════════ */
.path-node {
  transition: all var(--transition) !important;
}

/* ══════════════════════════════════════
   SCROLLBAR — Minimal
   ══════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201,168,76,.15); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201,168,76,.25); }

/* ══════════════════════════════════════
   LANDING — Hero Text Readability Fix
   Strengthens contrast of hero text
   against the background photo
   ══════════════════════════════════════ */
#s-landing .hero {
  position: relative !important;
}
#s-landing .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 24px !important;
  background: radial-gradient(
    ellipse 80% 70% at 50% 50%,
    rgba(5,7,14,0.55) 0%,
    rgba(5,7,14,0.30) 55%,
    transparent 100%
  ) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#s-landing .hero > * { position: relative !important; z-index: 1 !important; }
#s-landing .htitle {
  color: #ffe08a !important;
  -webkit-text-fill-color: #ffe08a !important;
  background: none !important;
  text-shadow:
    0 2px 16px rgba(0,0,0,0.92),
    0 0 28px rgba(0,0,0,0.75) !important;
  opacity: 1 !important;
}
#s-landing .hsub,
#s-landing .hdesc {
  color: #f0e4cc !important;
  text-shadow:
    0 1px 10px rgba(0,0,0,0.92),
    0 0 20px rgba(0,0,0,0.80) !important;
  opacity: 1 !important;
}
#s-landing .intro-trigger {
  color: #e8d5aa !important;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85) !important;
}
#s-landing .hdiv {
  background: #f2cf66 !important;
  box-shadow: 0 0 12px rgba(0,0,0,0.6) !important;
}

/* ══════════════════════════════════════
   LANG MENU
   ══════════════════════════════════════ */
.lang-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow-md) !important;
}
.lang-opt {
  font-size: 12px !important;
  padding: 8px 14px !important;
  color: var(--text-secondary) !important;
  transition: all var(--transition) !important;
}
.lang-opt:hover, .lang-opt.active {
  background: rgba(201,168,76,.06) !important;
  color: var(--accent) !important;
}

/* ══════════════════════════════════════
   CHATBOT BUTTON (if exists) — Minimal
   ══════════════════════════════════════ */
#chatbot-btn {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: 50% !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ══════════════════════════════════════
   RESPONSIVE REFINEMENTS
   ══════════════════════════════════════ */
@media (max-width: 600px) {
  .topnav { padding: 10px 14px !important; }
  .tnbrand { font-size: 13px !important; }
  .hero { padding: 20px 16px !important; }
  .cats { padding: 12px 12px 80px !important; gap: 10px !important; }
  .auth-card { margin: 12px !important; }
  .htitle { font-size: clamp(24px, 6vw, 36px) !important; }
}

@media (min-width: 1000px) {
  .cats { max-width: 960px; margin: 0 auto; }
  .hero { max-width: 640px; margin: 0 auto; }
}

/* ══════════════════════════════════════
   EVENT DETAIL — 2-column layout
   ══════════════════════════════════════ */

/* Reset evbody: remove max-width constraint, use grid */
#s-event .evbody {
  max-width: min(1160px, calc(100% - 32px)) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 28px 16px 100px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) !important;
  gap: 36px !important;
  align-items: start !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Left column: story + video */
#s-event .event-left {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
}

/* Right column: gameplay + result */
#s-event .event-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  min-width: 0 !important;
  position: sticky !important;
  top: 64px !important;
}

/* Remove top margin on first sec-ttl inside each column */
#s-event .event-left > .sec-ttl:first-child,
#s-event .event-right > .sec-ttl:first-child,
#s-event .event-right > .story-choice-wrap:first-child,
#s-event .event-right > .battle-quiz:first-child {
  margin-top: 0 !important;
}

/* Full-width elements inside columns */
#s-event .story,
#s-event .vidbox,
#s-event .story-choice-wrap,
#s-event .battle-quiz,
#s-event .tl-items,
#s-event .choice-btn,
#s-event .bq-opt,
#s-event .tl-item,
#s-event .result-box {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Choice buttons: full width, larger tap target */
#s-event .choices {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
#s-event .choice-btn {
  text-align: left !important;
  padding: 14px 16px !important;
}

/* Result box: no top-right offset */
#s-event .result-box {
  margin-top: 16px !important;
}

/* Hero: centered */
#s-event .evhero {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 160px !important;
}
#s-event .evhin {
  text-align: center !important;
}

/* ── Tablet & Mobile: single column (≤ 1023px) ── */
@media (max-width: 1023px) {
  #s-event .evbody {
    grid-template-columns: 1fr !important;
    padding: 16px 12px 100px !important;
    gap: 0 !important;
    max-width: 100% !important;
  }
  #s-event .event-right {
    position: static !important;
    margin-top: 24px !important;
  }
}

/* ══════════════════════════════════
   MYTH BRANCH FLOW — v=mythflow1
══════════════════════════════════ */

/* Choice button states */
#s-event .choice-btn.choice-correct {
  background: linear-gradient(135deg, #1a4d2e, #2d7a4a) !important;
  border: 2px solid #4caf7a !important;
  color: #b8ffd6 !important;
  box-shadow: 0 0 12px rgba(76,175,122,.45) !important;
}
#s-event .choice-btn.choice-wrong {
  background: linear-gradient(135deg, #4d1a1a, #7a2d2d) !important;
  border: 2px solid #c0392b !important;
  color: #ffb3b3 !important;
  box-shadow: 0 0 12px rgba(192,57,43,.45) !important;
}

/* Outcome containers */
.story-outcome { display: none; margin-top: 16px; border-radius: 10px; overflow: hidden; }

.story-outcome.outcome-correct {
  background: linear-gradient(135deg, rgba(26,77,46,.85), rgba(13,40,24,.9));
  border: 1.5px solid #4caf7a;
  padding: 18px 20px;
  box-shadow: 0 0 18px rgba(76,175,122,.3);
}
.story-outcome.outcome-wrong {
  background: linear-gradient(135deg, rgba(77,26,26,.85), rgba(40,13,13,.9));
  border: 1.5px solid #c0392b;
  padding: 18px 20px;
  box-shadow: 0 0 18px rgba(192,57,43,.3);
}

/* Badge */
.outcome-badge {
  font-family: var(--ui-font, 'Segoe UI', system-ui, sans-serif);
  font-size: 15px;
  font-weight: 700;
  color: #b8ffd6;
  margin-bottom: 8px;
  letter-spacing: .3px;
}
.outcome-badge.outcome-badge-wrong { color: #ffb3b3; }

/* Message lines */
.outcome-msg {
  font-family: var(--ui-font, 'Segoe UI', system-ui, sans-serif);
  font-size: 13.5px;
  color: #e8c89a;
  line-height: 1.6;
  margin-bottom: 10px;
}
.outcome-detail {
  font-family: var(--ui-font, 'Segoe UI', system-ui, sans-serif);
  font-size: 13px;
  color: #c8b090;
  line-height: 1.65;
  margin-bottom: 14px;
  font-style: italic;
}

/* Watch video button — gold gradient */
.btn-watch-vid {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 44px !important;
  padding: 0 20px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(232,197,112,.65) !important;
  background: linear-gradient(180deg, #f0ce68, #cda23e) !important;
  color: #161019 !important;
  font-family: var(--ui-font, 'Segoe UI', system-ui, sans-serif) !important;
  font-size: 13.5px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.35) !important;
  transition: transform .15s, filter .15s !important;
  margin-top: 8px !important;
  letter-spacing: .2px !important;
}
.btn-watch-vid:hover {
  transform: translateY(-1px) !important;
  filter: brightness(1.08) !important;
}

/* Retry button */
.btn-retry-myth {
  display: inline-block;
  background: linear-gradient(135deg, #2d3a7a, #3a4fa8);
  border: 1.5px solid #6080e0;
  color: #d0dfff;
  font-family: var(--ui-font, 'Segoe UI', system-ui, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s;
  margin-top: 10px;
  letter-spacing: .2px;
}
.btn-retry-myth:hover {
  background: linear-gradient(135deg, #3a4fa8, #4a5fc8);
  box-shadow: 0 4px 14px rgba(64,96,224,.45);
  transform: translateY(-1px);
}

/* Choice picked badge — shown on its own line below choice text */
.choice-picked-badge {
  display: block !important;
  margin-top: 6px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 2px 10px !important;
  border-radius: 20px !important;
  width: fit-content !important;
  max-width: 100% !important;
  letter-spacing: .4px !important;
  pointer-events: none !important;
}
#s-event .choice-btn.choice-correct .choice-picked-badge {
  background: rgba(76,175,122,.3) !important;
  color: #9effd6 !important;
  border: 1px solid rgba(76,175,122,.6) !important;
}
#s-event .choice-btn.choice-wrong .choice-picked-badge {
  background: rgba(192,57,43,.3) !important;
  color: #ffcaca !important;
  border: 1px solid rgba(192,57,43,.6) !important;
}

/* Video modal: constrain size and fix 16:9 for <video> */
#vmodal .vmod {
  max-width: min(920px, 92vw) !important;
  max-height: 88vh !important;
  overflow-y: auto !important;
}
#vmod-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: calc(88vh - 120px);
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
#vmod-player video {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  background: #000;
  border-radius: 8px;
}

/* result-box.lose — compact minimal strip, no content shown */
.result-box.lose {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}
.result-box.lose .btn-quiz { display: none !important; }
.result-box.lose .btn-main { display: none !important; }
.result-box.lose .res-ttl,
.result-box.lose .res-exp,
.result-box.lose .xp-chip { display: none !important; }