/* Inter (variable, weights 400–800), self-hosted: the app works offline and never calls a font CDN. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(vendor/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(vendor/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ================================================================
   Syumra Simulator — Premium UI Redesign
   ================================================================ */

/* ========== RESET & BASE ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  height: 100%; overflow: hidden;
  background: #0B0F1A;
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e9edf5;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
  user-select: none;
}

canvas { display: block; touch-action: none; }
#scene { contain: strict; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ========== SHARED BUTTON STYLES ========== */
/* ── <ui-icon> (src/icons.js): line icons in place of emoji; take the text colour, sized per place below ── */
ui-icon { display: inline-flex; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em; line-height: 0; }
ui-icon svg { display: block; width: 100%; height: 100%; overflow: visible; }

.btn {
  font: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 20px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #e9edf5;
  transition: background 0.18s, transform 0.1s, opacity 0.2s, box-shadow 0.2s;
}
.btn:hover:not(:disabled) { background: rgba(255,255,255,0.13); }
.btn:active:not(:disabled) { transform: scale(0.97); }
.btn:disabled { opacity: 0.3; cursor: not-allowed; }

.btn.primary {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: #10B981;
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.btn.primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
.btn.primary.pulse { animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
}

.btn.outline {
  background: transparent;
  border-color: rgba(255,255,255,0.15);
  color: #c8d4e2;
}
.btn.outline:hover:not(:disabled) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.25);
}

.btn.ghost {
  background: transparent;
  border-color: transparent;
  color: #7d8fa6; font-size: 13px; padding: 8px 12px;
}
.btn.ghost:hover { color: #a9b8cc; }

.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(12,18,30,0.7);
  backdrop-filter: blur(12px);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, border-color 0.2s;
  color: #e9edf5;
}
.icon-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.2);
}
.icon-btn.active {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.6);
  color: #34d399;
}

/* Near facility hint chip */
.near-hint {
  position: fixed;
  bottom: 84px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15, 23, 42, 0.92);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 9999px;
  border: 1px solid rgba(16, 185, 129, 0.5);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  z-index: 900;
  max-width: 85vw;
  text-align: center;
}
.near-hint.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* ========== CREATOR SCREEN ========== */
/* Design tokens live on #creator (dark default; body.theme-light #creator redefines them further down), so every
   creator rule below reads colours from here instead of hard-coding them. The Hajj plugin's selector
   (src/hajj/ui-selector.js) uses the same tokens. */
#creator {
  /* column widths, shared by the body and the studio deck (which keeps to the space between the columns) */
  --cr-pad: 48px; --cr-card: 400px; --cr-hero: 400px; --cr-gap: 24px;
  --cr-top: 12px; --cr-bottom: 12px;   /* card clearance inside the body */
  --cr-sheet: min(56vh, 540px);   /* height of the form sheet in the phone layout */

  /* colour */
  --cr-accent: #4fd1a5;                       /* emerald: selected state, focus, links, icons */
  --cr-accent-soft: rgba(79, 209, 165, 0.15);
  --cr-accent-glow: rgba(79, 209, 165, 0.30);
  --cr-cta: #4fd1a5; --cr-cta-hover: #6adcb5; --cr-cta-ink: #05231a;   /* filled primary button + its ink (9:1) */
  --cr-warn: #f2c14e;                         /* amber is reserved for "this has a consequence" (Hajj Dam), not for selection */
  --cr-text: #eef2f8;                         /* titles, control text */
  --cr-text-2: #b9c5d6;                       /* body copy */
  --cr-text-3: #9aa8bd;                       /* captions, Arabic twins, hints: >= 4.5:1 on every creator surface */
  --cr-line: rgba(255, 255, 255, 0.16);       /* idle control border */
  --cr-line-strong: rgba(255, 255, 255, 0.34);   /* input border (3:1), hover border */
  --cr-line-faint: rgba(255, 255, 255, 0.08); /* dividers */
  --cr-fill: rgba(255, 255, 255, 0.05);
  --cr-fill-hover: rgba(255, 255, 255, 0.10);
  --cr-surface: rgba(12, 18, 30, 0.92);
  --cr-surface-solid: #0c121e;
  --cr-ring: #8ff0cd;                         /* keyboard focus ring */
  --cr-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  --cr-deck-bg: rgba(12, 18, 30, 0.88);
  --cr-deck-line: rgba(255, 255, 255, 0.14);
  --cr-deck-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(79, 209, 165, 0.12);
  --cr-frame: rgba(255, 255, 255, 0.26);      /* the stage's viewfinder brackets */
  --cr-hero-bg: rgba(12, 18, 30, 0.55);       /* glass panel behind the hero copy: keeps it legible over whatever the scene draws */
  --cr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2305231a' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");   /* check on the selected badge: dark ink on mint */
  --cr-hint-bg: rgba(7, 10, 16, 0.65);
  --cr-chip-shadow: none;

  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse 55% 65% at 42% 52%, rgba(7,10,16,0.15) 0%, rgba(7,10,16,0.92) 60%);
  transition: opacity 0.7s ease, visibility 0.7s;
}
#creator.hide { opacity: 0; visibility: hidden; pointer-events: none; }

/* Hide gameplay HUD while creator is active */
#creator:not(.hide) ~ #topbar,
#creator:not(.hide) ~ #sidebar,
#creator:not(.hide) ~ #infoPanel,
#creator:not(.hide) ~ #controlsHint,
#creator:not(.hide) ~ #joystick {
  display: none !important;
}

/* One visible keyboard focus style for everything in the creator (the old rules left only the browser default,
   and #nameInput had `outline: none`). */
#creator :is(button, input, [tabindex]):focus-visible {
  outline: 2px solid var(--cr-ring); outline-offset: 2px;
}

/* Creator top bar */
.creator-topbar .lang-pill, .creator-topbar .auth-btn { height: 40px; }
.creator-topbar .theme-toggle-btn { width: 40px; height: 40px; }
.creator-topbar {
  display: flex; align-items: center;
  padding: 12px 28px;
  border-bottom: 1px solid var(--cr-line-faint);
  gap: 16px;
  flex-shrink: 0;
}

.creator-brand {
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.creator-brand > div { min-width: 0; }
.brand-icon { font-size: 22px; }
.brand-logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.brand-title {
  font-size: 12px; font-weight: 800;
  letter-spacing: 0.14em; color: #FFFFFF;
  transition: color 0.25s ease;
}
.brand-sub { font-size: 12px; color: var(--cr-text-3); }

.creator-steps-track {
  display: flex; align-items: flex-start;
  flex: 1; justify-content: center; min-width: 0;
  gap: 0;
}

.cstep {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px; padding: 0 4px;
}
.cstep-num {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  background: var(--cr-fill);
  border: 2px solid var(--cr-line);
  color: var(--cr-text-3);
  transition: all 0.3s;
}
.cstep.active .cstep-num {
  background: var(--cr-cta); border-color: var(--cr-cta); color: var(--cr-cta-ink);
  box-shadow: 0 0 16px var(--cr-accent-glow);
}
.cstep-label {
  font-size: 12px; font-weight: 500;
  color: var(--cr-text-3); text-align: center; white-space: nowrap;
}
.cstep.active .cstep-label { color: var(--cr-text); font-weight: 700; }

.cstep-line {
  flex: 0 1 16px; min-width: 6px; height: 2px;
  background: var(--cr-line);
  margin: 14px 2px 0;
}

.creator-basmala {
  font-size: 15px; color: var(--cr-text-3);
  direction: rtl; flex-shrink: 0;
  font-style: italic;
}

/* Creator body — three columns */
.creator-body {
  position: relative;
  display: flex; align-items: center;
  justify-content: space-between;
  flex: 1; min-height: 0; padding: 0 var(--cr-pad);
  gap: var(--cr-gap); overflow: hidden;
  cursor: grab;   /* the empty stage (and the hero text) rotates the character: window pointerdown in creator.js */
}
.creator-body:active { cursor: grabbing; }
/* The stage: four viewfinder brackets frame the space between the columns (the drag area). It is decoration only and
   takes no pointer events (dragging the stage must keep working). A light/glow overlay was tried and dropped: the
   overlay sits above the WebGL canvas, so it tints the character itself (skin tone!), which a character creator
   cannot afford. */
.creator-body::before {
  --b: var(--cr-frame);
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: 12px; bottom: 12px;
  inset-inline: calc(var(--cr-pad) + var(--cr-hero) + var(--cr-gap)) calc(var(--cr-pad) + var(--cr-card) + var(--cr-gap));   /* logical: the hero is on the other side in Arabic */
  background:
    linear-gradient(var(--b), var(--b)) 0 0 / 22px 2px,    linear-gradient(var(--b), var(--b)) 0 0 / 2px 22px,
    linear-gradient(var(--b), var(--b)) 100% 0 / 22px 2px, linear-gradient(var(--b), var(--b)) 100% 0 / 2px 22px,
    linear-gradient(var(--b), var(--b)) 0 100% / 22px 2px, linear-gradient(var(--b), var(--b)) 0 100% / 2px 22px,
    linear-gradient(var(--b), var(--b)) 100% 100% / 22px 2px, linear-gradient(var(--b), var(--b)) 100% 100% / 2px 22px;
  background-repeat: no-repeat;
  border-radius: 6px;
}

.creator-left {
  flex: 0 1 var(--cr-hero); z-index: 2; cursor: auto;
  padding: 24px; border-radius: 20px;
  background: var(--cr-hero-bg); border: 1px solid var(--cr-line-faint);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  animation: fadeInLeft 0.9s ease;
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.hero-ar {
  font-size: clamp(34px, 2.3vw, 42px); font-weight: 800; color: var(--cr-text);
  direction: rtl; text-align: left;
  line-height: 1.35; margin-bottom: 4px;
}
.hero-en {
  font-size: clamp(22px, 1.5vw, 26px); font-weight: 700; color: var(--cr-text);
  line-height: 1.2; margin-bottom: 20px;
}
.hero-en::after {   /* short accent rule: anchors the heading and separates it from the copy */
  content: ""; display: block; width: 44px; height: 3px; margin-top: 14px;
  border-radius: 2px; background: var(--cr-accent);
}
.hero-desc-ar {
  font-size: 15px; color: var(--cr-text-2);
  direction: rtl; text-align: left;
  line-height: 1.8; margin-bottom: 8px;
}
.hero-desc-en {
  font-size: 15px; color: var(--cr-text-2);
  line-height: 1.65;
}

/* Creator right — form card */
.creator-right {
  flex: 0 0 var(--cr-card); min-width: 0; z-index: 2; cursor: auto;
  align-self: stretch; min-height: 0;   /* full body height: the card never grows past it */
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--cr-top) 0 var(--cr-bottom);
  animation: fadeInRight 0.9s ease;
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.creator-card {
  background: var(--cr-surface);
  border: 1px solid var(--cr-line);
  border-radius: 20px;
  backdrop-filter: blur(24px);
  box-shadow: var(--cr-shadow);
  display: flex; flex-direction: column;
  max-height: 100%; min-height: 0; overflow: hidden;
}
/* the fields scroll when the window is short; the start button below them is always visible.
   Bottom padding + a fade on the last 28px: the last field always ends above the fade, and while more is below the
   fields visibly dissolve into the card edge (a scroll cue that needs no script and vanishes when nothing overflows). */
.creator-card-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  scrollbar-gutter: stable;   /* the 8px scrollbar column is always reserved, so fields line up with the start button whether or not it scrolls */
  padding-block: 22px 30px; padding-inline: 24px 16px;   /* inline-end = 24 minus that 8px column */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
}
.creator-card-scroll::-webkit-scrollbar { width: 8px; }
.creator-card-scroll::-webkit-scrollbar-track { background: transparent; }
.creator-card-scroll::-webkit-scrollbar-thumb { background: var(--cr-line-strong); border-radius: 4px; }
.creator-card-scroll::-webkit-scrollbar-thumb:hover { background: var(--cr-text-3); }
@supports not selector(::-webkit-scrollbar) {
  .creator-card-scroll { scrollbar-width: thin; scrollbar-color: var(--cr-line-strong) transparent; }
}
.creator-card-actions {
  flex-shrink: 0;
  padding: 12px 24px 18px;
  border-top: 1px solid var(--cr-line-faint);
}

.creator-card-top {
  display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
  align-items: start; margin-bottom: 18px;
}
/* titles beside the avatar, subtitles full width below it */
.creator-card-top > div:first-child { display: contents; }
.card-title-ar, .card-title { grid-column: 1; }
.card-sub-ar, .card-sub { grid-column: 1 / -1; }
.card-avatar { grid-column: 2; grid-row: 1 / span 2; }
.card-title-ar {
  font-size: 14px; font-weight: 600; color: var(--cr-accent);
  direction: rtl; text-align: left; margin-bottom: 2px;
}
.card-title {
  font-size: 22px; font-weight: 700; color: var(--cr-text);
  margin-bottom: 4px; line-height: 1.2;
}
.card-sub-ar {
  font-size: 13px; color: var(--cr-text-3);
  direction: rtl; text-align: left; margin-bottom: 2px;
}
.card-sub { font-size: 12.5px; line-height: 1.45; color: var(--cr-text-3); }

.card-avatar {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--cr-accent-soft);
  border: 1px solid var(--cr-accent);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: border-color 0.25s, transform 0.2s;
}
.card-avatar:hover { transform: scale(1.04); }

/* Creator fields. Each label row is "LATIN LABEL ........ arabic twin": the Latin label leads, the Arabic twin sits
   at the far end of the row in a quieter colour but at a legible size (13.5 px: Arabic script needs more height than
   Latin to read the same). The label is a flex row, so a label without a twin (the Hajj plugin's) simply leads. */
.creator-field { margin-bottom: 14px; }
.creator-field label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--cr-text-2); margin-bottom: 7px;
}
.label-ar {
  order: 2; margin: 0;
  font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--cr-text-3);
  direction: rtl; unicode-bidi: isolate;
}

#nameInput {
  width: 100%; min-height: 46px; font: inherit; font-size: 15px; font-weight: 600;
  padding: 10px 14px;
  background: var(--cr-fill);
  border: 1px solid var(--cr-line-strong);
  border-radius: 12px; color: var(--cr-text); outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
#nameInput:focus { border-color: var(--cr-accent); box-shadow: 0 0 0 3px var(--cr-accent-soft); }
#nameInput:focus-visible { outline: 2px solid var(--cr-ring); outline-offset: 1px; }

/* Option buttons: one component for gender, outfit, family, facial hair and the Hajj plugin's segmented control
   (.hajj-seg-btn is pressed via aria-pressed, the others via .active). Selected = tinted fill + accent border +
   accent text + a check badge, so the state never relies on colour alone. */
.gender-btn, .outfit-btn, .family-btn, .beard-btn, .hajj-seg-btn {
  position: relative;
  flex: 1; min-width: 0; min-height: 46px; font: inherit; color: var(--cr-text);
  padding: 8px 10px;
  background: var(--cr-fill);
  border: 1px solid var(--cr-line);
  border-radius: 12px; cursor: pointer;
  transition: background 0.18s, border-color 0.18s, color 0.18s, box-shadow 0.18s, transform 0.1s;
}
.gender-btn:hover, .outfit-btn:hover, .family-btn:hover, .beard-btn:hover, .hajj-seg-btn:hover {
  background: var(--cr-fill-hover); border-color: var(--cr-line-strong);
}
.gender-btn:active, .outfit-btn:active, .family-btn:active, .beard-btn:active, .hajj-seg-btn:active { transform: scale(0.98); }
.gender-btn.active, .outfit-btn.active, .family-btn.active, .beard-btn.active, .hajj-seg-btn[aria-pressed="true"] {
  background: var(--cr-accent-soft);
  border-color: var(--cr-accent); color: var(--cr-accent);
  box-shadow: inset 0 0 0 1px var(--cr-accent), 0 0 14px var(--cr-accent-soft);
}
.gender-btn.active::after, .outfit-btn.active::after, .family-btn.active::after, .beard-btn.active::after,
.hajj-seg-btn[aria-pressed="true"]::after {
  content: ""; position: absolute; top: 5px; inset-inline-end: 5px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cr-accent) var(--cr-tick) center / 10px no-repeat;
  pointer-events: none;
}

.gender-row, .outfit-row, .family-row, .beard-row { display: flex; gap: 8px; }

.gender-btn {
  font-size: 13.5px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.gender-ar { order: 2; font-size: 14px; font-weight: 500; color: var(--cr-text-3); }
.gender-btn.active .gender-ar { color: inherit; opacity: 0.85; }

/* Studio Deck Controls (Center Viewport) */
.creator-center {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 10;
  pointer-events: none;
}

.studio-deck {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--cr-deck-bg);
  border: 1px solid var(--cr-deck-line);
  border-radius: 999px;
  padding: 5px 8px;
  backdrop-filter: blur(20px);
  box-shadow: var(--cr-deck-shadow);
  pointer-events: auto;
}

.deck-group {
  display: flex;
  align-items: center;
  gap: 3px;
}

.deck-divider {
  width: 1px;
  height: 18px;
  background: var(--cr-deck-line);
  margin: 0 3px;
}

.cam-btn, .view-btn, .anim-btn {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  min-height: 32px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--cr-fill);
  border: 1px solid var(--cr-line-faint);
  color: var(--cr-text-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.cam-btn:hover, .view-btn:hover, .anim-btn:hover {
  background: var(--cr-fill-hover);
  color: var(--cr-text);
  border-color: var(--cr-line-strong);
}

/* One accent for "selected" across all three deck groups. (The motion group used amber, which read as a warning and
   was the only off-palette colour on the screen; amber now belongs to Hajj's Dam badge alone.) */
.cam-btn.active, .view-btn.active, .anim-btn.active {
  background: var(--cr-accent-soft);
  border-color: var(--cr-accent);
  color: var(--cr-accent);
  box-shadow: 0 0 12px var(--cr-accent-soft);
}

.cam-zoom-btn {
  padding: 6px 10px;
  font-weight: 700;
}
.cam-zoom-btn ui-icon { width: 15px; height: 15px; }
.view-hint .inline-icon { width: 13px; height: 13px; vertical-align: -2px; margin: 0 1px; }

.view-hint {
  font-size: 12px;
  color: var(--cr-text-3);
  letter-spacing: 0.02em;
  background: var(--cr-hint-bg);
  padding: 4px 14px;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  pointer-events: auto;
  user-select: none;
}

/* Wide screens: keep the deck between the hero column and the form card. Each group becomes its own
   pill so the deck can wrap onto a second row without leaving an empty frame. */
@media (min-width: 1440px) {
  .creator-center {
    top: 38px;   /* below the stage's top brackets */
    left: auto; right: auto;   /* reset the centred default so the logical offsets below apply in both directions */
    inset-inline: calc(var(--cr-pad) + var(--cr-hero) + var(--cr-gap)) calc(var(--cr-pad) + var(--cr-card) + var(--cr-gap));
    transform: none;
  }
  .studio-deck {
    flex-wrap: wrap; justify-content: center; gap: 6px 8px; padding: 0;
    background: none; border: none; box-shadow: none; backdrop-filter: none;
    pointer-events: none;
  }
  .deck-divider { display: none; }
  .deck-group {
    pointer-events: auto;
    padding: 4px 5px;
    background: var(--cr-deck-bg);
    border: 1px solid var(--cr-deck-line);
    border-radius: 999px;
    backdrop-filter: blur(20px);
    box-shadow: var(--cr-deck-shadow);
  }
  .view-hint { text-align: center; }
}
/* Narrower screens: the deck spans the width, so the card starts below it */
@media (max-width: 1439px) {
  #creator { --cr-top: 96px; }
  .creator-body::before { top: 104px; }   /* the deck spans the width up there: the stage frame starts below it */
  .creator-left { margin-top: var(--cr-top); }   /* ... and so does the hero panel */
  .deck-group, .deck-divider { flex-shrink: 0; }
}

/* Outfit Style Selector: icon over label, the Arabic term as a quiet second line */
.outfit-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;   /* top-aligned: the icons line up across buttons */
  gap: 5px; padding: 9px 6px; text-align: center;
}
.outfit-icon { width: 20px; height: 20px; }
.outfit-meta { display: flex; flex-direction: column-reverse; align-items: center; min-width: 0; gap: 1px; }
.outfit-ar { font-size: 12.5px; color: var(--cr-text-3); line-height: 1.25; margin: 0; }
.outfit-label { font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center; }
.outfit-btn.active .outfit-ar { color: inherit; opacity: 0.85; }

/* Family Companion Selector */
.family-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  gap: 5px; padding: 9px 6px;
}
.family-icon { width: 22px; height: 22px; }
.family-label { font-size: 12.5px; font-weight: 600; text-align: center; line-height: 1.25; }

/* Child picker: a segmented control under the family buttons while "Family & Child" is selected */
.child-row { margin-top: 8px; animation: childRowIn 0.22s ease; }
.child-row[hidden] { display: none; }
@keyframes childRowIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.child-seg {
  display: flex; gap: 3px; padding: 3px;
  background: var(--cr-fill);
  border: 1px solid var(--cr-accent);
  border-radius: 12px;
}
.child-btn {
  flex: 1; min-width: 0; min-height: 36px; font: inherit; font-size: 12.5px; font-weight: 600;
  padding: 5px 4px; border-radius: 9px;
  background: transparent; border: 1px solid transparent; color: var(--cr-text-2);
  cursor: pointer; transition: all 0.2s;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  white-space: nowrap;
}
.child-btn:hover { background: var(--cr-fill-hover); color: var(--cr-text); }
.child-btn.active { background: var(--cr-accent-soft); border-color: var(--cr-accent); color: var(--cr-accent); }
.child-icon { width: 16px; height: 16px; }

/* Facial Hair (Beard) Selector: label with the Arabic term as a quiet second line */
.beard-btn {
  font-size: 13px; font-weight: 600;
  display: flex; flex-direction: column-reverse;
  align-items: center; justify-content: center; gap: 1px;
}
.beard-ar { font-size: 12.5px; font-weight: 500; color: var(--cr-text-3); }
.beard-btn.active .beard-ar { color: inherit; opacity: 0.85; }

/* Colour swatches: a grid that always fits one row of 7 cloth colours at card width (the old flex row wrapped the
   seventh swatch onto its own line) and keeps every swatch a square, reachable target. */
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 8px; }
.swatch {
  position: relative;
  aspect-ratio: 1; min-height: 38px; border-radius: 12px;
  border: 2px solid var(--cr-line);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, box-shadow 0.2s;
}
.swatch:hover { transform: scale(1.06); border-color: var(--cr-line-strong); }
.swatch.active {
  border-color: var(--cr-surface-solid);
  box-shadow: 0 0 0 2px var(--cr-accent), 0 0 12px var(--cr-accent-glow);
}
.swatch.active::after {   /* check on a dark chip: legible on pale and dark swatches alike */
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(5, 35, 26, 0.72) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E") center / 11px no-repeat;
  pointer-events: none;
}

/* Primary action: the only filled button on the screen */
.start-btn {
  width: 100%; min-height: 56px; font: inherit;
  padding: 10px 14px;
  background: var(--cr-cta); color: var(--cr-cta-ink);
  border: none; border-radius: 14px; cursor: pointer;
  box-shadow: 0 8px 22px var(--cr-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
}
.start-ar { font-size: 14px; font-weight: 600; }
.start-en { font-size: 16px; font-weight: 700; }
.start-btn:hover { background: var(--cr-cta-hover); box-shadow: 0 10px 28px var(--cr-accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.start-btn:active { transform: scale(0.98); }

/* Creator disclaimer: one line (Arabic + English side by side) instead of two stacked 11 px lines */
.creator-disclaimer {
  display: flex; align-items: center;
  gap: 12px; padding: 10px 28px;
  border-top: 1px solid var(--cr-line-faint);
  flex-shrink: 0;
}
.creator-disclaimer > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; min-width: 0; }
.disc-icon {
  font-size: 15px; color: var(--cr-text-3); flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--cr-fill);
  border: 1px solid var(--cr-line);
  display: flex; align-items: center; justify-content: center;
}
.disc-ar {
  font-size: 13px; color: var(--cr-text-3);
  direction: rtl; text-align: left;
}
.disc-en { font-size: 12px; color: var(--cr-text-3); unicode-bidi: plaintext; }   /* plaintext: in the Arabic UI the Latin sentence keeps its full stop on the right */

/* ---- Creator responsive ---- */
/* Medium-wide windows: the stepper loses a little air before the right-hand controls do */
@media (max-width: 1500px) {
  .creator-basmala { display: none; }
}
@media (max-width: 1240px) {
  .cstep-label { font-size: 11.5px; }
  .cstep { padding: 0 2px; }
}

/* Short windows: tighter card and chrome, so the form still fits without scrolling on most laptops */
@media (max-height: 960px) {
  #creator { --cr-bottom: 8px; }
  .creator-topbar { padding-top: 8px; padding-bottom: 8px; }
  .creator-disclaimer { padding-top: 6px; padding-bottom: 6px; }
  .creator-card-scroll { padding-block: 18px 26px; padding-inline: 22px 14px; }
  .creator-card-actions { padding: 10px 22px 14px; }
  .creator-card-top { margin-bottom: 12px; }
  .card-title { font-size: 20px; }
  .card-sub-ar, .card-sub { display: none; }   /* the title already says it */
  .creator-field { margin-bottom: 11px; }
  .creator-field label { margin-bottom: 5px; }
  #nameInput { min-height: 42px; padding: 8px 12px; }
  .gender-btn, .outfit-btn, .family-btn, .beard-btn, .hajj-seg-btn { min-height: 42px; }
  .gender-btn { padding: 7px 8px; }
  .outfit-btn, .family-btn { padding: 7px 6px; gap: 3px; }
  .beard-btn { padding: 6px 8px; }
  .swatches { gap: 7px; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); }
  .swatch { min-height: 34px; border-radius: 10px; }
  .start-btn { min-height: 52px; padding: 8px 14px; }
  .explore-entry-btn.explore-entry-panel { margin-top: 0; }
}
@media (min-width: 1440px) and (max-height: 960px) {
  #creator { --cr-top: 8px; }
}
@media (max-height: 860px) {
  /* option-level Arabic gives way first (the field label keeps its Arabic twin), so the form still fits at 800 px */
  .outfit-ar, .beard-ar { display: none; }
  .creator-field { margin-bottom: 9px; }
  .creator-card-top { margin-bottom: 10px; }
}
@media (max-height: 820px) {
  .creator-card-scroll { padding-block: 14px 24px; }
  .creator-card-actions { padding-top: 8px; padding-bottom: 12px; }
  .start-btn { min-height: 48px; padding-block: 6px; }
  .creator-topbar { padding-top: 5px; padding-bottom: 5px; }
  .creator-disclaimer { padding-top: 4px; padding-bottom: 4px; }
  .creator-field { margin-bottom: 7px; }
  .creator-field label { margin-bottom: 4px; }
  .outfit-btn, .family-btn { padding: 6px 6px; gap: 2px; }
  .swatches { grid-template-columns: repeat(auto-fill, minmax(32px, 1fr)); }
  .swatch { min-height: 32px; }
}
@media (max-height: 760px) {
  .creator-left { padding: 16px 20px; }
  .hero-desc-ar { display: none; }   /* the Arabic description gives way first on short windows (the Arabic heading stays) */
  .hero-en { margin-bottom: 14px; }
  .hero-desc-en + .explore-entry-hero { margin-top: 14px; }
  .explore-entry-hero { margin-top: 8px; padding-block: 8px; }
}
@media (min-height: 1000px) {
  .card-sub-ar { display: block; }
}
@media (min-width: 1280px) {
  #creator { --cr-card: 420px; }   /* wide enough that the family / outfit labels wrap less */
}
@media (min-width: 1600px) {
  #creator { --cr-card: 436px; --cr-hero: 420px; }
}
@media (max-width: 1599px) {
  .cam-btn, .view-btn, .anim-btn { padding-inline: 9px; }   /* keeps the deck's framing + angle groups on one row at 1440 */
}

/* Tablet / small laptop (<= 1100): the hero column goes; the form card stays on the right so the character stays
   visible on the left, instead of the card covering it as before. */
@media (max-width: 1100px) {
  #creator { --cr-pad: 24px; --cr-card: 380px; }
  .creator-left { display: none; }
  .creator-body::before { inset-inline-start: var(--cr-pad); }
  .creator-body { justify-content: flex-end; }
  .creator-right { flex: 0 1 var(--cr-card); }
  .creator-steps-track { display: none; }
  /* the deck scrolls sideways instead of running off screen; the edges fade so scrolled-off pills are not a surprise */
  .creator-center { left: 12px; right: 12px; transform: none; }
  .studio-deck {
    max-width: 100%; overflow-x: auto; touch-action: pan-x; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 22px), transparent);
  }
  .studio-deck::-webkit-scrollbar { display: none; }
  .view-hint { text-align: center; }
  /* the three explore entries sit under the start button as one compact row (they were three full-width cards,
     which took 230 px of the card and left the form a 3-field window) */
  .creator-card-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .creator-card-actions .start-btn { grid-column: 1 / -1; }
}

/* The step track needs about 1180 px next to the brand and the controls: between 1100 and 1180 it was drawn over both. */
@media (max-width: 1180px) {
  .creator-steps-track { display: none; }
}

/* Phones and portrait tablets: the form becomes a bottom sheet and the stage is lifted into the space above it, so
   the character stays visible while it is being edited (it used to be completely hidden behind the card). */
@media (max-width: 900px) and (min-height: 600px) {
  #creator { --cr-pad: 12px; --cr-top: 0px; --cr-bottom: 8px; }
  .creator-body { align-items: flex-end; justify-content: center; }
  .creator-body::before { display: none; }   /* the sheet and the lifted stage need no frame on a phone */
  .creator-right {
    flex: 0 0 auto; width: 100%; max-width: 560px; align-self: flex-end;
    height: var(--cr-sheet); padding: 0;
    justify-content: flex-end;
  }
  .creator-card { max-height: none; height: 100%; border-radius: 18px 18px 14px 14px; }
  body:has(#creator:not(.hide)) #scene { transform: translateY(-22vh); transition: transform 0.5s ease; }
}
@media (max-width: 900px) and (min-height: 600px) and (prefers-reduced-motion: reduce) {
  body:has(#creator:not(.hide)) #scene { transition: none; }
}

/* Landscape phones / very short windows: no room for the drag hint; the card starts right under the deck */
@media (max-height: 600px) {
  #creator { --cr-top: 56px; --cr-bottom: 6px; --cr-card: 330px; }
  .view-hint { display: none; }
  .creator-topbar { padding-top: 4px; padding-bottom: 4px; }
  .creator-card-actions .explore-entry-panel { display: none; }   /* the form needs the room; the three entries are one rotation away */
  .creator-card-actions { padding-top: 8px; padding-bottom: 10px; }
}
@media (max-height: 460px) {
  .creator-card-top { display: none; }   /* landscape phone: the title gives its room to the fields */
}

@media (max-width: 640px) {
  #creator { --cr-pad: 12px; }
  .creator-topbar { padding: 8px 12px; gap: 8px; }
  .brand-sub { display: none; }
  .brand-title { max-width: 86px; line-height: 1.15; letter-spacing: 0.1em; }
  .creator-topbar-right { margin-inline-start: auto; gap: 8px; }
  .creator-topbar .lang-pill { padding: 0 10px; }
  .creator-topbar .lang-pill .lang-arrow { display: none; }
  /* the logged-in chip shows its avatar only (name and role badge are inline-styled, hence !important) */
  #creatorAuthBtn .auth-name, #creatorAuthBtn .auth-badge { display: none !important; }
  .creator-card { border-radius: 16px 16px 12px 12px; }
  .creator-card-scroll { padding-block: 16px 28px; padding-inline: 16px 8px; }
  .creator-card-actions { padding: 8px 16px 10px; gap: 6px; }
  .start-btn { min-height: 50px; padding-block: 6px; }
  .card-title { font-size: 20px; }
  .cam-btn, .view-btn, .anim-btn { min-height: 40px; padding: 6px 14px; font-size: 13px; }
  .cam-zoom-btn { padding: 6px 12px; }
  .view-hint { display: none; }
  #nameInput { font-size: 16px; }   /* 16 px stops iOS Safari from zooming the page on focus */
  .gender-btn, .outfit-btn, .family-btn, .beard-btn, .hajj-seg-btn { min-height: 46px; }
  .child-btn { min-height: 40px; }
  .swatches { gap: 6px; grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); }
  .swatch { min-height: 36px; }
  .creator-disclaimer { padding: 6px 12px; gap: 8px; }
  .creator-disclaimer > div { gap: 0 10px; }
}
@media (max-width: 640px) {
  .explore-entry-panel .explore-entry-main ui-icon { display: none; }   /* title-only row: ~30 px more room for the form in the sheet */
  .explore-entry-panel { min-height: 46px; }
}
@media (max-width: 400px) {
  .creator-topbar #creatorLoginLabel { display: none; }   /* icon-only sign-in on the narrowest phones (aria-label stays) */
  .creator-topbar .auth-btn { padding: 0 12px; }
}
@media (hover: none) {
  /* touch: no scrollbar column (the fade shows there is more), symmetric side padding */
  .creator-card-scroll { scrollbar-width: none; scrollbar-gutter: auto; padding-inline: 16px; }
  .creator-card-scroll::-webkit-scrollbar { display: none; }
}

/* Reduced motion: no entrance slides, pulses or hover growth inside the creator */
@media (prefers-reduced-motion: reduce) {
  #creator, #creator * { animation: none !important; transition-duration: 0.01ms !important; }
  .swatch:hover, .card-avatar:hover { transform: none; }
}

/* ========== ROUTE CHOICE MODAL ========== */
#choiceModal {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,12,0.78);
  backdrop-filter: blur(14px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s;
}
#choiceModal.show { opacity: 1; visibility: visible; }

.choice-card {
  width: min(480px, calc(100vw - 32px));
  background: rgba(12,18,30,0.96);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 24px;
  padding: 28px 26px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
  animation: slideUp 0.5s cubic-bezier(0.4,0,0.2,1);
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.choice-badge {
  display: inline-block;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4fd1a5;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(79,209,165,0.14);
  border: 1px solid rgba(79,209,165,0.4);
  margin-bottom: 12px;
}

.choice-title {
  font-size: 22px; font-weight: 700;
  line-height: 1.2; margin-bottom: 6px;
}
.choice-sub {
  font-size: 13px; color: #8fa3bf;
  line-height: 1.5; margin-bottom: 20px;
}

.choice-option {
  display: flex; align-items: flex-start;
  gap: 14px; width: 100%; text-align: left;
  padding: 16px; margin-bottom: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 16px; cursor: pointer;
  font: inherit; color: #e9edf5;
  transition: all 0.2s;
}
.choice-option:hover {
  background: rgba(79,209,165,0.1);
  border-color: #4fd1a5;
  transform: translateX(4px);
}
.choice-option:active { transform: translateX(2px) scale(0.99); }

.choice-emoji { font-size: 30px; flex-shrink: 0; }
.choice-body { flex: 1; min-width: 0; }
.choice-name {
  font-size: 15px; font-weight: 700;
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.choice-tag {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(79,209,165,0.14);
  color: #4fd1a5;
  border: 1px solid rgba(79,209,165,0.3);
}
.choice-tag.alt {
  background: rgba(217,180,90,0.12);
  color: #e2c37a;
  border-color: rgba(217,180,90,0.3);
}
.choice-text {
  font-size: 12.5px; line-height: 1.45; color: #a9b8cc;
}

/* ========== GAME TOP BAR ========== */
#topbar {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  z-index: 10;
  background: linear-gradient(to bottom, rgba(7,10,16,0.7) 0%, transparent 100%);
  pointer-events: none;
}
#topbar > * { pointer-events: auto; }

.topbar-left {
  display: flex; align-items: center; gap: 10px;
}
.topbar-icon { font-size: 20px; }
.topbar-logo-img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}
.topbar-brand {
  font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; color: #FFFFFF;
  transition: color 0.25s ease;
}
.topbar-sub {
  font-size: 11px; color: #7d8fa6;
  font-weight: 500;
}

.topbar-center {
  display: flex; flex-direction: column;
  align-items: center; gap: 6px;
}
.step-pill {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; color: #e9edf5;
  padding: 5px 16px; border-radius: 999px;
  background: rgba(12,18,30,0.8);
  border: 1px solid rgba(255,255,255,0.1);
  backdrop-filter: blur(12px);
}

.step-dots {
  display: flex; gap: 5px;
}

.dot {
  width: 22px; height: 5px; border-radius: 999px;
  border: none; padding: 0; cursor: pointer;
  background: rgba(255,255,255,0.15);
  transition: background 0.25s, width 0.25s;
  flex: 0 0 auto;
}
.dot:hover { background: rgba(255,255,255,0.35); }
.dot.active { background: #4fd1a5; width: 34px; }
.dot.done { background: rgba(79,209,165,0.45); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Glassmorphic Time-of-Day Switcher Pill */
.time-pill {
  display: flex;
  align-items: center;
  background: rgba(10, 16, 26, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.38);
}

.time-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  color: #8c9cb2;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  user-select: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

.time-btn:hover {
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
}

.time-btn.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(79, 209, 165, 0.26) 0%, rgba(217, 180, 90, 0.32) 100%);
  border: 1px solid rgba(217, 180, 90, 0.55);
  box-shadow: 0 2px 10px rgba(79, 209, 165, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}


/* ========== LEFT SIDEBAR ========== */
#sidebar {
  position: fixed; left: 0; top: 56px; bottom: 0;
  width: 220px;
  background: rgba(10,16,26,0.82);
  border-right: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  display: flex; flex-direction: column;
  padding: 20px 14px 14px;
  z-index: 10;
  overflow-y: auto;
  scrollbar-width: none;
}
#sidebar::-webkit-scrollbar { display: none; }

.sidebar-header { margin-bottom: 18px; padding: 0 4px; }
.sidebar-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; color: #5a6a7e;
  margin-bottom: 4px;
}
.sidebar-count {
  font-size: 13px; font-weight: 700; color: #e9edf5;
}

.sidebar-list {
  flex: 1; display: flex; flex-direction: column; gap: 2px;
}

.sidebar-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 8px; border-radius: 10px;
  cursor: pointer; transition: background 0.2s;
  position: relative;
}
.sidebar-item:hover { background: rgba(255,255,255,0.04); }
.sidebar-item.active { background: rgba(79,209,165,0.08); }

.sidebar-num {
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.1);
  color: #5a6a7e;
  flex-shrink: 0;
  transition: all 0.3s;
}
.sidebar-item.active .sidebar-num {
  background: #4fd1a5; border-color: #4fd1a5;
  color: #05231a;
  box-shadow: 0 0 8px rgba(79,209,165,0.3);
}
.sidebar-item.done .sidebar-num {
  background: rgba(79,209,165,0.15);
  border-color: rgba(79,209,165,0.4);
  color: #4fd1a5;
}

.sidebar-item-label {
  font-size: 13px; font-weight: 500; color: #6a7a8e;
  transition: color 0.2s;
}
.sidebar-item.active .sidebar-item-label {
  color: #e9edf5; font-weight: 700;
}
.sidebar-item.done .sidebar-item-label {
  color: #8fa3bf;
}

/* Vertical connector line between items */
.sidebar-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px; /* center of 28px circle at 8px padding */
  top: 38px; bottom: -2px;
  width: 2px;
  background: rgba(255,255,255,0.06);
}
.sidebar-item.done:not(:last-child)::after {
  background: rgba(79,209,165,0.2);
}

.sidebar-bottom { margin-top: auto; padding-top: 14px; }
.sidebar-motiv {
  display: flex; align-items: center; gap: 10px;
  padding: 12px; border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.sidebar-motiv-icon { font-size: 20px; flex-shrink: 0; }
.sidebar-motiv-title {
  font-size: 12px; font-weight: 700; color: #c8d4e2;
  margin-bottom: 2px;
}
.sidebar-motiv-text { font-size: 11px; color: #5a6a7e; line-height: 1.4; }

/* ========== RIGHT INFO PANEL ========== */
#infoPanel {
  position: fixed; right: 16px;
  top: 70px; bottom: 16px;
  width: 340px;
  background: rgba(10,16,26,0.88);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  backdrop-filter: blur(18px);
  padding: 22px 20px 16px;
  z-index: 10;
  display: flex; flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  box-shadow: 0 16px 48px rgba(0,0,0,0.4);
}
#infoPanel::-webkit-scrollbar { display: none; }

#stageNum {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #4fd1a5; margin-bottom: 4px;
}
#stageTitle {
  font-size: 24px; font-weight: 700;
  line-height: 1.15; margin-bottom: 10px;
}
#stageDesc {
  font-size: 13px; line-height: 1.6; color: #a9b8cc;
  margin-bottom: 16px;
}

/* ========== INFO CARDS (Mission, Tip, Circuit) ========== */
.info-card {
  border-radius: 14px; padding: 14px 16px;
  margin-bottom: 14px;
}

.info-card-top {
  display: flex; align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.info-card-label-row {
  display: flex; align-items: center; gap: 6px;
}
.info-card-label-row span:first-child { font-size: 16px; }
#missionLabel {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #e07052;
}

/* Mission card */
.mission-card {
  background: rgba(224,112,82,0.08);
  border-left: 3px solid #e07052;
}
#missionText {
  font-size: 13px; font-weight: 600;
  line-height: 1.4; color: #e9edf5;
}
#mission.done {
  background: rgba(79,209,165,0.12);
  border-left-color: #4fd1a5;
}
#mission.done #missionLabel { color: #4fd1a5; }

/* Mission progress ring */
#missionProgress {
  flex-shrink: 0; width: 48px; height: 48px;
  position: relative;
}
#ringSVG { width: 100%; height: 100%; transform: rotate(-90deg); }
#ringBg { fill: none; stroke: rgba(255,255,255,0.08); stroke-width: 5; }
#ringFg {
  fill: none; stroke: #e07052; stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 138.2; stroke-dashoffset: 138.2;
  transition: stroke-dashoffset 0.4s ease;
}
#mission.done #ringFg { stroke: #4fd1a5; }
#ringText {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #eef3fa;
}

/* Tip card */
.tip-card {
  background: rgba(217,180,90,0.07);
  border-left: 3px solid #d9b45a;
}
.tip-icon { font-size: 16px; }
.tip-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #d9b45a;
}
#tipText {
  font-size: 13px; line-height: 1.5; color: #c8d4e2;
}
#tipCard { display: none; } /* shown per stage */

/* Circuit counter card */
.circuit-card {
  background: rgba(79,209,165,0.08);
  border: 1px solid rgba(79,209,165,0.25);
  display: none; /* shown during Tawaf */
}
.circuit-inner {
  display: flex; align-items: center;
  justify-content: space-between;
}
.circuit-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; color: #4fd1a5;
  margin-bottom: 2px;
}
.circuit-count {
  font-size: 28px; font-weight: 800;
  color: #e9edf5; line-height: 1.1;
}
.circuit-hint {
  font-size: 12px; color: #8fa3bf;
  margin-top: 4px;
}
.circuit-icon { font-size: 36px; }

/* Camera View Toggle & Ziarah HUD inside Circuit Card */
.circuit-cam-toggle {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(79, 209, 165, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cam-toggle-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(79, 209, 165, 0.12);
  border: 1px solid rgba(79, 209, 165, 0.35);
  border-radius: 8px;
  color: #4fd1a5;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.cam-toggle-btn:hover {
  background: rgba(79, 209, 165, 0.24);
  border-color: rgba(79, 209, 165, 0.6);
  color: #ffffff;
  transform: translateY(-1px);
}
.cam-toggle-btn.active {
  background: rgba(201, 162, 74, 0.2);
  border-color: rgba(201, 162, 74, 0.55);
  color: #ffd875;
}
.cam-toggle-btn.active:hover {
  background: rgba(201, 162, 74, 0.3);
  color: #ffffff;
}
.cam-toggle-btn.ziarah-btn {
  background: rgba(201, 162, 74, 0.12);
  border-color: rgba(201, 162, 74, 0.4);
  color: #ffe082;
}
.cam-toggle-btn.ziarah-btn:hover {
  background: rgba(201, 162, 74, 0.26);
  border-color: rgba(201, 162, 74, 0.7);
  color: #ffffff;
}
.cam-toggle-btn.floor-toggle-btn {
  background: rgba(56, 189, 248, 0.12);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}
.cam-toggle-btn.floor-toggle-btn:hover {
  background: rgba(56, 189, 248, 0.25);
  border-color: rgba(56, 189, 248, 0.7);
  color: #ffffff;
}
.cam-toggle-btn.floor-toggle-btn.active {
  background: rgba(168, 85, 247, 0.2);
  border-color: rgba(168, 85, 247, 0.6);
  color: #c084fc;
}
.cam-toggle-btn.floor-toggle-btn.active:hover {
  background: rgba(168, 85, 247, 0.32);
  color: #ffffff;
}
.cam-toggle-icon {
  font-size: 14px;
  line-height: 1;
}
/* near a historic site: the ziarah button names it (a hint, not a popup) */
.cam-toggle-btn.ziarah-btn.nearby {
  background: rgba(201, 162, 74, 0.3);
  border-color: rgba(255, 216, 117, 0.85);
  color: #ffffff;
  animation: ziarah-nearby 1.8s ease-in-out infinite;
}
@keyframes ziarah-nearby {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 216, 117, 0); }
  50% { box-shadow: 0 0 0 4px rgba(255, 216, 117, 0.22); }
}
@media (prefers-reduced-motion: reduce) {
  .cam-toggle-btn.ziarah-btn.nearby { animation: none; }
}
.ziarah-subtitle {
  font-size: 12px;
  color: #cbd5e1;
  margin-top: 3px;
  line-height: 1.4;
}

/* ========== HARAM HISTORICAL ZIARAH MODAL ========== */
.ziarah-modal {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4, 7, 12, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s;
  visibility: hidden;
  padding: 16px;
}
.ziarah-modal.show {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.ziarah-modal-card {
  max-width: 620px;
  width: 100%;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(145deg, rgba(16, 24, 38, 0.96), rgba(8, 12, 20, 0.98));
  border: 1px solid rgba(201, 162, 74, 0.4);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75), 0 0 25px rgba(201, 162, 74, 0.15);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.ziarah-modal.show .ziarah-modal-card {
  transform: translateY(0) scale(1);
}
.ziarah-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.ziarah-header-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.ziarah-header-icon {
  font-size: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(201, 162, 74, 0.15);
  border: 1px solid rgba(201, 162, 74, 0.35);
  flex-shrink: 0;
}
.ziarah-badge {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #4fd1a5;
  background: rgba(79, 209, 165, 0.14);
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 4px;
}
.ziarah-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  line-height: 1.25;
}
.ziarah-arabic {
  font-size: 14px;
  color: #ffd875;
  margin-top: 3px;
  font-family: 'Amiri', 'Traditional Arabic', serif;
}
.ziarah-close-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #a9b8cc;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.18s;
  flex-shrink: 0;
}
.ziarah-close-btn:hover {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
.ziarah-tabs {
  display: flex;
  gap: 8px;
  padding: 10px 18px;
  overflow-x: auto;
  scrollbar-width: none;
  background: rgba(0, 0, 0, 0.28);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ziarah-tabs::-webkit-scrollbar {
  display: none;
}
.ziarah-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 9px;
  color: #94a3b8;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  padding: 6px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.18s;
}
.ziarah-tab:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.ziarah-tab.active {
  background: rgba(201, 162, 74, 0.2);
  border-color: rgba(201, 162, 74, 0.6);
  color: #ffe082;
  box-shadow: 0 0 10px rgba(201, 162, 74, 0.2);
}
.ziarah-tab-icon {
  font-size: 14px;
}
.ziarah-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ziarah-section {
  display: flex;
  flex-direction: column;
}
.ziarah-section-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #cbd5e1;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.ziarah-text {
  font-size: 13px;
  line-height: 1.55;
  color: #e2e8f0;
}
.ziarah-hadith-box {
  background: rgba(201, 162, 74, 0.08);
  border-left: 3px solid #c9a24a;
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
}
.ziarah-adab-box {
  background: rgba(79, 209, 165, 0.08);
  border-left: 3px solid #4fd1a5;
  padding: 10px 14px;
  border-radius: 0 10px 10px 0;
}
.ziarah-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.2);
}
.ziarah-focus-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  border-color: rgba(201, 162, 74, 0.45);
  color: #ffe082;
}
.ziarah-focus-btn:hover {
  background: rgba(201, 162, 74, 0.2);
  border-color: rgba(201, 162, 74, 0.7);
  color: #ffffff;
}
.ziarah-ok-btn {
  font-size: 13px;
  padding: 8px 18px;
}

/* Panel navigation */
.panel-nav {
  margin-top: auto; padding-top: 14px;
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  flex-shrink: 0;
}
.panel-nav-right {
  display: flex; gap: 8px;
}

/* ========== COMPLETION SCREEN ========== */
#completionScreen {
  position: fixed; inset: 0; z-index: 80;
  display: none; /* flex when shown */
  background: rgba(4,7,12,0.92);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}
#completionScreen.show {
  display: flex;
  animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.completion-left {
  flex: 1; display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 48px;
  min-width: 0;
}

.completion-heading {
  font-size: 42px; font-weight: 800;
  margin-bottom: 8px; line-height: 1.1;
}
.sparkle { width: 34px; height: 34px; color: #f6d38a; vertical-align: -0.02em; }

.completion-subtitle {
  font-size: 20px; font-weight: 700;
  color: #4fd1a5; margin-bottom: 20px;
}
.completion-desc {
  font-size: 15px; line-height: 1.7;
  color: #a9b8cc; max-width: 460px;
  margin-bottom: 32px;
}

.completion-verse {
  max-width: 420px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 20px;
}
.verse-mark {
  font-size: 28px; color: #4fd1a5;
  margin-bottom: 8px; line-height: 1;
}
.verse-mark ui-icon { width: 24px; height: 24px; display: block; }
.verse-text {
  font-size: 14px; line-height: 1.7;
  color: #c8d4e2; font-style: italic;
  margin-bottom: 10px;
}
.verse-ref {
  font-size: 12px; font-weight: 700;
  color: #4fd1a5;
}

.completion-right {
  width: 420px; flex-shrink: 0;
  background: rgba(10,16,26,0.9);
  border-left: 1px solid rgba(255,255,255,0.06);
  padding: 32px 28px;
  overflow-y: auto;
}

.completion-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(79,209,165,0.12);
  border: 1px solid rgba(79,209,165,0.3);
  color: #4fd1a5; margin-bottom: 18px;
}

.completion-stage-header {
  display: flex; align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px; gap: 16px;
}
.completion-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; color: #4fd1a5;
  margin-bottom: 4px;
}
.completion-stage-title {
  font-size: 26px; font-weight: 700;
}

.completion-ring-wrap {
  position: relative;
  width: 80px; height: 80px; flex-shrink: 0;
}
.completion-ring { width: 100%; height: 100%; }
.completion-ring-fg {
  transition: stroke-dashoffset 1s ease;
}
.completion-ring-text {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; color: #4fd1a5;
}

.completion-stage-desc {
  font-size: 13px; line-height: 1.6;
  color: #a9b8cc; margin-bottom: 20px;
}
.completion-badge ui-icon { width: 15px; height: 15px; }
.completion-stage-icon { width: 16px; height: 16px; margin-inline-end: 6px; vertical-align: -3px; color: #4fd1a5; }

.completion-summary-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; color: #5a6a7e;
  margin-bottom: 12px;
}

.completion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 18px;
}

.completion-stage-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  position: relative;
}
.completion-stage-glyph {
  display: block; width: 26px; height: 26px;
  margin: 0 auto 6px; color: #c8f1e2;
}
.completion-stage-name {
  font-size: 10px; font-weight: 600;
  color: #8fa3bf;
}
.completion-check {
  position: absolute; top: -4px; right: -4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #4fd1a5; color: #05231a;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
}
.completion-check ui-icon { width: 11px; height: 11px; }
.completion-check ui-icon svg { stroke-width: 3.2; }

.reflection-card {
  background: rgba(160,100,200,0.06);
  border-left: 3px solid rgba(160,100,200,0.5);
}
.reflection-header {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px;
}
.reflection-icon { width: 15px; height: 15px; color: rgba(190,140,230,0.95); }
.reflection-label {
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.12em; color: rgba(180,130,220,0.8);
}
.reflection-text {
  font-size: 13px; line-height: 1.55;
  color: #c8d4e2;
}

.completion-actions {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; margin-top: 16px;
}
.completion-actions .btn {
  min-width: 0; padding: 10px 12px; font-size: 13px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.completion-actions .btn > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.completion-actions .btn ui-icon { width: 16px; height: 16px; }
.completion-actions .btn.primary, .completion-actions .btn.wide { grid-column: 1 / -1; }   /* Jelajahi Al-Aqsa, Kembali ke Awal: full rows */

/* ========== OVERLAYS ========== */
#controlsHint {
  position: fixed; top: 68px; left: 50%;
  transform: translateX(-50%);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(12,18,30,0.8);
  border: 1px solid rgba(255,255,255,0.08);
  backdrop-filter: blur(14px);
  font-size: 12px; color: #a9b8cc;
  z-index: 11; opacity: 0;
  transition: opacity 0.4s; pointer-events: none;
  white-space: nowrap;
}
#controlsHint.show { opacity: 1; }
#controlsHint .kbd,
#hint .kbd {
  display: inline-block; padding: 2px 7px;
  background: rgba(79,209,165,0.15);
  border: 1px solid rgba(79,209,165,0.35);
  border-radius: 6px; font-size: 11px;
  color: #4fd1a5; font-weight: 700; margin: 0 2px;
}
body.touch #controlsHint { display: none; }

#hint {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(12,18,30,0.92);
  border: 1px solid rgba(79,209,165,0.4);
  color: #eef3fa; padding: 14px 22px;
  border-radius: 16px; font-size: 14px; font-weight: 600;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  pointer-events: none; opacity: 0;
  transition: opacity 0.4s;
  max-width: 80vw; text-align: center;
  z-index: 20; backdrop-filter: blur(10px);
}
#hint.show { opacity: 1; }

#toast {
  position: fixed; top: 80px; left: 50%;
  transform: translate(-50%, -20px);
  background: linear-gradient(135deg, #4fd1a5, #34b48a);
  color: #05231a; padding: 12px 24px;
  border-radius: 14px; font-weight: 700; font-size: 14px;
  box-shadow: 0 14px 34px rgba(79,209,165,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
  z-index: 20; white-space: nowrap;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ========== JOYSTICK ========== */
#joystick {
  position: fixed; left: 240px; bottom: 40px;
  width: 110px; height: 110px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.12);
  display: none; z-index: 15; touch-action: none;
}
#joystickKnob {
  position: absolute; left: 50%; top: 50%;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(79,209,165,0.65);
  border: 2px solid rgba(79,209,165,0.85);
  transform: translate(-50%, -50%);
  transition: transform 0.05s;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}
body.touch #joystick { display: block; }

/* ========== RESPONSIVE ========== */
/* (the creator's own responsive rules live with the creator, under ========== CREATOR SCREEN ==========) */
@media (max-width: 768px) {
  #sidebar { display: none; }
  #infoPanel {
    left: 12px; right: 12px; width: auto;
    top: auto; bottom: 12px;
    max-height: 55vh;
    border-radius: 18px;
  }
  .completion-left { display: none; }
  .completion-right { width: 100%; border-left: none; }
  .completion-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 640px) {
  #infoPanel { padding: 16px 14px 12px; }
  #stageTitle { font-size: 20px; }
  #stageDesc { font-size: 12px; }
  #missionText { font-size: 12px; }
  .btn { padding: 9px 14px; font-size: 13px; }
  .completion-heading { font-size: 28px; }
  .completion-right { padding: 20px 16px; }
  .completion-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
}

/* ========== LANGUAGE SWITCHER & PILL ========== */
.creator-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(12, 18, 30, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #e9edf5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}
.lang-pill:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(79, 209, 165, 0.5);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.lang-pill .lang-arrow {
  font-size: 10px;
  opacity: 0.65;
  transition: transform 0.2s ease;
}
.lang-pill.active .lang-arrow {
  transform: rotate(180deg);
}

/* Quick Dropdown Menu */
.lang-dropdown {
  position: fixed;
  z-index: 250;
  background: rgba(14, 21, 35, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 190px;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-dropdown.hide {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  pointer-events: none;
}
.lang-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: transparent;
  border: none;
  color: #e9edf5;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-dropdown-item:hover {
  background: rgba(79, 209, 165, 0.15);
  color: #4fd1a5;
}
.lang-dropdown-item.active {
  background: rgba(79, 209, 165, 0.22);
  color: #4fd1a5;
}
.lang-item-flag {
  font-size: 16px;
}
.lang-item-name {
  flex: 1;
}
.lang-item-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

/* ========== SETTINGS MODAL ========== */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4, 7, 12, 0.78);
  backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}
.modal-backdrop.show {
  opacity: 1; visibility: visible;
}
.settings-card {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  background: rgba(13, 20, 34, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 24px;
  padding: 26px 26px 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.75);
  animation: slideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.settings-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.settings-title {
  font-size: 22px;
  font-weight: 700;
  color: #f1f5f9;
}
.settings-sub {
  font-size: 13px;
  color: #8fa3bf;
  margin-top: 4px;
}
.modal-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.06);
  color: #94a3b8;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s ease;
}
.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.settings-section {
  margin-bottom: 20px;
}
.settings-section-head {
  margin-bottom: 12px;
}
.settings-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.settings-section-sub {
  font-size: 12px;
  color: #7d8fa6;
  margin-top: 2px;
}
.lang-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.lang-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 14px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}
.lang-card:hover {
  background: rgba(79, 209, 165, 0.08);
  border-color: rgba(79, 209, 165, 0.4);
  transform: translateY(-2px);
}
.lang-card.active {
  background: rgba(79, 209, 165, 0.14);
  border-color: #4fd1a5;
  box-shadow: 0 0 16px rgba(79, 209, 165, 0.2);
}
.lang-card-flag {
  font-size: 26px;
}
.lang-card-name {
  font-size: 13px;
  font-weight: 700;
}
.lang-card-native {
  font-size: 11px;
  color: #8fa3bf;
}
.lang-card-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  margin-top: 2px;
}
.lang-card.active .lang-card-badge {
  background: rgba(79, 209, 165, 0.25);
  color: #4fd1a5;
}

/* Theme cards in Settings Modal */
.theme-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.theme-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 16px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #e2e8f0;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-card:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
  transform: translateY(-2px);
}

.theme-card.active {
  background: rgba(16, 185, 129, 0.14);
  border-color: #10B981;
  box-shadow: 0 0 16px rgba(16, 185, 129, 0.25);
}

.theme-card-icon {
  font-size: 26px;
  line-height: 1;
}

.theme-card-name {
  font-size: 13px;
  font-weight: 700;
}

.theme-card-desc {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}

.theme-card-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: #94a3b8;
  margin-top: 4px;
}

.theme-card.active .theme-card-badge {
  background: rgba(16, 185, 129, 0.25);
  color: #34d399;
}
.settings-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
}
.settings-toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}
.switch-btn {
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease;
}
.switch-btn.active {
  background: #4fd1a5;
}
.switch-handle {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s ease;
}
.switch-btn.active .switch-handle {
  transform: translateX(20px);
}
.controls-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ctrl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
}
.ctrl-keys {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}
.ctrl-desc {
  font-size: 12px;
  color: #8fa3bf;
}
.settings-footer {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}

/* ========== ARABIC RTL STYLING ========== */
[dir="rtl"], html[lang="ar"], body.lang-ar {
  direction: rtl;
  text-align: right;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Tahoma, "Geeza Pro", "Noto Sans Arabic", sans-serif;
}
[dir="rtl"] #sidebar {
  left: auto;
  right: 18px;
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
[dir="rtl"] #infoPanel {
  right: auto;
  left: 18px;
}
[dir="rtl"] .topbar-left {
  flex-direction: row;
}
[dir="rtl"] .topbar-right {
  flex-direction: row-reverse;
}
[dir="rtl"] .choice-option {
  text-align: right;
}
[dir="rtl"] .choice-option:hover {
  transform: translateX(-4px);
}
[dir="rtl"] .choice-option:active {
  transform: translateX(-2px) scale(0.99);
}
[dir="rtl"] .lang-dropdown-item {
  text-align: right;
}
[dir="rtl"] .panel-nav {
  flex-direction: row-reverse;
}
[dir="rtl"] .panel-nav-right {
  flex-direction: row-reverse;
}
[dir="rtl"] .completion-right {
  border-left: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}
[dir="rtl"] .completion-actions {
  flex-direction: row-reverse;
}
/* Ensure 3D controls and toolbar are not distorted in RTL */
[dir="rtl"] .studio-deck,
[dir="rtl"] .cam-toolbar,
[dir="rtl"] .view-toolbar,
[dir="rtl"] .anim-toolbar {
  direction: ltr;
}

/* When interface language is already Arabic, hide static duplicate Arabic sub-labels */
.lang-ar .hero-ar,
.lang-ar .hero-desc-ar,
.lang-ar .card-title-ar,
.lang-ar .card-sub-ar,
.lang-ar .gender-ar,
.lang-ar .beard-ar,
.lang-ar .outfit-ar,
.lang-ar .start-ar,
.lang-ar .label-ar {
  display: none !important;
}

.lang-ar .creator-card {
  text-align: right;
}
.lang-ar .card-avatar { grid-row: 1; }   /* only one title line in Arabic */



/* ========== JELAJAHI MAKKAH (explore mode, src/makkah-explore.js) ========== */
/* Entry cards on the creator screen: the hero column on wide screens, a compact row under the start button below
   1100 px. Secondary actions: outlined card, tinted icon tile, title, caption, chevron; never filled (the start
   button is the only filled control). Colours come from the creator tokens (#creator), light theme included. */
.explore-entry-btn {
  position: relative; width: 100%; font: inherit; margin-top: 8px; padding: 10px 14px;
  background: var(--cr-fill); color: var(--cr-text);
  border: 1px solid var(--cr-line); border-radius: 14px; cursor: pointer;
  box-shadow: var(--cr-chip-shadow);
  display: grid; grid-template-columns: 36px 1fr 10px; column-gap: 12px; align-items: center; text-align: start;
  transition: background 0.2s, border-color 0.2s, transform 0.1s;
}
.explore-entry-btn:hover { background: var(--cr-accent-soft); border-color: var(--cr-accent); }
.explore-entry-btn:active { transform: scale(0.98); }
.explore-entry-main { display: contents; }   /* the icon and the title become cells of the button's grid */
.explore-entry-main ui-icon {
  grid-column: 1; grid-row: 1 / span 2; width: 36px; height: 36px; padding: 9px;
  border-radius: 10px; background: var(--cr-accent-soft); color: var(--cr-accent);
}
.explore-entry-main > span { grid-column: 2; grid-row: 1; font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--cr-text); }
.explore-entry-sub { grid-column: 2; grid-row: 2; font-size: 12.5px; line-height: 1.35; color: var(--cr-text-3); }
.explore-entry-btn::after {   /* chevron: says "opens something" */
  content: ""; grid-column: 3; grid-row: 1 / span 2; width: 8px; height: 8px;
  border-top: 2px solid var(--cr-text-3); border-inline-end: 2px solid var(--cr-text-3);
  transform: rotate(45deg); transition: transform 0.2s, border-color 0.2s;
}
[dir="rtl"] .explore-entry-btn::after { transform: rotate(-45deg); }
.explore-entry-btn:hover::after { border-color: var(--cr-accent); transform: translateX(2px) rotate(45deg); }
[dir="rtl"] .explore-entry-btn:hover::after { transform: translateX(-2px) rotate(-45deg); }
.explore-entry-hero { max-width: 380px; margin-top: 10px; }
.hero-desc-en + .explore-entry-hero { margin-top: 22px; }            /* first card: air below the copy */
/* one entry point at a time: the hero cards while the hero column shows, the compact row in the form panel below 1100 px */
.explore-entry-panel { display: none; }
@media (max-width: 1100px) {
  .explore-entry-panel {
    display: grid; grid-template-columns: 1fr; justify-items: center; align-content: center; row-gap: 4px;
    margin-top: 0; padding: 6px 4px; min-height: 52px; text-align: center;
  }
  .explore-entry-panel::after { display: none; }
  .explore-entry-panel .explore-entry-main ui-icon { grid-column: 1; grid-row: 1; width: 26px; height: 26px; padding: 5px; }
  .explore-entry-panel .explore-entry-main > span { grid-column: 1; grid-row: 2; font-size: 12.5px; text-align: center; }
  /* the caption leaves the layout but stays in the accessibility tree */
  .explore-entry-panel .explore-entry-sub {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}

body.makkah-exploring #creator,
body.makkah-exploring #topbar,
body.makkah-exploring #sidebar,
body.makkah-exploring #infoPanel,
body.makkah-exploring #controlsHint,
body.makkah-exploring #joystick,
body.makkah-exploring #hint,
body.makkah-exploring #langDropdown,
body.makkah-exploring #completionScreen { display: none !important; }

.mx-root { position: fixed; inset: 0; z-index: 150; pointer-events: none; color: #e9edf5; }
.mx-root [hidden] { display: none !important; }
.mx-surface { position: absolute; inset: 0; pointer-events: auto; touch-action: none; cursor: grab; }
.mx-surface:active { cursor: grabbing; }
.mx-markers { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; }   /* own stacking context: pins stay under the panels */
.mx-root > .mx-panel, .mx-root > .mx-foot { z-index: 2; }

.mx-marker {
  position: absolute; left: 0; top: 0; pointer-events: auto;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer;
}
.mx-marker::after {           /* stem down to the anchor point */
  content: ''; width: 2px; height: 14px; background: rgba(79,209,165,0.85);
}
.mx-marker-dot {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(12,17,25,0.86); border: 2px solid #4fd1a5;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45); transition: transform 0.15s, background 0.15s;
}
.mx-marker-label {
  order: -1; font-size: 12px; font-weight: 600; white-space: nowrap;
  padding: 3px 8px; border-radius: 8px; background: rgba(12,17,25,0.8);
}
.mx-marker:hover .mx-marker-dot { transform: scale(1.1); }
.mx-marker.selected .mx-marker-dot { background: #4fd1a5; color: #05231a; }
.mx-marker.far .mx-marker-label { display: none; }
.mx-marker.far .mx-marker-dot { width: 26px; height: 26px; font-size: 13px; }

.mx-panel {
  position: absolute; pointer-events: auto;
  background: rgba(12,17,25,0.84); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.mx-btn {
  font: inherit; font-size: 13px; font-weight: 600; color: #e9edf5;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px; padding: 7px 12px; cursor: pointer; transition: background 0.15s;
}
.mx-btn:hover { background: rgba(255,255,255,0.13); }

.mx-head { top: 16px; left: 16px; display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; }
.mx-title { font-size: 16px; font-weight: 700; letter-spacing: 0.02em; }
.mx-sub { font-size: 12px; color: #8b9bb0; }

.mx-places { top: 84px; left: 16px; width: 252px; padding: 12px 10px; max-height: calc(100vh - 200px); overflow: auto; }
.mx-label { font-size: 11px; letter-spacing: 0.12em; color: #6f8196; margin: 0 6px 8px; font-weight: 700; }
.mx-list { display: flex; flex-direction: column; gap: 3px; }
.mx-place {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: start;
  font: inherit; font-size: 13px; color: #d6deea; background: transparent;
  border: 1px solid transparent; border-radius: 10px; padding: 8px; cursor: pointer;
}
.mx-place:hover { background: rgba(255,255,255,0.06); }
.mx-place.active { background: rgba(79,209,165,0.14); border-color: rgba(79,209,165,0.4); color: #fff; }
.mx-place-icon { width: 22px; text-align: center; flex-shrink: 0; }

.mx-tools { top: 16px; right: 16px; display: flex; gap: 8px; align-items: center; padding: 8px; }
.mx-times { display: flex; gap: 4px; }
.mx-time.active { background: #4fd1a5; color: #05231a; border-color: #4fd1a5; }

.mx-card { right: 16px; top: 76px; width: 340px; padding: 16px; max-height: calc(100vh - 190px); overflow: auto; }
.mx-card-head { display: flex; gap: 12px; align-items: flex-start; }
.mx-card-icon { font-size: 26px; line-height: 1; }
.mx-card-titles { flex: 1; min-width: 0; }
.mx-card-name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.mx-card-ar { font-size: 14px; color: #9fdcc6; margin-top: 3px; }
.mx-card-close { padding: 4px 9px; }
.mx-tag {
  display: inline-block; margin: 12px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 3px 9px; border-radius: 999px; background: rgba(79,209,165,0.15); color: #9fe9cc;
}
.mx-tag[data-kind="exploreTagHajj"] { background: rgba(212,175,55,0.16); color: #f0d68a; }
.mx-tag[data-kind="exploreTagHistory"] { background: rgba(125,160,255,0.16); color: #bcd0ff; }
.mx-tag[data-kind="exploreTagCity"] { background: rgba(255,255,255,0.08); color: #c8d4e2; }
.mx-tag[data-kind="exploreTagAqsa"] { background: rgba(212,175,55,0.14); color: #f3dc9b; }
.mx-card-desc { font-size: 13.5px; line-height: 1.6; color: #c8d4e2; margin: 6px 0 0; }

.mx-foot {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  width: min(90vw, 760px); display: flex; flex-direction: column; align-items: center; gap: 4px;
  pointer-events: none; text-align: center;
}
.mx-hint { font-size: 12px; color: #c8d4e2; background: rgba(12,17,25,0.72); padding: 6px 12px; border-radius: 10px; }
.mx-scale { font-size: 11px; color: #a9b8cc; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

.mx-loading { left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 18px 24px; display: flex; align-items: center; gap: 12px; }
.mx-spinner {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid rgba(79,209,165,0.25); border-top-color: #4fd1a5; animation: mx-spin 0.9s linear infinite;
}
@keyframes mx-spin { to { transform: rotate(360deg); } }
.mx-root.is-loading .mx-places,
.mx-root.is-loading .mx-tools,
.mx-root.is-loading .mx-foot,
.mx-root.is-loading .mx-surface { visibility: hidden; }

/* Arabic: mirror the side panels */
.mx-root[dir="rtl"] .mx-head { left: auto; right: 16px; padding: 10px 10px 10px 16px; }
.mx-root[dir="rtl"] .mx-places { left: auto; right: 16px; }
.mx-root[dir="rtl"] .mx-tools { right: auto; left: 16px; }
.mx-root[dir="rtl"] .mx-card { right: auto; left: 16px; }

@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) and (max-width: 1400px) {
  .mx-head, .mx-root[dir="rtl"] .mx-head { top: 12px; left: 12px; right: 12px; padding: 8px 12px 8px 8px; }
  .mx-tools, .mx-root[dir="rtl"] .mx-tools { top: auto; bottom: 76px; left: 12px; right: 12px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mx-tools .mx-btn { flex: 0 0 auto; white-space: nowrap; }
  .mx-places, .mx-root[dir="rtl"] .mx-places { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; max-height: none; padding: 6px; }
  .mx-list { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .mx-place { flex: 0 0 auto; width: auto; padding: 7px 10px; }
  .mx-label { display: none; }
  .mx-card, .mx-root[dir="rtl"] .mx-card { top: auto; bottom: 136px; left: 12px; right: 12px; width: auto; max-height: 38vh; }
  .mx-foot { top: 74px; bottom: auto; }
  .mx-hint { display: none; }
  .mx-time { padding: 6px 8px; font-size: 12px; }
}

/* ── Jalan-jalan (walk mode) ── */
.mx-places-toggle { display: none; }
.mx-root.walking .mx-surface { display: none; }                 /* the canvas gets the drag (player camera) */
.mx-root.walking .mx-reset { display: none; }
.mx-walk { background: rgba(79,209,165,0.16); border-color: rgba(79,209,165,0.5); }
body.mx-walking.touch #joystick#joystick { display: block !important; z-index: 160; }

.mx-card-actions { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.mx-card-actions [hidden] { display: none; }
.mx-act { flex: 1 1 auto; }
.mx-act.primary { background: #4fd1a5; color: #05231a; border-color: #4fd1a5; }
.mx-act.primary:hover { background: #6adcb5; }

.mx-target { left: 50%; top: 16px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; }
.mx-target-text { font-size: 13px; font-weight: 600; white-space: nowrap; }
.mx-target-go, .mx-target-clear { padding: 5px 9px; }

.mx-toast {
  position: absolute; left: 50%; top: 72px; transform: translate(-50%, -8px); z-index: 3;
  padding: 9px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
  background: rgba(12,17,25,0.9); border: 1px solid rgba(79,209,165,0.4); color: #e9edf5;
  opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s; white-space: nowrap;
}
.mx-toast.show { opacity: 1; transform: translate(-50%, 0); }
.mx-fade { position: absolute; inset: 0; z-index: 4; background: #070a10; opacity: 0; pointer-events: none; transition: opacity 0.4s ease; }
.mx-fade.on { opacity: 1; }

@media (max-width: 760px), (pointer: coarse) and (orientation: portrait) and (max-width: 1400px) {
  .mx-root.walking .mx-places-toggle { display: inline-block; }
  .mx-root.walking .mx-places { display: none; }
  .mx-root.walking.places-open .mx-places { display: block; bottom: calc(var(--mx-joy-gap, 150px) - 14px); }
  .mx-root.walking .mx-tools { bottom: 12px; left: var(--mx-joy-gap, 150px); right: 12px; }
  .mx-root.walking .mx-card { bottom: var(--mx-joy-gap, 150px); max-height: 34vh; }     /* above the joystick */
  .mx-root.walking .mx-foot { display: none; }
  body.mx-walking.touch #joystick#joystick { left: 18px; bottom: 18px; }
  .mx-target { top: 74px; max-width: calc(100vw - 24px); }
  .mx-toast { top: 128px; }
}
/* Explore on a touch tablet. Portrait: the phone layout above (bigger joystick: --mx-joy-gap). Landscape: the desktop layout, but while walking the places
   list steps aside (the "Tempat" button opens it, above the joystick) and the minimap takes its place under the title bar. */
@media (pointer: coarse) and (min-width: 600px) and (min-height: 501px) and (max-width: 1400px) {
  :root { --mx-joy-gap: 176px; }
  body.mx-walking .haram-minimap { top: 84px; bottom: auto; left: 16px; width: 128px; height: 128px; }
  [dir="rtl"] body.mx-walking .haram-minimap { left: auto; right: 16px; }
}
@media (pointer: coarse) and (orientation: landscape) and (min-width: 761px) and (min-height: 501px) and (max-width: 1400px) {
  .mx-root.walking .mx-places-toggle { display: inline-block; }
  .mx-root.walking .mx-places { display: none; }
  .mx-root.walking.places-open .mx-places { display: block; max-height: calc(100vh - 84px - var(--hud-joy, 136px) - 56px); }   /* stops above the joystick */
}

/* ─────────────────────────────────────────────────────────────────
   HARAM GUIDE MAP & MINIMAP (Phase 5)
   ───────────────────────────────────────────────────────────────── */

.haram-map-overlay {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 9, 17, 0.85);
  backdrop-filter: blur(14px);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.25s;
}
.haram-map-overlay.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.haram-map-card-wrapper {
  position: relative;
  width: min(1080px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 48px));
  background: rgba(14, 21, 33, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.haram-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.haram-map-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.haram-map-icon {
  font-size: 20px;
}
.haram-map-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.3px;
}
.haram-map-close {
  background: rgba(255, 255, 255, 0.08);
  color: #cbd5e1;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-size: 15px;
  transition: all 0.18s;
}
.haram-map-close:hover {
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}
.haram-map-viewport {
  position: relative;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #090e17;
}
.haram-map-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
}
.haram-map-canvas:active {
  cursor: grabbing;
}

/* Legend */
.haram-map-legend {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 10;
  background: rgba(11, 18, 29, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 10px 14px;
  backdrop-filter: blur(8px);
  pointer-events: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
[dir="rtl"] .haram-map-legend {
  left: auto;
  right: 14px;
}
.haram-map-legend-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.haram-map-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #e2e8f0;
  margin-bottom: 5px;
}
.haram-map-legend-item:last-child {
  margin-bottom: 0;
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.legend-swatch.internal { background: #b9dfb0; }
.legend-swatch.external { background: #e8d9b0; }
.legend-swatch.mataf { background: #8fc2e8; }
.legend-swatch.masa { background: #a7d4a2; }
.legend-swatch.gate { background: #d97706; }
.legend-swatch.facility { background: #10b981; }

/* Info Card */
.haram-map-card {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: min(380px, calc(100% - 32px));
  background: rgba(15, 23, 38, 0.94);
  border: 1px solid rgba(201, 162, 74, 0.4);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(12px);
  transition: opacity 0.2s, transform 0.2s;
  pointer-events: auto;
}
.haram-map-card.hide {
  display: none !important;
}
.haram-map-card-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
}
[dir="rtl"] .haram-map-card-close {
  right: auto;
  left: 12px;
}
.haram-map-card-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(201, 162, 74, 0.16);
  color: #fbbf24;
  margin-bottom: 6px;
}
.haram-map-card-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 700;
  color: #f8fafc;
}
.haram-map-card-sub {
  font-size: 12.5px;
  font-weight: 600;
  color: #94a3b8;
  margin-bottom: 8px;
}
.haram-map-card-desc {
  margin: 0 0 14px 0;
  font-size: 12.5px;
  color: #cbd5e1;
  line-height: 1.5;
}
.haram-map-card-actions {
  display: flex;
  gap: 8px;
}
.haram-map-go-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #10b981;
  color: #ffffff;
  border: none;
  padding: 8px 14px;
  border-radius: 9px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s;
}
.haram-map-go-btn:hover {
  background: #059669;
}

/* Minimap */
.haram-minimap {
  position: fixed;
  bottom: 24px;
  left: 244px;                 /* beside the 220 px sidebar, not over its footer */
  z-index: 100;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(11, 17, 27, 0.92);
  border: 2.5px solid rgba(201, 162, 74, 0.7);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.65), inset 0 0 12px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s;
  pointer-events: auto;
}
.haram-minimap:hover {
  transform: scale(1.04);
  border-color: #fbbf24;
}
.haram-minimap.hide {
  display: none !important;
}
[dir="rtl"] .haram-minimap {
  left: auto;
  right: 244px;
}
#haramMapBtn[hidden], #labelToggleBtn[hidden] { display: none !important; }
.haram-minimap-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
.haram-minimap-compass {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(239, 68, 68, 0.6);
  color: #ef4444;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 6px;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* the sidebar is gone and the info panel is a bottom sheet: the minimap sits under the topbar */
  .haram-minimap { width: 118px; height: 118px; top: 64px; bottom: auto; left: 12px; }
  [dir="rtl"] .haram-minimap { left: auto; right: 12px; }
}

/* Phones: the whole top bar on one row of controls (icons only), the step pill on a second row under it */
@media (max-width: 640px) {
  #topbar { flex-wrap: wrap; padding: 8px 10px; row-gap: 4px; }
  .topbar-left .topbar-brand, .topbar-left .topbar-sub { display: none; }
  .topbar-center { order: 3; flex: 1 0 100%; gap: 4px; }
  .step-pill { padding: 3px 12px; font-size: 10px; }
  .step-dots .dot { width: 14px; }
  .step-dots .dot.active { width: 22px; }
  .topbar-right { gap: 5px; }
  .time-pill { padding: 2px; }
  .time-btn { padding: 4px 6px; }
  .time-btn .time-label { display: none; }   /* the emoji only */
  #langPill { padding: 0 8px; height: 34px; }
  #langPillText, #langPill .lang-arrow { display: none; }
  #topbar .icon-btn { width: 34px; height: 34px; }
  .haram-minimap { top: 96px; }
}
@media (max-width: 600px) {
  .haram-map-card-wrapper {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
  }
}

/* ================================================================
   AUTH & SYUMRA ADMIN PRO STYLING EXTENSIONS
   ================================================================ */

/* Auth Topbar Pill Buttons */
.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  flex-shrink: 0;
}

.auth-btn:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.6);
  color: #34d399;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.auth-btn:active {
  transform: scale(0.97);
}

.auth-login-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.auth-icon {
  display: inline-block;
  color: #10B981;
  transition: transform 0.2s;
}

.auth-btn:hover .auth-icon {
  transform: translateX(2px);
}

.auth-btn.logged-in {
  background: rgba(15, 23, 42, 0.92);
  border-color: rgba(16, 185, 129, 0.35);
  padding: 0 12px 0 6px;
}

.auth-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.35);
  flex-shrink: 0;
}

.auth-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auth-name {
  max-width: 110px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
}

.auth-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* User Profile Dropdown */
.user-profile-dropdown {
  position: fixed;
  z-index: 1000;
  width: 270px;
  border-radius: 20px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.user-profile-dropdown.active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.user-dropdown-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 12px;
}

.user-dropdown-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #34d399;
  flex-shrink: 0;
}

.user-dropdown-meta {
  flex: 1;
  min-width: 0;
}

.user-dropdown-name {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-email {
  font-size: 11px;
  color: #94a3b8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.user-dropdown-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 6px;
  background: rgba(16, 185, 129, 0.18);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
  margin-top: 4px;
}

.user-dropdown-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
  margin: 4px 0 8px 0;
}

.user-dropdown-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.user-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  color: #cbd5e1;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.15s ease;
}

.user-dropdown-item svg {
  color: #94a3b8;
  transition: color 0.15s;
}

.user-dropdown-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.user-dropdown-item:hover svg {
  color: #10B981;
}

.user-dropdown-item.logout {
  color: #f87171;
}

.user-dropdown-item.logout svg {
  color: #f87171;
}

.user-dropdown-item.logout:hover {
  background: rgba(239, 68, 68, 0.15);
  color: #fca5a5;
}

/* Login Modal */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 15, 26, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.login-modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.login-modal-card {
  position: relative;
  width: 100%;
  max-width: 440px;
  margin: 16px;
  padding: 34px 30px;
  border-radius: 26px;
  background: rgba(15, 23, 42, 0.95);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #f8fafc;
  transform: scale(0.95) translateY(12px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  max-height: 90vh;
  overflow-y: auto;
}

.login-modal-overlay.active .login-modal-card {
  transform: scale(1) translateY(0);
}

.login-modal-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.05);
  color: #94a3b8;
  font-size: 15px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.login-modal-close:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
}

.login-modal-header {
  text-align: center;
  margin-bottom: 22px;
}

.login-modal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.login-modal-logo {
  filter: drop-shadow(0 0 12px rgba(16, 185, 129, 0.4));
}

.login-modal-badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.login-modal-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin-bottom: 6px;
}

.login-modal-subtitle {
  font-size: 13px;
  color: #94a3b8;
  line-height: 1.5;
  max-width: 320px;
  margin: 0 auto;
}

.login-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.35);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 18px;
  color: #fca5a5;
  font-size: 13px;
  line-height: 1.4;
  animation: fadeIn 0.2s ease;
}

.login-error-banner[hidden] {
  display: none !important;
}

.login-error-icon {
  color: #ef4444;
  flex-shrink: 0;
  margin-top: 1px;
}

.google-auth-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 18px;
  min-height: 44px;
}

.google-signin-btn-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 18px 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.login-divider span {
  padding: 0 12px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.login-input-label {
  font-size: 12px;
  font-weight: 700;
  color: #cbd5e1;
  margin-left: 2px;
}

.login-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 14px;
  color: #64748b;
  pointer-events: none;
}

.login-input {
  width: 100%;
  height: 46px;
  padding: 0 14px 0 42px;
  border-radius: 12px;
  background: rgba(11, 15, 26, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  font-family: inherit;
  font-size: 13.5px;
  outline: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-input:focus {
  border-color: #10B981;
  background: rgba(11, 15, 26, 0.95);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

.login-input::placeholder {
  color: #475569;
}

.login-pwd-toggle {
  position: absolute;
  right: 12px;
  background: transparent;
  border: none;
  color: #64748b;
  font-size: 14px;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.15s;
}

.login-pwd-toggle:hover {
  color: #94a3b8;
}

.login-submit-btn {
  width: 100%;
  height: 48px;
  border-radius: 13px;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #ffffff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 25px -5px rgba(16, 185, 129, 0.4);
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.login-submit-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  box-shadow: 0 12px 30px -5px rgba(16, 185, 129, 0.55);
  transform: translateY(-1px);
}

.login-submit-btn:active:not(:disabled) {
  transform: scale(0.98);
}

.login-submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.login-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}

.login-spinner[hidden] {
  display: none !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.login-footer-info {
  text-align: center;
  font-size: 12px;
  color: #64748b;
  margin-top: 18px;
}

.login-link {
  color: #10B981;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}

.login-link:hover {
  color: #34d399;
  text-decoration: underline;
}

/* OTP Step */
.login-otp-section {
  text-align: center;
}

.otp-intro {
  margin-bottom: 20px;
}

.otp-badge-icon {
  font-size: 32px;
  margin-bottom: 8px;
}

.otp-title {
  font-size: 18px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 4px;
}

.otp-subtitle {
  font-size: 13px;
  color: #94a3b8;
}

.otp-code-input {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.3em;
  padding: 0 16px;
}

.login-back-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 14px;
  padding: 8px;
  transition: color 0.15s;
}

.login-back-btn:hover {
  color: #ffffff;
}

@media (max-width: 640px) {
  #topbarAuthBtn {
    height: 34px;
    padding: 0 10px;
  }
  #topbarAuthBtn .auth-name {
    display: none !important;
  }
  #topbarAuthBtn .auth-badge {
    display: none !important;
  }
}

/* Theme Toggle Button */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.theme-toggle-btn svg {
  color: #f59e0b;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s;
}

.theme-toggle-btn:hover svg {
  transform: rotate(20deg) scale(1.1);
  color: #fbbf24;
}

/* ================================================================
   LIGHT MODE STYLING SYSTEM (SYUMRA ADMIN PRO INSPIRED)
   ================================================================ */
body.theme-light {
  background: #F3F4F6 !important;
  color: #0F172A;
}

body.theme-light #creator {
  background: radial-gradient(ellipse 65% 75% at 42% 52%, rgba(255, 255, 255, 0.1) 0%, rgba(241, 245, 249, 0.75) 75%) !important;
}

/* Creator tokens, light theme. Every creator component reads these (see #creator), so the light theme needs no
   per-component overrides: that is what removed the old !important wall and the light-only mismatches (a framed deck at
   >=1440 px, near-invisible explore captions, a boxed hero that the dark theme did not have). */
body.theme-light #creator {
  --cr-accent: #065f46;                       /* emerald-800: >= 4.5:1 as text on the tinted selected fill, 3:1+ as a border on white */
  --cr-accent-soft: rgba(16, 185, 129, 0.13);
  --cr-accent-glow: rgba(16, 185, 129, 0.24);
  --cr-warn: #92400e;
  --cr-text: #0f172a;
  --cr-text-2: #334155;
  --cr-text-3: #4b5a70;
  --cr-line: rgba(15, 23, 42, 0.18);
  --cr-line-strong: rgba(15, 23, 42, 0.5);
  --cr-line-faint: rgba(15, 23, 42, 0.08);
  --cr-fill: #f1f5f9;
  --cr-fill-hover: #e2e8f0;
  --cr-surface: rgba(255, 255, 255, 0.96);
  --cr-surface-solid: #ffffff;
  --cr-ring: #065f46;
  --cr-shadow: 0 25px 60px -10px rgba(15, 23, 42, 0.18);
  --cr-deck-bg: rgba(255, 255, 255, 0.94);
  --cr-deck-line: rgba(15, 23, 42, 0.12);
  --cr-deck-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
  --cr-frame: rgba(15, 23, 42, 0.34);
  --cr-hero-bg: rgba(255, 255, 255, 0.80);
  --cr-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");   /* white on deep emerald */
  --cr-hint-bg: rgba(255, 255, 255, 0.9);
  --cr-chip-shadow: 0 6px 18px rgba(15, 23, 42, 0.07);
}


body.theme-light .creator-topbar,
body.theme-light #topbar {
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

body.theme-light .topbar-sub {
  color: #64748B;
}

body.theme-light .brand-title,
body.theme-light .topbar-brand {
  color: #4F46E5 !important;
  font-weight: 800;
}

body.theme-light .brand-logo-img,
body.theme-light .topbar-logo-img {
  border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(79, 70, 229, 0.25));
}

/* Pills and buttons in light mode */
body.theme-light .lang-pill,
body.theme-light .auth-btn,
body.theme-light .icon-btn {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.12);
  color: #1E293B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.theme-light .lang-pill:hover,
body.theme-light .auth-btn:hover,
body.theme-light .icon-btn:hover {
  background: rgba(16, 185, 129, 0.08);
  border-color: #10B981;
  color: #059669;
}

body.theme-light .auth-name {
  color: #0F172A;
}

body.theme-light .time-pill {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.theme-light .time-btn {
  color: #64748B;
}

body.theme-light .time-btn:hover {
  color: #0F172A;
}

body.theme-light .time-btn.active {
  background: rgba(16, 185, 129, 0.14);
  color: #065F46;
  border-color: rgba(16, 185, 129, 0.4);
}

/* In-game HUD in light mode */
body.theme-light .step-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #065F46;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

body.theme-light .step-dots .dot {
  background: rgba(0, 0, 0, 0.12);
}

body.theme-light .step-dots .dot.completed {
  background: #10B981;
}

body.theme-light .step-dots .dot.active {
  background: #10B981;
  box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
}

body.theme-light #stepCard,
body.theme-light .mission-card {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #0F172A;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.12);
}

body.theme-light #missionText {
  color: #334155;
}

body.theme-light .near-hint {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0F172A;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

body.theme-light #controlsHint {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #334155;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

body.theme-light .kbd {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.15);
  color: #0F172A;
}

body.theme-light #hint {
  background: rgba(255, 255, 255, 0.96);
  color: #0F172A;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Modals in light mode */
body.theme-light .settings-card,
body.theme-light .login-modal-card,
body.theme-light .route-card,
body.theme-light .ziarah-modal-card,
body.theme-light .completion-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0F172A;
  box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.22);
}

body.theme-light .settings-title,
body.theme-light .login-modal-title,
body.theme-light .route-title,
body.theme-light .ziarah-title {
  color: #0F172A;
}

body.theme-light .settings-sub,
body.theme-light .login-modal-subtitle,
body.theme-light .route-sub,
body.theme-light .ziarah-sub {
  color: #64748B;
}

body.theme-light .settings-section-title {
  color: #0F172A;
}

body.theme-light .modal-close-btn,
body.theme-light .login-modal-close {
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #475569;
}

body.theme-light .modal-close-btn:hover,
body.theme-light .login-modal-close:hover {
  background: rgba(0, 0, 0, 0.1);
  color: #0F172A;
}

body.theme-light .lang-card,
body.theme-light .theme-card {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid #E2E8F0;
  color: #0F172A;
}

body.theme-light .lang-card:hover,
body.theme-light .theme-card:hover {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.4);
}

body.theme-light .lang-card.active,
body.theme-light .theme-card.active {
  background: rgba(16, 185, 129, 0.12);
  border-color: #10B981;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.15);
}

body.theme-light .theme-card-desc {
  color: #64748B;
}

body.theme-light .theme-card-badge {
  background: rgba(0, 0, 0, 0.06);
  color: #475569;
}

body.theme-light .theme-card.active .theme-card-badge {
  background: rgba(16, 185, 129, 0.2);
  color: #065F46;
}

body.theme-light .settings-toggle-row {
  background: rgba(248, 250, 252, 0.9);
  border: 1px solid #E2E8F0;
  color: #0F172A;
}

/* Dropdowns in light mode */
body.theme-light .user-profile-dropdown,
body.theme-light .lang-dropdown {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #0F172A;
  box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.15);
}

body.theme-light .user-dropdown-name {
  color: #0F172A;
}

body.theme-light .user-dropdown-email {
  color: #64748B;
}

body.theme-light .user-dropdown-divider {
  background: rgba(0, 0, 0, 0.08);
}

body.theme-light .user-dropdown-item {
  color: #334155;
}

body.theme-light .user-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0F172A;
}

body.theme-light .lang-dropdown-item {
  color: #334155;
}

body.theme-light .lang-dropdown-item:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #0F172A;
}

body.theme-light .lang-dropdown-divider {
  background: rgba(0, 0, 0, 0.08);
}

/* Login inputs in light mode */
body.theme-light .login-input {
  background: rgba(248, 250, 252, 0.95);
  border: 1px solid #CBD5E1;
  color: #0F172A;
}

body.theme-light .login-input:focus {
  border-color: #10B981;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

body.theme-light .login-input-label {
  color: #334155;
}

body.theme-light .login-divider {
  color: #94A3B8;
}

body.theme-light .login-divider::before,
body.theme-light .login-divider::after {
  border-color: rgba(0, 0, 0, 0.08);
}

/* ================================================================
   SMALL DESKTOP WINDOWS (a mouse, 769-1290 px wide): the desktop layout, with nothing running off the screen.
   The top bar kept every word until the phone layout (768 px): in the Haram stages, with the map buttons, it ran past the right edge below
   1290 px; the keyboard hint and the stage hint were centred on the window, under the right panel; on a short window the panel's Back /
   Continue buttons were below the fold of a panel whose scrollbar is hidden. (Touch tablets use the tablet HUD below instead.)
   ================================================================ */
@media (min-width: 769px) and (max-width: 1290px) and (pointer: fine) {
  .time-btn .time-label { display: none; }                       /* the emoji say it */
  .time-btn { padding: 5px 9px; font-size: 15px; }
  #hint, #toast { left: calc(50% - 68px); max-width: max(260px, calc(100vw - 600px)); }   /* the middle of the free area between the sidebar and the panel */
  #controlsHint { left: calc(50% - 68px); }
}
@media (min-width: 769px) and (max-width: 1100px) and (pointer: fine) {
  .topbar-left .topbar-brand, .topbar-left .topbar-sub { display: none; }
  #langPillText, #langPill .lang-arrow { display: none; }
  #topbarAuthBtn .auth-name, #topbarAuthBtn .auth-badge { display: none !important; }   /* (the labels are inline-styled) */
}
@media (min-width: 769px) and (max-height: 700px) and (pointer: fine) {
  #infoPanel { padding-bottom: 0; }
  #infoPanel .panel-nav { position: sticky; bottom: 0; z-index: 2; margin-inline: -20px; padding: 12px 20px 14px; background: rgba(10, 16, 26, 0.96); border-radius: 0 0 20px 20px; }
}

/* ================================================================
   MOBILE HUD — phones (behaviour: src/mobile-hud.js)
   Portrait:  (max-width: 768px)
   Landscape: (orientation: landscape) and (max-height: 500px)   (wins over portrait when both match, e.g. 667x375)
   Everything below sits inside one of those queries (or is inert on desktop), so the desktop layout is untouched.
   The stage panel (#infoPanel) is a compact bar by default; body.hud-open turns it into the full card (a sheet).
   ================================================================ */
:root {
  --hud-st: env(safe-area-inset-top, 0px);
  --hud-sr: env(safe-area-inset-right, 0px);
  --hud-sb: env(safe-area-inset-bottom, 0px);
  --hud-sl: env(safe-area-inset-left, 0px);
}
html, body { overscroll-behavior: none; }                /* no pull-to-refresh / rubber-banding while playing */
@supports (height: 100dvh) { html, body { height: 100dvh; } }   /* the visible height on mobile browsers whose toolbar collapses */
body { -webkit-touch-callout: none; }
button, .sidebar-item, .dot, #joystick { -webkit-tap-highlight-color: transparent; }
#sheetHandle { display: none; }                          /* the handle only exists in the phone layouts */
/* The closed login modal is invisible (opacity 0, pointer-events none) but its card is an overflow:auto scroll container at z-index 9999, and the
   compositor still counted that rectangle as a scroller for touch: a touch inside it (mid-screen: where the joystick now sits) arrived as a
   non-cancelable touchstart ("Ignored attempt to cancel a touchstart event"). Hidden means visibility:hidden on touch devices. */
body.touch .login-modal-overlay:not(.active) { visibility: hidden; transition: opacity 0.25s ease, visibility 0s linear 0.25s; }

@keyframes hud-sheet-in { from { opacity: 0.35; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (max-width: 768px), (orientation: landscape) and (max-height: 500px), (pointer: coarse) and (max-width: 1400px) {
  :root {
    --hud-joy: 118px;                                            /* the joystick's diameter (the phone landscape and the tablet blocks change it) */
    --hud-bg: rgba(10, 16, 26, 0.93);
    --hud-solid: #0c121c;
    --hud-ink: #e9edf5;
    --hud-ink-2: #a9b8cc;
    --hud-line: rgba(255, 255, 255, 0.09);
    --hud-grip: rgba(255, 255, 255, 0.34);
    /* first guesses; src/mobile-hud.js measures the real values (top bar bottom edge, space under the panel's top edge) */
    --hud-top: calc(var(--hud-st) + 54px);
    --hud-h: calc(max(8px, var(--hud-sb)) + 112px);
    --hud-chip-top: calc(var(--hud-top) + 8px);
  }
  body.theme-light {
    --hud-bg: rgba(255, 255, 255, 0.95);
    --hud-solid: #ffffff;
    --hud-ink: #0f172a;
    --hud-ink-2: #475569;
    --hud-line: rgba(15, 23, 42, 0.12);
    --hud-grip: rgba(15, 23, 42, 0.28);
  }

  #sidebar { display: none; }   /* (it was still on screen on landscape phones wider than 768 px) */

  /* ── Top bar: one row of controls ── */
  #topbar {
    flex-wrap: wrap; row-gap: 3px; align-items: center; justify-content: space-between;
    padding: calc(6px + var(--hud-st)) max(8px, var(--hud-sr)) 2px max(8px, var(--hud-sl));
  }
  .topbar-left { gap: 0; }
  .topbar-left .topbar-brand, .topbar-left .topbar-sub { display: none; }
  .topbar-center { order: 3; flex: 1 0 100%; gap: 3px; }
  .step-pill { display: none; }                                  /* the stage bar carries "Step x of y" */
  .step-dots { gap: 4px; padding-bottom: 3px; }
  .step-dots .dot { position: relative; width: 12px; height: 4px; }
  .step-dots .dot::before { content: ''; position: absolute; inset: -6px -2px; }
  .step-dots .dot.active { width: 22px; }
  .topbar-right { gap: 5px; flex: 0 1 auto; min-width: 0; margin-inline-start: auto; }
  .time-pill { padding: 2px; gap: 1px; }
  .time-btn { padding: 0; width: 30px; height: 30px; justify-content: center; font-size: 15px; }
  .time-btn .time-label { display: none; }
  #langPill { height: 36px; padding: 0 9px; }
  #langPillText, #langPill .lang-arrow { display: none; }
  #topbarAuthBtn { height: 36px; padding: 0 7px; }
  #topbarAuthBtn .auth-name, #topbarAuthBtn .auth-badge { display: none !important; }   /* the avatar says it (the labels are inline-styled, hence !important) */
  #topbar .icon-btn, #topbar .theme-toggle-btn { width: 36px; height: 36px; flex: none; font-size: 16px; }
  /* thumb-sized hit areas without a bigger look: 4 px of invisible padding around each control */
  #topbar .icon-btn, #topbar .lang-pill, #topbar .auth-btn { position: relative; }
  #topbar .icon-btn::after, #topbar .lang-pill::after, #topbar .auth-btn::after { content: ''; position: absolute; inset: -4px; }

  /* ── The stage panel ── */
  #infoPanel {
    position: fixed; z-index: 16;                                /* above stage overlays (15) and the joystick */
    left: max(8px, var(--hud-sl)); right: max(8px, var(--hud-sr)); width: auto;
    top: auto; bottom: max(8px, var(--hud-sb));
    max-height: none;
    padding: 0 12px 10px;
    border-radius: 18px;
    background: var(--hud-bg); color: var(--hud-ink);
    border: 1px solid var(--hud-line);
    box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.3), 0 10px 30px rgba(0, 0, 0, 0.26);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  }
  [dir="rtl"] #infoPanel { left: max(8px, var(--hud-sl)); right: max(8px, var(--hud-sr)); }

  /* the handle: grip + chevron, the whole top strip is the button (44 px) */
  #sheetHandle {
    display: block; position: relative; flex: none; grid-area: grip;
    width: 100%; height: 44px; margin: 0; padding: 0;
    border: 0; background: transparent; color: var(--hud-ink-2); font: inherit; cursor: pointer;
  }
  #sheetHandle::before {
    content: ''; position: absolute; top: 7px; left: 50%; width: 40px; height: 4px; margin-left: -20px;
    border-radius: 4px; background: var(--hud-grip);
  }
  #sheetHandle::after {
    content: ''; position: absolute; top: 19px; right: 10px; width: 9px; height: 9px;
    border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); opacity: 0.9;
  }
  [dir="rtl"] #sheetHandle::after { right: auto; left: 10px; }
  #sheetHandle:focus-visible { outline: 2px solid #4fd1a5; outline-offset: -3px; border-radius: 16px; }

  /* compact bar: [step | grip | chevron] / [title | Continue] / [ring + mission | Continue] */
  body:not(.hud-open) #infoPanel {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "grip grip" "title next" "msn next";
    column-gap: 10px; row-gap: 2px; align-items: center; align-content: start;
    overflow: visible;                                           /* the Continue button's pulse ring */
  }
  body:not(.hud-open) #stageNum {
    grid-area: grip; align-self: center; justify-self: start; position: relative; z-index: 1;
    margin: 5px 0 0; max-width: calc(50% - 30px); pointer-events: none;
    font-size: 10.5px; letter-spacing: 0.1em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body:not(.hud-open) #stageTitle {
    grid-area: title; margin: 0; font-size: 16px; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  body:not(.hud-open) #stageDesc,
  body:not(.hud-open) #circuitCard,
  body:not(.hud-open) #tipCard,
  body:not(.hud-open) #skipBtn,
  body:not(.hud-open) #prevBtn { display: none !important; }   /* (the cards switch display inline per stage) */
  body:not(.hud-open) #circuitCard[style*="display: block"]:has(.ziarah-btn.nearby) { display: block !important; grid-column: 1 / -1; margin: 6px 0 0; padding: 0; background: none; border: 0; }
  body:not(.hud-open) #circuitCard:has(.ziarah-btn.nearby) .circuit-inner,
  body:not(.hud-open) #circuitCard:has(.ziarah-btn.nearby) .cam-toggle-btn:not(.nearby) { display: none; }
  body:not(.hud-open) #circuitCard:has(.ziarah-btn.nearby) .circuit-cam-toggle { margin: 0; padding: 0; border: 0; }
  body:not(.hud-open) #mission {
    grid-area: msn; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px;
    margin: 0; padding: 0; background: none; border: 0; box-shadow: none;
  }
  body:not(.hud-open) #mission .info-card-top { display: contents; }
  body:not(.hud-open) #mission .info-card-label-row { display: none; }
  body:not(.hud-open) #missionProgress { width: 38px; height: 38px; }
  body:not(.hud-open) #ringText { font-size: 10px; color: var(--hud-ink); }
  body:not(.hud-open) #missionText {
    font-size: 12.5px; line-height: 1.3; font-weight: 600; color: var(--hud-ink);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  body:not(.hud-open) .panel-nav,
  body:not(.hud-open) .panel-nav-right { display: contents; }
  body:not(.hud-open) #nextBtn {
    grid-area: next; align-self: center; min-width: 100px; min-height: 52px; padding: 8px 10px;
    font-size: 13.5px; line-height: 1.15; white-space: normal;
  }

  /* the full card (a sheet): normal flow, internal scroll, Skip / Back / Continue pinned at the bottom */
  body.hud-open #infoPanel {
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    max-height: min(62vh, 560px);
    animation: hud-sheet-in 0.18s ease-out;
  }
  @supports (height: 100dvh) { body.hud-open #infoPanel { max-height: min(62dvh, 560px); } }
  body.hud-open #infoPanel { background: var(--hud-solid); padding-bottom: 0; }   /* (sticky Skip/Back/Continue sits flush with the panel's bottom edge) */
  body.hud-open #sheetHandle { position: sticky; top: 0; z-index: 3; margin: 0 -12px; width: calc(100% + 24px); background: var(--hud-solid); border-radius: 18px 18px 0 0; }
  body.hud-open #sheetHandle::after { top: 15px; right: 22px; transform: rotate(225deg); }
  [dir="rtl"] body.hud-open #sheetHandle::after { right: auto; left: 22px; }
  body.hud-open #stageNum { margin-top: 0; }
  body.hud-open #stageTitle { font-size: 20px; margin-bottom: 8px; }
  body.hud-open #stageDesc { font-size: 13px; margin-bottom: 12px; }
  body.hud-open .info-card { margin-bottom: 10px; padding: 12px 14px; }
  body.hud-open #missionText, body.hud-open #tipText { font-size: 13px; }
  body.hud-open .panel-nav {
    position: sticky; bottom: 0; z-index: 3; margin: 0 -12px; padding: 10px 12px 10px;
    background: var(--hud-solid); border-top: 1px solid var(--hud-line);
  }
  body.hud-open .panel-nav .btn { min-height: 44px; padding-inline: 12px; white-space: nowrap; }
  body.hud-open .panel-nav { gap: 6px; }
  body.hud-open .panel-nav-right { gap: 6px; }
  body.hud-open #nextBtn { min-height: 46px; }

  /* ── Light theme: the panel follows the top bar (it stayed dark before) ── */
  body.theme-light #infoPanel { box-shadow: 0 -4px 22px rgba(15, 23, 42, 0.14), 0 10px 28px rgba(15, 23, 42, 0.12); }
  body.theme-light #stageNum { color: #047857; }
  body.theme-light #stageDesc { color: var(--hud-ink-2); }
  body.theme-light #tipText { color: #475569; }
  body.theme-light #missionLabel { color: #c2410c; }
  body.theme-light .tip-label { color: #92400e; }
  body.theme-light #mission.done #missionLabel { color: #047857; }
  body.theme-light #ringBg { stroke: rgba(15, 23, 42, 0.12); }
  body.theme-light #ringText { color: #0f172a; }
  body.theme-light .circuit-count { color: #0f172a; }
  body.theme-light .circuit-hint { color: #475569; }
  body.theme-light .circuit-label { color: #047857; }
  body.theme-light .cam-toggle-btn { color: #065f46; }
  body.theme-light .btn { color: #0f172a; border-color: rgba(15, 23, 42, 0.16); background: rgba(15, 23, 42, 0.05); }
  body.theme-light .btn.outline { color: #334155; }
  body.theme-light .btn.ghost { color: #475569; border-color: transparent; background: transparent; }
  body.theme-light .btn.primary { color: #ffffff; border-color: #10b981; background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
  body.theme-light .tip-card { background: rgba(217, 119, 6, 0.08); }
  body.theme-light .btn.primary:disabled { opacity: 1; color: #047857; border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.16); box-shadow: none; }

  /* ── Joystick, transient messages, minimap ── */
  #joystick {
    width: var(--hud-joy); height: var(--hud-joy);
    background: rgba(8, 14, 24, 0.32); border: 2px solid rgba(255, 255, 255, 0.55); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
  }
  #joystickKnob { background: rgba(79, 209, 165, 0.88); border-color: rgba(255, 255, 255, 0.9); }
  #joystick::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; }   /* a forgiving touch zone */
  #joystickKnob { width: 50px; height: 50px; }
  #toast {
    top: calc(var(--hud-top) + 8px); max-width: calc(100vw - 24px);
    white-space: normal; text-align: center; padding: 10px 18px; font-size: 13.5px;
  }
  #hint {
    top: calc(var(--hud-top) + 62px); transform: translateX(-50%);
    max-width: min(88vw, 420px); padding: 10px 16px; font-size: 13.5px;
  }
  body:has(.hud-chip:not([hidden])) #toast { top: calc(var(--hud-top) + 78px); }
  body:has(.hud-chip:not([hidden])) #hint { top: calc(var(--hud-top) + 132px); }
  .haram-minimap { width: 96px; height: 96px; top: calc(var(--hud-top) + 6px); bottom: auto; left: max(10px, var(--hud-sl)); }
  [dir="rtl"] .haram-minimap { left: auto; right: max(10px, var(--hud-sr)); }

  /* the in-flight Miqat checklist (src/stages/miqat.js) fills the free area and scrolls inside it; the stage's own rule has a lower specificity */
  body #flight-miqat-overlay {
    top: calc(var(--hud-top) + 6px); bottom: calc(var(--hud-h) + 10px);
    left: max(8px, var(--hud-sl)); right: max(8px, var(--hud-sr));
    justify-content: flex-start; gap: 8px;
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none;
  }
  body #flight-miqat-overlay::-webkit-scrollbar { display: none; }
  body #flight-miqat-overlay .fmo-main-row { margin: 0; flex: none; }
  body #flight-miqat-overlay .fmo-top-banner { flex: none; padding: 6px 12px; font-size: 12px; gap: 8px; }
  body #flight-miqat-overlay .fmo-badge { white-space: nowrap; font-size: 10px; padding: 2px 8px; }
  body #flight-miqat-overlay .fmo-card { padding: 12px 14px; border-radius: 16px; }
  body #flight-miqat-overlay .fmo-card-sub { font-size: 11.5px; }
  body #flight-miqat-overlay .fmo-step-item { padding: 8px 10px; gap: 6px; }
  body #flight-miqat-overlay .fmo-btn { min-height: 40px; }
  body #flight-miqat-overlay .fmo-audio-bar { flex: none; margin: 0 auto; padding: 8px 12px; }
}

/* ── Portrait phones and tablets: the bar is docked at the bottom, the joystick sits right above its top edge ── */
@media (max-width: 768px), (pointer: coarse) and (orientation: portrait) and (max-width: 1400px) {
  #joystick { left: max(14px, var(--hud-sl)); bottom: calc(var(--hud-h) + 14px); }
  body.hud-open #joystick { visibility: hidden; opacity: 0; pointer-events: none; }   /* reading mode: the sheet owns the touches */
  #nearHint.near-hint {
    left: auto; right: max(12px, var(--hud-sr)); bottom: calc(var(--hud-h) + 14px);
    max-width: calc(100vw - 170px); transform: translateY(20px); font-size: 13px; padding: 8px 16px;
  }
  #nearHint.near-hint.show { transform: translateY(0); }
}
@media (max-width: 380px) {
  .topbar-left { display: none; }                                  /* the logo gives way: the crowded Haram row needs the width */
}
@media (max-width: 480px) {
  /* the time-of-day pill shows the current time only; a tap steps to the next one (src/mobile-hud.js) */
  #timePill .time-btn:not(.active) { display: none; }
  #timePill .time-btn.active { width: 32px; height: 32px; }
  #timePill.none-active .time-btn:first-child { display: flex; width: 32px; height: 32px; }
  #timePill.none-active .time-btn:first-child .time-emoji { display: none; }
  #timePill.none-active .time-btn:first-child::before { content: '\1F552'; }
}

/* ── Landscape phones and tablets: a narrow panel on the right, joystick bottom-left, one slim top row ── */
@media (orientation: landscape) and (max-height: 500px), (pointer: coarse) and (orientation: landscape) and (max-width: 1400px) {
  :root {
    --hud-joy: 96px;
    --hud-joy-bottom: max(10px, calc(var(--hud-sb) + 6px));        /* the joystick's bottom edge: what the docked overlays stay above */
    --hud-ov-w: clamp(240px, 32vw, 285px);                         /* width of the docked Miqat / prayer overlays */
    --hud-pw: clamp(230px, 31vw, 280px);
    --hud-r: calc(var(--hud-pw) + max(8px, var(--hud-sr)) + 8px);      /* what the panel takes from the right edge */
    --hud-top: calc(var(--hud-st) + 44px);
    --hud-chip-left: calc(50% - var(--hud-r) / 2);                     /* centre of the free area */
  }
  #topbar { flex-wrap: nowrap; column-gap: 8px; padding-top: calc(4px + var(--hud-st)); padding-bottom: 4px; }
  .topbar-center { order: 0; flex: 1 1 auto; justify-content: flex-start; align-items: flex-start; padding-inline-start: 2px; }
  .step-dots { padding-bottom: 0; }
  .step-dots .dot { width: 8px; }
  .step-dots .dot.active { width: 16px; }
  .topbar-right { margin-inline-start: 0; }
  .topbar-left { flex: none; }

  #infoPanel, [dir="rtl"] #infoPanel { left: auto; right: max(8px, var(--hud-sr)); width: var(--hud-pw); }
  body:not(.hud-open) #infoPanel {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "grip" "title" "msn" "next"; row-gap: 4px;
  }
  body:not(.hud-open) #stageNum { max-width: calc(100% - 30px); }
  body:not(.hud-open) #stageTitle { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 15px; }
  body:not(.hud-open) #nextBtn { width: 100%; min-height: 44px; margin-top: 4px; padding: 7px 12px; }
  #sheetHandle::before { display: none; }                         /* a side panel needs no grip, the chevron says it */
  #sheetHandle::after { top: 17px; }
  body.hud-open #sheetHandle::after { top: 13px; }
  body.hud-open #infoPanel { max-height: calc(100vh - var(--hud-top) - max(8px, var(--hud-sb)) - 10px); }
  @supports (height: 100dvh) { body.hud-open #infoPanel { max-height: calc(100dvh - var(--hud-top) - max(8px, var(--hud-sb)) - 10px); } }
  body.hud-open #stageTitle { font-size: 17px; }
  /* narrow side panel: Back + Continue share a row, Skip sits under them */
  body.hud-open .panel-nav { flex-wrap: wrap; }
  body.hud-open .panel-nav-right { flex: 1 1 100%; order: 1; }
  body.hud-open .panel-nav-right .btn { flex: 1 1 0; }
  body.hud-open #skipBtn { order: 2; flex: 1 1 100%; min-height: 36px; }

  #joystick {
    left: max(12px, calc(var(--hud-sl) + 8px));
    bottom: var(--hud-joy-bottom);
    width: var(--hud-joy);
    height: var(--hud-joy);
    z-index: 50;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    display: block !important;
  }
  body.hud-open #joystick { visibility: visible; opacity: 1; pointer-events: auto; }   /* the side panel does not cover it */

  #joystickKnob { width: 44px; height: 44px; }
  .haram-minimap { width: 84px; height: 84px; }
  /* transient messages live in the free area, never under the panel */
  #toast, #hint { left: calc(50% - var(--hud-r) / 2); max-width: calc(100vw - var(--hud-r) - 24px); }
  #toast { top: calc(var(--hud-top) + 6px); }
  #hint { top: calc(var(--hud-top) + 54px); }
  body:has(.hud-chip:not([hidden])) #toast { top: calc(var(--hud-top) + 68px); }
  body:has(.hud-chip:not([hidden])) #hint { top: calc(var(--hud-top) + 116px); }
  body .hud-chip { max-width: calc(100vw - var(--hud-r) - 16px); }
  #nearHint.near-hint { left: calc(50% - var(--hud-r) / 2); right: auto; bottom: calc(max(14px, var(--hud-sb) + 8px) + var(--hud-joy) + 28px); transform: translateX(-50%) translateY(20px); max-width: calc(100vw - var(--hud-r) - 24px); font-size: 13px; padding: 8px 16px; }
  #nearHint.near-hint.show { transform: translateX(-50%) translateY(0); }
}

/* ── Docked stage overlays (Miqat checklist, prayer / Zamzam flow): on the LEFT above the joystick. Landscape phones and tablets, and portrait
      tablets (a portrait phone keeps them full width over the scene) ── */
@media (orientation: landscape) and (max-height: 500px), (pointer: coarse) and (orientation: landscape) and (max-width: 1400px), (pointer: coarse) and (orientation: portrait) and (min-width: 600px) and (max-width: 1400px) {
  /* In-flight Miqat checklist: docked cleanly on the LEFT above joystick */
  body #flight-miqat-overlay {
    top: calc(var(--hud-top) + 2px);
    bottom: calc(var(--hud-joy-bottom) + var(--hud-joy) + 18px);
    left: max(12px, calc(var(--hud-sl) + 8px));
    right: auto;
    width: var(--hud-ov-w);
    max-width: calc(100vw - var(--hud-r) - 16px);
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-width: none;
    pointer-events: auto;
  }
  body #flight-miqat-overlay .fmo-top-banner {
    padding: 3px 10px;
    font-size: 11px;
    margin-bottom: 2px;
    align-self: flex-start;
  }
  body #flight-miqat-overlay .fmo-top-banner > :not(.fmo-badge) { display: none; }   /* the badge says it; the card has the title */
  body #flight-miqat-overlay .fmo-main-row {
    width: 100%;
    justify-content: flex-start;
    margin: 0;
  }
  body #flight-miqat-overlay .fmo-checklist-card {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - var(--hud-top) - var(--hud-joy-bottom) - var(--hud-joy) - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 8px 12px;
    gap: 6px;
    border-radius: 14px;
  }
  body #flight-miqat-overlay .fmo-card-header { gap: 8px; }
  body #flight-miqat-overlay .fmo-card-icon { width: 28px; height: 28px; font-size: 14px; border-radius: 8px; }
  body #flight-miqat-overlay .fmo-card-title { font-size: 13.5px; }
  body #flight-miqat-overlay .fmo-card-sub { font-size: 11px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  body #flight-miqat-overlay .fmo-steps { gap: 4px; }
  body #flight-miqat-overlay .fmo-step-item { padding: 5px 8px; gap: 6px; border-radius: 8px; }
  body #flight-miqat-overlay .fmo-step-num { width: 20px; height: 20px; font-size: 11px; }
  body #flight-miqat-overlay .fmo-step-text { font-size: 11.5px; font-weight: 600; }
  body #flight-miqat-overlay .fmo-step-desc { font-size: 10.5px; line-height: 1.25; }
  body #flight-miqat-overlay .fmo-btn-row { margin-top: 3px; gap: 6px; }
  body #flight-miqat-overlay .fmo-btn { min-height: 32px; padding: 3px 8px; font-size: 11px; border-radius: 8px; }
  body #flight-miqat-overlay .fmo-audio-bar { display: none !important; }
  body #flight-miqat-overlay #musalla-floating-prompt {
    top: calc(var(--hud-top) + 8px);
    left: calc(50% - var(--hud-r) / 2);
    padding: 8px 16px;
    font-size: 12px;
  }


  /* Prayer & Zamzam flow overlay: docked cleanly on the LEFT above joystick */
  #pz-overlay {
    position: fixed !important;
    top: calc(var(--hud-top) + 2px) !important;
    bottom: calc(var(--hud-joy-bottom) + var(--hud-joy) + 18px) !important;
    left: max(12px, calc(var(--hud-sl) + 8px)) !important;
    right: auto !important;
    transform: none !important;
    width: var(--hud-ov-w) !important;
    max-width: calc(100vw - var(--hud-r) - 16px) !important;
    z-index: 40;
    pointer-events: none;
  }
  #pz-overlay .pz-card {
    max-height: calc(100vh - var(--hud-top) - var(--hud-joy-bottom) - var(--hud-joy) - 36px);
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding: 8px 12px;
    gap: 6px;
    border-radius: 14px;
    pointer-events: auto;
  }
  #pz-overlay .pz-head { gap: 8px; }
  #pz-overlay .pz-icon { width: 26px; height: 26px; font-size: 13px; border-radius: 8px; }
  #pz-overlay .pz-title { font-size: 13.5px; }
  #pz-overlay .pz-sub { font-size: 10.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  #pz-overlay .pz-steps { gap: 4px; }
  #pz-overlay .pz-step { padding: 4px 8px; gap: 6px; border-radius: 8px; font-size: 11.5px; }
  #pz-overlay .pz-num { width: 18px; height: 18px; font-size: 10px; }
  #pz-overlay .pz-chips { gap: 3px; }
  #pz-overlay .pz-chip { font-size: 9px; padding: 1px 5px; }
  #pz-overlay .pz-caption { font-size: 11px; line-height: 1.3; min-height: unset; }
  #pz-overlay .pz-btn { padding: 4px 12px; font-size: 11.5px; border-radius: 8px; min-height: 32px; }

  body:has(#pz-overlay:not([style*="display: none"]):not([style*="display:none"])) .haram-minimap {
    right: max(12px, calc(var(--hud-sr) + 8px));
    left: auto;
    top: calc(var(--hud-top) + 4px);
  }

  /* Hide floating redundant hint when dedicated stage overlay is on-screen */
  body:has(#flight-miqat-overlay) #hint,
  body:has(#pz-overlay:not([style*="display: none"]):not([style*="display:none"])) #hint,
  body.miqat-overlay-active #hint,
  body.pz-active #hint,
  body.hud-open #hint {
    display: none !important;
  }
}


/* ========== TABLET HUD (touch tablets, 7-11 inch: 600-1400 px wide) ==========
   A tablet uses the phone layout above, not the desktop one: no sidebar, a compact stage bar (docked bottom-right in landscape, along the
   bottom in portrait) that opens into the full card, the joystick bottom-left. The desktop layout left a tablet 28-50 % of the screen for the
   scene, put the Continue button below the fold, clipped the top bar and hid the joystick behind the Haram minimap. This block only makes
   the pieces tablet-sized: a bigger joystick, panel and minimap, 44-48 px controls, labels where the top bar has room.
   (src/mobile-hud.js uses the same condition for the stage sheet.) */
@media (pointer: coarse) and (min-width: 600px) and (min-height: 501px) and (max-width: 1400px) {
  :root {
    --hud-joy: 136px;
    --hud-pw: clamp(300px, 30vw, 380px);
  }
  body #topbar { padding-inline: max(14px, var(--hud-sl)) max(14px, var(--hud-sr)); row-gap: 4px; }
  .topbar-left .topbar-logo-img { width: 32px; height: 32px; }
  .topbar-right { gap: 8px; }
  .time-pill { padding: 2px; gap: 2px; }
  .time-btn { width: 44px; height: 44px; font-size: 17px; }
  #langPill, #topbarAuthBtn { height: 44px; }
  #langPill { min-width: 44px; padding: 0 12px; }
  #topbarAuthBtn { padding: 0 8px; }
  #topbar .icon-btn, #topbar .theme-toggle-btn { width: 44px; height: 44px; font-size: 18px; }
  .step-dots .dot { height: 5px; }

  /* the stage bar / side panel */
  body:not(.hud-open) #stageNum { font-size: 11.5px; }
  body:not(.hud-open) #stageTitle { font-size: 18px; }
  body:not(.hud-open) #missionProgress { width: 44px; height: 44px; }
  body:not(.hud-open) #ringText { font-size: 11px; }
  body:not(.hud-open) #missionText { font-size: 14px; }
  body:not(.hud-open) #nextBtn { min-height: 52px; font-size: 15px; }
  body.hud-open #stageTitle { font-size: 22px; }
  body.hud-open #stageDesc { font-size: 14.5px; line-height: 1.55; }
  body.hud-open #missionText, body.hud-open #tipText { font-size: 14px; }
  body.hud-open .panel-nav .btn, body.hud-open #nextBtn { min-height: 48px; font-size: 14.5px; }
  body.hud-open #skipBtn { min-height: 44px; }

  /* joystick: where a thumb rests, clear of everything else */
  #joystickKnob { width: 60px; height: 60px; }
  #toast, #hint { font-size: 15px; }
  #hint { max-width: min(88vw, 520px); }
  #nearHint.near-hint { font-size: 14.5px; }

  /* the Haram minimap leaves the bottom-left corner (the joystick's) for the top-left, under the top bar */
  .haram-minimap { width: 128px; height: 128px; top: calc(var(--hud-top) + 8px); bottom: auto; left: max(12px, var(--hud-sl)); }

  /* Miqat flight checklist and the prayer / Zamzam flow: docked left above the (bigger) joystick */
  body #flight-miqat-overlay .fmo-card-title, #pz-overlay .pz-title { font-size: 15px; }
  body #flight-miqat-overlay .fmo-step-text, #pz-overlay .pz-step { font-size: 13px; }
  body #flight-miqat-overlay .fmo-btn, #pz-overlay .pz-btn { min-height: 44px; font-size: 13px; }
  body #flight-miqat-overlay #btn-play-talbiyah { width: 44px; height: 44px; }
  .cam-toggle-btn { min-height: 44px; }                           /* Tawaf: Panorama / floor / Ziarah buttons in the open card */
  .haram-minimap-compass { font-size: 10px; }
}
/* portrait: the bar keeps a readable width on the big ones, the joystick sits above it, the Miqat / prayer overlays dock left above the joystick */
@media (pointer: coarse) and (orientation: portrait) and (min-width: 600px) and (max-width: 1400px) {
  :root {
    --hud-r: 0px;                                                 /* (no side panel: the docked overlays may use the whole width) */
    --hud-joy-bottom: calc(var(--hud-h) + 18px);
    --hud-ov-w: clamp(320px, 46vw, 420px);
  }
  #infoPanel { max-width: 760px; margin-inline: auto; }
  [dir="rtl"] .haram-minimap { left: auto; right: max(12px, var(--hud-sr)); }   /* (no side panel to collide with: mirrored) */
  #joystick { left: max(20px, calc(var(--hud-sl) + 12px)); bottom: var(--hud-joy-bottom); }
  #nearHint.near-hint { bottom: var(--hud-joy-bottom); }
  body #flight-miqat-overlay .fmo-audio-bar { display: flex !important; }   /* (room for the Talbiyah player; landscape phones hide it) */
}
/* landscape: the joystick a thumb's width from the corner, the docked overlays a little wider */
@media (pointer: coarse) and (orientation: landscape) and (min-height: 501px) and (max-width: 1400px) {
  :root {
    --hud-joy-bottom: max(24px, calc(var(--hud-sb) + 16px));
    --hud-ov-w: clamp(300px, 34vw, 400px);
  }
  #joystick { left: max(24px, calc(var(--hud-sl) + 14px)); }
  [dir="rtl"] .haram-minimap { left: max(12px, var(--hud-sl)); right: auto; }   /* the side panel is on the right in Arabic too: the minimap stays clear of it */
}
/* wide tablets: the top bar has room for the words */
@media (pointer: coarse) and (min-width: 1100px) and (min-height: 501px) and (max-width: 1400px) {
  .time-btn { width: auto; padding: 0 12px; gap: 5px; font-size: 13px; }
  .time-btn .time-label { display: inline; }
  #langPillText, #langPill .lang-arrow { display: inline-block; }
}
/* a touch device whose browser does not report touch events (some tablets, DevTools emulation) still gets its joystick */
@media (pointer: coarse) {
  body:not(.makkah-exploring) #joystick { display: block; }
  body.mx-walking #joystick#joystick { display: block !important; z-index: 160; }   /* (Explore's walk mode: the same rule as for body.touch) */
}

@media (prefers-reduced-motion: reduce) {
  body.hud-open #infoPanel { animation: none; }
}


/* ── Stage loading veil (heavy stages are built across frames; see stage-controller.js) ── */
.stage-loading {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #12202a 0%, #070b11 70%);
  color: #e9edf5; text-align: center;
  animation: stageLoadingIn 0.18s ease-out;
}
.stage-loading[hidden] { display: none; }
.stage-loading-card { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px; max-width: 80vw; }
.stage-loading-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(79, 209, 165, 0.22); border-top-color: #4fd1a5;
  animation: stageSpin 0.9s linear infinite;
}
.stage-loading-title { font-size: 1.15rem; font-weight: 700; letter-spacing: 0.01em; }
.stage-loading-sub { font-size: 0.85rem; opacity: 0.7; }
@keyframes stageSpin { to { transform: rotate(360deg); } }
@keyframes stageLoadingIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stage-loading-spinner { animation-duration: 2.4s; } .stage-loading { animation: none; } }


/* ========== RESUME CARD (Creator) + FIRST-RUN TUTORIAL (coach card) ========== */
.resume-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--cr-accent); border-radius: 14px;
  background: var(--cr-accent-soft);
}
.resume-card[hidden] { display: none; }
.resume-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.resume-icon { width: 24px; height: 24px; flex: 0 0 auto; color: var(--cr-accent); }
.resume-text { min-width: 0; }
.resume-title { font-size: 14px; font-weight: 700; color: var(--cr-text); }
.resume-meta { margin-top: 2px; font-size: 12.5px; line-height: 1.35; color: var(--cr-text-2); overflow-wrap: anywhere; }
.resume-actions { display: flex; gap: 8px; }
.resume-continue, .resume-new { min-height: 44px; border-radius: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.resume-continue { flex: 1; border: none; background: var(--cr-cta); color: var(--cr-cta-ink); }
.resume-continue:hover { background: var(--cr-cta-hover); }
.resume-new { padding: 0 14px; border: 1px solid var(--cr-line-strong); background: transparent; color: var(--cr-text); font-weight: 600; }
.resume-new:hover { background: var(--cr-fill-hover); }
.resume-continue:disabled, .resume-new:disabled { opacity: 0.6; cursor: default; }
.resume-continue:focus-visible, .resume-new:focus-visible { outline: 2px solid var(--cr-ring); outline-offset: 2px; }

.coach {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%); z-index: 12;
  display: flex; align-items: flex-start; gap: 12px;
  width: min(460px, calc(100vw - 24px)); box-sizing: border-box;
  padding: 12px 14px; border-radius: 16px;
  background: rgba(12, 18, 30, 0.92); border: 1px solid rgba(79, 209, 165, 0.45); color: #eef3fa;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px);
  pointer-events: none;                       /* the card never blocks the scene; only Skip takes clicks */
}
.coach[hidden] { display: none; }
.coach-swap { animation: coachIn 0.35s ease both; }
.coach-icon { flex: 0 0 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: rgba(79, 209, 165, 0.15); color: #4fd1a5; }
.coach-icon ui-icon { width: 22px; height: 22px; }
.coach-body { flex: 1; min-width: 0; }
.coach-title { font-size: 14px; font-weight: 700; }
.coach-text { margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: #b9c5d6; }
.coach-dots { display: flex; gap: 5px; margin-top: 9px; }
.coach-dots i { width: 18px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.18); }
.coach-dots i.done { background: #4fd1a5; }
.coach-dots i.on { background: #8ff0cd; }
.coach-skip {
  pointer-events: auto; flex: 0 0 auto; min-height: 32px; padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 10px; background: transparent; color: #cbd5e1;
  font: inherit; font-size: 12px; cursor: pointer;
}
.coach-skip:hover { background: rgba(255, 255, 255, 0.08); }
.coach-skip:focus-visible { outline: 2px solid #8ff0cd; outline-offset: 2px; }
.coach-pulse { animation: coachPulse 1.4s ease-in-out infinite; }
body.onboarding #controlsHint { display: none; }
@keyframes coachIn { from { opacity: 0; transform: translateX(-50%) translateY(-6px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
@keyframes coachPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 165, 0); } 50% { box-shadow: 0 0 0 7px rgba(79, 209, 165, 0.45); } }
@media (max-width: 768px) { .coach { top: 64px; padding: 10px 12px; } .coach-text { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .coach-swap, .coach-pulse { animation: none; } }
body.theme-light .coach { background: rgba(255, 255, 255, 0.96); border-color: rgba(6, 95, 70, 0.45); color: #0f172a; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14); }
body.theme-light .coach-icon { background: rgba(16, 185, 129, 0.13); color: #065f46; }
body.theme-light .coach-text { color: #334155; }
body.theme-light .coach-dots i { background: rgba(15, 23, 42, 0.14); }
body.theme-light .coach-dots i.done { background: #065f46; }
body.theme-light .coach-dots i.on { background: #10b981; }
body.theme-light .coach-skip { border-color: rgba(15, 23, 42, 0.3); color: #334155; }

/* the tutorial card shares the top of the screen with the Hajj direction chip and the stage hint: they stack under it while it is up */
body.onboarding { --hud-chip-top: 154px; }
@media (max-width: 768px), (orientation: landscape) and (max-height: 500px), (pointer: coarse) and (max-width: 1400px) {
  .coach { top: calc(var(--hud-top, 60px) + 6px); left: calc(50% - var(--hud-r, 0px) / 2); width: min(460px, calc(100vw - var(--hud-r, 0px) - 24px)); }
  body.onboarding { --hud-chip-top: calc(var(--hud-top, 60px) + 6px + 86px); }
  body.onboarding #hint { top: calc(var(--hud-top, 60px) + 6px + 86px); }
  body.onboarding:has(.hud-chip:not([hidden])) #hint { top: calc(var(--hud-top, 60px) + 6px + 86px + 64px); }
}


/* ========== COMPLETION CERTIFICATE (button on the completion screen + preview dialog) ========== */
/* (the selectors out-rank `.completion-actions .btn.primary`: the certificate is a keepsake, gold, not the green of "Return to Home") */
.completion-actions .btn.cert-btn { min-height: 44px; background: linear-gradient(135deg, #e3c777, #b79a52); color: #2a1f05; border: none; font-weight: 700; box-shadow: 0 6px 18px rgba(183, 154, 82, 0.28); }
.completion-actions .btn.cert-btn:hover:not(:disabled) { background: linear-gradient(135deg, #ecd48c, #c4a85f); filter: none; }
.completion-actions .btn.cert-btn:focus-visible { outline: 2px solid #fff3cf; outline-offset: 2px; }
body.theme-light .completion-actions .btn.cert-btn { color: #2a1f05; border: none; background: linear-gradient(135deg, #e3c777, #b79a52); }
body.theme-light .completion-actions .btn.cert-btn:hover:not(:disabled) { background: linear-gradient(135deg, #ecd48c, #c4a85f); }
.cert-modal {
  position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(4, 7, 12, 0.82); backdrop-filter: blur(10px);
}
.cert-modal[hidden] { display: none; }
.cert-card {
  width: min(520px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: rgba(12, 18, 30, 0.98); color: #eef3fa; border: 1px solid rgba(216, 184, 102, 0.45); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.cert-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cert-title { margin: 0; font-size: 16px; font-weight: 700; }
.cert-x { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.cert-x ui-icon { width: 18px; height: 18px; }
.cert-x:hover { background: rgba(255, 255, 255, 0.08); }
.cert-stage { position: relative; display: grid; place-items: center; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); }
.cert-img { width: min(100%, calc(min(56vh, 620px) * 0.8)); height: auto; aspect-ratio: 4 / 5; object-fit: contain; border-radius: 8px; background: rgba(255, 255, 255, 0.04); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); transition: opacity 0.2s; }
.cert-stage.busy .cert-img { opacity: 0.35; }
.cert-spinner { display: none; position: absolute; width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(216, 184, 102, 0.25); border-top-color: #d8b866; animation: stageSpin 0.9s linear infinite; }
.cert-stage.busy .cert-spinner { display: block; }
.cert-field { display: flex; flex-direction: column; gap: 6px; }
.cert-field label { font-size: 12px; color: #a9b8cc; }
.cert-field input { font: inherit; font-size: 15px; padding: 10px 12px; color: inherit; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px; }
.cert-field input:focus-visible, .cert-actions .btn:focus-visible, .cert-x:focus-visible { outline: 2px solid #8ff0cd; outline-offset: 2px; }
.cert-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cert-actions .btn { flex: 1 1 140px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.cert-actions .btn[hidden] { display: none; }
.cert-actions .btn ui-icon { width: 16px; height: 16px; }
.cert-status { min-height: 18px; font-size: 12.5px; color: #8ff0cd; overflow-wrap: anywhere; }
@media (max-width: 480px) { .cert-card { padding: 12px; gap: 10px; } .cert-img { width: min(100%, calc(min(50vh, 560px) * 0.8)); } }
@media (max-height: 640px) { .cert-img { width: min(100%, calc(44vh * 0.8)); } }
@media (pointer: coarse) { .cert-x { width: 44px; height: 44px; } }
body.theme-light .cert-card { background: rgba(255, 255, 255, 0.99); color: #0f172a; border-color: rgba(140, 108, 30, 0.45); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25); }
body.theme-light .cert-x { border-color: rgba(15, 23, 42, 0.25); }
body.theme-light .cert-stage { background: rgba(15, 23, 42, 0.05); }
body.theme-light .cert-field label { color: #475569; }
body.theme-light .cert-field input { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.35); }
body.theme-light .cert-status { color: #065f46; }

/* ========== GROUP ROOMS (net/group-ui.js): the dialog, the roster, the top-bar chip ========== */
.grp-modal {
  position: fixed; inset: 0; z-index: 121; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: rgba(4, 7, 12, 0.82); backdrop-filter: blur(10px);
}
.grp-modal[hidden] { display: none; }
.grp-card {
  width: min(520px, 100%); max-height: 100%; overflow-y: auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: rgba(12, 18, 30, 0.98); color: #eef3fa; border: 1px solid rgba(79, 209, 165, 0.4); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.grp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grp-title { margin: 0; font-size: 17px; font-weight: 700; }
.grp-x { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 10px; background: transparent; color: inherit; cursor: pointer; }
.grp-x ui-icon { width: 18px; height: 18px; }
.grp-x:hover { background: rgba(255, 255, 255, 0.08); }
.grp-sec { display: flex; flex-direction: column; gap: 10px; }
.grp-sec[hidden], .grp-error[hidden], .grp-status[hidden] { display: none; }
.grp-lead { margin: 0; font-size: 15px; font-weight: 600; }
.grp-help { margin: 0; font-size: 12.5px; line-height: 1.45; color: #a9b8cc; }
.grp-check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14.5px; cursor: pointer; }
.grp-check input { width: 22px; height: 22px; flex: 0 0 auto; accent-color: #4fd1a5; cursor: pointer; }
.grp-you { margin: 2px 0 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.grp-wide { width: 100%; min-height: 46px; }
.grp-join { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.grp-join label { font-size: 12.5px; color: #a9b8cc; }
.grp-join-row { display: flex; gap: 8px; }
.grp-join-row input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; box-sizing: border-box; font: inherit; font-size: 17px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-align: center;
  padding: 8px 12px; color: inherit; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 10px;
}
.grp-join-row input::placeholder { letter-spacing: 0.02em; font-weight: 400; text-transform: none; opacity: 0.6; }
.grp-join-row .btn { flex: 0 0 auto; min-height: 44px; padding-inline: 18px; }
.grp-codebox { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: rgba(79, 209, 165, 0.1); border: 1px solid rgba(79, 209, 165, 0.35); }
.grp-codelabel { font-size: 12.5px; color: #a9b8cc; }
.grp-code { font-size: 26px; letter-spacing: 0.14em; color: #8ff0cd; font-variant-numeric: tabular-nums; }
.grp-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.grp-actions .btn { flex: 1 1 140px; min-height: 44px; }
.grp-members-title { margin: 4px 0 0; font-size: 13px; font-weight: 700; letter-spacing: 0.02em; color: #c4d0e0; }
.grp-roster { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: min(34vh, 280px); overflow-y: auto; }
.grp-member { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 2px 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 255, 255, 0.05); }
.grp-line { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.grp-line .grp-dot { margin-top: 6px; }
.grp-line .grp-tag { flex: 0 0 auto; margin-top: 2px; }
.grp-member.you { background: rgba(79, 209, 165, 0.1); }
.grp-member.off { opacity: 0.6; }
.grp-name { font-weight: 600; font-size: 14.5px; overflow-wrap: anywhere; min-width: 0; flex: 0 1 auto; }
.grp-tag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #dbe5f2; }
.grp-tag.host { background: rgba(245, 196, 81, 0.22); color: #f5c451; }
.grp-where { font-size: 12px; line-height: 1.7; color: #a9b8cc; text-align: end; }
.grp-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #7b8798; }
.grp-dot.on { background: #4fd1a5; box-shadow: 0 0 0 3px rgba(79, 209, 165, 0.2); }
.grp-dot.wait { background: #f5c451; }
.grp-dot.bad { background: #f87171; }
.grp-hide { margin-top: 4px; min-height: 48px; cursor: pointer; border-radius: 10px; }
.grp-hide:hover { background: rgba(255, 255, 255, 0.05); }
body.theme-light .grp-hide:hover { background: rgba(15, 23, 42, 0.05); }
.grp-leave { width: 100%; min-height: 44px; color: #fca5a5; border-color: rgba(248, 113, 113, 0.5); }
.grp-leave:hover:not(:disabled) { background: rgba(248, 113, 113, 0.12); }
.grp-error { margin: 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px; color: #fecaca; background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.4); overflow-wrap: anywhere; }
.grp-status { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12.5px; color: #c4d0e0; }
.grp-status-btn { margin-inline-start: auto; min-height: 36px; }
.grp-card input:focus-visible, .grp-card .btn:focus-visible, .grp-x:focus-visible, .grp-card .switch-btn:focus-visible { outline: 2px solid #8ff0cd; outline-offset: 2px; }
.grp-set-btn { flex: 0 0 auto; min-height: 40px; }
.grp-chip { position: relative; }
.grp-chip[hidden] { display: none; }
.grp-badge { position: absolute; inset-block-start: -3px; inset-inline-end: -3px; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; font-size: 10.5px; line-height: 16px; font-weight: 700; text-align: center; background: #4fd1a5; color: #04281d; }
@media (max-width: 480px) { .grp-card { padding: 12px; gap: 10px; } .grp-code { font-size: 22px; } .grp-member { grid-template-columns: minmax(0, 1fr); } .grp-where { text-align: start; padding-inline-start: 17px; line-height: 1.4; } }
@media (max-height: 560px) { .grp-roster { max-height: 24vh; } }
@media (pointer: coarse) { .grp-x { width: 44px; height: 44px; } .grp-badge { inset-block-start: 0; inset-inline-end: 0; } }
body.theme-light .grp-card { background: rgba(255, 255, 255, 0.99); color: #0f172a; border-color: rgba(5, 120, 90, 0.45); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.25); }
body.theme-light .grp-x { border-color: rgba(15, 23, 42, 0.25); }
body.theme-light .grp-help, body.theme-light .grp-join label, body.theme-light .grp-codelabel, body.theme-light .grp-where, body.theme-light .grp-status { color: #475569; }
body.theme-light .grp-members-title { color: #334155; }
body.theme-light .grp-join-row input { background: #f1f5f9; border-color: rgba(15, 23, 42, 0.35); }
body.theme-light .grp-codebox { background: rgba(5, 150, 105, 0.1); border-color: rgba(5, 120, 90, 0.4); }
body.theme-light .grp-code { color: #047857; }
body.theme-light .grp-member { background: rgba(15, 23, 42, 0.05); }
body.theme-light .grp-member.you { background: rgba(5, 150, 105, 0.12); }
body.theme-light .grp-tag { background: rgba(15, 23, 42, 0.1); color: #334155; }
body.theme-light .grp-tag.host { background: rgba(180, 120, 0, 0.18); color: #8a5a00; }
body.theme-light .grp-leave { color: #b91c1c; border-color: rgba(185, 28, 28, 0.5); }
body.theme-light .grp-error { color: #991b1b; background: rgba(248, 113, 113, 0.14); }