/* ── Font — Farang (same as original jinx) ── */
@font-face {
  font-family: 'Farang';
  src: url('../../fonts/Farang.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-fa:   'Farang', Tahoma, sans-serif;
  --font-en:   'Farang', sans-serif;

  /* ── Jinx original palette ── */
  --red:         #a60b0b;
  --red-dark:    #8a0909;
  --red-light:   #c41010;
  --card-bg:     #626262;
  --card-bg2:    #555555;
  --surface:     #1a1a1a;
  --surface2:    #2a2a2a;
  --surface3:    #333333;
  --muted:       rgba(255,255,255,0.55);
  --text:        #ffffff;
  --text-soft:   rgba(255,255,255,0.65);

  /* ── Compatibility aliases ── */
  --sage:        #a60b0b;
  --sage-dark:   #8a0909;
  --sage-light:  #c41010;
  --blush:       #2a2a2a;
  --blush-dark:  #444444;
  --offwhite:    #2a2a2a;
  --concrete:    rgba(255,255,255,0.5);
  --black:       #ffffff;
  --white:       #2a2a2a;

  --radius-card: 16px;
  --radius-pill: 12px;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.5);
  --shadow-btn:  0 4px 16px rgba(166,11,11,0.4);
  --max-width:   1200px;
  --col-gap:     16px;
}

*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: var(--font-fa);
}

html { scroll-behavior: smooth; direction: rtl; }

body {
  font-family: var(--font-fa);
  background-image: linear-gradient(90deg, #1a1a1a 0%, #333333 100%);
  /*background-attachment: fixed;*/
  color: var(--text);
  direction: rtl;
  overflow-x: hidden;
  min-height: 140vh;
}

#app {
  position: relative; z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
}

.page-content { padding: 0 var(--col-gap) 48px; }

.status-error {
  text-align: center; padding: 80px 20px;
  color: #ef4444; font-size: 1.6rem;
}

#app > *:first-child { animation: pageEnter 0.5s ease both; }

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.75); }
  to   { opacity: 1; transform: scale(1); }
}

::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1a1a1a; }
::-webkit-scrollbar-thumb { background: #626262; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #888; }

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

.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #626262, transparent);
  margin: 8px 0;
}

.category-section { scroll-margin-top: 60px; }

/* Hide divider inside the first visible category section */
.category-section:not(.visible) { display: none; }