/* =============================================================================
   Hoekedex website
   DS Silver, net als de app: Pixelify Sans, harde pixelranden (9-slice zoals
   app/src/lib/themes.ts), geen blur, rariteitskleuren uit app/src/lib/rules.ts.
   Geen externe bronnen: alles komt van dit domein (zie _headers voor de CSP).
   ============================================================================= */

@font-face { font-family: "Pixelify Sans"; src: url("/fonts/PixelifySans-400Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/PixelifySans-600SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("/fonts/PixelifySans-700Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
/* Tiny5: pixel fallback for Greek, Cyrillic and extra Latin letters (Pixelify has no Greek or Cyrillic). Loaded only when such letters appear. */
@font-face { font-family: "Tiny5"; src: url("/fonts/tiny5-400-cyrillic-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }
@font-face { font-family: "Tiny5"; src: url("/fonts/tiny5-400-cyrillic.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Tiny5"; src: url("/fonts/tiny5-400-greek.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; }
@font-face { font-family: "Tiny5"; src: url("/fonts/tiny5-400-latin-ext.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light dark;
  /* DS Silver (themes.ts) */
  --page: #C9CED5;
  --shell: #DCE0E5;
  --shell2: #BCC3CB;
  --edge: #8C949E;
  --shell-ink: #4A5058;
  --bezel: #25282D;
  --screen: #F4F6F8;
  --screen2: #E3E8ED;
  --line: #9AA4B0;
  --line2: #CDD4DB;
  --ink: #3B4149;
  --ink2: #555C66;
  --primary: #2E9BD6;
  --primary-dk: #1B73A8;
  --primary-soft: #D2EAF8;
  --accent: #57C2E4;
  --link: #17669A;
  --gold: #C9952A;
  --gold-ink: #7A5A12;
  --danger: #D85440;
  --ok: #4FA85C;
  --ok-ink: #2F7A3B;

  /* Midnight (privacy-blok) */
  --m-page: #0A0C10;
  --m-shell: #1A1D24;
  --m-screen: #1E222B;
  --m-line: #3E4555;
  --m-ink: #ECEFF4;
  --m-ink2: #A9B1BF;
  --m-primary: #2E8BFF;
  --m-accent: #5BA8FF;
  --m-gold: #FFD54F;

  /* Rariteit (rules.ts) */
  --r-common: #9AA0A6;    --r-common-dk: #5C6168;    --r-common-lt: #DCDFE2;
  --r-rare: #4FB6FF;      --r-rare-dk: #1E5FA8;      --r-rare-lt: #C4E6FF;
  --r-epic: #B388FF;      --r-epic-dk: #5B33B0;      --r-epic-lt: #E2D2FF;
  --r-legendary: #FFD54F; --r-legendary-dk: #A8781A; --r-legendary-lt: #FFF0B8;
  --r-ultra: #FF4D8D;     --r-ultra-dk: #9C1F52;     --r-ultra-lt: #FFB3CF;

  --font-pixel: "Pixelify Sans", "Tiny5", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --phone: #25282D;
  --hint-bg: #D2EAF8;
  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
  --gutter: 20px;
  --fw: 9px;      /* framebreedte: 3 kunstpixels van 3px */
  --fw-sm: 6px;   /* kleine onderdelen: 3 kunstpixels van 2px */

  /* 9-slice pixel frames, same art as the app (themes.ts frameUrl) */
  --fr-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23F4F6F8'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23F4F6F8'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23FFFFFF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23FFFFFF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23E3E8ED'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23E3E8ED'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3C/svg%3E");
  --fr-sunk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23E3E8ED'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23E3E8ED'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23D1D5DA'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23D1D5DA'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23EDF0F3'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23EDF0F3'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3C/svg%3E");
  --fr-btn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%232E9BD6'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%232E9BD6'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%238CC8E8'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%238CC8E8'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%232479A7'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%232479A7'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23195576'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23195576'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23195576'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23195576'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23195576'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23195576'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23195576'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23195576'/%3E%3C/svg%3E");
  --fr-btn-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%232E9BD6'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%232E9BD6'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%232479A7'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%232479A7'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%236DB9E2'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%236DB9E2'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23195576'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23195576'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23195576'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23195576'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23195576'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23195576'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23195576'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23195576'/%3E%3C/svg%3E");
  --fr-btn2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23F4F6F8'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23F4F6F8'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23FFFFFF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23FFFFFF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23CDD4DB'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23CDD4DB'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3C/svg%3E");
  --fr-btn2-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23E3E8ED'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23E3E8ED'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23CDD4DB'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23CDD4DB'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23FFFFFF'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23FFFFFF'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239AA4B0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239AA4B0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239AA4B0'/%3E%3C/svg%3E");
  --fr-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23C9952A'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23C9952A'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23E1C58A'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23E1C58A'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%239D7421'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%239D7421'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%236F5217'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%236F5217'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%236F5217'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%236F5217'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%236F5217'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%236F5217'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%236F5217'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%236F5217'/%3E%3C/svg%3E");
  --fr-danger: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23D85440'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23D85440'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23EAA196'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23EAA196'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23A84232'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23A84232'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23772E23'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23772E23'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23772E23'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23772E23'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23772E23'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23772E23'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23772E23'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23772E23'/%3E%3C/svg%3E");
  --fr-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23D2EAF8'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23D2EAF8'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23E4F2FB'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23E4F2FB'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23C1D7E4'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23C1D7E4'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%232E9BD6'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%232E9BD6'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%232E9BD6'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%232E9BD6'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232E9BD6'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232E9BD6'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%232E9BD6'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%232E9BD6'/%3E%3C/svg%3E");
  --fr-toast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%233B4149'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%233B4149'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%235E636A'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%235E636A'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%232C3137'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%232C3137'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%2325282D'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%2325282D'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%2325282D'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%2325282D'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%2325282D'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%2325282D'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%2325282D'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%2325282D'/%3E%3C/svg%3E");
  --fr-shell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23DCE0E5'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23DCE0E5'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23EEF0F3'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23EEF0F3'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23BCC3CB'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23BCC3CB'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%238C949E'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%238C949E'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%238C949E'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%238C949E'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%238C949E'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%238C949E'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%238C949E'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%238C949E'/%3E%3C/svg%3E");
  --fr-m-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231E222B'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231E222B'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23343840'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23343840'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23272C37'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23272C37'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%233E4555'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%233E4555'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233E4555'/%3E%3C/svg%3E");
  --fr-m-sunk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23272C37'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23272C37'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%231D2129'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%231D2129'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%2373767D'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%2373767D'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%233E4555'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%233E4555'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233E4555'/%3E%3C/svg%3E");
  --fr-r-ultra: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23FF4D8D'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23FF4D8D'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23FFB3CF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23FFB3CF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23D13F74'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23D13F74'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239C1F52'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239C1F52'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239C1F52'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239C1F52'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239C1F52'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239C1F52'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239C1F52'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239C1F52'/%3E%3C/svg%3E");
  --fr-r-legendary: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23FFD54F'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23FFD54F'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23FFF0B8'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23FFF0B8'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23D1AF41'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23D1AF41'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23A8781A'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23A8781A'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23A8781A'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23A8781A'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23A8781A'/%3E%3C/svg%3E");
  --fr-r-epic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23B388FF'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23B388FF'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23E2D2FF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23E2D2FF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%239370D1'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%239370D1'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%235B33B0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%235B33B0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%235B33B0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%235B33B0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%235B33B0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%235B33B0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%235B33B0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%235B33B0'/%3E%3C/svg%3E");
  --fr-r-rare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%234FB6FF'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%234FB6FF'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23C4E6FF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23C4E6FF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%234195D1'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%234195D1'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%231E5FA8'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%231E5FA8'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%231E5FA8'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%231E5FA8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%231E5FA8'/%3E%3C/svg%3E");
  --fr-r-common: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%239AA0A6'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%239AA0A6'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23DCDFE2'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23DCDFE2'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%237E8388'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%237E8388'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%235C6168'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%235C6168'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%235C6168'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%235C6168'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%235C6168'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%235C6168'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%235C6168'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%235C6168'/%3E%3C/svg%3E");
  --fr-r-legendary-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23FFF6D6'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23FFF6D6'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23FFFFFF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23FFFFFF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23FFE7A0'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23FFE7A0'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23A8781A'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23A8781A'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23A8781A'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23A8781A'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23A8781A'/%3E%3C/svg%3E");
  --fr-r-rare-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23E6F4FF'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23E6F4FF'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23FFFFFF'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23FFFFFF'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23C4E6FF'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23C4E6FF'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%231E5FA8'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%231E5FA8'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%231E5FA8'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%231E5FA8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%231E5FA8'/%3E%3C/svg%3E");
}

/* Greek and Cyrillic (el, ru, uk): Pixelify has none of these letters and the Tiny5 fallback is only
   legible at display sizes. Running text and small labels use the system font; headings, big claims
   and button labels keep the pixel look through Tiny5. */
:root:is([lang="el"], [lang="ru"], [lang="uk"]) { --font-pixel: var(--font-text); }
:root:is([lang="el"], [lang="ru"], [lang="uk"]) :is(h1, h2, h3, h4, .pitch, .claim__big, .bigclaim, .pquote, .factlist b, .btn__txt) {
  font-family: "Pixelify Sans", "Tiny5", var(--font-text);
}
:root:is([lang="el"], [lang="ru"], [lang="uk"]) .btn__sub { font-family: var(--font-text); letter-spacing: 0; }

/* ------------------------------------------------------------------ basis */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background-color: var(--page);
  background-image: radial-gradient(rgba(59, 65, 73, .10) 1px, transparent 1.4px);
  background-size: 12px 12px;
  color: var(--ink);
  font: 400 18px/1.5 var(--font-pixel);
  font-feature-settings: "liga" 0;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
svg { shape-rendering: crispEdges; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--primary-dk); }
strong, b { font-weight: 700; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: 0 0 auto; }

:focus-visible { outline: 3px dashed var(--primary-dk); outline-offset: 3px; }
.dark :focus-visible, .on-dark :focus-visible { outline-color: var(--m-accent); }

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  padding: 10px 16px; background: var(--bezel); color: #fff; font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* -------------------------------------------------------- pixelonderdelen */
.panel { border: var(--fw) solid transparent; border-image: var(--fr-panel) 3 fill / var(--fw) stretch; }
.sunk  { border: var(--fw-sm) solid transparent; border-image: var(--fr-sunk) 3 fill / var(--fw-sm) stretch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 14px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--ink2);
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--primary); box-shadow: 3px 3px 0 var(--primary-dk); }
.title {
  margin-top: 10px;
  font-size: clamp(30px, 5.4vw, 50px); line-height: 1.04; font-weight: 700; letter-spacing: .005em;
  color: var(--ink); text-wrap: balance;
}
.title .hl { color: var(--primary-dk); }
.intro { margin-top: 14px; max-width: 40em; font-size: 19px; color: var(--ink2); text-wrap: pretty; }
.section-head { margin-bottom: 36px; }
.section-head.center { text-align: center; }
.section-head.center .intro { margin-inline: auto; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 8px; min-height: 28px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch;
  font-size: 14px; font-weight: 600; line-height: 1; color: var(--ink); white-space: nowrap;
}
.chip .ico { width: 12px; height: 12px; }
.chip--gold { border-image-source: var(--fr-gold); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.chip--blue { border-image-source: var(--fr-tab); color: var(--primary-dk); }
.xp { color: var(--gold-ink); font-weight: 700; white-space: nowrap; }

.badge18 {
  display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 4px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-danger) 3 fill / var(--fw-sm) stretch;
  color: #fff; font: 700 14px/1 var(--font-pixel); text-shadow: 1px 1px 0 rgba(0,0,0,.25);
}

/* ---------------------------------------------------------------- knoppen */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 60px; padding: 2px 18px;
  border: var(--fw) solid transparent; border-image: var(--fr-btn) 3 fill / var(--fw) stretch;
  color: #fff; font: 700 20px/1.1 var(--font-pixel); text-decoration: none; text-align: left;
  text-shadow: 2px 2px 0 rgba(13, 58, 87, .55);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.btn:hover { color: #fff; filter: brightness(1.06); }
.btn:active { border-image-source: var(--fr-btn-down); transform: translateY(3px); }
.btn .ico { width: 22px; height: 22px; }
.btn__txt { display: flex; flex-direction: column; gap: 3px; }
.btn__sub { font-size: 13px; font-weight: 600; letter-spacing: .06em; opacity: .92; }
.btn--2 { border-image-source: var(--fr-btn2); color: var(--link); text-shadow: none; }
.btn--2:hover { color: var(--primary-dk); }
.btn--2:active { border-image-source: var(--fr-btn2-down); }
.btn--sm { min-height: 44px; padding: 0 12px; font-size: 17px; }
.btn--sm .ico { width: 16px; height: 16px; }
.btn.is-soon { border-image-source: var(--fr-sunk); color: var(--ink2); text-shadow: none; cursor: default; filter: none; transform: none; }
.btn.is-soon .ico { opacity: .7; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------- topbalk */
.topbar {
  position: sticky; top: 0; z-index: 50;
  pointer-events: none;
}
/* the bar's background is a layer, so it can condense with a transform (no layout shift) */
.topbar::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--shell);
  border-bottom: 3px solid var(--edge);
  box-shadow: inset 0 -3px 0 var(--shell2), 0 3px 0 rgba(37, 40, 45, .08);
  transform-origin: top; transition: transform .18s steps(3, end);
}
.topbar__in { display: flex; align-items: center; gap: 20px; min-height: 66px; transition: transform .18s steps(3, end); }
.topbar__in > *, .topbar__progress { pointer-events: auto; }
.topbar.is-condensed::before { transform: scaleY(.82); }
.topbar.is-condensed .topbar__in { transform: translateY(-6px); }
.topbar__progress { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: .06em; }
.brand:hover { color: var(--ink); }
.brand img { width: 34px; height: 34px; image-rendering: pixelated; }
.brand span { text-shadow: 2px 2px 0 var(--primary); }
.nav { display: none; margin-left: auto; gap: 4px; }
.nav a { padding: 8px 7px; color: var(--shell-ink); text-decoration: none; font-weight: 600; font-size: 16px; white-space: nowrap; }
/* the longest menus (and the Prices link when paid is on) still fit next to the buttons */
:root:is([lang="ro"], [lang="ru"], [lang="uk"], [lang="pt"], [lang="fr"], [lang="es"], [lang="el"]) .nav a { padding-inline: 5px; font-size: 15px; }
.nav a:hover { color: var(--primary-dk); text-decoration: underline; }
.topbar .btn { margin-left: 8px; }
@media (min-width: 1140px) {
  .nav { display: flex; }
  .langs { margin-left: 4px; }
}

/* ---------------------------------------------------------- DS-console */
.ds {
  position: relative;
  padding: 14px;
  background: var(--shell);
  border: 3px solid var(--edge);
  border-radius: 20px;
  box-shadow: inset 0 3px 0 #EEF0F3, inset 0 -5px 0 var(--shell2), 8px 8px 0 rgba(37, 40, 45, .16);
}
.screen {
  position: relative;
  background-color: var(--screen);
  background-image:
    linear-gradient(rgba(154, 164, 176, .13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(154, 164, 176, .13) 1px, transparent 1px);
  background-size: 6px 6px;
  border: 6px solid var(--bezel);
  border-radius: 12px;
  padding: 26px 24px;
}
.hinge { display: flex; align-items: center; gap: 12px; padding: 12px 4px; }
.hinge .grille { width: 46px; height: 13px; background-image: radial-gradient(var(--edge) 1.3px, transparent 1.7px); background-size: 6px 6px; flex: 0 0 auto; }
.hinge .bar { flex: 1; height: 9px; border-radius: 9px; background: linear-gradient(var(--shell2), #A9B1BA); box-shadow: inset 0 2px 0 rgba(0,0,0,.12), 0 1px 0 #fff; }
.hinge .led { width: 10px; height: 10px; border-radius: 50%; background: #4FC35E; box-shadow: 0 0 0 3px rgba(79, 168, 92, .22); flex: 0 0 auto; }

/* -------------------------------------------------------------- telefoons */
.phone {
  position: relative;
  width: 100%;
  padding: 16px 9px 12px;
  background: var(--phone);
  clip-path: polygon(0 12px, 3px 12px, 3px 6px, 6px 6px, 6px 3px, 12px 3px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 3px, calc(100% - 6px) 3px, calc(100% - 6px) 6px, calc(100% - 3px) 6px, calc(100% - 3px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 3px) calc(100% - 12px), calc(100% - 3px) calc(100% - 6px), calc(100% - 6px) calc(100% - 6px), calc(100% - 6px) calc(100% - 3px), calc(100% - 12px) calc(100% - 3px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 3px), 6px calc(100% - 3px), 6px calc(100% - 6px), 3px calc(100% - 6px), 3px calc(100% - 12px), 0 calc(100% - 12px));
}
.phone::before { content: ""; position: absolute; top: 6px; left: 50%; width: 42px; height: 4px; margin-left: -21px; background: #474C54; }
.phone img { width: 100%; background: var(--page); }
.phone-wrap { filter: drop-shadow(8px 8px 0 rgba(37, 40, 45, .22)); }

.dsshot { max-width: 340px; margin-inline: auto; width: 100%; }
.dsshot img { width: 100%; filter: drop-shadow(8px 8px 0 rgba(37, 40, 45, .2)); }

/* ------------------------------------------------------------------- hero */
.hero { position: relative; overflow: clip; border-bottom: 6px solid var(--bezel); }
.hero__grid { display: grid; gap: 40px; padding-top: 28px; }
.hero__ds { align-self: start; }
.hero .screen--top { padding: 28px 24px 26px; container-type: inline-size; }
.hero .eyebrow { font-size: 13px; letter-spacing: .18em; }
.wordmark {
  display: block;
  margin-top: 14px;
  font-size: clamp(40px, 13vw, 96px); font-size: clamp(40px, 18.4cqi, 100px); line-height: .9; font-weight: 700; letter-spacing: .02em;
  color: var(--ink);
  text-shadow: .055em .055em 0 var(--primary);
}
.pitch { display: block; margin-top: 18px; font-size: clamp(24px, 4.6vw, 34px); line-height: 1.12; font-weight: 600; color: var(--primary-dk); text-wrap: balance; }
.lede { margin-top: 14px; font-size: 19px; color: var(--ink2); max-width: 32em; text-wrap: pretty; }
.hero .screen--bottom { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.hero .btn--play { width: 100%; justify-content: flex-start; }
.stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stores .btn { justify-content: flex-start; padding-inline: 12px; font-size: 18px; min-width: 0; }
.agenote { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink2); }

.hero__phones { position: relative; height: 480px; }
.hero__phones .hp { position: absolute; width: 56%; max-width: 300px; transition: transform .25s ease-out; }
.hero__phones .p-back { left: 0; top: 70px; }
.hero__phones .p-front { right: 0; top: 0; }
.toast {
  position: absolute; z-index: 3; left: 0; top: 14px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 12px; min-height: 44px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-gold) 3 fill / var(--fw-sm) stretch;
  color: #fff; font-weight: 700; font-size: 16px; text-shadow: 1px 1px 0 rgba(0,0,0,.3);
  box-shadow: 4px 4px 0 rgba(37, 40, 45, .2);
}
.toast .ico { width: 16px; height: 16px; }

@media (min-width: 560px) {
  .hero__phones { height: 560px; }
  .hero__phones .hp { width: 300px; }
  .hero__phones .p-back { left: calc(50% - 280px); }
  .hero__phones .p-front { right: calc(50% - 280px); }
  .toast { left: calc(50% - 300px); top: 30px; }
}
@media (min-width: 980px) {
  .hero__grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: 32px; padding-top: 44px; align-items: stretch; }
  .hero__ds { margin-bottom: 52px; }
  .hero__phones { height: auto; min-height: 600px; }
  .hero__phones .hp { width: 290px; }
  .hero__phones .p-back { left: 0; top: 74px; }
  .hero__phones .p-front { right: 0; left: auto; top: 18px; }
  .toast { left: -10px; top: 40px; }
}
@media (min-width: 1120px) {
  .hero__phones .hp { width: 300px; }
  .hero__phones .p-back { left: 10px; }
}

/* ----------------------------------------------------------- feitenbalk */
.facts { background: var(--bezel); color: #ECEFF4; }
.claims { display: grid; gap: 0; }
.factlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; background: #33373E; border-top: 3px solid #33373E; }
.factlist li { padding: 18px 8px; text-align: center; background: var(--bezel); }
.factlist b { display: block; font-size: clamp(30px, 7vw, 40px); line-height: 1; color: var(--accent); }
.factlist li:nth-child(-n+3) b { color: var(--r-legendary); }
.factlist span { display: block; margin-top: 6px; font-size: 14px; letter-spacing: .08em; color: #B7BEC8; }
@media (min-width: 860px) { .factlist { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .claims { grid-template-columns: 1fr 1fr; column-gap: 40px; } .claims .claim { border-bottom: 0; } }
.claim { display: grid; grid-template-columns: 68px 1fr; gap: 22px; align-items: center; padding: 34px 0 30px; }
.claim + .claim { border-top: 3px solid #33373E; }
@media (min-width: 1000px) { .claim + .claim { border-top: 0; } }
.claim__ico--wink { border-image-source: var(--fr-r-ultra); }
.claim__ico { display: grid; place-items: center; width: 68px; height: 68px; border: var(--fw) solid transparent; border-image: var(--fr-gold) 3 fill / var(--fw) stretch; color: #fff; }
.claim__ico .ico { width: 30px; height: 30px; }
.claim__big { font-size: clamp(22px, 3.2vw, 32px); line-height: 1.12; font-weight: 700; color: #fff; text-wrap: balance; }
.claim__big em { font-style: normal; color: var(--r-legendary); }
.claim__sub { margin-top: 10px; max-width: 46em; font-size: clamp(17px, 2.2vw, 21px); color: #C9D0DA; text-wrap: pretty; }
@media (max-width: 520px) { .claim { grid-template-columns: 1fr; gap: 14px; padding: 30px 0 26px; } .claim__ico { width: 56px; height: 56px; } .claim__ico .ico { width: 24px; height: 24px; } }

/* --------------------------------------------------------------- secties */
.section { padding: 76px 0; }
.section--shell { background: var(--shell); border-block: 3px solid var(--edge); box-shadow: inset 0 3px 0 #EEF0F3; }
@media (min-width: 900px) { .section { padding: 104px 0; } }

/* --------------------------------------------------------- hoe het werkt */
.steps { display: grid; gap: 16px; counter-reset: step; }
.step { position: relative; padding: 14px 14px 16px; }
.step__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.step__n { font-size: 15px; font-weight: 700; letter-spacing: .14em; color: var(--ink2); }
.step__ico { display: grid; place-items: center; width: 52px; height: 52px; border: var(--fw-sm) solid transparent; border-image: var(--fr-tab) 3 fill / var(--fw-sm) stretch; color: var(--primary-dk); }
.step__ico .ico { width: 26px; height: 26px; }
.step h3 { margin-top: 12px; font-size: 26px; line-height: 1.1; }
.step p { margin-top: 8px; color: var(--ink2); font-size: 17px; }
@media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
  .step:not(:last-child)::after {
    content: ""; position: absolute; top: 34px; right: -31px; width: 24px; height: 24px; z-index: 2;
    background: var(--primary);
    clip-path: polygon(0 33%, 50% 33%, 50% 0, 100% 50%, 50% 100%, 50% 67%, 0 67%);
  }
}

/* Feature-rijen (tekst + telefoons) */
.feature { display: grid; gap: 36px; align-items: center; }
.feature + .feature { margin-top: 84px; }
.feature__text > p { margin-top: 14px; color: var(--ink2); font-size: 18px; max-width: 34em; }
.feature h3.sub { margin-top: 10px; font-size: clamp(26px, 4vw, 36px); line-height: 1.08; text-wrap: balance; }
.duo { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 600px; margin-inline: auto; width: 100%; }
.duo .phone-wrap:nth-child(2) { margin-top: 44px; }
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: start; max-width: 640px; margin-inline: auto; width: 100%; }
.trio .phone-wrap:nth-child(2) { margin-top: 36px; }
.trio .phone-wrap:nth-child(3) { margin-top: 12px; }
.solo { max-width: 300px; margin-inline: auto; width: 100%; }
.cap { margin-top: 12px; font-size: 14px; color: var(--ink2); text-align: center; letter-spacing: .04em; }
@media (min-width: 980px) {
  .feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
  .feature--flip .feature__media { order: -1; }
}

/* XP-bord */
.board { margin-top: 22px; padding: 12px 14px 14px; max-width: 34em; }
.board h4 { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; align-items: baseline; font-size: 18px; }
.board h4 small { font-size: 13px; font-weight: 400; color: var(--ink2); }
.xplist { margin-top: 10px; display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
.xplist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 2px dotted var(--line2); font-size: 16px; }
.xplist li:nth-last-child(-n+2) { border-bottom: 0; }

.evo { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 4px; }
.evo li { display: flex; align-items: center; gap: 4px; }
.evo li:not(:last-child)::after { content: ""; width: 10px; height: 10px; background: var(--edge); clip-path: polygon(0 0, 100% 50%, 0 100%); margin-left: 2px; }
.evo .chip small { font-weight: 400; color: var(--gold-ink); }
.evo .chip.is-top { border-image-source: var(--fr-r-ultra); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.evo .chip.is-top small { color: #fff; }

.minis { margin-top: 22px; display: grid; gap: 10px; max-width: 34em; }
.mini { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 10px 12px; }
.mini .ico-box { display: grid; place-items: center; width: 40px; height: 40px; border: var(--fw-sm) solid transparent; border-image: var(--fr-tab) 3 fill / var(--fw-sm) stretch; color: var(--primary-dk); }
.mini .ico-box .ico { width: 20px; height: 20px; }
.mini h4 { font-size: 18px; line-height: 1.2; }
.mini p { margin-top: 2px; font-size: 15px; color: var(--ink2); }

/* --------------------------------------------------------------- rariteit */
.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tier { --c: var(--r-common); --d: var(--r-common-dk); --l: var(--r-common-lt); position: relative; }
.tier--rare { --c: var(--r-rare); --d: var(--r-rare-dk); --l: var(--r-rare-lt); }
.tier--epic { --c: var(--r-epic); --d: var(--r-epic-dk); --l: var(--r-epic-lt); }
.tier--legendary { --c: var(--r-legendary); --d: var(--r-legendary-dk); --l: var(--r-legendary-lt); }
.tier--ultra { --c: var(--r-ultra); --d: var(--r-ultra-dk); --l: var(--r-ultra-lt); grid-column: 1 / -1; }
.tier__card {
  position: relative; height: 100%;
  display: flex; flex-direction: column; gap: 10px;
  padding: 8px;
  border: 12px solid transparent; border-image: var(--fr) 3 fill / 12px stretch;
}
.tier--common .tier__card { --fr: var(--fr-r-common); }
.tier--rare .tier__card { --fr: var(--fr-r-rare); }
.tier--epic .tier__card { --fr: var(--fr-r-epic); }
.tier--legendary .tier__card { --fr: var(--fr-r-legendary); }
.tier--ultra .tier__card { --fr: var(--fr-r-ultra); }
.tier__art {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 4 / 3;
  background-color: var(--l);
  background-image: linear-gradient(45deg, rgba(255,255,255,.45) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.45) 75%), linear-gradient(45deg, rgba(255,255,255,.45) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.45) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px;
  border: 3px solid var(--d);
  color: var(--d);
}
.tier__art .ico { width: 44%; height: auto; aspect-ratio: 1; filter: drop-shadow(4px 4px 0 rgba(0,0,0,.18)); }
.tier--ultra .tier__art { aspect-ratio: auto; min-height: 150px; }
.tier--ultra .tier__art .ico { width: 92px; }
.tier--ultra .tier__art::after {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.75) 46%, rgba(124,92,255,.35) 50%, rgba(55,224,200,.35) 54%, transparent 62%);
  animation: holo 3.2s steps(16) infinite;
}
@keyframes holo { from { transform: translateX(-45%); } to { transform: translateX(45%); } }
.tier__name { font-size: 20px; font-weight: 700; line-height: 1.1; color: #fff; text-shadow: 2px 2px 0 var(--d), -1px -1px 0 var(--d), 1px -1px 0 var(--d), -1px 1px 0 var(--d); }
.tier__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.tier__min { font-size: 14px; font-weight: 600; color: var(--bezel); background: rgba(255,255,255,.72); padding: 2px 6px; }
.tier__xp { font-size: 17px; font-weight: 700; color: var(--bezel); }
@media (min-width: 720px) {
  .tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tier--ultra { grid-column: auto; }
  .tier--legendary, .tier--ultra { grid-column: span 1; }
}
@media (min-width: 1040px) {
  .tiers { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tier--ultra .tier__art { aspect-ratio: 4 / 3; min-height: 0; }
  .tier--ultra .tier__art .ico { width: 44%; }
}
.tier-note { margin-top: 26px; display: grid; gap: 14px; }
.tier-note .panel { padding: 10px 14px 12px; }
.tier-note h3 { font-size: 20px; }
.tier-note p { margin-top: 4px; font-size: 16px; color: var(--ink2); }
@media (min-width: 860px) { .tier-note { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- thema's */
.themes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.theme { display: flex; flex-direction: column; padding: 6px 6px 10px; }
.theme__img { position: relative; overflow: hidden; background: var(--bezel); padding: 4px 4px 0; }
.theme__img img { width: 100%; aspect-ratio: 390 / 508; object-fit: cover; object-position: top; }
.theme figcaption { padding: 0 4px; }
.theme .pal { display: block; width: 100%; height: 8px; margin-bottom: 10px; }
.theme h3 { font-size: 19px; line-height: 1.15; }
.theme p { margin-top: 4px; font-size: 14px; line-height: 1.35; color: var(--ink2); }
.theme--promo { justify-content: center; gap: 12px; padding: 18px 16px; }
.theme--promo .ico { width: 34px; height: 34px; color: var(--gold); }
.theme--promo h3 { display: block; font-size: 22px; }
.theme--promo p { font-size: 16px; }
@media (min-width: 680px) { .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .themes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

.consoles { margin-top: 56px; display: grid; gap: 30px; align-items: center; }
.consoles .duo { max-width: 560px; }
@media (min-width: 980px) { .consoles { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }

/* ------------------------------------------------------------- spelletjes */
.games { margin-top: 22px; display: grid; gap: 10px; }
@media (min-width: 560px) { .games { grid-template-columns: 1fr 1fr; } }
.game { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 10px 12px; }
.game .ico-box { display: grid; place-items: center; width: 44px; height: 44px; border: var(--fw-sm) solid transparent; border-image: var(--fr-r-ultra) 3 fill / var(--fw-sm) stretch; color: #fff; }
.game:nth-child(2) .ico-box { border-image-source: var(--fr-r-rare); }
.game:nth-child(3) .ico-box { border-image-source: var(--fr-r-epic); }
.game:nth-child(4) .ico-box { border-image-source: var(--fr-danger); }
.game .ico-box .ico { width: 22px; height: 22px; }
.game h4 { font-size: 18px; line-height: 1.2; }
.game p { margin-top: 2px; font-size: 15px; color: var(--ink2); }
.game .xp { display: inline-block; margin-top: 4px; font-size: 14px; }

.checks { margin-top: 18px; display: grid; gap: 8px; max-width: 34em; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 17px; }
.checks .ico { width: 18px; height: 18px; margin-top: 4px; color: var(--ok-ink); }

.pass {
  margin-top: 24px; max-width: 34em;
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center;
  padding: 12px 16px;
  border: var(--fw) solid transparent; border-image: var(--fr-r-legendary) 3 fill / var(--fw) stretch;
  color: var(--bezel);
}
.pass .ico { width: 34px; height: 34px; color: var(--r-legendary-dk); }
.pass h4 { font-size: 20px; }
.pass p { font-size: 15px; }

/* ---------------------------------------------------------------- privacy */
.dark {
  color: var(--m-ink);
  background-color: var(--m-page);
  background-image:
    radial-gradient(1.5px 1.5px at 22px 30px, rgba(255,255,255,.55) 98%, transparent),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.4) 98%, transparent),
    radial-gradient(2px 2px at 160px 60px, rgba(91,168,255,.55) 98%, transparent),
    radial-gradient(1px 1px at 200px 170px, rgba(255,255,255,.35) 98%, transparent);
  background-size: 230px 210px, 370px 330px, 290px 410px, 510px 270px;
  border-block: 6px solid #000;
}
.dark .eyebrow { color: var(--m-ink2); }
.dark .eyebrow::before { background: var(--m-primary); box-shadow: 3px 3px 0 #1E5CB3; }
.dark a { color: var(--m-accent); }
.dark a:hover { color: #8EC3FF; }
.bigclaim { margin-top: 12px; font-size: clamp(34px, 7vw, 68px); line-height: 1.02; font-weight: 700; text-wrap: balance; }
.bigclaim span { display: block; }
.bigclaim span:last-child { color: var(--m-accent); margin-top: 6px; font-size: .62em; line-height: 1.1; }
.dark .intro { color: var(--m-ink2); }
.pquote { margin-top: 26px; padding: 6px 0 6px 18px; border-left: 6px solid var(--m-gold); font-size: clamp(21px, 3vw, 28px); line-height: 1.2; font-weight: 700; color: var(--m-gold); text-wrap: balance; }

.flow { margin: 44px 0 0; display: grid; gap: 10px; align-items: stretch; }
.node { padding: 12px 14px 14px; border: var(--fw) solid transparent; border-image: var(--fr-m-panel) 3 fill / var(--fw) stretch; }
.node h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.node h3 .ico { width: 22px; height: 22px; color: var(--m-accent); }
.node p { margin-top: 6px; font-size: 15px; color: var(--m-ink2); }
.node--relay { border-image-source: var(--fr-m-sunk); }
.node--relay h3 .ico { color: var(--m-gold); }
.wire { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--m-gold); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.wire .ico { width: 18px; height: 18px; }
.wire::before, .wire::after { content: ""; width: 3px; height: 14px; background: repeating-linear-gradient(var(--m-line) 0 3px, transparent 3px 6px); }
@media (min-width: 980px) {
  .flow { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
  .wire { flex-direction: column; gap: 6px; }
  .wire::before, .wire::after { width: 100%; height: 3px; background: repeating-linear-gradient(90deg, var(--m-line) 0 6px, transparent 6px 12px); }
}

.facts-grid { margin-top: 44px; display: grid; gap: 14px; }
.pf { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 12px 14px 14px; border: var(--fw) solid transparent; border-image: var(--fr-m-panel) 3 fill / var(--fw) stretch; }
.pf .ico-box { display: grid; place-items: center; width: 44px; height: 44px; background: #142441; border: 3px solid var(--m-primary); color: var(--m-accent); }
.pf .ico-box .ico { width: 22px; height: 22px; }
.pf h3 { font-size: 19px; line-height: 1.2; }
.pf p { margin-top: 6px; font: 400 16px/1.55 var(--font-text); color: var(--m-ink2); }
@media (min-width: 720px) { .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.honest { margin-top: 28px; display: grid; gap: 22px; align-items: center; padding: 14px 16px 16px; border: var(--fw) solid transparent; border-image: var(--fr-m-sunk) 3 fill / var(--fw) stretch; }
.honest h3 { font-size: 20px; color: var(--m-gold); }
.honest ul { margin-top: 8px; display: grid; gap: 8px; font: 400 16px/1.55 var(--font-text); color: var(--m-ink2); }
.honest li { position: relative; padding-left: 20px; }
.honest li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; background: var(--m-gold); }
.honest .more { margin-top: 14px; font-size: 17px; }
.honest .chat-proof { max-width: 340px; margin-inline: auto; width: 100%; }
.chat-proof .phone { padding-bottom: 9px; }
.dark .cap { color: var(--m-ink2); }
@media (min-width: 900px) { .honest { grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); } }

/* ---------------------------------------------------------------- prijzen */
.plans { display: grid; gap: 18px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 14px 16px 18px; }
.plan--pro { border-image-source: var(--fr-r-legendary); }
.plan--pass { border-image-source: var(--fr-r-rare-soft); }
.plan__tag { position: absolute; top: -26px; right: 8px; }
.plan h3 { font-size: 22px; line-height: 1.15; }
.plan .price { margin-top: 10px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.plan .price b { font-size: 44px; line-height: 1; color: var(--ink); }
.plan .price span { font-size: 15px; color: var(--ink2); }
.plan > p { margin-top: 8px; font-size: 16px; color: var(--ink2); }
.plan ul { margin-top: 14px; display: grid; gap: 8px; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 16px; line-height: 1.35; }
.plan li .ico { width: 16px; height: 16px; margin-top: 2px; color: var(--ok-ink); }
.plan--pro { color: var(--bezel); }
.plan--pro .price span, .plan--pro > p { color: #4A3A10; }
.plan--pro li .ico { color: var(--r-legendary-dk); }
.plan--pass .price span, .plan--pass > p { color: #18406E; }
.plans-note { margin-top: 26px; text-align: center; font-size: 16px; color: var(--ink2); max-width: 46em; margin-inline: auto; text-wrap: pretty; }
@media (min-width: 680px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* -------------------------------------------------------------------- FAQ */
.faq { display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.qa { padding: 0; }
.qa summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 14px; cursor: pointer; list-style: none;
  font-size: 20px; font-weight: 600; line-height: 1.25;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary .ico { width: 18px; height: 18px; color: var(--primary-dk); }
.qa summary .ico-minus { display: none; }
.qa[open] summary .ico-plus { display: none; }
.qa[open] summary .ico-minus { display: block; }
.qa[open] summary { border-bottom: 2px dotted var(--line2); }
.qa .a { padding: 12px 14px 16px; font: 400 17px/1.6 var(--font-text); color: var(--ink); }
.qa .a p + p, .qa .a p + ul, .qa .a ul + p { margin-top: 10px; }
.qa .a ul { list-style: square; padding-left: 22px; }
.qa .a li + li { margin-top: 4px; }

/* -------------------------------------------------------------- slot-CTA */
.final { padding-bottom: 96px; }
.final .ds { max-width: 760px; margin-inline: auto; }
.final .screen { text-align: center; }
.final h2 { font-size: clamp(30px, 5.6vw, 48px); line-height: 1.05; text-wrap: balance; }
.final p { margin: 12px auto 0; max-width: 30em; color: var(--ink2); }
.final .screen--bottom { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
.final .btn--play { justify-content: center; }
.final .agenote { justify-content: center; }

/* ---------------------------------------------------------------- footer */
.footer { background: var(--shell); border-top: 6px solid var(--bezel); padding: 40px 0 34px; font-size: 16px; }
.footer__grid { display: grid; gap: 26px; }
.footer .brand { font-size: 24px; }
.footer__tag { margin-top: 10px; color: var(--ink2); max-width: 22em; }
.footer h2 { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink2); }
.footer ul { margin-top: 10px; display: grid; gap: 6px; }
.footer a { color: var(--ink); text-decoration: none; }
.footer a:hover { color: var(--primary-dk); text-decoration: underline; }
.footer__wink { font: 600 16px/1.5 var(--font-pixel); color: var(--ink); max-width: 60em; }
.footer__fine { margin-top: 30px; padding-top: 18px; border-top: 3px solid var(--shell2); display: grid; gap: 8px; font: 400 14px/1.5 var(--font-text); color: var(--ink2); }
@media (min-width: 760px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }

/* ------------------------------------------------------- tekstpagina's */
.doc { padding: 40px 0 88px; }
.doc .wrap { max-width: 880px; }
.doc__head { padding: 22px 22px 24px; }
.doc__head h1 { margin-top: 10px; font-size: clamp(28px, 7.4vw, 52px); line-height: 1.04; overflow-wrap: break-word; hyphens: auto; }
.doc__head p { margin-top: 10px; color: var(--ink2); font-size: 17px; }
.tldr { margin-top: 22px; padding: 12px 16px 16px; }
.tldr h2 { font-size: 20px; }
.tldr ul { margin-top: 8px; display: grid; gap: 8px; font: 400 17px/1.55 var(--font-text); }
.tldr li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; }
.tldr li .ico { width: 16px; height: 16px; margin-top: 5px; color: var(--ok-ink); }
.prose { margin-top: 22px; padding: 18px 20px 24px; font: 400 17px/1.65 var(--font-text); color: var(--ink); }
.prose h2 { margin-top: 34px; font: 700 25px/1.2 var(--font-pixel); color: var(--ink); scroll-margin-top: 90px; }
.prose h2:first-child { margin-top: 4px; }
.prose h3 { margin-top: 22px; font: 600 19px/1.3 var(--font-pixel); }
.prose p, .prose ul, .prose ol, .prose table, .prose dl { margin-top: 12px; }
.prose ul { list-style: square; padding-left: 22px; }
.prose ol { list-style: decimal; padding-left: 24px; }
.prose li + li { margin-top: 6px; }
.prose li::marker { color: var(--primary-dk); }
.prose strong { color: var(--bezel); }
.prose code { font: 600 .92em/1 var(--font-pixel); background: var(--screen2); padding: 1px 5px; }
.prose .note { padding: 10px 14px; background: var(--primary-soft); border-left: 6px solid var(--primary); }
.prose .warn { padding: 10px 14px; background: #FBE6E2; border-left: 6px solid var(--danger); }
.prose table { width: 100%; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 2px solid var(--line2); }
.prose th { font: 600 15px/1.3 var(--font-pixel); background: var(--screen2); }
.table-scroll { overflow-x: auto; }
.todo { background: #FFF0B8; color: #5A430C; padding: 0 4px; font-weight: 600; }
.toc { margin-top: 22px; padding: 12px 16px 14px; }
.toc h2 { font-size: 18px; }
.toc ol { margin-top: 8px; display: grid; gap: 4px 20px; list-style: decimal; padding-left: 22px; font-size: 17px; }
@media (min-width: 700px) { .toc ol { grid-template-columns: 1fr 1fr; } }
.back { margin-top: 26px; }

/* -------------------------------------------------------------------- 404 */
.lost { min-height: 70vh; display: grid; place-items: center; padding: 48px 0 72px; }
.lost .ds { max-width: 620px; width: 100%; }
.lost .screen { text-align: center; }
.lost .code { font-size: clamp(72px, 20vw, 132px); line-height: .9; font-weight: 700; color: var(--ink); text-shadow: .055em .055em 0 var(--primary); }
.lost h1 { margin-top: 14px; font-size: clamp(26px, 5vw, 36px); line-height: 1.1; }
.lost p { margin-top: 10px; color: var(--ink2); }
.lost .screen--bottom { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ------------------------------------------------------------ bewegingen */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}

/* ---------------------------------------------------------------- smal */
@media (max-width: 420px) {
  :root { --gutter: 16px; }
  .topbar__in { gap: 8px; }
  .topbar .brand { gap: 8px; font-size: 17px; letter-spacing: .03em; }
  .topbar .brand img { width: 28px; height: 28px; }
  .topbar .btn { padding: 0 10px; margin-left: 4px; }
  .langs summary { padding: 0 6px; }
  body { font-size: 17px; }
  .screen { padding: 20px 16px; }
  .hero .screen--bottom { padding: 16px; }
  .ds { padding: 10px; border-radius: 16px; }
  .stores .btn { padding-inline: 8px; gap: 8px; font-size: 17px; }
  .stores .btn .ico { display: none; }
  .stores .btn { padding-inline: 10px; }
  .xplist { grid-template-columns: 1fr; }
  .xplist li:nth-last-child(2) { border-bottom: 2px dotted var(--line2); }
  .trio { gap: 6px; }
}
@media print {
  .topbar, .footer, .skip { display: none; }
  body { background: #fff; }
}
.ico--back { transform: scaleX(-1); }

/* ---------------------------------------------------------- met een knipoog */
.wink { display: grid; gap: 26px; padding: 18px 18px 22px; border: var(--fw) solid transparent; border-image: var(--fr-r-legendary-soft) 3 fill / var(--fw) stretch; }
.wink__head { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.wink__face { display: grid; place-items: center; width: 84px; height: 84px; border: var(--fw) solid transparent; border-image: var(--fr-r-legendary) 3 fill / var(--fw) stretch; color: var(--bezel); }
.wink__face .ico { width: 46px; height: 46px; }
.wink .title { margin-top: 6px; }
.wink__lede { margin-top: 10px; font-size: 19px; color: var(--ink2); max-width: 36em; text-wrap: pretty; }
.wink__grid { display: grid; gap: 12px; }
.wink__item { padding: 10px 14px 14px; }
.wink__item h3 { font-size: 20px; line-height: 1.2; }
.wink__item p { margin-top: 6px; font-size: 16px; color: var(--ink2); }
.wink__foot { font-size: 17px; }
@media (max-width: 520px) { .wink__head { grid-template-columns: 1fr; } .wink__face { width: 68px; height: 68px; } .wink__face .ico { width: 36px; height: 36px; } }
@media (min-width: 720px) { .wink__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wink { padding: 26px 28px 30px; } .wink__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wink-note { margin-top: 22px; display: grid; grid-template-columns: 52px 1fr; gap: 14px; align-items: start; padding: 12px 16px 14px; border: var(--fw) solid transparent; border-image: var(--fr-r-legendary-soft) 3 fill / var(--fw) stretch; }
.wink-note .ico { width: 40px; height: 40px; color: var(--r-legendary-dk); margin-top: 2px; }
.wink-note h2 { font-size: 20px; }
.wink-note p { margin-top: 6px; font: 400 17px/1.6 var(--font-text); color: var(--ink); }
@media (max-width: 520px) {
  .prose { padding: 14px 12px 20px; }
  .prose table { table-layout: fixed; font-size: 14px; }
  .prose th, .prose td { padding: 6px 5px; overflow-wrap: break-word; hyphens: auto; }
  .prose th { font-size: 14px; }
}

/* ------------------------------------------------------------ zo werkt het */
.how { display: grid; gap: 16px; }
.howcard { display: flex; flex-direction: column; padding: 12px 14px 14px; }
.howcard__head { display: flex; align-items: center; gap: 12px; }
.howcard__head .ico-box { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border: var(--fw-sm) solid transparent; border-image: var(--fr-tab) 3 fill / var(--fw-sm) stretch; color: var(--primary-dk); }
.howcard__head .ico-box .ico { width: 22px; height: 22px; }
.howcard h3 { font-size: 21px; line-height: 1.15; }
.howcard > p:not(.mini-flow__cap) { margin-top: 10px; font: 400 16px/1.55 var(--font-text); color: var(--ink); flex: 1; }
.mini-flow { margin-top: 14px; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; padding: 10px; background: var(--screen2); border: 2px solid var(--line2); }
.tok { display: grid; place-items: center; width: 36px; height: 36px; border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; color: var(--ink); }
.tok .ico { width: 18px; height: 18px; }
.tok--gold { border-image-source: var(--fr-gold); color: #fff; }
.tok--ok { border-image-source: var(--fr-tab); color: var(--primary-dk); }
.arr { position: relative; width: 22px; height: 12px; flex: 0 0 auto; background: linear-gradient(var(--edge), var(--edge)) center / calc(100% - 8px) 2px no-repeat; }
.arr::after { content: ""; position: absolute; right: 0; top: 1px; width: 6px; height: 10px; background: var(--edge); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.arr--both::before { content: ""; position: absolute; left: 0; top: 1px; width: 6px; height: 10px; background: var(--edge); clip-path: polygon(100% 0, 0 50%, 100% 100%); }
.mini-flow__cap { margin-top: 6px; font-size: 14px; letter-spacing: .04em; color: var(--ink2); }
@media (min-width: 720px) { .how { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .how { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }

/* ------------------------------------------------- gratis / betaald, radar */
.theme__img { position: relative; }
.theme__tag { position: absolute; z-index: 1; top: 8px; right: 8px; padding: 2px 7px; background: var(--bezel); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .04em; border: 2px solid #fff; }
.theme__tag--free { background: var(--ok-ink); }
.section--free { padding: 40px 0 0; }
.freeline { display: flex; align-items: center; justify-content: center; gap: 14px; max-width: 760px; margin-inline: auto; padding: 16px 18px; font-size: clamp(19px, 2.6vw, 24px); line-height: 1.3; text-align: left; }
.freeline .ico { width: 30px; height: 30px; color: var(--gold); }
.safe { margin-top: 14px; padding: 12px 14px 14px; background: #FFF6D6; border: 3px solid var(--r-legendary-dk); }
.safe h4 { display: flex; align-items: center; gap: 8px; font-size: 18px; color: var(--bezel); }
.safe h4 .ico { width: 18px; height: 18px; color: var(--r-legendary-dk); }
.safe ul { margin-top: 8px; display: grid; gap: 6px; font: 400 15px/1.5 var(--font-text); color: var(--ink); }
.safe li { position: relative; padding-left: 16px; }
.safe li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 6px; height: 6px; background: var(--r-legendary-dk); }
@media (min-width: 720px) and (max-width: 1099px) { .how > li:last-child { grid-column: 1 / -1; } }
@media (min-width: 1100px) {
  .how { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .how > li { grid-column: span 2; }
  .how > li:nth-child(n+4) { grid-column: span 3; }
}

/* ------------------------------------------------------------- taalkeuze */
.langs { position: relative; margin-left: auto; }
.langs summary { display: flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; cursor: pointer; list-style: none; font-weight: 700; font-size: 16px; color: var(--shell-ink); border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; }
.langs summary::-webkit-details-marker { display: none; }
.langs summary .ico { width: 16px; height: 16px; }
.langs[open] summary { border-image-source: var(--fr-tab); color: var(--primary-dk); }
.langs ul { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; width: 236px; max-height: min(70vh, 520px); overflow-y: auto; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; border: var(--fw) solid transparent; border-image: var(--fr-panel) 3 fill / var(--fw) stretch; box-shadow: 6px 6px 0 rgba(37, 40, 45, .2); }
.langs a { display: block; padding: 6px 8px; color: var(--ink); text-decoration: none; font: 400 15px/1.3 var(--font-text); }
.langs a:hover { background: var(--primary-soft); color: var(--ink); }
.langs a[aria-current="true"] { font-weight: 700; color: var(--primary-dk); }
.langhint { background: var(--hint-bg); border-bottom: 3px solid var(--primary); }
.langhint__in { display: flex; align-items: center; gap: 10px; min-height: 46px; font: 400 16px/1.4 var(--font-text); }
.langhint__in > .ico { width: 18px; height: 18px; color: var(--primary-dk); flex: 0 0 auto; }
.langhint__link { color: var(--link); font-weight: 600; }
.langhint__close { margin-left: auto; display: grid; place-items: center; width: 40px; height: 40px; background: none; border: 0; color: var(--ink); cursor: pointer; }
.langhint__close .ico { width: 14px; height: 14px; }
.footer__langs { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 14px/1.6 var(--font-text); }
.footer__langs a { color: var(--ink2); }
.footer__langs a[aria-current="true"] { color: var(--ink); font-weight: 700; text-decoration: none; }
.footer__hint { font: 400 13px/1.4 var(--font-text); color: var(--ink2); }
a.footer__hint { text-decoration: underline; text-underline-offset: 2px; }
.trnote { margin-top: 18px; padding: 10px 14px; font: 400 15px/1.5 var(--font-text); background: var(--hint-bg); border-left: 6px solid var(--primary); }

/* --------------------------------------------------------------- spellen */
.modes { display: grid; gap: 10px; margin-bottom: 34px; }
.modes li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 400 16px/1.4 var(--font-text); color: var(--ink2); }
.mode { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; font: 700 14px/1.2 var(--font-pixel); color: #fff; white-space: nowrap; background: var(--primary-dk); border: 2px solid rgba(0,0,0,.25); }
.mode .ico { width: 14px; height: 14px; }
.mode--own { background: #6A3FBF; }
.mode--solo { background: #2F7A3B; }
.mode--duo { background: #B0124F; }
.players { display: inline-flex; align-items: center; padding: 2px 8px; font: 700 14px/1.2 var(--font-pixel); color: var(--ink); background: var(--screen2); border: 2px solid var(--line); white-space: nowrap; }
@media (min-width: 760px) { .modes { grid-template-columns: 1fr 1fr; column-gap: 28px; } }
.feature--games { align-items: start; }
.gcats { margin-top: 44px; display: grid; gap: 18px; }
.gcat__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.gcat__head h3 { font-size: clamp(22px, 3vw, 28px); line-height: 1.15; margin-right: 6px; }
.gcat__sub { margin-top: 8px; font: 400 16px/1.5 var(--font-text); color: var(--ink2); max-width: 46em; }
.gcat.panel { padding: 14px 14px 16px; }
.gtiles { margin-top: 14px; display: grid; gap: 8px; }
.gtile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px; background: var(--screen); border: 2px solid var(--line2); }
.gtile__ico { display: grid; place-items: center; width: 40px; height: 40px; background: var(--gc, var(--primary)); color: #fff; border: 2px solid rgba(0,0,0,.28); box-shadow: inset 2px 2px 0 rgba(255,255,255,.3), inset -2px -2px 0 rgba(0,0,0,.18); }
.gtile__ico .ico { width: 20px; height: 20px; filter: drop-shadow(1px 1px 0 rgba(0,0,0,.25)); }
.gtile__txt { display: flex; flex-direction: column; min-width: 0; }
.gtile__txt b { font-size: 17px; line-height: 1.2; }
.gtile__txt > span { margin-top: 2px; font: 400 14px/1.4 var(--font-text); color: var(--ink2); }
.gtile .players { font-size: 13px; }
.tag-free { display: inline-block; margin-left: 4px; padding: 0 5px; font-size: 12px; color: #fff; background: var(--ok-ink); vertical-align: 2px; }
.c-red { --gc: #E0584F; } .c-pink { --gc: #E5508E; } .c-gold { --gc: #C9952A; } .c-blue { --gc: #2E86C8; } .c-purple { --gc: #8A63D2; }
.c-teal { --gc: #1E9E92; } .c-green { --gc: #3F9A4D; } .c-orange { --gc: #E07A2C; } .c-indigo { --gc: #5C6BC0; } .c-cyan { --gc: #2AA6C9; }
.soon, .price { display: inline-flex; align-items: center; padding: 2px 8px; font: 700 14px/1.2 var(--font-pixel); border: 2px solid var(--bezel); }
.soon { background: var(--bezel); color: #fff; }
.price { background: var(--r-legendary); color: var(--bezel); }
.gextra { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; font: 400 15px/1.5 var(--font-text); background: var(--screen2); border: 2px dashed var(--line); }
.gextra > .ico { width: 18px; height: 18px; color: var(--primary-dk); }
.gextra > span:first-of-type { flex: 1 1 260px; }
@media (min-width: 640px) { .gtiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .gtiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.feature--games .modes { margin-bottom: 0; grid-template-columns: 1fr; gap: 16px; }
.feature--games .modes li { display: grid; gap: 6px; justify-items: start; font-size: 17px; }
.feature--games { margin-bottom: 8px; }

.rules2 { margin-top: 26px; display: grid; gap: 18px; }
@media (min-width: 900px) { .rules2 { grid-template-columns: 1fr 1fr; } }
.rulebox { padding: 14px 16px 16px; }
.rulebox h3 { display: flex; align-items: center; gap: 10px; font-size: 22px; line-height: 1.2; }
.rulebox h3 .ico { width: 24px; height: 24px; color: var(--gold); flex: 0 0 auto; }
.rulebox--hot h3 .ico { color: var(--danger); }
.rulebox p { margin-top: 10px; font: 400 16px/1.55 var(--font-text); }
.rulebox p.small, .small { font-size: 14px; color: var(--ink2); }
.levels { margin-top: 10px; display: grid; gap: 6px; }
.levels li { display: grid; grid-template-columns: 96px 1fr; gap: 10px; align-items: baseline; font: 400 15px/1.45 var(--font-text); }
.levels b { font: 700 16px/1.2 var(--font-pixel); color: var(--gold-ink); }
.water { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.water .ico { width: 18px; height: 18px; color: var(--primary); }
.spice { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.spice li { padding: 3px 9px; font: 700 14px/1.2 var(--font-pixel); color: #fff; border: 2px solid rgba(0,0,0,.25); }
.sp0 { background: #3F8A4A; } .sp1 { background: #D94F8A; } .sp2 { background: #D9702F; } .sp3 { background: #C9322E; } .sp4 { background: #8E0E40; }

/* ------------------------------------------------------- avond en radar */
.avond-art { max-width: 420px; margin-inline: auto; width: 100%; }
.avond-art .art { width: 100%; height: auto; image-rendering: pixelated; filter: drop-shadow(8px 8px 0 rgba(37, 40, 45, .2)); }
.note-ask { margin-top: 16px; display: flex; align-items: center; gap: 10px; padding: 10px 12px; font: 600 16px/1.4 var(--font-text); background: var(--hint-bg); border-left: 6px solid var(--primary); }
.note-ask .ico { width: 20px; height: 20px; color: var(--primary-dk); flex: 0 0 auto; }
.radars { display: grid; gap: 18px; }
@media (min-width: 900px) { .radars { grid-template-columns: 1fr 1fr; } }
.radarcard { padding: 14px 16px 16px; }
.radarcard__head { display: flex; align-items: center; gap: 12px; }
.radarcard__head .ico-box { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; border: var(--fw-sm) solid transparent; border-image: var(--fr-tab) 3 fill / var(--fw-sm) stretch; color: var(--primary-dk); }
.radarcard__head .ico-box .ico { width: 24px; height: 24px; }
.radarcard h3 { font-size: 24px; line-height: 1.15; }
.radarcard > p { margin-top: 10px; font: 400 16px/1.55 var(--font-text); }
.radarcard .checks li { font: 400 15px/1.5 var(--font-text); }
.radarcard .checks .ico { color: var(--primary-dk); }
.safe--wide { margin-top: 18px; }
.safe--wide ul { font-size: 16px; }
.safe--wide p { margin-top: 8px; font: 600 15px/1.4 var(--font-text); }
@media (min-width: 900px) { .safe--wide ul { grid-template-columns: 1fr 1fr; column-gap: 24px; } }

/* --------------------------------------------------------------- download */
.dl { display: grid; gap: 18px; align-items: start; }
@media (min-width: 980px) { .dl { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dlcard { position: relative; padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.dlcard h3 { display: flex; align-items: center; gap: 10px; font-size: 24px; }
.dlcard h3 .ico { width: 24px; height: 24px; color: var(--primary-dk); }
.dlcard > p { font: 400 16px/1.5 var(--font-text); }
.dl-mine { display: none; align-self: flex-start; padding: 2px 8px; font: 700 13px/1.3 var(--font-pixel); color: #fff; background: var(--ok-ink); }
[data-platform="android"] .dlcard--android, [data-platform="ios"] .dlcard--ios, [data-platform="desktop"] .dlcard--desktop { order: -1; border-image-source: var(--fr-r-rare-soft); }
[data-platform="android"] .dlcard--android .dl-mine, [data-platform="ios"] .dlcard--ios .dl-mine, [data-platform="desktop"] .dlcard--desktop .dl-mine { display: inline-block; }
@media (min-width: 980px) { [data-platform] .dl { grid-template-columns: 1.25fr 1fr 1fr; } }
.btn--big { min-height: 68px; width: 100%; justify-content: flex-start; }
.dlsteps { display: grid; gap: 8px; counter-reset: s; }
.dlsteps li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: center; font: 400 15px/1.45 var(--font-text); }
.dlsteps .n { display: grid; place-items: center; width: 30px; height: 30px; font: 700 15px/1 var(--font-pixel); color: #fff; background: var(--primary-dk); }
.dlsteps--ios li { grid-template-columns: 48px 1fr; }
.ios-ico { display: grid; place-items: center; width: 44px; height: 44px; color: #0A84FF; background: #fff; border: 2px solid var(--line); border-radius: 10px; }
.ios-ico .ico { width: 22px; height: 22px; }
.ios-ico--txt { font: 700 11px/1.1 var(--font-text); text-align: center; color: #0A84FF; padding: 2px; }
.verify summary { cursor: pointer; font: 600 14px/1.4 var(--font-text); color: var(--link); }
.verify p { margin-top: 6px; }
.hash { display: block; margin-top: 6px; padding: 6px 8px; font: 400 12px/1.5 ui-monospace, Menlo, monospace; word-break: break-all; background: var(--screen2); border: 2px solid var(--line2); }
.qr { align-self: center; width: min(220px, 70%); padding: 10px; background: #fff; border: 3px solid var(--bezel); }
.qr svg { width: 100%; height: auto; display: block; }
.dl-stores { margin-top: 20px; text-align: center; font: 400 15px/1.6 var(--font-text); color: var(--ink2); }
.storelink.is-soon { color: var(--ink2); text-decoration: none; }
.storelink [data-sub] { font-size: 13px; }

/* ================================================================ donker */
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0E1015; --shell: #1A1D24; --shell2: #111318; --edge: #333947; --shell-ink: #AEB6C4;
    --bezel: #050608; --screen: #1E222B; --screen2: #272C37; --line: #3E4555; --line2: #2C313C;
    --ink: #ECEFF4; --ink2: #AEB6C4; --primary-dk: #6CC3EE; --primary-soft: #173450; --link: #8EC3FF;
    --gold-ink: #E8C46A; --ok-ink: #3F9A4D; --phone: #2B2F37; --hint-bg: #13253D;
    --fr-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231E222B'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231E222B'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23343840'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23343840'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23272C37'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23272C37'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%233E4555'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%233E4555'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233E4555'/%3E%3C/svg%3E");
    --fr-sunk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23272C37'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23272C37'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%231D2129'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%231D2129'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%2341454F'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%2341454F'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%233E4555'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%233E4555'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233E4555'/%3E%3C/svg%3E");
    --fr-btn2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231E222B'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231E222B'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23393D44'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23393D44'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%232C313C'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%232C313C'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%233E4555'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%233E4555'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233E4555'/%3E%3C/svg%3E");
    --fr-btn2-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23272C37'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23272C37'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%232C313C'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%232C313C'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23393D44'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23393D44'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%233E4555'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%233E4555'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%233E4555'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%233E4555'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%233E4555'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%233E4555'/%3E%3C/svg%3E");
    --fr-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23173450'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23173450'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23334C65'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23334C65'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23122A40'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23122A40'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%232E9BD6'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%232E9BD6'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%232E9BD6'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%232E9BD6'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%232E9BD6'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%232E9BD6'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%232E9BD6'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%232E9BD6'/%3E%3C/svg%3E");
    --fr-shell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231A1D24'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231A1D24'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%232A2E37'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%232A2E37'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23111318'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23111318'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23333947'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23333947'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23333947'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23333947'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23333947'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23333947'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23333947'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23333947'/%3E%3C/svg%3E");
    --fr-r-legendary-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%232A2410'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%232A2410'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%233A3218'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%233A3218'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%231E1A0B'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%231E1A0B'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23A8781A'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23A8781A'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23A8781A'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23A8781A'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23A8781A'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23A8781A'/%3E%3C/svg%3E");
    --fr-r-rare-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%2312233A'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%2312233A'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%231B3352'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%231B3352'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%230C1828'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%230C1828'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%231E5FA8'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%231E5FA8'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%231E5FA8'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%231E5FA8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%231E5FA8'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%231E5FA8'/%3E%3C/svg%3E");
  }
  body { background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.4px); }
  .screen { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); }
  .ds { box-shadow: inset 0 3px 0 #2A2E37, inset 0 -5px 0 var(--shell2), 8px 8px 0 rgba(0, 0, 0, .4); }
  .hinge .bar { background: linear-gradient(#2A2E37, #111318); box-shadow: inset 0 2px 0 rgba(0,0,0,.3), 0 1px 0 #2A2E37; }
  .topbar::before { box-shadow: inset 0 -3px 0 var(--shell2), 0 3px 0 rgba(0, 0, 0, .3); }
  .section--shell { box-shadow: inset 0 3px 0 #2A2E37; }
  .wordmark, .lost .code { text-shadow: .055em .055em 0 #1B73A8; }
  .brand span { text-shadow: 2px 2px 0 #1B73A8; }
  .phone-wrap, .dsshot img, .avond-art .art { filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .45)); }
  .safe { background: #2A2410; color: var(--ink); }
  .safe h4 { color: #FFE7A0; }
  .prose .warn { background: #3A1E1A; }
  .prose strong { color: #fff; }
  .tier__min { color: #050608; }
  .langs ul { box-shadow: 6px 6px 0 rgba(0, 0, 0, .5); }
  .ios-ico { background: #F4F6F8; }
  .gtile { background: var(--screen2); }
  .players { color: var(--ink); }
  .dark { background-color: #07080B; border-block-color: #23262D; }
  .eyebrow { color: var(--ink2); }
}

/* Hoekedex Forever and Legendary Supporter (pricing) */
.plan--forever { border-image-source: var(--fr-r-legendary); }
.plan--legend { border-image-source: var(--fr-r-ultra); }
.plan--forever > p, .plan--legend > p { font-size: 15px; }
.plans-support { margin-top: 30px; text-align: center; font-size: 20px; }
.plans--support { margin-top: 14px; max-width: 30em; margin-inline: auto; }
@media (min-width: 680px) { .plans--support { grid-template-columns: 1fr; } }
@media (min-width: 1100px) { .plans--support { grid-template-columns: 1fr; } }

/* =============================================================================
   Interactie en beweging (js/site.js, js/fx.js)
   .js  = scripts draaien (gezet vóór de eerste paint door js/boot.js)
   .fx  = scroll-reveals actief (gezet door site.js zodra het weet wat al in beeld is)
   Alleen transform en opacity bewegen; loops pauzeren buiten beeld (.is-off).
   ============================================================================= */
html:not(.js) .js-only { display: none !important; }
.js .nojs-only { display: none !important; }
.is-off *:not(.is-in) { animation-play-state: paused !important; }

@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes popIn { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes bump { 0% { transform: none; } 40% { transform: scale(1.18); } 100% { transform: none; } }
@keyframes nope { 0%, 100% { transform: none; } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-10deg) scale(1.08); } 75% { transform: rotate(8deg) scale(1.08); } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pulse { 0% { transform: scale(.6); opacity: .7; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes spinr { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- reveals */
.fx :is(.section-head, .feature__text, .feature__media, .step, .tier, .tier-note > *, .gamebar, .gcat, .rulebox, .tview, .themes > li, .consoles > *, .howcard, .radarcard, .safe--wide, .flow > *, .pf, .honest, .dlcard, .plan, .wink__head, .wink__item, .qa, .final .ds, .claim, .factlist li, .freeline):not(.is-in) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fx :is(.section-head, .feature__text, .feature__media, .step, .tier, .tier-note > *, .gamebar, .gcat, .rulebox, .tview, .themes > li, .consoles > *, .howcard, .radarcard, .safe--wide, .flow > *, .pf, .honest, .dlcard, .plan, .wink__head, .wink__item, .qa, .final .ds, .claim, .factlist li, .freeline).is-in:not(.no-anim) {
    animation: stepIn .46s steps(5, end) backwards; animation-delay: var(--rvd, 0ms);
  }
}

/* ---------------------------------------------------------- DS-knoppen */
.btn { transition: transform .08s steps(2, end), filter .1s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(3px); transition-duration: 0s; }
.btn[disabled] { opacity: .55; cursor: default; transform: none; }
.btn--gold { border-image-source: var(--fr-gold); text-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.btn--2[aria-pressed="true"] { border-image-source: var(--fr-tab); color: var(--primary-dk); }

/* ------------------------------------------------------------- geluid */
.sndbtn {
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: 0 0 auto;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch;
  color: var(--shell-ink); cursor: pointer;
}
.sndbtn .ico { width: 18px; height: 18px; }
.sndbtn .ico-off { display: none; }
.sndbtn[aria-pressed="false"] .ico-on { display: none; }
.sndbtn[aria-pressed="false"] .ico-off { display: block; color: var(--ink2); }
.sndbtn:hover { color: var(--primary-dk); }
.sndbtn:active { border-image-source: var(--fr-btn2-down); }
.topbar .langs { margin-left: auto; }
.topbar .sndbtn { margin-left: 0; }
@media (min-width: 1140px) { .topbar .langs { margin-left: 4px; } }
@media (max-width: 420px) {
  .topbar .brand span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .topbar .brand img { width: 32px; height: 32px; }
}

/* -------------------------------------------------------------- toast */
.hxtoast {
  position: fixed; z-index: 90; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  max-width: min(520px, calc(100% - 32px)); width: max-content;
  padding: 8px 14px; min-height: 48px; display: flex; align-items: center;
  border: var(--fw) solid transparent; border-image: var(--fr-toast) 3 fill / var(--fw) stretch;
  color: #fff; font: 600 16px/1.35 var(--font-pixel); text-align: center;
  box-shadow: 6px 6px 0 rgba(0,0,0,.25);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform .28s steps(5, end), opacity .2s;
}
.hxtoast:empty { display: none; }
.hxtoast.is-on { transform: translate(-50%, 0); opacity: 1; }
.confetti { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.confetti__h { position: absolute; fill: currentColor; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.2)); }
.is-wink .brand img { animation: wiggle .5s steps(4) 3; }

/* ---------------------------------------------------------- uitleg-knop */
.howbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 2px 10px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-tab) 3 fill / var(--fw-sm) stretch;
  color: var(--primary-dk); font: 700 14px/1.1 var(--font-pixel); cursor: pointer; white-space: nowrap;
  transition: transform .08s steps(2, end);
}
.howbtn .ico { width: 12px; height: 12px; }
.howbtn:hover { transform: translateY(-2px); }
.howbtn:active { transform: translateY(2px); }
.howbtn.is-loading .ico, .gtile.is-loading .gtile__how .ico { animation: blink .5s steps(2) infinite; }
.howrow, .gcat__act { margin-top: 12px; }
.gextra .howbtn { margin-left: auto; }

/* ================================================================ HERO */
.catchrow { margin-top: 18px; }
.catchbtn {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 2px 14px 2px 6px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-gold) 3 fill / var(--fw-sm) stretch;
  color: #fff; font: 700 17px/1.1 var(--font-pixel); text-shadow: 1px 1px 0 rgba(0,0,0,.3); cursor: pointer;
  transition: transform .08s steps(2, end);
}
.catchbtn:hover { transform: translateY(-2px); }
.catchbtn:active { transform: translateY(3px); }
.catchbtn__ball { display: grid; place-items: center; width: 30px; height: 30px; background: #fff; color: var(--r-ultra-dk); border: 2px solid rgba(0,0,0,.25); }
.catchbtn__ball .ico { width: 18px; height: 18px; }
@media (prefers-reduced-motion: no-preference) { .catchbtn:hover .catchbtn__ball .ico { animation: wiggle .4s steps(4) 2; } }
.screen--top { cursor: default; }
.js .screen--top[data-catch-screen] { cursor: pointer; }
.js .screen--top[data-catch-screen] :is(h1, p) { cursor: text; }
.catch {
  position: absolute; inset: 0; z-index: 4; border-radius: 6px; overflow: hidden;
  display: grid; grid-template-rows: auto 1fr auto auto; justify-items: center; align-items: center; gap: 8px;
  padding: 18px 16px 16px;
  background-color: var(--screen);
  background-image: linear-gradient(rgba(154,164,176,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(154,164,176,.13) 1px, transparent 1px);
  background-size: 6px 6px;
  animation: popIn .25s steps(4, end);
}
.catch.is-leaving { opacity: 0; transition: opacity .2s; }
.catch__title { grid-row: 1; font: 700 clamp(26px, 6cqi, 38px)/1 var(--font-pixel); color: var(--ink); text-shadow: 3px 3px 0 var(--rc); opacity: 0; }
.catch__burst, .catch__ball, .catch__card { grid-row: 2; grid-column: 1; }
.catch__ball { display: grid; place-items: center; width: 84px; height: 84px; background: #fff; border: 4px solid var(--bezel); color: var(--r-ultra); box-shadow: 6px 6px 0 rgba(0,0,0,.15); opacity: 0; transform: translateY(-140px); }
.catch__ball .ico { width: 56px; height: 56px; }
.catch.s1 .catch__ball { opacity: 1; transform: none; transition: transform .35s cubic-bezier(.3,1.6,.6,1), opacity .1s; }
.catch__ball.shake0 { animation: wiggle .3s steps(4); }
.catch__ball.shake1 { animation: nope .3s steps(4); }
.catch.s2 .catch__ball { opacity: 0; transform: scale(1.6); transition: transform .2s steps(3), opacity .2s steps(3); }
.catch__burst { position: relative; width: 10px; height: 10px; }
.catch__burst i { position: absolute; left: 0; top: 0; width: 10px; height: 34px; margin: -40px 0 0; background: var(--rc); transform-origin: 5px 45px; opacity: 0; }
.catch.s2 .catch__burst i { opacity: 1; animation: burst .7s steps(6, end) forwards; }
@keyframes burst { from { opacity: 1; scale: .3; } to { opacity: 0; scale: 2.4; } }
.catch__burst i:nth-child(1) { rotate: 0deg; } .catch__burst i:nth-child(2) { rotate: 30deg; } .catch__burst i:nth-child(3) { rotate: 60deg; }
.catch__burst i:nth-child(4) { rotate: 90deg; } .catch__burst i:nth-child(5) { rotate: 120deg; } .catch__burst i:nth-child(6) { rotate: 150deg; }
.catch__burst i:nth-child(7) { rotate: 180deg; } .catch__burst i:nth-child(8) { rotate: 210deg; } .catch__burst i:nth-child(9) { rotate: 240deg; }
.catch__burst i:nth-child(10) { rotate: 270deg; } .catch__burst i:nth-child(11) { rotate: 300deg; } .catch__burst i:nth-child(12) { rotate: 330deg; }
.catch__card { perspective: 700px; width: min(176px, 52cqi); aspect-ratio: 3 / 4; opacity: 0; transform: scale(.4); }
.catch.s2 .catch__card { opacity: 1; transform: none; transition: transform .3s cubic-bezier(.3,1.5,.6,1), opacity .15s; }
.cc { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .5s steps(7, end); }
.catch.s3 .cc { transform: rotateY(180deg); }
.cc__back, .cc__front { position: absolute; inset: 0; backface-visibility: hidden; border: 6px solid var(--bezel); box-shadow: 6px 6px 0 rgba(0,0,0,.18); }
.cc__back { display: grid; place-items: center; background: var(--r-ultra) repeating-linear-gradient(45deg, rgba(255,255,255,.18) 0 6px, transparent 6px 12px); }
.cc__logo { font: 700 13px/1 var(--font-pixel); letter-spacing: .1em; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.3); transform: rotate(-12deg); }
.cc__front { transform: rotateY(180deg); background: var(--rc); padding: 6px; display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.cc__art { width: 100%; height: auto; aspect-ratio: 1; border: 3px solid rgba(0,0,0,.25); image-rendering: pixelated; }
.cc__name { font: 700 17px/1.1 var(--font-pixel); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.4); }
.cc__rar { font: 700 12px/1.1 var(--font-pixel); color: var(--bezel); background: rgba(255,255,255,.75); padding: 1px 4px; align-self: flex-start; }
.r-legendary .cc__name, .r-common .cc__name { color: var(--bezel); text-shadow: 1px 1px 0 rgba(255,255,255,.5); }
.r-ultra .cc__front::after, .r-legendary .cc__front::after {
  content: ""; position: absolute; inset: -50%;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.75) 45%, rgba(124,92,255,.45) 50%, rgba(55,224,200,.45) 55%, rgba(255,213,79,.4) 60%, transparent 68%);
  animation: holo 1.8s steps(14) infinite;
}
.r-legendary .cc__front::after { background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.8) 48%, rgba(255,240,184,.5) 54%, transparent 62%); }
.catch__xp { grid-row: 3; font: 700 22px/1 var(--font-pixel); color: var(--gold-ink); opacity: 0; }
.catch__btns { grid-row: 4; display: flex; gap: 10px; align-items: center; opacity: 0; }
.catch.s4 :is(.catch__title, .catch__xp, .catch__btns) { opacity: 1; transition: opacity .25s steps(4); }
.catch.s4 .catch__title { animation: popIn .35s steps(5, end); }
.catch__close { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; color: var(--ink); cursor: pointer; }
.catch__close .ico { width: 14px; height: 14px; }
.catch.r-ultra { background-image: linear-gradient(rgba(255,77,141,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,77,141,.12) 1px, transparent 1px); }

.hero__phones .hp .phone-wrap { animation: float 7s ease-in-out infinite; }
.hero__phones .p-front .phone-wrap { animation-delay: -3.5s; }
.feature__media .phone-wrap, .consoles .phone-wrap { animation: float 8s ease-in-out infinite; }
.feature__media .phone-wrap:nth-child(2), .consoles .phone-wrap:nth-child(2) { animation-delay: -2.6s; }
.feature__media .phone-wrap:nth-child(3) { animation-delay: -5.2s; }
.toast { animation: float 5s ease-in-out infinite; animation-delay: -1s; }
.hero .hinge .led, .final .hinge .led { animation: blink 2.4s steps(2) infinite; }

/* phone frames: a glass reflection and a pixel camera */
.phone::after { content: ""; position: absolute; inset: 16px 9px 12px; background: linear-gradient(125deg, rgba(255,255,255,.16) 0 18%, transparent 18% 100%); pointer-events: none; }
.zoom { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; cursor: zoom-in; }
.zoom img { display: block; }
.zoom:focus-visible { outline-offset: -3px; }

/* ============================================================ XP-TOY */
.xpcard { margin-top: 12px; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px; background: var(--screen2); border: 2px solid var(--line2); }
.xpcard__art { position: relative; border: 4px solid var(--sc, var(--r-common)); background: var(--r-rare-lt); box-shadow: 4px 4px 0 rgba(0,0,0,.12); transition: border-color .3s steps(3); }
.xpcard__art svg { display: block; width: 100%; height: auto; aspect-ratio: 1; }
.xpcard__flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.xpcard.is-evolve .xpcard__flash { animation: flash .7s steps(6) forwards; }
.xpcard.is-evolve .xpcard__art { animation: bump .5s steps(5); }
@keyframes flash { 0% { opacity: 0; } 15% { opacity: 1; } 30% { opacity: .2; } 45% { opacity: .9; } 100% { opacity: 0; } }
.xpcard[data-stage="1"] { --sc: var(--r-rare); } .xpcard[data-stage="2"] { --sc: #FF6FA5; } .xpcard[data-stage="3"] { --sc: var(--r-epic); }
.xpcard[data-stage="4"] { --sc: #E0584F; } .xpcard[data-stage="5"] { --sc: var(--r-legendary); }
.xpcard__name { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 700 20px/1.1 var(--font-pixel); }
.xpcard__lv { font-size: 14px; color: var(--ink2); }
.xpcard__tags { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.xpcard__rar, .xpcard__stage { padding: 1px 6px; font: 700 12px/1.3 var(--font-pixel); color: #fff; }
.xpcard__rar { background: var(--r-rare-dk); }
.xpcard__stage { background: var(--sc, var(--edge)); color: var(--bezel); transition: background-color .3s steps(3); }
.xpbar { margin-top: 8px; height: 10px; background: var(--screen); border: 2px solid var(--line); overflow: hidden; }
.xpbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--gold) 0 6px, #E1B85A 6px 8px); transform-origin: left; transition: transform .6s steps(8, end); }
.xpcard__xp { margin-top: 4px; font: 600 14px/1.2 var(--font-pixel); color: var(--gold-ink); }
.xpcard__evo { margin-top: 6px; display: flex; gap: 4px; }
.xpcard__evo li { width: 12px; height: 12px; background: var(--line2); border: 2px solid var(--line); }
.xpcard__evo li.on { background: var(--gold); border-color: var(--r-legendary-dk); }
.xplist li { padding: 0; }
.xpbtn {
  position: relative; display: flex; width: 100%; justify-content: space-between; gap: 8px; padding: 7px 6px;
  background: none; border: 0; color: var(--ink); font: inherit; font-size: 16px; text-align: left; cursor: pointer;
}
.js .xpbtn:hover { background: var(--primary-soft); }
.js .xpbtn:active { transform: translateY(2px); }
.xpbtn.is-hit { animation: bump .3s steps(3); }
.xpbtn.is-nope { animation: nope .35s steps(4); }
.xpbtn.is-capped .xp { opacity: .5; }
.xpfloat { position: absolute; right: 8px; top: -4px; font: 700 15px/1 var(--font-pixel); color: var(--gold-ink); pointer-events: none; animation: xpfloat .9s steps(8, end) forwards; }
.xpfloat.is-bad { color: var(--danger); }
@keyframes xpfloat { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-28px); } }
.xptoy__foot { margin-top: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 400 15px/1.4 var(--font-text); color: var(--ink2); }
.xptoy__msg { flex: 1 1 200px; min-height: 1.4em; }
.linkbtn { padding: 6px 4px; background: none; border: 0; color: var(--link); font: 600 15px/1.2 var(--font-text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ============================================================== TIERS */
.tier { perspective: 900px; }
.js .tier { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease-out; }
.js .tier.is-tilt { transition: transform .06s linear; }
.tier__flip { position: relative; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.tier.is-flipped .tier__flip { transform: rotateY(180deg); }
.tier__face { position: relative; height: 100%; backface-visibility: hidden; }
.tier__face .tier__card { overflow: hidden; }
.tier__shine { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.5) 48%, transparent 66%); opacity: 0; transform: translateX(var(--sx, 0%)); transition: opacity .2s; }
.tier.is-tilt .tier__shine { opacity: .85; }
.tier__back {
  position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden;
  display: grid; place-items: center;
  border: 12px solid transparent; border-image: var(--fr) 3 fill / 12px stretch;
  background-image: linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.22) 75%), linear-gradient(45deg, rgba(255,255,255,.22) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.22) 75%);
  background-size: 16px 16px; background-position: 0 0, 8px 8px; background-origin: border-box;
}
.tier--common .tier__back { --fr: var(--fr-r-common); } .tier--rare .tier__back { --fr: var(--fr-r-rare); } .tier--epic .tier__back { --fr: var(--fr-r-epic); }
.tier--legendary .tier__back { --fr: var(--fr-r-legendary); } .tier--ultra .tier__back { --fr: var(--fr-r-ultra); }
.tier__logo { display: grid; justify-items: center; gap: 8px; padding: 12px; background: rgba(0,0,0,.25); border: 3px solid rgba(255,255,255,.6); }
.tier__logo img { width: 48px; height: 48px; image-rendering: pixelated; }
.tier__logo span { font: 700 13px/1 var(--font-pixel); letter-spacing: .12em; color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.tier__btn { position: absolute; inset: 0; z-index: 3; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.tier__btn:focus-visible { outline-offset: 4px; }
.tier--legendary .tier__art::after {
  content: ""; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.8) 48%, rgba(255,240,184,.5) 53%, transparent 60%);
  animation: holo 4s steps(18) infinite; animation-delay: -1.2s;
}

/* ============================================================== GAMES */
.gamebar { margin-top: 36px; padding: 12px 14px 14px; display: grid; gap: 14px; }
.gamebar__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 2px 10px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch;
  color: var(--ink); font: 700 15px/1.1 var(--font-pixel); cursor: pointer; white-space: nowrap;
  transition: transform .08s steps(2, end);
}
.fchip .ico { width: 14px; height: 14px; }
.fchip:hover { transform: translateY(-2px); color: var(--primary-dk); }
.fchip:active { transform: translateY(2px); }
.fchip[aria-pressed="true"] { border-image-source: var(--fr-btn); color: #fff; text-shadow: 1px 1px 0 rgba(13,58,87,.5); }
.fchip--sm { min-height: 36px; padding: 2px 8px; font-size: 14px; }
.stepper { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stepper__q { font: 600 16px/1.2 var(--font-pixel); }
.stepper__ctl { display: inline-flex; align-items: center; gap: 4px; }
.stepper__btn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; color: var(--primary-dk); cursor: pointer; }
.stepper__btn .ico { width: 14px; height: 14px; }
.stepper__btn:active { border-image-source: var(--fr-btn2-down); transform: translateY(2px); }
.stepper__n { display: grid; place-items: center; min-width: 52px; height: 40px; padding: 0 6px; background: var(--bezel); color: #7CF29A; font: 700 22px/1 var(--font-pixel); border: 3px solid #000; }
.stepper__n.is-bump { animation: bump .25s steps(3); }
.slot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.slot__win { flex: 1 1 220px; min-width: 0; height: 48px; overflow: hidden; display: flex; align-items: center; padding: 0 14px; background: var(--bezel); border: 3px solid #000; box-shadow: inset 0 0 0 3px #33373E; }
.slot__reel { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 19px/1 var(--font-pixel); color: var(--r-legendary); letter-spacing: .04em; }
.is-spinning .slot__reel { color: #fff; }
.slot__win.is-win { animation: popIn .35s steps(5, end); }
.gamebar__count { font: 400 15px/1.4 var(--font-text); color: var(--ink2); }
.gcat.is-pop { animation: stepIn .35s steps(5, end); }
.gtiles > li { display: flex; }
.gtile { width: 100%; color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: transform .1s steps(2, end), opacity .2s, border-color .15s; }
.gtile:hover { transform: translateY(-3px); border-color: var(--gc, var(--primary)); box-shadow: 3px 3px 0 rgba(0,0,0,.08); }
.gtile:active { transform: translateY(1px); }
@media (prefers-reduced-motion: no-preference) { .gtile:hover .gtile__ico .ico { animation: wiggle .45s steps(4); } }
.gtile__side { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.gtile__how { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; font: 700 12px/1.3 var(--font-pixel); color: var(--primary-dk); background: var(--primary-soft); border: 2px solid var(--primary); white-space: nowrap; }
.gtile__how .ico { width: 9px; height: 9px; }
html:not(.js) .gtile__how { display: none; }
html:not(.js) .gtile { cursor: default; }
.gtile:hover .gtile__how { background: var(--primary); color: #fff; }
.gtile.is-dim { opacity: .38; }
.gtile.is-dim:hover { opacity: .7; }
.gtile.is-picked { border-color: var(--r-legendary-dk); box-shadow: 0 0 0 3px var(--r-legendary); animation: bump .5s steps(5); }
.gextra.is-dim, .howbtn.is-dim { opacity: .45; }
.prem { display: inline-grid; place-items: center; width: 22px; height: 22px; background: var(--r-legendary); color: var(--r-legendary-dk); border: 2px solid var(--r-legendary-dk); }
.prem .ico { width: 12px; height: 12px; }
.premnote { margin-top: 8px; display: flex; align-items: center; gap: 8px; font: 400 14px/1.4 var(--font-text); color: var(--ink2); }
.premnote .ico { width: 14px; height: 14px; flex: 0 0 auto; color: var(--r-legendary-dk); }

/* --------------------------------------------------------- drankmodus */
.levels li { padding: 2px 6px; margin-inline: -6px; transition: background-color .2s steps(2); }
.levels li.is-on { background: var(--r-legendary-lt); }
.drinktoy { margin-top: 14px; padding: 10px; background: var(--screen2); border: 2px solid var(--line2); display: grid; gap: 10px; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 4px; }
.seg button { min-height: 40px; padding: 2px 4px; border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; color: var(--ink); font: 700 14px/1.1 var(--font-pixel); cursor: pointer; }
.seg button[aria-pressed="true"] { border-image-source: var(--fr-gold); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.3); }
.drinktoy__stage { display: grid; gap: 10px; }
.callout {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 8px 12px;
  background: var(--screen); border: 3px solid var(--bezel); box-shadow: 4px 4px 0 rgba(0,0,0,.12);
  font: 700 20px/1.2 var(--font-pixel); color: var(--ink);
}
.callout__ico { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; background: var(--r-legendary); color: var(--bezel); border: 2px solid var(--r-legendary-dk); }
.callout__ico .ico { width: 22px; height: 22px; }
.rulebox .callout { font: 700 20px/1.2 var(--font-pixel); margin-top: 0; }
.callout.is-big { background: var(--r-ultra); color: #fff; text-shadow: 2px 2px 0 rgba(0,0,0,.3); }
.callout.is-big .callout__ico { background: #fff; color: var(--r-ultra-dk); }
.callout.is-pts .callout__ico { background: var(--primary-soft); color: var(--primary-dk); border-color: var(--primary); }
.callout.is-pop { animation: popIn .35s steps(5, end); }
.callout.is-pop .callout__ico .ico { animation: wiggle .5s steps(4); }
.drinktoy__btns { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.drinktoy__btns .btn { width: 100%; justify-content: center; padding-inline: 8px; font-size: 16px; text-align: center; }

/* ------------------------------------------------------------- pittig */
.spice li { transition: transform .15s steps(2), box-shadow .15s; }
.spice li.is-on { transform: translateY(-3px); box-shadow: 0 3px 0 var(--bezel); }
.spicer { --sc: #D94F8A; --sp: .25; margin-top: 14px; padding: 10px 12px 12px; background: var(--screen2); border: 2px solid var(--line2); }
.spicer__q { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font: 600 16px/1.3 var(--font-pixel); }
.spicer__q b { color: var(--sc); }
.spicer__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 36px; margin: 6px 0 0; background: transparent; cursor: pointer; }
.spicer__range::-webkit-slider-runnable-track { height: 12px; border: 3px solid var(--bezel); background: linear-gradient(90deg, #3F8A4A, #D94F8A 30%, #D9702F 55%, #C9322E 78%, #8E0E40); }
.spicer__range::-moz-range-track { height: 6px; border: 3px solid var(--bezel); background: linear-gradient(90deg, #3F8A4A, #D94F8A 30%, #D9702F 55%, #C9322E 78%, #8E0E40); }
.spicer__range::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -10px; background: #fff; border: 4px solid var(--bezel); box-shadow: 3px 3px 0 rgba(0,0,0,.25); }
.spicer__range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 0; background: #fff; border: 4px solid var(--bezel); }
.spicer__range:focus-visible { outline: 3px dashed var(--primary-dk); outline-offset: 2px; }
.spicer__desc { margin-top: 6px; font: 400 15px/1.5 var(--font-text); min-height: 3em; }
.spicer__lock { margin-top: 8px; display: grid; grid-template-columns: 28px 1fr; gap: 6px 10px; align-items: start; padding: 10px; background: #2B0A18; color: #FFD3E2; border: 3px solid #8E0E40; }
.spicer__lock > .ico { width: 24px; height: 24px; color: #FF4D8D; }
.spicer__lock p { font: 400 15px/1.45 var(--font-text); margin: 0; }
.spicer__lock .btn { grid-column: 1 / -1; justify-self: start; }
.spicer__lock.is-pop { animation: nope .35s steps(4); }

/* ============================================================ LIGHTBOX */
.lb { width: min(100vw, 980px); max-width: 100vw; height: 100vh; height: 100dvh; max-height: 100dvh; margin: 0 auto; padding: 18px 64px; border: 0; background: transparent; color: #fff; overflow: hidden; }
.lb[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; justify-items: center; gap: 8px; }
.lb::backdrop { background: rgba(10, 12, 16, .88); }
.lb__stage { min-height: 0; height: 100%; display: grid; place-items: center; touch-action: pan-y; width: 100%; overflow: hidden; }
.lb__img { max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); max-width: 100%; width: auto; height: auto; object-fit: contain; border: 9px solid var(--phone); background: #25282D; box-shadow: 8px 8px 0 rgba(0,0,0,.4); user-select: none; -webkit-user-drag: none; }
.lb__cap { max-width: 46em; text-align: center; font: 400 15px/1.45 var(--font-text); color: #DDE3EA; }
.lb__n { font: 700 14px/1 var(--font-pixel); color: #9AA4B0; }
.lb__btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; color: var(--ink); cursor: pointer; }
.lb__btn .ico { width: 16px; height: 16px; }
.lb__close { top: 14px; right: 12px; }
.lb__prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb__next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb.is-single .lb__prev, .lb.is-single .lb__next { display: none; }
@media (max-width: 640px) {
  .lb { padding: 64px 10px 16px; }
  .lb__prev, .lb__next { top: auto; bottom: 12px; transform: none; }
}

/* -------------------------------------------------- carrousels (mobiel) */
.dots { display: none; justify-content: center; gap: 4px; margin-top: 4px; }
.dot { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; background: none; border: 0; cursor: pointer; }
.dot::before { content: ""; width: 10px; height: 10px; background: var(--line); border: 2px solid var(--edge); }
.dot[aria-current="true"]::before { background: var(--primary); border-color: var(--primary-dk); transform: scale(1.25); }
@media (max-width: 639px) {
  .duo, .trio {
    display: flex; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 22px; max-width: none; width: auto;
    scrollbar-width: none;
  }
  .duo::-webkit-scrollbar, .trio::-webkit-scrollbar { display: none; }
  .duo .phone-wrap, .trio .phone-wrap { flex: 0 0 66%; scroll-snap-align: center; margin-top: 0 !important; }
  .dots { display: flex; }
}

/* ============================================================= THEMES */
.tgrid { display: grid; gap: 22px; }
@media (min-width: 980px) {
  .tgrid { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 28px; align-items: start; }
  .tview { position: sticky; top: 86px; }
  .tgrid .themes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.tds {
  --t-shell: #DCE0E5; --t-shell2: #BCC3CB; --t-edge: #8C949E; --t-bezel: #25282D; --t-screen: #F4F6F8; --t-screen2: #E3E8ED;
  --t-ink: #3B4149; --t-ink2: #6F7782; --t-primary: #2E9BD6; --t-primary-dk: #1B73A8; --t-accent: #57C2E4; --t-line: #9AA4B0;
  position: relative; max-width: 400px; margin-inline: auto; padding: 12px;
  background: var(--t-shell); border: 3px solid var(--t-edge); border-radius: 18px;
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -5px 0 var(--t-shell2), 8px 8px 0 rgba(37, 40, 45, .18);
  transition: background-color .3s steps(3), border-color .3s steps(3), border-radius .3s steps(3);
}
.tds.is-round { border-radius: 34px; }
.tds__screen { position: relative; overflow: hidden; background: var(--t-screen); border: 6px solid var(--t-bezel); border-radius: 10px; transition: background-color .3s steps(3); }
.tds.is-round .tds__screen { border-radius: 18px; }
.tds__in { padding: 14px 16px 16px; color: var(--t-ink); min-height: 160px; display: flex; flex-direction: column; gap: 6px; }
.tds__name { font: 700 26px/1.05 var(--font-pixel); color: var(--t-ink); text-shadow: 2px 2px 0 var(--t-primary); }
.tds__desc { font: 400 15px/1.4 var(--font-pixel); color: var(--t-ink2); }
.tds__pal { display: flex; gap: 4px; margin-top: auto; }
.tds__pal i { width: 22px; height: 12px; border: 2px solid rgba(0,0,0,.25); }
.tds__song { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 2px 12px; margin-top: 6px; background: var(--t-primary); color: #fff; border: 3px solid var(--t-primary-dk); box-shadow: inset -3px -3px 0 rgba(0,0,0,.2), inset 3px 3px 0 rgba(255,255,255,.25); font: 700 15px/1 var(--font-pixel); text-shadow: 1px 1px 0 rgba(0,0,0,.3); cursor: pointer; }
.tds.is-round .tds__song { border-radius: 999px; }
.tds__song .ico { width: 14px; height: 14px; }
.tds__song .i-s, .tds__song .i-eq { display: none; }
.tds__song[aria-pressed="true"] .i-p { display: none; }
.tds__song[aria-pressed="true"] .i-s { display: block; }
.tds.is-playing .tds__song .i-eq { display: block; animation: blink .4s steps(2) infinite; }
.tds.is-loading .tds__song { opacity: .7; }
.tds__hinge { padding: 10px 4px; }
.tds__hinge .bar { background: var(--t-shell2); box-shadow: none; }
.tds__hinge .grille { background-image: radial-gradient(var(--t-edge) 1.3px, transparent 1.7px); }
.tds__bot { background: var(--t-bezel); }
.tds__bot img, .tds__bot .zoom { display: block; width: 100%; aspect-ratio: 390 / 300; object-fit: cover; object-position: top; }
.tds__power { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.tds__power::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; background: #fff; transform: scaleX(0); }
.tds.is-power .tds__power { animation: powerBg .7s steps(7, end); }
.tds.is-power .tds__power::after { animation: powerLine .7s steps(7, end); }
@keyframes powerBg { 0% { opacity: 0; } 15%, 55% { opacity: 1; } 100% { opacity: 0; } }
@keyframes powerLine { 0%, 20% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1) scaleY(1); opacity: 1; } 70% { transform: scaleX(1) scaleY(30); opacity: 0; } 100% { opacity: 0; } }
.tview__hint { margin-top: 10px; text-align: center; font: 400 14px/1.4 var(--font-text); color: var(--ink2); }
.themes > li { position: relative; }
.themes > li > .theme { height: 100%; }
.theme__pick { position: absolute; inset: 0; z-index: 2; width: 100%; padding: 0; background: none; border: 0; cursor: pointer; }
.theme__pick:focus-visible { outline-offset: 2px; }
.themes > li.is-picked .theme { border-image-source: var(--fr-tab); }
.themes > li.is-picked::after { content: ""; position: absolute; top: -6px; left: -6px; width: 16px; height: 16px; z-index: 3; background: var(--primary); border: 3px solid var(--bezel); }
@media (prefers-reduced-motion: no-preference) {
  .themes > li .theme { transition: transform .1s steps(2, end); }
  .js .themes > li:hover .theme { transform: translateY(-3px); }
}
@media (max-width: 679px) {
  .tgrid .themes {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(var(--gutter) * -1); padding: 8px var(--gutter) 14px; scrollbar-width: thin;
  }
  .tgrid .themes > li { flex: 0 0 44%; scroll-snap-align: start; }
  .tgrid .themes > li.theme--promo { flex-basis: 70%; }
}

/* ========================================================= AVONDCAMERA */
.avcam { max-width: 440px; margin-inline: auto; width: 100%; }
.avcam__stage { position: relative; }
.avcam__cam { position: relative; z-index: 2; width: 64%; margin-inline: auto; filter: drop-shadow(8px 8px 0 rgba(37, 40, 45, .22)); }
.avcam__svg { width: 100%; height: auto; image-rendering: pixelated; }
.avcam__flash { position: absolute; left: 70%; top: 28%; width: 16%; height: 14%; background: #fff; opacity: 0; box-shadow: 0 0 0 20px rgba(255,255,255,.6), 0 0 60px 40px rgba(255,250,220,.8); pointer-events: none; }
.avcam.is-flash .avcam__flash { animation: camflash .45s steps(4, end); }
@keyframes camflash { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } }
.avcam.is-flash .avcam__cam { animation: nope .2s steps(3); }
.avcam__tray { position: relative; z-index: 1; height: 0; padding-bottom: 66%; margin-top: -6%; }
.pola {
  position: absolute; left: 50%; top: 0; width: 52%; margin-left: -26%;
  padding: 6% 6% 0; background: #FBFAF4; box-shadow: 6px 6px 0 rgba(0,0,0,.18);
  transform: translateY(-60%); opacity: 0;
  transition: transform .9s steps(9, end), opacity .2s;
}
.pola.is-out { opacity: 1; transform: translateY(16%); }
.pola[data-pos="1"] { transform: translate(-46%, 22%) rotate(-8deg); }
.pola[data-pos="2"] { transform: translate(46%, 25%) rotate(7deg); }
.pola__img { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: #2B1E3A; }
.pola__svg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.pola__blur { filter: blur(3px) brightness(.5); transition: opacity 2.6s steps(10, end) .3s; }
.pola__chem { position: absolute; inset: 0; background: linear-gradient(160deg, #2A2E28, #4A4234 60%, #6B5A3E); transition: opacity 2.4s steps(12, end) .5s; }
.pola.is-out .pola__blur, .pola.is-out .pola__chem { opacity: 0; }
.pola__date { position: absolute; right: 5%; bottom: 5%; font: 700 9px/1 ui-monospace, Menlo, monospace; color: #FF8A3A; text-shadow: 0 0 4px rgba(255,90,10,.9); letter-spacing: .08em; transform: skewX(-6deg); opacity: 0; transition: opacity .3s 2.6s; }
.pola.is-out .pola__date { opacity: 1; }
.pola__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding: 6% 0 7%; font: 600 11px/1 var(--font-pixel); color: #2B2D33; }
.pola__mark { font-size: 9px; color: #B4B7BD; }
.f-wegwerp .pola__svg { filter: sepia(.32) saturate(1.35) contrast(1.12) hue-rotate(-8deg); }
.f-zwartwit .pola__svg { filter: grayscale(1) contrast(1.45) brightness(1.05); }
.f-nachtclub .pola__svg { filter: saturate(1.6) contrast(1.2) hue-rotate(-18deg); }
.f-polaroid .pola__svg { filter: contrast(.86) brightness(1.08) saturate(.8) sepia(.18); }
.f-flits .pola__svg { filter: contrast(1.22) brightness(1.06) saturate(1.05); }
.f-pixel .pola__img::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.18) 1px, transparent 1px); background-size: 6px 6px; }
.f-pixel .pola__svg { filter: contrast(1.25) saturate(1.15); }
.f-zwartwit .pola__blur, .f-wegwerp .pola__blur, .f-nachtclub .pola__blur, .f-polaroid .pola__blur, .f-flits .pola__blur, .f-pixel .pola__blur { filter: blur(3px) brightness(.5); }
.avcam__filters { margin-top: 14px; justify-content: center; }
.avcam__row { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; }
.avcam__count { font: 600 16px/1.2 var(--font-pixel); color: var(--ink2); }
.avcam__count b { display: inline-block; color: var(--ink); font-size: 20px; }
.avcam__count b.is-bump { animation: bump .3s steps(3); }
.avcam__demo { margin-top: 10px; }

/* ===================================================== PAKKETJES (flows) */
.arr i { position: absolute; top: 3px; left: 0; width: 6px; height: 6px; background: var(--r-legendary); border: 1px solid var(--r-legendary-dk); opacity: 0; }
.mini-flow .arr:nth-of-type(2) i { animation: pk1 3.2s steps(10, end) infinite; }
.mini-flow .arr:nth-of-type(4) i { animation: pk2 3.2s steps(10, end) infinite; }
.mini-flow .arr--both i { animation-name: pkBoth; }
@keyframes pk1 { 0% { opacity: 0; transform: translateX(0); } 5% { opacity: 1; } 40% { opacity: 1; transform: translateX(16px); } 45%, 100% { opacity: 0; transform: translateX(16px); } }
@keyframes pk2 { 0%, 50% { opacity: 0; transform: translateX(0); } 55% { opacity: 1; } 90% { opacity: 1; transform: translateX(16px); } 95%, 100% { opacity: 0; transform: translateX(16px); } }
@keyframes pkBoth { 0% { opacity: 1; transform: translateX(0); } 45% { transform: translateX(16px); } 55% { transform: translateX(16px); } 100% { opacity: 1; transform: translateX(0); } }
.mini-flow .tok:nth-of-type(2) { animation: tokbump 3.2s steps(2) infinite; animation-delay: 1.2s; }
.mini-flow .tok:nth-of-type(3) { animation: tokbump 3.2s steps(2) infinite; animation-delay: 2.85s; }
@keyframes tokbump { 0%, 8% { transform: translateY(-3px); } 9%, 100% { transform: none; } }
.wire { position: relative; overflow: hidden; }
.wire .pk { position: absolute; width: 8px; height: 8px; background: var(--m-gold); box-shadow: 0 0 8px var(--m-gold); left: calc(50% - 4px); top: 0; animation: pkDown 2.2s steps(12, end) infinite; }
.wire + .node + .wire .pk { animation-delay: 1.1s; }
@keyframes pkDown { 0% { transform: translateY(-10px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(60px); opacity: 0; } }
@media (min-width: 980px) {
  .wire .pk { top: calc(50% - 4px); left: 0; animation-name: pkRight; }
  @keyframes pkRight { 0% { transform: translateX(-10px); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateX(100px); opacity: 0; } }
}
.is-sending .wire .pk { animation-duration: .6s; }

/* ============================================================== E2E */
.e2e__form, .e2e__box { margin-top: 12px; }
.e2e__lbl { display: block; margin-bottom: 6px; font: 600 13px/1.3 var(--font-pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--m-ink2); }
.e2e__row { display: flex; flex-wrap: wrap; gap: 6px; }
.e2e__in { flex: 1 1 150px; min-width: 0; height: 44px; padding: 0 10px; background: #0E1118; color: var(--m-ink); border: 3px solid var(--m-line); font: 400 16px/1 var(--font-text); }
.e2e__in:focus-visible { outline: 3px dashed var(--m-accent); outline-offset: 2px; }
.e2e__send { min-height: 44px; flex: 0 0 auto; }
.e2e__cipher { display: block; min-height: 44px; padding: 8px 10px; background: #0E1118; border: 3px dashed var(--m-gold); color: var(--m-gold); font: 400 13px/1.45 ui-monospace, Menlo, monospace; overflow-wrap: anywhere; word-break: break-all; }
.e2e__out { min-height: 44px; padding: 8px 12px; background: var(--m-primary); color: #fff; font: 600 16px/1.4 var(--font-text); border: 3px solid #1E5CB3; overflow-wrap: anywhere; }
.is-recv .e2e__out { animation: popIn .3s steps(4, end); }
.e2e__note { margin-top: 14px; display: flex; align-items: center; gap: 10px; font: 400 15px/1.5 var(--font-text); color: var(--m-ink2); }
.e2e__note .ico { width: 18px; height: 18px; flex: 0 0 auto; color: var(--m-gold); }
.is-sending .node--relay { animation: bump .5s steps(4) .25s; }
@media (min-width: 980px) { .flow { align-items: stretch; } .flow .wire { align-self: center; } }

/* ============================================================== RADAR */
.rwidget { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center; }
@media (max-width: 459px) { .rwidget { grid-template-columns: 1fr; justify-items: center; } .rwidget .rtimer { justify-self: stretch; } }
.rtimer { display: grid; gap: 8px; align-content: center; }
.rtimer__txt { font: 700 15px/1.3 var(--font-pixel); color: var(--primary-dk); min-height: 1.3em; }
.rwidget .cap { margin-top: 0; text-align: left; }
.scope {
  --r: 84px; position: relative; width: 190px; height: 190px; flex: 0 0 auto; overflow: hidden;
  background: #0B1D14; border: 4px solid var(--bezel); border-radius: 50%;
  box-shadow: inset 0 0 0 3px #12331F, 6px 6px 0 rgba(0,0,0,.15);
}
.scope__grid { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 0 28%, rgba(79,232,120,.25) 28.5% 29.5%, transparent 30% 56%, rgba(79,232,120,.25) 56.5% 57.5%, transparent 58%), linear-gradient(rgba(79,232,120,.18), rgba(79,232,120,.18)) center / 2px 100% no-repeat, linear-gradient(rgba(79,232,120,.18), rgba(79,232,120,.18)) center / 100% 2px no-repeat; }
.scope__sweep { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, rgba(79,232,120,.55), rgba(79,232,120,0) 70deg, transparent 360deg); animation: spinr 3s linear infinite; }
.scope__me { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; background: #fff; border: 2px solid #4FE878; }
.scope__ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.scope__ring i { position: absolute; left: -3px; top: -5px; width: 6px; height: 10px; background: #1F4A2C; }
.scope__ring i.on { background: #4FE878; }
.blip { position: absolute; width: 10px; height: 10px; margin: -5px; background: var(--r-ultra); border: 2px solid #fff; opacity: 0; animation: blip 3s steps(6, end) infinite; transition: transform .4s steps(4); }
.blip::after { content: ""; position: absolute; inset: -2px; border: 2px solid var(--r-ultra); animation: pulse 1.5s steps(6, end) infinite; }
.b1 { left: 68%; top: 30%; animation-delay: .25s; } .b2 { left: 30%; top: 64%; animation-delay: 1.75s; background: var(--r-legendary); }
.b3 { left: 70%; top: 68%; animation-delay: 1.05s; background: var(--r-epic); } .b4 { left: 34%; top: 32%; animation-delay: 2.45s; background: var(--r-rare); }
.b5 { left: 54%; top: 80%; animation-delay: 1.3s; }
@keyframes blip { 0% { opacity: 0; } 5% { opacity: 1; } 60% { opacity: .9; } 100% { opacity: 0; } }
.scope.is-area .b1 { transform: translate(18px, -14px); } .scope.is-area .b2 { transform: translate(-22px, 12px); } .scope.is-area .b3 { transform: translate(14px, 10px); }
.scope.is-area .b4 { transform: translate(-16px, -18px); } .scope.is-area .b5 { transform: translate(4px, 18px); }
.scope:not(.is-area) .b5 { opacity: 0 !important; }
.scope.is-done .blip, .scope.is-done .scope__sweep { opacity: 0 !important; animation: none; }
.fmap {
  position: relative; width: 190px; height: 190px; overflow: hidden; border: 4px solid var(--bezel);
  background-color: #E9EEDF;
  background-image: linear-gradient(90deg, transparent 0 46%, #fff 46% 54%, transparent 54%), linear-gradient(transparent 0 30%, #fff 30% 36%, transparent 36% 70%, #fff 70% 75%, transparent 75%), linear-gradient(90deg, transparent 0 18%, #F4F1E4 18% 22%, transparent 22% 78%, #F4F1E4 78% 82%, transparent 82%), linear-gradient(135deg, #CFE3C2 0 22%, transparent 22%), linear-gradient(315deg, #BFDCEB 0 20%, transparent 20%);
  box-shadow: 6px 6px 0 rgba(0,0,0,.15);
}
.fmap__pin { position: absolute; display: grid; place-items: center; min-width: 28px; height: 28px; padding: 0 4px; margin: -14px 0 0 -14px; background: var(--pc, #2E86C8); border: 3px solid #fff; box-shadow: 2px 2px 0 rgba(0,0,0,.3); transition: opacity .3s steps(3), transform .3s steps(3); }
.fmap__pin b { font: 700 13px/1 var(--font-pixel); color: #fff; }
.fmap__pin::after { content: ""; position: absolute; inset: -3px; border: 3px solid var(--pc, #2E86C8); animation: pulse 2.2s steps(8, end) infinite; }
.fmap__pin.c1 { --pc: #E5508E; left: 28%; top: 26%; } .fmap__pin.c2 { --pc: #3F9A4D; left: 76%; top: 56%; } .fmap__pin.c3 { --pc: #8A63D2; left: 30%; top: 78%; }
.fmap__pin.c2::after { animation-delay: .7s; } .fmap__pin.c3::after { animation: none; }
.fmap__fuzzy { position: absolute; left: 30%; top: 78%; width: 84px; height: 84px; margin: -42px; border-radius: 50%; background: rgba(138,99,210,.18); border: 2px dashed rgba(138,99,210,.6); }
.fmap__me { --pc: var(--primary-dk); left: 56%; top: 40%; }
.fmap__me b { font-size: 11px; }
.fmap__me.is-hidden { opacity: .15; transform: scale(.7); }
.fmap__me.is-hidden::after { animation: none; opacity: 0; }

/* =========================================================== DOWNLOAD */
[data-platform="android"] .dlcard--android, [data-platform="ios"] .dlcard--ios, [data-platform="desktop"] .dlcard--desktop { position: relative; }
[data-platform="android"] .dlcard--android::after, [data-platform="ios"] .dlcard--ios::after, [data-platform="desktop"] .dlcard--desktop::after {
  content: ""; position: absolute; inset: -9px; pointer-events: none; border: 3px solid var(--primary); box-shadow: 0 0 0 3px var(--primary-soft);
  animation: blink 2.4s steps(3) infinite;
}
.dl-mine { animation: bump .6s steps(5) 1s 2; }
.qr { position: relative; overflow: hidden; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .qr::after { content: ""; position: absolute; inset: -20%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.7) 50%, transparent 60%); transform: translateX(-100%); animation: qrshine 4.5s steps(14) infinite; pointer-events: none; }
}
@keyframes qrshine { 0%, 60% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* ============================================================== WINK */
.wink__face { position: relative; padding: 0; cursor: pointer; transition: transform .1s steps(2); }
.wink__face:hover { transform: rotate(-6deg); }
.wink__face:active { transform: translateY(3px); }
.wink__face .ico { grid-area: 1 / 1; }
.wink__face .w-wink { opacity: 0; }
.wink__face .w-open { animation: eyesA 5s steps(1) infinite; }
.wink__face .w-wink { animation: eyesB 5s steps(1) infinite; }
@keyframes eyesA { 0%, 84% { opacity: 1; } 85%, 96% { opacity: 0; } 97%, 100% { opacity: 1; } }
@keyframes eyesB { 0%, 84% { opacity: 0; } 85%, 96% { opacity: 1; } 97%, 100% { opacity: 0; } }
.wink__face.is-winking .w-open { animation: none; opacity: 0; }
.wink__face.is-winking .w-wink { animation: none; opacity: 1; }
.wink__face.is-winking { animation: wiggle .5s steps(4); }
.wink__heart { position: absolute; left: 50%; top: 10%; width: 14px !important; height: 14px !important; margin-left: -7px; color: var(--r-ultra); pointer-events: none; animation: heartUp 1s steps(8, end) forwards; animation-delay: var(--dl, 0ms); opacity: 0; }
@keyframes heartUp { 0% { opacity: 1; transform: translate(0, 0) scale(.6); } 100% { opacity: 0; transform: translate(var(--dx, 0), -70px) scale(1.2); } }
@media (prefers-reduced-motion: no-preference) {
  .wink__item { transition: transform .12s steps(2); }
  .wink__item:hover { transform: translateY(-3px) rotate(-.6deg); }
  .howcard, .radarcard, .pf, .plan { transition: transform .12s steps(2); }
  .howcard:hover, .plan:hover { transform: translateY(-3px); }
}

/* ============================================================ FOOTER */
.footer__wink .beat { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; color: var(--r-ultra); animation: beat 1.6s steps(2) infinite; }
@keyframes beat { 0%, 60%, 100% { transform: none; } 70% { transform: scale(1.3); } 80% { transform: scale(1); } 90% { transform: scale(1.2); } }
.footer__top { margin-top: 22px; display: flex; justify-content: flex-end; }
.totop { font-size: 16px; }
.totop .ico { width: 14px; height: 14px; }

/* =========================================================== PRIJZEN */
.plan__tag { animation: float 3.4s ease-in-out infinite; }
.plan--legend, .plan--forever { overflow: hidden; }
.plan--legend::after, .plan--forever::after {
  content: ""; position: absolute; inset: -40%; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.45) 49%, rgba(255,77,141,.2) 52%, transparent 58%);
  animation: holo 5s steps(20) infinite;
}
.plan--forever::after { background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.55) 49%, rgba(255,213,79,.25) 52%, transparent 58%); animation-delay: -2s; }

/* ================================================================ dark */
@media (prefers-color-scheme: dark) {
  .levels li.is-on { background: #3A3113; }
  .fmap { filter: brightness(.82); }
  .catch { background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); }
  .catchbtn__ball { background: #F4F6F8; }
  .tds { box-shadow: inset 0 3px 0 rgba(255,255,255,.2), inset 0 -5px 0 var(--t-shell2), 8px 8px 0 rgba(0, 0, 0, .45); }
  .callout { border-color: #000; }
}

/* ===================================================== reduced motion */
@media (prefers-reduced-motion: reduce) {
  .js .tier { transform: none !important; }
  .tier__flip, .cc { transition: none !important; }
  .pola, .pola.is-out, .pola[data-pos] { transition: none !important; }
  .pola.is-out { transform: translateY(16%); }
  .pola[data-pos="1"] { transform: translate(-46%, 22%) rotate(-8deg); }
  .pola[data-pos="2"] { transform: translate(46%, 25%) rotate(7deg); }
  .pola__blur, .pola__chem { transition: opacity .8s linear !important; }
  .btn:hover, .gtile:hover, .fchip:hover, .howbtn:hover, .catchbtn:hover { transform: none; }
  .scope__sweep { opacity: .5; }
  .blip { opacity: 1; }
  .topbar::before, .topbar__in { transition: none; }
}
@media print { .sndbtn, .hxtoast, .footer__top, .js-only { display: none !important; } }
.avcam__tray:empty::before { content: ""; position: absolute; left: 50%; top: 16%; width: 52%; aspect-ratio: 4 / 3.6; margin-left: -26%; border: 3px dashed var(--line); background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(154,164,176,.12) 8px 16px); }

/* =============================================================================
   Hero: kaartwaaier, sterrenhemel, scanlines en de intro (html.intro, gezet door js/boot.js)
   ============================================================================= */
.hero__sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.hero__grid { position: relative; z-index: 1; }
.hero__sky i { position: absolute; bottom: -24px; display: block; width: 14px; height: 14px; color: var(--r-ultra); opacity: 0; animation: skyUp 9s linear infinite; }
.hero__sky i .ico { width: 100%; height: 100%; }
.hero__sky i:nth-child(3n) { color: var(--r-legendary); width: 12px; height: 12px; }
.hero__sky i:nth-child(4n) { color: var(--primary); }
.hero__sky i:nth-child(5n) { color: var(--r-epic); width: 18px; height: 18px; }
.hero__sky .s1 { left: 4%; animation-delay: -1s; } .hero__sky .s2 { left: 14%; animation-delay: -5.5s; animation-duration: 11s; }
.hero__sky .s3 { left: 24%; animation-delay: -3s; } .hero__sky .s4 { left: 36%; animation-delay: -7.5s; animation-duration: 12s; }
.hero__sky .s5 { left: 47%; animation-delay: -2s; } .hero__sky .s6 { left: 55%; animation-delay: -8.5s; animation-duration: 10s; }
.hero__sky .s7 { left: 63%; animation-delay: -4.5s; } .hero__sky .s8 { left: 71%; animation-delay: -0.5s; animation-duration: 13s; }
.hero__sky .s9 { left: 79%; animation-delay: -6s; } .hero__sky .s10 { left: 86%; animation-delay: -2.5s; animation-duration: 10.5s; }
.hero__sky .s11 { left: 93%; animation-delay: -9s; } .hero__sky .s12 { left: 31%; animation-delay: -10s; animation-duration: 14s; }
@keyframes skyUp { 0% { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .55; } 80% { opacity: .4; } 100% { transform: translateY(-110vh) rotate(40deg); opacity: 0; } }
@media (max-width: 979px) { .hero__sky i { animation-duration: 12s; } }

/* scanlines on the DS screens */
.hero .screen::after, .final .screen::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,.035) 0 2px, transparent 2px 4px);
  animation: flicker 6s steps(1) infinite;
}
.hero .screen::before, .final .screen::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 18%; pointer-events: none; z-index: 3;
  background: linear-gradient(transparent, rgba(255,255,255,.12) 60%, transparent);
  animation: scanroll 7s linear infinite;
}
@keyframes flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .4; } 95% { opacity: .9; } 96% { opacity: .5; } }
@keyframes scanroll { 0% { transform: translateY(-120%); } 100% { transform: translateY(620%); } }
.hero .screen--top > *:not(.catch) { position: relative; z-index: 1; }

/* the hand of rarity cards, next to the catch button */
.catchrow { display: flex; align-items: center; gap: 14px; }
.hero__fan { position: relative; flex: 1 1 auto; height: 64px; min-width: 120px; max-width: 220px; pointer-events: none; }
.fc {
  --a: 0deg; position: absolute; left: 50%; bottom: -6px; width: 40px; height: 54px; margin-left: -20px;
  display: block; transform-origin: 50% 190%; transform: rotate(var(--a));
  border: 4px solid transparent; border-image: var(--fr) 3 fill / 4px stretch;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.22));
}
.fc i { display: grid; place-items: center; width: 100%; height: 100%; background: var(--l); border: 2px solid var(--d); color: var(--d); animation: breathe 3.2s ease-in-out infinite; position: relative; overflow: hidden; }
.fc .ico { width: 16px; height: 16px; }
.fc--common { --fr: var(--fr-r-common); --l: var(--r-common-lt); --d: var(--r-common-dk); --a: -32deg; }
.fc--rare { --fr: var(--fr-r-rare); --l: var(--r-rare-lt); --d: var(--r-rare-dk); --a: -16deg; }
.fc--epic { --fr: var(--fr-r-epic); --l: var(--r-epic-lt); --d: var(--r-epic-dk); --a: 0deg; }
.fc--legendary { --fr: var(--fr-r-legendary); --l: var(--r-legendary-lt); --d: var(--r-legendary-dk); --a: 16deg; }
.fc--ultra { --fr: var(--fr-r-ultra); --l: var(--r-ultra-lt); --d: var(--r-ultra-dk); --a: 32deg; }
.fc:nth-child(2) i { animation-delay: -.6s; } .fc:nth-child(3) i { animation-delay: -1.2s; } .fc:nth-child(4) i { animation-delay: -1.8s; } .fc:nth-child(5) i { animation-delay: -2.4s; }
.fc--ultra i::after, .fc--legendary i::after { content: ""; position: absolute; inset: -60%; background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.8) 46%, rgba(124,92,255,.45) 50%, rgba(55,224,200,.45) 55%, transparent 62%); animation: holo 2.6s steps(14) infinite; }
.fc--legendary i::after { background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 48%, rgba(255,240,184,.5) 53%, transparent 60%); animation-delay: -1s; }
@keyframes breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (min-width: 560px) { .hero__fan { height: 76px; } .fc { width: 50px; height: 68px; margin-left: -25px; } .fc .ico { width: 20px; height: 20px; } }
.catchrow:hover .fc, .catchbtn:focus-visible + .hero__fan .fc { transform: rotate(calc(var(--a) * 1.4)) translateY(-6px); }
.fc { transition: transform .25s cubic-bezier(.3,1.5,.6,1); }

/* the invitation to catch */
.js .catchbtn:not(.is-used) { animation: invite 1.6s steps(6, end) infinite; animation-delay: 1.2s; }
.js .catchbtn:not(.is-used) .catchbtn__ball { animation: wiggle .5s steps(4) infinite; animation-delay: 1.4s; }
@keyframes invite { 0%, 60%, 100% { transform: none; } 70% { transform: translateY(-4px) scale(1.04); } 80% { transform: none; } 90% { transform: translateY(-2px) scale(1.02); } }

/* the progress runner */
.topbar__runner { position: absolute; left: 0; top: -1px; width: 12px; height: 12px; margin-left: -6px; color: var(--r-ultra); pointer-events: none; opacity: 0; transition: opacity .2s; }
.topbar__runner .ico { width: 100%; height: 100%; animation: beat 1.2s steps(2) infinite; }
.topbar.is-condensed .topbar__runner { opacity: 1; }

/* "tap for sound" during the intro */
.introhint {
  position: absolute; z-index: 30; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 14px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-toast) 3 fill / var(--fw-sm) stretch;
  color: #fff; font: 600 15px/1.2 var(--font-pixel); cursor: pointer; white-space: nowrap;
  animation: blink 1s steps(2) infinite;
}
.introhint .ico { width: 16px; height: 16px; }
.introhint[hidden] { display: none; }

.wl { display: inline-block; }
.hx-intro .topbar__in { animation: fadeUp calc(var(--k) * 400ms) steps(4) both; animation-delay: calc(var(--k) * 700ms); }

/* =============================================================================
   HERO v2: synthwave-podium met een holokaart, schuine telefoons en dingen die eruit springen
   ============================================================================= */
.hero { position: relative; overflow: clip; color: #fff; background: #170A2E; border-bottom: 6px solid var(--bezel); isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero__glow { position: absolute; inset: -40%; background:
  radial-gradient(closest-side at 30% 35%, rgba(179,136,255,.55), transparent 70%),
  radial-gradient(closest-side at 70% 30%, rgba(255,77,141,.5), transparent 70%),
  radial-gradient(closest-side at 55% 70%, rgba(46,155,214,.45), transparent 70%),
  linear-gradient(180deg, #24104A 0%, #3A1260 45%, #12082A 100%);
  animation: glowSpin 40s linear infinite; }
@keyframes glowSpin { to { transform: rotate(360deg); } }
.hero__stars, .hero__stars--2 { position: absolute; left: 0; top: 0; width: 2px; height: 2px; background: transparent; animation: twinkle 3s steps(2) infinite; }
.hero__stars--2 { width: 3px; height: 3px; animation-duration: 4.4s; animation-delay: -1.3s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.hero__sun { position: absolute; left: 62%; bottom: 34%; width: min(46vw, 420px); aspect-ratio: 1; margin-left: calc(min(46vw, 420px) / -2); border-radius: 50%;
  background: repeating-linear-gradient(to bottom, transparent 0 58%, transparent 58% 100%), linear-gradient(#FFE08A 0%, #FF9F43 45%, #FF4D8D 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 68%, #000 68% 74%, transparent 74% 80%, #000 80% 85%, transparent 85% 91%, #000 91%);
  mask-image: linear-gradient(to bottom, #000 0 52%, transparent 52% 56%, #000 56% 63%, transparent 63% 68%, #000 68% 74%, transparent 74% 80%, #000 80% 85%, transparent 85% 91%, #000 91%);
  opacity: .55; filter: drop-shadow(0 0 40px rgba(255,77,141,.6)); }
.hero__floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 34%; perspective: 260px; perspective-origin: 50% 0%; overflow: hidden; border-top: 2px solid rgba(255,113,206,.9); box-shadow: 0 -10px 40px rgba(255,113,206,.45); background: linear-gradient(#2A0F4A, #12082A); }
.hero__lines { position: absolute; left: 0; right: 0; top: 0; height: 300%; transform-origin: 50% 0;
  background-image: linear-gradient(rgba(255,113,206,.7) 2px, transparent 2px), linear-gradient(90deg, rgba(1,205,254,.55) 2px, transparent 2px);
  background-size: 48px 48px; transform: rotateX(70deg); animation: floorRun 1.6s linear infinite; }
@keyframes floorRun { from { transform: rotateX(70deg) translateY(0); } to { transform: rotateX(70deg) translateY(48px); } }
.hero .hero__sky { z-index: 0; }
.hero .hero__sky i { color: #FF71CE; }
.hero .hero__sky i:nth-child(3n) { color: #FFD54F; } .hero .hero__sky i:nth-child(4n) { color: #01CDFE; } .hero .hero__sky i:nth-child(5n) { color: #B388FF; }

.hero__stage { display: grid; gap: 10px; padding-top: 26px; padding-bottom: 18px; grid-template-areas: "copy" "show" "more"; }
.hero__copy { grid-area: copy; position: relative; z-index: 2; }
.hero__show { grid-area: show; }
.hero__more { grid-area: more; position: relative; z-index: 2; }
.hero .eyebrow { color: #F5B8EB; font-size: 13px; letter-spacing: .18em; }
.hero .eyebrow::before { background: #FF71CE; box-shadow: 3px 3px 0 #B03A8C; }
.hero h1 { margin-top: 10px; }
.hero .wordmark { display: block; font-size: clamp(54px, 15.5vw, 132px); line-height: .9; font-weight: 700; letter-spacing: .02em; color: #fff; text-shadow: .05em .05em 0 #FF4D8D, .1em .1em 0 rgba(0,0,0,.35); }
.hero .wl { animation: wave 4.8s steps(4) infinite; animation-delay: calc(var(--li, 0) * 90ms); }
.hero .wl:nth-child(4n+1) { color: #FFF0B8; } .hero .wl:nth-child(4n+2) { color: #fff; } .hero .wl:nth-child(4n+3) { color: #C4E6FF; } .hero .wl:nth-child(4n) { color: #FFD3EC; }
@keyframes wave { 0%, 76%, 100% { transform: none; } 82% { transform: translateY(-.14em); } 88% { transform: translateY(.03em); } }
.hero .pitch { display: block; margin-top: 14px; font-size: clamp(24px, 5.6vw, 40px); line-height: 1.08; font-weight: 700; color: #FFE08A; text-shadow: 3px 3px 0 #7A1E6C; text-wrap: balance; }
.hero__cta { margin-top: 22px; display: grid; gap: 12px; max-width: 520px; }
.hero .btn--play { width: 100%; justify-content: flex-start; min-height: 68px; font-size: 22px; }
.btn--glow { position: relative; z-index: 0; }
.btn--glow::after { content: ""; position: absolute; inset: -9px; z-index: -1; border: 3px solid #57C2E4; box-shadow: 0 0 22px 6px rgba(87,194,228,.65); animation: glowPulse 1.8s steps(6) infinite; pointer-events: none; }
@keyframes glowPulse { 0%, 100% { opacity: .25; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.02); } }
.hero .stores { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hero .lede { margin-top: 6px; font: 400 17px/1.55 var(--font-text); color: #E6DCF7; max-width: 36em; text-wrap: pretty; }
.hero .agenote { margin-top: 12px; display: flex; align-items: center; gap: 10px; font: 400 14px/1.4 var(--font-text); color: #CBBEE6; }
.hero a:not(.btn) { color: #9FDCFF; }

/* the stage */
.hero__show { position: relative; height: 470px; perspective: 1100px; margin-inline: calc(var(--gutter) * -1); }
.hero__show .hp { position: absolute; width: 41%; max-width: 250px; top: 18px; z-index: 1; transition: transform .3s ease-out; }
.hero__show .p-back { left: 3%; }
.hero__show .p-front { right: 3%; top: 52px; }
.hero__show .phone-wrap { filter: drop-shadow(10px 14px 0 rgba(10, 3, 30, .45)); }
.hero__show .p-back .phone-wrap { animation: floatL 7s ease-in-out infinite; }
.hero__show .p-front .phone-wrap { animation: floatR 7s ease-in-out infinite; animation-delay: -3.5s; }
@keyframes floatL { 0%, 100% { transform: rotateY(26deg) rotateZ(-5deg) translateY(0); } 50% { transform: rotateY(22deg) rotateZ(-4deg) translateY(-12px); } }
@keyframes floatR { 0%, 100% { transform: rotateY(-26deg) rotateZ(5deg) translateY(0); } 50% { transform: rotateY(-22deg) rotateZ(4deg) translateY(-12px); } }
.hero__show .phone { padding: 12px 7px 9px; }

/* the holo card */
.holo { position: absolute; z-index: 3; left: 50%; top: 52%; width: 196px; margin-left: -98px; transform: translateY(-50%); cursor: pointer; }
.holo::before { content: ""; position: absolute; inset: -18%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--hg, rgba(255,77,141,.75)), transparent 75%); animation: glowPulse 2.6s ease-in-out infinite; }
.holo__card {
  --rc: #FF4D8D; --rd: #9C1F52; --rl: #FFB3CF; --fr: var(--fr-r-ultra);
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 8px; color: var(--bezel);
  border: 12px solid transparent; border-image: var(--fr) 3 fill / 12px stretch;
  transform: rotateX(var(--hx, 0deg)) rotateY(var(--hy, 0deg)); transform-style: preserve-3d; transition: transform .25s ease-out;
  animation: holoSway 6s ease-in-out infinite; overflow: hidden;
  filter: drop-shadow(10px 14px 0 rgba(10, 3, 30, .5));
}
@keyframes holoSway { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -12px; rotate: 3deg; } }
.holo__card.r-common { --rc: #9AA0A6; --rd: #5C6168; --rl: #DCDFE2; --fr: var(--fr-r-common); }
.holo__card.r-rare { --rc: #4FB6FF; --rd: #1E5FA8; --rl: #C4E6FF; --fr: var(--fr-r-rare); }
.holo__card.r-epic { --rc: #B388FF; --rd: #5B33B0; --rl: #E2D2FF; --fr: var(--fr-r-epic); }
.holo__card.r-legendary { --rc: #FFD54F; --rd: #A8781A; --rl: #FFF0B8; --fr: var(--fr-r-legendary); }
.holo__top { display: flex; justify-content: space-between; font: 700 10px/1 var(--font-pixel); letter-spacing: .1em; color: var(--rd); }
.holo__art { position: relative; display: block; border: 3px solid var(--rd); background: var(--rl); }
.holo__av { display: block; width: 100%; height: auto; aspect-ratio: 1; image-rendering: pixelated; }
.holo__name { font: 700 22px/1 var(--font-pixel); color: #fff; text-shadow: 2px 2px 0 var(--rd), -1px -1px 0 var(--rd), 1px -1px 0 var(--rd), -1px 1px 0 var(--rd); }
.holo__name small { font-size: 15px; }
.holo__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.holo__rar, .holo__vibe { display: inline-flex; align-items: center; gap: 3px; padding: 1px 5px; font: 700 10px/1.4 var(--font-pixel); }
.holo__rar { background: #fff; color: var(--rd); }
.holo__vibe { background: #FF5252; color: #fff; }
.holo__vibe .ico { width: 9px; height: 9px; }
.holo__stats { display: grid; gap: 3px; }
.st { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 6px; font: 600 10px/1 var(--font-pixel); color: var(--bezel); }
.st span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st i { display: block; height: 7px; background: rgba(255,255,255,.6); border: 2px solid var(--rd); overflow: hidden; }
.st b { display: block; height: 100%; background: var(--rd); transform-origin: left; transform: scaleX(var(--v, .9)); transition: transform .5s steps(6); }
.holo__xp { display: flex; align-items: center; gap: 4px; font: 700 13px/1 var(--font-pixel); color: var(--rd); }
.holo__xp .ico { width: 12px; height: 12px; }
.holo__foil { position: absolute; inset: -30%; pointer-events: none; mix-blend-mode: color-dodge; opacity: .38;
  background: linear-gradient(115deg, #ff71ce 0%, #01cdfe 18%, #05ffa1 34%, #fffb96 50%, #b967ff 66%, #ff71ce 84%);
  transform: translateX(calc(var(--hy, 0deg) / 1deg * 2%)); }
.holo__card.r-common .holo__foil, .holo__card.r-rare .holo__foil { opacity: .12; }
.holo__shine { position: absolute; inset: -50%; pointer-events: none; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.75) 49%, transparent 56%); animation: holo 3.4s steps(18) infinite; }
.holo__aura { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.holo__aura i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; background: var(--ac, #FFD54F); box-shadow: 0 0 8px var(--ac, #FFD54F); animation: orbit 6s linear infinite; }
.holo__aura i:nth-child(2) { --ac: #FF71CE; animation-delay: -1s; animation-duration: 7s; } .holo__aura i:nth-child(3) { --ac: #01CDFE; animation-delay: -2s; }
.holo__aura i:nth-child(4) { --ac: #fff; animation-delay: -3s; animation-duration: 8s; } .holo__aura i:nth-child(5) { --ac: #B388FF; animation-delay: -4s; } .holo__aura i:nth-child(6) { --ac: #05FFA1; animation-delay: -5s; animation-duration: 9s; }
@keyframes orbit { from { transform: rotate(0deg) translateX(150px) rotate(0deg) scale(1); } 50% { transform: rotate(180deg) translateX(120px) rotate(-180deg) scale(.6); } to { transform: rotate(360deg) translateX(150px) rotate(-360deg) scale(1); } }
.holo__card.is-spin { animation: holoSpin .9s steps(12, end); }
@keyframes holoSpin { from { transform: rotateY(0) scale(1); } 50% { transform: rotateY(360deg) scale(1.15); } to { transform: rotateY(720deg) scale(1); } }
.holo__burst { position: absolute; inset: 0; pointer-events: none; background: #fff; opacity: 0; }
.holo__card.is-spin .holo__burst { animation: flash .9s steps(6); }
.holo__plus { position: absolute; left: 50%; top: -6px; z-index: 5; transform: translateX(-50%); font: 700 22px/1 var(--font-pixel); color: #FFE08A; text-shadow: 2px 2px 0 #7A1E6C; white-space: nowrap; opacity: 0; pointer-events: none; }
.holo__plus.is-on { animation: plusUp 1.4s steps(10, end) forwards; }
@keyframes plusUp { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -10px) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -60px) scale(1); } }
.hero__show .toast { position: absolute; left: auto; right: 6%; top: 0; z-index: 4; font-size: 14px; min-height: 38px; }
.hero__show .catchrow { position: absolute; left: 0; right: 0; bottom: 6px; z-index: 4; margin: 0; display: flex; justify-content: center; }
.hero .catchbtn { box-shadow: 0 0 0 3px rgba(255,213,79,.35), 0 0 22px rgba(255,213,79,.5); }

/* things that pop out of the screens */
.pop { position: absolute; z-index: 2; pointer-events: none; }
.pop svg { display: block; width: 100%; height: 100%; }
.pop--cards { left: 18%; top: -6px; width: 0; height: 0; z-index: 0; }
.pop--cards .fc { animation: fanOut 5s cubic-bezier(.3,1.4,.6,1) infinite; }
.pop--cards .fc:nth-child(2) { animation-delay: .08s; } .pop--cards .fc:nth-child(3) { animation-delay: .16s; } .pop--cards .fc:nth-child(4) { animation-delay: .24s; } .pop--cards .fc:nth-child(5) { animation-delay: .32s; }
@keyframes fanOut { 0%, 8% { transform: translateY(70px) rotate(0) scale(.6); opacity: 0; } 22%, 78% { transform: rotate(calc(var(--a) * 1.5)) translateY(-14px); opacity: 1; } 92%, 100% { transform: translateY(70px) rotate(0) scale(.6); opacity: 0; } }
.pop--cards .fc { transform-origin: 50% 200%; }
.pop--xp { right: 6%; top: 34%; font: 700 20px/1 var(--font-pixel); color: #FFE08A; text-shadow: 2px 2px 0 #7A1E6C, 0 0 12px rgba(255,213,79,.6); white-space: nowrap; animation: xpPop 3.6s steps(10, end) infinite; animation-delay: 1.2s; }
@keyframes xpPop { 0%, 10% { opacity: 0; transform: translateY(20px) scale(.5); } 25% { opacity: 1; transform: translateY(-10px) scale(1.15); } 60% { opacity: 1; transform: translateY(-40px) scale(1); } 75%, 100% { opacity: 0; transform: translateY(-60px); } }
.pop--bottle { left: 6%; bottom: 76px; width: 30px; height: 62px; }
.pop--bottle svg { animation: bottleSpin 4s cubic-bezier(.2,.8,.3,1) infinite; }
@keyframes bottleSpin { 0% { transform: rotate(0); } 55%, 100% { transform: rotate(1170deg); } }
.pop--bomb { right: 10%; bottom: 96px; width: 52px; height: 57px; }
.pop--bomb svg { animation: bombShake 2.2s steps(2) infinite; }
@keyframes bombShake { 0%, 70%, 100% { transform: none; } 75% { transform: translate(-2px, 1px) rotate(-6deg); } 80% { transform: translate(2px, -1px) rotate(5deg); } 85% { transform: translate(-1px, 0) rotate(-3deg); } }
.spark { position: absolute; right: 2px; top: -6px; width: 10px; height: 10px; background: #FFD54F; box-shadow: 0 0 10px 3px #FF9F43; animation: sparkle .3s steps(2) infinite; }
@keyframes sparkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.5) rotate(45deg); opacity: .6; } }
.pop--dice { left: 30%; bottom: 40px; display: flex; gap: 8px; }
.die { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; width: 30px; height: 30px; padding: 4px; background: #fff; border: 3px solid var(--bezel); box-shadow: 3px 3px 0 rgba(0,0,0,.3); animation: tumble 2.8s steps(8, end) infinite; }
.die b { width: 100%; height: 100%; background: var(--bezel); }
.d5 b:nth-child(1) { grid-area: 1 / 1; } .d5 b:nth-child(2) { grid-area: 1 / 3; } .d5 b:nth-child(3) { grid-area: 2 / 2; } .d5 b:nth-child(4) { grid-area: 3 / 1; } .d5 b:nth-child(5) { grid-area: 3 / 3; }
.d2 b:nth-child(1) { grid-area: 1 / 3; } .d2 b:nth-child(2) { grid-area: 3 / 1; }
.d2 { animation-delay: -.4s; background: #FFE08A; }
@keyframes tumble { 0% { transform: translate(-40px, -50px) rotate(-200deg); opacity: 0; } 15% { opacity: 1; } 35% { transform: translate(0, 0) rotate(0); } 40% { transform: translate(0, -8px) rotate(8deg); } 45%, 85% { transform: none; opacity: 1; } 100% { transform: translate(10px, 10px); opacity: 0; } }
.pop--hearts { right: 30%; top: 8%; display: flex; gap: 10px; color: #FF4D8D; }
.pop--hearts svg { width: 18px; height: 18px; animation: heartBob 2.4s ease-in-out infinite; }
.pop--hearts svg:nth-child(2) { color: #FF71CE; width: 12px; height: 12px; animation-delay: -.8s; }
.pop--hearts svg:nth-child(3) { color: #FFD54F; width: 14px; height: 14px; animation-delay: -1.6s; }
@keyframes heartBob { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-12px) rotate(8deg); } }

/* ticker */
.ticker { position: relative; z-index: 2; overflow: hidden; background: #0D0620; border-top: 3px solid #FF71CE; box-shadow: 0 -6px 24px rgba(255,113,206,.25); }
.ticker__track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__row { display: flex; }
.tk { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font: 700 15px/1 var(--font-pixel); color: #FFE08A; white-space: nowrap; border-right: 2px dotted rgba(255,113,206,.4); }
.tk:nth-child(3n+2) { color: #9FE7FF; } .tk:nth-child(3n) { color: #FFB3CF; }
.tk .ico { width: 14px; height: 14px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* cursor sparkles (desktop) */
.trail { position: fixed; z-index: 80; width: 8px; height: 8px; margin: -4px 0 0 -4px; pointer-events: none; background: var(--tc, #FFD54F); box-shadow: 0 0 6px var(--tc, #FFD54F); animation: trail .7s steps(6, end) forwards; }
@keyframes trail { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--tx, 0), 18px) scale(.2); } }

@media (min-width: 560px) {
  .hero__show { height: 540px; margin-inline: 0; }
  .holo { width: 220px; margin-left: -110px; }
}
@media (min-width: 980px) {
  .hero__stage { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-template-rows: auto 1fr; grid-template-areas: "copy show" "more show"; column-gap: 28px; padding-top: 52px; padding-bottom: 40px; }
  .hero__show { height: 640px; }
  .hero__show .hp { width: 230px; top: 40px; }
  .hero__show .p-back { left: 0; }
  .hero__show .p-front { right: 0; top: 90px; }
  .holo { width: 240px; margin-left: -120px; top: 50%; }
  .holo__name { font-size: 26px; }
  .st { font-size: 11px; grid-template-columns: 74px 1fr; }
  .hero__more { align-self: start; }
  .pop--bottle { width: 38px; height: 80px; }
  .pop--bomb { width: 62px; height: 68px; }
}
@media (max-width: 420px) {
  .hero .stores .btn { padding-inline: 10px; }
  .hero__show .hp { width: 42%; }
  .holo { width: 176px; margin-left: -88px; }
  .holo__name { font-size: 19px; }
  .st { grid-template-columns: 54px 1fr; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__show .p-back .phone-wrap { transform: rotateY(24deg) rotateZ(-4deg); }
  .hero__show .p-front .phone-wrap { transform: rotateY(-24deg) rotateZ(4deg); }
  .pop--cards .fc { opacity: 1; transform: rotate(calc(var(--a) * 1.5)) translateY(-14px); }
  .pop--xp, .die { opacity: 1; }
  .holo__card { transition: none; }
}

/* -------------------------------------------------------------- INTRO */
.hx-intro { --k: 1; }
.hx-intro--short { --k: .22; }
.hx-intro .hero::before { content: ""; position: absolute; inset: 0; z-index: 20; background: #07030F; pointer-events: none; animation: bootBg calc(var(--k) * 900ms) steps(8, end) both; }
.hx-intro .hero::after { content: ""; position: absolute; left: 0; right: 0; top: 40vh; height: 6px; margin-top: -3px; z-index: 21; background: #fff; pointer-events: none; box-shadow: 0 0 24px 8px rgba(255,113,206,.9); animation: bootLine calc(var(--k) * 850ms) steps(9, end) both; }
@keyframes bootBg { 0%, 45% { opacity: 1; } 100% { opacity: 0; } }
@keyframes bootLine { 0% { transform: scaleX(0); opacity: 1; } 30% { transform: scaleX(1); opacity: 1; } 60% { transform: scaleX(1) scaleY(18); opacity: .7; } 100% { transform: scaleX(1) scaleY(60); opacity: 0; } }
.hx-intro .hero .eyebrow { animation: fadeUp calc(var(--k) * 300ms) steps(4) both; animation-delay: calc(var(--k) * 550ms); }
.hx-intro .hero .wl { animation: letterIn calc(var(--k) * 300ms) steps(4, end) both; animation-delay: calc(var(--k) * (600ms + var(--li, 0) * 70ms)); }
@keyframes letterIn { 0% { opacity: 0; transform: translateY(-1em) scale(2); } 60% { opacity: 1; transform: translateY(.08em) scale(.92); } 100% { opacity: 1; transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hx-intro .hero .pitch { animation: fadeUp calc(var(--k) * 420ms) steps(6) both; animation-delay: calc(var(--k) * 1250ms); }
.hx-intro .hero .btn--play { animation: popIn calc(var(--k) * 420ms) cubic-bezier(.3,1.6,.6,1) both; animation-delay: calc(var(--k) * 1450ms); }
.hx-intro .hero .stores .btn { animation: popIn calc(var(--k) * 420ms) cubic-bezier(.3,1.6,.6,1) both; animation-delay: calc(var(--k) * 1600ms); }
.hx-intro .hero .stores .btn + .btn { animation-delay: calc(var(--k) * 1700ms); }
.hx-intro .hero .hp { animation: phoneUp calc(var(--k) * 650ms) cubic-bezier(.25,1.3,.5,1) both; animation-delay: calc(var(--k) * 900ms); }
.hx-intro .hero .p-front { animation-delay: calc(var(--k) * 1050ms); }
@keyframes phoneUp { from { opacity: 0; transform: translateY(220px); } to { opacity: 1; transform: none; } }
.hx-intro .hero .holo { animation: holoIn calc(var(--k) * 800ms) cubic-bezier(.25,1.3,.5,1) both; animation-delay: calc(var(--k) * 1250ms); }
@keyframes holoIn { from { opacity: 0; transform: translateY(-50%) scale(.1) rotate(-540deg); } to { opacity: 1; transform: translateY(-50%); } }
.hx-intro .hero .pop { animation: popOut calc(var(--k) * 520ms) cubic-bezier(.3,1.6,.6,1) both; animation-delay: calc(var(--k) * 1900ms); }
.hx-intro .hero .pop--bomb { animation-delay: calc(var(--k) * 2000ms); } .hx-intro .hero .pop--dice { animation-delay: calc(var(--k) * 2100ms); } .hx-intro .hero .pop--hearts { animation-delay: calc(var(--k) * 2200ms); }
@keyframes popOut { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: none; } }
.hx-intro .hero .toast, .hx-intro .hero .catchrow { animation: popIn calc(var(--k) * 400ms) steps(5, end) both; animation-delay: calc(var(--k) * 2250ms); }
.hx-intro .hero .hero__more { animation: fadeUp calc(var(--k) * 400ms) steps(5) both; animation-delay: calc(var(--k) * 1900ms); }
.hx-intro .hero .ticker { animation: fadeUp calc(var(--k) * 400ms) steps(5) both; animation-delay: calc(var(--k) * 2100ms); }
.hx-intro .hero .hero__bg { animation: bgIn calc(var(--k) * 900ms) linear both; animation-delay: calc(var(--k) * 300ms); }
@keyframes bgIn { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
.hero__stars { box-shadow: 663px 154px 0 #FFB3CF, 1333px 49px 0 #fff, 1097px 96px 0 #57C2E4, 1193px 59px 0 #FFD54F, 76px 88px 0 #FFB3CF, 856px 71px 0 #FFD54F, 185px 564px 0 #FFB3CF, 121px 846px 0 #fff, 457px 645px 0 #fff, 1181px 599px 0 #FFB3CF, 101px 226px 0 #fff, 1140px 879px 0 #FFD54F, 593px 429px 0 #FFD54F, 1107px 120px 0 #57C2E4, 1147px 835px 0 #FFD54F, 211px 595px 0 #FFD54F, 762px 99px 0 #fff, 1155px 61px 0 #FFD54F, 1016px 696px 0 #FFB3CF, 1591px 321px 0 #FFB3CF, 1199px 464px 0 #57C2E4, 613px 254px 0 #FFD54F, 1431px 798px 0 #FFD54F, 167px 588px 0 #57C2E4, 1075px 506px 0 #57C2E4, 1493px 459px 0 #57C2E4, 1247px 74px 0 #fff, 1048px 428px 0 #FFD54F, 1550px 350px 0 #FFD54F, 1001px 431px 0 #fff, 1368px 79px 0 #57C2E4, 696px 711px 0 #57C2E4, 1217px 508px 0 #FFB3CF, 140px 860px 0 #fff, 552px 485px 0 #fff, 124px 748px 0 #57C2E4, 1325px 591px 0 #FFB3CF, 582px 733px 0 #FFB3CF, 1369px 355px 0 #fff, 945px 363px 0 #FFD54F, 1251px 119px 0 #FFB3CF, 120px 223px 0 #57C2E4, 264px 756px 0 #FFD54F, 814px 400px 0 #FFB3CF, 165px 170px 0 #FFB3CF, 822px 562px 0 #57C2E4, 280px 838px 0 #FFB3CF, 1126px 285px 0 #FFB3CF, 734px 699px 0 #FFB3CF, 472px 154px 0 #fff, 360px 154px 0 #FFD54F, 1348px 238px 0 #fff, 993px 851px 0 #FFD54F, 538px 288px 0 #fff, 298px 429px 0 #57C2E4, 1248px 579px 0 #57C2E4, 257px 707px 0 #fff, 935px 891px 0 #FFB3CF, 815px 408px 0 #FFB3CF, 212px 493px 0 #FFB3CF, 127px 195px 0 #fff, 427px 451px 0 #FFD54F, 225px 348px 0 #fff, 209px 0px 0 #FFD54F, 1098px 103px 0 #57C2E4, 1256px 26px 0 #fff, 425px 628px 0 #FFB3CF, 304px 649px 0 #57C2E4, 711px 616px 0 #57C2E4, 971px 125px 0 #fff; }
.hero__stars--2 { box-shadow: 999px 477px 0 #FFB3CF, 990px 319px 0 #fff, 295px 104px 0 #57C2E4, 1516px 271px 0 #FFB3CF, 1417px 165px 0 #fff, 420px 540px 0 #57C2E4, 300px 706px 0 #fff, 1552px 540px 0 #57C2E4, 1316px 884px 0 #fff, 1425px 865px 0 #57C2E4, 1061px 375px 0 #FFD54F, 728px 790px 0 #FFD54F, 1090px 554px 0 #57C2E4, 1303px 228px 0 #FFD54F, 490px 837px 0 #FFB3CF, 1515px 822px 0 #FFD54F, 409px 530px 0 #FFB3CF, 728px 748px 0 #fff, 57px 809px 0 #57C2E4, 967px 265px 0 #FFD54F, 1418px 619px 0 #57C2E4, 915px 827px 0 #57C2E4, 746px 82px 0 #FFD54F, 209px 232px 0 #FFB3CF, 402px 345px 0 #FFD54F, 988px 639px 0 #fff, 981px 668px 0 #57C2E4, 1317px 86px 0 #fff, 795px 801px 0 #FFD54F, 979px 182px 0 #FFB3CF, 1302px 340px 0 #fff, 1478px 405px 0 #FFB3CF, 822px 761px 0 #fff, 1484px 162px 0 #FFD54F, 260px 28px 0 #FFD54F, 1209px 476px 0 #FFD54F, 1252px 846px 0 #FFB3CF, 1346px 358px 0 #FFD54F, 1123px 561px 0 #FFD54F, 43px 14px 0 #fff; }
.wl[data-i="1"] { --li: 1; } .wl[data-i="2"] { --li: 2; } .wl[data-i="3"] { --li: 3; } .wl[data-i="4"] { --li: 4; } .wl[data-i="5"] { --li: 5; } .wl[data-i="6"] { --li: 6; } .wl[data-i="7"] { --li: 7; }
.hero__copy { container-type: inline-size; }
.hero .wordmark { font-size: clamp(48px, 17.4cqi, 124px); }
.hero__more .lede, .hero__more .agenote { position: relative; }
.hero__more { padding: 12px 14px; background: rgba(13, 6, 32, .62); border-left: 4px solid #FF71CE; box-shadow: 6px 6px 0 rgba(0,0,0,.25); }
.hero__more .lede { margin-top: 0; }
@media (min-width: 980px) { .hero__floor { height: 24%; } .hero__more { margin-top: 18px; max-width: 560px; } }
@media (max-width: 559px) { .pop--dice { left: 4%; bottom: 128px; } .pop--bottle { left: auto; right: 4%; bottom: 40px; } .pop--bomb { right: 4%; bottom: 150px; } }

/* =============================================================================
   GAME REEL: korte scènes uit echte spellen, om de 2,4 s een andere (js: .is-on)
   Zonder JS of met reduced motion: een statisch raster met het slotbeeld van elke scène.
   ============================================================================= */
.reel { position: relative; padding: 46px 0 40px; color: #fff; background-color: #12082A; background-image: linear-gradient(rgba(255,113,206,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(255,113,206,.08) 1px, transparent 1px); background-size: 24px 24px; border-bottom: 6px solid #000; overflow: clip; }
.reel__head { text-align: center; margin-bottom: 18px; }
.reel .eyebrow { color: #F5B8EB; }
.reel .eyebrow::before { background: #01CDFE; box-shadow: 3px 3px 0 #1E5CB3; }
.reel__title { margin-top: 8px; font: 700 clamp(24px, 4.4vw, 40px)/1.1 var(--font-pixel); color: #FFE08A; text-shadow: 3px 3px 0 #7A1E6C; text-wrap: balance; }
.reel__screen { position: relative; max-width: 980px; margin-inline: auto; border: 8px solid #05030B; border-radius: 16px; background: #0D0620; box-shadow: 0 0 0 3px #3A1F5C, 0 0 40px rgba(255,113,206,.35), 10px 12px 0 rgba(0,0,0,.4); overflow: hidden; }
.reel__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.reel__scan { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient(rgba(0,0,0,.18) 0 2px, transparent 2px 4px); }
.scene { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.scene__btn { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: var(--sbg, #1E1440); color: #fff; font: inherit; cursor: pointer; overflow: hidden; }
.scene__btn:focus-visible { outline: 4px dashed #FFE08A; outline-offset: -8px; }
.scene__art { position: absolute; inset: 0 0 52px; display: block; }
.scene__art > * { position: absolute; }
.scene__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 52px; padding: 8px 12px; background: rgba(5, 3, 11, .78); border-top: 3px solid rgba(255,255,255,.12); text-align: left; }
.scene__cap b { font: 700 18px/1.1 var(--font-pixel); color: #fff; margin-right: auto; }
.scene__how { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font: 700 13px/1.3 var(--font-pixel); color: #12082A; background: #FFE08A; border: 2px solid #A8781A; }
.scene__how .ico { width: 10px; height: 10px; }
.scene__btn:hover .scene__how { background: #fff; }
.scene .mode { font-size: 12px; }

/* reel mode: one scene at a time */
.reel.is-on .reel__screen { aspect-ratio: 4 / 3.3; }
.reel.is-on .reel__list { display: block; position: absolute; inset: 0; }
.reel.is-on .scene { position: absolute; inset: 0; aspect-ratio: auto; visibility: hidden; opacity: 0; }
.reel.is-on .scene.is-active { visibility: visible; opacity: 1; z-index: 2; }
.reel.is-on .scene.is-active.tr-zoom { animation: trZoom .32s steps(5, end); }
.reel.is-on .scene.is-active.tr-slide { animation: trSlide .3s steps(6, end); }
.reel.is-on .scene.is-active.tr-crt { animation: trCrt .34s steps(5, end); }
@keyframes trZoom { from { opacity: 0; transform: scale(1.35); } to { opacity: 1; transform: none; } }
@keyframes trSlide { from { transform: translateX(100%); } to { transform: none; } }
@keyframes trCrt { 0% { transform: scaleY(.02); opacity: 1; } 60% { transform: scaleY(1.04); } 100% { transform: none; } }
@media (min-width: 760px) { .reel.is-on .reel__screen { aspect-ratio: 16 / 9; } .scene__cap b { font-size: 22px; } }
.reel__bar { max-width: 980px; margin: 14px auto 0; display: flex; align-items: center; gap: 10px; }
.reel__pp { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: var(--fw-sm) solid transparent; border-image: var(--fr-toast) 3 fill / var(--fw-sm) stretch; color: #fff; cursor: pointer; }
.reel__pp .ico { width: 14px; height: 14px; }
.reel__pp .i-pl, .reel__pp[aria-pressed="true"] .i-pa { display: none; }
.reel__pp[aria-pressed="true"] .i-pl { display: block; }
.reel__dots { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; }
.rdot { position: relative; height: 28px; padding: 0; background: none; border: 0; cursor: pointer; }
.rdot::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 6px; background: rgba(255,255,255,.18); }
.rdot::after { content: ""; position: absolute; left: 0; right: 0; top: 11px; height: 6px; background: #FF71CE; transform: scaleX(0); transform-origin: left; }
.rdot.is-done::after { transform: none; background: rgba(255,113,206,.5); }
.rdot[aria-current="true"]::after { animation: dotFill var(--rd, 2400ms) linear forwards; }
.reel.is-paused .rdot[aria-current="true"]::after { animation-play-state: paused; }
@keyframes dotFill { to { transform: none; } }

/* ---- scene: Bom */
.sc-bomb { --sbg: radial-gradient(circle at 50% 45%, #5A1530, #22060F); }
.sb-bomb { left: 50%; top: 50%; width: 110px; height: 121px; margin: -64px 0 0 -55px; }
.sb-bomb svg { width: 100%; height: 100%; }
.fuse { right: 6px; top: -4px; width: 12px; height: 12px; background: #FFD54F; box-shadow: 0 0 12px 4px #FF9F43; animation: sparkle .25s steps(2) infinite; }
.sb-word { left: 50%; top: 50%; transform: translate(-50%, -50%); font: 700 clamp(40px, 9vw, 84px)/1 var(--font-pixel); color: #FFE08A; text-shadow: 4px 4px 0 #B03A3A, 8px 8px 0 rgba(0,0,0,.4); opacity: 0; }
.sb-flash { inset: 0; background: #fff; opacity: 0; }
.is-active .sb-bomb { animation: bombLive 2.2s steps(12, end) forwards; }
.is-active .sb-flash { animation: boomFlash 2.2s steps(6) forwards; }
.is-active .sb-word { animation: boomWord 2.2s cubic-bezier(.3,1.6,.6,1) forwards; }
.sc-bomb.is-active .scene__art { animation: shakeBig 2.2s steps(12) forwards; }
@keyframes bombLive { 0% { transform: scale(.8); } 30% { transform: scale(1) rotate(-3deg); } 50% { transform: scale(1.05) rotate(4deg); } 62% { transform: scale(1.15) rotate(-5deg); opacity: 1; } 66%, 100% { transform: scale(2); opacity: 0; } }
@keyframes boomFlash { 0%, 62% { opacity: 0; } 66% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes boomWord { 0%, 64% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 74% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(-6deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-4deg); } }
@keyframes shakeBig { 0%, 64%, 82%, 100% { transform: none; } 67% { transform: translate(-8px, 5px); } 70% { transform: translate(8px, -6px); } 73% { transform: translate(-6px, -4px); } 76% { transform: translate(5px, 6px); } 79% { transform: translate(-3px, 2px); } }
.reel:not(.is-on) .sb-word { opacity: 1; transform: translate(-50%, 10%) scale(.6); }
.reel:not(.is-on) .sb-bomb { transform: translateY(-14%) scale(.8); }

/* ---- scene: Draai de fles */
.sc-bottle { --sbg: radial-gradient(circle at 50% 45%, #145A52, #062421); }
.sbt-ring { left: 50%; top: 50%; width: 0; height: 0; }
.sbt-ring i { position: absolute; left: 0; top: 0; padding: 3px 8px; font: 700 15px/1 var(--font-pixel); font-style: normal; color: #12082A; background: #fff; border: 3px solid #25282D; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--ang)) translateY(-108px) rotate(calc(-1 * var(--ang))); }
.sbt-ring .n0 { --ang: 0deg; } .sbt-ring .n1 { --ang: 60deg; } .sbt-ring .n2 { --ang: 120deg; } .sbt-ring .n3 { --ang: 180deg; } .sbt-ring .n4 { --ang: 240deg; } .sbt-ring .n5 { --ang: 300deg; }
.sbt-bottle { left: 50%; top: 50%; width: 40px; height: 84px; margin: -42px 0 0 -20px; transform: rotate(120deg); }
.sbt-bottle svg { width: 100%; height: 100%; }
.is-active .sbt-bottle { animation: bottleRoll 1.8s cubic-bezier(.12,.7,.18,1) both; }
@keyframes bottleRoll { from { transform: rotate(0); } to { transform: rotate(1200deg); } }
.sbt-ring .n2 { background: #FFE08A; }
.is-active .sbt-ring .n2 { animation: pickName 2.2s steps(2) both; }
@keyframes pickName { 0%, 78% { background: #fff; transform: translate(-50%, -50%) rotate(var(--ang)) translateY(-108px) rotate(calc(-1 * var(--ang))); } 82%, 100% { background: #FFE08A; transform: translate(-50%, -50%) rotate(var(--ang)) translateY(-108px) rotate(calc(-1 * var(--ang))) scale(1.25); } }

/* ---- scene: Koningsbeker */
.sc-kings { --sbg: radial-gradient(circle at 50% 45%, #6A4A10, #2A1A04); }
.sk-card { left: 50%; top: 50%; width: 92px; height: 128px; margin: -58px 0 0 -46px; perspective: 600px; }
.sk-back, .sk-front { position: absolute; inset: 0; border: 4px solid #25282D; backface-visibility: hidden; box-shadow: 6px 6px 0 rgba(0,0,0,.35); transition: none; }
.sk-back { background: #C4332B repeating-linear-gradient(45deg, rgba(255,255,255,.2) 0 6px, transparent 6px 12px); transform: rotateY(180deg); }
.sk-front { display: grid; place-items: center; background: #FBFAF4; color: #C4332B; }
.sk-front b { position: absolute; left: 8px; top: 4px; font: 700 26px/1 var(--font-pixel); }
.sk-front .ico { width: 46px; height: 46px; }
.is-active .sk-back { animation: flipBack 2.2s steps(8) both; }
.is-active .sk-front { animation: flipFront 2.2s steps(8) both; }
@keyframes flipBack { 0%, 25% { transform: rotateY(0); } 45%, 100% { transform: rotateY(180deg); } }
@keyframes flipFront { 0%, 25% { transform: rotateY(-180deg); } 45%, 100% { transform: rotateY(0); } }
.sk-crown { left: 50%; top: 50%; width: 64px; height: 64px; margin: -138px 0 0 -32px; color: #FFD54F; filter: drop-shadow(3px 3px 0 #7A5A12); }
.sk-crown .ico { width: 100%; height: 100%; }
.is-active .sk-crown { animation: crownPop 2.2s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes crownPop { 0%, 50% { opacity: 0; transform: translateY(30px) scale(.3); } 65%, 100% { opacity: 1; transform: none; } }

/* ---- scene: Mexen */
.sc-mexen { --sbg: radial-gradient(circle at 50% 45%, #0F4A66, #04192A); }
.smx-dice { left: 50%; top: 50%; display: flex; gap: 18px; transform: translate(-50%, -40%); }
.smx-dice .die { width: 54px; height: 54px; padding: 7px; gap: 4px; animation: none; }
.d1 b { grid-area: 2 / 2; }
.smx-cup { left: 50%; top: 50%; width: 120px; height: 100px; margin: -80px 0 0 -60px; z-index: 2; background: linear-gradient(90deg, #5C1A2A, #8E2A3F 40%, #5C1A2A); border: 4px solid #25282D; border-radius: 6px 6px 18px 18px; opacity: 0; }
.is-active .smx-cup { animation: cupShake 2.2s steps(10) both; }
@keyframes cupShake { 0% { opacity: 1; transform: translateY(0) rotate(0); } 8% { transform: rotate(-12deg); } 16% { transform: rotate(10deg); } 24% { transform: rotate(-10deg); } 32% { transform: rotate(8deg); } 40% { opacity: 1; transform: translateY(0) rotate(0); } 55%, 100% { opacity: 0; transform: translateY(-120px); } }
.is-active .smx-dice .die { animation: dieLand 2.2s steps(8) both; }
.is-active .smx-dice .die + .die { animation-delay: .08s; }
@keyframes dieLand { 0%, 42% { opacity: 0; transform: rotate(-120deg) scale(.5); } 55% { opacity: 1; transform: rotate(14deg) scale(1.1); } 62%, 100% { opacity: 1; transform: none; } }
.smx-word { left: 50%; top: 14%; transform: translateX(-50%); font: 700 clamp(34px, 7vw, 60px)/1 var(--font-pixel); color: #FFE08A; text-shadow: 4px 4px 0 #1E5CB3; }
.is-active .smx-word { animation: wordPop 2.2s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes wordPop { 0%, 64% { opacity: 0; transform: translateX(-50%) scale(.2); } 76%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } }

/* ---- scene: Weerwolven */
.sc-ww { --sbg: linear-gradient(#2E3A8C, #121845); }
.sw-night { inset: 0; background: #05061A; opacity: .85; }
.is-active .sw-night { animation: nightFall 2.2s steps(8) both; }
@keyframes nightFall { 0%, 15% { opacity: 0; } 50%, 100% { opacity: .85; } }
.sw-moon { right: 16%; top: 12%; width: 54px; height: 54px; color: #FFF0B8; filter: drop-shadow(0 0 14px rgba(255,240,184,.8)); }
.sw-moon .ico { width: 100%; height: 100%; }
.is-active .sw-moon { animation: moonRise 2.2s steps(10) both; }
@keyframes moonRise { 0% { transform: translateY(90px); opacity: 0; } 50%, 100% { transform: none; opacity: 1; } }
.sw-town { left: 0; right: 0; bottom: 0; height: 34%; background:
  linear-gradient(#0A0B1E, #0A0B1E) 6% 100% / 16% 70% no-repeat, linear-gradient(#0A0B1E, #0A0B1E) 26% 100% / 12% 90% no-repeat,
  linear-gradient(#0A0B1E, #0A0B1E) 44% 100% / 20% 60% no-repeat, linear-gradient(#0A0B1E, #0A0B1E) 70% 100% / 14% 100% no-repeat,
  linear-gradient(#0A0B1E, #0A0B1E) 90% 100% / 18% 75% no-repeat; }
.sw-eyes { left: 30%; top: 46%; display: flex; gap: 14px; }
.sw-eyes--2 { left: 60%; top: 58%; gap: 10px; }
.sw-eyes i { width: 10px; height: 6px; background: #FF3B3B; box-shadow: 0 0 10px 3px rgba(255,59,59,.8); }
.is-active .sw-eyes { animation: eyesBlink 2.2s steps(2) both; }
.is-active .sw-eyes--2 { animation-delay: .25s; }
@keyframes eyesBlink { 0%, 55% { opacity: 0; } 60%, 72% { opacity: 1; } 74% { opacity: 0; } 78%, 100% { opacity: 1; } }

/* ---- scene: Undercover */
.sc-uc { --sbg: radial-gradient(circle at 50% 45%, #4A1E7A, #1A0A30); }
.su-row { left: 50%; top: 50%; display: flex; gap: clamp(8px, 2vw, 18px); transform: translate(-50%, -50%); }
.su-ph { display: grid; place-items: center; width: clamp(44px, 9vw, 70px); aspect-ratio: 9 / 16; background: #F4F6F8; border: 4px solid #25282D; border-radius: 6px; color: #FF4D8D; box-shadow: 4px 4px 0 rgba(0,0,0,.35); }
.su-ph .ico { width: 50%; height: auto; aspect-ratio: 1; }
.su-odd { color: #C9952A; }
.is-active .su-ph { animation: phIn 2.2s cubic-bezier(.3,1.6,.6,1) both; }
.is-active .su-ph:nth-child(2) { animation-delay: .1s; } .is-active .su-ph:nth-child(3) { animation-delay: .2s; } .is-active .su-ph:nth-child(4) { animation-delay: .3s; }
@keyframes phIn { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 20%, 100% { opacity: 1; transform: none; } }
.su-odd { box-shadow: 0 0 0 4px #FF5252, 0 0 24px #FF5252; }
.is-active .su-odd { animation: phIn 2.2s cubic-bezier(.3,1.6,.6,1) .2s both, oddOut 2.2s steps(4) .2s both; }
@keyframes oddOut { 0%, 60% { transform: none; } 70% { transform: translateY(-14px) rotate(-6deg) scale(1.1); } 80%, 100% { transform: translateY(-10px) rotate(4deg) scale(1.08); } }

/* ---- scene: Reactietest */
.sc-react { --sbg: #1A0A10; }
.sr-pad { inset: 10% 14% 8%; border: 5px solid #05030B; overflow: hidden; }
.sr-red, .sr-green { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; }
.sr-red { background: #D83B3B; } .sr-green { background: #3FB25A; }
.sr-red .ico, .sr-green .ico { width: 64px; height: 64px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.3)); }
.is-active .sr-green { animation: goGreen 2.2s steps(1) both; }
@keyframes goGreen { 0%, 52% { opacity: 0; } 53%, 100% { opacity: 1; } }
.sr-ms { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 6px 14px; font: 700 clamp(30px, 6vw, 52px)/1 var(--font-pixel); color: #12082A; background: #fff; border: 4px solid #25282D; box-shadow: 6px 6px 0 rgba(0,0,0,.35); }
.is-active .sr-ms { animation: wordPop2 2.2s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes wordPop2 { 0%, 66% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 78%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---- scene: Paardenrace */
.sc-horses { --sbg: linear-gradient(#2E7A3A, #164A1E); }
.sh-finish { right: 12%; top: 6%; bottom: 4%; width: 10px; background: repeating-linear-gradient(#fff 0 8px, #25282D 8px 16px); }
.sh-lane { left: 4%; width: 54px; height: 41px; }
.sh-lane svg { width: 100%; height: 100%; }
.sh-lane.l0 { top: 6%; } .sh-lane.l1 { top: 28%; } .sh-lane.l2 { top: 50%; } .sh-lane.l3 { top: 72%; }
.sh-lane { transform: translateX(var(--to)); }
.sh-lane.l0 { --to: 52vw; } .sh-lane.l1 { --to: 62vw; } .sh-lane.l2 { --to: 40vw; } .sh-lane.l3 { --to: 48vw; }
@media (min-width: 760px) { .sh-lane.l0 { --to: 520px; } .sh-lane.l1 { --to: 640px; } .sh-lane.l2 { --to: 420px; } .sh-lane.l3 { --to: 480px; } .sh-lane { width: 72px; height: 54px; } }
@media (max-width: 759px) { .sh-lane.l0 { --to: 44vw; } .sh-lane.l1 { --to: 58vw; } .sh-lane.l2 { --to: 34vw; } .sh-lane.l3 { --to: 40vw; } }
.is-active .sh-lane { animation: gallop 1.9s steps(14, end) both; }
.is-active .sh-lane.l1 { animation-duration: 1.7s; }
@keyframes gallop { from { transform: translateX(0) translateY(0); } 25% { transform: translateX(calc(var(--to) * .25)) translateY(-4px); } 50% { transform: translateX(calc(var(--to) * .5)) translateY(0); } 75% { transform: translateX(calc(var(--to) * .75)) translateY(-4px); } to { transform: translateX(var(--to)); } }
.sh-win { right: 4%; top: 22%; width: 40px; height: 40px; color: #FFD54F; filter: drop-shadow(2px 2px 0 #7A5A12); }
.sh-win .ico { width: 100%; height: 100%; }
.is-active .sh-win { animation: crownPop 2.2s cubic-bezier(.3,1.6,.6,1) both; }

/* ---- scene: Samensmelten */
.sc-merge { --sbg: radial-gradient(circle at 50% 45%, #2E1E6A, #0E0A26); }
.sg-a, .sg-b, .sg-c { left: 50%; top: 46%; width: 64px; height: 64px; margin: -32px 0 0 -32px; color: #9AA0A6; }
.sg-a .ico, .sg-b .ico, .sg-c .ico { width: 100%; height: 100%; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.35)); }
.sg-a, .sg-b { opacity: 0; }
.is-active .sg-a { animation: gemL 2.2s steps(6) both; } .is-active .sg-b { animation: gemR 2.2s steps(6) both; }
@keyframes gemL { 0% { opacity: 1; transform: translateX(-130px); } 20% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; } }
@keyframes gemR { 0% { opacity: 1; transform: translateX(130px); } 20% { opacity: 1; transform: none; } 22%, 100% { opacity: 0; } }
.sg-c { opacity: 0; } .sg-c.c3 { opacity: 1; width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.sg-c.c0 { color: #9AA0A6; } .sg-c.c1 { color: #4FB6FF; } .sg-c.c2 { color: #B388FF; } .sg-c.c3 { color: #FFD54F; filter: drop-shadow(0 0 16px rgba(255,213,79,.8)); }
.is-active .sg-c.c0 { animation: gemStep 2.2s steps(4) both; --g0: 21%; --g1: 38%; }
.is-active .sg-c.c1 { animation: gemStep2 2.2s steps(4) both; }
.is-active .sg-c.c2 { animation: gemStep3 2.2s steps(4) both; }
.is-active .sg-c.c3 { animation: gemStep4 2.2s cubic-bezier(.3,1.6,.6,1) both; }
@keyframes gemStep { 0%, 20% { opacity: 0; } 22% { opacity: 1; transform: scale(1.3); } 30%, 36% { opacity: 1; transform: none; } 38%, 100% { opacity: 0; } }
@keyframes gemStep2 { 0%, 36% { opacity: 0; } 38% { opacity: 1; transform: scale(1.4); } 46%, 52% { opacity: 1; transform: none; } 54%, 100% { opacity: 0; } }
@keyframes gemStep3 { 0%, 52% { opacity: 0; } 54% { opacity: 1; transform: scale(1.5); } 62%, 68% { opacity: 1; transform: none; } 70%, 100% { opacity: 0; } }
@keyframes gemStep4 { 0%, 68% { opacity: 0; transform: scale(.4); } 76%, 100% { opacity: 1; transform: none; } }
.sg-word { left: 50%; bottom: 6%; transform: translateX(-50%); font: 700 clamp(22px, 4.6vw, 36px)/1 var(--font-pixel); color: #FFD54F; text-shadow: 3px 3px 0 #7A5A12; }
.is-active .sg-word { animation: wordPop 2.2s cubic-bezier(.3,1.6,.6,1) both; animation-delay: .1s; }

/* ---- scene: Liefdestoren */
.sc-stack { --sbg: linear-gradient(#1B3E6A, #0A1A33); }
.ss-tower { left: 50%; bottom: 0; width: 120px; height: 100%; margin-left: -60px; }
.ss-tower i { position: absolute; left: 0; width: 120px; height: 28px; border: 4px solid #25282D; }
.ss-tower .t0 { bottom: 0; background: #E0584F; } .ss-tower .t1 { bottom: 28px; background: #FF6FA5; left: 4px; width: 112px; }
.ss-tower .t2 { bottom: 56px; background: #B388FF; left: 4px; width: 112px; } .ss-tower .t3 { bottom: 84px; background: #4FB6FF; left: 8px; width: 104px; }
.ss-tower .t4 { bottom: 112px; background: #37E0C8; left: 8px; width: 104px; } .ss-tower .t5 { bottom: 140px; background: #FFD54F; left: 8px; width: 104px; box-shadow: 0 0 18px #FFD54F; }
.is-active .ss-tower i { animation: blockDrop 2.2s steps(5, end) both; }
.is-active .ss-tower .t1 { animation-delay: .2s; } .is-active .ss-tower .t2 { animation-delay: .4s; } .is-active .ss-tower .t3 { animation-delay: .6s; } .is-active .ss-tower .t4 { animation-delay: .8s; } .is-active .ss-tower .t5 { animation-delay: 1s; }
@keyframes blockDrop { 0% { opacity: 0; transform: translateY(-260px); } 10% { opacity: 1; } 18% { transform: translateY(6px); } 22%, 100% { opacity: 1; transform: none; } }
.ss-word { left: 50%; top: 22%; transform: translateX(-50%); font: 700 clamp(26px, 5vw, 44px)/1 var(--font-pixel); color: #FFE08A; text-shadow: 3px 3px 0 #B03A8C; white-space: nowrap; }
.is-active .ss-word { animation: wordPop 2.2s cubic-bezier(.3,1.6,.6,1) both; }

/* ---- scene: Hartjes Vangen */
.sc-hearts { --sbg: linear-gradient(#5A1A4A, #22081E); }
.shh { top: -10%; width: 30px; height: 30px; color: #FF4D8D; }
.shh .ico { width: 100%; height: 100%; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.3)); }
.shh.h0 { left: 20%; } .shh.h1 { left: 34%; } .shh.h2 { left: 48%; color: #FFD54F; } .shh.h3 { left: 62%; } .shh.h4 { left: 76%; color: #B388FF; }
.shh { transform: translateY(var(--fall, 200px)); }
.is-active .shh { animation: heartFall 2.2s linear both; }
.is-active .shh.h1 { animation-delay: .25s; } .is-active .shh.h2 { animation-delay: .5s; } .is-active .shh.h3 { animation-delay: .75s; } .is-active .shh.h4 { animation-delay: 1s; }
@keyframes heartFall { 0% { opacity: 1; transform: translateY(0); } 52% { opacity: 1; transform: translateY(var(--fall, 200px)); } 56%, 100% { opacity: 0; transform: translateY(var(--fall, 200px)) scale(.4); } }
.sc-hearts .scene__art { --fall: calc(100% - 20px); }
.shh-basket { left: 14%; bottom: 6%; width: 22%; height: 26px; background: #C9952A repeating-linear-gradient(90deg, rgba(0,0,0,.18) 0 4px, transparent 4px 10px); border: 4px solid #7A5A12; border-top-width: 6px; }
.is-active .shh-basket { animation: basket 2.2s linear both; }
@keyframes basket { 0% { transform: translateX(0); } 18% { transform: translateX(10%); } 30% { transform: translateX(70%); } 42% { transform: translateX(130%); } 54% { transform: translateX(190%); } 66%, 100% { transform: translateX(250%); } }
.shh-score { right: 6%; top: 8%; font: 700 30px/1 var(--font-pixel); color: #FFE08A; text-shadow: 3px 3px 0 #B03A8C; }
.is-active .shh-score { animation: wordPop3 2.2s steps(4) both; }
@keyframes wordPop3 { 0%, 70% { opacity: 0; transform: scale(.3); } 80%, 100% { opacity: 1; transform: none; } }

/* ---- scene: Avondcamera */
.sc-avond { --sbg: radial-gradient(circle at 50% 30%, #3A2A4C, #120A1C); }
.sa-cam { left: 50%; top: 4%; width: 150px; margin-left: -75px; z-index: 2; }
.sa-cam svg { width: 100%; height: auto; display: block; }
.sa-flash { inset: 0; background: #fff; opacity: 0; z-index: 4; }
.is-active .sa-flash { animation: boomFlash2 2.2s steps(4) both; }
@keyframes boomFlash2 { 0%, 14% { opacity: 0; } 17% { opacity: .95; } 30%, 100% { opacity: 0; } }
.sa-pola { left: 50%; top: 32%; width: 132px; margin-left: -66px; padding: 8px 8px 22px; background: #FBFAF4; box-shadow: 6px 6px 0 rgba(0,0,0,.35); z-index: 1; transform: rotate(-4deg); }
.sa-pola svg { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.sa-pola i { position: absolute; left: 8px; right: 8px; top: 8px; aspect-ratio: 4 / 3; background: #3A3628; opacity: 0; }
.is-active .sa-pola { animation: polaOut 2.2s steps(8, end) both; }
.is-active .sa-pola i { animation: develop 2.2s linear both; }
@keyframes polaOut { 0%, 20% { transform: translateY(-80px) rotate(0); opacity: 0; } 24% { opacity: 1; } 50%, 100% { transform: rotate(-4deg); opacity: 1; } }
@keyframes develop { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .reel__list { display: grid !important; }
}
@media (min-width: 760px) {
  .reel.is-on :is(.sc-bomb, .sc-bottle, .sc-kings, .sc-uc) .scene__art { transform: scale(1.45); }
  .reel.is-on :is(.sc-mexen, .sc-merge) .scene__art { transform: scale(1.25); }
  .reel.is-on .sc-stack .scene__art { transform: scale(1.25); transform-origin: 50% 100%; }
  .reel.is-on .sc-bomb.is-active .scene__art { animation: none; }
  .reel.is-on .sc-bomb.is-active .scene__btn { animation: shakeBig 2.2s steps(12) forwards; }
  .shh { width: 44px; height: 44px; }
}
.ticker__row, .tk { flex: 0 0 auto; }
.ticker__track { will-change: transform; }
@keyframes bombLive { 0%, 24% { transform: none; } 28% { transform: translate(-2px, 0); } 32% { transform: translate(2px, 0); } 36%, 44% { transform: none; } 48% { transform: translate(-3px, 1px); } 52% { transform: translate(3px, -1px); } 56% { transform: translate(-3px, 0); } 60% { transform: translate(3px, 0); } 63% { transform: none; opacity: 1; } 66%, 100% { transform: scale(2); opacity: 0; } }
.sb-bomb svg, .pop svg, .sbt-bottle svg { image-rendering: pixelated; }

/* ---------------------------------------------- tile micro-animations */
@keyframes mSpin { 0% { transform: rotate(0); } 100% { transform: rotate(720deg); } }
@keyframes mShake { 0%, 100% { transform: none; } 20% { transform: translate(-2px, 1px) rotate(-8deg); } 40% { transform: translate(2px, -1px) rotate(8deg); } 60% { transform: translate(-2px, 0) rotate(-6deg); } 80% { transform: translate(2px, 1px) rotate(6deg); } }
@keyframes mRoll { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-10px) rotate(180deg); } 60% { transform: translateY(0) rotate(360deg); } 75% { transform: translateY(-4px) rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes mFlip { 0% { transform: rotateY(0); } 50% { transform: rotateY(180deg) scale(1.15); } 100% { transform: rotateY(360deg); } }
@keyframes mFall { 0% { transform: translateY(-18px); opacity: 0; } 40% { transform: translateY(2px); opacity: 1; } 60% { transform: translateY(-5px); } 100% { transform: none; } }
@keyframes mSlither { 0%, 100% { transform: none; } 25% { transform: translateX(-4px) skewX(10deg); } 50% { transform: translateX(4px) skewX(-10deg); } 75% { transform: translateX(-2px) skewX(6deg); } }
@keyframes mBeat { 0%, 100% { transform: none; } 20% { transform: scale(1.3); } 40% { transform: scale(.95); } 60% { transform: scale(1.18); } }
@keyframes mGallop { 0%, 100% { transform: none; } 25% { transform: translate(-3px, -4px) rotate(-6deg); } 50% { transform: translate(3px, 0); } 75% { transform: translate(0, -3px) rotate(4deg); } }
@keyframes mZap { 0%, 100% { transform: none; opacity: 1; } 20% { opacity: .2; } 40% { opacity: 1; transform: scale(1.25); } 60% { opacity: .3; } }
@keyframes mStack { 0% { transform: translateY(-14px); } 50% { transform: translateY(2px) scaleY(.85); } 100% { transform: none; } }
.gtile__ico { perspective: 200px; }
.gtile__ico .ico { --m: mBeat; --md: .7s; }
.gtile[data-tut="party-bottle"] .gtile__ico .ico, .gtile[data-tut="party-wheel"] .gtile__ico .ico, .gtile[data-tut="koppel-verwenrad"] .gtile__ico .ico { --m: mSpin; --md: 1s; }
.gtile[data-tut="party-bomb"] .gtile__ico .ico, .gtile[data-tut="arcade.whack"] .gtile__ico .ico, .gtile[data-tut="room-weerwolven"] .gtile__ico .ico { --m: mShake; --md: .6s; }
.gtile[data-tut="party-mexen"] .gtile__ico .ico, .gtile[data-tut="koppel-dobbelen"] .gtile__ico .ico { --m: mRoll; --md: .9s; }
.gtile:is([data-tut="party-kings"], [data-tut="party-hilo"], [data-tut="party-bus"], [data-tut="arcade.memory"], [data-tut="arcade.fmk"], [data-tut="arcade.guess"], [data-tut="koppel-rollen"], [data-tut="koppel-bonnen"], [data-tut="room-undercover"]) .gtile__ico .ico { --m: mFlip; --md: .8s; }
.gtile:is([data-tut="arcade.hearts"], [data-tut="arcade.merge"], [data-tut="arcade.cupid"], [data-tut="koppel-fantasie"]) .gtile__ico .ico { --m: mFall; --md: .7s; }
.gtile:is([data-tut="arcade.snake"], [data-tut="arcade.swipe"], [data-tut="room-tekenen"]) .gtile__ico .ico { --m: mSlither; --md: .7s; }
.gtile:is([data-tut="party-horses"], [data-tut="koppel-ganzenbord"]) .gtile__ico .ico { --m: mGallop; --md: .6s; }
.gtile:is([data-tut="room-reactie"], [data-tut="arcade.breaker"], [data-tut="arcade.simon"]) .gtile__ico .ico { --m: mZap; --md: .6s; }
.gtile:is([data-tut="arcade.stack"], [data-tut="room-quiz"]) .gtile__ico .ico { --m: mStack; --md: .5s; }
@media (prefers-reduced-motion: no-preference) {
  .gtile:hover .gtile__ico .ico, .gtile:focus-visible .gtile__ico .ico, .gtile.is-play .gtile__ico .ico { animation: var(--m) var(--md) steps(8, end) 1; }
  .gtile:hover .gtile__ico .ico { animation-iteration-count: infinite; }
  .gtile.is-play .gtile__ico .ico { animation-delay: var(--pd, 0ms); }
  .gtile.is-shuffle { animation: shuffleIn .42s cubic-bezier(.3,1.5,.6,1) both; animation-delay: var(--sd, 0ms); }
}
@keyframes shuffleIn { from { opacity: 0; transform: translateY(-16px) rotate(-3deg) scale(.9); } to { opacity: 1; transform: none; } }
.gtile__ico { transition: transform .12s steps(2); }
.gtile:hover .gtile__ico { transform: scale(1.12) rotate(-4deg); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 0 16px var(--gc); }

/* ------------------------------------------------- big slot machine */
.slot__win { position: relative; height: 64px; border: 4px solid #000; background: #120A22; box-shadow: inset 0 0 0 3px #3A1F5C, inset 0 8px 16px rgba(0,0,0,.6); }
.slot__win::before, .slot__win::after { content: ""; position: absolute; left: -2px; right: -2px; height: 6px; background-image: radial-gradient(circle, #FFD54F 0 2px, transparent 2.5px); background-size: 14px 6px; animation: bulbs .6s steps(2) infinite; }
.slot__win::before { top: -9px; } .slot__win::after { bottom: -9px; animation-delay: -.3s; }
@keyframes bulbs { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.is-spinning .slot__win::before, .is-spinning .slot__win::after { animation-duration: .15s; }
.slot__reel { font-size: 24px; text-shadow: 2px 2px 0 #7A1E6C; }
.slot { gap: 16px 14px; padding-top: 6px; }
.slot__go { min-height: 56px; font-size: 18px; border-image-source: var(--fr-r-ultra); text-shadow: 1px 1px 0 rgba(0,0,0,.35); }
.slot__go .ico { width: 20px; height: 20px; }
.is-spinning .slot__go .ico { animation: mRoll .5s steps(6) infinite; }
.slot__win.is-win { animation: popIn .35s steps(5, end); box-shadow: inset 0 0 0 3px #FFD54F, 0 0 24px rgba(255,213,79,.7); }

/* ------------------------------------------- website XP HUD + achievements */
.hud { position: fixed; z-index: 70; right: 10px; top: 78px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; min-height: 32px;
  border: var(--fw-sm) solid transparent; border-image: var(--fr-toast) 3 fill / var(--fw-sm) stretch; color: #fff; font: 700 13px/1 var(--font-pixel);
  box-shadow: 4px 4px 0 rgba(0,0,0,.25); transform: translateX(140%); transition: transform .3s steps(5, end); pointer-events: none; }
.hud.is-on { transform: none; }
.hud > .ico { width: 14px; height: 14px; color: #FFD54F; }
.hud__bar { width: 46px; height: 8px; background: #33373E; border: 2px solid #000; overflow: hidden; }
.hud__bar i { display: block; height: 100%; background: #FFD54F; transform-origin: left; transform: scaleX(0); transition: transform .4s steps(6); }
.hud__n { color: #FFE08A; }
.hud__combo { color: #FF71CE; }
.hud__combo:empty { display: none; }
.hud.is-bump > .ico { animation: bump .4s steps(4); }
.hud__plus { position: absolute; right: 10px; top: 100%; font: 700 14px/1 var(--font-pixel); color: #FFE08A; text-shadow: 2px 2px 0 #7A1E6C; animation: hudPlus 1s steps(8, end) forwards; }
@keyframes hudPlus { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(26px); } }
@media (max-width: 520px) { .hud__bar { display: none; } .hud { top: 74px; } }
.achv { position: fixed; z-index: 92; left: 50%; top: 84px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 32px); padding: 8px 14px 8px 10px;
  border: var(--fw) solid transparent; border-image: var(--fr-gold) 3 fill / var(--fw) stretch; color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.35);
  box-shadow: 6px 6px 0 rgba(0,0,0,.25); transform: translate(-50%, -160%); transition: transform .35s cubic-bezier(.3,1.5,.6,1); }
.achv.is-on { transform: translate(-50%, 0); }
.achv .ico { width: 28px; height: 28px; flex: 0 0 auto; }
.achv b { display: block; font: 700 12px/1.2 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; opacity: .9; }
.achv span span { display: block; font: 700 16px/1.25 var(--font-pixel); }
@media (prefers-reduced-motion: reduce) { .hud, .achv { transition: none; } }

/* ---------------------------------------------- mobile: swipe, not scroll */
@media (max-width: 639px) {
  .steps, .tier-note, .how, .facts-grid, .wink__grid, .minis, .plans {
    display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 16px; scrollbar-width: none;
  }
  :is(.steps, .tier-note, .how, .facts-grid, .wink__grid, .minis, .plans)::-webkit-scrollbar { display: none; }
  :is(.steps, .tier-note, .how, .facts-grid, .wink__grid, .minis, .plans) > * { flex: 0 0 84%; scroll-snap-align: center; }
  .minis > * { flex-basis: 78%; }
  .gtiles { grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-template-columns: none; grid-auto-columns: 84%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 10px; }
  .gtiles::-webkit-scrollbar { display: none; }
  .gtiles > li { scroll-snap-align: start; }
  .gcat.panel { overflow: hidden; }
  .section { padding: 56px 0; }
  .feature + .feature { margin-top: 56px; }
  .section-head { margin-bottom: 24px; }
  .swipe-hint { display: flex; }
}
.more > summary { display: none; }
@media (max-width: 639px) {
  .more > summary { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; min-height: 40px; padding: 2px 12px; cursor: pointer; list-style: none;
    border: var(--fw-sm) solid transparent; border-image: var(--fr-tab) 3 fill / var(--fw-sm) stretch; color: var(--primary-dk); font: 700 14px/1 var(--font-pixel); }
  .dark .more > summary { color: #1B73A8; }
  .more > summary::-webkit-details-marker { display: none; }
  .more > summary .ico { width: 10px; height: 10px; transform: rotate(90deg); transition: transform .15s steps(2); }
  .more[open] > summary .ico { transform: rotate(-90deg); }
  .more .m-less, .more[open] .m-more { display: none; }
  .more[open] .m-less { display: inline; }
}

/* --------------------------------------------------- rarity deck → fan */
.js .tier { transform: translate(var(--fx, 0px), var(--fy, 0px)) rotate(var(--fr, 0deg)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.tiers.is-fanning .tier { transition: none; }
.tiers { position: relative; }

/* ------------------------------------------------- bold stat strip */
.facts { background: #0D0620; position: relative; overflow: hidden; }
.facts::before { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(255,113,206,.06) 0 22px, transparent 22px 44px); animation: stripes 6s linear infinite; pointer-events: none; }
@keyframes stripes { from { transform: translateX(0); } to { transform: translateX(50px); } }
.facts > * { position: relative; }
.factlist { background: transparent; border-top: 3px solid #3A1F5C; gap: 0; }
.factlist li { background: transparent; padding: 22px 8px; border-right: 2px dotted rgba(255,113,206,.25); transition: transform .12s steps(2); }
.factlist b { font-size: clamp(40px, 9vw, 66px); color: #01CDFE; text-shadow: 3px 3px 0 #1E5CB3, 0 0 18px rgba(1,205,254,.5); }
.factlist li:nth-child(-n+3) b { color: #FF71CE; text-shadow: 3px 3px 0 #9C1F52, 0 0 18px rgba(255,113,206,.55); }
.factlist li:nth-child(4) b { color: #FFE08A; text-shadow: 3px 3px 0 #A8781A, 0 0 18px rgba(255,213,79,.5); }
.factlist span { color: #D7C6F0; font-size: 15px; }
.factlist b.is-done { animation: bump .45s steps(4); }
@media (hover: hover) { .factlist li:hover { transform: translateY(-4px) rotate(-2deg); } }
.claim__ico { animation: breathe 3s ease-in-out infinite; }

/* -------------------------------------- hover life for every card */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  :is(.step, .mini, .tier-note .panel, .howcard, .radarcard, .pf, .wink__item, .dlcard, .plan, .rulebox, .qa) { transition: transform .14s steps(2, end); }
  :is(.step, .mini, .tier-note .panel, .howcard, .pf, .wink__item, .dlcard, .plan):hover { transform: translateY(-5px) rotate(-.4deg); }
  :is(.step, .howcard, .radarcard, .mini, .pf):hover :is(.step__ico, .ico-box) .ico { animation: wiggle .45s steps(4); }
  .feature__media .phone-wrap:hover { animation-play-state: paused; }
  .feature__media .zoom:hover img, .consoles .zoom:hover img { transform: scale(1.03); }
  .zoom img { transition: transform .15s steps(3); }
}
@media (max-width: 639px) {
  .duo .phone-wrap, .trio .phone-wrap { flex: 0 0 47%; }
  .solo { max-width: 210px; }
  .dsshot { max-width: 230px; }
  .xplist { grid-template-columns: 1fr 1fr !important; column-gap: 10px; }
  .xplist li:nth-last-child(2) { border-bottom: 0; }
  .xpbtn { font-size: 14px; padding: 7px 2px; }
  .dl { display: flex !important; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 12px var(--gutter) 16px; scrollbar-width: none; align-items: stretch; }
  .dl::-webkit-scrollbar { display: none; }
  .dl > * { flex: 0 0 86%; scroll-snap-align: center; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
  .footer__grid > :last-child { grid-column: 1 / -1; }
  .avcam__tray { padding-bottom: 60%; }
  .feature__text > p { font-size: 17px; }
}
@media (max-width: 639px) {
  .featdeck, .radars, .rules2 { display: flex !important; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 10px; scrollbar-width: none; align-items: flex-start; }
  :is(.featdeck, .radars, .rules2)::-webkit-scrollbar { display: none; }
  :is(.featdeck, .radars, .rules2) > * { flex: 0 0 88%; scroll-snap-align: center; min-width: 0; }
  .featdeck > .feature + .feature { margin-top: 0; }
  .featdeck .feature { gap: 20px; }
}
@media (max-width: 979px) {
  .feature, .consoles, .tgrid, .honest, .hero__stage, .gcats, .radars, .rules2, .featdeck { grid-template-columns: minmax(0, 1fr); }
  .feature__text, .feature__media, .gcat, .radarcard, .rulebox { min-width: 0; }
}
main > section { overflow-x: clip; }
.hud { transform: translateY(-12px); opacity: 0; transition: transform .3s steps(5, end), opacity .3s; }
.hud.is-on { transform: none; opacity: 1; }
/* absolutely positioned bits (screen-reader text, badges) must stay inside the horizontal scrollers */
.gtiles, .featdeck, .radars, .rules2, .steps, .how, .facts-grid, .wink__grid, .tier-note, .dl, .minis, .plans, .duo, .trio, .themes, .reel__list, .gtile, .scene__cap { position: relative; }
@media (max-width: 639px) {
  .feature--games .feature__media, .consoles .duo { display: none; }
  .feature--games { margin-bottom: 0; }
  .consoles { margin-top: 30px; }
  .bigclaim { font-size: clamp(28px, 8.4vw, 40px); }
  .pquote { margin-top: 16px; font-size: 19px; }
  .claims { display: flex !important; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; position: relative; }
  .claims::-webkit-scrollbar { display: none; }
  .claims > .claim { flex: 0 0 88%; scroll-snap-align: center; border-top: 0 !important; }
}
.factlist b span { display: inline; margin: 0; font-size: inherit; color: inherit; letter-spacing: inherit; }
.factlist b .visually-hidden { position: absolute !important; }

/* =============================================================================
   NEON: the home page carries the hero's synthwave energy into every section (main.neon)
   ============================================================================= */
html:has(main.neon) {
  --page: #12082A; --shell: #1A0E30; --shell2: #120A24; --edge: #4A2E78; --shell-ink: #D9C8F5;
  --bezel: #05030B; --screen: #1E1238; --screen2: #26174A; --line: #5A3E8C; --line2: #3A2862;
  --ink: #F4ECFF; --ink2: #CDBDEB; --primary-dk: #8EDBFF; --primary-soft: #2A1F5A; --link: #8FDBFF;
  --gold-ink: #FFE08A; --ok-ink: #5FD47A; --phone: #2B2F37; --hint-bg: #2A1550;
  --m-page: #0B0620;
  --fr-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231E1238'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231E1238'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%232E1F52'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%232E1F52'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23170D2E'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23170D2E'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%236A44A8'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%236A44A8'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%236A44A8'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%236A44A8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%236A44A8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%236A44A8'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%236A44A8'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%236A44A8'/%3E%3C/svg%3E");
  --fr-sunk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23170D2E'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23170D2E'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23120A24'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23120A24'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%232E1F52'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%232E1F52'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%236A44A8'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%236A44A8'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%236A44A8'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%236A44A8'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%236A44A8'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%236A44A8'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%236A44A8'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%236A44A8'/%3E%3C/svg%3E");
  --fr-btn2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%2326174A'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%2326174A'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%233C2A68'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%233C2A68'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%231C1038'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%231C1038'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239A6BE0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239A6BE0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239A6BE0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239A6BE0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239A6BE0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239A6BE0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239A6BE0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239A6BE0'/%3E%3C/svg%3E");
  --fr-btn2-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231C1038'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231C1038'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23170D2E'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23170D2E'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%233C2A68'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%233C2A68'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%239A6BE0'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%239A6BE0'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%239A6BE0'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%239A6BE0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%239A6BE0'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%239A6BE0'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%239A6BE0'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%239A6BE0'/%3E%3C/svg%3E");
  --fr-tab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%232C1458'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%232C1458'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%2340206E'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%2340206E'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23220F46'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23220F46'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23FF71CE'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23FF71CE'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23FF71CE'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23FF71CE'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23FF71CE'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23FF71CE'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23FF71CE'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23FF71CE'/%3E%3C/svg%3E");
  --fr-shell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231A0E30'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231A0E30'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%232A1A48'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%232A1A48'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23120A24'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23120A24'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%234A2E78'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%234A2E78'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%234A2E78'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%234A2E78'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%234A2E78'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%234A2E78'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%234A2E78'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%234A2E78'/%3E%3C/svg%3E");
  --fr-r-legendary-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%232A2010'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%232A2010'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%233A2E16'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%233A2E16'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%231E170A'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%231E170A'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23C9952A'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23C9952A'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23C9952A'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23C9952A'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23C9952A'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23C9952A'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23C9952A'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23C9952A'/%3E%3C/svg%3E");
  --fr-r-rare-soft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%2312233A'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%2312233A'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%231B3352'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%231B3352'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%230C1828'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%230C1828'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%234FB6FF'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%234FB6FF'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%234FB6FF'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%234FB6FF'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%234FB6FF'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%234FB6FF'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%234FB6FF'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%234FB6FF'/%3E%3C/svg%3E");
  --fr-m-panel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%231B1035'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%231B1035'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%232A1C4E'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%232A1C4E'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%23140B28'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%23140B28'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%235A3E8C'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%235A3E8C'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%235A3E8C'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%235A3E8C'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%235A3E8C'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%235A3E8C'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%235A3E8C'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%235A3E8C'/%3E%3C/svg%3E");
  --fr-m-sunk: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%23140B28'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%23140B28'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%23100820'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%23100820'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%232A1C4E'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%232A1C4E'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%235A3E8C'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%235A3E8C'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%235A3E8C'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%235A3E8C'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%235A3E8C'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%235A3E8C'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%235A3E8C'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%235A3E8C'/%3E%3C/svg%3E");
  --fr-toast: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' width='10' height='10' shape-rendering='crispEdges'%3E%3Crect x='2' y='1' width='6' height='8' fill='%232A1550'/%3E%3Crect x='1' y='2' width='8' height='6' fill='%232A1550'/%3E%3Crect x='2' y='1' width='6' height='1' fill='%233C2468'/%3E%3Crect x='1' y='2' width='1' height='6' fill='%233C2468'/%3E%3Crect x='2' y='8' width='6' height='1' fill='%231C0E38'/%3E%3Crect x='8' y='2' width='1' height='6' fill='%231C0E38'/%3E%3Crect x='2' y='0' width='6' height='1' fill='%23FF71CE'/%3E%3Crect x='2' y='9' width='6' height='1' fill='%23FF71CE'/%3E%3Crect x='0' y='2' width='1' height='6' fill='%23FF71CE'/%3E%3Crect x='9' y='2' width='1' height='6' fill='%23FF71CE'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23FF71CE'/%3E%3Crect x='8' y='1' width='1' height='1' fill='%23FF71CE'/%3E%3Crect x='1' y='8' width='1' height='1' fill='%23FF71CE'/%3E%3Crect x='8' y='8' width='1' height='1' fill='%23FF71CE'/%3E%3C/svg%3E");
}
:where(html:has(main.neon)) .screen { background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); }
:where(html:has(main.neon)) .ds { box-shadow: inset 0 3px 0 #2A2E37, inset 0 -5px 0 var(--shell2), 8px 8px 0 rgba(0, 0, 0, .4); }
:where(html:has(main.neon)) .hinge .bar { background: linear-gradient(#2A2E37, #111318); box-shadow: inset 0 2px 0 rgba(0,0,0,.3), 0 1px 0 #2A2E37; }
:where(html:has(main.neon)) .topbar::before { box-shadow: inset 0 -3px 0 var(--shell2), 0 3px 0 rgba(0, 0, 0, .3); }
:where(html:has(main.neon)) .section--shell { box-shadow: inset 0 3px 0 #2A2E37; }
:where(html:has(main.neon)) .brand span { text-shadow: 2px 2px 0 #1B73A8; }
:where(html:has(main.neon)) .phone-wrap, :where(html:has(main.neon)) .dsshot img, :where(html:has(main.neon)) .avond-art .art { filter: drop-shadow(8px 8px 0 rgba(0, 0, 0, .45)); }
:where(html:has(main.neon)) .safe { background: #2A2410; color: var(--ink); }
:where(html:has(main.neon)) .safe h4 { color: #FFE7A0; }
:where(html:has(main.neon)) .prose .warn { background: #3A1E1A; }
:where(html:has(main.neon)) .prose strong { color: #fff; }
:where(html:has(main.neon)) .tier__min { color: #050608; }
:where(html:has(main.neon)) .langs ul { box-shadow: 6px 6px 0 rgba(0, 0, 0, .5); }
:where(html:has(main.neon)) .ios-ico { background: #F4F6F8; }
:where(html:has(main.neon)) .gtile { background: var(--screen2); }
:where(html:has(main.neon)) .players { color: var(--ink); }
:where(html:has(main.neon)) .dark { background-color: #07080B; border-block-color: #23262D; }
html:has(main.neon) body { background-color: #12082A; background-image: radial-gradient(rgba(255,113,206,.09) 1px, transparent 1.4px); }
.neon .section { position: relative; color: var(--ink);
  background-color: #170B33;
  background-image: linear-gradient(rgba(255,113,206,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,113,206,.05) 1px, transparent 1px), linear-gradient(180deg, #170B33, #21103F);
  background-size: 32px 32px, 32px 32px, 100% 100%;
  border-top: 3px solid #FF71CE; box-shadow: 0 -6px 26px rgba(255,113,206,.28); }
.neon .section--shell { background-color: #0E1240;
  background-image: radial-gradient(1.5px 1.5px at 30px 40px, rgba(255,255,255,.6) 98%, transparent), radial-gradient(1px 1px at 120px 150px, rgba(1,205,254,.7) 98%, transparent), radial-gradient(2px 2px at 220px 80px, rgba(255,113,206,.6) 98%, transparent), linear-gradient(180deg, #0E1240, #1A1258);
  background-size: 260px 220px, 340px 300px, 410px 260px, 100% 100%;
  border-top-color: #01CDFE; border-bottom: 0; box-shadow: 0 -6px 26px rgba(1,205,254,.25); }
.neon #spellen { background-image: linear-gradient(rgba(255,213,79,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,213,79,.05) 1px, transparent 1px), linear-gradient(180deg, #2A0B3A, #18082C); border-top-color: #FFD54F; box-shadow: 0 -6px 26px rgba(255,213,79,.25); }
.neon #samen { background-image: linear-gradient(rgba(5,255,161,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(5,255,161,.05) 1px, transparent 1px), linear-gradient(180deg, #0F1A3A, #1A0E36); border-top-color: #05FFA1; box-shadow: 0 -6px 26px rgba(5,255,161,.2); }
.neon #radar { background-image: radial-gradient(circle at 80% 20%, rgba(79,232,120,.12), transparent 40%), linear-gradient(rgba(79,232,120,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(79,232,120,.05) 1px, transparent 1px), linear-gradient(180deg, #0A1E26, #130A2A); background-size: 100% 100%, 32px 32px, 32px 32px, 100% 100%; border-top-color: #4FE878; box-shadow: 0 -6px 26px rgba(79,232,120,.22); }
.neon #knipoog { background-image: radial-gradient(circle at 20% 30%, rgba(255,213,79,.14), transparent 45%), linear-gradient(180deg, #2A0A26, #170B33); border-top-color: #FFD54F; }
.neon #download { background-image: radial-gradient(circle at 50% 0%, rgba(1,205,254,.18), transparent 50%), linear-gradient(180deg, #120A30, #1E0D3C); }
.neon .dark { background-color: #08051A; border-block: 0; border-top: 3px solid #B388FF; box-shadow: 0 -6px 26px rgba(179,136,255,.3); }
.neon .final { background-image: radial-gradient(circle at 50% 30%, rgba(255,77,141,.25), transparent 55%), linear-gradient(180deg, #1D0D3E, #12082A); }
.neon .section--free { box-shadow: none; border-top: 0; }
.neon .title { color: #fff; text-shadow: 3px 3px 0 #7A1E6C, 0 0 22px rgba(255,113,206,.35); }
.neon .title .hl { color: #01CDFE; text-shadow: 3px 3px 0 #1E3C8C, 0 0 18px rgba(1,205,254,.45); }
.neon .feature h3.sub, .neon .section h3 { color: #fff; }
.neon .feature h3.sub { text-shadow: 2px 2px 0 #4A2E78; }
.neon .eyebrow { color: #F5B8EB; }
.neon .eyebrow::before { background: #FF71CE; box-shadow: 3px 3px 0 #B03A8C, 0 0 8px rgba(255,113,206,.8); }
.neon .section--shell .eyebrow::before { background: #01CDFE; box-shadow: 3px 3px 0 #1E3C8C, 0 0 8px rgba(1,205,254,.8); }
.neon .intro, .neon .feature__text > p { color: var(--ink2); }
.neon .panel { box-shadow: 0 0 24px rgba(154,107,224,.18); }
@media (hover: hover) { .neon .panel:hover { box-shadow: 0 0 0 2px rgba(255,113,206,.25), 0 0 28px rgba(255,113,206,.3); } }
.neon .gtile { background: #24163F; border-color: #3A2862; }
.neon .gtile:hover { border-color: var(--gc); box-shadow: 0 0 16px color-mix(in srgb, var(--gc) 55%, transparent); }
.neon .levels li.is-on { background: #3A3113; }
.neon .levels b { color: #FFE08A; }
.neon .checks .ico { color: #5FD47A; }
.neon .step__ico, .neon .mini .ico-box, .neon .howcard__head .ico-box, .neon .radarcard__head .ico-box { color: #FFE08A; }
.neon .pass { color: #12082A; }
.neon .gextra, .neon .mini-flow { border-color: var(--line); }
.neon .modes li { color: var(--ink2); }
.neon .phone-wrap, .neon .dsshot img { filter: drop-shadow(8px 8px 0 rgba(0,0,0,.5)) drop-shadow(0 0 18px rgba(255,113,206,.18)); }
.neon .scope { box-shadow: inset 0 0 0 3px #12331F, 0 0 26px rgba(79,232,120,.35); }
.neon .qa summary .ico { color: #FF71CE; }
.neon .qa[open] { box-shadow: 0 0 0 2px rgba(1,205,254,.3), 0 0 28px rgba(1,205,254,.25); }
.neon .note-ask { border-left-color: #FF71CE; }
.neon .freeline .ico { color: #FFD54F; }
html:has(main.neon) .footer { background: #0D0620; border-top-color: #FF71CE; box-shadow: 0 -6px 26px rgba(255,113,206,.2); }
html:has(main.neon) .footer h2 { color: #F5B8EB; }
html:has(main.neon) .topbar::before { background: #160A2E; border-bottom-color: #FF71CE; box-shadow: 0 3px 18px rgba(255,113,206,.25); }
html:has(main.neon) .nav a { color: #E6D8FF; }
html:has(main.neon) .nav a:hover { color: #FF71CE; }
html:has(main.neon) .brand span { color: #fff; text-shadow: 2px 2px 0 #B03A8C; }

/* HUD: a small chip that shows up after a reward and hides again; achievements slide in at the bottom */
.hud { top: 74px; }
.hud.is-on.is-hide { transform: translateY(-12px); opacity: 0; }
.achv { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: translate(-50%, calc(100% + 40px)); }
.achv.is-on { transform: translate(-50%, 0); }
.neon .more > summary { color: #FFE08A; }
.neon .mode { background: #1E6FB0; }
.neon .mode--own { background: #6A3FBF; } .neon .mode--solo { background: #2F7A3B; } .neon .mode--duo { background: #B0124F; }
.neon .dlsteps .n { background: #1E6FB0; }
/* prices on the neon page */
.plan .price { display: flex; background: none; border: 0; padding: 0; font: inherit; }
.neon .plan .price b { color: #fff; text-shadow: 3px 3px 0 #7A1E6C; }
.neon .plan .price span { color: var(--ink2); }
.neon :is(.plan--pro, .plan--forever) { color: #1A1206; }
.neon :is(.plan--pro, .plan--forever) h3, .neon :is(.plan--pro, .plan--forever) li { color: #1A1206; }
.neon :is(.plan--pro, .plan--forever) .price b { color: #1A1206; text-shadow: 2px 2px 0 rgba(255,255,255,.5); }
.neon :is(.plan--pro, .plan--forever) .price span, .neon :is(.plan--pro, .plan--forever) > p { color: #4A3A10; }
.neon :is(.plan--pro, .plan--forever) li .ico { color: #7A5A12; }
.neon .plan--legend, .neon .plan--legend h3, .neon .plan--legend li { color: #fff; }
.neon .plan--legend .price b { color: #fff; text-shadow: 3px 3px 0 #9C1F52; }
.neon .plan--legend .price span, .neon .plan--legend li .ico { color: #FFE0EC; }
.neon .plan--pass .price span, .neon .plan--pass > p { color: var(--ink2); }
.neon .plans-support { color: #fff; }
.reel:not(.is-on) .reel__bar { display: none; }
.reel:not(.is-on) .scene .mode { display: none; }
.reel:not(.is-on) .scene__cap { min-height: 40px; padding: 6px 8px; gap: 6px; }
.reel:not(.is-on) .scene__cap b { font-size: 15px; }
.reel:not(.is-on) .scene__art { bottom: 40px; transform: scale(.62); }
@media (max-width: 639px) {
  .gtile { grid-template-columns: 40px minmax(0, 1fr); align-items: start; }
  .gtile__side { grid-column: 2; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
}
/* the XP chip lives in the empty middle of the topbar (phones/tablets) or in the bottom-left gutter (desktop) */
.hud { top: 15px; right: auto; left: 230px; z-index: 60; min-height: 34px; }
@media (max-width: 420px) { .hud { left: 54px; } .hud__n { display: none; } }
@media (min-width: 1140px) { .hud { top: auto; bottom: 14px; left: 12px; } .hud__plus { top: auto; bottom: 100%; } }
.hud { top: 15px; bottom: auto; left: calc(max(0px, (100vw - 1160px) / 2) + 232px); }
.hud__plus { top: 100%; bottom: auto; }
@media (max-width: 1299px) { .hud__bar, .hud__combo { display: none; } }
@media (max-width: 420px) { .hud { left: 58px; padding: 4px 8px; } .hud__n { display: none; } }
@media (min-width: 1140px) and (max-width: 1299px) { .hud { left: calc(max(0px, (100vw - 1160px) / 2) + 220px); } }
/* final placement: a compact chip just under the topbar on the left that hides 2.2 s after each update */
.hud { top: 74px; left: 8px; bottom: auto; right: auto; padding: 3px 8px; min-height: 30px; }
.hud__bar, .hud__combo { display: none !important; }
@media (max-width: 420px) { .hud { left: 6px; } .hud__n { display: inline; } }

/* ---------------------------------------------- Avondcamera 2.0: modes */
.avmodes { margin-top: 16px; display: grid; gap: 10px; max-width: 36em; }
.avmode { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: start; padding: 10px 12px; background: var(--screen2); border: 2px solid var(--line2); }
.avmode__ico { display: grid; place-items: center; width: 40px; height: 40px; color: #fff; background: #6A3FBF; border: 2px solid rgba(0,0,0,.3); box-shadow: inset 2px 2px 0 rgba(255,255,255,.25); }
.avmode--solo .avmode__ico { background: #2F7A3B; } .avmode--party .avmode__ico { background: #E5508E; }
.avmode__ico .ico { width: 20px; height: 20px; }
.avmode h4 { font-size: 19px; line-height: 1.2; }
.avmode p { margin-top: 4px; font: 400 15px/1.5 var(--font-text); color: var(--ink2); }
.avmode__note { font-size: 13px !important; opacity: .85; }
.avmode--party { border-color: #E5508E; box-shadow: 0 0 18px rgba(229,80,142,.2); }
.avmode .checks { margin-top: 10px; gap: 6px; }
.avmode .checks li { font: 400 14px/1.45 var(--font-text); }
.avmode .checks .ico { color: #FF71CE; }
.avparty { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.avparty__lcd { display: inline-flex; align-items: baseline; gap: 2px; padding: 4px 10px; background: #0B0D0A; color: #7CF29A; border: 3px solid #000; font: 700 20px/1 var(--font-pixel); text-shadow: 0 0 8px rgba(124,242,154,.6); }
.avparty__lcd b { display: inline-block; min-width: 2.2em; text-align: right; }
.avparty__lcd b.is-bump { animation: bump .3s steps(3); }
.avparty__qr { display: grid; place-items: center; width: 34px; height: 34px; background: #fff; color: #25282D; border: 2px solid #000; }
.avparty__qr .ico { width: 20px; height: 20px; }
.avparty__chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; font: 700 12px/1.3 var(--font-pixel); color: #fff; background: #4A2E78; border: 2px solid #9A6BE0; }
.avparty__chip .ico { width: 10px; height: 10px; }
.avparty__chip--tv { background: #B0124F; border-color: #FF71CE; }
.avprices { margin-top: 10px !important; display: flex; flex-wrap: wrap; gap: 6px; }
.avprices span { padding: 2px 8px; font: 700 13px/1.4 var(--font-pixel); color: #12082A; background: var(--r-legendary); border: 2px solid var(--r-legendary-dk); }
.av-mark { margin-top: 12px; display: flex; align-items: center; gap: 8px; font: 400 14px/1.45 var(--font-text); color: var(--ink2); }
.av-mark .ico { width: 16px; height: 16px; flex: 0 0 auto; color: #FFD54F; }
.avcam__lbl { margin-top: 10px; text-align: center; font: 700 12px/1.2 var(--font-pixel); letter-spacing: .14em; text-transform: uppercase; color: #FFD54F; }
.avcam__filters--pro { margin-top: 6px; }
.fchip--pro .ico { width: 10px; height: 10px; color: #FFD54F; }
.fchip--pro[aria-pressed="true"] .ico { color: #fff; }
/* the eight film looks (CSS approximations of the app's looks) */
.f-portra .pola__svg { filter: sepia(.28) saturate(1.15) brightness(1.06) contrast(.94) hue-rotate(-6deg); }
.f-tungsten .pola__svg { filter: saturate(1.25) contrast(1.12) hue-rotate(-18deg) brightness(.96); }
.f-tungsten .pola__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 40% 35%, rgba(255,60,40,.35), transparent 45%), linear-gradient(rgba(20,60,120,.18), rgba(20,60,120,.18)); mix-blend-mode: screen; }
.f-superia .pola__svg { filter: sepia(.18) hue-rotate(38deg) saturate(1.1) contrast(1.06); }
.f-hp5 .pola__svg { filter: grayscale(1) contrast(1.3) brightness(1.03); }
.f-hp5 .pola__img::after, .f-y2k .pola__img::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.2px), radial-gradient(rgba(0,0,0,.25) 1px, transparent 1.2px); background-size: 3px 3px, 4px 4px; background-position: 0 0, 1px 2px; }
.f-y2k .pola__svg { filter: saturate(1.45) contrast(1.15) brightness(1.08) hue-rotate(6deg); }
.f-y2k .pola__date { color: #FFB020; font-family: var(--font-pixel); }
.f-lomo .pola__svg { filter: saturate(1.6) contrast(1.35); }
.f-lomo .pola__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.65) 100%); }
.f-vhs .pola__svg { filter: saturate(1.35) hue-rotate(-12deg) contrast(1.1); }
.f-vhs .pola__img::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(rgba(0,0,0,.22) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(255,0,90,.12), transparent 30%, transparent 70%, rgba(0,200,255,.12)); }
.f-dreamy .pola__svg { filter: brightness(1.14) contrast(.84) saturate(.92); }
.f-dreamy .pola__img::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(255,220,240,.45), transparent 65%); mix-blend-mode: screen; }

/* ======================================================= FEESTDAG-SPECIALS */
html:not([lang="nl"]) [data-nlonly] { display: none !important; }
.neon #specials { background-image: radial-gradient(circle at 15% 20%, rgba(214,69,58,.18), transparent 40%), radial-gradient(circle at 85% 70%, rgba(242,193,78,.14), transparent 45%), linear-gradient(180deg, #1A0B2E, #0F1A2E); border-top-color: #F2C14E; box-shadow: 0 -6px 26px rgba(242,193,78,.25); }
.sp-stage { position: relative; height: 200px; max-width: 760px; margin: 0 auto 26px; overflow: hidden; border: 6px solid #05030B; border-radius: 14px; background: var(--spbg, #13321F); box-shadow: 0 0 30px rgba(242,193,78,.25), 8px 10px 0 rgba(0,0,0,.35); transition: background-color .4s steps(4); }
.sp-stage.is-kerst { --spbg: #13321F; } .sp-stage.is-oud { --spbg: #0B0C22; } .sp-stage.is-val { --spbg: #5A1430; } .sp-stage.is-hal { --spbg: #1E0B26; }
.sp-fx { position: absolute; inset: 0; opacity: 0; transition: opacity .4s steps(4); }
.is-kerst .sp-snow, .is-oud .sp-fire, .is-val .sp-hearts, .is-hal .sp-pump { opacity: 1; }
.sp-label { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); padding: 4px 14px; font: 700 clamp(22px, 5vw, 34px)/1 var(--font-pixel); color: #fff; text-shadow: 3px 3px 0 rgba(0,0,0,.5); background: rgba(0,0,0,.35); border: 3px solid rgba(255,255,255,.4); white-space: nowrap; }
.sp-label.is-pop { animation: popIn .4s steps(5, end); }
/* snow */
.sp-snow i { position: absolute; top: -10px; width: 6px; height: 6px; background: #fff; box-shadow: 0 0 4px #fff; animation: snow 4s linear infinite; }
.sp-snow i:nth-child(odd) { width: 4px; height: 4px; animation-duration: 5.5s; }
.sp-snow i:nth-child(1) { left: 4%; animation-delay: -.5s; } .sp-snow i:nth-child(2) { left: 11%; animation-delay: -2s; } .sp-snow i:nth-child(3) { left: 18%; animation-delay: -3.4s; } .sp-snow i:nth-child(4) { left: 25%; animation-delay: -1.2s; }
.sp-snow i:nth-child(5) { left: 32%; animation-delay: -4s; } .sp-snow i:nth-child(6) { left: 39%; animation-delay: -2.6s; } .sp-snow i:nth-child(7) { left: 46%; animation-delay: -.2s; } .sp-snow i:nth-child(8) { left: 53%; animation-delay: -3s; }
.sp-snow i:nth-child(9) { left: 60%; animation-delay: -1.7s; } .sp-snow i:nth-child(10) { left: 67%; animation-delay: -4.6s; } .sp-snow i:nth-child(11) { left: 74%; animation-delay: -.9s; } .sp-snow i:nth-child(12) { left: 81%; animation-delay: -3.8s; }
.sp-snow i:nth-child(13) { left: 88%; animation-delay: -2.2s; } .sp-snow i:nth-child(14) { left: 95%; animation-delay: -5s; }
@keyframes snow { 0% { transform: translate(0, 0); } 50% { transform: translate(12px, 110px); } 100% { transform: translate(-6px, 220px); } }
/* fireworks */
.sp-fire b { position: absolute; width: 0; height: 0; }
.sp-fire .fw0 { left: 22%; top: 38%; } .sp-fire .fw1 { left: 52%; top: 26%; } .sp-fire .fw2 { left: 78%; top: 42%; }
.sp-fire i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--fc, #FFD54F); box-shadow: 0 0 8px var(--fc, #FFD54F); animation: firework 1.8s steps(10, end) infinite; }
.sp-fire .fw1 i { --fc: #FF5CA8; animation-delay: .6s; } .sp-fire .fw2 i { --fc: #5BA8FF; animation-delay: 1.2s; }
.sp-fire i:nth-child(1) { --a: 0deg; } .sp-fire i:nth-child(2) { --a: 45deg; } .sp-fire i:nth-child(3) { --a: 90deg; } .sp-fire i:nth-child(4) { --a: 135deg; }
.sp-fire i:nth-child(5) { --a: 180deg; } .sp-fire i:nth-child(6) { --a: 225deg; } .sp-fire i:nth-child(7) { --a: 270deg; } .sp-fire i:nth-child(8) { --a: 315deg; }
@keyframes firework { 0% { transform: rotate(var(--a)) translateX(0) scale(.4); opacity: 0; } 10% { opacity: 1; } 70% { transform: rotate(var(--a)) translateX(54px) scale(1); opacity: 1; } 100% { transform: rotate(var(--a)) translateX(64px) scale(.6); opacity: 0; } }
/* hearts */
.sp-hearts i { position: absolute; bottom: -24px; width: 20px; height: 20px; color: #FF7AA2; animation: skyUp 4s linear infinite; }
.sp-hearts i .ico { width: 100%; height: 100%; }
.sp-hearts i:nth-child(1) { left: 6%; animation-delay: -.4s; } .sp-hearts i:nth-child(2) { left: 16%; animation-delay: -2.1s; color: #E3245B; } .sp-hearts i:nth-child(3) { left: 27%; animation-delay: -1.2s; }
.sp-hearts i:nth-child(4) { left: 38%; animation-delay: -3.1s; color: #fff; } .sp-hearts i:nth-child(5) { left: 49%; animation-delay: -.8s; } .sp-hearts i:nth-child(6) { left: 60%; animation-delay: -2.7s; color: #E3245B; }
.sp-hearts i:nth-child(7) { left: 71%; animation-delay: -1.6s; } .sp-hearts i:nth-child(8) { left: 82%; animation-delay: -3.5s; color: #fff; } .sp-hearts i:nth-child(9) { left: 92%; animation-delay: -.1s; } .sp-hearts i:nth-child(10) { left: 33%; animation-delay: -3.8s; }
/* pumpkins */
.sp-pump i { position: absolute; bottom: 52px; width: 34px; height: 26px; background: #FF7A1A; border: 3px solid #7A2E00; border-radius: 8px; box-shadow: inset -6px 0 0 rgba(0,0,0,.18), 0 0 14px rgba(156,255,87,.35); animation: pumpBob 1.6s steps(4) infinite; }
.sp-pump i::before { content: ""; position: absolute; left: 50%; top: -9px; width: 6px; height: 8px; margin-left: -3px; background: #3F9A4D; }
.sp-pump i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 8px; height: 5px; background: repeating-linear-gradient(90deg, #FFD54F 0 5px, transparent 5px 8px); box-shadow: 0 6px 0 -1px #FFD54F; }
.sp-pump i:nth-child(1) { left: 8%; } .sp-pump i:nth-child(2) { left: 22%; animation-delay: -.4s; bottom: 70px; } .sp-pump i:nth-child(3) { left: 36%; animation-delay: -.8s; }
.sp-pump i:nth-child(4) { left: 50%; animation-delay: -1.2s; bottom: 76px; } .sp-pump i:nth-child(5) { left: 64%; animation-delay: -.2s; } .sp-pump i:nth-child(6) { left: 78%; animation-delay: -.6s; bottom: 68px; } .sp-pump i:nth-child(7) { left: 90%; animation-delay: -1s; }
@keyframes pumpBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* the season cards */
.sp-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.spc { position: relative; padding: 10px 14px 14px; border: var(--fw) solid transparent; border-image: var(--fr-panel) 3 fill / var(--fw) stretch; box-shadow: 0 0 22px rgba(242,193,78,.12); transition: transform .14s steps(2); }
.spc .pal { width: 100%; height: 10px; margin-bottom: 10px; }
.spc h3 { font-size: 22px; line-height: 1.1; color: #fff; }
.spc__when { margin-top: 6px; display: flex; align-items: center; gap: 6px; font: 700 13px/1.3 var(--font-pixel); color: #FFE08A; }
.spc__when .ico, .spc__theme .ico { width: 12px; height: 12px; flex: 0 0 auto; }
.spc__game { margin-top: 8px; font: 400 14px/1.5 var(--font-text); color: var(--ink2); }
.spc__game b { display: block; font: 700 15px/1.3 var(--font-pixel); color: #FF71CE; }
.spc__theme { margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; font: 400 13px/1.45 var(--font-text); color: var(--ink2); opacity: .9; }
.spc__theme .ico { margin-top: 3px; color: #FFD54F; }
.spc__only { margin-top: 8px; display: inline-block; padding: 1px 6px; font: 700 12px/1.4 var(--font-pixel); color: #12082A; background: #FF7A00; }
@media (hover: hover) { .spc:hover { transform: translateY(-5px) rotate(-.5deg); } }
.sp-notes { margin-top: 22px; display: grid; gap: 8px; max-width: 760px; margin-inline: auto; }
.sp-notes p { display: flex; gap: 10px; align-items: flex-start; font: 400 15px/1.5 var(--font-text); color: var(--ink); }
.sp-notes .ico { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 auto; color: #F2C14E; }
@media (max-width: 639px) {
  .sp-grid { display: flex !important; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 6px var(--gutter) 14px; scrollbar-width: none; position: relative; }
  .sp-grid::-webkit-scrollbar { display: none; }
  .sp-grid > * { flex: 0 0 80%; scroll-snap-align: center; }
  .sp-stage { height: 160px; }
}
@media (prefers-reduced-motion: reduce) { .sp-snow i, .sp-hearts i { opacity: .8; } .sp-fire i { opacity: 1; transform: rotate(var(--a)) translateX(40px); } }
.plan--cam { border-image-source: var(--fr-r-rare-soft); }
.plan--party { border-image-source: var(--fr-r-ultra); }
.neon .plan--party, .neon .plan--party h3, .neon .plan--party li { color: #fff; }
.neon .plan--party .price b { color: #fff; text-shadow: 3px 3px 0 #9C1F52; }
.neon .plan--party .price span, .neon .plan--party li .ico { color: #FFE0EC; }

/* =============================================================================
   Hoekedex Story (index #story): banner with a pixel city, a phone reel
   (fx.js storyReel), six feature cards with small looping toys.
   ============================================================================= */
.neon #story { background-image: radial-gradient(circle at 50% 0%, rgba(255,79,216,.16), transparent 55%), linear-gradient(rgba(255,79,216,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,79,216,.05) 1px, transparent 1px), linear-gradient(180deg, #1A0838, #120A30); background-size: 100% 100%, 32px 32px, 32px 32px, 100% 100%; border-top-color: #FF4FD8; box-shadow: 0 -6px 26px rgba(255,79,216,.3); }
.story .title .hl { color: #01CDFE; }

/* banner */
.stb { position: relative; height: clamp(190px, 30vw, 270px); margin: 0 auto 38px; max-width: 980px; overflow: hidden; background: #120830; box-shadow: 0 0 0 3px #3A1458, 0 0 0 6px #FF4FD8, 0 0 34px rgba(255,79,216,.45); }
.stb__sky { position: absolute; inset: 0; background: linear-gradient(180deg, #0E0628 0%, #2A0F52 38%, #6E1E6A 66%, #C2405E 86%, #F07A4A 100%); }
.stb__stars { position: absolute; inset: 0 0 45% 0; background-image: radial-gradient(1.5px 1.5px at 12% 20%, #fff 98%, transparent), radial-gradient(1px 1px at 33% 42%, #7AD7FF 98%, transparent), radial-gradient(2px 2px at 58% 14%, #FFD27A 98%, transparent), radial-gradient(1px 1px at 76% 34%, #fff 98%, transparent), radial-gradient(1.5px 1.5px at 90% 12%, #FF71CE 98%, transparent), radial-gradient(1px 1px at 46% 28%, #fff 98%, transparent); }
.stb__sun { position: absolute; left: 50%; bottom: 10%; width: min(36%, 230px); aspect-ratio: 1; margin-left: max(-18%, -115px); border-radius: 50%; background: linear-gradient(180deg, #FFE08A 0%, #FF9F43 45%, #FF4FD8 100%); box-shadow: 0 0 40px rgba(255,159,67,.5);
  -webkit-mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88%); mask-image: linear-gradient(180deg, #000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88%); }
.stb__city { position: absolute; left: 0; right: 0; bottom: 14px; width: 100%; height: 44%; }
.stb__street { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, #0A0518 0 26px, #FFD27A 26px 38px, #0A0518 38px 64px) 0 6px / 100% 2px no-repeat, #0A0518; border-top: 2px solid #FF71CE; box-shadow: 0 -2px 14px rgba(255,113,206,.6); }
.stb__walker { position: absolute; bottom: 12px; left: -24px; width: 16px; height: 26px; }
.stb__walker .f2 { opacity: 0; }
.stb__logo { position: absolute; left: 0; right: 0; top: 8%; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.stb__logo::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: -1; width: min(86%, 560px); height: 150%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(14,6,40,.72), transparent); }
.stb__hx { font: 700 clamp(30px, 7.4vw, 66px)/1 var(--font-pixel); letter-spacing: .06em; color: #FFE3F6; text-shadow: 3px 3px 0 #9C1F52, 0 0 10px #FF4FD8, 0 0 26px rgba(255,79,216,.8); }
.stb__st { font: 700 clamp(15px, 3vw, 28px)/1 var(--font-pixel); letter-spacing: .62em; margin-right: -.62em; color: #9BE7FF; text-shadow: 2px 2px 0 #1E3C8C, 0 0 12px rgba(1,205,254,.9); }
.stb__new { position: absolute; top: 12px; left: 12px; padding: 5px 9px 4px; font: 700 13px/1 var(--font-pixel); letter-spacing: .12em; text-transform: uppercase; color: #12082A; background: #FFD54F; box-shadow: 3px 3px 0 #A8781A, 0 0 14px rgba(255,213,79,.6); }

/* layout */
.story__grid { display: grid; gap: 34px; align-items: start; }
@media (min-width: 960px) { .story__grid { grid-template-columns: 320px minmax(0, 1fr); gap: 44px; } .sr { position: sticky; top: 92px; } }

/* phone reel */
.sr { min-width: 0; }
.sr__track { display: flex; gap: 16px; margin: 0; padding: 6px 14% 14px; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sr__track::-webkit-scrollbar { display: none; }
.sr__track:focus-visible { outline: 3px solid #01CDFE; outline-offset: 2px; }
.sr__slide { flex: 0 0 72%; max-width: 300px; scroll-snap-align: center; }
@media (min-width: 960px) { .sr__track { padding-inline: 10px; } .sr__slide { flex-basis: 100%; } }
.sr__slide figure { margin: 0; }
.sr__slide figcaption { margin-top: 12px; min-height: 2.6em; font: 600 15px/1.3 var(--font-pixel); text-align: center; color: #F5B8EB; text-wrap: balance; }
.sr__slide .phone-wrap { transition: transform .25s steps(4), opacity .25s steps(4); }
.js .sr__slide:not(.is-cur) .phone-wrap { opacity: .5; transform: scale(.93); }
.js .sr__slide:not(.is-cur) figcaption { opacity: .4; }
.sr__bar { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.sr__btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; flex: 0 0 auto; border: var(--fw-sm) solid transparent; border-image: var(--fr-btn2) 3 fill / var(--fw-sm) stretch; color: var(--ink); cursor: pointer; }
.sr__btn .ico { width: 16px; height: 16px; }
.sr__btn:active { transform: translateY(2px); }
.sr__dots { display: flex; flex-wrap: wrap; justify-content: center; }
.sr__dots .dot { width: 19px; height: 28px; }
.sr__dots .dot::before { width: 8px; height: 8px; }
.neon .sr__dots .dot::before { background: #3A2862; border-color: #5B4690; }
.neon .sr__dots .dot[aria-current="true"]::before { background: #FF4FD8; border-color: #FFB3E6; box-shadow: 0 0 8px #FF4FD8; }

/* feature cards */
.stf { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .stf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stc { --k: #FF4FD8; position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 18px 20px; background: #1C1036; border: 3px solid #3A2862; box-shadow: 6px 6px 0 rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.05); }
.stc::after { content: ""; position: absolute; left: -3px; right: -3px; top: -3px; height: 3px; background: var(--k); box-shadow: 0 0 12px var(--k); }
.stc--you { --k: #4FB6FF; } .stc--ends { --k: #FF5C8A; } .stc--pop { --k: #FFD54F; } .stc--duel { --k: #FF6FA8; } .stc--night { --k: #B388FF; } .stc--dex { --k: #7CE07C; }
.stc__ico { display: grid; place-items: center; width: 42px; height: 42px; color: #12082A; background: var(--k); box-shadow: 3px 3px 0 rgba(0,0,0,.45); }
.stc__ico .ico { width: 22px; height: 22px; }
.neon .stc h3 { margin: 0; font: 700 21px/1.15 var(--font-pixel); color: #fff; text-wrap: balance; }
.stc > p { margin: 0; font: 400 15.5px/1.5 var(--font-text); color: #D9CCF5; text-wrap: pretty; }

.stdiff { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 0; border: 2px solid #4A3878; background: #140A2A; }
.stdiff span { position: relative; z-index: 1; padding: 7px 4px 6px; font: 600 13px/1.1 var(--font-pixel); text-align: center; color: #CBBDF0; overflow-wrap: anywhere; }
.stdiff i { position: absolute; top: 0; bottom: 0; left: 33.333%; width: 33.333%; background: #2E9BD6; box-shadow: 0 0 12px rgba(46,155,214,.7); }

.stends { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.stends li { --c: #9AA0A6; padding: 7px 8px 6px 10px; font: 600 13px/1.2 var(--font-pixel); color: #fff; background: rgba(255,255,255,.05); border-left: 4px solid var(--c); overflow-wrap: anywhere; }
.stends li:nth-child(1) { --c: #FF5C8A; } .stends li:nth-child(2) { --c: #B388FF; } .stends li:nth-child(3) { --c: #FFD54F; } .stends li:nth-child(4) { --c: #9AA0A6; } .stends li:nth-child(5) { --c: #4FC3F7; }
.stends .is-secret { --c: #3FF0FF; display: flex; align-items: center; gap: 6px; color: #3FF0FF; border: 2px dashed #3FF0FF; border-left-width: 4px; border-left-style: solid; text-shadow: 0 0 8px rgba(63,240,255,.7); }
.stends .is-secret .ico { width: 12px; height: 12px; flex: 0 0 auto; }
.stmon, .stchips { display: flex; align-items: center; gap: 8px; margin: 0; font: 400 14px/1.4 var(--font-text); color: #F5B8EB; }
.stmon .ico { width: 14px; height: 14px; flex: 0 0 auto; color: #FF71CE; }

.stpop { display: grid; gap: 5px; margin: 2px 0 0; padding: 0; list-style: none; }
.stpop li { --c: #9AA0A6; --w: 40%; position: relative; padding: 6px 10px 5px; font: 600 13.5px/1.2 var(--font-pixel); color: #fff; text-shadow: 1px 1px 0 rgba(0,0,0,.6); isolation: isolate; }
.stpop li::before { content: ""; position: absolute; inset: 0 auto 0 0; z-index: -1; width: var(--w); background: var(--c); opacity: .85; transform-origin: left; box-shadow: 0 0 10px color-mix(in srgb, var(--c) 60%, transparent); }
.stpop li::after { content: ""; position: absolute; inset: 0; z-index: -2; background: rgba(255,255,255,.05); }
.stpop li:nth-child(1) { --c: #6E747B; --w: 34%; } .stpop li:nth-child(2) { --c: #2F8FD8; --w: 50%; } .stpop li:nth-child(3) { --c: #3FAF55; --w: 66%; } .stpop li:nth-child(4) { --c: #C9952A; --w: 83%; } .stpop li:nth-child(5) { --c: #E030B8; --w: 100%; }

.stduel { display: grid; gap: 8px; margin-top: 2px; }
.stduel__bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #140A2A; border: 2px solid #4A3878; }
.stduel__bar b { font: 700 12px/1 var(--font-pixel); letter-spacing: .1em; color: #FFB3CF; text-transform: uppercase; }
.stduel__bar i { position: relative; flex: 1; height: 10px; background: repeating-linear-gradient(90deg, #3A2862 0 6px, #2A1A4A 6px 8px); }
.stduel__bar i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #FF4D8D 0 6px, #C2185B 6px 8px); transform-origin: left; transform: scaleX(.72); }
.stduel__moves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stduel__moves i { --c: #FF6FA8; padding: 8px 8px 7px; font: 700 13px/1.1 var(--font-pixel); font-style: normal; color: #12082A; background: var(--c); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); overflow-wrap: anywhere; }
.stduel__moves i:nth-child(2) { --c: #FF7A5C; } .stduel__moves i:nth-child(3) { --c: #4FC9F2; } .stduel__moves i:nth-child(4) { --c: #B388FF; }

.stroute { display: grid; gap: 8px; margin-top: 2px; }
.stroute__road { position: relative; height: 22px; background: linear-gradient(#0A0518, #0A0518) 0 15px / 100% 4px no-repeat, repeating-linear-gradient(90deg, #FFD27A 0 8px, transparent 8px 16px) 0 16px / 100% 2px no-repeat; }
.stroute__road .ico-taxi { position: absolute; left: 0; bottom: 6px; width: 32px; height: 20px; }
.stroute ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: stop; }
.stroute li { --c: #FF4FD8; counter-increment: stop; display: flex; align-items: center; gap: 6px; padding: 5px 8px 4px 6px; font: 600 13px/1.15 var(--font-pixel); color: #fff; background: rgba(255,255,255,.05); border: 2px solid var(--c); box-shadow: 0 0 8px color-mix(in srgb, var(--c) 45%, transparent); }
.stroute li::before { content: counter(stop); display: grid; place-items: center; width: 17px; height: 17px; flex: 0 0 auto; font-size: 11px; color: #12082A; background: var(--c); }
.stroute li:nth-child(2) { --c: #7CE07C; } .stroute li:nth-child(3) { --c: #B388FF; } .stroute li:nth-child(4) { --c: #4FB6FF; } .stroute li:nth-child(5) { --c: #FFD54F; }
.stchips { color: #FFE08A; }
.stchips__chip { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle, #FFD54F 0 34%, #fff 34% 44%, #E0584F 44%); box-shadow: 0 0 0 2px #fff, 0 0 10px rgba(255,213,79,.6); }

.stcard { position: relative; align-self: center; display: grid; justify-items: center; gap: 4px; width: 148px; margin: 6px auto 2px; padding: 6px 6px 10px; background: #FFF8E1; border: 4px solid #FFD54F; box-shadow: 0 0 0 2px #A8781A, 0 0 22px rgba(255,213,79,.55), 6px 8px 0 rgba(0,0,0,.4); }
.stcard__tag { justify-self: start; padding: 2px 5px; font: 700 10px/1 var(--font-pixel); letter-spacing: .08em; color: #fff; background: #6B2FBF; }
.stcard__rar { position: absolute; top: 8px; right: 7px; font: 700 8px/1 var(--font-pixel); letter-spacing: .06em; color: #A8781A; text-transform: uppercase; }
.stcard__art { width: 92px; height: 92px; border: 3px solid #25282D; background: #FFF0B8; }
.stcard__art svg { display: block; width: 100%; height: 100%; }
.stcard__stamp { position: absolute; top: 46%; left: 50%; padding: 3px 8px; font: 700 17px/1 var(--font-pixel); color: #E3245B; background: rgba(255,255,255,.9); border: 3px solid #E3245B; transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap; }

/* soon + foot */
.stsoon { position: relative; display: flex; align-items: center; gap: 16px; max-width: 760px; margin: 40px auto 0; padding: 18px 20px; border: 3px dashed #01CDFE; background: rgba(1,205,254,.07); box-shadow: 0 0 24px rgba(1,205,254,.18); }
.stsoon__ico { display: grid; place-items: center; width: 48px; height: 48px; flex: 0 0 auto; color: #12082A; background: #01CDFE; box-shadow: 3px 3px 0 #1E3C8C; }
.stsoon__ico .ico { width: 26px; height: 26px; }
.neon .stsoon h3 { margin: 0 0 4px; font: 700 20px/1.2 var(--font-pixel); color: #fff; }
.stsoon p { margin: 0; font: 400 15px/1.45 var(--font-text); color: #CFE9F7; }
.stsoon > div { flex: 1; min-width: 0; }
.stsoon__tag { flex: 0 0 auto; padding: 6px 8px 5px; font: 700 18px/1 var(--font-pixel); color: #01CDFE; border: 3px solid #01CDFE; text-shadow: 0 0 8px #01CDFE; }
.story__foot { display: grid; justify-items: center; gap: 16px; margin-top: 30px; text-align: center; }
.story__adult { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 15px/1.4 var(--font-text); color: #D9CCF5; }
@media (max-width: 639px) {
  .stb { margin-inline: -8px; }
  .stsoon { flex-wrap: wrap; }
  .stsoon__tag { position: absolute; top: -14px; right: 12px; background: #120A30; }
}

/* motion (paused off-screen by .is-off, off with reduced motion) */
.fx :is(.stc, .stsoon, .sr):not(.is-in) { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .fx :is(.stc, .stsoon, .sr).is-in:not(.no-anim) { animation: stepIn .46s steps(5, end) backwards; animation-delay: var(--rvd, 0ms); }
  .stb__stars { animation: blink 3.2s steps(2) infinite; }
  .stb__city .w2 { animation: blink 2.6s steps(1) infinite; }
  .stb__city .w3 { animation: blink 3.9s steps(1) infinite .7s; }
  .stb__hx { animation: stFlicker 6s steps(1) infinite; }
  .stb__new { animation: blink 1.4s steps(1) infinite; }
  .stb__walker { animation: stWalk 16s linear infinite; }
  .stb__walker .f1 { animation: stStep .5s steps(1) infinite; }
  .stb__walker .f2 { animation: stStep .5s steps(1) infinite reverse; }
  .stdiff i { animation: stDiff 7.5s steps(1) infinite; }
  .stends .is-secret { animation: stGlitch 4s steps(1) infinite; }
  .fx .stpop li::before { transform: scaleX(0); }
  .fx .stc.is-in .stpop li::before { animation: stGrow .7s steps(7, end) forwards; }
  .fx .stc.is-in .stpop li:nth-child(2)::before { animation-delay: .25s; } .fx .stc.is-in .stpop li:nth-child(3)::before { animation-delay: .5s; } .fx .stc.is-in .stpop li:nth-child(4)::before { animation-delay: .75s; } .fx .stc.is-in .stpop li:nth-child(5)::before { animation-delay: 1s; }
  .stpop li:nth-child(5) { animation: blink 1.6s steps(1) 1.8s 4 both; }
  .stduel__bar i::after { animation: stKlik 4.8s steps(12, end) infinite; }
  .stduel__moves i { animation: stMove 4.8s steps(1) infinite; }
  .stduel__moves i:nth-child(2) { animation-delay: 1.2s; } .stduel__moves i:nth-child(3) { animation-delay: 2.4s; } .stduel__moves i:nth-child(4) { animation-delay: 3.6s; }
  .stroute__road .ico-taxi { animation: stTaxi 8s steps(40, end) infinite; }
  .stcard { animation: float 3.4s steps(6) infinite; }
  .stcard__stamp { animation: stStamp 3.4s steps(1) infinite; }
  .stsoon__tag { animation: blink 1.2s steps(1) infinite; }
  .stchips__chip { animation: spinr 3s steps(8) infinite; }
}
@keyframes stWalk { from { transform: translateX(0); } to { transform: translateX(min(1020px, calc(100vw + 40px))); } }
@keyframes stStep { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes stFlicker { 0%, 100% { opacity: 1; } 71% { opacity: .55; } 72% { opacity: 1; } 74% { opacity: .7; } 75% { opacity: 1; } }
@keyframes stDiff { 0% { left: 0; } 33.33% { left: 33.333%; } 66.66% { left: 66.666%; } }
@keyframes stGlitch { 0%, 100% { transform: none; } 90% { transform: translateX(2px); } 92% { transform: translateX(-2px); } 94% { transform: none; } }
@keyframes stGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes stKlik { 0% { transform: scaleX(.12); } 85%, 100% { transform: scaleX(1); } }
@keyframes stMove { 0%, 24% { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 0 14px var(--c); } 25%, 100% { transform: none; box-shadow: inset 0 -3px 0 rgba(0,0,0,.25); } }
@keyframes stTaxi { from { left: 0; } to { left: calc(100% - 32px); } }
@keyframes stStamp { 0%, 30% { opacity: 0; transform: translate(-50%, -50%) rotate(-12deg) scale(1.6); } 31%, 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-12deg); } }
.stgames { display: flex; flex-wrap: wrap; gap: 5px; margin: 0; }
.stgames span { padding: 4px 7px 3px; font: 600 12.5px/1.15 var(--font-pixel); color: #FFE3F6; background: #2A1650; border: 2px solid #5B3A8C; }
@media (max-width: 479px) { .stb__new { display: none; } }

/* Play/download links while the web app is not live yet (config web: '') */
.is-soon { opacity: .55; pointer-events: none; cursor: default; filter: saturate(.6); }

/* Language list on phones: a full-width sheet under the button (site.js sets --langs-top), never off screen */
@media (max-width: 700px) {
  .langs ul { position: fixed; left: 16px; right: 16px; top: var(--langs-top, 64px); width: auto; max-height: calc(100dvh - var(--langs-top, 64px) - 16px); }
  .langs a { padding: 10px 10px; }
}

/* No double-tap zoom on phones (snel tikken op knoppen en spellen); pinch-zoom blijft gewoon werken. */
html, body, a, button, summary, label, input, [role="button"] { touch-action: manipulation; }

/* Hero: a neon "Hoekedex Story" ticket above the wordmark, jumps to #story */
.hero__story { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; max-width: 100%; margin-bottom: 14px; padding: 8px 12px 8px 8px; color: #FFE3F6; text-decoration: none; background: linear-gradient(90deg, rgba(40,12,72,.92), rgba(18,8,42,.92)); border: 2px solid #FF4FD8; box-shadow: 4px 4px 0 #6A1450, 0 0 18px rgba(255,79,216,.45), inset 0 0 12px rgba(255,79,216,.18); transition: transform .15s steps(2), box-shadow .15s steps(2); }
.hero__story:hover, .hero__story:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #6A1450, 0 0 26px rgba(255,79,216,.7), inset 0 0 12px rgba(255,79,216,.25); }
.hero__story:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #6A1450, 0 0 14px rgba(255,79,216,.5); }
.hs__new { padding: 4px 7px 3px; font: 700 12px/1 var(--font-pixel); letter-spacing: .1em; text-transform: uppercase; color: #12082A; background: #FFD54F; box-shadow: 2px 2px 0 #A8781A; }
.hs__name { font: 700 16px/1 var(--font-pixel); letter-spacing: .08em; white-space: nowrap; }
.hs__name b:first-child { color: #FFE3F6; text-shadow: 0 0 8px #FF4FD8; }
.hs__name b:last-child { color: #9BE7FF; text-shadow: 0 0 8px rgba(1,205,254,.9); }
.hs__cta { font-size: 14px; font-weight: 600; color: #F5B8EB; }
.hero__story .ico { width: 14px; height: 14px; color: #FFD54F; }
@media (prefers-reduced-motion: no-preference) {
  .hs__new { animation: blink 1.4s steps(1) infinite; }
  .hero__story { animation: hsGlow 2.4s steps(6) infinite alternate; }
  @keyframes hsGlow { to { box-shadow: 4px 4px 0 #6A1450, 0 0 28px rgba(255,79,216,.75), inset 0 0 16px rgba(255,79,216,.3); } }
  .hx-intro .hero .hero__story { animation: fadeUp calc(var(--k) * 300ms) steps(4) both, hsGlow 2.4s steps(6) calc(var(--k) * 900ms) infinite alternate; animation-delay: calc(var(--k) * 450ms), calc(var(--k) * 900ms); }
}