/* 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; }

/* --- 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: center;
  gap: 10px;
  width: 54px;
  flex: none;
}
.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 {
  width: clamp(280px, 24vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: none;
}
.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: drop the filmstrip so the phone keeps its size. */
@media (max-width: 1279px) {
  .hb-reels__strip { display: none; }
  .hb-reels__panel { 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 {
    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__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__landing-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    width: 100%;
    max-width: 420px;
  }
  .hb-reels__landing-icon { width: 64px; height: 64px; color: var(--accent); }
  .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__landing-body { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; max-width: 34ch; }
  .hb-reels__landing-stats { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
  .hb-reels__landing-stats span { color: var(--fg); }
  .hb-reels__landing-filters { justify-content: center; margin-top: 4px; }
  .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__enter svg { width: 18px; height: 18px; }
  .hb-reels__landing-resume { margin: 0; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
  .hb-reels__landing-resume[hidden] { display: none; }
  .hb-reels__landing-toggle { margin-top: 18px; }

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

  /* ---- immersive ---- */
  .hb-reels.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.is-immersive .hb-reels__landing { display: none; }
  .hb-reels.is-immersive .hb-reels__stage { display: block; position: absolute; inset: 0; }
  .hb-reels__phonewrap { position: absolute; inset: 0; width: auto; height: auto; display: block; }
  .hb-reels__phone {
    position: absolute;
    inset: 0;
    height: auto;
    aspect-ratio: auto;
    border-radius: 0;
    background: #000;
    box-shadow: none;
  }
  .hb-reels__phone::before,
  .hb-reels__phone::after { display: none; }
  .hb-reels__screen { inset: 0; border-radius: 0; }

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

  .hb-reels__gate { justify-content: center; gap: 14px; padding: 0; }
  .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__exit,
  .hb-reels__browse {
    top: calc(10px + env(safe-area-inset-top, 0px));
    left: auto;
    right: 12px;
  }
  .hb-reels__browse[hidden] { display: none; }

  /* brief caption after each flip: "Game · 03 / 38" - same row as the button,
     to its left */
  .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__toast.is-visible { opacity: 1; transform: none; }
  .hb-reels.is-playing .hb-reels__toast { display: none; }   /* never under the up arrow */

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

@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 { animation: none; }
}