/* Fiusbit website styles
   Concept: "toy box on Fiusbit blue" — the deep glossy blue of the logo is the stage,
   every game brings its own color (--game), sunny yellow is the only call-to-action color.
   Single, deliberate light look (content on soft blue-white, hero and footer on brand blue). */
:root {
  --blue-950: #041b4d;
  --blue-900: #062a6e;
  --blue-800: #0a3d91;
  --blue-600: #1462d6;
  --blue-400: #4d9bff;
  --paper: #f3f6fd;
  --card: #ffffff;
  --ink: #0f1b3d;
  --ink-soft: #4a5679;
  --line: #dde4f3;
  --sun: #ffc83d;
  --sun-deep: #f0a500;
  --mint: #22c9a0;
  --pop: #ff5c8a;
  --on-blue: #eef4ff;
  --on-blue-soft: #b9cdf5;

  --font-display: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.88rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.08rem);
  --step-1: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 2.9rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.2vw, 4.1rem);

  --radius: 22px;
  --shadow: 0 1px 2px rgb(6 42 110 / .06), 0 8px 24px rgb(6 42 110 / .08);
  --shadow-lift: 0 2px 4px rgb(6 42 110 / .08), 0 18px 40px rgb(6 42 110 / .16);
  --wrap: 1180px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue-600); text-underline-offset: 3px; }
a:hover { color: var(--blue-800); }
:focus-visible { outline: 3px solid var(--sun-deep); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); font-weight: 800; }
h2 { font-size: var(--step-3); font-weight: 800; }
h3 { font-size: var(--step-1); font-weight: 700; }
p { margin: 0; }
svg { width: 1em; height: 1em; flex: none; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: max(16px, 4vw); }
@media (min-width: 1300px) { .wrap { padding-inline: 24px; } }

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

/* ---------------------------------------------------------------- buttons, chips */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font: 800 var(--step-0)/1 var(--font-body);
  padding: .8em 1.3em; border-radius: 999px; border: 0; cursor: pointer;
  text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn svg { width: 1.1em; height: 1.1em; }
.btn--sun { background: var(--sun); color: var(--ink); box-shadow: 0 4px 0 var(--sun-deep); }
.btn--sun:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 0 var(--sun-deep); }
.btn--sun:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--sun-deep); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); }
.btn--small { padding: .5em 1em; font-size: var(--step--1); background: var(--blue-800); color: var(--on-blue); }
.btn--lg { font-size: var(--step-1); padding: .85em 1.5em; }

.chip {
  display: inline-flex; align-items: center; font-size: var(--step--1); font-weight: 800;
  padding: .25em .75em; border-radius: 999px;
  background: color-mix(in srgb, var(--game, var(--blue-600)) 14%, white);
  color: color-mix(in srgb, var(--game, var(--blue-600)) 70%, black);
}
.chip--light { background: rgb(255 255 255 / .2); color: #fff; }

.rating { display: inline-flex; align-items: center; gap: .3em; font-size: var(--step--1); color: var(--ink-soft); }
.rating svg { fill: var(--sun-deep); width: 1.1em; height: 1.1em; }
.rating b { color: var(--ink); }

.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 10px; min-width: 9.5rem;
  background: #0b0f1c; color: #fff; text-decoration: none;
  padding: 8px 16px 8px 12px; border-radius: 12px; line-height: 1.1;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18);
  transition: transform .15s ease, background .15s;
}
.store-btn:hover { color: #fff; background: #000; transform: translateY(-2px); }
.store-btn svg { width: 22px; height: 22px; fill: currentColor; }
.store-btn small { display: block; font-size: .68rem; font-weight: 600; opacity: .8; }
.store-btn b { font-size: 1.05rem; font-weight: 800; letter-spacing: .01em; }
.store-btn.mini { min-width: 0; padding: 6px 10px; border-radius: 10px; gap: 6px; }
.store-btn.mini svg { width: 16px; height: 16px; }
.store-btn.mini small { display: none; }
.store-btn.mini b { font-size: .8rem; }

.link-arrow { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: #fff; text-decoration: none; }
.link-arrow:hover { color: var(--sun); }
.link-arrow svg { transition: transform .15s; }
.link-arrow:hover svg { transform: translateX(4px); }

.eyebrow { font-size: var(--step--1); font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--sun); }
.lead { font-size: var(--step-1); line-height: 1.5; max-width: 38ch; }
.muted { color: var(--ink-soft); }

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30;
  background: rgb(243 246 253 / .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid rgb(10 61 145 / .08);
}
.site-header__in { display: flex; align-items: center; gap: 12px 24px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--blue-800); }
.brand img { width: 36px; height: 36px; }
.brand span { font: 800 1.7rem/1 var(--font-display); letter-spacing: -.02em; padding-top: 4px; }
.main-nav { display: flex; gap: 4px; margin-inline-start: auto; }
.main-nav a { padding: 8px 14px; border-radius: 999px; font-weight: 800; color: var(--ink); text-decoration: none; }
.main-nav a:hover { background: rgb(10 61 145 / .07); }
.main-nav a[aria-current="page"] { background: var(--blue-800); color: #fff; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgb(10 61 145 / .07); color: var(--ink-soft); font-size: .85rem; font-weight: 800; user-select: none; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover { color: var(--ink); }
.lang summary svg { width: 16px; height: 16px; flex: none; }
.lang .chev { width: 14px; height: 14px; transition: transform .2s; }
.lang[open] .chev { transform: rotate(180deg); }
.lang__menu { position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 60; margin: 0; padding: 6px; list-style: none; min-width: 190px; max-height: min(70vh, 460px); overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 18px 40px rgb(10 30 80 / .22); display: grid; gap: 2px; }
.lang__menu a { display: block; padding: 9px 12px; border-radius: 10px; font-size: .92rem; font-weight: 700; text-decoration: none; color: var(--ink); }
.lang__menu a:hover { background: rgb(10 61 145 / .07); }
.lang__menu a[aria-current="true"] { background: var(--blue-800); color: #fff; }
@media (max-width: 560px) {
  .site-header__in { gap: 8px 12px; }
  .main-nav { order: 3; width: 100%; margin-inline-start: 0; justify-content: flex-start; }
  .lang { margin-inline-start: auto; }
  .brand span { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------- hero (home) */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 85% 10%, var(--blue-600) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, var(--blue-950) 0%, transparent 60%),
    var(--blue-800);
  color: var(--on-blue);
  padding-block: clamp(40px, 6vw, 80px) clamp(90px, 10vw, 130px);
}
.bubbles i {
  position: absolute; z-index: -1; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, rgb(255 255 255 / .35), rgb(255 255 255 / .06) 42%, rgb(255 255 255 / 0) 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12);
  animation: float 14s ease-in-out infinite;
}
.bubbles i:nth-child(1) { width: 340px; height: 340px; left: -120px; top: -90px; }
.bubbles i:nth-child(2) { width: 140px; height: 140px; left: 42%; top: 12%; animation-delay: -4s; }
.bubbles i:nth-child(3) { width: 220px; height: 220px; right: -60px; bottom: -40px; animation-delay: -8s; }
.bubbles i:nth-child(4) { width: 70px; height: 70px; left: 30%; bottom: 14%; animation-delay: -2s; }
.bubbles i:nth-child(5) { width: 40px; height: 40px; right: 38%; top: 8%; animation-delay: -6s; }
@keyframes float { 50% { transform: translate3d(0, -18px, 0) scale(1.03); } }

.hero__grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 48px; } }
.hero__copy { display: grid; gap: 22px; justify-items: start; min-width: 0; }
.hero h1 { color: #fff; }
.hero h1 em { font-style: normal; display: block; color: var(--sun); }
.hero .lead { color: var(--on-blue-soft); }

/* carousel */
.carousel { position: relative; min-width: 0; }
.carousel__track { display: grid; }
.slide {
  grid-area: 1 / 1; display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;
  padding: clamp(18px, 3vw, 28px); border-radius: 30px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--game) 92%, white) 0%, color-mix(in srgb, var(--game) 80%, black) 100%);
  box-shadow: 0 30px 60px rgb(2 12 40 / .35), inset 0 1px 0 rgb(255 255 255 / .35);
  color: #fff;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1), visibility .6s;
}
.slide[aria-hidden="true"] { opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); }
@media (min-width: 560px) { .slide { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.slide__media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 300px; }
.slide__icon { position: absolute; inset-inline-start: 0; bottom: 4px; z-index: 3; }
.slide__icon .game-icon { width: 84px; height: 84px; }
.slide__info { display: grid; gap: 12px; justify-items: start; min-width: 0; }
.slide__info h2 { font-size: var(--step-2); color: #fff; }
.slide__info p { color: rgb(255 255 255 / .88); font-weight: 600; }
.slide__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.slide .rating, .game-hero .rating { color: rgb(255 255 255 / .85); }
.slide .rating b, .game-hero .rating b { color: #fff; }
.slide .rating svg, .game-hero .rating svg { fill: var(--sun); }
.carousel__dots { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.carousel__dots button {
  padding: 0; border: 0; background: none; cursor: pointer; border-radius: 14px;
  opacity: .55; transform: scale(.9); transition: opacity .2s, transform .2s, box-shadow .2s;
}
.carousel__dots button[aria-selected="true"] { opacity: 1; transform: scale(1); box-shadow: 0 0 0 3px var(--sun); }
.carousel__dots .game-icon { width: 44px; height: 44px; border-radius: 12px; }

/* phone mockups */
.phone {
  margin: 0; position: relative; z-index: 2;
  width: min(44%, 170px); aspect-ratio: 460 / 996; max-width: 100%;
  padding: 7px; border-radius: 26px; background: #0b0f1c;
  box-shadow: 0 20px 40px rgb(2 12 40 / .4), inset 0 0 0 1px rgb(255 255 255 / .15);
}
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
.phone--back { transform: rotate(-7deg) translate(18%, 4%); z-index: 1; filter: saturate(.85) brightness(.9); }
.phone--front { transform: rotate(4deg) translateX(-14%); }
.phone--wide { width: 100%; aspect-ratio: 1286 / 594; border-radius: 22px; transform: rotate(-2deg); }
.phone--wide img { border-radius: 16px; }

.game-icon { border-radius: 22%; box-shadow: 0 6px 16px rgb(2 12 40 / .25); background: #fff; }

/* ---------------------------------------------------------------- stats strip */
.stats {
  position: relative; z-index: 2; margin-top: -56px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lift);
  padding-block: 8px;
}
.stats > div { display: grid; justify-items: center; text-align: center; gap: 2px; padding: 14px 10px; }
.stats b { font: 800 var(--step-3)/1 var(--font-display); color: var(--blue-800); display: inline-flex; align-items: center; min-height: 1em; }
.stats b svg { width: .9em; height: .9em; }
.stats span { font-size: var(--step--1); font-weight: 700; color: var(--ink-soft); }
.stats .mx { color: var(--ink-soft); }
.stats .mx svg { width: 1.7em; height: auto; }
@media (min-width: 720px) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stats > div + div { border-left: 1px solid var(--line); }
}
@media (max-width: 719px) { .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } .stats > div:nth-child(odd) { border-right: 1px solid var(--line); } }

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: end; justify-content: space-between; margin-bottom: 28px; }
.section-head--end { justify-content: flex-start; }
.section-head p { color: var(--ink-soft); margin-top: 6px; }

.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  font: 800 var(--step--1)/1 var(--font-body); cursor: pointer;
  padding: 9px 14px; border-radius: 999px; border: 0;
  background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line);
  transition: background .15s, color .15s, box-shadow .15s;
}
.filter span { opacity: .55; margin-inline-start: 2px; font-variant-numeric: tabular-nums; }
.filter:hover { box-shadow: inset 0 0 0 2px var(--blue-400); }
.filter.is-on { background: var(--ink); color: #fff; box-shadow: none; }

/* game cards */
.game-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.game-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease;
}
.game-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.game-card__art {
  display: grid; place-items: center; padding: 26px 16px;
  background:
    radial-gradient(circle at 20% 25%, rgb(255 255 255 / .28) 0 16%, transparent 17%),
    radial-gradient(circle at 85% 80%, rgb(255 255 255 / .18) 0 22%, transparent 23%),
    linear-gradient(140deg, color-mix(in srgb, var(--game) 85%, white), var(--game));
}
.game-card__art .game-icon { width: 112px; height: 112px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.game-card:hover .game-card__art .game-icon { transform: rotate(-4deg) scale(1.06); }
.game-card__body { display: grid; gap: 8px; justify-items: start; padding: 18px 18px 8px; flex: 1; align-content: start; }
.game-card__body h3 a { color: var(--ink); text-decoration: none; }
.game-card__body p { color: var(--ink-soft); font-size: .95rem; line-height: 1.45; }
.game-card__stores { padding: 10px 18px 18px; position: relative; z-index: 2; }
.stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.game-card.is-hidden { display: none; }
.game-grid--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }

@media (max-width: 560px) {
  .game-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .game-card__art { padding: 18px 10px; }
  .game-card__art .game-icon { width: 80px; height: 80px; }
  .game-card__body { padding: 12px 12px 4px; gap: 6px; }
  .game-card__body h3 { font-size: 1.05rem; }
  .game-card__body p { font-size: .85rem; }
  .game-card__stores { padding: 8px 12px 14px; }
  .game-card .rating span { display: none; }
}
.section > h2 { margin-bottom: 24px; }
.section + .section { padding-top: 0; }
.page-hero + .section { padding-top: clamp(40px, 6vw, 64px); }

/* why */
.why h2 { margin-bottom: 28px; }
.why__grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.why__item { display: grid; gap: 10px; align-content: start; padding: 26px; border-radius: var(--radius); background: var(--card); box-shadow: var(--shadow); }
.why__item > svg { width: 48px; height: 48px; padding: 11px; border-radius: 16px; background: color-mix(in srgb, var(--tone) 22%, white); color: color-mix(in srgb, var(--tone) 60%, black); }
.why__item p { color: var(--ink-soft); }

/* studio band */
.studio { background: linear-gradient(120deg, var(--blue-900), var(--blue-800)); color: var(--on-blue); }
.studio__in { display: grid; gap: 28px 48px; align-items: center; padding-block: clamp(48px, 7vw, 80px); grid-template-columns: 1fr; }
@media (min-width: 760px) { .studio__in { grid-template-columns: 240px minmax(0, 1fr); } }
.studio img { width: 220px; }
.studio h2 { color: #fff; margin-bottom: 12px; }
.studio p { color: var(--on-blue-soft); max-width: 56ch; margin-bottom: 22px; }

/* ---------------------------------------------------------------- inner pages */
.page-hero { background: linear-gradient(160deg, var(--blue-800), var(--blue-900)); color: var(--on-blue); padding-block: 28px clamp(40px, 6vw, 64px); }
.page-hero h1 { color: #fff; margin-block: 14px 12px; }
.page-hero .lead { color: var(--on-blue-soft); max-width: 60ch; }
.page-hero .muted { color: var(--on-blue-soft); }
.page-hero--slim h1 { font-size: var(--step-3); }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: var(--step--1); font-weight: 700; }
.crumbs li + li::before { content: "›"; margin-inline-end: 6px; opacity: .6; }
.crumbs a { color: inherit; opacity: .8; text-decoration: none; }
.crumbs a:hover { opacity: 1; text-decoration: underline; }
.crumbs [aria-current] { opacity: 1; }

/* game page */
.game-hero {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  background: linear-gradient(150deg, color-mix(in srgb, var(--game) 88%, white) 0%, var(--game) 45%, color-mix(in srgb, var(--game) 62%, black) 100%);
  padding-block: 24px clamp(48px, 7vw, 80px);
}
.game-hero__grid { display: grid; gap: 36px; align-items: center; margin-top: 20px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .game-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.game-hero__info { display: grid; gap: 16px; justify-items: start; min-width: 0; }
.game-hero__info .game-icon { width: 128px; height: 128px; box-shadow: 0 14px 30px rgb(2 12 40 / .35); }
.game-hero h1 { color: #fff; }
.game-hero .lead { color: rgb(255 255 255 / .9); font-weight: 600; }
.game-hero__media { display: flex; justify-content: center; align-items: center; min-height: 340px; }
.game-hero__grid.is-wide .game-hero__media { min-height: 0; }
.game-hero__media .phone { width: min(42%, 210px); }
.game-hero__grid.is-wide .game-hero__media .phone--wide { width: 100%; }

.game-body { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .game-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.game-about, .game-shots { min-width: 0; }
.game-about h2, .game-shots h2 { font-size: var(--step-2); margin-bottom: 16px; }
.game-about p { margin-bottom: 1em; max-width: 62ch; }
.download-box { margin-top: 24px; padding: 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--game) 10%, white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game) 25%, white); display: grid; gap: 14px; }
.download-box p { margin: 0; font-weight: 800; font-family: var(--font-display); font-size: var(--step-1); }
.shots { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; overscroll-behavior-x: contain; }
.shots img { flex: none; width: min(46%, 220px); border-radius: 18px; scroll-snap-align: start; box-shadow: var(--shadow); }
.shots--wide img { width: min(88%, 520px); }
.shots:focus-visible { outline-offset: 6px; }

/* about */
.about { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .about { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.prose { max-width: 68ch; min-width: 0; }
.prose h2 { font-size: var(--step-2); margin-block: 1.4em .5em; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-bottom: 1em; }
.lead-dark { font-size: var(--step-1); color: var(--ink); }
.facts { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; align-self: start; min-width: 0; }
.facts h2 { font-size: var(--step-1); margin-bottom: 14px; }
.facts dl { margin: 0; display: grid; }
.facts dl > div { display: flex; justify-content: space-between; gap: 16px; padding-block: 10px; border-bottom: 1px solid var(--line); }
.facts dt { color: var(--ink-soft); font-weight: 700; }
.facts dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: end; }
.facts__icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.facts__icons .game-icon { width: 44px; height: 44px; border-radius: 11px; box-shadow: none; transition: transform .15s; }
.facts__icons a:hover .game-icon { transform: translateY(-3px); }
.press { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .press { grid-template-columns: minmax(0, 1fr) auto; } }
.press__assets { display: flex; flex-wrap: wrap; gap: 16px; }
.press__item { display: grid; gap: 10px; justify-items: center; font-weight: 800; text-decoration: none; color: var(--ink); }
.press__thumb { display: grid; place-items: center; width: 180px; height: 130px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); }
.press__thumb--dark { background: var(--blue-800); }
.press__thumb img { max-height: 96px; width: auto; }
.contact p { color: var(--ink-soft); margin-block: 8px 16px; }
.copy-line { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow); max-width: 100%; }
.copy-line > svg { width: 22px; height: 22px; color: var(--blue-600); }
.copy-line a { font-weight: 800; font-size: var(--step-1); word-break: break-all; }

/* 404 */
.nf { text-align: center; padding-block: 64px 80px; }
.nf__code { font: 800 clamp(5rem, 18vw, 10rem)/1 var(--font-display); color: var(--sun); text-shadow: 0 8px 0 var(--sun-deep); margin-bottom: 20px; }
.nf__lang { display: grid; gap: 8px; margin-block: 18px; }
.nf__lang h1, .nf__lang h2 { color: #fff; font-size: var(--step-2); }
.nf a { color: var(--sun); font-weight: 800; }

/* ---------------------------------------------------------------- footer */
.site-footer { background: var(--blue-950); color: var(--on-blue-soft); padding-block: 56px 28px; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } }
.footer-brand img { width: 150px; margin-bottom: 14px; }
.site-footer h2 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .12em; color: #fff; margin-bottom: 12px; font-family: var(--font-body); }
.site-footer h2 + p, .site-footer ul + h2 { margin-top: 22px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--on-blue); text-decoration: none; }
.site-footer a:hover { color: var(--sun); }
.site-footer .mail a { font-weight: 800; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .1); font-size: var(--step--1); }
.footer-bottom .lang summary { background: rgb(255 255 255 / .08); color: var(--on-blue-soft); }
.footer-bottom .lang summary:hover { color: #fff; }
.footer-bottom .lang__menu { top: auto; bottom: calc(100% + 8px); }
/* the footer's generic link colors (light on dark) must not leak into the white dropdown */
.site-footer .lang__menu a { color: var(--ink); }
.site-footer .lang__menu a:hover { color: var(--ink); background: rgb(10 61 145 / .1); }
.site-footer .lang__menu a[aria-current="true"], .site-footer .lang__menu a[aria-current="true"]:hover { background: var(--blue-800); color: #fff; }

/* consent */
.consent {
  position: fixed; z-index: 40; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  max-width: 560px; margin-inline: auto;
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; justify-content: space-between;
  background: var(--card); color: var(--ink); padding: 16px 18px; border-radius: 18px; box-shadow: var(--shadow-lift);
  font-size: .95rem;
}
.consent p { flex: 1 1 260px; }
.consent > div { display: flex; gap: 8px; }
.consent .btn { padding: .6em 1.1em; font-size: .92rem; }

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

/* ---------------------------------------------------------------- v2: King-style details */
/* wavy bottom edge on coloured heroes */
.wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(24px, 4vw, 56px); fill: var(--paper); z-index: 1; }
.page-hero { position: relative; }
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(20px, 3vw, 44px);
  background: var(--paper);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 240 70 480 0 720 26 S 1200 60 1440 22 V60 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C 240 70 480 0 720 26 S 1200 60 1440 22 V60 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.page-hero { padding-bottom: clamp(56px, 8vw, 88px); }

/* floating game icons in the home hero */
.floaters { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.floaters img {
  position: absolute; width: clamp(38px, 4vw, 56px); height: auto; border-radius: 22%;
  box-shadow: 0 10px 24px rgb(2 12 40 / .35); opacity: .9;
  animation: drift 9s ease-in-out infinite; animation-delay: calc(var(--i) * -1.4s);
}
.floaters img:nth-child(1) { left: 4%; top: 70%; transform: rotate(-12deg); }
.floaters img:nth-child(2) { left: 38%; top: 6%; transform: rotate(10deg); }
.floaters img:nth-child(3) { left: 47%; bottom: 10%; transform: rotate(-6deg); }
.floaters img:nth-child(4) { right: 3%; top: 10%; transform: rotate(14deg); }
.floaters img:nth-child(5) { right: 6%; bottom: 18%; transform: rotate(-10deg); }
.floaters img:nth-child(6) { left: 24%; top: 88%; transform: rotate(8deg); }
@keyframes drift { 50% { translate: 0 -14px; rotate: 4deg; } }
@media (max-width: 900px) { .floaters img:nth-child(n+3) { display: none; } .floaters img { opacity: .55; } }

/* carousel: slides glide in from the side */
.slide { transform-origin: 70% 50%; }
.slide[aria-hidden="true"] { transform: translateX(24px) rotate(1.5deg) scale(.97); }

/* big featured cards (span 2 columns) */
@media (min-width: 640px) {
  .game-card--big { grid-column: span 2; flex-direction: row; flex-wrap: wrap; }
  .game-card--big .game-card__art {
    flex: 1 1 52%; min-height: 260px; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: flex-start; gap: 0; padding: 24px 0 24px 28px;
  }
  .game-card--big .game-card__body { flex: 1 1 40%; align-content: center; padding: 24px 24px 8px 22px; }
  .game-card--big .game-card__stores { flex: 1 1 40%; margin-inline-start: auto; padding: 0 24px 24px 22px; }
  .game-card--big .game-card__body h3 { font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); }
  .game-card--big .game-card__body p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .game-card--big .game-card__art .game-icon { width: 130px; height: 130px; z-index: 2; position: relative; }
}
.game-card--big { display: grid; grid-template-columns: 1fr; }
@media (min-width: 640px) { .game-card--big { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto; } .game-card--big .game-card__art { grid-row: 1 / 3; } }
.game-card__shot {
  position: absolute; right: -8%; top: 50%; width: 46%; max-width: 190px; height: auto;
  border-radius: 18px; border: 6px solid #0b0f1c; box-shadow: 0 18px 36px rgb(2 12 40 / .35);
  transform: translateY(-50%) rotate(8deg); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3);
}
.game-card__shot.is-wide { width: 70%; max-width: 320px; right: -10%; transform: translateY(-30%) rotate(-4deg); }
.game-card--big:hover .game-card__shot { transform: translateY(-54%) rotate(4deg); }
.game-card--big:hover .game-card__shot.is-wide { transform: translateY(-34%) rotate(-2deg); }
@media (max-width: 639px) { .game-card__shot { display: none; } }

/* coming-soon tile */
.game-card--soon { background: transparent; box-shadow: inset 0 0 0 3px var(--line); justify-content: center; text-align: center; }
.game-card--soon:hover { transform: none; box-shadow: inset 0 0 0 3px var(--blue-400); }
.game-card--soon .game-card__body { justify-items: center; padding: 18px; flex: 0; }
.game-card--soon p { color: var(--ink-soft); font-size: .92rem; }
.soon__art { position: relative; display: grid; place-items: center; height: 120px; margin-top: 18px; }
.soon__art span {
  display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22%;
  font: 800 3rem/1 var(--font-display); color: #fff; background: linear-gradient(140deg, var(--blue-400), var(--blue-800));
  box-shadow: 0 10px 24px rgb(10 61 145 / .3); animation: wiggle 3.2s ease-in-out infinite;
}
.soon__art i { position: absolute; width: 14px; height: 14px; border-radius: 50%; animation: drift 4s ease-in-out infinite; }
.soon__art i:nth-of-type(1) { background: var(--sun); left: 28%; top: 18%; }
.soon__art i:nth-of-type(2) { background: var(--pop); right: 26%; top: 30%; animation-delay: -1.2s; width: 10px; height: 10px; }
.soon__art i:nth-of-type(3) { background: var(--mint); left: 34%; bottom: 8%; animation-delay: -2.4s; width: 9px; height: 9px; }
@keyframes wiggle { 0%, 100% { rotate: -4deg; } 50% { rotate: 4deg; } }

/* game page: confetti + characters */
.confetti {
  position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image:
    radial-gradient(circle, rgb(255 255 255 / .55) 0 3px, transparent 4px),
    radial-gradient(circle, rgb(255 255 255 / .35) 0 5px, transparent 6px),
    radial-gradient(circle, color-mix(in srgb, var(--sun) 80%, transparent) 0 3px, transparent 4px);
  background-size: 120px 120px, 190px 190px, 260px 260px;
  background-position: 10px 20px, 70px 90px, 150px 40px;
  -webkit-mask: linear-gradient(90deg, transparent 0 35%, #000 70%); mask: linear-gradient(90deg, transparent 0 35%, #000 70%);
}
.game-hero { padding-bottom: clamp(70px, 9vw, 110px); }
.game-hero__media { position: relative; }
.char { position: absolute; z-index: 4; height: auto; filter: drop-shadow(0 14px 18px rgb(2 12 40 / .35)); pointer-events: none; animation: drift 6s ease-in-out infinite; }
.char--hero { width: clamp(90px, 14vw, 170px); bottom: -6%; }
.char--hero.char--right { right: -2%; }
.char--hero.char--left { left: -2%; animation-delay: -3s; }
.char--card { width: 34%; max-width: 150px; bottom: 6px; z-index: 3; }
.char--card.char--right { right: 30%; }
.char--card.char--left { left: 2%; }

/* trailer (click to load, no YouTube cookies before the click) */
.trailer h2 { margin-bottom: 18px; }
.video {
  position: relative; aspect-ratio: 16 / 9; max-width: 860px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(140deg, color-mix(in srgb, var(--game) 80%, white), color-mix(in srgb, var(--game) 70%, black));
  box-shadow: var(--shadow-lift);
}
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 800; }
.video__play svg { width: 74px; height: 74px; padding: 20px 18px 20px 24px; border-radius: 50%; background: var(--sun); fill: var(--ink); box-shadow: 0 6px 0 var(--sun-deep); transition: transform .15s; }
.video__play:hover { color: #fff; }
.video__play:hover svg { transform: scale(1.08); }
@media (max-width: 640px) { .char--hero.char--right { right: 2%; } .char--hero.char--left { left: 2%; } .char--hero { width: 96px; } }

/* ---------------------------------------------------------------- home gallery */
.gallery__strip { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 8px 4px 18px; overscroll-behavior-x: contain; scrollbar-width: thin; }
.gallery__item { flex: none; width: clamp(130px, 22vw, 190px); display: grid; gap: 8px; text-decoration: none; color: var(--ink); scroll-snap-align: start; font-weight: 800; font-size: var(--step--1); transition: transform .25s cubic-bezier(.2, .9, .3, 1.3); }
.gallery__item.is-wide { width: clamp(240px, 38vw, 340px); }
.gallery__item img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 10px 24px rgb(10 30 80 / .18), 0 0 0 3px var(--game); background: var(--game); }
.gallery__item:hover { transform: translateY(-6px) rotate(-1.5deg); }
.gallery__item span { text-align: center; opacity: .85; }
.gallery__strip:focus-visible { outline-offset: 4px; }

/* ---------------------------------------------------------------- languages: fonts */
:lang(ja) { --font-body: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; --font-display: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
:lang(ko) { --font-body: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; --font-display: "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif; }
:lang(zh) { --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; --font-display: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; }
:lang(hi) { --font-body: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; --font-display: "Noto Sans Devanagari", "Nirmala UI", "Mangal", sans-serif; }
:lang(ar) { --font-body: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; --font-display: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(zh) h1, :lang(zh) h2, :lang(zh) h3,
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { line-height: 1.25; letter-spacing: 0; }
:lang(ja) .eyebrow, :lang(ko) .eyebrow, :lang(zh) .eyebrow, :lang(hi) .eyebrow, :lang(ar) .eyebrow,
:lang(ja) .site-footer h2, :lang(ko) .site-footer h2, :lang(zh) .site-footer h2, :lang(hi) .site-footer h2, :lang(ar) .site-footer h2 { letter-spacing: 0; text-transform: none; }
:lang(ja) body, :lang(zh) body { line-break: strict; }

/* ---------------------------------------------------------------- right-to-left (Arabic) */
[dir="rtl"] .link-arrow svg, [dir="rtl"] .btn svg { transform: scaleX(-1); }
[dir="rtl"] .link-arrow:hover svg { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .bubbles i:nth-child(1) { left: auto; right: -120px; }
[dir="rtl"] .bubbles i:nth-child(3) { right: auto; left: -60px; }
[dir="rtl"] .stats > div + div { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .crumbs li + li::before { content: "‹"; }
[dir="rtl"] .gallery__strip, [dir="rtl"] .shots { direction: rtl; }

/* ---------------------------------------------------------------- v3: stickers + sky
   Each game card is a "sticker" in its own color (--game); the home hero gets a sky with slow clouds.
   CSS only: no markup, text or URL changes. */
.hero {
  background:
    linear-gradient(180deg, transparent 50%, rgb(77 155 255 / .38) 100%),
    radial-gradient(120% 90% at 85% 10%, var(--blue-600) 0%, transparent 55%),
    radial-gradient(90% 80% at 0% 100%, var(--blue-950) 0%, transparent 60%),
    var(--blue-800);
}
.hero::before {
  content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; height: 62%;
  width: calc(100% + 1200px);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300'%3E%3Cdefs%3E%3Cg id='c'%3E%3Ccircle cx='60' cy='56' r='28'/%3E%3Ccircle cx='104' cy='40' r='38'/%3E%3Ccircle cx='150' cy='54' r='30'/%3E%3Crect x='32' y='54' width='146' height='30' rx='15'/%3E%3C/g%3E%3C/defs%3E%3Cg fill='white'%3E%3Cuse href='%23c' transform='translate(40 150) scale(1.5)' fill-opacity='.16'/%3E%3Cuse href='%23c' transform='translate(420 40) scale(.9)' fill-opacity='.12'/%3E%3Cuse href='%23c' transform='translate(640 170) scale(1.9)' fill-opacity='.14'/%3E%3Cuse href='%23c' transform='translate(980 70) scale(1.1)' fill-opacity='.12'/%3E%3Cuse href='%23c' transform='translate(900 200) scale(.8)' fill-opacity='.2'/%3E%3C/g%3E%3C/svg%3E") repeat-x left bottom / 1200px 100%;
  animation: sky 120s linear infinite;
}
@keyframes sky { to { transform: translateX(-1200px); } }
[dir="rtl"] .hero::before { left: auto; right: 0; animation-name: sky-rtl; }
@keyframes sky-rtl { to { transform: translateX(1200px); } }
.hero h1 { text-shadow: 0 3px 0 rgb(4 27 77 / .45); }

/* sticker cards: thick colored "edge" underneath, slight tilt, straightens on hover */
.game-card[style*="--game"] {
  box-shadow: 0 6px 0 color-mix(in srgb, var(--game) 72%, black), var(--shadow);
}
@media (min-width: 640px) {
  .game-grid > .game-card:nth-child(odd) { rotate: -.8deg; }
  .game-grid > .game-card:nth-child(even) { rotate: .8deg; }
  .game-grid > .game-card--big { rotate: 0deg; }
}
.game-card[style*="--game"]:hover {
  rotate: 0deg; transform: translateY(-6px);
  box-shadow: 0 12px 0 color-mix(in srgb, var(--game) 72%, black), var(--shadow-lift);
}
.game-card[style*="--game"]:active { transform: translateY(2px); box-shadow: 0 2px 0 color-mix(in srgb, var(--game) 72%, black), var(--shadow); transition-duration: .08s; }
.game-card[style*="--game"] .game-card__art { border-bottom: 4px solid color-mix(in srgb, var(--game) 72%, black); }
.game-card__body h3 { font-weight: 800; }

/* game page: cartoon title (the wavy edge already exists via .wave) */
.game-hero h1 { text-shadow: 0 4px 0 color-mix(in srgb, var(--game) 55%, black); }
.download-box { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--game) 25%, white), 0 5px 0 color-mix(in srgb, var(--game) 40%, white); }

/* ---------------------------------------------------------------- v3.1: finishing touches */
/* studio band: wavy top edge (same gradient direction as the band so the seam is invisible) */
.studio { position: relative; background: linear-gradient(90deg, var(--blue-900), var(--blue-800)); }
.studio::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: clamp(20px, 3vw, 44px);
  background: linear-gradient(90deg, var(--blue-900), var(--blue-800));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 260 0 520 62 760 30 S 1220 6 1440 36 V60 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 38 C 260 0 520 62 760 30 S 1220 6 1440 36 V60 H0 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.studio img { filter: drop-shadow(0 12px 18px rgb(2 12 40 / .35)); }

/* "why" cards: same sticker edge, in each card's own tone; icon tilts a little */
.why__item { box-shadow: 0 5px 0 color-mix(in srgb, var(--tone) 38%, white), var(--shadow); }
.why__item > svg { rotate: -5deg; transition: rotate .25s cubic-bezier(.2, .9, .3, 1.4); }
.why__item:hover > svg { rotate: 4deg; }

/* filters + buttons answer the tap with a small press */
.filter { box-shadow: inset 0 0 0 2px var(--line), 0 3px 0 var(--line); }
.filter:hover { box-shadow: inset 0 0 0 2px var(--blue-400), 0 3px 0 var(--blue-400); }
.filter.is-on { box-shadow: 0 3px 0 var(--blue-600); }
.filter:active { transform: translateY(2px); box-shadow: inset 0 0 0 2px var(--line); }
.store-btn { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18), 0 3px 0 rgb(0 0 0 / .45); }
.store-btn:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .18); }

/* stats strip: numbers in the brand's candy colors */
.stats > div:nth-child(1) b { color: var(--pop); }
.stats > div:nth-child(2) b { color: var(--blue-600); }
.stats > div:nth-child(3) b { color: color-mix(in srgb, var(--mint) 80%, black); }
.stats > div:nth-child(4) b { color: color-mix(in srgb, var(--sun-deep) 85%, black); }
.stats { box-shadow: 0 6px 0 var(--line), var(--shadow-lift); }

/* game page: screenshots get a frame in the game's color; about + download read as one sticker pair */
.shots img { box-shadow: 0 0 0 3px color-mix(in srgb, var(--game, var(--blue-600)) 60%, white), var(--shadow); }
.page-hero h1 { text-shadow: 0 3px 0 rgb(4 27 77 / .4); }

/* ---------------------------------------------------------------- official store badges
   Apple's SVG and Google's PNG, unaltered (no filters, no recoloring, never stretched). Both are drawn the same width
   (--badge-w) on every page; each keeps its own proportions, so the heights differ by a few px. */
:root { --badge-w: 136px; }
.store-badge { display: inline-flex; line-height: 0; padding: 0; border-radius: 8px; transition: transform .15s ease; }
.store-badge:hover { transform: translateY(-2px); }
.store-badge:active { transform: translateY(2px); }
.stores { align-items: center; gap: 10px 12px; }
.store-badge:not(.store-badge--play) img { width: var(--badge-w); height: auto; max-width: none; }
/* Google's PNG (646x250) already includes the clear space Google asks for. The image is enlarged by --play-k (en/ar have side padding)
   and pulled back with negative margins so the VISIBLE badge is exactly --badge-w wide. */
.store-badge--play { border-radius: 10px; }
.store-badge--play img {
  width: calc(var(--badge-w) * var(--play-k, 1)); height: auto; max-width: none;
  margin-inline: calc(var(--badge-w) * (1 - var(--play-k, 1)) / 2);
  margin-block: calc(var(--badge-w) * var(--play-k, 1) * .387 * (var(--play-v, .76) - 1) / 2);
}

/* ---------------------------------------------------------------- whole cards and slide images are clickable
   The card's link is stretched over the card (.stretched::after, z-index 1); the icon, screenshot and characters sit above it
   (z-index 2-3), so they must let the click through. The carousel image area is a link to the game page too. */
.game-card__art .game-icon, .game-card__shot, .char { pointer-events: none; }
.game-card[style*="--game"] { cursor: pointer; }
.game-card__stores a { cursor: pointer; }
a.slide__media { text-decoration: none; color: inherit; cursor: pointer; }