/* ============================================================
   SymposiON — Main Stylesheet  v4 · Editorial Landing
   ============================================================ */

:root {
  --alabaster:  #F6F2EB;
  --linen:      #EBE5D7;
  --parchment:  #D9D0BE;
  --warm-white: #FDFAF5;

  --espresso:   #221B10;
  --charcoal:   #39301F;
  --stone:      #867660;
  --fog:        #B0A08E;

  --sage:       #6A8752;
  --sage-dark:  #475F38;
  --sage-light: #8EAA78;
  --sage-mist:  #EAF0E3;
  --sage-line:  rgba(106,135,82,0.3);

  --dark-base:  #18100A;
  --dark-panel: #201408;
  --dark-border: rgba(195,165,105,0.14);

  /* legacy compat */
  --terra:        #6A8752;
  --terra-light:  #8EAA78;
  --terra-dark:   #475F38;
  --cream:        #F6F2EB;
  --cream-dark:   #EBE5D7;
  --cream-border: #D9D0BE;
  --ink:          #221B10;
  --ink-soft:     #39301F;
  --ink-muted:    #867660;
  --gold:         #9C8238;
  --gold-light:   #C4A448;

  /* ── Tartarus Review Hub palette (global so dynamically-appended modals resolve) ── */
  --rh-bg:       #0C0E08;
  --rh-surface:  #161810;
  --rh-panel:    #1E2016;
  --rh-border:   rgba(160, 80, 45, 0.22);
  --rh-terra:    #C05535;
  --rh-terra-lt: #D97B5C;
  --rh-gold:     #C9A44A;
  --rh-text:     #DDD4C0;
  --rh-muted:    #7A6C58;
  --rh-line:     rgba(201, 164, 74, 0.14);
}

/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--alabaster);
  color: var(--espresso);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
}

/* ── PAGES ── */
.page { display: none; }
.page.active { display: block; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active { animation: page-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── SCROLL ANIMATIONS ── */
[data-animate] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate].visible        { opacity: 1; transform: translateY(0); }
[data-animate][data-delay="1"] { transition-delay: 0.12s; }
[data-animate][data-delay="2"] { transition-delay: 0.24s; }
[data-animate][data-delay="3"] { transition-delay: 0.36s; }
[data-animate][data-delay="4"] { transition-delay: 0.48s; }

/* ═══════════════════════════════════════
   NAV
═══════════════════════════════════════ */
.nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 3rem; height: 62px;
  background: rgba(246, 242, 235, 0.88);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(217, 208, 190, 0.6);
  position: sticky; top: 0; z-index: 100; gap: 1rem;
  transition: background 0.3s, border-color 0.3s;
}
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px; font-weight: 600; letter-spacing: 0.2px;
  color: var(--espresso); cursor: pointer; flex-shrink: 0;
  transition: opacity 0.35s;
}
.logo:hover { opacity: 0.5; }
.logo span { color: var(--sage); }
.nav-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.lang-toggle { display: flex; border: 1px solid var(--parchment); overflow: hidden; }
.lang-opt {
  font-size: 11px; padding: 5px 12px; cursor: pointer;
  color: var(--stone); background: transparent; border: none;
  font-family: 'Inter', sans-serif; font-weight: 500;
  transition: all 0.25s; letter-spacing: 1.2px; text-transform: uppercase;
}
.lang-opt.active { background: var(--espresso); color: var(--alabaster); }
.lang-opt:hover:not(.active) { color: var(--charcoal); }

.nav-btn {
  font-size: 12px; padding: 7px 18px;
  border: 1px solid var(--parchment); background: transparent;
  color: var(--stone); cursor: pointer; font-family: 'Inter', sans-serif;
  font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase;
  transition: all 0.3s ease;
}
.nav-btn:hover { color: var(--espresso); border-color: var(--espresso); }
.nav-btn.primary {
  background: var(--espresso); border-color: var(--espresso); color: var(--alabaster);
}
.nav-btn.primary:hover { background: var(--sage); border-color: var(--sage); }

/* ═══════════════════════════════════════
   BREADCRUMB
═══════════════════════════════════════ */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 11px; flex-wrap: nowrap; min-width: 0; }
.bc-sep { color: var(--parchment); font-size: 9px; flex-shrink: 0; }
.bc {
  color: var(--stone); cursor: pointer; transition: color 0.25s;
  white-space: nowrap; position: relative; flex-shrink: 0;
  font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 0.8px;
}
.bc:hover { color: var(--espresso); }
.bc.current { color: var(--sage); cursor: default; }
.bc.has-dd { display: flex; align-items: center; gap: 4px; }
.bc.has-dd::after { content: '▾'; font-size: 8px; opacity: 0.6; }
.bc-dropdown {
  position: absolute; top: calc(100% + 12px); left: 0;
  background: var(--warm-white); border: 1px solid var(--parchment);
  border-top: 2px solid var(--sage);
  min-width: 200px; z-index: 500; overflow: hidden;
  opacity: 0; transform: translateY(-6px); pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 20px 60px rgba(34, 27, 16, 0.1);
}
.bc-dropdown.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.bc-dd-item {
  font-size: 12px; padding: 11px 16px; color: var(--charcoal);
  cursor: pointer; border-bottom: 1px solid var(--linen);
  transition: background 0.15s, padding-left 0.2s, color 0.15s;
  font-family: 'Inter', sans-serif;
}
.bc-dd-item:last-child { border-bottom: none; }
.bc-dd-item:hover { background: var(--sage-mist); color: var(--sage-dark); padding-left: 22px; }
.bc-dd-item.disabled { opacity: 0.35; cursor: default; pointer-events: none; }
.bc-split { display: flex; align-items: center; flex-shrink: 0; }
.bc-split .bc-nav:hover { color: var(--espresso); }
.bc-chevron { font-size: 8px; padding: 0 3px; opacity: 0.5; cursor: pointer; line-height: 1; position: relative; }
.bc-chevron:hover { opacity: 1; }

/* ═══════════════════════════════════════
   HERO — full viewport landing
═══════════════════════════════════════ */
.hero {
  min-height: calc(100svh - 62px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5rem 2rem 4rem;
  text-align: center;
  border-bottom: 1px solid var(--parchment);
  position: relative; overflow: visible;
}
/* subtle radial glow from top */
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%,
      rgba(106,135,82,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 60% 40% at 50% 100%,
      rgba(217,208,190,0.3) 0%, transparent 70%);
  pointer-events: none;
}

.hero-tag {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--stone); margin-bottom: 2.5rem;
  font-family: 'Inter', sans-serif; font-weight: 500;
  position: relative;
}
.hero-tag::before,
.hero-tag::after { content: ''; display: block; width: 36px; height: 1px; background: var(--parchment); }

.hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(56px, 9vw, 108px);
  font-weight: 300; color: var(--espresso);
  line-height: 1.02; margin-bottom: 1.5rem; letter-spacing: -2px;
  position: relative;
}
.hero h1 em { color: var(--sage); font-style: italic; font-weight: 300; }

.hero p {
  font-size: 15px; color: var(--stone); font-weight: 300;
  margin-bottom: 0; line-height: 1.8; letter-spacing: 0.1px;
  max-width: 420px; position: relative;
}

/* ── CTA buttons ── */
.hero-ctas {
  display: flex; gap: 12px; align-items: center;
  margin-top: 2.75rem; flex-wrap: wrap; justify-content: center;
  position: relative;
}
.cta-primary {
  font-size: 13px; padding: 14px 38px;
  background: var(--espresso); border: 1px solid var(--espresso);
  color: var(--alabaster); cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 500;
  letter-spacing: 0.8px;
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.2s ease;
}
.cta-primary:hover {
  background: var(--sage); border-color: var(--sage);
  transform: translateY(-2px);
}
.cta-ghost {
  font-size: 13px; padding: 14px 28px;
  background: transparent; border: 1px solid var(--parchment);
  color: var(--stone); cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 400;
  letter-spacing: 0.3px;
  transition: color 0.3s, border-color 0.3s, transform 0.2s;
}
.cta-ghost:hover { color: var(--espresso); border-color: var(--espresso); transform: translateY(-2px); }

/* ── Level selector (secondary nav within hero) ── */
.hero-level-row {
  display: flex; flex-direction: column; align-items: center;
  gap: 16px; margin-top: 3.5rem; position: relative;
}
.hero-level-label {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--fog); font-family: 'Inter', sans-serif; font-weight: 500;
  display: flex; align-items: center; gap: 14px;
}
.hero-level-label::before,
.hero-level-label::after { content: ''; display: block; width: 28px; height: 1px; background: var(--parchment); }

/* ── Grade buttons ── */
.grade-row {
  display: flex; align-items: stretch;
  border: 1px solid var(--parchment);
  width: fit-content;
}
.grade-item { position: relative; }
.grade-item + .grade-item { border-left: 1px solid var(--parchment); }

.grade-btn {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  padding: 16px 32px; border: none; background: transparent;
  color: var(--stone); cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 500;
  display: flex; align-items: center; gap: 9px;
  position: relative; z-index: 1; will-change: transform;
  transition:
    color       0.35s ease,
    background  0.35s ease,
    transform   0.55s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow  0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.grade-btn:hover:not(.locked) {
  color: var(--espresso); background: var(--warm-white);
  transform: scale(1.13); z-index: 20;
  box-shadow: 0 20px 56px rgba(34, 27, 16, 0.1),
              0 4px 12px rgba(106,135,82,0.08);
}
.grade-btn.active { background: var(--espresso); color: var(--alabaster); }
.grade-btn.locked { opacity: 0.3; cursor: default; }
.chevron { font-size: 8px; opacity: 0.45; transition: transform 0.3s, opacity 0.3s; }
.grade-btn.open .chevron { transform: rotate(180deg); opacity: 0.9; }

.dropdown {
  position: absolute; top: calc(100% + 1px); left: 0;
  background: var(--warm-white); border: 1px solid var(--parchment);
  border-top: 2px solid var(--sage);
  min-width: 220px; z-index: 200; overflow: hidden;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  box-shadow: 0 24px 64px rgba(34, 27, 16, 0.12);
}
.dropdown.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.dd-item {
  font-size: 12px; padding: 13px 20px; color: var(--charcoal);
  cursor: pointer; border-bottom: 1px solid var(--linen);
  transition: background 0.18s, padding-left 0.2s, color 0.18s;
  font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
}
.dd-item:last-child { border-bottom: none; }
.dd-item:hover { background: var(--sage-mist); color: var(--sage-dark); padding-left: 28px; }

/* ── Scroll cue ── */
.scroll-cue {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.scroll-cue-bar {
  width: 1px; height: 52px;
  background: linear-gradient(to bottom, transparent, var(--parchment) 40%, transparent);
  animation: scroll-breathe 2.2s ease-in-out infinite;
}
@keyframes scroll-breathe {
  0%   { opacity: 0; transform: scaleY(0.3) translateY(-10px); }
  40%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(1) translateY(10px); }
}

/* ═══════════════════════════════════════
   STATS STRIP
═══════════════════════════════════════ */
.stats-strip {
  display: flex; align-items: center; justify-content: center;
  padding: 3.5rem 2rem; border-bottom: 1px solid var(--parchment);
  background: var(--warm-white); gap: 0; flex-wrap: wrap;
}
.stat {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 0 5rem;
}
.stat-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(48px, 6vw, 72px); font-weight: 300;
  color: var(--espresso); line-height: 1; letter-spacing: -2px;
}
.stat-plus {
  font-size: 0.55em; vertical-align: super; color: var(--sage);
  font-family: 'Inter', sans-serif; font-weight: 500; letter-spacing: 0;
}
.stat-label {
  font-size: 10px; letter-spacing: 2.5px; text-transform: uppercase;
  color: var(--stone); font-family: 'Inter', sans-serif; font-weight: 500;
}
.stat-sep { width: 1px; height: 52px; background: var(--parchment); flex-shrink: 0; }

/* ═══════════════════════════════════════
   HOME CONTENT
═══════════════════════════════════════ */
.content { padding: 4rem 3rem; }
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 2rem; padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--parchment);
}
.section-head h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 400; color: var(--espresso); letter-spacing: -0.3px;
}
.see-all {
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--stone); cursor: pointer; background: none; border: none;
  font-family: 'Inter', sans-serif; font-weight: 500;
  position: relative; transition: color 0.25s;
}
.see-all::after {
  content: ''; position: absolute; left: 0; bottom: -2px;
  width: 0; height: 1px; background: var(--sage);
  transition: width 0.35s ease;
}
.see-all:hover { color: var(--sage); }
.see-all:hover::after { width: 100%; }

.carousel {
  display: flex; gap: 14px; overflow-x: auto; padding-bottom: 16px;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.carousel::-webkit-scrollbar { display: none; }

/* ── GAME CARDS (carousel) ── */
.game-card {
  min-width: 175px; max-width: 175px;
  background: var(--warm-white); border: 1px solid var(--parchment);
  overflow: hidden; cursor: pointer;
  scroll-snap-align: start; flex-shrink: 0;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s, box-shadow 0.45s;
}
.game-card:hover:not(.locked) {
  transform: translateY(-8px);
  border-color: var(--sage-light);
  box-shadow: 0 20px 50px rgba(34,27,16,0.1), 0 0 0 1px var(--sage-line);
}
.game-card.locked { opacity: 0.42; cursor: default; }
.card-img {
  width: 100%; height: 115px;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; position: relative;
}
.lock-badge {
  position: absolute; top: 8px; right: 8px;
  background: rgba(34,27,16,0.55); width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.card-body { padding: 12px 14px 16px; border-top: 1px solid var(--linen); }
.card-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-weight: 600; margin-bottom: 3px; color: var(--espresso);
}
.card-sub { font-size: 10px; color: var(--stone); margin-bottom: 8px; letter-spacing: 0.3px; }
.badge { display: inline-block; font-size: 9px; padding: 2px 9px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; }
.badge.free { background: transparent; color: var(--sage-dark); border: 1px solid var(--sage-line); }
.badge.pro  { background: transparent; color: var(--stone); border: 1px solid var(--parchment); }

/* ═══════════════════════════════════════
   BROWSE PAGE
═══════════════════════════════════════ */
.browse-header {
  background: var(--linen);
  padding: 4rem 3rem 3rem;
  border-bottom: 1px solid var(--parchment);
}
.browse-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 6vw, 64px); font-weight: 300;
  color: var(--espresso); margin-bottom: 0.5rem; letter-spacing: -0.8px;
}
.browse-header p { font-size: 14px; color: var(--stone); line-height: 1.7; }
.browse-body { padding: 3rem; }
.browse-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--parchment); border: 1px solid var(--parchment);
}
.browse-box {
  background: var(--warm-white); overflow: hidden; cursor: pointer;
  transition: background 0.3s ease; position: relative;
}
.browse-box:hover:not(.disabled) { background: var(--sage-mist); }
.browse-box.disabled { opacity: 0.38; cursor: default; }
.browse-box-banner { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.browse-box-body { padding: 14px 18px 18px; }
.browse-box-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px; font-weight: 500; margin-bottom: 5px; color: var(--espresso);
}
.browse-box-body p { font-size: 12px; color: var(--stone); line-height: 1.55; }
.browse-box .coming-soon {
  position: absolute; top: 10px; right: 10px;
  background: rgba(34,27,16,0.45); font-size: 9px;
  color: rgba(246,242,235,0.7); padding: 3px 9px;
  letter-spacing: 0.8px; text-transform: uppercase;
}
.browse-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; color: var(--stone); cursor: pointer;
  margin-bottom: 2rem; background: none; border: none;
  font-family: 'Inter', sans-serif; transition: color 0.25s; padding: 0;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
}
.browse-back:hover { color: var(--espresso); }
.browse-section-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 3px;
  color: var(--stone); margin-bottom: 1.5rem; font-weight: 600;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 14px;
}
.browse-section-label::after { content: ''; flex: 1; height: 1px; background: var(--parchment); }

/* ═══════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════ */
.page-header {
  background: var(--linen);
  padding: 3.5rem 3rem;
  border-bottom: 1px solid var(--parchment);
}
.grade-pill {
  display: inline-flex; font-size: 9px; letter-spacing: 3px;
  text-transform: uppercase; color: var(--sage);
  border-bottom: 1px solid var(--sage-line); padding: 0 0 4px;
  margin-bottom: 1rem; font-family: 'Inter', sans-serif; font-weight: 600;
}
.page-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(32px, 5vw, 56px); font-weight: 300; color: var(--espresso);
  letter-spacing: -0.8px; margin-bottom: 0.5rem;
}
.page-header p { font-size: 14px; color: var(--stone); line-height: 1.7; }

/* ═══════════════════════════════════════
   SUBJECT GRID
═══════════════════════════════════════ */
.grid-wrap { padding: 3rem; }
.grid-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 3px;
  color: var(--stone); margin-bottom: 1.5rem; font-weight: 600;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 14px;
}
.grid-label::after { content: ''; flex: 1; height: 1px; background: var(--parchment); }
.subject-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--parchment);
}
.subject-card {
  background: var(--warm-white); overflow: hidden; cursor: pointer;
  position: relative; transition: background 0.3s ease;
}
.subject-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sage); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.subject-card:hover { background: var(--sage-mist); }
.subject-card:hover::before { transform: scaleY(1); }
.card-banner { height: 115px; display: flex; align-items: center; justify-content: center; font-size: 42px; }
.subj-body { padding: 12px 16px 16px; }
.subj-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500; margin-bottom: 5px; color: var(--espresso);
}
.subj-desc { font-size: 11px; color: var(--stone); line-height: 1.55; margin-bottom: 10px; }
.subj-footer { display: flex; align-items: center; justify-content: space-between; }
.game-count { font-size: 10px; color: var(--stone); letter-spacing: 0.5px; text-transform: uppercase; }
.card-arrow {
  font-size: 11px; color: var(--stone);
  transition: color 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.subject-card:hover .card-arrow { color: var(--sage-dark); transform: translateX(5px); }
.track-section { margin-bottom: 3rem; }
.track-title {
  font-size: 11px; font-weight: 600; color: var(--charcoal);
  margin-bottom: 1rem; padding: 10px 16px;
  border-left: 2px solid var(--sage);
  font-family: 'Inter', sans-serif; text-transform: uppercase; letter-spacing: 1px;
}

/* ═══════════════════════════════════════
   SUBJECT HERO (dark, games list page)
═══════════════════════════════════════ */
.subject-hero {
  background: var(--dark-base);
  padding: 3.5rem 3rem 0; position: relative; overflow: hidden;
}
.subject-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4.5vw, 52px); font-weight: 300; color: #F6F2EB;
  letter-spacing: -0.8px; margin-bottom: 0.5rem;
}
.subject-hero p { font-size: 13px; color: rgba(246,242,235,0.45); max-width: 480px; line-height: 1.7; }
.filter-tabs { display: flex; gap: 0; margin-top: 2.5rem; }
.ftab {
  font-size: 11px; padding: 12px 22px;
  border: 1px solid rgba(255,255,255,0.08); border-bottom: none;
  background: rgba(255,255,255,0.04); color: rgba(246,242,235,0.38);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.22s; letter-spacing: 1.5px; text-transform: uppercase;
}
.ftab + .ftab { border-left: none; }
.ftab:hover { background: rgba(255,255,255,0.08); color: rgba(246,242,235,0.75); }
.ftab.active { background: var(--alabaster); color: var(--espresso); font-weight: 600; }
.games-content { background: var(--alabaster); padding: 3rem; }
.games-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--parchment);
}

/* ── GAME CARDS (games list) ── */
.g-card {
  background: var(--warm-white); overflow: hidden; cursor: pointer;
  position: relative; transition: background 0.3s ease;
}
.g-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sage); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.g-card:hover:not(.locked) { background: var(--sage-mist); }
.g-card:hover:not(.locked)::before { transform: scaleY(1); }
.g-card.locked { opacity: 0.5; cursor: default; }
.g-banner { height: 108px; display: flex; align-items: center; justify-content: center; font-size: 38px; position: relative; }
.lock-b {
  position: absolute; top: 8px; right: 8px;
  background: rgba(34,27,16,0.55); width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
.multi-b {
  position: absolute; top: 8px; left: 8px;
  background: var(--sage); font-size: 9px; color: white; padding: 2px 7px; font-weight: 600;
}
.free-b {
  position: absolute; top: 8px; right: 8px;
  background: var(--sage-dark); font-size: 9px; color: white; padding: 2px 7px; font-weight: 600;
}
.g-body { padding: 12px 16px 16px; border-top: 1px solid var(--linen); }
.g-body h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500; margin-bottom: 4px; color: var(--espresso);
}
.g-desc { font-size: 11px; color: var(--stone); line-height: 1.55; margin-bottom: 10px; }
.g-meta { display: flex; align-items: center; justify-content: space-between; }
.meta-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.tag { font-size: 9px; padding: 2px 8px; background: transparent; color: var(--stone); border: 1px solid var(--parchment); letter-spacing: 0.5px; }
.play-btn {
  font-size: 11px; color: var(--stone);
  transition: color 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.g-card:hover:not(.locked) .play-btn { color: var(--sage-dark); transform: translateX(5px); }

/* ═══════════════════════════════════════
   TRIVIA ENTRY PAGE
═══════════════════════════════════════ */
.game-hero {
  background: var(--dark-base);
  padding: 3.5rem 3rem 0; position: relative; overflow: hidden;
}
.game-hero::after {
  content: '⚔️'; position: absolute; right: 3rem; top: 2rem;
  font-size: 90px; opacity: 0.06; pointer-events: none;
}
.game-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 4vw, 48px); font-weight: 300; color: #F6F2EB;
  letter-spacing: -0.8px; margin-bottom: 0.4rem;
}
.game-hero p { font-size: 13px; color: rgba(246,242,235,0.45); margin-bottom: 2rem; }
.tab-content { background: var(--alabaster); padding: 3rem; }
.levels-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 3px;
  color: var(--stone); margin-bottom: 1.5rem; font-weight: 600;
  font-family: 'Inter', sans-serif;
  display: flex; align-items: center; gap: 14px;
}
.levels-label::after { content: ''; flex: 1; height: 1px; background: var(--parchment); }
.levels-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px; background: var(--parchment); margin-bottom: 2.5rem;
}
.level-card {
  background: var(--warm-white); padding: 1.25rem; cursor: pointer;
  position: relative; transition: background 0.3s ease;
}
.level-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--sage); transform: scaleY(0); transform-origin: bottom;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.level-card:hover:not(.locked) { background: var(--sage-mist); }
.level-card:hover:not(.locked)::before { transform: scaleY(1); }
.level-card.locked { opacity: 0.5; cursor: default; }
.level-card.locked:hover { background: var(--warm-white); }
.level-card.completed { border-left: 2px solid var(--sage); }
.level-num {
  font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--stone); margin-bottom: 6px;
  font-family: 'Inter', sans-serif; font-weight: 600;
}
.level-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 500; margin-bottom: 6px; color: var(--espresso);
}
.level-desc { font-size: 11px; color: var(--stone); line-height: 1.55; margin-bottom: 14px; }
.level-footer { display: flex; align-items: center; justify-content: space-between; }
.level-meta { display: flex; gap: 5px; flex-wrap: wrap; }
.tag-g { font-size: 9px; padding: 2px 8px; letter-spacing: 0.5px; }
.tag-g.green { background: transparent; color: var(--sage-dark); border: 1px solid var(--sage-line); }
.tag-g.gold  { background: transparent; color: #7A5810; border: 1px solid rgba(180,130,50,0.4); }
.tag-g.def   { background: transparent; color: var(--stone); border: 1px solid var(--parchment); }
.level-action {
  font-size: 11px; color: var(--stone);
  transition: color 0.25s, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.level-card:hover:not(.locked) .level-action { color: var(--sage-dark); transform: translateX(5px); }
.lock-icon { position: absolute; top: 12px; right: 12px; font-size: 12px; opacity: 0.35; }

.score-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; background: var(--warm-white);
  border-bottom: 1px solid var(--linen); transition: background 0.2s;
}
.score-row:first-of-type { border-top: 1px solid var(--linen); }
.score-row:hover { background: var(--sage-mist); }
.score-left { display: flex; align-items: center; gap: 12px; }
.score-rank { font-size: 15px; font-weight: 300; color: var(--stone); width: 20px; font-family: 'Cormorant Garamond', serif; }
.score-rank.gold-r   { color: #9C8238; }
.score-rank.silver-r { color: #888; }
.score-rank.bronze-r { color: #9A6030; }
.score-name { font-size: 13px; color: var(--charcoal); }
.score-pts  { font-size: 15px; font-weight: 400; color: var(--sage); font-family: 'Cormorant Garamond', serif; }
.info-box {
  max-width: 520px; border-top: 1px solid var(--parchment);
  border-bottom: 1px solid var(--parchment);
  padding: 1.75rem 0; line-height: 1.9; font-size: 13px; color: var(--charcoal);
}

/* ═══════════════════════════════════════
   TRIVIA MODE CARDS
═══════════════════════════════════════ */
#trivia-mode-row { padding: 20px 24px 0; max-width: 800px; margin: 0 auto; }
.trivia-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(255,255,255,0.05); }
@media (max-width: 520px) { .trivia-modes { grid-template-columns: 1fr; } }
.tmode-card {
  display: flex; align-items: center; gap: 14px;
  background: var(--dark-panel); border-left: 2px solid transparent;
  padding: 16px 18px; cursor: pointer;
  transition: border-color 0.25s, background 0.25s;
}
.tmode-card:hover { border-color: var(--sage); background: rgba(106,135,82,0.05); }
.tmode-active { border-color: var(--sage) !important; background: rgba(106,135,82,0.08) !important; }
.tmode-icon { font-size: 1.8rem; flex-shrink: 0; }
.tmode-body { flex: 1; min-width: 0; }
.tmode-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: .95rem; font-weight: 500; color: #E0D6C0; margin-bottom: 3px;
}
.tmode-desc { font-size: .75rem; color: #7A6A58; line-height: 1.5; font-family: 'Inter', sans-serif; }
.tmode-badge {
  flex-shrink: 0; font-size: .6rem; font-family: 'Inter', sans-serif;
  letter-spacing: .08em; text-transform: uppercase;
  background: transparent; color: var(--sage-light);
  border: 1px solid rgba(106,135,82,.3); padding: 3px 10px; white-space: nowrap;
}
.tmode-multi { color: #80A8E8; border-color: rgba(80,120,200,.3); }

/* ═══════════════════════════════════════
   GAME OVERLAY
═══════════════════════════════════════ */
.game-overlay {
  display: none; position: fixed; inset: 0; z-index: 1000;
  background: var(--dark-base); flex-direction: column;
}
.game-overlay.active { display: flex; animation: none; }
.overlay-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 2rem; min-height: 52px;
  background: var(--dark-panel); border-bottom: 1px solid var(--dark-border); flex-shrink: 0;
}
.overlay-nav-btns { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.overlay-levels-btn { font-size: 10px !important; letter-spacing: 0.8px !important; opacity: 0.75; }
.overlay-back {
  display: flex; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase;
  color: #907860; cursor: pointer; background: transparent;
  border: 1px solid rgba(195,165,105,0.18); padding: 6px 14px;
  font-family: 'Inter', sans-serif; font-weight: 500;
  transition: color 0.25s, border-color 0.25s;
}
.overlay-back:hover { color: #F6F2EB; border-color: rgba(195,165,105,0.5); }
.overlay-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px; font-weight: 400; color: rgba(195,165,105,0.8);
}
.overlay-lang { display: flex; border: 1px solid rgba(255,255,255,0.1); overflow: hidden; }
.overlay-lang button {
  font-size: 11px; padding: 4px 12px; cursor: pointer;
  color: #907A68; background: transparent; border: none;
  font-family: 'Inter', sans-serif; transition: all 0.15s;
  letter-spacing: 1px; text-transform: uppercase;
}
.overlay-lang button.active { background: rgba(255,255,255,0.08); color: #F6F2EB; }
.overlay-frame { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
.footer {
  background: var(--espresso);
  border-top: 1px solid rgba(34,27,16,0.3);
  padding: 5rem 3rem 2.5rem; margin-top: 5rem;
}
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 3rem; gap: 2rem; flex-wrap: wrap; }
.footer-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 22px; font-weight: 400; color: var(--alabaster);
}
.footer-logo span { color: var(--sage-light); }
.footer-logo p { font-size: 12px; color: rgba(246,242,235,0.28); margin-top: 8px; font-family: 'Inter', sans-serif; line-height: 1.7; max-width: 200px; }
.footer-cols { display: flex; gap: 4.5rem; flex-wrap: wrap; }
.footer-col h4 {
  font-size: 9px; text-transform: uppercase; letter-spacing: 2.5px;
  color: rgba(246,242,235,0.25); margin-bottom: 16px;
  font-weight: 600; font-family: 'Inter', sans-serif;
}
.footer-col a {
  display: block; font-size: 13px; color: rgba(246,242,235,0.46);
  margin-bottom: 11px; cursor: pointer; text-decoration: none;
  transition: color 0.3s; font-family: 'Inter', sans-serif;
  width: fit-content; position: relative;
}
.footer-col a::after {
  content: ''; position: absolute; left: 0; bottom: -1px;
  width: 0; height: 1px; background: var(--sage-light);
  transition: width 0.35s ease;
}
.footer-col a:hover { color: var(--alabaster); }
.footer-col a:hover::after { width: 100%; }
.social-row { display: flex; gap: 8px; }
.social-btn {
  width: 36px; height: 36px; border: 1px solid rgba(246,242,235,0.1);
  background: transparent; display: flex; align-items: center;
  justify-content: center; cursor: pointer; font-size: 13px;
  transition: border-color 0.3s, background 0.3s;
}
.social-btn:hover { border-color: var(--sage-light); background: rgba(106,135,82,0.12); }
.donate-btn {
  margin-top: 16px; font-size: 11px; padding: 10px 22px;
  border: 1px solid rgba(155,130,56,0.4);
  color: var(--gold-light); background: transparent;
  cursor: pointer; font-family: 'Inter', sans-serif; display: block;
  transition: all 0.3s; letter-spacing: 1.2px; text-transform: uppercase; font-weight: 500;
}
.donate-btn:hover { background: rgba(155,130,56,0.1); border-color: var(--gold); }
.footer-bottom {
  border-top: 1px solid rgba(246,242,235,0.06);
  padding-top: 1.5rem; display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 0.75rem;
}
.footer-copy { font-size: 11px; color: rgba(246,242,235,0.2); font-family: 'Inter', sans-serif; letter-spacing: 0.5px; }
.plans-inline { display: flex; gap: 7px; }
.plan {
  font-size: 11px; padding: 5px 14px;
  border: 1px solid rgba(246,242,235,0.1);
  color: rgba(246,242,235,0.35); font-family: 'Inter', sans-serif; letter-spacing: 0.5px;
}
.plan.featured { background: var(--sage); border-color: var(--sage); color: white; font-weight: 600; }

/* ═══════════════════════════════════════
   TOAST
═══════════════════════════════════════ */
.site-toast {
  position: fixed; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: var(--espresso); border: 1px solid rgba(155,130,56,0.28);
  color: #C8B880; font-size: 10px; padding: 11px 28px;
  z-index: 9999; opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none; white-space: nowrap;
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
  letter-spacing: 1.5px; font-family: 'Inter', sans-serif; text-transform: uppercase; font-weight: 500;
}
.site-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════
   QR MODAL
═══════════════════════════════════════ */
.qr-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 10000;
  background: rgba(34,27,16,0.82); backdrop-filter: blur(10px);
  align-items: center; justify-content: center;
}
.qr-modal-overlay.active { display: flex; }
.qr-modal-box {
  background: var(--dark-panel); border: 1px solid rgba(106,135,82,0.22);
  border-top: 2px solid var(--sage); padding: 28px 28px 22px;
  width: min(400px, 92vw);
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
  animation: modal-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.qr-modal-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; }
.qr-modal-label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 2.5px;
  color: var(--sage-light); margin-bottom: 5px; font-weight: 600; font-family: 'Inter', sans-serif;
}
.qr-modal-title { font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; color: #F6F2EB; font-weight: 400; }
.qr-close-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.1);
  color: #7A6A58; width: 32px; height: 32px; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.2s;
}
.qr-close-btn:hover { color: #F6F2EB; border-color: rgba(255,255,255,0.3); }
.qr-canvas-wrap {
  display: flex; justify-content: center; align-items: center;
  background: #F6F2EB; padding: 14px; margin-bottom: 14px; min-height: 248px;
}
.qr-canvas-wrap canvas, .qr-canvas-wrap img { display: block; }
.qr-hint { font-size: 12px; color: #7A6A58; text-align: center; line-height: 1.6; margin-bottom: 14px; font-family: 'Inter', sans-serif; }
.qr-url-row {
  display: flex; gap: 8px; align-items: center;
  background: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.07); padding: 8px 10px;
}
.qr-url-text { flex: 1; font-size: 11px; color: #6A5A48; word-break: break-all; font-family: 'Courier New', monospace; line-height: 1.4; }
.qr-copy-btn {
  flex-shrink: 0; font-size: 10px; padding: 5px 12px;
  border: 1px solid rgba(106,135,82,0.4); background: rgba(106,135,82,0.1);
  color: var(--sage-light); cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.2s; white-space: nowrap; letter-spacing: 0.8px; text-transform: uppercase;
}
.qr-copy-btn:hover { background: rgba(106,135,82,0.22); border-color: var(--sage); }

/* ── QR modal: PIN display row ── */
.qr-pin-row { margin-top: 14px; margin-bottom: 2px; }

.qr-pin-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.qr-pin-divider::before,
.qr-pin-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(122, 96, 48, 0.25);
}
.qr-pin-or {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.8px;
  color: #7a6a58;
  white-space: nowrap;
  font-family: 'Inter', sans-serif;
}
.qr-pin-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(122, 96, 48, 0.08);
  border: 1px solid rgba(122, 96, 48, 0.35);
  border-radius: 8px;
  padding: 10px 16px;
}
.qr-pin-code {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: #d4b870;
  user-select: all;
  line-height: 1;
}
.qr-pin-copy-btn {
  background: transparent;
  border: 1px solid rgba(122, 96, 48, 0.4);
  border-radius: 5px;
  color: #a08848;
  font-size: 14px;
  padding: 4px 8px;
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.qr-pin-copy-btn:hover {
  background: rgba(122, 96, 48, 0.18);
  border-color: #c4a448;
}

/* ═══════════════════════════════════════
   SHARE BUTTONS
═══════════════════════════════════════ */
.share-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 14px;
  font-size: 11px; padding: 9px 18px; border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7);
  cursor: pointer; font-family: 'Inter', sans-serif;
  transition: all 0.25s; letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
}
.share-btn:hover { background: rgba(255,255,255,0.12); color: #fff; }
.share-btn .share-icon { font-size: 13px; }
.tmode-share {
  flex-shrink: 0; font-size: 14px; opacity: 0.35; cursor: pointer;
  padding: 4px; background: transparent; border: none;
  transition: opacity 0.2s; line-height: 1;
}
.tmode-card:hover .tmode-share { opacity: 0.7; }
.tmode-share:hover { opacity: 1 !important; }
.game-share-btn {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0;
  padding: 7px 18px; font-size: 10px; font-family: 'Inter', sans-serif; cursor: pointer;
  border: 1px solid rgba(106,135,82,0.35); background: rgba(106,135,82,0.08);
  color: var(--sage-light); transition: background 0.2s, border-color 0.2s;
  letter-spacing: 1px; text-transform: uppercase; font-weight: 500;
}
.game-share-btn:hover { background: rgba(106,135,82,0.18); border-color: var(--sage); }

/* ═══════════════════════════════════════
   AUTH MODAL
═══════════════════════════════════════ */
.auth-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 10100;
  background: rgba(34,27,16,0.88); backdrop-filter: blur(12px);
  align-items: center; justify-content: center; padding: 16px;
}
.auth-modal-overlay.active { display: flex; }
.auth-modal-box {
  background: var(--warm-white); border: 1px solid var(--parchment);
  border-top: 2px solid var(--sage);
  padding: 36px 36px 30px; width: min(420px, 100%);
  box-shadow: 0 40px 100px rgba(34,27,16,0.25);
  animation: modal-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.auth-modal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.auth-modal-logo { font-family: 'Cormorant Garamond', serif; font-size: 1.5rem; font-weight: 500; color: var(--espresso); }
.auth-modal-logo span { color: var(--sage); }
.auth-close-btn {
  background: transparent; border: 1px solid var(--parchment);
  color: var(--stone); width: 32px; height: 32px; font-size: 13px;
  cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s;
}
.auth-close-btn:hover { color: var(--espresso); border-color: var(--espresso); }
.auth-tabs {
  display: flex; margin-bottom: 26px;
  border-bottom: 1px solid var(--parchment);
}
.auth-tab {
  flex: 1; padding: 10px 0; border: none; background: transparent;
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600;
  color: var(--stone); cursor: pointer; letter-spacing: 1.5px; text-transform: uppercase;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.25s, border-color 0.25s;
}
.auth-tab.active { color: var(--espresso); border-color: var(--sage); }
.auth-google-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 16px; margin-bottom: 20px;
  border: 1px solid var(--parchment); background: var(--alabaster);
  color: var(--espresso); font-family: 'Inter', sans-serif; font-size: 13px;
  font-weight: 500; cursor: pointer; transition: background 0.25s, border-color 0.25s;
}
.auth-google-btn:hover { background: var(--linen); border-color: var(--charcoal); }
.auth-google-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-divider {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  color: var(--fog); font-size: 10px; font-family: 'Inter', sans-serif;
  text-transform: uppercase; letter-spacing: 1.5px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--parchment); }
.auth-input {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--parchment); border-bottom: 2px solid var(--parchment);
  background: var(--alabaster); color: var(--espresso);
  font-family: 'Inter', sans-serif; font-size: 14px;
  outline: none; transition: border-color 0.22s;
}
.auth-input::placeholder { color: var(--fog); }
.auth-input:focus { border-color: var(--sage); }
.auth-submit-btn {
  width: 100%; padding: 14px 0; margin-top: 4px;
  border: none; background: var(--espresso); color: var(--alabaster);
  font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: 2px; text-transform: uppercase; cursor: pointer;
  transition: background 0.3s, transform 0.12s;
}
.auth-submit-btn:hover { background: var(--sage); }
.auth-submit-btn:active { transform: scale(0.99); }
.auth-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-switch-link { text-align: center; font-size: 12px; color: var(--stone); margin-top: 6px; font-family: 'Inter', sans-serif; }
.auth-switch-link span { color: var(--sage); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.auth-switch-link span:hover { color: var(--sage-dark); }
.auth-error {
  margin-top: 12px; padding: 10px 14px;
  border-left: 2px solid rgba(180,60,50,0.5);
  background: rgba(180,60,50,0.06);
  color: #B05040; font-size: 12px; line-height: 1.55; font-family: 'Inter', sans-serif;
}

/* ═══════════════════════════════════════
   NAVBAR USER STATE
═══════════════════════════════════════ */
.nav-auth-area { display: flex; align-items: center; gap: 8px; }
.nav-user-chip {
  display: flex; align-items: center; gap: 9px;
  background: transparent; border: 1px solid var(--parchment);
  padding: 4px 12px 4px 5px;
}
.nav-avatar { width: 28px; height: 28px; object-fit: cover; flex-shrink: 0; border: 1px solid rgba(106,135,82,0.4); }
.nav-avatar-fallback {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--sage); color: white;
  font-family: 'Cormorant Garamond', serif; font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.nav-username { font-size: 12px; color: var(--charcoal); max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: 'Inter', sans-serif; }
.nav-signout-btn {
  font-size: 11px; padding: 4px 8px;
  border: 1px solid var(--parchment); background: transparent;
  color: var(--stone); cursor: pointer; transition: all 0.2s; line-height: 1; letter-spacing: 0.5px;
}
.nav-signout-btn:hover { color: #B04040; border-color: rgba(180,60,50,0.3); }

/* ════════════════════════════════════════════════════════
   DESIGN UPGRADE v5 — Olive-oil palette · Classical motifs
   ════════════════════════════════════════════════════════ */

/* ── Raleway upgrade for body copy ── */
body {
  font-family: 'Raleway', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── Ensure pseudo-element containers are positioned ── */
.page-header   { position: relative; overflow: hidden; }
.browse-header { position: relative; overflow: hidden; }

/* ════════════════════════════════════════════════════════
   CAROUSEL WRAPPER & ARROWS
   ════════════════════════════════════════════════════════ */
.carousel-wrapper {
  position: relative;
  margin: 0 -3rem;
  padding: 0 3rem;
}
.carousel-arrow {
  position: absolute; top: 50%; transform: translateY(-60%);
  z-index: 10; width: 36px; height: 72px;
  background: var(--warm-white); border: 1px solid var(--parchment);
  color: var(--stone); font-size: 20px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.25s, border-color 0.25s, background 0.25s, box-shadow 0.25s;
  flex-shrink: 0; font-family: inherit; line-height: 1;
  box-shadow: 0 4px 16px rgba(34,27,16,0.07);
}
.carousel-arrow:hover {
  color: var(--espresso); border-color: var(--espresso);
  background: var(--alabaster);
  box-shadow: 0 8px 28px rgba(34,27,16,0.13);
}
.carousel-arrow.carousel-prev { left: 0; }
.carousel-arrow.carousel-next { right: 0; }
@media (max-width: 720px) {
  .carousel-arrow { display: none; }
}

/* ════════════════════════════════════════════════════════
   CARD-IMG THEME CLASSES  (replaces inline style=)
   ════════════════════════════════════════════════════════ */
.card-img-iliada {
  background: linear-gradient(135deg, #3D1A0A, #8B3E18);
  position: relative;
}
.card-img-iliada::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(58deg,
      transparent 0px, transparent 22px, rgba(200,100,50,0.11) 22px, rgba(200,100,50,0.11) 24px),
    repeating-linear-gradient(-58deg,
      transparent 0px, transparent 22px, rgba(200,100,50,0.11) 22px, rgba(200,100,50,0.11) 24px);
}

.card-img-odysseia {
  background: linear-gradient(135deg, #0D2A3A, #185FA5);
  position: relative;
}
.card-img-odysseia::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      transparent 0px, transparent 14px, rgba(40,120,200,0.13) 14px, rgba(40,120,200,0.13) 16px),
    repeating-linear-gradient(-135deg,
      transparent 0px, transparent 14px, rgba(40,120,200,0.08) 14px, rgba(40,120,200,0.08) 16px);
}

.card-img-lyo {
  background: linear-gradient(135deg, #1a1208, #5a4010);
  position: relative;
}
.card-img-lyo::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 28px, rgba(180,140,60,0.1) 28px, rgba(180,140,60,0.1) 30px);
}

.card-img-grammar {
  background: linear-gradient(135deg, #0e1a1a, #1a4a3a);
  position: relative;
}
.card-img-grammar::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 28px, rgba(30,160,120,0.1) 28px, rgba(30,160,120,0.1) 30px);
}

.card-img-crypto {
  background: linear-gradient(135deg, #020902, #063a06);
  font-family: 'Courier New', monospace;
  font-size: 1.1rem; color: #00ff41;
  letter-spacing: 2px; text-shadow: 0 0 12px #00ff41;
}

.card-img-synirimmena {
  background: linear-gradient(135deg, #0a1a28, #1a4060);
  font-family: 'Noto Serif', serif; font-size: 1rem;
  color: #7ab8e8; text-align: center; line-height: 1.4; padding: 8px;
}

.card-img-paratheta {
  background: linear-gradient(135deg, #1a1028, #4a2060);
  font-family: 'Noto Serif', serif; font-size: 0.95rem;
  color: #d4a8f0; text-align: center; line-height: 1.4; padding: 8px;
}

.card-img-anwmala {
  background: linear-gradient(135deg, #1a0e28, #4a2a7a);
  font-family: 'Noto Serif', serif; font-size: 1.05rem;
  color: #c9a4fa; text-align: center; line-height: 1.3; padding: 10px;
}

.card-img-istoria {
  background: linear-gradient(135deg, #1A0D2A, #4A3890);
  position: relative;
}
.card-img-istoria::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(45deg, rgba(180,150,240,0.1) 25%, transparent 25%, transparent 75%, rgba(180,150,240,0.1) 75%),
    linear-gradient(-45deg, rgba(180,150,240,0.1) 25%, transparent 25%, transparent 75%, rgba(180,150,240,0.1) 75%);
  background-size: 22px 22px;
}

.card-img-myth-memory {
  background: linear-gradient(135deg, #1a0a28, #5a2080);
  position: relative;
}
.card-img-myth-memory::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 18px, rgba(180,100,240,0.1) 18px, rgba(180,100,240,0.1) 20px),
    repeating-linear-gradient(-45deg,
      transparent 0px, transparent 18px, rgba(180,100,240,0.07) 18px, rgba(180,100,240,0.07) 20px);
}

.card-img-rapid-fire {
  background: linear-gradient(135deg, #1a0808, #6a1a08);
  position: relative;
}
.card-img-rapid-fire::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, rgba(201,164,74,0.12) 0%, transparent 70%);
}

.card-img-ep {
  background: linear-gradient(135deg, #0a1a10, #1a4a30);
  font-size: 18px; color: #c9a44a; letter-spacing: 2px;
  display: flex; align-items: center; justify-content: center;
}

.card-img-locked {
  background: linear-gradient(135deg, #2A1A0D, #6B4E2A);
}

/* Game-hero variant classes (replace inline style on entry pages) */
.game-hero-iliada {
  background: linear-gradient(135deg, #3D1A0A, #8B3E18);
}

/* ════════════════════════════════════════════════════════
   CONTEXTUAL THEME SYSTEM  body[data-theme="..."]
   ════════════════════════════════════════════════════════ */

/* ─── History 7th — Ancient Civilizations (terracotta / clay) ─── */
body[data-theme="history-7"] {
  --theme-accent:  #8B5E3C;
  --theme-accent2: #C4875A;
}
body[data-theme="history-7"] .page-header,
body[data-theme="history-7"] .browse-header {
  border-bottom-color: rgba(139,94,60,0.28);
}
body[data-theme="history-7"] .grade-pill {
  color: var(--theme-accent2);
  border-color: rgba(196,135,90,0.45);
}
body[data-theme="history-7"] .subject-card::before,
body[data-theme="history-7"] .g-card::before,
body[data-theme="history-7"] .level-card.completed {
  background: var(--theme-accent2);
  border-color: var(--theme-accent2);
}
/* Column-stripe motif on page headers */
body[data-theme="history-7"] .page-header::before,
body[data-theme="history-7"] .browse-header::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 44%; bottom: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 52px,
      rgba(196,135,90,0.17) 52px, rgba(196,135,90,0.17) 60px),
    linear-gradient(to bottom,
      rgba(196,135,90,0.12) 0, rgba(196,135,90,0.12) 8px,
      transparent 8px, transparent calc(100% - 12px),
      rgba(196,135,90,0.12) calc(100% - 12px));
  pointer-events: none;
}
/* Lighter echo in the dark subject-hero */
body[data-theme="history-7"] .subject-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 44%; bottom: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 52px,
      rgba(196,135,90,0.13) 52px, rgba(196,135,90,0.13) 60px);
  pointer-events: none;
}

/* ─── History 8th — Byzantium (imperial purple / gold mosaic) ─── */
body[data-theme="history-8"] {
  --theme-accent:  #7A3070;
  --theme-accent2: #C4A448;
}
body[data-theme="history-8"] .page-header,
body[data-theme="history-8"] .browse-header {
  border-bottom-color: rgba(196,164,72,0.22);
}
body[data-theme="history-8"] .grade-pill {
  color: var(--theme-accent2);
  border-color: rgba(196,164,72,0.45);
}
body[data-theme="history-8"] .subject-card::before,
body[data-theme="history-8"] .g-card::before {
  background: var(--theme-accent2);
}
/* Byzantine diamond-mosaic motif */
body[data-theme="history-8"] .page-header::before,
body[data-theme="history-8"] .browse-header::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    linear-gradient(45deg,  rgba(196,164,72,0.13) 25%, transparent 25%, transparent 75%, rgba(196,164,72,0.13) 75%),
    linear-gradient(-45deg, rgba(196,164,72,0.13) 25%, transparent 25%, transparent 75%, rgba(196,164,72,0.13) 75%),
    linear-gradient(to left, rgba(122,48,112,0.05), transparent);
  background-size: 26px 26px, 26px 26px, 100%;
  pointer-events: none;
}
body[data-theme="history-8"] .subject-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    linear-gradient(45deg,  rgba(196,164,72,0.10) 25%, transparent 25%, transparent 75%, rgba(196,164,72,0.10) 75%),
    linear-gradient(-45deg, rgba(196,164,72,0.10) 25%, transparent 25%, transparent 75%, rgba(196,164,72,0.10) 75%);
  background-size: 26px 26px;
  pointer-events: none;
}

/* ─── History 9th — Modern World / French Rev. (stone / pediment) ─── */
body[data-theme="history-9"] {
  --theme-accent:  #607080;
  --theme-accent2: #8090A0;
}
body[data-theme="history-9"] .page-header,
body[data-theme="history-9"] .browse-header {
  border-bottom-color: rgba(140,130,120,0.28);
}
body[data-theme="history-9"] .grade-pill {
  color: var(--theme-accent2);
  border-color: rgba(130,140,150,0.45);
}
/* Horizontal stone-masonry lines */
body[data-theme="history-9"] .page-header::before,
body[data-theme="history-9"] .browse-header::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 36px,
      rgba(140,130,120,0.14) 36px, rgba(140,130,120,0.14) 40px);
  pointer-events: none;
}
body[data-theme="history-9"] .subject-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 36px,
      rgba(140,130,120,0.11) 36px, rgba(140,130,120,0.11) 40px);
  pointer-events: none;
}

/* ─── Odysseia — Epic sea (stylized waves / diagonal lattice) ─── */
body[data-theme="odysseia"] {
  --theme-accent:  #1A6A9A;
  --theme-accent2: #4A9ACA;
}
body[data-theme="odysseia"] .page-header,
body[data-theme="odysseia"] .browse-header {
  border-bottom-color: rgba(40,110,170,0.28);
}
body[data-theme="odysseia"] .grade-pill {
  color: var(--theme-accent2);
  border-color: rgba(74,154,202,0.45);
}
body[data-theme="odysseia"] .subject-card::before,
body[data-theme="odysseia"] .g-card::before {
  background: var(--theme-accent2);
}
/* Wave-lattice motif */
body[data-theme="odysseia"] .page-header::before,
body[data-theme="odysseia"] .browse-header::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0px, transparent 16px,
      rgba(40,110,170,0.14) 16px, rgba(40,110,170,0.14) 18px),
    repeating-linear-gradient(-135deg,
      transparent 0px, transparent 16px,
      rgba(40,110,170,0.09) 16px, rgba(40,110,170,0.09) 18px);
  pointer-events: none;
}
body[data-theme="odysseia"] .subject-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 55%; bottom: 0;
  background:
    repeating-linear-gradient(135deg,
      transparent 0px, transparent 16px,
      rgba(40,110,170,0.11) 16px, rgba(40,110,170,0.11) 18px),
    repeating-linear-gradient(-135deg,
      transparent 0px, transparent 16px,
      rgba(40,110,170,0.07) 16px, rgba(40,110,170,0.07) 18px);
  pointer-events: none;
}

/* ─── Iliada — Epic warfare (heraldic chevron / crimson earth) ─── */
body[data-theme="iliada"] {
  --theme-accent:  #8B3018;
  --theme-accent2: #C45030;
}
body[data-theme="iliada"] .page-header,
body[data-theme="iliada"] .browse-header {
  border-bottom-color: rgba(139,48,24,0.28);
}
body[data-theme="iliada"] .grade-pill {
  color: var(--theme-accent2);
  border-color: rgba(196,80,48,0.45);
}
body[data-theme="iliada"] .subject-card::before,
body[data-theme="iliada"] .g-card::before {
  background: var(--theme-accent2);
}
/* Heraldic chevron shield motif */
body[data-theme="iliada"] .page-header::before,
body[data-theme="iliada"] .browse-header::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    repeating-linear-gradient(60deg,
      transparent 0px, transparent 24px,
      rgba(196,80,48,0.11) 24px, rgba(196,80,48,0.11) 26px),
    repeating-linear-gradient(-60deg,
      transparent 0px, transparent 24px,
      rgba(196,80,48,0.11) 24px, rgba(196,80,48,0.11) 26px);
  pointer-events: none;
}
body[data-theme="iliada"] .subject-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    repeating-linear-gradient(60deg,
      transparent 0px, transparent 24px,
      rgba(196,80,48,0.09) 24px, rgba(196,80,48,0.09) 26px),
    repeating-linear-gradient(-60deg,
      transparent 0px, transparent 24px,
      rgba(196,80,48,0.09) 24px, rgba(196,80,48,0.09) 26px);
  pointer-events: none;
}
/* Accent the game-hero on the trivia entry page */
body[data-theme="iliada"] .game-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    repeating-linear-gradient(60deg,
      transparent 0px, transparent 24px,
      rgba(196,80,48,0.07) 24px, rgba(196,80,48,0.07) 26px),
    repeating-linear-gradient(-60deg,
      transparent 0px, transparent 24px,
      rgba(196,80,48,0.07) 24px, rgba(196,80,48,0.07) 26px);
  pointer-events: none;
}

/* ─── Eleni — Classical Greek Drama (theatrical arcs / marble) ─── */
body[data-theme="eleni"] {
  --theme-accent:  #786050;
  --theme-accent2: #A08870;
}
body[data-theme="eleni"] .page-header,
body[data-theme="eleni"] .browse-header {
  border-bottom-color: rgba(120,96,80,0.28);
}
body[data-theme="eleni"] .grade-pill {
  color: var(--theme-accent2);
  border-color: rgba(160,136,112,0.45);
}
body[data-theme="eleni"] .subject-card::before,
body[data-theme="eleni"] .g-card::before {
  background: var(--theme-accent2);
}
/* Theatrical radial arcs + marble-vein horizontals */
body[data-theme="eleni"] .page-header::before,
body[data-theme="eleni"] .browse-header::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    radial-gradient(ellipse 220px 180px at 80% 50%, rgba(120,96,80,0.13) 0%, transparent 70%),
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 44px,
      rgba(120,96,80,0.08) 44px, rgba(120,96,80,0.08) 46px);
  pointer-events: none;
}
body[data-theme="eleni"] .subject-hero::before {
  content: ''; position: absolute;
  right: 0; top: 0; width: 50%; bottom: 0;
  background:
    radial-gradient(ellipse 200px 160px at 75% 55%, rgba(120,96,80,0.11) 0%, transparent 70%),
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 44px,
      rgba(120,96,80,0.07) 44px, rgba(120,96,80,0.07) 46px);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════
   GRADE SELECTOR — modernised pill strip
   ════════════════════════════════════════════════════════ */
.grade-row {
  border-color: rgba(217,208,190,0.8);
  box-shadow: 0 8px 32px rgba(34,27,16,0.07);
  transition: box-shadow 0.35s;
}
.grade-row:hover { box-shadow: 0 12px 40px rgba(34,27,16,0.12); }

.grade-btn {
  transition:
    color       0.3s ease,
    background  0.3s ease,
    transform   0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow  0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.grade-btn:hover:not(.locked) {
  letter-spacing: 2.4px;
}

/* ════════════════════════════════════════════════════════
   INTERACTION PILL BUTTONS (filter tabs, mode buttons)
   ════════════════════════════════════════════════════════ */
.ftab {
  position: relative; overflow: hidden;
  transition: background 0.22s, color 0.22s, letter-spacing 0.22s;
}
.ftab::after {
  content: ''; position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--sage-light);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.ftab:hover:not(.active)::after { width: 60%; }
.ftab.active::after { width: 0; }

/* ════════════════════════════════════════════════════════
   RESPONSIVE CAROUSEL TOUCH (allow horizontal swipe)
   ════════════════════════════════════════════════════════ */
.carousel {
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  scroll-behavior: smooth;
}

/* ════════════════════════════════════════════════════════
   HOME PAGE — DARK IMMERSIVE HERO  v2
   ════════════════════════════════════════════════════════ */

/* Dark nav while on home */
#page-home .nav {
  background: rgba(18, 10, 6, 0.94);
  border-bottom: 1px solid rgba(195, 165, 105, 0.1);
}
#page-home .logo { color: var(--alabaster); }
#page-home .logo span { color: var(--gold-light); }
#page-home .lang-opt { color: rgba(246,242,235,0.35); }
#page-home .lang-opt.active { background: rgba(246,242,235,0.9); color: var(--espresso); }
#page-home .nav-btn {
  color: rgba(246,242,235,0.4);
  border-color: rgba(246,242,235,0.12);
}
#page-home .nav-btn:hover {
  color: var(--alabaster);
  border-color: rgba(246,242,235,0.4);
  background: transparent;
}
#page-home .nav-btn.primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-base);
  font-weight: 600;
}
#page-home .nav-btn.primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* ─── Hero: dark, immersive ─── */
.hero {
  background: var(--dark-base);
  border-bottom: none;
}
.hero::before {
  background:
    radial-gradient(ellipse 80% 55% at 50% 15%, rgba(156,130,56,0.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 30% at 15% 85%, rgba(106,135,82,0.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 85% 80%, rgba(156,130,56,0.04) 0%, transparent 55%);
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(156,130,56,0.25) 15%,
    rgba(196,164,72,0.55) 50%,
    rgba(156,130,56,0.25) 85%,
    transparent 100%);
  pointer-events: none;
}

/* Text on dark background */
.hero h1 { color: #F0EBE0; }
.hero h1 em { color: var(--gold-light); }
.hero p { color: rgba(246,242,235,0.47); }
.hero-tag { color: rgba(246,242,235,0.32); }
.hero-tag::before, .hero-tag::after { background: rgba(246,242,235,0.1); }
.hero-level-label { color: rgba(246,242,235,0.28); }
.hero-level-label::before, .hero-level-label::after { background: rgba(246,242,235,0.09); }

/* CTA on dark hero */
.cta-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--dark-base);
  font-weight: 600;
}
.cta-primary:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}
.cta-ghost {
  border-color: rgba(246,242,235,0.18);
  color: rgba(246,242,235,0.52);
}
.cta-ghost:hover {
  color: var(--alabaster);
  border-color: rgba(246,242,235,0.5);
  background: transparent;
}

/* Grade row on dark bg */
.grade-row {
  border-color: rgba(246,242,235,0.11);
  box-shadow: 0 8px 40px rgba(0,0,0,0.3);
}
.grade-item + .grade-item { border-left-color: rgba(246,242,235,0.11); }
.grade-btn { color: rgba(246,242,235,0.42); }
.grade-btn:hover:not(.locked) {
  background: rgba(246,242,235,0.06);
  color: var(--alabaster);
  box-shadow: 0 18px 52px rgba(0,0,0,0.35);
}
.grade-btn.active { background: rgba(246,242,235,0.1); color: var(--alabaster); }
.hero .dropdown {
  background: #1C1208;
  border-color: rgba(246,242,235,0.1);
  border-top-color: var(--gold);
  box-shadow: 0 28px 70px rgba(0,0,0,0.5);
}
.hero .dd-item {
  color: rgba(246,242,235,0.55);
  border-bottom-color: rgba(246,242,235,0.06);
}
.hero .dd-item:hover {
  background: rgba(196,164,72,0.09);
  color: var(--gold-light);
  padding-left: 28px;
}

/* Scroll cue on dark bg */
.scroll-cue-bar {
  background: linear-gradient(to bottom,
    transparent,
    rgba(196,164,72,0.35) 40%,
    transparent);
}

/* Particle canvas */
#hero-particles {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}
.hero > * { position: relative; z-index: 1; }

/* ─── Stats strip — gold top border transition from dark hero ─── */
.stats-strip {
  border-top: 1px solid rgba(196,164,72,0.2);
}

/* ─── Carousel + showcase fade transitions (JS only sets opacity) ─── */
#home-carousel    { transition: opacity 0.55s cubic-bezier(0.4,0,0.6,1); }
.showcase-grid    { transition: opacity 0.55s cubic-bezier(0.4,0,0.6,1); }

/* ─── Section head upgrade ─── */
.section-head h2 { font-size: 32px; letter-spacing: -0.4px; }

/* ─── Carousel card upgrade ─── */
.game-card { min-width: 192px; max-width: 192px; }
.card-img { height: 122px; }

/* ════════════════════════════════════════════════════════
   SUBJECT SHOWCASE SECTION
   ════════════════════════════════════════════════════════ */
.showcase-section {
  padding: 5rem 3rem 5.5rem;
  background: var(--warm-white);
  border-bottom: 1px solid var(--parchment);
}
.showcase-label {
  text-align: center;
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--stone); font-family: 'Inter', sans-serif; font-weight: 600;
  margin-bottom: 3rem;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.showcase-label::before, .showcase-label::after {
  content: ''; flex: 1; max-width: 70px; height: 1px; background: var(--parchment);
}
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--parchment);
  border: 1px solid var(--parchment);
}
@media (max-width: 780px) {
  .showcase-grid { grid-template-columns: 1fr; }
  .showcase-section { padding: 3rem 1.5rem 3.5rem; }
}
.showcase-card {
  position: relative; overflow: hidden;
  min-height: 290px;
  display: flex; align-items: flex-end;
  cursor: pointer;
}
.showcase-bg {
  position: absolute; inset: 0;
  transition: transform 0.75s cubic-bezier(0.16,1,0.3,1);
}
.showcase-card:hover .showcase-bg { transform: scale(1.05); }
.showcase-content {
  position: relative; z-index: 2;
  padding: 2.2rem 2.5rem;
  width: 100%;
  background: linear-gradient(to top,
    rgba(0,0,0,0.78) 0%,
    rgba(0,0,0,0.22) 55%,
    transparent 100%);
  transition: background 0.4s;
}
.showcase-card:hover .showcase-content {
  background: linear-gradient(to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.38) 55%,
    transparent 100%);
}
.showcase-icon {
  font-size: 34px; margin-bottom: 0.7rem; display: block;
  transform: translateY(0);
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1);
  filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45));
}
.showcase-card:hover .showcase-icon { transform: translateY(-5px); }
.showcase-tag {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(246,242,235,0.45); font-family: 'Inter', sans-serif; font-weight: 600;
  margin-bottom: 0.4rem; display: block;
}
.showcase-content h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(28px, 3vw, 42px); font-weight: 400;
  color: var(--alabaster); line-height: 1; margin-bottom: 0.55rem;
  letter-spacing: -0.5px;
}
.showcase-content p {
  font-size: 13px; color: rgba(246,242,235,0.5); line-height: 1.65;
  max-width: 320px; margin-bottom: 1.1rem;
  transition: color 0.35s;
}
.showcase-card:hover .showcase-content p { color: rgba(246,242,235,0.7); }
.showcase-cta {
  font-size: 10px; letter-spacing: 2.2px; text-transform: uppercase;
  color: var(--gold-light); font-family: 'Inter', sans-serif; font-weight: 600;
  opacity: 0.8;
  display: inline-flex; align-items: center;
  transition: letter-spacing 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s;
}
.showcase-card:hover .showcase-cta { letter-spacing: 3px; opacity: 1; }

/* ── Showcase: Iliad ── */
.showcase-iliada .showcase-bg {
  background: linear-gradient(155deg, #3D1208 0%, #7A2410 55%, #5A180A 100%);
}
.showcase-iliada .showcase-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(60deg,
      transparent 0px, transparent 24px, rgba(196,80,48,0.12) 24px, rgba(196,80,48,0.12) 26px),
    repeating-linear-gradient(-60deg,
      transparent 0px, transparent 24px, rgba(196,80,48,0.12) 24px, rgba(196,80,48,0.12) 26px);
}
.showcase-iliada .showcase-content h3 { color: #F0CAAF; }
.showcase-iliada .showcase-tag { color: rgba(230,140,90,0.6); }

/* ── Showcase: Odyssey ── */
.showcase-odysseia .showcase-bg {
  background: linear-gradient(155deg, #061428 0%, #0E2A58 55%, #061E40 100%);
}
.showcase-odysseia .showcase-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(135deg,
      transparent 0px, transparent 14px, rgba(40,120,200,0.12) 14px, rgba(40,120,200,0.12) 16px),
    repeating-linear-gradient(-135deg,
      transparent 0px, transparent 14px, rgba(40,120,200,0.07) 14px, rgba(40,120,200,0.07) 16px);
}
.showcase-odysseia .showcase-content h3 { color: #B0D4F0; }
.showcase-odysseia .showcase-tag { color: rgba(90,150,210,0.65); }

/* ── Showcase: Grammar ── */
.showcase-grammar .showcase-bg {
  background: linear-gradient(155deg, #1A1006 0%, #3A2010 55%, #2A1A08 100%);
}
.showcase-grammar .showcase-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 28px, rgba(180,140,60,0.12) 28px, rgba(180,140,60,0.12) 30px),
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 56px, rgba(180,140,60,0.08) 56px, rgba(180,140,60,0.08) 58px);
}
.showcase-grammar .showcase-content h3 { color: #F0E0B0; }
.showcase-grammar .showcase-tag { color: rgba(200,160,80,0.65); }

/* ── Showcase: History ── */
.showcase-history .showcase-bg {
  background: linear-gradient(155deg, #1A0D2A 0%, #3A2070 55%, #280E48 100%);
}
.showcase-history .showcase-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(45deg,  rgba(180,150,240,0.1) 25%, transparent 25%, transparent 75%, rgba(180,150,240,0.1) 75%),
    linear-gradient(-45deg, rgba(180,150,240,0.1) 25%, transparent 25%, transparent 75%, rgba(180,150,240,0.1) 75%);
  background-size: 22px 22px;
}
.showcase-history .showcase-content h3 { color: #E0D0F8; }
.showcase-history .showcase-tag { color: rgba(180,150,220,0.65); }

/* ── Showcase: Eleni (Classical Drama) ── */
.showcase-eleni .showcase-bg {
  background: linear-gradient(155deg, #1A1008 0%, #3A2A14 55%, #28180A 100%);
}
.showcase-eleni .showcase-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 200px 160px at 75% 55%, rgba(160,130,80,0.13) 0%, transparent 70%),
    repeating-linear-gradient(180deg,
      transparent 0px, transparent 44px,
      rgba(160,130,80,0.07) 44px, rgba(160,130,80,0.07) 46px);
}
.showcase-eleni .showcase-content h3 { color: #F0DEB0; }
.showcase-eleni .showcase-tag { color: rgba(200,160,90,0.65); }

/* ── Showcase: Modern Greek ── */
.showcase-nea .showcase-bg {
  background: linear-gradient(155deg, #0E1A14 0%, #1A3028 55%, #0E2018 100%);
}
.showcase-nea .showcase-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,
      transparent 0px, transparent 20px,
      rgba(106,135,82,0.09) 20px, rgba(106,135,82,0.09) 22px),
    repeating-linear-gradient(90deg,
      transparent 0px, transparent 20px,
      rgba(106,135,82,0.06) 20px, rgba(106,135,82,0.06) 22px);
}
.showcase-nea .showcase-content h3 { color: #C8E0C0; }
.showcase-nea .showcase-tag { color: rgba(140,180,120,0.65); }

/* ════════════════════════════════════════════════════════
   SVG LINE-ART BANNERS  (data-theme attribute system)
   Target: .g-banner[data-theme="X"] and .card-banner[data-theme="X"]
   HTML usage: <div class="g-banner" data-theme="iliad">🗡️</div>
   ════════════════════════════════════════════════════════ */

.g-banner[data-theme], .card-banner[data-theme] {
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: auto 82%;
}

/* ── hist-a: Ancient Civilizations — Doric Column ── */
.g-banner[data-theme="hist-a"],
.card-banner[data-theme="hist-a"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='rgba(201,164,74,0.22)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='130' y='150' width='62' height='5' rx='1'/%3E%3Crect x='136' y='144' width='50' height='6' rx='1'/%3E%3Cpolygon points='143,144 179,144 176,38 146,38'/%3E%3Cline x1='150' y1='142' x2='148' y2='40'/%3E%3Cline x1='157' y1='142' x2='156' y2='40'/%3E%3Cline x1='163' y1='142' x2='163' y2='40'/%3E%3Cline x1='169' y1='142' x2='170' y2='40'/%3E%3Cline x1='175' y1='142' x2='176' y2='40'/%3E%3Cpath d='M146,38 Q162,28 176,38'/%3E%3Crect x='128' y='20' width='66' height='8' rx='1'/%3E%3Cline x1='112' y1='20' x2='200' y2='20'/%3E%3Cline x1='112' y1='16' x2='200' y2='16'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── hist-b: Byzantium — Byzantine Cross & Medallion ── */
.g-banner[data-theme="hist-b"],
.card-banner[data-theme="hist-b"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='rgba(201,164,74,0.22)' stroke-width='1.5' fill='none'%3E%3Ccircle cx='150' cy='80' r='68'/%3E%3Ccircle cx='150' cy='80' r='46'/%3E%3Cline x1='150' y1='12' x2='150' y2='148'/%3E%3Cline x1='82' y1='80' x2='218' y2='80'/%3E%3Cline x1='143' y1='12' x2='157' y2='12'/%3E%3Cline x1='143' y1='148' x2='157' y2='148'/%3E%3Cline x1='82' y1='73' x2='82' y2='87'/%3E%3Cpolygon points='150,63 167,80 150,97 133,80'/%3E%3Ccircle cx='150' cy='80' r='10'/%3E%3Ccircle cx='150' cy='26' r='5'/%3E%3Ccircle cx='150' cy='134' r='5'/%3E%3Ccircle cx='96' cy='80' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── hist-c: Modern/Revolutions — Classical Pediment ── */
.g-banner[data-theme="hist-c"],
.card-banner[data-theme="hist-c"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='rgba(201,164,74,0.22)' stroke-width='1.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M8,108 L104,16 L200,108'/%3E%3Cline x1='8' y1='108' x2='200' y2='108'/%3E%3Cline x1='8' y1='116' x2='200' y2='116'/%3E%3Cline x1='8' y1='122' x2='200' y2='122'/%3E%3Cline x1='28' y1='122' x2='28' y2='155'/%3E%3Cline x1='56' y1='122' x2='56' y2='155'/%3E%3Cline x1='84' y1='122' x2='84' y2='155'/%3E%3Cline x1='112' y1='122' x2='112' y2='155'/%3E%3Cline x1='140' y1='122' x2='140' y2='155'/%3E%3Cline x1='168' y1='122' x2='168' y2='155'/%3E%3Cline x1='8' y1='155' x2='200' y2='155'/%3E%3Cpolygon points='104,16 109,5 99,5'/%3E%3Cpath d='M38,108 L104,42 L170,108'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── odyssey: Epic Sea — Waves & Ship ── */
.g-banner[data-theme="odyssey"],
.card-banner[data-theme="odyssey"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='rgba(201,164,74,0.22)' stroke-width='1.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M0,100 Q25,88 50,100 Q75,112 100,100 Q125,88 150,100 Q175,112 200,100'/%3E%3Cpath d='M0,116 Q25,104 50,116 Q75,128 100,116 Q125,104 150,116 Q175,128 200,116'/%3E%3Cpath d='M0,132 Q25,120 50,132 Q75,144 100,132 Q125,120 150,132 Q175,144 200,132'/%3E%3Cpath d='M56,88 Q90,98 124,88 L118,104 Q90,110 62,104 Z'/%3E%3Cline x1='88' y1='88' x2='88' y2='44'/%3E%3Cpath d='M88,46 Q114,62 112,84 L88,84 Z'/%3E%3Cline x1='88' y1='60' x2='106' y2='66'/%3E%3Cline x1='66' y1='98' x2='50' y2='112'/%3E%3Cline x1='76' y1='100' x2='62' y2='114'/%3E%3Cline x1='104' y1='98' x2='118' y2='112'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── iliad: Epic War — Trojan Horse ── */
.g-banner[data-theme="iliad"],
.card-banner[data-theme="iliad"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='rgba(201,164,74,0.22)' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M68,128 Q48,128 44,106 Q40,88 48,78 Q58,68 78,66 Q98,64 116,70 Q132,76 136,92 Q140,110 130,122 Q120,134 98,136 Q84,138 68,128 Z'/%3E%3Cpath d='M106,68 Q110,54 116,44 Q120,36 128,34'/%3E%3Cpath d='M116,44 Q122,30 138,26 Q150,24 152,36 Q146,42 136,46 Q126,50 116,44 Z'/%3E%3Cpath d='M138,26 Q142,16 148,20 Q150,26 146,30'/%3E%3Ccircle cx='140' cy='33' r='2'/%3E%3Cpath d='M116,44 Q110,54 106,66'/%3E%3Cpath d='M48,106 Q30,103 24,116 Q26,130 38,124'/%3E%3Cline x1='64' y1='128' x2='58' y2='155'/%3E%3Cline x1='76' y1='132' x2='72' y2='155'/%3E%3Cline x1='108' y1='132' x2='114' y2='155'/%3E%3Cline x1='120' y1='128' x2='128' y2='155'/%3E%3Crect x='80' y='88' width='28' height='22' rx='2'/%3E%3Cline x1='94' y1='88' x2='94' y2='110'/%3E%3Ccircle cx='106' cy='99' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   NAV ROLE BUTTONS  (Teacher · Admin · Upgrade)
   ============================================================ */

.nav-btn-teacher {
  background: rgba(106,135,82,0.18);
  border: 1px solid rgba(106,135,82,0.45);
  color: var(--sage-light);
}
.nav-btn-teacher:hover {
  background: rgba(106,135,82,0.30);
  border-color: var(--sage-light);
}

.nav-btn-admin {
  background: rgba(180,60,40,0.15);
  border: 1px solid rgba(200,80,55,0.40);
  color: #E8785A;
}
.nav-btn-admin:hover {
  background: rgba(180,60,40,0.28);
  border-color: #E8785A;
}

.nav-btn-upgrade {
  background: rgba(156,130,56,0.18);
  border: 1px solid rgba(196,164,72,0.45);
  color: var(--gold-light);
}
.nav-btn-upgrade:hover {
  background: rgba(156,130,56,0.30);
  border-color: var(--gold-light);
}

/* Tartarus Review Hub nav button */
.nav-btn-review-hub {
  background: rgba(192, 85, 53, 0.12);
  border: 1px solid rgba(192, 85, 53, 0.38);
  color: #D97B5C;
}
.nav-btn-review-hub:hover {
  background: rgba(192, 85, 53, 0.22);
  border-color: #C05535;
  color: #E8956E;
}

/* ============================================================
   SUBSCRIBE PAGE  (#page-subscribe)
   ============================================================ */

.sub-page-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* Hero */
.sub-hero {
  padding: 3.5rem 0 2.5rem;
  text-align: center;
}
.sub-hero-tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(156,130,56,0.35);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 1.1rem;
}
.sub-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 400;
  color: var(--espresso);
  margin-bottom: 0.65rem;
  line-height: 1.15;
}
.sub-hero p {
  font-size: 1rem;
  color: var(--stone);
  max-width: 520px;
  margin: 0 auto;
}

/* Main two-column layout */
.sub-main-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 780px) {
  .sub-main-layout { grid-template-columns: 1fr; }
}

/* Steps */
.sub-section {
  margin-bottom: 2rem;
}
.sub-section-label {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: 'Cinzel', serif;
  font-size: 11.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1rem;
}
.sub-step-num {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark-base);
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* User Type Toggle */
.sub-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.sub-type-btn {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 1rem 1.1rem;
  background: var(--warm-white);
  border: 1.5px solid var(--parchment);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}
.sub-type-btn:hover {
  border-color: var(--gold);
  background: rgba(156,130,56,0.04);
}
.sub-type-btn.active {
  border-color: var(--gold);
  background: rgba(156,130,56,0.06);
  box-shadow: 0 0 0 3px rgba(156,130,56,0.12);
}
.sub-type-icon { font-size: 22px; }
.sub-type-label {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--espresso);
}
.sub-type-desc {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.35;
}

/* Class Select */
.sub-class-select {
  width: 100%;
  padding: 0.7rem 1rem;
  background: var(--warm-white);
  border: 1.5px solid var(--parchment);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--espresso);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23867660' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 12px;
  padding-right: 2.2rem;
  transition: border-color 0.18s;
}
.sub-class-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156,130,56,0.10);
}

/* Pricing Cards Grid */
.sub-plans-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 580px) {
  .sub-plans-grid { grid-template-columns: repeat(2, 1fr); }
}

.sub-plan-card {
  position: relative;
  padding: 1.1rem 0.8rem 0.9rem;
  background: var(--warm-white);
  border: 1.5px solid var(--parchment);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
  user-select: none;
  overflow: hidden;
}
.sub-plan-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}
.sub-plan-card.selected {
  border-color: var(--gold);
  background: rgba(156,130,56,0.06);
  box-shadow: 0 0 0 3px rgba(156,130,56,0.12), 0 4px 16px rgba(156,130,56,0.10);
}
.sub-plan-card.popular {
  border-color: var(--sage);
}
.sub-plan-card.popular.selected {
  border-color: var(--gold);
}

.sub-popular-tag {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: var(--sage);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 0;
  text-align: center;
}
.sub-discount-badge {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--gold);
  color: var(--dark-base);
  font-size: 10px;
  font-weight: 700;
  font-family: 'Cinzel', serif;
  padding: 2px 7px;
  border-radius: 20px;
  line-height: 1.5;
}
.sub-plan-card.popular .sub-discount-badge { top: 24px; }

.sub-plan-duration {
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0.5px;
  margin-bottom: 6px;
  margin-top: 4px;
}
.sub-plan-card.popular .sub-plan-duration { margin-top: 18px; }

.sub-plan-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1.1;
}
.sub-plan-subprice {
  font-size: 11px;
  color: var(--stone);
  margin-top: 3px;
}
.sub-plan-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--dark-base);
  font-size: 11px;
  font-weight: 700;
  margin-top: 8px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.18s, transform 0.18s;
}
.sub-plan-check.visible {
  opacity: 1;
  transform: scale(1);
}

/* Checkout CTA */
.sub-checkout-wrap {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
}
.sub-checkout-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.85rem 2rem;
  background: var(--espresso);
  color: var(--alabaster);
  border: none;
  border-radius: 10px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.18s, transform 0.15s, box-shadow 0.18s;
}
.sub-checkout-btn:hover {
  background: var(--charcoal);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34,27,16,0.18);
}
.sub-checkout-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.sub-btn-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 16px;
  color: var(--gold-light);
}
.sub-secure-note {
  font-size: 12px;
  color: var(--stone);
}

/* Features column */
.sub-features-card {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.sub-features-title {
  font-family: 'Cinzel', serif;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 1.1rem;
}
.sub-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.sub-feature-item:last-child { border-bottom: none; }
.sub-feat-icon { font-size: 20px; flex-shrink: 0; line-height: 1.3; }
.sub-feat-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--espresso);
  margin-bottom: 2px;
}
.sub-feat-desc {
  font-size: 12px;
  color: var(--stone);
  line-height: 1.4;
}

.sub-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.sub-trust-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--stone);
  background: var(--linen);
  border-radius: 20px;
  padding: 4px 10px;
}
.sub-trust-icon { font-size: 13px; }


/* ============================================================
   ADMIN PAGE  (#page-admin)
   ============================================================ */

.admin-page-content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem 5rem;
}

/* Hero */
.admin-hero {
  padding: 3rem 0 2rem;
}
.admin-hero-tag {
  display: inline-block;
  font-family: 'Cinzel', serif;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #E8785A;
  border: 1px solid rgba(200,80,55,0.35);
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 0.9rem;
}
.admin-hero h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 400;
  color: var(--espresso);
  margin-bottom: 0.5rem;
}
.admin-hero p {
  font-size: 0.95rem;
  color: var(--stone);
  max-width: 500px;
}

/* ── Admin tab navigation bar ── */
.admin-tabs-nav {
  display: flex;
  gap: 0;
  margin-bottom: 1.75rem;
  border-bottom: 2px solid var(--linen);
}
.admin-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.4rem;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.6px;
  color: var(--stone);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.admin-tab-btn:hover { color: var(--espresso); }
.admin-tab-btn.active {
  color: var(--espresso);
  border-bottom-color: var(--gold);
}

/* Stats row */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 480px) {
  .admin-stats-row { grid-template-columns: 1fr 1fr; }
}
.admin-stat-box {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  text-align: center;
}
.admin-stat-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--espresso);
  line-height: 1;
  margin-bottom: 4px;
}
.admin-stat-label {
  font-size: 11.5px;
  color: var(--stone);
  letter-spacing: 0.3px;
}

/* Cards grid */
.admin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 680px) {
  .admin-grid { grid-template-columns: 1fr; }
}

.admin-card {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  border-radius: 16px;
  padding: 1.6rem;
  overflow: hidden;
}
.admin-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--linen);
}
.admin-card-icon { font-size: 22px; flex-shrink: 0; }
.admin-card-header h2 {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--espresso);
  letter-spacing: 0.5px;
  margin: 0;
}

/* Form elements */
.admin-form { display: flex; flex-direction: column; gap: 1rem; }

.admin-field { display: flex; flex-direction: column; gap: 5px; }
.admin-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.admin-field label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.admin-input,
.admin-select {
  padding: 0.6rem 0.85rem;
  background: var(--alabaster);
  border: 1.5px solid var(--parchment);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--espresso);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.admin-input:focus,
.admin-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156,130,56,0.10);
}

/* Code row with generate button */
.admin-code-row {
  display: flex;
  gap: 0.5rem;
}
.admin-code-row .admin-input { flex: 1; }
.admin-gen-btn {
  padding: 0.6rem 0.9rem;
  background: var(--linen);
  border: 1.5px solid var(--parchment);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: var(--stone);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.admin-gen-btn:hover {
  background: var(--parchment);
  border-color: var(--stone);
}

/* Action buttons */
.admin-action-btn {
  padding: 0.75rem 1.4rem;
  background: var(--espresso);
  color: var(--alabaster);
  border: none;
  border-radius: 9px;
  font-family: 'Cinzel', serif;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
  align-self: flex-start;
}
.admin-action-btn:hover {
  background: var(--charcoal);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(34,27,16,0.14);
}
.admin-action-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.admin-action-btn.secondary {
  background: rgba(156,130,56,0.12);
  color: var(--gold);
  border: 1.5px solid rgba(156,130,56,0.35);
}
.admin-action-btn.secondary:hover {
  background: rgba(156,130,56,0.20);
  border-color: var(--gold);
}

/* Result feedback */
.admin-result {
  font-size: 13px;
  min-height: 1.2em;
  line-height: 1.4;
  border-radius: 6px;
  padding: 0;
  transition: all 0.2s;
}
.admin-result.success {
  color: var(--sage);
  background: rgba(106,135,82,0.08);
  padding: 8px 12px;
  border: 1px solid rgba(106,135,82,0.25);
}
.admin-result.error {
  color: #C0432A;
  background: rgba(192,67,42,0.07);
  padding: 8px 12px;
  border: 1px solid rgba(192,67,42,0.20);
}

/* Coupon codes list */
.admin-codes-section {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--linen);
}
.admin-codes-header {
  font-family: 'Cinzel', serif;
  font-size: 10.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 0.75rem;
}
.admin-codes-empty,
.admin-codes-loading {
  font-size: 13px;
  color: var(--stone);
  padding: 0.5rem 0;
  font-style: italic;
}
.admin-code-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.4rem;
  border-bottom: 1px solid rgba(0,0,0,0.04);
  flex-wrap: wrap;
}
.admin-code-row:last-child { border-bottom: none; }
.admin-code-row.inactive { opacity: 0.45; }
.admin-code-name {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--espresso);
  letter-spacing: 0.5px;
  min-width: 130px;
}
.admin-code-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex: 1;
}
.admin-code-discount,
.admin-code-uses,
.admin-code-expiry,
.admin-code-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--linen);
  color: var(--stone);
}
.admin-code-discount {
  background: rgba(156,130,56,0.12);
  color: var(--gold);
  font-weight: 700;
}
.admin-code-status.active {
  background: rgba(106,135,82,0.12);
  color: var(--sage);
  font-weight: 600;
}
.admin-code-status.inactive {
  background: rgba(135,110,96,0.12);
  color: var(--stone);
}
.admin-deact-btn {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid rgba(192,67,42,0.30);
  background: transparent;
  color: #C0432A;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
  margin-left: auto;
}
.admin-deact-btn:hover {
  background: rgba(192,67,42,0.10);
}

/* ── Usage progress bar ── */
.admin-usage-bar {
  width: 100%;
  height: 3px;
  background: var(--linen);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.admin-usage-fill {
  height: 100%;
  background: var(--gold);
  border-radius: 2px;
  transition: width 0.4s ease;
}
.admin-code-expiry.expired { color: #C0432A; }

/* ── Wide admin card (spans full grid) ── */
.admin-card-wide {
  grid-column: 1 / -1;
}

/* ============================================================
   SUBSCRIPTIONS PANEL  (#admin-subscriptions-panel)
   Dark theme — Obsidian · Terracotta · Shale · Bronze · Raleway
   ============================================================ */

.admin-subs-panel {
  border-radius: 16px;
  padding: 1.6rem;
  overflow: hidden;
  border: 1px solid rgba(180, 140, 90, 0.22);
  --sp-bg:           #604F42;
  --sp-surface:      #72604F;
  --sp-border:       rgba(200, 160, 100, 0.28);
  --sp-terra:        #D4694A;
  --sp-terra-dim:    rgba(212, 105, 74, 0.28);
  --sp-shale:        #C0B4A6;
  --sp-bronze:       #D4AE58;
  --sp-bronze-glow:  rgba(212, 174, 88, 0.32);
  --sp-text:         #F0EAE0;
  --sp-toggle-off:   #5A4A3C;
  --sp-toggle-on:    #D4AE58;
  background: var(--sp-bg) !important;
  border-color: var(--sp-border) !important;
  font-family: 'Raleway', 'Inter', sans-serif;
}

.admin-subs-panel .subs-panel-header {
  border-bottom: 1px solid var(--sp-terra-dim);
  margin-bottom: 0;
}
.admin-subs-panel .subs-panel-header h2 {
  color: var(--sp-text) !important;
  font-family: 'Raleway', sans-serif !important;
  font-size: 13px !important;
  letter-spacing: 1px !important;
}

/* -- Sections -- */
.subs-section {
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--sp-terra-dim);
}
.subs-section:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.subs-section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Raleway', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--sp-terra);
  margin-bottom: 1.25rem;
}
.subs-section-icon { font-size: 13px; opacity: 0.65; }

/* -- Tier Rules Matrix -- */
.subs-matrix-scroll {
  overflow-x: auto;
  border-radius: 9px;
  border: 1px solid var(--sp-border);
  margin-bottom: 1.15rem;
}

.subs-matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Raleway', sans-serif;
  font-size: 12.5px;
  min-width: 580px;
}
.subs-matrix-table thead tr {
  background: rgba(201, 164, 74, 0.05);
  border-bottom: 1px solid var(--sp-border);
}
.subs-tier-header-cell { width: 100px; }
.subs-feat-header {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sp-shale);
  padding: 0.7rem 0.5rem;
  text-align: center;
  white-space: nowrap;
}
.subs-matrix-table tbody tr {
  border-bottom: 1px solid rgba(180, 140, 90, 0.06);
  transition: background 0.15s;
}
.subs-matrix-table tbody tr:last-child { border-bottom: none; }
.subs-matrix-table tbody tr:hover { background: rgba(201, 164, 74, 0.03); }

.subs-tier-name-cell { padding: 0.85rem 1rem; white-space: nowrap; }

.subs-tier-pill {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 20px;
}
.subs-tier-free   { background: rgba(140,138,136,0.14); color: #A8A5A0; border: 1px solid rgba(140,138,136,0.28); }
.subs-tier-pro    { background: rgba(201,164,74,0.11);  color: #C9A44A; border: 1px solid rgba(201,164,74,0.32); }
.subs-tier-school { background: rgba(168,69,48,0.11);   color: #D4735A; border: 1px solid rgba(168,69,48,0.30); }

/* Toggle */
.subs-toggle-cell {
  text-align: center;
  padding: 0.75rem 0.5rem;
  vertical-align: middle;
}
.subs-toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.subs-toggle input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.subs-toggle-track {
  width: 34px;
  height: 18px;
  background: var(--sp-toggle-off);
  border-radius: 9px;
  position: relative;
  transition: background 0.2s;
  border: 1px solid rgba(255,255,255,0.05);
}
.subs-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: #5A5D62;
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.subs-toggle input:checked + .subs-toggle-track {
  background: var(--sp-toggle-on);
}
.subs-toggle input:checked + .subs-toggle-track::after {
  transform: translateX(16px);
  background: #fff;
}

/* Select */
.subs-select-cell {
  text-align: center;
  padding: 0.6rem 0.5rem;
  vertical-align: middle;
}
.subs-select {
  background: var(--sp-surface);
  border: 1.5px solid rgba(180, 140, 90, 0.20);
  color: var(--sp-text);
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  min-width: 90px;
}
.subs-select:focus {
  outline: none;
  border-color: var(--sp-bronze);
  box-shadow: 0 0 0 2px var(--sp-bronze-glow);
}
.subs-select option { background: #5A4A3C; }

/* Number input */
.subs-number-cell {
  text-align: center;
  padding: 0.6rem 0.5rem;
  vertical-align: middle;
}
.subs-number-input {
  width: 62px;
  background: var(--sp-surface);
  border: 1.5px solid rgba(180, 140, 90, 0.20);
  color: var(--sp-text);
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  text-align: center;
  padding: 0.3rem 0.35rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.subs-number-input:focus {
  outline: none;
  border-color: var(--sp-bronze);
  box-shadow: 0 0 0 2px var(--sp-bronze-glow);
}

/* Matrix save row */
.subs-matrix-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}

/* Glowing bronze save button */
.subs-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.4rem;
  background: linear-gradient(135deg, #B8943A 0%, #C9A44A 60%, #D4AE52 100%);
  color: #18130A;
  border: none;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s, opacity 0.15s;
  box-shadow: 0 2px 10px rgba(201, 164, 74, 0.22);
}
.subs-save-btn:hover {
  box-shadow: 0 4px 22px rgba(201, 164, 74, 0.48), 0 0 14px rgba(201,164,74,0.16);
  transform: translateY(-1px);
}
.subs-save-btn:active  { transform: none; opacity: 0.85; }
.subs-save-btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; box-shadow: none; }
.subs-save-icon { font-size: 13px; opacity: 0.80; }

/* Result feedback */
.subs-result {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  min-height: 1.2em;
  line-height: 1.5;
  color: transparent;
  transition: color 0.2s;
}
.subs-result.success { color: #6DBF89; }
.subs-result.error   { color: #D4735A; }

/* -- Classroom Linker section -- */
.subs-classroom-search {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  max-width: 520px;
}
.subs-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.subs-label {
  font-family: 'Raleway', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--sp-shale);
}
.subs-search-row {
  display: flex;
  gap: 0.5rem;
}
.subs-input {
  flex: 1;
  background: var(--sp-surface);
  border: 1.5px solid rgba(180, 140, 90, 0.20);
  color: var(--sp-text);
  border-radius: 7px;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  padding: 0.52rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.subs-input:focus {
  outline: none;
  border-color: var(--sp-bronze);
  box-shadow: 0 0 0 3px var(--sp-bronze-glow);
}
.subs-input::placeholder { color: rgba(140,138,136,0.42); }
.subs-search-btn {
  padding: 0.52rem 1.1rem;
  background: var(--sp-terra);
  color: #EEDDD4;
  border: none;
  border-radius: 7px;
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
}
.subs-search-btn:hover    { background: #C0542D; }
.subs-search-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.subs-search-result {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  color: var(--sp-shale);
  min-height: 1em;
  transition: color 0.2s;
}
.subs-search-result.found     { color: #C9A44A; }
.subs-search-result.not-found { color: #D4735A; }

/* Bind panel */
.subs-classroom-bind {
  background: rgba(201, 164, 74, 0.04);
  border: 1px solid rgba(201, 164, 74, 0.12);
  border-radius: 10px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  animation: subs-bind-in 0.25s cubic-bezier(0.16,1,0.3,1) both;
  max-width: 640px;
}
@keyframes subs-bind-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.subs-bind-header {
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: var(--sp-bronze);
  letter-spacing: 0.5px;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(201, 164, 74, 0.12);
}
.subs-bind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}
@media (max-width: 520px) {
  .subs-bind-grid { grid-template-columns: 1fr; }
}

/* Grade checkboxes */
.subs-grades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
  gap: 0.35rem 0.5rem;
  padding: 0.65rem 0.75rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--sp-border);
  border-radius: 7px;
}
.subs-grade-check {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  color: var(--sp-text);
  cursor: pointer;
  padding: 0.28rem 0.35rem;
  border-radius: 4px;
  transition: background 0.12s;
}
.subs-grade-check:hover { background: rgba(201,164,74,0.07); }
.subs-grade-check input[type="checkbox"] {
  accent-color: var(--sp-bronze);
  width: 13px;
  height: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.subs-bind-btn { align-self: flex-start; }

/* Moss-green success toast */
.subs-toast {
  position: fixed;
  bottom: 2.25rem;
  left: 50%;
  transform: translateX(-50%);
  background: #192218;
  border: 1px solid rgba(72,180,96,0.32);
  border-radius: 10px;
  padding: 0.7rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  color: #74C98A;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
  z-index: 9999;
  animation: subs-toast-in 0.3s cubic-bezier(0.16,1,0.3,1) both;
  pointer-events: none;
  white-space: nowrap;
}
@keyframes subs-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(14px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.subs-toast-icon { width: 18px; height: 18px; flex-shrink: 0; }

/* ── Mass Grant Access section ── */
.admin-mass-method-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.admin-mass-method-btn {
  flex: 1;
  padding: 0.52rem 0.75rem;
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border);
  border-radius: 7px;
  color: var(--sp-shale);
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  text-align: center;
}
.admin-mass-method-btn:hover {
  border-color: var(--sp-bronze);
  color: var(--sp-bronze);
}
.admin-mass-method-btn.active {
  border-color: var(--sp-bronze);
  background: rgba(212, 174, 88, 0.10);
  color: var(--sp-bronze);
}

.admin-mass-input-zone {
  margin-bottom: 1rem;
}
.admin-mass-textarea {
  width: 100%;
  min-height: 90px;
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border);
  color: var(--sp-text);
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 12.5px;
  padding: 0.65rem 0.85rem;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.admin-mass-textarea:focus {
  outline: none;
  border-color: var(--sp-bronze);
  box-shadow: 0 0 0 3px var(--sp-bronze-glow);
}
.admin-mass-textarea::placeholder { color: rgba(192, 180, 166, 0.38); }

.admin-mass-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.5rem 1rem;
  background: rgba(212, 174, 88, 0.04);
  border: 2px dashed rgba(212, 174, 88, 0.28);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: center;
  position: relative;
}
.admin-mass-dropzone:hover,
.admin-mass-dropzone.drag-over {
  background: rgba(212, 174, 88, 0.09);
  border-color: var(--sp-bronze);
}
.admin-mass-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.admin-mass-drop-icon {
  font-size: 28px;
  line-height: 1;
  margin-bottom: 0.2rem;
  opacity: 0.7;
}
.admin-mass-drop-text {
  font-family: 'Raleway', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: var(--sp-bronze);
  letter-spacing: 0.3px;
}
.admin-mass-drop-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  color: var(--sp-shale);
  margin-top: 0.15rem;
}
.admin-mass-file-status {
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  color: #74C98A;
  margin-top: 0.35rem;
  min-height: 1em;
}

/* Settings row */
.admin-mass-settings-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 560px) {
  .admin-mass-settings-row { grid-template-columns: 1fr; }
}
.admin-mass-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.admin-mass-label {
  font-family: 'Raleway', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--sp-shale);
}
.admin-mass-select {
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border);
  color: var(--sp-text);
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  padding: 0.38rem 0.6rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}
.admin-mass-select:focus,
.admin-mass-input:focus {
  outline: none;
  border-color: var(--sp-bronze);
  box-shadow: 0 0 0 2px var(--sp-bronze-glow);
}
.admin-mass-select option { background: #4a3e34; }
.admin-mass-input {
  background: var(--sp-surface);
  border: 1.5px solid var(--sp-border);
  color: var(--sp-text);
  border-radius: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  padding: 0.38rem 0.6rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Preview & execute row */
.admin-mass-action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.admin-mass-preview-btn {
  padding: 0.52rem 1.1rem;
  background: rgba(212, 174, 88, 0.12);
  border: 1.5px solid var(--sp-bronze);
  border-radius: 7px;
  color: var(--sp-bronze);
  font-family: 'Raleway', sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s;
}
.admin-mass-preview-btn:hover {
  background: rgba(212, 174, 88, 0.20);
  box-shadow: 0 2px 10px rgba(212, 174, 88, 0.20);
}

/* Preview table */
.admin-mass-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid var(--sp-border);
  margin-bottom: 1rem;
}
.admin-mass-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  min-width: 400px;
}
.admin-mass-table thead tr {
  background: rgba(212, 174, 88, 0.06);
  border-bottom: 1px solid var(--sp-border);
}
.admin-mass-table th {
  padding: 0.6rem 0.85rem;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--sp-shale);
  text-align: left;
  white-space: nowrap;
}
.admin-mass-table td {
  padding: 0.5rem 0.85rem;
  color: var(--sp-text);
  border-bottom: 1px solid rgba(200, 160, 100, 0.06);
  vertical-align: middle;
}
.admin-mass-table tbody tr:last-child td { border-bottom: none; }
.admin-mass-table tbody tr:hover { background: rgba(212, 174, 88, 0.03); }
.admin-mass-table .mass-email-cell {
  font-size: 12.5px;
  letter-spacing: 0.2px;
}

/* Status badges */
.mass-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
}
.mass-status-pending {
  background: rgba(192, 180, 166, 0.10);
  color: var(--sp-shale);
  border: 1px solid rgba(192, 180, 166, 0.20);
}
.mass-status-loading {
  background: rgba(212, 174, 88, 0.10);
  color: var(--sp-bronze);
  border: 1px solid rgba(212, 174, 88, 0.28);
  animation: mass-pulse 1s ease-in-out infinite;
}
@keyframes mass-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}
.mass-status-ok {
  background: rgba(116, 201, 138, 0.12);
  color: #74C98A;
  border: 1px solid rgba(116, 201, 138, 0.30);
}
.mass-status-err {
  background: rgba(212, 115, 90, 0.11);
  color: #D4735A;
  border: 1px solid rgba(212, 115, 90, 0.28);
}

/* Execute button */
.admin-mass-execute-btn {
  padding: 0.62rem 1.6rem;
  background: linear-gradient(135deg, #B8943A 0%, #C9A44A 60%, #D4AE52 100%);
  color: #18130A;
  border: none;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: box-shadow 0.2s, transform 0.15s, opacity 0.15s;
  box-shadow: 0 2px 10px rgba(201, 164, 74, 0.22);
}
.admin-mass-execute-btn:hover {
  box-shadow: 0 4px 22px rgba(201, 164, 74, 0.48);
  transform: translateY(-1px);
}
.admin-mass-execute-btn:disabled {
  opacity: 0.40;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* ── Pricing table ── */
.admin-pricing-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.admin-pricing-table th,
.admin-pricing-table td {
  padding: 6px 4px;
  text-align: center;
}
.admin-pricing-table th {
  font-size: 11px;
  font-weight: 600;
  color: var(--stone);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--linen);
}
.admin-pricing-label {
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--espresso);
  padding-right: 8px;
}
.admin-price-input {
  width: 72px !important;
  text-align: center;
  padding: 0.4rem 0.5rem !important;
  font-size: 12.5px !important;
}

/* ── Access control grid ── */
.admin-access-grid {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-access-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.admin-access-row:last-child { border-bottom: none; }
.admin-access-grade {
  font-size: 12.5px;
  color: var(--espresso);
  flex: 1;
}
.admin-access-select {
  width: auto !important;
  min-width: 150px;
  font-size: 12px !important;
  padding: 0.4rem 0.65rem !important;
}

/* ══════════════════════════════════════════════════════════════
   SITE BANNERS
   ══════════════════════════════════════════════════════════════ */
#site-banners-wrap {
  position: sticky;
  top: 0;
  z-index: 1100;
}
.site-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  font-size: 13.5px;
  opacity: 1;
  transition: opacity 0.28s ease;
}
.site-banner--info    { background: #1a2f4a; color: #a8d4f5; border-bottom: 1px solid rgba(168,212,245,0.2); }
.site-banner--promo   { background: #2a1f00; color: #e8c86a; border-bottom: 1px solid rgba(232,200,106,0.2); }
.site-banner--warning { background: #3a1208; color: #f5a090; border-bottom: 1px solid rgba(245,160,144,0.2); }
.site-banner-body {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}
.site-banner-title { font-weight: 600; }
.site-banner-text  { opacity: 0.85; }
.site-banner-cta {
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.site-banner-cta:hover { background: rgba(255,255,255,0.12); }
.site-banner-close {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.6;
  font-size: 14px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.site-banner-close:hover { opacity: 1; }

/* ── Browse box lock badge ── */
.browse-box--locked { cursor: pointer; }
.browse-box--locked .browse-box-banner { position: relative; }
.browse-box-lock {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(13,10,6,0.72);
  color: #e8c86a;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

/* ── helen: Ancient Drama — Theater Masks ── */
.g-banner[data-theme="helen"],
.card-banner[data-theme="helen"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cg stroke='rgba(201,164,74,0.22)' stroke-width='1.5' fill='none' stroke-linecap='round'%3E%3Cpath d='M24,138 Q6,136 2,112 Q-2,90 4,72 Q12,50 32,44 Q52,38 66,50 Q80,62 80,84 Q80,106 68,124 Q56,142 40,142 Q32,142 24,138 Z'/%3E%3Cpath d='M22,110 Q40,102 58,110'/%3E%3Cellipse cx='26' cy='78' rx='9' ry='6'/%3E%3Cellipse cx='54' cy='78' rx='9' ry='6'/%3E%3Cpath d='M18,66 Q32,60 36,64'/%3E%3Cpath d='M44,64 Q48,60 62,66'/%3E%3Cpath d='M2,72 Q12,44 40,38 Q66,42 78,72'/%3E%3Cpath d='M116,124 Q106,114 106,92 Q106,70 120,58 Q134,46 154,48 Q174,50 184,66 Q194,82 190,104 Q186,122 170,130 Q156,138 142,134 Q128,130 116,124 Z'/%3E%3Cpath d='M120,102 Q146,118 170,102'/%3E%3Cellipse cx='130' cy='80' rx='9' ry='6'/%3E%3Cellipse cx='160' cy='80' rx='9' ry='6'/%3E%3Cpath d='M122,66 Q136,58 142,62'/%3E%3Cpath d='M150,62 Q156,58 170,66'/%3E%3Cpath d='M106,92 Q110,56 146,48 Q178,48 190,80'/%3E%3Cpath d='M80,82 Q94,72 106,82'/%3E%3C/g%3E%3C/svg%3E");
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE SYSTEM v1
   Mobile-first breakpoints + safe-area insets for PWA
   ══════════════════════════════════════════════════════════════ */

/* ── Touch targets: all interactive controls ≥ 44px tall ── */
.nav-btn,
.lang-opt,
.grade-btn,
.auth-input,
.auth-submit-btn,
.auth-google-btn,
.cta-primary,
.cta-ghost {
  min-height: 44px;
}

/* ── Safe-area insets — nav, overlay, toast, body ── */
.nav {
  padding-left: max(3rem, calc(1.5rem + env(safe-area-inset-left)));
  padding-right: max(1rem, calc(1rem + env(safe-area-inset-right)));
  padding-top: env(safe-area-inset-top);
  /* height stays 62px below the inset */
  box-sizing: content-box;
}

.overlay-topbar {
  padding-top: max(4px, env(safe-area-inset-top));
  padding-left: max(2rem, calc(1rem + env(safe-area-inset-left)));
  padding-right: max(2rem, calc(1rem + env(safe-area-inset-right)));
}

.game-overlay {
  padding-bottom: env(safe-area-inset-bottom);
}

.site-toast {
  bottom: max(2.5rem, calc(1rem + env(safe-area-inset-bottom)));
}

/* ── Full-bleed sections: background spans full viewport width ── */
.browse-header,
.page-header,
.footer,
.showcase-section,
.subject-hero,
.game-hero,
.stats-strip {
  width: 100%;
  box-sizing: border-box;
}

/* ── Content containers: readable line length capped at 1200px ── */
.content,
.browse-body,
.grid-wrap,
.games-content,
.tab-content {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* ════════════════════════════════════════
   ≤ 1024px  Laptop (13"–15")
════════════════════════════════════════ */
@media (max-width: 1024px) {
  .nav { padding-left: 1.5rem; padding-right: 1.5rem; }

  .hero { padding: 4rem 1.5rem 3rem; }
  .stats-strip { padding: 2.5rem 1.5rem; }
  .stat { padding: 0 2.5rem; }

  .content { padding: 3rem 1.5rem; }
  .browse-header { padding: 3rem 1.5rem 2rem; }
  .browse-body { padding: 2.5rem 1.5rem; }
  .page-header { padding: 2.5rem 1.5rem; }
  .grid-wrap { padding: 2.5rem 1.5rem; }
  .games-content { padding: 2.5rem 1.5rem; }
  .tab-content { padding: 2.5rem 1.5rem; }
  .footer { padding: 4rem 1.5rem 2rem; }
  .showcase-section { padding: 4rem 1.5rem 4.5rem; }
  .subject-hero { padding: 3rem 1.5rem 0; }
  .game-hero { padding: 3rem 1.5rem 0; }

  .carousel-wrapper { margin: 0 -1.5rem; padding: 0 1.5rem; }

  .sub-page-content { padding: 0 1rem 4rem; }
  .admin-page-content { padding: 0 1rem 4rem; }
}

/* ════════════════════════════════════════
   ≤ 768px  Tablet / large phone
════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Nav: collapse to logo + primary button only */
  .nav {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
    height: 54px;
    box-sizing: content-box;
  }
  .lang-toggle { display: none; }
  #home-nav-login { display: none; }
  .nav-btn.primary { font-size: 11px; padding: 6px 14px; }
  .nav-username { max-width: 80px; }

  /* Hero */
  .hero { padding: 3rem 1rem 2.5rem; }
  .hero-ctas { gap: 8px; }
  .cta-primary,
  .cta-ghost { padding: 12px 22px; font-size: 12px; }

  /* Grade row: scrollable strip on tiny screens */
  .grade-row { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .grade-btn { padding: 12px 18px; font-size: 10px; }

  /* Stats: hide separators, let flex wrap */
  .stat-sep { display: none; }
  .stat { padding: 1rem 1.5rem; }

  /* Page content padding */
  .content { padding: 2rem 1rem; }
  .browse-header { padding: 2rem 1rem 1.5rem; }
  .browse-body { padding: 1.5rem 1rem; }
  .page-header { padding: 2rem 1rem; }
  .grid-wrap { padding: 2rem 1rem; }
  .games-content { padding: 2rem 1rem; }
  .tab-content { padding: 2rem 1rem; }
  .footer { padding: 3rem 1rem 2rem; }
  .footer-cols { gap: 2rem; }
  .showcase-section { padding: 2.5rem 1rem 3rem; }
  .subject-hero { padding: 2rem 1rem 0; }
  .game-hero { padding: 2rem 1rem 0; }

  /* Grids: tighten min so 2 cols fit on tablets */
  .browse-grid,
  .games-grid,
  .subject-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  }

  /* Subscribe */
  .sub-plans-grid { grid-template-columns: repeat(2, 1fr); }
  .sub-main-layout { gap: 1.5rem; }
}

/* ════════════════════════════════════════
   ≤ 480px  Phone
════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Nav: hide username text to save space */
  .nav-username { display: none; }
  .nav-user-chip { padding: 4px 8px 4px 5px; }

  /* Hero: tighter vertical rhythm */
  .hero { padding: 2rem 1rem 2.5rem; }
  .hero-level-row { margin-top: 2rem; }
  .scroll-cue { display: none; }

  /* Single-column grids */
  .browse-grid,
  .games-grid,
  .subject-grid {
    grid-template-columns: 1fr;
  }

  /* Footer: stack everything */
  .footer-top { flex-direction: column; }
  .footer-cols { flex-direction: column; gap: 1.5rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .plans-inline { display: none; }

  /* Subscribe page */
  .sub-type-toggle { grid-template-columns: 1fr; }
  .sub-plans-grid { grid-template-columns: 1fr 1fr; }

  /* Admin */
  .admin-grid { grid-template-columns: 1fr; }
  .admin-field-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   PWA BOTTOM NAV BAR
   Activated by adding class .pwa-mode to <body>.
   Enable in JS: if (window.matchMedia('(display-mode: standalone)').matches)
     document.body.classList.add('pwa-mode');
════════════════════════════════════════ */
.pwa-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: rgba(18, 10, 6, 0.97);
  border-top: 1px solid rgba(195, 165, 105, 0.14);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  z-index: 200;
  justify-content: space-around;
  align-items: stretch;
}

@media (max-width: 768px) {
  body.pwa-mode .pwa-bottom-nav { display: flex; }
  body.pwa-mode .page { padding-bottom: calc(56px + env(safe-area-inset-bottom)); }
  body.pwa-mode .site-toast {
    bottom: calc(56px + env(safe-area-inset-bottom) + 1rem);
  }
}

.pwa-nav-item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 0 4px;
  background: none; border: none; cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-size: 9px; letter-spacing: 0.8px; text-transform: uppercase;
  color: rgba(246, 242, 235, 0.35);
  transition: color 0.2s;
}
.pwa-nav-item.active { color: var(--gold-light); }
.pwa-nav-item:hover  { color: rgba(246, 242, 235, 0.7); }
.pwa-nav-icon { font-size: 20px; line-height: 1; }

/* ── PIN JOIN SECTION ── */
.pin-join-section {
  background: #1a1610;
  border-top: 1px solid rgba(122, 96, 48, 0.22);
  padding: 5rem 2rem 5.5rem;
  text-align: center;
}

.pin-join-inner {
  max-width: 400px;
  margin: 0 auto;
}

.pin-join-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 400;
  color: #d4b870;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}

.pin-join-sub {
  font-size: 0.875rem;
  color: rgba(195, 165, 105, 0.55);
  margin-bottom: 2rem;
  line-height: 1.55;
}

.pin-join-form {
  display: flex;
  gap: 0.625rem;
  align-items: stretch;
}

.pin-input {
  flex: 1;
  height: 52px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #7a6030;
  border-radius: 8px;
  color: #e8d5a0;
  font-size: 1.4rem;
  font-family: 'Courier New', Courier, monospace;
  letter-spacing: 0.22em;
  text-align: center;
  text-transform: uppercase;
  padding: 0 0.75rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  caret-color: #d4b870;
}

.pin-input::placeholder {
  color: rgba(195, 165, 105, 0.2);
  letter-spacing: 0.22em;
}

.pin-input:focus {
  border-color: #c4a448;
  box-shadow: 0 0 0 3px rgba(196, 164, 72, 0.14);
}

.pin-join-btn {
  height: 52px;
  padding: 0 1.375rem;
  background: #7a6030;
  border: 1px solid #9c8238;
  border-radius: 8px;
  color: #f6f0d8;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}

.pin-join-btn:hover:not(:disabled) {
  background: #9c8238;
  border-color: #c4a448;
}

.pin-join-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.pin-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(246, 240, 216, 0.25);
  border-top-color: #f6f0d8;
  border-radius: 50%;
  animation: pin-spin 0.7s linear infinite;
  display: none;
  flex-shrink: 0;
}

.pin-join-btn.loading .pin-spinner { display: block; }
.pin-join-btn.loading .pin-btn-label { opacity: 0.55; }

@keyframes pin-spin {
  to { transform: rotate(360deg); }
}

.pin-join-error {
  margin-top: 0.875rem;
  font-size: 0.825rem;
  color: #e07878;
  min-height: 1.2em;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.pin-join-error.visible {
  opacity: 1;
  transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════
   SCORE TRACKER UTILITY  (js/scores.js)
   Dark-overlay context by default.
   Light overrides applied under #ttab-scores.
═══════════════════════════════════════════════════════════ */

/* ── Outer wrapper injected before each game's button row ── */
.sct-wrap {
  width: 100%;
  max-width: 540px;
  margin: 0.75rem auto 0;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── NEW RECORD BANNER ── */
.sct-record-banner {
  text-align: center;
  padding: 10px 1.5rem;
  background: linear-gradient(135deg, #C4A448 0%, #9C8238 100%);
  color: #0D0A06;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: sct-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes sct-pop {
  from { opacity: 0; transform: scale(0.8) translateY(8px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── PERSONAL COMPARISON BLOCK ── */
.sct-comp-block {
  background: rgba(24, 16, 10, 0.82);
  border: 1px solid rgba(196, 164, 72, 0.16);
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Score  vs  Personal Best */
.sct-vs {
  display: flex;
  align-items: center;
}
.sct-vs-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}
.sct-vs-label {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(176, 148, 80, 0.5);
}
.sct-vs-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: rgba(246, 242, 235, 0.62);
}
.sct-vs-val.sct-vs-new {
  color: #C4A448;
  text-shadow: 0 0 24px rgba(196, 164, 72, 0.35);
}
.sct-vs-sep {
  flex-shrink: 0;
  padding: 0 1rem;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(134, 118, 96, 0.32);
}

/* ── HISTORY (last ≤5 attempts) ── */
.sct-hist {
  border-top: 1px solid rgba(196, 164, 72, 0.1);
  padding-top: 0.8rem;
}
.sct-hist-label {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 8px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(134, 118, 96, 0.5);
  margin-bottom: 0.5rem;
}
.sct-hist-rows {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.sct-hist-rows::-webkit-scrollbar { display: none; }

.sct-hist-row {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(196, 164, 72, 0.08);
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 54px;
  transition: border-color 0.2s;
}
.sct-hist-row.sct-hist-top {
  border-color: rgba(196, 164, 72, 0.4);
  background: rgba(196, 164, 72, 0.07);
}
.sct-hist-idx {
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 7px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(134, 118, 96, 0.5);
}
.sct-hist-pts {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1;
  color: rgba(246, 242, 235, 0.78);
}

/* ── GLOBAL TOP 10 ── */
.sct-top10 {
  background: rgba(24, 16, 10, 0.82);
  border: 1px solid rgba(196, 164, 72, 0.14);
  overflow: hidden;
}
.sct-top10-hd {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 1rem;
  border-bottom: 1px solid rgba(196, 164, 72, 0.1);
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(196, 164, 72, 0.65);
}
.sct-top10-icon { font-size: 11px; line-height: 1; }
.sct-top10-list {
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 164, 72, 0.18) transparent;
}
.sct-top10-list::-webkit-scrollbar { width: 3px; }
.sct-top10-list::-webkit-scrollbar-thumb { background: rgba(196, 164, 72, 0.2); }
.sct-top10-list::-webkit-scrollbar-track { background: transparent; }

/* .score-row overrides for dark overlay context */
.sct-wrap .score-row,
.sct-top10 .score-row {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(196, 164, 72, 0.06);
  border-radius: 0;
  color: rgba(246, 242, 235, 0.8);
  padding: 8px 1rem;
  margin-bottom: 0;
}
.sct-wrap .score-row:hover,
.sct-top10 .score-row:hover { background: rgba(255, 255, 255, 0.04); }
.sct-wrap .score-row.sct-me,
.sct-top10 .score-row.sct-me {
  background: rgba(106, 135, 82, 0.13);
  border-color: rgba(106, 135, 82, 0.3);
}
.sct-wrap .score-name,
.sct-top10 .score-name {
  color: rgba(246, 242, 235, 0.7);
  font-size: 12px;
  font-family: 'Raleway', 'Inter', sans-serif;
}
.sct-wrap .score-pts,
.sct-top10 .score-pts {
  color: #c9a44a;
  font-size: 15px;
  font-family: 'Cormorant Garamond', serif;
}
.sct-pts-sfx {
  font-size: 9px;
  color: rgba(201, 164, 74, 0.4);
  margin-left: 2px;
  font-family: 'Raleway', 'Inter', sans-serif;
}

/* ── SHARE BUTTON ── */
.sct-share-btn {
  width: 100%;
  padding: 11px 1rem;
  background: transparent;
  border: 1px solid rgba(196, 164, 72, 0.22);
  color: rgba(196, 164, 72, 0.75);
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.22s, border-color 0.22s, color 0.22s;
}
.sct-share-btn:hover {
  background: rgba(196, 164, 72, 0.09);
  border-color: rgba(196, 164, 72, 0.48);
  color: #C4A448;
}

/* ── NOT-LOGGED-IN PROMPT ── */
.sct-auth-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  background: rgba(24, 16, 10, 0.82);
  border: 1px solid rgba(196, 164, 72, 0.12);
  padding: 0.85rem 1rem;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 10px;
  color: rgba(176, 148, 80, 0.6);
  letter-spacing: 0.5px;
}
.sct-auth-btn {
  flex-shrink: 0;
  padding: 6px 16px;
  background: rgba(196, 164, 72, 0.1);
  border: 1px solid rgba(196, 164, 72, 0.35);
  color: #C4A448;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s;
}
.sct-auth-btn:hover { background: rgba(196, 164, 72, 0.2); }

/* ── LOADING SPINNER ── */
.sct-spinner {
  display: flex;
  justify-content: center;
  padding: 1.2rem;
}
.sct-spinner span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(196, 164, 72, 0.4);
  animation: sct-pulse 1.1s ease-in-out infinite;
}
@keyframes sct-pulse {
  0%, 100% { opacity: 0.2; transform: scale(0.75); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* ── EMPTY STATE ── */
.sct-empty {
  padding: 1.25rem;
  text-align: center;
  font-family: 'Raleway', 'Inter', sans-serif;
  font-size: 11px;
  letter-spacing: 0.5px;
  color: rgba(134, 118, 96, 0.5);
  margin: 0;
}

/* ────────────────────────────────────────────────────────
   LIGHT CONTEXT OVERRIDES
   #ttab-scores lives on the lit-background trivia page
──────────────────────────────────────────────────────── */
#ttab-scores .sct-top10 {
  background: rgba(246, 242, 235, 0.55);
  border-color: rgba(57, 48, 31, 0.1);
}
#ttab-scores .sct-top10-hd {
  color: var(--stone);
  border-bottom-color: var(--parchment);
}
#ttab-scores .score-row {
  background: white;
  border-color: var(--parchment);
  border-bottom: 1px solid var(--parchment);
}
#ttab-scores .score-row:hover { background: var(--sage-mist); }
#ttab-scores .score-row.sct-me {
  background: rgba(106, 135, 82, 0.07) !important;
  border-color: rgba(106, 135, 82, 0.25) !important;
}
#ttab-scores .score-name { color: var(--charcoal); }
#ttab-scores .score-pts  { color: var(--sage); }
#ttab-scores .sct-pts-sfx { color: var(--stone); opacity: 0.45; }
#ttab-scores .sct-empty { color: var(--stone); }
#ttab-scores .sct-spinner span { background: rgba(106, 135, 82, 0.45); }

/* ────────────────────────────────────────────────────────
   GAME-SPECIFIC: scrollable end screen when sct-wrap present
──────────────────────────────────────────────────────── */

/* Rapid Fire over-screen */
#rf-screen-over.sct-active {
  justify-content: flex-start;
  overflow-y: auto;
  padding-top: 1.5rem;
  padding-bottom: 2rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 164, 72, 0.18) transparent;
}
#rf-screen-over.sct-active::-webkit-scrollbar { width: 3px; }
#rf-screen-over.sct-active::-webkit-scrollbar-thumb {
  background: rgba(196, 164, 72, 0.22);
}

/* Iliada Trivia winner modal */
.winner-modal.sct-active {
  overflow-y: auto;
  max-height: 88vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(196, 164, 72, 0.18) transparent;
}
.winner-modal.sct-active::-webkit-scrollbar { width: 3px; }
.winner-modal.sct-active::-webkit-scrollbar-thumb {
  background: rgba(196, 164, 72, 0.22);
}

/* Ensure .sct-wrap inside winner-modal uses correct colours */
.winner-modal .sct-wrap { padding: 0 0.5rem; }

/* ═══════════════════════════════════════════════════════════
   FAVORITES — Heart / Star Button
   Sits inside .g-banner (bottom-left) or .card-img (top-left).
   Chosen corners never conflict with .free-b (top-right)
   or .multi-b (top-left, only on multi cards not yet live).
═══════════════════════════════════════════════════════════ */
.fav-btn {
  position: absolute;
  bottom: 7px;
  left: 7px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(14, 9, 4, 0.58);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(195, 165, 105, 0.10);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
  transition:
    background   0.22s ease,
    border-color 0.22s ease,
    transform    0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fav-btn:hover {
  background: rgba(30, 20, 8, 0.90);
  border-color: rgba(201, 164, 74, 0.40);
  transform: scale(1.20);
}
/* SVG heart path */
.fav-btn svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: rgba(246, 242, 235, 0.40);
  stroke-width: 2.2px;
  display: block;
  pointer-events: none;
  transition: fill 0.22s ease, stroke 0.22s ease;
}

/* ── ACTIVE (favorited) state — golden olive fill ── */
.fav-btn.fav-active {
  background: rgba(28, 16, 4, 0.82);
  border-color: rgba(201, 164, 74, 0.50);
  animation: fav-pop 0.36s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.fav-btn.fav-active svg {
  fill: #c9a44a;
  stroke: #c9a44a;
}
@keyframes fav-pop {
  0%   { transform: scale(0.70); }
  58%  { transform: scale(1.32); }
  100% { transform: scale(1.00); }
}

/* Inside .card-img (home carousel): top-left corner */
.card-img .fav-btn { bottom: auto; top: 7px; left: 7px; }
/* .card-img needs position:relative for abs child */
.card-img { position: relative; }

/* ═══════════════════════════════════════════════════════════
   FAVORITES PAGE  (#page-favorites)
═══════════════════════════════════════════════════════════ */

/* Dark hero header — mirrors .subject-hero */
.fav-page-hero {
  background: var(--dark-base);
  padding: 3.5rem 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
/* Faint decorative watermark heart */
.fav-page-hero::after {
  content: '♡';
  position: absolute; right: 3rem; top: 1rem;
  font-size: 140px; line-height: 1;
  color: #c9a44a; opacity: 0.04;
  font-family: 'Cormorant Garamond', serif;
  pointer-events: none; user-select: none;
}
.fav-pill {
  display: inline-flex;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: #c9a44a;
  border-bottom: 1px solid rgba(201, 164, 74, 0.28);
  padding: 0 0 4px; margin-bottom: 1rem;
  font-family: 'Inter', sans-serif; font-weight: 600;
}
.fav-page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4.5vw, 52px); font-weight: 300;
  color: #F6F2EB; letter-spacing: -0.8px; margin-bottom: 0.5rem;
}
.fav-page-hero p {
  font-size: 13px;
  color: rgba(246, 242, 235, 0.40);
  max-width: 460px; line-height: 1.7;
}

/* Empty / sign-in prompt */
.fav-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5.5rem 2rem;
  gap: 1.25rem;
  text-align: center;
}
.fav-empty-icon {
  font-size: 64px; line-height: 1;
  color: #c9a44a; opacity: 0.20;
  font-family: 'Cormorant Garamond', serif;
}
.fav-empty-msg {
  font-family: 'Cormorant Garamond', serif;
  font-size: 15px; font-weight: 400;
  color: var(--stone); line-height: 1.80;
  max-width: 340px;
}
.fav-empty-btn {
  margin-top: 0.25rem;
  font-size: 10px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--stone); background: none;
  border: 1px solid var(--parchment);
  padding: 11px 26px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 500;
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.fav-empty-btn:hover {
  color: var(--espresso);
  border-color: var(--stone);
  background: var(--linen);
}

/* ============================================================
   STATIC PAGES: About · Contact · Feedback
   ============================================================ */

.static-page-hero {
  background: var(--dark-base);
  padding: 3.5rem 3rem 2.5rem;
  position: relative;
  overflow: hidden;
}
.static-page-hero::after {
  content: 'π';
  position: absolute; right: 3rem; top: 0.5rem;
  font-size: 160px; line-height: 1;
  color: #c9a44a; opacity: 0.04;
  font-family: 'Cormorant Garamond', serif;
  pointer-events: none; user-select: none;
}
.static-page-pill {
  display: inline-flex;
  font-size: 9px; letter-spacing: 3px; text-transform: uppercase;
  color: #c9a44a;
  border-bottom: 1px solid rgba(201,164,74,0.28);
  padding: 0 0 4px; margin-bottom: 1rem;
  font-family: 'Inter', sans-serif; font-weight: 600;
}
.static-page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(30px, 4.5vw, 52px); font-weight: 300;
  color: #F6F2EB; letter-spacing: -0.8px; margin-bottom: 0.5rem;
}
.static-page-subtitle {
  font-size: 14px;
  color: rgba(246,242,235,0.45);
  max-width: 560px; line-height: 1.75;
  margin-top: 0.5rem;
}
.static-page-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 2rem 5rem;
}
.static-page-body {
  font-size: 15px;
  color: var(--charcoal);
  line-height: 1.85;
  white-space: pre-wrap;
}

/* ── Feedback form ── */
.feedback-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.feedback-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 560px) {
  .feedback-field-row { grid-template-columns: 1fr; }
}
.feedback-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.feedback-field label {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--stone);
}
.feedback-input,
.feedback-textarea {
  padding: 0.65rem 0.9rem;
  background: var(--warm-white);
  border: 1.5px solid var(--parchment);
  border-radius: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--espresso);
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  resize: vertical;
}
.feedback-input:focus,
.feedback-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156,130,56,0.10);
}
.feedback-error {
  font-size: 12.5px;
  color: #c0392b;
  min-height: 1.2em;
}
.feedback-submit-btn {
  align-self: flex-start;
  padding: 0.75rem 2rem;
  background: var(--espresso);
  color: var(--alabaster);
  border: none;
  border-radius: 9px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.feedback-submit-btn:hover { background: var(--charcoal); transform: translateY(-1px); }
.feedback-submit-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Feedback success state ── */
.feedback-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 2rem;
  gap: 1rem;
  text-align: center;
}
.feedback-success-icon {
  font-size: 52px;
  color: var(--sage);
  line-height: 1;
}
.feedback-success-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 32px;
  font-weight: 300;
  color: var(--espresso);
}
.feedback-success-body {
  font-size: 14px;
  color: var(--stone);
  margin-bottom: 0.5rem;
}

/* ============================================================
   ADMIN: Page Content Editor tabs
   ============================================================ */
.admin-page-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--parchment);
  margin: 0 1.5rem;
}
.admin-page-tab {
  padding: 0.6rem 1.2rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stone);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.admin-page-tab:hover { color: var(--espresso); }
.admin-page-tab.active {
  color: var(--espresso);
  border-bottom-color: var(--gold);
}
.admin-page-tab-content {
  padding: 1.25rem 1.5rem 0.5rem;
}
.admin-textarea {
  padding: 0.6rem 0.85rem;
  background: var(--alabaster);
  border: 1.5px solid var(--parchment);
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  color: var(--espresso);
  width: 100%;
  resize: vertical;
  line-height: 1.65;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.admin-textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(156,130,56,0.10);
}

/* ── Admin feedback inbox ── */
.admin-feedback-item {
  position: relative;
  padding: 0.9rem 3rem 0.9rem 1rem;
  border-bottom: 1px solid var(--linen);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.admin-feedback-item:last-child { border-bottom: none; }
.admin-feedback-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.admin-feedback-name {
  font-weight: 600;
  font-size: 12.5px;
  color: var(--espresso);
}
.admin-feedback-email {
  font-size: 11.5px;
  color: var(--gold);
  text-decoration: none;
}
.admin-feedback-email:hover { text-decoration: underline; }
.admin-feedback-date {
  font-size: 11px;
  color: var(--stone);
  margin-left: auto;
}
.admin-feedback-msg {
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.6;
  white-space: pre-wrap;
}
.admin-del-btn {
  position: absolute;
  top: 0.8rem; right: 0.75rem;
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 11px;
  color: var(--stone);
  cursor: pointer;
  padding: 2px 6px;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.admin-del-btn:hover {
  color: #c0392b;
  border-color: rgba(192,57,43,0.3);
  background: rgba(192,57,43,0.05);
}

/* ── PWA nav: accommodate 5th button gracefully ── */
@media (max-width: 768px) {
  body.pwa-mode .pwa-bottom-nav { gap: 0; }
  body.pwa-mode .pwa-nav-item   { font-size: 8px; letter-spacing: 0.3px; }
  body.pwa-mode .pwa-nav-icon   { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════
   GAMES PANEL  ·  Πίνακας Παιχνιδιών
   Palette: deep olive · dark earth browns · charcoal
   Fonts:   Cormorant Garamond (headings) · Raleway (controls)
═══════════════════════════════════════════════════════════ */

/* ── Grade-row trigger button ─────────────────────────── */
.gp-sep-wrap { align-self: center; }
.gp-grade-sep {
  width: 1px; height: 22px;
  background: rgba(90, 110, 55, 0.28);
  margin: 0 4px;
}

.gp-trigger {
  background: linear-gradient(135deg, #1C2A12, #28390E) !important;
  border-color: rgba(82, 104, 48, 0.6) !important;
  color: #94AD6A !important;
  position: relative; overflow: hidden;
  transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s !important;
}
.gp-trigger::before {
  /* Animated olive shimmer line across the top edge */
  content: '';
  position: absolute; top: 0; left: -100%; right: -100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(130,160,75,0.6), transparent);
  animation: gp-shimmer 3.5s ease-in-out infinite;
}
@keyframes gp-shimmer {
  0%   { transform: translateX(-60%); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateX(60%);  opacity: 0; }
}
.gp-trigger:hover {
  background: linear-gradient(135deg, #263618, #324411) !important;
  border-color: rgba(110, 138, 60, 0.85) !important;
  color: #B8D080 !important;
  box-shadow: 0 4px 20px rgba(65, 90, 35, 0.35) !important;
}
.gp-trigger-icon {
  font-size: 13px;
  filter: drop-shadow(0 0 5px rgba(110,160,60,0.4));
}

/* Glowing status dot */
.gp-trigger::after {
  content: '';
  position: absolute; top: 7px; right: 7px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #7EA850;
  box-shadow: 0 0 8px rgba(100,160,55,0.7);
  animation: gp-dot-pulse 2.4s ease-in-out infinite;
}
@keyframes gp-dot-pulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.3); }
}

/* ── Games Panel Overlay ──────────────────────────────── */
.gp-overlay {
  display: none;
  position: fixed; inset: 0;
  z-index: 900;
  background: #0C0A06;
  flex-direction: column;
  overflow: hidden;
}
.gp-overlay.active { display: flex; }

/* ── GP Topbar ── */
.gp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2.5rem; min-height: 60px; flex-shrink: 0;
  background: #100D08;
  border-bottom: 1px solid rgba(95, 78, 38, 0.22);
}
.gp-topbar-left { display: flex; align-items: center; gap: 1.25rem; }
.gp-logo {
  font-family: 'Raleway', sans-serif;
  font-size: 17px; font-weight: 500;
  color: #C4BA94; letter-spacing: -0.3px;
  flex-shrink: 0;
}
.gp-logo span { color: #7E9A58; }
.gp-topbar-divider {
  width: 1px; height: 20px;
  background: rgba(95, 78, 38, 0.3);
  flex-shrink: 0;
}
.gp-topbar-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem; font-weight: 500;
  color: #9EB270; letter-spacing: 0.03em;
}
.gp-title-slash { opacity: 0.3; font-style: italic; font-size: 0.9em; }

.gp-close-btn {
  width: 34px; height: 34px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  color: #5A4A30; cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.18s; font-family: inherit;
  border-radius: 0;
}
.gp-close-btn:hover {
  color: #D4C8A0;
  border-color: rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.07);
}

/* ── GP Body ── */
.gp-body {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 3rem 3rem 5rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,100,48,0.38) transparent;
}
.gp-body::-webkit-scrollbar { width: 5px; }
.gp-body::-webkit-scrollbar-track { background: transparent; }
.gp-body::-webkit-scrollbar-thumb { background: rgba(80,100,48,0.35); border-radius: 99px; }

/* ── GP Intro ── */
.gp-section-intro { margin-bottom: 3rem; max-width: 640px; }
.gp-section-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem; font-weight: 400;
  color: #CCC49E; letter-spacing: -0.02em;
  line-height: 1.15; margin-bottom: 0.6rem;
}
.gp-section-heading em { color: #8DAA60; font-style: italic; }
.gp-section-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem; font-weight: 500;
  color: #5A5030; letter-spacing: 1.8px; text-transform: uppercase;
}

/* ── Mechanics Grid ── */
.mechanics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 12px;
}

/* ── Engine Card ── */
.engine-card {
  background: #161208;
  border: 1px solid rgba(85, 68, 32, 0.3);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s, background 0.22s;
  display: flex; flex-direction: column;
}
.engine-card:hover {
  border-color: rgba(120, 98, 45, 0.7);
  background: #1C1710;
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(0,0,0,0.5), 0 0 0 1px rgba(90,118,50,0.1);
}
.engine-card-banner {
  height: 115px;
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; position: relative; overflow: hidden; flex-shrink: 0;
}
/* Gradient fade from banner into card body */
.engine-card-banner::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 60%;
  background: linear-gradient(to bottom, transparent, #161208);
  pointer-events: none;
}
.engine-card-multiplayer {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-family: 'Raleway', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: 1.8px; text-transform: uppercase;
  background: rgba(48, 68, 28, 0.92);
  color: #9ABE68; padding: 3px 8px;
  border: 1px solid rgba(110, 145, 60, 0.45);
}
.engine-card-body { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.engine-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem; font-weight: 600; color: #C4BA96;
  margin-bottom: 2px; letter-spacing: 0.02em; line-height: 1.2;
}
.engine-card-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem; font-weight: 400;
  color: #4A4028; letter-spacing: 0.8px; margin-bottom: 7px;
}
.engine-card-desc {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem; color: #5A5038;
  line-height: 1.6; margin-bottom: 10px; flex: 1;
}
.engine-card-footer {
  display: flex; align-items: center; justify-content: space-between; margin-top: auto;
}
.engine-card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.engine-card-tag {
  font-family: 'Raleway', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 3px 8px;
  background: rgba(55, 48, 24, 0.7);
  color: #7A6E48; border: 1px solid rgba(80, 65, 28, 0.45);
}
.engine-card-arrow {
  width: 26px; height: 26px; flex-shrink: 0;
  background: rgba(40, 58, 18, 0.6);
  border: 1px solid rgba(75, 100, 38, 0.45);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #7EA858;
  transition: all 0.2s;
}
.engine-card:hover .engine-card-arrow {
  background: #3D5228; border-color: #5A7838; color: #B8D480;
}

/* ── Engine Configurator Modal ──────────────────────────── */
.ecm-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 950;
  background: rgba(4, 3, 2, 0.88);
  backdrop-filter: blur(12px);
  align-items: center; justify-content: center;
  padding: 1rem;
}
.ecm-overlay.active { display: flex; }

.ecm-box {
  background: #111009;
  border: 1px solid rgba(90, 72, 32, 0.42);
  width: min(800px, 96vw);
  max-height: 92vh;
  overflow-y: auto;
  box-shadow:
    0 0 0 1px rgba(70, 95, 38, 0.1),
    0 32px 80px rgba(0,0,0,0.75);
  animation: ecm-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,100,48,0.3) transparent;
}
@keyframes ecm-in {
  from { transform: scale(0.88) translateY(22px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

/* ECM Header */
.ecm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.75rem;
  border-bottom: 1px solid rgba(85, 68, 30, 0.22);
}
.ecm-header-left { display: flex; align-items: center; gap: 1rem; }
.ecm-engine-icon {
  font-size: 2rem; width: 54px; height: 54px;
  background: #1A1608;
  border: 1px solid rgba(85, 68, 30, 0.38);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ecm-engine-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem; font-weight: 500;
  color: #CEC49A; letter-spacing: 0.02em; margin-bottom: 3px;
}
.ecm-engine-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.66rem; font-weight: 600;
  color: #4A4428; letter-spacing: 2px; text-transform: uppercase;
}
.ecm-close-btn {
  width: 32px; height: 32px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.09);
  color: #504430; cursor: pointer; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s; font-family: inherit; flex-shrink: 0;
  border-radius: 0;
}
.ecm-close-btn:hover { color: #D0C498; border-color: rgba(255,255,255,0.22); }

/* ECM Options grid */
.ecm-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 580px) { .ecm-options { grid-template-columns: 1fr; } }

.ecm-option-box {
  padding: 1.5rem 1.75rem;
  border-top: 1px solid rgba(85, 68, 30, 0.2);
  transition: background 0.2s;
}
.ecm-option-box + .ecm-option-box { border-left: 1px solid rgba(85, 68, 30, 0.2); }
@media (max-width: 580px) {
  .ecm-option-box + .ecm-option-box { border-left: none; }
}

/* Creator Mode — locked by default */
.ecm-creator { cursor: default; }
.ecm-creator.unlocked {
  cursor: pointer;
  transition: background 0.2s;
}
.ecm-creator.unlocked:hover { background: rgba(50,70,22,0.1); }

.ecm-opt-icon { font-size: 1.75rem; margin-bottom: 0.65rem; }
.ecm-opt-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem; font-weight: 600;
  color: #C4BA98; margin-bottom: 0.45rem; letter-spacing: 0.03em;
}
.ecm-opt-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem; color: #524A30;
  line-height: 1.65; margin-bottom: 1rem;
}
/* Access badge below option title */
.ecm-opt-badge {
  display: inline-flex; align-items: center;
  font-family: 'Raleway', sans-serif;
  font-size: 8px; font-weight: 700;
  letter-spacing: 1.8px; text-transform: uppercase;
  padding: 4px 10px;
  margin-bottom: 0.85rem;
}
.badge-locked {
  background: rgba(50,40,18,0.9); color: #5A4E28;
  border: 1px solid rgba(80, 62, 24, 0.5);
}
.badge-available {
  background: rgba(40,58,18,0.7); color: #90B258;
  border: 1px solid rgba(80, 110, 40, 0.5);
}

/* Creator locked notice (injected by JS) */
.ecm-creator-locked-notice {
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem; color: #524838;
  background: rgba(32,26,10,0.8);
  border: 1px solid rgba(72,58,24,0.45);
  padding: 10px 13px; line-height: 1.65; margin-top: 0.5rem;
}
.ecm-creator-locked-notice strong { color: #806838; }
.ecm-creator-locked-notice a { color: #806838; text-decoration: underline; }

/* Dataset list */
.ecm-dataset-list {
  display: flex; flex-direction: column; gap: 5px;
  max-height: 230px; overflow-y: auto;
  margin-top: 0.4rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(80,100,48,0.28) transparent;
}
.ecm-dataset-list::-webkit-scrollbar { width: 3px; }
.ecm-dataset-list::-webkit-scrollbar-thumb { background: rgba(80,100,48,0.28); }

.ecm-ds-cat {
  font-family: 'Raleway', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase;
  color: #3E4E22; padding: 7px 0 4px; margin-top: 4px;
}
.ecm-ds-item {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px;
  background: #181408;
  border: 1px solid rgba(65, 52, 22, 0.45);
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.ecm-ds-item:hover:not(.ecm-ds-locked) {
  border-color: rgba(95, 120, 48, 0.65);
  background: #1E1A0C;
}
.ecm-ds-item.ecm-ds-selected {
  border-color: rgba(85, 110, 45, 0.85);
  background: rgba(45, 62, 20, 0.22);
  box-shadow: inset 0 0 0 1px rgba(85, 110, 45, 0.28);
}
.ecm-ds-locked { opacity: 0.38; cursor: default; }
.ecm-ds-icon { font-size: 1rem; flex-shrink: 0; width: 20px; text-align: center; }
.ecm-ds-info { flex: 1; min-width: 0; }
.ecm-ds-name {
  font-family: 'Raleway', sans-serif;
  font-size: 0.73rem; font-weight: 500; color: #A09468;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ecm-ds-meta {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem; color: #4A4228; margin-top: 1px;
}
.ecm-ds-lock {
  flex-shrink: 0;
  font-family: 'Raleway', sans-serif;
  font-size: 8px; font-weight: 700; letter-spacing: 1.2px;
  color: #6A5828; background: rgba(90,72,24,0.28);
  border: 1px solid rgba(90,72,24,0.42); padding: 2px 7px;
}
.ecm-ds-check {
  flex-shrink: 0; width: 17px; height: 17px;
  background: rgba(45,62,20,0.7);
  border: 1px solid rgba(80,110,40,0.6);
  color: #9AB868; display: flex; align-items: center;
  justify-content: center; font-size: 9px;
  transition: opacity 0.15s;
}

/* PvP toggle */
.ecm-pvp-toggle {
  margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid rgba(65,52,22,0.3);
}
.ecm-pvp-label {
  display: block; font-family: 'Raleway', sans-serif;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #3E4E22; margin-bottom: 8px;
}
.ecm-pvp-options { display: flex; gap: 7px; }
.ecm-pvp-btn {
  flex: 1; padding: 9px 10px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.5px;
  background: #181408; border: 1px solid rgba(65,52,22,0.5);
  color: #4A4228; cursor: pointer; transition: all 0.18s;
}
.ecm-pvp-btn.active {
  background: rgba(40, 58, 18, 0.5);
  border-color: rgba(80, 110, 42, 0.65);
  color: #9AB060;
}
.ecm-pvp-btn:hover:not(.active) { border-color: rgba(80,65,28,0.7); color: #6A5A38; }

/* Launch button */
.ecm-launch-btn {
  display: block; width: 100%;
  padding: 16px 2rem;
  font-family: 'Raleway', sans-serif;
  font-size: 0.75rem; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  background: linear-gradient(135deg, #2E4A18, #3C5E22);
  border: none; border-top: 1px solid rgba(80, 65, 28, 0.22);
  color: #ACCF78; cursor: pointer;
  transition: all 0.22s;
}
.ecm-launch-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #385A1E, #4A7228);
  color: #C8E890;
  box-shadow: 0 -2px 20px rgba(55, 85, 28, 0.28);
}
.ecm-launch-btn:disabled {
  opacity: 0.22; cursor: default;
  background: #181408; color: #3A3420;
}

/* ── Games Panel responsive ─────────────────────────── */
@media (max-width: 640px) {
  .gp-body { padding: 1.75rem 1.25rem 4rem; }
  .gp-topbar { padding: 0 1.25rem; }
  .gp-section-heading { font-size: 1.6rem; }
  .mechanics-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .ecm-box { width: 99vw; max-height: 96vh; }
  .ecm-header { padding: 1.1rem 1.25rem; }
  .ecm-option-box { padding: 1.1rem 1.25rem; }
}
@media (max-width: 380px) {
  .mechanics-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   ΜΝΗΜΟΣΥΝΗ — Flashcards & Study Mode
   Palette: deep olive · rich charcoal · terracotta accents
   Fonts:   Raleway (UI) · Cormorant Garamond (card text)
   ============================================================ */

/* ── Custom properties (scoped to the overlay) ── */
#study-overlay {
  --s-bg:         #0D0F0A;
  --s-surface:    #161A11;
  --s-surface2:   #1E231A;
  --s-card-f:     #1C2216;
  --s-card-b:     #131710;
  --s-border:     #2C3622;
  --s-border-hi:  #3E4E2C;
  --s-terra:      #C4622D;
  --s-terra-glow: rgba(196,98,45,0.22);
  --s-gold:       #C49A3C;
  --s-gold-dim:   rgba(196,154,60,0.18);
  --s-olive:      #4E6428;
  --s-olive-hi:   #6A8A38;
  --s-text-hi:    #DDD4C0;
  --s-text-lo:    #6A6258;
  --s-text-mid:   #A09888;
  --s-green:      #2E6E2E;
  --s-green-hi:   #3A8A3A;
  --s-red:        #7A2418;
  --s-red-hi:     #9E301E;
}

/* ── Overlay base ── */
#study-overlay {
  background: var(--s-bg);
  flex-direction: column;
  overflow: hidden;
}

/* ── Topbar overrides ── */
.study-topbar {
  background: var(--s-surface) !important;
  border-bottom: 1px solid var(--s-border) !important;
  gap: 0.5rem;
}
.study-topbar-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.study-topbar-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--s-gold);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.study-dataset-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.7rem;
  color: var(--s-text-lo);
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

/* ── Workspace scroll container ── */
.study-workspace {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem 1.25rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--s-border) transparent;
}
.study-workspace::-webkit-scrollbar { width: 5px; }
.study-workspace::-webkit-scrollbar-thumb { background: var(--s-border); border-radius: 99px; }

/* ── Progress area ── */
.study-progress-area {
  width: 100%;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.study-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.study-progress-text {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--s-text-mid);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.study-mastery-text {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  color: var(--s-olive-hi);
  letter-spacing: 0.04em;
}
.study-progress-bar {
  width: 100%;
  height: 5px;
  background: var(--s-surface2);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--s-border);
}
.study-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--s-olive), var(--s-terra));
  border-radius: 99px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 0 8px var(--s-terra-glow);
}

/* ── Direction toggle ── */
.study-direction-toggle {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 560px;
}
.study-dir-btn {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--s-surface2);
  border: 1.5px solid var(--s-border);
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  color: var(--s-text-lo);
  transition: border-color 0.18s, background 0.18s, color 0.18s;
  text-align: left;
}
.study-dir-btn:hover {
  border-color: var(--s-border-hi);
  background: #232B1A;
  color: var(--s-text-mid);
}
.study-dir-btn.active {
  border-color: var(--s-olive-hi);
  background: rgba(78,100,40,0.18);
  color: var(--s-text-hi);
}
.study-dir-icon {
  font-size: 1.1rem;
  opacity: 0.7;
  flex-shrink: 0;
  font-family: 'Raleway', sans-serif;
}
.study-dir-btn.active .study-dir-icon { opacity: 1; color: var(--s-olive-hi); }
.study-dir-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.study-dir-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-dir-sub {
  font-size: 0.65rem;
  opacity: 0.6;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.study-dir-btn.active .study-dir-sub { opacity: 0.75; }

/* ── Card area ── */
.study-card-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 560px;
}

/* ── 3D Card ── */
.study-card {
  width: 100%;
  height: 280px;
  perspective: 1200px;
  cursor: pointer;
  outline: none;
  border-radius: 20px;
}
.study-card:focus-visible { outline: 2px solid var(--s-olive-hi); outline-offset: 4px; }

.study-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
  border-radius: 20px;
}
.study-card-inner.flipped { transform: rotateY(180deg); }

.study-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 2.25rem;
  overflow: hidden;
  border: 1.5px solid var(--s-border);
}
.study-card-face::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.03) 0%, transparent 60%);
  pointer-events: none;
}

.study-card-front {
  background: var(--s-card-f);
  border-color: var(--s-border-hi);
  box-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.03) inset;
}
.study-card-back {
  background: var(--s-card-b);
  border-color: var(--s-olive);
  transform: rotateY(180deg);
  box-shadow: 0 4px 24px rgba(0,0,0,0.65), 0 0 0 1px rgba(78,100,40,0.12) inset;
}
.study-card-back::after {
  content: '';
  position: absolute;
  left: 0; top: 16px; bottom: 16px;
  width: 3px;
  background: linear-gradient(180deg, var(--s-terra), var(--s-olive));
  border-radius: 0 3px 3px 0;
  opacity: 0.7;
}

.study-card-corner-label {
  position: absolute;
  top: 14px;
  left: 18px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--s-text-lo);
  opacity: 0.75;
}
.study-card-back .study-card-corner-label { color: var(--s-olive-hi); opacity: 0.85; }

.study-card-content {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.1rem, 2.8vw, 1.55rem);
  font-weight: 600;
  color: var(--s-text-hi);
  text-align: center;
  line-height: 1.5;
  max-height: 200px;
  overflow-y: auto;
  scrollbar-width: none;
  width: 100%;
}
.study-card-content::-webkit-scrollbar { display: none; }
.study-card-back .study-card-content { color: #E8D8A8; font-style: italic; }

.study-card-content em { color: var(--s-terra); font-style: normal; }
.study-card-content .lq-main { font-size: 0.95em; line-height: 1.6; }
.study-card-content .lq-tags { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.study-card-content .lq-tag  {
  font-family: 'Raleway', sans-serif;
  font-size: 0.62rem; padding: 2px 9px; border-radius: 99px;
  background: rgba(78,100,40,0.22); color: var(--s-olive-hi);
  border: 1px solid rgba(78,100,40,0.35);
}
.study-card-content .lq-tag.voice  { background: rgba(196,98,45,0.15);  color: var(--s-terra); border-color: rgba(196,98,45,0.3); }
.study-card-content .lq-tag.mood   { background: rgba(196,154,60,0.15); color: var(--s-gold);  border-color: rgba(196,154,60,0.3); }
.study-card-content .lq-tag.gender { background: rgba(100,120,180,0.15); color: #8898CC; border-color: rgba(100,120,180,0.3); }
.study-card-content .lq-tag.form   { font-size: 0.85em; padding: 1px 8px; }

.study-hint-wrap {
  position: absolute;
  bottom: 14px;
  left: 18px; right: 18px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  color: var(--s-text-lo);
}
.study-hint-icon { font-size: 0.9rem; opacity: 0.55; }
.study-hint-text { font-style: italic; opacity: 0.7; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Flip prompt ── */
.study-flip-hint {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  color: var(--s-text-lo);
  letter-spacing: 0.05em;
  text-align: center;
  transition: opacity 0.25s;
  margin: 0;
}

/* ── Action buttons ── */
.study-actions {
  display: flex;
  gap: 14px;
  width: 100%;
  max-width: 560px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
.study-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 10px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}
.study-btn:active { transform: scale(0.97); }
.study-btn-icon { font-size: 1rem; line-height: 1; }

.study-btn-review {
  background: rgba(122,36,24,0.25);
  border-color: rgba(158,48,30,0.45);
  color: #E87060;
}
.study-btn-review:hover {
  background: rgba(158,48,30,0.38);
  border-color: #9E301E;
  box-shadow: 0 4px 18px rgba(158,48,30,0.28);
}

.study-btn-master {
  background: rgba(46,110,46,0.22);
  border-color: rgba(58,138,58,0.4);
  color: #7ACC7A;
}
.study-btn-master:hover {
  background: rgba(58,138,58,0.32);
  border-color: #3A8A3A;
  box-shadow: 0 4px 18px rgba(58,138,58,0.22);
}

/* ── Session complete screen ── */
.study-complete {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  animation: study-fade-in 0.4s ease;
}
@keyframes study-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.study-complete-wreath {
  font-size: 3.5rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(196,154,60,0.55));
  animation: study-pulse 2.4s ease-in-out infinite;
}
@keyframes study-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.07); }
}
.study-complete-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--s-gold);
  letter-spacing: 0.04em;
  margin: 0;
}
.study-complete-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  color: var(--s-text-mid);
  max-width: 340px;
  line-height: 1.6;
  margin: 0;
}
.study-complete-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}
.study-cta-btn {
  padding: 12px 28px;
  border-radius: 12px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--s-olive);
  border: 1.5px solid var(--s-olive-hi);
  color: #D0E0A0;
}
.study-cta-btn:hover {
  background: var(--s-olive-hi);
  box-shadow: 0 4px 18px rgba(78,100,40,0.4);
}
.study-cta-outline {
  background: transparent;
  border-color: var(--s-border-hi);
  color: var(--s-text-lo);
}
.study-cta-outline:hover {
  background: var(--s-surface2);
  color: var(--s-text-mid);
  box-shadow: none;
}

/* ── Mobile responsive ── */
@media (max-width: 520px) {
  .study-card { height: 230px; }
  .study-card-face { padding: 1.5rem 1.25rem; }
  .study-card-content { font-size: clamp(1rem, 4.5vw, 1.2rem); }
  .study-direction-toggle { flex-direction: column; gap: 6px; }
  .study-dir-btn { padding: 9px 12px; }
  .study-workspace { padding: 1rem 0.9rem 1.5rem; gap: 1rem; }
  .study-btn { padding: 13px 8px; font-size: 0.78rem; }
  .study-complete-title { font-size: 1.65rem; }
}
@media (min-width: 768px) {
  .study-card { height: 320px; }
  .study-card-content { font-size: clamp(1.2rem, 2.2vw, 1.65rem); }
  .study-workspace { padding: 2rem 2rem 3rem; gap: 1.5rem; }
}

/* ============================================================
   MNEMOSYNE — Subject Grid & Home Carousel extras
   ============================================================ */

/* ── Games-grid study card ── */
.g-card--study {
  border-color: rgba(78, 100, 40, 0.45);
  background: linear-gradient(160deg, #0D110A 0%, #141C0F 100%);
  position: relative;
  overflow: hidden;
}
.g-card--study::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(78,100,40,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.g-card--study:hover {
  border-color: rgba(106, 138, 56, 0.7);
  box-shadow: 0 6px 28px rgba(78,100,40,0.25);
  transform: translateY(-3px);
}
.g-banner--study {
  background: linear-gradient(135deg, #0D1109 0%, #1A2610 60%, #253318 100%) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
}
.study-gc-title {
  color: #A8C46A !important;
  font-family: 'Cinzel', serif;
}
.tag--study {
  background: rgba(78,100,40,0.22);
  color: #A8C46A;
  border: 1px solid rgba(106,138,56,0.35);
}

/* ── Home carousel Mnemosyne card ── */
.card-img-mnemosyne {
  background: linear-gradient(135deg, #0D1109 0%, #1A2A10 60%, #2A3E18 100%);
  color: #A8C46A;
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.card-img-mnemosyne::after {
  content: 'ΜΕΛΕΤΗ';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Cinzel', serif;
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(168,196,106,0.55);
  white-space: nowrap;
}
.game-card--study {
  border-color: rgba(78,100,40,0.5);
}
.game-card--study:hover {
  border-color: rgba(106,138,56,0.85);
  box-shadow: 0 4px 20px rgba(78,100,40,0.3);
}

/* ── Study overlay: QR share button & topbar-right flex alignment ── */
.study-qr-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid rgba(78,100,40,0.4);
  background: rgba(78,100,40,0.12);
  color: #7A9A40;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s;
  flex-shrink: 0;
}
.study-qr-btn:hover {
  background: rgba(78,100,40,0.28);
  border-color: rgba(106,138,56,0.65);
  color: #A8C46A;
}
.study-topbar .overlay-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ============================================================
   TARTARUS REVIEW HUB  (js/review-hub.js)
   Dark earth-tone palette — deep olive / rich charcoal / terracotta
   ============================================================ */

/* ── Page base (vars now in :root so modals & overlay can reach them) ── */
#page-review-hub {
  background:  var(--rh-bg);
  color:       var(--rh-text);
  min-height:  100vh;
  font-family: 'Raleway', 'Inter', sans-serif;
}

/* Override page animation for dark bg */
#page-review-hub.active { animation: page-in 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* ── HERO ── */
.rh-hero {
  padding: 3.5rem 2rem 2.5rem;
  text-align: center;
  background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(192,85,53,0.12) 0%, transparent 70%);
  border-bottom: 1px solid var(--rh-border);
}
.rh-hero-pill {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rh-terra);
  border: 1px solid rgba(192, 85, 53, 0.35);
  border-radius: 20px;
  padding: 4px 14px;
  margin-bottom: 1rem;
}
.rh-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2.8rem, 7vw, 4.5rem);
  font-weight: 300;
  color: var(--rh-gold);
  letter-spacing: 0.04em;
  line-height: 1.05;
  margin-bottom: 0.75rem;
}
.rh-hero-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  color: var(--rh-muted);
  font-style: italic;
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

/* ── ACTION BAR ── */
.rh-action-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid var(--rh-border);
  background: var(--rh-surface);
}

/* ── BUTTONS ── */
.rh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.18s, border-color 0.18s, transform 0.14s, opacity 0.18s;
  white-space: nowrap;
}
.rh-btn:active { transform: translateY(1px); }
.rh-btn:disabled { opacity: 0.38; cursor: default; pointer-events: none; }

.rh-btn-primary {
  background: linear-gradient(135deg, var(--rh-terra), #8B3018);
  color: #FDFAF5;
  border-color: transparent;
}
.rh-btn-primary:not(:disabled):hover { filter: brightness(1.15); transform: translateY(-1px); }

.rh-btn-secondary {
  background: rgba(201, 164, 74, 0.10);
  color: var(--rh-gold);
  border-color: rgba(201, 164, 74, 0.30);
}
.rh-btn-secondary:hover { background: rgba(201, 164, 74, 0.18); border-color: var(--rh-gold); }

.rh-btn-danger {
  background: rgba(160, 40, 20, 0.15);
  color: #E07060;
  border-color: rgba(160, 40, 20, 0.35);
}
.rh-btn-danger:hover { background: rgba(160, 40, 20, 0.28); border-color: #C05035; }

.rh-btn-ghost {
  background: transparent;
  color: var(--rh-muted);
  border-color: rgba(122, 108, 88, 0.35);
}
.rh-btn-ghost:hover { color: var(--rh-text); border-color: var(--rh-muted); }

/* ── FILTER PILLS ── */
.rh-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.9rem 1.75rem 0;
}
.rh-pill {
  padding: 5px 15px;
  border: 1px solid rgba(122, 108, 88, 0.30);
  border-radius: 20px;
  background: transparent;
  color: var(--rh-muted);
  font-family: 'Raleway', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.16s;
  white-space: nowrap;
}
.rh-pill:hover { border-color: var(--rh-gold); color: var(--rh-gold); }
.rh-pill.active {
  background: rgba(201, 164, 74, 0.12);
  border-color: var(--rh-gold);
  color: var(--rh-gold);
}

/* ── STATS BAR ── */
.rh-stats {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 1.75rem;
}
.rh-stat { display: flex; flex-direction: column; }
.rh-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--rh-gold);
  line-height: 1;
}
.rh-stat-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rh-muted);
  margin-top: 2px;
}
.rh-stat-divider {
  width: 1px;
  height: 36px;
  background: var(--rh-border);
}

/* ── CONTENT & GRID ── */
.rh-content {
  padding: 1rem 1.75rem 4rem;
}
.rh-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding-top: 0.5rem;
}

/* ── MISTAKE CARD ── */
.rh-card {
  background: var(--rh-surface);
  border: 1px solid var(--rh-border);
  border-left: 3px solid var(--rh-terra);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  opacity: 0;
  transform: scale(0.97) translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease, border-color 0.18s;
}
.rh-card.rh-card-visible { opacity: 1; transform: scale(1) translateY(0); }
.rh-card:hover { border-color: rgba(192, 85, 53, 0.55); }

/* ════════════════════════════════════════════════════════════
   ΤΟ ΜΟΝΟΠΑΤΙ ΤΟΥ ΗΡΩΑ — The Hero's Journey
   RPG Progression, Profile & Agora Shop
   ════════════════════════════════════════════════════════════ */

/* ── Loading spinner ── */
.hj-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 40vh;
}
.hj-loading-ring {
  width: 30px; height: 30px;
  border: 2px solid var(--parchment);
  border-top-color: var(--sage);
  border-radius: 50%;
  animation: hj-spin 0.75s linear infinite;
}
@keyframes hj-spin { to { transform: rotate(360deg); } }

/* ── Page hero (dark header) ── */
.hj-page-hero {
  background: var(--dark-panel);
  padding: 4.5rem 3rem 4rem;
  text-align: center;
  border-bottom: 1px solid var(--dark-border);
  position: relative; overflow: hidden;
}
.hj-page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% -10%, rgba(156,130,56,0.10) 0%, transparent 65%);
  pointer-events: none;
}
.hj-page-tag {
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 500;
  margin-bottom: 1.25rem; position: relative;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}
.hj-page-tag::before, .hj-page-tag::after {
  content: ''; display: block; width: 28px; height: 1px;
  background: rgba(156,130,56,0.35);
}
.hj-page-hero h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(36px, 5.5vw, 68px); font-weight: 300;
  color: var(--alabaster); line-height: 1.08; letter-spacing: -1.5px;
  margin-bottom: 0.9rem; position: relative;
}
.hj-page-hero p {
  font-size: 14px; color: rgba(246,242,235,0.45); font-weight: 300;
  line-height: 1.7; max-width: 380px; margin: 0 auto; position: relative;
}

/* ════════════════════════
   PLAYER CARD
   ════════════════════════ */
.hj-player-card {
  display: flex; align-items: center; gap: 2.5rem;
  padding: 2.75rem 3rem;
  background: var(--dark-panel);
  border-bottom: 1px solid var(--dark-border);
  position: relative; overflow: hidden;
}
.hj-player-card::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(to bottom, transparent, var(--gold-light) 50%, transparent);
}
.hj-player-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 8% 50%, rgba(156,130,56,0.04) 0%, transparent 65%);
  pointer-events: none;
}

/* Avatar frame */
.hj-avatar-frame {
  width: 108px; height: 108px; border-radius: 50%;
  background: rgba(195,165,105,0.07);
  border: 1.5px solid rgba(195,165,105,0.22);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
  box-shadow: 0 0 48px rgba(156,130,56,0.10), inset 0 0 24px rgba(156,130,56,0.04);
  transition: border-color 0.4s, box-shadow 0.4s;
}
.hj-avatar-frame:hover {
  border-color: rgba(195,165,105,0.38);
  box-shadow: 0 0 64px rgba(156,130,56,0.16), inset 0 0 24px rgba(156,130,56,0.06);
}
.hj-svg {
  width: 58px; height: 58px;
  color: var(--gold-light);
  transition: color 0.3s;
}

/* Player info column */
.hj-player-info { flex: 1; min-width: 0; position: relative; z-index: 1; }
.hj-player-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(26px, 3vw, 38px); font-weight: 400;
  color: var(--alabaster); line-height: 1; letter-spacing: -0.5px;
  margin-bottom: 0.3rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hj-player-title {
  font-family: 'Raleway', sans-serif;
  font-size: 12px; font-weight: 400; font-style: italic;
  letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.25rem;
}
.hj-level-row {
  display: flex; align-items: center; gap: 14px;
}
.hj-level-badge {
  font-size: 11px; font-weight: 500; letter-spacing: 1px;
  text-transform: uppercase; font-family: 'Inter', sans-serif;
  padding: 4px 11px;
  border: 1px solid rgba(195,165,105,0.35);
  color: var(--gold-light);
  background: rgba(195,165,105,0.08);
  flex-shrink: 0; white-space: nowrap;
}
.hj-xp-wrap { flex: 1; min-width: 0; }
.hj-xp-bar {
  height: 2px; background: rgba(246,242,235,0.08);
  border-radius: 1px; overflow: hidden; margin-bottom: 7px;
}
.hj-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--sage-dark), var(--sage-light));
  border-radius: 1px; width: 0%;
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.hj-xp-label {
  font-size: 10px; color: rgba(246,242,235,0.28);
  font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
}

/* Drachma block */
.hj-drachma-block {
  flex-shrink: 0; text-align: center;
  padding: 1.1rem 1.75rem;
  border: 1px solid rgba(195,165,105,0.18);
  background: rgba(195,165,105,0.04);
  position: relative; z-index: 1;
  transition: border-color 0.35s, background 0.35s;
}
.hj-drachma-block:hover {
  border-color: rgba(195,165,105,0.3);
  background: rgba(195,165,105,0.07);
}
.hj-drachma-icon {
  font-size: 18px; color: var(--gold); margin-bottom: 0.3rem;
  line-height: 1;
}
.hj-drachma-amount {
  font-family: 'Cormorant Garamond', serif;
  font-size: 44px; font-weight: 300;
  color: var(--gold-light); line-height: 1;
  letter-spacing: -2px;
}
.hj-drachma-label {
  font-size: 9px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(195,165,105,0.45); font-family: 'Inter', sans-serif;
  margin-top: 5px;
}

/* ════════════════════════
   AGORA SHOP
   ════════════════════════ */
.hj-agora {
  padding: 4rem 3rem 5rem;
  background: var(--alabaster);
}
.hj-agora-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 2.5rem; padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--parchment);
  flex-wrap: wrap; gap: 1.25rem;
}
.hj-agora-title-group { flex: 1; min-width: 0; }
.hj-agora-tag {
  font-size: 10px; letter-spacing: 3px; text-transform: uppercase;
  color: var(--stone); font-family: 'Inter', sans-serif; font-weight: 500;
  margin-bottom: 0.4rem;
}
.hj-agora-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 30px; font-weight: 400; color: var(--espresso);
  letter-spacing: -0.3px; line-height: 1;
}
.hj-agora-tabs {
  display: flex;
  border: 1px solid var(--parchment);
  overflow: hidden;
  align-self: flex-end;
}
.hj-tab {
  font-size: 11px; padding: 8px 22px; cursor: pointer;
  color: var(--stone); background: transparent; border: none;
  font-family: 'Inter', sans-serif; font-weight: 500;
  letter-spacing: 1.2px; text-transform: uppercase;
  transition: all 0.22s;
}
.hj-tab + .hj-tab { border-left: 1px solid var(--parchment); }
.hj-tab.active   { background: var(--espresso); color: var(--alabaster); }
.hj-tab:hover:not(.active) { color: var(--espresso); }

/* Shop panel */
.hj-panel { display: none; }
.hj-panel.active { display: grid; }
.hj-shop-grid {
  grid-template-columns: repeat(auto-fill, minmax(188px, 1fr));
  gap: 12px;
}

/* ── Item cards ── */
.hj-item {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  padding: 1.5rem 1.25rem 1rem;
  display: flex; flex-direction: column; gap: 0.75rem;
  position: relative;
  transition: border-color 0.3s ease, transform 0.35s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.35s ease;
}

/* Active state */
.hj-item-active {
  border-color: var(--sage);
  background: var(--sage-mist);
  cursor: default;
}
.hj-item-active::after {
  content: '✓';
  position: absolute; top: 10px; right: 12px;
  font-size: 13px; color: var(--sage); font-weight: 600;
}

/* Owned (equippable) */
.hj-item-owned { cursor: pointer; }
.hj-item-owned:hover {
  border-color: var(--charcoal);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(34,27,16,0.10);
}

/* Locked */
.hj-item-locked {
  opacity: 0.38;
  cursor: default;
  pointer-events: none;
}

/* Buyable */
.hj-item-buyable {
  cursor: pointer;
  border-color: rgba(156,130,56,0.28);
}
.hj-item-buyable:hover {
  border-color: var(--gold);
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(156,130,56,0.12);
}

/* Item contents */
.hj-item-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 21px; font-weight: 400; color: var(--espresso);
  line-height: 1.2; flex: 1;
}
.hj-item-footer {
  display: flex; align-items: center;
  justify-content: space-between; gap: 6px;
  margin-top: auto;
}
.hj-item-meta { display: flex; align-items: center; gap: 6px; }
.hj-item-req {
  font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--stone); font-family: 'Inter', sans-serif;
}
.hj-item-cost {
  font-size: 11px; letter-spacing: 0.3px;
  color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 500;
}
.hj-item-state {
  font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--fog); font-family: 'Inter', sans-serif;
  flex-shrink: 0;
}
.hj-item-active  .hj-item-state { color: var(--sage); }
.hj-item-owned   .hj-item-state { color: var(--charcoal); }
.hj-item-buyable .hj-item-state { color: var(--gold); }

/* Avatar preview circle */
.hj-avatar-preview {
  width: 76px; height: 76px; border-radius: 50%;
  margin: 0 auto 0.25rem;
  background: rgba(106,135,82,0.06);
  border: 1px solid var(--parchment);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.3s, background 0.3s;
}
.hj-avatar-preview .hj-svg { width: 44px; height: 44px; color: var(--charcoal); }
.hj-item-active  .hj-avatar-preview { border-color: var(--sage-light); background: rgba(106,135,82,0.10); }
.hj-item-active  .hj-avatar-preview .hj-svg { color: var(--sage); }
.hj-item-buyable .hj-avatar-preview { border-color: rgba(156,130,56,0.28); }
.hj-item-buyable .hj-avatar-preview .hj-svg { color: var(--gold); }
.hj-item-owned:hover .hj-avatar-preview { border-color: var(--fog); }

/* ════════════════════════
   PURCHASE MODAL
   ════════════════════════ */
.hj-modal-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(24,16,10,0.72);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.25s ease;
}
.hj-modal-overlay.active {
  opacity: 1; pointer-events: all;
}
.hj-modal-box {
  background: var(--warm-white);
  border: 1px solid var(--parchment);
  padding: 2.75rem 2.5rem;
  max-width: 380px; width: calc(100% - 3rem);
  text-align: center;
  transform: translateY(24px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
}
.hj-modal-overlay.active .hj-modal-box {
  transform: translateY(0) scale(1);
}
.hj-modal-coin {
  font-size: 28px; color: var(--gold); margin-bottom: 1rem; line-height: 1;
}
.hj-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 400; color: var(--espresso);
  margin-bottom: 0.75rem; line-height: 1.1;
}
.hj-modal-body {
  font-size: 14px; color: var(--stone); font-weight: 300;
  line-height: 1.65; margin-bottom: 0.5rem;
}
.hj-modal-body strong { color: var(--espresso); font-weight: 500; }
.hj-modal-balance {
  font-size: 11px; color: var(--fog);
  font-family: 'Inter', sans-serif; margin-bottom: 2rem;
}
.hj-modal-actions {
  display: flex; gap: 10px; justify-content: center;
}
.hj-modal-cancel,
.hj-modal-confirm {
  font-size: 11px; padding: 10px 26px;
  border: 1px solid; cursor: pointer;
  font-family: 'Inter', sans-serif; font-weight: 500;
  letter-spacing: 0.9px; text-transform: uppercase;
  transition: all 0.25s ease;
}
.hj-modal-cancel {
  border-color: var(--parchment); color: var(--stone);
  background: transparent;
}
.hj-modal-cancel:hover { border-color: var(--charcoal); color: var(--espresso); }
.hj-modal-confirm {
  border-color: var(--gold); color: var(--gold);
  background: transparent;
}
.hj-modal-confirm:hover {
  background: var(--gold); border-color: var(--gold); color: var(--warm-white);
}

/* ════════════════════════
   LEVEL-UP TOAST
   ════════════════════════ */
#hj-levelup-toast {
  position: fixed; inset: 0; z-index: 9200;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.lut-backdrop {
  position: absolute; inset: 0;
  background: rgba(24,16,10,0);
  transition: background 0.4s ease;
}
#hj-levelup-toast.lut-visible .lut-backdrop {
  background: rgba(24,16,10,0.68);
}
#hj-levelup-toast.lut-exit .lut-backdrop {
  background: rgba(24,16,10,0);
  transition: background 0.55s ease;
}
.lut-card {
  position: relative; text-align: center;
  padding: 3.5rem 4.5rem;
  background: var(--dark-panel);
  border: 1px solid rgba(195,165,105,0.25);
  transform: translateY(32px) scale(0.94); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), opacity 0.38s ease;
  overflow: hidden;
}
#hj-levelup-toast.lut-visible .lut-card {
  transform: translateY(0) scale(1); opacity: 1;
}
#hj-levelup-toast.lut-exit .lut-card {
  transform: translateY(-22px) scale(0.97); opacity: 0;
  transition: transform 0.5s ease, opacity 0.38s ease;
}
.lut-glow {
  position: absolute; inset: -60px;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(156,130,56,0.14), transparent 65%);
  pointer-events: none;
}
.lut-eyebrow {
  font-size: 10px; letter-spacing: 3.5px; text-transform: uppercase;
  color: var(--gold); font-family: 'Inter', sans-serif; font-weight: 500;
  margin-bottom: 0.75rem; position: relative;
}
.lut-number {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(72px, 12vw, 108px); font-weight: 300;
  color: var(--alabaster); line-height: 0.95;
  letter-spacing: -4px; margin-bottom: 0.5rem; position: relative;
}
.lut-subtitle {
  font-family: 'Raleway', sans-serif;
  font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase;
  color: rgba(246,242,235,0.35); margin-bottom: 1.5rem; position: relative;
}
.lut-sep {
  width: 32px; height: 1px; background: rgba(195,165,105,0.25);
  margin: 0 auto 1rem;
}
.lut-hint {
  font-size: 11px; color: rgba(246,242,235,0.28);
  font-family: 'Inter', sans-serif; letter-spacing: 0.3px;
  position: relative;
}

/* ════════════════════════
   REWARD TOAST (small, bottom)
   ════════════════════════ */
.hj-reward-toast {
  position: fixed; bottom: 2.5rem; left: 50%;
  transform: translateX(-50%) translateY(16px);
  background: var(--dark-panel);
  border: 1px solid rgba(195,165,105,0.22);
  color: var(--gold-light);
  padding: 9px 22px; z-index: 9150;
  font-size: 13px; font-family: 'Inter', sans-serif; font-weight: 500;
  letter-spacing: 0.4px; white-space: nowrap;
  display: flex; align-items: center; gap: 9px;
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.28s ease;
  pointer-events: none;
}
.hj-reward-toast.hrt-in  { transform: translateX(-50%) translateY(0); opacity: 1; }
.hj-reward-toast.hrt-out { transform: translateX(-50%) translateY(-10px); opacity: 0; }
.hrt-bolt { font-size: 14px; }

/* ════════════════════════
   NAV INTEGRATION
   ════════════════════════ */
.nav-btn-profile {
  color: var(--gold);
  border-color: rgba(156,130,56,0.3);
}
.nav-btn-profile:hover {
  color: var(--gold-light);
  border-color: var(--gold);
  background: rgba(156,130,56,0.06);
}

/* Level badge in the nav chip */
.nav-level-badge {
  font-size: 10px; font-weight: 600;
  font-family: 'Inter', sans-serif;
  letter-spacing: 0.4px;
  color: var(--alabaster);
  background: var(--sage-dark);
  padding: 2px 7px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Inline SVG avatar in nav chip (replaces letter fallback) */
.nav-avatar-svg {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(106,135,82,0.14);
  border: 1px solid var(--sage-line);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; overflow: hidden;
}
.nav-avatar-svg .hj-svg {
  width: 14px; height: 14px; color: var(--sage);
}

/* ════════════════════════
   RESPONSIVE
   ════════════════════════ */
@media (max-width: 720px) {
  .hj-player-card {
    flex-direction: column; align-items: center;
    text-align: center; padding: 2rem 1.5rem; gap: 1.5rem;
  }
  .hj-level-row { flex-direction: column; align-items: center; gap: 10px; }
  .hj-xp-wrap   { width: 100%; max-width: 280px; }
  .hj-drachma-block { width: 100%; padding: 1rem 2rem; }
  .hj-agora { padding: 2.5rem 1.25rem 4rem; }
  .hj-agora-header { flex-direction: column; align-items: flex-start; }
  .hj-shop-grid {
    grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  }
  .hj-page-hero { padding: 3rem 1.5rem 2.75rem; }
  .lut-card { padding: 2.5rem 2rem; }
}
@media (max-width: 480px) {
  .hj-shop-grid { grid-template-columns: 1fr 1fr; }
  .hj-modal-box { padding: 2rem 1.5rem; }
  .hj-modal-actions { flex-direction: column; }
  .hj-modal-cancel, .hj-modal-confirm { width: 100%; }
}

.rh-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}
.rh-card-subject {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rh-terra-lt);
}

/* Failure count badges */
.rh-card-badge {
  flex-shrink: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  padding: 2px 9px;
  border-radius: 12px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}
.rh-badge-label { font-weight: 400; font-size: 0.65rem; opacity: 0.85; }

.rh-badge-cool  { background: rgba(100, 120, 80, 0.18); color: #8EAA78; border: 1px solid rgba(100,120,80,0.3); }
.rh-badge-warm  { background: rgba(180, 120, 40, 0.18); color: #C9A44A; border: 1px solid rgba(180,120,40,0.3); }
.rh-badge-hot   { background: rgba(180, 60, 40, 0.22);  color: #E07060; border: 1px solid rgba(180,60,40,0.35); }

.rh-card-question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--rh-text);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}
.rh-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rh-line);
}
.rh-card-answer { display: flex; align-items: center; gap: 5px; }
.rh-answer-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--rh-muted);
}
.rh-answer-val {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--rh-gold);
  font-weight: 600;
}
.rh-card-lesson {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  color: var(--rh-muted);
  opacity: 0.8;
}

/* ── STATE BLOCKS (loading / empty / unauth) ── */
.rh-state-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 1rem;
}
.rh-state-icon { font-size: 3rem; line-height: 1; }
.rh-state-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: var(--rh-gold);
}
.rh-state-msg {
  font-family: 'Raleway', sans-serif;
  font-size: 0.88rem;
  color: var(--rh-muted);
  max-width: 380px;
  line-height: 1.65;
}

/* Loading spinner */
.rh-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(201, 164, 74, 0.15);
  border-top-color: var(--rh-gold);
  border-radius: 50%;
  animation: rh-spin 0.8s linear infinite;
}
@keyframes rh-spin { to { transform: rotate(360deg); } }

/* ── MODAL OVERLAY ── */
.rh-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(12, 14, 8, 0.82);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.24s ease;
}
.rh-modal-overlay.open { opacity: 1; }

.rh-modal {
  background: #1A1C14;
  border: 1px solid rgba(160, 80, 45, 0.28);
  border-radius: 14px;
  padding: 1.75rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7);
  transform: translateY(10px);
  transition: transform 0.24s ease;
}
.rh-modal-overlay.open .rh-modal { transform: translateY(0); }
.rh-modal.rh-modal-danger { border-color: rgba(192, 60, 40, 0.38); }

.rh-modal-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.rh-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--rh-gold);
}
.rh-modal-x {
  background: none;
  border: none;
  color: var(--rh-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  transition: color 0.15s;
}
.rh-modal-x:hover { color: var(--rh-text); }

.rh-modal-sub {
  font-family: 'Raleway', sans-serif;
  font-size: 0.87rem;
  color: var(--rh-muted);
  line-height: 1.65;
  margin-bottom: 1.25rem;
}
.rh-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

/* Share-modal form field */
.rh-field { display: flex; flex-direction: column; gap: 5px; }
.rh-field-label {
  font-family: 'Raleway', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--rh-muted);
}
.rh-field-input {
  width: 100%;
  padding: 9px 12px;
  background: #0E100A;
  border: 1px solid rgba(122, 108, 88, 0.4);
  border-radius: 7px;
  color: var(--rh-text);
  font-family: 'Raleway', sans-serif;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.15s;
}
.rh-field-input:focus { border-color: var(--rh-gold); }
.rh-modal-err {
  font-family: 'Raleway', sans-serif;
  font-size: 0.8rem;
  color: #E07060;
  margin-top: 0.5rem;
  padding: 6px 10px;
  background: rgba(192, 60, 40, 0.12);
  border-radius: 6px;
  border: 1px solid rgba(192, 60, 40, 0.25);
}

/* ── TARTARUS OVERLAY (review quiz) ── */
.rh-overlay-topbar {
  background: #141610 !important;
  border-bottom: 1px solid rgba(201, 164, 74, 0.12) !important;
}
.rh-overlay-title {
  font-family: 'Raleway', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: rgba(201, 164, 74, 0.85) !important;
}
.rh-hud {
  display: flex;
  align-items: baseline;
  gap: 3px;
  font-family: 'Raleway', sans-serif;
  font-size: 0.82rem;
  min-width: 60px;
  justify-content: flex-end;
}
.rh-hud-score {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--rh-gold, #C9A44A);
}
.rh-hud-sep, .rh-hud-counter { color: rgba(122, 108, 88, 0.7); }

/* Progress bar track (between topbar and frame) */
.rh-progress-track {
  height: 3px;
  background: rgba(201, 164, 74, 0.10);
  flex-shrink: 0;
}
.rh-progress {
  height: 100%;
  background: linear-gradient(90deg, var(--rh-terra, #C05535), var(--rh-gold, #C9A44A));
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Overlay frame scrollable area */
.rh-overlay-frame {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: #0D0F0A;
}
.rh-overlay-frame > * { width: 100%; max-width: 680px; }

/* Tartarus screens */
@keyframes trt-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.trt-screen { display: none; }
.trt-screen.active { display: block; animation: trt-fade-in 0.32s ease both; }

/* Heat tag in question meta */
.rh-heat-tag {
  border-color: rgba(192, 60, 40, 0.45) !important;
  color: #E07060 !important;
}

/* End-screen eyebrow */
.rh-end-eyebrow {
  font-family: 'Raleway', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(201, 164, 74, 0.55);
  margin-bottom: 6px;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .rh-hero { padding: 2.5rem 1.25rem 2rem; }
  .rh-action-bar { padding: 1rem 1.25rem; }
  .rh-filters { padding: 0.75rem 1.25rem 0; }
  .rh-stats { padding: 0.75rem 1.25rem; }
  .rh-content { padding: 0.75rem 1.25rem 3rem; }
  .rh-grid { grid-template-columns: 1fr; }
  .rh-btn { font-size: 0.78rem; padding: 9px 14px; }
  .rh-overlay-frame { padding: 1rem 0.5rem; }
}
@media (max-width: 400px) {
  .rh-action-bar { flex-direction: column; }
  .rh-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   NAV OVERFLOW — profile & review-hub buttons on small screens
   ════════════════════════════════════════════════════════════ */

/* Below 900px: hide text inside profile / review-hub / teacher buttons,
   keep only the icon so the nav doesn't overflow */
@media (max-width: 900px) {
  .nav-btn-profile .nav-btn-text,
  .nav-btn-review-hub .nav-btn-text,
  .nav-btn-teacher .nav-btn-text {
    display: none;
  }
}

/* Below 640px: collapse profile + review-hub to icon-only pills
   and shrink the username in the chip */
@media (max-width: 640px) {
  .nav-btn-profile,
  .nav-btn-review-hub {
    padding: 6px 9px;
    font-size: 15px;   /* icon still renders at readable size */
    min-width: 0;
  }
  /* Hide the text node (icon is first, text follows — we hide via CSS only;
     JS already generates them without a wrapper span,
     so on very small screens we hide the entire secondary buttons
     and rely on the level badge as the profile shortcut) */
  .nav-btn-profile,
  .nav-btn-teacher {
    display: none;
  }
}

/* Level badge doubles as a tappable profile link on mobile */
.nav-level-badge {
  cursor: pointer;
}
.nav-level-badge:hover {
  background: var(--sage);
}

/* ============================================================
   SymposiON — Checkout Merchant Zone  (dark premium theme)
   All selectors scoped to #checkout-merchant-zone so the
   rest of the warm-cream site is completely unaffected.
   ============================================================ */

/* ── Utility ── */
.co-hidden { display: none !important; }

/* ── Zone wrapper ─────────────────────────────────────────── */
#checkout-merchant-zone {
  --co-bg:       #0f0d0a;
  --co-panel:    #161310;
  --co-raised:   #1d1a14;
  --co-border:   #2e2924;
  --co-gold:     #c9a44a;
  --co-gold-dim: rgba(201,164,74,.12);
  --co-text:     #e8e2d5;
  --co-muted:    #7a7265;
  --co-err-bg:   #2a1810;
  --co-err:      #c85040;
  font-family:   'Raleway', sans-serif;
  background:    var(--co-bg);
  border:        1px solid var(--co-border);
  border-radius: 16px;
  padding:       2rem;
  margin:        2.5rem auto 0;
  max-width:     560px;
  box-shadow:    0 0 0 1px rgba(201,164,74,.06),
                 0 24px 64px rgba(0,0,0,.55);
}

/* ── Back button ──────────────────────────────────────────── */
.co-back-btn {
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     none;
  border:         none;
  color:          var(--co-muted);
  font:           500 12px/1 'Raleway', sans-serif;
  letter-spacing: .05em;
  cursor:         pointer;
  padding:        0 0 1.25rem;
  transition:     color .2s;
}
.co-back-btn:hover { color: var(--co-text); }

/* ── Security banner ──────────────────────────────────────── */
.co-security-banner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  background:      linear-gradient(135deg,#1a1710 0%,#1d1a12 100%);
  border:          1px solid rgba(201,164,74,.18);
  border-radius:   10px;
  padding:         .65rem 1rem;
  margin-bottom:   1.5rem;
  flex-wrap:       wrap;
}
.co-sec-left {
  display:     flex;
  align-items: center;
  gap:         8px;
}
.co-shield-icon { flex-shrink:0; width:20px; height:24px; }
.co-sec-text {
  font-size:      11px;
  font-weight:    700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color:          var(--co-gold);
  white-space:    nowrap;
}
.co-sec-badges {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-wrap:   wrap;
}
.co-badge-logo          { opacity:.72; transition:opacity .2s; flex-shrink:0; }
.co-badge-logo:hover    { opacity:1; }

/* ── Order summary ────────────────────────────────────────── */
.co-order-summary {
  background:    var(--co-panel);
  border:        1px solid var(--co-border);
  border-radius: 10px;
  padding:       .9rem 1.1rem;
  margin-bottom: 1.5rem;
}
.co-order-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color:          var(--co-muted);
  margin-bottom:  .5rem;
}
.co-order-row {
  display:         flex;
  justify-content: space-between;
  align-items:     baseline;
  gap:             1rem;
}
.co-order-plan  { font-size:14px; font-weight:600; color:var(--co-text); }
.co-order-price { font-size:18px; font-weight:800; color:var(--co-gold); letter-spacing:-.02em; }
.co-order-meta  { font-size:12px; color:var(--co-muted); margin-top:.25rem; }

/* ── Section label ────────────────────────────────────────── */
.co-section-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color:          var(--co-muted);
  margin-bottom:  .75rem;
}

/* ── Payment method selector ──────────────────────────────── */
.co-method-selector {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           .75rem;
  margin-bottom: 1.5rem;
}
.co-method-btn {
  position:       relative;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .5rem;
  background:     var(--co-panel);
  border:         1.5px solid var(--co-border);
  border-radius:  10px;
  padding:        .9rem .75rem .75rem;
  cursor:         pointer;
  transition:     border-color .2s, background .2s, box-shadow .2s;
  outline:        none;
}
.co-method-btn:focus-visible { box-shadow:0 0 0 3px rgba(201,164,74,.3); }
.co-method-btn:hover {
  border-color: rgba(201,164,74,.45);
  background:   var(--co-raised);
}
.co-method-btn--active {
  border-color: var(--co-gold) !important;
  background:   rgba(201,164,74,.07) !important;
  box-shadow:   0 0 0 1px rgba(201,164,74,.18), inset 0 1px 0 rgba(201,164,74,.06);
}
.co-method-logos { display:flex; align-items:center; gap:6px; min-height:22px; }
.co-method-name {
  font-size:      11.5px;
  font-weight:    600;
  color:          var(--co-muted);
  letter-spacing: .04em;
}
.co-method-btn--active .co-method-name { color:var(--co-text); }
.co-method-check {
  position:   absolute;
  top:        7px; right:9px;
  font-size:  10px;
  color:      var(--co-gold);
  opacity:    0;
  transition: opacity .2s;
}
.co-method-btn--active .co-method-check { opacity:1; }

/* ── Stripe skeleton loader ───────────────────────────────── */
.co-skel-wrap { padding:.25rem 0 .5rem; margin-bottom:.25rem; }
.co-skel-tabs { display:flex; gap:8px; margin-bottom:14px; }
.co-skel-tab,
.co-skel-input,
.co-skel-half {
  border-radius: 7px;
  background:    linear-gradient(90deg,#1e1b16 25%,#252018 50%,#1e1b16 75%);
  background-size: 300% 100%;
  animation:     co-shimmer 1.6s infinite;
}
.co-skel-tab   { height:40px; flex:1; }
.co-skel-input { height:42px; margin-bottom:10px; animation-delay:.1s; }
.co-skel-row   { display:flex; gap:10px; }
.co-skel-half  { flex:1; height:42px; animation-delay:.2s; }
@keyframes co-shimmer {
  0%   { background-position:100% 0; }
  100% { background-position:-100% 0; }
}

/* ── Stripe Payment Element mount ─────────────────────────── */
#stripe-payment-element { margin-bottom:.75rem; }

/* ── Error block ──────────────────────────────────────────── */
.co-error {
  display:       flex;
  align-items:   flex-start;
  gap:           8px;
  background:    var(--co-err-bg);
  border:        1px solid rgba(200,80,64,.25);
  border-left:   3px solid var(--co-err);
  border-radius: 8px;
  padding:       .7rem .9rem;
  margin:        .6rem 0 .75rem;
  font-size:     13px;
  font-weight:   500;
  color:         var(--co-err);
  line-height:   1.45;
}
.co-error::before { content:'!'; flex-shrink:0; font-weight:900; font-size:13px; }

/* ── Pay button ───────────────────────────────────────────── */
.co-pay-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  width:           100%;
  padding:         .9rem 1.5rem;
  margin-top:      .5rem;
  background:      linear-gradient(135deg,#c9a44a 0%,#a88230 100%);
  border:          none;
  border-radius:   10px;
  color:           #0f0d0a;
  font:            700 15px/1 'Raleway', sans-serif;
  letter-spacing:  .04em;
  cursor:          pointer;
  transition:      opacity .2s, box-shadow .2s, transform .12s;
  box-shadow:      0 4px 18px rgba(201,164,74,.28),
                   0 1px 0 rgba(255,255,255,.08) inset;
}
.co-pay-btn:hover:not(:disabled) {
  opacity:    .93;
  box-shadow: 0 6px 24px rgba(201,164,74,.4);
  transform:  translateY(-1px);
}
.co-pay-btn:active:not(:disabled) { transform:translateY(0); }
.co-pay-btn:disabled { opacity:.42; cursor:not-allowed; box-shadow:none; }
.co-pay-btn--loading {
  background:     linear-gradient(135deg,#8a6e28 0%,#6e5520 100%);
  pointer-events: none;
  color:          rgba(255,255,255,.8);
}
.co-pay-btn--success {
  background: linear-gradient(135deg,#4a7a55 0%,#375e40 100%);
  box-shadow: 0 4px 18px rgba(74,122,85,.35);
  color:      #e8f5ec;
}
.co-lock-icon { flex-shrink:0; }
.co-pay-price {
  margin-left:    auto;
  font-size:      16px;
  font-weight:    900;
  opacity:        .9;
  letter-spacing: -.01em;
}

/* ── Spinners ─────────────────────────────────────────────── */
.co-spinner,
.co-spinner-inline {
  display:       inline-block;
  border:        2px solid rgba(255,255,255,.18);
  border-top-color: currentColor;
  border-radius: 50%;
  animation:     co-spin .7s linear infinite;
  flex-shrink:   0;
  width:  18px; height:18px;
}
.co-spinner { width:28px; height:28px; border-width:3px; }
@keyframes co-spin { to { transform:rotate(360deg); } }

/* ── PayPal zone ──────────────────────────────────────────── */
#co-paypal-zone  { padding-top:.25rem; }
.co-paypal-spinner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .75rem;
  padding:        2rem;
  color:          var(--co-muted);
  font-size:      13px;
}

/* ── Trust footer ─────────────────────────────────────────── */
.co-trust-footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-wrap:       wrap;
  gap:             .5rem .75rem;
  margin-top:      1.25rem;
  padding-top:     1rem;
  border-top:      1px solid var(--co-border);
  font-size:       11px;
  color:           var(--co-muted);
  letter-spacing:  .03em;
}

/* ── Success state ────────────────────────────────────────── */
.co-success-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            .75rem;
  padding:        2.5rem 1rem 2rem;
  text-align:     center;
}
.co-success-ring  { width:80px; height:80px; margin-bottom:.5rem; }
.co-check-svg     { width:100%; height:100%; }
.co-check-circle  { transition:stroke-dashoffset 1s ease-out; }
.co-check-mark    { transition:stroke-dashoffset .5s ease-out .85s; }
.co-anim-circle   { stroke-dashoffset:0 !important; }
.co-anim-check    { stroke-dashoffset:0 !important; }
.co-success-title {
  font-size:      22px;
  font-weight:    800;
  color:          var(--co-gold);
  letter-spacing: -.02em;
  margin:         0;
}
.co-success-body  { font-size:14px; color:var(--co-text); margin:0; max-width:320px; }
.co-success-note  { font-size:12px; color:var(--co-muted); margin:0; }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width:540px) {
  #checkout-merchant-zone {
    padding:       1.25rem;
    border-radius: 12px;
    margin-top:    1.5rem;
  }
  .co-method-selector { grid-template-columns:1fr; }
  .co-sec-badges      { display:none; }
  .co-sec-text        { font-size:10px; }
}