/* ===== NBA QUEST — SPORT THEME (mobile-first) ===== */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Barlow+Semi+Condensed:wght@500;600;700&family=Barlow:wght@400;500;600;700&display=swap');

:root{
  --bg:#0a0e16;
  --panel:#0f1626;
  --panel2:#0c121f;
  --line:#223150;
  --red:#e4002b;
  --red-dk:#a8001f;
  --gold:#f5b820;
  --gold-dk:#c98c00;
  --card:#ffffff;
  --ink:#10151f;
  --muted:#8aa0c4;
  --muted2:#6f86ab;
  --green:#1fae6a;
  --green-dk:#0d7a48;
}

*{margin:0;padding:0;box-sizing:border-box}

html,body{
  min-height:100%;
  background:#05070c;
  color:#eef3fb;
  font-family:'Barlow',sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* device-style centered column; full-width on phones */
body{display:flex;justify-content:center}
.app{
  width:100%;max-width:480px;
  background:var(--bg);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
@media (min-width:520px){
  body{padding:22px 12px;background:#05070c}
  .app{border-radius:26px;overflow:hidden;min-height:auto;
    box-shadow:0 30px 80px -28px rgba(0,0,0,.85);border:1px solid #18233a}
}

/* ---- TOP BANNER ---- */
.top-banner{
  background:var(--red);color:#fff;text-align:center;
  font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.4px;text-transform:uppercase;
  padding:9px 14px;line-height:1.3;
}
.top-banner span{color:#ffd9df;display:block;font-size:11px;letter-spacing:.6px}

/* ---- HEADER ---- */
.site-header{
  background:var(--panel2);
  border-bottom:2px solid var(--line);
  padding:13px 18px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.logo{
  font-family:'Anton',sans-serif;font-size:22px;letter-spacing:.5px;
  text-transform:uppercase;color:#fff;line-height:.9;
}
.logo span{color:var(--gold)}
.header-badges{display:flex;gap:7px;flex-shrink:0}
.hbadge{
  font-family:'Barlow Semi Condensed',sans-serif;font-size:10px;font-weight:700;
  letter-spacing:.5px;text-transform:uppercase;color:#bfe9cf;
  border:1px solid #1f5e3f;background:#0e2a1c;border-radius:6px;
  padding:5px 8px;display:flex;align-items:center;gap:4px;white-space:nowrap;
}

/* court stripe */
.court-stripe{height:6px;background:repeating-linear-gradient(135deg,var(--red) 0 22px,#b30022 22px 44px)}

/* ---- PROGRESS (scoreboard) ---- */
.progress-wrap{background:var(--panel2);padding:15px 18px 8px;border-bottom:1px solid var(--line)}
.progress-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.progress-label{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.progress-score{font-family:'Anton',sans-serif;font-size:15px;color:var(--gold);letter-spacing:.5px}
.progress-bar{height:8px;background:#070b13;border:1px solid var(--line);border-radius:5px;overflow:hidden}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--gold),var(--red));border-radius:5px;transition:width .4s ease}
.dot-row{display:flex;gap:8px;margin-top:12px;align-items:center}
.dot{
  width:28px;height:28px;border-radius:7px;background:#070b13;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:'Anton',sans-serif;font-size:13px;color:var(--muted2);transition:all .25s;
}
.dot.active{background:var(--red);border-color:var(--red);color:#fff}
.dot.correct{background:#0e2a1c;border-color:#1f5e3f;color:#46d98a}
.dot.wrong{background:#2d1014;border-color:#7a1f28;color:#ff6b78}
.dot-label{font-family:'Barlow Semi Condensed',sans-serif;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-left:4px}

/* ---- QUIZ ---- */
.quiz-area.hide{display:none}
.quiz-container{padding:18px 16px 22px}
.era-badge-nba{
  display:inline-block;font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;
  font-size:10px;letter-spacing:1px;text-transform:uppercase;color:#fff;
  background:var(--red);padding:5px 11px;border-radius:6px;margin-bottom:12px;
}
.q-label{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.q-title{
  font-family:'Anton',sans-serif;font-size:clamp(26px,7.5vw,32px);line-height:1.04;
  letter-spacing:.3px;text-transform:uppercase;color:#fff;margin-bottom:16px;
}

/* photo as collectible card */
.photo-wrap{
  position:relative;width:min(220px,68%);margin:0 auto 8px;
  background:linear-gradient(160deg,var(--gold),var(--gold-dk));
  padding:5px;border-radius:14px;
  box-shadow:0 16px 34px -16px rgba(0,0,0,.9);
}
.photo-wrap::after{content:"";position:absolute;inset:5px;border-radius:10px;pointer-events:none;
  background:radial-gradient(circle at 50% 125%,transparent 58%,rgba(228,0,43,.28) 100%)}
.photo-wrap img{width:100%;aspect-ratio:1/1;object-fit:cover;object-position:top center;display:block;border-radius:10px;background:#070b13}
.photo-era{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);text-align:center;margin:10px 0 18px}

/* options */
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.opt{
  background:var(--card);color:var(--ink);
  border:2px solid #e6e9ef;border-radius:13px;
  padding:15px 10px;min-height:54px;
  font-family:'Barlow',sans-serif;font-size:15px;font-weight:700;
  text-align:center;cursor:pointer;transition:transform .12s,border-color .12s;
  box-shadow:0 3px 0 #cfd5e0;
}
.opt:hover{transform:translateY(-1px);border-color:var(--gold)}
.opt.correct{background:#e7faf0;border-color:var(--green);color:var(--green-dk);box-shadow:0 3px 0 #b7e9cd}
.opt.wrong{background:#fdecee;border-color:var(--red);color:var(--red-dk);box-shadow:0 3px 0 #f5c2c9}
.opt:disabled{cursor:default}

/* reveal */
.reveal-box{display:none;border-radius:11px;padding:12px 14px;font-size:13.5px;font-weight:500;line-height:1.5;margin-bottom:14px}
.reveal-box.show{display:block}
.reveal-box.correct{background:#0e2a1c;border:1px solid #1f5e3f;color:#7ef0b3}
.reveal-box.wrong{background:#2a2310;border:1px solid #6b5410;color:#ffd87a}
.auto-bar{height:3px;width:0;margin-top:11px;border-radius:3px;background:currentColor;opacity:.55;transition:width 1.6s linear}

/* next button */
.next-btn{
  display:none;width:100%;border:none;cursor:pointer;
  font-family:'Anton',sans-serif;font-size:20px;letter-spacing:1px;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,#ff1f47,var(--red) 55%,var(--red-dk));
  padding:16px;border-radius:13px;
  box-shadow:0 10px 22px -8px rgba(228,0,43,.7),inset 0 2px 0 rgba(255,255,255,.3);
  transition:transform .12s,filter .12s;
}
.next-btn.show{display:block}
.next-btn:hover{filter:brightness(1.06)}
.next-btn:active{transform:scale(.99)}

/* ---- RESULT SCREEN ---- */
.result-screen{display:none;text-align:center}
.result-screen.show{display:block}

.shaq-hero{position:relative;text-align:center;overflow:hidden;
  background:radial-gradient(125% 85% at 50% 28%,#17243f 0%,#0a1120 55%,#070b13 100%);
  padding:16px 0 4px}
.shaq-hero::before{content:"";position:absolute;left:50%;top:8%;width:260px;height:260px;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(245,184,32,.22),transparent 65%);pointer-events:none}
.shaq-hero-img{position:relative;z-index:1;width:min(260px,60%);display:block;margin:0 auto;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.55))}
.shaq-hero-overlay{position:relative;z-index:2;padding:4px 16px 18px;text-align:center}
.shaq-hero-congrats{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:2px}
.shaq-hero-score{font-family:'Anton',sans-serif;font-size:clamp(54px,16vw,68px);line-height:.95;color:#fff;letter-spacing:1px}
.shaq-hero-label{font-family:'Barlow Semi Condensed',sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.shaq-hero-rank{display:inline-block;font-family:'Anton',sans-serif;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:#0a0f1a;background:var(--gold);padding:8px 18px;border-radius:9px}

.result-sub{font-size:15px;color:#cdd9ee;line-height:1.55;padding:0 18px;margin-top:18px}

/* gift box */
.gift-box{
  background:var(--card);border-radius:16px;padding:16px;margin:18px 16px;
  display:flex;gap:14px;align-items:center;text-align:left;
  box-shadow:0 14px 30px -18px rgba(0,0,0,.8);
}
.gift-icon{width:62px;height:62px;border-radius:11px;overflow:hidden;flex-shrink:0;background:#070b13;border:2px solid var(--gold)}
.gift-icon-img{width:100%;height:100%;object-fit:cover}
.gift-name{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:15px;color:var(--ink)}
.gift-meta{font-size:12.5px;color:#6b7280;margin-top:2px}
.gift-price{font-family:'Anton',sans-serif;font-size:16px;color:var(--green-dk);margin-top:3px;letter-spacing:.3px}

/* CTA */
.get-gift-btn{
  display:block;margin:0 16px 10px;text-decoration:none;text-align:center;
  font-family:'Anton',sans-serif;font-size:21px;letter-spacing:1px;text-transform:uppercase;
  color:#0a0f1a;background:linear-gradient(180deg,#ffd45e,var(--gold) 55%,var(--gold-dk));
  padding:18px;border-radius:14px;
  box-shadow:0 12px 26px -8px rgba(245,184,32,.6),inset 0 2px 0 rgba(255,255,255,.5);
  transition:transform .12s,filter .12s;
}
.get-gift-btn:hover{filter:brightness(1.05)}
.get-gift-btn:active{transform:scale(.99)}
.gift-trust{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;padding:6px 16px}
.gift-trust span{font-family:'Barlow Semi Condensed',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:4px}

/* social proof */
.social-proof{padding:22px 16px 4px;text-align:left}
.sp-title{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;text-align:center;margin-bottom:14px}
.sp-comment{display:flex;gap:11px;background:var(--card);border-radius:13px;padding:13px;margin-bottom:10px;box-shadow:0 8px 20px -16px rgba(0,0,0,.7)}
.sp-avatar{width:40px;height:40px;border-radius:50%;background:var(--red);color:#fff;font-family:'Anton',sans-serif;font-size:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sp-body{flex:1;min-width:0}
.sp-name{font-family:'Barlow Semi Condensed',sans-serif;font-weight:700;font-size:13px;color:var(--ink)}
.sp-verified{font-size:10px;font-weight:600;color:var(--green-dk);margin-left:5px;white-space:nowrap}
.sp-stars{font-size:12px;color:var(--gold-dk);letter-spacing:1px;margin:2px 0 4px}
.sp-text{font-size:13px;color:#444b57;line-height:1.5}
.sp-photo{width:100%;max-width:200px;border-radius:9px;margin:8px 0 4px;display:block;border:1px solid #e6e9ef}
.sp-time{font-size:10.5px;color:#9aa3b2;margin-top:5px}
.sp-count{text-align:center;font-family:'Barlow Semi Condensed',sans-serif;font-size:13px;letter-spacing:.5px;color:#cdd9ee;margin-top:12px;padding:11px;background:#0e2a1c;border:1px solid #1f5e3f;border-radius:10px}
.sp-count strong{color:#46d98a}

/* footer */
.site-footer{text-align:center;padding:22px 18px 28px;font-size:11px;letter-spacing:.5px;color:var(--muted2);border-top:1px solid var(--line);margin-top:26px}
.site-footer a{color:var(--muted)}