/* ═══════════════════════════════════════════════════════════
   EYE OF HORUS VOLATILITY — page-specific layer
   Namespaced "vol-" throughout to avoid any future collision
   with sibling pages' page-CSS. Reuses chrome/layer.css tokens
   (--turq/--turq-dk/--turq-lt/--stone/--stone-dk/--card) and
   components (.tt-wrap/.tt-sec/.tt-body/.viz/.tip-grid/.chip/
   .flow/.fbox/.farrow/.vcards/.vcard/.vpanel/.vrow/.tline/
   .tl-row/.chase/.chase-b/.stakes/.stake/.tt-quote/.quick/
   .qgrid/.qitem/.nbox/.rp/.grid-scroll) directly — see inline
   comments for which section reuses which shared class.
   ═══════════════════════════════════════════════════════════ */

/* fit 11 menu items is handled by chrome/navfit.css; nothing to touch here */

/* chrome/layer.css only turns .grid-scroll into a real horizontal scroller
   below 760px; this page uses it for a couple of wider fixed-min-width
   panels (the flow strip, the wave, the near-miss row) that can overflow
   in the 761-900px band too, so make the scroll behaviour unconditional. */
.grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── generic numeric-chain pills, reused everywhere a "£100 → 95 → 88"
     style run of figures appears (hero, sessions, free-spins strip,
     three-shapes, catch-up myth) ── */
.vol-seq{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem .6rem;margin:.7rem 0}
.vol-step{display:inline-flex;align-items:center;font-family:var(--dsp);font-weight:900;
  font-size:1.02rem;color:var(--ink);background:#FBF1D6;border:1.5px solid var(--line);
  border-radius:8px;padding:.3rem .65rem;white-space:nowrap}
.vol-step.hot{background:var(--turq-dk);color:#FFF6D8;border-color:#08474B}
.vol-arr{color:var(--muted);font-weight:700;font-size:.9rem}
.vol-seq.sm .vol-step{font-size:.88rem;padding:.22rem .52rem}

/* ═══ HERO BANKROLL PATH ═══ */
.vol-hero-chart{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px);box-shadow:0 6px 20px rgba(90,60,10,.1)}
.vol-chart-svg{display:block;width:100%;height:clamp(120px,16vw,190px)}
.vol-chart-svg .base{fill:none;stroke:var(--stone-dk);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.vol-chart-svg .jump{fill:none;stroke:var(--turq-dk);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.vol-chart-svg .dot{fill:#FFFDF5;stroke:var(--stone-dk);stroke-width:3}
.vol-chart-svg .dot.jdot{stroke:var(--turq-dk);fill:#FFF6D8}
.vol-badge-wrap{position:relative}
.vol-badge{position:absolute;top:4%;left:50%;transform:translateX(-50%);
  font-family:var(--orn);font-weight:900;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:#FFF6D8;background:var(--turq-dk);border:1.5px solid #08474B;border-radius:999px;
  padding:.28rem .7rem;white-space:nowrap;box-shadow:0 3px 8px rgba(14,124,131,.35)}

/* ═══ TWO PLAYER STORY ═══ */
.vol-players{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:clamp(14px,2vw,26px);align-items:stretch}
.vol-player{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,1.8vw,20px)}
.vol-player h3{font-family:var(--orn);font-weight:900;font-size:.84rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.vol-player ul{margin:0 0 .9rem 1.05rem}
.vol-player li{font-size:.88rem;line-height:1.6;color:var(--body);margin-bottom:.3rem}
.vol-fin{padding-top:.7rem;border-top:1px dashed #E3D3AB}
.vol-fin span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.vol-fin b{font-family:var(--dsp);font-weight:900;font-size:1.8rem;color:var(--ink)}
.vol-vs{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.45rem;min-width:120px;text-align:center}
.vol-vs b{font-family:var(--orn);font-weight:900;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--turq-dk);line-height:1.5}
.vol-vs em{font-style:normal;font-family:var(--dsp);font-weight:900;font-size:.86rem;color:var(--muted)}

/* ═══ VOLATILITY WAVE ═══ */
.vol-wave-svg{display:block;width:100%;height:clamp(90px,12vw,130px)}
.vol-wave-svg path{fill:none;stroke:var(--turq-dk);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.vol-wave-svg circle{fill:var(--gold);stroke:var(--gold-dk);stroke-width:2}
.vol-phases{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:.6rem;min-width:640px}
.vol-phase{text-align:center;font-weight:700;font-size:.72rem;line-height:1.35;color:var(--ink-2)}
.vol-phase b{display:block;font-family:var(--orn);font-weight:900;font-size:.6rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--turq-dk);margin-bottom:.15rem}

/* ═══ SAME GAME, DIFFERENT STAKE (tubes) ═══ */
.vol-tubes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px);
  align-items:end;text-align:center}
.vol-tube-top{font-family:var(--orn);font-weight:700;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8A6B34;margin-bottom:.4rem}
.vol-tube{position:relative;height:clamp(160px,22vw,230px);border-radius:14px 14px 6px 6px;
  border:2px solid var(--stone-dk);overflow:hidden;
  background-color:#CFF0F1;
  background-image:repeating-linear-gradient(180deg,var(--turq) 0,var(--turq) var(--slice,10px),
    var(--turq-dk) var(--slice,10px),var(--turq-dk) calc(var(--slice,10px)*2))}
/* each stripe is one betting unit — thinner stripes (more, smaller slices)
   for a smaller stake, thicker stripes (fewer, bigger slices) for a bigger one */
.vol-tube.t1{--slice:4px}
.vol-tube.t2{--slice:8px}
.vol-tube.t3{--slice:16px}
.vol-tube-n{font-family:var(--dsp);font-weight:900;font-size:clamp(1.4rem,2.6vw,1.9rem);
  color:var(--turq-dk);margin-top:.6rem}
.vol-tube-u{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* ═══ UNIT TOGGLE (reuses .stage-btns/.sbtn; only result display is custom) ═══ */
.vol-toggle-out{margin-top:1rem;padding:.9rem 1rem;border-radius:12px;text-align:center;
  background:linear-gradient(178deg,#FFF6DC,#F7E2AE);border:2px solid var(--gold-dk)}
.vol-toggle-out span{display:block;font-family:var(--orn);font-weight:700;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:#6B4E06}
.vol-toggle-out b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.25rem;color:#8A5C05;margin-top:.1rem}

/* ═══ THREE SESSION SHAPES ═══ */
.vol-shapes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,18px)}
.vol-shape{background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:clamp(12px,1.5vw,16px)}
.vol-shape h4{font-family:var(--orn);font-weight:900;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.5rem}
.vol-shape-svg{display:block;width:100%;height:70px;margin-bottom:.5rem}
.vol-shape-svg path{fill:none;stroke:var(--turq-dk);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.vol-shape-svg circle{fill:#FFF6D8;stroke:var(--turq-dk);stroke-width:2.5}
.vol-shape p{margin:0;font-size:.82rem;color:var(--body);line-height:1.5}

/* ═══ FOUR-TERM DISTINCTION (RTP / Volatility / Hit Frequency / Max Win) ═══ */
.vol-terms{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}
.vol-term{background:var(--card);border:2px solid var(--line);border-radius:12px;
  padding:clamp(12px,1.6vw,16px)}
.vol-term .mlabel{margin-top:0;font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--turq-dk);margin-bottom:.5rem}
.vol-term p{margin:0;font-size:.86rem;color:var(--body);line-height:1.55}
@media(max-width:760px){.vol-terms{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ═══ £1 WIN STILL LOST MONEY ═══ */
.vrow.flag{background:#FDEDEB;border-color:#E8B2AC}
.vrow.flag em{color:var(--red)}

/* ═══ FREE SPINS IMPACT STRIP ═══ */
/* declining path + .flow/.fbox/.farrow reused as-is from chrome/layer.css;
   `.wide` only adds two extra columns to the existing 3-col flow grid. */
.flow.wide{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr)}
@media(max-width:760px){.flow.wide{grid-template-columns:1fr}}

/* ═══ FEATURE DOES NOT MEAN BIG WIN (bonus doors) ═══ */
.vol-doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.8vw,18px)}
.vol-door{background:linear-gradient(178deg,#FFFDF5,#FBF1D6);border:2px solid var(--line);
  border-radius:13px;padding:clamp(14px,1.8vw,20px);text-align:center}
.vol-door-ico{width:54px;height:58px;margin:0 auto .7rem;display:flex;align-items:center;justify-content:center;
  font-family:var(--orn);font-weight:900;font-size:.76rem;color:#FFF6D8;
  background:linear-gradient(176deg,#2A63CE,#1B3E78 55%,#122C5C);border:2px solid var(--gold);
  clip-path:polygon(50% 0,100% 12%,100% 100%,0 100%,0 12%)}
.vol-door h4{font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.4rem}
.vol-door b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:var(--turq-dk);margin-bottom:.3rem}
.vol-door p{margin:0;font-size:.82rem;color:var(--body);line-height:1.5}

/* ═══ NEAR MISS STRIP ═══ */
.vol-nearmiss{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;min-width:620px}
.vol-nm-item{text-align:center;background:#FBF1D6;border:1.5px solid var(--line);border-radius:11px;
  padding:.7rem .4rem}
.vol-nm-item.res{background:var(--turq-dk);border-color:#08474B}
.vol-nm-item .scat-row{margin-bottom:.4rem}
.vol-nm-item p{margin:0;font-weight:700;font-size:.76rem;line-height:1.4;color:var(--ink-2)}
.vol-nm-item.res p{color:#FFF6D8;font-family:var(--orn);letter-spacing:.06em;text-transform:uppercase}

/* ═══ STAKE AMPLIFIER (slider) ═══ */
.vol-amp{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px)}
.vol-amp-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(14px,2vw,22px)}
.vol-amp-slider{flex:1 1 220px;min-width:0}
.vol-amp-slider input[type=range]{width:100%;height:8px;-webkit-appearance:none;appearance:none;
  background:linear-gradient(90deg,var(--turq-lt),var(--turq-dk));border-radius:999px;outline:none;cursor:pointer}
.vol-amp-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;
  border-radius:50%;background:linear-gradient(180deg,#FFE486,#EFA916);border:2px solid #B4780A;
  box-shadow:0 3px 8px rgba(150,100,10,.4);cursor:pointer}
.vol-amp-slider input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;
  background:linear-gradient(180deg,#FFE486,#EFA916);border:2px solid #B4780A;cursor:pointer}
.vol-amp-ticks{display:flex;justify-content:space-between;margin-top:.5rem;font-weight:700;
  font-size:.74rem;color:var(--muted)}
.vol-amp-out{flex:0 0 auto;display:flex;gap:clamp(16px,2.4vw,30px);text-align:center}
.vol-amp-out div span{display:block;font-family:var(--orn);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:#8A6B34}
.vol-amp-out div b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.7rem;color:var(--turq-dk)}

/* ═══ 30-UNIT DOWNSWING TABLE ═══ */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.vol-utable{width:100%;min-width:420px;border-collapse:collapse;margin-top:.6rem}
.vol-utable th,.vol-utable td{padding:.6rem .8rem;text-align:left;font-size:.9rem;
  border-bottom:1px solid var(--line)}
.vol-utable th{font-family:var(--orn);font-weight:900;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8A6B34;background:#FBF1D6}
.vol-utable td b{font-family:var(--dsp);font-weight:900;color:var(--turq-dk);font-size:1.02rem}
.vol-utable tr:last-child td{border-bottom:none}

/* ═══ BETTING UNIT TOOL / SESSION SETUP TOOL (shared field styling) ═══ */
.vol-field{display:flex;flex-direction:column;gap:.35rem;flex:1 1 140px;min-width:0}
.vol-field label{font-weight:700;font-size:.78rem;letter-spacing:.04em;color:var(--ink-2)}
.vol-field .u{position:relative}
.vol-field .u span{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);
  font-weight:700;color:var(--muted);pointer-events:none}
.vol-field input,.vol-field select{width:100%;min-height:44px;border-radius:9px;
  border:1.5px solid var(--stone-dk);background:#FFFDF5;padding:.5rem .7rem;font:inherit;
  font-weight:700;color:var(--ink);font-size:.95rem}
.vol-field .u input{padding-left:1.6rem}
.vol-field input:focus-visible,.vol-field select:focus-visible{outline:3px solid var(--sky);outline-offset:1px}
.vol-calc2{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px)}
.vol-calc2-row{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,20px);align-items:flex-end}
.vol-calc2-out{flex:0 0 auto;text-align:center;padding:.5rem 1.1rem;border-radius:11px;
  background:linear-gradient(178deg,#24519A,#15336A 60%,#0F2550);border:2px solid var(--gold);
  min-width:140px}
.vol-calc2-out span{display:block;font-family:var(--orn);font-weight:700;font-size:.6rem;
  letter-spacing:.12em;text-transform:uppercase;color:#F3E3B6}
.vol-calc2-out b{display:block;font-family:var(--dsp);font-weight:900;font-size:2rem;color:#FFE89A}

/* ═══ LONG SESSION / RTP CATCH-UP MYTH ═══ */
.vol-catchup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.8vw,18px)}
.vol-myth{margin-top:1rem;padding:.85rem 1rem;border-radius:11px;background:#FDEDEB;
  border:2px solid var(--red)}
.vol-myth .no{display:block;font-size:.95rem;font-weight:700;color:var(--muted);text-decoration:line-through;
  text-decoration-color:var(--red);text-decoration-thickness:2px;margin-bottom:.35rem}
.vol-myth .yes{display:block;font-size:.92rem;font-weight:700;color:var(--ink-2)}

/* ═══ WHAT YOU CONTROL (circular diagram) ═══ */
.vol-circle-wrap{position:relative;max-width:560px;margin:0 auto;aspect-ratio:1/1}
.vol-circle-ring{position:absolute;inset:16%;border:2px dashed var(--stone-dk);border-radius:50%}
.vol-circle-core{position:absolute;inset:34%;border-radius:50%;
  background:linear-gradient(178deg,#23508F,#173A70 55%,#122F5E);border:3px solid var(--gold);
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  box-shadow:0 10px 26px rgba(18,44,92,.35);padding:6%}
.vol-circle-core svg{width:34%;height:auto;fill:#FFE89A;margin-bottom:.35rem}
.vol-circle-core b{font-family:var(--orn);font-weight:900;font-size:clamp(.56rem,1.6vw,.8rem);
  letter-spacing:.08em;text-transform:uppercase;color:#FFE89A;line-height:1.3}
.vol-chip{position:absolute;transform:translate(-50%,-50%);text-align:center;
  font-weight:800;font-size:clamp(.56rem,1.3vw,.74rem);line-height:1.25;
  padding:.4rem .55rem;border-radius:9px;max-width:108px;letter-spacing:.01em}
.vol-chip.cant{background:#FDEDEB;border:1.5px solid #E8B2AC;color:#8A2A22}
.vol-chip.can{background:#E8F8F8;border:1.5px solid var(--turq-dk);color:#08474B}
.vol-circle-legend{display:flex;justify-content:center;gap:clamp(16px,3vw,32px);margin-top:1.1rem;
  flex-wrap:wrap}
.vol-circle-legend span{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;
  font-size:.82rem;color:var(--ink-2)}
.vol-circle-legend i{width:13px;height:13px;border-radius:3px;flex:0 0 auto}
.vol-circle-legend i.cant{background:#FDEDEB;border:1.5px solid #E8B2AC}
.vol-circle-legend i.can{background:#E8F8F8;border:1.5px solid var(--turq-dk)}

/* ═══ SESSION SETUP TOOL ═══ */
.vol-setup{background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:clamp(14px,2vw,22px)}
.vol-setup-row{display:flex;flex-wrap:wrap;gap:clamp(12px,1.8vw,20px)}
.vol-setup-out{margin-top:1.1rem;padding:.9rem 1rem;border-radius:12px;text-align:center;
  background:linear-gradient(178deg,#FFF6DC,#F7E2AE);border:2px solid var(--gold-dk)}
.vol-setup-out span{display:block;font-family:var(--orn);font-weight:700;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:#6B4E06}
.vol-setup-out b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:#8A5C05;margin:.1rem 0}
.vol-setup-out small{display:block;font-size:.78rem;font-weight:600;color:#6B4E06;margin-top:.2rem}

/* ═══ QUICK VOLATILITY GUIDE (closer) ═══ */
.vol-eq-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.7rem;
  margin-bottom:1.6rem}
.vol-eq-item{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-radius:11px;
  background:rgba(255,249,230,.07);border:1.5px solid rgba(255,225,150,.28);min-width:0}
.vol-eq-item b{font-family:var(--orn);font-weight:900;font-size:.9rem;color:#FFE89A;white-space:nowrap}
.vol-eq-item span{font-size:.82rem;font-weight:600;color:#FFF6E2;line-height:1.35}
.vol-eq-op{font-family:var(--dsp);font-weight:900;font-size:1.3rem;color:#C8D8F0}
.vol-eq-close{text-align:center;font-weight:700;font-size:1rem;color:#FFE89A;max-width:60ch;
  margin:0 auto}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:980px){
  .vol-players{grid-template-columns:1fr}
  .vol-vs{flex-direction:row;justify-content:center;min-width:0;padding:.3rem 0}
  .vol-vs b{font-size:.64rem}
  .vol-eq-row{flex-direction:column;align-items:stretch}
  .vol-eq-op{display:none}
}
@media(max-width:760px){
  .vol-tubes{grid-template-columns:1fr}
  .vol-tube{height:120px}
  .vol-shapes{grid-template-columns:1fr}
  .vol-doors{grid-template-columns:1fr}
  .vol-catchup{grid-template-columns:1fr}
  .vol-amp-row{flex-direction:column;align-items:stretch}
  .vol-amp-out{justify-content:space-around}
  .vol-calc2-row{flex-direction:column;align-items:stretch}
  .vol-calc2-out{width:100%}
  .vol-setup-row{flex-direction:column}
}
@media(max-width:560px){
  .vol-circle-core b{font-size:.56rem}
  .vol-chip{font-size:.6rem;padding:.32rem .45rem;max-width:84px}
}
@media(max-width:760px){
  /* layer.css's .grid-scroll::after always says "Swipe to see all five
     reels" (written for the reel-mockup use case); none of this page's
     three grid-scroll panels are reels, so give them accurate wording. */
  .vol-scroll::after{content:"Swipe to see the rest"}
}
@media(prefers-reduced-motion:reduce){
  .vol-amp-slider input[type=range]{transition:none}
}