:root{
  --bg:#111529;--panel:#191f3d;--cream:#fbf6e8;--text:#f8f8ff;--muted:#aeb6d9;--ink:#25283d;
  --accent:#7b61ff;--accent2:#18d6c7;--gold:#ffd36a;--danger:#ff5f7e;--radius:28px;
  --shadow:0 24px 80px rgba(0,0,0,.28);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:radial-gradient(circle at 15% 10%,rgba(123,97,255,.38),transparent 32rem),radial-gradient(circle at 85% 12%,rgba(24,214,199,.18),transparent 30rem),linear-gradient(180deg,#10142a,#151938 50%,#0f1222)}a{color:inherit;text-decoration:none}.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px clamp(18px,4vw,56px);background:rgba(15,18,34,.86);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.08)}.brand{display:flex;align-items:center;gap:12px;min-width:max-content}.logo-mark{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;font-weight:1000;letter-spacing:-.08em;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 10px 25px rgba(24,214,199,.2)}.brand strong{display:block;font-size:1.1rem}.brand em{display:block;font-size:.72rem;color:var(--muted);font-style:normal}.site-header nav{display:flex;gap:16px;flex-wrap:wrap;justify-content:center}.site-header nav a,.site-footer nav a{color:var(--muted);font-size:.92rem}.site-header nav a:hover,.site-footer nav a:hover{color:white}.section-wrap{width:min(1180px,calc(100% - 32px));margin:0 auto}.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,430px);gap:42px;align-items:center;padding:64px 0 44px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:.75rem;font-weight:900;color:var(--gold);margin:0 0 10px}h1,h2,h3{margin:0;line-height:1.04}h1{font-size:clamp(3rem,7vw,6.6rem);letter-spacing:-.07em}h2{font-size:clamp(1.8rem,3vw,3rem);letter-spacing:-.045em}h3{font-size:1.35rem;letter-spacing:-.025em}.lead,.support,.info-page p,.article-card p{font-size:1.05rem;color:var(--muted);line-height:1.68}.primary-btn,.secondary-btn,.ghost-btn{border:0;border-radius:999px;padding:12px 18px;font-weight:900;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary-btn{color:white;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 14px 34px rgba(24,214,199,.18)}.secondary-btn,.ghost-btn{color:white;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}.small{padding:9px 13px;font-size:.88rem}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.memory-orb{min-height:420px;position:relative;display:grid;place-items:center;border-radius:40px;background:radial-gradient(circle at center,rgba(255,255,255,.14),transparent 42%),linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);overflow:hidden}.orbit{position:absolute;inset:38px;border:1px solid rgba(255,255,255,.16);border-radius:50%;animation:spin 22s linear infinite}.orbit-two{inset:78px;animation-direction:reverse;animation-duration:17s}.orbit span{position:absolute;font-size:2rem}.orbit span:nth-child(1){top:-18px;left:47%}.orbit span:nth-child(2){right:-14px;top:47%}.orbit span:nth-child(3){bottom:-14px;left:18%}.orb-core{width:205px;height:205px;border-radius:50%;display:grid;place-items:center;text-align:center;background:linear-gradient(145deg,#fff7d0,#faf7ff);color:var(--ink);box-shadow:0 30px 70px rgba(0,0,0,.26)}.core-logo{font-size:4rem;font-weight:1000;letter-spacing:-.12em;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;color:transparent}@keyframes spin{to{transform:rotate(360deg)}}.ad-zone{border:1px dashed rgba(255,255,255,.22);background:rgba(255,255,255,.045);color:var(--muted);border-radius:20px;display:grid;place-items:center;text-align:center;min-height:90px;padding:14px}.ad-zone span{text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;color:rgba(255,255,255,.55)}.ad-top{width:min(970px,calc(100% - 32px));margin:22px auto 0}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:28px;align-items:start}.quiz-card,.stats-card,.info-page,.article-card,.mode-card{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.11);border-radius:var(--radius);box-shadow:var(--shadow)}.quiz-card,.stats-card,.info-page,.article-card{padding:26px;margin-bottom:26px}.card-head{display:flex;justify-content:space-between;gap:18px;align-items:start}.pill{display:inline-flex;border-radius:999px;padding:8px 12px;background:rgba(255,211,106,.16);color:var(--gold);font-weight:900}.decade-grid,.mode-grid,.seo-grid,.epic-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.mode-card{padding:22px;text-align:left;cursor:pointer;transition:.2s}.mode-card:hover{transform:translateY(-3px);background:linear-gradient(135deg,rgba(123,97,255,.38),rgba(24,214,199,.18))}.mode-icon{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:rgba(255,255,255,.11);font-size:1.35rem;margin-bottom:14px}.mode-card strong{display:block;font-size:1.15rem;margin-bottom:8px}.mode-card em{font-style:normal;color:var(--muted);line-height:1.45}.question-box{margin-top:20px;padding:22px;border-radius:22px;background:var(--cream);color:var(--ink)}.question-meta{display:flex;justify-content:space-between;gap:10px;color:#6d7187;font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.question-box h3{font-size:1.55rem;margin:14px 0 18px;color:#20233a}.choices{display:grid;gap:10px}.choice{width:100%;padding:14px 16px;border-radius:16px;border:1px solid #ddd8ce;background:#fff;color:#25283d;text-align:left;font-weight:800;cursor:pointer}.choice:hover{border-color:#7b61ff;background:#f5f2ff}.choice.correct{background:#dcfff8;border-color:#18d6c7}.choice.wrong{background:#ffe8ee;border-color:#ff5f7e}.explanation{display:none;margin:16px 0 0;color:#52576b;line-height:1.55}.quiz-actions{display:flex;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap}.result-box{margin-top:18px;padding:20px;border-radius:22px;background:rgba(24,214,199,.12);border:1px solid rgba(24,214,199,.2)}.sidebar{position:sticky;top:94px}.stat-row{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.09);padding:13px 0;color:var(--muted)}.stat-row strong{color:white}.tiny{color:var(--muted);font-size:.82rem;line-height:1.5}.leaderboard-list{padding-left:22px;color:var(--muted);line-height:2}.big-board-grid{display:grid;grid-template-columns:1.05fr repeat(5,minmax(74px,1fr));gap:8px;margin-top:18px;overflow-x:auto;padding-bottom:6px}.board-cell{min-height:70px;border-radius:16px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.075);color:white;font-weight:900;display:grid;place-items:center;text-align:center;padding:10px}.board-header{background:linear-gradient(135deg,rgba(123,97,255,.45),rgba(24,214,199,.16));text-transform:uppercase;font-size:.75rem;letter-spacing:.08em}.board-question{cursor:pointer;color:var(--gold);font-size:1.15rem;transition:.18s}.board-question:hover{transform:translateY(-2px);background:rgba(255,211,106,.14)}.board-question.used{opacity:.34;cursor:not-allowed;color:var(--muted);text-decoration:line-through}.big-board-score{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:18px 0;padding:16px 18px;border-radius:18px;background:rgba(255,211,106,.12);border:1px solid rgba(255,211,106,.22)}.big-board-score strong{color:var(--gold);font-size:1.8rem}.duel-grid,.match-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}.duel-choice,.match-choice{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.08);color:white;border-radius:22px;padding:18px;cursor:pointer;text-align:left}.mode-result{margin-top:16px;border-radius:18px;padding:16px;background:rgba(255,255,255,.08);color:var(--muted)}.seo-grid{margin:24px 0}.article-card h3{margin-bottom:10px}.article-card a{color:var(--gold);font-weight:900}.page-hero{padding:54px 0 28px}.question-list{display:grid;gap:14px}.qa{padding:18px;border-radius:18px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}.qa strong{color:var(--gold)}.site-footer{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-top:64px;padding:34px clamp(18px,4vw,56px);border-top:1px solid rgba(255,255,255,.1);color:var(--muted)}.site-footer nav{display:flex;gap:16px;flex-wrap:wrap}.auth-dialog{width:min(560px,calc(100% - 32px));border:0;border-radius:30px;padding:30px;background:#fff;color:var(--ink);box-shadow:0 30px 100px rgba(0,0,0,.45)}.auth-dialog::backdrop{background:rgba(6,8,20,.68);backdrop-filter:blur(8px)}.close-btn{position:absolute;right:20px;top:16px;border:0;background:transparent;font-size:2rem;cursor:pointer;color:#25283d}.auth-grid{display:grid;gap:12px;margin-top:18px}.auth-grid input{padding:14px 16px;border-radius:14px;border:1px solid #d8d8e8;font:inherit}.confetti{position:fixed;width:10px;height:14px;top:-20px;z-index:999;pointer-events:none;animation:fall 900ms ease-out forwards}@keyframes fall{to{transform:translateY(110vh) rotate(720deg);opacity:0}}@media(max-width:900px){.site-header{position:relative;align-items:flex-start;flex-direction:column}.site-header nav{justify-content:flex-start}.hero,.content-grid{grid-template-columns:1fr}.memory-orb{min-height:330px}.decade-grid,.mode-grid,.seo-grid,.epic-grid{grid-template-columns:1fr 1fr}.sidebar{position:static}}@media(max-width:560px){.decade-grid,.mode-grid,.seo-grid,.epic-grid,.duel-grid,.match-grid{grid-template-columns:1fr}h1{font-size:3.1rem}.big-board-grid{grid-template-columns:92px repeat(5,74px)}.board-cell{min-height:62px;font-size:.82rem}}


/* =========================================================
   NostalgiU Mobile Cleanup
   Cleaner phone layout, less crowding, better readability.
   ========================================================= */

@media (max-width: 760px) {
  html, body {
    overflow-x: hidden;
  }

  body {
    background:
      radial-gradient(circle at 10% 0%, rgba(123,97,255,.28), transparent 22rem),
      radial-gradient(circle at 90% 4%, rgba(24,214,199,.14), transparent 20rem),
      linear-gradient(180deg,#10142a,#141833 52%,#0f1222);
  }

  .site-header {
    position: relative;
    padding: 14px 14px 12px;
    gap: 12px;
    align-items: stretch;
  }

  .brand {
    width: 100%;
    justify-content: flex-start;
  }

  .logo-mark {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    font-size: .95rem;
  }

  .brand strong {
    font-size: 1rem;
  }

  .brand em {
    font-size: .68rem;
  }

  .site-header nav {
    width: 100%;
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .site-header nav::-webkit-scrollbar {
    display: none;
  }

  .site-header nav a {
    white-space: nowrap;
    flex: 0 0 auto;
    font-size: .82rem;
    padding: 9px 11px;
    border-radius: 999px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.08);
  }

  .ghost-btn {
    width: 100%;
    padding: 11px 14px;
  }

  .section-wrap,
  .ad-top {
    width: min(100% - 24px, 1180px);
  }

  .ad-zone {
    min-height: 74px;
    border-radius: 16px;
    padding: 12px;
  }

  .ad-zone p {
    font-size: .78rem;
  }

  .hero {
    display: block;
    padding: 34px 0 22px;
  }

  h1 {
    font-size: clamp(2.55rem, 14vw, 4rem);
    line-height: .96;
    letter-spacing: -.065em;
  }

  h2 {
    font-size: clamp(1.55rem, 8vw, 2.15rem);
    line-height: 1.04;
  }

  h3 {
    font-size: 1.18rem;
  }

  .lead {
    font-size: 1rem;
    line-height: 1.55;
    margin-bottom: 0;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
  }

  .primary-btn,
  .secondary-btn,
  .ghost-btn {
    width: 100%;
    min-height: 46px;
    text-align: center;
  }

  .memory-orb {
    min-height: 230px;
    margin-top: 22px;
    border-radius: 26px;
  }

  .orbit {
    inset: 32px;
  }

  .orbit-two {
    inset: 62px;
  }

  .orbit span {
    font-size: 1.45rem;
  }

  .orb-core {
    width: 132px;
    height: 132px;
  }

  .core-logo {
    font-size: 2.65rem;
  }

  .decades,
  .game-modes {
    text-align: left;
    margin-bottom: 22px;
  }

  .mode-intro {
    margin-left: 0;
    margin-right: 0;
    font-size: .96rem;
  }

  .decade-grid,
  .mode-grid,
  .seo-grid,
  .epic-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .mode-card {
    padding: 16px;
    border-radius: 20px;
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    align-items: center;
  }

  .mode-icon {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    margin: 0;
    grid-row: span 2;
  }

  .mode-card strong {
    font-size: 1rem;
    margin-bottom: 4px;
  }

  .mode-card em {
    font-size: .86rem;
  }

  .content-grid {
    display: block;
    width: min(100% - 24px, 1180px);
  }

  .quiz-card,
  .stats-card,
  .info-page,
  .article-card {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: 22px;
  }

  .card-head {
    display: block;
  }

  .card-head .pill,
  .pill {
    margin-top: 10px;
  }

  .support,
  .info-page p,
  .article-card p {
    font-size: .94rem;
    line-height: 1.55;
  }

  .question-box {
    margin-top: 14px;
    padding: 16px;
    border-radius: 18px;
  }

  .question-meta {
    display: grid;
    gap: 5px;
    font-size: .72rem;
  }

  .question-box h3 {
    font-size: 1.18rem;
    line-height: 1.22;
    margin: 12px 0 14px;
  }

  .choices {
    gap: 9px;
  }

  .choice {
    padding: 13px 14px;
    border-radius: 14px;
    font-size: .95rem;
    line-height: 1.25;
  }

  .quiz-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .result-box {
    padding: 16px;
    border-radius: 18px;
  }

  .sidebar {
    position: static;
    margin-top: 8px;
  }

  .ad-sidebar,
  .sidebar .ad-zone {
    min-height: 90px;
  }

  .stat-row {
    padding: 11px 0;
  }

  .big-board-score {
    padding: 13px 14px;
    border-radius: 16px;
  }

  .big-board-score strong {
    font-size: 1.45rem;
  }

  .big-board-grid {
    display: grid;
    grid-template-columns: 82px repeat(5, 70px) !important;
    gap: 7px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    margin-left: -2px;
    margin-right: -2px;
    -webkit-overflow-scrolling: touch;
  }

  .board-cell {
    min-height: 58px;
    border-radius: 14px;
    padding: 7px;
    font-size: .76rem;
  }

  .board-question {
    font-size: .86rem;
  }

  .board-question strong {
    font-size: .98rem;
  }

  .duel-grid,
  .match-grid {
    grid-template-columns: 1fr;
  }

  .duel-choice,
  .match-choice {
    padding: 15px;
    border-radius: 18px;
  }

  .page-hero {
    padding: 34px 0 18px;
  }

  .question-list {
    gap: 10px;
  }

  .qa {
    padding: 14px;
    border-radius: 16px;
  }

  .qa h3 {
    line-height: 1.22;
  }

  .site-footer {
    display: block;
    padding: 26px 14px;
    margin-top: 34px;
  }

  .site-footer nav {
    margin-top: 16px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .site-footer nav a {
    padding: 10px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    text-align: center;
  }

  .auth-dialog {
    width: calc(100% - 24px);
    padding: 22px;
    border-radius: 24px;
  }

  .close-btn {
    right: 14px;
    top: 10px;
  }
}

@media (max-width: 380px) {
  .section-wrap,
  .content-grid,
  .ad-top {
    width: min(100% - 18px, 1180px);
  }

  h1 {
    font-size: 2.35rem;
  }

  .site-header {
    padding-left: 9px;
    padding-right: 9px;
  }

  .quiz-card,
  .stats-card,
  .info-page,
  .article-card {
    padding: 15px;
  }

  .big-board-grid {
    grid-template-columns: 76px repeat(5, 64px) !important;
  }

  .board-cell {
    min-height: 54px;
    font-size: .7rem;
  }
}


/* Quiz advance and visibility fixes */
.decades,
.decades h2,
.decades p,
.decades .eyebrow {
  color: #ffffff !important;
}

.decades .mode-card strong {
  color: #ffffff !important;
}

.decades .mode-card em {
  color: #d9def7 !important;
}

.quiz-next-btn:not(:disabled) {
  opacity: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 12px 26px rgba(24,214,199,.18);
}

.quiz-next-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

.question-box .support {
  color: #555b73 !important;
}

@media (max-width: 760px) {
  .decades h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.28);
  }

  .quiz-next-btn {
    width: 100%;
  }
}