#landingPage {
  --gold: #f0a90b;
  --gold-dark: #c8860a;
  --brown: #57321c;
  --brown-hover: #774325;

  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin 4vmin;
  box-sizing: border-box;
  overflow-x: hidden;
  color: #f3e7cf;
  font-family: var(--Rubik, "Rubik", "Cairo", "Tajawal", sans-serif);
  background:
    linear-gradient(rgba(20, 12, 5, 0.8), rgba(18, 10, 4, 0.92)),
    #241608 url(../images/world-map.png) center / cover no-repeat;
}

.landing-inner {
  width: min(94vw, 560px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(16px, 3vmin, 30px);
}

.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 1.4vmin, 12px);
}
.landing-chest {
  width: clamp(120px, 26vmin, 220px);
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.6));
}
.landing-title {
  margin: 0;
  font-size: clamp(2rem, 6.5vmin, 3.4rem);
  font-weight: 900;
  color: #ffd15c;
  text-shadow: 0 3px 0 #7a4e10, 0 6px 14px rgba(0, 0, 0, 0.55);
}
.landing-tag {
  margin: 0;
  max-width: 34ch;
  line-height: 1.75;
  color: #e7d6b6;
  font-size: clamp(0.9rem, 2.2vmin, 1.2rem);
}

.landing-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vmin, 18px);
  padding: clamp(18px, 3.6vmin, 34px);
  background: rgba(0, 0, 0, 0.42);
  border: 2px solid rgba(240, 169, 11, 0.55);
  border-radius: 18px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.landing-hint {
  margin: 0;
  color: #e7d6b6;
  font-size: clamp(0.9rem, 2vmin, 1.1rem);
}
.landing-balance {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  direction: ltr;
  background: linear-gradient(180deg, #fff7e2, #f4e2ba);
  border: 2px solid var(--gold-dark);
  border-radius: 999px;
  padding: 0.3em 1.15em 0.3em 0.5em;
  color: var(--brown);
  font-weight: 800;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.landing-balance img { width: clamp(24px, 3.4vmin, 32px); height: auto; }
.landing-balance span { font-size: clamp(1.1rem, 2.6vmin, 1.5rem); letter-spacing: 0.5px; }
.landing-balance small { opacity: 0.7; font-weight: 700; }

.landing-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(1rem, 2.4vmin, 1.3rem);
  padding: 0.7em 2em;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.landing-btn img { width: 1.3em; height: 1.3em; object-fit: contain; }
.landing-btn.primary {
  background: var(--brown);
  color: #fff;
  border: 1px solid wheat;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}
.landing-btn.primary:hover { background: var(--brown-hover); transform: translateY(-2px); }
.landing-btn.primary:active { background: #99552e; transform: scale(0.97); }
.landing-logout {
  color: #e9c98f;
  font-size: 0.9rem;
  text-decoration: underline;
}
.landing-logout:hover { color: #ffd77a; }

.landing-downloads { width: 100%; }
.landing-downloads h3 {
  margin: 0 0 14px;
  color: #ffd15c;
  font-size: clamp(1.1rem, 2.6vmin, 1.5rem);
}
.dl-row {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.dl-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  flex: 1 1 140px;
  min-width: 0;
  text-decoration: none;
  color: #f3e7cf;
  background: linear-gradient(180deg, #3a2b1f, #2a1e14);
  border: 2px solid var(--gold-dark);
  border-radius: 12px;
  padding: 0.7em 1.2em;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.dl-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45); }
.dl-ic { font-size: 1.9rem; line-height: 1; display: inline-flex; align-items: center; flex: none; }
.dl-ic svg { width: 1.55rem; height: 1.55rem; display: block; }
.dl-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.dl-txt b { font-size: 1.05rem; color: #ffd77a; }
.dl-txt small { font-size: 0.78rem; opacity: 0.75; }

.landing-social {
  display: flex;
  gap: 18px;
  font-size: 1.8rem;
}
.landing-social a { color: #d8b98a; transition: color 0.15s ease, transform 0.12s ease; }
.landing-social a:hover { color: #ffd77a; transform: translateY(-2px); }

@media (max-width: 560px) {
  .dl-row { flex-direction: column; }
  .dl-btn { width: 100%; flex: none; justify-content: flex-start; }
}

/* ===================== iOS / TestFlight page ===================== */
#iosPage {
  --gold: #f0a90b;
  --gold-dark: #c8860a;
  --brown: #57321c;

  width: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vmin 4vmin;
  box-sizing: border-box;
  overflow-x: hidden;
  color: #f3e7cf;
  font-family: var(--Rubik, "Rubik", "Cairo", sans-serif);
  background:
    linear-gradient(rgba(20, 12, 5, 0.8), rgba(18, 10, 4, 0.92)),
    #241608 url(../images/world-map.png) center / cover no-repeat;
}
.ios-inner {
  width: min(94vw, 540px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(14px, 2.6vmin, 22px);
}
.ios-icon {
  width: 66px;
  height: 66px;
  border-radius: 20px;
  background: #111;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
}
.ios-title {
  margin: 0;
  font-size: clamp(1.5rem, 4.6vmin, 2.2rem);
  font-weight: 900;
  color: #ffd15c;
  text-shadow: 0 3px 0 #7a4e10, 0 5px 12px rgba(0, 0, 0, 0.5);
}
.ios-note {
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(240, 169, 11, 0.5);
  border-radius: 14px;
  padding: clamp(14px, 3vmin, 22px);
  line-height: 1.85;
  font-size: clamp(0.9rem, 2.1vmin, 1.1rem);
}
.ios-note p { margin: 0; }
.ios-note b { color: #ffd77a; }
.ios-steps {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ios-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  text-align: start;
  background: rgba(0, 0, 0, 0.35);
  border: 2px solid rgba(240, 169, 11, 0.4);
  border-radius: 14px;
  padding: clamp(14px, 3vmin, 20px);
}
.ios-step-num {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: #3a2410;
  font-weight: 900;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);
}
.ios-step-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.ios-step-body b { color: #ffd77a; font-size: clamp(1rem, 2.3vmin, 1.15rem); }
.ios-step-body span { color: #e7d6b6; font-size: clamp(0.82rem, 1.9vmin, 0.98rem); line-height: 1.6; }
.ios-btn {
  text-decoration: none;
  font-weight: 800;
  font-size: clamp(0.85rem, 2vmin, 1rem);
  padding: 0.6em 1.4em;
  border-radius: 10px;
  margin-top: 4px;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.ios-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.ios-btn.store { background: #0a84ff; color: #fff; }
.ios-btn.join { background: var(--brown); color: #fff; border: 1px solid wheat; }
.ios-hint { margin: 0; color: #c9b48c; font-size: 0.82rem; }
.ios-back { color: #e9c98f; text-decoration: underline; font-size: 0.92rem; }
.ios-back:hover { color: #ffd77a; }