/* Hobbi brand tokens (Brand UI kit layer, Phase 1). Source of truth: the hobbi brand kit (2026-10-26).
   Tokens plus a few behaviour-free utilities; nothing here styles an existing page until a page opts in
   with `class="hb"` (or uses the variables). Liquid Glass stays the feed's own recipe (theme.css --sa-glass*)
   and is used only on the nav bar and the rail; every other surface takes these brand tokens.

   Kit rules this file keeps:
   - the dithered mark at 48 px and above, the flat silhouette below (.hb-mark / HobbiBrand.markSrc);
   - square cells: masks and marks never stretch (image-rendering: pixelated, aspect-ratio 1);
   - eyes are always night (baked into the assets);
   - never a pastel mark on a pastel ground: on --hb-accent grounds use the night 1-bit or flat-night mark. */
/* Fonts (4.48.1): self-hosted, so game pages' CSP (font-src 'self') allows them. No Google Fonts request.
   Latin subsets from Google Fonts, SIL Open Font License 1.1 (fonts/OFL.txt): Baloo 2 ExtraBold (WOFF), Geist and
   Geist Mono (variable WOFF2, 100–900). URLs are relative to this file, so they resolve wherever /reels/ is served.
   font-display: swap shows the system fallback in the stacks below until a file has loaded, never blank text. */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("fonts/Baloo2-ExtraBold-latin.woff") format("woff");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/Geist-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("fonts/GeistMono-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Palette: 7 pastels (dithercn dither-tokens, .dark) + night/paper, each with gloss/body/shade.
     gloss = 72% toward white, body = the token, shade = 42% toward night (the kit's ramp). */
  --hb-blue-gloss: #c9e9fc;
  --hb-blue: #3faff3;
  --hb-blue-shade: #296b95;
  --hb-purple-gloss: #ebdbfd;
  --hb-purple: #b77df8;
  --hb-purple-shade: #6e4e97;
  --hb-pink-gloss: #fed9e9;
  --hb-pink: #fa78b2;
  --hb-pink-shade: #954b6f;
  --hb-red-gloss: #fed0cf;
  --hb-red: #fc5855;
  --hb-red-shade: #963839;
  --hb-orange-gloss: #ffe5cb;
  --hb-orange: #fea247;
  --hb-orange-shade: #986331;
  --hb-green-gloss: #cef3db;
  --hb-green: #4fd57f;
  --hb-green-shade: #328151;
  --hb-grey-gloss: #e0e0e0;
  --hb-grey: #929292;
  --hb-grey-shade: #595a5c;
  /* Night is the home ground and the colour of every eye. Its gloss is a raised surface, not a highlight. */
  --hb-night-gloss: #2c2e33;
  --hb-night: #0a0c12;
  --hb-night-shade: #06070a;
  --hb-paper-gloss: #fbfcfd;
  --hb-paper: #f2f4f8;
  --hb-paper-shade: #919397;

  /* Accent: one pastel drives every brand surface. Default blue (founder pick 2026-10-26: direction A, blue overall);
     a page picks another with data-hb-accent="blue|purple|pink|red|orange|green|grey". Money stays --hb-win (green). */
  --hb-accent-gloss: var(--hb-blue-gloss);
  --hb-accent: var(--hb-blue);
  --hb-accent-shade: var(--hb-blue-shade);
  --hb-on-accent: var(--hb-night); /* ink on a pastel fill: always night */

  /* Brand surfaces (non-glass): night tinted toward the accent's shade. */
  --hb-ground: var(--hb-night);
  --hb-surface-1: color-mix(in srgb, var(--hb-accent-shade) 18%, var(--hb-night));
  --hb-surface-2: color-mix(in srgb, var(--hb-accent-shade) 30%, var(--hb-night));
  --hb-surface-3: color-mix(in srgb, var(--hb-accent-shade) 44%, var(--hb-night));
  --hb-line: color-mix(in srgb, var(--hb-accent) 22%, transparent);
  --hb-line-strong: color-mix(in srgb, var(--hb-accent) 45%, transparent);
  --hb-scrim: color-mix(in srgb, var(--hb-night) 62%, transparent);
  --hb-text: #eef1f7;
  --hb-text-2: #c3c9d6;
  --hb-text-3: #8d95a7;
  --hb-win: var(--hb-green);
  --hb-loss: var(--hb-red);

  /* Type: Baloo 2 ExtraBold for display and the wordmark (-4.5% tracking), Geist for UI, Geist Mono for labels. */
  --hb-font-display: "Baloo 2", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, sans-serif;
  --hb-font-ui: "Geist", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --hb-font-mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --hb-weight-display: 800;
  --hb-tracking-wordmark: -0.045em;
  --hb-tracking-display: -0.03em;
  --hb-tracking-label: 0.08em;
  --hb-fs-label: 11px;
  --hb-fs-caption: 13px;
  --hb-fs-body: 15px;
  --hb-fs-button: 17px;
  --hb-fs-title: 22px;
  --hb-fs-headline: 30px;
  --hb-fs-hero: clamp(64px, 11vh, 112px);

  /* Shape */
  --hb-radius-xs: 6px;
  --hb-radius-s: 10px;
  --hb-radius-m: 16px;
  --hb-radius-l: 24px;
  --hb-radius-xl: 32px;
  --hb-radius-pill: 999px;
  --hb-radius-icon: 22.37%; /* iOS app-icon mask, for previews only: the platform rounds the real icon */

  /* Spacing: 4 px grid */
  --hb-space-1: 4px;
  --hb-space-2: 8px;
  --hb-space-3: 12px;
  --hb-space-4: 16px;
  --hb-space-5: 20px;
  --hb-space-6: 24px;
  --hb-space-8: 32px;
  --hb-space-10: 40px;
  --hb-control: 44px;
  --hb-primary: 56px;

  /* Motion */
  --hb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --hb-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --hb-spring: cubic-bezier(0.32, 1.25, 0.5, 1);
  --hb-dur-fast: 0.14s;
  --hb-dur: 0.24s;
  --hb-dur-slow: 0.42s;

  /* Dither: Bayer 4x4 threshold masks, 2..14 of 16 cells on (the kit's BAYER4). Tile at a multiple of 4 px
     (--hb-cell = one cell) so cells stay square and crisp. A static mask: no shader, no per-frame work. */
  --hb-cell: 4px;
  --hb-bayer-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 2h1v1h-1z'/%3E%3C/svg%3E");
  --hb-bayer-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1z'/%3E%3C/svg%3E");
  --hb-bayer-6: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E");
  --hb-bayer-8: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E");
  --hb-bayer-10: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E");
  --hb-bayer-12: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E");
  --hb-bayer-14: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h1v1h-1zM1 0h1v1h-1zM2 0h1v1h-1zM3 0h1v1h-1zM0 1h1v1h-1zM1 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM1 2h1v1h-1zM2 2h1v1h-1zM3 2h1v1h-1zM1 3h1v1h-1zM2 3h1v1h-1zM3 3h1v1h-1z'/%3E%3C/svg%3E");
}

/* Accent switch: any element (the html tag for a whole page). */
[data-hb-accent="blue"] {
  --hb-accent-gloss: var(--hb-blue-gloss);
  --hb-accent: var(--hb-blue);
  --hb-accent-shade: var(--hb-blue-shade);
}
[data-hb-accent="purple"] {
  --hb-accent-gloss: var(--hb-purple-gloss);
  --hb-accent: var(--hb-purple);
  --hb-accent-shade: var(--hb-purple-shade);
}
[data-hb-accent="pink"] {
  --hb-accent-gloss: var(--hb-pink-gloss);
  --hb-accent: var(--hb-pink);
  --hb-accent-shade: var(--hb-pink-shade);
}
[data-hb-accent="red"] {
  --hb-accent-gloss: var(--hb-red-gloss);
  --hb-accent: var(--hb-red);
  --hb-accent-shade: var(--hb-red-shade);
}
[data-hb-accent="orange"] {
  --hb-accent-gloss: var(--hb-orange-gloss);
  --hb-accent: var(--hb-orange);
  --hb-accent-shade: var(--hb-orange-shade);
}
[data-hb-accent="green"] {
  --hb-accent-gloss: var(--hb-green-gloss);
  --hb-accent: var(--hb-green);
  --hb-accent-shade: var(--hb-green-shade);
}
[data-hb-accent="grey"] {
  --hb-accent-gloss: var(--hb-grey-gloss);
  --hb-accent: var(--hb-grey);
  --hb-accent-shade: var(--hb-grey-shade);
}
/* Surfaces are recomputed wherever the accent changes (custom properties resolve where they are declared). */
[data-hb-accent] {
  --hb-surface-1: color-mix(in srgb, var(--hb-accent-shade) 18%, var(--hb-night));
  --hb-surface-2: color-mix(in srgb, var(--hb-accent-shade) 30%, var(--hb-night));
  --hb-surface-3: color-mix(in srgb, var(--hb-accent-shade) 44%, var(--hb-night));
  --hb-line: color-mix(in srgb, var(--hb-accent) 22%, transparent);
  --hb-line-strong: color-mix(in srgb, var(--hb-accent) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hb-dur-fast: 0s;
    --hb-dur: 0s;
    --hb-dur-slow: 0s;
  }
}

/* Opt-in base for a branded page or subtree. */
.hb {
  background: var(--hb-ground);
  color: var(--hb-text);
  font-family: var(--hb-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Display type and labels */
.hb-display {
  font-family: var(--hb-font-display);
  font-weight: var(--hb-weight-display);
  letter-spacing: var(--hb-tracking-display);
  line-height: 1;
}
.hb-label {
  font-family: var(--hb-font-mono);
  font-size: var(--hb-fs-label);
  font-weight: 500;
  letter-spacing: var(--hb-tracking-label);
  text-transform: uppercase;
}

/* Wordmark: <span class="hb-wordmark">hobb<span class="hb-i">ı</span></span>. The dotless i carries the
   tittle star (hobbi-tittle.svg, painted in currentColor through a mask). */
.hb-wordmark {
  font-family: var(--hb-font-display);
  font-weight: var(--hb-weight-display);
  letter-spacing: var(--hb-tracking-wordmark);
  line-height: 0.82;
  white-space: nowrap;
}
.hb-wordmark .hb-i {
  position: relative;
  display: inline-block;
}
.hb-wordmark .hb-i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -0.09em;
  width: 0.27em;
  height: 0.27em;
  transform: translateX(-44%);
  background: currentColor;
  -webkit-mask: url("assets/hobbi-tittle.svg") center / contain no-repeat;
  mask: url("assets/hobbi-tittle.svg") center / contain no-repeat;
}

/* The mark as an <img>: square, never stretched, crisp cells. Pick the file with HobbiBrand.markSrc(). */
.hb-mark {
  display: block;
  aspect-ratio: 1;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Flat dither texture: a Bayer mask over a solid ink. Set --hb-dither-ink, --hb-dither-mask
   (one of --hb-bayer-*) and --hb-dither-size (a multiple of 4 px). Put it on a positioned element. */
.hb-dither::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: var(--hb-dither-ink, var(--hb-accent));
  opacity: var(--hb-dither-opacity, 1);
  -webkit-mask: var(--hb-dither-mask, var(--hb-bayer-4)) 0 0 / var(--hb-dither-size, 8px) repeat;
  mask: var(--hb-dither-mask, var(--hb-bayer-4)) 0 0 / var(--hb-dither-size, 8px) repeat;
}

/* Branded backdrop behind a game that doesn't fill the screen (no black bars). A night ground with a soft
   accent glow; HobbiBrand.ditherBackdrop(el) adds the dithered tone field on top as one static image. */
.hb-backdrop {
  background-color: var(--hb-night);
  background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--hb-accent-shade) 55%, transparent), transparent 70%),
    radial-gradient(120% 60% at 50% 100%, color-mix(in srgb, var(--hb-accent-shade) 55%, transparent), transparent 70%);
}
.hb-pixelated {
  image-rendering: pixelated;
}