/* =========================================================================
   Aritan Games: "Game showcase" direction
   One stylesheet for every page. Dark-led (Night), with a Cream counterpart
   under prefers-color-scheme: light. Written with logical properties so the
   same rules serve the Hebrew (RTL) pages.
   ========================================================================= */

/* ---------- Fonts: Rubik (OFL), self-hosted. Latin, Cyrillic, Hebrew. ---------- */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/rubik-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/rubik-latin-ext-wght-normal.woff2) format("woff2");
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/rubik-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/rubik-cyrillic-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(fonts/rubik-hebrew-wght-normal.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}

/* ---------- Tokens ---------- */
:root {
  /* Brand (fixed) */
  --red: #F5372A;
  --red-strong: #D0281B;   /* for buttons with small white text */
  --yellow: #FFB800;
  --blue: #0091FF;
  --green: #00B85C;
  --ink: #1C1829;
  --night: #17141F;
  --cream: #FFF7EC;

  /* Scheme: dark-led */
  color-scheme: dark;
  --bg: var(--night);
  --bg-2: #1D1927;
  --surface: #241F31;
  --surface-2: #2D2740;
  --line: rgb(255 247 236 / .12);
  --text: var(--cream);
  --text-2: #C3BBD1;
  --link: var(--yellow);
  --focus: var(--yellow);
  --btn-bg: var(--yellow);
  --btn-fg: var(--ink);
  --ghost-fg: var(--cream);
  --ghost-line: rgb(255 247 236 / .32);
  --glow-a: rgb(255 140 70 / .30);
  --glow-b: rgb(80 86 230 / .45);
  --glow-c: rgb(0 170 200 / .26);
  --ring: rgb(255 247 236 / .07);
  --phone-shadow: 0 50px 90px -30px rgb(0 0 0 / .75), 0 18px 34px -14px rgb(0 0 0 / .5);
  --logo-normal: none;

  /* Type */
  --font: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-body: clamp(1.0625rem, 1rem + .2vw, 1.125rem);
  --fs-lead: clamp(1.125rem, 1.02rem + .45vw, 1.375rem);
  --fs-display: clamp(2.875rem, 1.6rem + 5.4vw, 6.25rem);
  --fs-h2: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);
  --fs-h3: clamp(2.5rem, 1.6rem + 3.4vw, 4.75rem);
  --track-tight: -0.035em;

  /* Layout */
  --gutter: clamp(20px, 4vw, 56px);
  --max: 1320px;
  --r-xl: clamp(28px, 3vw, 44px);
  --r-lg: 24px;
  --dir: 1;
}
[dir="rtl"] { --dir: -1; }

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --bg: var(--cream);
    --bg-2: #FBEEDC;
    --surface: #FFFFFF;
    --surface-2: #FFF1DD;
    --line: rgb(28 24 41 / .12);
    --text: var(--ink);
    --text-2: #575066;
    --link: #B8231A;
    --focus: #0068C9;
    --btn-bg: var(--red-strong);
    --btn-fg: #FFFFFF;
    --ghost-fg: var(--ink);
    --ghost-line: rgb(28 24 41 / .28);
    --glow-a: rgb(255 150 80 / .30);
    --glow-b: rgb(110 110 255 / .22);
    --glow-c: rgb(0 170 200 / .20);
    --ring: rgb(28 24 41 / .06);
    --phone-shadow: 0 50px 80px -34px rgb(60 30 10 / .45), 0 16px 30px -14px rgb(60 30 10 / .3);
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.02; font-weight: 800; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
ul { margin: 0; padding: 0; }
ul[role="list"], .nav ul, .dock ul { list-style: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
:lang(he) h1, :lang(he) h2, :lang(he) h3, :lang(he) .display { letter-spacing: 0; }

.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 50;
  background: var(--yellow); color: var(--ink); font-weight: 700; padding: 10px 16px;
  border-radius: 12px; text-decoration: none;
}
.skip:focus { top: 12px; }

.i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .i-arrow { transform: scaleX(-1); }

/* ---------- Buttons and links ---------- */
.btn {
  --b-bg: var(--btn-bg); --b-fg: var(--btn-fg);
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 52px; padding: .8em 1.5em;
  border-radius: 999px; border: 2px solid transparent;
  background: var(--b-bg); color: var(--b-fg);
  font: 600 1.0625rem/1.2 var(--font); text-decoration: none;
  box-shadow: 0 4px 0 rgb(0 0 0 / .18);
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 rgb(0 0 0 / .18); }
.btn:active { transform: translateY(1px); box-shadow: 0 2px 0 rgb(0 0 0 / .18); }
@media (max-width: 420px) { .btn { padding-inline: 1.2em; font-size: 1rem; } }
.btn--ghost { --b-bg: transparent; --b-fg: var(--ghost-fg); border-color: var(--ghost-line); box-shadow: none; }
.btn--ghost:hover { box-shadow: none; border-color: currentColor; }
.btn--store { --b-bg: var(--store-bg); --b-fg: var(--store-fg); }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4em; font-weight: 600; text-decoration: none;
  color: inherit; padding-block: .5em;
}
.link-arrow .i { transition: translate .2s ease; }
.link-arrow:hover .i { translate: calc(var(--dir) * 4px) 0; }
.link-arrow:hover { text-decoration: underline; }

/* ---------- Header ---------- */
.site-header { position: relative; z-index: 5; }
.site-header__in {
  display: flex; align-items: center; gap: 12px 32px; flex-wrap: wrap;
  padding-block: clamp(16px, 2.4vw, 28px);
}
.brand { display: inline-block; flex: none; padding: 4px; margin: -4px; border-radius: 10px; }
.brand img { display: block; height: clamp(48px, 3.6vw, 56px); width: auto; }
.nav { margin-inline-start: auto; }
.nav ul { display: flex; gap: 4px; }
.nav a {
  display: inline-block; padding: .55em .9em; border-radius: 999px;
  color: var(--text); text-decoration: none; font-weight: 500;
}
.nav a:hover { background: var(--ring); }
.lang {
  display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px;
  background: var(--ring); box-shadow: inset 0 0 0 1px var(--line);
}
.lang a {
  min-width: 44px; min-height: 36px; display: grid; place-items: center;
  border-radius: 999px; font-size: .875rem; font-weight: 600; letter-spacing: .04em;
  color: var(--text-2); text-decoration: none;
}
.lang a:hover { color: var(--text); }
.lang a[aria-current] { background: var(--text); color: var(--bg); }

@media (max-width: 720px) {
  .site-header__in { justify-content: space-between; }
  .lang { order: 2; }
  .nav { order: 3; flex-basis: 100%; margin-inline-start: 0; }
  .nav ul { gap: 6px; }
  .nav a { background: var(--ring); box-shadow: inset 0 0 0 1px var(--line); padding: .5em 1.05em; }
}

/* ---------- Shared type ---------- */
.display { font-size: var(--fs-display); letter-spacing: var(--track-tight); word-spacing: .04em; line-height: .96; font-weight: 800; }
.section-title { font-size: var(--fs-h2); letter-spacing: var(--track-tight); word-spacing: .03em; }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); }
.eyebrow {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35em .7em;
  font-size: .9375rem; font-weight: 600; color: var(--text-2);
  padding: .45em 1em; border-radius: 999px; background: var(--ring); box-shadow: inset 0 0 0 1px var(--line);
}
.dot { width: .62em; height: .62em; border-radius: 3px; display: inline-block; margin-inline-end: -.2em; }
.dot--red { background: var(--red); }
.dot--yellow { background: var(--yellow); }
.dot--blue { background: var(--blue); }
.dot--green { background: var(--green); }

/* ---------- Phone frame (drawn in CSS: a plain rounded rectangle) ---------- */
.phone {
  --pw: 240px;
  --bezel: #0F0D16;
  position: relative; flex: none; display: block;
  width: var(--pw);
  padding: calc(var(--pw) * .03);
  border-radius: calc(var(--pw) * .155);
  background: var(--bezel);
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14), var(--phone-shadow);
}
.phone img {
  display: block; width: 100%; height: auto;
  border-radius: calc(var(--pw) * .125);
}
.phone::after {
  content: ""; position: absolute; inset: calc(var(--pw) * .03);
  border-radius: calc(var(--pw) * .125);
  background: linear-gradient(118deg, rgb(255 255 255 / .16) 0%, rgb(255 255 255 / 0) 34%);
  pointer-events: none;
}
.phone--bakery { --bezel: #2B1A10; }
.phone--arrowmino { --bezel: #0D0B30; }
.phone--hexvale { --bezel: #0A3440; }

/* ---------- Home hero ---------- */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: clamp(24px, 4vw, 56px) clamp(56px, 7vw, 112px); }
.hero__glow {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block: -140px 0; inset-inline: 36% 0;
  background:
    radial-gradient(46% 44% at 50% 44%, var(--glow-b), transparent 72%),
    radial-gradient(30% 30% at 46% 80%, var(--glow-a), transparent 72%),
    radial-gradient(34% 40% at 82% 62%, var(--glow-c), transparent 72%);
}
@media (max-width: 960px) { .hero__glow { inset-block: 48% 0; inset-inline: -10%; } }
[dir="rtl"] .hero__glow { transform: scaleX(-1); }
.hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center; gap: clamp(32px, 4vw, 64px);
}
.hero__copy { display: grid; gap: clamp(20px, 2.2vw, 30px); justify-items: start; }
.hero h1 { max-width: 11ch; }
.hl { color: var(--yellow); }
@media (min-width: 600px) { .hl { white-space: nowrap; } }
@media (prefers-color-scheme: light) { .hl { color: var(--red-strong); } }
.hero .lead { max-width: 34em; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__note { display: flex; align-items: center; gap: 14px; font-size: .9375rem; color: var(--text-2); }
.icon-stack { display: inline-flex; flex: none; }
.icon-stack img {
  width: 40px; height: 40px; border-radius: 11px; box-shadow: 0 0 0 3px var(--bg);
}
.icon-stack img + img { margin-inline-start: -10px; }

/* The stage: three phones fanned like a hand of cards */
.stage {
  position: relative; display: flex; justify-content: center; align-items: flex-start;
  padding-block: 40px 10px;
}
.stage::before {   /* a soft spotlight disc */
  content: ""; position: absolute; z-index: -1;
  width: min(100%, 600px); aspect-ratio: 1; top: 50%; left: 50%; translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--ring) 0 99%, transparent 100%);
  box-shadow: 0 0 0 1px var(--line);
}
.stage__item { position: relative; z-index: 1; }
.stage__item--center { z-index: 2; }
.stage__item--center .phone { --pw: clamp(178px, 20.5vw, 300px); }
.stage__item--side .phone { --pw: clamp(148px, 16.5vw, 244px); }
.stage__item--side { margin-top: clamp(48px, 6vw, 92px); margin-inline-end: calc(clamp(148px, 16.5vw, 244px) * -.22); rotate: calc(var(--dir) * -8deg); }
.stage__item--end { margin-inline: calc(clamp(148px, 16.5vw, 244px) * -.22) 0; rotate: calc(var(--dir) * 8deg); }
.sticker {
  position: absolute; z-index: 3;
  width: clamp(56px, 5.6vw, 84px); height: auto; border-radius: 24%;
  box-shadow: 0 0 0 4px var(--cream), 0 14px 26px -8px rgb(0 0 0 / .45);
  top: -22px; inset-inline-start: -18px; rotate: calc(var(--dir) * -10deg);
}
.stage__item--center .sticker { top: -30px; inset-inline-start: auto; inset-inline-end: -22px; rotate: calc(var(--dir) * 9deg); }
.stage__item--end .sticker { inset-inline-start: auto; inset-inline-end: -16px; top: auto; bottom: 22%; rotate: calc(var(--dir) * 12deg); }

@media (prefers-reduced-motion: no-preference) {
  .stage__item { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 110ms + 120ms); }
  .sticker { animation: pop .6s cubic-bezier(.3, 1.5, .5, 1) both; animation-delay: calc(var(--i) * 110ms + 620ms); }
  .hero__copy > * { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
  .hero__copy > :nth-child(2) { animation-delay: 60ms; }
  .hero__copy > :nth-child(3) { animation-delay: 120ms; }
  .hero__copy > :nth-child(4) { animation-delay: 180ms; }
  .hero__copy > :nth-child(5) { animation-delay: 240ms; }
}
@keyframes rise { from { opacity: 0; translate: 0 36px; } }
@keyframes pop { from { opacity: 0; scale: .6; } }

@media (max-width: 960px) {
  .hero__in { grid-template-columns: minmax(0, 1fr); }
  .hero h1 { max-width: 12ch; }
  .stage { margin-top: 8px; }
}
@media (max-width: 600px) {
  .stage { padding-top: 32px; }
  .stage__item--center .phone { --pw: 168px; }
  .stage__item--side .phone { --pw: 128px; }
  .stage__item--side { margin-top: 44px; margin-inline-end: -44px; }
  .stage__item--end { margin-inline: -44px 0; }
  .sticker { width: 52px; top: -16px; inset-inline-start: -2px; box-shadow: 0 0 0 3px var(--cream), 0 10px 20px -8px rgb(0 0 0 / .45); }
  .stage__item--center .sticker { top: -20px; inset-inline-end: -12px; }
  .stage__item--end .sticker { inset-inline-end: -8px; }
}

/* ---------- Games ---------- */
.games { padding-block: clamp(56px, 7vw, 112px); }
.games__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 28px 48px; margin-bottom: clamp(28px, 3.4vw, 48px);
}
.sub { margin-top: 14px; font-size: var(--fs-lead); color: var(--text-2); }

/* Dock: the games as app icons, like a home screen. Grows to 5+ games. */
.dock ul { display: flex; flex-wrap: wrap; gap: 8px; }
.dock a {
  position: relative; display: grid; justify-items: center; gap: 8px;
  width: 104px; padding: 12px 6px 10px; border-radius: 20px;
  color: var(--text); text-decoration: none; font-size: .875rem; font-weight: 500; text-align: center;
}
.dock a:hover { background: var(--ring); }
.dock img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 10px 20px -10px rgb(0 0 0 / .6); transition: translate .2s ease; }
.dock a:hover img { translate: 0 -3px; }
.dock__new {
  position: absolute; top: 4px; inset-inline-end: 8px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  background: var(--red-strong); color: #fff; padding: 2px 7px; border-radius: 999px;
}

.worlds { display: grid; gap: clamp(20px, 2.4vw, 32px); }

/* A world: one game's own colour world, the game is the hero */
.world {
  --w-bg: #333; --w-text: #fff; --w-text-2: #eee; --w-accent: #fff;
  --store-bg: #fff; --store-fg: #000; --focus: currentColor;
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: clamp(560px, 46vw, 640px);
  border-radius: var(--r-xl);
  background: var(--w-bg); color: var(--w-text);
}
.world__copy {
  position: relative; z-index: 2; align-self: center;
  display: grid; justify-items: start; gap: 16px;
  padding-block: clamp(44px, 5vw, 72px);
  padding-inline: clamp(44px, 5vw, 80px) 0;
}
.world--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.world--flip .world__copy { order: 2; padding-inline: 0 clamp(44px, 5vw, 80px); }
.world__icon {
  width: clamp(80px, 7vw, 104px); height: auto; border-radius: 23%;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 18px 34px -14px rgb(0 0 0 / .45);
  margin-bottom: 8px;
}
.world__genre {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  font-size: 1rem; font-weight: 700; letter-spacing: .02em; color: var(--w-accent);
}
.world__name { font-size: var(--fs-h3); letter-spacing: var(--track-tight); margin-top: -6px; }
.world__text { font-size: var(--fs-lead); line-height: 1.5; color: var(--w-text-2); max-width: 26em; }
.world__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 10px; }
.world__links { display: flex; gap: 20px; font-size: .9375rem; }
.world__links a { color: var(--w-text-2); padding-block: 6px; }
.world a:not(.btn) { color: inherit; }
.world .world__links a { color: var(--w-text-2); }
.badge {
  font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: var(--red-strong); color: #fff;
}

.world__phones {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: flex-start;
  padding-top: clamp(48px, 5vw, 72px);
  max-height: 100%;
}
.world__phones .phone { --pw: clamp(130px, 16vw, 236px); margin-top: clamp(56px, 5.4vw, 80px); }
.world__phones .phone:nth-child(1) { margin-inline-end: calc(var(--pw) * -.2); rotate: calc(var(--dir) * -5deg); }
.world__phones .phone:nth-child(2) { --pw: clamp(156px, 20vw, 292px); margin-top: 0; z-index: 2; }
.world__phones .phone:nth-child(3) { margin-inline-start: calc(var(--pw) * -.2); rotate: calc(var(--dir) * 5deg); }
@media (prefers-reduced-motion: no-preference) {
  .world__phones .phone { transition: translate .45s cubic-bezier(.2, .8, .2, 1); }
  .world:hover .world__phones .phone:nth-child(1) { translate: calc(var(--dir) * -10px) -6px; }
  .world:hover .world__phones .phone:nth-child(2) { translate: 0 -12px; }
  .world:hover .world__phones .phone:nth-child(3) { translate: calc(var(--dir) * 10px) -6px; }
}

.world__deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Candy tiles (decoration, drawn as SVG backgrounds) */
.tile { display: block; aspect-ratio: 56 / 60; background: center / contain no-repeat; }
.tile--o { background-image: url(img/deco/tile-o.svg); }
.tile--b { background-image: url(img/deco/tile-b.svg); }
.tile--y { background-image: url(img/deco/tile-y.svg); }
.tile--p { background-image: url(img/deco/tile-p.svg); }
.tile--g { background-image: url(img/deco/tile-g.svg); }
.ct {
  position: absolute; inset-inline-start: var(--x); top: var(--y);
  width: var(--s); rotate: var(--r);
  filter: drop-shadow(0 10px 14px rgb(5 5 40 / .35));
}

/* My Bakery: warm cream and peach */
.world--bakery {
  --w-bg:
    radial-gradient(60% 70% at 72% 18%, #FFF6EA 0%, rgb(255 246 234 / 0) 70%),
    linear-gradient(165deg, #FFE6CB 0%, #FFD2A8 60%, #FFC08C 100%);
  --w-text: #3A2214;
  --w-text-2: #5E3A22;
  --w-accent: #A23D0C;
  --store-bg: #B83C0B;
  --store-fg: #FFFFFF;
  --focus: #3A2214;
}
.world--bakery .world__deco {
  background-image: radial-gradient(circle, rgb(214 120 60 / .30) 2.2px, transparent 2.8px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(55% 60% at 70% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(55% 60% at 70% 30%, #000 0%, transparent 75%);
}
[dir="rtl"] .world--bakery .world__deco { -webkit-mask-position: -40% 0; mask-position: -40% 0; }

/* Arrowmino: deep indigo, candy tiles */
.world--arrowmino {
  --w-bg:
    radial-gradient(60% 70% at 30% 0%, #4A4FC4 0%, rgb(74 79 196 / 0) 70%),
    linear-gradient(170deg, #2E3192 0%, #23226B 55%, #1C1F6B 100%);
  --w-text: #FFFFFF;
  --w-text-2: #DCDDFF;
  --w-accent: #FFC93C;
  --store-bg: #FFC93C;
  --store-fg: #22216A;
  --focus: #FFC93C;
}

/* Hexvale: sky-blue sea, green and gold islands */
.world--hexvale {
  --w-bg:
    radial-gradient(50% 60% at 75% 30%, rgb(255 255 255 / .55) 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(170deg, #DDF3F8 0%, #A9DDEC 55%, #7CC8E0 100%);
  --w-text: #0A2F3A;
  --w-text-2: #1C4B58;
  --w-accent: #0B6450;
  --store-bg: #0B6450;
  --store-fg: #FFFFFF;
  --focus: #0A2F3A;
}
.world--hexvale .world__deco {
  background:
    url(img/deco/waves.svg) left -40px bottom 28px / 720px 120px no-repeat,
    url(img/deco/hex.svg) 0 0 / 41.57px 72px repeat;
  opacity: .55;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 55%);
}
[dir="rtl"] .world--hexvale .world__deco {
  -webkit-mask-image: linear-gradient(-90deg, #000 0%, transparent 55%);
          mask-image: linear-gradient(-90deg, #000 0%, transparent 55%);
}

@media (max-width: 860px) {
  .world, .world--flip { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .world__copy, .world--flip .world__copy { order: 0; padding: 32px 24px 0; }
  .world__phones { height: clamp(330px, 86vw, 520px); padding-top: 36px; }
  .world__phones .phone { --pw: clamp(116px, 32vw, 210px); margin-top: 40px; }
  .world__phones .phone:nth-child(2) { --pw: clamp(140px, 39vw, 250px); }
  .world__actions { width: 100%; }
  .ct:nth-child(-n+2) { display: none; }
  .ct { --y: auto; top: auto; bottom: var(--mb, 30%); }
  .ct:nth-child(3) { --mb: 28%; inset-inline-start: 3%; }
  .ct:nth-child(4) { --mb: 22%; inset-inline-start: auto; inset-inline-end: 3%; }
}
@media (max-width: 480px) {
  .world__actions .btn { flex: 1 1 100%; }
}

/* ---------- About ---------- */
.about { padding-block: clamp(56px, 7vw, 112px); background: var(--bg-2); border-block: 1px solid var(--line); }
.about__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(32px, 6vw, 96px); align-items: end;
}
.about__copy { display: grid; gap: 24px; justify-items: start; }
.about__badge {
  width: clamp(64px, 6vw, 88px); height: auto; border-radius: 22%;
  rotate: calc(var(--dir) * -6deg);
  box-shadow: 0 0 0 1px rgb(255 247 236 / .18), 0 18px 34px -12px rgb(0 0 0 / .6);
}
.about .section-title { max-width: 9ch; }
.about__in > .lead { padding-bottom: .4em; max-width: 30em; }
.facts { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(8px, 1.5vw, 24px); }
.fact {
  display: grid; align-content: space-between; gap: 40px;
  min-height: 200px; padding: clamp(22px, 2.2vw, 30px); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: clamp(1.1875rem, 1rem + .6vw, 1.625rem); font-weight: 600; line-height: 1.25; letter-spacing: -0.01em;
}
.fact__tile {
  flex: none; width: 56px; height: 56px; border-radius: 15px;
  display: grid; place-items: center; color: #fff;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / .16);
}
.fact__tile .i { width: 28px; height: 28px; }
.fact--red .fact__tile { background: var(--red); }
.fact--yellow .fact__tile { background: var(--yellow); color: var(--ink); }
.fact--blue .fact__tile { background: var(--blue); }
@media (max-width: 860px) {
  .about__in { grid-template-columns: minmax(0, 1fr); }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { display: flex; align-items: center; gap: 18px; min-height: 0; padding: 18px 20px; }
}

/* ---------- Contact ---------- */
.contact { padding-block: clamp(56px, 7vw, 112px); }
.contact__panel {
  --focus: var(--ink);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px clamp(32px, 5vw, 80px); align-items: end;
  padding: clamp(32px, 5.5vw, 80px);
  border-radius: var(--r-xl);
  background:
    radial-gradient(50% 80% at 100% 0%, #FFD45C 0%, rgb(255 212 92 / 0) 70%),
    var(--yellow);
  color: var(--ink);
}
.contact__copy { display: grid; gap: 18px; justify-items: start; }
.contact__text { font-size: var(--fs-lead); max-width: 30em; color: #3A3346; }
.contact__email {
  display: inline-flex; align-items: center; gap: .3em; margin-top: 10px;
  font-size: clamp(1.25rem, .5rem + 3.2vw, 2.875rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.15;
  color: var(--ink); text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .16em;
  overflow-wrap: anywhere;
}
.contact__email .i { width: .8em; height: .8em; stroke-width: 2.6; transition: translate .2s ease; }
.contact__email:hover .i { translate: calc(var(--dir) * 6px) 0; }
.contact__label { font-size: 1rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 12px; }
.feedback { display: grid; gap: 8px; }
.feedback a {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 16px 10px 10px; border-radius: 18px;
  background: rgb(255 255 255 / .55); color: var(--ink); text-decoration: none; font-weight: 600;
  transition: background-color .2s ease;
}
[dir="rtl"] .feedback a { padding: 10px 10px 10px 16px; }
.feedback a:hover { background: rgb(255 255 255 / .85); }
.feedback img { width: 44px; height: 44px; border-radius: 11px; }
@media (max-width: 860px) { .contact__panel { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .contact__panel { padding: 32px 24px 24px; } }

/* ---------- Footer (always Night) ---------- */
.site-footer {
  --text: var(--cream); --text-2: #BDB5CB; --line: rgb(255 247 236 / .12); --ring: rgb(255 247 236 / .07);
  --bg: #120F19; --focus: var(--yellow);
  background: var(--bg); color: var(--text);
  padding-block: clamp(48px, 6vw, 88px) 28px;
  font-size: 1rem;
}
.footer__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 40px; }
.footer__brand { display: grid; gap: 18px; justify-items: start; align-content: start; }
.footer__brand p { color: var(--text-2); max-width: 22em; }
.footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer__h { font-size: .875rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); margin-bottom: 14px; line-height: 1.3; }
.site-footer li a { display: inline-block; padding-block: 5px; color: var(--text); text-decoration: none; }
.site-footer li a:hover { text-decoration: underline; }
.biz {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 6px;
  padding: .7em 1.2em; border-radius: 999px; font-weight: 600; text-decoration: none;
  color: var(--text); box-shadow: inset 0 0 0 1.5px rgb(255 247 236 / .3);
}
.biz:hover { box-shadow: inset 0 0 0 1.5px var(--cream); }
.footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: clamp(40px, 5vw, 64px); padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--text-2); font-size: .9375rem;
}
.site-footer .lang a[aria-current] { background: var(--cream); color: var(--night); }
@media (max-width: 860px) {
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Game pages. Each game sets its own world tokens on <body>; the studio's
   header, footer, type and components stay the same.
   ========================================================================= */
.game-arrowmino {
  --g-1: #2E3192; --g-2: #23226B; --g-3: #1C1F6B; --g-glow: #4A4FC4;
  --candy: #FFC93C;
  --bg: #13113F;
  --bg-2: #1A1852;
  --surface: rgb(255 255 255 / .06);
  --surface-2: rgb(255 255 255 / .1);
  --line: rgb(255 255 255 / .13);
  --text: #FFFFFF;
  --text-2: #D2D3F7;
  --link: var(--candy);
  --focus: var(--candy);
  --btn-bg: var(--candy);
  --btn-fg: #22216A;
  --ghost-fg: #FFFFFF;
  --ghost-line: rgb(255 255 255 / .34);
  --ring: rgb(255 255 255 / .08);
  --store-bg: var(--candy);
  --store-fg: #22216A;
  --phone-shadow: 0 50px 90px -30px rgb(4 3 30 / .8), 0 18px 34px -14px rgb(4 3 30 / .55);
}
@media (prefers-color-scheme: light) {
  .game-arrowmino {
    --bg: #F4F3FF;
    --bg-2: #EAE9FF;
    --surface: #FFFFFF;
    --surface-2: #F0EFFF;
    --line: rgb(35 34 107 / .12);
    --text: #1B1A55;
    --text-2: #4A4880;
    --link: #3A35C4;
    --focus: #3A35C4;
    --btn-bg: #2E3192;
    --btn-fg: #FFFFFF;
    --ghost-fg: #1B1A55;
    --ghost-line: rgb(35 34 107 / .3);
    --ring: rgb(35 34 107 / .06);
    --phone-shadow: 0 44px 70px -30px rgb(30 28 110 / .45), 0 16px 30px -14px rgb(30 28 110 / .3);
    --faq-icon: #3A35C4;
  }
}

/* Header sits on the game's world colour */
.page-game .site-header {
  position: absolute; inset-inline: 0; top: 0;
  --text: #FFFFFF; --text-2: #D6D7FF; --bg: #23226B; --ring: rgb(255 255 255 / .1);
  --line: rgb(255 255 255 / .16); --focus: #FFC93C; color: #fff;
}
.nav a[aria-current] { box-shadow: inset 0 -2px 0 currentColor; border-radius: 0; padding-inline: .2em; margin-inline: .7em; }
@media (max-width: 720px) {
  .nav a[aria-current] { border-radius: 999px; box-shadow: inset 0 0 0 1.5px currentColor; padding-inline: 1.05em; margin-inline: 0; }
}

/* Game hero */
.g-hero {
  --text: #FFFFFF; --text-2: #DCDDFF; --line: rgb(255 255 255 / .16); --ring: rgb(255 255 255 / .08);
  --focus: var(--candy); --phone-shadow: 0 50px 90px -30px rgb(4 3 30 / .8), 0 18px 34px -14px rgb(4 3 30 / .55);
  position: relative; isolation: isolate; overflow: hidden;
  color: var(--text);
  padding-block: clamp(150px, 10vw, 150px) clamp(48px, 6vw, 96px);
  border-end-start-radius: clamp(28px, 4vw, 56px);
  border-end-end-radius: clamp(28px, 4vw, 56px);
  background:
    radial-gradient(55% 60% at 20% 0%, var(--g-glow) 0%, transparent 70%),
    radial-gradient(40% 50% at 78% 45%, rgb(120 110 255 / .35) 0%, transparent 70%),
    linear-gradient(175deg, var(--g-1) 0%, var(--g-2) 60%, var(--g-3) 100%);
}
@media (max-width: 720px) { .g-hero { padding-top: 176px; } }
.g-hero__deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.g-hero__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px); align-items: center;
}
.g-hero__copy { display: grid; gap: 22px; justify-items: start; }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; padding: 0; margin: 0; font-size: .9375rem; color: var(--text-2); }
.crumbs li + li::before { content: "/"; margin-inline-end: 6px; opacity: .6; }
.crumbs a { color: var(--text-2); }
.crumbs [aria-current] { color: var(--text); font-weight: 600; }
.g-hero__title { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); flex-wrap: wrap; }
.g-hero__icon {
  width: clamp(84px, 8vw, 120px); height: auto; border-radius: 23%;
  box-shadow: 0 0 0 4px rgb(255 255 255 / .9), 0 24px 40px -16px rgb(0 0 0 / .6);
  rotate: calc(var(--dir) * -6deg);
}
.g-hero h1 { font-size: clamp(3rem, 1.4rem + 6vw, 6.75rem); }
.tagline { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); font-weight: 700; line-height: 1.15; color: var(--candy); letter-spacing: -0.015em; }
.g-hero .lead { max-width: 30em; }
.soon {
  display: inline-flex; align-items: center; min-height: 52px; padding: .8em 1.3em; border-radius: 999px;
  font-weight: 500; font-size: 1rem; color: var(--text-2); box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .22);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  font-size: .875rem; font-weight: 600; padding: .4em .9em; border-radius: 999px;
  background: rgb(255 255 255 / .1); color: var(--text);
}
.stage--game { padding-block: 24px 0; }
.stage--game::before { display: none; }
@media (max-width: 960px) {
  .g-hero__in { grid-template-columns: minmax(0, 1fr); }
  .g-hero__deco .ct:nth-child(-n+2) { display: none; }
}

/* Section heads on game pages */
.g-section-head { display: grid; gap: 18px; margin-bottom: clamp(28px, 3.4vw, 48px); max-width: 52rem; }

/* Screenshots: a sideways rail of phones */
.g-shots { padding-block: clamp(64px, 8vw, 120px) clamp(32px, 4vw, 56px); }
.shots {
  --edge: max(var(--gutter), (100% - var(--max)) / 2);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge);
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
  border-radius: 8px;
}
.shots:focus-visible { outline-offset: -3px; }
.shots__track {
  display: flex; gap: clamp(16px, 2vw, 28px); width: max-content;
  padding-inline: var(--edge); padding-block: 8px 28px;
}
.shot { scroll-snap-align: start; display: grid; gap: 16px; justify-items: center; align-content: start; }
.shot .phone { --pw: clamp(188px, 17vw, 244px); }
.shot p { font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--text-2); text-align: center; max-width: 16em; }

/* Features: a bento of candy cards */
.g-features { padding-block: clamp(48px, 6vw, 96px); }
.bento {
  display: grid; gap: clamp(14px, 1.6vw, 20px);
  grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr));
}
.feat {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: start; gap: 18px;
  padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  font-size: clamp(1.0625rem, 1rem + .25vw, 1.25rem); line-height: 1.45; color: var(--text-2);
}
.feat strong { color: var(--text); font-weight: 700; }
.feat:not(.feat--big, .feat--wide) { align-content: space-between; min-height: 220px; }
.feat__tile { width: 52px; rotate: calc(var(--dir) * -6deg); }
.feat:nth-child(odd) .feat__tile { rotate: calc(var(--dir) * 5deg); }
.feat--big {
  grid-row: span 2; padding-bottom: 0;
  background:
    radial-gradient(80% 60% at 50% 100%, rgb(255 138 61 / .28) 0%, transparent 70%),
    var(--surface);
}
.feat--big p { font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); line-height: 1.35; }
.feat--big .feat__num {
  font-size: clamp(4rem, 2.4rem + 5.4vw, 7.5rem); font-weight: 800; letter-spacing: -0.04em; line-height: .9;
  color: var(--candy); margin-block: 6px -4px;
}
@media (prefers-color-scheme: light) { .game-arrowmino .feat--big .feat__num { color: #D9541A; } }
.feat__phone { display: flex; justify-content: center; height: clamp(220px, 20vw, 300px); align-items: flex-start; margin-top: auto; }
.feat__phone .phone { --pw: clamp(180px, 16vw, 236px); }
.feat--wide {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(100deg, #FF8A3D, #FF5C8A 45%, #7B6CFF);
  box-shadow: none; color: #fff;
}
.feat--wide .chain { display: flex; margin-inline-start: auto; }
.feat--wide .chain .tile { width: clamp(36px, 3.4vw, 48px); margin-inline-start: -4px; filter: drop-shadow(0 6px 8px rgb(60 10 60 / .3)); }
.feat--wide .chain .tile:nth-child(even) { translate: 0 -6px; }
.feat--wide p { font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); font-weight: 600; line-height: 1.25; color: #2A0F2E; }
.feat--wide strong { color: #2A0F2E; font-weight: 800; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feat--big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: minmax(0, 1fr); }
}

/* Support */
.g-support { padding-block: clamp(48px, 6vw, 96px); }
.g-support__in {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 80px); align-items: start;
}
.g-support__intro { display: grid; gap: 28px; position: sticky; top: 24px; }
.help-card {
  display: grid; gap: 10px; justify-items: start; padding: clamp(22px, 2.4vw, 32px); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2);
}
.help-card__title { font-size: 1.375rem; font-weight: 700; color: var(--text); }
.help-card .actions { margin-top: 10px; }
.faq { display: grid; gap: 10px; }
.faq details {
  border-radius: 20px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s ease;
}
.faq details[open] { background: var(--surface-2); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 20px 24px; padding-inline-end: 64px; border-radius: 20px;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight: 600; line-height: 1.35; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; inset-inline-end: 20px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border-radius: 9px; background: var(--faq-icon, var(--candy));
  --plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask: var(--plus) center / 18px no-repeat; mask: var(--plus) center / 18px no-repeat;
}
.faq summary::before {
  content: ""; position: absolute; inset-inline-end: 20px; top: 50%; translate: 0 -50%;
  width: 30px; height: 30px; border-radius: 9px; background: var(--ring);
}
.faq details[open] summary::after { rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) { .faq summary::after { transition: rotate .25s ease; } }
.faq details p { padding: 0 24px 22px; color: var(--text-2); max-width: 40em; }
@media (max-width: 860px) {
  .g-support__in { grid-template-columns: minmax(0, 1fr); }
  .g-support__intro { position: static; display: contents; }
  .g-support__intro h2 { order: -1; }
  .help-card { order: 2; }
}

/* More games */
.g-more { padding-block: clamp(32px, 4vw, 64px) clamp(64px, 8vw, 120px); }
.g-more__title { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem); letter-spacing: -0.02em; margin-bottom: 24px; }
.minis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.mini {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; align-items: center; gap: 18px; min-height: 180px;
  padding: 24px; padding-inline-end: 40%;
  border-radius: var(--r-lg); background: var(--w-bg); color: var(--w-text); text-decoration: none;
}
.mini__icon { width: 72px; height: 72px; border-radius: 17px; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 12px 24px -10px rgb(0 0 0 / .4); flex: none; }
.mini__text { display: grid; gap: 2px; }
.mini__genre { font-size: .9375rem; font-weight: 700; color: var(--w-accent); }
.mini__name { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.mini:hover .mini__name { text-decoration: underline; text-decoration-thickness: .06em; }
.mini__phone { position: absolute; inset-inline-end: 6%; top: 28px; z-index: -1; rotate: calc(var(--dir) * 6deg); }
.mini__phone .phone { --pw: 150px; }
@media (prefers-reduced-motion: no-preference) {
  .mini__phone { transition: translate .4s cubic-bezier(.2, .8, .2, 1); }
  .mini:hover .mini__phone { translate: 0 -10px; }
}
@media (max-width: 720px) {
  .minis { grid-template-columns: minmax(0, 1fr); }
  .mini { padding-inline-end: 132px; min-height: 180px; flex-direction: column; align-items: flex-start; gap: 12px; }
  .mini__icon { width: 56px; height: 56px; border-radius: 13px; }
  .mini__phone { inset-inline-end: 16px; top: 22px; }
  .mini__phone .phone { --pw: 112px; }
}

/* Hebrew: Rubik's Hebrew is wider, so the display sizes step down a little */
:lang(he) .display { font-size: calc(var(--fs-display) * .9); line-height: 1.02; }

/* =========================================================================
   Added for the full site (3 Nov 2026): every game's world on its own page,
   the studio pages (work with us, thanks) and the shared bits they need.
   The rules above stay as designed; these only fill in what they left to
   Arrowmino's literal colours.
   ========================================================================= */

/* Game pages read the hero, header and feature accents from tokens */
.page-game {
  --g-glow2: rgb(120 110 255 / .35);
  --big-glow: rgb(255 138 61 / .28);
  --wide-bg: linear-gradient(100deg, #FF8A3D, #FF5C8A 45%, #7B6CFF);
  --wide-fg: #2A0F2E;
  --hdr-bg: #23226B;
  --hdr-text-2: #D6D7FF;
  --num: var(--candy);
}
.page-game .site-header { --bg: var(--hdr-bg); --text-2: var(--hdr-text-2); --focus: var(--candy); }
.page-game .g-hero {
  --text-2: var(--hdr-text-2);
  background:
    radial-gradient(55% 60% at 20% 0%, var(--g-glow) 0%, transparent 70%),
    radial-gradient(40% 50% at 78% 45%, var(--g-glow2) 0%, transparent 70%),
    linear-gradient(175deg, var(--g-1) 0%, var(--g-2) 60%, var(--g-3) 100%);
}
.page-game .feat--big { background: radial-gradient(80% 60% at 50% 100%, var(--big-glow) 0%, transparent 70%), var(--surface); }
.page-game .feat--big .feat__num { color: var(--num); }
.page-game .feat--wide { background: var(--wide-bg); }
.page-game .feat--wide p, .page-game .feat--wide strong { color: var(--wide-fg); }
.soon--strong { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .55); font-weight: 600; }

/* Feature shapes for the games without arrow tiles */
.shape {
  display: block; width: 52px; aspect-ratio: 1; border-radius: 15px;
  background: var(--s-c, var(--candy)); box-shadow: inset 0 -6px 0 rgb(0 0 0 / .16);
}
.shape--1 { --s-c: var(--s1); } .shape--2 { --s-c: var(--s2); } .shape--3 { --s-c: var(--s3); }
.shape--4 { --s-c: var(--s4); } .shape--5 { --s-c: var(--s5); }
.feat--wide .chain .shape { width: clamp(36px, 3.4vw, 48px); margin-inline-start: -4px; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .18)); }
.feat--wide .chain .shape:nth-child(even) { translate: 0 -6px; }
.game-hexvale .shape { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); box-shadow: inset 0 -7px 0 rgb(0 0 0 / .16); }
.game-bakery .shape { border-radius: 50%; }
.game-seabattle .shape { border-radius: 6px; }

/* ---- My Bakery: caramel hero, warm page ---- */
.game-bakery {
  --g-1: #9A4718; --g-2: #73330F; --g-3: #4E220A; --g-glow: #D27A3A; --g-glow2: rgb(255 180 110 / .28);
  --candy: #FFC48A;
  --bg: #1E140E; --bg-2: #281A11; --surface: rgb(255 240 225 / .06); --surface-2: rgb(255 240 225 / .1);
  --line: rgb(255 240 225 / .13); --text: #FFF7EC; --text-2: #EAD5C2;
  --link: var(--candy); --focus: var(--candy); --btn-bg: var(--candy); --btn-fg: #3A2214;
  --ghost-fg: #FFF7EC; --ghost-line: rgb(255 240 225 / .34); --ring: rgb(255 240 225 / .08);
  --store-bg: var(--candy); --store-fg: #3A2214;
  --hdr-bg: #73330F; --hdr-text-2: #F3DCC8;
  --big-glow: rgb(255 160 90 / .26);
  --wide-bg: linear-gradient(100deg, #FFE2B8, #FFC08C 50%, #F59A6A); --wide-fg: #3A2214;
  --s1: #FFB36B; --s2: #F58B5A; --s3: #FFD58A; --s4: #E8A06A; --s5: #C9783F;
  --phone-shadow: 0 50px 90px -30px rgb(30 12 4 / .8), 0 18px 34px -14px rgb(30 12 4 / .55);
}
@media (prefers-color-scheme: light) {
  .game-bakery {
    --bg: #FFF7EC; --bg-2: #FBEEDC; --surface: #FFFFFF; --surface-2: #FFF1DD; --line: rgb(58 34 20 / .12);
    --text: #3A2214; --text-2: #6A4630; --link: #A23D0C; --focus: #A23D0C;
    --btn-bg: #A8370A; --btn-fg: #FFFFFF; --ghost-fg: #3A2214; --ghost-line: rgb(58 34 20 / .3); --ring: rgb(58 34 20 / .06);
    --faq-icon: #A8370A; --num: #A8370A;
    --phone-shadow: 0 44px 70px -30px rgb(90 40 10 / .45), 0 16px 30px -14px rgb(90 40 10 / .3);
  }
}
.game-bakery .g-hero__deco {
  background-image: radial-gradient(circle, rgb(255 210 160 / .22) 2.2px, transparent 2.8px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(60% 70% at 85% 30%, #000 0%, transparent 75%);
          mask-image: radial-gradient(60% 70% at 85% 30%, #000 0%, transparent 75%);
}

/* ---- Hexvale: deep sea hero, sky page ---- */
.game-hexvale {
  --g-1: #12738A; --g-2: #0B5568; --g-3: #083E4D; --g-glow: #2FAAC4; --g-glow2: rgb(120 230 200 / .26);
  --candy: #FFD166;
  --bg: #072832; --bg-2: #0A323E; --surface: rgb(255 255 255 / .06); --surface-2: rgb(255 255 255 / .1);
  --line: rgb(255 255 255 / .13); --text: #FFFFFF; --text-2: #CBE8EF;
  --link: var(--candy); --focus: var(--candy); --btn-bg: var(--candy); --btn-fg: #0A2F3A;
  --ghost-fg: #FFFFFF; --ghost-line: rgb(255 255 255 / .34); --ring: rgb(255 255 255 / .08);
  --store-bg: var(--candy); --store-fg: #0A2F3A;
  --hdr-bg: #0B5568; --hdr-text-2: #D2EEF4;
  --big-glow: rgb(80 220 190 / .24);
  --wide-bg: linear-gradient(100deg, #FFE59A, #A8E6CF 50%, #86D0E6); --wide-fg: #0A2F3A;
  --s1: #FFD166; --s2: #5FCB8F; --s3: #4FB6D6; --s4: #9ADB6E; --s5: #F2B544;
  --phone-shadow: 0 50px 90px -30px rgb(2 20 28 / .8), 0 18px 34px -14px rgb(2 20 28 / .55);
}
@media (prefers-color-scheme: light) {
  .game-hexvale {
    --bg: #F0FAFC; --bg-2: #E1F2F7; --surface: #FFFFFF; --surface-2: #E8F6FA; --line: rgb(10 47 58 / .12);
    --text: #0A2F3A; --text-2: #2D5763; --link: #0B6450; --focus: #0B6450;
    --btn-bg: #0B6450; --btn-fg: #FFFFFF; --ghost-fg: #0A2F3A; --ghost-line: rgb(10 47 58 / .3); --ring: rgb(10 47 58 / .06);
    --faq-icon: #0B6450; --num: #0B6450;
    --phone-shadow: 0 44px 70px -30px rgb(10 60 80 / .4), 0 16px 30px -14px rgb(10 60 80 / .28);
  }
}
.game-hexvale .g-hero__deco {
  background:
    url(img/deco/waves.svg) left -40px bottom 40px / 720px 120px no-repeat,
    url(img/deco/hex.svg) 0 0 / 41.57px 72px repeat;
  opacity: .16;
  -webkit-mask-image: linear-gradient(-90deg, #000 0%, transparent 60%);
          mask-image: linear-gradient(-90deg, #000 0%, transparent 60%);
}
[dir="rtl"] .game-hexvale .g-hero__deco {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
          mask-image: linear-gradient(90deg, #000 0%, transparent 60%);
}

/* ---- Sea Battle: navy ink hero, paper page ---- */
.phone--seabattle { --bezel: #14243F; }
.world--seabattle {
  --w-bg: linear-gradient(170deg, #FBF8F1 0%, #EFE9DC 100%);
  --w-text: #142849; --w-text-2: #3F5373; --w-accent: #B3261E; --store-bg: #1B3560; --store-fg: #FFFFFF; --focus: #142849;
}
.game-seabattle {
  --g-1: #2A4E86; --g-2: #1D3966; --g-3: #142A4C; --g-glow: #4672B8; --g-glow2: rgb(230 80 70 / .16);
  --candy: #FF9C8F;
  --bg: #0F1C33; --bg-2: #13233F; --surface: rgb(247 244 236 / .06); --surface-2: rgb(247 244 236 / .1);
  --line: rgb(247 244 236 / .13); --text: #F7F4EC; --text-2: #CAD3E4;
  --link: var(--candy); --focus: var(--candy); --btn-bg: var(--candy); --btn-fg: #142849;
  --ghost-fg: #F7F4EC; --ghost-line: rgb(247 244 236 / .34); --ring: rgb(247 244 236 / .08);
  --hdr-bg: #1D3966; --hdr-text-2: #D3DBEA;
  --big-glow: rgb(255 130 120 / .2);
  --wide-bg:
    linear-gradient(rgb(20 40 73 / .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgb(20 40 73 / .07) 1px, transparent 1px) 0 0 / 22px 22px,
    #F7F4EC;
  --wide-fg: #142849;
  --s1: #FF9C8F; --s2: #6E93D6; --s3: #F7F4EC; --s4: #E2574C; --s5: #A9C1EA;
  --phone-shadow: 0 50px 90px -30px rgb(4 10 25 / .8), 0 18px 34px -14px rgb(4 10 25 / .55);
}
@media (prefers-color-scheme: light) {
  .game-seabattle {
    --bg: #F7F4EC; --bg-2: #EFEADF; --surface: #FFFDF8; --surface-2: #F3EFE6; --line: rgb(20 40 73 / .13);
    --text: #142849; --text-2: #3F5373; --link: #A52A21; --focus: #1D3966;
    --btn-bg: #1D3966; --btn-fg: #FFFFFF; --ghost-fg: #142849; --ghost-line: rgb(20 40 73 / .3); --ring: rgb(20 40 73 / .06);
    --faq-icon: #A52A21; --num: #A52A21;
    --phone-shadow: 0 44px 70px -30px rgb(20 40 73 / .4), 0 16px 30px -14px rgb(20 40 73 / .28);
  }
}
.game-seabattle .g-hero__deco {
  background:
    linear-gradient(rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(255 255 255 / .07) 1px, transparent 1px) 0 0 / 28px 28px;
  -webkit-mask-image: radial-gradient(70% 80% at 80% 40%, #000 0%, transparent 80%);
          mask-image: radial-gradient(70% 80% at 80% 40%, #000 0%, transparent 80%);
}
[dir="rtl"] .game-seabattle .g-hero__deco {
  -webkit-mask-image: radial-gradient(70% 80% at 20% 40%, #000 0%, transparent 80%);
          mask-image: radial-gradient(70% 80% at 20% 40%, #000 0%, transparent 80%);
}

/* Hexvale page: links to its other languages */
.also-in { margin-top: 28px; color: var(--text-2); font-size: .9375rem; line-height: 1.9; }
.also-in a { margin-inline: .15em; }

/* ---------- Studio pages: work with us, thanks ---------- */
.hero--plain .hero__in { grid-template-columns: minmax(0, 1fr); }
.hero--plain .hero__glow { inset-inline: 40% 0; }
.hero--plain h1 { max-width: 16ch; }
.hero--short { padding-block: clamp(40px, 8vw, 120px) clamp(72px, 10vw, 160px); }
.sec { padding-block: clamp(48px, 6vw, 96px); }
.sec--alt { background: var(--bg-2); border-block: 1px solid var(--line); }
.sec__title { margin-bottom: clamp(24px, 3vw, 44px); max-width: 20ch; }

.pk-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.pk {
  display: grid; align-content: start; gap: 14px;
  padding: clamp(24px, 2.6vw, 36px); border-radius: var(--r-lg);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.pk::before { content: ""; width: 48px; height: 48px; border-radius: 14px; box-shadow: inset 0 -5px 0 rgb(0 0 0 / .16); }
.pk--1::before { background: var(--red); }
.pk--2::before { background: var(--yellow); }
.pk--3::before { background: var(--blue); }
.pk__name { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -0.02em; }
.pk__for { color: var(--text-2); }
.pk__list { display: grid; gap: 8px; }
.pk__list li { position: relative; padding-inline-start: 22px; }
.pk__list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .62em; width: 9px; height: 9px; border-radius: 3px; background: var(--green); }
.pk__price { margin-top: 8px; font-size: 1.375rem; font-weight: 800; letter-spacing: -0.01em; color: var(--yellow); }
@media (prefers-color-scheme: light) { .pk__price { color: var(--red-strong); } }
@media (max-width: 900px) { .pk-grid { grid-template-columns: minmax(0, 1fr); } }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 1.6vw, 20px); }
.step { display: grid; gap: 14px; align-content: start; padding: clamp(20px, 2.2vw, 28px); border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.step__n { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-weight: 800; font-size: 1.25rem; background: var(--yellow); color: var(--ink); box-shadow: inset 0 -4px 0 rgb(0 0 0 / .14); }
.terms { margin-top: clamp(20px, 2.4vw, 32px); display: grid; gap: 10px; padding: clamp(22px, 2.6vw, 36px); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); max-width: 52rem; }
.terms__title { font-size: 1.375rem; letter-spacing: -0.01em; }
.terms p { color: var(--text-2); }

.portfolio { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); max-width: 52rem; }
.portfolio a { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }
.portfolio a:hover { background: var(--surface-2); }

.form-panel {
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--r-xl);
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line);
}
.form { display: grid; gap: 18px; max-width: 52rem; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 640px) { .form__row { grid-template-columns: minmax(0, 1fr); } }
.form label { display: grid; gap: 8px; font-weight: 600; font-size: 1rem; }
.form input, .form select, .form textarea {
  width: 100%; min-height: 52px; padding: .75em 1em; border-radius: 14px;
  border: 1.5px solid var(--ghost-line); background: var(--bg); color: var(--text);
  font: 400 1.0625rem/1.4 var(--font);
}
.form textarea { min-height: 160px; resize: vertical; }
.form input:focus-visible, .form select:focus-visible, .form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.form__end { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.form__note { color: var(--text-2); font-size: .9375rem; max-width: 34em; }
.form button { cursor: pointer; font-family: var(--font); }
.hidden-field { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Between tablet and wide desktop the fanned phones and the headline need a
   little less room, so neither runs into the other column. */
@media (min-width: 961px) and (max-width: 1499px) {
  .hero h1 { font-size: clamp(2.875rem, 1rem + 5.2vw, 6.25rem); }
  .stage__item--center .phone { --pw: clamp(178px, 18vw, 300px); }
  .stage__item--side .phone { --pw: clamp(148px, 14.5vw, 244px); }
  .stage__item--side { margin-inline-end: calc(clamp(148px, 14.5vw, 244px) * -.22); }
  .stage__item--end { margin-inline: calc(clamp(148px, 14.5vw, 244px) * -.22) 0; }
}

/* ---------- Privacy policies and feedback forms: the game's band, the site's frame ---------- */
.g-hero--util { padding-bottom: clamp(36px, 4.5vw, 64px); }
.util-title { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 22px); margin-top: 22px; }
.util-icon { width: clamp(56px, 5vw, 72px); height: auto; border-radius: 23%; box-shadow: 0 0 0 3px rgb(255 255 255 / .9), 0 16px 30px -14px rgb(0 0 0 / .6); rotate: calc(var(--dir) * -6deg); }
.util-h1 { font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; color: var(--text); margin: 0; }
.util-game { margin-top: 6px; font-weight: 700; color: var(--candy); font-size: 1.125rem; }
.util-body { padding-block: clamp(36px, 4.5vw, 64px) clamp(64px, 8vw, 112px); }

.prose { max-width: 46rem; color: var(--text-2); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem); letter-spacing: -0.015em; color: var(--text); margin-top: 2.1em; }
.prose h2 + * { margin-top: .6em; }
.prose ul { padding-inline-start: 1.3em; display: grid; gap: .5em; }
.prose b, .prose strong { color: var(--text); }
.prose .small { font-size: .9375rem; }

.fb { max-width: 42rem; }
.fb .card { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-xl); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 12px; }
.fb .card h1 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); letter-spacing: -0.025em; }
.fb .card > p { color: var(--text-2); }
.fb form { display: grid; gap: 10px; margin-top: 14px; }
.fb label { font-weight: 600; margin-top: 6px; }
.fb textarea, .fb input[type="email"] {
  width: 100%; padding: .75em 1em; border-radius: 14px; border: 1.5px solid var(--ghost-line);
  background: var(--bg); color: var(--text); font: 400 1.0625rem/1.45 var(--font);
}
.fb textarea { min-height: 180px; resize: vertical; }
.fb input[type="email"] { min-height: 52px; }
.fb textarea:focus-visible, .fb input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: transparent; }
.fb button {
  justify-self: start; margin-top: 10px; min-height: 52px; padding: .8em 1.8em; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg); font: 600 1.0625rem/1.2 var(--font); box-shadow: 0 4px 0 rgb(0 0 0 / .18);
}
.fb button:disabled { opacity: .6; cursor: default; }
.fb .small { font-weight: 400; color: var(--text-2); font-size: .9375rem; }
.fb .msg { min-height: 1.5em; font-weight: 600; color: var(--link); }
.fb .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.fb .hidden { display: none !important; }
.fb .big { font-size: 56px; line-height: 1; }
.fb__links { margin-top: 18px; }

/* Long Russian column heads ("Конфиденциальность") fit the two-column footer on phones */
@media (max-width: 520px) { .footer__h { letter-spacing: .02em; font-size: .8125rem; } .footer__cols > div { min-width: 0; } }

/* Sea Battle on the home page, "coming soon" */
.world--seabattle .world__deco {
  background:
    linear-gradient(rgb(20 40 73 / .07) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(20 40 73 / .07) 1px, transparent 1px) 0 0 / 24px 24px;
}
.soon--world { color: var(--w-text); box-shadow: inset 0 0 0 2px rgb(20 40 73 / .4); font-weight: 600; }
.world--seabattle .badge { background: #A52A21; color: #fff; }
.dock__new--soon { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }