/* Base layout and theme: black + neon purple / neon light blue accents */
/* Use a dark image-tone feel for the hero background (no external images required) */

:root{
  --header-pad-y: clamp(10px, 2.5vw, 18px);
  --header-pad-x: clamp(12px, 4vw, 28px);
  --tap-min: 44px;
  --bg-dark:#050507;
  --panel:#0b0b0f;
  --neon-purple:#9b59ff;
  --neon-blue:#4dd0e1;
  --neon-pink:#e91e8c;
  --neon-yellow:#ffd700;
  --neon-yellow-glow:rgba(255,215,0,0.5);
  --yellow-fill:#554C0D;
  --yellow-glow-bright:#EEF400;
  --yellow-glow-soft:rgba(238,244,0,0.6);
  --accent:var(--neon-purple);
  --muted:#bfbfbf;
  --glass: rgba(255,255,255,0.03);
  /* Pricing modal only — lavender + soft pink (not used elsewhere) */
  --pricing-pink-mist:rgba(233,30,140,0.14);
  --pricing-pink-soft:rgba(233,30,140,0.22);
  --pricing-lavender-strong:rgba(215,190,255,0.95);
  --pricing-pass-border:rgba(198,155,220,0.45);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:'Press Start 2P',sans-serif;background:linear-gradient(180deg,#020204 0%, #071026 45%, #0b0b12 100%);color:#fff}

/* Header — sticky, fully opaque */
#site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(8px, 2vw, 16px);
  padding: var(--header-pad-y) var(--header-pad-x);
  background-color: #0b0b0f;
  border-bottom: 2px solid rgba(155,89,255,0.12);
}

.brand{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(10px, 2.5vw, 16px);
  flex:0 1 auto;
  min-width:0;
}
.brand-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.site-logo-mark{
  height:clamp(52px, 11vw, 72px);
  width:auto;
  aspect-ratio:735 / 678;
  object-fit:contain;
  flex-shrink:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.45));
}
#logo{font-size:clamp(14px, 4.2vw, 20px);color:var(--accent);letter-spacing:2px;line-height:1.2}
#tag{font-size:clamp(8px, 2.2vw, 10px);color:var(--muted);line-height:1.3}

/* Hamburger: hidden on desktop; shown ≤900px when logged in (see media query) */
.nav-menu-toggle{
  display:none;
  flex-shrink:0;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:var(--tap-min);
  height:var(--tap-min);
  padding:0;
  margin:0;
  border:2px solid rgba(155,89,255,0.35);
  border-radius:8px;
  background:rgba(155,89,255,0.08);
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.nav-menu-toggle:hover{
  border-color:var(--neon-purple);
  background:rgba(155,89,255,0.14);
}
.nav-menu-toggle-bar{
  display:block;
  width:20px;
  height:2px;
  background:var(--neon-blue);
  border-radius:1px;
  transition:transform .2s, opacity .2s;
}
body.nav-drawer-open .nav-menu-toggle-bar:nth-child(1){
  transform:translateY(7px) rotate(45deg);
}
body.nav-drawer-open .nav-menu-toggle-bar:nth-child(2){opacity:0}
body.nav-drawer-open .nav-menu-toggle-bar:nth-child(3){
  transform:translateY(-7px) rotate(-45deg);
}

.nav-drawer-overlay{
  display:none;
  position:fixed;
  inset:0;
  z-index:118;
  background:rgba(0,0,0,0.5);
  -webkit-tap-highlight-color:transparent;
}
body.nav-drawer-open .nav-drawer-overlay:not(.hidden){
  display:block;
}

#main-nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex:1 1 auto;
  justify-content:center;
  flex-wrap:wrap;
  min-width:0;
}
.auth{flex:0 0 auto;margin-left:auto}
.nav-btn{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  color:var(--muted);
  background:rgba(155,89,255,0.06);
  border:2px solid rgba(155,89,255,0.2);
  padding:10px 14px;
  cursor:pointer;
  border-radius:6px;
  letter-spacing:0.5px;
  transition:border-color .2s, color .2s, background .2s, transform .2s;
}
.nav-btn:hover{
  border-color:var(--neon-purple);
  color:var(--neon-blue);
  background:rgba(155,89,255,0.12);
  transform:translateY(-2px);
}
.nav-btn--yellow{
  color:rgba(255,255,255,0.95);
  border:2px solid rgba(240,248,255,0.85); /* snowy white */
  background:rgba(255,255,255,0.06);
  text-shadow:0 0 10px rgba(240,248,255,0.55), 0 0 18px rgba(180,235,255,0.25);
  box-shadow:0 0 14px rgba(200,240,255,0.18), 0 0 28px rgba(200,240,255,0.08);
  transition:border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s, text-shadow .2s;
}
.nav-btn--yellow:hover{
  border-color:#ffffff;
  color:#ffffff;
  background:rgba(255,255,255,0.10);
  text-shadow:0 0 14px rgba(255,255,255,0.75), 0 0 26px rgba(140,220,255,0.35);
  box-shadow:0 0 22px rgba(220,250,255,0.28), 0 0 46px rgba(140,220,255,0.14);
  transform:translateY(-2px);
}

/* Clear search filter (shown on year/sem page when filtered) */
.map-clear-filter{
  margin-top:8px;
  font-family:'Press Start 2P', cursive;
  font-size:8px;
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.14);
  color:rgba(255,255,255,0.75);
  cursor:pointer;
}
.map-clear-filter:hover{
  border-color:rgba(77,208,225,0.45);
  color:#fff;
  background:rgba(77,208,225,0.06);
}

/* Search drawer (slides from right) */
.drawer-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.55);
  z-index:9998;
}
.search-drawer{
  position:fixed;
  top:0;
  right:0;
  height:100vh;
  width:min(420px, 92vw);
  background:linear-gradient(180deg, rgba(14,12,18,0.98) 0%, rgba(8,8,12,0.98) 100%);
  border-left:1px solid rgba(255,255,255,0.10);
  z-index:9999;
  display:flex;
  flex-direction:column;
  transform:translateX(110%);
  transition:transform .22s ease-out;
}
.search-drawer.open{transform:translateX(0)}
.search-drawer-header{
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.search-input-wrap{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 12px;
  border-radius:10px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(77,208,225,0.18);
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.search-input-wrap:focus-within{
  border-color:rgba(77,208,225,0.5);
  box-shadow:0 0 0 1px rgba(77,208,225,0.2), 0 0 16px rgba(77,208,225,0.15);
}
.search-icon{color:rgba(255,255,255,0.65);font-size:14px}
.search-input-wrap:focus-within .search-icon{color:var(--neon-blue)}
.search-input{
  flex:1;
  min-width:0;
  background:transparent;
  border:none;
  outline:none;
  color:#fff;
  font-family:'Press Start 2P', sans-serif;
  font-size:10px;
}
.search-input::placeholder{color:rgba(255,255,255,0.45)}
.search-close{
  background:transparent;
  border:none;
  color:rgba(255,255,255,0.75);
  font-family:'Press Start 2P', sans-serif;
  font-size:14px;
  cursor:pointer;
  padding:4px 8px;
}
.search-close:hover{color:#fff}
.search-drawer-body{
  padding:16px 18px 18px;
  overflow:auto;
}
.search-section-title{
  font-size:9px;
  color:rgba(255,255,255,0.6);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin:0 0 12px 0;
}
.search-results{display:flex;flex-direction:column;gap:10px}
.search-item{
  display:flex;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.03);
  cursor:pointer;
  transition:border-color .2s, background .2s, transform .15s;
}
.search-item:hover{
  border-color:rgba(77,208,225,0.35);
  background:rgba(77,208,225,0.06);
  transform:translateY(-1px);
}
.search-thumb{
  width:40px;
  height:40px;
  border-radius:10px;
  background:linear-gradient(135deg, #0a1820 0%, #0d1a28 50%, #061016 100%);
  border:1px solid rgba(77,208,225,0.18);
  flex:0 0 auto;
  background-size:cover;
  background-position:center;
}
.search-meta{min-width:0}
.search-title{
  font-size:10px;
  color:#fff;
  line-height:1.5;
  margin:0 0 4px 0;
  word-break:break-word;
}
.search-sub{
  font-size:8px;
  color:rgba(255,255,255,0.55);
  margin:0;
  line-height:1.6;
}
.search-empty{
  font-size:9px;
  color:rgba(255,255,255,0.55);
  line-height:1.8;
  padding:10px 4px;
}

/* Auth button */
.auth button{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  background:var(--accent);
  border:none;
  color:#000;
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  transition:background .2s, transform .2s;
}
.auth button:hover{background:var(--neon-blue);color:#000;transform:translateY(-2px)}

/* Year / Semester dropdown in main nav — clean, website-style, white glow */
.year-dropdown{
  position:relative;
  border-radius:8px;
}
.year-toggle{
  display:flex;
  align-items:center;
  gap:6px;
  padding-inline:16px;
  padding-block:9px;
  background:#11131a;
  border-color:rgba(77,208,225,0.9); /* cyan border */
  color:var(--neon-blue);           /* PRACTICE cyan text */
  box-shadow:0 0 10px rgba(77,208,225,0.55);
  border-radius:8px;
}
.year-toggle:hover{
  border-color:var(--neon-purple);              /* purple on hover */
  color:var(--neon-purple);
  box-shadow:0 0 14px rgba(155,89,255,0.7);
}
.year-toggle-caret{
  font-size:10px;
  opacity:0.95;
}
.year-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:8px;
  min-width:190px;
  background:#050509;
  border:1px solid rgba(255,255,255,0.45);
  border-radius:8px;
  padding:8px 0;
  box-shadow:0 10px 24px rgba(0,0,0,0.75);
  opacity:0;
  transform:translateY(4px);
  pointer-events:none;
  transition:opacity .16s ease-out, transform .16s ease-out;
  z-index:200;
}
.year-dropdown.open .year-menu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.year-menu-item{
  width:100%;
  text-align:left;
  padding:9px 16px;
  background:transparent;
  border:none;
  font-family:'Press Start 2P', cursive;
  font-size:9px;
  color:var(--neon-blue); /* cyan text */
  cursor:pointer;
  display:block;
}
.year-menu-item:hover{
  background:rgba(155,89,255,0.22);          /* soft purple */
  color:var(--neon-purple);                  /* purple text on hover */
  text-shadow:0 0 6px rgba(155,89,255,0.8);  /* purple glow */
}

/* Single Year → Semester selector (replaces multiple year dropdowns) */
.year-select{position:relative}
.year-select-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  width:min(420px, calc(100vw - 40px));
  background:#050509;
  border:1px solid rgba(255,255,255,0.45);
  border-radius:10px;
  padding:14px 14px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,0.75);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition:opacity .16s ease-out, transform .16s ease-out;
  z-index:220;
}
.year-select.open .year-select-panel{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.year-select-row{margin-bottom:14px}
.year-select-row:last-child{margin-bottom:0}
.year-select-caption{
  display:block;
  font-size:8px;
  color:rgba(255,255,255,0.65);
  margin:0 0 10px 2px;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.year-select-options{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}
.year-select-option,.year-select-sem{
  font-family:'Press Start 2P', cursive;
  font-size:9px;
  padding:10px 12px;
  border-radius:8px;
  background:rgba(155,89,255,0.08);
  border:2px solid rgba(155,89,255,0.25);
  color:rgba(255,255,255,0.9);
  cursor:pointer;
  text-align:left;
  transition:border-color .2s, background .2s, transform .15s, color .2s, box-shadow .2s;
}
.year-select-option:hover,.year-select-sem:hover{
  border-color:var(--neon-purple);
  background:rgba(155,89,255,0.14);
  transform:translateY(-1px);
}
.year-select-option.active{
  border-color:rgba(77,208,225,0.9);
  color:var(--neon-blue);
  box-shadow:0 0 10px rgba(77,208,225,0.35);
}
.year-select-sem[disabled]{
  opacity:0.5;
  cursor:not-allowed;
  filter:grayscale(0.25);
}
.year-select-sem.active{
  border-color:rgba(77,208,225,0.9);
  color:var(--neon-blue);
  box-shadow:0 0 10px rgba(77,208,225,0.35);
}

/* Nav: Year / Unlockables / Projects only visible after login (landing stays clean) */
.main-nav--logged-in-only{display:none}
body.user-logged-in .main-nav--logged-in-only{display:flex}

/* Header: brand row */
.header-start{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:clamp(10px, 3vw, 20px);
  flex:0 1 auto;
  min-width:0;
}
/* Pricing — text link in auth column (pink, opens modal) */
.auth .header-pricing-link{
  font-family:'Press Start 2P', cursive;
  font-size:8px;
  color:var(--neon-pink);
  text-decoration:none;
  padding:10px 6px 6px 4px;
  margin-inline-end:clamp(6px, 1vw, 14px);
  letter-spacing:0.06em;
  white-space:nowrap;
  border-bottom:3px solid transparent;
  line-height:1.4;
  transition:color .12s, border-color .12s, text-shadow .12s;
}
.auth .header-pricing-link:hover,
.auth .header-pricing-link:focus-visible{
  color:#ff6baf;
  border-bottom-color:var(--neon-pink);
  text-shadow:0 0 12px rgba(233,30,140,0.55), 0 0 20px rgba(233,30,140,0.25);
  outline:none;
}
/* Mobile drawer — same idea: plain link, no button chrome */
.drawer-pricing-link{
  display:none !important;
}
@media (max-width:900px){
  body.user-logged-in .main-nav--logged-in-only .drawer-pricing-link{
    display:block !important;
    width:max-content;
    max-width:100%;
    align-self:flex-start;
    font-family:'Press Start 2P', cursive;
    font-size:8px;
    color:var(--neon-pink);
    text-decoration:none;
    padding:10px 4px 8px 2px;
    margin-bottom:4px;
    border-bottom:3px solid rgba(233,30,140,0.45);
    letter-spacing:0.06em;
    text-align:left;
  }
  body.user-logged-in .main-nav--logged-in-only .drawer-pricing-link:hover,
  body.user-logged-in .main-nav--logged-in-only .drawer-pricing-link:focus-visible{
    color:#ff6baf;
    border-bottom-color:var(--neon-pink);
    text-shadow:0 0 10px rgba(233,30,140,0.45);
    outline:none;
  }
}

/* Hero: full width hero with GIF image element */
#hero.hero-bg{
  width:100%;
  margin:0;
  padding:0;
  background-color:#0a0a12;
  height:100vh;
}
.hero-bg .hero-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
}

/* Hero content: solid dark strip below image (no box) */
.hero-content{
  width:100%;
  padding:40px 20px 48px;
  text-align:center;
  background:#0a0a12;
}
.hero-content-inner{
  max-width:960px;
  margin:0 auto;
}
.hero-content .hero-title{font-size:28px;color:var(--neon-blue);margin:0 0 12px 0}
.hero-content .hero-sub{color:var(--muted);font-size:12px;margin:0 0 18px 0}
.hero-content .hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}

/* Course cards — wider section, larger cards, less side space */
.courses-section{
  max-width:1600px;
  width:94%;
  margin:0 auto;
  padding:48px 2% 64px;
}
.courses-heading{
  font-size:18px;
  color:var(--neon-blue);
  text-align:center;
  margin:0 0 8px 0;
  text-shadow:0 0 16px rgba(77,208,225,0.4);
}
.courses-sub{
  font-size:9px;
  color:var(--muted);
  text-align:center;
  margin:0 0 32px 0;
}
/* Courses: 1 col phone → 2 tablet → 3+ desktop */
.courses-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 4vw, 28px);
}
@media (min-width:521px){
  .courses-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:901px){
  .courses-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
.course-card{
  background:linear-gradient(180deg, rgba(14,12,18,0.98) 0%, rgba(8,8,12,0.98) 100%);
  border:2px solid rgba(155,89,255,0.2);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:border-color .25s, box-shadow .25s, transform .2s;
}
.course-card:hover{
  border-color:rgba(155,89,255,0.45);
  box-shadow:0 0 28px rgba(155,89,255,0.15);
  transform:translateY(-4px);
}
.course-card-image{
  height:180px;
  flex-shrink:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
/* Card images: batch 1 = Python, Web foundations, React */
.course-card-image--1{background-image:url('images/course-1.png');background-color:#0d0a18}
.course-card-image--2{background-image:url('images/course-2.png');background-color:#0a0808}
.course-card-image--3{background-image:url('images/course-3.png');background-color:#0d0a18}
.course-card-image--4{background-image:url('images/course-4.png');background-color:#0d0a18}
.course-card-image--5{background-image:url('images/course-5.png');background-color:#060a08}
.course-card-image--6{background-image:url('images/course-6.png');background-color:#080d14}
.course-card-image--7{background-image:url('images/course-7.png');background-color:#0d0a18}
.course-card-image--8{background-image:url('images/course-8.png');background-color:#060a08}
.course-card-image--9{background-image:url('images/course-9.png');background-color:#080d0a}
.course-card-image--10{background-image:url('images/course-10.png');background-color:#0a0d14}
.course-card-image--11{background-image:url('images/course-11.png');background-color:#060a08}
.course-card-image--12{background-image:url('images/course-12.png');background-color:#0d0a14}
.course-card-image--13{background-image:url('images/course-13.png');background-color:#080d14}
.course-card-image--14{background-image:url('images/course-14.png');background-color:#0a0d08}
.course-card-image--15{background-image:url('images/course-15.png');background-color:#0d0a14}
.course-card-body{
  padding:24px 22px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}
.course-card-label{
  font-size:8px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.course-card-title{
  font-size:13px;
  color:#fff;
  margin:0;
  line-height:1.4;
}
.course-card-desc{
  font-size:9px;
  color:var(--muted);
  line-height:1.7;
  margin:0;
  flex:1;
}
.course-card-badge{
  font-size:7px;
  color:rgba(255,255,255,0.9);
  background:rgba(155,89,255,0.2);
  border:1px solid rgba(155,89,255,0.35);
  border-radius:20px;
  padding:6px 12px;
  align-self:flex-start;
  text-transform:uppercase;
  letter-spacing:0.08em;
}

/* ========== Pricing modal (two-tier cards, purple arena vibe) ========== */
#pricing-modal .modal-card--pricing-plan{
  width:min(1100px, calc(100vw - 32px));
  max-width:1100px;
  padding:0;
  border-radius:16px;
  border:2px solid rgba(175,120,195,0.5);
  background:linear-gradient(180deg, #0c0716 0%, #140a1a 38%, #0e0816 72%, #08060e 100%);
  text-align:left;
  overflow:hidden;
  position:relative;
  box-shadow:
    0 0 0 1px rgba(233,30,140,0.1),
    0 0 56px var(--pricing-pink-mist),
    0 24px 64px rgba(0,0,0,0.55);
}
#pricing-modal .pricing-modal-scroll{
  padding:48px 20px 56px;
  max-height:min(85vh, 900px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.pricing-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:8px;
  border:2px solid rgba(255,255,255,0.25);
  background:rgba(8,6,14,0.85);
  color:#fff;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-family:system-ui,sans-serif;
}
.pricing-modal-close:hover,
.pricing-modal-close:focus-visible{
  border-color:rgba(233,30,140,0.55);
  color:rgba(255,185,220,0.95);
  outline:none;
}
#pricing-modal .modal-card .pricing-heading{
  color:#fff;
  text-shadow:
    0 0 18px rgba(155,89,255,0.35),
    0 0 28px var(--pricing-pink-soft);
}
.pricing-heading{
  font-family:'Press Start 2P', cursive;
  font-size:clamp(14px, 3.5vw, 22px);
  color:#fff;
  text-align:center;
  margin:0 0 14px 0;
  line-height:1.45;
  text-shadow:
    0 0 18px rgba(155,89,255,0.35),
    0 0 28px var(--pricing-pink-soft);
}
.pricing-sub{
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:clamp(13px, 2.8vw, 16px);
  color:rgba(255,255,255,0.78);
  text-align:center;
  max-width:640px;
  margin:0 auto 40px;
  line-height:1.6;
}
#pricing-modal .pricing-sub strong{
  color:var(--pricing-lavender-strong);
  font-weight:600;
  text-shadow:0 0 12px var(--pricing-pink-mist);
}
.pricing-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(20px, 4vw, 32px);
  align-items:stretch;
}
@media (min-width:768px){
  .pricing-grid{grid-template-columns:1fr 1fr}
}
.pricing-card{
  position:relative;
  background:linear-gradient(165deg, rgba(16,12,24,0.95) 0%, rgba(8,6,14,0.98) 100%);
  border:2px solid rgba(155,89,255,0.22);
  border-radius:16px;
  padding:28px 24px 26px;
  display:flex;
  flex-direction:column;
  box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
/* Quiz pass card — lavender/pink frame (matches tier label vibe) */
.pricing-card:not(.pricing-card--featured){
  border-color:var(--pricing-pass-border);
  background:linear-gradient(165deg, rgba(22,12,28,0.96) 0%, rgba(10,6,16,0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(233,30,140,0.07),
    0 12px 40px rgba(0,0,0,0.38),
    0 0 32px var(--pricing-pink-mist);
}
/* Club = elite tier — same gold language as .upgrade-btn-elite + paywall primary */
@keyframes pricing-card-elite-glow{
  0%,100%{
    border-color:rgba(255,215,0,0.5);
    box-shadow:
      0 0 0 1px rgba(255,235,180,0.2),
      0 0 28px rgba(255,215,0,0.22),
      0 0 44px rgba(255,190,0,0.12),
      0 16px 48px rgba(0,0,0,0.42);
  }
  50%{
    border-color:rgba(255,235,160,0.65);
    box-shadow:
      0 0 0 1px rgba(255,248,210,0.35),
      0 0 38px rgba(255,230,140,0.35),
      0 0 56px rgba(255,200,0,0.18),
      0 16px 48px rgba(0,0,0,0.42);
  }
}
.pricing-card--featured{
  border:2px solid rgba(255,215,0,0.5);
  background:linear-gradient(165deg, rgba(26,22,10,0.97) 0%, rgba(10,8,4,0.99) 100%);
  animation:pricing-card-elite-glow 2.6s ease-in-out infinite;
}
.pricing-badge{
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  font-family:'Press Start 2P', cursive;
  font-size:7px;
  padding:8px 14px;
  border-radius:999px;
  background:#0a0810;
  border:2px solid rgba(255,215,0,0.75);
  color:#ffeaa0;
  text-shadow:0 0 10px rgba(255,220,120,0.55), 0 0 18px rgba(255,200,0,0.3);
  white-space:nowrap;
  max-width:calc(100% - 24px);
  text-align:center;
  line-height:1.4;
}
.pricing-tier-label{
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:13px;
  font-weight:600;
  color:rgba(200,180,255,0.9);
  text-transform:uppercase;
  letter-spacing:0.14em;
  margin:8px 0 12px 0;
}
.pricing-card:not(.pricing-card--featured) .pricing-tier-label{
  color:var(--pricing-lavender-strong);
  text-shadow:0 0 14px var(--pricing-pink-mist);
}
.pricing-tier-label--club{
  font-size:14px;
  color:#ffe566;
  text-shadow:0 0 12px rgba(255,230,100,0.55), 0 0 24px rgba(255,200,0,0.3);
}
.pricing-amount{
  font-family:'Press Start 2P', cursive;
  font-size:clamp(16px, 4vw, 22px);
  color:#fff;
  margin:0 0 16px 0;
  line-height:1.35;
}
.pricing-currency{color:#fff}
.pricing-period{font-size:0.55em;color:rgba(255,255,255,0.65)}
.pricing-amount--club{
  font-size:clamp(14px, 3.2vw, 18px);
  color:#ffe566;
  text-shadow:0 0 14px rgba(255,230,100,0.55), 0 0 30px rgba(255,200,0,0.32);
}
.pricing-desc{
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:14px;
  color:rgba(255,255,255,0.82);
  line-height:1.65;
  margin:0 0 16px 0;
  flex:1;
}
.pricing-bullets{
  margin:0 0 22px 0;
  padding-left:1.15em;
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:13px;
  color:rgba(255,255,255,0.72);
  line-height:1.7;
}
.pricing-bullets li{margin-bottom:6px}
.pricing-cta{
  font-family:'Press Start 2P', cursive;
  font-size:9px;
  padding:14px 18px;
  border-radius:10px;
  cursor:pointer;
  width:100%;
  margin-top:auto;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.pricing-cta--outline{
  background:rgba(12,6,18,0.92);
  border:2px solid rgba(220,170,210,0.45);
  color:rgba(255,245,252,0.95);
}
.pricing-cta--outline:hover{
  border-color:rgba(233,30,140,0.65);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:
    0 0 20px var(--pricing-pink-mist),
    0 0 28px rgba(155,89,255,0.15);
}
/* Same gold fill + shimmer + pulse as header .upgrade-btn-elite */
.pricing-cta--club{
  border:2px solid #fff6c8;
  background:linear-gradient(
    110deg,
    #9a7b0c 0%,
    #c9a227 18%,
    #ffd84d 32%,
    #fff4b8 42%,
    #ffe566 50%,
    #ffd84d 58%,
    #b8860b 82%,
    #7a6208 100%
  );
  background-size:220% 100%;
  color:#1a1304;
  text-shadow:0 1px 0 rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.35);
  letter-spacing:0.04em;
  animation:upgrade-elite-pulse 2.6s ease-in-out infinite, upgrade-gold-shimmer 5s linear infinite;
  transition:transform .2s, border-color .2s, color .2s;
}
.pricing-cta--club:hover{
  transform:translateY(-2px);
  border-color:#fff;
  color:#0d0802;
  background:linear-gradient(
    110deg,
    #b8860b 0%,
    #e6c200 25%,
    #fff8dc 45%,
    #ffec80 55%,
    #ffd700 100%
  );
  background-size:180% 100%;
}

.primary{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  background:var(--neon-blue);
  color:#050507;
  padding:12px 18px;
  border-radius:8px;
  border:2px solid rgba(77,208,225,0.5);
  cursor:pointer;
  box-shadow:0 0 16px rgba(77,208,225,0.3);
  transition:background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.primary:hover{
  background:#5dd9e8;
  border-color:var(--neon-blue);
  box-shadow:0 0 24px rgba(77,208,225,0.5);
  transform:translateY(-2px);
}
.secondary{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  background:rgba(155,89,255,0.08);
  border:2px solid rgba(155,89,255,0.35);
  color:var(--muted);
  padding:12px 18px;
  border-radius:8px;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s, transform .2s;
}
.secondary:hover{
  border-color:var(--neon-purple);
  color:var(--neon-purple);
  background:rgba(155,89,255,0.15);
  transform:translateY(-2px);
}

/* Modal (login) — always on top, centered in viewport, no page scroll */
body.modal-open{overflow:hidden}
.modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow-y:auto;
  background:rgba(0,0,0,0.75);
  -webkit-overflow-scrolling:touch;
}
.modal.hidden{display:none !important}
.modal-card{
  background:var(--panel);
  padding:24px;
  border-radius:8px;
  border:2px solid rgba(233,30,140,0.2);
  width:320px;
  max-width:calc(100vw - 40px);
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  text-align:center;
  margin:auto;
  flex-shrink:0;
}
.modal-card h2{color:var(--neon-pink);font-size:14px;margin:0 0 12px 0}
.modal-card input{
  width:100%;padding:10px;margin:8px 0;border-radius:6px;
  border:2px solid rgba(233,30,140,0.25);
  background:#0b0b0f;
  color:#fff;
}
.modal-card input::placeholder{color:var(--muted)}
.modal-card input:focus{border-color:var(--neon-pink);outline:none;background:#0b0b0f}
.modal-card input:-webkit-autofill,
.modal-card input:-webkit-autofill:hover,
.modal-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:#fff;
  -webkit-box-shadow:0 0 0 1000px #0b0b0f inset;
  box-shadow:0 0 0 1000px #0b0b0f inset;
}
.modal-actions{display:flex;gap:8px;justify-content:center;margin-top:8px}
.modal-card .modal-actions button{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  border:2px solid rgba(255,215,0,0.6);
  background:rgba(255,215,0,0.12);
  color:var(--neon-yellow);
  text-shadow:0 0 12px var(--neon-yellow-glow), 0 0 24px rgba(255,215,0,0.3);
  box-shadow:0 0 16px rgba(255,215,0,0.15), inset 0 0 12px rgba(255,215,0,0.06);
  transition:border-color .2s, color .2s, background .2s, transform .2s, box-shadow .2s, text-shadow .2s;
}
.modal-card .modal-actions button:hover{
  border-color:var(--neon-yellow);
  background:rgba(255,215,0,0.25);
  color:#fff;
  text-shadow:0 0 16px var(--neon-yellow), 0 0 32px var(--neon-yellow-glow);
  box-shadow:0 0 24px rgba(255,215,0,0.4), inset 0 0 16px rgba(255,215,0,0.1);
  transform:translateY(-2px);
}
.modal-divider{text-align:center;color:var(--muted);font-size:10px;margin:14px 0 8px;font-family:'Press Start 2P', cursive}
.btn-google{font-family:'Press Start 2P', cursive;font-size:10px;display:inline-block;padding:10px 14px;border-radius:6px;background:rgba(233,30,140,0.12);border:2px solid rgba(233,30,140,0.35);color:var(--neon-pink);text-decoration:none;transition:border-color .2s, color .2s, background .2s}
.btn-google:hover{border-color:var(--neon-pink);color:#fff;background:rgba(233,30,140,0.25)}
.modal-switch{font-family:'Press Start 2P', cursive;font-size:8px;color:var(--muted);margin:12px 0 0;text-align:center}
.link-btn{font-family:'Press Start 2P', cursive;font-size:8px;background:none;border:none;color:var(--neon-pink);cursor:pointer;padding:0;text-decoration:underline}
.link-btn:hover{color:var(--neon-blue)}
.msg{margin-top:8px;color:#f89090;font-size:10px}

/* ----- Header: Upgrade — filled shiny gold (theme match) ----- */
@keyframes upgrade-elite-pulse{
  0%,100%{
    box-shadow:
      0 0 12px rgba(255,215,0,0.55),
      0 0 28px rgba(255,190,0,0.35),
      0 2px 0 rgba(0,0,0,0.35) inset,
      0 -1px 0 rgba(255,255,255,0.45) inset;
    filter:saturate(1);
  }
  50%{
    box-shadow:
      0 0 18px rgba(255,235,160,0.75),
      0 0 40px rgba(255,200,0,0.45),
      0 2px 0 rgba(0,0,0,0.25) inset,
      0 -1px 0 rgba(255,255,255,0.65) inset;
    filter:saturate(1.15);
  }
}
@keyframes upgrade-gold-shimmer{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
.upgrade-btn-elite{
  font-size:10px !important;
  padding:10px 16px !important;
  min-width:0 !important;
  width:auto !important;
  max-width:none;
  justify-content:center !important;
  border-radius:8px !important;
  border:2px solid #fff6c8 !important;
  /* Rich gold fill + moving highlight */
  background:linear-gradient(
    110deg,
    #9a7b0c 0%,
    #c9a227 18%,
    #ffd84d 32%,
    #fff4b8 42%,
    #ffe566 50%,
    #ffd84d 58%,
    #b8860b 82%,
    #7a6208 100%
  ) !important;
  background-size:220% 100% !important;
  color:#1a1304 !important;
  text-shadow:0 1px 0 rgba(255,255,255,0.55), 0 0 14px rgba(255,255,255,0.35);
  letter-spacing:0.06em;
  font-weight:normal;
  animation:upgrade-elite-pulse 2.6s ease-in-out infinite, upgrade-gold-shimmer 5s linear infinite;
  transition:transform .2s, border-color .2s, color .2s;
}
.upgrade-btn-elite:hover{
  transform:translateY(-2px);
  border-color:#fff !important;
  color:#0d0802 !important;
  background:linear-gradient(
    110deg,
    #b8860b 0%,
    #e6c200 25%,
    #fff8dc 45%,
    #ffec80 55%,
    #ffd700 100%
  ) !important;
  background-size:180% 100% !important;
}

/* ----- Paywall modal — pink title, monospace body, gold elite buttons ----- */
.modal-card--paywall{
  width:min(380px, calc(100vw - 32px));
  max-width:380px;
  padding:26px 22px 22px;
  border-radius:14px;
  border:2px solid rgba(233,30,140,0.35);
  background:linear-gradient(165deg, #0e0c12 0%, #08060c 55%, #0a0810 100%);
  box-shadow:0 0 40px rgba(233,30,140,0.12), 0 20px 50px rgba(0,0,0,0.65);
  text-align:center;
}
.modal-card--paywall .paywall-title{
  margin:0 0 14px 0;
  font-family:'Press Start 2P', cursive;
  font-size:clamp(11px, 2.8vw, 14px);
  line-height:1.5;
  color:#ff3399 !important;
  text-shadow:0 0 14px rgba(255,51,153,0.75), 0 0 28px rgba(233,30,140,0.35);
  letter-spacing:0.04em;
}
.modal-card--paywall .paywall-blurb{
  font-family:ui-monospace, 'Cascadia Code', 'Consolas', monospace;
  font-size:11px;
  line-height:1.65;
  color:#f0f0f0;
  margin:0 0 20px 0;
  text-align:center;
}
.paywall-price{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  color:#ffe566;
  text-shadow:0 0 12px rgba(255,230,100,0.5);
  letter-spacing:0.02em;
}
.paywall-actions{
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:4px;
}
@keyframes paywall-btn-glow{
  0%,100%{ filter:brightness(1); box-shadow:0 0 14px rgba(255,215,0,0.35), 0 0 28px rgba(255,190,0,0.15), inset 0 0 12px rgba(255,220,100,0.06); }
  50%{ filter:brightness(1.08); box-shadow:0 0 20px rgba(255,230,140,0.5), 0 0 40px rgba(255,200,0,0.22), inset 0 0 16px rgba(255,235,160,0.1); }
}
.modal-card--paywall .paywall-actions .paywall-btn{
  font-family:'Press Start 2P', cursive;
  font-size:9px;
  padding:12px 16px;
  border-radius:8px;
  cursor:pointer;
  border:2px solid rgba(255,215,0,0.75);
  background:rgba(20,18,8,0.92);
  color:#ffeaa0;
  text-shadow:0 0 10px rgba(255,220,120,0.85), 0 0 22px rgba(255,200,0,0.35);
  transition:transform .2s, border-color .2s, color .2s;
  animation:paywall-btn-glow 3s ease-in-out infinite;
}
.modal-card--paywall .paywall-actions .paywall-btn--primary{
  padding:12px 18px;
  flex:1 1 auto;
  min-width:140px;
}
.modal-card--paywall .paywall-actions .paywall-btn--secondary{
  flex:0 1 auto;
  opacity:0.95;
}
.modal-card--paywall .paywall-actions .paywall-btn:hover{
  transform:translateY(-2px);
  border-color:#fff2a0;
  color:#fff;
  text-shadow:0 0 14px #fff6c8, 0 0 28px rgba(255,215,0,0.5);
}
.paywall-msg{
  font-family:ui-monospace, 'Consolas', monospace;
  font-size:10px;
  color:#ff8888;
  margin-top:14px;
}

/* Module screen (old pattern: Year → Start Quiz) */
#module-screen{
  min-height:calc(100vh - 70px);
  padding:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #0a0812 0%, #0d0b14 100%);
}
.module-card{
  max-width:480px;
  background:rgba(11,11,15,0.95);
  padding:32px;
  border-radius:10px;
  border:2px solid rgba(155,89,255,0.25);
  font-family:'Press Start 2P', cursive;
  text-align:center;
}
.module-card h2{font-size:18px;color:var(--neon-blue);margin:0 0 12px 0}
.module-card p{font-size:10px;color:var(--muted);margin:0 0 20px 0;line-height:1.8}
.module-card .primary{margin-top:8px}
.module-inner{max-width:720px;background:rgba(11,11,15,0.95);padding:24px;border-radius:8px;border:2px solid rgba(155,89,255,0.2);font-family:'Press Start 2P', cursive}
.module-inner h2{font-size:18px;color:var(--neon-blue);margin:0 0 12px 0}
.module-inner p{font-size:10px;color:var(--muted);margin:0 0 16px 0;line-height:1.8}
.module-actions{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap;align-items:center}
.module-actions button{font-family:'Press Start 2P', cursive;font-size:10px}
.sem-btn{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  color:var(--muted);
  background:rgba(155,89,255,0.06);
  border:2px solid rgba(155,89,255,0.2);
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  transition:border-color .2s, color .2s, background .2s;
}
.sem-btn:hover{border-color:var(--neon-purple);color:var(--neon-blue);background:rgba(155,89,255,0.12)}
.modal-card--upcoming .modal-actions button{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  padding:10px 14px;
  border-radius:6px;
  cursor:pointer;
  border:2px solid var(--yellow-glow-bright);
  background:var(--yellow-fill);
  color:var(--yellow-glow-bright);
  text-shadow:0 0 10px var(--yellow-glow-soft), 0 0 20px rgba(238,244,0,0.4);
  box-shadow:0 0 14px var(--yellow-glow-soft), 0 0 28px rgba(238,244,0,0.25);
  margin-top:8px;
  transition:border-color .2s, color .2s, background .2s, box-shadow .2s;
}
.modal-card--upcoming .modal-actions button:hover{
  border-color:var(--yellow-glow-bright);
  background:#6B5F14;
  color:var(--yellow-glow-bright);
  text-shadow:0 0 14px var(--yellow-glow-bright), 0 0 28px var(--yellow-glow-soft);
  box-shadow:0 0 20px var(--yellow-glow-soft), 0 0 40px rgba(238,244,0,0.35);
}
.upcoming-body{margin-bottom:16px;text-align:center;padding:0 8px}
.upcoming-line{font-family:'Press Start 2P', cursive;font-size:10px;color:var(--muted);margin:0 0 14px 0;line-height:1.9}
.upcoming-body .upcoming-line:first-child{color:var(--neon-blue);font-size:12px;margin-bottom:18px}
.upcoming-body .upcoming-line:last-child{margin-bottom:0}
#upcoming-modal .modal-card h2{color:var(--neon-yellow)}

/* Projects / Unlockables — “coming soon”: Close button matches admin pink (not gold) */
.modal-card--upcoming.modal-card--upcoming-projects .modal-actions button,
.modal-card--upcoming.modal-card--upcoming-unlockables .modal-actions button{
  border:2px solid rgba(236,72,153,0.5);
  background:rgba(236,72,153,0.18);
  color:#fbcfe8;
  text-shadow:0 0 10px rgba(236,72,153,0.35);
  box-shadow:0 0 14px rgba(236,72,153,0.2), inset 0 0 12px rgba(236,72,153,0.06);
}
.modal-card--upcoming.modal-card--upcoming-projects .modal-actions button:hover,
.modal-card--upcoming.modal-card--upcoming-unlockables .modal-actions button:hover{
  border-color:rgba(236,72,153,0.7);
  background:rgba(236,72,153,0.28);
  color:#fff;
  box-shadow:0 0 22px rgba(236,72,153,0.3), inset 0 0 14px rgba(236,72,153,0.1);
}
.modal-card--upcoming.modal-card--upcoming-projects .upcoming-line:last-of-type,
.modal-card--upcoming.modal-card--upcoming-unlockables .upcoming-line:last-of-type{
  color:rgba(252,211,232,0.9);
}

/* Admin modal — full screen (only admin UI for now) */
#admin-modal{
  padding:0;
  align-items:stretch;
  justify-content:stretch;
  background:#0d0a0f;
}
#admin-modal .modal-card--admin{
  width:100%;
  max-width:none;
  height:100%;
  min-height:100vh;
  max-height:none;
  overflow-y:auto;
  padding:32px 40px 40px;
  border:1px solid rgba(236,72,153,0.25);
  border-radius:0;
  box-shadow:none;
  background:#0d0a0f;
  margin:0;
  flex:1;
}

/* Admin modal — minimalist pink, no bombarding */
.modal-card--admin{
  width:94%;
  max-width:680px;
  max-height:90vh;
  overflow-y:auto;
  padding:28px 32px 24px;
  border:1px solid rgba(236,72,153,0.25);
  box-shadow:none;
  background:#0d0a0f;
}
.admin-title{
  font-size:14px;
  color:#f472b6;
  text-shadow:none;
  margin:0 0 24px 0;
  padding-bottom:14px;
  border-bottom:1px solid rgba(236,72,153,0.2);
}
.admin-section{
  margin-bottom:28px;
  padding:20px 0;
  border-top:1px solid rgba(255,255,255,0.06);
}
.admin-section:first-of-type{border-top:none;padding-top:0;margin-top:0}
.admin-section-title{
  font-size:11px;
  color:rgba(255,255,255,0.9);
  text-shadow:none;
  letter-spacing:0.5px;
  margin:0 0 8px 0;
}
.admin-hint{
  font-size:9px;
  color:rgba(255,255,255,0.6);
  text-shadow:none;
  line-height:1.5;
  margin:0 0 16px 0;
}
.admin-hint--sub{
  margin:-8px 0 12px 0;
  font-size:8px;
  color:rgba(255,255,255,0.5);
}
.admin-checkbox-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:9px;
  color:rgba(255,255,255,0.85);
  text-shadow:none;
  line-height:1.45;
  cursor:pointer;
  margin:0 0 4px 0;
}
.admin-checkbox-label input{
  margin-top:2px;
  flex-shrink:0;
  accent-color:#f472b6;
}
.admin-form{display:flex;flex-direction:column;gap:16px}
.admin-row{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-end;
}
.admin-row--half{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.admin-row--options{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
@media (min-width:520px){
  .admin-row--options{grid-template-columns:repeat(4,1fr)}
}
.admin-label{
  display:flex;flex-direction:column;gap:6px;
  font-size:9px;
  color:rgba(255,255,255,0.85);
  text-shadow:none;
  flex:1;
  min-width:0;
}
.admin-label span{font-weight:normal;letter-spacing:0.3px}
.admin-label--full{flex:1 1 100%}
.admin-label--correct{flex:0 1 auto;min-width:140px}
.modal-card--admin .admin-label input,
.modal-card--admin .admin-label select{
  width:100%;
  padding:12px 14px;
  font-size:11px;
  font-family:'Press Start 2P',sans-serif;
  border:1px solid rgba(236,72,153,0.25);
  border-radius:6px;
  background:rgba(20,12,20,0.8);
  color:#fff;
  text-shadow:none;
  transition:border-color .2s;
}
.modal-card--admin .admin-label input:focus,
.modal-card--admin .admin-label select:focus{
  outline:none;
  border-color:rgba(236,72,153,0.5);
  box-shadow:none;
}
.modal-card--admin .admin-label input::placeholder{color:rgba(255,255,255,0.35)}
.modal-card--admin select{color:#fff;cursor:pointer}
.admin-btn{
  font-family:'Press Start 2P',sans-serif;
  font-size:10px;
  padding:12px 20px;
  border-radius:6px;
  cursor:pointer;
  transition:border-color .2s, background .2s;
}
.admin-btn:hover{transform:translateY(-1px)}
.admin-btn--primary{
  background:rgba(236,72,153,0.2);
  border:1px solid rgba(236,72,153,0.45);
  color:#f9a8d4;
  text-shadow:none;
  box-shadow:none;
}
.admin-btn--primary:hover{
  background:rgba(236,72,153,0.3);
  border-color:rgba(236,72,153,0.6);
  color:#fbcfe8;
  text-shadow:none;
  box-shadow:none;
}
.admin-btn--close{
  background:transparent;
  border:1px solid rgba(255,255,255,0.25);
  color:rgba(255,255,255,0.9);
  text-shadow:none;
}
.admin-btn--close:hover{
  background:rgba(255,255,255,0.06);
  border-color:rgba(255,255,255,0.4);
  color:#fff;
  text-shadow:none;
  box-shadow:none;
}
.admin-footer{
  margin-top:8px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;justify-content:center;
}
.admin-msg{
  font-size:9px;
  margin:10px 0 0 0;
  min-height:1.4em;
  color:rgba(255,255,255,0.75);
  text-shadow:none;
}
.admin-bulk-textarea{
  width:100%;
  min-height:220px;
  padding:14px 16px;
  font-size:11px;
  font-family:inherit;
  line-height:1.5;
  border:1px solid rgba(236,72,153,0.25);
  border-radius:6px;
  background:rgba(20,12,20,0.8);
  color:#fff;
  resize:vertical;
  transition:border-color .2s;
}
.admin-bulk-textarea:focus{
  outline:none;
  border-color:rgba(236,72,153,0.5);
}
.admin-bulk-textarea::placeholder{color:rgba(255,255,255,0.35)}
.admin-bulk-answers{
  width:100%;
  min-height:72px;
  padding:10px 14px;
  font-size:11px;
  font-family:inherit;
  line-height:1.6;
  border:1px solid rgba(236,72,153,0.25);
  border-radius:6px;
  background:rgba(20,12,20,0.8);
  color:#fff;
  resize:vertical;
}
.admin-bulk-answers:focus{outline:none;border-color:rgba(236,72,153,0.5)}
.admin-bulk-answers::placeholder{color:rgba(255,255,255,0.35)}
.auth{
  display:flex;
  align-items:center;
  gap:clamp(6px, 1.2vw, 12px);
}
.admin-btn.hidden{display:none}

/* Course locked / in prep popup — red */
.modal-card--locked{
  border-color:rgba(220,60,60,0.6);
  box-shadow:0 0 24px rgba(220,60,60,0.25);
}
.modal-card--locked h2{
  color:#fff;
  text-shadow:none;
}
.modal-card--locked #course-locked-message{
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  color:#e85555;
  text-shadow:0 0 10px rgba(232,85,85,0.5);
  margin:12px 0 20px 0;
  line-height:1.8;
}
.modal-card--locked .modal-actions button{
  border-color:rgba(255,255,255,0.4);
  color:#fff;
}
.modal-card--locked .modal-actions button:hover{
  background:rgba(255,255,255,0.1);
  border-color:#fff;
  color:#fff;
}

/* Map / Stages — full page, treasure map, ranks, circles */
#map-screen{
  min-height:calc(100vh - 70px);
  width:100%;
  box-sizing:border-box;
  padding:24px 20px;
  background:linear-gradient(180deg, #0a0812 0%, #0d0b14 40%, #08060c 100%);
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

#map-screen::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 80% 50% at 50% 0%, rgba(255,215,0,0.04) 0%, transparent 50%);
  pointer-events:none;
}
.map-container{max-width:1400px;width:100%;margin:0 auto;position:relative;z-index:1}
.map-header{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  margin-bottom:32px;
  position:relative;
}
.map-header-text{
  text-align:center;
}
.map-header h2{font-size:20px;color:var(--neon-yellow);margin:0 0 6px 0;text-shadow:0 0 20px rgba(255,215,0,0.3)}
.map-header p{font-size:10px;color:var(--muted);margin:0 0 16px 0}
.map-back-btn{
  font-family:'Press Start 2P', cursive;
  font-size:9px;
  padding:8px 12px;
  background:transparent;
  border:2px solid rgba(155,89,255,0.4);
  color:var(--muted);
  border-radius:6px;
  cursor:pointer;
  position:absolute;
  left:0;
  top:0;
}
.map-back-btn:hover{border-color:var(--neon-purple);color:var(--neon-purple)}

.map-quiz-search-row{
  width:100%;
  max-width:560px;
  margin:0 auto 24px;
  padding:0 12px;
  box-sizing:border-box;
  position:relative;
}
.map-quiz-search-label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.map-quiz-search-input{
  width:100%;
  box-sizing:border-box;
  font-family:'Press Start 2P',sans-serif;
  font-size:8px;
  line-height:1.5;
  padding:14px 18px;
  min-height:48px;
  border-radius:999px;
  border:2px solid rgba(77,208,225,0.45);
  background:rgba(6,8,14,0.85);
  color:#fff;
  caret-color:var(--neon-blue);
  outline:none;
  box-shadow:0 4px 24px rgba(0,0,0,0.35);
  transition:border-color .2s, box-shadow .2s, text-align .15s ease-out;
}
.map-quiz-search-input:placeholder-shown{
  text-align:center;
}
.map-quiz-search-input:not(:placeholder-shown){
  text-align:left;
}
.map-quiz-search-input::placeholder{
  color:rgba(255,255,255,0.42);
  font-size:7px;
}
.map-quiz-search-input:hover{
  border-color:rgba(77,208,225,0.65);
  box-shadow:0 0 16px rgba(77,208,225,0.12), 0 4px 24px rgba(0,0,0,0.35);
}
.map-quiz-search-input:focus{
  border-color:var(--neon-blue);
  box-shadow:0 0 18px rgba(77,208,225,0.25);
}

@keyframes float{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}
@keyframes pop{
  0%{transform:scale(1); opacity:1}
  50%{transform:scale(1.4); opacity:0.8}
  100%{transform:scale(2); opacity:0}
}

.map-nodes{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  padding:20px 0;
}
.map-node{
  width:140px;
  height:140px;
  border-radius:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-family:'Press Start 2P', cursive;
  text-align:center;
  transition:transform .2s, box-shadow .2s, filter .2s;
  border:3px solid;
  position:relative;
  animation:float 3s ease-in-out infinite;
}
.map-node:nth-child(2){animation-delay:0.4s}
.map-node:nth-child(3){animation-delay:0.8s}
.map-node:nth-child(4){animation-delay:1.2s}
.map-node:hover{animation:none; transform:scale(1.08)}
.map-node--popping{
  animation:pop 0.4s ease-out forwards;
  pointer-events:none;
}
.map-node-rank{
  font-size:14px;
  opacity:0.9;
  margin-bottom:6px;
}
.map-node-name{font-size:9px;line-height:1.4;padding:0 8px}
.map-node--sem{
  background:linear-gradient(145deg, #1a1628 0%, #0f0d18 100%);
  border-color:rgba(155,89,255,0.5);
  color:var(--neon-blue);
  box-shadow:0 0 24px rgba(155,89,255,0.2), inset 0 0 30px rgba(155,89,255,0.05);
}
.map-node--sem:hover{box-shadow:0 0 32px rgba(155,89,255,0.35)}
.map-node--sem .map-node-rank{color:var(--neon-purple)}
.map-node--year{
  width:160px;
  height:160px;
  background:linear-gradient(145deg, #1a1525 0%, #0f0c18 100%);
  border-color:rgba(155,89,255,0.55);
  color:var(--neon-blue);
  box-shadow:0 0 28px rgba(155,89,255,0.25), inset 0 0 36px rgba(155,89,255,0.06);
}
.map-node--year:hover{box-shadow:0 0 36px rgba(155,89,255,0.4)}
.map-node--year .map-node-rank{color:var(--neon-purple)}
.map-node--module{
  background:linear-gradient(145deg, #1c1a0a 0%, #0f0e06 100%);
  border-color:rgba(255,215,0,0.45);
  color:var(--yellow-glow-bright);
  box-shadow:0 0 24px rgba(255,215,0,0.2), inset 0 0 30px rgba(255,215,0,0.06);
}
.map-node--module:hover{box-shadow:0 0 32px rgba(255,215,0,0.35)}
.map-node--module .map-node-rank{color:var(--neon-yellow)}
.map-node--quiz{
  width:120px;
  height:120px;
  background:linear-gradient(145deg, #0a1820 0%, #061016 100%);
  border-color:rgba(77,208,225,0.5);
  color:var(--neon-blue);
  box-shadow:0 0 20px rgba(77,208,225,0.2), inset 0 0 24px rgba(77,208,225,0.05);
}
.map-node--quiz:hover{box-shadow:0 0 28px rgba(77,208,225,0.4)}
.map-node--quiz .map-node-rank{color:var(--neon-blue)}
.map-node--locked{
  opacity:0.6;
  cursor:not-allowed;
  filter:grayscale(0.5);
}
.map-node--locked:hover{transform:none;box-shadow:none}
.map-node--locked{animation:none}

/* Quiz cards (when picking a quiz in a module) — image + details, click to play */
/* Quiz cards: 1 col ≤520px, 2 cols tablet, 3+ desktop */
.map-quiz-cards{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px, 4vw, 28px);
  padding:clamp(12px, 3vw, 24px) 0 12px;
  width:100%;
  max-width:none;
  margin:0 auto;
}
@media (min-width:521px){
  .map-quiz-cards{grid-template-columns:repeat(2, minmax(0, 1fr))}
}
@media (min-width:901px){
  .map-quiz-cards{grid-template-columns:repeat(3, minmax(0, 1fr))}
}
.quiz-card{
  background:linear-gradient(180deg, rgba(14,12,18,0.98) 0%, rgba(8,8,12,0.98) 100%);
  border:2px solid rgba(77,208,225,0.25);
  border-radius:12px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  cursor:pointer;
  transition:border-color .25s, box-shadow .25s, transform .2s;
}
.quiz-card:hover{
  border-color:rgba(77,208,225,0.5);
  box-shadow:0 0 28px rgba(77,208,225,0.2);
  transform:translateY(-4px);
}
.map-card--highlight{
  border-color:rgba(233,30,140,0.75) !important;
  box-shadow:0 0 36px rgba(233,30,140,0.25) !important;
}
.map-card--dragging{
  opacity:0.55;
  transform:scale(0.98);
}
.study-card{
  border-color:rgba(255,215,0,0.35);
}
.study-card:hover{
  border-color:rgba(255,215,0,0.6);
  box-shadow:0 0 30px rgba(255,215,0,0.2);
}
.study-card .quiz-card-badge{
  color:#ffe566;
}
.study-card-image{
  background:
    linear-gradient(135deg, rgba(255,215,0,0.22) 0%, rgba(155,89,255,0.12) 100%),
    linear-gradient(135deg, #0a1820 0%, #0d1a28 50%, #061016 100%);
}
.quiz-card-image{
  height:170px;
  flex-shrink:0;
  background:linear-gradient(135deg, #0a1820 0%, #0d1a28 50%, #061016 100%);
  background-size:cover;
  background-position:center;
}
.quiz-card-body{
  padding:22px 20px 24px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.quiz-card-label{
  font-size:8px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.12em;
}
.quiz-card-title{
  font-size:12px;
  color:#fff;
  margin:0;
  line-height:1.4;
}
.quiz-card-meta{
  font-size:9px;
  color:var(--neon-blue);
  margin:0;
}
.quiz-card-badge{
  font-size:8px;
  color:var(--neon-yellow);
  margin-top:4px;
  align-self:flex-start;
}
.map-quiz-empty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
}
.map-quiz-empty p{margin:0 0 12px 0;font-size:11px}
.map-quiz-empty-hint{font-size:9px;opacity:0.85}

/* Quiz screen: flashcard — one Q at a time, no scroll during quiz */
#quiz-screen{
  display:flex;
  align-items:stretch;
  justify-content:flex-start;
  min-height:calc(100vh - 70px);
  padding:24px 20px;
  overflow:auto;
  width:100%;
}
/* Quiz inside map: fill map area exactly */
#map-screen #quiz-screen.quiz-inside-map{
  position:absolute;
  inset:0;
  min-height:auto;
  z-index:3;
  background:linear-gradient(180deg, #0a0812 0%, #0d0b14 40%, #08060c 100%);
  padding:12px 8px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
/* Safety net: hidden quiz overlay must not block map/cards */
#quiz-screen.hidden{
  display:none !important;
  pointer-events:none !important;
}
#map-screen{ z-index:1; }
#map-container{ z-index:2; position:relative; }
#quiz-card{
  width:100%;
  max-width:1100px;
  max-height:none;
  background:linear-gradient(180deg,#07070a,#0b0b0f);
  padding:28px;
  border-radius:10px;
  border:2px solid rgba(155,89,255,0.08);
  display:flex;
  flex-direction:column;
  overflow:visible;
  margin:0 auto;
}
/* Results: use almost full map width — less empty space left/right */
#quiz-card:has(#quiz-results-view:not(.hidden)){
  max-width:min(1600px, calc(100vw - 16px));
  width:100%;
  padding:clamp(16px, 2.5vw, 28px);
}
#quiz-play-view{display:flex;flex-direction:column;min-height:0;flex:1}
#question-area{
  padding:10px 0;
  min-height:180px;
  overflow:visible;
  flex:0 0 auto;
}
#question-text{
  font-size:16px;
  color:var(--neon-blue);
  margin-bottom:18px;
  font-family:'Press Start 2P', cursive;
  line-height:1.7;
  white-space:pre-wrap;
  word-break:break-word;
}
#question-text.has-code{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  color:#e8f6ff;
}
#options{display:flex;flex-direction:column;gap:12px}
.option-btn{
  font-family:'Press Start 2P', cursive;
  background:#111;
  border:2px solid rgba(155,89,255,0.06);
  color:var(--muted);
  padding:12px;
  border-radius:8px;
  cursor:pointer;
  text-align:left;
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap;
  word-break:break-word;
}
.option-btn:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* XP / score bar */
#scoreboard{margin-top:18px;text-align:center;flex-shrink:0}
#xp-bar{width:100%;height:18px;background:#07070a;border:2px solid rgba(155,89,255,0.06);border-radius:6px;overflow:hidden}
#xp-fill{height:100%;width:0;background:linear-gradient(90deg,var(--neon-purple),var(--neon-blue));transition:width .5s ease}
#xp-text{margin-top:8px;color:var(--muted);font-size:12px}

#quiz-footer{display:flex;justify-content:flex-end;margin-top:14px;flex-shrink:0}
#quiz-footer button{background:transparent;border:2px solid rgba(155,89,255,0.08);color:var(--muted);padding:8px 12px;border-radius:6px;cursor:pointer;font-family:'Press Start 2P', cursive}

/* Results: scroll whole #quiz-screen — no inner overflow trap */
#quiz-results-view{
  display:flex;
  flex-direction:column;
  width:100%;
  flex:0 1 auto;
  min-height:auto;
  overflow:visible;
}
#quiz-results-view h2{font-size:14px;color:var(--neon-blue);margin:0 0 8px 0}
#quiz-results-marks{font-size:11px;color:rgba(255,255,255,0.75);margin:0 0 14px 0;line-height:1.5}

.quiz-results-rating{
  text-align:center;
  margin-bottom:14px;
  padding:12px 10px 14px;
  border-radius:12px;
  background:rgba(0,0,0,0.22);
  border:1px solid rgba(155,89,255,0.12);
  flex-shrink:0;
}
.quiz-results-hearts-row{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:clamp(8px,2vw,14px);
  margin-bottom:10px;
  min-height:40px;
}
.quiz-results-hearts-row .pixel-heart-wrap{
  display:block;
  line-height:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.quiz-results-hearts-row .pixel-heart-svg{
  width:36px;
  height:auto;
  display:block;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
.quiz-results-big-heart{
  display:flex;
  justify-content:center;
  margin-bottom:10px;
  animation:quiz-big-heart-pulse 2.2s ease-in-out infinite;
}
.quiz-results-big-heart .pixel-heart-wrap{line-height:0;filter:drop-shadow(0 0 24px rgba(211,47,47,0.55));}
.quiz-results-big-heart .pixel-heart-svg{
  width:min(120px, 28vw);
  height:auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
}
@keyframes quiz-big-heart-pulse{
  0%,100%{transform:scale(1);filter:brightness(1)}
  50%{transform:scale(1.04);filter:brightness(1.08)}
}
/* Score line under hearts — 8-bit font + neon color per tier */
.quiz-results-comment{
  font-family:'Press Start 2P', cursive;
  font-size:clamp(7px, 2.1vw, 10px);
  font-weight:normal;
  margin:0;
  line-height:1.75;
  max-width:min(920px, 100%);
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  letter-spacing:0.04em;
  word-break:break-word;
}
.quiz-results-comment--brutal{
  color:#ff3399;
  text-shadow:0 0 10px rgba(255,51,153,0.6), 0 0 22px rgba(255,0,127,0.3);
}
.quiz-results-comment--rough{
  color:#ff66b2;
  text-shadow:0 0 10px rgba(255,102,178,0.45), 0 0 20px rgba(255,51,153,0.2);
}
.quiz-results-comment--fight{
  color:#f0abfc;
  text-shadow:0 0 10px rgba(232,121,249,0.4);
}
.quiz-results-comment--solid{
  color:#7dd3fc;
  text-shadow:0 0 10px rgba(125,211,252,0.45);
}
.quiz-results-comment--strong{
  color:var(--neon-blue);
  text-shadow:0 0 12px rgba(77,208,225,0.55), 0 0 24px rgba(77,208,225,0.2);
}
.quiz-results-comment--elite{
  color:#5eead4;
  text-shadow:0 0 12px rgba(94,234,212,0.5), 0 0 20px rgba(45,212,191,0.25);
}
.quiz-results-comment--legend{
  color:#ffe566;
  text-shadow:0 0 12px rgba(255,230,100,0.55), 0 0 28px rgba(255,215,0,0.3);
}

.quiz-review-tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom:12px;
  flex-shrink:0;
}
.quiz-review-tab{
  font-family:'Press Start 2P', cursive;
  font-size:8px;
  padding:12px 16px;
  border-radius:10px;
  cursor:pointer;
  border:2px solid rgba(255,255,255,0.15);
  background:rgba(255,255,255,0.04);
  color:var(--muted);
  transition:border-color .2s, background .2s, color .2s, box-shadow .2s;
}
/* Mistakes tab — admin hot magenta (matches header / Create quiz pink) */
.quiz-review-tab--wrong{
  border-color:rgba(255,51,153,0.55);
  color:#ff66b2;
  text-shadow:0 0 12px rgba(255,51,153,0.35);
}
.quiz-review-tab--wrong.quiz-review-tab--active{
  border-color:#ff3399;
  background:rgba(255,51,153,0.14);
  color:#ff99cc;
  box-shadow:0 0 20px rgba(255,51,153,0.35), 0 0 36px rgba(255,0,127,0.12);
}
.quiz-review-tab--right.quiz-review-tab--active{
  border-color:rgba(45,212,191,0.55);
  background:rgba(45,212,191,0.1);
  color:#99f6e4;
  box-shadow:0 0 16px rgba(45,212,191,0.12);
}
.quiz-review-tab:not(.quiz-review-tab--active):hover{
  border-color:rgba(155,89,255,0.35);
  color:#fff;
}
.quiz-review-tab--wrong:not(.quiz-review-tab--active):hover{
  border-color:rgba(255,51,153,0.75);
  color:#ff99dd;
}

.quiz-review{
  width:100%;
  flex:0 1 auto;
  overflow:visible;
  max-height:none;
  min-height:auto;
  padding-right:0;
  position:relative;
}
.quiz-review-panel{
  min-height:24px;
  width:100%;
}
.review-study-card{
  margin-bottom:14px;
  padding:0;
  border-radius:12px;
  background:transparent;
  width:100%;
  max-width:100%;
}
/* Mistakes: plain question + neutral wrong options; only correct row is pink */
.review-study-card--wrong .review-study-bundle{
  border-left:3px solid rgba(255,51,153,0.45);
  background:rgba(8,8,14,0.72);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);
}
.review-study-card--wrong .review-block-label{
  color:rgba(255,255,255,0.5);
  text-shadow:none;
}
.review-study-card--wrong .review-bundle-q{
  color:#fff;
  text-shadow:none;
}
.review-study-card--wrong .review-option--correct{
  background:rgba(255,51,153,0.22);
  color:#ff66b2;
  border:1px solid rgba(255,51,153,0.75);
  box-shadow:0 0 16px rgba(255,51,153,0.28);
  text-shadow:0 0 10px rgba(255,51,153,0.4);
}
.review-study-card--right .review-study-bundle{
  border-left:4px solid #2dd4bf;
  box-shadow:inset 0 0 0 1px rgba(45,212,191,0.1);
}
.review-study-bundle{
  background:rgba(8,8,14,0.72);
  border-radius:0 12px 12px 0;
  padding:14px 16px 16px 18px;
}
.review-block-label{
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  color:rgba(255,255,255,0.5);
  margin:0 0 8px 0;
}
.review-bundle-q{
  font-family:ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size:clamp(11px, 2.4vw, 13px);
  line-height:1.55;
  color:#fff;
  white-space:pre-wrap;
  word-break:break-word;
  margin:0 0 12px 0;
  padding:0;
}
.review-options{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:0;
}
.review-option{
  padding:8px 12px;
  border-radius:8px;
  background:rgba(255,255,255,0.05);
  color:rgba(255,255,255,0.9);
  font-size:clamp(10px, 2.2vw, 12px);
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word;
  font-family:ui-monospace, 'Cascadia Code', Consolas, monospace;
  border:1px solid rgba(255,255,255,0.08);
}
.review-option--correct{
  background:rgba(6,78,59,0.42);
  color:#5eead4;
  border:1px solid rgba(45,212,191,0.55);
  box-shadow:0 0 12px rgba(45,212,191,0.1);
}
.review-none{
  font-family:ui-sans-serif, system-ui, sans-serif;
  font-size:12px;
  color:rgba(255,255,255,0.5);
  margin:8px 0 0 0;
  line-height:1.5;
}
#quiz-results-view .modal-actions{margin-top:16px;flex-shrink:0}
#quiz-results-view .modal-actions button{
  font-family:'Press Start 2P', cursive;
  background:linear-gradient(180deg,#f8fafc 0%,#e2e8f0 100%);
  color:#0f172a;
  border:2px solid rgba(255,255,255,0.5);
  padding:10px 20px;
  border-radius:8px;
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,0.25);
}
#quiz-results-view .modal-actions button:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
}

/* Utility */
.hidden{display:none !important}

/* Footer — dark panel, neon accents, multi-column (Codédex-inspired) */
#site-footer{
  background:var(--panel);
  border-top:2px solid rgba(155,89,255,0.2);
  margin-top:48px;
  padding:40px 24px 24px;
}
.footer-inner{
  max-width:1200px;
  margin:0 auto;
}
.footer-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:32px;
  padding-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-brand{display:flex;flex-direction:column;gap:4px}
.footer-logo{
  font-size:18px;
  color:var(--neon-purple);
  letter-spacing:2px;
}
.footer-tag{font-size:9px;color:var(--muted)}
.footer-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 48px;
  margin-bottom:32px;
}
@media (max-width:720px){
  .footer-columns{grid-template-columns:1fr}
}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-title{
  font-size:10px;
  color:var(--neon-blue);
  text-transform:uppercase;
  letter-spacing:1px;
  margin:0 0 4px 0;
}
.footer-link{
  font-size:9px;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}
.footer-link:hover{color:var(--neon-blue)}
.footer-link[data-open-pricing="1"]{
  color:var(--neon-pink);
}
.footer-link[data-open-pricing="1"]:hover{
  color:#ff6baf;
  text-shadow:0 0 10px rgba(233,30,140,0.4);
}
.footer-link-inline{
  font-size:9px;
  color:var(--muted);
  text-decoration:none;
  transition:color .2s;
}
.footer-link-inline:hover{color:var(--neon-blue)}
.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.footer-copy{font-size:8px;color:var(--muted);margin:0}
.footer-copy .footer-link-inline{margin:0 .2em}
.footer-build{margin:6px 0 0;text-align:center}
.footer-build-link{font-size:7px;color:var(--muted);opacity:.55;text-decoration:none}
.footer-build-link:hover{opacity:.85;text-decoration:underline}

/* Floating "message from creator" trigger (footer zone, fixed) */
@keyframes creator-fab-burst{
  0%, 70%, 100%{
    transform:translateY(0) scale(1);
    box-shadow:
      0 4px 0 rgba(0,0,0,0.25),
      0 8px 24px rgba(0,0,0,0.45),
      0 0 20px rgba(255,215,0,0.35),
      0 0 0 0 rgba(255,224,102,0.48);
  }
  76%{
    transform:translateY(-1px) scale(1.04);
    box-shadow:
      0 5px 0 rgba(0,0,0,0.22),
      0 12px 30px rgba(0,0,0,0.52),
      0 0 30px rgba(255,230,120,0.58),
      0 0 0 10px rgba(255,224,102,0.2);
  }
  84%{
    transform:translateY(-2px) scale(1.08);
    box-shadow:
      0 6px 0 rgba(0,0,0,0.2),
      0 14px 34px rgba(0,0,0,0.56),
      0 0 38px rgba(255,235,150,0.72),
      0 0 0 18px rgba(255,224,102,0.08);
  }
}
@keyframes creator-fab-icon-pop{
  0%, 72%, 100%{transform:scale(1)}
  80%{transform:scale(1.16)}
  88%{transform:scale(1.02)}
}
.creator-message-fab{
  position:fixed;
  right:max(16px, env(safe-area-inset-right));
  bottom:max(20px, env(safe-area-inset-bottom));
  z-index:9980;
  width:56px;
  height:56px;
  border-radius:50%;
  border:3px solid rgba(0,0,0,0.35);
  background:linear-gradient(145deg, #ffe566 0%, #ffd700 45%, #e6ac00 100%);
  box-shadow:
    0 4px 0 rgba(0,0,0,0.25),
    0 8px 24px rgba(0,0,0,0.45),
    0 0 20px rgba(255,215,0,0.35);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  transition:transform .15s, box-shadow .15s;
  animation:creator-fab-burst 3.2s ease-in-out infinite;
}
.creator-message-fab:hover,
.creator-message-fab:focus-visible{
  transform:translateY(-2px);
  box-shadow:
    0 6px 0 rgba(0,0,0,0.2),
    0 12px 28px rgba(0,0,0,0.5),
    0 0 28px rgba(255,230,120,0.5);
  outline:none;
}
.creator-message-fab:active{transform:translateY(1px)}
.creator-message-fab-icon{
  font-size:26px;
  line-height:1;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,0.4));
  animation:creator-fab-icon-pop 3.2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .creator-message-fab,
  .creator-message-fab-icon{
    animation:none;
  }
}

/* Creator message modal: green + black (wide enough for long lines) */
#creator-message-modal.modal{
  padding:clamp(16px, 4vw, 36px);
}
#creator-message-modal .modal-card--creator-message{
  position:relative;
  width:min(820px, calc(100vw - 40px));
  max-width:820px;
  padding:0;
  border-radius:14px;
  border:2px solid rgba(46,204,113,0.55);
  background:linear-gradient(180deg, #0a120c 0%, #050807 50%, #020403 100%);
  text-align:left;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(46,204,113,0.12),
    0 0 48px rgba(39,174,96,0.2),
    0 24px 64px rgba(0,0,0,0.6);
}
#creator-message-modal .creator-message-scroll{
  max-height:min(88vh, 880px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:48px clamp(24px, 4vw, 40px) 36px;
  font-family:system-ui, 'Segoe UI', Roboto, sans-serif;
  font-size:15px;
  line-height:1.62;
  color:#e8f0ea;
}
.creator-message-modal-close{
  position:absolute;
  top:10px;
  right:12px;
  z-index:3;
  width:40px;
  height:40px;
  border-radius:8px;
  border:2px solid rgba(46,204,113,0.4);
  background:rgba(5,12,8,0.92);
  color:#b8f5c8;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .2s, color .2s, background .2s;
}
.creator-message-modal-close:hover,
.creator-message-modal-close:focus-visible{
  border-color:rgba(80,220,140,0.85);
  color:#fff;
  background:rgba(12,28,18,0.95);
  outline:none;
}
.creator-message-heading{
  font-family:'Press Start 2P', cursive;
  font-size:clamp(12px, 2.4vw, 16px);
  line-height:1.55;
  color:#7bed9f;
  text-shadow:0 0 18px rgba(46,204,113,0.35);
  margin:0 0 22px 0;
  padding-bottom:16px;
  padding-right:44px;
  border-bottom:1px solid rgba(46,204,113,0.25);
}
.creator-message-section-title{
  font-family:'Press Start 2P', cursive;
  font-size:clamp(8px, 1.1vw, 10px);
  line-height:1.5;
  color:#55e08a;
  text-transform:uppercase;
  letter-spacing:0.06em;
  margin:22px 0 10px 0;
}
.creator-message-section-title:first-of-type{margin-top:0}
.creator-message-list{
  margin:0 0 0 1.25em;
  padding:0;
  color:#d5e8da;
}
.creator-message-list li{margin:0 0 12px 0}
.creator-message-list a{
  color:#7bed9f;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:3px;
}
.creator-message-list a:hover{color:#b8f5c8}
.creator-message-closing{
  margin:24px 0 0 0;
  font-family:'Press Start 2P', cursive;
  font-size:10px;
  line-height:1.6;
  color:#ffd700;
  text-shadow:0 0 12px rgba(255,215,0,0.25);
}

/* After login: hero and course cards hidden; user sees map/quizzes only */
body.user-logged-in #hero{display:none !important}
body.user-logged-in #hero-content{display:none !important}
body.user-logged-in #courses-section{display:none !important}

/* ========== Responsive: ≤900px nav drawer, tap targets, typography ========== */
@media (max-width:900px){
  body.user-logged-in .nav-menu-toggle{display:flex}
  body.user-logged-in #main-nav{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(320px, 88vw);
    flex:0 0 auto;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:12px;
    padding:calc(var(--header-pad-y) + 58px) 16px 24px;
    margin:0;
    background:linear-gradient(180deg, #0b0b12 0%, #07070a 100%);
    border-right:1px solid rgba(155,89,255,0.22);
    box-shadow:8px 0 36px rgba(0,0,0,0.5);
    z-index:120;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateX(-100%);
    transition:transform .22s ease-out;
  }
  body.user-logged-in.nav-drawer-open #main-nav{transform:translateX(0)}
  body.nav-drawer-open{overflow:hidden}
  /* Keep header + hamburger above dim overlay so menu can close */
  body.nav-drawer-open #site-header{z-index:125}

  .year-select-panel{
    position:static;
    opacity:1;
    transform:none;
    pointer-events:auto;
    width:100%;
    max-width:none;
    margin-top:8px;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12);
  }
  .year-select:not(.open) .year-select-panel{
    display:none;
  }
  .year-select.open .year-select-panel{display:block}

  .nav-btn:not(.year-select-toggle){
    min-height:var(--tap-min);
    padding:12px 14px;
  }
  .year-select-toggle{
    min-height:var(--tap-min);
    width:100%;
    justify-content:space-between;
  }
  .year-select-option,.year-select-sem{
    min-height:var(--tap-min);
    display:flex;
    align-items:center;
  }

  .option-btn{
    min-height:var(--tap-min);
    padding:14px;
    font-size:clamp(11px, 3.2vw, 13px);
  }
  #question-text{font-size:clamp(12px, 3.6vw, 16px)}
  #question-text.has-code{font-size:clamp(10px, 3vw, 14px)}
  #quiz-footer button{
    min-height:var(--tap-min);
    padding:12px 18px;
    font-size:clamp(9px, 2.5vw, 10px);
  }
  #quiz-card{padding:clamp(16px, 4vw, 28px)}
  .quiz-card-image{height:clamp(120px, 32vw, 170px)}
  .map-clear-filter{
    min-height:var(--tap-min);
    padding:10px 14px;
    font-size:clamp(8px, 2.2vw, 9px);
  }
  .map-quiz-search-input{
    min-height:var(--tap-min);
    font-size:clamp(7px, 2vw, 8px);
  }
  .primary,.secondary{min-height:var(--tap-min)}
  .auth button{min-height:var(--tap-min);padding:12px 16px}
  #quiz-screen{padding:16px clamp(12px, 4vw, 20px)}
  #module-screen{padding:clamp(16px, 5vw, 40px)}
}

@media (min-width:901px){
  body.user-logged-in #main-nav{
    position:static;
    width:auto;
    height:auto;
    transform:none;
    transition:none;
    flex-direction:row;
    align-items:center;
    padding:0;
    margin:0;
    background:transparent;
    border:none;
    box-shadow:none;
    overflow:visible;
  }
  body.nav-drawer-open{overflow:auto}
  .nav-drawer-overlay{display:none!important}
}

@media (max-width:520px){
  .hero-content .hero-title{font-size:clamp(16px, 5.5vw, 28px)}
  .hero-content .hero-sub{font-size:clamp(8px, 2.6vw, 12px)}
  .courses-heading{font-size:clamp(14px, 4vw, 18px)}
}