/* ============================================================
   Bonus bet page (Part 4) — extends style.css + guide.css
   Every class here is new; nothing in style.css or guide.css
   is overridden except where a bonus-only element opts in.
   ============================================================ */

:root{
  --bn-gold:#f7c948;
  --bn-gold-deep:#d99b06;
  --bn-ink:#4a3600;
  --bn-soft:#fdf3d8;
  --bn-soft-line:#f1e2b6;
}

/* ---------- shared small pieces ---------- */
.bn-plain{margin:16px 0 0;color:var(--muted);font-size:1rem;line-height:1.65;max-width:72ch}
.bn-plain strong{color:var(--navy)}
.bn-lead{margin:0 0 18px;color:var(--text);font-size:1.05rem;line-height:1.7;max-width:72ch}
.bn-opt-tag{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  background:rgba(255,255,255,.92);color:#2b4257;font-weight:700;font-size:.74rem;text-transform:uppercase;letter-spacing:.06em}
.bn-opt-tag svg{width:13px;height:13px;color:var(--bn-gold-deep)}

/* ---------- the bonus circle: the visual centre ---------- */
.bn-spot{display:inline-flex;flex-direction:column;align-items:center;gap:10px;flex:none}
.bn-spot__ring{width:118px;height:118px;border-radius:50%;display:grid;place-items:center;position:relative;
  border:3px solid var(--bn-gold);
  background:radial-gradient(circle at 50% 40%,rgba(255,244,205,.30) 0%,rgba(247,201,72,.14) 58%,rgba(247,201,72,0) 72%);
  box-shadow:0 0 0 6px rgba(247,201,72,.15),0 0 30px rgba(247,201,72,.45)}
.bn-spot__ring::after{content:"";position:absolute;inset:9px;border-radius:50%;border:2px dashed rgba(255,236,178,.55)}
.bn-spot__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);z-index:2;
  background:var(--bn-gold);color:var(--bn-ink);font-size:.62rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.bn-spot__cap{color:#fff;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:rgba(0,0,0,.24);padding:4px 12px;border-radius:999px}
.bn-spot--sm .bn-spot__ring{width:96px;height:96px}
.bn-spot--light .bn-spot__ring{border-color:var(--bn-gold-deep);
  background:radial-gradient(circle at 50% 40%,#fff8e2 0%,#fdf0c8 60%,#fdf6e3 100%);
  box-shadow:0 0 0 5px rgba(217,155,6,.12),0 8px 20px rgba(217,155,6,.24)}
.bn-spot--light .bn-spot__ring::after{border-color:rgba(217,155,6,.4)}
.bn-spot--light .bn-spot__cap{color:var(--bn-ink);background:#fdf0c8}
.bn-spot--empty .bn-spot__ring{border-style:dashed;border-color:rgba(255,255,255,.5);background:rgba(0,0,0,.16);box-shadow:none}
.bn-spot--empty .bn-spot__ring::after{display:none}

/* gold bonus chip — deliberately brighter than the muted main-bet chips */
.bn-chip{--c:#e8a51a;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;
  color:#3d2b00;font-weight:800;font-size:1.08rem;position:relative;isolation:isolate;flex:none;
  background:repeating-conic-gradient(var(--c) 0 32deg,#fff6da 32deg 60deg);
  box-shadow:0 4px 0 #a86f00,0 8px 16px rgba(168,111,0,.38)}
.bn-chip::before{content:"";position:absolute;inset:9px;border-radius:50%;
  background:linear-gradient(160deg,#ffdd76 0%,#e6a012 100%);border:2px solid rgba(255,255,255,.9);z-index:-1}
.bn-chip--sm{width:48px;height:48px;font-size:.86rem;box-shadow:0 3px 0 #a86f00,0 5px 10px rgba(168,111,0,.3)}
.bn-chip--sm::before{inset:7px}

/* hero: bonus row sits above the main circles and is visibly separated */
.bn-hero-bonus{display:flex;flex-direction:column;align-items:center;gap:10px}
.bn-hero-sep{width:min(100%,320px);display:flex;align-items:center;gap:10px;color:#eaf6f1;
  font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;opacity:.85}
.bn-hero-sep::before,.bn-hero-sep::after{content:"";flex:1;height:0;border-top:2px dashed rgba(255,255,255,.4)}

/* ---------- main bet vs bonus ---------- */
.bn-vs{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.bn-vs__card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column}
.bn-vs__card--bonus{border:2px solid var(--bn-gold-deep)}
.bn-vs__head{display:flex;align-items:center;gap:10px;padding:14px 20px;font-weight:800;font-size:.95rem;
  text-transform:uppercase;letter-spacing:.04em;background:var(--navy);color:#fff}
.bn-vs__head svg{width:18px;height:18px;color:#a8ecd9}
.bn-vs__card--bonus .bn-vs__head{background:var(--bn-gold);color:var(--bn-ink)}
.bn-vs__card--bonus .bn-vs__head svg{color:var(--bn-ink)}
.bn-vs__art{padding:20px 16px;display:flex;justify-content:center;background:#f4f9f7;border-bottom:1px solid var(--line)}
.bn-vs__list{margin:0;padding:8px 0;flex:1}
.bn-vs__row{display:flex;align-items:flex-start;gap:10px;padding:11px 20px;color:var(--text);
  font-size:1rem;line-height:1.5;border-top:1px solid var(--line)}
.bn-vs__row:first-child{border-top:0}
.bn-vs__row svg{width:18px;height:18px;flex:none;margin-top:3px}
.bn-vs__row--yes svg{color:var(--teal)}
.bn-vs__row--no svg{color:var(--coral)}
.bn-vs__row b{color:var(--navy);font-weight:800}
.bn-vs__foot{padding:13px 20px;background:#f4f9f7;border-top:1px solid var(--line);
  color:var(--muted);font-size:.9rem;line-height:1.5}
.bn-vs__card--bonus .bn-vs__foot{background:var(--bn-soft);color:#5c3f00;border-top-color:var(--bn-soft-line)}

/* ---------- bonus pay table ---------- */
.bn-pay-wrap{margin-top:22px;border:1px solid var(--line);border-radius:18px;background:#fff;
  box-shadow:var(--shadow);overflow:hidden}
.bn-pay{width:100%;border-collapse:collapse}
.bn-pay caption{caption-side:top;padding:14px 20px;background:var(--panel);color:#fff;text-align:left;
  font-weight:800;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}
.bn-pay th{background:#eef6f3;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;
  padding:11px 20px;text-align:left;font-weight:700;border-bottom:1px solid var(--line)}
.bn-pay th:last-child{text-align:right}
.bn-pay td{padding:13px 20px;border-top:1px solid var(--line);vertical-align:middle;color:var(--text);font-size:1rem}
.bn-pay tbody tr:first-child td{border-top:0}
.bn-pay tbody tr:nth-child(odd){background:#f9fcfb}
.bn-pay__hand{color:var(--navy);font-weight:800;white-space:nowrap}
.bn-pay__ex .mini-hand{gap:3px}
.bn-pay__amt{text-align:right;color:var(--navy);font-weight:800;font-size:1.1rem;white-space:nowrap}
.bn-pay tr.bn-pay--top{background:var(--bn-soft)!important}
.bn-pay tr.bn-pay--top .bn-pay__amt{color:#9a4a00}
.bn-pay tr.bn-pay--zero .bn-pay__amt{color:var(--muted);font-weight:700;font-size:1rem}
.bn-pay__note{margin:12px 0 0;color:var(--muted);font-size:.9rem;line-height:1.55;max-width:72ch}
.bn-pay__qualify{margin:14px 0 0;padding:14px 18px;border-radius:14px;background:#dcecfb;
  border-left:5px solid var(--blue);color:#173d63;font-size:1rem;line-height:1.6}

/* ---------- royal flush showcase ---------- */
.bn-royal{margin-top:26px;border-radius:22px;overflow:hidden;border:2px solid var(--bn-gold-deep);
  box-shadow:0 16px 34px rgba(20,52,92,.14)}
.bn-royal__stage{background:radial-gradient(ellipse at 50% 12%,#1f6d7a 0%,#15303f 62%,#0d2230 100%);
  padding:30px 20px;text-align:center;position:relative}
.bn-royal__hand{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.bn-royal__hand .pc{box-shadow:0 0 0 2px rgba(247,201,72,.55),0 10px 22px rgba(0,0,0,.45)}
.bn-royal__name{margin:18px 0 0;color:var(--bn-gold);font-weight:800;font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.1em}
.bn-royal__flow{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:20px}
.bn-royal__from{display:flex;flex-direction:column;align-items:center;gap:8px;color:#cfe3ee;
  font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em}
.bn-royal__arrow{width:34px;height:34px;color:var(--bn-gold);flex:none}
.bn-royal__arrow svg{width:100%;height:100%}
.bn-royal__prize{display:flex;flex-direction:column;align-items:center;gap:4px;padding:14px 26px;border-radius:16px;
  background:linear-gradient(160deg,#ffdd76 0%,#e6a012 100%);color:#3d2b00;
  box-shadow:0 10px 26px rgba(230,160,18,.45)}
.bn-royal__prize b{font-size:clamp(1.7rem,6vw,2.4rem);line-height:1;font-weight:800;letter-spacing:-.01em}
.bn-royal__prize span{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.09em}
.bn-royal__foot{padding:15px 20px;background:var(--bn-soft);color:#5c3f00;font-size:.98rem;
  line-height:1.55;text-align:center;font-weight:700}

/* ---------- tip 4 (informative, not alarmist) ---------- */
.bn-tip{margin-top:26px;border-radius:20px;overflow:hidden;border:2px solid var(--blue);background:#fff;
  box-shadow:var(--shadow)}
.bn-tip__head{display:flex;align-items:center;gap:12px;padding:15px 22px;background:var(--blue);color:#fff;
  font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.95rem}
.bn-tip__head svg{width:20px;height:20px;flex:none}
.bn-tip__body{padding:22px}
.bn-tip__points{display:grid;gap:12px;margin:0 0 16px}
.bn-tip__point{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:14px;
  background:#eef6fd;color:var(--navy);font-weight:700;font-size:1.05rem;line-height:1.5}
.bn-tip__point svg{width:20px;height:20px;flex:none;color:var(--blue);margin-top:2px}
.bn-tip__body p{margin:0;color:var(--text);line-height:1.7;font-size:1.05rem}
.bn-tip__body p+p{margin-top:1em}

/* ---------- $15 vs $1 ---------- */
.bn-size{margin-top:26px;background:#fdf6e3;border:1px solid var(--bn-soft-line);border-radius:20px;padding:24px}
.bn-size__grid{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center}
.bn-size__side{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;text-align:center;
  box-shadow:var(--shadow)}
.bn-size__side--bonus{border:2px solid var(--bn-gold-deep)}
.bn-size__chips{display:flex;justify-content:center;align-items:flex-end;gap:10px;min-height:70px;flex-wrap:wrap}
.bn-size__amt{display:block;margin-top:14px;color:var(--navy);font-weight:800;font-size:1.5rem;line-height:1}
.bn-size__lbl{display:block;margin-top:6px;color:var(--muted);font-size:.92rem;line-height:1.45}
.bn-size__vs{font-weight:800;color:#b4860a;text-transform:uppercase;letter-spacing:.06em;font-size:.95rem}
.bn-size__foot{margin:18px 0 0;color:#5c3f00;font-size:1rem;line-height:1.6;text-align:center}
.bn-size__foot strong{color:#3d2b00}

/* ---------- memory sequence ---------- */
.bn-mem{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);overflow:hidden}
.bn-mem__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--line);font-weight:800;color:var(--navy);
  font-size:.95rem;text-transform:uppercase;letter-spacing:.03em}
.bn-mem__slice{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:999px;
  background:#eef4f8;color:var(--navy);font-size:.76rem;font-weight:800;letter-spacing:.04em}
.bn-mem__stripwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:22px 20px 18px}
.bn-mem__strip{display:flex;align-items:center;gap:10px;min-width:max-content}
.bn-dot{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:.72rem;font-weight:800;line-height:1.1;text-align:center}
.bn-dot--miss{border:2px dashed #adbfc9;background:#f2f7f9;color:#5b7186}
.bn-dot--win{width:76px;height:76px;font-size:.8rem;color:#3d2b00;
  background:linear-gradient(160deg,#ffdd76 0%,#e6a012 100%);border:3px solid #fff;
  box-shadow:0 0 0 4px rgba(247,201,72,.35),0 8px 18px rgba(230,160,18,.4)}
.bn-dot--win b{display:block;font-size:1.05rem;line-height:1}
.bn-mem__scroll{display:none;margin:0 20px 12px;color:var(--muted);font-size:.82rem;align-items:center;gap:6px}
.bn-mem__scroll svg{width:14px;height:14px}
.bn-mem__panels{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line)}
.bn-mem__panel{padding:22px 20px}
.bn-mem__panel+.bn-mem__panel{border-left:1px solid var(--line)}
.bn-mem__panel h3{margin:0 0 14px;font-size:1rem;color:var(--navy);font-weight:800;
  text-transform:uppercase;letter-spacing:.04em}
.bn-mem__panel--remember{background:var(--bn-soft)}
.bn-mem__panel--remember h3{color:#5c3f00}
.bn-mem__one{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.bn-mem__one .bn-dot--win{width:104px;height:104px;font-size:.86rem}
.bn-mem__one .bn-dot--win b{font-size:1.5rem}
.bn-mem__cap{color:#5c3f00;font-size:.95rem;line-height:1.5;max-width:34ch}
.bn-math{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.bn-math__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;
  border-top:1px solid var(--line);color:var(--text);font-size:.98rem}
.bn-math__row:first-child{border-top:0}
.bn-math__row b{color:var(--navy);font-weight:800;white-space:nowrap}
.bn-math__row--net{background:#fdecea;color:#7a241d;font-weight:800}
.bn-math__row--net b{color:#a5271d;font-size:1.15rem}
.bn-mem__foot{padding:15px 20px;border-top:1px solid var(--line);background:#f4f9f7;color:var(--muted);
  font-size:.94rem;line-height:1.6}
.bn-mem__foot strong{color:var(--navy)}

/* ---------- two panels: "I would have won" ---------- */
.bn-two{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.bn-two__card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.bn-two__card--feel{border-top:5px solid var(--coral)}
.bn-two__card--real{border-top:5px solid var(--teal)}
.bn-two__head{display:flex;align-items:center;gap:10px;padding:15px 20px;font-weight:800;color:var(--navy);
  font-size:1rem;text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
.bn-two__head svg{width:19px;height:19px;flex:none}
.bn-two__card--feel .bn-two__head svg{color:var(--coral)}
.bn-two__card--real .bn-two__head svg{color:var(--teal)}
.bn-two__body{padding:20px}
.bn-two__body p{margin:0;color:var(--text);line-height:1.7;font-size:1.02rem}
.bn-two__body p+p{margin-top:.9em}
.bn-two__quote{margin:0 0 16px;padding:14px 18px;border-radius:14px;background:#fdecea;color:#7a241d;
  font-weight:700;font-style:italic;line-height:1.55}
.bn-two__card--real .bn-two__quote{background:#dbf6ee;color:#0a5744;font-style:normal}
.bn-two__hand{display:flex;justify-content:center;margin:0 0 16px}

/* ---------- chip tray experiment ---------- */
.bn-exp{margin-top:26px;border:2px dashed var(--blue);border-radius:20px;background:#fff;overflow:hidden}
.bn-exp__head{display:flex;align-items:center;gap:10px;padding:14px 20px;background:#eef6fd;
  color:#173d63;font-weight:800;text-transform:uppercase;letter-spacing:.05em;font-size:.9rem;
  border-bottom:1px dashed #b9d7f2}
.bn-exp__head svg{width:18px;height:18px;color:var(--blue);flex:none}
.bn-exp__grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:24px 20px}
.bn-tray{border:1px solid var(--line);border-radius:16px;background:#f4f9f7;padding:18px;text-align:center}
.bn-tray--bonus{background:var(--bn-soft);border-color:var(--bn-soft-line)}
.bn-tray__name{display:block;color:var(--navy);font-weight:800;font-size:.9rem;text-transform:uppercase;
  letter-spacing:.05em}
.bn-tray__amt{display:block;margin-top:4px;color:var(--navy);font-weight:800;font-size:1.6rem;line-height:1}
.bn-tray--bonus .bn-tray__amt{color:#8a5a00}
.bn-tray__pile{display:flex;justify-content:center;align-items:flex-end;gap:0;margin:16px 0 6px;min-height:74px}
.bn-tray__stack{display:flex;flex-direction:column-reverse;align-items:center}
.bn-tray__stack+.bn-tray__stack{margin-left:10px}
.bn-disc{width:52px;height:14px;border-radius:50%;border:2px solid rgba(0,0,0,.14);margin-top:-6px}
.bn-disc--main{background:linear-gradient(180deg,#5f95e6,#2f6fde)}
.bn-disc--bonus{background:linear-gradient(180deg,#ffdd76,#e6a012)}
.bn-tray__flow{display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;
  color:var(--muted);font-size:.82rem;font-weight:700}
.bn-tray__flow span{display:inline-flex;align-items:center;gap:6px}
.bn-tray__flow svg{width:15px;height:15px;color:var(--blue)}
.bn-tray__flow .bn-up svg{transform:rotate(-90deg);color:var(--teal)}
.bn-tray__flow .bn-down svg{transform:rotate(90deg);color:var(--coral)}
.bn-exp__rule{margin:0;padding:14px 20px;border-top:1px dashed #b9d7f2;background:#f7fbff;color:#173d63;
  font-size:.98rem;line-height:1.6;font-weight:700;display:flex;align-items:center;gap:10px}
.bn-exp__rule svg{width:18px;height:18px;flex:none;color:var(--blue)}
.bn-exp__foot{margin:0;padding:14px 20px;border-top:1px dashed #b9d7f2;color:var(--muted);
  font-size:.94rem;line-height:1.6}

/* ---------- three abstract pay-table cards ---------- */
.bn-cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px}
.bn-pt{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}
.bn-pt__head{padding:12px 16px;font-weight:800;color:#fff;background:var(--navy);text-transform:uppercase;
  letter-spacing:.05em;font-size:.85rem;text-align:center}
.bn-pt--b .bn-pt__head{background:#2f6fde}
.bn-pt--c .bn-pt__head{background:var(--teal)}
.bn-pt__rows{padding:16px}
.bn-pt__row{display:flex;align-items:center;gap:10px;padding:7px 0}
.bn-pt__row span{flex:none;width:104px;color:var(--muted);font-size:.82rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em}
.bn-pt__bar{flex:1;height:12px;border-radius:999px;background:#e7eff3;overflow:hidden}
.bn-pt__bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffdd76,#e6a012)}
.bn-pt--b .bn-pt__bar i{background:linear-gradient(90deg,#9cc4f4,#2f6fde)}
.bn-pt--c .bn-pt__bar i{background:linear-gradient(90deg,#95e2ce,#22a08a)}
.bn-pt__foot{padding:12px 16px;border-top:1px solid var(--line);background:#f4f9f7;color:var(--muted);
  font-size:.86rem;line-height:1.5;text-align:center}
.bn-cards3__note{margin:18px 0 0;text-align:center;font-weight:800;color:var(--navy);font-size:1.05rem;
  text-transform:uppercase;letter-spacing:.04em}

/* ---------- house-edge range scale (no marker) ---------- */
.bn-range{margin-top:26px;background:#fff;border:1px solid var(--line);border-radius:20px;
  box-shadow:var(--shadow);padding:24px 20px}
.bn-range__title{margin:0 0 18px;color:var(--navy);font-weight:800;font-size:1rem;text-transform:uppercase;
  letter-spacing:.04em}
.bn-range__bar{position:relative;height:26px;border-radius:999px;overflow:hidden;display:flex;
  border:1px solid var(--line)}
.bn-range__zone{height:100%}
.bn-range__zone--low{flex:0 0 12%;background:linear-gradient(90deg,#bdeadd,#7fdcc4)}
.bn-range__zone--mid{flex:0 0 48%;background:linear-gradient(90deg,#ffe9a8,#f7c948)}
.bn-range__zone--high{flex:1;background:linear-gradient(90deg,#f9b6a5,#f4645e)}
.bn-range__ticks{position:relative;height:34px;margin-top:6px}
.bn-range__tick{position:absolute;top:0;transform:translateX(-50%);text-align:center;color:var(--muted);
  font-size:.76rem;font-weight:700;white-space:nowrap}
.bn-range__tick::before{content:"";display:block;width:1px;height:8px;background:#b6cbd8;margin:0 auto 4px}
.bn-range__tick--first{transform:none;text-align:left}
.bn-range__tick--first::before{margin-left:0}
.bn-range__tick--last{transform:translateX(-100%);text-align:right}
.bn-range__tick--last::before{margin-right:0}
.bn-range__legend{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.bn-range__item{padding:14px 16px;border-radius:14px;background:#f4f9f7;border:1px solid var(--line)}
.bn-range__item b{display:block;color:var(--navy);font-size:.95rem;font-weight:800}
.bn-range__item span{display:block;margin-top:5px;color:var(--muted);font-size:.9rem;line-height:1.5}
.bn-range__item--low{background:#e3f4ef;border-color:#bdeadd}
.bn-range__item--mid{background:var(--bn-soft);border-color:var(--bn-soft-line)}
.bn-range__item--high{background:#fdecea;border-color:#f6cdc8}
.bn-range__note{margin:16px 0 0;padding:14px 18px;border-radius:14px;background:#eef4f8;color:#2b4257;
  font-size:.96rem;line-height:1.6}
.bn-range__note strong{color:var(--navy)}

/* ---------- dual timelines ---------- */
.bn-tls{display:grid;grid-template-columns:1fr;gap:22px;margin-top:26px}
.bn-tlcard{border-radius:20px;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.bn-tlcard--bonus{border:2px solid var(--bn-gold-deep)}
.bn-tlcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 20px;background:var(--navy);color:#fff;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;font-size:.92rem}
.bn-tlcard--bonus .bn-tlcard__head{background:var(--bn-gold);color:var(--bn-ink)}
.bn-tlcard__count{font-size:.78rem;font-weight:800;padding:4px 12px;border-radius:999px;
  background:rgba(255,255,255,.16)}
.bn-tlcard--bonus .bn-tlcard__count{background:rgba(0,0,0,.12)}
.bn-tlcard .timeline{margin:0;border:0;border-radius:0;box-shadow:none;padding:24px 14px;background:transparent}
.tl--nodecide .tl__dot{background:#f2f7f9;color:#8aa2b3;border:2px dashed #adbfc9}
.tl--nodecide .tl__label{color:var(--muted)}
.bn-locked{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.bn-locked__card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  padding:20px;text-align:center}
.bn-locked__hand{display:flex;justify-content:center;margin-bottom:14px}
.bn-locked__card strong{display:block;color:var(--navy);font-size:1.02rem}
.bn-locked__no{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 14px;border-radius:999px;
  background:#fdecea;color:#7a241d;font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em}
.bn-locked__no svg{width:15px;height:15px}

/* ---------- value vs entertainment ---------- */
.bn-choice{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:26px}
.bn-choice__card{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);
  overflow:hidden;display:flex;flex-direction:column}
.bn-choice__head{display:flex;align-items:center;gap:10px;padding:15px 20px;font-weight:800;font-size:1rem;
  text-transform:uppercase;letter-spacing:.04em;color:#fff}
.bn-choice__card--value .bn-choice__head{background:var(--teal)}
.bn-choice__card--fun .bn-choice__head{background:#7c48d6}
.bn-choice__head svg{width:19px;height:19px;flex:none}
.bn-choice__body{padding:20px;flex:1}
.bn-choice__body p{margin:0;color:var(--text);line-height:1.7;font-size:1.02rem}
.bn-choice__body p+p{margin-top:.9em}
.bn-choice__list{display:grid;gap:9px;margin:0;padding:0}
.bn-choice__list li{display:flex;align-items:flex-start;gap:10px;color:var(--text);line-height:1.55;font-size:1rem}
.bn-choice__list svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--muted)}
.bn-choice__foot{margin:20px 0 0;text-align:center;font-weight:800;color:var(--navy);font-size:1.1rem;
  text-transform:uppercase;letter-spacing:.04em}

/* ---------- final checklist reference card ---------- */
.bn-check{margin-top:26px;border-radius:20px;overflow:hidden;background:var(--panel);
  box-shadow:0 14px 30px rgba(20,48,63,.25)}
.bn-check__head{display:flex;align-items:center;gap:12px;padding:18px 24px;color:#fff;font-weight:800;
  text-transform:uppercase;letter-spacing:.06em;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.14)}
.bn-check__head svg{width:22px;height:22px;color:#a8ecd9;flex:none}
.bn-check__list{margin:0;padding:10px 24px 18px;counter-reset:bnc}
.bn-check__list li{display:flex;align-items:flex-start;gap:14px;padding:13px 0;color:#dbe6ee;
  font-size:1.02rem;line-height:1.6;border-top:1px solid rgba(255,255,255,.1)}
.bn-check__list li:first-child{border-top:0}
.bn-check__list li b{color:#fff;font-weight:800}
.bn-check__n{width:30px;height:30px;border-radius:50%;background:rgba(168,236,217,.16);color:#a8ecd9;
  font-weight:800;font-size:.9rem;display:grid;place-items:center;flex:none;margin-top:1px}
.bn-check__final{display:flex;align-items:center;gap:14px;padding:20px 24px;
  background:linear-gradient(160deg,#ffdd76 0%,#e6a012 100%);color:#3d2b00}
.bn-check__final svg{width:26px;height:26px;flex:none}
.bn-check__final>span{flex:1;min-width:0}
.bn-check__final b{display:block;font-size:1.15rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.bn-check__final b+span{display:block;margin-top:3px;font-size:.98rem;line-height:1.5}

/* ---------- interactive states ---------- */
.bn-vs__card,.bn-two__card,.bn-choice__card,.bn-pt{transition:transform .2s ease,box-shadow .2s ease}
a.bn-pt:hover,a.bn-two__card:hover{transform:translateY(-2px)}
.bn-mem__stripwrap:focus-visible,.bn-pay-wrap:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

/* ============ responsive ============ */
@media (max-width:899px){
  .bn-vs,.bn-two,.bn-choice,.bn-exp__grid,.bn-locked,.bn-mem__panels{grid-template-columns:1fr}
  .bn-mem__panel+.bn-mem__panel{border-left:0;border-top:1px solid var(--line)}
  .bn-cards3{grid-template-columns:1fr}
  .bn-size__grid{grid-template-columns:1fr}
  .bn-size__vs{text-align:center}
  .bn-range__legend{grid-template-columns:1fr}
  .bn-mem__scroll{display:flex}
  .bn-pt__row span{width:92px}
}
@media (max-width:620px){
  /* pay table stacks into one block per hand instead of shrinking */
  .bn-pay,.bn-pay tbody,.bn-pay tr,.bn-pay td{display:block;width:100%}
  .bn-pay thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .bn-pay tr{padding:14px 18px;border-top:1px solid var(--line)}
  .bn-pay tbody tr:first-child{border-top:0}
  .bn-pay td{padding:0;border:0}
  .bn-pay__hand{font-size:1.05rem;white-space:normal}
  .bn-pay__ex{margin:10px 0}
  .bn-pay__ex .mini-hand{justify-content:flex-start}
  .bn-pay__amt{text-align:left;font-size:1.3rem}
  .bn-pay__amt::before{content:"Pays ";font-size:.78rem;font-weight:700;color:var(--muted);
    text-transform:uppercase;letter-spacing:.06em}
  .bn-pay caption{display:block}
}
@media (max-width:480px){
  .bn-spot__ring{width:104px;height:104px}
  .bn-spot--sm .bn-spot__ring{width:88px;height:88px}
  .bn-chip{width:56px;height:56px;font-size:.98rem}
  .bn-chip::before{inset:8px}
  .bn-royal__hand{gap:5px}
  .bn-mem__one .bn-dot--win{width:92px;height:92px}
  .bn-tip__body,.bn-two__body,.bn-choice__body,.bn-mem__panel{padding-left:16px;padding-right:16px}
  .bn-check__list{padding-left:16px;padding-right:16px}
  .bn-check__head,.bn-check__final{padding-left:18px;padding-right:18px}
  .bn-size{padding:18px 14px}
  .bn-pt__row{flex-wrap:wrap;gap:6px}
  .bn-pt__row span{width:auto}
  .bn-pt__bar{width:100%;flex:0 0 100%}
}
@media (min-width:900px){
  .bn-tls{grid-template-columns:1fr;gap:24px}
}
@media (prefers-reduced-motion:reduce){
  .bn-vs__card,.bn-two__card,.bn-choice__card,.bn-pt{transition:none}
  a.bn-pt:hover,a.bn-two__card:hover{transform:none}
}

/* ---------- element resets (headings, paragraphs, lists used as components) ---------- */
p.bn-hero-sep,p.bn-vs__head,p.bn-vs__row,p.bn-vs__foot,p.bn-tip__head,p.bn-tip__point,
p.bn-two__head,p.bn-choice__head,p.bn-pt__head,p.bn-pt__foot,p.bn-exp__head,p.bn-exp__rule,
p.bn-exp__foot,p.bn-check__head,p.bn-check__final,p.bn-math__row,p.bn-mem__foot,p.bn-mem__scroll,
p.bn-royal__foot,p.bn-tlcard__head,p.bn-size__vs,p.bn-royal__name{margin:0}
p.bn-royal__name{margin-top:18px}
p.bn-mem__scroll{margin:0 20px 12px}
ol.bn-check__list{list-style:none;margin:0;padding:10px 24px 18px}
ul.bn-choice__list{list-style:none;margin:0;padding:0}
.bn-check__list li::marker{content:""}

/* ===== tick positions on the house-edge range (was inline left:) ===== */
.bn-range__tick--first{left:0}
.bn-range__tick--last{left:100%}
.bn-range__tick--p12{left:12%}
.bn-range__tick--p32{left:32%}
.bn-range__tick--p60{left:60%}