/*
 * mobile.ripperwing.com (Ripperwing Mobile) - all styles.
 * Palette comes from the logo (assets/logo-dog.jpg, three-headed dog). The page background is the logo's own
 * background colour, sampled from the image: #28C5FC. Cartoon look: thick ink outlines + hard offset shadows.
 * Contrast (WCAG 2.x, measured in the browser): ink on sky 9.8:1, ink on cream 18.6:1, cream on purple 9.2:1,
 * purple link on cream 9.2:1, error on paper 6.6:1, success on sky-tint 6.0:1.
 * White or cream text straight on the sky background fails (2:1) - never do that.
 * Blocks: TOKENS, BASE, TOP BAR, FOOTER, HOME (hero, sections, game card, FAQ), 404 CARD, DOC SHEET, BUTTONS,
 *         DELETE PAGE, FORM, NOTICE, LEGAL, PLACEHOLDER, MOBILE.
 */

/* TOKENS */
:root {
  --sky: #28C5FC;          /* logo background, sampled */
  --sky-tint: #E1F6FF;     /* light sky for panels on cream */
  --purple: #6303AF;       /* dog body */
  --purple-dark: #4A0285;  /* hover */
  --orange: #FA9539;       /* ears, collar */
  --cream: #FBFBD7;        /* muzzle */
  --paper: #FFFEF3;        /* inputs, boxes on cream */
  --ink: #0B0A14;          /* outlines, text */
  --ink-soft: #3A3550;     /* secondary text on light backgrounds */
  --error: #B00020;
  --error-bg: #FFE3E6;
  --error-ink: #8A0016;
  --success: #0B6B2E;

  /* Figtree (Google Fonts) covers Latin. Other scripts fall back per character to system / Noto fonts (Devanagari,
     Bengali, Thai, Arabic/Urdu/Persian, CJK); nothing extra is downloaded. Per-language order: I18N block. */
  --font: "Figtree", Arial, "Noto Sans", "Noto Sans Devanagari", "Nirmala UI", "Noto Sans Bengali", "Vrinda",
    "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro",
    "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic",
    "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --line: 3px solid var(--ink);
  --line-thin: 2px solid var(--ink);
  --shadow: 5px 5px 0 var(--ink);
  --shadow-sm: 3px 3px 0 var(--ink);
  --radius: 18px;
  --radius-sm: 12px;
  --gutter: 24px;
  --content: 960px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* BASE */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--sky); scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 500;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 6px; }
.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 10;
  padding: 10px 14px; background: var(--cream); border: var(--line-thin); border-radius: var(--radius-sm);
  font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

/* TOP BAR: removed 2026-09-24 (user). Inner pages start with a single "← Back" link (BACK LINK block). */

/* FOOTER (on the sky background) */
.foot { margin-top: auto; padding: 32px var(--gutter) 40px; }
.foot__inner { max-width: var(--content); margin: 0 auto; border-top: var(--line); padding-top: 22px; }
.foot__legal { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
.foot__legal strong { font-weight: 800; }

/* HOME */
.hero {
  max-width: var(--content);
  margin: 0 auto;
  padding: 36px var(--gutter) 24px;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 36px;
}
.hero__logo { width: 220px; height: 220px; display: block; border-radius: 32px; }
.hero__title { margin: 0 0 10px; font-size: 52px; line-height: 1.02; font-weight: 800; letter-spacing: -0.04em; }
.hero__lead { margin: 0 0 22px; font-size: 20px; line-height: 1.45; font-weight: 600; max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__actions .btn { width: auto; min-width: 170px; }

.section { max-width: var(--content); width: 100%; margin: 0 auto; padding: 28px var(--gutter); }
.section__title { margin: 0 0 16px; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.section__lead { margin: -4px 0 18px; font-size: 18px; font-weight: 600; }

.game-card {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 20px 24px;
  align-items: start;
  padding: 24px;
  background: var(--cream);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.game-card__icon {
  width: 112px; height: 112px; border: var(--line); border-radius: 24px; background: var(--purple);
  display: grid; place-items: center; color: var(--cream); font-size: 30px; font-weight: 800; letter-spacing: -0.03em;
  overflow: hidden;
}
.game-card__icon img { width: 100%; height: 100%; object-fit: cover; display: block; }
.game-card__title { margin: 0 0 6px; font-size: 26px; line-height: 1.15; font-weight: 800; }
.game-card__pitch { margin: 0 0 8px; font-size: 17px; line-height: 1.55; color: var(--ink); }
.game-card__platforms { margin: 0 0 16px; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.btn--inline { width: auto; }
.stores { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.store-badge {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  border: var(--line-thin); border-radius: var(--radius-sm); background: var(--paper); font-weight: 800; font-size: 15px;
}
.store-badge__state { padding: 2px 8px; border-radius: 999px; background: var(--orange); border: 2px solid var(--ink); font-size: 13px; }
.store-badge--link { background: var(--ink); color: var(--cream); text-decoration: none; box-shadow: var(--shadow-sm); }
.store-badge--link:hover { background: var(--purple-dark); }
.game-card__icon--empty { background: var(--paper); color: var(--ink-soft); border-style: dashed; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.faq { display: flex; flex-direction: column; gap: 12px; }
.faq__item { background: var(--cream); border: var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.faq__q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  font-size: 18px;
  font-weight: 800;
  border-radius: var(--radius-sm);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+"; flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border: var(--line-thin); border-radius: 50%; background: var(--paper); font-size: 20px; line-height: 1;
}
.faq__item[open] > .faq__q::after { content: "\2212"; background: var(--orange); }
.faq__q:focus-visible { outline-offset: -3px; }
.faq__a { padding: 0 18px 18px; font-size: 17px; line-height: 1.6; }
.faq__a p { margin: 0 0 10px; }
.faq__a p:last-child { margin-bottom: 0; }
.faq__a a { color: var(--purple); font-weight: 700; }

/* 404 CARD */
.home { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 40px var(--gutter) 24px; }
.home__logo-link { display: block; border-radius: 28px; }
.home__logo { width: 200px; height: 200px; display: block; border-radius: 28px; }
.card {
  width: 100%;
  max-width: 440px;
  padding: 28px 26px;
  background: var(--cream);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
}
.card__title { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -0.03em; }
.card__lead { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink-soft); }

/* DOC SHEET (delete, privacy, terms): a cream sheet on the sky */
.doc {
  width: calc(100% - 2 * var(--gutter));
  max-width: 860px;
  margin: 12px auto 16px;
  padding: 44px 48px 52px;
  background: var(--cream);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.doc__title { margin: 0 0 14px; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
.doc__lead { margin: 0 0 12px; font-size: 19px; line-height: 1.55; color: var(--ink); }
.doc h2 { margin: 40px 0 12px; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.doc p, .doc li { font-size: 17px; line-height: 1.65; color: var(--ink); }
.doc strong { font-weight: 800; }
.doc a { color: var(--purple); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.doc a:hover { color: var(--purple-dark); }

/* BUTTONS */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 52px;
  padding: 12px 18px;
  border: var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font: inherit;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background-color 0.15s var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn:disabled { opacity: 0.6; cursor: default; }
.btn--primary, a.btn--primary, .doc a.btn--primary { background: var(--purple); color: var(--cream); }
.btn--primary:hover:not(:disabled) { background: var(--purple-dark); }
.btn--secondary, a.btn--secondary { background: var(--paper); color: var(--ink); }
.btn--secondary:hover:not(:disabled) { background: #FFF3C9; }
/* Store not live yet: grey, not clickable */
.btn--soon, .btn--soon:hover, .btn--soon:active { background: #D9D9D9; color: #45434F; box-shadow: none; transform: none; cursor: not-allowed; }
.game-card__stores { display: flex; flex-wrap: wrap; gap: 10px; }

/* DELETE PAGE */
.steps { margin: 0; padding-inline-start: 24px; }
.steps li + li { margin-top: 6px; }
.steps li::marker { font-weight: 800; color: var(--purple); }
.data-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.data-box { padding: 20px 22px; border: var(--line-thin); border-radius: var(--radius-sm); background: var(--paper); }
.data-box h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; }
.data-box ul { margin: 0; padding-inline-start: 20px; }
.doc .data-box li { font-size: 16px; }
.data-box li + li { margin-top: 6px; }
.panel {
  margin-top: 16px;
  padding: 28px;
  border: var(--line);
  border-radius: var(--radius);
  background: var(--sky-tint);
  box-shadow: var(--shadow-sm);
}

/* FORM (contact panel on / and the /delete panel) */
.form { display: flex; flex-direction: column; gap: 18px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.field__label { font-size: 16px; font-weight: 800; color: var(--ink); }
.field__opt { font-weight: 500; color: var(--ink-soft); }
.field__hint, .doc .field__hint { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.field__input {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  border: var(--line-thin);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 16px; /* 16px stops iOS from zooming into the field */
}
textarea.field__input { min-height: 140px; resize: vertical; line-height: 1.5; }
select.field__input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}
.field__input:focus { outline: 3px solid var(--purple); outline-offset: 2px; }
.field__input:disabled { opacity: 0.6; }
.field__error, .doc .field__error { margin: 0; font-size: 15px; font-weight: 700; color: var(--error); }
.field.is-invalid .field__input { border-color: var(--error); box-shadow: 0 0 0 2px var(--error); }

.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; color: var(--ink); cursor: pointer; }
.check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--purple); }
.field.is-invalid .check input { outline: 2px solid var(--error); outline-offset: 2px; }

/* hidden spam trap (bots fill it, people never see it) */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
[dir="rtl"] .hp { left: auto; right: -10000px; }   /* off-screen on the side that does not scroll */

/* NOTICE */
.notice { margin: 0; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 16px; line-height: 1.5; }
.notice--error, .doc .notice--error { color: var(--error-ink); background: var(--error-bg); border: 2px solid var(--error-ink); }
.notice--error a, .doc .notice--error a { color: var(--error-ink); font-weight: 800; }
.notice--info, .doc .notice--info { color: var(--ink); background: var(--paper); border: 2px solid var(--ink); }
.notice--info a, .doc .notice--info a { color: var(--purple); font-weight: 800; }
.success__title { margin: 0 0 8px; font-size: 26px; font-weight: 800; color: var(--success); }
.success__title:focus { outline: none; }

/* LEGAL (privacy, terms) */
.legal__header { margin-bottom: 8px; }
.legal__title { margin: 0 0 8px; font-size: 40px; line-height: 1.1; font-weight: 800; letter-spacing: -0.035em; }
.doc .legal__updated { margin: 0; font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.legal__section { scroll-margin-top: 16px; }
.legal__heading { margin: 40px 0 12px; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.legal__subheading { margin: 24px 0 8px; font-size: 19px; line-height: 1.3; font-weight: 800; }
.legal__text { margin: 0 0 12px; }
.legal__list { margin: 0 0 12px; padding-inline-start: 22px; }
.legal__list li + li { margin-top: 6px; }
.doc .legal__link { overflow-wrap: anywhere; }

/* PLACEHOLDER: text that still needs a confirmed answer before going live (search the HTML for class="tbd") */
.tbd { color: #5A3A00; background: #FFE9B8; outline: 2px dashed #8A5A00; padding: 0 5px; border-radius: 5px; font-weight: 700; }

/* STEP FLOW: loader, breadcrumb, language picker, game picker, help options (js/step-early.js, js/flow.js, js/lang.js) */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 24px;
  background: var(--sky);
  text-align: center;
}
html.is-stepping .loader { display: flex; }
html.is-stepping body { overflow: hidden; }
/* hide the page (also for keyboard and screen readers) while the loader is up; the live region stays */
html.is-stepping body > :not(.loader):not(#step-status) { visibility: hidden; }
.loader__stage { position: relative; width: 180px; height: 206px; }
.loader__dog { display: block; width: 180px; height: 180px; transform-origin: 50% 100%; animation: dog-hop 0.45s cubic-bezier(0.3, 0, 0.3, 1) infinite alternate; }
.loader__shadow {
  position: absolute; left: 50%; bottom: 0; width: 120px; height: 14px; margin-left: -60px;
  border-radius: 50%; background: rgba(11, 10, 20, 0.28); animation: dog-shadow 0.45s cubic-bezier(0.3, 0, 0.3, 1) infinite alternate;
}
@keyframes dog-hop { from { transform: translateY(0) rotate(-5deg); } to { transform: translateY(-18px) rotate(5deg); } }
@keyframes dog-shadow { from { transform: scaleX(1); opacity: 0.35; } to { transform: scaleX(0.65); opacity: 0.15; } }
.loader__text { margin: 0; font-size: 22px; font-weight: 800; color: var(--ink); }
.loader__bar {
  width: min(280px, 72vw); height: 16px; overflow: hidden;
  border: var(--line-thin); border-radius: 999px; background: var(--cream);
}
/* fills over the whole 5 s step change; --step-elapsed (set by the scripts) skips the part already spent */
.loader__bar span {
  display: block; width: 0; height: 100%; background: var(--purple);
  animation: step-bar 5000ms linear forwards; animation-delay: calc(-1 * var(--step-elapsed, 0ms));
}
@keyframes step-bar { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .loader__dog, .loader__shadow { animation: none; }
  .loader__bar { display: none; }      /* static loader; the 5 s wait stays */
}

.section--narrow { max-width: calc(820px + 2 * var(--gutter)); }
.eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink); }
.next-step { margin: 26px 0 0; }

/* BACK LINK: the only control at the top of inner pages (no bar, no breadcrumb). Ink on sky, 44px tap target. */
.back-wrap { width: 100%; max-width: calc(820px + 2 * var(--gutter)); margin: 0 auto; padding: 14px var(--gutter) 0; }
.back {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 8px 10px; margin-inline-start: -10px;
  border-radius: var(--radius-sm); color: var(--ink); font-size: 17px; font-weight: 800; text-decoration: none;
}
.back:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.back:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.hero__logo-link { display: block; border-radius: 32px; }

.lang__title { margin: 0 0 12px; font-size: 24px; font-weight: 800; color: var(--ink); }
.lang__list {
  position: relative;
  max-height: 318px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 10px;
  list-style: none;
  background: var(--cream);
  border: var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.lang__item {
  display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 8px 12px;
  background: var(--paper); border: 2px solid transparent; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none;
}
.lang__item:hover { border-color: var(--ink); }
.lang__item:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.lang__item[aria-current="true"] { background: var(--purple); color: var(--cream); border-color: var(--ink); }
.lang__item[aria-current="true"]::after { content: "\2713"; margin-inline-start: auto; font-weight: 800; }   /* not colour alone */
.lang__flag {
  flex: none; width: 36px; height: 27px; display: block; object-fit: cover; overflow: hidden;
  border: 2px solid var(--ink); border-radius: 4px; background: var(--sky-tint);
}
.lang__name { font-size: 17px; font-weight: 700; }

.game-mini-wrap { padding-bottom: 0; }
.game-mini { display: flex; align-items: center; gap: 14px; }
.game-mini__icon { width: 56px; height: 56px; flex: none; display: block; object-fit: cover; border: var(--line); border-radius: 14px; }
.game-mini__title { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }

/* .option.option--problem: beats the mobile .option rule (46px icon column) — problem rows have no icon */
.option.option--problem { grid-template-columns: 1fr auto; min-height: 64px; padding: 12px 18px; }
.option.option--problem .option__label { font-size: 18px; line-height: 1.3; }

.fix { padding: 24px 26px; background: var(--cream); border: var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.fix p { margin: 0; font-size: 17px; line-height: 1.6; }
.fix-steps { margin: 0; padding-inline-start: 24px; font-size: 17px; line-height: 1.6; }
.fix-steps li + li { margin-top: 10px; }
.fix-steps li::marker { font-weight: 800; color: var(--purple); }
.fix a { color: var(--purple); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact-prompt { margin: 22px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); }
.contact-prompt + .next-step { margin-top: 12px; }
/* support is by e-mail only (no contact form): "Email us at <address>" + a mailto "Contact support" button (js/site.js).
   Ink on sky, not purple: purple text on the sky background is below AA. */
.email-line { margin: 22px 0 0; font-size: 17px; font-weight: 700; color: var(--ink); overflow-wrap: anywhere; }
.contact-prompt + .email-line { margin-top: 10px; }
.email-line a { color: var(--ink); font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.email-line + .next-step { margin-top: 14px; }
.section__lead a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }

.picks, .options { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.pick-card, .option {
  display: grid; align-items: center; color: var(--ink); text-decoration: none;
  background: var(--cream); border: var(--line); border-radius: var(--radius);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out);
}
.pick-card { grid-template-columns: 88px 1fr auto; gap: 16px; padding: 16px 18px; box-shadow: var(--shadow); }
.option { grid-template-columns: 54px 1fr auto; gap: 14px; min-height: 80px; padding: 12px 18px; box-shadow: var(--shadow-sm); }
.pick-card:hover, .option:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.pick-card:active, .option:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.pick-card__icon { width: 88px; height: 88px; display: block; object-fit: cover; border: var(--line); border-radius: 20px; }
.pick-card__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pick-card__title { font-size: 22px; line-height: 1.15; font-weight: 800; }
.pick-card__meta { font-size: 15px; font-weight: 700; color: var(--ink-soft); }
.pick-card__arrow, .option__arrow { font-size: 26px; font-weight: 800; }
.option__icon {
  width: 54px; height: 54px; display: grid; place-items: center;
  border: var(--line-thin); border-radius: 14px; background: var(--sky-tint); color: var(--purple);
}
.option__label { font-size: 20px; font-weight: 800; }

.game-head__title { margin: 0 0 8px; font-size: 34px; line-height: 1.1; font-weight: 800; letter-spacing: -0.03em; }
.field__static {
  margin: 0; min-height: 50px; display: flex; align-items: center; padding: 12px 14px;
  border: 2px dashed var(--ink); border-radius: var(--radius-sm); background: var(--sky-tint); font-weight: 800;
}

/* I18N (js/i18n.js sets <html lang dir>). Blocks that stay English carry lang="en" dir="ltr", so these rules skip them. */
html.i18n-pending main, html.i18n-pending .back-wrap, html.i18n-pending .foot, html.i18n-pending .loader__text { visibility: hidden; }
[dir="rtl"] .back__arrow { display: inline-block; transform: scaleX(-1); }   /* "←" does not mirror by itself ("›" does) */
[dir="rtl"] select.field__input { padding-right: 14px; padding-left: 42px; background-position: 16px 50%, 22px 50%; }
[dir="rtl"] input[type="email"], [dir="rtl"] #player-id { direction: ltr; text-align: right; }
:lang(ar), :lang(fa) { --font: "Figtree", "Noto Sans Arabic", "Noto Naskh Arabic", "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif; }
:lang(ur) { --font: "Figtree", "Noto Nastaliq Urdu", "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif; }
:lang(zh-TW) { --font: "Figtree", Arial, "Noto Sans CJK TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; }
:lang(zh-CN) { --font: "Figtree", Arial, "Noto Sans CJK SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; }
:lang(ja) { --font: "Figtree", Arial, "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", "Meiryo", system-ui, sans-serif; }
:lang(ko) { --font: "Figtree", Arial, "Noto Sans CJK KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif; }
:lang(vi) { --font: Arial, "Segoe UI", system-ui, sans-serif; }   /* Figtree has no Vietnamese letters: avoid mixed fonts in a word */
/* no negative tracking for joined or non-Latin scripts; html :lang() (0,1,1) beats .doc h2, English blocks keep theirs */
html :lang(ar), html :lang(fa), html :lang(ur), html :lang(zh-CN), html :lang(zh-TW), html :lang(ja), html :lang(ko), html :lang(hi),
html :lang(bn), html :lang(th) { letter-spacing: normal; }
:lang(hi) .hero__title, :lang(bn) .hero__title, :lang(th) .hero__title, :lang(ar) .hero__title, :lang(fa) .hero__title,
:lang(ur) .hero__title { line-height: 1.3; }
:lang(ur) body { line-height: 1.9; }
/* the variable is read where it is used: re-apply it on elements that set their own lang (language names, English blocks) */
[lang] { font-family: var(--font); }
[lang="en"] { --font: "Figtree", Arial, system-ui, sans-serif; }

/* MOBILE */
@media (max-width: 809.98px) {
  .hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .hero__logo { width: 180px; height: 180px; }
  .hero__title { font-size: 42px; }
  .hero__lead { margin-left: auto; margin-right: auto; }
  .hero__actions { justify-content: center; }
  .doc { padding: 32px 28px 40px; }
  .doc__title, .legal__title { font-size: 32px; }
  .data-grid, .form__row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  :root { --gutter: 16px; }
  .hero__logo { width: 150px; height: 150px; }
  .hero__title { font-size: 36px; }
  .hero__lead { font-size: 18px; }
  .hero__actions .btn { width: 100%; }
  .section__title { font-size: 28px; }
  .game-card { grid-template-columns: 1fr; padding: 20px 18px; }
  .game-card__icon { width: 88px; height: 88px; font-size: 24px; }
  .home { justify-content: flex-start; padding-top: 28px; }
  .home__logo { width: 160px; height: 160px; }
  .card { padding: 22px 18px; }
  .doc { padding: 24px 18px 30px; box-shadow: var(--shadow-sm); }
  .doc__title, .legal__title { font-size: 28px; }
  .doc p, .doc li { font-size: 16px; }
  .panel { padding: 20px 16px; }
  .pick-card { grid-template-columns: 64px 1fr auto; gap: 12px; padding: 14px; }
  .pick-card__icon { width: 64px; height: 64px; border-radius: 16px; }
  .pick-card__title { font-size: 19px; }
  .option { grid-template-columns: 46px 1fr auto; min-height: 70px; padding: 10px 14px; }
  .option__icon { width: 46px; height: 46px; }
  .option__label { font-size: 18px; }
  .game-head__title { font-size: 28px; }
  .lang__title { font-size: 21px; }
  .game-mini__title { font-size: 22px; }
  .fix { padding: 18px 16px; }
  .fix-steps, .fix p { font-size: 16px; }
  .loader__stage { width: 150px; height: 172px; }
  .loader__dog { width: 150px; height: 150px; }
}