/* Habanero 2026 — /reels
   The newest releases + top titles as a vertical reel you flip through,
   TikTok-style. Desktop (>=1024px): a phone mock-up in the middle of a
   full-bleed stage with the game demo running inside it, a filmstrip of
   neighbours on the left and the game's facts on the right. Phone (<1024px):
   a landing page explains the mode, then "Enter Reels" opens an immersive
   full-screen reel - just the game, swipe to flip, X or Back to leave (see the
   media block at the end).

   Both layouts share one control model inside the screen: one round action
   button at a time - X (leave Reels) while browsing, the up arrow (back to
   browsing) once a game is interactive - and a "Click/Tap to play" chip with
   the flip gesture hinted underneath. Desktop keeps the button top-left; on a
   phone it sits top-right for right-thumb reach. */

.hb-reels-main {
  display: block;
  /* Bleed the stage up under the transparent sticky nav, like /explorer. */
  margin-top: calc(-1 * var(--nav-h));
}

.hb-reels {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vh, 26px);
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 640px;
  overflow: hidden;
  padding-top: calc(var(--nav-h) + clamp(10px, 1.6vh, 20px));
  padding-bottom: clamp(16px, 2.4vh, 28px);
  padding-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter)));
  background:
    radial-gradient(90% 70% at 50% 40%, color-mix(in oklab, var(--accent) 8%, transparent) 0%, transparent 62%),
    radial-gradient(140% 120% at 50% 120%, color-mix(in oklab, var(--bg-elev) 80%, transparent) 0%, transparent 55%),
    var(--bg);
  user-select: none;
}

/* Copy that differs by device; the phone block flips these. */
.hb-reels__mobile-only { display: none; }
/* Phone-only chrome (landing, toast) is hidden on desktop. */
.hb-reels__landing,
.hb-reels__toast { display: none; }

/* ===== top chrome ===== */
.hb-reels__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  flex: none;
}
.hb-reels__lead {
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
}
.hb-reels__h1 {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
}
.hb-reels__filters { display: flex; gap: 6px; flex-wrap: wrap; }
.hb-reels__tools { display: flex; align-items: center; gap: 16px; }
.hb-reels__count {
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* ===== stage: strip | phone | panel ===== */
.hb-reels__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 4vw, 72px);
}

/* --- phone --- */
.hb-reels__phonewrap {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  flex: none;
}
.hb-reels__phone {
  position: relative;
  height: min(100%, 880px);
  aspect-ratio: 9 / 19.2;
  /* Modest radii (outer = screen radius + bezel) so the game's own status
     row - the clock sits in the top-right corner - isn't clipped. */
  border-radius: 33px;
  background: linear-gradient(160deg, oklch(0.32 0.008 60) 0%, oklch(0.15 0.006 50) 46%, oklch(0.26 0.008 60) 100%);
  box-shadow:
    0 50px 110px oklch(0 0 0 / .6),
    0 0 0 1px oklch(0.38 0.01 60),
    inset 0 0 0 1px oklch(0.06 0 0);
}
/* side buttons, purely decorative */
.hb-reels__phone::before,
.hb-reels__phone::after {
  content: "";
  position: absolute;
  width: 3px;
  border-radius: 2px;
  background: oklch(0.3 0.008 60);
}
.hb-reels__phone::before { left: -3px; top: 18%; height: 11%; }
.hb-reels__phone::after  { right: -3px; top: 22%; height: 16%; }

.hb-reels__screen {
  position: absolute;
  inset: 11px;
  border-radius: 22px;
  overflow: hidden;
  background: #000;
  isolation: isolate;
  transition: opacity 220ms ease;
}
.hb-reels__screen.is-jumping .hb-reel { opacity: 0; }

/* --- the one action button (top-left on desktop, top-right on phones) --- */
.hb-reels__exit,
.hb-reels__browse {
  position: absolute;
  z-index: 9;
  /* 11px bezel + 10/12px inset from the screen's corner */
  top: 21px;
  left: 23px;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid oklch(1 0 0 / .25);
  background: oklch(0 0 0 / .55);
  color: var(--fg);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease;
}
.hb-reels__exit svg,
.hb-reels__browse svg { width: 18px; height: 18px; }
.hb-reels__exit:hover,
.hb-reels__browse:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.hb-reels__exit:focus-visible,
.hb-reels__browse:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-reels__browse span { display: none; }
.hb-reels__browse[hidden] { display: none; }
/* X while browsing, up arrow once the visitor is in the game - never both */
.hb-reels.is-playing .hb-reels__exit { display: none; }
/* Desktop page: no X at all - the view toggle in the top row is the way out;
   the X stays on phones, where it leaves the immersive reel. */
@media (min-width: 1024px) {
  .hb-reels--page .hb-reels__exit { display: none; }
}

/* --- auto play: switch + rounds dropdown (panel / phone landing), progress pill on the screen --- */
.hb-reels__auto {
  display: inline-flex;        /* hugs its content: as wide as the controls row or the status line */
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: flex-start;
  width: max-content;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
/* lit while the run is on, so nobody wonders why the game spins by itself */
.hb-reels.is-auto .hb-reels__auto {
  border-color: color-mix(in oklab, var(--accent) 60%, transparent);
  background: color-mix(in oklab, var(--accent) 10%, transparent);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 12%, transparent);
}
.hb-reels__auto-row { display: flex; align-items: center; gap: 10px; }
/* status line: what the switch does / is doing */
.hb-reels__auto-hint {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hb-reels.is-auto .hb-reels__auto-hint { color: var(--accent); }
.hb-reels.is-auto .hb-reels__auto-hint::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 8px;
  vertical-align: 1px;
  animation: hb-reels-live 1.4s ease-in-out infinite;
}
@keyframes hb-reels-live { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.hb-reels__auto-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
}
.hb-reels__auto-track {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent);
  transition: background var(--t-fast) ease, border-color var(--t-fast) ease;
  flex: none;
}
.hb-reels__auto-track i {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--muted);
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}
.hb-reels__auto-switch.is-on .hb-reels__auto-track { background: var(--accent); border-color: var(--accent); }
.hb-reels__auto-switch.is-on .hb-reels__auto-track i { transform: translateX(16px); background: var(--accent-fg, #fff); }
.hb-reels__auto-switch:hover .hb-reels__auto-track { border-color: var(--fg); }
.hb-reels__auto-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
/* rounds per game: a small pill dropdown (10 / 25 / 50) */
.hb-reels__auto-rounds {
  appearance: none;
  -webkit-appearance: none;
  padding: 4px 22px 4px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8aca6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center / 11px;
  color: var(--fg);
  font-size: 11px;
  letter-spacing: .12em;
  cursor: pointer;
  transition: border-color var(--t-fast) ease;
}
.hb-reels__auto-rounds:hover { border-color: var(--fg); }
.hb-reels__auto-rounds:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-reels__auto-rounds option { background: var(--bg-elev, #1a0f0e); color: var(--fg); }
/* "02 /" beside the label while the run is on (empty = hidden) */
.hb-reels__auto-status { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.hb-reels__auto-status:empty { display: none; }
/* Auto play run: the play chip, the gradient and the gesture hint step aside
   (the game shows its own auto-play counter; the gate still catches wheel /
   swipe to skip). */
.hb-reels.is-auto .hb-reels__gate-chip,
.hb-reels.is-auto .hb-reels__gate-hint,
.hb-reels.is-auto .hb-reels__gate::before { display: none; }
/* "Click for sound": a pulsing label at the top of the screen for every game
   that has not been clicked into yet. It takes no pointer events itself; the
   gate under it has a hole (clip-path also clips hit-testing), so the click
   lands in the game and unlocks its audio while the rest of the gate keeps
   catching wheel and swipe. */
.hb-reels__soundchip {
  display: none;
  position: absolute;
  z-index: 9;
  top: 21px;                 /* the exit button's row */
  left: 50%;
  translate: -50% 0;         /* separate from the pulse's transform */
  height: 40px;
  padding: 0 16px 0 13px;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / .94);
  color: oklch(0.12 0.01 40);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  box-shadow: 0 12px 34px oklch(0 0 0 / .45);
  pointer-events: none;
  animation: hb-reels-pulse 1.8s ease-in-out infinite;
}
.hb-reels__soundchip svg { width: 15px; height: 15px; }
.hb-reels.is-auto:not(.is-sound) .hb-reels__soundchip { display: inline-flex; }
.hb-reels.is-auto:not(.is-sound) .hb-reels__gate {
  clip-path: polygon(evenodd,
    0 0, 100% 0, 100% 100%, 0 100%, 0 0,
    calc(50% - 110px) 4px, calc(50% + 110px) 4px, calc(50% + 110px) 62px, calc(50% - 110px) 62px, calc(50% - 110px) 4px);
}
@supports not (clip-path: polygon(evenodd, 0 0, 1px 0, 1px 1px)) {
  /* no hole possible: let the whole gate through while the game waits for its click */
  .hb-reels.is-auto:not(.is-sound) .hb-reels__gate { pointer-events: none; }
}
@keyframes hb-reels-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 12px 34px oklch(0 0 0 / .45), 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); }
  50%      { transform: scale(1.04); box-shadow: 0 12px 34px oklch(0 0 0 / .45), 0 0 0 9px color-mix(in oklab, var(--accent) 0%, transparent); }
}

/* --- orientation (desktop page). Landscape: the frame turns wide, so the
   stage becomes a grid - strip | [phone over panel] | spacer - the panel moves
   under the frame as two columns (name block left, controls right) and the
   spacer column mirrors the strip so the frame stays centred. The frame is
   width-driven and also capped by the height left over for the panel. The
   game inside re-lays itself out for the new size (fmv mobile layout). --- */
@media (min-width: 1024px) {
  .hb-reels--page.is-landscape .hb-reels__stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    align-content: center;
    column-gap: clamp(28px, 4vw, 72px);
    row-gap: 26px;
  }
  .hb-reels--page.is-landscape .hb-reels__strip { grid-column: 1; grid-row: 1 / span 2; }
  /* five thumbs instead of seven: the strip must not be taller than frame + panel,
     or it would stretch the grid rows past the stage */
  .hb-reels--page.is-landscape .hb-reels__thumb:first-child,
  .hb-reels--page.is-landscape .hb-reels__thumb:last-child { display: none; }
  .hb-reels--page.is-landscape .hb-reels__phonewrap { grid-column: 2; grid-row: 1; height: auto; }
  .hb-reels--page.is-landscape .hb-reels__phone {
    height: auto;
    width: min(56vw, 940px, calc((100vh - 420px) * 2.13));   /* 19.2 / 9, leaving room for the panel */
    aspect-ratio: 19.2 / 9;
  }
  .hb-reels--page.is-landscape .hb-reels__phone::before,
  .hb-reels--page.is-landscape .hb-reels__phone::after { display: none; }
  /* landscape frames load with the game's own preloader (no hdpldr flag), so the
     portrait key art stays out of the way; spinner on black until the frame is in */
  .hb-reels--page.is-landscape .hb-reel__poster { display: none; }
  .hb-reels--page.is-landscape .hb-reels__panel {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "eyebrow ctas"
      "name    auto"
      "chips   nav";
    align-items: center;
    column-gap: 32px;
    row-gap: 12px;
    width: 100%;
  }
  .hb-reels--page.is-landscape .hb-reels__panel > * { max-width: none; }
  .hb-reels--page.is-landscape .hb-reels__eyebrow { grid-area: eyebrow; }
  .hb-reels--page.is-landscape .hb-reels__name { grid-area: name; font-size: clamp(26px, 2.4vw, 36px); }
  .hb-reels--page.is-landscape .hb-reels__chips { grid-area: chips; }
  .hb-reels--page.is-landscape .hb-reels__ctas { grid-area: ctas; justify-self: end; flex-wrap: nowrap; }
  .hb-reels--page.is-landscape .hb-reels__auto { grid-area: auto; justify-self: end; }
  .hb-reels--page.is-landscape .hb-reels__nav { grid-area: nav; justify-self: end; margin-top: 0; }
}

/* --- slides (3-node pool, recycled by the script) --- */
.hb-reel {
  position: absolute;
  inset: 0;
  transform: translateY(var(--y, 0));
  transition: transform 620ms cubic-bezier(.22, .8, .2, 1), opacity 220ms ease;
  will-change: transform;
  /* Hue-tinted ground so a missing poster still reads as "a game", not a hole. */
  background:
    radial-gradient(80% 60% at 50% 30%, hsl(var(--hue, 20) 55% 28%) 0%, transparent 70%),
    #08060a;
}
.hb-reel.is-prev    { --y: -100%; }
.hb-reel.is-current { --y: 0; }
.hb-reel.is-next    { --y: 100%; }
.hb-reel.no-anim    { transition: none !important; }
.hb-reel[hidden]    { display: none; }

/* The poster sits ABOVE the iframe and stays there until the game posts that
   it is ready (games-reels.js), then fades away to reveal the running game. */
.hb-reel__poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fade only on the way out: a remounted or recycled slide must show its poster
   at once, not ease in over a blank frame. */
.hb-reel.is-ready .hb-reel__poster { opacity: 0; pointer-events: none; transition: opacity 520ms ease; }
.hb-reel__frame { position: absolute; inset: 0; z-index: 1; }
.hb-reel__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #000;
  opacity: 0;
  transition: opacity 420ms ease;
}
.hb-reel.is-loaded .hb-reel__iframe { opacity: 1; }

.hb-reel__spinner {
  position: absolute;
  left: 50%;
  bottom: 140px;
  z-index: 3;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  border-radius: 50%;
  border: 2px solid oklch(1 0 0 / .22);
  border-top-color: var(--fg);
  animation: hb-reel-spin .9s linear infinite;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.hb-reel.is-loading .hb-reel__spinner { opacity: 1; }
@keyframes hb-reel-spin { to { transform: rotate(360deg); } }

/* Loading progress, fed by the game's gameLoadingProgress messages. Sits just
   above the play chip, over the poster. */
.hb-reel__progress {
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 120px;
  z-index: 3;
  height: 3px;
  border-radius: 2px;
  background: oklch(1 0 0 / .18);
  overflow: hidden;
  opacity: 0;
  transition: opacity 200ms ease;
  pointer-events: none;
}
.hb-reel.is-loading .hb-reel__progress { opacity: 1; }
.hb-reel__progress i {
  display: block;
  height: 100%;
  width: 0;
  background: var(--accent);
  transition: width 260ms ease;
}

/* --- gate: captures wheel/swipe over the game until the player clicks in --- */
.hb-reels__gate {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 0 34px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.hb-reels__gate::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(to top, oklch(0 0 0 / .62), transparent);
  pointer-events: none;
}
.hb-reels__gate-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px 11px 16px;
  border-radius: var(--radius-pill);
  background: oklch(1 0 0 / .94);
  color: oklch(0.12 0.01 40);
  font-family: 'Geist', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 12px 34px oklch(0 0 0 / .45);
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}
.hb-reels__gate-chip svg { width: 14px; height: 14px; }
.hb-reels__gate:hover .hb-reels__gate-chip { transform: translateY(-2px) scale(1.03); }
.hb-reels__gate:focus-visible .hb-reels__gate-chip { outline: 2px solid var(--accent); outline-offset: 3px; }
/* the flip gesture, hinted under the chip on its own frosted pill so it stays
   legible over bright game art */
.hb-reels__gate-hint {
  position: relative;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid oklch(1 0 0 / .12);
  background: oklch(0 0 0 / .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: oklch(1 0 0 / .88);
  white-space: nowrap;
}
.hb-reels.is-playing .hb-reels__gate { display: none; }

/* bump at either end of the reel */
.hb-reels__screen.is-bump-up   .hb-reel.is-current { animation: hb-reels-bump-up 320ms ease; }
.hb-reels__screen.is-bump-down .hb-reel.is-current { animation: hb-reels-bump-down 320ms ease; }
@keyframes hb-reels-bump-up   { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(16px); } }
@keyframes hb-reels-bump-down { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }

/* --- filmstrip --- */
.hb-reels__strip {
  display: flex;
  flex-direction: column;
  align-items: flex-end;    /* thumbs hug the phone */
  gap: 10px;
  /* Strip and panel share the space left of / right of the phone equally, so
     the phone sits in the exact middle of the stage. */
  flex: 1 1 0;
  min-width: 0;
}
.hb-reels__thumb {
  width: 54px;
  height: 96px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  cursor: pointer;
  opacity: .42;
  transition: opacity var(--t-fast) ease, transform var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
.hb-reels__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-reels__thumb:hover { opacity: .85; transform: translateX(2px); }
.hb-reels__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-reels__thumb.is-current {
  opacity: 1;
  cursor: default;
  transform: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 40%, transparent);
}
.hb-reels__thumb.is-empty { visibility: hidden; }

/* --- info panel --- */
.hb-reels__panel {
  flex: 1 1 0;              /* same share as the strip (see above) */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* the copy keeps its measure next to the phone; the spare width is on the right */
.hb-reels__panel > * { max-width: clamp(280px, 24vw, 360px); }
.hb-reels__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hb-reels__eyebrow .hb-reels__dot { color: color-mix(in oklab, var(--fg) 35%, transparent); }
.hb-reels__eyebrow [data-reels-year]:empty,
.hb-reels__eyebrow [data-reels-year]:empty + .hb-reels__dot { display: none; }
.hb-reels__name {
  font-family: var(--font-display);
  font-weight: var(--font-display-weight);
  font-size: clamp(30px, 3vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--fg);
  text-wrap: balance;
}
.hb-reels__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hb-reels__chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
  color: var(--fg);
  font-size: 12px;
}
.hb-reels__chip b {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* "New" badge: inside the site's new-release window */
.hb-reels__chip--new {
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  border-color: color-mix(in oklab, var(--accent) 55%, transparent);
  background: color-mix(in oklab, var(--accent) 12%, transparent);
}
.hb-reels__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.hb-reels__nav { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.hb-reels__arrow {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg-elev) 70%, transparent);
  color: var(--fg);
  cursor: pointer;
  transition: border-color var(--t-fast) ease, transform var(--t-fast) ease, opacity var(--t-fast) ease;
}
.hb-reels__arrow svg { width: 18px; height: 18px; }
.hb-reels__arrow:hover { border-color: var(--fg); transform: translateY(-1px); }
.hb-reels__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.hb-reels__arrow:disabled { opacity: .3; cursor: default; transform: none; border-color: var(--border); }
.hb-reels__counter {
  min-width: 78px;
  text-align: center;
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--muted);
}

/* panel content fades in on every flip */
.hb-reels__panel.is-switching .hb-reels__eyebrow,
.hb-reels__panel.is-switching .hb-reels__name,
.hb-reels__panel.is-switching .hb-reels__chips { animation: hb-reels-fadein 420ms ease both; }
@keyframes hb-reels-fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ===== empty ===== */
.hb-reels__empty {
  position: absolute;
  z-index: 5;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  max-width: 80%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  padding: 28px 34px;
  background: color-mix(in oklab, var(--bg-elev) 80%, transparent);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.hb-reels__empty strong { font-family: var(--font-display); font-size: 20px; color: var(--fg); }
.hb-reels__empty span { color: var(--muted); font-size: 14px; }
.hb-reels__empty a { color: var(--accent); }

/* Narrow desktops: tighter panel copy (the strip stays: it is the phone's counterweight). */
@media (max-width: 1279px) {
  .hb-reels__panel > * { max-width: clamp(240px, 26vw, 300px); }
}

/* =====================================================================
   PHONE (<1024px). Two states:
     - landing (default): explains the mode; pills choose the reel; "Enter
       Reels" opens the immersive state. The desktop top row, panel and
       stage are not shown.
     - immersive (.is-immersive): fixed over the whole page (above the nav),
       just the game. Over it: the centred tap chip with its swipe hint, the
       loading cues, the single top-left action button and a brief top toast
       naming the game. Swipe flips; X or the browser Back button leaves.
   ===================================================================== */
@media (max-width: 1023px) {
  .hb-reels__desktop-only { display: none; }
  .hb-reels__mobile-only { display: inline; }

  .hb-reels-main { margin-top: 0; }
  .hb-reels--page {
    display: block;
    height: auto;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding: 0;
    gap: 0;
  }

  /* ---- landing ---- */
  .hb-reels--page .hb-reels__landing {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100dvh - var(--nav-h));
    padding: 28px 22px calc(28px + env(safe-area-inset-bottom, 0px));
  }
  .hb-reels--page .hb-reels__landing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: 100%;
    max-width: 420px;
  }
  .hb-reels--page .hb-reels__landing-icon { width: 64px; height: 64px; color: var(--accent); }
  .hb-reels--page .hb-reels__landing-title {
    font-family: var(--font-display);
    font-weight: var(--font-display-weight);
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0;
    color: var(--fg);
    text-wrap: balance;
  }
  .hb-reels--page .hb-reels__landing-body { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 34ch; }
  .hb-reels--page .hb-reels__landing-stats { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
  .hb-reels--page .hb-reels__landing-stats span { color: var(--fg); }
  .hb-reels--page .hb-reels__landing-filters { justify-content: center; margin-top: 4px; }
  .hb-reels--page .hb-reels__enter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-top: 8px;
    padding: 16px 24px;
    font-size: 15px;
  }
  .hb-reels--page .hb-reels__enter svg { width: 18px; height: 18px; }
  .hb-reels--page .hb-reels__landing-resume { margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .hb-reels--page .hb-reels__landing-resume[hidden] { display: none; }
  .hb-reels--page .hb-reels__landing-toggle { margin-top: 18px; }
  .hb-reels--page .hb-reels__auto--landing { align-self: center; align-items: center; margin-top: 6px; }
  .hb-reels--page .hb-reels__auto--landing .hb-reels__auto-hint { text-align: center; }

  /* desktop chrome never shows on a phone */
  .hb-reels--page .hb-reels__top,
  .hb-reels--page .hb-reels__panel,
  .hb-reels--page .hb-reels__strip { display: none; }
  .hb-reels--page .hb-reels__stage { display: none; }

  /* ---- immersive ---- */
  .hb-reels--page.is-immersive {
    position: fixed;
    inset: 0;
    z-index: 200;               /* above the sticky nav */
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    background: #000;
    overflow: hidden;
    touch-action: none;         /* swipes flip the reel, never scroll the page */
  }
  .hb-reels--page.is-immersive .hb-reels__landing { display: none; }
  .hb-reels--page.is-immersive .hb-reels__stage { display: block; position: absolute; inset: 0; }
  .hb-reels--page .hb-reels__phonewrap { position: absolute; inset: 0; width: auto; height: auto; display: block; }
  .hb-reels--page .hb-reels__phone {
    position: absolute;
    inset: 0;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }
  .hb-reels--page .hb-reels__phone::before,
  .hb-reels--page .hb-reels__phone::after { display: none; }
  .hb-reels--page .hb-reels__screen { inset: 0; border-radius: 0; }

  .hb-reels--page .hb-reel__spinner { bottom: auto; top: calc(50% - 13px); }
  .hb-reels--page .hb-reel__progress { bottom: auto; top: calc(50% + 32px); left: 26%; right: 26%; }

  .hb-reels--page .hb-reels__gate { justify-content: center; gap: 14px; padding: 0; }
  .hb-reels--page .hb-reels__gate::before { display: none; }

  /* no bezel here: the button hugs the screen's top-RIGHT corner (right-thumb
     reach), safe-area aware */
  .hb-reels--page .hb-reels__exit,
  .hb-reels--page .hb-reels__browse {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 12px;
  }
  .hb-reels--page .hb-reels__browse[hidden] { display: none; }

  /* brief caption after each flip: "Game · 03 / 38" - same row as the button,
     to its left */
  .hb-reels--page .hb-reels__toast {
    display: block;
    position: absolute;
    z-index: 8;
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: 12px;
    right: 60px;
    height: 40px;
    line-height: 38px;          /* 40px minus the 1px borders */
    padding: 0 16px;
    box-sizing: border-box;
    border-radius: var(--radius-pill);
    border: 1px solid oklch(1 0 0 / .12);
    background: oklch(0 0 0 / .62);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--fg);
    font-size: 11px;
    letter-spacing: .06em;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity 260ms ease, transform 260ms ease;
  }
  .hb-reels--page .hb-reels__toast.is-visible { opacity: 1; transform: none; }
  .hb-reels--page.is-playing .hb-reels__toast { display: none; }   /* never under the up arrow */
  /* sound label under the toast / button row; the gate's hole follows it */
  .hb-reels--page .hb-reels__soundchip { top: calc(60px + env(safe-area-inset-top, 0px)); }
  .hb-reels--page.is-auto:not(.is-sound) .hb-reels__gate {
    clip-path: polygon(evenodd,
      0 0, 100% 0, 100% 100%, 0 100%, 0 0,
      calc(50% - 110px) calc(44px + env(safe-area-inset-top, 0px)), calc(50% + 110px) calc(44px + env(safe-area-inset-top, 0px)),
      calc(50% + 110px) calc(112px + env(safe-area-inset-top, 0px)), calc(50% - 110px) calc(112px + env(safe-area-inset-top, 0px)),
      calc(50% - 110px) calc(44px + env(safe-area-inset-top, 0px)));
  }

  .hb-reels--page .hb-reels__empty { max-width: 88%; }
}

/* =====================================================================
   HOME-PAGE EMBED (.hb-reels--embed): the same phone frame + panel as the
   desktop page, sized for a section instead of the viewport. No landing, no
   top row, no exit button; the script advances the reel by itself.
   ===================================================================== */
.hb-reels--embed {
  display: block;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 0;
  overflow: visible;
  background: none;
}
.hb-reels--embed .hb-reels__stage {
  height: clamp(520px, 66vh, 720px);
  gap: clamp(28px, 4vw, 64px);
}
.hb-reels--embed .hb-reels__exit { display: none; }
.hb-reels--embed .hb-reels__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
}
.hb-reels--embed .hb-reels__more:hover { color: var(--fg); }
@media (max-width: 1023px) {
  .hb-reels--embed .hb-reels__stage {
    flex-direction: column;
    align-items: center;
    height: auto;
    gap: 22px;
  }
  .hb-reels--embed .hb-reels__strip { display: none; }
  .hb-reels--embed .hb-reels__phonewrap { height: min(70vh, 640px); }
  .hb-reels--embed .hb-reels__panel {
    width: 100%;
    max-width: 420px;
    align-items: center;
    text-align: center;
  }
  .hb-reels--embed .hb-reels__eyebrow,
  .hb-reels--embed .hb-reels__chips,
  .hb-reels--embed .hb-reels__ctas,
  .hb-reels--embed .hb-reels__nav { justify-content: center; }
  .hb-reels--embed .hb-reels__auto { align-self: center; align-items: center; }
  .hb-reels--embed .hb-reels__auto-hint { text-align: center; }
  /* right-thumb reach on a phone, inside the frame's bezel */
  .hb-reels--embed .hb-reels__browse { left: auto; right: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .hb-reel,
  .hb-reel__iframe,
  .hb-reel__poster,
  .hb-reel__progress i,
  .hb-reels__screen,
  .hb-reels__thumb,
  .hb-reels__toast,
  .hb-reels__exit,
  .hb-reels__browse,
  .hb-reels__gate-chip { transition: none; }
  .hb-reels__panel.is-switching .hb-reels__eyebrow,
  .hb-reels__panel.is-switching .hb-reels__name,
  .hb-reels__panel.is-switching .hb-reels__chips,
  .hb-reels__screen.is-bump-up .hb-reel.is-current,
  .hb-reels__screen.is-bump-down .hb-reel.is-current,
  .hb-reels__soundchip,
  .hb-reels.is-auto .hb-reels__auto-hint::before { animation: none; }
}