/* ═══════════════════════════════════════════════════════════
   SHASMASTER v7 — "NEON KODESH"
   A Torah learning game that feels alive
   ═══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700;900&family=Marcellus+SC&family=Spectral:wght@300;400;500;600;700;800&family=Frank+Ruhl+Libre:wght@400;500;700;900&family=Noto+Serif+Hebrew:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap');

:root{
  /* IDENTITY: "Illuminated Arcade" — deep teal-ink base, parchment gold hero,
     royal tekhelet blue + ember accents. Warm, scholarly, unmistakably its own. */
  --bg0:#0a0f12;          /* near-black teal ink */
  --bg1:#0e151a;
  --bg2:#131d24;
  --surface:#16222a;
  --surface2:#1c2c36;
  --raised:#243845;
  --line:#26333d;
  --line2:#33454f;

  /* Hero + accents */
  --gold:#f4b740;         /* burnished gold leaf */
  --gold-hot:#ffd97a;
  --amber:#ff8a3c;        /* ember */
  --cyan:#2fd4c4;         /* teal-mint (not the usual electric cyan) */
  --cyan-hot:#74efe0;
  --violet:#3b6ef0;       /* tekhelet — royal blue, the signature */
  --violet-hot:#6f9bff;
  --pink:#ff6b8a;         /* warm rose, used sparingly */
  --green:#4fd98a;
  --green-hot:#9bffc4;
  --red:#ff5a5f;

  /* Text — warm parchment whites, not blue-grey */
  --tx:#f6f0e4;
  --tx-soft:#cfc8b8;
  --tx-mut:#8f9aa0;
  --tx-dim:#5a6870;

  /* Gradients — gold→ember hero, teal→blue cool, royal rank arc */
  --grad-gold:linear-gradient(135deg,#ffd97a,#f4b740 45%,#ff8a3c);
  --grad-cyan:linear-gradient(135deg,#2fd4c4,#4fd98a);
  --grad-violet:linear-gradient(135deg,#3b6ef0,#6f9bff);
  --grad-rank:linear-gradient(135deg,#ffd97a 0%,#f4b740 35%,#ff8a3c 70%,#ff6b8a 100%);
  --grad-xp:linear-gradient(90deg,#2fd4c4,#4fd98a,#f4b740);

  --rhe:18px;
  --ren:13px;

  /* Sharper, more architectural corners — less generic rounded-everything */
  --r1:6px;--r2:9px;--r3:13px;--r4:18px;--r5:24px;

  --fdisp:'Marcellus SC',serif;
  --fdeco:'Cinzel Decorative',serif;
  --fbody:'Spectral',serif;
  --fmono:'Space Grotesk',monospace;
  --fhe:'Frank Ruhl Libre','Noto Serif Hebrew',serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;background:var(--bg0);color:var(--tx);font-family:var(--fbody);overflow-x:hidden;}
body{
  padding-bottom:78px;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%,rgba(169,107,255,.12),transparent 60%),
    radial-gradient(ellipse 70% 45% at 90% 5%,rgba(34,224,255,.08),transparent 55%),
    var(--bg0);
  background-attachment:fixed;
}
::selection{background:rgba(34,224,255,.25);}
::-webkit-scrollbar{width:0;height:0;}

/* Animated aurora layer */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:
    radial-gradient(circle at 15% 20%,rgba(255,203,69,.05),transparent 25%),
    radial-gradient(circle at 85% 75%,rgba(255,92,174,.05),transparent 25%);
}

#cvc{position:fixed;inset:0;pointer-events:none;z-index:9000;}

/* XP float burst */
@keyframes xpFloat{
  0%{opacity:1;transform:translateY(0) scale(.6);}
  20%{transform:translateY(-12px) scale(1.3);}
  100%{opacity:0;transform:translateY(-70px) scale(.9);}
}
.xpf{position:fixed;z-index:9999;font-family:var(--fmono);font-weight:700;font-size:.62rem;
  color:var(--green-hot);text-shadow:0 0 12px var(--green),0 0 4px #fff;pointer-events:none;animation:xpFloat 1.3s cubic-bezier(.2,.8,.3,1) forwards;}

/* ── COMBO ── */
.combo-banner{position:fixed;top:42%;left:50%;transform:translate(-50%,-50%) scale(0) rotate(-4deg);z-index:8500;
  background:var(--grad-rank);background-size:200% 200%;animation:comboGrad 1.5s ease infinite;
  border-radius:var(--r4);padding:1rem 2.4rem;font-family:var(--fdeco);font-size:1.4rem;color:#1a0a2e;
  text-align:center;letter-spacing:.02em;box-shadow:0 0 80px rgba(255,92,174,.5),0 20px 60px rgba(0,0,0,.6);
  pointer-events:none;transition:transform .25s cubic-bezier(.34,1.8,.5,1);text-shadow:0 1px 0 rgba(255,255,255,.3);}
.combo-banner.show{transform:translate(-50%,-50%) scale(1) rotate(-2deg);}
@keyframes comboGrad{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}

/* ── LEVEL UP ── */
#levelup{position:fixed;inset:0;z-index:8000;background:radial-gradient(circle at center,rgba(20,12,45,.96),rgba(7,5,18,.98));
  backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  opacity:0;pointer-events:none;transition:opacity .4s;}
#levelup.on{opacity:1;pointer-events:all;}
.lu-rays{position:relative;width:140px;height:140px;margin-bottom:.2rem;}
#levelup.on .lu-rays{animation:luSpin 14s linear infinite;}
@keyframes luSpin{to{transform:rotate(360deg);}}
.lu-ray{position:absolute;top:50%;left:50%;width:2px;height:64px;transform-origin:0 0;
  background:linear-gradient(var(--gold),transparent);opacity:.5;}
.lu-badg{font-size:4rem;filter:drop-shadow(0 0 30px var(--gold)) drop-shadow(0 0 10px var(--gold-hot));}
#levelup.on .lu-badg{animation:luPulse 1.6s ease-in-out infinite;}
@keyframes luPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
.lu-lv{font-family:var(--fmono);font-size:.5rem;color:var(--cyan-hot);letter-spacing:.32em;text-transform:uppercase;}
.lu-ttl{font-family:var(--fdeco);font-size:2.4rem;background:var(--grad-rank);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 30px rgba(255,203,69,.4));}
.lu-sub{font-size:.85rem;color:var(--tx-soft);text-align:center;max-width:280px;line-height:1.55;}
.lu-xp{font-family:var(--fmono);font-size:.52rem;color:var(--green-hot);letter-spacing:.1em;}
.lu-cls{margin-top:.7rem;background:var(--grad-gold);border:none;color:#1a0a2e;font-family:var(--fdisp);font-weight:900;
  font-size:.92rem;letter-spacing:.06em;padding:.78rem 2.6rem;border-radius:40px;cursor:pointer;
  box-shadow:0 0 40px rgba(255,203,69,.5),0 8px 24px rgba(0,0,0,.4);transition:transform .12s;}
.lu-cls:active{transform:scale(.94);}

/* ── SIYUM ── */
#celeb{position:fixed;inset:0;z-index:7900;background:radial-gradient(circle at center,rgba(20,12,45,.96),rgba(7,5,18,.98));
  backdrop-filter:blur(20px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  opacity:0;pointer-events:none;transition:opacity .4s;}
#celeb.on{opacity:1;pointer-events:all;}
.cico{font-size:4.2rem;filter:drop-shadow(0 0 30px var(--gold));}
#celeb.on .cico{animation:luPulse 1.4s ease-in-out infinite;}
.cttl{font-family:var(--fdeco);font-size:2.6rem;background:var(--grad-rank);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.csub{font-size:.92rem;color:var(--tx-soft);text-align:center;white-space:pre-line;max-width:290px;line-height:1.6;}
.cxp{font-family:var(--fmono);font-size:.62rem;color:var(--green-hot);letter-spacing:.1em;}
.ccls{background:var(--grad-violet);border:none;color:#fff;font-family:var(--fdisp);font-weight:900;font-size:.92rem;
  padding:.78rem 2.4rem;border-radius:40px;cursor:pointer;box-shadow:0 0 40px rgba(169,107,255,.5);transition:transform .12s;}
.ccls:active{transform:scale(.94);}

#ov{position:fixed;inset:0;background:rgba(7,5,18,.8);backdrop-filter:blur(8px);z-index:500;display:none;}
#ov.on{display:block;}

/* ══════════════ MODALS ══════════════ */
#auth-modal,#uname-modal{position:fixed;inset:0;z-index:6000;background:rgba(7,5,18,.92);backdrop-filter:blur(24px);
  display:flex;align-items:center;justify-content:center;padding:1.5rem;opacity:0;pointer-events:none;transition:opacity .28s;}
#auth-modal.on,#uname-modal.on{opacity:1;pointer-events:all;}
.auth-box,.uname-box{position:relative;background:linear-gradient(160deg,var(--surface2),var(--surface));
  border:1px solid var(--line2);border-radius:var(--r5);padding:2.1rem 1.7rem;width:100%;max-width:390px;
  box-shadow:0 0 0 1px rgba(255,203,69,.08),0 40px 90px rgba(0,0,0,.7);overflow:hidden;}
.auth-box::before,.uname-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:120%;
  background:radial-gradient(circle,rgba(169,107,255,.1),transparent 60%);pointer-events:none;}
.auth-crest{font-size:2.6rem;text-align:center;margin-bottom:.4rem;position:relative;filter:drop-shadow(0 0 16px rgba(255,203,69,.4));}
.auth-title{font-family:var(--fdeco);font-size:1.4rem;text-align:center;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;}
.auth-sub{font-size:.76rem;color:var(--tx-mut);text-align:center;margin:.35rem 0 1.2rem;line-height:1.5;position:relative;}
.auth-tabs{display:flex;gap:.45rem;margin-bottom:1.2rem;position:relative;}
.auth-tab{flex:1;padding:.5rem;border:1px solid var(--line2);background:transparent;color:var(--tx-mut);border-radius:var(--r2);font-family:var(--fbody);font-size:.78rem;font-weight:500;cursor:pointer;transition:all .2s;}
.auth-tab.on{background:var(--grad-gold);border-color:transparent;color:#1a0a2e;font-weight:700;box-shadow:0 4px 16px rgba(255,154,60,.3);}
.auth-field{margin-bottom:.85rem;position:relative;}
.auth-field label{font-size:.6rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.14em;display:block;margin-bottom:.3rem;font-family:var(--fmono);}
.auth-inp{width:100%;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx);font-family:var(--fbody);font-size:.9rem;padding:.6rem .85rem;outline:none;transition:all .2s;}
.auth-inp:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,224,255,.12);}
.auth-err{font-size:.72rem;color:var(--red);min-height:1.1rem;margin-bottom:.4rem;text-align:center;position:relative;}
.auth-btn{width:100%;padding:.72rem;background:var(--grad-gold);border:none;border-radius:var(--r3);color:#1a0a2e;font-family:var(--fdisp);font-weight:900;font-size:.92rem;letter-spacing:.05em;cursor:pointer;box-shadow:0 0 30px rgba(255,154,60,.3),0 8px 24px rgba(0,0,0,.3);transition:transform .12s;position:relative;}
.auth-btn:active{transform:scale(.97);}
.auth-offline{display:block;text-align:center;font-size:.64rem;color:var(--tx-dim);margin-top:.95rem;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;transition:color .2s;position:relative;}
.auth-offline:hover{color:var(--tx-mut);}
.uname-box h2{font-family:var(--fdisp);font-weight:900;font-size:1.1rem;text-align:center;margin-bottom:.3rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;}
.uname-box p{font-size:.76rem;color:var(--tx-mut);text-align:center;margin-bottom:1rem;line-height:1.5;position:relative;}
.uname-input{width:100%;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx);font-family:var(--fdisp);font-size:.95rem;font-weight:700;padding:.6rem .85rem;outline:none;text-align:center;transition:all .2s;position:relative;}
.uname-input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,224,255,.12);}
.uname-hint{font-size:.64rem;color:var(--tx-dim);text-align:center;margin:.42rem 0 .8rem;min-height:.9rem;position:relative;}
.uname-hint.ok{color:var(--green-hot);}
.uname-hint.err{color:var(--red);}
.uname-btn{width:100%;padding:.65rem;background:var(--grad-cyan);border:none;color:#06251c;font-family:var(--fdisp);font-weight:900;font-size:.86rem;text-transform:uppercase;letter-spacing:.12em;border-radius:var(--r2);cursor:pointer;transition:transform .12s;position:relative;box-shadow:0 0 24px rgba(43,255,163,.25);}
.uname-btn:active{transform:scale(.97);}
.uname-btn:disabled{opacity:.35;pointer-events:none;}
.uname-skip{display:block;text-align:center;font-size:.64rem;color:var(--tx-dim);margin-top:.7rem;cursor:pointer;letter-spacing:.06em;position:relative;}

/* ── TOAST ── */
.toast{position:fixed;bottom:90px;left:50%;transform:translateX(-50%) translateY(16px);z-index:5000;
  background:linear-gradient(135deg,var(--surface2),var(--raised));border:1px solid var(--line2);border-radius:40px;
  padding:.55rem 1.2rem;font-size:.78rem;font-weight:500;color:var(--tx);opacity:0;transition:all .26s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;white-space:nowrap;box-shadow:0 10px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,203,69,.1);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ══════════════ HEADER ══════════════ */
header{position:sticky;top:0;z-index:400;
  background:linear-gradient(180deg,rgba(12,10,31,.95),rgba(12,10,31,.7));
  background:rgba(10,8,24,.96);
  border-bottom:1px solid rgba(54,53,104,.6);padding:.55rem .95rem .5rem;display:flex;align-items:center;gap:.7rem;}
.logo-img{width:38px;height:38px;border-radius:11px;flex-shrink:0;box-shadow:0 0 18px rgba(34,224,255,.3),0 0 0 1px rgba(255,203,69,.2);}
.logo-text-wrap{flex:1;min-width:0;}
.logo-name{font-family:var(--fdeco);font-size:1rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.03em;line-height:1.1;}
.logo-he{font-family:var(--fhe);font-size:.62rem;color:var(--tx-mut);direction:rtl;}
.hdr-right{display:flex;flex-direction:column;align-items:flex-end;gap:.2rem;}
.auth-pill{display:flex;align-items:center;gap:.35rem;background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:.24rem .6rem;cursor:pointer;transition:all .2s;}
.auth-pill:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(34,224,255,.15);}
.auth-dot{width:7px;height:7px;border-radius:50%;background:var(--tx-dim);transition:all .3s;}
.auth-dot.on{background:var(--green);box-shadow:0 0 8px var(--green),0 0 16px rgba(43,255,163,.5);}
.auth-uname{font-size:.62rem;color:var(--tx-soft);max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.signout-btn{background:none;border:none;color:var(--tx-dim);font-size:.58rem;cursor:pointer;padding:.12rem .3rem;text-transform:uppercase;letter-spacing:.08em;transition:color .2s;}
.signout-btn:hover{color:var(--tx-mut);}

/* ══════════════ RANK HERO ══════════════ */
.rank-hero{position:relative;padding:1rem .95rem .75rem;border-bottom:1px solid rgba(54,53,104,.5);overflow:hidden;}
.rank-hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 100% at 80% 0%,rgba(255,203,69,.07),transparent 70%);pointer-events:none;}
.rank-row{display:flex;align-items:center;gap:.8rem;margin-bottom:.55rem;position:relative;}

.rank-info{flex:1;min-width:0;}
.rlvl{font-family:var(--fmono);font-size:.42rem;color:var(--cyan-hot);letter-spacing:.22em;margin-bottom:.14rem;text-transform:uppercase;}
.rttl{font-family:var(--fdeco);font-size:1.15rem;background:var(--grad-rank);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02em;}

.rnxt{font-size:.64rem;color:var(--tx-mut);margin-top:.05rem;}
.rxpc{text-align:right;flex-shrink:0;}
.rxpn{font-family:var(--fdeco);font-size:1.5rem;color:var(--tx);line-height:1;text-shadow:0 0 20px rgba(238,240,255,.2);}
.rxpl{font-family:var(--fmono);font-size:.36rem;color:var(--tx-dim);letter-spacing:.18em;text-transform:uppercase;}
.xbl{display:flex;justify-content:space-between;margin-bottom:.22rem;position:relative;}
.xlb{font-size:.58rem;color:var(--tx-mut);font-family:var(--fmono);}
.xbt{height:10px;background:var(--bg0);border-radius:99px;overflow:hidden;margin-bottom:.65rem;position:relative;box-shadow:inset 0 1px 4px rgba(0,0,0,.7),inset 0 0 0 1px rgba(244,183,64,.12);}

.xbf{height:100%;background:linear-gradient(90deg,#2fd4c4,#4fd98a,#f4b740,#ff8a3c,#2fd4c4);background-size:300% 100%;border-radius:99px;transition:width .8s cubic-bezier(.2,.8,.3,1);position:relative;box-shadow:0 0 14px rgba(244,183,64,.5);animation:xpFlow 9s linear infinite,xpBreathe 5s ease-in-out infinite;}
@keyframes xpFlow{0%{background-position:0% 50%;}100%{background-position:300% 50%;}}

.xbf::after{content:'';position:absolute;top:0;right:0;width:8px;height:100%;border-radius:99px;background:#fff;box-shadow:0 0 8px #fff,0 0 14px var(--gold-hot);opacity:.9;}

.qbar{display:flex;align-items:center;gap:.6rem;background:linear-gradient(135deg,var(--surface),var(--surface2));border:1px solid var(--line);border-radius:var(--r3);padding:.55rem .75rem;position:relative;overflow:hidden;}
.qbar.done-q{border-color:rgba(43,255,163,.4);box-shadow:0 0 20px rgba(43,255,163,.12);}
.qbar.done-q::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(43,255,163,.06),transparent);}
.qico{font-size:1.15rem;position:relative;}
.qtx{flex:1;position:relative;}
.qttl{font-size:.72rem;font-weight:600;color:var(--tx);}
.qsb{font-size:.6rem;color:var(--tx-mut);}
.qpg{text-align:right;position:relative;}
.qnm{font-family:var(--fmono);font-size:.44rem;color:var(--cyan-hot);margin-bottom:.16rem;letter-spacing:.05em;}
.qtr{width:58px;height:5px;background:var(--bg1);border-radius:99px;overflow:hidden;}
.qfil{height:100%;background:var(--grad-cyan);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 8px rgba(43,255,163,.5);}

/* ══════════════ STATS ══════════════ */
.stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;padding:.55rem .95rem;}
.stat{display:flex;flex-direction:column;align-items:center;gap:.12rem;padding:.55rem .25rem;
  background:linear-gradient(160deg,var(--surface),var(--bg1));border:1px solid var(--line);border-radius:var(--r3);
  position:relative;overflow:hidden;transition:transform .15s;}
.stat:active{transform:scale(.95);}
.stat::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;opacity:.8;}
.stat:nth-child(1)::before{background:var(--grad-gold);}
.stat:nth-child(2)::before{background:var(--grad-violet);}
.stat:nth-child(3)::before{background:var(--grad-cyan);}
.stat:nth-child(4)::before{background:linear-gradient(90deg,var(--amber),var(--red));}
.sn{font-family:var(--fdeco);font-size:1.25rem;color:var(--tx);line-height:1;text-shadow:0 0 16px rgba(238,240,255,.15);}
.sl{font-size:.5rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.1em;font-family:var(--fmono);}

/* ══════════════ CONTINUE CARD ══════════════ */
.continue-wrap{padding:.5rem .95rem .25rem;}
.continue-card{position:relative;background:linear-gradient(135deg,rgba(255,203,69,.12),rgba(255,92,174,.08));
  border:1px solid rgba(255,203,69,.4);border-radius:var(--r4);padding:.8rem 1rem;display:flex;align-items:center;gap:.8rem;
  cursor:pointer;transition:transform .15s,box-shadow .25s;overflow:hidden;
  box-shadow:0 0 0 1px rgba(255,203,69,.06),0 8px 28px rgba(0,0,0,.3);}
.continue-card::before{content:'';position:absolute;top:-50%;right:-20%;width:60%;height:200%;
  background:radial-gradient(circle,rgba(255,203,69,.12),transparent 60%);pointer-events:none;}
.continue-card:active{transform:scale(.98);}
.continue-card:hover{box-shadow:0 0 28px rgba(255,203,69,.2),0 8px 28px rgba(0,0,0,.3);}
.cc-ico{font-size:1.7rem;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(255,203,69,.6));position:relative;}
.cc-body{flex:1;min-width:0;position:relative;}
.cc-lbl{font-size:.54rem;color:var(--gold-hot);text-transform:uppercase;letter-spacing:.16em;font-family:var(--fmono);margin-bottom:.1rem;}
.cc-main{font-family:var(--fdisp);font-weight:900;font-size:.95rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-sub{font-size:.62rem;color:var(--tx-mut);}
.cc-arrow{font-size:1.4rem;color:var(--gold);flex-shrink:0;position:relative;animation:arrowNudge 1.6s ease-in-out infinite;}
@keyframes arrowNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(4px);}}

/* ══════════════ NEXT-UP LINE CARD ══════════════ */
.nextup-wrap{padding:.3rem .95rem .6rem;position:relative;}
.nu-header-row{display:flex;align-items:center;gap:.45rem;margin-bottom:.42rem;}
.nextup-section-lbl{font-family:var(--fmono);font-size:.46rem;color:var(--cyan-hot);text-transform:uppercase;letter-spacing:.2em;flex-shrink:0;display:flex;align-items:center;gap:.35rem;}
.nu-header-meta{display:flex;align-items:center;gap:.4rem;flex:1;min-width:0;overflow:hidden;}
.nu-mas{font-family:var(--fmono);font-size:.5rem;color:var(--tx-mut);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;}
.nu-daf-badge{background:var(--grad-gold);color:#1a0a2e;font-family:var(--fdisp);font-weight:900;font-size:.6rem;padding:.1rem .5rem;border-radius:20px;letter-spacing:.03em;white-space:nowrap;flex-shrink:0;box-shadow:0 2px 10px rgba(255,154,60,.3);}
.nu-line-counter{font-family:var(--fmono);font-size:.44rem;color:var(--tx-dim);white-space:nowrap;flex-shrink:0;}

.nu-line-card{position:relative;overflow:hidden;
  background:linear-gradient(160deg,var(--surface2) 0%,var(--surface) 60%,var(--bg1) 100%);
  border:1px solid var(--line2);border-radius:var(--r4);min-height:150px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s;
  user-select:none;touch-action:pan-y;
  box-shadow:0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(34,224,255,.04);}
.nu-line-card::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 26px rgba(47,212,196,.28);opacity:.4;animation:glowFade 6.5s ease-in-out infinite;}
.nu-line-card.is-mishna::after{box-shadow:0 0 26px rgba(59,110,240,.32);}
@keyframes glowFade{0%,100%{opacity:.35;}50%{opacity:.9;}}
.nu-line-content{padding:1.3rem 1.3rem 1.1rem;width:100%;position:relative;}
.nu-line-he{font-family:var(--fhe);font-size:1.2rem;line-height:1.85;direction:rtl;color:var(--tx);margin-bottom:.55rem;font-weight:500;}
.nu-line-he b{font-weight:700;color:var(--gold-hot);}
.nu-line-en{font-size:.85rem;line-height:1.7;color:var(--tx-soft);font-weight:300;}
.nu-line-en b{font-weight:600;color:var(--tx);}
.nu-line-en i{color:var(--tx-mut);font-style:italic;}

.nu-loading-dots{display:flex;align-items:center;justify-content:center;gap:.45rem;padding:2.2rem 1rem;}
@keyframes nudot{0%,80%,100%{transform:scale(.5);opacity:.3;}40%{transform:scale(1.1);opacity:1;}}
.nu-loading-dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan);animation:nudot 1.2s ease-in-out infinite;}
.nu-loading-dot:nth-child(2){animation-delay:.18s;background:var(--violet);box-shadow:0 0 10px var(--violet);}
.nu-loading-dot:nth-child(3){animation-delay:.36s;background:var(--gold);box-shadow:0 0 10px var(--gold);}

.nu-swipe-right,.nu-swipe-left{position:absolute;top:0;bottom:0;width:55%;display:flex;align-items:center;opacity:0;pointer-events:none;transition:opacity .1s;z-index:2;}
.nu-swipe-right{right:0;justify-content:flex-end;padding-right:1.4rem;background:linear-gradient(270deg,rgba(43,255,163,.4),transparent);}
.nu-swipe-right span{font-family:var(--fdeco);font-size:1.3rem;color:var(--green-hot);text-shadow:0 0 22px var(--green);}
.nu-swipe-left{left:0;justify-content:flex-start;padding-left:1.4rem;background:linear-gradient(90deg,rgba(43,255,163,.4),transparent);}
.nu-swipe-left span{font-family:var(--fdeco);font-size:1.3rem;color:var(--green-hot);text-shadow:0 0 22px var(--green);}

@keyframes cardIn{0%{transform:translateY(20px) scale(.94);opacity:0;}60%{opacity:1;}100%{transform:translateY(0) scale(1);opacity:1;}}
.nu-line-card.enter{animation:cardIn .3s cubic-bezier(.16,1,.3,1) forwards;}
/* exit-* are driven by JS inline transitions for momentum-continuous fling */

/* Mishna styling for next-up card */
.nu-line-card.is-mishna{
  background:linear-gradient(160deg,rgba(169,107,255,.14) 0%,var(--surface) 55%,var(--bg1) 100%);
  border-color:rgba(169,107,255,.35);
  box-shadow:0 10px 40px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(169,107,255,.1);
}
.nu-line-card.is-mishna::before{background:radial-gradient(circle,rgba(169,107,255,.1),transparent 60%);}
.nu-line-card.is-mishna .nu-line-he b{color:var(--violet-hot);}

.nu-progress-row{display:flex;align-items:center;gap:.6rem;margin-top:.4rem;}
.nu-dots{display:flex;gap:.28rem;flex:1;flex-wrap:wrap;align-items:center;}
.nu-dot{width:7px;height:7px;border-radius:50%;background:var(--bg1);border:1px solid var(--line2);transition:all .25s;flex-shrink:0;}
.nu-dot.done{background:var(--green);border-color:var(--green);box-shadow:0 0 6px rgba(43,255,163,.6);}
.nu-dot.current{background:var(--gold);border-color:var(--gold);box-shadow:0 0 8px rgba(255,203,69,.7);transform:scale(1.4);}
.nu-line-done-btn{flex-shrink:0;background:var(--grad-cyan);border:none;color:#06251c;font-family:var(--fdisp);font-weight:900;font-size:.66rem;padding:.4rem .85rem;border-radius:20px;cursor:pointer;transition:transform .12s;letter-spacing:.04em;white-space:nowrap;box-shadow:0 0 18px rgba(43,255,163,.3);}
.nu-line-done-btn:active{transform:scale(.9);}
.nu-line-skip-btn{flex-shrink:0;background:transparent;border:1px solid var(--line2);color:var(--tx-mut);font-size:.6rem;cursor:pointer;padding:.32rem .65rem;border-radius:20px;font-family:var(--fmono);letter-spacing:.08em;transition:all .15s;}
.nu-line-skip-btn:hover{color:var(--tx-soft);border-color:var(--tx-dim);}
.nu-line-skip-btn:active{transform:scale(.92);}

/* ══════════════ RING ══════════════ */
.ring-wrap{display:flex;flex-direction:column;align-items:center;padding:.5rem 1rem .55rem;}
.ring-cont{position:relative;width:118px;height:118px;}
.rsv{transform:rotate(-90deg);filter:drop-shadow(0 0 8px rgba(34,224,255,.3));}
.rtrack{fill:none;stroke:var(--bg1);stroke-width:10;}
.rfill{fill:none;stroke:url(#rG);stroke-width:10;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1);}
.rmid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.rpct{font-family:var(--fdeco);font-size:1.35rem;color:var(--tx);text-shadow:0 0 18px rgba(34,224,255,.3);}
.rsub{font-family:var(--fmono);font-size:.3rem;color:var(--tx-dim);letter-spacing:.14em;}
.rlbl{font-size:.56rem;color:var(--tx-mut);margin-top:.4rem;text-align:center;letter-spacing:.1em;font-family:var(--fmono);}

/* ══════════════ TABS ══════════════ */
.tabs{position:sticky;top:54px;z-index:390;background:rgba(12,10,31,.96);border-bottom:1px solid rgba(54,53,104,.5);display:flex;overflow-x:auto;padding:0 .4rem;}
.tab{flex:0 0 auto;padding:.55rem .8rem;background:none;border:none;color:var(--tx-dim);font-family:var(--fbody);font-size:.72rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;position:relative;}
.tab.on{color:var(--gold);}
.tab.on::after{content:'';position:absolute;bottom:0;left:.6rem;right:.6rem;height:2.5px;background:var(--grad-gold);border-radius:99px;box-shadow:0 0 10px rgba(255,203,69,.5);}
.tab:hover{color:var(--tx-soft);}

.sec{display:none;animation:secFade .35s ease;}
.sec.on{display:block;}
@keyframes secFade{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.stitle{font-family:var(--fdisp);font-weight:700;font-size:.78rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.14em;padding:.8rem .95rem .35rem;}

/* ══════════════ SEARCH + REALMS ══════════════ */
.sinp-wrap{display:flex;align-items:center;gap:.5rem;background:var(--surface);border:1px solid var(--line);border-radius:var(--r3);padding:.5rem .8rem;margin:.55rem .95rem .35rem;transition:all .2s;}
.sinp-wrap:focus-within{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,224,255,.1);}
.sico{font-size:.9rem;}
.sinp{flex:1;background:none;border:none;color:var(--tx);font-family:var(--fbody);font-size:.82rem;outline:none;}
.sinp::placeholder{color:var(--tx-dim);}

.realm-blk{margin:.4rem .95rem;}
.realm-hdr{display:flex;align-items:center;gap:.6rem;padding:.6rem .75rem;background:linear-gradient(135deg,var(--surface),var(--bg1));border:1px solid var(--line);border-radius:var(--r3);cursor:pointer;transition:all .2s;user-select:none;position:relative;overflow:hidden;}
.realm-hdr:hover{border-color:var(--line2);}
.realm-hdr::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--grad-rank);opacity:.7;}
.realm-ico{font-size:1.2rem;filter:drop-shadow(0 0 6px rgba(255,203,69,.3));}
.realm-ttl{flex:1;}
.realm-en{font-family:var(--fdisp);font-weight:700;font-size:.78rem;color:var(--tx);}
.realm-he{font-family:var(--fhe);font-size:.7rem;color:var(--tx-mut);direction:rtl;}
.realm-prog{display:flex;flex-direction:column;align-items:flex-end;gap:.12rem;flex-shrink:0;}
.rmt{width:46px;height:4px;background:var(--bg1);border-radius:99px;overflow:hidden;}
.rmf{height:100%;background:var(--grad-gold);border-radius:99px;transition:width .5s;box-shadow:0 0 6px rgba(255,203,69,.4);}
.rmc{font-size:.54rem;color:var(--tx-dim);font-family:var(--fmono);}
.chev{font-size:.66rem;color:var(--tx-dim);transition:transform .25s;margin-left:.3rem;}
.realm-hdr.col .chev{transform:rotate(-90deg);}
.realm-body{padding:.25rem 0 .4rem;}
.realm-body.col{display:none;}

.drow{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;margin:.18rem 0;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);cursor:pointer;transition:all .18s;}
.drow:active{transform:scale(.985);}
.drow:hover{border-color:var(--line2);background:var(--surface);}
.drow.cleared{border-color:rgba(43,255,163,.3);background:linear-gradient(135deg,rgba(43,255,163,.05),transparent);}
.dm-n{flex:1;min-width:0;}
.dm-he{font-family:var(--fhe);font-size:.88rem;color:var(--tx);direction:rtl;line-height:1.3;}
.dm-en{font-size:.68rem;color:var(--tx-mut);}
.dm-r{display:flex;align-items:center;gap:.4rem;flex-shrink:0;}
.dm-sy{font-size:.6rem;color:var(--gold);}
.dm-pb{width:46px;height:4px;background:var(--bg1);border-radius:99px;overflow:hidden;}
.dm-pf{height:100%;background:var(--grad-cyan);border-radius:99px;transition:width .5s;}
.dm-pf.done{background:var(--grad-gold);box-shadow:0 0 6px rgba(255,203,69,.4);}
.dm-pt{font-size:.55rem;color:var(--tx-dim);font-family:var(--fmono);}
.dm-ar{color:var(--tx-dim);padding-left:.25rem;font-size:.85rem;}

/* ══════════════ DRAWER ══════════════ */
#drawer{position:fixed;bottom:0;left:0;right:0;z-index:600;background:linear-gradient(180deg,var(--surface),var(--bg1));border-top:1px solid var(--line2);border-radius:24px 24px 0 0;display:flex;flex-direction:column;max-height:94vh;transform:translateY(100%);transition:transform .36s cubic-bezier(.32,.72,0,1);box-shadow:0 -16px 70px rgba(0,0,0,.7),0 0 0 1px rgba(255,203,69,.06);}
#drawer.on{transform:translateY(0);}
.dhand{width:38px;height:4px;background:var(--line2);border-radius:99px;margin:.7rem auto .4rem;flex-shrink:0;}
.dhead{padding:.2rem .95rem .55rem;flex-shrink:0;}
.dhe{font-family:var(--fhe);font-size:1.3rem;color:var(--tx);direction:rtl;line-height:1.3;}
.den{font-family:var(--fdisp);font-weight:900;font-size:.88rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.03em;}
.dmeta{font-size:.64rem;color:var(--tx-mut);}
.dxp{font-size:.64rem;color:var(--cyan-hot);margin-top:.2rem;font-family:var(--fmono);}
.dtabs{display:flex;border-bottom:1px solid var(--line);flex-shrink:0;}
.dtab{flex:1;padding:.55rem;background:none;border:none;color:var(--tx-mut);font-size:.74rem;font-weight:600;cursor:pointer;transition:all .2s;position:relative;font-family:var(--fbody);}
.dtab.on{color:var(--gold);}
.dtab.on::after{content:'';position:absolute;bottom:0;left:25%;right:25%;height:2.5px;background:var(--grad-gold);border-radius:99px;box-shadow:0 0 8px rgba(255,203,69,.5);}
.rbar{padding:.45rem .95rem;display:flex;gap:.4rem;flex-wrap:wrap;flex-shrink:0;align-items:center;}
.rbtn{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r1);color:var(--tx-mut);font-size:.66rem;padding:.28rem .55rem;cursor:pointer;transition:all .18s;font-family:var(--fmono);}
.rbtn.on{border-color:var(--gold);color:var(--gold);background:rgba(255,203,69,.08);}
.rbtn.done{border-color:var(--green);color:var(--green);}
.addr{background:var(--bg1);border:1px dashed var(--line2);border-radius:var(--r1);color:var(--tx-dim);font-size:.66rem;padding:.28rem .55rem;cursor:pointer;}
.gact{display:flex;gap:.4rem;padding:.4rem .95rem;flex-shrink:0;}
.abtn{flex:1;padding:.42rem;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx-mut);font-size:.66rem;font-weight:500;cursor:pointer;transition:all .15s;}
.abtn:active{transform:scale(.95);}
.abtn.pr{border-color:var(--gold);color:var(--gold);background:rgba(255,203,69,.06);}
.gscroll{flex:1;overflow-y:auto;padding:.3rem .95rem .5rem;-webkit-overflow-scrolling:touch;}

/* DAF TILES */
#grid-c{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.1rem;}
.daf-tile{background:linear-gradient(160deg,var(--surface),var(--bg1));border:1px solid var(--line);border-radius:var(--r3);overflow:hidden;transition:all .18s;}
.daf-tile:hover{border-color:var(--line2);}
.daf-tile.done{background:linear-gradient(160deg,rgba(43,255,163,.1),rgba(43,255,163,.02));border-color:rgba(43,255,163,.4);box-shadow:0 0 14px rgba(43,255,163,.1);}
.daf-tile.partial{border-color:rgba(255,203,69,.35);}
.dt-head{display:flex;align-items:center;justify-content:space-between;padding:.36rem .55rem .26rem;border-bottom:1px solid var(--line);}
.dt-num{font-family:var(--fdeco);font-size:.9rem;color:var(--tx);}
.dt-he{font-family:var(--fhe);font-size:.7rem;color:var(--tx-mut);direction:rtl;}
.dt-chk{font-size:.72rem;color:var(--green);text-shadow:0 0 8px var(--green);}
.dt-sides{display:flex;}
.dt-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:.16rem;padding:.38rem .2rem;position:relative;cursor:pointer;transition:background .15s;}
.dt-side:first-child{border-right:1px solid var(--line);}
.dt-side:hover{background:var(--surface2);}
.dt-side.s-done{background:rgba(43,255,163,.12);}
.dt-side.s-part{background:rgba(255,203,69,.06);}
.dt-sl{font-family:var(--fhe);font-size:.82rem;color:var(--tx-mut);direction:rtl;}
.dt-ck{font-size:.56rem;color:var(--green);font-weight:700;}
.dt-quick{border:none;border-radius:6px;font-size:.6rem;font-weight:700;padding:.2rem .45rem;cursor:pointer;transition:all .15s;background:var(--surface2);color:var(--tx-dim);border:1px solid var(--line);}
.dt-quick:hover{background:rgba(43,255,163,.12);color:var(--green);border-color:var(--green);}
.dt-quick.done{background:rgba(43,255,163,.15);color:var(--green);border-color:rgba(43,255,163,.4);}
.dt-quick:active{transform:scale(.85);}

.dfoot{padding:.5rem .95rem;border-top:1px solid var(--line);flex-shrink:0;}
.dfbar{height:6px;background:var(--bg1);border-radius:99px;overflow:hidden;margin-bottom:.3rem;}
.dffil{height:100%;background:var(--grad-cyan);border-radius:99px;transition:width .6s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 8px rgba(43,255,163,.4);}
.dffil.done{background:var(--grad-gold);box-shadow:0 0 8px rgba(255,203,69,.5);}
.dftxt{display:flex;justify-content:space-between;font-size:.58rem;color:var(--tx-dim);font-family:var(--fmono);}

/* ══════════════ READER ══════════════ */
.rdr-bar{display:flex;align-items:center;gap:.42rem;padding:.42rem .95rem;border-bottom:1px solid var(--line);flex-shrink:0;}
.rdr-nav{display:flex;gap:.3rem;flex-shrink:0;}
.rdr-nav-btn{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx);font-size:.92rem;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s;}
.rdr-nav-btn:active{transform:scale(.86);background:var(--surface2);}
.rdr-nav-btn:disabled{opacity:.25;cursor:default;}
.asel{flex:1;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx);font-size:.74rem;padding:.3rem .42rem;outline:none;cursor:pointer;min-width:0;font-family:var(--fmono);}
.ltog{display:flex;flex-shrink:0;}
.lt{padding:.28rem .46rem;background:var(--bg1);border:1px solid var(--line);color:var(--tx-dim);font-size:.64rem;cursor:pointer;transition:all .18s;}
.lt:first-child{border-radius:7px 0 0 7px;}
.lt:last-child{border-radius:0 7px 7px 0;}
.lt.on{background:var(--grad-gold);border-color:transparent;color:#1a0a2e;font-weight:700;}
.mabtn{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx-mut);font-size:.68rem;padding:.3rem .55rem;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;}
.mabtn.done{border-color:var(--green);color:var(--green);background:rgba(43,255,163,.1);}
.rashi-toggle-btn{background:var(--bg1);border:1px solid var(--line);border-radius:var(--r2);color:var(--tx-dim);font-size:.66rem;padding:.3rem .55rem;cursor:pointer;transition:all .18s;white-space:nowrap;flex-shrink:0;font-family:var(--fdisp);font-weight:700;letter-spacing:.03em;}
.rashi-toggle-btn.on{border-color:var(--cyan);color:var(--cyan);background:rgba(34,224,255,.1);box-shadow:0 0 10px rgba(34,224,255,.2);}

.rdrscroll{flex:1;overflow-y:auto;padding:.5rem .95rem;-webkit-overflow-scrolling:touch;}
.rloading{text-align:center;color:var(--tx-mut);font-size:.78rem;padding:2rem;}
.rerr{padding:.95rem;background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.25);border-radius:var(--r3);font-size:.72rem;line-height:1.6;color:var(--tx-soft);}

.sc{border-radius:var(--r3);margin-bottom:.5rem;overflow:hidden;cursor:pointer;transition:transform .14s,box-shadow .2s;border:1px solid var(--line);background:linear-gradient(160deg,var(--surface),var(--bg1));}
.sc:active{transform:scale(.985);}
.sc.abs{background:linear-gradient(160deg,rgba(43,255,163,.08),rgba(43,255,163,.01));border-color:rgba(43,255,163,.25);}
@keyframes scFlash{0%{box-shadow:0 0 0 0 rgba(43,255,163,.6);}100%{box-shadow:0 0 0 22px rgba(43,255,163,0);}}
.sc.flash{animation:scFlash .42s ease;}
.sc-in{display:flex;gap:.58rem;padding:.7rem .75rem;}
.sc-left{display:flex;flex-direction:column;align-items:center;gap:.3rem;flex-shrink:0;padding-top:.1rem;}
.sc-chk{width:20px;height:20px;border-radius:50%;border:2px solid var(--line2);background:var(--bg1);transition:all .2s;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
.sc-chk.ck{background:var(--green);border-color:var(--green);box-shadow:0 0 12px rgba(43,255,163,.5);}
.sc-chk.ck::after{content:'✓';font-size:.6rem;color:#06251c;font-weight:900;}
.sc-num{font-family:var(--fmono);font-size:.32rem;color:var(--tx-dim);}
.sc-body{flex:1;min-width:0;}
.sc-he{font-family:var(--fhe);font-size:var(--rhe);line-height:1.8;direction:rtl;color:var(--tx);margin-bottom:.32rem;}
.sc-he b{color:var(--gold-hot);font-weight:700;}
.sc-en{font-size:var(--ren);line-height:1.65;color:var(--tx-soft);}
.sc-en b{color:var(--tx);font-weight:600;}.sc-en i{color:var(--tx-mut);}
.sc-xp{margin-top:.3rem;overflow:hidden;max-height:0;transition:max-height .3s;}
.sc.abs .sc-xp{max-height:50px;}
.sc-xv{font-size:.6rem;color:var(--green-hot);background:rgba(43,255,163,.12);border-radius:6px;padding:.18rem .45rem;display:inline-block;font-family:var(--fmono);}
.hide{display:none!important;}
.mef-tgl{font-size:.64rem;color:var(--tx-dim);margin-top:.4rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .42rem;border-radius:6px;border:1px solid var(--line);background:var(--bg1);transition:all .18s;}
.mef-tgl:hover{border-color:var(--line2);color:var(--tx-mut);}
.mef-bod{margin-top:.5rem;}
.mef-it{border-top:1px solid var(--line);padding:.5rem 0;}
.mef-nm{font-family:var(--fdisp);font-size:.7rem;font-weight:700;color:var(--gold);margin-bottom:.3rem;}
.mef-rashi .mef-nm{color:var(--cyan-hot);}
.mef-he{font-family:var(--fhe);font-size:calc(var(--rhe)*.88);line-height:1.7;direction:rtl;color:var(--tx);margin-bottom:.3rem;}
.mef-en{font-size:calc(var(--ren)*.92);line-height:1.6;color:var(--tx-soft);}
.mef-ld{font-size:.72rem;color:var(--tx-mut);padding:.4rem 0;}
.rashi-panel{margin-top:.4rem;}
.rashi-panel.hide{display:none;}
.rashi-inline{background:rgba(34,224,255,.05);border-left:2px solid var(--cyan);border-radius:0 var(--r2) var(--r2) 0;padding:.5rem .65rem .4rem;}
.rashi-label{font-family:var(--fdisp);font-size:.62rem;font-weight:700;color:var(--cyan-hot);letter-spacing:.06em;margin-bottom:.3rem;}
.rashi-loading{font-size:.62rem;color:var(--tx-dim);padding:.2rem 0;}

/* ══════════════ BADGES ══════════════ */
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;padding:.3rem .95rem .8rem;}
.badg{position:relative;background:linear-gradient(160deg,var(--surface),var(--bg1));border:1px solid var(--line);border-radius:var(--r3);padding:.8rem .4rem;text-align:center;opacity:.45;transition:all .3s;overflow:hidden;}
.badg.earned{opacity:1;border-color:rgba(255,203,69,.5);box-shadow:0 0 18px rgba(255,203,69,.12),inset 0 0 20px rgba(255,203,69,.04);}
.badg.earned::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-gold);}
.bico{font-size:1.7rem;margin-bottom:.2rem;filter:grayscale(1) opacity(.6);transition:filter .3s;}
.badg.earned .bico{filter:grayscale(0) drop-shadow(0 0 8px rgba(255,203,69,.5));}
.bnm{font-size:.62rem;color:var(--tx-mut);font-weight:600;margin-bottom:.1rem;}
.badg.earned .bnm{color:var(--tx);}
.bxp{font-size:.52rem;color:var(--tx-dim);font-family:var(--fmono);}
.badg.earned .bxp{color:var(--gold);}

/* ══════════════ LEADERBOARD ══════════════ */
.lb-myrank{display:flex;align-items:center;gap:.7rem;background:linear-gradient(135deg,var(--surface2),var(--raised));border:1px solid var(--line2);border-radius:var(--r4);padding:.8rem 1rem;margin:.6rem .95rem .3rem;position:relative;overflow:hidden;}
.lb-myrank::before{content:'';position:absolute;top:-50%;right:-10%;width:50%;height:200%;background:radial-gradient(circle,rgba(255,203,69,.1),transparent 60%);}
.lb-myrank-lbl{font-size:.54rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.12em;font-family:var(--fmono);}
.lb-myrank-val{font-family:var(--fdisp);font-weight:900;font-size:1.05rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative;}
.lb-setup-btn{margin-left:auto;background:var(--bg1);border:1px solid var(--line2);border-radius:var(--r2);color:var(--tx-mut);font-size:.66rem;padding:.32rem .65rem;cursor:pointer;transition:all .18s;white-space:nowrap;position:relative;}
.lb-setup-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.lb-header{display:flex;align-items:center;justify-content:space-between;padding:.45rem .95rem .2rem;}
.lb-title{font-family:var(--fdisp);font-weight:700;font-size:.8rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.12em;}
.lb-refresh{background:none;border:none;color:var(--tx-dim);font-size:.74rem;cursor:pointer;padding:.2rem .4rem;border-radius:6px;transition:color .18s;}
.lb-refresh:hover{color:var(--tx);}
.lb-list{padding:.2rem .95rem .8rem;}
.lb-row{display:flex;align-items:center;gap:.65rem;background:linear-gradient(135deg,var(--surface),var(--bg1));border:1px solid var(--line);border-radius:var(--r3);padding:.55rem .75rem;margin-bottom:.3rem;transition:all .2s;}
.lb-row.me{border-color:rgba(255,203,69,.5);background:linear-gradient(135deg,rgba(255,203,69,.06),transparent);}
.lb-row:nth-child(1){border-color:rgba(255,203,69,.4);}
.lb-row:nth-child(2){border-color:rgba(184,188,230,.3);}
.lb-row:nth-child(3){border-color:rgba(255,154,60,.3);}
.lb-pos{font-family:var(--fmono);font-size:.42rem;color:var(--tx-dim);width:20px;text-align:center;}
.lb-pos.top3{font-size:.95rem;}
.lb-info{flex:1;min-width:0;}
.lb-name{font-weight:600;font-size:.82rem;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-sub{font-size:.58rem;color:var(--tx-mut);}
.lb-xp{font-family:var(--fdeco);font-size:.92rem;color:var(--cyan-hot);text-shadow:0 0 10px rgba(34,224,255,.3);}
.lb-xpl{font-size:.5rem;color:var(--tx-dim);font-family:var(--fmono);text-align:right;}
.lb-loading{text-align:center;color:var(--tx-mut);font-size:.78rem;padding:1.5rem;}
.offline-note{background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.22);border-radius:var(--r2);padding:.6rem .9rem;font-size:.72rem;color:var(--red);margin:.5rem .95rem;}

/* ══════════════ SETTINGS ══════════════ */
.scard{background:linear-gradient(160deg,var(--surface),var(--bg1));border:1px solid var(--line);border-radius:var(--r4);padding:.9rem 1rem;margin:.4rem .95rem;}
.scard h3{font-family:var(--fdisp);font-weight:700;font-size:.8rem;color:var(--gold);margin-bottom:.5rem;letter-spacing:.03em;}
.scard p{font-size:.74rem;color:var(--tx-mut);line-height:1.6;}
.frow{display:flex;align-items:center;gap:.6rem;margin-bottom:.32rem;}
.frow label{font-size:.68rem;color:var(--tx-mut);width:56px;flex-shrink:0;}
.fsl{flex:1;accent-color:var(--gold);}
.ibtn{width:100%;padding:.62rem;background:linear-gradient(135deg,var(--bg1),var(--surface));border:1px solid var(--line2);border-radius:var(--r2);color:var(--tx);font-size:.76rem;cursor:pointer;transition:all .18s;}
.ibtn:hover{border-color:var(--gold);color:var(--gold);}
.dbtn{width:100%;padding:.62rem;background:rgba(255,77,109,.08);border:1px solid rgba(255,77,109,.3);border-radius:var(--r2);color:var(--red);font-size:.76rem;cursor:pointer;margin-top:.4rem;}

.act-it{display:flex;align-items:center;gap:.6rem;padding:.42rem .95rem;border-bottom:1px solid var(--line);}
.adot{width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 6px var(--cyan);flex-shrink:0;}
.atxt{flex:1;font-size:.72rem;color:var(--tx-mut);}
.atm{font-size:.58rem;color:var(--tx-dim);flex-shrink:0;font-family:var(--fmono);}
.empty{font-size:.74rem;color:var(--tx-dim);text-align:center;padding:1.5rem;}

/* ══════════════ BOTTOM NAV ══════════════ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:380;background:rgba(12,10,31,.96);border-top:1px solid rgba(54,53,104,.6);display:flex;padding:.3rem 0 env(safe-area-inset-bottom,.3rem);}
.bnav-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.14rem;padding:.34rem .2rem;background:none;border:none;color:var(--tx-dim);cursor:pointer;transition:all .2s;min-height:44px;position:relative;}
.bnav-btn.on{color:var(--gold);}
.bnav-btn.on .bnav-ico{transform:translateY(-1px) scale(1.1);filter:drop-shadow(0 0 8px rgba(255,203,69,.5));}
.bnav-ico{font-size:1.15rem;line-height:1;transition:transform .2s;}
.bnav-lbl{font-size:.46rem;text-transform:uppercase;letter-spacing:.1em;font-weight:700;font-family:var(--fmono);}

/* Reader link bar (Sefaria) */
.reader-linkbar{display:flex;justify-content:center;padding:.32rem .95rem;background:var(--bg1);border-bottom:1px solid var(--line);flex-shrink:0;}
.reader-linkbar .shlnk{background:var(--surface);border:1px solid var(--line);border-radius:20px;color:var(--cyan);font-size:.66rem;padding:.28rem .8rem;text-decoration:none;transition:all .18s;}
.reader-linkbar .shlnk:hover{border-color:var(--cyan);box-shadow:0 0 12px rgba(34,224,255,.15);}


/* ══════════════ MISHNA INDICATORS ══════════════ */
.mishna-tag{
  display:inline-block;margin-left:.4rem;
  font-family:var(--fmono);font-size:.46rem;font-weight:700;
  letter-spacing:.1em;color:var(--violet-hot);
  background:rgba(169,107,255,.15);border:1px solid rgba(169,107,255,.4);
  padding:.05rem .35rem;border-radius:99px;vertical-align:middle;
  direction:rtl;
}
.drow.is-mishna{border-left:2px solid rgba(169,107,255,.4);}
.drow.is-mishna .dm-pf{background:var(--grad-violet);}
.mishna-tag-lg{
  display:inline-block;margin-left:.5rem;
  font-family:var(--fmono);font-size:.5rem;font-weight:700;letter-spacing:.12em;
  color:var(--violet-hot);background:rgba(169,107,255,.15);
  border:1px solid rgba(169,107,255,.4);padding:.1rem .5rem;border-radius:99px;
  -webkit-text-fill-color:var(--violet-hot);
}

/* ══════════════ PEREK TILES (mishna grid) ══════════════ */
#grid-c.mishna-grid{grid-template-columns:repeat(2,1fr);}
.perek-tile{
  background:linear-gradient(160deg,rgba(169,107,255,.08),var(--bg1));
  border:1px solid var(--line);border-radius:var(--r3);padding:.7rem .7rem .6rem;
  display:flex;flex-direction:column;gap:.45rem;transition:all .18s;cursor:pointer;position:relative;overflow:hidden;}
.perek-tile::before{content:'';position:absolute;top:0;left:0;bottom:0;width:3px;background:var(--grad-violet);opacity:.7;}
.perek-tile:hover{border-color:rgba(169,107,255,.4);}
.perek-tile.done{background:linear-gradient(160deg,rgba(43,255,163,.1),rgba(43,255,163,.02));border-color:rgba(43,255,163,.4);box-shadow:0 0 14px rgba(43,255,163,.1);}
.perek-tile.done::before{background:var(--grad-cyan);}
.perek-tile.partial{border-color:rgba(255,203,69,.35);}
.pt-top{display:flex;align-items:center;justify-content:space-between;}
.pt-num{font-family:var(--fdeco);font-size:1.4rem;color:var(--tx);line-height:1;}
.pt-ck{font-size:.85rem;color:var(--green);text-shadow:0 0 10px var(--green);}
.pt-lbl{font-family:var(--fhe);font-size:.85rem;color:var(--tx-soft);direction:rtl;}
.perek-tile.done .pt-lbl{color:var(--green-hot);}
.pt-quick{border:none;border-radius:var(--r2);font-size:.66rem;font-weight:700;padding:.36rem;cursor:pointer;transition:all .15s;background:var(--surface2);color:var(--tx-mut);border:1px solid var(--line2);font-family:var(--fdisp);letter-spacing:.03em;}
.pt-quick:hover{background:rgba(169,107,255,.15);color:var(--violet-hot);border-color:var(--violet);}
.pt-quick.done{background:rgba(43,255,163,.15);color:var(--green);border-color:rgba(43,255,163,.4);}
.pt-quick:active{transform:scale(.93);}

/* ══════════════════════════════════════
   QUESTS TAB
══════════════════════════════════════ */
.quests-body{padding:.5rem .9rem 1.2rem;}
.q-section-hdr{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--fdisp);font-weight:700;font-size:.82rem;color:var(--tx);
  text-transform:uppercase;letter-spacing:.08em;
  margin:1.1rem 0 .55rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--line);}
.q-section-hdr:first-child{margin-top:.3rem;}
.q-reset{font-family:var(--fmono);font-size:.5rem;color:var(--tx-dim);text-transform:none;letter-spacing:.04em;font-weight:400;}
.q-today-count{font-family:var(--fmono);font-size:.62rem;color:var(--cyan-hot);margin-bottom:.6rem;letter-spacing:.05em;}
.q-empty{font-size:.74rem;color:var(--tx-mut);text-align:center;padding:1rem;background:var(--bg1);border:1px solid var(--line);border-radius:var(--r3);}

.q-card{
  display:flex;align-items:center;gap:.7rem;
  background:linear-gradient(135deg,var(--surface),var(--bg1));
  border:1px solid var(--line);border-radius:var(--r3);
  padding:.65rem .8rem;margin-bottom:.5rem;transition:all .2s;position:relative;overflow:hidden;}
.q-card.q-done{border-color:rgba(43,255,163,.4);background:linear-gradient(135deg,rgba(43,255,163,.06),transparent);}
.q-ico{font-size:1.5rem;flex-shrink:0;filter:drop-shadow(0 0 6px rgba(255,203,69,.3));}
.q-main{flex:1;min-width:0;}
.q-title{font-family:var(--fdisp);font-weight:700;font-size:.8rem;color:var(--tx);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;}
.q-xp-tag{font-family:var(--fmono);font-size:.5rem;color:var(--gold);background:rgba(255,203,69,.12);border:1px solid rgba(255,203,69,.3);padding:.05rem .35rem;border-radius:99px;font-weight:400;}
.q-sub{font-size:.66rem;color:var(--tx-mut);margin:.12rem 0 .3rem;}
.q-urgent{color:var(--red);font-weight:600;}
.q-bar{height:5px;background:var(--bg0);border-radius:99px;overflow:hidden;}
.q-fill{height:100%;background:var(--grad-cyan);border-radius:99px;transition:width .5s cubic-bezier(.2,.8,.3,1);box-shadow:0 0 6px rgba(43,255,163,.4);}
.q-action{flex-shrink:0;display:flex;align-items:center;}
.q-prog{font-family:var(--fmono);font-size:.62rem;color:var(--tx-mut);}
.q-claim-btn{background:var(--grad-gold);border:none;color:#1a0a2e;font-family:var(--fdisp);font-weight:900;font-size:.66rem;padding:.4rem .8rem;border-radius:99px;cursor:pointer;box-shadow:0 0 16px rgba(255,203,69,.4);animation:claimPulse 1.4s ease-in-out infinite;}
@keyframes claimPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.06);}}
.q-claim-btn:active{transform:scale(.92);}
.q-claimed{font-family:var(--fmono);font-size:.6rem;color:var(--green);}

.q-mission{border-color:rgba(34,224,255,.25);}
.q-mission .q-fill{background:var(--grad-cyan);}
.q-offer{cursor:pointer;border-color:var(--line2);}
.q-offer:active{transform:scale(.98);}
.q-offer:hover{border-color:var(--gold);}
.q-accept{font-family:var(--fdisp);font-weight:700;font-size:.66rem;color:var(--gold);white-space:nowrap;}
.q-abandon{background:transparent;border:1px solid var(--line2);color:var(--tx-dim);font-size:.7rem;width:26px;height:26px;border-radius:50%;cursor:pointer;transition:all .15s;}
.q-abandon:hover{border-color:var(--red);color:var(--red);}

.q-hist{display:flex;justify-content:space-between;align-items:center;font-size:.68rem;color:var(--tx-mut);padding:.4rem .7rem;background:var(--bg1);border-radius:var(--r2);margin-bottom:.3rem;}
.q-hist span:last-child{color:var(--gold);font-family:var(--fmono);font-size:.6rem;}
.q-hist-fail span:last-child{color:var(--tx-dim);}

/* ═══════════════════════════════════════════════════════════
   GAME UI LAYER v9 — bottom nav, hex crest, SVG icons, polish
   ═══════════════════════════════════════════════════════════ */

/* Body gets more bottom room for the nav */
body{padding-bottom:84px;}

/* ── BOTTOM NAV (game HUD) ── */
.botnav{
  position:fixed;left:0;right:0;bottom:0;z-index:450;
  height:68px;padding-bottom:env(safe-area-inset-bottom,0);
  display:flex;align-items:stretch;justify-content:space-around;
  background:rgba(9,7,22,.98);

  border-top:1px solid rgba(255,203,69,.18);
  box-shadow:0 -8px 40px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
}
.botnav::before{
  content:'';position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),var(--violet),var(--cyan),transparent);
  opacity:.5;
}
.bn-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  background:none;border:none;cursor:pointer;color:var(--tx-dim);
  transition:color .2s;position:relative;padding:0;
}
.bn-svg{width:25px;height:25px;fill:currentColor;transition:transform .25s cubic-bezier(.34,1.56,.64,1),filter .25s;}
.bn-lbl{font-family:var(--fmono);font-size:.46rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.bn-btn.on{color:var(--gold);}
.bn-btn.on .bn-svg{transform:translateY(-2px) scale(1.12);filter:drop-shadow(0 0 8px rgba(255,203,69,.6));}
.bn-btn.on::after{
  content:'';position:absolute;top:6px;width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 8px var(--gold);
}
.bn-btn:active .bn-svg{transform:scale(.85);}

/* Center home orb — raised, glowing */
.bn-center{flex:0 0 auto;width:64px;position:relative;}
.bn-orb{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  width:54px;height:54px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,var(--violet),var(--bg2) 75%);
  border:1.5px solid rgba(169,107,255,.6);
  box-shadow:0 0 24px rgba(169,107,255,.5),0 8px 20px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,255,255,.15);
  transition:transform .2s;
}
.bn-center:active .bn-orb{transform:translateX(-50%) scale(.9);}
.bn-svg-c{width:28px;height:28px;fill:var(--gold-hot);filter:drop-shadow(0 0 6px rgba(255,203,69,.7));}

/* ── HEADER GEAR ── */
.hdr-gear{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  width:32px;height:32px;flex-shrink:0;cursor:pointer;padding:5px;
  display:flex;align-items:center;justify-content:center;transition:all .2s;margin-left:.3rem;
}
.hdr-gear svg{width:100%;height:100%;fill:var(--tx-mut);transition:transform .4s;}
.hdr-gear:hover svg{fill:var(--gold);transform:rotate(90deg);}
.hdr-gear:active{transform:scale(.9);}

/* ── HEXAGONAL RANK CREST ── */
.rank-badge{
  position:relative;width:62px;height:62px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:1.9rem;line-height:1;
  background:
    linear-gradient(160deg,rgba(255,203,69,.25),rgba(169,107,255,.15)),
    var(--bg2);
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  border:none;
  filter:drop-shadow(0 0 14px rgba(255,203,69,.4));
  animation:crestGlow 5s ease-in-out infinite;
}
.rank-badge::before{
  content:'';position:absolute;inset:2px;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:radial-gradient(circle at 40% 30%,rgba(255,255,255,.12),transparent 60%);
  pointer-events:none;
}
.rank-badge::after{
  content:'';position:absolute;inset:-2px;z-index:-1;
  clip-path:polygon(50% 0%,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);
  background:linear-gradient(135deg,var(--gold),var(--violet),var(--cyan));
  opacity:.8;
}

/* ── SECTION TITLE BANNERS (game-screen headers) ── */
.screen-banner{
  display:flex;align-items:center;gap:.6rem;
  margin:.7rem .9rem .2rem;padding:.5rem .8rem;
  background:linear-gradient(135deg,var(--surface2),var(--bg1));
  border:1px solid var(--line2);border-radius:var(--r3);
  position:relative;overflow:hidden;
}
.screen-banner::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-rank);}
.screen-banner-ico{width:26px;height:26px;flex-shrink:0;}
.screen-banner-ico svg{width:100%;height:100%;fill:var(--gold);filter:drop-shadow(0 0 6px rgba(255,203,69,.4));}
.screen-banner-tx{flex:1;}
.screen-banner-ttl{font-family:var(--fdeco);font-size:.95rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:.02em;}
.screen-banner-sub{font-size:.6rem;color:var(--tx-mut);font-family:var(--fmono);letter-spacing:.04em;}

/* ── XP / quest bar polish: scanline shimmer ── */
.rank-hero{
  background:
    linear-gradient(180deg,rgba(29,27,66,.5),transparent),
    repeating-linear-gradient(180deg,transparent,transparent 3px,rgba(255,255,255,.012) 3px,rgba(255,255,255,.012) 4px);
}

/* Stats become hex-edged chips */
.stat{border-radius:var(--r2);}
.stat .sn{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat:nth-child(2) .sn{background:var(--grad-violet);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat:nth-child(3) .sn{background:var(--grad-cyan);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.stat:nth-child(4) .sn{background:linear-gradient(135deg,var(--amber),var(--red));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* Tab sections fill like game screens */
.sec{min-height:40vh;}

/* Realm headers get a gem bullet */
.realm-ico{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,203,69,.3),transparent 70%);
  border-radius:8px;
}

/* Quest claim button = treasure glow */
.q-claim-btn{position:relative;overflow:hidden;}
.q-claim-btn::after{
  content:'';position:absolute;top:0;left:-60%;width:50%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);
  animation:claimShine 2s ease-in-out infinite;
}
@keyframes claimShine{0%{left:-60%;}60%,100%{left:130%;}}

/* Continue card → glowing "resume quest" banner */
.continue-card{
  background:linear-gradient(135deg,rgba(169,107,255,.18),rgba(34,224,255,.08));
  border-color:rgba(169,107,255,.45);
}
.cc-lbl{color:var(--violet-hot);}
.cc-ico{filter:drop-shadow(0 0 8px rgba(169,107,255,.6));}

/* Ring gets a pulsing aura */
.ring-cont::before{
  content:'';position:absolute;inset:-8px;border-radius:50%;
  background:radial-gradient(circle,rgba(34,224,255,.12),transparent 70%);
  animation:ringPulse 5s ease-in-out infinite;pointer-events:none;
}
@keyframes ringPulse{0%,100%{opacity:.45;transform:scale(.97);}50%{opacity:.75;transform:scale(1.04);}}

/* ═══════════════════════════════════════════════════════════
   MISSION BUILDER
   ═══════════════════════════════════════════════════════════ */
.mb-wrap{
  background:linear-gradient(160deg,var(--surface2),var(--bg1));
  border:1px solid var(--line2);border-radius:var(--r4);
  padding:.9rem;margin-bottom:.6rem;position:relative;overflow:hidden;
}
.mb-wrap::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grad-cyan);}
.mb-modes{display:flex;gap:.5rem;margin-bottom:.85rem;}
.mb-mode{
  flex:1;padding:.55rem .4rem;border:1px solid var(--line2);background:var(--bg1);
  color:var(--tx-mut);border-radius:var(--r2);font-family:var(--fbody);font-size:.7rem;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.mb-mode.on{background:linear-gradient(135deg,rgba(34,224,255,.18),rgba(43,255,163,.1));border-color:var(--cyan);color:var(--cyan-hot);box-shadow:0 0 14px rgba(34,224,255,.2);}
.mb-label{font-family:var(--fmono);font-size:.6rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.1em;margin:.6rem 0 .4rem;}
.mb-stepper{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;}
.mb-step{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--r2);border:1px solid var(--line2);
  background:var(--bg1);color:var(--gold);font-size:1.3rem;font-weight:700;cursor:pointer;transition:all .15s;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.mb-step:active{transform:scale(.88);background:var(--surface2);}
.mb-num{
  flex:1;min-width:0;text-align:center;background:var(--bg0);border:1px solid var(--line);
  border-radius:var(--r2);color:var(--tx);font-family:var(--fdeco);font-size:1.3rem;padding:.4rem;
  outline:none;-moz-appearance:textfield;
}
.mb-num::-webkit-outer-spin-button,.mb-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.mb-num:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(34,224,255,.12);}
.mb-unit{font-family:var(--fmono);font-size:.7rem;color:var(--tx-mut);flex-shrink:0;}
.mb-presets{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.3rem;}
.mb-preset{
  flex:1;min-width:42px;padding:.34rem;border:1px solid var(--line);background:var(--bg1);
  color:var(--tx-mut);border-radius:99px;font-family:var(--fmono);font-size:.66rem;cursor:pointer;transition:all .15s;
}
.mb-preset.on{background:var(--grad-gold);border-color:transparent;color:#1a0a2e;font-weight:700;}
.mb-select{
  width:100%;background:var(--bg0);border:1px solid var(--line);border-radius:var(--r2);
  color:var(--tx);font-family:var(--fbody);font-size:.82rem;padding:.55rem;outline:none;cursor:pointer;
}
.mb-select:focus{border-color:var(--cyan);}
.mb-time-row{display:flex;align-items:center;justify-content:space-between;margin:.85rem 0 .55rem;}
.mb-toggle{
  width:48px;height:26px;border-radius:99px;border:1px solid var(--line2);background:var(--bg0);
  position:relative;cursor:pointer;transition:all .25s;flex-shrink:0;
}
.mb-toggle.on{background:var(--grad-cyan);border-color:transparent;}
.mb-toggle-knob{
  position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--tx-mut);transition:all .25s cubic-bezier(.34,1.56,.64,1);
}
.mb-toggle.on .mb-toggle-knob{left:24px;background:#06251c;}
.mb-hint{font-family:var(--fmono);font-size:.56rem;color:var(--tx-dim);letter-spacing:.04em;margin-top:.2rem;}
.mb-reward{
  display:flex;align-items:center;gap:.7rem;margin-top:.95rem;padding-top:.85rem;
  border-top:1px solid var(--line);
}
.mb-reward-tx{flex:1;}
.mb-reward-lbl{font-family:var(--fmono);font-size:.5rem;color:var(--tx-mut);text-transform:uppercase;letter-spacing:.12em;}
.mb-reward-xp{font-family:var(--fdeco);font-size:1.5rem;background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1;transition:all .2s;}
.mb-accept{
  flex-shrink:0;background:var(--grad-cyan);border:none;color:#06251c;font-family:var(--fdisp);font-weight:900;
  font-size:.78rem;padding:.65rem 1.1rem;border-radius:99px;cursor:pointer;letter-spacing:.03em;
  box-shadow:0 0 20px rgba(43,255,163,.3);transition:transform .12s;
}
.mb-accept:active{transform:scale(.93);}
.mb-accept.disabled{background:var(--surface2);color:var(--tx-dim);box-shadow:none;cursor:default;}

/* ═══════════════════════════════════════════════════════════
   LIVING / BREATHING AMBIENT LAYER
   Subtle, slow, never overwhelming
   ═══════════════════════════════════════════════════════════ */

/* (background layers are static) */


/* Drifting glow orbs behind everything — very soft */
body::after{
  content:'';position:fixed;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(circle 280px at 18% 22%,rgba(169,107,255,.10),transparent 60%),
    radial-gradient(circle 240px at 82% 70%,rgba(34,224,255,.08),transparent 60%),
    radial-gradient(circle 200px at 60% 12%,rgba(255,203,69,.06),transparent 60%);
}
@keyframes orbDrift{
  0%{transform:translate(0,0) scale(1);}
  33%{transform:translate(3%,-2%) scale(1.06);}
  66%{transform:translate(-2%,3%) scale(.97);}
  100%{transform:translate(2%,1%) scale(1.03);}
}
/* keep real content above the ambient layers */
/* keep page content above ambient layers without disturbing sticky header */
.rank-hero,.stats-bar,.continue-wrap,.nextup-wrap,.page{position:relative;z-index:1;}
#drawer{z-index:600;}

/* ── CLEAN AMBIENT: a few cheap glow-only animations ── */
/* Rank crest: gentle glow pulse (filter only, GPU-friendly, small element) */
@keyframes crestGlow{0%,100%{filter:drop-shadow(0 0 13px rgba(244,183,64,.5));}50%{filter:drop-shadow(0 0 22px rgba(244,183,64,.85));}}
.rank-badge{animation:crestGlow 6s ease-in-out infinite;}
/* XP bar glow breath (box-shadow only) */
@keyframes xpBreathe{0%,100%{box-shadow:0 0 12px rgba(47,212,196,.5);}50%{box-shadow:0 0 20px rgba(47,212,196,.8);}}

/* Bottom nav orb glow breath (box-shadow only) */
@keyframes orbBreathe{0%,100%{box-shadow:0 0 22px rgba(169,107,255,.5),0 8px 20px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,255,255,.15);}50%{box-shadow:0 0 34px rgba(169,107,255,.75),0 8px 20px rgba(0,0,0,.5),inset 0 2px 6px rgba(255,255,255,.2);}}
.bn-orb{animation:orbBreathe 5.5s ease-in-out infinite;}
/* Now-learning card: soft glow breath, NO transform (text stays crisp) */
/* card glow handled by composited pseudo-element, see .nu-line-card::after below */


/* Respect reduced-motion preference */
@media (prefers-reduced-motion:reduce){
  body::before,body::after,.rank-badge,.xbf,.stat::before,.continue-card::after,
  .nu-line-card,.bn-orb,.bn-btn.on .bn-svg,.screen-banner::before,.mb-wrap::before,.logo-img,
  .ring-cont::before,.q-claim-btn::after,.bn-ring-fill,.bn-center::before{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════
   SEPARATE PAGES — each tab is its own full screen
   ═══════════════════════════════════════════════════════════ */
.page{display:none;animation:pageIn .25s ease;contain:layout style;}
.page.on{display:block;}
@keyframes pageIn{from{opacity:0;}to{opacity:1;}}
/* old .sec rules no longer used but harmless; ensure .sec hidden if any remain */
.sec:not(.on){display:none;}

/* ── HEADER SHAS RING ── */
.hdr-ring{position:relative;width:38px;height:38px;flex-shrink:0;cursor:pointer;margin-left:auto;margin-right:.3rem;}
.hdr-ring-svg{width:38px;height:38px;transform:rotate(-90deg);}
.hdr-ring-track{fill:none;stroke:var(--bg0);stroke-width:4;}
.hdr-ring-fill{fill:none;stroke:url(#hrG);stroke-width:4.5;stroke-linecap:round;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1);}
.hdr-ring-pct{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--fmono);font-size:.46rem;font-weight:700;color:var(--gold-hot);}
.hdr-ring::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:radial-gradient(circle,rgba(255,203,69,.15),transparent 70%);animation:ringPulse 5.5s ease-in-out infinite;pointer-events:none;}

/* Home page spacing */
#sec-home{padding-bottom:.5rem;}

/* ── PREV CARD + CARD MEFARSHIM CONTROLS ── */
.nu-controls{display:flex;align-items:center;gap:.4rem;margin-top:.5rem;flex-wrap:wrap;justify-content:center;}
.nu-ctrl-btn{
  background:var(--surface);border:1px solid var(--line2);border-radius:99px;
  color:var(--tx-mut);font-size:.62rem;font-weight:600;padding:.34rem .7rem;cursor:pointer;
  transition:all .18s;font-family:var(--fbody);display:inline-flex;align-items:center;gap:.3rem;
}
.nu-ctrl-btn:active{transform:scale(.92);}
.nu-ctrl-btn.on{border-color:var(--cyan);color:var(--cyan-hot);background:rgba(34,224,255,.1);box-shadow:0 0 10px rgba(34,224,255,.15);}
.nu-prev-btn{border-color:var(--line2);}
.nu-prev-btn:disabled{opacity:.3;pointer-events:none;}

/* Inline commentary panel on the card */
.nu-mef{
  margin-top:.6rem;border-top:1px solid var(--line);padding-top:.6rem;
  text-align:right;animation:pageIn .3s ease;
}
.nu-mef-item{margin-bottom:.55rem;}
.nu-mef-name{font-family:var(--fdisp);font-size:.66rem;font-weight:700;color:var(--cyan-hot);margin-bottom:.25rem;text-align:right;letter-spacing:.02em;}
.nu-mef-name.rashi{color:var(--cyan-hot);}
.nu-mef-name.tos{color:var(--violet-hot);}
.nu-mef-he{font-family:var(--fhe);font-size:1rem;line-height:1.7;direction:rtl;color:var(--tx-soft);}
.nu-mef-loading{font-size:.62rem;color:var(--tx-dim);text-align:center;padding:.4rem;}

/* PIN button (set as home default) */
.nu-pin-btn{
  background:transparent;border:1px solid var(--line2);border-radius:99px;
  color:var(--tx-dim);font-size:.6rem;padding:.3rem .65rem;cursor:pointer;transition:all .18s;
  display:inline-flex;align-items:center;gap:.3rem;
}
.nu-pin-btn.pinned{border-color:var(--gold);color:var(--gold);background:rgba(255,203,69,.1);box-shadow:0 0 10px rgba(255,203,69,.15);}
.nu-pin-banner{
  display:flex;align-items:center;gap:.4rem;justify-content:center;
  font-family:var(--fmono);font-size:.52rem;color:var(--gold);letter-spacing:.06em;
  margin-bottom:.4rem;text-transform:uppercase;
}

/* ═══════════════════════════════════════════════════════════
   IDENTITY LAYER v12 — "Illuminated Arcade"
   Distinctive texture, gold-leaf edges, signature background
   ═══════════════════════════════════════════════════════════ */

/* Signature background: deep teal-ink with a faint engraved grid + warm vignette.
   NOT the generic radial-purple-glow look. Static = no flicker. */
body{
  background:
    /* warm top glow */
    radial-gradient(120% 60% at 50% -10%,rgba(244,183,64,.07),transparent 55%),
    /* tekhelet depth bottom */
    radial-gradient(100% 50% at 50% 110%,rgba(59,110,240,.08),transparent 60%),
    var(--bg0);
}
/* Engraved fine grid texture — like manuscript ruling. Very subtle. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.4;
  background-image:
    linear-gradient(rgba(244,183,64,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(244,183,64,.025) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(120% 80% at 50% 30%,#000,transparent 75%);
          mask-image:radial-gradient(120% 80% at 50% 30%,#000,transparent 75%);
}
/* Single soft ember orb, static, low — adds warmth not the rainbow-glow cliché */
body::after{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle 420px at 80% 8%,rgba(255,138,60,.06),transparent 60%);
}

/* Gold hairline + corner ticks on key cards = illuminated-manuscript framing.
   This is the signature motif that makes it recognizably ShasMaster. */
.continue-card,.nu-line-card,.mb-wrap,.scard,.lb-myrank{
  position:relative;
}
.nu-line-card::before{
  content:'';position:absolute;inset:7px;border:1px solid rgba(244,183,64,.16);
  border-radius:calc(var(--r4) - 7px);pointer-events:none;z-index:1;
}
/* Corner brackets on the learning card — like a framed folio */
.nu-line-card{
  background:
    linear-gradient(160deg,var(--surface2) 0%,var(--surface) 60%,var(--bg1) 100%);
}
.nu-line-content{position:relative;z-index:2;}

/* Section banners get an illuminated drop-cap energy */
.screen-banner{
  background:linear-gradient(135deg,var(--surface2),var(--bg1));
  border:1px solid var(--line2);
  box-shadow:inset 0 1px 0 rgba(244,183,64,.08);
}
.screen-banner::before{background:var(--grad-gold);width:5px;}
.screen-banner-ttl{font-family:var(--fdeco);}

/* Stat chips → engraved medallions */
.stat{
  background:linear-gradient(165deg,var(--surface),var(--bg0));
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 8px rgba(0,0,0,.3);
}
.sn{font-family:var(--fdeco);}

/* The rank title: bold Marcellus, gold leaf */
.rttl{font-family:var(--fdeco);font-weight:900;}
.logo-name{font-family:var(--fdeco);}

/* Body Hebrew uses Frank Ruhl (classic Talmud typeface feel) */
.nu-line-he,.sc-he,.dhe{font-family:var(--fhe);}

/* ── HOME BUTTON PROGRESS RING ── */
.bn-orb{overflow:visible;}
.bn-center::before{content:'';position:absolute;top:-16px;left:50%;width:74px;height:74px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(244,183,64,.4),transparent 65%);opacity:.5;animation:orbHalo 5.5s ease-in-out infinite;pointer-events:none;z-index:-1;}
@keyframes orbHalo{0%,100%{opacity:.4;transform:translateX(-50%) scale(.95);}50%{opacity:.75;transform:translateX(-50%) scale(1.1);}}
.bn-ring{position:absolute;top:50%;left:50%;width:64px;height:64px;transform:translate(-50%,-50%) rotate(-90deg);pointer-events:none;}
.bn-ring-track{fill:none;stroke:rgba(0,0,0,.4);stroke-width:3.5;}
.bn-ring-fill{fill:none;stroke:url(#bnG);stroke-width:4.5;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1);animation:bnRingColor 12s linear infinite;}
@keyframes bnRingColor{0%{filter:hue-rotate(0deg) drop-shadow(0 0 8px rgba(255,255,255,.5)) drop-shadow(0 0 16px rgba(244,183,64,.7));}50%{filter:hue-rotate(180deg) drop-shadow(0 0 12px rgba(255,255,255,.6)) drop-shadow(0 0 22px rgba(244,183,64,.8));}100%{filter:hue-rotate(360deg) drop-shadow(0 0 8px rgba(255,255,255,.5)) drop-shadow(0 0 16px rgba(244,183,64,.7));}}
.bn-ring-pct{
  position:absolute;bottom:-11px;left:50%;transform:translateX(-50%);
  font-family:var(--fmono);font-size:.44rem;font-weight:700;color:var(--gold-hot);
  background:var(--bg0);padding:.05rem .3rem;border-radius:99px;white-space:nowrap;
  border:1px solid rgba(244,183,64,.35);line-height:1.3;z-index:3;
}
/* Re-tune the orb to host the ring: slightly smaller core so ring reads clearly */
.bn-orb{
  width:50px;height:50px;top:-16px;
  background:radial-gradient(circle at 35% 30%,#1c2c36,#0a0f12 78%);
  border:1px solid rgba(244,183,64,.35);
  box-shadow:0 0 22px rgba(244,183,64,.25),0 8px 20px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.08);
}
.bn-svg-c{width:22px;height:22px;fill:var(--gold-hot);filter:drop-shadow(0 0 5px rgba(244,183,64,.7));}
@keyframes orbBreathe{0%,100%{box-shadow:0 0 24px rgba(244,183,64,.45),0 0 40px rgba(255,138,60,.15),0 8px 20px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.12);}50%{box-shadow:0 0 40px rgba(244,183,64,.7),0 0 64px rgba(255,138,60,.35),0 8px 20px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.16);}}

/* Bottom nav: warm ink bar with a gold top hairline (not generic glass) */
.botnav{
  background:linear-gradient(180deg,#0e151a,#0a0f12);
  border-top:1px solid rgba(244,183,64,.22);
}
.botnav::before{background:linear-gradient(90deg,transparent,var(--gold),var(--amber),var(--gold),transparent);opacity:.6;}
.bn-btn.on{color:var(--gold);}
.bn-btn.on::after{background:var(--gold);box-shadow:0 0 8px var(--gold);}

/* Header: solid warm ink + gold hairline bottom */
header{
  background:rgba(12,18,22,.97)!important;
  border-bottom:1px solid rgba(244,183,64,.18);
}

/* Buttons get a crisper, more "minted" feel */
.nu-line-done-btn,.q-claim-btn,.mb-accept,.auth-btn,.lu-cls{
  border-radius:var(--r2);
  text-transform:uppercase;letter-spacing:.06em;
}

/* Daf badge → gold seal */
.nu-daf-badge{
  background:var(--grad-gold);color:#2a1a08;
  box-shadow:0 2px 8px rgba(244,183,64,.35),inset 0 1px 0 rgba(255,255,255,.4);
  font-family:var(--fdisp);
}

/* Continue card → "open scroll" warm tone */
.continue-card{
  background:linear-gradient(135deg,rgba(244,183,64,.12),rgba(59,110,240,.06));
  border:1px solid rgba(244,183,64,.35);
}
.cc-lbl{color:var(--gold-hot);}
.cc-ico{filter:drop-shadow(0 0 8px rgba(244,183,64,.6));}

.bn-lbl-c{display:none;}

/* ═══════════════════════════════════════════════════════════
   IDENTITY v13 — characterful structure (break the generic feel)
   ═══════════════════════════════════════════════════════════ */

/* Rank hero → a "royal banner" with a decorative double-rule top and
   a gold filigree divider. Gives the home screen a crest-of-arms identity. */
.rank-hero{
  background:
    linear-gradient(180deg,rgba(244,183,64,.05),transparent 40%),
    linear-gradient(180deg,rgba(20,29,36,.6),transparent);
  border-bottom:none;
  padding-top:1.1rem;
}
/* Gold filigree divider under the hero — a repeating diamond motif, not a plain line */
.rank-hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(244,183,64,.45),rgba(255,138,60,.3),rgba(244,183,64,.45),transparent);
  pointer-events:none;
}

/* The rank crest: bigger, more dramatic — a real emblem with double-hex layering */
.rank-badge{
  width:66px;height:66px;font-size:2rem;
}
.rank-badge::after{
  /* outer rotating gilt frame */
  inset:-3px;
  background:conic-gradient(from 0deg,var(--gold),var(--amber),var(--pink),var(--violet),var(--gold));
  opacity:.9;
}

/* Stats: turn the 4 chips into a connected "ledger strip" with dividers,
   instead of 4 identical floating rounded boxes (the generic tell) */
.stats-bar{
  gap:0;
  background:linear-gradient(180deg,var(--surface),var(--bg1));
  border:1px solid var(--line2);
  border-radius:var(--r3);
  margin:.55rem .95rem;
  overflow:hidden;
  padding:0;
}
.stat{
  border-radius:0;border:none;background:transparent;box-shadow:none;
  border-right:1px solid var(--line);
  padding:.6rem .25rem;
}
.stat:last-child{border-right:none;}
.stat::before{height:3px;top:0;left:0;right:0;}
.stat:active{background:rgba(244,183,64,.06);transform:none;}

/* Section banners → "chapter plate" with a drop-cap-style icon box */
.screen-banner{
  border-radius:0;
  border-left:none;border-right:none;
  margin:.6rem 0 .3rem;
  padding:.6rem .95rem;
  border-top:1px solid rgba(244,183,64,.18);
  border-bottom:1px solid rgba(244,183,64,.18);
  background:linear-gradient(90deg,rgba(244,183,64,.06),transparent 60%);
}
.screen-banner::before{width:0;}
.screen-banner-ico{
  width:34px;height:34px;border:1px solid rgba(244,183,64,.4);
  border-radius:8px;background:rgba(244,183,64,.08);
  display:flex;align-items:center;justify-content:center;padding:5px;
}

/* Realm rows → "shelf" look with a spine on the left */
.realm-hdr{border-left:3px solid var(--gold);border-radius:0 var(--r2) var(--r2) 0;}

/* Daf badge already gold-seal; add a tiny notch detail */
.nu-daf-badge{clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);padding-left:.7rem;padding-right:.7rem;}

/* XP bar → segmented "progress runes" feel via a subtle tick overlay */
.xbt{position:relative;}
.xbt::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,transparent,transparent 11px,rgba(10,15,18,.5) 11px,rgba(10,15,18,.5) 12px);
  border-radius:99px;
}

/* ═══════════════════════════════════════════════════════════
   GLOW-UP v14 — exciting but tasteful (smooth breaths, no blink)
   ═══════════════════════════════════════════════════════════ */

/* Rank title: subtle living gold shimmer (slow, smooth — not a blink) */
.rttl{
  background:linear-gradient(100deg,var(--gold-hot),var(--gold) 30%,var(--amber) 55%,var(--gold) 80%,var(--gold-hot));
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:titleShimmer 7s linear infinite;
  filter:drop-shadow(0 0 14px rgba(244,183,64,.25));
}
@keyframes titleShimmer{0%{background-position:0% center;}100%{background-position:200% center;}}

/* Stat numbers: soft gold glow */
.sn{text-shadow:0 0 14px rgba(244,183,64,.25);}

/* Daf badge seal: gentle breathing glow */
.nu-daf-badge{animation:sealGlow 5s ease-in-out infinite;}
@keyframes sealGlow{0%,100%{box-shadow:0 2px 8px rgba(244,183,64,.35),inset 0 1px 0 rgba(255,255,255,.4);}50%{box-shadow:0 2px 14px rgba(244,183,64,.6),inset 0 1px 0 rgba(255,255,255,.5);}}

/* Done button: living teal glow */
.nu-line-done-btn{box-shadow:0 0 14px rgba(47,212,196,.4);animation:doneGlow 4.5s ease-in-out infinite;}
@keyframes doneGlow{0%,100%{box-shadow:0 0 14px rgba(47,212,196,.4);}50%{box-shadow:0 0 22px rgba(47,212,196,.7);}}

/* Continue card: slow warm glow breath on its border */
.continue-card{animation:contGlow 6s ease-in-out infinite;}
@keyframes contGlow{0%,100%{box-shadow:0 0 0 1px rgba(244,183,64,.06),0 8px 28px rgba(0,0,0,.3);}50%{box-shadow:0 0 22px rgba(244,183,64,.2),0 8px 28px rgba(0,0,0,.3);}}

/* Quest claim button: keep the existing pulse but add a warm glow breath */
.q-claim-btn{box-shadow:0 0 18px rgba(244,183,64,.45);}

/* Header Shas ring: brighter, breathing glow on the fill */
.hdr-ring-fill{animation:hdrRingGlow 5.5s ease-in-out infinite;}
@keyframes hdrRingGlow{0%,100%{filter:drop-shadow(0 0 4px rgba(47,212,196,.8)) drop-shadow(0 0 7px rgba(244,183,64,.6));}50%{filter:drop-shadow(0 0 8px rgba(47,212,196,1)) drop-shadow(0 0 14px rgba(244,183,64,.9));}}

/* Active bottom-nav icon: gentle gold glow breath (not bob) */
.bn-btn.on .bn-svg{animation:navGlow 4.5s ease-in-out infinite;}
@keyframes navGlow{0%,100%{filter:drop-shadow(0 0 6px rgba(244,183,64,.5));}50%{filter:drop-shadow(0 0 12px rgba(244,183,64,.85));}}

/* Make sure reduced-motion kills the new ones too */
@media (prefers-reduced-motion:reduce){
  .rttl,.nu-daf-badge,.nu-line-done-btn,.continue-card,.hdr-ring-fill,
  .bn-btn.on .bn-svg,.xbf{animation:none!important;}
}

/* ═══════════════════════════════════════════════════════════
   VISUAL UPGRADE v15 — neon polish + premium touches
   ═══════════════════════════════════════════════════════════ */

/* Brighter neon tracks on both rings (subtle inner glow channel) */
.bn-ring-track{stroke:rgba(47,212,196,.10);}
.hdr-ring-track{stroke:rgba(47,212,196,.12);}

/* Home orb gets a faint inner neon rim so the ring reads as "energized" */
.bn-orb{border:1px solid rgba(47,212,196,.4);}

/* XP value counter: neon gold, tabular, with a soft glow */
.rxpn,#txp{text-shadow:0 0 16px rgba(244,183,64,.4);}

/* The "TOTAL XP" + level labels: tiny neon caps */
.rxpl,.rlvl{color:var(--cyan-hot);text-shadow:0 0 8px rgba(47,212,196,.4);}

/* Continue-card play icon → neon teal pulse ring */
.cc-ico{position:relative;}

/* Section header accent: a short neon underline that glows */
.q-section-hdr{border-bottom:none;position:relative;}
.q-section-hdr::after{
  content:'';position:absolute;left:0;bottom:0;width:48px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan),var(--gold));
  box-shadow:0 0 8px rgba(47,212,196,.6);
}

/* Stat top-edges become neon bars */
.stat::before{box-shadow:0 0 8px currentColor;}
.stat:nth-child(1)::before{background:linear-gradient(90deg,#74efe0,#ffd97a);}
.stat:nth-child(2)::before{background:linear-gradient(90deg,#3b6ef0,#6f9bff);}
.stat:nth-child(3)::before{background:linear-gradient(90deg,#2fd4c4,#4fd98a);}
.stat:nth-child(4)::before{background:linear-gradient(90deg,#ff8a3c,#ff6b8a);}

/* Done button on the card: neon teal, brighter */
.nu-line-done-btn{background:linear-gradient(135deg,#2fd4c4,#4fd98a);color:#04231c;}

/* Daf badge: keep gold seal but add a thin neon edge */
.nu-daf-badge{border:1px solid rgba(255,217,122,.5);}

/* ═══════════════════════════════════════════════════════════
   FLOWING HEBREW LETTERS BACKGROUND
   ═══════════════════════════════════════════════════════════ */
#heb-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  width:100%;height:100%;
}
/* ensure content sits above it (body::before/after are z-0 too; canvas is fine at 0 with content z-1) */


/* Masechtot count under rank title */
.rmas{
  font-family:var(--fmono);font-size:.56rem;color:var(--gold-hot);
  letter-spacing:.04em;margin-top:.2rem;
  text-shadow:0 0 10px rgba(244,183,64,.3);
}


/* Centered line-progress dots */
.nu-dots-row{display:flex;justify-content:center;margin:.5rem 0 .1rem;}
.nu-dots{display:flex;gap:.32rem;flex-wrap:wrap;justify-content:center;max-width:90%;}

/* Unified control row — all buttons together, wraps neatly, centered */
.nu-controls{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;align-items:center;margin-top:.5rem;}
/* Done = primary neon teal; Skip = quiet; pin = compact */
.nu-ctrl-btn.nu-done-c{background:linear-gradient(135deg,#2fd4c4,#4fd98a);color:#04231c;border-color:transparent;font-weight:800;box-shadow:0 0 14px rgba(47,212,196,.4);}
.nu-ctrl-btn.nu-skip-c{color:var(--tx-dim);}
.nu-ctrl-btn.nu-pin-c{padding:.34rem .55rem;}
.nu-pin-btn.pinned{border-color:var(--gold);color:var(--gold);background:rgba(244,183,64,.12);}