/* ════════════════════════════════════════════════════════════
   style.css — Trivia GoGo
   All app styles. Loaded by index.html via <link>.
   ════════════════════════════════════════════════════════════ */

/* ── Reset & Root ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-deep:#05050f;--bg-dark:#0a0a1e;--bg-card:#0f0f2a;--bg-card-h:#14143a;
  --primary:#7c3aed;--primary-lt:#a78bfa;--secondary:#0ea5e9;
  --accent:#ec4899;--teal:#14b8a6;--gold:#f59e0b;--green:#10b981;--red:#ef4444;
  --txt:#f8fafc;--txt-m:#94a3b8;--txt-d:#475569;
  --border:rgba(124,58,237,.25);--border-g:rgba(124,58,237,.6);
  --glow-s:0 0 12px rgba(124,58,237,.4);--glow-m:0 0 24px rgba(124,58,237,.5);
  --r-sm:8px;--r-md:14px;--r-lg:20px;--r-xl:32px;
  --ff-d:'Orbitron','Exo 2',sans-serif;--ff-b:'Exo 2',system-ui,sans-serif;
}
html{scroll-behavior:smooth}
body{
  font-family:var(--ff-b);background:var(--bg-deep);color:var(--txt);
  min-height:100vh;overflow-x:clip;
  background-image:
    radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.2) 0%,transparent 100%),
    radial-gradient(1px 1px at 80% 10%,rgba(255,255,255,.15) 0%,transparent 100%),
    radial-gradient(1px 1px at 50% 70%,rgba(255,255,255,.12) 0%,transparent 100%),
    radial-gradient(1px 1px at 10% 80%,rgba(255,255,255,.15) 0%,transparent 100%),
    radial-gradient(1px 1px at 90% 60%,rgba(255,255,255,.18) 0%,transparent 100%),
    radial-gradient(ellipse at top,#0d0d2b 0%,#05050f 60%);
}
/* ── Typography ─────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--ff-d);letter-spacing:.05em}
.grad{
  background:linear-gradient(135deg,#a78bfa 0%,#60a5fa 40%,#34d399 80%,#fbbf24 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
/* ── Buttons ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 28px;border-radius:var(--r-md);font-family:var(--ff-b);font-size:1rem;font-weight:700;cursor:pointer;border:2px solid transparent;transition:all .2s;text-decoration:none;white-space:nowrap;background:none}
.btn-p{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:var(--glow-s)}
.btn-p:hover{transform:translateY(-2px);box-shadow:var(--glow-m)}
.btn-o{border-color:var(--border-g);color:var(--primary-lt)}
.btn-o:hover{background:rgba(124,58,237,.15);border-color:var(--primary-lt);transform:translateY(-2px)}
.btn-g{color:var(--txt-m)}.btn-g:hover{color:var(--txt)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}
.btn-lg{padding:16px 40px;font-size:1.15rem}
.btn-sm{padding:8px 18px;font-size:.875rem}
/* ── Card ────────────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-lg);padding:24px;transition:all .2s}
.card:hover{border-color:var(--border-g);box-shadow:var(--glow-s);background:var(--bg-card-h)}
.card.sel{border-color:var(--primary-lt);box-shadow:var(--glow-m);background:rgba(124,58,237,.15)}
/* ── Navbar ──────────────────────────────────────────────────── */
.nav{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 24px;background:rgba(5,5,15,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.nav-logo{height:44px;cursor:pointer;filter:drop-shadow(0 0 12px rgba(124,58,237,.5))}
.nav-acts{display:flex;align-items:center;gap:12px}
/* ── Page ────────────────────────────────────────────────────── */
.page{min-height:100vh;display:flex;flex-direction:column}
.inner{width:100%;max-width:900px;margin:0 auto;padding:24px 20px 80px}
/* ── Progress ────────────────────────────────────────────────── */
.pb-w{width:100%;height:6px;background:rgba(255,255,255,.08);border-radius:99px;overflow:hidden}
.pb-f{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px;transition:width .3s;box-shadow:0 0 8px var(--primary)}
/* ── Divider ─────────────────────────────────────────────────── */
.div{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--border-g),transparent);margin:24px 0}
/* ── Animations ──────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{box-shadow:0 0 12px rgba(124,58,237,.4)}50%{box-shadow:0 0 28px rgba(124,58,237,.8)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes fall{0%{transform:translateY(-20px) rotate(0);opacity:1}100%{transform:translateY(110vh) rotate(720deg);opacity:0}}
.fu{animation:fadeUp .4s ease both}
/* ── Logo bulb flicker ───────────────────────────────────────── */
/* Simulates the bulb between the wings struggling for power.
   The glow overlay is positioned at ~50% X, ~22% Y of the logo. */
@keyframes bulb-flicker{
  0%    {opacity:.82}
  6%    {opacity:.18}
  7%    {opacity:.75}
  8%    {opacity:.08}
  9%    {opacity:.72}
  14%   {opacity:.80}
  31%   {opacity:.55}
  33%   {opacity:.82}
  58%   {opacity:.82}
  59%   {opacity:.10}
  60%   {opacity:.65}
  61%   {opacity:.04}
  62%   {opacity:.78}
  65%   {opacity:.82}
  80%   {opacity:.45}
  83%   {opacity:.80}
  100%  {opacity:.82}
}
#logo-bulb-glow{
  position:absolute;
  left:44%;
  top:4%;
  width:12%;
  padding-bottom:12%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,220,100,.95) 0%,rgba(255,160,30,.65) 35%,rgba(255,120,0,.15) 65%,transparent 100%);
  pointer-events:none;
  mix-blend-mode:screen;
  animation:bulb-flicker 4.2s ease-in-out 1.5s infinite;
  will-change:opacity;
}

/* ── Screens ──────────────────────────────────────────────────── */
.screen{display:none}
.screen.active{display:flex;flex-direction:column;min-height:100vh}
/* ── Answer Buttons ──────────────────────────────────────────── */
.ans-btn{background:var(--bg-card);border:2px solid rgba(255,255,255,.08);border-radius:var(--r-md);padding:16px 18px;color:var(--txt);font-size:.95rem;font-family:var(--ff-b);font-weight:600;cursor:pointer;transition:all .2s;text-align:center;display:flex;align-items:center;justify-content:center;gap:10px;line-height:1.4;width:100%}
.ans-btn:hover:not(:disabled){border-color:var(--primary-lt);transform:translateY(-2px)}
.ans-btn:disabled{cursor:default}
.ans-btn.correct{background:rgba(16,185,129,.2);border-color:var(--green);color:var(--green)}
.ans-btn.wrong{background:rgba(239,68,68,.2);border-color:var(--red);color:var(--red);animation:shake .4s ease}
.ans-btn.dim{opacity:.45}
/* ── Timer ring ──────────────────────────────────────────────── */
#timer-ring{transition:stroke-dashoffset .9s linear,stroke .3s ease}
/* ── Leaderboard row ─────────────────────────────────────────── */
.lb-row{display:grid;grid-template-columns:48px 1fr auto auto auto;gap:16px;padding:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);align-items:center;position:relative;overflow:hidden;transition:all .2s}
.lb-row:hover{border-color:var(--border-g)}
.lb-row.me{border-color:var(--primary-lt);background:rgba(124,58,237,.12)}
/* ── Category chips ──────────────────────────────────────────── */
.cat-chip{cursor:pointer;border-radius:var(--r-md);padding:20px 12px;text-align:center;transition:all .2s}
/* ── Confetti ────────────────────────────────────────────────── */
.confetti-p{position:fixed;pointer-events:none;border-radius:2px;animation:fall linear forwards}
/* ── Admin panel ─────────────────────────────────────────────── */
.admin-tab{padding:7px 16px;border-radius:99px;border:1px solid var(--border);background:var(--bg-card);color:var(--txt-m);font-size:.78rem;font-weight:700;cursor:pointer;transition:all .15s}
.admin-tab:hover{border-color:var(--primary);color:var(--primary-lt)}
.admin-tab.active-tab{background:rgba(124,58,237,.2);border-color:var(--primary);color:var(--primary-lt)}
.admin-qcard{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:border-color .15s}
.admin-qcard.flagged{border-color:rgba(245,158,11,.4)}
.diff-bar-wrap{display:flex;height:8px;border-radius:4px;overflow:hidden;gap:2px;margin:6px 0 3px}
.diff-bar{height:100%;border-radius:4px;transition:width .4s ease;min-width:0}
/* ── Mode + NumQ inline pills (categories screen) ───────────── */
.mode-pill{padding:7px 14px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--txt-m);font-size:.8rem;font-weight:700;cursor:pointer;font-family:var(--ff-b);transition:all .18s;line-height:1}
.mode-pill:hover{border-color:rgba(255,255,255,.25);color:var(--txt)}
.mode-pill.active{border-color:var(--pill-c,#7c3aed);background:rgba(var(--pill-cr,124,58,237),.18);color:var(--pill-c,#a78bfa)}
.mode-pill.pill-locked{opacity:.42;cursor:default}
.numq-pill{padding:7px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:var(--txt-m);font-size:.82rem;font-weight:700;cursor:pointer;font-family:var(--ff-b);transition:all .18s;line-height:1}
.numq-pill:hover{border-color:rgba(124,58,237,.5);color:var(--txt)}
.numq-pill.active{border-color:var(--primary-lt);background:rgba(124,58,237,.2);color:var(--primary-lt)}
/* ── Media player ────────────────────────────────────────────── */
.q-media-wrap{border-radius:12px;overflow:hidden;background:rgba(0,0,0,.35);border:1px solid var(--border);margin-bottom:14px}
.q-media-wrap audio{width:100%;display:block;min-height:48px}
.q-media-wrap img{width:100%;max-height:300px;object-fit:contain;display:block}
.q-media-yt{position:relative;padding-bottom:56.25%;height:0}
.q-media-yt iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.q-media-hint{text-align:center;font-size:.74rem;color:var(--txt-d);padding:5px 12px 8px;font-style:italic}
/* ── Mobile question layout — timer always above text ────────── */
/* On mobile the timer sits centered above the question text.
   No side-by-side; the media card (above the timer row in DOM) fills full width. */
@media(max-width:767px){
  #q-timer-row{flex-direction:column;align-items:center;gap:6px}
  #q-timer-row>div:first-child{zoom:0.72}  /* 90px→65px pre-zoom; compact but readable */
  #q-text{text-align:center;padding-top:0;width:100%;font-size:.95rem}
  /* Override inline padding:28px on the question card */
  #s-play .card{padding:16px !important}
}
/* ── Responsive ──────────────────────────────────────────────── */
@media(max-width:600px){
  .btn-lg{padding:14px 28px;font-size:1rem}
  .card{padding:16px}
  .inner{padding:16px 12px 48px}
  .lb-row{grid-template-columns:38px 1fr auto auto}
}
@media(max-width:767px){
  .inner{zoom:0.5}
  .inner .mob-logo{zoom:2}
  #s-play .inner{zoom:1.5;max-width:calc(100vw / 1.5)}
  #auth-modal .card{zoom:0.5}
  #q-load-overlay>*{zoom:0.5}
}

/* ── Decade / auto-scroll rows ───────────────────────────────── */
.decade-scroll{overflow:hidden;flex:1;min-width:0}
.marquee-track{display:flex;gap:10px;width:max-content;will-change:transform}
@keyframes marquee-fwd{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes marquee-rev{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.decade-arrow{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:1px solid var(--border-g);background:rgba(124,58,237,.15);color:var(--primary-lt);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;line-height:1}
.decade-arrow:hover{background:rgba(124,58,237,.35);border-color:var(--primary-lt);transform:scale(1.1)}

/* ── Home Category Cards ─────────────────────────────────────── */
@keyframes wiggle{0%,100%{transform:rotate(0) scale(1)}25%{transform:rotate(-8deg) scale(1.15)}75%{transform:rotate(8deg) scale(1.15)}}
@keyframes checkPop{0%{transform:scale(0) rotate(-20deg)}70%{transform:scale(1.2) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes borderSpin{to{--border-angle:360deg}}

.hcat{
  cursor:pointer;border-radius:20px;padding:22px 10px 18px;
  text-align:center;position:relative;overflow:hidden;
  border:2px solid rgba(255,255,255,.07);
  background:linear-gradient(145deg,rgba(255,255,255,.04) 0%,rgba(0,0,0,.25) 100%);
  transition:transform .28s cubic-bezier(.34,1.56,.64,1),box-shadow .25s ease,border-color .2s;
  user-select:none;-webkit-user-select:none;
}
.hcat::before{
  content:'';position:absolute;inset:0;
  background:var(--cc,#7c3aed);opacity:0;transition:opacity .2s;pointer-events:none;
}
.hcat:hover{transform:translateY(-10px) scale(1.06);}
.hcat:hover::before{opacity:.14;}
.hcat:hover .hcat-em{animation:wiggle .4s ease;}
.hcat.sel{border-color:var(--cc,#7c3aed);box-shadow:0 0 20px color-mix(in srgb,var(--cc,#7c3aed) 50%,transparent);transform:translateY(-5px) scale(1.03);}
.hcat.sel::before{opacity:.22;}
.hcat-em{font-size:2.8rem;display:block;margin-bottom:10px;line-height:1;transition:transform .2s;position:relative;z-index:1;}
.hcat-lbl{font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;position:relative;z-index:1;transition:color .2s;}
.hcat.sel .hcat-lbl{color:var(--cc,#a78bfa);}
.hcat-chk{
  position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;
  background:var(--cc,#7c3aed);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:900;
  transform:scale(0);transition:transform 0s;z-index:2;
}
.hcat.sel .hcat-chk{transform:scale(1);animation:checkPop .3s cubic-bezier(.34,1.56,.64,1) both;}

/* ── Home Mode Cards ─────────────────────────────────────────── */
.hmode{
  cursor:pointer;border-radius:var(--r-lg);padding:22px 16px;text-align:center;
  border:2px solid rgba(255,255,255,.07);
  background:linear-gradient(145deg,rgba(255,255,255,.04) 0%,rgba(0,0,0,.2) 100%);
  transition:all .22s ease;user-select:none;position:relative;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;
}
.hmode::before{content:'';position:absolute;inset:0;background:var(--mc,#7c3aed);opacity:0;transition:opacity .2s;pointer-events:none;}
.hmode:hover{transform:translateY(-5px);}
.hmode:hover::before{opacity:.1;}
.hmode.sel{border-color:var(--mc,#7c3aed);box-shadow:0 0 18px color-mix(in srgb,var(--mc,#7c3aed) 45%,transparent);transform:translateY(-3px);}
.hmode.sel::before{opacity:.18;}
.hmode-em{font-size:2.4rem;margin-bottom:10px;display:flex;align-items:center;justify-content:center;height:2.8rem;}
.hmode-title{font-family:var(--ff-d);font-size:.95rem;font-weight:700;margin-bottom:5px;transition:color .2s;}
.hmode.sel .hmode-title{color:var(--mc,#a78bfa);}
.hmode-desc{font-size:.78rem;color:var(--txt-m);line-height:1.5;}
.hmode-tag{display:inline-block;margin-top:10px;padding:3px 12px;border-radius:99px;font-size:.7rem;font-weight:700;border:1px solid;opacity:.8;}

/* ── Gamification: Stars ─────────────────────────────────────── */
.cat-stars{font-size:.72rem;line-height:1;margin-top:5px;letter-spacing:-.05em;display:block;min-height:14px}
.cat-stars.gold{filter:drop-shadow(0 0 5px #f59e0b)}

/* ── Gamification: Vault locked card ─────────────────────────── */
.vault-card{
  cursor:pointer;border-radius:20px;padding:22px 10px 18px;text-align:center;position:relative;overflow:hidden;
  border:2px dashed rgba(245,158,11,.4);
  background:linear-gradient(145deg,rgba(245,158,11,.06) 0%,rgba(0,0,0,.25) 100%);
  transition:all .3s ease;user-select:none;
}
.vault-card:hover{border-color:rgba(245,158,11,.7);box-shadow:0 0 20px rgba(245,158,11,.25);transform:translateY(-3px);}
.vault-card.unlocked{border-color:var(--gold);border-style:solid;background:linear-gradient(145deg,rgba(245,158,11,.14) 0%,rgba(0,0,0,.2) 100%);}
.vault-card.unlocked:hover{box-shadow:0 0 28px rgba(245,158,11,.45);}

/* ── Gamification: Locked mode card ─────────────────────────── */
.hmode-locked{
  cursor:pointer;border-radius:var(--r-lg);padding:22px 16px;text-align:center;
  border:2px dashed rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.02) 0%,rgba(0,0,0,.25) 100%);
  transition:all .22s ease;user-select:none;position:relative;overflow:hidden;opacity:.75;
}
.hmode-locked:hover{opacity:1;border-color:rgba(255,255,255,.25);transform:translateY(-2px);}

/* ── Report menu chip ───────────────────────────────────────── */
.report-chip{width:100%;text-align:left;padding:7px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--txt-m);font-size:.78rem;cursor:pointer;transition:all .15s;font-family:var(--ff-b)}
.report-chip:hover{background:rgba(248,113,113,.12);border-color:rgba(248,113,113,.4);color:#f87171}

/* ── Gamification: Arena leaderboard ─────────────────────────── */
.arena-row{display:grid;grid-template-columns:48px 1fr auto auto auto;gap:16px;padding:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--r-md);align-items:center;position:relative;overflow:hidden;transition:all .2s}
.arena-row:hover{border-color:rgba(244,114,182,.4)}
.arena-row.me{border-color:#f472b6;background:rgba(244,114,182,.08)}

/* ── True / False answer buttons ────────────────────────────── */
.ans-btn-tf{
  padding:28px 16px;font-size:1.15rem;font-weight:900;text-align:center;
  display:flex;align-items:center;justify-content:center;gap:10px;
  border-radius:var(--r-lg);letter-spacing:.04em;
}
.ans-btn-tf.tf-true{border-color:rgba(16,185,129,.3);color:var(--green)}
.ans-btn-tf.tf-false{border-color:rgba(239,68,68,.3);color:var(--red)}
.ans-btn-tf.tf-true:hover:not(:disabled){border-color:var(--green);background:rgba(16,185,129,.12)}
.ans-btn-tf.tf-false:hover:not(:disabled){border-color:var(--red);background:rgba(239,68,68,.12)}
.ans-btn-tf.correct{background:rgba(16,185,129,.2)!important;border-color:var(--green)!important;color:var(--green)!important}
.ans-btn-tf.wrong{background:rgba(239,68,68,.2)!important;border-color:var(--red)!important;color:var(--red)!important;animation:shake .4s ease}

/* ── Community Question Creator overlay ──────────────────────── */
#community-q-overlay{
  display:none;position:fixed;inset:0;z-index:1002;background:rgba(5,5,15,.95);
  backdrop-filter:blur(14px);align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:24px 16px;
}

/* ── Gamification: Matchmaking overlay ──────────────────────── */
#matchmaking-overlay{
  display:none;position:fixed;inset:0;z-index:1001;background:rgba(5,5,15,.95);
  backdrop-filter:blur(14px);align-items:center;justify-content:center;flex-direction:column;gap:20px;
}
</style>

/* ── Leaderboard filter buttons ──────────────────────────── */
.lb-filter-btn{padding:7px 16px;border-radius:999px;font-size:.8rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border-g);color:var(--txt-m);background:none;font-family:var(--ff-b);transition:all .18s}
.lb-filter-btn:hover{border-color:var(--primary-lt);color:var(--txt)}
.lb-filter-btn.active{background:rgba(124,58,237,.25);border-color:var(--primary-lt);color:var(--primary-lt)}

/* ── Auth modal inputs & social buttons ──────────────────── */
.auth-input{width:100%;padding:13px 16px;background:rgba(124,58,237,.08);border:2px solid var(--border);border-radius:var(--r-md);color:var(--txt);font-size:.95rem;font-family:var(--ff-b);outline:none;transition:border-color .2s;margin-bottom:12px}
.auth-input:focus{border-color:var(--primary-lt)}
.auth-input::placeholder{color:var(--txt-d)}
.auth-err{color:var(--red);font-size:.82rem;min-height:18px;margin-bottom:10px;text-align:left}
.auth-link{background:none;border:none;color:var(--primary-lt);cursor:pointer;font-size:.85rem;text-decoration:underline;padding:0;font-family:var(--ff-b)}
.auth-panel{display:none}.auth-panel.active{display:block}
.social-btn{width:100%;padding:12px 16px;border-radius:var(--r-md);font-size:.92rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all .2s;margin-bottom:10px;font-family:var(--ff-b);border:1.5px solid}
.social-btn:hover{transform:translateY(-1px)}
.social-btn-g{background:#fff;color:#3c4043;border-color:#dadce0}.social-btn-g:hover{box-shadow:0 2px 12px rgba(0,0,0,.3)}
.social-btn-fb{background:#1877f2;color:#fff;border-color:#1877f2}.social-btn-fb:hover{background:#166fe5;box-shadow:0 2px 12px rgba(24,119,242,.4)}
.auth-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--txt-d);font-size:.8rem}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.privacy-note{font-size:.73rem;color:var(--txt-d);text-align:center;line-height:1.5;margin-top:14px;padding:10px 12px;background:rgba(255,255,255,.03);border-radius:var(--r-sm);border:1px solid rgba(255,255,255,.05)}