:root {
  --karam: #0f4a2c;
  --karam-soft: #1f8a50;
  --ekram: #6a2ec2;
  --ekram-soft: #8f5ae0;
  --ink: #2b2118;
  --cream: #fbf7ef;
  --sand: #e9dcc6;
  --panel: rgba(255, 252, 246, 0.86);
  --font: 'Tajawal', system-ui, sans-serif;
  --font-ur: 'Noto Nastaliq Urdu', 'Tajawal', serif;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  background: #1d1712;
  overflow: hidden;
  font-family: var(--font);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Portrait 9:16 stage, letterboxed on landscape displays */
#stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: 9 / 16;
  max-width: 100vw;
  margin: 0 auto;
  overflow: hidden;
  container-type: size;
}
#stage.lang-ur { font-family: var(--font-ur); }

#bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 22% at 50% 79%, rgba(201, 178, 140, 0.55), transparent 70%),
    radial-gradient(ellipse 90% 60% at 50% 38%, #fffdf8 0%, var(--cream) 45%, var(--sand) 100%);
}
/* Company logo in the background: small repeated pattern + one large faint logo.
   assets/brand/logo.svg = the official logo traced to vector. */
#bg::after {
  content: '';
  position: absolute;
  inset: -10%;
  background: url(../assets/brand/logo.svg) 0 0 / 7cqmin auto space;
  opacity: 0.035;
  transform: rotate(-12deg);
}
#bg::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: 92cqmin;
  height: 92cqmin;
  transform: translate(-50%, -50%);
  background: url(../assets/brand/logo.svg) center / contain no-repeat;
  opacity: 0.07;
}
#gl, #gl canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Header */
#top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 3cqmin 4cqmin 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2cqmin;
  z-index: 5;
}
.brand { font-weight: 800; font-size: 7.5cqmin; letter-spacing: 0.02em; display: flex; gap: 1.6cqmin; align-items: baseline; direction: rtl; }
.brand .k { color: var(--karam); }
.brand .e { color: var(--ekram); }
.brand .amp { color: #a08a6a; font-size: 0.7em; }
#langs { display: flex; gap: 1.6cqmin; flex-wrap: wrap; justify-content: center; }
#langs button {
  font: inherit;
  font-size: 3.2cqmin;
  font-weight: 700;
  padding: 1.3cqmin 3.4cqmin;
  border-radius: 99px;
  border: 0.3cqmin solid rgba(43, 33, 24, 0.15);
  background: rgba(255, 255, 255, 0.75);
  color: var(--ink);
  cursor: pointer;
}
#langs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
#langs button[data-lang='ur'] { font-family: var(--font-ur); font-size: 2.9cqmin; }

#prompt {
  position: absolute;
  top: 25cqmin;
  left: 5cqmin;
  right: 5cqmin;
  text-align: center;
  font-size: 5cqmin;
  font-weight: 700;
  z-index: 4;
  transition: opacity 0.3s;
  min-height: 7cqmin;
}
#prompt.under-bubble { opacity: 0; }

/* Name tags under the characters */
.tag {
  position: absolute;
  transform: translate(-50%, 0);
  font: inherit;
  font-weight: 800;
  font-size: 4.4cqmin;
  padding: 1.4cqmin 5cqmin;
  border-radius: 99px;
  border: none;
  color: #fff;
  cursor: pointer;
  z-index: 4;
  box-shadow: 0 1cqmin 3cqmin rgba(0, 0, 0, 0.18);
  transition: transform 0.25s, box-shadow 0.25s, opacity 0.3s;
}
.tag[data-id='karam'] { background: var(--karam); }
.tag[data-id='ekram'] { background: var(--ekram); }
#stage.lang-ur .tag { font-size: 3.4cqmin; padding: 0.4cqmin 4.5cqmin; }
.tag.on { transform: translate(-50%, 0) scale(1.12); box-shadow: 0 0 0 0.8cqmin rgba(255, 255, 255, 0.9), 0 1.4cqmin 4cqmin rgba(0, 0, 0, 0.25); }
.tag.pulse { animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: translate(-50%, 0) scale(1.1); } }

/* Speech bubble */
#bubble {
  position: absolute;
  z-index: 6;
  left: 6cqmin;
  right: 6cqmin;
  top: 24cqmin;
  max-height: 38cqmin;
  padding: 3cqmin 4.5cqmin;
  background: #fff;
  border-radius: 4cqmin;
  font-size: 4cqmin;
  line-height: 1.45;
  font-weight: 500;
  box-shadow: 0 1.5cqmin 5cqmin rgba(60, 40, 20, 0.18);
  border: 0.6cqmin solid var(--accent, var(--karam));
  text-align: center;
  transition: opacity 0.25s;
}
#bubble .text { max-height: 31cqmin; overflow: hidden; }
#stage.lang-ur #bubble { line-height: 2; font-size: 3.6cqmin; }
#bubble::after {
  content: '';
  position: absolute;
  bottom: -2.6cqmin;
  left: var(--tail, 50%);
  width: 4cqmin;
  height: 4cqmin;
  background: #fff;
  border-right: 0.6cqmin solid var(--accent, var(--karam));
  border-bottom: 0.6cqmin solid var(--accent, var(--karam));
  transform: translateX(-50%) rotate(45deg);
}
#bubble.hidden { opacity: 0; pointer-events: none; }
#bubble .dots span { display: inline-block; width: 1.6cqmin; height: 1.6cqmin; margin: 0 0.5cqmin; border-radius: 50%; background: var(--accent); animation: dot 1s infinite; }
#bubble .dots span:nth-child(2) { animation-delay: 0.15s; }
#bubble .dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 50% { transform: translateY(-1cqmin); opacity: 0.4; } }

/* Bottom controls */
#bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 5cqmin 2.5cqmin;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqmin;
  z-index: 5;
}
#heard { min-height: 5cqmin; font-size: 3.3cqmin; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #6b5a48; text-align: center; max-width: 90cqmin; }
.controls { display: flex; align-items: center; gap: 5cqmin; }
.round {
  width: 11cqmin;
  height: 11cqmin;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.8);
  border: 0.3cqmin solid rgba(43, 33, 24, 0.15);
  color: var(--ink);
  cursor: pointer;
}
.round svg { width: 55%; height: 55%; }
#cam.off { opacity: 0.35; }
#cam.on { color: #1f8a50; }
#mic {
  display: flex;
  align-items: center;
  gap: 2.4cqmin;
  font: inherit;
  font-weight: 800;
  font-size: 4.2cqmin;
  padding: 3cqmin 7cqmin;
  border-radius: 99px;
  border: none;
  color: #fff;
  background: linear-gradient(135deg, var(--karam), var(--ekram));
  box-shadow: 0 1.5cqmin 4cqmin rgba(60, 30, 90, 0.3);
  cursor: pointer;
  touch-action: none;
}
#mic svg { width: 7cqmin; height: 7cqmin; }
#mic .label { white-space: nowrap; }
#stage.lang-ur #mic { font-size: 3.4cqmin; padding: 1.6cqmin 6cqmin; }
#mic.listening { animation: listen 1s infinite; background: linear-gradient(135deg, #d6453d, #ef7a3c); }
@keyframes listen { 50% { box-shadow: 0 0 0 3cqmin rgba(214, 69, 61, 0.15); } }
#typebox { display: flex; gap: 2cqmin; width: 100%; }
#typebox.hidden { display: none; }
#typebox input { flex: 1; font: inherit; font-size: 4cqmin; padding: 2.4cqmin 3cqmin; border-radius: 3cqmin; border: 0.3cqmin solid #cbb99f; background: #fff; }
#typebox button { font: inherit; font-weight: 700; font-size: 4cqmin; padding: 0 4cqmin; border-radius: 3cqmin; border: none; background: var(--ink); color: #fff; }

/* Attract overlay */
#attract {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34cqh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 9cqmin;
  gap: 2cqmin;
  z-index: 7;
  background: linear-gradient(to top, rgba(251, 247, 239, 0.97) 55%, rgba(251, 247, 239, 0));
  cursor: pointer;
  transition: opacity 0.5s;
}
#attract.hidden { opacity: 0; pointer-events: none; }
body.simple #attract { display: none; }

/* Loading screen (until the characters and videos are ready) */
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; justify-items: center; gap: 2.2vmin;
  background: var(--cream); color: var(--ink); font-family: var(--font); transition: opacity 0.5s; }
#loading.done { opacity: 0; pointer-events: none; }
#loading img { width: 16vmin; opacity: 0.3; margin-bottom: 1vmin; animation: breathe-logo 2.4s ease-in-out infinite; }
@keyframes breathe-logo { 50% { opacity: 0.18; transform: scale(0.96); } }
#loading .t { font-size: 4.2vmin; font-weight: 800; direction: rtl; }
/* Choosing by voice (config.selectMode 'voice'): language names as text and a mic */
.vmic, .vstate, #langpick .names { display: none; }
body.select-voice .vmic { display: block; }
body.select-voice .vstate { display: block; }
body.select-voice #langpick .buttons { display: none; }
body.select-voice #langpick .names { display: flex; }
body.select-voice #langpick.fallback .buttons { display: grid; } /* after two tries the buttons come back */
body.select-voice #langpick.fallback .names { display: none; }
#langpick .names { flex-wrap: wrap; justify-content: center; gap: 1.2cqmin 4.5cqmin; padding: 1.4cqmin 4cqmin; border-radius: 4cqmin;
  background: rgba(255, 252, 246, 0.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
#langpick .names span { font-size: 4.6cqmin; font-weight: 800; color: var(--karam); line-height: 1.6; }
#langpick .names span.ur { font-family: var(--font-ur); font-size: 4cqmin; line-height: 1.9; }
.vmic { position: relative; width: 17cqmin; height: 17cqmin; margin: 0 auto; border: none; background: none; padding: 0; cursor: pointer;
  pointer-events: auto; touch-action: none; --lvl: 0; --mc: var(--accent, var(--karam)); }
.vmic .ring { position: absolute; inset: 0; border-radius: 50%; transform: scale(calc(1 + var(--lvl) * 0.45));
  background: radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--mc) 35%, transparent) 60%, transparent 71%); animation: breathe 2.4s ease-in-out infinite; }
.vmic .core { position: absolute; inset: 14%; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--mc) 70%, #fff), var(--mc) 70%);
  box-shadow: 0 1.4cqmin 4cqmin color-mix(in srgb, var(--mc) 45%, transparent); transition: transform 0.15s, background 0.3s; }
.vmic .core svg { width: 46%; height: 46%; }
.vmic.listening { --mc: #d6453d; }
.vmic.listening .ring { animation: none; }
.vmic.listening .core { transform: scale(1.08); }
.vmic.thinking .ring { animation: spin 1.1s linear infinite; transform: none;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--mc) 85%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 68%, transparent 69%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 68%, transparent 69%); }
.vstate { min-height: 4.4cqmin; font-size: 3.2cqmin; font-weight: 700; text-align: center; color: var(--ink); }
.vstate.hint { color: #c0392b; }
#stage.lang-ur .vstate { font-family: var(--font-ur); line-height: 2; }
#pick .vmic { margin-top: 2.4cqmin; }

/* Bar in the logo's green (#b3c79c) and its shades */
#loading .bar { width: 46vmin; height: 1.2vmin; border-radius: 99px; background: rgba(179, 199, 156, 0.28); overflow: hidden; }
#loading .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, #6f8c57, #93ad7a 45%, #b3c79c 80%, #c9d8b6); }
#loading .n { font-size: 2.8vmin; color: #7a6650; font-variant-numeric: tabular-nums; direction: ltr; }
#attract .hand { font-size: 14cqmin; animation: wave 1.8s infinite; transform-origin: 70% 80%; }
@keyframes wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-10deg); } }
#attract .line { font-size: 6.4cqmin; font-weight: 800; text-align: center; transition: opacity 0.4s; }
#attract .line.ur { font-family: var(--font-ur); font-size: 5.4cqmin; line-height: 2; }
#attract .sub { font-size: 3.6cqmin; color: #7a6650; }

/* Photo countdown */
#countdown {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 48cqmin;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, 0.35);
  -webkit-text-stroke: 0.8cqmin var(--ekram);
  z-index: 8;
  pointer-events: none;
}
#countdown.hidden { display: none; }
#countdown.tick { animation: tick 1s ease-out; }
@keyframes tick { 0% { transform: scale(1.5); opacity: 0; } 20% { transform: scale(1); opacity: 1; } 100% { transform: scale(0.85); opacity: 0.2; } }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 9; }
#flash.go { animation: flash 0.7s ease-out; }
@keyframes flash { 0% { opacity: 0.95; } 100% { opacity: 0; } }

#camdebug { position: absolute; left: 2cqmin; bottom: 30cqmin; width: 30cqmin; border-radius: 2cqmin; z-index: 10; border: 0.4cqmin solid #fff; }
#camdebug.hidden { display: none; }

/* Simple mode: only the characters, their names and a small language row */
body.simple #prompt, body.simple #bubble, body.simple #heard, body.simple #typebox,
body.simple .controls, body.simple #attract, body.simple .brand { display: none !important; }
body.simple #top { display: none; }

/* ------------------------------------------------ exhibition kiosk flow */
body.simple .tag { transform: translate(-50%, -100%); }
body.simple .tag.pulse { animation: pulse-up 1.6s infinite; }
@keyframes pulse-up { 50% { transform: translate(-50%, -100%) scale(1.1); } }
#kiosk { display: none; }
body.simple #kiosk { display: block; position: absolute; inset: 0; z-index: 8; pointer-events: none; }
#kiosk .screen { position: absolute; left: 0; right: 0; transition: opacity 0.45s, transform 0.45s; }
#kiosk .screen.hidden { opacity: 0; transform: translateY(2cqmin); pointer-events: none !important; }
#kiosk .screen.hidden * { pointer-events: none !important; } /* a hidden screen's buttons must not catch taps */

/* 1) Choose a character */
#pick { top: 9cqh; text-align: center; padding: 0 6cqmin; }
#pick .title { font-size: 7.4cqmin; font-weight: 800; transition: opacity 0.35s; }
#pick .sub { margin-top: 1.6cqmin; font-size: 3.8cqmin; color: #7a6650; transition: opacity 0.35s; }
#pick .ur { font-family: var(--font-ur); line-height: 2; }
#pick .title.ur { font-size: 6cqmin; }

/* Greeting caption: where the title goes, in the speaker's colour */
#caption {
  position: absolute; top: 9cqh; left: 5cqmin; right: 5cqmin; text-align: center; transition: opacity 0.3s;
  background: rgba(255, 252, 246, 0.9); border-radius: 4cqmin; padding: 2cqmin 4cqmin 2.4cqmin;
  border-top: 1.2cqmin solid var(--accent); box-shadow: 0 1cqmin 4cqmin rgba(60, 40, 20, 0.14); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#caption.hidden { opacity: 0; }
#caption .text { font-size: 4.6cqmin; font-weight: 700; line-height: 1.45; }
#stage.lang-ur #caption { font-family: var(--font-ur); line-height: 2; }
body.land #caption { top: 6cqh; left: 11cqw; right: 11cqw; }

/* Story video in a frame next to the character */
#storybox {
  position: absolute; top: 19cqmin; left: 4cqmin; right: 4cqmin; aspect-ratio: 16 / 9; pointer-events: auto;
  background: #000; border: 1cqmin solid #fff; border-radius: 4cqmin; overflow: hidden; box-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, 0.35);
  animation: pop 0.4s ease-out;
}
@keyframes pop { from { opacity: 0; transform: scale(0.92); } }
#storybox video { width: 100%; height: 100%; object-fit: contain; display: block; }
#storybox .x {
  position: absolute; top: 2cqmin; inset-inline-end: 2cqmin; width: 9cqmin; height: 9cqmin; border-radius: 50%; border: none;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 4.6cqmin; cursor: pointer; display: grid; place-items: center;
}
#storybox .bar { position: absolute; left: 0; right: 0; bottom: 0; height: 1cqmin; background: rgba(255, 255, 255, 0.25); }
#storybox .bar i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: #fff; }
#storybox .play {
  position: absolute; left: 50%; top: 50%; width: 22cqmin; height: 22cqmin; transform: translate(-50%, -50%); border-radius: 50%; border: none;
  background: rgba(255, 255, 255, 0.92); color: var(--accent, var(--karam)); display: grid; place-items: center; cursor: pointer;
  box-shadow: 0 2cqmin 6cqmin rgba(0, 0, 0, 0.35); animation: play-pulse 2s ease-in-out infinite;
}
@keyframes play-pulse { 50% { box-shadow: 0 0 0 3cqmin rgba(255, 255, 255, 0.25), 0 2cqmin 6cqmin rgba(0, 0, 0, 0.35); } }
#storybox .play svg { width: 55%; height: 55%; margin-inline-start: 8%; }
#storybox .play.hidden { display: none; }
body.land #storybox { top: 50%; left: 47cqw; right: 4cqw; transform: translateY(-50%); animation: none; }

/* 2) Choose the language */
#langpick { bottom: 7cqh; display: flex; flex-direction: column; align-items: center; gap: 4cqmin; pointer-events: auto; }
#langpick .titles { text-align: center; line-height: 1.5; background: rgba(255, 252, 246, 0.82); padding: 2cqmin 6cqmin; border-radius: 4cqmin;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 1cqmin 4cqmin rgba(60, 40, 20, 0.12); }
#langpick .titles div { font-size: 3.5cqmin; color: #6b5a48; }
#langpick .titles div:first-child { font-size: 5.2cqmin; font-weight: 800; color: var(--ink); }
#langpick .titles .ur { font-family: var(--font-ur); line-height: 2; }
#langpick .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqmin; width: 86cqmin; }
#langpick .buttons button {
  font: inherit; font-size: 5cqmin; font-weight: 800; padding: 4.2cqmin 2cqmin; border-radius: 5cqmin; border: none; cursor: pointer;
  color: #fff; background: var(--accent, var(--karam)); box-shadow: 0 1.4cqmin 4cqmin rgba(40, 20, 60, 0.25);
  transition: transform 0.15s;
}
#langpick .buttons button:active { transform: scale(0.95); }
/* all four buttons: same height, same text size, text centred (Urdu included) */
#langpick .buttons button { height: 13cqmin; padding: 0 2cqmin; display: flex; align-items: center; justify-content: center; line-height: 1; font-size: 4.4cqmin; }
#langpick .buttons button[data-lang='ur'] { font-family: var(--font-ur); line-height: 1; padding-bottom: 1cqmin; }

/* 3) Talk: one big hold-to-talk button with three live states */
#talk { bottom: 4.5cqh; display: flex; flex-direction: column; align-items: center; gap: 3cqmin; }
#talk .state {
  font-size: 4.2cqmin; font-weight: 700; padding: 1.4cqmin 5cqmin; border-radius: 99px; min-height: 7cqmin;
  background: rgba(255, 252, 246, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0.8cqmin 3cqmin rgba(60, 40, 20, 0.12);
  transition: color 0.3s;
}
#stage.lang-ur #talk .state { font-size: 3.4cqmin; line-height: 2; padding: 0.4cqmin 5cqmin; }
#talk .state.hint { color: #c0392b; }
#ptt {
  position: relative; width: 30cqmin; height: 30cqmin; border: none; background: none; padding: 0; cursor: pointer;
  pointer-events: auto; touch-action: none; --lvl: 0;
}
#ptt .ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 58%, color-mix(in srgb, var(--accent) 35%, transparent) 60%, transparent 71%);
  transform: scale(calc(1 + var(--lvl) * 0.45)); transition: transform 0.08s linear, opacity 0.3s;
}
#ptt .core {
  position: absolute; inset: 14%; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 70%, #fff), var(--accent) 70%);
  box-shadow: 0 2cqmin 5cqmin color-mix(in srgb, var(--accent) 45%, transparent), inset 0 -1cqmin 2cqmin rgba(0, 0, 0, 0.18);
  transition: transform 0.15s, background 0.3s;
}
#ptt .icon-mic { width: 42%; height: 42%; transition: opacity 0.2s, transform 0.2s; }
#ptt .bars { position: absolute; display: flex; gap: 1.1cqmin; align-items: center; height: 40%; opacity: 0; transition: opacity 0.2s; }
#ptt .bars i { width: 1.6cqmin; height: 100%; border-radius: 99px; background: #fff; transform: scaleY(0.2); transition: transform 0.08s linear; }

#talk.idle #ptt .ring { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.12); opacity: 0.6; } }

#talk.listening #ptt .core { transform: scale(1.08); background: radial-gradient(circle at 35% 30%, #ff8a73, #d6453d 70%); }
#talk.listening #ptt .ring { background: radial-gradient(circle, transparent 56%, rgba(214, 69, 61, 0.35) 60%, transparent 72%); }
#talk.listening #ptt .icon-mic, #talk.speaking #ptt .icon-mic { opacity: 0; transform: scale(0.6); }
#talk.listening #ptt .bars, #talk.speaking #ptt .bars { opacity: 1; }

#talk.thinking #ptt .ring {
  background: conic-gradient(from 0deg, transparent 0 55%, var(--accent) 85%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 68%, transparent 69%);
  mask: radial-gradient(circle, transparent 60%, #000 61%, #000 68%, transparent 69%);
  animation: spin 1.1s linear infinite; transform: none;
}
#talk.thinking #ptt .core { opacity: 0.75; }
@keyframes spin { to { transform: rotate(1turn); } }

/* Positions of the language panel and the mic button (config: langPosition / micPosition) */
body.lang-top #langpick { top: 3cqh; bottom: auto; flex-direction: column; gap: 1.6cqmin; }
body.lang-top #langpick .buttons { gap: 2cqmin; width: 80cqmin; }
body.lang-middle #langpick { top: 40cqh; bottom: auto; }
/* compact at the top, so the characters keep their full size below it */
body.lang-top #langpick .titles, body.lang-middle #langpick .titles { padding: 1cqmin 4cqmin; }
/* the four "choose your language" lines: one size and weight */
body.lang-top #langpick .titles div, body.lang-middle #langpick .titles div,
body.lang-top #langpick .titles div:first-child, body.lang-middle #langpick .titles div:first-child { font-size: 3cqmin; font-weight: 700; color: var(--ink); }
body.lang-top #langpick .buttons button, body.lang-middle #langpick .buttons button { height: 10.5cqmin; border-radius: 4cqmin; }
body.mic-top #talk { top: 3cqh; bottom: auto; flex-direction: column-reverse; }
body.mic-middle #talk { top: 44cqh; bottom: auto; }
body.mic-top #home, body.lang-top #home { top: 3cqmin; }

/* Home: back to the start screen */
#home {
  position: absolute; top: 4cqmin; inset-inline-start: 4cqmin; width: 12cqmin; height: 12cqmin; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto; color: var(--ink);
  border: 0.3cqmin solid rgba(43, 33, 24, 0.12); background: rgba(255, 252, 246, 0.85); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 0.8cqmin 3cqmin rgba(60, 40, 20, 0.15); transition: opacity 0.3s;
}
#home svg { width: 55%; height: 55%; }
#home.hidden { opacity: 0; pointer-events: none; }

/* "Are you still there?" before going back to the start screen */
#idle { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(29, 23, 18, 0.35); pointer-events: auto; transition: opacity 0.3s; }
#idle.hidden { opacity: 0; pointer-events: none; }
#idle .box { background: var(--cream); border-radius: 5cqmin; padding: 6cqmin 8cqmin; text-align: center; box-shadow: 0 2cqmin 8cqmin rgba(0, 0, 0, 0.3); }
#idle .q { font-size: 6cqmin; font-weight: 800; }
#idle .n { font-size: 14cqmin; font-weight: 800; color: var(--accent, var(--karam)); line-height: 1.2; }
#idle .sub { font-size: 3.8cqmin; color: #7a6650; }
#stage.lang-ur #idle .box { font-family: var(--font-ur); line-height: 2; }

#story { position: absolute; inset: 0; z-index: 20; background: #000; display: grid; place-items: center; }
#story video { width: 100%; height: 100%; object-fit: contain; }

/* ------------------------------------------------ landscape screens (config: screen)
   Layout A: the chosen character on the left, language buttons / mic on the right. */
body.land #stage { position: absolute; inset: 0; margin: auto; width: min(100vw, 177.78dvh); height: min(100dvh, 56.25vw); aspect-ratio: auto; }
body.land #pick { top: 6cqh; padding: 0 17cqmin; } /* clear of the Home button */
body.land #langpick, body.land #talk { top: 50%; bottom: auto; left: 47cqw; right: 4cqw; transform: translateY(-50%); }
body.land #langpick.hidden, body.land #talk.hidden { transform: translateY(calc(-50% + 2cqmin)); }
body.land #langpick .buttons { width: min(86cqmin, 45cqw); }
body.land #talk { gap: 5cqmin; }

/* Not authorised (no key, or a key n8n refuses) */
#denied { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2vmin; text-align: center;
  background: var(--cream); color: var(--ink); font-family: var(--font); }
#denied img { width: 18vmin; opacity: 0.25; margin-bottom: 2vmin; }
#denied .ar { font-size: 5vmin; font-weight: 800; direction: rtl; }
#denied .en { font-size: 2.6vmin; color: #7a6650; }

/* ------------------------------------------------ choosing by voice: one card
   (the instructions, the language names and the mic together; the mic sits on
   the card's lower edge). The instruction takes turns in each language. */
body.select-voice #langpick, body.select-voice #pick { --mic: 23cqmin; margin-inline: auto; isolation: isolate; padding-bottom: 0; }
body.select-voice #langpick { width: 90cqmin; gap: 1.6cqmin; padding: 3.2cqmin 3.5cqmin 0; }
body.select-voice #pick { width: fit-content; max-width: 88cqmin; display: flex; flex-direction: column; align-items: center; padding: 3.4cqmin 6cqmin 0; }
body.select-voice.land #langpick { width: 50cqw; }
body.select-voice.land #pick { max-width: 60cqw; }
body.select-voice #langpick::before, body.select-voice #pick::before {
  content: ''; position: absolute; inset: 0 0 calc(var(--mic) / 2); z-index: -1; border-radius: 6cqmin;
  background: rgba(255, 252, 246, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.75); box-shadow: 0 1.2cqmin 5cqmin rgba(60, 40, 20, 0.14); }
body.select-voice #langpick .titles { display: none; }
body.select-voice .vstate { order: 1; font-size: 3.3cqmin; min-height: 5cqmin; }
body.select-voice .vmic { order: 2; width: var(--mic); height: var(--mic); }
body.select-voice #pick .vmic { margin-top: 1.4cqmin; }
body.select-voice .vmic .core { inset: 13%; box-shadow: 0 0 0 0.9cqmin #fffaf2, 0 1.6cqmin 4.5cqmin color-mix(in srgb, var(--mc) 50%, transparent); }
body.select-voice #langpick .vstate:empty { min-height: 0; margin-top: -1.6cqmin; }
body.select-voice #pick .vstate:empty { min-height: 0; }
body.select-voice #pick .title { font-size: 6.4cqmin; }
body.select-voice #pick .title.ur { font-size: 5.2cqmin; }
body.select-voice #pick .sub { font-size: 3.4cqmin; margin-top: 0.6cqmin; }

/* the turns: one slide per language, same height whatever the language */
#langpick .rot { display: none; position: relative; align-self: stretch; }
body.select-voice #langpick .rot { display: block; }
#langpick .rot .slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  opacity: 0; transform: translateY(45%); filter: blur(4px); transition: opacity 0.55s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.55s; }
#langpick .rot .slide.on { opacity: 1; transform: none; filter: none; }
#langpick .rot .slide.out { opacity: 0; transform: translateY(-45%); filter: blur(4px); }
#langpick .rot .say { font-size: 4.4cqmin; font-weight: 700; color: var(--ink); line-height: 1.7; white-space: nowrap; }
#langpick .rot .lname { font-size: 9cqmin; font-weight: 800; color: var(--karam); line-height: 1.35; }
#langpick .rot .ur .say { font-family: var(--font-ur); font-size: 4cqmin; line-height: 2.2; }
#langpick .rot .ur .lname { font-family: var(--font-ur); font-size: 7.4cqmin; line-height: 1.9; }
#langpick .dots { display: none; gap: 1.4cqmin; justify-content: center; }
#langpick .dots i { width: 1.6cqmin; height: 1.6cqmin; border-radius: 99px; background: rgba(15, 74, 44, 0.2); transition: width 0.4s, background 0.4s; }
#langpick .dots i.on { width: 5cqmin; background: var(--karam); }

/* the phrase and the language name change together (big name, dots) */
body.select-voice #langpick .rot { height: 24cqmin; }
body.select-voice #langpick .names { display: none; }
body.select-voice #langpick .dots { display: flex; }
body.select-voice #langpick.fallback .dots { display: none; }

/* landscape: the mic beside the title, so the characters keep their size */
body.select-voice.land #pick { display: grid; grid-template-columns: auto auto; column-gap: 4cqmin; align-items: center; padding: 2.4cqmin 3cqmin 2.4cqmin 5cqmin; }
body.select-voice.land #pick::before { bottom: 0; }
body.select-voice.land #pick .title { grid-area: 1 / 1; }
body.select-voice.land #pick .sub { grid-area: 2 / 1; }
body.select-voice.land #pick .vmic { grid-area: 1 / 2 / 3 / 3; margin: 0; }
body.select-voice.land #pick .vstate { grid-area: 3 / 1 / 4 / 3; }
body.select-voice.land #pick { --mic: 17cqmin; max-width: 72cqw; }
body.select-voice.land #pick .title { font-size: 5.6cqmin; white-space: nowrap; }
body.select-voice.land #pick .title.ur { font-size: 4.8cqmin; }

/* ------------------------------------------------ selfie (config.selfie) */
/* the camera button: like Home, in the opposite corner */
#selfiebtn { position: absolute; top: 4cqmin; inset-inline-end: 4cqmin; width: 12cqmin; height: 12cqmin; border-radius: 50%; display: none; place-items: center;
  cursor: pointer; pointer-events: auto; color: var(--ink); border: 0.3cqmin solid rgba(43, 33, 24, 0.12); background: rgba(255, 252, 246, 0.85);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0.8cqmin 3cqmin rgba(60, 40, 20, 0.15); transition: opacity 0.3s; }
#selfiebtn svg { width: 55%; height: 55%; }
body.selfie-on #selfiebtn { display: grid; }
#selfiebtn.hidden { opacity: 0; pointer-events: none; }
body.mic-top #selfiebtn, body.lang-top #selfiebtn { top: 3cqmin; } /* the same row as Home */
#selfie { position: absolute; inset: 0; z-index: 15; display: grid; justify-content: center; align-content: center; justify-items: center;
  grid-template-areas: 'head' 'view' 'after'; gap: 2.6cqmin; padding: 4cqmin; background: var(--cream); transition: opacity 0.35s; }
#selfie::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #b3c79c; opacity: 0.18;
  -webkit-mask: url(../assets/brand/logo.svg) 0 0 / 7cqmin auto space; mask: url(../assets/brand/logo.svg) 0 0 / 7cqmin auto space; }
#selfie.hidden { opacity: 0; pointer-events: none; }
#selfie video { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }
#selfie .close { position: absolute; top: 4cqmin; inset-inline-start: 4cqmin; width: 12cqmin; height: 12cqmin; border-radius: 50%; display: grid; place-items: center;
  border: 0.3cqmin solid rgba(43, 33, 24, 0.12); background: rgba(255, 252, 246, 0.9); color: var(--ink); cursor: pointer; box-shadow: 0 0.8cqmin 3cqmin rgba(60, 40, 20, 0.15); }
#selfie .close svg { width: 55%; height: 55%; }
#selfie .head { grid-area: head; max-width: 76cqmin; font-size: 4.6cqmin; font-weight: 800; line-height: 1.4; text-align: center; color: var(--ink); }
#stage.lang-ur #selfie .head { font-size: 4cqmin; line-height: 2; }
#selfie .view { grid-area: view; position: relative; height: min(66cqh, 108cqw); aspect-ratio: 4 / 5; border-radius: 2.4cqmin; overflow: hidden;
  background: #e9dcc6; box-shadow: 0 1.6cqmin 5cqmin rgba(60, 40, 20, 0.22); }
#selfie .view canvas, #selfie .view img { position: absolute; inset: 0; width: 100%; height: 100%; }
#selfie .shot { display: none; }
#selfie.done .shot { display: block; }
#selfie.done .live { visibility: hidden; }
#selfie .count { position: absolute; inset: 0; display: grid; place-items: center; font-size: 34cqmin; font-weight: 800; color: #fff; opacity: 0;
  text-shadow: 0 1.4cqmin 5cqmin rgba(0, 0, 0, 0.35); -webkit-text-stroke: 0.6cqmin var(--ekram); pointer-events: none; }
#selfie .count.tick { animation: tick 1s ease-out; }
#selfie .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
#selfie .flash.go { animation: flash 0.7s ease-out; }
#selfie .after { grid-area: after; display: none; flex-direction: column; align-items: center; gap: 2.4cqmin; }
#selfie.done .after { display: flex; }
#selfie .qrbox { display: grid; grid-template-columns: auto 1fr; grid-template-areas: 'qr scan' 'qr keep'; align-items: center; column-gap: 3cqmin; row-gap: 0.8cqmin;
  max-width: 82cqmin; padding: 2cqmin 3cqmin 2cqmin 2cqmin; border-radius: 3cqmin; background: #fff; box-shadow: 0 1cqmin 4cqmin rgba(60, 40, 20, 0.12); }
#selfie .qr { grid-area: qr; width: 22cqmin; height: 22cqmin; image-rendering: pixelated; }
#selfie .qrbox.wait .qr { opacity: 0.12; }
#selfie .scan { grid-area: scan; align-self: end; font-size: 3.6cqmin; font-weight: 800; color: var(--karam); line-height: 1.4; }
#selfie .keep { grid-area: keep; align-self: start; font-size: 2.7cqmin; color: #7a6650; line-height: 1.4; }
#stage.lang-ur #selfie .scan, #stage.lang-ur #selfie .keep { line-height: 2; }
#selfie .btns { display: flex; gap: 3cqmin; }
#selfie .btns button { height: 11cqmin; min-width: 30cqmin; padding: 0 5cqmin; border-radius: 99px; font: inherit; font-size: 4cqmin; font-weight: 800; cursor: pointer; }
#selfie .retake { border: 0.4cqmin solid var(--karam); background: #fff; color: var(--karam); }
#selfie .done { border: none; background: var(--karam); color: #fff; box-shadow: 0 1cqmin 3cqmin rgba(15, 74, 44, 0.3); }
/* portrait, photo taken: a smaller photo leaves room for the code and the buttons */
#selfie.done .view { height: min(54cqh, 100cqw); }
/* landscape: the picture on one side, the text, code and buttons on the other */
body.land #selfie { grid-template-areas: 'view head' 'view after'; grid-template-columns: auto minmax(0, 46cqw); align-content: center; column-gap: 5cqw; row-gap: 3cqmin; }
body.land #selfie .head { align-self: end; }
body.land #selfie .after { align-self: start; }
body.land #selfie .view, body.land #selfie.done .view { height: 86cqh; }
body.land #selfie:not(.done) .head { align-self: center; }
body.land #selfie:not(.done) { grid-template-areas: 'view head'; }
body.land #selfie .close { inset-inline-start: auto; inset-inline-end: 4cqmin; } /* clear of the picture */