/* ═══════════════════════════════════════════════════════════
   EYE OF HORUS HIT FREQUENCY — page-specific styles (hf- namespace)
   Visual language: a spin-result matrix (squares = spins), not a
   reel mockup and not a bankroll line chart — deliberately distinct
   from every other page on the site.
   ═══════════════════════════════════════════════════════════ */

.hf-h2{font-family:var(--dsp);font-weight:900;color:var(--ink);
  font-size:clamp(1.4rem,3vw,2.1rem);margin:.3rem 0 1.2rem;line-height:1.18}
.hf-neg{color:var(--red)!important}
.hf-good{color:#1E7D3B!important}

/* ── base spin-tile unit, reused everywhere (wall / board / legend / giant) ──
   Every state pairs an icon + border style + text label — never colour alone. */
.hf-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.15rem;border-radius:8px;border:2px solid var(--line);background:#FBF1D6;
  font-family:var(--ui);color:var(--ink-2);text-align:center;overflow:hidden}
.hf-tile .hf-ic{display:block;line-height:1;font-size:clamp(.85rem,2.4vw,1.3rem);font-weight:900}
.hf-tile .hf-lb{font-weight:900;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;line-height:1.1}
.hf-tile .hf-vl{font-family:var(--dsp);font-weight:900;font-size:.78rem;line-height:1.1}
.hf-tile.none{border-style:dashed;border-color:var(--stone-dk);background:#F2EBDA;color:var(--muted)}
.hf-tile.none .hf-ic{color:var(--muted)}
.hf-tile.partial{border-color:var(--gold-dk);background:linear-gradient(178deg,#FFF6DC,#F7E2AE)}
.hf-tile.partial .hf-ic{color:var(--gold-dk)}
.hf-tile.even{border-color:var(--sky-dk);background:#E7F1FB}
.hf-tile.even .hf-ic{color:var(--sky-dk)}
.hf-tile.profit{border-style:solid;border-width:3px;border-color:#1E7D3B;background:#E9F8EC}
.hf-tile.profit .hf-ic{color:#1E7D3B}
.hf-tile.feature{border-color:var(--purple);background:linear-gradient(178deg,#F4ECFC,#E3D2F7);
  box-shadow:0 0 0 3px rgba(123,63,196,.2)}
.hf-tile.feature .hf-ic{color:var(--purple)}
.hf-tile.dim{opacity:.22}

/* ── legend ── */
.hf-legend{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.hf-legend .hf-tile{aspect-ratio:1/1;padding:6px}
.hf-legend .hf-tile .hf-lb{font-size:.64rem}
.hf-legend .hf-tile .hf-vl{font-size:.72rem}

/* ── 20-spin wall ── */
.hf-wall{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px}
.hf-wall .hf-tile{aspect-ratio:1/1;padding:4px}
.hf-wall .hf-tile .hf-lb{font-size:.54rem}
.hf-wall .hf-tile .hf-vl{font-size:.62rem}
.hf-sumstrip{display:flex;flex-wrap:wrap;gap:0;margin-top:1rem;border-radius:12px;overflow:hidden;
  border:2px solid var(--gold-dk);background:linear-gradient(178deg,#FFF6DC,#F7E2AE)}
.hf-sumstrip>div{flex:1 1 120px;min-width:0;text-align:center;padding:.7rem .5rem;
  border-right:1px solid rgba(184,122,12,.35)}
.hf-sumstrip>div:last-child{border-right:none}
.hf-sumstrip>div span{display:block;font-family:var(--orn);font-weight:700;font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:#8A6B34}
.hf-sumstrip>div b{display:block;font-family:var(--dsp);font-weight:900;font-size:clamp(1.05rem,2vw,1.35rem);color:var(--ink)}

/* ── 100-spin board ── */
.hf-board-stats{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px);justify-content:center;margin-bottom:1rem}
.hf-board-stats div{text-align:center}
.hf-board-stats span{display:block;font-family:var(--orn);font-weight:700;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hf-board-stats b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:var(--ink)}
.hf-board-toggles{margin-bottom:1rem}
.hf-board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;min-width:460px}
.hf-board .hf-tile{aspect-ratio:1/1;padding:2px;border-radius:5px}
.hf-board .hf-tile .hf-ic{display:none}
.hf-board .hf-tile .hf-lb{display:none}
.hf-board .hf-tile .hf-vl{display:none;font-size:.56rem}
.hf-board.show-hits .hf-tile.none{opacity:.45}
.hf-board.show-returns .hf-tile .hf-vl{display:block}
.hf-board.show-returns .hf-tile.none .hf-vl{display:none}
.hf-board.profitable-only .hf-tile:not(.profit):not(.feature){opacity:.16}
.hf-board.profitable-only .hf-tile.profit,
.hf-board.profitable-only .hf-tile.feature{box-shadow:0 0 0 2px var(--gold)}

/* ── one hit, three outcomes ── */
.hf-giant-viz{max-width:540px;margin:0 auto}
.hf-giant{width:min(100%,260px);aspect-ratio:1/1;margin:0 auto 1rem;border-radius:16px;
  border:4px solid var(--gold-dk);background:linear-gradient(178deg,#FFF6DC,#F7E2AE);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;
  box-shadow:0 10px 26px rgba(90,60,10,.2)}
.hf-giant-label{font-family:var(--orn);font-weight:900;font-size:1rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink)}
.hf-giant-mult{font-family:var(--dsp);font-weight:900;font-size:2.4rem;color:var(--gold-dk)}
.hf-giant-out{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px);justify-content:center;margin-top:1rem}
.hf-giant-out div{text-align:center}
.hf-giant-out span{display:block;font-family:var(--orn);font-weight:700;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hf-giant-out b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:var(--ink)}

/* ── five lines, one hit ── */
.hf-lines-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;max-width:460px;margin:0 auto;
  min-width:300px}
.hf-lines-grid .hf-cell{aspect-ratio:var(--tile-r)/1;border-radius:4px;border:2px solid var(--line);
  background:#FBF1D6;display:flex;align-items:center;justify-content:center;position:relative}
.hf-lines-grid .hf-cell.win{border-color:var(--turq-dk);background:linear-gradient(178deg,#D8FAFB,#8DE0E4);
  box-shadow:inset 0 0 10px rgba(14,124,131,.4)}
.hf-lines-grid .hf-cell.wild{background:linear-gradient(178deg,#36AFB6,#0E7C83);border-color:var(--gold)}
.hf-lines-grid .hf-cell b{font-family:var(--orn);font-weight:900;font-size:.62rem;color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5)}
.hf-lines-out{display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,28px);justify-content:center;margin-top:1rem}
.hf-lines-out div{text-align:center}
.hf-lines-out span{display:block;font-family:var(--orn);font-weight:700;font-size:.62rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.hf-lines-out b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.5rem;color:var(--turq-dk)}

/* ── hits vs rtp compare ── */
.hf-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,18px);margin-bottom:.8rem}
.hf-compcard{background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:clamp(14px,1.8vw,18px)}
.hf-compcard h4{font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.hf-compstat{display:flex;justify-content:space-between;gap:.6rem;padding:.35rem 0;
  border-bottom:1px dashed #E3D3AB;font-size:.88rem;color:var(--body)}
.hf-compstat:last-child{border-bottom:none}
.hf-compstat b{font-family:var(--dsp);font-weight:900;color:var(--ink)}

/* ── decoder ── */
.hf-decoder{margin-top:1.4rem;padding:clamp(18px,3vw,30px);border-radius:16px;text-align:center;
  background:linear-gradient(168deg,#16386F,#0E2450);border:2px solid var(--gold-dk)}
.hf-decoder-line{font-family:var(--dsp);font-weight:900;color:#FFE89A;
  font-size:clamp(1.2rem,3.6vw,2.1rem);line-height:1.3;margin-bottom:.9rem}
.hf-decoder-ne{color:var(--red);padding:0 .15em}
.hf-decoder .note{color:#C8D8F0}

/* ── counter / lab shared "big stat" grid ── */
.hf-counter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:.8rem}
.hf-counter-grid div{text-align:center;padding:.6rem .4rem;border-radius:11px;background:var(--card);
  border:1.5px solid var(--line)}
.hf-counter-grid span{display:block;font-family:var(--orn);font-weight:700;font-size:.58rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hf-counter-grid b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.35rem;color:var(--ink)}
.hf-official{text-align:center;font-weight:700;font-size:.86rem;color:var(--ink-2);margin-bottom:1rem}
.hf-official strong{color:var(--red)}
.hf-counter-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:.4rem}
.hf-resetbtn{min-height:44px}
.hf-history{margin-top:1rem;border-top:1px dashed #E3D3AB;padding-top:.8rem}
.hf-history-t{font-family:var(--orn);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.5rem;text-align:center}
.hf-history-list{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hf-history-list span{font-size:.82rem;font-weight:700;padding:.35rem .7rem;border-radius:999px;
  background:#FBF1D6;border:1.5px solid var(--line);color:var(--ink-2)}

/* ── live log ── */
.hf-logviz{margin-top:1.2rem}
.hf-log-filters{margin-bottom:.8rem}
.hf-log{display:flex;flex-direction:column;gap:4px;max-height:260px;overflow-y:auto;
  border-radius:10px;border:1.5px solid var(--line);background:var(--card);padding:6px}
.hf-logrow{display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:.6rem;align-items:center;
  padding:.4rem .6rem;border-radius:7px;font-size:.82rem;color:var(--ink-2)}
.hf-logrow:nth-child(odd){background:#FBF1D6}
.hf-logrow .hf-logn{font-family:var(--orn);font-weight:700;color:var(--muted);font-size:.72rem}
.hf-logrow b{font-family:var(--dsp);font-weight:900;color:var(--ink)}
.hf-logrow.profit b{color:#1E7D3B}
.hf-logrow.hit .hf-logtag{color:var(--gold-dk)}
.hf-logempty{padding:1rem;text-align:center;color:var(--muted);font-size:.85rem}

/* ── streaks ── */
.hf-streakgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,18px)}
.hf-streakcard{background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:clamp(12px,1.7vw,18px)}
.hf-streakcard h4{font-family:var(--orn);font-weight:900;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.7rem}
.hf-streakrow{display:flex;flex-wrap:wrap;gap:6px}
.hf-schip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;
  padding:0 .4rem;border-radius:7px;font-family:var(--dsp);font-weight:900;font-size:.78rem;
  border:1.5px solid var(--line);background:#FBF1D6;color:var(--ink)}
.hf-schip.w{background:#E9F8EC;border-color:#1E7D3B;color:#1E7D3B}
.hf-schip.l{background:#F2EBDA;border-color:var(--stone-dk);color:var(--muted)}
.hf-nextspin{margin-top:.8rem;font-weight:700;color:var(--ink-2);font-size:.9rem}
.hf-nextspin strong{color:var(--turq-dk);font-family:var(--dsp);font-size:1.1rem}

/* ── fake schedule ── */
.hf-schedule{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,18px);margin-top:1.4rem}
.hf-schedule-col{background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:clamp(12px,1.7vw,18px);text-align:center}
.hf-schedule-col.bad{border-color:var(--red);background:#FDEDEB}
.hf-schedule-col h4{font-family:var(--orn);font-weight:900;font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.7rem}
.hf-schedrow{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:.7rem}
.hf-schedtag{display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:30px;
  padding:0 .4rem;border-radius:6px;font-weight:800;font-size:.66rem;letter-spacing:.04em;
  border:1.5px solid var(--line);background:#FBF1D6;color:var(--ink-2)}
.hf-schedtag.hit{background:#E9F8EC;border-color:#1E7D3B;color:#1E7D3B}
.hf-schedtag.no{background:#F2EBDA;color:var(--muted)}
.hf-schedrow.strike{opacity:.8}
.hf-schedrow.strike .hf-schedtag{position:relative}
.hf-schedrow.strike .hf-schedtag::after{content:'';position:absolute;left:-2px;right:-2px;top:50%;
  height:2px;background:var(--red);transform:rotate(-8deg)}
.hf-schedcap{font-weight:800;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}
.hf-schedcap.ok{color:#1E7D3B}

/* ── partial-return counter ── */
.hf-partialgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.6vw,14px)}
.hf-partialcard{text-align:center;padding:clamp(12px,1.6vw,16px);border-radius:13px;background:var(--card);
  border:2px solid var(--line)}
.hf-partialcard span{display:block;font-family:var(--orn);font-weight:700;font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hf-partialcard b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.9rem;color:var(--ink);margin:.2rem 0}
.hf-partialcard small{font-size:.72rem;color:var(--muted);line-height:1.3}
.hf-partialcard.feature{border-color:var(--purple);background:#F4ECFC}
.hf-partialcard.feature b{color:var(--purple)}

/* ── one strong feature panel ── */
.hf-featurebars{display:grid;gap:10px;max-width:640px;margin:0 auto}
.hf-featurebar{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.8rem 1rem;border-radius:11px;border:2px solid var(--line);background:#FBF1D6}
.hf-featurebar span{font-weight:700;font-size:.88rem;color:var(--ink-2)}
.hf-featurebar b{font-family:var(--dsp);font-weight:900;font-size:1.3rem;color:var(--ink)}
.hf-featurebar.feature{border-color:var(--purple);background:#F4ECFC}
.hf-featurebar.feature b{color:var(--purple)}

/* ── appearance vs hit three-state ── */
.hf-threegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,18px)}
.hf-threecard{background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:clamp(12px,1.7vw,18px)}
.hf-threecard h4{font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.hf-threerow{display:flex;justify-content:space-between;align-items:center;gap:.7rem;
  padding:.5rem .6rem;border-radius:9px;margin-bottom:.4rem;font-size:.85rem;color:var(--ink-2)}
.hf-threerow b{font-family:var(--dsp);font-weight:900;color:var(--ink)}
.hf-threerow.no{background:#F2EBDA}
.hf-threerow.partial{background:linear-gradient(90deg,#FFF6DC,#F7E2AE)}
.hf-threerow.yes{background:#E9F8EC}
.hf-threerow.yes b{color:#1E7D3B}

/* ── speed strip ── */
.hf-speedgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,2vw,18px)}
.hf-speedcard{background:var(--card);border:2px solid var(--line);border-radius:13px;
  padding:clamp(12px,1.7vw,18px);text-align:center}
.hf-speedcard h4{font-family:var(--orn);font-weight:900;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink);margin-bottom:.6rem}
.hf-speedstat{display:flex;justify-content:space-between;padding:.3rem 0;border-bottom:1px dashed #E3D3AB;
  font-size:.85rem;color:var(--body)}
.hf-speedstat:last-child{border-bottom:none}
.hf-speedstat b{font-family:var(--dsp);font-weight:900;color:var(--ink)}

/* ── mute demo ── */
.hf-mutedemo{display:flex;flex-wrap:wrap;align-items:center;gap:1.2rem;justify-content:center}
.hf-mutetile{flex:0 0 auto;width:180px;padding:1rem;border-radius:13px;text-align:center;
  border:2px solid var(--gold-dk);background:linear-gradient(178deg,#FFF6DC,#F7E2AE)}
.hf-mutelabel{display:block;font-family:var(--orn);font-weight:900;font-size:.8rem;letter-spacing:.1em;
  color:var(--ink);margin-bottom:.3rem}
.hf-soundicon{width:26px;height:26px;fill:var(--gold-dk);margin:0 auto .4rem;display:block;
  transition:opacity .2s}
.hf-mutetile.muted .hf-soundicon{opacity:.18}
.hf-mutetile b{display:block;font-size:.78rem;font-weight:800;color:#8A5C05;line-height:1.4}

/* ── scoreboard ── */
.hf-scoreboard{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.hf-scorecell{background:linear-gradient(178deg,#16386F,#0E2450);border:2px solid var(--gold-dk);
  border-radius:11px;padding:.7rem .5rem;text-align:center}
.hf-scorecell span{display:block;font-family:var(--orn);font-weight:700;font-size:.58rem;
  letter-spacing:.08em;text-transform:uppercase;color:#A9CBEE}
.hf-scorecell b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.25rem;color:#FFE89A;margin-top:.2rem}
.hf-scorecell.net b{color:#FF9A8A}

/* ── misleading score ── */
.hf-misleading{max-width:420px;margin:1.2rem auto 1.6rem;background:var(--card);border:2px solid var(--line);
  border-radius:13px;padding:clamp(12px,1.7vw,18px)}
.hf-mislrow{display:flex;justify-content:space-between;align-items:center;padding:.4rem 0;
  border-bottom:1px dashed #E3D3AB;font-weight:700;color:var(--ink-2)}
.hf-mislrow:last-of-type{border-bottom:none}
.hf-mislrow b{font-family:var(--dsp);font-weight:900;font-size:1.2rem;color:var(--ink)}
.hf-mislrow.result{margin-top:.3rem;padding-top:.6rem;border-top:2px solid var(--line);border-bottom:none}
.hf-mislrow.result b{font-size:1.5rem}

/* ── the lab ── */
.hf-lab-presets{margin-bottom:1.2rem}
.hf-slider-row{margin-bottom:1.1rem}
.hf-slider-row label{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;
  font-weight:700;font-size:.85rem;color:var(--ink-2);margin-bottom:.4rem}
.hf-slider-row label b{font-family:var(--dsp);font-weight:900;font-size:1.05rem;color:var(--turq-dk)}
.hf-slider-row input[type=range]{width:100%;height:30px;accent-color:var(--turq-dk);cursor:pointer}
.hf-lab-out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:1rem}
.hf-lab-out div{text-align:center;padding:.6rem .4rem;border-radius:11px;background:var(--card);
  border:1.5px solid var(--line)}
.hf-lab-out span{display:block;font-family:var(--orn);font-weight:700;font-size:.58rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hf-lab-out b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.3rem;color:var(--ink)}

/* ── three-number strip ── */
.hf-threenum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.6vw,16px)}
.hf-numcard{text-align:center;padding:clamp(14px,1.8vw,20px);border-radius:13px;background:var(--card);
  border:2px solid var(--line)}
.hf-numcard b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.3rem;color:var(--ink);margin-bottom:.3rem}
.hf-numcard span{font-size:.82rem;color:var(--muted);line-height:1.4}

/* ── quick reading rule ── */
.hf-quickviz{text-align:center}
.hf-quicksteps{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:1.1rem}
.hf-quickstep{flex:1 1 140px;max-width:180px;padding:.8rem .6rem;border-radius:11px;background:var(--card);
  border:2px dashed var(--stone-dk);text-align:center;transition:border-color .3s,background .3s,transform .3s}
.hf-quickstep.on{border-style:solid;border-color:var(--turq-dk);background:#E8F8F8;transform:translateY(-3px)}
.hf-quickstep span{display:block;font-family:var(--orn);font-weight:700;font-size:.64rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.hf-quickstep b{display:block;font-family:var(--dsp);font-weight:900;font-size:1.2rem;color:var(--stone-dk);margin-top:.25rem;
  transition:color .2s}
.hf-quickstep.on b{color:var(--ink)}
.hf-quickstep.on.neg b{color:var(--red)}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:980px){
  .hf-compare,.hf-streakgrid,.hf-schedule,.hf-threegrid,.hf-speedgrid,.hf-splitblock,.hf-sessions{
    grid-template-columns:1fr}
}
@media(max-width:760px){
  .hf-wall{grid-template-columns:repeat(5,minmax(0,1fr))}
  .hf-legend{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-partialgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-scoreboard{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-counter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-lab-out{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hf-threenum{grid-template-columns:1fr}
  .grid-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .grid-scroll::after{content:"Swipe to see the full 100-spin board";display:block;
    margin-top:.5rem;font-size:.74rem;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--turq-dk)}
  /* mobile: icons only, numbers shown above the tile rather than inside it */
  .hf-board{min-width:420px}
  .hf-board .hf-tile .hf-ic{display:block;width:50%;height:50%}
  .hf-board.show-returns .hf-tile .hf-vl{position:absolute;top:-14px;left:0;right:0;font-size:.5rem;
    background:none;display:block}
}
@media(max-width:560px){
  .hf-legend{grid-template-columns:1fr 1fr}
  .hf-partialgrid{grid-template-columns:1fr}
  .hf-scoreboard{grid-template-columns:1fr 1fr}
  .hf-mutedemo{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  .hf-quickstep{transition:none}
}