/* ═══════════════════════════════════════════════════════════
   EYE OF HORUS FREE SPINS — page-specific layer
   (tokens + shared components inherited from base.css / layer.css)
   ═══════════════════════════════════════════════════════════ */

/* ── base-vs-free-spins / early-vs-late 2-up comparison wrapper ── */
.compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,1.8vw,20px);margin-top:1rem;min-width:0}
.compare>*{min-width:0}

/* ── hero trigger overlay (appears over the grid-shell once triggered) ── */
.fs-trig-overlay{position:absolute;inset:0;z-index:5;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;
  background:rgba(10,30,60,.86);text-align:center;padding:0 10px}
.fs-trig-overlay[hidden]{display:none}

/* ── before/after reel pair (two grid-shells side by side, stack on mobile) ── */
.fs-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,20px);margin-top:1rem}
.fs-pair-col{min-width:0}
.fs-pair-lb{font-family:var(--orn);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--turq-dk);margin-bottom:.5rem;text-align:center}

/* ── reusable bonus-status strip (Free Spins Left / Upgrades / Extra Spins Won) ── */
.fs-status{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:1rem}
.fs-status .pill{flex:1 1 120px;min-width:0}

/* ── feature progression timeline (horizontal desktop, vertical mobile) ── */
.fs-tl{display:flex;gap:0;margin-top:1rem}
.fs-tl-node{flex:1 1 0;min-width:0;position:relative;padding:0 .4rem;text-align:center}
.fs-tl-node:not(:first-child)::before{content:'';position:absolute;top:13px;right:100%;
  width:100%;height:2px;background:var(--line)}
.fs-tl-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;
  border-radius:50%;background:var(--ink-2);color:#FFF6D8;font-family:var(--orn);
  font-weight:900;font-size:.75rem;position:relative;z-index:1}
.fs-tl-node b{display:block;margin-top:.5rem;font-weight:800;font-size:.78rem;color:var(--ink);line-height:1.3}
.fs-tl-node p{margin:.25rem 0 0;font-size:.72rem;color:var(--muted);line-height:1.4}

/* ── modest/strong result badges ── */
.fs-result{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;
  border-radius:999px;font-weight:800;font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;margin-top:.9rem}
.fs-result.modest{background:#FBF1D6;color:var(--ink-2);border:1.5px solid var(--stone-dk)}
.fs-result.strong{background:#E8F8F8;color:var(--turq-dk);border:1.5px solid var(--turq-dk)}

/* ── watch / not-watch card grid ── */
.fs-cardgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:.8rem}
.fs-wcard{border-radius:10px;padding:.65rem .8rem;border:1.5px solid var(--line);background:#FBF1D6}
.fs-wcard p{margin:0;font-weight:700;font-size:.85rem;color:var(--ink-2);line-height:1.4}
.fs-wcard.not{border-color:var(--red);background:#FDEDEB}
.fs-wcard.not p{text-decoration:line-through;color:var(--muted)}

/* ── generic node-chain (not-free-money flow / end-of-feature flow) ──
   reuses .fbox / .farrow from layer.css, just wraps them to flex-wrap */
.fs-chain{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:clamp(10px,1.6vw,18px);margin-top:1rem}
.fs-chain>.fbox{flex:1 1 170px;min-width:0;text-align:center}
.fs-chain>.farrow{flex:0 0 auto}
.fs-chain-val{font-family:var(--dsp);font-weight:900;font-size:1.3rem;color:var(--turq-dk);margin-top:.3rem}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:900px){
  .fs-pair{grid-template-columns:1fr}
}
@media(max-width:760px){
  .fs-tl{flex-direction:column;gap:14px;align-items:stretch}
  .fs-tl-node{text-align:left;padding-left:40px;padding-right:0}
  .fs-tl-node::before{display:none}
  .fs-tl-n{position:absolute;left:0;top:0}
  .fs-chain{flex-direction:column;align-items:stretch}
  .fs-chain>.fbox{flex:0 1 auto}
  .fs-chain>.farrow{flex-direction:row;min-height:0;gap:.6rem}
  .fs-chain>.farrow i{transform:rotate(90deg)}
}
@media(max-width:640px){
  .compare{grid-template-columns:1fr}
}
@media(max-width:560px){
  .fs-cardgrid{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  .rung,.gtile,.tablet,.sbtn,.pl-btn,.tlink{transition:none}
}