/* ==========================================================
   سرزمین الفبا — CSS پایه
   توکن‌های طراحی: پالت رنگ، تایپوگرافی، ریست
   ========================================================== */

@font-face {
    font-family: 'Vazirmatn';
    src: url('../assets/fonts/Vazirmatn/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../assets/fonts/Vazirmatn/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Vazirmatn';
    src: url('../assets/fonts/Vazirmatn/Vazirmatn-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

:root {
    /* ---------- پالت رنگ اصلی (هویت بصری «سرزمین الفبا») ---------- */
    --color-sky:        #6EC6E8;   /* آسمان روشن */
    --color-sky-deep:   #4FA8D4;
    --color-sun:        #FFD166;   /* زرد آفتابی */
    --color-forest:     #6BBF59;   /* سبز جنگل */
    --color-forest-dark:#4E9C3E;
    --color-fox:        #FF8C61;   /* نارنجی روباه — رنگ برند/CTA */
    --color-fox-dark:   #E86F42;
    --color-cream:      #FFF8ED;   /* پس‌زمینه کارت‌ها */
    --color-plum:       #4A3B6B;   /* متن اصلی داستانی */
    --color-plum-soft:  #7C6FA0;

    /* رنگ‌های وضعیت */
    --color-success: #4CAF6D;
    --color-error:   #E8615D;
    --color-star:    #FFC93C;
    --color-coin:    #FFD166;
    --color-diamond: #6ED0F0;
    --color-heart:   #FF6B7A;

    /* سایه و گلس */
    --shadow-soft: 0 6px 20px rgba(74, 59, 107, 0.12);
    --shadow-card: 0 10px 30px rgba(74, 59, 107, 0.16);
    --shadow-pop:  0 4px 0 rgba(0,0,0,0.15);
    --glass-bg: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.7);

    /* شعاع گردی */
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 32px;
    --radius-full: 999px;

    /* تایپوگرافی */
    --font-main: 'Vazirmatn', Tahoma, sans-serif;

    /* z-index لایه‌ها */
    --z-bg: 0;
    --z-content: 10;
    --z-character: 20;
    --z-hud: 30;
    --z-modal: 100;
    --z-toast: 200;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden; /* اسکرول با UI خود بازی مدیریت می‌شود */
}

body {
    font-family: var(--font-main);
    direction: rtl;
    color: var(--color-plum);
    background: var(--color-cream);
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

/* اجازه‌ی انتخاب متن فقط در فیلدهای ورودی */
input, textarea {
    -webkit-user-select: text;
    user-select: text;
}

button, input {
    font-family: inherit;
    direction: rtl;
}

img, svg {
    display: block;
    max-width: 100%;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
}

a { text-decoration: none; color: inherit; }

::selection {
    background: var(--color-fox);
    color: #fff;
}

/* اسکرول‌بار سفارشی برای بخش‌هایی که نیاز به اسکرول دارند (مثل فروشگاه) */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-plum-soft); border-radius: var(--radius-full); }

/* احترام به تنظیمات کاهش انیمیشن سیستم‌عامل */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

.hidden { display: none !important; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0,0,0,0);
}