/* ============================================================
   STORIES — טבעות ונגן מסך מלא. משותף לקטלוג ולדף המלכה.
   ============================================================ */
  .ring-row{display:flex;gap:14px;overflow-x:auto;padding:2px 2px 16px;
    scrollbar-width:none;margin-bottom:6px}
  .ring-row::-webkit-scrollbar{display:none}
  .ring{flex:0 0 auto;width:70px;background:none;border:0;padding:0;cursor:pointer;
    color:inherit;font:inherit}
  .ring i{display:block;width:66px;height:66px;border-radius:50%;padding:3px;
    background:var(--line)}
  /* טבעת זהב = יש משהו שלא ראיתי. אפורה = כבר ראיתי הכל.
     זה כל ההבדל שמחזיר אנשים ללחוץ. */
  .ring.new i{background:linear-gradient(135deg,var(--gold),#ff7ac0,var(--gold))}
  .ring i img,.ring i span{display:block;width:100%;height:100%;border-radius:50%;
    object-fit:cover;background:#241a3c;border:2px solid var(--bg)}
  .ring i span{display:grid;place-items:center;font-size:22px}
  .ring b{display:block;font-size:11px;font-weight:600;margin-top:6px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .ring.seen i{opacity:.55} .ring.seen b{color:var(--muted)}

  .sv{position:fixed;inset:0;z-index:200;background:#000;display:none;
    flex-direction:column;align-items:center;justify-content:center}
  .sv.on{display:flex}
  .sv-bars{position:absolute;top:0;left:0;right:0;display:flex;gap:4px;
    padding:12px 12px 0;z-index:3}
  .sv-bars i{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);
    overflow:hidden}
  .sv-bars i u{display:block;height:100%;width:0;background:#fff}
  .sv-top{position:absolute;top:24px;left:0;right:0;display:flex;align-items:center;
    gap:10px;padding:12px 14px;z-index:3;
    background:linear-gradient(#000c,transparent)}
  .sv-top img{width:34px;height:34px;border-radius:50%;object-fit:cover}
  .sv-top b{font-size:14px;color:#fff}
  .sv-top .muted-s{color:#ffffffb0;font-size:12px}
  .sv-x{margin-inline-start:auto;background:none;border:0;color:#fff;font-size:26px;
    cursor:pointer;line-height:1;padding:0 6px}
  .sv-stage{position:relative;width:100%;height:100%;display:grid;place-items:center}
  .sv-stage img,.sv-stage video{max-width:100%;max-height:100%;object-fit:contain}
  /* אזורי הקשה: חצי ימין = הבא (RTL), חצי שמאל = הקודם */
  .sv-tap{position:absolute;top:0;bottom:0;width:35%;z-index:2;background:none;border:0;
    cursor:pointer}
  .sv-tap.next{inset-inline-start:0} .sv-tap.prev{inset-inline-end:0}
  .sv-cap{position:absolute;bottom:0;left:0;right:0;padding:26px 18px 24px;color:#fff;
    font-size:14.5px;line-height:1.6;z-index:3;
    background:linear-gradient(transparent,#000d)}
  .sv-note{color:#ffffff9c;font-size:13px}

/* טבעת על האווטאר בדף המלכה — אותו קוד ויזואלי כמו בשורת הטבעות,
   כדי שאותו סימן יעביר את אותה משמעות בשני המקומות. */
.avatar.has-story{position:relative;border-radius:50%}
.avatar.has-story::after{content:'';position:absolute;inset:-5px;border-radius:50%;
  border:3px solid var(--line);pointer-events:none}
.avatar.has-story.new::after{border-color:transparent;
  background:linear-gradient(135deg,var(--gold),#ff7ac0,var(--gold)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* ---------- פס ההתקנה ("מיני אפליקציה") ---------- */
/* ⚠️ יושב מעל הכל חוץ ממסך השיחה (z-index 300) — הצעת התקנה
   שמכסה שיחה נכנסת היא בדיוק הרגע הכי גרוע להציע משהו. */
.pwa-bar{position:fixed;inset-inline:12px;bottom:12px;z-index:120;
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--panel,#171024);border:1px solid var(--line,#2a1f3d);
  border-radius:14px;box-shadow:0 10px 34px rgba(0,0,0,.5);
  transform:translateY(140%);transition:transform .28s ease;
  max-width:520px;margin-inline:auto}
.pwa-bar.on{transform:translateY(0)}
.pwa-ico{width:38px;height:38px;border-radius:10px;flex:none;display:grid;
  place-items:center;font-size:19px;color:var(--gold,#e8c766);
  background:linear-gradient(135deg,#2a1038,#150c22)}
.pwa-txt{flex:1;min-width:0;display:grid;gap:2px}
.pwa-txt b{font-size:13.5px}
.pwa-txt span{font-size:11.5px;color:var(--muted,#9a8bb0);line-height:1.45}
.pwa-go{border:0;border-radius:9px;padding:9px 15px;font-weight:700;font-size:13px;
  background:linear-gradient(135deg,var(--primary,#b81e4e),#7d1235);color:#fff;
  cursor:pointer;font-family:inherit;flex:none}
.pwa-x{background:none;border:0;color:var(--muted,#9a8bb0);font-size:17px;
  cursor:pointer;padding:0 2px;flex:none}
@media(prefers-reduced-motion:reduce){.pwa-bar{transition:none}}