/* ══════════════════════════════════════════════════════════════
   ITALY LIONS STORIES — THE LOOK  (il-story.css)

   Black and gold, the same tokens the rest of the platform uses
   (--gold, --black-card, --border from styles.css) so Stories
   never look like a different website wearing the same logo —
   the mistake Education made and had to undo.

   TWO PARTS:
     .ils-*   the Feed rail   (il-stories.js)
     .ilsv-*  the player      (il-story-viewer.js)

   NOTHING HERE ANIMATES A LAYOUT PROPERTY. No width, no height,
   no top, no margin — those relayout the page on every frame, and
   that is what makes a phone drop to 20fps with a Story open.
   The progress fill looks like a width animation and is a scaleX
   transform for exactly this reason.

   Audited, because a comment that says "transform and opacity
   only" is easy to write and easy to make false. What is actually
   animated in this file, and why each one is acceptable:

     transform, opacity   composited; free
     clip-path            the directional wipe; composited in every
                          browser this platform supports
     filter: hue-rotate   the Trending fire ring, on a 58px circle
     box-shadow           the "glow" rail variant — the ONE thing
                          here that repaints per frame. It is
                          confined to 58px circles, runs on unread
                          tiles only, and is one of three variants
                          so it is on screen a third of the time.

   If a fourth rail variant is ever added, keep it in that list.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   1. THE RAIL

   §6: the Feed must not get taller. 58px circles + one line of
   name + the same 20px bottom padding the old hardcoded
   .stories-bar had, so this is a drop-in replacement in height
   as well as in place.
   ══════════════════════════════════════════════════════════ */
.ils-rail {
  display: flex;
  gap: 12px;
  padding: 0 0 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  /* Momentum scrolling on a horizontal strip inside a vertically
     scrolling page: without this a diagonal flick scrolls both and the
     Feed jumps sideways under the reader's thumb. */
  overscroll-behavior-x: contain;
}
.ils-rail::-webkit-scrollbar { display: none; }

.ils-tile {
  position: relative;
  flex-shrink: 0;
  width: 66px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ils-tile:focus-visible { outline: 2px solid var(--gold, #C9A227); outline-offset: 3px; border-radius: 10px; }

.ils-ring {
  width: 58px; height: 58px;
  border-radius: 50%;
  padding: 2.5px;
  background: rgba(255,255,255,0.14);
  display: block;
  transition: transform .18s ease;
}
.ils-tile:active .ils-ring { transform: scale(0.94); }

.ils-ring > i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: var(--black-card, #161616);
  border: 2px solid var(--black, #0a0a0a);
  overflow: hidden;
  font-style: normal;
  font-weight: 900;
  font-size: 1.2rem;
  color: var(--gold, #C9A227);
  font-family: 'Cinzel', serif;
}
.ils-ring > i img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* UNREAD IS GOLD, SEEN IS GREY. The single most useful thing a Story
   rail tells you, and the reason the rail is worth scrolling at all. */
.ils-member.is-unread .ils-ring {
  background: conic-gradient(from 200deg,
    var(--gold-light, #FFD700), var(--gold, #C9A227),
    var(--gold-dark, #8B6914), var(--gold-light, #FFD700));
}
.ils-member.is-seen .ils-ring { background: rgba(255,255,255,0.16); }

.ils-add .ils-ring.is-add { background: linear-gradient(135deg, #3a3a3a, #202020); }
.ils-add .ils-ring.is-add > i { font-size: 1.55rem; color: var(--white, #fff); }
.ils-add.is-full .ils-ring.is-add > i { color: var(--gold, #C9A227); font-size: 1.2rem; }
.ils-add.is-full { opacity: .72; }

.ils-quota {
  position: absolute; top: 40px; right: 2px;
  background: var(--gold, #C9A227); color: #111;
  font-size: .58rem; font-weight: 900; letter-spacing: .3px;
  padding: 1px 5px; border-radius: 999px;
  border: 2px solid var(--black, #0a0a0a);
}

.ils-official .ils-ring.is-official {
  background: linear-gradient(135deg, var(--gold-light, #FFD700), var(--gold-dark, #8B6914));
}
.ils-official .ils-ring.is-official > i { background: #0d0d0d; padding: 9px; }
.ils-official .ils-ring.is-official > i img { object-fit: contain; }
.ils-official:not(.is-live) .ils-ring { opacity: .55; }
.ils-official .ils-name { color: var(--gold, #C9A227); }

/* 🔥 TRENDING — three faces stacked inside one circle, so the doorway
   shows who is behind it instead of being an unexplained flame. */
.ils-trend .ils-ring.is-trend {
  background: conic-gradient(from 140deg, #ff9d00, #ff3b00, #ffcc33, #ff9d00);
}
.ils-trend:not(.is-live) .ils-ring.is-trend { background: rgba(255,255,255,0.16); }
.ils-trend .ils-ring > i { font-size: 1.35rem; }
/* ══════════════════════════════════════════════════════════════
   🔥 THE WALKING FIRE — rank 1, then 2, then 3, then 1 again

   THE FACES NEVER REORDER. They are laid out once, left to right,
   in the order the day's table put them, and they hold that order
   from midnight to midnight. Only the fire moves.

   Everything that moves here is transform, opacity and box-shadow
   on a 24px circle inside a 58px tile — nothing in this block can
   change the height of the rail or reflow one pixel of the Feed.
   ══════════════════════════════════════════════════════════════ */
/* THE FACES ARE 22px, NOT 24px, AND THAT IS A FIX RATHER THAN A TASTE.

   The ring's inner <i> is a circle with overflow:hidden — 53px across on
   a phone, 47px under 380px. Three 24px faces overlapping by 9px measure
   24×3 − 9×2 = 54px, which was ALREADY one pixel wider than the circle
   that clips them; nobody noticed because the shaved pixel fell on a dark
   border. Lighting one of them scales it outward, and suddenly the
   leftmost face — rank 1, the one that matters most — was losing three
   pixels of its left edge to the clip every time the fire landed on it.

   22px with the same overlap measures 48px, which leaves room for the
   scale-up on both sides. The small-screen block near the end of this
   file does the same sum again for the 47px circle. */
.ils-faces { display: flex; align-items: center; justify-content: center; }
.ils-fc {
  position: relative;
  width: 22px; height: 22px;
  margin-left: -9px;
  flex-shrink: 0;
  transition: transform .38s ease, filter .38s ease;
  transform: scale(.88);
  filter: brightness(.62) saturate(.7);
  z-index: 1;
}
.ils-fc:first-child { margin-left: 0; }
.ils-faces img, .ils-faces b {
  width: 22px; height: 22px; border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid #0d0d0d;
  background: var(--gold-dark, #8B6914);
  font-size: .58rem; color: #111;
  display: flex; align-items: center; justify-content: center;
}

/* The one the fire is on. Bigger, brighter, in front, and wearing
   the flame — so "who is number one right now" is answerable at a
   glance without a number being printed anywhere. */
.ils-fc.is-lit {
  transform: scale(1.14);
  filter: none;
  z-index: 3;
}
.ils-fc.is-lit img, .ils-fc.is-lit b {
  border-color: #ffcc33;
  box-shadow: 0 0 9px rgba(255,110,0,.95), 0 0 18px rgba(255,60,0,.5);
}
.ils-fc-fire {
  position: absolute;
  left: 50%; bottom: -7px;
  transform: translateX(-50%) scale(.4);
  font-size: .58rem; line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  text-shadow: 0 0 6px rgba(255,120,0,.9);
}
.ils-fc.is-lit .ils-fc-fire {
  opacity: 1;
  transform: translateX(-50%) scale(1);
  animation: ilsFcFlicker 1.1s ease-in-out infinite alternate;
}
@keyframes ilsFcFlicker {
  from { transform: translateX(-50%) scale(1);    opacity: .82; }
  to   { transform: translateX(-50%) scale(1.18); opacity: 1;   }
}

.ils-trend .ils-name { color: #ff8a3d; }

/* Trending is one fire badge, not a stack of tiny faces. It starts on the
   flame, flips to one full profile photo, returns to the flame, then moves
   to the next ranked profile. The circle never changes size. */
.ils-trend .ils-ring.is-trend { perspective: 260px; overflow: hidden; }
.ils-trend .ils-ring.is-trend > i { position:relative; width:100%; height:100%; display:grid; place-items:center; overflow:hidden; }
.ils-trend-stage { position:relative; width:100%; height:100%; display:grid; place-items:center; transform-style:preserve-3d; }
.ils-trend-fire, .ils-trend-face { position:absolute; inset:0; box-sizing:border-box; display:grid; place-items:center; backface-visibility:hidden; transition:transform .55s cubic-bezier(.2,.75,.25,1), opacity .35s ease; }
.ils-trend-fire { font-size:1.7rem; filter:drop-shadow(0 0 7px rgba(255,75,0,.85)); transform:rotateY(0deg); opacity:1; }
.ils-trend-face { transform:rotateY(180deg); opacity:0; padding:3px; }
.ils-trend-face.is-active { transform:rotateY(0deg); opacity:1; z-index:2; }
.ils-trend-face img, .ils-trend-face b { width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; border:2px solid #ffbd24; box-shadow:0 0 12px rgba(255,80,0,.8); background:#241707; color:#ffcf48; font-size:1.25rem; font-family:'Cinzel',serif; }
.ils-trend-stage[data-trend-mode="fire"] .ils-trend-face { transform:rotateY(180deg); opacity:0; }
@media (prefers-reduced-motion: reduce) { .ils-trend-fire, .ils-trend-face { transition:none; } }

/* The owner’s unique-viewer strip is deliberately horizontal: it keeps
   the insight sheet compact and lets a member browse people without
   turning analytics into a long, heavy list. */
.ilsv-ins-viewers { margin-top:14px; padding-top:13px; border-top:1px solid rgba(255,255,255,.1); }
.ilsv-ins-viewers > strong { display:block; color:#f4d36b; font-size:.78rem; letter-spacing:.04em; margin-bottom:10px; }
.ilsv-ins-viewers > small { display:block; color:rgba(255,255,255,.58); font-size:.74rem; }
.ilsv-ins-viewer-rail { display:flex; gap:12px; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; }
.ilsv-ins-viewer { flex:0 0 58px; display:flex; flex-direction:column; align-items:center; gap:5px; color:inherit; text-decoration:none; }
.ilsv-ins-viewer b { max-width:62px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:rgba(255,255,255,.82); font-size:.66rem; font-weight:700; }
.ilsv-ins-avatar { position:relative; width:48px; height:48px; border-radius:50%; overflow:visible; display:grid; place-items:center; border:1px solid rgba(214,171,52,.72); background:#211b0c; }
.ilsv-ins-avatar img, .ilsv-ins-avatar-fallback { width:100%; height:100%; border-radius:50%; object-fit:cover; display:grid; place-items:center; color:#f7d86f; font-size:1rem; font-weight:800; }
.ilsv-ins-avatar i { position:absolute; right:-7px; bottom:-5px; padding:2px 4px; border-radius:10px; background:#080808; border:1px solid rgba(255,255,255,.18); font-style:normal; font-size:.62rem; white-space:nowrap; }
.ilsv-ins-viewer:focus-visible .ilsv-ins-avatar, .ilsv-ins-viewer:hover .ilsv-ins-avatar { box-shadow:0 0 0 2px #f4d36b, 0 0 16px rgba(214,171,52,.35); }

/* THE FIRE RANK — §23. One small badge, not a light show. */
.ils-rank {
  position: absolute; top: -2px; right: 0;
  background: linear-gradient(135deg, #ff8a00, #ff3b00);
  color: #fff; font-size: .58rem; font-weight: 900;
  padding: 1px 6px 1px 4px; border-radius: 999px;
  border: 2px solid var(--black, #0a0a0a);
  line-height: 1.35;
  box-shadow: 0 0 10px rgba(255,90,0,.45);
}
.ils-member.is-trending .ils-ring {
  background: conic-gradient(from 200deg, #ffcc33, #ff6a00, #ff2d00, #ffcc33);
  animation: ilsFireRing 3.2s linear infinite;
}
@keyframes ilsFireRing { to { filter: hue-rotate(12deg); } }

.ils-name {
  font-size: .7rem;
  color: var(--white-muted, rgba(255,255,255,.55));
  text-align: center;
  max-width: 66px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.35;
}
.ils-member.is-unread .ils-name { color: var(--white, #fff); font-weight: 600; }

/* The skeleton. Same size, so nothing moves when the real rail lands. */
.ils-tile.is-skel { pointer-events: none; }
.ils-tile.is-skel .ils-ring { background: rgba(255,255,255,.09); animation: ilsPulse 1.4s ease-in-out infinite; }
.ils-tile.is-skel .ils-name { display: block; width: 42px; height: 8px; border-radius: 4px;
  background: rgba(255,255,255,.09); }
@keyframes ilsPulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

/* ══════════════════════════════════════════════════════════
   2. THE COMPOSER SHEET
   ══════════════════════════════════════════════════════════ */
.ils-sheet {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0,0,0,.72);
  display: flex; align-items: flex-end; justify-content: center;
  /* Visible by default, for the same reason as .ilsv above: this is
     fixed, inset:0 and takes pointer events, so an invisible one blocks
     the whole page. */
  opacity: 1;
  padding: 0;
}
.ils-sheet.is-closing { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.ils-sheet-box {
  width: 100%; max-width: 460px;
  background: var(--black-card, #161616);
  border: 1px solid var(--border, rgba(201,162,39,.3));
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  max-height: 92vh; overflow-y: auto;
}
.ils-sheet.open .ils-sheet-box { animation: ilsSheetIn .22s ease; }
@keyframes ilsSheetIn { from { transform: translateY(14px) } }
.ils-sheet-box h3 {
  font-family: 'Cinzel', serif; color: var(--gold, #C9A227);
  font-size: 1.02rem; margin-bottom: 10px;
}
.ils-sheet-box p { font-size: .88rem; color: var(--white-dim, rgba(255,255,255,.85)); margin-bottom: 12px; line-height: 1.55; }
.ils-small { font-size: .78rem !important; color: var(--white-muted, rgba(255,255,255,.55)) !important; }
.ils-prev {
  border-radius: 14px; overflow: hidden; margin-bottom: 12px;
  background: #000; max-height: 48vh; display: flex; justify-content: center;
}
.ils-prev img { max-width: 100%; max-height: 48vh; object-fit: contain; display: block; }
.ils-cap {
  width: 100%; background: #0e0e0e; color: var(--white, #fff);
  border: 1px solid var(--border, rgba(201,162,39,.3));
  border-radius: 10px; padding: 11px 13px; font-size: .9rem;
  font-family: inherit; margin-bottom: 12px;
}
.ils-off { display: flex; gap: 9px; align-items: center; font-size: .84rem;
  color: var(--white-dim, rgba(255,255,255,.85)); margin-bottom: 14px; }
.ils-sheet-btns { display: flex; gap: 10px; justify-content: flex-end; }
.ils-b {
  background: transparent; color: var(--white-dim, rgba(255,255,255,.85));
  border: 1px solid var(--border, rgba(201,162,39,.3));
  border-radius: 999px; padding: 11px 20px;
  font-size: .87rem; font-weight: 700; font-family: inherit; cursor: pointer;
  transition: background .18s, color .18s;
}
.ils-b:disabled { opacity: .55; cursor: not-allowed; }
.ils-primary { background: var(--gold, #C9A227); color: #111; border-color: var(--gold, #C9A227); }
.ils-spin {
  width: 26px; height: 26px; margin: 18px auto;
  border: 3px solid rgba(201,162,39,.25); border-top-color: var(--gold, #C9A227);
  border-radius: 50%; animation: ilsSpin .8s linear infinite;
}
@keyframes ilsSpin { to { transform: rotate(360deg); } }

.ils-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%);
  z-index: 10060; max-width: 90vw;
  /* Not full-bleed and not interactive, so this one could safely fade —
     but it is written the same way as the two above so that nobody
     copying it inherits the pattern that was dangerous. */
  pointer-events: none;
  background: #111; border: 1px solid var(--border, rgba(201,162,39,.3));
  color: var(--white, #fff); font-size: .85rem; font-weight: 600;
  padding: 11px 18px; border-radius: 999px;
}
.ils-toast.on { animation: ilsToastIn .2s ease; }
.ils-toast:not(.on) { opacity: 0; transition: opacity .2s ease; }
@keyframes ilsToastIn { from { opacity: 0; transform: translate(-50%, 12px) } }

/* ══════════════════════════════════════════════════════════
   3. THE PLAYER

   Mobile-first and touch-first, exactly as §37 asks. On a phone
   it is the whole screen. On a laptop it becomes a centred 9:16
   card on a dimmed page, because a full-screen story on a 27"
   monitor is a wall of one photograph.
   ══════════════════════════════════════════════════════════ */
.ilsv {
  position: fixed; inset: 0; z-index: 10040;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  /* VISIBLE BY DEFAULT — see the note below. */
  opacity: 1;
  /* The player owns the screen while it is open. Without this a swipe
     that misses a tap zone scrolls the Feed underneath, and closing
     the Story then lands the reader somewhere they never scrolled to
     — §37's "Feed scroll-position loss". */
  touch-action: none;
  overscroll-behavior: contain;
}
/* THE ENTRANCE IS DECORATION AND IS ALLOWED TO BE SKIPPED.
   No fill-mode, so before it runs and after it finishes the stage uses
   its ordinary (visible) styles. A tab that never ticks an animation
   gets a Story that simply appears — which is the correct degradation.
   The opposite arrangement, where the element starts invisible and an
   animation is what makes it visible, leaves a full-screen tap blocker
   nobody can see. That is the bug this shape exists to make impossible. */
.ilsv.open .ilsv-stage { animation: ilsvStageIn .26s cubic-bezier(.2,.85,.3,1); }
@keyframes ilsvStageIn { from { transform: scale(.965); opacity: .35 } }

/* Closing DOES fade, and that is safe: the node is removed by a timer
   afterwards whether or not the fade ever ran. */
.ilsv.is-closing { opacity: 0; transition: opacity .2s ease; pointer-events: none; }

.ilsv-stage {
  position: relative;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  overflow: hidden;
  background: #060606;
  transition: transform .22s ease, opacity .22s ease;
}

@media (min-width: 900px) {
  .ilsv { background: rgba(0,0,0,.88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .ilsv-stage {
    width: min(430px, 42vw);
    height: min(88vh, calc(min(430px, 42vw) * 16 / 9));
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 30px 90px rgba(0,0,0,.7);
  }
}

/* ── the two picture layers ── */
.ilsv-layer {
  position: absolute; inset: 0;
  opacity: 0; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  will-change: transform, opacity;
}
.ilsv-layer.is-front { opacity: 1; z-index: 1; }
.ilsv-layer img {
  max-width: 100%; max-height: 100%;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-select: none; -webkit-user-drag: none;
}

/* ── THE TRANSITION LIBRARY — §16 ──────────────────────────
   Six, rotated by transitionFor() so consecutive pictures never
   share one and the same Story always animates the same way.
   Curated, not random: random reads as chaotic and makes a Story
   feel different every time it is opened.

   All six are transform + opacity, all six are under 500ms, and
   none of them spins, flashes or overshoots. Premium means brief
   and confident, not busy. */
@keyframes ilsvSlide { from { transform: translateX(9%); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ilsvDepth { from { transform: scale(1.14) translateZ(0); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ilsvFade  { from { opacity: 0 } to { opacity: 1 } }
@keyframes ilsvCard  { from { transform: translateY(7%) scale(.94); opacity: 0 } to { transform: none; opacity: 1 } }
@keyframes ilsvWipe  { from { clip-path: inset(0 0 0 100%) } to { clip-path: inset(0 0 0 0) } }
@keyframes ilsvZoom  { from { transform: scale(.9); opacity: 0 } to { transform: none; opacity: 1 } }

.ilsv-t-slide.is-front { animation: ilsvSlide .38s cubic-bezier(.22,.7,.28,1) both; }
.ilsv-t-depth.is-front { animation: ilsvDepth .44s cubic-bezier(.22,.7,.28,1) both; }
.ilsv-t-fade.is-front  { animation: ilsvFade  .34s ease both; }
.ilsv-t-card.is-front  { animation: ilsvCard  .42s cubic-bezier(.22,.9,.3,1) both; }
.ilsv-t-wipe.is-front  { animation: ilsvWipe  .40s cubic-bezier(.4,0,.2,1) both; }
.ilsv-t-zoom.is-front  { animation: ilsvZoom  .38s cubic-bezier(.22,.7,.28,1) both; }

/* ── THE CITY FLIP — §8 ────────────────────────────────────
   Name, then a real 3D half-turn to the registered city, then
   away. About a second in total. It is the opening of a Story,
   not an interstitial. */
.ilsv-flip {
  position: absolute; inset: 0; z-index: 6;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 45%, #1b1405 0%, #050505 72%);
  perspective: 1100px;
}
.ilsv-flip.on { display: flex; animation: ilsvFade .18s ease both; }
.ilsv-flip-card {
  position: relative;
  width: min(78%, 340px); height: 120px;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.3,.8,.25,1);
}
.ilsv-flip-card.turn { transform: rotateX(180deg); }
.ilsv-flip-face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-family: 'Cinzel', serif;
  font-weight: 800;
  letter-spacing: 3px;
  text-align: center;
  padding: 0 10px;
  line-height: 1.15;
}
.ilsv-flip-front {
  font-size: clamp(1.5rem, 8vw, 2.5rem);
  color: var(--white, #fff);
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
}
.ilsv-flip-back {
  transform: rotateX(180deg);
  font-size: clamp(1.3rem, 7vw, 2.15rem);
  color: var(--gold, #C9A227);
  text-shadow: 0 0 26px rgba(201,162,39,.35);
}
.ilsv-pin { margin-right: 8px; }

/* ── top chrome: the progress segments and who this is ── */
.ilsv-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 34px;
  background: linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,0));
  pointer-events: none;
}
.ilsv-bars { display: flex; gap: 4px; margin-bottom: 11px; }
.ilsv-bar {
  flex: 1; height: 2.5px; border-radius: 2px;
  background: rgba(255,255,255,.3);
  overflow: hidden;
}
.ilsv-bar > i {
  display: block; width: 100%; height: 100%;
  background: #fff; border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
}
.ilsv-bar.is-done > i { transform: scaleX(1); }
/* scaleX, not width — a width animation relayouts the bar on every
   frame; a transform is composited and costs nothing. */
@keyframes ilsvFill { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.ilsv-head { display: flex; align-items: center; gap: 10px; }
.ilsv-who { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; pointer-events: auto; }
.ilsv-av {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gold, #C9A227), var(--gold-dark, #8B6914));
  display: flex; align-items: center; justify-content: center;
  color: #111; font-weight: 900; font-size: .82rem; overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.25);
}
.ilsv-av.is-link { cursor: pointer; }
.ilsv-av img { width: 100%; height: 100%; object-fit: cover; }
.ilsv-av.is-official { background: #0d0d0d; padding: 4px; }
.ilsv-av.is-official img { object-fit: contain; }
.ilsv-who-t { min-width: 0; line-height: 1.25; }
.ilsv-who-t b { display: block; color: #fff; font-size: .88rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilsv-who-t small { display: block; color: rgba(255,255,255,.62); font-size: .72rem; }
.ilsv-off {
  margin-left: 7px; font-size: .55rem; font-weight: 900; letter-spacing: .6px;
  color: var(--gold, #C9A227); border: 1px solid rgba(201,162,39,.5);
  padding: 1px 5px; border-radius: 4px; vertical-align: middle;
}
.ilsv-trend { color: #ff8a3d; font-weight: 800; }
.ilsv-x {
  pointer-events: auto;
  background: rgba(0,0,0,.35); border: 0; color: #fff;
  width: 34px; height: 34px; border-radius: 50%;
  font-size: 1rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.ilsv-caption {
  position: absolute; left: 0; right: 0; z-index: 4;
  bottom: calc(var(--ilsv-foot-h, 92px) + 10px);
  padding: 0 18px; display: none;
  color: #fff; font-size: .92rem; line-height: 1.5; text-align: center;
  text-shadow: 0 2px 14px rgba(0,0,0,.85);
  pointer-events: none;
}
.ilsv-caption.on { display: block; }

/* ── the action bar ── */
.ilsv-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 5;
  display: flex; align-items: center; gap: 9px;
  padding: 14px 14px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0));
}
.ilsv-b {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-family: inherit; font-size: .88rem; font-weight: 700;
  border-radius: 999px; padding: 10px 16px; cursor: pointer;
  transition: transform .15s ease, background .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.ilsv-b:active { transform: scale(.94); }
.ilsv-r { padding: 10px 14px; font-size: 1.06rem; line-height: 1; }
.ilsv-r.on { background: rgba(255,255,255,.24); border-color: rgba(255,255,255,.5); }
.ilsv-fire.on { background: rgba(255,90,0,.3); border-color: rgba(255,140,0,.7);
  box-shadow: 0 0 16px rgba(255,90,0,.35); }
.ilsv-reply { flex: 1; text-align: center; }
.ilsv-more { padding: 10px 13px; opacity: .8; }
.ilsv-join { flex: 1; background: var(--gold, #C9A227); color: #111; border-color: var(--gold, #C9A227); }
.ilsv-del { background: rgba(255,60,60,.16); border-color: rgba(255,80,80,.45); }
.ilsv-own { flex: 1; display: flex; flex-wrap: wrap; gap: 12px;
  color: rgba(255,255,255,.8); font-size: .78rem; font-weight: 600; }

.ilsv-burst {
  position: absolute; left: 50%; top: 52%; z-index: 7;
  font-size: 4.2rem; pointer-events: none;
  animation: ilsvBurst .9s cubic-bezier(.2,.8,.3,1) forwards;
}
@keyframes ilsvBurst {
  0%   { transform: translate(-50%,-50%) scale(.3); opacity: 0 }
  35%  { transform: translate(-50%,-50%) scale(1.15); opacity: 1 }
  100% { transform: translate(-50%,-140%) scale(.85); opacity: 0 }
}

/* ── the gesture layer ──
   A child that fills the player, which is also what stops
   il-guard.js's backdrop rule closing the Story on a tap: that
   rule fires only when the click lands on the blocking element
   ITSELF, and with this in front of it that never happens. */
.ilsv-taps { position: absolute; inset: 0; z-index: 3; }

.ilsv-paused {
  position: absolute; left: 50%; top: 50%; z-index: 6;
  transform: translate(-50%,-50%);
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .74rem; font-weight: 800; letter-spacing: 1.5px;
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  opacity: 0; transition: opacity .18s ease; pointer-events: none;
}
.ilsv.is-held .ilsv-paused { opacity: 1; }
/* Held: the chrome steps back so the picture is unobstructed, which is
   what somebody holding a Story is holding it to look at. */
.ilsv.is-held .ilsv-top,
.ilsv.is-held .ilsv-foot { opacity: .22; transition: opacity .22s ease; }

/* ── the confirm sheet inside the player ── */
.ilsv-sheet {
  position: absolute; inset: 0; z-index: 20;
  background: rgba(0,0,0,.72);
  display: flex; align-items: flex-end; justify-content: center;
}
.ilsv-sheet-box {
  width: 100%; background: #141414;
  border-top: 1px solid var(--border, rgba(201,162,39,.3));
  border-radius: 18px 18px 0 0;
  padding: 20px 18px calc(20px + env(safe-area-inset-bottom, 0px));
}
.ilsv-sheet-box h3 { font-family: 'Cinzel', serif; color: var(--gold, #C9A227);
  font-size: .98rem; margin-bottom: 9px; }
.ilsv-sheet-box p { font-size: .85rem; color: rgba(255,255,255,.82); line-height: 1.55; margin-bottom: 15px; }
.ilsv-sheet-btns { display: flex; gap: 10px; justify-content: flex-end; }
.ilsv-primary { background: var(--gold, #C9A227); color: #111; border-color: var(--gold, #C9A227); }
.ilsv-danger { background: rgba(255,60,60,.2); border-color: rgba(255,80,80,.55); color: #ff8080; }

.ilsv-toast {
  position: absolute; left: 50%; bottom: 96px; z-index: 21;
  transform: translateX(-50%); max-width: 84%;
  background: rgba(0,0,0,.85); border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .82rem; font-weight: 600;
  padding: 10px 16px; border-radius: 999px; text-align: center;
}

/* ══════════════════════════════════════════════════════════
   4. ACCESSIBILITY AND SMALL SCREENS

   §16 asks for reduced-motion to be respected, and it is
   respected properly: the transitions become instant rather
   than merely shorter, and the City Flip stops turning. The
   viewer JS also switches to the plain fade so nothing is
   animating that a reader asked not to have animated.

   The progress fill is deliberately KEPT. It is not decoration —
   it is the only thing telling the reader how long is left, and
   removing it would make the Story feel like it jumps at random.
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .ilsv-layer.is-front,
  .ilsv-flip.on,
  .ils-member.is-trending .ils-ring,
  .ilsv-burst { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .ilsv-flip-card { transition: none !important; }
  .ilsv-stage, .ilsv, .ils-sheet, .ils-sheet-box, .ils-ring { transition: none !important; }
  .ilsv-t-wipe.is-front { clip-path: none !important; }
}

@media (max-width: 380px) {
  .ils-tile { width: 60px; }
  .ils-ring { width: 52px; height: 52px; }
  .ils-name { max-width: 60px; font-size: .66rem; }
  .ils-quota { top: 35px; }
  .ilsv-b { padding: 10px 13px; font-size: .82rem; }
  .ilsv-reply { padding-left: 8px; padding-right: 8px; }
  .ilsv-caption { font-size: .86rem; }
}

/* A tablet in portrait is a phone with more room, not a desktop —
   the player stays full-bleed until there is genuinely a second
   column's worth of width to put it in. */
@media (min-width: 600px) and (max-width: 899px) {
  .ilsv-stage { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════
   5. THE STORY THUMBNAIL, THE RAIL ANIMATION, AND TRENDING
      (added with the "show the actual Story picture" fix)
   ══════════════════════════════════════════════════════════════ */

/* ── The circle is a PREVIEW, not an avatar ──────────────────
   The Story photograph fills the circle; the member's face is a
   small badge on the corner. object-fit: cover means a portrait
   phone photo fills a round 58px hole without squashing anybody. */
.ils-ring { position: relative; }
.ils-ring > i.ils-shot { position: relative; z-index: 1; }
.ils-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ils-face {
  position: absolute; left: 0; bottom: 17px;
  width: 20px; height: 20px; border-radius: 50%;
  object-fit: cover; z-index: 3;
  border: 2px solid var(--black, #0a0a0a);
  background: linear-gradient(135deg, var(--gold, #C9A227), var(--gold-dark, #8B6914));
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; font-weight: 900; color: #111; line-height: 1;
}

/* How many pictures are inside this one circle. It is a count, and it
   is on the circle, precisely so that three pictures never become
   three circles. */
.ils-count {
  position: absolute; right: 1px; bottom: 17px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; z-index: 3;
  background: rgba(0,0,0,.72); border: 1.5px solid rgba(255,255,255,.35);
  color: #fff; font-size: .56rem; font-weight: 900; line-height: 13px;
  text-align: center;
}
.ils-member.is-trending .ils-count { border-color: rgba(255,140,0,.8); }

/* ── SUBTLE LIFE — §4 ────────────────────────────────────────
   ONLY UNREAD CIRCLES MOVE, so motion always means "there is
   something here you have not seen". One variant at a time,
   rotated every 20s by il-stories.js. Everything below animates
   transform, opacity or box-shadow only — never a layout
   property — so the Feed itself never reflows and nothing else
   on the page moves at all. */

/* The turning ring. A rotating gradient BEHIND the circle, not the
   circle itself, so the photograph inside stays perfectly still —
   a rotating photo would be motion sickness, not polish. */
.ils-member.is-unread .ils-ring::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: inherit;
  z-index: 0;
}
.ils-rail[data-anim="turn"] .ils-member.is-unread .ils-ring::before {
  animation: ilsTurn 7s linear infinite;
}
@keyframes ilsTurn { to { transform: rotate(360deg); } }

.ils-rail[data-anim="pulse"] .ils-member.is-unread .ils-ring {
  animation: ilsBreathe 3.2s ease-in-out infinite;
}
@keyframes ilsBreathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.ils-rail[data-anim="glow"] .ils-member.is-unread .ils-ring {
  animation: ilsGlow 3.6s ease-in-out infinite;
}
@keyframes ilsGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(201,162,39,0); }
  50%      { box-shadow: 0 0 13px rgba(201,162,39,.55); }
}

/* Trending circles keep their own fire ring on top of whichever
   variant is running — earned, and visibly different. */
.ils-rail[data-anim="glow"] .ils-member.is-trending .ils-ring {
  animation: ilsGlowFire 3.6s ease-in-out infinite;
}
@keyframes ilsGlowFire {
  0%, 100% { box-shadow: 0 0 0 rgba(255,90,0,0); }
  50%      { box-shadow: 0 0 15px rgba(255,90,0,.6); }
}

/* ── THE TRENDING SHEET ──────────────────────────────────── */
.ils-sec {
  font-family: 'Cinzel', serif;
  font-size: .74rem; letter-spacing: .8px; text-transform: uppercase;
  color: var(--gold, #C9A227);
  margin: 16px 0 9px;
}
.ils-sec:first-of-type { margin-top: 6px; }

.ils-trow {
  display: flex; align-items: center; gap: 11px; width: 100%;
  background: rgba(255,255,255,.04);
  border: 1px solid var(--border, rgba(201,162,39,.3));
  border-radius: 13px; padding: 9px 11px; margin-bottom: 8px;
  cursor: pointer; font-family: inherit; text-align: left;
  color: inherit;
}
.ils-trow:active { transform: scale(.99); }
.ils-trank { font-size: .74rem; font-weight: 900; color: #ff8a3d; flex-shrink: 0; }
.ils-tshot {
  width: 42px; height: 42px; border-radius: 10px; overflow: hidden;
  flex-shrink: 0; background: #0e0e0e; display: block;
}
.ils-tshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ils-tmeta { min-width: 0; line-height: 1.3; }
.ils-tmeta b { display: block; color: var(--white, #fff); font-size: .9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ils-tmeta small { color: var(--white-muted, rgba(255,255,255,.55)); font-size: .75rem; }

.ils-topic { margin-bottom: 12px; }
.ils-topic-h {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  text-decoration: none; padding: 9px 11px; border-radius: 11px;
  background: linear-gradient(90deg, rgba(255,138,0,.12), transparent);
  border: 1px solid rgba(255,138,0,.28);
}
.ils-topic-h b { color: #ffb066; font-size: .92rem; }
.ils-topic-h small { color: var(--white-muted, rgba(255,255,255,.55)); font-size: .74rem; }
.ils-topic-st { display: flex; gap: 10px; padding: 9px 2px 0; overflow-x: auto; }
.ils-tmini {
  background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 54px; flex-shrink: 0;
}
.ils-tmini > span {
  width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
  background: #0e0e0e; border: 1px solid var(--border, rgba(201,162,39,.3));
  display: block;
}
.ils-tmini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ils-tmini small {
  font-size: .64rem; color: var(--white-muted, rgba(255,255,255,.55));
  max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── STORY INSIGHTS (inside the player) ──────────────────── */
.ilsv-sheet-body { font-size: .85rem; color: rgba(255,255,255,.82);
  line-height: 1.55; margin-bottom: 15px; }
.ilsv-ins-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.09);
}
.ilsv-ins-n {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: rgba(201,162,39,.18); color: var(--gold, #C9A227);
  font-size: .7rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.ilsv-ins-b { line-height: 1.35; min-width: 0; }
.ilsv-ins-b b { display: block; color: #fff; font-size: .86rem; }
.ilsv-ins-b small { color: rgba(255,255,255,.6); font-size: .74rem; }
.ilsv-ins-tot { padding: 11px 0 0; }
.ilsv-ins-tot b { display: block; color: var(--gold, #C9A227); font-size: .95rem; }
.ilsv-ins-tot small { display: block; color: rgba(255,255,255,.55); font-size: .74rem; }

/* ── REDUCED MOTION: the rail stops moving entirely ──────────
   The gold ring stays, because colour is what carries the "unread"
   meaning — it is the motion that is optional, not the information. */
@media (prefers-reduced-motion: reduce) {
  .ils-rail[data-anim] .ils-member .ils-ring,
  .ils-rail[data-anim] .ils-member .ils-ring::before {
    animation: none !important;
  }
  /* The walking fire still WALKS — which of the three is lit is
     information, not decoration, so it is never removed. What goes is
     the movement: no scaling, no flicker, no transition. The lit face
     is still the bright one wearing the flame. */
  .ils-fc { transition: none !important; transform: none !important; }
  .ils-fc.is-lit { transform: none !important; }
  .ils-fc-fire { transition: none !important; animation: none !important; }
  .ils-fc.is-lit .ils-fc-fire {
    animation: none !important;
    transform: translateX(-50%) scale(1) !important;
  }
}

@media (max-width: 380px) {
  .ils-face  { width: 18px; height: 18px; bottom: 15px; }
  .ils-count { bottom: 15px; }
  /* The ring is 52px here and the circle that clips is 47px across, so the
     three faces are sized down again: 19×3 − 7×2 = 43px, and the lit one
     still has room to grow outwards without losing its edge. */
  .ils-fc { width: 19px; height: 19px; margin-left: -7px; }
  .ils-faces img, .ils-faces b { width: 19px; height: 19px; font-size: .5rem; }
  .ils-fc-fire { font-size: .5rem; bottom: -5px; }
}

/* ══════════════════════════════════════════════════════════════
   6. STORY CONTEXT, POLLS AND QUICK MESSAGE

   Everything here decorates the canonical Story. There is no
   second layout, no second viewer and no second card system —
   Lions Now, I'm Here, Mood, Celebration, Event, Countdown,
   First Look and Final Hours are ONE chip component with
   different colours.
   ══════════════════════════════════════════════════════════════ */

/* ── the chip row, under the header ── */
.ilsv-ctx {
  position: absolute; left: 0; right: 0; top: 74px; z-index: 4;
  display: none; flex-wrap: wrap; gap: 6px;
  padding: 0 14px;
  pointer-events: none;
}
.ilsv-ctx.on { display: flex; }
.ilsv-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(0,0,0,.52); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; font-size: .72rem; font-weight: 600;
  padding: 4px 10px; border-radius: 999px;
  text-decoration: none; line-height: 1.5;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ilsv-chip b { font-weight: 800; }
.ilsv-chip.is-now { border-color: rgba(255,200,60,.55); color: #ffd979;
  background: rgba(60,44,0,.55); }
.ilsv-chip.is-celebrate { border-color: rgba(255,120,200,.5); color: #ffc4e6; }
.ilsv-chip.is-mood { border-color: rgba(160,190,255,.45); color: #cfe0ff; }
.ilsv-chip.is-event { border-color: rgba(201,162,39,.6); color: var(--gold, #C9A227);
  pointer-events: auto; }
.ilsv-chip.is-count { font-variant-numeric: tabular-nums; }
.ilsv-chip.is-new { border-color: rgba(120,230,180,.5); color: #a9f0cd; }
.ilsv-chip.is-final { border-color: rgba(255,150,80,.5); color: #ffc79a; }

/* ── 🎁 Tap to Reveal ── */
.ilsv-layer.is-hidden img { filter: blur(28px) saturate(.7); transform: scale(1.06); }
.ilsv-reveal {
  position: absolute; inset: 0; z-index: 4;
  display: none; align-items: center; justify-content: center;
}
.ilsv-reveal.on { display: flex; }
.ilsv-reveal-btn {
  pointer-events: auto;
  background: rgba(0,0,0,.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.28); color: #fff;
  font-family: inherit; font-size: .95rem; padding: 15px 26px;
  border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
}
.ilsv-reveal-btn b { font-weight: 800; }

/* ── 📊 the one poll card ── */
.ilsv-poll {
  position: absolute; left: 0; right: 0; z-index: 5;
  /* Clears whatever the action bar actually is — see measureFoot() in
     il-story-viewer.js. The fallback covers the first frame, before the
     first measurement has been published. */
  bottom: calc(var(--ilsv-foot-h, 118px) + 12px);
  display: none; padding: 0 16px;
}
.ilsv-poll.on { display: block; }
.ilsv-poll-box {
  background: rgba(12,12,12,.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px; padding: 13px;
}
.ilsv-poll-h {
  font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: 1px;
  text-transform: uppercase; color: var(--gold, #C9A227); margin-bottom: 6px;
}
.ilsv-poll-q { color: #fff; font-size: .92rem; font-weight: 700; margin-bottom: 10px; }
.ilsv-po {
  position: relative; display: flex; align-items: center; gap: 8px;
  width: 100%; margin-bottom: 7px; overflow: hidden;
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.2); border-radius: 11px;
  padding: 11px 13px; cursor: pointer;
  color: #fff; font-family: inherit; font-size: .88rem; font-weight: 600;
  text-align: left;
}
.ilsv-po:last-child { margin-bottom: 0; }
.ilsv-po:disabled { cursor: default; }
.ilsv-po-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(201,162,39,.26);
  transition: width .5s cubic-bezier(.2,.8,.3,1);
}
.ilsv-po-t { position: relative; z-index: 1; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ilsv-po-n { position: relative; z-index: 1; font-weight: 800; font-variant-numeric: tabular-nums; }
.ilsv-po.is-mine { border-color: var(--gold, #C9A227); }
.ilsv-po.is-right { border-color: #3ddc84; }
.ilsv-po.is-right .ilsv-po-bar { background: rgba(61,220,132,.24); }
.ilsv-poll-f { color: rgba(255,255,255,.6); font-size: .72rem; margin-top: 8px; }

/* ── 💬 Quick Message ── */
.ilsv-quick {
  display: flex; gap: 7px; overflow-x: auto; padding-bottom: 9px;
  scrollbar-width: none; width: 100%;
}
.ilsv-quick::-webkit-scrollbar { display: none; }
.ilsv-qr {
  flex-shrink: 0; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22); color: #fff;
  font-family: inherit; font-size: .78rem; font-weight: 600;
  padding: 7px 13px; border-radius: 999px; cursor: pointer;
  white-space: nowrap;
}
.ilsv-qr:active { transform: scale(.95); }
.ilsv-msgrow { display: flex; align-items: center; gap: 7px; width: 100%; }
.ilsv-reactions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; width: 100%;
}
.ilsv-rchoice {
  flex: 1 1 0; min-width: 36px; height: 36px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.1); color: #fff;
  font: inherit; font-size: 1.08rem; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ilsv-rchoice.on {
  background: rgba(201,162,39,.3); border-color: var(--gold, #C9A227);
  box-shadow: 0 0 14px rgba(201,162,39,.24);
}
.ilsv-rchoice:active { transform: scale(.92); }
.ilsv-msg {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 11px 15px;
  color: #fff; font-family: inherit; font-size: .87rem;
}
.ilsv-msg::placeholder { color: rgba(255,255,255,.55); }
.ilsv-msg:focus { outline: none; border-color: var(--gold, #C9A227);
  background: rgba(255,255,255,.15); }
.ilsv-send { padding: 10px 14px; }

/* The foot now holds two rows, so it stacks. */
.ilsv-foot { flex-wrap: wrap; }

/* ── the composer's chips ── */
.ils-lbl {
  font-size: .74rem; font-weight: 800; color: var(--gold, #C9A227);
  margin: 14px 0 7px; letter-spacing: .3px;
}
.ils-lbl small { font-weight: 500; color: var(--white-muted, rgba(255,255,255,.55));
  letter-spacing: 0; margin-left: 6px; }
.ils-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.ils-chip {
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border, rgba(201,162,39,.3));
  color: var(--white-dim, rgba(255,255,255,.85));
  font-family: inherit; font-size: .8rem; font-weight: 600;
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
}
.ils-chip.on { background: var(--gold, #C9A227); color: #111; border-color: var(--gold, #C9A227); }
.ils-more { margin-top: 6px; }
.ils-more > summary {
  cursor: pointer; color: var(--gold, #C9A227);
  font-size: .82rem; font-weight: 700; padding: 9px 0;
  list-style: none;
}
.ils-more > summary::-webkit-details-marker { display: none; }
.ils-more > summary::before { content: '＋ '; }
.ils-more[open] > summary::before { content: '－ '; }
.ils-poll2 { display: flex; gap: 8px; }
.ils-poll2 .ils-cap { flex: 1; min-width: 0; }

/* ⚡ Lions Now, in the rail */
.ils-now .ils-ring.is-now {
  background: conic-gradient(from 90deg, #ffd979, #ff9d00, #ffe9a8, #ffd979);
}
.ils-now .ils-ring > i { font-size: 1.4rem; }
.ils-now .ils-name { color: #ffd979; }

/* ── "Replied to a Story" inside Lion Messenger ── */
.msg-storyref {
  display: flex; align-items: center; gap: 9px;
  background: rgba(201,162,39,.07);
  border: 1px solid var(--border, rgba(201,162,39,.3));
  border-radius: 12px; padding: 7px 9px; margin-bottom: 5px;
  max-width: 280px;
}
.msg-storyref-th {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
  background: #0e0e0e; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 1.05rem;
}
.msg-storyref-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.msg-storyref-b { min-width: 0; line-height: 1.3; }
.msg-storyref-b b { display: block; font-size: .8rem; color: var(--gold, #C9A227); }
.msg-storyref-b small { display: block; font-size: .72rem;
  color: var(--white-muted, rgba(255,255,255,.55));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-storyref.is-gone { opacity: .65; border-style: dashed; }
.msg-storyref.is-gone .msg-storyref-b b { color: var(--white-muted, rgba(255,255,255,.55)); }

@media (max-width: 380px) {
  .ilsv-ctx { top: 70px; }
  .ilsv-msg { font-size: .82rem; padding: 10px 13px; }
  .ilsv-qr { font-size: .74rem; padding: 6px 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .ilsv-po-bar { transition: none !important; }
  .ilsv-layer.is-hidden img { filter: none; transform: none; }
}

/* ── The composer, opened onto a Story that already exists ─────
   "1 / 3 today" with the actual pictures beside it. This is the
   difference between adding to your Story and being asked to
   start one you already started. */
.ils-mine { display: flex; gap: 9px; margin: 4px 0 14px; }
.ils-mine-shot {
  position: relative; width: 62px; height: 82px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: #0e0e0e;
  border: 1px solid var(--border, rgba(201,162,39,.3));
}
.ils-mine-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ils-mine-shot b {
  position: absolute; left: 4px; bottom: 4px;
  width: 17px; height: 17px; border-radius: 50%;
  background: rgba(0,0,0,.7); border: 1px solid rgba(255,255,255,.35);
  color: #fff; font-size: .6rem; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}

/* ══════════════════════════════════════════════════════════
   🔥 THE FEED SPOTLIGHT  (.ils-spot — il-stories.js)

   One trending member, full width, sitting after the third post
   in the feed. Four hours each, twice a day; the slot arithmetic
   and the reason it costs no reads are in il-stories.js.

   IT MUST NOT LOOK LIKE A POST. Same width and radius as
   .post-card so the column stays a column, but a warm border and
   an ember wash instead of the flat card background, and no
   author row — this is the platform speaking, not a member.

   Animated properties: transform and opacity only. The ember
   wash is a static gradient, not a moving one; a second animated
   gradient on a full-width block is exactly the kind of per-frame
   repaint the note at the top of this file exists to prevent.
   ══════════════════════════════════════════════════════════ */
.ils-spot { margin: 0 0 16px; }

.ils-spot-card {
  display: flex; align-items: center; gap: 13px;
  width: 100%; box-sizing: border-box;
  padding: 13px 15px; margin: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,140,40,.40);
  background:
    radial-gradient(125% 150% at 0% 0%, rgba(255,110,20,.15), rgba(255,110,20,0) 60%),
    var(--black-card, #121212);
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .18s ease, border-color .18s ease;
}
.ils-spot-card:active {
  transform: scale(.988);
  border-color: rgba(255,175,65,.72);
}
@media (prefers-reduced-motion: reduce) {
  .ils-spot-card { transition: none; }
  .ils-spot-card:active { transform: none; }
}

/* The face, with its rank on it. Same fire ring the rail tile wears, so
   the two Trending surfaces read as one feature. */
.ils-spot-face {
  position: relative; flex: 0 0 auto;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; overflow: visible;
  border: 2px solid #ffbd24; background: #241707;
  box-shadow: 0 0 13px rgba(255,80,0,.55);
}
.ils-spot-face img {
  width: 100%; height: 100%; border-radius: 50%;
  object-fit: cover; display: block;
}
.ils-spot-face b {
  color: #ffcf48; font-size: 1.3rem; font-family: 'Cinzel', serif; font-weight: 700;
}
.ils-spot-rank {
  position: absolute; right: -3px; bottom: -3px;
  min-width: 20px; height: 20px; padding: 0 4px; box-sizing: border-box;
  border-radius: 10px; border: 2px solid var(--black-card, #121212);
  background: linear-gradient(180deg, #ff9a2e, #f4600d);
  color: #1a0d02; font-size: .68rem; font-weight: 900; font-style: normal;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}

.ils-spot-body { flex: 1 1 auto; min-width: 0; display: block; }
.ils-spot-kicker {
  display: block; font-size: .68rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: #ff8a3d; margin-bottom: 3px;
}
.ils-spot-name {
  display: block; font-size: 1rem; font-weight: 700;
  color: var(--white, #fff); line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ils-spot-sub {
  display: block; font-size: .76rem; margin-top: 2px;
  color: var(--muted, rgba(255,255,255,.6));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The Story's newest picture. The rail circle already loaded this exact
   URL, so on the Feed it is a cache hit and not a second download. */
.ils-spot-shot {
  position: relative; flex: 0 0 auto;
  width: 46px; height: 60px; border-radius: 9px; overflow: hidden;
  background: #0e0e0e;
  border: 1px solid rgba(255,140,40,.35);
}
.ils-spot-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ils-spot-shot i {
  position: absolute; right: 3px; bottom: 3px;
  min-width: 15px; height: 15px; padding: 0 3px; box-sizing: border-box;
  border-radius: 8px; background: rgba(0,0,0,.72);
  border: 1px solid rgba(255,255,255,.32);
  color: #fff; font-size: .58rem; font-weight: 900; font-style: normal;
  display: flex; align-items: center; justify-content: center;
}

@media (max-width: 380px) {
  .ils-spot-card { gap: 10px; padding: 11px 12px; }
  .ils-spot-face { width: 46px; height: 46px; }
  .ils-spot-shot { width: 38px; height: 50px; }
}

/* ══════════════════════════════════════════════════════════
   🔥 TRENDING MOTION — three one-shot moments, no loops

   WHAT WAS WRONG. There was no rank-change animation at all.
   paint() rewrites the rail's innerHTML, so a member arriving at
   number 1 simply appeared there between two frames, with the
   same weight as a scroll. The one thing Trending had to say —
   "this just changed" — was the one thing it could not say.

   THREE MOMENTS, AND NOTHING ELSE:

     is-promoted   a member entered the Top 3 or moved up. Plays
                   once, on the tile that earned it.
     is-rolling    the Spotlight's rank number changed. The digit
                   is replaced, so it is announced.
     is-ember      the walking fire has just landed on a face.

   EVERY ONE IS A ONE-SHOT. Nothing here loops, because a loop is
   the "constant spinning" the brief rules out and — for the glow
   — a per-frame repaint that never stops. The classes are applied
   by markup that paint() regenerates, so an animation cannot be
   left stuck on an element: there is nothing to clean up.

   NO LAYOUT PROPERTY IS ANIMATED. transform and opacity carry
   every motion below. The one exception is the ember's box-shadow,
   which is the same exception the file header already documents —
   confined to a 58px circle, and now running for 520ms at a time
   instead of continuously.

   THE TIMINGS ARE DELIBERATELY SHORT. 320ms for the digit, 520ms
   for the ember, 620ms for a promotion. Long enough to be seen,
   short enough that it is over before it can annoy — "fast" and
   "not distracting" are the same requirement.
   ══════════════════════════════════════════════════════════ */

/* ── A member moved up ─────────────────────────────────────
   A single soft swell. NOT a bounce: the scale peaks at 1.055 and
   settles without overshooting, because an elastic tile in a
   horizontally scrolling rail reads as a glitch, not as delight. */
@keyframes ils-rise {
  0%   { transform: scale(1);     }
  38%  { transform: scale(1.055); }
  100% { transform: scale(1);     }
}
@keyframes ils-rise-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255,138,61,0); }
  30%  { box-shadow: 0 0 16px 3px rgba(255,138,61,.62); }
  100% { box-shadow: 0 0 0 0 rgba(255,138,61,0); }
}
.ils-tile.is-promoted .ils-ring {
  animation: ils-rise 620ms cubic-bezier(.22,.68,.28,1) both,
             ils-rise-glow 620ms ease-out both;
}
/* The rank badge arrives with the swell rather than being there already. */
@keyframes ils-rank-in {
  0%   { transform: scale(.6) translateY(3px); opacity: 0; }
  100% { transform: scale(1)  translateY(0);   opacity: 1; }
}
.ils-tile.is-promoted .ils-rank {
  animation: ils-rank-in 420ms cubic-bezier(.22,.68,.28,1) 120ms both;
}

/* ── The Spotlight card ────────────────────────────────────
   A lift rather than a pulse: the card is full width, and scaling
   something that wide draws far too much attention. Raising it a
   few pixels and letting it settle says the same thing quietly. */
@keyframes ils-spot-lift {
  0%   { transform: translateY(6px); opacity: .55; }
  100% { transform: translateY(0);   opacity: 1; }
}
.ils-spot-card.is-promoted {
  animation: ils-spot-lift 520ms cubic-bezier(.22,.68,.28,1) both;
}

/* ── The rank number changed ───────────────────────────────
   The digit rolls up out of the badge and the new one rolls in
   underneath it — the motion a counter makes, which is exactly
   what this is. Clipped by the badge so nothing escapes it. */
/* The badge CLIPS, the digit inside it MOVES. overflow:hidden clips a
   box's children and never the box itself, so animating the badge would
   slide the badge across the avatar instead of rolling the number. */
.ils-spot-rank { overflow: hidden; }
.ils-spot-rank b { display: block; font: inherit; }
@keyframes ils-digit-roll {
  0%   { transform: translateY(88%); opacity: 0; }
  55%  { opacity: 1; }
  100% { transform: translateY(0);   opacity: 1; }
}
.ils-spot-rank.is-rolling b {
  animation: ils-digit-roll 320ms cubic-bezier(.3,.75,.3,1) both;
}

/* ── The ember lands ───────────────────────────────────────
   Bright on arrival, gone by the time the fire moves on. 520ms
   inside a 1700ms step, so the ring is dark for two thirds of
   every cycle and the pulse still reads as an event. */
@keyframes ils-ember {
  0%   { box-shadow: 0 0 0 0 rgba(255,92,0,0); }
  22%  { box-shadow: 0 0 18px 4px rgba(255,120,20,.78); }
  100% { box-shadow: 0 0 0 0 rgba(255,92,0,0); }
}
.ils-trend .ils-ring.is-trend.is-ember {
  animation: ils-ember 520ms ease-out both;
}

/* ── Reduced motion ────────────────────────────────────────
   Everything above is decoration: it tells the member something
   the number already tells them. So it is removed outright rather
   than shortened, and nothing is lost but the movement. */
@media (prefers-reduced-motion: reduce) {
  .ils-tile.is-promoted .ils-ring,
  .ils-tile.is-promoted .ils-rank,
  .ils-spot-card.is-promoted,
  .ils-spot-rank.is-rolling b,
  .ils-trend .ils-ring.is-trend.is-ember {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════════
   THE REACTION PICKER (il-story-viewer.js)

   Four emoji in one row, sitting just above the reaction button
   it came from. Love and Fire keep their own buttons, so this
   holds only the other four and never grows.

   IT OPENS UPWARD because it is anchored to the bottom bar and a
   phone keyboard or a thumb lives below it. It is positioned
   against the viewer root rather than the button so it cannot be
   clipped by the foot bar's own overflow.

   transform + opacity only, 180ms — the picker must feel like it
   was already there. Anything slower and a member has taken their
   finger off before it finishes arriving.
   ══════════════════════════════════════════════════════════ */
.ilsv-picker {
  position: absolute;
  right: 14px;
  bottom: calc(var(--ilsv-foot-h, 96px) + 10px);
  z-index: 40;
  display: flex; gap: 4px;
  padding: 6px;
  border-radius: 26px;
  background: rgba(18,18,18,.94);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 8px 28px rgba(0,0,0,.55);
  transform: translateY(8px) scale(.94);
  opacity: 0;
  transition: transform .18s cubic-bezier(.22,.68,.28,1), opacity .18s ease;
}
.ilsv-picker.open { transform: translateY(0) scale(1); opacity: 1; }

.ilsv-pick {
  width: 44px; height: 44px;          /* a real touch target, not an emoji */
  border: 0; border-radius: 50%;
  background: transparent;
  font-size: 1.45rem; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform .14s ease, background-color .14s ease;
}
.ilsv-pick:hover, .ilsv-pick:focus-visible { background: rgba(255,255,255,.10); }
.ilsv-pick:focus-visible { outline: 2px solid var(--gold, #c9a227); outline-offset: -2px; }
.ilsv-pick:active { transform: scale(.9); }
/* The one already chosen, so reopening the picker shows your own answer. */
.ilsv-pick.on {
  background: rgba(201,162,39,.22);
  box-shadow: inset 0 0 0 1px rgba(201,162,39,.55);
}

@media (prefers-reduced-motion: reduce) {
  .ilsv-picker { transition: none; transform: none; opacity: 1; }
  .ilsv-pick, .ilsv-pick:active { transition: none; transform: none; }
}