/* ══════════════════════════════════════════════════════════
   EYE OF HORUS PAYLINES — page-specific layer
   (tokens + shared components inherited from base.css/layer.css,
   including tt-eyebrow, viz, tip-grid, grid-scroll, grid-shell,
   reel-stage, pl-layer, pl-btn, stage-btns, sbtn, wsteps, s3,
   add-row, eq, tline, flow, fbox, qgrid, vpanel, nbox, stakes
   etc. — reused as-is, not redeclared here)
   ══════════════════════════════════════════════════════════ */

/* ── backstop: .add/.add-row/.eq set their own `display`, which (being an
      author rule) outranks the UA [hidden]{display:none} default — without
      this, a [hidden] .add/.add-row/.eq stays visible and laid out ── */
.add[hidden],.add-row[hidden],.eq[hidden]{display:none}

/* ── single-row 5-tile strip (Build the Line / Ladder / Substitution /
      Left-to-right / Broken sequence / Practice spins) ── */
.pw-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pw-row .tile{aspect-ratio:var(--tile-r)/1}
.pw-row-lb{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-bottom:4px}
.pw-row-lb span{text-align:center;font-weight:700;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}

/* a tile that is on screen but does not count toward the line in question */
.pw-stray{opacity:.4;outline:2px dashed var(--muted);outline-offset:-2px}
.pw-break{outline:2px dashed var(--red);outline-offset:-2px}

/* dashed "does not connect" path, layered into an existing .pl-layer svg */
.pw-dash{stroke-dasharray:5 7;opacity:.5}

/* ── mini reference diagram: a 5x3 dot grid + one traced path (Section 2
      shapes, Section 18 stake pair, Section 20 ten-line grid) ── */
.pw-mini{text-align:center}
.pw-mini-svg{width:100%;height:auto;aspect-ratio:300/180;overflow:visible}
.pw-dot{fill:#D9C696}
.pw-mu{fill:none;stroke:#0B2B52;stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.pw-mo{fill:none;stroke:var(--gold);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.pw-mini-cap{margin-top:.5rem;font-size:.84rem;font-weight:700;color:var(--ink-2)}
.pw-mini-cap b{color:var(--turq-dk)}

.pw-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,20px)}
.pw-trio .pw-mini{background:var(--card);border:2px solid var(--line);border-radius:12px;padding:clamp(10px,1.4vw,16px)}

.pw-ten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(8px,1.2vw,14px);margin-bottom:1.2rem}
.pw-ten .pw-mini{background:var(--card);border:1.5px solid var(--line);border-radius:10px;padding:.6rem}

.pw-combo-box{max-width:420px;margin:0 auto;background:var(--card);border:2px solid var(--gold-dk);
  border-radius:14px;padding:clamp(14px,2vw,20px)}
.pw-combo-paths .pw-combo-path{fill:none;stroke:var(--gold-dk);stroke-width:3;opacity:.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ── payline explorer / win groups / playback groups / one-symbol groups:
      one shared "path group" opacity pattern, avoids the SVG [hidden]
      quirk entirely (same technique already proven on the Wild Symbol
      page's .wh-pl) ── */
.pw-pg,.pw-eg,.pw-wg,.pw-pbg,.pw16g{opacity:0;transition:opacity .22s ease-out}
.pw-pg.on,.pw-eg.on,.pw-wg.on,.pw-pbg.on,.pw16g.on{opacity:1}
.pw-eg.dim{opacity:.3}

.pw-expl-btns{display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.4vw,14px);
  flex-wrap:wrap;margin-top:1rem}
.pw-expl-nav{min-width:44px;min-height:44px;padding:.5rem .9rem;border-radius:9px;
  font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);
  background:#FBF1D6;border:1.5px solid var(--stone-dk);cursor:pointer;
  transition:background .2s,color .2s,border-color .2s}
.pw-expl-nav:hover{background:var(--turq-lt);border-color:var(--turq-dk)}

/* ── quiz answer buttons (How Many Lines?) — reuse .pl-btn sizing, wider ── */
.pw-ans{display:flex;flex-wrap:wrap;gap:8px;margin-top:.9rem}

/* ── practice mode: five stacked challenge cards ── */
.pw-spins{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(12px,1.8vw,18px)}
.pw-spin{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,1.8vw,20px)}
.pw-spin-hd{display:flex;align-items:center;gap:.8rem;margin-bottom:.8rem;flex-wrap:wrap;
  justify-content:space-between}
.pw-spin-hd h3{font-family:var(--orn);font-weight:900;font-size:.95rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink)}

/* ── responsive ── */
@media(max-width:980px){
  .pw-trio{grid-template-columns:1fr}
}
@media(max-width:760px){
  .pw-ten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pw-row-lb span{font-size:.54rem}
}
@media(max-width:560px){
  .pw-row{gap:4px}
}
@media(prefers-reduced-motion:reduce){
  .pw-pg,.pw-eg,.pw-wg,.pw-pbg,.pw16g,.pw-expl-nav{transition:none}
}