/* ═══════════════════════════════════════════════════════════
   EYE OF HORUS WINNING COMBINATIONS — page-specific layer.
   Everything here is namespaced with a wc- prefix to avoid any
   collision with the Symbols-and-Paytable / Paylines pages'
   similarly-shaped case/quiz components. Shared classes (.tip,
   .viz, .grid-shell, .pl-layer, .sess, .vpanel, .chip, .sbtn,
   .wsteps, .qgrid, .gtile, .nbox …) are reused as-is from
   chrome/layer.css, never redeclared here.
   ═══════════════════════════════════════════════════════════ */

/* .qgrid/.qitem is normally used inside the dark .quick section, where
   .qitem p is styled near-white; reused here on a light background for
   the Five Main Combination Types list, so the text colour needs to
   flip to stay readable */
.wc-qlight.qgrid{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px)}
.wc-qlight .qitem{background:#FBF1D6;border:1.5px solid var(--line)}
.wc-qlight .qitem p{color:var(--body)}

/* a highlighted "this is the matching symbol" tile, used across
   the static cases instead of the homepage's .tile.hot (kept
   distinct so a future page can't silently change this page's
   highlight by restyling .hot) */
.tile.wc-hot{background:radial-gradient(circle at 50% 46%,#FFEBB4,#EFD08A 62%,#E0B96A);
  border-color:#D6A93C;box-shadow:inset 0 0 14px rgba(255,200,80,.7),0 1px 3px rgba(90,60,10,.28)}

/* case shell: every Case 01-22 is a .tip, this only adds spacing
   tweaks specific to this page's density */
.wc-case{scroll-margin-top:76px}
.wc-case .viz{scroll-margin-top:76px}

/* free-spins framed cases (16, 17) get a distinct side accent */
.wc-fs{border-left:4px solid var(--turq-dk);padding-left:clamp(10px,2vw,18px)}
@media(max-width:760px){.wc-fs{padding-left:12px}}

/* illustrative-figure label, used on Cases 20-22 */
.wc-illu{display:inline-block;margin-top:.3rem;padding:.35rem .7rem;border-radius:999px;
  background:#FDEDEB;border:1.5px solid var(--red);color:#8A2418;
  font-weight:700;font-size:.76rem;letter-spacing:.03em}

/* ═══ SVG hidden backstop (Blink doesn't always apply the UA
   default to SVG <path>/<g> elements) ═══ */
.pl-layer [hidden]{display:none}

/* ═══ COMBINATION FILTER + CASE INDEX ═══ */
.wc-filtersec{background:#FBF3DE;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.wc-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:1.2rem}
.wc-ctile{display:block;padding:.75rem .9rem;border-radius:10px;background:#FFFDF5;
  border:1.5px solid var(--line);font-weight:700;font-size:.84rem;color:var(--ink-2);
  line-height:1.35;transition:border-color .2s,background .2s,transform .2s}
.wc-ctile:hover{border-color:var(--turq-dk);background:#FFFFFF;transform:translateY(-2px)}
.wc-ctile[hidden]{display:none}

/* ═══ REEL INSPECTOR ═══ */
.wc-insp-label{display:block;font-weight:800;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8A6B34;margin-bottom:.35rem}
.wc-select{display:block;width:100%;max-width:360px;min-height:44px;padding:.5rem .8rem;
  border-radius:9px;border:1.5px solid var(--stone-dk);background:#FFFDF5;
  font-weight:700;font-size:.9rem;color:var(--ink-2);margin-bottom:1.1rem}
.wc-insp-toggles{display:flex;flex-wrap:wrap;gap:10px 18px;margin-bottom:1.2rem}
.wc-toggle{display:flex;align-items:center;gap:.5rem;font-weight:700;font-size:.85rem;
  color:var(--ink-2);cursor:pointer;min-height:44px}
.wc-toggle input{width:19px;height:19px;accent-color:var(--turq-dk);cursor:pointer}
.wc-inspector{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px)}
.wc-insp-panel[hidden]{display:none}
.wc-insp-match{outline:3px solid transparent;transition:outline-color .15s}
.wc-inspector.show-match .wc-insp-match{outline-color:var(--gold)}
.wc-inspector .wc-insp-pl{visibility:hidden}
.wc-inspector.show-lines .wc-insp-pl{visibility:visible}
.wc-inspector .wc-insp-wildcell{box-shadow:inset 0 0 16px rgba(14,124,131,.45),0 0 0 2px var(--gold),0 2px 6px rgba(10,70,75,.3)}
.wc-inspector:not(.show-wild) .wc-insp-wildcell{box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(90,60,10,.22);
  border-color:#BC9E62;background:linear-gradient(158deg,#EFDCB1,#DCC188 70%,#D2B678)}
.wc-insp-payout,.wc-insp-net,.wc-insp-wild{display:none;margin-top:.7rem}
.wc-inspector.show-payout .wc-insp-payout{display:block}
.wc-inspector.show-net .wc-insp-net{display:block}
.wc-inspector.show-wild .wc-insp-wild{display:block}

/* ═══ COMPARE TWO SPINS ═══ */
.wc-cmp-pickers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,20px);margin-bottom:1.2rem}
.wc-cmp-table{display:grid;gap:2px;background:var(--line);border:2px solid var(--line);
  border-radius:12px;overflow:hidden}
.wc-cmp-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);
  gap:10px;padding:.6rem .9rem;background:#FFFDF5;font-size:.88rem;color:var(--ink-2)}
.wc-cmp-row:first-child{background:#FBF1D6;font-weight:800}
.wc-cmp-k{font-weight:700;color:#8A6B34;font-size:.76rem;letter-spacing:.04em;text-transform:uppercase}

/* ═══ ANATOMY FORMULA ═══ */
.wc-formula{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .6rem}
.wc-formula-x{font-family:var(--orn);font-weight:900;font-size:1.15rem;color:var(--gold-dk)}

/* ═══ FAILURE GALLERY ═══ */
.wc-failgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}
.wc-failcard{background:var(--card);border:2px solid var(--line);border-radius:12px;
  padding:clamp(10px,1.4vw,14px);text-align:center}
.wc-failstrip{display:flex;justify-content:center;gap:6px;margin-bottom:.65rem}
.tile.sm{width:44px;height:44px;flex:0 0 auto;padding:5px;border-radius:3px}
.wc-fail-x{position:relative;border-color:var(--red)!important}
.wc-fail-x::after{content:'\2715';position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;color:var(--red);font-weight:900;font-size:1.1rem;
  background:rgba(253,237,235,.82)}
.wc-failcard p{margin:0;font-size:.8rem;line-height:1.4;color:var(--muted)}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1100px){
  .wc-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wc-failgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:760px){
  .wc-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-failgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wc-cmp-pickers{grid-template-columns:1fr}
  .wc-cmp-row{grid-template-columns:1fr 1fr 1fr;font-size:.78rem;padding:.5rem .6rem}
  .wc-insp-toggles{flex-direction:column;align-items:flex-start}
}
@media(max-width:520px){
  .wc-gallery{grid-template-columns:1fr}
  .wc-failgrid{grid-template-columns:1fr}
}