@font-face { font-family: 'TQ Text'; src: url('../fonts/FrankRuhlLibre.ttf') format('truetype'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'TQ UI'; src: url('../fonts/Rubik.ttf') format('truetype'); font-weight: 300 900; font-display: swap; }
:root {
  --blue: #1f4fb8; --blue-d: #163a8a; --navy: #12245a; --gold: #f6b70f; --gold-d: #c98a00;
  --green: #22a36b; --green-d: #17784e; --red: #e5484d; --parch: #fdf6e3; --ink: #1d2433; --muted: #6b7385;
  --c1: #2f6fde; --c2: #22a36b; --c3: #d9480f; --c4: #8e5cd9; --c5: #0e8f9c;
  --radius: 18px; --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'TQ UI', 'Rubik', 'Arial Hebrew', 'Segoe UI', Arial, sans-serif; color: var(--ink);
  background: linear-gradient(180deg, #cfe6ff 0%, #eaf4ff 35%, #fff8e6 100%) fixed; min-height: 100vh;
  direction: rtl; text-align: right; overscroll-behavior-y: none; user-select: none; -webkit-user-select: none;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
.he-text { font-family: 'TQ Text', 'Frank Ruehl CLM', 'David', 'Times New Roman', serif; direction: rtl; unicode-bidi: plaintext; }
.ico { display: inline-flex; width: 1.25em; height: 1.25em; vertical-align: middle; }
.ico svg { width: 100%; height: 100%; }
#app { max-width: 540px; margin: 0 auto; min-height: 100vh; }
.screen { min-height: 100vh; padding-bottom: calc(110px + var(--safe-b)); animation: fadein .25s ease; }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /* opacity only: a transform here would break position:fixed bars */

/* top bar */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--app-bar, rgba(18, 36, 90, .94)); color: #fff; backdrop-filter: blur(6px); box-shadow: 0 2px 10px rgba(0,0,0,.15); }
.brand { font-weight: 800; font-size: 17px; white-space: nowrap; }
.pills { display: flex; gap: 6px; flex: 1; justify-content: center; }
.pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(255,255,255,.14); border-radius: 999px; padding: 5px 10px; font-weight: 700; font-size: 15px; }
.pill.starsum .ico { color: var(--gold); }
.pill.streak.cold .ico { filter: grayscale(1) opacity(.6); }
.pill.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.25); } }
.tb-actions { display: flex; gap: 2px; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn .ico { width: 24px; height: 24px; }
.icon-btn:active { background: rgba(0,0,0,.08); }

/* unit banner */
.unit-banner { margin: 14px 14px 0; padding: 16px; border-radius: var(--radius); color: #fff; text-align: center;
  background: linear-gradient(135deg, var(--blue) 0%, var(--navy) 100%); box-shadow: 0 6px 0 var(--blue-d), 0 10px 24px rgba(18,36,90,.25); }
.unit-sub { opacity: .9; font-size: 15px; }
.unit-title { margin: 4px 0 10px; font-size: 34px; color: var(--gold); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.unit-progress { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.bar { flex: 1; height: 12px; background: rgba(255,255,255,.2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg, #ffd34d, var(--gold)); border-radius: 99px; transition: width .6s; }
.chazara-btn { margin-top: 12px; background: #fff; color: var(--blue-d); }
.chazara-btn.disabled { opacity: .6; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 22px; border-radius: 16px;
  font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.18); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0,0,0,.18); }
.btn.primary { background: var(--acc, var(--green)); color: #fff; box-shadow: 0 5px 0 var(--acc-d, var(--green-d)); }
.btn.big { width: 100%; min-height: 60px; font-size: 21px; }
.btn.danger { background: #fff; color: var(--red); border: 2px solid var(--red); box-shadow: none; margin-top: 18px; }
.cta-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 15; padding: 12px 16px calc(14px + var(--safe-b));
  background: linear-gradient(180deg, rgba(255,248,230,0), rgba(255,248,230,.95) 35%); max-width: 540px; margin: 0 auto; }

/* map */
.map { position: relative; margin: 10px 0 0; }
.map svg.path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.trail { fill: none; stroke: #b9cbe6; stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.trail-done { fill: none; stroke: var(--gold); stroke-width: 14; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.node-wrap { position: absolute; transform: translate(-50%, -38px); display: flex; flex-direction: column; align-items: center; width: 150px; }
.node { width: 78px; height: 78px; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative;
  font-size: 34px; font-weight: 900; color: #fff; transition: transform .1s; }
.node:active { transform: translateY(4px); }
.node.done { background: radial-gradient(circle at 35% 30%, #ffd75e, var(--gold)); box-shadow: 0 6px 0 var(--gold-d), 0 10px 18px rgba(0,0,0,.18); color: #7a4b00; }
.node.current { background: radial-gradient(circle at 35% 30%, #5b8ff0, var(--blue)); box-shadow: 0 6px 0 var(--blue-d), 0 0 0 8px rgba(47,111,222,.22); animation: pulse 1.6s infinite; }
.node.locked { background: #c7cfdc; box-shadow: 0 6px 0 #9aa5b8; color: #7d879a; }
.node.locked .ico { width: 30px; height: 30px; }
.node.siyum { width: 92px; height: 92px; }
.node.siyum .ico { width: 58px; height: 58px; }
.node.siyum.locked .ico { filter: grayscale(1) opacity(.55); }
.node.siyum.done { background: radial-gradient(circle at 35% 30%, #fff1b8, #ffd34d); box-shadow: 0 6px 0 var(--gold-d), 0 0 26px rgba(246,183,15,.8); }
.node.just-unlocked { animation: unlock .9s ease, pulse 1.6s 1s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 6px 0 var(--blue-d), 0 0 0 6px rgba(47,111,222,.25); } 50% { box-shadow: 0 6px 0 var(--blue-d), 0 0 0 14px rgba(47,111,222,.08); } }
@keyframes unlock { 0% { transform: scale(.4) rotate(-20deg); } 60% { transform: scale(1.2) rotate(6deg); } 100% { transform: none; } }
.node-letter { font-family: 'TQ Text', serif; line-height: 1; }
.node-label { margin-top: 6px; font-size: 13px; font-weight: 700; text-align: center; color: var(--navy); background: rgba(255,255,255,.85); padding: 3px 8px; border-radius: 10px; }
.stars { display: flex; gap: 2px; justify-content: center; color: #cfd5df; }
.stars .star { display: inline-flex; }
.stars .star.on { color: var(--gold); }
.stars.mini { margin-top: 6px; }
.stars.mini .star { width: 18px; height: 18px; }
.stars.big .star { width: 64px; height: 64px; }
.stars.big .star:nth-child(2) { transform: translateY(-14px); }
.shelf { margin: 20px 14px; padding: 14px; background: #fff; border-radius: var(--radius); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.shelf h3 { margin: 0 0 8px; }
.shelf-row { display: flex; gap: 12px; flex-wrap: wrap; }
.shelf-item { display: flex; flex-direction: column; align-items: center; }
.shelf-item .ico { width: 48px; height: 48px; }

/* intro */
.subbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: rgba(234,244,255,.95); backdrop-filter: blur(4px); }
.sub-title { font-weight: 700; color: var(--navy); flex: 1; }
.tag-chazara { background: var(--c4); color: #fff; font-weight: 800; border-radius: 99px; padding: 4px 12px; font-size: 14px; }
.intro-topic { margin: 6px 16px 10px; color: var(--navy); font-size: 24px; }
.parchment { margin: 0 14px; padding: 18px 18px 20px; background: var(--parch); border-radius: 14px; border: 2px solid #ead9a8;
  box-shadow: inset 0 0 30px rgba(201,138,0,.12), 0 6px 18px rgba(0,0,0,.08); }
.parchment-head { font-weight: 800; color: #8b5a2b; margin-bottom: 6px; font-size: 15px; }
.mishnah-text { font-size: 23px; line-height: 1.95; margin: 0; text-align: justify; user-select: text; -webkit-user-select: text; }
.expl, .comm { margin: 14px; background: #fff; border-radius: 14px; padding: 4px 16px; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.expl summary, .comm summary { min-height: 52px; display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--blue-d); cursor: pointer; list-style: none; }
.expl summary::-webkit-details-marker, .comm summary::-webkit-details-marker { display: none; }
.expl summary .ico, .comm summary .ico { color: var(--blue); width: 26px; height: 26px; }
.expl p, .comm p { font-size: 19px; line-height: 1.8; margin: 0 0 10px; }
.draft { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: #8a6d00; background: #fff4c2; border-radius: 8px; padding: 3px 8px; }
.bonus-note { margin: 0 14px; display: flex; align-items: center; gap: 8px; font-weight: 800; color: #7a4b00; background: #fff1c2; padding: 12px; border-radius: 14px; }

/* level */
.level-screen .subbar { background: transparent; }
.progress { flex: 1; height: 16px; background: #d6e0ef; border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--acc-l, #4cd08f), var(--acc, var(--green))); border-radius: 99px; transition: width .45s ease; }
.level-screen .pill.coins { background: #fff; color: var(--ink); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.mg-counter { margin: 4px 16px 0; color: var(--muted); font-size: 14px; }
.mg-title { margin: 2px 16px 6px; font-size: 26px; color: var(--navy); }
.mg-body { padding: 0 14px; }
.mg-body.enter { animation: slidein .3s ease; }
@keyframes slidein { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.mg-help { margin: 0 2px 12px; color: var(--muted); font-size: 16px; }
.card, .opt { display: block; width: 100%; text-align: right; background: #fff; border: 2px solid #dbe3ef; border-bottom-width: 5px; border-radius: 16px;
  padding: 14px 16px; margin: 0 0 10px; font-size: 21px; line-height: 1.6; min-height: 58px; transition: transform .08s, background .2s, border-color .2s; }
.card:active, .opt:active { transform: translateY(2px); border-bottom-width: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { border-radius: 999px; padding: 10px 16px; font-size: 19px; font-weight: 700; color: #fff; min-height: 48px; opacity: .55; border: 3px solid transparent; transition: all .15s; }
.chip.c1, .card.ok.c1 .tag { background: var(--c1); } .chip.c2, .card.ok.c2 .tag { background: var(--c2); } .chip.c3, .card.ok.c3 .tag { background: var(--c3); }
.chip.c4, .card.ok.c4 .tag { background: var(--c4); } .chip.c5, .card.ok.c5 .tag { background: var(--c5); }
.chip.sel { opacity: 1; transform: scale(1.08); border-color: #fff; box-shadow: 0 0 0 3px var(--navy), 0 4px 10px rgba(0,0,0,.2); }
.chip.done { opacity: .3; text-decoration: line-through; }
.match-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.match-card .tag:empty { display: none; }
.match-card .tag { color: #fff; font-family: 'TQ Text', serif; font-size: 15px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.card.ok, .opt.ok { background: #e6f8ee; border-color: var(--green); }
.opt.bad { background: #fdecec; border-color: var(--red); opacity: .7; }
.order-answer { list-style: none; counter-reset: s; padding: 0; margin: 0 0 14px; }
.order-answer .slot { counter-increment: s; position: relative; min-height: 50px; border: 2px dashed #b9c6da; border-radius: 14px; margin-bottom: 8px; padding: 10px 46px 10px 14px; font-family: 'TQ Text', serif; font-size: 20px; line-height: 1.6; background: rgba(255,255,255,.5); }
.order-answer .slot::before { content: counter(s); position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 50%; background: #c7d2e4; color: #fff; font-family: 'TQ UI', sans-serif; font-weight: 800; font-size: 15px; display: flex; align-items: center; justify-content: center; }
.order-answer .slot.filled { border-style: solid; border-color: var(--green); background: #e6f8ee; }
.order-answer .slot.filled::before { background: var(--green); }
.order-card.gone { display: none; }
.sentence { font-size: 26px; line-height: 2; background: var(--parch); border: 2px solid #ead9a8; border-radius: 16px; padding: 16px; margin: 0 0 16px; }
.blank { display: inline-block; min-width: 90px; text-align: center; border-bottom: 4px solid var(--blue); color: var(--blue); font-weight: 700; margin: 0 4px; border-radius: 4px; background: #e9f0ff; }
.blank.ok { border-color: var(--green); color: var(--green-d); background: #e6f8ee; }
.options .opt { font-size: 22px; text-align: center; }
.question { font-size: 22px; line-height: 1.7; font-weight: 700; margin: 0 2px 16px; color: var(--ink); }
.options.tf { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.options.tf .opt { font-family: 'TQ UI', sans-serif; font-weight: 800; min-height: 80px; font-size: 24px; margin: 0; }
.opt.tf-yes { color: var(--green-d); } .opt.tf-no { color: var(--red); }
.why { margin-top: 12px; background: #eef4ff; border-right: 5px solid var(--blue); border-radius: 12px; padding: 12px 14px; font-size: 18px; line-height: 1.7; }
.feedback { position: fixed; bottom: 0; left: 0; right: 0; max-width: 540px; margin: 0 auto; z-index: 15; padding: 14px 16px calc(16px + var(--safe-b));
  background: #d7f5e3; border-top: 3px solid #9ee3bd; transform: translateY(110%); transition: transform .28s cubic-bezier(.2,1.3,.4,1); }
.feedback.show { transform: none; }
.feedback.meh { background: #fff3cf; border-top-color: #f3d27a; }
.fb-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 22px; color: var(--green-d); }
.feedback.meh .fb-row { color: #8a5a00; }
bdi.num { direction: ltr; unicode-bidi: isolate; }
.gain { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #a06c00; }

/* reward */
.reward-card { margin: 26px 16px 0; background: #fff; border-radius: 24px; padding: 30px 18px 24px; text-align: center; box-shadow: 0 10px 30px rgba(18,36,90,.15); position: relative; }
.ribbon { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); background: var(--c4); color: #fff; font-weight: 800; padding: 6px 22px; border-radius: 99px; white-space: nowrap; }
.reward-card h1 { margin: 8px 0 18px; color: var(--navy); font-size: 26px; }
.reward-card .stars { margin: 6px 0 14px; }
.new-best { color: var(--c4); font-weight: 800; margin-bottom: 8px; }
.coin-total { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 40px; font-weight: 900; color: #a06c00; }
.coin-total .ico { width: 44px; height: 44px; }
.coin-total small { font-size: 15px; color: var(--muted); font-weight: 600; }
.bonus-line { margin-top: 8px; font-weight: 800; color: var(--c4); display: flex; gap: 6px; align-items: center; justify-content: center; }
.bonus-line.gold { color: #a06c00; }
.streak-line { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: #c2410c; background: #fff1e6; padding: 10px 16px; border-radius: 99px; }
.streak-line .ico { width: 28px; height: 28px; }
.streak-line.up .ico { animation: flame 1s ease-in-out 3; }
@keyframes flame { 50% { transform: scale(1.35) rotate(-6deg); } }
.pop { animation: pop .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
.stars.big .star.pop:nth-child(2) { animation: pop2 .4s cubic-bezier(.2,1.6,.4,1); }
@keyframes pop2 { 0% { transform: translateY(-14px) scale(.3); } 100% { transform: translateY(-14px) scale(1); } }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* siyum */
.siyum-screen { background: radial-gradient(circle at 50% 25%, #2b4fae 0%, #12245a 70%); color: #fff; position: relative; overflow: hidden; }
.siyum-glow { position: absolute; top: -60px; left: 50%; width: 520px; height: 520px; transform: translateX(-50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,211,77,.18) 0 10deg, transparent 10deg 20deg); border-radius: 50%; animation: spin 18s linear infinite; pointer-events: none; }
@keyframes spin { to { transform: translateX(-50%) rotate(360deg); } }
.siyum-card { position: relative; text-align: center; padding: 50px 22px 20px; }
.trophy-big .ico { width: 170px; height: 170px; filter: drop-shadow(0 8px 24px rgba(255,211,77,.6)); }
.trophy-big.drop { animation: drop 1s cubic-bezier(.2,1.4,.4,1); }
@keyframes drop { 0% { transform: translateY(-200px) scale(.5); opacity: 0; } 100% { transform: none; opacity: 1; } }
.siyum-card h1 { font-size: 46px; margin: 10px 0 0; color: var(--gold); text-shadow: 0 3px 0 rgba(0,0,0,.3); }
.hadran { font-size: 28px; margin: 8px 0; }
.siyum-sub { opacity: .85; margin: 0 0 12px; }
.siyum-trophy-note { opacity: .8; font-size: 15px; }
.siyum-screen .cta-bar { background: linear-gradient(180deg, rgba(18,36,90,0), rgba(18,36,90,.95) 35%); }

/* about / shabbos */
.about-card, .shabbos-card { margin: 14px; background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.08); line-height: 1.7; }
.src-detail { font-size: 13px; color: var(--muted); text-align: left; }
.muted { color: var(--muted); }
.ok-note { color: var(--green-d); font-weight: 700; }
.shabbos-screen { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #1b2a5c, #3b2a5c); }
.shabbos-card { text-align: center; max-width: 360px; }
.candles svg { width: 140px; height: 140px; }

/* fx */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.confetti { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--dx), 105vh) rotate(var(--rot)); } }
.fly-coin { position: fixed; width: 24px; height: 24px; }
.fly-coin svg { width: 100%; height: 100%; }
.toast { position: fixed; top: 74px; left: 50%; transform: translateX(-50%); z-index: 60; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 14px;
  font-weight: 700; box-shadow: 0 8px 20px rgba(0,0,0,.25); max-width: 90vw; text-align: center; animation: pop .3s; transition: opacity .4s; }
.toast.out { opacity: 0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }
@media (min-width: 541px) { body { background-attachment: fixed; } }

/* ===== Shas navigation ===== */
.topbar .icon-btn.back { color: #fff; }
.hero { text-align: center; padding: 18px 16px 6px; }
.hero h1 { margin: 0; font-size: 34px; color: var(--navy); }
.hero p { margin: 4px 0 0; color: var(--muted); }
.continue-card { display: flex; align-items: center; gap: 14px; width: calc(100% - 28px); margin: 14px; padding: 16px; border-radius: var(--radius); text-align: right;
  background: linear-gradient(135deg, #2bb673, var(--green)); color: #fff; box-shadow: 0 6px 0 var(--green-d), 0 10px 22px rgba(23,120,78,.25); }
.continue-card:active { transform: translateY(3px); box-shadow: 0 3px 0 var(--green-d); }
.cc-icon { width: 54px; height: 54px; border-radius: 50%; background: rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; flex: none; }
.cc-icon .ico { width: 28px; height: 28px; }
.cc-text { display: flex; flex-direction: column; gap: 2px; }
.cc-text b { font-size: 21px; } .cc-text small { font-size: 15px; opacity: .92; }
.section-title { margin: 18px 16px 8px; font-size: 20px; color: var(--navy); }
.seder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.seder-card { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 16px 14px; border-radius: var(--radius); color: #fff; text-align: right; min-height: 128px; box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.seder-card:active { transform: translateY(3px); }
.seder-card.s0 { background: linear-gradient(135deg, #3aa76d, #1f7a4d); } .seder-card.s1 { background: linear-gradient(135deg, #f0a92b, #c87b0a); }
.seder-card.s2 { background: linear-gradient(135deg, #d9568f, #a8336a); } .seder-card.s3 { background: linear-gradient(135deg, #4f7fe0, #2a54b0); }
.seder-card.s4 { background: linear-gradient(135deg, #9a6be0, #6b3fb5); } .seder-card.s5 { background: linear-gradient(135deg, #2bb3c0, #16808b); }
.seder-name { font-size: 30px; font-weight: 700; }
.seder-card small { opacity: .95; font-size: 14px; }
.seder-card .bar.small { background: rgba(255,255,255,.3); }
.bar.small { height: 8px; flex: none; width: 100%; }
.crumb { display: flex; align-items: center; gap: 6px; margin: 10px 14px 0; color: var(--muted); font-size: 14px; }
.crumb-home { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--blue); background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.list-title { margin: 8px 16px 0; font-size: 32px; color: var(--navy); }
.list-sub { margin: 6px 16px 10px; color: var(--muted); font-weight: 600; }
.rows { display: flex; flex-direction: column; gap: 10px; padding: 0 14px; }
.row-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 14px 16px; min-height: 70px; background: #fff; border-radius: 16px;
  border: 2px solid #dbe3ef; border-bottom-width: 5px; text-align: right; }
.row-card:active { transform: translateY(2px); }
.row-card.complete { border-color: #f3d27a; background: #fffaf0; }
.row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.row-name { font-size: 24px; font-weight: 700; color: var(--navy); }
.row-main small { color: var(--muted); }
.row-side { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 70px; flex: none; font-weight: 800; color: var(--blue-d); }
.row-side .ico { width: 28px; height: 28px; }
.perek-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 14px; }
.perek-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; min-height: 120px; background: #fff; border-radius: 16px; border: 2px solid #dbe3ef; border-bottom-width: 5px; }
.perek-card:active { transform: translateY(2px); }
.perek-card.started { border-color: #9cc0f5; }
.perek-card.done { border-color: #f3d27a; background: #fffaf0; }
.perek-num { font-size: 34px; font-weight: 800; color: var(--blue-d); line-height: 1; }
.perek-card small { color: var(--muted); font-size: 13px; }
.perek-card .ico { width: 26px; height: 26px; }
.perek-stars { display: inline-flex; align-items: center; gap: 2px; color: #a06c00 !important; font-weight: 800; }
.perek-stars .ico { width: 16px; height: 16px; color: var(--gold); }
.loading { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 80px 0; color: var(--muted); font-weight: 700; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #d6e0ef; border-top-color: var(--blue); animation: spin2 .8s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
.node-part { position: absolute; bottom: -4px; left: -6px; background: var(--navy); color: #fff; font-size: 12px; font-weight: 800; border-radius: 99px; padding: 2px 7px; border: 2px solid #fff; }
.node-label.he-text { font-family: 'TQ Text', serif; font-size: 14px; max-width: 150px; }
.no-expl { margin: 14px; display: flex; align-items: center; gap: 8px; color: var(--muted); background: #fff; border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.no-expl .ico { color: #9aa5b8; }
.center { text-align: center; }
.dl-status { font-weight: 700; color: var(--navy); margin-bottom: 6px; }
.dl-bar { background: #d6e0ef; margin-bottom: 14px; height: 12px; }
.dl-btn { width: 100%; }
.masechta-siyum { background: radial-gradient(circle at 50% 25%, #7b4fd6 0%, #2a1660 70%); }
.siyum-glow.two { animation-direction: reverse; animation-duration: 26s; opacity: .7; }
.trophy-row { display: flex; align-items: center; justify-content: center; gap: 4px; }
.trophy-row > .ico { width: 54px; height: 54px; color: var(--gold); filter: drop-shadow(0 0 10px rgba(255,211,77,.8)); }
.trophy-row.drop { animation: drop 1.1s cubic-bezier(.2,1.4,.4,1); }
.masechta-siyum .trophy-big .ico { width: 190px; height: 190px; }
.hadran.big { font-size: 32px; color: #ffe49a; }
.masechta-siyum .cta-bar { background: linear-gradient(180deg, rgba(42,22,96,0), rgba(42,22,96,.95) 35%); }
/* never let the top bar push the page wider than the phone */
#app { overflow-x: clip; }
.topbar { gap: 6px; padding: 10px 8px; }
.brand { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; }
.pills { flex: 1 1 auto; min-width: 0; gap: 4px; }
.pill { padding: 5px 8px; font-size: 14px; }
.tb-actions .icon-btn { width: 40px; }
@media (max-width: 370px) { .brand { display: none; } }
.row-side .bar.small, .perek-card .bar.small { background: #e3e9f3; }
.row-side .bar.small i, .perek-card .bar.small i { min-width: 0; }
.peirush summary, .comm summary { color: #6b3f12; }
.peirush summary .ico, .comm summary .ico { color: #b7791f; }
.peirush .pc, .comm .pc { font-size: 17px; line-height: 1.75; margin: 0 0 10px; }
.peirush .pc b, .comm .pc b { color: #1d2b4f; }
.peirush .whole, .peirush .fb-note, .comm .whole, .comm .fb-note { font-size: 12px; font-weight: 600; color: var(--muted); }
.peirush .whole, .comm .whole { margin-inline-start: auto; }
.peirush .fb-note, .comm .fb-note { background: #fff4c2; color: #8a6d00; border-radius: 8px; padding: 6px 10px; }

/* ---------- profiles & accounts ---------- */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 800; font-size: 16px; border: 2px solid rgba(255,255,255,.85); flex: none; }
.avatar.big { width: 64px; height: 64px; font-size: 30px; border-width: 3px; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.avatar.add { background: #e8eef9; color: var(--blue); border-color: #c8d6f0; }
.avatar.add .ico { width: 30px; height: 30px; }
.icon-btn.me-btn .avatar { width: 30px; height: 30px; }
.acct-screen .hero { padding-top: 34px; }
.acct-screen .center, .center { text-align: center; }
.small { font-size: 14px; }
.who-title { text-align: center; color: var(--navy); margin: 22px 16px 10px; font-size: 28px; }
.who-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 6px 14px; }
.who-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; background: #fff; border-radius: var(--radius);
  border: 2px solid #dbe3ef; border-bottom-width: 5px; text-align: center; min-height: 160px; }
.who-card:active { transform: translateY(2px); border-bottom-width: 3px; }
.who-card.current { border-color: var(--gold); background: #fffaf0; }
.who-card b { font-size: 19px; color: var(--navy); }
.who-card.add { border-style: dashed; justify-content: center; }
.who-kind { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; direction: rtl; }
.who-kind .ico { width: 16px; height: 16px; color: var(--blue); }
.choice-list { display: flex; flex-direction: column; gap: 12px; padding: 10px 14px; }
.choice-card { display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px; background: #fff; border-radius: var(--radius); text-align: right;
  border: 2px solid #dbe3ef; border-bottom-width: 5px; }
.choice-card:active { transform: translateY(2px); border-bottom-width: 3px; }
.choice-card > .ico { width: 40px; height: 40px; color: var(--blue); flex: none; }
.choice-card b { display: block; font-size: 19px; color: var(--navy); }
.choice-card small { display: block; color: var(--muted); margin-top: 2px; line-height: 1.4; }
.choice-card.primary { background: var(--green); border-color: var(--green-d); }
.choice-card.primary b, .choice-card.primary small, .choice-card.primary > .ico { color: #fff; }
.acct-card { margin: 14px; background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: 0 4px 14px rgba(0,0,0,.08); line-height: 1.6; display: flex; flex-direction: column; gap: 10px; }
.acct-card h1 { margin: 0; color: var(--navy); font-size: 26px; }
.acct-card p { margin: 0; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-weight: 700; color: var(--navy); }
.field-hint { color: var(--muted); font-size: 13px; line-height: 1.4; }
.inp { font: inherit; font-size: 20px; padding: 12px 14px; border: 2px solid #c8d6f0; border-radius: 14px; background: #f8fbff; width: 100%;
  user-select: text; -webkit-user-select: text; text-align: right; }
.inp[dir="ltr"] { text-align: left; }
.inp:focus { outline: none; border-color: var(--blue); background: #fff; }
.form-err { color: var(--red); font-weight: 700; min-height: 1.2em; }
.form-err:empty { display: none; }
.me-card { align-items: center; text-align: center; }
.me-user { color: var(--muted); font-weight: 700; }
.sync-status { font-size: 14px; color: var(--green-d); }
.sync-status.offline, .sync-status.error { color: var(--gold-d); }
.me-card .btn { width: 100%; }
.btn.switch-btn { background: #eef3fb; color: var(--navy); box-shadow: 0 4px 0 #c8d6f0; }
.hint-card summary { font-weight: 800; color: var(--navy); cursor: pointer; }
.hint-card ol { margin: 8px 0 0; padding-inline-start: 22px; }
.hint-card li { margin: 4px 0; }
.danger-zone .btn.danger { margin-top: 0; width: 100%; }
.field-err { color: var(--red); font-weight: 700; font-size: 14px; line-height: 1.4; }
.field-err:empty { display: none; }
.inp.bad { border-color: var(--red); }
/* split mishnayos: parts of the same mishnah share a dashed ring colour; label "משנה א – חלק 1" */
.node.multi { outline: 3px dashed var(--grp); outline-offset: 5px; }
.node.multi.g0, .node-sub.g0 { --grp: #8e5cd9; } .node.multi.g1, .node-sub.g1 { --grp: #0e8f9c; } .node.multi.g2, .node-sub.g2 { --grp: #d9480f; }
.node-part { white-space: nowrap; left: 50%; transform: translateX(-50%); bottom: -10px; font-size: 11px; background: var(--grp, var(--navy)); }
.node-sub { margin-top: 8px; font-size: 12px; font-weight: 800; color: #fff; background: var(--navy); padding: 2px 8px; border-radius: 10px; white-space: nowrap; background: var(--grp, var(--navy)); }

/* ---------- English (LTR) mode ---------- */
html[dir="ltr"] body { direction: ltr; text-align: left; }
html[dir="ltr"] .card, html[dir="ltr"] .opt, html[dir="ltr"] .row-card, html[dir="ltr"] .choice-card, html[dir="ltr"] .inp { text-align: left; }
html[dir="ltr"] .opt.he-text, html[dir="ltr"] .card.he-text { text-align: right; }
html[dir="ltr"] .order-answer .slot::before { right: auto; left: 10px; }
html[dir="ltr"] .why { border-right: 0; border-left: 5px solid var(--blue); }
html[dir="ltr"] .who-kind { direction: ltr; }
html[dir="ltr"] .back svg, html[dir="ltr"] .icon-btn.back svg { transform: scaleX(-1); }
html[dir="ltr"] .src-detail { text-align: left; }
.en-text { direction: ltr; text-align: left; unicode-bidi: plaintext; line-height: 1.6; }
.mishnah-text { direction: rtl; text-align: right; }
.question.pq { line-height: 1.6; }
.expl.translation summary { color: var(--blue-d); }
.fb-note { font-size: 13px; color: var(--muted); }

/* language toggle */
.lang-btn { font: inherit; font-weight: 800; font-size: 14px; border: 2px solid #dbe3ef; background: #fff; color: var(--navy); border-radius: 99px; padding: 6px 12px; cursor: pointer; min-height: 40px; }
.lang-btn.big { font-size: 18px; padding: 10px 22px; }
.welcome-lang { display: flex; justify-content: flex-end; padding: 12px 14px 0; }

/* difficulty */
.diff-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 14px; }
.acct-card .diff-picker { padding: 6px 0; }
.diff-card { font: inherit; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 12px 6px; border-radius: 16px;
  border: 2px solid #dbe3ef; border-bottom-width: 5px; background: #fff; cursor: pointer; color: var(--navy); }
.diff-card b { font-size: 17px; }
.diff-card small { font-size: 12px; color: var(--muted); line-height: 1.35; }
.diff-card.sel { border-color: var(--blue); background: #eef4ff; box-shadow: 0 0 0 3px rgba(60,120,240,.2); }
.diff-card.d-beginner.sel { border-color: #2ea86b; background: #eaf8f0; }
.diff-card.d-advanced.sel { border-color: #e0783a; background: #fff2e8; }
@media (max-width: 380px) { .diff-picker { grid-template-columns: 1fr; } }

/* about: credits / version / what's new / dedication */
.credits { text-align: center; }
.credits .built-by { font-weight: 800; font-size: 18px; }
.credits a { color: var(--blue-d); font-weight: 800; }
.cl-entry h3 { margin: 14px 0 4px; color: var(--blue-d); }
.cl-entry ul { margin: 0; padding-inline-start: 22px; line-height: 1.6; }
.dedication { margin: 18px 14px 28px; padding: 18px; border-radius: var(--radius); background: #fffaf0; border: 2px solid #f0dca8; text-align: center; }
.dedication h3 { margin: 0 0 10px; font-size: 18px; }
.ded-group { margin: 10px 0; }
.ded-head { margin: 0 0 2px; font-weight: 800; color: #8a6414; }
.ded-name { margin: 0; font-size: 18px; text-align: center; }
.topbar .lang-btn { font-size: 12px; padding: 3px 8px; min-height: 30px; border-width: 1.5px; }
html[dir="ltr"] .cc-icon svg { transform: scaleX(-1); }
@media (max-width: 420px) { .topbar .brand { display: none; } }
.rest-until { font-weight: 800; font-size: 18px; margin-top: 10px; }

/* ---------- v1.6 features ---------- */
.global-counter { margin: 12px 14px 0; padding: 10px 14px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(18,36,90,.1); display: flex; gap: 8px; align-items: center; font-weight: 600; color: var(--navy); }
.global-counter b { color: var(--green-d); font-size: 1.15em; }
.daily-card { display: flex; gap: 12px; align-items: center; width: calc(100% - 28px); margin: 10px 14px 0; padding: 12px 14px; border-radius: 16px; color: #fff; text-align: inherit;
  background: linear-gradient(135deg, #f08c00, #f6b70f); box-shadow: 0 4px 0 #c97a00; }
.daily-card.done { background: linear-gradient(135deg, #22a36b, #3cc68a); box-shadow: 0 4px 0 var(--green-d); }
.daily-card .dc-ico { font-size: 28px; } .daily-card .dc-text { display: flex; flex-direction: column; } .daily-card small { opacity: .95; }
.feature-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 14px 0; }
.fn-btn { background: #fff; border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 13px; font-weight: 600; color: var(--navy); box-shadow: 0 2px 6px rgba(18,36,90,.1); }
.fn-btn span { font-size: 22px; }
.feature-screen { padding: 0 0 120px; } .feature-screen > h1, .feature-screen > p, .feature-screen > section, .feature-screen > div:not(.cta-bar), .feature-screen > button { margin-left: 14px; margin-right: 14px; }
.trophy-group h2 { font-size: 17px; color: var(--navy); margin: 16px 0 8px; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.trophy-tile { background: #fff; border-radius: 14px; padding: 10px 6px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.trophy-tile .ti { font-size: 30px; } .trophy-tile.locked { opacity: .45; filter: grayscale(1); } .trophy-tile.have { border: 2px solid var(--gold); }
.new-trophies { margin-top: 12px; padding: 10px; border-radius: 14px; background: #fff7d6; border: 2px solid var(--gold); display: flex; flex-direction: column; gap: 6px; align-items: center; }
.badge-chip { display: flex; gap: 6px; align-items: center; font-weight: 700; } .badge-chip .bi { font-size: 24px; } .badge-chip.pop { animation: pop .5s ease both .9s; }
.lb-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; } .seg { display: inline-flex; background: #fff; border-radius: 999px; padding: 3px; box-shadow: 0 1px 4px rgba(0,0,0,.1); }
.seg-btn { padding: 7px 14px; border-radius: 999px; font-weight: 600; font-size: 14px; } .seg-btn.sel { background: var(--blue); color: #fff; }
.lb-list { list-style: none; padding: 0; margin: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.lb-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eef1f6; } .lb-row:last-child { border-bottom: 0; }
.lb-row.me { background: #e8f0ff; font-weight: 700; } .lb-rank { width: 28px; text-align: center; font-weight: 700; } .lb-name { flex: 1; } .lb-v { color: var(--green-d); }
.lb-me { font-weight: 600; color: var(--navy); min-height: 1em; } .groups-card { margin-top: 18px; } .group-form { display: flex; gap: 8px; margin-top: 10px; } .group-form .inp { flex: 1; }
.group-share { background: #fff7d6; padding: 10px; border-radius: 12px; font-weight: 600; } .group-leave { margin-top: 16px; }
.check-row { display: flex; gap: 10px; align-items: center; font-weight: 600; } .check-row input { width: 22px; height: 22px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin: 0 14px; }
.shop-tile { background: #fff; border-radius: 14px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.shop-tile.on { outline: 3px solid var(--green); } .shop-tile .btn.small { padding: 6px 10px; font-size: 13px; min-height: 0; } .shop-tile .tag { color: var(--green-d); font-weight: 700; }
.sh-face { font-size: 34px; } .sh-dot { width: 34px; height: 34px; border-radius: 50%; display: inline-block; }
.sh-theme { width: 100%; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.avatar.emoji { font-size: 1.15em; }
.surprise-box { margin-top: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gift-btn { background: #fff; color: var(--navy); border-radius: 16px; padding: 10px 18px; font-weight: 700; display: flex; gap: 8px; align-items: center; box-shadow: 0 4px 0 #d9dce6; }
.gift-btn .gift { font-size: 34px; display: inline-block; } .gift-btn.opening .gift { animation: shake .3s linear infinite; } .gift-btn.opened .gift { animation: pop .5s ease; }
.box-result { font-weight: 700; font-size: 18px; min-height: 1.2em; }
.speed-best { font-weight: 700; font-size: 18px; text-align: center; } .speed-bar { justify-content: space-between; } .speed-clock, .speed-score { font-size: 18px; }
.spark { position: fixed; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; z-index: 60; animation: spark .75s ease-out forwards; }
@keyframes spark { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.2); opacity: 0; } }
body.flash-good::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 55; background: radial-gradient(circle, rgba(34,163,107,.0) 40%, rgba(34,163,107,.28)); animation: flashg .5s ease-out forwards; }
@keyframes flashg { from { opacity: 1; } to { opacity: 0; } }
.feedback.show .gain { animation: pop .45s cubic-bezier(.2,1.6,.4,1); }
/* themes (cosmetic) */
body.theme-sunrise, .theme-prev-sunrise { background: linear-gradient(180deg, #ffd8a8 0%, #ffe8cc 40%, #fff4e6 100%) fixed; }
body.theme-forest, .theme-prev-forest { background: linear-gradient(180deg, #b2f2bb 0%, #d3f9d8 40%, #f4fce3 100%) fixed; }
body.theme-night, .theme-prev-night { background: linear-gradient(180deg, #1b2a5c 0%, #2b3f7a 45%, #47569a 100%) fixed; }
body.theme-royal, .theme-prev-royal { background: linear-gradient(180deg, #d0bfff 0%, #e5dbff 40%, #f3f0ff 100%) fixed; }
body.theme-gold, .theme-prev-gold { background: linear-gradient(180deg, #ffe066 0%, #fff3bf 45%, #fff9db 100%) fixed; }
.theme-prev-default { background: linear-gradient(180deg, #cfe6ff, #fff8e6); } .theme-prev-night { color: #fff; }
body.theme-night .list-title, body.theme-night .list-sub, body.theme-night .section-title, body.theme-night .hero, body.theme-night .trophy-group h2 { color: #fff; }
.feature-nav { grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); }
.collector-card { background: linear-gradient(135deg, #7048e8, #9775fa); color: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.collector-card b { font-size: 18px; }
.cl-set h2 { font-size: 17px; color: var(--navy); margin: 16px 14px 8px; } .cl-set h2 small { color: var(--muted); font-weight: 500; font-size: 13px; }
.cl-set.complete h2 { color: var(--green-d); } .album-screen .shop-grid { margin: 0 14px; }
.cl-tile { background: #fff; border-radius: 14px; padding: 8px 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; border: 2px solid #dee2e6; text-align: center; }
.cl-tile.missing .cl-art { filter: grayscale(1) opacity(.35); } .cl-art { font-size: 34px; line-height: 1; } .cl-name { font-weight: 700; font-size: 12px; } .cl-rar { font-size: 11px; color: var(--muted); }
.cl-tile.r-rare { border-color: #4dabf7; } .cl-tile.r-epic { border-color: #9775fa; } .cl-tile.r-legendary { border-color: #f6b70f; background: linear-gradient(180deg, #fff9db, #fff); }
.cl-tile.own.r-legendary { box-shadow: 0 0 12px rgba(246,183,15,.6); } .cl-tile .btn.small { padding: 5px 8px; font-size: 12px; min-height: 0; }
.cl-seder h3 { margin: 12px 14px 6px; color: var(--navy); font-size: 15px; }
.mas-albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin: 0 14px; }
.mas-album { background: #fff; border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; box-shadow: 0 1px 4px rgba(0,0,0,.08); font-size: 13px; }
.mas-album.started { border: 2px solid #74c0fc; } .mas-album.gold { background: linear-gradient(135deg, #ffe066, #fab005); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; margin: 0 14px; }
.sticker { position: relative; aspect-ratio: 3/4; border-radius: 14px; background: #fff; border: 4px solid var(--sc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.sticker.missing { border-style: dashed; opacity: .55; } .sticker .st-icon { font-size: 40px; } .sticker .st-title { font-size: 15px; font-weight: 700; text-align: center; }
.sticker .st-num { position: absolute; top: 4px; inset-inline-start: 6px; background: var(--sc); color: #fff; border-radius: 999px; padding: 0 7px; font-size: 12px; font-weight: 700; }
.gold-card { margin: 10px 14px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, #fff3bf, #fab005 60%, #e67700); color: #3b2500; display: flex; flex-direction: column; align-items: center; gap: 4px; box-shadow: 0 0 20px rgba(250,176,5,.6); }
.gold-card span { font-size: 44px; } .gold-card bdi { font-size: 22px; font-weight: 800; }
.pack-zone { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 14px 6px; }
.pack-card { background: #fff; border-radius: 16px; padding: 14px 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: 3px solid #dee2e6; }
.pack-card.r-rare { border-color: #4dabf7; } .pack-card.r-epic { border-color: #9775fa; } .pack-card.r-legendary { border-color: #f6b70f; }
.pack-card.flip { animation: flipin .6s ease; } @keyframes flipin { from { transform: rotateY(90deg) scale(.6); } to { transform: none; } }
.cl-art.big { font-size: 56px; }
.xp-bar { display: flex; align-items: center; gap: 8px; margin: 12px 14px 0; padding: 8px 12px; background: #fff; border-radius: 14px; box-shadow: 0 2px 8px rgba(18,36,90,.1); }
.xp-bar .bar { flex: 1; margin: 0; } .xp-bar .bar i { background: linear-gradient(90deg, #7048e8, #9775fa); } .xp-lv { color: #5f3dc4; white-space: nowrap; }
.quests-card { margin: 10px 14px 0; padding: 10px 12px; background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(18,36,90,.1); }
.quests-card h3 { margin: 4px 0 6px; font-size: 15px; color: var(--navy); }
.quest { display: grid; grid-template-columns: 24px 1fr 70px 36px; align-items: center; gap: 6px; font-size: 13px; padding: 3px 0; }
.quest .q-bar { height: 8px; background: #e9ecef; border-radius: 9px; overflow: hidden; } .quest .q-bar i { display: block; height: 100%; background: var(--green); }
.quest.done .q-text { text-decoration: line-through; color: var(--muted); } .q-rew { color: var(--gold-d); font-weight: 700; }
.near-goal { margin-top: 10px; padding: 8px 12px; border-radius: 12px; background: #e7f5ff; color: #1864ab; font-weight: 700; text-align: center; }
.next-mishnah { margin-top: 12px; width: 100%; display: flex; flex-direction: column; align-items: center; } .next-mishnah .teaser { font-size: 12px; opacity: .9; font-weight: 500; }
.level-up { margin-top: 10px; padding: 10px; border-radius: 14px; background: linear-gradient(135deg, #7048e8, #9775fa); color: #fff; font-weight: 800; font-size: 18px; text-align: center; }
.combo { margin-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: #ff922b; color: #fff; font-weight: 800; animation: pop .35s cubic-bezier(.2,1.8,.4,1); }
.combo.c4, .combo.c5 { background: #e8590c; transform-origin: center; font-size: 1.1em; } .combo.c6 { background: linear-gradient(90deg, #f03e3e, #f59f00); font-size: 1.2em; }
.big-emoji { font-size: 64px; } .parent-btn { margin-top: 8px; }
/* rabbi review (js/review-overrides.js) */
.checked-by { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: #145a2a; background: #d5f2dd; border-radius: 8px; padding: 3px 8px; }
.tq-report { margin: 8px 0; text-align: center; }
.tq-report-btn { font: inherit; font-size: 13px; background: none; border: none; color: #8a6d00; text-decoration: underline; cursor: pointer; }
.tq-report textarea { width: 100%; font: inherit; border-radius: 10px; border: 1px solid #ccc; padding: 8px; }
.tq-report-row { display: flex; gap: 8px; justify-content: center; margin-top: 6px; }
.tq-report-row button { font: inherit; border-radius: 10px; border: 1px solid #bbb; padding: 6px 14px; background: #fff; cursor: pointer; }
.tq-report-send { background: #2b3a67 !important; color: #fff; }
.tq-report-note { font-size: 13px; color: #8a3b00; } .tq-report-note.ok { color: #145a2a; }
/* ---------- narration (js/narrate.js) ---------- */
.narrate { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
.narrate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.15rem; padding: 14px 18px; border-radius: 18px;
  background: linear-gradient(135deg, #ffb347, #ff7e5f); color: #fff; font-weight: 700; box-shadow: 0 4px 0 #c45a3c; border: 0; }
.narrate-btn .nicon { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.25); font-size: 1.3rem; }
.narrate.playing .narrate-btn { animation: npulse 1.6s ease-in-out infinite; }
@keyframes npulse { 50% { transform: scale(1.02); } }
.narrate-bar { height: 6px; background: rgba(0,0,0,.08); border-radius: 3px; overflow: hidden; }
.narrate-bar i { display: block; height: 100%; width: 0; background: #ff7e5f; transition: width .2s; }
.narrate-stop { display: none; }
.narrate.pinned { position: fixed; left: 8px; right: 8px; max-width: 524px; margin: 0 auto; z-index: 16; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 8px; background: rgba(255,255,255,.97); border-radius: 16px; box-shadow: 0 4px 18px rgba(0,0,0,.22); }
.narrate.pinned .narrate-btn { flex: 1 1 auto; min-height: 44px; padding: 4px 12px; font-size: 1rem; animation: none; }
.narrate.pinned .narrate-btn .nicon { width: 36px; height: 36px; }
.narrate.pinned .narrate-stop { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; border-radius: 12px; border: 0; background: #e8eef7; color: #12245a; font-size: 1.1rem; cursor: pointer; }
.narrate.pinned .narrate-bar { order: 9; flex-basis: 100%; }
.narrate.pinned .narrate-opts { flex: 0 0 auto; }
.narrate.pinned .narrate-opts .he-orig, .narrate.pinned .narrate-opts .pron-sel { display: none; }
.narrate-opts { font-size: .9rem; text-align: center; }
.narrate-opts .speed-btn { margin: 0 .4rem; padding: .15rem .6rem; border-radius: 999px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.narrate-opts .he-orig { margin: 0 .4rem; }
.nw.hi { background: #ffe27a; border-radius: 4px; box-shadow: 0 0 0 2px #ffe27a; }
/* ---------- recite (js/recite.js) ---------- */
.recite { display: flex; flex-direction: column; gap: 10px; }
.recite-start b { font-size: 1.2rem; }
.recite-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.recite-live { min-height: 2.6em; max-height: 6.5em; overflow-y: auto; font-size: 1.3rem; line-height: 1.6; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.7); border: 1px solid rgba(0,0,0,.12); }
.recite-live:empty { display: none; }
.recite-recording { position: sticky; top: 64px; z-index: 5; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 14px; border-radius: 999px; background: #fff3f3; border: 2px solid #d62828; color: #d62828; font-weight: 700; font-size: 1.1rem; }
.rec-mic { display: inline-block; animation: recPulse 1.1s ease-in-out infinite; font-size: 1.4rem; }
.rec-time { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; }
@keyframes recPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: .6; } }
@media (max-width: 420px) { .recite-recording { top: 56px; font-size: 1rem; } .recite-live { font-size: 1.15rem; } }
.recite-score { font-size: 1.3rem; font-weight: 700; text-align: center; color: #b8860b; }
.recite-text { font-size: 1.25rem; line-height: 2; }
.rw.ok { color: #2a9d4b; }
.rw.near { color: #e8913a; text-decoration: underline dotted; }
.rw.missed, .rw.wrong, .rw.order { color: #d62828; font-weight: 700; }
.rw.missed { text-decoration: underline wavy; }
.rw-heard.near { color: #e8913a; }
.rw-heard.wrong, .rw-heard.order { color: #d62828; }
.rw-heard { color: #888; font-size: .75em; margin-inline-start: 3px; }
.recite-legend { font-size: .8rem; opacity: .7; text-align: center; }
.set-row { display: block; margin: 8px 0; }

/* ---------- top bar fit (360–430px): compact language chip, shrinking pills, no overlap ---------- */
.topbar { flex-wrap: nowrap; }
.topbar .pills { flex: 1 1 0; min-width: 0; overflow: hidden; justify-content: center; }
.topbar .pill { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
.topbar .pill b { overflow: hidden; text-overflow: ellipsis; }
.topbar .tb-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.topbar .lang-btn.compact { font-size: 12px; min-width: 34px; min-height: 30px; padding: 3px 6px; line-height: 1; }
@media (max-width: 430px) {
  .topbar { gap: 4px; padding: 8px 6px; }
  .topbar .pills { gap: 3px; }
  .topbar .pill { padding: 4px 6px; font-size: 13px; gap: 3px; }
  .topbar .pill .ico { width: 19px; height: 19px; }
  .topbar .pill { font-size: 14px; }
  .tb-actions .icon-btn { width: 34px; height: 34px; }
}
@media (max-width: 370px) { .topbar .pill { padding: 3px 5px; font-size: 12px; } .tb-actions .icon-btn { width: 30px; } }
/* narration: room to scroll the last words above the fixed bottom button; never lock scrolling */
html { scroll-padding-top: 70px; scroll-padding-bottom: calc(120px + var(--safe-b)); }
.screen:has(.narrate) { padding-bottom: calc(150px + var(--safe-b)); }

/* shop purchase preview (js/features.js previewModal) */
.pv-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(10,20,40,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.pv-box { background: #fff; color: var(--ink); border-radius: 22px; padding: 22px 18px; width: min(92vw, 380px); text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 10px; align-items: center; }
.pv-face { min-height: 140px; display: flex; align-items: center; justify-content: center; width: 100%; }
.pv-chip { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-avatar.big { width: 120px; height: 120px; font-size: 60px; border-width: 5px; }
.pv-name { font-size: 1.2rem; }
.pv-pack { font-size: 96px; }
.sh-theme.big { display: flex; align-items: center; justify-content: center; width: 220px; height: 130px; border-radius: 16px; font-size: 1.2rem; }
.pv-price { font-size: 1.05rem; font-weight: 700; margin: 0; } .pv-price svg { width: 18px; height: 18px; vertical-align: -3px; }
.pv-q { margin: 0; font-weight: 700; }
.pv-need { color: #c92a2a; font-weight: 700; margin: 0 0 6px; width: 100%; }
.pv-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.pv-actions .btn { min-width: 120px; }
.shop-tile { cursor: pointer; }
/* mini app mock in the colour preview */
.pv-mock { width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid #dde3ee; background: var(--parch); text-align: start; }
.pvm-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; background: var(--app-bar, rgba(18, 36, 90, .94)); color: #fff; font-weight: 800; }
.pvm-bar .avatar.big { width: 30px; height: 30px; font-size: 15px; border-width: 2px; box-shadow: none; }
.pvm-body { padding: 12px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.pvm-label { font-weight: 700; font-size: .9rem; color: var(--acc, var(--green-d)); }
.pvm-prog { flex: none; }
.pvm-btn { align-self: center; pointer-events: none; }
/* memorize-by-heart mode */
.recite-open-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0; }
.recite-open-btn { font-size: 1.05rem; font-weight: 700; border: 2px solid var(--acc, #2b59c3); }
.mem-badge { display: inline-flex; align-items: center; gap: 4px; background: #fff4d6; color: #7a5200; border-radius: 999px; padding: 3px 10px; font-size: .9rem; font-weight: 700; }
.map-recite { position: absolute; top: -6px; inset-inline-end: 16px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); font-size: 14px; line-height: 30px; padding: 0; cursor: pointer; }
.map-recite.mem { width: 44px; border-radius: 15px; inset-inline-end: 4px; background: #fff4d6; }
.recite-screen .recite-reward { margin-top: 14px; display: grid; gap: 10px; justify-items: center; }
.recite-ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 24px; }
/* dedications & donations */
.ded-today { margin: 0 14px 12px; padding: 10px 14px; border-radius: 14px; background: #fffaf0; border: 2px solid #f0dca8; text-align: center; }
.ded-today[hidden] { display: none; }
.ded-today-line { margin: 4px 0; font-size: 15px; color: #6b4a00; }
.ded-today-line b { font-size: 16px; color: #3d2a00; }
.support-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.support-btns .btn { flex: 1 1 140px; text-align: center; text-decoration: none; }
.adults-note { font-size: 13px; color: #7a5a00; margin: 8px 0 0; }
.ded-form { display: grid; gap: 8px; }
.ded-form .fl { font-weight: 700; margin-top: 6px; }
.ded-form input:not([type=radio]), .ded-form select { font: inherit; padding: 10px; border-radius: 10px; border: 1.5px solid #c8cfe0; width: 100%; box-sizing: border-box; }
.ded-periods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ded-opt { display: grid; justify-items: center; gap: 2px; padding: 10px 4px; border: 2px solid #d8dde8; border-radius: 12px; cursor: pointer; }
.ded-opt:has(input:checked) { border-color: var(--acc, #2b59c3); background: var(--acc-soft, #eef3ff); }
.ded-opt input { margin: 0; }
.ded-preview:empty { display: none; }
.ded-preview { padding: 8px; border-radius: 12px; background: #fffaf0; border: 1.5px dashed #f0dca8; text-align: center; }
.update-bar { position: fixed; inset-inline: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 9999; padding: 14px; border: 0; border-radius: 14px; background: var(--app-bar, #12245a); color: #fff; font: inherit; font-weight: 700; font-size: 16px; box-shadow: 0 6px 20px rgba(0,0,0,.3); cursor: pointer; }
/* ---------- trading cards ---------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cl-tile { all: unset; display: grid; gap: 4px; justify-items: center; cursor: pointer; }
.cl-tile .cl-rar { font-size: 11px; color: #667; }
.tcard { --fr: linear-gradient(145deg, #e9ecef, #adb5bd 45%, #f8f9fa 55%, #868e96); position: relative; width: 100%; aspect-ratio: 5 / 7; border-radius: 10px; padding: 4px; box-sizing: border-box;
  background: var(--fr); box-shadow: 0 3px 8px rgba(0,0,0,.25); overflow: hidden; container-type: inline-size; }
.tcard.r-rare { --fr: linear-gradient(145deg, #74c0fc, #1864ab 45%, #a5d8ff 55%, #1c7ed6); }
.tcard.r-epic { --fr: linear-gradient(145deg, #e5dbff, #7048e8 45%, #d0bfff 55%, #5f3dc4); }
.tcard.r-legendary { --fr: linear-gradient(145deg, #fff3bf, #e0a800 40%, #fff9db 52%, #b8860b 70%, #ffe066); box-shadow: 0 0 0 1px #b8860b, 0 4px 14px rgba(224,168,0,.55); }
.tc-frame { position: relative; height: 100%; border-radius: 7px; background: linear-gradient(180deg, var(--c2), #fff 70%); display: flex; flex-direction: column; overflow: hidden; }
.tc-top { display: flex; justify-content: space-between; align-items: center; padding: 2px 5px; font-size: max(7px, 5.6cqw); font-weight: 700; color: #fff; background: rgba(0,0,0,.35); }
.tc-set { opacity: .85; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62%; }
.tc-art { position: relative; flex: 1 1 auto; min-height: 0; margin: 3px 4px 0; border-radius: 5px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, var(--c2), var(--c1)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55), inset 0 0 18px rgba(0,0,0,.35); }
.tc-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-art.no-img::after { content: ''; position: absolute; inset: 18%; background: radial-gradient(circle, rgba(255,255,255,.55), transparent 65%); border-radius: 50%; }
.tc-title { text-align: center; padding: 3px 3px 0; line-height: 1.1; }
.tc-title b { display: block; font-size: max(9px, 9cqw); color: #1b1b2f; }
.tc-title small { display: block; font-size: max(7px, 5.6cqw); color: #555; }
.tc-line { margin: 2px 5px 5px; padding: 2px 4px; border-radius: 5px; background: rgba(255,255,255,.75); text-align: center; line-height: 1.15; font-size: max(7px, 5.6cqw); color: #3a2a00; }
.tc-line small { display: block; color: #8a6d00; font-size: max(6px, 5cqw); }
.tcard:not(.big) .tc-line span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-foil { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color-dodge; opacity: .55;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,.0) 30%, rgba(255,220,120,.85) 42%, rgba(160,240,255,.7) 50%, rgba(255,160,230,.7) 58%, transparent 70%);
  background-size: 250% 250%; animation: tcFoil 3.2s ease-in-out infinite; }
@keyframes tcFoil { 0% { background-position: 100% 0; } 50% { background-position: 0 100%; } 100% { background-position: 100% 0; } }
.tcard.back { background: linear-gradient(145deg, #ffe08a, #b8860b 45%, #fff3bf 55%, #9c6f00); }
.tc-back-art { height: 100%; border-radius: 7px; display: grid; place-items: center; align-content: center; gap: 4px; color: #ffe9a8;
  background: radial-gradient(circle at 50% 40%, #2b3a8c, #0d1440 75%), repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 6px, transparent 6px 12px); background-blend-mode: overlay; }
.tc-back-emblem { width: 58%; aspect-ratio: 1; display: block; }
.tc-back-art b { font-size: max(8px, 7cqw); letter-spacing: .04em; }
.tcard.big { width: min(78vw, 340px); }
.tc-zoom { display: grid; place-items: center; animation: tcPop .25s ease-out; }
@keyframes tcPop { from { transform: scale(.8); opacity: 0; } }
/* pack opening: 3D flip from the card back to the card */
.pack-flip { perspective: 1200px; width: min(70vw, 300px); margin: 0 auto; }
.pf-inner { position: relative; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.2,.7,.2,1); }
.pack-flip.open .pf-inner { transform: rotateY(180deg); }
.pf-face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pf-face .tcard.big { width: 100%; }
.pf-front { position: absolute; inset: 0; transform: rotateY(180deg); }
.pack-flip.open.r-legendary .pf-front, .pack-flip.open.r-epic .pf-front { filter: drop-shadow(0 0 18px rgba(255,214,102,.9)); }
.pack-wrap { width: 120px; margin: 0 auto; }
/* art window: 4:3 picture at the top, title + Torah line below (cards stay 5:7) */
.tc-art { flex: 0 0 auto; aspect-ratio: 4 / 3; }
.tc-title { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; }
.tcard:not(.big) .tc-line span { -webkit-line-clamp: 3; }

/* ---------- v1.9 full-bleed portrait cards: art fills the card, title + line on a translucent band ---------- */
.tcard.fb .tc-frame { display: block; background: linear-gradient(160deg, var(--c1), var(--c2)); container-type: inline-size; }
.tcard.fb .tc-art { position: absolute; inset: 0; margin: 0; border-radius: 0; aspect-ratio: auto; background: linear-gradient(160deg, var(--c1), var(--c2)); }
.tcard.fb .tc-top { position: absolute; top: 0; left: 0; right: 0; z-index: 2; background: linear-gradient(180deg, rgba(0,0,0,.5), rgba(0,0,0,0)); padding: 3px 6px 10px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.tcard.fb .tc-band { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 5px 5px 6px; background: linear-gradient(180deg, rgba(16,16,32,0), rgba(16,16,32,.62) 22%, rgba(16,16,32,.78));
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; flex-direction: column; gap: 2px; }
.tcard.fb .tc-title { padding: 0; flex: none; display: block; }
.tcard.fb .tc-title b { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.tcard.fb .tc-title small { color: #e9e4ff; }
.tcard.fb .tc-line { margin: 0; padding: 0 2px; background: none; color: #ffe9a8; text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.tcard.fb .tc-line small { color: #d9c88f; }
.tcard.fb:not(.big) .tc-line span { -webkit-line-clamp: 2; }
.tcard.fb .tc-art.mas-ph::before { content: attr(data-icon); position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 30%; font-size: 42cqw; opacity: .9; filter: drop-shadow(0 4px 10px rgba(0,0,0,.35)); }
.tcard.fb .tc-art.mas-ph:not(.no-img)::before { display: none; }
.tc-dup { position: absolute; z-index: 3; top: 16%; inset-inline-end: 4px; background: #e8590c; color: #fff; border-radius: 99px; padding: 1px 6px; font-weight: 800; font-size: max(9px, 7cqw); box-shadow: 0 1px 4px rgba(0,0,0,.4); }
.tc-acts { display: grid; gap: 8px; margin-top: 12px; width: min(78vw, 340px); background: #fff; border-radius: 14px; padding: 10px; text-align: center; }
.tc-acts p { margin: 0; font-weight: 700; }
.mc-win { display: grid; justify-items: center; gap: 6px; margin: 12px auto 0; }
.mc-win .mc-card { width: 150px; animation: tcPop .4s ease-out; }
.friends-btn { margin: 10px auto 0; display: flex; }
/* friends + trades */
.fr-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid #eee; flex-wrap: wrap; }
.fr-row b { flex: 1 1 auto; } .fr-row small { flex: 1 1 100%; order: 2; margin-top: -6px; }
.fr-add .inp { width: 100%; box-sizing: border-box; margin: 6px 0; }
.acct-card.warn { background: #fff4e6; border: 1px solid #ffa94d; }
.offer-head { display: flex; justify-content: space-between; gap: 8px; }
.offer-st { font-size: 12px; font-weight: 600; color: #667; }
.offer.st-accepted .offer-st { color: #2b8a3e; } .offer.st-failed .offer-st, .offer.st-declined .offer-st { color: #c92a2a; }
.offer-sides { display: grid; grid-template-columns: 1fr auto 1fr; gap: 6px; align-items: center; margin: 8px 0; }
.offer-arrow { font-size: 22px; }
.offer-side > small { display: block; text-align: center; font-weight: 700; margin-bottom: 4px; }
.tr-row { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.tr-row .tr-card { width: 70px; }
.tr-card { position: relative; cursor: pointer; }
.tr-card .tr-n { position: absolute; top: -4px; inset-inline-start: -4px; background: #1971c2; color: #fff; border-radius: 99px; padding: 0 6px; font-size: 12px; z-index: 4; }
.tr-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 8px; }
.tr-pick .tr-card { display: grid; gap: 3px; justify-items: center; border-radius: 12px; padding: 3px; border: 3px solid transparent; }
.tr-pick .tr-card.sel { border-color: #2b8a3e; background: #ebfbee; }
.tr-cnt { font-size: 11px; font-weight: 700; }
.row-btns { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.check-field { display: flex; gap: 8px; align-items: center; }
/* v1.9 LANDSCAPE cards (16:10): the 16:9 art fills the whole card; 2 per row on phones */
.tcard, .tcard.fb { aspect-ratio: 16 / 10; }
.card-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
.tcard.big { width: min(92vw, 440px); }
.tc-acts { width: min(92vw, 440px); box-sizing: border-box; }
.tcard.fb .tc-top { font-size: max(8px, 3.6cqw); }
.tcard.fb .tc-title b { font-size: max(10px, 5.4cqw); }
.tcard.fb .tc-title small, .tcard.fb .tc-line { font-size: max(8px, 3.6cqw); }
.tcard.fb .tc-line small { font-size: max(7px, 3.2cqw); }
.tcard.fb:not(.big) .tc-line span { -webkit-line-clamp: 1; }
.tcard.fb .tc-band { padding: 4px 6px 5px; }
.tcard.fb .tc-dup { top: 22%; font-size: max(9px, 4.4cqw); }
.tcard.fb .tc-art.mas-ph::before { font-size: 24cqw; padding-bottom: 18%; }
.tc-back-emblem { width: auto; height: 58%; }
.mc-win .mc-card { width: 240px; }
.tr-row .tr-card { width: 120px; }
.tr-pick { grid-template-columns: repeat(2, 1fr); }
.pack-card .tcard.big, .pf-face .tcard.big { width: 100%; }
.pack-flip { width: min(88vw, 420px); }
/* not owned yet: the real art, faded, not tappable */
.cl-tile.missing { cursor: default; pointer-events: none; }
.cl-tile.missing .tcard { opacity: .55; filter: saturate(.35) brightness(1.08); }
.cl-tile.missing .tcard::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 5; pointer-events: none;
  background: color-mix(in srgb, var(--blue) 55%, #ffffff); mix-blend-mode: color; }
.cl-tile.missing .tcard::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 5; pointer-events: none;
  background: color-mix(in srgb, var(--blue) 25%, #ffffff); opacity: .35; }
.cl-tile.missing .tcard .tc-foil { display: none; }
/* level picker before playing + badge during play */
.level-bar { margin: 10px 12px; padding: 10px; background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.level-bar-title { font-weight: 800; text-align: center; margin-bottom: 6px; }
.diff-picker.compact .diff-card { padding: 8px 4px; }
.diff-picker.compact .diff-card small { display: none; }
.diff-badge { flex: none; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 99px; background: #eef4ff; color: var(--blue); border: 2px solid var(--blue); white-space: nowrap; }
.diff-badge.d-beginner { background: #eaf8f0; color: #1d7a4c; border-color: #2ea86b; }
.diff-badge.d-advanced { background: #fff2e8; color: #b8541a; border-color: #e0783a; }
.diff-picker.compact { grid-template-columns: repeat(3, 1fr) !important; padding: 0; }

/* ---------- masechta / perek intros + summaries (js/intros.js) ---------- */
.tqi-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(18, 36, 90, .55); display: flex; align-items: center; justify-content: center; padding: 16px; animation: tqiFade .2s ease; }
.tqi-card { background: var(--parch); color: var(--ink); border-radius: var(--radius); max-width: 520px; width: 100%; max-height: 88vh; overflow: auto; padding: 18px 18px 14px; box-shadow: 0 14px 40px rgba(0,0,0,.3); border-top: 6px solid var(--gold); }
.tqi-card.summary { border-top-color: var(--green); }
.tqi-kicker { color: var(--muted); font-size: .85rem; font-weight: 600; }
.tqi-title { margin: 2px 0 10px; color: var(--navy); font-size: 1.35rem; }
.tqi-body { margin: 0; padding: 0; }
ul.tqi-body { padding-inline-start: 1.1em; }
.tqi-line { margin: 0 0 10px; line-height: 1.55; font-size: 1.05rem; }
.tqi-t { display: block; }
.tqi-src { display: block; color: var(--muted); font-size: .72rem; margin-top: 2px; }
.tqi-draft { font-size: .75rem; color: var(--gold-d); background: #fff4d1; border-radius: 8px; padding: 4px 8px; margin: 6px 0 10px; display: inline-block; }
.tqi-go { width: 100%; margin-top: 6px; }
.tqi-row { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.tqi-btn { font-size: .9rem; padding: 6px 14px; }
@keyframes tqiFade { from { opacity: 0 } to { opacity: 1 } }
button.diff-badge { font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.diff-pop { background: #fff; border-radius: 18px; padding: 14px; width: min(92vw, 420px); display: grid; gap: 10px; text-align: center; }
.diff-pop h2 { margin: 0; font-size: 18px; }
.level-bar.home { margin: 10px 14px; }
/* the current level, big and colour-coded: beginner green, medium orange, advanced red */
.level-row { position: sticky; top: 0; z-index: 30; display: flex; justify-content: center; padding: 6px 12px; background: inherit; }
.diff-badge, button.diff-badge { display: inline-flex; align-items: baseline; gap: 6px; font-size: 20px; font-weight: 800; padding: 8px 20px; border-radius: 99px; border: 3px solid; color: #fff; box-shadow: 0 3px 0 rgba(0,0,0,.18); }
.diff-badge.d-beginner { background: #2f9e44; border-color: #237032; color: #fff; }
.diff-badge.d-medium { background: #f08c00; border-color: #b86b00; color: #fff; }
.diff-badge.d-advanced { background: #e03131; border-color: #a51d1d; color: #fff; }
.diff-badge .lv-word { font-weight: 600; font-size: 17px; }
.diff-badge b { font-size: 22px; }
.diff-badge .lv-change { font-size: 13px; font-weight: 600; opacity: .9; margin-inline-start: 4px; }
/* difficulty colour (live from body[data-diff]): beginner green, medium blue, advanced red */
body { --lvl: #1f6fd6; --lvl-d: #164f9c; --lvl-l: #e7f0ff; }
body[data-diff=beginner] { --lvl: #2f9e44; --lvl-d: #237032; --lvl-l: #e9f8ec; }
body[data-diff=advanced] { --lvl: #e03131; --lvl-d: #a51d1d; --lvl-l: #fdecec; }
.xp-bar { background: var(--lvl-l); border: 2px solid var(--lvl); transition: background .25s, border-color .25s; }
.xp-bar .bar i { background: linear-gradient(90deg, var(--lvl-d), var(--lvl)); }
.xp-lv { color: var(--lvl-d); }
.diff-card.sel, .diff-card.d-beginner.sel, .diff-card.d-advanced.sel { border-color: var(--lvl); background: var(--lvl-l); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lvl) 30%, transparent); }
.diff-card.sel b { color: var(--lvl-d); }
.level-bar { border: 2px solid var(--lvl); }
.diff-badge.d-medium { background: #1f6fd6; border-color: #164f9c; }
/* medium: deep indigo with a clear tinted fill so it stands out on the light-blue background */
body, body[data-diff=medium] { --lvl: #1e3a8a; --lvl-d: #172c69; --lvl-l: #c7d4f2; }
body[data-diff=beginner] { --lvl: #2f9e44; --lvl-d: #237032; --lvl-l: #e9f8ec; }
body[data-diff=advanced] { --lvl: #e03131; --lvl-d: #a51d1d; --lvl-l: #fdecec; }
.diff-badge.d-medium { background: #1e3a8a; border-color: #172c69; }
.level-row { position: static; z-index: auto; }   /* in normal flow: never floats over the start / answer buttons */
/* compact stats strip on screens without the full top bar + "+N" gain fly */
.stat-strip { display: flex; gap: 4px; flex: 0 0 auto; margin-inline-start: auto; }
.stat-strip .pill { background: #fff; color: var(--ink); border: 2px solid var(--lvl, #3a7bd5); box-shadow: 0 2px 6px rgba(0,0,0,.08); padding: 3px 7px; font-size: 13px; gap: 3px; white-space: nowrap; }
.stat-strip .pill .ico { width: 16px; height: 16px; }
.stat-strip .pill.starsum .ico { color: var(--gold); }
.subbar .sub-title { flex: 1 1 auto; min-width: 0; }
.subbar.strip-only { justify-content: flex-end; background: transparent; position: relative; z-index: 12; }
.siyum-screen .subbar.strip-only { position: relative; }
.gain-fly { position: fixed; z-index: 9999; pointer-events: none; font-weight: 900; font-size: 20px; color: var(--lvl-d, #1d4fa0); background: #fff; border: 2px solid var(--lvl, #3a7bd5); border-radius: 999px; padding: 2px 10px; box-shadow: 0 4px 12px rgba(0,0,0,.18); white-space: nowrap; transform: translate(-50%,-50%); direction: ltr; }
.gain-fly.static { animation: none; }
@media (max-width: 400px) { .stat-strip .pill { padding: 2px 5px; font-size: 12px; } .stat-strip { gap: 3px; } }
/* question header: row 1 = X · level label · stats, row 2 = progress. Opaque, so nothing scrolls blurred underneath */
.level-screen .subbar.q-head { flex-wrap: wrap; row-gap: 8px; background: var(--lvl-l, #eef4ff); backdrop-filter: none; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.q-head .q-level { order: 1; flex: 1 1 auto; padding: 0; background: none; justify-content: center; min-width: 0; }
.q-head .stat-strip { order: 2; margin-inline-start: 0; }
.q-head .progress { order: 3; flex: 1 1 100%; height: 12px; }
.q-head .diff-badge { font-size: 17px; padding: 7px 14px; gap: 5px; border-width: 3px; min-height: 42px; align-items: center; }
.q-head .diff-badge b { font-size: 19px; } .q-head .diff-badge .lv-word { font-size: 14px; } .q-head .diff-badge .lv-change { display: none; }
/* card reveal + surprise box overlays */
.card-reveal { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px;
  background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--lvl, #1f6fd6) 55%, #0b1430), #070b1c 75%); color: #fff; text-align: center; overflow: auto; animation: crIn .35s ease; }
@keyframes crIn { from { opacity: 0; } }
.card-reveal .cr-rays { position: absolute; inset: -50%; background: repeating-conic-gradient(rgba(255,230,140,.10) 0 10deg, transparent 10deg 20deg); animation: crSpin 18s linear infinite; pointer-events: none; opacity: 0; transition: opacity .6s; }
.card-reveal.shown .cr-rays, .box-reveal .cr-rays { opacity: 1; }
@keyframes crSpin { to { transform: rotate(360deg); } }
.card-reveal > *:not(.cr-rays) { position: relative; }
.cr-title { margin: 0; font-size: 28px; color: #ffe08a; text-shadow: 0 2px 10px rgba(0,0,0,.5); }
.cr-why { margin: 0; opacity: .9; font-size: 16px; }
.reveal-flip { width: min(78vw, 330px); }
.reveal-flip .pf-inner { animation: crPop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes crPop { from { transform: scale(.3) rotate(-8deg); } }
.reveal-flip.open .pf-inner { animation: none; transform: rotateY(180deg); }
.cr-name { margin: 0; font-size: 17px; }
.cr-acts { display: flex; flex-direction: column; gap: 8px; width: min(80vw, 320px); }
.cr-album { background: rgba(255,255,255,.15); color: #fff; border: 2px solid rgba(255,255,255,.5); }
.bx-gift { font-size: 120px; background: none; border: 0; cursor: pointer; animation: bxWig 1.2s ease-in-out infinite; line-height: 1.1; }
.bx-gift.opening { animation: bxShake .15s linear infinite; } .bx-gift.opened { transform: scale(1.2); opacity: .5; animation: none; }
@keyframes bxWig { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-8deg) scale(1.05); } 75% { transform: rotate(8deg) scale(1.05); } }
@keyframes bxShake { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px) rotate(4deg); } }
.bx-coins { font-size: 40px; font-weight: 900; color: #ffe08a; margin: 0; }
.cl-how { background: var(--lvl-l, #eef4ff); border: 2px solid var(--lvl, #1f6fd6); border-radius: 16px; padding: 10px 14px; margin: 8px 14px 14px; }
.cl-how summary { font-weight: 800; font-size: 17px; cursor: pointer; color: var(--lvl-d, #164f9c); }
.cl-how ul { margin: 8px 0 0; padding-inline-start: 4px; list-style: none; display: grid; gap: 6px; font-size: 15px; }
.cl-tile .cl-rar { display: block; font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--lvl-d, #164f9c); margin-top: 4px; }
.mc-win.next-card { padding: 10px; font-size: 16px; }
.mc-card { cursor: pointer; }
.cl-tile.just-earned { outline: 4px solid var(--lvl, #1f6fd6); outline-offset: 3px; border-radius: 14px; animation: justEarned 1.2s ease 3; }
@keyframes justEarned { 50% { transform: scale(1.06); box-shadow: 0 0 22px rgba(255,214,102,.9); } }

/* HUD pills: a little bigger + tap for a short explanation */
.topbar .pill { cursor: pointer; }
.topbar .pill .ico { width: 1.4em; height: 1.4em; }
@media (max-width: 430px) { .topbar .pill .ico { width: 19px; height: 19px; } }
.hud-tip { position: absolute; z-index: 100000; max-width: min(300px, calc(100vw - 16px)); background: #222; color: #fff; font-size: 14px; line-height: 1.4; padding: 8px 12px; border-radius: 10px; box-shadow: 0 4px 14px rgba(0,0,0,.25); animation: bump .25s ease; }

/* home: learned-mishnayot counters (mine + worldwide) */
.learn-counters { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 14px 0; }
.lc-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 8px rgba(18,36,90,.1); padding: 12px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; color: var(--navy); font-weight: 600; min-height: 84px; justify-content: center; }
.lc-card .lc-n { font-size: 2rem; line-height: 1.1; color: var(--green-d); font-weight: 800; }
.lc-card.global-counter { margin: 0; display: flex; flex-direction: column; }
.lc-card .gc-txt { font-size: .85rem; }
.lc-soon { opacity: .85; }
.lc-soon small { font-size: .75rem; color: #6b7a99; background: #eef2f8; border-radius: 999px; padding: 1px 10px; margin-top: 2px; }