/* Cross-document View Transitions opt-in (Chromium 126+).
   The hub and every game page ship this stylesheet, so navigations between
   them get a native morph. Older browsers ignore the rule and fall through
   to the anime.js clone fallback in js/hub-transition.js. */
@view-transition {
  navigation: auto;
}

:root {
  --bg: #f7f7f7;
  --surface: #ffffff;
  --border: rgba(0, 0, 0, 0.06);
  --border-strong: rgba(0, 0, 0, 0.1);
  --text: #0a0a0a;
  --text-muted: #737373;
  --accent: #0a0a0a;
  --inverse-bg: #0a0a0a;
  --inverse-text: #fafafa;
  --inverse-muted: rgba(255, 255, 255, 0.62);
  --tag-bg: #f0f0f0;
  --tag-text: #525252;
  --blob-tan: #e8ddd4;
  --blob-grey: #d4dae3;
  --radius: 20px;
  --radius-lg: 28px;
  --radius-sm: 10px;
  /* Sora + system fallback (design-token style: "Sora", "Sora Fallback") */
  --font-sora: "Sora";
  --font-sora-fallback: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card: 0 4px 32px rgba(0, 0, 0, 0.06);
  --shadow-hero: 0 28px 90px rgba(0, 0, 0, 0.18);
  --shadow-hover: 0 12px 48px rgba(0, 0, 0, 0.1);
  --focus: 0 0 0 2px var(--bg), 0 0 0 4px var(--text);
  --focus-inverse: 0 0 0 2px var(--bg), 0 0 0 4px #fff;
  --gradient-accent: linear-gradient(105deg, #22d3ee 0%, #a78bfa 45%, #fb7185 100%);

  /* Spacing scale (4px base, used across hub + games + prose) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Type scale (single source of truth - every page snaps to this ramp) */
  --fs-3xs: 0.5625rem;                       /* 9px  - in-card micro labels (game UI) */
  --fs-2xs: 0.6875rem;                       /* 11px - eyebrow, tag, micro labels */
  --fs-xs: 0.75rem;                          /* 12px - meta */
  --fs-sm: 0.8125rem;                        /* 13px - back-link, footer, secondary */
  --fs-base: 0.9375rem;                      /* 15px - small body / lede */
  --fs-md: 1rem;                             /* 16px - body */
  --fs-lg: 1.0625rem;                        /* 17px - card / section titles */
  --fs-xl: 1.625rem;                         /* 26px - prose h1 */
  --fs-2xl: clamp(1.5rem, 2.8vw, 1.85rem);   /* game shell h1 */
  --fs-3xl: clamp(1.75rem, 3.8vw, 2.25rem);  /* hero h1 */
}

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

html {
  scroll-behavior: smooth;
  --blob-mouse-x: 0;
  --blob-mouse-y: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-sora), var(--font-sora-fallback);
  font-size: 1rem;
  line-height: 1.65;
  letter-spacing: -0.011em;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Ambient blobs: slow float + pointer parallax (see js/blobs.js) */
.blob-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.blob {
  position: absolute;
  width: min(85vmax, 900px);
  height: min(85vmax, 900px);
  will-change: transform;
  transform: translate(
    calc(var(--blob-mouse-x) * 42px),
    calc(var(--blob-mouse-y) * 34px)
  );
}

.blob__inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.52;
}

.blob__inner--tan {
  background: var(--blob-tan);
}

.blob__inner--grey {
  background: var(--blob-grey);
}

.blob--a {
  top: -18%;
  left: -22%;
}

.blob--b {
  bottom: -22%;
  right: -20%;
  transform: translate(
    calc(var(--blob-mouse-x) * -32px),
    calc(var(--blob-mouse-y) * -28px)
  );
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.65rem 0.9rem;
  background: var(--text);
  color: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

main {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.25rem) clamp(1rem, 4vw, 2.25rem) 3.75rem;
}

.hero {
  margin-bottom: 2.5rem;
  max-width: 34rem;
}

.hero__eyebrow {
  margin: 0 0 0.65rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero h1 {
  margin: 0 0 0.75rem;
  font-size: var(--fs-3xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.12;
}

.hero p {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-lg);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.65;
}

/* Bento - hybrid hero + masonry layout (see js/hub-render.js, js/masonry.js) */
.bento {
  display: block;
}

/* Stack lane: every live game renders here at full width, stacked
   vertically. The masonry below it only carries info/about cards now. */
.bento__stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0 1rem;
}

.bento__stack > .bento-card {
  width: 100%;
}

.bento__stack > .bento-card--hero {
  min-height: 280px;
}

/* Masonry root: tiles are positioned absolutely by js/masonry.js. */
.bento__masonry {
  position: relative;
  width: 100%;
}

.bento__masonry > .bento-card {
  /* Position is owned by js/masonry.js (absolute layout). Hover effect uses
     transform instead of `top` so it doesn't fight inline positioning. */
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease;
}

.bento__masonry > .bento-card:hover {
  transform: translateY(-3px);
}

.bento__masonry > .bento-card:focus-visible {
  transform: translateY(-3px);
}

/* "Coming soon" tiles: visually quiet placeholders. Rendered as a non-
   interactive <div> by js/hub-render.js (no href, no view-transition name)
   so the hover lift from .bento__masonry > .bento-card:hover is the only
   movement - just a subtle "alive" cue without promising navigation. */
.bento-card--soon {
  opacity: 0.7;
  cursor: default;
}

.bento-card--soon:hover {
  opacity: 0.92;
}

/* Tile morph clone fallback (hub → game-stage); see js/hub-transition.js + js/game-stage-enter.js */
.hub-tile-transition,
.play-tile-morph {
  box-sizing: border-box;
  z-index: 10000;
  pointer-events: none;
  will-change: top, left, width, height, border-radius;
}

/* Set synchronously by an inline script in game <head> before first paint */
html[data-hub-enter] .game-stage {
  opacity: 0;
}

/* Each tile holds its own view-transition-name via the --vt-name custom
   property set inline by js/hub-render.js. The SPA router temporarily
   strips the name from non-focal tiles right before a morph so only the
   focal pair runs as a named animation; everything else cross-fades with
   the root group. */
.bento-card[data-hub-tile] {
  view-transition-name: var(--vt-name, none);
}

/* Named tile/stage morphs: position+size morph + content crossfade locked
   to the same duration so the whole element moves as one piece. The
   easing favors a fast take-off and a soft landing - short enough that
   the awkward content interpolation in the middle barely registers. */
::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Root group (everything that isn't named) shares the same timing so the
   page chrome lands at the same moment the focal tile finishes morphing.
   Mismatched durations made the background settle early while the tile
   was still moving, which read as a "jump". */
::view-transition-group(root),
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 440ms;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Game stage swipe-to-dismiss affordance (mobile only - see
   js/game-swipe-dismiss.js, which also sets the `swipeable` modifier). */
.game-stage--swipeable {
  touch-action: pan-y;
  position: relative;
}

.game-stage--swipeable::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 38px;
  height: 4px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.12);
  pointer-events: none;
}

@media (hover: hover) {
  .game-stage--swipeable::before {
    display: none;
  }
}

.bento-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  padding: 1.35rem 1.45rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  min-height: 136px;
  box-shadow: var(--shadow-card);
  transform-origin: 50% 88%;
  top: 0;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    top 0.2s ease;
}

.bento-card:hover {
  top: -2px;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-hover);
}

.bento-card:focus-visible {
  top: -2px;
}

.bento-card--inverse {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: var(--shadow-hero);
}

.bento-card--inverse:hover {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 32px 100px rgba(0, 0, 0, 0.22);
}

.bento-card--inverse:focus-visible {
  box-shadow: var(--focus-inverse), var(--shadow-hero);
}

.bento-card--inverse .bento-card__title {
  color: var(--inverse-text);
}

.bento-card--inverse .bento-card__desc {
  color: var(--inverse-muted);
}

.bento-card__tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--tag-text);
  background: var(--tag-bg);
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
}

.bento-card__tag--gradient {
  letter-spacing: 0.16em;
  color: #fff;
  background:
    linear-gradient(var(--inverse-bg), var(--inverse-bg)) padding-box,
    var(--gradient-accent) border-box;
  border: 1px solid transparent;
}

/* Daily-streak chip on a hub tile. Sits in the bottom-right corner so
   it doesn't fight the title block. Visible only when the player has a
   live streak (rendered conditionally in hub-render.js). */
.bento-card__streak {
  position: absolute;
  bottom: 0.85rem;
  right: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.55rem 0.28rem 0.45rem;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  pointer-events: none;
}

.bento-card__streak-icon {
  font-size: 0.95em;
  line-height: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
}

.bento-card__streak-count {
  font-variant-numeric: tabular-nums;
}

/* Inverse (dark) cards need an inverted chip so it stays legible. */
.bento-card--inverse .bento-card__streak {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.bento-card__title {
  /* Reserve space on the right so the absolutely-positioned
     .bento-card__tag (top: 1rem; right: 1rem) never overlaps the title
     text on narrow tiles. The hero variant overrides padding-right where
     it has its own meta-row layout. */
  margin: 0 0 0.35rem;
  padding-right: 4.25rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.bento-card__desc {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

/* Span variants */
.bento-card--wide {
  grid-column: span 2;
}

.bento-card--tall {
  grid-row: span 2;
  min-height: 272px;
}

.bento-card--hero {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 300px;
  padding: 1.5rem 1.6rem;
}

/* Single-column masonry collapses span variants. */
.bento__masonry[data-masonry-cols="1"] > .bento-card--wide,
.bento__masonry[data-masonry-cols="1"] > .bento-card--tall,
.bento__masonry[data-masonry-cols="1"] > .bento-card--hero {
  min-height: 136px;
}

@media (max-width: 520px) {
  .bento__stack > .bento-card--hero {
    min-height: 220px;
  }
}

.bento-card--hero .bento-card__title {
  font-size: clamp(1.35rem, 2.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.038em;
}

.bento-card--warm {
  background: var(--surface);
}

/* ============================================================
 * Daily Swatch hero embellishments
 *
 * Restructures the hero tile from "tag + title + desc" to a richer
 * stack: top meta row, today's actual five-color palette preview, a
 * kicker, the title, the description, and a CTA arrow. The palette
 * uses the same daily seed as games/daily-swatch/game.js so the
 * tease matches the actual run the player is about to start.
 * ============================================================ */
.bento-card--swatch-hero {
  /* Slightly more breathing room than the generic hero so the palette
     row has space to dominate without crowding the copy. */
  padding: 1.65rem 1.7rem 1.45rem;
  /* Ambient halo using the day's palette stops blended through black
     so the dark card glows just enough to read as "alive" without
     drowning out the typography. */
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(120, 80, 200, 0.32), transparent 55%),
    radial-gradient(80% 70% at 0% 100%, rgba(255, 110, 130, 0.22), transparent 60%),
    var(--inverse-bg);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.bento-card--swatch-hero .bento-card__tag {
  /* Lift the tag slightly above the meta line so they share a row
     visually rather than stacking awkwardly. */
  top: 1.1rem;
  right: 1.2rem;
}

.bento-card__hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  align-self: flex-start;
  /* Carve out room on the right so the gradient tag (absolutely
     positioned) doesn't overlap the date text on narrow widths. */
  padding-right: 4.5rem;
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.bento-card__hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18);
  animation: cg-hero-dot 2.4s ease-in-out infinite;
}

@keyframes cg-hero-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.bento-card__palette {
  display: flex;
  gap: 0.55rem;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}

.bento-card__palette-swatch {
  /* Stretch to fill the row so five swatches always span the full
     width, no matter the card size. */
  flex: 1 1 0;
  /* Pill height tuned so they read as confident color samples, not
     decorative dots. Capped on small viewports below. */
  height: 56px;
  border-radius: 14px;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 6px 18px rgba(0, 0, 0, 0.32);
  /* Staggered fade-up entrance keyed off --cg-i (set inline in JS).
     Falls back to a static state under prefers-reduced-motion via the
     global rule at the top of this file. */
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  animation: cg-hero-swatch-in 540ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  animation-delay: calc(120ms + var(--cg-i, 0) * 70ms);
}

@keyframes cg-hero-swatch-in {
  to {
    opacity: 1;
    transform: none;
  }
}

.bento-card__palette-swatch::after {
  /* Subtle inner highlight along the top edge for a rounder, more
     "physical" swatch look. */
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 38%;
  border-radius: 13px 13px 22px 22px / 13px 13px 60% 60%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent);
  pointer-events: none;
}

.bento-card__hero-kicker {
  margin: 0.25rem 0 0;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

.bento-card--swatch-hero .bento-card__title {
  margin-top: 0.1rem;
  margin-bottom: 0.45rem;
  font-size: clamp(1.5rem, 3.2vw, 1.95rem);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.bento-card--swatch-hero .bento-card__desc {
  max-width: 36rem;
  font-size: var(--fs-base);
  line-height: 1.6;
}

.bento-card__hero-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.85rem;
  /* Reserve space on the right so the streak chip (absolutely
     positioned at bottom-right) never collides with the CTA pill. */
  padding-right: 5rem;
}

.bento-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.95rem;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    background 200ms ease,
    border-color 200ms ease,
    transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-card__cta-arrow {
  display: inline-block;
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-card--swatch-hero:hover .bento-card__cta,
.bento-card--swatch-hero:focus-visible .bento-card__cta {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.26);
}

.bento-card--swatch-hero:hover .bento-card__cta-arrow,
.bento-card--swatch-hero:focus-visible .bento-card__cta-arrow {
  transform: translateX(3px);
}

/* Make sure the streak chip on the swatch-hero card sits above the
   ambient gradient halos and stays legible. */
.bento-card--swatch-hero .bento-card__streak {
  z-index: 2;
}

/* Mobile: the hero tile collapses height-wise; keep the palette
   visible but shorter so the title + desc stay above the fold. */
@media (max-width: 540px) {
  .bento-card--swatch-hero {
    padding: 1.3rem 1.35rem 1.2rem;
    gap: 0.4rem;
  }
  .bento-card__palette-swatch {
    height: 44px;
    border-radius: 12px;
  }
  .bento-card__hero-meta {
    padding-right: 3.75rem;
    letter-spacing: 0.14em;
  }
  .bento-card__hero-foot {
    margin-top: 0.65rem;
    padding-right: 4rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card__palette-swatch {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .bento-card__hero-meta-dot {
    animation: none;
  }
}

/* ============================================================
 * Daily Crowns wide tile
 *
 * Splits the wide card into a copy column + decorative mini board
 * so the tile previews the actual game (regions + crowns) instead
 * of being a generic "wide card with text". On 1-column masonry the
 * board stacks below the copy at a smaller size so the card stays
 * compact without losing the visual hook.
 * ============================================================ */
.bento-card--crowns {
  /* Soft warm gradient pulled from the daily-crowns region palette
     (peach + lavender + sky) so the tile reads as the same visual
     family as the game itself. */
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(246, 201, 182, 0.55), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(184, 212, 230, 0.55), transparent 55%),
    var(--surface);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.1rem;
  padding: 1.35rem 1.45rem;
  min-height: 184px;
  overflow: hidden;
}

.bento-card--crowns .bento-card__tag {
  /* Tag floats above the gradient so it stays legible on both halves
     of the split layout. */
  z-index: 2;
}

.bento-card__crowns-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
}

.bento-card__crowns-meta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* Keep the tag chip from overlapping the meta on tight widths. */
  max-width: calc(100% - 4.25rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bento-card__crowns-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d97757;
  box-shadow: 0 0 0 3px rgba(217, 119, 87, 0.18);
  animation: cg-crowns-dot 2.4s ease-in-out infinite;
}

@keyframes cg-crowns-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.bento-card--crowns .bento-card__title {
  margin-top: 0.05rem;
  margin-bottom: 0.35rem;
  /* Tag sits in the top-right of the card, not the copy column, so
     reset the title's reservation gutter that the generic style sets. */
  padding-right: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.bento-card--crowns .bento-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.bento-card__crowns-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.7rem;
  /* Keep the streak chip (bottom-right) clear of the CTA pill. */
  padding-right: 4rem;
}

/* Inked CTA variant (used on light-surface tiles like Daily Crowns) */
.bento-card__cta--ink {
  color: var(--text);
  background: rgba(10, 10, 10, 0.06);
  border-color: rgba(10, 10, 10, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.bento-card--crowns:hover .bento-card__cta,
.bento-card--crowns:focus-visible .bento-card__cta {
  background: rgba(10, 10, 10, 0.1);
  border-color: rgba(10, 10, 10, 0.16);
}

.bento-card--crowns:hover .bento-card__cta-arrow,
.bento-card--crowns:focus-visible .bento-card__cta-arrow {
  transform: translateX(3px);
}

.bento-card__crowns-preview {
  flex: 0 0 auto;
  align-self: center;
  width: clamp(120px, 28%, 156px);
  aspect-ratio: 1 / 1;
  padding: 7px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 32px rgba(20, 24, 31, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  container-type: inline-size;
}

.bento-card__crowns-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}

.bento-card__crowns-cell {
  position: relative;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 0 1px rgba(20, 24, 31, 0.06) inset,
    0 1px 2px rgba(20, 24, 31, 0.08);
  overflow: hidden;
}

.bento-card__crowns-cell::after {
  /* Subtle highlight along the top edge so cells feel like physical
     tiles rather than flat color blocks. */
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent);
  pointer-events: none;
}

.bento-card__crowns-glyph {
  position: relative;
  z-index: 1;
  /* Scales with the preview's own size (set via container-type) so the
     crown reads at the right weight whether the card is full-width or
     stacked under tighter masonry columns. */
  font-size: clamp(13px, 13cqi, 18px);
  line-height: 1;
  color: #14181f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
  opacity: 0;
  transform: translateY(4px) scale(0.7);
  animation: cg-crowns-pop 540ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards;
  animation-delay: calc(220ms + var(--cg-i, 0) * 140ms);
}

@keyframes cg-crowns-pop {
  to {
    opacity: 1;
    transform: none;
  }
}

/* Card hover gives the mini-board a tiny depth lift to reinforce the
   "tap to play" affordance without disturbing layout. */
.bento-card--crowns:hover .bento-card__crowns-preview,
.bento-card--crowns:focus-visible .bento-card__crowns-preview {
  transform: translateY(-1px) rotate(-0.5deg);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-card--crowns .bento-card__streak {
  z-index: 2;
}

/* Narrow viewports: stack copy above a smaller mini-board. Applies in
   the stack lane and (for legacy compat) any single-column masonry. */
@media (max-width: 520px) {
  .bento-card--crowns {
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
  }
  .bento-card--crowns .bento-card__crowns-copy {
    padding-right: 4rem;
  }
  .bento-card--crowns .bento-card__crowns-preview {
    align-self: stretch;
    width: 100%;
    aspect-ratio: auto;
    height: 132px;
  }
}

@media (max-width: 720px) {
  .bento-card--crowns {
    gap: 1rem;
    padding: 1.25rem 1.3rem;
  }
  .bento-card__crowns-preview {
    width: 132px;
  }
  .bento-card__crowns-glyph {
    font-size: 15px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card__crowns-glyph {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .bento-card__crowns-meta-dot {
    animation: none;
  }
  .bento-card--crowns:hover .bento-card__crowns-preview,
  .bento-card--crowns:focus-visible .bento-card__crowns-preview {
    transform: none;
  }
}

/* ============================================================
 * Daily Mines wide tile
 *
 * Mirrors the Daily Crowns split layout (copy on the left, mini
 * board preview on the right). Uses the same dot/meta + footer
 * CTA system; the only differences are the tile palette (cooler
 * stone + warm paper to match the in-game cells) and the cell
 * variants (covered vs revealed vs flag/mine glyphs).
 * ============================================================ */
.bento-card--mines {
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(207, 213, 221, 0.55), transparent 55%),
    radial-gradient(120% 90% at 100% 100%, rgba(245, 239, 230, 0.85), transparent 55%),
    var(--surface);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 1.1rem;
  padding: 1.35rem 1.45rem;
  min-height: 184px;
  overflow: hidden;
}

.bento-card--mines .bento-card__tag {
  z-index: 2;
}

.bento-card__mines-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
}

.bento-card__mines-meta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.4rem;
  margin: 0 0 0.55rem;
  padding: 0.2rem 0.6rem 0.2rem 0.5rem;
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  max-width: calc(100% - 4.25rem);
  overflow: hidden;
  text-overflow: ellipsis;
}

.bento-card__mines-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #e23b46;
  box-shadow: 0 0 0 3px rgba(226, 59, 70, 0.18);
  animation: cg-mines-dot 2.4s ease-in-out infinite;
}

@keyframes cg-mines-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.bento-card--mines .bento-card__title {
  margin-top: 0.05rem;
  margin-bottom: 0.35rem;
  padding-right: 0;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.15;
}

.bento-card--mines .bento-card__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.bento-card__mines-foot {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 0.7rem;
  padding-right: 4rem;
}

.bento-card--mines:hover .bento-card__cta,
.bento-card--mines:focus-visible .bento-card__cta {
  background: rgba(10, 10, 10, 0.1);
  border-color: rgba(10, 10, 10, 0.16);
}

.bento-card--mines:hover .bento-card__cta-arrow,
.bento-card--mines:focus-visible .bento-card__cta-arrow {
  transform: translateX(3px);
}

.bento-card__mines-preview {
  flex: 0 0 auto;
  align-self: center;
  width: clamp(120px, 28%, 156px);
  aspect-ratio: 1 / 1;
  padding: 7px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 14px 32px rgba(20, 24, 31, 0.1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  container-type: inline-size;
}

.bento-card__mines-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
}

.bento-card__mines-cell {
  position: relative;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 800;
  font-size: clamp(11px, 11cqi, 16px);
  line-height: 1;
  letter-spacing: -0.02em;
}

.bento-card__mines-cell--cover {
  background: #cfd5dd;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 0 0 1px rgba(20, 24, 31, 0.06) inset,
    0 1px 2px rgba(20, 24, 31, 0.08);
}

.bento-card__mines-cell--reveal {
  background: #f5efe6;
  box-shadow:
    0 0 0 1px rgba(20, 24, 31, 0.06) inset;
}

.bento-card__mines-cell--cover::after {
  content: "";
  position: absolute;
  inset: 1px 1px auto 1px;
  height: 35%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent);
  pointer-events: none;
}

.bento-card__mines-glyph {
  position: relative;
  z-index: 1;
  font-size: inherit;
  line-height: 1;
  opacity: 0;
  transform: translateY(4px) scale(0.7);
  animation: cg-mines-pop 540ms cubic-bezier(0.2, 0.9, 0.3, 1.4) forwards;
  animation-delay: calc(220ms + var(--cg-i, 0) * 140ms);
}

.bento-card__mines-glyph--flag {
  color: #d8483a;
  font-size: clamp(13px, 14cqi, 18px);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}

.bento-card__mines-glyph--mine {
  color: #14181f;
  font-size: clamp(11px, 12cqi, 14px);
}

.bento-card__mines-glyph--num {
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
}

@keyframes cg-mines-pop {
  to {
    opacity: 1;
    transform: none;
  }
}

.bento-card--mines:hover .bento-card__mines-preview,
.bento-card--mines:focus-visible .bento-card__mines-preview {
  transform: translateY(-1px) rotate(-0.5deg);
  transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bento-card--mines .bento-card__streak {
  z-index: 2;
}

@media (max-width: 520px) {
  .bento-card--mines {
    flex-direction: column;
    gap: 0.9rem;
    min-height: 0;
  }
  .bento-card--mines .bento-card__mines-copy {
    padding-right: 4rem;
  }
  .bento-card--mines .bento-card__mines-preview {
    align-self: stretch;
    width: 100%;
    aspect-ratio: auto;
    height: 132px;
  }
}

@media (max-width: 720px) {
  .bento-card--mines {
    gap: 1rem;
    padding: 1.25rem 1.3rem;
  }
  .bento-card__mines-preview {
    width: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bento-card__mines-glyph {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .bento-card__mines-meta-dot {
    animation: none;
  }
  .bento-card--mines:hover .bento-card__mines-preview,
  .bento-card--mines:focus-visible .bento-card__mines-preview {
    transform: none;
  }
}

/* Game shell page */
.game-shell {
  max-width: 640px;
}

.game-shell h1 {
  margin: 0 0 0.5rem;
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.15;
}

.game-shell .lede {
  color: var(--text-muted);
  margin: 0 0 1.35rem;
  font-size: var(--fs-base);
  letter-spacing: -0.015em;
  line-height: 1.65;
}

.game-stage {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-card);
}

.game-stage__placeholder {
  max-width: 26rem;
}

.game-stage__placeholder strong {
  display: block;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 0.45rem;
  color: var(--text);
}

.game-stage__placeholder span {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.6;
  letter-spacing: -0.01em;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-bottom: 1.1rem;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text-muted);
}

.back-link:hover {
  color: var(--text);
  text-decoration: underline;
}

.site-footer {
  margin-top: auto;
  padding: 1.35rem clamp(1rem, 4vw, 2rem);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  letter-spacing: -0.01em;
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.site-footer nav {
  display: flex;
  gap: 1.15rem;
}

.site-footer a {
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

/* Legal / simple pages */
.prose {
  max-width: 38rem;
}

.prose h1 {
  margin-top: 0;
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.2;
}

.prose h2 {
  margin-top: 1.65rem;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
}

.prose p {
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.65;
  letter-spacing: -0.01em;
}

.prose .meta {
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 1.35rem;
}

/* Shared button system. Every page/game CTA should use .btn + a modifier so
   typography, radius, and active-state feel land on the same scale. */
.btn {
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

.btn:active:not(:disabled) {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--text);
  color: var(--inverse-text);
  border-color: var(--text);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}

.btn--primary:hover:not(:disabled) {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}

.btn--secondary {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}

.btn--secondary:hover:not(:disabled) {
  border-color: var(--text);
}

.btn--ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
}

.btn--ghost:hover:not(:disabled) {
  color: var(--text);
  border-color: var(--text);
}