/* beladiya.com: one stylesheet for every page.
   Palette and type are the games' own (lib/ui/theme/palette.dart): warm
   cream paper, cocoa ink, terracotta for the main action, sun for rewards.
   Each game page sets body.theme-<slug>, which swaps in that game's inks. */

@font-face {
  font-family: "Nunito";
  src: url("/assets/fonts/nunito-latin.woff2?v=2eabd2e2b0") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

:root {
  --cream: #FFF3DC;
  --cream-light: #FFF8EC;
  --cream-deep: #F6E4C6;
  --paper: #FFFBF2;
  --ink: #4A3728;
  --ink-soft: #7A6451;
  --terracotta: #B0522F;
  --terracotta-deep: #8E4126;
  --sun: #FFC65C;
  --sun-deep: #F2A93B;
  --sun-pale: #FFE8B5;
  --leaf: #5F8F64;

  --bg: var(--cream);
  --surface: var(--paper);
  --edge: var(--cream-deep);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --link: var(--terracotta);
  --accent: var(--terracotta);
  --accent-deep: var(--terracotta-deep);
  --on-accent: var(--paper);
  --focus: var(--ink);

  /* Inks for step numbers and feature icons; each game overrides them. */
  --i1: #B0522F;
  --i2: #3B6C8C;
  --i3: #4F8257;
  --i4: #85579A;
  --i5: #A9741A;
  --i6: #2E7D78;

  --radius-l: 28px;
  --radius: 20px;
  --lift: 0 6px 0 rgba(74, 55, 40, .07);
  --gutter: clamp(16px, 4vw, 32px);
  color-scheme: light;
}

.theme-dartlark {
  --dusk-bg: #2B2232;
  --dusk-card: #382D41;
  --dusk-edge: #4B3E57;
  --dusk-ink: #FFF3DC;
  --dusk-soft: #DCCFDF;
}

.theme-ring-spike {
  /* The rings themselves, for decoration around text, never as text. */
  --r1: #2DA8E3;
  --r2: #E23D3A;
  --r3: #5DBE3C;
  --r4: #9150DB;
  --r5: #F59223;
  --r6: #E9B010;
  --dusk-bg: #1C2340;
  --dusk-card: #2B3560;
  --dusk-edge: #3A4675;
  --dusk-ink: #F2F4FF;
  --dusk-soft: #C9D0EC;
  --meadow-bg: #E3ECD6;
}

.theme-cat-puzzle {
  /* The board's region fills and their borders (the fill mixed 35% towards
     ink, as lib/ui/theme.dart draws them), for tiles behind ink text. */
  --g1: #FFD8A8; --g1-edge: #C0A07B;
  --g2: #A8D5BA; --g2-edge: #879E87;
  --g3: #F7B7C3; --g3-edge: #BA8A8D;
  --g4: #9EC5E8; --g4-edge: #8193A5;
  --g5: #E8D48A; --g5-edge: #B19D68;
  --g6: #C5B0DE; --g6-edge: #9A869E;
  --ginger: #F4A65B;
  /* The sky of the app icon and feature graphic, pale enough for ink text. */
  --sky-bg: #DCEFFA;
  --sky-deep: #3F8DC6;
}

.theme-ball-sort {
  /* The balls' own inks (lib/models/ball.dart). Step numerals sit on the
     deeper four in paper; the others only ever rim a pastel. */
  --b-red: #E8484F; --b-blue: #2F80E0; --b-purple: #9457D6; --b-teal: #159C97;
  --b-green: #3DB86A; --b-pink: #F2709F; --b-orange: #F2803A; --b-yellow: #FFD23D;
  /* The game's pastels (Palette.pastels), for icon balls behind ink. */
  --p1: #9EC5E8; --p2: #A8D5BA; --p3: #F7B7C3; --p4: #FFD8A8; --p5: #C5B0DE; --p6: #E8D48A;
  /* The boards behind the screenshots: sage for levels, mist for the Daily. */
  --meadow-bg: #EAF2E1;
  --sky-bg: #E6F0F5;
}

.theme-tootwick {
  /* The toy lacquers (lib/ui/theme/palette.dart, Palette.inks). Step
     numerals sit in paper on the four the CSS picks; the others only ever
     dash a parking bay around an ink icon. */
  --t-red: #E5483D; --t-blue: #2F7FD8; --t-yellow: #F4C531; --t-green: #34A35A;
  --t-purple: #8A57D1; --t-orange: #F2852E; --t-pink: #EC6FB0;
  /* Its three looks: Night drive (board_theme.dart dusk), Park and the
     icon's sky. */
  --dusk-bg: #1F2233;
  --dusk-card: #2A2D40;
  --dusk-ink: #FFF3DC;
  --dusk-soft: #BFC3D6;
  --meadow-bg: #E4EEDB;
  --sky-bg: #DCEFFA;
}

/* -- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 1.0625rem/1.6 "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0 0 .45em; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 7vw, 4.4rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 4vw, 2.55rem); font-weight: 850; }
h3 { font-size: 1.2rem; font-weight: 850; }
p { margin: 0 0 1em; }
a { color: var(--link); font-weight: 750; text-decoration-thickness: .09em; text-underline-offset: .18em; }
a:hover { color: var(--accent-deep); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
code { font: .92em/1 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--cream-deep); padding: .1em .35em; border-radius: 6px; overflow-wrap: anywhere; }
mark.todo { background: #FFE08A; color: var(--ink); padding: 0 .35em; border-radius: 6px; outline: 2px dashed var(--terracotta); font-weight: 800; }

.wrap { width: min(1120px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { max-width: 680px; }
.center { text-align: center; }
.actions.center { justify-content: center; }

.icon {
  display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -.2em;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 12px;
  background: var(--ink); color: var(--paper); text-decoration: none;
}
.skip:focus { top: 12px; }

/* -- header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 243, 220, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--edge);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand img { width: 40px; height: 40px; }
.brand-name { font-size: 1.3rem; font-weight: 900; letter-spacing: -.01em; }
.brand-sub { font-size: 1.05rem; font-weight: 700; color: var(--ink-soft); margin-left: -4px; }
.site-nav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.site-nav a {
  display: block; padding: 9px 14px; border-radius: 999px; color: var(--ink);
  font-weight: 800; text-decoration: none; white-space: nowrap;
}
.site-nav a:hover { background: var(--cream-deep); color: var(--ink); }
.site-nav a[aria-current] { background: var(--paper); box-shadow: inset 0 0 0 2px var(--cream-deep); }
.site-nav .nav-games { display: none; }
@media (max-width: 860px) { .brand-sub { display: none; } }
@media (max-width: 1000px) {
  .site-nav .nav-game { display: none; }
  .site-nav .nav-games { display: block; }
}
@media (max-width: 340px) {
  .brand-name { display: none; }
  .site-nav a { padding: 8px 10px; }
}

/* -- buttons ------------------------------------------------------------- */
.btn {
  --b: var(--accent); --b-deep: var(--accent-deep); --b-ink: var(--on-accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 52px; padding: 12px 24px; border: 0; border-radius: 18px;
  background: var(--b); color: var(--b-ink); box-shadow: 0 5px 0 var(--b-deep);
  font: inherit; font-size: 1.05rem; font-weight: 850; line-height: 1.2; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { color: var(--b-ink); transform: translateY(-1px); box-shadow: 0 6px 0 var(--b-deep); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--b-deep); }
.btn-sun { --b: var(--sun); --b-deep: var(--sun-deep); --b-ink: var(--ink); }
.btn-paper { --b: var(--paper); --b-deep: var(--cream-deep); --b-ink: var(--ink); box-shadow: inset 0 0 0 2px var(--cream-deep), 0 5px 0 var(--cream-deep); }
.btn-paper:hover { box-shadow: inset 0 0 0 2px var(--cream-deep), 0 6px 0 var(--cream-deep); }
.btn-paper:active { box-shadow: inset 0 0 0 2px var(--cream-deep), 0 1px 0 var(--cream-deep); }
.btn .icon { width: 1.15em; height: 1.15em; }

.store-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 22px 8px 16px;
  border-radius: 16px; background: #231A14; color: #FFFFFF; text-decoration: none;
  box-shadow: 0 5px 0 #0E0A08; transition: transform .12s ease, box-shadow .12s ease;
}
.store-btn:hover { color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 6px 0 #0E0A08; }
.store-btn .icon { width: 26px; height: 26px; }
.store-btn small { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.2; }
.store-btn strong { display: block; font-size: 1.22rem; font-weight: 900; line-height: 1.15; }
.store-btn.is-soon {
  background: var(--paper); color: var(--ink); box-shadow: none;
  border: 2px dashed var(--ink-soft); cursor: default;
}
.store-btn.is-soon:hover { transform: none; }
.store-btn.is-soon .icon { color: var(--ink-soft); }
.store-btn.is-small { min-height: 48px; padding: 6px 16px 6px 12px; gap: 9px; }
.store-btn.is-small .icon { width: 20px; height: 20px; }
.store-btn.is-small strong { font-size: 1rem; }
.store-btn.is-small small { font-size: .66rem; }

/* -- shared blocks ------------------------------------------------------- */
.card { background: var(--surface); border: 2px solid var(--edge); border-radius: var(--radius-l); box-shadow: var(--lift); }
.section { padding-block: clamp(56px, 9vw, 104px); }
.section + .section:not([class*="tone-"]) { padding-top: 0; }
.hero + .section:not([class*="tone-"]) { padding-top: clamp(16px, 3vw, 32px); }
.section-head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 40px); }
.section-lead { color: var(--text-soft); font-size: 1.15rem; margin: 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; margin: 0 0 14px; color: var(--text-soft); font-weight: 850; font-size: 1.05rem; }
.lead { font-size: 1.18rem; max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }
.app-icon { border-radius: 23%; box-shadow: 0 0 0 2px var(--edge); }

.chips, .facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li, .facts li {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 999px;
  background: var(--cream); border: 2px solid var(--edge); color: var(--ink); font-size: .93rem; font-weight: 800;
}
.facts { margin-top: 28px; }
.facts li { background: var(--paper); }
.facts .icon { color: var(--leaf); width: 1.05em; height: 1.05em; stroke-width: 3; }

.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { display: flex; gap: 10px; margin: 0 0 .6em; }
.ticks .icon { margin-top: .2em; color: var(--leaf); stroke-width: 3; }

/* -- hero ---------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: clamp(36px, 7vw, 88px) clamp(48px, 7vw, 88px); }
.hero-grid { display: grid; gap: clamp(36px, 6vw, 56px); align-items: center; }
.hero-copy { position: relative; z-index: 1; }
.hero h1 { margin-bottom: .2em; }
.tagline { font-size: clamp(1.3rem, 2.8vw, 1.65rem); font-weight: 850; color: var(--accent); line-height: 1.3; margin-bottom: .7em; }
.hero-art { position: relative; display: grid; place-items: center; isolation: isolate; }
@media (min-width: 900px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } }

/* Sunburst behind the art, like the games' home screens. */
.hero-art::before {
  content: ""; position: absolute; z-index: -1; inset: -18% -30%;
  background: repeating-conic-gradient(from 4deg, rgba(255, 198, 92, .42) 0deg 8deg, transparent 8deg 16deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 30%, transparent 100%);
}

.phone {
  margin: 0; padding: 8px; border-radius: 34px; background: #2A211C;
  box-shadow: 0 26px 50px -22px rgba(74, 55, 40, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .08);
}
.phone img { width: 100%; border-radius: 27px; }
.phone-stack { position: relative; width: min(300px, 64vw); margin-right: 18%; }
.phone-main { position: relative; z-index: 2; }
.phone-back { position: absolute; z-index: 1; width: 80%; top: 11%; left: 60%; transform: rotate(7deg); }

/* Studio home: the game icons as tiles on a square, like the five on a die:
   one in each corner and one in the middle, with even gaps between them and
   the studio mark in the gap above the middle tile. Sizes and places are
   shares of the square, so the pattern holds at every width. */
.home-art { width: min(100%, 460px); aspect-ratio: 1; justify-self: center; margin-inline: auto; }
/* On one column, keep the tilted corners and paper rims clear of the screen edge. */
@media (max-width: 899px) { .home-art { width: min(88%, 360px); } }
.tile {
  position: absolute; width: 34%; border-radius: 24%;
  box-shadow: 0 0 0 6px var(--paper), 0 22px 38px -18px rgba(74, 55, 40, .5);
}
.tile-0 { left: 0; top: 0; transform: rotate(-5deg); }
.tile-1 { right: 0; top: 0; transform: rotate(5deg); }
.tile-2 { left: 0; bottom: 0; transform: rotate(4deg); }
.tile-3 { right: 0; bottom: 0; transform: rotate(-4deg); }
.tile-4 { left: 50%; top: 50%; width: 30%; transform: translate(-50%, -50%) rotate(-2deg); z-index: 1; }
.tile-mark { position: absolute; z-index: 2; width: 14%; left: 50%; top: 11%; transform: translate(-50%, -50%) rotate(8deg); filter: drop-shadow(0 8px 12px rgba(74, 55, 40, .3)); }

.theme-dartlark .game-hero {
  background: url("/assets/img/decor/arrows.svg?v=30d15abaa4") no-repeat left -140px bottom -150px / 660px auto, var(--cream);
}
.theme-ring-spike .game-hero {
  background: url("/assets/img/decor/rings.svg?v=b94d58226d") no-repeat right -160px top -60px / 760px auto,
    linear-gradient(180deg, var(--cream-light), var(--cream));
}
.theme-ring-spike .game-hero .hero-art::before {
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 248, 236, 0));
  -webkit-mask-image: none; mask-image: none;
}
/* Cat Puzzle: board fragments in the corner and the icon's sky washing into
   the cream; the sunburst stays, as on the game's home screen. */
.theme-cat-puzzle .game-hero {
  background: url("/assets/img/decor/board.svg?v=b947800f54") no-repeat right -150px top -30px / 720px auto,
    linear-gradient(180deg, #E6F4FC, var(--cream) 72%);
}
/* Ball Sort: tubes of balls in the corner and pale loose balls drifting, on
   the warm paper glow of its icon; the sunburst stays, as in the icon. */
.theme-ball-sort .game-hero {
  background: url("/assets/img/decor/tubes.svg?v=38322e3fa0") no-repeat right -24px top 20px / 600px auto,
    radial-gradient(90% 70% at 80% 30%, var(--paper), var(--cream));
}
/* Tootwick: a road of toy vehicles and waiting passengers in the corner,
   under the icon's sky washing into the cream. */
.theme-tootwick .game-hero {
  background: url("/assets/img/decor/lot.svg?v=fe83835d73") no-repeat right -40px bottom -40px / 640px auto,
    linear-gradient(180deg, #EAF6FD, var(--cream) 72%);
}
/* On one column the decoration would sit behind the text: keep it to the corner. */
@media (max-width: 899px) {
  .theme-dartlark .game-hero { background-size: 420px auto, auto; background-position: left -190px bottom -150px, 0 0; }
  .theme-ring-spike .game-hero { background-size: 400px auto, auto; background-position: right -230px top -120px, 0 0; }
  .theme-cat-puzzle .game-hero { background-size: 400px auto, auto; background-position: right -200px top -110px, 0 0; }
  .theme-ball-sort .game-hero { background-size: 380px auto, auto; background-position: right -190px top -150px, 0 0; }
  .theme-tootwick .game-hero { background-size: 380px auto, auto; background-position: right -150px top -150px, 0 0; }
}

/* -- steps --------------------------------------------------------------- */
.steps { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin: 0; padding: 0; list-style: none; }
.step { padding: 26px 24px 22px; }
.step p { margin: 0; color: var(--text-soft); }
.step-n {
  display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 15px;
  background: var(--c, var(--accent)); color: var(--paper); font-size: 1.45rem; font-weight: 900;
  box-shadow: 0 4px 0 rgba(0, 0, 0, .14);
}
.step:nth-child(4n + 1) { --c: var(--i1); }
.step:nth-child(4n + 2) { --c: var(--i2); }
.step:nth-child(4n + 3) { --c: var(--i3); }
.step:nth-child(4n + 4) { --c: var(--i4); }
/* Ring Spike numbers sit in an open ring, like the game's pieces. */
.theme-ring-spike .step-n { position: relative; background: var(--paper); color: var(--ink); border-radius: 50%; box-shadow: none; width: 56px; height: 56px; }
.theme-ring-spike .step-n::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 7px solid var(--r, var(--r1)); border-top-color: transparent; transform: rotate(45deg);
}
.theme-ring-spike .step-n span { position: relative; }
.theme-ring-spike .step:nth-child(4n + 1) { --r: var(--r1); }
.theme-ring-spike .step:nth-child(4n + 2) { --r: var(--r2); }
.theme-ring-spike .step:nth-child(4n + 3) { --r: var(--r3); }
.theme-ring-spike .step:nth-child(4n + 4) { --r: var(--r4); }
/* Cat Puzzle numbers sit on board cells: a region fill with its darker rim. */
.theme-cat-puzzle .step-n { background: var(--g, var(--g1)); color: var(--ink); box-shadow: inset 0 0 0 3px var(--g-edge, var(--g1-edge)); border-radius: 14px; }
.theme-cat-puzzle .step:nth-child(4n + 1) { --g: var(--g1); --g-edge: var(--g1-edge); }
.theme-cat-puzzle .step:nth-child(4n + 2) { --g: var(--g2); --g-edge: var(--g2-edge); }
.theme-cat-puzzle .step:nth-child(4n + 3) { --g: var(--g3); --g-edge: var(--g3-edge); }
.theme-cat-puzzle .step:nth-child(4n + 4) { --g: var(--g4); --g-edge: var(--g4-edge); }
/* Ball Sort numbers are balls: a deep ball ink with a rim and one small
   gloss dot, kept off the numeral so paper text keeps its contrast. */
.theme-ball-sort .step-n {
  width: 54px; height: 54px; border-radius: 50%;
  background: radial-gradient(circle at 27% 23%, rgba(255, 255, 255, .7) 0 5px, rgba(255, 255, 255, 0) 6px), var(--c);
  box-shadow: inset 0 0 0 3px rgba(74, 55, 40, .18), inset 0 -6px 0 rgba(74, 55, 40, .1), 0 4px 0 rgba(74, 55, 40, .12);
}
.theme-ball-sort .step:nth-child(4n + 1) { --c: var(--b-blue); }
.theme-ball-sort .step:nth-child(4n + 2) { --c: var(--b-red); }
.theme-ball-sort .step:nth-child(4n + 3) { --c: var(--b-purple); }
.theme-ball-sort .step:nth-child(4n + 4) { --c: var(--b-teal); }
/* Tootwick numbers are the seat-count pills under each parked vehicle. */
.theme-tootwick .step-n { width: 64px; height: 44px; border-radius: 999px; box-shadow: inset 0 0 0 3px var(--paper), 0 0 0 2px rgba(74, 55, 40, .16), 0 4px 0 rgba(74, 55, 40, .12); }
.theme-tootwick .step:nth-child(4n + 1) { --c: var(--t-red); }
.theme-tootwick .step:nth-child(4n + 2) { --c: var(--t-blue); }
.theme-tootwick .step:nth-child(4n + 3) { --c: var(--t-purple); }
.theme-tootwick .step:nth-child(4n + 4) { --c: var(--t-green); }

/* -- feature grid -------------------------------------------------------- */
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); margin: 0; padding: 0; list-style: none; }
.feature-grid.four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
/* Four cards wrap 3 + 1 at tablet widths; two by two reads better. */
@media (min-width: 560px) and (max-width: 1079px) { .feature-grid.four { grid-template-columns: 1fr 1fr; } }
.feature { padding: 26px 24px 24px; }
.feature p { margin: 0; color: var(--text-soft); }
.feature-icon {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 16px;
  color: var(--c, var(--accent)); background: var(--cream);
  background: color-mix(in srgb, var(--c, var(--accent)) 13%, var(--paper));
}
.feature-icon .icon { width: 28px; height: 28px; }
.feature-icon.big { width: 72px; height: 72px; border-radius: 22px; margin: 0; }
.feature-icon.big .icon { width: 36px; height: 36px; }
.feature:nth-child(6n + 1) { --c: var(--i1); }
.feature:nth-child(6n + 2) { --c: var(--i2); }
.feature:nth-child(6n + 3) { --c: var(--i3); }
.feature:nth-child(6n + 4) { --c: var(--i4); }
.feature:nth-child(6n + 5) { --c: var(--i5); }
.feature:nth-child(6n + 6) { --c: var(--i6); }
.theme-ring-spike .feature-icon { border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 5px var(--r, var(--r1)); color: var(--ink); }
.theme-ring-spike .feature:nth-child(6n + 1) { --r: var(--r1); }
.theme-ring-spike .feature:nth-child(6n + 2) { --r: var(--r2); }
.theme-ring-spike .feature:nth-child(6n + 3) { --r: var(--r3); }
.theme-ring-spike .feature:nth-child(6n + 4) { --r: var(--r4); }
.theme-ring-spike .feature:nth-child(6n + 5) { --r: var(--r5); }
.theme-ring-spike .feature:nth-child(6n + 6) { --r: var(--r6); }
.theme-cat-puzzle .feature-icon { background: var(--g, var(--g1)); color: var(--ink); box-shadow: inset 0 0 0 3px var(--g-edge, var(--g1-edge)); border-radius: 14px; }
.theme-cat-puzzle .feature:nth-child(6n + 1) { --g: var(--g1); --g-edge: var(--g1-edge); }
.theme-cat-puzzle .feature:nth-child(6n + 2) { --g: var(--g2); --g-edge: var(--g2-edge); }
.theme-cat-puzzle .feature:nth-child(6n + 3) { --g: var(--g3); --g-edge: var(--g3-edge); }
.theme-cat-puzzle .feature:nth-child(6n + 4) { --g: var(--g4); --g-edge: var(--g4-edge); }
.theme-cat-puzzle .feature:nth-child(6n + 5) { --g: var(--g5); --g-edge: var(--g5-edge); }
.theme-cat-puzzle .feature:nth-child(6n + 6) { --g: var(--g6); --g-edge: var(--g6-edge); }
/* Ball Sort icons sit in pastel balls rimmed with the matching ball ink. */
.theme-ball-sort .feature-icon {
  border-radius: 50%; color: var(--ink);
  background: radial-gradient(circle at 27% 23%, rgba(255, 255, 255, .8) 0 4px, rgba(255, 255, 255, 0) 5px), var(--p, var(--p1));
  box-shadow: inset 0 0 0 3px var(--r, var(--b-blue)), inset 0 -6px 0 rgba(74, 55, 40, .08);
}
.theme-ball-sort .feature:nth-child(6n + 1) { --p: var(--p1); --r: var(--b-blue); }
.theme-ball-sort .feature:nth-child(6n + 2) { --p: var(--p2); --r: var(--b-green); }
.theme-ball-sort .feature:nth-child(6n + 3) { --p: var(--p3); --r: var(--b-pink); }
.theme-ball-sort .feature:nth-child(6n + 4) { --p: var(--p4); --r: var(--b-orange); }
.theme-ball-sort .feature:nth-child(6n + 5) { --p: var(--p5); --r: var(--b-purple); }
.theme-ball-sort .feature:nth-child(6n + 6) { --p: var(--p6); --r: var(--b-yellow); }
/* Tootwick icons sit in an empty parking bay: a dashed slanted outline. */
.theme-tootwick .feature-icon { background: var(--paper); color: var(--ink); border: 3px dashed var(--r, var(--t-orange)); border-radius: 14px; transform: skewX(-8deg); }
.theme-tootwick .feature-icon .icon { transform: skewX(8deg); }
.theme-tootwick .feature:nth-child(6n + 1) { --r: var(--t-orange); }
.theme-tootwick .feature:nth-child(6n + 2) { --r: var(--t-blue); }
.theme-tootwick .feature:nth-child(6n + 3) { --r: var(--t-yellow); }
.theme-tootwick .feature:nth-child(6n + 4) { --r: var(--t-green); }
.theme-tootwick .feature:nth-child(6n + 5) { --r: var(--t-purple); }
.theme-tootwick .feature:nth-child(6n + 6) { --r: var(--t-pink); }

/* -- showcase bands ------------------------------------------------------ */
.showcase-grid { display: grid; gap: clamp(32px, 6vw, 64px); align-items: center; }
@media (min-width: 900px) {
  .showcase-grid { grid-template-columns: 1fr 1fr; }
  .showcase.reverse .showcase-copy { order: 2; }
}
.showcase-copy { max-width: 34em; }
.showcase-copy p { font-size: 1.12rem; }
.showcase-art { display: flex; justify-content: center; align-items: flex-start; gap: clamp(12px, 3vw, 26px); }
.showcase-art .phone { width: min(240px, 42vw); }
.showcase-art.phones-2 .phone:nth-child(2) { margin-top: 44px; }
.showcase-art.phones-3 .phone { width: min(200px, 28vw); padding: 6px; border-radius: 26px; }
.showcase-art.phones-3 .phone img { border-radius: 21px; }
.showcase-art.phones-3 .phone:nth-child(2) { margin-top: -26px; }
.showcase-art.phones-3 .phone:nth-child(3) { margin-top: 26px; }

.tone-sun { background: var(--sun-pale); }
.tone-meadow { --link: var(--terracotta-deep); background: var(--meadow-bg, #E3ECD6); }
.tone-sky {
  --link: var(--terracotta-deep);
  background: radial-gradient(110% 90% at 75% 40%, #F1F9FE, var(--sky-bg, #DCEFFA));
}
.tone-sky .phone { box-shadow: 0 26px 50px -22px rgba(63, 141, 198, .55), inset 0 0 0 1.5px rgba(255, 255, 255, .08); }
.tone-dusk {
  --text: var(--dusk-ink); --text-soft: var(--dusk-soft); --link: var(--sun); --focus: var(--dusk-ink);
  background: var(--dusk-bg); color: var(--dusk-ink);
}
.tone-dusk .ticks .icon { color: var(--sun); }
.tone-dusk .phone { background: #0F0B12; box-shadow: 0 26px 50px -20px rgba(0, 0, 0, .7), inset 0 0 0 1.5px rgba(255, 255, 255, .12); }
.theme-ring-spike .tone-dusk { background: radial-gradient(120% 90% at 70% 50%, var(--dusk-card), var(--dusk-bg)); }

/* -- gallery ------------------------------------------------------------- */
.gallery { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 10px 4px 24px; margin-inline: -4px; scrollbar-width: thin; }
.gallery ul { display: grid; grid-auto-flow: column; grid-auto-columns: min(220px, 60vw); gap: 18px; margin: 0; padding: 0; list-style: none; }
.gallery li { scroll-snap-align: start; }
.gallery .phone { padding: 6px; border-radius: 26px; }
.gallery .phone img { border-radius: 21px; }
@media (min-width: 1000px) {
  .gallery { overflow: visible; }
  .gallery ul { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; gap: 28px 24px; }
}

/* -- FAQ ----------------------------------------------------------------- */
.faq-item { max-width: 820px; margin-bottom: 12px; background: var(--surface); border: 2px solid var(--edge); border-radius: var(--radius); }
.faq-item summary { position: relative; padding: 18px 60px 18px 22px; font-size: 1.12rem; font-weight: 850; cursor: pointer; list-style: none; border-radius: var(--radius); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-52%);
  color: var(--accent); font-size: 1.7rem; font-weight: 900; line-height: 1;
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item > div { padding: 0 22px 20px; color: var(--text-soft); }

/* -- call to action ------------------------------------------------------ */
.cta-inner { display: grid; gap: 24px; align-items: center; padding: clamp(26px, 5vw, 48px); grid-template-columns: auto 1fr; }
.cta-icon { width: clamp(80px, 12vw, 112px); }
.cta-copy h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
.cta-copy p { margin: 0 0 .4em; color: var(--text-soft); }
.cta-small { font-size: .95rem; }
.cta-store { grid-column: 1 / -1; }
@media (min-width: 900px) { .cta-inner { grid-template-columns: auto 1fr auto; } .cta-store { grid-column: auto; } }

/* -- studio home --------------------------------------------------------- */
.home-hero { background: radial-gradient(90% 70% at 85% 30%, var(--cream-light), var(--cream)); }
.game-cards { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) {
  /* Two across at every wide size: four games read as two by two, and the
     cards keep room for their art, chips and two buttons. */
  .game-cards { grid-template-columns: 1fr 1fr; }
  /* An odd card out spans the row, laid out sideways so its art keeps the
     same size as its neighbours' instead of filling the screen. */
  .game-card:last-child:nth-child(odd) { grid-column: 1 / -1; flex-direction: row; align-items: center; }
  .game-card:last-child:nth-child(odd) .game-card-media {
    flex: none; width: calc(50% - 12px); margin: 16px 0 16px 16px; border: 2px solid var(--edge); border-radius: 20px;
  }
}
.game-card { display: flex; flex-direction: column; overflow: hidden; }
.game-card-media { width: 100%; aspect-ratio: 1024 / 500; object-fit: cover; border-bottom: 2px solid var(--edge); }
.game-card-body { display: flex; flex: 1; flex-direction: column; gap: 16px; padding: 24px clamp(20px, 3vw, 28px) 28px; }
.game-card-body > p { margin: 0; color: var(--text-soft); font-size: 1.08rem; }
.game-card-head { display: flex; align-items: center; gap: 14px; }
.game-card-head .app-icon { width: 64px; height: 64px; }
.game-card h3 { margin: 0; font-size: 1.7rem; font-weight: 900; }
.game-card h3 a { color: var(--ink); text-decoration: none; }
.game-card h3 a:hover { text-decoration: underline; }
.subtitle { margin: 0; color: var(--accent); font-weight: 850; }
.game-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 6px; }

.contact-card { display: grid; gap: 22px; align-items: center; padding: clamp(26px, 5vw, 48px); grid-template-columns: auto 1fr; background: var(--sun-pale); border-color: #F7D891; }
.contact-card h2 { margin-bottom: .2em; }
.contact-card p { margin: 0; color: var(--ink); }
.contact-card .btn { grid-column: 1 / -1; justify-self: start; overflow-wrap: anywhere; }
@media (min-width: 900px) { .contact-card { grid-template-columns: auto 1fr auto; } .contact-card .btn { grid-column: auto; } }

/* -- legal pages --------------------------------------------------------- */
.legal { max-width: 860px; padding-block: 32px 96px; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; list-style: none; color: var(--text-soft); font-weight: 750; }
.breadcrumb li + li::before { content: "\203A"; margin-right: 6px; }
.legal-head { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 22px; }
.legal-head .app-icon { width: 72px; height: 72px; flex: none; margin-top: 6px; }
.legal h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); margin-bottom: .25em; }
.meta, .policy-preamble .sub, .policy-preamble .updated { color: var(--text-soft); font-weight: 750; }
.policy-preamble p:last-child { margin-bottom: 0; }
.glance { margin: 26px 0; padding: 22px 26px 12px; background: var(--sun-pale); border-color: #F7D891; }
.glance h2 { font-size: 1.35rem; }
.toc { margin: 26px 0 32px; padding: 22px 26px 18px; }
.toc h2 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: .07em; color: var(--text-soft); }
.toc ol { margin: 0; padding-left: 1.35em; columns: 2 230px; column-gap: 32px; }
.toc li { margin-bottom: .35em; break-inside: avoid; }
.legal-body > section { margin-bottom: 16px; padding: 8px clamp(18px, 3vw, 28px) 12px; }
.legal-body h2 { margin-top: 18px; font-size: 1.45rem; scroll-margin-top: 92px; }
.legal-body h2 .n { color: var(--accent); }
.legal-body h3 { margin-top: 22px; font-size: 1.15rem; scroll-margin-top: 92px; }
.legal-body h4 { margin: 18px 0 .4em; font-size: 1.05rem; font-weight: 850; }
.legal-body ul { padding-left: 1.3em; }
.legal-body li { margin-bottom: .45em; }
.policy-game { border-left: 8px solid var(--c, var(--accent)); }
.policy-game.theme-dartlark { --c: var(--sun-deep); }
.policy-game.theme-ring-spike { --c: #2DA8E3; }
.policy-game.theme-cat-puzzle { --c: var(--ginger); }
.policy-game.theme-ball-sort { --c: var(--b-red); }
.policy-game.theme-tootwick { --c: var(--t-orange); }
.policy-game-head { display: flex; align-items: center; gap: 16px; margin: 18px 0 14px; }
.policy-game-head h2 { margin: 0; }
.policy-game-head p { margin: 0; }
.policy-game-head .app-icon { width: 56px; height: 56px; }
.legal-more { margin-top: 28px; color: var(--text-soft); }

/* -- footer -------------------------------------------------------------- */
.site-footer { --focus: var(--cream); background: var(--ink); color: var(--cream); padding-block: 56px 28px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer-about { max-width: 320px; }
.footer-about p { margin: 14px 0 0; color: #E5D8C6; }
.brand-footer { color: var(--cream); }
.brand-footer:hover { color: var(--cream); }
.brand-footer .brand-name { font-size: 1.15rem; }
.site-footer h2 { margin-bottom: 12px; color: var(--sun); font-size: .92rem; font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: var(--cream); overflow-wrap: anywhere; }
.site-footer a:hover { color: var(--sun); }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 40px; padding-top: 20px; border-top: 1px solid rgba(255, 243, 220, .16); color: #D9CBB8; font-size: .92rem; }
.footer-base p { margin: 0; }

/* -- motion and print ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}
@media print {
  .site-header, .site-footer, .skip, .toc, .breadcrumb { display: none; }
  body { background: #FFFFFF; }
  .card { box-shadow: none; border-color: #DDDDDD; }
}