/*
 * GameCon — стиль «Неоморфізм» (Адмінка → Дизайн → «Додати стиль»).
 *
 * М’які опуклі й вдавлені поверхні з одного матеріалу + пласка подача:
 * без скла, градієнтів, сяйва й розмиття. Об’єм дають лише дві тіні —
 * світла зверху зліва й темна знизу справа. Картки й кнопки опуклі,
 * поля вводу й активні вкладки вдавлені.
 * Працює в обох темах: світла — сіро-блакитна глина, темна — графіт.
 *
 * Селектор html[data-palette][data-theme] навмисно сильніший за палітру учасника.
 */

/* ---------- Світла тема ---------- */
html[data-palette][data-theme='light'] {
    --nm-bg: #e4e9f0;
    --nm-hi: rgb(255 255 255 / 0.9);
    --nm-lo: rgb(163 177 198 / 0.6);
    --nm-text: #2d3748;

    --background: #e4e9f0;
    --foreground: #2d3748;
    --card: #e4e9f0;
    --card-foreground: #2d3748;
    --popover: #e4e9f0;
    --popover-foreground: #2d3748;
    --muted: #e4e9f0;
    --muted-foreground: #718096;
    --border: transparent;
    --input: transparent;
    --sidebar: #e4e9f0;
    --primary: #4f6ef7;
    --primary-foreground: #ffffff;
    --ring: #4f6ef7;

    background-color: #e4e9f0;
}

/* ---------- Темна тема ---------- */
html[data-palette][data-theme='dark'] {
    --nm-bg: #262b33;
    --nm-hi: rgb(255 255 255 / 0.075);
    --nm-lo: rgb(0 0 0 / 0.7);
    --nm-text: #e2e6ec;

    --background: #262b33;
    --foreground: #e2e6ec;
    --card: #262b33;
    --card-foreground: #e2e6ec;
    --popover: #262b33;
    --popover-foreground: #e2e6ec;
    --muted: #262b33;
    --muted-foreground: #8b94a3;
    --border: transparent;
    --input: transparent;
    --sidebar: #262b33;
    --primary: #5b7cfa;
    --primary-foreground: #ffffff;
    --ring: #5b7cfa;

    background-color: #262b33;
}

/* ---------- Спільне для обох тем ---------- */
html[data-palette][data-theme] {
    /* Опукла поверхня, вдавлена поверхня, маленька опукла (кнопки) */
    --nm-raised: 7px 7px 16px var(--nm-lo), -7px -7px 16px var(--nm-hi);
    --nm-raised-sm: 4px 4px 9px var(--nm-lo), -4px -4px 9px var(--nm-hi);
    --nm-inset: inset 4px 4px 9px var(--nm-lo), inset -4px -4px 9px var(--nm-hi);

    /* Каркас — суцільний, без скла */
    --glass: var(--nm-bg);
    --glass-rim: transparent;
    --matte: var(--nm-bg);
    --gc-bar: var(--nm-bg);
    --gc-island: var(--nm-bg);
    --gc-island-shadow: var(--nm-raised);
    --gc-shadow: var(--nm-raised);
    --gc-float: var(--nm-raised);
    --matte-solid: var(--nm-bg);
    --gc-hover: transparent;
    --gc-active: transparent;
    --gc-glow: transparent;
    --radius: 1.1rem;
}

/* Один пласкій фон: без сцен, сяйва й сезонних прикрас за сторінкою */
html[data-palette][data-theme] body {
    background-color: var(--nm-bg);
    color: var(--nm-text);
}
html[data-palette][data-theme] .site-bg {
    background: var(--nm-bg);
}
html[data-palette][data-theme] .site-bg > * {
    display: none;
}

/* Без кольорових плям і градієнтних відблисків усередині карток */
html[data-palette][data-theme] #main-content .pointer-events-none.blur-3xl,
html[data-palette][data-theme] #main-content .pointer-events-none.blur-2xl,
html[data-palette][data-theme] #main-content .grid-lines {
    display: none;
}

/* ---------- Шапка й нижнє меню ---------- */
html[data-palette][data-theme] .gc-bar {
    background: var(--nm-bg);
    box-shadow: 0 6px 14px -8px var(--nm-lo);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
html[data-palette][data-theme] .gc-island {
    background: var(--nm-bg) !important;
    box-shadow: var(--nm-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Активна вкладка, пункт бокового меню й перемикачі — вдавлені */
html[data-palette][data-theme] .gc-side-link[aria-current='page'],
html[data-palette][data-theme] #main-content [role='tab'][aria-selected='true'],
html[data-palette][data-theme] #main-content [aria-pressed='true'] {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}
html[data-palette][data-theme] .gc-side-link:hover {
    background: var(--nm-bg);
    box-shadow: var(--nm-raised-sm);
}

/* ---------- Картки — опуклі ---------- */
html[data-palette][data-theme] .glass,
html[data-palette][data-theme] .glass-strong {
    background: var(--nm-bg);
    border: 0;
    box-shadow: var(--nm-raised);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
/* Вкладені картки (плеєр, досягнення, вкладення) — вдавлені лунки в картці */
html[data-palette][data-theme] .glass .glass,
html[data-palette][data-theme] .glass .glass-strong {
    box-shadow: var(--nm-inset);
}
/* Спливні меню й вікна теж з того ж матеріалу */
html[data-palette][data-theme] [role='dialog'],
html[data-palette][data-theme] [role='menu'],
html[data-palette][data-theme] [role='listbox'] {
    background: var(--nm-bg);
    border: 0;
    box-shadow: var(--nm-raised);
}

/* ---------- Поля вводу — вдавлені ---------- */
html[data-palette][data-theme] #main-content .input-glass,
html[data-palette][data-theme] .gc-bar input,
html[data-palette][data-theme] #main-content input:not([type='checkbox'], [type='radio'], [type='range'], [type='file']),
html[data-palette][data-theme] #main-content textarea,
html[data-palette][data-theme] #main-content select {
    background: var(--nm-bg);
    border: 0;
    border-radius: 14px;
    box-shadow: var(--nm-inset);
}
html[data-palette][data-theme] .gc-bar [class*='rounded']:has(> input) {
    background: var(--nm-bg);
    box-shadow: var(--nm-inset);
}
html[data-palette][data-theme] .gc-bar [class*='rounded']:has(> input) input {
    box-shadow: none;
}
/* Поле всередині рамки коментаря не вдавлюється вдруге */
html[data-palette][data-theme] #main-content .input-glass input,
html[data-palette][data-theme] #main-content .input-glass textarea {
    background: transparent;
    box-shadow: none;
}
html[data-palette][data-theme] #main-content textarea:not(.input-glass *) {
    padding: 10px 12px;
}
html[data-palette][data-theme] input[type='checkbox'],
html[data-palette][data-theme] input[type='radio'] {
    accent-color: var(--primary);
}

/* ---------- Кнопки ---------- */
/* Другорядні кнопки й чипи (напівпрозорий фон) — опуклі */
html[data-palette][data-theme] #main-content :is(button, a)[class*='bg-white/'],
html[data-palette][data-theme] #main-content :is(button, a)[class*='bg-muted'],
html[data-palette][data-theme] #main-content :is(button, a)[class*='bg-secondary'] {
    background: var(--nm-bg);
    border-color: transparent;
    box-shadow: var(--nm-raised-sm);
}
html[data-palette][data-theme] #main-content :is(button, a)[class*='bg-white/']:active,
html[data-palette][data-theme] #main-content :is(button, a)[class*='bg-muted']:active,
html[data-palette][data-theme] #main-content :is(button, a)[class*='bg-secondary']:active {
    box-shadow: var(--nm-inset);
}
/* Головні кнопки — пласкі в кольорі акценту, з м’якою тінню; натиск — вдавлення */
html[data-palette][data-theme] :is(button, a)[class*='bg-primary'],
html[data-palette][data-theme] :is(button, a)[class*='bg-gradient-brand'] {
    background: var(--primary);
    color: #ffffff;
    border: 0;
    box-shadow: 4px 4px 10px var(--nm-lo), -4px -4px 10px var(--nm-hi);
}
html[data-palette][data-theme] :is(button, a)[class*='bg-primary']:active,
html[data-palette][data-theme] :is(button, a)[class*='bg-gradient-brand']:active {
    box-shadow: inset 3px 3px 8px rgb(0 0 0 / 0.25);
}
/* Кнопки в шапці (сповіщення тощо) — маленькі опуклі кружечки */
html[data-palette][data-theme] .gc-icon-button {
    background: var(--nm-bg);
    box-shadow: var(--nm-raised-sm);
}
html[data-palette][data-theme] .gc-icon-button:hover {
    background: var(--nm-bg);
}
html[data-palette][data-theme] .gc-icon-button:active {
    box-shadow: var(--nm-inset);
}

/* Акцентний текст (наприклад, «звук» у заголовку) — пласкій колір замість градієнта */
html[data-palette][data-theme] .text-gradient {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--primary);
}

/* ---------- Обкладинка профілю ---------- */
/* Обкладинка — вдавлене «вікно» в картці, затемнення над ефектом «Сяйво» */
html[data-palette][data-theme] #main-content :has(> .scrim) {
    isolation: isolate;
}
html[data-palette][data-theme] #main-content .scrim {
    z-index: 11;
    pointer-events: none;
    background: linear-gradient(180deg, transparent 55%, var(--nm-bg) 100%);
}
html[data-palette][data-theme] #main-content .scrim ~ * {
    z-index: 12;
}

/* Межі-лінії між блоками не потрібні — блоки відділяє тінь */
html[data-palette][data-theme] #main-content hr,
html[data-palette][data-theme] #main-content .border-t,
html[data-palette][data-theme] #main-content .border-b {
    border-color: transparent;
}

/* Менше руху: тіні без анімації */
@media (prefers-reduced-motion: reduce) {
    html[data-palette][data-theme] * {
        transition-property: none;
    }
}