/* UAE Annual Government Meetings kiosk (/moc), adapted from the /alyam kiosk.
   Laid out on a fixed 1080×1920 portrait stage that moc.js scales to fit the screen.
   Photos were generated for this kiosk with ChatGPT; cards without a photo fall back to toned
   CSS artwork in the UAE Government gold. */

:root {
  --gold: #b68a35;
  --gold-dark: #92722a;
  --gold-text: #7c5f22;
  --gold-tint: #f7f1e4;
  --gold-line: #e8d9b8;
  --gold-wash: #fbf7ee;
  --ink: #16181d;
  --body: #3a3e47;
  --muted: #4b505a;
  --muted-2: #5b606b;
  --sand-tint: #f3eee4;
  --night: #1a1c20;
  --ring: #b68a35;
  --flag-green: #00843d;
  --flag-red: #c8102e;
  --surface: #ffffff;
  --cream: #fbf9f4;
  --backdrop: #efebe3;
  --shadow-soft: 0 10px 28px rgba(22, 24, 29, 0.12);
  --shadow-card: 0 18px 44px rgba(22, 24, 29, 0.12);
  --font: 'Poppins', 'IBM Plex Sans Arabic', system-ui, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Poppins', system-ui, sans-serif;
  --speaker-label: "HIND";
  --visitor-label: "YOU";
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--backdrop);
}

button { font: inherit; color: inherit; }
button:focus-visible { outline: 4px solid var(--ring); outline-offset: 4px; }
[hidden] { display: none !important; }

.g-viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #c9cad3;
}

.g-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;
  /* clip, not hidden: the avatar overhangs the stage bottom, and a hidden overflow can still be
     scrolled by focus or scrollIntoView, which shifts the whole kiosk up. */
  overflow: clip;
  transform: translate(-50%, -50%) scale(var(--stage-scale, 0.5));
  transform-origin: center;
  font-family: var(--font);
  color: var(--ink);
  /* Follows the edge colours of Hind's video backdrop, a cool grey, at her scaled position, so the
     video's faded sides blend into it. */
  background: linear-gradient(180deg, #c4c4cf 0, #c6c6d1 91px, #d1d2dd 245px, #dcdde8 554px, #e4e4ef 1017px, #d5d5df 1481px, #dcdbe4 1920px);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

:root[lang|="ar"] .g-stage { font-family: var(--font-ar); }

[dir="rtl"] .g-flip { transform: scaleX(-1); }

/* Avatar video sits behind everything. --avatar-top / --avatar-height let the framing be tuned. */
/* Hind stands full length: her 1080×1920 video is scaled to 96.5% and centred so her head sits just
   under the top banner and her shoes show just below the bottom banner. Its sides fade into the
   stage backdrop so the video's edges never show. */
#avatar {
  position: absolute;
  z-index: 0;
  left: 19px;
  top: 91px;
  width: 1042px;
  height: 1853px;
  display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%), linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 90px, #000 calc(100% - 90px), transparent 100%), linear-gradient(180deg, #000 calc(100% - 22px), transparent 100%);
  mask-composite: intersect;
}

/* Banners */
.g-banner {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  border-radius: 24px;
  box-shadow: var(--shadow-soft);
  direction: ltr;
}

/* Top banner: the official We the UAE 2031 logo and the event name on cream, a gold slash, and the
   Ministry of Cabinet Affairs logo over the Abu Dhabi skyline washed to a pale gold, with a soft
   cream glow behind the logo so its lettering stays crisp. The lockup keeps its order in Arabic. */
.g-banner-top { left: 34px; top: 40px; width: 1012px; height: 170px; background: var(--cream); }

.g-top-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 50%;
  overflow: hidden;
  clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  background: #fbf7ee;
}

.g-top-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; filter: grayscale(1) sepia(0.75) brightness(1.18) contrast(0.85); opacity: 0.42; }
.g-top-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 70% at 62% 50%, rgba(251, 247, 238, 0.92), rgba(251, 247, 238, 0.35) 70%, rgba(251, 247, 238, 0)); }

/* The thin gold stroke that runs alongside the skyline's diagonal edge. */
.g-banner-top::after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: calc(50% - 26px);
  width: 8%;
  background: linear-gradient(to bottom right, transparent calc(50% - 2px), var(--gold) calc(50% - 1px), var(--gold) calc(50% + 1px), transparent calc(50% + 2px));
  pointer-events: none;
}

.g-top-brand { position: absolute; z-index: 2; left: 40px; top: 0; bottom: 0; display: flex; align-items: center; gap: 22px; }
.g-logo-2031 { height: 116px; width: auto; }
.g-top-divider { width: 2px; height: 96px; background: var(--gold); }
.g-top-text { display: flex; flex-direction: column; align-items: flex-start; }
:root[dir="rtl"] .g-top-text { direction: rtl; }
.g-logo-moca { position: absolute; z-index: 2; right: 44px; top: 50%; height: 108px; width: auto; transform: translateY(-50%); }

.g-top-lead { margin: 0; font-size: 17.5px; line-height: 1.15; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: #22252b; }
.g-top-name { margin-top: 2px; font-size: 33px; line-height: 1.02; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; white-space: pre-line; color: var(--gold-dark); }
.g-pillars { margin: 10px 0 0; display: flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: #3a3e47; }
.g-pillars i { width: 2px; height: 13px; background: var(--gold); }
:root[lang|="ar"] .g-top-lead { letter-spacing: 0; font-size: 20.5px; font-weight: 500; }
:root[lang|="ar"] .g-top-name { font-size: 35px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
:root[lang|="ar"] .g-pillars { letter-spacing: 0; font-size: 13px; margin-top: 4px; }

/* Bottom banner: the Abu Dhabi skyline at night with live text and the Event Programme action. */
.g-banner-bottom { left: 34px; top: 1660px; width: 1012px; height: 172px; background: var(--night); }
.g-banner-bottom > img { position: absolute; top: 0; right: 0; width: 68%; height: 100%; object-fit: cover; object-position: 60% 55%; }

.g-banner-bottom::before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(90deg, var(--night) 0%, var(--night) 34%, rgba(26, 28, 32, 0.72) 52%, rgba(26, 28, 32, 0.15) 74%, rgba(26, 28, 32, 0) 100%);
}

.g-bottom-text {
  position: absolute;
  z-index: 2;
  left: 40px;
  top: 0;
  bottom: 0;
  width: max-content;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  color: #ffffff;
}

:root[dir="rtl"] .g-bottom-text { direction: rtl; }

.g-bottom-eyebrow { font-size: 16px; font-weight: 500; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.9; }
.g-bottom-headline { margin: 6px 0 0; font-size: 37px; line-height: 1.1; font-weight: 800; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.g-bottom-sub { margin: 10px 0 0; font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; opacity: 0.9; }
:root[lang|="ar"] .g-bottom-eyebrow { letter-spacing: 0; font-size: 19px; }
:root[lang|="ar"] .g-bottom-headline { font-size: 44px; line-height: 1.3; font-weight: 700; letter-spacing: 0; }
:root[lang|="ar"] .g-bottom-sub { letter-spacing: 0; font-size: 20px; margin-top: 2px; }

.g-accent { color: var(--gold); }

.g-bottom-actions {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 14px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* The event app's QR code, always visible: Hind tells visitors to scan the code on the screen. */
.g-qr-tile { padding: 8px 8px 6px; border: 0; border-radius: 14px; background: #ffffff; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; }
.g-qr-tile img { display: block; width: 112px; height: 112px; }
.g-qr-tile span { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* Name and organisation beside the avatar. The name, language button and microphone stay where
   they are in Arabic (only their text changes), so they use left and right rather than start and
   end. */
.g-intro {
  position: absolute;
  z-index: 3;
  left: 44px;
  top: 420px;
  width: 300px;
}

.g-intro h1 { margin: 0; font-size: 40px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; }
.g-intro p { margin: 6px 0 0; font-size: 24px; line-height: 1.35; color: #2b2e35; }
/* During a conversation Hind's bubble takes the intro's place. */
.g-intro { transition: opacity 0.3s ease, visibility 0.3s; }
.is-conversing .g-intro { opacity: 0; visibility: hidden; }
:root[lang|="ar"] .g-intro h1 { font-size: 42px; line-height: 1.4; font-weight: 700; letter-spacing: 0; }
/* Arabic lines start at the same left edge as English, clear of Hind's shoulder. */
:root[lang|="ar"] .g-intro { text-align: left; }

/* Language + microphone controls */
.g-controls {
  position: absolute;
  z-index: 5;
  right: 36px;
  top: 404px;
  width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.language-stack, .microphone-stack { display: flex; flex-direction: column; align-items: center; gap: 12px; }

.g-round {
  width: 96px;
  height: 96px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(22, 24, 29, 0.14);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.g-round:active:not(:disabled) { transform: scale(0.95); }
.g-round:disabled { opacity: 0.55; cursor: wait; }
.g-round svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.microphone { width: 112px; height: 112px; background: var(--gold); color: #ffffff; box-shadow: 0 12px 28px rgba(182, 138, 53, 0.38); }
.microphone svg { width: 44px; height: 44px; stroke-width: 2; }
.microphone .stop-icon { display: none; fill: currentColor; stroke: none; width: 34px; height: 34px; }
.microphone.listening, .microphone.speaking {
  background: var(--gold-dark);
  box-shadow: 0 0 0 12px rgba(182, 138, 53, 0.18), 0 0 0 26px rgba(182, 138, 53, 0.08), 0 8px 22px rgba(22, 24, 29, 0.2);
  animation: g-listening 1.6s ease-in-out infinite;
}
.microphone.listening .mic-icon, .microphone.speaking .mic-icon { display: none; }
.microphone.listening .stop-icon, .microphone.speaking .stop-icon { display: block; }
.microphone.processing { animation: g-processing 0.9s ease-in-out infinite alternate; }

.g-caption {
  font-size: 20px;
  line-height: 1.3;
  font-weight: 500;
  color: #1d2027;
  text-align: center;
  white-space: pre-line;
}

#language-code { font-size: 21px; font-weight: 700; color: var(--ink); }
.microphone.listening + .g-caption, .microphone.speaking + .g-caption { color: var(--gold-text); font-weight: 700; }

/* Hero card */
.g-hero {
  position: absolute;
  z-index: 3;
  inset-inline-start: 32px;
  top: 780px;
  width: 1016px;
  height: 280px;
  box-sizing: border-box;
  padding-block: 22px;
  padding-inline: 34px 24px;
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  align-items: center;
  gap: 26px;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}

.g-hero > img { flex: 0 0 auto; width: 425px; height: 236px; border-radius: 17px; object-fit: cover; }
.g-hero-text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.g-hero h2 { margin: 0 0 10px; font-size: 39px; line-height: 1.02; font-weight: 800; letter-spacing: -0.02em; }
.g-hero .g-primary { margin-top: 15px; min-height: 49px; padding: 0 24px; font-size: 17px; gap: 12px; }
.g-hero .g-primary svg { width: 20px; height: 20px; }
.g-hero h2 span { display: block; }
.g-hero p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--body); }
:root[lang|="ar"] .g-hero h2 { font-size: 36px; line-height: 1.3; letter-spacing: 0; font-weight: 700; }
:root[lang|="ar"] .g-hero p { line-height: 1.7; }

.g-primary {
  margin-top: 22px;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.g-primary:active { background: var(--gold-dark); }
.g-primary svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.is-conversing .g-hero,
[data-screen="section"] .g-hero {
  opacity: 0;
  visibility: hidden;
  transform: translateY(24px);
}

/* Home topic cards */
.g-cards {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 1080px;
  width: 1056px;
  height: 262px;
  display: flex;
  gap: 10px;
  transition: opacity 0.3s ease, visibility 0.3s;
}

[data-screen="section"] .g-cards { opacity: 0; visibility: hidden; }

.g-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  background: #6b4a35;
  box-shadow: 0 10px 22px rgba(22, 24, 29, 0.18);
  transition: transform 0.15s ease;
}

.g-card:active { transform: scale(0.97); }
.g-card img, .g-card .g-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Toned artwork with a large outline icon, used until event photography is supplied. */
.g-art {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 18%;
  box-sizing: border-box;
  color: rgba(255, 255, 255, 0.82);
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 22px),
    linear-gradient(165deg, var(--art-from), var(--art-to));
}

.g-art svg { width: 38%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.g-art[data-tone="gold"] { --art-from: #c99d48; --art-to: #7c5f22; }
.g-art[data-tone="night"] { --art-from: #3a3e47; --art-to: #121316; }
.g-art[data-tone="bronze"] { --art-from: #9a7a4a; --art-to: #4a3a22; }
.g-art[data-tone="green"] { --art-from: #1f7a52; --art-to: #0b3b28; }
.g-art[data-tone="sand"] { --art-from: #b9a483; --art-to: #6b5a3e; }
.g-art[data-tone="red"] { --art-from: #a4343f; --art-to: #561820; }
.g-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 12, 0) 38%, rgba(18, 16, 12, 0.55) 62%, rgba(30, 26, 18, 0.92) 100%); }

.g-card-label {
  position: absolute;
  z-index: 1;
  inset-inline: 14px 12px;
  bottom: 16px;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 700;
  color: #ffffff;
  text-align: start;
  white-space: pre-line;
}

:root[lang|="ar"] .g-card-label { font-size: 22px; line-height: 1.4; }

.g-card-arrow {
  position: absolute;
  z-index: 1;
  inset-inline-end: 12px;
  top: 12px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--gold);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
}

.g-card-arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Section view */
.g-section {
  position: absolute;
  z-index: 3;
  inset-inline-start: 48px;
  top: 770px;
  width: 984px;
  height: 820px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: g-rise 0.3s ease both;
}

/* The header reads on a cream bar like the top banner, since Hind's dark abaya sits behind it: a
   gold slash after Back, the title over its other-language name, and the pale gold skyline fading
   in at the far end. */
.g-section-head { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; min-height: 84px; box-sizing: border-box; padding-inline: 16px 30px; border: 1px solid var(--gold-line); border-radius: 24px; background: var(--cream); box-shadow: 0 14px 30px rgba(22, 24, 29, 0.16); }
.g-section-head::before { content: ''; position: absolute; inset-block: 0; inset-inline-end: 0; width: 48%; background: url(/moc/banner-top.jpg) center / cover; filter: grayscale(1) sepia(0.75) brightness(1.18) contrast(0.85); opacity: 0.45; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
:root[dir="rtl"] .g-section-head::before { -webkit-mask-image: linear-gradient(270deg, transparent, #000 60%); mask-image: linear-gradient(270deg, transparent, #000 60%); }
.g-section-head > * { position: relative; }
.g-section-head .g-back { height: 56px; border: 1.5px solid var(--gold-line); box-shadow: none; }
.g-section-head .g-back svg { color: var(--gold); }
.g-section-slash { flex: 0 0 auto; width: 6px; height: 58px; background: var(--gold); transform: skewX(-20deg); }
.g-section-titles { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.g-section-head h2 { margin: 0; font-size: 32px; line-height: 1.15; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; }
:root[lang|="ar"] .g-section-head h2 { letter-spacing: 0; font-weight: 700; }
.g-alt { font-size: 22px; font-weight: 500; color: var(--muted-2); white-space: nowrap; }
.g-alt:lang(ar), .g-alt[lang="ar"] { font-family: var(--font-ar); font-size: 24px; }
.g-alt[lang="en"] { font-family: var(--font); }
.g-section-titles .g-alt { font-size: 18px; font-weight: 600; color: var(--gold-text); }

.g-back {
  flex: 0 0 auto;
  height: 54px;
  padding-inline: 16px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 19px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 6px 16px rgba(22, 24, 29, 0.14);
  cursor: pointer;
}

.g-back svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.g-tabs {
  margin-inline-start: auto;
  display: flex;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(22, 24, 29, 0.1);
}

.g-tabs button {
  height: 46px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.g-tabs button[aria-selected="true"] { background: var(--gold); color: #ffffff; }

.g-section-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}

.g-section-body::-webkit-scrollbar { display: none; }

/* Grid of tiles */
.g-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }

.g-tile {
  min-height: 200px;
  box-sizing: border-box;
  padding: 26px;
  border: 0;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 12px 26px rgba(22, 24, 29, 0.1);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.g-tile:active { transform: scale(0.98); }

/* Photo tiles: the photo fills the tile and the title sits over a dark fade, like the home cards. */
.g-tile.has-photo { position: relative; overflow: hidden; justify-content: flex-end; gap: 4px; padding: 20px 22px; background: var(--night); color: #ffffff; }
.g-tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-tile.has-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 12, 0) 30%, rgba(18, 16, 12, 0.55) 58%, rgba(30, 26, 18, 0.92) 100%); }
.g-tile.has-photo .g-tile-title, .g-tile.has-photo .g-alt { position: relative; z-index: 1; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.g-tile.has-photo .g-alt { color: rgba(255, 255, 255, 0.86); }
.g-tile-title { font-size: 24px; line-height: 1.2; font-weight: 700; }
:root[lang|="ar"] .g-tile-title { line-height: 1.45; }
.g-tile .g-alt { font-size: 19px; white-space: normal; }

.g-icon {
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--gold-tint);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
}

.g-icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.g-icon.is-image { border-radius: 18px; background: var(--sand-tint); }
.g-icon img { width: 42px; height: 42px; object-fit: contain; }

.g-hint {
  margin: 14px auto 0;
  width: fit-content;
  max-width: 800px;
  box-sizing: border-box;
  padding: 18px 26px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 10px 24px rgba(22, 24, 29, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 19px;
  line-height: 1.4;
  color: #2f333b;
  text-align: center;
}

button.g-hint { border: 0; cursor: pointer; }
.g-hint svg { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: var(--gold); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* Academic programme list: two columns of rows */
.g-programme-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.g-programme-row {
  min-height: 112px;
  box-sizing: border-box;
  padding: 16px 22px;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  text-align: start;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: 0 10px 22px rgba(22, 24, 29, 0.09);
  cursor: pointer;
}

.g-programme-row .g-icon { width: 76px; height: 76px; }
.g-programme-row .g-icon img { width: 50px; height: 50px; }
.g-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.g-row-title { font-size: 21px; line-height: 1.25; font-weight: 700; }
.g-row-text .g-alt { font-size: 18px; white-space: normal; }
.g-programme-row > span:last-child svg { width: 24px; height: 24px; fill: none; stroke: var(--muted-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Discover spotlight (coverflow) */
/* Ends just below the hint (683px), so the section body has nothing to scroll. */
.g-spot { position: relative; height: 700px; }

.g-spot-track {
  position: absolute;
  inset-inline-start: -48px;
  top: 10px;
  width: 1080px;
  height: 500px;
  box-sizing: border-box;
  padding-inline: 340px;
  display: flex;
  align-items: center;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.g-spot-track::-webkit-scrollbar { display: none; }

.g-spot-card {
  position: relative;
  flex: 0 0 400px;
  height: 420px;
  margin-inline: -20px;
  padding: 0;
  border: 0;
  border-radius: 26px;
  overflow: hidden;
  scroll-snap-align: center;
  cursor: pointer;
  background: #c9c4bd;
  transform: scale(0.82);
  filter: brightness(0.86);
  box-shadow: 0 12px 26px rgba(22, 24, 29, 0.18);
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}

.g-spot-card.is-active {
  z-index: 2;
  transform: scale(1);
  filter: none;
  box-shadow: 0 0 0 5px #ffffff, 0 0 0 10px var(--ring), 0 22px 44px rgba(22, 24, 29, 0.28);
}

.g-spot-card img, .g-spot-card .g-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-spot-card .g-art { padding-top: 16%; }
.g-spot-card .g-art svg { width: 34%; }
.g-spot-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 16, 12, 0) 34%, rgba(18, 16, 12, 0.88) 100%); }

.g-spot-text {
  position: absolute;
  z-index: 1;
  inset-inline: 26px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: #ffffff;
  text-align: start;
}

.g-spot-text strong { font-size: 30px; line-height: 1.12; font-weight: 700; }
.g-spot-text span { font-size: 17px; line-height: 1.4; opacity: 0.92; }
.g-rule { display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--gold); }
:root[lang|="ar"] .g-spot-text strong { line-height: 1.35; }

.g-dots {
  position: absolute;
  left: -48px;
  top: 540px;
  width: 1080px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.g-dots span { width: 10px; height: 10px; border-radius: 5px; background: #b8b4ae; transition: width 0.25s ease, background-color 0.25s ease; }
.g-dots span.is-active { width: 30px; background: var(--gold); }
.g-spot .g-hint { position: absolute; left: 50%; top: 586px; transform: translateX(-50%); margin: 0; flex-direction: column; gap: 4px; min-width: 460px; }
.g-hint strong { font-size: 22px; font-weight: 700; color: var(--ink); }

/* Programme detail */
.g-programme {
  box-sizing: border-box;
  padding: 30px 38px 32px;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.g-programme-head { display: flex; align-items: center; gap: 26px; }
.g-programme-icon { flex: 0 0 auto; width: 112px; height: 112px; border-radius: 24px; background: var(--sand-tint); display: flex; align-items: center; justify-content: center; }
.g-programme-icon img { width: 76px; height: 76px; object-fit: contain; }
.g-programme-title { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.g-programme-title h3 { margin: 4px 0 0; font-size: 36px; line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; }
:root[lang|="ar"] .g-programme-title h3 { line-height: 1.4; letter-spacing: 0; font-weight: 700; }
.g-programme-title .g-alt { white-space: normal; }
.g-stat { flex: 0 0 auto; width: 170px; display: flex; flex-direction: column; align-items: flex-end; text-align: end; }
.g-stat strong { font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--gold); }
.g-stat span { margin-top: 6px; font-size: 18px; line-height: 1.35; color: var(--body); }
.g-kicker { margin: 20px 0 0; font-size: 19px; font-weight: 600; color: var(--gold-text); }

.g-badge { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--gold-tint); color: var(--gold-text); font-size: 14px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
:root[lang|="ar"] .g-badge { letter-spacing: 0; font-size: 15px; }

.g-separator { height: 1px; background: #e6e3de; margin: 20px 0 18px; border: 0; }
.g-copy { display: flex; flex-direction: column; gap: 14px; }
.g-copy p { margin: 0; font-size: 21px; line-height: 1.5; color: var(--ink); }
.g-copy p:first-child { font-weight: 600; }
:root[lang|="ar"] .g-copy p { line-height: 1.75; }

.g-chips-heading { margin-top: 22px; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-text); text-transform: uppercase; }
:root[lang|="ar"] .g-chips-heading { letter-spacing: 0; font-size: 17px; }
.g-chips { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.g-chip {
  min-height: 64px;
  box-sizing: border-box;
  padding: 10px 20px;
  border: 1.5px solid var(--gold-line);
  border-radius: 18px;
  background: var(--gold-wash);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
  cursor: pointer;
}

.g-chip:active { background: var(--gold-tint); }
.g-chip strong { font-size: 19px; line-height: 1.25; font-weight: 600; }
.g-chip svg { flex: 0 0 auto; width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Popout sheet: a 620px card that leaves Hind's face in view. Its photo is the header, with the
   title on it like the photo tiles; an item without a photo gets the gold skyline and its icon. */
.g-popout { position: absolute; inset: 0; z-index: 30; }
.g-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(14, 12, 10, 0.42); backdrop-filter: blur(4px); animation: g-fade 0.2s ease both; }

.g-sheet {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  width: 620px;
  max-height: 1500px;
  margin-inline: auto;
  overflow-y: auto;
  scrollbar-width: none;
  box-sizing: border-box;
  border-radius: 28px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(10, 8, 6, 0.4);
  display: flex;
  flex-direction: column;
  transform: translateY(-50%);
  animation: g-sheet-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.g-sheet::-webkit-scrollbar { display: none; }

.g-sheet-hero { position: relative; flex: 0 0 auto; height: 250px; overflow: hidden; background: #2a2620; }
.g-sheet-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g-sheet-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 8, 6, 0) 30%, rgba(10, 8, 6, 0.8) 100%); }
.g-sheet-hero.is-art { background: linear-gradient(135deg, #cfa955 0%, #a98235 55%, #7c5f22 100%); }
.g-sheet-hero.is-art::before { content: ''; position: absolute; inset: 0; background: url(/moc/banner-top.jpg) center / cover; filter: grayscale(1); mix-blend-mode: soft-light; opacity: 0.7; }
.g-sheet-hero.is-art::after { background: linear-gradient(180deg, rgba(60, 40, 10, 0) 40%, rgba(60, 40, 10, 0.35) 100%); }
.g-sheet-glyph { position: absolute; inset-inline-end: -26px; top: -18px; display: flex; color: rgba(255, 255, 255, 0.18); }
.g-sheet-glyph svg { width: 230px; height: 230px; fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; }

.g-sheet-caption { position: absolute; z-index: 1; inset-inline: 30px; bottom: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.g-sheet h2 { margin: 10px 0 0; color: #ffffff; font-size: 32px; line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25); }
:root[lang|="ar"] .g-sheet h2 { line-height: 1.4; letter-spacing: 0; font-weight: 700; }
.g-sheet-caption .g-alt { margin: 4px 0 0; font-size: 18px; color: rgba(255, 255, 255, 0.88); white-space: normal; }
.g-sheet-caption .g-badge { height: 26px; font-size: 12px; background: rgba(255, 255, 255, 0.94); }

.g-close {
  position: absolute;
  z-index: 2;
  top: 18px;
  inset-inline-end: 18px;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.g-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.g-sheet-body { padding: 22px 30px 26px; display: flex; flex-direction: column; }
.g-lead { margin: 0; font-size: 18px; line-height: 1.5; color: var(--ink); }
:root[lang|="ar"] .g-lead { line-height: 1.75; }

.g-bullets { margin: 14px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.g-bullets li { display: flex; gap: 14px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: #2f333b; }
.g-bullets li::before { content: ''; flex: 0 0 auto; margin-top: 0.62em; width: 8px; height: 8px; border-radius: 1px; background: var(--gold); transform: rotate(45deg); }
:root[lang|="ar"] .g-bullets li { line-height: 1.7; }

.g-links { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; }
.g-link {
  min-height: 40px;
  padding: 0 16px;
  border: 1.5px solid var(--gold-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.g-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

.g-qr { margin-top: 16px; display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: 16px; background: var(--gold-wash); }
.g-qr img { width: 104px; height: 104px; flex: 0 0 auto; padding: 6px; border-radius: 10px; background: #ffffff; }
.g-qr p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: #2f333b; }
.g-contact { margin: 16px 0 0; font-size: 16px; color: var(--muted-2); }
.g-contact bdi { font-weight: 600; color: var(--ink); }

.g-ask { margin-top: 20px; display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.g-ask .g-primary { margin-top: 0; min-height: 56px; justify-content: center; border-radius: 16px; font-size: 18px; }
.g-ask .g-primary svg { width: 20px; height: 20px; }
.g-ask small { text-align: center; font-size: 14px; line-height: 1.4; color: var(--muted-2); }

/* Speech bubbles (rendered by app.js) */
/* Bubbles keep their side in both languages: Hind's takes the name's place on the left, and the
   visitor's sits on the right below the language and microphone buttons. */
/* Hind's bubbles are compact and tucked against the screen edge, so they only overlap her arm.
   A bubble hands over after about eighteen words (moc.html), keeping it a few lines tall. They
   start below her chin (about 440px on the stage) so they never cover her face. */
.g-avatar-speech {
  position: absolute;
  z-index: 6;
  left: 24px;
  top: 500px;
  width: 420px;
}

.speech-bubble { box-sizing: border-box; animation: g-bubble-in 0.26s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.avatar-message {
  padding: 18px 22px 20px;
  border-radius: 22px;
  border-bottom-left-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 16px 36px rgba(22, 24, 29, 0.14);
  font-size: 18px;
  line-height: 1.42;
  font-weight: 500;
}

.avatar-message::before,
.g-user-speech::before {
  content: var(--speaker-label);
  display: block;
  flex-basis: 100%;
  margin-bottom: 6px;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--gold-text);
}

.g-user-speech {
  position: absolute;
  z-index: 6;
  right: 40px;
  top: 900px;
  width: 340px;
  padding: 16px 20px 18px;
  border-radius: 22px;
  border-bottom-right-radius: 8px;
  background: var(--ink);
  color: #ffffff;
  box-shadow: 0 16px 36px rgba(22, 24, 29, 0.22);
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
}

.g-user-speech::before { content: var(--visitor-label); color: #e2c27e; }
:root[lang|="ar"] .avatar-message, :root[lang|="ar"] .g-user-speech { line-height: 1.7; }
:root[lang|="ar"] .avatar-message::before, :root[lang|="ar"] .g-user-speech::before { letter-spacing: 0; font-size: 15px; }

.spoken-word {
  display: inline-block;
  clip-path: inset(0);
  animation: g-letters-in var(--reveal-duration, 240ms) steps(var(--character-count, 4), end) both;
  --reveal-start: inset(0 100% 0 0);
}

.avatar-message.is-rtl.has-word-animation { display: flex; flex-flow: row wrap; direction: rtl; justify-content: flex-start; gap: 0.12em 0.3em; }
.avatar-message.is-rtl.has-word-animation > .spoken-word { --reveal-start: inset(0 0 0 100%); }
.spoken-ltr-run { display: inline-flex; direction: ltr; gap: 0.3em; }


[data-screen="section"] .g-avatar-speech,
[data-screen="section"] .g-user-speech { visibility: hidden; }

/* Footnote */
/* Hind's dark abaya sits behind the footnote, so it reads on a light pill. */
.g-footnote {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 1600px;
  width: max-content;
  max-width: 960px;
  margin: 0;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  transform: translateX(-50%);
  text-align: center;
  font-size: 17px;
  line-height: 1.4;
  color: #4a4e57;
}

/* Start gate (kept for app.js; the kiosk connects without it) */
.start-gate {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(236, 235, 232, 0.9);
  backdrop-filter: blur(6px);
}

.start-card {
  width: 700px;
  box-sizing: border-box;
  padding: 56px 56px 60px;
  border-radius: 36px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(22, 24, 29, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.start-logo { height: 110px; width: auto; }
.start-card h1 { margin: 34px 0 0; font-size: 52px; line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; }
.start-title-ar { margin: 8px 0 0; font-family: var(--font-ar); font-size: 36px; font-weight: 700; }
#start-message { margin: 22px 0 0; font-size: 22px; line-height: 1.5; color: var(--muted); }

.start-avatar {
  margin-top: 40px;
  min-height: 84px;
  padding: 0 44px;
  border: 0;
  border-radius: 999px;
  background: var(--gold);
  color: #ffffff;
  font-size: 26px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(182, 138, 53, 0.32);
}

.start-avatar:disabled { opacity: 0.5; cursor: wait; }
.start-avatar svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.start-loading { margin-top: 40px; display: flex; align-items: center; gap: 16px; font-size: 22px; }
.start-spinner { width: 34px; height: 34px; border-radius: 50%; border: 4px solid var(--gold-tint); border-top-color: var(--gold); animation: g-spin 0.9s linear infinite; }
.start-retry { margin-top: 34px; min-height: 64px; padding: 0 34px; border: 2px solid var(--gold); border-radius: 999px; background: transparent; color: var(--gold-text); font-size: 22px; font-weight: 700; cursor: pointer; }

/* Language menu */
.language-menu { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; }
.language-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(14, 12, 10, 0.5); animation: g-fade 0.2s ease both; }

.language-panel {
  position: relative;
  width: 640px;
  box-sizing: border-box;
  padding: 36px 36px 32px;
  border-radius: 32px;
  background: var(--surface);
  box-shadow: 0 30px 70px rgba(10, 8, 6, 0.35);
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: g-sheet-pop 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.language-panel-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.language-eyebrow { font-size: 15px; font-weight: 700; letter-spacing: 0.1em; color: var(--gold-text); text-transform: uppercase; }
.language-panel h1 { margin: 6px 0 0; font-size: 34px; font-weight: 800; }
.language-title-reveal { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: start; cursor: default; }
.language-close { width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #f1efec; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.language-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.language-options { display: flex; flex-direction: column; gap: 12px; }

.language-option {
  min-height: 88px;
  box-sizing: border-box;
  padding: 0 26px;
  border: 2px solid #e6e3de;
  border-radius: 22px;
  background: var(--surface);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: start;
  cursor: pointer;
}

.language-option[aria-selected="true"] { border-color: var(--gold); background: var(--gold-wash); }
.language-name { display: flex; flex-direction: column; gap: 2px; }
.language-name strong { font-size: 26px; font-weight: 700; }
.language-name strong[lang="ar"] { font-family: var(--font-ar); }
.language-name small { font-size: 17px; color: var(--muted-2); }
.locale-code { font-size: 17px; font-weight: 700; color: var(--muted-2); }
.language-option[aria-selected="true"] .locale-code { color: var(--gold-text); }
.voice-selector { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 4px; }
.voice-option { min-height: 48px; padding: 0 20px; border: 1.5px solid var(--gold-line); border-radius: 999px; background: var(--gold-wash); color: var(--ink); font-size: 17px; font-weight: 600; cursor: pointer; }
.voice-option[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: #ffffff; }
.voice-option:disabled { opacity: 0.45; }

@keyframes g-listening { 50% { box-shadow: 0 0 0 16px rgba(182, 138, 53, 0.2), 0 0 0 32px rgba(182, 138, 53, 0.07), 0 8px 22px rgba(22, 24, 29, 0.2); } }
@keyframes g-processing { from { opacity: 1; } to { opacity: 0.55; } }
@keyframes g-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes g-fade { from { opacity: 0; } }
@keyframes g-sheet-in { from { opacity: 0; transform: translateY(calc(-50% + 24px)) scale(0.98); } }
@keyframes g-sheet-pop { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes g-bubble-in { from { opacity: 0; transform: translateY(8px) scale(0.97); } }
@keyframes g-letters-in { from { clip-path: var(--reveal-start); } to { clip-path: inset(0); } }
@keyframes g-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* Six languages sit in two columns so the menu stays compact. */
.language-options[data-language-panel="main"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.language-name strong[lang="ur"] { font-family: var(--font-ar); }