:root {
  /* Surfaces — deep aubergine, warmer than midnight */
  --bg-deep:        #14092B;
  --bg-modal:       #1E0F36;
  --bg-elevated:    #2A1A47;
  --bg-rest:        rgba(20, 9, 43, 0.94);

  /* Brand — champagne gold, not slot-machine yellow */
  --gold:           #D4A95C;
  --gold-bright:    #F4D58D;
  --gold-deep:      #8E6D2E;
  --burgundy:       #7A1F2C;

  /* Ink */
  --ink:            #F8F0E1;
  --ink-muted:      #B5A8C9;
  --ink-faded:      #6E5F8C;

  /* Functional */
  --good:           #8FBC8F;
  --warn:           #E8A33A;
  --bad:            #C5384B;

  /* Geometry */
  --hairline:        1px solid rgba(212, 169, 92, 0.18);
  --hairline-strong: 1px solid rgba(212, 169, 92, 0.40);
  --shadow-luxe:     0 32px 80px -16px rgba(0,0,0,0.7), 0 0 0 1px rgba(212,169,92,0.14);
  --shadow-button:   0 8px 24px -8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(244,213,141,0.18);

  --radius-sharp:   2px;
  --radius-soft:    6px;
  --radius-card:    14px;

  /* Subtle film-grain noise */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* Typography — Latin uses Alfa Slab; non-Latin scripts fall back to Noto. */
  --font-display:   'Alfa Slab One', 'Noto Serif Devanagari', 'Noto Serif Bengali', 'Noto Nastaliq Urdu', 'Bowlby One', Georgia, serif;
  --font-body:      'Fredoka', 'Noto Sans Devanagari', 'Noto Sans Bengali', 'Noto Nastaliq Urdu', 'Nunito', -apple-system, system-ui, sans-serif;
  --font-numeric:   'Alfa Slab One', Georgia, serif;

  /* Legacy aliases (used by existing modal.css / popup.css / hud.css) */
  --gold-primary:   var(--gold);
  --gold-dark:      var(--gold-deep);
  --gold-glow:      var(--gold-bright);
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-muted);
  --text-muted:     var(--ink-faded);
  --error:          var(--bad);
  --success:        var(--good);
  --warning:        var(--warn);
  --border-subtle:  rgba(212, 169, 92, 0.18);
  --shadow-card:    var(--shadow-luxe);
  --radius-sm:      var(--radius-soft);
  --radius-md:      10px;
  --radius-lg:      var(--radius-card);
  --bg-overlay:     rgba(8, 4, 18, 0.86);
  --overlay-shadow: rgba(8, 4, 18, 0.86);
  --red-accent:     var(--burgundy);
}

#appOverlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  font-family: var(--font-body);
  color: var(--ink);
  font-feature-settings: 'ss01';
}
#appOverlay > * { pointer-events: auto; }

/* ───── TMA fallback (browser-direct visit) ───── */
.tma-fallback {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212,169,92,0.10), transparent 60%),
    var(--bg-deep);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  padding: 32px;
}
.tma-fallback::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--grain);
  pointer-events: none;
  opacity: 0.6;
}
.tma-fallback__inner { text-align: center; max-width: 360px; position: relative; }
.tma-fallback__inner::before,
.tma-fallback__inner::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto 24px;
}
.tma-fallback__inner::after { margin: 28px auto 0; }
.tma-fallback__inner h1 {
  font-family: var(--font-display);
  font-weight: 400;
  color: var(--gold-bright);
  font-size: 38px;
  letter-spacing: 0.01em;
  margin: 0 0 14px;
  line-height: 1.05;
  text-transform: uppercase;
  text-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 0 24px rgba(244,213,141,0.3);
}
.tma-fallback__inner p {
  color: var(--ink-muted);
  margin: 0 0 28px;
  font-size: 14px;
  line-height: 1.55;
}
.tma-fallback__btn {
  display: inline-block;
  padding: 14px 36px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 40%, var(--gold-deep));
  color: #0A0518;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: var(--radius-soft);
  text-decoration: none;
  box-shadow: var(--shadow-button);
}
.tma-fallback__btn::after {
  content: '→';
  margin-left: 10px;
  font-family: var(--font-display);
  font-size: 16px;
}

/* ───── Script-aware typography overrides ─────
   Скрипты с собственной графикой используют свои Noto-семьи. */
html[data-lang="hi"] {
  --font-display: 'Noto Serif Devanagari', 'Alfa Slab One', Georgia, serif;
  --font-body:    'Noto Sans Devanagari', 'Fredoka', system-ui, sans-serif;
}
html[data-lang="bn"] {
  --font-display: 'Noto Serif Bengali', 'Alfa Slab One', Georgia, serif;
  --font-body:    'Noto Sans Bengali', 'Fredoka', system-ui, sans-serif;
}
html[data-lang="ur"] {
  --font-display: 'Noto Nastaliq Urdu', 'Alfa Slab One', Georgia, serif;
  --font-body:    'Noto Nastaliq Urdu', 'Fredoka', system-ui, sans-serif;
}

/* RTL — flip layouts only for elements that need direction-awareness */
html[dir="rtl"] #hudFloat { right: auto; left: 14px; }
html[dir="rtl"] #popupStack { right: auto; left: 14px; }
html[dir="rtl"] .win-popup {
  border-left: 1px solid rgba(212, 169, 92, 0.32);
  border-right: 2px solid var(--gold);
}
html[dir="rtl"] .modal__tab--active::after { left: 14px; right: 14px; }

/* ───── Language popover ───── */
.lang-popover {
  position: fixed;
  background: linear-gradient(180deg, rgba(42,26,71,0.96), rgba(20,9,43,0.96));
  border: 1px solid rgba(212, 169, 92, 0.32);
  border-radius: var(--radius-soft);
  box-shadow: var(--shadow-luxe);
  /* backdrop-filter removed — iOS WebKit canvas downsample issue. */
  z-index: 400;
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 160px;
  animation: pop-in 200ms cubic-bezier(.22,.61,.36,1) both;
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.lang-popover__item {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  text-align: left;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: 14px;
  cursor: pointer;
  border-radius: 4px;
  transition: background 160ms ease, color 160ms ease;
}
.lang-popover__item:hover { background: rgba(244, 213, 141, 0.08); color: var(--ink); }
.lang-popover__item.is-active {
  color: var(--gold-bright);
  background: rgba(244, 213, 141, 0.06);
}
html[dir="rtl"] .lang-popover__item { text-align: right; }
/* Native script samples each carry their own font in the picker */
.lang-popover__item[data-lang="en"] { font-family: 'Fredoka', system-ui, sans-serif; }
.lang-popover__item[data-lang="hi"] { font-family: 'Noto Sans Devanagari', system-ui; }
.lang-popover__item[data-lang="bn"] { font-family: 'Noto Sans Bengali', system-ui; }
.lang-popover__item[data-lang="ur"] { font-family: 'Noto Nastaliq Urdu', system-ui; text-align: right; }