/* ============================================================
   DayQuizz — design system
   Ported from the design preview (visual source of truth)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --bg:#0a0a16; --card:rgba(255,255,255,.06); --border:rgba(255,255,255,.12);
  --txt:#f4f4fa; --dim:#9a9ab5; --accent:#7c5cff; --accent2:#00e0c6;
  --good:#2ee6a8; --bad:#ff4d6d; --gold:#ffc94d;
}
html,body{ height:100%; }
body{
  font-family:'Outfit',sans-serif; background:var(--bg); color:var(--txt);
  min-height:100svh;
  display:flex; flex-direction:column;
}

/* Misc */
.flex-inline{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 0.75em;
}

/* ---------- animated background ---------- */
/* Halos roam across large distances (viewport units) so the movement is
   clearly visible, while size and color shift continuously. Each path loops
   back to its start — the motion never stops or jumps. */
.orb{ position:fixed; border-radius:50%; filter:blur(90px); opacity:.5; z-index:0; pointer-events:none; }
.orb1{ width:560px;height:560px; background:#5b2eff; top:-10%; left:-8%; animation:roam1 42s ease-in-out infinite, hue 40s linear infinite; }
.orb2{ width:500px;height:500px; background:#ff2e88; bottom:-12%; right:-8%; animation:roam2 55s ease-in-out infinite, hue 48s linear infinite reverse; }
.orb3{ width:420px;height:420px; background:#00c2a8; top:35%; left:55%; opacity:.38; animation:roam3 48s ease-in-out infinite, hue 56s linear infinite; }
.orb4{ width:340px;height:340px; background:#ff9d2e; top:60%; left:8%; opacity:.32; animation:roam4 38s ease-in-out infinite, hue 36s linear infinite reverse; }
@keyframes roam1{ 0%,100%{transform:translate(0,0) scale(1)} 20%{transform:translate(38vw,18vh) scale(1.35)} 45%{transform:translate(55vw,55vh) scale(.8)} 70%{transform:translate(20vw,70vh) scale(1.2)} 85%{transform:translate(-6vw,35vh) scale(.95)} }
@keyframes roam2{ 0%,100%{transform:translate(0,0) scale(1.1)} 25%{transform:translate(-42vw,-25vh) scale(.85)} 50%{transform:translate(-60vw,-60vh) scale(1.3)} 75%{transform:translate(-18vw,-40vh) scale(.9)} }
@keyframes roam3{ 0%,100%{transform:translate(0,0) scale(1)} 30%{transform:translate(-45vw,20vh) scale(1.4)} 60%{transform:translate(-15vw,-35vh) scale(.75)} 80%{transform:translate(18vw,15vh) scale(1.15)} }
@keyframes roam4{ 0%,100%{transform:translate(0,0) scale(.9)} 35%{transform:translate(30vw,-30vh) scale(1.35)} 65%{transform:translate(50vw,10vh) scale(1)} 85%{transform:translate(15vw,25vh) scale(1.2)} }
@keyframes hue{ from{filter:blur(90px) hue-rotate(0deg)} to{filter:blur(90px) hue-rotate(360deg)} }
.sheen{
  position:fixed; inset:-60%; z-index:0; pointer-events:none; opacity:.10;
  background:conic-gradient(from 0deg, transparent, #7c5cff, transparent, #00e0c6, transparent, #ff2e88, transparent);
  animation:spin 70s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.stars{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; }

/* ---------- top bar (flex: logo centered, stats + menu right) ---------- */
.app-header{
  position:relative; z-index:50;
  display:flex; align-items:center;
  padding:14px 20px;
  background:linear-gradient(180deg, rgba(10,10,22,.85), rgba(10,10,22,0));
}
.hcenter{ flex:1; display:flex; justify-content:center; }
.hright{ display:flex; align-items:center; gap:10px; position:relative; }
.brand{ font-weight:900; font-size:1.15rem; letter-spacing:.5px; display:flex; align-items:center; gap:8px; white-space:nowrap; cursor:pointer; }
.brand span.grad{ background:linear-gradient(90deg,#a78bff,#00e0c6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-logo{ height:1.7em; width:auto; display:inline-block; }
.pill{
  display:flex; align-items:center; gap:8px; padding:9px 16px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); cursor:pointer;
  font-weight:600; font-size:.95rem; transition:.2s; user-select:none; color:var(--txt); font-family:inherit;
}
.pill:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px); }
.stat{ cursor:help; }
.stat b{ font-size:1rem; min-width:14px; text-align:center; }
.avatar{
  width:42px;height:42px; border-radius:50%; display:grid; place-items:center;
  background:linear-gradient(135deg,#7c5cff,#00e0c6); font-weight:800; cursor:pointer;
  border:2px solid rgba(255,255,255,.25); transition:.2s; font-size:1rem;
}
.avatar:hover{ transform:scale(1.08); }
#ddName{ margin-bottom:7px; }
.dropdown{
  position:absolute; top:64px; right:0; width:250px; z-index:60;
  background:#15152a; border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.6); display:none;
}
.avatar-wrap .dropdown{ padding:20px; }
.dropdown.open{ display:block; animation:pop .18s ease; }
.dropdown .dd-head{ border-bottom:1px solid var(--border); font-size:.85rem; color:var(--dim); margin-bottom:10px; padding-bottom:15px; }
.dropdown .dd-head b{ color:var(--txt); display:block; font-size:1rem; }
.dropdown button{
  width:100%; text-align:left; padding:12px 0; background:none; border:none; color:var(--txt);
  font-family:inherit; font-size:.95rem; cursor:pointer; display:flex; gap:10px; align-items:center;
}
.dropdown button:hover{ background:rgba(255,255,255,.07); padding:12px; }

/* ---------- tooltips ---------- */
.has-tip{ position:relative; }
.tip{
  position:absolute; top:calc(100% + 12px); right:0; width:360px; padding:20px;
  background:#1c1c34; border:1px solid var(--border); border-radius:14px; font-size:.8rem; font-weight:500;
  color:#cfcfe4; line-height:1.55; opacity:0; pointer-events:none; transition:.18s; transform:translateY(-5px);
  box-shadow:0 14px 40px rgba(0,0,0,.55); z-index:70; text-align:left;
}
.tip.tip-left{ right:auto; left:0; }
.has-tip:hover .tip{ opacity:1; transform:translate(0,0); }
.tip b{ color:var(--txt); }
.tip .good{ color:var(--good); font-weight:700; }
.tip .bad{ color:var(--bad); font-weight:700; }

/* ---------- flame / ice ---------- */
.flame{ display:inline-block; transform-origin:50% 90%; font-size:1.05rem; }
.flame.lit{ animation:flick .45s ease-in-out infinite alternate; filter:drop-shadow(0 0 8px rgba(255,140,0,.85)); }
@keyframes flick{ from{transform:scale(1) rotate(-4deg)} to{transform:scale(1.16) rotate(4deg)} }
.ice-wrap{ position:relative; display:inline-block; font-size:1.05rem; }
.ice-wrap::after{
  content:'💧'; position:absolute; left:50%; top:95%; font-size:.62em;
  animation:drip 1.5s ease-in infinite;
}
@keyframes drip{
  0%{ opacity:0; transform:translate(-50%,-3px); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translate(-50%,11px); }
}

main{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; }
.screen{ display:none; width:90%; max-width:1620px; margin:0 auto; animation:fadein .4s ease; }
.screen.active{ display:flex; flex-direction:column; }
@keyframes fadein{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
@keyframes pop{ from{opacity:0; transform:scale(.92)} to{opacity:1; transform:scale(1)} }

/* ---------- subject picker ---------- */
.hero-title{ text-align:center; margin-bottom:8px; }
.hero-title h1{ font-size:clamp(1.8rem,4.5vw,3rem); font-weight:900; }
.hero-title p{ color:var(--dim); margin-top:10px; font-size:1.05rem;margin-bottom: 1em;}
.mode-row{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:26px; flex-wrap:wrap; }
.mode-btn{
  padding:12px 22px; border-radius:999px; cursor:pointer; font-family:inherit; font-weight:800; font-size:.95rem;
  border:1px solid var(--border); background:var(--card); color:var(--dim); transition:.22s; display:flex; align-items:center; gap:8px;
}
.mode-btn.active-easy{ background:linear-gradient(90deg,#7c5cff,#00b4ff); color:#fff; border-color:transparent; box-shadow:0 8px 26px rgba(124,92,255,.4); }
.mode-btn.active-hard{ background:linear-gradient(90deg,#ff9d2e,#ff4d6d); color:#fff; border-color:transparent; box-shadow:0 8px 26px rgba(255,77,109,.4); }
.mode-btn:not(.active-easy):not(.active-hard):hover{ background:rgba(255,255,255,.12); color:var(--txt); }
.help-dot{
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center; cursor:help;
  background:rgba(255,255,255,.08); border:1px solid var(--border); color:var(--dim); font-weight:900; font-size:.85rem;
}
.help-dot:hover{ color:var(--txt); background:rgba(255,255,255,.14); }
.subj-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:15px; margin-top:30px; }
.subj-card{
  position:relative; border-radius:22px; padding:26px 18px 20px; cursor:pointer; overflow:hidden;
  border:2px solid var(--border); transition:.25s; text-align:center;
  background-size:cover; background-position:center;
}
.subj-card:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 18px 50px rgba(0,0,0,.5); }
.subj-card .emoji{ font-size:3rem; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.subj-card h3{ margin-top:12px; font-size:1.15rem; font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.subj-card p{ font-size:.8rem; opacity:.85; margin-top:4px; }
.subj-card .done-tag{
  position:absolute; top:10px; right:10px; background:rgba(0,0,0,.45); border:1px solid var(--border);
  font-size:.7rem; padding:4px 9px; border-radius:999px; font-weight:700;
}
.subj-card .done-tag.score-tag{ left:10px; right:auto; background:rgba(0,0,0,.55); }
.subj-card.locked{ filter:grayscale(1) brightness(.5); border:2px dashed rgba(255,255,255,.35); }
.subj-card.locked:hover{ transform:none; }
.subj-card.locked::after{
  content:'🔒 Locked'; position:absolute; inset:0; display:grid; place-items:center;
  background:rgba(5,5,14,.55); font-weight:900; font-size:1.25rem; letter-spacing:1px;
  text-transform:uppercase; color:#ffd9e2; text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.g-english{ background:linear-gradient(160deg,#6a4dff,#3b2bb5); }
.g-spanish{ background:linear-gradient(160deg,#ff7a3d,#d63a6e); }
.g-math{ background:linear-gradient(160deg,#00c2a8,#0a6fb8); }
.g-history{ background:linear-gradient(160deg,#c98a2e,#8a3b12); }
.g-science{ background:linear-gradient(160deg,#b34dff,#4d1fa8); }
.g-custom1{ background:linear-gradient(160deg,#2eb8c9,#125a8a); }
.g-custom2{ background:linear-gradient(160deg,#ff4d9d,#8a1252); }
.free-note{ text-align:center; margin-top:26px; color:var(--dim); font-size:.9rem; }
.free-note b{ color:var(--gold); }

/* ---------- quiz ---------- */
.quiz-wrap{ display:flex; flex-direction:column; align-items:center; min-height:62vh; justify-content:center; }
.qmeta{ display:flex; align-items:center; gap:18px; margin-bottom:30px; flex-wrap:nowrap; justify-content:center; }
.qcount{ color:var(--dim); font-weight:600; letter-spacing:1px; font-size:.9rem; text-transform:uppercase; }
.progress{ width:220px; height:7px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; }
.progress i{ display:block; height:100%; background:linear-gradient(90deg,#7c5cff,#00e0c6); border-radius:99px; transition:width .4s ease; }
.hard-badge{
  display:none; align-items:center; gap:6px; padding:6px 14px; border-radius:999px; font-size:.8rem; font-weight:900;
  background:linear-gradient(90deg,rgba(255,157,46,.2),rgba(255,77,109,.2)); border:1px solid rgba(255,120,80,.5); color:#ffb59a;
}
.hard-badge.show{ display:flex; }
.timer-row{ display:none; align-items:center; gap:10px; width:min(560px,86vw); margin-bottom:20px; }
.timer-row.show{ display:flex; }
.timerbar{ flex:1; height:9px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
.timerbar i{ display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff9d2e,#ff4d6d); border-radius:99px; }
.timer-secs{ font-weight:800; font-size:.85rem; color:var(--dim); min-width:34px; text-align:right; font-variant-numeric:tabular-nums; }
.timer-secs.out{ color:var(--bad); }
.sentence{
  font-size:clamp(1.5rem,4.2vw,2.7rem); font-weight:800; text-align:center; line-height:1.35;
  text-shadow:0 3px 20px rgba(0,0,0,.5);
}
/* single-line questions only on wide screens — narrower layouts wrap instead of overflowing */
@media (min-width:1100px){ .sentence{ white-space:nowrap; } }
.blank{
  display:inline-block; min-width:120px; border-bottom:4px solid var(--accent2);
  color:var(--accent2); padding:0 10px; animation:blankpulse 2.2s ease-in-out infinite;
}
@keyframes blankpulse{ 0%,100%{border-color:var(--accent2)} 50%{border-color:#a78bff} }
.answers{ margin-top:60px; display:flex; flex-direction:column; gap:15px; width:min(560px,92vw); }
.ans{
  padding:18px 22px; border-radius:16px; background:var(--card); border:1px solid var(--border);
  font-family:inherit; font-size:1.15rem; font-weight:600; color:var(--txt); cursor:pointer;
  text-align:left; transition:.18s; display:flex; align-items:center; gap:14px;
}
.ans .key{ width:30px; height:30px; border-radius:9px; background:rgba(255,255,255,.1); display:grid; place-items:center; font-size:.85rem; font-weight:800; flex:none; }
.ans:hover{ background:rgba(255,255,255,.13); transform:translateX(6px); border-color:rgba(255,255,255,.3); }
.ans.correct{ background:rgba(46,230,168,.18); border-color:var(--good); box-shadow:0 0 34px rgba(46,230,168,.35); animation:winpop .45s ease; }
.ans.dim{ opacity:.4; pointer-events:none; }
.ans.picked-wrong{ background:rgba(255,77,109,.22); border-color:var(--bad); }
@keyframes winpop{ 0%{transform:scale(1)} 40%{transform:scale(1.05)} 100%{transform:scale(1)} }
.hard-input{
  margin-top:44px; width:min(560px,92vw); padding:18px 22px; border-radius:16px; font-size:1.2rem;
  background:var(--card); border:1px solid var(--border); color:var(--txt); font-family:inherit; font-weight:600;
  text-align:center; outline:none; transition:.2s;
}
.hard-input:focus{ border-color:var(--accent2); box-shadow:0 0 0 3px rgba(0,224,198,.2); }
.hard-input:disabled{ opacity:.6; }
.hard-submit{
  margin-top:16px; padding:14px 44px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(90deg,#ff9d2e,#ff4d6d); color:#fff; font-family:inherit; font-weight:800; font-size:1rem;
  transition:.2s; box-shadow:0 8px 30px rgba(255,77,109,.35);
}
.hard-submit:hover{ transform:translateY(-2px) scale(1.03); }
.feedback{ min-height:44px; margin-top:26px; font-size:1.3rem; font-weight:900; text-align:center; }
.feedback.good{ color:var(--good); animation:pop .3s ease; }
.feedback.bad{ color:var(--bad); animation:pop .3s ease; }
.feedback .why{ display:block; font-size:.95rem; font-weight:600; color:#cfcfe4; margin-top:6px; }
.continue-btn{
  display:none; margin:18px auto 0; padding:14px 46px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(90deg,#7c5cff,#00e0c6); color:#fff; font-family:inherit; font-weight:900; font-size:1.05rem;
  transition:.2s; box-shadow:0 10px 30px rgba(124,92,255,.4); animation:pop .3s ease;
}
.continue-btn.show{ display:block; }
.continue-btn:hover{ transform:translateY(-2px) scale(1.04); }
body.shake{ animation:shake .5s ease; }
@keyframes shake{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-14px,4px)} 25%{transform:translate(12px,-6px)}
  40%{transform:translate(-10px,-4px)} 55%{transform:translate(9px,5px)} 70%{transform:translate(-6px,2px)} 85%{transform:translate(4px,-2px)}
}
body.flash-red::after{
  content:''; position:fixed; inset:0; background:radial-gradient(circle, transparent 40%, rgba(255,40,70,.35)); z-index:40; pointer-events:none; animation:fadeout .6s ease forwards;
}
@keyframes fadeout{ to{opacity:0} }
.float-pts{ position:fixed; font-weight:900; font-size:1.6rem; z-index:70; pointer-events:none; animation:floatup 1.1s ease forwards; }
@keyframes floatup{ from{opacity:1; transform:translateY(0)} to{opacity:0; transform:translateY(-70px)} }
/* ---------- points pop: win = animated flame +N · lose = melting ice −N ---------- */
.pts-pop{ position:fixed; z-index:95; pointer-events:none; font-weight:900; font-size:1.9rem; display:flex; align-items:center; gap:8px; animation:ptspop 1.15s ease-out forwards; text-shadow:0 3px 14px rgba(0,0,0,.65); }
.pts-pop .flame.lit{ font-size:2rem; }
@keyframes ptspop{
  0%{ opacity:0; transform:translate(-50%,10px) scale(.4); }
  18%{ opacity:1; transform:translate(-50%,-12px) scale(1.15); }
  70%{ opacity:1; transform:translate(-50%,-44px) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-68px) scale(.9); }
}
.ice-melt{ display:inline-block; font-size:2rem; transform-origin:50% 100%; animation:melt 1.15s ease-in forwards; filter:drop-shadow(0 0 8px rgba(120,190,255,.7)); }
@keyframes melt{
  0%{ transform:scale(1); }
  55%{ transform:scale(1.08,.88) translateY(3px); }
  100%{ transform:scale(1.25,.5) translateY(10px); }
}
.cal-bounce{ display:inline-block; font-size:2rem; animation:calpop 1.15s ease-out; }
@keyframes calpop{
  0%{ transform:scale(.4) rotate(-14deg); }
  35%{ transform:scale(1.25) rotate(8deg); }
  60%{ transform:scale(1) rotate(0); }
  100%{ transform:scale(1.05); }
}

/* ---------- first-visit install tip toast ---------- */
#installToast{
  position:fixed; left:50%; bottom:92px; z-index:75; transform:translate(-50%,20px);
  display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:14px;
  background:#1c1c34; border:1px solid var(--border); box-shadow:0 14px 40px rgba(0,0,0,.55);
  font-size:.9rem; cursor:pointer; opacity:0; pointer-events:none; transition:.3s;
  max-width:min(430px,92vw);
}
#installToast.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
#installToastX{
  margin-left:4px; flex:none; width:26px; height:26px; border:none; border-radius:8px;
  background:rgba(255,255,255,.08); color:var(--dim); cursor:pointer; font-size:.8rem;
}
#installToastX:hover{ color:var(--txt); background:rgba(255,255,255,.16); }
.confetti{ position:fixed; width:10px; height:10px; z-index:70; pointer-events:none; border-radius:2px; animation:conf 1.4s ease-in forwards; }
@keyframes conf{ 0%{opacity:1; transform:translate(0,0) rotate(0)} 100%{opacity:0; transform:translate(var(--dx),var(--dy)) rotate(540deg)} }

/* ---------- results ---------- */
.results-card{ text-align:center; background:var(--card); border:1px solid var(--border); border-radius:28px; padding:52px 34px; backdrop-filter:blur(8px); }
.results-card h2{ font-size:2.2rem; font-weight:900; }
.results-card .sub{ color:var(--dim); margin-top:6px; }
.res-stats{ display:flex; gap:14px; justify-content:center; margin:30px 0; flex-wrap:wrap; }
.res-stat{ background:rgba(255,255,255,.07); border:1px solid var(--border); border-radius:18px; padding:20px 10px; min-width:120px; }
.res-stat b{ font-size:1.8rem; display:block;margin-bottom: 4px;}
.res-stat span{ font-size:.8rem; color:var(--dim); text-transform:uppercase; letter-spacing:1px; }
.next-subj{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px; }
.next-btn{
  padding:14px 24px; border-radius:14px; border:1px solid var(--border); cursor:pointer; color:#fff;
  font-family:inherit; font-weight:800; font-size:1rem; transition:.2s;
}
.next-btn:hover{ transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.5); }

/* ---------- SERIOUS CTA (bottom bar, right) ---------- */
.serious-cta{
  padding:19px 34px; border-radius:999px; border:none; cursor:pointer;
  background:linear-gradient(90deg,#ffc94d,#ff4d6d); color:#1a0b00; font-family:inherit;
  font-weight:900; font-size:1.15rem; letter-spacing:.4px;
  box-shadow:0 10px 36px rgba(255,120,60,.45); transition:.2s;
  animation:ctapulse 2.6s ease-in-out infinite;
  line-height:1rem;
}
@keyframes ctapulse{ 0%,100%{box-shadow:0 10px 36px rgba(255,120,60,.45)} 50%{box-shadow:0 10px 52px rgba(255,120,60,.8)} }
.serious-cta.serious-member{ background:linear-gradient(90deg,#2ee6a8,#00b4ff); color:#00130c; animation:none; }

/* ---------- modal ---------- */
.modal-back{ position:fixed; inset:0; background:rgba(5,5,14,.75); backdrop-filter:blur(6px); z-index:80; display:none; align-items:center; justify-content:center; padding:20px; }
.modal-back.open{ display:flex; animation:fadein .25s ease; }
.modal{ position:relative; width:min(460px,94vw); background:#16162c; border:1px solid var(--border); border-radius:26px; padding:30px; text-align:center; animation:pop .25s ease; max-height:90vh; max-height:90svh; overflow-y:auto; }
.modal.wide{ width:min(640px,94vw); }
.modal h2{ font-size:1.7rem; font-weight:900; }
.modal .price{ font-size:3rem; font-weight:900; margin:14px 0 2px; background:linear-gradient(90deg,#ffc94d,#ff4d6d); -webkit-background-clip:text; background-clip:text; color:transparent; }
.modal ul.feature-list{ text-align:center; margin:22px 0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.modal ul.feature-list li{ display:flex; gap:10px; align-items:center; justify-content:center; font-size:1.2rem; color:#e6e6f2; }
.modal .pay-btn{
  width:100%; padding:16px; border-radius:16px; border:none; cursor:pointer; margin-top:12px;
  background:linear-gradient(90deg,#ffc94d,#ff4d6d); font-family:inherit; font-weight:900; font-size:1.05rem; color:#1a0b00; transition:.2s;
}
.modal .pay-btn:hover{ transform:scale(1.02); }
.wallet-row{ display:flex; gap:10px; margin-top:12px; }
.wallet-btn{
  flex:1; padding:14px; border-radius:16px; border:1px solid rgba(255,255,255,.2); background:#000;
  color:#fff; font-family:inherit; font-weight:800; font-size:1rem; cursor:pointer; transition:.2s;
}
.wallet-btn:hover{ transform:scale(1.03); border-color:rgba(255,255,255,.45); }
.modal .ghost{ background:none; border:none; color:var(--dim); margin-top:14px; cursor:pointer; font-family:inherit; font-size:.9rem; }
.modal .sq{ font-size:.75rem; color:var(--dim); margin-top:12px; }
.auth-modal input{
  width:100%; padding:14px 16px; margin-top:12px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--txt); font-family:inherit; font-size:1rem; outline:none;
}
.social-row{ display:flex; gap:10px; margin-top:14px; }
.social-row button{
  flex:1; padding:13px; border-radius:14px; border:1px solid var(--border); background:rgba(255,255,255,.06);
  color:var(--txt); font-family:inherit; font-weight:700; cursor:pointer; font-size:.95rem; transition:.2s;
}
.social-row button:hover{ background:rgba(255,255,255,.12); }
.toast{
  position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:90;
  background:#1d1d38; border:1px solid var(--border); padding:13px 22px; border-radius:14px;
  font-weight:700; display:none; animation:pop .25s ease; box-shadow:0 14px 40px rgba(0,0,0,.5);
  max-width:92vw;
}

/* Square card element container */
#card-container{ min-height:90px; margin-top:14px; padding:6px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--border); }
.pay-status{ font-size:.85rem; margin-top:10px; min-height:20px; }
.pay-status:empty{ display:none; }
.pay-status.err{ color:var(--bad); }
.pay-status.ok{ color:var(--good); }

/* ---------- toggle switch ---------- */
.switch-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 4px; border-bottom:1px solid var(--border); text-align:left; }
.switch-row:last-of-type{ border-bottom:none; }
.switch-row .lbl b{ display:block; font-size:.98rem; }
.switch-row .lbl span{ font-size:.8rem; color:var(--dim); }
.tgl{ position:relative; width:52px; height:28px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid var(--border); cursor:pointer; transition:.2s; flex:none; }
.tgl::after{ content:''; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s; }
.tgl.on{ background:linear-gradient(90deg,#7c5cff,#00e0c6); border-color:transparent; }
.tgl.on::after{ left:27px; }

/* ---------- stat grid ---------- */
#billingBody .stat-grid{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.stat-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:30px; }
.stat-grid .res-stat{ min-width:0; }

.abtn{ padding:8px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.07); color:var(--txt); font-family:inherit; font-weight:700; font-size:.82rem; cursor:pointer; transition:.15s; white-space:nowrap; }
.abtn:hover{ background:rgba(255,255,255,.14); }
.abtn.primary{ background:linear-gradient(90deg,#7c5cff,#00e0c6); border-color:transparent; color:#fff; }
.abtn.danger{ border-color:rgba(255,77,109,.5); color:#ff8ba0; }
.abtn.good{ border-color:rgba(46,230,168,.5); color:#7df0c6; }

/* ---------- SERIOUS banner (free limit reached) ---------- */
.serious-banner{
  margin:34px auto 0; max-width:560px; text-align:center;
  background:linear-gradient(160deg, rgba(255,201,77,.12), rgba(255,77,109,.12));
  border:2px solid rgba(255,201,77,.5); border-radius:24px; padding:28px 26px;
  animation:pop .35s ease; box-shadow:0 16px 50px rgba(255,120,60,.18);
}
.serious-banner-txt{ font-size:1.15rem; color:#e9e9f4; line-height:1.6; }
.serious-banner-txt b{ color:var(--gold); }
.serious-banner-btn{ margin-top:16px; width:100%; padding:16px; border-radius:16px; border:none; cursor:pointer;
  background:linear-gradient(90deg,#ffc94d,#ff4d6d); font-family:inherit; font-weight:900; font-size:1.05rem; color:#1a0b00; transition:.2s; }
.serious-banner-btn:hover{ transform:scale(1.02); }

/* free limit reached (ALL devices): banner replaces the EASY/HARD mode picker */
#screen-subjects.limit-reached .mode-row{ display:none; }
#screen-subjects.limit-reached .hero-title{ order:1; }
#screen-subjects.limit-reached .serious-banner{ order:2; margin:0 auto 22px; }
#screen-subjects.limit-reached .subj-grid{ order:3; margin-top:0; }
#screen-subjects.limit-reached .free-note{ order:4; }

/* ---------- paywall inline account fields ---------- */
#payAccount{ display:none; }
#payAccount.show{ display:block; }
#payAccount input{
  width:100%; padding:14px 16px; margin-top:12px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--txt); font-family:inherit; font-size:1rem; outline:none;
}
#payAccount input:focus{ border-color:var(--accent2); }



/* ============================================================
   v1.1 additions — logo, header wrap, rockets/flames, leaderboard,
   paywall wrap, results extras, plan badge, responsive
   ============================================================ */

/* ---------- logo: animated book (size locked at end of file) ---------- */
.book-anim{ display:inline-block; transform-origin:50% 80%; animation:bookwiggle 3.2s ease-in-out infinite; }
@keyframes bookwiggle{
  0%,100%{ transform:rotate(0) scale(1); }
  25%{ transform:rotate(-9deg) scale(1.08); }
  55%{ transform:rotate(7deg) scale(1.05); }
  80%{ transform:rotate(-3deg) scale(1.02); }
}

/* ---------- header structure (hstats group + avatar wrap) ---------- */
.hstats{ display:flex; align-items:center; gap:10px; }
.avatar-wrap{ position:relative; display:flex; align-items:center; }
.avatar{ font-size:1.15rem; }

/* ---------- animated rocket (with flame) ---------- */
.rocket{ display:inline-block; position:relative; }
.rocket i{ font-style:normal; display:inline-block; animation:rocketbob 2.4s ease-in-out infinite; }
.rocket::after{
  content:'🔥'; position:absolute; left:-1px; bottom:-5px; font-size:.5em; opacity:.95;
  animation:flick .45s ease-in-out infinite alternate;
}
@keyframes rocketbob{
  0%,100%{ transform:translateY(0) rotate(0); }
  50%{ transform:translateY(-4px) rotate(-7deg); }
}

/* ---------- SERIOUS CTA: animated rocket, intense hover ---------- */
.cta-rocket{
  display:inline-block; position:relative; margin-right:2px; font-size:1.35em;
  animation:rocketbob 2.2s ease-in-out infinite; transition:.2s;
}
.cta-rocket::after{
  content:'🔥'; position:absolute; left:-2px; bottom:-6px; font-size:.55em; opacity:.9;
  animation:flick .45s ease-in-out infinite alternate; transition:.2s;
}
.serious-cta:hover{ transform:scale(1.1); }
.serious-cta:hover .cta-rocket{ animation-duration:.7s; transform:scale(1.18); }
.serious-cta:hover .cta-rocket::after{
  font-size:.85em; filter:drop-shadow(0 0 8px rgba(255,140,0,.95)); opacity:1;
}

/* ---------- leaderboard button (bottom bar, left) ---------- */
.leaderboard-btn{
  display:flex; align-items:center; gap:0; padding:19px 30px; border-radius:999px;
  border:1px solid var(--border); background:var(--card); color:var(--txt);
  font-family:inherit; font-weight:800; font-size:1.15rem; cursor:pointer;
  backdrop-filter:blur(6px); transition:.2s;
  line-height:1rem;
}
.leaderboard-btn:hover{ transform:scale(1.07); background:rgba(255,255,255,.12); box-shadow:0 10px 30px rgba(0,0,0,.45); }
.leaderboard-btn .leaderboard-btn-txt {margin-left: 12px;}
.lb-ladder{ display:inline-block; font-size:1.25em; animation:ladderclimb 2.4s ease-in-out infinite; }
.lb-star{ display:inline-block; font-size:1.25em; animation:startwinkle 1.7s ease-in-out infinite; }
@keyframes ladderclimb{ 0%,100%{ transform:translateY(2px); } 50%{ transform:translateY(-3px); } }
@keyframes startwinkle{
  0%,100%{ transform:scale(1) rotate(0); filter:drop-shadow(0 0 2px rgba(255,201,77,.6)); }
  50%{ transform:scale(1.28) rotate(14deg); filter:drop-shadow(0 0 9px rgba(255,201,77,.95)); }
}

/* ---------- leaderboard modal ---------- */
.lb-boards{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:20px; margin-top:26px; text-align:left; }
.modal.wide.lb-modal{ width:min(920px,94vw); }
.lb-pct{ color:var(--dim); font-weight:700; font-size:.85em; }
.lb-board h3{ font-size:1.15rem; margin-bottom:14px; text-align:center; }
.lb-row{
  display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:12px;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); margin-bottom:9px;
}
.lb-row.top{ background:rgba(255,201,77,.09); border-color:rgba(255,201,77,.35); }
.lb-medal{ width:34px; text-align:center; flex:none; font-size:1.1rem; }
.lb-rank{ color:var(--dim); font-weight:800; }
.lb-name{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:1.02rem; }
.lb-serious{ font-size:.8em; }
.lb-score{ font-weight:900; white-space:nowrap; font-size:1.05rem; }
.lb-you{ margin-top:10px; }
.lb-position{
  text-align:center; padding:13px 14px; border-radius:12px; font-size:1rem; color:#cfcfe4; margin-top:8px;
  background:rgba(124,92,255,.1); border:1px dashed rgba(124,92,255,.5);
}
.lb-position b{ color:#fff; }
.lb-congrats{
  text-align:center; padding:13px 14px; border-radius:12px; font-size:1rem; font-weight:700; color:var(--gold); margin-top:8px;
  background:rgba(255,201,77,.1); border:1px solid rgba(255,201,77,.45); animation:pop .3s ease;
}

/* ---------- modals: wrap, outside close ✕, outside plain-text link ---------- */
.modal-wrap{ position:relative; display:flex; flex-direction:column; align-items:center; }
.pay-modal{ width:min(560px,94vw); }
.modal-x{
  position:absolute; top:-16px; right:-10px; z-index:2;
  width:38px; height:38px; border-radius:50%; cursor:pointer;
  background:#1c1c34; border:1px solid var(--border); color:var(--txt);
  font-size:1rem; font-weight:800; transition:.2s; display:grid; place-items:center;
}
.modal-x:hover{ background:rgba(255,77,109,.25); border-color:var(--bad); transform:scale(1.1); }

/* ---------- results: back-to-subjects button ---------- */
.back-subjects{
  display:block; margin:0 auto 16px; padding:11px 24px; border-radius:999px;
  background:var(--card); border:1px solid var(--border); color:var(--txt);
  font-family:inherit; font-weight:800; font-size:.95rem; cursor:pointer; transition:.2s;
}
.back-subjects:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }

/* ---------- settings plan badge ---------- */
.plan-badge{
  margin-top:16px; padding:14px 18px; border-radius:16px; text-align:center;
  border:1px solid var(--border); background:rgba(255,255,255,.05);
}
.plan-badge b{ display:inline; margin-top:6px; font-size:1.05rem; letter-spacing:.5px; }
.plan-badge > span:last-child{ display:block; color:var(--dim); font-size:.85rem; margin-top:7px; }
.plan-badge.serious{
  background:linear-gradient(90deg, rgba(255,201,77,.14), rgba(255,77,109,.14));
  border-color:rgba(255,201,77,.5);
}
.plan-badge.free{ background:rgba(0,224,198,.08); border-color:rgba(0,224,198,.4); }


@media (max-width:900px){
  .lb-boards{ grid-template-columns:1fr; }
}

/* tablets & below: logo left, scores + menu right */
@media (max-width:1024px){
  .hcenter{ flex:none; justify-content:flex-start; }
  .hright{ margin-left:auto; }
}

/* desktops (bigger than tablets): logo truly centered across the full header width —
   absolute centering so the scores/menu cluster on the right no longer pushes it off-center */
@media (min-width:1025px){
  .app-header{ justify-content:flex-end; }
  .hcenter{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }
}

@media (max-width:640px){
  .app-header{ padding:10px 14px; }
  .dropdown{ top:54px; }
  .brand{ font-size:1rem; }
  .pill{ padding:7px 12px; font-size:.85rem; }

  /* subjects: 2 per row, full width */
  .subj-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .subj-card{ padding:20px 12px 16px; border-radius:18px; }
  .subj-card .emoji{ font-size:2.2rem; }

  main{ padding:30px 15px 15px; }
  .screen, .results-card, .quiz-wrap{ width:100%; }
  .results-card{ padding:36px 18px; }
  .res-stats{ gap:10px; }
  .res-stat{ padding:14px 16px; min-width:96px; }
  .hero-title h1{ font-size:2rem;line-height: 1.1;padding: 10px 10vw;}
  .hero-title p{ font-size:.95rem; }
  .mode-row{ margin-top:16px; }

  /* bottom bar: full-width pill CTA; leaderboard button hides, its menu link appears */
  .bottom-bar{ justify-content:center; padding:10px 14px; }
  .serious-cta{ width:100%; border-radius:999px; }

  #lbBtn{ display:none; }
  .dropdown .mobile-only{ display:flex; }

  /* modals full width, tighter side padding (top/bottom padding unchanged) */
  .modal, .pay-modal{ width:100%; }
  .modal{ padding-left:15px; padding-right:15px; }

  /* URL-bar-safe modals: backdrop itself scrolls, content safe-centers —
     short modals stay centered, tall ones start at the top instead of
     being clipped behind the browser's URL bar */
  .modal-back{ padding:max(14px, env(safe-area-inset-top)) 14px 14px; align-items:flex-start; overflow-y:auto; }
  .modal-wrap{ width:100%; margin:auto; }
  .modal-back > .modal{ margin:auto; }
  .modal-x{ right:10px; top:10px; }

  /* compact pay modal: title + price on one row */
  .pay-head h2{ font-size:1.35rem; }
  .pay-head .price{ margin:0; font-size:1.6rem; }
}

.pay-head{ display:flex; align-items:baseline; justify-content:center; gap:10px; flex-wrap:wrap; }
.pay-modal .flex-inline {margin-top: 15px;}

@media (max-width:480px){
  main {padding: 10px 15px;}
  .sentence {font-size: clamp(2rem,4.2vw,2.7rem);padding: 5px 15px;line-height: 1.15;}
  .qmeta {margin-bottom: 20px;}
  .qmeta .progress {width: 100px;}
  .answers .ans {padding: 12px 20px;}
  .answers {margin-top: 40px;}
  .modal .feature-list li{ font-size:1rem; }
  .serious-banner {padding: 16px}
  .hstats {gap:5px}
  .pill {padding: 5px 10px;}
  .modal .price {margin: 2px 0;}
  .modal ul.feature-list {gap: 10px;}
  .modal ul.feature-list > li {align-items: flex-start;}
  .modal ul.feature-list li > span {display: flex;flex-direction: row;flex-wrap: wrap;gap: 0 0.3em;}
  .pay-modal .sq {margin-top: 0;}
  .pay-modal .flex-inline {gap: 0 0.75em;margin-top: 20px;}
  .serious-banner.upsell-big .serious-banner-btn{display:none}
  .results-card .res-stats .res-stat:last-child {display:none}
}

/* phones: keep form fields at 16px+ so iOS doesn't auto-zoom on focus */
@media (max-width:640px){
  input, select, textarea{ font-size:16px !important; }
}

/* ============================================================
   v1.1 polish round 2
   ============================================================ */

/* subjects: all on ONE line on screens bigger than iPads */
@media (min-width:1025px){
  .subj-grid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); gap:18px; }
}

/* "maybe later" / "close": plain white text, animated underline on hover */
.ghost.modal-outlink{
  background:none; border:none; color:#fff; cursor:pointer; font-family:inherit;
  font-size:1rem; margin-top:18px; padding:6px 2px; position:relative;
}
.ghost.modal-outlink::after{
  content:''; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:#fff; transform:scaleX(0); transform-origin:left; transition:transform .35s ease;
}
.ghost.modal-outlink:hover{ text-decoration:none; color:#fff; }
.ghost.modal-outlink:hover::after{ transform:scaleX(1); }

/* auth modal: less cramped */
.auth-modal h2{ margin-bottom:8px; }
.auth-modal input{ margin-top:14px; }
.auth-modal .pay-btn{ margin-top:20px; }
.auth-modal .social-row{ margin-top:16px; }
.auth-modal .ghost{ margin-top:16px; }
#authReset p{ margin-bottom:8px; }

/* auth modal: full-width login/register tabs */
#authMain{ margin-top:20px; }
.auth-tabs{
  display:flex; width:100%; gap:4px; padding:4px; margin-bottom:25px;
  background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:14px;
}
.auth-tab{
  flex:1; padding:12px 8px; border:none; border-radius:10px; background:transparent;
  color:var(--dim); font-family:inherit; font-size:.95rem; font-weight:800; cursor:pointer; transition:.2s;
}
.auth-tab:hover{ color:var(--txt); }
.auth-tab.on{ background:linear-gradient(90deg,#7c5cff,#00e0c6); color:#fff; box-shadow:0 6px 18px rgba(124,92,255,.35); }

/* install modal: per-device instruction panels (tabs reuse .auth-tab styles) */
.itab{ display:none; margin-top:16px; color:#cfcfe4; font-size:.9rem; line-height:1.65; text-align:left; }
.itab.on{ display:block; }
.itab b{ color:var(--txt); }

@media (max-width:480px){
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .stat-grid .res-stat{ padding:14px 8px; min-width:0; }
  .stat-grid .res-stat b{ font-size:1.35rem; }
}

/* results upsell: big, inviting, icon overflowing a round badge */
.serious-banner.upsell-big{
  position:relative; max-width:640px; margin-top:78px; padding:64px 36px 36px;
  border-width:2px;
}
.upsell-icon{
  position:absolute; top:-44px; left:50%; transform:translateX(-50%);
  width:84px; height:84px; border-radius:50%; overflow:visible;
  background:radial-gradient(circle at 30% 30%, #ffd97a, #ff9d2e 55%, #ff4d6d);
  border:3px solid rgba(255,255,255,.3);
  display:grid; place-items:center;
  box-shadow:0 14px 40px rgba(255,120,60,.5);
}
.upsell-icon .rocket{ font-size:5rem; line-height:1; }
.upsell-icon .rocket::after{ font-size:.42em; left:4px; bottom:2px; }
.upsell-title{ font-size:1.75rem; font-weight:900; }
.upsell-sub{ color:#e9e9f4; font-size:1.12rem; margin-top:8px; }
.upsell-sub b{ color:var(--gold); }
.upsell-perks{
  list-style:none; padding:0; margin:22px auto 4px; max-width:490px; text-align:left;
  display:flex; flex-direction:column; gap:15px;
}
.upsell-perks li{
  display:flex; gap:12px; align-items:flex-start; justify-content:flex-start; text-align:left;
  font-size:1.12rem; color:#e6e6f2; line-height:1.25;
}
.upsell-big .serious-banner-btn{ margin-top:24px; padding:19px; font-size:1.18rem; }
@media (max-width:640px){
  .serious-banner.upsell-big{ padding:60px 20px 26px; margin-top:72px; }
  .upsell-perks li{ font-size:1.02rem; }
}

/* ---------- v1.2: question difficulty badge ---------- */
.diff-badge{
  display:inline-flex; align-items:center; gap:3px; padding:7px 14px; border-radius:999px;
  background:rgba(255,201,77,.1); border:1px solid rgba(255,201,77,.4);
  font-size:.9rem; line-height:1; user-select:none;
}
.diff-badge .dstar{
  display:inline-block; animation:startwinkle 1.7s ease-in-out infinite;
}
.diff-badge .flame{ font-size:.95rem; }


/* ============================================================
   v1.11 — 3-section flex layout (header / content / bottom bar)
   ============================================================ */

/* bottom bar: leaderboard left, SERIOUS CTA right — normal flow, not fixed */
.bottom-bar{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; width:100%; padding:14px 20px;
}

/* leaderboard link inside the user menu — shown on mobile only */
.mobile-only{ display:none; }


/* ---------- tooltips as modals under 1000px (fixed-width hover tips overflow small layouts) ---------- */
@media (max-width:999px){
  .has-tip .tip{ display:none; }
  .has-tip{ cursor:pointer; }
}
.tip-modal{ text-align:left; line-height:1.6; font-size:.95rem; color:#cfcfe4; }
.tip-modal b{ color:var(--txt); }
.tip-modal .good{ color:var(--good); font-weight:700; }
.tip-modal .bad{ color:var(--bad); font-weight:700; }


/* ---------- report question ---------- */
.feedback{ position:relative; width:min(560px,92vw); }
.feedback.bad{ padding-right:40px; }
.report-btn{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:none; border:none; font-size:1.15rem; cursor:pointer;
  opacity:.7; transition:.2s; padding:6px; filter:grayscale(.3);
}
.report-btn:hover{ opacity:1; transform:translateY(-50%) scale(1.3); filter:none; }
.report-modal input, .report-modal textarea{
  width:100%; padding:14px 16px; margin-top:12px; border-radius:14px; border:1px solid var(--border);
  background:rgba(255,255,255,.06); color:var(--txt); font-family:inherit; font-size:1rem; outline:none;
  resize:vertical;
}
.report-modal input:focus, .report-modal textarea:focus{ border-color:var(--accent2); }
.report-modal input[readonly]{ opacity:.55; cursor:not-allowed; }
.rep-context{ color:var(--dim); font-size:.9rem; margin-top:12px; }
.rep-wrong{ color:#ff9fb1; margin-top:6px; }