/* Bastion public stylesheet. Generated by npm run build:css. */

/* Source: styles/base.css */
:root {
  --ink: #0d2029;
  --ink-soft: #153842;
  --primary: #17606a;
  --primary-hover: #104c55;
  --primary-strong: #0d3e47;
  --cta: #d13f28;
  --cta-hover: #b83220;
  --accent: #e0522d;
  --accent-text: #8e341f;
  --accent-soft: #fbe7df;
  --gold: #f1b541;
  --gold-soft: #f8edcf;
  --background: #f4f0e6;
  --surface: #ffffff;
  --surface-alt: #eee9dd;
  --text: #10232b;
  --text-secondary: #53646a;
  --muted: #5c6b70;
  --border: #d9d4c8;
  --border-strong: #bfb8a9;
  --success: #24735f;
  --warning: #985122;
  --error: #a83a3a;
  --info: #2d6076;
  --shadow: 0 7px 20px rgba(13, 32, 41, .1);
  --shadow-lg: 0 20px 48px rgba(13, 32, 41, .16);
  --radius-sm: 5px;
  --radius: 8px;
  --radius-lg: 12px;
  --container: 1220px;
  --article: 780px;
  --b9-type-editorial: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b9-type-reading: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b14-display: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b9-type-interface: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --b9-type-sans: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--background);
  font-family: var(--b9-type-interface);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a { color: var(--primary); text-underline-offset: 3px; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(224, 82, 45, .5); outline-offset: 3px; }
::selection { color: #fff; background: var(--primary); }

.skip-link {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 1000;
  padding: 9px 13px;
  color: #fff;
  background: var(--ink);
  border-radius: var(--radius-sm);
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 40px), var(--container)); margin-inline: auto; }
.narrow { width: min(calc(100% - 40px), var(--article)); margin-inline: auto; }
.section { position: relative; padding: 76px 0; }
.section-sm { padding: 44px 0; }
.section-alt { background: var(--surface-alt); }
.stack { display: grid; gap: 24px; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

h1, h2, h3, h4 {
  margin: 0 0 16px;
  color: var(--ink);
  font-family: var(--b9-type-interface);
  line-height: 1.16;
  letter-spacing: -.025em;
}
h1, .hero h1, .page-header h1 { font-family: var(--b9-type-editorial); font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: clamp(2.45rem, 5vw, 4.45rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.45rem); }
h3 { font-size: 1.24rem; }
p { margin-top: 0; }
.lead { max-width: 720px; margin: 0 0 24px; color: var(--text-secondary); font-size: 1.12rem; line-height: 1.65; }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 11px;
  color: var(--primary);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.35;
}
.eyebrow-light { color: #d6e5e3; }
.eyebrow-light .ui-icon { color: #e48c6f; }
.muted, .terms { color: var(--text-secondary); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--text-secondary); font-size: .88rem; }

.ui-icon { width: 19px; height: 19px; flex: 0 0 auto; }
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 250, 247, .97);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .22s ease, background .22s ease;
}
.site-header.is-scrolled { background: rgba(255,255,255,.985); box-shadow: 0 5px 18px rgba(21,37,45,.07); }
.site-header.is-hidden { transform: none; }
.header-progress { position: absolute; inset: 0 0 auto; height: 2px; transform: scaleX(0); transform-origin: left; background: var(--accent); }
.header-inner { min-height: 74px; display: flex; align-items: center; gap: 26px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-symbol { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; }
.brand-symbol svg { width: 100%; height: 100%; }
.brand-word { color: var(--ink); font-size: 21px; font-weight: 850; letter-spacing: -.06em; }
.brand-word span { color: var(--cta); }
.brand-footer .brand-word { color: #fff; }
.brand-footer .brand-word span { color: var(--gold); }
.primary-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; }
.primary-nav a {
  position: relative;
  padding: 9px 0;
  color: var(--ink);
  font-size: .94rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.primary-nav a::after { content: ""; position: absolute; right: 0; bottom: 2px; left: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform .2s ease; }
.primary-nav a:hover::after, .primary-nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.primary-nav a[aria-current="page"] { color: var(--primary-strong); }
.header-tools { display: flex; align-items: center; gap: 9px; }
.icon-button, .menu-toggle {
  width: 42px;
  min-width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  color: var(--primary-strong);
  background: transparent;
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.icon-button:hover, .menu-toggle:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.select-control, .input-control {
  min-height: 44px;
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  color: var(--text);
  background: var(--surface);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.select-control { width: auto; min-width: 150px; }
.select-control.btn-block { width: 100%; }
.select-control:hover, .input-control:hover { border-color: var(--primary); }
.select-control:focus, .input-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(196,93,62,.14); }
.lang-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.lang-switch a { min-width: 40px; min-height: 44px; display: grid; place-items: center; padding: 7px 9px; color: var(--text-secondary); font-size: .82rem; font-weight: 800; text-decoration: none; }
.lang-switch a[aria-current="true"] { color: #fff; background: var(--ink); }
.menu-toggle { display: none; }
.mobile-panel { display: none; }

.hero {
  position: relative;
  padding: 0 0 72px;
  overflow: hidden;
  color: #fff;
  background: var(--ink);
  border-bottom: 7px solid var(--gold);
}
.hero::before {
  content: "";
  position: absolute;
  top: 48px;
  right: -8%;
  bottom: 0;
  width: 48%;
  background: #173b45;
  clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
  pointer-events: none;
}
.hero-grid-pattern {
  position: absolute;
  right: 25%;
  bottom: -52px;
  z-index: 0;
  width: 92px;
  height: 360px;
  background: var(--cta);
  clip-path: polygon(56% 0, 100% 0, 44% 100%, 0 100%);
  transform: rotate(6deg);
  pointer-events: none;
}
.aurora, .orbit { display: none !important; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(330px, 1.05fr) minmax(250px, .6fr) minmax(320px, .9fr); gap: 36px; align-items: center; padding-top: 72px; }
.hero-copy { max-width: 630px; }
.hero h1 { position: relative; max-width: 660px; margin-bottom: 20px; color: #fff; font-size: clamp(2.9rem, 5.1vw, 5rem); line-height: .98; text-shadow: none; text-wrap: balance; }
.hero .lead { max-width: 620px; color: #c7d7d5; font-size: clamp(1.05rem, 1.4vw, 1.22rem); }
.hero .eyebrow, .hero .eyebrow-light { color: var(--gold); }
.hero .eyebrow::before { content: ""; width: 28px; height: 3px; background: var(--cta); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn-primary { color: #fff; background: var(--cta); box-shadow: 0 6px 14px rgba(209,63,40,.22); }
.btn-primary:hover { color: #fff; background: var(--cta-hover); box-shadow: 0 8px 18px rgba(209,63,40,.28); }
.btn-secondary, .btn-glass { color: var(--primary-strong); border-color: var(--border-strong); background: var(--surface); }
.btn-secondary:hover, .btn-glass:hover { color: var(--primary-strong); border-color: var(--primary); background: var(--surface-alt); }
.btn-ghost, .btn-quiet { color: var(--primary-strong); border-color: var(--border); background: transparent; }
.btn-ghost:hover, .btn-quiet:hover { color: var(--primary-strong); border-color: var(--primary); background: var(--surface-alt); }
.btn-luminous { position: relative; overflow: hidden; }
.btn-luminous::before { content: ""; position: absolute; right: 0; bottom: 0; left: 0; width: 32%; height: 3px; display: block; background: var(--gold); transition: width .25s cubic-bezier(.2,.8,.2,1); }
.btn-luminous:hover::before { width: 100%; }
.btn-luminous > * { position: relative; }
.btn-block { width: 100%; }
.trust-chip { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: transparent; font-size: .76rem; font-weight: 750; line-height: 1.25; }
.trust-chip .ui-icon { width: 15px; height: 15px; color: var(--primary); }
.hero-data-rail { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 25px 0 0; padding: 0; border-block: 1px solid rgba(255,255,255,.22); }
.hero-data-rail div { min-width: 0; padding: 12px 15px; border-right: 1px solid rgba(255,255,255,.22); }
.hero-data-rail div:first-child { padding-left: 0; }
.hero-data-rail div:last-child { border-right: 0; }
.hero-data-rail dt { color: #95aaa7; font-size: .63rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; }
.hero-data-rail dd { overflow: hidden; margin: 2px 0 0; color: #fff; font-size: .86rem; font-weight: 850; white-space: nowrap; text-overflow: ellipsis; }
.hero-terms { margin-top: 14px; color: #9fb2af; font-size: .82rem; }

.hero-panel {
  position: relative;
  z-index: 1;
  padding: 23px;
  border: 0;
  border-left: 5px solid var(--cta);
  border-radius: 3px;
  color: var(--text);
  background: var(--surface);
  box-shadow: 8px 8px 0 var(--gold);
  transform: none;
}
.hero-panel::before { display: none; }
.hero-panel > * { position: relative; }
.hero-panel-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.panel-kicker { display: block; margin-bottom: 3px; color: var(--accent-text); font-size: .72rem; font-weight: 850; letter-spacing: .035em; text-transform: uppercase; }
.hero-panel label { display: block; font-size: 1.12rem; font-weight: 850; }
.panel-icon { width: 34px; height: 34px; padding: 7px; color: var(--cta); background: var(--gold-soft); border-radius: 2px; }
.hero-panel p { margin: 9px 0 16px; color: var(--text-secondary); font-size: .88rem; line-height: 1.5; }
.hero-panel .select-control { min-height: 48px; }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 17px; }
.stat { padding: 11px 7px; border: 1px solid #e2d7bd; border-radius: 2px; text-align: center; background: var(--gold-soft); }
.stat strong { display: block; color: var(--cta); font-size: 1.35rem; line-height: 1.1; }
.stat span { display: block; color: var(--text-secondary); font-size: .68rem; font-weight: 750; }
.province-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 15px; color: var(--primary-strong); font-size: .8rem; font-weight: 800; text-decoration: none; }
.province-link .ui-icon { width: 16px; }

.hero-showcase {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 49px 18px 14px;
  border: 0;
  border-radius: 3px;
  background: var(--gold);
  box-shadow: 9px 9px 0 var(--cta);
  perspective: none;
}
.showcase-label, .showcase-foot { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: .75rem; font-weight: 850; }
.showcase-label { position: absolute; top: 17px; left: 18px; }
.showcase-foot { margin-top: 7px; padding-top: 8px; border-top: 1px solid rgba(13,32,41,.35); }
.showcase-label .ui-icon, .showcase-foot .ui-icon { width: 15px; height: 15px; color: var(--cta); }
.showcase-stack { min-height: 0; display: grid; gap: 8px; }
.showcase-card {
  position: relative !important;
  inset: auto !important;
  z-index: auto !important;
  display: grid;
  grid-template-columns: 30px 50px minmax(0,1fr) auto;
  gap: 11px;
  align-items: center;
  min-height: 94px;
  padding: 12px;
  color: #fff;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 2px;
  background: var(--ink);
  box-shadow: none;
  backdrop-filter: none;
  animation: none !important;
  transition: background .2s ease, border-color .2s ease;
}
.showcase-card:first-child { border-top: 0; }
.showcase-card:hover { border-left-color: var(--gold); background: var(--ink-soft); }
.showcase-rank { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: var(--cta); border-radius: 2px; font-size: .7rem; font-weight: 900; }
.showcase-logo { width: 46px !important; height: 46px !important; border-radius: 6px !important; }
.showcase-copy { min-width: 0; }
.showcase-copy small, .showcase-copy span { display: block; overflow: hidden; color: #aebfbd; font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; }
.showcase-copy small { color: var(--gold); font-weight: 850; }
.showcase-copy strong { display: block; overflow: hidden; color: #fff; font-size: .92rem; white-space: nowrap; text-overflow: ellipsis; }
.showcase-score { text-align: right; }
.showcase-score strong { color: var(--gold); font-size: 1.3rem; }
.showcase-score span { color: #aebfbd; font-size: .68rem; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.section-heading h2 { margin-bottom: 8px; }
.section-heading p { max-width: 640px; margin: 0; color: var(--text-secondary); }
.section-link { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-strong); font-weight: 800; text-decoration: none; white-space: nowrap; }
.section-link .ui-icon { transition: none; }
.ranking-section { background: var(--background); }
.ranking-list { display: grid; gap: 15px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: none; }
.card-body { padding: 24px; }
.casino-card {
  position: relative;
  display: grid;
  grid-template-columns: 54px minmax(250px, .95fr) minmax(275px, 1.38fr) minmax(170px, .62fr);
  gap: 21px;
  align-items: center;
  overflow: hidden;
  padding: 22px;
  border-radius: 4px;
  background: var(--surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.casino-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }

.rank-column { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-right: 15px; border-right: 1px solid var(--border); }
.rank-number { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: var(--cta); border-radius: 2px; clip-path: polygon(0 0,100% 0,100% 74%,74% 100%,0 100%); font-size: .8rem; font-weight: 900; }
.verified-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px rgba(36,115,95,.12); }
.casino-identity { position: relative; display: flex; align-items: center; gap: 13px; min-width: 0; padding-right: 78px; }
.casino-heading { min-width: 0; }
.casino-name { margin: 5px 0 6px; font-size: 1.2rem; }
.casino-name a { color: var(--ink); text-decoration: none; }
.casino-name a:hover { color: var(--primary); }
.casino-meta-row { display: flex; flex-wrap: wrap; gap: 6px; }
.casino-meta-row .trust-chip { padding: 4px 7px; font-size: .65rem; }
.checked-chip { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.checked-chip .ui-icon { width: 13px; height: 13px; }
.casino-logo { width: 58px; height: 58px; flex: 0 0 auto; object-fit: contain; padding: 7px; border: 1px solid var(--border); border-radius: 6px; background: #fff; }
.casino-logo.logo-lg { width: 88px; height: 88px; }
.brand-mark { width: 58px; height: 58px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; background: var(--primary); border-radius: 6px; font-size: 1rem; font-weight: 850; }
.score-ring { position: absolute; top: 50%; right: 0; width: 68px; height: 56px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 2px; background: var(--gold); box-shadow: 4px 4px 0 var(--ink); }
.score-ring::before { display: none; }
.score-ring span { position: relative; display: flex; align-items: baseline; }
.score-ring strong { color: var(--ink); font-size: 1.15rem; }
.score-ring small { color: #24363a; font-size: .64rem; }
.badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 8px; border: 1px solid var(--border); border-radius: 3px; color: var(--primary-strong); background: var(--surface-alt); font-size: .7rem; font-weight: 800; }
.badge .ui-icon { width: 14px; height: 14px; }
.badge-accent { color: var(--accent-text); border-color: #e7c6b9; background: var(--accent-soft); }
.badge-glow { color: var(--primary-strong); border-color: var(--border); background: var(--surface-alt); box-shadow: none; }
.bonus-block { min-width: 0; }
.bonus-kicker { margin: 0 0 4px; color: var(--accent-text); font-size: .7rem; font-weight: 800; letter-spacing: .025em; }
.bonus-title { margin: 0 0 8px; font-weight: 800; }
.metric-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; margin: 12px 0; }
.metric-grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.metric-grid span { position: relative; min-width: 0; padding: 9px 9px 9px 31px; border: 1px solid #e3dac6; border-left: 3px solid var(--gold); border-radius: 2px; background: #fbf5e8; }
.metric-grid .ui-icon { position: absolute; top: 11px; left: 9px; width: 15px; height: 15px; color: var(--cta); }
.metric-grid small { display: block; overflow: hidden; color: var(--text-secondary); font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; }
.metric-grid strong { display: block; margin-top: 2px; font-size: .82rem; }
.pros { margin: 11px 0 0; padding: 0; list-style: none; }
.pros li { position: relative; margin: 5px 0; padding-left: 20px; font-size: .88rem; }
.pros li::before { content: "✓"; position: absolute; top: 0; left: 0; color: var(--success); font-weight: 900; }
.card-actions { display: grid; align-content: center; gap: 9px; }
.card-actions .btn { width: 100%; }
.card-actions .btn-primary .ui-icon { transition: none; }
.terms-details { border: 0; background: transparent; }
.terms-details summary { padding: 3px 0; color: var(--primary); font-size: .76rem; text-align: center; }
.terms-details p { padding: 3px 0 0; color: var(--text-secondary); font-size: .76rem; }

.comparison-wrap { margin-top: 30px; }
.comparison-shell { overflow: hidden; border-radius: 4px; }
.comparison-head { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 22px; overflow: hidden; color: #fff; background: var(--ink); border-bottom: 4px solid var(--cta); }
.comparison-head h3 { margin: 0; color: #fff; font-size: 1.28rem; }
.comparison-head .eyebrow { margin-bottom: 4px; color: var(--gold); }
.comparison-stamp { display: inline-flex; align-items: center; gap: 7px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.34); color: #fff; font-size: .72rem; font-weight: 850; white-space: nowrap; }
.comparison-stamp .ui-icon { width: 15px; height: 15px; color: var(--gold); }
.comparison-scroll { overflow-x: auto; }
.comparison-table { min-width: 820px; }
table { width: 100%; border-collapse: collapse; background: var(--surface); }
th, td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
th { color: var(--text-secondary); background: var(--surface-alt); font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
tbody tr { transition: background .16s ease; }
tbody tr:hover { background: #fff8e8; }
.comparison-table tbody tr:hover { box-shadow: inset 4px 0 var(--cta); }
.comparison-table tbody tr:last-child td { border-bottom: 0; }
.comparison-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.comparison-brand small { display: block; color: var(--muted); font-size: .66rem; }
.comparison-brand strong { display: block; }
.comparison-logo { width: 42px !important; height: 42px !important; border-radius: 5px !important; }
.score-pill { display: inline-flex; align-items: baseline; padding: 5px 8px; border: 1px solid #e2d09d; border-radius: 2px; color: var(--ink); background: var(--gold-soft); }
.score-pill strong { font-size: 1rem; }
.mini-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.mini-tags span { padding: 3px 6px; border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); background: #fff; font-size: .66rem; }
.icon-link { width: 36px; height: 36px; display: grid; place-items: center; margin-left: auto; border: 1px solid var(--border-strong); border-radius: 2px; color: var(--cta); background: #fff; transition: color .14s ease, border-color .14s ease, background .14s ease; }
.icon-link:hover { color: #fff; border-color: var(--cta); background: var(--cta); }

.section-atmosphere { color: #fff; background: var(--ink); border-top: 0; border-bottom: 7px solid var(--gold); }
.section-atmosphere h2, .section-atmosphere h3 { color: #fff; }
.section-atmosphere .section-heading { border-bottom-color: rgba(255,255,255,.2); }
.section-atmosphere .section-heading p, .section-atmosphere .article-content p { color: #b9cac7; }
.section-atmosphere .eyebrow-light { color: var(--gold); }
.section-atmosphere .eyebrow-light .ui-icon { color: var(--gold); }
.section-orb { display: none; }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.trust-item { position: relative; min-height: 248px; padding: 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.22); border-top: 4px solid var(--cta); border-radius: 2px; background: #14343d; transition: border-color .16s ease, background .16s ease; }
.trust-item:nth-child(even) { border-top-color: var(--gold); }
.trust-item:hover { border-color: var(--gold); background: #1a414b; }
.trust-index { display: block; margin-bottom: 18px; color: var(--gold); font-family: var(--b9-type-editorial); font-size: 2.2rem; font-weight: 600; line-height: 1; }
.trust-line { position: absolute; right: 0; bottom: 0; left: 0; height: 5px; display: block; background: var(--cta); }
.trust-icon { position: absolute; top: 20px; right: 20px; width: 43px; height: 43px; display: grid; place-items: center; margin: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; color: var(--gold); background: transparent; transition: color .16s ease, background .16s ease; }
.trust-item:hover .trust-icon { color: var(--ink); background: var(--gold); }
.trust-icon .ui-icon { width: 21px; height: 21px; }
.trust-item p { margin: 0; color: #b9cac7; }

.guides-section { background: var(--surface); }
.guide-card { display: grid; min-height: 100%; overflow: hidden; border-radius: 4px; transition: border-color .16s ease, box-shadow .16s ease; }
.guide-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow); }
.guide-card .card-body { display: flex; flex-direction: column; gap: 11px; padding: 21px; }
.guide-card h3 { margin: 0; font-size: 1.18rem; }
.guide-card h3 a { color: var(--ink); text-decoration: none; }
.guide-card h3 a:hover { color: var(--primary); }
.guide-card p { margin: 0; color: var(--text-secondary); }
.guide-card .meta span { display: inline-flex; align-items: center; gap: 5px; }
.guide-card .meta .ui-icon { width: 14px; height: 14px; }
.guide-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; color: var(--primary-strong); font-weight: 800; text-decoration: none; }

.breadcrumbs { padding: 18px 0 0; color: var(--text-secondary); font-size: .84rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; list-style: none; }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 7px; color: var(--muted); }
.breadcrumbs a { color: var(--text-secondary); }
.page-header { position: relative; overflow: hidden; padding: 46px 0 38px; background: #faf6ec; border-bottom: 6px solid var(--gold); }
.page-header::after { content: ""; position: absolute; top: 0; right: -35px; bottom: 0; width: 20%; display: block; background: var(--cta); clip-path: polygon(48% 0,100% 0,100% 100%,0 100%); }
.page-header > .container, .page-header > .narrow { position: relative; z-index: 1; }
.page-header .lead { margin-bottom: 17px; }
.review-hero { color: #eef4f2; background: var(--ink); }
.review-hero h1, .review-hero .eyebrow { color: #fff; }
.review-hero .eyebrow { color: #e4a08b; }
.review-hero .lead { color: #c8d7d4; }
.review-hero .byline, .review-hero .byline a, .review-hero .byline > span { color: #e8f0ee; }
.review-hero .byline small { color: #a9bfba; }
.review-title-row { display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: center; }
.review-title-row .casino-logo { border-color: rgba(255,255,255,.25); }
.score-card { min-width: 125px; padding: 17px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--radius); color: #fff; background: var(--ink-soft); text-align: center; }
.score-card::before { display: none; }
.score-card strong { color: #fff; font-size: 2.2rem; }
.score-card span { color: #c7d8d4; }
.score-card small { display: block; margin-top: 4px; color: #a9bfba; }
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.sidebar { position: sticky; top: 92px; }
.toc { padding: 18px; }
.toc h3 { margin-bottom: 8px; font-size: 1rem; }
.toc a { display: block; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-secondary); font-size: .88rem; text-decoration: none; transition: color .16s ease, padding .16s ease; }
.toc a:hover { padding-left: 4px; color: var(--primary); }
.sidebar-cta { margin-top: 15px; }
.author-box, .author-card, .author-hero { display: flex; gap: 19px; align-items: flex-start; padding: 22px; }
.author-card { min-height: 100%; }
.author-hero { padding: 0; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 50%; color: var(--primary); background: var(--surface-alt); font-weight: 850; }
.avatar-lg { width: 64px; height: 64px; }
.avatar-xl { width: 92px; height: 92px; font-size: 1.35rem; }
.byline { display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; margin: 20px 0; }
.byline > a, .byline > span { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
.byline small { display: block; color: var(--text-secondary); font-size: .75rem; }
.byline strong { font-size: .88rem; }
.article-content h2 { margin-top: 42px; scroll-margin-top: 95px; }
.article-content p { margin: 0 0 18px; }
.article-content ul { padding-left: 22px; }
.key-facts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 18px; }
.key-fact { padding: 12px 0; border-bottom: 1px solid var(--border); }
.key-fact span { display: block; color: var(--text-secondary); font-size: .76rem; }
.key-fact strong { display: block; font-size: .93rem; }
.pros-cons { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.pros-box, .cons-box { padding: 19px; border-radius: var(--radius); }
.pros-box { border: 1px solid #c9dfd5; background: #edf7f1; }
.cons-box { border: 1px solid #e5cfc8; background: #fbf0ec; }
.rating-bars { display: grid; gap: 9px; }
.rating-row { display: grid; grid-template-columns: minmax(145px,1fr) minmax(120px,2fr) 50px; gap: 12px; align-items: center; margin: 7px 0; text-transform: capitalize; }
.bar { height: 9px; overflow: hidden; border-radius: 999px; background: var(--surface-alt); }
.bar span { display: block; width: var(--bar-width, 0); height: 100%; border-radius: inherit; background: var(--cta); transition: width .72s cubic-bezier(.2,.8,.2,1) var(--delay,0ms); }
.rating-bars .bar span { width: 0; }
.rating-bars.bars-ready .bar span { width: var(--bar-width,0); }
.tag-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-list span { padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: var(--surface-alt); font-size: .78rem; }
.responsive-table, .table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

.notice { padding: 14px 17px; border-left: 3px solid var(--info); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: #edf4f5; }
.notice-warning { border-left-color: var(--warning); background: #fbf1e8; }
.notice-responsible { border-left-color: var(--cta); background: #edf6f1; }
.filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin-bottom: 22px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.filters label { display: grid; flex: 1 1 150px; gap: 5px; color: var(--text-secondary); font-size: .78rem; font-weight: 750; }
.filters .select-control, .filters .input-control { min-width: 0; }
.filters-title { display: flex; align-items: center; gap: 7px; align-self: center; color: var(--primary-strong); font-weight: 850; }
.filters-title .ui-icon { color: var(--accent); }
.filter-count { align-self: center; margin-left: auto; padding: 6px 9px; color: var(--text-secondary); font-size: .84rem; font-weight: 750; }
.filter-count strong { color: var(--primary-strong); }
.empty-state { padding: 45px 24px; text-align: center; }
.faq-list { display: grid; gap: 9px; }
details { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
summary { padding: 16px 18px; cursor: pointer; font-weight: 800; }
details p { margin: 0; padding: 0 18px 17px; color: var(--text-secondary); }
.method-steps { display: grid; gap: 14px; }
.method-steps article { display: grid; grid-template-columns: 42px 1fr; gap: 15px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--border); }
.method-steps article > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--ink); font-size: .78rem; font-weight: 850; }
.method-steps h2 { margin-top: 3px; font-size: 1.2rem; }
.methodology-teaser { text-align: left; }
.method-step-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; margin: 25px 0; }
.method-step-grid div { padding: 14px; border: 1px solid rgba(255,255,255,.28); border-radius: 2px; background: #fff; }
.method-step-grid span { display: block; margin-bottom: 7px; color: var(--cta); font-size: .72rem; font-weight: 850; }
.method-step-grid strong { color: var(--ink); font-size: .9rem; }
.search-form { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 22px; }
.search-results { display: grid; gap: 12px; }
.search-results h2 { margin-top: 8px; font-size: 1.25rem; }
.spaced-heading { margin-top: 48px; }
.form-grid { display: grid; gap: 17px; }
.form-grid label { display: grid; gap: 7px; font-weight: 750; }
.honeypot { position: absolute !important; left: -9999px !important; }
.cookie-banner { position: fixed; right: 20px; bottom: 20px; left: 20px; z-index: 100; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(760px, calc(100% - 40px)); margin-inline: auto; padding: 15px 17px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: rgba(255,255,255,.98); box-shadow: var(--shadow-lg); }
.cookie-banner h2 { margin-bottom: 4px; font-size: 1rem; }
.cookie-banner p { max-width: 480px; margin: 0; color: var(--text-secondary); font-size: .82rem; line-height: 1.45; }
.horizontal-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.site-footer { position: relative; padding: 56px 0 25px; color: #dce9e6; background: var(--ink); border-top: 6px solid var(--cta); }
.footer-grid { display: grid; grid-template-columns: 1.45fr repeat(3,1fr); gap: 30px; }
.site-footer h3 { margin-bottom: 12px; color: #fff; font-size: .92rem; }
.site-footer p { max-width: 310px; color: #b8cbc6; }
.site-footer a { display: block; width: fit-content; margin: 7px 0; color: #cfe0dc; text-decoration: none; transition: color .14s ease; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-age { margin: 15px 0; padding-left: 10px; border-left: 3px solid var(--gold); color: #fff; font-size: .78rem; }
.footer-note { display: flex; justify-content: space-between; gap: 24px; margin-top: 30px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); color: #a9bfba; font-size: .76rem; }
.footer-note p { margin: 0; }

.loading-shell { min-height: 100vh; padding: 90px 0; background: var(--background); }
.loading-header { position: fixed; inset: 0 0 auto; height: 74px; background: var(--surface); border-bottom: 1px solid var(--border); }
.loading-grid { display: grid; gap: 18px; }

@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(330px,.9fr); }
  .hero-copy { grid-column: 1 / -1; max-width: 820px; }
  .hero-panel { grid-column: 1; grid-row: 2; }
  .hero-showcase { grid-column: 2; grid-row: 2; }
  .casino-card { grid-template-columns: 50px minmax(240px,1fr) minmax(245px,1.1fr); }
  .casino-card .card-actions { grid-column: 2 / -1; grid-template-columns: 1fr 1fr; align-items: center; }
  .casino-card .terms-details, .casino-card .terms { grid-column: 1 / -1; }
  .trust-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 980px) {
  .primary-nav, .header-tools .province-mini { display: none; }
  .menu-toggle { display: grid; margin-left: auto; }
  .header-tools { margin-left: 0; }
  .mobile-panel { position: fixed; inset: 74px 0 auto; z-index: 45; display: none; gap: 7px; padding: 17px 20px 23px; border-bottom: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); }
  .mobile-panel.is-open { display: grid; }
  .mobile-menu-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; color: var(--primary-strong); font-weight: 850; }
  .mobile-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
  .mobile-panel a { display: flex; align-items: center; justify-content: space-between; padding: 11px 4px; border-bottom: 1px solid var(--border); color: var(--ink); font-weight: 750; text-decoration: none; }
  .mobile-panel a .ui-icon { width: 16px; }
  .mobile-panel label { margin-top: 7px; color: var(--text-secondary); font-size: .78rem; font-weight: 750; }
  .mobile-panel .select-control { width: 100%; }
  .page-layout { grid-template-columns: 1fr; }
  .sidebar { position: static; }
}

@media (max-width: 720px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--container)); }
  .header-inner { min-height: 62px; gap: 9px; }
  .site-header.is-hidden { transform: none; }
  .mobile-panel { inset-block-start: 62px; }
  .brand-symbol { width: 36px; height: 36px; }
  .brand-word { font-size: 19px; }
  .header-tools { gap: 5px; }
  .header-tools .icon-button { display: none; }
  .lang-switch a { min-width: 38px; min-height: 44px; }
  .section { padding: 54px 0; }
  .section-sm { padding: 34px 0; }
  .hero { padding: 0 0 48px; }
  .hero-grid { display: flex; flex-direction: column; gap: 22px; }
  .hero-copy, .hero-panel, .hero-showcase { width: 100%; }
  .hero-copy { order: 1; }
  .ranking-tape-inner { grid-template-columns: minmax(0,1fr) auto; gap: 9px; }
  .ranking-tape { min-height: 44px; }
  .ranking-tape-inner { min-height: 44px; }
  .tape-window { display: none; }
  .tape-context { overflow: hidden; font-size: .66rem; text-overflow: ellipsis; }
  .ranking-tape a { padding-inline: 7px; font-size: .64rem; }
  .hero-grid { padding-top: 50px; }
  .hero h1 { font-size: clamp(2.65rem, 13vw, 4rem); }
  .hero .lead { font-size: 1.04rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .hero-data-rail { grid-template-columns: 1fr 1.2fr 1fr; }
  .hero-data-rail div { padding-inline: 9px; }
  .hero-data-rail div:first-child { padding-left: 0; }
  .hero-data-rail dt { font-size: .57rem; }
  .hero-data-rail dd { font-size: .74rem; }
  .hero-panel { order: 2; padding: 20px; }
  .stat-row { gap: 5px; }
  .stat { padding-inline: 4px; }
  .hero-showcase { order: 3; min-height: 0; padding: 47px 15px 13px; }
  .showcase-card { grid-template-columns: 28px 44px minmax(0,1fr) auto; min-height: 87px; padding: 11px; }
  .showcase-logo { width: 40px !important; height: 40px !important; }
  .showcase-copy span { display: none; }
  .showcase-score strong { font-size: 1.1rem; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 12px; margin-bottom: 23px; }
  .section-heading .badge { align-self: flex-start; }
  .grid-2, .grid-3, .pros-cons, .key-facts { grid-template-columns: 1fr; }
  .casino-card { display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 14px; padding: 18px; }
  .rank-column { padding-right: 9px; }
  .rank-number { width: 36px; height: 36px; font-size: .72rem; }
  .casino-card > .casino-identity { grid-column: 2; }
  .casino-card > .bonus-block, .casino-card > .card-actions { grid-column: 1 / -1; }
  .casino-identity { align-items: flex-start; padding-right: 66px; }
  .casino-logo { width: 50px; height: 50px; }
  .casino-name { font-size: 1.12rem; }
  .score-ring { width: 58px; height: 50px; }
  .score-ring strong { font-size: 1rem; }
  .casino-card .metric-grid { grid-template-columns: 1fr 1fr; }
  .casino-card .card-actions { display: grid; grid-template-columns: 1fr; }
  .comparison-head { align-items: flex-start; flex-direction: column; gap: 13px; padding: 18px; }
  .comparison-scroll { overflow: visible; }
  .comparison-table { min-width: 0; display: block; padding: 8px; background: var(--surface-alt); }
  .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .comparison-table tbody, .comparison-table tr, .comparison-table td { display: block; width: 100%; }
  .comparison-table tr { margin-bottom: 9px; padding: 13px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
  .comparison-table td { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: right; }
  .comparison-table td:last-child { border-bottom: 0; }
  .comparison-table td::before { content: attr(data-label); color: var(--muted); font-size: .64rem; font-weight: 800; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
  .comparison-table td:first-child { padding-top: 0; }
  .comparison-table td:first-child::before { display: none; }
  .comparison-brand { width: 100%; text-align: left; }
  .comparison-table .icon-link { margin-left: auto; }
  .trust-grid { grid-template-columns: 1fr; }
  .trust-item { min-height: 0; }
  .method-step-grid { grid-template-columns: 1fr; }
  .review-title-row { grid-template-columns: 64px 1fr; }
  .review-title-row .logo-lg { width: 64px !important; height: 64px !important; }
  .score-card { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: center; gap: 4px; }
  .score-card small { margin-left: 6px; }
  .rating-row { grid-template-columns: 1fr 44px; }
  .rating-row .bar { grid-column: 1 / -1; grid-row: 2; }
  .author-box, .author-card, .author-hero { flex-direction: column; }
  .search-form { grid-template-columns: 1fr; }
  .filters { display: grid; grid-template-columns: 1fr; align-items: stretch; }
  .filters label { flex: none; }
  .filter-count { margin-left: 0; }
  .cookie-banner { right: 10px; bottom: 10px; left: 10px; width: auto; flex-direction: column; align-items: stretch; gap: 11px; max-height: 48vh; overflow: auto; padding: 15px; }
  .cookie-banner .horizontal-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .cookie-banner .btn { min-height: 44px; padding-inline: 10px; font-size: .82rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 18px; }
  .footer-note { flex-direction: column; gap: 7px; }
}

@media (max-width: 390px) {
  .brand-word { font-size: 17px; }
  .header-inner { gap: 7px; }
  .menu-toggle { width: 44px; min-width: 44px; height: 44px; }
  .lang-switch a { min-width: 34px; }
  .ranking-tape a span { display: none; }
  .ranking-tape a .ui-icon { width: 17px; height: 17px; }
  .hero-data-rail dd { font-size: .68rem; }
  .casino-card .metric-grid { grid-template-columns: 1fr; }
  .cookie-banner .horizontal-actions { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation: none !important; }
  .bar span { transition: none !important; }
  .rating-bars .bar span { width: var(--bar-width,0) !important; }
}

/* Reader account, moderated community and mobile actions — RC5 */
.account-header-button{display:inline-grid;place-items:center;text-decoration:none}
.account-auth-grid,.account-form-grid,.admin-module-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.account-dashboard{display:grid;grid-template-columns:minmax(250px,.34fr) minmax(0,.66fr);gap:28px;align-items:start}
.account-profile{position:sticky;top:96px}
.account-main{display:grid;gap:24px;min-width:0}
.account-actions{display:grid;gap:10px;margin-top:20px}
.account-actions .btn{width:100%}
.danger-button{color:#8f2f2f;border-color:#d8a6a6;background:#fff4f3}
.danger-button:hover{color:#fff;border-color:#9d3434;background:#9d3434}
.saved-account-list,.account-submission-list,.reader-review-list{display:grid;gap:12px}
.saved-account-list article,.account-submission-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--border)}
.saved-account-list article:last-child,.account-submission-list article:last-child{border-bottom:0}
.saved-account-list .casino-logo{width:60px;height:48px}
.account-submission-list article span{color:var(--primary);font-size:.74rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.account-submission-list article small{color:var(--text-secondary);text-align:right}
.reader-review-section{margin-top:42px}
.reader-review-card{gap:10px}
.reader-review-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}
.reader-review-head strong,.reader-review-head small{display:block}
.reader-review-head small{margin-top:3px;color:var(--text-secondary)}
.reader-review-head>span{color:#8b650e;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.reader-review-card p,.reader-review-empty p{margin:0;color:var(--text-secondary)}
@media(max-width:820px){.account-dashboard{grid-template-columns:1fr}.account-profile{position:static}.account-auth-grid,.account-form-grid{grid-template-columns:1fr}.saved-account-list article,.account-submission-list article{grid-template-columns:auto minmax(0,1fr)}.saved-account-list article .btn,.account-submission-list article small{grid-column:2;text-align:left}.reader-review-head{flex-direction:column}.account-header-button{display:none}}

/* Source: styles/themes.css */
/*
 * Bastion Atmosphere 2.2
 * Deliberate dark editorial system: solid surfaces, precise luminous edges,
 * no generic glass-card grid, no purple AI gradients, no decorative motion
 * that competes with reading or comparison.
 */
:root {
  --ink: #061012;
  --ink-soft: #0a1719;
  --primary: #76b3ae;
  --primary-hover: #98ccc7;
  --primary-strong: #5a9a96;
  --cta: #d6543a;
  --cta-hover: #e06d54;
  --accent: #b99558;
  --accent-text: #d0ad70;
  --accent-soft: rgba(214, 84, 58, .12);
  --gold: #b99558;
  --gold-soft: rgba(185, 149, 88, .12);
  --background: #071113;
  --surface: #0d1a1c;
  --surface-alt: #112225;
  --surface-elevated: #15292c;
  --text: #f2f0e9;
  --text-secondary: #aab7b3;
  --muted: #7f918d;
  --border: #293d3f;
  --border-strong: #3d5759;
  --success: #69b18d;
  --warning: #c49a58;
  --error: #e46f68;
  --info: #76b3ae;
  --shadow: 0 14px 32px rgba(0, 0, 0, .24);
  --shadow-lg: 0 28px 80px rgba(0, 0, 0, .42);
  --radius-sm: 7px;
  --radius: 12px;
  --radius-lg: 18px;
  --container: 1280px;
}

html { background: var(--background); }
body {
  color: var(--text);
  background:
    radial-gradient(circle at 9% 3%, rgba(118, 179, 174, .06), transparent 26rem),
    radial-gradient(circle at 92% 7%, rgba(214, 84, 58, .065), transparent 30rem),
    var(--background);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .17;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}
::selection { color: #08111e; background: #98ccc7; }
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
h1, h2, h3, h4 { color: var(--text); }
.lead, .muted, .terms, .meta { color: var(--text-secondary); }
.card {
  color: var(--text);
  background: linear-gradient(180deg, rgba(20, 35, 55, .98), rgba(11, 23, 39, .98));
  border-color: var(--border);
  box-shadow: 0 12px 34px rgba(0,0,0,.2);
}
.section-alt { background: #0a1523; }
.input-control, .select-control {
  color: var(--text);
  background: #0a1422;
  border-color: var(--border-strong);
  color-scheme: dark;
}
.input-control::placeholder { color: #718398; }
.input-control:hover, .select-control:hover { border-color: #55708c; }
.input-control:focus, .select-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(40,185,215,.15); }

.site-header {
  color: var(--text);
  background: rgba(5, 12, 22, .92);
  border-bottom-color: rgba(93, 117, 143, .28);
  backdrop-filter: blur(18px) saturate(125%);
}
.site-header.is-scrolled { background: rgba(5, 12, 22, .97); box-shadow: 0 14px 35px rgba(0,0,0,.28); }
.header-progress { height: 1px; background: linear-gradient(90deg, var(--primary), var(--cta), var(--gold)); box-shadow: 0 0 14px rgba(255,90,31,.5); }
.brand { color: var(--text); }
.brand-symbol { width: 44px; height: 44px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.35)); }
.brand-word { color: #f7fafc; letter-spacing: -.055em; }
.brand-word span { color: var(--cta); text-shadow: 0 0 20px rgba(255,90,31,.25); }
.primary-nav a { color: #dce5ee; }
.primary-nav a::after { height: 1px; background: linear-gradient(90deg, var(--cta), var(--gold)); }
.primary-nav a[aria-current="page"] { color: #fff; }
.icon-button, .menu-toggle { color: #d7e3ed; background: #0a1422; border-color: var(--border); }
.icon-button:hover, .menu-toggle:hover { color: #fff; border-color: var(--cta); background: rgba(255,90,31,.09); }
.lang-switch { border-color: var(--border); }
.lang-switch a { color: var(--text-secondary); background: #0a1422; }
.lang-switch a[aria-current="true"] { color: #07111f; background: var(--primary); }
.mobile-panel { color: var(--text); background: #091321; border-color: var(--border); }
.mobile-panel a { color: var(--text); border-color: var(--border); }
.mobile-menu-head { color: #fff; }

.hero {
  position: relative;
  isolation: isolate;
  min-height: 720px;
  padding-bottom: 92px;
  background: #050d18;
  border-bottom: 1px solid #22364a;
}
.hero::before, .hero::after { content: none; }
.hero-atmosphere { position: absolute; inset: 48px 0 0; z-index: -2; overflow: hidden; pointer-events: none; }
.hero-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,13,24,.34), transparent 46%, rgba(5,13,24,.28)),
    linear-gradient(to bottom, rgba(5,13,24,.15), rgba(5,13,24,.86) 91%);
}
.hero-horizon {
  position: absolute;
  inset: 5% -12% 0;
  opacity: .85;
  background:
    radial-gradient(ellipse at 50% 78%, transparent 0 41%, rgba(70, 158, 194, .13) 41.2% 41.8%, transparent 42% 48%, rgba(255, 128, 40, .085) 48.2% 48.6%, transparent 49%),
    radial-gradient(ellipse at 48% 91%, rgba(16, 54, 75, .55), transparent 55%);
  transform: perspective(700px) rotateX(58deg) scale(1.4);
  transform-origin: center bottom;
}
.hero-scanlines {
  position: absolute;
  inset: 0;
  opacity: .12;
  background: repeating-linear-gradient(to bottom, transparent 0 4px, rgba(181,220,235,.07) 5px, transparent 6px);
}
.hero-field-lines {
  position: absolute;
  left: -6%;
  right: -6%;
  bottom: -20%;
  height: 62%;
  opacity: .16;
  background:
    repeating-linear-gradient(90deg, transparent 0 8.2%, rgba(54,184,216,.28) 8.3%, transparent 8.5%),
    repeating-linear-gradient(0deg, transparent 0 19%, rgba(54,184,216,.22) 19.2%, transparent 19.5%);
  transform: perspective(660px) rotateX(68deg) translateY(var(--parallax-y, 0));
  transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 22%, transparent 88%);
}
.hero-light { position: absolute; width: 42rem; height: 22rem; border-radius: 50%; filter: blur(82px); opacity: .13; transform: translate3d(0,var(--parallax-y,0),0); }
.hero-light-warm { right: -12%; top: 18%; background: #d6543a; }
.hero-light-cool { left: -14%; top: 34%; background: #76b3ae; }
.hero-grid-pattern { display: none; }
.ranking-tape { background: rgba(8,17,30,.96); border-block: 1px solid #23364a; }
.hero-grid { grid-template-columns: minmax(370px,1.12fr) minmax(260px,.62fr) minmax(365px,.95fr); gap: 30px; padding-top: 80px; align-items: center; }
.hero h1 { max-width: 720px; font-family: var(--b9-type-editorial); font-size: clamp(3.3rem, 5.2vw, 5.75rem); line-height: .94; letter-spacing: -.055em; text-wrap: balance; }
.hero h1 span { color: var(--cta); text-shadow: 0 0 38px rgba(255,90,31,.16); }
.hero .lead { max-width: 610px; color: #b9c7d4; font-size: 1.08rem; }
.eyebrow-light { color: #73d8eb; }
.btn { border-radius: 9px; }
.btn-primary { color: #fff; background: var(--cta); border-color: var(--cta); box-shadow: 0 9px 24px rgba(255,90,31,.17); }
.btn-primary:hover { color: #fff; background: var(--cta-hover); border-color: var(--cta-hover); }
.btn-luminous::before { background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.28), transparent 75%); opacity: .3; animation: none; }
.btn-glass, .btn-outline-light { color: #edf5fb; background: #0b1726; border: 1px solid #3a5068; box-shadow: none; }
.btn-glass:hover, .btn-outline-light:hover { color: #fff; background: #101f31; border-color: var(--primary); }
.hero-data-rail { border-color: rgba(112,140,168,.26); }
.hero-data-rail div { border-color: rgba(112,140,168,.26); }
.hero-data-rail dt { color: #6f8599; }
.hero-panel, .hero-showcase {
  background: rgba(10, 22, 37, .93);
  border: 1px solid #324a61;
  border-radius: 16px;
  box-shadow: 0 22px 58px rgba(0,0,0,.36);
  backdrop-filter: blur(14px);
}
.hero-panel { color: var(--text); border-top-color: rgba(40,185,215,.7); }
.hero-panel p { color: var(--text-secondary); }
.panel-kicker { color: var(--primary); }
.panel-icon { color: var(--primary); }
.stat { background: #0a1422; border-color: #263d52; }
.stat strong { color: var(--gold); }
.stat span { color: var(--text-secondary); }
.province-link { color: var(--primary); border-color: var(--border); }
.hero-showcase { border-color: #4d3b2d; box-shadow: 0 25px 70px rgba(0,0,0,.44), 0 0 0 1px rgba(255,90,31,.08) inset; }
.hero-showcase::before { content: ""; position: absolute; inset: -1px -1px auto; height: 1px; background: linear-gradient(90deg, transparent, var(--cta), var(--gold), transparent); opacity: .8; }
.showcase-label { color: var(--gold); }
.showcase-card { background: #07121f; border-color: #26394c; box-shadow: none; }
.showcase-card:hover { border-color: #405d78; }
.showcase-rank { color: var(--gold); background: #111d2d; border-color: #42566b; }
.showcase-copy small { color: var(--gold); }
.showcase-copy strong { color: #fff; }
.showcase-copy span, .showcase-foot { color: #91a4b7; }
.showcase-score strong { color: var(--gold); }

.province-explorer { position: relative; overflow: hidden; padding: 72px 0; background: #081321; border-block: 1px solid #1d3044; }
.province-explorer-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(360px,.85fr); gap: 54px; align-items: center; }

@media (max-width: 720px) {
  .brand-symbol { width: 38px; height: 38px; }
  .hero { padding-bottom: 54px; }
  .hero-atmosphere { inset-block-start: 44px; }
  .hero-grid { padding-top: 52px; }
  .hero h1 { font-size: clamp(2.85rem, 13.3vw, 4.2rem); }
  .hero-panel, .hero-showcase { backdrop-filter: none; }
  .province-explorer { padding: 52px 0; }
  .province-explorer-grid { gap: 34px; }
  .province-links { grid-template-columns: 1fr; }
  .payment-coverage { padding: 32px 0; }
  .payment-track { grid-auto-columns: 108px; }
  .payment-method { min-height: 96px; }
  .payment-method img { width: 82px; height: 53px; }
  .comparison-table { background: #081321; }
  .comparison-table tr { background: #0d1a2b; border-color: #2b4055; }
  .comparison-table td { border-color: #2b4055; }
  .cookie-banner { max-height: 42vh; background: #0e1b2c; }
}

@media (prefers-reduced-motion: reduce) {
}

/* Structural polish: the showcase wrapper is a real grid/flex item, not an anonymous auto-placed node. */
.hero-showcase-slot { min-width: 0; }
.hero-showcase-slot .hero-showcase { width: 100%; }
@media (min-width: 1181px) {
  .hero { min-height: 630px; padding-bottom: 58px; }
  .hero-grid { padding-top: 62px; }
}
@media (min-width: 721px) and (max-width: 1180px) {
  .hero-showcase-slot { grid-column: 2; grid-row: 2; }
}
@media (max-width: 720px) {
  .hero-copy { order: 1; }
  .hero-panel { order: 2; }
  .hero-showcase-slot { order: 3; width: 100%; }
}
.site-footer h2 { margin-bottom: 12px; color: #f3f7fa; font-family: inherit; font-size: .9rem; line-height: 1.2; letter-spacing: .01em; }

/* Route atmosphere is implemented by reference-system.css with source-backed photography. */
body { overflow-x: hidden; }
.site-header { z-index: 40; }
#main-content, .site-footer { position: relative; z-index: 2; }
.cookie-banner { z-index: 60; }

.hero, .province-explorer, .payment-coverage, .ranking-section, .section-atmosphere, .guides-section, .page-header, .section-alt, .section-sm { position: relative; isolation: isolate; }
.ranking-section { background: rgba(9,22,23,.945); }
.guides-section { background: rgba(10,24,25,.95); }
.section-atmosphere { background: rgba(7,17,19,.955); }
.payment-coverage { background: rgba(5,15,16,.965); }
.province-explorer { background: rgba(8,22,23,.95); }
.page-header { background: rgba(8,22,23,.95); }

.hero h1 span { color: #d96345; text-shadow: 0 8px 36px rgba(214,84,58,.09); }
.panel-country {
  min-width: 42px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(214,84,58,.52);
  border-radius: 5px;
  color: #f2f0e9;
  background: linear-gradient(90deg, rgba(214,84,58,.24) 0 24%, rgba(242,240,233,.04) 24% 76%, rgba(214,84,58,.24) 76%);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
}
.hero-panel { border-left-color: #d6543a; box-shadow: 8px 8px 0 rgba(185,149,88,.82); }
.hero-showcase { background: #b28c52; box-shadow: 9px 9px 0 #c74c35; }
.rank-number, .section-link-light { color: #91c6c2; }

.review-file-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 44px; align-items: start; }
.review-ledger { border-top: 1px solid rgba(242,240,233,.15); }
.review-ledger-row {
  display: grid;
  grid-template-columns: 48px minmax(0,1fr) minmax(160px,.42fr);
  gap: 22px;
  align-items: start;
  padding: 22px 0;
  border-bottom: 1px solid rgba(242,240,233,.13);
}
.review-ledger-number { color: #b99558; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; letter-spacing: .08em; }
.review-ledger-row h3 { margin: 0 0 6px; font-family: inherit; font-size: 1.02rem; }
.review-ledger-row p { margin: 0; color: #aab7b3; font-size: .9rem; }
.review-ledger-row small { color: #7f918d; font-size: .72rem; line-height: 1.5; text-align: right; }
.review-file-note {
  position: sticky;
  top: 104px;
  padding: 24px;
  border: 1px solid rgba(185,149,88,.32);
  border-radius: 10px;
  background: linear-gradient(155deg, rgba(17,34,37,.96), rgba(7,17,19,.96));
  box-shadow: 0 24px 64px rgba(0,0,0,.22);
}
.review-file-note > span { display: block; color: #7f918d; font-size: .69rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.review-file-note > strong { display: block; margin: 5px 0 22px; color: #f2f0e9; font-size: 1.7rem; }
.review-file-note dl { margin: 0 0 22px; }
.review-file-note dl div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid rgba(242,240,233,.1); }
.review-file-note dt { color: #7f918d; font-size: .72rem; }
.review-file-note dd { margin: 0; color: #f2f0e9; font-size: .78rem; font-weight: 800; }
.review-file-note a { display: inline-flex; align-items: center; gap: 8px; color: #98ccc7; font-size: .78rem; font-weight: 800; text-decoration: none; }
.review-file-note a .ui-icon { width: 15px; }

@media (max-width: 980px) {
  .review-file-layout { grid-template-columns: 1fr; }
  .review-file-note { position: static; max-width: 520px; }
}

@media (max-width: 720px) {
  .site-atmosphere { opacity: .72; }
  .review-ledger-row { grid-template-columns: 34px minmax(0,1fr); gap: 14px; }
  .review-ledger-row small { grid-column: 2; text-align: left; }
  .review-file-note { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-atmosphere { display: none; }
}

/* 2.2 colour correction: brass is an edge/detail colour, never a large fill. */
.hero-panel {
  border: 1px solid rgba(118,179,174,.34);
  border-left: 3px solid #c84e38;
  background: linear-gradient(155deg, rgba(14,29,31,.98), rgba(8,19,21,.98));
  box-shadow: 10px 10px 0 rgba(185,149,88,.12), 0 28px 70px rgba(0,0,0,.22);
}
.hero-showcase {
  border: 1px solid rgba(185,149,88,.34);
  background: linear-gradient(155deg, rgba(15,29,31,.99), rgba(7,18,20,.99));
  box-shadow: 10px 10px 0 rgba(214,84,58,.2), 0 30px 74px rgba(0,0,0,.24);
}
.showcase-label, .showcase-foot { color: #aab7b3; }
.showcase-label { color: #d0ad70; }
.showcase-label .ui-icon, .showcase-foot .ui-icon { color: #d6543a; }
.showcase-foot { border-top-color: rgba(242,240,233,.12); }
.showcase-card { background: rgba(7,18,20,.84); border: 1px solid rgba(118,179,174,.12); border-left: 3px solid rgba(118,179,174,.22); }
.showcase-card:hover { border-left-color: #b99558; background: rgba(16,34,36,.96); }
.rank-number { color: #081112; }

/* Dark data cells and clearer scene visibility across long sections. */
.metric-grid span {
  color: #f2f0e9;
  background: rgba(8,21,23,.94);
  border-color: #304548;
  border-left-color: #b99558;
}
.metric-grid small { color: #81938f; }
.metric-grid strong { color: #f2f0e9; }
.ranking-section { background: rgba(9,22,23,.88); }
.section-atmosphere { background: rgba(7,17,19,.72); }
.guides-section { background: rgba(10,24,25,.9); }

.casino-name a { color: #f2f0e9; }
.casino-name a:hover { color: #98ccc7; }

/* RC5 account/community contrast guarantees */
.account-profile,.reader-review-card,.reader-review-empty{color:var(--text);background:var(--surface-elevated);border-color:var(--border-strong)}
.account-profile h2,.reader-review-card strong,.account-submission-list strong{color:var(--text)}
.account-submission-list article,.saved-account-list article{border-bottom-color:var(--border)}
.danger-button{color:#ffc1bd;border-color:#8b4c49;background:#321b1c}
.danger-button:hover{color:#fff;border-color:#d96d67;background:#8b3532}
.reader-review-head>span{color:#e2bd74}

/* Source: styles/atmosphere.css */
/* ========================================================================== 
   Bastion Atmosphere 3 — Broadcast North
   A factual editorial interface with province-led colour, varied geometry and
   motion that follows the reading path. This block intentionally overrides
   legacy blue/cyan treatments from the first visual pass.
   ========================================================================== */
:root {
  --ink: #071211;
  --ink-soft: #0b1816;
  --primary: #91aaa4;
  --primary-hover: #b9c9c4;
  --primary-strong: #789991;
  --cta: #bd4a38;
  --cta-hover: #d35d47;
  --accent: #a88250;
  --accent-text: #c8aa7a;
  --accent-soft: rgba(168, 130, 80, .12);
  --gold: #a88250;
  --gold-soft: rgba(168, 130, 80, .12);
  --background: #06100e;
  --surface: #0c1816;
  --surface-alt: #11201d;
  --surface-elevated: #172925;
  --text: #f1eee5;
  --text-secondary: #adb8b3;
  --muted: #818d88;
  --border: #273934;
  --border-strong: #3b5049;
  --success: #76a88c;
  --warning: #bd9558;
  --error: #d96a62;
  --info: #839f99;
  --shadow: 0 16px 42px rgba(0, 0, 0, .28);
  --shadow-lg: 0 38px 110px rgba(0, 0, 0, .48);
  --radius-sm: 5px;
  --radius: 10px;
  --radius-lg: 16px;
}
html { color-scheme: dark; background: var(--background); }
body {
  background:
    radial-gradient(circle at 88% -10%, rgba(189,74,56,.065), transparent 32rem),
    radial-gradient(circle at -8% 22%, rgba(120,153,145,.055), transparent 34rem),
    linear-gradient(180deg, #06100e 0%, #081310 46%, #050d0c 100%);
}
body::before {
  opacity: .11;
  background-image:
    linear-gradient(rgba(244,238,224,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,238,224,.013) 1px, transparent 1px);
  background-size: 84px 84px;
}
::selection { color: #06100e; background: #b9c9c4; }
.card {
  background: linear-gradient(156deg, rgba(19,35,31,.985), rgba(9,19,17,.99));
  border-color: var(--border);
  box-shadow: 0 16px 38px rgba(0,0,0,.22);
}
.section-alt { background: rgba(9,20,18,.92); }
.input-control,.select-control { color: var(--text); background: #091512; border-color: var(--border-strong); }
.input-control::placeholder { color: #77837f; }
.input-control:hover,.select-control:hover { border-color: #536a62; }
.input-control:focus,.select-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(145,170,164,.15); }

/* Brand: editorial monogram, not a startup shield. */
.brand-symbol { width: 44px; height: 44px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.32)); }
.brand-symbol svg { width: 100%; height: 100%; overflow: visible; }
.brand-base { fill: #ede8dc; }
.brand-slash { fill: var(--cta); }
.brand-word { color: #f4efe5; letter-spacing: -.06em; }
.brand-word span { color: #cf604a; text-shadow: none; }

.site-header { background: rgba(5,14,12,.93); border-bottom-color: rgba(99,124,115,.24); backdrop-filter: blur(18px) saturate(112%); }
.site-header.is-scrolled { background: rgba(5,14,12,.98); box-shadow: 0 14px 38px rgba(0,0,0,.3); }
.header-progress { background: linear-gradient(90deg, #7e9b94, #bd4a38 58%, #a88250); box-shadow: none; }
.primary-nav a { color: #d8ded9; }
.primary-nav a::after { background: var(--cta); }
.icon-button,.menu-toggle,.lang-switch a { color: #d4ddd8; background: #0a1714; border-color: var(--border); }
.icon-button:hover,.menu-toggle:hover { color: #fff; background: #14231f; border-color: #6f877f; }
.lang-switch a[aria-current="true"] { color: #07110f; background: #b3c4bf; }
.mobile-panel { color: var(--text); background: #091512; border-color: var(--border); }

/* The first scene feels like a live editorial broadcast rather than a neon UI. */
.hero { min-height: 730px; background: #050e0c; border-bottom-color: #22342f; }
.hero-atmosphere::after {
  background:
    linear-gradient(90deg, rgba(5,14,12,.5), transparent 48%, rgba(5,14,12,.31)),
    linear-gradient(to bottom, rgba(5,14,12,.1), rgba(5,14,12,.9) 92%);
}
.hero-horizon {
  opacity: .78;
  background:
    radial-gradient(ellipse at 50% 78%, transparent 0 41%, rgba(121,157,148,.12) 41.2% 41.75%, transparent 42% 48%, rgba(189,74,56,.08) 48.2% 48.55%, transparent 49%),
    radial-gradient(ellipse at 48% 91%, rgba(23,61,53,.58), transparent 55%);
}
.hero-field-lines {
  opacity: .13;
  background:
    repeating-linear-gradient(90deg, transparent 0 8.2%, rgba(139,168,160,.24) 8.3%, transparent 8.5%),
    repeating-linear-gradient(0deg, transparent 0 19%, rgba(139,168,160,.2) 19.2%, transparent 19.5%);
}
.hero-light-warm { background: #9e3329; opacity: .1; }
.hero-light-cool { background: #577c73; opacity: .09; }
.hero h1 span { color: #cf604a; text-shadow: 0 8px 34px rgba(126,42,31,.12); }
.hero h1::after { background: linear-gradient(90deg,#bd4a38 0 68%,#a88250 68%); }
.ranking-tape { background: rgba(7,18,15,.97); border-block-color: #263a34; }
.ranking-tape::before { background: #bd4a38; box-shadow: none; }
.tape-window,.tape-entry { border-color: rgba(112,139,130,.2); }
.tape-entry { color: #bfc9c4; }
.tape-entry b,.tape-entry strong { color: #c4a773; }
.tape-mark { background: #bd4a38; box-shadow: none; }
.ranking-tape a { color: #f2eee4; border-color: rgba(189,74,56,.72); }
.ranking-tape a:hover { color: #fff; background: #a63e30; }
.hero-data-rail { border-color: #2b3f39; background: rgba(9,22,18,.78); }
.hero-data-rail div + div { border-color: #2b3f39; }
.hero-data-rail dt { color: #82908b; }
.hero-data-rail dd { color: #ebe7dc; }
.hero-showcase { background: linear-gradient(160deg,rgba(18,34,30,.94),rgba(7,16,14,.98)); border-color: #30453e; box-shadow: 0 36px 90px rgba(0,0,0,.42); }
.showcase-card { background: rgba(12,26,22,.95); border-color: #31463f; }
.showcase-card::before { background: linear-gradient(90deg,var(--cta),transparent); opacity: .48; }
.showcase-label,.showcase-foot { color: #a7b4af; }
.showcase-score strong { color: #c7a873; }
.aurora { filter: blur(72px); opacity: .08; }
.aurora-one { background: #bd4a38; }
.aurora-two { background: #658c82; }
.orbit { border-color: rgba(145,170,164,.12); }

/* Deliberate asymmetry and varied geometry. */
.section-heading { align-items: end; }
.section-heading h2 { text-wrap: balance; }
.section-scene-label,.ranking-scope {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: #b6c0bb;
  font-family: ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.section-scene-label::before { content: ""; width: 28px; height: 1px; background: var(--cta); }
.ranking-scope { padding: 8px 0 8px 14px; border-left: 2px solid var(--accent); }
.ranking-scope small { color: var(--muted); }
.hero-scene-index { display: inline-grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; color: #aab5b0; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.hero-scene-index::before { content: none; }
.hero-scene-index > span { color: #c8a979; }
.hero-scene-index::after { content: ""; width: 46px; height: 1px; background: #4b5e57; }

/* Operator records: information and score drive the composition. */
.ranking-list { gap: 18px; }
.casino-card {
  position: relative;
  grid-template-columns: 58px minmax(290px,1.05fr) minmax(260px,.82fr) minmax(205px,.58fr);
  gap: 22px;
  overflow: hidden;
  padding: 24px 24px 24px 20px;
  background: var(--ref-surface, #fff);
  border-color: var(--ref-line, #d9dde1);
  border-radius: 3px;
  transform: none;
  transform-origin: center;
  transition: border-color .16s ease, background-color .16s ease;
}
.casino-card:hover { border-color: var(--ref-red, #c83236); }
.rank-column { align-self: stretch; display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 2px; border-right: 1px solid #263a34; }
.rank-column small { color: #687973; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .63rem; letter-spacing: .1em; text-transform: uppercase; writing-mode: vertical-rl; }
.rank-number { display: grid; place-items: center; width: 38px; height: 42px; color: #d8d2c5; background: transparent; border: 1px solid #465a53; border-radius: 3px 9px 3px 3px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .82rem; }
.casino-identity { display: grid; grid-template-columns: 84px minmax(0,1fr) auto; gap: 17px; align-items: center; min-width: 0; }
.casino-logo,.brand-mark { background: #f2eee4; border-color: rgba(255,255,255,.08); border-radius: 3px; }
.casino-heading { min-width: 0; }
.editorial-label { display: inline-block; margin-bottom: 6px; color: #c9ac7d; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .66rem; letter-spacing: .075em; text-transform: uppercase; }
.casino-name { margin: 0; font-size: clamp(1.15rem,1.65vw,1.5rem); }
.casino-name a { color: #f0ece2; }
.casino-name a:hover { color: #cbd6d0; }
.casino-deck { margin: 7px 0 10px; color: #a8b2ad; font-size: .86rem; line-height: 1.52; }
.casino-record-line { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #778781; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .67rem; text-transform: uppercase; }
.casino-record-line span + span::before { content: "/"; margin-right: 14px; color: #495d55; }
.score-block { min-width: 74px; padding-left: 14px; border-left: 1px solid #30443d; text-align: right; }
.score-block strong { display: inline; color: #eee9dc; font-family: var(--b9-type-editorial); font-size: 2rem; font-weight: 500; line-height: 1; }
.score-block > span { color: #7f8c87; font-size: .72rem; }
.score-block small { display: block; margin-top: 6px; color: #6f7e79; font-size: .58rem; letter-spacing: .05em; text-transform: uppercase; }
.score-top .score-block strong { color: #c6a66e; }
.bonus-block { align-self: stretch; padding: 2px 20px; border-inline: 1px solid #263a34; }
.bonus-kicker { margin: 0 0 6px; color: #75857f; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .63rem; letter-spacing: .08em; text-transform: uppercase; }
.bonus-title { color: #eee9df; }
.offer-ledger { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 14px 0; }
.offer-ledger div { min-width: 0; padding: 8px 10px; background: #091512; border-top: 1px solid #334840; }
.offer-ledger dt { color: #71817b; font-size: .63rem; text-transform: uppercase; }
.offer-ledger dd { margin: 3px 0 0; color: #d9d6cd; font-weight: 760; }
.casino-payment-line { display: flex; flex-wrap: wrap; gap: 5px 10px; color: #8c9a95; font-size: .7rem; }
.casino-payment-line span + span::before { content: "·"; margin-right: 10px; color: #586b63; }
.casino-card .pros { margin-top: 12px; }
.casino-card .pros li::before { color: #8aa39a; }
.card-actions { align-content: center; }
.card-secondary-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.text-action,.compare-toggle { color: #b8c4be; font-size: .78rem; font-weight: 750; }
.text-action { text-decoration-color: #536a61; text-underline-offset: 4px; }
.compare-toggle { min-height: 38px; padding: 7px 10px; background: transparent; border: 1px solid #3b5149; border-radius: 4px; cursor: pointer; }
.compare-toggle:hover,.compare-toggle[aria-pressed="true"] { color: #f4efe5; background: #1b302a; border-color: #758c84; }
.terms-details { border-top-color: #293d36; }

/* Payment records reveal information instead of performing a decorative logo parade. */
.payment-coverage { background: rgba(5,14,12,.95); border-block: 1px solid #21332e; }
.payment-coverage-grid { align-items: stretch; }
.payment-coverage-copy { padding-right: clamp(12px,3vw,44px); }
.payment-marquee { overflow: visible; }
.payment-track { display: grid; grid-template-columns: repeat(4,minmax(155px,1fr)); grid-auto-flow: row; grid-auto-columns: auto; gap: 10px; width: 100%; min-width: 0; padding: 0; transform: none !important; animation: none !important; }
.payment-method {
  position: relative;
  display: grid;
  grid-template-rows: 72px auto 0fr;
  place-items: stretch;
  min-height: 154px;
  padding: 15px;
  color: #aab6b0;
  background: linear-gradient(158deg,#10201c,#081411);
  border: 1px solid #2a3f38;
  border-radius: 4px 12px 4px 4px;
  text-align: left;
  overflow: hidden;
  transition: border-color .16s ease,background .16s ease,grid-template-rows .32s ease;
}
.payment-method:nth-child(3n+2) { border-radius: 12px 4px 4px 4px; }
.payment-method:hover,.payment-method:focus-visible { z-index: 2; background: #13251f; border-color: #526960; outline: none; grid-template-rows: 72px auto 1fr; }
.payment-mark { display: flex; align-items: center; justify-content: flex-start; border-bottom: 1px solid #273b34; }
.payment-method img { width: 96px; height: 56px; object-fit: contain; object-position: left center; filter: saturate(.82) contrast(.96); }
.payment-summary { display: grid; gap: 3px; padding-top: 11px; }
.payment-summary strong { color: #e8e4da; font-size: .88rem; }
.payment-summary span { color: #778780; font-size: .66rem; }
.payment-detail { min-height: 0; overflow: hidden; opacity: 0; transform: translateY(6px); transition: opacity .24s ease,transform .24s ease; }
.payment-method:hover .payment-detail,.payment-method:focus-visible .payment-detail { opacity: 1; transform: translateY(0); }
.payment-detail dl { display: grid; gap: 8px; margin: 13px 0 8px; padding-top: 11px; border-top: 1px solid #2d413a; }
.payment-detail dl div { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.payment-detail dt { color: #71807a; font-size: .6rem; text-transform: uppercase; }
.payment-detail dd { margin: 0; color: #d2d0c8; font-size: .67rem; text-align: right; }
.payment-detail > span { color: #8f9c96; font-size: .64rem; }

/* Province files use their own restrained accent rather than re-skinning the whole site. */
.province-hero { position: relative; overflow: hidden; background: linear-gradient(112deg,#081512 0 58%,color-mix(in srgb,var(--province-accent) 10%,#081512)); }
.province-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg,transparent 58%,color-mix(in srgb,var(--province-secondary) 8%,transparent)); }
.province-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,.56fr); gap: clamp(34px,6vw,82px); align-items: end; }
.province-hero-art { position: absolute; right: 5vw; top: 4%; width: min(42vw,520px); height: 92%; opacity: .17; pointer-events: none; }
.province-hero-art > span { position: absolute; right: 0; bottom: -8%; color: transparent; -webkit-text-stroke: 1px color-mix(in srgb,var(--province-accent) 72%,transparent); font-family: var(--b9-type-editorial); font-size: clamp(11rem,26vw,25rem); line-height: .8; letter-spacing: -.12em; }
.province-hero-art i { position: absolute; right: 7%; left: 28%; height: 1px; background: linear-gradient(90deg,transparent,var(--province-secondary)); transform-origin: right; }
.province-hero-art i:nth-child(2) { top: 28%; transform: rotate(-8deg); }
.province-hero-art i:nth-child(3) { top: 52%; transform: rotate(4deg); }
.province-hero-art i:nth-child(4) { top: 72%; transform: rotate(-3deg); }
.province-fact-board { position: relative; padding: 22px; background: rgba(7,18,15,.86); border: 1px solid color-mix(in srgb,var(--province-secondary) 38%,#263a34); border-radius: 4px 16px 4px 4px; }
.province-fact-board > span { position: absolute; right: 18px; top: -36px; color: color-mix(in srgb,var(--province-accent) 80%,#d7cabb); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 2.4rem; font-weight: 850; }
.province-fact-board dl { display: grid; gap: 0; margin: 0; }
.province-fact-board dl div { display: grid; grid-template-columns: minmax(96px,.6fr) 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid #293d36; }
.province-fact-board dl div:last-child { border-bottom: 0; }
.province-fact-board dt { color: #7f8d87; font-size: .67rem; text-transform: uppercase; }
.province-fact-board dd { margin: 0; color: #e5e1d7; line-height: 1.4; }
.province-context { background: linear-gradient(180deg,rgba(9,21,18,.9),rgba(5,14,12,.96)); }
.province-context-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(300px,.7fr); gap: clamp(32px,6vw,80px); align-items: start; }
.province-context .article-content { padding-left: 22px; border-left: 2px solid var(--province-accent); }
.province-payment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.province-payment-grid > span { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; min-height: 58px; padding: 8px 10px; background: #0b1815; border: 1px solid #283b35; }
.province-payment-grid img { width: 66px; height: 38px; object-fit: contain; object-position: left; }
.province-payment-grid strong { color: #d9d6cd; font-size: .78rem; }

/* Source register: evidence is presented as a record, not as a shield/check icon. */
.source-register { border-top: 1px solid #344941; }
.source-register-head { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; color: #7f8f88; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .67rem; letter-spacing: .06em; text-transform: uppercase; }
.source-register ol,.source-register ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: source; }
.source-register li { counter-increment: source; display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 13px; align-items: center; padding: 14px 0; border-top: 1px solid #263a34; }
.source-register li::before { content: counter(source,decimal-leading-zero); color: #a98b59; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .66rem; }
.source-register a { color: #e5e1d7; font-weight: 760; overflow-wrap: anywhere; }
.source-register li span,.source-register li small { color: #788780; font-size: .68rem; }
.source-register li small { text-align: right; }
.source-register-empty { color: #7e8d87; font-size: .82rem; }

/* Comparison tool. */
.compare-dock { position: fixed; left: 50%; bottom: 18px; z-index: 90; display: flex; align-items: center; gap: 16px; width: min(940px,calc(100vw - 32px)); padding: 10px 12px; background: rgba(8,19,16,.96); border: 1px solid #40564e; border-radius: 6px 16px 6px 6px; box-shadow: 0 24px 70px rgba(0,0,0,.46); transform: translateX(-50%); backdrop-filter: blur(16px); }
.compare-dock-items { display: flex; flex: 1; flex-wrap: wrap; gap: 7px; }
.compare-dock-items > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 8px 7px 10px; color: #d9d6cd; background: #13231f; border-left: 2px solid #8b704b; font-size: .72rem; }
.compare-dock-items button { display: grid; place-items: center; width: 22px; height: 22px; padding: 0; color: #aab5b0; background: transparent; border: 0; cursor: pointer; }
.compare-dock-actions { display: flex; align-items: center; gap: 8px; }
.compare-clear { min-height: 40px; color: #9caaa4; background: transparent; border: 0; cursor: pointer; }
.compare-sheet { position: fixed; inset: 0; z-index: 110; }
.compare-sheet-backdrop { position: absolute; inset: 0; background: rgba(1,7,5,.75); backdrop-filter: blur(7px); }
.compare-sheet-panel { position: absolute; inset: auto 0 0; max-height: 90vh; overflow: auto; padding: clamp(22px,4vw,54px); background: #081411; border-top: 1px solid #425951; box-shadow: 0 -30px 90px rgba(0,0,0,.55); }
.compare-sheet-head { display: flex; align-items: start; justify-content: space-between; gap: 24px; max-width: var(--container); margin: 0 auto 28px; }
.compare-sheet-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; max-width: var(--container); margin: 0 auto; }
.compare-sheet-grid > article { padding: 20px; background: #0d1d19; border: 1px solid #2e433b; border-radius: 4px 14px 4px 4px; }
.compare-sheet-brand { display: flex; gap: 12px; align-items: center; padding-bottom: 14px; border-bottom: 1px solid #2c4039; }
.compare-sheet-brand small { display: block; margin-top: 4px; color: #77867f; }
.compare-sheet-logo { width: 66px; height: 52px; }
.compare-sheet-grid dl { margin: 12px 0 18px; }
.compare-sheet-grid dl div { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid #273a34; }
.compare-sheet-grid dt { color: #788780; font-size: .68rem; text-transform: uppercase; }
.compare-sheet-grid dd { margin: 0; color: #dedbd2; text-align: right; }
.compare-open { overflow: hidden; }

/* The route atmosphere uses source-backed photography in reference-system.css. */

@media (max-width: 1120px) {
  .casino-card { grid-template-columns: 52px minmax(280px,1fr) minmax(240px,.8fr); }
  .casino-card .card-actions { grid-column: 2/-1; display: grid; grid-template-columns: minmax(180px,.45fr) 1fr; gap: 16px; }
  .payment-track { grid-template-columns: repeat(3,minmax(150px,1fr)); }
  .compare-sheet-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 860px) {
  .province-hero-grid,.province-context-grid { grid-template-columns: 1fr; }
  .province-hero-art { width: 75vw; opacity: .1; }
  .province-fact-board { margin-top: 26px; }
  .payment-track { grid-template-columns: repeat(2,minmax(145px,1fr)); }
  .province-payment-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .compare-dock { align-items: stretch; flex-direction: column; gap: 8px; }
  .compare-dock-actions { justify-content: flex-end; }
}
@media (max-width: 720px) {
  .hero { min-height: auto; }
  .casino-card,.casino-card:nth-child(even) { grid-template-columns: 38px minmax(0,1fr); gap: 14px; padding: 18px 16px 18px 13px; border-radius: 4px 12px 4px 4px; }
  .rank-column { grid-row: 1/3; }
  .rank-column small { display: none; }
  .casino-identity { grid-column: 2; grid-template-columns: 70px minmax(0,1fr); gap: 12px; }
  .score-block { grid-column: 1/-1; display: flex; align-items: baseline; gap: 4px; padding: 9px 0 0; border-left: 0; border-top: 1px solid #2b4038; text-align: left; }
  .score-block small { margin: 0 0 0 auto; }
  .bonus-block,.casino-card .card-actions { grid-column: 1/-1; border-inline: 0; padding-inline: 0; }
  .casino-card .card-actions { display: grid; grid-template-columns: 1fr; }
  .casino-record-line span + span::before { display: none; }
  .payment-track { grid-template-columns: 1fr 1fr; }
  .payment-method { min-height: 142px; }
  .province-payment-grid { grid-template-columns: 1fr; }
  .province-fact-board dl div { grid-template-columns: 100px 1fr; }
  .source-register li { grid-template-columns: 28px minmax(0,1fr); }
  .source-register li small { grid-column: 2; text-align: left; }
  .compare-dock { bottom: 10px; width: calc(100vw - 20px); padding: 9px; }
  .compare-dock-items { overflow: auto; flex-wrap: nowrap; }
  .compare-dock-items > span { flex: none; }
  .compare-sheet-grid { grid-template-columns: 1fr; }
  .compare-sheet-panel { padding: 20px 14px; }
}
@media (max-width: 470px) {
  .payment-track { grid-template-columns: 1fr; }
  .payment-method { grid-template-rows: 60px auto 1fr; }
  .payment-detail { opacity: 1; transform: none; }
  .compare-dock-actions .btn { flex: 1; }
  .casino-identity { grid-template-columns: 62px minmax(0,1fr); }
  .offer-ledger { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .site-atmosphere > *,.casino-card,.payment-method { transition: none !important; animation: none !important; transform: none !important; }
  .site-atmosphere { display: none; }
}
.source-register li::before { content: none; }
.source-sequence { color: #a98b59 !important; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .66rem !important; }
.source-register li > div:first-of-type { min-width: 0; }
.source-register li > div:first-of-type small { display: block; margin-top: 4px; }
.source-date { display: grid; justify-items: end; gap: 4px; }
.source-date span { color: #6f7f78 !important; font-size: .58rem !important; letter-spacing: .07em; text-transform: uppercase; }
.source-date strong { color: #c6c2b8; font-size: .72rem; }
@media(max-width:720px){.source-date{grid-column:2;justify-items:start}.source-register li{grid-template-columns:28px minmax(0,1fr)}}
.payment-method.is-research { background: linear-gradient(158deg,#0c1916,#07110f); border-color: #22342e; }
.payment-method.is-research .payment-mark { opacity: .72; }
.payment-method.is-research .payment-summary span { color: #9b896d; }
.payment-method.is-research:hover,.payment-method.is-research:focus-visible { border-color: #756348; background: #14201b; }
@media (max-width: 720px) {
  .hero-scene-index { display: none; }
}

/* Source: styles/reference-system.css */
/* Bastion reference system: product UI informed by dense editorial comparison and sportsbook interfaces. */
:root{
  color-scheme:dark;
  --ref-bg:#090b0d;
  --ref-surface:#111418;
  --ref-surface-2:#171b20;
  --ref-panel:#1d2228;
  --ref-line:#2a3037;
  --ref-text:#f4f2ed;
  --ref-muted:#a7adb3;
  --ref-red:#d92d35;
  --ref-red-2:#b71f2b;
  --ref-green:#0e8f62;
  --ref-yellow:#f0c24b;
  --ref-shadow:0 20px 60px rgba(0,0,0,.34);
  --ref-radius:10px;
  --ref-radius-sm:6px;
}
html[data-theme="light"]{
  color-scheme:light;
  --ref-bg:#f1f3f5;
  --ref-surface:#ffffff;
  --ref-surface-2:#f8f9fa;
  --ref-panel:#eef1f3;
  --ref-line:#d9dde1;
  --ref-text:#171a1e;
  --ref-muted:#66707a;
  --ref-shadow:0 14px 36px rgba(19,26,32,.1);
}
html,body{background:var(--ref-bg);color:var(--ref-text)}
body{font-family:var(--b9-type-interface);background-image:none}
a{color:inherit}
.site-shell,.site-main{position:relative;z-index:2}
.site-header{background:color-mix(in srgb,var(--ref-bg) 94%,transparent);border-bottom:1px solid var(--ref-line);backdrop-filter:blur(18px)}
.site-header.is-scrolled{box-shadow:0 10px 32px rgba(0,0,0,.18)}
.header-progress{background:var(--ref-red)}
.brand svg{height:38px;width:auto}
.primary-nav a{font-weight:700;font-size:.86rem;letter-spacing:.01em;color:var(--ref-muted)}
.primary-nav a:hover,.primary-nav a[aria-current="page"]{color:var(--ref-text)}
.primary-nav a[aria-current="page"]:after{background:var(--ref-red)}
.icon-button,.province-mini,.lang-switch{background:var(--ref-surface-2);border-color:var(--ref-line);color:var(--ref-text)}
.theme-toggle span{font-size:1rem;line-height:1}
.theme-toggle-mobile{border:1px solid var(--ref-line);background:var(--ref-surface-2);color:var(--ref-text);border-radius:6px;padding:.55rem .7rem;font-weight:700}
.mobile-panel{background:var(--ref-surface);color:var(--ref-text);border-color:var(--ref-line)}
.mobile-panel a{border-color:var(--ref-line)}

.site-atmosphere{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--ref-bg)}
.atmosphere-photo{position:absolute;inset:-4%;opacity:0;background-size:cover;background-position:center;transition:opacity .7s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);transform:scale(1.04)}
.atmosphere-photo-stadium{background-image:none}
.atmosphere-photo-casino{background-image:none}
.atmosphere-photo-city{background-image:none}
.site-atmosphere[data-scene="sportsbook"] .atmosphere-photo-stadium,.site-atmosphere[data-scene="ranking"] .atmosphere-photo-stadium{opacity:.14;transform:scale(1)}
.site-atmosphere[data-scene="cashier"] .atmosphere-photo-casino{opacity:.11;transform:scale(1)}
.site-atmosphere[data-scene="canada"] .atmosphere-photo-city,.site-atmosphere[data-scene="editorial"] .atmosphere-photo-city{opacity:.1;transform:scale(1)}
.atmosphere-vignette{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ref-bg) 72%,transparent),var(--ref-bg) 75%),linear-gradient(90deg,var(--ref-bg) 0%,transparent 45%,var(--ref-bg) 100%)}
.atmosphere-noise{position:absolute;inset:0;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
.atmosphere-data-lines{position:absolute;right:4vw;top:18vh;width:28vw;height:48vh;opacity:.07;transform:skewY(-9deg)}
.atmosphere-data-lines i{display:block;height:1px;background:var(--ref-text);margin:6.5rem 0;box-shadow:0 1.25rem 0 var(--ref-text),0 2.5rem 0 var(--ref-text)}
html[data-theme="light"] .site-atmosphere{display:none}

.reference-hero{position:relative;min-height:690px;display:flex;align-items:stretch;overflow:hidden;border-bottom:1px solid var(--ref-line);background:#080a0c;color:#fff}
.reference-hero-photo{position:absolute;inset:0;background:none center 38%/cover no-repeat;filter:saturate(.82) contrast(1.08);transform:scale(1.02);animation:none}
.reference-hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,6,7,.96) 0%,rgba(4,6,7,.84) 45%,rgba(4,6,7,.44) 73%,rgba(4,6,7,.78) 100%),linear-gradient(0deg,#080a0c 0%,transparent 42%)}
.reference-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.28fr) minmax(320px,.72fr);gap:3rem;align-items:center;padding-top:7rem;padding-bottom:5rem}
.reference-hero-copy{max-width:780px}
.reference-kicker{display:inline-flex;align-items:center;gap:.65rem;margin:0 0 1.25rem;padding:.45rem .65rem;background:rgba(255,255,255,.08);border-left:3px solid var(--ref-red);font-size:.77rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}
.reference-hero h1{max-width:830px;margin:0 0 1.25rem;font-family:var(--b9-type-editorial);font-size:clamp(3rem,6.2vw,6.3rem);line-height:.92;letter-spacing:-.025em;text-transform:none;color:#fff}
.reference-hero-copy>p:not(.reference-kicker){max-width:690px;color:#d7d8da;font-size:1.12rem;line-height:1.68}
.hero-search{display:flex;max-width:720px;margin:2rem 0 1rem;padding:.35rem;background:rgba(10,12,14,.78);border:1px solid rgba(255,255,255,.24);border-radius:8px;box-shadow:0 20px 70px rgba(0,0,0,.4)}
.hero-search input{flex:1;min-width:0;padding:1rem 1.05rem;background:transparent;border:0;color:#fff;font-size:1rem;outline:0}
.hero-search input::placeholder{color:#a9acaf}
.intent-links{display:flex;gap:.55rem;flex-wrap:wrap;margin:0 0 1.55rem}
.intent-links a{padding:.45rem .65rem;border:1px solid rgba(255,255,255,.2);border-radius:5px;color:#d7d8da;font-size:.82rem;font-weight:700;text-decoration:none;background:rgba(0,0,0,.2)}
.intent-links a:hover{border-color:#fff;color:#fff}
.hero-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin:1.35rem 0}
.reference-hero .btn-secondary{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35)}
.reference-top-board{background:rgba(13,15,17,.9);border:1px solid rgba(255,255,255,.2);border-top:4px solid var(--ref-red);border-radius:8px;box-shadow:0 36px 100px rgba(0,0,0,.52);backdrop-filter:blur(18px);overflow:hidden}
.top-board-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.14)}
.top-board-head span{display:block;color:#aaa;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em}.top-board-head strong{font-size:1.1rem}
.top-board-head select{max-width:150px;background:#16191d;color:#fff;border-color:#343a40}
.top-board-row{display:grid;grid-template-columns:30px 62px 1fr auto;align-items:center;gap:.8rem;padding:1rem 1.15rem;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;transition:background-color .14s ease}
.top-board-row:hover{background:rgba(255,255,255,.06);}
.top-board-row>span{font-weight:900;color:#858a90}.top-board-row strong{display:block;color:#fff}.top-board-row small{display:block;color:#999;margin-top:.2rem}.top-board-row b{font-size:1.15rem;color:var(--ref-yellow)}
.top-board-logo{width:62px;height:42px}
.top-board-all{display:flex;justify-content:space-between;padding:1rem 1.15rem;color:#fff;font-weight:800;text-decoration:none;background:var(--ref-red)}
.market-ribbon{position:relative;z-index:3;background:var(--ref-surface);border-bottom:1px solid var(--ref-line)}
.market-ribbon .container{display:flex;align-items:center;gap:.35rem;overflow:auto;padding-top:.75rem;padding-bottom:.75rem;scrollbar-width:none}
.market-ribbon span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ref-muted);font-weight:900;margin-right:.8rem;white-space:nowrap}
.market-ribbon a{white-space:nowrap;text-decoration:none;padding:.52rem .75rem;background:var(--ref-surface-2);border:1px solid var(--ref-line);border-radius:4px;font-size:.82rem;font-weight:750;color:var(--ref-text)}

.btn{border-radius:6px;font-weight:850;letter-spacing:.01em;box-shadow:none}
.btn-primary{background:var(--ref-red);border-color:var(--ref-red);color:#fff}
.btn-primary:hover{background:var(--ref-red-2);border-color:var(--ref-red-2);}
.btn-secondary,.btn-outline-light,.btn-glass{background:var(--ref-surface-2);border-color:var(--ref-line);color:var(--ref-text)}
.section,.section-sm{position:relative;background:transparent;color:var(--ref-text)}
.section-heading h2,.page-header h1,.listing-header h1{color:var(--ref-text);font-family:var(--b9-type-editorial);letter-spacing:-.035em}
.section-heading p,.page-header p,.listing-header p{color:var(--ref-muted)}
.eyebrow{color:var(--ref-red);font-weight:900;letter-spacing:.09em}
.section-link{color:var(--ref-text);font-weight:850}

.reference-ranking-section{background:var(--ref-bg);padding-top:5rem}
.reference-ranking-list{display:grid;gap:.75rem}
.reference-ranking-card{display:grid;grid-template-columns:60px minmax(230px,1.2fr) 90px minmax(220px,1fr) minmax(190px,.8fr) 180px;gap:1rem;align-items:stretch;padding:0;background:var(--ref-surface);border:1px solid var(--ref-line);border-radius:8px;overflow:hidden;transition:border-color .14s ease,background-color .14s ease;}
.reference-ranking-card:hover{border-color:color-mix(in srgb,var(--ref-red) 62%,var(--ref-line));}
.ranking-position{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ref-surface-2);border-right:1px solid var(--ref-line)}
.ranking-position strong{font-size:1.35rem}.ranking-position span{font-size:.62rem;text-transform:uppercase;color:var(--ref-muted)}
.operator-brand-cell,.operator-score-cell,.operator-offer-cell,.operator-facts-cell,.operator-action-cell{padding:1.1rem 0;min-width:0}
.operator-brand-cell{display:grid;grid-template-columns:86px 1fr;gap:1rem;align-items:center}.operator-brand-cell h2,.operator-brand-cell h3{font-size:1.05rem;margin:.2rem 0}.operator-brand-cell h2 a,.operator-brand-cell h3 a{text-decoration:none}.operator-brand-cell p,.operator-brand-cell small{margin:0;color:var(--ref-muted);font-size:.75rem}.editorial-label{display:inline-block;color:var(--ref-red);font-size:.67rem;font-weight:900;text-transform:uppercase;letter-spacing:.05em}
.casino-logo-frame{position:relative;display:flex;align-items:center;justify-content:center;width:86px;height:58px;background:#fff;border:1px solid #e3e5e6;border-radius:6px;overflow:hidden}.casino-logo-frame img{position:relative;z-index:2;max-width:76px;max-height:46px;width:auto;height:auto;object-fit:contain}.casino-logo-fallback{position:absolute;z-index:1;color:#222;font-weight:950;font-size:.72rem;letter-spacing:.04em}.casino-logo-frame.is-loaded .casino-logo-fallback{opacity:0}
.operator-score-cell{display:flex;align-items:baseline;justify-content:center;align-content:center;flex-wrap:wrap;border-left:1px solid var(--ref-line);border-right:1px solid var(--ref-line)}.operator-score-cell strong{font-size:1.75rem;color:var(--ref-yellow)}.operator-score-cell span{color:var(--ref-muted)}.operator-score-cell small{flex-basis:100%;text-align:center;color:var(--ref-muted);font-size:.65rem}
.operator-offer-cell>span{font-size:.65rem;text-transform:uppercase;color:var(--ref-muted);letter-spacing:.06em}.operator-offer-cell>strong{display:block;margin:.35rem 0;font-size:.95rem}.operator-offer-cell>small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--ref-muted);font-size:.72rem;line-height:1.45}
.operator-facts-cell dl{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:0}.operator-facts-cell dt{font-size:.63rem;text-transform:uppercase;color:var(--ref-muted)}.operator-facts-cell dd{margin:.15rem 0 0;font-weight:800;font-size:.78rem}.operator-payment-list{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.65rem}.operator-payment-list span{padding:.22rem .35rem;background:var(--ref-panel);border-radius:3px;color:var(--ref-muted);font-size:.65rem}
.operator-action-cell{padding-right:1rem;display:flex;flex-direction:column;justify-content:center;gap:.45rem}.operator-action-cell .btn{width:100%;justify-content:center}.operator-action-cell .text-action{text-align:center;font-size:.78rem;font-weight:800}.operator-action-cell>small{color:var(--ref-muted);font-size:.62rem;text-align:center}.operator-tools{display:flex;justify-content:center;gap:.25rem}.operator-tools button{border:0;background:transparent;color:var(--ref-muted);font-size:.69rem;padding:.3rem;cursor:pointer}.operator-tools button[aria-pressed="true"]{color:var(--ref-yellow)}

.province-market-board{padding:5rem 0;background:var(--ref-surface-2);border-top:1px solid var(--ref-line);border-bottom:1px solid var(--ref-line)}
.province-board-head{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-bottom:1.5rem}.province-board-head h2{margin:.25rem 0;font-family:var(--b9-type-editorial);font-size:clamp(2rem,4vw,3.7rem);letter-spacing:-.025em}.province-board-head p{max-width:700px;color:var(--ref-muted)}
.province-board-active{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:.45rem;padding:1rem 1.25rem;background:var(--ref-surface);border-left:4px solid var(--ref-red)}.province-board-active span{grid-column:1/-1;font-weight:900}.province-board-active strong{font-size:1.65rem}.province-board-active small{color:var(--ref-muted)}
.province-market-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--ref-line);border-left:1px solid var(--ref-line);margin-bottom:1.25rem}
.province-market-row{display:grid;grid-template-columns:48px 1fr auto 44px 20px;gap:.75rem;align-items:center;padding:.9rem 1rem;border-right:1px solid var(--ref-line);border-bottom:1px solid var(--ref-line);text-decoration:none;background:var(--ref-surface);transition:background .2s ease}.province-market-row:hover,.province-market-row.is-active{background:color-mix(in srgb,var(--ref-red) 9%,var(--ref-surface))}.province-market-row.is-active{box-shadow:inset 3px 0 var(--ref-red)}.province-market-row>span{color:var(--ref-muted);font-size:.75rem}.province-code{font-weight:950;color:var(--ref-red)}

.payment-coverage{background:#0a0d0f;border-top:1px solid #24292e;border-bottom:1px solid #24292e}.payment-coverage-copy h2{color:#fff}.payment-coverage-copy p{color:#aeb4b9}.payment-method{border-radius:6px;background:#12161a;border-color:#2c3339;box-shadow:none}.payment-mark{background:#fff}.payment-detail{background:#0d1013}
html[data-theme="light"] .payment-coverage{background:#20252b}

.content-command{padding:5rem 0;background:var(--ref-bg)}
.editorial-command-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:1.25rem}.editorial-lead-card{min-height:520px;position:relative;overflow:hidden;border-radius:8px;border:1px solid var(--ref-line);background:#080a0c}.editorial-photo{position:absolute;inset:0;background-size:cover;background-position:center}.editorial-photo-casino{background-image:linear-gradient(0deg,rgba(6,8,9,.96),rgba(6,8,9,.12)),none}.editorial-lead-card>div:last-child{position:absolute;left:0;right:0;bottom:0;padding:2rem;color:#fff}.editorial-lead-card span,.editorial-story-list span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:#ef6a70;font-weight:900}.editorial-lead-card h3{font-size:clamp(1.8rem,3vw,3rem);line-height:1.05;margin:.6rem 0 1.25rem;max-width:700px}.editorial-lead-card a{font-weight:900;text-decoration:none}.editorial-story-list{display:grid;background:var(--ref-surface);border:1px solid var(--ref-line);border-radius:8px;overflow:hidden}.editorial-story-list article{padding:1.25rem;border-bottom:1px solid var(--ref-line)}.editorial-story-list article:last-child{border-bottom:0}.editorial-story-list h3{margin:.35rem 0;font-size:1.05rem}.editorial-story-list h3 a{text-decoration:none}.editorial-story-list p{margin:.35rem 0;color:var(--ref-muted);font-size:.82rem}.editorial-story-list small{color:var(--ref-muted);font-size:.68rem}

.semantic-search{background:var(--ref-bg)}.semantic-search-form{max-width:none;display:flex;padding:.45rem;background:var(--ref-surface);border:1px solid var(--ref-line);border-radius:7px}.semantic-search-form input{flex:1;border:0;background:transparent}.search-suggestions{display:flex;gap:.5rem;flex-wrap:wrap;margin:1rem 0}.search-suggestions a{padding:.65rem .8rem;background:var(--ref-surface);border:1px solid var(--ref-line);border-radius:5px;text-decoration:none;font-weight:750}.search-result-group{margin-top:2rem}.search-group-head{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid var(--ref-text);padding-bottom:.55rem}.search-group-head h2{margin:0;font-size:1.3rem}.search-group-head span{color:var(--ref-muted)}.search-results{display:grid}.search-result-row{display:grid;grid-template-columns:1fr auto 24px;gap:1rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--ref-line)}.search-result-row>div>span{font-size:.67rem;text-transform:uppercase;color:var(--ref-red);font-weight:900}.search-result-row h3{margin:.2rem 0;font-size:1.05rem}.search-result-row h3 a{text-decoration:none}.search-result-row p{margin:0;color:var(--ref-muted);font-size:.82rem}.search-result-row>strong{font-size:1.25rem;color:var(--ref-yellow)}

.card,.article-content,.source-register,.province-fact-board,.guide-card{background:var(--ref-surface);color:var(--ref-text);border-color:var(--ref-line);box-shadow:none}.input-control,.select-control,textarea{background:var(--ref-surface);color:var(--ref-text);border-color:var(--ref-line)}.muted,.meta,.terms{color:var(--ref-muted)}

@media(max-width:1180px){.reference-ranking-card{grid-template-columns:54px minmax(220px,1.25fr) 78px minmax(200px,1fr) 170px}.operator-facts-cell{display:none}}
@media(max-width:900px){.reference-hero{min-height:auto}.reference-hero-grid{grid-template-columns:1fr;padding-top:6rem}.reference-top-board{max-width:680px}.reference-ranking-card{grid-template-columns:48px 1fr 76px}.operator-offer-cell,.operator-facts-cell{display:none}.operator-action-cell{grid-column:2/-1;display:grid;grid-template-columns:1fr 1fr auto;padding:0 1rem 1rem}.operator-action-cell>small{grid-column:1/-1}.editorial-command-grid{grid-template-columns:1fr}.province-market-grid{grid-template-columns:1fr}.province-board-head{grid-template-columns:1fr}.reference-hero h1{font-size:clamp(2.8rem,10vw,5rem)}}
@media(max-width:620px){.reference-hero-grid{padding-top:5.2rem;padding-bottom:3rem;gap:2rem}.reference-hero h1{font-size:clamp(2.5rem,13vw,4.2rem);line-height:.94}.hero-search{display:grid}.hero-search button{width:100%}.reference-top-board{border-radius:6px}.top-board-row{grid-template-columns:25px 54px 1fr auto;padding:.85rem}.top-board-logo{width:54px;height:38px}.reference-ranking-card{grid-template-columns:44px 1fr;border-radius:6px}.operator-score-cell{grid-column:1;grid-row:2;border:0;border-top:1px solid var(--ref-line);padding:.65rem}.operator-brand-cell{padding:1rem;grid-template-columns:70px 1fr}.operator-brand-cell .casino-logo-frame{width:70px;height:50px}.operator-action-cell{grid-column:2;grid-row:2;grid-template-columns:1fr;padding:.7rem 1rem}.operator-action-cell .text-action,.operator-tools{display:none}.province-market-row{grid-template-columns:40px 1fr auto 20px}.province-market-row>span:nth-of-type(2){display:none}.editorial-lead-card{min-height:420px}.payment-coverage-grid{display:block}.reference-hero-photo{animation:none}.intent-links{overflow:auto;flex-wrap:nowrap;padding-bottom:.35rem}.intent-links a{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){.reference-hero-photo{animation:none!important}.reference-ranking-card,.top-board-row{transition:none}}


/* Release 2.3 interaction surfaces: practical utilities, not proof-chip decoration. */
.brand-base{fill:currentColor}.brand-slash{fill:var(--ref-red)}
.saved-header-button{display:inline-flex;align-items:center;gap:.45rem;min-height:38px;padding:.45rem .65rem;border:1px solid var(--ref-line);border-radius:5px;background:var(--ref-surface-2);color:var(--ref-text);font-size:.75rem;font-weight:850;cursor:pointer}.saved-header-button b{display:grid;place-items:center;min-width:1.25rem;height:1.25rem;padding:0 .25rem;border-radius:3px;background:var(--ref-red);color:#fff;font-size:.68rem}.saved-header-button:hover{border-color:color-mix(in srgb,var(--ref-red) 65%,var(--ref-line))}
.saved-sheet{position:fixed;inset:0;z-index:120}.saved-sheet[hidden]{display:none}.saved-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}.saved-sheet-panel{position:absolute;right:0;top:0;bottom:0;width:min(460px,100%);overflow:auto;padding:1.25rem;background:var(--ref-surface);border-left:1px solid var(--ref-line);box-shadow:-22px 0 70px rgba(0,0,0,.34)}.saved-sheet-head{display:grid;grid-template-columns:1fr auto;gap:1rem;padding-bottom:1.1rem;border-bottom:2px solid var(--ref-text)}.saved-sheet-head h2{margin:.2rem 0;font-size:1.65rem}.saved-sheet-head p:last-child{margin:0;color:var(--ref-muted);font-size:.82rem}.saved-operator-list{display:grid}.saved-operator-list article{display:grid;grid-template-columns:72px minmax(0,1fr) auto 30px;gap:.7rem;align-items:center;padding:1rem 0;border-bottom:1px solid var(--ref-line)}.saved-operator-list strong,.saved-operator-list small{display:block}.saved-operator-list small{margin-top:.2rem;color:var(--ref-muted);font-size:.7rem}.saved-operator-list a{font-size:.75rem;font-weight:900}.saved-operator-list button,.saved-clear{border:1px solid var(--ref-line);background:transparent;color:var(--ref-muted);cursor:pointer}.saved-operator-list button{width:28px;height:28px;border-radius:4px}.saved-clear{margin-top:1rem;padding:.65rem .8rem;border-radius:4px;font-weight:800}.saved-empty{margin-top:1.5rem;padding:2rem 1rem;border:1px dashed var(--ref-line);color:var(--ref-muted);text-align:center}.saved-open{overflow:hidden}

.match-intent-panel{margin:1.5rem 0 2.5rem;border:1px solid var(--ref-line);border-top:4px solid var(--ref-red);background:var(--ref-surface)}.match-intent-head{display:grid;grid-template-columns:1fr auto;gap:2rem;padding:1.5rem;border-bottom:1px solid var(--ref-line)}.match-intent-head h2{margin:.25rem 0 .6rem;font-family:var(--b9-type-editorial);font-size:clamp(1.7rem,3.4vw,3rem);letter-spacing:-.025em}.match-intent-head p:last-child{max-width:780px;margin:0;color:var(--ref-muted)}.match-intent-head>span{align-self:start;padding:.45rem .6rem;background:var(--ref-panel);font-size:.72rem;font-weight:900;text-transform:uppercase}.match-intent-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);gap:0}.match-intent-grid>div{padding:1.25rem}.match-intent-grid>div+div{border-left:1px solid var(--ref-line)}.match-intent-grid h3{margin:0 0 .9rem;font-size:.78rem;text-transform:uppercase;letter-spacing:.07em;color:var(--ref-muted)}.match-operator-list,.match-guide-list{display:grid}.match-operator-list article{display:grid;grid-template-columns:28px 74px minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.8rem 0;border-bottom:1px solid var(--ref-line)}.match-operator-list article>span{color:var(--ref-red);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:900}.match-operator-list strong,.match-operator-list small{display:block}.match-operator-list small{margin-top:.15rem;color:var(--ref-muted);font-size:.68rem}.match-operator-list a{font-size:.74rem;font-weight:900}.match-guide-list a{display:grid;gap:.22rem;padding:.8rem 0;border-bottom:1px solid var(--ref-line);text-decoration:none}.match-guide-list span{color:var(--ref-red);font-size:.65rem;font-weight:900;text-transform:uppercase}.match-guide-list small{color:var(--ref-muted);font-size:.68rem}.match-data-notice{margin:0;padding:.8rem 1.25rem;border-top:1px solid var(--ref-line);background:var(--ref-surface-2);color:var(--ref-muted);font-size:.72rem}

/* Logo frames use honest wordmarks when a remote/authorized image is unavailable. */
.casino-logo-frame{background:var(--ref-surface-2);border-color:var(--ref-line)}.casino-logo-frame img{background:#fff;border-radius:3px;padding:3px}.casino-logo-fallback{inset:0;display:flex;align-items:center;justify-content:center;padding:.35rem;color:var(--ref-text);font-family:var(--b9-type-interface);font-size:.68rem;font-weight:950;line-height:1.05;text-align:center;letter-spacing:-.02em;text-transform:uppercase}.top-board-logo .casino-logo-fallback,.comparison-logo .casino-logo-fallback{font-size:.58rem}.saved-logo{width:66px;height:44px}.match-logo{width:70px;height:44px}

@media(max-width:900px){.saved-header-button span{display:none}.match-intent-grid{grid-template-columns:1fr}.match-intent-grid>div+div{border-left:0;border-top:1px solid var(--ref-line)}}
@media(max-width:620px){.saved-sheet-panel{padding:1rem}.saved-operator-list article{grid-template-columns:62px minmax(0,1fr) 28px}.saved-operator-list a{grid-column:2}.match-intent-head{grid-template-columns:1fr}.match-operator-list article{grid-template-columns:24px 60px minmax(0,1fr)}.match-operator-list article>a{grid-column:3}.match-logo{width:58px}.reference-hero-photo{background-position:58% center}}

/* 2.3.0 RC1 — reference-informed commercial/editorial finish. */
.brand{color:var(--ref-text)}.brand-word{color:var(--ref-text)}.brand-word span{color:var(--ref-red);text-shadow:none}.brand-symbol{color:var(--ref-text)}.brand-footer{color:#fff}.brand-footer .brand-word{color:#fff}
.reference-hero{min-height:620px}.reference-hero h1{max-width:760px;font-size:clamp(2.75rem,5.2vw,5rem);line-height:.96;letter-spacing:-.048em;text-transform:none}.reference-kicker{padding:.25rem 0;background:none;border-left:0;border-bottom:2px solid var(--ref-red);border-radius:0}.reference-hero-copy>small{color:#aeb3b7}.reference-top-board{border-radius:5px;backdrop-filter:blur(8px)}
.casino-logo-frame{isolation:isolate}.casino-logo-frame img,.casino-logo-frame picture{position:absolute;inset:4px;z-index:2;width:calc(100% - 8px);height:calc(100% - 8px);max-width:none;max-height:none;object-fit:contain;opacity:0;transition:opacity .18s ease;background:#fff;border-radius:3px;padding:3px}.casino-logo-frame picture img{position:static;inset:auto;width:100%;height:100%;opacity:1;padding:0}.casino-logo-frame.is-loaded>img,.casino-logo-frame.is-loaded>picture{opacity:1}.casino-logo-fallback{opacity:1;transition:opacity .15s ease}.casino-logo-frame.is-loaded .casino-logo-fallback{opacity:0}
.reference-ranking-card{border-radius:4px}.operator-tools button{font-weight:750}.operator-payment-list span{border:1px solid var(--ref-line);background:transparent}
.sports-research{padding:4.5rem 0;background:#101316;color:#fff;border-top:1px solid #292e34;border-bottom:1px solid #292e34}.sports-research-grid{display:grid;grid-template-columns:minmax(300px,.8fr) minmax(0,1.2fr);gap:3rem;align-items:start}.sports-research-copy h2{margin:.25rem 0 1rem;max-width:680px;font-family:var(--b9-type-editorial);font-size:clamp(2rem,4vw,3.7rem);line-height:1;letter-spacing:-.04em}.sports-research-copy>p:not(.eyebrow){color:#b8bec3;line-height:1.65}.sports-research-copy>small{display:block;margin-top:.7rem;color:#8e969d}.match-search{display:flex;margin-top:1.4rem;border:1px solid #3a4148;background:#080a0c;padding:.3rem;border-radius:5px}.match-search input{flex:1;min-width:0;border:0;background:transparent;color:#fff;padding:.85rem 1rem;font-size:1rem;outline:0}.sports-research-results{display:grid;grid-template-columns:1fr 1fr;border:1px solid #30363d;background:#0b0d0f}.sports-column+ .sports-column{border-left:1px solid #30363d}.sports-column h3{margin:0;padding:.85rem 1rem;border-bottom:2px solid var(--ref-red);font-size:.76rem;text-transform:uppercase;letter-spacing:.08em}.sports-column>a{display:grid;grid-template-columns:auto 1fr 20px;gap:.75rem;align-items:center;padding:.9rem 1rem;border-bottom:1px solid #282d33;text-decoration:none}.sports-column>a:last-child{border-bottom:0}.sports-column>a:hover{background:#161a1f}.sports-column strong{display:block;font-size:.86rem}.sports-column small{display:block;margin-top:.2rem;color:#8f979e;font-size:.7rem}.sports-column .ui-icon{width:17px}.sports-column>a:not(:has(.casino-logo-frame)){grid-template-columns:1fr 20px}
.guide-photo{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;height:190px;margin:0;padding:0;overflow:hidden;background:var(--b9-panel-raised);border:0}.guide-photo::before{display:none!important;content:none}.guide-photo img{display:block;width:100%;height:100%;min-height:0;object-fit:cover;filter:saturate(.78) contrast(1.04);transition:none}.guide-card:hover .guide-photo img{transform:none}.guide-photo figcaption{position:static;z-index:auto;margin:0;padding:0;color:var(--b9-muted);background:var(--b9-panel-raised);border-top:1px solid var(--b9-line)}
html[data-theme="light"] .sports-research{background:#20252a}.province-market-board{background:var(--ref-surface-2)}
@media(max-width:900px){.sports-research-grid{grid-template-columns:1fr}.reference-hero h1{font-size:clamp(2.7rem,9vw,4.6rem)}}
@media(max-width:620px){.reference-hero h1{font-size:clamp(2.35rem,11vw,3.7rem)}.sports-research{padding:3rem 0}.sports-research-results{grid-template-columns:1fr}.sports-column+.sports-column{border-left:0;border-top:1px solid #30363d}.match-search{display:grid}.match-search .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.guide-photo img{transition:none!important}}
.reference-hero-grid>*{min-width:0}.reference-hero-copy{width:100%;min-width:0}.reference-hero h1{max-width:100%;white-space:normal;overflow-wrap:normal;word-break:normal}.hero-search,.hero-actions{max-width:100%}
@media(max-width:620px){.reference-hero{overflow:hidden}.reference-hero-grid{width:calc(100% - 28px);max-width:100%;margin-inline:auto}.reference-hero-copy{overflow:hidden}.reference-hero h1{font-size:clamp(2.25rem,10.2vw,3.25rem);letter-spacing:-.04em}.reference-hero-copy>p:not(.reference-kicker){font-size:1rem;line-height:1.55}.hero-actions{display:grid;grid-template-columns:1fr}.hero-actions .btn{width:100%;min-width:0;white-space:normal;text-align:center}.intent-links{max-width:100%}}

/* Light theme is a complete editorial variant, not a light header over a dark page. */
html[data-theme="light"] .reference-hero{
  background:#e8ebee;
  color:#171a1e;
  border-bottom-color:#cfd4d9;
}
html[data-theme="light"] .reference-hero-photo{
  filter:grayscale(.18) saturate(.72) contrast(.94);
  opacity:.3;
}
html[data-theme="light"] .reference-hero-overlay{
  background:
    linear-gradient(90deg,rgba(245,247,248,.98) 0%,rgba(245,247,248,.93) 47%,rgba(245,247,248,.7) 72%,rgba(245,247,248,.9) 100%),
    linear-gradient(0deg,#e8ebee 0%,transparent 46%);
}
html[data-theme="light"] .reference-hero h1{color:#15181c;text-shadow:none}
html[data-theme="light"] .reference-hero-copy>p:not(.reference-kicker){color:#454c54}
html[data-theme="light"] .reference-kicker{color:#3f454c;background:rgba(255,255,255,.7);border-color:var(--ref-red)}
html[data-theme="light"] .hero-search{background:#fff;border-color:#c8cdd2;box-shadow:0 18px 46px rgba(30,38,45,.12)}
html[data-theme="light"] .hero-search input{color:#171a1e}
html[data-theme="light"] .hero-search input::placeholder{color:#727a83}
html[data-theme="light"] .intent-links a{color:#353b42;background:rgba(255,255,255,.68);border-color:#c7ccd1}
html[data-theme="light"] .intent-links a:hover{color:#111;border-color:#7f878f;background:#fff}
html[data-theme="light"] .reference-hero .btn-secondary{background:#fff;color:#1c2025;border-color:#b8bec4}
html[data-theme="light"] .reference-hero-copy>.small-print{color:#5f666e}
html[data-theme="light"] .market-ribbon{background:#fff}
html[data-theme="light"] .reference-top-board{background:#111418;border-color:#343a40;color:#fff}

/* RC5 contrast fixes for light notices on dark editorial surfaces */
.notice,.notice-warning{color:#3f2d22}
.notice-responsible{color:#173b30}
.notice h1,.notice h2,.notice h3,.notice strong,.notice-warning h1,.notice-warning h2,.notice-warning h3,.notice-warning strong{color:inherit}


/* RC5 final polish — deterministic themes, energetic editorial motion and sports desk. */
:root{
  --hot-red:#ef3340;
  --hot-red-deep:#b9162b;
  --hot-amber:#ffc857;
  --ice-blue:#79d8ff;
  --positive-bg:#eaf8f1;
  --positive-text:#143f31;
  --negative-bg:#fff0ed;
  --negative-text:#54211d;
}
.canada-flag-badge{display:inline-flex;align-items:center;gap:.34rem;flex:0 0 auto;padding:.33rem .52rem;border:1px solid var(--ref-line);border-radius:999px;background:var(--ref-surface-2);color:var(--ref-text);font-size:.67rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}.canada-flag-badge>span:first-child{font-size:1rem;line-height:1}.canada-flag-inline{display:inline-block;margin-right:.45rem;font-size:1.15em;filter:saturate(1.15)}
/* Never let a logo frame escape its assigned ranking column. */
.top-board-row{grid-template-columns:30px 64px minmax(0,1fr) auto;gap:.75rem}.top-board-logo{width:64px;height:44px;max-width:64px;min-width:0}.top-board-row>div{min-width:0}.top-board-row>div strong,.top-board-row>div small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-board-logo.casino-logo-frame{width:64px;height:44px}.top-board-logo .casino-logo-fallback{font-size:.51rem;line-height:1;padding:.22rem}.casino-logo-frame img{color:transparent}.casino-logo-frame:not(.is-loaded) img{visibility:hidden}
/* Review readability: explicit surface and text tokens, no inherited white-on-white states. */
.article-content{color:var(--ref-text)}.article-content>section{color:var(--ref-text)}.article-content h2,.article-content h3,.article-content h4{color:var(--ref-text)}.article-content p,.article-content li,.article-content td,.article-content th{color:var(--ref-text)}.article-content .muted,.article-content small{color:var(--ref-muted)}
.pros-box,.cons-box{position:relative;overflow:hidden;padding:1.3rem 1.35rem;border:1px solid transparent;border-radius:8px;box-shadow:0 10px 28px rgba(15,24,22,.07)}.pros-box{background:var(--positive-bg);border-color:#b9dfcd;color:var(--positive-text)}.cons-box{background:var(--negative-bg);border-color:#efc5bd;color:var(--negative-text)}.pros-box h3,.pros-box li{color:var(--positive-text)}.cons-box h3,.cons-box li{color:var(--negative-text)}.pros-box::before,.cons-box::before{position:absolute;inset:0 auto 0 0;width:4px;content:""}.pros-box::before{background:#1b9368}.cons-box::before{background:#d94a42}.pros-box li::marker{color:#16835d}.cons-box li::marker{color:#c63b35}
html[data-theme="light"] .page-header,.page-header{color:#fff}.page-header h1,.page-header .lead,.page-header .byline strong,.page-header .byline small,.page-header .eyebrow{color:#fff}.page-header .byline a{color:#fff}.page-header .notice-warning{color:#402016}.page-header-photo{position:relative;isolation:isolate;overflow:hidden;background:#0a1214;min-height:300px;display:flex;align-items:center}.page-header-photo::before{content:"";position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transform:scale(1.035);animation:none}.page-header-photo::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,11,13,.94),rgba(4,11,13,.68) 58%,rgba(4,11,13,.28)),linear-gradient(180deg,rgba(5,11,13,.25),rgba(5,11,13,.72))}.page-header-photo[data-scene="ranking"]::before{background-image:none}.page-header-photo[data-scene="cashier"]::before{background-image:none}.page-header-photo[data-scene="responsible"]::before,.page-header-photo[data-scene="editorial"]::before{background-image:none}.page-header-photo[data-scene="sportsbook"]::before{background-image:none}
/* Hot but credible bonus presentation: strong hierarchy, verified date and terms remain visible. */
.bonus-card-hot{position:relative;isolation:isolate;overflow:hidden;border:1px solid color-mix(in srgb,var(--hot-red) 42%,var(--ref-line));border-top:4px solid var(--hot-red);border-radius:8px;background:linear-gradient(145deg,color-mix(in srgb,var(--ref-surface) 96%,var(--hot-red) 4%),var(--ref-surface));transition:border-color .14s ease,background-color .14s ease;}.bonus-card-hot:hover{border-color:var(--hot-red)}.bonus-signal{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:-1rem -1rem 1rem;padding:.55rem 1rem;background:linear-gradient(90deg,var(--hot-red-deep),var(--hot-red));color:#fff;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.bonus-signal small{color:#ffe8e9}.bonus-card-hot .bonus-title{font-size:1.05rem;line-height:1.45}.bonus-card-hot .metric-grid span{background:var(--ref-surface-2);border:1px solid var(--ref-line);border-radius:5px}.bonus-card-hot .btn-primary{box-shadow:0 10px 24px rgba(217,45,53,.25)}.bonus-responsible-note{margin:.75rem 0 0;color:var(--ref-muted);font-size:.69rem}.bonus-logo{width:76px;height:52px}
/* Sports hub and match research. */
.sports-hub-hero{position:relative;isolation:isolate;overflow:hidden;min-height:600px;display:flex;align-items:center;background:#071013;color:#fff}.sports-hub-photo{position:absolute;inset:0;z-index:-2;background:none center/cover;animation:none}.sports-hub-hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(4,10,13,.97),rgba(4,10,13,.72) 55%,rgba(4,10,13,.38)),linear-gradient(180deg,rgba(5,10,12,.08),rgba(5,10,12,.86))}.sports-hub-hero-grid{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(320px,.62fr);gap:3rem;align-items:end;padding-top:7rem;padding-bottom:5rem}.sports-hub-hero h1{max-width:850px;margin:.75rem 0 1rem;font-size:clamp(3rem,6vw,6rem);line-height:.93;letter-spacing:-.055em}.sports-hub-hero p{max-width:780px;color:#c5cdd2;font-size:1.07rem;line-height:1.7}.sports-hub-hero small{display:block;margin-top:1rem;color:#99a8b0}.sports-scoreboard{display:grid;border-top:4px solid var(--hot-red);background:rgba(8,13,16,.82);border-radius:7px;box-shadow:0 28px 80px rgba(0,0,0,.42);backdrop-filter:blur(14px)}.sports-scoreboard>div{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.12)}.sports-scoreboard>div:last-child{border-bottom:0}.sports-scoreboard span{color:#95a1a8;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em}.sports-scoreboard strong{color:#fff;text-align:right}.sports-match-desk{background:var(--ref-bg)}.canada-coverage-badge{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem .8rem;border:1px solid var(--ref-line);border-radius:999px;background:var(--ref-surface);font-size:.72rem;font-weight:850}.canada-coverage-badge span{font-size:1.2rem}.league-command-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.8rem}.league-command-card{position:relative;isolation:isolate;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;gap:.45rem;padding:1.15rem;border:1px solid var(--ref-line);border-radius:7px;background:var(--ref-surface);text-decoration:none;transition:border-color .14s ease,background-color .14s ease;}.league-command-card:hover{border-color:var(--hot-red);}.league-command-card>span{color:var(--hot-red);font-size:.73rem;font-weight:950;letter-spacing:.12em}.league-command-card strong{font-size:1.25rem}.league-command-card small{color:var(--ref-muted)}.league-command-card .ui-icon{position:absolute;top:1rem;right:1rem}.match-command-search{display:grid;gap:.55rem;margin-top:1rem;padding:1.1rem;border:1px solid var(--ref-line);border-radius:7px;background:var(--ref-surface)}.match-command-search>div{display:grid;grid-template-columns:1fr auto;gap:.6rem}.match-command-search label{font-weight:850}.sports-topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.sports-topic-panel{position:relative;overflow:hidden;min-height:440px;border:1px solid var(--ref-line);border-radius:8px;background:var(--ref-surface)}.sports-topic-hockey{display:grid;grid-template-columns:.43fr .57fr}.sports-topic-photo{background:none center/cover}.sports-topic-content{padding:1.5rem}.sports-topic-content h2{margin:.5rem 0 1.2rem;font-size:clamp(1.8rem,3vw,3rem);line-height:1}.sports-guide-list{display:grid;border-top:1px solid var(--ref-line)}.sports-guide-list a{display:grid;grid-template-columns:1fr auto;gap:.35rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--ref-line);text-decoration:none}.sports-guide-list a>span{grid-column:1;color:var(--hot-red);font-size:.65rem;font-weight:850;text-transform:uppercase;letter-spacing:.08em}.sports-guide-list a>strong{grid-column:1}.sports-guide-list .ui-icon{grid-column:2;grid-row:1/3;align-self:center}.sports-guide-list a:hover strong{color:var(--hot-red)}.sports-bonus-grid{align-items:stretch}
/* Energetic hover/focus without removing keyboard or reduced-motion support. */
.reference-ranking-card{transition:border-color .14s ease,background-color .14s ease;}.reference-ranking-card:hover{border-color:color-mix(in srgb,var(--hot-red) 45%,var(--ref-line));}.btn-primary{background:linear-gradient(135deg,var(--hot-red),var(--hot-red-deep));border-color:var(--hot-red)}.btn-primary:hover{filter:brightness(1.08);}.btn:focus-visible,.league-command-card:focus-visible,.sports-guide-list a:focus-visible{outline:3px solid var(--hot-amber);outline-offset:3px}
/* Theme parity and mobile action parity. */
html[data-theme="light"] .article-content{--ref-text:#171a1e;--ref-muted:#606a74;color:#171a1e}html[data-theme="light"] .article-content>section,html[data-theme="light"] .article-content h2,html[data-theme="light"] .article-content h3,html[data-theme="light"] .article-content p,html[data-theme="light"] .article-content li{color:#171a1e}html[data-theme="light"] .toc,html[data-theme="light"] .sidebar-cta{color:#171a1e}html[data-theme="light"] .toc a{color:#343b42}.rating-row>span,.rating-row>strong{color:var(--ref-text)}
@media(max-width:1120px){.canada-flag-badge>span:last-child{display:none}.primary-nav a{font-size:.79rem}.sports-hub-hero-grid{grid-template-columns:1fr}.sports-scoreboard{max-width:680px}.league-command-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.page-header-photo{min-height:360px}.page-header-photo::after{background:linear-gradient(180deg,rgba(4,11,13,.72),rgba(4,11,13,.94))}.sports-hub-hero{min-height:auto}.sports-hub-hero-grid{padding-top:6rem;padding-bottom:3.5rem;gap:2rem}.sports-hub-hero h1{font-size:clamp(2.7rem,13vw,4.5rem)}.sports-topic-grid{grid-template-columns:1fr}.sports-topic-hockey{grid-template-columns:1fr}.sports-topic-photo{min-height:220px}.operator-offer-cell,.operator-facts-cell{display:block;grid-column:2/-1;padding:.75rem 1rem;border-top:1px solid var(--ref-line)}.operator-action-cell{grid-template-columns:1fr 1fr}.operator-action-cell .text-action{display:inline-flex;align-items:center;justify-content:center}.operator-tools{display:flex;grid-column:1/-1}.operator-tools button{min-height:44px}.bonus-card-hot{min-height:100%}.pros-cons{grid-template-columns:1fr}}
@media(max-width:560px){.league-command-grid{grid-template-columns:1fr}.match-command-search>div{grid-template-columns:1fr}.match-command-search .btn{width:100%}.top-board-row{grid-template-columns:24px 56px minmax(0,1fr) auto;padding:.82rem}.top-board-logo,.top-board-logo.casino-logo-frame{width:56px;height:40px}.operator-action-cell{grid-template-columns:1fr}.operator-action-cell .btn,.operator-action-cell .text-action{width:100%}.operator-tools{display:grid;grid-template-columns:1fr 1fr;width:100%}.horizontal-actions{display:grid;grid-template-columns:1fr}.horizontal-actions .btn{width:100%}}
@media(prefers-reduced-motion:reduce){.page-header-photo::before,.sports-hub-photo{animation:none!important}.bonus-card-hot,.reference-ranking-card,.league-command-card{transition:none}}
/* Wide-header compression keeps every desktop control inside the viewport. */
@media (max-width:1500px) and (min-width:981px){
  .header-inner{gap:13px}
  .primary-nav{gap:13px}
  .primary-nav a{font-size:.78rem}
  .canada-flag-badge>span:last-child,.saved-header-button>span{display:none}
  .province-mini{max-width:118px}
  .header-tools{gap:6px}
}


/* Release visual stabilization: photo-backed surfaces retain depth even when a remote editorial photo is unavailable. */
.reference-hero,
html[data-theme="light"] .reference-hero{
  background:
    radial-gradient(circle at 78% 32%,rgba(225,45,58,.22),transparent 23%),
    radial-gradient(circle at 64% 78%,rgba(37,111,132,.22),transparent 31%),
    linear-gradient(135deg,#080b0e 0%,#11181d 52%,#080b0e 100%);
  color:#fff;
}
.reference-hero-photo{
  background-color:#0b1115;
  background-image:
    linear-gradient(115deg,rgba(6,9,12,.18),rgba(6,9,12,.52)),
    none;
}
html[data-theme="light"] .reference-hero h1,
html[data-theme="light"] .reference-hero .reference-kicker,
html[data-theme="light"] .reference-hero .reference-hero-copy>p,
html[data-theme="light"] .reference-hero .reference-hero-copy>small{color:#fff}
.page-header-photo{
  background:
    radial-gradient(circle at 82% 20%,rgba(225,45,58,.2),transparent 25%),
    linear-gradient(130deg,#081014,#162128 58%,#090d10);
}
.page-header-photo::before{background-color:#0a1214}
.page-header-photo[data-scene="ranking"]::before{background-image:linear-gradient(100deg,rgba(5,10,12,.16),rgba(5,10,12,.48)),none}
.page-header-photo[data-scene="cashier"]::before{background-image:linear-gradient(100deg,rgba(5,10,12,.15),rgba(5,10,12,.5)),none}
.page-header-photo[data-scene="responsible"]::before,.page-header-photo[data-scene="editorial"]::before{background-image:linear-gradient(100deg,rgba(5,10,12,.17),rgba(5,10,12,.5)),none}
.page-header-photo[data-scene="sportsbook"]::before{background-image:linear-gradient(100deg,rgba(5,10,12,.13),rgba(5,10,12,.5)),none}
.sports-hub-photo{
  background-color:#081014;
  background-image:linear-gradient(110deg,rgba(4,10,13,.12),rgba(4,10,13,.5)),none;
}
.sports-topic-photo{
  background-color:#111b21;
  background-image:linear-gradient(145deg,rgba(8,15,19,.08),rgba(8,15,19,.45)),none;
}
/* Functional parity: light and dark use the same hierarchy, spacing and controls. */
html[data-theme="light"] .reference-top-board,
html[data-theme="light"] .sports-scoreboard{color:#fff}
html[data-theme="light"] .sports-hub-hero h1,
html[data-theme="light"] .sports-hub-hero p,
html[data-theme="light"] .sports-hub-hero small{color:#fff}
.article-content .pros-box,.article-content .cons-box{color:#17342a}
.article-content .cons-box{color:#4b211e}
.article-content .pros-box p,.article-content .pros-box li,.article-content .pros-box h3{color:#17342a}
.article-content .cons-box p,.article-content .cons-box li,.article-content .cons-box h3{color:#4b211e}
/* Hot cards are energetic, not deceptive: no timers, blinking or fake scarcity. */
.bonus-card-hot .bonus-signal{position:relative;overflow:hidden}
/* Final theme-parity overrides after the earlier light editorial variant. */
html[data-theme="light"] .reference-hero-photo{opacity:.52;filter:grayscale(.08) saturate(.8) contrast(1.04)}
html[data-theme="light"] .reference-hero-overlay{
  background:linear-gradient(90deg,rgba(4,7,9,.96) 0%,rgba(4,7,9,.86) 47%,rgba(4,7,9,.5) 73%,rgba(4,7,9,.78) 100%),linear-gradient(0deg,#080b0e 0%,transparent 48%)
}
html[data-theme="light"] .reference-kicker{color:#fff;background:rgba(7,10,12,.34);border-color:var(--hot-red)}
html[data-theme="light"] .reference-hero-copy>.small-print{color:#c7cdd1}
html[data-theme="light"] .toc h3,html[data-theme="light"] .sidebar-cta h3,html[data-theme="light"] .sidebar-cta .bonus-title{color:#171a1e}
html[data-theme="light"] .key-fact span{color:#5c6670}
.sports-hub-hero h1{font-family:var(--b9-type-editorial);text-transform:none}

/* RC5.1 contrast closure: editorial tables, FAQ accordions and light province board use explicit paired tokens. */
.province-board-head h2{color:var(--ref-text)}
.province-board-head .eyebrow{color:var(--hot-red)}
.article-content .responsive-table table,
.article-content .table-scroll table{background:var(--ref-surface);color:var(--ref-text)}
.article-content .responsive-table th,
.article-content .table-scroll th{background:var(--ref-surface-2);color:var(--ref-muted);border-color:var(--ref-line)}
.article-content .responsive-table td,
.article-content .table-scroll td{background:var(--ref-surface);color:var(--ref-text);border-color:var(--ref-line)}
.article-content .responsive-table tbody tr:hover td,
.article-content .table-scroll tbody tr:hover td{background:color-mix(in srgb,var(--ref-surface) 90%,var(--hot-amber) 10%)}
.faq-list details{background:var(--ref-surface);color:var(--ref-text);border-color:var(--ref-line)}
.faq-list summary{color:var(--ref-text);background:var(--ref-surface)}
.faq-list details[open] summary{background:var(--ref-surface-2)}
.faq-list details p{color:var(--ref-muted)}
.sports-bonus-grid:has(> :only-child){grid-template-columns:minmax(320px,560px)}

/* Source: styles/showcase.css */
/* Bastion: market ledger: editorial hierarchy with product-specific comparison rows. */
:root {
  --ref-bg: #090b0d;
  --ref-surface: #111418;
  --ref-surface-2: #171b20;
  --ref-panel: #1d2228;
  --ref-line: #2a3037;
  --ref-text: #f4f2ed;
  --ref-muted: #a7adb3;
  --ref-red: #d92d35;
  --ref-red-2: #b71f2b;
  --ref-green: #0e8f62;
  --ref-yellow: #f0c24b;
  --ref-shadow: 0 12px 32px rgba(0,0,0,.22);
}
html[data-theme="light"] {
  --ref-bg: #f1f3f5;
  --ref-surface: #fff;
  --ref-surface-2: #f8f9fa;
  --ref-panel: #eef1f3;
  --ref-line: #d9dde1;
  --ref-text: #171a1e;
  --ref-muted: #66707a;
  --ref-shadow: 0 10px 24px rgba(19,26,32,.08);
}

html, body { background: var(--ref-bg); color: var(--ref-text); }
body { background-image: none; }
body::before, .site-atmosphere { display: none; }
.site-header {
  min-height: 66px;
  background: var(--ref-bg);
  border-bottom: 1px solid var(--ref-line);
  box-shadow: none;
  backdrop-filter: none;
}
.brand-symbol { width: 38px; height: 38px; filter: none; }
.brand-word { letter-spacing: -.045em; }
.primary-nav { gap: clamp(.55rem, 1.2vw, 1.1rem); }
.primary-nav a { font-size: .82rem; font-weight: 700; letter-spacing: 0; }
.icon-button, .province-mini, .lang-switch, .mobile-panel {
  border-radius: 3px;
  box-shadow: none;
}
.icon-button:hover, .saved-header-button:hover, .brand:hover .brand-symbol { transform: none; filter: none; }

/* Home lead: put province, checked date and intent before decoration. */
.reference-hero,
html[data-theme="light"] .reference-hero {
  min-height: 0;
  overflow: visible;
  color: var(--ref-text);
  background: var(--ref-bg);
  border-bottom: 1px solid var(--ref-line);
}
.reference-hero-grid {
  grid-template-columns: minmax(0,1.12fr) minmax(320px,.78fr);
  gap: clamp(2rem,5vw,5rem);
  align-items: center;
  padding-top: clamp(3.5rem,7vh,5.5rem);
  padding-bottom: clamp(3rem,6vh,4.5rem);
}
.reference-hero-copy { max-width: 760px; }
.reference-kicker {
  display: inline-flex;
  padding: .32rem .55rem;
  margin-bottom: .8rem;
  color: var(--ref-muted);
  background: transparent;
  border: 0;
  border-left: 2px solid var(--ref-red);
  font-size: .72rem;
  letter-spacing: .055em;
}
.reference-hero h1 {
  max-width: 720px;
  margin: .3rem 0 .9rem;
  color: var(--ref-text);
  font-family: var(--b9-type-editorial);
  font-size: clamp(2.65rem,5vw,4.65rem);
  font-weight: 820;
  line-height: .99;
  letter-spacing: -.055em;
  text-transform: none;
  text-wrap: balance;
}
.reference-hero-copy > p:not(.reference-kicker) {
  max-width: 650px;
  color: var(--ref-muted);
  font-size: 1rem;
  line-height: 1.65;
}
.reference-hero-copy > small { color: var(--ref-muted); }
.hero-search {
  display: flex;
  max-width: 650px;
  margin: 1.35rem 0 .8rem;
  padding: 0;
  overflow: hidden;
  background: var(--ref-surface);
  border: 1px solid var(--ref-line);
  border-radius: 3px;
  box-shadow: none;
}
.hero-search:focus-within { border-color: var(--ref-muted); box-shadow: 0 0 0 2px color-mix(in srgb,var(--ref-muted) 20%,transparent); }
.hero-search input { min-height: 48px; color: var(--ref-text); }
.hero-search input::placeholder { color: var(--ref-muted); }
.hero-search .btn { min-height: 48px; border-radius: 0; }
.reference-hero .intent-links { display: none; }
.hero-actions { gap: .55rem; margin: .9rem 0; }
.btn {
  min-height: 44px;
  padding-inline: 1rem;
  border-radius: 3px;
  box-shadow: none;
  font-weight: 750;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
.btn-primary, .btn-primary:hover {
  color: #fff;
  background: var(--ref-red);
  border-color: var(--ref-red);
  filter: none;
  transform: none;
}
.btn-primary:hover { background: var(--ref-red-2); border-color: var(--ref-red-2); }
.btn-secondary, .btn-outline-light, .btn-glass {
  color: var(--ref-text);
  background: var(--ref-surface);
  border: 1px solid var(--ref-line);
}
.btn-secondary:hover, .btn-outline-light:hover, .btn-glass:hover { border-color: var(--ref-muted); }
.reference-top-board {
  color: var(--ref-text);
  background: var(--ref-surface);
  border: 1px solid var(--ref-line);
  border-top: 2px solid var(--ref-red);
  border-radius: 3px;
  box-shadow: none;
  backdrop-filter: none;
}
.top-board-head { padding: .95rem 1rem; }
.top-board-head span { color: var(--ref-muted); font-size: .68rem; }
.top-board-head select { max-width: 150px; }
.top-board-row {
  min-height: 66px;
  padding: .8rem 1rem;
  border-bottom: 1px solid var(--ref-line);
  transition: background-color .14s ease;
}
.top-board-row:hover { padding-left: 1rem; background: var(--ref-surface-2); transform: none; }
.top-board-row > b { color: var(--ref-yellow); font-variant-numeric: tabular-nums; }
.top-board-all { min-height: 48px; padding: .85rem 1rem; background: var(--ref-red); }
.market-ribbon { background: var(--ref-surface); border-bottom: 1px solid var(--ref-line); }
.market-ribbon .container { gap: 0; padding-block: .4rem; }
.market-ribbon span { margin-right: .6rem; font-size: .65rem; }
.market-ribbon a {
  padding: .55rem .65rem;
  color: var(--ref-muted);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--ref-line);
  border-radius: 0;
  font-size: .76rem;
}
.market-ribbon a:last-child { border-right: 0; }
.market-ribbon a:hover { color: var(--ref-text); background: transparent; border-color: var(--ref-line); text-decoration: underline; text-underline-offset: 4px; }

/* Comparison rows are a ledger: alignment and evidence carry the hierarchy. */
.section-heading { align-items: end; gap: 1.5rem; margin-bottom: 1.35rem; }
.section-heading h2, .page-header h1, .listing-header h1, .province-board-head h2 {
  color: var(--ref-text);
  font-family: var(--b9-type-editorial);
  font-weight: 780;
  letter-spacing: -.04em;
}
.section-heading h2 { font-size: clamp(1.7rem,3.1vw,2.45rem); }
.section-heading p, .page-header p, .listing-header p { color: var(--ref-muted); }
.eyebrow { color: var(--ref-red); letter-spacing: .075em; }
.section-link { font-weight: 750; }
.reference-ranking-section { padding-top: clamp(2.6rem,5vw,4.1rem); }
.reference-ranking-list { gap: .55rem; }
.reference-ranking-card {
  border-radius: 3px;
  box-shadow: none;
  transform: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.reference-ranking-card::after { content: none; display: none; }
.reference-ranking-card:hover {
  background: color-mix(in srgb,var(--ref-surface) 94%,var(--ref-red) 6%);
  border-color: color-mix(in srgb,var(--ref-red) 48%,var(--ref-line));
  box-shadow: none;
  transform: none;
}
.ranking-position { background: var(--ref-surface-2); }
.operator-brand-cell { border-left: 0; }
.reference-ranking-card .operator-brand-cell h2 a,
.reference-ranking-card .operator-brand-cell h3 a { color: var(--ref-text); }
.reference-ranking-card .operator-brand-cell h2 a:hover,
.reference-ranking-card .operator-brand-cell h3 a:hover { color: var(--ref-red); }
.operator-score-cell strong { color: var(--ref-yellow); font-variant-numeric: tabular-nums; }
.operator-payment-list span, .operator-facts-cell dd { font-variant-numeric: tabular-nums; }
.operator-action-cell .btn { width: 100%; }
.operator-action-cell .text-action { color: var(--ref-muted); }
.operator-action-cell .text-action:hover { color: var(--ref-text); }
.operator-tools button { min-height: 38px; }
.card, .filters, .comparison-wrap, .score-card, .bonus-card-hot, .faq-list details {
  border-radius: 3px;
  box-shadow: none;
}
.filters { background: var(--ref-surface); border-color: var(--ref-line); }
.input-control, .select-control, textarea { border-radius: 3px; }
.card, .article-content, .source-register, .province-fact-board, .guide-card {
  color: var(--ref-text);
  background: var(--ref-surface);
  border-color: var(--ref-line);
  box-shadow: none;
}
.toc { position: sticky; top: 84px; }
.article-content { line-height: 1.72; }
.article-content h2 { margin-top: 2.3rem; scroll-margin-top: 88px; }

/* Page headers use an editorial band; keep photography for actual sports coverage. */
.page-header-photo {
  min-height: 0;
  padding-block: clamp(2.2rem,5vw,3.8rem);
  color: var(--ref-text);
  background: var(--ref-surface-2);
  border-block: 1px solid var(--ref-line);
}
.page-header-photo::before, .page-header-photo::after { display: none; content: none; }
.page-header-photo .container h1,
.page-header-photo .container .lead,
.page-header-photo .container .byline,
.page-header-photo .container .byline strong,
.page-header-photo .container .byline small,
.page-header-photo .container .eyebrow { color: var(--ref-text); }
.page-header-photo .container .lead { max-width: 760px; color: var(--ref-muted); }
.reference-hero-photo, .page-header-photo::before { animation: none; }
.editorial-lead-card {
  min-height: 360px;
  background: var(--ref-surface-2);
  border: 1px solid var(--ref-line);
  border-top: 2px solid var(--ref-red);
  border-radius: 3px;
}
.editorial-photo-casino { display: none; }
.editorial-lead-card > div:last-child { position: relative; padding: clamp(1.25rem,3vw,2.25rem); color: var(--ref-text); }
.editorial-lead-card span, .editorial-story-list span { color: var(--ref-red); }
.editorial-lead-card h3 { max-width: 620px; font-size: clamp(1.65rem,3vw,2.55rem); line-height: 1.12; }
.editorial-lead-card a { color: var(--ref-text); text-decoration: underline; text-decoration-color: var(--ref-red); text-underline-offset: 4px; }
.editorial-story-list { background: var(--ref-surface); border-color: var(--ref-line); border-radius: 3px; }
.editorial-story-list article { padding: 1rem 1.1rem; }

/* One relevant arena image belongs on the sports desk; all effects settle immediately. */
.sports-hub-hero { min-height: 510px; color: #fff; }
.sports-hub-photo { animation: none; filter: saturate(.74) contrast(1.04); }
.sports-hub-hero::after {
  background: linear-gradient(90deg,rgba(4,10,13,.94),rgba(4,10,13,.74) 58%,rgba(4,10,13,.42));
}
.sports-hub-hero h1 { max-width: 790px; font-size: clamp(2.5rem,5vw,4.75rem); line-height: 1; letter-spacing: -.05em; }
.sports-scoreboard {
  color: #fff;
  background: rgba(9,13,16,.94);
  border: 1px solid rgba(255,255,255,.2);
  border-top: 2px solid var(--ref-red);
  border-radius: 3px;
  box-shadow: none;
  backdrop-filter: none;
}
.league-command-card {
  min-height: 150px;
  border-radius: 3px;
  transform: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.league-command-card::before { content: none; display: none; }
.league-command-card:hover { transform: none; box-shadow: none; border-color: var(--ref-red); background: var(--ref-surface-2); }
.league-command-card > span { color: var(--ref-red); }
.sports-topic-panel { border-radius: 3px; }
.sports-topic-photo { filter: saturate(.8); }

.province-hero { background: var(--ref-surface-2); }
.province-hero::before, .province-hero::after, .province-hero-art { display: none; }
.province-board-head h2 { font-size: clamp(1.8rem,3.3vw,2.7rem); }
.province-market-grid { border-color: var(--ref-line); }
.province-market-row { background: var(--ref-surface); }
.province-market-row:hover, .province-market-row.is-active { box-shadow: inset 3px 0 var(--ref-red); }
.payment-coverage { background: var(--ref-surface); border-color: var(--ref-line); }
.payment-coverage-copy h2, .payment-coverage-copy p { color: var(--ref-text); }
.payment-coverage-copy p { color: var(--ref-muted); }
.payment-method { background: var(--ref-surface-2); border-color: var(--ref-line); border-radius: 3px; }
.payment-method:hover, .payment-method:focus-visible { transform: none; border-color: var(--ref-muted); }
.bonus-card-hot { border-top: 2px solid var(--ref-red); transform: none; transition: border-color .14s ease; }
.bonus-card-hot::before, .bonus-card-hot .bonus-signal::after { content: none; display: none; }
.bonus-card-hot:hover { transform: none; box-shadow: none; }
.bonus-signal { background: var(--ref-surface-2); color: var(--ref-text); border-bottom: 1px solid var(--ref-line); }
.bonus-signal small { color: var(--ref-muted); }

.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible {
  outline: 2px solid var(--ref-yellow);
  outline-offset: 3px;
}
@media (max-width: 1120px) {
  .reference-hero-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.8fr); gap: 2rem; }
}
@media (max-width: 900px) {
  .reference-hero-grid { grid-template-columns: 1fr; padding-top: 3.2rem; }
  .reference-top-board { width: 100%; max-width: 680px; }
  .sports-hub-hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .sports-scoreboard { width: 100%; max-width: 680px; }
  .editorial-command-grid, .province-market-grid { grid-template-columns: 1fr; }
  .reference-ranking-card .operator-offer-cell,
  .reference-ranking-card .operator-facts-cell { display: block; }
  .reference-ranking-card .operator-action-cell { display: grid; }
}
@media (max-width: 620px) {
  .site-header { min-height: 58px; }
  .reference-hero-grid { padding-top: 2.6rem; padding-bottom: 2.5rem; gap: 1.6rem; }
  .reference-hero h1 { font-size: clamp(2.3rem,10.5vw,3.25rem); line-height: 1.02; }
  .reference-hero-copy > p:not(.reference-kicker) { font-size: 1rem; }
  .intent-links { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .45rem; scrollbar-width: thin; }
  .intent-links a { flex: 0 0 auto; }
  .reference-ranking-card {
    grid-template-columns: minmax(0,1fr) 78px;
    gap: 0;
  }
  .reference-ranking-card .ranking-position { grid-column: 1; grid-row: 1; display: none; }
  .reference-ranking-card .operator-brand-cell { grid-column: 1; grid-row: 1; padding: .85rem .8rem; grid-template-columns: 58px minmax(0,1fr); gap: .7rem; }
  .reference-ranking-card .operator-brand-cell .casino-logo-frame { width: 58px; height: 46px; }
  .reference-ranking-card .operator-score-cell { grid-column: 2; grid-row: 1; border: 0; border-left: 1px solid var(--ref-line); padding: .65rem .25rem; }
  .reference-ranking-card .operator-offer-cell,
  .reference-ranking-card .operator-facts-cell { grid-column: 1/-1; padding: .75rem .85rem; border-top: 1px solid var(--ref-line); }
  .reference-ranking-card .operator-action-cell { grid-column: 1/-1; grid-row: auto; grid-template-columns: 1fr 1fr; gap: .5rem; padding: .7rem .85rem; border-top: 1px solid var(--ref-line); }
  .reference-ranking-card .operator-action-cell .btn,
  .reference-ranking-card .operator-action-cell .text-action { width: 100%; }
  .reference-ranking-card .operator-action-cell > small { grid-column: 1/-1; }
  .reference-ranking-card .operator-tools { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 1fr; }
  .sports-hub-hero-grid { padding-top: 4rem; padding-bottom: 2.6rem; }
  .sports-hub-hero h1 { font-size: clamp(2.25rem,10vw,3.2rem); }
  .sports-topic-hockey { grid-template-columns: 1fr; }
  .sports-topic-photo { min-height: 190px; }
  .sports-topic-panel { min-height: unset; }
  .toc { position: static; }
  .editorial-lead-card { min-height: 280px; }
  .market-ribbon .container { padding-inline: 14px; }
  .hero-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; animation-duration: .01ms; animation-iteration-count: 1; transition-duration: .01ms; }
}

/* Light theme keeps the same content order while switching every hero label to ink. */
html[data-theme="light"] .reference-hero,
html[data-theme="light"] .reference-hero h1,
html[data-theme="light"] .reference-hero .reference-kicker,
html[data-theme="light"] .reference-hero .reference-hero-copy > p,
html[data-theme="light"] .reference-hero .reference-hero-copy > small {
  color: var(--ref-text);
}
html[data-theme="light"] .reference-hero .reference-hero-copy > p { color: var(--ref-muted); }
html[data-theme="light"] .breadcrumbs,
html[data-theme="light"] .breadcrumbs a,
html[data-theme="light"] .breadcrumbs li::after { color: var(--ref-muted); }
html[data-theme="light"] .byline > a,
html[data-theme="light"] .byline > span,
html[data-theme="light"] .byline strong { color: var(--ref-text); }
html[data-theme="light"] .byline small { color: var(--ref-muted); }
html[data-theme="light"] .filters-title,
html[data-theme="light"] .filters label,
html[data-theme="light"] .filter-count,
html[data-theme="light"] .filter-count strong { color: var(--ref-text); }
html[data-theme="light"] .review-hero .byline,
html[data-theme="light"] .review-hero .byline a,
html[data-theme="light"] .review-hero .byline > span { color: #e8f0ee; }
html[data-theme="light"] .review-hero .byline small { color: #a9bfba; }
html[data-theme="light"] .reference-hero .reference-kicker {
  color: var(--ref-muted);
  background: transparent;
  border-left-color: var(--ref-red);
}
html[data-theme="light"] .top-board-row > b,
html[data-theme="light"] .operator-score-cell strong,
html[data-theme="light"] .search-result-row > strong { color: #755400; }
html[data-theme="light"] .reference-top-board {
  color: var(--ref-text);
  background: var(--ref-surface);
  border-color: var(--ref-line);
  border-top-color: var(--ref-red);
}
html[data-theme="light"] .top-board-row strong,
html[data-theme="light"] .top-board-head strong { color: var(--ref-text); }
html[data-theme="light"] .top-board-row small,
html[data-theme="light"] .top-board-head span { color: var(--ref-muted); }
html[data-theme="light"] .reference-hero .btn-secondary {
  color: var(--ref-text);
  background: var(--ref-surface);
  border-color: var(--ref-line);
}
html[data-theme="light"] .hero-search input { color: var(--ref-text); }
html[data-theme="light"] .hero-search input::placeholder { color: var(--ref-muted); }
html[data-theme="light"] .page-header-photo,
html[data-theme="light"] .page-header-photo .container h1,
html[data-theme="light"] .page-header-photo .container .lead,
html[data-theme="light"] .page-header-photo .container .byline,
html[data-theme="light"] .page-header-photo .container .byline strong,
html[data-theme="light"] .page-header-photo .container .byline small {
  color: var(--ref-text);
}
html[data-theme="light"] .page-header-photo .container .lead { color: var(--ref-muted); }
.reference-hero-copy > *, .reference-top-board {
  animation: none;
  opacity: 1;
  transform: none;
}
.reference-top-board { box-shadow: none; backdrop-filter: none; }
html[data-theme="light"] .top-board-head select {
  color: var(--ref-text);
  background: var(--ref-surface-2);
  border-color: var(--ref-line);
}
.sports-hub-photo { z-index: 0; }
.sports-hub-hero::after {
  z-index: 1;
  background: linear-gradient(90deg,rgba(4,10,13,.92),rgba(4,10,13,.72) 58%,rgba(4,10,13,.38));
}
.sports-hub-hero-grid { position: relative; z-index: 2; }
.sports-hub-hero h1 {
  max-width: 760px;
  font-size: clamp(2.35rem,4vw,3.7rem);
  line-height: 1.02;
  letter-spacing: -.045em;
}
.hero-search .btn { flex: 0 0 auto; width: auto; min-width: 88px; white-space: nowrap; }
.notice-warning {
  color: var(--ref-text);
  background: var(--ref-surface-2);
  border: 1px solid var(--ref-line);
  border-left: 3px solid var(--ref-yellow);
  box-shadow: none;
}
@media (max-width: 620px) {
  .hero-search .btn { width: 100%; }
}

/* Source: styles/site-foundation.css */
/* Bastion: shared publication system across public routes and the editorial CMS. */
:root {
  --ref-bg: #090b0d;
  --ref-surface: #111418;
  --ref-surface-2: #171b20;
  --ref-panel: #1d2228;
  --ref-line: #2a3037;
  --ref-text: #f4f2ed;
  --ref-muted: #a7adb3;
  --ref-red: #d92d35;
  --ref-red-2: #b71f2b;
  --ref-green: #0e8f62;
  --ref-yellow: #f0c24b;
  --ref-shadow: 0 10px 26px rgba(0,0,0,.18);
  --background: var(--ref-bg);
  --surface: var(--ref-surface);
  --surface-alt: var(--ref-surface-2);
  --surface-elevated: var(--ref-panel);
  --text: var(--ref-text);
  --text-secondary: var(--ref-muted);
  --muted: var(--ref-muted);
  --border: var(--ref-line);
  --border-strong: #414850;
  --ink: var(--ref-bg);
  --ink-soft: #151a1f;
  --primary: #d4d9dd;
  --primary-hover: #fff;
  --primary-strong: var(--ref-text);
  --cta: var(--ref-red);
  --cta-hover: var(--ref-red-2);
  --accent: var(--ref-red);
  --accent-text: #ed7278;
  --accent-soft: rgba(217,45,53,.12);
  --gold: var(--ref-yellow);
  --gold-soft: rgba(240,194,75,.13);
  --success: #3eaa7d;
  --warning: #e4b84e;
  --error: #ec7979;
  --info: #91a9bd;
  --shadow: var(--ref-shadow);
  --shadow-lg: 0 22px 54px rgba(0,0,0,.32);
  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;
  --container: 1280px;
  --article: 760px;
}
html[data-theme="light"] {
  --ref-bg: #f1f3f5;
  --ref-surface: #fff;
  --ref-surface-2: #f8f9fa;
  --ref-panel: #eef1f3;
  --ref-line: #d9dde1;
  --ref-text: #171a1e;
  --ref-muted: #626c75;
  --ref-red: #c62630;
  --ref-red-2: #a91e27;
  --ref-green: #14734f;
  --ref-yellow: #8a6500;
  --ref-shadow: 0 8px 22px rgba(19,26,32,.07);
  --border-strong: #c3c9ce;
  --primary: #283139;
  --primary-hover: #101316;
  --primary-strong: #222a31;
  --accent-text: #a82029;
  --accent-soft: #fae9ea;
  --gold-soft: #fbf2d8;
  --success: #176b4b;
  --warning: #755000;
  --error: #a6222b;
  --info: #3e637b;
  --shadow-lg: 0 18px 40px rgba(19,26,32,.12);
}
html, body { color: var(--ref-text); background: var(--ref-bg); }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  background-image: none;
  font-family: var(--b9-type-interface, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: 16px;
  line-height: 1.62;
}
body::before, .site-atmosphere { display: none; }
#main-content { min-height: 55vh; }
.container { width: min(calc(100% - 48px), var(--container)); }
.narrow { width: min(calc(100% - 48px), var(--article)); }
.section { padding-block: clamp(3.1rem, 6vw, 5.25rem); }
.section-sm { padding-block: clamp(2rem, 4vw, 3.4rem); }
.section-alt { background: var(--ref-surface-2); }
section[id], article[id] { scroll-margin-top: 86px; }
h1, h2, h3, h4 { color: var(--ref-text); font-family: inherit; }
h1 { font-size: clamp(2.35rem, 4.3vw, 3.8rem); font-weight: 780; line-height: 1.02; letter-spacing: -.052em; text-wrap: balance; }
h2 { font-size: clamp(1.45rem, 2.6vw, 2.15rem); font-weight: 740; line-height: 1.12; letter-spacing: -.038em; text-wrap: balance; }
h3 { font-size: 1.12rem; font-weight: 720; line-height: 1.25; letter-spacing: -.02em; }
p { text-wrap: pretty; }
a { color: var(--primary); text-decoration-thickness: 1px; }
a:hover { color: var(--primary-hover); }
.lead { max-width: 760px; color: var(--ref-muted); font-size: clamp(1rem, 1.35vw, 1.14rem); line-height: 1.62; }
.eyebrow { color: var(--ref-red); font-size: .68rem; font-weight: 800; letter-spacing: .09em; line-height: 1.4; text-transform: uppercase; }
.meta, .muted, .terms { color: var(--ref-muted); }
.meta { font-size: .82rem; }
*[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ref-yellow); outline-offset: 3px; }
::selection { color: var(--ref-text); background: color-mix(in srgb, var(--ref-red) 45%, transparent); }
.skip-link { background: var(--ref-red); border-radius: 2px; }

/* The masthead stays quiet so each route can establish its own editorial purpose. */
.site-header {
  min-height: 66px;
  color: var(--ref-text);
  background: color-mix(in srgb, var(--ref-bg) 96%, transparent);
  border-bottom: 1px solid var(--ref-line);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.site-header.is-scrolled { background: var(--ref-bg); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
.header-inner { min-height: 66px; gap: clamp(12px, 2vw, 26px); }
.brand, .brand-word { color: var(--ref-text); text-decoration: none; }
.brand-symbol { width: 36px; height: 36px; }
.brand-word { font-size: 1.22rem; font-weight: 820; letter-spacing: -.055em; }
.brand-word span { color: var(--ref-red); }
.primary-nav { gap: clamp(10px, 1.55vw, 22px); }
.primary-nav a { padding: 8px 0; color: var(--ref-muted); font-size: .78rem; font-weight: 700; letter-spacing: .01em; }
.primary-nav a:hover, .primary-nav a[aria-current="page"] { color: var(--ref-text); }
.primary-nav a::after { height: 2px; background: var(--ref-red); }
.header-tools { gap: 7px; }
.icon-button, .menu-toggle, .province-mini, .lang-switch, .saved-header-button {
  color: var(--ref-text); background: var(--ref-surface); border: 1px solid var(--ref-line); border-radius: 3px; box-shadow: none;
}
.icon-button, .menu-toggle { width: 40px; min-width: 40px; height: 40px; }
.icon-button:hover, .menu-toggle:hover, .province-mini:hover, .saved-header-button:hover { color: var(--ref-text); background: var(--ref-surface-2); border-color: var(--ref-muted); transform: none; }
.lang-switch { overflow: hidden; }
.lang-switch a { min-height: 40px; min-width: 36px; color: var(--ref-muted); }
.lang-switch a[aria-current="true"] { color: #fff; background: var(--ref-red); }
.mobile-panel { background: var(--ref-bg); border-color: var(--ref-line); box-shadow: var(--shadow-lg); }
.mobile-panel a { color: var(--ref-text); border-color: var(--ref-line); }
.mobile-menu-head { color: var(--ref-muted); }

/* Shared route header: utility first, title second, risk/context beside the title. */
.breadcrumbs { margin-top: 0; padding-block: 12px; color: var(--ref-muted); font-size: .72rem; }
.breadcrumbs ol { gap: 8px; }
.breadcrumbs li::after { color: var(--ref-muted); opacity: .55; }
.breadcrumbs a { color: var(--ref-muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ref-text); text-decoration: underline; text-underline-offset: 3px; }
.page-header, .page-header-photo {
  position: relative;
  min-height: 0;
  padding-block: clamp(2.3rem, 4.4vw, 3.6rem);
  overflow: visible;
  color: var(--ref-text);
  background: var(--ref-surface-2);
  border-block: 1px solid var(--ref-line);
}
.page-header::before, .page-header::after, .page-header-photo::before, .page-header-photo::after { display: none; content: none; }
.page-header > .container, .page-header-photo > .container { position: relative; z-index: 1; }
.page-header h1, .page-header-photo h1 { max-width: 900px; margin-bottom: .65rem; color: var(--ref-text); font-size: clamp(2rem, 4vw, 3.3rem); }
.page-header .lead, .page-header-photo .lead { max-width: 780px; margin-bottom: 1rem; color: var(--ref-muted); }
.page-header .eyebrow, .page-header-photo .eyebrow { color: var(--ref-red); }
.page-header .notice, .page-header-photo .notice { max-width: 950px; margin-top: 1.15rem; }
.page-header .narrow, .page-header-photo .narrow { width: min(calc(100% - 48px), 890px); }
.page-header .byline, .page-header-photo .byline { margin-block: 1.15rem 0; }
.page-header .byline > a, .page-header .byline > span { color: var(--ref-text); }
.page-header .byline small { color: var(--ref-muted); }
.page-header.province-hero { padding-block: clamp(2.5rem,5vw,4.2rem); background: var(--ref-surface-2); }
.page-header.province-hero::before, .page-header.province-hero::after { display: none; }
.province-hero-grid { align-items: end; }
.province-hero-art { opacity: .08; }
.province-fact-board { color: var(--ref-text); background: var(--ref-surface); border-color: var(--ref-line); border-radius: 4px; box-shadow: none; }
.province-fact-board dl div { border-color: var(--ref-line); }
.province-fact-board dt, .province-fact-board > span { color: var(--ref-muted); }
.province-fact-board dd { color: var(--ref-text); }
.review-hero {
  color: #f4f2ed;
  background: #111619;
  border-block-color: #30383e;
}
.review-hero h1, .review-hero .eyebrow, .review-hero .byline > a, .review-hero .byline > span { color: #f4f2ed; }
.review-hero .lead, .review-hero .byline small { color: #b8c0c5; }
.review-title-row { gap: clamp(12px,2.2vw,26px); }
.review-title-row .casino-logo { border-color: #424a50; }
.review-hero .score-card { color: var(--b9-ink); background: var(--b9-panel); border-color: var(--b9-line); border-radius: 0; box-shadow: none; }
.review-hero .score-card strong { color: var(--b9-ink); font-variant-numeric: tabular-nums; }

/* First-screen styles remain distinct for the editorial home and the real sports scene. */
.reference-hero { border-bottom: 1px solid var(--ref-line); }
.reference-hero-grid { width: min(calc(100% - 48px), var(--container)); }
.reference-hero .reference-top-board { align-self: center; }
.sports-hub-hero { min-height: 500px; }
.sports-hub-hero-grid { width: min(calc(100% - 48px), var(--container)); }
.sports-hub-hero h1 { font-size: clamp(2.4rem, 4.5vw, 4.3rem); }
.sports-scoreboard { border-radius: 3px; }
.market-ribbon { border-color: var(--ref-line); }

/* Editorial sections and ranking records use different structures for different jobs. */
.section-heading { margin-bottom: clamp(1.25rem,2.3vw,2rem); padding-bottom: 14px; border-color: var(--ref-line); }
.section-heading h2 { margin-bottom: .45rem; }
.section-heading p { color: var(--ref-muted); }
.section-link { color: var(--ref-text); font-size: .84rem; text-decoration-color: var(--ref-red); text-underline-offset: 4px; }
.section-link:hover { color: var(--ref-red); }
.section-link-light { color: var(--ref-text); }
.ranking-list { gap: 8px; }
.card, .filters, .comparison-wrap, .comparison-shell, .score-card, .bonus-card, .bonus-card-hot,
.faq-list details, .source-register, .toc, .author-box, .author-card, .reader-review-card,
.reader-review-empty, .guide-card, .search-result-row, .league-command-card, .sports-topic-panel,
.payment-method, .account-profile, .account-main > section {
  color: var(--ref-text);
  background: var(--ref-surface);
  border-color: var(--ref-line);
  border-radius: 4px;
  box-shadow: none;
}
.card-body { padding: clamp(18px,2.4vw,26px); }
.card h2, .card h3, .guide-card h2, .guide-card h3 { color: var(--ref-text); }
.card a:not(.btn), .guide-card a:not(.btn) { color: var(--ref-text); }
.card a:not(.btn):hover, .guide-card a:not(.btn):hover { color: var(--ref-red); }
.reference-ranking-card { border-radius: 3px; }
.reference-ranking-card:hover { box-shadow: none; }
.reference-ranking-card .operator-score-cell strong { color: var(--ref-yellow); }
.ranking-position { color: var(--ref-muted); background: var(--ref-surface-2); }
.score-pill, .score-card { font-variant-numeric: tabular-nums; }
.badge, .trust-chip { border-color: var(--ref-line); border-radius: 3px; color: var(--ref-muted); background: var(--ref-surface-2); }
.badge-accent { color: var(--ref-red); border-color: color-mix(in srgb,var(--ref-red) 38%,var(--ref-line)); background: color-mix(in srgb,var(--ref-red) 9%,var(--ref-surface)); }
.tag-list { gap: 6px; }
.tag-list span { padding: 5px 8px; border-color: var(--ref-line); border-radius: 2px; color: var(--ref-muted); background: var(--ref-surface-2); font-size: .72rem; }

/* Forms, filters and button states are shared across catalog, contact, search and account flows. */
.btn {
  min-height: 44px;
  padding: 10px 15px;
  border-radius: 3px;
  font-size: .84rem;
  font-weight: 740;
  box-shadow: none;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.btn:hover { box-shadow: none; }
.btn-primary, .btn-primary:hover { color: #fff; background: var(--ref-red); border-color: var(--ref-red); filter: none; }
.btn-primary:hover { background: var(--ref-red-2); border-color: var(--ref-red-2); }
.btn-secondary, .btn-quiet, .btn-ghost, .btn-glass, .btn-outline-light {
  color: var(--ref-text); background: var(--ref-surface-2); border-color: var(--ref-line);
}
.btn-secondary:hover, .btn-quiet:hover, .btn-ghost:hover, .btn-glass:hover, .btn-outline-light:hover {
  color: var(--ref-text); background: var(--ref-panel); border-color: var(--ref-muted);
}
.btn-luminous::before { display: none; }
.input-control, .select-control, textarea, input[type="search"], input[type="email"], input[type="password"], input[type="text"] {
  min-height: 44px;
  color: var(--ref-text);
  background: var(--ref-surface);
  border: 1px solid var(--ref-line);
  border-radius: 3px;
  box-shadow: none;
  color-scheme: inherit;
}
textarea.input-control { min-height: 140px; resize: vertical; }
.input-control::placeholder, textarea::placeholder { color: var(--ref-muted); opacity: .78; }
.input-control:hover, .select-control:hover { border-color: var(--border-strong); }
.input-control:focus, .select-control:focus, textarea:focus { border-color: var(--ref-red); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb,var(--ref-red) 20%,transparent); }
.filters { display: flex; align-items: end; gap: 10px; margin-bottom: 20px; padding: 14px; border-radius: 4px; }
.filters label { min-width: 140px; color: var(--ref-muted); font-size: .72rem; font-weight: 700; }
.filters .select-control, .filters .input-control { min-width: 0; }
.filters-title { color: var(--ref-text); font-size: .84rem; }
.filter-count { color: var(--ref-muted); font-size: .75rem; }
.filter-count strong { color: var(--ref-text); font-variant-numeric: tabular-nums; }
.form-grid { gap: 16px; }
.form-grid label { color: var(--ref-muted); font-size: .82rem; }
.form-grid .btn { justify-self: start; min-width: 160px; }
.search-form { margin-bottom: 16px; }
.search-form .input-control { min-height: 50px; }
.pagination { display: flex; justify-content: center; gap: 6px; margin-top: 24px; }
.pagination a, .pagination button { min-width: 40px; min-height: 40px; display: grid; place-items: center; color: var(--ref-text); background: var(--ref-surface); border: 1px solid var(--ref-line); border-radius: 3px; text-decoration: none; }
.pagination [aria-current="page"], .pagination .is-active { color: #fff; background: var(--ref-red); border-color: var(--ref-red); }
.pagination a:hover, .pagination button:hover { border-color: var(--ref-red); }

/* Long-form content, comparison tables and evidence registers get a clear reading rhythm. */
.article-shell { display: grid; grid-template-columns: minmax(0,1fr); }
.article-content {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding: 0;
  color: var(--ref-text);
  background: transparent;
  border: 0;
  box-shadow: none;
  font-size: 1rem;
  line-height: 1.78;
}
.article-content h2 { margin: 2.5rem 0 .8rem; padding-top: .85rem; border-top: 1px solid var(--ref-line); font-size: clamp(1.35rem,2.2vw,1.8rem); }
.article-content h2:first-child, .article-content > h2:first-of-type { margin-top: 1.3rem; }
.article-content h3 { margin: 1.7rem 0 .55rem; font-size: 1.08rem; }
.article-content p, .article-content li { color: var(--ref-text); }
.article-content p { margin-bottom: 1.2rem; }
.article-content li + li { margin-top: .38rem; }
.article-content strong { color: var(--ref-text); }
.article-content a { color: var(--ref-text); text-decoration-color: var(--ref-red); text-underline-offset: 3px; }
.article-content a:hover { color: var(--ref-red); }
.article-content .meta { padding-bottom: 12px; border-bottom: 1px solid var(--ref-line); color: var(--ref-muted); font-size: .75rem; }
.article-content .pros-box, .article-content .cons-box { color: var(--ref-text); background: var(--ref-surface); border-color: var(--ref-line); border-radius: 3px; }
.article-content .pros-box p, .article-content .pros-box li, .article-content .pros-box h3,
.article-content .cons-box p, .article-content .cons-box li, .article-content .cons-box h3 { color: var(--ref-text); }
.page-layout { grid-template-columns: minmax(0,1fr) minmax(230px,280px); gap: clamp(24px,4vw,54px); }
.page-layout .article-content { max-width: 760px; }
.sidebar { top: 86px; }
.toc { position: sticky; top: 86px; padding: 16px; border-top: 2px solid var(--ref-red); }
.toc h3 { font-size: .8rem; letter-spacing: .02em; }
.toc a { padding: 8px 0; color: var(--ref-muted); border-color: var(--ref-line); font-size: .78rem; line-height: 1.4; }
.toc a:hover { padding-left: 3px; color: var(--ref-text); }
.mobile-toc { margin-bottom: 22px; border-color: var(--ref-line); border-radius: 3px; background: var(--ref-surface); }
.mobile-toc summary { padding: 12px 14px; color: var(--ref-text); }
.mobile-toc a { display: block; padding: 9px 14px; border-top: 1px solid var(--ref-line); color: var(--ref-muted); font-size: .84rem; }
.author-box, .author-card { gap: 16px; padding: 20px; }
.author-hero { gap: 18px; align-items: center; }
.author-hero .avatar, .author-card .avatar, .author-box .avatar { color: var(--ref-text); background: var(--ref-panel); border-color: var(--ref-line); }
.author-card h2 { font-size: 1.22rem; }
.byline { gap: 9px 18px; margin: 14px 0; }
.byline > a, .byline > span { color: var(--ref-text); }
.byline small { color: var(--ref-muted); }
.rating-row { color: var(--ref-text); font-size: .84rem; }
.rating-row > strong { color: var(--ref-yellow); font-variant-numeric: tabular-nums; }
.bar { height: 5px; background: var(--ref-panel); border-radius: 0; }
.bar span { background: var(--ref-red); border-radius: 0; }
.responsive-table, .table-scroll { overflow-x: auto; border: 1px solid var(--ref-line); border-radius: 3px; }
.responsive-table table, .table-scroll table, .article-content table { width: 100%; border-collapse: collapse; background: var(--ref-surface); color: var(--ref-text); }
.responsive-table th, .table-scroll th, .article-content th { padding: 11px 13px; color: var(--ref-muted); background: var(--ref-surface-2); border-bottom: 1px solid var(--ref-line); font-size: .67rem; font-weight: 750; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
.responsive-table td, .table-scroll td, .article-content td { padding: 12px 13px; color: var(--ref-text); border-bottom: 1px solid var(--ref-line); vertical-align: top; }
.responsive-table tbody tr:hover td, .table-scroll tbody tr:hover td, .article-content tbody tr:hover td { background: color-mix(in srgb,var(--ref-surface) 91%,var(--ref-red) 9%); }
.source-register { margin-top: 12px; padding: 0 16px 8px; border: 1px solid var(--ref-line); border-radius: 3px; }
.source-register-head { padding: 12px 0; color: var(--ref-muted); border-bottom: 1px solid var(--ref-line); }
.source-register-head h3 { margin: 0; color: var(--ref-text); font-size: .85rem; }
.source-register li { grid-template-columns: 28px minmax(0,1fr) minmax(90px,auto); gap: 10px; padding: 12px 0; border-color: var(--ref-line); }
.source-sequence { color: var(--ref-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; }
.source-register a { color: var(--ref-text); overflow-wrap: anywhere; }
.source-register li span, .source-register li small, .source-date span { color: var(--ref-muted); }
.source-date strong { color: var(--ref-text); font-variant-numeric: tabular-nums; }

/* Page-specific information structures keep their own visual signatures. */
.bonus-card, .bonus-card-hot { overflow: hidden; border-radius: 3px; }
.bonus-card-hot { border-top: 2px solid var(--ref-red); }
.bonus-signal { color: var(--ref-yellow); background: var(--ref-surface-2); border-bottom: 1px solid var(--ref-line); }
.bonus-title { color: var(--ref-text); }
.bonus-responsible-note { color: var(--ref-muted); }
.guide-card { overflow: hidden; border-radius: 3px; }
.guide-card:hover { border-color: var(--border-strong); box-shadow: none; }
.guide-card .card-body { padding: 18px; }
.method-steps { gap: 0; }
.method-steps article { grid-template-columns: 36px minmax(0,1fr); gap: 14px; padding: 17px 0; border-color: var(--ref-line); }
.method-steps article > span { width: 28px; height: 28px; border: 1px solid var(--ref-line); border-radius: 2px; color: var(--ref-muted); background: var(--ref-surface-2); font-variant-numeric: tabular-nums; }
.method-steps h2 { margin: 1px 0 6px; padding: 0; border: 0; font-size: 1.08rem; }
.method-steps p { color: var(--ref-muted); }
.method-step-grid div { background: var(--ref-surface); border-color: var(--ref-line); }
.method-step-grid strong { color: var(--ref-text); }
.faq-list { gap: 7px; }
.faq-list details { border: 1px solid var(--ref-line); border-radius: 3px; }
.faq-list summary { color: var(--ref-text); background: var(--ref-surface); }
.faq-list details[open] summary { background: var(--ref-surface-2); }
.faq-list details p { color: var(--ref-muted); }
.notice { padding: 13px 16px; color: var(--ref-text); background: var(--ref-surface-2); border: 1px solid var(--ref-line); border-left: 3px solid #7893a3; border-radius: 2px; }
.notice-warning { color: var(--ref-text); background: var(--ref-surface); border-color: var(--ref-line); border-left-color: var(--ref-yellow); }
.notice-responsible { color: var(--ref-text); background: color-mix(in srgb,var(--ref-green) 8%,var(--ref-surface)); border-color: color-mix(in srgb,var(--ref-green) 25%,var(--ref-line)); border-left-color: var(--ref-green); }
.province-context { color: var(--ref-text); background: var(--ref-surface-2); }
.province-context .article-content { padding-left: 18px; border-left: 2px solid var(--province-accent,var(--ref-red)); }
.province-context-grid { gap: clamp(24px,4vw,52px); }
.province-board-head h2, .province-board-active, .province-fact-board h2 { color: var(--ref-text); }
.province-market-grid { border-color: var(--ref-line); }
.province-market-row { background: var(--ref-surface); border-color: var(--ref-line); }
.province-market-row:hover, .province-market-row.is-active { box-shadow: inset 3px 0 var(--ref-red); }
.payment-coverage { background: var(--ref-surface); border-color: var(--ref-line); }
.payment-coverage-copy h2, .payment-coverage-copy p { color: var(--ref-text); }
.payment-coverage-copy p { color: var(--ref-muted); }
.payment-method { border-radius: 3px; }

/* Search and account screens are application flows; keep states obvious and compact. */
.semantic-search-form { max-width: 900px; }
.search-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 24px; }
.search-suggestions a { min-height: 38px; display: inline-flex; align-items: center; padding: 7px 10px; color: var(--ref-muted); background: var(--ref-surface); border: 1px solid var(--ref-line); border-radius: 3px; font-size: .78rem; text-decoration: none; }
.search-suggestions a:hover { color: var(--ref-text); border-color: var(--ref-red); }
.search-result-group { margin-top: 28px; }
.search-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ref-line); }
.search-group-head h2 { margin: 0; font-size: 1.25rem; }
.search-group-head > span { color: var(--ref-muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.search-results { gap: 0; }
.search-result-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 16px 2px; background: transparent; border: 0; border-bottom: 1px solid var(--ref-line); border-radius: 0; }
.search-result-row h3 { margin: 3px 0 5px; }
.search-result-row h3 a { color: var(--ref-text); }
.search-result-row h3 a:hover { color: var(--ref-red); }
.search-result-row p { margin: 0; color: var(--ref-muted); font-size: .88rem; }
.search-result-row > div > span { color: var(--ref-red); font-size: .66rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; }
.account-dashboard { gap: clamp(18px,3vw,34px); }
.account-profile { padding: 20px; border-top: 2px solid var(--ref-red); }
.account-main { gap: 16px; }
.account-main > section { padding: 20px; }
.account-main > section > h2 { font-size: 1.2rem; }
.account-auth-grid, .account-form-grid, .admin-module-grid { gap: 14px; }
.saved-account-list article, .account-submission-list article { border-color: var(--ref-line); }
.account-submission-list article span, .account-submission-list article small { color: var(--ref-muted); }
.reader-review-head > span { color: var(--ref-yellow); }
.reader-review-card p, .reader-review-empty p { color: var(--ref-muted); }
.danger-button { color: var(--ref-red); background: color-mix(in srgb,var(--ref-red) 8%,var(--ref-surface)); border-color: color-mix(in srgb,var(--ref-red) 30%,var(--ref-line)); }
.danger-button:hover { color: #fff; background: var(--ref-red-2); border-color: var(--ref-red-2); }

/* Sticky controls and disclosures use the same edge, spacing and focus language. */
.cookie-banner, .saved-sheet-panel, .compare-dock, .compare-sheet, .comparison-dock {
  color: var(--ref-text); background: var(--ref-surface); border-color: var(--ref-line); border-radius: 4px; box-shadow: var(--shadow-lg);
}
.cookie-banner { bottom: 16px; border-top: 2px solid var(--ref-red); }
.cookie-banner h2 { color: var(--ref-text); }
.cookie-banner p { color: var(--ref-muted); }
.saved-sheet-backdrop { background: rgba(0,0,0,.62); }
.saved-sheet-head { border-color: var(--ref-line); }
.saved-sheet-head h2 { color: var(--ref-text); }
.saved-empty { color: var(--ref-muted); }

/* The footer closes every route with the same clear publication map. */
.site-footer {
  padding: clamp(2.8rem,5vw,4.3rem) 0 20px;
  color: var(--ref-text);
  background: #0c0f12;
  border-top: 2px solid var(--ref-red);
}
html[data-theme="light"] .site-footer { background: #171b20; }
.footer-grid { grid-template-columns: minmax(230px,1.35fr) repeat(3,minmax(130px,.8fr)); gap: clamp(20px,3.5vw,48px); }
.site-footer h2, .site-footer h3 { margin-bottom: 13px; color: #f4f2ed; font-size: .73rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.site-footer p { color: #a7adb3; font-size: .83rem; line-height: 1.55; }
.site-footer a { margin: 8px 0; color: #c6ccd1; font-size: .82rem; }
.site-footer a:hover { color: #fff; transform: none; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .footer-age { padding-left: 10px; border-color: var(--ref-yellow); color: #f4f2ed; }
.footer-note { margin-top: 26px; padding-top: 14px; border-color: #30363c; color: #929aa1; font-size: .72rem; }
.footer-note p { color: inherit; font-size: inherit; }

/* Editorial CMS: the public masthead vocabulary continues into a focused workbench. */
.admin-body {
  --background: #eef0f2;
  --surface: #fff;
  --surface-alt: #f5f6f7;
  --surface-elevated: #fff;
  --text: #171a1e;
  --text-secondary: #59636d;
  --muted: #68727b;
  --border: #d8dde1;
  --border-strong: #bdc5cb;
  --ink: #171a1e;
  --primary: #283139;
  --primary-strong: #283139;
  --cta: #c62630;
  --accent: #c62630;
  --gold: #9a6e00;
  min-height: 100vh;
  color: #171a1e;
  background: #eef0f2;
}
.admin-body h1, .admin-body h2, .admin-body h3, .admin-body p { color: #171a1e; }
.admin-body .admin-header { color: #f4f2ed; background: #090b0d; border-bottom: 1px solid #2a3037; box-shadow: none; }
.admin-body .admin-header .brand, .admin-body .admin-header .brand-word { color: #f4f2ed; }
.admin-body .admin-header .btn-secondary, .admin-body .admin-header .btn-quiet { color: #f4f2ed; background: #171b20; border-color: #353b42; }
.admin-body .admin-header .btn-secondary:hover, .admin-body .admin-header .btn-quiet:hover { background: #22282e; border-color: #69727b; }
.admin-body .admin-header-inner { min-height: 66px; }
.admin-body main.section-sm { padding-block: 28px; }
.admin-body .card { color: #171a1e; background: #fff; border-color: #d8dde1; border-radius: 4px; box-shadow: 0 4px 16px rgba(21,27,32,.035); }
.admin-body .card h2, .admin-body .card h3 { color: #171a1e; }
.admin-body .login-card { border-top: 3px solid #c62630; }
.admin-body .admin-intro { align-items: flex-start; border-top: 3px solid #c62630; }
.admin-body .admin-intro .lead { color: #59636d; }
.admin-body .admin-nav { top: 66px; padding: 6px; background: rgba(255,255,255,.97); border-color: #d8dde1; border-radius: 4px; box-shadow: 0 6px 16px rgba(21,27,32,.05); backdrop-filter: blur(10px); }
.admin-body .admin-nav button { min-height: 42px; color: #424b53; background: transparent; border-color: transparent; border-radius: 3px; font-size: .8rem; }
.admin-body .admin-nav button:hover { color: #171a1e; background: #f1f3f5; }
.admin-body .admin-nav button.is-active { color: #fff; background: #171a1e; border-color: #171a1e; }
.admin-body .section-heading { border-color: #d8dde1; }
.admin-body .section-heading p, .admin-body .helper { color: #68727b; }
.admin-body .btn-primary, .admin-body .btn-primary:hover { color: #fff; background: #b7202a; border-color: #b7202a; }
.admin-body .btn-secondary, .admin-body .btn-quiet { color: #20262b; background: #f5f6f7; border-color: #cbd1d6; }
.admin-body .btn-secondary:hover, .admin-body .btn-quiet:hover { background: #eaedef; border-color: #aeb7be; }
.admin-body .input-control, .admin-body .select-control, .admin-body textarea { color: #171a1e; background: #fff; border-color: #cbd1d6; border-radius: 3px; color-scheme: light; }
.admin-body .input-control:focus, .admin-body .select-control:focus { border-color: #b7202a; box-shadow: 0 0 0 2px rgba(183,32,42,.12); }
.admin-body .admin-field span, .admin-body label { color: #59636d; }
.admin-body .editor-card-header { color: #171a1e; background: #f5f6f7; border-color: #d8dde1; }
.admin-body .workflow-badge { color: #404950; background: #f5f6f7; border-color: #d8dde1; border-radius: 3px; }
.admin-body .ranking-sort-list, .admin-body .schedule-box { background: #f5f6f7; border-color: #d8dde1; border-radius: 4px; }
.admin-body .ranking-sort-row, .admin-body .schedule-row, .admin-body .check, .admin-body .array-editor { color: #171a1e; background: #fff; border-color: #d8dde1; border-radius: 3px; }
.admin-body .ranking-position { color: #fff; background: #171a1e; border-radius: 2px; }
.admin-body .validation-summary { color: #7d2028; background: #fff4f4; border-color: #dfb1b4; }
.admin-body .danger-button { color: #a6222b; background: #fff6f6; border-color: #dfb1b4; }
.admin-body .danger-button:hover { color: #fff; background: #a6222b; border-color: #a6222b; }
.admin-body .metric-large, .admin-body .dashboard-stat strong { color: #171a1e; font-variant-numeric: tabular-nums; }
.admin-body .diff-row pre, .admin-body code { color: #34404a; background: #f1f3f5; }
.admin-body .locale-tabs button { color: #343d45; background: #fff; border-color: #cbd1d6; border-radius: 3px; }
.admin-body .locale-tabs button.is-active { color: #fff; background: #171a1e; border-color: #171a1e; }

@media (max-width: 980px) {
  .page-layout { grid-template-columns: minmax(0,1fr); }
  .sidebar, .toc { position: static; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .container, .narrow { width: min(calc(100% - 28px), var(--container)); }
  .section { padding-block: 42px; }
  .section-sm { padding-block: 28px; }
  .header-inner { min-height: 60px; }
  .site-header { min-height: 60px; }
  .mobile-panel { inset-block-start: 60px; }
  .primary-nav { display: none; }
  .reference-hero-grid { width: min(calc(100% - 28px), var(--container)); }
  .sports-hub-hero-grid { width: min(calc(100% - 28px), var(--container)); }
  .page-header, .page-header-photo { padding-block: 28px; }
  .page-header .narrow, .page-header-photo .narrow { width: min(calc(100% - 28px), 890px); }
  .page-header h1, .page-header-photo h1 { font-size: clamp(1.95rem, 9vw, 2.8rem); }
  .lead { font-size: 1rem; }
  .review-title-row { grid-template-columns: 56px minmax(0,1fr); gap: 12px; }
  .review-title-row .casino-logo { width: 56px; height: 56px; }
  .review-title-row .score-card { grid-column: 1 / -1; min-width: 0; padding: 10px 14px; }
  .review-title-row .score-card strong { font-size: 1.7rem; }
  .filters { display: grid; grid-template-columns: 1fr; align-items: stretch; padding: 12px; }
  .filters label { min-width: 0; }
  .filter-count { margin: 0; }
  .form-grid .btn { width: 100%; }
  .article-content { font-size: 1rem; line-height: 1.74; }
  .article-content h2 { margin-top: 2rem; }
  .page-layout { gap: 20px; }
  .source-register { padding-inline: 11px; }
  .source-register li { grid-template-columns: 24px minmax(0,1fr); }
  .source-date { grid-column: 2; justify-items: start; }
  .province-context-grid { grid-template-columns: 1fr; }
  .province-context .article-content { padding-left: 13px; }
  .account-dashboard, .account-auth-grid, .account-form-grid { grid-template-columns: 1fr; }
  .account-profile { position: static; }
  .search-result-row { grid-template-columns: minmax(0,1fr) auto; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 14px; }
  .footer-note { flex-direction: column; gap: 8px; }
  .cookie-banner { right: 10px; bottom: 10px; left: 10px; width: auto; }
  .admin-body .admin-header-inner, .admin-body .admin-intro { align-items: flex-start; flex-direction: column; padding-block: 11px; }
  .admin-body .admin-nav { top: 104px; }
  .admin-body .admin-grid, .admin-body .dashboard-grid, .admin-body .login-form { grid-template-columns: 1fr; }
  .admin-body .admin-field-wide { grid-column: auto; }
}
@media (max-width: 420px) {
  .container, .narrow { width: calc(100% - 24px); }
  .footer-grid { grid-template-columns: 1fr; }
  .author-card, .author-box { align-items: flex-start; }
  .search-suggestions a { font-size: .74rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .bar span { transition: none !important; }
}

/* Page-header warning text inherited a legacy dark-text override; keep it readable on both themes. */
.page-header .notice-warning, .page-header-photo .notice-warning { color: var(--ref-text); }


/* Focused editorial photography: one real scene per subject, with readable title space. */
.reference-hero { position: relative; isolation: isolate; }
.reference-hero-photo {
  display: block;
  background-image: none;
  background-position: 72% 42%;
  background-size: cover;
  filter: saturate(.86) contrast(1.12) brightness(.82);
  opacity: .76;
}
.reference-hero-overlay {
  display: block;
  z-index: 0;
  background: linear-gradient(90deg,
    var(--ref-bg) 0%,
    var(--ref-bg) 37%,
    color-mix(in srgb,var(--ref-bg) 88%,transparent) 54%,
    color-mix(in srgb,var(--ref-bg) 25%,transparent) 100%);
}
html[data-theme="light"] .reference-hero-overlay {
  background: linear-gradient(90deg,
    var(--ref-bg) 0%,
    var(--ref-bg) 42%,
    color-mix(in srgb,var(--ref-bg) 82%,transparent) 54%,
    color-mix(in srgb,var(--ref-bg) 24%,transparent) 72%,
    color-mix(in srgb,var(--ref-bg) 6%,transparent) 100%);
}
.reference-hero-grid { z-index: 1; }
.reference-top-board { background: color-mix(in srgb,var(--ref-surface) 94%,transparent); }

.page-header-photo { isolation: isolate; overflow: hidden; }
.page-header-photo::before,
.page-header-photo::after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  pointer-events: none;
}
.page-header-photo::before {
  z-index: 0;
  width: 48%;
  background-color: #11181b;
  background-position: center 45%;
  background-size: cover;
  background-repeat: no-repeat;
  filter: saturate(.72) contrast(1.03);
}
.page-header-photo::after {
  z-index: 0;
  inset: 0;
  background: linear-gradient(90deg,
    var(--ref-surface-2) 0%,
    var(--ref-surface-2) 34%,
    color-mix(in srgb,var(--ref-surface-2) 84%,transparent) 43%,
    color-mix(in srgb,var(--ref-surface-2) 28%,transparent) 50%,
    rgba(7,10,12,.34) 100%);
}
.page-header-photo > .container { z-index: 1; }
.page-header-photo h1 { max-width: 690px; }
.page-header-photo .lead { max-width: 620px; }
.page-header-photo[data-scene="ranking"]::before {
  background-image: none;
}
.page-header-photo[data-scene="cashier"]::before {
  background-image: none;
}
.page-header-photo[data-scene="editorial"]::before,
.page-header-photo[data-scene="responsible"]::before {
  background-image: none;
}
.page-header-photo[data-scene="sportsbook"]::before {
  background-image: none;
}
@media (max-width: 700px) {
  .reference-hero-photo { opacity: .42; background-position: 76% center; }
  .reference-hero-overlay {
    background: linear-gradient(90deg,var(--ref-bg) 0%,color-mix(in srgb,var(--ref-bg) 91%,transparent) 68%,color-mix(in srgb,var(--ref-bg) 58%,transparent) 100%);
  }
  .page-header-photo::before { width: 100%; opacity: .22; }
  .page-header-photo::after {
    background: linear-gradient(180deg,
      color-mix(in srgb,var(--ref-surface-2) 82%,transparent) 0%,
      color-mix(in srgb,var(--ref-surface-2) 90%,transparent) 78%,
      var(--ref-surface-2) 100%);
  }
  .page-header-photo h1, .page-header-photo .lead { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .reference-hero-photo { animation: none !important; }
}


/* Bastion offer shortcuts and bonus navigation. */
.canada-flag-svg { display: block; width: 23px; height: 17px; overflow: hidden; border-radius: 1px; box-shadow: 0 0 0 1px color-mix(in srgb,var(--ref-text) 13%,transparent); }
.canada-flag-badge { display: inline-flex; align-items: center; gap: 8px; }
.canada-flag-inline { display: inline-flex; align-items: center; }
.reference-kicker .canada-flag-svg { width: 15px; height: 11px; box-shadow: none; }
.theme-toggle .ui-icon { width: 18px; height: 18px; }

.primary-nav a.nav-bonus-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline: -5px;
  padding: 7px 10px;
  color: var(--ref-text);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 2px;
  white-space: nowrap;
}
.primary-nav a.nav-bonus-link:hover,
.primary-nav a.nav-bonus-link[aria-current="page"] { color: var(--ref-text); background: transparent; border-color: transparent; box-shadow: inset 0 -2px var(--ref-red); }
.primary-nav a.nav-bonus-link::after { display: none; }
.mobile-panel a.mobile-bonus-link { color: var(--ref-text); }

.btn-bonus-hot,
.btn-bonus-claim {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #1b1912;
  background: #edc35b;
  border: 1px solid #edc35b;
  font-weight: 820;
  text-decoration: none;
}
.btn-bonus-hot:hover,
.btn-bonus-claim:hover { color: #17140c; background: #f5d77f; border-color: #f5d77f; }
.btn-bonus-hot:focus-visible,
.btn-bonus-claim:focus-visible { outline-color: var(--ref-red); }
.btn-bonus-hot > .ui-icon:last-child,
.btn-bonus-claim > .ui-icon:last-child { width: 16px; height: 16px; color: #442a06; }
.bonus-button-gift { display: inline-grid; place-items: center; width: 25px; height: 25px; color: #3f2d0a; }
.bonus-button-gift .ui-icon { width: 22px; height: 22px;  }
.hero-actions .btn-bonus-hot { min-height: 44px; padding-inline: 13px; }
.card-actions .btn-bonus-claim { min-height: 42px; }

.bonus-hotspot {
  position: fixed;
  z-index: 850;
  right: 22px;
  bottom: 22px;
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) 22px;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  padding: 9px 13px 9px 9px;
  color: #f5f2e8;
  background: #1b1e21;
  border: 1px solid #5d4d27;
  border-left: 3px solid #edc35b;
  border-radius: 3px;
  box-shadow: 0 12px 26px rgba(0,0,0,.24);
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.bonus-hotspot:hover { color: #fff; background: #25282b; border-color: #edc35b; }
.bonus-hotspot-mark { display: grid; place-items: center; width: 42px; height: 42px; color: #f3cb69; background: #302a1c; border: 1px solid #594b2b; }
.bonus-hotspot-copy { display: grid; gap: 3px; }
.bonus-hotspot-copy small { color: #cbb875; font-size: .58rem; font-weight: 850; letter-spacing: .13em; }
.bonus-hotspot-copy strong { color: #fff; font-size: .85rem; line-height: 1.15; }
.bonus-hotspot-arrow { display: grid; place-items: center; color: #edc35b; }
.bonus-hotspot-arrow .ui-icon { width: 18px; height: 18px; }
.bonus-hotspot-tick { position: absolute; top: -4px; right: 12px; width: 7px; height: 7px; background: #edc35b; border: 1px solid #1b1e21; transform: rotate(45deg); }
.cookie-banner ~ .bonus-hotspot { bottom: 150px; }
body[data-route="bonuses"] .bonus-hotspot { display: none; }

#bonus-results { scroll-margin-top: 84px; }
@media (max-width: 980px) {
  .primary-nav a.nav-bonus-link { margin-inline: -3px; padding-inline: 7px; }
}
@media (max-width: 760px) {
  .bonus-hotspot { right: 12px; bottom: 76px; min-width: 0; grid-template-columns: 38px auto 18px; gap: 8px; padding: 7px 9px 7px 7px; }
  .bonus-hotspot-mark { width: 38px; height: 38px; }
  .bonus-hotspot-copy small { display: none; }
  .cookie-banner ~ .bonus-hotspot { bottom: 52vh; }
  .hero-actions { align-items: stretch; flex-wrap: wrap; }
}
@media (max-width: 420px) {
  .bonus-hotspot { grid-template-columns: 36px auto; }
  .bonus-hotspot-arrow { display: none; }
  .bonus-hotspot-copy strong { font-size: .76rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bonus-hotspot { transition: none; }
}


/* Editorial typography: a bookish display face, plain copy and measured data. */
:root {
  --ref-font-body: var(--b9-type-interface, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --ref-font-display: var(--b9-type-editorial, Georgia, "Times New Roman", serif);
  --ref-font-data: "SFMono-Regular", "Roboto Mono", ui-monospace, Menlo, monospace;
}
body { font-family: var(--ref-font-body); font-size: 16px; letter-spacing: 0; }
h1, h2, .page-header h1, .page-header-photo h1, .reference-hero h1, .sports-hub-hero h1 {
  font-family: var(--ref-font-display);
  font-stretch: normal;
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.04;
}
h3, h4, .brand-word { font-family: var(--ref-font-body); font-weight: 650; letter-spacing: -.01em; }
.eyebrow, .reference-kicker, .meta, .filter-count, .ranking-tape,
.bonus-index-stamp,
.province-fact-board dt, .source-sequence {
  font-family: var(--ref-font-body);
  letter-spacing: 0;
}
.reference-hero h1 { max-width: 850px; font-size: clamp(2.8rem,4vw,4.55rem); }
@media(max-width:700px) {
  .reference-hero h1 { font-size: clamp(2.45rem,10vw,3.5rem); }
}

/* Source: styles/site-components.css */
/* Bastion: the existing ink, red and brass identity with a records-first layout. */
:root{--ref-bg:#090b0d;--ref-surface:#111418;--ref-surface-2:#171b20;--ref-panel:#171b20;--ref-line:#2a3037;--ref-text:#f4f2ed;--ref-muted:#a7adb3;--ref-red:#d92d35;--ref-red-2:#b71f2b;--ref-yellow:#f0c24b;--ref-shadow:none;--shadow:none;--shadow-lg:none}
html[data-theme="light"]{--ref-bg:#f1f3f5;--ref-surface:#fff;--ref-surface-2:#f8f9fa;--ref-panel:#eef1f3;--ref-line:#d9dde1;--ref-text:#171a1e;--ref-muted:#626c75;--ref-red:#c62630;--ref-red-2:#a91e27;--ref-yellow:#8a6500;--ref-shadow:none;--shadow:none;--shadow-lg:none}
:focus-visible{outline-color:var(--ref-red)}
.reference-hero{background:#111416;color:#f3f1ea}
.reference-hero-photo{opacity:.64;filter:saturate(.84) contrast(1.08)}
.reference-hero-overlay,html[data-theme="light"] .reference-hero-overlay{background:linear-gradient(90deg,#111416 0%,#111416 29%,rgba(17,20,22,.94) 40%,rgba(17,20,22,.72) 54%,rgba(17,20,22,.34) 75%,rgba(17,20,22,.32) 100%)}
.reference-hero h1,.reference-hero .reference-kicker{color:#f3f1ea}
.reference-hero-copy>p:not(.reference-kicker),.reference-hero-copy>small{color:#c4c4bf}
html[data-theme] .reference-hero .reference-hero-copy h1,html[data-theme] .reference-hero .reference-kicker{color:#f3f1ea!important;opacity:1!important}
html[data-theme] .reference-hero .reference-hero-copy>p:not(.reference-kicker),html[data-theme] .reference-hero .reference-hero-copy>small{color:#d0cfca!important;opacity:1!important}
.reference-kicker{letter-spacing:.035em}
.reference-top-board{color:var(--ref-text);background:var(--ref-surface);border:1px solid var(--ref-line);border-top:3px solid var(--ref-red);border-radius:3px;box-shadow:none}
.top-board-head{border-bottom:1px solid var(--ref-line)}
.top-board-row{border-bottom:1px solid var(--ref-line);transition:background-color .16s ease}
.top-board-row:hover{background:var(--ref-surface-2)}
.top-board-row>b{color:var(--ref-yellow);font-variant-numeric:tabular-nums}
.top-board-all{background:var(--ref-red)}
.top-board-all:hover{background:var(--ref-red-2)}
.reference-ranking-card,.bonus-card-hot,.league-command-card{transform:none!important;box-shadow:none!important;transition:border-color .16s ease,background-color .16s ease}
.reference-ranking-card:hover,.bonus-card-hot:hover,.league-command-card:hover,.btn-primary:hover,.btn-bonus-hot:hover,.btn-bonus-claim:hover{transform:none!important;box-shadow:none!important;filter:none}
.reference-ranking-card::after,.bonus-card-hot::before,.league-command-card::before{display:none!important}
.league-command-card{border-radius:3px}
.league-command-card:hover{background:var(--ref-surface-2);border-color:var(--ref-red)}
.page-header-photo{min-height:242px;display:flex;align-items:center;padding-block:clamp(28px,4vw,42px);color:#f2f1ed;background:#17191b}
.page-header-photo::before{width:100%;opacity:.78;filter:saturate(.78) contrast(1.08)}
.page-header-photo::after{background:linear-gradient(90deg,#17191b 0%,#17191b 39%,rgba(23,25,27,.9) 50%,rgba(23,25,27,.56) 65%,rgba(23,25,27,.12) 100%)}
.page-header-photo[data-scene="cashier"]::before{background-image:none;background-position:center 48%}
.page-header-photo h1{max-width:690px;color:#f5f2eb}
.page-header-photo .lead{max-width:650px;color:#d0cfca}
html[data-theme] .page-header-photo .container h1,html[data-theme] .page-header-photo .narrow h1{color:#f5f2eb!important;opacity:1!important}
html[data-theme] .page-header-photo .container .lead,html[data-theme] .page-header-photo .narrow .lead{color:#d0cfca!important;opacity:1!important}
.page-header-photo .notice-warning{display:inline-flex;width:auto;max-width:min(720px,100%);min-height:0;margin:.75rem 0 0;padding:.28rem 0 .28rem .7rem;color:#ddd5c2;background:transparent;border:0;border-left:2px solid #d4b25e;font-size:.76rem;line-height:1.45}
.page-header-photo .container,.page-header-photo .narrow{position:relative;z-index:1}
.bonus-card-hot{color:var(--ref-text);background:var(--ref-surface);border:1px solid var(--ref-line);border-top:3px solid var(--ref-red);border-radius:3px}
.bonus-card-hot .bonus-signal{margin:-1rem -1rem 1rem;padding:.48rem 1rem;color:var(--ref-text);background:var(--ref-surface-2);border-bottom:1px solid var(--ref-line);font-size:.68rem;font-weight:700;letter-spacing:0;text-transform:none}
.bonus-card-hot .metric-grid span{color:var(--ref-text);background:transparent;border:0;border-top:1px solid var(--ref-line);border-radius:0}
.bonus-card-hot .metric-grid small,.bonus-card-hot .muted,.bonus-responsible-note{color:var(--ref-muted)}
.bonus-card-hot .btn-bonus-claim{box-shadow:none}
.bonus-card-hot details{border-top:1px solid var(--ref-line)}
.bonus-card-hot .casino-identity{align-items:center}
#bonus-results{scroll-margin-top:84px}
@media(max-width:760px){
.reference-hero-overlay,html[data-theme="light"] .reference-hero-overlay{background:linear-gradient(90deg,#111416 0%,rgba(17,20,22,.94) 38%,rgba(17,20,22,.76) 68%,rgba(17,20,22,.62) 100%)}
.page-header-photo{min-height:unset}
.page-header-photo::before{width:100%;opacity:.34}
.page-header-photo::after{background:linear-gradient(90deg,rgba(23,25,27,.94),rgba(23,25,27,.78))}
}
@media(prefers-reduced-motion:reduce){
.reference-hero-photo,.page-header-photo::before,.sports-hub-photo{animation:none!important;transform:none!important}
}

.search-result-row.has-result-image{gap:16px}.search-result-row .search-result-image{width:92px;height:58px;object-fit:contain;flex:0 0 92px;align-self:center;background:var(--surface)}.search-result-row.has-result-image>div{flex:1;min-width:0}@media(max-width:620px){.search-result-row .search-result-image{width:64px;height:48px;flex-basis:64px}.search-result-row.has-result-image{gap:10px}}

/* Source: styles/market-experience.css */
/* Bastion: deliberate phone layouts, readable long-form copy, and usable touch controls. */
:root { --mobile-gutter: clamp(12px, 4vw, 22px); }
html, body { max-width: 100%; }
body { overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }
button, .btn, input, select, textarea { font: inherit; }
button, .btn, [role="button"], .menu-toggle, .icon-button { -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--ref-yellow); outline-offset: 3px; }

/* Long reads get real section titles, predictable anchors and a persistent desktop index. */
.guide-layout { display: grid; grid-template-columns: minmax(0, 760px) minmax(220px, 280px); align-items: start; justify-content: center; gap: clamp(28px, 5vw, 76px); }
.guide-layout .article-content { max-width: 760px; margin: 0; min-width: 0; }
.guide-layout .article-content > section { scroll-margin-top: 96px; }
.guide-layout .article-content > section + section { margin-top: clamp(32px, 4vw, 54px); }
.guide-layout .article-content > section > h2 { max-width: 25ch; margin-top: 0; padding-top: 14px; border-top: 2px solid var(--ref-line); }
.guide-sidebar { min-width: 0; }
.guide-toc { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow: auto; overscroll-behavior: contain; }
.guide-toc h2 { margin: 0 0 10px; color: var(--ref-text); font-size: .88rem; }
.guide-toc a { display: block; min-height: 42px; padding: 10px 0; }
.mobile-toc { display: none; }
.guide-reading-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; margin: 12px 0 0; color: var(--ref-muted); font-size: .78rem; }
.guide-reading-meta span { display: inline-flex; align-items: center; gap: 7px; }
.guide-reading-meta .ui-icon { width: 16px; height: 16px; }

@media (max-width: 980px) {
  .guide-layout { display: block; }
  .guide-sidebar { display: none; }
  .guide-layout .article-content { max-width: 760px; margin-inline: auto; }
  .mobile-toc { display: block; margin: 0 0 26px; border: 1px solid var(--ref-line); border-radius: 3px; }
  .mobile-toc summary { min-height: 48px; display: flex; align-items: center; padding: 11px 14px; cursor: pointer; font-weight: 750; }
  .mobile-toc a { min-height: 44px; display: flex; align-items: center; padding: 9px 14px; border-top: 1px solid var(--ref-line); line-height: 1.35; }
}

@media (max-width: 760px) {
  input, select, textarea { font-size: 16px; }
  html { scroll-padding-top: 68px; }
  .container, .narrow { width: calc(100% - (var(--mobile-gutter) * 2)); }
  .section { padding-block: 40px; }
  .section-sm { padding-block: 26px; }
  .site-header { min-height: 60px; }
  .header-inner { min-height: 60px; gap: 8px; }
  .brand { min-width: 0; max-width: calc(100% - 102px); }
  .brand-symbol { flex: 0 0 34px; width: 34px; height: 34px; }
  .brand-word { overflow: hidden; font-size: clamp(17px, 5vw, 20px); text-overflow: ellipsis; white-space: nowrap; }
  .canada-flag-badge { display: none; }
  .header-tools { flex: 0 0 auto; gap: 4px; }
  .header-tools .icon-button { display: none; }
  .header-tools .lang-switch { margin-left: 0; }
  .lang-switch a { min-width: 40px; min-height: 44px; }
  .menu-toggle { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; margin-left: auto; }
  .mobile-panel { inset: 60px 0 auto; max-height: calc(100dvh - 60px); overflow-y: auto; overscroll-behavior: contain; padding: 12px max(var(--mobile-gutter), env(safe-area-inset-left)) max(18px, env(safe-area-inset-bottom)); }
  .mobile-panel a { min-height: 48px; gap: 12px; padding: 10px 4px; }
  .mobile-panel .select-control { min-height: 48px; font-size: 16px; }
  .mobile-menu-head { position: sticky; top: -12px; z-index: 2; padding: 10px 0; background: var(--ref-bg); }
  .theme-toggle-mobile { min-height: 44px; padding: 8px 12px; }
  .page-header, .page-header-photo { padding-block: 28px; }
  .page-header .narrow, .page-header-photo .narrow { width: calc(100% - (var(--mobile-gutter) * 2)); }
  .page-header h1, .page-header-photo h1 { max-width: 18ch; font-size: clamp(1.9rem, 8.8vw, 2.8rem); line-height: 1.04; letter-spacing: -.04em; overflow-wrap: anywhere; }
  .page-header-photo .byline { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; gap: 10px; }
  .page-header-photo .byline > * { min-width: 0; }
  .page-header-photo .byline > *:first-child { grid-column: 1 / -1; }
  .page-header-photo .byline strong { overflow-wrap: anywhere; }
  .lead { font-size: 1rem; line-height: 1.6; }
  .guide-reading-meta { font-size: .82rem; }
  .guide-layout .article-content { font-size: 1rem; line-height: 1.78; }
  .guide-layout .article-content > section + section { margin-top: 34px; }
  .guide-layout .article-content > section > h2 { max-width: 100%; font-size: clamp(1.3rem, 6vw, 1.65rem); line-height: 1.18; }
  .mobile-toc { margin-bottom: 24px; }
  .filters { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 12px; }
  .filters label { min-width: 0; font-size: .78rem; }
  .filters .input-control, .filters .select-control { width: 100%; min-height: 48px; font-size: 16px; }
  .grid-2, .grid-3, .trust-grid, .pros-cons, .key-facts { grid-template-columns: minmax(0,1fr); }
  .reference-hero { min-height: 0; }
  .reference-hero-grid, .sports-hub-hero-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .reference-hero-copy, .reference-hero-panel, .sports-hub-copy { min-width: 0; }
  .reference-hero h1, .sports-hub-hero h1 { max-width: 17ch; font-size: clamp(2.2rem, 11vw, 3.5rem); line-height: 1.02; }
  .hero-actions, .reference-hero-actions { display: grid; grid-template-columns: minmax(0,1fr); }
  .hero-actions .btn, .reference-hero-actions .btn { width: 100%; min-height: 48px; }
  .top-board-row { grid-template-columns: 32px minmax(0,1fr) auto; gap: 10px; }
  .top-board-row > * { min-width: 0; }
  .top-board-row span { overflow-wrap: anywhere; }
  .casino-card { grid-template-columns: 38px minmax(0,1fr); gap: 11px; padding: 15px 13px; }
  .casino-identity { min-width: 0; padding-right: 0; flex-wrap: wrap; }
  .casino-card .casino-identity .casino-logo-frame { flex: 0 0 46px; }
  .casino-name { max-width: 100%; overflow-wrap: anywhere; }
  .casino-card .bonus-block, .casino-card .card-actions { min-width: 0; }
  .casino-card .card-actions { grid-template-columns: minmax(0,1fr); gap: 9px; }
  .casino-card .card-actions .btn { width: 100%; min-height: 48px; }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .comparison-head { align-items: stretch; }
  .comparison-head .btn { width: 100%; min-height: 48px; }
  .comparison-scroll, .responsive-table, .table-scroll { max-width: 100%; overscroll-behavior-inline: contain; }
  body:not([data-route="bonuses"]) #main-content { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .bonus-hotspot { right: 0; bottom: 0; left: 0; width: 100%; min-height: calc(64px + env(safe-area-inset-bottom)); grid-template-columns: 40px minmax(0,1fr) 22px; gap: 10px; padding: 8px max(var(--mobile-gutter),env(safe-area-inset-left)) calc(8px + env(safe-area-inset-bottom)); background: rgba(17,20,22,.97); border-inline: 0; border-bottom: 0; border-radius: 0; box-shadow: 0 -6px 24px rgba(0,0,0,.22); backdrop-filter: blur(12px); }
  .bonus-hotspot-mark { width: 40px; height: 40px; }
  .cookie-banner { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; width: auto; max-height: min(48vh, 350px); overflow-y: auto; }
  .cookie-banner ~ .bonus-hotspot { display: none; }
  .cookie-banner .btn { min-height: 44px; }
  .compare-dock, .comparison-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; width: auto; }
  .saved-sheet-panel, .compare-sheet { inset: auto 0 0; width: 100%; max-height: min(84dvh, 760px); padding-bottom: max(18px, env(safe-area-inset-bottom)); border-radius: 12px 12px 0 0; }
  .saved-sheet-head, .compare-sheet-head { align-items: flex-start; }
  .saved-operator-list { max-height: 46dvh; overflow: auto; }
  .province-hero-grid, .province-context-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .province-fact-board { width: 100%; }
  .province-fact-board dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .sports-hub-photo { min-height: 240px; background-position: 58% center; }
  .match-search-form, .search-form { grid-template-columns: minmax(0,1fr); }
  .match-search-form .btn, .search-form .btn { width: 100%; min-height: 48px; }
  .source-register li { grid-template-columns: 28px minmax(0,1fr); gap: 9px; }
  .source-register a, .source-register li p { overflow-wrap: anywhere; }
  .footer-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px 14px; }
  .footer-note { align-items: flex-start; gap: 8px; }
  .footer-note small { max-width: 100%; }
  .admin-body .container { width: calc(100% - (var(--mobile-gutter) * 2)); }
  .admin-body .admin-header-inner, .admin-body .admin-intro { align-items: stretch; gap: 12px; }
  .admin-body .admin-header-inner > .cluster { flex-wrap: wrap; }
  .admin-body .admin-header-inner .btn { min-height: 44px; }
  .admin-body .admin-intro h1 { font-size: clamp(1.8rem, 8vw, 2.5rem); }
  .admin-body .workflow-actions { display: grid; grid-template-columns: minmax(0,1fr); width: 100%; }
  .admin-body .workflow-actions .btn, .admin-body .workflow-actions input { width: 100%; min-height: 46px; }
  .admin-body .admin-nav { position: sticky; top: 0; display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; gap: 6px; padding: 9px; scrollbar-width: thin; }
  .admin-body .admin-nav-group { flex: 0 0 auto; align-self: center; }
  .admin-body .admin-nav button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; }
  .admin-body .admin-grid, .admin-body .dashboard-grid, .admin-body .login-form, .admin-body .form-grid { grid-template-columns: minmax(0,1fr); }
  .admin-body .admin-field-wide { grid-column: auto; }
}

/* Bastion 2.8.26 — editorial market desk, with a deliberate tablet and phone rhythm. */
#app .reference-hero {
  min-height: 0;
  background: var(--b9-paper);
}
#app .reference-hero-grid {
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, .88fr);
  gap: clamp(24px, 4vw, 60px);
  padding-block: clamp(40px, 6vw, 76px);
}
#app .reference-hero-copy .reference-kicker {
  width: fit-content;
  margin-bottom: 18px;
  padding: 0 0 8px;
  color: var(--b9-muted);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--b9-red);
  font-size: .68rem;
  letter-spacing: .12em;
}
#app .reference-hero h1 {
  max-width: 14ch;
  margin-bottom: 17px;
  color: var(--b9-ink) !important;
  font-family: var(--b9-type-editorial);
  font-size: clamp(2.75rem, 5vw, 4.65rem);
  font-weight: 600;
  letter-spacing: -.045em;
  line-height: 1.02;
  text-transform: none;
  text-wrap: balance;
}
#app .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 58ch;
  color: var(--b9-muted) !important;
  font-size: clamp(.98rem, 1.1vw, 1.08rem);
  line-height: 1.6;
}
#app .reference-hero .hero-search {
  margin-top: 20px;
  background: var(--b9-panel);
  border-color: var(--b9-line);
  border-radius: 2px;
  box-shadow: none;
}
#app .reference-hero .hero-search input,
#app .reference-hero .hero-search .btn { min-height: 50px; }
#app .reference-hero .hero-actions { align-items: center; gap: 15px; margin-block: 12px 8px; }
#app .reference-hero .hero-actions .btn { min-height: 46px; border-radius: 2px; }
#app .reference-hero .home-review-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--b9-ink);
  font-size: .82rem;
  font-weight: 750;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
#app .reference-hero .home-review-link:hover { color: var(--b9-red); }
#app .home-coverage-board {
  background: color-mix(in srgb, var(--b9-panel) 96%, transparent);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}
#app .home-coverage-head { padding-inline: 15px; }
#app .home-coverage-metrics > div { padding-inline: 13px; }
#app .home-offer-link { border-color: var(--b9-line); }
#app .home-hero-foot { gap: 6px 13px; }

/* Keep the complete navigation on laptop widths; collapse only when it truly stops fitting. */
@media (max-width: 1240px) and (min-width: 981px) {
  #app .header-inner { gap: 9px; }
  #app .primary-nav { display: flex !important; flex: 0 1 auto; gap: 2px; margin-left: auto; }
  #app .primary-nav a { min-height: 40px; padding-inline: 4px; font-size: .68rem; }
  #app .menu-toggle { display: none !important; }
  #app .header-tools { gap: 5px; }
  #app .header-tools .account-header-button,
  #app .header-tools .theme-toggle,
  #app .header-tools [data-search-open] { display: none !important; }
  #app .saved-header-button { width: 43px; min-width: 43px; justify-content: center; padding-inline: 4px; }
  #app .saved-header-button > span { display: none; }
  #app .province-mini { width: 104px; min-width: 104px; padding-inline: 7px 20px; font-size: .72rem; }
  #app .lang-switch a { min-width: 32px; padding-inline: 5px; }
}
@media (max-width: 980px) {
  #app .primary-nav { display: none !important; }
  #app .menu-toggle { display: grid !important; margin-left: auto; }
  #app .header-tools .account-header-button,
  #app .header-tools .theme-toggle,
  #app .header-tools [data-search-open] { display: none !important; }
  #app .mobile-panel { inset-block-start: 68px; }
  #app .mobile-panel.is-open { display: grid !important; }
  #app .reference-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 760px) {
  #app .reference-hero-grid { gap: 19px; padding-block: 26px 22px; }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 13px; font-size: .64rem; }
  #app .reference-hero h1 { max-width: 19ch; margin-bottom: 11px; font-size: clamp(2.12rem, 8.8vw, 2.8rem); line-height: 1.04; }
  #app .reference-hero-copy > p:not(.reference-kicker) { font-size: .96rem; line-height: 1.48; }
  #app .reference-hero .hero-search { margin-top: 14px; }
  #app .reference-hero .hero-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px; margin-top: 8px; }
  #app .reference-hero .hero-actions .btn { width: 100%; }
  #app .reference-hero .home-review-link { width: fit-content; min-height: 42px; }
  #app .home-offer-link { min-height: 48px; margin-top: 6px; }
  #app .home-hero-foot { align-items: flex-start; flex-direction: column; gap: 0; margin-top: 4px; }
  #app .home-coverage-metrics > div { padding-inline: 9px; }
  #app .home-coverage-metrics span { font-size: .64rem; }
}
@media (max-width: 380px) {
  #app .reference-hero-grid { gap: 17px; padding-top: 22px; }
  #app .reference-hero h1 { max-width: 17ch; font-size: clamp(2rem, 8.5vw, 2.3rem); }
  #app .reference-hero-copy > p:not(.reference-kicker) { font-size: .92rem; }
  #app .home-coverage-head { padding-inline: 10px; }
  #app .home-coverage-head .select-control { min-width: 98px; }
  #app .official-registry-stats > div { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .reference-hero-photo { animation: none !important; transform: none !important; }
}

@media (max-width: 420px) {
  :root { --mobile-gutter: 12px; }
  .header-inner { gap: 6px; }
  .brand { max-width: calc(100% - 98px); }
  .brand-symbol { flex-basis: 31px; width: 31px; height: 31px; }
  .brand-word { font-size: 17px; }
  .lang-switch a { min-width: 36px; }
  .reference-hero h1, .sports-hub-hero h1 { font-size: clamp(2rem, 10.5vw, 2.75rem); }
  .top-board-row { grid-template-columns: 28px minmax(0,1fr) auto; gap: 7px; }
  .casino-card { padding-inline: 11px; }
  .casino-card .metric-grid { grid-template-columns: minmax(0,1fr); }
  .bonus-hotspot { grid-template-columns: 38px minmax(0,1fr); }
  .bonus-hotspot-arrow { display: none; }
  .footer-grid { grid-template-columns: minmax(0,1fr); }
  .province-fact-board dl { grid-template-columns: minmax(0,1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .guide-toc a, .mobile-toc a, .bonus-hotspot, .offer-record-value { transition: none !important; }
  .bonus-hotspot:hover, .bonus-hotspot:focus-visible { transform: none !important; }
}


/* Bastion: keep editorial metadata readable over photographic headers. */
#app .page-header-photo .byline,
#app .page-header-photo .byline > a,
#app .page-header-photo .byline > span,
#app .page-header-photo .byline strong { color: #fff; }
#app .page-header-photo .byline small { color: rgba(255,255,255,.82); }
#app .page-header-photo .byline .avatar { color: #17191a; }
@media (max-width: 760px) {
  .mobile-panel { min-height: calc(100dvh - 60px); align-content: start; }
  .reference-hero .hero-search { display: grid; grid-template-columns: minmax(0,1fr); align-items: stretch; gap: 8px; }
  .reference-hero .hero-search input, .reference-hero .hero-search .btn { width: 100%; min-width: 0; min-height: 48px; }
  .page-header-photo .byline { row-gap: 13px; }
  .page-header-photo .byline > *:not(:first-child) { min-height: 38px; }
  .guide-layout .article-content > section { overflow-wrap: anywhere; }
}

.operator-facts-note { max-width:21ch; margin:2px 0 10px; color:var(--ref-muted); font-size:.76rem; line-height:1.45; }
.bonus-card .bonus-signal { gap:10px; }
.bonus-card .bonus-signal > span { letter-spacing:.035em; }
/* Verified operator evidence is presented with transaction direction. */
.operator-payment-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:8px; }
.operator-payment-list > span { display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:4px; padding:4px 6px; color:var(--ref-text); background:rgba(255,255,255,.035); border:1px solid var(--ref-line); font-size:.68rem; line-height:1.35; }
.operator-payment-list small { color:var(--ref-muted); font-size:.62rem; }
.operator-payment-list .operator-payment-empty { color:var(--ref-muted); background:transparent; border-style:dashed; }
.hero-source-link { display:flex; width:fit-content; max-width:100%; align-items:center; gap:7px; min-height:42px; margin-top:10px; color:var(--ref-red); font-size:.82rem; font-weight:750; text-underline-offset:4px; }
.hero-source-link .ui-icon { width:16px; height:16px; }

@media (max-width:760px) { body:has(.menu-toggle[aria-expanded="true"]) .bonus-hotspot { display:none; } }


/* Bastion: locally searchable official Ontario market register. */
.official-registry-section { background: #15191b; color: #f0eee7; border-block: 1px solid #303638; }
.official-registry-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 24px; }
.official-registry-heading h2 { max-width: 20ch; margin: 0 0 10px; color: #f4f0e6; font-size: clamp(1.65rem,3vw,2.45rem); line-height: 1.08; letter-spacing: -.035em; }
.official-registry-heading > div > p:last-of-type { max-width: 72ch; color: #c1c4be; line-height: 1.65; }
.alberta-register-guide-link { display: inline-flex; min-height: 44px; align-items: center; gap: 9px; margin-top: 8px; color: #f3d486; font-size: .9rem; font-weight: 650; text-decoration: underline; text-decoration-color: rgba(243,212,134,.5); text-underline-offset: 4px; }
.alberta-register-guide-link svg { width: 15px; height: 15px; }
.official-registry-heading .eyebrow { color: #cfb66f; }
.guide-photo figcaption.guide-photo-credit { z-index: 2; }
.guide-photo figcaption.guide-photo-credit a { display: inline-flex; min-height: 32px; align-items: center; padding: 6px 9px; border: 1px solid rgba(255,255,255,.38); background: rgba(9,11,13,.74); color: #fff; font-size: .65rem; font-weight: 700; letter-spacing: .035em; text-decoration: none; }
#app .guide-photo-real.guide-hero-visual img { object-position: center 66%; }
.official-registry-source { min-height: 46px; white-space: nowrap; }
.official-registry-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 22px 0; border-block: 1px solid #3a4142; }
.official-registry-stats > div { display: flex; align-items: baseline; gap: 10px; min-width: 0; padding: 15px 18px; }
.official-registry-stats > div + div { border-left: 1px solid #3a4142; }
.official-registry-stats strong { color: #f0ce76; font-size: 1.7rem; font-variant-numeric: tabular-nums; }
.official-registry-stats span { color: #c4c8c3; font-size: .85rem; }
.official-registry-browser { border: 1px solid #384043; background: #101315; }
.official-registry-toolbar { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 18px; padding: 18px; border-bottom: 1px solid #303638; }
.official-registry-toolbar label { display: grid; gap: 7px; color: #d7d8d2; font-size: .82rem; font-weight: 700; }
.official-registry-toolbar .input-control { width: min(100%,560px); min-height: 46px; border-color: #566063; color: #f5f2ea; background: #191e20; }
.official-registry-toolbar output { padding: 12px 0; color: #b8bfba; font-size: .8rem; font-variant-numeric: tabular-nums; text-align: right; }
.official-registry-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 24px; padding: 4px 18px 12px; }
.official-registry-entry { min-width: 0; border: 0; border-bottom: 1px solid #2b3234; border-radius: 0; background: #101315; }
.official-registry-entry[hidden], .official-registry-empty[hidden] { display: none; }
.official-registry-entry summary { display: grid; grid-template-columns: minmax(0,1fr) auto 22px; align-items: center; gap: 10px; min-height: 52px; padding: 9px 3px; color: #eeeae0; background: transparent; cursor: pointer; list-style: none; }
.official-registry-entry summary:hover { background: #1a1f20; }
.official-registry-entry summary::-webkit-details-marker { display: none; }
.official-registry-entry summary::after { content: "+"; grid-column: 3; grid-row: 1; width: 22px; color: #d7bd71; font-size: 1.2rem; text-align: center; }
.official-registry-entry[open] summary::after { content: "−"; }
.official-registry-entry summary > span { grid-column: 1; grid-row: 1; font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
.official-registry-entry summary > small { grid-column: 2; grid-row: 1; margin-right: 0; color: #aab2ad; font-size: .7rem; white-space: nowrap; }
.official-registry-entry[open] summary { border-bottom: 1px solid #303638; }
.official-registry-entry ul { margin: 0; padding: 0; list-style: none; }
.official-registry-site { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 10px 3px; border-bottom: 1px solid #242a2c; }
.official-registry-site:last-child { border-bottom: 0; }
.official-registry-site a { display: inline-flex; align-items: center; gap: 6px; color: #f0cf7b; font-weight: 720; text-decoration: none; }
.official-registry-site a:hover { text-decoration: underline; text-underline-offset: 3px; }
.official-registry-site .ui-icon { width: 14px; height: 14px; }
.official-registry-site small { display: block; margin-top: 3px; color: #929c98; font-size: .7rem; overflow-wrap: anywhere; }
.official-registry-categories { display: flex; flex-wrap: wrap; justify-content: end; gap: 5px; }
.official-registry-categories span { padding: 4px 7px; border: 1px solid #384043; border-radius: 2px; color: #bdc4bf; font-size: .66rem; line-height: 1.2; }
.official-registry-empty { margin: 0; padding: 22px 18px; color: #c3c6c0; }
.official-registry-footnote { margin: 13px 0 0; color: #a8afab; font-size: .76rem; line-height: 1.55; }
.official-registry-footnote a { color: #e5c972; }
@media (max-width: 760px) {
  .official-registry-heading { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .official-registry-heading h2 { max-width: 100%; }
  .official-registry-source { width: 100%; min-height: 48px; justify-content: center; }
  .official-registry-stats { grid-template-columns: minmax(0,1fr); margin-block: 16px; }
  .official-registry-stats > div { gap: 11px; padding: 10px 14px; }
  .official-registry-stats > div + div { border-top: 1px solid #3a4142; border-left: 0; }
  .official-registry-stats strong { min-width: 2.4ch; }
  .official-registry-toolbar { grid-template-columns: minmax(0,1fr); gap: 5px; padding: 13px; }
  .official-registry-toolbar .input-control { width: 100%; min-height: 48px; font-size: 16px; }
  .official-registry-toolbar output { padding: 5px 0 0; text-align: left; }
  .official-registry-list { grid-template-columns: minmax(0,1fr); padding: 2px 13px 9px; }
  .official-registry-entry summary { min-height: 50px; }
  .official-registry-site { grid-template-columns: minmax(0,1fr); gap: 7px; padding-block: 11px; }
  .official-registry-categories { justify-content: start; }
}

.official-registry-public { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 22px; margin: -7px 0 22px; padding: 17px 19px; border: 1px solid #554b30; border-left: 3px solid #c7aa5f; background: #1a1b17; }
.official-registry-public .eyebrow { margin: 0 0 5px; color: #cfb66f; }
.official-registry-public > div > a { display: inline-flex; align-items: center; gap: 6px; color: #f0cf7b; text-decoration: none; }
.official-registry-public > div > a strong { font-size: 1.1rem; }
.official-registry-public > div > a:hover { text-decoration: underline; text-underline-offset: 3px; }
.official-registry-public > div > a .ui-icon { width: 15px; height: 15px; }
.official-registry-public > div > p:last-child { max-width: 78ch; margin: 7px 0 0; color: #c1c4be; font-size: .84rem; line-height: 1.55; }
.official-registry-public > small { max-width: 30ch; color: #b5b8b1; font-size: .76rem; line-height: 1.5; text-align: right; }
@media (max-width: 760px) {
  .official-registry-entry summary { grid-template-columns: minmax(0,1fr) auto 22px; gap: 7px; }
  .official-registry-entry summary > small { font-size: .68rem; }
  .official-registry-public { grid-template-columns: minmax(0,1fr); gap: 8px; margin-top: -1px; padding: 14px; }
  .official-registry-public > small { max-width: none; text-align: left; }
}

/* Bastion mobile operator cards: keep identity, evidence and actions readable. */
@media (max-width: 620px) {
  #app .reference-ranking-card.casino-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 0 12px;
    align-items: stretch;
    padding: 0 12px 14px 0;
    overflow: hidden;
  }
  #app .reference-ranking-card.casino-card > .ranking-position {
    display: flex;
    grid-column: 1;
    grid-row: 1 / span 5;
    padding: 12px 3px;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell {
    display: grid;
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 14px 3px 9px 0;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell .casino-logo-frame {
    width: 46px;
    height: 42px;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell > div { min-width: 0; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell h2,
  #app .reference-ranking-card.casino-card > .operator-brand-cell h3 {
    margin: 3px 0;
    font-size: 1rem;
    line-height: 1.2;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell p,
  #app .reference-ranking-card.casino-card > .operator-brand-cell small {
    display: block;
    margin: 4px 0 0;
    font-size: .72rem;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card > .operator-score-cell {
    display: flex;
    grid-column: 2;
    grid-row: 2;
    justify-content: flex-start;
    align-items: baseline;
    padding: 0 3px 11px 0;
    border: 0;
    border-bottom: 1px solid var(--ref-line);
  }
  #app .reference-ranking-card.casino-card > .operator-score-cell small {
    flex-basis: auto;
    margin-left: 8px;
    text-align: left;
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell,
  #app .reference-ranking-card.casino-card > .operator-facts-cell {
    display: block;
    grid-column: 2;
    padding: 12px 3px 13px 0;
    min-width: 0;
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell {
    grid-row: 3;
    border-bottom: 1px solid var(--ref-line);
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell > small {
    display: block;
    overflow: visible;
    -webkit-line-clamp: unset;
  }
  #app .reference-ranking-card.casino-card > .operator-facts-cell {
    grid-row: 4;
    border-bottom: 1px solid var(--ref-line);
  }
  #app .reference-ranking-card.casino-card .operator-facts-note { max-width: none; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell {
    display: grid;
    grid-column: 2;
    grid-row: 5;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 3px 0 0;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .btn,
  #app .reference-ranking-card.casino-card > .operator-action-cell .text-action {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding-inline: 7px;
    text-align: center;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button {
    min-height: 44px;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell > small {
    grid-column: 1 / -1;
  }
}

/* Mobile listing-source notice: preserve a readable text measure and full-width source action. */
@media (max-width: 760px) {
  #app .page-header-photo .listing-coverage-notice {
    display: block;
    width: 100%;
    max-width: 100%;
    margin-top: 12px;
    padding: 10px 0 10px 11px;
  }
  #app .page-header-photo .listing-coverage-notice p {
    margin: 0;
    max-width: 58ch;
    line-height: 1.5;
  }
  #app .page-header-photo .listing-coverage-notice > a {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    margin-top: 8px;
    align-items: center;
    gap: 7px;
    overflow-wrap: anywhere;
  }
}
/* At narrow phone widths, give operator names and summary copy the full reading measure. */
@media (max-width: 360px) {
  #app .review-title-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: start;
  }
  #app .review-title-row > .casino-logo {
    width: 60px !important;
    height: 60px !important;
  }
  #app .review-title-row > div:nth-child(2) { min-width: 0; }
  #app .review-title-row .score-card { grid-column: 1; }
}

/* Bastion: give the search field a real touch target on narrow screens. */
.semantic-search-form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: stretch; gap: 8px; }
.semantic-search-form .input-control { width: 100%; min-width: 0; min-height: 50px; }
.semantic-search-form .btn { width: auto; min-width: 120px; min-height: 50px; }
@media (max-width: 760px) {
  .semantic-search-form { grid-template-columns: minmax(0,1fr); }
  .semantic-search-form .btn { width: 100%; }
}

/* Bastion: editorial hierarchy, useful motion only, and flat market records. */
:root {
  --bastion-font-body: var(--ref-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  --bastion-font-display: var(--ref-font-display, Georgia, "Times New Roman", serif);
}
body { font-family: var(--bastion-font-body); letter-spacing: normal; }
h1, h2, .page-header h1, .page-header-photo h1, .reference-hero h1, .sports-hub-hero h1,
.section-heading h2, .province-board-head h2, .match-intent-head h2 {
  font-family: var(--bastion-font-display);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
  text-transform: none;
}
h3, h4, .brand-word { font-family: var(--bastion-font-body); letter-spacing: -.01em; }
.eyebrow, .reference-kicker, .meta, .editorial-label, .search-result-row > div > span {
  font-family: var(--bastion-font-body);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
.reference-kicker { padding: 0; background: transparent; border-left-width: 2px; }
.editorial-label { color: var(--ref-red); }
.reference-ranking-card::after, .league-command-card::before { display: none !important; }
.reference-ranking-card, .league-command-card { transform: none !important; box-shadow: none !important; }
.reference-ranking-card:hover, .league-command-card:hover { transform: none !important; box-shadow: none !important; }
.bonus-hotspot { backdrop-filter: none; box-shadow: none; }
@media (max-width: 760px) { .bonus-hotspot { backdrop-filter: none; } }

.guide-card-byline { display: grid; gap: 5px; margin: 13px 0 10px; padding-block: 9px; border-block: 1px solid var(--ref-line); font-size: .78rem; line-height: 1.35; }
.guide-card-byline a, .guide-card-byline > span { display: flex; flex-wrap: wrap; gap: 5px; align-items: baseline; color: var(--ref-muted); text-decoration: none; }
.guide-card-byline a:hover { color: var(--ref-text); }
.guide-card-byline strong { color: var(--ref-text); font-weight: 700; }
#app .author-card { grid-template-columns: minmax(0,1fr); }
#app .author-hero { grid-template-columns: minmax(0,1fr); }

/* Article covers are editorial photography, not duplicate title banners. */
.guide-photo { height: 176px; aspect-ratio: 16 / 9; }
.guide-photo::before { display: none !important; }
.guide-photo img { filter: saturate(.78) contrast(1.04); transition: none !important; transform: none !important; }
.guide-card:hover .guide-photo img { transform: none !important; }
.guide-card:hover { transform: none !important; }


/* Bastion: keep editorial copy and topic photography in separate planes. */
#app .page-header-photo > .container > h1,
#app .page-header-photo > .container > .lead,
#app .page-header-photo > .container > .listing-coverage-notice,
#app .page-header-photo > .narrow > h1,
#app .page-header-photo > .narrow > .lead { max-width: min(580px, 46%); }
#app .page-header-photo > .container > .listing-coverage-notice { width: min(580px, 46%); }
#app .guide-article-hero { min-height: 0; padding: 0; color: var(--ref-text); background: var(--ref-bg); border-block: 1px solid var(--ref-line); }
#app .guide-article-hero::before,
#app .guide-article-hero::after { display: none; content: none; }
#app .guide-article-hero-grid { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(360px, .96fr); align-items: stretch; gap: clamp(28px, 5vw, 76px); max-width: 1440px; }
#app .guide-hero-copy { align-self: center; min-width: 0; padding-block: clamp(42px, 6vw, 84px); }
#app .guide-hero-copy h1 { max-width: 660px; margin: 17px 0 16px; color: var(--ref-text); font-size: clamp(2.5rem, 3.9vw, 4.25rem); line-height: 1.02; letter-spacing: -.045em; overflow-wrap: normal; }
#app .guide-hero-copy .lead { max-width: 54ch; margin-bottom: 24px; color: var(--ref-muted); font-size: clamp(1rem, 1.3vw, 1.16rem); line-height: 1.58; }
#app .guide-article-hero .byline,
#app .guide-article-hero .guide-reading-meta { max-width: 620px; }
#app .guide-article-hero .byline { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: baseline; margin-block: 0 14px; color: var(--ref-muted); }
#app .guide-article-hero .byline > * { min-width: 0; }
#app .guide-article-hero .byline strong { color: var(--ref-text); }
#app .guide-reading-meta { display: flex; flex-wrap: wrap; gap: 18px; margin: 0; color: var(--ref-muted); font-size: .82rem; }
#app .guide-reading-meta span { display: inline-flex; align-items: center; gap: 7px; }
#app .guide-hero-visual { align-self: stretch; width: 100%; height: clamp(420px, 42vw, 640px); min-height: 0; margin: 0; aspect-ratio: auto; overflow: hidden; background: var(--ref-surface-2); }
#app .guide-hero-visual img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: center; }
@media (max-width: 760px) {
  #app .page-header-photo > .container > h1,
  #app .page-header-photo > .container > .lead,
  #app .page-header-photo > .container > .listing-coverage-notice,
  #app .page-header-photo > .narrow > h1,
  #app .page-header-photo > .narrow > .lead { max-width: 100%; }
  #app .page-header-photo > .container > .listing-coverage-notice { width: 100%; }
  #app .guide-article-hero { padding: 0; }
  #app .guide-article-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  #app .guide-hero-copy { padding-block: 30px 24px; }
  #app .guide-hero-copy h1 { max-width: 15ch; font-size: clamp(2.25rem, 10vw, 3.4rem); line-height: 1.02; }
  #app .guide-hero-copy .lead { max-width: 60ch; margin-bottom: 18px; }
  #app .guide-article-hero .byline { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 14px; }
  #app .guide-article-hero .byline > *:first-child { grid-column: 1 / -1; }
  #app .guide-hero-visual { min-height: 0; height: 220px; }
  #app .guide-hero-visual img { min-height: 0; height: 220px; }
}
@media (max-width: 380px) {
  #app .guide-hero-copy { padding-block: 26px 20px; }
  #app .guide-hero-copy h1 { font-size: clamp(2rem, 9vw, 2.45rem); }
  #app .guide-article-hero .byline { grid-template-columns: minmax(0, 1fr); }
  #app .guide-article-hero .byline > *:first-child { grid-column: auto; }
}

/* Bastion product system — editorial sports desk, utility-first responsive layout. */
:root {
  --b9-ink: #f4f2ed;
  --b9-muted: #a7adb3;
  --b9-paper: #090b0d;
  --b9-panel: #111418;
  --b9-panel-raised: #171b20;
  --b9-line: #2a3037;
  --b9-red: #d92d35;
  --b9-yellow: #f0c24b;
  --b9-green: #0e8f62;
  --b9-gutter: clamp(16px, 3.2vw, 40px);
}
html[data-theme="light"] {
  --b9-ink: #171a1e;
  --b9-muted: #66707a;
  --b9-paper: #f1f3f5;
  --b9-panel: #fff;
  --b9-panel-raised: #f8f9fa;
  --b9-line: #d9dde1;
  --b9-red: #b71f2b;
  --b9-yellow: #76540d;
  --b9-green: #14734e;
}
html { scroll-padding-top: 82px; }
body { color: var(--b9-ink); background: var(--b9-paper); overflow-x: clip; font-family: var(--ref-font-body); font-size: 16px; line-height: 1.6; font-feature-settings: "kern" 1, "liga" 1; }
#app, #main-content, .container, .narrow { min-width: 0; }
.container { width: min(100% - (var(--b9-gutter) * 2), 1320px); }
.site-atmosphere { display: none !important; }
.site-header { position: sticky; top: 0; z-index: 50; min-height: 68px; background: var(--b9-paper); border-bottom: 1px solid var(--b9-line); box-shadow: none; backdrop-filter: none; }
.header-inner { min-height: 68px; gap: clamp(10px, 1.3vw, 20px); }
.brand { flex: 0 0 auto; }
.brand-symbol { width: 35px; height: 35px; }
.brand-word { font-size: 1.19rem; letter-spacing: -.045em; }
.canada-flag-badge { flex: 0 0 auto; }
.primary-nav { gap: clamp(5px, .75vw, 11px); }
.primary-nav a { min-height: 42px; padding: 8px 7px; font-size: .75rem; white-space: nowrap; }
.header-tools { flex: 0 0 auto; gap: 6px; }
.icon-button, .menu-toggle { width: 42px; min-width: 42px; height: 42px; border-radius: 2px; }
.menu-toggle { display: none; }
.lang-switch { border-radius: 2px; }
.lang-switch a { min-width: 34px; min-height: 36px; }
.mobile-panel { background: var(--b9-panel); border-color: var(--b9-line); box-shadow: 0 12px 30px rgba(0,0,0,.22); }
.mobile-panel a { min-height: 48px; border-color: var(--b9-line); }
.mobile-panel a.mobile-search-link { color: var(--b9-ink); }
.mobile-search-link > .ui-icon:first-child { width: 19px; height: 19px; }
.mobile-menu-head { color: var(--b9-muted); }
.saved-header-button { min-height: 42px; border-radius: 2px; }
/* Give the desktop navigation a real tablet breakpoint before labels collide. */
@media (max-width: 1240px) {
  .primary-nav { display: none; }
  .menu-toggle { display: grid; margin-left: auto; }
  .header-tools { margin-left: 0; }
  .mobile-panel.is-open { display: grid; }
}
.reference-hero { position: relative; isolation: isolate; color: var(--b9-ink); background: var(--b9-paper); border-bottom: 1px solid var(--b9-line); }
.reference-hero-grid { width: min(100% - (var(--b9-gutter) * 2), 1320px); max-width: 1320px; grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); gap: clamp(28px, 5vw, 76px); align-items: center; padding-block: clamp(50px, 7.2vw, 96px); }
.reference-hero-copy { max-width: 760px; }

.reference-hero-copy .reference-kicker { margin-bottom: 22px; color: var(--b9-muted); font-size: .72rem; font-weight: 750; letter-spacing: .1em; text-transform: uppercase; }
.reference-hero h1 { max-width: 12ch; margin: 0 0 20px; color: var(--b9-ink) !important; font-family: var(--b9-type-editorial); font-size: clamp(3rem, 5.4vw, 5.35rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.02; }
.reference-hero-copy > p:not(.reference-kicker) { max-width: 63ch; color: var(--b9-muted) !important; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.62; }
.reference-hero .hero-search { max-width: 680px; margin-top: 25px; }
.reference-hero .hero-search input { min-height: 54px; border-radius: 2px; }
.reference-hero .hero-search .btn { min-height: 54px; border-radius: 2px; }
.reference-hero .intent-links { gap: 7px; margin-block: 14px 17px; }
.reference-hero .intent-links a { min-height: 34px; padding: 6px 10px; color: var(--b9-muted); background: transparent; border: 1px solid var(--b9-line); border-radius: 2px; font-size: .78rem; }
.reference-hero .intent-links a:hover { color: var(--b9-ink); border-color: var(--b9-red); background: color-mix(in srgb, var(--b9-red) 9%, var(--b9-paper)); }
.reference-hero .hero-actions { gap: 8px; margin-block: 17px 13px; }
.reference-hero .hero-actions .btn { min-height: 46px; border-radius: 2px; }
.reference-hero-copy > small { color: var(--b9-muted) !important; }
.reference-top-board { width: 100%; align-self: center; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); border-top: 3px solid var(--b9-red); border-radius: 2px; box-shadow: none; }
.top-board-head { min-height: 68px; padding: 14px 16px; border-color: var(--b9-line); }
.top-board-row { min-height: 78px; grid-template-columns: 28px 58px minmax(0,1fr) auto; gap: 12px; padding: 12px 16px; border-color: var(--b9-line); }
.top-board-row > span:first-child { color: var(--b9-muted); font-variant-numeric: tabular-nums; }
.top-board-row > b { color: var(--b9-yellow); font-variant-numeric: tabular-nums; }
.top-board-logo { width: 54px; height: 42px; }
.top-board-row small { color: var(--b9-muted); }
.top-board-all { min-height: 48px; background: var(--b9-red); }
.top-board-all:hover { background: color-mix(in srgb, var(--b9-red) 82%, black); }
.market-ribbon { color: var(--b9-muted); background: var(--b9-panel); border-block: 1px solid var(--b9-line); }
.market-ribbon .container { min-height: 48px; display: flex; align-items: center; gap: 0; }
.market-ribbon .container > span { flex: 0 0 auto; margin-right: 13px; color: var(--b9-ink); font-size: .65rem; font-weight: 850; letter-spacing: .1em; }
.market-ribbon a { min-height: 38px; display: inline-flex; align-items: center; padding: 0 13px; color: var(--b9-muted); border-left: 1px solid var(--b9-line); font-size: .75rem; white-space: nowrap; }
.market-ribbon a:hover { color: var(--b9-ink); }
.section-heading { align-items: end; gap: 22px; }
.section-heading > div { min-width: 0; }
.section-heading h2 { max-width: 22ch; text-wrap: balance; }
.reference-ranking-section { background: var(--b9-paper); }
.reference-ranking-list { gap: 12px; }
.reference-ranking-card { border: 1px solid var(--b9-line); border-radius: 2px; }
.reference-ranking-card:hover { border-color: color-mix(in srgb, var(--b9-red) 60%, var(--b9-line)); }
.page-header-photo { min-height: 0; padding-block: clamp(34px, 5vw, 62px); color: var(--b9-ink); background: var(--b9-panel); border-bottom: 1px solid var(--b9-line); }
.page-header-photo h1, html[data-theme] .page-header-photo .container h1, html[data-theme] .page-header-photo .narrow h1 { max-width: 17ch; color: var(--b9-ink) !important; font-family: var(--b9-type-editorial); font-size: clamp(2.4rem, 5vw, 4.25rem); font-weight: 600; line-height: 1.04; letter-spacing: -.025em; }
.page-header-photo .lead, html[data-theme] .page-header-photo .container .lead, html[data-theme] .page-header-photo .narrow .lead { max-width: 68ch; color: var(--b9-muted) !important; font-size: 1.05rem; line-height: 1.6; }
.page-header-photo .notice-warning { color: var(--b9-muted); }
/* The offer calculator turns small-print terms into a reproducible, inspectable estimate. */
.bonus-lab { padding-block: clamp(30px, 5vw, 64px); color: var(--b9-ink); background: var(--b9-panel); border-block: 1px solid var(--b9-line); }
.bonus-lab-layout { display: grid; grid-template-columns: minmax(210px, .72fr) minmax(0, 1.55fr); column-gap: clamp(28px, 5vw, 74px); row-gap: 20px; align-items: start; }
.bonus-lab-intro .eyebrow { color: var(--b9-yellow); }
.bonus-lab-intro h2 { max-width: 14ch; margin: 0 0 12px; font-family: var(--b9-type-editorial); font-size: clamp(1.85rem, 3vw, 2.7rem); line-height: 1.06; letter-spacing: -.025em; }
.bonus-lab-intro > p:not(.eyebrow) { max-width: 45ch; color: var(--b9-muted); line-height: 1.6; }
.bonus-lab-article-link { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin-top: 12px; color: var(--b9-yellow); font-size: .85rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.bonus-lab-article-link .ui-icon { width: 16px; height: 16px; }
.bonus-lab-workbench { display: grid; grid-template-columns: minmax(0,1fr) minmax(245px,.82fr); border: 1px solid var(--b9-line); background: var(--b9-paper); }
.bonus-lab-inputs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; padding: clamp(16px,2.2vw,26px); }
.bonus-lab-inputs label { display: grid; align-content: start; gap: 7px; min-width: 0; color: var(--b9-muted); font-size: .76rem; font-weight: 700; line-height: 1.35; }
.bonus-lab-inputs input, .bonus-lab-inputs select { width: 100%; min-width: 0; min-height: 46px; padding: 9px 11px; color: var(--b9-ink); background: var(--b9-panel-raised); border: 1px solid var(--b9-line); border-radius: 2px; font: inherit; font-size: 1rem; }
.bonus-lab-inputs input:focus-visible, .bonus-lab-inputs select:focus-visible { border-color: var(--b9-yellow); outline-color: var(--b9-yellow); }
.bonus-lab-contribution { grid-column: 1 / -1; }
.bonus-lab-contribution small { color: var(--b9-muted); font-size: .72rem; font-weight: 450; }
.bonus-lab-results { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(18px,2.5vw,30px); color: var(--b9-ink); background: var(--b9-panel-raised); border-left: 1px solid var(--b9-line); }
.bonus-lab-result-label { margin: 0 0 8px; color: var(--b9-muted); font-size: .74rem; font-weight: 700; line-height: 1.4; }
.bonus-lab-result-number { display: block; color: var(--b9-yellow); font-size: clamp(2rem,3.5vw,3.3rem); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.045em; line-height: 1; overflow-wrap: anywhere; }
.bonus-lab-results dl { display: grid; gap: 0; margin: 18px 0; border-block: 1px solid var(--b9-line); }
.bonus-lab-results dl > div { display: flex; justify-content: space-between; gap: 12px; padding-block: 8px; }
.bonus-lab-results dl > div + div { border-top: 1px solid var(--b9-line); }
.bonus-lab-results dt { color: var(--b9-muted); font-size: .77rem; }
.bonus-lab-results dd { margin: 0; font-size: .82rem; font-weight: 750; font-variant-numeric: tabular-nums; text-align: right; }
.bonus-lab-formula-label { margin: 0 0 4px; color: var(--b9-muted); font-size: .67rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.bonus-lab-formula { color: var(--b9-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .81rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.bonus-lab-results > small { margin-top: 10px; color: var(--b9-muted); font-size: .7rem; line-height: 1.45; }
.bonus-lab-disclaimer { grid-column: 2; margin: 0; padding-left: 11px; color: var(--b9-muted); border-left: 2px solid var(--b9-red); font-size: .73rem; line-height: 1.5; }
.bonus-hotspot { min-height: 58px; border-radius: 2px; }
.bonus-hotspot-mark { border-radius: 2px; }
@media (max-width: 1000px) {
  .reference-hero-grid { grid-template-columns: minmax(0,1.1fr) minmax(300px,.9fr); gap: 24px; }
  .bonus-lab-layout { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .bonus-lab-intro h2 { max-width: 24ch; }
  .bonus-lab-intro > p:not(.eyebrow) { max-width: 70ch; }
  .bonus-lab-disclaimer { grid-column: 1; }
}
@media (max-width: 760px) {
  :root { --b9-gutter: 16px; }
  html { scroll-padding-top: 64px; }
  .site-header, .header-inner { min-height: 60px; }
  .header-inner { gap: 7px; }
  .header-tools { gap: 4px; }
  .header-tools .icon-button { display: none; }
  .header-tools .lang-switch { margin-left: 0; }
  .menu-toggle { flex: 0 0 44px; width: 44px; min-width: 44px; height: 44px; margin-left: auto; }
  .mobile-panel { inset: 60px 0 auto; max-height: calc(100dvh - 60px); padding: 12px 16px max(18px, env(safe-area-inset-bottom)); overflow-y: auto; }
  .mobile-panel a { min-height: 50px; gap: 12px; padding: 10px 4px; }
  .mobile-panel .select-control { min-height: 48px; font-size: 16px; }
  .canada-flag-badge { display: none; }
  .reference-hero-grid { width: calc(100% - 32px); grid-template-columns: minmax(0,1fr); gap: 28px; padding-block: 38px 28px; }
  .reference-hero-copy .reference-kicker { margin-bottom: 16px; font-size: .66rem; letter-spacing: .075em; }
  .reference-hero h1 { max-width: 12ch; margin-bottom: 15px; font-size: clamp(2.55rem, 11.1vw, 3.75rem); line-height: .98; }
  .reference-hero-copy > p:not(.reference-kicker) { font-size: 1rem; line-height: 1.55; }
  .reference-hero .hero-search { display: grid; grid-template-columns: minmax(0,1fr); gap: 7px; margin-top: 20px; }
  .reference-hero .hero-search input, .reference-hero .hero-search .btn { width: 100%; min-width: 0; min-height: 48px; }
  .reference-hero .intent-links { gap: 6px; }
  .reference-hero .intent-links a { min-height: 38px; }
  .reference-hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
  .reference-hero .hero-actions .btn { width: 100%; min-height: 48px; }
  .reference-top-board { max-width: none; }
  .top-board-head { padding: 13px 12px; }
  .top-board-row { grid-template-columns: 20px 48px minmax(0,1fr) auto; min-height: 70px; gap: 8px; padding: 10px 12px; }
  .top-board-logo { width: 46px; height: 36px; }
  .top-board-row strong { overflow-wrap: anywhere; }
  .top-board-row small { max-width: 26ch; }
  .market-ribbon { overflow: hidden; }
  .market-ribbon .container { width: 100%; min-height: 46px; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-inline: 16px; }
  .market-ribbon .container::-webkit-scrollbar { display: none; }
  .market-ribbon .container > span { position: sticky; left: 0; z-index: 1; min-height: 46px; display: inline-flex; align-items: center; margin-right: 6px; padding-right: 8px; background: var(--b9-panel); }
  .market-ribbon a { min-height: 46px; padding-inline: 10px; }
  .page-header-photo { padding-block: 28px; }
  .page-header-photo h1, html[data-theme] .page-header-photo .container h1, html[data-theme] .page-header-photo .narrow h1 { max-width: 18ch; font-size: clamp(2rem, 9vw, 2.8rem); line-height: 1.03; }
  .page-header-photo .lead, html[data-theme] .page-header-photo .container .lead, html[data-theme] .page-header-photo .narrow .lead { font-size: 1rem; }
  .section-heading { align-items: start; }
  .section-heading .section-link { min-height: 44px; }
  .bonus-lab { padding-block: 28px; }
  .bonus-lab-workbench { grid-template-columns: minmax(0,1fr); }
  .bonus-lab-inputs { gap: 12px; padding: 14px; }
  .bonus-lab-results { border-top: 1px solid var(--b9-line); border-left: 0; }
  .bonus-lab-result-number { font-size: clamp(2.15rem, 10vw, 3rem); }
  .bonus-lab-disclaimer { grid-column: 1; }
  body:not([data-route="bonuses"]) #main-content { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .bonus-hotspot { right: 0; bottom: 0; left: 0; width: 100%; min-height: calc(60px + env(safe-area-inset-bottom)); grid-template-columns: 40px minmax(0,1fr) 22px; gap: 10px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--b9-panel); border-inline: 0; border-bottom: 0; border-radius: 0; box-shadow: 0 -1px 0 var(--b9-line); backdrop-filter: none; }
  .bonus-hotspot-mark { width: 40px; height: 40px; }
  .cookie-banner ~ .bonus-hotspot { display: none; }
  .grid-2, .grid-3, .comparison-grid, .province-market-grid { grid-template-columns: minmax(0,1fr) !important; }
  .casino-card .card-actions { display: grid; grid-template-columns: 1fr; }
  .casino-card .card-actions .btn { width: 100%; min-height: 46px; }
  .comparison-scroll, .responsive-table { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; }
  .comparison-table, .responsive-table table { min-width: 680px; }
  .site-footer .footer-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 420px) {
  .brand-word { font-size: 1.05rem; }
  .saved-header-button { min-width: 38px; padding-inline: 7px; }
  .header-inner { gap: 5px; }
  .reference-hero-grid { gap: 23px; padding-top: 30px; }
  .reference-hero h1 { font-size: clamp(2.35rem, 10.8vw, 2.9rem); }
  .bonus-lab-inputs { grid-template-columns: minmax(0,1fr); }
  .bonus-lab-contribution { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* Bastion field tool: put a real, interactive differentiator into the homepage path. */
.bonus-lab-featured { padding-block: clamp(38px,5vw,68px); background: var(--b9-bg); border-block: 0; }
.bonus-lab-featured .bonus-lab-layout { grid-template-columns: minmax(220px,.68fr) minmax(0,1.32fr); gap: clamp(24px,4vw,58px); }
.bonus-lab-featured .bonus-lab-intro { position: relative; padding-top: 14px; border-top: 3px solid var(--b9-red); }
.bonus-lab-featured .bonus-lab-intro h2 { max-width: 13ch; font-family: var(--b9-type-editorial); font-size: clamp(2rem,3.2vw,3.4rem); letter-spacing: -.025em; line-height: 1.04; }
.bonus-lab-featured .bonus-lab-workbench { border: 1px solid var(--b9-line); background: var(--b9-panel); }
.bonus-lab-featured .bonus-lab-results { background: var(--b9-paper); }
.bonus-lab-featured .bonus-lab-disclaimer { max-width: 72ch; }
.hero-terms-link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 2px; color: var(--b9-ink); font-size: .82rem; font-weight: 750; text-decoration-color: var(--b9-red); text-underline-offset: 4px; }
.hero-terms-link .ui-icon:first-child { width: 17px; color: var(--b9-red); }
.hero-terms-link .ui-icon:last-child { width: 15px; }
.mobile-utility-rail { display: none; }
@media (max-width:760px) {
  .bonus-lab-featured { padding-block: 30px; }
  .bonus-lab-featured .bonus-lab-layout { gap: 16px; }
  .bonus-lab-featured .bonus-lab-intro { padding-top: 11px; }
  .bonus-lab-featured .bonus-lab-intro h2 { max-width: 18ch; font-size: clamp(1.9rem,8vw,2.6rem); }
  .bonus-lab-featured .bonus-lab-results { padding: 18px 15px; }
  body #main-content, body:not([data-route="bonuses"]) #main-content { padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
  .bonus-hotspot { display: none !important; }
  .mobile-utility-rail { position: fixed; z-index: 70; inset: auto 0 0; min-height: calc(62px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 5px max(8px,env(safe-area-inset-left)) calc(5px + env(safe-area-inset-bottom)); background: var(--b9-panel); border-top: 1px solid var(--b9-line); }
  .mobile-utility-rail a { min-width: 0; min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--b9-muted); font-size: .66rem; font-weight: 700; line-height: 1; text-decoration: none; }
  .mobile-utility-rail .ui-icon { width: 19px; height: 19px; }
  .mobile-utility-rail a[aria-current="page"] { color: var(--b9-red); }
  .mobile-utility-rail a:focus-visible { outline-offset: -2px; }
  body:has(.mobile-panel.is-open) .mobile-utility-rail, body:has(.saved-sheet:not([hidden])) .mobile-utility-rail, body:has(.compare-sheet:not([hidden])) .mobile-utility-rail { display: none; }
}

/* Let the editorial headline read as one thought instead of a narrow stacked slogan. */
.reference-hero h1 { max-width: 17ch; }
@media (max-width:760px) { .reference-hero h1 { max-width: 18ch; } }

/* Bastion 2.8.17 — evidence links and compact decision cards. */
#app .operator-source-link {
  width: fit-content;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  color: var(--b9-red);
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#app .operator-source-link .ui-icon { width: 15px; height: 15px; }
#app .operator-score-breakdown { flex-basis: 100%; min-width: 0; margin-top: 7px; text-align: left; }
#app .operator-score-breakdown summary {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--b9-muted);
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
  list-style: none;
  text-decoration: underline;
  text-decoration-color: var(--b9-line);
  text-underline-offset: 3px;
}
#app .operator-score-breakdown summary::-webkit-details-marker { display: none; }
#app .operator-score-breakdown[open] summary { color: var(--b9-ink); }
#app .operator-score-breakdown dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  margin: 4px 0 7px;
  padding: 7px 9px;
  border-left: 2px solid var(--b9-red);
  background: var(--b9-panel);
  text-align: left;
}
#app .operator-score-breakdown dl > div { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--b9-line); }
#app .operator-score-breakdown dt { color: var(--b9-muted); font-size: .7rem; }
#app .operator-score-breakdown dd { margin: 0; color: var(--b9-ink); font-size: .72rem; font-variant-numeric: tabular-nums; font-weight: 800; }
#app .operator-score-breakdown > a { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 750; }
#app .operator-score-breakdown > a .ui-icon { width: 14px; height: 14px; }
#app .btn-bonus-hot {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
  box-shadow: inset 3px 0 0 var(--b9-red);
}
#app .btn-bonus-hot:hover { background: var(--b9-paper); border-color: var(--b9-red); transform: none; }
#app .btn-bonus-hot .bonus-button-gift { color: var(--b9-red); background: transparent; }

@media (max-width: 1240px) {
  #app .header-tools .account-header-button,
  #app .header-tools .theme-toggle,
  #app .header-tools [data-search-open] { display: none; }
}
@media (max-width: 760px) {
  #app .header-inner { gap: 5px; }
  #app .brand { max-width: min(44vw, 190px); }
  #app .header-tools { gap: 4px; }
  #app .header-tools .province-mini { display: none; }
  #app .header-tools .lang-switch { order: -1; }
  #app .header-tools .saved-header-button { width: 42px; min-width: 42px; min-height: 44px; justify-content: center; padding-inline: 4px; }
  #app .reference-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 23px; padding-block: 32px 28px; }
  #app .reference-hero-copy { width: 100%; min-width: 0; }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 14px; }
  #app .reference-hero h1 { max-width: 16ch; margin-bottom: 13px; font-size: clamp(2.35rem, 10.1vw, 3.65rem); line-height: 1; letter-spacing: -.045em; }
  #app .reference-hero-copy > p:not(.reference-kicker) { max-width: 54ch; font-size: 1rem; line-height: 1.55; }
  #app .reference-hero .hero-search { grid-template-columns: minmax(0, 1fr) auto; gap: 0; }
  #app .reference-hero .hero-search input { min-width: 0; min-height: 50px; }
  #app .reference-hero .hero-search .btn { width: auto; min-width: 86px; min-height: 50px; }
  #app .reference-hero .intent-links { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; padding: 0 0 5px; overscroll-behavior-inline: contain; scrollbar-width: thin; }
  #app .reference-hero .intent-links a { flex: 0 0 auto; min-height: 40px; white-space: nowrap; }
  #app .reference-hero .hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #app .reference-hero .hero-actions .btn { min-width: 0; min-height: 48px; padding-inline: 10px; font-size: .84rem; line-height: 1.2; }
  #app .reference-hero .hero-terms-link { max-width: 100%; align-items: flex-start; margin-top: 5px; line-height: 1.4; }
  #app .reference-top-board { width: 100%; max-width: none; }
  #app .top-board-head { gap: 8px; }
  #app .top-board-head .select-control { min-width: 0; max-width: 48%; min-height: 44px; }
  #app .top-board-row { min-width: 0; grid-template-columns: 24px 46px minmax(0, 1fr) auto; gap: 8px; padding-inline: 12px; }
  #app .top-board-row > div { min-width: 0; }
  #app .top-board-row strong { overflow-wrap: anywhere; }
  #app .top-board-row small { max-width: 100%; overflow-wrap: anywhere; }
  #app .reference-ranking-card.casino-card > .operator-offer-cell > small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  #app .operator-source-link { min-height: 44px; }
  #app .operator-score-breakdown summary { min-height: 44px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell .btn,
  #app .reference-ranking-card.casino-card > .operator-action-cell .text-action,
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button { min-height: 48px; }
  #app .bonus-lab-featured .bonus-lab-inputs input,
  #app .bonus-lab-featured .bonus-lab-inputs select { min-height: 48px; }
  #app .comparison-scroll, #app .responsive-table, #app .table-scroll { overscroll-behavior-inline: contain; -webkit-overflow-scrolling: touch; }
  #app .mobile-utility-rail a { min-height: 52px; font-size: .7rem; }
}
@media (max-width: 420px) {
  #app .reference-hero-grid { gap: 19px; padding-top: 27px; }
  #app .reference-hero h1 { max-width: 15ch; font-size: clamp(2.1rem, 9.8vw, 2.75rem); }
  #app .reference-hero .hero-search { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  #app .reference-hero .hero-search .btn { width: 100%; }
  #app .reference-hero .hero-actions { grid-template-columns: minmax(0, 1fr); }
  #app .reference-hero .hero-actions .btn { width: 100%; }
  #app .reference-top-board .top-board-row { grid-template-columns: 20px 40px minmax(0, 1fr) auto; gap: 6px; padding-inline: 9px; }
  #app .reference-top-board .top-board-logo { width: 40px; height: 34px; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl { grid-template-columns: minmax(0, 1fr); }
  #app .operator-score-breakdown dl { grid-template-columns: minmax(0, 1fr); }
}

/* Phone comparison is a sequence of operator records, not a squeezed desktop table. */
@media (max-width: 640px) {
  #app .comparison-shell { overflow: hidden; }
  #app .comparison-scroll { overflow: visible; }
  #app .comparison-table { width: 100%; min-width: 0 !important; display: block; border-collapse: separate; }
  #app .comparison-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  #app .comparison-table tbody { display: grid; gap: 9px; }
  #app .comparison-table tbody tr {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 5px 11px;
    border: 1px solid var(--b9-line);
    background: var(--b9-panel);
  }
  #app .comparison-table tbody td {
    min-width: 0;
    display: block;
    padding: 9px 4px;
    border: 0;
    border-bottom: 1px solid var(--b9-line);
    overflow-wrap: anywhere;
  }
  #app .comparison-table tbody td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--b9-muted);
    content: attr(data-label);
    font-size: .65rem;
    font-weight: 700;
    line-height: 1.25;
  }
  #app .comparison-table tbody td:first-child { grid-column: 1 / -1; }
  #app .comparison-table tbody td:nth-child(2) { grid-column: 1; }
  #app .comparison-table tbody td:nth-child(3) { grid-column: 1 / -1; }
  #app .comparison-table tbody td:nth-child(4) { grid-column: 2; }
  #app .comparison-table tbody td:nth-child(5) { grid-column: 1; border-bottom: 0; }
  #app .comparison-table tbody td:nth-child(6) { grid-column: 2; justify-self: end; align-self: end; border-bottom: 0; }
  #app .comparison-brand { max-width: 100%; }
  #app .comparison-brand > span { min-width: 0; }
  #app .comparison-brand strong { overflow-wrap: anywhere; }
  #app .comparison-table .mini-tags { display: flex; flex-wrap: wrap; gap: 5px; }
  #app .comparison-table .mini-tags span { max-width: 100%; overflow-wrap: anywhere; }
  #app .comparison-table .icon-link { width: 44px; height: 44px; }
}


/* Bastion 2.8.19 — a sourced hero, an editorial offer register, and phone-first records. */
#app .reference-hero {
  overflow: hidden;
  color: #f4f2ed;
  background: #101316;
  border-bottom-color: #343a3e;
}
#app .reference-hero-grid { position: relative; z-index: 1; }
#app .reference-hero-copy .reference-kicker { color: #ef777a; }
#app .reference-hero h1 { color: #f4f2ed !important; }
#app .reference-hero-copy > p:not(.reference-kicker),
#app .reference-hero-copy > small { color: #d0d1cf !important; }
#app .reference-hero .intent-links a { color: #e0dfdb; border-color: rgba(255,255,255,.28); }
#app .reference-hero .intent-links a:hover { color: #fff; background: rgba(255,255,255,.08); border-color: #ef777a; }
#app .reference-hero .hero-terms-link { color: #f4f2ed; }
#app .reference-hero .hero-search input { color: #f4f2ed; background: #181c20; border-color: rgba(255,255,255,.32); }
#app .reference-hero .hero-search input::placeholder { color: #aeb3b5; }
#app .reference-hero .reference-top-board {
  color: #f4f2ed;
  background: rgba(14,17,19,.94);
  border-color: rgba(255,255,255,.2);
  border-top-color: #d92d35;
}
#app .reference-hero .top-board-head,
#app .reference-hero .top-board-row { border-color: rgba(255,255,255,.16); }
#app .reference-hero .top-board-head span,
#app .reference-hero .top-board-row small { color: #bfc3c2; }
#app .reference-hero .top-board-row b { color: #f0c24b; }
#app .reference-hero .top-board-all { color: #fff; background: #b71f2b; }
#app .reference-hero .top-board-all:hover { background: #d92d35; }
#app .saved-header-button { min-width: 88px; justify-content: center; gap: 8px; padding-inline: 10px; color: var(--b9-ink); }
#app .saved-header-button > span { display: inline !important; }
#app .saved-header-button > b { min-width: 22px; height: 22px; display: grid; place-items: center; padding-inline: 5px; color: #fff; background: var(--b9-red); border-radius: 2px; font-size: .7rem; }
#app .bonus-hotspot {
  box-sizing: border-box;
  width: min(248px, calc(100vw - 28px));
  min-width: 205px;
  min-height: 58px;
  grid-template-columns: 34px minmax(0,1fr) auto;
  gap: 10px;
  padding: 10px 13px;
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  box-shadow: none;
  backdrop-filter: none;
}
#app .bonus-hotspot-mark { width: 32px; height: 32px; display: grid; place-items: center; color: var(--b9-ink); background: var(--b9-panel-raised); border: 1px solid var(--b9-line); font-family: var(--bastion-font-body); font-size: .83rem; font-weight: 900; letter-spacing: -.1em; }
#app .bonus-hotspot-mark > span { color: var(--b9-red); }
#app .bonus-hotspot-copy small { color: var(--b9-muted); }
#app .bonus-hotspot-copy strong { color: var(--b9-ink); }
#app .bonus-hotspot-arrow { color: var(--b9-red); }
#app .bonus-hotspot-tick { display: none; }
#app .bonus-hotspot:hover { background: var(--b9-panel-raised); box-shadow: none; }
#app .bonus-hotspot-copy small { font-size: .7rem; font-weight: 650; letter-spacing: 0; text-transform: none; }
#app .bonus-record-index { width: 30px; height: 30px; display: inline-grid; flex: 0 0 auto; place-items: center; color: #fff; background: #b71f2b; font: 800 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .bonus-card.bonus-card-hot { overflow: hidden; padding: 0; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); border-top: 3px solid var(--b9-red); border-radius: 2px; box-shadow: none; }
#app .bonus-record-head { display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 15px; align-items: center; padding: 20px 22px 17px; border-bottom: 1px solid var(--b9-line); }
#app .bonus-record-index { width: 52px; height: 58px; display: flex; flex-direction: column; justify-content: space-between; padding: 7px; color: var(--b9-muted); background: var(--b9-paper); border-left: 2px solid var(--b9-red); font: 750 .62rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; }
#app .bonus-record-index strong { color: var(--b9-ink); font-size: 1.12rem; }
#app .bonus-record-head > div:nth-child(2) { min-width: 0; }
#app .bonus-record-type { color: var(--b9-red); font-size: .68rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }
#app .bonus-record-head h3 { margin: 4px 0 3px; color: var(--b9-ink); font-family: var(--bastion-font-body); font-size: clamp(1.08rem,2vw,1.34rem); line-height: 1.2; overflow-wrap: anywhere; }
#app .bonus-record-head p { margin: 0; color: var(--b9-muted); font-size: .83rem; }
#app .bonus-record-head time { display: grid; gap: 4px; color: var(--b9-muted); font-size: .68rem; text-align: right; }
#app .bonus-record-head time strong { color: var(--b9-ink); font-size: .77rem; font-weight: 700; white-space: nowrap; }
#app .bonus-record-summary { max-width: 76ch; margin: 0; padding: 19px 22px; color: var(--b9-ink); font-size: .96rem; line-height: 1.62; }
#app .bonus-source-conflict { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px 20px; align-items: center; margin: 0 22px 18px; padding: 13px 15px; background: var(--b9-paper); border: 1px solid var(--b9-line); border-left: 3px solid var(--b9-red); }
#app .bonus-source-conflict p { max-width: 76ch; margin: 0; color: var(--b9-ink); font-size: .85rem; line-height: 1.5; }
#app .bonus-source-conflict a { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--b9-ink); font-size: .78rem; font-weight: 750; text-underline-offset: 4px; }
#app .bonus-source-conflict a span { color: var(--b9-red); }
#app .offer-record-source-conflict { margin-top: 13px; padding: 12px 13px; background: var(--b9-paper); border: 1px solid var(--b9-line); border-left: 3px solid var(--b9-red); }
#app .offer-record-source-conflict p { max-width: 68ch; margin: 0; color: var(--b9-ink); font-size: .82rem; line-height: 1.5; }
#app .offer-record-source-conflict a { min-height: 44px; display: inline-flex; align-items: center; gap: 5px; color: var(--b9-ink); font-size: .76rem; font-weight: 750; text-underline-offset: 4px; }
#app .offer-record-source-conflict a span { color: var(--b9-red); }
#app .bonus-term-sheet { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 0 22px; border-top: 1px solid var(--b9-line); border-left: 1px solid var(--b9-line); }
#app .bonus-term-sheet > div { min-width: 0; display: grid; grid-template-columns: minmax(95px,.42fr) minmax(0,1fr); gap: 12px; padding: 13px 14px; background: var(--b9-paper); border-right: 1px solid var(--b9-line); border-bottom: 1px solid var(--b9-line); }
#app .bonus-term-sheet dt { color: var(--b9-muted); font-size: .74rem; font-weight: 700; line-height: 1.42; }
#app .bonus-term-sheet dd { min-width: 0; margin: 0; color: var(--b9-ink); font-size: .84rem; font-weight: 650; line-height: 1.45; overflow-wrap: anywhere; }
#app .bonus-record-actions { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; padding: 16px 22px 8px; }
#app .bonus-record-actions .btn { min-height: 48px; border-radius: 2px; }
#app .bonus-review-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--b9-ink); font-size: .83rem; font-weight: 700; text-underline-offset: 4px; }
#app .bonus-review-link span { color: var(--b9-red); }
#app .bonus-source-pending { color: var(--b9-muted); font-size: .83rem; }
#app .bonus-card .bonus-responsible-note { margin: 7px 22px 18px; color: var(--b9-muted); }
#app .operator-score-breakdown { width: 100%; flex-basis: auto; margin: 2px 0 0; }
#app .operator-action-cell > .operator-score-breakdown { align-self: start; }
#app .operator-score-breakdown dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
#app .comparison-table .mini-tags span { color: var(--b9-ink); background: var(--b9-panel-raised); border: 1px solid var(--b9-line); }
#app .comparison-table .score-pill { color: var(--b9-ink); background: var(--b9-panel-raised); border: 1px solid var(--b9-line); }
#app .comparison-table .score-pill strong { color: var(--b9-yellow); }
#app .comparison-table .icon-link { width: 44px; height: 44px; color: var(--b9-red); background: var(--b9-panel-raised); border: 1px solid var(--b9-line); }
#app .comparison-table .plain-status { color: var(--b9-ink); }
html[data-theme="light"] #app .reference-hero .intent-links a { color: var(--b9-ink); border-color: var(--b9-line); }
html[data-theme="light"] #app .reference-hero .reference-top-board { color: var(--b9-ink); background: rgba(255,255,255,.96); border-color: var(--b9-line); border-top-color: var(--b9-red); }
html[data-theme="light"] #app .reference-hero .top-board-head span,
html[data-theme="light"] #app .reference-hero .top-board-row small { color: var(--b9-muted); }
html[data-theme="light"] #app .reference-hero .top-board-all { color: #fff; }
@media (max-width: 760px) {
  #app .reference-hero-grid { width: calc(100% - max(32px, env(safe-area-inset-left) + env(safe-area-inset-right))); grid-template-columns: minmax(0,1fr); gap: 20px; padding-block: 30px 22px; }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 13px; font-size: .66rem; letter-spacing: .075em; line-height: 1.5; }
  #app .reference-hero h1 { max-width: 16ch; margin-bottom: 13px; font-size: clamp(2.55rem,11vw,3.45rem); line-height: .96; }
  #app .reference-hero-copy > p:not(.reference-kicker) { max-width: 54ch; font-size: 1rem; line-height: 1.52; }
  #app .reference-hero .hero-search { grid-template-columns: minmax(0,1fr); gap: 7px; margin-top: 17px; }
  #app .reference-hero .hero-search input, #app .reference-hero .hero-search .btn { width: 100%; min-height: 48px; }
  #app .reference-hero .intent-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 12px; margin-block: 12px; overflow: visible; border-top: 1px solid rgba(255,255,255,.22); }
  #app .reference-hero .intent-links a { min-width: 0; min-height: 44px; display: flex; align-items: center; padding: 7px 0; white-space: normal; border: 0; border-bottom: 1px solid rgba(255,255,255,.16); border-radius: 0; line-height: 1.3; }
  #app .reference-hero .hero-actions { grid-template-columns: minmax(0,1fr); gap: 8px; margin-block: 13px 10px; }
  #app .reference-hero .hero-actions .btn { min-height: 48px; justify-content: space-between; padding-inline: 12px; }
  #app .reference-hero .hero-terms-link { min-height: 44px; line-height: 1.4; }
  #app .reference-hero .reference-top-board { width: 100%; }
  #app .top-board-head { min-height: 62px; padding: 11px 12px; }
  #app .top-board-row { min-height: 68px; grid-template-columns: 22px 46px minmax(0,1fr) auto; gap: 8px; padding: 9px 11px; }
  #app .top-board-logo { width: 46px; height: 37px; }
  #app .top-board-row > div { min-width: 0; }
  #app .top-board-row strong { font-size: .84rem; }
  #app .top-board-row small { max-width: 100%; overflow-wrap: anywhere; font-size: .68rem; }
  #app .saved-header-button { width: 44px; min-width: 44px; min-height: 44px; padding: 0; }
  #app .saved-header-button > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
  #app .bonus-hotspot { display: none; }
  #app .reference-ranking-card.casino-card > .operator-action-cell > .operator-score-breakdown { grid-column: 1 / -1; }
  #app .reference-ranking-card.casino-card > .operator-action-cell > .operator-score-breakdown dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .bonus-record-head { grid-template-columns: 42px minmax(0,1fr); gap: 10px; padding: 15px; }
  #app .bonus-record-index { width: 40px; height: 50px; }
  #app .bonus-record-head time { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 6px; text-align: left; }
  #app .bonus-record-summary { padding: 14px 15px; font-size: .95rem; }
  #app .bonus-source-conflict { grid-template-columns: minmax(0,1fr); gap: 4px; margin: 0 15px 14px; padding: 12px; }
  #app .bonus-source-conflict a { width: fit-content; }
  #app .bonus-term-sheet { grid-template-columns: minmax(0,1fr); margin-inline: 15px; }
  #app .bonus-term-sheet > div { grid-template-columns: minmax(105px,.38fr) minmax(0,1fr); padding: 11px; }
  #app .bonus-record-actions { align-items: stretch; flex-direction: column; gap: 4px; padding: 13px 15px 6px; }
  #app .bonus-record-actions .btn, #app .bonus-review-link { width: 100%; min-height: 48px; }
  #app .bonus-card .bonus-responsible-note { margin: 7px 15px 15px; }
  #app .comparison-table tbody td:first-child { grid-column: 1 / -1; grid-row: 1; }
  #app .comparison-table tbody td:nth-child(2) { grid-column: 1; grid-row: 2; }
  #app .comparison-table tbody td:nth-child(4) { grid-column: 2; grid-row: 2; }
  #app .comparison-table tbody td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  #app .comparison-table tbody td:nth-child(5) { grid-column: 1; grid-row: 4; }
  #app .comparison-table tbody td:nth-child(6) { grid-column: 2; grid-row: 4; }
  #app .comparison-table tbody td::before { color: var(--b9-muted); font-size: .7rem; }
  #app .comparison-table .mini-tags span { color: var(--b9-ink); background: var(--b9-panel-raised); border-color: var(--b9-line); }
  #app .comparison-table .icon-link { min-width: 44px; min-height: 44px; }
  #app .mobile-utility-rail { min-height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: max(6px,env(safe-area-inset-bottom)); }
  #app .mobile-utility-rail a { min-height: 48px; font-size: .72rem; }
  #app main { padding-bottom: max(68px,calc(64px + env(safe-area-inset-bottom))); }
}
@media (max-width: 420px) {
  #app .reference-hero-grid { width: calc(100% - 28px); gap: 18px; padding-top: 25px; }
  #app .reference-hero h1 { max-width: 15ch; font-size: clamp(2.3rem,10.5vw,2.7rem); }
  #app .reference-hero .intent-links { gap: 0 9px; }
  #app .reference-hero .intent-links a { font-size: .77rem; }
  #app .top-board-row { grid-template-columns: 19px 40px minmax(0,1fr) auto; gap: 6px; padding-inline: 8px; }
  #app .top-board-logo { width: 40px; height: 34px; }
  #app .top-board-row b { font-size: .83rem; }
  #app .comparison-table tbody tr { grid-template-columns: minmax(0,1fr) minmax(0,1fr); padding-inline: 8px; }
  #app .comparison-table tbody td { padding-inline: 3px; }
  #app .operator-score-breakdown dl { grid-template-columns: minmax(0,1fr); }
  #app .bonus-term-sheet > div { grid-template-columns: minmax(88px,.38fr) minmax(0,1fr); gap: 8px; padding-inline: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .bonus-hotspot, #app .bonus-hotspot:hover { transition: none; transform: none; }
}


/* Bastion 2.8.23 — restore contrast in dark photographic listing notices. */
#app .page-header-photo .listing-coverage-notice { color: #e4e3df; border-color: rgba(244,242,237,.4); }
#app .page-header-photo .listing-coverage-notice p { color: #d0d2d0; }
#app .page-header-photo .listing-coverage-notice a { color: #f4c85d; }

/* Bastion 2.8.24 — make the market directory the product, not a decorative shortlist. */
#app .reference-hero h1 {
  max-width: 16ch;
  font-family: var(--b9-type-editorial);
  font-size: clamp(2.8rem, 5.2vw, 5rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .97;
}
#app .reference-hero .intent-links { display: none; }
#app .home-coverage-board {
  overflow: hidden;
  border-top: 3px solid var(--b9-red);
}
#app .home-coverage-head {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px 15px;
}
#app .home-coverage-head > div { min-width: 0; display: grid; gap: 5px; }
#app .home-coverage-head > div > span {
  color: var(--b9-muted);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
}
#app .home-coverage-head > div > strong { color: var(--b9-ink); font-size: 1rem; }
#app .home-coverage-head .select-control { width: auto; min-width: 116px; max-width: 145px; }
#app .home-coverage-metrics {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-block: 1px solid var(--b9-line);
}
#app .home-coverage-metrics > div {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 18px 15px;
}
#app .home-coverage-metrics > div + div { border-left: 1px solid var(--b9-line); }
#app .home-coverage-metrics strong {
  color: var(--b9-ink);
  font-size: clamp(1.7rem, 3.2vw, 2.45rem);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#app .home-coverage-metrics span { color: var(--b9-muted); font-size: .72rem; line-height: 1.3; }
#app .home-coverage-note {
  margin: 0;
  padding: 13px 18px;
  color: var(--b9-muted);
  font-size: .76rem;
  line-height: 1.5;
}
#app .home-coverage-board .top-board-all { min-height: 48px; justify-content: space-between; }
#app .home-offer-link {
  width: fit-content;
  max-width: 100%;
  min-height: 52px;
  display: grid;
  grid-template-columns: 36px minmax(0,1fr) 18px;
  gap: 10px;
  align-items: center;
  margin-top: 13px;
  padding: 6px 10px 6px 0;
  color: #f4f2ed;
  border-top: 1px solid rgba(244,242,237,.25);
  border-bottom: 1px solid rgba(244,242,237,.25);
  text-decoration: none;
}
#app .home-offer-number {
  min-height: 34px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--b9-red);
  font: 800 .74rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#app .home-offer-link > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
#app .home-offer-link small { color: #e27a7d; font-size: .61rem; font-weight: 800; letter-spacing: .08em; }
#app .home-offer-link strong { color: #f4f2ed; font-size: .78rem; line-height: 1.35; }
#app .home-offer-arrow { color: var(--b9-red); }
#app .home-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 16px; margin-top: 9px; }
#app .home-hero-foot small { color: #d0d1cf; font-size: .72rem; }
#app .home-hero-foot .hero-source-link { min-height: 36px; }
#app .mobile-utility-rail [data-offer-nav] > span { display: inline-flex; align-items: center; gap: 4px; }
#app .utility-offer-count {
  min-width: 15px;
  height: 15px;
  display: inline-grid;
  place-items: center;
  padding-inline: 3px;
  color: #fff;
  background: var(--b9-red);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 1380px) {
  #app .primary-nav { display: none !important; }
  #app .menu-toggle { display: grid !important; margin-left: auto; }
  #app .header-tools .account-header-button,
  #app .header-tools .theme-toggle,
  #app .header-tools [data-search-open] { display: none; }
  #app .mobile-panel.is-open { display: grid; }
}
@media (max-width: 760px) {
  #app .reference-hero-grid { gap: 17px; padding-block: 25px 20px; }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 11px; font-size: .62rem; letter-spacing: .055em; }
  #app .reference-hero h1 { max-width: 18ch; margin-bottom: 10px; font-size: clamp(2.05rem,9.3vw,3.15rem); line-height: .99; }
  #app .reference-hero-copy > p:not(.reference-kicker) { max-width: 46ch; font-size: .95rem; line-height: 1.48; }
  #app .reference-hero .hero-search { grid-template-columns: minmax(0,1fr) 86px; gap: 6px; margin-top: 13px; }
  #app .reference-hero .hero-search input,
  #app .reference-hero .hero-search .btn { min-height: 48px; }
  #app .reference-hero .hero-search .btn { width: 86px; min-width: 86px; }
  #app .reference-hero .hero-actions { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-block: 10px 0; }
  #app .reference-hero .hero-actions .btn { min-width: 0; min-height: 46px; justify-content: center; gap: 5px; padding: 7px 8px; font-size: .76rem; line-height: 1.2; }
  #app .home-offer-link { width: 100%; margin-top: 9px; }
  #app .home-hero-foot { gap: 4px 10px; margin-top: 5px; }
  #app .home-hero-foot small { font-size: .68rem; }
  #app .home-coverage-head { padding: 12px; }
  #app .home-coverage-head > div > span { max-width: 22ch; font-size: .56rem; }
  #app .home-coverage-head .select-control { min-width: 104px; max-width: 120px; min-height: 42px; padding-inline: 8px 25px; font-size: .78rem; }
  #app .home-coverage-metrics > div { gap: 4px; padding: 13px 10px; }
  #app .home-coverage-metrics strong { font-size: 1.65rem; }
  #app .home-coverage-metrics span { font-size: .66rem; }
  #app .home-coverage-note { padding: 10px 12px; font-size: .7rem; }
  #app .home-coverage-board .top-board-all { min-height: 46px; padding-inline: 12px; font-size: .82rem; }
}
@media (max-width: 360px) {
  #app .reference-hero .hero-search { grid-template-columns: minmax(0,1fr); gap: 6px; }
  #app .reference-hero .hero-search .btn { width: 100%; min-width: 0; }
  #app .reference-hero .hero-actions { grid-template-columns: minmax(0,1fr); }
  #app .reference-hero .hero-actions .btn { width: 100%; }
  #app .home-coverage-head { align-items: flex-start; flex-direction: column; }
  #app .home-coverage-head .select-control { width: 100%; max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-offer-arrow,
  #app .home-offer-link:hover .home-offer-arrow { transform: none; transition: none; }
}

/* Bastion 2.8.25 — keep the market facts scannable on small screens. */
@media (max-width: 760px) {
  #app .official-registry-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-block: 13px;
  }
  #app .official-registry-stats > div {
    min-width: 0;
    display: grid;
    align-content: start;
    justify-items: start;
    gap: 5px;
    padding: 11px 9px;
  }
  #app .official-registry-stats > div + div {
    border-top: 0;
    border-left: 1px solid #3a4142;
  }
  #app .official-registry-stats strong {
    min-width: 0;
    font-size: clamp(1.3rem, 6vw, 1.65rem);
    line-height: 1;
  }
  #app .official-registry-stats span {
    font-size: clamp(.59rem, 2.7vw, .68rem);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }
}

/* Bastion 2.8.28 — final editorial direction and responsive navigation overrides. */
#app .reference-hero { min-height: 0; background: var(--b9-paper); }
#app .reference-hero-grid { grid-template-columns: minmax(0,1.12fr) minmax(320px,.88fr); gap: clamp(24px,4vw,60px); padding-block: clamp(40px,6vw,76px); }
#app .reference-hero-copy .reference-kicker { width: fit-content; margin-bottom: 18px; padding: 0 0 8px; color: var(--b9-muted); background: transparent; border: 0; border-bottom: 1px solid var(--b9-red); font-size: .68rem; letter-spacing: .12em; }
#app .reference-hero h1 { max-width: 14ch; margin-bottom: 17px; color: var(--b9-ink) !important; font-family: var(--b9-type-editorial); font-size: clamp(2.75rem,5vw,4.65rem); font-weight: 600; letter-spacing: -.025em; line-height: 1.02; text-transform: none; text-wrap: balance; }
#app .reference-hero-copy > p:not(.reference-kicker) { max-width: 58ch; color: var(--b9-muted) !important; font-size: clamp(.98rem,1.1vw,1.08rem); line-height: 1.6; }
#app .reference-hero .hero-search { margin-top: 20px; background: var(--b9-panel); border-color: var(--b9-line); border-radius: 2px; box-shadow: none; }
#app .reference-hero .hero-search input, #app .reference-hero .hero-search .btn { min-height: 50px; }
#app .reference-hero .hero-actions { align-items: center; gap: 15px; margin-block: 12px 8px; }
#app .reference-hero .hero-actions .btn { min-height: 46px; border-radius: 2px; }
#app .reference-hero .home-review-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--b9-ink); font-size: .82rem; font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 4px; }
#app .reference-hero .home-review-link:hover { color: var(--b9-red); }
#app .home-coverage-board { background: color-mix(in srgb,var(--b9-panel) 96%,transparent); border-radius: 0; box-shadow: none; backdrop-filter: none; }
#app .home-coverage-head { padding-inline: 15px; }
#app .home-coverage-metrics > div { padding-inline: 13px; }
#app .home-offer-link { border-color: var(--b9-line); }
#app .home-hero-foot { gap: 6px 13px; }
@media (max-width: 1240px) and (min-width: 981px) {
  #app .header-inner { gap: 9px; }
  #app .primary-nav { display: flex !important; flex: 0 1 auto; gap: 2px; margin-left: auto; }
  #app .primary-nav a { min-height: 40px; padding-inline: 4px; font-size: .68rem; }
  #app .menu-toggle { display: none !important; }
  #app .header-tools { gap: 5px; }
  #app .header-tools .account-header-button, #app .header-tools .theme-toggle, #app .header-tools [data-search-open] { display: none !important; }
  #app .saved-header-button { width: 43px; min-width: 43px; justify-content: center; padding-inline: 4px; }
  #app .saved-header-button > span { display: none; }
  #app .province-mini { width: 104px; min-width: 104px; padding-inline: 7px 20px; font-size: .72rem; }
  #app .lang-switch a { min-width: 32px; padding-inline: 5px; }
}
@media (max-width: 980px) {
  #app .primary-nav { display: none !important; }
  #app .menu-toggle { display: grid !important; margin-left: auto; }
  #app .header-tools .account-header-button, #app .header-tools .theme-toggle, #app .header-tools [data-search-open] { display: none !important; }
  #app .mobile-panel { inset-block-start: 68px; }
  #app .mobile-panel.is-open { display: grid !important; }
  #app .reference-hero-grid { grid-template-columns: minmax(0,1fr); gap: 24px; }
}
@media (max-width: 760px) {
  #app .reference-hero-grid { gap: 19px; padding-block: 26px 22px; }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 13px; font-size: .64rem; }
  #app .reference-hero h1 { max-width: 19ch; margin-bottom: 11px; font-size: clamp(2.12rem,8.8vw,2.8rem); line-height: 1.04; }
  #app .reference-hero-copy > p:not(.reference-kicker) { font-size: .96rem; line-height: 1.48; }
  #app .reference-hero .hero-search { margin-top: 14px; }
  #app .reference-hero .hero-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 2px; margin-top: 8px; }
  #app .reference-hero .hero-actions .btn { width: 100%; }
  #app .reference-hero .home-review-link { width: fit-content; min-height: 42px; }
  #app .home-offer-link { min-height: 48px; margin-top: 6px; }
  #app .home-hero-foot { align-items: flex-start; flex-direction: column; gap: 0; margin-top: 4px; }
  #app .home-coverage-metrics > div { padding-inline: 9px; }
  #app .home-coverage-metrics span { font-size: .64rem; }
}
@media (max-width: 380px) {
  #app .reference-hero-grid { gap: 17px; padding-top: 22px; }
  #app .reference-hero h1 { max-width: 17ch; font-size: clamp(2rem,8.5vw,2.3rem); }
  #app .reference-hero-copy > p:not(.reference-kicker) { font-size: .92rem; }
  #app .home-coverage-head { padding-inline: 10px; }
  #app .home-coverage-head .select-control { min-width: 98px; }
  #app .official-registry-stats > div { padding-inline: 6px; }
}
@media (prefers-reduced-motion: reduce) { #app .reference-hero-photo { animation: none !important; transform: none !important; } }
#app .bonus-hotspot-mark { color: var(--b9-yellow); background: var(--b9-panel-raised); border-color: var(--b9-line); }
#app .bonus-hotspot-mark .ui-icon { width: 22px; height: 22px; color: var(--b9-yellow); }

/* Bastion 2.8.29 — enforce the editorial hierarchy over legacy campaign styles. */
#app .reference-hero { background: var(--b9-paper) !important; }
#app .reference-hero h1 { max-width: 14ch; text-wrap: balance; text-transform: none; text-shadow: none; }
#app .reference-hero .hero-actions { display: flex !important; grid-template-columns: none !important; }
@media (max-width: 1380px) and (min-width: 981px) {
  #app .primary-nav { display: flex !important; flex: 0 1 auto; gap: 2px; margin-left: auto; }
  #app .primary-nav a { padding-inline: 4px; font-size: .68rem; }
  #app .menu-toggle { display: none !important; }
  #app .header-tools .account-header-button, #app .header-tools .theme-toggle, #app .header-tools [data-search-open] { display: none !important; }
}
@media (max-width: 980px) { #app .primary-nav { display: none !important; } #app .menu-toggle { display: grid !important; } }
@media (max-width: 760px) {
  #app .reference-hero h1 { max-width: 19ch !important; font-size: clamp(2.05rem,8.3vw,2.62rem) !important; line-height: 1.08 !important; }
  #app .reference-hero .hero-actions { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 2px !important; }
}
@media (prefers-reduced-motion: reduce) { #app .bonus-hotspot-mark .ui-icon { animation: none !important; } }

/* Casino category explorer: profile-backed discovery with explicit province scope. */
#app .casino-game-explorer { margin-block: 24px; overflow: hidden; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); border-top: 3px solid var(--b9-red); }
#app .casino-game-explorer-head { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 20px; align-items: center; padding: 20px 22px 17px; }
#app .casino-game-explorer-head .eyebrow { margin: 0 0 7px; color: var(--b9-red); font-size: .68rem; font-weight: 780; letter-spacing: .075em; text-transform: uppercase; }
#app .casino-game-explorer-head h3 { margin: 0 0 7px; font-family: var(--b9-type-editorial); font-size: clamp(1.3rem,2vw,1.7rem); font-weight: 620; line-height: 1.12; }
#app .casino-game-explorer-head p:last-child { max-width: 66ch; margin: 0; color: var(--b9-muted); font-size: .88rem; line-height: 1.5; }
#app .casino-game-explorer-index { color: var(--b9-red); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: clamp(1.8rem,4vw,2.7rem); font-variant-numeric: tabular-nums; letter-spacing: -.08em; }
#app .casino-game-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .casino-game-explorer--1 .casino-game-tabs { grid-template-columns: repeat(1,minmax(0,1fr)); }
#app .casino-game-explorer--2 .casino-game-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
#app .casino-game-tab { display: flex; min-width: 0; min-height: 54px; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; color: var(--b9-muted); background: transparent; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: .81rem; font-weight: 720; text-align: left; cursor: pointer; transition: color .16s ease,border-color .16s ease,background-color .16s ease; }
#app .casino-game-tab + .casino-game-tab { border-left: 1px solid var(--b9-line); }
#app .casino-game-tab:hover { color: var(--b9-ink); background: var(--b9-panel-raised); }
#app .casino-game-tab[aria-selected="true"] { color: var(--b9-ink); border-bottom-color: var(--b9-red); background: var(--b9-panel); }
#app .casino-game-tab:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--b9-red); outline-offset: -3px; }
#app .casino-game-tab small { flex: 0 0 auto; color: var(--b9-muted); font-size: .69rem; font-variant-numeric: tabular-nums; }
#app .casino-game-tab[aria-selected="true"] small { color: var(--b9-red); }
#app .casino-game-panel[hidden] { display: none; }
#app .casino-game-panel { padding: 19px 22px 21px; }
#app .casino-game-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 15px; }
#app .casino-game-panel-heading h3 { margin: 0 0 5px; font-size: 1rem; font-weight: 740; line-height: 1.3; }
#app .casino-game-panel-heading p { max-width: 58ch; margin: 0; color: var(--b9-muted); font-size: .79rem; line-height: 1.45; }
#app .casino-game-browse { display: inline-flex; min-height: 44px; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--b9-ink); font-size: .75rem; font-weight: 740; text-underline-offset: 4px; }
#app .casino-game-browse:hover { color: var(--b9-red); }
#app .casino-game-browse .ui-icon { width: 15px; height: 15px; color: var(--b9-red); }
#app .casino-game-peer-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
#app .casino-game-peer { display: flex; min-width: 0; min-height: 64px; align-items: center; gap: 11px; padding: 8px 10px; color: var(--b9-ink); background: var(--b9-paper); border: 1px solid var(--b9-line); text-decoration: none; transition: border-color .16s ease,background-color .16s ease; }
#app .casino-game-peer:hover { color: var(--b9-ink); background: var(--b9-panel-raised); border-color: var(--b9-red); }
#app .casino-game-peer-logo { width: 44px; height: 40px; flex: 0 0 44px; overflow: hidden; background: var(--b9-panel-raised); }
#app .casino-game-peer-logo .casino-logo { width: 100%; height: 100%; object-fit: contain; }
#app .casino-game-peer-copy { display: grid; min-width: 0; gap: 3px; }
#app .casino-game-peer-copy strong { overflow: hidden; font-size: .78rem; font-weight: 730; line-height: 1.3; text-overflow: ellipsis; }
#app .casino-game-peer-copy small { color: var(--b9-muted); font-size: .67rem; line-height: 1.3; }
#app .casino-game-peer-arrow { display: grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; margin-left: auto; color: var(--b9-red); border-left: 1px solid var(--b9-line); }
#app .casino-game-peer-arrow .ui-icon { width: 15px; height: 15px; }
#app .casino-game-empty { margin: 0; padding: 13px 14px; color: var(--b9-muted); background: var(--b9-paper); border-left: 2px solid var(--b9-line); font-size: .82rem; line-height: 1.5; }
#app .casino-game-remainder { margin: 10px 0 0; color: var(--b9-muted); font-size: .72rem; }
#app .casino-game-explorer-note { margin: 0; padding: 11px 22px; color: var(--b9-muted); background: var(--b9-paper); border-top: 1px solid var(--b9-line); font-size: .69rem; line-height: 1.5; }
@media (max-width: 760px) {
  #app .casino-game-explorer-head { gap: 12px; padding: 17px 15px 14px; }
  #app .casino-game-explorer:not(.casino-game-explorer--1) .casino-game-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .casino-game-tab { min-height: 48px; padding-inline: 11px; font-size: .76rem; }
  #app .casino-game-tab:nth-child(odd) { border-left: 0; }
  #app .casino-game-tab:nth-child(n+3) { border-top: 1px solid var(--b9-line); }
  #app .casino-game-panel { padding: 15px; }
  #app .casino-game-panel-heading { align-items: flex-start; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  #app .casino-game-browse { min-height: 40px; }
  #app .casino-game-peer-list { grid-template-columns: minmax(0,1fr); }
  #app .casino-game-explorer-note { padding-inline: 15px; }
}
@media (max-width: 380px) {
  #app .casino-game-explorer-head { padding-inline: 12px; }
  #app .casino-game-tab { gap: 6px; padding-inline: 8px; font-size: .72rem; }
  #app .casino-game-panel { padding-inline: 12px; }
  #app .casino-game-explorer-note { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .casino-game-tab, #app .casino-game-peer { transition: none; }
}

/* A manual, account-reported progress dial makes the offer math usable beyond a static estimate. */
#app .bonus-lab-progress-input { grid-column: 1 / -1; }
#app .bonus-lab-progress-input small { color: var(--b9-muted); font-size: .7rem; font-weight: 450; line-height: 1.45; }
#app .bonus-progress-tracker { margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--b9-line); }
#app .bonus-progress-heading { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
#app .bonus-progress-heading h3 { margin: 0; color: var(--b9-muted); font-size: .72rem; font-weight: 740; line-height: 1.4; }
#app .bonus-progress-heading output { flex: 0 0 auto; color: var(--b9-red); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#app .bonus-progress-track { height: 12px; overflow: hidden; background: linear-gradient(90deg,var(--b9-line) 1px,transparent 1px) 25% 0 / 25% 100% repeat-x,var(--b9-panel-raised); border: 1px solid var(--b9-line); }
#app .bonus-progress-track > span { display: block; width: 0; height: 100%; background: var(--b9-red); transition: width .32s cubic-bezier(.2,.72,.25,1); }
#app .bonus-progress-milestones { display: flex; justify-content: space-between; margin-top: 6px; color: var(--b9-muted); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .61rem; font-variant-numeric: tabular-nums; }
#app .bonus-progress-milestones span { min-width: 2.5em; text-align: center; }
#app .bonus-progress-milestones span:first-child { text-align: left; }
#app .bonus-progress-milestones span:last-child { text-align: right; }
#app .bonus-progress-milestones .is-reached { color: var(--b9-red); font-weight: 800; }
#app .bonus-progress-remaining { display: flex; min-width: 0; justify-content: space-between; gap: 12px; margin: 11px 0 0; color: var(--b9-muted); font-size: .72rem; line-height: 1.4; }
#app .bonus-progress-remaining strong { flex: 0 0 auto; color: var(--b9-ink); font-variant-numeric: tabular-nums; }

/* Hand-drawn format glyphs carry category meaning; the accompanying labels stay primary. */
#app .casino-game-tab-label { display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 8px; }
#app .casino-game-tab-label > span:last-child { min-width: 0; overflow-wrap: anywhere; }
#app .casino-category-glyph { width: 19px; height: 19px; flex: 0 0 19px; color: var(--b9-muted); stroke: currentColor; vector-effect: non-scaling-stroke; }
#app .casino-game-tab[aria-selected="true"] .casino-category-glyph { color: var(--b9-red); }
#app .casino-game-tab:hover .casino-category-glyph { color: var(--b9-red); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .bonus-hotspot .gift-lid { transition: transform .22s cubic-bezier(.18,.74,.25,1); }
  #app .bonus-hotspot:is(:hover,:focus-visible) .gift-lid { transform: translateY(-2px) rotate(-9deg); }
  #app .bonus-hotspot-mark { transition: background-color .18s ease,border-color .18s ease; }
  #app .bonus-hotspot:is(:hover,:focus-visible) .bonus-hotspot-mark { background: color-mix(in srgb,var(--b9-red) 11%,var(--b9-panel-raised)); border-color: var(--b9-red); }
}

@media (max-width: 760px) {
  #app .bonus-lab-progress-input { grid-column: 1 / -1; }
  #app .bonus-progress-heading h3 { max-width: 30ch; }
  #app .casino-game-tab-label { gap: 6px; }
  #app .casino-category-glyph { width: 17px; height: 17px; flex-basis: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .bonus-progress-track > span { transition: none; }
}

/* Provider index: a restrained source ledger for the game data Bastion can substantiate. */
#app .provider-filter-shell { padding: 17px 0; background: var(--b9-panel); border-block: 1px solid var(--b9-line); }
#app .provider-directory-filters { display: grid; grid-template-columns: minmax(190px,1.5fr) repeat(3,minmax(145px,1fr)); gap: 12px; align-items: end; }
#app .provider-directory-filters > label { display: grid; gap: 6px; min-width: 0; color: var(--b9-muted); font-size: .7rem; font-weight: 720; letter-spacing: .035em; }
#app .provider-directory-filters .input-control, #app .provider-directory-filters .select-control { width: 100%; min-width: 0; min-height: 44px; color: var(--b9-ink); background: var(--b9-paper); border: 1px solid var(--b9-line-strong,var(--b9-line)); border-radius: 2px; }
#app .provider-directory-filters .input-control:focus-visible, #app .provider-directory-filters .select-control:focus-visible { outline: 2px solid var(--b9-red); outline-offset: 2px; }
#app .provider-filter-status { display: flex; grid-column: 1/-1; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; color: var(--b9-muted); font-size: .72rem; }
#app .provider-filter-status .btn { min-height: 38px; }
#app .provider-directory { padding-top: clamp(25px,4vw,48px); }
#app .provider-directory-mast { display: grid; grid-template-columns: 1fr auto; gap: 6px 18px; align-items: center; margin-bottom: 18px; padding: 12px 0 14px; border-bottom: 1px solid var(--b9-line); }
#app .provider-directory-mast .eyebrow { grid-column: 1/-1; margin: 0; color: var(--b9-red); }
#app .provider-directory-mast p:not(.eyebrow) { margin: 0; color: var(--b9-muted); font-size: .78rem; font-variant-numeric: tabular-nums; }
#app .provider-directory-mast > span { color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: 1.1rem; }
#app .provider-studio-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start; }
#app .provider-studio-card { min-width: 0; overflow: hidden; background: var(--b9-panel); border: 1px solid var(--b9-line); border-top: 3px solid var(--b9-red); }
#app .provider-studio-head { display: grid; grid-template-columns: 43px minmax(0,1fr); gap: 13px; align-items: start; padding: 17px 18px 15px; }
#app .provider-studio-index { display: grid; width: 38px; min-height: 42px; place-items: center; color: var(--b9-red); background: var(--b9-paper); border: 1px solid var(--b9-line); font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#app .provider-studio-head .eyebrow { margin: 1px 0 4px; color: var(--b9-muted); font-size: .62rem; letter-spacing: .09em; text-transform: uppercase; }
#app .provider-studio-head h2 { margin: 0; color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: clamp(1.35rem,2.2vw,1.8rem); font-weight: 630; line-height: 1.1; }
#app .provider-studio-head p:last-child { margin: 6px 0 0; color: var(--b9-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
#app .provider-studio-formats { padding: 12px 18px 14px; background: var(--b9-paper); border-block: 1px solid var(--b9-line); }
#app .provider-studio-formats > span { display: block; margin-bottom: 8px; color: var(--b9-muted); font-size: .61rem; font-weight: 730; letter-spacing: .075em; text-transform: uppercase; }
#app .provider-studio-formats > div { display: flex; flex-wrap: wrap; gap: 5px; }
#app .provider-studio-formats b { padding: 4px 7px; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); font-size: .65rem; font-weight: 640; line-height: 1.3; }
#app .provider-profile-row { display: grid; grid-template-columns: minmax(115px,.85fr) minmax(0,1.4fr) auto; gap: 12px; align-items: center; padding: 12px 15px; color: inherit; text-decoration: none; border-bottom: 1px solid var(--b9-line); transition: background-color .16s ease; }
#app .provider-profile-row:last-child { border-bottom: 0; }
#app .provider-profile-row:hover, #app .provider-profile-row:focus-visible { background: color-mix(in srgb,var(--b9-red) 6%,var(--b9-panel)); }
#app .provider-profile-row:focus-visible { outline: 2px solid var(--b9-red); outline-offset: -2px; }
#app .provider-profile-name { display: grid; gap: 3px; min-width: 0; }
#app .provider-profile-name strong { color: var(--b9-ink); font-size: .74rem; line-height: 1.3; }
#app .provider-profile-name small { color: var(--b9-muted); font-size: .62rem; line-height: 1.3; }
#app .provider-profile-formats { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
#app .provider-profile-formats i { padding: 3px 5px; color: var(--b9-muted); border: 1px solid var(--b9-line); font-size: .58rem; font-style: normal; line-height: 1.25; }
#app .provider-profile-link { display: inline-flex; align-items: center; gap: 4px; color: var(--b9-red); font-size: .63rem; font-weight: 740; white-space: nowrap; }
#app .provider-profile-link .bastion-ui-mark { width: 13px; height: 13px; }
#app .provider-coverage-note { display: grid; grid-template-columns: minmax(115px,.3fr) 1fr; gap: 16px; margin-top: 22px; padding: 15px 17px; background: var(--b9-paper); border-left: 3px solid var(--b9-red); }
#app .provider-coverage-note > span { color: var(--b9-red); font-size: .67rem; font-weight: 780; letter-spacing: .07em; text-transform: uppercase; }
#app .provider-coverage-note p { margin: 0; color: var(--b9-muted); font-size: .76rem; line-height: 1.55; }
#app .provider-return { margin: 19px 0 0; text-align: right; }
#app .provider-return a, #app .casino-game-studio-index { display: inline-flex; align-items: center; gap: 6px; color: var(--b9-red); font-size: .77rem; font-weight: 740; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .casino-game-studio-index { margin-top: 9px; }
#app .provider-return .bastion-ui-mark, #app .casino-game-studio-index .bastion-ui-mark { width: 15px; height: 15px; }
#app .provider-empty { grid-column: 1/-1; padding: 22px; background: var(--b9-panel); border: 1px solid var(--b9-line); }
#app .provider-empty strong { color: var(--b9-ink); }
#app .provider-empty p { max-width: 72ch; margin: 7px 0 0; color: var(--b9-muted); font-size: .82rem; line-height: 1.55; }
#app .provider-index-entry { margin-top: 15px; }
#app .provider-index-entry > a { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 13px; align-items: center; max-width: 580px; padding: 13px 16px; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); border-left: 3px solid var(--b9-red); text-decoration: none; }
#app .provider-index-entry > a:hover { background: var(--b9-paper); }
#app .provider-index-entry > a > span { grid-column: 1/3; color: var(--b9-muted); font-size: .61rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
#app .provider-index-entry > a > strong { grid-column: 1/3; font-family: var(--b9-type-editorial); font-size: 1rem; font-weight: 640; }
#app .provider-index-entry .bastion-ui-mark { grid-column: 3; grid-row: 1/3; width: 18px; height: 18px; color: var(--b9-red); }
@media (max-width: 900px) {
  #app .provider-directory-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .provider-studio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  #app .provider-filter-shell { padding-block: 12px; }
  #app .provider-directory-filters { grid-template-columns: minmax(0,1fr); gap: 10px; }
  #app .provider-directory-filters > label { font-size: .67rem; }
  #app .provider-filter-status { align-items: flex-start; font-size: .67rem; }
  #app .provider-directory-mast { grid-template-columns: 1fr; gap: 5px; }
  #app .provider-directory-mast .eyebrow { grid-column: auto; }
  #app .provider-directory-mast > span { font-size: 1rem; }
  #app .provider-studio-head { grid-template-columns: 35px minmax(0,1fr); gap: 10px; padding: 14px 13px 12px; }
  #app .provider-studio-index { width: 32px; min-height: 36px; font-size: .72rem; }
  #app .provider-studio-formats { padding: 10px 13px 12px; }
  #app .provider-profile-row { grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; padding: 11px 12px; }
  #app .provider-profile-name { grid-column: 1; }
  #app .provider-profile-formats { grid-column: 1/-1; grid-row: 2; }
  #app .provider-profile-link { grid-column: 2; grid-row: 1; font-size: .6rem; }
  #app .provider-coverage-note { grid-template-columns: 1fr; gap: 7px; padding: 13px; }
  #app .provider-return { text-align: left; }
  #app .provider-index-entry > a { gap: 3px 9px; padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .provider-profile-row { transition: none; }
}

/* Source: styles/editorial-system.css */
/* Bastion editorial system: evidence-led market desk, with phone layouts designed as their own composition. */
:root {
  --b9-measure: 74ch;
  --b9-focus: #e1c46e;
}
html[data-theme="light"] { --b9-focus: #8a6810; }
body { font-family: var(--b9-type-interface); font-size: 16px; line-height: 1.6; }
#app { min-width: 320px; }
#app :is(h1,h2) { font-family: var(--b9-type-editorial); font-weight: 600; letter-spacing: -.025em; text-transform: none; }
#app :is(h3,h4) { font-family: var(--b9-type-interface); font-weight: 650; letter-spacing: -.01em; }
#app :is(button,input,select,textarea) { font: inherit; }
#app :is(a,button,input,select,textarea,summary):focus-visible { outline: 2px solid var(--b9-focus); outline-offset: 3px; }
#app .container { width: min(100% - (var(--b9-gutter, 24px) * 2), 1280px); }
#app .section { padding-block: clamp(44px, 6vw, 78px); }
#app .section-sm { padding-block: clamp(30px, 4vw, 52px); }
#app .eyebrow { color: var(--b9-red); font-size: .78rem; font-weight: 650; letter-spacing: 0; text-transform: none; }

/* Header and page furniture */
#app .site-header { min-height: 66px; }
#app .header-inner { min-height: 66px; }
#app .primary-nav a { position: relative; min-height: 44px; color: var(--b9-muted); font-size: .77rem; }
#app .primary-nav a[aria-current="page"] { color: var(--b9-ink); }
#app .primary-nav a[aria-current="page"]::after { position: absolute; right: 7px; bottom: 2px; left: 7px; height: 2px; background: var(--b9-red); content: ""; }
#app .header-tools .icon-button, #app .menu-toggle, #app .saved-header-button { border-radius: 2px; }
#app .mobile-panel { border-radius: 0; }
#app .mobile-panel a { min-height: 50px; }
#app .page-header-photo { padding-block: clamp(32px, 5vw, 58px); }
#app .breadcrumbs { min-height: 38px; }
#app .section-heading { padding-top: 13px; border-top: 2px solid var(--b9-line); }
#app .section-heading > div > .eyebrow:first-child { margin-top: 0; }
#app .section-heading h2 { max-width: 24ch; font-size: clamp(1.8rem, 3.3vw, 2.7rem); line-height: 1.02; }
#app .section-heading p:not(.eyebrow) { max-width: var(--b9-measure); }

/* Home: one real photo, one fact board, and an unambiguous path into the register. */
#app .reference-hero { overflow: clip; }
#app .reference-hero-grid { width: min(100% - (var(--b9-gutter, 24px) * 2), 1280px); }
#app .reference-hero h1 { max-width: 13ch; font-size: clamp(2.8rem, 5.1vw, 4.5rem); }
#app .reference-hero-copy .reference-kicker { letter-spacing: .09em; }
#app .reference-hero .hero-search { border-radius: 2px; }
#app .reference-hero .hero-search input { min-width: 0; font-size: 16px; }
#app .reference-hero .hero-actions .btn { min-height: 48px; }
#app .home-coverage-board { border-top-width: 2px; }
#app .home-coverage-metrics strong { font-family: var(--b9-type-editorial); font-weight: 500; }
#app .home-offer-link { min-height: 58px; }

/* Operator records are ruled comparisons, not a stack of interchangeable promo cards. */
#app .ranking-list { gap: 0; }
#app .reference-ranking-card { border: 0; border-top: 1px solid var(--b9-line); border-radius: 0; background: transparent; }
#app .reference-ranking-card:last-child { border-bottom: 1px solid var(--b9-line); }
#app .reference-ranking-card:hover { border-color: var(--b9-line); background: color-mix(in srgb, var(--b9-panel) 64%, transparent); }
#app .operator-score-cell > strong { font-family: var(--b9-type-editorial); font-weight: 500; }
#app .operator-offer-cell, #app .operator-facts-cell, #app .operator-action-cell { min-width: 0; }
#app .operator-facts-cell dl { row-gap: 7px; }
#app .operator-action-cell .btn { min-height: 46px; border-radius: 2px; }
#app .operator-tools button { min-height: 42px; border-radius: 2px; }
#app .operator-tools button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
#app .operator-tools button > .ui-icon { width: 15px; height: 15px; flex: 0 0 auto; }
#app [data-favorite-id][aria-pressed="true"] .ui-icon-bookmark { fill: currentColor; }

/* Ontario's complete source register becomes a usable index, not a long unfiltered appendix. */
#app .official-registry-section { padding-block: clamp(36px, 5.3vw, 68px); background: var(--b9-panel); border-block: 1px solid var(--b9-line); }
#app .official-registry-heading h2 { max-width: 16ch; font-family: var(--b9-type-editorial); font-size: clamp(2rem, 3.7vw, 3.15rem); font-weight: 500; line-height: .99; }
#app .official-registry-stats { margin-block: 18px; border-color: var(--b9-line); }
#app .official-registry-stats strong { color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: 2rem; font-weight: 500; }
#app .official-registry-browser { border-color: var(--b9-line); background: var(--b9-paper); }
#app .official-registry-toolbar { grid-template-columns: minmax(0, 1fr) minmax(160px, auto); }
#app .official-registry-toolbar .input-control { max-width: none; min-height: 48px; font-size: 16px; }
#app .official-registry-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px 24px; padding: 12px 18px; border-bottom: 1px solid var(--b9-line); }
#app .official-registry-facets { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; }
#app .official-registry-facet-note { grid-column: 1 / -1; margin: 0; color: var(--b9-muted); font-size: .7rem; line-height: 1.4; }
#app .official-registry-facet { min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px; color: var(--b9-muted); background: transparent; border: 1px solid var(--b9-line); border-radius: 2px; cursor: pointer; font-size: .78rem; }
#app .official-registry-facet b { color: var(--b9-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
#app .official-registry-facet:hover, #app .official-registry-facet.is-active { color: var(--b9-ink); border-color: var(--b9-red); }
#app .official-registry-facet.is-active { box-shadow: inset 0 -2px var(--b9-red); }
#app .official-registry-actions { display: flex; align-items: end; gap: 10px; }
#app .official-registry-actions label { display: grid; gap: 5px; color: var(--b9-muted); font-size: .68rem; }
#app .official-registry-actions select { min-height: 42px; max-width: 172px; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); border-radius: 2px; font-size: .78rem; }
#app .official-registry-expand { min-height: 44px; padding-inline: 10px; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); border-radius: 2px; cursor: pointer; font-size: .75rem; }
#app .official-registry-expand:hover { border-color: var(--b9-red); }
#app .official-registry-entry summary { min-height: 54px; }
#app .official-registry-entry summary > span { font-weight: 650; }
#app .official-registry-entry summary:focus-visible { outline-offset: -2px; }
#app .official-registry-site[hidden] { display: none; }
#app .official-registry-categories span { border-radius: 2px; }
#app .official-registry-site { grid-template-columns: minmax(0, 1fr) auto auto; }
#app .official-registry-compare { min-width: 82px; min-height: 44px; padding: 5px 9px; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); border-radius: 2px; cursor: pointer; font-size: .72rem; font-weight: 700; }
#app .official-registry-compare:hover, #app .official-registry-compare[aria-pressed="true"] { border-color: var(--b9-red); color: var(--b9-ink); }
#app .official-registry-compare[aria-pressed="true"] { box-shadow: inset 0 -2px var(--b9-red); }
#app .market-compare-dock:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 18px; padding: 12px 18px; background: var(--b9-panel); border-bottom: 1px solid var(--b9-line); }
#app .market-compare-status { grid-column: 1 / -1; margin: 0; color: var(--b9-muted); font-size: .76rem; }
#app .market-compare-selected, #app .market-compare-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
#app .market-compare-remove, #app .market-compare-clear, #app .market-compare-open, #app .market-compare-close { min-height: 44px; padding: 7px 11px; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); border-radius: 2px; cursor: pointer; font-size: .76rem; }
#app .market-compare-remove { color: var(--b9-muted); }
#app .market-compare-open { background: var(--b9-red); border-color: var(--b9-red); }
#app .market-compare-open:disabled { opacity: .5; cursor: not-allowed; }
#app .market-compare-panel { padding: clamp(16px, 3vw, 28px); background: var(--b9-panel); border-bottom: 1px solid var(--b9-line); }
#app .market-compare-heading { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
#app .market-compare-heading .eyebrow { margin: 0 0 5px; }
#app .market-compare-heading h3 { margin: 0; font-family: var(--b9-type-editorial); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 500; }
#app .market-compare-grid { display: grid; grid-template-columns: repeat(var(--market-record-count, 2), minmax(0,1fr)); gap: 1px; background: var(--b9-line); border: 1px solid var(--b9-line); }
#app .market-compare-record { min-width: 0; padding: 17px; background: var(--b9-paper); }
#app .market-compare-brand { margin: 0; font-family: var(--b9-type-editorial); font-size: 1.35rem; line-height: 1.12; overflow-wrap: anywhere; }
#app .market-compare-operator { min-height: 2.7em; margin: 6px 0 13px; color: var(--b9-muted); font-size: .74rem; line-height: 1.4; overflow-wrap: anywhere; }
#app .market-compare-record dl { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--b9-line); }
#app .market-compare-record dl > div { display: grid; gap: 4px; padding-block: 9px; border-bottom: 1px solid var(--b9-line); }
#app .market-compare-record dt { color: var(--b9-muted); font-size: .68rem; }
#app .market-compare-record dd { margin: 0; color: var(--b9-ink); font-size: .82rem; font-weight: 650; overflow-wrap: anywhere; }
#app .market-compare-record > a { display: inline-flex; min-height: 44px; align-items: center; color: var(--b9-yellow); font-size: .78rem; font-weight: 700; text-underline-offset: 3px; }
#app .market-compare-source { margin: 12px 0 0; color: var(--b9-muted); font-size: .74rem; line-height: 1.5; }
#app .market-compare-source a { color: var(--b9-ink); }
#app .official-registry-public { border-radius: 0; }

/* Keep the source register readable when the surrounding editorial theme is light. */
html[data-theme="light"] #app .official-registry-section { color: var(--b9-ink); }
html[data-theme="light"] #app .official-registry-heading h2 { color: var(--b9-ink); }
html[data-theme="light"] #app .official-registry-heading > div > p:last-of-type { color: var(--b9-muted); }
html[data-theme="light"] #app .alberta-register-guide-link { color: var(--b9-red); text-decoration-color: color-mix(in srgb, var(--b9-red) 55%, transparent); }
html[data-theme="light"] #app .official-registry-heading .eyebrow { color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-stats { border-color: var(--b9-line); }
html[data-theme="light"] #app .official-registry-stats > div + div { border-color: var(--b9-line); }
html[data-theme="light"] #app .official-registry-stats strong { color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-stats span,
html[data-theme="light"] #app .official-registry-toolbar output,
html[data-theme="light"] #app .official-registry-entry summary > small,
html[data-theme="light"] #app .official-registry-site small,
html[data-theme="light"] #app .official-registry-empty,
html[data-theme="light"] #app .official-registry-footnote { color: var(--b9-muted); }
html[data-theme="light"] #app .official-registry-browser { border-color: var(--b9-line); background: var(--b9-paper); }
html[data-theme="light"] #app .official-registry-toolbar { border-color: var(--b9-line); }
html[data-theme="light"] #app .official-registry-toolbar label { color: var(--b9-ink); }
html[data-theme="light"] #app .official-registry-toolbar .input-control { border-color: var(--b9-line); color: var(--b9-ink); background: var(--b9-panel); }
html[data-theme="light"] #app .official-registry-entry { border-color: var(--b9-line); background: var(--b9-paper); }
html[data-theme="light"] #app .official-registry-entry summary { color: var(--b9-ink); }
html[data-theme="light"] #app .official-registry-entry summary:hover { background: var(--b9-panel-raised); }
html[data-theme="light"] #app .official-registry-entry[open] summary { border-color: var(--b9-line); }
html[data-theme="light"] #app .official-registry-entry summary::after { color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-site { border-color: var(--b9-line); }
html[data-theme="light"] #app .official-registry-site a,
html[data-theme="light"] #app .official-registry-footnote a { color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-categories span { border-color: var(--b9-line); color: var(--b9-muted); }
html[data-theme="light"] #app .official-registry-public { border-color: var(--b9-line); border-left-color: var(--b9-red); background: var(--b9-panel-raised); }
html[data-theme="light"] #app .official-registry-public .eyebrow { color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-public > div > a { color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-public > div > p:last-child,
html[data-theme="light"] #app .official-registry-public > small { color: var(--b9-muted); }
html[data-theme="light"] #app .official-registry-source-pair > .text-action,
html[data-theme="light"] #app .market-directory-actions > .text-action { color: var(--b9-red); }

/* Reading surfaces use a narrow measure, real bylines and quieter interaction. */
#app .article-content { max-width: var(--b9-measure); line-height: 1.75; }
#app .article-content h2 { margin-top: 1.8em; font-size: clamp(1.55rem, 3vw, 2.1rem); }
#app .guide-article-hero h1 { max-width: 18ch; font-family: var(--b9-type-editorial); font-size: clamp(2.45rem, 5.4vw, 4.6rem); font-weight: 500; line-height: .99; }
#app .guide-photo img { filter: saturate(.72) contrast(1.04); }
#app .guide-card { border: 0; border-top: 2px solid var(--b9-line); border-radius: 0; background: transparent; box-shadow: none; }
#app .guide-card h3 { font-family: var(--b9-type-editorial); font-size: 1.42rem; font-weight: 500; line-height: 1.12; }
#app .guide-card .card-body { padding-inline: 0; }
#app .guide-link { min-height: 44px; }
#app .source-register { border-radius: 2px; box-shadow: none; }
#app .source-register li + li { border-top: 1px solid var(--b9-line); }

/* Mobile gets a full-width working surface and its own control order. */
@media (max-width: 980px) {
  #app .reference-hero-grid { grid-template-columns: minmax(0, 1fr); }
  #app .reference-hero-copy { max-width: 760px; }
  #app .home-coverage-board { max-width: 760px; }
}
@media (max-width: 760px) {
  #app .section { padding-block: 36px; }
  #app .section-sm { padding-block: 27px; }
  #app .section-heading { display: grid; gap: 7px; }
  #app .section-heading h2 { font-size: clamp(1.7rem, 8vw, 2.25rem); }
  #app .reference-hero-grid { gap: 21px; padding-block: 26px 24px; }
  #app .reference-hero h1 { max-width: 17ch; font-size: clamp(2.2rem, 9vw, 3.05rem); line-height: 1.02; }
  #app .reference-hero .hero-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  #app .reference-hero .hero-search input, #app .reference-hero .hero-search .btn { min-height: 48px; }
  #app .reference-hero .hero-actions { display: grid; grid-template-columns: minmax(0,1fr); gap: 3px; }
  #app .reference-hero .hero-actions .btn { width: 100%; min-height: 48px; }
  #app .home-coverage-metrics > div { min-height: 70px; }
  #app .home-coverage-metrics span { max-width: 13ch; line-height: 1.25; }
  #app .official-registry-heading { gap: 12px; }
  #app .official-registry-controls { grid-template-columns: minmax(0,1fr); gap: 10px; padding: 11px 12px; }
  #app .official-registry-facets { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; padding: 1px 1px 5px; scrollbar-width: thin; }
  #app .official-registry-facet { flex: 0 0 auto; min-height: 44px; }
  #app .official-registry-actions { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; }
  #app .official-registry-actions label { min-width: 0; }
  #app .official-registry-actions select { width: 100%; max-width: none; min-height: 44px; font-size: 16px; }
  #app .official-registry-expand { min-height: 44px; }
  #app .official-registry-toolbar { grid-template-columns: minmax(0,1fr); gap: 3px; padding: 12px; }
  #app .official-registry-toolbar output { padding-top: 4px; text-align: left; }
  #app .official-registry-list { padding-inline: 12px; }
  #app .official-registry-entry summary { min-height: 54px; }
  #app .official-registry-site { grid-template-columns: minmax(0,1fr) auto; }
  #app .official-registry-site > div:first-child { grid-column: 1 / -1; }
  #app .official-registry-site .official-registry-categories { grid-column: 1; align-items: start; }
  #app .official-registry-compare { grid-column: 2; min-width: 84px; min-height: 44px; }
  #app .market-compare-dock:not([hidden]) { grid-template-columns: minmax(0,1fr); padding: 12px; }
  #app .market-compare-status { grid-column: 1; }
  #app .market-compare-actions { justify-content: space-between; }
  #app .market-compare-actions > button { flex: 1 1 0; }
  #app .market-compare-grid { grid-template-columns: minmax(0,1fr); }
  #app .market-compare-operator { min-height: 0; }
  #app .guide-article-hero-grid { grid-template-columns: minmax(0,1fr); }
  #app .guide-article-hero h1 { font-size: clamp(2.2rem, 9vw, 3rem); }
  #app .article-content { font-size: 1rem; }
}
@media (max-width: 380px) {
  #app .container { width: calc(100% - 24px); }
  #app .reference-hero .hero-search { grid-template-columns: minmax(0,1fr); }
  #app .reference-hero .hero-search .btn { width: 100%; }
  #app .home-coverage-head { align-items: start; }
  #app .official-registry-stats > div { padding-inline: 7px; }
  #app .official-registry-actions { grid-template-columns: minmax(0,1fr); }
  #app .official-registry-expand { width: 100%; }
}

/* Exact-domain directory cards link to an editorial file only when one exists. */
#app .official-registry-site-actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 6px; }
#app .official-registry-profile-link { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; gap: 6px; padding: 6px 8px; color: var(--b9-red); border: 1px solid var(--b9-line); font-size: .69rem; font-weight: 720; line-height: 1.35; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
#app .official-registry-profile-link:hover { border-color: var(--b9-red); }
html[data-theme="light"] #app .official-registry-profile-link { color: var(--b9-red); }
@media (max-width: 760px) {
  #app .official-registry-site { grid-template-columns: minmax(0, 1fr); }
  #app .official-registry-site > div:first-child,
  #app .official-registry-site .official-registry-categories,
  #app .official-registry-site-actions { grid-column: 1 / -1; }
  #app .official-registry-site-actions { justify-content: flex-start; }
  #app .official-registry-site-actions .official-registry-profile-link { flex: 1 1 150px; }
  #app .official-registry-site-actions .official-registry-compare { min-width: 88px; }
}
@media (max-width: 380px) {
  #app .official-registry-site-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #app .official-registry-site-actions .official-registry-compare { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* AiGC directory records distinguish public site cards from legal registrants. */
#app .official-registry-source-pair { display: grid; justify-items: start; gap: 10px; }
#app .official-registry-source-pair .legal-register-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
#app .aigc-legal-register-note { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid var(--b9-line); background: var(--b9-panel); color: var(--b9-muted); font-size: .82rem; line-height: 1.5; }
#app .aigc-legal-register-note p { max-width: 78ch; margin: 0; }
#app .aigc-legal-register-note a { flex: 0 0 auto; display: inline-flex; min-height: 44px; align-items: center; gap: 8px; color: var(--b9-ink); text-underline-offset: 3px; }
#app .official-registry-entry[data-record-type="site-card"] summary { grid-template-columns: minmax(0,1fr) minmax(0,auto); gap: 14px; }
#app .official-registry-entry[data-record-type="site-card"] summary small { max-width: 44vw; overflow-wrap: anywhere; text-align: right; }
#app .official-registry-entry[data-record-type="site-card"] > ul { margin-top: 0; }
@media (max-width: 680px) {
  #app .official-registry-source-pair { width: 100%; }
  #app .official-registry-source-pair .btn { width: 100%; justify-content: center; }
  #app .aigc-legal-register-note { display: grid; gap: 8px; padding: 12px; }
  #app .aigc-legal-register-note a { min-height: 44px; }
  #app .official-registry-entry[data-record-type="site-card"] summary { grid-template-columns: minmax(0,1fr); gap: 3px; }
  #app .official-registry-entry[data-record-type="site-card"] summary small { max-width: none; text-align: left; }
}


/* Bonus register: use the wide masthead for a sourced deadline brief instead of empty space. */
body[data-route="bonuses"] #app .bonus-directory-header { padding-block: clamp(24px, 3.6vw, 46px); }
body[data-route="bonuses"] #app .bonus-directory-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(290px, .8fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
}
body[data-route="bonuses"] #app .bonus-directory-copy { display: grid; align-content: center; min-width: 0; }
body[data-route="bonuses"] #app .bonus-directory-copy > .eyebrow { margin: 0 0 8px; }
body[data-route="bonuses"] #app .bonus-directory-copy h1 { max-width: 14ch; margin: 0 0 10px; font-size: clamp(2.6rem, 5.1vw, 4rem); line-height: .98; }
body[data-route="bonuses"] #app .bonus-directory-copy > .lead { max-width: 62ch; margin: 0; }
body[data-route="bonuses"] #app .bonus-directory-copy .listing-coverage-notice { max-width: 760px; margin-top: 20px; }
body[data-route="bonuses"] #app .bonus-deadline-card {
  display: grid;
  align-content: space-between;
  gap: 18px;
  min-width: 0;
  padding: 18px 20px 15px;
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  background: var(--b9-bg, var(--b9-panel));
}
body[data-route="bonuses"] #app .bonus-deadline-head { display: flex; align-items: center; gap: 9px; color: var(--b9-muted); font: 700 .63rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
body[data-route="bonuses"] #app .bonus-deadline-head > span:last-child { margin-left: auto; max-width: 42%; overflow-wrap: anywhere; color: var(--b9-red); text-align: right; }
body[data-route="bonuses"] #app .bonus-deadline-mark { color: var(--b9-red); }
body[data-route="bonuses"] #app .bonus-deadline-main { display: grid; gap: 4px; min-width: 0; padding-block: 10px 2px; border-top: 1px solid var(--b9-line); }
body[data-route="bonuses"] #app .bonus-deadline-main .eyebrow { margin: 0; font-size: .63rem; }
body[data-route="bonuses"] #app .bonus-deadline-main time { color: var(--b9-ink); font: 500 clamp(1.8rem, 3.2vw, 2.7rem)/1.06 var(--b9-type-editorial); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
body[data-route="bonuses"] #app .bonus-deadline-main strong { overflow-wrap: anywhere; color: var(--b9-muted); font: 700 .76rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .035em; }
body[data-route="bonuses"] #app .bonus-deadline-foot { display: flex; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .75rem; }
body[data-route="bonuses"] #app .bonus-deadline-foot b { color: var(--b9-ink); font: 700 .8rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
body[data-route="bonuses"] #app .bonus-deadline-note { margin: -7px 0 0; color: var(--b9-muted); font-size: .76rem; line-height: 1.48; }
body[data-route="bonuses"] #app .bonus-deadline-link { display: inline-flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px; color: var(--b9-ink); font-size: .78rem; font-weight: 700; text-underline-offset: 3px; }
body[data-route="bonuses"] #app .bonus-deadline-link span { color: var(--b9-red); }
@media (max-width: 760px) {
  body[data-route="bonuses"] #app .bonus-directory-layout { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  body[data-route="bonuses"] #app .bonus-directory-copy h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
  body[data-route="bonuses"] #app .bonus-deadline-card { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 10px 14px; padding: 12px; }
  body[data-route="bonuses"] #app .bonus-deadline-head { grid-column: 1 / -1; }
  body[data-route="bonuses"] #app .bonus-deadline-main { padding-top: 8px; }
  body[data-route="bonuses"] #app .bonus-deadline-main time { font-size: 1.65rem; }
  body[data-route="bonuses"] #app .bonus-deadline-foot { grid-column: 2; grid-row: 2; align-self: end; justify-content: end; padding-top: 0; border: 0; }
  body[data-route="bonuses"] #app .bonus-deadline-foot span { display: none; }
  body[data-route="bonuses"] #app .bonus-deadline-note { grid-column: 1 / -1; margin: 0; }
  body[data-route="bonuses"] #app .bonus-deadline-link { grid-column: 1 / -1; min-height: 40px; border-top: 1px solid var(--b9-line); }
}
@media (max-width: 360px) {
  body[data-route="bonuses"] #app .bonus-directory-layout { gap: 10px; }
  body[data-route="bonuses"] #app .bonus-deadline-card { gap: 8px 10px; padding: 10px; }
  body[data-route="bonuses"] #app .bonus-deadline-main time { font-size: 1.42rem; }
  body[data-route="bonuses"] #app .bonus-deadline-note { font-size: .7rem; }
  body[data-route="bonuses"] #app .bonus-deadline-link { font-size: .74rem; }
}

/* Responsible-play profile: specific controls stay attached to the evidence. */
#app .responsible-controls-note {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--b9-line);
  border-left: 2px solid var(--b9-red);
  background: var(--b9-panel);
}
#app .responsible-controls-note-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--b9-line);
  color: var(--b9-red);
  font: 700 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#app .responsible-controls-note p { margin: 0; color: var(--b9-muted); font-size: .78rem; line-height: 1.55; }
#app .responsible-control-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#app .responsible-control-card {
  display: grid;
  align-content: start;
  gap: 10px;
  min-width: 0;
  padding: 15px 16px 13px;
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  background: var(--b9-panel);
}
#app .responsible-control-kicker { display: flex; align-items: center; gap: 8px; color: var(--b9-muted); }
#app .responsible-control-kicker > span { color: var(--b9-red); font: 700 .88rem/1 var(--b9-type-editorial); }
#app .responsible-control-kicker small { font: 700 .58rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; }
#app .responsible-control-card h3 { margin: 0; color: var(--b9-ink); font: 500 1.2rem/1.12 var(--b9-type-editorial); letter-spacing: -.02em; }
#app .responsible-control-card > p { margin: 0; color: var(--b9-muted); font-size: .79rem; line-height: 1.58; }
#app .responsible-control-action, #app .responsible-control-evidence a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  min-height: 44px;
  max-width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--b9-line);
  color: var(--b9-ink);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: anywhere;
  text-underline-offset: 3px;
}
#app .responsible-control-action { border-color: var(--b9-red); }
#app .responsible-control-action:hover, #app .responsible-control-evidence a:hover { text-decoration-thickness: 2px; }
#app .responsible-control-evidence { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-top: 9px; border-top: 1px solid var(--b9-line); }
#app .responsible-control-evidence > span { flex-basis: 100%; color: var(--b9-muted); font: 700 .55rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .055em; }
#app .responsible-control-evidence a { min-height: 44px; padding: 5px 7px; font-size: .65rem; }
#app .responsible-controls-empty { padding: 14px; border: 1px solid var(--b9-line); color: var(--b9-muted); background: var(--b9-panel); }
#app .payment-evidence-empty td { padding: 14px; white-space: normal; }
#app .payment-evidence-empty strong, #app .payment-evidence-empty span { display: block; }
#app .payment-evidence-empty strong { margin-bottom: 4px; color: var(--b9-ink); }
#app .payment-evidence-empty span { max-width: 66ch; color: var(--b9-muted); font-size: .78rem; line-height: 1.5; }
#app .operator-support-card { display: grid; gap: 10px; margin-top: 14px; padding: 16px; border: 1px solid var(--b9-line); border-left: 2px solid var(--b9-red); background: var(--b9-panel); }
#app .operator-support-kicker { display: flex; justify-content: space-between; gap: 14px; align-items: center; color: var(--b9-muted); font: 700 .6rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .065em; }
#app .operator-support-kicker strong { color: var(--b9-red); font: 500 1.35rem/1 var(--b9-type-editorial); letter-spacing: -.035em; }
#app .operator-support-card h3 { margin: 0; color: var(--b9-ink); font: 500 1.25rem/1.12 var(--b9-type-editorial); }
#app .operator-support-card > p { max-width: 70ch; margin: 0; color: var(--b9-muted); font-size: .8rem; line-height: 1.55; }
#app .operator-support-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#app .operator-support-call, #app .operator-support-source { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; max-width: 100%; padding: 8px 11px; border: 1px solid var(--b9-line); color: var(--b9-ink); font-size: .74rem; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; text-underline-offset: 3px; }
#app .operator-support-call { border-color: var(--b9-red); }
#app .operator-support-source:hover, #app .operator-support-call:hover { text-decoration-thickness: 2px; }
#app .casino-logo-fallback-long { max-width: 100%; padding: .25rem; font-size: .48rem; line-height: 1.05; letter-spacing: -.02em; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  #app .responsible-control-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  #app .responsible-control-card { padding: 13px 13px 11px; }
}

/* Source: styles/market-system.css */
/* Bastion market system: ordered responsive and editorial rules, consolidated from archived iterations. */

/* Bastion: mobile is a reading format, not a compressed desktop table. */

/* The home comparison table repeats the full operator records immediately below it.
   Keep the fast matrix on larger screens; let the records lead on phones. */
@media (max-width: 760px) {
  #app .home-comparison-wrap { display: none !important; }

  #app .reference-ranking-section .section-heading {
    align-items: start;
    gap: 12px;
  }
  #app .reference-ranking-section .section-heading h2 {
    max-width: 18ch;
    font-size: clamp(1.8rem, 8vw, 2.35rem);
    line-height: 1.02;
  }
  #app .reference-ranking-section .section-heading > a {
    flex: 0 0 auto;
    min-height: 44px;
    align-self: end;
  }
  #app .reference-ranking-list { gap: 12px; }
  #app .reference-ranking-card.casino-card {
    display: grid !important;
    grid-template-columns: 43px minmax(0, 1fr) 72px;
    grid-template-areas:
      "rank brand score"
      "offer offer offer"
      "facts facts facts"
      "actions actions actions";
    gap: 0;
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--b9-line);
    border-left: 2px solid var(--b9-red);
    background: var(--b9-panel);
    box-shadow: none;
    transform: none !important;
  }
  #app .reference-ranking-card.casino-card > .ranking-position {
    grid-area: rank;
    display: flex;
    grid-column: auto;
    grid-row: auto;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    padding: 12px 0 12px 12px;
    border: 0;
    writing-mode: horizontal-tb;
  }
  #app .reference-ranking-card.casino-card > .ranking-position strong {
    color: var(--b9-yellow);
    font: 700 1rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: -.04em;
  }
  #app .reference-ranking-card.casino-card > .ranking-position span {
    color: var(--b9-muted);
    font: 700 .55rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell {
    grid-area: brand;
    display: grid;
    grid-column: auto;
    grid-row: auto;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 12px 4px 12px 0;
    border: 0;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell .casino-logo-frame {
    width: 44px;
    height: 42px;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell > div { min-width: 0; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell .editorial-label {
    display: block;
    margin: 0 0 2px;
    font-size: .59rem;
    line-height: 1.25;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell h2,
  #app .reference-ranking-card.casino-card > .operator-brand-cell h3 {
    margin: 1px 0 3px;
    font: 600 clamp(1.02rem, 4.8vw, 1.2rem)/1.12 var(--b9-type-editorial);
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell p,
  #app .reference-ranking-card.casino-card > .operator-brand-cell small {
    display: block;
    margin: 3px 0 0;
    color: var(--b9-muted);
    font-size: .68rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card > .operator-score-cell {
    grid-area: score;
    display: flex;
    grid-column: auto;
    grid-row: auto;
    flex-wrap: wrap;
    align-content: center;
    justify-content: end;
    align-items: baseline;
    gap: 1px 3px;
    min-width: 0;
    margin: 10px 10px 10px 0;
    padding: 7px 0 7px 8px;
    border: 0;
    border-left: 1px solid var(--b9-line);
    text-align: right;
  }
  #app .reference-ranking-card.casino-card > .operator-score-cell strong {
    color: var(--b9-yellow);
    font: 500 1.5rem/.95 var(--b9-type-editorial);
    font-variant-numeric: tabular-nums;
  }
  #app .reference-ranking-card.casino-card > .operator-score-cell > span {
    color: var(--b9-muted);
    font-size: .62rem;
  }
  #app .reference-ranking-card.casino-card > .operator-score-cell small {
    flex-basis: 100%;
    margin: 4px 0 0;
    color: var(--b9-muted);
    font-size: .55rem;
    line-height: 1.2;
    text-align: right;
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell {
    grid-area: offer;
    display: block;
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
    padding: 12px 14px;
    border-block: 1px solid var(--b9-line);
    background: color-mix(in srgb, var(--b9-panel-raised) 72%, transparent);
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell > span,
  #app .reference-ranking-card.casino-card > .operator-facts-cell > dl dt {
    color: var(--b9-muted);
    font: 700 .59rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .07em;
    text-transform: uppercase;
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell > strong {
    display: block;
    margin: 4px 0;
    color: var(--b9-ink);
    font: 600 1rem/1.18 var(--b9-type-editorial);
  }
  #app .reference-ranking-card.casino-card > .operator-offer-cell > small {
    display: block;
    max-width: 68ch;
    color: var(--b9-muted);
    font-size: .77rem;
    line-height: 1.45;
    -webkit-line-clamp: 3;
  }
  #app .reference-ranking-card.casino-card .operator-source-link {
    min-height: 44px;
    margin-top: 4px;
  }
  #app .reference-ranking-card.casino-card > .operator-facts-cell {
    grid-area: facts;
    display: block;
    grid-column: 1 / -1;
    grid-row: auto;
    min-width: 0;
    padding: 12px 14px;
    border: 0;
    border-bottom: 1px solid var(--b9-line);
  }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 11px;
  }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl > div {
    min-width: 0;
    padding: 8px 9px;
    border: 1px solid var(--b9-line);
    background: color-mix(in srgb, var(--b9-panel-raised) 52%, transparent);
  }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl dd {
    margin: 4px 0 0;
    color: var(--b9-ink);
    font-size: .76rem;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card .operator-facts-note { display: none; }
  #app .reference-ranking-card.casino-card .operator-payment-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 0;
  }
  #app .reference-ranking-card.casino-card .operator-payment-list > span {
    min-width: 0;
    min-height: 38px;
    align-content: center;
    padding: 6px 8px;
    color: var(--b9-ink);
    background: transparent;
    font-size: .72rem;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card .operator-payment-list small { font-size: .64rem; }
  #app .reference-ranking-card.casino-card .operator-payment-list .operator-payment-empty {
    grid-column: 1 / -1;
    color: var(--b9-muted);
    border-style: dashed;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell {
    grid-area: actions;
    display: grid;
    grid-column: 1 / -1;
    grid-row: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 8px;
    min-width: 0;
    padding: 11px 14px 12px;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .btn,
  #app .reference-ranking-card.casino-card > .operator-action-cell .text-action {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 7px 9px;
    font-size: .79rem;
    line-height: 1.2;
    text-align: center;
    overflow-wrap: anywhere;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .text-action {
    color: var(--b9-ink);
    border: 1px solid var(--b9-line);
    text-decoration: none;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-score-breakdown,
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools,
  #app .reference-ranking-card.casino-card > .operator-action-cell > small {
    grid-column: 1 / -1;
    min-width: 0;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-score-breakdown summary,
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button {
    min-height: 44px;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }
  #app .reference-ranking-card.casino-card > .operator-action-cell > small {
    margin-top: 1px;
    color: var(--b9-muted);
    font-size: .65rem;
    line-height: 1.35;
  }

  #app .home-offer-link.bastion-offer-brief {
    position: relative;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 10px;
    padding: 13px 2px;
    border-left: 2px solid var(--b9-red);
  }
  #app .home-offer-number { width: 42px; height: 42px; }
  #app .home-offer-arrow {
    grid-column: 2;
    justify-self: start;
    min-height: 40px;
    margin-top: 1px;
  }
  #app .bastion-offer-copy > small { font-size: .58rem; line-height: 1.4; }
  #app .bastion-offer-copy > strong { font-size: 1.08rem; }
  #app .bastion-offer-copy > .bastion-offer-summary { font-size: .78rem; }

  #app .bonus-lab-workbench { grid-template-columns: minmax(0, 1fr); }
  #app .bonus-lab-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }
  #app .bonus-lab-intro { min-width: 0; }
  #app .bonus-lab-results { border-left: 0; border-top: 1px solid var(--b9-line); }
  #app .bonus-lab-disclaimer { grid-column: 1; }
  #app .bonus-lab-featured .bonus-lab-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .editorial-command-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 380px) {
  #app .reference-ranking-card.casino-card { grid-template-columns: 37px minmax(0, 1fr) 64px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell { grid-template-columns: 38px minmax(0, 1fr); gap: 8px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell .casino-logo-frame { width: 38px; height: 38px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell h2,
  #app .reference-ranking-card.casino-card > .operator-brand-cell h3 { font-size: 1rem; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell,
  #app .reference-ranking-card.casino-card > .operator-offer-cell { padding-inline: 11px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell { padding-inline: 11px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell .btn,
  #app .reference-ranking-card.casino-card > .operator-action-cell .text-action { padding-inline: 5px; font-size: .74rem; }
  #app .bonus-lab-featured .bonus-lab-inputs { grid-template-columns: minmax(0, 1fr); }
  #app .bonus-lab-featured .bonus-lab-contribution { grid-column: auto; }
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .home-offer-link.bastion-offer-brief:hover .gift-lid,
  #app .home-offer-link.bastion-offer-brief:focus-visible .gift-lid { transform: translateY(-2px) rotate(-7deg); }
  #app .home-offer-link.bastion-offer-brief:hover .home-offer-number,
  #app .home-offer-link.bastion-offer-brief:focus-visible .home-offer-number { border-color: var(--b9-yellow); }
}


/* Bastion: remove stacked decorative layers and give the phone layout its own hierarchy. */
:root {
  --b9-mobile-gutter: clamp(14px, 4vw, 22px);
}

html, body { max-width: 100%; }
body { overflow-x: clip; background: var(--b9-paper); }
#app { min-width: 320px; }

#app .site-header {
  background: var(--b9-paper);
  border-bottom: 1px solid var(--b9-line);
  box-shadow: none;
  backdrop-filter: none;
}
#app .header-progress { height: 2px; background: var(--b9-red); box-shadow: none; }
#app .primary-nav a::after { background: var(--b9-red); box-shadow: none; }
#app .saved-header-button,
#app .menu-toggle,
#app .header-tools .icon-button { box-shadow: none; }

/* The opening screen is a market lookup, not a promotional landing-page hero. */
#app .reference-hero {
  min-height: 0;
  background: var(--b9-paper);
  border-bottom: 1px solid var(--b9-line);
}
#app .reference-hero-grid {
  align-items: center;
  padding-block: clamp(42px, 5.2vw, 68px);
}
#app .reference-hero::before,
#app .reference-hero::after { display: none !important; background-image: none !important; }
#app .reference-hero-copy .reference-kicker {
  max-width: 100%;
  color: var(--b9-muted);
  border-bottom-color: var(--b9-red);
  font: 700 .72rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .055em;
}
#app .reference-hero h1 {
  max-width: 15ch;
  margin-block: 0 14px;
  color: var(--b9-ink) !important;
  font-family: var(--b9-type-interface) !important;
  font-size: clamp(2.9rem, 4.5vw, 4rem) !important;
  font-weight: 720 !important;
  letter-spacing: -.055em !important;
  line-height: .99 !important;
  text-shadow: none !important;
}
#app .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 48ch;
  color: var(--b9-muted) !important;
  font-size: 1.03rem;
  line-height: 1.55;
}
#app .reference-hero .hero-search,
#app .reference-hero .hero-search input,
#app .reference-hero .hero-search .btn,
#app .reference-hero .hero-actions .btn,
#app .reference-hero .home-offer-link,
#app .reference-top-board,
#app .reference-hero .top-board-all {
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
}
#app .reference-hero .hero-search { margin-top: 18px; }
#app .reference-hero .hero-search .btn { min-height: 50px; }
#app .home-coverage-board {
  background: var(--b9-panel);
  border-top: 2px solid var(--b9-red);
  box-shadow: none;
  backdrop-filter: none;
}
#app .home-coverage-metrics strong { font-family: var(--b9-type-interface); font-variant-numeric: tabular-nums; font-weight: 650; }
#app .home-coverage-note { max-width: 48ch; }
#app .home-offer-link {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--b9-line);
  border-bottom: 1px solid var(--b9-line);
}
#app .home-offer-link:hover { transform: none; box-shadow: none; }
#app .home-offer-number { border-radius: 2px; box-shadow: none; }
#app .bastion-offer-copy > small { font-size: .68rem; line-height: 1.4; }
#app .bastion-offer-copy > strong { font-size: 1.12rem; }
#app .bastion-offer-copy > .bastion-offer-summary { font-size: .9rem; line-height: 1.45; }

/* Replace the accumulated stock-photo headers and atmospheric treatment with a clear masthead. */
#app .page-header-photo {
  min-height: 0;
  padding-block: clamp(30px, 4vw, 52px);
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-bottom: 1px solid var(--b9-line);
}
#app .page-header-photo :is(h1, .lead, .eyebrow, .byline, .byline a) { color: var(--b9-ink); }
#app .page-header-photo .lead,
#app .page-header-photo .byline small { color: var(--b9-muted); }
#app .section-atmosphere,
#app .methodology-teaser,
#app .responsible-block { background-image: none; box-shadow: none; }
#app .section-heading { border-top-color: var(--b9-line); }
#app .btn, #app .icon-button, #app .menu-toggle, #app .operator-tools button { box-shadow: none; }
#app .btn:hover, #app .reference-ranking-card:hover { transform: none; box-shadow: none; }
#app .casino-card, #app .guide-card, #app .reference-top-board, #app .offer-record-browser { box-shadow: none; }

@media (max-width: 760px) {
  body { font-size: 16px; }
  #app .container, #app .narrow { width: calc(100% - (var(--b9-mobile-gutter) * 2)); }
  #app .site-header, #app .header-inner { min-height: 58px; }
  #app .header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px 44px;
    gap: 7px;
  }
  #app .brand { width: 100%; max-width: 100%; min-width: 0; }
  #app .brand-symbol { flex-basis: 31px; width: 31px; height: 31px; }
  #app .brand-word { font-size: clamp(16px, 4.5vw, 19px); }
  #app .menu-toggle { grid-column: 2; width: 42px; min-width: 42px; height: 42px; }
  #app .header-tools {
    grid-column: 3;
    width: 44px;
    min-width: 44px;
    justify-content: flex-end;
    margin: 0;
  }
  #app .header-tools .account-header-button,
  #app .header-tools .theme-toggle,
  #app .header-tools [data-search-open],
  #app .header-tools .province-mini,
  #app .header-tools .lang-switch { display: none !important; }
  #app .saved-header-button { width: 40px; min-width: 40px; min-height: 42px; padding-inline: 4px; }
  #app .mobile-panel {
    inset-block-start: 58px;
    padding-inline: max(var(--b9-mobile-gutter), env(safe-area-inset-left));
    border-top: 2px solid var(--b9-red);
    background: var(--b9-panel);
    box-shadow: none;
    backdrop-filter: none;
  }
  #app .mobile-menu-language {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block: 12px;
    padding-block: 10px;
    border-block: 1px solid var(--b9-line);
    color: var(--b9-muted);
    font-size: .78rem;
  }
  #app .mobile-menu-language span { margin-right: auto; }
  #app .mobile-menu-language a {
    min-width: 48px;
    min-height: 44px;
    display: grid;
    place-items: center;
    padding-inline: 10px;
    color: var(--b9-ink);
    border: 1px solid var(--b9-line);
    font-weight: 700;
    text-decoration: none;
  }
  #app .mobile-menu-language a[aria-current="true"] { border-color: var(--b9-red); box-shadow: inset 0 -2px var(--b9-red); }

  #app .reference-hero { overflow: clip; }
  #app .reference-hero-grid {
    width: calc(100% - (var(--b9-mobile-gutter) * 2));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 19px;
    padding-block: 27px 24px;
  }
  #app .reference-hero-copy { min-width: 0; }
  #app .reference-hero-copy .reference-kicker {
    width: fit-content;
    margin-bottom: 13px;
    font-size: .7rem;
    letter-spacing: .025em;
  }
  #app .reference-hero h1 {
    max-width: 18ch;
    margin-bottom: 12px;
    font-size: clamp(2.15rem, 8.2vw, 2.75rem) !important;
    line-height: 1.03 !important;
    letter-spacing: -.05em !important;
  }
  #app .reference-hero-copy > p:not(.reference-kicker) {
    max-width: 48ch;
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5;
  }
  #app .reference-hero .hero-search { margin-top: 15px; }
  #app .reference-hero .hero-search input { min-width: 0; min-height: 48px; font-size: 16px; }
  #app .reference-hero .hero-search .btn { min-height: 48px; }
  #app .reference-hero .hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; margin-top: 8px; }
  #app .reference-hero .hero-actions > * { width: 100%; min-height: 48px; }
  #app .home-coverage-board { min-width: 0; }
  #app .home-coverage-head { gap: 8px; }
  #app .home-coverage-head > div { min-width: 0; }
  #app .home-coverage-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .home-coverage-metrics > div { min-width: 0; padding-inline: 10px; }
  #app .home-coverage-metrics > div:first-child { padding-left: 12px; }
  #app .home-coverage-metrics strong { font-size: 1.55rem; }
  #app .home-coverage-metrics span { font-size: .72rem; line-height: 1.3; }
  #app .home-coverage-note { font-size: .82rem; line-height: 1.45; }
  #app .bastion-offer-copy > small { font-size: .67rem; }
  #app .bastion-offer-copy > strong { font-size: 1.08rem; line-height: 1.22; }
  #app .bastion-offer-copy > .bastion-offer-summary { display: -webkit-box; overflow: hidden; font-size: .94rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  #app .home-hero-foot { align-items: flex-start; }
  #app .home-hero-foot small { font-size: .75rem; }

  #app :is(.page-header, .page-header-photo) { padding-block: 26px; }
  #app .page-header-photo h1 { font-family: var(--b9-type-editorial); font-size: clamp(2rem, 8vw, 2.65rem); line-height: 1.04; }
  #app .section { padding-block: 38px; }
  #app .section-sm { padding-block: 24px; }
  #app .section-heading { align-items: flex-start; gap: 12px; }
  #app .section-heading h2 { font-size: clamp(1.7rem, 7.2vw, 2.25rem); line-height: 1.05; }
  #app .section-heading p:not(.eyebrow),
  #app .page-header .lead,
  #app .article-content p,
  #app .guide-layout .article-content { font-size: 1rem; line-height: 1.65; }
  #app .operator-offer-cell > small,
  #app .operator-facts-cell dl dd,
  #app .operator-payment-list > span,
  #app .operator-action-cell .btn,
  #app .operator-action-cell .text-action { font-size: .88rem; }
  #app .mobile-utility-rail {
    min-height: calc(58px + env(safe-area-inset-bottom));
    padding: 4px max(8px, env(safe-area-inset-left)) calc(4px + env(safe-area-inset-bottom));
    background: var(--b9-paper);
    border-top: 1px solid var(--b9-line);
    box-shadow: none;
  }
  #app .mobile-utility-rail a {
    position: relative;
    min-height: 48px;
    justify-content: center;
    gap: 0;
    padding-inline: 2px;
    color: var(--b9-muted);
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: -.01em;
  }
  #app .mobile-utility-rail a > .ui-icon { display: none !important; }
  #app .mobile-utility-rail a > span { display: inline-flex; align-items: center; gap: 4px; }
  #app .mobile-utility-rail a[aria-current="page"] { color: var(--b9-ink); }
  #app .mobile-utility-rail a[aria-current="page"]::before { position: absolute; inset: -5px 18% auto; height: 2px; background: var(--b9-red); content: ""; }
  #app .mobile-utility-rail .utility-offer-count { min-width: 17px; height: 17px; display: grid; place-items: center; padding-inline: 4px; color: #fff; background: var(--b9-red); border-radius: 2px; font-size: .7rem; font-variant-numeric: tabular-nums; }
  #main-content { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  #app .casino-card, #app .guide-card, #app .source-register, #app .official-registry-browser { border-radius: 2px; box-shadow: none; }
  #app .filters :is(input, select), #app input, #app select, #app textarea { min-height: 46px; font-size: 16px; }
  #app .operator-action-cell .btn, #app .operator-action-cell .text-action, #app .operator-score-breakdown summary { min-height: 48px; }
}

@media (max-width: 380px) {
  #app .reference-hero-grid { gap: 16px; padding-block: 22px 20px; }
  #app .reference-hero h1 { max-width: 14ch; font-size: clamp(2rem, 8.4vw, 2.5rem); line-height: 1.02; }
  #app .reference-hero-copy .reference-kicker { font-size: .65rem; }
  #app .reference-hero .hero-search { display: grid; grid-template-columns: minmax(0,1fr); gap: 6px; }
  #app .reference-hero .hero-search .btn { width: 100%; }
  #app .home-coverage-head { align-items: flex-start; }
  #app .home-coverage-head .select-control { max-width: 116px; }
  #app .home-coverage-metrics > div { padding-inline: 7px; }
  #app .home-coverage-metrics > div:first-child { padding-left: 10px; }
  #app .home-coverage-metrics span { font-size: .68rem; }
  #app .home-offer-link.bastion-offer-brief { grid-template-columns: 40px minmax(0,1fr); gap: 9px; }
  #app .home-offer-number { width: 38px; height: 38px; }
  #app .bastion-offer-copy > small { font-size: .62rem; }
  #app .mobile-utility-rail a { font-size: .72rem; }
  #app .reference-ranking-card.casino-card > .operator-score-cell small { font-size: .6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #app .reference-hero-photo { animation: none !important; transform: none !important; }
}


/* The registry panel retains its own source colours in light mode. */
html[data-theme="light"] #app .home-coverage-board {
  --b9-ink: #171a1e;
  --b9-muted: #66707a;
  --b9-paper: #f1f3f5;
  --b9-panel: #fff;
  --b9-panel-raised: #f8f9fa;
  --b9-line: #d9dde1;
  --b9-red: #b71f2b;
  --b9-yellow: #76540D;
}

@media (max-width: 980px) {
  #app .reference-hero h1 { max-width: 19ch; font-size: clamp(2.65rem, 6.8vw, 3.7rem) !important; }
}
@media (max-width: 760px) {
  #app .reference-hero h1 { max-width: 20ch; font-size: clamp(2.15rem, 7.9vw, 2.68rem) !important; }
}
@media (max-width: 380px) {
  #app .reference-hero h1 { max-width: 20ch; font-size: 2.02rem !important; }
}
/* Keep the same credited sports photograph in the mobile hero. */
@media (max-width: 760px) {
  #app .sports-hub-hero { min-height: 0; color: #f4f2ed; background: #090b0d; }
  #app .sports-hub-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 17px;
    align-items: start;
    padding-block: 22px 20px;
  }
  #app .sports-hub-hero-grid > div:first-child > .reference-kicker { color: var(--b9-red); }
  #app .sports-hub-hero h1 {
    max-width: 19ch;
    margin-block: 8px 11px;
    color: var(--b9-ink);
    font-family: var(--b14-display);
    font-size: clamp(2.1rem, 8vw, 2.7rem);
    line-height: 1.02;
  }
  #app .sports-hub-hero-grid > div:first-child > p:not(.reference-kicker) {
    max-width: 49ch;
    color: var(--b9-muted);
    font-size: .96rem;
    line-height: 1.5;
  }
  #app .sports-hub-hero-grid > div:first-child > small { color: var(--b9-muted); }
  #app .sports-scoreboard {
    color: var(--b9-ink);
    background: var(--b9-panel);
    border-top: 2px solid var(--b9-red);
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
  }
  #app .sports-scoreboard > div { border-color: var(--b9-line); }
  #app .sports-scoreboard span { color: var(--b9-muted); }
  #app .sports-scoreboard strong { color: var(--b9-ink); }
}
@media (max-width: 380px) {
  #app .sports-hub-hero h1 { font-size: 2rem; }
  #app .sports-hub-hero-grid { padding-block: 19px 17px; }
}


/* Exact-domain checks make the dated regulator record tangible and auditable. */
body[data-route="search"] .bonus-hotspot,
body[data-route="provinces"] .bonus-hotspot,
body[data-route="reviews"] .bonus-hotspot { display: none !important; }
#app .domain-check-record {
  --domain-paper: #eeeae0;
  --domain-ink: #191b1c;
  --domain-muted: #555b5d;
  --domain-line: #cbc7ba;
  --domain-red: #b5222c;
  position: relative;
  width: min(100%, 1020px);
  margin: 25px auto 30px;
  padding: clamp(19px, 3.4vw, 34px);
  overflow: hidden;
  color: var(--domain-ink);
  background: var(--domain-paper);
  border: 1px solid var(--domain-line);
  border-left: 3px solid var(--domain-red);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
}
#app .domain-check-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
#app .domain-check-top .eyebrow { margin: 0; color: var(--domain-muted); }
#app .domain-check-stamp {
  padding: 5px 7px;
  color: var(--domain-red);
  border: 1px solid currentColor;
  font: 700 .6rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .065em;
  text-align: center;
}
#app .domain-check-record h2 {
  max-width: 26ch;
  margin: 21px 0 8px;
  color: var(--domain-ink);
  font-family: var(--b14-display, Georgia, serif);
  font-size: clamp(1.8rem, 4.2vw, 3.1rem);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -.035em;
}
#app .domain-check-query {
  width: fit-content;
  max-width: 100%;
  margin: 0 0 23px;
  padding: 6px 9px;
  overflow-wrap: anywhere;
  color: var(--domain-ink);
  background: rgba(25, 27, 28, .055);
  font: 600 .88rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
}
#app .domain-check-operator {
  display: grid;
  grid-template-columns: minmax(130px, .45fr) minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  padding: 15px 0;
  border-top: 1px solid var(--domain-line);
  border-bottom: 1px solid var(--domain-line);
}
#app .domain-check-operator > span,
#app .domain-check-facts dt { color: var(--domain-muted); font-size: .73rem; }
#app .domain-check-operator strong { font-size: clamp(.98rem, 2vw, 1.22rem); line-height: 1.35; }
#app .domain-check-categories { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 13px; }
#app .domain-check-categories span {
  padding: 4px 8px;
  color: var(--domain-muted);
  border: 1px solid var(--domain-line);
  font-size: .69rem;
}
#app .domain-check-siblings { margin-top: 19px; }
#app .domain-check-siblings h3 { margin: 0 0 8px; color: var(--domain-muted); font-size: .72rem; font-weight: 700; letter-spacing: .03em; }
#app .domain-check-siblings ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--domain-line); }
#app .domain-check-siblings li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; min-width: 0; padding: 9px 0; border-bottom: 1px solid var(--domain-line); }
#app .domain-check-siblings li span { min-width: 0; font-size: .81rem; }
#app .domain-check-siblings code { color: var(--domain-muted); font-size: .66rem; overflow-wrap: anywhere; text-align: right; }
#app .domain-check-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 15px; margin: 19px 0 0; border-top: 1px solid var(--domain-line); }
#app .domain-check-facts > div { min-width: 0; padding: 12px 0 2px; }
#app .domain-check-facts dt { margin-bottom: 5px; }
#app .domain-check-facts dd { margin: 0; font-size: .79rem; line-height: 1.4; }
#app .domain-check-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 19px; margin-top: 21px; }
#app .domain-check-actions .btn { min-height: 43px; color: #f7f2e8; background: #202325; border-color: #202325; }
#app .domain-check-actions .btn:hover { background: var(--domain-red); border-color: var(--domain-red); }
#app .domain-check-actions .text-action { color: var(--domain-ink); font-size: .79rem; text-decoration: underline; text-underline-offset: 3px; }
#app .domain-check-actions .text-action:hover { color: var(--domain-red); }
#app .domain-check-footnote,
#app .domain-check-explanation { max-width: 82ch; margin: 18px 0 0; color: var(--domain-muted); font-size: .78rem; line-height: 1.55; }
#app .domain-check-record.is-unmatched { border-left-color: #8d691f; }
#app .domain-check-record.is-unmatched .domain-check-stamp { color: #765918; }
#app .domain-check-record.is-unmatched .domain-check-explanation { color: var(--domain-ink); font-size: .91rem; }
html[data-theme="light"] #app .domain-check-record { box-shadow: 0 12px 32px rgba(25, 27, 28, .08); }
@media (max-width: 680px) {
  #app .domain-check-record { margin-block: 17px 22px; padding: 19px; }
  #app .domain-check-top { align-items: flex-start; }
  #app .domain-check-stamp { max-width: 48%; }
  #app .domain-check-record h2 { margin-top: 17px; font-size: clamp(1.75rem, 8vw, 2.4rem); }
  #app .domain-check-operator { grid-template-columns: 1fr; gap: 5px; }
  #app .domain-check-siblings ul { grid-template-columns: 1fr; }
  #app .domain-check-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  #app .domain-check-record { padding: 15px; }
  #app .domain-check-top { gap: 8px; }
  #app .domain-check-stamp { font-size: .53rem; }
  #app .domain-check-facts { gap: 0 9px; }
  #app .domain-check-actions { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  #app .domain-check-record, #app .domain-check-record * { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Review pages connect their editorial brand to the exact official record. */
#app .review-registry-trails { display: grid; gap: 12px; min-width: 0; }
#app .review-registry-trail {
  --review-paper: #eeeae0;
  --review-ink: #191b1c;
  --review-muted: #555b5d;
  --review-line: #cbc7ba;
  --review-red: #b5222c;
  margin: 22px 0 0;
  padding: clamp(16px, 2.7vw, 26px);
  color: var(--review-ink);
  background: var(--review-paper);
  border: 1px solid var(--review-line);
  border-left: 3px solid var(--review-red);
}
#app .review-registry-trail.is-unmatched { border-left-color: var(--review-line); }
#app .review-registry-trail.is-unmatched .review-registry-stamp { color: var(--review-muted); }
#app .review-registry-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
#app .review-registry-head .eyebrow { margin: 0 0 7px; color: var(--review-muted); }
#app .review-registry-head h3 { margin: 0; color: var(--review-ink); font-family: var(--b14-display, Georgia, serif); font-size: clamp(1.25rem, 2.5vw, 1.8rem); font-weight: 520; line-height: 1.12; }
#app .review-registry-stamp { flex: 0 0 auto; max-width: 45%; padding: 5px 7px; color: var(--review-red); border: 1px solid currentColor; font: 700 .58rem/1.25 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .055em; text-align: center; }
#app .review-registry-route { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1.25fr); align-items: center; gap: 10px; margin-top: 18px; padding: 13px 0; border-block: 1px solid var(--review-line); }
#app .review-registry-route > div { display: grid; gap: 6px; min-width: 0; }
#app .review-registry-route small,
#app .review-registry-products > span { color: var(--review-muted); font: 700 .59rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .045em; }
#app .review-registry-route strong { overflow-wrap: anywhere; color: var(--review-ink); font-size: .88rem; line-height: 1.35; }
#app .review-registry-route > span { color: var(--review-red); font-size: 1.15rem; text-align: center; }
#app .review-registry-products { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
#app .review-registry-products b { padding: 4px 7px; color: var(--review-muted); border: 1px solid var(--review-line); font-size: .68rem; font-weight: 600; }
#app .review-registry-related { margin-top: 16px; }
#app .review-registry-related h4 { margin: 0 0 7px; color: var(--review-muted); font-size: .7rem; font-weight: 700; }
#app .review-registry-related ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--review-line); }
#app .review-registry-related li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-width: 0; padding: 8px 0; border-bottom: 1px solid var(--review-line); }
#app .review-registry-related li span { font-size: .75rem; }
#app .review-registry-related code { color: var(--review-muted); font-size: .62rem; overflow-wrap: anywhere; text-align: right; }
#app .review-registry-note { margin: 13px 0 0; color: var(--review-ink); font-size: .78rem; line-height: 1.5; }
#app .review-registry-dates { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding-top: 10px; border-top: 1px solid var(--review-line); }
#app .review-registry-dates > div { min-width: 0; }
#app .review-registry-dates dt { margin-bottom: 4px; color: var(--review-muted); font-size: .67rem; }
#app .review-registry-dates dd { margin: 0; color: var(--review-ink); font-size: .73rem; line-height: 1.35; }
#app .review-registry-links { display: flex; flex-wrap: wrap; gap: 10px 17px; margin-top: 16px; }
#app .review-registry-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--review-ink); font-size: .75rem; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#app .review-registry-links a:hover { color: var(--review-red); }
#app .review-registry-footnote { margin: 14px 0 0; color: var(--review-muted); font-size: .7rem; line-height: 1.5; }
#app .market-directory-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 22px; margin-top: 22px; }
#app .market-directory-caveat { max-width: 66ch; margin-top: 19px; padding-left: 12px; color: var(--b9-muted); border-left: 2px solid var(--b9-gold); font-size: .76rem; line-height: 1.5; }
#app .market-directory-hero .market-directory-facts { align-self: center; }
#app .market-directory-unavailable { padding-top: 36px; }
#app .market-directory-unavailable .card { padding: clamp(22px, 4vw, 40px); }
#app .market-directory-unavailable h2 { max-width: 22ch; }
#app .market-directory-unavailable .btn { margin-top: 12px; }
body[data-route="market"] .bonus-hotspot { display: none !important; }
#app .review-registry-related h4,
#app .review-registry-related li span,
#app .review-registry-related code { color: var(--review-ink); }
#app .review-registry-related h4 { color: var(--review-muted); }
#app .review-registry-related code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#app #security .licence-table { min-width: 0; }
#app #security .licence-table table { width: 100%; min-width: 0; max-width: 100%; table-layout: fixed; }
#app #security .licence-table th,
#app #security .licence-table td { overflow-wrap: anywhere; white-space: normal; }
@media (max-width: 620px) {
  #app .review-registry-head { flex-direction: column; }
  #app .review-registry-stamp { max-width: 100%; }
  #app .review-registry-route { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1.1fr); gap: 7px; }
  #app .review-registry-route strong { font-size: .76rem; }
  #app .review-registry-related ul { grid-template-columns: 1fr; }
  #app .review-registry-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .market-directory-actions { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: stretch; align-items: start; gap: 7px; }
  #app .market-directory-actions > .text-action { justify-self: start; }
  #app .market-directory-hero .market-directory-facts { width: 100%; }
  #app #security .licence-table { overflow: visible; }
  #app #security .licence-table table,
  #app #security .licence-table tbody { display: block; width: 100%; max-width: 100%; }
  #app #security .licence-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  #app #security .licence-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; width: 100%; max-width: 100%; padding: 12px; }
  #app #security .licence-table td { display: block; width: 100%; max-width: 100%; min-width: 0; padding: 0; border: 0; color: #eeeae0; font-size: .78rem; line-height: 1.4; white-space: normal !important; overflow-wrap: anywhere; word-break: break-word; }
  #app #security .licence-table td::before { display: block; margin-bottom: 5px; content: attr(data-label); color: #aaa79e; font: 700 .57rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em; text-transform: uppercase; }
}

@media (max-width: 760px) {
  #app .mobile-utility-rail { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  #app .review-registry-trail { padding: 14px; }
  #app .review-registry-route { grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); gap: 5px; }
  #app .review-registry-route small { font-size: .52rem; }
  #app .review-registry-route strong { font-size: .7rem; }
  #app .review-registry-dates { gap: 8px; }
  #app #security .licence-table tr { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}


/* Offer counts stay factual; the gift responds only to an intentional interaction. */
#app .nav-bonus-count,
#app .mobile-bonus-count {
  min-width: 21px;
  height: 21px;
  display: inline-grid;
  place-items: center;
  padding-inline: 5px;
  color: #fff;
  background: var(--b9-red);
  border: 1px solid var(--b9-red);
  border-radius: 2px;
  font: 750 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
#app .nav-bonus-count[data-count="0"],
#app .mobile-bonus-count[data-count="0"] {
  color: var(--b9-muted);
  background: transparent;
  border-color: var(--b9-line);
}
#app .mobile-panel a.mobile-bonus-link { display: flex; align-items: center; gap: 10px; }
#app .mobile-panel .mobile-bonus-count { margin-left: auto; }
#app .bonus-hotspot-mark .ui-icon { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  #app .ui-icon-gift .gift-lid,
  #app .bonus-hotspot:active .gift-lid {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

/* Keep the offer shortcut available on desktop; mobile uses the five-item rail. */
@media (min-width: 761px) {
  body:not([data-route="bonuses"]):not([data-route="search"]):not([data-route="provinces"]):not([data-route="reviews"]):not([data-route="market"]) #app .bonus-hotspot {
    display: grid !important;
  }
}

/* Bastion: bring the documented arena photograph back to the dark home desk. */
html:not([data-theme="light"]) #app .reference-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: #f4f2ed;
  background: #090b0d !important;
}
html:not([data-theme="light"]) #app .reference-hero-grid {
  position: relative;
  z-index: 1;
}
html:not([data-theme="light"]) #app .reference-hero h1 {
  max-width: 14ch !important;
  color: #f4f2ed !important;
  font-family: var(--b9-type-editorial) !important;
  font-size: clamp(2.9rem, 5.25vw, 4.65rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.025em !important;
  line-height: 1.02 !important;
  text-wrap: balance;
}
@media (max-width: 760px) {
  html:not([data-theme="light"]) #app .reference-hero h1 {
    max-width: 17ch !important;
    font-size: clamp(2.1rem, 8.8vw, 2.85rem) !important;
    line-height: .98 !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-theme="light"]) #app .reference-hero-copy,
  html:not([data-theme="light"]) #app .home-coverage-board {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Compact saved-operators control: a clear bookmark plus an anchored count. */
#app .saved-header-button {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
}
#app .saved-header-button::before {
  content: "";
  display: block;
  flex: 0 0 13px;
  width: 13px;
  height: 17px;
  border: 0;
  background: currentColor;
  clip-path: polygon(10% 0, 90% 0, 90% 100%, 50% 76%, 10% 100%);
  transition: color .16s ease;
}
#app .saved-header-button:hover::before,
#app .saved-header-button:focus-visible::before {
  color: var(--b9-red);
}
@media (max-width: 1240px) {
  #app .saved-header-button {
    width: 44px;
    min-width: 44px;
    height: 44px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  #app .saved-header-button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  #app .saved-header-button::before {
    flex-basis: 14px;
    width: 14px;
    height: 18px;
  }
  #app .saved-header-button > b {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 1;
    min-width: 19px;
    height: 19px;
    display: grid;
    place-items: center;
    padding-inline: 4px;
    border: 1px solid var(--b9-paper);
    border-radius: 2px;
    font-size: .61rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .saved-header-button::before { transition: none; }
}
@media (max-width: 760px) {
  html:not([data-theme="light"]) #app .reference-hero-copy,
  html:not([data-theme="light"]) #app .home-coverage-board {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Bonus records lead with the dated, source-linked offer; the calculator follows as a decision aid. */
body[data-route="bonuses"] #app .bonus-register-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-block: 10px 4px;
  padding-block: 12px 13px;
  border-top: 2px solid var(--b9-red);
  border-bottom: 1px solid var(--b9-line);
}
body[data-route="bonuses"] #app .bonus-register-intro > div { display: grid; gap: 5px; min-width: 0; }
body[data-route="bonuses"] #app .bonus-register-intro .eyebrow {
  margin: 0;
  color: var(--b9-red);
  font: 750 .59rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .09em;
}
body[data-route="bonuses"] #app .bonus-register-intro strong {
  color: var(--b9-ink);
  font-family: var(--b14-display, Georgia, serif);
  font-size: clamp(1.04rem, 2vw, 1.28rem);
  font-weight: 520;
  line-height: 1.25;
}
body[data-route="bonuses"] #app .bonus-register-jump {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto auto 16px;
  align-items: baseline;
  gap: 6px;
  min-height: 42px;
  padding: 8px 0 8px 17px;
  color: var(--b9-ink);
  border-left: 1px solid var(--b9-line);
  text-decoration: none;
  font-size: .69rem;
}
body[data-route="bonuses"] #app .bonus-register-jump span:first-child {
  color: var(--b9-red);
  font: 750 1.13rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
body[data-route="bonuses"] #app .bonus-register-jump b {
  align-self: center;
  color: var(--b9-red);
  font-size: 1rem;
  font-weight: 500;
}
body[data-route="bonuses"] #app .bonus-results-first { padding-top: 12px; }
body[data-route="bonuses"] #app .bonus-results-first .filters { margin-bottom: 0; }
body[data-route="bonuses"] #app .bonus-results-first + .bonus-lab { border-top: 1px solid var(--b9-line); }
@media (max-width: 620px) {
  body[data-route="bonuses"] #app .bonus-register-intro { gap: 12px; margin-top: 5px; padding-block: 10px; }
  body[data-route="bonuses"] #app .bonus-register-intro strong { max-width: 28ch; font-size: 1rem; }
  body[data-route="bonuses"] #app .bonus-register-jump { grid-template-columns: auto; justify-items: center; gap: 2px; min-width: 56px; padding-left: 11px; font-size: .61rem; }
  body[data-route="bonuses"] #app .bonus-register-jump b { display: none; }
  body[data-route="bonuses"] #app .bonus-results-first { padding-top: 8px; }
}
@media (max-width: 360px) {
  body[data-route="bonuses"] #app .bonus-register-intro { align-items: flex-start; }
  body[data-route="bonuses"] #app .bonus-register-intro strong { font-size: .94rem; }
  body[data-route="bonuses"] #app .bonus-register-jump { min-width: 48px; padding-left: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="bonuses"] #app .bonus-register-jump b { transition: none; }
}
@media (max-width: 620px) {
  body[data-route="bonuses"] #app .page-header { padding-block: 18px 15px; }
  body[data-route="bonuses"] #app .page-header .lead { margin-block: 7px 0; line-height: 1.48; }
  body[data-route="bonuses"] #app .listing-coverage-notice { margin-block: 10px 0; padding: 8px 10px; font-size: .69rem; line-height: 1.4; }
  body[data-route="bonuses"] #app .bonus-results-first .filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 10px; }
  body[data-route="bonuses"] #app .bonus-results-first .filter-count { grid-column: 1 / -1; margin-top: -2px; }
}
@media (max-width: 360px) {
  body[data-route="bonuses"] #app .page-header { padding-block: 15px 12px; }
  body[data-route="bonuses"] #app .bonus-results-first .filters { gap: 7px; }
  body[data-route="bonuses"] #app .bonus-results-first .filters label { min-width: 0; font-size: .68rem; }
  body[data-route="bonuses"] #app .bonus-results-first .filters select { min-width: 0; padding-inline: 8px; font-size: .84rem; }
}
@media (max-width: 620px) {
  body[data-route="bonuses"] #app .bonus-results-first .filters { padding: 9px; }
  body[data-route="bonuses"] #app .bonus-results-first .filters select { min-height: 43px; }
}
@media (max-width: 620px) {
  body[data-route="bonuses"] #app .breadcrumbs { min-height: 0; padding-block: 3px 0; font-size: .62rem; }
  body[data-route="bonuses"] #app .page-header { padding-block: 11px 10px; }
  body[data-route="bonuses"] #app .page-header h1 { margin-bottom: 6px; font-size: clamp(1.85rem,7.2vw,2.15rem); line-height: 1.02; }
  body[data-route="bonuses"] #app .page-header .lead { line-height: 1.4; }
  body[data-route="bonuses"] #app .listing-coverage-notice { margin-top: 8px; }
}
@media (max-width: 360px) {
  body[data-route="bonuses"] #app .page-header h1 { font-size: 1.78rem; }
}
@media (max-width: 620px) {
  body[data-route="bonuses"] #app .breadcrumbs {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
  }
}

/* Review discovery keeps the query wide and the four facets compact on touch screens. */
@media (max-width: 620px) {
  body[data-route="reviews"] #app .filters-rich {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: end;
    gap: 9px 10px;
    padding: 10px;
    border-radius: 2px;
  }
  body[data-route="reviews"] #app .filters-rich > label:first-child { grid-column: 1 / -1; }
  body[data-route="reviews"] #app .filters-rich label { min-width: 0; font-size: .69rem; }
  body[data-route="reviews"] #app .filters-rich .input-control,
  body[data-route="reviews"] #app .filters-rich .select-control {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding-inline: 9px;
    font-size: 16px;
  }
  body[data-route="reviews"] #app .filters-rich > button { grid-column: 1; min-height: 42px; justify-self: start; }
  body[data-route="reviews"] #app .filters-rich > .filter-count { grid-column: 2; justify-self: end; align-self: center; }
}
@media (max-width: 360px) {
  body[data-route="reviews"] #app .filters-rich { gap: 7px; padding: 8px; }
  body[data-route="reviews"] #app .filters-rich label { font-size: .65rem; }
  body[data-route="reviews"] #app .filters-rich .input-control,
  body[data-route="reviews"] #app .filters-rich .select-control { padding-inline: 7px; }
}


/* Sports desk: keep the editorial lead and source summary together on phones. */
@media (max-width: 760px) {
  body[data-route="sports"] #app .sports-hub-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 0;
    color: #f4f2ed;
    background: #090b0d;
    border-bottom: 1px solid var(--b9-line);
  }
  body[data-route="sports"] #app .sports-hub-photo { display: block !important; }
  body[data-route="sports"] #app .sports-hub-hero::after { content: none !important; display: none !important; }
  body[data-route="sports"] #app .sports-hub-hero-grid {
    position: relative;
    z-index: 3;
    width: min(100% - 32px, 1280px);
    grid-template-columns: minmax(0,1fr);
    gap: 18px;
    padding-block: 24px 20px;
  }
  body[data-route="sports"] #app .sports-hub-hero-grid > div:first-child > .reference-kicker {
    width: fit-content;
    max-width: 100%;
    margin: 0 0 12px;
    padding: 0;
    color: var(--b9-red);
    background: transparent;
    box-shadow: none;
    font-size: .69rem;
    font-weight: 750;
    letter-spacing: .075em;
    text-transform: uppercase;
  }
  body[data-route="sports"] #app .sports-hub-hero h1 {
    max-width: 17ch;
    margin: 0 0 11px;
    font-size: clamp(2.15rem, 9vw, 3rem);
    line-height: 1.02;
    letter-spacing: -.035em;
  }
  body[data-route="sports"] #app .sports-hub-hero-grid > div:first-child > p:not(.reference-kicker) {
    max-width: 48ch;
    margin-bottom: 16px;
    font-size: .94rem;
    line-height: 1.52;
  }
  body[data-route="sports"] #app .sports-hub-hero-grid > div:first-child > small {
    margin-top: 11px;
    color: var(--b9-muted);
  }
  body[data-route="sports"] #app .sports-hub-hero .hero-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
  body[data-route="sports"] #app .sports-hub-hero .hero-actions .btn { min-height: 46px; }
  body[data-route="sports"] #app .sports-scoreboard {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    overflow: hidden;
    border-top-width: 2px;
  }
  body[data-route="sports"] #app .sports-scoreboard > div {
    min-width: 0;
    min-height: 70px;
    align-content: center;
    gap: 5px;
    padding: 10px 12px;
    border-right: 1px solid var(--b9-line);
    border-bottom: 1px solid var(--b9-line);
  }
  body[data-route="sports"] #app .sports-scoreboard > div:nth-child(2n) { border-right: 0; }
  body[data-route="sports"] #app .sports-scoreboard > div:nth-last-child(-n+2) { border-bottom: 0; }
  body[data-route="sports"] #app .sports-scoreboard span { font-size: .59rem; letter-spacing: .08em; }
  body[data-route="sports"] #app .sports-scoreboard strong {
    overflow-wrap: anywhere;
    text-align: left;
    font-size: .87rem;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
  }
  body[data-route="sports"] #app .league-command-grid {
    grid-template-columns: 1fr;
    gap: 9px;
  }
  body[data-route="sports"] #app .league-command-card {
    min-width: 0;
    min-height: 162px;
    justify-content: flex-start;
    gap: 0;
    padding: 17px 15px 13px;
    border-left: 2px solid var(--b9-line);
  }
  body[data-route="sports"] #app .league-command-card > strong { max-width: 62%; font-size: 1.13rem; line-height: 1.12; }
  body[data-route="sports"] #app .league-command-card .league-command-code { font-size: .76rem; }
}

@media (max-width: 380px) {
  body[data-route="sports"] #app .sports-scoreboard > div { min-height: 66px; padding-inline: 9px; }
  body[data-route="sports"] #app .sports-scoreboard strong { font-size: .79rem; }
  body[data-route="sports"] #app .league-command-card { min-height: 154px; padding: 15px 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="sports"] #app .sports-hub-photo { animation: none !important; }
}


/* Bastion market desk: league intent gets a focused, editorial result. */
body[data-route="search"] #app .match-intent-panel {
  width: min(100%, 1120px);
  margin: 18px auto 28px;
  overflow: hidden;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
}
body[data-route="search"] #app .match-intent-head {
  align-items: start;
  gap: clamp(14px, 3vw, 34px);
  padding: clamp(17px, 3.2vw, 31px);
  border-bottom: 1px solid var(--b9-line);
}
body[data-route="search"] #app .match-intent-head .eyebrow {
  color: var(--b9-red);
  font-variant-numeric: tabular-nums;
}
body[data-route="search"] #app .match-intent-head h2 {
  max-width: 24ch;
  margin: 8px 0 9px;
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial, Georgia, serif);
  font-size: clamp(1.8rem, 4.2vw, 3.05rem);
  font-weight: 520;
  line-height: 1.04;
  letter-spacing: -.035em;
  text-wrap: balance;
}
body[data-route="search"] #app .match-intent-head > div > p:last-child {
  max-width: 76ch;
  color: var(--b9-muted);
  line-height: 1.55;
}
body[data-route="search"] #app .match-intent-head > span {
  padding: 7px 10px;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border: 1px solid var(--b9-line);
  border-left: 2px solid var(--b9-red);
  font-size: .72rem;
  font-weight: 750;
  text-transform: none;
  white-space: nowrap;
}
body[data-route="search"] #app .match-intent-grid > div { min-width: 0; padding: clamp(14px, 2vw, 21px); }
body[data-route="search"] #app .match-intent-grid > div + div { border-color: var(--b9-line); }
body[data-route="search"] #app .match-intent-grid h3 {
  color: var(--b9-muted);
  font-size: .68rem;
  letter-spacing: .09em;
}
body[data-route="search"] #app .match-operator-list article { min-width: 0; }
body[data-route="search"] #app .match-operator-list article > div { min-width: 0; }
body[data-route="search"] #app .match-operator-list article > div strong { overflow-wrap: anywhere; }
body[data-route="search"] #app .match-operator-list article > a { text-underline-offset: 3px; }
body[data-route="search"] #app .match-guide-list a strong { color: var(--b9-ink); line-height: 1.35; }
body[data-route="search"] #app .match-guide-list a:hover strong { color: var(--b9-red); }
body[data-route="search"] #app .match-data-notice {
  padding: 12px clamp(14px, 2vw, 21px);
  color: var(--b9-muted);
  background: var(--b9-paper);
  border-top: 1px solid var(--b9-line);
  line-height: 1.45;
}

@media (max-width: 620px) {
  body[data-route="search"] #app .match-intent-panel { margin-block: 15px 23px; }
  body[data-route="search"] #app .match-intent-head {
    grid-template-columns: minmax(0,1fr) auto;
    gap: 10px;
    padding: 15px 13px;
  }
  body[data-route="search"] #app .match-intent-head h2 { max-width: 16ch; font-size: clamp(1.55rem, 7vw, 2.1rem); }
  body[data-route="search"] #app .match-intent-head > span { align-self: start; padding: 6px 8px; font-size: .66rem; }
  body[data-route="search"] #app .match-intent-head > div > p:last-child { font-size: .88rem; line-height: 1.48; }
  body[data-route="search"] #app .match-intent-grid > div { padding: 13px; }
  body[data-route="search"] #app .match-operator-list article { gap: 8px; }
  body[data-route="search"] #app .match-operator-list article > a { min-height: 42px; display: inline-flex; align-items: center; }
  body[data-route="search"] #app .match-logo { width: 50px; height: 38px; }
  body[data-route="search"] #app .match-data-notice { padding: 10px 13px; font-size: .72rem; }
}


/* Bastion market desk: shared editorial tokens and a usable mobile review index. */
:root {
  --b9-ink: #F4F2ED;
  --b9-paper: #090B0D;
  --b9-panel: #111418;
  --b9-muted: #A7ADB3;
  --b9-line: #2A3037;
  --b9-red: #D92D35;
  --b9-gold: #F0C24B;
}
html[data-theme="light"] {
  --b9-ink: #171A1E;
  --b9-paper: #F1F3F5;
  --b9-panel: #FFFFFF;
  --b9-muted: #66707A;
  --b9-line: #D9DDE1;
  --b9-red: #B71F2B;
  --b9-gold: #76540D;
}

body[data-route="reviews"] #app .review-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  margin-top: 17px;
  padding-top: 13px;
  border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
body[data-route="reviews"] #app .review-hero-actions > * {
  min-height: 42px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 9px 13px;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  border-radius: 0;
  font: inherit;
  font-size: .76rem;
  font-weight: 680;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}
body[data-route="reviews"] #app .review-hero-actions .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }
body[data-route="reviews"] #app .review-hero-actions .review-action-offer > .review-offer-mark { margin-left: auto; }
body[data-route="reviews"] #app .review-hero-actions > .review-action-save {
  color: #fff;
  background: var(--b9-red);
  border-color: var(--b9-red);
}
body[data-route="reviews"] #app .review-hero-actions > .review-action-save[aria-pressed="true"] {
  color: var(--b9-ink);
  background: transparent;
}
body[data-route="reviews"] #app .review-hero-actions > .review-action-compare[aria-pressed="true"] {
  border-color: var(--b9-gold);
  box-shadow: inset 0 -2px var(--b9-gold);
}
body[data-route="reviews"] #app .review-hero-actions > :hover {
  border-color: var(--b9-red);
}
body[data-route="reviews"] #app .review-hero-actions > :focus-visible,
body[data-route="reviews"] #app .review-mobile-toc a:focus-visible,
body[data-route="reviews"] #app .review-mobile-toc summary:focus-visible {
  outline: 2px solid var(--b9-gold);
  outline-offset: 3px;
}
body[data-route="reviews"] #app [id] { scroll-margin-top: 90px; }
body[data-route="reviews"] #app .review-mobile-toc-section { display: none; }

@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 14px;
    padding-top: 12px;
  }
  body[data-route="reviews"] #app .review-hero-actions > * {
    min-width: 0;
    min-height: 46px;
    padding: 9px 10px;
    font-size: .8rem;
    overflow-wrap: anywhere;
  }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-source { grid-column: 1 / -1; }
  body[data-route="reviews"] #app .review-mobile-toc-section {
    display: block;
    position: relative;
    z-index: 1;
    padding: 0 0 4px;
    color: var(--b9-ink);
    background: var(--b9-paper);
    border-bottom: 1px solid var(--b9-line);
  }
  body[data-route="reviews"] #app .review-mobile-toc { border-top: 2px solid var(--b9-red); }
  body[data-route="reviews"] #app .review-mobile-toc summary {
    min-height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 10px 2px;
    color: var(--b9-ink);
    font-size: .77rem;
    font-weight: 720;
    list-style: none;
    cursor: pointer;
  }
  body[data-route="reviews"] #app .review-mobile-toc summary::-webkit-details-marker { display: none; }
  body[data-route="reviews"] #app .review-mobile-toc summary::after {
    content: "+";
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    border: 1px solid var(--b9-line);
    color: var(--b9-red);
    font: 500 1rem/1 var(--b9-type-interface);
  }
  body[data-route="reviews"] #app .review-mobile-toc[open] summary::after { content: "−"; }
  body[data-route="reviews"] #app .review-mobile-toc-count {
    margin-left: auto;
    color: var(--b9-muted);
    font: 650 .62rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: .04em;
    text-transform: uppercase;
  }
  body[data-route="reviews"] #app .review-mobile-toc-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: min(52vh, 390px);
    overflow-y: auto;
    border-top: 1px solid var(--b9-line);
    scrollbar-color: var(--b9-muted) transparent;
  }
  body[data-route="reviews"] #app .review-mobile-toc-links a {
    min-width: 0;
    min-height: 48px;
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 7px;
    align-items: center;
    padding: 8px 6px;
    color: var(--b9-ink);
    border-bottom: 1px solid var(--b9-line);
    font-size: .79rem;
    line-height: 1.35;
    text-decoration: none;
  }
  body[data-route="reviews"] #app .review-mobile-toc-links a:nth-child(odd) { border-right: 1px solid var(--b9-line); }
  body[data-route="reviews"] #app .review-mobile-toc-links a > span {
    color: var(--b9-red);
    font: 650 .63rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }
  body[data-route="reviews"] #app .review-mobile-toc-links strong { font-weight: 620; }
  body[data-route="reviews"] #app .sidebar .toc { display: none; }
  body[data-route="reviews"] #app .article-content > section { scroll-margin-top: 18px; }
}
@media (max-width: 360px) {
  body[data-route="reviews"] #app .review-hero-actions { grid-template-columns: minmax(0, 1fr); }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-source { grid-column: auto; }
  body[data-route="reviews"] #app .review-mobile-toc-links { grid-template-columns: minmax(0, 1fr); }
  body[data-route="reviews"] #app .review-mobile-toc-links a:nth-child(odd) { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="reviews"] #app .review-hero-actions > * { transition: none; }
}


/* Bastion market desk: the verified offer reel returns; mobile offers get a real nav position. */

/* Keep the live dated-offer route visible in the mobile rail as a distinct, useful destination. */
@media (max-width: 760px) {
  body[data-route="bonuses"] #app .page-header .listing-coverage-notice {
    margin-block: 6px 0;
    padding: 6px 0 6px 9px;
  }
  body[data-route="bonuses"] #app .page-header .listing-coverage-notice p {
    display: inline;
    font-size: .67rem;
    line-height: 1.35;
  }
  body[data-route="bonuses"] #app .page-header .listing-coverage-notice > a {
    display: inline-flex;
    min-height: 30px;
    margin: 0 0 0 3px;
    font-size: .67rem;
    line-height: 1.3;
    vertical-align: middle;
  }
  body[data-route="bonuses"] #app .bonus-register-intro {
    gap: 8px;
    margin-block: 6px 2px;
    padding-block: 7px;
  }
  /* The register already reports the live result count, so keep filter controls compact. */
  body[data-route="bonuses"] #app .bonus-results-first .filter-count { display: none; }
  body[data-route="bonuses"] #app .bonus-results-first { padding-top: 5px; }
  #app .mobile-utility-rail a[data-offer-nav] {
    position: relative;
    color: var(--b9-ink);
    background: color-mix(in srgb, var(--b9-red) 9%, var(--b9-panel));
    border-inline: 1px solid var(--b9-line);
    border-top: 2px solid var(--b9-red);
  }
  #app .mobile-utility-rail a[data-offer-nav] > .ui-icon {
    width: 21px;
    height: 21px;
    color: var(--b9-red);
    stroke-width: 1.9;
  }
  #app .mobile-utility-rail a[data-offer-nav][aria-current="page"] { color: var(--b9-red); }
  #app .mobile-utility-rail a[data-offer-nav] .utility-offer-count {
    min-width: 17px;
    height: 17px;
    padding-inline: 4px;
    color: #fff;
    background: var(--b9-red);
    border: 1px solid var(--b9-red);
    border-radius: 2px;
    font: 750 .61rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
  }
}

/* Bastion: long-form reading tools and compact editorial references. */

#app .guide-layout .guide-toc-link {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  min-height: 44px;
  padding: 9px 0;
  border-top: 1px solid var(--b9-line);
  color: var(--b9-ink);
  font-size: .79rem;
  line-height: 1.4;
  text-decoration: none;
}
#app .guide-toc-link:hover { color: var(--b9-red); }
#app .guide-toc-number,
#app .guide-chapter-index {
  color: var(--b9-red);
  font: 750 .65rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}
#app .guide-layout .article-content > section[id^="section-"] > h2 {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  align-items: start;
  gap: 8px;
}
#app .guide-layout .article-content > section[id^="section-"] > h2 .guide-chapter-index {
  padding-top: .22em;
  font-size: .64rem;
}
#app .guide-mobile-toc { border: 0; border-top: 2px solid var(--b9-red); border-bottom: 1px solid var(--b9-line); border-radius: 0; }
#app .guide-mobile-toc > summary {
  min-height: 54px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px;
  color: var(--b9-ink);
  font-size: .87rem;
  font-weight: 760;
  list-style: none;
}
#app .guide-mobile-toc > summary::-webkit-details-marker { display: none; }
#app .guide-mobile-toc > summary::after { content: "+"; color: var(--b9-red); font: 700 1.2rem/1 ui-monospace, monospace; }
#app .guide-mobile-toc[open] > summary::after { content: "−"; }
#app .guide-mobile-toc-count { margin-left: auto; color: var(--b9-muted); font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
#app .guide-mobile-toc-links { border-top: 1px solid var(--b9-line); }
#app .guide-mobile-toc .guide-toc-link { min-height: 48px; grid-template-columns: 2rem minmax(0,1fr); padding: 10px 2px; font-size: .8rem; }
#app .guide-source-section { margin-top: clamp(36px, 5vw, 58px); }
#app .guide-source-section > h2 { margin-bottom: 14px; }
#app .guide-source-section .source-register { border: 1px solid var(--b9-line); border-radius: 0; background: var(--b9-panel); }
#app .guide-source-section .source-register-head { align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--b9-line); }
#app .guide-source-section .source-register-head h3 { margin: 0; font-size: .86rem; }
#app .guide-source-section .source-register-head > span { min-width: 27px; height: 27px; display: grid; place-items: center; color: var(--b9-ink); background: var(--b9-panel-raised); font: 750 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-source-section .source-register ol { margin: 0; padding: 0; list-style: none; }
#app .guide-source-section .source-register li { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; align-items: start; gap: 10px; min-width: 0; padding: 13px 14px; }
#app .guide-source-section .source-register li + li { border-top: 1px solid var(--b9-line); }
#app .guide-source-section .source-sequence { color: var(--b9-red); font: 750 .65rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-source-section .source-register li > div:nth-child(2) { min-width: 0; }
#app .guide-source-section .source-register li > div:nth-child(2) a { display: inline-flex; min-height: 44px; align-items: center; color: var(--b9-ink); font-size: .82rem; font-weight: 700; line-height: 1.35; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
#app .guide-source-section .source-register li > div:nth-child(2) small { display: block; color: var(--b9-muted); font-size: .68rem; line-height: 1.4; overflow-wrap: anywhere; }
#app .guide-source-section .source-register .source-date { display: grid; gap: 3px; justify-items: end; color: var(--b9-muted); font-size: .62rem; line-height: 1.3; text-align: right; }
#app .guide-source-section .source-register .source-date strong { color: var(--b9-ink); font: 700 .66rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
#app .guide-layout .author-box { margin-block: 28px; padding: 18px 20px; border: 1px solid var(--b9-line); border-left: 3px solid var(--b9-red); border-radius: 0; background: var(--b9-panel); }
#app .guide-layout .author-box .eyebrow { margin: 0 0 7px; color: var(--b9-red); font-size: .63rem; font-weight: 800; letter-spacing: .1em; }
#app .guide-layout .author-box h3 { margin: 0 0 8px; font-family: var(--b9-type-editorial); font-size: 1.28rem; font-weight: 500; line-height: 1.2; }
#app .guide-layout .author-box h3 a { color: var(--b9-ink); text-decoration: none; }
#app .guide-layout .author-box p:last-child { max-width: 62ch; margin: 0; color: var(--b9-muted); font-size: .82rem; line-height: 1.6; }
#app .guide-related-list { display: grid; gap: 10px; }
#app .guide-operator-reference { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px; border: 1px solid var(--b9-line); background: var(--b9-panel); }
#app .guide-operator-logo .casino-logo-frame { width: 50px; height: 50px; }
#app .guide-operator-copy { min-width: 0; }
#app .guide-operator-copy .eyebrow { margin: 0 0 4px; color: var(--b9-red); font-size: .59rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#app .guide-operator-copy h3 { margin: 0 0 3px; font-family: var(--b9-type-editorial); font-size: 1.14rem; font-weight: 500; line-height: 1.2; }
#app .guide-operator-copy h3 a { color: var(--b9-ink); text-decoration: none; }
#app .guide-operator-copy .guide-operator-descriptor { margin: 0 0 5px; color: var(--b9-muted); font-size: .7rem; line-height: 1.35; }
#app .guide-operator-copy .guide-operator-summary { display: -webkit-box; margin: 0 0 6px; overflow: hidden; color: var(--b9-ink); font-size: .76rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#app .guide-operator-copy > small { color: var(--b9-muted); font-size: .64rem; }
#app .guide-operator-score { display: grid; justify-items: end; align-self: stretch; align-content: center; min-width: 68px; }
#app .guide-operator-score > strong { color: var(--b9-yellow); font: 650 1.4rem/1 var(--b9-type-editorial); font-variant-numeric: tabular-nums; }
#app .guide-operator-score > span { margin-top: 2px; color: var(--b9-muted); font-size: .63rem; }
#app .guide-operator-score > small { max-width: 72px; margin-top: 4px; color: var(--b9-muted); font-size: .56rem; line-height: 1.3; text-align: right; }
#app .guide-operator-score > a { min-height: 40px; display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--b9-ink); font-size: .68rem; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
#app .guide-operator-score > a .ui-icon { width: 13px; height: 13px; }

/* A working article index: one editorial lead, persistent topic filters, then a compact reading list. */
#app .guide-index-section { border-top: 1px solid var(--b9-line); }
#app .guide-index-tools { display: grid; gap: 14px; margin: 0 0 34px; }
#app .guide-index-tools > label { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 6px 14px; color: var(--b9-muted); font-size: .7rem; font-weight: 750; }
#app .guide-index-tools > label > input { grid-column: 1 / -1; width: 100%; min-width: 0; min-height: 48px; border: 1px solid var(--b9-line); border-radius: 0; color: var(--b9-ink); background: var(--b9-panel); }
#app .guide-index-tools > label > input::placeholder { color: var(--b9-muted); opacity: .82; }
#app .guide-index-tools .filter-count { grid-column: 2; grid-row: 1; color: var(--b9-ink); font: 700 .67rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-topic-nav { display: flex; gap: 7px; max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 7px; scrollbar-width: thin; }
#app .guide-topic-link { flex: 0 0 auto; min-height: 42px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--b9-line); color: var(--b9-ink); background: var(--b9-panel); font-size: .68rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
#app .guide-topic-link > span { color: var(--b9-muted); font: 700 .61rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-topic-link:hover,
#app .guide-topic-link.is-active { border-color: var(--b9-red); color: var(--b9-ink); }
#app .guide-topic-link.is-active { box-shadow: inset 0 2px 0 var(--b9-red); }
#app .guide-featured-section { margin: 0 0 46px; }
#app .guide-featured-story { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.12fr); min-width: 0; border: 1px solid var(--b9-line); background: var(--b9-panel); }
#app .guide-featured-art { min-width: 0; min-height: 280px; overflow: hidden; border-right: 1px solid var(--b9-line); }
#app .guide-featured-art .guide-visual { width: 100%; height: 100%; min-height: 280px; margin: 0; }
#app .guide-featured-copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; padding: clamp(18px,3vw,32px); }
#app .guide-featured-copy h2 { max-width: 20ch; margin: 13px 0 9px; font-family: var(--b9-type-editorial); font-size: clamp(1.6rem,3.2vw,2.45rem); font-weight: 500; line-height: 1.05; }
#app .guide-featured-copy h2 a { color: var(--b9-ink); text-decoration: none; }
#app .guide-featured-copy > p:not(.eyebrow) { max-width: 54ch; margin: 0; color: var(--b9-muted); font-size: .84rem; line-height: 1.6; }
#app .guide-featured-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: auto; padding-top: 18px; color: var(--b9-muted); font-size: .65rem; }
#app .guide-featured-meta > * + * { padding-left: 12px; border-left: 1px solid var(--b9-line); }
#app .guide-featured-meta a { color: var(--b9-ink); text-decoration: none; }
#app .guide-featured-link { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; color: var(--b9-ink); font-size: .76rem; font-weight: 800; text-decoration: underline; text-underline-offset: 4px; }
#app .guide-featured-link .ui-icon { width: 16px; height: 16px; color: var(--b9-red); }
#app .guide-index-heading { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 4px 16px; margin: 0 0 8px; padding-bottom: 11px; border-bottom: 2px solid var(--b9-ink); }
#app .guide-index-heading .eyebrow { grid-column: 1 / -1; margin: 0; color: var(--b9-red); font-size: .61rem; font-weight: 800; letter-spacing: .1em; }
#app .guide-index-heading h2 { margin: 0; color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: clamp(1.45rem,2.5vw,2rem); font-weight: 500; line-height: 1.08; }
#app .guide-index-heading > span { color: var(--b9-muted); font: 700 .65rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-index-list { border-top: 1px solid var(--b9-line); }
#app .guide-index-row { display: grid; grid-template-columns: 3.2rem minmax(0,1fr) 44px; align-items: start; gap: 14px; padding: 20px 3px; border-bottom: 1px solid var(--b9-line); }
#app .guide-index-number { padding-top: 3px; color: var(--b9-red); font: 750 .73rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .guide-index-copy { min-width: 0; }
#app .guide-index-copy .eyebrow { margin: 0 0 5px; color: var(--b9-muted); font-size: .61rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#app .guide-index-copy h3 { max-width: 46ch; margin: 0 0 5px; font-family: var(--b9-type-editorial); font-size: clamp(1.12rem,2vw,1.42rem); font-weight: 500; line-height: 1.15; }
#app .guide-index-copy h3 a { color: var(--b9-ink); text-decoration: none; }
#app .guide-index-copy > p:not(.eyebrow) { max-width: 72ch; display: -webkit-box; margin: 0; overflow: hidden; color: var(--b9-muted); font-size: .78rem; line-height: 1.5; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#app .guide-index-meta { display: flex; flex-wrap: wrap; gap: 5px 11px; margin-top: 8px; color: var(--b9-muted); font-size: .64rem; }
#app .guide-index-meta > * + * { padding-left: 11px; border-left: 1px solid var(--b9-line); }
#app .guide-index-meta a { color: var(--b9-ink); text-decoration: none; }
#app .guide-index-open { width: 44px; min-height: 44px; display: grid; place-items: center; align-self: center; border: 1px solid var(--b9-line); color: var(--b9-ink); }
#app .guide-index-open .ui-icon { width: 17px; height: 17px; color: var(--b9-red); }
#app .guide-index-open:hover { border-color: var(--b9-red); }
#app .guide-index-empty { padding: 24px 0; color: var(--b9-muted); }

@media (max-width: 760px) {
  #app .guide-article-hero-grid { display: grid; grid-template-columns: minmax(0,1fr); grid-template-areas: "category" "title" "dek" "art" "byline" "reading"; gap: 0; }
  #app .guide-hero-copy { display: contents; }
  #app .guide-hero-copy > .badge { grid-area: category; justify-self: start; margin: 21px 0 0; }
  #app .guide-hero-copy > h1 { grid-area: title; margin: 13px 0 11px; }
  #app .guide-hero-copy > .lead { grid-area: dek; margin: 0 0 14px; }
  #app .guide-hero-visual { grid-area: art; width: 100%; height: clamp(210px, 56vw, 248px); margin: 0 0 14px; }
  #app .guide-hero-visual img { height: 100%; }
  #app .guide-article-hero .byline { grid-area: byline; margin: 0 0 9px; padding-top: 12px; border-top: 1px solid var(--b9-line); }
  #app .guide-reading-meta { grid-area: reading; gap: 8px 16px; margin-bottom: 17px; font-size: .71rem; }
  #app .guide-layout .article-content > section[id^="section-"] > h2 { grid-template-columns: 3.65rem minmax(0,1fr); gap: 6px; }
  #app .guide-source-section .source-register li { grid-template-columns: 1.8rem minmax(0,1fr); gap: 8px; padding: 12px; }
  #app .guide-source-section .source-register .source-date { grid-column: 2; display: flex; flex-wrap: wrap; justify-items: start; justify-content: space-between; gap: 6px 12px; margin-top: 7px; text-align: left; }
  #app .guide-related-section h2 { max-width: 20ch; }
  #app .guide-operator-reference { grid-template-columns: 44px minmax(0,1fr); align-items: start; gap: 10px; padding: 12px; }
  #app .guide-operator-logo .casino-logo-frame { width: 42px; height: 42px; }
  #app .guide-operator-score { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; justify-items: start; gap: 3px 6px; min-width: 0; border-top: 1px solid var(--b9-line); padding-top: 8px; }
  #app .guide-operator-score > strong { font-size: 1.18rem; }
  #app .guide-operator-score > small { max-width: none; margin: 0; text-align: left; }
  #app .guide-operator-score > a { min-height: 40px; margin: 0 0 0 auto; }
  #app .guide-index-section { padding-top: 16px; }
  #app .guide-index-tools { gap: 12px; margin-bottom: 26px; }
  #app .guide-index-tools > label { grid-template-columns: minmax(0,1fr) auto; gap: 7px 10px; }
  #app .guide-topic-nav { margin-inline: calc(var(--mobile-gutter, 16px) * -1); padding-inline: var(--mobile-gutter, 16px); }
  #app .guide-featured-section { margin-bottom: 34px; }
  #app .guide-featured-story { grid-template-columns: minmax(0,1fr); }
  #app .guide-featured-art { min-height: 210px; border-right: 0; border-bottom: 1px solid var(--b9-line); }
  #app .guide-featured-art .guide-visual { min-height: 210px; height: 210px; }
  #app .guide-featured-copy { padding: 15px; }
  #app .guide-featured-copy > .eyebrow { margin-bottom: 12px; font-size: .55rem; }
  #app .guide-featured-copy h2 { max-width: 25ch; margin-top: 10px; font-size: clamp(1.4rem,6vw,1.82rem); }
  #app .guide-featured-copy > p:not(.eyebrow) { font-size: .77rem; line-height: 1.5; }
  #app .guide-featured-meta { gap: 5px 8px; padding-top: 12px; font-size: .61rem; }
  #app .guide-featured-meta > * + * { padding-left: 8px; }
  #app .guide-index-heading { gap: 4px 10px; }
  #app .guide-index-heading h2 { font-size: 1.48rem; }
  #app .guide-index-row { grid-template-columns: 2rem minmax(0,1fr) 40px; gap: 8px; padding: 16px 0; }
  #app .guide-index-number { font-size: .64rem; }
  #app .guide-index-copy .eyebrow { font-size: .56rem; }
  #app .guide-index-copy h3 { font-size: 1.08rem; line-height: 1.2; }
  #app .guide-index-copy > p:not(.eyebrow) { font-size: .72rem; }
  #app .guide-index-meta { gap: 4px 7px; margin-top: 7px; font-size: .59rem; }
  #app .guide-index-meta > * + * { padding-left: 7px; }
  #app .guide-index-open { width: 40px; min-height: 44px; }
}

@media (max-width: 380px) {
  #app .guide-hero-copy > h1 { font-size: clamp(1.95rem, 9vw, 2.35rem); }
  #app .guide-source-section .source-register li > div:nth-child(2) a { font-size: .77rem; }
  #app .guide-operator-reference { gap: 8px; padding: 10px; }
  #app .guide-index-row { grid-template-columns: 1.7rem minmax(0,1fr) 36px; gap: 6px; }
  #app .guide-index-open { width: 36px; }
  #app .guide-index-meta { gap: 4px 6px; font-size: .56rem; }
  #app .guide-index-meta > * + * { padding-left: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .guide-toc-link,
  #app .guide-mobile-toc summary { scroll-behavior: auto; transition: none !important; }
}


/* Bastion: a compact operator file with source and offer routes in the review hero. */
body[data-route="reviews"] #app .review-file-strip {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  margin: 15px 0 13px;
  color: var(--b9-ink);
  background: color-mix(in srgb, var(--b9-panel) 72%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
body[data-route="reviews"] #app .review-file-stamp {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 3px;
  border-right: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
body[data-route="reviews"] #app .review-file-stamp > span,
body[data-route="reviews"] #app .review-file-stamp > small {
  color: var(--b9-muted);
  font: 700 .43rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
body[data-route="reviews"] #app .review-file-stamp > strong {
  color: var(--b9-red);
  font: 700 1.55rem/.9 var(--b9-type-editorial);
}
body[data-route="reviews"] #app .review-file-main { min-width: 0; padding: 8px 11px 0; }
body[data-route="reviews"] #app .review-file-masthead {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
body[data-route="reviews"] #app .review-file-masthead > * {
  margin: 0;
  color: var(--b9-muted);
  font: 700 .55rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .035em;
}
body[data-route="reviews"] #app .review-file-masthead > strong { color: var(--b9-ink); }
body[data-route="reviews"] #app .review-file-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
body[data-route="reviews"] #app .review-file-ledger > a {
  min-width: 0;
  min-height: 52px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  gap: 4px 8px;
  padding: 7px 10px 7px 0;
  color: var(--b9-ink);
  text-decoration: none;
}
body[data-route="reviews"] #app .review-file-ledger > a + a {
  padding-left: 11px;
  border-left: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
body[data-route="reviews"] #app .review-file-ledger > a > small {
  grid-column: 1 / -1;
  color: var(--b9-muted);
  font: 700 .53rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .07em;
}
body[data-route="reviews"] #app .review-file-ledger > a > strong {
  min-width: 0;
  overflow: hidden;
  font-size: .69rem;
  font-weight: 680;
  line-height: 1.25;
  text-overflow: ellipsis;
}
body[data-route="reviews"] #app .review-file-ledger > a > span { color: var(--b9-red); font-size: .8rem; }
body[data-route="reviews"] #app .review-file-ledger > a:hover > strong { text-decoration: underline; text-underline-offset: 3px; }
body[data-route="reviews"] #app .review-hero-actions > .review-action-offer {
  gap: 7px;
  color: var(--b9-gold);
  border-color: color-mix(in srgb, var(--b9-gold) 48%, transparent);
}
@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-title-row {
    grid-template-columns: 56px minmax(0,1fr);
    grid-template-areas: "logo eyebrow" "logo title" "lead lead" "score score";
    align-items: start;
    gap: 5px 12px;
  }
  body[data-route="reviews"] #app .review-title-row > .casino-logo { grid-area: logo; width: 56px !important; height: 56px !important; }
  body[data-route="reviews"] #app .review-title-row > div:nth-child(2) { display: contents; }
  body[data-route="reviews"] #app .review-title-row .eyebrow { grid-area: eyebrow; align-self: end; margin: 0; }
  body[data-route="reviews"] #app .review-title-row h1 { grid-area: title; margin: 0 0 4px; }
  body[data-route="reviews"] #app .review-title-row .lead { grid-area: lead; max-width: none; margin: 2px 0 8px; }
  body[data-route="reviews"] #app .review-title-row .score-card { grid-area: score; }
  body[data-route="reviews"] #app .review-file-strip { grid-template-columns: 39px minmax(0,1fr); margin: 13px 0 11px; }
  body[data-route="reviews"] #app .review-file-main { padding: 7px 8px 0; }
  body[data-route="reviews"] #app .review-file-stamp > span,
  body[data-route="reviews"] #app .review-file-stamp > small { font-size: .39rem; letter-spacing: .03em; }
  body[data-route="reviews"] #app .review-file-stamp > strong { font-size: 1.35rem; }
  body[data-route="reviews"] #app .review-file-masthead { gap: 3px 8px; padding-bottom: 6px; }
  body[data-route="reviews"] #app .review-file-masthead > * { font-size: .48rem; }
  body[data-route="reviews"] #app .review-file-ledger > a { min-height: 49px; gap: 3px 5px; padding-right: 6px; }
  body[data-route="reviews"] #app .review-file-ledger > a + a { padding-left: 7px; }
  body[data-route="reviews"] #app .review-file-ledger > a > small { font-size: .47rem; letter-spacing: .045em; }
  body[data-route="reviews"] #app .review-file-ledger > a > strong { font-size: .62rem; overflow-wrap: anywhere; }
  body[data-route="reviews"] #app .review-hero-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-source { grid-column: auto; }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-offer { font-size: .72rem; }
}
@media (max-width: 360px) {
  body[data-route="reviews"] #app .review-title-row {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "logo" "eyebrow" "title" "lead" "score";
    gap: 8px;
  }
  body[data-route="reviews"] #app .review-title-row > .casino-logo { width: 60px !important; height: 60px !important; }
  body[data-route="reviews"] #app .review-title-row h1 { margin: 0; }
  body[data-route="reviews"] #app .review-title-row .lead { margin: 0 0 4px; }
  body[data-route="reviews"] #app .review-file-strip { grid-template-columns: 34px minmax(0,1fr); }
  body[data-route="reviews"] #app .review-file-main { padding-inline: 6px; }
  body[data-route="reviews"] #app .review-file-masthead > * { font-size: .43rem; }
  body[data-route="reviews"] #app .review-file-ledger > a { padding-right: 4px; }
  body[data-route="reviews"] #app .review-file-ledger > a + a { padding-left: 5px; }
  body[data-route="reviews"] #app .review-file-ledger > a > strong { font-size: .57rem; }
  body[data-route="reviews"] #app .review-hero-actions { grid-template-columns: minmax(0,1fr); }
}
/* Bastion: keep the offer shortcut visible without making it look selected on every route. */
@media (max-width: 760px) {
  #app .mobile-utility-rail a[data-offer-nav]:not([aria-current="page"]) {
    background: transparent;
    border-inline: 0;
    border-top: 2px solid transparent;
  }
  #app .mobile-utility-rail a[data-offer-nav]:not([aria-current="page"]) > .ui-icon {
    color: var(--b9-red);
  }
  #app .mobile-utility-rail a[data-offer-nav][aria-current="page"] {
    background: color-mix(in srgb, var(--b9-red) 9%, var(--b9-panel));
    border-inline: 1px solid var(--b9-line);
    border-top: 2px solid var(--b9-red);
  }
}



/* Bastion: make provincial editorial metadata fit the mobile reading rhythm. */
@media (max-width: 760px) {
  #app .province-hero {
    padding-block: 22px;
  }

  #app .province-hero-grid {
    gap: 14px;
  }

  #app .province-hero .lead {
    margin-bottom: 10px;
    font-size: .96rem;
    line-height: 1.5;
  }

  #app .province-hero .byline {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    margin: 12px 0;
    padding-block: 10px;
    border-block: 1px solid var(--ref-line);
  }

  #app .province-hero .byline > a,
  #app .province-hero .byline > span {
    min-width: 0;
    align-items: flex-start;
    gap: 5px;
  }

  #app .province-hero .byline strong {
    font-size: .8rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  #app .province-hero .notice-warning {
    margin-block: 12px 8px;
    padding: 12px 13px;
    line-height: 1.48;
  }
}

@media (max-width: 380px) {
  #app .province-hero .byline {
    gap: 7px 8px;
    padding-block: 8px;
  }

  #app .province-hero .byline small {
    font-size: .7rem;
  }

  #app .province-hero .byline strong {
    font-size: .76rem;
  }
}


/* Bastion: make every official-register product filter visible on phones. */
@media (max-width: 760px) {
  #app .official-registry-facets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    overflow: visible;
    padding: 0;
  }

  #app .official-registry-facet {
    width: 100%;
    min-width: 0;
    justify-content: space-between;
    gap: 6px;
    padding-inline: 8px;
    font-size: .72rem;
  }

  #app .official-registry-facet span {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  #app .official-registry-facet b {
    flex: 0 0 auto;
  }
}


/* Bastion: put the dated, source-linked offer first in the mobile action hierarchy. */
@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-hero-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 8px;
  }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-save,
  body[data-route="reviews"] #app .review-hero-actions > .review-action-compare {
    min-height: 42px;
    color: var(--b9-ink);
    background: color-mix(in srgb, var(--b9-panel) 72%, transparent);
    border-color: color-mix(in srgb, currentColor 25%, transparent);
    font-size: .74rem;
  }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-save[aria-pressed="true"],
  body[data-route="reviews"] #app .review-hero-actions > .review-action-compare[aria-pressed="true"] {
    color: var(--b9-gold);
    border-color: color-mix(in srgb, var(--b9-gold) 62%, transparent);
    box-shadow: inset 0 -2px var(--b9-gold);
  }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-offer {
    grid-column: 1 / -1;
    min-height: 50px;
    justify-content: flex-start;
    gap: 10px;
    padding-inline: 13px;
    color: var(--b9-gold);
    background: color-mix(in srgb, var(--b9-gold) 8%, var(--b9-panel));
    border: 1px solid color-mix(in srgb, var(--b9-gold) 52%, transparent);
    border-left-width: 3px;
    font-size: .76rem;
    text-align: left;
  }
  body[data-route="reviews"] #app .review-hero-actions > .review-action-source {
    grid-column: 1 / -1;
    justify-self: center;
    min-height: 32px;
    padding: 5px 8px;
    color: var(--b9-muted);
    background: transparent;
    border: 0;
    font-size: .69rem;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
    text-underline-offset: 3px;
  }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body[data-route="reviews"] #app .review-hero-actions > .review-action-offer:hover {
    background: color-mix(in srgb, var(--b9-gold) 13%, var(--b9-panel));
    border-color: var(--b9-gold);
  }
}
@media (max-width: 360px) {
  body[data-route="reviews"] #app .review-title-row {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "logo eyebrow" "logo title" "lead lead" "score score";
    align-items: start;
    gap: 5px 10px;
  }
  body[data-route="reviews"] #app .review-title-row > .casino-logo {
    grid-area: logo;
    width: 56px !important;
    height: 56px !important;
  }
  body[data-route="reviews"] #app .review-title-row > div:nth-child(2) { display: contents; }
  body[data-route="reviews"] #app .review-title-row .eyebrow { grid-area: eyebrow; align-self: end; margin: 0; }
  body[data-route="reviews"] #app .review-title-row h1 { grid-area: title; margin: 0 0 4px; }
  body[data-route="reviews"] #app .review-title-row .lead { grid-area: lead; max-width: none; margin: 2px 0 8px; }
  body[data-route="reviews"] #app .review-title-row .score-card { grid-area: score; }
}
@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-title-row .score-card {
    min-height: 48px;
    padding: 6px 12px;
    gap: 4px;
  }
  body[data-route="reviews"] #app .review-title-row .score-card strong { font-size: 1.6rem; }
  body[data-route="reviews"] #app .review-title-row .score-card small {
    display: inline;
    margin: 0 0 0 6px;
    font-size: .68rem;
  }
}
/* Bastion: keep the mobile comparison dock inside the phone viewport. */
@media (max-width: 760px) {
  #app .compare-dock {
    right: 10px;
    left: 10px;
    width: auto;
    transform: none;
  }
}

@media (max-width: 360px) {
  #app .compare-dock {
    gap: 7px;
    padding: 8px;
  }

  #app .compare-dock-actions {
    gap: 6px;
  }
}


/* Bastion: put the mobile compare control beside the operator identity. */
#app .reference-ranking-card .operator-compare-shortcut { display: none; }

@media (max-width: 760px) {
  #app .reference-ranking-card .operator-compare-shortcut {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    margin-top: 7px;
    padding: 4px 10px;
    color: var(--b9-muted);
    background: transparent;
    border: 1px solid var(--b9-line);
    border-radius: 2px;
    font-size: .72rem;
    font-weight: 750;
    cursor: pointer;
  }

  #app .reference-ranking-card .operator-compare-shortcut[aria-pressed="true"] {
    color: var(--b9-gold);
    background: color-mix(in srgb, var(--b9-gold) 8%, var(--b9-panel));
    border-color: color-mix(in srgb, var(--b9-gold) 58%, transparent);
  }

  #app .reference-ranking-card .operator-tools [data-compare-id] { display: none; }
}


/* Bastion: give the two ranking filters equal space on compact screens. */
@media (max-width: 600px) {
  body[data-route="best"] #app .ranking-page .filters-premium {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: 8px 10px;
  }

  body[data-route="best"] #app .ranking-page .filters-premium .filters-title,
  body[data-route="best"] #app .ranking-page .filters-premium .filter-count {
    grid-column: 1 / -1;
  }

  body[data-route="best"] #app .ranking-page .filters-premium label {
    min-width: 0;
    gap: 4px;
    font-size: .72rem;
  }

  body[data-route="best"] #app .ranking-page .filters-premium .filter-count {
    justify-self: end;
  }
}


/* Bastion: mark the reader's current section in the mobile drawer. */
@media (max-width: 760px) {
  #app .mobile-panel a[aria-current="page"] {
    padding-inline: 8px;
    color: var(--b9-ink);
    background: color-mix(in srgb, var(--b9-red) 8%, var(--b9-panel));
    border-left: 2px solid var(--b9-red);
  }
  #app .mobile-panel a[aria-current="page"] > .ui-icon:last-child {
    color: var(--b9-red);
  }
  #app .mobile-panel a.mobile-bonus-link[aria-current="page"] {
    color: var(--b9-red);
  }
}


/* Bastion: make offer counts follow the selected market and clarify their scope. */
body[data-route="bonuses"] #app .bonus-register-scope {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  width: fit-content;
  max-width: 100%;
  margin-top: 3px;
  padding-left: 8px;
  border-left: 2px solid var(--b9-red);
  color: var(--b9-muted);
  font: 700 .62rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: .015em;
}

@media (max-width: 620px) {
  body[data-route="bonuses"] #app .bonus-register-scope {
    font-size: .59rem;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  body[data-route="best"] #app .ranking-page .byline > span:last-child {
    min-width: 0;
  }

  body[data-route="best"] #app .ranking-page .byline > span:last-child strong {
    overflow-wrap: anywhere;
  }
}

/* Source: styles/site-identity.css */
/* Bastion global refresh: a clearer market desk, with the full comparison path visible first. */

#app {
  --bastion-radius: 3px;
  --bastion-gutter: clamp(16px, 3vw, 32px);
  font-family: var(--b9-type-interface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#app :is(h1, h2, h3, h4) {
  font-family: var(--b9-type-interface);
  font-weight: 650;
  letter-spacing: -.025em;
  text-wrap: balance;
}

/* Bastion uses an editorial display face for stories, with compact sans-serif UI. */
#app :is(h1, h2) {
  font-family: var(--b9-type-editorial);
  font-weight: 600;
  letter-spacing: -.025em;
}

#app .reference-hero h1,
#app .page-header-photo h1,
#app .section-heading h2,
#app .front-offer-layout > header h2,
#app .bonus-lab-featured .bonus-lab-intro h2 {
  font-family: var(--b9-type-editorial);
  font-weight: 600;
  letter-spacing: -.025em;
}

#app .reference-hero h1 {
  font-family: var(--b9-type-editorial) !important;
}

#app h1 {
  line-height: .99;
}

#app .container {
  width: min(100% - (var(--bastion-gutter) * 2), 1280px);
}

#app :is(button, input, select, textarea, .btn) {
  border-radius: var(--bastion-radius);
}

#app :is(button, .btn, .icon-button, .saved-header-button, .menu-toggle, .theme-toggle-mobile) {
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

#app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--b9-focus, #e1c46e);
  outline-offset: 3px;
}

/* The masthead stays compact and reads as one publication, not a row of app controls. */
#app .site-header {
  border-bottom: 1px solid var(--b9-line);
  background: var(--b9-paper);
}

#app .header-inner {
  min-height: 72px;
  gap: clamp(12px, 1.6vw, 24px);
}

#app .brand {
  flex: 0 0 auto;
}

#app .primary-nav {
  gap: clamp(2px, .42vw, 8px);
}

#app .primary-nav a {
  min-height: 44px;
  padding-inline: clamp(5px, .65vw, 11px);
  font-size: .75rem;
  font-weight: 680;
  letter-spacing: -.01em;
}

#app .primary-nav a[aria-current="page"] {
  color: var(--b9-ink);
}

#app .header-tools {
  gap: 7px;
}

#app .header-tools .icon-button,
#app .saved-header-button,
#app .menu-toggle {
  min-height: 42px;
  border: 1px solid var(--b9-line);
  background: var(--b9-panel);
}

#app .header-tools .icon-button:hover,
#app .saved-header-button:hover,
#app .menu-toggle:hover {
  border-color: var(--b9-red);
}

#app .page-header-photo {
  min-height: 0;
  padding-block: clamp(34px, 5vw, 62px);
  border-bottom: 1px solid var(--b9-line);
  background: var(--b9-paper);
}

#app .listing-coverage-notice {
  margin-top: 16px;
  padding: 12px 14px;
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  background: var(--b9-panel);
  color: var(--b9-ink);
  font-size: .82rem;
  line-height: 1.5;
}

#app .listing-coverage-notice p {
  margin: 0;
  color: inherit;
}

#app .page-header-photo > .container > h1,
#app .page-header-photo > .container > .lead,
#app .page-header-photo > .container > .listing-coverage-notice {
  max-width: min(760px, 100%);
}

#app .page-header-photo > .container > .listing-coverage-notice {
  width: min(760px, 100%);
}

#app .page-header-photo .listing-coverage-notice {
  display: grid;
  color: var(--b9-ink);
  border-color: var(--b9-line);
  border-left-color: var(--b9-red);
}

#app .page-header-photo .listing-coverage-notice p {
  color: var(--b9-ink);
}

#app .listing-coverage-notice .text-action {
  min-height: 36px;
  margin-top: 4px;
  color: var(--b9-red) !important;
  text-decoration-color: var(--b9-red);
}

#app .page-header-photo h1 {
  max-width: 18ch;
  margin-block: 9px 12px;
  font-size: clamp(2.3rem, 5vw, 4.4rem);
  line-height: .98;
}

#app .page-header-photo p:not(.eyebrow) {
  max-width: 68ch;
  font-size: 1rem;
  line-height: 1.65;
}

#app .section-heading {
  gap: 20px;
  align-items: end;
  border-top: 1px solid var(--b9-line);
}

#app .section-heading h2 {
  max-width: 22ch;
  font-size: clamp(1.85rem, 3.35vw, 3rem);
  line-height: 1.01;
}

#app .section-heading p:not(.eyebrow) {
  max-width: 68ch;
  line-height: 1.62;
}

#app .btn {
  min-height: 46px;
  padding: 10px 15px;
  font-size: .82rem;
  font-weight: 730;
}

#app .btn-primary {
  border: 1px solid var(--b9-red);
  background: var(--b9-red);
  color: #fff;
}

#app .btn-primary:hover {
  border-color: #b71f2b;
  background: #b71f2b;
}

#app .btn-secondary {
  border: 1px solid var(--b9-line);
  background: var(--b9-panel);
  color: var(--b9-ink);
}

#app .btn-secondary:hover {
  border-color: var(--b9-red);
}

#app :is(.input-control, .select-control, .hero-search input, .match-command-search input) {
  min-height: 48px;
  border: 1px solid var(--b9-line);
  background: var(--b9-panel);
  color: var(--b9-ink);
  font-size: 16px;
}

#app :is(.input-control, .select-control, .hero-search input, .match-command-search input)::placeholder {
  color: var(--b9-muted);
  opacity: .9;
}

#app .filters,
#app .filters-premium,
#app .filters-rich {
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--b9-line);
  border-radius: 4px;
  background: var(--b9-panel);
}

#app .filters label {
  gap: 6px;
  color: var(--b9-muted);
  font-size: .74rem;
  font-weight: 680;
}

#app .filter-count {
  font-variant-numeric: tabular-nums;
  font-weight: 650;
}

/* Home lead: comparison first; the official register remains a visible differentiator. */
#app .reference-hero[data-scene="sportsbook"] {
  position: relative;
  overflow: clip;
  color: var(--b9-ink);
  background: var(--b9-paper);
  isolation: isolate;
}

#app .reference-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(310px, .78fr);
  align-items: center;
  gap: clamp(26px, 5vw, 76px);
  width: min(100% - (var(--bastion-gutter) * 2), 1280px);
  padding-block: clamp(38px, 6.5vw, 82px);
}

#app .reference-hero-copy {
  max-width: 700px;
}

#app .reference-hero-copy .reference-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  color: var(--b9-muted);
  font-size: .78rem;
  font-weight: 650;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

#app .reference-hero-copy .reference-kicker::before {
  width: 17px;
  height: 2px;
  background: var(--b9-red);
  content: "";
}

#app .reference-hero h1 {
  max-width: 16ch;
  margin: 0 0 16px;
  font-size: clamp(3.5rem, 6.3vw, 6.2rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: .94;
}

#app .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 60ch;
  margin: 0 0 21px;
  color: var(--b9-muted);
  font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.62;
}

#app .reference-hero .hero-search {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  max-width: 640px;
  margin: 0 0 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

#app .reference-hero .hero-search input {
  min-width: 0;
  padding-inline: 14px;
}

#app .reference-hero .hero-search .btn {
  min-width: 104px;
}

#app .reference-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

#app .front-intent-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  max-width: 650px;
  margin-top: 21px;
  border-top: 1px solid var(--b9-line);
  border-bottom: 1px solid var(--b9-line);
}

#app .front-intent-links a {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 0;
  min-height: 51px;
  padding: 7px 9px 7px 0;
  color: var(--b9-ink);
  font-size: .72rem;
  font-weight: 730;
  line-height: 1.22;
  text-decoration: none;
}

#app .front-intent-links a + a {
  padding-left: 10px;
  border-left: 1px solid var(--b9-line);
}

#app .front-intent-links a:hover {
  color: var(--b9-red);
}


#app .home-hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: center;
  margin-top: 16px;
  color: var(--b9-ink);
  font-size: .7rem;
}

#app .home-hero-foot > small {
  color: var(--b9-ink);
  font-size: .7rem;
  line-height: 1.4;
}

#app .home-hero-foot .hero-source-link {
  color: var(--b9-ink);
  font-weight: 600;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

#app .front-market-file {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-red);
  border-radius: 4px;
  background: var(--b9-panel);
}

#app .front-market-file-body {
  padding: 17px 18px 16px;
}

#app .front-market-file-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

#app .front-market-file-head > div > span,
#app .front-market-file-head label > span {
  display: block;
  margin-bottom: 5px;
  color: var(--b9-muted);
  font: 740 .66rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .055em;
  text-transform: uppercase;
}

#app .front-market-file-head > div > strong {
  display: block;
  font-size: 1.16rem;
  line-height: 1.2;
}

#app .front-market-file-head > div > strong small {
  display: block;
  margin-top: 3px;
  color: var(--b9-muted);
  font-size: .72rem;
  font-weight: 560;
  letter-spacing: 0;
}

#app .front-market-file-head label {
  min-width: 112px;
}

#app .front-market-file-head label > span {
  text-transform: none;
  letter-spacing: 0;
}

#app .front-market-file-head select {
  width: 100%;
  min-height: 39px;
  padding-inline: 9px 23px;
  font-size: .75rem;
}

#app .front-market-file-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 15px;
  border-block: 1px solid var(--b9-line);
}

#app .front-market-file-stats > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 73px;
  padding: 9px 10px;
}

#app .front-market-file-stats > div + div {
  border-left: 1px solid var(--b9-line);
}

#app .front-market-file-stats strong {
  color: var(--b9-ink);
  font-size: 1.48rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.05em;
  line-height: 1;
}

#app .front-market-file-stats span {
  color: var(--b9-muted);
  font-size: .65rem;
  font-weight: 650;
  line-height: 1.25;
}

#app .front-market-file-date {
  margin: 12px 0;
  color: var(--b9-muted);
  font-size: .72rem;
  line-height: 1.45;
}

#app .front-market-file-link {
  min-height: 43px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--b9-line);
  color: var(--b9-ink);
  font-size: .76rem;
  font-weight: 650;
  text-decoration: none;
}

#app .front-market-file-link:hover {
  border-color: var(--b9-red);
  color: var(--b9-red);
}

#app .front-market-file-rows {
  margin-block: 12px;
  border-top: 1px solid var(--b9-line);
}

#app .front-market-file-rows a {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 39px;
  border-bottom: 1px solid var(--b9-line);
  color: var(--b9-ink);
  font-size: .75rem;
  text-decoration: none;
}

#app .front-market-file-rows a > span,
#app .front-market-file-rows a > b {
  font-variant-numeric: tabular-nums;
}

#app .front-market-file-rows a > span {
  color: var(--b9-red);
  font: 720 .65rem/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}

#app .front-market-file-rows a > b {
  color: var(--b9-ink);
  font-size: .78rem;
}

#app .home-coverage-board:not(.front-market-file) {
  border-top-width: 2px;
}

#app .reference-ranking-section {
  padding-block: clamp(34px, 5vw, 64px);
  border-top: 1px solid var(--b9-line);
  background: var(--b9-paper);
}

#app .reference-ranking-section .section-heading {
  margin-bottom: 20px;
}

#app .home-comparison-wrap {
  margin-block: 18px 8px;
}

#app .reference-ranking-list .reference-ranking-card {
  border-top-color: var(--b9-line);
}

#app .reference-ranking-list .reference-ranking-card:hover {
  border-color: var(--b9-line);
  background: color-mix(in srgb, var(--b9-panel) 78%, transparent);
}

#app .front-offer-section {
  border-block: 1px solid var(--b9-line);
  background: var(--b9-panel);
}

#app .front-offer-layout {
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
  align-items: center;
  gap: clamp(22px, 5vw, 64px);
}

#app .front-offer-layout > header h2 {
  max-width: 15ch;
  margin: 6px 0 10px;
  font-size: clamp(1.9rem, 3.2vw, 2.8rem);
  line-height: 1;
}

#app .front-offer-layout > header p:not(.eyebrow) {
  max-width: 50ch;
  margin: 0;
  color: var(--b9-muted);
  font-size: .92rem;
  line-height: 1.55;
}

#app .front-offer-layout .home-offer-link.bastion-offer-brief {
  min-height: 190px;
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  border-radius: 3px;
  background: var(--b9-paper);
  box-shadow: none;
}

#app .front-offer-layout .bastion-offer-copy > small {
  color: var(--b9-muted);
}

#app .front-offer-layout .bastion-offer-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

#app .front-offer-layout .home-offer-arrow {
  align-self: end;
  color: var(--b9-red);
}

#app .comparison-wrap,
#app .home-comparison-wrap {
  overflow-x: auto;
  border: 1px solid var(--b9-line);
  border-radius: 3px;
  background: var(--b9-panel);
  scrollbar-color: var(--b9-muted) var(--b9-panel);
}

#app .comparison-table th {
  background: var(--b9-panel);
  color: var(--b9-muted);
  font-size: .64rem;
  letter-spacing: .07em;
}

#app .comparison-table :is(td, th) {
  border-color: var(--b9-line);
}

#app .ranking-page .ranking-list,
#app .reviews-page .ranking-list {
  margin-top: 19px;
}

#app .guide-featured-card,
#app .sports-topic-panel,
#app .editorial-lead-card,
#app .card {
  border-radius: 3px;
  box-shadow: none;
}

#app .guide-topic-link,
#app .official-registry-facet,
#app .operator-tools button,
#app .market-compare-remove,
#app .market-compare-clear,
#app .market-compare-open {
  border-radius: 2px;
}

#app .quick-nav {
  border-top: 1px solid var(--b9-line);
  background: var(--b9-paper);
}

#app .quick-nav a[aria-current="page"] {
  color: var(--b9-red);
}

#app .quick-nav a[aria-current="page"]::before {
  top: 0;
  height: 2px;
  background: var(--b9-red);
}

#app .site-footer {
  border-top: 2px solid var(--b9-line);
  background: var(--b9-paper);
}

@media (max-width: 1080px) {
  #app .header-inner {
    gap: 10px;
  }

  #app .primary-nav a {
    padding-inline: 5px;
    font-size: .7rem;
  }

  #app .reference-hero-grid {
    grid-template-columns: minmax(0, 1fr) minmax(290px, .76fr);
  }
}

@media (max-width: 760px) {
  #app .page-header-photo {
    padding-block: 19px;
  }

  #app .listing-coverage-notice {
    margin-top: 11px;
    padding: 9px 10px;
    font-size: .76rem;
  }

  #app .reference-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 19px;
    padding-block: 30px 26px;
  }

  #app .reference-hero-copy {
    max-width: 700px;
  }

  #app .reference-hero h1 {
    max-width: 15ch;
    font-size: clamp(2.4rem, 9.4vw, 3.5rem);
    line-height: 1.02;
  }

  #app .front-market-file-body {
    padding: 13px;
  }

  #app .front-market-file-head {
    gap: 8px;
  }

  #app .front-market-file-head label {
    min-width: 100px;
    max-width: 130px;
  }

  #app .front-market-file-stats {
    margin-top: 11px;
  }

  #app .front-market-file-stats > div {
    min-height: 62px;
    padding: 7px 6px;
  }

  #app .front-market-file-stats strong {
    font-size: 1.22rem;
  }

  #app .front-market-file-stats span {
    font-size: .61rem;
  }

  #app .front-market-file-date {
    margin-block: 8px;
    font-size: .62rem;
  }

  #app .front-market-file-link {
    min-height: 39px;
    padding: 6px 8px;
    font-size: .68rem;
  }

  #app .front-market-file-rows {
    margin-block: 7px;
  }

  #app .front-market-file-rows a {
    min-height: 33px;
    font-size: .67rem;
  }

  #app .front-offer-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #app .front-offer-layout .home-offer-link.bastion-offer-brief {
    min-height: auto;
  }

  #app .page-header-photo h1 {
    font-size: clamp(2.2rem, 9vw, 3.5rem);
  }

  #app .section-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 11px;
  }
}

@media (max-width: 420px) {
  #app .reference-hero-grid {
    width: min(100% - 32px, 1280px);
    gap: 15px;
    padding-block: 23px 20px;
  }

  #app .reference-hero-copy .reference-kicker {
    margin-bottom: 12px;
    font-size: .61rem;
  }

  #app .reference-hero h1 {
    max-width: 14ch;
    margin-bottom: 11px;
    font-size: clamp(2.1rem, 9.3vw, 2.65rem);
    line-height: 1.02;
  }

  #app .reference-hero-copy > p:not(.reference-kicker) {
    margin-bottom: 13px;
    font-size: .94rem;
    line-height: 1.52;
  }

  #app .reference-hero .hero-search {
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 6px;
    margin-bottom: 8px;
  }

  #app .reference-hero .hero-search input {
    min-height: 46px;
    padding-inline: 10px;
    font-size: 16px;
  }

  #app .reference-hero .hero-search .btn {
    min-width: 0;
    min-height: 46px;
    padding-inline: 8px;
    font-size: .72rem;
  }

  #app .reference-hero .hero-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 8px;
  }

  #app .reference-hero .hero-actions .btn {
    min-height: 43px;
    padding: 7px 8px;
    font-size: .67rem;
    line-height: 1.2;
  }

  #app .front-intent-links {
    margin-top: 13px;
  }

  #app .front-intent-links a {
    min-height: 46px;
    gap: 4px;
    padding-right: 5px;
    font-size: .64rem;
  }

  #app .front-intent-links a + a {
    padding-left: 6px;
  }

  #app .home-hero-foot {
    gap: 5px 9px;
    margin-top: 10px;
    font-size: .62rem;
  }

  #app .front-market-file-body {
    padding: 10px;
  }

  #app .front-market-file-head > div > span,
  #app .front-market-file-head label > span {
    margin-bottom: 3px;
    font-size: .62rem;
  }

  #app .front-market-file-head > div > strong {
    font-size: .91rem;
  }

  #app .front-market-file-head > div > strong small {
    font-size: .61rem;
  }

  #app .front-market-file-head label {
    min-width: 83px;
    max-width: 95px;
  }

  #app .front-market-file-head select {
    min-height: 34px;
    padding-inline: 6px 17px;
    font-size: .64rem;
  }

  #app .front-market-file-stats > div {
    min-height: 62px;
    padding: 6px 4px;
  }

  #app .front-market-file-stats strong {
    font-size: 1.04rem;
  }

  #app .front-market-file-stats span {
    font-size: .64rem;
  }

  #app .front-market-file-date {
    font-size: .65rem;
  }

  #app .front-market-file-link {
    min-height: 36px;
    gap: 4px;
    font-size: .66rem;
  }

  #app .front-market-file-rows a {
    grid-template-columns: 20px minmax(0, 1fr) auto;
    min-height: 29px;
    gap: 4px;
    font-size: .59rem;
  }

  #app .front-market-file-rows a > span,
  #app .front-market-file-rows a > b {
    font-size: .58rem;
  }

  #app .filters,
  #app .filters-premium,
  #app .filters-rich {
    padding: 11px;
  }
}

/* The review masthead is paper-toned in both themes; keep its metadata readable. */
body[data-route="reviews"] #app .review-hero .byline {
  color: var(--b9-muted);
}

body[data-route="reviews"] #app .review-hero .byline a,
body[data-route="reviews"] #app .review-hero .byline a strong {
  color: var(--b9-ink);
}

body[data-route="reviews"] #app .review-hero .byline small,
body[data-route="reviews"] #app .review-hero .byline > span,
body[data-route="reviews"] #app .review-hero .byline > span strong {
  color: var(--b9-muted);
}

body[data-route="reviews"] #app .review-hero .notice-warning {
  padding: 10px 12px;
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  background: var(--b9-panel);
  color: var(--b9-ink);
}

@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-title-row .lead {
    font-size: .96rem;
    line-height: 1.5;
  }

  body[data-route="reviews"] #app .review-file-masthead > * {
    font-size: .6rem;
  }

  body[data-route="reviews"] #app .review-file-ledger > a > small {
    font-size: .58rem;
  }

  body[data-route="reviews"] #app .review-file-ledger > a > strong {
    font-size: .7rem;
  }
}

@media (max-width: 360px) {
  body[data-route="reviews"] #app .review-file-masthead > * {
    font-size: .53rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app *,
  #app *::before,
  #app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Field-test records separate measured public-page observations from operator claims. */
#app .bastion-field-test,
#app .bastion-test-protocol {
  margin-block: clamp(28px, 4vw, 48px);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-red);
  background: var(--b9-panel);
  color: var(--b9-ink);
}

#app .bastion-field-test {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .8fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: start;
}

#app .field-test-heading .eyebrow,
#app .bastion-test-protocol > .eyebrow {
  color: var(--b9-red);
  font: 700 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

#app .field-test-heading h2,
#app .bastion-test-protocol h2 {
  margin-block: 10px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  line-height: 1.06;
}

#app .field-test-heading > p:not(.eyebrow),
#app .bastion-test-protocol > p:not(.eyebrow) {
  max-width: 68ch;
  color: var(--b9-muted);
  line-height: 1.6;
}

#app .field-test-heading > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--b9-ink);
  font-size: .82rem;
  font-weight: 600;
  text-decoration-color: var(--b9-red);
  text-underline-offset: 4px;
}

#app .field-test-ledger {
  margin: 0;
  border-top: 1px solid var(--b9-line);
}

#app .field-test-ledger > div {
  display: grid;
  grid-template-columns: minmax(86px, .7fr) minmax(0, 1.3fr);
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--b9-line);
}

#app .field-test-ledger dt {
  color: var(--b9-muted);
  font-size: .73rem;
}

#app .field-test-ledger dd {
  margin: 0;
  font-size: .8rem;
  font-weight: 680;
  overflow-wrap: anywhere;
}

#app .field-test-empty-note,
#app .field-test-protocol-foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--b9-line);
  color: var(--b9-muted);
  font-size: .78rem;
  line-height: 1.55;
}

#app .field-test-observations,
#app .field-test-protocol-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--b9-line);
}

#app .field-test-observations > li,
#app .field-test-protocol-list > li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--b9-line);
}

#app .field-test-observations > li > span,
#app .field-test-protocol-list > li > span {
  color: var(--b9-red);
  font: 700 .72rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

#app .field-test-observations strong {
  display: block;
  font-size: .86rem;
}

#app .field-test-observations p,
#app .field-test-protocol-list p {
  margin: 3px 0 0;
  color: var(--b9-muted);
  font-size: .82rem;
  line-height: 1.55;
}

#app .field-test-protocol-list > li > p { margin: 0; }

#app .field-test-source-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
}

#app .field-test-source-links a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--b9-ink);
  font-size: .76rem;
  font-weight: 680;
  text-decoration-color: var(--b9-red);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}

#app .offer-publication-notice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 8px 14px;
  margin: 14px 0 0;
  padding: 13px 15px;
  border: 1px solid var(--b9-line);
  border-inline-start: 3px solid var(--b9-red);
  background: var(--b9-panel);
  color: var(--b9-ink);
}

#app .offer-publication-mark {
  padding-top: 2px;
  color: var(--b9-red);
  font-size: .67rem;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#app .offer-publication-notice p {
  margin: 0;
  color: var(--b9-muted);
  font-size: .82rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  #app .bastion-field-test {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  #app .field-test-ledger > div {
    grid-template-columns: minmax(92px, .8fr) minmax(0, 1.2fr);
  }

  #app .offer-publication-notice {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 12px;
  }
}

/* Source: styles/market-comparison.css */
/* Bastion: make official-register comparisons durable and shareable. */
#app .market-compare-share {
  min-height: 42px;
  padding: 7px 11px;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border: 1px solid var(--b9-line);
  border-radius: 2px;
  cursor: pointer;
  font-size: .76rem;
  font-weight: 700;
}

#app .market-compare-share:hover:not(:disabled) {
  border-color: var(--b9-red);
  color: var(--b9-red);
}

#app .market-compare-share:disabled {
  opacity: .5;
  cursor: not-allowed;
}

#app .market-compare-share:focus-visible,
#app .market-compare-share-field input:focus-visible {
  outline: 2px solid var(--b9-red);
  outline-offset: 3px;
}

#app .market-compare-share-status,
#app .market-compare-share-field {
  grid-column: 1 / -1;
}

#app .market-compare-share-status {
  margin: 0;
  color: var(--b9-muted);
  font-size: .74rem;
  line-height: 1.45;
}

#app .market-compare-share-field {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  color: var(--b9-muted);
  font-size: .7rem;
  font-weight: 700;
}

#app .market-compare-share-field input {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border: 1px solid var(--b9-line);
  border-radius: 2px;
  font: 500 .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  #app .market-compare-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  #app .market-compare-actions > button:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 360px) {
  #app .market-compare-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  #app .market-compare-actions > button:last-child {
    grid-column: auto;
  }
}

/* Source: styles/score-evidence.css */
/* Evidence-backed scorecards and explicit unpublished states. */
#app .reference-ranking-card.casino-card > .ranking-position strong {
  color: var(--b9-muted, #a7adb3) !important;
  font-size: .65rem !important;
  letter-spacing: .06em !important;
}

#app .reference-ranking-card.casino-card > .ranking-position span {
  color: var(--b9-muted, #a7adb3) !important;
  font-size: .5rem !important;
  letter-spacing: .05em !important;
}

#app .score-unpublished {
  color: var(--ref-muted, #a7b3b1);
  font: 650 .82rem/1.2 var(--b9-type-sans, inherit);
  letter-spacing: .02em;
}

#app .score-status-link {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  margin-top: .35rem;
  color: var(--ref-muted, #a7b3b1);
  font-size: .68rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#app .operator-score-cell .score-status-link {
  flex-basis: 100%;
  justify-content: center;
}

#app .score-card .score-unpublished {
  display: block;
  color: var(--b9-ink, #171a1e);
  font-size: .8rem;
}

#app .score-card .score-status-link {
  justify-content: center;
  color: var(--b9-muted, #66707a);
}

#app .score-evidence-pending,
#app .score-publication-rules {
  border: 1px solid var(--ref-line, #38464b);
  border-left: 3px solid var(--ref-yellow, #d3b777);
  border-radius: 3px;
  padding: 1.1rem 1.2rem;
  background: var(--ref-panel, rgba(255,255,255,.035));
}

#app .score-evidence-pending > strong {
  display: block;
  color: var(--ref-text, #f4f1e9);
  font: 650 1.05rem/1.2 var(--b9-type-editorial, Georgia, serif);
}

#app .score-evidence-pending > p,
#app .score-publication-rules > p {
  max-width: 66ch;
  color: var(--ref-muted, #a7b3b1);
  line-height: 1.65;
}

#app .score-evidence-pending > a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  color: var(--ref-text, #f4f1e9);
  font-size: .82rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#app .rating-evidence-list {
  display: grid;
  gap: .75rem;
}

#app .rating-evidence-row {
  border: 1px solid var(--ref-line, #38464b);
  border-radius: 3px;
  padding: .7rem .9rem .85rem;
}

#app .rating-evidence-row .rating-row {
  margin: .15rem 0 .5rem;
}

#app .rating-evidence-row .rating-row > span small {
  margin-left: .35rem;
  color: var(--ref-muted, #a7b3b1);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
}

#app .rating-evidence-row > p {
  max-width: 68ch;
  color: var(--ref-muted, #a7b3b1);
  font-size: .86rem;
  line-height: 1.65;
}

#app .rating-evidence-sources {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}

#app .rating-evidence-sources a {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  border: 1px solid var(--ref-line, #38464b);
  border-radius: 2px;
  padding: .25rem .5rem;
  color: var(--ref-text, #f4f1e9);
  font-size: .7rem;
  overflow-wrap: anywhere;
}

#app .score-overall-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid var(--ref-line, #38464b);
  padding-top: .8rem;
}

#app .score-overall-line strong {
  color: var(--ref-yellow, #d3b777);
  font: 650 1.4rem/1 var(--b9-type-editorial, Georgia, serif);
  font-variant-numeric: tabular-nums;
}

#app .score-overall-line span {
  color: var(--ref-muted, #a7b3b1);
  font-size: .78rem;
}

#app .score-criterion-editor {
  border-top: 1px solid var(--ref-line, #38464b);
  padding-top: .9rem;
}

#app .score-criterion-editor > h4 {
  margin: 0 0 .6rem;
}

@media (max-width: 640px) {
  #app .score-evidence-pending,
  #app .score-publication-rules { padding: .9rem; }
  #app .rating-evidence-row { padding: .65rem; }
  #app .score-overall-line { align-items: flex-start; flex-direction: column; gap: .35rem; }
  #app .score-card .score-status-link { min-height: 36px; }
}

/* Source: styles/source-corrections.css */
/* Bastion: make source corrections easy to report from the evidence ledger. */
#app .source-correction-panel {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  padding: 16px 18px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-inline-start: 3px solid var(--b9-red);
}

#app .source-correction-kicker {
  margin: 0;
  color: var(--b9-muted);
  font-size: .68rem;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}

#app .source-correction-panel > p:not(.source-correction-kicker) {
  max-width: 68ch;
  margin: 0;
  color: var(--b9-muted);
  font-size: .9rem;
  line-height: 1.55;
}

#app .source-correction-link {
  display: inline-flex;
  width: fit-content;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  color: var(--b9-ink);
  font-size: .84rem;
  font-weight: 750;
  text-underline-offset: 3px;
}

#app .source-correction-link:focus-visible {
  outline: 2px solid var(--b9-red);
  outline-offset: 3px;
}

#app .source-correction-hint {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--b9-muted);
  font-size: .82rem;
  line-height: 1.5;
}

@media (max-width: 600px) {
  #app .source-correction-panel { padding: 14px; }
  #app .source-correction-link { width: 100%; }
}

/* Source: styles/alberta-register.css */
/* Alberta AGLC register: keep legal registration records distinct from public site cards. */
#app .official-registry-entry[data-record-type="site-card"] .aigc-aglc-crossref {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 2px 0 4px;
  padding: 12px;
  border: 1px solid var(--b9-line);
  border-left: 2px solid var(--b9-red);
  background: color-mix(in srgb, var(--b9-paper) 91%, var(--b9-line));
}

#app .aigc-aglc-crossref-heading,
#app .aigc-aglc-crossref.is-unmatched > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px 12px;
  margin-bottom: 8px;
}

#app .aigc-aglc-crossref-heading > span,
#app .aigc-aglc-crossref.is-unmatched > div:first-child > span { color: var(--b9-ink); font-size: .72rem; font-weight: 760; }
#app .aigc-aglc-crossref-heading > small,
#app .aigc-aglc-crossref.is-unmatched > div:first-child > small { color: var(--b9-muted); font-size: .65rem; }
#app .aigc-aglc-match-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 7px; }
#app .aigc-aglc-match { min-width: 0; padding: 9px; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .aigc-aglc-match > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; color: var(--b9-ink); text-decoration: none; }
#app .aigc-aglc-match > a > span { grid-column: 1; color: var(--b9-muted); font-size: .62rem; }
#app .aigc-aglc-match > a > strong { grid-column: 1; font-size: .73rem; overflow-wrap: anywhere; }
#app .aigc-aglc-match > a > .ui-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 14px; height: 14px; }
#app .aigc-aglc-match > a:hover strong,
#app .aigc-aglc-crossref.is-unmatched > a:hover { text-decoration: underline; text-underline-offset: 3px; }
#app .aigc-aglc-match > p { display: grid; gap: 3px; margin: 8px 0 0; padding-top: 7px; border-top: 1px solid var(--b9-line); }
#app .aigc-aglc-match > p > b { color: var(--b9-muted); font-size: .61rem; }
#app .aigc-aglc-match > p > span { color: var(--b9-ink); font-size: .7rem; overflow-wrap: anywhere; }
#app .aigc-aglc-match > p > small { color: var(--b9-muted); font-size: .62rem; line-height: 1.4; }
#app .aigc-aglc-crossref.is-unmatched > p { margin: 0; color: var(--b9-muted); font-size: .68rem; line-height: 1.5; }
#app .aigc-aglc-crossref.is-unmatched > a { display: inline-flex; align-items: center; gap: 5px; min-height: 40px; margin-top: 4px; color: var(--b9-ink); font-size: .68rem; font-weight: 720; }
#app .aigc-aglc-crossref :is(a, summary):focus-visible { outline: 2px solid var(--b9-focus); outline-offset: 3px; }

#app .aglc-operator-directory {
  border-top: 2px solid var(--b9-line);
  padding-block: clamp(34px, 6vw, 72px);
}

#app .aglc-aigc-crossrefs { margin: 0 12px 12px; padding: 12px; border: 1px solid var(--b9-line); border-left: 2px solid var(--b9-red); background: var(--b9-paper); }
#app .aglc-aigc-crossrefs > p { margin: 0 0 8px; color: var(--b9-muted); font-size: .68rem; font-weight: 760; }
#app .aglc-aigc-crossrefs > ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
#app .aglc-aigc-crossrefs > ul > li { min-width: 0; padding: 9px; border: 1px solid var(--b9-line); }
#app .aglc-aigc-crossrefs > ul > li > a { display: grid; gap: 2px; color: var(--b9-ink); text-decoration: none; }
#app .aglc-aigc-crossrefs > ul > li > a:hover { text-decoration: underline; text-underline-offset: 3px; }
#app .aglc-aigc-crossrefs > ul > li > a > strong { font-size: .73rem; overflow-wrap: anywhere; }
#app .aglc-aigc-crossrefs > ul > li > a > small { color: var(--b9-muted); font-size: .65rem; overflow-wrap: anywhere; }
#app .aglc-aigc-crossrefs > ul > li > span { display: block; margin-top: 7px; color: var(--b9-muted); font-size: .62rem; line-height: 1.4; }
#app .aglc-aigc-crossrefs a:focus-visible { outline: 2px solid var(--b9-focus); outline-offset: 3px; }
#app .market-compare-record > a[data-aglc-record-link] { display: flex; width: 100%; min-height: 44px; align-items: center; border-top: 1px solid var(--b9-line); color: var(--b9-ink); font-size: .72rem; line-height: 1.35; overflow-wrap: anywhere; }
#app .market-compare-record > a[data-aglc-record-link]:focus-visible { outline: 2px solid var(--b9-focus); outline-offset: 2px; }
#app .official-registry-mapping-control { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
#app .official-registry-mapping-label { color: var(--b9-muted); font-size: .68rem; font-weight: 720; letter-spacing: .04em; text-transform: uppercase; }
#app .aglc-registrant-entry[id] { scroll-margin-top: 84px; }
#app .official-registry-entry[id] { scroll-margin-top: 84px; }

#app .aglc-directory-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  margin-bottom: 22px;
}

#app .aglc-directory-heading h2 {
  max-width: 22ch;
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3vw, 2.8rem);
  line-height: 1.08;
}

#app .aglc-directory-heading > div > p:last-child {
  max-width: 72ch;
  margin: 0;
  color: var(--b9-muted);
  font-size: .91rem;
}

#app .aglc-directory-heading .btn { min-height: 46px; }

#app .aglc-directory-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 18px;
  border-block: 1px solid var(--b9-line);
}

#app .aglc-directory-stats > div {
  display: grid;
  align-content: center;
  gap: 4px;
  min-height: 78px;
  padding: 10px 16px;
}

#app .aglc-directory-stats > div + div { border-left: 1px solid var(--b9-line); }
#app .aglc-directory-stats strong { font-size: 1.6rem; font-variant-numeric: tabular-nums; line-height: 1; }
#app .aglc-directory-stats span { color: var(--b9-muted); font-size: .72rem; line-height: 1.3; }

#app .aglc-directory-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .42fr) auto;
  align-items: end;
  gap: 12px;
  margin: 20px 0 14px;
}

#app .aglc-directory-toolbar label { display: grid; gap: 6px; color: var(--b9-muted); font-size: .73rem; font-weight: 700; }
#app .aglc-directory-toolbar :is(input, select) { min-height: 46px; width: 100%; }
#app .aglc-directory-toolbar output { padding: 10px 0; color: var(--b9-muted); font-size: .76rem; font-variant-numeric: tabular-nums; text-align: right; }

#app .aglc-registrant-list { display: grid; gap: 7px; }

#app .aglc-registrant-entry {
  min-width: 0;
  border: 1px solid var(--b9-line);
  background: var(--b9-paper);
}

#app .aglc-registrant-entry[hidden] { display: none; }

#app .aglc-registrant-entry > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 54px;
  padding: 11px 16px;
  color: var(--b9-ink);
  cursor: pointer;
  font-size: .88rem;
  font-weight: 720;
  list-style-position: inside;
}

#app .aglc-registrant-entry > summary::marker { color: var(--b9-red); }
#app .aglc-registrant-entry > summary small { flex: 0 0 auto; color: var(--b9-muted); font-size: .69rem; font-weight: 650; }
#app .aglc-registrant-entry[open] > summary { border-bottom: 1px solid var(--b9-line); }
#app .aglc-registration-records { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 10px; padding: 12px; }

#app .aglc-registration-record {
  min-width: 0;
  padding: 14px;
  border-left: 2px solid var(--b9-red);
  background: color-mix(in srgb, var(--b9-paper) 90%, var(--b9-line));
}

#app .aglc-registration-record > header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-bottom: 10px; }
#app .aglc-registration-record > header strong { font-size: .76rem; }
#app .aglc-registration-record > header span { color: var(--b9-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
#app .aglc-registration-record dl { display: grid; grid-template-columns: minmax(100px, .34fr) minmax(0, 1fr); gap: 7px 12px; margin: 0 0 11px; }
#app .aglc-registration-record dl > div { display: contents; }
#app .aglc-registration-record dt { color: var(--b9-muted); font-size: .68rem; }
#app .aglc-registration-record dd { min-width: 0; margin: 0; font-size: .71rem; overflow-wrap: anywhere; }
#app .aglc-registration-record dd span { display: inline-block; margin: 0 4px 3px 0; padding: 3px 6px; border: 1px solid var(--b9-line); }
#app .aglc-registration-record h4 { margin: 12px 0 6px; font-size: .71rem; letter-spacing: .025em; }
#app .aglc-listed-names { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; padding: 0; list-style: none; }
#app .aglc-listed-names li { max-width: 100%; padding: 5px 7px; border: 1px solid var(--b9-line); color: var(--b9-ink); font-size: .7rem; overflow-wrap: anywhere; }
#app .aglc-field-empty { margin: 0; color: var(--b9-muted); font-size: .73rem; }
#app .aglc-directory-empty { padding: 18px; border: 1px dashed var(--b9-line); color: var(--b9-muted); }
#app .aglc-directory-caveat { max-width: 86ch; margin: 18px 0 0; padding: 12px 14px; border-left: 2px solid var(--b9-red); color: var(--b9-muted); font-size: .76rem; line-height: 1.55; }
#app .aglc-directory-caveat a { color: var(--b9-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
#app .aglc-operator-directory :is(a, input, select, summary):focus-visible { outline: 2px solid var(--b9-focus); outline-offset: 3px; }

@media (max-width: 760px) {
  #app .aglc-directory-heading { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 14px; }
  #app .aglc-directory-heading .btn { justify-self: start; }
  #app .aglc-directory-toolbar { grid-template-columns: minmax(0, 1fr) minmax(0, .62fr); }
  #app .aglc-directory-toolbar output { grid-column: 1 / -1; padding: 0; text-align: left; }
}

@media (max-width: 480px) {
  #app .aglc-directory-stats { grid-template-columns: minmax(0, 1fr); }
  #app .aglc-directory-stats > div { min-height: 59px; padding-inline: 11px; }
  #app .aglc-directory-stats > div + div { border-top: 1px solid var(--b9-line); border-left: 0; }
  #app .aglc-directory-stats > div { grid-template-columns: 55px minmax(0, 1fr); align-items: center; }
  #app .aglc-directory-stats strong { font-size: 1.25rem; }
  #app .aglc-directory-toolbar { grid-template-columns: minmax(0, 1fr); }
  #app .aglc-directory-toolbar output { grid-column: auto; }
  #app .aglc-registrant-entry > summary { align-items: flex-start; padding: 10px; font-size: .8rem; }
  #app .aglc-registration-records { grid-template-columns: minmax(0, 1fr); padding: 8px; }
  #app .aglc-registration-record { padding: 11px; }
  #app .aglc-registration-record dl { grid-template-columns: minmax(82px, .36fr) minmax(0, 1fr); gap: 6px 8px; }
}


/* Bastion: a source-first matrix for the complete AiGC card set. */
#app .official-registry-list[hidden],
#app .official-registry-matrix[hidden] { display: none !important; }
#app .official-registry-view-tools { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px 14px; padding-top: 11px; border-top: 1px solid var(--b9-line); }
#app .official-registry-view-switch { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--b9-line); background: var(--b9-panel); }
#app .official-registry-view-button { min-height: 42px; padding: 7px 12px; border: 1px solid transparent; color: var(--b9-muted); background: transparent; cursor: pointer; font: inherit; font-size: .75rem; font-weight: 700; }
#app .official-registry-view-button:hover,
#app .official-registry-view-button.is-active { color: var(--b9-ink); border-color: var(--b9-red); }
#app .official-registry-view-button.is-active { box-shadow: inset 0 -2px var(--b9-red); }
#app .market-matrix-export { min-height: 44px; padding: 8px 13px; border: 1px solid var(--b9-red); color: var(--b9-ink); background: color-mix(in srgb, var(--b9-red) 10%, var(--b9-panel)); cursor: pointer; font: inherit; font-size: .75rem; font-weight: 760; }
#app .market-matrix-export:hover:not(:disabled) { background: color-mix(in srgb, var(--b9-red) 18%, var(--b9-panel)); }
#app .market-matrix-export:disabled { opacity: .52; cursor: not-allowed; }
#app .official-registry-matrix { min-width: 0; border-top: 1px solid var(--b9-line); }
#app .official-registry-matrix-head,
#app .official-registry-matrix-row { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(100px, .8fr) minmax(132px, 1.05fr) minmax(142px, 1.15fr) minmax(100px, .8fr) minmax(128px, 1fr); }
#app .official-registry-matrix-head { gap: 0; padding: 0 14px; color: var(--b9-muted); background: var(--b9-panel); }
#app .official-registry-matrix-head > span { min-width: 0; padding: 10px 9px; font-size: .61rem; font-weight: 760; letter-spacing: .055em; line-height: 1.35; text-transform: uppercase; }
#app .official-registry-matrix-rows { display: grid; }
#app .official-registry-matrix-row { min-width: 0; border-top: 1px solid var(--b9-line); background: var(--b9-paper); transition: background-color .18s ease; }
#app .official-registry-matrix-row:hover { background: color-mix(in srgb, var(--b9-panel) 66%, var(--b9-paper)); }
#app .official-registry-matrix-row[hidden] { display: none !important; }
#app .market-matrix-cell { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: 7px; padding: 13px 12px; border-left: 1px solid color-mix(in srgb, var(--b9-line) 72%, transparent); }
#app .market-matrix-cell:first-child { border-left: 0; }
#app .market-matrix-label { color: var(--b9-muted); font-size: .59rem; font-weight: 760; letter-spacing: .055em; line-height: 1.3; text-transform: uppercase; }
#app .market-matrix-site > a { color: var(--b9-ink); font-size: .86rem; line-height: 1.25; text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
#app .market-matrix-site > a:hover { text-decoration-color: var(--b9-red); }
#app .market-matrix-site > small,
#app .market-matrix-basis > small,
#app .market-matrix-legal > small { color: var(--b9-muted); font-size: .67rem; line-height: 1.45; overflow-wrap: anywhere; }
#app .market-matrix-badges { display: flex; flex-wrap: wrap; gap: 5px; }
#app .market-matrix-badges > span { padding: 4px 6px; border: 1px solid var(--b9-line); color: var(--b9-ink); font-size: .65rem; line-height: 1.25; overflow-wrap: anywhere; }
#app .market-matrix-status { display: inline-flex; align-items: flex-start; gap: 6px; padding: 5px 7px; border: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .64rem; font-weight: 760; line-height: 1.35; }
#app .market-matrix-status::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; margin-top: 3px; border-radius: 50%; background: var(--b9-muted); }
#app .market-matrix-status.is-matched { border-color: color-mix(in srgb, var(--b9-red) 62%, var(--b9-line)); color: var(--b9-ink); }
#app .market-matrix-status.is-matched::before { background: var(--b9-red); }
#app .market-matrix-entities { display: grid; width: 100%; gap: 3px; }
#app .market-matrix-entities > a,
#app .market-matrix-source-links > a { display: flex; min-width: 0; min-height: 38px; align-items: center; color: var(--b9-ink); font-size: .68rem; font-weight: 680; line-height: 1.35; overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--b9-line) 35%, transparent); text-underline-offset: 3px; }
#app .market-matrix-entities > a:hover,
#app .market-matrix-source-links > a:hover { text-decoration-color: var(--b9-red); }
#app .market-matrix-basis > strong,
#app .market-matrix-expiry > strong { color: var(--b9-ink); font-size: .71rem; line-height: 1.4; overflow-wrap: anywhere; }
#app .market-matrix-source-links { display: grid; width: 100%; gap: 2px; }
#app .market-matrix-cell .official-registry-compare { width: 100%; min-height: 42px; margin-top: auto; }
#app .official-registry-matrix :is(a, button):focus-visible { outline: 2px solid var(--b9-focus); outline-offset: 2px; }
#app .official-registry-mapping-control { padding-top: 2px; }
@media (max-width: 1120px) {
  #app .official-registry-matrix-head { display: none; }
  #app .official-registry-matrix-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .market-matrix-cell { border-bottom: 1px solid var(--b9-line); }
  #app .market-matrix-cell:nth-child(3n + 1) { border-left: 0; }
}
@media (max-width: 700px) {
  #app .official-registry-view-tools { align-items: stretch; }
  #app .official-registry-view-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .official-registry-view-button { min-width: 0; padding-inline: 7px; }
  #app .market-matrix-export { width: 100%; }
  #app .official-registry-matrix-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .market-matrix-site,
  #app .market-matrix-legal,
  #app .market-matrix-basis,
  #app .market-matrix-sources { grid-column: 1 / -1; }
  #app .market-matrix-cell:nth-child(3n + 1) { border-left: 1px solid color-mix(in srgb, var(--b9-line) 72%, transparent); }
  #app .market-matrix-cell:nth-child(2n + 1) { border-left: 0; }
  #app .market-matrix-site { padding-bottom: 11px; }
  #app .market-matrix-products,
  #app .market-matrix-expiry { min-height: 94px; }
  #app .market-matrix-source-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 9px; }
  #app .market-matrix-source-links > a { min-height: 42px; }
}
@media (max-width: 420px) {
  #app .official-registry-view-switch { grid-template-columns: minmax(0, 1fr); }
  #app .official-registry-matrix-row { grid-template-columns: minmax(0, 1fr); }
  #app .market-matrix-cell,
  #app .market-matrix-cell:nth-child(2n + 1),
  #app .market-matrix-cell:nth-child(3n + 1) { grid-column: 1; border-left: 0; }
  #app .market-matrix-products,
  #app .market-matrix-expiry { min-height: 0; }
  #app .market-matrix-source-links { grid-template-columns: minmax(0, 1fr); }
}

#app .market-matrix-class { display: grid; width: 100%; gap: 3px; margin-top: auto; padding-top: 7px; border-top: 1px solid var(--b9-line); }
#app .market-matrix-class > span { color: var(--b9-muted); font-size: .58rem; font-weight: 720; line-height: 1.35; }
#app .market-matrix-class > strong { color: var(--b9-ink); font-size: .67rem; line-height: 1.4; overflow-wrap: anywhere; }
#app .market-matrix-capture { display: block; margin-top: auto; color: var(--b9-muted); font-size: .59rem; line-height: 1.4; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  #app .market-matrix-class { margin-top: 3px; }
  #app .market-matrix-capture { margin-top: 2px; }
}

@media (max-width: 700px) {
  #app .official-registry-view-switch { width: 100%; }
  #app .official-registry-view-button { width: 100%; }
}
@media (max-width: 420px) {
  #app .official-registry-view-switch { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1121px) {
  #app .official-registry-matrix-row .market-matrix-label { display: none; }
}

/* Source: styles/site-editorial-finish.css */
/* Final public-site art direction: warm paper, natural labels, and quiet UI. */
:root {
  --b9-ink: #F4F2ED;
  --b9-muted: #A7ADB3;
  --b9-paper: #090B0D;
  --b9-panel: #111418;
  --b9-panel-raised: #171B20;
  --b9-line: #2A3037;
  --b9-red: #D92D35;
  --b9-gold: #F0C24B;
  --b9-yellow: #F0C24B;
  --ref-bg: #090B0D;
  --ref-surface: #111418;
  --ref-surface-2: #171B20;
  --ref-panel: #171B20;
  --ref-line: #2A3037;
  --ref-text: #F4F2ED;
  --ref-muted: #A7ADB3;
  --ref-red: #D92D35;
  --ref-red-2: #B71F2B;
  --ref-yellow: #F0C24B;
  --background: #090B0D;
  --surface: #111418;
  --surface-alt: #171B20;
  --surface-elevated: #171B20;
  --text: #F4F2ED;
  --text-secondary: #A7ADB3;
  --muted: #A7ADB3;
  --border: #2A3037;
  --border-strong: #414850;
}

html[data-theme="dark"] {
  --b9-ink: #F4F2ED;
  --b9-muted: #A7ADB3;
  --b9-paper: #090B0D;
  --b9-panel: #111418;
  --b9-panel-raised: #171B20;
  --b9-line: #2A3037;
  --b9-red: #D92D35;
  --b9-gold: #F0C24B;
  --b9-yellow: #F0C24B;
  --ref-bg: #090B0D;
  --ref-surface: #111418;
  --ref-surface-2: #171B20;
  --ref-panel: #171B20;
  --ref-line: #2A3037;
  --ref-text: #F4F2ED;
  --ref-muted: #A7ADB3;
  --ref-red: #D92D35;
  --ref-red-2: #B71F2B;
  --ref-yellow: #F0C24B;
  --background: #090B0D;
  --surface: #111418;
  --surface-alt: #171B20;
  --surface-elevated: #171B20;
  --text: #F4F2ED;
  --text-secondary: #A7ADB3;
  --muted: #A7ADB3;
  --border: #2A3037;
  --border-strong: #414850;
}

html[data-theme="light"] {
  --b9-ink: #171A1E;
  --b9-muted: #626C75;
  --b9-paper: #F1F3F5;
  --b9-panel: #FFFFFF;
  --b9-panel-raised: #F8F9FA;
  --b9-line: #D9DDE1;
  --b9-red: #C62630;
  --b9-gold: #8A6500;
  --b9-yellow: #8A6500;
  --ref-bg: #F1F3F5;
  --ref-surface: #FFFFFF;
  --ref-surface-2: #F8F9FA;
  --ref-panel: #EEF1F3;
  --ref-line: #D9DDE1;
  --ref-text: #171A1E;
  --ref-muted: #626C75;
  --ref-red: #C62630;
  --ref-red-2: #A91E27;
  --ref-yellow: #8A6500;
  --background: #F1F3F5;
  --surface: #FFFFFF;
  --surface-alt: #F8F9FA;
  --surface-elevated: #EEF1F3;
  --text: #171A1E;
  --text-secondary: #626C75;
  --muted: #626C75;
  --border: #D9DDE1;
  --border-strong: #C3C9CE;
}

html { background: var(--ref-bg); }
body {
  color: var(--ref-text);
  background: var(--ref-bg);
}

body::before { display: none; content: none; }

#app .page-header,
#app .page-header-photo {
  min-height: 0;
  padding-block: clamp(26px, 3.4vw, 44px);
}

#app {
  color: var(--b9-ink);
  font-family: var(--b9-type-interface);
  font-kerning: normal;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

#app :is(h1, h2) {
  font-family: var(--b9-type-editorial);
  font-synthesis: none;
  font-weight: 600;
  letter-spacing: -.027em;
  text-transform: none;
}

#app :is(h3, h4) {
  font-family: var(--b9-type-interface);
  font-synthesis: none;
  letter-spacing: -.012em;
  text-transform: none;
}

/* Editorial labels use sentence case; monospace stays reserved for literal data. */
#app :is(.eyebrow, .reference-kicker, .section-kicker,
  .comparison-table th, .sports-scoreboard span, .sports-guide-list a > span,
  .sports-column h3, .front-market-file-head > div > span,
  .front-market-file-head label > span,
  .front-market-file-rows a > span, .front-market-file-stats span,
  .offer-record-cell > span, .offer-record-term-list dt,
  .official-registry-matrix-head > span,
  .official-registry-mapping-label, .market-matrix-label,
  .review-registry-route small, .review-registry-dates dt,
  .review-registry-stamp, .review-file-masthead > strong,
  .review-file-masthead > span, .review-file-ledger small,
  .guide-index-tools .filter-count, .guide-index-heading > span,
  .guide-topic-link > span, .guide-index-number,
  .guide-mobile-toc-count,
  .guide-source-section .source-sequence,
  .guide-source-section .source-date strong,
  .guide-index-copy .eyebrow,
  .guide-operator-copy .eyebrow, .guide-index-heading .eyebrow,
  .source-correction-kicker, .operator-support-kicker > span,
  .match-operator-list article > span, .market-compare-record dt) {
  font-family: var(--b9-type-interface) !important;
  font-variant: normal;
  font-weight: 620;
  letter-spacing: .005em !important;
  text-transform: none !important;
}

#app .eyebrow,
#app .reference-kicker {
  color: var(--b9-red);
  font-size: .8rem;
  line-height: 1.35;
}

#app .comparison-table th {
  color: var(--b9-muted);
  font-size: .76rem;
  text-align: left;
}

#app .front-market-file-head > div > span,
#app .front-market-file-head label > span,
#app .front-market-file-rows a > span {
  font-size: .72rem;
  line-height: 1.35;
  letter-spacing: 0;
}

#app .front-market-file-rows a > span,
#app .review-file-masthead > span,
#app .guide-index-number,
#app .source-register .source-sequence {
  font-variant-numeric: tabular-nums;
}

#app :is(.filter-count, .guide-index-heading > span, .guide-topic-link > span,
  .guide-index-number, .guide-mobile-toc-count,
  .guide-source-section .source-sequence, .guide-source-section .source-date strong) {
  font-variant-numeric: tabular-nums;
}

#app .sports-scoreboard span,
#app .offer-record-term-list dt,
#app .review-registry-route small,
#app .review-registry-dates dt,
#app .review-file-ledger small,
#app .official-registry-matrix-head > span,
#app .official-registry-mapping-label,
#app .market-matrix-label,
#app .market-compare-record dt {
  color: var(--b9-muted);
  font-size: .75rem;
  line-height: 1.35;
}

#app .hero-search input,
html[data-theme="light"] #app .reference-hero .hero-search input {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
}

html[data-theme="light"] #app .hero-search input::placeholder,
html[data-theme="light"] #app .reference-hero .hero-search input::placeholder {
  color: var(--b9-muted);
  opacity: .92;
}

#app :is(.card, .reference-top-board, .casino-card, .guide-card,
  .sports-topic-panel, .front-market-file, .offer-record-browser) {
  box-shadow: none;
}

#app .card { color: var(--b9-ink); background: var(--b9-panel); }

#app :is(.btn, .icon-button, .menu-toggle, .saved-header-button,
  .primary-nav a, .quick-nav a, .guide-index-open, .bonus-hotspot) {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}

#app :is(.btn, .icon-button, .menu-toggle, .saved-header-button):hover,
#app .guide-index-open:hover {
  transform: none;
  box-shadow: none;
}

#app .ui-icon {
  flex: 0 0 auto;
  stroke-width: 1.7;
}

#app .rating-evidence-row {
  animation: none;
}

@media (max-width: 760px) {
  #app :is(.eyebrow, .reference-kicker) { font-size: .76rem; }
  #app .comparison-table th { font-size: .75rem; }
  }

@media (prefers-reduced-motion: reduce) {
  #app *,
  #app *::before,
  #app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Keep factual labels readable and reserve condensed data styling for actual values. */
#app :is(.responsive-table th, .table-scroll th, .article-content th,
  .search-result-row > div > span, .site-footer h2, .site-footer h3,
  .bonus-deadline-head, .bonus-deadline-foot, .bonus-record-type,
  .bonus-record-index span, .bonus-term-sheet dt, .offer-record-cell > span,
  .offer-record-term-list dt, .bonus-register-scope, .operator-facts-cell dt,
  .operator-offer-cell > span, .ranking-position span,
  .key-fact > span, .official-registry-matrix-head > span,
  .official-registry-mapping-label, .market-matrix-label,
  .bonus-lab-formula-label, .editorial-lead-card span,
  .editorial-story-list span) {
  font-family: var(--b9-type-interface) !important;
  font-variant: normal;
  font-weight: 620;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#app .casino-logo-fallback {
  color: var(--b9-ink);
  font-family: var(--b9-type-interface) !important;
  font-size: .68rem;
  font-weight: 720;
  letter-spacing: -.02em !important;
  text-transform: none !important;
}

#app :is(.editorial-lead-card span, .editorial-story-list span) {
  color: var(--b9-red);
  font-size: .74rem;
  font-weight: 650;
}

body[data-route="bonuses"] #app .bonus-deadline-head {
  justify-content: flex-end;
  color: var(--b9-red);
  font-size: .78rem;
  letter-spacing: .01em !important;
}

body[data-route="bonuses"] #app .bonus-deadline-head > span:last-child {
  margin-left: auto;
  max-width: 100%;
  text-align: right;
}

body[data-route="bonuses"] #app .bonus-deadline-main strong,
body[data-route="bonuses"] #app .bonus-deadline-foot b {
  font-family: var(--b9-type-interface);
  font-size: .82rem;
  font-weight: 650;
  letter-spacing: 0;
}

body[data-route="bonuses"] #app .bonus-deadline-link .ui-icon {
  width: 15px;
  height: 15px;
  color: var(--b9-red);
}

body[data-route="reviews"] #app .review-file-stamp > .ui-icon {
  width: 21px;
  height: 21px;
  color: var(--b9-red);
  stroke-width: 1.65;
}

@media (max-width: 760px) {
  #main-content { padding-bottom: calc(82px + env(safe-area-inset-bottom)); }

  body[data-route="bonuses"] #app .bonus-deadline-foot {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid var(--b9-line);
  }
  body[data-route="bonuses"] #app .bonus-deadline-foot span { display: inline; }

  #app .mobile-utility-rail {
    min-height: calc(70px + env(safe-area-inset-bottom));
    padding-block: 5px calc(5px + env(safe-area-inset-bottom));
  }
  #app .mobile-utility-rail > a {
    min-height: 56px;
    gap: 3px;
    font-size: .64rem;
  }
  #app .mobile-utility-rail a > .ui-icon {
    width: 18px;
    height: 18px;
    display: block !important;
    color: currentColor;
    stroke-width: 1.7;
  }
  #app .mobile-utility-rail a > span {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .64rem;
    line-height: 1;
  }
}

/* Operator files: let the operator and the source evidence lead the record. */
#app .operator-directory-filters {
  display: grid;
  grid-template-columns: minmax(220px,1.35fr) minmax(138px,.72fr) minmax(190px,1fr) minmax(200px,1fr);
  align-items: end;
  gap: 12px;
  margin: 0 0 18px;
  padding: 15px;
  border: 1px solid var(--b9-line);
  background: var(--b9-panel);
}
#app .operator-directory-filters > label {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: 7px;
  min-width: 0;
  color: var(--b9-muted);
  font-size: .76rem;
  font-weight: 620;
  line-height: 1.3;
}
#app .operator-directory-filters :is(input, select) {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 48px;
  box-sizing: border-box;
  padding-inline: 11px;
  border: 1px solid var(--b9-line);
  border-radius: 0;
  color: var(--b9-ink);
  background: var(--b9-panel-raised);
  font: 500 .9rem/1.35 var(--b9-type-interface);
}
#app .operator-directory-filter-status {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--b9-line);
}
#app .operator-directory-filter-status .filter-count { color: var(--b9-ink); font-size: .78rem; }
#app .operator-directory-filter-status .btn { min-height: 44px; }
#app .reference-ranking-list { gap: 14px; }
#app .reference-ranking-card.casino-card {
  display: grid !important;
  grid-template-columns: minmax(190px, 1.08fr) minmax(116px, .48fr) minmax(215px, 1.2fr) minmax(220px, 1.12fr) minmax(160px, .76fr);
  grid-template-areas: "brand score offer facts actions";
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  border-radius: 2px;
  background: var(--b9-panel);
  box-shadow: none;
  transform: none !important;
}

#app .reference-ranking-card.casino-card > .operator-brand-cell,
#app .reference-ranking-card.casino-card > .operator-score-cell,
#app .reference-ranking-card.casino-card > .operator-offer-cell,
#app .reference-ranking-card.casino-card > .operator-facts-cell,
#app .reference-ranking-card.casino-card > .operator-action-cell {
  min-width: 0;
  margin: 0;
  padding: 18px 16px;
  border: 0;
  border-right: 1px solid var(--b9-line);
  background: transparent;
}

#app .reference-ranking-card.casino-card > .operator-brand-cell {
  grid-area: brand;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-content: start;
  align-items: center;
  gap: 12px;
}

#app .reference-ranking-card.casino-card > .operator-brand-cell .casino-logo-frame {
  width: 54px;
  height: 54px;
  border-color: var(--b9-line);
  border-radius: 2px;
}

#app .reference-ranking-card.casino-card > .operator-brand-cell h2,
#app .reference-ranking-card.casino-card > .operator-brand-cell h3 {
  margin: 0 0 5px;
  font: 600 1.12rem/1.12 var(--b9-type-editorial);
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}

#app .reference-ranking-card.casino-card > .operator-brand-cell p,
#app .reference-ranking-card.casino-card > .operator-brand-cell small {
  display: block;
  margin: 0 0 4px;
  color: var(--b9-muted);
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#app .reference-ranking-card.casino-card > .operator-score-cell {
  grid-area: score;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  text-align: center;
}

#app .reference-ranking-card.casino-card > .operator-score-cell > strong:not(.score-unpublished) {
  color: var(--b9-ink);
  font: 600 1.8rem/.95 var(--b9-type-editorial);
  font-variant-numeric: tabular-nums;
}

#app .reference-ranking-card.casino-card > .operator-score-cell > span,
#app .reference-ranking-card.casino-card > .operator-score-cell > small {
  color: var(--b9-muted);
  font-size: .78rem;
}

#app .reference-ranking-card.casino-card > .operator-score-cell > small { flex-basis: 100%; }
#app .reference-ranking-card.casino-card > .operator-score-cell.is-unscored {
  align-content: center;
  justify-content: center;
  border-left: 1px solid var(--b9-line);
}

#app .reference-ranking-card.casino-card > .operator-score-cell.is-unscored .score-unpublished {
  max-width: 13ch;
  color: var(--b9-muted);
  font: 620 .82rem/1.3 var(--b9-type-interface);
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

#app .reference-ranking-card.casino-card > .operator-offer-cell { grid-area: offer; }
#app .reference-ranking-card.casino-card > .operator-offer-cell > span,
#app .reference-ranking-card.casino-card > .operator-facts-cell > dl dt {
  color: var(--b9-muted);
  font: 620 .78rem/1.35 var(--b9-type-interface);
  letter-spacing: 0;
  text-transform: none;
}

#app .reference-ranking-card.casino-card > .operator-offer-cell > strong {
  display: block;
  margin: 7px 0 5px;
  color: var(--b9-ink);
  font: 600 1rem/1.22 var(--b9-type-editorial);
  overflow-wrap: anywhere;
}

#app .reference-ranking-card.casino-card > .operator-offer-cell > small {
  display: block;
  color: var(--b9-muted);
  font-size: .84rem;
  line-height: 1.48;
  overflow-wrap: anywhere;
  -webkit-line-clamp: 4;
}

#app .reference-ranking-card.casino-card .operator-source-link {
  min-height: 42px;
  margin-top: 5px;
  font-size: .82rem;
}

#app .reference-ranking-card.casino-card > .operator-facts-cell {
  grid-area: facts;
  display: block;
}

#app .reference-ranking-card.casino-card > .operator-facts-cell dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 12px;
  margin: 0;
}

#app .reference-ranking-card.casino-card > .operator-facts-cell dl > div {
  min-width: 0;
  padding: 0 0 8px;
  border: 0;
  border-bottom: 1px solid var(--b9-line);
  background: transparent;
}

#app .reference-ranking-card.casino-card > .operator-facts-cell dl dd {
  margin: 4px 0 0;
  color: var(--b9-ink);
  font-size: .86rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#app .reference-ranking-card.casino-card .operator-payment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 11px;
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--b9-line);
}

#app .reference-ranking-card.casino-card .operator-payment-list > span {
  min-height: 0;
  padding: 0;
  color: var(--b9-ink);
  background: transparent;
  border: 0;
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#app .reference-ranking-card.casino-card .operator-payment-list > .operator-payment-heading {
  flex-basis: 100%;
  color: var(--b9-muted);
  font-size: .78rem;
  font-weight: 620;
}

#app .reference-ranking-card.casino-card .operator-payment-list > span:not(.operator-payment-heading):not(.operator-payment-empty)::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 6px 2px 0;
  border-radius: 50%;
  background: var(--b9-red);
}

#app .reference-ranking-card.casino-card .operator-payment-list small {
  color: var(--b9-muted);
  font-size: .78rem;
}

#app .reference-ranking-card.casino-card .operator-payment-list .operator-payment-empty {
  flex-basis: 100%;
  color: var(--b9-muted);
  border: 0;
}

#app .reference-ranking-card.casino-card > .operator-action-cell {
  grid-area: actions;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  border-right: 0;
}

#app .reference-ranking-card.casino-card > .operator-action-cell .btn,
#app .reference-ranking-card.casino-card > .operator-action-cell .text-action,
#app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  justify-content: center;
  gap: 7px;
  font-size: .83rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

#app .reference-ranking-card.casino-card > .operator-action-cell .text-action {
  color: var(--b9-ink);
  border: 1px solid var(--b9-line);
  background: var(--b9-panel);
  font-size: .9rem;
  font-weight: 650;
  text-decoration: none;
}

#app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

#app .reference-ranking-card.casino-card > .operator-action-cell .operator-score-breakdown { width: 100%; }
#app .reference-ranking-card.casino-card > .operator-action-cell > small { display: none; }
#app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button {
  color: var(--b9-ink);
  border: 1px solid var(--b9-line);
  background: transparent;
  font-weight: 620;
}
#app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button[aria-pressed="true"] {
  color: var(--b9-red);
  border-color: color-mix(in srgb, var(--b9-red) 55%, var(--b9-line));
  background: color-mix(in srgb, var(--b9-red) 8%, var(--b9-panel));
}
#app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button:hover {
  background: var(--b9-panel-raised);
}

@media (max-width: 1200px) {
  #app .operator-directory-filters { grid-template-columns: minmax(0,1.25fr) repeat(2,minmax(0,1fr)); }
  #app .operator-directory-filters > .operator-directory-search { grid-column: 1 / -1; }
  #app .reference-ranking-card.casino-card {
    grid-template-columns: minmax(0, 1fr) minmax(112px, .34fr);
    grid-template-areas:
      "brand score"
      "offer offer"
      "facts facts"
      "actions actions";
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell { border-bottom: 1px solid var(--b9-line); }
  #app .reference-ranking-card.casino-card > .operator-score-cell { border-bottom: 1px solid var(--b9-line); }
  #app .reference-ranking-card.casino-card > .operator-offer-cell,
  #app .reference-ranking-card.casino-card > .operator-facts-cell { border-right: 0; }
  #app .reference-ranking-card.casino-card > .operator-offer-cell { border-bottom: 1px solid var(--b9-line); }
  #app .reference-ranking-card.casino-card > .operator-facts-cell { border-bottom: 1px solid var(--b9-line); }
}

@media (max-width: 760px) {
  #app .operator-directory-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 12px; }
  #app .operator-directory-filters > .operator-directory-search,
  #app .operator-directory-filter-status { grid-column: 1 / -1; }
  #app .reference-ranking-list { gap: 13px; }
  #app .reference-ranking-card.casino-card {
    grid-template-columns: minmax(0, 1fr) minmax(92px, .38fr);
    border-left-width: 3px;
  }
  #app .reference-ranking-card.casino-card > .operator-brand-cell { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 14px 12px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell .casino-logo-frame { width: 46px; height: 46px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell h2,
  #app .reference-ranking-card.casino-card > .operator-brand-cell h3 { margin-bottom: 4px; font-size: 1.08rem; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell p,
  #app .reference-ranking-card.casino-card > .operator-brand-cell small { margin-bottom: 2px; font-size: .82rem; }
  #app .reference-ranking-card.casino-card > .operator-score-cell { padding: 12px 8px; }
  #app .reference-ranking-card.casino-card > .operator-score-cell.is-unscored .score-unpublished { max-width: 12ch; font-size: .78rem; }
  #app .reference-ranking-card.casino-card > .operator-offer-cell,
  #app .reference-ranking-card.casino-card > .operator-facts-cell { padding: 13px 14px; }
  #app .reference-ranking-card.casino-card > .operator-offer-cell > small { font-size: .88rem; -webkit-line-clamp: unset; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl dt,
  #app .reference-ranking-card.casino-card .operator-payment-list > .operator-payment-heading { font-size: .8rem; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl dd { font-size: .88rem; }
  #app .reference-ranking-card.casino-card .operator-payment-list > span { font-size: .86rem; }
  #app .reference-ranking-card.casino-card .operator-payment-list small { font-size: .78rem; }
  #app .reference-ranking-card.casino-card > .operator-action-cell { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 12px 14px 14px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-score-breakdown,
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools { grid-column: 1 / -1; }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button { min-height: 44px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools [data-compare-id] { display: inline-flex !important; }
  #app .mobile-utility-rail > a { font-size: .72rem; }
  #app .mobile-utility-rail a > .ui-icon { width: 20px; height: 20px; stroke-width: 1.9; }
}

@media (max-width: 460px) {
  #app .operator-directory-filters { grid-template-columns: minmax(0,1fr); }
  #app .operator-directory-filters > label,
  #app .operator-directory-filters > .operator-directory-search { grid-column: 1; }
  #app .operator-directory-filter-status { align-items: stretch; }
  #app .operator-directory-filter-status .btn { width: 100%; }
}

@media (max-width: 380px) {
  #app .reference-ranking-card.casino-card { grid-template-columns: minmax(0, 1fr) minmax(82px, .36fr); }
  #app .reference-ranking-card.casino-card > .operator-brand-cell { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell .casino-logo-frame { width: 40px; height: 40px; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell h2,
  #app .reference-ranking-card.casino-card > .operator-brand-cell h3 { font-size: 1rem; }
  #app .reference-ranking-card.casino-card > .operator-brand-cell p,
  #app .reference-ranking-card.casino-card > .operator-brand-cell small { font-size: .78rem; }
  #app .reference-ranking-card.casino-card > .operator-score-cell { padding-inline: 6px; }
  #app .reference-ranking-card.casino-card > .operator-score-cell.is-unscored .score-unpublished { font-size: .74rem; }
  #app .reference-ranking-card.casino-card > .operator-offer-cell,
  #app .reference-ranking-card.casino-card > .operator-facts-cell { padding-inline: 11px; }
  #app .reference-ranking-card.casino-card > .operator-facts-cell dl { gap: 8px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell { padding-inline: 11px; }
  #app .reference-ranking-card.casino-card > .operator-action-cell .btn,
  #app .reference-ranking-card.casino-card > .operator-action-cell .text-action,
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-tools button { padding-inline: 5px; font-size: .78rem; }
  #app .reference-ranking-card.casino-card .operator-payment-list > span:not(.operator-payment-heading):not(.operator-payment-empty) {
    position: relative;
    flex-basis: 100%;
    padding-left: 10px;
  }
  #app .reference-ranking-card.casino-card .operator-payment-list > span:not(.operator-payment-heading):not(.operator-payment-empty)::before {
    position: absolute;
    left: 0;
    top: .65em;
    margin: 0;
  }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  #app .reference-ranking-card.casino-card { transition: border-color .16s ease, background-color .16s ease; }
  #app .reference-ranking-card.casino-card:hover { border-color: var(--b9-border-strong, var(--b9-red)); background: color-mix(in srgb, var(--b9-panel) 94%, var(--b9-red)); }
}

/* League links already carry their sport and league; remove the repeated helper slogan. */
#app .league-command-card {
  min-height: 148px;
  justify-content: flex-start;
  gap: 9px;
  padding: 18px 16px;
  border-radius: 2px;
  background: var(--b9-panel);
}

#app .league-command-card > span {
  color: var(--b9-red);
  font-family: var(--b9-type-interface);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .025em;
}

#app .league-command-card > strong {
  max-width: 17ch;
  color: var(--b9-ink);
  font: 600 1.18rem/1.14 var(--b9-type-editorial);
}

#app .league-command-card.is-pitch { border-left-color: var(--ref-line); }

@media (max-width: 760px) {
  body[data-route="sports"] #app .league-command-card {
    min-height: 112px;
    gap: 8px;
    padding: 13px 12px;
  }
  body[data-route="sports"] #app .league-command-card > strong { font-size: 1.04rem; }
}

/* Source: styles/bastion-art-direction.css */
/* Local Source Serif 4 / Source Sans 3 pair: editorial reading and clear market data. */
@font-face {
  font-family: "Bastion Editorial";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Bastion Editorial";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Bastion Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Bastion Sans";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("/fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
:root {
  --bastion-paper-warm: #ffffff;
  --bastion-ink-deep: #171a1e;
  --bastion-red: #d92d35;
}

body,
#app,
#app :is(button, input, select, textarea) {
  font-family: var(--b9-type-interface) !important;
  font-synthesis: none;
  font-optical-sizing: auto;
}

body { font-size: 16px; line-height: 1.58; }

#app :is(h1, h2),
#app .guide-card h3,
#app .guide-featured-copy h2,
#app .guide-index-copy h3,
#app .guide-article-hero h1,
#app .review-hero h1,
#app .reference-ranking-card .operator-brand-cell :is(h2, h3),
#app .reference-ranking-card .operator-offer-cell > strong,
#app .page-header-photo h1 {
  font-family: var(--b9-type-editorial) !important;
  font-weight: 520;
  letter-spacing: -.028em;
  text-wrap: balance;
}

#app :is(h3, h4, .eyebrow, .reference-kicker, .comparison-table th,
  .operator-directory-filters label, .guide-index-tools, .source-register small,
  .bonus-deadline-head, .offer-record-cell > span) {
  font-family: var(--b9-type-interface) !important;
}

#app :is(.eyebrow, .reference-kicker, .primary-nav, .mobile-utility-rail,
  .operator-score-cell, .front-market-file-stats, .meta, .comparison-table th,
  .offer-browser-position, .review-file-masthead, .guide-index-number) {
  font-variant-numeric: tabular-nums;
}

#app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--b9-focus, #9a6814);
  outline-offset: 3px;
}

#app .ui-icon {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

#app .ui-icon-arrow .ui-icon-arrow-head { stroke: var(--bastion-red); stroke-width: 1.9; }
#app .btn-primary .ui-icon-arrow-head,
#app .btn-bonus-hot .ui-icon-arrow-head,
#app .btn-bonus-claim .ui-icon-arrow-head { stroke: currentColor; }

#app .bonus-hotspot-mark .ui-icon-gift { color: var(--b9-red); }
#app .bonus-hotspot-mark {
  width: 38px;
  height: 38px;
  color: var(--b9-red);
  background: transparent;
  border: 0;
}
#app .bonus-hotspot-mark .ui-icon-gift { width: 29px; height: 29px; stroke-width: 1.9; }
#app .bonus-hotspot {
  width: min(278px, calc(100vw - 28px));
  min-height: 62px;
  grid-template-columns: 38px minmax(0,1fr) auto;
  gap: 11px;
}
#app .bonus-hotspot-copy small { font-size: .71rem; line-height: 1.25; }
#app .bonus-hotspot-copy strong { font-size: .88rem; }
#app .bonus-hotspot-arrow .ui-icon { width: 18px; height: 18px; }
#app .bonus-hotspot:hover { transform: none; border-color: var(--b9-red); background: var(--b9-panel-raised); }

/* Stories use a reading face for paragraphs; controls and headings stay in the interface face. */
#app .guide-layout .article-content { font-family: var(--b9-type-reading); }
#app .guide-layout .article-content :is(h2, h3, h4, table, .meta, .eyebrow) {
  font-family: var(--b9-type-interface) !important;
}

/* The front page is a reporting desk: one search path and a legible source sheet. */
#app .reference-hero[data-scene="sportsbook"] {
  color: #f4f1e9 !important;
  background: #090b0d !important;
  border-bottom: 3px solid var(--bastion-red);
}

#app .reference-hero-grid {
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  padding-block: clamp(38px, 4.8vw, 66px);
}

#app .reference-hero-copy .reference-kicker {
  margin-bottom: 19px;
  color: #c4bcae !important;
  font-size: .76rem;
  letter-spacing: .01em;
}

#app .reference-hero-copy .reference-kicker::before {
  width: 22px;
  height: 2px;
  background: #d13a3d;
}

#app .reference-hero h1 {
  max-width: 13ch;
  margin-bottom: 18px;
  color: #f7f4ec !important;
  font-family: var(--b9-type-editorial) !important;
  font-size: clamp(2.8rem, 4.4vw, 4rem) !important;
  font-weight: 650 !important;
  letter-spacing: -.04em !important;
  line-height: 1.02 !important;
}

#app .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 49ch;
  color: #c9c9c2 !important;
  font-size: 1.03rem;
  line-height: 1.58;
}

#app .reference-hero .hero-search {
  margin-top: 22px;
  gap: 7px;
}

#app .reference-hero .hero-search input {
  min-height: 52px;
  color: var(--bastion-ink-deep) !important;
  background: var(--bastion-paper-warm) !important;
  border-color: #d9dde1 !important;
}

#app .reference-hero .hero-search input::placeholder { color: #616461; opacity: 1; }

#app .reference-hero .hero-search .btn-primary,
#app .reference-hero .hero-actions .btn-primary {
  color: #fff !important;
  background: var(--b9-red) !important;
  border-color: var(--b9-red) !important;
}

#app .reference-hero .hero-actions .btn-secondary {
  color: #f2eee5 !important;
  background: transparent !important;
  border-color: #414850 !important;
}

#app .reference-hero .hero-actions .btn-secondary:hover,
#app .reference-hero .hero-actions .btn-secondary:focus-visible {
  background: #171b20 !important;
  border-color: #a7adb3 !important;
}

#app .front-intent-links {
  border-color: #2a3037;
}

#app .front-intent-links a {
  color: #ece9e1;
  font-size: .78rem;
  font-weight: 600;
}

#app .front-intent-links a + a { border-left-color: #566063; }
#app .front-intent-links a:hover { color: #ff7379; }

#app .home-hero-foot,
#app .home-hero-foot > small { color: #c2c3bd; }

#app .home-hero-foot .hero-source-link {
  color: #f0d2c7;
  text-decoration-color: #a8463c;
  text-underline-offset: 4px;
}

#app .front-market-file {
  color: #171a1e;
  border: 1px solid #d9dde1;
  border-top: 3px solid #d92d35;
  border-radius: 2px;
  background: #ffffff;
}

#app .front-market-file-body { color: #171a1e; }
#app .front-market-file-head > div > span,
#app .front-market-file-head label > span { color: #626c75; }
#app .front-market-file-head strong,
#app .front-market-file-stats strong,
#app .front-market-file-rows a > b { color: #171a1e; }
#app .front-market-file-head label select { color: #171a1e; background: #f8f9fa; border-color: #d9dde1; }
#app .front-market-file-stats { border-block-color: #d9dde1; }
#app .front-market-file-stats > div + div { border-left-color: #d9dde1; }
#app .front-market-file-stats span,
#app .front-market-file-date { color: #626c75; }
#app .front-market-file-link { color: #171a1e; border-color: #d9dde1; }
#app .front-market-file-link:hover { color: #a91e27; border-color: #a91e27; }

/* Shared records and article cards retain distinct roles within the publication. */
#app .section-heading h2,
#app .page-header-photo h1,
#app .review-hero h1,
#app .guide-article-hero h1 {
  font-weight: 500;
  letter-spacing: -.026em;
}

#app .reference-ranking-card,
#app .guide-card,
#app .source-register,
#app .official-registry-browser,
#app .offer-record-browser,
#app .comparison-shell {
  border-radius: 2px;
  box-shadow: none;
}

#app .reference-ranking-card { border-left-width: 2px; }
#app .reference-ranking-card .operator-score-cell > strong { font-family: var(--b9-type-editorial); font-weight: 500; }
#app .reference-ranking-card .operator-payment-list > span { font-size: .86rem; }
#app .comparison-table th { font-size: .75rem; font-weight: 650; letter-spacing: .025em; }

/* Compare is a reading sheet and must keep its contrast in both themes. */
#app .compare-sheet-backdrop { background: rgba(6, 9, 10, .72); backdrop-filter: none; }
#app .compare-sheet-panel {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-top: 2px solid var(--b9-red);
  box-shadow: 0 -18px 50px rgba(0, 0, 0, .22);
}
#app .compare-sheet-head h2 { color: var(--b9-ink); }
#app .compare-sheet-head p:not(.eyebrow) { color: var(--b9-muted); }
#app .compare-sheet-head .eyebrow { color: var(--b9-red); }
#app .compare-sheet-grid > .compare-profile-record {
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-color: var(--b9-line);
  border-radius: 2px;
}
#app .compare-sheet-brand { border-color: var(--b9-line); }
#app .compare-sheet-brand strong,
#app .compare-profile-facts dd { color: var(--b9-ink); }
#app .compare-sheet-brand small,
#app .compare-profile-facts dt { color: var(--b9-muted); }
#app .compare-profile-facts > div { border-color: var(--b9-line); }
#app .compare-sheet-panel .icon-button { color: var(--b9-ink); background: var(--b9-paper); border-color: var(--b9-line); }
#app .compare-sheet:not([hidden]) .compare-sheet-panel { animation: bastion-compare-sheet-enter .22s cubic-bezier(.2,.72,.25,1) both; }

@keyframes bastion-compare-sheet-enter {
  from { opacity: .82; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#app .primary-nav a,
#app .mobile-utility-rail a,
#app .btn,
#app .operator-action-cell .btn,
#app .front-market-file-link {
  font-family: var(--b9-type-interface);
}

#app .primary-nav a { font-size: .8rem; font-weight: 600; }
#app .mobile-utility-rail a { font-size: .75rem; font-weight: 600; }
#app .mobile-utility-rail a[aria-current="page"]::before { background: var(--bastion-red); }

#app .btn,
#app .icon-button,
#app .menu-toggle,
#app .saved-header-button { border-radius: 2px; }

#app :is(.btn, .icon-button, .menu-toggle, .saved-header-button, .primary-nav a,
  .mobile-utility-rail a, .front-market-file-link) {
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .btn:hover,
  #app .reference-hero .hero-actions .btn:hover { transform: none; box-shadow: none; }

}

@media (max-width: 760px) {
  #app .reference-hero[data-scene="sportsbook"] { border-bottom-width: 2px; }
  #app .reference-hero-grid { gap: 18px; padding-block: 26px 24px; }
  #app .reference-hero h1 {
    max-width: 16ch;
    margin-bottom: 12px;
    font-size: clamp(2.25rem, 8vw, 3rem) !important;
    line-height: 1.04 !important;
  }
  #app .reference-hero-copy > p:not(.reference-kicker) { max-width: 44ch; font-size: 1rem; line-height: 1.52; }
  #app .reference-hero .hero-search { margin-top: 17px; }
  #app .reference-hero .hero-search input,
  #app .reference-hero .hero-search .btn { min-height: 48px; }
  #app .front-market-file-body { padding: 14px; }
  #app .bonus-hotspot {
    width: 100%;
    min-height: calc(66px + env(safe-area-inset-bottom));
    grid-template-columns: 40px minmax(0,1fr) auto;
    border-top: 2px solid var(--b9-red);
    border-left: 0;
    padding-bottom: calc(8px + env(safe-area-inset-bottom));
  }
  #app .front-intent-links a { min-height: 50px; padding-right: 6px; font-size: .74rem; }
  #app .front-intent-links a + a { padding-left: 8px; }
  #app .home-hero-foot { gap: 7px 12px; }
  #app .home-hero-foot > small { font-size: .73rem; }
  #app .section-heading h2 { font-size: clamp(1.8rem, 7.5vw, 2.35rem); }
}

@media (max-width: 380px) {
  #app .reference-hero-grid { padding-block: 22px 20px; }
  #app .reference-hero h1 { max-width: 15ch; font-size: clamp(2.25rem, 9vw, 2.7rem) !important; }
  #app .front-market-file-body { padding: 12px; }
  #app .mobile-utility-rail a { font-size: .7rem; }
  #app .mobile-utility-rail a > .ui-icon { width: 18px; height: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .compare-sheet:not([hidden]) .compare-sheet-panel { animation: none !important; }
  #app :is(.ui-icon-gift .gift-lid, .front-market-file-link > span,
    .section-link .ui-icon, .guide-link .ui-icon) { transition: none !important; transform: none !important; }
}

/* Guide art is either source-credited photography or deliberately absent. */
#app .guide-photo-credit { display: block !important; }
#app .guide-photo-credit a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
#app .guide-card-no-photo .card-body { padding-top: 16px; }
#app .guide-featured-story.guide-no-photo { grid-template-columns: minmax(0, 1fr); }
#app .guide-featured-story.guide-no-photo .guide-featured-copy { max-width: 900px; padding: clamp(22px, 4vw, 46px); }
#app .guide-article-hero-grid.guide-no-hero-photo {
  grid-template-columns: minmax(0, 880px);
  justify-content: center;
}
#app .guide-no-hero-photo .guide-hero-copy { width: 100%; }
#app .guide-no-hero-photo .guide-hero-copy h1 { max-width: 20ch; }

@media (max-width: 760px) {
  #app .guide-featured-story.guide-no-photo { grid-template-columns: minmax(0, 1fr); }
  #app .guide-featured-story.guide-no-photo .guide-featured-copy { padding: 18px 16px; }
  #app .guide-article-hero-grid.guide-no-hero-photo {
    grid-template-areas: "category" "title" "dek" "byline" "reading";
  }
}

/* Display type belongs to the publication; controls and evidence stay in Plex Sans. */
#app h1,
#app .reference-hero h1,
#app .page-header-photo h1,
#app .guide-article-hero h1,
#app .guide-hero-copy h1 {
  font-family: var(--b9-type-reading) !important;
  font-weight: 520 !important;
  letter-spacing: -.035em !important;
  text-wrap: balance;
  font-optical-sizing: auto;
}

#app :is(h2, h3, h4, .section-heading h2, .bonus-lab-intro h2,
  .offer-browser-heading h2, .comparison-head h3, .review-registry-head h3) {
  font-family: var(--b9-type-interface) !important;
  font-weight: 620;
  letter-spacing: -.018em;
}

#app .reference-hero h1 {
  max-width: 16ch;
  font-size: clamp(2.9rem, 4.8vw, 4.35rem) !important;
  line-height: 1.03 !important;
}

#app .bonus-directory-copy h1 {
  max-width: 17ch;
  font-size: clamp(2.5rem, 4.8vw, 3.9rem) !important;
  line-height: 1.02 !important;
}

body[data-route="bonuses"] #app .bonus-deadline-main time {
  font-family: var(--b9-type-reading);
  font-weight: 520;
  letter-spacing: -.035em;
}

body[data-route="bonuses"] #app .bonus-deadline-main strong {
  font-family: var(--b9-type-interface);
  font-size: .8rem;
  font-weight: 620;
  letter-spacing: -.01em;
}

/* Red means an action; yellow stays with dates, scores and comparison data. */
#app :is(.btn-bonus-hot, .btn-bonus-claim) {
  color: #fff;
  background: var(--b9-red);
  border-color: var(--b9-red);
}

#app :is(.btn-bonus-hot, .btn-bonus-claim):hover,
#app :is(.btn-bonus-hot, .btn-bonus-claim):focus-visible {
  color: #fff;
  background: var(--b9-red-dark, #b71f2b);
  border-color: var(--b9-red-dark, #b71f2b);
}

/* Mobile utility controls use their names; the B mark remains the only branded glyph. */
#app .account-header-button {
  width: auto;
  min-width: 72px;
  padding-inline: 10px;
  font-size: .75rem;
  font-weight: 650;
  text-decoration: none;
}

#app .saved-header-button::before { display: none !important; }

@media (max-width: 980px) {
  #app .header-inner { grid-template-columns: minmax(0, 1fr) auto auto !important; }
  #app .brand { grid-column: 1; min-width: 0; }
  #app .menu-toggle { grid-column: 2; margin-left: 0; }
  #app .header-tools { grid-column: 3; justify-self: end; width: max-content !important; min-width: 0; }

  #app .menu-toggle {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: auto !important;
    min-width: 56px !important;
    height: 44px;
    justify-content: center;
    margin-left: auto;
    padding-inline: 8px;
    color: var(--b9-ink);
    background: transparent;
    border: 0;
    border-bottom: 2px solid var(--b9-red);
    border-radius: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .055em;
    line-height: 1;
    text-transform: uppercase;
  }

  #app .header-tools { margin-left: 0; }
  #app .saved-header-button {
    display: inline-flex !important;
    width: auto !important;
    min-width: 76px !important;
    min-height: 42px;
    justify-content: center;
    gap: 6px;
    padding-inline: 8px;
  }

  #app .saved-header-button > span {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    margin: 0;
    white-space: nowrap;
  }

  #app .saved-header-button > b {
    position: static;
    min-width: 20px;
    height: 20px;
  }
}

@media (max-width: 380px) {
  #app .header-inner { gap: 7px; }
  #app .brand-symbol { width: 34px; height: 34px; }
  #app .brand-word { font-size: .94rem; }
  #app .menu-toggle { min-width: 50px !important; padding-inline: 6px; font-size: .66rem; }
  #app .saved-header-button { min-width: 68px !important; gap: 5px; padding-inline: 6px; font-size: .74rem; }
}

@media (max-width: 760px) {
  #app .reference-hero h1 { max-width: 16ch; font-size: clamp(2.35rem, 9.4vw, 3.25rem) !important; }
  #app .bonus-directory-copy h1 { max-width: 18ch; font-size: clamp(2.25rem, 8vw, 3rem) !important; }
}

#app .primary-nav a.nav-bonus-link:is(:hover, :focus-visible, [aria-current="page"]) {
  color: var(--b9-ink);
  background: transparent;
  border-color: transparent;
  box-shadow: inset 0 -2px var(--b9-red);
}

#app .primary-nav a.nav-bonus-link .nav-bonus-glyph,
#app .primary-nav a.nav-bonus-link:is(:hover, :focus-visible, [aria-current="page"]) .ui-icon-gift {
  color: var(--b9-red);
}

/* The offer browser is a dated editorial record, not a casino reel. */
#app .offer-record-browser {
  margin-block: 30px 38px;
  padding-block: 22px;
  color: #f4f2ed;
  background: #111418;
  border-block: 1px solid #2a3037;
}

#app .offer-browser-heading {
  align-items: end;
  margin-bottom: 15px;
}

#app .offer-browser-heading .eyebrow {
  margin-bottom: 7px;
  color: #f06469;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .035em;
}

#app .offer-browser-heading h2 {
  margin: 0 0 6px;
  color: #f4f2ed;
  font-family: var(--b9-type-reading) !important;
  font-size: clamp(1.55rem, 2.4vw, 2rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.08;
}

#app .offer-browser-heading p:not(.eyebrow) {
  max-width: 48ch;
  color: #a7adb3;
  font-size: .9rem;
  line-height: 1.5;
}

#app .offer-browser-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

#app .offer-browser-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}

#app .offer-browser-position-wrap {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 76px;
}

#app .offer-browser-position {
  min-width: 0;
  color: #d5d8da;
  font-family: var(--b9-type-interface);
  font-size: .77rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

#app .offer-browser-progress {
  width: 76px;
  height: 2px;
  overflow: hidden;
  background: #414850;
}

#app .offer-browser-progress > i {
  width: 0;
  height: 100%;
  display: block;
  background: #e13a42;
  transition: width .2s ease-out;
}

#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next) {
  min-width: 88px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  color: #f4f2ed;
  background: transparent;
  border: 1px solid #4a5158;
  border-radius: 0;
  box-shadow: none;
  font: 600 .82rem/1.2 var(--b9-type-interface);
  white-space: nowrap;
}

#app .offer-record-browser .offer-browser-next { border-bottom: 2px solid #d92d35; }

#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next):hover,
#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next):focus-visible {
  color: #fff;
  background: #1a1e23;
  border-color: #d92d35;
  transform: none;
  box-shadow: none;
}

#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next):disabled {
  color: #a7adb3;
  border-color: #414850;
  cursor: default;
}

#app .offer-record-card {
  min-width: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid #d9dde1;
  border-top: 2px solid #d92d35;
}

#app .offer-record-fields {
  grid-template-columns: minmax(155px, .78fr) minmax(230px, 1.3fr) minmax(220px, 1fr);
  gap: 0;
  color: #171a1e;
  background: #fff;
}

#app .offer-record-cell {
  min-height: 132px;
  padding: 17px;
  background: #fff;
  border-right: 1px solid #d9dde1;
  border-bottom: 0;
}

#app .offer-record-cell:last-child { border-right: 0; }

#app .offer-record-cell > span {
  display: block;
  margin-bottom: 9px;
  color: #626c75;
  font-size: .68rem;
  font-weight: 650;
  letter-spacing: .025em;
}

#app .offer-record-cell strong {
  color: #171a1e;
  font-family: var(--b9-type-interface);
  font-size: .96rem;
  font-weight: 650;
  line-height: 1.35;
}

#app .offer-record-cell p {
  color: #434b52;
  font-size: .84rem;
  line-height: 1.55;
}

#app .offer-record-cell small {
  color: #626c75;
  font-size: .76rem;
  line-height: 1.45;
}

#app .offer-record-operator-cell { display: block; }

#app .offer-record-operator-lockup {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

#app .offer-record-operator-lockup .casino-logo-frame {
  width: 46px;
  height: 40px;
  flex: 0 0 46px;
  border: 1px solid #d9dde1;
  background: #f8f9fa;
}

#app .offer-record-operator-lockup .casino-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

#app .offer-record-operator-cell > small {
  display: block;
  margin: 10px 0 0;
  padding: 0;
}

#app .offer-record-profile-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  margin-top: 8px;
  color: #b71f2b;
  font-size: .78rem;
  font-weight: 600;
  text-underline-offset: 3px;
}

#app .offer-record-term-list { border-color: #d9dde1; }
#app .offer-record-term-list > div { border-color: #d9dde1; }
#app .offer-record-term-list dt { color: #626c75; }
#app .offer-record-term-list dd { color: #171a1e; }

#app .offer-record-footer {
  min-height: 46px;
  padding: 9px 15px;
  color: #a7adb3;
  background: #171b20;
  border-top: 1px solid #2a3037;
  font-size: .75rem;
  line-height: 1.5;
}

#app .offer-record-footer a {
  min-height: 38px;
  color: #ff777b;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

#app .offer-record-slide.is-entering:not([hidden]) {
  animation: bastion-offer-record-change .18s ease-out both;
}

#app .offer-record-slide.is-entering-from-previous { --offer-entry-offset: -4px; }

@keyframes bastion-offer-record-change {
  from { opacity: .65; transform: translateX(var(--offer-entry-offset, 4px)); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 1000px) {
  #app .offer-record-fields { grid-template-columns: minmax(145px, .72fr) minmax(0, 1.28fr); }
  #app .offer-record-terms-cell {
    grid-column: 1 / -1;
    border-top: 1px solid #d9dde1;
    border-right: 0;
  }
}

@media (max-width: 760px) {
  #app .offer-record-browser { margin-block: 24px 30px; padding-block: 18px; }
  #app .offer-browser-heading { display: grid; gap: 13px; margin-bottom: 12px; }
  #app .offer-browser-heading h2 { max-width: 24ch; font-size: 1.58rem; }
  #app .offer-browser-heading p:not(.eyebrow) { font-size: .9rem; }
  #app .offer-browser-controls { width: 100%; justify-content: space-between; }
  #app .offer-browser-buttons { gap: 6px; }
  #app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next) { min-width: 0; padding-inline: 9px; font-size: .76rem; }
  #app .offer-record-fields { grid-template-columns: minmax(0, 1fr); }
  #app .offer-record-cell,
  #app .offer-record-terms-cell {
    min-height: 0;
    grid-column: auto;
    padding: 15px 16px;
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid #d9dde1;
  }
  #app .offer-record-cell:last-child { border-bottom: 0; }
  #app .offer-record-operator-cell > small { margin-top: 0; padding-top: 8px; }
  #app .offer-record-footer { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (max-width: 360px) {
  #app .offer-browser-progress { width: 58px; }
  #app .offer-browser-controls { gap: 6px; }
  #app .offer-browser-buttons { gap: 4px; }
  #app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next) { padding-inline: 7px; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  #app .offer-browser-progress > i { transition: none !important; }
  #app .offer-record-slide.is-entering:not([hidden]) { animation: none !important; }
}

/* Bastion global art direction: one type system, deliberate photo motion and route-aware polish. */
#app,
#app :is(button, input, select, textarea) {
  font-family: var(--b9-type-interface) !important;
  font-synthesis: none;
  font-optical-sizing: auto;
}

#app :is(h1, h2) {
  font-family: var(--b9-type-editorial) !important;
  font-weight: 560;
  letter-spacing: -.026em;
  text-transform: none;
  text-wrap: balance;
}

#app :is(h3, h4) {
  font-family: var(--b9-type-interface) !important;
  font-weight: 620;
  letter-spacing: -.012em;
  text-transform: none;
  text-wrap: pretty;
}

#app :is(.eyebrow, .reference-kicker, .meta, .source-register small,
  .comparison-table th, .offer-record-cell > span) {
  font-family: var(--b9-type-interface) !important;
  font-variant-numeric: tabular-nums;
  text-transform: none;
}

#app .ui-icon {
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Use motion to clarify a changed record or an available action, never as decoration in a loop. */
#app .offer-record-slide.is-entering:not([hidden]) {
  animation: bastion-offer-record-change .18s ease-out both;
}

#app .offer-record-cell > span,
#app .offer-record-operator-cell > small { display: block; }

#app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--b9-focus, #e1c46e);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  #app .page-header-photo[data-scene] {
    min-height: 0;
    padding-block: 31px;
  }
  #app .page-header-photo[data-scene]::before {
    background-position: 62% center;
    opacity: .29;
    animation-duration: 58s !important;
  }
  #app .page-header-photo[data-scene]::after {
    background: linear-gradient(180deg, rgba(9,11,13,.86), rgba(9,11,13,.94) 48%, #090b0d 100%);
  }
  #app .sports-hub-photo { animation-duration: 58s !important; }
}

@media (prefers-reduced-motion: reduce) {
  #app .reference-hero-photo,
  #app .page-header-photo[data-scene]::before,
  #app .sports-hub-photo {
    animation: none !important;
    transform: none !important;
  }
  #app .offer-record-slide.is-entering:not([hidden]) { animation: none !important; }
  #app .offer-browser-progress > i { transition: none !important; }
  #app .ui-icon-gift .gift-lid { transition: none !important; }
}


/* Photo mastheads keep the same readable image treatment in the light theme. */
html[data-theme="light"] #app .page-header-photo[data-scene]::after {
  background: linear-gradient(90deg, rgba(9,11,13,.98), rgba(9,11,13,.9) 42%, rgba(9,11,13,.62) 76%, rgba(9,11,13,.46)),
              linear-gradient(0deg, rgba(9,11,13,.62), transparent 60%) !important;
}
@media (max-width: 760px) {
  html[data-theme="light"] #app .page-header-photo[data-scene]::after {
    background: linear-gradient(180deg, rgba(9,11,13,.86), rgba(9,11,13,.94) 48%, #090b0d 100%) !important;
  }
}

/* Keep the small menu label in the same sentence case as the rest of the interface. */
#app .menu-toggle .menu-label { color: inherit; font-size: .78rem; font-weight: 650; letter-spacing: 0; text-transform: none; }

/* Bastion's offer mark appears once, on the persistent offer action. */
#app .ui-icon-gift {
  stroke-linecap: butt;
  stroke-linejoin: miter;
  stroke-width: 1.65;
}
#app .bonus-hotspot-mark {
  width: 40px;
  height: 40px;
  color: var(--b9-red);
  background: var(--b9-panel-raised);
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
}
#app .bonus-hotspot-mark .ui-icon-gift { width: 27px; height: 27px; }
#app .bonus-hotspot .ui-icon-gift .gift-lid {
  transform-box: view-box;
  transform-origin: 12px 8px;
  transition: transform .22s cubic-bezier(.18,.72,.22,1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .bonus-hotspot:is(:hover, :focus-visible, :active) .gift-lid { transform: translateY(-2px) rotate(-9deg); }
}

/* Counts, dates and source credits replace repeated pictograms. */
#app .home-offer-number {
  color: var(--b9-red);
  background: transparent;
  border-right: 1px solid var(--b9-line);
  font: 700 1rem/1 var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
}
#app .guide-photo {
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  overflow: hidden;
  background: var(--b9-panel-raised);
}
#app .guide-photo > img { grid-row: 1; min-height: 0; }
#app .guide-photo figcaption.guide-photo-credit {
  position: static;
  grid-row: 2;
  margin: 0;
  padding: 0;
  color: var(--b9-muted);
  background: var(--b9-panel-raised);
  border-top: 1px solid var(--b9-line);
}
#app .guide-photo figcaption.guide-photo-credit a {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  color: var(--b9-muted);
  background: transparent;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25;
  text-decoration: underline;
  text-underline-offset: 2px;
}
#app .guide-photo figcaption.guide-photo-credit a:hover { color: var(--b9-ink); }

@media (max-width: 760px) {
  #app .guide-featured-copy > p:not(.eyebrow) { font-size: .9rem; line-height: 1.55; }
  #app .guide-featured-meta { font-size: .68rem; }
  #app .guide-index-copy > p:not(.eyebrow) { font-size: .84rem; line-height: 1.5; }
  #app .guide-index-copy .eyebrow { font-size: .64rem; }
  #app .guide-index-meta { font-size: .66rem; }
}
@media (prefers-reduced-motion: reduce) {
  #app .bonus-hotspot .ui-icon-gift .gift-lid { transition: none !important; transform: none !important; }
}

/* A source-led data rail gives Alberta's operator directory a readable market desk. */
#app .operator-snapshot {
  margin: 0 auto;
  padding-block: 17px 18px;
  border-bottom: 1px solid var(--b9-line);
}
#app .operator-snapshot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 18px;
  margin-bottom: 9px;
}
#app .operator-snapshot-head h2 {
  margin: 0;
  color: var(--b9-ink);
  font: 650 .8rem/1.3 var(--b9-type-interface);
  letter-spacing: .015em;
}
#app .operator-snapshot-head p,
#app .operator-snapshot-note {
  margin: 0;
  color: var(--b9-muted);
  font: 450 .7rem/1.45 var(--b9-type-interface);
}
#app .operator-snapshot dl {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  margin: 0;
  border-top: 2px solid var(--b9-red);
  border-left: 1px solid var(--b9-line);
  background: var(--b9-panel);
}
#app .operator-snapshot dl > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  min-height: 81px;
  padding: 10px 15px 11px;
  border-right: 1px solid var(--b9-line);
  border-bottom: 1px solid var(--b9-line);
}
#app .operator-snapshot dd {
  order: 0;
  margin: 0;
  color: var(--b9-red);
  font: 540 clamp(1.65rem,2.6vw,2.1rem)/1 var(--b9-type-editorial);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: -.035em;
}
#app .operator-snapshot dt {
  order: 1;
  color: var(--b9-muted);
  font: 500 .73rem/1.35 var(--b9-type-interface);
}
#app .operator-snapshot-note { margin-top: 8px; }
body[data-route="best"] #app:has(.operator-snapshot) .listing-coverage-notice { display: none; }
body[data-route="best"] #app .operator-filter-shell { padding-block: 14px 0; }
body[data-route="best"] #app .operator-filter-shell .operator-directory-filters { margin-bottom: 0; }

@media (max-width: 760px) {
  #app .operator-snapshot { padding-block: 13px 15px; }
  #app .operator-snapshot-head { align-items: flex-start; flex-direction: column; gap: 3px; margin-bottom: 8px; }
  #app .operator-snapshot dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #app .operator-snapshot dl > div { min-height: 78px; padding: 9px 11px; }
  #app .operator-snapshot dd { font-size: 1.8rem; }
  #app .operator-snapshot dt { max-width: 25ch; font-size: .68rem; }
  #app .operator-snapshot-note { font-size: .67rem; }
}

/* Bastion publication system: source-led sports desk, built on the bundled type and colour contract. */
:root {
  --b9-type-editorial: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b9-type-reading: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b14-display: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b9-type-interface: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --b9-type-sans: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --b9-ink: #F4F2ED;
  --b9-muted: #A7ADB3;
  --b9-paper: #090B0D;
  --b9-panel: #111418;
  --b9-panel-raised: #171B20;
  --b9-line: #2A3037;
  --b9-red: #D92D35;
  --b9-gold: #F0C24B;
  --b9-focus: #F0C24B;

  --ref-bg: #090B0D;
  --ref-surface: #111418;
  --ref-surface-2: #171B20;
  --ref-panel: #171B20;
  --ref-line: #2A3037;
  --ref-text: #F4F2ED;
  --ref-muted: #A7ADB3;
  --ref-red: #D92D35;
  --ref-red-2: #B71F2B;
  --ref-green: #0E8F62;
  --ref-yellow: #F0C24B;

  --background: #090B0D;
  --surface: #111418;
  --surface-alt: #171B20;
  --surface-elevated: #171B20;
  --text: #F4F2ED;
  --text-secondary: #A7ADB3;
  --muted: #A7ADB3;
  --border: #2A3037;
  --border-strong: #414850;
  --primary: #F4F2ED;
  --primary-hover: #FFFFFF;
  --cta: #D92D35;
  --cta-hover: #B71F2B;
  --accent: #D92D35;
  --gold: #F0C24B;
}

html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
  --b9-ink: #171A1E;
  --b9-muted: #626C75;
  --b9-paper: #F1F3F5;
  --b9-panel: #FFFFFF;
  --b9-panel-raised: #F8F9FA;
  --b9-line: #D9DDE1;
  --b9-red: #C62630;
  --b9-gold: #8A6500;
  --b9-focus: #A91E27;

  --ref-bg: #F1F3F5;
  --ref-surface: #FFFFFF;
  --ref-surface-2: #F8F9FA;
  --ref-panel: #EEF1F3;
  --ref-line: #D9DDE1;
  --ref-text: #171A1E;
  --ref-muted: #626C75;
  --ref-red: #C62630;
  --ref-red-2: #A91E27;
  --ref-green: #14734F;
  --ref-yellow: #8A6500;

  --background: #F1F3F5;
  --surface: #FFFFFF;
  --surface-alt: #F8F9FA;
  --surface-elevated: #EEF1F3;
  --text: #171A1E;
  --text-secondary: #626C75;
  --muted: #626C75;
  --border: #D9DDE1;
  --border-strong: #C3C9CE;
  --primary: #283139;
  --primary-hover: #101316;
  --cta: #C62630;
  --cta-hover: #A91E27;
  --accent: #C62630;
  --gold: #8A6500;
}

html, body {
  color: var(--b9-ink);
  background: var(--b9-paper);
}
body, #app, #app :is(button, input, select, textarea) {
  font-family: var(--b9-type-interface) !important;
  font-synthesis: none;
  font-optical-sizing: auto;
}
body {
  font-size: 16px;
  line-height: 1.58;
  font-kerning: normal;
  font-variant-numeric: lining-nums;
}
#app :is(h1, h2, .guide-card h3, .guide-featured-copy h2, .guide-index-copy h3,
  .guide-article-hero h1, .review-hero h1, .page-header-photo h1) {
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial) !important;
  font-synthesis: none;
  font-weight: 580;
  letter-spacing: -.025em;
  text-wrap: balance;
}
#app h1 { line-height: 1.02; }
#app h2 { line-height: 1.1; }
#app h3, #app h4 {
  font-family: var(--b9-type-interface) !important;
  font-weight: 620;
  letter-spacing: -.012em;
  text-wrap: pretty;
}
#app .article-content {
  max-width: var(--b9-measure, 780px);
  font-family: var(--b9-type-reading);
  line-height: 1.75;
}
#app :is(.eyebrow, .reference-kicker, .primary-nav, .mobile-panel,
  .mobile-utility-rail, .comparison-table th, .operator-directory-filters label,
  .guide-index-tools, .source-register small, .bonus-deadline-head,
  .offer-record-cell > span) {
  font-family: var(--b9-type-interface) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .005em;
  text-transform: none;
}
#app :is(.eyebrow, .reference-kicker) { font-weight: 650; }
#app :is(.card, .reference-ranking-card, .bonus-deadline-card, .bonus-record-card,
  .reference-top-board, .editorial-story-list, .operator-snapshot) {
  border-radius: 2px;
  box-shadow: none;
}
#app .btn {
  min-height: 44px;
  border-radius: 2px;
  box-shadow: none;
  font-family: var(--b9-type-interface);
  font-weight: 650;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
#app .btn-primary {
  color: #fff;
  background: var(--b9-red);
  border-color: var(--b9-red);
}
#app .btn-primary:hover {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
}
#app :is(input, select, textarea) { border-radius: 2px; }
#app :is(a, button, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--b9-focus);
  outline-offset: 3px;
}
#app .site-header {
  background: var(--b9-paper);
  border-color: var(--b9-line);
  box-shadow: none;
  backdrop-filter: none;
}
#app .site-header.is-scrolled { box-shadow: 0 1px 0 var(--b9-line); }
#app .header-progress { display: none; }
#app .brand-symbol {
  width: 36px;
  height: 36px;
  filter: none;
  transition: none;
}
#app .brand:hover .brand-symbol { transform: none; filter: none; }
#app .brand-word {
  color: var(--b9-ink);
  font-family: var(--b9-type-interface);
  font-weight: 700;
  letter-spacing: -.04em;
}
#app .primary-nav a {
  color: var(--b9-ink);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
}
#app .primary-nav a::after {
  height: 2px;
  background: var(--b9-red);
  transform-origin: left;
  transition: transform .16s ease;
}
#app .primary-nav a[aria-current="page"] { color: var(--b9-ink); }
#app .nav-bonus-count,
#app .mobile-bonus-count,
#app .utility-offer-count {
  min-width: 1.45em;
  color: #fff;
  background: var(--b9-red);
  border: 0;
  border-radius: 1px;
  font-family: var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
#app .header-tools :is(.theme-toggle, [data-search-open]) {
  width: auto;
  min-width: 44px;
  padding-inline: 10px;
  white-space: nowrap;
}
#app .breadcrumbs { color: var(--b9-muted); }
#app .breadcrumbs a { color: var(--b9-muted); text-decoration: none; }
#app .breadcrumbs a:hover { color: var(--b9-red); }

/* Hero images without an editorial source are removed; credited guide photography stays intact. */
#app .reference-hero-photo,
#app .reference-hero-overlay,
#app .editorial-photo,
#app .sports-hub-photo,
#app .sports-topic-photo { display: none !important; }
html[data-theme] #app .page-header-photo[data-scene]::before,
html[data-theme] #app .page-header-photo[data-scene]::after {
  display: none !important;
  content: none !important;
  background-image: none !important;
  animation: none !important;
  transform: none !important;
}

#app .page-header-photo {
  display: block;
  min-height: 0;
  padding-block: clamp(30px, 4.5vw, 58px);
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-bottom: 1px solid var(--b9-line);
}
#app .page-header-photo::before,
#app .page-header-photo::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}
#app .page-header-photo :is(h1, .lead, .eyebrow, .meta, .byline) {
  color: inherit;
}
#app .page-header-photo .lead { max-width: 68ch; color: var(--b9-muted); }

#app .reference-hero[data-scene="sportsbook"] {
  color: var(--b9-ink) !important;
  background: var(--b9-paper) !important;
  border-bottom: 1px solid var(--b9-line);
}
#app .reference-hero-grid {
  align-items: center;
  gap: clamp(28px, 4vw, 58px);
  padding-block: clamp(42px, 5vw, 68px);
}
#app .reference-hero h1 {
  max-width: 13ch;
  margin-bottom: 18px;
  color: var(--b9-ink) !important;
  font-size: clamp(3rem, 5vw, 4.4rem) !important;
  font-weight: 580 !important;
  letter-spacing: -.035em !important;
  line-height: 1.01 !important;
}
#app .reference-hero-copy .reference-kicker {
  margin-bottom: 16px;
  color: var(--b9-red) !important;
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .02em;
}
#app .reference-hero-copy .reference-kicker::before {
  width: 22px;
  height: 2px;
  background: var(--b9-red);
}
#app .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 51ch;
  color: var(--b9-muted) !important;
  font-size: 1.03rem;
  line-height: 1.58;
}
#app .reference-hero .hero-search { margin-top: 22px; gap: 7px; }
#app .reference-hero .hero-search input {
  min-height: 52px;
  color: var(--b9-ink) !important;
  background: var(--b9-panel) !important;
  border-color: var(--b9-line) !important;
}
#app .reference-hero .hero-search input::placeholder { color: var(--b9-muted); opacity: .92; }
#app .reference-hero .hero-actions .btn-secondary {
  color: var(--b9-ink) !important;
  background: var(--b9-panel) !important;
  border-color: var(--b9-line) !important;
}
#app .reference-hero .home-hero-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin-top: 17px;
  color: var(--b9-muted) !important;
}
#app .reference-hero .home-hero-foot > small { color: var(--b9-muted) !important; }
#app .reference-hero .home-hero-foot .hero-source-link {
  color: var(--b9-red) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
#app .home-coverage-board,
#app .reference-top-board {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: none;
}
#app .home-coverage-board :is(h2, h3, strong, dd) { color: var(--b9-ink); }
#app .home-coverage-board :is(p, small, dt, span) { color: var(--b9-muted); }
#app .home-coverage-board a { color: var(--b9-ink); }
#app .home-coverage-board a:hover { color: var(--b9-red); }
#app .home-coverage-metrics > div,
#app .top-board-row { border-color: var(--b9-line); }
#app .home-coverage-metrics dd,
#app .top-board-row > b { color: var(--b9-red); font-variant-numeric: tabular-nums; }
#app .front-intent-links {
  border-color: var(--b9-line);
  border-block: 1px solid var(--b9-line);
}
#app .front-intent-links a {
  color: var(--b9-ink);
  border-color: var(--b9-line);
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
#app .front-intent-links a:hover {
  color: var(--b9-red);
  background: var(--b9-panel);
}
#app .top-board-all { background: var(--b9-red); }
#app .top-board-all:hover { background: var(--cta-hover); }

/* Cards behave like comparison files; source and terms stay legible beside the action. */
#app .reference-ranking-card,
#app .casino-card {
  border: 0;
  border-top: 2px solid var(--b9-line);
  border-radius: 0;
  background: var(--b9-panel);
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
@media (hover: hover) {
  #app .reference-ranking-card:hover,
  #app .casino-card:hover {
    border-top-color: var(--b9-red);
    background: var(--b9-panel-raised);
    box-shadow: none;
    transform: none;
  }
}
#app .operator-brand-cell h2,
#app .operator-brand-cell h3 { font-family: var(--b9-type-editorial) !important; }
#app .operator-brand-cell small,
#app .operator-offer-cell small,
#app .operator-facts-cell small { color: var(--b9-muted); }
#app .operator-payment-list,
#app .operator-payment-list > span { border-color: var(--b9-line); }
#app .operator-tools button {
  min-height: 44px;
  color: var(--b9-ink);
  background: transparent;
  border-color: var(--b9-line);
  transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}
#app .operator-tools button:hover,
#app .operator-tools button[aria-pressed="true"] {
  color: var(--b9-red);
  background: var(--b9-panel);
  border-color: var(--b9-red);
}
#app .operator-tools .ui-icon-bookmark { display: none; }

/* Offers receive one strong index mark and clear terms, without a fixed overlay. */
#app .nav-bonus-link { gap: 6px; }
#app .nav-bonus-count { padding: .25em .35em; }
#app .home-offer-link,
#app .bastion-offer-brief {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease;
}
#app .home-offer-link:hover,
#app .bastion-offer-brief:hover {
  color: var(--b9-ink);
  background: var(--b9-panel-raised);
  border-color: var(--b9-red);
  box-shadow: none;
  transform: none;
}
#app .home-offer-number {
  width: 36px;
  min-height: 36px;
  display: grid;
  place-items: center;
  color: var(--b9-red);
  border: 1px solid var(--b9-line);
  border-radius: 2px;
  background: transparent;
  font: 700 .76rem/1 var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
}
#app .front-offer-layout .home-offer-link.bastion-offer-brief {
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 16px;
  padding: 16px;
}
#app .front-offer-layout .home-offer-arrow {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
#app .bastion-offer-copy :is(small, em) { color: var(--b9-muted); }
#app .bastion-offer-copy strong { color: var(--b9-ink); font-family: var(--b9-type-editorial); }
#app .home-offer-arrow { color: var(--b9-red); }

/* Sports information uses a score desk, not decorative arena graphics. */
#app .sports-hub-hero {
  min-height: 0;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-bottom: 1px solid var(--b9-line);
}
#app .sports-hub-hero::after { display: none; }
#app .sports-hub-hero :is(h1, p, small) { color: var(--b9-ink); }
#app .sports-hub-hero p { max-width: 60ch; color: var(--b9-muted); }
#app .sports-hub-hero-grid { padding-block: clamp(36px, 5vw, 64px); }
#app .sports-scoreboard {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: none;
  backdrop-filter: none;
}
#app .sports-scoreboard > div { border-color: var(--b9-line); }
#app .sports-scoreboard span { color: var(--b9-muted); }
#app .sports-scoreboard strong { color: var(--b9-ink); font-variant-numeric: tabular-nums; }
#app .sports-topic-panel,
#app .league-command-card { border-radius: 2px; box-shadow: none; }
#app .sports-topic-panel { min-height: 0; }
#app .sports-topic-hockey { grid-template-columns: minmax(0,1fr); }
#app .sports-topic-photo { display: none !important; }
#app .sports-topic-content { min-width: 0; }
#app .league-command-card { transition: border-color .16s ease, background-color .16s ease; }
#app .league-command-card::before { display: none !important; content: none !important; background: none !important; }
#app .league-command-card:hover { border-color: var(--b9-red); transform: none; }

@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-title-row .score-card {
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 3px 12px;
    padding: 9px 12px;
    border-left: 3px solid var(--b9-red);
    text-align: left;
  }
  body[data-route="reviews"] #app .review-title-row .score-card .score-unpublished {
    color: var(--b9-ink);
    font: 700 .9rem/1.1 var(--b9-type-interface);
  }
  body[data-route="reviews"] #app .review-title-row .score-card small {
    grid-column: 1;
    grid-row: 2;
    margin: 0;
    color: var(--b9-muted);
    font-size: .68rem;
    text-align: left;
  }
  body[data-route="reviews"] #app .review-title-row .score-card .score-status-link {
    grid-column: 2;
    grid-row: 1 / 3;
    min-height: 36px;
    margin: 0;
    color: var(--b9-ink);
    font-size: .72rem;
    white-space: nowrap;
  }
}

/* Article images remain real and credited; movement is confined to hover on that image. */
#app .guide-photo img {
  filter: saturate(.9) contrast(1.02);
  transition: transform .24s ease;
}
#app .guide-photo:hover img { transform: scale(1.018); }
#app .editorial-lead-card {
  min-height: 0;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-radius: 2px;
}
#app .editorial-lead-card > div:last-child {
  position: static;
  padding: clamp(20px, 3vw, 34px);
  color: var(--b9-ink);
}
#app .editorial-lead-card h3 {
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial);
  font-size: clamp(1.6rem, 2.4vw, 2.3rem);
  font-weight: 550;
}
#app .editorial-lead-card span,
#app .editorial-story-list span { color: var(--b9-red); font-weight: 650; letter-spacing: .005em; }
#app .editorial-story-list { background: var(--b9-panel); border-color: var(--b9-line); }
#app .editorial-story-list article { border-color: var(--b9-line); }
#app .guide-card {
  border: 0;
  border-top: 2px solid var(--b9-line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: border-color .16s ease;
}
#app .guide-card:hover { border-top-color: var(--b9-red); box-shadow: none; transform: none; }
#app .guide-card h3,
#app .guide-featured-copy h2,
#app .guide-index-copy h3 {
  font-family: var(--b9-type-editorial) !important;
  font-weight: 550;
}
#app .guide-card .card-body { padding-inline: 0; }
#app .guide-link { min-height: 44px; }
#app .source-register {
  border-radius: 2px;
  box-shadow: none;
}
#app .source-register li + li { border-top: 1px solid var(--b9-line); }
#app .site-footer {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-top: 1px solid var(--b9-line);
}
#app .site-footer a { color: var(--b9-muted); }
#app .site-footer a:hover { color: var(--b9-red); }

/* Small editorial markers replace repeated stock line icons in metadata and controls. */
#app .ui-icon {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: square;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
  transition: color .16s ease;
}
#app .ui-icon-clock,
#app .operator-tools .ui-icon-bookmark,
#app .icon-link > .ui-icon { display: none; }
#app .comparison-stamp::before,
#app .guide-reading-meta > span::before {
  width: 13px;
  height: 2px;
  flex: 0 0 13px;
  background: var(--b9-red);
  content: "";
}
#app .header-progress { display: none; }

/* The gift mark is specific to the dated-offer route; it opens only on intent. */
#app .nav-bonus-label,
#app .mobile-utility-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
#app .bastion-gift-mark {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  overflow: visible;
  color: var(--b9-red);
}
#app .bastion-gift-mark .gift-ribbon { stroke: var(--b9-red); }
#app .bastion-gift-mark .gift-lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .18s cubic-bezier(.2,.65,.25,1);
}
#app .editorial-command-grid > .guide-featured-story {
  min-height: 0;
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  border-radius: 2px;
  background: var(--b9-panel);
}
#app .editorial-command-grid .guide-featured-art {
  border-right-color: var(--b9-line);
}
#app .editorial-command-grid .guide-featured-art .guide-photo-credit {
  color: #fff;
}
#app .editorial-command-grid .guide-featured-copy { padding: clamp(18px, 2.5vw, 28px); }
#app .editorial-command-grid .guide-featured-copy h2 { font-weight: 550; }
#app .editorial-command-grid .guide-featured-meta { color: var(--b9-muted); }
#app .editorial-command-grid .guide-featured-link { color: var(--b9-red); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app :is(.nav-bonus-link, .mobile-utility-rail [data-offer-nav]):is(:hover, :focus-visible) .gift-lid {
    transform: translateY(-1px) rotate(-6deg);
  }
}

#app .site-footer h2,
#app .site-footer h3 { color: var(--b9-ink); font-weight: 650; letter-spacing: 0; text-transform: none; }
#app .site-footer p,
#app .footer-note { color: var(--b9-muted); }
#app .site-footer .footer-age {
  color: var(--b9-muted);
  border-left-color: var(--b9-red);
}
#app .footer-note { border-color: var(--b9-line); }
#app .ui-icon-source-rule { stroke: var(--b9-red); }

@media (max-width: 980px) {
  #app .reference-hero-grid { grid-template-columns: minmax(0, 1fr); }
  #app .reference-hero-copy { max-width: 760px; }
  #app .home-coverage-board { max-width: 760px; }
}
@media (max-width: 760px) {
  #app .section { padding-block: 36px; }
  #app .section-sm { padding-block: 27px; }
  #app .section-heading { display: grid; gap: 7px; }
  #app .section-heading h2 { font-size: clamp(1.7rem, 8vw, 2.25rem); }
  #app .reference-hero-grid { gap: 21px; padding-block: 30px 24px; }
  #app .reference-hero h1 {
    max-width: 17ch;
    font-size: clamp(2.25rem, 9vw, 3.1rem) !important;
    line-height: 1.03 !important;
  }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 11px; font-size: .74rem; }
  #app .reference-hero-copy > p:not(.reference-kicker) { font-size: .98rem; }
  #app .reference-hero .hero-search {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 7px;
  }
  #app .reference-hero .hero-search input,
  #app .reference-hero .hero-search .btn { min-height: 48px; }
  #app .reference-hero .hero-actions {
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 3px;
  }
  #app .reference-hero .hero-actions .btn { width: 100%; min-height: 48px; }
  #app .home-coverage-metrics > div { min-height: 70px; }
  #app .home-coverage-metrics span { max-width: 13ch; line-height: 1.25; }
  #app .page-header-photo { padding-block: 25px 29px; }
  #app .sports-hub-hero-grid { grid-template-columns: minmax(0,1fr); gap: 18px; padding-block: 28px; }
  #app .sports-scoreboard { width: 100%; }
  #app .mobile-utility-rail {
    background: var(--b9-paper);
    border-color: var(--b9-line);
  }
  #app .mobile-utility-rail a[aria-current="page"] {
    color: var(--b9-red);
    background: var(--b9-panel);
  }
}
@media (max-width: 380px) {
  #app .container { width: min(calc(100% - 28px), 1280px); }
  #app .narrow { width: min(calc(100% - 28px), 780px); }
  #app .reference-hero h1 { max-width: 15ch; font-size: clamp(2.1rem, 9vw, 2.7rem) !important; }
  #app .mobile-utility-rail a { font-size: .68rem; }
}

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

/* Bastion source ledger: a visible evidence path in place of stock imagery. */
#app .reference-hero .front-market-file {
  overflow: hidden;
  color: #f2f1ed;
  background: #171b20;
  border: 1px solid #343a40;
  border-top: 3px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: none;
}
#app .reference-hero .front-market-file-body { padding: clamp(16px, 2.4vw, 24px); }
#app .reference-hero .front-market-file-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 0 0 17px;
  border-bottom: 1px solid #343a40;
}
#app .reference-hero .front-market-file-head > div > span,
#app .reference-hero .front-market-file-head label > span {
  display: block;
  margin-bottom: 5px;
  color: #b9bdc0;
  font: 600 .67rem/1.3 var(--b9-type-interface);
  letter-spacing: .055em;
  text-transform: uppercase;
}
#app .reference-hero .front-market-file-head strong {
  color: #f5f2eb;
  font: 560 clamp(1.45rem, 2.3vw, 2rem)/1.1 var(--b9-type-editorial);
}
#app .reference-hero .front-market-file-head strong small {
  display: block;
  margin-top: 3px;
  color: #b9bdc0;
  font: 450 .78rem/1.35 var(--b9-type-interface);
}
#app .reference-hero .front-market-file-head label { width: min(170px, 42%); color: #d3d5d6; }
#app .reference-hero .front-market-file-head .select-control {
  width: 100%;
  min-height: 42px;
  color: #f5f2eb;
  background: #20252a;
  border-color: #4a5158;
  border-radius: 2px;
}
#app .reference-hero .front-market-file-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding-block: 17px 15px;
  border-bottom: 1px solid #343a40;
}
#app .reference-hero .front-market-file-stats > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  padding: 0 12px;
  border: 0;
}
#app .reference-hero .front-market-file-stats > div:first-child { padding-left: 0; }
#app .reference-hero .front-market-file-stats > div + div { border-left: 1px solid #41484f; }
#app .reference-hero .front-market-file-stats strong {
  color: #f5f2eb;
  font: 560 clamp(1.65rem, 3vw, 2.45rem)/1 var(--b9-type-editorial);
  font-variant-numeric: tabular-nums;
}
#app .reference-hero .front-market-file-stats span {
  color: #b9bdc0;
  font-size: .69rem;
  line-height: 1.35;
}
#app .source-match-rail {
  display: grid;
  gap: 9px;
  padding: 15px 0 14px;
  border-bottom: 1px solid #d9dde1;
}
#app .source-match-route {
  display: grid;
  grid-template-columns: auto minmax(28px, 1fr) auto;
  align-items: center;
  gap: 9px;
  max-width: 230px;
  color: #626c75;
  font: 650 .68rem/1 var(--b9-type-interface);
  letter-spacing: .04em;
}
#app .source-match-route i {
  position: relative;
  height: 1px;
  background: #9ca4aa;
}
#app .source-match-route i::after {
  position: absolute;
  inset: 50% 0 auto auto;
  width: 5px;
  height: 5px;
  border-top: 1px solid #626c75;
  border-right: 1px solid #626c75;
  content: "";
  transform: translateY(-50%) rotate(45deg);
}
#app .source-match-rail > p {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  color: #626c75;
  font-size: .82rem;
  line-height: 1.35;
}
#app .source-match-rail > p strong {
  color: #171a1e;
  font: 580 2rem/.95 var(--b9-type-editorial);
  font-variant-numeric: tabular-nums;
}
#app .source-match-track {
  height: 3px;
  overflow: hidden;
  background: #d9dde1;
}
#app .source-match-track > i {
  display: block;
  width: var(--source-match, 0%);
  height: 100%;
  background: var(--b9-red);
}
#app .source-match-key {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #626c75;
  font-size: .67rem;
  line-height: 1.35;
}
#app .reference-hero .front-market-file-date {
  margin: 13px 0 0;
  color: #626c75;
  font-size: .72rem;
  line-height: 1.5;
}
#app .reference-hero .front-market-file-link {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  align-items: center;
  margin-top: 12px;
  padding-top: 10px;
  color: #171a1e;
  border-top: 1px solid #d9dde1;
  font-size: .78rem;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
#app .reference-hero .front-market-file-link:hover { color: #f0787d; }

/* Replace pointer tilt and simulated glows with one restrained, consistent response. */
#app :is(.bonus-card-hot, .reference-ranking-card, .league-command-card, .casino-card) {
  transform: none !important;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
#app :is(.bonus-card-hot, .reference-ranking-card, .league-command-card, .casino-card):hover {
  transform: none !important;
  box-shadow: none;
}
#app :is(.bonus-card-hot, .reference-ranking-card, .league-command-card)::before,
#app .reference-ranking-card::after { background: none !important; }
#app .btn-primary {
  background: var(--b9-red);
  border-color: var(--b9-red);
  box-shadow: none;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
#app .btn-primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); filter: none; transform: none; }
#app :is(.bonus-card-hot, .reference-ranking-card, .league-command-card, .casino-card):focus-visible {
  outline: 2px solid var(--b9-focus, #9a6814);
  outline-offset: 3px;
}
#app :is(h1, h2, h3) { font-kerning: normal; font-feature-settings: "kern", "liga", "calt"; }
#app .reference-hero h1 { font-variation-settings: "opsz" 54; }
#app .site-header { backdrop-filter: none; }
@media (max-width: 760px) {
  #app .reference-hero .front-market-file-body { padding: 15px; }
  #app .reference-hero .front-market-file-head { gap: 10px; }
  #app .reference-hero .front-market-file-head label { width: 42%; }
  #app .reference-hero .front-market-file-stats > div { padding-inline: 8px; }
  #app .reference-hero .front-market-file-stats > div:first-child { padding-left: 0; }
  #app .reference-hero .front-market-file-stats strong { font-size: clamp(1.45rem, 7vw, 2rem); }
  #app .reference-hero .front-market-file-stats span { font-size: .64rem; }
}
@media (max-width: 380px) {
  #app .source-match-key { display: grid; gap: 3px; }
  #app .reference-hero .front-market-file-head strong { font-size: 1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  #app .bastion-gift-mark .gift-lid { transition: none; }
}

/* A source-led offer shortcut: visible on desktop, while mobile uses the fixed Offers tab. */
#app .bonus-hotspot {
  width: min(300px, calc(100vw - 36px));
  min-width: 0;
  min-height: 62px;
  grid-template-columns: 34px minmax(0, 1fr) 16px;
  gap: 10px;
  padding: 9px 12px 9px 9px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-left: 3px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: 0 4px 16px rgb(20 24 28 / 12%);
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease;
}
#app .bonus-hotspot:hover,
#app .bonus-hotspot:focus-visible {
  color: var(--b9-ink);
  background: var(--b9-panel-raised);
  border-color: var(--b9-red);
  transform: none;
}
#app .bonus-hotspot-mark {
  width: 34px;
  height: 34px;
  color: var(--b9-red);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--b9-line);
}
#app .bonus-hotspot-mark .bastion-gift-mark { width: 25px; height: 25px; }
#app .bonus-hotspot-copy { min-width: 0; gap: 3px; }
#app .bonus-hotspot-copy small {
  overflow: hidden;
  color: var(--b9-muted);
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .bonus-hotspot-copy strong {
  overflow: hidden;
  color: var(--b9-ink);
  font-size: .81rem;
  font-weight: 600;
  line-height: 1.22;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .bonus-hotspot-arrow {
  color: var(--b9-red);
  font-size: 1rem;
}
#app .bonus-hotspot .bastion-gift-mark .gift-lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .18s cubic-bezier(.2, .65, .25, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .bonus-hotspot:is(:hover, :focus-visible, :active) .gift-lid {
    transform: translateY(-1px) rotate(-7deg);
  }
}
@media (max-width: 760px) {
  #app .bonus-hotspot { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  #app .bonus-hotspot,
  #app .bonus-hotspot .gift-lid { transition: none; }
  #app .bonus-hotspot .gift-lid { transform: none; }
}

/* Offer deadline brief: one date, one source-linked record, no campaign gloss. */
body[data-route="bonuses"] #app .bonus-deadline-card {
  align-self: start;
  gap: 13px;
  padding: clamp(17px, 2.3vw, 24px);
  color: #f3f1eb;
  background: #171b20;
  border: 1px solid #343a40;
  border-top: 3px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: none;
}
body[data-route="bonuses"] #app .bonus-deadline-head {
  min-height: 0;
  padding: 0 0 11px;
  color: #f0787d;
  border: 0;
  border-bottom: 1px solid #343a40;
  font-size: .72rem;
  font-weight: 650;
  letter-spacing: .025em;
  text-transform: none;
}
body[data-route="bonuses"] #app .bonus-deadline-head > span:last-child { color: inherit; }
body[data-route="bonuses"] #app .bonus-deadline-main {
  gap: 6px;
  padding: 0;
  border: 0;
}
body[data-route="bonuses"] #app .bonus-deadline-main .eyebrow {
  margin: 0;
  color: #b9bdc0;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
}
body[data-route="bonuses"] #app .bonus-deadline-main time {
  color: #f5f2eb;
  font: 560 clamp(2rem, 3vw, 2.7rem)/1.03 var(--b9-type-editorial);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}
body[data-route="bonuses"] #app .bonus-deadline-main strong {
  color: #d5d7d7;
  font: 500 .85rem/1.45 var(--b9-type-interface);
  letter-spacing: 0;
}
body[data-route="bonuses"] #app .bonus-deadline-foot {
  padding-top: 11px;
  color: #b9bdc0;
  border-color: #343a40;
  font-size: .74rem;
}
body[data-route="bonuses"] #app .bonus-deadline-foot b { color: #f5f2eb; }
body[data-route="bonuses"] #app .bonus-deadline-note {
  margin: -3px 0 0;
  color: #b9bdc0;
  font-size: .72rem;
}
body[data-route="bonuses"] #app .bonus-deadline-link {
  min-height: 44px;
  justify-content: space-between;
  padding-top: 8px;
  color: #f5f2eb;
  border-top: 1px solid #343a40;
  font-size: .78rem;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
body[data-route="bonuses"] #app .bonus-deadline-link > .bonus-deadline-mark {
  color: var(--b9-red);
  transition: transform .16s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body[data-route="bonuses"] #app .bonus-deadline-link:hover > .bonus-deadline-mark {
    transform: translateX(2px);
  }
}
@media (max-width: 760px) {
  body[data-route="bonuses"] #app .bonus-deadline-card {
    grid-template-columns: minmax(0,1fr);
    gap: 12px;
    padding: 16px;
  }
  body[data-route="bonuses"] #app .bonus-deadline-head { padding-bottom: 9px; }
  body[data-route="bonuses"] #app .bonus-deadline-main time { font-size: 2.25rem; }
  body[data-route="bonuses"] #app .bonus-deadline-foot { grid-column: auto; grid-row: auto; justify-content: space-between; padding-top: 10px; }
  body[data-route="bonuses"] #app .bonus-deadline-foot span { display: inline; }
  body[data-route="bonuses"] #app .bonus-deadline-note { margin: 0; }
  body[data-route="bonuses"] #app .bonus-deadline-link { grid-column: auto; }
}
@media (max-width: 380px) {
  body[data-route="bonuses"] #app .bonus-deadline-main time { font-size: 2rem; }
  body[data-route="bonuses"] #app .bonus-deadline-foot { font-size: .68rem; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="bonuses"] #app .bonus-deadline-link:hover::after { transform: none; transition: none; }
}

/* Replace the generic file pictogram with Bastion's own typographic file mark. */
body[data-route="reviews"] #app .review-file-stamp {
  gap: 2px;
  background: var(--b9-panel);
}
body[data-route="reviews"] #app .review-file-stamp > span,
body[data-route="reviews"] #app .review-file-stamp > small {
  color: var(--b9-muted);
  font: 650 .42rem/1 var(--b9-type-interface);
  letter-spacing: .08em;
}
body[data-route="reviews"] #app .review-file-stamp > strong {
  color: var(--b9-red);
  font: 580 1.65rem/.92 var(--b9-type-editorial);
}

/* Compact the absence state so the listing gives space to evidence that exists. */
#app .reference-ranking-card .operator-offer-cell.is-no-offer {
  display: grid;
  grid-template-columns: minmax(84px, .34fr) minmax(0, 1fr);
  align-content: center;
  align-items: baseline;
  gap: 3px 9px;
}
#app .reference-ranking-card .operator-offer-cell.is-no-offer > span { grid-column: 1; }
#app .reference-ranking-card .operator-offer-cell.is-no-offer > strong {
  grid-column: 2;
  margin: 0;
  color: var(--b9-ink);
  font: 600 .88rem/1.25 var(--b9-type-interface);
}
#app .reference-ranking-card .operator-offer-cell.is-no-offer > small {
  grid-column: 2;
  font-size: .74rem;
  line-height: 1.35;
}

/* The only bonus glyph is drawn for this destination and reacts to deliberate input. */
#app .mobile-utility-rail .bastion-gift-mark {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app :is(.nav-bonus-link, .mobile-utility-rail [data-offer-nav]):is(:hover, :focus-visible) .gift-lid,
  #app .mobile-utility-rail [data-offer-nav]:active .gift-lid {
    transform: translateY(-1px) rotate(-6deg);
  }
}
@media (max-width: 760px) {
  #app .front-offer-layout .home-offer-link.bastion-offer-brief {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }
  #app .front-offer-layout .home-offer-arrow {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
  }
  #app .mobile-utility-rail [data-offer-nav] .mobile-utility-label {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: 18px auto;
    justify-content: center;
    align-content: center;
    column-gap: 3px;
    row-gap: 2px;
  }
  #app .mobile-utility-rail [data-offer-nav] .bastion-gift-mark { grid-area: 1 / 1 / 2 / 3; justify-self: center; }
  #app .mobile-utility-rail [data-offer-nav] .utility-offer-label { grid-area: 2 / 1; }
  #app .mobile-utility-rail [data-offer-nav] .utility-offer-count { grid-area: 2 / 2; align-self: center; }
  #app .mobile-utility-rail [data-offer-nav] .utility-offer-count { min-width: 15px; height: 15px; padding-inline: 3px; }
  #app .reference-ranking-card .operator-offer-cell.is-no-offer { gap: 2px 8px; }
}
@media (prefers-reduced-motion: no-preference) {
  #app .mobile-utility-rail [data-offer-nav]:active .gift-lid { transform: translateY(-1px) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce) {
  #app .bastion-gift-mark .gift-lid { transition: none; }
}

/* Anti-slop direction: each information type gets its own editorial grammar. */
#app .casino-library .cl-game-card {
  border-radius: 0;
  border-top: 3px solid var(--cl-line);
  transition: border-color 160ms ease, transform 160ms ease;
}
#app .casino-library .cl-game-card:hover,
#app .casino-library .cl-game-card:focus-within {
  border-top-color: var(--cl-red);
  transform: translateY(-2px);
}
#app .casino-library .cl-empty,
#app .account-workspace .account-empty-state,
.admin-body .ac-empty,
.admin-body .aw-record-empty {
  border: 0;
  border-inline-start: 3px solid var(--b9-red, #d92d35);
  border-radius: 0;
  background: var(--b9-panel-raised, #171b20);
  text-align: start;
}
#app .casino-library .cl-empty {
  padding: 30px 22px;
}
#app .account-workspace .account-empty-state {
  padding: 20px 18px;
  border-inline-start-color: var(--ac-red, var(--b9-red, #d92d35));
}
.admin-body .ac-empty,
.admin-body .aw-record-empty {
  padding: 18px 16px;
  font-variant-numeric: tabular-nums;
}
#app .account-workspace .account-workspace-nav {
  border-inline-end: 1px solid var(--ac-line, var(--b9-line, #2a3037));
  background: transparent;
}
#app .account-workspace .account-workspace-nav a[aria-current="page"] {
  border-inline-start: 3px solid var(--ac-red, var(--b9-red, #d92d35));
  border-bottom: 0;
  background: var(--ac-raised, var(--b9-panel-raised, #171b20));
}
@media (prefers-reduced-motion: reduce) {
  #app .casino-library .cl-game-card { transition: none; }
  #app .casino-library .cl-game-card:hover,
  #app .casino-library .cl-game-card:focus-within { transform: none; }
}

/* Source: styles/motion-system.css */
/* Bastion motion contract: state changes respond to input; content does not perform. */
#app :is(
  .casino-card,
  .reference-ranking-card,
  .league-command-card,
  .bonus-card-hot,
  .guide-card,
  .province-market-row
) {
  transform: none !important;
  box-shadow: none !important;
  transition: border-color 140ms ease, background-color 140ms ease, color 140ms ease;
}

#app :is(
  .casino-card,
  .reference-ranking-card,
  .league-command-card,
  .bonus-card-hot,
  .guide-card,
  .province-market-row
):is(:hover, :focus-within) {
  transform: none !important;
  box-shadow: none !important;
}

#app :is(.reference-ranking-card, .league-command-card, .bonus-card-hot)::before,
#app .reference-ranking-card::after {
  background: none !important;
}

#app .brand:hover .brand-symbol,
#app .icon-link:hover,
#app .btn:hover,
#app .btn-primary:hover,
#app .bonus-hotspot:hover,
#app .home-offer-link:hover,
#app .guide-card:hover,
#app .site-footer a:hover {
  transform: none !important;
  filter: none;
}

#app :is(.btn, .icon-button, .saved-header-button, .menu-toggle, .theme-toggle-mobile) {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

#app :is(.btn, .icon-button, .saved-header-button, .menu-toggle, .theme-toggle-mobile):active {
  transform: translateY(1px);
  transition-duration: 70ms;
}

#app .icon-link {
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}

#app .bastion-file-mark { width: 18px; height: 18px; color: currentColor; }
#app .bastion-file-spine { color: var(--b9-red); stroke-width: 2.25; }
#app .icon-link:hover .bastion-file-mark { color: currentColor; }
#app .operator-profile-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
#app .operator-profile-action .bastion-file-mark { width: 16px; height: 16px; flex: 0 0 16px; }
#app .operator-profile-action .bastion-file-spine { stroke: var(--b9-yellow); }

#app .compare-sheet:not([hidden]) .compare-sheet-panel {
  animation-duration: 160ms;
  animation-timing-function: ease-out;
}

@keyframes bastion-compare-sheet-enter {
  from { opacity: .8; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  #app :is(.reference-ranking-card, .league-command-card, .bonus-card-hot, .guide-card, .province-market-row):hover {
    border-color: var(--b9-red);
    background-color: var(--b9-panel-raised);
  }

  #app :is(.reference-ranking-card, .league-command-card, .bonus-card-hot, .guide-card, .province-market-row):hover *:not(.league-command-action):not(.league-command-action *) {
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* Source: styles/bastion-editorial-system.css */
/* Bastion typography: Source Serif headlines, Source Sans interface and market data. */
:root {
  --b9-type-editorial: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b9-type-reading: "Bastion Editorial", Georgia, "Times New Roman", serif;
  --b14-display: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --b9-type-interface: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --b9-type-sans: "Bastion Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --b9-ink: #f4f2ed;
  --b9-muted: #a7adb3;
  --b9-paper: #090b0d;
  --b9-panel: #111418;
  --b9-panel-raised: #171b20;
  --b9-line: #2a3037;
  --b9-red: #d92d35;
  --b9-gold: #f0c24b;
  --b9-yellow: #f0c24b;
  --b9-green: #0e8f62;
  --b9-focus: #f0c24b;

  --ref-bg: #090b0d;
  --ref-surface: #111418;
  --ref-surface-2: #171b20;
  --ref-panel: #111418;
  --ref-line: #2a3037;
  --ref-text: #f4f2ed;
  --ref-muted: #a7adb3;
  --ref-red: #d92d35;
  --ref-red-2: #b71f2b;
  --ref-green: #0e8f62;
  --ref-yellow: #f0c24b;

  --background: #090b0d;
  --surface: #111418;
  --surface-alt: #171b20;
  --surface-elevated: #171b20;
  --text: #f4f2ed;
  --text-secondary: #a7adb3;
  --muted: #a7adb3;
  --border: #2a3037;
  --border-strong: #414952;
  --primary: #f4f2ed;
  --primary-hover: #ffffff;
  --cta: #d92d35;
  --cta-hover: #b71f2b;
  --accent: #d92d35;
  --gold: #f0c24b;
  --bastion-paper-warm: #ffffff;
  --bastion-ink-deep: #171a1e;
  --bastion-red: #d92d35;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --b9-ink: #f4f2ed;
  --b9-muted: #a7adb3;
  --b9-paper: #090b0d;
  --b9-panel: #111418;
  --b9-panel-raised: #171b20;
  --b9-line: #2a3037;
  --b9-red: #d92d35;
  --b9-gold: #f0c24b;
  --b9-yellow: #f0c24b;
  --b9-green: #0e8f62;
  --b9-focus: #f0c24b;
  --ref-bg: #090b0d;
  --ref-surface: #111418;
  --ref-surface-2: #171b20;
  --ref-panel: #111418;
  --ref-line: #2a3037;
  --ref-text: #f4f2ed;
  --ref-muted: #a7adb3;
  --ref-red: #d92d35;
  --ref-red-2: #b71f2b;
  --ref-green: #0e8f62;
  --ref-yellow: #f0c24b;
  --background: #090b0d;
  --surface: #111418;
  --surface-alt: #171b20;
  --surface-elevated: #171b20;
  --text: #f4f2ed;
  --text-secondary: #a7adb3;
  --muted: #a7adb3;
  --border: #2a3037;
  --border-strong: #414952;
  --primary: #f4f2ed;
  --primary-hover: #ffffff;
  --cta: #d92d35;
  --cta-hover: #b71f2b;
  --accent: #d92d35;
  --gold: #f0c24b;
}
html[data-theme="light"] {
  color-scheme: light;
  --b9-ink: #171a1e;
  --b9-muted: #66707a;
  --b9-paper: #f1f3f5;
  --b9-panel: #ffffff;
  --b9-panel-raised: #f8f9fa;
  --b9-line: #d9dde1;
  --b9-red: #d92d35;
  --b9-gold: #936600;
  --b9-yellow: #936600;
  --b9-green: #08714d;
  --b9-focus: #8d1e27;

  --ref-bg: #f1f3f5;
  --ref-surface: #ffffff;
  --ref-surface-2: #f8f9fa;
  --ref-panel: #ffffff;
  --ref-line: #d9dde1;
  --ref-text: #171a1e;
  --ref-muted: #66707a;
  --ref-red: #d92d35;
  --ref-red-2: #b71f2b;
  --ref-green: #08714d;
  --ref-yellow: #805900;

  --background: #f1f3f5;
  --surface: #ffffff;
  --surface-alt: #f8f9fa;
  --surface-elevated: #ffffff;
  --text: #171a1e;
  --text-secondary: #66707a;
  --muted: #66707a;
  --border: #d9dde1;
  --border-strong: #bac1c8;
  --primary: #171a1e;
  --primary-hover: #090b0d;
  --cta: #d92d35;
  --cta-hover: #b71f2b;
  --accent: #d92d35;
  --gold: #936600;
  --bastion-paper-warm: #ffffff;
  --bastion-ink-deep: #171a1e;
  --bastion-red: #d92d35;
}

#app .btn-primary {
  color: #fff;
  background-color: var(--b9-red);
  border-color: var(--b9-red);
}
html[data-theme="dark"] #app .btn-primary.btn-primary { color: #ffffff; }
html[data-theme="dark"] #app .reference-hero .hero-search .btn-primary,
html[data-theme="dark"] #app .reference-hero .hero-actions .btn-primary { color: #ffffff !important; }

html, body { color: var(--b9-ink); background: var(--b9-paper); }
body, #app, #app :is(button, input, select, textarea) {
  font-family: var(--b9-type-interface) !important;
  font-synthesis: none;
  font-optical-sizing: auto;
}
#app { font-kerning: normal; text-rendering: optimizeLegibility; }
#app :is(h1, h2, .guide-card h3, .guide-featured-copy h2, .guide-index-copy h3,
  .guide-article-hero h1, .review-hero h1, .page-header-photo h1,
  .reference-hero h1, .section-heading h2, .front-offer-layout > header h2) {
  font-family: var(--b9-type-interface) !important;
  font-optical-sizing: auto;
  font-weight: 680;
  letter-spacing: -.025em;
  text-wrap: balance;
}
#app :is(h3, h4) { font-family: var(--b9-type-interface) !important; letter-spacing: -.01em; }
#app .article-content { font-family: var(--b9-type-reading) !important; line-height: 1.76; }
#app :is(time, .source-sequence, .source-date, .operator-score-cell strong,
  .front-market-file-stats strong, .bonus-deadline-main time) { font-variant-numeric: tabular-nums lining-nums; }

/* Offer terms use the same market surfaces and evidence hierarchy in both themes. */
#app .offer-record-browser {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
}
#app .offer-record-browser .offer-browser-heading h2 {
  color: var(--b9-ink);
  font-family: var(--b9-type-interface) !important;
  font-weight: 700;
  letter-spacing: -.025em;
}
#app .offer-record-browser .offer-browser-heading .eyebrow { color: var(--b9-red); }
#app .offer-record-browser .offer-browser-heading p:not(.eyebrow) { color: var(--b9-muted); }
#app .offer-record-browser .offer-browser-position { color: var(--b9-ink); }
#app .offer-record-browser .offer-browser-progress { background: var(--b9-line); }
#app .offer-record-browser .offer-browser-progress > i { background: var(--b9-red); }
#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next) {
  color: var(--b9-ink);
  border-color: var(--b9-line);
  font-weight: 560;
}
#app .offer-record-browser .offer-browser-next { border-bottom-color: var(--b9-red); }
#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next):hover,
#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next):focus-visible {
  color: var(--b9-ink);
  background: var(--b9-panel-raised);
  border-color: var(--b9-red);
}
#app .offer-record-browser :is(.offer-browser-previous, .offer-browser-next):disabled {
  color: var(--b9-muted);
  border-color: var(--b9-line);
}
#app .offer-record-card {
  background: var(--b9-panel-raised);
  border-color: var(--b9-line);
  border-top: 2px solid var(--b9-red);
}
#app .offer-record-fields,
#app .offer-record-cell { background: var(--b9-panel-raised); }
#app .offer-record-cell { border-color: var(--b9-line); }
#app .offer-record-cell > span,
#app .offer-record-cell small,
#app .offer-record-term-list dt { color: var(--b9-muted); }
#app .offer-record-cell strong,
#app .offer-record-term-list dd { color: var(--b9-ink); }
#app .offer-record-cell p { color: var(--b9-muted); }
#app .offer-record-profile-link { color: var(--b9-red); }
#app .offer-record-term-list { margin: 8px 0 0; }
#app .offer-record-term-list > div {
  display: grid;
  grid-template-columns: minmax(104px, .52fr) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding-block: 8px;
  border-color: var(--b9-line);
}
#app .offer-record-term-list dt,
#app .offer-record-term-list dd { margin: 0; }
#app .offer-record-term-list dt { line-height: 1.45; }
#app .offer-record-term-list dd { min-width: 0; line-height: 1.5; overflow-wrap: anywhere; }
#app .offer-record-footer {
  color: var(--b9-muted);
  background: var(--b9-panel);
  border-color: var(--b9-line);
}
#app .offer-record-footer a { color: var(--b9-ink); text-decoration-color: var(--b9-red); }
#app .offer-record-slide.is-entering:not([hidden]) { animation-duration: .18s; }
@keyframes bastion-offer-record-change {
  from { opacity: .45; transform: none; }
  to { opacity: 1; transform: none; }
}

#app .guide-index-tools > .guide-topic-mobile { display: none; }

@media (max-width: 760px) {
  #app .offer-record-term-list > div {
    grid-template-columns: minmax(88px, .42fr) minmax(0, 1fr);
    gap: 11px;
    padding-block: 9px;
  }

  body[data-route="guides"] #app .guide-topic-nav {
    display: none;
  }
  body[data-route="guides"] #app .guide-index-tools > .guide-topic-mobile {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  body[data-route="guides"] #app .guide-topic-mobile select {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--b9-line);
    border-radius: 0;
    color: var(--b9-ink);
    background: var(--b9-panel);
    font: 650 .82rem/1.3 var(--b9-type-interface);
  }
}

/* Home: editorial type, source-backed photography and one clear action path. */
#app .reference-hero[data-scene="sportsbook"] {
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-bottom: 1px solid var(--b9-line);
}
#app .reference-hero-grid {
  grid-template-columns: minmax(0, 1.06fr) minmax(300px, .84fr);
  align-items: center;
  gap: clamp(28px, 4.2vw, 60px);
  padding-block: clamp(36px, 4.6vw, 62px);
}
#app .reference-hero-copy .reference-kicker {
  margin-bottom: 15px;
  padding-bottom: 8px;
  color: var(--b9-red);
  border-bottom: 1px solid var(--b9-line);
  font-size: .71rem;
  font-weight: 650;
  letter-spacing: .015em;
  text-transform: none;
}
#app .reference-hero-copy .reference-kicker::before { background: var(--b9-red); }
#app .reference-hero h1 {
  max-width: 14ch;
  margin-bottom: 14px;
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial) !important;
  font-size: clamp(3rem, 5vw, 4.6rem) !important;
  font-weight: 560 !important;
  letter-spacing: -.045em !important;
  line-height: .96 !important;
}
#app .reference-hero-copy > p:not(.reference-kicker) {
  max-width: 52ch;
  color: var(--b9-muted);
  font-size: 1.04rem;
  line-height: 1.55;
}
#app .reference-hero .hero-search { margin-top: 18px; gap: 7px; }
#app .reference-hero .hero-search input {
  min-height: 52px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
}
#app .reference-hero .hero-search input::placeholder { color: var(--b9-muted); opacity: 1; }
#app .home-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-block: 10px 6px; }
#app .home-hero-actions .home-offer-cta { min-height: 48px; }
#app .home-directory-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--b9-ink);
  font-size: .82rem;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
#app .home-directory-link .bastion-ui-mark { width: 15px; color: var(--b9-red); transition: transform .18s ease; }
#app .home-directory-link:hover { color: var(--b9-red); }
#app .reference-hero-briefing { display: grid; gap: 16px; min-width: 0; }
#app .home-hero-photo { min-width: 0; margin: 0; overflow: hidden; background: var(--b9-panel); }
#app .home-hero-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.45 / 1;
  object-fit: cover;
  object-position: center 55%;
  filter: saturate(.88) contrast(1.04);
  transition: transform .45s cubic-bezier(.2, .65, .25, 1);
}
#app .home-hero-photo figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 5px 14px;
  padding: 9px 0 0;
  color: var(--b9-ink);
  background: transparent;
  border-top: 1px solid var(--b9-line);
  font-size: .72rem;
  line-height: 1.4;
}
#app .home-hero-photo figcaption > span { font-weight: 720; }
#app .home-hero-photo figcaption a { color: var(--b9-muted); text-underline-offset: 2px; }
#app .home-hero-photo figcaption a:hover { color: var(--b9-red); }
#app .home-hero-photo figcaption > small { grid-column: 1 / -1; color: var(--b9-muted); font-size: .66rem; line-height: 1.4; }
#app .reference-hero .front-market-file {
  color: var(--b9-ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--b9-line);
  border-radius: 0;
}
#app .reference-hero .front-market-file-body { padding: 13px 0 0; }
#app .reference-hero .front-market-file-head { border-bottom-color: var(--b9-line); }
#app .reference-hero .front-market-file-head > div > span,
#app .reference-hero .front-market-file-head label > span,
#app .reference-hero .front-market-file-head strong small,
#app .reference-hero .front-market-file-stats span,
#app .reference-hero .front-market-file-date { color: var(--b9-muted); }
#app .reference-hero .front-market-file-head strong,
#app .reference-hero .front-market-file-stats strong { color: var(--b9-ink); }
#app .reference-hero .front-market-file-head .select-control { color: var(--b9-ink); background: var(--b9-panel); border-color: var(--b9-line); }
#app .reference-hero .front-market-file-stats { border-color: var(--b9-line); }
#app .reference-hero .front-market-file-stats > div + div { border-left-color: var(--b9-line); }
#app .reference-hero .front-market-file-link { color: var(--b9-ink); border-color: var(--b9-line); }
#app .reference-hero .front-market-file-link:hover { color: var(--b9-red); }
#app .home-comparison-wrap { margin-block: 18px 8px; }
#app .reference-ranking-list { display: none; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .home-hero-photo:hover img { transform: scale(1.018); }
  #app .home-directory-link:hover .bastion-ui-mark { transform: translateX(2px); }
}
@media (max-width: 980px) {
  #app .reference-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  #app .reference-hero-copy { max-width: 760px; }
  #app .reference-hero-briefing { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
}
@media (max-width: 760px) {
  #app .reference-hero-grid { gap: 15px; padding-block: 23px 19px; }
  #app .reference-hero-copy .reference-kicker { margin-bottom: 11px; font-size: .71rem; }
  #app .reference-hero h1 { max-width: 16ch; margin-bottom: 10px; font-size: clamp(2.35rem, 9.1vw, 3.15rem) !important; line-height: .99 !important; }
  #app .reference-hero-copy > p:not(.reference-kicker) { font-size: 1rem; line-height: 1.5; }
  #app .reference-hero .hero-search { margin-top: 13px; }
  #app .reference-hero .hero-search input,
  #app .reference-hero .hero-search .btn { min-height: 48px; }
  #app .home-hero-actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; margin-block: 7px 4px; }
  #app .home-hero-actions .home-offer-cta { width: 100%; min-height: 46px; justify-content: center; }
  #app .home-hero-actions .home-directory-link { display: none; }
  #app .front-intent-links { display: none !important; }
  #app .reference-hero .home-hero-foot { gap: 4px 10px; margin-top: 7px; font-size: .76rem; }
  #app .reference-hero .front-market-file-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(92px, 112px); gap: 11px; }
  #app .reference-hero .front-market-file-head > div,
  #app .reference-hero .front-market-file-head label { min-width: 0; width: auto; max-width: none; }
  #app .reference-hero .front-market-file-head .select-control { min-width: 0; width: 100%; max-width: 100%; }
  #app .home-hero-photo img { aspect-ratio: 1.58 / 1; }
  #app .home-hero-photo figcaption { grid-template-columns: minmax(0,1fr); gap: 4px; padding-top: 8px; font-size: .7rem; }
  #app .home-hero-photo figcaption > small { font-size: .66rem; }
  #app .home-comparison-wrap { display: none; }
  #app .reference-ranking-list { display: grid; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-hero-photo img,
  #app .home-directory-link .bastion-ui-mark { transition: none; }
}

/* A gift mark moves only in response to a deliberate pointer or key action. */
#app .bastion-gift-mark .gift-lid {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 170ms cubic-bezier(.2, .65, .25, 1);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app :is(.nav-bonus-link, .mobile-utility-rail [data-offer-nav], .bonus-hotspot):is(:hover, :focus-visible, :active) .gift-lid {
    transform: translateY(-1px) rotate(-6deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  #app .bastion-gift-mark .gift-lid { transition: none; transform: none; }
}

@media (max-width: 760px) {
  #app .reference-hero .hero-actions .btn-secondary {
    justify-content: flex-start;
    min-height: 44px;
    padding-inline: 2px;
    border: 0 !important;
    background: transparent !important;
    text-align: left;
  }
  #app .reference-hero .front-market-file-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(92px, 112px);
    gap: 11px;
  }
  #app .reference-hero .front-market-file-head > div,
  #app .reference-hero .front-market-file-head label { min-width: 0; width: auto; max-width: none; }
  #app .reference-hero .front-market-file-head .select-control { min-width: 0; width: 100%; max-width: 100%; }
}

#app .reference-hero .front-market-file {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
  border-top-color: var(--b9-red);
  border-radius: 2px;
}
#app .reference-hero .front-market-file-head { border-bottom-color: var(--b9-line); }
#app .reference-hero .front-market-file-head > div > span,
#app .reference-hero .front-market-file-head label > span,
#app .reference-hero .front-market-file-head strong small { color: var(--b9-muted); }
#app .reference-hero .front-market-file-head strong { color: var(--b9-ink); }
#app .reference-hero .front-market-file-head .select-control {
  color: var(--b9-ink);
  background: var(--b9-panel-raised);
  border-color: var(--b9-line);
}
#app .reference-hero .front-market-file-stats { border-color: var(--b9-line); }
#app .reference-hero .front-market-file-stats > div + div { border-left-color: var(--b9-line); }
#app .reference-hero .front-market-file-stats strong { color: var(--b9-ink); }
#app .reference-hero .front-market-file-stats span,
#app .reference-hero .front-market-file-date { color: var(--b9-muted); }
#app .reference-hero .front-market-file-link { color: var(--b9-ink); border-color: var(--b9-line); }
#app .reference-hero .front-market-file-link:hover { color: var(--b9-red); }

/* Give narrow-screen tables a clear action and a keyboard path. */
#app .is-scrollable-region:focus-visible {
  outline: 2px solid var(--b9-focus);
  outline-offset: 3px;
}
#app .table-scroll-hint { display: none; }
@media (max-width: 980px) {
  #app .table-scroll-hint {
    display: block;
    margin: 5px 0 0;
    color: var(--b9-muted);
    font: 600 .67rem/1.35 var(--b9-type-interface);
    text-align: right;
  }
  #app .is-scrollable-region {
    scrollbar-color: var(--b9-red) transparent;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  #app .is-scrollable-region::-webkit-scrollbar { height: 4px; }
  #app .is-scrollable-region::-webkit-scrollbar-thumb { background: var(--b9-red); }
}
@media (max-width: 760px) {
  #app .site-footer { padding-bottom: calc(98px + env(safe-area-inset-bottom)); }
}

/* Keep the offer shortcut out of the legal and editorial footer copy. */
#app .bonus-hotspot { transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s; }
body.bonus-hotspot-footer-visible #app .bonus-hotspot {
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  visibility: hidden;
}
body.bonus-hotspot-home-hero-visible #app .bonus-hotspot,
body:has(#app .cookie-banner) #app .bonus-hotspot {
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
  #app .bonus-hotspot { transition: none; }
}

/* Shared finish: one interface typeface, evidence-led icon use, and separated overlays. */
#app :is(h1, h2, h3, h4, .guide-card h3, .guide-featured-copy h2,
  .guide-index-copy h3, .guide-article-hero h1, .review-hero h1,
  .page-header-photo h1, .reference-hero h1, .section-heading h2,
  .front-offer-layout > header h2) {
  font-family: var(--b9-type-interface) !important;
}
#app .ui-icon { stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.6; }
#app .saved-header-button { width: auto; min-width: 82px; gap: 7px; }
#app .saved-header-button::before { display: block !important; }
#app .saved-header-button > span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

#app .cookie-banner {
  position: static;
  right: auto;
  bottom: auto;
  left: auto;
  z-index: auto;
  width: min(1180px, calc(100% - 36px));
  margin: 12px auto 0;
  padding: 9px 12px;
  gap: 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: none;
}
#app .cookie-banner h2 { margin-bottom: 2px; color: var(--b9-ink); font: 680 .82rem/1.2 var(--b9-type-interface); }
#app .cookie-banner p { max-width: none; color: var(--b9-muted); font-size: .74rem; line-height: 1.35; }
#app .cookie-banner .horizontal-actions { display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
#app .cookie-banner .btn { min-height: 40px; padding-inline: 12px; font-size: .76rem; white-space: nowrap; }
#app .cookie-banner ~ .bonus-hotspot { right: 18px; bottom: 18px; }

#app .bonus-hotspot {
  box-sizing: border-box;
  width: min(360px, calc(100vw - 28px));
  min-width: 250px;
  min-height: 66px;
  grid-template-columns: 38px minmax(0, 1fr) 20px;
  gap: 11px;
  padding: 10px 13px 10px 10px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
  border-left: 3px solid var(--b9-red);
  border-radius: 2px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 22%);
  transition: background-color .16s ease, border-color .16s ease, opacity .16s ease;
}
#app .bonus-hotspot:hover,
#app .bonus-hotspot:focus-visible {
  color: var(--b9-ink);
  background: var(--b9-panel-raised);
  border-color: var(--b9-red);
  transform: none;
}
#app .bonus-hotspot-mark {
  width: 36px;
  height: 36px;
  color: var(--b9-red);
  background: transparent;
  border: 0;
  border-right: 1px solid var(--b9-line);
}
#app .bonus-hotspot-mark .bastion-gift-mark { width: 26px; height: 26px; }
#app .bonus-hotspot-copy { min-width: 0; gap: 4px; }
#app .bonus-hotspot-copy small {
  overflow: hidden;
  color: var(--b9-muted);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .bonus-hotspot-copy strong {
  display: -webkit-box;
  overflow: hidden;
  color: var(--b9-ink);
  font-size: .88rem;
  font-weight: 650;
  line-height: 1.24;
  overflow-wrap: anywhere;
  text-overflow: ellipsis;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
#app .bonus-hotspot-arrow { color: var(--b9-red); }
@media (max-width: 1240px) and (min-width: 981px) {
  #app .saved-header-button { min-width: 78px; }
  #app .saved-header-button > span { display: inline !important; }
}
@media (max-width: 920px) and (min-width: 761px) {
  #app .cookie-banner { padding-inline: 12px; gap: 10px; }
  #app .cookie-banner .btn { padding-inline: 9px; font-size: .72rem; }
  #app .bonus-hotspot { width: min(300px, calc(100vw - 28px)); min-width: 220px; }
  #app .cookie-banner ~ .bonus-hotspot { right: 14px; }
}
@media (max-width: 980px) and (min-width: 761px) {
  #app .bonus-hotspot {
    right: 12px;
    bottom: 12px;
    width: 56px;
    height: 56px;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 7px;
    border: 1px solid var(--b9-line);
    border-top: 3px solid var(--b9-red);
    box-shadow: 0 5px 18px rgb(0 0 0 / 18%);
  }
  #app .bonus-hotspot-mark { position: relative; width: 38px; height: 38px; border: 0; }
  #app .bonus-hotspot-mark .bastion-gift-mark { width: 32px; height: 32px; }
  #app .bonus-hotspot-copy,
  #app .bonus-hotspot-arrow { display: none; }
  #app .bonus-hotspot-count {
    position: absolute;
    top: -5px;
    right: -7px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding-inline: 4px;
    color: #fff;
    background: var(--b9-red);
    border-radius: 2px;
    font: 700 .68rem/1 var(--b9-type-interface);
    font-variant-numeric: tabular-nums;
  }
  body:has(.menu-toggle[aria-expanded="true"]) #app .bonus-hotspot {
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
  }
}

@media (max-width: 980px) {
  #app .lang-switch a,
  #app .mobile-language-switch a { min-height: 44px; }
}
@media (max-width: 760px) {
  /* Keep market scope beside the brand, regardless of which public section is open. */
  #app .header-inner { gap: 6px; }
  #app .header-tools { display: flex; align-items: center; gap: 4px; }
  #app .header-tools .province-mini {
    display: block !important;
    flex: 0 1 96px;
    width: 96px;
    min-width: 72px;
    max-width: 112px;
    min-height: 42px;
    padding: 0 20px 0 8px;
    color: var(--b9-ink);
    background: var(--b9-panel);
    border: 1px solid var(--b9-line);
    border-left: 2px solid var(--b9-red);
    border-radius: 2px;
    font-size: .72rem;
    line-height: 1.2;
  }
  #app .header-tools .saved-header-button {
    position: relative;
    display: inline-flex !important;
    flex: 0 0 42px;
    width: 42px !important;
    min-width: 42px !important;
    min-height: 42px;
    justify-content: center;
    gap: 0;
    padding: 0;
  }
  #app .header-tools .saved-header-button > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }
  #app .header-tools .saved-header-button::before {
    display: block !important;
    flex-basis: 14px;
    width: 14px;
    height: 18px;
  }
  #app .header-tools .saved-header-button > b {
    position: absolute;
    top: -4px;
    right: -4px;
    z-index: 1;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding-inline: 3px;
    border: 1px solid var(--b9-panel);
    border-radius: 2px;
    font-size: .61rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }
  #app .menu-toggle { min-width: 50px !important; width: 50px !important; }
  #app .mobile-utility-rail a { font-size: .64rem; letter-spacing: -.01em; }

  #app .home-hero-photo img { aspect-ratio: 1.58 / 1; }
  #app .home-comparison-wrap { display: none; }
  #app .reference-ranking-list { display: grid; gap: 12px; }
  #app .cookie-banner {
    position: static;
    right: auto;
    bottom: auto;
    left: auto;
    width: calc(100% - 24px);
    max-height: none;
    overflow: visible;
    margin-top: 8px;
    grid-template-columns: minmax(0, 1fr);
    padding: 9px 10px;
    gap: 8px;
  }
  #app .cookie-banner h2 { font-size: .78rem; }
  #app .cookie-banner p { font-size: .7rem; }
  #app .cookie-banner .horizontal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .cookie-banner .btn { min-height: 44px; padding-inline: 8px; font-size: .72rem; white-space: normal; }
  #app .bonus-hotspot { display: none !important; }
}
@media (max-width: 380px) {
  #app .header-inner { gap: 4px; }
  #app .header-tools { gap: 3px; }
  #app .header-tools .province-mini { flex-basis: 70px; width: 70px; min-width: 70px; padding-inline: 6px 17px; font-size: .68rem; }
  #app .header-tools .saved-header-button { flex-basis: 40px; width: 40px !important; min-width: 40px !important; }
  #app .menu-toggle { min-width: 44px !important; width: 44px !important; padding-inline: 4px; font-size: .64rem; }
  #app .mobile-utility-rail a { font-size: .62rem; }
}
@media (max-width: 420px) {
  #app .cookie-banner .horizontal-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .home-hero-photo figcaption { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 8px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #app .bastion-gift-mark .gift-lid { transition: none; transform: none; }
  #app .bonus-hotspot, #app .offer-record-slide { transition: none; animation: none; }
  #app .home-hero-photo img { transform: none; }
}

/* 2.8.243 — Bastion action marks share one drawn stroke and optical size. */
#app .bastion-ui-mark { display: inline-block; width: 14px; height: 14px; margin-left: .16em; vertical-align: -.16em; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.7; }
#app button > .bastion-ui-mark { margin: 0; }
#app .icon-button > .bastion-ui-mark,
#compare-root .offer-compare-close > .bastion-ui-mark { width: 20px; height: 20px; }
#app .compare-dock-items button,
#app .saved-operator-list button,
#compare-root .offer-compare-close { display: grid; place-items: center; }
#app .market-compare-remove { display: inline-flex; align-items: center; gap: 8px; }
#app .market-compare-remove > .bastion-ui-mark { width: 13px; height: 13px; }
#app .mobile-utility-rail .bastion-ui-mark { width: 19px; height: 19px; margin: 0; }
#compare-root .offer-compare-close { padding: 0; }

/* The sports lead uses one credited photograph with a fixed, readable crop. */
#app .sports-hub-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f4f2ed;
  background: #090b0d;
}
#app .sports-hub-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  display: block !important;
  overflow: hidden;
  margin: 0;
  background: #090b0d;
}
#app .sports-hub-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  filter: saturate(.68) contrast(1.08) brightness(.62);
}
#app .sports-hub-photo::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, rgb(5 8 10 / 88%) 0%, rgb(5 8 10 / 68%) 52%, rgb(5 8 10 / 22%) 100%),
    linear-gradient(0deg, rgb(5 8 10 / 84%) 0%, transparent 48%);
  content: "";
  pointer-events: none;
}
#app .sports-hub-photo figcaption {
  position: absolute;
  z-index: 2;
  right: clamp(16px, 3vw, 34px);
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 32px);
  color: rgb(244 242 237 / 78%);
  font: 550 .64rem/1.3 var(--b9-type-interface);
}
#app .sports-hub-photo figcaption a { color: inherit; text-underline-offset: 2px; }
#app .sports-hub-photo figcaption a:hover { color: #fff; }
#app .sports-hub-hero::after { display: none !important; content: none !important; }
#app .sports-hub-hero-grid { position: relative; z-index: 3; }
#app .sports-hub-hero :is(h1, p, small) { color: #f4f2ed !important; }
#app .sports-hub-hero-grid > div:first-child > p:not(.reference-kicker) { color: #c9c9c2 !important; }
#app .sports-hub-hero .sports-scoreboard {
  color: #f4f2ed;
  background: rgb(9 11 13 / 84%);
  border-color: rgb(244 242 237 / 24%);
  border-top-color: var(--b9-red);
  box-shadow: none;
  backdrop-filter: none;
}
#app .sports-hub-hero .sports-scoreboard span { color: #a7adb3; }
#app .sports-hub-hero .sports-scoreboard strong { color: #f4f2ed; }
@media (max-width: 760px) {
  #app .sports-hub-photo { display: block !important; }
  #app .sports-hub-photo img { object-position: center 48%; }
  #app .sports-hub-photo::after {
    background: linear-gradient(180deg, rgb(5 8 10 / 68%) 0%, rgb(5 8 10 / 74%) 40%, rgb(5 8 10 / 93%) 100%);
  }
  #app .sports-hub-photo figcaption {
    right: 12px;
    bottom: 8px;
    left: 12px;
    flex-wrap: wrap;
    gap: 2px 8px;
    font-size: .58rem;
  }
}

/* Source: styles/offer-comparison.css */
/* Published offer ledger and same-market comparison. Terms stay scannable in place. */
body[data-route="bonuses"] #app .bonus-directory-header { padding-block: clamp(20px, 2.5vw, 34px); }
body[data-route="bonuses"] #app .bonus-directory-layout { align-items: center; gap: clamp(22px, 3.2vw, 44px); }
body[data-route="bonuses"] #app .bonus-directory-copy h1 { max-width: 15ch; font-size: clamp(2.45rem, 4.6vw, 3.55rem); }
body[data-route="bonuses"] #app .bonus-deadline-card {
  align-content: center;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 14px;
  padding: 14px 16px 11px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
  border-top: 2px solid var(--b9-red);
}
body[data-route="bonuses"] #app .bonus-deadline-main { grid-column: 1; grid-row: 1; gap: 3px; padding: 0; border: 0; }
body[data-route="bonuses"] #app .bonus-deadline-main .eyebrow { color: var(--b9-muted); font-size: .7rem; }
body[data-route="bonuses"] #app .bonus-deadline-main time { color: var(--b9-ink); font-size: clamp(1.8rem, 2.7vw, 2.35rem); }
body[data-route="bonuses"] #app .bonus-deadline-main strong { color: var(--b9-muted); font: 600 .75rem/1.35 var(--b9-type-interface); letter-spacing: 0; }
body[data-route="bonuses"] #app .bonus-deadline-source { display: inline-flex; align-items: center; gap: 6px; width: fit-content; min-height: 40px; color: var(--b9-ink); font-size: .74rem; font-weight: 700; text-underline-offset: 3px; }
body[data-route="bonuses"] #app .bonus-deadline-source .bastion-ui-mark { width: 14px; color: var(--b9-red); }
body[data-route="bonuses"] #app .bonus-deadline-more { grid-column: 1 / -1; border-top: 1px solid var(--b9-line); }
body[data-route="bonuses"] #app .bonus-deadline-more summary { display: flex; align-items: center; min-height: 44px; color: var(--b9-ink); font-size: .74rem; font-weight: 700; cursor: pointer; }
body[data-route="bonuses"] #app .bonus-deadline-more ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body[data-route="bonuses"] #app .bonus-deadline-more li { display: grid; grid-template-columns: max-content minmax(0,1fr) max-content; align-items: center; gap: 8px 11px; padding-block: 8px; border-top: 1px solid var(--b9-line); }
body[data-route="bonuses"] #app .bonus-deadline-more time { color: var(--b9-red); font: 700 .72rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
body[data-route="bonuses"] #app .bonus-deadline-more li > span { display: grid; min-width: 0; gap: 3px; }
body[data-route="bonuses"] #app .bonus-deadline-more li strong { color: var(--b9-ink); font-size: .73rem; line-height: 1.35; }
body[data-route="bonuses"] #app .bonus-deadline-more li small { color: var(--b9-muted); font-size: .66rem; line-height: 1.35; }
body[data-route="bonuses"] #app .bonus-deadline-more li a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--b9-ink); font-size: .69rem; font-weight: 700; text-underline-offset: 3px; white-space: nowrap; }
body[data-route="bonuses"] #app .bonus-deadline-more li a .bastion-ui-mark { width: 13px; color: var(--b9-red); }
body[data-route="bonuses"] #app .bonus-deadline-foot { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; color: var(--b9-muted); text-align: right; }
body[data-route="bonuses"] #app .bonus-deadline-foot span { font-size: .72rem; line-height: 1.3; }
body[data-route="bonuses"] #app .bonus-deadline-foot b { color: var(--b9-ink); }
body[data-route="bonuses"] #app .bonus-deadline-link { min-height: 40px; display: inline-flex; align-items: center; padding: 0; color: var(--b9-ink); border: 0; white-space: nowrap; }
body[data-route="bonuses"] #app .bonus-deadline-link span { color: var(--b9-red); }

#app .offer-compare-instructions {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--b9-line);
  color: var(--b9-muted);
  font-size: .84rem;
}

#app .offer-compare-instructions p { margin: 0; color: var(--b9-ink); font-weight: 650; }
#app .offer-compare-instructions span { flex: 0 0 auto; }

#app .offer-ledger-list { border-top: 1px solid var(--b9-line); }
#app .offer-ledger-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(145px, .76fr) minmax(280px, 1.48fr) minmax(195px, 1fr) minmax(185px, .88fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
  padding: 22px 30px 23px 0;
  border-bottom: 1px solid var(--b9-line);
  background: transparent;
}

#app .offer-ledger-label {
  display: block;
  margin-bottom: 7px;
  color: var(--b9-muted);
  font-size: .7rem;
  font-weight: 680;
}

#app .offer-ledger-operator-name { display: flex; align-items: center; gap: 9px; min-height: 38px; }
#app .offer-ledger-operator-name strong { color: var(--b9-ink); font-size: .96rem; line-height: 1.25; }
#app .offer-ledger-logo { width: 38px; height: 34px; flex: 0 0 auto; }
#app .offer-ledger-operator > small { display: block; margin-top: 7px; color: var(--b9-muted); font-size: .74rem; line-height: 1.4; }
#app .offer-ledger-description h3 { margin: 0 0 7px; color: var(--b9-ink); font-size: 1.12rem; line-height: 1.25; }
#app .offer-ledger-description p { max-width: 62ch; margin: 0; color: var(--b9-ink); font-size: .88rem; line-height: 1.55; }

#app .offer-ledger-primary-terms,
#app .offer-ledger-more dl { margin: 0; }
#app .offer-ledger-primary-terms > div,
#app .offer-ledger-more dl > div {
  display: grid;
  grid-template-columns: minmax(74px, .72fr) minmax(0, 1.28fr);
  gap: 10px;
  padding-block: 7px;
  border-bottom: 1px solid color-mix(in srgb, var(--b9-line) 75%, transparent);
}
#app .offer-ledger-primary-terms dt,
#app .offer-ledger-more dt { color: var(--b9-muted); font-size: .76rem; }
#app .offer-ledger-primary-terms dd,
#app .offer-ledger-more dd { margin: 0; color: var(--b9-ink); font-size: .8rem; font-weight: 650; overflow-wrap: anywhere; }
#app .offer-ledger-more { margin-top: 8px; }
#app .offer-ledger-more summary { min-height: 40px; display: flex; align-items: center; color: var(--b9-ink); font-size: .8rem; font-weight: 650; cursor: pointer; }
#app .offer-ledger-more dl { padding-top: 3px; }

#app .offer-ledger-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 3px; }
#app .offer-ledger-actions a,
#app .offer-ledger-actions > span { color: var(--b9-ink); font-size: .78rem; font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .offer-compare-select {
  min-width: 102px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--b9-line);
  border-radius: 2px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
#app .offer-compare-select[aria-pressed="true"] { color: #fff; background: var(--b9-red); border-color: var(--b9-red); }
#app .offer-compare-select:disabled { color: var(--b9-muted); background: transparent; cursor: not-allowed; opacity: .75; }
#app .offer-ledger-index { position: absolute; top: 22px; right: 0; color: var(--b9-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }

#compare-root:has(.offer-compare-dock) { position: relative; z-index: 90; }
#compare-root .offer-compare-dock {
  position: fixed;
  right: max(18px, calc((100vw - 1280px) / 2));
  bottom: 18px;
  z-index: 91;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 5px 18px;
  width: min(690px, calc(100vw - 36px));
  padding: 11px 14px;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-red);
}
#compare-root.has-operator-compare .offer-compare-dock { bottom: 122px; }
#compare-root .offer-compare-dock-names { display: flex; flex-wrap: wrap; align-items: center; gap: 7px 12px; min-width: 0; }
#compare-root .offer-compare-dock-names > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; color: var(--b9-ink); font-size: .76rem; }
#compare-root .offer-compare-dock-names strong { color: var(--b9-muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
#compare-root .offer-compare-dock-names > span { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px; }
#compare-root .offer-compare-dock-names > span > span { display: grid; min-width: 0; }
#compare-root .offer-compare-dock-names b { color: var(--b9-ink); font-size: .74rem; }
#compare-root .offer-compare-dock-names small { max-width: 26ch; overflow: hidden; color: var(--b9-muted); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
#compare-root .offer-compare-dock-names button { min-width: 30px; min-height: 30px; border: 0; color: var(--b9-muted); background: transparent; cursor: pointer; }
#compare-root .offer-compare-dock > p { grid-column: 1; margin: 0; color: var(--b9-muted); font-size: .7rem; line-height: 1.35; }
#compare-root .offer-compare-dock-actions { grid-column: 2; grid-row: 1 / span 2; display: flex; align-items: center; gap: 10px; }
#compare-root .offer-compare-dock-actions > button:first-child { min-height: 40px; border: 0; color: var(--b9-muted); background: transparent; font: inherit; font-size: .76rem; cursor: pointer; }
#compare-root .offer-compare-dock-actions .btn { min-height: 44px; white-space: nowrap; }

#compare-root .offer-compare-sheet { position: fixed; inset: 0; z-index: 112; }
#compare-root .offer-compare-sheet[hidden] { display: none; }
#compare-root .offer-compare-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgb(8 11 13 / 76%); cursor: default; }
#compare-root .offer-compare-panel {
  position: absolute;
  inset: 5vh 0 auto;
  width: min(1180px, calc(100vw - 40px));
  max-height: 90vh;
  overflow: auto;
  margin-inline: auto;
  padding: clamp(20px, 3vw, 38px);
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-top: 3px solid var(--b9-red);
}
#compare-root .offer-compare-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--b9-line); }
#compare-root .offer-compare-head .eyebrow { margin: 0 0 7px; color: var(--b9-red); }
#compare-root .offer-compare-head h2 { margin: 0; color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.08; }
#compare-root .offer-compare-head p:not(.eyebrow) { max-width: 62ch; margin: 9px 0 0; color: var(--b9-muted); font-size: .9rem; }
#compare-root .offer-compare-close { flex: 0 0 auto; width: 44px; height: 44px; border: 1px solid var(--b9-line); color: var(--b9-ink); background: transparent; font-size: 1.5rem; cursor: pointer; }
#compare-root .offer-compare-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 20px; }
#compare-root .offer-compare-column { min-width: 0; padding: 0 clamp(12px, 1.6vw, 22px); border-left: 1px solid var(--b9-line); }
#compare-root .offer-compare-column:first-child { padding-left: 0; border-left: 0; }
#compare-root .offer-compare-column:last-child { padding-right: 0; }
#compare-root .offer-compare-column-head { min-height: 146px; padding-bottom: 14px; border-bottom: 1px solid var(--b9-line); }
#compare-root .offer-compare-column-head > span:first-child { display: block; margin-bottom: 9px; color: var(--b9-muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
#compare-root .offer-compare-logo { width: 44px; height: 36px; margin-bottom: 7px; }
#compare-root .offer-compare-column-head > strong { display: block; color: var(--b9-ink); font-size: .94rem; }
#compare-root .offer-compare-column-head h3 { margin: 8px 0 0; color: var(--b9-ink); font-size: .9rem; line-height: 1.35; }
#compare-root .offer-compare-package { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--b9-line); }
#compare-root .offer-compare-package > span { color: var(--b9-muted); font-size: .68rem; font-weight: 750; letter-spacing: .02em; }
#compare-root .offer-compare-package p { margin: 5px 0 0; color: var(--b9-ink); font-size: .79rem; line-height: 1.5; }
#compare-root .offer-compare-column dl { margin: 0 0 12px; }
#compare-root .offer-compare-column dl > div { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, var(--b9-line) 76%, transparent); }
#compare-root .offer-compare-column dt { margin-bottom: 3px; color: var(--b9-muted); font-size: .7rem; }
#compare-root .offer-compare-column dd { margin: 0; color: var(--b9-ink); font-size: .82rem; font-weight: 620; line-height: 1.45; overflow-wrap: anywhere; }
#compare-root .offer-compare-column > a,
#compare-root .offer-compare-column > span { display: inline-flex; align-items: center; min-height: 44px; color: var(--b9-ink); font-size: .8rem; font-weight: 700; text-underline-offset: 3px; }
#compare-root .offer-compare-disclaimer { margin: 20px 0 0; padding-top: 12px; border-top: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .76rem; }

@media (max-width: 920px) {
  #app .offer-ledger-row { grid-template-columns: minmax(130px, .75fr) minmax(240px, 1.25fr) minmax(190px, 1fr); }
  #app .offer-ledger-actions { grid-column: 2 / -1; padding-top: 0; }
  #compare-root .offer-compare-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; }
  #compare-root .offer-compare-column:nth-child(3) { grid-column: 1 / -1; padding: 18px 0 0; border-top: 1px solid var(--b9-line); border-left: 0; }
  #compare-root .offer-compare-column-head { min-height: 130px; }
}

@media (max-width: 680px) {
  body[data-route="bonuses"] #app .bonus-directory-header { padding-block: 20px; }
  body[data-route="bonuses"] #app .bonus-directory-layout { gap: 11px; }
  body[data-route="bonuses"] #app .bonus-directory-copy h1 { max-width: 15ch; font-size: clamp(2rem, 9vw, 2.75rem); }
  body[data-route="bonuses"] #app .bonus-deadline-card { grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 9px 12px 7px; }
  body[data-route="bonuses"] #app .bonus-deadline-main { grid-column: 1; grid-row: 1; }
  body[data-route="bonuses"] #app .bonus-deadline-main .eyebrow { margin-bottom: 0; }
  body[data-route="bonuses"] #app .bonus-deadline-main time { font-size: 1.65rem; }
  body[data-route="bonuses"] #app .bonus-deadline-source { min-height: 40px; }
  body[data-route="bonuses"] #app .bonus-deadline-more li { grid-template-columns: minmax(0,1fr) max-content; gap: 3px 8px; }
  body[data-route="bonuses"] #app .bonus-deadline-more li time { grid-column: 1; grid-row: 1; }
  body[data-route="bonuses"] #app .bonus-deadline-more li > span { grid-column: 1; grid-row: 2; }
  body[data-route="bonuses"] #app .bonus-deadline-more li a { grid-column: 2; grid-row: 1 / span 2; }
  body[data-route="bonuses"] #app .bonus-deadline-foot { grid-column: 1; grid-row: 2; align-self: center; justify-content: space-between; gap: 8px; padding: 3px 0 0; border-top: 1px solid var(--b9-line); }
  body[data-route="bonuses"] #app .bonus-deadline-foot span { max-width: none; font-size: .68rem; text-align: left; }
  body[data-route="bonuses"] #app .bonus-deadline-link { min-height: 36px; }
  body[data-route="bonuses"] #app .bonus-deadline-note { font-size: .74rem; }
  body[data-route="bonuses"] #app .bonus-deadline-link { min-height: 40px; }
  #app .offer-compare-instructions { align-items: flex-start; flex-direction: column; gap: 4px; padding-block: 10px; font-size: .78rem; }
  #app .offer-ledger-row { grid-template-columns: minmax(0, 1fr) auto; gap: 9px 12px; padding: 17px 25px 18px 0; }
  #app .offer-ledger-operator { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1px 10px; }
  #app .offer-ledger-operator .offer-ledger-label { grid-column: 1 / -1; margin-bottom: 3px; }
  #app .offer-ledger-operator-name { grid-column: 1; grid-row: 2; }
  #app .offer-ledger-operator > small { grid-column: 2; grid-row: 2; margin-top: 0; text-align: right; }
  #app .offer-ledger-operator > small + small { grid-column: 1 / -1; grid-row: 3; text-align: left; }
  #app .offer-ledger-description { grid-column: 1 / -1; }
  #app .offer-ledger-description h3 { font-size: 1.04rem; }
  #app .offer-ledger-description p { font-size: .87rem; }
  #app .offer-ledger-primary-terms { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  #app .offer-ledger-primary-terms > div { display: block; padding: 7px 0; }
  #app .offer-ledger-primary-terms dd { margin-top: 3px; }
  #app .offer-ledger-more { grid-column: 1 / -1; margin-top: -5px; }
  #app .offer-ledger-actions { grid-column: 1 / -1; gap: 4px 14px; }
  #app .offer-ledger-actions a { min-height: 42px; display: inline-flex; align-items: center; }
  #app .offer-ledger-index { top: 18px; }
  #compare-root .offer-compare-dock { right: 10px; bottom: max(10px, env(safe-area-inset-bottom)); left: 10px; grid-template-columns: minmax(0, 1fr); gap: 6px; width: auto; padding: 9px 10px; }
  #compare-root.has-operator-compare .offer-compare-dock { bottom: calc(max(10px, env(safe-area-inset-bottom)) + 148px); }
  #compare-root .offer-compare-dock > p { grid-column: 1; }
  #compare-root .offer-compare-dock-actions { grid-column: 1; grid-row: auto; justify-content: flex-end; }
  #compare-root .offer-compare-dock-actions .btn { flex: 1; }
  #compare-root .offer-compare-sheet { z-index: 112; }
  #compare-root .offer-compare-panel { inset: auto 0 0; width: 100%; max-height: min(92dvh, 900px); padding: 18px 15px calc(18px + env(safe-area-inset-bottom)); border-top-width: 3px; }
  #compare-root .offer-compare-head { gap: 12px; padding-bottom: 14px; }
  #compare-root .offer-compare-head h2 { font-size: 1.6rem; }
  #compare-root .offer-compare-head p:not(.eyebrow) { font-size: .84rem; }
  #compare-root .offer-compare-columns { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
  #compare-root .offer-compare-column,
  #compare-root .offer-compare-column:first-child,
  #compare-root .offer-compare-column:nth-child(3) { grid-column: 1; padding: 14px 0 0; border-top: 1px solid var(--b9-line); border-left: 0; }
  #compare-root .offer-compare-column:first-child { padding-top: 0; border-top: 0; }
  #compare-root .offer-compare-column-head { min-height: 0; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; padding-bottom: 10px; }
  #compare-root .offer-compare-column-head > span:first-child { grid-row: 1 / span 3; margin: 2px 0 0; }
  #compare-root .offer-compare-logo { grid-column: 2; grid-row: 1; margin: 0 0 5px; }
  #compare-root .offer-compare-column-head > strong { grid-column: 2; }
  #compare-root .offer-compare-column-head h3 { grid-column: 2; }
  #compare-root .offer-compare-package { grid-column: 1 / -1; }
  #compare-root .offer-compare-package p { font-size: .82rem; }
  #compare-root .offer-compare-column dl > div { padding: 8px 0; }
  #compare-root .offer-compare-disclaimer { margin-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #compare-root .offer-compare-panel { scroll-behavior: auto; }
}

/* Homepage offer desk: the commercial headline is followed by the source terms. */
#app .home-offer-board {
  background: var(--b9-panel);
  border-block: 1px solid var(--b9-line);
}
#app .home-offer-board > .container { padding-block: clamp(30px, 4.6vw, 60px); }
#app .home-offer-board-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 22px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--b9-line);
}
#app .home-offer-board-heading .eyebrow { margin-bottom: 9px; color: var(--b9-red); }
#app .home-offer-board-heading h2 {
  max-width: 21ch;
  margin: 0;
  color: var(--b9-ink);
  font-size: clamp(2rem, 4vw, 3.25rem);
  letter-spacing: -.035em;
  line-height: .99;
  text-wrap: balance;
}
#app .home-offer-board-heading p:not(.eyebrow) {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--b9-muted);
  font-size: .94rem;
  line-height: 1.55;
}
#app .home-offer-board-all {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 12px;
  color: var(--b9-ink);
  border: 1px solid var(--b9-line);
  font-size: .8rem;
  font-weight: 700;
  text-decoration: none;
}
#app .home-offer-board-all .bastion-ui-mark { width: 16px; color: var(--b9-red); transition: transform .16s ease; }
#app .home-offer-board-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px 22px;
  padding-block: 11px 8px;
  color: var(--b9-muted);
  font-size: .72rem;
  line-height: 1.4;
}
#app .home-offer-board-meta span + span { padding-left: 15px; border-left: 1px solid var(--b9-line); }
#app .home-offer-board-meta b { color: var(--b9-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .home-offer-board .offer-ledger-list { border-top: 0; }
#app .home-offer-board .offer-ledger-row {
  padding-left: 15px;
  transition: background-color .16s ease;
}
#app .home-offer-board .offer-ledger-row::before {
  position: absolute;
  inset: 22px auto 22px 0;
  width: 2px;
  background: var(--b9-line);
  content: "";
  transition: background-color .16s ease, width .16s ease;
}
#app .home-offer-board .offer-ledger-row.is-selected-for-comparison { background: color-mix(in srgb, var(--b9-red) 4%, var(--b9-panel)); }
#app .home-offer-board .offer-ledger-row.is-selected-for-comparison::before { width: 3px; background: var(--b9-red); }
#app .home-offer-board .offer-ledger-index { color: var(--b9-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .offer-ledger-visit {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  color: #fff !important;
  background: var(--b9-red);
  border: 1px solid var(--b9-red);
  text-decoration: none !important;
}
#app .offer-ledger-visit .bastion-ui-mark { width: 15px; }
#app .offer-ledger-visit-wrap { min-width: 0; max-width: 190px; display: grid; justify-items: start; gap: 4px; }
#app .offer-ledger-visit-wrap > small { color: var(--b9-muted); font-size: .66rem; line-height: 1.35; }
#app .home-offer-board-note {
  margin: 12px 0 0;
  padding-top: 11px;
  color: var(--b9-muted);
  border-top: 1px solid var(--b9-line);
  font-size: .74rem;
  line-height: 1.5;
}
#app .home-offer-board-empty { padding-block: 16px; color: var(--b9-ink); }
#app .home-offer-board-empty > p { margin: 0 0 12px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .home-offer-board-all:hover .bastion-ui-mark { transform: translateX(2px); }
  #app .home-offer-board .offer-ledger-row:hover { background: var(--b9-paper); }
}
@media (max-width: 680px) {
  #app .home-offer-board > .container { padding-block: 27px; }
  #app .home-offer-board-heading { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 13px; padding-bottom: 15px; }
  #app .home-offer-board-heading h2 { max-width: 17ch; font-size: clamp(1.9rem, 8vw, 2.55rem); line-height: 1.02; }
  #app .home-offer-board-heading p:not(.eyebrow) { margin-top: 9px; font-size: .92rem; }
  #app .home-offer-board-all { width: 100%; justify-content: space-between; }
  #app .home-offer-board-meta { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding-block: 9px; }
  #app .home-offer-board-meta span + span { padding-left: 0; border-left: 0; }
  #app .home-offer-board .offer-ledger-row { padding-left: 11px; }
  #app .offer-ledger-visit-wrap { width: 100%; max-width: none; }
  #app .offer-ledger-visit { width: 100%; justify-content: center; }
  #app .home-offer-board-note { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-offer-board-all .bastion-ui-mark,
  #app .home-offer-board .offer-ledger-row,
  #app .home-offer-board .offer-ledger-row::before { transition: none; }
}

/* Offer mechanics are explicit filters over the published record, not a prize wheel. */
body[data-route="bonuses"] #app .bonus-mechanic-finder {
  display: grid;
  gap: 10px;
  margin-block: 15px 13px;
  padding-block: 12px 13px;
  border-block: 1px solid var(--b9-line);
}
body[data-route="bonuses"] #app .bonus-mechanic-finder-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 14px;
}
body[data-route="bonuses"] #app .bonus-mechanic-finder-head strong {
  color: var(--b9-ink);
  font-size: .78rem;
  font-weight: 720;
}
body[data-route="bonuses"] #app .bonus-mechanic-finder-head span {
  color: var(--b9-muted);
  font-size: .73rem;
  line-height: 1.4;
}
body[data-route="bonuses"] #app .bonus-mechanic-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
body[data-route="bonuses"] #app .bonus-mechanic-facets button {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  color: var(--b9-ink);
  background: transparent;
  border: 1px solid var(--b9-line);
  font: 650 .76rem/1.25 var(--b9-type-interface);
  text-align: left;
  cursor: pointer;
  transition: color .14s ease, background-color .14s ease, border-color .14s ease;
}
body[data-route="bonuses"] #app .bonus-mechanic-facets button b {
  min-width: 1.45em;
  color: var(--b9-muted);
  font: 700 .7rem/1 var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
body[data-route="bonuses"] #app .bonus-mechanic-facets button[aria-pressed="true"] {
  color: #fff;
  background: var(--b9-red);
  border-color: var(--b9-red);
}
body[data-route="bonuses"] #app .bonus-mechanic-facets button[aria-pressed="true"] b { color: #fff; }
body[data-route="bonuses"] #app .bonus-mechanic-facets button:focus-visible {
  outline: 2px solid var(--b9-red);
  outline-offset: 2px;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  body[data-route="bonuses"] #app .bonus-mechanic-facets button:hover:not([aria-pressed="true"]) {
    border-color: var(--b9-red);
  }
}
@media (max-width: 560px) {
  body[data-route="bonuses"] #app .bonus-mechanic-finder { gap: 9px; margin-block: 12px; }
  body[data-route="bonuses"] #app .bonus-mechanic-finder-head { display: grid; gap: 3px; }
  body[data-route="bonuses"] #app .bonus-mechanic-facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="bonuses"] #app .bonus-mechanic-facets button { justify-content: space-between; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="bonuses"] #app .bonus-mechanic-facets button { transition: none; }
}

/* Offer cards give verified package figures a clear, type-specific visual. */
#app .offer-ledger-description {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(78px, 100px);
  align-items: start;
  gap: 10px 12px;
}
#app .offer-ledger-copy { min-width: 0; }
#app .offer-ledger-mechanic {
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  min-width: 0;
  min-height: 88px;
  display: block;
  overflow: hidden;
  padding: 9px 10px;
  color: var(--b9-ink);
  border: 1px solid var(--b9-line);
  border-left: 2px solid var(--b9-red);
  background: var(--b9-panel);
}
#app .offer-ledger-mechanic-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  min-height: inherit;
}
#app .offer-ledger-mechanic-copy > span {
  color: var(--b9-muted);
  font-size: .64rem;
  font-weight: 720;
  letter-spacing: .045em;
  line-height: 1.2;
}
#app .offer-ledger-mechanic-copy > strong {
  color: var(--b9-ink);
  font: 730 clamp(.96rem, 1.35vw, 1.2rem)/1.04 var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.045em;
  overflow-wrap: anywhere;
}
#app .offer-ledger-mechanic-copy > small {
  color: var(--b9-muted);
  font-size: .72rem;
  font-weight: 620;
  line-height: 1.3;
}
#app .offer-ledger-mechanic.is-unquantified .offer-ledger-mechanic-copy > strong {
  font-size: .83rem;
  line-height: 1.25;
  letter-spacing: -.015em;
}
#app .offer-ledger-mechanic.has-components { min-height: 112px; }
#app .offer-ledger-mechanic ul {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 5px 0 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--b9-line);
  list-style: none;
}
#app .offer-ledger-mechanic li {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 5px;
  color: var(--b9-muted);
  font-size: .7rem;
  line-height: 1.3;
}
#app .offer-ledger-mechanic li b {
  color: var(--b9-ink);
  font: 720 .72rem/1.3 var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
#app .offer-ledger-mechanic li span { min-width: 0; overflow-wrap: anywhere; }
#app .offer-ledger-art {
  position: absolute;
  right: -8px;
  bottom: -13px;
  z-index: 0;
  width: 76px;
  height: 60px;
  overflow: visible;
  color: var(--b9-muted);
  opacity: .16;
  pointer-events: none;
  transition: color 160ms ease, opacity 160ms ease;
}
#app .offer-ledger-art-outline,
#app .offer-ledger-art-detail,
#app .offer-ledger-art-flow {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
#app .offer-ledger-art-outline { stroke-width: 1.1; }
#app .offer-ledger-art-detail { stroke-width: 1.5; opacity: .68; }
#app .offer-ledger-art-flow {
  stroke: var(--b9-red);
  stroke-width: 1.7;
  stroke-dasharray: 5 5;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 180ms ease;
}
#app .offer-ledger-summary-more { margin-top: 6px; }
#app .offer-ledger-summary-more summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--b9-ink);
  font-size: .73rem;
  font-weight: 680;
  text-decoration: underline;
  text-decoration-color: var(--b9-red);
  text-underline-offset: 3px;
  cursor: pointer;
}
#app .offer-ledger-summary-more > p {
  max-width: 64ch;
  margin: 5px 0 0;
  color: var(--b9-muted);
  font-size: .82rem;
  line-height: 1.52;
}
#app .offer-ledger-row.is-selected-for-comparison .offer-ledger-mechanic { border-left-color: var(--b9-red); }
#app .offer-ledger-row.is-selected-for-comparison .offer-ledger-art { opacity: .3; }
#app .offer-ledger-row.is-selected-for-comparison .offer-compare-select { box-shadow: inset 0 -2px 0 rgb(255 255 255 / .24); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .offer-ledger-row:is(:hover, :focus-within) .offer-ledger-mechanic { border-color: var(--b9-red); }
  #app .offer-ledger-row:is(:hover, :focus-within) .offer-ledger-art { color: var(--b9-ink); opacity: .28; }
  #app .offer-ledger-row:is(:hover, :focus-within) .offer-ledger-art-flow { stroke-dashoffset: -10; }
}

@media (max-width: 920px) {
  #app .offer-ledger-description { grid-template-columns: minmax(0, 1fr) minmax(84px, 104px); gap: 8px; }
  #app .offer-ledger-mechanic { min-height: 78px; padding-inline: 8px; }
}
@media (max-width: 680px) {
  #app .offer-ledger-description { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #app .offer-ledger-mechanic { min-height: 100px; padding: 12px 104px 12px 13px; }
  #app .offer-ledger-mechanic.has-components { min-height: 116px; }
  #app .offer-ledger-mechanic-copy { min-height: 74px; }
  #app .offer-ledger-art { right: 5px; bottom: 5px; width: 94px; height: 74px; opacity: .32; }
}
@media (max-width: 380px) {
  #app .offer-ledger-description { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  #app .offer-ledger-mechanic { min-height: 100px; padding-right: 94px; }
  #app .offer-ledger-mechanic.has-components { min-height: 118px; }
  #app .offer-ledger-art { right: 1px; width: 88px; }
}
@media (prefers-reduced-motion: reduce) { #app .offer-ledger-row .offer-compare-select { box-shadow: none; } }

#app .reference-hero .home-offer-cta { gap: 9px; }
#app .home-offer-cta > span { display: inline-flex; flex: 0 0 auto; }
#app .home-offer-cta .bastion-gift-mark { width: 18px; height: 18px; color: #fff; }
#app .home-offer-cta .gift-ribbon { stroke: currentColor; }
#app .home-offer-cta .gift-lid { transform-origin: 12px 8.5px; transition: transform .16s ease; }
#app .home-offer-cta > b {
  margin-left: 2px;
  padding-left: 9px;
  border-left: 1px solid rgb(255 255 255 / 44%);
  color: #fff;
  font: 700 .72rem/1 var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #app .home-offer-cta:is(:hover, :focus-visible) .gift-lid { transform: translateY(-2px) rotate(-7deg); }
}
@media (prefers-reduced-motion: reduce) {
  #app .home-offer-cta .gift-lid { transition: none; }
}

/* Source: styles/responsive-product-finish.css */
/* Shared mobile closure: keep the route-specific design, fix common usability gaps last. */
#app .pagination {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  max-width: 100%;
}
#app .pagination-gap {
  min-width: 18px;
  display: grid;
  place-items: center;
  color: var(--b9-muted);
}
#app .bonus-hotspot-label { display: none; }

/* Keep the reporting desk and market file on the same first-screen line. */
@media (min-width: 761px) {
  #app .reference-hero-grid {
    align-items: start;
    padding-block: clamp(30px, 3.6vw, 46px);
  }

  #app .reference-hero-briefing { align-self: start; }
}

/* The fill is the dated source-match ratio, so its reveal explains the figure. */
#app .reference-hero .source-match-rail { border-bottom-color: var(--b9-line); }
#app .reference-hero .source-match-route,
#app .reference-hero .source-match-rail > p,
#app .reference-hero .source-match-key { color: var(--b9-muted); }
#app .reference-hero .source-match-route i { background: var(--b9-line); }
#app .reference-hero .source-match-route i::after {
  border-color: var(--b9-muted);
}
#app .reference-hero .source-match-rail > p strong { color: var(--b9-red); }
#app .reference-hero .source-match-track { background: var(--b9-panel-raised); }

@keyframes bastion-source-match-reveal {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: no-preference) {
  #app .reference-hero .source-match-track > i {
    transform: scaleX(1);
    transform-origin: left center;
    animation: bastion-source-match-reveal 620ms cubic-bezier(.2, .72, .25, 1) both;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .reference-hero .source-match-track > i {
    animation: none;
    transform: none;
  }
}

@media (max-width: 760px) {
  #app #main-content .article-content p:not(.meta),
  #app #main-content .guide-card .card-body > p,
  #app #main-content .offer-ledger-description > p,
  #app #main-content .sports-topic-content > p:not(.eyebrow),
  #app #main-content .section-heading > div > p:not(.eyebrow),
  #app #main-content .reference-hero-copy > p:not(.reference-kicker),
  #app #main-content .bonus-directory-copy > .lead {
    font-size: max(1rem, 1em);
    line-height: 1.52;
  }

  #app #main-content .filters label,
  #app #main-content .filters-rich label,
  #app #main-content .operator-directory-filters label {
    font-size: max(.8125rem, 1em);
  }

  #app #main-content :is(.btn, .input-control, .select-control, input[type="search"], textarea, button) {
    min-height: 44px;
  }

  #app .pagination button {
    box-sizing: border-box;
    flex: 0 0 44px;
    min-width: 44px;
    min-height: 44px;
  }

  /* Offers already has a dedicated destination in the fixed mobile rail. */
  #app .bonus-hotspot { display: none !important; }
}

@media (max-width: 380px) {
  #app .header-tools .province-mini {
    flex-basis: 78px;
    width: 78px;
    min-width: 78px;
    padding-inline: 5px 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #app .bonus-hotspot,
  #app .bonus-hotspot .gift-lid {
    animation: none !important;
    transition: none !important;
  }
}

/* Bastion 2.8.253 — a shared editorial market desk across public routes. */
#app .site-header {
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-color: var(--b9-line);
  box-shadow: none;
}
#app .site-header.is-scrolled { box-shadow: 0 8px 24px rgb(0 0 0 / 9%); }
#app .brand-symbol { flex: 0 0 36px; }
#app .brand-word { letter-spacing: -.035em; }
#app .primary-nav a { position: relative; }
#app .primary-nav a[aria-current="page"]::after { transform: scaleX(1); }
#app .primary-nav a:focus-visible,
#app .mobile-panel a:focus-visible { outline-offset: 2px; }

#app #main-content :is(.page-header, .page-header-photo) {
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-bottom: 1px solid var(--b9-line);
}
#app #main-content :is(.page-header h1, .page-header-photo h1,
  .reference-hero h1, .guide-article-hero h1, .review-hero h1, .sports-hub-hero h1, .province-hero h1) {
  max-width: 19ch;
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial) !important;
  font-size: clamp(2.45rem, 4.6vw, 4.15rem);
  font-weight: 720;
  letter-spacing: -.048em;
  line-height: 1.02;
  text-wrap: balance;
}
#app #main-content :is(.page-header .lead, .page-header-photo .lead) {
  max-width: 68ch;
  color: var(--b9-muted);
  font-size: clamp(1rem, 1.12vw, 1.13rem);
  line-height: 1.62;
}
#app #main-content :is(.section-heading h2, .front-offer-layout > header h2,
  .guide-featured-copy h2, .guide-article-hero h2) {
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial) !important;
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}
#app #main-content .section-heading {
  align-items: end;
  gap: 20px;
}
#app #main-content .section-heading > div { min-width: 0; }
#app #main-content .section-heading > div > p:not(.eyebrow) {
  max-width: 66ch;
  color: var(--b9-muted);
  line-height: 1.58;
}
#app .eyebrow,
#app .reference-kicker,
#app .listing-hero-kicker {
  font-variant-numeric: tabular-nums;
  letter-spacing: .055em;
}

#app .listing-hero .listing-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
  align-items: center;
  gap: clamp(28px, 5vw, 76px);
}
#app .listing-hero:not(.has-listing-visual) .listing-hero-layout {
  display: block;
}
#app .listing-hero-copy { min-width: 0; max-width: 840px; }
#app .listing-hero-kicker {
  width: fit-content;
  margin: 0 0 15px;
  padding: 0 0 7px;
  color: var(--b9-red);
  border-bottom: 1px solid var(--b9-red);
  font: 680 .72rem/1.35 var(--b9-type-interface);
}
#app .listing-hero-copy > .notice,
#app .listing-hero-copy > .listing-coverage-notice {
  max-width: 74ch;
  margin-top: 20px;
}
#app .listing-hero-visual {
  min-width: 0;
  position: relative;
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-red);
  background: var(--b9-panel);
}
#app .listing-hero-visual .guide-visual {
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--b9-panel);
}
#app .listing-hero-visual .guide-visual img {
  width: 100%;
  aspect-ratio: 1.48 / 1;
  display: block;
  object-fit: cover;
  transform: scale(1.015);
  animation: bastion-listing-photo-reveal 640ms cubic-bezier(.2,.7,.24,1) both;
}
#app .listing-hero-visual .guide-photo-credit {
  min-height: 34px;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 7px 11px;
  background: var(--b9-panel);
  border-top: 1px solid var(--b9-line);
  font-size: .68rem;
  line-height: 1.35;
}
#app .listing-hero-visual .guide-photo-credit a { color: var(--b9-muted); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .listing-hero-visual .guide-photo-credit a:hover { color: var(--b9-ink); }
body[data-route="bonuses"] #app .bonus-directory-layout {
  grid-template-columns: minmax(0, 1.05fr) minmax(210px, .68fr) minmax(270px, .82fr);
  align-items: stretch;
}
body[data-route="bonuses"] #app .bonus-directory-copy h1 {
  font-family: var(--b9-type-editorial) !important;
  font-size: clamp(2.4rem, 4.3vw, 3.85rem);
  font-weight: 720;
  letter-spacing: -.045em;
  line-height: 1.02;
}
#app .bonus-deadline-visual {
  min-width: 0;
  align-self: stretch;
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-red);
  background: var(--b9-panel);
}
#app .bonus-deadline-visual .guide-visual { width: 100%; height: 100%; display: grid; grid-template-rows: minmax(0,1fr) auto; margin: 0; }
#app .bonus-deadline-visual .guide-visual img { width: 100%; min-height: 0; height: 100%; object-fit: cover; }
#app .bonus-deadline-visual .guide-photo-credit { min-height: 34px; margin: 0; padding: 7px 10px; background: var(--b9-panel); border-top: 1px solid var(--b9-line); font-size: .66rem; line-height: 1.35; }
#app .bonus-deadline-visual .guide-photo-credit a { color: var(--b9-muted); text-underline-offset: 3px; }
body[data-route="bonuses"] #app .bonus-deadline-card {
  grid-template-columns: minmax(0,1fr);
  align-content: start;
  gap: 12px;
}
body[data-route="bonuses"] #app .bonus-deadline-main { grid-column: auto; grid-row: auto; min-width: 0; }
body[data-route="bonuses"] #app .bonus-deadline-main time {
  width: fit-content;
  max-width: 100%;
  font-size: clamp(1.75rem, 2.25vw, 2.3rem);
  line-height: 1.04;
  white-space: nowrap;
}
body[data-route="bonuses"] #app .bonus-deadline-main strong {
  max-width: 34ch;
  font-family: var(--b9-type-interface);
  font-size: .78rem;
  letter-spacing: 0;
}
body[data-route="bonuses"] #app .bonus-deadline-foot {
  grid-column: auto;
  grid-row: auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  padding-top: 10px;
  border-top: 1px solid var(--b9-line);
  text-align: left;
}
body[data-route="bonuses"] #app .bonus-deadline-foot span { text-align: left; }
@media (max-width: 1160px) {
  body[data-route="bonuses"] #app .bonus-directory-layout { grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 20px; }
  body[data-route="bonuses"] #app .bonus-directory-copy { grid-column: 1; grid-row: 1; }
  body[data-route="bonuses"] #app .bonus-deadline-visual { grid-column: 2; grid-row: 1; min-height: 230px; }
  body[data-route="bonuses"] #app .bonus-deadline-card { grid-column: 1 / -1; }
}
@keyframes bastion-listing-photo-reveal {
  from { opacity: .72; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1.015); }
}

#app .casino-card,
#app .guide-card,
#app .province-market-row,
#app .home-offer-link,
#app .sports-column > a,
#app .match-guide-list > a {
  border-color: var(--b9-line);
  box-shadow: none;
}
#app .casino-card {
  transition: border-color .16s ease, background-color .16s ease;
}
#app .casino-card:hover { border-color: color-mix(in srgb, var(--b9-red) 56%, var(--b9-line)); }
#app .casino-card :is(.operator-offer-cell, .operator-facts-cell, .operator-action-cell) { min-width: 0; }
#app .casino-card .operator-payment-list { overflow-wrap: anywhere; }
#app .section + .section { border-top-color: var(--b9-line); }
#app .article-content {
  max-width: 76ch;
  color: var(--b9-ink);
  font-family: var(--b9-type-reading) !important;
  font-size: 1.08rem;
  line-height: 1.78;
}
#app .article-content :is(h2, h3) {
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial) !important;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.16;
  text-wrap: balance;
}
#app .article-content :is(a, .text-action) { text-underline-offset: 3px; text-decoration-thickness: 1px; }

#app :is(.filters, .filters-rich, .operator-directory-filters, .operator-filter-shell) {
  color: var(--b9-ink);
  background: var(--b9-panel);
  border-color: var(--b9-line);
}
#app :is(.input-control, .select-control, input[type="search"], textarea) {
  min-width: 0;
  color: var(--b9-ink);
  background-color: var(--b9-panel);
  border-color: var(--b9-line);
  border-radius: 2px;
}
#app :is(.input-control, .select-control, input[type="search"], textarea)::placeholder { color: var(--b9-muted); opacity: .9; }
#app :is(.btn, .icon-button, .menu-toggle, .saved-header-button, [data-search-open]) { border-radius: 2px; }
#app .btn { min-height: 44px; font-weight: 680; }
#app .btn-primary { color: #fff; background: var(--b9-red); border-color: var(--b9-red); }
#app .btn-primary:hover { background: #b71f2b; border-color: #b71f2b; }
#app :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--b9-focus);
  outline-offset: 3px;
}
#app .table-scroll,
#app .responsive-table,
#app .comparison-scroll,
#app .home-comparison-wrap { max-width: 100%; overscroll-behavior-inline: contain; }
#app table { border-color: var(--b9-line); }
#app :is(th, td) { border-color: var(--b9-line); }

#app .mobile-utility-rail a[aria-current="page"] { color: var(--b9-ink); }
#app .mobile-utility-rail a[aria-current="page"]::before { background: var(--b9-red); }
#app .mobile-panel .mobile-search-link {
  min-height: 50px;
  padding-inline: 10px;
  color: var(--b9-ink);
  background: color-mix(in srgb, var(--b9-red) 7%, var(--b9-panel));
  border-left: 2px solid var(--b9-red);
}
#app .mobile-panel .mobile-search-link .ui-icon { flex: 0 0 18px; }
#app .mobile-panel .mobile-search-link > span { font-weight: 700; }

@media (max-width: 980px) {
  #app .listing-hero .listing-hero-layout { grid-template-columns: minmax(0,1fr) minmax(260px,.72fr); gap: 24px; }
  #app .listing-hero.has-listing-visual { padding-block: 30px; }
  #app .listing-hero :is(h1, .lead) { max-width: 100%; }
}
@media (max-width: 760px) {
  #app #main-content :is(.page-header h1, .page-header-photo h1,
    .reference-hero h1, .guide-article-hero h1, .review-hero h1, .sports-hub-hero h1, .province-hero h1) {
    max-width: 17ch;
    font-size: clamp(2.08rem, 9vw, 3.1rem);
    line-height: 1.04;
  }
  #app #main-content .section-heading { align-items: start; gap: 11px; }
  #app .listing-hero .listing-hero-layout { grid-template-columns: minmax(0,1fr); gap: 18px; }
  #app .listing-hero.has-listing-visual { padding-block: 23px; }
  #app .listing-hero-visual { width: min(100%, 560px); }
  #app .listing-hero-visual .guide-visual img { aspect-ratio: 1.7 / 1; }
  body[data-route="bonuses"] #app .bonus-directory-layout { grid-template-columns: minmax(0,1fr); }
  body[data-route="bonuses"] #app .bonus-directory-copy,
  body[data-route="bonuses"] #app .bonus-deadline-visual,
  body[data-route="bonuses"] #app .bonus-deadline-card { grid-column: 1; grid-row: auto; }
  body[data-route="bonuses"] #app .bonus-deadline-visual { min-height: 190px; }
  body[data-route="bonuses"] #app .bonus-deadline-visual .guide-visual img { aspect-ratio: 1.65 / 1; }
  body[data-route="bonuses"] #app .bonus-deadline-main time { font-size: clamp(1.8rem, 7vw, 2.25rem); }
  body[data-route="bonuses"] #app .bonus-deadline-foot { justify-content: space-between; }
  #app .article-content { font-size: 1.03rem; line-height: 1.74; }
  #app .article-content :is(h2, h3) { line-height: 1.2; }
}
@media (max-width: 380px) {
  #app .listing-hero-kicker { max-width: 100%; font-size: .65rem; }
  #app .listing-hero-visual .guide-photo-credit { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  #app *, #compare-root *, .quick-search-dialog {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  #app .listing-hero-visual .guide-visual img { animation: none !important; transform: none; }
}

/* Evidence cards follow the active theme and read as a report status, not a missing score badge. */
#app .review-title-row .score-card {
  box-sizing: border-box;
  width: min(100%, 286px);
  min-width: 0;
  min-height: 0;
  align-self: center;
  justify-self: end;
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 15px 17px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--b9-muted);
  border-radius: 0;
  box-shadow: none;
  text-align: left;
}
#app .review-title-row .score-card:not(:has(.score-unpublished)) { border-top-color: var(--b9-yellow); }
#app .review-title-row .score-card:not(:has(.score-unpublished)) {
  grid-template-columns: auto auto minmax(0,1fr);
  align-items: baseline;
  gap: 2px 5px;
}
#app .review-title-row .score-card:not(:has(.score-unpublished)) > strong { color: var(--b9-ink); font: 700 2rem/1 var(--b9-type-interface); font-variant-numeric: tabular-nums; }
#app .review-title-row .score-card:not(:has(.score-unpublished)) > span { color: var(--b9-muted); font-size: .78rem; }
#app .review-title-row .score-card:not(:has(.score-unpublished)) > small { grid-column: 1 / -1; }
#app .review-title-row .score-card .score-unpublished {
  color: var(--b9-ink);
  font: 700 .92rem/1.2 var(--b9-type-interface);
  letter-spacing: -.012em;
}
#app .review-title-row .score-card small { margin: 0; color: var(--b9-muted); font-size: .74rem; line-height: 1.45; }
#app .review-title-row .score-card .score-status-link {
  width: fit-content;
  min-height: 32px;
  justify-content: flex-start;
  margin: 0;
  color: var(--b9-ink);
  font-size: .72rem;
  text-underline-offset: 3px;
}
@media (max-width: 760px) {
  body[data-route="reviews"] #app .review-title-row .score-card {
    width: 100%;
    justify-self: stretch;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 3px 12px;
    padding: 10px 12px;
    border: 1px solid var(--b9-line);
    border-left: 3px solid var(--b9-muted);
    border-top-color: var(--b9-line);
    background: var(--b9-panel);
  }
  body[data-route="reviews"] #app .review-title-row .score-card:not(:has(.score-unpublished)) { border-left-color: var(--b9-yellow); }
  body[data-route="reviews"] #app .review-title-row .score-card .score-unpublished { color: var(--b9-ink); }
  body[data-route="reviews"] #app .review-title-row .score-card small { grid-column: 1; grid-row: 2; color: var(--b9-muted); text-align: left; }
  body[data-route="reviews"] #app .review-title-row .score-card .score-status-link {
    grid-column: 2;
    grid-row: 1 / 3;
    color: var(--b9-ink);
    white-space: normal;
  }
}

/* Format icons and offer markers move only on a real selection or in the active Offers state. */
#app .casino-game-tab .casino-category-glyph {
  color: currentColor;
  transform-origin: 50% 75%;
  transition: color .16s ease;
}
#app .casino-game-tab[aria-selected="true"] .casino-category-glyph { color: var(--b9-red); }
#app .mobile-utility-rail [data-offer-nav] .gift-lid { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bastion-format-selection {
  0% { opacity: .55; transform: translateY(3px) rotate(-3deg); }
  62% { opacity: 1; transform: translateY(-1px) rotate(1deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes bastion-offer-tab-open {
  0%, 100% { transform: none; }
  40% { transform: translateY(-2px) rotate(-10deg); }
  72% { transform: translateY(0) rotate(4deg); }
}
@media (prefers-reduced-motion: no-preference) {
  #app .casino-game-tab[aria-selected="true"] .casino-category-glyph { animation: bastion-format-selection 300ms cubic-bezier(.2,.7,.24,1) both; }
  body[data-route="bonuses"] #app .mobile-utility-rail [data-offer-nav] .gift-lid { animation: bastion-offer-tab-open 540ms cubic-bezier(.2,.7,.24,1) 120ms both; }
}
@media (prefers-reduced-motion: reduce) {
  #app .casino-game-tab .casino-category-glyph,
  #app .mobile-utility-rail [data-offer-nav] .gift-lid { animation: none !important; transition: none !important; transform: none !important; }
}

/* The guide desk puts one sourced story ahead of its controls and long index. */
body[data-route="guides"] #app .page-header {
  padding-block: clamp(24px, 3.2vw, 42px);
}

body[data-route="guides"] #app .guide-index-section {
  padding-top: clamp(16px, 2vw, 24px);
}

body[data-route="guides"] #app .guide-featured-section {
  margin: 0 0 26px;
}

body[data-route="guides"] #app .guide-featured-art {
  min-height: clamp(270px, 29vw, 360px);
}

body[data-route="guides"] #app .guide-featured-art .guide-photo {
  height: 100%;
  min-height: inherit;
}

body[data-route="guides"] #app .guide-featured-art .guide-photo img {
  object-position: 68% center;
}

body[data-route="guides"] #app .guide-index-tools {
  margin-bottom: 30px;
}

/* On desktop the gift shortcut stays compact until a reader asks for its offer. */
@media (min-width: 761px) {
  #app .bonus-hotspot {
    box-sizing: border-box;
    width: 62px;
    min-width: 62px;
    min-height: 62px;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 4px;
    transition: width .18s ease, background-color .16s ease, border-color .16s ease;
  }

  #app .bonus-hotspot-mark {
    position: relative;
    width: 100%;
    height: 100%;
    grid-template-rows: 1fr auto;
    justify-items: center;
    gap: 1px;
    border: 0;
  }

  #app .bonus-hotspot-label {
    display: block;
    color: var(--b9-muted);
    font: 650 .55rem/1.1 var(--b9-type-interface);
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  #app .bonus-hotspot-count {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    padding-inline: 3px;
    color: #fff;
    background: var(--b9-red);
    border: 1px solid var(--b9-panel);
    border-radius: 2px;
    font-size: .62rem;
    font-variant-numeric: tabular-nums;
  }

  #app .bonus-hotspot-copy,
  #app .bonus-hotspot-arrow {
    display: none;
  }

  @media (hover: hover) {
    #app .bonus-hotspot:is(:hover, :focus-visible) {
      width: min(296px, calc(100vw - 36px));
      min-height: 62px;
      grid-template-columns: 34px minmax(0, 1fr) 16px;
      gap: 10px;
      padding: 9px 12px 9px 9px;
    }

    #app .bonus-hotspot:is(:hover, :focus-visible) .bonus-hotspot-mark {
      width: 34px;
      height: 34px;
      grid-template-rows: 1fr;
      border-right: 1px solid var(--b9-line);
    }

    #app .bonus-hotspot:is(:hover, :focus-visible) .bonus-hotspot-label,
    #app .bonus-hotspot:is(:hover, :focus-visible) .bonus-hotspot-count {
      display: none;
    }

    #app .bonus-hotspot:is(:hover, :focus-visible) .bonus-hotspot-copy { display: grid; }
    #app .bonus-hotspot:is(:hover, :focus-visible) .bonus-hotspot-arrow { display: grid; }
  }
}

@media (max-width: 760px) {
  body[data-route="guides"] #app .page-header {
    padding-block: 22px;
  }

  body[data-route="guides"] #app .guide-index-section {
    padding-top: 12px;
  }

  body[data-route="guides"] #app .guide-featured-section {
    margin-bottom: 22px;
  }

  body[data-route="guides"] #app .guide-featured-art,
  body[data-route="guides"] #app .guide-featured-art .guide-photo {
    min-height: 210px;
    height: 210px;
  }

  body[data-route="guides"] #app .guide-index-tools {
    margin-bottom: 24px;
  }
}

/* Keep the bottom navigation reachable while an operator or offer comparison is staged. */
@media (max-width: 820px) {
  #compare-root .compare-dock,
  #compare-root .offer-compare-dock {
    bottom: calc(78px + env(safe-area-inset-bottom));
  }
  #compare-root.has-operator-compare .compare-dock,
  #compare-root.has-operator-compare .offer-compare-dock {
    bottom: calc(212px + env(safe-area-inset-bottom));
  }
}

/* Bastion market desk: product routes, then source-listed game categories. */
#app .listing-hero.has-listing-visual .listing-hero-layout { align-items: start; }

#app .front-intent-links {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 760px;
}

#app .operator-product-quicknav {
  display: flex;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-color: var(--b9-muted) var(--b9-paper);
  border: 1px solid var(--b9-line);
  background: var(--b9-paper);
  -webkit-overflow-scrolling: touch;
}

#app .operator-product-quicknav a {
  position: relative;
  display: flex;
  min-width: max-content;
  min-height: 48px;
  flex: 1 0 auto;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 14px;
  color: var(--b9-muted);
  border-right: 1px solid var(--b9-line);
  font-size: .76rem;
  font-weight: 680;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}

#app .operator-product-quicknav a:last-child { border-right: 0; }
#app .operator-product-quicknav a:hover { color: var(--b9-ink); background: var(--b9-panel-raised); }
#app .operator-product-quicknav a[aria-current="page"] { color: var(--b9-ink); background: var(--b9-panel); box-shadow: inset 0 -2px var(--b9-red); }
#app .operator-product-quicknav b { color: var(--b9-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .73rem; font-variant-numeric: tabular-nums; }
#app .operator-product-quicknav a:focus-visible { z-index: 1; outline: 2px solid var(--b9-red); outline-offset: -3px; }

#app .operator-format-index {
  padding-block: 25px 30px;
  border-block: 1px solid var(--b9-line);
  background: var(--b9-panel-raised);
}

#app .operator-format-index-heading { max-width: 760px; margin-bottom: 17px; }
#app .operator-format-index-heading h2 { max-width: 27ch; margin: 0 0 7px; font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.08; }
#app .operator-format-index-heading p:last-child { max-width: 74ch; margin: 0; color: var(--b9-muted); font-size: .83rem; line-height: 1.55; }
#app .operator-format-index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; border: 1px solid var(--b9-line); background: var(--b9-line); }
#app .operator-format-index-grid > a { display: grid; min-width: 0; min-height: 112px; grid-template-rows: auto 1fr auto; gap: 8px; padding: 11px 12px 10px; color: var(--b9-ink); background: var(--b9-paper); text-decoration: none; transition: background-color .16s ease; }
#app .operator-format-index-grid > a:hover,
#app .operator-format-index-grid > a[aria-current="page"] { background: var(--b9-panel); }
#app .operator-format-index-number { color: var(--b9-red); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .68rem; font-variant-numeric: tabular-nums; }
#app .operator-format-index-grid strong { align-self: end; overflow-wrap: anywhere; font-family: var(--b9-type-editorial); font-size: 1.02rem; font-weight: 670; line-height: 1.16; }
#app .operator-format-index-count { color: var(--b9-muted); font-size: .71rem; }
#app .operator-format-index-action { display: none; }
#app .operator-format-index-grid > a:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--b9-red); outline-offset: -3px; }

/* Put the working directory controls beside the editorial context, above the fold. */
body[data-route="best"] #app .listing-hero .operator-product-quicknav { margin-top: 18px; }
body[data-route="best"] #app .listing-hero .operator-filter-shell {
  margin-top: 11px;
  padding: 0;
  color: var(--b9-ink);
  border: 0;
  background: transparent;
}
body[data-route="best"] #app .listing-hero .operator-filter-shell > .container {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}
body[data-route="best"] #app .listing-hero .operator-directory-filters {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 11px;
  margin: 0;
  padding: 12px;
  border-top: 2px solid var(--b9-line);
  background: var(--b9-panel);
}
body[data-route="best"] #app .listing-hero .operator-directory-search { grid-column: 1 / -1; }
body[data-route="best"] #app .listing-hero .operator-directory-filters :is(input, select) { min-height: 44px; }
body[data-route="best"] #app .listing-hero .operator-directory-filter-status {
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding-top: 8px;
  border-top: 1px solid var(--b9-line);
}
body[data-route="best"] #app .listing-hero .operator-directory-filter-status .filter-count { margin-right: auto; }
body[data-route="best"] #app .listing-hero .operator-directory-filter-status > a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--b9-ink);
  font-size: .75rem;
  font-weight: 700;
  text-underline-offset: 3px;
}
body[data-route="best"] #app .listing-hero .operator-directory-filter-status .btn { min-height: 44px; padding-inline: 9px; }

#app .operator-results-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--b9-line);
}
#app .operator-results-heading .eyebrow { margin: 0 0 5px; color: var(--b9-muted); }
#app .operator-results-heading h2 {
  margin: 0;
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial);
  font-size: clamp(1.55rem, 2.5vw, 2.15rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.08;
}
#app .operator-results-heading > span {
  flex: 0 0 auto;
  color: var(--b9-muted);
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  body[data-route="best"] #app .listing-hero .operator-directory-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="best"] #app .listing-hero .operator-directory-filter-status { align-items: center; }
  body[data-route="best"] #app .listing-hero .operator-directory-filter-status .btn { width: auto; }
  #app .operator-results-heading { align-items: flex-start; }
}
@media (max-width: 460px) {
  body[data-route="best"] #app .listing-hero .operator-directory-filters { grid-template-columns: minmax(0, 1fr); }
  body[data-route="best"] #app .listing-hero .operator-directory-filters > label { grid-column: 1; }
  body[data-route="best"] #app .listing-hero .operator-directory-filters > .operator-directory-search { grid-column: 1; }
  body[data-route="best"] #app .listing-hero .operator-directory-filter-status .btn { width: 100%; }
  #app .operator-results-heading { gap: 10px; }
  #app .operator-results-heading > span { max-width: 9ch; text-align: right; }
}

/* Sports desk: one real Canadian hockey photograph, source-led copy, no faux live-score art. */
body[data-route="sports"] #app .sports-hub-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  align-items: stretch;
  min-height: 0;
  overflow: hidden;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border-bottom: 1px solid var(--b9-line);
}
body[data-route="sports"] #app .sports-hub-hero::after { display: none !important; content: none !important; }
body[data-route="sports"] #app .sports-hub-photo {
  position: relative;
  inset: auto;
  grid-column: 2;
  grid-row: 1;
  display: block !important;
  min-width: 0;
  min-height: 500px;
  margin: 0;
  overflow: hidden;
  background: var(--b9-panel-raised);
}
body[data-route="sports"] #app .sports-hub-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.86) contrast(1.03) brightness(.91);
}
body[data-route="sports"] #app .sports-hub-photo::after {
  position: absolute;
  inset: auto 0 0;
  height: 68px;
  background: linear-gradient(0deg, rgb(8 10 12 / 66%), transparent);
  content: "";
}
body[data-route="sports"] #app .sports-hub-photo figcaption {
  right: 14px;
  bottom: 10px;
  left: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  color: #f4f2ed;
  font-size: .66rem;
}
body[data-route="sports"] #app .sports-hub-hero-grid {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 23px;
  margin: 0;
  padding: clamp(32px, 4.8vw, 72px) clamp(22px, 3.5vw, 54px) clamp(26px, 3.8vw, 54px) max(24px, calc((100vw - 1320px) / 2 + 24px));
  color: var(--b9-ink);
}
body[data-route="sports"] #app .sports-hub-hero-copy { min-width: 0; }
body[data-route="sports"] #app .sports-hub-hero-copy > .reference-kicker { margin: 0 0 14px; color: var(--b9-red) !important; }
body[data-route="sports"] #app .sports-hub-hero-copy > h1 {
  max-width: 13ch;
  margin: 0 0 15px;
  color: var(--b9-ink) !important;
  font-family: var(--b14-display);
  font-size: clamp(2.5rem, 4.35vw, 4.15rem);
  font-weight: 660;
  letter-spacing: -.045em;
  line-height: .98;
}
body[data-route="sports"] #app .sports-hub-hero-copy > p:not(.reference-kicker) {
  max-width: 53ch;
  margin: 0;
  color: var(--b9-muted) !important;
  font-size: .98rem;
  line-height: 1.55;
}
body[data-route="sports"] #app .sports-hub-hero .hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
body[data-route="sports"] #app .sports-hub-hero .hero-actions .btn { min-height: 45px; }
body[data-route="sports"] #app .sports-scoreboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  border-radius: 0;
  box-shadow: none;
}
body[data-route="sports"] #app .sports-scoreboard > div {
  min-width: 0;
  min-height: 64px;
  align-content: center;
  gap: 5px;
  padding: 10px 12px;
  border-right: 1px solid var(--b9-line);
  border-bottom: 1px solid var(--b9-line);
}
body[data-route="sports"] #app .sports-scoreboard > div:nth-child(2n) { border-right: 0; }
body[data-route="sports"] #app .sports-scoreboard > div:nth-last-child(-n+2) { border-bottom: 0; }
body[data-route="sports"] #app .sports-scoreboard span { color: var(--b9-muted); font-size: .62rem; letter-spacing: .055em; text-transform: uppercase; }
body[data-route="sports"] #app .sports-scoreboard strong { color: var(--b9-ink); font-size: .82rem; line-height: 1.28; text-align: left; }

body[data-route="sports"] #app .sports-match-desk { background: var(--b9-paper); }
body[data-route="sports"] #app .league-command-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--b9-line); }
body[data-route="sports"] #app .league-command-card {
  min-width: 0;
  min-height: 166px;
  justify-content: flex-start;
  gap: 0;
  padding: 15px 14px 11px;
  border: 0;
  border-right: 1px solid var(--b9-line);
  border-radius: 0;
  background: var(--b9-panel);
  text-decoration: none;
}
body[data-route="sports"] #app .league-command-card:last-child { border-right: 0; }
body[data-route="sports"] #app .league-command-card:is(:hover, :focus-visible) { background: var(--b9-panel-raised); }
body[data-route="sports"] #app .league-command-card.is-selected { box-shadow: inset 0 3px 0 var(--b9-red); background: var(--b9-panel-raised); }
body[data-route="sports"] #app .league-command-card .league-command-code { color: var(--b9-red) !important; font: 760 1.62rem/1 var(--b9-type-interface); letter-spacing: -.055em; }
body[data-route="sports"] #app .league-command-card > strong { max-width: none; margin: 15px 0 5px; padding: 0; color: var(--b9-ink); font: 650 1.05rem/1.18 var(--b9-type-interface); }
body[data-route="sports"] #app .league-command-card .league-command-context { max-width: none; margin: 0 0 8px; color: var(--b9-muted); font-size: .68rem; font-weight: 540; line-height: 1.35; letter-spacing: 0; }
body[data-route="sports"] #app .league-command-card .league-command-action { min-height: 34px; width: 100%; justify-content: space-between; gap: 8px; margin: 0; padding-top: 7px; border-top: 1px solid var(--b9-line); color: var(--b9-ink); font-size: .69rem; }
body[data-route="sports"] #app .league-command-card .league-command-action i { color: var(--b9-red); font-size: .88rem; font-style: normal; }

body[data-route="sports"] #app .sports-league-panels { margin-top: 0; }
body[data-route="sports"] #app .sports-league-panel {
  grid-template-columns: minmax(0, 1fr) minmax(124px, .24fr);
  gap: 22px;
  padding: clamp(18px, 2.3vw, 28px);
  border-top: 0;
  border-radius: 0;
  background: var(--b9-panel);
}
body[data-route="sports"] #app .sports-league-panel-copy > .eyebrow { margin-top: 15px; }
body[data-route="sports"] #app .sports-league-panel-copy > h3 { max-width: 42ch; font-family: var(--b14-display); font-weight: 650; }
body[data-route="sports"] #app .sports-league-panel-summary { max-width: 68ch; font-size: .92rem; line-height: 1.58; }
body[data-route="sports"] #app .sports-league-panel-count { align-self: center; min-height: 84px; align-content: center; }
body[data-route="sports"] #app .sports-league-panel-count strong { color: var(--b9-red); font-family: var(--b9-type-interface); font-size: 2.4rem; font-weight: 700; }
body[data-route="sports"] #app .sports-league-panel-count span { font-size: .7rem; }
body[data-route="sports"] #app .sports-league-panel.is-entering .sports-league-panel-copy { animation: bastion-sports-copy-in .2s ease both; }
@keyframes bastion-sports-copy-in { from { opacity: .62; transform: translateY(4px); } to { opacity: 1; transform: none; } }

body[data-route="sports"] #app .match-command-search { gap: 8px; margin-top: 18px; padding: 16px 0 0; border: 0; border-top: 1px solid var(--b9-line); border-radius: 0; background: transparent; }
body[data-route="sports"] #app .match-command-search > label { color: var(--b9-ink); font-size: .86rem; font-weight: 680; }
body[data-route="sports"] #app .match-command-search > small { color: var(--b9-muted); font-size: .72rem; line-height: 1.45; }
body[data-route="sports"] #app .sports-topic-panel { min-height: 0; border-radius: 0; background: var(--b9-panel); }
body[data-route="sports"] #app .sports-topic-content { padding: clamp(18px, 2.6vw, 28px); }
body[data-route="sports"] #app .sports-topic-content h2 { max-width: 22ch; margin: 7px 0 18px; font-family: var(--b14-display); font-size: clamp(1.45rem, 2.5vw, 2.2rem); font-weight: 660; line-height: 1.04; }
body[data-route="sports"] #app .sports-guide-list { border-top: 1px solid var(--b9-line); }
body[data-route="sports"] #app .sports-guide-list a { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 12px 0; }
body[data-route="sports"] #app .sports-guide-list a > span { grid-column: 1; color: var(--b9-red); font-size: .64rem; font-weight: 680; letter-spacing: .025em; text-transform: none; }
body[data-route="sports"] #app .sports-guide-list a > strong { grid-column: 1; color: var(--b9-ink); font-size: .9rem; line-height: 1.35; }
body[data-route="sports"] #app .sports-guide-list a > small { grid-column: 1; color: var(--b9-muted); font-size: .66rem; }
body[data-route="sports"] #app .sports-guide-list a:hover > strong { color: var(--b9-red); }

@media (max-width: 1040px) {
  body[data-route="sports"] #app .sports-hub-hero { grid-template-columns: minmax(0, 1fr); }
  body[data-route="sports"] #app .sports-hub-hero-grid { grid-column: 1; grid-row: 1; padding-inline: max(24px, calc((100vw - 860px) / 2 + 24px)); }
  body[data-route="sports"] #app .sports-hub-photo { grid-column: 1; grid-row: 2; min-height: clamp(260px, 44vw, 420px); }
  body[data-route="sports"] #app .sports-hub-hero-copy > h1 { max-width: 18ch; }
}
@media (max-width: 760px) {
  body[data-route="sports"] #app .sports-hub-hero { display: flex; flex-direction: column; }
  body[data-route="sports"] #app .sports-hub-photo { order: 0; min-height: 218px; height: 218px; }
  body[data-route="sports"] #app .sports-hub-photo img { object-position: center 46%; filter: saturate(.9) contrast(1.02) brightness(.96); }
  body[data-route="sports"] #app .sports-hub-hero-grid { order: 1; width: 100%; gap: 18px; padding: 22px 16px 18px; }
  body[data-route="sports"] #app .sports-hub-hero-copy > .reference-kicker { margin-bottom: 10px; font-size: .67rem; }
  body[data-route="sports"] #app .sports-hub-hero-copy > h1 { max-width: 15ch; margin-bottom: 11px; font-size: clamp(2.1rem, 9vw, 2.9rem); line-height: 1.01; }
  body[data-route="sports"] #app .sports-hub-hero-copy > p:not(.reference-kicker) { font-size: .92rem; }
  body[data-route="sports"] #app .sports-hub-hero .hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 14px; }
  body[data-route="sports"] #app .sports-scoreboard > div { min-height: 60px; padding: 9px 10px; }
  body[data-route="sports"] #app .league-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="sports"] #app .league-command-card { min-height: 142px; padding: 13px 11px 9px; border-bottom: 1px solid var(--b9-line); }
  body[data-route="sports"] #app .league-command-card:nth-child(2n) { border-right: 0; }
  body[data-route="sports"] #app .league-command-card .league-command-code { font-size: 1.43rem; }
  body[data-route="sports"] #app .league-command-card > strong { margin-top: 13px; font-size: .94rem; }
  body[data-route="sports"] #app .league-command-card .league-command-context { font-size: .63rem; }
  body[data-route="sports"] #app .sports-league-panel { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 15px; }
  body[data-route="sports"] #app .sports-league-panel-count { min-height: 0; display: flex; grid-column: 1; align-items: baseline; gap: 9px; padding: 11px 0 0; border-top: 1px solid var(--b9-line); border-left: 0; }
  body[data-route="sports"] #app .sports-league-panel-count strong { font-size: 1.75rem; }
  body[data-route="sports"] #app .sports-topic-grid { grid-template-columns: minmax(0, 1fr); }
  body[data-route="sports"] #app .sports-topic-content { padding: 17px; }
  body[data-route="sports"] #app .sports-editorial-grid { padding-top: 10px; }
}
@media (max-width: 380px) {
  body[data-route="sports"] #app .sports-hub-photo { min-height: 188px; height: 188px; }
  body[data-route="sports"] #app .sports-hub-hero-grid { padding-inline: 13px; }
  body[data-route="sports"] #app .sports-hub-hero-copy > h1 { font-size: 2rem; }
  body[data-route="sports"] #app .sports-scoreboard > div { padding-inline: 8px; }
  body[data-route="sports"] #app .sports-scoreboard strong { font-size: .74rem; }
  body[data-route="sports"] #app .league-command-card { min-height: 134px; padding: 11px 9px 8px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="sports"] #app .sports-league-panel.is-entering .sports-league-panel-copy { animation: none; }
}

/* The league index is a paper research sheet with four sport-specific drawings. */
body[data-route="sports"] #app .sports-match-desk,
body[data-route="sports"] #app .sports-editorial-grid {
  color: #191d20;
  background: #ecebe6;
  --sports-paper: #ecebe6;
  --sports-card: #faf9f5;
  --sports-ink: #191d20;
  --sports-muted: #626b70;
  --sports-rule: #c8cdcd;
  --sports-red: #c9363e;
}
body[data-route="sports"] #app .sports-match-desk .section-heading :is(.eyebrow, h2, p),
body[data-route="sports"] #app .sports-editorial-grid .sports-topic-content :is(.eyebrow, h2) { color: var(--sports-ink); }
body[data-route="sports"] #app #main-content .sports-match-desk .section-heading h2,
body[data-route="sports"] #app #main-content .sports-editorial-grid .section-heading h2 { color: var(--sports-ink) !important; }
body[data-route="sports"] #app .sports-match-desk .section-heading .eyebrow,
body[data-route="sports"] #app .sports-editorial-grid .sports-topic-content .eyebrow { color: var(--sports-red); }
body[data-route="sports"] #app .sports-match-desk .section-heading p { color: var(--sports-muted); }
body[data-route="sports"] #app .canada-coverage-badge {
  color: var(--sports-ink);
  background: var(--sports-card);
  border-color: var(--sports-rule);
  border-radius: 2px;
}
body[data-route="sports"] #app .league-command-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  border: 0;
}
body[data-route="sports"] #app .league-command-card {
  position: relative;
  isolation: isolate;
  min-height: 220px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  padding: 15px 16px 11px;
  color: var(--sports-ink);
  background: var(--sports-card);
  border: 1px solid var(--sports-rule);
  border-top: 2px solid var(--sports-rule);
  border-radius: 2px;
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
body[data-route="sports"] #app .league-command-card .league-command-photo {
  position: absolute;
  z-index: 0;
  inset: 0 0 43px auto;
  width: 54%;
  overflow: hidden;
  opacity: .68;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 35%);
  transition: opacity .35s ease;
}
body[data-route="sports"] #app .league-command-photo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(.72) contrast(1.04);
  transform: scale(1.015);
  transition: filter .42s ease, transform .52s cubic-bezier(.2,.72,.25,1);
}
body[data-route="sports"] #app [data-sports-league-tab="nhl"] .league-command-photo img { object-position: 71% 44%; }
body[data-route="sports"] #app [data-sports-league-tab="iihf"] .league-command-photo img { object-position: 47% 42%; }
body[data-route="sports"] #app [data-sports-league-tab="mls"] .league-command-photo img { object-position: 48% 48%; }
body[data-route="sports"] #app [data-sports-league-tab="cfl"] .league-command-photo img { object-position: 48% 46%; }
body[data-route="sports"] #app .league-command-card .league-command-index,
body[data-route="sports"] #app .league-command-card .league-command-code,
body[data-route="sports"] #app .league-command-card > strong,
body[data-route="sports"] #app .league-command-card .league-command-context,
body[data-route="sports"] #app .league-command-card .league-command-action { z-index: 1; }
body[data-route="sports"] #app .league-command-card .league-command-index { color: var(--sports-muted); }
body[data-route="sports"] #app .league-command-card .league-command-index > span:first-child { color: var(--sports-red); }
body[data-route="sports"] #app .league-command-card .league-command-index > span:last-child {
  position: relative;
  padding: 3px 6px;
  background: var(--sports-card);
}
body[data-route="sports"] #app .league-command-card .league-command-code {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin-top: 22px;
  padding: 0;
  color: var(--sports-ink);
  border: 0;
  font: 650 clamp(2.45rem, 4vw, 3.55rem)/.82 var(--b9-type-editorial);
  letter-spacing: -.065em;
}
body[data-route="sports"] #app .league-command-card > strong {
  position: relative;
  z-index: 1;
  max-width: 68%;
  margin: 9px 0 0;
  color: var(--sports-ink);
  font: 560 clamp(1rem, 1.4vw, 1.24rem)/1.12 var(--b9-type-interface);
}
body[data-route="sports"] #app .league-command-card .league-command-context {
  position: relative;
  z-index: 1;
  max-width: 64%;
  margin: 7px 0 0;
  color: var(--sports-muted);
  font-size: .68rem;
  font-weight: 520;
  line-height: 1.35;
  letter-spacing: 0;
}
body[data-route="sports"] #app .league-command-card .league-command-action {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 44px;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--sports-ink);
  border-top: 1px solid var(--sports-rule);
  font-size: .7rem;
}
body[data-route="sports"] #app .league-command-card .league-command-action i { color: var(--sports-red); font-size: .95rem; font-style: normal; transition: transform .16s ease; }
body[data-route="sports"] #app .league-command-card:is(:hover, :focus-visible, .is-selected) {
  color: var(--sports-ink);
  background: #fffefa;
  border-color: var(--sports-red);
}
body[data-route="sports"] #app .league-command-card.is-selected { border-color: var(--sports-red); }
body[data-route="sports"] #app .league-command-card:is(:hover, :focus-visible, .is-selected) .league-command-photo { opacity: .96; }
body[data-route="sports"] #app .league-command-card:is(:hover, :focus-visible) .league-command-photo img { filter: saturate(.9) contrast(1.06); transform: scale(1.055); }
body[data-route="sports"] #app .league-command-card.is-selected .league-command-photo img { filter: saturate(.84) contrast(1.05); transform: scale(1.035); }
body[data-route="sports"] #app .league-command-card:is(:hover, :focus-visible) .league-command-action i { transform: translateX(3px); }
body[data-route="sports"] #app .league-photo-credits {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 5px 12px;
  margin: 8px 0 0;
  padding: 0 0 10px;
  color: var(--sports-muted);
  border-bottom: 1px solid var(--sports-rule);
  font-size: .72rem;
  line-height: 1.5;
}
body[data-route="sports"] #app .league-photo-credits > span:first-child { flex-basis: 100%; color: var(--sports-ink); font-weight: 680; }
body[data-route="sports"] #app .league-photo-credits a { color: inherit; text-decoration: underline; text-decoration-color: var(--sports-rule); text-underline-offset: 2px; }
body[data-route="sports"] #app .league-photo-credits a:hover { color: var(--sports-red); text-decoration-color: currentColor; }
body[data-route="sports"] #app .sports-league-panels { border: 1px solid var(--sports-rule); border-top: 0; }
body[data-route="sports"] #app .sports-league-panel { color: var(--sports-ink); background: var(--sports-card); }
body[data-route="sports"] #app .sports-league-panel-meta,
body[data-route="sports"] #app .sports-league-panel-summary,
body[data-route="sports"] #app .sports-league-panel-note,
body[data-route="sports"] #app .sports-league-panel-footer > span,
body[data-route="sports"] #app .sports-league-panel-count span { color: var(--sports-muted); }
body[data-route="sports"] #app .sports-league-panel-meta > span:first-child,
body[data-route="sports"] #app .sports-league-panel-copy > .eyebrow,
body[data-route="sports"] #app .sports-league-panel-count strong { color: var(--sports-red); }
body[data-route="sports"] #app .sports-league-panel-copy > h3 { color: var(--sports-ink); font-family: var(--b9-type-editorial); }
body[data-route="sports"] #app .sports-league-panel-guide-link,
body[data-route="sports"] #app .sports-league-guide-link { color: var(--sports-ink); }
body[data-route="sports"] #app .sports-league-panel-count { border-color: var(--sports-rule); }
body[data-route="sports"] #app .match-command-search {
  color: var(--sports-ink);
  border-color: var(--sports-rule);
}
body[data-route="sports"] #app .match-command-search > label { color: var(--sports-ink); }
body[data-route="sports"] #app .match-command-search > small { color: var(--sports-muted); }
body[data-route="sports"] #app .match-command-search input { color: var(--sports-ink); background: var(--sports-card); border-color: var(--sports-rule); }
body[data-route="sports"] #app .sports-topic-panel { color: var(--sports-ink); background: var(--sports-card); border-color: var(--sports-rule); }
body[data-route="sports"] #app .sports-topic-content h2 { color: var(--sports-ink); font-family: var(--b9-type-editorial); font-weight: 560; }
body[data-route="sports"] #app .sports-guide-list { border-color: var(--sports-rule); }
body[data-route="sports"] #app .sports-guide-list a { border-color: var(--sports-rule); }
body[data-route="sports"] #app .sports-guide-list a > span { color: var(--sports-red); }
body[data-route="sports"] #app .sports-guide-list a > strong { color: var(--sports-ink); }
body[data-route="sports"] #app .sports-guide-list a > small { color: var(--sports-muted); }
body[data-route="sports"] #app .sports-guide-list a:hover > strong { color: var(--sports-red); }
body[data-route="sports"] #app .sports-editorial-grid .ranking-list,
body[data-route="sports"] #app .sports-editorial-grid .spaced-heading h2 { color: var(--sports-ink); }
@media (max-width: 760px) {
  body[data-route="sports"] #app .league-command-grid { gap: 7px; }
  body[data-route="sports"] #app .league-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-route="sports"] #app .league-command-card { min-height: 210px; padding: 14px 13px 9px; border: 1px solid var(--sports-rule); border-top: 2px solid var(--sports-rule); }
  body[data-route="sports"] #app .league-command-card .league-command-photo { inset: 32px 0 auto auto; width: 55%; height: 68px; opacity: .74; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 54%); mask-image: linear-gradient(90deg, transparent 0%, #000 54%); }
  body[data-route="sports"] #app .league-command-card .league-command-code { margin-top: 19px; font-size: clamp(2.05rem, 10vw, 2.8rem); }
  body[data-route="sports"] #app .league-command-card > strong { max-width: 68%; margin: 8px 0 0; font-size: 1rem; }
  body[data-route="sports"] #app .league-command-card .league-command-context { width: 100%; max-width: none; margin-top: 8px; font-size: .63rem; }
  body[data-route="sports"] #app .league-command-card .league-command-action { min-height: 44px; font-size: .62rem; }
  body[data-route="sports"] #app .league-photo-credits { gap: 5px 10px; font-size: .7rem; }
  body[data-route="sports"] #app .sports-league-panels { border-inline: 0; }
  body[data-route="sports"] #app .sports-league-panel { padding: 15px 13px; }
}
@media (max-width: 380px) {
  body[data-route="sports"] #app .league-command-card { min-height: 196px; padding: 11px 9px 8px; }
  body[data-route="sports"] #app .league-command-card .league-command-index { font-size: .56rem; }
  body[data-route="sports"] #app .league-command-card .league-command-code { margin-top: 18px; font-size: 2rem; }
  body[data-route="sports"] #app .league-command-card .league-command-photo { top: 30px; height: 64px; }
  body[data-route="sports"] #app .league-command-card > strong { max-width: 68%; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="sports"] #app .league-command-card,
  body[data-route="sports"] #app .league-command-photo,
  body[data-route="sports"] #app .league-command-photo img,
  body[data-route="sports"] #app .league-command-card .league-command-action i { transition: none; }
}

@media (max-width: 760px) {
  /* Casino, Sports, Offers and Guides already have a fixed mobile rail. */
  #app .front-intent-links { display: none !important; }
  #app .operator-product-quicknav a { min-width: 132px; min-height: 48px; padding-inline: 11px; }
  #app .operator-format-index { padding-block: 21px 24px; }
  #app .operator-format-index-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .operator-format-index-grid > a { min-height: 98px; padding: 10px; }
  #app .operator-format-index-grid strong { font-size: .96rem; }
}

@media (prefers-reduced-motion: reduce) {
  #app .operator-product-quicknav a,
  #app .operator-format-index-grid > a { transition: none; }
}


/* Original operator marks retain contrast in profiles, saved desks and comparisons. */
#app .casino-logo-frame.has-brand-asset.requires-dark-surface { background: #15191c; border-color: #30363b; }
#app .casino-logo-frame.has-brand-asset.requires-light-surface { background: #fff; border-color: #d9dde1; }
#app .casino-logo-frame.has-brand-asset > img.casino-logo { background: transparent; padding: 3px; filter: none; }

/* The casino disclosure groups records, rules and studios without crowding the masthead. */
#app .casino-navigation { position: relative; color: var(--b9-ink); }
#app .casino-navigation > summary { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 8px; font: 650 14px/1.2 var(--b9-type-interface); cursor: pointer; list-style: none; border-bottom: 2px solid transparent; }
#app .casino-navigation > summary::-webkit-details-marker { display: none; }
#app .casino-navigation[data-active] > summary, #app .casino-navigation[open] > summary { border-bottom-color: var(--b9-red); }
#app .casino-navigation > summary:focus-visible { outline: 2px solid var(--b9-red); outline-offset: 3px; }
#app .casino-navigation-panel { position: absolute; z-index: 90; top: calc(100% + 8px); left: -8px; width: 330px; max-width: calc(100vw - 32px); border: 1px solid var(--b9-line); border-top: 3px solid var(--b9-red); border-radius: 3px; background: var(--b9-panel); box-shadow: 0 12px 24px #0003; }
#app .casino-navigation-panel > p { margin: 0; padding: 13px 16px; color: var(--b9-muted); font: 600 12px/1.4 var(--b9-type-interface); }
#app .primary-nav .casino-navigation-panel a { display: grid; grid-template-columns: minmax(0,1fr) 18px; gap: 5px 10px; min-height: 70px; padding: 12px 16px; border: 0; border-top: 1px solid var(--b9-line); color: var(--b9-ink); white-space: normal; text-decoration: none; }
#app .primary-nav .casino-navigation-panel a > strong { font: 700 16px/1.2 var(--b9-type-interface); }
#app .primary-nav .casino-navigation-panel a > small { grid-column: 1; color: var(--b9-muted); font: 400 13px/1.35 var(--b9-type-interface); }
#app .primary-nav .casino-navigation-panel a > span { grid-column: 2; grid-row: 1/3; align-self: center; color: var(--b9-red); }
#app .primary-nav .casino-navigation-panel a:hover { background: var(--b9-panel-raised); }
#app .mobile-casino-links { display: grid; border-block: 1px solid var(--b9-line); padding-block: 8px; }
#app .mobile-casino-links > span { padding: 8px 16px; color: var(--b9-muted); font: 600 12px/1.3 var(--b9-type-interface); }
#app .mobile-casino-links > a { min-height: 44px; }
@media (prefers-reduced-motion: reduce) { #app .casino-navigation-panel * { transition: none !important; animation: none !important; } }

#app .header-more { position: relative; }
#app .header-more > summary { display: inline-flex; align-items: center; justify-content: center; min-width: 48px; min-height: 44px; padding: 9px; list-style: none; cursor: pointer; border: 1px solid var(--b9-line); border-radius: 3px; color: var(--b9-ink); background: var(--b9-panel); font: 650 13px/1.2 var(--b9-type-interface); }
#app .header-more > summary::-webkit-details-marker { display: none; }
#app .header-more-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 90; min-width: 190px; border: 1px solid var(--b9-line); border-top: 3px solid var(--b9-red); border-radius: 3px; background: var(--b9-panel); box-shadow: 0 12px 24px #0003; }
#app .header-more-panel > :is(a,button) { display: flex; align-items: center; min-height: 48px; width: 100%; padding: 12px 16px; margin: 0; border: 0; border-bottom: 1px solid var(--b9-line); border-radius: 0; color: var(--b9-ink); background: transparent; font: 600 15px/1.3 var(--b9-type-interface); text-decoration: none; white-space: nowrap; cursor: pointer; }
#app .header-more-panel > :is(a,button):hover { background: var(--b9-panel-raised); }
#app .header-more :focus-visible { outline: 2px solid var(--b9-red); outline-offset: 2px; }
@media(max-width:1050px){#app .header-more { display: none; }}

/* Source: styles/quick-search.css */
/* Actual regional records, global game references and dated fixtures share one index. */
#app .quick-search-trigger { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; min-height: 44px; width: auto; padding-inline: 11px; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); border-radius: 3px; white-space: nowrap; cursor: pointer; }
#app .quick-search-trigger kbd { padding: 3px 5px; color: var(--b9-muted); background: transparent; border: 1px solid var(--b9-line); border-radius: 2px; font: 600 11px/1.2 var(--b9-type-interface); }
#app .quick-search-trigger .quick-search-trigger-icon { width: 17px; height: 17px; margin: 0; }
#app .primary-nav .nav-market-link { display: none; }
body[data-route="market"] #app .primary-nav .nav-market-link { display: inline-flex; }

.quick-search-dialog {
  --qs-bg: #f1f3f5;
  --qs-surface: #fff;
  --qs-raised: #f8f9fa;
  --qs-text: #171a1e;
  --qs-muted: #59636e;
  --qs-line: #d9dde1;
  --qs-red: #b9232d;
  position: fixed;
  inset: max(16px, 7vh) 0 auto;
  width: min(720px, calc(100vw - 32px));
  max-width: none;
  max-height: min(calc(var(--quick-search-viewport-height, 100dvh) - 48px), 780px);
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  color: var(--qs-text);
  background: var(--qs-surface);
  border: 1px solid var(--qs-line);
  border-radius: 5px;
  box-shadow: 0 24px 80px rgb(0 0 0 / 30%);
  font-family: var(--b9-type-interface, 'Bastion Sans', system-ui, sans-serif);
}
[data-theme="dark"] .quick-search-dialog { --qs-bg: #090b0d; --qs-surface: #111418; --qs-raised: #171b20; --qs-text: #f4f2ed; --qs-muted: #a7adb3; --qs-line: #2a3037; --qs-red: #f06a70; }
.quick-search-dialog::backdrop { background: rgb(5 7 10 / 68%); }
.quick-search-dialog[open] { animation: bastion-search-open 140ms ease-out; }
@keyframes bastion-search-open { from { opacity: .72; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.quick-search-frame { display: grid; max-height: inherit; grid-template-rows: auto auto auto auto minmax(0, 1fr) auto; }
.quick-search-dialog :is(button, input, a) { font-family: inherit; }
.quick-search-dialog :is(button, a, input):focus-visible { outline: 2px solid var(--qs-red); outline-offset: 2px; }
.quick-search-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 18px 9px; }
.quick-search-head h2 { margin: 0; color: var(--qs-text); font: 650 20px/1.3 var(--b9-type-interface, 'Bastion Sans', sans-serif); letter-spacing: -.025em; }
.quick-search-close,
.quick-search-clear { min-height: 44px; padding: 9px 11px; color: var(--qs-muted); background: transparent; border: 1px solid var(--qs-line); border-radius: 3px; font-size: 14px; font-weight: 600; cursor: pointer; }
.quick-search-close:hover,
.quick-search-clear:hover { color: var(--qs-text); border-color: var(--qs-muted); }
.quick-search-form { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 54px; margin: 0 18px 12px; padding: 0 4px 0 13px; color: var(--qs-text); background: var(--qs-bg); border: 1px solid var(--qs-line); border-radius: 3px; }
.quick-search-form:focus-within { border-color: var(--qs-red); box-shadow: 0 0 0 1px var(--qs-red); }
.quick-search-form input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 52px; padding: 0; color: var(--qs-text); background: transparent; border: 0; border-radius: 0; outline: 0; font-size: 17px; line-height: 1.35; }
.quick-search-form input:focus-visible { outline: 0; }
.quick-search-form input::placeholder { color: var(--qs-muted); opacity: 1; }
.quick-search-form input::-webkit-search-cancel-button { appearance: none; }
.quick-search-clear { flex: 0 0 auto; min-width: 44px; padding-inline: 10px; background: var(--qs-surface); }
.quick-search-clear[hidden] { display: none; }
.quick-search-filters { display: flex; gap: 0; min-width: 0; padding: 0 18px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--qs-line) transparent; border-bottom: 1px solid var(--qs-line); }
.quick-search-filter { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 7px; min-height: 44px; margin: 0; padding: 11px 12px; color: var(--qs-muted); background: transparent; border: 0; border-radius: 0; box-shadow: inset 0 -2px transparent; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.quick-search-filter:first-child { padding-left: 6px; }
.quick-search-filter[aria-pressed="true"] { color: var(--qs-text); box-shadow: inset 0 -2px var(--qs-red); }
.quick-search-filter:hover { color: var(--qs-text); background: var(--qs-raised); }
.quick-search-filter-count { color: var(--qs-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.quick-search-result-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 11px 18px 7px; }
.quick-search-status { min-width: 0; margin: 0; color: var(--qs-text); font-size: 13px; font-weight: 600; line-height: 1.4; }
.quick-search-visible-count { flex: 0 0 auto; color: var(--qs-muted); font-size: 12px; line-height: 1.4; }
.quick-search-results { min-height: 0; padding: 0 8px 8px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: var(--qs-line) transparent; }
.quick-search-option { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 13px; width: 100%; min-height: 72px; margin: 0; padding: 11px 10px; color: var(--qs-text); text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--qs-line); border-radius: 0; cursor: pointer; }
.quick-search-option:last-child { border-bottom: 0; }
.quick-search-option:hover { background: var(--qs-raised); }
.quick-search-option[aria-selected="true"] { background: var(--qs-raised); box-shadow: inset 2px 0 var(--qs-red); }
.quick-search-option-media { display: flex; align-items: center; justify-content: center; min-width: 0; height: 44px; overflow: hidden; }
.quick-search-option-media img { display: block; width: 44px; max-width: 100%; height: 40px; object-fit: contain; }
.quick-search-option-media.is-game img { width: 68px; height: 40px; object-fit: cover; border-radius: 2px; }
.quick-search-option-media.is-pair { gap: 1px; }
.quick-search-option-media.is-pair img { width: 32px; height: 34px; }
.quick-search-type { display: block; max-width: 100%; padding: 5px 6px; color: var(--qs-muted); border: 1px solid var(--qs-line); border-radius: 2px; font-size: 11px; font-weight: 600; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.quick-search-option-media.has-image .quick-search-type { display: none; }
.quick-search-option-copy { display: grid; min-width: 0; gap: 4px; }
.quick-search-option-copy strong { overflow: hidden; color: var(--qs-text); font-size: 16px; font-weight: 650; line-height: 1.35; text-overflow: ellipsis; }
.quick-search-option-copy small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--qs-muted); font-size: 14px; font-weight: 400; line-height: 1.4; overflow-wrap: anywhere; }
.quick-search-kind { color: var(--qs-text); font-size: 12px; font-weight: 600; }
.quick-search-empty { padding: 20px 10px 24px; color: var(--qs-muted); font-size: 16px; line-height: 1.5; }
.quick-search-empty p { margin: 0; }
.quick-search-empty button { min-height: 44px; margin-top: 12px; padding: 8px 11px; color: var(--qs-text); background: var(--qs-surface); border: 1px solid var(--qs-line); border-radius: 3px; font-size: 14px; font-weight: 600; cursor: pointer; }
.quick-search-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; padding: 10px 18px 13px; color: var(--qs-muted); background: var(--qs-raised); border-top: 1px solid var(--qs-line); }
.quick-search-full-results { display: inline-flex; align-items: center; justify-self: start; min-height: 44px; padding-block: 7px; color: var(--qs-text); font-size: 14px; font-weight: 650; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.quick-search-scope { grid-column: 1 / -1; margin: 0; color: var(--qs-muted); font-size: 12px; line-height: 1.4; }
.quick-search-key-hint { grid-column: 2; grid-row: 1; align-self: center; color: var(--qs-muted); font-size: 11px; line-height: 1.4; white-space: nowrap; }

@media (max-width: 1240px) {
  #app .quick-search-trigger { display: none !important; }
  #app .primary-nav .nav-market-link { display: inline-flex; }
}
@media (min-width: 981px) {
  #app .header-tools .quick-search-trigger { display: inline-flex !important; }
}
@media (max-width: 980px) {
  #app .mobile-panel .mobile-search-link { display: flex; align-items: center; gap: 11px; }
  #app .mobile-panel .mobile-search-link .ui-icon { width: 18px; height: 18px; }
}
@media (max-width: 600px) {
  .quick-search-dialog { inset: max(8px, env(safe-area-inset-top)) 0 auto; width: calc(100vw - 16px); max-height: calc(var(--quick-search-viewport-height, 100dvh) - 16px - env(safe-area-inset-top)); border-radius: 4px; }
  .quick-search-head { gap: 12px; padding: 9px 12px 8px; }
  .quick-search-head h2 { font-size: 18px; }
  .quick-search-form { margin-inline: 12px; margin-bottom: 9px; padding-left: 11px; }
  .quick-search-form input { font-size: 16px; }
  .quick-search-filters { padding-inline: 8px; }
  .quick-search-filter { gap: 5px; padding-inline: 10px; }
  .quick-search-result-head { gap: 8px; padding-inline: 12px; }
  .quick-search-results { padding-inline: 4px; }
  .quick-search-option { grid-template-columns: 59px minmax(0, 1fr); gap: 9px; min-height: 76px; padding-inline: 8px; }
  .quick-search-option-media.is-game img { width: 59px; }
  .quick-search-option-media.is-pair img { width: 28px; }
  .quick-search-option-copy strong { font-size: 16px; }
  .quick-search-option-copy small { font-size: 13px; }
  .quick-search-type { padding-inline: 4px; font-size: 10px; }
  .quick-search-foot { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 6px 12px max(10px, env(safe-area-inset-bottom)); }
  .quick-search-scope { grid-column: auto; font-size: 11px; }
  .quick-search-key-hint { display: none; }
}
@media (max-width: 360px) {
  .quick-search-head h2 { font-size: 17px; }
  .quick-search-form input { min-height: 48px; }
  .quick-search-form { min-height: 50px; }
  .quick-search-filter { padding-inline: 9px; font-size: 13px; }
  .quick-search-visible-count { max-width: 14ch; font-size: 11px; text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-search-dialog[open] { animation: none; }
  .quick-search-dialog *,
  .quick-search-dialog *::before,
  .quick-search-dialog *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
.quick-search-recent { padding: 0 18px 8px; border-bottom: 1px solid var(--qs-line); }
.quick-search-recent[hidden] { display: none !important; }
.quick-search-recent-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; color: var(--qs-muted); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.quick-search-recent-head button { min-height: 32px; padding: 5px 0; color: var(--qs-muted); background: transparent; border: 0; font: inherit; text-transform: none; cursor: pointer; }
.quick-search-recent-head button:hover { color: var(--qs-text); }
.quick-search-recent-list { display: flex; gap: 7px; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.quick-search-recent-item { flex: 0 0 auto; min-height: 36px; max-width: 230px; padding: 7px 10px; overflow: hidden; color: var(--qs-text); text-overflow: ellipsis; white-space: nowrap; background: var(--qs-raised); border: 1px solid var(--qs-line); border-radius: 2px; font: 600 13px/1.25 var(--b9-type-interface); cursor: pointer; }
.quick-search-recent-item:hover { border-color: var(--qs-red); }
@media (max-width: 620px) {
  .quick-search-recent { padding-inline: 14px; }
  .quick-search-recent-item { max-width: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .quick-search-recent * { scroll-behavior: auto !important; transition: none !important; }
}

/* Source: styles/reading-desk.css */
/* Reading desk: device-local bookmarks, clear reading state and restrained editorial controls. */
#app .guide-reader-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 16px;
}

#app :is(.guide-reader-save, .guide-reader-share, .guide-index-save) {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-radius: 2px;
  font: inherit;
  font-size: .77rem;
  font-weight: 720;
  cursor: pointer;
}

#app :is(.guide-reader-save, .guide-reader-share, .guide-index-save):hover,
#app :is(.guide-reader-save, .guide-reader-share, .guide-index-save):focus-visible {
  border-color: var(--b9-red);
}

#app .guide-reader-save[aria-pressed="true"],
#app .guide-index-save[aria-pressed="true"] {
  color: var(--b9-red);
  border-color: color-mix(in srgb, var(--b9-red) 55%, var(--b9-line));
}

#app .guide-reader-actions .ui-icon,
#app .guide-index-save .ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }
#app .guide-share-status { min-height: 1.25em; margin: 7px 0 0; color: var(--b9-muted); font-size: .73rem; }
#app .guide-share-fallback { display: grid; gap: 5px; margin-top: 9px; color: var(--b9-muted); font-size: .72rem; }
#app .guide-share-fallback input { width: min(100%, 520px); min-height: 42px; padding: 8px 10px; color: var(--b9-ink); background: var(--b9-panel); border: 1px solid var(--b9-line); font: inherit; }
#app .guide-share-fallback[hidden] { display: none; }

#app .guide-reader-settings { max-width: 660px; margin-top: 12px; color: var(--b9-ink); border-block: 1px solid var(--b9-line); }
#app .guide-reader-settings > summary { display: flex; min-height: 44px; align-items: center; justify-content: space-between; gap: 12px; color: var(--b9-muted); font-size: .7rem; font-weight: 760; list-style: none; cursor: pointer; }
#app .guide-reader-settings > summary::-webkit-details-marker { display: none; }
#app .guide-reader-settings > summary span { display: grid; width: 24px; height: 24px; place-items: center; color: var(--b9-red); border: 1px solid var(--b9-line); font: 500 1rem/1 var(--b9-type-editorial); }
#app .guide-reader-settings[open] > summary span { transform: rotate(45deg); }
#app .guide-reader-settings-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; padding: 3px 0 13px; }
#app .guide-reader-settings-panel > p { grid-column: 1 / -1; margin: 0; color: var(--b9-muted); font-size: .67rem; line-height: 1.45; }
#app .guide-reader-settings-panel fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
#app .guide-reader-settings-panel legend { margin-bottom: 5px; color: var(--b9-muted); font-size: .62rem; font-weight: 720; }
#app .guide-reader-setting-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
#app .guide-reader-setting-options button,
#app .guide-reader-setting-footer button { min-width: 0; min-height: 38px; padding: 6px 7px; color: var(--b9-muted); background: var(--b9-panel); border: 1px solid var(--b9-line); font: inherit; font-size: .61rem; line-height: 1.25; cursor: pointer; }
#app .guide-reader-setting-options button:hover,
#app .guide-reader-setting-footer button:hover { color: var(--b9-ink); border-color: var(--b9-red); }
#app .guide-reader-setting-options button[aria-pressed="true"],
#app .guide-reader-setting-footer button[aria-pressed="true"] { color: var(--b9-red); border-color: var(--b9-red); background: color-mix(in srgb, var(--b9-red) 7%, var(--b9-panel)); }
#app .guide-reader-setting-footer { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 7px; }
#app .guide-reader-setting-footer [data-reader-setting="focus"] { min-width: 120px; }
#app .guide-reader-setting-footer [data-reader-setting-reset] { margin-left: auto; }
#app .guide-reader-setting-footer [data-reader-setting-status] { flex: 1 1 100%; min-height: 1.2em; color: var(--b9-muted); font-size: .63rem; }

#app .guide-layout[data-reader-width="narrow"] > .article-content { max-width: min(620px, 100%); margin-inline: auto; }
#app .guide-layout[data-reader-width="wide"] { grid-template-columns: minmax(0, min(880px, 62vw)) minmax(205px, 250px); }
#app .guide-layout[data-reader-width="wide"] > .article-content { max-width: 880px; }
#app .guide-layout > .article-content[data-reader-text="large"] > [data-guide-chapter] > p { font-size: 1.1em !important; line-height: 1.82; }
#app .guide-layout > .article-content[data-reader-text="largest"] > [data-guide-chapter] > p { font-size: 1.22em !important; line-height: 1.85; }
#app .guide-layout > .article-content[data-reader-focus="true"] { padding: clamp(13px, 2.5vw, 26px); background: color-mix(in srgb, var(--b9-panel) 76%, var(--b9-paper)); border-inline: 1px solid var(--b9-line); }

#app .guide-index-actions { display: flex; align-self: center; gap: 6px; }
#app .guide-index-actions .guide-index-open,
#app .guide-index-actions .guide-index-save { width: 42px; min-width: 42px; min-height: 44px; padding: 0; }
#app .guide-index-row { grid-template-columns: 3.2rem minmax(0,1fr) 90px; }
#app .guide-index-open .ui-icon { width: 17px; height: 17px; color: var(--b9-red); }
#app .guide-index-save .ui-icon { width: 16px; height: 16px; }

#app .guide-reading-meter {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
  padding: 12px;
  background: var(--b9-paper);
  border: 1px solid var(--b9-line);
}

#app .guide-reading-meter > div { display: flex; justify-content: space-between; gap: 12px; color: var(--b9-muted); font-size: .71rem; font-weight: 720; }
#app .guide-reading-meter output { color: var(--b9-red); font: 750 .72rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .guide-reading-meter progress { display: block; width: 100%; height: 4px; overflow: hidden; appearance: none; border: 0; background: var(--b9-line); }
#app .guide-reading-meter progress::-webkit-progress-bar { background: var(--b9-line); }
#app .guide-reading-meter progress::-webkit-progress-value { background: var(--b9-red); transition: width .14s linear; }
#app .guide-reading-meter progress::-moz-progress-bar { background: var(--b9-red); }
#app .guide-reading-meter p { overflow: hidden; margin: 0; color: var(--b9-ink); font-size: .76rem; line-height: 1.4; text-overflow: ellipsis; }
#app .guide-reading-progress-rail { position: fixed; z-index: 42; inset: 72px 0 auto; height: 3px; pointer-events: none; }
#app .guide-reading-progress-rail progress { display: block; width: 100%; height: 3px; appearance: none; border: 0; background: transparent; }
#app .guide-reading-progress-rail progress::-webkit-progress-bar { background: transparent; }
#app .guide-reading-progress-rail progress::-webkit-progress-value { background: var(--b9-red); }
#app .guide-reading-progress-rail progress::-moz-progress-bar { background: var(--b9-red); }
#app .guide-toc-link.is-reading-current { color: var(--b9-red); border-left-color: var(--b9-red); }
#app .guide-toc-link.is-reading-current .guide-toc-number { color: var(--b9-red); }
#app .guide-mobile-reader-tools { display: none; }

#app .saved-desk-count { margin: 14px 0 5px; color: var(--b9-muted); font: 700 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; letter-spacing: .035em; }
#app .saved-desk-section { padding-block: 17px; border-bottom: 1px solid var(--b9-line); }
#app .saved-desk-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 7px; }
#app .saved-desk-section-head h3 { margin: 0; color: var(--b9-ink); font-size: .84rem; font-weight: 760; }
#app .saved-desk-section-head > span { display: grid; min-width: 24px; height: 24px; place-items: center; padding-inline: 5px; color: var(--b9-muted); background: var(--b9-paper); border: 1px solid var(--b9-line); font: 700 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .saved-desk-section .saved-empty { margin-top: 8px; padding: 13px 12px; border-style: solid; border-width: 0 0 0 2px; text-align: left; font-size: .79rem; }
#app .saved-guide-list { display: grid; }
#app .saved-guide-list article { display: grid; grid-template-columns: minmax(0,1fr) auto 30px; gap: 9px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--b9-line); }
#app .saved-guide-list article > div { display: grid; min-width: 0; gap: 3px; }
#app .saved-guide-list article span { color: var(--b9-red); font-size: .63rem; font-weight: 760; letter-spacing: .035em; text-transform: uppercase; }
#app .saved-guide-list article strong { color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: .91rem; line-height: 1.28; }
#app .saved-guide-list article small { color: var(--b9-muted); font-size: .68rem; }
#app .saved-guide-list article > a { color: var(--b9-ink); font-size: .73rem; font-weight: 760; text-underline-offset: 3px; }
#app .saved-guide-list article > button { display: grid; width: 30px; min-height: 36px; place-items: center; padding: 4px; color: var(--b9-muted); background: transparent; border: 1px solid var(--b9-line); cursor: pointer; }
#app .saved-guide-list article > button:hover,
#app .saved-guide-list article > button:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .saved-guide-list article > button .ui-icon { width: 15px; height: 15px; }
#app .saved-reading-resume { display: grid; gap: 4px; margin: 8px 0 5px; padding: 12px; color: var(--b9-ink); background: var(--b9-paper); border-left: 2px solid var(--b9-red); text-decoration: none; }
#app .saved-reading-resume:hover strong { text-decoration: underline; text-underline-offset: 3px; }
#app .saved-reading-kicker { color: var(--b9-red); font-size: .63rem; font-weight: 780; letter-spacing: .04em; text-transform: uppercase; }
#app .saved-reading-resume strong { font-family: var(--b9-type-editorial); font-size: .91rem; line-height: 1.28; }
#app .saved-reading-resume small { color: var(--b9-muted); font-size: .68rem; }
#app .saved-desk-section .saved-clear { margin-top: 11px; }

@media (max-width: 760px) {
  #app .guide-toc { position: static; }
}

@media (max-width: 980px) {
  #app .guide-mobile-reader-tools { display: grid; gap: 0; }
  #app .guide-mobile-reader-tools .guide-reading-meter { position: static; margin-bottom: 12px; }
  #app .guide-layout[data-reader-width="wide"] { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  #app .guide-reading-progress-rail { inset-block-start: 60px; }
}

@media (max-width: 460px) {
  #app .guide-reader-actions { gap: 7px; }
  #app :is(.guide-reader-save, .guide-reader-share) { flex: 1 1 145px; padding-inline: 8px; }
  #app .guide-reader-settings-panel { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #app .guide-reader-settings-panel > p,
  #app .guide-reader-setting-footer { grid-column: auto; }
  #app .guide-reader-setting-options button { min-height: 42px; font-size: .67rem; }
  #app .guide-reader-setting-footer [data-reader-setting-reset] { margin-left: 0; }
  #app .guide-layout > .article-content[data-reader-focus="true"] { padding: 11px; }
  #app .guide-index-actions { gap: 4px; }
  #app .guide-index-actions :is(.guide-index-open, .guide-index-save) { width: 38px; min-width: 38px; }
  #app .guide-index-row { grid-template-columns: 1.7rem minmax(0,1fr) 80px; }
  #app .saved-guide-list article { grid-template-columns: minmax(0,1fr) auto 28px; gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .guide-reading-meter progress::-webkit-progress-value { transition: none; }
}

/* Account-owned article progress and margin notes. */
#app .guide-reader-resume,
#app .guide-reader-finish {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--b9-ink);
  background: var(--b9-paper);
  border: 1px solid var(--b9-line);
  font: inherit;
  font-size: .75rem;
  font-weight: 740;
  cursor: pointer;
}

#app .guide-reader-resume { color: var(--b9-red); border-color: color-mix(in srgb, var(--b9-red) 56%, var(--b9-line)); }
#app .guide-reader-resume:hover,
#app .guide-reader-finish:hover,
#app .guide-reader-resume:focus-visible,
#app .guide-reader-finish:focus-visible { border-color: var(--b9-red); }
#app .guide-reader-finish:disabled { color: var(--b9-muted); cursor: default; }

#app .guide-section-notes {
  margin-top: 14px;
  border-block: 1px solid var(--b9-line);
  background: color-mix(in srgb, var(--b9-panel) 78%, transparent);
}

#app .guide-section-notes > summary {
  display: flex;
  min-height: 45px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 10px;
  color: var(--b9-muted);
  font-size: .71rem;
  font-weight: 720;
  list-style: none;
  cursor: pointer;
}

#app .guide-section-notes > summary::-webkit-details-marker { display: none; }
#app .guide-section-notes > summary::after { content: "+"; color: var(--b9-red); font: 500 1.05rem/1 var(--b9-type-editorial); }
#app .guide-section-notes[open] > summary::after { content: "−"; }
#app .guide-section-notes > summary b { margin-left: auto; color: var(--b9-ink); font: 680 .67rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-section-notes-body { display: grid; gap: 10px; padding: 0 10px 11px; }
#app .guide-section-notes-body > p,
#app .guide-section-note-prompt > p { margin: 0; color: var(--b9-muted); font-size: .68rem; line-height: 1.5; }
#app .guide-private-note-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#app .guide-private-note { display: grid; gap: 7px; padding: 10px 11px; border-left: 2px solid var(--b9-red); background: var(--b9-paper); }
#app .guide-private-note blockquote { margin: 0; padding-left: 9px; color: var(--b9-muted); border-left: 1px solid var(--b9-line); font-size: .75rem; line-height: 1.5; }
#app .guide-private-note > p { margin: 0; color: var(--b9-ink); font-size: .76rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
#app .guide-private-note-actions { display: flex; flex-wrap: wrap; gap: 6px; }
#app .guide-private-note-actions button,
#app .guide-section-note-add { min-height: 40px; padding: 6px 9px; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); font: inherit; font-size: .68rem; font-weight: 720; cursor: pointer; }
#app .guide-section-note-add { justify-self: start; min-height: 44px; padding-inline: 12px; background: var(--b9-paper); }
#app .guide-private-note-actions button:hover,
#app .guide-private-note-actions button:focus-visible,
#app .guide-section-note-add:hover,
#app .guide-section-note-add:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .guide-private-note-actions button:disabled { color: var(--b9-muted); cursor: default; }
#app .guide-private-note-history { display: grid; gap: 7px; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--b9-line); list-style: none; }
#app .guide-private-note-history[hidden] { display: none; }
#app .guide-private-note-history > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; background: var(--b9-panel); border: 1px solid var(--b9-line); }
#app .guide-private-note-history > li > div { display: grid; gap: 4px; min-width: 0; }
#app .guide-private-note-history time { color: var(--b9-muted); font: 650 .58rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .guide-private-note-history blockquote { margin: 0; padding-left: 7px; color: var(--b9-muted); border-left: 1px solid var(--b9-line); font-size: .65rem; line-height: 1.45; }
#app .guide-private-note-history p { margin: 0; color: var(--b9-ink); font-size: .68rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
#app .guide-private-note-history > li > button { min-height: 40px; padding: 5px 8px; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); font: inherit; font-size: .63rem; font-weight: 720; cursor: pointer; }
#app .guide-private-note-history > li > button:hover,
#app .guide-private-note-history > li > button:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .guide-private-note-history .guide-private-note-history-empty { display: block; color: var(--b9-muted); font-size: .67rem; }
#app .guide-private-note-empty { padding: 9px 10px; border: 1px dashed var(--b9-line); }
#app .guide-section-note-prompt { display: grid; gap: 6px; margin-top: 11px; padding: 10px 11px; border: 1px solid var(--b9-line); background: var(--b9-panel); }
#app .guide-section-note-prompt a { color: var(--b9-red); font-size: .72rem; font-weight: 750; text-underline-offset: 3px; }

#app .guide-note-dialog {
  width: min(620px, calc(100vw - 28px));
  max-height: min(88dvh, 820px);
  padding: 0;
  overflow: auto;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  box-shadow: 0 24px 90px rgb(0 0 0 / .34);
}

#app .guide-note-dialog::backdrop { background: rgb(10 12 14 / .68); }
#app .guide-note-dialog-form { display: grid; gap: 16px; padding: clamp(18px, 4vw, 30px); }
#app .guide-note-dialog-form > header { position: relative; padding-right: 44px; }
#app .guide-note-dialog-form > header .eyebrow { margin: 0 0 8px; color: var(--b9-red); }
#app .guide-note-dialog-form > header h2 { margin: 0; font: 560 clamp(1.35rem, 4vw, 2rem)/1.1 var(--b9-type-editorial); }
#app .guide-note-dialog-close { position: absolute; top: 0; right: 0; display: grid; width: 40px; min-height: 40px; place-items: center; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); font: 400 1.5rem/1 var(--b9-type-editorial); cursor: pointer; }
#app .guide-note-dialog-context { margin: -7px 0 0; padding: 10px 12px; color: var(--b9-muted); background: var(--b9-paper); border-left: 2px solid var(--b9-red); font-size: .78rem; line-height: 1.5; }
#app .guide-note-dialog-form label { display: grid; gap: 7px; color: var(--b9-ink); font-size: .76rem; font-weight: 740; }
#app .guide-note-dialog-form label small { color: var(--b9-muted); font-size: .67rem; font-weight: 450; line-height: 1.5; }
#app .guide-note-dialog-form textarea { width: 100%; min-height: 90px; resize: vertical; font-size: 1rem; line-height: 1.5; }
#app .guide-note-dialog-form label:last-of-type textarea { min-height: 150px; }
#app .guide-note-dialog-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: end; gap: 8px; padding-top: 11px; border-top: 1px solid var(--b9-line); }
#app .guide-note-dialog-status { flex: 1 1 100%; min-height: 1.35em; margin: 0; color: var(--b9-muted); font-size: .72rem; }

#app .reading-desk-account { display: grid; gap: 18px; margin-top: 18px; padding: clamp(16px, 2.2vw, 24px); border: 1px solid var(--b9-line); border-top: 2px solid var(--b9-red); background: var(--b9-panel); }
#app .reading-desk-account-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 20px; }
#app .reading-desk-account-head .eyebrow { margin: 0 0 7px; color: var(--b9-red); font: 720 .61rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
#app .reading-desk-account-head h3 { margin: 0; font: 560 clamp(1.4rem, 2.5vw, 2rem)/1.1 var(--b9-type-editorial); }
#app .reading-desk-account-head p:last-child { max-width: 66ch; margin: 7px 0 0; color: var(--b9-muted); font-size: .78rem; line-height: 1.55; }
#app .reading-desk-account-head dl { display: grid; grid-template-columns: repeat(3, minmax(75px, 1fr)); margin: 0; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .reading-desk-account-head dl > div { display: grid; gap: 8px; min-height: 66px; padding: 9px; border-right: 1px solid var(--b9-line); }
#app .reading-desk-account-head dl > div:last-child { border: 0; }
#app .reading-desk-account-head dt { color: var(--b9-muted); font-size: .6rem; line-height: 1.3; }
#app .reading-desk-account-head dd { margin: 0; color: var(--b9-ink); font: 570 1.25rem/1 var(--b9-type-editorial); font-variant-numeric: tabular-nums; }
#app .reading-desk-progress,
#app .reading-desk-notes { display: grid; gap: 10px; }
#app .reading-desk-tools { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; }
#app .reading-desk-filters { display: flex; flex-wrap: wrap; gap: 5px; }
#app .reading-desk-filters button { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; padding: 6px 9px; color: var(--b9-muted); background: var(--b9-paper); border: 1px solid var(--b9-line); font: inherit; font-size: .66rem; cursor: pointer; }
#app .reading-desk-filters button[aria-pressed="true"] { color: var(--b9-red); border-color: var(--b9-red); }
#app .reading-desk-filters button b { color: var(--b9-ink); font: 700 .61rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .reading-desk-tools > label { display: grid; min-width: 160px; gap: 4px; color: var(--b9-muted); font-size: .6rem; font-weight: 720; }
#app .reading-desk-tools .input-control { min-height: 40px; padding-block: 5px; font-size: .7rem; }
#app .reading-desk-subhead { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--b9-line); }
#app .reading-desk-subhead > div > span { color: var(--b9-red); font: 720 .57rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .065em; }
#app .reading-desk-subhead h4 { margin: 3px 0 0; color: var(--b9-ink); font: 560 1.14rem/1.18 var(--b9-type-editorial); }
#app .reading-desk-subhead > span:last-child { color: var(--b9-muted); font: 650 .68rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .reading-progress-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#app .reading-progress-card { display: grid; gap: 11px; min-width: 0; padding: 12px; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .reading-progress-card-head { display: flex; align-items: start; justify-content: space-between; gap: 10px; }
#app .reading-progress-card-head > div > span { color: var(--b9-muted); font-size: .63rem; }
#app .reading-progress-card h3 { margin: 4px 0 0; font: 560 1rem/1.25 var(--b9-type-editorial); }
#app .reading-progress-card h3 a { color: var(--b9-ink); text-decoration: none; }
#app .reading-progress-card h3 a:hover { color: var(--b9-red); text-decoration: underline; text-underline-offset: 3px; }
#app .reading-progress-card-head > b { color: var(--b9-red); font: 700 .73rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .reading-progress-track { height: 4px; overflow: hidden; background: var(--b9-line); }
#app .reading-progress-track i { display: block; width: var(--reading-progress, 0%); height: 100%; background: var(--b9-red); }
#app .reading-progress-card-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; color: var(--b9-muted); font-size: .64rem; }
#app .reading-progress-card-foot > div { display: flex; flex-wrap: wrap; gap: 10px; }
#app .reading-progress-card-foot a { color: var(--b9-ink); font-weight: 740; text-underline-offset: 3px; }
#app .reading-progress-card-foot button { min-height: 36px; padding: 4px 7px; color: var(--b9-muted); background: transparent; border: 1px solid var(--b9-line); font: inherit; cursor: pointer; }
#app .reading-progress-card-foot :is(a, button):focus-visible { outline: 2px solid var(--b9-red); outline-offset: 2px; }
#app .reading-desk-empty { margin: 0; padding: 14px; color: var(--b9-muted); background: var(--b9-paper); border-left: 2px solid var(--b9-line); font-size: .76rem; line-height: 1.55; }
#app .reading-note-search { display: grid; max-width: 420px; gap: 5px; color: var(--b9-muted); font-size: .63rem; font-weight: 720; }
#app .reading-note-search input { min-height: 42px; font-size: .85rem; }
#app .reading-note-index { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
#app .reading-note-index > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; padding: 11px 12px; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .reading-note-index > li > div { display: grid; gap: 5px; min-width: 0; }
#app .reading-note-index > li span { color: var(--b9-red); font: 650 .6rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .reading-note-index > li strong { color: var(--b9-ink); font-size: .76rem; }
#app .reading-note-index > li blockquote { margin: 0; padding-left: 8px; color: var(--b9-muted); border-left: 1px solid var(--b9-line); font-size: .7rem; line-height: 1.45; }
#app .reading-note-index > li p { margin: 0; color: var(--b9-ink); font-size: .74rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#app .reading-note-index > li > a { align-self: center; color: var(--b9-red); font-size: .68rem; font-weight: 740; white-space: nowrap; text-underline-offset: 3px; }

@media (max-width: 760px) {
  #app .reading-desk-account-head { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #app .reading-desk-account-head dl { width: 100%; }
  #app .reading-progress-list { grid-template-columns: minmax(0, 1fr); }
  #app .reading-desk-tools { align-items: stretch; flex-direction: column; }
  #app .reading-desk-tools > label { width: 100%; }
  #app .reading-note-index > li { grid-template-columns: minmax(0, 1fr); }
  #app .reading-note-index > li > a { justify-self: start; min-height: 40px; display: inline-flex; align-items: center; }
}

@media (max-width: 460px) {
  #app .guide-reader-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .guide-reader-actions > button { width: 100%; min-width: 0; }
  #app .guide-note-dialog { width: calc(100vw - 16px); max-height: 92dvh; }
  #app .guide-note-dialog-form { gap: 12px; padding: 16px; }
  #app .guide-note-dialog-footer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .guide-note-dialog-status { grid-column: 1 / -1; }
  #app .guide-note-dialog-footer .btn { min-height: 44px; padding-inline: 8px; }
  #app .guide-private-note-history > li { grid-template-columns: minmax(0, 1fr); }
  #app .guide-private-note-history > li > button { justify-self: start; min-height: 44px; }
  #app .reading-desk-account-head dl > div { min-width: 0; padding: 8px 6px; }
  #app .reading-desk-account-head dt { font-size: .56rem; }
}

/* Source: styles/casino-mechanics.css */
/* Mechanics education: an evidence-led reading aid, not a playable lobby. */
#app .slot-mechanics-atlas {
  --mechanic-accent: var(--b9-red);
  margin: 32px 0 40px;
  overflow: hidden;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--mechanic-accent);
}

#app .slot-mechanics-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px 19px;
  border-bottom: 1px solid var(--b9-line);
}

#app .slot-mechanics-head > div { min-width: 0; }
#app .slot-mechanics-head .eyebrow,
#app .slot-mechanics-copy .eyebrow,
#app .slot-mechanics-checklist .eyebrow { margin: 0 0 8px; color: var(--mechanic-accent); }
#app .slot-mechanics-head h2 { max-width: 26ch; margin: 0; font-family: var(--font-editorial, Georgia, serif); font-size: clamp(1.35rem, 2vw, 1.9rem); font-weight: 520; line-height: 1.12; letter-spacing: -.025em; }
#app .slot-mechanics-head > div > p:last-child { max-width: 66ch; margin: 10px 0 0; color: var(--b9-muted); font-size: .92rem; line-height: 1.6; }
#app .slot-mechanics-mark { flex: 0 0 auto; color: var(--b9-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: .72rem; font-variant-numeric: tabular-nums; letter-spacing: .08em; }

#app .slot-mechanics-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--b9-line); }
#app .slot-mechanics-tab { position: relative; display: flex; min-width: 0; min-height: 54px; align-items: center; gap: 9px; padding: 10px 13px; color: var(--b9-muted); text-align: left; background: transparent; border: 0; border-right: 1px solid var(--b9-line); cursor: pointer; }
#app .slot-mechanics-tab:last-child { border-right: 0; }
#app .slot-mechanics-tab > span { color: var(--b9-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: .62rem; font-variant-numeric: tabular-nums; }
#app .slot-mechanics-tab strong { overflow: hidden; color: inherit; font-size: .78rem; font-weight: 670; text-overflow: ellipsis; white-space: nowrap; }
#app .slot-mechanics-tab[aria-selected="true"] { color: var(--b9-ink); background: var(--b9-panel-raised); }
#app .slot-mechanics-tab[aria-selected="true"]::before { position: absolute; inset: 0 0 auto; height: 2px; background: var(--mechanic-accent); content: ""; }
#app .slot-mechanics-tab:focus-visible { z-index: 1; outline: 2px solid var(--mechanic-accent); outline-offset: -3px; }

#app .slot-mechanics-panel { display: grid; min-width: 0; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 25px; align-items: center; padding: 24px; }
#app .slot-mechanics-panel[hidden] { display: none; }
#app .slot-mechanics-visual { display: grid; min-width: 0; min-height: 142px; align-content: center; padding: 16px; background: var(--b9-panel-raised); border: 1px solid var(--b9-line); }
#app .slot-mechanics-copy { min-width: 0; }
#app .slot-mechanics-copy h3 { max-width: 28ch; margin: 0; font-family: var(--font-editorial, Georgia, serif); font-size: clamp(1.15rem, 1.6vw, 1.48rem); font-weight: 520; line-height: 1.2; }
#app .slot-mechanics-copy > p:last-child { margin: 10px 0 0; color: var(--b9-muted); font-size: .86rem; line-height: 1.65; }

#app .mechanic-sequence { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr); align-items: center; gap: 5px; }
#app .mechanic-sequence > div { display: grid; min-width: 0; min-height: 82px; align-content: space-between; gap: 7px; padding: 9px 8px; background: var(--b9-panel); border: 1px solid var(--b9-line); }
#app .mechanic-sequence small,
#app .mechanic-sequence span,
#app .mechanic-horizon span,
#app .mechanic-horizon small,
#app .mechanic-measures small,
#app .mechanic-measures span,
#app .mechanic-vocabulary span { color: var(--b9-muted); font-size: .65rem; line-height: 1.45; }
#app .mechanic-sequence small { font-family: var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
#app .mechanic-sequence strong { font-family: var(--font-editorial, Georgia, serif); font-size: .92rem; font-weight: 580; line-height: 1.05; }
#app .mechanic-sequence > i { position: relative; height: 1px; background: var(--mechanic-accent); }
#app .mechanic-sequence > i::after { position: absolute; top: -3px; right: 0; width: 6px; height: 6px; border-top: 1px solid var(--mechanic-accent); border-right: 1px solid var(--mechanic-accent); content: ""; transform: rotate(45deg); }

#app .mechanic-horizon { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
#app .mechanic-horizon span { color: var(--b9-ink); }
#app .mechanic-horizon > i { position: relative; height: 1px; background: var(--b9-line); }
#app .mechanic-horizon > i::before { position: absolute; inset: -2px auto auto 52%; width: 5px; height: 5px; background: var(--mechanic-accent); border-radius: 50%; content: ""; }
#app .mechanic-horizon strong { font-family: var(--font-editorial, Georgia, serif); font-size: .98rem; font-weight: 570; }
#app .mechanic-horizon small { grid-column: 3; text-align: right; }
#app .mechanic-stamp { margin: 19px 0 0; padding-top: 12px; color: var(--b9-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: .67rem; line-height: 1.55; border-top: 1px solid var(--b9-line); }
#app .mechanic-stamp b { padding-inline: 5px; color: var(--mechanic-accent); font-size: 1rem; }

#app .mechanic-measures { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#app .mechanic-measures > div { display: grid; min-width: 0; align-content: start; gap: 7px; padding: 12px; background: var(--b9-panel); border-left: 2px solid var(--b9-line); }
#app .mechanic-measures > div:first-child { border-left-color: var(--mechanic-accent); }
#app .mechanic-measures small { font-family: var(--font-mono, ui-monospace, monospace); font-size: .59rem; text-transform: uppercase; letter-spacing: .06em; }
#app .mechanic-measures strong { font-family: var(--font-editorial, Georgia, serif); font-size: 1.15rem; font-weight: 560; }

#app .mechanic-vocabulary { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--b9-line); border: 1px solid var(--b9-line); }
#app .mechanic-vocabulary > div { display: grid; min-width: 0; gap: 6px; padding: 12px; background: var(--b9-panel); }
#app .mechanic-vocabulary b { color: var(--b9-ink); font-family: var(--font-mono, ui-monospace, monospace); font-size: .69rem; letter-spacing: .035em; }

#app .slot-mechanics-checklist { display: grid; min-width: 0; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 24px; padding: 20px 24px; background: var(--b9-panel-raised); border-top: 1px solid var(--b9-line); }
#app .slot-mechanics-checklist > div:first-child { min-width: 0; }
#app .slot-mechanics-checklist h3 { margin: 0; font-family: var(--font-editorial, Georgia, serif); font-size: 1.12rem; font-weight: 550; line-height: 1.22; }
#app .slot-mechanics-checklist > div:first-child > p:last-child { margin: 8px 0 0; color: var(--b9-muted); font-size: .77rem; line-height: 1.55; }
#app .slot-mechanics-checks { display: grid; min-width: 0; grid-template-columns: 1fr 1fr; gap: 7px 14px; }
#app .slot-mechanics-check { display: grid; min-width: 0; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 7px; color: var(--b9-ink); font-family: var(--font-sans, system-ui, sans-serif); font-size: .82rem; line-height: 1.45; cursor: pointer; }
#app .slot-mechanics-check input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--mechanic-accent); }
#app .slot-mechanics-check input:focus-visible { outline: 2px solid var(--mechanic-accent); outline-offset: 2px; }
#app .slot-mechanics-check-index { color: var(--b9-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: .58rem; font-variant-numeric: tabular-nums; }
#app .slot-mechanics-check-status { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(60px, 1fr); align-items: center; gap: 8px 12px; padding-top: 7px; border-top: 1px solid var(--b9-line); }
#app .slot-mechanics-check-status strong { color: var(--b9-ink); font-family: var(--font-mono, ui-monospace, monospace); font-size: .65rem; font-variant-numeric: tabular-nums; }
#app .slot-mechanics-check-track { height: 4px; overflow: hidden; background: var(--b9-line); }
#app .slot-mechanics-check-track > span { display: block; width: 0; height: 100%; background: var(--mechanic-accent); transition: width .2s ease-out; }
#app .slot-mechanics-check-status p { grid-column: 1 / -1; margin: 0; color: var(--b9-muted); font-size: .68rem; line-height: 1.5; }
#app .slot-mechanics-scope { margin: 0; padding: 12px 24px 14px; color: var(--b9-muted); font-size: .66rem; line-height: 1.5; border-top: 1px solid var(--b9-line); }

#app .casino-game-mechanics-link { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 10px 12px; color: var(--b9-ink); font-size: .78rem; line-height: 1.4; text-decoration: none; background: var(--b9-panel-raised); border-left: 2px solid var(--b9-red); }
#app .casino-game-mechanics-link:hover { background: var(--b9-panel); }
#app .casino-game-mechanics-link:focus-visible { outline: 2px solid var(--b9-red); outline-offset: 2px; }
#app .casino-game-mechanics-link .bastion-ui-mark { width: 16px; height: 16px; flex: 0 0 auto; }

/* The guide hero is a labelled explanatory diagram, never a simulated game. */
#app .guide-mechanics-hero {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: auto;
  min-height: 420px;
  background: var(--b9-panel);
  border-left: 1px solid var(--b9-line);
}

#app .mechanic-hero-art {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  gap: clamp(18px, 2vw, 27px);
  align-content: center;
  padding: clamp(22px, 3vw, 39px);
  overflow: hidden;
  color: var(--b9-ink);
  background: var(--b9-panel);
}

#app .mechanic-hero-kicker,
#app .mechanic-hero-bottom small,
#app .mechanic-hero-stage small,
#app .mechanic-hero-signature {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
}

#app .mechanic-hero-kicker {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding-bottom: 10px;
  color: var(--b9-muted);
  font-size: .64rem;
  letter-spacing: .07em;
  border-bottom: 1px solid var(--b9-line);
}

#app .mechanic-hero-flow {
  display: grid;
  min-width: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
}

#app .mechanic-hero-stage {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 128px;
  align-content: center;
  gap: 10px;
  padding: 10px 16px 10px 0;
  border-top: 1px solid var(--b9-line);
  border-bottom: 1px solid var(--b9-line);
}

#app .mechanic-hero-stage + .mechanic-hero-stage { padding-left: 15px; }
#app .mechanic-hero-stage small { color: var(--b9-red); font-size: .66rem; }
#app .mechanic-hero-stage strong { max-width: 13ch; font-family: var(--font-editorial, Georgia, serif); font-size: clamp(1.08rem, 1.8vw, 1.5rem); font-weight: 560; line-height: 1.08; }
#app .mechanic-hero-stage span { max-width: 19ch; color: var(--b9-muted); font-size: .74rem; line-height: 1.42; }
#app .mechanic-hero-stage:not(:last-child)::after { position: absolute; top: calc(50% - 3px); right: -3px; z-index: 1; width: 6px; height: 6px; background: var(--b9-red); content: ""; transform: rotate(45deg); }

#app .mechanic-hero-bottom {
  display: grid;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--b9-line);
}

#app .mechanic-hero-bottom > div { display: grid; min-width: 0; gap: 5px; }
#app .mechanic-hero-bottom small { color: var(--b9-red); font-size: .61rem; letter-spacing: .06em; }
#app .mechanic-hero-bottom strong { color: var(--b9-ink); font-size: .78rem; font-weight: 560; line-height: 1.35; }
#app .mechanic-hero-bottom b { color: var(--b9-muted); font-family: var(--font-editorial, Georgia, serif); font-size: 1.2rem; font-weight: 400; }
#app .mechanic-hero-signature { color: var(--b9-muted); font-size: .56rem; letter-spacing: .08em; }
#app .guide-mechanics-hero figcaption { padding: 9px 13px; color: var(--b9-muted); font-size: .67rem; line-height: 1.4; border-top: 1px solid var(--b9-line); }

@media (max-width: 720px) {
  #app .guide-mechanics-hero { height: clamp(340px, 90vw, 390px); }
  #app .mechanic-hero-art { gap: 15px; padding: 17px 16px; }
  #app .mechanic-hero-stage { min-height: 104px; gap: 8px; padding-right: 10px; }
  #app .mechanic-hero-stage + .mechanic-hero-stage { padding-left: 10px; }
  #app .mechanic-hero-stage strong { font-size: clamp(.94rem, 4.2vw, 1.18rem); }
  #app .mechanic-hero-stage span { font-size: .69rem; }
  #app .mechanic-hero-bottom { gap: 8px; padding-top: 10px; }
  #app .mechanic-hero-bottom strong { font-size: 1rem; }
  #app .slot-mechanics-head > div > p:last-child,
  #app .slot-mechanics-copy > p:last-child,
  #app .slot-mechanics-checklist > div:first-child > p:last-child { font-size: 1rem; }
  #app .slot-mechanics-check { min-height: 44px; align-items: start; font-size: 1rem; }
  #app .slot-mechanics-check input { width: 20px; height: 20px; }
  #app .slot-mechanics-tab { min-height: 48px; }
  #app .slot-mechanics-head { gap: 12px; padding: 18px 16px 16px; }
  #app .slot-mechanics-mark { font-size: .6rem; }
  #app .slot-mechanics-tab { min-height: 49px; justify-content: center; gap: 5px; padding: 8px 4px; }
  #app .slot-mechanics-tab > span { font-size: .53rem; }
  #app .slot-mechanics-tab strong { font-size: .7rem; }
  #app .slot-mechanics-panel { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 16px; }
  #app .slot-mechanics-visual { min-height: 124px; }
  #app .slot-mechanics-checklist { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 17px 16px; }
  #app .slot-mechanics-checks { grid-template-columns: 1fr; }
  #app .slot-mechanics-scope { padding-inline: 16px; }
}

@media (max-width: 360px) {
  #app .guide-mechanics-hero { height: auto; min-height: 278px; }
  #app .mechanic-hero-art { gap: 10px; padding: 14px; }
  #app .mechanic-hero-flow { grid-template-columns: minmax(0, 1fr); }
  #app .mechanic-hero-stage,
  #app .mechanic-hero-stage + .mechanic-hero-stage { min-height: 0; grid-template-columns: 23px minmax(0, 1fr); align-items: baseline; gap: 3px 7px; padding: 5px 0; border-bottom: 0; }
  #app .mechanic-hero-stage:first-child { border-top: 0; }
  #app .mechanic-hero-stage strong,
  #app .mechanic-hero-stage span { grid-column: 2; }
  #app .mechanic-hero-stage strong { max-width: none; font-size: .94rem; }
  #app .mechanic-hero-stage span { max-width: none; font-size: .65rem; }
  #app .mechanic-hero-stage:not(:last-child)::after { top: auto; right: 3px; bottom: -3px; }
  #app .mechanic-hero-bottom { gap: 5px; }
  #app .mechanic-hero-bottom strong { font-size: .88rem; }
  #app .mechanic-hero-bottom small { font-size: .52rem; }
  #app .mechanic-hero-signature { font-size: .48rem; }
  #app .slot-mechanics-mark { display: none; }
  #app .slot-mechanics-tab { flex-direction: column; align-items: center; gap: 2px; }
  #app .mechanic-sequence { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  #app .mechanic-sequence > div { min-height: auto; grid-template-columns: auto 1fr; align-items: center; }
  #app .mechanic-sequence > div span { grid-column: 2; }
  #app .mechanic-sequence > i { width: 1px; height: 10px; justify-self: center; }
  #app .mechanic-sequence > i::after { top: auto; right: -2px; bottom: 0; transform: rotate(135deg); }
  #app .mechanic-measures { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  #app .slot-mechanics-check-track > span { transition: none; }
}

/* A transparent RTP calculation, not a slot-game simulation. */
#app .rtp-lens {
  --rtp-accent: var(--b9-red);
  min-width: 0;
  margin: 30px 0 38px;
  overflow: hidden;
  color: var(--b9-ink);
  background: var(--b9-panel);
  border: 1px solid var(--b9-line);
  border-top: 3px solid var(--rtp-accent);
}

#app .rtp-lens-head {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 21px 24px 18px;
  border-bottom: 1px solid var(--b9-line);
}

#app .rtp-lens-head > div { min-width: 0; }
#app .rtp-lens-head .eyebrow { margin: 0 0 8px; color: var(--rtp-accent); }
#app .rtp-lens-head h2 { max-width: 26ch; margin: 0; font-family: var(--font-editorial, Georgia, serif); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 520; line-height: 1.08; letter-spacing: -.025em; }
#app .rtp-lens-head > div > p:last-child { max-width: 68ch; margin: 10px 0 0; color: var(--b9-muted); font-size: .9rem; line-height: 1.58; }
#app .rtp-lens-index { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; padding: 5px 0; color: var(--b9-muted); font-family: var(--font-mono, ui-monospace, monospace); font-size: .72rem; font-variant-numeric: tabular-nums; border-top: 1px solid var(--b9-line); border-bottom: 1px solid var(--b9-line); }
#app .rtp-lens-index i { color: var(--rtp-accent); font-style: normal; }
#app .rtp-lens-workbench { display: grid; min-width: 0; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
#app .rtp-lens-inputs { display: grid; min-width: 0; align-content: start; gap: 12px; padding: 21px 22px; border-right: 1px solid var(--b9-line); }
#app .rtp-lens-inputs > label { display: grid; min-width: 0; gap: 6px; color: var(--b9-ink); font-size: .78rem; font-weight: 680; line-height: 1.4; }
#app .rtp-lens-inputs input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 46px; padding: 9px 11px; color: var(--b9-ink); background: var(--b9-panel-raised); border: 1px solid var(--b9-line); border-radius: 0; font: 600 .94rem var(--font-mono, ui-monospace, monospace); font-variant-numeric: tabular-nums; }
#app .rtp-lens-inputs input::placeholder { color: var(--b9-muted); opacity: .7; }
#app .rtp-lens-inputs input:focus-visible { outline: 2px solid var(--rtp-accent); outline-offset: 2px; }
#app .rtp-lens-inputs small { color: var(--b9-muted); font-size: .69rem; font-weight: 450; line-height: 1.45; }
#app .rtp-lens-clear { justify-self: start; min-height: 42px; margin-top: 1px; padding: 8px 12px; color: var(--b9-ink); background: transparent; border: 1px solid var(--b9-line); font: 650 .76rem var(--font-sans, system-ui, sans-serif); cursor: pointer; }
#app .rtp-lens-clear:hover { background: var(--b9-panel-raised); }
#app .rtp-lens-clear:focus-visible { outline: 2px solid var(--rtp-accent); outline-offset: 2px; }
#app .rtp-lens-results { display: grid; min-width: 0; align-content: start; padding: 21px 23px; background: var(--b9-panel-raised); }
#app .rtp-lens-result-label { margin: 0; color: var(--b9-muted); font-size: .72rem; font-weight: 700; letter-spacing: .025em; }
#app .rtp-lens-total { display: block; margin-top: 5px; color: var(--b9-ink); font-family: var(--font-editorial, Georgia, serif); font-size: clamp(2.15rem, 5.2vw, 3.6rem); font-variant-numeric: tabular-nums; line-height: 1.04; letter-spacing: -.035em; overflow-wrap: anywhere; }
#app .rtp-lens-results dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--b9-line); }
#app .rtp-lens-results dl > div { min-width: 0; }
#app .rtp-lens-results dt { min-height: 2.8em; color: var(--b9-muted); font-size: .7rem; line-height: 1.4; }
#app .rtp-lens-results dd { margin: 5px 0 0; color: var(--b9-ink); font-family: var(--font-mono, ui-monospace, monospace); font-size: clamp(.91rem, 1.7vw, 1.08rem); font-variant-numeric: tabular-nums; font-weight: 700; overflow-wrap: anywhere; }
#app .rtp-lens-share { display: flex; width: 100%; height: 9px; margin-top: 17px; overflow: hidden; background: var(--b9-line); }
#app .rtp-lens-share > span { display: block; height: 100%; transition: width .16s ease-out; }
#app .rtp-lens-share [data-rtp-share-return] { background: var(--rtp-accent); }
#app .rtp-lens-share [data-rtp-share-difference] { background: color-mix(in srgb, var(--b9-ink) 24%, var(--b9-panel-raised)); }
#app .rtp-lens-share-labels { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; margin-top: 8px; }
#app .rtp-lens-share-labels span { display: inline-flex; align-items: center; gap: 6px; color: var(--b9-muted); font-size: .65rem; line-height: 1.4; }
#app .rtp-lens-share-labels i { width: 7px; height: 7px; flex: 0 0 auto; background: var(--rtp-accent); }
#app .rtp-lens-share-labels span:last-child i { background: color-mix(in srgb, var(--b9-ink) 24%, var(--b9-panel-raised)); }
#app .rtp-lens-status { min-height: 2.9em; margin: 14px 0 0; padding: 9px 11px; color: var(--b9-ink); background: var(--b9-panel); border-left: 2px solid var(--rtp-accent); font-size: .72rem; line-height: 1.48; }
#app .rtp-lens-caveat { margin: 0; padding: 14px 23px; color: var(--b9-muted); font-size: .74rem; line-height: 1.55; border-top: 1px solid var(--b9-line); }
#app .rtp-lens-source { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 16px; padding: 10px 23px; background: var(--b9-panel-raised); border-top: 1px solid var(--b9-line); }
#app .rtp-lens-source a { color: var(--b9-ink); font-size: .7rem; font-weight: 680; text-underline-offset: 3px; }
#app .rtp-lens-source span { color: var(--b9-muted); font-size: .65rem; line-height: 1.45; }

@media (max-width: 720px) {
  #app .rtp-lens { margin-block: 24px 30px; }
  #app .rtp-lens-head { gap: 12px; padding: 18px 16px 15px; }
  #app .rtp-lens-head h2 { font-size: clamp(1.4rem, 7vw, 1.9rem); }
  #app .rtp-lens-head > div > p:last-child { font-size: .96rem; }
  #app .rtp-lens-workbench { grid-template-columns: minmax(0, 1fr); }
  #app .rtp-lens-inputs { gap: 13px; padding: 17px 16px; border-right: 0; border-bottom: 1px solid var(--b9-line); }
  #app .rtp-lens-inputs > label { font-size: .9rem; }
  #app .rtp-lens-inputs input { min-height: 48px; font-size: 1rem; }
  #app .rtp-lens-inputs small { font-size: .76rem; }
  #app .rtp-lens-clear { min-height: 44px; }
  #app .rtp-lens-results { padding: 18px 16px; }
  #app .rtp-lens-result-label { font-size: .78rem; }
  #app .rtp-lens-results dt { font-size: .76rem; }
  #app .rtp-lens-caveat { padding: 12px 16px; font-size: .85rem; }
  #app .rtp-lens-source { padding: 10px 16px; }
  #app .rtp-lens-source a { font-size: .78rem; }
  #app .rtp-lens-source span { font-size: .72rem; }
}

@media (max-width: 380px) {
  #app .rtp-lens-index { gap: 5px; font-size: .62rem; }
  #app .rtp-lens-results dl { gap: 10px; }
  #app .rtp-lens-results dd { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  #app .rtp-lens-share > span { transition: none; }
}

/* Source: styles/account-sports-experience.css */
/* Accessible selector for published league research. */
#app .league-command-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
#app .league-command-card {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  padding: 15px 16px 11px;
  color: var(--ref-text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--ref-line);
  border-top: 2px solid var(--ref-line);
  border-radius: 2px;
  background: var(--ref-surface);
  transition: border-color .16s ease, background-color .16s ease, color .16s ease;
}
#app .league-command-card::before { display: none !important; content: none !important; }
#app .league-command-card:is(:hover, :focus-visible, .is-selected) {
  border-color: var(--ref-red);
  background: var(--ref-surface-2);
}
#app .league-command-card:focus-visible { outline: 3px solid var(--ref-red); outline-offset: 3px; }
#app .league-command-index {
  width: 100%;
  min-height: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--ref-muted);
  font-size: .62rem;
  font-weight: 760;
  line-height: 1.2;
}
#app .league-command-index > span:first-child {
  color: var(--ref-red);
  font-family: var(--b9-type-interface);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
}
#app .league-command-index > span:last-child {
  overflow: hidden;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#app .league-command-code {
  margin-top: 22px;
  color: var(--ref-text);
  font-family: var(--b9-type-editorial);
  font-size: clamp(2.45rem, 4vw, 3.55rem);
  font-weight: 650;
  line-height: .82;
  letter-spacing: -.065em;
  font-variant-numeric: lining-nums;
}
#app .league-command-card > strong {
  position: relative;
  max-width: 100%;
  margin-top: 9px;
  color: var(--ref-text);
  font-size: clamp(1rem, 1.4vw, 1.24rem);
  line-height: 1.12;
  text-wrap: balance;
}
#app .league-command-context {
  max-width: 100%;
  margin-top: 7px;
  color: var(--ref-muted);
  font-size: .68rem;
  line-height: 1.35;
}
#app .league-command-card .league-command-action {
  width: 100%;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  min-height: 44px;
  margin-top: auto;
  padding-top: 8px;
  color: var(--ref-muted);
  font-size: .7rem;
  font-weight: 750;
  border-top: 1px solid var(--ref-line);
  transition: color .16s ease;
}
#app .league-command-card .league-command-action i { color: var(--ref-red); font-size: 1rem; font-style: normal; transition: transform .16s ease; }
#app .league-command-card:is(:hover, :focus-visible, .is-selected) .league-command-action { color: var(--ref-text); }
#app .league-command-card:is(:hover, :focus-visible) .league-command-action i { transform: translateX(3px); }

#app .sports-league-panels { margin-top: 12px; }
#app .sports-league-panel[hidden] { display: none !important; }
#app .sports-league-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(108px, .24fr);
  gap: clamp(15px, 2.4vw, 30px);
  align-items: stretch;
  overflow: hidden;
  padding: clamp(15px, 2.1vw, 25px);
  border: 1px solid var(--ref-line);
  border-top: 2px solid var(--ref-red);
  border-radius: 3px;
  background: var(--ref-surface);
}
#app .sports-league-panel:focus-visible { outline: 2px solid var(--ref-red); outline-offset: 3px; }
#app .sports-league-panel-copy { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
#app .sports-league-panel-meta { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 7px 12px; padding-bottom: 9px; border-bottom: 1px solid var(--ref-line); }
#app .sports-league-panel-meta span { color: var(--ref-muted); font-size: .62rem; font-weight: 760; letter-spacing: .035em; }
#app .sports-league-panel-meta span:first-child { color: var(--ref-red); }
#app .sports-league-panel-copy > .eyebrow { margin: 12px 0 5px; color: var(--ref-red); }
#app .sports-league-panel-copy > h3 { max-width: 36ch; margin: 0; color: var(--ref-text); font-family: var(--b9-type-editorial); font-size: clamp(1.18rem, 2vw, 1.62rem); font-weight: 560; line-height: 1.14; }
#app .sports-league-panel-summary { max-width: 68ch; margin: 8px 0 12px; color: var(--ref-muted); font-size: .83rem; line-height: 1.5; }
#app .sports-league-panel-footer { width: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--ref-line); }
#app .sports-league-guide-link { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: var(--ref-text); font-size: .75rem; font-weight: 780; text-underline-offset: 3px; }
#app .sports-league-guide-link:hover { color: var(--ref-red); }
#app .sports-league-guide-link i { color: var(--ref-red); font-size: 1rem; font-style: normal; }
#app .sports-league-panel-footer > span { color: var(--ref-muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
#app .sports-league-panel-note { margin: 6px 0 0; color: var(--ref-muted); font-size: .66rem; line-height: 1.4; }
#app .sports-league-panel-count { align-self: end; display: grid; gap: 5px; padding: 0 0 9px 13px; border-left: 1px solid var(--ref-line); }
#app .sports-league-panel-count strong { color: var(--ref-text); font-family: var(--b9-type-editorial); font-size: clamp(2rem, 3vw, 3.3rem); font-weight: 540; line-height: .9; font-variant-numeric: tabular-nums; }
#app .sports-league-panel-count span { color: var(--ref-muted); font-size: .61rem; line-height: 1.35; }

/* Manual odds comparison is a compact research sheet, not a live betting feed. */
body[data-route="sports"] #app .sports-price-lab {
  margin-top: 27px;
  padding: clamp(17px, 2.8vw, 30px);
  color: var(--sports-ink, var(--ref-text));
  background: var(--sports-card, var(--ref-surface));
  border: 1px solid var(--sports-rule, var(--ref-line));
  border-top: 3px solid var(--sports-red, var(--ref-red));
}
body[data-route="sports"] #app .sports-price-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--sports-rule, var(--ref-line));
}
body[data-route="sports"] #app .sports-price-heading .eyebrow { margin: 0 0 7px; color: var(--sports-red, var(--ref-red)); }
body[data-route="sports"] #app .sports-price-heading h2 { max-width: 24ch; margin: 0; color: var(--sports-ink, var(--ref-text)); font-family: var(--b14-display); font-size: clamp(1.55rem, 3vw, 2.45rem); line-height: 1.02; }
body[data-route="sports"] #app .sports-price-heading p:not(.eyebrow) { max-width: 66ch; margin: 9px 0 0; color: var(--sports-muted, var(--ref-muted)); font-size: .9rem; line-height: 1.5; }
body[data-route="sports"] #app .sports-price-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(240px, .8fr); gap: clamp(20px, 3vw, 38px); padding-top: 20px; }
body[data-route="sports"] #app .sports-price-inputs { min-width: 0; display: grid; align-content: start; gap: 15px; }
body[data-route="sports"] #app .sports-price-lab :is(fieldset, label) { min-width: 0; margin: 0; }
body[data-route="sports"] #app .sports-price-lab legend,
body[data-route="sports"] #app .sports-price-lab label > span { display: block; margin-bottom: 6px; color: var(--sports-muted, var(--ref-muted)); font-size: .68rem; font-weight: 680; line-height: 1.3; }
body[data-route="sports"] #app .sports-price-outcome-count { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0; border: 0; }
body[data-route="sports"] #app .sports-price-outcome-count legend { width: 100%; }
body[data-route="sports"] #app .sports-price-outcome-count button { min-height: 44px; padding: 6px 10px; color: var(--sports-ink, var(--ref-text)); background: transparent; border: 1px solid var(--sports-rule, var(--ref-line)); font: 650 .73rem/1.2 var(--b9-type-interface); cursor: pointer; }
body[data-route="sports"] #app .sports-price-outcome-count button[aria-pressed="true"] { color: #fff; background: var(--sports-red, var(--ref-red)); border-color: var(--sports-red, var(--ref-red)); }
body[data-route="sports"] #app .sports-price-lab input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 8px 10px; color: var(--sports-ink, var(--ref-text)); background: var(--sports-paper, var(--ref-bg)); border: 1px solid var(--sports-rule, var(--ref-line)); border-radius: 0; font: 600 .86rem/1.2 var(--b9-type-interface); font-variant-numeric: tabular-nums; }
body[data-route="sports"] #app .sports-price-lab input:focus-visible,
body[data-route="sports"] #app .sports-price-outcome-count button:focus-visible { outline: 2px solid var(--sports-red, var(--ref-red)); outline-offset: 2px; }
body[data-route="sports"] #app .sports-price-market-context { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body[data-route="sports"] #app .sports-price-market-context label { min-width: 0; }
body[data-route="sports"] #app .sports-price-outcome-labels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
body[data-route="sports"] #app .sports-price-outcome-labels [hidden],
body[data-route="sports"] #app .sports-price-source [hidden] { display: none !important; }
body[data-route="sports"] #app .sports-price-sources { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body[data-route="sports"] #app .sports-price-source { display: grid; align-content: start; gap: 9px; padding: 12px; background: color-mix(in srgb, var(--sports-paper, var(--ref-bg)) 74%, transparent); border: 1px solid var(--sports-rule, var(--ref-line)); }
body[data-route="sports"] #app .sports-price-source legend { padding: 0 4px; color: var(--sports-ink, var(--ref-text)); font-size: .82rem; font-weight: 720; }
body[data-route="sports"] #app .sports-price-source-name input { min-height: 44px; font-size: .76rem; }
body[data-route="sports"] #app .sports-price-cell input { min-height: 44px; font-size: .9rem; }
body[data-route="sports"] #app .sports-price-stake { max-width: 210px; }
body[data-route="sports"] #app .sports-price-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body[data-route="sports"] #app .sports-price-actions .btn { min-height: 44px; }
body[data-route="sports"] #app .sports-price-example-note { margin: -9px 0 0; color: var(--sports-muted, var(--ref-muted)); font-size: .66rem; }
body[data-route="sports"] #app .sports-price-reading { align-self: stretch; min-width: 0; padding: 15px; background: var(--sports-paper, var(--ref-bg)); border-left: 2px solid var(--sports-rule, var(--ref-line)); }
body[data-route="sports"] #app .sports-price-reading > .eyebrow { margin: 0 0 9px; color: var(--sports-red, var(--ref-red)); }
body[data-route="sports"] #app .sports-price-status { margin: 0; color: var(--sports-muted, var(--ref-muted)); font-size: .82rem; line-height: 1.5; }
body[data-route="sports"] #app .sports-price-source-summaries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
body[data-route="sports"] #app .sports-price-source-summary { min-width: 0; display: grid; align-content: start; gap: 6px; padding: 10px; border-top: 1px solid var(--sports-red, var(--ref-red)); background: var(--sports-card, var(--ref-surface)); }
body[data-route="sports"] #app .sports-price-source-summary > span { overflow-wrap: anywhere; color: var(--sports-muted, var(--ref-muted)); font-size: .67rem; }
body[data-route="sports"] #app .sports-price-source-summary > strong { color: var(--sports-ink, var(--ref-text)); font-size: .78rem; line-height: 1.35; }
body[data-route="sports"] #app .sports-price-source-summary > small { color: var(--sports-muted, var(--ref-muted)); font-size: .63rem; line-height: 1.45; }
body[data-route="sports"] #app .sports-price-share-bar { height: 7px; display: flex; overflow: hidden; background: var(--sports-rule, var(--ref-line)); }
body[data-route="sports"] #app .sports-price-share-bar i { min-width: 2px; background: var(--sports-red, var(--ref-red)); }
body[data-route="sports"] #app .sports-price-share-bar i:nth-child(2) { background: var(--sports-ink, var(--ref-text)); }
body[data-route="sports"] #app .sports-price-share-bar i:nth-child(3) { background: #82898a; }
body[data-route="sports"] #app .sports-price-scroll-hint { display: none; margin: 0 0 5px; color: var(--sports-muted, var(--ref-muted)); font-size: .65rem; line-height: 1.3; }
body[data-route="sports"] #app .sports-price-table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
body[data-route="sports"] #app .sports-price-table-scroll:focus-visible { outline: 2px solid var(--sports-red, var(--ref-red)); outline-offset: 2px; }
body[data-route="sports"] #app .sports-price-table { width: 100%; border-collapse: collapse; background: var(--sports-paper, var(--ref-bg)); font-variant-numeric: tabular-nums; }
body[data-route="sports"] #app .sports-price-table th,
body[data-route="sports"] #app .sports-price-table td { padding: 8px 6px; color: var(--sports-ink, var(--ref-text)); background: transparent; border-bottom: 1px solid var(--sports-rule, var(--ref-line)); text-align: right; font-size: .68rem; line-height: 1.3; }
body[data-route="sports"] #app .sports-price-table th { padding: 8px 6px; color: var(--sports-ink, var(--ref-text)); background: transparent; border-bottom: 1px solid var(--sports-rule, var(--ref-line)); text-align: right; font-size: .68rem; line-height: 1.3; }
body[data-route="sports"] #app .sports-price-table th:first-child { text-align: left; }
body[data-route="sports"] #app .sports-price-table thead th { color: var(--sports-muted, var(--ref-muted)); font-size: .62rem; font-weight: 680; }
body[data-route="sports"] #app .sports-price-table .is-best-price { color: var(--sports-red, var(--ref-red)); font-weight: 780; }
body[data-route="sports"] #app .sports-price-best-note { margin: 11px 0 4px; color: var(--sports-ink, var(--ref-text)); font-size: .74rem; font-weight: 700; line-height: 1.4; }
body[data-route="sports"] #app .sports-price-table-note { display: block; color: var(--sports-muted, var(--ref-muted)); font-size: .65rem; line-height: 1.4; }
body[data-route="sports"] #app .sports-price-notes { display: grid; gap: 7px; margin-top: 18px; padding-top: 13px; border-top: 1px solid var(--sports-rule, var(--ref-line)); }
body[data-route="sports"] #app .sports-price-notes p,
body[data-route="sports"] #app .sports-price-notes small { max-width: 110ch; margin: 0; color: var(--sports-muted, var(--ref-muted)); font-size: .69rem; line-height: 1.5; }
@media (max-width: 760px) {
  body[data-route="sports"] #app .sports-price-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  body[data-route="sports"] #app .sports-price-reading { border-top: 2px solid var(--sports-rule, var(--ref-line)); border-left: 0; }
}
@media (max-width: 430px) {
  body[data-route="sports"] #app .sports-price-lab { padding: 14px 12px; }
  body[data-route="sports"] #app .sports-price-heading { gap: 8px; }
  body[data-route="sports"] #app .sports-price-heading h2 { font-size: 1.48rem; }
  body[data-route="sports"] #app .sports-price-market-context,
  body[data-route="sports"] #app .sports-price-sources,
  body[data-route="sports"] #app .sports-price-source-summaries { grid-template-columns: minmax(0, 1fr); }
  body[data-route="sports"] #app .sports-price-scroll-hint { display: block; }
  body[data-route="sports"] #app .sports-price-table { min-width: 550px; }
  body[data-route="sports"] #app .sports-price-table th,
  body[data-route="sports"] #app .sports-price-table td { padding-inline: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-route="sports"] #app .sports-price-lab,
  body[data-route="sports"] #app .sports-price-lab * { scroll-behavior: auto; transition: none !important; animation: none !important; }
}

#app .account-workbench {
  max-width: 1240px;
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(370px, 1.06fr);
  margin: 20px auto 14px;
  color: var(--ref-text);
  border-block: 1px solid var(--ref-line);
  background: var(--ref-surface);
}
#app .account-workbench-lead {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  min-width: 0;
  padding: clamp(21px, 3vw, 36px);
  border-right: 1px solid var(--ref-line);
}
#app .account-workbench-lead > .eyebrow { margin: 0 0 12px; color: var(--ref-red); }
#app .account-workbench-lead > h2 {
  max-width: 18ch;
  margin: 0;
  color: var(--ref-text);
  font: 560 clamp(1.8rem, 3vw, 2.7rem)/1.03 var(--b9-type-editorial);
  letter-spacing: -.035em;
}
#app .account-workbench-lead > p:not(.eyebrow) { max-width: 50ch; margin: 11px 0 18px; color: var(--ref-muted); font-size: .9rem; line-height: 1.55; }
#app .account-workbench-next { width: 100%; max-width: 410px; display: grid; gap: 7px; padding-top: 12px; border-top: 1px solid var(--ref-line); text-decoration: none; }
#app .account-workbench-next > span { color: var(--ref-muted); font-size: .72rem; }
#app .account-workbench-next > strong { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--ref-text); font-size: .9rem; line-height: 1.35; }
#app .account-workbench-next i { color: var(--ref-red); font-size: 1rem; font-style: normal; transition: transform .18s ease; }
#app .account-workbench-next:hover > strong { color: var(--ref-red); }
#app .account-workbench-index { display: grid; align-content: center; min-width: 0; padding: 10px clamp(16px, 2.2vw, 28px); }
#app .account-workbench-index > a {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 7px 4px;
  color: var(--ref-text);
  border-bottom: 1px solid var(--ref-line);
  text-decoration: none;
  transition: padding .18s ease, color .18s ease, background-color .18s ease;
}
#app .account-workbench-index > a:last-child { border-bottom: 0; }
#app .account-workbench-number { color: var(--ref-muted); font: 650 .66rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .account-workbench-index > a > span:nth-child(2) { display: grid; gap: 3px; min-width: 0; }
#app .account-workbench-index strong { font-size: .83rem; font-weight: 700; line-height: 1.2; }
#app .account-workbench-index small { color: var(--ref-muted); font-size: .67rem; line-height: 1.3; }
#app .account-workbench-index > a > b { color: var(--ref-text); font: 550 1.2rem/1 var(--b9-type-editorial); font-variant-numeric: tabular-nums; }
#app .account-workbench-index > a:hover,
#app .account-workbench-index > a:focus-visible { padding-inline: 10px; color: var(--ref-red); background: var(--ref-surface-2); }
#app .account-workbench-index > a:hover strong,
#app .account-workbench-index > a:focus-visible strong { color: var(--ref-red); }
#app .account-workbench-index > a[data-account-source-due="true"] { padding-left: 8px; border-left: 2px solid var(--ref-red); }
#app .account-workbench-index > a[data-account-source-due="true"] > b { color: var(--ref-red); }
#app .account-dashboard-section { padding-top: 4px; }
#app .account-dashboard { grid-template-columns: minmax(250px, .34fr) minmax(0, .66fr); gap: 18px; }
#app .account-profile { top: 94px; border-top: 2px solid var(--ref-red); }
#app .account-profile h2 { max-width: 15ch; margin-bottom: 3px; font-size: clamp(1.55rem, 2.1vw, 2rem); line-height: 1.05; }
#app .account-handle { margin: 0 0 20px; color: var(--ref-muted); font-size: .82rem; }
#app .account-profile-form { gap: 12px; }
#app .account-email-paused { grid-column: 1 / -1; margin: 0; padding: 9px 10px; color: var(--ref-muted); border-left: 2px solid var(--ref-line); background: var(--ref-surface-2); font-size: .7rem; line-height: 1.45; }
#app .account-entry-card .account-email-paused { margin-top: -3px; }
#app .account-preferences-form { display: grid; gap: 9px; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--ref-line); }
#app .account-preferences-form .eyebrow { margin: 0; color: var(--ref-red); }
#app .account-preferences-form h3 { margin: -6px 0 1px; color: var(--ref-text); font-family: var(--b9-type-editorial); font-size: 1.08rem; font-weight: 560; }
#app .account-preferences-form label { display: grid; gap: 5px; color: var(--ref-muted); font-size: .68rem; font-weight: 720; }
#app .account-preferences-form .input-control { min-height: 41px; font-size: .75rem; }
#app .account-preferences-form > p:not(.eyebrow):not(.account-inline-status) { margin: 0; color: var(--ref-muted); font-size: .66rem; line-height: 1.45; }
#app .account-preferences-form button,
#app .account-preferences-form [data-preferences-status] { width: 100%; }
#app .account-inline-status { min-height: 1.2em; margin: 0; color: var(--ref-red); font-size: .77rem; }
#app .account-profile-footer { display: grid; gap: 4px; margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--ref-line); }
#app .account-profile-footer span { color: var(--ref-muted); font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
#app .account-profile-footer strong { font-size: .8rem; font-weight: 650; }
#app .account-actions { gap: 8px; margin-top: 16px; }
#app .account-actions .btn { min-height: 44px; }
#app .account-actions .btn-quiet { justify-content: flex-start; }
#app .account-main { gap: 14px; }
#app .account-record-panel { scroll-margin-top: 88px; }
#app .account-record-panel > .section-heading { align-items: end; }
#app .account-record-panel .section-heading h2 { margin-bottom: 0; }
#app .account-record-panel .section-heading .text-action { min-height: 44px; display: inline-flex; align-items: center; }
#app .saved-account-grid article { min-height: 74px; }
#app .saved-account-grid article > button,
#app .account-guide-list article > button { min-height: 44px; }
#app .account-guide-list { display: grid; }
#app .account-guide-list article { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--ref-line); }
#app .account-guide-list article:last-child { border-bottom: 0; }
#app .account-guide-category { color: var(--ref-red); font-size: .62rem; font-weight: 830; letter-spacing: .07em; text-transform: uppercase; }
#app .account-guide-list h3 { margin: 3px 0 4px; font-size: .95rem; line-height: 1.25; }
#app .account-guide-list h3 a { color: var(--ref-text); text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .account-guide-list h3 a:hover { color: var(--ref-red); }
#app .account-guide-list p { margin: 0; color: var(--ref-muted); font-size: .78rem; line-height: 1.45; }
#app .account-empty-state { padding: 12px 0 2px; }
#app .account-empty-state p { margin: 0 0 8px; color: var(--ref-muted); }
#app .account-security-panel { scroll-margin-top: 88px; padding: 20px; border: 1px solid var(--ref-line); border-top: 2px solid var(--ref-text); border-radius: 3px; background: var(--ref-surface-2); }
#app .account-security-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
#app .account-security-heading h2 { margin: 3px 0 4px; font-size: clamp(1.2rem, 2vw, 1.55rem); }
#app .account-security-heading p:last-child { margin: 0; color: var(--ref-muted); font-size: .82rem; }
#app .account-security-stamp { flex: none; padding: 6px 8px; border: 1px solid var(--ref-line); color: var(--ref-muted); font-size: .58rem; font-weight: 850; letter-spacing: .08em; }
#app .account-security-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(210px, .85fr); gap: 20px; margin-top: 18px; }
#app .account-security-form { display: grid; align-content: start; gap: 11px; }
#app .account-security-form h3,
#app .account-session-control h3 { margin: 0; font-size: .91rem; }
#app .account-security-form label { display: grid; gap: 5px; color: var(--ref-muted); font-size: .73rem; font-weight: 700; }
#app .account-security-form .input-control { min-height: 44px; }
#app .account-security-form .btn,
#app .account-session-control .btn { min-height: 46px; }
#app .account-session-control { display: flex; flex-direction: column; align-items: start; gap: 10px; padding: 16px; border-left: 1px solid var(--ref-line); }
#app .account-session-control p { margin: 0; color: var(--ref-muted); font-size: .82rem; line-height: 1.5; }
#app .account-session-control .account-inline-status { margin-top: auto; }
#app .account-session-heading { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; }
#app .account-session-heading > span { display: grid; min-width: 30px; min-height: 28px; place-items: center; border: 1px solid var(--ref-line); color: var(--ref-muted); font-size: .68rem; font-variant-numeric: tabular-nums; font-weight: 800; }
#app .account-session-list { width: 100%; border-top: 1px solid var(--ref-line); }
#app .account-session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ref-line); }
#app .account-session-row > div { display: grid; min-width: 0; gap: 4px; }
#app .account-session-row strong { overflow-wrap: anywhere; color: var(--ref-text); font-size: .78rem; }
#app .account-session-row small { color: var(--ref-muted); font-size: .66rem; line-height: 1.4; }
#app .account-session-row .btn { flex: none; min-height: 36px; padding: 7px 10px; font-size: .68rem; }
#app .account-session-current { flex: none; padding: 5px 7px; border: 1px solid var(--ref-line); color: var(--ref-red); font-size: .62rem; font-weight: 800; }
#app .account-session-empty { padding: 12px 0; }
#app .account-delete-dialog { width: min(520px, calc(100vw - 28px)); max-width: none; padding: 0; color: var(--ref-text); border: 1px solid var(--ref-line); border-top: 3px solid var(--ref-red); border-radius: 3px; background: var(--ref-surface); box-shadow: 0 24px 80px rgb(0 0 0 / .28); }
#app .account-delete-dialog::backdrop { background: rgb(11 13 15 / .66); backdrop-filter: blur(2px); }
#app .account-delete-dialog form { display: grid; gap: 13px; padding: clamp(18px, 4vw, 28px); }
#app .account-delete-dialog h2 { margin: 0; font-size: clamp(1.28rem, 4vw, 1.65rem); line-height: 1.13; }
#app .account-delete-dialog form > p:not(.eyebrow):not(.account-inline-status) { margin: 0; color: var(--ref-muted); font-size: .86rem; line-height: 1.55; }
#app .account-delete-dialog label { display: grid; gap: 6px; color: var(--ref-muted); font-size: .75rem; font-weight: 750; }
#app .account-delete-dialog .input-control { min-height: 46px; }
#app .account-delete-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
#app .account-delete-actions .btn { min-height: 44px; }
#app .account-delete-dialog .account-inline-status { min-height: 1em; margin: 0; color: var(--ref-red); font-size: .78rem; }
#app .account-contribution-grid { scroll-margin-top: 88px; }
#app .account-contribution-form { align-content: start; gap: 12px; }
#app .account-contribution-form h2 { margin: 0 0 3px; font-size: 1.23rem; }
#app .account-contribution-form .btn { min-height: 46px; }
#app .account-submission-list article { min-height: 58px; }
#app .account-submission-list article:has(.account-submission-withdraw) { align-items: center; }
#app .account-submission-withdraw { grid-column: 2 / -1; justify-self: start; min-height: 34px; padding: 4px 0; color: var(--ref-muted); border: 0; border-bottom: 1px solid var(--ref-line); background: transparent; font: inherit; font-size: .65rem; font-weight: 700; cursor: pointer; }
#app .account-submission-withdraw:hover,
#app .account-submission-withdraw:focus-visible { color: var(--ref-red); border-color: var(--ref-red); }
#app .account-record-count { min-width: 38px; color: var(--ref-muted); font-family: var(--b9-type-editorial); font-size: 1.6rem; text-align: right; }
#app .account-sync-status { max-width: 1240px; min-height: 0; margin: 0 auto; padding-inline: 20px; color: var(--ref-red); font-size: .8rem; }
#app .account-sync-status:empty { display: none; }
#app .account-entry-layout { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); align-items: start; gap: clamp(22px, 4vw, 52px); }
#app .account-entry-brief { padding-top: 17px; border-top: 2px solid var(--ref-red); }
#app .account-entry-brief > .eyebrow { margin: 0 0 12px; color: var(--ref-red); }
#app .account-entry-brief > h2 { max-width: 16ch; margin: 0 0 22px; color: var(--ref-text); font-family: var(--b9-type-editorial); font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 700; line-height: 1.04; letter-spacing: -.045em; }
#app .account-entry-brief > ul { display: grid; margin: 0; padding: 0; border-top: 1px solid var(--ref-line); list-style: none; }
#app .account-entry-brief > ul > li { padding: 0; border-bottom: 1px solid var(--ref-line); }
#app .account-entry-brief > ul > li > a { display: grid; grid-template-columns: 30px minmax(0, 1fr) 14px; gap: 10px; align-items: center; padding: 12px 0; color: inherit; text-decoration: none; }
#app .account-entry-brief > ul > li > a:focus-visible { outline: 2px solid var(--ref-red); outline-offset: 2px; }
#app .account-entry-brief > ul > li > a:hover strong { color: var(--ref-red); }
#app .account-entry-brief > ul > li > a > span { color: var(--ref-red); font: 700 .68rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .account-entry-brief > ul > li > a > div { display: grid; gap: 3px; }
#app .account-entry-brief > ul strong { color: var(--ref-text); font-size: .82rem; }
#app .account-entry-brief > ul small { color: var(--ref-muted); font-size: .71rem; line-height: 1.4; }
#app .account-entry-brief > ul i { color: var(--ref-red); font-size: .88rem; font-style: normal; }
#app .account-auth-shell { min-width: 0; }
#app .account-entry-switch { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 9px; border-bottom: 1px solid var(--ref-line); }
#app .account-entry-switch button { min-height: 46px; padding: 7px 6px; color: var(--ref-muted); border: 0; border-bottom: 2px solid transparent; background: transparent; font: 680 .75rem/1.25 var(--b9-type-interface); cursor: pointer; }
#app .account-entry-switch button[aria-pressed="true"] { color: var(--ref-text); border-bottom-color: var(--ref-red); }
#app .account-entry-switch button:focus-visible { outline: 2px solid var(--ref-red); outline-offset: -3px; }
#app .account-auth-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: stretch; }
#app .account-entry-card[hidden] { display: none !important; }
#app .account-entry-card [data-account-status]:empty { display: none; }
#app .account-entry-card { align-content: start; gap: 13px; border-top: 2px solid var(--ref-line); }
#app .account-entry-card h2 { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2rem); line-height: 1.08; }
#app .account-entry-card > p:not(.eyebrow):not(.muted) { margin: 0; color: var(--ref-muted); line-height: 1.5; }
#app .account-entry-card--register { border-top-color: var(--ref-red); }
#app .account-entry-card--recover { border-top-color: var(--ref-green); }
#app .account-entry-card .recovery-code-input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase; }
#app .account-entry-card .btn { min-height: 46px; }
#app .account-recovery-panel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(230px, .8fr); gap: 14px 22px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--ref-line); }
#app .account-recovery-copy { display: grid; align-content: start; gap: 6px; }
#app .account-recovery-copy .eyebrow { margin: 0; color: var(--ref-green); }
#app .account-recovery-copy h3 { margin: 0; font: 560 1.16rem/1.2 var(--b9-type-editorial); }
#app .account-recovery-copy > p:not(.eyebrow) { margin: 0; color: var(--ref-muted); font-size: .8rem; line-height: 1.5; }
#app .account-recovery-copy .account-recovery-warning { padding-left: 9px; border-left: 2px solid var(--ref-red); }
#app .account-recovery-form { display: grid; align-content: start; gap: 9px; }
#app .account-recovery-form label { display: grid; gap: 5px; color: var(--ref-muted); font-size: .73rem; font-weight: 700; }
#app .account-recovery-form .input-control,
#app .account-recovery-form .btn { min-height: 44px; }
#app .account-recovery-results { grid-column: 1 / -1; padding: 14px; border: 1px solid var(--ref-line); border-left: 3px solid var(--ref-green); background: var(--ref-surface); }
#app .account-recovery-results[hidden] { display: none !important; }
#app .account-recovery-results-heading { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
#app .account-recovery-results-heading h4 { margin: 0; font-size: .88rem; }
#app .account-recovery-results-heading > span { color: var(--ref-muted); font: 700 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .account-recovery-code-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 6px 12px; margin: 12px 0; padding: 0; list-style: none; counter-reset: recovery-code; }
#app .account-recovery-code-list li { display: flex; min-width: 0; min-height: 42px; align-items: center; gap: 10px; padding: 7px 9px; border: 1px solid var(--ref-line); counter-increment: recovery-code; }
#app .account-recovery-code-list li::before { content: counter(recovery-code, decimal-leading-zero); color: var(--ref-muted); font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .account-recovery-code-list code { overflow: hidden; color: var(--ref-text); font: 700 .76rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .035em; white-space: nowrap; }
#app .account-recovery-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#app .account-recovery-actions .btn { min-height: 44px; }
#app .account-recovery-results > .muted { margin: 8px 0 0; color: var(--ref-muted); font-size: .7rem; line-height: 1.45; }
.reader-action-toast { position: fixed; z-index: 1000; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); max-width: min(440px, calc(100vw - 32px)); padding: 13px 16px; color: var(--ref-text); border: 1px solid var(--ref-line); border-left: 3px solid var(--ref-red); border-radius: 3px; background: var(--ref-surface); box-shadow: 0 8px 28px rgb(0 0 0 / .2); opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.reader-action-toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  #app .account-dashboard { grid-template-columns: 1fr; }
  #app .account-profile { position: static; }
  #app .account-profile h2 { max-width: none; }
  #app .account-profile-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .account-profile-form button,
  #app .account-profile-form [data-profile-status] { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  #app .league-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #app .league-command-card { min-height: 210px; padding: 14px 13px 9px; }
  #app .account-workbench { grid-template-columns: minmax(0, 1fr); margin: 14px 14px 10px; }
  #app .account-workbench-lead { padding: 19px 17px; border-right: 0; border-bottom: 1px solid var(--ref-line); }
  #app .account-workbench-lead > h2 { max-width: 20ch; font-size: clamp(1.65rem, 7vw, 2.15rem); }
  #app .account-workbench-lead > p:not(.eyebrow) { margin-block: 8px 13px; font-size: .84rem; }
  #app .account-workbench-index { padding: 4px 14px; }
  #app .account-workbench-index > a { min-height: 53px; }
  #app .account-entry-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  #app .account-auth-shell { order: -1; }
  #app .account-entry-brief { padding-top: 13px; }
  #app .account-entry-brief > h2 { max-width: 24ch; margin-bottom: 13px; font-size: 1.45rem; }
  #app .account-entry-brief > ul > li > a { padding-block: 9px; }
  #app .account-security-grid { grid-template-columns: 1fr; }
  #app .account-recovery-panel { grid-template-columns: minmax(0, 1fr); }
  #app .account-session-control { border-left: 0; border-top: 1px solid var(--ref-line); padding: 15px 0 0; }
  #app .sports-league-panel { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  #app .sports-league-panel-count { display: flex; grid-column: 1; align-items: baseline; gap: 10px; padding: 10px 0 0; border-top: 1px solid var(--ref-line); border-left: 0; }
  #app .sports-league-panel-count strong { font-size: 1.8rem; }
}
@media (max-width: 560px) {
  #app .league-command-card { min-height: 204px; }
  #app .league-command-code { margin-top: 19px; font-size: clamp(2.05rem, 10vw, 2.8rem); }
  #app .league-command-card > strong { font-size: 1rem; }
  #app .league-command-context { font-size: .66rem; }
  #app .sports-league-panel { padding: 12px; }
  #app .sports-league-panel-copy > h3 { font-size: 1.2rem; }
  #app .sports-league-panel-summary { font-size: .82rem; }
  #app .account-profile-form { grid-template-columns: 1fr; }
  #app .account-profile-form button,
  #app .account-profile-form [data-profile-status] { grid-column: auto; }
  #app .account-guide-list article { grid-template-columns: 1fr; gap: 8px; align-items: start; }
  #app .account-guide-list article > button { justify-self: start; }
  #app .account-delete-actions { display: grid; grid-template-columns: 1fr; }
  #app .account-security-panel { padding: 16px; }
  #app .account-security-stamp { font-size: .5rem; }
  #app .account-contribution-grid { grid-template-columns: 1fr; }
  #app .account-contribution-form { padding: 18px; }
}
@media (max-width: 380px) {
  #app .league-command-grid { gap: 7px; }
  #app .league-command-card { min-height: 196px; padding-inline: 10px; }
  #app .league-command-index { font-size: .56rem; }
}
@media (prefers-reduced-motion: reduce) {
  #app .league-command-card,
  #app .league-command-action,
  #app .league-command-action i,
  #app .account-workbench-index > a,
  #app .account-workbench-next i { transition: none !important; }
  .reader-action-toast { transition: none !important; }
}

#app .account-activity-panel { border-top: 2px solid var(--ref-line); }
#app .account-activity-panel .section-heading { align-items: start; }
#app .account-activity-panel .section-heading p:last-child { max-width: 58ch; margin: 7px 0 0; color: var(--ref-muted); font-size: .76rem; line-height: 1.5; }
#app .account-activity-list { position: relative; display: grid; gap: 0; margin: 0; padding: 2px 0 2px 7px; list-style: none; }
#app .account-activity-list::before { position: absolute; inset: 6px auto 6px 9px; width: 1px; content: ""; background: var(--ref-line); }
#app .account-activity-list > li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 9px; align-items: center; min-height: 40px; padding-block: 5px; }
#app .account-activity-mark { z-index: 1; width: 6px; height: 6px; border: 1px solid var(--ref-red); border-radius: 50%; background: var(--ref-surface); }
#app .account-activity-list strong { color: var(--ref-text); font-size: .76rem; font-weight: 680; }
#app .account-activity-list time { color: var(--ref-muted); font-size: .66rem; font-variant-numeric: tabular-nums; text-align: right; }

@media (max-width: 700px) {
  #app .account-activity-list > li { grid-template-columns: 12px minmax(0, 1fr); gap: 7px; }
  #app .account-activity-list time { grid-column: 2; text-align: left; }
}

/* Source: styles/operator-card-ledger.css */
/* Source-backed operator disclosure: the visible movement follows real record state. */
#app .operator-record-ledger {
  grid-column: 1 / -1;
  min-width: 0;
  border-top: 1px solid var(--b9-line);
  border-bottom: 1px solid var(--b9-line);
}

#app .operator-record-ledger > summary {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  color: var(--b9-ink);
  cursor: pointer;
  list-style: none;
  text-align: left;
}

#app .operator-record-ledger > summary::-webkit-details-marker { display: none; }

#app .operator-record-ledger-summary-copy { display: grid; min-width: 0; gap: 3px; }
#app .operator-record-ledger-summary-copy strong { font-size: .8rem; font-weight: 700; line-height: 1.3; }
#app .operator-record-ledger-summary-copy small { color: var(--b9-muted); font-size: .72rem; line-height: 1.35; }

#app .operator-record-ledger-indicator {
  position: relative;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border: 1px solid var(--b9-line);
}

#app .operator-record-ledger-indicator::before,
#app .operator-record-ledger-indicator::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 1px;
  background: var(--b9-red);
  content: "";
  transform: translate(-50%, -50%);
}

#app .operator-record-ledger-indicator::after {
  width: 1px;
  height: 8px;
  transition: height .16s ease;
}

#app .operator-record-ledger[open] .operator-record-ledger-indicator::after { height: 0; }
#app .operator-record-ledger > summary:focus-visible { outline: 2px solid var(--b9-red); outline-offset: 3px; }
#app .operator-record-ledger > summary:hover .operator-record-ledger-indicator { border-color: var(--b9-red); }

#app .operator-record-ledger-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr);
  gap: 14px;
  padding: 8px 0 14px;
}

#app .operator-record-ledger-section { min-width: 0; }
#app .operator-record-ledger-section h4 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 5px;
  color: var(--b9-ink);
  font-size: .74rem;
  font-weight: 720;
  line-height: 1.4;
}

#app .operator-record-ledger-section h4 > span,
#app .operator-record-ledger-sequence,
#app .operator-record-ledger-formats li > span {
  color: var(--b9-red);
  font-family: var(--b9-type-interface);
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

#app .operator-record-ledger-section ol { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
#app .operator-record-ledger-source {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 7px 0;
  border-top: 1px solid var(--b9-line);
}

#app .operator-record-ledger-sequence { align-self: stretch; padding-top: 2px; border-left: 1px solid color-mix(in srgb, var(--b9-red) 48%, var(--b9-line)); text-align: right; }
#app .operator-record-ledger-source-copy { display: grid; min-width: 0; gap: 2px; }
#app .operator-record-ledger-source-copy a { color: var(--b9-ink); font-size: .74rem; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .operator-record-ledger-source-copy a:hover,
#app .operator-record-ledger-formats a:hover { color: var(--b9-red); }
#app .operator-record-ledger-source-copy small { color: var(--b9-muted); font-size: .66rem; line-height: 1.35; overflow-wrap: anywhere; }
#app .operator-record-ledger-date { color: var(--b9-muted); font-size: .65rem; font-variant-numeric: tabular-nums; text-align: right; }

#app .operator-record-ledger-formats li {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 7px;
  align-items: baseline;
  padding: 7px 0;
  border-top: 1px solid var(--b9-line);
}

#app .operator-record-ledger-formats a { color: var(--b9-ink); font-size: .74rem; font-weight: 620; line-height: 1.35; overflow-wrap: anywhere; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .operator-record-ledger-more { display: inline-flex; min-height: 40px; align-items: center; color: var(--b9-muted); font-size: .72rem; font-weight: 650; line-height: 1.35; text-decoration-thickness: 1px; text-underline-offset: 3px; }
#app .operator-record-ledger-more:hover { color: var(--b9-red); }
#app .operator-record-ledger-empty { margin: 0; padding: 8px 0; color: var(--b9-muted); font-size: .72rem; line-height: 1.45; }

#app .reference-ranking-card.casino-card.is-compare-selected {
  border-color: color-mix(in srgb, var(--b9-red) 72%, var(--b9-line));
  background: color-mix(in srgb, var(--b9-panel) 97%, var(--b9-red));
}

#app .reference-ranking-card.casino-card.is-compare-selected > .operator-brand-cell { box-shadow: inset 2px 0 var(--b9-red); }
#app .reference-ranking-card.casino-card.is-saved .operator-tools [data-favorite-id][aria-pressed="true"] { border-color: color-mix(in srgb, var(--b9-red) 52%, var(--b9-line)); }

@media (max-width: 760px) {
  #app .reference-ranking-card.casino-card > .operator-action-cell .operator-record-ledger { grid-column: 1 / -1; }
  #app .operator-record-ledger-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  #app .operator-record-ledger-formats { padding-top: 4px; border-top: 1px solid var(--b9-line); }
  #app .operator-record-ledger-source { grid-template-columns: 20px minmax(0, 1fr); }
  #app .operator-record-ledger-date { grid-column: 2; text-align: left; }
  #app .operator-record-ledger-formats ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  #app .operator-record-ledger-indicator::after { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes operator-ledger-reveal {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
  }

  #app .operator-record-ledger[open] > .operator-record-ledger-panel { animation: operator-ledger-reveal .16s ease-out both; }
}

/* Source: styles/offer-locker.css */
/* Private reader research file for published bonus records. */
#app .offer-locker-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  color: var(--b9-ink);
  background: transparent;
  border: 1px solid var(--b9-line);
  border-radius: 2px;
  font: inherit;
  font-size: .76rem;
  font-weight: 740;
  text-align: left;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
#app .offer-locker-toggle::before {
  width: 9px;
  height: 12px;
  content: "";
  border: 1px solid currentColor;
  clip-path: polygon(0 0,100% 0,100% 100%,50% 72%,0 100%);
}
#app .offer-locker-toggle:hover,
#app .offer-locker-toggle:focus-visible { color: var(--b9-red); border-color: var(--b9-red); background: var(--b9-paper); }
#app .offer-locker-toggle:focus-visible { outline: 2px solid var(--b9-red); outline-offset: 2px; }
#app .offer-locker-toggle.is-saved { color: var(--b9-red); border-color: color-mix(in srgb, var(--b9-red) 55%, var(--b9-line)); background: color-mix(in srgb, var(--b9-red) 5%, var(--b9-panel)); }
#app .offer-locker-toggle.is-saved::before { background: var(--b9-red); }
#app .offer-ledger-actions .offer-locker-toggle { min-width: 142px; }

#app .offer-locker-section {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 16px;
  margin: 0 0 22px;
  padding: clamp(17px, 2.5vw, 27px);
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--b9-red);
  border-radius: 3px;
  background: var(--b9-panel);
  overflow: hidden;
}
#app .offer-locker-section::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 auto auto;
  width: min(31%, 250px);
  height: 125px;
  content: "";
  opacity: .44;
  pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 17px, color-mix(in srgb, var(--b9-line) 75%, transparent) 17px 18px), repeating-linear-gradient(0deg, transparent 0 17px, color-mix(in srgb, var(--b9-line) 75%, transparent) 17px 18px);
  mask-image: linear-gradient(135deg, transparent 3%, #000 100%);
}
#app .offer-locker-section-head { display: flex; align-items: start; justify-content: space-between; gap: 18px; }
#app .offer-locker-section-head > div { max-width: 66ch; }
#app .offer-locker-section-head .eyebrow { margin-bottom: 6px; color: var(--b9-red); }
#app .offer-locker-section-head h2 { margin: 0; color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: clamp(1.45rem, 2vw, 2rem); font-weight: 540; line-height: 1.05; }
#app .offer-locker-section-head p:last-child { margin: 8px 0 0; color: var(--b9-muted); font-size: .85rem; line-height: 1.55; }
#app .offer-locker-section-count { display: grid; min-width: 46px; min-height: 42px; place-items: center; padding-inline: 8px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: var(--b9-paper); font: 700 .83rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app .offer-locker-grid { display: grid; gap: 12px; }
#app .offer-locker-toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: 8px 13px; padding: 10px; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .offer-locker-toolbar > label { display: grid; gap: 4px; color: var(--b9-muted); font-size: .64rem; font-weight: 720; }
#app .offer-locker-toolbar .input-control { min-width: 155px; min-height: 38px; padding-block: 5px; font-size: .73rem; }
#app .offer-locker-toolbar-count { align-self: center; margin-left: auto; color: var(--b9-muted); font: 700 .63rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .offer-locker-clear,
#app .offer-locker-filter-empty button { min-height: 38px; padding: 6px 9px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: transparent; font: inherit; font-size: .68rem; font-weight: 720; cursor: pointer; }
#app .offer-locker-clear:hover,
#app .offer-locker-filter-empty button:hover { color: var(--b9-red); border-color: var(--b9-red); }
#app .offer-locker-filter-empty { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px; border: 1px dashed var(--b9-line); }
#app .offer-locker-filter-empty p { margin: 0; color: var(--b9-muted); font-size: .78rem; }
#app .offer-locker-card { position: relative; display: grid; gap: 14px; padding: clamp(14px, 2vw, 21px); border: 1px solid var(--b9-line); border-left: 2px solid var(--b9-line); background: var(--b9-panel); transition: border-color .18s ease, background-color .18s ease; }
#app .offer-locker-card:hover { border-left-color: var(--b9-red); background: color-mix(in srgb, var(--b9-paper) 66%, var(--b9-panel)); }
#app .offer-locker-card[data-offer-state="source-checked"] { border-left-color: #517c5c; }
#app .offer-locker-card[data-offer-state="dismissed"] { opacity: .76; }
#app .offer-locker-card[data-offer-current="false"] { border-left-color: #947455; }
#app .offer-locker-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--b9-line); }
#app .offer-locker-identity { display: grid; min-width: 0; gap: 3px; }
#app .offer-locker-identity > span { color: var(--b9-muted); font: 700 .58rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
#app .offer-locker-identity > strong { color: var(--b9-ink); font-size: .88rem; }
#app .offer-locker-identity > small { color: var(--b9-muted); font-size: .7rem; }
#app .offer-locker-state { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--b9-muted); font-size: .68rem; font-weight: 730; }
#app .offer-locker-state i { width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 50%; background: transparent; }
#app .offer-locker-card[data-offer-state="source-checked"] .offer-locker-state i { color: #517c5c; background: #517c5c; }
#app .offer-locker-card[data-offer-state="dismissed"] .offer-locker-state i { color: var(--b9-muted); }
#app .offer-locker-state.is-stale { color: #947455; }
#app .offer-locker-card-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(16px, 3vw, 38px); }
#app .offer-locker-offer-copy { align-self: center; }
#app .offer-locker-type { margin: 0 0 5px; color: var(--b9-red); font-size: .62rem; font-weight: 780; letter-spacing: .045em; text-transform: uppercase; }
#app .offer-locker-offer-copy h3 { max-width: 33ch; margin: 0 0 7px; color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: clamp(1.12rem, 1.8vw, 1.55rem); font-weight: 570; line-height: 1.13; }
#app .offer-locker-offer-copy > p:not(.offer-locker-type):not(.offer-locker-stale) { max-width: 72ch; margin: 0; color: var(--b9-muted); font-size: .81rem; line-height: 1.55; }
#app .offer-locker-term-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .offer-locker-term-board > div { display: grid; align-content: start; gap: 7px; min-height: 66px; padding: 10px 12px; }
#app .offer-locker-term-board > div:nth-child(odd) { border-right: 1px solid var(--b9-line); }
#app .offer-locker-term-board > div:nth-child(n + 3) { border-top: 1px solid var(--b9-line); }
#app .offer-locker-term-board span { color: var(--b9-muted); font: 700 .58rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .07em; }
#app .offer-locker-term-board strong { color: var(--b9-ink); font-size: .77rem; line-height: 1.35; overflow-wrap: anywhere; }
#app .offer-locker-stale { margin: 10px 0 0; padding: 8px 10px; color: var(--b9-ink); border-left: 2px solid #947455; background: var(--b9-paper); font-size: .72rem; line-height: 1.45; }
#app .offer-locker-record-meta { display: flex; flex-wrap: wrap; gap: 6px 20px; padding-block: 10px; border-block: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .65rem; }
#app .offer-locker-record-meta span { display: inline-flex; gap: 5px; }
#app .offer-locker-record-meta b { color: var(--b9-ink); font-weight: 700; }
#app .offer-locker-snapshot { display: grid; gap: 9px; padding: 11px 13px; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .offer-locker-snapshot.is-changed { border-left: 2px solid #947455; }
#app .offer-locker-snapshot.is-matched { display: block; margin: 0; color: var(--b9-muted); font-size: .68rem; line-height: 1.45; }
#app .offer-locker-snapshot > div:first-child { display: grid; gap: 3px; }
#app .offer-locker-snapshot strong { color: var(--b9-ink); font-size: .75rem; }
#app .offer-locker-snapshot small { color: var(--b9-muted); font-size: .63rem; }
#app .offer-locker-snapshot > span { color: var(--b9-muted); font-size: .68rem; }
#app .offer-locker-snapshot > button { justify-self: start; min-height: 38px; padding: 5px 9px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: transparent; font: inherit; font-size: .67rem; font-weight: 720; cursor: pointer; }
#app .offer-locker-snapshot > button:hover,
#app .offer-locker-snapshot > button:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .offer-locker-snapshot details > summary { min-height: 38px; display: flex; align-items: center; color: var(--b9-ink); font-size: .7rem; font-weight: 720; cursor: pointer; }
#app .offer-locker-snapshot details > dl { display: grid; margin: 0; border-top: 1px solid var(--b9-line); }
#app .offer-locker-snapshot details > dl > div { display: grid; grid-template-columns: minmax(100px, .6fr) minmax(0, 1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--b9-line); }
#app .offer-locker-snapshot details dt { color: var(--b9-muted); font-size: .67rem; font-weight: 700; }
#app .offer-locker-snapshot details dd { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 8px; margin: 0; }
#app .offer-locker-snapshot details dd span { color: var(--b9-muted); font-size: .59rem; }
#app .offer-locker-snapshot details dd b { color: var(--b9-ink); font-size: .67rem; font-weight: 550; line-height: 1.4; overflow-wrap: anywhere; }
#app .offer-locker-personal-form { display: grid; grid-template-columns: minmax(180px, .42fr) minmax(220px, 1fr); gap: 12px 16px; align-items: start; }
#app .offer-locker-personal-form > label { display: grid; gap: 5px; color: var(--b9-ink); font-size: .72rem; font-weight: 740; }
#app .offer-locker-personal-form .input-control { width: 100%; min-height: 42px; font-size: .78rem; }
#app .offer-locker-personal-form textarea.input-control { min-height: 68px; resize: vertical; }
#app .offer-locker-personal-form > label > small { color: var(--b9-muted); font-size: .62rem; font-weight: 450; line-height: 1.4; }
#app .offer-locker-actions { display: flex; grid-column: 1 / -1; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
#app .offer-locker-actions > a,
#app .offer-locker-actions > span,
#app .offer-locker-remove { color: var(--b9-ink); font-size: .72rem; font-weight: 680; text-underline-offset: 3px; }
#app .offer-locker-actions .btn { min-height: 42px; }
#app .offer-locker-compare { min-height: 40px; padding: 4px 0; color: var(--b9-ink); border: 0; background: transparent; font: inherit; font-size: .72rem; font-weight: 720; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#app .offer-locker-compare:hover,
#app .offer-locker-compare:focus-visible { color: var(--b9-red); }
#app .offer-locker-remove { min-height: 40px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; }
#app .offer-locker-remove:hover,
#app .offer-locker-remove:focus-visible { color: var(--b9-red); text-decoration: underline; }
#app .offer-locker-inline-status { grid-column: 1 / -1; min-height: 1em; margin: 0; color: var(--b9-muted); font-size: .71rem; }
#app .offer-locker-responsible-note { margin: 0; padding-top: 12px; color: var(--b9-muted); border-top: 1px solid var(--b9-line); font-size: .68rem; line-height: 1.5; }
#app .offer-locker-empty { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 15px; align-items: start; padding: 17px; border: 1px dashed var(--b9-line); background: var(--b9-paper); }
#app .offer-locker-empty-mark { display: grid; width: 52px; height: 52px; place-items: center; color: var(--b9-red); border: 1px solid var(--b9-line); font: 700 .79rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .offer-locker-empty h3 { margin: 0 0 4px; color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: 1.08rem; font-weight: 570; }
#app .offer-locker-empty p { margin: 0 0 9px; color: var(--b9-muted); font-size: .77rem; line-height: 1.5; }
#app .offer-locker-empty .text-action { font-size: .76rem; }

#app .offer-locker-compact-list { display: grid; }
#app .offer-locker-compact { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding-block: 9px; border-bottom: 1px solid var(--b9-line); }
#app .offer-locker-compact-index { color: var(--b9-red); font: 700 .62rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .offer-locker-compact-main { display: grid; min-width: 0; gap: 2px; }
#app .offer-locker-compact-main > span { color: var(--b9-muted); font-size: .6rem; font-weight: 700; letter-spacing: .025em; }
#app .offer-locker-compact-main > strong { color: var(--b9-ink); font-family: var(--b9-type-editorial); font-size: .82rem; font-weight: 570; line-height: 1.25; }
#app .offer-locker-compact-main > small { color: var(--b9-muted); font-size: .61rem; line-height: 1.35; }
#app .offer-locker-compact > a,
#app .offer-locker-compact > button { color: var(--b9-ink); font-size: .65rem; font-weight: 720; }
#app .offer-locker-compact > button { padding: 5px; border: 0; background: transparent; cursor: pointer; }
#app .offer-locker-compact > button:hover { color: var(--b9-red); text-decoration: underline; }
#app .offer-locker-more { margin: 8px 0 0; color: var(--b9-muted); font-size: .68rem; }
#app .offer-locker-desk-section > .offer-locker-desk-link { display: inline-flex; min-height: 40px; align-items: center; gap: 6px; margin-top: 8px; color: var(--b9-ink); font-size: .71rem; font-weight: 740; text-underline-offset: 3px; }

@media (max-width: 760px) {
  #app .offer-locker-card-body { grid-template-columns: minmax(0, 1fr); }
  #app .offer-locker-personal-form { grid-template-columns: 1fr; }
  #app .offer-locker-actions { grid-column: 1; }
  #app .offer-locker-toolbar-count { margin-left: 0; }
  #app .offer-locker-inline-status { grid-column: 1; }
  #app .offer-locker-compact { grid-template-columns: 24px minmax(0, 1fr) auto; }
  #app .offer-locker-compact > a { display: none; }
}
@media (max-width: 460px) {
  #app .offer-locker-section { gap: 12px; padding: 14px; }
  #app .offer-locker-section-head { gap: 9px; }
  #app .offer-locker-section-count { min-width: 38px; min-height: 36px; }
  #app .offer-locker-state { max-width: 120px; align-items: start; line-height: 1.3; }
  #app .offer-locker-card-head { align-items: start; }
  #app .offer-locker-record-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  #app .offer-locker-record-meta span { display: grid; gap: 2px; }
  #app .offer-locker-term-board strong { font-size: .72rem; }
  #app .offer-locker-compact { grid-template-columns: 22px minmax(0, 1fr); }
  #app .offer-locker-compact > button { grid-column: 2; justify-self: start; padding-left: 0; }
  #app .offer-locker-empty { grid-template-columns: 40px minmax(0, 1fr); gap: 11px; padding: 12px; }
  #app .offer-locker-empty-mark { width: 38px; height: 38px; }
  #app .offer-locker-filter-empty { align-items: start; flex-direction: column; }
  #app .offer-locker-toolbar > label { flex: 1 1 135px; }
  #app .offer-locker-toolbar .input-control { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #app .offer-locker-toggle,
  #app .offer-locker-card { transition: none; }
}

/* Source: styles/research-notebook.css */
/* Research notebook: a quiet source desk that reads as editorial work, not a generic dashboard. */
#app .research-notebook {
  --research-edge: color-mix(in srgb, var(--b9-red) 68%, var(--b9-line));
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 17px;
  margin: 0 0 22px;
  padding: clamp(16px, 2.4vw, 28px);
  overflow: hidden;
  border: 1px solid var(--b9-line);
  border-top: 2px solid var(--research-edge);
  border-radius: 3px;
  background: var(--b9-panel);
}

#app .research-notebook::before {
  position: absolute;
  z-index: -1;
  top: -45px;
  right: -14px;
  width: min(44vw, 440px);
  height: 200px;
  content: "";
  opacity: .44;
  pointer-events: none;
  background: repeating-linear-gradient(120deg, transparent 0 10px, color-mix(in srgb, var(--b9-line) 83%, transparent) 10px 11px);
  mask-image: linear-gradient(132deg, transparent 2%, #000 88%);
}

#app .research-notebook-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 90px;
}

#app .research-notebook-head > div { max-width: 68ch; }
#app .research-notebook-head-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 11px; }
#app .research-notebook-export { min-height: 40px; padding: 7px 10px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: var(--b9-paper); font: inherit; font-size: .66rem; font-weight: 740; cursor: pointer; transition: border-color .18s ease, color .18s ease; }
#app .research-notebook-export:hover,
#app .research-notebook-export:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .research-notebook-export:disabled { color: var(--b9-muted); background: var(--b9-panel); cursor: not-allowed; }
#app .research-notebook-head .eyebrow { margin: 0 0 7px; color: var(--b9-red); }
#app .research-notebook-head h2 {
  margin: 0;
  color: var(--b9-ink);
  font-family: var(--b9-type-editorial);
  font-size: clamp(1.7rem, 2.8vw, 2.55rem);
  font-weight: 540;
  line-height: 1;
  letter-spacing: -.025em;
}
#app .research-notebook-head p:last-child { margin: 9px 0 0; color: var(--b9-muted); font-size: .82rem; line-height: 1.55; }

#app .research-notebook-seal {
  position: relative;
  display: grid;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--b9-line);
  border-radius: 50%;
  color: var(--b9-red);
  background: color-mix(in srgb, var(--b9-paper) 78%, transparent);
}
#app .research-notebook-seal::before,
#app .research-notebook-seal::after { position: absolute; content: ""; inset: 7px; border: 1px solid var(--b9-line); border-radius: 50%; }
#app .research-notebook-seal::after { inset: 14px; border-style: dashed; opacity: .75; }
#app .research-notebook-seal b { z-index: 1; font: 650 1.55rem/1 var(--b9-type-editorial); }
#app .research-notebook-seal i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--b9-red); }
#app .research-notebook-seal i:first-of-type { top: 5px; left: calc(50% - 2px); }
#app .research-notebook-seal i:last-of-type { bottom: 5px; left: calc(50% - 2px); }

#app .research-notebook-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--b9-line);
  background: var(--b9-paper);
}
#app .research-notebook-metrics > div { display: grid; gap: 10px; min-width: 0; min-height: 78px; padding: 12px 13px; border-right: 1px solid var(--b9-line); }
#app .research-notebook-metrics > div:last-child { border-right: 0; }
#app .research-notebook-metrics > div > span { color: var(--b9-muted); font: 700 .59rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .09em; }
#app .research-notebook-metrics > div > strong { color: var(--b9-ink); font: 570 1.35rem/1 var(--b9-type-editorial); font-variant-numeric: tabular-nums; }
#app .research-notebook-metrics > .is-due > strong { color: var(--b9-red); }
#app .research-notebook-metrics > .is-ready > strong { color: #947455; }
#app .research-next-actions { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(3, minmax(0, 1fr)); align-items: stretch; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .research-next-actions > strong { display: flex; min-height: 50px; align-items: center; padding: 9px 12px; color: var(--b9-ink); font: 560 1.02rem/1.2 var(--b9-type-editorial); }
#app .research-next-actions > button { display: flex; min-width: 0; min-height: 50px; align-items: center; justify-content: space-between; gap: 9px; padding: 8px 11px; color: var(--b9-muted); border: 0; border-left: 1px solid var(--b9-line); background: transparent; font: inherit; font-size: .64rem; text-align: left; cursor: pointer; transition: color .16s ease, background-color .16s ease; }
#app .research-next-actions > button:hover,
#app .research-next-actions > button:focus-visible { color: var(--b9-red); background: color-mix(in srgb, var(--b9-red) 5%, var(--b9-paper)); }
#app .research-next-actions > button > b { color: var(--b9-ink); font: 600 1rem/1 var(--b9-type-editorial); font-variant-numeric: tabular-nums; }
#app .research-next-actions > button:first-of-type > b { color: var(--b9-red); }

#app .research-note-create { border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .research-note-create > summary {
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  color: var(--b9-ink);
  cursor: pointer;
  list-style: none;
}
#app .research-note-create > summary::-webkit-details-marker { display: none; }
#app .research-note-create > summary > span { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 760; }
#app .research-note-create > summary > span > b { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid var(--b9-red); color: var(--b9-red); font: 500 1.1rem/1 var(--b9-type-editorial); transition: color .18s ease, background-color .18s ease, transform .18s ease; }
#app .research-note-create > summary:hover > span > b,
#app .research-note-create[open] > summary > span > b { color: var(--b9-paper); background: var(--b9-red); transform: rotate(45deg); }
#app .research-note-create > summary > small { color: var(--b9-muted); font-size: .65rem; text-align: right; }
#app .research-note-create[open] > summary { border-bottom: 1px solid var(--b9-line); }

#app .research-note-form { padding: 15px; background: var(--b9-paper); }
#app .research-note-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
#app .research-note-fields > label { display: grid; min-width: 0; gap: 5px; color: var(--b9-ink); font-size: .69rem; font-weight: 730; }
#app .research-note-fields > .research-field-title { grid-column: span 2; }
#app .research-note-fields > .research-field-observation { grid-column: 1 / -1; }
#app .research-duplicate-warning { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 11px; padding: 9px 10px; border-left: 2px solid #947455; background: color-mix(in srgb, #947455 7%, var(--b9-paper)); }
#app .research-duplicate-warning[hidden] { display: none; }
#app .research-duplicate-warning > span { color: var(--b9-ink); font-size: .67rem; line-height: 1.5; }
#app .research-duplicate-warning > button { min-height: 36px; flex: 0 0 auto; padding: 5px 8px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: var(--b9-paper); font: inherit; font-size: .62rem; font-weight: 730; cursor: pointer; }
#app .research-duplicate-warning > button:hover,
#app .research-duplicate-warning > button:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .research-note-fields .input-control { width: 100%; min-height: 42px; font-size: .75rem; }
#app .research-note-fields textarea.input-control { min-height: 96px; resize: vertical; line-height: 1.5; }
#app .research-note-fields > label > small { color: var(--b9-muted); font-size: .61rem; font-weight: 450; line-height: 1.45; }
#app .research-note-form-footer { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 14px; margin-top: 12px; }
#app .research-note-form-footer > p { min-height: 1em; flex: 1 1 240px; margin: 0; color: var(--b9-muted); font-size: .7rem; }
#app .research-note-form-footer .btn { min-height: 42px; }

#app .research-notebook-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 9px 12px;
  padding: 10px;
  border: 1px solid var(--b9-line);
  background: var(--b9-paper);
}
#app .research-notebook-toolbar > label { display: grid; min-width: 145px; gap: 4px; color: var(--b9-muted); font-size: .62rem; font-weight: 730; }
#app .research-notebook-toolbar > .research-search { flex: 1 1 215px; }
#app .research-notebook-toolbar .input-control { width: 100%; min-width: 0; min-height: 39px; padding-block: 5px; font-size: .72rem; }
#app .research-notebook-result-count { align-self: center; margin-left: auto; color: var(--b9-muted); font: 700 .61rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }

#app .research-notebook-list { display: grid; gap: 11px; }
#app .research-note-card { display: grid; gap: 12px; min-width: 0; padding: clamp(13px, 1.8vw, 19px); border: 1px solid var(--b9-line); border-left: 2px solid var(--b9-line); background: var(--b9-panel); transition: border-color .2s ease, background-color .2s ease; }
#app .research-note-card[hidden],
#app .research-notebook-empty[hidden],
#app .research-note-edit[hidden] { display: none !important; }
#app .research-note-card:hover { border-left-color: var(--b9-red); background: color-mix(in srgb, var(--b9-paper) 70%, var(--b9-panel)); }
#app .research-note-card[data-research-status="verified"] { border-left-color: #527b5d; }
#app .research-note-card[data-research-status="question"] { border-left-color: #aa8150; }
#app .research-note-card[data-research-status="resolved"] { opacity: .8; }
#app .research-note-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 9px; border-bottom: 1px solid var(--b9-line); }
#app .research-note-stamp { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 7px; color: var(--b9-muted); font: 700 .58rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .055em; text-transform: uppercase; }
#app .research-note-stamp i { width: 4px; height: 4px; border-radius: 50%; background: var(--b9-red); }
#app .research-note-card-head time { color: var(--b9-muted); font-size: .62rem; }
#app .research-note-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .43fr); gap: clamp(14px, 2.4vw, 28px); align-items: start; }
#app .research-note-copy h3 { margin: 1px 0 8px; color: var(--b9-ink); font: 570 clamp(1.05rem, 1.7vw, 1.42rem)/1.15 var(--b9-type-editorial); }
#app .research-note-copy p { margin: 0; color: var(--b9-ink); font-size: .79rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
#app .research-note-copy .research-note-empty-observation { color: var(--b9-muted); font-style: italic; }
#app .research-checklist { min-width: 0; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .research-checklist > summary { display: flex; min-height: 43px; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; color: var(--b9-ink); cursor: pointer; list-style: none; }
#app .research-checklist > summary::-webkit-details-marker { display: none; }
#app .research-checklist > summary > span { display: inline-flex; align-items: center; gap: 8px; font-size: .66rem; font-weight: 760; }
#app .research-checklist > summary > span > b { display: grid; width: 20px; height: 20px; place-items: center; color: var(--b9-red); border: 1px solid var(--b9-line); font: 650 .78rem/1 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .research-checklist > summary > strong { color: var(--b9-muted); font: 700 .58rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; text-align: right; }
#app .research-checklist-progress { height: 3px; overflow: hidden; background: var(--b9-line); }
#app .research-checklist-progress > i { display: block; width: var(--research-progress, 0%); height: 100%; background: var(--b9-red); transition: width .18s ease; }
#app .research-checklist-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; padding: 6px 10px; }
#app .research-checklist-item { display: flex; min-width: 0; min-height: 38px; align-items: center; gap: 8px; color: var(--b9-ink); font-size: .64rem; line-height: 1.4; cursor: pointer; }
#app .research-checklist-item input { width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--b9-red); cursor: pointer; }
#app .research-checklist-item:has(input:checked) span { color: var(--b9-muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--b9-muted) 48%, transparent); }
#app .research-checklist > p { margin: 0; padding: 8px 10px; border-top: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .6rem; line-height: 1.45; }
#app .research-note-action:disabled { color: var(--b9-muted); text-decoration: none; cursor: not-allowed; opacity: .62; }
#app .research-note-reference { display: grid; min-width: 0; gap: 7px; padding: 11px 12px; border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .research-note-reference-kicker { color: var(--b9-muted); font: 700 .55rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .1em; }
#app .research-note-reference > a,
#app .research-note-source-missing { min-width: 0; color: var(--b9-ink); font-size: .72rem; font-weight: 720; overflow-wrap: anywhere; text-underline-offset: 3px; }
#app .research-note-reference > a:hover { color: var(--b9-red); }
#app .research-note-reference > a > span { color: var(--b9-red); }
#app .research-note-source-missing { color: #947455; }
#app .research-note-reference > div { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--b9-line); }
#app .research-note-reference > div > span { color: var(--b9-muted); font-size: .61rem; }
#app .research-note-reference > div > strong { color: var(--b9-ink); font-size: .63rem; font-weight: 700; text-align: right; }
#app .research-note-reference > .research-note-due.is-due > strong { color: var(--b9-red); }
#app .research-note-meta { display: flex; flex-wrap: wrap; gap: 6px 17px; padding-block: 8px; border-block: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .62rem; }
#app .research-note-meta span { display: inline-flex; gap: 5px; }
#app .research-note-meta b { color: var(--b9-ink); font-weight: 700; }
#app .research-note-actions { display: flex; flex-wrap: wrap; gap: 5px 16px; align-items: center; }
#app .research-note-action,
#app .research-note-delete { min-height: 38px; padding: 5px 0; color: var(--b9-ink); border: 0; background: transparent; font: inherit; font-size: .67rem; font-weight: 720; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; }
#app .research-note-action:hover,
#app .research-note-action:focus-visible { color: var(--b9-red); text-decoration-color: currentColor; }
#app .research-note-delete { margin-left: auto; color: var(--b9-muted); }
#app .research-note-delete:hover,
#app .research-note-delete:focus-visible { color: var(--b9-red); text-decoration-color: currentColor; }
#app .research-note-edit { margin: 0; border: 1px solid var(--b9-line); }
#app .research-note-edit[hidden] { display: none; }
#app .research-note-history { display: grid; gap: 8px; border-top: 1px solid var(--b9-line); padding-top: 7px; }
#app .research-note-history-toggle { justify-self: start; min-height: 36px; padding: 5px 0; color: var(--b9-muted); border: 0; background: transparent; font: inherit; font-size: .66rem; font-weight: 730; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; cursor: pointer; }
#app .research-note-history-toggle:hover,
#app .research-note-history-toggle:focus-visible { color: var(--b9-red); text-decoration-color: currentColor; }
#app .research-note-history-results[hidden] { display: none !important; }
#app .research-note-history-results { min-width: 0; padding: 11px; border: 1px solid var(--b9-line); background: var(--b9-paper); color: var(--b9-muted); font-size: .7rem; }
#app .research-note-history-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
#app .research-note-history-version { display: grid; gap: 7px; padding: 11px; border: 1px solid var(--b9-line); border-left: 2px solid #947455; background: var(--b9-panel); }
#app .research-note-history-version > header { display: flex; justify-content: space-between; gap: 10px; color: var(--b9-muted); font-size: .6rem; }
#app .research-note-history-version > header > span { font: 700 .57rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
#app .research-note-history-version time { text-align: right; }
#app .research-note-history-version h4 { margin: 0; color: var(--b9-ink); font: 560 1rem/1.2 var(--b9-type-editorial); }
#app .research-note-history-version > p { margin: 0; color: var(--b9-ink); font-size: .7rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
#app .research-note-history-source > a,
#app .research-note-history-source > span { color: var(--b9-muted); font-size: .63rem; overflow-wrap: anywhere; text-underline-offset: 3px; }
#app .research-note-history-source > a:hover { color: var(--b9-red); }
#app .research-note-history-version > button,
#app .research-history-empty { justify-self: start; margin: 0; padding: 0; color: var(--b9-ink); border: 0; background: transparent; font: inherit; font-size: .65rem; font-weight: 730; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#app .research-note-history-version > button:hover,
#app .research-note-history-version > button:focus-visible { color: var(--b9-red); }
#app .research-history-empty { cursor: default; text-decoration: none; }
#app .research-note-select { display: inline-flex; min-height: 34px; flex: 0 0 auto; align-items: center; gap: 7px; color: var(--b9-muted); font-size: .62rem; font-weight: 720; cursor: pointer; }
#app .research-note-select input,
#app .research-batch-select-all input { width: 18px; height: 18px; margin: 0; accent-color: var(--b9-red); cursor: pointer; }
#app .research-note-select:has(input:checked) { color: var(--b9-red); }
#app .research-note-card:has(.research-note-select input:checked) { border-color: var(--b9-red); border-left-width: 3px; }
#app .research-batch-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 54px; padding: 8px 10px; border: 1px solid var(--b9-line); background: color-mix(in srgb, var(--b9-red) 5%, var(--b9-paper)); }
#app .research-batch-select-all { display: inline-flex; min-height: 38px; align-items: center; gap: 8px; color: var(--b9-ink); font-size: .66rem; font-weight: 740; cursor: pointer; }
#app .research-batch-count { flex: 1 1 190px; color: var(--b9-muted); font: 650 .62rem/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
#app .research-batch-status-label { display: flex; align-items: center; gap: 7px; color: var(--b9-muted); font-size: .62rem; font-weight: 700; }
#app .research-batch-status-label .input-control { min-width: 132px; min-height: 38px; padding-block: 4px; font-size: .68rem; }
#app .research-batch-apply,
#app .research-batch-clear,
#app .research-backup-download,
#app .research-backup-import,
#app .research-backup-cancel { min-height: 38px; padding: 7px 10px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: var(--b9-paper); font: inherit; font-size: .64rem; font-weight: 730; cursor: pointer; transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
#app .research-batch-apply,
#app .research-backup-import { color: var(--b9-paper); border-color: var(--b9-ink); background: var(--b9-ink); }
#app .research-batch-apply:hover:not(:disabled),
#app .research-backup-import:hover:not(:disabled) { border-color: var(--b9-red); background: var(--b9-red); }
#app .research-batch-clear:hover:not(:disabled),
#app .research-backup-download:hover:not(:disabled),
#app .research-backup-cancel:hover:not(:disabled) { color: var(--b9-red); border-color: var(--b9-red); }
#app .research-batch-toolbar button:disabled,
#app .research-batch-status-label select:disabled,
#app .research-backup-actions button:disabled { color: var(--b9-muted); border-color: var(--b9-line); background: var(--b9-panel); cursor: not-allowed; opacity: .72; }
#app .research-backup-panel { border: 1px solid var(--b9-line); background: var(--b9-paper); }
#app .research-backup-panel > summary { display: flex; min-height: 45px; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; color: var(--b9-ink); cursor: pointer; list-style: none; }
#app .research-backup-panel > summary::-webkit-details-marker { display: none; }
#app .research-backup-panel > summary::after { width: 8px; height: 8px; flex: 0 0 auto; content: ""; border-right: 1px solid var(--b9-red); border-bottom: 1px solid var(--b9-red); transform: rotate(45deg) translateY(-2px); transition: transform .16s ease; }
#app .research-backup-panel[open] > summary::after { transform: rotate(225deg) translate(-2px, -1px); }
#app .research-backup-panel > summary > span { font-size: .68rem; font-weight: 750; }
#app .research-backup-panel > summary > small { margin-left: auto; color: var(--b9-muted); font-size: .61rem; text-align: right; }
#app .research-backup-body { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 9px 18px; padding: 13px; border-top: 1px solid var(--b9-line); }
#app .research-backup-copy { align-self: center; }
#app .research-backup-copy strong { color: var(--b9-ink); font: 570 1.05rem/1.2 var(--b9-type-editorial); }
#app .research-backup-copy p { margin: 5px 0 0; color: var(--b9-muted); font-size: .66rem; line-height: 1.5; }
#app .research-backup-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
#app .research-backup-file { position: relative; display: inline-flex; min-height: 38px; align-items: center; padding: 6px 9px; color: var(--b9-ink); border: 1px dashed var(--b9-line); background: var(--b9-panel); font-size: .64rem; font-weight: 710; cursor: pointer; }
#app .research-backup-file:hover,
#app .research-backup-file:focus-within { border-color: var(--b9-red); color: var(--b9-red); }
#app .research-backup-file input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#app .research-backup-status { grid-column: 1 / -1; min-height: 1.3em; margin: 2px 0 0; color: var(--b9-ink); font-size: .67rem; font-weight: 700; overflow-wrap: anywhere; }
#app .research-backup-footnote { grid-column: 1 / -1; margin: 0; padding-top: 8px; border-top: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .61rem; line-height: 1.5; }
#app .source-research-capture { display: inline-flex; min-height: 34px; align-items: center; justify-content: center; margin-top: 5px; padding: 4px 7px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: var(--b9-panel); font: inherit; font-size: .59rem; font-weight: 740; cursor: pointer; transition: color .16s ease, border-color .16s ease, background-color .16s ease; }
#app .source-research-capture:hover,
#app .source-research-capture:focus-visible { color: var(--b9-red); border-color: var(--b9-red); background: var(--b9-paper); }
#app .research-capture-hint { margin: 0; padding: 10px 14px; color: var(--b9-muted); border-bottom: 1px solid var(--b9-line); background: var(--b9-paper); font-size: .7rem; line-height: 1.5; }

#app .research-notebook-empty { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 17px; min-height: 142px; padding: 16px; border: 1px dashed var(--b9-line); background: var(--b9-paper); }
#app .research-notebook-empty > span:first-child:not(.research-notebook-empty-art) { display: grid; width: 52px; height: 52px; place-items: center; color: var(--b9-red); border: 1px solid var(--b9-line); font: 500 2.3rem/1 var(--b9-type-editorial); }
#app .research-notebook-empty-art { position: relative; display: grid; width: 56px; height: 58px; align-content: center; gap: 5px; padding: 11px; border: 1px solid var(--b9-line); background: var(--b9-panel); transform: rotate(-3deg); }
#app .research-notebook-empty-art::before { position: absolute; top: 10px; left: -5px; width: 8px; height: 8px; content: ""; border: 1px solid var(--b9-red); border-radius: 50%; background: var(--b9-paper); }
#app .research-notebook-empty-art i { width: 100%; height: 1px; background: var(--b9-line); }
#app .research-notebook-empty-art i:last-child { width: 64%; background: var(--b9-red); }
#app .research-notebook-empty strong { display: block; margin-bottom: 4px; color: var(--b9-ink); font: 570 1.13rem/1.25 var(--b9-type-editorial); }
#app .research-notebook-empty p { max-width: 65ch; margin: 0 0 9px; color: var(--b9-muted); font-size: .74rem; line-height: 1.55; }
#app .research-notebook-empty button { min-height: 36px; padding: 5px 9px; color: var(--b9-ink); border: 1px solid var(--b9-line); background: transparent; font: inherit; font-size: .67rem; font-weight: 730; cursor: pointer; }
#app .research-notebook-empty button:hover,
#app .research-notebook-empty button:focus-visible { color: var(--b9-red); border-color: var(--b9-red); }
#app .research-notebook-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 15px; padding-top: 9px; border-top: 1px solid var(--b9-line); color: var(--b9-muted); font-size: .59rem; line-height: 1.45; }

@media (min-width: 1080px) {
  #app .research-notebook-list { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #app .research-note-card { height: 100%; align-content: start; }
  #app .research-note-main { grid-template-columns: minmax(0, 1fr); }
  #app .research-note-reference { grid-template-columns: minmax(0, 1fr) minmax(90px, auto) minmax(120px, auto); align-items: center; }
  #app .research-note-reference-kicker { grid-column: 1 / -1; }
  #app .research-note-reference > div { display: grid; gap: 3px; border-top: 0; border-left: 1px solid var(--b9-line); padding: 0 0 0 10px; }
  #app .research-note-reference > div > strong { text-align: left; }
}

@media (max-width: 800px) {
  #app .research-notebook-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .research-notebook-metrics > div:nth-child(3) { border-right: 0; }
  #app .research-notebook-metrics > div:nth-child(n + 4) { border-top: 1px solid var(--b9-line); }
  #app .research-next-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #app .research-next-actions > strong { grid-column: 1 / -1; min-height: 42px; border-bottom: 1px solid var(--b9-line); }
  #app .research-note-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .research-notebook-toolbar { align-items: stretch; }
  #app .research-notebook-toolbar > label { flex: 1 1 155px; }
  #app .research-notebook-result-count { align-self: center; margin-left: 0; }
  #app .research-batch-toolbar { align-items: stretch; }
  #app .research-batch-count { flex-basis: 150px; align-self: center; }
  #app .research-backup-body { grid-template-columns: minmax(0, 1fr); }
  #app .research-backup-copy { max-width: 64ch; }
}

@media (max-width: 600px) {
  #app .research-notebook { gap: 12px; padding: 13px; }
  #app .research-notebook-head { min-height: auto; align-items: start; gap: 8px; }
  #app .research-notebook-head-tools { align-items: end; flex-direction: column-reverse; gap: 6px; }
  #app .research-notebook-export { min-height: 34px; padding: 5px 7px; font-size: .59rem; }
  #app .research-notebook-head h2 { font-size: 1.6rem; }
  #app .research-notebook-head p:last-child { font-size: .74rem; }
  #app .research-notebook-head-tools { max-width: 44%; }
  #app .research-notebook-seal { width: 46px; height: 46px; }
  #app .research-notebook-seal::before { inset: 4px; }
  #app .research-notebook-seal::after { inset: 8px; }
  #app .research-notebook-seal b { font-size: 1.05rem; }
  #app .research-notebook-seal i { display: none; }
  #app .research-notebook-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #app .research-notebook-metrics > div { min-height: 64px; gap: 6px; padding: 9px 11px; }
  #app .research-notebook-metrics > div:nth-child(2n) { border-right: 0; }
  #app .research-notebook-metrics > div:nth-child(n + 3) { border-top: 1px solid var(--b9-line); }
  #app .research-notebook-metrics > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-right: 0; }
  #app .research-next-actions { grid-template-columns: minmax(0, 1fr); }
  #app .research-next-actions > strong { grid-column: 1; }
  #app .research-next-actions > button { min-height: 44px; border-left: 0; border-bottom: 1px solid var(--b9-line); }
  #app .research-next-actions > button:last-child { border-bottom: 0; }
  #app .research-note-create > summary { align-items: start; flex-direction: column; justify-content: center; gap: 4px; }
  #app .research-note-create > summary > small { padding-left: 36px; text-align: left; }
  #app .research-note-form { padding: 11px; }
  #app .research-note-fields { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #app .research-note-fields > .research-field-title,
  #app .research-note-fields > .research-field-observation,
  #app .research-duplicate-warning { grid-column: 1; }
  #app .research-duplicate-warning { align-items: stretch; flex-direction: column; }
  #app .research-duplicate-warning > button { min-height: 42px; }
  #app .research-notebook-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  #app .research-notebook-toolbar > label { min-width: 0; }
  #app .research-notebook-toolbar > .research-search { grid-column: 1 / -1; }
  #app .research-notebook-result-count { grid-column: 1 / -1; }
  #app .research-note-card { gap: 9px; padding: 12px; }
  #app .research-note-card-head { align-items: start; flex-direction: column; }
  #app .research-note-select { min-height: 38px; }
  #app .research-batch-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; padding: 9px; }
  #app .research-batch-select-all { grid-column: 1 / -1; border-bottom: 1px solid var(--b9-line); }
  #app .research-batch-count { grid-column: 1 / -1; min-height: 1em; }
  #app .research-batch-status-label { display: grid; align-content: start; gap: 3px; }
  #app .research-batch-status-label .input-control { width: 100%; min-width: 0; min-height: 42px; }
  #app .research-batch-apply,
  #app .research-batch-clear { min-height: 42px; }
  #app .research-backup-panel > summary { align-items: start; flex-wrap: wrap; min-height: 48px; }
  #app .research-backup-panel > summary > small { flex: 1 1 100%; margin-left: 0; text-align: left; }
  #app .research-backup-body { gap: 11px; padding: 10px; }
  #app .research-backup-actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  #app .research-backup-actions > button,
  #app .research-backup-file { width: 100%; min-height: 44px; justify-content: center; text-align: center; }
  #app .research-backup-status,
  #app .research-backup-footnote { grid-column: 1; }
  #app .research-note-main { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  #app .research-checklist-items { grid-template-columns: minmax(0, 1fr); }
  #app .research-checklist-item { min-height: 42px; font-size: .68rem; }
  #app .research-checklist > summary { align-items: start; flex-direction: column; justify-content: center; gap: 4px; }
  #app .research-checklist > summary > strong { text-align: left; }
  #app .research-checklist > p { font-size: .63rem; }
  #app .research-note-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  #app .research-note-meta span { display: grid; gap: 2px; }
  #app .research-note-actions { gap: 1px 12px; }
  #app .research-note-delete { margin-left: 0; }
  #app .research-note-history-results { padding: 8px; }
  #app .research-note-history-version { padding: 9px; }
  #app .research-note-history-version > header { align-items: start; flex-direction: column; gap: 3px; }
  #app .research-note-history-version time { text-align: left; }
  #app .source-research-capture { min-height: 38px; font-size: .64rem; }
  #app .research-notebook-empty { grid-template-columns: 42px minmax(0, 1fr); gap: 11px; min-height: 120px; padding: 11px; }
  #app .research-notebook-empty-art { width: 39px; height: 45px; padding: 8px; }
  #app .research-notebook-empty > span:first-child:not(.research-notebook-empty-art) { width: 38px; height: 38px; font-size: 1.8rem; }
  #app .research-notebook-empty strong { font-size: 1rem; }
  #app .research-notebook-foot { display: grid; gap: 5px; }

#app .research-method-panel {
  border: 1px solid var(--b9-line);
  background: var(--b9-paper);
}

#app .research-method-panel > summary {
  display: flex;
  min-height: 52px;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  color: var(--b9-ink);
  list-style: none;
  cursor: pointer;
}

#app .research-method-panel > summary::-webkit-details-marker { display: none; }
#app .research-method-panel > summary > span { font: 560 1.07rem/1.2 var(--b9-type-editorial); }
#app .research-method-panel > summary > small { margin-left: auto; color: var(--b9-muted); font-size: .65rem; }
#app .research-method-panel > summary::after { content: "+"; color: var(--b9-red); font: 500 1.15rem/1 var(--b9-type-editorial); }
#app .research-method-panel[open] > summary::after { content: "−"; }
#app .research-method-content { display: grid; gap: 15px; padding: 16px; border-top: 1px solid var(--b9-line); }
#app .research-method-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
#app .research-method-heading .eyebrow { margin: 0 0 5px; color: var(--b9-red); font: 720 .58rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .08em; }
#app .research-method-heading h3 { max-width: 38ch; margin: 0; font: 560 clamp(1.2rem, 2vw, 1.65rem)/1.15 var(--b9-type-editorial); }
#app .research-method-heading label { display: grid; min-width: min(245px, 35%); gap: 5px; color: var(--b9-muted); font-size: .65rem; font-weight: 720; }
#app .research-method-heading .input-control { width: 100%; min-height: 42px; font-size: .75rem; }
#app .research-method-principle { max-width: 74ch; margin: 0; padding: 11px 13px; color: var(--b9-ink); background: var(--b9-panel); border-left: 2px solid var(--b9-red); font-size: .78rem; line-height: 1.6; }
#app .research-method-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#app .research-method-grid article { display: grid; align-content: start; gap: 8px; min-height: 145px; padding: 12px; border: 1px solid var(--b9-line); background: var(--b9-panel); }
#app .research-method-grid article > span { color: var(--b9-red); font: 700 .59rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .025em; }
#app .research-method-grid article > p { margin: 0; color: var(--b9-ink); font-size: .73rem; line-height: 1.6; }
#app .research-method-note { margin: 0; padding-top: 10px; color: var(--b9-muted); border-top: 1px solid var(--b9-line); font-size: .66rem; line-height: 1.55; }

@media (max-width: 760px) {
  #app .research-method-heading { align-items: stretch; flex-direction: column; }
  #app .research-method-heading label { min-width: 0; }
  #app .research-method-grid { grid-template-columns: minmax(0, 1fr); }
  #app .research-method-grid article { min-height: 0; }
}

@media (max-width: 460px) {
  #app .research-method-panel > summary { align-items: start; flex-wrap: wrap; gap: 4px 8px; }
  #app .research-method-panel > summary > small { flex: 1 1 100%; margin-left: 0; }
  #app .research-method-content { padding: 11px; }
}
}

@media (prefers-reduced-motion: reduce) {
  #app .research-note-card,
  #app .research-note-create > summary > span > b,
  #app .research-checklist-progress > i { transition: none; }
}

/* Source: styles/type-direction.css */
/* Bastion type direction: editorial display, readable copy, and a disciplined UI face. */
:root {
  --bastion-type-interface: var(--b9-type-interface, "Bastion Sans", system-ui, sans-serif);
  --bastion-type-reading: var(--b9-type-reading, "Bastion Editorial", Georgia, serif);
  --bastion-type-editorial: var(--b9-type-editorial, "Bastion Editorial", Georgia, serif);
  --bastion-weight-copy: 470;
  --bastion-weight-label: 650;
  --bastion-weight-strong: 700;
  --bastion-weight-display: 620;
}

/* Public chrome and data surfaces stay in one interface family. */
#app,
#app :where(button, input, select, textarea, .site-header, .primary-nav,
  .mobile-panel, .mobile-utility-rail, .sports-match-desk, .sports-hub,
  .operator-tools, .market-compare-dock, .comparison-dock) {
  font-family: var(--bastion-type-interface);
  font-synthesis: none;
  font-kerning: normal;
}

#app :where(p, li, dd, dt, label, figcaption) {
  font-weight: var(--bastion-weight-copy);
}

/* Editorial hierarchy is explicit; sports operations remain sans by contract. */
#app :where(
  .reference-hero h1,
  .page-header h1,
  .page-header-photo h1,
  .section-heading h2,
  .guide-article-hero h1,
  .guide-card h3,
  .guide-featured-copy h2,
  .guide-index-copy h3,
  .review-hero h1,
  .publication-page h1,
  .publication-page h2,
  .article-content h2,
  .article-content h3,
  .operator-brand-cell h2,
  .operator-brand-cell h3,
  .market-compare-heading h3,
  .market-compare-brand
) {
  font-family: var(--bastion-type-editorial);
  font-weight: var(--bastion-weight-display);
  letter-spacing: -.022em;
  text-wrap: balance;
}

#app :where(.sports-hub, .sports-match-desk, .sports-command) :where(h1, h2, h3, h4) {
  font-family: var(--bastion-type-interface);
  font-weight: var(--bastion-weight-strong);
  letter-spacing: -.012em;
  text-wrap: balance;
}

#app :where(.article-content, .guide-article, .reading-desk-article,
  .publication-page .article-body) {
  font-family: var(--bastion-type-reading);
  font-size: 1rem;
  line-height: 1.72;
}
#app :where(.article-content p, .article-content li, .guide-article p,
  .reading-desk-article p, .publication-page .article-body p) {
  font-family: inherit;
  font-weight: var(--bastion-weight-copy);
}

/* Short labels may use broadcast casing; normal copy never inherits uppercase. */
#app :where(.eyebrow, .reference-kicker, .section-label, .sports-section-label,
  .comparison-table th, .source-register th, .operator-facts-cell dt,
  .operator-offer-cell > span) {
  font-family: var(--bastion-type-interface);
  font-size: .72rem;
  font-weight: var(--bastion-weight-label);
  letter-spacing: .055em;
  line-height: 1.3;
  text-transform: uppercase;
}

#app :where(.primary-nav a, .mobile-utility-rail a, .site-header button,
  .btn, .text-action, .section-link, .operator-action-cell .btn) {
  font-family: var(--bastion-type-interface);
  font-weight: var(--bastion-weight-strong);
  letter-spacing: 0;
}

/* Keep tap targets readable on narrow devices; never shrink body/control text below 16px. */
@media (max-width: 620px) {
  #app :where(p, li, dd, dt, label, input, select, textarea, button) { font-size: 1rem; }
  #app :where(.article-content, .guide-article, .reading-desk-article,
    .publication-page .article-body) { font-size: 1rem; line-height: 1.68; }
  #app :where(.reference-hero h1, .page-header h1, .page-header-photo h1,
    .guide-article-hero h1) { font-size: clamp(2.15rem, 10vw, 3.4rem); line-height: 1.02; }
}

/* CMS uses the same interface family without inheriting public editorial widths. */
.admin-body,
#admin-app,
#admin-app :where(button, input, select, textarea) {
  font-family: var(--bastion-type-interface, system-ui, sans-serif);
  font-synthesis: none;
}
.admin-body :where(h1, h2, h3, h4),
#admin-app :where(h1, h2, h3, h4) {
  font-family: var(--bastion-type-interface, system-ui, sans-serif);
  font-weight: var(--bastion-weight-strong);
  letter-spacing: -.012em;
}

/* Source: styles/bold-icon-system.css */
/*
 * Bastion icon system
 *
 * Generic controls share a Bastion editorial line, then diverge by role:
 * the casino mark is a machine face, guides is a newspaper grid, and search
 * is a heavier lens. The Sports edition owns `.sh-ui-icon` and its own stroke
 * rules; `.ui-icon-sports` is deliberately left untouched.
 */

/* Base line only. Character comes from each key's geometry and treatment. */
#app :is(.ui-icon, .bastion-ui-mark):not(.sh-ui-icon):not(.ui-icon-sports) {
  display: inline-block;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: color .16s ease;
}

/* Standalone marks are authored with presentation attributes; this keeps
 * their visual weight consistent when they appear outside a .ui-icon. */
#app .bastion-file-mark,
#app .bastion-gift-mark {
  display: inline-block;
  flex: 0 0 auto;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: color .16s ease;
}

/* Intentional per-key silhouettes: machine, ledger, lens and utility marks do
 * not collapse into one stock icon treatment. */
#app .ui-icon-casino { stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: round; }
#app .ui-icon-operators { stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
#app .ui-icon-guides { stroke-width: 1.9; stroke-linecap: square; stroke-linejoin: miter; }
#app .ui-icon-search { stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
#app .ui-icon-close { stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
#app .ui-icon-arrow { stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#app .ui-icon-bookmark { stroke-width: 1.95; stroke-linecap: round; stroke-linejoin: round; }
#app .ui-icon-share { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#app .ui-icon-external { stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#app .casino-category-glyph { stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
#app .ui-icon-casino .casino-reel,
#app .ui-icon-guides .guide-cover { vector-effect: none; }

/* Utility rail: icons are the primary landmarks on narrow screens. */
#app .mobile-utility-rail a {
  min-width: 44px;
  min-height: 44px;
}

#app .mobile-utility-rail a > :is(.ui-icon, .bastion-gift-mark):not(.sh-ui-icon):not(.ui-icon-sports) {
  width: 22px;
  height: 22px;
}

#app .mobile-utility-rail a > .ui-icon-casino { width: 23px; height: 23px; color: var(--b9-muted); stroke-width: 2.2; }
#app .mobile-utility-rail a[aria-current="page"] > .ui-icon-casino { color: var(--b9-red); }
#app .mobile-utility-rail a > .ui-icon-guides { width: 23px; height: 23px; color: var(--b9-muted); stroke-width: 1.9; }
#app .mobile-utility-rail a > .ui-icon-search { color: var(--b9-ink); stroke-width: 2.2; }
#app .mobile-utility-rail a[aria-current="page"] > .ui-icon-guides,
#app .mobile-utility-rail a[aria-current="page"] > .ui-icon-search { color: var(--b9-red); }

#app .mobile-utility-rail .bastion-gift-mark {
  width: 22px;
  height: 22px;
  stroke-width: 1.95;
}

/* Header, saved, compare and card actions keep an accessible hit area even
 * when their visible affordance is only a compact vector. */
#app :is(
  .header-tools > .icon-button,
  .header-tools > .menu-toggle,
  .header-tools > .saved-header-button,
  .icon-link,
  .compare-dock button,
  .comparison-dock button,
  .compare-sheet button,
  .offer-compare-dock button,
  .offer-compare-sheet button,
  .guide-index-open,
  .guide-index-save,
  .guide-reader-save,
  .guide-reader-share
) {
  min-height: 44px;
}

#app :is(.header-tools > .icon-button, .header-tools > .menu-toggle, .icon-link) {
  min-width: 44px;
}

/* Preserve the compact rhythm of metadata while keeping its stroke legible. */
#app :is(
  .trust-chip .ui-icon,
  .checked-chip .ui-icon,
  .badge .ui-icon,
  .comparison-stamp .ui-icon,
  .guide-card .meta .ui-icon,
  .operator-tools button > .ui-icon,
  .official-registry-site .ui-icon,
  .official-registry-public > div > a .ui-icon
):not(.sh-ui-icon):not(.ui-icon-sports) {
  stroke-width: 2;
}

/* A reduced-motion user still gets the same icon shape and weight, without a
 * lid lift or colour transition competing with reading and data controls. */
@media (prefers-reduced-motion: reduce) {
  #app :is(
    .ui-icon,
    .bastion-ui-mark,
    .bastion-file-mark,
    .bastion-gift-mark,
    .bastion-gift-mark .gift-lid
  ) {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}