/* Avec Bae storefront, mobile first.
   Design: docs/design/HANDOFF.md (Claude Design, October 2026). Contrast choices are recorded in PRODUCT.md. */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/assets/plus-jakarta-sans-latin-817f351b.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Unbounded";
  src: url("/assets/unbounded-latin-9c83474d.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}

@font-face {
  font-family: "Caveat Brush";
  src: url("/assets/caveat-brush-latin-e92890c9.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* brand */
  --sky: #6ec1e4;
  --night: #2d375e;
  --pink: #c7405e;
  --pink-hover: #a8344e;
  --pink-light: #e37189;
  --ink: #171010;
  --body: #3f4245;
  --muted: #5c6066;
  --border: #eaeaec;
  --soft: #fafafa;
  --white: #fff;
  --footer: #111;
  --footer-muted: #a9adb3;
  --footer-line: #3a3d42;

  /* playful palette from the printed mini guide, always with --ink text */
  --blue-2: #66b4d9;
  --sky-light: #8ac6e2;
  --coral: #f48ea3;
  --sun: #ffd851;
  --pastel-yellow: #ffe698;
  --almond: #c0dfac;

  /* feedback */
  --alert: #9c2131;
  --alert-bg: #fdeaee;
  --notice: #1f5f7a;
  --notice-bg: #e8f6fc;

  --font-display: "Unbounded", "Arial Black", sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-accent: "Caveat Brush", "Segoe Print", cursive;

  --radius-pill: 50px;
  --radius-card: 10px;
  --btn-h: 55px;
  --tap: 44px;
  --gutter: 16px;
  --container: 1200px;
  --header-h: 64px;
  --buy-bar-space: 88px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 8px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}
body.has-buy-bar { padding-bottom: var(--buy-bar-space); }

/* Components set their own display, which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }

::selection { background: var(--sun); color: var(--ink); }

img, video { max-width: 100%; display: block; }

a { color: var(--night); text-underline-offset: 3px; }
a:hover { color: var(--ink); }

:focus-visible { outline: 3px solid var(--night); outline-offset: 3px; }
.site-footer :focus-visible,
.toast :focus-visible { outline-color: var(--white); }

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }

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

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; background: var(--white); color: var(--ink); padding: 8px 16px; border-radius: var(--radius-card); }

.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

.turbo-progress-bar { background: var(--pink); }

/* Type */

.display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  text-transform: uppercase;
  color: var(--night);
}
.heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--ink);
}
.on-sky .heading { color: var(--night); }
.accent {
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  color: var(--pink);
}
.lead { font-size: 15px; font-weight: 500; color: var(--night); }
.section-head { display: flex; flex-direction: column; gap: 4px; }


/* Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--btn-h);
  padding: 0 28px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--pink);
  color: var(--white);
  font: 700 14px/1.2 var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.btn:hover { background: var(--pink-hover); color: var(--white); }
.btn:active { transform: scale(0.97); }
.btn--block { width: 100%; }
.btn--secondary { background: transparent; color: var(--night); box-shadow: inset 0 0 0 2px var(--night); }
.btn--secondary:hover { background: var(--night); color: var(--white); }
.btn .icon { flex: none; }

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--soft); color: var(--ink); }

/* Add-to-cart states, driven by the quick-add controller */
.add-form { display: contents; }
.btn[aria-busy="true"],
.quick-add[aria-busy="true"] { background: var(--pink-hover); transform: scale(0.92); }
.btn.is-added,
.quick-add.is-added { background: var(--night); }
.add-label--busy,
.add-label--done { display: none; }
[aria-busy="true"] .add-label--idle,
.is-added .add-label--idle { display: none; }
[aria-busy="true"] .add-label--busy,
.is-added .add-label--done { display: inline-flex; align-items: center; gap: 8px; }

.spinner {
  width: 18px; height: 18px;
  border: 2px solid rgb(255 255 255 / 0.4);
  border-top-color: var(--white);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Price */

.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.price__current { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.price__regular { font-weight: 600; color: var(--muted); white-space: nowrap; }
.on-sky .price__regular { color: var(--night); }
.price--s { flex-direction: column; gap: 0; }
.price--s .price__current { font-size: 14px; }
.price--s .price__regular { font-size: 12px; font-weight: 500; }
.price--m .price__current { font-size: 22px; }
.price--m .price__regular { font-size: 15px; }
.price--l .price__current { font-size: 32px; }
.price--l .price__regular { font-size: 17px; }

.discount {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: var(--sun);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid transparent;
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding-inline: 16px 12px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: var(--tap); text-decoration: none; }
.brand img { width: 40px; height: auto; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.04em; color: var(--ink); }

.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav__links { display: none; }
.site-nav__link { display: inline-flex; align-items: center; min-height: var(--tap); padding-inline: 12px; color: var(--ink); font-weight: 600; text-decoration: none; }
.site-nav__link:hover { text-decoration: underline; }

.cart-link { position: relative; }
.cart-count {
  position: absolute;
  top: 2px; right: 0;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--pink);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.menu { position: relative; }
.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  border-radius: var(--radius-card);
  background: var(--white);
  box-shadow: 0 12px 32px rgb(23 16 16 / 0.16);
}
.menu__panel a { display: flex; align-items: center; min-height: var(--tap); padding-inline: 12px; border-radius: 8px; color: var(--ink); font-weight: 600; text-decoration: none; }
.menu__panel a:hover { background: var(--soft); }

/* Flash */

.flash { padding: 12px 0; font-weight: 600; }
.flash--notice { background: var(--notice-bg); color: var(--notice); }
.flash--alert { background: var(--alert-bg); color: var(--alert); }

/* Sky sections */

.on-sky { background: var(--sky); color: var(--night); }

/* Hero mask: one wide arched window and two narrow pills, staggered */

.mask {
  --mask-h: 270px;
  --mask-gap: 8px;
  --mask-offset: 40px;
  position: relative;
  display: flex;
  gap: var(--mask-gap);
  height: var(--mask-h);
  container-type: inline-size;
}
.mask__window {
  position: relative;
  overflow: hidden;
  background: var(--sky-light);
}
.mask__window--wide { flex: 1.75; border-radius: 120px 120px 24px 24px; background: var(--night); }
.mask__window--narrow { flex: 1; border-radius: 120px; }
.mask__window--low { margin-top: var(--mask-offset); background: var(--coral); }
.mask__window--high { margin-bottom: var(--mask-offset); background: var(--sun); }
.mask__window > img,
.mask__window > video { width: 100%; height: 100%; object-fit: cover; }
.mask__window--low > img { object-position: 72% 40%; }
.mask__window--high > img { object-position: 52% 20%; }

/* "single" variant: one photo seen through all three windows. Each window shows the slice of the
   photo that sits behind it, positioned with container query units. */
.mask--single .mask__window > img {
  position: absolute;
  top: 0;
  width: 100cqw;
  max-width: none;
  height: var(--mask-h);
  object-position: center;
}
.mask--single .mask__window--wide > img { left: 0; }
.mask--single .mask__window--low > img {
  left: calc(-1 * ((100cqw - 2 * var(--mask-gap)) / 3.75 * 1.75 + var(--mask-gap)));
  top: calc(-1 * var(--mask-offset));
}
.mask--single .mask__window--high > img {
  left: calc(-1 * ((100cqw - 2 * var(--mask-gap)) / 3.75 * 2.75 + 2 * var(--mask-gap)));
}

.mask__badge {
  position: absolute;
  right: 6px;
  bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 3px solid var(--sky);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  white-space: nowrap;
  transform: rotate(-10deg);
}

/* Game hero */

.game-hero { padding-block: 14px 32px; }
.game-hero__inner { display: flex; flex-direction: column; gap: 14px; }
.game-hero__text { display: contents; }
.game-hero__media { order: 2; }
.game-hero__lead { order: 3; }
.game-hero__steps { order: 4; }
.game-hero__buy { display: none; }

.breadcrumb { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; color: var(--night); }
.breadcrumb a { color: var(--night); }
.breadcrumb ol { display: contents; list-style: none; }

.chips-label { font-family: var(--font-display); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--night); }
.chips {
  display: flex;
  gap: 8px;
  margin: 8px calc(-1 * var(--gutter)) 0;
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
}
.chips li { position: relative; flex: none; }
.chip {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 14px 0 6px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.chip:hover { color: var(--ink); background: var(--pastel-yellow); }
.chip__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 12px;
}

.microline { font-size: 13px; font-weight: 500; color: var(--night); }

/* Sections */

.section { padding-block: 48px 40px; }
.section > .container { display: flex; flex-direction: column; gap: 20px; }
/* Flex children default to min-width: auto and would stretch to the width of the
   horizontally scrolling rows (step chips, step cards), widening the whole page on mobile. */
.section > .container > *,
.game-hero__inner > *,
.game-hero__steps { min-width: 0; }

/* How to play */

.steps {
  display: flex;
  gap: 12px;
  margin: 0 calc(-1 * var(--gutter));
  padding: 0 var(--gutter);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
}
/* position: relative keeps .sr-only text inside the scrolling row instead of widening the page */
.step { position: relative; flex: none; width: 264px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 12px; }
.step__media {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--step-color, var(--blue-2));
}
.step:nth-child(3n + 2) { --step-color: var(--coral); }
.step:nth-child(3n + 3) { --step-color: var(--almond); }
.step__media video,
.step__media img { width: 100%; height: 100%; object-fit: cover; }
.step__num {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border-radius: 50%;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
}
.step__fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 120px;
  color: var(--ink);
}
.step__title { font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); }

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--night);
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.dots { display: flex; justify-content: center; gap: 6px; }
.dots span { width: 6px; height: 6px; border-radius: 3px; background: #c9cbd0; transition: width 0.2s var(--ease-out), background-color 0.2s; }
.dots span.is-active { width: 22px; background: var(--ink); }

/* Call to action */

.cta { padding-block: 40px; }
.cta__inner { display: flex; flex-direction: column; gap: 18px; }
.cta__image { width: 100%; height: 300px; object-fit: cover; border-radius: var(--radius-card); }
.cta__body { display: flex; flex-direction: column; gap: 18px; }

/* Customer gallery */

.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gallery img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-card); background: var(--soft); }
.gallery--few img:first-child { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
.gallery__more { justify-self: start; }

/* What's in the box */

.box { display: flex; flex-direction: column; gap: 20px; }
.box__content { display: flex; flex-direction: column; gap: 20px; }
.box__image { width: 100%; max-height: 520px; object-fit: cover; border-radius: var(--radius-card); background: var(--coral); }
.box__items { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.box__item { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.box__item:last-child { border-bottom: 0; }
.box__dot { flex: none; width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--sky); }
.box__item:nth-child(3n + 2) .box__dot { background: var(--coral); }
.box__item:nth-child(3n + 3) .box__dot { background: var(--almond); }
.box__item-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.box__item-text { margin-top: 4px; }
.box__item-text p + p { margin-top: 4px; }
.box__closing {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  border-radius: var(--radius-card);
  background: var(--pastel-yellow);
  color: var(--ink);
  transform: rotate(-1deg);
}
.box__closing h3 { font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); }

/* Trust band */

.trust { background: var(--soft); padding-block: 28px; }
.trust__list { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.trust__item { display: flex; align-items: center; gap: 14px; font-weight: 700; color: var(--ink); }
.trust__icon { flex: none; display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; }
.trust__item:nth-child(1) .trust__icon { background: var(--sky); color: var(--night); }
.trust__item:nth-child(2) .trust__icon { background: var(--coral); color: var(--ink); }
.trust__item:nth-child(3) .trust__icon { background: var(--sun); color: var(--ink); }

/* Footer */

.site-footer { background: var(--footer); color: var(--white); padding-block: 36px 40px; }
.site-footer__inner { display: flex; flex-direction: column; gap: 22px; }
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__brand img { width: 48px; height: auto; }
.site-footer__name { display: block; font-family: var(--font-display); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; }
.site-footer__tagline { font-size: 14px; color: var(--footer-muted); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.pill-link {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--footer-line);
  border-radius: var(--radius-pill);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}
.pill-link:hover { color: var(--ink); background: var(--white); }
.site-footer__contact { display: flex; flex-direction: column; gap: 4px; }
.site-footer__contact a { display: flex; align-items: center; min-height: var(--tap); color: var(--white); font-size: 15px; font-weight: 600; }
.site-footer__contact a:hover { color: var(--sun); }
.site-footer__legal { font-size: 13px; color: var(--footer-muted); }

/* Sticky buy bar */

.buy-bar {
  position: fixed;
  inset: auto 0 0;
  z-index: 30;
  background: var(--white);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgb(23 16 16 / 0.08);
  padding: 12px 16px max(16px, env(safe-area-inset-bottom));
  transition: transform 0.2s var(--ease-out);
}
.buy-bar[data-hidden] { transform: translateY(110%); }
.buy-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: var(--container); margin-inline: auto; }
.buy-bar__product { display: none; }
.buy-bar__end { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.buy-bar__price { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.buy-bar__current { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink); white-space: nowrap; }
.buy-bar__meta { font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; }
.buy-bar__cart { background: var(--night); }
.buy-bar__cart:hover { background: var(--ink); }
.buy-bar .btn { padding-inline: 22px; }

/* Toasts */

.toasts {
  position: fixed;
  inset: auto 16px calc(16px + env(safe-area-inset-bottom)) 16px;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
body.has-buy-bar .toasts { bottom: calc(var(--buy-bar-space) + 16px); }
.toast {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 358px;
  padding: 12px 14px;
  border-radius: var(--radius-card);
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  box-shadow: 0 10px 30px rgb(23 16 16 / 0.25);
  pointer-events: auto;
  touch-action: pan-y;
  animation: toast-in 0.25s var(--ease-out);
}
.toast.is-leaving { opacity: 0; transform: translateY(12px); transition: opacity 0.2s, transform 0.2s; }
.toast__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--almond); color: var(--ink); }
.toast__text { flex: 1; font-size: 14px; }
.toast__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--sun); font-weight: 700; font-size: 14px; white-space: nowrap; }
.toast__link:hover { color: var(--white); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

/* Home */

.home-hero { padding-block: 24px 36px; }
.home-hero__inner { display: flex; flex-direction: column; gap: 18px; }
.home-hero__title { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.home-hero__title .display { font-size: 32px; line-height: 1.08; }
.highlight {
  padding: 0 14px;
  border-radius: var(--radius-card);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-accent);
  font-weight: 400;
  font-size: 48px;
  line-height: 1.1;
  transform: rotate(-3deg);
}
.home-hero__lead { font-size: 16px; }
.home-hero__text { display: contents; }
.home-hero .mask { order: 3; }
.home-hero__cta { order: 4; width: 100%; }
.home-hero .mask { --mask-h: 250px; }
.home-hero .mask__window { background: var(--pink-light); }

.games { padding-block: 44px; }
.games > .container { display: flex; flex-direction: column; gap: 20px; }
.game-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 12px; }

.game-card { display: flex; flex-direction: column; gap: 10px; }
.game-card__link { display: flex; flex-direction: column; gap: 10px; color: inherit; text-decoration: none; }
.game-card__link:hover { color: inherit; }
.game-card__link:hover .game-card__name { text-decoration: underline; }
.game-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--card-color, var(--blue-2));
}
.game-card:nth-child(4n + 2) { --card-color: var(--coral); }
.game-card:nth-child(4n + 3) { --card-color: var(--almond); }
.game-card:nth-child(4n + 4) { --card-color: var(--pastel-yellow); }
.game-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.game-card__link:hover img { transform: scale(1.03); }
.game-card__media .discount { position: absolute; top: 8px; left: 8px; }
.game-card__name { font-family: var(--font-display); font-weight: 500; font-size: 13px; line-height: 1.25; text-transform: uppercase; color: var(--ink); }
.game-card__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.45;
}
.game-card__buy { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: auto; }

.quick-add {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap);
  height: var(--tap);
  border: 0;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.quick-add:hover { background: var(--pink-hover); }

.guide { padding-block: 44px; }
.guide__inner { display: flex; flex-direction: column; gap: 18px; }
.guide__title { display: flex; flex-direction: column; gap: 0; }
.guide__title .accent { font-size: 44px; color: var(--ink); }
.guide__cards { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.guide__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border-radius: var(--radius-card);
  color: var(--ink);
  font-weight: 600;
}
.guide__card:nth-child(1) { background: var(--pastel-yellow); transform: rotate(-1deg); }
.guide__card:nth-child(2) { background: var(--almond); transform: rotate(0.6deg); }
.guide__card:nth-child(3) { background: var(--coral); transform: rotate(-0.6deg); }
.guide__num { flex: none; min-width: 40px; font-family: var(--font-display); font-weight: 700; font-size: 26px; }

/* Shop page */

.page-title { padding-block: 32px 8px; }

/* Cart & checkout */

.empty { margin-bottom: 24px; }
.cart { list-style: none; margin: 0 0 32px; padding: 0; }
.cart__line {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  grid-template-areas: "image info subtotal" "image quantity remove";
  gap: 8px 16px;
  align-items: center;
  padding-block: 16px;
  border-bottom: 1px solid var(--border);
}
.cart__image { grid-area: image; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.cart__info { grid-area: info; display: grid; }
.cart__name { font-weight: 700; color: var(--ink); text-decoration: none; }
.cart__name:hover { text-decoration: underline; }
.cart__unit { font-size: 14px; }
.cart__quantity { grid-area: quantity; }
.cart__quantity input { width: 80px; }
.cart__subtotal { grid-area: subtotal; font-weight: 700; text-align: right; white-space: nowrap; }
.cart__remove { grid-area: remove; justify-self: end; }
.cart__summary { display: grid; gap: 8px; justify-items: start; }
.cart__total { font-size: 18px; white-space: nowrap; }

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 4px;
  background: none;
  border: 0;
  font: inherit;
  font-size: 14px;
  color: var(--body);
  text-decoration: underline;
  cursor: pointer;
}

.hint { font-size: 14px; color: var(--muted); }

.form { display: grid; gap: 20px; }
.form__field { display: grid; gap: 6px; }
.form__field label { font-weight: 600; font-size: 14px; color: var(--ink); }

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  width: 100%;
  min-height: var(--tap);
  padding: 12px 14px;
  border: 1px solid #8a8d93;
  border-radius: 8px;
  font: inherit;
  font-size: 16px; /* keeps iOS from zooming into the field */
  color: var(--ink);
  background: var(--white);
}
input::placeholder,
textarea::placeholder { color: var(--muted); }
input:focus-visible,
textarea:focus-visible,
select:focus-visible { outline: 3px solid var(--sky); outline-offset: 1px; border-color: var(--night); }
.field_with_errors { display: contents; }
.field_with_errors input,
.field_with_errors textarea { border-color: var(--alert); }

.form__errors { padding: 16px; border-radius: 8px; background: var(--alert-bg); color: var(--alert); }
.form__errors p { margin-bottom: 8px; font-weight: 600; }
.form__errors ul { margin: 0; padding-left: 20px; }

.checkout__summary,
.payment-box {
  padding: 24px;
  border-radius: var(--radius-card);
  background: var(--soft);
  border: 1px solid var(--border);
  margin-block: 24px;
}
.checkout__summary ul { list-style: none; margin: 0 0 12px; padding: 0; }
.checkout__summary li { display: flex; justify-content: space-between; gap: 16px; padding-block: 4px; }
.checkout__heading { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; color: var(--ink); margin-bottom: 8px; }
.payment-box { background: #fff8e1; border-color: var(--pastel-yellow); }
.payment-box ol { padding-left: 20px; }
.payment-box li + li { margin-top: 8px; }

.page { padding-block: 32px 48px; }
.page .heading { margin-bottom: 24px; }

/* Shared bits for delivery coverage */

.nowrap { white-space: nowrap; }
.inline-link { color: var(--night); font-weight: 700; text-decoration: underline; }
.inline-link--tap { display: inline-block; padding-block: 12px; margin-block: -12px; }
.delivery-row {
  order: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  color: var(--night);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.delivery-row .icon { flex: none; }
.delivery-row strong { text-decoration: underline; }
.trust__sub { display: block; font-size: 13px; font-weight: 500; color: var(--body); }

.btn:disabled,
.btn[disabled] { background: var(--border); color: var(--muted); cursor: not-allowed; transform: none; }
.btn--ink { color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.btn--ink:hover { background: var(--ink); color: var(--white); }

/* Checkout layout */

.checkout-page { background: var(--white); }
.checkout-header { border-bottom: 1px solid var(--border); }
.checkout-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.checkout-header__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--night); font-size: 14px; font-weight: 600; }
.checkout-header__steps { display: none; }
.checkout-steps-mobile { padding-block: 14px 0; }
.checkout-main { padding-block: 24px 56px; }
.checkout-footer { background: var(--footer); color: var(--footer-muted); padding-block: 24px; font-size: 14px; }
.checkout-footer__inner { display: flex; flex-direction: column; gap: 6px; }
.checkout-footer a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--white); font-weight: 600; }

.checkout { display: flex; flex-direction: column; gap: 24px; }
.checkout.container--narrow { max-width: calc(720px + 2 * var(--gutter)); }
.checkout__title { font-size: 26px; }
.checkout__cta { display: flex; flex-direction: column; gap: 10px; }
.microline--center { text-align: center; }

.steps-indicator { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.steps-indicator__step { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.steps-indicator__step + .steps-indicator__step::before {
  content: "";
  width: clamp(16px, 6vw, 48px);
  height: 2px;
  margin-right: 2px;
  background: var(--border);
}
.steps-indicator__step.is-done + .steps-indicator__step::before { background: var(--night); }
.steps-indicator__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--muted);
  font-size: 12px;
}
.is-done .steps-indicator__dot { background: var(--night); color: var(--white); box-shadow: none; }
.is-current .steps-indicator__dot { background: var(--pink); color: var(--white); box-shadow: none; }
.is-done, .is-current { color: var(--ink); }

/* Cart */

.cart-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.cart-lines { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.cart-line { display: flex; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--border); }
.cart-line__image { flex: none; width: 84px; height: 105px; object-fit: cover; border-radius: var(--radius-card); background: var(--soft); }
.cart-line__body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cart-line__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cart-line__name { font-family: var(--font-display); font-weight: 500; font-size: 14px; text-transform: uppercase; color: var(--ink); text-decoration: none; }
.cart-line__name:hover { text-decoration: underline; }
.cart-line__total { font-family: var(--font-display); font-weight: 700; color: var(--ink); white-space: nowrap; }
.cart-line__unit { font-size: 13px; color: var(--muted); }
.cart-line__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }

.stepper { display: inline-flex; align-items: center; border: 1.5px solid #c9cbd0; border-radius: var(--radius-pill); }
.stepper__form { display: contents; }
.stepper__btn { display: flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.stepper__btn:hover { background: var(--soft); }
.stepper__btn:disabled { color: var(--border); cursor: not-allowed; }
.stepper__value { min-width: 28px; text-align: center; font-weight: 700; color: var(--ink); }

.info-box { display: flex; gap: 14px; padding: 16px; border-radius: var(--radius-card); background: #eaf6fb; color: var(--night); font-size: 14px; }
.info-box__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--sky); color: var(--night); }
.info-box__icon--s { width: 32px; height: 32px; }
.info-box__title { font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.info-box__link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--night); font-weight: 700; }

.summary-lines { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.summary-lines > div { display: flex; justify-content: space-between; gap: 16px; }
.summary-lines dt { color: var(--body); }
.summary-lines dd { margin: 0; text-align: right; color: var(--ink); }
.summary-lines__total { padding-top: 12px; border-top: 1px solid var(--border); font-weight: 700; }
.summary-lines__total dd { font-family: var(--font-display); font-size: 20px; white-space: nowrap; }

/* Delivery step */

.checkout__layout { display: flex; flex-direction: column; gap: 24px; }
.fieldset { display: flex; flex-direction: column; gap: 14px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset__legend { margin-bottom: 4px; padding: 0; font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); }
.fieldset__grid { display: grid; gap: 14px; }
.phone-input { display: flex; gap: 8px; }
.phone-input__prefix { flex: none; display: flex; align-items: center; padding: 0 12px; border: 1px solid #8a8d93; border-radius: 8px; background: var(--soft); color: var(--ink); font-weight: 600; }
.field-error { margin-top: 2px; color: var(--alert); font-size: 14px; font-weight: 600; }
[aria-invalid="true"] { border-color: var(--alert) !important; }

.zone-cards { display: grid; gap: 10px; }
.zone-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #c9cbd0;
  border-radius: var(--radius-card);
  background: var(--white);
  cursor: pointer;
}
.zone-card:hover { border-color: var(--night); }
.zone-card__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.zone-card__dot { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--muted); }
.zone-card__body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zone-card__name { font-weight: 700; color: var(--ink); }
.zone-card__quartiers { font-size: 13px; color: var(--muted); }
.zone-card__fee { flex: none; font-weight: 700; color: var(--ink); white-space: nowrap; }
.zone-card:has(.zone-card__input:checked) { border: 2px solid var(--night); padding: 13px 15px; background: #eaf6fb; }
.zone-card:has(.zone-card__input:checked) .zone-card__dot { box-shadow: inset 0 0 0 2px var(--night), inset 0 0 0 5px var(--white); background: var(--night); }
.zone-card:has(.zone-card__input:focus-visible) { outline: 3px solid var(--night); outline-offset: 3px; }

.out-of-zone { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; border-radius: var(--radius-card); background: var(--pastel-yellow); color: var(--ink); }
.out-of-zone__title { font-weight: 700; }

.summary-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--soft); }
.summary-card__title { font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); }
.summary-card__items { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.summary-card__items li { display: flex; align-items: center; gap: 10px; }
.summary-card__items li > span:first-of-type { flex: 1; }
.summary-card__thumb { width: 40px; height: 40px; object-fit: cover; border-radius: 6px; }
.summary-card__line { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.summary-card__due { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-weight: 700; color: var(--ink); }
.summary-card__amount { font-family: var(--font-display); font-size: 22px; white-space: nowrap; }
.summary-card__pending { font-size: 13px; color: var(--muted); }
.courier-fee { display: flex; gap: 12px; padding: 14px; border-radius: var(--radius-card); background: #eaf6fb; color: var(--night); }
.courier-fee__row { display: flex; justify-content: space-between; gap: 12px; font-weight: 700; color: var(--ink); }
.courier-fee__text { font-size: 13px; color: var(--night); }

/* Confirmation */

.confirmation__head { display: flex; flex-direction: column; gap: 6px; }
.confirmation__head .checkout__title { margin-bottom: 4px; }
.status-pill { display: inline-flex; margin-left: 4px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--sun); color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.status-pill--paid, .status-pill--shipped, .status-pill--delivered { background: var(--almond); }
.status-pill--cancelled { background: var(--border); }
.confirmation__layout { display: flex; flex-direction: column; gap: 24px; }
.confirmation__main, .confirmation__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.confirmation__subtitle { font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }

.pay-card { overflow: hidden; border: 2px solid var(--night); border-radius: 12px; }
.pay-card__head { padding: 14px 16px; background: var(--sky); color: var(--night); font-family: var(--font-display); font-weight: 700; font-size: 14px; text-transform: uppercase; }
.pay-card__rows { display: flex; flex-direction: column; }
.pay-card__foot { display: flex; flex-direction: column; gap: 14px; padding: 16px; font-size: 14px; }

.copy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.copy-row__text { display: flex; flex-direction: column; min-width: 0; }
.copy-row__label { font-size: 12px; color: var(--muted); }
.copy-row__value { font-size: 17px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.copy-row__value--large { font-family: var(--font-display); font-size: 22px; }
.copy-row__note { font-size: 12px; color: var(--muted); }
.copy-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--night);
  box-shadow: inset 0 0 0 1.5px var(--night);
  font: 600 13px/1 var(--font-body);
  cursor: pointer;
}
.copy-btn > span { display: inline-flex; align-items: center; gap: 6px; }
.copy-btn__done { display: none !important; }
.copy-btn.is-copied { background: var(--night); color: var(--white); }
.copy-btn.is-copied .copy-btn__idle { display: none !important; }
.copy-btn.is-copied .copy-btn__done { display: inline-flex !important; }

.delivery-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 12px; background: #eaf6fb; color: var(--night); font-size: 14px; }
.delivery-card__title { font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.delivery-card__zone { font-weight: 700; color: var(--ink); }
.delivery-card__fee { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--radius-card); background: var(--white); }

.timeline { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: 14px; }
.timeline li { position: relative; display: flex; gap: 12px; align-items: flex-start; counter-increment: step; }
.timeline li::before {
  content: counter(step);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px var(--night);
  color: var(--night);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
}
.timeline li.is-current::before { background: var(--pink); color: var(--white); box-shadow: none; }
.timeline strong { color: var(--ink); }

.order-summary { padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--soft); font-size: 14px; }
.order-summary ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.order-summary li { display: flex; justify-content: space-between; gap: 12px; }

/* Delivery zones dialog: bottom sheet on mobile, centered on desktop */

.zones { display: flex; flex-direction: column; gap: 16px; }
.zones__intro { font-size: 15px; }
.zones__table-wrap { overflow-x: auto; }
.zones__table { width: 100%; border-collapse: collapse; }
.zones__table th, .zones__table td { padding: 14px 0; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.zones__table thead th { padding-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.zones__table td, .zones__table thead th:last-child { text-align: right; white-space: nowrap; font-weight: 700; color: var(--ink); padding-left: 16px; }
.zones__name { display: block; font-weight: 700; color: var(--ink); }
.zones__quartiers { display: block; font-size: 14px; font-weight: 400; color: var(--muted); }
.zones__missing { padding: 14px 16px; border-radius: var(--radius-card); background: var(--pastel-yellow); color: var(--ink); }
.zones__missing a { color: var(--ink); font-weight: 700; }

.zones-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 92vh;
  margin: auto 0 0;
  padding: 0;
  border: 0;
  border-radius: 20px 20px 0 0;
  background: var(--white);
  color: var(--body);
}
.zones-dialog::backdrop { background: rgb(23 16 16 / 0.55); }
.zones-dialog[open] { animation: sheet-in 0.25s var(--ease-out); }
.zones-dialog__panel { display: flex; flex-direction: column; gap: 16px; padding: 10px 20px max(20px, env(safe-area-inset-bottom)); }
.zones-dialog__handle { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: #c9cbd0; }
.zones-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zones-dialog__close { background: var(--soft); }
@keyframes sheet-in { from { transform: translateY(40px); opacity: 0; } }

/* Desktop */

@media (min-width: 768px) {
  :root { --gutter: 32px; --header-h: 76px; }
  body { font-size: 16px; }
  .display { font-size: clamp(30px, 3.6vw, 50px); }
  .heading { font-size: clamp(26px, 2.6vw, 36px); }
  .accent { font-size: clamp(26px, 2.4vw, 32px); }
  .lead { font-size: 17px; }

  .site-header__inner { padding-inline: var(--gutter); max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; }
  .brand img { width: 48px; }
  .site-nav__links { display: flex; }
  .menu { display: none; }
  .cart-link { border: 1px solid var(--border); }

  .section { padding-block: 72px; }
  .section > .container { gap: 32px; }
  .section-head--center { align-items: center; text-align: center; }

  .steps { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; }
  .step { width: auto; }
  .step__media { max-height: 560px; }
  .step__title { font-size: 17px; }
  .dots { display: none; }

  .gallery { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
  .gallery--few img:first-child { grid-column: auto; aspect-ratio: 3 / 4; }

  .trust__list { flex-direction: row; justify-content: center; gap: 40px; }

  .site-footer__inner { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
  .site-footer__legal { flex-basis: 100%; }

  .game-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 32px 24px; }
  .game-card__name { font-size: 15px; }
  .game-card__text { font-size: 14px; }
  .price--s .price__current { font-size: 16px; }
}

@media (min-width: 1024px) {
  .mask { --mask-h: 490px; --mask-gap: 12px; --mask-offset: 72px; }
  .mask__window--wide { border-radius: 200px 200px 24px 24px; }
  .mask__window--narrow { border-radius: 200px; }
  .mask__badge { width: 88px; height: 88px; font-size: 18px; right: 12px; bottom: 12px; }

  .game-hero { padding-block: 40px 64px; }
  .game-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: center; }
  .game-hero__text { display: flex; flex-direction: column; gap: 20px; }
  .game-hero__lead { order: 0; }
  .game-hero__media { grid-column: 2; grid-row: 1 / span 2; }
  .game-hero__steps { grid-column: 1; }
  .game-hero__buy { display: flex; flex-direction: column; gap: 16px; }
  .game-hero__buy .price { align-items: center; }
  .game-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }

  .cta { padding-block: 72px; }
  .cta__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
  .cta__image { height: 440px; }
  .cta__body .btn { align-self: flex-start; }

  .box { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .box__image { max-height: 640px; }

  .home-hero { padding-block: 48px 72px; }
  .home-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: center; }
  .home-hero__text { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
  .home-hero__title .display { font-size: clamp(40px, 4.4vw, 64px); }
  .highlight { font-size: clamp(56px, 5.6vw, 84px); }
  .home-hero .mask { --mask-h: 480px; }

  .guide { padding-block: 72px; }
  .guide__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 64px; align-items: center; }
  .guide__intro { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
  .guide__title .accent { font-size: clamp(48px, 4.4vw, 64px); }
  .guide__cards { grid-column: 2; grid-row: 1 / span 2; }
  .guide__cta { grid-column: 1; width: auto; justify-self: start; }
  .home-hero__cta { width: auto; }
  .guide__card { padding: 20px 24px; font-size: 17px; }
  .guide__num { font-size: 32px; min-width: 56px; }

  .buy-bar__product { display: flex; align-items: center; gap: 12px; min-width: 0; }
  .buy-bar__thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
  .buy-bar__name { font-family: var(--font-display); font-weight: 500; font-size: 15px; text-transform: uppercase; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .buy-bar__end { flex: none; gap: 24px; }

  .game-hero__delivery { display: none; }

  .checkout-header__steps { display: block; }
  .checkout-header__inner { gap: 32px; }
  .checkout-header__link { margin-left: auto; }
  .checkout-steps-mobile { display: none; }
  .checkout-main { padding-block: 40px 72px; }
  .checkout-footer__inner { flex-direction: row; justify-content: space-between; align-items: center; }
  .checkout__title { font-size: 34px; }
  .checkout__layout { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; }
  .summary-card { position: sticky; top: 24px; }
  .fieldset__grid { grid-template-columns: 1fr 1fr; }
  .zone-cards { grid-template-columns: 1fr 1fr; }
  .confirmation__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
  .pay-card__rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 16px; }
  .copy-row { flex-direction: column; align-items: flex-start; padding: 14px; border: 0; border-radius: var(--radius-card); background: var(--soft); }
  .pay-card__foot { flex-direction: row; align-items: center; justify-content: space-between; }
  .delivery-card { flex-direction: row; justify-content: space-between; align-items: flex-start; }
  .delivery-card__fee { max-width: 260px; }

  .zones-dialog { max-width: 560px; margin: auto; border-radius: 16px; }
  .zones-dialog__handle { display: none; }
  .zones-dialog__panel { padding: 24px 28px 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .quick-add, .game-card__media img, .buy-bar, .dots span { transition: none; }
  .btn:active, .game-card__link:hover img { transform: none; }
  .toast { animation: none; }
  .zones-dialog[open] { animation: none; }
  .toast.is-leaving { transform: none; }
  .spinner { animation-duration: 2s; }
}