/* ── Montserrat (self-hosted, latin subset) ── */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: block; src: url('../assets/fonts/montserrat-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: block; src: url('../assets/fonts/montserrat-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 700; font-display: block; src: url('../assets/fonts/montserrat-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 800; font-display: block; src: url('../assets/fonts/montserrat-latin-800-normal.woff2') format('woff2'); }

/* ── Cairo for Arabic (only downloaded when Arabic text is on screen) ── */
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 500; font-display: block; src: url('../assets/fonts/cairo-arabic-500-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 600; font-display: block; src: url('../assets/fonts/cairo-arabic-600-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 700; font-display: block; src: url('../assets/fonts/cairo-arabic-700-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }
@font-face { font-family: 'Cairo'; font-style: normal; font-weight: 800; font-display: block; src: url('../assets/fonts/cairo-arabic-800-normal.woff2') format('woff2'); unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC; }

:root {
  /* Colours sampled from the supplied screens (client-confirmed). */
  --c-blue: #29ABE2;        /* buttons, timer, emblem fill, big numbers */
  --c-bg: #EBF8FD;          /* page background */
  --c-pill: #CFE5FB;        /* word pills */
  --c-teal: #187AA3;        /* word text, helper line */
  --c-ink: #000000;         /* headings, body copy */
  --c-white: #FFFFFF;
  /* Feedback only (not in the artwork): a wrong word caught. */
  --c-alert: #D64550;
  --c-alert-soft: #FCE4E6;

  --font: 'Montserrat', 'Cairo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* 1 design px of the 1080-wide artboard. Set precisely by js/core/viewport.js. */
  --u: min(calc(100vw / 1080), calc(100vh / 1780));
  --app-h: 100vh;
  --stage-w: 100vw;
  --gutter: calc(var(--u) * 60);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);

  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-back: cubic-bezier(.3, 1.45, .5, 1);
}

@supports (height: 100dvh) {
  :root { --app-h: 100dvh; }
}