:root{
  --bg:#07111f;
  --bg2:#0e1d34;
  --bg3:#152a49;
  --card:rgba(11,23,43,.78);
  --card-strong:rgba(16,31,56,.92);
  --card-soft:rgba(255,255,255,.06);
  --txt:#f7fbff;
  --muted:#aebfdf;
  --accent:#ffb703;
  --accent2:#fb8500;
  --accent3:#58e6c5;
  --accent4:#7c9cff;
  --green:#46e29f;
  --red:#ff6f7d;
  --line:rgba(162,188,237,.16);
  --line-strong:rgba(255,183,3,.26);
  --accent-shadow:0 18px 34px rgba(251,133,0,.28);
  --accent-shadow-strong:0 24px 44px rgba(251,133,0,.34);
  --accent-ring:0 0 0 6px rgba(255,183,3,.08);
  --bottom-surface:
    linear-gradient(140deg,rgba(255,255,255,.08),transparent 30%),
    rgba(7,16,30,.76);
  --bottom-border:rgba(255,255,255,.08);
  --bottom-shadow:0 24px 40px rgba(3,8,18,.28);
  --shadow:0 24px 60px rgba(1,8,20,.38);
  --shadow-soft:0 16px 40px rgba(5,10,20,.26);
  --glow:0 0 0 1px rgba(255,255,255,.04) inset;
}
body.light{
  --bg:#eef5ff;
  --bg2:#dbe9fb;
  --bg3:#c6d9f4;
  --card:rgba(255,255,255,.76);
  --card-strong:rgba(250,252,255,.94);
  --card-soft:rgba(26,55,96,.05);
  --txt:#14233d;
  --muted:#617393;
  --accent:#f6a300;
  --accent2:#ff7b00;
  --accent3:#18c3a0;
  --accent4:#5474ff;
  --line:rgba(55,92,148,.14);
  --line-strong:rgba(246,163,0,.26);
  --accent-shadow:0 16px 28px rgba(246,163,0,.22);
  --accent-shadow-strong:0 22px 38px rgba(255,123,0,.28);
  --accent-ring:0 0 0 6px rgba(246,163,0,.1);
  --bottom-surface:
    linear-gradient(140deg,rgba(255,255,255,.9),rgba(255,255,255,.55) 35%,rgba(219,233,251,.88)),
    radial-gradient(circle at top right,rgba(246,163,0,.14),transparent 45%);
  --bottom-border:rgba(255,255,255,.78);
  --bottom-shadow:0 20px 34px rgba(71,97,138,.18);
  --shadow:0 22px 44px rgba(63,90,128,.16);
  --shadow-soft:0 14px 32px rgba(71,97,138,.12);
  --glow:0 0 0 1px rgba(255,255,255,.5) inset;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
img{max-width:100%;height:auto}
body{
  margin:0;
  font-family:'Vazirmatn',Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 12% 14%,rgba(255,183,3,.18),transparent 20%),
    radial-gradient(circle at 85% 10%,rgba(88,230,197,.16),transparent 24%),
    radial-gradient(circle at 80% 78%,rgba(124,156,255,.18),transparent 22%),
    linear-gradient(145deg,var(--bg),var(--bg2) 48%,var(--bg3));
  color:var(--txt);
  min-height:100vh;
  min-height:100dvh;
  padding:16px;
  font-size:19px;
  line-height:1.75;
  transition:background .45s ease,color .25s ease;
  overflow-x:hidden;
}
body::before,
body::after{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
}
body::before{
  background:
    linear-gradient(120deg,rgba(255,255,255,.05),transparent 28%,transparent 72%,rgba(255,255,255,.03)),
    radial-gradient(circle at 20% 20%,rgba(255,255,255,.06),transparent 18%),
    radial-gradient(circle at 75% 25%,rgba(255,183,3,.12),transparent 16%),
    radial-gradient(circle at 55% 82%,rgba(88,230,197,.1),transparent 18%);
}
body::after{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:32px 32px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.28),transparent 85%);
  opacity:.4;
}
body.light{
  background:
    radial-gradient(circle at 14% 16%,rgba(246,163,0,.12),transparent 21%),
    radial-gradient(circle at 88% 12%,rgba(24,195,160,.11),transparent 24%),
    radial-gradient(circle at 82% 78%,rgba(84,116,255,.12),transparent 22%),
    linear-gradient(180deg,var(--bg),var(--bg2) 48%,var(--bg3));
}
body.size-sm{font-size:17px}
body.size-md{font-size:19px}
body.size-lg{font-size:21px}
.app{max-width:1160px;margin:0 auto;width:min(100%,1160px);min-height:calc(100vh - 32px);min-height:calc(100dvh - 32px)}
.screen{display:none;animation:screenReveal .5s cubic-bezier(.2,.8,.2,1);width:100%}
.screen.active{display:block}
.screen>section{margin-bottom:18px}
.screen>section:last-child{margin-bottom:0}
@keyframes screenReveal{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cardFloat{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes logoPulse{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes shine{from{transform:translateX(-120%) skewX(-16deg)}to{transform:translateX(160%) skewX(-16deg)}}
.card{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%),
    linear-gradient(140deg,var(--card),var(--card-strong));
  backdrop-filter:blur(20px) saturate(130%);
  border:1px solid var(--line);
  border-radius:28px;
  padding:20px;
  box-shadow:var(--shadow),var(--glow);
  margin-bottom:12px;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease,background .28s ease;
  animation:cardFloat .45s ease both;
}
.card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(130deg,rgba(255,255,255,.09),transparent 32%,transparent 68%,rgba(255,183,3,.06));
  pointer-events:none;
}
.card:hover{
  transform:translateY(-4px);
  box-shadow:var(--accent-shadow-strong),var(--accent-ring),var(--glow);
  border-color:var(--line-strong);
}
.compact{padding:14px 16px}
.hero,.hero-mini{padding:28px}
.hero{position:relative;overflow:hidden}
.hero::after,.hero-mini::after{
  content:'';
  position:absolute;
  inset:auto -10% -46% auto;
  width:260px;
  height:260px;
  background:radial-gradient(circle,rgba(255,183,3,.24),transparent 62%);
  pointer-events:none;
}
.hero::before{
  content:'';
  position:absolute;
  width:320px;
  height:320px;
  left:-120px;
  top:-140px;
  background:radial-gradient(circle,rgba(88,230,197,.18),transparent 64%);
  pointer-events:none;
}
.brand-row{display:flex;align-items:center;gap:16px;min-width:0}
.brand-row.small h2{margin:0}
.logo{
  width:126px;
  height:126px;
  border-radius:28px;
  background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  display:grid;
  place-items:center;
  font-size:30px;
  box-shadow:0 18px 40px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.logo.small{width:90px;height:90px;font-size:21px;border-radius:24px}
.logo img{width:100%;height:100%;object-fit:contain;display:block;background:transparent}
h1,h2,h3,p{margin:0 0 10px}
h1{font-size:clamp(2.2rem,4vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.05}
h2{font-size:clamp(1.5rem,2.8vw,2.05rem);font-weight:800;letter-spacing:-.02em}
h3{font-size:clamp(1.12rem,2vw,1.38rem);font-weight:700}
p{font-size:1.16rem}
strong{font-weight:800}
.muted{color:var(--muted)}
.stack{display:grid;gap:12px}
.grid{display:grid;gap:14px}
.grid.two{grid-template-columns:1fr}
.row{display:flex;align-items:center;gap:10px}
.between{justify-content:space-between}
.actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
  align-items:center;
  align-content:flex-start;
  max-width:320px;
  margin-inline-start:auto;
}
.pill{
  background:linear-gradient(145deg,rgba(255,255,255,.07),var(--card-soft));
  border:1px solid var(--line);
  padding:10px 14px;
  border-radius:999px;
  backdrop-filter:blur(12px);
  font-size:1.04rem;
  box-shadow:var(--shadow-soft);
}
.btn,.icon,.nav{
  border:none;
  cursor:pointer;
  transition:transform .18s ease,box-shadow .24s ease,background .24s ease,border-color .24s ease,color .24s ease,filter .24s ease;
}
.btn:hover,.icon:hover,.nav:hover{transform:translateY(-2px)}
.btn:active,.icon:active,.nav:active{transform:translateY(0) scale(.985)}
.btn{
  position:relative;
  overflow:hidden;
  padding:14px 18px;
  border-radius:20px;
  font-weight:800;
  font-size:1.08rem;
  font-family:inherit;
  box-shadow:var(--shadow-soft);
}
.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.26) 45%,transparent 65%);
  opacity:0;
}
.btn:hover::before{opacity:1;animation:shine .85s ease}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),var(--accent2) 48%,#ffd166 100%);
  color:#1b2132;
  box-shadow:0 16px 34px rgba(251,133,0,.28),inset 0 1px 0 rgba(255,255,255,.34);
}
.btn.primary:hover{box-shadow:var(--accent-shadow-strong),inset 0 1px 0 rgba(255,255,255,.36)}
.btn.soft{
  background:linear-gradient(145deg,rgba(255,255,255,.08),var(--card-soft));
  color:var(--txt);
  border:1px solid var(--line);
}
.wide{width:100%}
.icon{
  background:linear-gradient(145deg,rgba(255,255,255,.08),var(--card-soft));
  color:var(--txt);
  border:1px solid var(--line);
  width:46px;
  height:46px;
  border-radius:16px;
  font-size:1rem;
  box-shadow:var(--shadow-soft);
}
.profile-shortcut{
  width:42px;
  height:42px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.22),transparent 32%),
    linear-gradient(135deg,rgba(70,226,159,.28),rgba(88,230,197,.18) 48%,rgba(17,24,39,.96) 100%);
  border-color:rgba(70,226,159,.35);
  color:#46e29f;
  box-shadow:
    0 16px 30px rgba(8,15,28,.24),
    0 0 0 1px rgba(70,226,159,.08) inset,
    inset 0 1px 0 rgba(255,255,255,.16);
}
.profile-shortcut:hover{
  border-color:rgba(70,226,159,.55);
  box-shadow:
    var(--accent-shadow),
    var(--accent-ring),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.about-shortcut{
  width:100%;
  max-width:190px;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:14px 22px;
  border-radius:999px;
  text-align:center;
  background:linear-gradient(135deg,#5f3bdb,#4c2dcb 58%,#6039e8 100%);
  color:#fff;
  box-shadow:0 10px 18px rgba(76,45,203,.3),inset 0 1px 0 rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.08);
}
.about-shortcut span{
  color:#fff;
  font-size:1.08rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:.01em;
}
body.light .about-shortcut span{
  color:#000;
}
.about-shortcut:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 24px rgba(76,45,203,.38),0 0 0 4px rgba(95,59,219,.12);
  filter:none;
}
.about-card p:last-child{
  margin-bottom:0;
  font-weight:800;
  color:var(--accent);
}
.subtop [data-back]{
  position:relative;
  width:58px;
  height:58px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:
    radial-gradient(circle at 28% 20%,rgba(255,255,255,.24),transparent 28%),
    linear-gradient(135deg,rgba(88,230,197,.2),rgba(255,183,3,.18) 46%,rgba(17,24,39,.98) 100%);
  color:transparent;
  box-shadow:
    0 20px 40px rgba(8,15,28,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
  overflow:hidden;
}
.subtop [data-back]::before{
  content:'';
  position:absolute;
  inset:5px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 45%),
    linear-gradient(145deg,rgba(17,24,39,.96),rgba(24,33,53,.84));
}
.subtop [data-back]::after{
  content:'›';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-54%);
  color:#fff5d1;
  font-size:2rem;
  font-weight:700;
  line-height:1;
  text-shadow:0 4px 10px rgba(255,183,3,.22);
}
.subtop [data-back] span,
.subtop [data-back] svg{
  display:none;
}
.subtop [data-back]:hover{
  transform:translateY(-3px) scale(1.04);
  border-color:rgba(255,183,3,.42);
  box-shadow:
    var(--accent-shadow-strong),
    var(--accent-ring),
    inset 0 1px 0 rgba(255,255,255,.2);
}
.subtop [data-back]:active{
  transform:translateY(0) scale(.97);
}
.nav{
  display:grid;
  gap:10px;
  text-align:right;
  padding:22px;
  background:
    radial-gradient(circle at top left,rgba(255,183,3,.12),transparent 32%),
    linear-gradient(145deg,rgba(255,255,255,.07),transparent 28%),
    linear-gradient(145deg,var(--card),var(--card-strong));
  color:var(--txt);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
.nav::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(130deg,rgba(255,255,255,.12),transparent 36%,transparent 66%,rgba(88,230,197,.1));
  opacity:.7;
  transition:opacity .22s ease;
  z-index:-1;
}
.nav::after{
  content:'';
  position:absolute;
  inset:auto auto -40px -30px;
  width:110px;
  height:110px;
  background:radial-gradient(circle,rgba(124,156,255,.18),transparent 68%);
  transition:transform .28s ease,opacity .28s ease;
  z-index:-1;
}
.nav:hover::before{opacity:1}
.nav:hover::after{transform:scale(1.12);opacity:1}
.nav strong{font-size:1.5em;line-height:1.15}
.nav small{color:var(--muted);font-size:1.2rem;line-height:1.6}
.field{display:grid;gap:8px}
.field span{font-weight:700;font-size:1.12rem}
.field input,.field select,.input{
  width:100%;
  padding:15px 16px;
  border-radius:18px;
  border:1px solid var(--line);
  background:linear-gradient(145deg,rgba(255,255,255,.08),var(--card-soft));
  background-color:#111827;
  color:var(--txt);
  font-family:inherit;
  font-size:1.08rem;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease,background .2s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.search-wrap{
  position:relative;
}
.search-icon{
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,183,3,.18),rgba(88,230,197,.12));
  color:#fff7db;
  font-size:1.1rem;
  pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.search-input{
  padding-right:64px;
  border-radius:22px;
  background:
    radial-gradient(circle at top right,rgba(255,183,3,.08),transparent 24%),
    linear-gradient(145deg,rgba(255,255,255,.08),var(--card-soft));
}
.field select,
.field select option{
  background-color:#111827;
  color:#fff;
}
.field input::placeholder,.input::placeholder{color:color-mix(in srgb,var(--muted) 82%, transparent)}
.field input:focus,.field select:focus,.input:focus{
  outline:none;
  border-color:var(--line-strong);
  box-shadow:0 0 0 4px rgba(255,183,3,.12),0 12px 26px rgba(3,10,22,.14);
  transform:translateY(-1px);
}
.field.row.between{
  padding:10px 0;
}
.field.row.between input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.03)),
    #111827;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 22px rgba(0,0,0,.22);
  cursor:pointer;
  position:relative;
  transition:transform .18s ease,box-shadow .2s ease,border-color .2s ease,background .2s ease;
}
.field.row.between input[type="checkbox"]::before{
  content:'';
  position:absolute;
  inset:7px;
  border-radius:8px;
  background:linear-gradient(145deg,rgba(255,183,3,.95),rgba(88,230,197,.95));
  transform:scale(.2);
  opacity:0;
  transition:transform .18s ease,opacity .18s ease;
}
.field.row.between input[type="checkbox"]::after{
  content:'✓';
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  color:#08101d;
  font-size:1.15rem;
  font-weight:900;
  opacity:0;
  transform:scale(.5);
  transition:transform .18s ease,opacity .18s ease;
}
.field.row.between input[type="checkbox"]:hover{
  transform:translateY(-1px) scale(1.03);
  border-color:rgba(255,183,3,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    var(--accent-shadow);
}
.field.row.between input[type="checkbox"]:focus-visible{
  outline:none;
  border-color:rgba(255,183,3,.75);
  box-shadow:
    0 0 0 4px rgba(255,183,3,.14),
    0 14px 28px rgba(0,0,0,.28);
}
.field.row.between input[type="checkbox"]:checked{
  border-color:rgba(88,230,197,.72);
  background:
    linear-gradient(145deg,rgba(88,230,197,.18),rgba(255,183,3,.12)),
    #111827;
}
.field.row.between input[type="checkbox"]:checked::before,
.field.row.between input[type="checkbox"]:checked::after{
  opacity:1;
  transform:scale(1);
}
.topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  background:
    radial-gradient(circle at top right,rgba(88,230,197,.12),transparent 24%),
    linear-gradient(145deg,var(--card),var(--card-strong));
}
#welcome-name{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:8px 13px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--accent),var(--accent2) 48%,#ffd166 100%);
  color:#1b2132;
  font-size:.9rem;
  font-weight:800;
  box-shadow:0 14px 28px rgba(251,133,0,.24),inset 0 1px 0 rgba(255,255,255,.34);
}
.subtop{
  display:flex;
  align-items:center;
  gap:10px;
  background:
    linear-gradient(140deg,rgba(255,255,255,.08),transparent 28%),
    linear-gradient(145deg,var(--card),var(--card-strong));
}
.subtop h2{margin:0}
.bottom{
  position:sticky;
  bottom:max(10px,env(safe-area-inset-bottom));
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:8px;
  background:var(--bottom-surface);
  backdrop-filter:blur(18px) saturate(140%);
  width:100%;
  border:1px solid var(--bottom-border);
  box-shadow:var(--bottom-shadow);
}
.bottom button{
  position:relative;
  overflow:hidden;
  padding:11px 10px;
  border:none;
  border-radius:16px;
  background:linear-gradient(145deg,rgba(255,255,255,.12),var(--card-soft));
  color:var(--txt);
  font-family:inherit;
  font-size:1.02rem;
  transition:transform .2s ease,background .22s ease,color .22s ease,box-shadow .22s ease,filter .22s ease;
}
.bottom button::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.28) 48%,transparent 78%);
  transform:translateX(-140%);
  transition:transform .45s ease;
  pointer-events:none;
}
.bottom button:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:var(--accent-shadow);
  filter:saturate(1.12);
}
.bottom button:hover::before{
  transform:translateX(140%);
}
.bottom button.active{
  background:linear-gradient(135deg,var(--accent),var(--accent2) 52%,#ffd166);
  color:#162132;
  font-weight:800;
  box-shadow:0 12px 24px rgba(251,133,0,.24);
}
.bottom button,.pill,.btn,.answer,.nav,.field input,.field select,.input{min-width:0}
.quiz-head{
  background:
    radial-gradient(circle at top right,rgba(124,156,255,.12),transparent 24%),
    linear-gradient(140deg,var(--card),var(--card-strong));
}
.question-card{
  padding:24px;
  background:
    radial-gradient(circle at top left,rgba(255,183,3,.1),transparent 22%),
    linear-gradient(145deg,var(--card),var(--card-strong));
}
.hint-grid{margin-top:8px}
.progress{
  height:12px;
  background:linear-gradient(145deg,rgba(255,255,255,.06),var(--card-soft));
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
}
.progress>div{
  height:100%;
  width:10%;
  background:linear-gradient(90deg,#ff7b72,var(--accent),var(--accent2),var(--accent3));
  box-shadow:0 0 18px rgba(255,183,3,.35);
  transition:width .35s ease;
}
#start-btn{margin-top:12px}
#again-btn{margin-top:16px}
.answer{
  width:100%;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid var(--line);
  background:
    linear-gradient(145deg,rgba(255,255,255,.06),transparent 28%),
    linear-gradient(145deg,var(--card-soft),rgba(255,255,255,.02));
  color:var(--txt);
  text-align:right;
  font-size:1.05em;
  font-family:inherit;
  margin-bottom:12px;
  box-shadow:var(--shadow-soft);
}
.answer:hover{
  border-color:var(--line-strong);
  transform:translateX(-3px);
  box-shadow:var(--accent-shadow);
}
.answer.correct{
  border-color:var(--green);
  background:
    linear-gradient(145deg,rgba(70,226,159,.16),transparent 32%),
    linear-gradient(145deg,var(--card-soft),rgba(70,226,159,.08));
  box-shadow:0 0 0 2px rgba(70,226,159,.12) inset,0 16px 28px rgba(8,15,28,.16);
}
.answer.wrong{
  border-color:var(--red);
  background:
    linear-gradient(145deg,rgba(255,111,125,.16),transparent 32%),
    linear-gradient(145deg,var(--card-soft),rgba(255,111,125,.08));
  box-shadow:0 0 0 2px rgba(255,111,125,.1) inset,0 16px 28px rgba(8,15,28,.16);
}
.answer.removed{display:none}
.hidden{display:none !important}
#result-box{
  background:
    radial-gradient(circle at top right,rgba(255,183,3,.12),transparent 24%),
    linear-gradient(145deg,var(--card),var(--card-strong));
}
.result-emoji{font-size:50px;animation:logoPulse 2.6s ease-in-out infinite}
.stats .stat,.stat{
  background:
    linear-gradient(145deg,rgba(255,255,255,.08),var(--card-soft));
  border:1px solid var(--line);
  padding:16px;
  border-radius:22px;
  display:grid;
  gap:6px;
  box-shadow:var(--shadow-soft);
}
.stat strong{font-size:1.22em}
.badge-wrap{display:flex;flex-wrap:wrap;gap:10px}
.badge{
  padding:9px 12px;
  background:linear-gradient(145deg,rgba(255,183,3,.14),rgba(255,255,255,.06));
  border:1px solid rgba(255,183,3,.24);
  border-radius:999px;
  box-shadow:var(--shadow-soft);
}
.artist-tile{
  display:grid;
  gap:9px;
  min-width:0;
  background:
    radial-gradient(circle at top right,rgba(124,156,255,.12),transparent 24%),
    linear-gradient(145deg,var(--card),var(--card-strong));
}
.artist-tile .meta{color:var(--muted);font-size:1.02rem}
#leaderboard .card{
  background:
    linear-gradient(145deg,rgba(255,255,255,.07),transparent 24%),
    linear-gradient(145deg,var(--card),var(--card-strong));
}
.toast{
  position:fixed;
  top:16px;
  left:50%;
  transform:translateX(-50%) translateY(-22px);
  background:linear-gradient(135deg,#151f34,#233556);
  color:#fff;
  padding:12px 16px;
  border-radius:999px;
  opacity:0;
  pointer-events:none;
  transition:.22s;
  z-index:99;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}
.home-fab{
  position:fixed;
  left:18px;
  bottom:26px;
  width:62px;
  height:62px;
  display:grid;
  place-items:center;
  border:none;
  border-radius:22px;
  background:
    radial-gradient(circle at 30% 25%,rgba(255,255,255,.28),transparent 30%),
    linear-gradient(135deg,var(--accent),var(--accent2) 52%,#ffd166 100%);
  color:#1b2132;
  font-size:1.7rem;
  box-shadow:0 18px 34px rgba(251,133,0,.3),inset 0 1px 0 rgba(255,255,255,.34);
  cursor:pointer;
  z-index:45;
  transition:transform .18s ease,box-shadow .24s ease,filter .24s ease;
}
.home-fab:hover{
  transform:translateY(-3px) scale(1.04);
  box-shadow:0 24px 42px rgba(251,133,0,.34),0 0 0 6px rgba(255,183,3,.08);
}
.home-fab:active{
  transform:translateY(0) scale(.98);
}
.site-credit{
  margin:18px 0 0;
  padding:0 4px 6px;
  text-align:right;
  color:rgba(255,255,255,.9);
  font-size:.9rem;
  line-height:1;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:900px){
  body{padding:12px;font-size:18px}
  .app{min-height:calc(100vh - 24px);min-height:calc(100dvh - 24px)}
  .logo{width:108px;height:108px}
  .logo.small{width:76px;height:76px}
  .nav{padding:18px}
  .nav strong{font-size:1.32em}
  .nav small{font-size:1.1rem}
}
@media(max-width:700px){
  body{padding:10px;font-size:17px}
  .app{min-height:calc(100vh - 20px);min-height:calc(100dvh - 20px)}
  .card{border-radius:22px;padding:16px}
  .compact{padding:12px}
  .hero,.hero-mini,.question-card{padding:19px}
  .brand-row{gap:10px;align-items:flex-start}
  .logo{width:92px;height:92px;border-radius:22px}
  .logo.small{width:64px;height:64px}
  .topbar,.subtop,.row.between{flex-wrap:wrap}
  .topbar{align-items:flex-start}
  .topbar .brand-row.small{flex:1 1 100%}
  .actions{width:100%;max-width:none}
  .pill{font-size:1rem}
  .btn{font-size:1rem}
  .nav{padding:16px;border-radius:20px}
  .nav strong{font-size:1.16em}
  .nav small{font-size:1rem;line-height:1.5}
  .field span,p,.artist-tile .meta{font-size:1rem}
  .field input,.field select,.input,.bottom button{font-size:1rem}
  .bottom{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bottom button{padding:10px 8px}
  .grid.two{grid-template-columns:1fr}
  .question-card h3{font-size:1.2rem}
}
@media(max-width:480px){
  body{padding:8px;font-size:16px;line-height:1.65}
  .app{min-height:calc(100vh - 16px);min-height:calc(100dvh - 16px)}
  .card{padding:14px;border-radius:18px}
  .compact{padding:10px}
  .hero,.hero-mini,.question-card{padding:16px}
  .brand-row{gap:8px}
  .logo{width:78px;height:78px;border-radius:18px}
  .logo.small{width:54px;height:54px}
  h1{font-size:clamp(1.7rem,8vw,2.25rem)}
  h2{font-size:clamp(1.24rem,6vw,1.62rem)}
  h3{font-size:clamp(1rem,5vw,1.2rem)}
  p{font-size:1rem}
  .nav{padding:14px}
  .nav strong{font-size:1.04em}
  .nav small{font-size:.92rem;line-height:1.42}
  .pill{font-size:.92rem;padding:8px 11px}
  .icon{width:40px;height:40px}
  .bottom{grid-template-columns:repeat(2,minmax(0,1fr));position:static}
  .bottom button{font-size:.94rem}
  .row{flex-wrap:wrap}
  .toast{width:calc(100% - 24px);border-radius:18px;text-align:center}
  .site-credit{
    font-size:.78rem;
    padding:0 2px 4px;
  }
}
@media(min-width:700px){
  body{padding:22px}
  .grid.two{grid-template-columns:1fr 1fr}
  .hero{max-width:760px;margin:34px auto}
  .hero-mini,.question-card{padding:28px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .screen,.card,.logo,.result-emoji{animation:none}
  .btn,.icon,.nav,.answer,.progress>div,body,.toast{transition:none}
}