@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@500;600;700;800&display=swap');
/* ==================================================================
   LEGEND TOWN RP  —  FIXES  (v3)
   Loaded after the Next.js CSS so it wins on conflicts.
   ================================================================== */

/* ------------------------------------------------------------------
   1. COUNTDOWN
------------------------------------------------------------------ */
#lt-countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}
.lt-cd-seg {
  display: flex; flex-direction: column; align-items: center;
  min-width: 4.5rem;
}
.lt-cd-num {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: clamp(2rem, 7vw, 3.75rem);
  font-weight: 900; line-height: 1; color: #fff;
  letter-spacing: 0.05em;
  text-shadow: 0 0 24px rgba(34, 211, 238, 0.35);
}
.lt-cd-label {
  margin-top: 0.6rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.18em; color: #64748b; text-transform: uppercase;
}
.lt-cd-sep {
  font-family: ui-monospace, monospace;
  font-size: clamp(1.5rem, 5vw, 3rem);
  font-weight: 900; line-height: 1;
  color: rgba(34, 211, 238, 0.45); padding-top: 0.15em;
}
.lt-cd-livetext {
  font-size: clamp(1.5rem, 5vw, 2.5rem); font-weight: 900; color: #22d3ee;
  text-shadow: 0 0 30px rgba(34, 211, 238, 0.6);
  animation: lt-pulse 2s ease-in-out infinite;
}
.lt-cd-error { font-size: 0.9rem; color: #64748b; }
@keyframes lt-pulse { 0%,100%{opacity:1} 50%{opacity:.6} }

/* ------------------------------------------------------------------
   2. CENTERING FIX  (your "avatars start from the left" problem)
   The grid used xl:grid-cols-7. With 1-2 members they landed in
   column 1 = hard left. Auto-fit centres them instead.
------------------------------------------------------------------ */
#dynamic-team-content .grid,
.lt-center-grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: flex-start;
  gap: 2.5rem 1.75rem;
  max-width: 1400px;
  margin-inline: auto;
}
#dynamic-team-content .grid > * {
  flex: 0 0 auto;
  width: 150px;
}

/* same problem on the leaderboard podium */
#lb-podium, .lt-podium {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 1.25rem;
}

/* ------------------------------------------------------------------
   3. RTL / OVERFLOW
   Hardcoded translate offsets pushed content off-screen at every
   width. This is the sideways scroll + cut-off badges.
------------------------------------------------------------------ */
/* 100vw INCLUDES the vertical scrollbar (~15px). On a scrolling page the
   body became wider than the real viewport, and because the document is
   RTL the surplus was added on the left — which pushed the whole page to
   the right and clipped the header. 100% is the content width. */
html, body { overflow-x: hidden; max-width: 100%; }

/* The export used translate-* offsets as layout. They break at every
   width other than the designer's. Neutralised, and replaced below with
   real margin-based spacing so nothing collapses onto anything else. */
@media (max-width: 768px) {
  [class*="translate-x-"], [class*="-translate-x-"],
  [class*="translate-y-"], [class*="-translate-y-"] {
    transform: none !important;
  }
}

/* The old mobile drawer used to be an <aside> pinned here with
   translateX(100%). It is gone — assets/lt-menu.css owns the drawer
   now and uses its own .ltm-* classes. These rules are removed
   because two !important transform declarations on the same element
   were what left the drawer stranded off-screen. */

/* ------------------------------------------------------------------
   4. FAQ ACCORDION
------------------------------------------------------------------ */
.faq-answer.hidden { display: none !important; }
.faq-answer {
  animation: lt-fade .25s ease;
}
@keyframes lt-fade {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
button[onclick^="toggleFaq"] svg { transition: transform .3s ease; }

/* ------------------------------------------------------------------
   5. MODALS — hidden until opened
------------------------------------------------------------------ */
#apply-form-modal.hidden,
#team-member-modal.hidden,
#lightbox-modal.hidden { display: none !important; }
#apply-form-modal:not(.hidden) { display: flex !important; }

/* ------------------------------------------------------------------
   6. LEADERBOARD EMPTY STATE
------------------------------------------------------------------ */
.lt-lb-empty {
  padding: 3.5rem 1.5rem; text-align: center;
  border: 1px dashed rgba(148,163,184,.22);
  border-radius: 1.25rem; background: rgba(15,23,42,.35);
  margin: 1.5rem;
}
.lt-lb-empty-title { font-size: 1.05rem; font-weight: 800; color: #cbd5e1; }
.lt-lb-empty-sub { margin-top: .5rem; font-size: .85rem; color: #64748b; }

/* ==================================================================
   7. MOBILE / PHONE VIEW  —  this was completely unhandled
   ================================================================== */
@media (max-width: 1024px) {
  .lg\:grid-cols-\[58\%_42\%\] { grid-template-columns: 1fr !important; }
}

@media (max-width: 768px) {

  /* kill every desktop-only translate */
  [class*="translate-x-"], [class*="translate-y-"] { transform: none !important; }

  /* countdown fits the screen */
  .lt-cd-seg { min-width: 3.1rem; }
  #lt-countdown { gap: .2rem; }
  .lt-cd-num { font-size: 1.9rem; }
  .lt-cd-label { font-size: .55rem; letter-spacing: .1em; margin-top: .4rem; }
  .lt-cd-sep { font-size: 1.4rem; }

  /* hero headline was overflowing */
  h1 { font-size: clamp(2.2rem, 11vw, 3.5rem) !important; line-height: 1.05 !important; }
  h2 { font-size: clamp(1.5rem, 7vw, 2.25rem) !important; }
  .text-5xl, .text-6xl, .text-7xl, .text-8xl {
    font-size: clamp(1.75rem, 9vw, 2.75rem) !important;
  }

  /* stat counters: 2 per row, readable */
  .grid-cols-2 > .flex.flex-col { padding-inline: .25rem; }
  #counter-discord, #counter-players, #counter-partners, #counter-staff {
    font-size: 2.1rem !important;
  }
  #counter-discord + p, #counter-players + p,
  #counter-partners + p, #counter-staff + p {
    font-size: .8rem !important; margin-top: .35rem !important;
  }

  /* team avatars smaller so more fit per row */
  #dynamic-team-content .grid { gap: 1.5rem 1rem; }
  #dynamic-team-content .grid > * { width: 104px; }
  #dynamic-team-content img { width: 72px !important; height: 72px !important; }

  /* journey card stacks */
  .rounded-\[54px\] { border-radius: 24px !important; }
  .min-h-\[540px\] { min-height: auto !important; }

  /* FAQ padding was enormous on phone */
  button[onclick^="toggleFaq"] { padding: 1rem 1.1rem !important; }
  button[onclick^="toggleFaq"] h3 { font-size: .95rem !important; line-height: 1.5 !important; }
  .faq-answer { padding: 1rem 1.1rem 1.25rem !important; font-size: .875rem !important; line-height: 1.8 !important; }

  /* year nav wraps instead of overflowing */
  #journey-year-nav { gap: .75rem !important; }
  #journey-year-nav button { padding: .4rem .5rem !important; }
  #journey-year-nav span { font-size: .95rem !important; letter-spacing: .08em !important; }

  /* sections: tighten the huge desktop padding */
  section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
  .pb-56 { padding-bottom: 3rem !important; }
  .pt-44 { padding-top: 5rem !important; }
  .pt-36 { padding-top: 2.5rem !important; }
  main { padding-top: 4.5rem !important; }

  /* apply modal usable on phone */
  #apply-form-modal > div {
    max-width: 100% !important;
    border-radius: 1.25rem !important;
    padding: 1.25rem !important;
    margin: .5rem !important;
  }
  #apply-form-modal .grid { grid-template-columns: 1fr !important; }
  #apply-form-modal input,
  #apply-form-modal select,
  #apply-form-modal textarea {
    font-size: 16px !important;   /* stops iOS zoom-on-focus */
    padding: .75rem 1rem !important;
  }

  /* department cards stack */
  .lt-dept-grid, .grid.md\:grid-cols-3 { grid-template-columns: 1fr !important; }

  /* leaderboard podium stacks */
  #lb-podium > *, .lt-podium > * { width: 100% !important; max-width: 320px; }
}

@media (max-width: 420px) {
  .lt-cd-seg { min-width: 2.6rem; }
  .lt-cd-num { font-size: 1.6rem; }
  #dynamic-team-content .grid > * { width: 92px; }
}

/* ------------------------------------------------------------------
   8. MISC
------------------------------------------------------------------ */
:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
a, button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ==================================================================
   9. APPLICATION MODAL  —  rebuilt
   ================================================================== */
.lt-modal {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
}
.lt-modal.hidden { display: none !important; }

.lt-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(2, 5, 12, .88);
  backdrop-filter: blur(6px);
}

.lt-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 620px;
  max-height: 90vh; overflow-y: auto;
  background: linear-gradient(180deg, #0a0f18 0%, #05070d 100%);
  border: 1px solid rgba(34, 211, 238, .22);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(0,0,0,.8), 0 0 60px rgba(34,211,238,.06);
  padding: 1.75rem;
  direction: rtl; text-align: right;
  animation: lt-modal-in .28s cubic-bezier(.2,.8,.3,1);
}
@keyframes lt-modal-in {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.lt-modal-head { position: relative; padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.lt-modal-close {
  position: absolute; top: -.25rem; left: -.25rem;
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  color: #94a3b8; cursor: pointer; transition: .2s;
}
.lt-modal-close:hover { background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #f87171; }
.lt-modal-close svg { width: 18px; height: 18px; }

.lt-modal-badge {
  display: inline-block; font-size: .62rem; font-weight: 800;
  letter-spacing: .22em; color: #22d3ee;
  background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.25);
  padding: .35rem .85rem; border-radius: 999px;
}
.lt-modal-title { margin-top: .8rem; font-size: 1.6rem; font-weight: 900; color: #fff; }
.lt-modal-sub  { margin-top: .45rem; font-size: .82rem; color: #64748b; line-height: 1.7; }

/* progress steps */
.lt-steps { display: flex; align-items: center; gap: .5rem; margin: 1.4rem 0 1.1rem; }
.lt-steps.hidden { display: none; }
.lt-step { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex-shrink: 0; }
.lt-step-dot {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem; font-weight: 800;
  background: rgba(255,255,255,.05); color: #475569;
  border: 1px solid rgba(255,255,255,.1); transition: .3s;
}
.lt-step.is-active .lt-step-dot { background: #22d3ee; color: #04121a; border-color: #22d3ee; box-shadow: 0 0 18px rgba(34,211,238,.45); }
.lt-step.is-done .lt-step-dot   { background: rgba(34,211,238,.18); color: #22d3ee; border-color: rgba(34,211,238,.45); }
.lt-step-label { font-size: .62rem; font-weight: 700; color: #475569; white-space: nowrap; }
.lt-step.is-active .lt-step-label { color: #22d3ee; }
.lt-step-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); }

/* panels */
.lt-panel { display: none; }
.lt-panel.is-active { display: block; animation: lt-panel-in .3s ease; }
@keyframes lt-panel-in { from { opacity:0; transform: translateX(-10px);} to {opacity:1;transform:none;} }

/* fields */
.lt-field { margin-bottom: 1.05rem; }
.lt-row { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.lt-field label {
  display: block; font-size: .76rem; font-weight: 800;
  color: #cbd5e1; margin-bottom: .5rem;
}
.lt-field label span { color: #22d3ee; }
.lt-field input, .lt-field select, .lt-field textarea {
  width: 100%; background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.1); border-radius: 13px;
  padding: .8rem 1rem; color: #fff; font-size: .9rem; font-weight: 600;
  outline: none; transition: .2s; font-family: inherit;
}
.lt-field textarea { resize: vertical; line-height: 1.85; min-height: 120px; }
.lt-field input:focus, .lt-field select:focus, .lt-field textarea:focus {
  border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.12);
  background: rgba(0,0,0,.75);
}
.lt-field input::placeholder, .lt-field textarea::placeholder { color: #3f4c5f; font-weight: 500; }
.lt-hint { display: block; margin-top: .4rem; font-size: .68rem; color: #64748b; line-height: 1.6; }

.lt-select-wrap { position: relative; }
.lt-select-wrap::after {
  content: ''; position: absolute; left: 1rem; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid #22d3ee; border-bottom: 2px solid #22d3ee;
  transform: rotate(45deg); pointer-events: none;
}
.lt-field select { appearance: none; -webkit-appearance: none; padding-left: 2.4rem; cursor: pointer; }
.lt-field select option { background: #0a0f18; color: #fff; }

.lt-counter { margin-top: .45rem; font-size: .68rem; color: #64748b; text-align: left; }
.lt-counter.is-short { color: #f59e0b; }

/* actions */
.lt-actions { display: flex; gap: .7rem; margin-top: 1.4rem; }
.lt-btn {
  flex: 1; padding: .85rem 1.2rem; border-radius: 13px;
  font-size: .88rem; font-weight: 800; cursor: pointer;
  border: 1px solid transparent; transition: .22s;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: inherit;
}
.lt-btn-primary {
  background: #22d3ee; color: #04121a;
  box-shadow: 0 0 26px rgba(34,211,238,.32);
}
.lt-btn-primary:hover:not(:disabled) { background: #67e8f9; transform: translateY(-1px); }
.lt-btn-primary:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.lt-btn-ghost {
  background: rgba(255,255,255,.04); color: #94a3b8;
  border-color: rgba(255,255,255,.1); flex: 0 0 32%;
}
.lt-btn-ghost:hover { background: rgba(255,255,255,.08); color: #fff; }

.lt-spinner {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(4,18,26,.3); border-top-color: #04121a;
  animation: lt-spin .7s linear infinite;
}
.lt-spinner.hidden { display: none; }
@keyframes lt-spin { to { transform: rotate(360deg); } }

/* alerts */
.lt-alert {
  margin: .9rem 0; padding: .85rem 1rem; border-radius: 13px;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.3);
  color: #fca5a5; font-size: .8rem; font-weight: 700; text-align: center;
}
.lt-alert.hidden { display: none; }

.lt-success { padding: 2.5rem 1.5rem; text-align: center; }
.lt-success.hidden { display: none; }
.lt-success-icon {
  width: 62px; height: 62px; margin: 0 auto 1.1rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(34,197,94,.12); border: 1px solid rgba(34,197,94,.35);
  color: #4ade80;
}
.lt-success-icon svg { width: 28px; height: 28px; }
.lt-success h3 { font-size: 1.25rem; font-weight: 900; color: #fff; }
.lt-success p  { margin-top: .5rem; font-size: .85rem; color: #64748b; }

/* mobile */
@media (max-width: 768px) {
  .lt-modal { padding: .6rem; }
  .lt-modal-card { padding: 1.15rem; border-radius: 18px; max-height: 94vh; }
  .lt-modal-title { font-size: 1.25rem; }
  .lt-row { grid-template-columns: 1fr; gap: 0; }
  .lt-step-label { display: none; }
  .lt-steps { gap: .35rem; }
  .lt-field input, .lt-field select, .lt-field textarea { font-size: 16px; }
  .lt-btn { padding: .8rem .9rem; font-size: .82rem; }
  .lt-lb-row { grid-template-columns: 40px 1fr auto; gap: .6rem; padding: .7rem .8rem; }
  .lt-lb-name { font-size: .85rem; }
  .lt-lb-score { font-size: .8rem; }
  .lt-lb-list { padding: 0 .75rem 2rem; }
}

/* ==================================================================
   11. LEADERBOARD  —  fully centred rebuild
   ================================================================== */
.lt-lb-wrap {
  width: 100%;
  max-width: 1000px;
  margin-inline: auto;
  padding: 0 1rem 5rem;
  direction: rtl;
}

/* ---------- PODIUM ---------- */
.lt-podium {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 1.1rem;
  margin: 0 auto 3.5rem;
  flex-wrap: nowrap;
}

.lt-pod {
  flex: 1 1 0;
  max-width: 260px;
  position: relative;
  text-align: center;
  padding: 1.6rem 1rem 1.3rem;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(15,23,42,.85), rgba(5,7,13,.95));
  border: 1px solid rgba(255,255,255,.08);
  transition: transform .3s, box-shadow .3s;
}
.lt-pod:hover { transform: translateY(-6px); }

.lt-pod-1 {
  order: 2;
  padding-top: 2.2rem;
  border-color: rgba(250,204,21,.5);
  box-shadow: 0 0 45px rgba(234,179,8,.18);
  transform: translateY(-22px);
}
.lt-pod-1:hover { transform: translateY(-28px); }
.lt-pod-2 { order: 1; border-color: rgba(203,213,225,.35); }
.lt-pod-3 { order: 3; border-color: rgba(217,119,6,.4); }

.lt-pod-crown, .lt-pod-medal {
  position: absolute; top: -16px; left: 50%;
  transform: translateX(-50%);
  font-size: 1.9rem;
  filter: drop-shadow(0 3px 10px rgba(0,0,0,.6));
}
.lt-pod-1 .lt-pod-crown { font-size: 2.3rem; top: -20px; }

.lt-pod-av {
  width: 88px; height: 88px; margin: .5rem auto 1rem;
  border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(34,211,238,.55);
  background: #0a101d;
}
.lt-pod-1 .lt-pod-av {
  width: 108px; height: 108px;
  border-color: #facc15;
  box-shadow: 0 0 30px rgba(234,179,8,.45);
}
.lt-pod-av img { width: 100%; height: 100%; object-fit: cover; }

.lt-pod-name {
  font-size: .95rem; font-weight: 900; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lt-pod-1 .lt-pod-name { font-size: 1.1rem; }
.lt-pod-score {
  margin-top: .4rem; font-size: .85rem; font-weight: 800; color: #22d3ee;
}
.lt-pod-1 .lt-pod-score { color: #facc15; font-size: .95rem; }

.lt-pod-tag {
  display: inline-block; margin-top: .9rem;
  font-size: .6rem; font-weight: 800; letter-spacing: .12em;
  padding: .3rem .8rem; border-radius: 999px;
  background: rgba(255,255,255,.06); color: #94a3b8;
  border: 1px solid rgba(255,255,255,.1);
}
.lt-pod-tag-gold {
  background: rgba(250,204,21,.14); color: #facc15;
  border-color: rgba(250,204,21,.35);
}

/* ---------- RANKING PANEL ---------- */
.lt-lb-panel {
  width: 100%;
  border-radius: 26px;
  background: rgba(9,13,20,.75);
  border: 1px solid rgba(255,255,255,.07);
  padding: 1.75rem 1.5rem 1.5rem;
  backdrop-filter: blur(8px);
}

.lt-lb-head { text-align: center; margin-bottom: 1.5rem; }
.lt-lb-badge {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .6rem; font-weight: 800; letter-spacing: .2em;
  color: #22d3ee; background: rgba(34,211,238,.1);
  border: 1px solid rgba(34,211,238,.25);
  padding: .35rem .9rem; border-radius: 999px;
}
.lt-lb-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #22d3ee;
  animation: lt-blink 1.6s ease-in-out infinite;
}
@keyframes lt-blink { 0%,100%{opacity:1} 50%{opacity:.25} }
.lt-lb-head h2 { margin-top: .9rem; font-size: 1.5rem; font-weight: 900; color: #fff; }
.lt-lb-head p  { margin-top: .45rem; font-size: .82rem; color: #64748b; }

.lt-lb-search { margin-bottom: 1.1rem; }
.lt-lb-search input {
  width: 100%; background: rgba(0,0,0,.5);
  border: 1px solid rgba(255,255,255,.1); border-radius: 13px;
  padding: .75rem 1.1rem; color: #fff; font-size: .88rem;
  font-weight: 600; outline: none; transition: .2s; font-family: inherit;
}
.lt-lb-search input:focus {
  border-color: #22d3ee; box-shadow: 0 0 0 3px rgba(34,211,238,.12);
}
.lt-lb-search input::placeholder { color: #3f4c5f; }

.lt-lb-cols {
  display: grid; grid-template-columns: 62px 1fr auto;
  gap: 1rem; padding: 0 1.1rem .7rem;
  font-size: .66rem; font-weight: 800; letter-spacing: .1em;
  color: #475569; text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.lt-lb-col-rank  { text-align: center; }
.lt-lb-col-score { text-align: left; }

#lb-table-body { display: flex; flex-direction: column; gap: .4rem; padding-top: .7rem; }

.lt-lb-row {
  display: grid; grid-template-columns: 62px 1fr auto;
  align-items: center; gap: 1rem;
  padding: .8rem 1.1rem; border-radius: 13px;
  background: rgba(15,23,42,.4);
  border: 1px solid rgba(255,255,255,.05);
  transition: .18s;
}
.lt-lb-row:hover {
  background: rgba(15,23,42,.85);
  border-color: rgba(34,211,238,.28);
  transform: translateX(-4px);
}
.lt-lb-row.is-top { background: rgba(34,211,238,.05); border-color: rgba(34,211,238,.18); }
.lt-lb-row.rank-1 { background: rgba(250,204,21,.07); border-color: rgba(250,204,21,.28); }
.lt-lb-row.rank-2 { background: rgba(203,213,225,.05); border-color: rgba(203,213,225,.2); }
.lt-lb-row.rank-3 { background: rgba(217,119,6,.05);  border-color: rgba(217,119,6,.22); }

.lt-lb-rank  { font-size: 1rem; font-weight: 900; color: #64748b; text-align: center; }
.lt-lb-row.is-top .lt-lb-rank { font-size: 1.3rem; }
.lt-lb-name  { font-size: .92rem; font-weight: 800; color: #f1f5f9;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-lb-score { font-size: .92rem; font-weight: 900; color: #22d3ee; white-space: nowrap; text-align: left; }
.lt-lb-score span { font-size: .66rem; font-weight: 600; color: #64748b; }
.lt-lb-row.rank-1 .lt-lb-score { color: #facc15; }

.lt-lb-foot {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.06);
  text-align: center; font-size: .74rem; font-weight: 700; color: #475569;
}

/* loading + empty */
.lt-lb-loading { padding: 3.5rem 1rem; text-align: center; }
.lt-lb-spin {
  width: 32px; height: 32px; margin: 0 auto 1rem; border-radius: 50%;
  border: 3px solid rgba(34,211,238,.15); border-top-color: #22d3ee;
  animation: lt-spin .8s linear infinite;
}
.lt-lb-loading p { font-size: .84rem; color: #64748b; font-weight: 700; }

.lt-lb-empty {
  padding: 3.5rem 1.5rem; text-align: center;
  border: 1px dashed rgba(148,163,184,.18);
  border-radius: 18px; background: rgba(15,23,42,.3);
}
.lt-lb-empty-icon  { font-size: 2.4rem; margin-bottom: .9rem; opacity: .5; }
.lt-lb-empty-title { font-size: 1rem; font-weight: 800; color: #cbd5e1; }
.lt-lb-empty-sub   { margin-top: .5rem; font-size: .8rem; color: #64748b; }

/* ---------- leaderboard mobile ---------- */
@media (max-width: 768px) {
  .lt-lb-wrap { padding: 0 .75rem 3rem; }
  .lt-podium { flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
  .lt-pod-1 { order: 1; flex: 1 1 100%; max-width: 100%; transform: none; }
  .lt-pod-1:hover { transform: translateY(-4px); }
  .lt-pod-2 { order: 2; flex: 1 1 calc(50% - .4rem); }
  .lt-pod-3 { order: 3; flex: 1 1 calc(50% - .4rem); }
  .lt-pod-av { width: 66px; height: 66px; }
  .lt-pod-1 .lt-pod-av { width: 86px; height: 86px; }
  .lt-pod-name { font-size: .82rem; }
  .lt-pod-1 .lt-pod-name { font-size: .95rem; }
  .lt-pod-score { font-size: .75rem; }

  .lt-lb-panel { padding: 1.2rem .8rem 1rem; border-radius: 20px; }
  .lt-lb-head h2 { font-size: 1.15rem; }
  .lt-lb-cols, .lt-lb-row { grid-template-columns: 44px 1fr auto; gap: .6rem; }
  .lt-lb-row { padding: .7rem .8rem; }
  .lt-lb-name { font-size: .82rem; }
  .lt-lb-score { font-size: .8rem; }
  .lt-lb-search input { font-size: 16px; }
}

/* ==================================================================
   12. GLOBAL CENTRING SAFETY NET
   The export used fake Tailwind classes (max-w-11xl / 22xl / 111xl)
   which don't exist, so those blocks had no width to centre against.
   ================================================================== */
main > section,
main > main > section { width: 100%; }

.mx-auto { margin-inline: auto !important; }

/* department cards: centre the GRID, never shrink the CARDS.
   justify-items:center made items size to content, which is what
   pushed the text outside the card borders. */
.lt-dept-grid,
section .grid.md\:grid-cols-3 {
  max-width: 1100px;
  margin-inline: auto;
  justify-items: stretch;
}
section .grid.md\:grid-cols-3 > * { width: 100%; min-width: 0; }

/* ==================================================================
   13. VERTICAL RHYTHM  —  the overlap fix
   ------------------------------------------------------------------
   The countdown now has labels under the numbers, so it is taller
   than the single-line text it replaced. Everything below it needs
   real breathing room instead of the translate hacks.
   ================================================================== */

/* --- countdown block --- */
#lt-countdown {
  padding-block: .35rem .15rem;
}
.lt-cd-label {
  margin-top: .55rem;
  line-height: 1;
}

/* the box that wraps the countdown */
.lt-cd-box { padding: 1.35rem 2rem 1.5rem !important; }

/* space between countdown block and the stat counters */
.lt-cd-block { margin-bottom: 4rem !important; }

/* --- stat counters --- */
.lt-stats {
  row-gap: 2.5rem !important;
  column-gap: 3rem !important;
  margin-bottom: 3rem;
}
.lt-stats > div {
  padding-block: .5rem;
}
#counter-discord, #counter-players, #counter-partners, #counter-staff {
  line-height: 1.1;
}
#counter-discord + p, #counter-players + p,
#counter-partners + p, #counter-staff + p {
  margin-top: .65rem !important;
  line-height: 1.5;
}

/* --- section separation (was collapsing into the hero) --- */
main > section + section,
main > div > section + section {
  margin-top: 3.5rem;
}

/* the journey section heading was being overlapped by the counters */
#journey-year-nav {
  margin-top: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- leaderboard: crown was overlapping the page subtitle --- */
.lt-lb-wrap { padding-top: 2.5rem; }
.lt-podium  { margin-top: 2.25rem; }
.lt-pod-1   { margin-top: .5rem; }

/* podium reading order in RTL: 1st centre, 2nd right, 3rd left */
.lt-podium { direction: ltr; }
.lt-pod    { direction: rtl; }

/* ==================================================================
   14. MOBILE  —  spacing rebuilt
   ================================================================== */
@media (max-width: 768px) {

  /* countdown: keep 4 segments on one line, readable */
  #lt-countdown { gap: .15rem; padding-block: .25rem; }
  .lt-cd-seg    { min-width: 3rem; }
  .lt-cd-num    { font-size: 1.75rem; }
  .lt-cd-sep    { font-size: 1.25rem; }
  .lt-cd-label  { font-size: .52rem; letter-spacing: .06em; margin-top: .45rem; }

  .lt-cd-box   { padding: 1rem 1rem 1.15rem !important; }
  .lt-cd-block { margin-bottom: 2.5rem !important; }

  /* counters: 2x2 with real gaps */
  .lt-stats {
    row-gap: 2rem !important;
    column-gap: 1rem !important;
    margin-bottom: 2rem;
  }
  #counter-discord, #counter-players,
  #counter-partners, #counter-staff { font-size: 1.9rem !important; }
  #counter-discord + p, #counter-players + p,
  #counter-partners + p, #counter-staff + p {
    font-size: .72rem !important;
    margin-top: .45rem !important;
  }

  main > section + section,
  main > div > section + section { margin-top: 2rem; }

  /* journey year nav wraps to two rows instead of overflowing */
  #journey-year-nav {
    gap: .4rem !important;
    margin-top: 1.25rem;
    padding-inline: .5rem;
  }
  #journey-year-nav button { padding: .3rem .45rem !important; }
  #journey-year-nav span { font-size: .82rem !important; letter-spacing: .04em !important; }

  /* leaderboard top spacing */
  .lt-lb-wrap { padding-top: 1.5rem; }
  .lt-podium  { margin-top: 1.75rem; }
}

@media (max-width: 420px) {
  .lt-cd-seg   { min-width: 2.5rem; }
  .lt-cd-num   { font-size: 1.5rem; }
  .lt-cd-label { font-size: .48rem; }
  #counter-discord, #counter-players,
  #counter-partners, #counter-staff { font-size: 1.65rem !important; }
}

/* ==================================================================
   15. BRAND PALETTE  —  sampled from circleavatar.png
   ------------------------------------------------------------------
   The template shipped with cyan #22d3ee. Your actual logo is
   #2090D0 — a deeper, richer blue. These variables retune the whole
   site to the logo instead of the template default.
   ================================================================== */
:root {
  --lt-blue:        #2090D0;   /* logo primary          */
  --lt-blue-light:  #4FB3E8;   /* hover / highlight     */
  --lt-blue-bright: #6FCBF5;   /* text on dark          */
  --lt-blue-deep:   #1070B0;   /* shadow / gradient end */
  --lt-silver:      #C8D2DC;   /* logo silver           */
  --lt-ink:         #05070d;
  --lt-panel:       #0A1119;
  --lt-line:        rgba(32,144,208,.22);
}

/* retune the template's cyan to the logo blue */
.text-cyan-300, .text-cyan-400 { color: var(--lt-blue-bright) !important; }
.border-cyan-400\/20, .border-cyan-400\/40,
.border-cyan-500\/20, .border-cyan-500\/30 { border-color: var(--lt-line) !important; }
.bg-cyan-500\/5  { background-color: rgba(32,144,208,.06) !important; }
.bg-cyan-500\/10 { background-color: rgba(32,144,208,.11) !important; }
.bg-cyan-400\/10 { background-color: rgba(32,144,208,.11) !important; }

/* countdown + accents */
.lt-cd-num  { text-shadow: 0 0 26px rgba(32,144,208,.42); }
.lt-cd-sep  { color: rgba(32,144,208,.55); }
.lt-cd-livetext { color: var(--lt-blue-bright); text-shadow: 0 0 30px rgba(32,144,208,.6); }
.lt-lb-score, .lt-lb-badge { color: var(--lt-blue-bright); }
.lt-lb-dot  { background: var(--lt-blue); }
.lt-modal-badge { color: var(--lt-blue-bright); background: rgba(32,144,208,.1); border-color: var(--lt-line); }
.lt-step.is-active .lt-step-dot { background: var(--lt-blue); color: #fff; border-color: var(--lt-blue);
                                  box-shadow: 0 0 18px rgba(32,144,208,.5); }
.lt-step.is-done  .lt-step-dot { background: rgba(32,144,208,.2); color: var(--lt-blue-bright);
                                 border-color: var(--lt-line); }
.lt-step.is-active .lt-step-label { color: var(--lt-blue-bright); }
.lt-btn-primary { background: linear-gradient(135deg, var(--lt-blue), var(--lt-blue-deep));
                  color: #fff; box-shadow: 0 6px 22px rgba(32,144,208,.35); }
.lt-btn-primary:hover:not(:disabled) { background: linear-gradient(135deg, var(--lt-blue-light), var(--lt-blue)); }
.lt-spinner { border-color: rgba(255,255,255,.3); border-top-color: #fff; }
:focus-visible { outline-color: var(--lt-blue) !important; }

/* ==================================================================
   16. FORM CONTROLS  —  the "box and border" cleanup
   ================================================================== */
.lt-field input,
.lt-field select,
.lt-field textarea,
.lt-lb-search input {
  background: rgba(4, 9, 16, .75) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
  padding: .9rem 1.1rem !important;
  line-height: 1.6 !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
}
.lt-field input:hover,
.lt-field select:hover,
.lt-field textarea:hover { border-color: rgba(255,255,255,.16) !important; }

.lt-field input:focus,
.lt-field select:focus,
.lt-field textarea:focus,
.lt-lb-search input:focus {
  border-color: var(--lt-blue) !important;
  box-shadow: 0 0 0 3px rgba(32,144,208,.16) !important;
  background: rgba(4, 9, 16, .95) !important;
}
.lt-field textarea { min-height: 140px; line-height: 1.95 !important; }
.lt-field label { margin-bottom: .55rem; letter-spacing: .01em; }
.lt-field label span { color: var(--lt-blue-bright); }
.lt-select-wrap::after { border-color: var(--lt-blue-bright); }
.lt-modal-card { border-color: var(--lt-line); box-shadow: 0 30px 90px rgba(0,0,0,.85), 0 0 70px rgba(32,144,208,.07); }
.lt-field { margin-bottom: 1.25rem; }
.lt-row   { gap: 1rem; }

/* ==================================================================
   17. VERTICAL RHYTHM  —  the dead-space cleanup
   ------------------------------------------------------------------
   The export used pb-56 / pt-44 / min-h-[480px] everywhere, which
   left screens of empty black between sections.
   ================================================================== */
.pb-56 { padding-bottom: 4rem !important; }
.pb-32 { padding-bottom: 3rem !important; }
.pb-24 { padding-bottom: 2.5rem !important; }
.pt-44 { padding-top: 6rem !important; }
.py-56 { padding-block: 4rem !important; }
.mt-14 { margin-top: 2.5rem !important; }

.min-h-\[480px\], .min-h-\[500px\], .min-h-\[540px\],
.min-h-\[580px\], .min-h-\[420px\] { min-height: auto !important; }

/* Arabic line spacing was far too airy */
.leading-11 { line-height: 2.1 !important; }
.leading-10 { line-height: 2 !important; }
.leading-9  { line-height: 1.9 !important; }

/* team page: role sections were a screen apart */
#dynamic-team-content { padding-bottom: 3rem !important; }
#dynamic-team-content > section { margin-top: 1.75rem !important; }
#dynamic-team-content > section > div:first-child { padding-top: 1.5rem !important; padding-bottom: .5rem !important; }
#dynamic-team-content .grid { gap: 2rem 1.5rem; padding-block: .5rem 1.5rem; }

/* footer / social block had a screen of black under it */
footer { padding-block: 2.5rem 2rem !important; }
footer + div, .h-8.bg-transparent { height: 0 !important; display: none !important; }
main { padding-bottom: 0 !important; }

/* leaderboard crown was sitting on the page subtitle */
.lt-lb-wrap { padding-top: 3.25rem; }
.lt-podium  { margin-top: 2.75rem; }

@media (max-width: 768px) {
  .pb-56 { padding-bottom: 2.5rem !important; }
  .pb-32 { padding-bottom: 2rem !important; }
  .pt-44 { padding-top: 4rem !important; }
  .mt-14 { margin-top: 1.5rem !important; }
  .leading-11, .leading-10, .leading-9 { line-height: 1.85 !important; }
  #dynamic-team-content > section { margin-top: 1.25rem !important; }
  .lt-lb-wrap { padding-top: 2rem; }
  .lt-podium  { margin-top: 2rem; }
  footer { padding-block: 2rem 1.5rem !important; }
}

/* ==================================================================
   18. DEPARTMENT CARDS  —  rebuilt from scratch
   ------------------------------------------------------------------
   Written as real CSS, not Tailwind utilities, so the layout can't
   depend on whether a class made it into the compiled bundle.
   Sharp edges + bold corner brackets in the logo blue.
   ================================================================== */
.lt-dept-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.25rem;
  max-width: 1150px;
  margin: 0 auto;
  padding-inline: .5rem;
  align-items: stretch;
}

.lt-dept-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;      /* RTL */
  min-width: 0;               /* lets text wrap instead of overflowing */
  overflow: hidden;
  padding: 2.25rem 2rem 2rem;
  text-align: right;
  cursor: pointer;

  /* sharp edges, only a hint of a radius */
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.09);
  background:
    linear-gradient(160deg, rgba(32,144,208,.07) 0%, rgba(11,18,32,.5) 45%),
    rgba(8, 13, 22, .72);
  transition: transform .35s cubic-bezier(.2,.8,.3,1),
              border-color .35s, box-shadow .35s, background .35s;
}

/* bold corner brackets */
.lt-dept-card::before,
.lt-dept-card::after {
  content: '';
  position: absolute;
  width: 30px; height: 30px;
  border-color: var(--lt-blue);
  border-style: solid;
  opacity: .75;
  transition: width .35s, height .35s, opacity .35s, border-color .35s;
  pointer-events: none;
}
.lt-dept-card::before {
  top: -1px; right: -1px;
  border-width: 3px 3px 0 0;
  border-top-right-radius: 6px;
}
.lt-dept-card::after {
  bottom: -1px; left: -1px;
  border-width: 0 0 3px 3px;
  border-bottom-left-radius: 6px;
}

.lt-dept-card:hover {
  transform: translateY(-6px);
  border-color: rgba(32,144,208,.35);
  box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 40px rgba(32,144,208,.16);
}
.lt-dept-card:hover::before,
.lt-dept-card:hover::after {
  width: 56px; height: 56px;
  opacity: 1;
  border-color: var(--lt-blue-light);
}

/* icon */
.lt-dept-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px; height: 58px;
  margin-bottom: 1.5rem;
  border-radius: 8px;
  border: 1px solid rgba(32,144,208,.32);
  background: rgba(32,144,208,.12);
  color: var(--lt-blue-bright);
  flex-shrink: 0;
  transition: transform .35s, background .35s, border-color .35s;
}
.lt-dept-card:hover .lt-dept-icon {
  transform: scale(1.08);
  background: rgba(32,144,208,.2);
  border-color: rgba(32,144,208,.55);
}
.lt-dept-icon svg { width: 26px; height: 26px; }

/* text — the part that was overflowing */
.lt-dept-title {
  width: 100%;
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.25;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.lt-dept-desc {
  width: 100%;
  margin-top: .9rem;
  margin-bottom: 1.75rem;
  font-size: .875rem;
  line-height: 1.95;
  color: #94a3b8;
  overflow-wrap: anywhere;
}

/* button pinned to the bottom so all three cards line up */
.lt-dept-btn {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .65rem 1.4rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--lt-blue), var(--lt-blue-deep));
  box-shadow: 0 4px 16px rgba(32,144,208,.3);
  transition: background .3s, box-shadow .3s, transform .3s;
}
.lt-dept-card:hover .lt-dept-btn {
  background: linear-gradient(135deg, var(--lt-blue-light), var(--lt-blue));
  box-shadow: 0 6px 22px rgba(32,144,208,.45);
}
.lt-dept-btn svg { width: 15px; height: 15px; transform: scaleX(-1); }

@media (max-width: 900px) {
  .lt-dept-grid { grid-template-columns: 1fr; gap: 1.25rem; max-width: 480px; }
  .lt-dept-card { padding: 1.75rem 1.5rem 1.5rem; }
  .lt-dept-card::before, .lt-dept-card::after { width: 24px; height: 24px; }
  .lt-dept-icon { width: 50px; height: 50px; margin-bottom: 1.15rem; }
  .lt-dept-title { font-size: 1.3rem; }
  .lt-dept-desc { margin-bottom: 1.35rem; }
}

/* ==================================================================
   19. DEAD SPACE ABOVE THE FOOTER
   The social block sat inside a section with a huge min-height,
   leaving a screen of black before the footer.
   ================================================================== */
main > section:last-of-type { padding-bottom: 3rem !important; }
main section:last-child { margin-bottom: 0 !important; }
main > *:last-child { margin-bottom: 0 !important; }
.min-h-\[360px\], .min-h-\[250px\] { min-height: auto !important; }
footer { margin-top: 0 !important; }

@media (max-width: 768px) {
  main > section:last-of-type { padding-bottom: 2rem !important; }
}

/* ==================================================================
   20. LIVE STREAMS  —  embedded players
   ================================================================== */
.lt-live-root { max-width: 1150px; margin: 0 auto; padding: 0 1rem 4rem; }

.lt-live-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem;
  align-items: stretch;
}

.lt-live-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  background: #000;
  box-shadow: 0 20px 55px rgba(0,0,0,.6);
}
.lt-live-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.lt-live-meta {
  display: flex; flex-direction: column;
  padding: 1.35rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(160deg, rgba(32,144,208,.07), rgba(8,13,22,.8));
  text-align: right;
}
.lt-live-meta-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.lt-live-pill {
  font-size: .62rem; font-weight: 900; letter-spacing: .1em;
  padding: .3rem .7rem; border-radius: 4px; text-transform: uppercase;
}
.lt-live-twitch { background: rgba(145,70,255,.18); color: #c4a2ff; border: 1px solid rgba(145,70,255,.4); }
.lt-live-kick   { background: rgba(83,252,24,.14);  color: #9df57a; border: 1px solid rgba(83,252,24,.35); }

.lt-live-viewers { font-size: .78rem; font-weight: 800; color: #f87171; }
.lt-live-name  { margin-top: 1rem; font-size: 1.25rem; font-weight: 900; color: #fff; }
.lt-live-title { margin-top: .5rem; font-size: .82rem; line-height: 1.8; color: #94a3b8;
                 display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lt-live-game  { display: inline-block; margin-top: .75rem; font-size: .7rem; font-weight: 700;
                 color: var(--lt-blue-bright); background: rgba(32,144,208,.1);
                 border: 1px solid var(--lt-line); padding: .28rem .7rem; border-radius: 4px; }
.lt-live-open  {
  margin-top: auto; padding-top: 1.25rem;
  font-size: .8rem; font-weight: 800; color: var(--lt-blue-bright);
  transition: color .2s;
}
.lt-live-open:hover { color: var(--lt-blue-light); }

/* other-streams strip */
.lt-live-strip-title { margin: 2rem 0 .9rem; font-size: .85rem; font-weight: 800; color: #64748b; text-align: right; }
.lt-live-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }

.lt-live-card {
  position: relative; display: block; padding: 0; overflow: hidden;
  border-radius: 8px; border: 1px solid rgba(255,255,255,.08);
  background: rgba(8,13,22,.8); cursor: pointer; text-align: right;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.lt-live-card:hover { transform: translateY(-4px); border-color: rgba(32,144,208,.4);
                      box-shadow: 0 12px 30px rgba(0,0,0,.5); }
.lt-live-card.is-active { border-color: var(--lt-blue); box-shadow: 0 0 0 1px var(--lt-blue), 0 0 26px rgba(32,144,208,.28); }
.lt-live-card img, .lt-live-noimg { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: #0a0f18; }
.lt-live-card-pill { position: absolute; top: .5rem; right: .5rem; font-size: .55rem; font-weight: 900;
                     padding: .22rem .5rem; border-radius: 3px; letter-spacing: .08em; }
.lt-live-card-name { display: block; padding: .6rem .75rem .1rem; font-size: .82rem; font-weight: 800; color: #fff;
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lt-live-card-view { display: block; padding: 0 .75rem .7rem; font-size: .68rem; font-weight: 700; color: #f87171; }

/* offline / loading */
.lt-live-off { padding: 4rem 1.5rem; text-align: center;
               border: 1px dashed rgba(148,163,184,.18); border-radius: 12px;
               background: rgba(15,23,42,.3); }
.lt-live-off-icon { font-size: 2.4rem; opacity: .5; margin-bottom: .9rem; }
.lt-live-off-title { font-size: 1rem; font-weight: 800; color: #cbd5e1; }
.lt-live-off-sub   { margin-top: .5rem; font-size: .82rem; color: #64748b; }
.lt-live-spin { width: 30px; height: 30px; margin: 0 auto 1rem; border-radius: 50%;
                border: 3px solid rgba(32,144,208,.15); border-top-color: var(--lt-blue);
                animation: lt-spin .8s linear infinite; }

@media (max-width: 900px) {
  .lt-live-stage { grid-template-columns: 1fr; }
  .lt-live-meta  { padding: 1.1rem; }
  .lt-live-name  { font-size: 1.1rem; margin-top: .75rem; }
  .lt-live-open  { padding-top: 1rem; }
  .lt-live-strip { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
  .lt-live-root  { padding: 0 .75rem 2.5rem; }
}

/* ==================================================================
   21. MOBILE DRAWER  —  moved out
   ------------------------------------------------------------------
   The old skin lived here and styled `aside` and `#mobile-menu-overlay`
   directly. The backdrop was forced to z-index 55 with !important
   while the drawer, trapped inside <header class="fixed z-50">, could
   never paint above 50 — so the backdrop covered the menu.
   The drawer now lives in <body> and is styled by assets/lt-menu.css.
   ================================================================== */

/* ==================================================================
   22. SHARP CORNERS  —  site-wide, matching the apply page
   ================================================================== */
.rounded-3xl, .rounded-2xl, .rounded-\[30px\], .rounded-\[54px\],
.rounded-\[24px\], .rounded-xl { border-radius: 6px !important; }
.rounded-lg  { border-radius: 5px !important; }
.rounded-md  { border-radius: 4px !important; }

/* keep genuinely round things round */
.rounded-full,
aside .rounded-full,
img.rounded-full,
.lt-pod-av, .lt-pod-av img,
#dynamic-team-content img,
.lt-lb-dot, .lt-spinner, .lt-lb-spin, .lt-live-spin,
.lt-modal-close, .lt-success-icon, .lt-step-dot { border-radius: 999px !important; }

/* our own components */
.lt-modal-card   { border-radius: 8px !important; }
.lt-lb-panel     { border-radius: 8px !important; }
.lt-lb-row       { border-radius: 5px !important; }
.lt-pod          { border-radius: 8px !important; }
.lt-pod-tag      { border-radius: 4px !important; }
.lt-lb-empty     { border-radius: 8px !important; }
.lt-field input, .lt-field select, .lt-field textarea,
.lt-lb-search input { border-radius: 5px !important; }
.lt-btn          { border-radius: 5px !important; }
.lt-alert        { border-radius: 5px !important; }

/* bold corner brackets on the main panels */
.lt-lb-panel, .lt-modal-card { position: relative; }
.lt-lb-panel::before, .lt-lb-panel::after,
.lt-modal-card::before, .lt-modal-card::after {
  content: '';
  position: absolute;
  width: 26px; height: 26px;
  border-color: var(--lt-blue);
  border-style: solid;
  opacity: .6;
  pointer-events: none;
}
.lt-lb-panel::before, .lt-modal-card::before {
  top: -1px; right: -1px; border-width: 3px 3px 0 0; border-top-right-radius: 8px;
}
.lt-lb-panel::after, .lt-modal-card::after {
  bottom: -1px; left: -1px; border-width: 0 0 3px 3px; border-bottom-left-radius: 8px;
}

/* winner podium gets gold brackets */
.lt-pod-1 { position: relative; }
.lt-pod-1::before, .lt-pod-1::after {
  content: '';
  position: absolute;
  width: 24px; height: 24px;
  border-color: #facc15;
  border-style: solid;
  opacity: .8;
  pointer-events: none;
}
.lt-pod-1::before { top: -1px; right: -1px; border-width: 3px 3px 0 0; }
.lt-pod-1::after  { bottom: -1px; left: -1px; border-width: 0 0 3px 3px; }

@media (max-width: 768px) {
  aside::before, aside::after { width: 26px; height: 26px; }
  .lt-lb-panel::before, .lt-lb-panel::after,
  .lt-modal-card::before, .lt-modal-card::after { width: 20px; height: 20px; }
}

/* ==================================================================
   MOBILE HEADER FIX
   ------------------------------------------------------------------
   The problem: the top bar is a fixed h-[72px] box, but the brand is
   26px with wide letter-spacing, sitting inside px-12 padding inside
   the header's own px-7. On a 390px phone that is wider than the
   screen, so "LEGEND TOWN" wrapped onto two lines inside a box that
   cannot grow — and the second line got clipped by the status bar.

   Fix: on screens under 1024px, shrink the brand, stop it wrapping,
   and cut the padding down. Desktop is untouched.
   ================================================================== */

@media (max-width: 1023px) {

  header.fixed {
    top: 0;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    /* clear the notch / status bar on phones that have one */
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* the bar itself (the second child; the first is the glow layer) */
  header.fixed > div:last-child {
    height: 62px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  header.fixed h1 {
    font-size: 17px;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }

  header.fixed .leading-none p {
    font-size: 7.5px;
    letter-spacing: 0.3em;
    margin-top: 2px;
  }

  header.fixed a img {
    height: 2.25rem;
  }

  /* the cyan glow behind the logo is sized for desktop */
  header.fixed a .absolute.h-20 {
    height: 3.5rem;
    width: 3.5rem;
  }
}

@media (max-width: 380px) {
  header.fixed h1 { font-size: 15px; letter-spacing: 0.02em; }
  header.fixed a img { height: 2rem; }
}

/* MOBILE DRAWER FIX — removed; superseded by assets/lt-menu.css */

/* ==================================================================
   SOCIAL BUTTONS  +  STORE
   ------------------------------------------------------------------
   The row was a fixed gap-8 of 80px tiles, which overflowed on a
   phone once the store button was added. Now it wraps and scales.
   ================================================================== */

.lt-social-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

.lt-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  width: 5rem;
  border-radius: 28px;
  border: 1px solid rgba(34, 211, 238, .2);
  background: rgba(34, 211, 238, .1);
  color: #22d3ee;
  box-shadow: 0 0 25px rgba(34, 211, 238, .15);
  transition: all .3s ease;
}

.lt-social-btn:hover {
  transform: translateY(-.5rem);
  border-color: #22d3ee;
  background: #22d3ee;
  color: #000;
  box-shadow: 0 20px 50px rgba(34, 211, 238, .45);
}

/* the store gets its own colour so it reads as the action, not just
   another social icon */
.lt-social-btn.is-store {
  width: auto;
  gap: .6rem;
  padding: 0 1.6rem;
  border-color: rgba(56, 189, 248, .45);
  background: linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(56, 189, 248, .1));
  color: #fff;
  font-weight: 900;
  font-size: .95rem;
  letter-spacing: .04em;
}

.lt-social-btn.is-store:hover {
  background: linear-gradient(135deg, #22d3ee, #38bdf8);
  color: #04121a;
}

@media (max-width: 640px) {
  .lt-social-row { gap: .75rem; }
  .lt-social-btn { height: 3.75rem; width: 3.75rem; border-radius: 20px; }
  .lt-social-btn svg { width: 24px; height: 24px; }
  .lt-social-btn.is-store { width: auto; padding: 0 1.1rem; font-size: .85rem; }
  .lt-social-btn:hover { transform: none; }
}

/* DRAWER NAV — removed; superseded by assets/lt-menu.css */


/* ==================================================================
   WHITELIST CARD  (apply.html)
   ------------------------------------------------------------------
   Same card as the other six — it just wears a brighter accent and a
   small flag, so it reads as step one without breaking the grid.
   ================================================================== */
.lt-dept-card.is-whitelist {
  border-color: rgba(32,144,208,.38);
  background:
    linear-gradient(160deg, rgba(34,211,238,.14) 0%, rgba(32,144,208,.07) 30%, rgba(11,18,32,.55) 60%),
    rgba(8, 13, 22, .78);
  box-shadow: 0 0 34px rgba(32,144,208,.12);
}
.lt-dept-card.is-whitelist::before,
.lt-dept-card.is-whitelist::after {
  opacity: 1;
  border-color: var(--lt-blue-light);
}
.lt-dept-card.is-whitelist:hover {
  border-color: rgba(79,179,232,.6);
  box-shadow: 0 18px 45px rgba(0,0,0,.55), 0 0 55px rgba(32,144,208,.28);
}
.lt-dept-card.is-whitelist .lt-dept-icon {
  border-color: rgba(79,179,232,.5);
  background: rgba(32,144,208,.2);
}

/* the little "you need this first" pill */
.lt-dept-flag {
  display: inline-block;
  margin-bottom: .55rem;
  padding: .26rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(34,211,238,.38);
  background: rgba(34,211,238,.12);
  color: var(--lt-blue-bright);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .lt-dept-flag { font-size: .6rem; margin-bottom: .45rem; }
}

/* ---- leaderboard avatars ---- */
.lt-lb-av {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid rgba(32,144,208,.35);
  background: rgba(32,144,208,.12);
  margin-inline-end: .55rem;
  vertical-align: middle;
  flex: 0 0 auto;
}
.lt-lb-av.is-blank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--lt-blue-bright, #6FCBF5);
  font-weight: 900;
  font-size: .78rem;
}
.lt-lb-name { display: flex; align-items: center; min-width: 0; }


/* ==================================================================
   LEGEND TOWN — ANGULAR UI / RESPONSIVE REDESIGN
   Removes the oversized hero artwork and replaces pill UI with
   sharp, engineered panels and bold corner accents.
   ================================================================== */

:root {
  --lt-blue: #1598e8;
  --lt-blue-bright: #35b7ff;
  --lt-ink: #03070d;
  --lt-panel: #07111b;
  --lt-line: rgba(53,183,255,.34);
  --lt-line-soft: rgba(255,255,255,.10);
}

/* No horizontal bleed + cleaner page foundation */
html, body {
  background:
    radial-gradient(900px 520px at 50% -12%, rgba(21,152,232,.12), transparent 68%),
    linear-gradient(180deg, #02060b 0%, #040910 48%, #02050a 100%) !important;
  color: #fff;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .28;
  background-image:
    linear-gradient(rgba(53,183,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,183,255,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(to bottom, #000, transparent 82%);
}

/* Remove the huge hero artwork entirely. */
main > main > section:first-of-type > div.absolute.inset-0 img { display: none !important; }
main > main > section:first-of-type > div.absolute.inset-0 {
  background:
    radial-gradient(560px 330px at 50% 42%, rgba(15,130,210,.14), transparent 70%),
    linear-gradient(180deg, #03080e 0%, #04101a 52%, #02060b 100%) !important;
}
main > main > section:first-of-type > div.absolute.inset-0 > div:nth-child(3),
main > main > section:first-of-type > div.absolute.inset-0 > div:nth-child(4) {
  opacity: .55 !important;
}

/* ------------------------------------------------------------------
   GLOBAL CORNERS — no rounded pills anywhere
------------------------------------------------------------------ */
[class*="rounded-"] { border-radius: 0 !important; }
button, a, input, select, textarea { border-radius: 0 !important; }

/* Strong technical corner marks for major UI elements */
.lt-corner,
header.fixed nav a,
header.fixed .flex.items-center.gap-5 > a,
header.fixed button,
.lt-cd-box,
.lt-stats > div,
.lt-modal-card,
.lt-dept-card,
.lt-lb-empty,
#lt-live-section .group,
#journey-year-nav button,
button[onclick^="toggleFaq"],
.ltm-link,
.ltm-store,
.ltm-mini {
  position: relative;
  overflow: hidden;
}

header.fixed nav a::before,
header.fixed .flex.items-center.gap-5 > a::before,
header.fixed button::before,
.lt-cd-box::before,
.lt-stats > div::before,
#lt-live-section .group::before,
#journey-year-nav button::before,
button[onclick^="toggleFaq"]::before,
.ltm-link::before,
.ltm-store::before,
.ltm-mini::before,
.lt-modal-card::before,
.lt-lb-empty::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 17px;
  height: 17px;
  border-top: 2px solid var(--lt-blue-bright);
  border-left: 2px solid var(--lt-blue-bright);
  pointer-events: none;
  opacity: .95;
}

header.fixed nav a::after,
header.fixed .flex.items-center.gap-5 > a::after,
header.fixed button::after,
.lt-cd-box::after,
.lt-stats > div::after,
#lt-live-section .group::after,
#journey-year-nav button::after,
button[onclick^="toggleFaq"]::after,
.ltm-link::after,
.ltm-store::after,
.ltm-mini::after,
.lt-modal-card::after,
.lt-lb-empty::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 17px;
  height: 17px;
  border-right: 2px solid var(--lt-blue-bright);
  border-bottom: 2px solid var(--lt-blue-bright);
  pointer-events: none;
  opacity: .95;
}

/* ------------------------------------------------------------------
   DESKTOP HEADER — compact angular navigation, not floating pills
------------------------------------------------------------------ */
header.fixed {
  top: 0 !important;
  padding-inline: 18px !important;
  background: linear-gradient(180deg, rgba(2,7,13,.94), rgba(2,7,13,.68) 75%, transparent) !important;
  border-bottom: 1px solid rgba(53,183,255,.14) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
header.fixed > div:last-of-type {
  max-width: 1480px !important;
  height: 74px !important;
  padding-inline: 22px !important;
}
header.fixed a[href="index.html"] > div:first-child > div {
  border-radius: 0 !important;
}
header.fixed a[href="index.html"] img {
  border-radius: 0 !important;
  filter: drop-shadow(0 0 14px rgba(53,183,255,.35)) !important;
}
header.fixed nav ul {
  gap: 4px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
header.fixed nav a {
  min-width: auto !important;
  height: 40px !important;
  padding-inline: 17px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #94a9b8 !important;
  transition: .2s ease;
}
header.fixed nav a:hover {
  color: #fff !important;
  background: rgba(21,152,232,.07) !important;
  border-color: rgba(53,183,255,.20) !important;
}
header.fixed nav a > div {
  display: none !important;
}
header.fixed nav a[href="index.html"] {
  color: #fff !important;
  border-color: rgba(53,183,255,.55) !important;
  background: linear-gradient(135deg, rgba(21,152,232,.20), rgba(21,152,232,.06)) !important;
  box-shadow: inset 0 0 18px rgba(21,152,232,.08), 0 0 16px rgba(21,152,232,.10);
}
header.fixed nav a[href="index.html"] span { color: #fff !important; }
header.fixed .flex.items-center.gap-5 { gap: 8px !important; }
header.fixed .flex.items-center.gap-5 > a,
header.fixed .flex.items-center.gap-5 > button {
  height: 40px !important;
  min-width: 40px;
  border: 1px solid rgba(53,183,255,.16) !important;
  background: rgba(3,10,17,.56) !important;
  color: #c4d2dc !important;
}

/* Store is a navigation action, not a filled CTA. Keep it in the same
   visual family as Home / Streams / Team. */
header.fixed .flex.items-center.gap-5 > a[href*="legendrp.rmz.gg"],
header.fixed .flex.items-center.gap-5 > a[href*="discord.gg"] {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 40px !important;
  min-width: 74px !important;
  padding-inline: 17px !important;
  border: 1px solid rgba(53,183,255,.18) !important;
  background: transparent !important;
  color: #94a9b8 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}
header.fixed .flex.items-center.gap-5 > a[href*="legendrp.rmz.gg"]:hover,
header.fixed .flex.items-center.gap-5 > a[href*="discord.gg"]:hover {
  color: #fff !important;
  border-color: rgba(53,183,255,.40) !important;
  background: rgba(21,152,232,.08) !important;
}
header.fixed .flex.items-center.gap-5 > a[href*="legendrp.rmz.gg"]::before,
header.fixed .flex.items-center.gap-5 > a[href*="legendrp.rmz.gg"]::after,
header.fixed .flex.items-center.gap-5 > a[href*="discord.gg"]::before,
header.fixed .flex.items-center.gap-5 > a[href*="discord.gg"]::after {
  opacity: .9 !important;
}
header.fixed .flex.items-center.gap-5 > a:hover,
header.fixed .flex.items-center.gap-5 > button:hover {
  border-color: rgba(53,183,255,.40) !important;
  background: rgba(21,152,232,.08) !important;
  color: #fff !important;
}

/* Hero typography: controlled instead of giant artwork competing with it */
main > main > section:first-of-type h1 {
  max-width: 980px !important;
  font-size: clamp(3.8rem, 8vw, 7.8rem) !important;
  line-height: .88 !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 12px 50px rgba(0,0,0,.55);
}
main > main > section:first-of-type > div.relative.z-10 {
  padding-top: 90px !important;
}
main > main > section:first-of-type span {
  border: 1px solid rgba(53,183,255,.42) !important;
  background: rgba(21,152,232,.07) !important;
  box-shadow: inset 0 0 20px rgba(21,152,232,.05);
}

/* Countdown becomes a real angular panel */
.lt-cd-box {
  min-width: min(620px, 92vw);
  padding: 25px 34px !important;
  border: 1px solid rgba(53,183,255,.32) !important;
  background: linear-gradient(135deg, rgba(7,20,31,.92), rgba(4,12,20,.82)) !important;
  box-shadow: inset 0 0 30px rgba(21,152,232,.04), 0 18px 55px rgba(0,0,0,.34) !important;
}
.lt-cd-num { text-shadow: 0 0 22px rgba(53,183,255,.25) !important; }
.lt-cd-label { color: #6f8a9c !important; }

/* Stats are actual cards instead of floating numbers */
.lt-stats {
  gap: 12px !important;
  width: min(1080px, 100%) !important;
}
.lt-stats > div {
  min-height: 145px;
  padding: 22px 14px !important;
  border: 1px solid rgba(53,183,255,.16);
  background: linear-gradient(180deg, rgba(7,18,28,.76), rgba(4,10,17,.68));
  box-shadow: inset 0 0 25px rgba(21,152,232,.025);
  transition: border-color .2s, transform .2s, background .2s;
}
.lt-stats > div:hover {
  border-color: rgba(53,183,255,.42);
  background: linear-gradient(180deg, rgba(8,25,38,.88), rgba(4,10,17,.76));
  transform: translateY(-2px);
}
.lt-stats h3 { font-size: clamp(2.25rem, 4vw, 3.75rem) !important; }
.lt-stats p { font-size: .92rem !important; color: #6d8190 !important; }

/* Generic cards/sections across the site */
section > div[class*="rounded"],
[class*="rounded-[54px]"],
[class*="rounded-3xl"],
[class*="rounded-2xl"],
[class*="rounded-xl"] {
  border-radius: 0 !important;
}

/* Mobile: header + hero should feel designed for the phone, not squeezed */
@media (max-width: 1023px) {
  header.fixed {
    padding-inline: 10px !important;
  }
  header.fixed > div:last-of-type {
    height: 64px !important;
    padding-inline: 10px !important;
  }
  header.fixed a[href="index.html"] img {
    height: 36px !important;
  }
  header.fixed .ltm-btn,
  .ltm-btn-floating {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid rgba(53,183,255,.35) !important;
    background: rgba(3,10,17,.88) !important;
    box-shadow: 0 0 20px rgba(21,152,232,.10);
  }

  main > main > section:first-of-type {
    min-height: auto !important;
    padding-top: 6.8rem !important;
    padding-bottom: 4rem !important;
  }
  main > main > section:first-of-type > div.relative.z-10 {
    min-height: auto !important;
    padding: 30px 16px 0 !important;
  }
  main > main > section:first-of-type h1 {
    font-size: clamp(3rem, 15vw, 5rem) !important;
    line-height: .9 !important;
    max-width: 100% !important;
  }
  main > main > section:first-of-type p {
    font-size: .95rem !important;
    line-height: 1.9 !important;
    max-width: 340px !important;
  }
  main > main > section:first-of-type > div.relative.z-10 > div > div {
    margin-top: 2rem !important;
  }
  .lt-cd-box {
    min-width: 0 !important;
    width: 100% !important;
    padding: 18px 10px !important;
  }
  .lt-cd-seg { min-width: 2.8rem !important; }
  .lt-cd-num { font-size: clamp(1.45rem, 7.5vw, 2.2rem) !important; }
  .lt-cd-sep { font-size: 1.3rem !important; }
  .lt-cd-label { font-size: .52rem !important; }
  .lt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  .lt-stats > div { min-height: 118px; padding: 16px 8px !important; }
  .lt-stats h3 { font-size: 2rem !important; }
  .lt-stats p { font-size: .68rem !important; }
}

@media (max-width: 420px) {
  header.fixed a[href="index.html"] img { height: 32px !important; }
  header.fixed h1 { font-size: 15px !important; }
  main > main > section:first-of-type h1 { font-size: clamp(2.55rem, 14.5vw, 4rem) !important; }
  main > main > section:first-of-type span { padding: .45rem .8rem !important; font-size: .66rem !important; }
  .lt-cd-box { padding-inline: 5px !important; }
  .lt-cd-seg { min-width: 2.35rem !important; }
  .lt-cd-num { font-size: 1.3rem !important; }
  .lt-cd-sep { font-size: 1.05rem !important; }
  .lt-stats h3 { font-size: 1.75rem !important; }
}

/* ==================================================================
   15. FINAL SPACING / FLOW REBUILD
   ================================================================== */

/* The hero was a fixed viewport with overflow clipping while its
   content had artificial translate offsets. Let the content define
   the section height instead. */
main > main > section:first-of-type {
  min-height: 0 !important;
  height: auto !important;
  overflow: visible !important;
  padding-top: 6rem !important;
  padding-bottom: 5.5rem !important;
}

main > main > section:first-of-type > div.relative.z-10 {
  min-height: 0 !important;
  height: auto !important;
  padding-top: 2.5rem !important;
  padding-bottom: 0 !important;
}

/* Remove the old vertical positioning hack completely. */
main > main > section:first-of-type .translate-y-55,
main > main > section:first-of-type [class*="translate-y-55"] {
  transform: none !important;
  margin-top: 0 !important;
  position: static !important;
}

main > main > section:first-of-type .lt-cd-block {
  margin-top: 3.5rem !important;
  margin-bottom: 3.25rem !important;
}

main > main > section:first-of-type .lt-stats {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Never allow a following section to visually sit on top of the hero. */
main > main > section:first-of-type + section {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 0 !important;
  padding-top: 5rem !important;
  padding-bottom: 5rem !important;
  border-top: 1px solid rgba(53,183,255,.06);
}

/* Live section: predictable vertical rhythm instead of oversized empty
   blocks pushing the Journey title around. */
#lt-live-section {
  margin-top: 0 !important;
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}
#lt-live-section > .mt-10 {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
}
#no-live-streams-box {
  padding-top: 3.5rem !important;
  padding-bottom: 3.5rem !important;
}

/* Journey starts as its own clean section with a consistent gap. */
#lt-live-section + section {
  margin-top: 0 !important;
  padding-top: 6rem !important;
  padding-bottom: 6rem !important;
}
#lt-live-section + section > div:first-child {
  width: min(1200px, calc(100% - 32px)) !important;
}
#lt-live-section + section > div:first-child > div:first-child {
  margin-bottom: 2.75rem !important;
}
#lt-live-section + section h2 {
  margin-top: 0 !important;
}
#lt-live-section + section h2 + p {
  margin-top: 1rem !important;
  transform: none !important;
}
#lt-live-section + section .translate-y-6,
#lt-live-section + section .translate-y-9,
#lt-live-section + section [class*="translate-y-"] {
  transform: none !important;
}

/* Year selector and journey card are separated instead of stacking into
   the heading area. */
#journey-year-nav {
  margin-top: 0 !important;
  gap: .5rem 1.25rem !important;
}
#journey-year-nav button {
  min-width: 72px;
}
#lt-live-section + section .mt-14 {
  margin-top: 2rem !important;
}

/* Journey card gets a real gap and no hidden/overlapping content. */
#lt-live-section + section .max-w-\[1280px\] {
  margin-top: 2rem !important;
  overflow: hidden !important;
}

@media (max-width: 768px) {
  main > main > section:first-of-type {
    padding-top: 5rem !important;
    padding-bottom: 3.5rem !important;
  }
  main > main > section:first-of-type > div.relative.z-10 {
    padding: 2rem 16px 0 !important;
  }
  main > main > section:first-of-type .lt-cd-block {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
  }
  main > main > section:first-of-type .lt-cd-box {
    width: 100% !important;
    min-width: 0 !important;
  }
  main > main > section:first-of-type .lt-stats {
    width: 100% !important;
    gap: 10px !important;
  }
  main > main > section:first-of-type .lt-stats > div {
    min-height: 125px !important;
  }

  #lt-live-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  #no-live-streams-box {
    padding: 2.5rem 1rem !important;
  }

  #lt-live-section + section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
  }
  #lt-live-section + section > div:first-child {
    width: calc(100% - 28px) !important;
  }
  #lt-live-section + section > div:first-child > div:first-child {
    margin-bottom: 1.75rem !important;
  }
  #journey-year-nav {
    gap: .25rem !important;
  }
  #journey-year-nav button {
    min-width: 60px !important;
    padding: .65rem .5rem !important;
  }
  #lt-live-section + section .max-w-\[1280px\] {
    margin-top: 1.5rem !important;
  }
}


/* ==================================================================
   12. CONNECT SECTION — FINAL SPACING / SHARP UI REBUILD
   ------------------------------------------------------------------
   The previous global transform reset removed the visual offset, but
   the original utility spacing still made the description sit too
   close to the social actions. This section now uses an explicit
   vertical rhythm and a compact, angular button system.
   ================================================================== */
.lt-connect-section {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

.lt-connect-section > div > div {
  min-height: 0 !important;
  padding-top: clamp(3rem, 5vw, 5rem) !important;
  padding-bottom: clamp(3rem, 5vw, 5rem) !important;
}

.lt-connect-section .lt-connect-description {
  margin-top: 1.5rem !important;
  margin-bottom: 0 !important;
  transform: none !important;
  line-height: 1.9 !important;
}

.lt-connect-section .lt-social-row {
  margin-top: 2rem !important;
  margin-bottom: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .9rem !important;
  width: 100% !important;
  position: relative !important;
  z-index: 2 !important;
}

.lt-connect-section .lt-social-row > div {
  display: flex !important;
  flex: 0 0 auto !important;
}

.lt-connect-section .lt-social-btn {
  position: relative;
  width: 76px !important;
  height: 60px !important;
  min-width: 76px !important;
  border-radius: 0 !important;
  border: 1px solid rgba(34,211,238,.38) !important;
  background: rgba(6,16,27,.88) !important;
  box-shadow: inset 0 0 0 1px rgba(34,211,238,.04), 0 8px 24px rgba(0,0,0,.22) !important;
  color: #22d3ee !important;
}

.lt-connect-section .lt-social-btn::before,
.lt-connect-section .lt-social-btn::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.lt-connect-section .lt-social-btn::before {
  top: -1px;
  left: -1px;
  border-top: 3px solid #22d3ee;
  border-left: 3px solid #22d3ee;
}

.lt-connect-section .lt-social-btn::after {
  right: -1px;
  bottom: -1px;
  border-right: 3px solid #22d3ee;
  border-bottom: 3px solid #22d3ee;
}

.lt-connect-section .lt-social-btn:hover {
  transform: translateY(-3px) !important;
  border-color: #22d3ee !important;
  background: rgba(34,211,238,.12) !important;
  color: #67e8f9 !important;
  box-shadow: 0 12px 32px rgba(34,211,238,.14) !important;
}

.lt-connect-section .lt-social-btn.is-store {
  width: 116px !important;
  min-width: 116px !important;
  padding: 0 1rem !important;
  border-radius: 0 !important;
  background: rgba(6,16,27,.96) !important;
  color: #fff !important;
}

.lt-connect-section .lt-social-btn.is-store:hover {
  background: rgba(34,211,238,.14) !important;
  color: #fff !important;
}

.lt-connect-section .lt-social-btn svg {
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .lt-connect-section {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .lt-connect-section > div > div {
    padding: 2.25rem 1rem !important;
  }
  .lt-connect-section h2 {
    margin-top: 0 !important;
    line-height: 1.15 !important;
  }
  .lt-connect-section .lt-connect-description {
    max-width: 32rem !important;
    margin-top: 1.1rem !important;
    font-size: 1rem !important;
    line-height: 1.9 !important;
  }
  .lt-connect-section .lt-social-row {
    margin-top: 1.5rem !important;
    gap: .6rem !important;
  }
  .lt-connect-section .lt-social-btn {
    width: 64px !important;
    min-width: 64px !important;
    height: 54px !important;
  }
  .lt-connect-section .lt-social-btn.is-store {
    width: 96px !important;
    min-width: 96px !important;
  }
}


/* NAV PERFORMANCE / RESPONSIVE PASS */
header.fixed nav ul, header.fixed nav a, header.fixed .flex.items-center.gap-5 > a, header.fixed .flex.items-center.gap-5 > button {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@media (max-width: 1180px) and (min-width: 1024px) {
  header.fixed > div:last-of-type { padding-inline: 12px !important; }
  header.fixed nav a { padding-inline: 11px !important; min-width: 64px !important; font-size: 12px !important; }
  header.fixed .flex.items-center.gap-5 > a[href*="legendrp.rmz.gg"],
  header.fixed .flex.items-center.gap-5 > a[href*="discord.gg"] { min-width: 64px !important; padding-inline: 11px !important; font-size: 12px !important; }
}

/* ================================================================
   FAQ PRO REBUILD — no clipping, no translated text, RTL-safe
   ================================================================ */
.lt-faq-page {
  position: relative;
  min-height: 100vh;
  overflow: clip;
  background: #03070d;
  color: #e5edf7;
  isolation: isolate;
}
.lt-faq-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
    radial-gradient(circle at 50% 8%, rgba(14,165,233,.09), transparent 34%);
  background-size: 72px 72px, 72px 72px, auto;
}
.lt-faq-hero {
  padding: clamp(5.5rem, 11vw, 8rem) 1.25rem 3.25rem;
  text-align: center;
}
.lt-faq-hero-inner { width: min(900px, 100%); margin: 0 auto; }
.lt-faq-kicker {
  display: inline-flex; align-items: center; gap: .65rem;
  min-height: 36px; padding: .55rem 1rem;
  border: 1px solid rgba(34,211,238,.42);
  background: rgba(4,14,24,.8);
  color: #67e8f9; font-size: .72rem; font-weight: 900;
  letter-spacing: .16em; line-height: 1.2;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.lt-faq-hero h1 {
  margin: 1.35rem 0 0;
  color: #fff;
  font-size: clamp(2.4rem, 6vw, 4.8rem);
  line-height: 1.15;
  font-weight: 950;
  letter-spacing: -.025em;
  overflow: visible;
}
.lt-faq-hero p {
  max-width: 760px; margin: 1.2rem auto 0;
  color: #94a9bf; font-size: clamp(.95rem, 2vw, 1.1rem);
  line-height: 2; font-weight: 600;
  overflow: visible;
}
.lt-faq-discord {
  display: inline-flex; margin-top: 1.35rem; padding: .75rem 1rem;
  border: 1px solid rgba(34,211,238,.25); color: #67e8f9;
  background: rgba(8,20,31,.72); text-decoration: none; font-weight: 800;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}
.lt-faq-content { padding: 0 1.25rem 7rem; }
.lt-faq-shell { width: min(1120px, 100%); margin: 0 auto; }
.lt-faq-group, .lt-rp-system, .lt-rules {
  margin-top: 3rem; padding-top: 3rem;
  border-top: 1px solid rgba(148,163,184,.12);
}
.lt-faq-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.lt-faq-group-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem; }
.lt-faq-icon {
  width: 48px; height: 48px; flex: 0 0 48px; display:grid; place-items:center;
  border: 1px solid rgba(34,211,238,.32); background:#07121d; font-size:1.25rem;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
.lt-faq-group-head h2, .lt-section-title h2 { margin: .15rem 0 0; color:#fff; font-size:clamp(1.55rem,3vw,2.25rem); line-height:1.25; font-weight:950; overflow:visible; }
.lt-faq-group-head p, .lt-section-title p { margin:.25rem 0 0; color:#71849a; line-height:1.8; }
.lt-faq-overline, .lt-section-title > span { color:#22d3ee; font-size:.68rem; font-weight:900; letter-spacing:.18em; }
.lt-faq-list { display:grid; gap:.7rem; }
.lt-faq-card {
  position:relative; overflow:visible; background:#07101a;
  border:1px solid rgba(45,73,98,.5);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  transition:border-color .18s ease, background .18s ease;
}
.lt-faq-card:hover { border-color:rgba(34,211,238,.48); background:#091521; }
.lt-faq-q {
  width:100%; min-height:68px; padding:1rem 1.2rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  direction:rtl; text-align:right; border:0; background:transparent; color:#fff;
  cursor:pointer; font-family:inherit;
}
.lt-faq-q span {
  display:block; min-width:0; flex:1; overflow:visible; white-space:normal;
  color:#f8fafc; font-size:clamp(.95rem,2vw,1.08rem); font-weight:850; line-height:1.75;
}
.lt-faq-q b {
  width:30px; height:30px; flex:0 0 30px; display:grid; place-items:center;
  border:1px solid rgba(34,211,238,.28); color:#22d3ee; font-size:1.2rem; font-weight:500;
  line-height:1; transition:transform .2s ease, background .2s ease;
}
.lt-faq-q.is-open b { transform:rotate(45deg); background:rgba(34,211,238,.08); }
.lt-faq-a {
  padding: 0 1.2rem 1.15rem;
  border-top:1px solid rgba(148,163,184,.12);
  color:#aebdcd; font-size:.94rem; font-weight:550; line-height:2;
  overflow:visible; white-space:normal;
}
.lt-faq-a a { color:#67e8f9; text-decoration:underline; text-underline-offset:3px; }
.lt-section-title { margin-bottom:1.25rem; }
.lt-rp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; }
.lt-rp-grid article {
  min-height:170px; padding:1.15rem; background:#07101a; border:1px solid rgba(45,73,98,.5);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}
.lt-rp-grid article > span { color:#22d3ee; font-size:.7rem; font-weight:900; letter-spacing:.14em; }
.lt-rp-grid h3, .lt-rule h3 { margin:.55rem 0 .35rem; color:#fff; font-size:1.05rem; font-weight:900; }
.lt-rp-grid p, .lt-rule p { margin:0; color:#8ea1b6; line-height:1.85; font-size:.88rem; }
.lt-rules-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.lt-rule {
  display:flex; gap:1rem; align-items:flex-start; padding:1rem 1.1rem;
  background:#07101a; border:1px solid rgba(45,73,98,.5);
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.lt-rule > b {
  width:38px; height:38px; flex:0 0 38px; display:grid; place-items:center;
  color:#22d3ee; border:1px solid rgba(34,211,238,.35); background:#06121d; font-size:.75rem;
}
/* Kill legacy FAQ transforms that caused Arabic text to sit inside borders. */
.lt-faq-page h1, .lt-faq-page h2, .lt-faq-page h3, .lt-faq-page p, .lt-faq-page span, .lt-faq-page a { transform:none !important; }
.lt-faq-page .translate-x-4, .lt-faq-page .translate-y-2, .lt-faq-page .-translate-x-5 { transform:none !important; }
.lt-faq-page * { box-sizing:border-box; }

/* Consistent sharp navigation buttons across the whole site. */
@media (min-width:1024px) {
  header.fixed nav ul { gap:0 !important; }
  header.fixed nav ul > li > a {
    min-width:0 !important; height:48px !important; padding:0 18px !important;
    border-radius:0 !important; border:1px solid rgba(34,211,238,.18) !important;
    background:rgba(5,13,21,.55) !important; margin-left:-1px;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  }
  header.fixed nav ul > li > a:hover { background:rgba(34,211,238,.07) !important; border-color:rgba(34,211,238,.48) !important; }
  header.fixed nav ul > li > a > div { display:none !important; }
  header.fixed nav ul > li > a span { transform:none !important; white-space:nowrap; }
  header.fixed .flex.items-center.gap-5 > a[href*="discord"] {
    height:48px !important; padding:0 16px !important; border-radius:0 !important;
    border:1px solid rgba(34,211,238,.3) !important; background:rgba(5,13,21,.55) !important;
    clip-path:polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  }
}

@media (max-width: 900px) {
  .lt-faq-hero { padding-top:5.2rem; }
  .lt-faq-content { padding-inline: .85rem; }
  .lt-rp-grid { grid-template-columns:1fr 1fr; }
  .lt-rules-grid { grid-template-columns:1fr; }
}
@media (max-width: 600px) {
  .lt-faq-kicker { font-size:.58rem; letter-spacing:.1em; }
  .lt-faq-hero h1 { font-size:2.2rem; }
  .lt-faq-hero p { font-size:.9rem; line-height:1.9; }
  .lt-faq-group, .lt-rp-system, .lt-rules { margin-top:2.1rem; padding-top:2.1rem; }
  .lt-faq-group-head { align-items:flex-start; }
  .lt-faq-icon { width:42px; height:42px; flex-basis:42px; }
  .lt-faq-q { min-height:62px; padding:.8rem .85rem; }
  .lt-faq-q span { font-size:.88rem; line-height:1.65; }
  .lt-faq-a { padding:0 .85rem 1rem; font-size:.82rem; line-height:1.9; }
  .lt-rp-grid { grid-template-columns:1fr; }
  .lt-rp-grid article { min-height:auto; }
}


/* ============================================================
   LEGEND TOWN GLOBAL HEADER FIX
   Prevent fixed/sticky navigation from covering page content.
   ============================================================ */
:root {
  --lt-header-height: 84px;
  --lt-header-gap: 24px;
}

html {
  scroll-padding-top: calc(var(--lt-header-height) + var(--lt-header-gap));
}

body {
  padding-top: 0 !important;
}

/* Common fixed/sticky header selectors used by the site */
header,
.site-header,
.main-header,
.navbar,
nav.site-nav,
.topbar,
.top-nav {
  z-index: 1000;
}

/* Main page containers must begin below the fixed header */
main,
main.page,
.page-content,
.page-container,
.content,
.site-content,
.page-section,
section:first-of-type {
  scroll-margin-top: calc(var(--lt-header-height) + var(--lt-header-gap));
}

/* Explicit hero/page-title spacing. This intentionally uses margin/padding
   rather than transforms so headings cannot slide underneath the header. */
.hero,
.page-hero,
.page-title,
.leaderboard-page,
.leaderboard,
.faq-page,
.team-page,
.streams-page,
.apply-page,
.applications-page {
  position: relative;
  z-index: 1;
}

.page-hero,
.page-title,
.leaderboard-page > .page-title,
.leaderboard > .page-title {
  padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)) !important;
}

@media (max-width: 900px) {
  :root {
    --lt-header-height: 72px;
    --lt-header-gap: 18px;
  }

  .page-hero,
  .page-title,
  .leaderboard-page > .page-title,
  .leaderboard > .page-title {
    padding-top: calc(var(--lt-header-height) + var(--lt-header-gap)) !important;
  }
}

@media (max-width: 640px) {
  :root {
    --lt-header-height: 64px;
    --lt-header-gap: 14px;
  }
}



/* ============================================================
   LEGEND TOWN — NEW GLOBAL HEADER V8
   No outer header border. No corner brackets on nav buttons.
   English is on the left, Arabic on the right.
   ============================================================ */
.lt-new-header {
  position: fixed;
  inset: 0 0 auto 0;
  height: 78px;
  z-index: 9000;
  background: rgba(3, 7, 13, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(34,211,238,.08);
}
.lt-new-header-inner {
  width: min(1740px, calc(100% - 48px));
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.lt-new-brand {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  min-width: 238px;
}
.lt-new-brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 0 14px rgba(34,211,238,.5));
}
.lt-new-brand-text { display:flex; flex-direction:column; line-height:1; }
.lt-new-brand-text strong {
  font-size: 19px;
  font-weight: 950;
  letter-spacing: .09em;
  white-space: nowrap;
}
.lt-new-brand-text small {
  margin-top: 4px;
  color:#22d3ee;
  font-size: 7px;
  font-weight:800;
  letter-spacing:.42em;
}
.lt-new-nav {
  align-items: center;
  gap: 5px;
  min-width: 0;
}
.lt-new-nav-en { margin-left: auto; }
.lt-new-nav-ar { margin-left: 2px; }
.lt-new-nav a,
.lt-new-store {
  position: relative;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 13px;
  color: rgba(226,232,240,.72);
  background: rgba(8,14,23,.72);
  border: 1px solid rgba(148,163,184,.16);
  border-radius: 2px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 12.5px;
  font-weight: 750;
  transition: color .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.lt-new-nav a::before,
.lt-new-store::before {
  content:"";
  position:absolute;
  inset:0;
  border-top:2px solid transparent;
  pointer-events:none;
}
.lt-new-nav a:hover,
.lt-new-nav a.is-active,
.lt-new-store:hover {
  color:#fff;
  border-color: rgba(34,211,238,.55);
  background: rgba(34,211,238,.08);
  box-shadow: inset 0 -2px 0 #22d3ee, 0 0 16px rgba(34,211,238,.07);
}
.lt-new-nav a.is-active { color:#22d3ee; }
.lt-new-actions {
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:4px;
}
.lt-new-lang {
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(148,163,184,.16);
  border-radius:2px;
  background:rgba(8,14,23,.72);
  color:#cbd5e1;
  cursor:pointer;
}
.lt-new-lang:hover { border-color:rgba(34,211,238,.55); color:#22d3ee; }
.lt-new-lang-en,.lt-new-lang-ar { display:inline; font-size:12px; font-weight:900; }
.lt-new-store {
  min-width:88px;
  gap:6px;
  color:#fff;
  border-color:rgba(34,211,238,.32);
}
.lt-store-icon { color:#22d3ee; font-weight:900; }
.lt-new-mobile { display:none; }

@media (max-width: 1500px) {
  .lt-new-header-inner { width:calc(100% - 28px); gap:8px; }
  .lt-new-brand { min-width:210px; }
  .lt-new-nav { gap:3px; }
  .lt-new-nav a, .lt-new-store { padding:0 9px; font-size:11.5px; }
}
@media (max-width: 1180px) {
  .lt-new-brand { min-width:180px; }
  .lt-new-brand-text strong { font-size:16px; }
  .lt-new-nav a, .lt-new-store { padding:0 7px; font-size:10.5px; }
  .lt-new-nav-ar { display:none !important; }
}
@media (max-width: 1023px) {
  .lt-new-header { height:68px; }
  .lt-new-header-inner { width:calc(100% - 20px); justify-content:space-between; }
  .lt-new-nav { display:none !important; }
  .lt-new-brand { min-width:0; }
  .lt-new-brand img { width:38px; height:38px; }
  .lt-new-brand-text strong { font-size:16px; }
  .lt-new-brand-text small { font-size:6.5px; }
  .lt-new-actions { margin-left:auto; }
  .lt-new-mobile {
    width:42px; height:42px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:5px;
    border:1px solid rgba(148,163,184,.16); border-radius:2px;
    background:rgba(8,14,23,.72); color:#fff; cursor:pointer;
  }
  .lt-new-mobile span { width:18px; height:2px; background:#dbeafe; display:block; }
  .lt-new-store { min-width:78px; height:42px; }
}
@media (max-width: 480px) {
  .lt-new-header-inner { width:calc(100% - 12px); }
  .lt-new-brand-text strong { font-size:14px; letter-spacing:.06em; }
  .lt-new-brand img { width:34px; height:34px; }
  .lt-new-lang { width:38px; height:38px; }
  .lt-new-store { min-width:68px; padding:0 8px; font-size:10px; }
}

/* Header offset — all content starts below the fixed bar. */
main {
  padding-top: 112px !important;
}
@media (max-width:1023px) { main { padding-top: 88px !important; } }
@media (max-width:640px) { main { padding-top: 78px !important; } }

/* Leaderboard hero: never hide its title under the header. */
main > section:first-of-type {
  padding-top: 74px !important;
  min-height: 430px !important;
}
main > section:first-of-type h1 {
  position:relative;
  z-index:2;
  margin-top: 0 !important;
}



/* ============================================================
   LEGEND TOWN V9 — SINGLE HEADER / NO DUPLICATE NAV
   One navigation only. Arabic is positioned right; English left.
   The selected language is rendered, never both at once.
   ============================================================ */
.lt-new-header {
  height: 78px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 1px 0 rgba(34,211,238,.10) !important;
}
.lt-new-header-inner {
  width: min(1760px, calc(100% - 44px)) !important;
  gap: 14px !important;
}
.lt-single-nav {
  display: flex !important;
  align-items: center;
  gap: 5px !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}
.lt-single-nav a,
.lt-new-store {
  height: 42px !important;
  min-height: 42px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  box-shadow: none !important;
}
.lt-single-nav a::before,
.lt-new-store::before { display:none !important; }

html[lang="en"] .lt-single-nav {
  margin-left: 0 !important;
  margin-right: auto !important;
  direction: ltr !important;
}
html[lang="ar"] .lt-single-nav {
  margin-left: auto !important;
  margin-right: 0 !important;
  direction: rtl !important;
}
.lt-single-nav a span,
.lt-new-store span[data-en] { display:inline !important; }

.lt-single-nav a span::after { content:""; }
html[lang="en"] .lt-single-nav a span,
html[lang="en"] .lt-new-store span[data-en] {
  font-size: 0;
}
html[lang="en"] .lt-single-nav a span::before {
  content: attr(data-en);
  font-size: 12px;
}
html[lang="en"] .lt-new-store span[data-en]::before {
  content: attr(data-en);
  font-size: 12px;
}
html[lang="ar"] .lt-single-nav a span,
html[lang="ar"] .lt-new-store span[data-ar] {
  font-size: 0;
}
html[lang="ar"] .lt-single-nav a span::before {
  content: attr(data-ar);
  font-size: 12px;
}
html[lang="ar"] .lt-new-store span[data-ar]::before {
  content: attr(data-ar);
  font-size: 12px;
}
.lt-game-launch-label { font-size: 12px; }

@media (max-width: 1180px) {
  .lt-new-brand { min-width: 190px !important; }
  .lt-single-nav a, .lt-new-store { padding: 0 9px !important; font-size: 11px !important; }
}
@media (max-width: 1023px) {
  .lt-new-header { height: 68px !important; }
  .lt-single-nav { display:none !important; }
  .lt-new-actions { margin-left:auto !important; }
}


/* ============================================================
   LEGEND TOWN V10 — HEADER + GAME BUTTON FINAL LAYOUT
   - Game button belongs to the header (not floating over content).
   - No header outer border.
   - Navigation buttons use a compact 1px border and consistent 44px height.
   - Page content starts below the header on every page.
   ============================================================ */
.lt-new-header {
  height: 76px !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: 0 1px 0 rgba(34,211,238,.10) !important;
}
.lt-new-header-inner {
  width: min(1760px, calc(100% - 48px)) !important;
  min-height: 76px !important;
  gap: 10px !important;
}
.lt-new-brand { min-width: 220px !important; }
.lt-new-nav { gap: 5px !important; }
.lt-new-nav a,
.lt-new-store,
.lt-new-lang,
#lt-game-launch {
  height: 44px !important;
  min-height: 44px !important;
  border-radius: 2px !important;
  border: 1px solid rgba(148,163,184,.20) !important;
  box-shadow: none !important;
}
.lt-new-nav a::before,
.lt-new-store::before { display:none !important; }
.lt-new-nav a:hover,
.lt-new-nav a.is-active,
.lt-new-store:hover,
.lt-new-lang:hover {
  border-color: rgba(34,211,238,.65) !important;
  background: rgba(34,211,238,.07) !important;
}
.lt-new-nav a.is-active { box-shadow: inset 0 -2px 0 #22d3ee !important; }
.lt-new-actions {
  gap: 6px !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
.lt-new-store { min-width: 88px !important; padding-inline: 13px !important; }
.lt-new-lang { width: 44px !important; }

/* Game launcher is a normal header control now. */
#lt-game-launch.lt-game-launch {
  position: relative !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  z-index: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  min-width: 92px !important;
  min-height: 44px !important;
  padding: 0 13px !important;
  margin: 0 !important;
  border: 1px solid rgba(34,211,238,.34) !important;
  border-right: 1px solid rgba(34,211,238,.34) !important;
  border-radius: 2px !important;
  background: rgba(8,14,23,.72) !important;
  box-shadow: none !important;
  color: #dff8ff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
#lt-game-launch.lt-game-launch:hover {
  border-color: rgba(34,211,238,.72) !important;
  background: rgba(34,211,238,.08) !important;
  color: #fff !important;
}
#lt-game-launch .lt-game-launch-icon { color:#22d3ee !important; font-size:15px !important; }
#lt-game-launch .lt-game-launch-label { display:inline !important; font-size:11px !important; font-weight:800 !important; white-space:nowrap !important; }

/* Remove any old floating-game positioning from pages that may still load it. */
.lt-game-launch { box-sizing:border-box; }

/* Reliable content clearance: never let a page title start under the header. */
body { overflow-x:hidden !important; }
body > main,
main.pt-32,
main > main {
  padding-top: 0 !important;
}
body > main { margin-top: 76px !important; }
main > main { margin-top: 0 !important; }

/* First page section begins after the header, not underneath it. */
main > main > section:first-of-type,
main > section:first-of-type {
  padding-top: 34px !important;
}

/* Generic page title/hero blocks get a predictable clearance. */
.page-hero,
.page-title,
.leaderboard-page > .page-title,
.leaderboard > .page-title {
  margin-top: 0 !important;
  padding-top: 28px !important;
}

@media (max-width: 1180px) {
  .lt-new-brand { min-width: 185px !important; }
  .lt-new-nav a, .lt-new-store { padding-inline: 9px !important; font-size: 11px !important; }
  #lt-game-launch.lt-game-launch { min-width: 82px !important; padding-inline: 9px !important; }
}
@media (max-width: 1023px) {
  .lt-new-header { height: 68px !important; }
  .lt-new-header-inner { min-height:68px !important; width:calc(100% - 20px) !important; }
  body > main { margin-top: 68px !important; }
  main > main > section:first-of-type,
  main > section:first-of-type { padding-top: 24px !important; }
  #lt-game-launch.lt-game-launch { display:inline-flex !important; min-width:78px !important; height:40px !important; min-height:40px !important; }
  #lt-game-launch .lt-game-launch-label { font-size:10px !important; }
}
@media (max-width: 640px) {
  .lt-new-header { height:64px !important; }
  .lt-new-header-inner { min-height:64px !important; width:calc(100% - 12px) !important; }
  body > main { margin-top:64px !important; }
  #lt-game-launch.lt-game-launch { min-width:40px !important; width:40px !important; padding:0 !important; }
  #lt-game-launch .lt-game-launch-label { display:none !important; }
  .lt-new-store { min-width:64px !important; padding-inline:8px !important; font-size:10px !important; }
  .lt-new-lang { width:38px !important; height:38px !important; min-height:38px !important; }
}



/* ============================================================
   LEGEND TOWN V12 — CLEAN GLOBAL HEADER
   No decorative brackets, no clipped labels, no duplicated nav.
   Direction follows the active language.
   ============================================================ */
.lt-new-header{height:72px!important;overflow:visible!important;background:rgba(4,9,15,.96)!important;border:0!important;box-shadow:0 1px 0 rgba(148,163,184,.10)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
.lt-new-header-inner{width:min(1700px,calc(100% - 36px))!important;height:72px!important;min-height:72px!important;margin:0 auto!important;display:flex!important;align-items:center!important;gap:18px!important;direction:ltr!important;overflow:visible!important}
html[lang="ar"] .lt-new-header-inner{direction:rtl!important}
.lt-new-brand{flex:0 1 220px!important;min-width:180px!important;width:auto!important;overflow:visible!important;white-space:nowrap!important}
.lt-new-brand-text{min-width:0!important;overflow:visible!important}.lt-new-brand-text strong{font-size:18px!important;line-height:1!important;white-space:nowrap!important}.lt-new-brand-text small{font-size:6.5px!important;white-space:nowrap!important}
.lt-new-nav{display:flex!important;align-items:center!important;justify-content:center!important;gap:4px!important;flex:0 1 auto!important;min-width:0!important;overflow:visible!important;margin:0!important}
.lt-single-nav a,.lt-new-store,.lt-new-lang,#lt-game-launch{box-sizing:border-box!important;height:40px!important;min-height:40px!important;border-radius:2px!important;border:1px solid rgba(148,163,184,.18)!important;box-shadow:none!important;white-space:nowrap!important;overflow:visible!important}
.lt-single-nav a{padding:0 12px!important;min-width:0!important;background:#08111b!important;color:#aebdca!important;font-size:12px!important;font-weight:700!important}
.lt-single-nav a::before,.lt-new-store::before{display:none!important}
.lt-single-nav a:hover,.lt-single-nav a.is-active{color:#fff!important;background:#0b1824!important;border-color:rgba(34,211,238,.52)!important;box-shadow:inset 0 -2px 0 #22d3ee!important}
.lt-new-actions{display:flex!important;align-items:center!important;gap:5px!important;flex:0 1 auto!important;margin:0!important;overflow:visible!important}
.lt-new-lang{width:42px!important;min-width:42px!important;padding:0!important;background:#08111b!important;color:#d7e4ed!important}.lt-new-store{min-width:78px!important;padding:0 12px!important;background:#08111b!important;color:#d7e4ed!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important}.lt-new-store:hover,.lt-new-lang:hover{background:#0b1824!important;border-color:rgba(34,211,238,.52)!important;color:#fff!important}
#lt-game-launch.lt-game-launch{position:relative!important;inset:auto!important;transform:none!important;z-index:auto!important;height:40px!important;min-height:40px!important;min-width:88px!important;padding:0 11px!important;margin:0!important;background:#08111b!important;border:1px solid rgba(34,211,238,.32)!important;border-radius:2px!important;box-shadow:none!important}
#lt-game-launch.lt-game-launch:hover{background:#0b1824!important;border-color:rgba(34,211,238,.65)!important}
.lt-new-mobile{display:none!important}
/* Direction-specific placement: brand + nav + actions form one clean row. */
html[lang="en"] .lt-new-header-inner{direction:ltr!important}html[lang="en"] .lt-new-nav{margin-left:0!important;margin-right:auto!important}html[lang="ar"] .lt-new-header-inner{direction:rtl!important}html[lang="ar"] .lt-new-nav{margin-right:0!important;margin-left:auto!important}
/* Never let the fixed header cover page headings. */
body{padding-top:0!important}body>main{margin-top:72px!important;padding-top:0!important}.page-hero,.page-title,main>section:first-of-type{scroll-margin-top:88px!important}
/* Leaderboard and every page hero start below the bar. */
main>section:first-of-type{padding-top:36px!important}

@media(max-width:1250px){.lt-new-header-inner{width:calc(100% - 24px)!important;gap:10px!important}.lt-new-brand{flex-basis:190px!important;min-width:150px!important}.lt-new-brand-text strong{font-size:16px!important}.lt-single-nav a{padding:0 9px!important;font-size:11px!important}.lt-new-store{min-width:68px!important;padding:0 9px!important;font-size:11px!important}#lt-game-launch.lt-game-launch{min-width:78px!important;padding:0 8px!important;font-size:10px!important}}
@media(max-width:1023px){.lt-new-header{height:66px!important}.lt-new-header-inner{height:66px!important;min-height:66px!important;width:calc(100% - 16px)!important}.lt-new-nav{display:none!important}.lt-new-actions{margin-inline-start:auto!important}.lt-new-mobile{display:flex!important;width:40px!important;height:40px!important;align-items:center;justify-content:center;flex-direction:column;gap:4px;background:#08111b!important;border:1px solid rgba(148,163,184,.18)!important;border-radius:2px!important}.lt-new-mobile span{width:17px!important;height:2px!important;background:#dcebf3!important}.lt-new-brand{min-width:0!important;flex:1 1 auto!important}.lt-new-brand img{width:36px!important;height:36px!important}.lt-new-brand-text strong{font-size:15px!important}body>main{margin-top:66px!important}main>section:first-of-type{padding-top:28px!important}}
@media(max-width:560px){.lt-new-header{height:62px!important}.lt-new-header-inner{height:62px!important;min-height:62px!important;width:calc(100% - 10px)!important}.lt-new-brand img{width:32px!important;height:32px!important}.lt-new-brand-text strong{font-size:13px!important}.lt-new-brand-text small{font-size:5.5px!important}.lt-new-lang{width:36px!important;min-width:36px!important;height:36px!important;min-height:36px!important}.lt-new-store{min-width:60px!important;height:36px!important;min-height:36px!important;font-size:9px!important}#lt-game-launch.lt-game-launch{min-width:40px!important;width:40px!important;height:36px!important;min-height:36px!important;padding:0!important}.lt-game-launch-label{display:none!important}.lt-game-launch-icon{font-size:14px!important}.lt-new-mobile{width:36px!important;height:36px!important}body>main{margin-top:62px!important}}

/* ================================================================
   LEGEND TOWN FINAL MOBILE PASS — V19
   Phone navigation/touch + clean countdown + staff filters.
   ================================================================ */

/* ---- mobile header: compact, balanced, no cropped labels ---- */
@media (max-width: 1023px) {
  .lt-new-header,
  #lt-global-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 74px !important;
    min-height: 74px !important;
    z-index: 11000 !important;
    overflow: visible !important;
  }
  .lt-new-header-inner {
    width: calc(100% - 12px) !important;
    height: 74px !important;
    min-height: 74px !important;
    margin: 0 auto !important;
    padding: 0 4px !important;
    gap: 7px !important;
    overflow: visible !important;
  }
  .lt-new-brand {
    order: 3 !important;
    flex: 0 1 128px !important;
    width: 128px !important;
    min-width: 108px !important;
    max-width: 128px !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .lt-new-brand img {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
  }
  .lt-new-brand-text {
    min-width: 0 !important;
    overflow: visible !important;
  }
  .lt-new-brand-text strong {
    display: block !important;
    font-size: 14px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .lt-new-brand-text small {
    display: block !important;
    font-size: 6px !important;
    letter-spacing: .28em !important;
    white-space: nowrap !important;
  }
  .lt-new-actions {
    order: 1 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    overflow: visible !important;
  }
  .lt-new-mobile { order: 1 !important; }
  .lt-game-launch { order: 2 !important; }
  .lt-new-store { order: 3 !important; }
  .lt-new-lang { order: 4 !important; }
  .lt-new-mobile,
  .lt-game-launch,
  .lt-new-store,
  .lt-new-lang {
    flex: 0 0 auto !important;
    position: relative !important;
    z-index: 11001 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  .lt-new-mobile {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
  }
  #lt-game-launch.lt-game-launch {
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 !important;
  }
  .lt-game-launch-label { display: none !important; }
  .lt-game-launch-icon { font-size: 16px !important; }
  .lt-new-store {
    width: 70px !important;
    min-width: 70px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 8px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  .lt-new-lang {
    width: 62px !important;
    min-width: 62px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 5px !important;
    font-size: 10px !important;
    white-space: nowrap !important;
  }
  body > main { margin-top: 74px !important; }
}

@media (max-width: 380px) {
  .lt-new-header-inner { gap: 4px !important; }
  .lt-new-brand { flex-basis: 112px !important; width: 112px !important; min-width: 96px !important; }
  .lt-new-brand-text strong { font-size: 12px !important; }
  .lt-new-brand img { width: 31px !important; height: 31px !important; flex-basis: 31px !important; }
  .lt-new-store { width: 62px !important; min-width: 62px !important; font-size: 9px !important; }
  .lt-new-lang { width: 56px !important; min-width: 56px !important; font-size: 9px !important; }
}

/* ---- mobile drawer/menu and all category/filter controls are true touch targets ---- */
.ltm-overlay,
.ltm-drawer,
.ltm-drawer * {
  touch-action: manipulation;
}
.ltm-drawer { z-index: 12001 !important; pointer-events: auto !important; }
.ltm-overlay { z-index: 12000 !important; }
.ltm-link,
.ltm-store,
.ltm-mini,
.ltm-close {
  position: relative !important;
  z-index: 12002 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Staff department/category controls */
.lt-staff-depts,
.lt-staff-filters,
.lt-staff-dept,
.lt-staff-toggle,
.lt-staff-filters button,
.lt-staff-expand,
.lt-staff-btn,
.lt-staff-action,
.lt-staff-refresh,
.lt-staff-nav-btn {
  position: relative !important;
  z-index: 4 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}
.lt-staff-dept { overflow: visible !important; }
.lt-staff-filters { overflow: visible !important; }
@media (max-width: 720px) {
  .lt-staff-filters button,
  .lt-staff-toggle,
  .lt-staff-expand,
  .lt-staff-btn,
  .lt-staff-refresh,
  .lt-staff-nav-btn {
    min-height: 42px !important;
  }
  .lt-staff-filters button { padding: 9px 12px !important; }
}

/* ---- countdown: numbers only, no boxes/borders ---- */
.lt-cd-box {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: .25rem 0 .45rem !important;
}
#lt-countdown { gap: .35rem !important; }
.lt-cd-seg {
  min-width: auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.lt-cd-num {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  text-shadow: 0 0 22px rgba(32,144,208,.28) !important;
}
.lt-cd-sep {
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
@media (max-width: 768px) {
  #lt-countdown { gap: .2rem !important; }
  .lt-cd-box { padding: .15rem 0 .3rem !important; }
  .lt-cd-num { font-size: clamp(1.35rem, 7vw, 2rem) !important; }
  .lt-cd-sep { font-size: 1.05rem !important; }
  .lt-cd-label { margin-top: .35rem !important; }
}

/* ---- card game: give the board a real physical height on every phone ---- */
.lt-game-card .lt-game-grid {
  flex: 0 0 auto !important;
  height: clamp(360px, calc(100vh - 270px), 540px) !important;
  min-height: 360px !important;
  max-height: 540px !important;
}
.lt-game-card .lt-game-grid .lt-card {
  min-height: 0 !important;
  height: auto !important;
}
@media (max-width: 700px) {
  .lt-game-card .lt-game-grid {
    height: clamp(300px, calc(100vh - 250px), 520px) !important;
    min-height: 300px !important;
    max-height: 520px !important;
  }
}
@media (max-height: 700px) {
  .lt-game-card .lt-game-grid {
    height: calc(100vh - 245px) !important;
    min-height: 280px !important;
    max-height: none !important;
  }
}

/* ==================================================================
   NAV ACCOUNT BUTTON                                        v26
   ------------------------------------------------------------------
   Replaces the old "Apply" and "Staff" links. One button: sign in, or
   your face and a way into your profile.
   ================================================================== */

.lt-account-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, .3);
  background: rgba(34, 211, 238, .1);
  color: #22d3ee;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.lt-account-btn:hover { background: rgba(34, 211, 238, .2); border-color: rgba(34, 211, 238, .5); }

.lt-account-btn img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
  margin-inline-start: -6px;
}

.lt-account-btn.is-in {
  border-color: rgba(52, 211, 153, .34);
  background: rgba(52, 211, 153, .1);
  color: #34d399;
}

.lt-account-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.lt-account-btn:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* On a phone the header is already tight (see the v25 note about the
   game button and the hamburger colliding). Drop the label and keep a
   round icon-sized target rather than letting it push the menu off. */
@media (max-width: 640px) {
  .lt-account-btn { padding: 0 12px; font-size: 12px; height: 38px; }
  .lt-account-btn span[data-en] { display: none; }
  .lt-account-btn.is-in img { margin-inline-start: 0; }
}


/* ===================== LEGEND TOWN — PRO HEADER / ARABIC TYPE PASS ===================== */

:root {
  --lt-font-ar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif;
  --lt-font-ui: 'Inter', var(--lt-font-ar), system-ui, sans-serif;
}

html[lang="ar"] body,
html[lang="ar"] button,
html[lang="ar"] input,
html[lang="ar"] select,
html[lang="ar"] textarea,
html[lang="ar"] .lt-new-header,
html[lang="ar"] .lt-new-header * {
  font-family: var(--lt-font-ar) !important;
}

html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] .lt-new-header,
html[lang="en"] .lt-new-header * {
  font-family: var(--lt-font-ui) !important;
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Desktop: brand right, navigation genuinely centered, utility buttons
   grouped together on the opposite side. No more scattered header controls. */
@media (min-width: 1024px) {
  #lt-global-header.lt-new-header {
    height: 76px !important;
    min-height: 76px !important;
    background: rgba(3, 8, 14, .94) !important;
    border-bottom: 1px solid rgba(148, 163, 184, .13) !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.18) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(140%) !important;
    z-index: 1000 !important;
  }

  #lt-global-header .lt-new-header-inner {
    width: min(1540px, calc(100% - 48px)) !important;
    height: 76px !important;
    min-height: 76px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(220px, 1fr) auto minmax(360px, 1fr) !important;
    align-items: center !important;
    gap: 28px !important;
    direction: ltr !important;
  }

  #lt-global-header .lt-new-brand {
    grid-column: 1 !important;
    justify-self: start !important;
    direction: ltr !important;
    min-width: 0 !important;
  }
  html[lang="ar"] #lt-global-header .lt-new-brand {
    justify-self: end !important;
    direction: rtl !important;
  }

  #lt-global-header .lt-new-nav {
    grid-column: 2 !important;
    justify-self: center !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    direction: rtl !important;
    padding: 4px !important;
    border: 1px solid rgba(148,163,184,.11) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.025) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025) !important;
  }
  html[lang="en"] #lt-global-header .lt-new-nav { direction: ltr !important; }

  #lt-global-header .lt-single-nav a {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 15px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    transition: .18s ease !important;
  }
  #lt-global-header .lt-single-nav a:hover {
    color: #e6f7ff !important;
    background: rgba(34,211,238,.07) !important;
    border-color: rgba(34,211,238,.13) !important;
  }
  #lt-global-header .lt-single-nav a.active,
  #lt-global-header .lt-single-nav a[aria-current="page"] {
    color: #fff !important;
    background: rgba(34,211,238,.10) !important;
    border-color: rgba(34,211,238,.20) !important;
  }

  #lt-global-header .lt-new-actions {
    grid-column: 3 !important;
    justify-self: end !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    margin: 0 !important;
    direction: ltr !important;
    padding: 5px !important;
    border: 1px solid rgba(148,163,184,.10) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.022) !important;
  }
  html[lang="ar"] #lt-global-header .lt-new-actions { direction: ltr !important; }

  #lt-global-header .lt-account-btn,
  #lt-global-header .lt-new-lang,
  #lt-global-header .lt-new-store,
  #lt-global-header #lt-game-launch {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148,163,184,.15) !important;
    background: rgba(7,16,26,.82) !important;
    color: #cbd5e1 !important;
    box-shadow: none !important;
    font-family: var(--lt-font-ui) !important;
    transition: transform .16s ease, background .16s ease, border-color .16s ease, color .16s ease !important;
  }
  #lt-global-header .lt-account-btn:hover,
  #lt-global-header .lt-new-lang:hover,
  #lt-global-header .lt-new-store:hover,
  #lt-global-header #lt-game-launch:hover {
    transform: translateY(-1px) !important;
    color: #fff !important;
    background: rgba(14,31,46,.96) !important;
    border-color: rgba(34,211,238,.35) !important;
  }

  #lt-global-header .lt-account-btn {
    min-width: 104px !important;
    padding: 0 13px !important;
    gap: 8px !important;
    justify-content: center !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  #lt-global-header .lt-account-btn.is-in { min-width: 46px !important; width: 46px !important; padding: 0 !important; }
  #lt-global-header .lt-account-btn img { width: 28px !important; height: 28px !important; margin: 0 !important; border-radius: 50% !important; }
  #lt-global-header .lt-account-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #22d3ee !important; box-shadow: 0 0 12px rgba(34,211,238,.7) !important; }

  #lt-global-header .lt-new-lang {
    width: 98px !important;
    min-width: 98px !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  #lt-global-header .lt-new-lang::before { content: '◐'; color: #22d3ee; font-size: 13px; }
  #lt-global-header .lt-new-lang-label { display: inline !important; }

  #lt-global-header .lt-new-store {
    min-width: 88px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }
  #lt-global-header .lt-store-icon { font-size: 12px !important; color: #22d3ee !important; }

  #lt-global-header #lt-game-launch {
    min-width: 104px !important;
    padding: 0 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    font-size: 10px !important;
    font-weight: 800 !important;
  }
  #lt-global-header .lt-game-launch-icon { color: #22d3ee !important; }
  #lt-global-header .lt-new-mobile { display: none !important; }
}

/* Large desktop spacing: keep the middle nav visually centred even when
   the utility group has more buttons than the brand side. */
@media (min-width: 1280px) {
  #lt-global-header .lt-new-header-inner { grid-template-columns: 1fr auto 1fr !important; gap: 42px !important; }
  #lt-global-header .lt-new-actions { gap: 8px !important; }
}

/* Tablet / phone: one clean row, no old EN/ع micro-button. */
@media (max-width: 1023px) {
  #lt-global-header.lt-new-header {
    height: 66px !important;
    min-height: 66px !important;
    background: rgba(3,8,14,.96) !important;
    border-bottom: 1px solid rgba(148,163,184,.12) !important;
    backdrop-filter: blur(16px) !important;
  }
  #lt-global-header .lt-new-header-inner {
    height: 66px !important;
    min-height: 66px !important;
    width: calc(100% - 18px) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    direction: rtl !important;
  }
  html[lang="en"] #lt-global-header .lt-new-header-inner { direction: ltr !important; }
  #lt-global-header .lt-new-brand { flex: 1 1 auto !important; min-width: 0 !important; max-width: 42vw !important; }
  #lt-global-header .lt-new-brand img { width: 34px !important; height: 34px !important; }
  #lt-global-header .lt-new-brand-text strong { font-size: 13px !important; }
  #lt-global-header .lt-new-brand-text small { font-size: 5.5px !important; }
  #lt-global-header .lt-new-actions {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 4px !important;
    gap: 5px !important;
    border: 1px solid rgba(148,163,184,.10) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.02) !important;
    display: flex !important;
    align-items: center !important;
    direction: ltr !important;
  }
  #lt-global-header .lt-account-btn,
  #lt-global-header .lt-new-lang,
  #lt-global-header .lt-new-store,
  #lt-global-header #lt-game-launch,
  #lt-global-header .lt-new-mobile {
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 9px !important;
  }
  #lt-global-header .lt-account-btn { min-width: 42px !important; width: 42px !important; padding: 0 !important; }
  #lt-global-header .lt-account-btn span[data-en] { display: none !important; }
  #lt-global-header .lt-account-btn.is-in { width: 38px !important; min-width: 38px !important; }
  #lt-global-header .lt-account-btn img { width: 26px !important; height: 26px !important; }
  #lt-global-header .lt-new-lang { width: 92px !important; min-width: 92px !important; padding: 0 7px !important; font-size: 9px !important; }
  #lt-global-header .lt-new-store { width: 72px !important; min-width: 72px !important; padding: 0 8px !important; font-size: 9px !important; }
  #lt-global-header #lt-game-launch { width: 38px !important; min-width: 38px !important; padding: 0 !important; }
  #lt-global-header .lt-game-launch-label { display: none !important; }
  #lt-global-header .lt-new-mobile { width: 38px !important; min-width: 38px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 4px !important; background: #08111b !important; border: 1px solid rgba(148,163,184,.15) !important; }
  #lt-global-header .lt-new-mobile span { width: 17px !important; height: 2px !important; background: #dcebf3 !important; }
  body > main { margin-top: 66px !important; }
}

@media (max-width: 560px) {
  #lt-global-header .lt-new-header-inner { width: calc(100% - 10px) !important; }
  #lt-global-header .lt-new-brand { max-width: 31vw !important; }
  #lt-global-header .lt-new-brand img { width: 31px !important; height: 31px !important; }
  #lt-global-header .lt-new-brand-text strong { font-size: 11px !important; }
  #lt-global-header .lt-new-brand-text small { display: none !important; }
  #lt-global-header .lt-new-actions { gap: 3px !important; padding: 3px !important; }
  #lt-global-header .lt-new-lang { width: 78px !important; min-width: 78px !important; font-size: 8px !important; }
  #lt-global-header .lt-new-store { width: 62px !important; min-width: 62px !important; font-size: 8px !important; }
  #lt-global-header #lt-game-launch { width: 34px !important; min-width: 34px !important; }
  #lt-global-header .lt-new-mobile { width: 34px !important; min-width: 34px !important; }
  body > main { margin-top: 62px !important; }
}


/* ===================== LEGEND TOWN — FINAL GLOBAL POLISH V30 ===================== */
:root{
  --lt-cyan:#22d3ee;
  --lt-cyan-strong:#06b6d4;
  --lt-bg:#05080d;
  --lt-panel:#09111b;
  --lt-border:rgba(148,163,184,.14);
}
html,body{overflow-x:hidden}
body{
  font-family:var(--lt-font-ar)!important;
  background:
    radial-gradient(circle at 50% -10%,rgba(34,211,238,.055),transparent 32%),
    #05080d!important;
}
html[lang="en"] body{font-family:var(--lt-font-ui)!important}

/* Titles: compact, aligned hierarchy. Kill the giant gaps between badge/title/subtitle. */
main > section:first-child,
main > section > section:first-child{
  scroll-margin-top:90px;
}
main h1{
  line-height:1.08!important;
  margin-top:14px!important;
  margin-bottom:0!important;
  letter-spacing:-.035em!important;
}
main h1 + p{
  margin-top:12px!important;
  line-height:1.8!important;
  max-width:760px!important;
}
main h2{
  line-height:1.18!important;
}
main h2 + p{
  margin-top:10px!important;
  line-height:1.75!important;
}
/* Hero containers on every page: less empty vertical space, more content above fold. */
main > section:first-child > section,
#team-content > section:first-child,
main > section.relative.flex.min-h-\[580px\],
main > section.relative.flex.min-h-\[480px\]{
  min-height:360px!important;
  padding-top:120px!important;
  padding-bottom:56px!important;
}
main > section:first-child .pt-44,
main > section:first-child .sm\:pt-44{
  padding-top:120px!important;
}
main > section:first-child .pb-24,
main > section:first-child .sm\:pb-24{
  padding-bottom:56px!important;
}

/* Team section headings */
#team-content section > div > div:first-child{
  margin-bottom:18px!important;
}
#team-content section > div > div:first-child h2{
  font-size:18px!important;
  line-height:1.2!important;
}
#team-content section > div > div:first-child + div{
  margin-top:18px!important;
}

/* Homepage live area: ONLY one button. No live/false status, counters, cards or huge empty shell. */
#lt-live-section.lt-home-live-button-only{
  padding:22px 16px 34px!important;
  min-height:0!important;
}
#lt-live-section.lt-home-live-button-only .lt-home-live-button-wrap{
  width:100%!important;
  display:flex!important;
  justify-content:center!important;
}
#lt-live-section .lt-home-live-button{
  min-height:50px!important;
  padding:0 20px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  border:1px solid rgba(34,211,238,.24)!important;
  border-radius:12px!important;
  background:linear-gradient(180deg,rgba(12,31,44,.9),rgba(7,17,27,.94))!important;
  color:#e7faff!important;
  font-size:13px!important;
  font-weight:800!important;
  text-decoration:none!important;
  box-shadow:0 12px 30px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.04)!important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease!important;
}
#lt-live-section .lt-home-live-button:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(34,211,238,.52)!important;
  background:linear-gradient(180deg,rgba(13,42,58,.96),rgba(7,21,32,.98))!important;
  box-shadow:0 16px 38px rgba(0,0,0,.28),0 0 28px rgba(34,211,238,.08)!important;
}
.lt-home-live-button-icon{color:var(--lt-cyan)!important;font-size:12px!important}
.lt-home-live-button-arrow{color:#67e8f9!important;font-size:16px!important}

/* Application cards: proper visual hierarchy and professional icons. */
.lt-dept-grid{
  gap:16px!important;
}
.lt-dept-grid > *{
  min-height:250px!important;
  border:1px solid rgba(148,163,184,.13)!important;
  border-radius:16px!important;
  background:
    radial-gradient(circle at 88% 0%,rgba(34,211,238,.055),transparent 32%),
    linear-gradient(180deg,rgba(10,18,29,.96),rgba(6,12,20,.98))!important;
  box-shadow:0 14px 36px rgba(0,0,0,.16)!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
  overflow:hidden!important;
}
.lt-dept-grid > *:hover{
  transform:translateY(-3px)!important;
  border-color:rgba(34,211,238,.30)!important;
  box-shadow:0 18px 44px rgba(0,0,0,.26),0 0 30px rgba(34,211,238,.045)!important;
}
.lt-dept-icon{
  width:54px!important;height:54px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  margin-bottom:14px!important;
  border:1px solid rgba(34,211,238,.20)!important;
  border-radius:14px!important;
  background:rgba(34,211,238,.075)!important;
  color:#67e8f9!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.lt-dept-icon svg{width:27px!important;height:27px!important;stroke-width:1.8!important}
.lt-dept-title{
  margin:0!important;
  font-size:17px!important;
  line-height:1.45!important;
  font-weight:850!important;
  color:#f8fafc!important;
}
.lt-dept-desc{
  margin-top:8px!important;
  max-width:340px!important;
  font-size:12px!important;
  line-height:1.85!important;
  color:#8190a5!important;
}
.lt-dept-btn{
  min-height:40px!important;
  margin-top:18px!important;
  border-radius:10px!important;
  border:1px solid rgba(34,211,238,.18)!important;
  background:rgba(34,211,238,.06)!important;
  color:#bff6ff!important;
  font-size:12px!important;
  font-weight:800!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  transition:.18s ease!important;
}
.lt-dept-grid > *:hover .lt-dept-btn{
  background:rgba(34,211,238,.11)!important;
  border-color:rgba(34,211,238,.35)!important;
  color:#fff!important;
}

/* Staff access panel */
.lt-sp-access-hero{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:18px!important;
  padding:16px 18px!important;
  margin-bottom:16px!important;
  border:1px solid rgba(34,211,238,.12)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,rgba(12,25,38,.8),rgba(7,15,24,.8))!important;
}
.lt-sp-access-hero b{display:block!important;color:#f8fafc!important;font-size:14px!important}
.lt-sp-access-hero span{color:#8290a4!important;font-size:11px!important}
.lt-sp-access-count{
  flex:0 0 auto!important;
  padding:8px 12px!important;
  border:1px solid rgba(34,211,238,.18)!important;
  border-radius:9px!important;
  color:#67e8f9!important;
  background:rgba(34,211,238,.05)!important;
  font-weight:800!important;
}
.lt-sp-person{
  min-height:76px!important;
  padding:12px 14px!important;
  gap:12px!important;
  border:1px solid rgba(148,163,184,.10)!important;
  border-radius:12px!important;
  background:rgba(7,14,23,.76)!important;
  margin-top:8px!important;
}
.lt-sp-person:hover{border-color:rgba(34,211,238,.22)!important;background:rgba(9,19,30,.92)!important}
.lt-sp-person img{width:40px!important;height:40px!important;border-radius:50%!important;object-fit:cover!important;border:1px solid rgba(34,211,238,.22)!important}
.lt-sp-person-who{min-width:0!important}
.lt-sp-person-who b{font-size:12px!important;color:#f8fafc!important}
.lt-sp-person-who > span{font-size:9px!important;color:#64748b!important}
.lt-sp-person-rank{margin-left:auto!important;text-align:right!important}
.lt-sp-person-rank strong{display:block!important;font-size:11px!important;color:#67e8f9!important}
.lt-sp-person-rank small{display:block!important;font-size:9px!important;color:#64748b!important;margin-top:3px!important}
.lt-sp-tag{
  display:inline-flex!important;
  align-items:center!important;
  margin:4px 4px 0 0!important;
  padding:4px 7px!important;
  border-radius:7px!important;
  border:1px solid rgba(34,211,238,.12)!important;
  background:rgba(34,211,238,.045)!important;
  color:#9eeaf5!important;
  font-size:9px!important;
  line-height:1.2!important;
}
.lt-sp-tag.is-global{color:#c4b5fd!important;border-color:rgba(167,139,250,.15)!important;background:rgba(167,139,250,.05)!important}
.lt-sp-btn{
  min-height:34px!important;
  padding:0 10px!important;
  border-radius:8px!important;
  font-size:10px!important;
  font-weight:800!important;
  border:1px solid rgba(148,163,184,.15)!important;
}
.lt-sp-btn.is-ghost{color:#bae6fd!important;background:rgba(34,211,238,.05)!important}
.lt-sp-btn.is-no{color:#fda4af!important;background:rgba(244,63,94,.04)!important}
.lt-sp-check{
  min-height:42px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 11px!important;
  border:1px solid rgba(148,163,184,.11)!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.018)!important;
  color:#94a3b8!important;
  font-size:10px!important;
  font-weight:700!important;
}
.lt-sp-check.is-ticked{
  color:#dffbff!important;
  border-color:rgba(34,211,238,.30)!important;
  background:rgba(34,211,238,.07)!important;
}
.lt-sp-check input{accent-color:#22d3ee!important;width:15px!important;height:15px!important}
.lt-sp-save{
  min-height:48px!important;
  border-radius:11px!important;
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:0!important;
}

/* Prevent text clipping/cropping in all header buttons. */
#lt-global-header .lt-single-nav a,
#lt-global-header .lt-account-btn,
#lt-global-header .lt-new-lang,
#lt-global-header .lt-new-store,
#lt-global-header #lt-game-launch{
  white-space:nowrap!important;
  overflow:visible!important;
  line-height:1.2!important;
  writing-mode:horizontal-tb!important;
}
#lt-global-header .lt-single-nav a span,
#lt-global-header button span,
#lt-global-header a span{
  max-width:none!important;
  overflow:visible!important;
  text-overflow:clip!important;
}

/* Mobile: replace desktop density with a real app-style header. */
@media(max-width:1023px){
  main{padding-top:72px!important}
  main > section:first-child > section,
  #team-content > section:first-child{
    min-height:300px!important;
    padding-top:92px!important;
    padding-bottom:42px!important;
  }
  main h1{font-size:clamp(2.25rem,10vw,4rem)!important}
  main h1 + p{font-size:13px!important;line-height:1.8!important}
  .lt-home-live-button{width:min(100%,360px)!important}
  .lt-dept-grid{grid-template-columns:1fr!important}
  .lt-dept-grid > *{min-height:220px!important}
  .lt-sp-access-hero{align-items:flex-start!important;flex-direction:column!important}
  .lt-sp-person{display:grid!important;grid-template-columns:40px minmax(0,1fr)!important}
  .lt-sp-person-rank{margin-left:0!important;text-align:left!important;grid-column:2!important}
  .lt-sp-person .lt-sp-btn{grid-column:2!important;width:100%!important}
}
@media(max-width:560px){
  main > section:first-child > section,
  #team-content > section:first-child{
    min-height:270px!important;
    padding-top:78px!important;
    padding-bottom:34px!important;
  }
  main h1{font-size:clamp(2rem,12vw,3.2rem)!important}
  .lt-sp-grid{grid-template-columns:1fr!important}
  .lt-sp-access-list-head{display:none!important}
}

/* V31 — HEADER / PROFILE BUTTON / LANGUAGE */
#lt-global-header .lt-account-btn{min-width:132px!important;width:auto!important;height:46px!important;min-height:46px!important;padding:0 14px!important;border-radius:11px!important;gap:9px!important;font-size:12px!important}
#lt-global-header .lt-account-btn.is-in{min-width:132px!important;width:auto!important;padding:0 12px!important}
#lt-global-header .lt-account-btn img{width:36px!important;height:36px!important;margin:0!important;border-radius:50%!important;border:1px solid rgba(34,211,238,.45)!important;box-shadow:0 0 18px rgba(34,211,238,.10)!important}
#lt-global-header .lt-account-btn span[data-en]{display:inline!important}
#lt-global-header .lt-new-lang{width:104px!important;min-width:104px!important;height:46px!important;min-height:46px!important;border-radius:11px!important}
#lt-global-header .lt-new-store,#lt-global-header #lt-game-launch{height:46px!important;min-height:46px!important;border-radius:11px!important}
#lt-global-header .lt-new-actions{gap:7px!important}
#lt-global-header .lt-new-lang-label{white-space:nowrap!important}
@media(max-width:1023px){#lt-global-header .lt-account-btn{min-width:92px!important;width:auto!important;height:42px!important;min-height:42px!important}#lt-global-header .lt-account-btn.is-in{min-width:92px!important;width:auto!important}#lt-global-header .lt-account-btn img{width:32px!important;height:32px!important}#lt-global-header .lt-new-lang{width:78px!important;min-width:78px!important;height:42px!important;min-height:42px!important}}
@media(max-width:560px){#lt-global-header .lt-account-btn{min-width:76px!important;height:38px!important;min-height:38px!important;padding:0 9px!important;font-size:10px!important}#lt-global-header .lt-account-btn.is-in{min-width:76px!important;width:auto!important}#lt-global-header .lt-account-btn img{width:30px!important;height:30px!important}#lt-global-header .lt-account-btn span[data-en]{display:inline!important}#lt-global-header .lt-new-lang{width:70px!important;min-width:70px!important;height:38px!important;min-height:38px!important;font-size:9px!important}}

/* Never allow the old homepage live status/button shell to return. */
#lt-live-section{display:none!important}