/* ============================================================
   The Medeem Way — Finding the Balance
   ============================================================ */

/* Display (mirror) mode — passive view of the iPad's state. Block all
   pointer interaction; the screen is purely decorative. */
html.is-display,
html.is-display body,
html.is-display .stage {
  pointer-events: none !important;
  cursor: default !important;
  -webkit-user-select: none;
  user-select: none;
}
html.is-display .lang-btn,
html.is-display .cta {
  pointer-events: none !important;
}

@font-face {
  font-family: "Fedra Sans";
  src: url("fonts/FedraSans-Book.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TestSohne";
  src: url("fonts/TestSohne-Buch.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TestSohne";
  src: url("fonts/TestSohne-Kraftig.otf") format("opentype");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "TestSohne";
  src: url("fonts/TestSohne-Bold.otf") format("opentype");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaArabic";
  src: url("fonts/HelveticaNeueLTArabic-Light.ttf") format("truetype");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "HelveticaArabic";
  src: url("fonts/HelveticaNeueLTArabic-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* ----------------------------- tokens */
:root {
  --c-tan: #c5a47b;
  --c-tan-deep: #b08e62;
  --c-tan-soft: #d4b994;
  --c-cream: #ece1ce;
  --c-cream-2: #e2d3b9;
  --c-ink: #1a1a1a;
  --c-ink-soft: #2a2622;

  --c-rust: #b67669;
  /* left-column cards */
  --c-rust-2: #a86a5e;
  --c-sage: #a3ad97;
  /* right-column cards */
  --c-sage-2: #919c84;
  --c-mauve: #a48f97;
  /* timer pill */

  --shadow-card: 0 10px 22px -14px rgba(60, 30, 10, .35);
  --shadow-card-hover: 0 18px 32px -14px rgba(60, 30, 10, .55);
  --shadow-soft: 0 18px 40px -22px rgba(50, 30, 10, .35);
  --shadow-pop: 0 28px 60px -28px rgba(50, 30, 10, .55);

  --serif-en: "Fedra Sans", "TestSohne", Georgia, serif;
  --sans-en: "TestSohne", "Helvetica Neue", Arial, sans-serif;
  --sans-ar: "HelveticaArabic", "Tajawal", "Helvetica Neue", sans-serif;

  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #2a241e;
  /* shows behind the letterbox */
  color: var(--c-ink);
  font-family: var(--sans-en);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometryPrecision;
  overflow: hidden;
}

body {
  position: relative;
}

img {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ----------------------------- stage (fixed 1920x1080, scaled to fit) */
.stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1920px;
  height: 1080px;
  background: var(--c-cream);
  transform-origin: center center;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 1));
  overflow: hidden;
}

/* ----------------------------- brand bar */
.brand {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 60px;
  pointer-events: none;
}

.brand>* {
  pointer-events: auto;
}

.brand__lang {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--sans-en);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--c-ink);
}

.lang-btn {
  padding: 4px 8px;
  border-radius: 999px;
  opacity: .55;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.lang-btn[aria-pressed="true"] {
  opacity: 1;
  transform: scale(1.05);
}

.lang-sep {
  opacity: .5;
}

.brand__mark {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--c-ink);
}

.brand__medeem {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
  font-family: var(--sans-ar);
  font-weight: 700;
  font-size: 36px;
}

.brand__medeem small {
  margin-top: 4px;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .04em;
}

.brand__divider {
  width: 1px;
  height: 40px;
  background: rgba(0, 0, 0, .35);
}

.brand__dcd {
  display: flex;
  flex-direction: column;
  gap: 3px;
  line-height: 1.05;
}

.brand__dcd-ar {
  font-family: var(--sans-ar);
  font-size: 18px;
  font-weight: 700;
}

.brand__dcd-en {
  font-family: var(--sans-en);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: rgba(0, 0, 0, .75);
}

/* ----------------------------- screen transitions */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5% 60px 40px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}

.screen.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.screen.is-leaving {
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* ===================================================================
   LANDING
   =================================================================== */
.screen--landing {
  background: var(--c-tan);
}

.landing__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.landing__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
}

.landing__inner {
  position: relative;
  z-index: 2;
  width: 820px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.landing__lang {
  position: absolute;
  top: 32px;
  left: 60px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 10px 22px;
  border-radius: 999px;
  font-family: var(--sans-en);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--c-ink);
}

.landing__lang .lang-btn {
  padding: 4px 8px;
  border-radius: 999px;
  opacity: .55;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}

.landing__lang .lang-btn[aria-pressed="true"] {
  opacity: 1;
  transform: scale(1.05);
}

.landing__lang .lang-sep {
  opacity: .5;
}

.landing__title {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.18;
  letter-spacing: -0.005em;
  color: var(--c-ink);
  margin: 0;
  max-width: 28ch;
}

.landing__title .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
  font-size: 38px;
}

.landing__lede {
  font-family: var(--sans-en);
  font-size: 19px;
  line-height: 1.55;
  max-width: 50ch;
  color: var(--c-ink-soft);
  margin: 0;
}

.landing__lede .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 300;
  line-height: 1.85;
}

.landing__question {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.3;
  margin: 4px 0 0;
  color: var(--c-ink);
}

.landing__question .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
}

.landing__question .accent {
  color: var(--c-tan-deep);
}

.cta.cta--landing {
  background: var(--c-mauve);
  color: #fff;
  padding: 18px 56px;
  font-family: var(--serif-en);
  font-size: 22px;
  font-weight: 500;
  border-radius: 999px;
  margin-top: 6px;
  box-shadow: 0 8px 16px -8px rgba(40, 20, 10, .4);
}

.cta.cta--landing:hover {
  background-color: #927a83;
}

.cta--landing .cta__arrow {
  display: none;
}

.cta--landing .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
}

/* ===================================================================
   GAME (drag-and-drop) — fixed 1920x1080 design canvas
   =================================================================== */
.screen--game {
  background: var(--c-cream);
  padding: 3% 60px 36px;
  align-items: stretch;
}

.game {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  display: grid;
  /* 3-col layout. The side columns span both rows so they reach the top of
     the page; the middle column holds the head (timer + instruction) above
     the scale area. */
  grid-template-columns: 400px 1fr 400px;
  grid-template-rows: 162px 1fr;
  grid-template-areas:
    "choices head   values"
    "choices scale  values";
  column-gap: 60px;
  row-gap: 0;
  margin: 0 auto;
}

/* ----- head: timer + instruction (pinned to the top of its row) ----- */
.game__head {
  grid-area: head;
  align-self: end;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 14px;
  padding-bottom: 16px;
}

.timer {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .14em;
  color: var(--c-ink);
}

.timer__label .lang--ar {
  font-family: var(--sans-ar);
  letter-spacing: 0;
  font-weight: 700;
}

.timer__pill {
  background: var(--c-mauve);
  color: #fff;
  padding: 10px 28px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-family: var(--sans-en);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .04em;
  box-shadow: 0 8px 18px -10px rgba(40, 20, 10, .4);
  transition: background .3s var(--ease), transform .3s var(--ease);
}

.timer.is-warning .timer__pill {
  background: #b86a4a;
  animation: pulse 1s ease-in-out infinite;
}

.timer.is-done .timer__pill {
  background: #1a1a1a;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.06);
  }
}

.game__instruction {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.15;
  margin: 0;
  color: var(--c-ink);
  max-width: 22ch;
}

.game__instruction strong {
  font-weight: 700;
}

.game__instruction .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 300;
}

.game__instruction .lang--ar strong {
  font-weight: 700;
}

/* ----- columns ----- */
.column {
  position: relative;
  padding: 92px 28px 28px;
  border-radius: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.column--choices {
  grid-area: choices;
  background: #d6bcab;
}

.column--values {
  grid-area: values;
  background: #cec9ba;
}

.column__icon {
  position: absolute;
  top: -52px;
  width: 130px;
  height: 130px;
  z-index: 2;
  pointer-events: none;
}

.column--choices .column__icon--brain {
  left: 18px;
}

.column--values .column__icon--heart {
  right: 18px;
}

/* Hand-drawn sparkle decoration in the top-left of the values column. */
.column__sparkle {
  position: absolute;
  top: -54px;
  left: -36px;
  width: 90px;
  height: auto;
  z-index: 1;
  pointer-events: none;
}

.column__title,
.column .cards {
  position: relative;
  z-index: 1;
}

.column__title {
  font-family: var(--serif-en);
  font-weight: 700;
  font-size: 34px;
  text-align: start;
  margin: 0 0 8px;
  padding-inline: 6px;
  color: var(--c-ink);
}

.column__title .lang--ar {
  font-family: var(--sans-ar);
}

.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  min-height: 0;
  padding: 2px;
  flex: 1;
}

.cards::-webkit-scrollbar {
  width: 6px;
}

.cards::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .15);
  border-radius: 999px;
}

/* ----- card ----- */
.card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-align: start;
  padding: 18px 24px;
  border-radius: 14px;
  color: #fff;
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  box-shadow: var(--shadow-card);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
  min-height: 76px;
  flex: 0 0 auto;
}

.card .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
}

.card[data-bank="choices"] {
  background: var(--c-rust) url("assets/sides/Asset 3.webp") center/100% 100% no-repeat;
}

.card[data-bank="choices"]:hover {
  background-color: var(--c-rust-2);
}

.card[data-bank="values"] {
  background: var(--c-sage) url("assets/sides/Asset 5.webp") center/100% 100% no-repeat;
}

.card[data-bank="values"]:hover {
  background-color: var(--c-sage-2);
}

/* Weight is kept on the data attribute for the scale physics,
   but visually hidden on the card to match the design. */
.card__weight {
  display: none;
}

.card__text {
  display: block;
  padding: 0;
  width: 100%;
  text-align: start;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover);
}

.card:active,
.card.is-dragging-source {
  cursor: grabbing;
}

.card.is-dragging-source {
  opacity: .25;
  transform: scale(.98);
}

/* placeholder showing where card was while dragging */
.card.is-placeholder {
  background: transparent !important;
  color: transparent;
  box-shadow: none;
  border: 2px dashed rgba(0, 0, 0, .15);
  pointer-events: none;
}

/* ghost element following pointer */
.card-ghost {
  position: fixed;
  z-index: 999;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-3deg) scale(1.04);
  box-shadow: 0 28px 50px -18px rgba(40, 20, 10, .45);
  transition: transform .15s var(--ease);
}

.card-ghost.is-over-drop {
  transform: translate(-50%, -50%) rotate(-1deg) scale(1.08);
}

/* ===================================================================
   Scale area (center) — layered parts: post (still), beam (rotates),
   pans (translate vertically with the beam ends).
   =================================================================== */
.scale-area {
  grid-area: scale;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
}

/* The scale lives inside a fixed aspect box so its pieces line up. */
.scale {
  position: relative;
  width: 720px;
  height: 617px;
  max-width: 100%;
  aspect-ratio: 7 / 6;
  margin-top: 0;
  --tilt: 0deg;
  --pan-y: 0%;
  /* + → right pan down, left pan up */

  /* Tunable layout — values empirically aligned to the asset pixel sizes
     (post 1248x2019, beam 2177x362, pan 998x1444). */
  --post-w: 30%;
  --beam-cy: 25%;
  /* y-center of post's top knob = beam pivot */
  --beam-w: 95%;
  --pan-w: 30%;
  --pan-aspect: 0.691;
  --pan-end-x: 6.2%;
  /* horizontal offset of beam endpoint knob */
}

/* stationary post + base */
.scale__post {
  position: absolute;
  bottom: 0;
  left: 52%;
  transform: translateX(-50%);
  width: var(--post-w);
  height: 80%;
  z-index: 1;
  filter: drop-shadow(0 12px 14px rgba(80, 50, 20, .12));
  pointer-events: none;
}

/* beam — only this rotates */
.scale__beam {
  position: absolute;
  top: 154px;
  left: 360px;
  width: 684px;
  height: 114px;
  object-fit: contain;
  transform: translate(-50%, -50%) rotate(var(--tilt));
  transform-origin: 50% 50%;
  transition: transform .35s var(--ease);
  z-index: 3;
  pointer-events: none;
}

/* sparkle (small star) above the central knob */
.scale__sparkle {
  position: absolute;
  top: var(--beam-cy);
  left: 50%;
  width: 42px;
  height: auto;
  transform: translate(-50%, -260%);
  z-index: 4;
  pointer-events: none;
}

.scale__sparkle svg {
  display: block;
  width: 100%;
  height: auto;
}

/* pans — drop zones; translate vertically with beam tilt */
.scale__pan {
  position: absolute;
  top: 154px;
  width: 216px;
  height: 312px;
  display: block;
  z-index: 2;
  transition: transform .35s var(--ease), filter .2s var(--ease);
  cursor: default;
}

.scale__pan--left {
  left: -63px;
  transform: translateY(calc(var(--pan-y) * -1));
}

.scale__pan--right {
  left: 567px;
  transform: translateY(var(--pan-y));
}

.scale__pan-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 216px;
  height: 312px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(80, 50, 20, .15));
  pointer-events: none;
}

.scale__pan.is-droptarget {
  filter: brightness(1.05);
}

.scale__pan.is-droptarget::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 4%;
  height: 38%;
  border-radius: 50% / 70% 70% 30% 30%;
  background: rgba(255, 255, 255, .35);
  outline: 2px dashed rgba(0, 0, 0, .25);
  pointer-events: none;
}

/* Card stack — pan-stack's BOTTOM edge sits exactly on the bowl rim line.
   Cards anchor at that bottom edge and extend UP only. Anything below
   the rim line (i.e. inside the bowl) is clipped out by overflow:hidden,
   so visually it looks like cards are sticking up out of the bowl. */
.pan-stack {
  position: absolute;
  inset-inline: 8%;
  bottom: 27%;
  /* bowl rim is at ~72% from pan top → 28% from pan bottom */
  height: 20%;
  display: block;
  pointer-events: none;
  overflow: hidden;
  /* cuts everything that would dip below the rim */
}

.pan-stack .card-stacked {
  position: absolute;
  bottom: 0;
  /* card bottom edge sits exactly on the bowl rim */
  left: 50%;
  width: 100%;
  padding: 7px 10px;
  border-radius: 7px;
  font-family: var(--serif-en);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.2;
  text-align: start;
  color: #fff;
  box-shadow: 0 -3px 8px -3px rgba(40, 20, 10, .45);
  transform-origin: center bottom;
  --rot: 0deg;
  --off-x: 0px;
  --off-y: 0px;
  animation: cardLand .3s var(--ease) forwards;
}

.pan-stack .card-stacked__text {
  display: block;
  width: 100%;
}

.pan-stack .card-stacked__weight {
  display: none;
}

.pan-stack .card-stacked .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
}

.pan-stack .card-stacked[data-bank="choices"] {
  background: var(--c-rust);
}

.pan-stack .card-stacked[data-bank="values"] {
  background: var(--c-sage);
}

@keyframes cardLand {
  0% {
    opacity: 0;
    transform: translate(calc(-50% + var(--off-x)), -24px) rotate(calc(var(--rot) - 6deg));
  }

  60% {
    opacity: 1;
    transform: translate(calc(-50% + var(--off-x)), 3px) rotate(calc(var(--rot) + 1deg));
  }

  100% {
    opacity: 1;
    transform: translate(calc(-50% + var(--off-x)), var(--off-y)) rotate(var(--rot));
  }
}

/* ===================================================================
   END
   =================================================================== */
.screen--end {
  background: var(--c-cream);
}

.end__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.end__bg-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
}

.end__inner {
  position: relative;
  z-index: 2;
  width: 1320px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  color: var(--c-ink);
}

/* Mauve banner with title and corner sparkle/star marks (asset 8). */
.end__banner {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 56px 80px;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.end__banner-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  z-index: -1;
  pointer-events: none;
}

.end__headline {
  font-family: var(--serif-en);
  font-weight: 400;
  font-size: 44px;
  line-height: 1.2;
  margin: 0;
  color: #fff;
  max-width: 28ch;
}

.end__headline strong {
  font-weight: 700;
}

.end__headline .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 400;
}

.end__headline .lang--ar strong {
  font-weight: 700;
}

.end__body-wrap {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: center;
  margin-top: -40px;
  padding: 64px 80px 64px;
  background: #d9cebd;
  border-radius: 0 0 12px 12px;
  position: relative;
  z-index: 0;
}

.end__body {
  font-size: 22px;
  line-height: 1.65;
  margin: 0;
  max-width: 70ch;
  color: var(--c-ink-soft);
  text-align: center;
}

.end__body strong {
  font-weight: 700;
  color: var(--c-ink);
}

.end__body .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 300;
  line-height: 1.85;
}

.end__body .lang--ar strong {
  font-weight: 700;
  color: var(--c-ink);
}

.end__summary {
  font-family: var(--serif-en);
  font-weight: 600;
  font-size: 24px;
  padding: 16px 32px;
  background: rgba(0, 0, 0, .06);
  border-radius: 16px;
  letter-spacing: .02em;
}

.end__summary .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
}

/* ===================================================================
   CTA
   =================================================================== */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  padding: 22px 40px;
  background: var(--c-ink);
  color: var(--c-cream);
  border-radius: 999px;
  font-family: var(--serif-en);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: .02em;
  margin-top: 18px;
  transition: transform .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
  box-shadow: var(--shadow-soft);
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  background: var(--c-ink-soft);
  box-shadow: var(--shadow-pop);
  outline: none;
}

.cta--ghost {
  background: transparent;
  color: var(--c-ink);
  border: 1.5px solid var(--c-ink);
  box-shadow: none;
  align-self: center;
  padding: 12px 26px;
  font-size: 16px;
  gap: 10px;
  margin-top: 28px;
}

.cta--ghost:hover {
  background: var(--c-ink);
  color: var(--c-cream);
}

.cta--ghost .cta__arrow {
  width: 22px;
  height: 22px;
  font-size: 14px;
}

.cta__arrow {
  display: inline-flex;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .15);
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transform: translateY(-1px);
  transition: transform .35s var(--ease);
}

.cta:hover .cta__arrow {
  transform: translate(2px, -1px);
}

.cta .lang--ar {
  font-family: var(--sans-ar);
  font-weight: 700;
}

/* ===================================================================
   Language switching
   =================================================================== */
.lang {
  display: inline;
}

.lang--ar {
  display: none;
}

html[data-lang="ar"] .lang--en {
  display: none;
}

html[data-lang="ar"] .lang--ar {
  display: inline;
}

/* For block contexts — show only one lang */
.landing__title .lang,
.game__instruction .lang,
.column__title .lang,
.timer__label .lang,
.end__headline .lang,
.cta .lang,
.landing__lede .lang,
.landing__question .lang,
.end__body .lang,
.end__summary .lang {
  display: none;
}

.landing__title .lang--en,
.game__instruction .lang--en,
.column__title .lang--en,
.timer__label .lang--en,
.end__headline .lang--en,
.cta .lang--en,
.landing__lede .lang--en,
.landing__question .lang--en,
.end__body .lang--en,
.end__summary .lang--en {
  display: inline-block;
}

html[data-lang="ar"] .landing__title .lang--en,
html[data-lang="ar"] .game__instruction .lang--en,
html[data-lang="ar"] .column__title .lang--en,
html[data-lang="ar"] .timer__label .lang--en,
html[data-lang="ar"] .end__headline .lang--en,
html[data-lang="ar"] .cta .lang--en,
html[data-lang="ar"] .landing__lede .lang--en,
html[data-lang="ar"] .landing__question .lang--en,
html[data-lang="ar"] .end__body .lang--en,
html[data-lang="ar"] .end__summary .lang--en {
  display: none;
}

html[data-lang="ar"] .landing__title .lang--ar,
html[data-lang="ar"] .game__instruction .lang--ar,
html[data-lang="ar"] .column__title .lang--ar,
html[data-lang="ar"] .timer__label .lang--ar,
html[data-lang="ar"] .end__headline .lang--ar,
html[data-lang="ar"] .cta .lang--ar,
html[data-lang="ar"] .landing__lede .lang--ar,
html[data-lang="ar"] .landing__question .lang--ar,
html[data-lang="ar"] .end__body .lang--ar,
html[data-lang="ar"] .end__summary .lang--ar {
  display: inline-block;
}

/* card labels: only one lang per card */
.card .lang,
.card-stacked .lang {
  display: none;
}

.card .lang--en,
.card-stacked .lang--en {
  display: inline;
}

html[data-lang="ar"] .card .lang--en,
html[data-lang="ar"] .card-stacked .lang--en {
  display: none;
}

html[data-lang="ar"] .card .lang--ar,
html[data-lang="ar"] .card-stacked .lang--ar {
  display: inline;
}

/* The whole stage is a fixed 1920x1080 design canvas scaled by JS,
   so component-level breakpoints aren't needed — everything scales together. */

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}