/* EYE OF HORUS SYMBOLS & PAYTABLE — page-specific layer
   (tokens + .tt-*/.viz/.ladder/.vpanel/.nbox/.stage-btns/.sbtn/.wsteps/.sess
   etc inherited from layer.css; do not redeclare those here) */

.sy-h2{font-family:var(--dsp);font-weight:900;color:var(--ink);
  font-size:clamp(1.4rem,3vw,2.1rem);margin:.3rem 0 1rem}

/* ── real HTML paytable ── */
table.paytable{width:100%;border-collapse:collapse;background:var(--card);
  border:2px solid var(--line);border-radius:14px;overflow:hidden;
  box-shadow:0 6px 20px rgba(90,60,10,.1)}
table.paytable caption{text-align:left;padding:clamp(12px,1.8vw,18px) clamp(14px,2vw,20px) 0;
  font-size:.8rem;line-height:1.5;color:var(--muted);caption-side:top}
table.paytable thead th{font-family:var(--orn);font-weight:700;font-size:.68rem;
  letter-spacing:.1em;text-transform:uppercase;color:#FFF6D8;text-align:left;
  background:var(--ink-2);padding:.7rem clamp(.6rem,1.4vw,1rem)}
table.paytable tbody th,table.paytable tbody td{padding:.62rem clamp(.6rem,1.4vw,1rem);
  font-size:.92rem;border-bottom:1px solid var(--line)}
table.paytable tbody th{text-align:left;font-weight:700;color:var(--ink-2);white-space:nowrap}
table.paytable tbody td{color:var(--body);font-weight:600;font-variant-numeric:tabular-nums}
table.paytable tbody tr:last-child th,table.paytable tbody tr:last-child td{border-bottom:none}
table.paytable tbody tr:nth-child(even){background:rgba(231,214,170,.28)}
.tbl-scroll.grid-scroll::after{content:none}
@media(max-width:560px){
  table.paytable thead th,table.paytable tbody th,table.paytable tbody td{padding:.5rem .5rem;font-size:.82rem}
  table.paytable caption{font-size:.74rem;padding:.8rem .8rem 0}
}

/* ── special symbols note rows under the table ── */
.sp-symbols{margin-top:1.2rem}
.sp-row{display:flex;gap:.8rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px dashed #E3D3AB}
.sp-row:last-child{border-bottom:none}
.sp-ico{width:40px;height:40px;flex:0 0 auto}
.sp-row b{font-family:var(--orn);font-weight:900;font-size:.74rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-2)}
.sp-row p{margin:.25rem 0 0;font-size:.86rem;line-height:1.5;color:var(--body)}

/* ── symbol gallery ── */
.sgal{display:flex;gap:8px;overflow-x:auto;padding-bottom:8px;-webkit-overflow-scrolling:touch}
.sgal-btn{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  min-width:68px;min-height:64px;padding:.55rem .4rem;border-radius:10px;
  background:#FBF1D6;border:1.5px solid var(--stone-dk);cursor:pointer;
  transition:background .2s,border-color .2s}
.sgal-btn:hover{background:var(--turq-lt);border-color:var(--turq-dk)}
.sgal-btn[aria-pressed="true"]{background:var(--turq-dk);border-color:#08474B}
.sgal-btn[aria-pressed="true"] .sgal-lb{color:#FFF6D8}
.sgal-btn.sgal-special{border-style:dashed}
.sgal-ico{width:40px;height:40px;flex:0 0 auto}
.sgal-lb{font-size:.64rem;font-weight:700;letter-spacing:.02em;text-align:center;
  color:var(--ink-2);line-height:1.25;white-space:nowrap}

/* ── symbol info panel ── */
.sinfo{margin-top:1.1rem;padding:clamp(12px,1.8vw,18px);border-radius:12px;
  background:#FFFDF5;border:1.5px solid var(--line)}
.sinfo-name{font-family:var(--dsp);font-weight:900;font-size:1.2rem;color:var(--ink);margin-bottom:.5rem}
.sinfo-row{display:grid;grid-template-columns:minmax(110px,160px) minmax(0,1fr);
  gap:.6rem;padding:.4rem 0;border-top:1px dashed #E3D3AB;align-items:start}
.sinfo-row:first-of-type{border-top:none}
.sinfo-k{font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:#8A6B34}
.sinfo-v{font-size:.92rem;font-weight:700;color:var(--ink-2);line-height:1.5}

/* pay chips rendered inside #sinfoPays */
.pyo{display:flex;flex-wrap:wrap;gap:8px}
.pyo-chip{background:#FBF1D6;border:1.5px solid var(--line);border-radius:8px;
  padding:.35rem .65rem;text-align:center;min-width:62px}
.pyo-chip b{display:block;font-family:var(--dsp);font-weight:900;color:var(--turq-dk);font-size:1rem}
.pyo-chip span{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A6B34}

/* ── stake selector ── */
.stkrow{margin-top:1.1rem}
.stkbtns{display:flex;flex-wrap:wrap;gap:6px}
.stkbtn{min-width:54px;min-height:44px;padding:.4rem .65rem;border-radius:8px;
  font-weight:800;font-size:.84rem;color:var(--ink);background:#FBF1D6;
  border:1.5px solid var(--stone-dk);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.stkbtn:hover{background:var(--turq-lt);border-color:var(--turq-dk)}
.stkbtn[aria-pressed="true"]{background:var(--turq-dk);color:#FFF6D8;border-color:#08474B}

/* ── ladder callouts ── */
.ladder-callouts{margin-top:1rem;display:grid;gap:8px}
.lc{padding:.65rem .85rem;border-radius:10px;background:#FBF1D6;
  border:1.5px dashed var(--turq-dk);font-size:.84rem;line-height:1.5;color:var(--ink-2)}

/* ── prev/next control row (one-spin breakdown + payline lab) ── */
.rvctrl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:.9rem}
.rvctrl-lb{font-weight:800;font-size:.82rem;letter-spacing:.04em;color:var(--ink-2)}

/* ── Horus transformation line picker ── */
.hzlines{margin-top:1rem;padding-top:.8rem;border-top:1px dashed #E3D3AB}

/* ── does-this-win quiz ── */
.qzgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.quiz-card{padding:clamp(12px,1.7vw,18px);border-radius:13px;border:2px solid var(--line);background:var(--card);min-width:0}
.qz-t{font-family:var(--orn);font-weight:900;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.qz-mini{display:flex;gap:5px;justify-content:center;margin-bottom:.5rem}
.qz-mini .tile{width:44px;height:44px;flex:0 0 auto;padding:3px}
.qz-mini-zigzag{align-items:center;height:58px}
.qz-cap{font-size:.8rem;color:var(--muted);line-height:1.45;margin-bottom:.7rem;text-align:center}
.quiz-btns{display:flex;gap:8px;justify-content:center}
.quiz-reveal{margin-top:.8rem;padding:.65rem .8rem;border-radius:10px;background:#FBF1D6;border:1.5px solid var(--line)}
.quiz-reveal p{margin:0;font-size:.84rem;line-height:1.55;color:var(--ink-2)}
.sbtn.right{background:#E9F8EC;border-color:var(--green);color:#22863A}
.sbtn.wrong{background:#FDEDEB;border-color:var(--red);color:var(--red)}

/* ── 3/4/5 comparison ── */
.cmp-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,18px)}
.cmp-col{padding:clamp(12px,1.6vw,18px);border-radius:12px;border:2px solid var(--line);
  background:linear-gradient(178deg,#FFFDF5,#FBF1D6);text-align:center;min-width:0}
.cmp-col.cmp-top{border-color:var(--gold-dk);box-shadow:0 0 0 3px rgba(233,168,28,.18)}
.cmp-tiles{display:flex;gap:4px;justify-content:center;margin-bottom:.6rem}
.cmp-tiles .tile{width:36px;height:36px;flex:0 0 auto;padding:3px}
.cmp-k{font-weight:700;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:#8A6B34}
.cmp-v{font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:var(--ink);margin-top:.2rem}

/* ── busy vs simple screen ── */
.bvs-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,20px)}
.bvs-col{text-align:center;min-width:0}
.bvs-t{font-weight:800;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2);margin-bottom:.55rem}
.bvs-tag{display:inline-block;margin-top:.7rem;padding:.45rem .9rem;border-radius:999px;
  font-family:var(--orn);font-weight:900;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase}
.bvs-no{background:#FDEDEB;color:var(--red);border:1.5px solid var(--red)}
.bvs-yes{background:#E9F8EC;color:#22863A;border:1.5px solid var(--green)}

/* ── upgrade ladder preview ── */
.ugprev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}
.ugcol{padding:clamp(12px,1.6vw,16px);border-radius:12px;border:2px solid var(--line);background:var(--card);min-width:0}
.ugcol-t{font-family:var(--orn);font-weight:900;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--turq-dk);margin-bottom:.5rem}
.ugcol-d{margin:0;font-size:.86rem;line-height:1.5;color:var(--body)}

/* ── version warning ── */
.vwarn{display:flex;gap:.9rem;align-items:flex-start;padding:clamp(14px,2vw,20px);
  border-radius:13px;background:linear-gradient(168deg,#FFF8E6,#F7E2AE);border:2px solid var(--gold-dk)}
.vwarn svg{width:26px;height:26px;flex:0 0 auto;fill:var(--gold-dk);margin-top:.15rem}
.vwarn-t{font-family:var(--dsp);font-weight:900;font-size:1.02rem;color:var(--ink);margin-bottom:.3rem}
.vwarn p{margin:0;font-size:.88rem;line-height:1.55;color:var(--ink-2)}
.vwarn p.vwarn-t{margin-bottom:.3rem}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:760px){
  .qzgrid{grid-template-columns:minmax(0,1fr)}
  .cmp-row{grid-template-columns:minmax(0,1fr)}
  .bvs-row{grid-template-columns:minmax(0,1fr)}
  .ugprev{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .sinfo-row{grid-template-columns:1fr;row-gap:.15rem}
}