/* ============================================================
   BASE — Reset, fonts, global elements
   ============================================================ */

/* Fonts (Inter, Hind, Noto Sans Brahmi, Noto Sans Devanagari) are loaded
   from <link> tags in index.html. */

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin:  0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family:      var(--font-ui);
    font-size:        var(--fs-base);
    line-height:      var(--lh-base);
    color:            var(--color-text);
    background-color: var(--color-background);
    min-height:       100dvh;
    overflow-x:       hidden;
    /* Prevent text selection during gameplay */
    user-select:      none;
    -webkit-user-select: none;
    /* Subtle parchment texture via SVG noise */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── Typography utilities ────────────────────────────────── */
.brahmi {
    font-family: 'Noto Sans Brahmi', var(--font-brahmi), serif;
    font-feature-settings: "kern" 1;
    font-variant-ligatures: none; /* prevent unwanted substitutions */
}

.hindi {
    font-family: 'Noto Sans Devanagari', 'Hind', var(--font-hindi), sans-serif;
    font-feature-settings: "kern" 1;
}

.ui-text {
    font-family: var(--font-ui);
}

/* ── Interactive elements ────────────────────────────────── */
button {
    font-family: inherit;
    cursor:      pointer;
    border:      none;
    outline:     none;
    background:  none;
}

button:focus-visible {
    outline:        2px solid var(--color-gold);
    outline-offset: 3px;
}

/* ── Decorative helpers ──────────────────────────────────── */
.ornament {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    color:       var(--color-gold);
    font-size:   var(--fs-sm);
    letter-spacing: 0.08em;
}

.ornament::before,
.ornament::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
}

/* ── Utility ─────────────────────────────────────────────── */
.hidden {
    display: none !important;
}

.sr-only {
    position:   absolute;
    width:      1px;
    height:     1px;
    padding:    0;
    margin:     -1px;
    overflow:   hidden;
    clip:       rect(0,0,0,0);
    white-space: nowrap;
    border:     0;
}

/* ── Scrollbar (desktop) ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--color-background); }
::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 3px; }