/* CSS Variables — тема приложения */
:root {
    --app-border-color: #262c47;
    --app-bg: #0a101e;
    --app-bg-card: #1b2035;
    --app-bg-card-light: #ffffff1a;
    --app-bg-card-light-2: #272d48;
    --app-bg-element: linear-gradient(90deg, #0f8be5, #0757c6);
    --app-bg-element-blue: #0f8be5;
    --app-bg-element-modal-box: rgba(15, 139, 229, .8);
    --app-bg-element-icons: brightness(0) saturate(100%) invert(43%) sepia(78%) saturate(2340%) hue-rotate(183deg) brightness(96%) contrast(102%);
    --app-bg-dark-element-blue: #0757c6;
    --app-bg-section-v: linear-gradient(90deg, #0f8be5, #0757c6);
    --app-bg-modal: #1f1632;
    --app-bg-input: #1b2035;
    --app-bg-boxshadow: #281c40;
    --app-bg-gold: #b0991136;
    --app-bg-notification-success: #1bdc8eeb;
    --app-bg-notification-error: #d96870d9;
    --app-color-game-green: #05bd7d;
    --app-color-game-red: #ff0c0c;
    --app-game-wheel-bet-error: #e24150;
    --app-game-wheel-bet-success: #4aaa50;
    --app-game-wheel-text-green: #4aaa50;
    --app-game-bomb-cell: #2c2c4a;
    --app-game-bomb-bg-gradient-gold: radial-gradient(113.46% 116.35% at 50% 100%, rgba(227, 210, 0, .42) 0%, rgba(227, 210, 0, .25) 44.4%, rgba(227, 210, 0, .02) 100%), rgba(4, 4, 5, .04);
    --app-game-bomb-bg-block-multiplier: rgba(138, 202, 255, .11);
    --app-game-bomb-bg-block-win: linear-gradient(-173deg, #0F8BE582 .73%, #382256);
    --app-game-bomb-bg-block-win-border: #0a101e;
    --app-game-bomb-bg-block-win-box-shadow: rgba(0, 0, 0, .84);
    --app-bg-base-tertiary: #382256;
    --app-color-textlong: #d4d4d4;
    --app-bg-betting-grid: linear-gradient(90deg, var(--app-bg-base-tertiary) 52.88%, #0f8be5 100%);
    --app-special-bonus-bg: radial-gradient(290.13% 132.42% at 96.88% 100%, #1f1632 0, #0f8be5 99.9%);
    --app-special-bonus-old: #394c6a;
    --app-special-bonus-upcoming: #1c3155;
    --app-wallet-method-bg-active: #25253f;
    --app-online-status: #00c027;
    --app-input-red: #ec4465;
    --app-crash-bg-timer: linear-gradient(179.36deg, #0f8be5 -35.86%, rgba(89, 26, 114, 0) 52.17%, #0f8be5 148.31%);
    --app-crash-line-graph: #0f8be5;
    --app-crash-line-graph-bg: #0f8be5;
    --app-crash-point-outer-opacity: rgba(15, 139, 229, .1);
    --app-crash-point-middle-opacity: rgba(15, 139, 229, .5);
    --app-crash-point-inner-opacity: #0f8be5;
}

/* Montserrat — локальные шрифты из /assets/fonts/Montserrat/ */
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('/assets/fonts/Montserrat/Montserrat-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
    font-display: swap;
}

body {
    font-family: 'Montserrat', sans-serif !important;
}

/* Утилитарные классы типографики (custom, не Tailwind) */
.font-normal-12,
.font-normal-13 {
    font-weight: 500;
    line-height: normal;
}
.font-normal-12 {
    font-size: 12px;
}
.font-normal-13 {
    font-size: 13px;
}
.font-semibold-14 {
    font-weight: 600;
    font-size: 14px;
    line-height: normal;
}

.font-normal-14, .font-normal-15 {
    font-weight: 500;
    line-height: normal;
}

.font-normal-14 {
    font-size: 14px;
}

/* gap-2 (Tailwind purge может удалять — fallback) */
.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 1rem !important;
}