/* ==========================================================================
   Farawand - فرآوند | Gamified Campaign Platform
   Design System v0.1 (Prototype)
   ========================================================================== */

/* Self-hosted Vazirmatn — kills the jsdelivr round-trip that's slow/throttled
   from Iran. font-display: swap shows fallback text immediately while the
   webfont arrives, so the page paints text without blocking. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-SemiBold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('fonts/Vazirmatn-ExtraBold.woff2') format('woff2');
  font-weight: 800 900; font-style: normal; font-display: swap;
}

:root {
  /* --- Brand Palette ------------------------------------------------------
     DEFAULT theme = "bold" (saturated indigo + coral + amber).
     Other themes override only the tokens they need via [data-theme="…"].
     Each color has 5 levels:
       --xxx          base (used everywhere)
       --xxx-light    lighter end of button gradients
       --xxx-deep     for active/text-on-light contexts
       --xxx-darker   chunky bottom-edge of 3D buttons
       --xxx-soft     chip / tinted backgrounds
       --xxx-tint     ultra-faint background washes
   ---------------------------------------------------------------------- */

  --bg:           #FBF7F1;   /* warm cream — calm, premium, Iran-friendly */
  --bg-tinted:    #F4EFE5;
  --surface:      #FFFFFF;
  --surface-soft: #FCFAF6;

  /* INDIGO / PRIMARY — bold */
  --primary:        #5246E5;
  --primary-light:  #6E62F0;
  --primary-deep:   #3D32B5;
  --primary-darker: #2D2386;
  --primary-soft:   #EFEDFE;
  --primary-tint:   #F7F5FF;

  /* CORAL / ACCENT — bold */
  --accent:         #FF6B5B;
  --accent-light:   #FF8B7C;
  --accent-deep:    #D14743;
  --accent-darker:  #B5392C;
  --accent-soft:    #FFEDE9;

  /* AMBER / GOLD — bold */
  --gold:           #F59E0B;
  --gold-light:     #FFC34A;
  --gold-deep:      #C97B05;
  --gold-darker:    #92660A;
  --gold-soft:      #FEF3D9;

  /* GREEN / SUCCESS — bold */
  --success:        #10B981;
  --success-light:  #34D399;
  --success-deep:   #059669;
  --success-darker: #03684B;
  --success-soft:   #D6F5E8;

  /* SKY / INFO — bold */
  --info:           #0EA5E9;
  --info-light:     #38BDF8;
  --info-deep:      #0284C7;
  --info-darker:    #036FA0;
  --info-soft:      #DBF1FE;

  /* --- Surfaces, text, borders, shape & depth --------------------------- */
  --text:           #1A1A2E;
  --text-muted:     #6B7280;
  --text-soft:      #9CA3AF;
  --text-onPrimary: #FFFFFF;

  --border:         #ECE5D8;
  --border-soft:    #F3EEE2;

  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  22px;
  --radius-xl:  28px;
  --radius-2xl: 36px;

  --shadow-clay:
                   inset 0 1px 0 rgba(255,255,255,0.85),
                   0 4px 0 rgba(15, 15, 35, 0.06),
                   0 14px 30px -10px rgba(82, 70, 229, 0.28),
                   0 30px 60px -25px rgba(15, 15, 35, 0.20);
  --shadow-soft:
                   inset 0 1px 0 rgba(255,255,255,0.7),
                   0 8px 24px -10px rgba(15, 15, 35, 0.10);
  --shadow-card:
                   inset 0 1px 0 rgba(255,255,255,0.85),
                   0 3px 0 rgba(15, 15, 35, 0.04),
                   0 14px 28px -14px rgba(15, 15, 35, 0.16),
                   0 30px 60px -30px rgba(82, 70, 229, 0.16);
  --shadow-card-hover:
                   inset 0 1px 0 rgba(255,255,255,0.95),
                   0 6px 0 rgba(15, 15, 35, 0.06),
                   0 22px 40px -16px rgba(82, 70, 229, 0.30),
                   0 40px 80px -30px rgba(15, 15, 35, 0.22);
  --shadow-pop:
                   inset 0 1px 0 rgba(255,255,255,0.4),
                   0 6px 0 rgba(181, 57, 44, 0.28),
                   0 18px 36px -10px rgba(255, 107, 91, 0.55);
  --shadow-3d-primary:
                   inset 0 1px 0 rgba(255,255,255,0.4),
                   inset 0 -3px 0 rgba(0, 0, 0, 0.18),
                   0 6px 0 var(--primary-darker),
                   0 12px 22px -8px rgba(123, 111, 232, 0.45);
  --shadow-3d-accent:
                   inset 0 1px 0 rgba(255,255,255,0.45),
                   inset 0 -3px 0 rgba(0, 0, 0, 0.15),
                   0 6px 0 var(--accent-darker),
                   0 12px 22px -8px rgba(255, 138, 124, 0.45);
  --shadow-3d-gold:
                   inset 0 1px 0 rgba(255,255,255,0.5),
                   inset 0 -3px 0 rgba(124, 74, 2, 0.4),
                   0 6px 0 var(--gold-darker),
                   0 12px 22px -8px rgba(255, 181, 71, 0.5);
  --shadow-3d-soft:
                   inset 0 1px 0 rgba(255,255,255,0.85),
                   0 4px 0 rgba(15, 15, 35, 0.08),
                   0 8px 16px -6px rgba(15, 15, 35, 0.12);

  --font: 'Vazirmatn', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* The 7 alternative themes (pastel/sunset/midnight/persian/ocean/berry/forest)
   live in assets/themes.css and are loaded LAZILY by proto-bar.js?ver=1 the first
   time a stakeholder opens the theme picker. The default "bold" theme above
   is everything most viewers ever need. */

/* Runtime shadow override — toggled from the proto-bar drawer for on-device
   perf debugging (see "Shadows: ON / SIMPLE / OFF" picker). The hypothesis:
   large-blur box-shadows are the prime mobile-lag suspect. With this toggle
   the user can A/B on a real phone:
     • "simple" — single tight 2-4 px-blur shadow per token (tests whether
       blur radius is the killer, not the presence of shadows).
     • "off"    — `none` everywhere (matches the Tailwind/test-2 baseline).
   Higher specificity than `:root` so it wins over both the base palette and
   the mobile media-query simplification at the bottom of this file. */
html[data-shadows="simple"] {
  --shadow-clay:        0 2px 4px rgba(15, 15, 35, 0.08);
  --shadow-soft:        0 2px 4px rgba(15, 15, 35, 0.06);
  --shadow-card:        0 2px 4px rgba(15, 15, 35, 0.06);
  --shadow-card-hover:  0 3px 6px rgba(15, 15, 35, 0.10);
  --shadow-pop:         0 2px 4px rgba(255, 107, 91, 0.20);
  --shadow-3d-primary:  0 2px 4px rgba(82, 70, 229, 0.25);
  --shadow-3d-accent:   0 2px 4px rgba(255, 107, 91, 0.25);
  --shadow-3d-gold:     0 2px 4px rgba(245, 158, 11, 0.25);
  --shadow-3d-soft:     0 2px 4px rgba(15, 15, 35, 0.08);
}
html[data-shadows="off"] {
  --shadow-clay:        none;
  --shadow-soft:        none;
  --shadow-card:        none;
  --shadow-card-hover:  none;
  --shadow-pop:         none;
  --shadow-3d-primary:  none;
  --shadow-3d-accent:   none;
  --shadow-3d-gold:     none;
  --shadow-3d-soft:     none;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Kill the default blue/grey rectangle iOS Safari + Android Chrome flash
   over tapped links/buttons. Focus rings still work for keyboard users. */
* { -webkit-tap-highlight-color: transparent; }

/* `overflow-x: clip` is the safety net against accidental horizontal scroll on
   mobile (long CTA pills, hero illustrations, promo strips, sticky headers
   that exceed viewport width). Unlike `overflow-x: hidden` this does NOT make
   the element a scroll container, so position:sticky descendants still work. */
html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-feature-settings: "ss01", "ss02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  overflow-x: clip;
}

body {
  min-height: 100vh;
  background-image:
    radial-gradient(1200px 600px at 100% -10%, rgba(82, 70, 229, 0.06), transparent 60%),
    radial-gradient(900px 500px at -10% 20%, rgba(255, 107, 91, 0.05), transparent 60%);
  /* `background-attachment: fixed` is GPU-expensive on mobile (forces full-page
     repaint every scroll frame on iOS Safari + most Android browsers).
     Desktop still gets the parallax-like fixed gradient via the override below. */
  background-attachment: scroll;
}
@media (min-width: 1025px) and (hover: hover) {
  body { background-attachment: fixed; }
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
input, textarea, select { font-family: inherit; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--primary-soft); color: var(--primary-deep); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.shell { max-width: 1200px; margin-inline: auto; padding-inline: 24px; }
.shell-narrow { max-width: 920px; margin-inline: auto; padding-inline: 24px; }

.row { display: flex; align-items: center; gap: 12px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; }
.gap-16 { gap: 16px; } .gap-20 { gap: 20px; } .gap-24 { gap: 24px; }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Top App Bar (public)
   ========================================================================== */

.appbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--border-soft);
}

.appbar-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 14px;
}

.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 18px; color: var(--text);
}

.brand-logo {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--primary) 0%, #7C5CFA 100%);
  display: grid; place-items: center;
  color: white; font-weight: 900;
  box-shadow: var(--shadow-clay);
}

.brand-sub { font-size: 11px; color: var(--text-muted); font-weight: 500; margin-top: -3px; }

.nav { display: flex; align-items: center; gap: 8px; }
.nav a {
  padding: 9px 14px; border-radius: 999px; color: var(--text-muted);
  font-size: 14px; font-weight: 500; transition: 0.18s;
}
.nav a:hover { color: var(--text); background: rgba(0,0,0,0.04); }
.nav a.active { background: var(--primary-soft); color: var(--primary-deep); font-weight: 600; }

@media (max-width: 768px) { .nav { display: none; } }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: 16px;
  font-size: 14px; font-weight: 700;
  transition: transform .14s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow .14s ease, filter .18s;
  white-space: nowrap; user-select: none;
  position: relative;
}
/* Chunky press: button moves down by exactly the bottom-edge height */
/* === 3D button physics — baseline anchored ====================================
   Lift on hover by N px ⇢  bottom-edge offset += N AND drop-shadow Y += N.
   That keeps the on-screen position of the dark "ground line" exactly fixed,
   so only the button rises (no detaching, no baseline drift). N is unified
   across all variants so the whole UI lifts the same amount. */
.btn-primary, .btn-accent, .btn-gift, .btn-soft, .btn-ghost, .btn-gold {
  transform: translateY(0);
}

/* --- PRIMARY ---------------------------------------------------------------- */
.btn-primary {
  background: linear-gradient(180deg, var(--primary-light) 0%, var(--primary) 100%);
  color: var(--text-onPrimary);
  box-shadow: var(--shadow-3d-primary);
}
.btn-primary:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.45),
  inset 0 -3px 0 rgba(0, 0, 0, 0.18),
  0 9px 0 var(--primary-darker),
  0 15px 30px -6px rgba(123, 111, 232, 0.45); }
.btn-primary:active { transform: translateY(2px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -2px 0 rgba(0, 0, 0, 0.18),
  0 1px 0 var(--primary-darker),
  0 4px 10px -4px rgba(123, 111, 232, 0.45); }

/* --- ACCENT (coral) -------------------------------------------------------- */
.btn-accent {
  background: linear-gradient(180deg, var(--accent-light) 0%, var(--accent) 100%);
  color: white;
  box-shadow: var(--shadow-3d-accent);
}
.btn-accent:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.5),
  inset 0 -3px 0 rgba(0, 0, 0, 0.15),
  0 9px 0 var(--accent-darker),
  0 15px 30px -6px rgba(255, 138, 124, 0.45); }
.btn-accent:active { transform: translateY(2px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -2px 0 rgba(0, 0, 0, 0.15),
  0 1px 0 var(--accent-darker),
  0 4px 10px -4px rgba(255, 138, 124, 0.45); }

/* --- GIFT (solid coral — for "claim 999K hadiyeh" CTAs) ------------------- */
.btn-gift {
  background: var(--accent);
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -3px 0 rgba(0, 0, 0, 0.15),
    0 6px 0 var(--accent-darker),
    0 12px 22px -8px rgba(255, 138, 124, 0.45);
}
.btn-gift:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.45),
  inset 0 -3px 0 rgba(0, 0, 0, 0.15),
  0 9px 0 var(--accent-darker),
  0 15px 30px -6px rgba(255, 138, 124, 0.45); }
.btn-gift:active { transform: translateY(2px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -2px 0 rgba(0, 0, 0, 0.15),
  0 1px 0 var(--accent-darker),
  0 4px 10px -4px rgba(255, 138, 124, 0.45); }

/* --- GOLD (rare, currently unused but kept for variety) -------------------- */
.btn-gold {
  background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--gold-darker);
  box-shadow: var(--shadow-3d-gold);
}
.btn-gold:hover { transform: translateY(-3px); filter: brightness(1.05); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.55),
  inset 0 -3px 0 rgba(124, 74, 2, 0.4),
  0 9px 0 var(--gold-darker),
  0 15px 30px -6px rgba(255, 181, 71, 0.5); }
.btn-gold:active { transform: translateY(2px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.5),
  inset 0 -2px 0 rgba(124,74,2,0.4),
  0 1px 0 var(--gold-darker),
  0 4px 10px -4px rgba(255, 181, 71, 0.5); }

/* --- GHOST (white card-like) ----------------------------------------------- */
.btn-ghost {
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-3d-soft);
}
.btn-ghost:hover { transform: translateY(-3px); background: var(--surface-soft); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.85),
  0 7px 0 rgba(15, 15, 35, 0.08),
  0 11px 20px -6px rgba(15, 15, 35, 0.14); }
.btn-ghost:active { transform: translateY(2px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.85),
  0 1px 0 rgba(15,15,35,0.08),
  0 3px 8px -3px rgba(15,15,35,0.12); }

/* --- SOFT (lavender, tertiary) --------------------------------------------- */
.btn-soft {
  background: linear-gradient(180deg, #F4F0FF 0%, var(--primary-soft) 100%);
  color: var(--primary-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 3px 0 #D7D0F8,
    0 8px 16px -6px rgba(82,70,229,0.18);
}
.btn-soft:hover { transform: translateY(-3px); background: linear-gradient(180deg, #EDE7FE, #E5E0FE); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.7),
  0 6px 0 #D7D0F8,
  0 11px 20px -6px rgba(82,70,229,0.22); }
.btn-soft:active { transform: translateY(2px); box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.7),
  0 1px 0 #D7D0F8,
  0 3px 8px -3px rgba(82,70,229,0.18); }

.btn-quiet {
  color: var(--text-muted); padding: 10px 14px;
}
.btn-quiet:hover { color: var(--text); background: rgba(0,0,0,0.04); }

.btn-lg { padding: 18px 28px; border-radius: 18px; font-size: 15px; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 12px; }

.btn-block { width: 100%; }

/* ==========================================================================
   Cards
   ========================================================================== */

.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  position: relative;
}
.card-tilt { transition: transform .2s ease, box-shadow .2s ease; }
.card-tilt:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.card-pad   { padding: 24px; }
.card-pad-l { padding: 32px; }
.card-pad-s { padding: 16px; }

.card-soft {
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
}

/* ==========================================================================
   Tags / Chips / Pills
   ========================================================================== */

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: var(--bg-tinted); color: var(--text-muted);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 2px 0 rgba(15,15,35,0.04),
    0 6px 12px -4px rgba(15,15,35,0.08);
}

.chip-primary {
  background: linear-gradient(180deg, var(--primary-tint), var(--primary-soft));
  color: var(--primary-deep);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 0 #D7D0F8,
    0 6px 12px -4px rgba(123,111,232,0.18);
}
.chip-accent {
  background: linear-gradient(180deg, #FFF6F2, var(--accent-soft));
  color: var(--accent-darker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 0 #F8C9C0,
    0 6px 12px -4px rgba(255,138,124,0.20);
}
.chip-gold {
  background: linear-gradient(180deg, #FFFAEA, var(--gold-soft));
  color: var(--gold-darker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 0 #F2DEA1,
    0 6px 12px -4px rgba(255,181,71,0.22);
}
.chip-success {
  background: linear-gradient(180deg, #ECF9F1, var(--success-soft));
  color: var(--success-darker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 0 #B6E6D0,
    0 6px 12px -4px rgba(79,209,161,0.20);
}
.chip-info {
  background: linear-gradient(180deg, #EEF7FC, var(--info-soft));
  color: var(--info-darker);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 2px 0 #B6DCF1,
    0 6px 12px -4px rgba(91,184,232,0.18);
}

/* Sticker variant — used sparingly for hero/promo only, not in lists */
.chip-sticker { transform: rotate(-2deg); }

.chip-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; display: inline-block;
}

/* ==========================================================================
   Form fields
   ========================================================================== */

.field { display: flex; flex-direction: column; gap: 6px; }
.field label {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.field .hint { font-size: 12px; color: var(--text-muted); }

.input, .textarea, .select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--text);
  transition: 0.15s;
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.input-lg { padding: 16px 18px; font-size: 16px; border-radius: 14px; }

/* ==========================================================================
   Stat / KPI Cards
   ========================================================================== */

.stat {
  background: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-soft);
  padding: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.stat-label { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.stat-value { font-size: 28px; font-weight: 800; color: var(--text); margin-top: 4px; letter-spacing: -0.01em; }
.stat-delta { font-size: 12px; font-weight: 600; }
.stat-delta.up   { color: var(--success); }
.stat-delta.down { color: #D14343; }

.stat-icon {
  width: 40px; height: 40px; border-radius: 12px;
  display: grid; place-items: center;
  margin-bottom: 12px;
}

/* ==========================================================================
   Hero & Marketing
   ========================================================================== */

.hero {
  position: relative;
  border-radius: var(--radius-2xl);
  padding: 56px 40px;
  overflow: hidden;
  /* Static aurora — two coloured pops over deep indigo. No animation;
     keeps the energetic look without the GPU cost of animating background-position. */
  background:
    radial-gradient(60% 70% at 92% 8%,  rgba(255, 107, 91, 0.42), transparent 62%),
    radial-gradient(55% 65% at 6%  92%, rgba(255, 181, 71, 0.34), transparent 62%),
    linear-gradient(135deg, #14092E 0%, #1F1252 50%, #2D1F75 100%);
  color: white;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    0 30px 70px -20px rgba(82, 70, 229, 0.5);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.20);
  padding: 6px 14px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.92);
}

.hero h1 {
  font-size: clamp(28px, 5vw, 52px);
  line-height: 1.2;
  font-weight: 800;
  margin: 18px 0 16px;
  letter-spacing: -0.01em;
}
.hero h1 .highlight {
  background: linear-gradient(90deg, #FFB199 0%, #FF6B5B 50%, #FFB199 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.hero p {
  font-size: 16px; color: rgba(255,255,255,0.78);
  max-width: 540px;
}

/* ==========================================================================
   Game card (catalog)
   ========================================================================== */

.game-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .2s ease, box-shadow .2s ease;
}
.game-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.game-cover svg.cover-art { transition: transform .25s ease; }
.game-card:hover .game-cover svg.cover-art { transform: scale(1.03); }

.game-cover {
  aspect-ratio: 16/10;
  position: relative;
  display: grid; place-items: center;
  overflow: hidden;
}

.game-cover .play-badge {
  position: absolute; top: 14px; inset-inline-start: 14px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  color: var(--text);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 6px 14px -4px rgba(15, 15, 35, 0.35);
  transition: transform .25s ease, background .2s ease;
  z-index: 3;
}
.game-cover .play-badge:hover {
  background: white;
  transform: scale(1.08);
}
.game-cover .play-badge svg {
  width: 16px; height: 16px;
  margin-inline-start: 2px; /* nudge play triangle to optical center */
  fill: var(--accent);
}

.game-body { padding: 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.game-title { font-size: 18px; font-weight: 800; color: var(--text); }
.game-desc  { font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }
.game-meta {
  display: flex; flex-wrap: wrap; gap: 6px;
  border-top: 1px dashed var(--border);
  padding-top: 12px;
}
.game-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 6px; }
.game-actions > * { flex: 1; }

/* Cover variants */
.cover-spin {
  background: radial-gradient(circle at 30% 40%, #FFD580, #FF8A65 60%, #C73E5B 100%);
}
.cover-scratch {
  background: radial-gradient(circle at 70% 60%, #C7B2FF, #6E5BE3 60%, #2E2380 100%);
}
.cover-quiz {
  background: radial-gradient(circle at 50% 50%, #7BE8B7, #16A87B 60%, #03684B 100%);
}
.cover-memory {
  background: radial-gradient(circle at 60% 40%, #FFB199, #FF6B5B 60%, #B5392C 100%);
}

/* ==========================================================================
   Wizard
   ========================================================================== */

.steps {
  display: flex; gap: 8px; align-items: center;
  overflow-x: auto; padding-bottom: 4px;
}
.step {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  font-size: 13px; color: var(--text-muted); font-weight: 500;
  white-space: nowrap;
}
.step .num {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700;
  background: var(--bg-tinted); color: var(--text-muted);
}
.step.done .num { background: var(--success); color: white; }
.step.done { color: var(--text); }
.step.active {
  background: var(--primary); color: white; border-color: var(--primary);
  box-shadow: 0 8px 18px -8px rgba(82,70,229,0.55);
}
.step.active .num { background: rgba(255,255,255,0.25); color: white; }

.step-divider { width: 16px; height: 2px; background: var(--border); border-radius: 2px; flex-shrink: 0; }

/* ==========================================================================
   Sidebar (panel)
   ========================================================================== */

.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--surface);
  border-inline-start: 1px solid var(--border-soft);
  padding: 24px 16px;
  position: sticky; top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-section { margin-top: 18px; }
.sidebar-section-title {
  font-size: 11px; color: var(--text-soft);
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0 12px 8px;
}

.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--text-muted); font-size: 14px; font-weight: 500;
  transition: 0.15s;
}
.side-nav a:hover { background: var(--bg-tinted); color: var(--text); }
.side-nav a.active {
  background: var(--primary-soft); color: var(--primary-deep); font-weight: 600;
}
.side-nav a .ico {
  width: 20px; height: 20px; flex-shrink: 0;
  display: grid; place-items: center;
}

.panel-main {
  padding: 28px 32px 80px;
  background: var(--bg);
}

/* Hamburger button shown only on mobile to toggle the side drawer.
   On mobile it floats fixed in the top inline-start corner (visual right in
   RTL Persian) so any panel page can drop it in without per-layout work. */
.sidebar-toggle {
  display: none;
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--surface);
  border: 1px solid var(--border-soft);
  color: var(--text);
  cursor: pointer;
  align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--bg-tinted); }
@media (max-width: 900px) {
  .sidebar-toggle {
    position: fixed;
    top: 14px;
    inset-inline-start: 14px;
    z-index: 50;
    box-shadow: 0 4px 14px -4px rgba(15, 15, 35, 0.18);
  }
  .layout.is-nav-open .sidebar-toggle { display: none; }
}

/* Backdrop is rendered always but stays invisible / non-interactive until
   the drawer opens. Keeps DOM stable. */
.sidebar-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 15, 35, 0.55);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
  z-index: 55;
}

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; position: relative; }

  /* Sidebar slides in from the inline-start edge (visual right in RTL). */
  .sidebar {
    position: fixed;
    top: 0;
    inset-inline-start: 0;
    height: 100vh;
    width: 280px; max-width: 84vw;
    z-index: 60;
    box-shadow: -8px 0 30px -10px rgba(0, 0, 0, 0.25);
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(0.4, 0, 0.2, 1);
    border-inline-start: 0;
  }
  .layout.is-nav-open .sidebar { transform: translateX(0); }
  .layout.is-nav-open .sidebar-backdrop {
    opacity: 1; pointer-events: auto;
  }
  .sidebar-toggle { display: inline-flex; }
  .panel-main { padding: 20px; }
  /* Lock background scroll while the drawer is open. */
  body.is-nav-open { overflow: hidden; }
}

/* ==========================================================================
   Page header (panel)
   ========================================================================== */

.page-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  flex-wrap: wrap; gap: 16px; margin-bottom: 28px;
}
.page-title { font-size: 26px; font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.page-subtitle { color: var(--text-muted); margin-top: 4px; font-size: 14px; }

/* ==========================================================================
   Activity & Notifications
   ========================================================================== */

.activity {
  display: flex; gap: 14px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--surface-soft);
  border: 1px solid var(--border-soft);
}
.activity-icon {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  flex-shrink: 0;
  font-size: 18px;
}
.activity-body { flex: 1; min-width: 0; }
.activity-text { font-size: 14px; font-weight: 500; }
.activity-time { font-size: 12px; color: var(--text-soft); margin-top: 2px; }

/* ==========================================================================
   Misc
   ========================================================================== */

.divider { height: 1px; background: var(--border); margin: 24px 0; border: 0; }
.dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.muted { color: var(--text-muted); }
.soft  { color: var(--text-soft); }

.tag-live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--success-soft); color: #047857;
  font-size: 11px; font-weight: 700;
}
.tag-live .pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #10B981;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}

/* ==========================================================================
   Spin Wheel (demo)
   ========================================================================== */

.wheel-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 36px 0;
}
.wheel-arrow {
  position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0;
  border-inline-start: 14px solid transparent;
  border-inline-end:   14px solid transparent;
  border-top: 24px solid var(--accent);
  z-index: 2;
}
.wheel {
  width: 320px; height: 320px;
  border-radius: 50%;
  position: relative;
  box-shadow:
    0 0 0 8px white,
    0 0 0 14px var(--gold),
    0 30px 60px -20px rgba(15, 15, 35, 0.4);
  transition: transform 4s cubic-bezier(0.16, 1, 0.3, 1);
}
.wheel-hub {
  position: absolute; inset: 50% 0 0 50%;
  width: 56px; height: 56px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: white;
  border: 6px solid var(--gold);
  display: grid; place-items: center;
  font-weight: 800; color: var(--text);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 1;
}

/* ==========================================================================
   Animated card-trace border — clockwise SVG stroke reveal on hover.

   The rect is sized via CSS (no viewBox) so its corner radius stays exactly
   `--trace-r` regardless of card aspect ratio. Set `--trace-c` for color and
   `--trace-r` for border radius on the parent card.

   Markup:  <svg class="card-trace" aria-hidden="true"><rect pathLength="1"/></svg>
   ========================================================================== */

.card-trace {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  color: var(--trace-c, var(--primary));
  z-index: 2;
}
.card-trace rect {
  x: 1.5px; y: 1.5px;
  width:  calc(100% - 3px);
  height: calc(100% - 3px);
  rx: var(--trace-r, 22px);
  ry: var(--trace-r, 22px);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  filter: drop-shadow(0 0 6px currentColor);
  transition: stroke-dashoffset .85s cubic-bezier(0.4, 0, 0.2, 1),
              opacity .15s ease;
}

/* trigger: any element marked .has-trace fires the trace on hover */
.has-trace:hover > .card-trace rect,
.how-step:hover > .card-trace rect,
.why-card:hover > .card-trace rect,
.game-card:hover > .card-trace rect,
.feature-card:hover > .card-trace rect {
  stroke-dashoffset: 0;
  opacity: 1;
  transition: stroke-dashoffset .85s cubic-bezier(0.4, 0, 0.2, 1),
              opacity .12s ease;
}

/* ==========================================================================
   3D / Playful additions — claymorphism, floats, stickers
   ========================================================================== */

/* Floating illustrations — subtle bob + slow rotate */
@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 2deg)); }
}
@keyframes float-y-slow {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50%      { transform: translateY(-22px) rotate(calc(var(--r, 0deg) - 3deg)); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-3deg); }
  75% { transform: rotate(3deg); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}

.float-1 { animation: float-y      5s ease-in-out infinite;     --r: -6deg; }
.float-2 { animation: float-y      6s ease-in-out infinite 1s;  --r: 4deg;  }
.float-3 { animation: float-y-slow 7s ease-in-out infinite 2s;  --r: -2deg; }
.float-4 { animation: float-y      4.5s ease-in-out infinite 0.5s; --r: 8deg; }

.wiggle:hover { animation: wiggle 0.5s ease-in-out; }
.spin-slow { animation: spin-slow 24s linear infinite; }

/* Decorative background blobs — drop into a relative positioned section */
.bg-blob {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}
.bg-blob.blob-tl { top: -120px; inset-inline-start: -120px; width: 460px; opacity: 0.7; }
.bg-blob.blob-br { bottom: -160px; inset-inline-end: -120px; width: 520px; opacity: 0.55; }
.bg-blob.blob-tr { top: -80px; inset-inline-end: -80px; width: 380px; opacity: 0.6; }

/* Sticker label — looks pinned/tilted like a sticker */
.sticker {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px; border-radius: 14px;
  background: white; color: var(--text);
  font-weight: 800; font-size: 13px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 0 rgba(15, 15, 35, 0.08),
    0 14px 24px -8px rgba(15, 15, 35, 0.18);
  transform: rotate(-3deg);
}
.sticker-accent { background: linear-gradient(180deg, #FFE9A1, #FFC34A); color: #5C3B02; }
.sticker-coral  { background: linear-gradient(180deg, #FFB199, #FF8B7C); color: white; }
.sticker-mint   { background: linear-gradient(180deg, #B6F0D5, #34D399); color: #03684B; }
.sticker:nth-child(2n) { transform: rotate(3deg); }

/* 3D KPI tile — chunky bottom edge */
.tile-3d {
  background: var(--surface);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-soft);
  padding: 22px;
  position: relative;
  box-shadow: var(--shadow-card);
  transition: transform .25s, box-shadow .25s;
}
.tile-3d:hover { transform: translateY(-4px); box-shadow: var(--shadow-card-hover); }

/* 3D "icon-bubble" — claymorphic colorful icon containers */
.bubble {
  width: 56px; height: 56px; border-radius: 18px;
  display: grid; place-items: center; font-size: 26px;
  position: relative;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 6px 14px -4px rgba(15, 15, 35, 0.18);
}
.bubble-primary { background: linear-gradient(180deg, var(--primary-light), var(--primary)); color: white; }
.bubble-accent  { background: linear-gradient(180deg, var(--accent-light),  var(--accent));  color: white; }
.bubble-gold    { background: linear-gradient(180deg, var(--gold-light),    var(--gold));    color: white; }
.bubble-success { background: linear-gradient(180deg, var(--success-light), var(--success)); color: white; }
.bubble-info    { background: linear-gradient(180deg, var(--info-light),    var(--info));    color: white; }
.bubble-cream   { background: linear-gradient(180deg, #FFF7E0, var(--gold-soft)); color: var(--gold-darker); }

.bubble-sm { width: 40px; height: 40px; border-radius: 14px; font-size: 18px; }
.bubble-lg { width: 72px; height: 72px; border-radius: 22px; font-size: 34px; }

/* Wave underline — playful highlight under headings */
.wave-under {
  display: inline-block;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'><path d='M0 6 Q 15 0 30 6 T 60 6 T 90 6 T 120 6' stroke='%23FF6B5B' stroke-width='4' stroke-linecap='round' fill='none'/></svg>");
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 10px;
  padding-bottom: 8px;
}

/* Decorative pattern dots */
.pattern-dots {
  position: absolute;
  width: 120px; height: 80px;
  background-image: radial-gradient(rgba(82,70,229,0.18) 2px, transparent 2.5px);
  background-size: 14px 14px;
  pointer-events: none;
}

/* 3D image illustration helper */
.illu {
  display: block;
  filter: drop-shadow(0 10px 14px rgba(15, 15, 35, 0.16));
}
.illu-sm { width: 80px; }
.illu-md { width: 140px; }
.illu-lg { width: 220px; }
.illu-xl { width: 320px; }

/* ==========================================================================
   Prototype navigator — markup + styles are injected by assets/proto-bar.js?ver=1
   (side drawer that slides in from the inset-inline-end edge).
   ========================================================================== */

/* ==========================================================================
   Promo Strip — shared <promo-strip> web component (assets/promo-strip.js)
   Top sticky banner advertising the 999K free credit.
   ========================================================================== */

.promo-strip {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 8px 18px;
  background: linear-gradient(90deg, #FF8B7C 0%, #F59E0B 50%, #5246E5 100%);
  color: white;
  font-size: 13.5px; font-weight: 600;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}
.promo-strip::before, .promo-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px;
  background: radial-gradient(circle, rgba(255,255,255,0.25), transparent 60%);
  pointer-events: none;
}
.promo-strip::before { inset-inline-start: 10%; }
.promo-strip::after  { inset-inline-end: 20%; }

.promo-gift {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  flex-shrink: 0;
  animation: float-y 3.6s ease-in-out infinite;
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.25));
}
.promo-gift img { width: 100%; height: 100%; }

.promo-text strong {
  background: white; color: #B5392C;
  padding: 2px 10px; border-radius: 999px;
  margin-inline-end: 4px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.12);
}

.promo-cta {
  background: white; color: var(--primary-deep);
  padding: 6px 14px; border-radius: 999px;
  font-weight: 800; font-size: 12.5px;
  box-shadow: 0 3px 0 rgba(0,0,0,0.12);
  display: inline-flex; align-items: center; gap: 6px;
}

@media (max-width: 720px) {
  .promo-strip { font-size: 12px; padding: 8px 12px; gap: 10px; }
  .promo-text strong { padding: 2px 8px; }
  .promo-cta { padding: 5px 12px; font-size: 11.5px; }
}

/* ==========================================================================
   Site Footer — shared across public marketing pages (injected by footer.js)
   ========================================================================== */

.site-footer {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  margin-top: 100px;
  padding: 56px 0 28px;
  color: var(--text);
  font-family: var(--font);
}

.site-footer .footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--border-soft);
}
@media (max-width: 980px) {
  .site-footer .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .site-footer .footer-brand-col { grid-column: 1 / -1; max-width: 520px; }
}
@media (max-width: 540px) {
  .site-footer .footer-grid { grid-template-columns: 1fr; gap: 32px; }
}

.footer-brand-col .brand { margin-bottom: 12px; }
.footer-tagline {
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.85;
  margin: 0 0 22px;
  max-width: 360px;
}

.footer-contact {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 18px;
}
.footer-contact-item {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 500;
  transition: color .15s;
}
.footer-contact-item:hover { color: var(--primary-deep); }
.footer-contact-item .ico {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--bg-tinted);
  display: grid; place-items: center;
  font-size: 13px;
  flex-shrink: 0;
}

.footer-social {
  display: flex; gap: 8px;
  margin-top: 4px;
}
.footer-social a {
  width: 38px; height: 38px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bg-tinted);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
  transition: transform .18s ease, background .18s ease, color .18s ease;
}
.footer-social a:hover {
  background: var(--primary-soft);
  color: var(--primary-deep);
  transform: translateY(-2px);
}

.footer-col-title {
  font-size: 11px;
  color: var(--text-soft);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.footer-col-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col-links a {
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: color .15s, padding-inline-start .15s;
}
.footer-col-links a:hover {
  color: var(--primary-deep);
}

.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--text-soft);
  flex-wrap: wrap;
  gap: 10px;
}
.footer-legal {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-legal a {
  color: var(--text-muted);
  font-size: 12.5px;
  transition: color .15s;
}
.footer-legal a:hover { color: var(--text); }
.footer-legal-sep { color: var(--text-soft); }

@media (max-width: 540px) {
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   Performance — heavy mobile/touch overrides.

   STRATEGY:
   • Desktop (>= 1025px AND hover: hover) keeps EVERYTHING — Clay shadows,
     3D card tilts, infinite floats, radial body gradients, all visual flair.
   • Mobile + tablet + any touch device gets a stripped-down render path:
     no infinite animations, simpler one-layer shadows, no perspective stacks,
     no body-level radial gradients, no compositing-heavy hover transforms.
     Result on Iran-mobile (slow 3G/4G + low-end Android): the page paints
     ~2× faster and scrolling stays at 60fps because the GPU isn't repainting
     huge gradients + multi-layer shadows on every frame.
   ========================================================================== */

@media (max-width: 1024px), (hover: none) {

  /* --- B9: kill body radial gradients (huge per-frame paint cost) --------- */
  body { background-image: none; }

  /* --- B3: stop ALL infinite decorative animations ----------------------- */
  .float-1, .float-2, .float-3, .float-4,
  .spin-slow,
  .promo-gift,
  .auth-wheel,
  .auth-float,
  .credit-pill .em-img,
  .tag-live .pulse,
  .mini-pulse .dot {
    animation: none !important;
  }

  /* --- B4: collapse multi-layer Clay shadows to one cheap shadow --------- */
  :root {
    --shadow-clay:        0 4px 12px rgba(15, 15, 35, 0.10);
    --shadow-soft:        0 4px 12px rgba(15, 15, 35, 0.08);
    --shadow-card:        0 2px 8px  rgba(15, 15, 35, 0.08);
    --shadow-card-hover:  0 4px 14px rgba(15, 15, 35, 0.12);
    --shadow-pop:         0 4px 12px rgba(255, 107, 91, 0.30);
    --shadow-3d-primary:  0 3px 8px  rgba(82, 70, 229, 0.30);
    --shadow-3d-accent:   0 3px 8px  rgba(255, 107, 91, 0.30);
    --shadow-3d-gold:     0 3px 8px  rgba(245, 158, 11, 0.30);
    --shadow-3d-soft:     0 2px 6px  rgba(15, 15, 35, 0.10);
  }

  /* Polish restore: bring back the full multi-layer Clay shadow on hero-tier
     surfaces only — the cards that anchor each page visually. The simpler
     :root tokens above keep chips/buttons/inputs lightweight, so we're only
     paying the multi-layer cost on ~5-10 elements per page, not dozens.
     Verified safe via the runtime shadow toggle on a real device. */
  .hero,
  .welcome-card,
  .kpi-header,
  .auth-form,
  .feature-card,
  .game-card,
  .preview-card,
  .roadmap {
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.85),
      0 3px 0 rgba(15, 15, 35, 0.04),
      0 14px 28px -14px rgba(15, 15, 35, 0.16),
      0 30px 60px -30px rgba(82, 70, 229, 0.16) !important;
  }

  /* --- B4: kill all hover effects on touch (no real hover, and they often
     "stick" on tap until the user taps elsewhere — looks broken). Strip
     transform, filter, and box-shadow swaps so a tap leaves the resting
     style intact. */
  .feature-card:hover, .roadmap-card:hover, .game-card:hover,
  .why-card:hover, .how-step:hover, .screen-card:hover,
  .preview-card:hover, .tile-3d:hover, .card-tilt:hover,
  .btn:hover, .btn-primary:hover, .btn-accent:hover, .btn-gift:hover,
  .btn-gold:hover, .btn-ghost:hover, .btn-soft:hover, .btn-quiet:hover,
  .icon-btn:hover, .sidebar-toggle:hover,
  .nav a:hover, .side-nav a:hover, .footer-nav a:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: revert-layer !important;
  }

  /* --- B5: flatten 3D perspective stacks ---------------------------------
     3D rotateX/Y card tilts and preserve-3d stacks force the browser to
     allocate compositing layers for hover states that touch devices never
     trigger. Flatten everything that opts into 3D on landing.html, games.html
     and any future page using the same design language. */
  .features, .roadmap-grid, .preview-grid { perspective: none !important; }
  .feature-card, .roadmap-card, .preview-card, .game-card, .tile-3d {
    transform-style: flat !important;
    transform: none !important;
  }
  .feature-card .feature-icon { transform: none !important; }
  /* Image scale-on-hover inside game cards adds a layer per card on mobile. */
  .game-card:hover .cover-img-3d, .cover-img-3d { transform: none !important; }

  /* --- Drop expensive drop-shadow filters --------------------------------- */
  .hero-wheel-img, .auth-wheel, .promo-gift, .illu,
  .why-illu, .mascot-box img, .credit-pill .em-img {
    filter: none !important;
  }

  /* --- Skip hero side-illustrations entirely on small screens ------------ */
  .hero-float, .deco-blob,
  .auth-float {
    display: none !important;
  }

  /* The decorative radial sheen on screen-card thumbs has nothing to render
     against on mobile — drop it. */
  .screen-thumb::after { display: none !important; }

  /* --- Stop the appbar gift-cta pill from overflowing the viewport ---------
     The "🎁 ثبت‌نام + ۹۹۹ هزار تومان هدیه" pill is ~250 px wide and on a
     360 px phone it pushes the row past the right edge. The same CTA already
     lives in the promo-strip above the appbar, so hiding it on small screens
     loses no functional content. */
  .appbar .gift-cta { display: none !important; }

  /* Brand sub-text "Farawand · Gamified Campaigns" is decorative only —
     hide on phones to give the brand block room. */
  .brand-sub { display: none !important; }

  /* Allow the promo-strip to wrap if its line is too long instead of forcing
     a wider layout. */
  .promo-strip { flex-wrap: wrap; row-gap: 6px; }
  .promo-text { text-align: center; min-width: 0; }
}

/* Below-the-fold sections: tell the browser to skip rendering work for them
   until they scroll into view. Massively cuts initial paint time on long pages.
   `contain-intrinsic-size` reserves space so the scrollbar doesn't jump.

   IMPORTANT: `content-visibility: auto` implies `contain: paint`, which clips
   anything painted outside the element's box — including absolutely-
   positioned icons that intentionally overflow upward (`.feature-icon`,
   `.how-num` at `top: -22px`) and `box-shadow` spread that extends past the
   section edge. Sections containing such decorations must NOT be added here.
   Safe candidates are sections that already self-clip (`.cta-section` has
   `overflow: hidden`). The footer used to live here too, but its 600 px
   placeholder → real-height transition on scroll read as a layout glitch on
   long pages, and the footer is too cheap to render to be worth that risk. */
.cta-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px;
}

/* ==========================================================================
   Mobile professional layout (≤ 720 / ≤ 540) — fixes audited 2026-04-30.

   Goal: collapse multi-section flex headers, tame oversized dashboard
   widgets, and reformat the wizard step indicator to a phone-native pattern
   without touching desktop. All rules are scoped under phone breakpoints.
   `!important` is used only where the override has to beat per-page inline
   styles in dashboard.html / wizard.html.
   ========================================================================== */

@media (max-width: 720px) {
  /* Tighter outer gutter — buys 16 px of usable width per row. */
  .shell { padding-inline: 16px; }

  /* Public app-bar: keep brand + tight action group on one row.
     Status chips that bloat the row ("Draft · ذخیره خودکار",
     "پروتوتایپ نسخه x.y") are hidden — pages that need them should
     re-surface them inline under the page H1, not in the appbar. */
  .appbar-inner { gap: 8px; padding-block: 10px; }
  .appbar-inner > .row .chip-dot { display: none; }
  .appbar-inner .btn { padding: 9px 12px; font-size: 13px; }
  .appbar-inner .brand { font-size: 16px; }
  .appbar-inner .brand-logo { width: 32px; height: 32px; }

  /* Wizard step indicator → compact dot pattern.
     The page H1 already says "مرحله ۳ از ۶ · تنظیمات بازی" so we don't need
     six text chips on a phone — they wrap and ruin the header. */
  .steps {
    gap: 8px;
    padding: 0;
    overflow: visible;
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .step {
    padding: 0;
    width: 10px; height: 10px;
    border: 0;
    background: var(--border);
    border-radius: 999px;
    overflow: hidden;
    color: transparent;
    flex-shrink: 0;
    box-shadow: none;
  }
  .step > * { display: none; }
  .step.done { background: var(--success); }
  .step.active {
    width: 28px;
    background: var(--primary);
    box-shadow: none;
  }
  .step-divider { display: none; }

  /* Dashboard top-bar: 2-row layout. Row 1: hamburger + actions + avatar.
     Row 2: full-width search. The ⌘K shortcut chip and the redundant
     credit ⛁ icon-button are hidden — the welcome-card already shows
     credit, and there's no physical keyboard on phone. */
  .top-bar {
    flex-wrap: wrap;
    row-gap: 12px;
    padding: 12px 0;
    margin-bottom: 18px;
  }
  .top-bar .search {
    order: 99;
    flex-basis: 100%;
    width: 100% !important;
    max-width: 100% !important;
  }
  .top-bar .search .chip { display: none; }
  .top-bar .icon-btn + .icon-btn { display: none; }
  /* Avatar block: keep the avatar circle + business name, drop the masked
     phone number — saves ~110 px and stops the row from squeezing. */
  .top-bar .avatar + div > div:last-child { display: none; }
}

@media (max-width: 540px) {
  /* Tighten the gutter one more notch on phones. */
  .shell { padding-inline: 14px; }

  /* Welcome card (dashboard): ease the inner padding, shrink the mascot,
     and stop the speech bubble from absolute-overlapping the heading. */
  .welcome-card { padding: 22px 18px !important; gap: 18px !important; }
  .welcome-card h2 { font-size: 22px !important; }
  .mascot-box { place-items: start !important; gap: 8px; }
  .mascot-box img { width: 140px !important; }
  .mascot-bubble {
    position: static !important;
    transform: none !important;
    align-self: flex-start;
  }
  .mascot-bubble::after { display: none !important; }

  /* Credit pill: allow wrap, shrink the coin so it never overflows the card. */
  .credit-pill {
    flex-wrap: wrap;
    padding: 14px 18px !important;
    gap: 12px !important;
  }
  .credit-pill .em-img { width: 44px !important; height: 44px !important; }
  .credit-pill .big { font-size: 18px !important; }

  /* Stats grid: tighter gap so two stat cards per row breathe. */
  .stats-row { gap: 10px !important; }

  /* "My games" row: stack the KPI line beneath the title; keep the action
     button visible on row 1 alongside the cover. */
  .my-game-row {
    grid-template-columns: 56px 1fr auto !important;
    gap: 12px !important;
  }
  .my-game-kpi {
    grid-column: 1 / -1;
    flex-wrap: wrap;
    gap: 14px !important;
  }

  /* Wizard form: tighter padding, prize-row stacks, color swatches reach
     the 44 px touch minimum. */
  .wizard-form { padding: 22px 18px !important; }
  /* Row 1 = swatch | name | delete; row 2 = probability spanning full width.
     The 3rd child (probability input) auto-flows to row 2 col 1, then we
     stretch it across both content columns so it doesn't sit in the swatch
     gutter. */
  .prize-row {
    grid-template-columns: 28px 1fr 36px !important;
    grid-auto-flow: row;
    column-gap: 10px;
    row-gap: 8px;
  }
  .prize-row > input:nth-of-type(2) {
    grid-column: 2 / -1;
    font-size: 12px !important;
    color: var(--text-muted);
  }
  .prize-row > .btn {
    grid-row: 1;
    grid-column: 3;
  }
  .color-swatch { width: 44px !important; height: 44px !important; }

  /* Larger hit area for small buttons used inside cards. */
  .btn-sm { padding: 11px 14px; }

  /* Index screen grid: one card per row so each thumbnail reads clearly. */
  .grid-screens { grid-template-columns: 1fr !important; }

  /* Wizard steps row sits to the right of the H1 in `.row-between`. On
     phones, push it under the heading so the dots don't fight for space. */
  .row-between:has(> .steps) { flex-direction: column; align-items: stretch !important; }
  .row-between > .steps { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Phone frame (for mobile mocks)
   ========================================================================== */

.phone {
  width: 320px; height: 660px;
  border-radius: 44px;
  background: #0F0F1F;
  padding: 14px;
  box-shadow: 0 30px 60px -20px rgba(15, 15, 35, 0.45);
  position: relative;
}
.phone::before {
  content: ""; position: absolute;
  top: 18px; left: 50%; transform: translateX(-50%);
  width: 100px; height: 26px;
  background: #0F0F1F; border-radius: 0 0 16px 16px; z-index: 5;
}
.phone-screen {
  width: 100%; height: 100%;
  border-radius: 32px;
  background: var(--bg);
  overflow: hidden;
  position: relative;
}