/* ==========================================================================
   DayQuizz 2.0 — design system
   Keeps: Outfit, the space background (halos + hyperspeed stars), every emoji
   icon and animation (flame, rocket, ladder, star, ice, confetti).
   Changes: crisper surfaces, one radius/spacing scale, stronger hierarchy,
   collectible subject cards, bottom-sheet feedback, segmented controls.
   ========================================================================== */
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
:root{
  --bg:#06060f;
  --ink:#f6f6fc; --ink-2:#d0d0e2; --dim:#a0a0bb; --mute:#6f6f8c;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.24);
  --s1:rgba(255,255,255,.035); --s2:rgba(255,255,255,.06); --s3:rgba(255,255,255,.1); --s4:rgba(255,255,255,.15);
  --panel:#10101e; --panel-2:#151527;
  --violet:#7c5cff; --violet-2:#a68bff; --teal:#00e0c6; --good:#2ee6a8; --bad:#ff4d6d;
  --gold:#ffc94d; --orange:#ff9d2e; --pink:#ff2e88; --ice:#7ecbff;
  --g-brand:linear-gradient(95deg,#7c5cff 0%,#4f7dff 45%,#00e0c6 100%);
  --g-fire:linear-gradient(95deg,#ffd166 0%,#ff9142 45%,#ff4d6d 100%);
  --g-hard:linear-gradient(95deg,#ff9d2e,#ff4d6d);
  --g-good:linear-gradient(95deg,#2ee6a8,#00c2e0);
  --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:28px;
  --hl:inset 0 1px 0 rgba(255,255,255,.08);
  --shadow:0 30px 70px -24px rgba(0,0,0,.75);
  --ease:cubic-bezier(.2,.8,.2,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
  --wrap:1200px;
}
html{ -webkit-text-size-adjust:100%; }
body{
  font-family:'Outfit',system-ui,sans-serif; color:var(--ink); background:var(--bg);
  min-height:100svh; overflow-x:hidden; font-feature-settings:"tnum" 0;
}
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
.num{ font-variant-numeric:tabular-nums; }
.grad-txt{ background:var(--g-brand); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fire-txt{ background:var(--g-fire); -webkit-background-clip:text; background-clip:text; color:transparent; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- background: halos + starfield (kept, calmer) ---------- */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 600px at 100% 100%, rgba(255,46,136,.10), transparent 60%),
    var(--bg); }
.orb{ position:absolute; border-radius:50%; filter:blur(100px); opacity:.34; }
.orb1{ width:560px; height:560px; background:#5b2eff; top:-14%; left:-10%; animation:roam1 42s ease-in-out infinite; }
.orb2{ width:520px; height:520px; background:#ff2e88; bottom:-16%; right:-10%; opacity:.26; animation:roam2 55s ease-in-out infinite; }
.orb3{ width:420px; height:420px; background:#00c2a8; top:38%; left:58%; opacity:.22; animation:roam3 48s ease-in-out infinite; }
@keyframes roam1{ 0%,100%{transform:translate(0,0) scale(1)} 30%{transform:translate(34vw,20vh) scale(1.25)} 65%{transform:translate(12vw,60vh) scale(.85)} }
@keyframes roam2{ 0%,100%{transform:translate(0,0) scale(1.1)} 40%{transform:translate(-40vw,-30vh) scale(.85)} 70%{transform:translate(-15vw,-50vh) scale(1.2)} }
@keyframes roam3{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40vw,-20vh) scale(1.3)} }
#stars{ position:fixed; inset:0; width:100%; height:100%; z-index:1; pointer-events:none; opacity:.85; }
.lite .orb{ animation:none; }

/* ---------- app shell ---------- */
.app{ position:relative; z-index:2; min-height:100svh; display:flex; flex-direction:column; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.screen{ display:none; flex:1; }
.screen.on{ display:block; animation:rise .45s var(--ease); }
@keyframes rise{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }
@keyframes pop{ from{opacity:0; transform:scale(.94)} to{opacity:1; transform:none} }

/* ---------- early-bird ribbon ---------- */
.ribbon{
  position:relative; z-index:3; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:9px 48px; font-size:.86rem; font-weight:500; color:#ffe9c2; text-align:center;
  background:linear-gradient(90deg, rgba(255,201,77,.13), rgba(255,77,109,.16) 50%, rgba(255,201,77,.13));
  border-bottom:1px solid rgba(255,201,77,.22);
}
.ribbon b{ color:#fff; font-weight:800; }
.ribbon .left{ color:var(--gold); font-weight:700; }
.ribbon .claim{ font-weight:800; color:#fff; padding:4px 12px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); white-space:nowrap; transition:.2s; }
.ribbon .claim:hover{ background:rgba(255,255,255,.22); }
.ribbon .x{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:26px; height:26px; border-radius:8px; color:#ffe9c2; opacity:.7; }
.ribbon .x:hover{ opacity:1; background:rgba(255,255,255,.1); }
.ribbon .short{ display:none; }

/* ---------- top bar ---------- */
.topbar{ position:relative; z-index:20; }
.topbar .wrap{ display:flex; align-items:center; gap:12px; height:72px; }
.brand{ display:flex; align-items:center; gap:10px; font-weight:900; font-size:1.25rem; letter-spacing:-.01em; cursor:pointer; }
.brand img{ width:38px; height:38px; animation:bookwiggle 3.2s ease-in-out infinite; transform-origin:50% 80%; }
@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)} }
.top-right{ margin-left:auto; display:flex; align-items:center; gap:8px; }
.stat-chip{
  height:40px; display:flex; align-items:center; gap:7px; padding:0 14px; border-radius:999px;
  background:var(--s2); border:1px solid var(--line); font-weight:800; font-size:.95rem; box-shadow:var(--hl);
}
.stat-chip small{ font-weight:600; color:var(--dim); font-size:.78rem; }
.avatar{
  width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:900; font-size:1rem;
  background:var(--g-brand); box-shadow:0 0 0 2px rgba(255,255,255,.18), 0 6px 18px rgba(124,92,255,.35); transition:.2s var(--spring);
}
.avatar:hover{ transform:scale(1.08); }
.avatar.guest{ background:var(--s3); box-shadow:0 0 0 1px var(--line-2); font-size:1.05rem; }
.avatar.serious{ background:var(--g-fire); color:#2a0e00; box-shadow:0 0 0 2px rgba(255,201,77,.5), 0 6px 18px rgba(255,120,60,.4); }
.login-btn{ height:40px; padding:0 16px; border-radius:999px; font-weight:800; font-size:.92rem; background:var(--s2); border:1px solid var(--line-2); }
.login-btn:hover{ background:var(--s3); }

/* ---------- emoji animations (kept from v1) ---------- */
.flame{ display:inline-block; transform-origin:50% 90%; }
.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)} }
.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:-2px; bottom:-5px; font-size:.5em; animation:flick .45s ease-in-out infinite alternate; }
@keyframes rocketbob{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-4px) rotate(-7deg)} }
.lb-ladder{ display:inline-block; animation:ladderclimb 2.4s ease-in-out infinite; }
.lb-star{ display:inline-block; 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))} }
.bob{ display:inline-block; animation:rocketbob 2.4s ease-in-out infinite; }
.wiggle{ display:inline-block; animation:bookwiggle 3s ease-in-out infinite; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px; height:54px; padding:0 26px;
  border-radius:999px; font-weight:800; font-size:1.02rem; letter-spacing:.1px; transition:transform .2s var(--spring), box-shadow .2s, background .2s;
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); }
.btn:active{ transform:translateY(0) scale(.98); }
.btn.block{ width:100%; }
.btn.sm{ height:42px; padding:0 18px; font-size:.92rem; }
.btn.lg{ height:60px; font-size:1.1rem; }
.btn-brand{ background:var(--g-brand); color:#fff; box-shadow:0 12px 30px -8px rgba(92,110,255,.65), var(--hl); }
.btn-fire{ background:var(--g-fire); color:#2a0e00; box-shadow:0 12px 30px -8px rgba(255,110,70,.7), inset 0 1px 0 rgba(255,255,255,.35); }
.btn-hard{ background:var(--g-hard); color:#fff; box-shadow:0 12px 30px -8px rgba(255,90,80,.65); }
.btn-good{ background:var(--g-good); color:#03140e; box-shadow:0 12px 30px -8px rgba(46,230,168,.55); }
.btn-white{ background:#fff; color:#0b0b18; }
.btn-ghost{ background:var(--s2); border:1px solid var(--line-2); color:var(--ink); }
.btn-ghost:hover{ background:var(--s3); }
.link-out{ display:block; margin:16px auto 0; color:var(--dim); font-weight:600; font-size:.95rem; position:relative; padding:4px 2px; }
.link-out:hover{ color:#fff; }
.icon-btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--s2); border:1px solid var(--line); font-size:1rem; color:var(--ink-2); transition:.2s; flex:none; }
.icon-btn:hover{ background:var(--s3); color:#fff; }

/* ---------- chips & pills ---------- */
.chip{ display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; font-size:.82rem; font-weight:700; background:var(--s2); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
.chip.gold{ background:rgba(255,201,77,.12); border-color:rgba(255,201,77,.35); color:var(--gold); }
.chip.good{ background:rgba(46,230,168,.12); border-color:rgba(46,230,168,.35); color:var(--good); }
.chip.hard{ background:linear-gradient(90deg,rgba(255,157,46,.16),rgba(255,77,109,.16)); border-color:rgba(255,120,80,.45); color:#ffb59a; }
.chip.violet{ background:rgba(124,92,255,.14); border-color:rgba(124,92,255,.4); color:#c7b8ff; }
.eyebrow{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--good); box-shadow:0 0 0 0 rgba(46,230,168,.6); animation:live 2s infinite; }
@keyframes live{ 0%{box-shadow:0 0 0 0 rgba(46,230,168,.55)} 70%{box-shadow:0 0 0 8px rgba(46,230,168,0)} 100%{box-shadow:0 0 0 0 rgba(46,230,168,0)} }

/* ---------- panels ---------- */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--hl), var(--shadow);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}

/* ==========================================================================
   HOME
   ========================================================================== */
.hero{ text-align:center; padding:26px 0 6px; }
.hero .today{ display:inline-flex; align-items:center; gap:10px; padding:6px 14px 6px 8px; border-radius:999px; background:var(--s2); border:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--ink-2); }
.hero .today .tag{ display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; background:rgba(46,230,168,.12); color:var(--good); font-weight:800; font-size:.72rem; letter-spacing:.08em; }
.hero .today .sep{ width:3px; height:3px; border-radius:50%; background:var(--mute); }
.hero h1{ margin-top:18px; font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:900; letter-spacing:-.035em; line-height:1.02; }
.hero p{ margin-top:12px; color:var(--dim); font-size:1.08rem; }

.mode-wrap{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:26px; }
.seg{ position:relative; display:inline-grid; grid-auto-flow:column; grid-auto-columns:1fr; padding:5px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid var(--line); box-shadow:var(--hl); }
.seg button{ position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:8px; height:46px; padding:0 22px; border-radius:999px; font-weight:800; font-size:.98rem; color:var(--dim); transition:color .25s; white-space:nowrap; }
.seg button small{ font-weight:600; font-size:.8rem; opacity:.8; }
.seg button.on{ color:#fff; }
.seg .thumb{ position:absolute; z-index:0; top:5px; bottom:5px; left:5px; width:calc((100% - 10px) / var(--n,2)); border-radius:999px;
  background:linear-gradient(95deg,#7c5cff,#4f7dff); box-shadow:0 8px 24px -6px rgba(124,92,255,.7); transition:transform .45s var(--spring), background .3s; }
.seg[data-i="1"] .thumb{ transform:translateX(100%); }
.seg[data-i="2"] .thumb{ transform:translateX(200%); }
.seg.hard .thumb{ background:var(--g-hard); box-shadow:0 8px 24px -6px rgba(255,90,80,.7); }
.help{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:var(--s2); border:1px solid var(--line); color:var(--dim); font-weight:900; font-size:.9rem; }
.help:hover{ color:#fff; background:var(--s3); }

/* ---------- subject cards ---------- */
.subjects{ display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:30px; perspective:900px; }
.sc{
  --g:linear-gradient(150deg,#7b5cff,#4a2fd6 55%,#2a1a8a); --glow:rgba(123,92,255,.55);
  position:relative; isolation:isolate; overflow:hidden; aspect-ratio:4/5; border-radius:24px; padding:14px;
  display:flex; flex-direction:column; text-align:left; background:var(--g);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -60px 70px -20px rgba(0,0,0,.35), 0 22px 40px -18px var(--glow);
  transition:transform .35s var(--spring), box-shadow .3s; transform-style:preserve-3d;
}
.sc::before{ /* top-left gloss */
  content:''; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(130% 75% at 0% 0%, rgba(255,255,255,.32), transparent 52%);
}
.sc::after{ /* shine sweep on hover */
  content:''; position:absolute; inset:-20%; z-index:2; pointer-events:none;
  background:linear-gradient(105deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%);
  transform:translateX(-80%); transition:transform .8s var(--ease);
}
.sc:hover{ transform:translateY(-8px) rotateX(5deg); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -60px 70px -20px rgba(0,0,0,.3), 0 34px 60px -18px var(--glow); }
.sc:hover::after{ transform:translateX(80%); }
.sc:hover .sc-ic{ transform:scale(1.1) rotate(-6deg); }
.sc-wm{ position:absolute; right:-18%; bottom:-6%; z-index:-1; font-size:clamp(6rem,10vw,8.5rem); line-height:1; opacity:.22; transform:rotate(-14deg); filter:grayscale(1) brightness(1.8); mix-blend-mode:soft-light; pointer-events:none; }
.sc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:6px; }
.sc-ic{ width:54px; height:54px; border-radius:17px; display:grid; place-items:center; font-size:1.85rem; background:rgba(255,255,255,.17); border:1px solid rgba(255,255,255,.28); box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.18); transition:transform .4s var(--spring); }
.sc-ic span{ filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.sc-tag{ display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:999px; font-size:.68rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; background:rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.2); color:#fff; backdrop-filter:blur(6px); white-space:nowrap; }
.sc-tag.free{ background:#fff; color:#1a1030; border-color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.sc-tag.done{ background:rgba(46,230,168,.95); color:#03140e; border-color:transparent; }
.sc-body{ margin-top:auto; }
.sc-name{ display:block; font-size:1.32rem; font-weight:900; letter-spacing:-.015em; text-shadow:0 2px 10px rgba(0,0,0,.25); }
.sc-desc{ display:block; margin-top:2px; font-size:.82rem; font-weight:500; color:rgba(255,255,255,.82); }
.sc-foot{ display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:11px; border-top:1px solid rgba(255,255,255,.2); font-size:.76rem; font-weight:700; color:rgba(255,255,255,.88); }
.sc-go{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; background:rgba(255,255,255,.2); font-weight:900; transition:.3s var(--spring); }
.sc:hover .sc-go{ background:#fff; color:#1a1030; transform:translateX(3px); }
.sc-prog{ height:5px; border-radius:99px; background:rgba(0,0,0,.25); overflow:hidden; flex:1; margin-right:10px; }
.sc-prog i{ display:block; height:100%; background:#fff; border-radius:99px; }
.mg{ display:flex; gap:3px; }
.mg i{ width:9px; height:9px; border-radius:3px; background:rgba(255,255,255,.25); }
.mg i.ok{ background:#2ee6a8; } .mg i.no{ background:#ff4d6d; } .mg i.late{ background:#ffc94d; }
.sc.locked{ filter:saturate(.45) brightness(.62); }
.sc.locked .sc-go{ display:none; }
.sc.locked:hover{ filter:saturate(.75) brightness(.8); }
.sc .lock{ position:absolute; inset:auto 14px 14px auto; z-index:3; }
.sc.done-card .sc-ic{ background:rgba(0,0,0,.18); }

.g-english{ --g:linear-gradient(150deg,#8467ff 0%,#5236e0 50%,#2c1b94 100%); --glow:rgba(110,80,255,.6); }
.g-spanish{ --g:linear-gradient(150deg,#ff9a4a 0%,#ff4f6a 52%,#b51f5c 100%); --glow:rgba(255,90,90,.55); }
.g-math{ --g:linear-gradient(150deg,#14e0bf 0%,#00a6c8 50%,#0a5cae 100%); --glow:rgba(0,190,200,.5); }
.g-history{ --g:linear-gradient(150deg,#ffc35a 0%,#e07f2c 50%,#8f3a12 100%); --glow:rgba(230,140,50,.5); }
.g-science{ --g:linear-gradient(150deg,#cf6bff 0%,#8d3cff 50%,#4a1aa5 100%); --glow:rgba(160,80,255,.55); }
.g-trivia{ --g:linear-gradient(150deg,#ff6bb5 0%,#e8327f 50%,#8d1254 100%); --glow:rgba(240,60,140,.55); }

.free-line{ text-align:center; margin-top:20px; color:var(--dim); font-size:.92rem; }
.free-line b{ color:var(--gold); }

/* limit-reached banner (replaces the mode toggle) */
.limit{ display:flex; align-items:center; gap:16px; max-width:760px; margin:26px auto 0; padding:14px 14px 14px 20px; border-radius:22px;
  background:linear-gradient(100deg, rgba(255,201,77,.12), rgba(255,77,109,.14)); border:1px solid rgba(255,201,77,.35); box-shadow:0 18px 50px -20px rgba(255,120,60,.45); text-align:left; }
.limit .t{ flex:1; font-size:1rem; color:#ffeccc; line-height:1.4; }
.limit .t b{ color:#fff; }
.limit .em{ font-size:1.8rem; }

/* ---------- home lower panels ---------- */
.home-duo{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin-top:22px; }
.card{ padding:20px 22px; border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)); border:1px solid var(--line); box-shadow:var(--hl); backdrop-filter:blur(12px); }
.card-h{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:14px; }
.card-h h3{ font-size:1.02rem; font-weight:800; display:flex; align-items:center; gap:8px; }
.card-h a, .card-h button.more{ font-size:.86rem; font-weight:700; color:var(--violet-2); }
.streak-row{ display:flex; align-items:center; gap:18px; }
.streak-big{ display:flex; align-items:center; gap:10px; }
.streak-big .flame{ font-size:2.4rem; }
.streak-big b{ font-size:2.4rem; font-weight:900; line-height:1; letter-spacing:-.02em; }
.streak-big span{ display:block; font-size:.8rem; color:var(--dim); font-weight:600; }
.week{ flex:1; display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day{ display:flex; flex-direction:column; align-items:center; gap:6px; font-size:.7rem; font-weight:800; color:var(--mute); letter-spacing:.06em; }
.day i{ width:100%; max-width:40px; aspect-ratio:1; border-radius:12px; display:grid; place-items:center; font-style:normal; font-size:1.05rem; background:var(--s2); border:1px solid var(--line); }
.day.hit i{ background:linear-gradient(160deg, rgba(255,157,46,.28), rgba(255,77,109,.22)); border-color:rgba(255,140,60,.45); }
.day.today i{ border:2px dashed rgba(255,201,77,.7); background:rgba(255,201,77,.08); animation:todaypulse 2s ease-in-out infinite; }
.day.today.hit i{ border-style:solid; animation:none; }
.day.today{ color:var(--gold); }
@keyframes todaypulse{ 50%{ box-shadow:0 0 0 5px rgba(255,201,77,.12); } }
.milestone{ display:flex; justify-content:space-between; margin-top:16px; margin-bottom:7px; font-size:.84rem; font-weight:600; color:var(--dim); }
.milestone b{ color:var(--ink); }
.ms-bar{ height:7px; }
.streak-note{ margin-top:14px; font-size:.88rem; color:var(--dim); }
.streak-note b{ color:var(--ink); }
.mini-lb .row{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:12px; }
.mini-lb .row + .row{ margin-top:2px; }
.mini-lb .row:nth-child(odd){ background:rgba(255,255,255,.03); }
.mini-lb .medal{ width:24px; text-align:center; }
.mini-lb .nm{ flex:1; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mini-lb .sc2{ font-weight:900; }
.mini-lb .you{ margin-top:8px; padding:10px 12px; border-radius:12px; border:1px dashed rgba(124,92,255,.5); background:rgba(124,92,255,.08); font-size:.88rem; color:var(--ink-2); text-align:center; }
.mini-lb .you b{ color:#fff; }
.av{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:.75rem; font-weight:900; flex:none; color:#fff; }

/* ---------- bottom dock ---------- */
.dock{ position:sticky; bottom:0; z-index:15; margin-top:28px; padding:14px 0 calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg, transparent, rgba(6,6,15,.82) 45%); }
.dock .wrap{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.lb-btn{ display:inline-flex; align-items:center; gap:10px; height:58px; padding:0 26px; border-radius:999px; font-weight:800; font-size:1.06rem;
  background:rgba(20,20,38,.7); border:1px solid var(--line-2); backdrop-filter:blur(10px); box-shadow:var(--hl); transition:.25s var(--spring); }
.lb-btn:hover{ transform:scale(1.05); background:rgba(40,40,70,.75); }
.lb-btn .ic{ font-size:1.3rem; display:flex; }
.cta{ position:relative; display:inline-flex; align-items:center; gap:12px; height:58px; padding:0 10px 0 26px; border-radius:999px; font-weight:900; font-size:1.08rem; color:#2a0e00;
  background:var(--g-fire); box-shadow:0 14px 36px -10px rgba(255,110,60,.8), inset 0 1px 0 rgba(255,255,255,.4); animation:ctapulse 2.6s ease-in-out infinite; transition:transform .25s var(--spring); }
.cta:hover{ transform:scale(1.06); }
.cta .rocket{ font-size:1.35rem; }
.cta .price{ display:inline-flex; flex-direction:column; align-items:flex-start; justify-content:center; height:40px; padding:0 14px; border-radius:999px; background:rgba(42,14,0,.88); color:#fff; line-height:1.05; }
.cta .price b{ font-size:.98rem; font-weight:900; color:var(--gold); }
.cta .price s{ font-size:.68rem; color:rgba(255,255,255,.55); font-weight:700; }
.cta .price em{ font-style:normal; font-size:.62rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.7); }
@keyframes ctapulse{ 0%,100%{box-shadow:0 14px 36px -10px rgba(255,110,60,.75)} 50%{box-shadow:0 14px 52px -6px rgba(255,110,60,.95)} }
.cta.member{ background:var(--g-good); color:#03140e; animation:none; padding:0 26px; }

/* ==========================================================================
   QUIZ
   ========================================================================== */
.quiz{ max-width:820px; margin:0 auto; padding:8px 24px 170px; }
.qbar{ display:flex; align-items:center; gap:12px; }
.subj-pill{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 14px 0 6px; border-radius:999px; font-weight:800; font-size:.92rem; background:var(--s2); border:1px solid var(--line); }
.subj-pill .dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:var(--g); font-size:1rem; }
.segs{ flex:1; display:grid; grid-template-columns:repeat(10,1fr); gap:5px; }
.segs i{ height:8px; border-radius:99px; background:rgba(255,255,255,.1); transition:background .3s; }
.segs i.ok{ background:var(--good); box-shadow:0 0 10px rgba(46,230,168,.45); }
.segs i.no{ background:var(--bad); }
.segs i.late{ background:var(--gold); }
.segs i.cur{ background:rgba(255,255,255,.55); animation:curpulse 1.4s ease-in-out infinite; }
@keyframes curpulse{ 50%{ opacity:.45; } }
.qcount{ font-weight:800; color:var(--dim); font-size:.9rem; min-width:42px; text-align:right; }
.qinfo{ display:flex; align-items:center; justify-content:center; gap:8px; margin-top:26px; }
.timer{ position:relative; width:76px; height:76px; margin:0 auto; }
.timer svg{ width:100%; height:100%; transform:rotate(-90deg); }
.timer .track{ stroke:rgba(255,255,255,.1); }
.timer .bar{ stroke:var(--teal); stroke-linecap:round; transition:stroke-dashoffset 1s linear, stroke .4s; filter:drop-shadow(0 0 6px rgba(0,224,198,.55)); }
.timer.warn .bar{ stroke:var(--orange); filter:drop-shadow(0 0 6px rgba(255,157,46,.6)); }
.timer.danger .bar{ stroke:var(--bad); filter:drop-shadow(0 0 6px rgba(255,77,109,.7)); }
.timer .t{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1; }
.timer .t b{ font-size:1.55rem; font-weight:900; font-variant-numeric:tabular-nums; }
.timer .t small{ font-size:.62rem; font-weight:800; letter-spacing:.12em; color:var(--dim); margin-top:2px; }
.timer.out .t b{ color:var(--bad); }
.timer-note{ text-align:center; margin-top:6px; font-size:.8rem; color:var(--bad); font-weight:700; min-height:1em; }
.qcard{ position:relative; margin-top:16px; padding:46px 34px 44px; border-radius:30px; text-align:center;
  background:radial-gradient(120% 120% at 50% 0%, rgba(124,92,255,.14), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  border:1px solid var(--line-2); box-shadow:var(--hl), var(--shadow); backdrop-filter:blur(14px); }
.qcard .eyebrow{ margin-bottom:14px; }
.sentence{ font-size:clamp(1.65rem,3.8vw,2.55rem); font-weight:800; line-height:1.25; letter-spacing:-.015em; text-wrap:balance; }
.blank{ display:inline-block; min-width:4.5ch; border-bottom:4px solid var(--teal); margin:0 .12em; padding:0 .2em; color:var(--teal); animation:blankpulse 2.2s ease-in-out infinite; line-height:1.05; }
.blank.ok{ color:var(--good); border-color:var(--good); animation:none; }
.blank.no{ color:var(--bad); border-color:var(--bad); animation:none; text-decoration:line-through; text-decoration-thickness:3px; }
@keyframes blankpulse{ 0%,100%{border-color:var(--teal)} 50%{border-color:#a78bff} }
.answers{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:18px; }
.ans{ display:flex; align-items:center; gap:14px; min-height:66px; padding:12px 18px 12px 14px; border-radius:20px; text-align:left;
  font-size:1.14rem; font-weight:650; background:rgba(255,255,255,.055); border:1px solid var(--line-2); box-shadow:var(--hl); transition:.2s var(--ease); }
.ans .k{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none; font-size:.85rem; font-weight:900; background:var(--s3); color:var(--ink-2); transition:.2s; }
@media (hover:hover){ .ans:hover{ background:rgba(255,255,255,.1); border-color:rgba(166,139,255,.6); transform:translateY(-2px); } .ans:hover .k{ background:var(--violet); color:#fff; } }
.ans.ok{ background:rgba(46,230,168,.13); border-color:var(--good); box-shadow:0 0 0 4px rgba(46,230,168,.12), 0 0 40px rgba(46,230,168,.2); animation:winpop .45s var(--spring); }
.ans.ok .k{ background:var(--good); color:#03140e; }
.ans.no{ background:rgba(255,77,109,.13); border-color:var(--bad); animation:nope .4s; }
.ans.no .k{ background:var(--bad); color:#fff; }
.ans.dim{ opacity:.35; }
.ans .mark{ margin-left:auto; font-size:1.1rem; }
@keyframes winpop{ 40%{ transform:scale(1.04); } }
@keyframes nope{ 20%{transform:translateX(-8px)} 40%{transform:translateX(7px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(3px)} }
.kbd-hint{ text-align:center; margin-top:16px; font-size:.8rem; color:var(--mute); }
.kbd-hint kbd{ font-family:inherit; font-weight:800; font-size:.72rem; padding:2px 7px; border-radius:6px; border:1px solid var(--line-2); background:var(--s2); color:var(--dim); }
.hard-row{ display:flex; gap:10px; margin-top:18px; }
.hard-in{ flex:1; height:66px; padding:0 22px; border-radius:20px; background:rgba(255,255,255,.055); border:1px solid rgba(255,140,80,.45); font-size:1.25rem; font-weight:700; text-align:center; outline:none; box-shadow:0 0 0 5px rgba(255,120,80,.1); }
.hard-in::placeholder{ color:var(--mute); font-weight:600; }
.hard-row .btn{ height:66px; border-radius:20px; }
.hard-tip{ text-align:center; margin-top:12px; font-size:.84rem; color:var(--dim); }

/* feedback bottom sheet */
.fb{ position:fixed; left:0; right:0; bottom:0; z-index:30; transform:translateY(110%); transition:transform .5s var(--spring); }
.fb.show{ transform:none; }
.fb-in{ max-width:820px; margin:0 auto; display:flex; align-items:center; gap:16px; padding:20px 24px calc(20px + env(safe-area-inset-bottom)); border-radius:28px 28px 0 0;
  border:1px solid; border-bottom:none; backdrop-filter:blur(18px); box-shadow:0 -20px 60px rgba(0,0,0,.5); }
.fb.good .fb-in{ background:linear-gradient(180deg, rgba(23,62,50,.96), rgba(12,32,27,.97)); border-color:rgba(46,230,168,.45); }
.fb.bad .fb-in{ background:linear-gradient(180deg, rgba(70,22,36,.96), rgba(36,12,20,.97)); border-color:rgba(255,77,109,.45); }
.fb-ic{ width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; flex:none; }
.fb.good .fb-ic{ background:rgba(46,230,168,.18); }
.fb.bad .fb-ic{ background:rgba(255,77,109,.18); }
.fb-txt{ flex:1; min-width:0; }
.fb-txt b{ display:flex; align-items:center; gap:8px; font-size:1.3rem; font-weight:900; }
.fb.good .fb-txt b{ color:var(--good); }
.fb.bad .fb-txt b{ color:#ff8ba0; }
.fb-txt > span{ display:block; margin-top:3px; color:var(--ink-2); font-size:.95rem; }
.fb-txt > span b{ display:inline; font-size:inherit; color:#fff; }
.fb .report{ color:var(--dim); font-size:.82rem; font-weight:700; margin-top:6px; display:inline-block; }
.fb .report:hover{ color:#fff; }
.pts{ display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:.95rem; font-weight:900; background:rgba(46,230,168,.16); color:var(--good); }
.pts.neg{ background:rgba(126,203,255,.14); color:var(--ice); }

/* points pop (kept) */
.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); }
@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; transform-origin:50% 100%; animation:melt 1.15s ease-in forwards; filter:drop-shadow(0 0 8px rgba(120,190,255,.7)); }
@keyframes melt{ 55%{transform:scale(1.08,.88) translateY(3px)} 100%{transform:scale(1.25,.5) translateY(10px)} }
.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)} }
body.shake .app{ animation:shake .5s ease; }
@keyframes shake{ 10%{transform:translate(-12px,4px)} 25%{transform:translate(10px,-5px)} 40%{transform:translate(-8px,-3px)} 55%{transform:translate(7px,4px)} 70%{transform:translate(-5px,2px)} 85%{transform:translate(3px,-2px)} }

/* ==========================================================================
   RESULTS
   ========================================================================== */
.results{ max-width:640px; margin:0 auto; padding:4px 24px 150px; }
.back{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px 0 12px; border-radius:999px; font-weight:800; font-size:.9rem; background:var(--s2); border:1px solid var(--line); color:var(--ink-2); margin-bottom:14px; }
.back:hover{ background:var(--s3); color:#fff; }
.rcard{ padding:30px 30px 28px; text-align:center; }
.rcard h2{ margin-top:14px; font-size:clamp(1.9rem,4.5vw,2.5rem); font-weight:900; letter-spacing:-.025em; }
.ring{ position:relative; width:170px; height:170px; margin:18px auto 0; }
.ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.ring .t{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ring .t b{ font-size:3.1rem; font-weight:900; letter-spacing:-.04em; line-height:1; }
.ring .t b small{ font-size:1.3rem; color:var(--dim); font-weight:800; letter-spacing:0; }
.ring .t span{ font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--dim); margin-top:4px; }
.grid10{ display:flex; justify-content:center; gap:6px; margin-top:20px; }
.grid10 i{ width:28px; height:28px; border-radius:8px; background:var(--s3); box-shadow:inset 0 1px 0 rgba(255,255,255,.25); animation:tilepop .5s var(--spring) backwards; }
.grid10 i.ok{ background:linear-gradient(160deg,#4af2bb,#1fc48d); }
.grid10 i.no{ background:linear-gradient(160deg,#ff7088,#e8324f); }
.grid10 i.late{ background:linear-gradient(160deg,#ffd77a,#f0ad1f); }
@keyframes tilepop{ from{ transform:scale(.2) rotate(-20deg); opacity:0; } }
.legend{ display:flex; justify-content:center; gap:14px; margin-top:10px; font-size:.75rem; color:var(--mute); font-weight:600; }
.legend i{ display:inline-block; width:9px; height:9px; border-radius:3px; margin-right:5px; vertical-align:0; }
.rstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:22px; }
.rstat{ padding:14px 8px; border-radius:18px; background:var(--s2); border:1px solid var(--line); }
.rstat b{ display:flex; align-items:center; justify-content:center; gap:6px; font-size:1.55rem; font-weight:900; letter-spacing:-.02em; }
.rstat span{ display:block; margin-top:3px; font-size:.72rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.share-row{ display:flex; gap:10px; margin-top:22px; }
.share-row .btn{ flex:1; }
.share-hint{ margin-top:10px; font-size:.84rem; color:var(--dim); }
.next{ margin-top:22px; }
.next h4{ font-size:.95rem; font-weight:800; margin-bottom:10px; color:var(--ink-2); }
.next-list{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; }
.nx{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 6px; border-radius:999px; font-weight:800; font-size:.92rem; background:var(--s2); border:1px solid var(--line); transition:.2s var(--spring); }
.nx .dot{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; background:var(--g); font-size:1rem; }
.nx:hover{ transform:translateY(-2px); background:var(--s3); }
.nx.locked{ color:var(--dim); }
.nx.locked .dot{ filter:saturate(.4) brightness(.7); }
.vs{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; margin-top:18px; padding:16px; border-radius:20px; background:rgba(255,201,77,.07); border:1px solid rgba(255,201,77,.3); }
.vs .side{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.vs .side .av{ width:46px; height:46px; font-size:1.1rem; }
.vs .side b{ font-size:2rem; font-weight:900; line-height:1; }
.vs .side > span:not(.av){ font-size:.82rem; font-weight:700; color:var(--dim); }
.vs .side.win b{ color:var(--gold); }
.vs .mid{ font-weight:900; color:var(--mute); font-size:.9rem; letter-spacing:.1em; }

/* upsell card (results) */
.upsell{ position:relative; margin-top:52px; padding:52px 26px 26px; text-align:center; border-radius:28px;
  background:linear-gradient(165deg, rgba(255,201,77,.12), rgba(255,77,109,.12)); border:1px solid rgba(255,201,77,.4); box-shadow:0 24px 60px -24px rgba(255,120,60,.45); }
.upsell-badge{ position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:80px; height:80px; border-radius:50%; display:grid; place-items:center; font-size:2.6rem;
  background:radial-gradient(circle at 30% 30%, #ffe08a, #ff9d2e 55%, #ff4d6d); border:3px solid rgba(255,255,255,.3); box-shadow:0 14px 40px rgba(255,120,60,.5); }
.upsell h3{ font-size:1.55rem; font-weight:900; letter-spacing:-.02em; }
.upsell p{ margin-top:6px; color:#ffe9cc; }
.upsell p b{ color:#fff; }
.perks{ list-style:none; display:flex; flex-direction:column; gap:10px; margin:18px auto 0; max-width:420px; text-align:left; }
.perks li{ display:flex; gap:12px; align-items:flex-start; font-size:1rem; color:var(--ink-2); line-height:1.35; }
.perks li .pi{ flex:0 0 28px; height:28px; border-radius:9px; display:grid; place-items:center; background:rgba(255,255,255,.08); font-size:.95rem; }
.perks li b{ color:#fff; }

/* ==========================================================================
   OVERLAYS — modal (desktop) / bottom sheet (mobile)
   ========================================================================== */
.overlay{ position:fixed; inset:0; z-index:60; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(4,4,10,.66); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); overflow-y:auto; }
.overlay.on{ display:flex; animation:fade .25s ease; }
@keyframes fade{ from{opacity:0} }
.modal{ position:relative; width:min(480px,100%); margin:auto; padding:28px; border-radius:30px; text-align:center;
  background:linear-gradient(180deg, #1a1a30, #121224); border:1px solid var(--line-2); box-shadow:var(--hl), 0 40px 100px -20px rgba(0,0,0,.8); animation:pop .3s var(--spring); }
.modal.wide{ width:min(720px,100%); }
.modal.mid{ width:min(560px,100%); }
.modal h2{ font-size:1.7rem; font-weight:900; letter-spacing:-.02em; }
.modal .sub{ margin-top:6px; color:var(--dim); font-size:.98rem; }
.modal-x{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--s2); border:1px solid var(--line); color:var(--dim); font-weight:800; z-index:2; }
.modal-x:hover{ color:#fff; background:rgba(255,77,109,.2); border-color:rgba(255,77,109,.5); }
.grabber{ display:none; width:44px; height:5px; border-radius:99px; background:var(--line-3); margin:-12px auto 16px; }
.trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin-top:14px; font-size:.78rem; color:var(--mute); font-weight:600; }

/* fields */
.field{ position:relative; margin-top:10px; }
.field input{ width:100%; height:52px; padding:0 16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); font-size:1rem; outline:none; transition:.2s; }
.field input:focus{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,224,198,.14); }
.field input::placeholder{ color:var(--mute); }
.field .eye{ position:absolute; right:10px; top:50%; transform:translateY(-50%); font-size:.8rem; font-weight:800; color:var(--dim); padding:6px 8px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.divider{ display:flex; align-items:center; gap:12px; margin:18px 0 6px; font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); }
.divider::before,.divider::after{ content:''; flex:1; height:1px; background:var(--line); }

/* ---------- promo (early bird) ---------- */
.promo{ padding-top:56px; overflow:visible; }
.promo-badge{ position:absolute; top:-46px; left:50%; transform:translateX(-50%); width:92px; height:92px; border-radius:50%; display:grid; place-items:center; font-size:3rem;
  background:radial-gradient(circle at 30% 30%, #fff1b8, #ffc94d 45%, #ff8a3d); border:4px solid #1a1a30; box-shadow:0 0 0 2px rgba(255,201,77,.6), 0 18px 50px rgba(255,150,60,.55); }
.promo-badge span{ display:inline-block; animation:hatch 2.6s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes hatch{ 0%,70%,100%{transform:rotate(0)} 76%{transform:rotate(-12deg)} 82%{transform:rotate(10deg)} 88%{transform:rotate(-6deg)} 94%{transform:rotate(3deg)} }
.price-hero{ display:flex; align-items:flex-end; justify-content:center; gap:10px; margin-top:12px; }
.price-hero .big{ font-size:4.4rem; font-weight:900; line-height:.9; letter-spacing:-.05em; background:var(--g-fire); -webkit-background-clip:text; background-clip:text; color:transparent; padding:0 .1em 0 .02em; margin-right:-.06em; }
.price-hero .per{ text-align:left; padding-bottom:6px; }
.price-hero .per b{ display:block; font-size:1.1rem; font-weight:800; }
.price-hero .per s{ color:var(--mute); font-weight:700; font-size:.95rem; }
.lock-note{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; padding:8px 14px; border-radius:999px; font-size:.86rem; font-weight:700; color:#ffe2a8; background:rgba(255,201,77,.1); border:1px solid rgba(255,201,77,.3); }
.seats{ margin-top:20px; text-align:left; }
.seats-h{ display:flex; justify-content:space-between; font-size:.84rem; font-weight:700; color:var(--dim); margin-bottom:8px; }
.seats-h b{ color:var(--gold); }
.seats-bar{ height:10px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; }
.seats-bar i{ display:block; height:100%; border-radius:99px; background:var(--g-fire); box-shadow:0 0 14px rgba(255,140,60,.6); position:relative; overflow:hidden; }
.seats-bar i::after{ content:''; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent); animation:sweep 2.2s infinite; }
@keyframes sweep{ from{transform:translateX(-100%)} to{transform:translateX(100%)} }

/* ---------- paywall plans ---------- */
.plans{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:20px; }
.plan{ position:relative; padding:16px 14px 14px; border-radius:20px; text-align:left; background:var(--s1); border:1.5px solid var(--line-2); transition:.2s; }
.plan:hover{ border-color:var(--line-3); }
.plan.on{ background:linear-gradient(170deg, rgba(255,201,77,.12), rgba(255,77,109,.08)); border-color:var(--gold); box-shadow:0 0 0 4px rgba(255,201,77,.12); }
.plan .nm{ font-size:.8rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.plan .pr{ margin-top:6px; font-size:1.9rem; font-weight:900; letter-spacing:-.03em; line-height:1; }
.plan .pr small{ font-size:.9rem; font-weight:700; color:var(--dim); letter-spacing:0; }
.plan .was{ margin-top:5px; font-size:.82rem; color:var(--mute); font-weight:600; }
.plan .was s{ margin-right:6px; }
.plan .eq{ color:var(--good); font-weight:800; }
.plan .radio{ position:absolute; top:14px; right:14px; width:22px; height:22px; border-radius:50%; border:2px solid var(--line-3); }
.plan.on .radio{ border-color:var(--gold); background:radial-gradient(circle, var(--gold) 45%, transparent 50%); }
.plan .flag{ position:absolute; top:-11px; left:14px; height:22px; padding:0 10px; border-radius:999px; display:flex; align-items:center; font-size:.68rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; background:var(--g-fire); color:#2a0e00; }
.perk-chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:16px; }
.wallets{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.wallet{ height:50px; border-radius:14px; background:#000; border:1px solid rgba(255,255,255,.22); color:#fff; font-weight:700; font-size:1.02rem; display:flex; align-items:center; justify-content:center; gap:6px; }
.wallet:hover{ border-color:rgba(255,255,255,.45); }
.card-el{ margin-top:10px; height:52px; border-radius:14px; border:1px solid var(--line-2); background:rgba(255,255,255,.05); display:flex; align-items:center; gap:10px; padding:0 16px; color:var(--mute); font-size:.95rem; }
.card-el .cn{ flex:1; text-align:left; }
.pay-who{ display:flex; align-items:center; gap:10px; margin-top:16px; padding:10px 12px; border-radius:14px; background:var(--s1); border:1px solid var(--line); text-align:left; font-size:.9rem; color:var(--dim); }
.pay-who b{ color:#fff; }

/* ---------- share sheet ---------- */
.share-tabs{ margin-top:16px; }
.share-tabs .seg button{ height:38px; padding:0 18px; font-size:.88rem; }
.share-prev{ margin-top:16px; display:flex; justify-content:center; }
.share-text{ width:100%; padding:16px 18px; border-radius:18px; background:rgba(0,0,0,.35); border:1px solid var(--line); text-align:left; font-size:1rem; line-height:1.55; white-space:pre-wrap; font-weight:500; }
.targets{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-top:20px; }
.tg{ display:flex; flex-direction:column; align-items:center; gap:7px; font-size:.74rem; font-weight:700; color:var(--ink-2); }
.tg i{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; font-style:normal; font-size:1.3rem; font-weight:900; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); transition:.25s var(--spring); }
.tg:hover i{ transform:translateY(-3px) scale(1.06); }
.tg svg{ width:24px; height:24px; }
.t-wa{ background:#25d366; } .t-sms{ background:#34c759; } .t-x{ background:#000; border:1px solid rgba(255,255,255,.25); }
.t-fb{ background:#1877f2; } .t-ig{ background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.t-copy{ background:var(--s4); } .t-more{ background:var(--s3); }
.linkbox{ display:flex; align-items:center; gap:8px; margin-top:18px; padding:6px 6px 6px 16px; border-radius:16px; background:rgba(0,0,0,.3); border:1px solid var(--line); }
.linkbox span{ flex:1; text-align:left; font-weight:700; font-size:.95rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.linkbox .btn{ height:40px; padding:0 16px; font-size:.88rem; }

/* the share image card — scales with its font-size */
.scard{ --u:1px; position:relative; overflow:hidden; width:calc(300 * var(--u)); aspect-ratio:4/5; border-radius:calc(26 * var(--u)); padding:calc(24 * var(--u));
  display:flex; flex-direction:column; text-align:left; color:#fff; font-family:'Outfit',sans-serif;
  background:radial-gradient(90% 60% at 0% 0%, rgba(124,92,255,.55), transparent 60%), radial-gradient(80% 60% at 100% 100%, rgba(255,46,136,.45), transparent 60%), radial-gradient(60% 50% at 100% 0%, rgba(0,224,198,.25), transparent 60%), #0a0a18;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.1); }
.scard::before{ content:''; position:absolute; inset:0; opacity:.55; pointer-events:none;
  background-image:radial-gradient(1.2px 1.2px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.4px 1.4px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 75%, #fff, transparent), radial-gradient(1.2px 1.2px at 12% 85%, #fff, transparent), radial-gradient(1px 1px at 55% 45%, #fff, transparent), radial-gradient(1px 1px at 92% 90%, #fff, transparent); }
.scard > *{ position:relative; }
.scard .sh{ display:flex; align-items:center; gap:calc(8 * var(--u)); font-weight:900; font-size:calc(17 * var(--u)); }
.scard .sh img{ width:calc(30 * var(--u)); height:calc(30 * var(--u)); }
.scard .sh .dt{ margin-left:auto; font-size:calc(11 * var(--u)); font-weight:700; color:rgba(255,255,255,.65); }
.scard .ssub{ display:inline-flex; align-self:flex-start; align-items:center; gap:calc(6 * var(--u)); margin-top:calc(22 * var(--u)); height:calc(30 * var(--u)); padding:0 calc(12 * var(--u)) 0 calc(5 * var(--u)); border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18); font-size:calc(13 * var(--u)); font-weight:800; }
.scard .ssub .dot{ width:calc(22 * var(--u)); height:calc(22 * var(--u)); border-radius:50%; display:grid; place-items:center; font-size:calc(12 * var(--u)); background:var(--g); }
.scard .sscore{ margin-top:calc(10 * var(--u)); font-size:calc(84 * var(--u)); font-weight:900; letter-spacing:-.05em; line-height:1; }
.scard .sscore small{ font-size:calc(34 * var(--u)); color:rgba(255,255,255,.55); letter-spacing:0; }
.scard .sgrid{ display:grid; grid-template-columns:repeat(10,1fr); gap:calc(4 * var(--u)); margin-top:calc(12 * var(--u)); }
.scard .sgrid i{ aspect-ratio:1; border-radius:calc(5 * var(--u)); }
.scard .sgrid i.ok{ background:linear-gradient(160deg,#4af2bb,#1fc48d); } .scard .sgrid i.no{ background:linear-gradient(160deg,#ff7088,#e8324f); } .scard .sgrid i.late{ background:linear-gradient(160deg,#ffd77a,#f0ad1f); }
.scard .smeta{ display:flex; flex-wrap:wrap; gap:calc(6 * var(--u)); margin-top:calc(12 * var(--u)); }
.scard .smeta span{ display:inline-flex; align-items:center; gap:calc(4 * var(--u)); height:calc(26 * var(--u)); padding:0 calc(10 * var(--u)); border-radius:999px; background:rgba(255,255,255,.08); font-size:calc(12 * var(--u)); font-weight:800; }
.scard .sfoot{ margin-top:auto; display:flex; align-items:flex-end; justify-content:space-between; gap:calc(10 * var(--u)); }
.scard .sfoot b{ display:block; font-size:calc(22 * var(--u)); font-weight:900; letter-spacing:-.02em; line-height:1.05; }
.scard .sfoot span{ display:block; margin-top:calc(4 * var(--u)); font-size:calc(13 * var(--u)); font-weight:800; color:#00e0c6; }
.scard .sfoot .qr{ width:calc(54 * var(--u)); height:calc(54 * var(--u)); border-radius:calc(10 * var(--u)); background:#fff; padding:calc(5 * var(--u)); display:grid; grid-template-columns:repeat(7,1fr); gap:1px; }
.scard .sfoot .qr i{ background:#0a0a18; border-radius:1px; }
.scard .sfoot .qr i.w{ background:#fff; }

/* ---------- challenge (incoming link) ---------- */
.challenger{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:6px; }
.challenger .av{ width:64px; height:64px; font-size:1.5rem; box-shadow:0 0 0 3px #1a1a30, 0 0 0 5px rgba(255,201,77,.6); }
.swords{ font-size:1.6rem; margin-top:-26px; margin-left:54px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.5)); }
.ch-score{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:16px; padding:14px; border-radius:18px; background:var(--s1); border:1px solid var(--line); }
.ch-score .bigs{ font-size:2.4rem; font-weight:900; letter-spacing:-.03em; }
.ch-score .bigs small{ font-size:1.1rem; color:var(--dim); }
.ch-score .grid10{ margin-top:0; gap:4px; }
.ch-score .grid10 i{ width:16px; height:16px; border-radius:5px; }
.ch-facts{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:14px; }

/* ---------- leaderboard ---------- */
.lb-tabs{ margin-top:18px; display:flex; justify-content:center; }
.lb-tabs .seg button{ height:42px; padding:0 18px; font-size:.92rem; }
.event{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 14px; border-radius:16px; text-align:left; background:linear-gradient(100deg, rgba(124,92,255,.16), rgba(0,224,198,.1)); border:1px solid rgba(124,92,255,.35); font-size:.9rem; color:var(--ink-2); }
.event .em{ font-size:1.6rem; }
.event b{ color:#fff; }
.event .cd{ margin-left:auto; text-align:right; font-size:.75rem; color:var(--dim); font-weight:700; white-space:nowrap; }
.event .cd b{ display:block; font-size:1rem; }
.podium{ display:grid; grid-template-columns:1fr 1.15fr 1fr; align-items:end; gap:10px; margin-top:22px; }
.pod{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.pod .av{ width:54px; height:54px; font-size:1.2rem; position:relative; }
.pod.p1 .av{ width:68px; height:68px; font-size:1.45rem; box-shadow:0 0 0 3px #1a1a30, 0 0 0 5px var(--gold), 0 10px 30px rgba(255,201,77,.4); }
.pod.p2 .av{ box-shadow:0 0 0 3px #1a1a30, 0 0 0 5px #c9d3e6; }
.pod.p3 .av{ box-shadow:0 0 0 3px #1a1a30, 0 0 0 5px #e09a5f; }
.pod .crown{ position:absolute; top:-22px; left:50%; transform:translateX(-50%) rotate(-8deg); font-size:1.3rem; }
.pod .nm{ font-weight:800; font-size:.92rem; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pod .vl{ font-weight:900; font-size:1.05rem; }
.pod .base{ width:100%; border-radius:16px 16px 6px 6px; display:grid; place-items:center; font-size:1.6rem; font-weight:900; color:rgba(255,255,255,.85);
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.03)); border:1px solid var(--line-2); border-bottom:none; }
.pod.p1 .base{ height:96px; background:linear-gradient(180deg, rgba(255,201,77,.35), rgba(255,201,77,.05)); border-color:rgba(255,201,77,.5); }
.pod.p2 .base{ height:70px; }
.pod.p3 .base{ height:54px; background:linear-gradient(180deg, rgba(224,154,95,.3), rgba(224,154,95,.04)); border-color:rgba(224,154,95,.45); }
.lb-list{ margin-top:12px; display:flex; flex-direction:column; gap:6px; text-align:left; }
.lrow{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:14px; background:var(--s1); border:1px solid var(--line); }
.lrow .rk{ width:26px; text-align:center; font-weight:900; color:var(--dim); }
.lrow .nm{ flex:1; font-weight:700; display:flex; align-items:center; gap:6px; min-width:0; }
.lrow .nm span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.lrow .vl{ font-weight:900; }
.lrow.me{ background:rgba(124,92,255,.14); border-color:rgba(124,92,255,.55); box-shadow:0 0 0 3px rgba(124,92,255,.1); }
.lrow .ser{ font-size:.8rem; }
.gap-note{ margin-top:8px; font-size:.84rem; color:var(--dim); }
.gap-note b{ color:var(--gold); }

/* ---------- account menu ---------- */
.menu{ position:absolute; top:62px; right:24px; z-index:70; width:320px; padding:10px; border-radius:24px; display:none;
  background:linear-gradient(180deg,#1a1a30,#131325); border:1px solid var(--line-2); box-shadow:var(--hl), 0 30px 80px -10px rgba(0,0,0,.8); animation:pop .2s var(--spring); transform-origin:top right; }
.menu.on{ display:block; }
.me-card{ padding:16px; border-radius:18px; background:radial-gradient(120% 120% at 0% 0%, rgba(124,92,255,.22), transparent 60%), var(--s1); border:1px solid var(--line); }
.me-top{ display:flex; align-items:center; gap:12px; }
.me-top .av{ width:46px; height:46px; font-size:1.15rem; }
.me-top b{ display:block; font-size:1.05rem; }
.me-top > div > span{ display:block; font-size:.82rem; color:var(--dim); }
.me-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin-top:14px; }
.me-stats div{ padding:8px 4px; border-radius:12px; background:rgba(0,0,0,.25); text-align:center; }
.me-stats b{ display:block; font-size:1.05rem; font-weight:900; }
.me-stats span{ font-size:.66rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.menu-promo{ display:flex; align-items:center; gap:10px; width:100%; margin-top:8px; padding:12px 14px; border-radius:16px; text-align:left; background:linear-gradient(100deg, rgba(255,201,77,.14), rgba(255,77,109,.14)); border:1px solid rgba(255,201,77,.35); font-size:.88rem; color:#ffe9cc; }
.menu-promo b{ color:#fff; }
.menu-promo .go{ margin-left:auto; font-weight:900; color:var(--gold); }
.menu-list{ margin-top:6px; }
.mi{ display:flex; align-items:center; gap:12px; width:100%; padding:12px 12px; border-radius:14px; font-weight:600; font-size:.96rem; text-align:left; color:var(--ink-2); transition:.15s; }
.mi:hover{ background:var(--s2); color:#fff; }
.mi .ic{ width:32px; height:32px; border-radius:10px; display:grid; place-items:center; background:var(--s2); font-size:1rem; }
.mi .r{ margin-left:auto; font-size:.78rem; color:var(--mute); font-weight:700; }
.menu hr{ border:none; height:1px; background:var(--line); margin:6px 8px; }

/* ---------- stats ---------- */
.stats-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:20px; }
.heat{ display:grid; grid-template-columns:repeat(15,1fr); gap:5px; margin-top:12px; }
.heat i{ aspect-ratio:1; border-radius:6px; background:rgba(255,255,255,.06); display:grid; place-items:center; font-style:normal; font-size:.7rem; }
.heat i.h1{ background:rgba(255,140,60,.25); } .heat i.h2{ background:rgba(255,140,60,.5); } .heat i.h3{ background:linear-gradient(160deg,#ffb347,#ff5a5f); }
.heat i.td{ box-shadow:0 0 0 2px var(--gold); }
.sec-h{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; text-align:left; font-size:.95rem; font-weight:800; }
.sec-h span{ font-size:.8rem; color:var(--dim); font-weight:600; }
.acc{ display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.acc-row{ display:grid; grid-template-columns:110px 1fr 72px; align-items:center; gap:10px; font-size:.88rem; font-weight:700; text-align:left; }
.acc-row .bar{ position:relative; height:10px; border-radius:99px; background:rgba(255,255,255,.07); }
.acc-row .v small{ color:var(--mute); font-weight:600; }
.acc-row .bar .mk, .track .mk{ position:absolute; top:-4px; bottom:-4px; width:3px; margin-left:-1.5px; border-radius:2px; background:#fff; box-shadow:0 0 0 2px #17172b; }
.acc-row .bar i{ display:block; height:100%; border-radius:99px; background:var(--g); }
.acc-row .v{ text-align:right; color:var(--ink-2); }

/* ---------- auth ---------- */
.auth-hero{ width:76px; height:76px; margin:0 auto 10px; border-radius:24px; display:grid; place-items:center; font-size:2.6rem; background:linear-gradient(160deg, rgba(255,157,46,.25), rgba(255,77,109,.2)); border:1px solid rgba(255,140,60,.4); }
.keep{ display:flex; justify-content:center; gap:8px; margin-top:14px; flex-wrap:wrap; }
.small-print{ margin-top:12px; font-size:.78rem; color:var(--mute); }
.small-print a{ color:var(--dim); text-decoration:underline; }

/* toast */
.toast{ position:fixed; left:50%; bottom:100px; transform:translateX(-50%); z-index:99; padding:12px 20px; border-radius:14px; font-weight:800; background:#1f1f3a; border:1px solid var(--line-2); box-shadow:0 14px 40px rgba(0,0,0,.5); display:none; animation:pop .25s var(--spring); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .subjects{ grid-template-columns:repeat(3,1fr); }
  .sc{ aspect-ratio:5/4; }
}
@media (max-width:760px){
  .wrap{ padding:0 16px; }
  .ribbon{ padding:8px 40px 8px 14px; font-size:.8rem; justify-content:flex-start; text-align:left; }
  .ribbon .long{ display:none; } .ribbon .short{ display:inline; }
  .topbar .wrap{ height:62px; }
  .brand{ font-size:1.08rem; } .brand img{ width:32px; height:32px; }
  .stat-chip{ height:36px; padding:0 11px; font-size:.88rem; gap:5px; }
  .stat-chip small{ display:none; }
  .avatar{ width:36px; height:36px; }
  .hero{ padding-top:12px; }
  .hero .today{ font-size:.78rem; }
  .hero .today .cd-long{ display:none; }
  .hero h1{ font-size:2.05rem; margin-top:14px; }
  .hero p{ font-size:.95rem; margin-top:8px; }
  .mode-wrap{ margin-top:18px; }
  .seg{ width:100%; }
  .seg button{ padding:0 10px; font-size:.92rem; }
  .seg button small{ display:none; }
  .subjects{ grid-template-columns:repeat(2,1fr); gap:12px; margin-top:20px; }
  .sc{ aspect-ratio:1/1.02; border-radius:22px; padding:12px; }
  .sc-ic{ width:46px; height:46px; border-radius:15px; font-size:1.55rem; }
  .sc-name{ font-size:1.18rem; }
  .sc-desc{ font-size:.76rem; }
  .sc-foot{ margin-top:9px; padding-top:9px; font-size:.72rem; }
  .sc-wm{ font-size:6.5rem; }
  .mg i{ width:8px; height:8px; border-radius:2px; } .mg{ gap:2px; }
  .limit{ flex-direction:column; text-align:center; padding:16px; gap:10px; }
  .limit .btn{ width:100%; }
  .home-duo{ grid-template-columns:1fr; gap:12px; }
  .card{ padding:16px; }
  .streak-big b{ font-size:2rem; } .streak-big .flame{ font-size:2rem; }
  .streak-row{ flex-direction:column; align-items:stretch; gap:14px; }
  .dock{ margin-top:16px; padding-top:10px; }
  .lb-btn{ width:58px; padding:0; justify-content:center; flex:none; }
  .lb-btn .lbl{ display:none; }
  .cta{ flex:1; justify-content:space-between; padding-left:20px; font-size:1.02rem; }

  .quiz{ padding:4px 16px 190px; }
  .qbar{ gap:8px; }
  .subj-pill{ padding:0 6px; } .subj-pill .nm{ display:none; }
  .qinfo{ margin-top:18px; }
  .timer{ width:64px; height:64px; } .timer .t b{ font-size:1.3rem; }
  .qcard{ padding:30px 18px 28px; border-radius:24px; margin-top:12px; }
  .answers{ grid-template-columns:1fr; gap:10px; margin-top:14px; }
  .ans{ min-height:58px; font-size:1.06rem; border-radius:18px; }
  .kbd-hint{ display:none; }
  .hard-row{ flex-direction:column; }
  .hard-in{ flex:none; width:100%; height:60px; }
  body.in-quiz .topbar{ display:none; }
  body.in-quiz .quiz{ padding-top:14px; }
  .hard-row .btn{ height:58px; }
  .fb-in{ flex-wrap:wrap; padding:18px 18px calc(18px + env(safe-area-inset-bottom)); gap:12px; }
  .fb-ic{ width:46px; height:46px; font-size:1.35rem; }
  .fb-in .btn{ width:100%; }

  .results{ padding:0 16px 150px; }
  .rcard{ padding:24px 16px 22px; }
  .ring{ width:150px; height:150px; }
  .grid10{ gap:5px; } .grid10 i{ width:24px; height:24px; border-radius:7px; }
  .rstat b{ font-size:1.3rem; }
  .share-row{ flex-direction:column; }
  .share-row .btn{ flex:none; width:100%; }
  .upsell{ padding:50px 18px 22px; }

  .overlay{ padding:0; align-items:flex-end; }
  .modal, .modal.wide, .modal.mid{ width:100%; margin:auto 0 0; border-radius:28px 28px 0 0; padding:24px 18px calc(22px + env(safe-area-inset-bottom)); border-bottom:none; animation:sheetup .4s var(--spring); }
  .modal .grabber{ display:block; }
  .modal-x{ top:14px; right:14px; }
  .promo{ padding-top:58px; margin-top:60px; }
  @keyframes sheetup{ from{ transform:translateY(100%); } }
  .targets{ grid-template-columns:repeat(4,1fr); row-gap:14px; }
  .plans{ gap:8px; }
  .plan .pr{ font-size:1.6rem; }
  .field-row{ grid-template-columns:1fr; gap:0; }
  .menu{ position:fixed; top:auto; bottom:0; left:0; right:0; width:auto; border-radius:28px 28px 0 0; padding:12px 12px calc(14px + env(safe-area-inset-bottom)); animation:sheetup .35s var(--spring); }
  .stats-grid{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .acc-row{ grid-template-columns:92px 1fr 64px; }
  .podium{ gap:6px; }
  input{ font-size:16px !important; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ==========================================================================
   v2 round 2 — subject stage, auto-advance, groups & invites, compare
   ========================================================================== */

/* ---------- home stage: subjects own the first screen ---------- */
.stage{ position:relative; isolation:isolate; padding:0 0 6px; }
.stage .hero{ padding-top:14px; }
.stage .hero h1{ margin-top:14px; }
.stage .mode-wrap{ margin-top:20px; }
.stage .free-line{ margin-top:16px; }
.stage-glow{ position:absolute; z-index:-1; left:50%; top:60%; width:min(1400px,100%); height:560px; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(124,92,255,.26), rgba(0,224,198,.08) 48%, transparent 72%); filter:blur(10px); }
.wrap.wide{ max-width:1380px; }
.topbar .wrap, .dock .wrap{ max-width:none; }
.stage .subjects{ gap:18px; margin-top:24px; }
.stage .sc{ animation:dealin .75s var(--spring) backwards; }
.stage .sc:nth-child(1){ animation-delay:.04s } .stage .sc:nth-child(2){ animation-delay:.1s } .stage .sc:nth-child(3){ animation-delay:.16s }
.stage .sc:nth-child(4){ animation-delay:.22s } .stage .sc:nth-child(5){ animation-delay:.28s } .stage .sc:nth-child(6){ animation-delay:.34s }
@keyframes dealin{ from{ opacity:0; transform:translateY(34px) scale(.9) rotate(-2deg); } }
.sc-ic span{ display:inline-block; animation:icfloat 4.2s ease-in-out infinite; }
.sc:nth-child(2n) .sc-ic span{ animation-delay:-1.4s; } .sc:nth-child(3n) .sc-ic span{ animation-delay:-2.6s; }
@keyframes icfloat{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-4px) rotate(-4deg); } }
@media (min-width:1101px){
  .stage .sc{ padding:16px; border-radius:26px; }
  .stage .sc-ic{ width:62px; height:62px; border-radius:20px; font-size:2.1rem; }
  .stage .sc-name{ font-size:1.45rem; }
}
.below{ padding-top:65px; }
.below .home-duo{ margin-top:0; grid-template-columns:minmax(0,1fr) minmax(0,1.75fr); align-items:start; }
.empty-g{ text-align:center; padding:10px 6px 4px; }
.empty-g > span{ font-size:2rem; }
.empty-g p{ margin:6px auto 12px; max-width:320px; font-size:.9rem; color:var(--ink-2); line-height:1.5; }
.empty-g p b{ color:#fff; }
.mini-lb .you{ display:block; }
button.you:hover{ background:rgba(124,92,255,.16); }

/* ---------- auto-advance after a right answer ---------- */
.fb.auto .fb-in{ position:relative; overflow:hidden; cursor:pointer; }
.fb-timer{ position:absolute; left:0; top:0; height:3px; width:100%; background:var(--good); transform-origin:left; animation:advance 1.5s linear forwards; box-shadow:0 0 12px rgba(46,230,168,.8); }
@keyframes advance{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.fb.frozen .fb-timer{ animation-delay:-.9s; animation-play-state:paused; }
.fb-next{ height:40px; padding:0 12px 0 16px; border-radius:999px; font-weight:800; font-size:.9rem; color:#c9fbe8; background:rgba(46,230,168,.12); border:1px solid rgba(46,230,168,.35); display:inline-flex; align-items:center; gap:6px; flex:none; }
.fb-next b{ font-size:1.25rem; line-height:1; }
.fb-next:hover{ background:rgba(46,230,168,.22); }

/* ---------- shared bits ---------- */
.scope{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:14px; }
.scope button{ height:34px; padding:0 14px; border-radius:999px; font-size:.84rem; font-weight:800; color:var(--dim); background:var(--s1); border:1px solid var(--line); transition:.2s; }
.scope button:hover{ color:#fff; }
.scope button.on{ color:#fff; background:rgba(124,92,255,.22); border-color:rgba(124,92,255,.6); }
.scope.sm button{ height:28px; padding:0 10px; font-size:.76rem; }
.tgl{ position:relative; width:46px; height:26px; border-radius:99px; background:var(--s3); flex:none; cursor:pointer; transition:.2s; }
.tgl::after{ content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s var(--spring); }
.tgl.on{ background:var(--g-brand); } .tgl.on::after{ left:23px; }
.avstack{ display:flex; }
.avstack .av{ width:32px; height:32px; font-size:.8rem; box-shadow:0 0 0 2.5px #15152a; }
.avstack .av + .av{ margin-left:-8px; }
.nudge{ height:32px; padding:0 12px; border-radius:999px; font-size:.78rem; font-weight:800; background:rgba(255,201,77,.12); border:1px solid rgba(255,201,77,.4); color:var(--gold); white-space:nowrap; flex:none; transition:.2s; }
.nudge:hover{ background:rgba(255,201,77,.22); }
.nudge.sent{ background:var(--s2); border-color:var(--line); color:var(--dim); }
.pod.is-me .nm{ color:#d4c9ff; }

/* ---------- results: group strip ---------- */
.gstrip{ display:flex; align-items:center; gap:10px; width:100%; margin-top:12px; padding:10px 14px; border-radius:16px; background:var(--s1); border:1px solid var(--line); font-size:.86rem; font-weight:600; color:var(--dim); text-align:left; transition:.2s; }
.gstrip:hover{ background:var(--s2); }
.gstrip .ge{ font-size:1.2rem; }
.gstrip .ppl{ display:flex; gap:4px 12px; flex-wrap:wrap; }
.gstrip .ppl span{ color:var(--ink-2); } .gstrip .ppl .me{ color:#fff; font-weight:800; } .gstrip .ppl .dim{ color:var(--mute); }
.gstrip .go{ margin-left:auto; color:var(--violet-2); font-weight:800; white-space:nowrap; }

/* ---------- group page ---------- */
.group-page{ max-width:1100px; margin:0 auto; padding:4px 24px 40px; }
.gswitch{ display:flex; gap:8px; overflow-x:auto; padding:2px 0 6px; }
.gchip{ display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 16px 0 7px; border-radius:999px; font-weight:800; font-size:.92rem; background:var(--s2); border:1px solid var(--line); white-space:nowrap; transition:.2s; flex:none; }
.gchip:hover{ background:var(--s3); }
.gchip .ge{ width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-size:1rem; }
.gchip.on{ background:rgba(124,92,255,.2); border-color:rgba(124,92,255,.6); box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.gchip.new{ color:var(--dim); padding:0 18px; border-style:dashed; border-color:var(--line-3); background:none; }
.pending{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 10px 10px 12px; border-radius:18px; background:linear-gradient(100deg, rgba(0,224,198,.12), rgba(124,92,255,.12)); border:1px solid rgba(0,224,198,.35); animation:pop .4s var(--spring); }
.pending .av{ width:36px; height:36px; }
.pending .pt{ flex:1; font-size:.92rem; color:var(--ink-2); } .pending .pt b{ color:#fff; }
.ghead{ display:flex; align-items:center; gap:18px; margin-top:14px; padding:22px; border-radius:26px; }
.gtile{ width:76px; height:76px; border-radius:24px; display:grid; place-items:center; font-size:2.4rem; flex:none; background:linear-gradient(150deg,#ffb35a,#ff5f6d);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.15), 0 16px 34px -12px rgba(255,110,80,.7); }
.gtile.big{ width:88px; height:88px; font-size:2.8rem; }
.gh-t{ min-width:0; }
.gh-t h2{ font-size:1.9rem; font-weight:900; letter-spacing:-.025em; line-height:1.05; }
.gh-t p{ color:var(--dim); font-size:.9rem; margin-top:4px; }
.gh-t .avstack{ margin-top:10px; }
.gact{ margin-left:auto; display:flex; gap:8px; align-items:center; }
.gcols{ display:grid; grid-template-columns:1.15fr 1fr; gap:16px; margin-top:16px; align-items:start; }
.mrow{ display:flex; align-items:center; gap:12px; padding:10px 4px; border-bottom:1px solid var(--line); }
.mrow:last-of-type{ border-bottom:none; }
.mrow .av{ width:40px; height:40px; font-size:1rem; }
.mi2{ flex:1; min-width:0; }
.mi2 b{ display:flex; align-items:center; gap:6px; font-size:.98rem; }
.mi2 > span{ display:block; font-size:.8rem; color:var(--dim); margin-top:2px; }
.played{ display:flex; gap:4px; }
.played i{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; font-style:normal; font-size:.85rem; background:var(--g); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.pts2{ font-weight:900; min-width:40px; text-align:right; }
.role{ font-size:.6rem; font-weight:900; letter-spacing:.08em; padding:2px 7px; border-radius:999px; background:rgba(255,201,77,.14); color:var(--gold); text-transform:uppercase; }
.hint2{ margin-top:10px; font-size:.78rem; color:var(--mute); line-height:1.5; }
.gseg{ display:grid; width:100%; margin-bottom:12px; }
.gseg button{ height:38px; font-size:.86rem; padding:0 8px; }
.crown-banner{ margin-top:12px; display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,201,77,.08); border:1px solid rgba(255,201,77,.3); font-size:.86rem; color:var(--ink-2); line-height:1.4; }
.crown-banner b{ color:#fff; }
.feed{ display:flex; flex-direction:column; }
.fi{ display:flex; align-items:center; gap:12px; padding:11px 4px; border-bottom:1px solid var(--line); font-size:.92rem; color:var(--ink-2); }
.fi:last-child{ border-bottom:none; }
.fi .av{ width:34px; height:34px; font-size:.85rem; }
.fi .ft{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.fi b{ color:#fff; }
.fi time{ font-size:.78rem; color:var(--mute); white-space:nowrap; }
.react{ height:30px; padding:0 10px; border-radius:999px; font-size:.8rem; font-weight:800; color:var(--dim); background:var(--s1); border:1px solid var(--line); flex:none; transition:.2s var(--spring); }
.react:hover{ color:#fff; }
.react.on{ color:#fff; background:rgba(255,201,77,.15); border-color:rgba(255,201,77,.45); transform:scale(1.06); }

/* ---------- invite ---------- */
.inv-hero{ width:74px; height:74px; margin:0 auto 10px; border-radius:24px; display:grid; place-items:center; font-size:2.4rem; background:linear-gradient(160deg, rgba(0,224,198,.22), rgba(124,92,255,.24)); border:1px solid rgba(0,224,198,.4); }
.wave{ display:inline-block; animation:wave 2.2s ease-in-out infinite; transform-origin:70% 75%; }
@keyframes wave{ 0%,60%,100%{transform:rotate(0)} 10%{transform:rotate(16deg)} 20%{transform:rotate(-8deg)} 30%{transform:rotate(16deg)} 40%{transform:rotate(-4deg)} 50%{transform:rotate(10deg)} }
.reward{ display:flex; align-items:center; gap:12px; margin-top:16px; padding:12px 12px 12px 14px; border-radius:18px; text-align:left; background:linear-gradient(100deg, rgba(255,201,77,.13), rgba(255,77,109,.1)); border:1px solid rgba(255,201,77,.38); }
.rw-ic{ font-size:1.9rem; }
.rw-t{ flex:1; } .rw-t b{ display:block; font-size:.98rem; } .rw-t span{ font-size:.82rem; color:#ffe2b8; }
.rw-n{ text-align:center; padding:6px 12px; border-radius:12px; background:rgba(0,0,0,.28); }
.rw-n b{ display:block; font-size:1.35rem; font-weight:900; color:var(--gold); line-height:1.1; }
.rw-n span{ font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.inv-to{ display:flex; align-items:center; justify-content:center; gap:4px 10px; flex-wrap:wrap; margin-top:14px; font-size:.82rem; font-weight:700; color:var(--dim); }
.inv-to .scope{ margin-top:0; }
.msg-prev{ margin-top:14px; padding:14px 16px; border-radius:16px; background:rgba(0,0,0,.3); border:1px solid var(--line); text-align:left; }
.msg-prev p{ margin-top:6px; font-size:.95rem; line-height:1.5; color:var(--ink-2); }
.msg-prev b{ color:#fff; } .msg-prev .lnk{ color:var(--teal); font-weight:700; }
.targets.five{ grid-template-columns:repeat(5,1fr); }
.t-mail{ background:#4f5d7a; } .t-more{ font-size:1.4rem; }
.inv-list{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.inv-row{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:14px; background:var(--s1); border:1px solid var(--line); text-align:left; }
.inv-row .av{ width:36px; height:36px; }
.iv{ flex:1; min-width:0; } .iv b{ display:block; font-size:.95rem; } .iv span{ font-size:.8rem; color:var(--dim); }
.dots3{ display:flex; gap:5px; } .dots3 i{ width:10px; height:10px; border-radius:50%; background:var(--s4); } .dots3 i.on{ background:var(--good); }

/* ---------- join / create ---------- */
.join-top{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.join-board{ margin-top:16px; padding:12px 14px; border-radius:18px; background:var(--s1); border:1px solid var(--line); }
.jrow{ display:flex; align-items:center; gap:10px; padding:6px 0; font-weight:700; text-align:left; }
.jrow .av{ width:30px; height:30px; font-size:.8rem; }
.jrow .md{ width:22px; text-align:center; }
.jrow .nm{ flex:1; }
.jrow.you-slot{ margin-top:4px; padding:8px 10px; border-radius:12px; border:1px dashed rgba(124,92,255,.55); background:rgba(124,92,255,.08); color:#d4c9ff; }
.emoji-pick{ display:grid; grid-template-columns:repeat(8,1fr); gap:6px; margin-top:18px; }
.emoji-pick button{ aspect-ratio:1; border-radius:14px; font-size:1.45rem; background:var(--s1); border:1px solid var(--line); transition:.2s var(--spring); }
.emoji-pick button:hover{ transform:scale(1.08); }
.emoji-pick button.on{ background:rgba(124,92,255,.22); border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,92,255,.15); }
.opt-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; padding:12px 14px; border-radius:14px; background:var(--s1); border:1px solid var(--line); text-align:left; }
.opt-row b{ display:block; font-size:.92rem; } .opt-row span{ font-size:.78rem; color:var(--dim); }

/* ---------- stats: compare ---------- */
.cmp-hero{ display:flex; align-items:center; gap:14px; margin-top:14px; padding:14px 16px; border-radius:18px; text-align:left; background:linear-gradient(100deg, rgba(124,92,255,.18), rgba(0,224,198,.1)); border:1px solid rgba(124,92,255,.38); }
.cmp-hero .big{ font-size:1.9rem; font-weight:900; letter-spacing:-.02em; line-height:1; white-space:nowrap; }
.cmp-hero p{ font-size:.88rem; color:var(--ink-2); line-height:1.45; } .cmp-hero p b{ color:#fff; }
.cmp-rows{ display:flex; flex-direction:column; gap:13px; margin-top:16px; }
.cmp-row{ text-align:left; }
.cmp-row .top{ display:flex; justify-content:space-between; gap:10px; font-size:.86rem; font-weight:700; color:var(--ink-2); margin-bottom:7px; }
.cmp-row .top b{ color:#fff; } .cmp-row .avg{ color:var(--dim); font-weight:600; }
.cmp-row .up{ color:var(--good); } .cmp-row .dn{ color:var(--bad); }
.track{ position:relative; height:12px; border-radius:99px; background:rgba(255,255,255,.07); }
.track i{ position:absolute; left:0; top:0; bottom:0; border-radius:99px; background:var(--g-brand); }
.cmp-legend{ display:flex; gap:16px; justify-content:center; margin-top:12px; font-size:.76rem; color:var(--dim); font-weight:600; }
.cmp-legend i{ display:inline-block; vertical-align:middle; margin-right:6px; }
.lg-you{ width:16px; height:8px; border-radius:99px; background:var(--g-brand); }
.lg-mk{ width:3px; height:13px; border-radius:2px; background:#fff; }

@media (max-width:1100px){ .stage .subjects{ margin-top:26px; } }
@media (max-width:760px){
  .stage{ padding-bottom:4px; }
  .stage .subjects{ gap:12px; margin-top:20px; }
  .below{ padding-top:65px; }
  .below .home-duo{ grid-template-columns:1fr; }
  .below #miniLb{ order:-1; }
  .fb.auto .fb-in{ flex-wrap:nowrap; }
  .group-page{ padding:0 16px 30px; }
  .ghead{ flex-wrap:wrap; padding:18px; gap:14px; }
  .gtile{ width:62px; height:62px; font-size:2rem; border-radius:20px; }
  .gh-t h2{ font-size:1.5rem; }
  .gact{ margin-left:0; width:100%; } .gact .btn{ flex:1; }
  .gcols{ grid-template-columns:1fr; }
  .pending{ flex-wrap:wrap; } .pending .pt{ min-width:60%; }
  .fi time{ display:none; }
  .tg i{ width:48px; height:48px; }
  .emoji-pick{ grid-template-columns:repeat(4,1fr); }
  .cmp-hero .big{ font-size:1.6rem; }
}
@media (prefers-reduced-motion:reduce){ *{ animation:none !important; transition:none !important; } }

/* ==========================================================================
   v2 round 3 — compact streak, bigger today's best, menu groups,
   date-based early bird, install the app
   ========================================================================== */

/* ---------- compact streak card ---------- */
#streakCard .streak-big{ gap:10px; margin-bottom:14px; }
#streakCard .streak-big .flame{ font-size:2rem; }
#streakCard .streak-big b{ font-size:2.1rem; }
.streak-ok{ margin-left:auto; align-self:center; font-size:.76rem; font-weight:800; padding:5px 10px; border-radius:999px; background:var(--s2); border:1px solid var(--line); color:var(--ink-2); white-space:nowrap; }
#streakCard .week{ gap:5px; }
#streakCard .day{ font-size:.6rem; gap:4px; }
#streakCard .day i{ max-width:36px; border-radius:10px; font-size:.9rem; }
#streakCard .milestone{ margin-top:14px; }
#streakCard .streak-note{ margin-top:12px; }

/* ---------- today's best (bigger, group first) ---------- */
#miniLb .card-h{ margin-bottom:10px; }
.best-tabs{ justify-content:flex-start; margin:0 0 10px; }
.brow{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; }
.brow + .brow{ margin-top:2px; }
.best-list .brow:nth-child(odd){ background:rgba(255,255,255,.03); }
.best-list .brow.me{ background:rgba(124,92,255,.13); box-shadow:inset 0 0 0 1px rgba(124,92,255,.45); }
.brow .medal{ width:26px; text-align:center; font-weight:900; color:var(--mute); flex:none; }
.brow .av{ width:36px; height:36px; font-size:.9rem; }
.bn{ flex:1; min-width:0; }
.bn b{ display:block; font-size:.98rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bn small{ display:block; font-size:.76rem; color:var(--dim); margin-top:1px; }
.bp{ font-weight:900; font-size:1.08rem; min-width:58px; text-align:right; white-space:nowrap; }
.bp small{ font-size:.7rem; color:var(--dim); margin-left:3px; font-weight:700; }
.bp.dim{ color:var(--mute); font-size:.82rem; font-weight:700; }
.brow .played i{ width:26px; height:26px; font-size:.78rem; border-radius:8px; }
.best-foot{ display:flex; align-items:center; justify-content:space-between; gap:6px 12px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:.86rem; color:var(--ink-2); }
.best-foot b{ color:#fff; }

/* ---------- menu: my groups ---------- */
.menu-groups{ margin-top:8px; padding:10px 8px 8px; border-radius:18px; background:var(--s1); border:1px solid var(--line); }
.mg-h{ display:flex; align-items:center; justify-content:space-between; padding:0 6px 6px; font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); }
.mg-h button{ font-size:.8rem; font-weight:800; color:var(--violet-2); text-transform:none; letter-spacing:0; }
.mg-row{ display:flex; align-items:center; gap:10px; width:100%; padding:8px 6px; border-radius:12px; text-align:left; transition:.15s; }
.mg-row:hover{ background:var(--s2); }
.mg-row .ge{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; font-size:1.1rem; flex:none; background:var(--s3); box-shadow:inset 0 1px 0 rgba(255,255,255,.3); }
.mg-row .mt{ flex:1; min-width:0; }
.mg-row .mt b{ display:block; font-size:.93rem; }
.mg-row .mt small{ display:block; font-size:.74rem; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mg-row .rk{ font-size:.74rem; font-weight:800; color:var(--ink-2); white-space:nowrap; padding:4px 9px; border-radius:999px; background:var(--s2); border:1px solid var(--line); }
.mg-row.pend{ background:rgba(124,92,255,.09); }
.mg-row.add .ge{ background:none; border:1.5px dashed var(--line-3); box-shadow:none; }
.mg-empty{ padding:2px 6px 4px; font-size:.86rem; color:var(--ink-2); line-height:1.45; }
.menu .mi{ padding:10px 12px; }

/* ---------- early bird: real deadline ---------- */
.ends{ margin-top:18px; padding:14px; border-radius:18px; background:rgba(255,201,77,.06); border:1px solid rgba(255,201,77,.25); }
.ends-h{ font-size:.88rem; color:#ffe2a8; font-weight:600; }
.ends-h b{ color:#fff; }
.cdown{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }
.cdown div{ padding:8px 4px 7px; border-radius:12px; background:rgba(0,0,0,.32); border:1px solid var(--line); }
.cdown b{ display:block; font-size:1.55rem; font-weight:900; letter-spacing:-.02em; line-height:1.1; background:var(--g-fire); -webkit-background-clip:text; background-clip:text; color:transparent; }
.cdown span{ font-size:.62rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); }
.eb-line{ margin-top:16px; font-size:.92rem; color:#ffe2b8; }
.eb-line b{ color:#fff; }

/* ---------- invite: why play together (no reward for now) ---------- */
.why3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.why3 div{ padding:12px 8px 10px; border-radius:16px; background:var(--s1); border:1px solid var(--line); }
.why3 span{ display:block; font-size:1.5rem; }
.why3 b{ display:block; font-size:.9rem; margin-top:4px; }
.why3 small{ font-size:.74rem; color:var(--dim); }

/* ---------- install the app ---------- */
.homescreen{ position:relative; width:224px; margin:4px auto 16px; padding:16px 16px 22px; border-radius:30px; background:linear-gradient(160deg,#2c2a66,#1b2d55 55%,#45204f); border:1px solid var(--line-2); box-shadow:0 24px 48px -20px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.12); }
.hs-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.hs-grid > i{ aspect-ratio:1; border-radius:12px; opacity:.45; }
.hs-dq{ position:relative; display:flex; justify-content:center; animation:hsbob 2.4s ease-in-out infinite; }
.hs-dq img{ width:100%; aspect-ratio:1; border-radius:12px; background:#0c0c18; padding:3px; box-shadow:0 0 0 2px #fff, 0 0 24px rgba(255,140,60,.75); }
.hs-dq em{ position:absolute; top:calc(100% + 4px); font-style:normal; font-size:.58rem; font-weight:700; white-space:nowrap; color:#fff; }
@keyframes hsbob{ 50%{ transform:translateY(-4px) scale(1.07); } }
.hs-tap{ position:absolute; right:-22px; top:48px; padding:5px 11px; border-radius:999px; background:var(--g-fire); color:#2a0e00; font-size:.74rem; font-weight:900; transform:rotate(8deg); box-shadow:0 8px 18px rgba(255,110,60,.5); }
.inst-pane{ margin-top:14px; text-align:left; }
.step{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:16px; background:var(--s1); border:1px solid var(--line); }
.step + .step{ margin-top:8px; }
.sn{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:900; font-size:.9rem; background:var(--g-brand); color:#fff; }
.st{ flex:1; min-width:0; }
.st b{ display:block; font-size:.95rem; }
.st span{ display:block; font-size:.78rem; color:var(--dim); margin-top:2px; }
.ill{ flex:none; display:flex; align-items:center; gap:8px; height:40px; padding:0 10px; border-radius:12px; background:#f2f2f7; color:#3a3a3c; font-size:.78rem; font-weight:600; font-family:system-ui,-apple-system,'Segoe UI',sans-serif; }
.ill i{ font-style:normal; width:26px; height:26px; display:grid; place-items:center; color:#0a84ff; font-size:1rem; }
.ill svg{ width:19px; height:19px; }
.ill .hl{ border-radius:8px; box-shadow:0 0 0 2px #ff9f0a, 0 0 14px rgba(255,159,10,.7); animation:hlpulse 1.6s ease-in-out infinite; }
@keyframes hlpulse{ 50%{ box-shadow:0 0 0 3px #ff9f0a, 0 0 22px rgba(255,159,10,.95); } }
.ill-row span{ min-width:116px; }
.ill-top{ gap:14px; }
.ill-top span{ color:#0a84ff; font-weight:500; }
.ill-top b{ color:#0a84ff; padding:3px 9px; }
.ill-url{ width:100%; height:44px; margin-top:14px; }
.inst-tabs{ display:flex; justify-content:center; margin-top:20px; }
.inst-tabs .seg{ width:100%; max-width:420px; }
.inst-tabs .seg button{ height:44px; padding:0 12px; font-size:.92rem; }
.perk-chips .chip{ cursor:default; }
.ill-url span{ flex:1; color:#3a3a3c; }
.or-line{ margin-top:12px; font-size:.82rem; color:var(--dim); text-align:center; }
.menu{ max-height:calc(100vh - 90px); overflow-y:auto; }
@media (max-width:760px){
  .menu{ max-height:88svh; }
  .step{ flex-wrap:wrap; }
  .step .ill{ margin-left:40px; }
  .ill-row span{ min-width:0; }
  .ill{ padding:0 8px; gap:5px; }
  .step{ padding:10px; gap:10px; }
  .best-foot{ font-size:.82rem; }
}

/* ---------- join from an invite: name + optional account ---------- */
.jl{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:.86rem; font-weight:800; color:var(--ink); text-align:left; }
.jl > span{ width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:.72rem; font-weight:900; background:var(--g-brand); color:#fff; flex:none; }
.jl em{ font-style:normal; font-weight:600; color:var(--dim); }
.jl .chip{ margin-left:auto; height:22px; font-size:.66rem; font-style:normal; }
.jl + .field{ margin-top:8px; }
.acct-box{ margin-top:14px; padding:14px 14px 12px; border-radius:20px; text-align:left;
  background:linear-gradient(160deg, rgba(0,224,198,.11), rgba(124,92,255,.13)); border:1px solid rgba(0,224,198,.45); box-shadow:0 0 0 4px rgba(0,224,198,.06), 0 18px 40px -22px rgba(0,224,198,.5); }
.acct-why{ margin-top:6px; font-size:.86rem; color:var(--ink-2); line-height:1.45; }
.acct-perks{ display:flex; flex-direction:column; gap:3px; margin:8px 0 2px; font-size:.8rem; font-weight:600; color:var(--ink-2); }
.acct-box .field input{ background:rgba(6,6,15,.45); }

/* ==========================================================================
   v2 round 5 — 8 subjects: Logic + Geography, 2 rows × 4 on desktop
   ========================================================================== */
.g-logic{ --g:linear-gradient(150deg,#62b0ff 0%,#2f6fe6 50%,#1a3796 100%); --glow:rgba(60,130,255,.55); }
.g-geography{ --g:linear-gradient(150deg,#5be38a 0%,#1fae5c 50%,#0c5f3d 100%); --glow:rgba(40,200,110,.5); }
.stage .sc:nth-child(7){ animation-delay:.4s } .stage .sc:nth-child(8){ animation-delay:.46s }
@media (min-width:1101px){
  .stage .subjects{ grid-template-columns:repeat(4,1fr); max-width:1200px; margin-left:auto; margin-right:auto; gap:16px; margin-top:22px; }
  .stage .sc{ aspect-ratio:1.85/1; padding:14px 16px; }
  .stage .sc-ic{ width:50px; height:50px; border-radius:16px; font-size:1.7rem; }
  .stage .sc-name{ font-size:1.32rem; }
  .stage .sc-foot{ margin-top:8px; padding-top:8px; }
  .stage .sc-wm{ font-size:8.5rem; right:-6%; bottom:-22%; }
  .stage .hero h1{ font-size:3.1rem; }
  .stage .mode-wrap{ margin-top:16px; }
}
@media (min-width:761px) and (max-width:1100px){
  .stage .subjects{ grid-template-columns:repeat(4,1fr); }
  .stage .sc{ aspect-ratio:1/1.05; }
}
@media (max-width:760px){
  .stage .sc{ aspect-ratio:1.12/1; }
  .stage .sc-ic{ width:42px; height:42px; font-size:1.4rem; border-radius:14px; }
  .stage .sc-wm{ font-size:5.5rem; }
}

/* ==========================================================================
   v2.0 production additions — pieces only the live app needs
   ========================================================================== */
.screen{ animation:none; }
main{ position:relative; z-index:2; }
.hide{ display:none !important; }
.overlay.open{ display:flex; } /* legacy class name, same as .on */
.stat-chip{ cursor:pointer; color:var(--ink); font-family:inherit; }
.stat-chip:hover{ background:var(--s3); }
.ice-wrap{ position:relative; display:inline-block; }
.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); } }
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); } }
.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); } }
.toast{ max-width:min(92vw,520px); text-align:center; }

/* subject grid adapts to how many subjects exist */
.stage .subjects.n6, .stage .subjects.n3{ grid-template-columns:repeat(3,1fr); max-width:980px; }
.stage .subjects.n5{ grid-template-columns:repeat(5,1fr); }
@media (max-width:760px){ .stage .subjects.n6, .stage .subjects.n3, .stage .subjects.n5{ grid-template-columns:repeat(2,1fr); } }
.sc{ cursor:pointer; color:#fff; }
.sc.has-cover{ background-size:cover; background-position:center; }
.sc-score{ font-weight:900; }

/* quiz: resumed questions we have no result for */
.segs i.prev{ background:rgba(255,255,255,.4); }
.grid10 i.prev{ background:var(--s4); }
.timer.paused .bar{ transition:none; }

/* results extras */
.res-mode{ display:flex; justify-content:center; margin-top:18px; }
.res-mode .seg button{ height:40px; font-size:.88rem; padding:0 16px; }
.save-card{ display:flex; align-items:center; gap:14px; margin-top:16px; padding:14px 16px; border-radius:20px; text-align:left;
  background:linear-gradient(110deg, rgba(124,92,255,.16), rgba(0,224,198,.1)); border:1px solid rgba(124,92,255,.45); }
.save-card .e{ font-size:1.7rem; }
.save-card .t{ flex:1; font-size:.92rem; color:var(--ink-2); line-height:1.4; }
.save-card .t b{ display:block; color:#fff; font-size:1rem; }
@media (max-width:760px){ .save-card{ flex-wrap:wrap; } .save-card .btn{ width:100%; } }

/* today's best (home) — leaderboard API: correct answers today */
.best-empty{ text-align:center; padding:18px 8px; color:var(--dim); font-size:.92rem; }

/* paywall: Square card form + wallet buttons */
.price-hero .per span{ display:block; }
#card-container{ min-height:92px; margin-top:12px; padding:6px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); }
.card-loading{ color:var(--dim); font-size:.86rem; padding:26px 10px; text-align:center; }
.wallets{ display:flex; gap:10px; margin-top:18px; }
.wallet-slot{ flex:1; min-height:48px; border-radius:14px; overflow:hidden; cursor:pointer; }
.pay-status{ font-size:.86rem; margin-top:10px; min-height:20px; color:var(--ink-2); }
.pay-status:empty{ display:none; }
.pay-status.err{ color:var(--bad); }
.pay-status.ok{ color:var(--good); }
#payAccount{ display:none; }
#payAccount.show{ display:block; }
.field input.invalid{ border-color:var(--bad); box-shadow:0 0 0 4px rgba(255,77,109,.16); }
.field-err{ color:var(--bad); font-size:.84rem; text-align:left; margin-top:8px; }
.field-err:empty{ display:none; }
.pay-login{ font-size:.84rem; color:var(--dim); margin-top:10px; }
.linkish{ background:none; border:none; padding:0; color:var(--teal); font:inherit; font-weight:800; cursor:pointer; text-decoration:underline; text-underline-offset:2px; }
.pay-who{ font-size:.88rem; color:var(--dim); margin-top:12px; }
.pay-who:empty{ display:none; }
#payForm .btn:disabled{ opacity:.65; cursor:progress; transform:none; }

/* fields: textarea */
.field textarea{ width:100%; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid var(--line-2); font:inherit; font-size:1rem; color:var(--ink); outline:none; resize:vertical; }
.field textarea:focus{ border-color:var(--teal); box-shadow:0 0 0 4px rgba(0,224,198,.14); }
.field input[readonly]{ opacity:.6; }
.rep-wrong{ color:#ff9fb1; }

/* billing + settings */
.plan-badge{ margin-top:16px; padding:14px 18px; border-radius:18px; text-align:center; border:1px solid var(--line); background:var(--s1); }
.plan-badge b{ font-size:1.05rem; letter-spacing:.5px; }
.plan-badge > span:last-child{ display:block; color:var(--dim); font-size:.85rem; margin-top:6px; }
.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); }
.bill-rows{ text-align:left; margin-top:16px; font-size:.92rem; color:var(--ink-2); line-height:1.9; }
.bill-rows b{ color:#fff; }
.bill-rows .warn{ color:var(--bad); }
.bill-rows .meta{ font-size:.76rem; color:var(--mute); }
.btn.btn-danger{ background:none; border:1px solid rgba(255,77,109,.5); color:#ff98ab; }
.btn.btn-ok{ background:none; border:1px solid rgba(46,230,168,.5); color:#7df0c6; }

/* explanations */
.tip-body{ text-align:left; line-height:1.65; font-size:.96rem; color:var(--ink-2); }
.tip-body h3{ font-size:1.3rem; color:#fff; margin-bottom:8px; }
.tip-body b{ color:#fff; }
.tip-body .good{ color:var(--good); font-weight:800; }
.tip-body .bad{ color:var(--bad); font-weight:800; }

/* first-visit install tip */
#installToast{ position:fixed; left:50%; bottom:96px; z-index:50; transform:translate(-50%,20px); display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:16px;
  background:#1c1c34; border:1px solid var(--line-2); 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; }

/* keyboard focus */
:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
.sc:focus-visible{ outline:3px solid #fff; outline-offset:4px; }

/* more subject colors — pick them in Admin → Subjects */
.g-custom1{ --g:linear-gradient(150deg,#3ad0e0 0%,#1a8fc4 50%,#125a8a 100%); --glow:rgba(40,170,220,.5); }
.g-custom2{ --g:linear-gradient(150deg,#ff6bb5 0%,#e8327f 50%,#8d1254 100%); --glow:rgba(240,60,140,.55); }
.g-health{ --g:linear-gradient(150deg,#ff7a8a 0%,#e83a5a 50%,#8f1435 100%); --glow:rgba(240,70,100,.5); }
.g-faith{ --g:linear-gradient(150deg,#ffe08a 0%,#e8b23a 50%,#8a5a12 100%); --glow:rgba(240,190,70,.5); }
.g-movies{ --g:linear-gradient(150deg,#ff5f6d 0%,#c2185b 50%,#4a0d3f 100%); --glow:rgba(220,50,90,.5); }
.g-music{ --g:linear-gradient(150deg,#b07cff 0%,#6a3df0 50%,#2c1a8a 100%); --glow:rgba(140,90,255,.5); }
.g-food{ --g:linear-gradient(150deg,#ffb35a 0%,#ff7a3d 50%,#a63a12 100%); --glow:rgba(255,140,60,.5); }
.g-sports{ --g:linear-gradient(150deg,#4ade80 0%,#16a34a 50%,#0b5131 100%); --glow:rgba(40,190,100,.5); }
.g-art{ --g:linear-gradient(150deg,#ff8fd8 0%,#c056e6 50%,#5a1a8a 100%); --glow:rgba(200,90,230,.5); }
.g-nature{ --g:linear-gradient(150deg,#a3e635 0%,#4d9c1a 50%,#22540d 100%); --glow:rgba(130,200,50,.45); }
.g-french{ --g:linear-gradient(150deg,#6aa8ff 0%,#3a5be0 50%,#c03a5a 100%); --glow:rgba(80,120,240,.5); }

/* home: today's best card is the bigger one, first on phones */
#bestCard .card-h{ margin-bottom:10px; }
@media (max-width:760px){ .below #bestCard{ order:-1; } }

/* phone polish */
#installToast{ width:max-content; }
.cta > span:first-child{ white-space:nowrap; }
@media (max-width:760px){
  .cta .price em{ display:none; }
  .cta .price{ height:36px; padding:0 12px; }
  .cta{ font-size:.98rem; }
}

/* ==========================================================================
   v2.0 Daily Theme — the 8th card wears a different theme every day
   ========================================================================== */
.g-theme{ --g:linear-gradient(150deg,#ff6bb5 0%,#7b5cff 50%,#00b8c8 100%); --glow:rgba(150,90,255,.55); }
.g-myths{ --g:linear-gradient(150deg,#ffd36e 0%,#b0479c 50%,#3d1466 100%); --glow:rgba(190,80,170,.55); }
.g-space{ --g:linear-gradient(150deg,#6d7cff 0%,#3b2a9e 50%,#0b0f3a 100%); --glow:rgba(90,100,255,.55); }
.g-books{ --g:linear-gradient(150deg,#7fe0c4 0%,#2a9d8f 50%,#174e4f 100%); --glow:rgba(40,170,150,.5); }
.g-tech{ --g:linear-gradient(150deg,#67e8f9 0%,#2563eb 50%,#1e1b6e 100%); --glow:rgba(40,130,240,.55); }
.g-retro{ --g:linear-gradient(150deg,#ffcf5c 0%,#ff5e8a 45%,#6b2fd6 100%); --glow:rgba(255,90,140,.55); }
.g-games{ --g:linear-gradient(150deg,#4df0ff 0%,#3b5bff 45%,#ff3d9a 100%); --glow:rgba(70,110,255,.55); }
.g-brands{ --g:linear-gradient(150deg,#ffe29a 0%,#d4a017 40%,#2b2112 100%); --glow:rgba(220,170,40,.5); }

@property --ring{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
.sc.themed{ box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.12), inset 0 -60px 70px -20px rgba(0,0,0,.35), 0 22px 46px -14px var(--glow); }
.sc.themed .sc-wm{ display:none; }
/* confetti-dot texture: only the theme card has it */
.sc-dots{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.26) 1.1px, transparent 1.7px); background-size:13px 13px;
  -webkit-mask-image:linear-gradient(205deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 75%); mask-image:linear-gradient(205deg,#000 0%,rgba(0,0,0,.4) 45%,transparent 75%); }
/* a light that runs around the edge */
.sc-ring{ position:absolute; inset:0; z-index:3; padding:2px; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--ring), transparent 0deg 250deg, rgba(255,255,255,.95) 300deg, transparent 340deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:ringspin 4.5s linear infinite; }
@keyframes ringspin{ to{ --ring:360deg; } }
/* theme art: three floating stickers */
.sc-art{ position:absolute; inset:0; z-index:-1; pointer-events:none; }
.sc-art span{ position:absolute; line-height:1; filter:drop-shadow(0 6px 10px rgba(0,0,0,.35)); animation:artfloat 5s ease-in-out infinite; }
.sc-art span:nth-child(1){ top:30%; right:7%; font-size:2.1rem; rotate:12deg; }
.sc-art span:nth-child(2){ top:46%; right:31%; font-size:1.35rem; rotate:-12deg; animation-delay:-1.7s; opacity:.92; }
.sc-art span:nth-child(3){ top:62%; right:12%; font-size:1.6rem; rotate:7deg; animation-delay:-3.2s; }
@keyframes artfloat{ 0%,100%{ translate:0 0; } 50%{ translate:0 -7px; } }
.sc:hover .sc-art span{ animation-duration:2.4s; }
.sc-tag.theme{ background:#fff; color:#1a1030; border-color:#fff; box-shadow:0 4px 14px rgba(0,0,0,.25); }
.sc-tag.theme .short{ display:none; }
.sc-next{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-right:8px; }
.sc-next b{ font-weight:900; color:#fff; }
@media (max-width:760px){
  .sc-tag.theme .long{ display:none; } .sc-tag.theme .short{ display:inline; }
  .sc-art span:nth-child(1){ top:31%; right:5%; font-size:1.45rem; }
  .sc-art span:nth-child(2){ top:50%; right:30%; font-size:1rem; }
  .sc-art span:nth-child(3){ top:54%; right:6%; font-size:1.15rem; }
  .sc-next .nm{ display:none; }
}
@media (prefers-reduced-motion:reduce){ .sc-ring, .sc-art span{ animation:none; } }

/* ==========================================================================
   v2.0 groups — nudge banner, invite QR code
   ========================================================================== */
.nudge-bar{ position:fixed; left:50%; top:78px; z-index:45; display:flex; align-items:center; gap:10px; width:min(560px, calc(100% - 24px));
  padding:10px 10px 10px 14px; border-radius:18px; color:#fff; font-size:.9rem; opacity:0; pointer-events:none; transform:translate(-50%,-16px);
  background:linear-gradient(100deg, rgba(124,92,255,.96), rgba(0,170,160,.94)); box-shadow:0 18px 40px -12px rgba(0,0,0,.6); transition:opacity .3s, transform .35s var(--spring); }
.nudge-bar.show{ opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.nudge-bar .em{ font-size:1.5rem; }
.nudge-bar .t{ flex:1; line-height:1.35; }
.nudge-bar .x{ flex:none; width:28px; height:28px; border:none; border-radius:9px; background:rgba(255,255,255,.16); color:#fff; cursor:pointer; }
.inv-qr{ display:flex; flex-direction:column; align-items:center; gap:8px; margin-top:14px; color:var(--dim); font-size:.84rem; }
.inv-qr img{ width:200px; height:200px; image-rendering:pixelated; background:#fff; padding:10px; border-radius:16px; }
.best-list .you .linkish{ font-weight:800; }

/* ==========================================================================
   v2.0 privacy & terms, account deletion
   ========================================================================== */
.site-foot{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px 10px; margin:26px 0 8px; font-size:.82rem; color:var(--mute); }
.site-foot a{ color:var(--dim); text-decoration:none; }
.site-foot a:hover{ color:#fff; text-decoration:underline; }
.legal-line{ margin-top:10px; font-size:.76rem; line-height:1.5; color:var(--mute); text-align:center; }
.legal-line a{ color:var(--dim); text-decoration:underline; text-underline-offset:2px; }
.danger-zone{ margin-top:18px; padding-top:12px; border-top:1px solid var(--line); text-align:center; }
.link-out.danger{ color:#ff8fa3; }
.legal-body{ margin-top:16px; max-height:min(62vh, 640px); overflow-y:auto; text-align:left; font-size:.9rem; line-height:1.6; color:var(--ink-2); padding-right:4px; }
.legal-body h3{ margin:18px 0 6px; font-size:1rem; color:#fff; }
.legal-body h3:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ margin-bottom:6px; }
.legal-body ul{ padding-left:18px; }
.legal-body b{ color:#fff; }
.legal-body .upd{ font-size:.78rem; color:var(--mute); }

/* phone header: brand + points + streak + log in + avatar must fit 360px screens */
.login-btn{ white-space:nowrap; }
.topbar .brand{ min-width:0; flex:0 1 auto; }
.topbar .brand span{ white-space:nowrap; overflow:hidden; }
.top-right{ flex:none; }
@media (max-width:430px){
  .topbar .wrap{ gap:8px; }
  .top-right{ gap:6px; }
  .brand{ gap:7px; font-size:1rem; } .brand img{ width:30px; height:30px; }
  .stat-chip{ height:34px; padding:0 9px; gap:4px; font-size:.84rem; }
  .login-btn{ height:34px; padding:0 11px; font-size:.84rem; }
  .avatar{ width:34px; height:34px; }
}
@media (max-width:374px){ .topbar .brand span{ display:none; } }
/* phone: a finished card's footer keeps to one line */
@media (max-width:430px){ .sc.done-card .sc-foot > span:last-child{ display:none; } .sc.done-card .sc-foot{ justify-content:flex-start; } }

/* ==========================================================================
   v2.0 home: "about DayQuizz" — crawlable copy for search engines & AI, useful for first-time players
   ========================================================================== */
.about{ margin:34px auto 0; max-width:980px; }
.about h2{ font-size:clamp(1.35rem, 3.2vw, 1.75rem); font-weight:900; line-height:1.2; margin-bottom:10px; }
.about-lead{ color:var(--ink-2); font-size:1.02rem; line-height:1.65; max-width:820px; }
.about-lead b{ color:#fff; }
.about-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:18px; }
.about-card h3{ font-size:1.05rem; font-weight:800; margin-bottom:8px; }
.about-card ol, .about-card ul{ margin:0; padding-left:20px; color:var(--ink-2); font-size:.94rem; line-height:1.6; }
.about-card li{ margin:5px 0; }
.about-card p{ color:var(--ink-2); font-size:.94rem; line-height:1.6; }
.about-card b{ color:#fff; }
.about-h{ margin:26px 0 12px; font-size:1.15rem; font-weight:800; }
.about-subjects{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.about-subjects a{ display:grid; grid-template-columns:30px minmax(0,1fr); column-gap:8px; align-items:center; height:100%; padding:12px 14px; border-radius:var(--r); background:var(--s1); border:1px solid var(--line); color:#fff; text-decoration:none; transition:border-color .2s, background .2s; }
.about-subjects a:hover{ border-color:var(--line-3); background:var(--s2); }
.about-subjects .ab-em{ grid-row:span 2; font-size:1.35rem; }
.about-subjects b{ font-size:.95rem; }
.about-subjects small{ color:var(--dim); font-size:.8rem; line-height:1.35; }
.about-faq details{ border-top:1px solid var(--line); }
.about-faq details:first-child{ border-top:0; }
.about-faq summary{ cursor:pointer; padding:13px 0; font-weight:700; color:#fff; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.about-faq summary::-webkit-details-marker{ display:none; }
.about-faq summary::after{ content:"＋"; color:var(--teal); font-weight:900; flex:none; }
.about-faq details[open] summary::after{ content:"－"; }
.about-faq p{ margin:0 0 14px; color:var(--ink-2); font-size:.94rem; line-height:1.6; max-width:820px; }
.about-more{ margin-top:16px; }
.about-more a{ color:var(--teal); font-weight:700; text-decoration:none; }
@media (max-width:860px){ .about-subjects{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){ .about-grid{ grid-template-columns:minmax(0,1fr); } .about{ margin-top:26px; } }
@media (max-width:380px){ .about-subjects{ grid-template-columns:minmax(0,1fr); } }