/* ==========================================================================
   Buffalo King Megaways - ESPRESSO / CASINO theme

   The whole colour system is derived from five values, all of them below:
     Background         #18120E
     Surface / cards    #282019
     Gold CTA           #E9B753
     Main text          #FFF7EA
     Secondary accent   #A48D70   (muted text, borders, labels)

   Gold is the only saturated colour on the page. Everything else is a step of
   the background, a tint of the text, or a tint of the secondary accent.
   ========================================================================== */

:root{
  /* base charcoals - #18120E background, #27201A surface, + derived steps */
  --ink-900:#090705;
  --ink-800:#18120E;
  --ink-700:#1F1914;
  --ink-600:#27201A;
  --ink-500:#322A23;
  --ink-400:#3F362F;

  /* gold accent - the only saturated colour in the palette */
  --gold:#E9B753;
  --gold-2:#F6D28C;
  --gold-dim:#B98C31;
  --gold-deep:#C89235;
  --gold-pale:#F0DDB4;
  --on-gold:#1A1206;

  /* secondary accent - muted labels, quiet borders, cons */
  --muted:#A48D70;
  --muted-2:#CFC0AC;
  --muted-dim:#5E492F;

  /* restrained warning red - 18+ and responsible-gambling notices only */
  --crimson:#C0564F;
  --crimson-dim:#8E3A36;
  --crimson-lt:#D9836F;

  /* text */
  --txt:#FFF7EA;
  --txt-soft:#DBD0C3;
  --txt-mute:#A48D70;

  /* lines + surfaces */
  --line:rgba(255,247,234,.09);
  --line-2:rgba(255,247,234,.16);
  --glass:rgba(255,247,234,.035);
  --glass-2:rgba(255,247,234,.06);

  /* radii */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  /* gaps */
  --gap-1:4px;
  --gap-2:8px;
  --gap-3:14px;
  --gap-4:22px;
  --gap-5:34px;
  --gap-6:56px;

  /* shadows */
  --sh-sm:0 2px 10px rgba(0,0,0,.35);
  --sh-md:0 12px 34px rgba(0,0,0,.42);
  --sh-lg:0 26px 70px rgba(0,0,0,.55);
  --sh-gold:0 10px 30px rgba(233,183,83,.28);
  --sh-glow:0 10px 30px rgba(233,183,83,.22);

  /* type */
  --f-head:'Sora',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --ease:cubic-bezier(.4,.14,.3,1);
  --shell:1240px;
}

/* --------------------------------------------------------------- reset -- */
*,*::before,*::after{box-sizing:border-box;}

html{
  scroll-behavior:smooth;
  scroll-padding-top:96px;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  padding:0;
  overflow-x:hidden;
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.7;
  color:var(--txt);
  background:var(--ink-800);
  background-image:
    radial-gradient(900px 520px at 12% -8%, rgba(233,183,83,.07), transparent 62%),
    radial-gradient(760px 460px at 88% 2%, rgba(233,183,83,.05), transparent 60%),
    linear-gradient(180deg,#18120E 0%,#1D1712 42%,#18120E 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,svg,video,iframe{max-width:100%;}
img{height:auto;display:block;}

h1,h2,h3,h4,h5{
  font-family:var(--f-head);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.015em;
  margin:0 0 var(--gap-3);
  color:#FFF7EA;
}

p{margin:0 0 var(--gap-3);}

a{color:var(--gold);text-decoration:none;transition:color .18s var(--ease);}
a:hover{color:var(--gold-2);}

button{font-family:inherit;cursor:pointer;}

::selection{background:rgba(233,183,83,.38);color:#18120E;}

:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;}

/* -------------------------------------------------------------- layout -- */
.range-wrap{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:28px;
}

/* --------------------------------------------------------- alert strip -- */
.notice-bar{
  background:linear-gradient(90deg,rgba(164,141,112,.24),rgba(233,183,83,.18) 55%,rgba(164,141,112,.20));
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:60;
}

.notice-bar__text{
  margin:0;
  padding:9px 0;
  font-size:.79rem;
  line-height:1.5;
  letter-spacing:.01em;
  color:#DBD0C3;
  text-align:center;
}

.notice-bar__text i{color:var(--gold);margin-right:7px;}

/* ---------------------------------------------------------------- head -- */
.mesa-head{
  position:sticky;
  top:0;
  z-index:200;
  background:rgba(24,18,14,.85);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid var(--line);
  box-shadow:0 10px 32px rgba(0,0,0,.35);
}

.mesa-head__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-4);
  min-height:72px;
}

.mesa-head__btns{
  display:flex;
  align-items:center;
  gap:var(--gap-2);
  flex-shrink:0;
}

/* --------------------------------------------------------------- brand -- */
.stamp-mark{
  display:inline-flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  color:#FFF7EA;
}

.stamp-mark:hover{color:#FFF7EA;}
.stamp-mark:hover .stamp-mark__glyph{
  transform:translateY(-2px) rotate(-6deg);
  box-shadow:var(--sh-glow);
}

.stamp-mark__glyph{
  width:40px;height:40px;
  display:grid;place-items:center;
  border-radius:12px;
  font-size:1.05rem;
  color:#1A1206;
  background:linear-gradient(140deg,var(--gold-2),var(--gold) 55%,var(--gold-dim));
  box-shadow:0 6px 18px rgba(233,183,83,.28);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease);
}

.stamp-mark__text{
  font-family:var(--f-head);
  font-weight:800;
  font-size:1.06rem;
  letter-spacing:-.02em;
  white-space:nowrap;
  background:linear-gradient(92deg,#FFF7EA 20%,#F6D28C 60%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.stamp-mark--foot .stamp-mark__glyph{width:36px;height:36px;font-size:.95rem;}
.stamp-mark--foot{margin-bottom:var(--gap-3);}

/* ----------------------------------------------------------------- nav -- */
.mesa-nav{
  display:flex;
  align-items:center;
  gap:var(--gap-1);
  margin-left:auto;
  margin-right:var(--gap-3);
}

.mesa-nav__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 13px;
  border:0;
  background:transparent;
  border-radius:var(--r-sm);
  font-family:var(--f-body);
  font-size:.9rem;
  font-weight:600;
  color:var(--txt-soft);
  white-space:nowrap;
  transition:color .18s var(--ease),background .18s var(--ease);
}

.mesa-nav__link:hover,
.mesa-nav__link:focus-visible{
  color:var(--gold);
  background:rgba(255,247,234,.05);
}

.mesa-nav__mobile-cta{display:none;}

/* dropdown */
.hinge{position:relative;}

.hinge__caret{
  font-size:.62rem;
  opacity:.7;
  transition:transform .25s var(--ease);
}

.hinge:hover .hinge__caret,
.hinge__toggle[aria-expanded="true"] .hinge__caret{transform:rotate(180deg);}

.hinge__panel{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  transform:translate(-50%,10px);
  min-width:246px;
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:2px;
  border-radius:var(--r-md);
  background:linear-gradient(180deg,#2D251E,#1E1813);
  border:1px solid var(--line-2);
  box-shadow:var(--sh-lg);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
  z-index:210;
}

.hinge__panel::before{
  content:'';
  position:absolute;
  top:-10px;left:0;right:0;height:10px;
}

.hinge:hover .hinge__panel,
.hinge:focus-within .hinge__panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

.hinge__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--r-xs);
  font-size:.87rem;
  font-weight:500;
  color:var(--txt-soft);
  transition:background .16s var(--ease),color .16s var(--ease),transform .16s var(--ease);
}

.hinge__item i{font-size:.75rem;color:var(--muted);transition:color .16s var(--ease);}

.hinge__item:hover{
  background:rgba(233,183,83,.09);
  color:#FFF7EA;
  transform:translateX(3px);
}

.hinge__item:hover i{color:var(--gold);}

/* burger */
.rungs-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:44px;height:44px;
  padding:0 11px;
  border:1px solid var(--line-2);
  border-radius:var(--r-sm);
  background:var(--glass);
  flex-shrink:0;
}

.rungs-toggle__bar{
  display:block;
  height:2px;
  width:100%;
  border-radius:2px;
  background:var(--txt);
  transition:transform .25s var(--ease),opacity .2s var(--ease);
}

.rungs-toggle[aria-expanded="true"] .rungs-toggle__bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.rungs-toggle[aria-expanded="true"] .rungs-toggle__bar:nth-child(2){opacity:0;}
.rungs-toggle[aria-expanded="true"] .rungs-toggle__bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* pullout */
.pullout{
  position:fixed;
  top:0;right:0;
  width:min(340px,88vw);
  height:100dvh;
  z-index:300;
  padding:88px 22px 32px;
  display:flex;
  flex-direction:column;
  gap:var(--gap-4);
  overflow-y:auto;
  background:linear-gradient(180deg,#221B16,#18120E);
  border-left:1px solid var(--line-2);
  box-shadow:-24px 0 60px rgba(0,0,0,.6);
  transform:translateX(105%);
  visibility:hidden;
  transition:transform .32s var(--ease),visibility .32s;
}

.pullout.is-open{transform:translateX(0);visibility:visible;}

.pullout__links{display:flex;flex-direction:column;gap:2px;}

.pullout__link{
  padding:12px 14px;
  border-radius:var(--r-sm);
  font-size:.95rem;
  font-weight:600;
  color:var(--txt-soft);
  border:1px solid transparent;
  transition:all .18s var(--ease);
}

.pullout__link:hover{
  color:#FFF7EA;
  background:rgba(233,183,83,.08);
  border-color:rgba(233,183,83,.22);
}

.pullout__btns{
  display:flex;
  flex-direction:column;
  gap:var(--gap-2);
  padding-top:var(--gap-3);
  border-top:1px solid var(--line);
}

.pullout__btns .brand-btn{width:100%;justify-content:center;}

/* ------------------------------------------------------------- buttons -- */
.brand-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  font-family:var(--f-body);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.005em;
  line-height:1.2;
  white-space:nowrap;
  cursor:pointer;
  text-align:center;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),
             background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
}

.brand-btn:active{transform:translateY(1px);}

.brand-btn--solid{
  color:#1A1206;
  background:linear-gradient(135deg,var(--gold-2) 0%,var(--gold) 48%,#C89235 100%);
  box-shadow:var(--sh-gold);
}

.brand-btn--solid:hover{
  color:#1A1206;
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(233,183,83,.42);
  filter:brightness(1.06);
}

.brand-btn--ghost{
  color:var(--txt);
  background:rgba(255,247,234,.04);
  border-color:var(--line-2);
  backdrop-filter:blur(6px);
}

.brand-btn--ghost:hover{
  color:var(--gold);
  border-color:rgba(233,183,83,.5);
  background:rgba(233,183,83,.09);
  transform:translateY(-2px);
}

.brand-btn--lg{padding:15px 30px;font-size:.98rem;}
.brand-btn--full{width:100%;}

/* ---------------------------------------------------------- breadcrumbs -- */
.dust-crumbs{
  padding:16px 0 4px;
  font-size:.8rem;
  color:var(--txt-mute);
}

.dust-crumbs .range-wrap{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
}

.dust-crumbs a{color:var(--txt-soft);font-weight:500;}
.dust-crumbs a:hover{color:var(--gold);}
.dust-crumbs i{font-size:.65rem;opacity:.45;}
.dust-crumbs span{color:var(--txt);font-weight:600;}

/* ---------------------------------------------------------------- hero -- */
.ridge-hero{
  position:relative;
  padding:var(--gap-6) 0 var(--gap-5);
  overflow:hidden;
}

.ridge-hero::before{
  content:'';
  position:absolute;
  top:-320px;left:50%;
  width:1300px;height:760px;
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side,rgba(233,183,83,.14),transparent 72%),
    radial-gradient(closest-side,rgba(233,183,83,.07),transparent 70%);
  background-position:22% 40%,78% 30%;
  background-repeat:no-repeat;
  background-size:70% 90%,72% 90%;
  filter:blur(38px);
  pointer-events:none;
  z-index:0;
  animation:aurora-drift 16s ease-in-out infinite alternate;
}

@keyframes aurora-drift{
  0%{transform:translateX(-52%) translateY(0) scale(1);opacity:.85;}
  100%{transform:translateX(-48%) translateY(24px) scale(1.06);opacity:1;}
}

.ridge-hero .range-wrap{position:relative;z-index:1;}

.ridge-hero__grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);
  gap:var(--gap-6);
  align-items:center;
}

.ridge-hero__copy{min-width:0;}

.ridge-hero__title{
  font-size:clamp(2rem,4.6vw,3.4rem);
  font-weight:800;
  line-height:1.08;
  letter-spacing:-.03em;
  margin:0 0 var(--gap-3);
}

.ridge-hero__title span{
  background:linear-gradient(96deg,var(--gold) 0%,var(--gold-2) 45%,#FFF7EA 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.ridge-hero__lead{
  font-size:clamp(1rem,1.35vw,1.13rem);
  line-height:1.72;
  color:var(--txt-soft);
  max-width:60ch;
  margin-bottom:var(--gap-4);
}

.ridge-hero__btns{
  display:flex;
  flex-wrap:wrap;
  gap:var(--gap-3);
  margin-top:var(--gap-4);
}

.ridge-hero__side{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gap-4);
  padding:var(--gap-4);
  border-radius:var(--r-xl);
  border:1px solid var(--line-2);
  background:linear-gradient(165deg,rgba(255,247,234,.07),rgba(255,247,234,.02));
  box-shadow:var(--sh-lg);
  backdrop-filter:blur(14px);
  min-width:0;
}

/* badge */
.prairie-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 15px;
  margin-bottom:var(--gap-3);
  border-radius:var(--r-pill);
  border:1px solid rgba(233,183,83,.32);
  background:linear-gradient(92deg,rgba(233,183,83,.14),rgba(164,141,112,.14));
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#F0DDB4;
}

.prairie-badge i{color:var(--gold);}

/* credited */
.credited{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 16px;
  margin:var(--gap-3) 0 0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:var(--glass);
  max-width:420px;
}

.credited__avatar{
  width:40px;height:40px;
  display:grid;place-items:center;
  flex-shrink:0;
  border-radius:50%;
  color:#1A1206;
  background:linear-gradient(140deg,var(--gold-2),var(--gold));
}

.credited div{display:flex;flex-direction:column;line-height:1.45;min-width:0;}
.credited strong{font-size:.88rem;color:#FFF7EA;}
.credited span{font-size:.75rem;color:var(--txt-mute);}

/* score ring */
.grade-ring{
  position:relative;
  width:172px;height:172px;
  display:grid;
  place-items:center;
  align-content:center;
  border-radius:50%;
  background:
    conic-gradient(var(--gold) 0deg,var(--gold-2) 110deg,var(--gold-dim) 210deg,rgba(255,247,234,.08) 300deg,rgba(255,247,234,.08) 360deg);
  box-shadow:0 0 44px rgba(233,183,83,.24);
  flex-shrink:0;
}

.grade-ring::after{
  content:'';
  position:absolute;
  inset:10px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 30%,#302821,#18120E);
  border:1px solid var(--line);
}

.grade-ring__num,
.grade-ring__of,
.grade-ring__label{position:relative;z-index:2;text-align:center;}

.grade-ring__num{
  font-family:var(--f-head);
  font-size:3rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.03em;
  color:#FFF7EA;
  text-shadow:0 4px 22px rgba(233,183,83,.5);
}

.grade-ring__of{
  font-size:.78rem;
  font-weight:600;
  color:var(--txt-mute);
  margin-top:2px;
}

.grade-ring__label{
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--gold);
  margin-top:6px;
}

.grade-ring__facts{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.grade-ring__facts > div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-3);
  padding:11px 14px;
  border-radius:var(--r-sm);
  background:rgba(255,247,234,.035);
  border:1px solid transparent;
  transition:background .18s var(--ease),border-color .18s var(--ease);
}

.grade-ring__facts > div:hover{
  background:rgba(233,183,83,.08);
  border-color:rgba(233,183,83,.2);
}

.grade-ring__facts span{
  font-size:.78rem;
  font-weight:500;
  color:var(--txt-mute);
  text-transform:uppercase;
  letter-spacing:.06em;
}

.grade-ring__facts strong{
  font-family:var(--f-head);
  font-size:.98rem;
  font-weight:700;
  color:var(--gold-2);
  text-align:right;
}

/* ----------------------------------------------------------- stat band -- */
.offer-band{padding:var(--gap-4) 0;}

.offer-band__row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--gap-3);
}

.offer-cell{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:18px 20px;
  min-width:0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,247,234,.06),rgba(255,247,234,.015));
  box-shadow:var(--sh-sm);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}

.offer-cell:hover{
  transform:translateY(-3px);
  border-color:rgba(233,183,83,.3);
  box-shadow:var(--sh-md);
}

.offer-cell strong{
  font-family:var(--f-head);
  font-size:1.05rem;
  font-weight:700;
  color:#FFF7EA;
  overflow-wrap:anywhere;
}

.offer-cell span{
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--txt-mute);
}

/* ---------------------------------------------------------- demo stage -- */
.freeplay-stage{padding:var(--gap-5) 0;}

.freeplay-stage__title{
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  margin-bottom:var(--gap-4);
  text-align:center;
}

.freeplay-stage__frame{
  position:relative;
  aspect-ratio:16/9;
  width:100%;
  overflow:hidden;
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:
    radial-gradient(700px 340px at 50% 0%,rgba(164,141,112,.16),transparent 70%),
    linear-gradient(180deg,#1E1813,#0D0907);
  box-shadow:var(--sh-lg),inset 0 1px 0 rgba(255,247,234,.06);
}

.freeplay-stage__frame iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  display:block;
}

.freeplay-stage__veil{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--gap-3);
  text-align:center;
  padding:var(--gap-4) clamp(18px,5vw,64px);
}

.freeplay-stage__veil p{
  margin:0;
  font-size:.88rem;
  line-height:1.65;
  color:var(--txt-soft);
  max-width:60ch;
}

.freeplay-stage__veil--pending{
  background:
    repeating-linear-gradient(135deg,rgba(255,247,234,.02) 0 12px,transparent 12px 24px);
}

.freeplay-stage__veil-icon{
  font-size:1.9rem;
  color:var(--gold);
  filter:drop-shadow(0 4px 16px rgba(233,183,83,.45));
}

.freeplay-stage__veil-lead{
  font-family:var(--f-head)!important;
  font-size:1.05rem!important;
  font-weight:700;
  color:#FFF7EA!important;
}

.freeplay-stage__launch{
  box-shadow:0 14px 44px rgba(233,183,83,.35);
  animation:pulse-gold 3s ease-in-out infinite;
}

@keyframes pulse-gold{
  0%,100%{box-shadow:0 14px 44px rgba(233,183,83,.3);}
  50%{box-shadow:0 14px 56px rgba(233,183,83,.55);}
}

/* --------------------------------------------------------- content zone -- */
.plain-zone{padding:var(--gap-5) 0 var(--gap-6);}

.twin-col{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:var(--gap-5);
  align-items:start;
}

.twin-col__main{min-width:0;}

.twin-col__side{
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:var(--gap-4);
  min-width:0;
}

/* frost block */
.hide-block{
  padding:clamp(22px,3.4vw,42px);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,247,234,.05),rgba(255,247,234,.015));
  box-shadow:var(--sh-md);
  min-width:0;
}

.hide-block__heading{
  font-size:clamp(1.4rem,2.5vw,2rem);
  line-height:1.24;
  margin-bottom:var(--gap-4);
  padding-bottom:var(--gap-3);
  border-bottom:1px solid var(--line);
}

.hide-block__content{
  font-size:1rem;
  line-height:1.82;
  color:var(--txt-soft);
}

.hide-block__content h2{
  font-size:clamp(1.25rem,2.1vw,1.6rem);
  margin:var(--gap-5) 0 var(--gap-3);
  padding-left:14px;
  border-left:3px solid var(--gold);
}

.hide-block__content h3{
  font-size:1.1rem;
  margin:var(--gap-4) 0 var(--gap-2);
  color:#FFF7EA;
}

.hide-block__content > p:first-child{margin-top:0;}

.hide-block__content p{margin:0 0 var(--gap-3);}

.hide-block__content ul,
.hide-block__content ol{
  margin:0 0 var(--gap-3);
  padding-left:22px;
}

.hide-block__content li{margin-bottom:9px;}

.hide-block__content ul{list-style:none;padding-left:0;}

.hide-block__content ul li{
  position:relative;
  padding-left:26px;
}

.hide-block__content ul li::before{
  /* was Font Awesome glyph \f058 (circle-check); now the same icon as an inline SVG mask so the
     stylesheet no longer depends on an external icon font. Colour still comes from --gold. */
  content:'';
  position:absolute;
  left:0;top:.36em;
  width:.8rem;height:.8rem;
  background-color:var(--gold);
  -webkit-mask:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 fill=%22currentColor%22><path d=%22M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z%22/></svg>") no-repeat center/contain;
  mask:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 512 512%22 fill=%22currentColor%22><path d=%22M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z%22/></svg>") no-repeat center/contain;
}

.hide-block__content a{
  color:var(--gold);
  border-bottom:1px solid rgba(233,183,83,.3);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}

.hide-block__content a:hover{color:var(--gold-2);border-color:var(--gold);}

.hide-block__content strong{color:#FFF7EA;font-weight:600;}

/* ------------------------------------------------------------ CTA box --- */
.corral-box{
  position:relative;
  display:flex;
  align-items:center;
  gap:var(--gap-4);
  padding:22px 24px;
  margin:var(--gap-4) 0;
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(120deg,rgba(233,183,83,.09),rgba(164,141,112,.11) 70%,rgba(255,247,234,.02));
  box-shadow:var(--sh-md);
  overflow:hidden;
}

.corral-box::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(420px 160px at 8% 0%,rgba(233,183,83,.16),transparent 70%);
  pointer-events:none;
}

.corral-box--glow{
  border-color:rgba(233,183,83,.35);
  background:linear-gradient(120deg,rgba(233,183,83,.14),rgba(164,141,112,.12) 75%,rgba(255,247,234,.02));
  box-shadow:0 16px 46px rgba(233,183,83,.16),var(--sh-md);
}

.corral-box--crimson{
  border-color:rgba(192,86,79,.36);
  background:linear-gradient(120deg,rgba(192,86,79,.14),rgba(164,141,112,.1) 78%,rgba(255,247,234,.02));
}

.corral-box--crimson::before{
  background:radial-gradient(420px 160px at 8% 0%,rgba(192,86,79,.2),transparent 70%);
}

.corral-box__tag{
  position:absolute;
  top:0;left:24px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px 5px;
  border-radius:0 0 var(--r-xs) var(--r-xs);
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#18120E;
  background:linear-gradient(92deg,var(--muted-2),var(--muted));
  z-index:2;
}

.corral-box--glow .corral-box__tag{background:linear-gradient(92deg,var(--gold-2),var(--gold));}
.corral-box--crimson .corral-box__tag{background:linear-gradient(92deg,var(--crimson),#D9836F);color:#FFF7EA;}

.corral-box__icon{
  position:relative;
  z-index:1;
  flex-shrink:0;
  width:54px;height:54px;
  display:grid;place-items:center;
  border-radius:var(--r-md);
  font-size:1.3rem;
  color:#1A1206;
  background:linear-gradient(140deg,var(--gold-2),var(--gold));
  box-shadow:0 8px 22px rgba(233,183,83,.3);
}

.corral-box--crimson .corral-box__icon{
  background:linear-gradient(140deg,#D9836F,var(--crimson));
  color:#FFF7EA;
  box-shadow:0 8px 22px rgba(192,86,79,.32);
}

.corral-box__body{
  position:relative;
  z-index:1;
  flex:1;
  min-width:0;
  padding-top:8px;
}

.corral-box__title{
  font-family:var(--f-head);
  font-size:1.06rem;
  font-weight:700;
  line-height:1.3;
  color:#FFF7EA;
  margin-bottom:4px;
}

.corral-box__desc{
  font-size:.87rem;
  line-height:1.6;
  color:var(--txt-soft);
}

.corral-box__btn{
  position:relative;
  z-index:1;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 24px;
  border-radius:var(--r-pill);
  font-size:.88rem;
  font-weight:700;
  color:#1A1206!important;   /* beats .hide-block__content a, which the box sits inside */
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 55%,var(--gold-deep));
  box-shadow:var(--sh-gold);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),filter .2s var(--ease);
}

.corral-box__btn:hover{
  color:#1A1206!important;
  transform:translateY(-2px);
  filter:brightness(1.06);
  box-shadow:0 16px 40px rgba(233,183,83,.42);
}

.corral-box__btn i{font-size:.78rem;transition:transform .2s var(--ease);}
.corral-box__btn:hover i{transform:translateX(3px);}

/* ---------------------------------------------------------- spec grid --- */
.sheet-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--gap-2);
  margin:var(--gap-3) 0;
}

.sheet-cell{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:14px 16px;
  min-width:0;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,247,234,.055),rgba(255,247,234,.015));
  transition:border-color .2s var(--ease),transform .2s var(--ease);
}

.sheet-cell:hover{border-color:rgba(233,183,83,.32);transform:translateY(-2px);}

.sheet-cell span{
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.11em;
  text-transform:uppercase;
  color:var(--txt-mute);
}

.sheet-cell strong{
  font-family:var(--f-head);
  font-size:.98rem;
  font-weight:700;
  color:#FFF7EA;
  line-height:1.4;
  overflow-wrap:anywhere;
}

.sheet-cell__na{
  color:var(--txt-mute);
  font-weight:400;
  cursor:help;
  border-bottom:1px dotted var(--txt-mute);
}

.sheet-grid__source{
  font-size:.78rem!important;
  color:var(--txt-mute)!important;
  margin-top:var(--gap-2)!important;
}

/* ------------------------------------------------------------- tables --- */
.glyph-table,
.contest-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:var(--gap-3) 0;
  font-size:.9rem;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  background:rgba(255,247,234,.02);
}

.glyph-table thead th,
.contest-table thead th{
  padding:13px 16px;
  text-align:left;
  font-family:var(--f-head);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#1A1206;
  background:linear-gradient(92deg,var(--gold),#F6D28C);
  white-space:nowrap;
}

.contest-table thead th{background:linear-gradient(92deg,var(--ink-400),var(--muted-dim));color:var(--txt);}

.glyph-table td,
.contest-table td{
  padding:13px 16px;
  border-top:1px solid var(--line);
  color:var(--txt-soft);
  vertical-align:top;
}

.glyph-table tbody tr:nth-child(odd),
.contest-table tbody tr:nth-child(odd){background:rgba(255,247,234,.028);}

.glyph-table tbody tr:hover,
.contest-table tbody tr:hover{background:rgba(233,183,83,.07);}

.glyph-table td:first-child{
  font-weight:600;
  color:#FFF7EA;
  white-space:nowrap;
}

.contest-table td:first-child{font-weight:600;color:#FFF7EA;}

.contest-table__self{
  background:linear-gradient(92deg,rgba(233,183,83,.14),rgba(233,183,83,.05))!important;
  box-shadow:inset 3px 0 0 var(--gold);
}

.contest-table__self td{color:#FFF7EA;}
.contest-table__self td:first-child{color:var(--gold-2);}

/* horizontal scroll wrapper generated by JS or fallback */
.pan-box{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

/* ------------------------------------------------------ verdict split --- */
.ledger-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--gap-3);
  margin:var(--gap-3) 0 var(--gap-4);
}

.ledger-col{
  padding:20px 22px;
  min-width:0;
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:rgba(255,247,234,.025);
}

.ledger-col h3{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:.98rem;
  margin:0 0 var(--gap-3);
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.ledger-col ul{margin:0;padding:0;list-style:none;}

.ledger-col li{
  position:relative;
  padding-left:24px;
  margin-bottom:10px;
  font-size:.9rem;
  line-height:1.6;
  color:var(--txt-soft);
}

.ledger-col li:last-child{margin-bottom:0;}

.ledger-col li::before{
  /* was Font Awesome \f00c / \f00d (check / xmark), set per column below. Now an SVG mask, so
     the colour is still driven by background-color and the shape by --tick. */
  content:'';
  position:absolute;
  left:0;top:.42em;
  width:.75rem;height:.75rem;
  background-color:currentColor;
  -webkit-mask:var(--tick) no-repeat center/contain;
  mask:var(--tick) no-repeat center/contain;
}

.ledger-col--pro{
  border-color:rgba(233,183,83,.3);
  background:linear-gradient(160deg,rgba(233,183,83,.1),rgba(233,183,83,.02));
}

.ledger-col--pro h3{color:var(--gold);}
.ledger-col--pro li::before{--tick:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 448 512%22 fill=%22currentColor%22><path d=%22M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%22/></svg>");background-color:var(--gold);}

.ledger-col--con{
  border-color:rgba(164,141,112,.3);
  background:linear-gradient(160deg,rgba(164,141,112,.1),rgba(164,141,112,.02));
}

.ledger-col--con h3{color:var(--muted-2);}
.ledger-col--con li::before{--tick:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 384 512%22 fill=%22currentColor%22><path d=%22M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z%22/></svg>");background-color:var(--muted);}

/* Font Awesome pseudo bullets inside frost content shouldn't double up */
.ledger-col ul li::before{content:'';}
.ledger-col--pro ul li::before{--tick:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 448 512%22 fill=%22currentColor%22><path d=%22M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z%22/></svg>");}
.ledger-col--con ul li::before{--tick:url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 384 512%22 fill=%22currentColor%22><path d=%22M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z%22/></svg>");}

/* -------------------------------------------------------- session log --- */
.trail-log{
  display:flex;
  flex-direction:column;
  gap:var(--gap-2);
  margin:var(--gap-3) 0;
  padding-left:22px;
  position:relative;
}

.trail-log::before{
  content:'';
  position:absolute;
  left:6px;top:8px;bottom:8px;
  width:2px;
  border-radius:2px;
  background:linear-gradient(180deg,var(--gold),rgba(164,141,112,.45));
  opacity:.5;
}

.trail-log__row{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--gap-3);
  align-items:baseline;
  padding:12px 16px;
  border-radius:var(--r-sm);
  border:1px solid var(--line);
  background:rgba(255,247,234,.028);
  transition:border-color .2s var(--ease),background .2s var(--ease);
}

.trail-log__row:hover{
  border-color:rgba(164,141,112,.34);
  background:rgba(164,141,112,.07);
}

.trail-log__row::before{
  content:'';
  position:absolute;
  left:-21px;top:19px;
  width:9px;height:9px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 3px rgba(233,183,83,.18);
}

.trail-log__when{
  font-family:var(--f-head);
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--gold-2);
  white-space:nowrap;
}

.trail-log__what{
  font-size:.9rem;
  line-height:1.6;
  color:var(--txt-soft);
}

.trail-log__note{
  font-size:.82rem!important;
  font-style:italic;
  color:var(--txt-mute)!important;
  padding-left:22px;
  border-left:2px solid rgba(255,247,234,.1);
}

/* ------------------------------------------------------------ sidebar --- */
.tally-feed{
  padding:var(--gap-4);
  border-radius:var(--r-lg);
  border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(164,141,112,.12),rgba(255,247,234,.02));
  box-shadow:var(--sh-md);
  min-width:0;
}

.tally-feed__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:var(--gap-3);
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
}

.tally-feed__pulse{
  width:9px;height:9px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--gold);
  box-shadow:0 0 0 0 rgba(233,183,83,.6);
  animation:drift-pulse 2s infinite;
}

@keyframes drift-pulse{
  0%{box-shadow:0 0 0 0 rgba(233,183,83,.6);}
  70%{box-shadow:0 0 0 11px rgba(233,183,83,0);}
  100%{box-shadow:0 0 0 0 rgba(233,183,83,0);}
}

.tally-feed__title{
  margin:0;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#FFF7EA;
}

.tally-feed__rows{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-bottom:var(--gap-3);
}

.tally-feed__disc{
  font-size:.7rem;
  line-height:1.5;
  color:var(--txt-mute);
  margin:0 0 var(--gap-3);
  text-align:center;
}

.tally-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-3);
  padding:10px 12px;
  min-width:0;
  border-radius:var(--r-sm);
  background:rgba(255,247,234,.03);
  border:1px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease);
  animation:drift-in .45s var(--ease);
}

@keyframes drift-in{
  from{opacity:0;transform:translateY(-6px);}
  to{opacity:1;transform:none;}
}

.tally-row:hover{
  background:rgba(233,183,83,.08);
  border-color:rgba(233,183,83,.22);
}

.tally-row__who{
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.35;
}

.tally-row__who strong{
  font-size:.84rem;
  font-weight:600;
  color:#FFF7EA;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tally-row__who span{
  font-size:.7rem;
  color:var(--txt-mute);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.tally-row__what{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:0;
  line-height:1.35;
  text-align:right;
}

.tally-row__game{
  font-size:.7rem;
  color:var(--txt-mute);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:130px;
}

.tally-row__sum{
  font-family:var(--f-head);
  font-size:.92rem;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
}

.flank-card{
  padding:var(--gap-4);
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(180deg,rgba(255,247,234,.055),rgba(255,247,234,.015));
  box-shadow:var(--sh-sm);
  min-width:0;
}

.flank-card__title{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0 0 var(--gap-3);
  padding-bottom:12px;
  border-bottom:1px solid var(--line);
  font-size:.9rem;
  font-weight:700;
}

.flank-card__title i{color:var(--gold);}

.flank-card__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-3);
  padding:10px 12px;
  border-radius:var(--r-sm);
  font-size:.87rem;
  color:var(--txt-soft);
  border:1px solid transparent;
  transition:all .18s var(--ease);
}

.flank-card__row + .flank-card__row{margin-top:2px;}

.flank-card__row:hover{
  color:#FFF7EA;
  background:rgba(233,183,83,.08);
  border-color:rgba(233,183,83,.2);
  transform:translateX(2px);
}

.flank-card__row strong{
  font-family:var(--f-head);
  color:var(--gold-2);
  white-space:nowrap;
}

/* ---------------------------------------------------------- reel zone --- */
.herd-zone{padding:var(--gap-5) 0;}

.herd-zone__title{
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  margin-bottom:var(--gap-4);
  text-align:center;
}

.herd-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:var(--gap-3);
}

.herd-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  padding:0 16px 20px;
  min-width:0;
  text-align:center;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(255,247,234,.06),rgba(255,247,234,.015));
  box-shadow:var(--sh-sm);
  overflow:hidden;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}

.herd-tile::before{
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(320px 190px at 50% 100%,rgba(233,183,83,.18),transparent 70%);
  opacity:0;
  transition:opacity .25s var(--ease);
  pointer-events:none;
}

.herd-tile:hover{
  transform:translateY(-6px);
  border-color:rgba(233,183,83,.35);
  box-shadow:var(--sh-md);
}

.herd-tile:hover::before{opacity:1;}

.herd-tile__art{
  position:relative;
  width:calc(100% + 32px);          /* cancel the card's side padding - art runs edge to edge */
  margin:0 -16px 12px;
  aspect-ratio:325/234;             /* the provider's own tile shape, see docs/DEMO_GAMES.md */
  display:grid;place-items:center;
  overflow:hidden;
  line-height:0;
  isolation:isolate;
  font-size:2.1rem;
  color:var(--gold);                /* fallback glyph for a game with no tile yet */
  background-color:var(--ink-600);
}

/* the frame is fixed now, so the zoom belongs to the image inside it */
.herd-tile__art img{transition:transform .35s var(--ease);}
.herd-tile:hover .herd-tile__art img{transform:scale(1.05);}

.herd-tile__name{
  position:relative;
  font-family:var(--f-head);
  font-size:.98rem;
  font-weight:700;
  color:#FFF7EA;
  line-height:1.3;
  overflow-wrap:anywhere;
}

.herd-tile__meta{
  position:relative;
  font-size:.75rem;
  color:var(--txt-mute);
  overflow-wrap:anywhere;
}

.herd-tile__score{
  position:relative;
  margin-top:5px;
  padding:4px 14px;
  border-radius:var(--r-pill);
  font-family:var(--f-head);
  font-size:.82rem;
  font-weight:700;
  color:#1A1206;
  background:linear-gradient(135deg,var(--gold-2),var(--gold));
}

/* --------------------------------------------------------------- FAQ ---- */
.poser-wrap{padding:var(--gap-5) 0 var(--gap-6);}

.poser-wrap__title{
  font-size:clamp(1.35rem,2.4vw,1.85rem);
  margin-bottom:var(--gap-4);
  text-align:center;
}

.poser-wrap__grid{
  display:flex;
  flex-direction:column;
  gap:var(--gap-2);
  max-width:900px;
  margin-inline:auto;
}

.poser-item{
  border-radius:var(--r-md);
  border:1px solid var(--line);
  background:linear-gradient(160deg,rgba(255,247,234,.05),rgba(255,247,234,.015));
  overflow:hidden;
  transition:border-color .22s var(--ease),background .22s var(--ease);
}

.poser-item:hover{border-color:var(--line-2);}

.poser-item.is-open{
  border-color:rgba(233,183,83,.34);
  background:linear-gradient(160deg,rgba(233,183,83,.08),rgba(255,247,234,.02));
}

.poser-item__trigger{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--gap-3);
  width:100%;
  padding:18px 22px;
  border:0;
  background:transparent;
  text-align:left;
  color:#FFF7EA;
}

.poser-item__trigger h3{
  margin:0;
  font-size:1rem;
  font-weight:600;
  line-height:1.5;
  color:inherit;
}

.poser-item__icon{
  flex-shrink:0;
  font-size:.78rem;
  color:var(--gold);
  transition:transform .28s var(--ease);
}

.poser-item.is-open .poser-item__icon{transform:rotate(180deg);}

.poser-item__panel{
  max-height:0;
  overflow:hidden;
  transition:max-height .36s var(--ease);
}

.poser-item.is-open .poser-item__panel{max-height:900px;}

.poser-item__panel p{
  margin:0;
  padding:0 22px 20px;
  font-size:.93rem;
  line-height:1.78;
  color:var(--txt-soft);
}

/* -------------------------------------------------- generic page heads -- */
.crest-top{
  position:relative;
  padding:var(--gap-6) 0 var(--gap-5);
  text-align:center;
  overflow:hidden;
}

.crest-top::before{
  content:'';
  position:absolute;
  top:-260px;left:50%;
  width:1100px;height:620px;
  transform:translateX(-50%);
  background:
    radial-gradient(closest-side,rgba(233,183,83,.12),transparent 70%),
    radial-gradient(closest-side,rgba(233,183,83,.06),transparent 70%);
  background-position:30% 40%,70% 35%;
  background-size:70% 90%,70% 90%;
  background-repeat:no-repeat;
  filter:blur(40px);
  pointer-events:none;
}

.crest-top .range-wrap{position:relative;z-index:1;}

.crest-top__title{
  font-size:clamp(1.9rem,4vw,3rem);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:var(--gap-3);
}

.crest-top__title span{
  background:linear-gradient(96deg,var(--gold),var(--gold-2) 45%,#FFF7EA);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.crest-top__lead{
  max-width:70ch;
  margin-inline:auto;
  font-size:clamp(.98rem,1.3vw,1.1rem);
  line-height:1.75;
  color:var(--txt-soft);
}

.lead-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:var(--gap-3);
  margin:var(--gap-4) 0 var(--gap-5);
}

.brief-card{
  padding:24px;
  min-width:0;
  border-radius:var(--r-lg);
  border:1px solid var(--line);
  background:linear-gradient(170deg,rgba(255,247,234,.055),rgba(255,247,234,.015));
  box-shadow:var(--sh-sm);
  font-size:.94rem;
  line-height:1.72;
  color:var(--txt-soft);
  transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease);
}

.brief-card:hover{
  transform:translateY(-4px);
  border-color:rgba(233,183,83,.3);
  box-shadow:var(--sh-md);
}

.brief-card p:last-child{margin-bottom:0;}

.brief-card__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:1.05rem;
  margin-bottom:var(--gap-2);
}

.brief-card__title i{color:var(--gold);}

/* ---------------------------------------------------------- guard note -- */
.mind-note{
  padding:var(--gap-5) 0;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,rgba(192,86,79,.05),transparent 60%);
}

.mind-note__inner{
  display:flex;
  gap:var(--gap-4);
  align-items:flex-start;
  padding:26px 28px;
  border-radius:var(--r-lg);
  border:1px solid rgba(192,86,79,.24);
  background:linear-gradient(140deg,rgba(192,86,79,.08),rgba(255,247,234,.02));
}

.mind-note__icon{
  flex-shrink:0;
  font-size:1.6rem;
  color:var(--crimson);
  margin-top:4px;
  filter:drop-shadow(0 4px 14px rgba(192,86,79,.4));
}

.mind-note__title{
  font-size:1.1rem;
  margin-bottom:var(--gap-2);
}

.mind-note p{
  font-size:.88rem;
  line-height:1.72;
  color:var(--txt-soft);
  margin-bottom:var(--gap-2);
}

.mind-note p:last-child{margin-bottom:0;}

.mind-note a{border-bottom:1px solid rgba(233,183,83,.35);}

/* -------------------------------------------------------------- footer -- */
.canyon-foot{
  padding:var(--gap-6) 0 var(--gap-4);
  border-top:1px solid var(--line);
  background:linear-gradient(180deg,#1B1510,#0B0806);
}

.canyon-foot__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1fr;
  gap:var(--gap-5);
}

.canyon-foot__col{display:flex;flex-direction:column;min-width:0;}

.canyon-foot__head{
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:var(--gap-3);
}

.canyon-foot__link{
  font-size:.88rem;
  color:var(--txt-soft);
  padding:5px 0;
  transition:color .18s var(--ease),transform .18s var(--ease);
}

.canyon-foot__link:hover{color:var(--gold-2);transform:translateX(3px);}

.canyon-foot__blurb{
  font-size:.86rem;
  line-height:1.72;
  color:var(--txt-mute);
  max-width:42ch;
}

.canyon-foot__age{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:var(--gap-3);
  padding:11px 13px;
  border-radius:var(--r-sm);
  border:1px solid rgba(192,86,79,.28);
  background:rgba(192,86,79,.07);
  font-size:.74rem;
  line-height:1.5;
  color:var(--txt-soft);
}

.canyon-foot__age span{
  flex-shrink:0;
  display:grid;
  place-items:center;
  width:34px;height:34px;
  border-radius:50%;
  font-family:var(--f-head);
  font-size:.78rem;
  font-weight:800;
  color:#FFF7EA;
  background:linear-gradient(140deg,var(--crimson),var(--crimson-dim));
}

.canyon-foot__base{
  margin-top:var(--gap-5);
  padding-top:var(--gap-4);
  border-top:1px solid var(--line);
  text-align:center;
}

.canyon-foot__base p{
  font-size:.78rem;
  line-height:1.7;
  color:var(--txt-mute);
  max-width:90ch;
  margin-inline:auto;
}

.canyon-foot__note{
  color:var(--crimson)!important;
  font-weight:600;
  opacity:.85;
  margin-bottom:0!important;
}

/* ---------------------------------------------------------- sticky CTA -- */
.latch-cta{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:180;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  border-radius:var(--r-pill);
  font-family:var(--f-body);
  font-size:.9rem;
  font-weight:700;
  color:#1A1206;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 52%,#C89235);
  box-shadow:0 14px 40px rgba(233,183,83,.4);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),filter .2s var(--ease);
  animation:snap-in .5s var(--ease) both;
}

@keyframes snap-in{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:none;}
}

.latch-cta:hover{
  color:#1A1206;
  transform:translateY(-3px);
  filter:brightness(1.06);
  box-shadow:0 20px 52px rgba(233,183,83,.55);
}

.latch-cta i{font-size:.95rem;}

/* =========================================================== responsive == */
@media (max-width:1200px){
  .ridge-hero__grid{gap:var(--gap-5);}
  .twin-col{gap:var(--gap-4);}
}

@media (max-width:1000px){
  :root{--gap-6:44px;--gap-5:28px;}

  .range-wrap{padding-inline:22px;}

  .twin-col{grid-template-columns:minmax(0,1fr);}

  .twin-col__side{
    position:static;
    top:auto;
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:var(--gap-3);
  }

  .canyon-foot__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--gap-4);
  }

  .offer-band__row{grid-template-columns:repeat(2,minmax(0,1fr));}

  .glyph-table,
  .contest-table{display:block;overflow-x:auto;white-space:nowrap;}
  .glyph-table td,
  .contest-table td{white-space:normal;min-width:180px;}
}

@media (max-width:900px){
  .mesa-nav{display:none;}
  .mesa-head__btns{display:none;}
  .rungs-toggle{display:flex;}

  .mesa-head__inner{min-height:64px;}

  .ridge-hero{padding-top:var(--gap-5);}

  .ridge-hero__grid{
    grid-template-columns:minmax(0,1fr);
    gap:var(--gap-4);
  }

  .ridge-hero__side{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
  }

  .grade-ring{width:150px;height:150px;}
  .grade-ring__num{font-size:2.5rem;}
  .grade-ring__facts{flex:1;min-width:240px;}
}

@media (max-width:700px){
  :root{--gap-6:36px;--gap-5:24px;--gap-4:18px;}

  body{font-size:15.5px;}

  .range-wrap{padding-inline:16px;}

  .notice-bar__text{font-size:.72rem;padding:8px 0;}

  .stamp-mark__glyph{width:36px;height:36px;font-size:.95rem;}
  .stamp-mark__text{font-size:.95rem;}

  .ridge-hero{padding-bottom:var(--gap-4);}
  .ridge-hero__title{font-size:clamp(1.75rem,7.4vw,2.4rem);}
  .ridge-hero__btns{gap:var(--gap-2);}
  .ridge-hero__btns .brand-btn{flex:1 1 100%;}
  .ridge-hero__side{padding:var(--gap-3);flex-direction:column;}
  .grade-ring__facts{width:100%;min-width:0;}

  .credited{max-width:none;}

  .offer-cell{padding:14px 15px;}
  .offer-cell strong{font-size:.95rem;}
  .offer-cell span{font-size:.66rem;}

  .freeplay-stage__frame{border-radius:var(--r-md);}
  .freeplay-stage__veil{padding:var(--gap-3) 18px;}
  .freeplay-stage__veil p{font-size:.8rem;}

  .hide-block{
    padding:20px 16px;
    border-radius:var(--r-md);
  }

  .hide-block__content{font-size:.95rem;line-height:1.76;}

  .ledger-split{grid-template-columns:minmax(0,1fr);}

  .sheet-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}

  /* CTA box stacks */
  .corral-box{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:var(--gap-3);
    padding:34px 18px 20px;
  }

  .corral-box__tag{
    left:50%;
    transform:translateX(-50%);
  }

  .corral-box__icon{margin-inline:auto;}
  .corral-box__body{padding-top:0;}
  .corral-box__btn{justify-content:center;}

  .trail-log{padding-left:0;}
  .trail-log::before{display:none;}
  .trail-log__row{grid-template-columns:minmax(0,1fr);gap:4px;}
  .trail-log__row::before{display:none;}
  .trail-log__note{padding-left:14px;}

  .herd-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap-2);}
  .herd-tile{padding:0 12px 16px;border-radius:var(--r-md);}
  .herd-tile__art{width:calc(100% + 24px);margin:0 -12px 10px;font-size:1.6rem;}
  .herd-tile__name{font-size:.9rem;}

  .poser-item__trigger{padding:15px 16px;}
  .poser-item__trigger h3{font-size:.93rem;}
  .poser-item__panel p{padding:0 16px 16px;font-size:.88rem;}

  .twin-col__side{grid-template-columns:minmax(0,1fr);}

  .mind-note__inner{
    flex-direction:column;
    gap:var(--gap-3);
    padding:20px 18px;
  }

  .canyon-foot__grid{grid-template-columns:minmax(0,1fr);gap:var(--gap-4);}
  .canyon-foot__base p{font-size:.74rem;}

  .latch-cta{
    right:14px;
    bottom:14px;
    padding:11px 18px;
    font-size:.82rem;
  }
}

@media (max-width:420px){
  .offer-band__row{grid-template-columns:minmax(0,1fr);}
  .latch-cta span{font-size:.8rem;}
  .tally-row__game{max-width:100px;}
}

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

/* --------------------------------------------------------------- print -- */
@media print{
  .mesa-head,.pullout,.latch-cta,.notice-bar,.freeplay-stage,.tally-feed{display:none!important;}
  body{background:#fff;color:#000;}
}

/* ==========================================================================
   DEMO GATE - playable preview, then the offer
   ========================================================================== */

.freeplay-stage__frame { position: relative; }

.freeplay-stage__game {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--ink-900);
}

.freeplay-stage__count {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  padding: 6px 14px;
  border-radius: var(--r-pill, 999px);
  font: 600 12px/1 var(--font-body, Inter, system-ui, sans-serif);
  letter-spacing: .02em;
  color: #1A1206;
  background: linear-gradient(135deg, #E9B753, #F6D28C);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45);
  pointer-events: none;
}

.freeplay-gate {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap-3, 18px);
  background: radial-gradient(120% 120% at 50% 0%, rgba(39,32,26,.82), rgba(24,18,14,.96));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: demoGateIn .28s ease-out both;
}

@keyframes demoGateIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.freeplay-gate__card {
  width: min(560px, 100%);
  text-align: center;
  padding: clamp(20px, 4vw, 36px);
  border-radius: var(--r-lg, 18px);
  border: 1px solid rgba(233,183,83,.28);
  background: linear-gradient(160deg, rgba(50,42,35,.96), rgba(24,18,14,.96));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6);
}

.freeplay-gate__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin-bottom: var(--gap-2, 12px);
  border-radius: var(--r-pill, 999px);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #E9B753;
  background: rgba(233,183,83,.12);
  border: 1px solid rgba(233,183,83,.3);
}

.freeplay-gate__title {
  margin: 0 0 10px;
  font-family: var(--font-head, Sora, system-ui, sans-serif);
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  line-height: 1.25;
  color: #FFF7EA;
}

.freeplay-gate__lead {
  margin: 0 0 var(--gap-3, 18px);
  color: rgba(255,247,234,.78);
  font-size: 15px;
  line-height: 1.6;
}

.freeplay-gate__btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.freeplay-gate__fine {
  margin: var(--gap-3, 18px) 0 0;
  font-size: 12px;
  color: rgba(255,247,234,.45);
}

@media (max-width: 700px) {
  .freeplay-gate__btns { flex-direction: column; }
  .freeplay-gate__btns > * { width: 100%; }
  .freeplay-stage__count { top: 8px; right: 8px; font-size: 11px; padding: 5px 10px; }
}

/* session tally inside the demo gate */
.freeplay-gate__tally {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0 0 var(--gap-3, 18px);
  padding: 12px;
  border-radius: var(--r-md, 12px);
  background: rgba(255,247,234,.04);
  border: 1px solid rgba(255,247,234,.07);
}

.freeplay-gate__tally > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}

.freeplay-gate__tally span {
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,247,234,.5);
}

.freeplay-gate__tally strong {
  font-size: 15px;
  color: #FFF7EA;
  font-variant-numeric: tabular-nums;
}

.freeplay-gate__tally strong.is-up   { color: #E9B753; }
.freeplay-gate__tally strong.is-down { color: var(--muted); }

@media (max-width: 700px) {
  .freeplay-gate__tally { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   ADDITIONS
   ========================================================================== */

/* ------------------------------------------- real game thumbnail tiles -- */
/* Real game art replaces the Font Awesome glyph inside .herd-tile__art.
   The frame itself (full card width, 325/234, clipped by the card's own
   radius) is defined with the component up in the reel zone - only the image
   fill lives here. Tiles are mixed sizes between providers, so cover crops
   rather than letterboxes. */
.herd-tile__art img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  border-radius:inherit;
}

/* ------------------------------------------ brand mark without a glyph -- */
/* .stamp-mark__glyph is being deleted from the markup. Its rule above is
   left in place for any page still shipping it, but the lockup has to read
   correctly with only .stamp-mark__text inside: the flex gap is inert with a
   single child, so all that is needed is a self-contained text baseline and
   the hover feedback the icon used to carry. */
.stamp-mark{line-height:1;}

.stamp-mark__text{
  display:inline-block;
  line-height:1.25;
  transition:filter .18s var(--ease);
}

.stamp-mark:hover .stamp-mark__text{filter:brightness(1.12);}

/* ==========================================================================
   HERO ARTWORK - replaces the score ring when the image exists
   ========================================================================== */

.banner-art {
  position: relative;
  margin: 0 0 var(--gap-3);
  border-radius: var(--r-xl);
  overflow: hidden;
  line-height: 0;
  background: var(--ink-700);
}

.banner-art img {
  width: 100%;
  height: auto;
  display: block;
  /* the render fades to charcoal at its edges, so blend it into the page ground */
  mask-image: radial-gradient(115% 115% at 50% 45%, #000 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(115% 115% at 50% 45%, #000 58%, transparent 100%);
}

.banner-art__score {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 9px 16px;
  line-height: 1.1;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--gold), var(--gold-2));
  box-shadow: 0 8px 24px rgba(233, 183, 83, .3), 0 2px 8px rgba(0, 0, 0, .5);
}

.banner-art__score strong {
  font-family: var(--font-head, Sora, system-ui, sans-serif);
  font-size: 20px;
  font-weight: 800;
  color: var(--on-gold);
  font-variant-numeric: tabular-nums;
}

.banner-art__score span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-gold);
  opacity: .72;
}

/* ==========================================================================
   DEMO STAGE - loading state while the provider's game boots
   ========================================================================== */

.freeplay-stage__loading {
  margin: 0;
  font-size: 14px;
  color: var(--muted);
}

.freeplay-stage__spinner {
  width: 34px;
  height: 34px;
  margin-bottom: 4px;
  border-radius: 50%;
  border: 2px solid rgba(233, 183, 83, .18);
  border-top-color: var(--gold);
  animation: demoSpin .8s linear infinite;
}

@keyframes demoSpin { to { transform: rotate(360deg); } }

/* the launch button is only a manual escape hatch now - keep it quiet */
.freeplay-stage__veil .freeplay-stage__launch {
  margin-top: 6px;
  font-size: 13px;
  padding: 8px 18px;
  opacity: .7;
}

.freeplay-stage__veil .freeplay-stage__launch:hover { opacity: 1; }

/* ==========================================================================
   OFFER HOOK BAND
   ========================================================================== */

.offer-band__row .offer-cell strong {
  color: var(--gold);
}

.offer-band__note {
  margin: var(--gap-2) 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--muted-dim);
}

@media (prefers-reduced-motion: reduce) {
  .freeplay-stage__spinner { animation: none; }
}

/* --------------------------------------------------------------------------
   HERO ART - overrides for when the artwork replaces the score ring
   The image already carries its own vignette baked in, so the CSS mask that
   made sense for a hard-edged image now double-crops it. Drop the mask, and
   drop the card chrome behind it so the artwork reads as artwork rather than
   a picture sitting in a box.
   -------------------------------------------------------------------------- */

.ridge-hero__side:has(.banner-art) {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  gap: var(--gap-2);
}

.banner-art {
  margin: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}

.banner-art img {
  mask-image: none;
  -webkit-mask-image: none;
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .55));
}

/* the score badge floats over the artwork's lower right, clear of the fan */
.banner-art__score {
  right: 6%;
  bottom: 12%;
}

/* facts strip has to carry its own surface now the panel is gone */
.ridge-hero__side:has(.banner-art) .grade-ring__facts {
  width: 100%;
  padding: var(--gap-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-2);
  background: linear-gradient(165deg, rgba(247, 247, 245, .07), rgba(247, 247, 245, .02));
  box-shadow: var(--sh-lg);
  backdrop-filter: blur(14px);
}

/* homepage hero: the artwork carries the panel on its own, no spec rows under it */
.ridge-hero__side--art {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
}

.banner-art--lead img {
  /* let it run a little larger than the column so it reads as the hero, not an inset */
  width: 112%;
  max-width: none;
  margin-left: -6%;
}

@media (max-width: 900px) {
  .banner-art--lead img { width: 100%; margin-left: 0; }
}

/* HEADER FIT
   The primary CTA now carries a number ("Get 200 Free Spins"), so the button pair is far wider
   than the old "Play for Real". Measured at 1200px: logo+nav ends at 842, the button block is
   294 wide, leaving 36px of slack - so the two collide below roughly 1164px, while the burger
   only took over at 900px. That left a 264px-wide band of broken header.
   Two steps instead of one:
     under 1200px  drop the secondary button (needs ~1040px with the primary alone)
     under 1040px  hand over to the burger
   The demo is reachable from the hero and from every review page; the offer button is the one
   that earns, so it is the one that survives longest. */
@media (max-width: 1200px) {
  .mesa-head__btns .brand-btn--ghost { display: none; }
}

@media (max-width: 1040px) {
  .mesa-nav { display: none; }
  .mesa-head__btns { display: none; }
  .rungs-toggle { display: flex; }
}

/* --------------------------------------------------------------------------
   HERO ART - give the homepage picture real space
   The default hero grid is 1.35fr / 0.65fr, which suits the slot review pages
   where the side column holds a score badge and a stats panel. On the homepage
   the side column holds a 16:9 illustration, and at that ratio it rendered
   411px wide next to a 761px text column - decorative rather than a hero.
   Only the artwork variant gets the wider split, so the review pages are
   untouched.
   -------------------------------------------------------------------------- */

.ridge-hero__grid:has(.ridge-hero__side--art) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: var(--gap-6);
  align-items: center;
}

/* Breaks out to the RIGHT only. The earlier version overflowed both sides, which
   pulled the artwork into the copy and left no breathing room between them; the
   left edge now sits on the column boundary so the grid gap is actually visible. */
.banner-art--lead img {
  width: 115%;
  max-width: none;
  margin-left: 0;
  margin-right: -15%;
}

@media (max-width: 1200px) {
  .ridge-hero__grid:has(.ridge-hero__side--art) {
    grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    gap: var(--gap-5);
  }
  .banner-art--lead img { width: 108%; margin-left: 0; margin-right: -8%; }
}

@media (max-width: 900px) {
  /* stacked: the picture goes full width and stops overflowing */
  .ridge-hero__grid:has(.ridge-hero__side--art) { grid-template-columns: 1fr; }
  .banner-art--lead img { width: 100%; margin-left: 0; margin-right: 0; }
}

/* --------------------------------------------------------------------------
   LET THE GOLD GLOW ESCAPE ITS SECTION
   .ridge-hero and .crest-top carry `overflow:hidden` so their big ::before
   aurora glow (1300x760, sitting 320px above the section) stays contained.
   That same clip was also cutting the hover box-shadow off any gold button
   near a section edge - the glow stopped dead on the boundary line.

   `overflow: clip` clips exactly like hidden but honours overflow-clip-margin,
   so we can allow a small bleed: enough for a 40px button shadow to spill into
   the next section, nowhere near enough to release the 320px background glow.
   `overflow:hidden` stays as the first declaration as a fallback for engines
   without overflow-clip-margin - they keep today's behaviour rather than
   letting the aurora leak across the page.
   -------------------------------------------------------------------------- */

.ridge-hero,
.crest-top {
  overflow: hidden;                 /* fallback */
  overflow: clip;
  overflow-clip-margin: 72px;
}

/* the button also needs to sit above the following section's own painting */
.ridge-hero__btns .brand-btn,
.crest-top .brand-btn {
  position: relative;
  z-index: 3;
}

/* --------------------------------------------------------------------------
   FEATHERED HERO ART
   The per-game illustrations are full-bleed rectangles with hard edges, unlike
   the homepage bundle image which has a vignette baked into the PNG. Without a
   mask they sit on the charcoal as an obvious pasted-in box.

   Two masks composited together: a soft rectangular falloff on each axis, plus
   a radial that pulls the corners in harder. `mask-composite: intersect` keeps
   whichever is more transparent, so edges and corners both dissolve.
   -------------------------------------------------------------------------- */

/* Edge-fade is baked into the images' alpha channel, not done in CSS.
   Three CSS approaches were tried and all three misbehaved:
     - three gradients + mask-composite  -> image rendered blank in Chrome
     - one radial gradient               -> cropped the artwork into an oval
     - split masks on frame and image    -> mask-clip:border-box sliced the
                                            overflowing child at the frame edge
   Baking a rectangular smoothstep falloff into the WebP alpha removes the
   problem class entirely and matches how the homepage bundle image already
   works. The frame stays as the sizing element; no masks anywhere. */

.banner-art--feather .banner-art__frame {
  display: block;
  line-height: 0;
  width: 112%;
  max-width: none;
  margin-right: -12%;
}

.banner-art--feather .banner-art__frame img {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  /* a drop shadow would trace the rectangle the alpha fade is hiding */
  filter: none;
}

@media (max-width: 900px) {
  .banner-art--feather .banner-art__frame { width: 100%; margin-right: 0; }
}

/* the score badge must stay crisp - it sits outside the masked image */
.banner-art--feather .banner-art__score {
  right: 8%;
  bottom: 14%;
}

/* --------------------------------------------------------------------------
   HERO PERKS - three benefit lines in place of the hero paragraph
   The tick is U+2714 followed by U+FE0E, the text-presentation selector. That
   forces the glyph to render as monochrome text rather than a colour emoji, so
   `color` actually applies and it comes out gold. Without FE0E most platforms
   substitute the green emoji check and ignore the colour entirely.
   -------------------------------------------------------------------------- */

.boon-list {
  list-style: none;
  margin: 0 0 var(--gap-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.boon-list li {
  /* NOT flex: <strong> and the sentence after it are separate children, so a flex
     row lays them out as two independently-wrapping columns with a gap down the
     middle. It only looked right while the perk text was short enough to fit on one
     line. A hanging indent keeps the tick in the gutter and the rest as flowing text. */
  display: block;
  padding-left: 1.75em;
  text-indent: -1.75em;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.45;
  color: var(--text-2, #DDD4C8);
}

.boon-list strong {
  color: var(--text, #FFF7EA);
  font-weight: 700;
}

.boon-list__tick {
  display: inline-block;
  margin-right: .6em;
  text-indent: 0;
  font-size: 1.05em;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 14px rgba(233, 183, 83, .45);
  font-family: "Apple Symbols", "Segoe UI Symbol", system-ui, sans-serif;
}

@media (max-width: 700px) {
  .boon-list li { font-size: .98rem; }
}
/* ==========================================================================
   INLINE ICONS - replaces the Font Awesome stylesheet removed 2026-09-15.
   Matches Font Awesome's own SVG metrics so every existing font-size and color
   rule keeps working: 1em square, currentColor, baseline nudged by -.125em.
   Markup comes from icon() in includes/icons.php.
   ========================================================================== */
.ico{
  /* height drives the size and the width follows the icon's own viewBox ratio - exactly what
     Font Awesome's SVG output does. A fixed 1em square is WRONG: most FA glyphs are narrower
     than they are tall (fa-play is 384/512 = .75em wide), and forcing them square widened every
     button just enough to wrap the hero's second CTA onto a second line. */
  height:1em;
  width:auto;
  fill:currentColor;
  vertical-align:-.125em;
  display:inline-block;
  flex-shrink:0;
}


/* ==========================================================================
   DEMO STAGE - PHONE SIZING + IMMERSIVE MODE            added 2026-09-15
   --------------------------------------------------------------------------
   Before this, .freeplay-stage__frame was 16:9 at every width. On a 390px phone that is 358x201,
   22% of the screen, and Pragmatic renders its LANDSCAPE layout inside the letterbox - the reels
   and the spin button end up unusable. Measured, not guessed.

   Two changes:
     1. 3:4 on phones. The box becomes 358x477, 2.4x the area, and the provider's client switches
        to its own portrait layout. Same game, same URL, nothing extra downloaded.
     2. An immersive mode that pins the stage over the whole screen.

   WHY CSS AND NOT THE FULLSCREEN API: iOS Safari does not implement requestFullscreen() on
   anything but <video>, so it would do nothing on an iPhone - the device this is for.

   WHY THE STAGE AND NOT THE IFRAME: demo-gate.js appends the offer gate INSIDE the stage. Had the
   <iframe> been the fullscreen element, the browser would paint only its subtree and the gate
   would be invisible - the visitor finishes the preview and sees nothing. With the stage pinned,
   game and gate go full screen together and the CTA becomes the largest thing on the site.
   ========================================================================== */
/* CHANGE 1: a phone gets a portrait box, not a letterbox. */
@media (max-width:640px){
  .freeplay-stage__frame{
    aspect-ratio:3/4;
    border-radius:var(--r-md);
  }
}

/* ------------------------------------------------------ the immersive switch -- */
/* TOP-right, not bottom-right.
   Bottom-right is already taken: .snap-cta is a fixed "Claim Your Bonus" button pinned to the
   bottom of the screen at z-index 180. Measured on a 390x844 phone, at the scroll position where
   the demo box first comes into view the two rectangles overlap and the sticky CTA wins the tap -
   so tapping "Full screen" sent the visitor to the affiliate page instead. Top-right is clear of
   it at every scroll position, and it is also where the Close control sits in immersive, so the
   control does not jump when the visitor enters or leaves full screen. */
.freeplay-stage__full{
  position:absolute;
  z-index:5;
  right:10px;
  top:10px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border:1px solid rgba(233,183,83,.45);
  border-radius:var(--r-pill,999px);
  font:600 12px/1 var(--f-body,Inter,system-ui,sans-serif);
  color:#1A1206;
  background:linear-gradient(135deg,#E9B753,#F6D28C);
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  cursor:pointer;
  /* 44px is the minimum comfortable tap target on a phone. */
  min-height:40px;
}

.freeplay-stage__full:active{transform:translateY(1px);}

/* CHANGE 2: immersive. The element keeps its place in the DOM and only changes how it
   is painted, so the <iframe> is never re-parented - if it were, the browser would
   reload the game and the spin count would reset to zero and the gate would never fire. */
.freeplay-stage__frame.is-immersive{
  position:fixed;
  inset:0;
  z-index:9999;
  width:100vw;
  height:100vh;         /* fallback first */
  height:100dvh;        /* excludes the phone's browser chrome */
  aspect-ratio:auto;
  border:0;
  border-radius:0;
  box-shadow:none;
}

/* The page behind must not scroll while the game owns the screen. */
body.freeplay-lock{overflow:hidden;}

/* In immersive the button becomes a small exit control, clear of the game's own UI.
   Pragmatic puts its controls along the bottom, so this sits top-right.
   z-index must beat .freeplay-gate (6): when the preview ends in full screen the gate covers the
   whole screen, and if the exit control sat under it the visitor would have no way back to the
   page except the browser's back gesture. */
.freeplay-stage__frame.is-immersive .freeplay-stage__full{
  right:max(10px,env(safe-area-inset-right));
  top:max(10px,env(safe-area-inset-top));
  padding:9px 13px;
  z-index:7;
}

/* A placeholder holds the layout open while the stage is pinned, so the page does not
   jump and the visitor returns to the same scroll position. */
.freeplay-stage__keeper{display:none;}
.freeplay-stage__keeper.is-on{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--r-lg);
  border:1px dashed var(--line-2);
  background:rgba(247,247,245,.02);
}
@media (max-width:640px){
  .freeplay-stage__keeper.is-on{aspect-ratio:3/4;border-radius:var(--r-md);}
}

/* --------------------------------------------------------------- the gate -- */
.freeplay-gate{
  position:absolute;
  inset:0;
  z-index:6;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--gap-3,18px);
  background:radial-gradient(120% 120% at 50% 0%,rgba(26,35,45,.82),rgba(16,23,31,.96));
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:freeplayGateIn .28s ease-out both;
  overflow-y:auto;
}

@keyframes freeplayGateIn{from{opacity:0;}to{opacity:1;}}

.freeplay-gate__card{
  width:min(560px,100%);
  text-align:center;
  padding:clamp(20px,4vw,36px);
  border-radius:var(--r-lg,18px);
  border:1px solid rgba(233,183,83,.28);
  background:linear-gradient(160deg,rgba(34,44,55,.96),rgba(16,23,31,.96));
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}

.freeplay-gate__tag{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 13px;
  margin-bottom:14px;
  border-radius:var(--r-pill,999px);
  font:600 11px/1 var(--f-body,Inter,system-ui,sans-serif);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#1A1206;
  background:linear-gradient(135deg,#E9B753,#F6D28C);
}

.freeplay-gate__title{
  font-family:var(--f-head,Sora,system-ui,sans-serif);
  font-size:clamp(1.1rem,3.6vw,1.5rem);
  line-height:1.3;
  margin:0 0 10px;
  color:#F7F7F5;
}

.freeplay-gate__lead{
  margin:0 0 18px;
  font-size:.9rem;
  line-height:1.6;
  color:var(--txt-soft);
}

.freeplay-gate__btns{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}

.freeplay-gate__fine{
  margin:16px 0 0;
  font-size:.72rem;
  line-height:1.5;
  color:var(--txt-mute);
}

@media (max-width:640px){
  .freeplay-gate__btns{flex-direction:column;}
  .freeplay-gate__btns > *{width:100%;}
}

/* In immersive the gate has the whole screen, so the card can breathe and the primary
   button can be the biggest thing on it. This is the moment the site is built for. */
.freeplay-stage__frame.is-immersive .freeplay-gate{
  padding:max(18px,env(safe-area-inset-top)) 18px max(18px,env(safe-area-inset-bottom));
}
.freeplay-stage__frame.is-immersive .freeplay-gate__card{
  width:min(620px,100%);
  padding:clamp(26px,6vw,44px);
}
.freeplay-stage__frame.is-immersive .freeplay-gate__title{
  font-size:clamp(1.3rem,5.4vw,1.9rem);
}