/* The Learner — base layout and components (legacy, trimmed). theme.css layers the light design on top. */
/* ═══════════════════════════════════════════════════════════
   THE LEARNER v7 — "NEON KODESH"
   A Torah learning game that feels alive
   ═══════════════════════════════════════════════════════════ */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/rubik-latin.woff2) format('woff2');}
@font-face{font-family:'Noto Serif Hebrew';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/noto-serif-hebrew-400.woff2) format('woff2');unicode-range:U+0307-0308,U+0590-05FF,U+200C-2010,U+20AA,U+25CC,U+FB1D-FB4F;}

:root{
  /* IDENTITY: "HOLO-NEXUS" — deep-space navy base, neon cyan primary,
     electric violet secondary, plasma gold for rewards. A holographic
     command deck for learning Shas. */
  --bg0:#04070e;          /* deep space */
  --bg1:#070c16;
  --bg2:#0a1120;
  --surface:#0c1424;
  --surface2:#101a2e;
  --raised:#162238;
  --line:#1b2a44;
  --line2:#27406a;

  /* Neon accents */
  --gold:#ffc83d;         /* plasma gold — rewards & XP */
  --gold-hot:#ffe27a;
  --amber:#ff9f43;
  --cyan:#00e5ff;         /* primary neon */
  --cyan-hot:#7df9ff;
  --violet:#7c5cff;       /* electric violet — the signature */
  --violet-hot:#a78bff;
  --pink:#ff5ce1;         /* hologram magenta */
  --green:#22ffa6;        /* matrix green */
  --green-hot:#8fffd0;
  --red:#ff4d6d;

  /* Text — cool starlight whites */
  --tx:#eaf3ff;
  --tx-soft:#b8c8e0;
  --tx-mut:#7d90ad;
  --tx-dim:#4a5b75;

  /* Holographic gradients */
  --grad-gold:linear-gradient(135deg,#ffe27a,#ffc83d 45%,#ff9f43);
  --grad-cyan:linear-gradient(135deg,#00e5ff,#22ffa6);
  --grad-violet:linear-gradient(135deg,#7c5cff,#00e5ff);
  --grad-rank:linear-gradient(120deg,#7df9ff 0%,#a78bff 38%,#ff5ce1 72%,#ffe27a 100%);
  --grad-xp:linear-gradient(90deg,#00e5ff,#22ffa6 55%,#ffc83d);

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

  /* Crisp, technical corners */
  --r1:6px;--r2:10px;--r3:14px;--r4:20px;--r5:28px;

  --fdisp:'Sora',sans-serif;
  --fdeco:'Sora',sans-serif;
  --fbody:'Inter',sans-serif;
  --fmono:'JetBrains Mono',monospace;
  --fhe:'Noto Serif Hebrew',serif;

  /* Adaptive surfaces — overridden per sky phase */
  --glass:rgba(255,255,255,.05);
  --surface-grad:linear-gradient(180deg,rgba(16,26,46,.78),rgba(10,17,32,.78));
  --nav-bg:rgba(8,13,24,.82);
  --hud-bg:rgba(10,8,26,.85);
  --hero-glow:0 0 26px rgba(0,229,255,.4);

  /* Legacy aliases (used by runtime-injected grid styles) */
  --card:#0c1424;--card2:#101a2e;--bdr:#1b2a44;--bdr2:#27406a;
  --grn:#22ffa6;--wt:#eaf3ff;--mlt:#7d90ad;--mut:#7d90ad;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
/* Visible focus ring for keyboard users only (mouse/touch stay clean) */
button:focus:not(:focus-visible){outline:none;}
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,.98),rgba(7,5,18,.99));
  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,.98),rgba(7,5,18,.99));
  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(5,8,11,.82);z-index:500;display:none;}
#ov.on{display:block;}

/* ══════════════ MODALS ══════════════ */

/* ── 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;}

/* ══════════════ 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;box-shadow:0 0 16px rgba(47,212,196,.65);}
@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 ══════════════ */

/* ══════════════ CONTINUE CARD ══════════════ */

/* ══════════════ 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-color:var(--raised); /* opaque base (theme-aware) so nothing shows through while moving */
  background-image: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;
  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);}

/* Full-card swipe overlays — cover the entire card, centered label */
.nu-swipe-right,.nu-swipe-left{position:absolute;inset:0;border-radius:inherit;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .15s;z-index:2;will-change:opacity;background:radial-gradient(circle at center,rgba(43,255,163,.35),rgba(43,255,163,.12) 70%);}
.dragging .nu-swipe-right,.dragging .nu-swipe-left{transition:none;}
.nu-swipe-right span,.nu-swipe-left span{font-family:var(--fdeco);font-size:1.5rem;color:var(--green-hot);text-shadow:0 0 22px var(--green);}
/* Chazara overlays use the violet review color */
#chz-swipe-right,#chz-swipe-left{background:radial-gradient(circle at center,rgba(59,110,240,.35),rgba(59,110,240,.12) 70%);}
#chz-swipe-right span,#chz-swipe-left span{color:var(--violet-hot);text-shadow:0 0 22px var(--violet);}

@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);}

/* ══════════════ RING ══════════════ */

/* ══════════════ 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);}}

/* ══════════════ 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;}

/* ══════════════ 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);}
.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;}
.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 ══════════════ */

/* ══════════════ 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;}
.empty{font-size:.74rem;color:var(--tx-dim);text-align:center;padding:1.5rem;}

/* ══════════════ BOTTOM NAV ══════════════ */

/* 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-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);
}

/* ══════════════════════════════════════
   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-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 16px rgba(255,203,69,.5)); /* crestGlow anim removed (filter repaint) */
}
.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 */

/* 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%{transform:translateX(-160%);}60%,100%{transform:translateX(340%);}}

/* Continue card → glowing "resume quest" banner */

/* Ring gets a pulsing aura */

/* ═══════════════════════════════════════════════════════════
   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%);
}
/* keep real content above the ambient layers */
/* keep page content above ambient layers without disturbing sticky header */
.rank-hero,.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) */
/* crestGlow removed (animated drop-shadow repaint) */
.rank-badge{filter:drop-shadow(0 0 16px rgba(244,183,64,.65));}
/* XP bar glow breath (box-shadow only) */
/* xpBreathe removed (animated box-shadow repaint) */

/* Bottom nav orb glow breath (box-shadow only) */
/* orbBreathe removed (animated box-shadow repaint) */
.bn-orb{box-shadow:0 0 30px rgba(244,183,64,.55),0 0 50px rgba(255,138,60,.22),0 8px 20px rgba(0,0,0,.55),inset 0 2px 6px rgba(255,255,255,.14);}
/* 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,
  .nu-line-card,.bn-orb,.bn-btn.on .bn-svg,.screen-banner::before,.mb-wrap::before,.logo-img,.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 ── */

/* 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);}

/* ═══════════════════════════════════════════════════════════
   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 The Learner. */
.nu-line-card,.mb-wrap,.scard{
  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-color:var(--raised); /* theme-aware */
  background-image: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 */

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


.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);filter:drop-shadow(0 0 8px rgba(255,255,255,.5)) drop-shadow(0 0 16px rgba(244,183,64,.7));}
/* bnRingColor removed: animating filter on SVG repaints the nav every frame */
.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));}
/* orbBreathe removed (animated box-shadow repaint) */

/* 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,.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 */

.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) */

/* 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;
  filter:drop-shadow(0 0 14px rgba(244,183,64,.25)); /* shimmer removed: animated bg-clip:text flickers on Android */
}
/* titleShimmer keyframes removed (Android background-clip:text flicker) */

/* Stat numbers: soft gold glow */

/* Daf badge seal: gentle breathing glow */
.nu-daf-badge{box-shadow:0 2px 11px rgba(244,183,64,.48),inset 0 1px 0 rgba(255,255,255,.45);}
/* sealGlow removed */

/* Done button: living teal glow */
.nu-line-done-btn{box-shadow:0 0 18px rgba(47,212,196,.55);}
/* doneGlow removed */

/* Continue card: slow warm glow breath on its border */
/* contGlow removed */

/* 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 */
/* hdrRingGlow removed (animated drop-shadow repaint) */

/* Active bottom-nav icon: gentle gold glow breath (not bob) */
.bn-btn.on .bn-svg{filter:drop-shadow(0 0 8px rgba(244,183,64,.65));}
/* navGlow removed (animated drop-shadow repaint) */

/* Make sure reduced-motion kills the new ones too */
@media (prefers-reduced-motion:reduce){
  .rttl,.nu-daf-badge,.nu-line-done-btn,
  .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);}

/* 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 */

/* 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 */

/* 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
   ═══════════════════════════════════════════════════════════ */
/* 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-pin-btn.pinned{border-color:var(--gold);color:var(--gold);background:rgba(244,183,64,.12);}

/* ═══════════════════════════════════════════════════════════
   CHAZARA (review) CARD — distinct violet/tekhelet accent
   ═══════════════════════════════════════════════════════════ */
.chazara-wrap{margin-top:.4rem;}
.chz-lbl{color:var(--violet-hot)!important;}
.chz-card{
  background-color:var(--raised)!important;
  background-image:linear-gradient(160deg,rgba(59,110,240,.14),var(--surface) 60%,var(--bg1) 100%)!important;
}
.chz-card::before{border-color:rgba(59,110,240,.22)!important;}
.chz-card::after{box-shadow:0 0 26px rgba(59,110,240,.28)!important;}
.chz-badge{
  background:var(--grad-violet)!important;color:#04122e!important;
  box-shadow:0 2px 8px rgba(59,110,240,.4),inset 0 1px 0 rgba(255,255,255,.4)!important;
  border:1px solid rgba(111,155,255,.5)!important;animation:none!important;
}
.chz-prog{
  text-align:center;font-family:var(--fmono);font-size:.56rem;color:var(--violet-hot);
  letter-spacing:.05em;margin:.45rem 0 .1rem;opacity:.85;
}
.chz-review-btn{
  background:linear-gradient(135deg,#3b6ef0,#6f9bff)!important;color:#fff!important;
  border-color:transparent!important;font-weight:800!important;
  box-shadow:0 0 14px rgba(59,110,240,.45)!important;
}

/* ═══════════════════════════════════════════════════════════
   SMOOTH DRAG — disable glow/animations while dragging a card
   so the box-shadow doesn't repaint every frame (kills flicker)
   ═══════════════════════════════════════════════════════════ */
.nu-line-card.dragging,
.chz-card.dragging{
  animation:none !important;          /* stop any card-level animation */
  transition:none !important;          /* 1:1 finger tracking */
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:transform;
  /* Render the whole card (and its frame/content) as one flattened GPU layer
     so the border and text don't shimmer at sub-pixel boundaries while moving */
  isolation:isolate;
}
/* Pseudo-frame stays put relative to the card layer (no independent repaint) */
.nu-line-card.dragging::before,.chz-card.dragging::before,
.nu-line-card.dragging::after,.chz-card.dragging::after{
  will-change:auto;
}
/* Freeze the breathing-glow pseudo while dragging (it animates box-shadow → repaints) */
.nu-line-card.dragging::after,
.chz-card.dragging::after{
  animation:none !important;
  opacity:0 !important;
  transition:opacity .12s;             /* fade glow out, no hard pop */
}
/* Keep the gold frame static (no animation) during drag */
.nu-line-card.dragging::before,
.chz-card.dragging::before{
  animation:none !important;
}

/* ══════════════ DAF YOMI banner (home) ══════════════ */
.dy-banner{display:flex;align-items:center;gap:.65rem;margin:.65rem .85rem 0;padding:.6rem .85rem;
  background:linear-gradient(135deg,rgba(59,110,240,.16),rgba(47,212,196,.09));
  border:1px solid rgba(59,110,240,.38);border-radius:var(--r3);cursor:pointer;
  position:relative;z-index:1;transition:transform .15s ease,border-color .25s ease,box-shadow .25s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.05);}
.dy-banner:active{transform:scale(.985);}
.dy-banner:hover{border-color:rgba(111,155,255,.6);}
.dy-banner.done{border-color:rgba(79,217,138,.42);
  background:linear-gradient(135deg,rgba(79,217,138,.12),rgba(47,212,196,.07));}
.dy-ico{font-size:1.15rem;flex-shrink:0;}
.dy-tx{flex:1;min-width:0;}
.dy-lbl{font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;color:var(--violet-hot);font-family:var(--fmono);margin-bottom:.1rem;}
.dy-banner.done .dy-lbl{color:var(--green);}
.dy-main{font-family:var(--fdisp);font-size:.95rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.dy-main .dy-he{font-family:var(--fhe);color:var(--tx-soft);font-size:.88rem;direction:rtl;unicode-bidi:isolate;}
.dy-status{font-size:.66rem;font-weight:700;color:var(--cyan-hot);font-family:var(--fmono);white-space:nowrap;flex-shrink:0;}
.dy-banner.done .dy-status{color:var(--green);}

/* ══════════════ SMOOTHNESS: permanent GPU layer on swipe cards ══════════════
   Keeps the cards pre-rasterized so the very first drag frame never stutters.
   (JS inline transforms override this during the gesture; on reset it falls
   back here, so the compositor layer is never torn down mid-session.) */
.nu-line-card,.chz-card{transform:translateZ(0);backface-visibility:hidden;}

/* Tactile press feedback on bottom-nav icons */
.bn-btn .bn-svg,.bn-btn .bn-orb{transition:transform .14s cubic-bezier(.2,.9,.3,1.4);}
.bn-btn:active .bn-svg{transform:scale(.86);}
.bn-btn:active .bn-orb{transform:scale(.93);}

/* ══════════════ DAILY TREASURE CHEST ══════════════ */
.chest-banner{display:flex;align-items:center;gap:.65rem;margin:.55rem .85rem 0;padding:.6rem .85rem;
  background:linear-gradient(135deg,rgba(244,183,64,.16),rgba(255,138,60,.08));
  border:1px solid rgba(244,183,64,.45);border-radius:var(--r3);cursor:pointer;
  position:relative;z-index:1;overflow:hidden;
  transition:transform .15s ease,border-color .25s,opacity .3s;
  box-shadow:0 4px 20px rgba(244,183,64,.12),inset 0 1px 0 rgba(255,255,255,.06);}
.chest-banner:active{transform:scale(.985);}
.chest-banner.opened{border-color:var(--line2);opacity:.85;cursor:default;
  background:linear-gradient(135deg,rgba(36,56,69,.5),rgba(22,34,42,.5));box-shadow:none;}
.chest-banner.burst{animation:chestBurst .42s cubic-bezier(.2,.9,.3,1.3);}
@keyframes chestBurst{0%{transform:scale(1);}35%{transform:scale(1.06) rotate(-1.2deg);}70%{transform:scale(.97) rotate(1deg);}100%{transform:scale(1);}}
.chest-ico{font-size:1.35rem;flex-shrink:0;display:inline-block;}
.chest-banner:not(.opened) .chest-ico{animation:chestWiggle 3.2s ease-in-out infinite;}
@keyframes chestWiggle{0%,86%,100%{transform:rotate(0);}89%{transform:rotate(-9deg) scale(1.08);}92%{transform:rotate(8deg) scale(1.08);}95%{transform:rotate(-5deg);}98%{transform:rotate(3deg);}}
.chest-tx{flex:1;min-width:0;position:relative;z-index:1;}
.chest-main{font-family:var(--fdisp);font-size:.95rem;color:var(--gold-hot);}
.chest-banner.opened .chest-main{color:var(--tx);}
.chest-sub{font-size:.6rem;color:var(--tx-mut);margin-top:.08rem;}
/* travelling shine sweep while unopened */
.chest-shine{position:absolute;top:0;bottom:0;left:-60px;width:46px;pointer-events:none;will-change:transform;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
  animation:chestShine 3.4s ease-in-out infinite;}
@keyframes chestShine{0%{transform:translateX(0);}55%,100%{transform:translateX(70vw);}}
.chest-banner.opened .chest-shine{display:none;}
/* rarity colors */
.c-com{color:var(--green);}
.c-rare{color:var(--cyan-hot);}
.c-epic{color:var(--violet-hot);text-shadow:0 0 12px rgba(111,155,255,.5);}
.c-leg{color:var(--gold-hot);text-shadow:0 0 14px rgba(255,217,122,.7);}

/* ══════════════ LEADERBOARD TABS (Weekly League) ══════════════ */

/* ══════════════ SHARE BUTTON on celebrations ══════════════ */
.cshare{display:block;margin:.55rem auto 0;padding:.45rem 1.1rem;border-radius:99px;
  background:transparent;border:1px solid var(--line2);color:var(--tx-soft);
  font-family:var(--fmono);font-size:.66rem;font-weight:700;cursor:pointer;
  transition:all .2s;}
.cshare:hover{border-color:var(--cyan);color:var(--cyan-hot);}
.cshare:active{transform:scale(.96);}

/* ══════════════ NEAR-RANK PULSE on XP bar ══════════════ */
.xbf.near{animation:nearPulse 1.3s ease-in-out infinite;}
@keyframes nearPulse{0%,100%{opacity:1;}50%{opacity:.7;}} /* opacity = compositor-only */

@media (prefers-reduced-motion:reduce){
  .chest-banner:not(.opened) .chest-ico{animation:none;}
  .chest-shine{display:none;}
  .chest-banner.burst{animation:none;}
  .xbf.near{animation:none;filter:brightness(1.25);}
}

/* ╔══════════════════════════════════════════════════╗
   ║  v35 — GAME EVOLUTION: visual + game-feel layer  ║
   ╚══════════════════════════════════════════════════╝ */

/* ── AURORA — drifting ambient light, GPU transforms only ── */

/* ── GLASSMORPHISM — frosted nav + drawer (with graceful fallback) ── */
/* backdrop-filter removed: blurring over a live canvas re-blurred every frame (major flicker).
   The nav gets a near-opaque base instead. */
@supports (display:flex){
  .botnav{background:rgba(9,7,22,.94);}
}

@property --ringp{syntax:'<percentage>';inherits:false;initial-value:0%;}
/* ── RANK CREST PROGRESS RING — conic ring fills as you approach next rank ── */
.rank-badge{position:relative;}
.rank-badge::before{content:'';position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(var(--gold-hot,#ffd97a) var(--ringp,0%),rgba(255,255,255,.07) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
  transition:--ringp .4s ease;pointer-events:none;}

/* ── XP BAR SHIMMER — a light sweep across the fill ── */
.xbt{position:relative;overflow:hidden;}
.xbf{position:relative;overflow:hidden;}
.xbf::after{content:'';position:absolute;top:0;bottom:0;width:34px;left:-50px;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);
  animation:xpShimmer 2.6s ease-in-out infinite;}
@keyframes xpShimmer{0%{transform:translateX(0);}60%,100%{transform:translateX(110vw);}}

/* ── CRIT FLOAT ── */

/* ── SCREEN SHAKE ── */
@keyframes shakeS{10%,90%{transform:translate3d(-1px,0,0);}20%,80%{transform:translate3d(2px,1px,0);}30%,50%,70%{transform:translate3d(-3px,-1px,0);}40%,60%{transform:translate3d(3px,1px,0);}}
@keyframes shakeB{10%,90%{transform:translate3d(-2px,1px,0);}20%,80%{transform:translate3d(4px,-2px,0);}30%,50%,70%{transform:translate3d(-6px,2px,0);}40%,60%{transform:translate3d(6px,-2px,0);}}
body.shake-s{animation:shakeS .38s cubic-bezier(.36,.07,.19,.97);}
body.shake-b{animation:shakeB .42s cubic-bezier(.36,.07,.19,.97);}

/* ── BOSS TILES — the final daf/perek of every masechet ── */
/* bossPulse removed */

/* ── POTION CHIP (hero) ── */
.pot-chip{display:inline-block;margin-top:.18rem;padding:.18rem .5rem;border-radius:99px;
  font-size:.54rem;font-weight:800;font-family:var(--fmono);white-space:nowrap;cursor:pointer;
  background:rgba(176,96,255,.14);border:1px solid rgba(176,96,255,.45);color:#c9a2ff;
  transition:transform .15s,box-shadow .2s;pointer-events:auto;}
.pot-chip:active{transform:scale(.94);}
.pot-chip.on{background:rgba(79,217,138,.13);border-color:rgba(79,217,138,.5);color:var(--green);
  cursor:default;box-shadow:0 0 12px rgba(79,217,138,.3);}
/* potGlow removed */

/* ── LEAGUE CHIPS (weekly leaderboard) ── */
.lg-brnz{background:rgba(176,108,64,.18);color:#d99a6c;}
.lg-silv{background:rgba(190,200,215,.14);color:#c8d2e0;}
.lg-gold{background:rgba(244,183,64,.16);color:var(--gold-hot);}
.lg-diam{background:rgba(34,224,255,.13);color:var(--cyan-hot);}
.lg-myth{background:linear-gradient(90deg,rgba(176,96,255,.2),rgba(255,138,226,.16));color:#e0b2ff;text-shadow:0 0 8px rgba(176,96,255,.6);}

/* ── REDUCED MOTION: everything calms down ── */
@media (prefers-reduced-motion:reduce){
  .xbf::after{animation:none;display:none;}
  body.shake-s,body.shake-b{animation:none;}
    .pot-chip.on{animation:none;}
}

/* ╔══════════════════════════════════════════════════════╗
   ║  v36 — HOLO-NEXUS: the futuristic command-deck skin  ║
   ╚══════════════════════════════════════════════════════╝ */

/* ── BODY: deep space + holographic grid floor + vignette ── */
body{
  background:
    radial-gradient(ellipse 90% 55% at 50% -12%,rgba(124,92,255,.13),transparent 62%),
    radial-gradient(ellipse 70% 45% at 92% 8%,rgba(0,229,255,.09),transparent 55%),
    var(--bg0);
  background-attachment:fixed;
}
::selection{background:rgba(0,229,255,.3);}

/* ── HERO → HOLO COMMAND PANEL: corner brackets + scanline ── */
.rank-hero{
  border-bottom:1px solid rgba(0,229,255,.22);
  background:linear-gradient(180deg,rgba(12,20,36,.5),rgba(7,12,22,.2));
}
.rank-hero::before{
  background:radial-gradient(ellipse 60% 100% at 80% 0%,rgba(0,229,255,.08),transparent 70%);
}
.rxpn{font-family:var(--fdisp);font-weight:700;text-shadow:0 0 18px rgba(0,229,255,.45);}
.rlvl{color:var(--cyan-hot);text-shadow:0 0 10px rgba(0,229,255,.5);}
.rank-badge{filter:drop-shadow(0 0 14px rgba(124,92,255,.5));}

/* ── XP BAR → SEGMENTED ENERGY CELL ── */
.xbt{height:9px;border-radius:3px;background:rgba(8,14,26,.9);border:1px solid var(--line2);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6),0 0 12px rgba(0,229,255,.08);}
.xbf{border-radius:2px;background:var(--grad-xp);box-shadow:0 0 14px rgba(0,229,255,.55),0 0 4px rgba(34,255,166,.8);}

/* ── BOTNAV → FLOATING NEON DOCK ── */
.botnav{
  left:10px;right:10px;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);
  height:62px;padding-bottom:0;border-radius:18px;
  border:1px solid rgba(0,229,255,.18);border-top-color:rgba(0,229,255,.3);
  background:rgba(7,11,22,.78);
  box-shadow:0 14px 44px rgba(0,0,0,.6),0 0 24px rgba(0,229,255,.07),inset 0 1px 0 rgba(255,255,255,.05);
}
.botnav::before{
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
  opacity:.7;border-radius:18px 18px 0 0;
}
body{padding-bottom:92px;}

/* ── BANNERS recolored to the holo language ── */
.dy-banner{
  background:linear-gradient(135deg,rgba(124,92,255,.16),rgba(0,229,255,.08));
  border-color:rgba(124,92,255,.4);}
.dy-banner:hover{border-color:rgba(167,139,255,.65);}
.dy-lbl{color:var(--violet-hot);}
.chest-banner{
  background:linear-gradient(135deg,rgba(255,200,61,.14),rgba(255,92,225,.07));
  border-color:rgba(255,200,61,.42);}

/* ── GENERIC CARD/BUTTON EDGE GLOW ── */
.scard,.q-card{
  border-color:var(--line)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03),0 4px 18px rgba(0,0,0,.3);}
.ibtn{font-family:var(--fmono);letter-spacing:.04em;border-color:var(--line2);
  transition:border-color .2s,box-shadow .2s,transform .12s;}
.ibtn:hover{border-color:var(--cyan);box-shadow:0 0 14px rgba(0,229,255,.18);}
.ibtn:active{transform:scale(.98);}

/* ── SECTION TITLES → holographic uppercase tech type ── */
h2,h3,.qttl{letter-spacing:.05em;}

/* ── DRAWER neon top edge ── */
#drawer{border-top:1px solid rgba(0,229,255,.3);
  box-shadow:0 -18px 60px rgba(0,0,0,.7),0 0 30px rgba(124,92,255,.08);}

/* ── FOCUS RING stays neon ── */

/* ── REDUCED MOTION ── */

/* ╔════════════════════════════════════════════════════════════╗
   ║  v37 — NOVA: new bones. Premium-futuristic architecture.   ║
   ║  Dimensional cards · big type · soft depth · refined dock  ║
   ╚════════════════════════════════════════════════════════════╝ */

/* ── BACKDROP now lives in the #sky fixed layer (mobile-safe full-bleed) ── */
body{padding-bottom:100px;background:var(--bg0);}

/* ── HERO → FLOATING COMMAND CARD ───────────────────────────
   No longer a full-bleed strip: a dimensional slab with mesh light,
   a 30% bigger crest, display-scale type, and a thick glowing bar. */
.rank-hero{
  margin:.85rem .85rem 0;padding:1.15rem 1.05rem .95rem;
  border:1px solid rgba(124,92,255,.22);border-bottom:1px solid rgba(124,92,255,.22);
  border-radius:var(--r5);overflow:hidden;
  background:
    radial-gradient(120% 140% at 0% 0%,rgba(124,92,255,.16),transparent 55%),
    radial-gradient(100% 120% at 100% 10%,rgba(0,229,255,.10),transparent 50%),
    linear-gradient(180deg,rgba(16,26,46,.92),rgba(9,14,26,.92));
  box-shadow:
    0 24px 60px -18px rgba(0,0,0,.8),
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 1px 0 rgba(255,255,255,.07) inset;
}
.rank-hero::before{background:none;}
.rank-hero::after{content:none;}
.rank-row{gap:.95rem;margin-bottom:.7rem;}

/* Crest — bigger, deeper, ring thickened */
.rank-badge{
  width:74px;height:74px;font-size:2.35rem;border-radius:24px;
  background:
    radial-gradient(120% 120% at 30% 20%,rgba(124,92,255,.32),transparent 60%),
    linear-gradient(160deg,rgba(0,229,255,.14),rgba(124,92,255,.10)),
    var(--surface2);
  border:1px solid rgba(167,139,255,.3);
  box-shadow:0 10px 28px -8px rgba(124,92,255,.45),inset 0 1px 0 rgba(255,255,255,.1);
  filter:none;
}
.rank-badge::before{
  inset:-6px;border-radius:29px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:3px;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  background:conic-gradient(from 230deg,var(--cyan) var(--ringp,0%),rgba(255,255,255,.08) 0);
}

/* Display-scale identity type */
.rlvl{font-family:var(--fbody);font-weight:700;font-size:.56rem;letter-spacing:.24em;color:var(--cyan-hot);}
.rttl{
  font-family:var(--fdisp);font-weight:800;font-size:1.5rem;line-height:1.12;
  letter-spacing:-.015em;text-transform:none;
  background:var(--grad-rank);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.rnxt{font-size:.68rem;color:var(--tx-mut);margin-top:.18rem;font-weight:500;}
.rmas{
  display:inline-block;margin-top:.3rem;padding:.18rem .55rem;border-radius:99px;
  font-size:.6rem;font-weight:600;color:var(--tx-soft);
  background:var(--glass);border:1px solid var(--line);
}
.rxpn{
  font-family:var(--fdisp);font-weight:800;font-size:1.95rem;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--tx);
  text-shadow:var(--hero-glow);
}
.rxpl{font-family:var(--fbody);font-weight:700;letter-spacing:.22em;font-size:.42rem;color:var(--tx-dim);}

/* Progress — one thick, smooth, glowing energy bar */
.xbt{height:13px;border-radius:99px;background:rgba(5,9,18,.92);border:1px solid rgba(39,64,106,.7);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.65);}
.xbt::after{content:none;}
.xbf{border-radius:99px;background:var(--grad-xp);
  box-shadow:0 0 18px rgba(0,229,255,.55),0 0 5px rgba(34,255,166,.9),inset 0 1px 0 rgba(255,255,255,.35);}
.xlb{font-size:.6rem;font-weight:600;}

/* Quest bar — glass row with a gradient icon tile */
.qbar{margin-top:.75rem;border-radius:var(--r4);padding:.6rem .7rem;
  background:var(--glass);border:1px solid var(--line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);}
.qico{width:38px;height:38px;display:grid;place-items:center;font-size:1.05rem;border-radius:13px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(255,200,61,.2),rgba(255,92,225,.1));
  border:1px solid rgba(255,200,61,.28);}
.qttl{font-weight:700;font-size:.76rem;}
.qsb{font-size:.62rem;}

/* ── HOME BANNERS → dimensional rows with icon squircles ── */
.dy-banner,.chest-banner{
  margin:.7rem .85rem 0;padding:.7rem .8rem;border-radius:var(--r4);
  box-shadow:0 14px 36px -14px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.05);
}
.dy-ico,.chest-ico{
  width:44px;height:44px;display:grid;place-items:center;font-size:1.3rem;border-radius:15px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(124,92,255,.24),rgba(0,229,255,.1));
  border:1px solid rgba(167,139,255,.3);
}
.chest-ico{background:linear-gradient(135deg,rgba(255,200,61,.26),rgba(255,92,225,.1));
  border-color:rgba(255,200,61,.35);}
.dy-main,.chest-main{font-family:var(--fdisp);font-weight:700;font-size:1rem;letter-spacing:-.01em;}
.dy-lbl{font-family:var(--fbody);font-weight:700;letter-spacing:.18em;font-size:.5rem;}
.chest-sub,.dy-status{font-weight:600;}

/* ── CARD SYSTEM — every list row becomes a floating slab ── */
.scard,.q-card{
  border-radius:var(--r4)!important;
  background:var(--surface-grad)!important;
  box-shadow:0 10px 30px -14px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04)!important;
  transition:transform .18s ease,border-color .2s,box-shadow .25s;
}
.q-card:active{transform:scale(.985);}

/* ── BUTTONS — confident pills ── */
.ibtn{border-radius:14px;font-family:var(--fbody);font-weight:700;letter-spacing:.01em;padding:.62rem .9rem;}
.ccls,.lu-cls{font-family:var(--fdisp);}

/* ── DOCK — refined: active tab gets a soft gradient pill ── */
.botnav{height:64px;border-radius:22px;border-color:rgba(39,64,106,.7);
  background:var(--nav-bg);}
.botnav::before{opacity:.5;border-radius:22px 22px 0 0;}
.bn-btn{position:relative;}
.bn-btn .bn-svg,.bn-btn .bn-lbl{position:relative;z-index:1;}
.bn-btn.on{color:var(--cyan-hot);}
.bn-btn.on .bn-svg{filter:drop-shadow(0 0 10px rgba(0,229,255,.7));}
.bn-center.on::after{content:none!important;}
.bn-btn.on::after{
  content:'';position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:52px;height:40px;border-radius:13px;z-index:0;bottom:auto;
  background:linear-gradient(135deg,rgba(124,92,255,.22),rgba(0,229,255,.14));
  border:1px solid rgba(0,229,255,.25);box-shadow:none;
}
.bn-lbl{font-family:var(--fbody);font-weight:700;font-size:.48rem;letter-spacing:.08em;}
.bn-svg-c{fill:var(--cyan-hot);filter:drop-shadow(0 0 8px rgba(0,229,255,.8));}

/* ── DRAWER — bigger radius + grabber handle ── */
#drawer{border-radius:28px 28px 0 0;border-top-color:rgba(0,229,255,.25);}
#drawer .dhead::before{
  content:'';display:block;width:44px;height:4px;border-radius:99px;
  margin:.15rem auto .55rem;background:rgba(255,255,255,.16);
}

/* ── HEADINGS ── */
h2{font-family:var(--fdisp);font-weight:700;letter-spacing:-.01em;}

@media (prefers-reduced-motion:reduce){
  .q-card:active{transform:none;}
}

/* ╔══════════════════════════════════════════════════════════╗
   ║  v38 — NOVA-2: COMPOSITION. New layout rhythm, not paint ║
   ╚══════════════════════════════════════════════════════════╝ */

/* ── HEADER: slim, quiet, premium ── */
header{padding-top:.5rem;padding-bottom:.45rem;}
.logo-he{display:none;}
.logo-name{
  font-family:var(--fdisp);font-weight:700;font-size:1.02rem;letter-spacing:-.01em;
  background:linear-gradient(100deg,#fff,#b8c8e0);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.auth-pill{border-radius:99px;background:var(--glass);border:1px solid var(--line);}

/* ── HERO: OPEN LAYOUT — no box. Identity floats on the backdrop. ── */
.rank-hero{
  margin:.3rem 0 0;padding:.9rem 1rem .8rem;
  border:none;border-radius:0;background:none;box-shadow:none;overflow:visible;
}
.rank-row{margin-bottom:.8rem;}
.rank-badge{width:64px;height:64px;font-size:2rem;}
.rttl{font-size:1.62rem;}
.rxpn{font-size:2.15rem;}
.rxpc{align-self:flex-start;padding-top:.15rem;}

/* Stat strip — game stats as a scannable chip row under the bar */
.stat-strip{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;margin-top:.6rem;}
.stat-strip .rmas{margin-top:0;}
#mwrap{display:contents;}
#mwrap>div{
  margin:0!important;padding:.2rem .55rem;border-radius:99px;
  background:var(--glass);border:1px solid var(--line);
  font-size:.58rem!important;
}
#mwrap .pot-chip{margin-top:0;}

/* Quest bar becomes the hero's grounding slab */
.qbar{margin-top:.7rem;background:var(--surface-grad);
  box-shadow:0 12px 30px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);}

/* ── TODAY GRID: twin square-ish tiles — the new page rhythm ── */
.tile-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:.65rem;
  margin:.75rem .85rem 0;align-items:stretch;
}
.tile-grid .dy-banner,.tile-grid .chest-banner{
  margin:0;min-height:128px;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
  gap:.5rem;padding:.75rem .75rem .65rem;border-radius:var(--r4);
}
.tile-grid .dy-ico,.tile-grid .chest-ico{
  width:40px;height:40px;border-radius:13px;font-size:1.15rem;
}
.tile-grid .dy-ico{color:var(--violet-hot);}
.tile-grid .dy-tx,.tile-grid .chest-tx{flex:1;min-width:0;width:100%;}
.tile-grid .dy-main,.tile-grid .chest-main{font-size:.95rem;white-space:normal;line-height:1.2;}
.tile-grid .dy-main .dy-he{display:block;font-size:.78rem;margin-top:.06rem;}
.tile-grid .dy-status{
  align-self:flex-end;font-size:.62rem;
  padding:.22rem .55rem;border-radius:99px;
  background:rgba(0,229,255,.1);border:1px solid rgba(0,229,255,.3);
}
.tile-grid .dy-banner.done .dy-status{background:rgba(34,255,166,.1);border-color:rgba(34,255,166,.32);}
.chest-lbl{color:var(--gold-hot);}
.chest-banner.opened .chest-ico{
  background:rgba(34,255,166,.12);border-color:rgba(34,255,166,.35);
  color:var(--green);font-family:var(--fdisp);font-weight:800;font-size:1.3rem;
}
.tile-grid .chest-sub{font-size:.58rem;line-height:1.35;}
.tile-grid .chest-shine{width:34px;}

/* ── SECTION EYEBROWS: tech-label treatment ── */
.nextup-section-lbl{
  font-family:var(--fbody);font-weight:800;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx-soft);
}

/* small screens: keep the grid two-up until very narrow */
@media (max-width:340px){.tile-grid{grid-template-columns:1fr;}}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v39 — THE LIVING SKY: the world reflects your learning.     ║
   ║  5 phases · curated palettes · sun/moon · stars · clouds     ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── SCENERY LAYER (fixed, full-bleed — mobile-safe) ── */
/* stars — visible at night/dusk only */
/* clouds — soft drifting puffs for daytime */

/* ════════ PHASE PALETTES — each fully curated for contrast ════════ */

/* ☾ NIGHT (default vars in :root are already the deep-space night) */
        /* moon high */

/* 🌆 DUSK — twilight indigo with an ember horizon */

/* 🌅 DAWN — violet lifting into peach */

/* ⛅ MORNING — real daylight: light surfaces, dark ink, deepened accents */
.sky-morn,.sky-bright{
  --tx:#102a45;--tx-soft:#2e4d6e;--tx-mut:#56759a;--tx-dim:#83a0bf;
  --cyan:#0077c2;--cyan-hot:#0096dd;--violet:#5d44e8;--violet-hot:#7461ff;
  --pink:#d8459a;--green:#0a9e6c;--green-hot:#0cbd83;
  --gold:#cf8a00;--gold-hot:#eda912;--amber:#d97400;--red:#d3304f;
  --grad-rank:linear-gradient(120deg,#0096dd 0%,#7461ff 45%,#d8459a 80%,#cf8a00 100%);
  --grad-xp:linear-gradient(90deg,#00a7e8,#0cbd83 55%,#eda912);
  --glass:rgba(16,42,69,.07);
  --hero-glow:0 1px 0 rgba(255,255,255,.6);
}
.sky-morn{
  --bg0:#bfe0f6;--bg1:#cde8fb;--bg2:#dceffd;--surface:#f1f8ff;--surface2:#e4f1fc;--raised:#ffffff;
  --line:#b1cde6;--line2:#86b2d8;
  --surface-grad:linear-gradient(180deg,rgba(255,255,255,.88),rgba(232,244,254,.88));
  --nav-bg:rgba(244,250,255,.85);--hud-bg:rgba(240,248,255,.92);
  --card:#f1f8ff;--card2:#e4f1fc;--bdr:#b1cde6;--bdr2:#86b2d8;--wt:#102a45;--mlt:#56759a;--mut:#56759a;
}

/* ☀️ BRIGHT MORNING — vivid blue, triumphant sun */
.sky-bright{
  --bg0:#a9dbff;--bg1:#bde5ff;--bg2:#d3eeff;--surface:#f6fbff;--surface2:#e9f5ff;--raised:#ffffff;
  --line:#a3cbe9;--line2:#74acd9;
  --surface-grad:linear-gradient(180deg,rgba(255,255,255,.92),rgba(235,247,255,.92));
  --nav-bg:rgba(248,252,255,.88);--hud-bg:rgba(244,251,255,.94);
  --card:#f6fbff;--card2:#e9f5ff;--bdr:#a3cbe9;--bdr2:#74acd9;--wt:#102a45;--mlt:#56759a;--mut:#56759a;
}

/* ── DAYLIGHT ADAPTATIONS — neon softens, ink sharpens (no clashes) ── */
.sky-morn body,.sky-bright body{background:transparent;}
.sky-morn .xbf,.sky-bright .xbf{box-shadow:0 0 12px rgba(0,150,221,.45),inset 0 1px 0 rgba(255,255,255,.5);}
.sky-morn .rank-badge,.sky-bright .rank-badge{
  background:linear-gradient(160deg,#ffffff,#e8f3ff);border-color:#9cc4e6;
  box-shadow:0 10px 26px -10px rgba(40,90,140,.45),inset 0 1px 0 #fff;}
.sky-morn .botnav,.sky-bright .botnav{border-color:rgba(116,172,217,.6);
  box-shadow:0 14px 40px rgba(50,100,150,.25),inset 0 1px 0 #fff;}
.sky-morn .bn-btn.on::after,.sky-bright .bn-btn.on::after{
  background:linear-gradient(135deg,rgba(93,68,232,.14),rgba(0,150,221,.12));border-color:rgba(0,150,221,.35);}
.sky-morn .dy-banner,.sky-bright .dy-banner{
  background:linear-gradient(135deg,rgba(93,68,232,.1),rgba(0,150,221,.07));border-color:rgba(93,68,232,.3);}
.sky-morn .chest-banner,.sky-bright .chest-banner{
  background:linear-gradient(135deg,rgba(207,138,0,.12),rgba(216,69,154,.06));border-color:rgba(207,138,0,.4);}
.sky-morn ::selection,.sky-bright ::selection{background:rgba(0,150,221,.25);}
.sky-morn .chest-banner.opened,.sky-bright .chest-banner.opened{
  background:linear-gradient(135deg,rgba(225,238,250,.8),rgba(214,232,247,.8));}

/* sky chip in the stat strip */
.sky-chip{cursor:pointer;pointer-events:auto;font-weight:700;color:var(--tx-soft);font-family:var(--fmono);}
.sky-chip:active{transform:scale(.95);}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v41 — A TRUER SKY: atmospheric gradients, real clouds,      ║
   ║  slow crossfades, daylight readability hardening             ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── FIVE SKIES, ALWAYS PRESENT — phase class crossfades them ── */
/* real atmospheric scattering: skies are LIGHTER at the horizon */

/* ── ATMOSPHERIC HAZE — depth without objects ── */

/* ── REAL CLOUDS — puff clusters with parallax depth ── */
/* far layer — smaller, hazier, slower: depth */
/* clouds exist faintly even at dusk/dawn — a real sky is never empty */

/* ── SCOPED SLOW CROSSFADE — only while the sky is shifting ── */

/* ── DAYLIGHT READABILITY HARDENING ──
   "Hot" accent variants are glow-tuned for dark skies; in daylight they must
   be ink. Darkened to ≥4.5:1 on the light surfaces. */
.sky-morn,.sky-bright{
  --cyan-hot:#006da8;
  --violet-hot:#5240d6;
  --green-hot:#0a8a60;
  --gold-hot:#9a6b00;
  --pink:#b53786;
  --tx-dim:#5e82a8;
}
.sky-morn .bn-btn,.sky-bright .bn-btn{color:#62809f;}
.sky-morn .bn-btn.on,.sky-bright .bn-btn.on{color:#005f93;}
.sky-morn .bn-svg-c,.sky-bright .bn-svg-c{fill:#0077b8;filter:drop-shadow(0 1px 2px rgba(20,60,100,.3));}
.sky-morn .pot-chip,.sky-bright .pot-chip{background:rgba(82,64,214,.1);border-color:rgba(82,64,214,.4);color:#4733c4;}
.sky-morn .pot-chip.on,.sky-bright .pot-chip.on{background:rgba(10,138,96,.1);border-color:rgba(10,138,96,.45);color:#077a54;}
.sky-morn .dy-status,.sky-bright .dy-status{background:rgba(0,109,168,.1);border-color:rgba(0,109,168,.35);color:#00608f;}
.sky-morn .chest-lbl,.sky-bright .chest-lbl{color:#9a6b00;}
.sky-morn .chest-main,.sky-bright .chest-main{color:#102a45;}
.sky-morn .dy-lbl,.sky-bright .dy-lbl{color:#5240d6;}
.sky-morn .xlb,.sky-bright .xlb{color:#41658c;}
.sky-morn .nextup-section-lbl,.sky-bright .nextup-section-lbl{color:#2e4d6e;}
.sky-morn .logo-name,.sky-bright .logo-name{background:linear-gradient(100deg,#11304f,#3a5d80);-webkit-background-clip:text;background-clip:text;}
.sky-morn header,.sky-bright header{background:rgba(240,248,255,.92);border-bottom-color:rgba(140,180,215,.5);}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v42 — FLOW: combo rails · notify bar · day-mode audit ·     ║
   ║  zero interruptions while learning · perf hardening          ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── COMBO RAILS — ambient edge bars, content-safe by construction ── */
.combo-rail{
  position:fixed;width:5px;border-radius:99px;z-index:950;pointer-events:none;
  top:calc(env(safe-area-inset-top,0px) + 72px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 92px);
  background:var(--glass);border:1px solid var(--line);
  opacity:0;transition:opacity .6s ease;
}
.rail-l{left:3px;}
.rail-r{right:3px;}
.combo-rail.on{opacity:1;}
.rail-fill{
  position:absolute;left:0;right:0;bottom:0;top:0;border-radius:inherit;
  transform-origin:bottom center;transform:scaleY(0);
  background:var(--rail-c,linear-gradient(180deg,var(--gold-hot),var(--gold)));
  box-shadow:0 0 8px var(--rail-g,rgba(255,200,61,.55));
}
.rail-tag{
  position:absolute;top:-26px;left:-3px;min-width:30px;padding:.14rem .3rem;
  border-radius:8px;text-align:center;
  font-family:var(--fdisp);font-weight:800;font-size:.6rem;
  background:var(--hud-bg);border:1px solid var(--line2);color:var(--gold-hot);
  box-shadow:0 4px 12px rgba(0,0,0,.3);
}
/* tier escalation — rails recolor as the chain deepens */
.combo-rail.t1{--rail-c:linear-gradient(180deg,#ffb070,#ff8a3c);--rail-g:rgba(255,150,80,.6);}
.combo-rail.t1 .rail-tag{color:#ff9a4d;}
.combo-rail.t2{--rail-c:linear-gradient(180deg,var(--cyan-hot),var(--cyan));--rail-g:rgba(0,200,255,.6);}
.combo-rail.t2 .rail-tag{color:var(--cyan-hot);}
.combo-rail.t3{--rail-c:linear-gradient(180deg,#c9a2ff,var(--violet));--rail-g:rgba(160,110,255,.65);}
.combo-rail.t3 .rail-tag{color:#c9a2ff;}
.combo-rail.t4{--rail-c:linear-gradient(180deg,#fff3c4,var(--gold));--rail-g:rgba(255,210,90,.75);}
.combo-rail.t4 .rail-tag{color:var(--gold-hot);}
.combo-rail.t5,.combo-rail.t6{--rail-c:linear-gradient(180deg,#ffd97a,#ff8ae2,#8ad2ff);--rail-g:rgba(255,160,220,.7);}
.combo-rail.t5 .rail-tag,.combo-rail.t6 .rail-tag{color:#ff8ae2;}

/* ── NOTIFY BAR — the single dedicated notification space ── */
#notify-bar{
  position:fixed;left:50%;transform:translate(-50%,-160%);
  top:calc(env(safe-area-inset-top,0px) + 6px);
  max-width:92vw;padding:.42rem .9rem;border-radius:99px;z-index:6000;
  font-family:var(--fbody);font-weight:600;font-size:.7rem;color:var(--tx);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  background:var(--hud-bg);border:1px solid var(--line2);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .45s cubic-bezier(.2,.9,.3,1.15);
  pointer-events:none;
}
#notify-bar.show{transform:translate(-50%,0);}
#notify-bar.tap{pointer-events:auto;cursor:pointer;border-color:var(--gold);
  box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 16px rgba(255,200,61,.25);}
#notify-bar.tap:active{transform:translate(-50%,0) scale(.97);}

/* legacy toast element retired */
#toast{display:none!important;}

/* ── DAY-MODE AUDIT — every remaining dark-tuned piece, readable in light ── */
/* Cards: glow auras soften to daylight shadows */
.sky-morn .nu-line-card,.sky-bright .nu-line-card,
.sky-morn .chz-card,.sky-bright .chz-card{
  border-color:var(--line2);
  box-shadow:0 12px 32px -14px rgba(40,90,140,.4),inset 0 1px 0 #fff;
}
.sky-morn .nu-line-card::after,.sky-bright .nu-line-card::after,
.sky-morn .chz-card::after,.sky-bright .chz-card::after{
  box-shadow:0 0 22px rgba(0,120,190,.18)!important;opacity:.5;
}
.sky-morn .chz-card,.sky-bright .chz-card{
  background-image:linear-gradient(160deg,rgba(82,64,214,.08),var(--surface) 60%,var(--bg2) 100%)!important;
}
.sky-morn .chz-lbl,.sky-bright .chz-lbl{color:#5240d6!important;}
/* Top bar internals */
.sky-morn .hdr-gear,.sky-bright .hdr-gear{color:#41658c;}
.sky-morn .hdr-gear svg,.sky-bright .hdr-gear svg{fill:#41658c;}
.sky-morn .auth-pill,.sky-bright .auth-pill{background:rgba(255,255,255,.7);}
.sky-morn .auth-uname,.sky-bright .auth-uname{color:#2e4d6e;}
.sky-morn .logo-img,.sky-bright .logo-img{box-shadow:0 2px 10px rgba(40,90,140,.3),0 0 0 1px rgba(140,180,215,.5);}
/* Center orb becomes a daylight button */
.sky-morn .bn-orb,.sky-bright .bn-orb{
  background:radial-gradient(circle at 35% 30%,#ffffff,#dcebf8 78%);
  border-color:rgba(0,119,184,.45);
  box-shadow:0 6px 16px rgba(40,90,140,.3),inset 0 2px 5px rgba(255,255,255,.8);
}
/* Notify bar + rails in daylight */
.sky-morn #notify-bar,.sky-bright #notify-bar{box-shadow:0 10px 26px rgba(40,90,140,.3);}
.sky-morn .rail-tag,.sky-bright .rail-tag{box-shadow:0 4px 10px rgba(40,90,140,.25);}
/* Drawer + reader chrome in daylight */
.sky-morn #drawer,.sky-bright #drawer{border-top-color:rgba(0,119,184,.35);
  box-shadow:0 -14px 50px rgba(40,90,140,.3);}
/* Drag states keep contrast */
.sky-morn .nu-line-card.dragging,.sky-bright .nu-line-card.dragging,
.sky-morn .chz-card.dragging,.sky-bright .chz-card.dragging{
  box-shadow:0 18px 44px -12px rgba(40,90,140,.5)!important;
}

@media (prefers-reduced-motion:reduce){
  .combo-rail{transition:none;}
  #notify-bar{transition:none;}
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v43 — DELIVERY: instant updates · bulletproof readability   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* Day header — maximum-strength so no legacy rule can win */
.sky-morn header,.sky-bright header{
  background:rgba(242,249,255,.94)!important;
  border-bottom-color:rgba(140,180,215,.55)!important;
}

/* Chazara + main cards: final word on day readability */
.sky-morn .nu-line-card,.sky-bright .nu-line-card,
.sky-morn .chz-card,.sky-bright .chz-card{
  background-color:#ffffff!important;
}
.sky-morn .nu-line-he,.sky-bright .nu-line-he{color:#102a45;}
.sky-morn .nu-line-en,.sky-bright .nu-line-en{color:#2e4d6e;}

/* Combo rails: wider + always-visible track so the meter reads instantly */
.combo-rail{width:7px;}
.rail-l{left:4px;}
.rail-r{right:4px;}
.combo-rail{background:rgba(127,127,127,.18);border:1px solid rgba(127,127,127,.25);}
.sky-morn .combo-rail,.sky-bright .combo-rail{background:rgba(16,42,69,.12);border-color:rgba(16,42,69,.2);}
.rail-tag{font-size:.64rem;min-width:34px;left:-2px;}

/* Notify bar: wrap to two lines — nothing ever cuts off screen */
#notify-bar{
  white-space:normal;line-height:1.35;text-align:center;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  border-radius:16px;max-width:94vw;
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v44 part 1 — breathing bars · banner readability · rails    ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── BREATHING BARS — every progress fill glows, breathes, drifts hue.
   12s cycle, ±12°, gentle — alive without distracting. ── */
.xbf,.q-fill,.rail-fill{
  /* barBreathe removed (filter-anim repaint storm) */
}
.q-fill{box-shadow:0 0 8px rgba(0,200,255,.3);}
/* stagger so the page doesn't pulse in unison */
.q-card:nth-child(2n) .q-fill{animation-delay:-6s;}

/* ── DAY BANNERS — "Learn" headers must be ink, not washed gold ── */
.sky-morn .screen-banner,.sky-bright .screen-banner{
  background:rgba(255,255,255,.6);
  border-color:var(--line2);
  box-shadow:inset 0 1px 0 #fff;
}
.sky-morn .screen-banner-ttl,.sky-bright .screen-banner-ttl{
  background:linear-gradient(100deg,#7a5500,#a36b00);
  -webkit-background-clip:text;background-clip:text;
}
.sky-morn .screen-banner-sub,.sky-bright .screen-banner-sub{color:#41658c;}
.sky-morn .screen-banner-ico svg,.sky-bright .screen-banner-ico svg{
  fill:#a36b00;filter:none;
}

/* ── RAILS — start below the header zone; tag beside the rail ── */
.combo-rail{top:calc(env(safe-area-inset-top,0px) + 86px);}
.rail-tag{top:-4px;left:10px;box-shadow:0 4px 12px rgba(0,0,0,.25);}

@media (prefers-reduced-motion:reduce){
  .xbf,.q-fill,.rail-fill{animation:none;}
}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v44 part 2 — THE MASTERS: Tanach & Halacha cards + reader   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* home cards are an order-able column */
#home-cards{display:flex;flex-direction:column;}
#home-cards>.nextup-wrap,#home-cards>.master-card{order:0;}

/* ── MASTER CARDS — same family as the learning card, own accents ── */
.master-card{
  margin:.75rem .85rem 0;padding:.8rem .85rem .7rem;border-radius:var(--r4);
  background:var(--surface-grad);border:1px solid var(--line);cursor:pointer;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .15s ease,border-color .25s;
  position:relative;z-index:1;
}
.master-card:active{transform:scale(.985);}
#tanach-card{border-color:rgba(34,255,166,.28);}
#halacha-card{border-color:rgba(255,159,67,.3);}
.mc-head{display:flex;align-items:center;gap:.65rem;}
.mc-ico{width:42px;height:42px;display:grid;place-items:center;font-size:1.2rem;border-radius:14px;flex-shrink:0;}
.mc-ico-tanach{background:linear-gradient(135deg,rgba(34,255,166,.2),rgba(0,229,255,.1));border:1px solid rgba(34,255,166,.32);}
.mc-ico-halacha{background:linear-gradient(135deg,rgba(255,159,67,.2),rgba(255,200,61,.1));border:1px solid rgba(255,159,67,.35);}
.mc-tx{flex:1;min-width:0;}
.mc-lbl{font-family:var(--fbody);font-weight:800;font-size:.52rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mut);}
#tanach-card .mc-lbl{color:var(--green-hot);}
#halacha-card .mc-lbl{color:var(--amber);}
.mc-now{font-family:var(--fdisp);font-weight:700;font-size:1rem;color:var(--tx);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-he{font-family:var(--fhe);font-size:.85rem;color:var(--tx-soft);direction:rtl;unicode-bidi:isolate;}
.mc-status{font-size:.62rem;font-weight:700;font-family:var(--fmono);white-space:nowrap;flex-shrink:0;
  padding:.22rem .55rem;border-radius:99px;background:var(--glass);border:1px solid var(--line);color:var(--cyan-hot);}
.mc-bar{height:7px;margin-top:.6rem;border-radius:99px;background:rgba(127,127,127,.16);overflow:hidden;}
.mc-fill{height:100%;border-radius:99px;/* barBreathe removed (filter-anim repaint storm) */}
.mc-fill-tanach{background:linear-gradient(90deg,var(--cyan),var(--green));box-shadow:0 0 8px rgba(34,255,166,.4);}
.mc-fill-halacha{background:linear-gradient(90deg,var(--gold),var(--amber));box-shadow:0 0 8px rgba(255,159,67,.4);}
.mc-prog{margin-top:.3rem;font-size:.58rem;color:var(--tx-mut);font-family:var(--fmono);}

/* ── TRACK READER SHEET ── */
#tov{position:fixed;inset:0;z-index:580;background:rgba(2,6,14,.55);opacity:0;pointer-events:none;transition:opacity .3s;}
#tov.on{opacity:1;pointer-events:auto;}
#tk-sheet{
  position:fixed;left:0;right:0;bottom:0;z-index:590;max-height:92vh;
  display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--surface),var(--bg1));
  border-top:1px solid var(--line2);border-radius:28px 28px 0 0;
  transform:translateY(102%);transition:transform .36s cubic-bezier(.32,.72,0,1);
  box-shadow:0 -16px 70px rgba(0,0,0,.5);
}
#tk-sheet.on{transform:translateY(0);}
.tk-head{padding:.5rem .9rem .6rem;border-bottom:1px solid var(--line);flex-shrink:0;}
.tk-grab{width:44px;height:4px;border-radius:99px;margin:.1rem auto .5rem;background:rgba(127,127,127,.35);}
.tk-head-row{display:flex;align-items:center;justify-content:space-between;}
.tk-title{font-family:var(--fdisp);font-weight:700;font-size:1rem;color:var(--tx);}
.tk-close{width:32px;height:32px;border-radius:10px;border:1px solid var(--line);background:var(--glass);color:var(--tx-soft);font-size:.85rem;cursor:pointer;}
.tk-pickers{display:flex;gap:.5rem;margin-top:.55rem;}
.tk-pickers select{
  flex:1;min-width:0;padding:.5rem .55rem;border-radius:12px;
  border:1px solid var(--line2);background:var(--surface2);color:var(--tx);
  font-family:var(--fbody);font-weight:600;font-size:.78rem;
}
.tk-nav-row{display:flex;align-items:center;gap:.6rem;margin-top:.55rem;}
.tk-nav{width:40px;height:38px;border-radius:12px;border:1px solid var(--line2);background:var(--glass);color:var(--tx);font-size:1.1rem;cursor:pointer;flex-shrink:0;}
.tk-nav:active{transform:scale(.94);}
.tk-ref-wrap{flex:1;text-align:center;min-width:0;}
.tk-ref{font-family:var(--fdisp);font-weight:700;font-size:.95rem;color:var(--tx);}
.tk-ref-he{font-family:var(--fhe);font-size:.8rem;color:var(--tx-soft);}
.tk-lines{flex:1;overflow-y:auto;padding:.7rem .9rem 1rem;-webkit-overflow-scrolling:touch;}
.tk-loading{text-align:center;color:var(--tx-mut);font-size:.75rem;padding:1.2rem 0;}
.tk-line{
  display:flex;gap:.6rem;padding:.6rem .2rem;border-bottom:1px solid var(--line);
  cursor:pointer;flex-wrap:wrap;
}
.tk-line:active{background:var(--glass);}
.tk-vn{flex-shrink:0;width:26px;text-align:center;font-family:var(--fhe);font-size:.78rem;color:var(--tx-dim);padding-top:.2rem;}
.tk-line-tx{flex:1;min-width:0;}
.tk-he{font-family:var(--fhe);font-size:1.12rem;line-height:1.85;direction:rtl;color:var(--tx);}
.tk-en{font-size:.8rem;line-height:1.6;color:var(--tx-soft);margin-top:.25rem;font-weight:300;}
.tk-mef{width:100%;margin-top:.5rem;padding:.55rem .6rem;border-radius:12px;background:var(--glass);border:1px solid var(--line);}
.tk-mef-item{padding:.4rem 0;border-bottom:1px dashed var(--line);}
.tk-mef-item:last-child{border-bottom:none;}
.tk-mef-name{font-size:.6rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--violet-hot);margin-bottom:.2rem;}
.tk-mef-he{font-family:var(--fhe);font-size:.95rem;line-height:1.75;direction:rtl;color:var(--tx-soft);}
.tk-foot{padding:.6rem .9rem calc(env(safe-area-inset-bottom,0px) + .7rem);border-top:1px solid var(--line);flex-shrink:0;}
.tk-done{
  width:100%;padding:.75rem;border-radius:16px;border:none;cursor:pointer;
  font-family:var(--fdisp);font-weight:700;font-size:.85rem;color:#0a2018;
  background:linear-gradient(135deg,var(--green-hot),var(--green));
  box-shadow:0 8px 24px -8px rgba(34,255,166,.5);
}
.tk-done:active{transform:scale(.98);}
.tk-done.done{background:var(--glass);color:var(--tx-soft);border:1px solid var(--line2);box-shadow:none;}
.tk-hint{text-align:center;margin-top:.4rem;font-size:.56rem;color:var(--tx-dim);}

/* home layout settings rows */
.ho-row{display:flex;align-items:center;justify-content:space-between;padding:.45rem .1rem;border-bottom:1px solid var(--line);}
.ho-row:last-child{border-bottom:none;}
.ho-name{font-size:.74rem;font-weight:600;color:var(--tx);}
.ho-btn{width:32px;height:30px;border-radius:9px;border:1px solid var(--line2);background:var(--glass);color:var(--tx-soft);cursor:pointer;margin-left:.35rem;}
.ho-btn:disabled{opacity:.3;cursor:default;}

/* daylight tuning for the new pieces */
.sky-morn .master-card,.sky-bright .master-card{box-shadow:0 12px 30px -14px rgba(40,90,140,.35),inset 0 1px 0 #fff;}
.sky-morn #tk-sheet,.sky-bright #tk-sheet{box-shadow:0 -14px 50px rgba(40,90,140,.35);}
.sky-morn .tk-done,.sky-bright .tk-done{color:#fff;background:linear-gradient(135deg,#0cbd83,#0a8a60);}
.sky-morn #tanach-card .mc-lbl,.sky-bright #tanach-card .mc-lbl{color:#0a8a60;}
.sky-morn #halacha-card .mc-lbl,.sky-bright #halacha-card .mc-lbl{color:#b35f00;}

/* ╔════════ v45 part 1 — COOLER FLOWING RAILS ════════╗ */
@keyframes railFlow{
  0%{background-position:50% 0%;}
  50%{background-position:50% 100%;}
  100%{background-position:50% 0%;}
}
.rail-fill{
  background:linear-gradient(180deg,#7df9ff,#a78bff 45%,#ff8ae2 90%);
  background-size:100% 260%;
  box-shadow:0 0 9px rgba(140,160,255,.6);
  animation:railFlow 9s ease-in-out infinite;
}
.rail-tag{color:var(--cyan-hot);}
/* tiers now shift the BASE hue of the flow instead of swapping flat colors */
.combo-rail.t1 .rail-fill{filter:hue-rotate(-30deg);animation-duration:8s;}
.combo-rail.t2 .rail-fill{animation-duration:7s;}
.combo-rail.t3 .rail-fill{filter:hue-rotate(25deg);animation-duration:6s;}
.combo-rail.t4 .rail-fill{box-shadow:0 0 14px rgba(180,170,255,.8);animation-duration:5s;}
.combo-rail.t5 .rail-fill,.combo-rail.t6 .rail-fill{
  box-shadow:0 0 18px rgba(255,160,230,.85);animation-duration:4s;
}
.combo-rail.t1 .rail-tag{color:#9db8ff;}
.combo-rail.t3 .rail-tag{color:#c9a2ff;}
.combo-rail.t4 .rail-tag{color:#d8c2ff;}
.combo-rail.t5 .rail-tag,.combo-rail.t6 .rail-tag{color:#ff9ae6;}
@media (prefers-reduced-motion:reduce){.rail-fill{animation:none;}}

/* ╔════════ v45 part 2 — MASTER MODE + LEARNING CARDS ════════╗ */
.learn-seg{display:flex;gap:.4rem;margin:.2rem .85rem .6rem;position:relative;z-index:1;}
.learn-seg button{
  flex:1;padding:.5rem .4rem;border-radius:13px;border:1px solid var(--line2);
  background:var(--glass);color:var(--tx-mut);font-family:var(--fbody);
  font-weight:700;font-size:.66rem;cursor:pointer;transition:all .2s;
}
.learn-seg button.on{
  background:linear-gradient(135deg,rgba(124,92,255,.2),rgba(0,229,255,.12));
  border-color:rgba(0,229,255,.4);color:var(--cyan-hot);
}
.sky-morn .learn-seg button.on,.sky-bright .learn-seg button.on{color:#005f93;}

/* learning-card internals */
.mc-learn{cursor:default;}
.mc-learn .mc-head{cursor:pointer;border-radius:12px;margin:-.2rem -.2rem .1rem;padding:.2rem;}
.mc-learn .mc-head:active{background:var(--glass);}
.mc-line{
  margin-top:.5rem;padding:.6rem .65rem;border-radius:14px;min-height:64px;
  background:var(--glass);border:1px solid var(--line);
}
.mc-line-he{font-family:var(--fhe);font-size:1.05rem;line-height:1.8;direction:rtl;color:var(--tx);}
.mc-line-en{font-size:.74rem;line-height:1.55;color:var(--tx-soft);margin-top:.3rem;font-weight:300;}
.master-card.line-done .mc-line{border-color:rgba(34,255,166,.35);}
.mc-ctrls{display:flex;align-items:center;gap:.4rem;margin-top:.55rem;}
.mc-btn{
  padding:.45rem .6rem;border-radius:11px;border:1px solid var(--line2);
  background:var(--glass);color:var(--tx-soft);font-family:var(--fbody);
  font-weight:700;font-size:.62rem;cursor:pointer;white-space:nowrap;
}
.mc-btn:active{transform:scale(.95);}
.mc-done-btn{
  flex:1;color:#0a2018;border:none;
  background:linear-gradient(135deg,var(--green-hot),var(--green));
  box-shadow:0 4px 14px -4px rgba(34,255,166,.45);
}
.sky-morn .mc-done-btn,.sky-bright .mc-done-btn{color:#fff;background:linear-gradient(135deg,#0cbd83,#0a8a60);}
.mc-count{font-family:var(--fmono);font-size:.62rem;color:var(--tx-mut);min-width:42px;text-align:center;}

/* sheet line ✓ buttons + done state */
.tk-ck{
  flex-shrink:0;width:30px;height:30px;border-radius:9px;align-self:flex-start;margin-top:.15rem;
  border:1px solid var(--line2);background:var(--glass);color:var(--tx-dim);
  font-size:.75rem;cursor:pointer;
}
.tk-ck.on{background:rgba(34,255,166,.16);border-color:rgba(34,255,166,.45);color:var(--green-hot);}
.tk-line.done .tk-he,.tk-line.done .tk-en{opacity:.55;}
.tk-line.done .tk-vn{color:var(--green-hot);}

/* default master picker */
.dm-pick-row{display:flex;flex-direction:column;gap:.4rem;}
.dm-pick{
  padding:.55rem .7rem;border-radius:12px;border:1px solid var(--line2);
  background:var(--glass);color:var(--tx-soft);font-family:var(--fbody);
  font-weight:700;font-size:.72rem;cursor:pointer;text-align:left;
}
.dm-pick.on{
  border-color:rgba(255,200,61,.5);color:var(--gold-hot);
  background:linear-gradient(135deg,rgba(255,200,61,.14),rgba(255,92,225,.06));
}
.sky-morn .dm-pick.on,.sky-bright .dm-pick.on{color:#7a5500;}

/* ╔════════ v46 — uniform swipe + tile management ════════╗ */
.mc-line{position:relative;overflow:hidden;cursor:grab;user-select:none;
  transform:translateZ(0);backface-visibility:hidden;}
.mc-line:active{cursor:grabbing;}
.mc-sw{
  position:absolute;top:50%;transform:translateY(-50%);
  padding:.3rem .7rem;border-radius:99px;font-family:var(--fbody);
  font-weight:800;font-size:.66rem;opacity:0;transition:opacity .15s;
  background:rgba(34,255,166,.18);border:1px solid rgba(34,255,166,.5);
  color:var(--green-hot);pointer-events:none;white-space:nowrap;
}
.sky-morn .mc-sw,.sky-bright .mc-sw{color:#0a8a60;background:rgba(12,189,131,.14);}
.mc-sw-r{left:10px;}
.mc-sw-l{right:10px;}
.mc-line.sw-r .mc-sw-r{opacity:1;}
.mc-line.sw-l .mc-sw-l{opacity:1;}
.tile-grid.solo{grid-template-columns:1fr;}

/* ╔══════════════════════════════════════════════════════════════╗
   ║  v47 — SMOOTH: flicker elimination + Lite effects mode       ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── EFFECTS: LITE — Settings toggle for older/hotter phones ──
   Turns off the ambient layers entirely (the canvas stops itself in JS)
   and stills the remaining decorative motion. Gameplay feedback
   (XP floats, confetti, card flings) stays. */
body.fx-lite .xbf{animation:none;}
body.fx-lite .xbf::after{display:none;}
body.fx-lite .chest-shine{display:none;}
body.fx-lite .chest-banner:not(.opened) .chest-ico{animation:none;}
body.fx-lite .q-claim-btn::after{display:none;}
body.fx-lite .bn-center::before{animation:none;opacity:.45;}
body.fx-lite .nu-line-card::after{animation:none;opacity:.5;}
body.fx-lite .rail-fill{animation:none;}

/* GPU-friendly hints for the layers that do keep moving */
.combo-rail .rail-fill{will-change:transform;}

/* ── Cross-sync (Link Kinyan) modal ── */
.cs-ov{position:fixed;inset:0;background:rgba(0,0,0,.62);z-index:9000;display:flex;align-items:flex-end;justify-content:center}
.cs-sheet{width:100%;max-width:480px;background:#15161d;color:#e9e9f0;border-radius:20px 20px 0 0;padding:20px 18px 28px;border:1px solid rgba(255,255,255,.08);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.cs-hd{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:1.05rem;margin-bottom:4px}
.cs-x{background:transparent;border:none;color:#9a9ab0;font-size:1rem;cursor:pointer;padding:4px 8px}
.cs-sub{font-size:.8rem;opacity:.62;margin-bottom:14px}

/* per-line review-count badge */
.sc-ct{font-size:.62rem;font-weight:800;color:var(--gold-hot,#ffcb45);min-height:.7rem;text-align:center;letter-spacing:.02em;opacity:.95;}

/* amud / daf chazara-count badges */
.dt-ct{font-size:.58rem;font-weight:800;color:var(--gold-hot,#ffcb45);letter-spacing:.02em;}
.dt-dct{font-size:.6rem;font-weight:800;color:var(--gold-hot,#ffcb45);margin-left:.25rem;}

/* unified amud badge: gold ×N pill when counted, quiet ✓ when rolled up */
.dt-ct{min-width:1.5rem;text-align:center;font-size:.62rem;font-weight:800;color:var(--ok,#59e6a2);}
.dt-ct.hot{color:#111;background:linear-gradient(135deg,#ffd97a,#ff8a3c);border-radius:999px;padding:.06rem .4rem;box-shadow:0 0 10px rgba(255,203,69,.35);}
.dt-dct{font-size:.6rem;font-weight:800;color:#111;background:linear-gradient(135deg,#ffd97a,#ff8a3c);border-radius:999px;padding:.05rem .38rem;margin-left:.25rem;box-shadow:0 0 10px rgba(255,203,69,.3);}

/* ═══════════ v60 MODERN SKIN — glassy cards, gradient accents ═══════════ */

/* Seder headers: floating glass bars with gradient title */
.realm-hdr{border:1px solid rgba(255,255,255,.08);border-radius:14px;margin:.5rem 0 .3rem;
  background:linear-gradient(120deg,rgba(28,30,48,.94),rgba(18,20,34,.9));}
.realm-en{background:linear-gradient(90deg,#ffd97a,#ff8a3c);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:800;}
.rmt{height:6px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden;}
.rmf{border-radius:999px;background:linear-gradient(90deg,#74efe0,#ffd97a);}

/* Daf tiles retired in v63 — the drawer uses daf-orbs now */

/* Chazara chips + toolbar buttons */
.rbtn{border-radius:999px;border:1px solid rgba(255,203,69,.3);
  background:linear-gradient(135deg,rgba(255,217,122,.12),rgba(255,138,60,.07));font-weight:700;}
.rbtn.on{background:linear-gradient(135deg,rgba(255,217,122,.22),rgba(255,138,60,.13));
  box-shadow:0 0 12px rgba(255,203,69,.15);}
.ibtn,.dbtn{border-radius:13px;transition:transform .1s ease;}
.ibtn:active,.dbtn:active{transform:scale(.97);}

/* Settings cards + reader lines pick up the same glass language */
.scard{border-radius:16px;border:1px solid rgba(255,255,255,.07);
  background:linear-gradient(165deg,rgba(255,255,255,.04),rgba(255,255,255,.01));}
.sc{border-radius:14px;}
.sc.abs{box-shadow:inset 0 0 14px rgba(84,209,140,.06);}

/* ═══════════ ORB INTERFACE (consolidated v63/v64/v67) ═══════════
   One authoritative definition: deep-3D look from v64, the v67 perf
   posture (no per-orb animation/filters/GPU layers) baked in directly. */
.realm-body{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;padding:.6rem .2rem;direction:rtl;}
#grid-c{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;direction:rtl;}
.orb{position:relative;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.32),rgba(255,255,255,.06) 34%,rgba(255,255,255,0) 55%),
    radial-gradient(circle at 68% 82%,rgba(120,180,255,.10),rgba(0,0,0,0) 55%),
    radial-gradient(circle at 50% 55%,rgba(255,255,255,.05),rgba(6,8,18,.55));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.5),inset 4px 6px 12px rgba(255,255,255,.07),0 4px 12px rgba(0,0,0,.35);
  transition:transform .12s ease;}
.orb:active{transform:scale(.94)}
.orb.odone{border-color:rgba(84,209,140,.35);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.45),inset 4px 6px 12px rgba(255,255,255,.06),0 0 14px rgba(84,209,140,.35);}
.orb.olive{border-color:rgba(255,203,69,.35);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.45),inset 4px 6px 12px rgba(255,255,255,.06),0 0 13px rgba(255,203,69,.33);}
.orb.oboss{border-color:rgba(255,138,60,.5);
  box-shadow:inset -8px -10px 18px rgba(0,0,0,.45),inset 4px 6px 12px rgba(255,255,255,.06),0 0 15px rgba(255,138,60,.4);}
.orb-ring{position:absolute;inset:0;pointer-events:none;}
.orb-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;width:82%;text-align:center;z-index:1}
.mas-orb{width:104px;height:104px}
.orb-he{font-size:.82rem;font-weight:800;line-height:1.05}
.orb-ct{font-size:.72rem;font-weight:800;color:var(--gold-hot,#ffcb45);direction:ltr;}
.orb-tag{font-size:.5rem;letter-spacing:.12em;opacity:.55;text-transform:uppercase}
.daf-orb{width:96px;height:96px}
.do-top{display:flex;align-items:center;gap:.28rem;justify-content:center}
.do-he{font-size:.88rem;font-weight:800}
.do-ct{font-size:.66rem;font-weight:800;color:var(--gold-hot,#ffcb45)}
.do-bot{display:flex;gap:.3rem;width:100%;justify-content:center;border-top:1px solid rgba(255,255,255,.1);padding-top:.18rem;margin-top:.1rem;direction:rtl;} /* א right, ב left */
.do-half{display:flex;flex-direction:column;align-items:center;gap:.05rem;min-width:2.1rem;padding:.05rem .15rem;border-radius:.5rem}
.do-half.h-done .do-sub{color:#54d18c}.do-half.h-live .do-sub{color:var(--gold-hot,#ffcb45)}
.do-half.do-x{opacity:.25}
.do-sl{font-size:.6rem;opacity:.7;font-weight:700}
.do-sub{font-size:.56rem;font-weight:800;direction:ltr;} /* keep "5/12" and ×N reading correctly */
.do-plus{width:1.25rem;height:1.25rem;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:linear-gradient(135deg,rgba(255,217,122,.25),rgba(255,138,60,.18));color:inherit;
  font-size:.8rem;font-weight:800;line-height:1;display:grid;place-items:center;padding:0}
.do-plus:active{transform:scale(.85)}
/* reader: plus button instead of checkbox */
.sc-chk{display:none !important}
.sc-plus{width:1.7rem;height:1.7rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(135deg,rgba(255,217,122,.22),rgba(255,138,60,.15));color:inherit;
  font-size:1rem;font-weight:800;display:grid;place-items:center;padding:0;flex-shrink:0}
.sc-plus.ck{background:linear-gradient(135deg,#54d18c,#74efe0);color:#0a1512;border-color:transparent}
.sc-plus:active{transform:scale(.85)}

/* layering hygiene — the drawer always wins; nothing paints behind the sheet */
#drawer{isolation:isolate;}
body:has(#drawer.on) .realm-body .orb{visibility:hidden;}

/* play-mode word bubbles */

/* v68: play-mode overlay — word orbs float over the app, pushable, never block taps */

/* ═══ PlayMaster · עת לשחק ═══ */
#playmaster{margin:1rem .7rem 5.5rem;}
/* retired styles */

/* v80: cascading side reel fidget */

/* v81: full-height reel + content gives it room */

/* ═══ v83 — sky theme picker (2×2 grid) ═══ */

/* ═══ v83 — DAYLIGHT CONTRAST PASS ═══
   The orb interface, realm bars, rings, and PlayMaster bubbles were all
   tuned on the night sky. These overrides give Morning/Bright Day proper
   ink: no light-on-light, no stray dark-navy bars. Dawn & dusk stay dark. */

/* progress rings: visible track, deep amber progress, forest done-ring */
.sky-morn .ring-track,.sky-bright .ring-track{stroke:rgba(16,42,69,.16);}
.sky-morn .ring-done,.sky-bright .ring-done{stroke:#0a8a60;}
.sky-morn .ring-halo,.sky-bright .ring-halo{stroke:rgba(194,94,0,.22);}
.sky-morn .ring-prog,.sky-bright .ring-prog{stroke:#c25e00;}

/* orbs: crisp glass with blue-shaded depth instead of washed-out haze */
.sky-morn .orb,.sky-bright .orb{
  background:
    radial-gradient(circle at 30% 24%,rgba(255,255,255,.96),rgba(255,255,255,.55) 36%,rgba(255,255,255,0) 56%),
    radial-gradient(circle at 50% 60%,rgba(224,240,252,.9),rgba(165,202,234,.95));
  border:1px solid rgba(52,110,160,.45);
  box-shadow:inset -8px -10px 18px rgba(64,116,166,.3),inset 4px 6px 12px rgba(255,255,255,.85),0 5px 14px rgba(40,90,140,.28);
}
.sky-morn .orb.odone,.sky-bright .orb.odone{border-color:rgba(10,138,96,.6);
  box-shadow:inset -8px -10px 18px rgba(64,116,166,.24),inset 4px 6px 12px rgba(255,255,255,.85),0 0 14px rgba(10,158,108,.4);}
.sky-morn .orb.olive,.sky-bright .orb.olive{border-color:rgba(176,120,0,.55);
  box-shadow:inset -8px -10px 18px rgba(64,116,166,.24),inset 4px 6px 12px rgba(255,255,255,.85),0 0 13px rgba(207,138,0,.35);}
.sky-morn .orb.oboss,.sky-bright .orb.oboss{border-color:rgba(200,100,0,.65);
  box-shadow:inset -8px -10px 18px rgba(64,116,166,.24),inset 4px 6px 12px rgba(255,255,255,.85),0 0 15px rgba(217,116,0,.45);}
.sky-morn .orb-tag,.sky-bright .orb-tag{opacity:.8;}
.sky-morn .do-bot,.sky-bright .do-bot{border-top-color:rgba(16,42,69,.18);}
.sky-morn .do-plus,.sky-bright .do-plus{border-color:rgba(154,107,0,.5);
  background:linear-gradient(135deg,rgba(207,138,0,.22),rgba(194,94,0,.16));}

/* realm/shelf bars: daylight glass instead of night-navy slabs */
.sky-morn .realm-hdr,.sky-bright .realm-hdr{
  background:linear-gradient(120deg,rgba(255,255,255,.92),rgba(228,241,252,.9));
  border-color:rgba(116,172,217,.6);
  box-shadow:0 3px 10px rgba(40,90,140,.14);}
.sky-morn .realm-en,.sky-bright .realm-en{
  background:linear-gradient(90deg,#8a5400,#c25e00);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.sky-morn .rmt,.sky-bright .rmt{background:rgba(16,42,69,.15);}
.sky-morn .rmf,.sky-bright .rmf{background:linear-gradient(90deg,#0a8a60,#c25e00);}
.sky-morn .realm-ico,.sky-bright .realm-ico{filter:drop-shadow(0 1px 3px rgba(40,90,140,.35));}

/* PlayMaster: inked bubbles, visible arena frame.
   Hebrew = warm amber on a warm-tinted bubble; English = deep navy on a
   cool-tinted bubble — two clearly different families, both dark enough
   to read on daylight. */

/* seder/shelf collapse chevron + counts pick up daylight ink via vars already */
/* rank crest + nav ring tracks: visible on daylight */
.sky-morn .rank-badge::before,.sky-bright .rank-badge::before{
  background:conic-gradient(from 230deg,var(--cyan) var(--ringp,0%),rgba(16,42,69,.14) 0);}
/* settings cards: inked glass instead of faint white-on-white */
.sky-morn .scard,.sky-bright .scard{
  border-color:rgba(116,172,217,.55);
  background:linear-gradient(165deg,rgba(255,255,255,.85),rgba(232,244,254,.8));}

/* ═══ v86 — zemanim (Zemanei Yosef) ═══ */
.zman-chip b{font-weight:800;}
.zmn-row{display:flex;align-items:baseline;gap:.6rem;padding:.42rem .35rem;border-bottom:1px solid rgba(255,255,255,.07);font-size:.72rem;}
.zmn-row:last-child{border-bottom:none;}
.zmn-he{font-family:var(--fhe);direction:rtl;min-width:7.2rem;}
.zmn-en{flex:1;color:#9aa0b5;font-size:.6rem;}
.zmn-t{font-family:var(--fmono);font-weight:800;}
.zmn-row.past{opacity:.45;}
.zmn-row.next{opacity:1;background:linear-gradient(90deg,rgba(255,203,69,.14),transparent);border-radius:8px;}
.zmn-row.next .zmn-t{color:#ffcb45;}

/* ═══ v88 — always-visible version badge in the top bar ═══ */
.app-ver{font-family:var(--fmono);font-size:.5rem;font-weight:700;color:var(--cyan-hot,#22e0ff);
  background:rgba(34,224,255,.12);border:1px solid rgba(34,224,255,.3);
  border-radius:99px;padding:.05rem .3rem;vertical-align:middle;margin-left:.25rem;letter-spacing:.03em;}

/* ═══ v88 — wider, clearer combo rails + prominent count tag ═══ */
.combo-rail{width:8px;}
.combo-rail.on{width:9px;box-shadow:0 0 12px var(--rail-g,rgba(255,200,61,.5));}
.rail-tag{top:-30px;min-width:36px;font-size:.72rem;padding:.2rem .38rem;
  box-shadow:0 4px 14px rgba(0,0,0,.4);}
.sky-morn .combo-rail.on,.sky-bright .combo-rail.on{background:rgba(255,255,255,.35);}