/* ============================================================
   LOTOS – стили приложения
   ============================================================ */

/* Подключаем игровой шрифт Fredoka */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');

/* Полосы прокрутки скрыты визуально – прокрутка при этом работает везде */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0; height: 0; }

/* Подсказка валидации полей (заменяет системный «пузырь») */
.field-tip {
    position: fixed; z-index: 400; display: none; align-items: center; gap: 9px;
    max-width: 280px; padding: 9px 13px; border-radius: 13px;
    background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.3;
    border: 2px solid var(--orange-2); box-shadow: 0 6px 0 var(--card-sh);
}
.field-tip.show { display: flex; animation: fieldTipPop .16s ease; }
.field-tip .ft-ico {
    flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
    background: var(--orange); color: #fff; font-weight: 800; font-size: 13px;
    display: grid; place-items: center;
}
@keyframes fieldTipPop { from { transform: translateY(-4px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.field-invalid { border-color: #f87171 !important; }

/* --- Палитра проекта (меняешь тут – меняется везде) --- */
:root {
    --ink:      #431407;   /* основной тёмный текст */
    --ink2:     #7c2d12;   /* заголовки, чуть светлее */
    --muted:    #c2410c;   /* приглушённый текст, подписи */

    --orange:   #f97316;   /* главный акцент */
    --orange-2: #fb923c;   /* светлый оранжевый (градиенты) */
    --amber:    #f59e0b;   /* Сила */

    --card-sh:  #fed7aa;   /* нижняя «объёмная» тень карточек */
    --track:    #fde4cf;   /* пустая часть полосок прогресса */

    --green:  #22c55e;   /* выполнено / опыт растёт */
    --blue:   #3b82f6;   /* Интеллект */
    --purple: #8b5cf6;   /* опыт (XP) */
    --teal:   #10b981;   /* Мудрость */
    --pink:   #ec4899;   /* Харизма */
    --red:    #ef4444;   /* здоровье (HP) */
}

/* Сброс отступов по умолчанию + единый шрифт */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Оранжевое выделение текста вместо синего */
::selection    { background: #fb923c; color: #fff; }
::-moz-selection { background: #fb923c; color: #fff; }

/* Поля ввода и кнопки не наследуют шрифт по умолчанию – задаём явно */
input, select, textarea, button { font-family: 'Fredoka', sans-serif; }

/* Поле даты: иконка календаря в цвет текста (--ink), акцент нативного пикера — оранжевый */
input[type="date"] { accent-color: var(--orange); color-scheme: light; }
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer; opacity: 1; padding: 0; margin-left: 4px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23431407' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M3 9h18M8 2v4M16 2v4'/></svg>");
    background-repeat: no-repeat; background-position: center;
}

/* Цвет вводимого текста – тёмно-оранжевый, как на карточках */
input:not([type=checkbox]):not([type=range]), select, textarea { color: var(--ink2) !important; }
body {
    font-family: 'Fredoka', sans-serif;
    color: var(--ink);
    min-height: 100vh;

    /* «Дышащий» тёплый градиент фона */
    background: linear-gradient(160deg, #fff7ed, #ffedd5, #fef3c7, #ffe4d0);
    background-size: 300% 300%;
    animation: bgBreathe 16s ease-in-out infinite;

    /* Отступ слева = ширина шторки (96px) + внутренний отступ страницы */
    padding: 28px 34px 60px 130px;
    position: relative; /* чтобы кошелёк можно было прижать к правому краю */
}

@keyframes bgBreathe {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* У кого в системе отключены анимации – фон статичный */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
}


/* Контейнер контента: ограничение ширины и центрирование,
   чтобы на широких экранах ничего не растягивалось */
.content {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}


/* ============================================================
   1. БОКОВАЯ ШТОРКА (навигация)
   ============================================================ */

/* Главный контейнер шторки */
.nav-div {
    display: flex;
    flex-direction: column;
    align-items: center;

    position: fixed;   /* прибита к левому краю, не скроллится */
    left: 0;
    top: 0;
    height: 100vh;
    width: 96px;
    padding: 18px 0;
    box-sizing: border-box;

    font-family: 'Fredoka', sans-serif;
    background: linear-gradient(180deg, var(--orange-2), #ea580c);
}

/* Контейнер логотипа + кнопок */
.side-nav {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* Логотип-иконка сверху – лотос «парит» без подложки */
.nav-ico {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    /* «Дыхание» через пульсацию свечения – размер не меняется */
    animation: logoBreathe 4s ease-in-out infinite;
}
.nav-ico img {
    display: block;
    width: 100%;
    height: 100%;
}
/* Мягкий тёплый ореол разгорается и гаснет */
@keyframes logoBreathe {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 224, 138, 0.5)); }
    50%      { filter: drop-shadow(0 0 9px rgba(255, 224, 138, 0.95)); }
}
@media (prefers-reduced-motion: reduce) {
    .nav-ico { animation: none; }
}

/* Кнопка навигации (неактивная) */
.side-nav button {
    width: 64px;
    height: 60px;
    padding: 0;
    border: none;
    border-radius: 16px;
    background: transparent;
    cursor: pointer;
    opacity: 0.8;
    transition: 0.15s;
}

/* Ссылка внутри кнопки – иконка над подписью */
.side-nav button a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 100%;
    border-radius: 16px;
    text-decoration: none;
    color: #ffffff;
    font-size: 10px;
    font-weight: 500;
}

/* Размер смайлика-иконки (лежит в <span>) */
.side-nav button a span {
    font-size: 22px;
    line-height: 1;
}

/* Наведение – лёгкая подсветка */
.side-nav button:hover { opacity: 1; }
.side-nav button:hover a { background: rgba(255, 255, 255, 0.14); }

/* Активная кнопка – белая плашка (текущая страница) */
.side-nav button.active { opacity: 1; }
.side-nav button.active a {
    background: #ffffff;
    color: var(--ink2);
    box-shadow: 0 4px 0 #c2410c;
}

/* Аватарка внизу шторки */
.nav-avatar {
    margin-top: auto; /* толкает в самый низ флекс-контейнера */
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24);
    border: 3px solid #ffffff;
    box-shadow: 0 4px 0 #c2410c;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-avatar button {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.nav-avatar button a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    font-size: 28px;
}


/* ============================================================
   2. ШАПКА: приветствие + кошелёк
   ============================================================ */

/* Приветственное сообщение (слева сверху) */
.welcome-message {
    margin-bottom: 24px;
}
.welcome-message h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--ink);
}
.welcome-message p {
    font-size: 14px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 2px;
}

/* Кошелёк – прижат к правому верхнему углу контента */
.currency-amount {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    gap: 10px;
}
/* Общий вид плашек с валютой */
.coin-amount,
.diamond-amount,
.freeze-amount,
.shield-amount {
    background: #ffffff;
    border-radius: 14px;
    padding: 9px 15px;
    font-weight: 700;
    font-size: 15px;
}
.coin-amount    { color: #b45309; box-shadow: 0 4px 0 #fde68a; } /* золото */
.diamond-amount { color: #7c3aed; box-shadow: 0 4px 0 #ddd6fe; } /* алмазы */
.freeze-amount  { color: #0284c7; box-shadow: 0 4px 0 #bae6fd; } /* заморозки */
.shield-amount  { color: #0f766e; box-shadow: 0 4px 0 #99f6e4; } /* обереги */


/* ============================================================
   3. КАРТОЧКА ПЕРСОНАЖА (левая колонка)
   ============================================================ */

.character-info {
    float: left;          /* ставим карточку в левую колонку */
    width: 24%;           /* пропорционально ширине контента */

    background: #ffffff;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 5px 0 var(--card-sh);
    text-align: center;
}

/* Аватар персонажа */
.mini-avatar {
    width: 130px;
    height: 130px;
    margin: 4px auto 12px;
    border-radius: 28px;
    background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24);
    border: 4px solid #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 76px;   /* эмодзи-аватар заполняет плитку (без картинки) */
    line-height: 1;
}
.mini-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Если картинки ещё нет (src пустой) – прячем «сломанную» иконку,
   остаётся красивый градиентный фон */
.mini-avatar img[src=""] { display: none; }

/* Имя и уровень */
.name-level { margin-bottom: 16px; }
.dashboard-name  { font-size: 20px; font-weight: 700; color: var(--ink); }
.dashboard-level { font-size: 13px; color: var(--muted); margin-top: 2px; }

/* --- Общая полоска прогресса ---
   Пустой трек + заполнение <i> с шириной из данных (inline width из PHP). */
.mini-bar {
    height: 10px;
    border-radius: 99px;
    background: var(--track);
    overflow: hidden;
    margin-top: 5px;
}
.mini-bar > i {
    display: block;
    height: 100%;
    border-radius: 99px;
    background: var(--orange);
}
.fill-hp { background: linear-gradient(90deg, #ef4444, #f87171) !important; }
.fill-xp { background: linear-gradient(90deg, #8b5cf6, #a78bfa) !important; }

/* --- Полоски Здоровье и Опыт --- метка слева, значение справа, полоска снизу */
.dashboard-health,
.dashboard-exp {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 2px 8px;
    margin-bottom: 14px;
    text-align: left;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink2);
}
.dashboard-health .mini-bar,
.dashboard-exp .mini-bar { grid-column: 1 / -1; }

/* --- Характеристики (Сила, Интеллект, Харизма, Мудрость) --- */
.dashboard-stat {
    margin-bottom: 10px;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
}
.dashboard-stat p { display: flex; justify-content: space-between; }
.dashboard-stat p b { color: var(--muted); font-weight: 700; }
.dashboard-stat .mini-bar { height: 9px; }


/* ============================================================
   4. ЗАДАЧИ (правая колонка)
   ============================================================ */

.tasks-info {
    margin-left: calc(24% + 24px);   /* ширина карточки персонажа + зазор */
    display: grid;
    grid-template-columns: repeat(3, 1fr);  /* три столбика, как на странице задач */
    gap: 18px;
    align-items: stretch;            /* колонки одинаковой высоты */
}
@media (max-width: 900px) {
    .character-info { float: none; width: 100%; margin-bottom: 22px; }
    .tasks-info { margin-left: 0; grid-template-columns: 1fr; }
}

/* Каждый тип задач – белая карточка, как карточка персонажа */
.today-tasks,
.todo-tasks,
.habbit-tasks {
    background: #fff;
    border-radius: 20px;
    padding: 20px 20px 8px;
    box-shadow: 0 5px 0 var(--card-sh);
    display: flex; flex-direction: column;   /* чтобы заглушка могла заполнить колонку */
}
.today-tasks  > p,
.todo-tasks   > p,
.habbit-tasks > p {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink2);
    margin-bottom: 12px;
}
/* карточки задач внутри – кремовые с обводкой, чтобы отделялись на белом */
.today-tasks .today-task-card,
.todo-tasks .todo-task-card,
.habbit-tasks .habbit-task-card {
    background: #fff7ed;
    box-shadow: none;
    border: 2px solid #fde4cf;
}
.today-tasks .today-task-card:hover,
.todo-tasks .todo-task-card:hover,
.habbit-tasks .habbit-task-card:hover {
    transform: translateY(-2px);
    border-color: #fdba74;
    box-shadow: none;   /* как на вкладке «Задачи» – без нижней тени */
}

/* Заглушка для пустой секции задач – заполняет колонку по высоте соседей */
.empty-hint {
    flex: 1 1 auto; min-height: 140px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 14px 12px; margin: 4px 0 3px;
    border: 2px dashed var(--card-sh); border-radius: 14px; color: var(--muted); background: #fffaf3;
}
.empty-hint .eh-emoji { font-size: 30px; opacity: .85; margin-bottom: 6px; }
.empty-hint p { font-size: 13px; margin-bottom: 8px; }
.empty-hint a { font-size: 13px; font-weight: 700; color: var(--orange); text-decoration: none; }
.empty-hint a:hover { text-decoration: underline; }

/* Общий вид карточки задачи */
.today-task-card,
.todo-task-card,
.habbit-task-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 4px 0 var(--card-sh);
    margin-bottom: 11px;
    transition: 0.15s;
}
.today-task-card:hover,
.todo-task-card:hover,
.habbit-task-card:hover {
    transform: translateY(-2px);           /* лёгкий подъём при наведении */
    box-shadow: 0 8px 0 #fdba74;
}

/* --- Карточка с чекбоксом (Ежедневки и Квесты) ---
   Сетка: [чекбокс] [заголовок/описание] [опыт]
   Заголовок и описание идут в 2 строки в средней колонке. */
.today-task-card,
.todo-task-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
}
.today-task-card input,
.todo-task-card input { grid-column: 1; grid-row: 1 / 3; } /* чекбокс на 2 строки */
.today-task-card .title,
.todo-task-card .title { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--ink); }
.today-task-card .description,
.todo-task-card .description { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); }
.today-task-card .exp-amount,
.todo-task-card .exp-amount {
    grid-column: 3; grid-row: 1 / 3;
    font-size: 11px; font-weight: 700;
    color: #16a34a; background: #dcfce7;
    padding: 3px 9px; border-radius: 8px;
    white-space: nowrap;
}

/* Красивый круглый чекбокс вместо системного */
.today-task-card input[type="checkbox"],
.todo-task-card input[type="checkbox"],
.habbit-task-card input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 30px;
    height: 30px;
    border: 3px solid #fdba74;
    border-radius: 50%;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: 0.15s;
}
/* Галочка появляется при отметке */
.today-task-card input[type="checkbox"]:checked,
.todo-task-card input[type="checkbox"]:checked,
.habbit-task-card input[type="checkbox"]:checked {
    background: var(--green);
    border-color: var(--green);
}
.today-task-card input[type="checkbox"]:checked::after,
.todo-task-card input[type="checkbox"]:checked::after,
.habbit-task-card input[type="checkbox"]:checked::after {
    content: "✓";
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
}

/* Выбор дней недели для ежедневки */
.daily-days { margin-top: 2px; }
.dd-label { font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 8px; }
.dd-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.dd-day { position: relative; }
.dd-day input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.dd-day span { display: grid; place-items: center; height: 34px; border-radius: 9px; border: 2px solid #fed7aa; background: #fff; font-size: 12px; font-weight: 700; color: var(--muted); }
.dd-day input:checked + span { background: linear-gradient(90deg, var(--orange), var(--orange-2)); border-color: transparent; color: #fff; }

/* --- Карточка привычки ---
   Сетка: [чекбокс] [заголовок/описание] [ударный режим] */
.habbit-task-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
}
.habbit-task-card input[type="checkbox"] { grid-column: 1; grid-row: 1 / 3; }
.habbit-task-card .title { grid-column: 2; grid-row: 1; font-weight: 600; color: var(--ink); }
.habbit-task-card .description { grid-column: 2; grid-row: 2; font-size: 12px; color: var(--muted); }
.habbit-task-card .streak {
    grid-column: 3; grid-row: 1 / 3;
    height: 32px; display: flex; align-items: center; justify-content: center; gap: 2px;
    font-size: 13px; font-weight: 700;
    color: var(--amber); background: #fef3c7;
    padding: 0 9px; border-radius: 9px;
    white-space: nowrap;
}
/* Кнопки «−» и «+».
   В HTML у них классы "-" и "+", их нельзя выбрать напрямую (недопустимо в CSS),
   поэтому берём по порядку: первая кнопка – минус, вторая – плюс. */
.habbit-task-card button {
    grid-row: 1 / 3;
    width: 32px; height: 32px;
    border: none; border-radius: 9px;
    color: #ffffff; font-weight: 800; font-size: 17px;
    cursor: pointer;
}
.habbit-task-card button:first-of-type { grid-column: 3; background: #f87171; box-shadow: 0 3px 0 #b91c1c; } /* − */
.habbit-task-card button:last-of-type  { grid-column: 4; background: var(--green); box-shadow: 0 3px 0 #15803d; } /* + */

/* Кнопка «Создать задачу» */
.create-task {
    display: block;
    width: 100%;
    grid-column: 1 / -1;   /* растянуть на все три столбика */
    padding: 15px 22px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 5px 0 #c2410c;
}
.create-task:active {
    transform: translateY(2px);       /* «проваливается» при нажатии */
    box-shadow: 0 3px 0 #c2410c;
}

/* Выполненная задача – зачёркиваем */
.today-task-card.done .title,
.todo-task-card.done  .title { text-decoration: line-through; opacity: .5; }

/* Подсказка в пустой группе задач */
.empty-hint { font-size: 13px; color: var(--muted); }

/* Ссылка «Выйти» под кошельком */
.logout-link {
    position: absolute;
    top: 74px;
    right: 34px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    text-decoration: none;
}
.logout-link:hover { color: var(--orange); }


/* ============================================================
   5. СТРАНИЦЫ ВХОДА / РЕГИСТРАЦИИ
   ============================================================ */

/* Обёртка на весь экран (fixed – игнорирует отступ под навигацию) */
.auth-wrap {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    overflow: auto;
}
.auth-card {
    width: 100%;
    max-width: 380px;
    background: #ffffff;
    border-radius: 24px;
    padding: 34px 30px;
    box-shadow: 0 8px 0 var(--card-sh);
    text-align: center;
}
.auth-logo {
    width: 72px;
    height: 72px;
    margin: 0 auto 14px;
    animation: logoBreathe 4s ease-in-out infinite;
}
.auth-logo img { width: 100%; height: 100%; display: block; }
.auth-card h1 { font-size: 24px; font-weight: 700; color: var(--ink); }
.auth-sub { font-size: 14px; color: var(--muted); margin: 4px 0 22px; }

/* Сообщение об ошибке */
.auth-error {
    background: #fee2e2;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 12px;
    margin-bottom: 16px;
}

/* Форма */
.auth-form { display: grid; gap: 14px; text-align: left; }
.auth-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ink2);
    display: grid;
    gap: 6px;
}
.auth-form input {
    font-family: inherit;
    font-size: 15px;
    padding: 12px 14px;
    border: 2px solid var(--card-sh);
    border-radius: 14px;
    background: #fffaf3;
    color: var(--ink);
    outline: none;
    transition: border-color .15s;
}
.auth-form input:focus { border-color: var(--orange); }

.auth-btn {
    margin-top: 6px;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    color: #ffffff;
    font-family: inherit;
    font-weight: 700;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 5px 0 #c2410c;
}
.auth-btn:active { transform: translateY(2px); box-shadow: 0 3px 0 #c2410c; }

.auth-switch { font-size: 13px; color: var(--muted); margin-top: 18px; }
.auth-switch a { color: var(--orange); font-weight: 600; text-decoration: none; }


/* ============================================================
   6. ДЕРЕВО НАВЫКОВ (skill.php)
   ============================================================ */

.tree-wrap {
    position: relative;
    background: linear-gradient(180deg, #fffdf9, #fff7ed);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 5px 0 var(--card-sh);
    overflow-x: auto;               /* если не влезает – горизонтальный скролл */
}
.tree {
    position: relative;
    width: 920px;
    height: 520px;
    margin: 0 auto;
}
/* линии-связи рисуем SVG-слоем под узлами */
.tree svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
/* узел = кружок + подпись, позиционируется через left/top в разметке */
.node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 118px;
    text-align: center;
}
.node .orb {
    width: 72px;
    height: 72px;
    margin: 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 32px;
    border: 4px solid #fff;
    box-shadow: 0 5px 0 rgba(0, 0, 0, 0.12);
    position: relative;
}
/* Подпись – абсолютно под кругом, чтобы не смещать якорь узла.
   Тогда центр узла = центр круга и линии проходят через центры. */
.node .cap {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink2);
    line-height: 1.2;
}
.node .cap small { display: block; font-size: 10px; color: var(--muted); font-weight: 400; }

/* состояния узлов */
.node.done .orb { background: linear-gradient(180deg, #4ade80, #22c55e);
                  box-shadow: 0 0 0 6px rgba(34,197,94,.22), 0 5px 0 rgba(0,0,0,.12); }
.node.now  .orb { background: linear-gradient(180deg, #fbbf24, #f97316);
                  box-shadow: 0 0 0 6px rgba(249,115,22,.2), 0 5px 0 rgba(0,0,0,.12); }
.node.locked .orb { background: #e7d3c0; color: #a8896f; }
.node.goal .orb {
    width: 88px; height: 88px; font-size: 40px;
    background: linear-gradient(180deg, #a78bfa, #7c3aed);
    box-shadow: 0 6px 0 #5b21b6;
}
.node .lockico {
    position: absolute; bottom: -4px; right: -4px;
    font-size: 16px; background: #fff; border-radius: 50%; padding: 2px;
}
/* Кликабельный кружок-узел (ручная отметка выполнения) */
.node-form { margin: 0; }
/* приводим кнопку к тем же метрикам, что и div-кружок (убираем нативную отрисовку) */
.node button.orb {
    box-sizing: border-box;
    width: 72px; height: 72px;
    margin: 0 auto; padding: 0;
    font-family: inherit; font-size: 32px; line-height: 1;
    -webkit-appearance: none; appearance: none;
    cursor: pointer; transition: transform .12s;
}
.node button.orb:hover { transform: translateY(-2px); }
.node button.orb:active { transform: translateY(1px); }
/* Бейдж «выполнено» – как замочек, но зелёный с галочкой */
.node .seal {
    position: absolute; bottom: -5px; right: -5px;
    width: 22px; height: 22px; border-radius: 50%;
    background: #16a34a; color: #fff; font-size: 12px; font-weight: 800;
    display: grid; place-items: center; border: 3px solid #fff;
    box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
/* достигнутая цель – та же иконка, но со свечением-кольцом.
   Нижняя «3D-подложка» приглушённо-тёмная, а не сплошная фиолетовая:
   иначе она перекрывает нижнюю дугу кольца и подсветка кажется съехавшей вверх. */
.node.goal.done .orb { box-shadow: 0 0 0 6px rgba(124,58,237,.28), 0 6px 0 rgba(0,0,0,.12); }

/* Плашка «Цель достигнута!» + салют */
.celebrate-banner {
    position: fixed; top: 24px; left: 50%; transform: translateX(-50%);
    z-index: 9999; background: linear-gradient(90deg, var(--orange), var(--orange-2));
    color: #fff; font-weight: 800; font-size: 18px; padding: 14px 26px; border-radius: 16px;
    box-shadow: 0 6px 0 #c2410c; animation: celebPop .4s ease;
    transition: opacity .5s ease, transform .5s ease;
}
.celebrate-banner.hide { opacity: 0; transform: translateX(-50%) translateY(-14px); }
@keyframes celebPop { from { transform: translateX(-50%) scale(.6); opacity: 0; } to { transform: translateX(-50%) scale(1); opacity: 1; } }

/* легенда под деревом */
.tree-legend { text-align: center; color: var(--muted); margin-top: 16px; font-size: 13px; }

/* Раскладка страницы: контент слева + компактная панель создания справа
   (используется и на дереве навыков, и на странице «Все задачи») */
.skill-layout,
.task-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}
.skill-main,
.task-layout > .tasks-cols { min-width: 0; }   /* не даём широкому контенту растягивать колонку */
/* внутри узкой левой колонки колонки задач жмём чуть плотнее */
.task-layout > .tasks-cols { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }

/* Боковая карточка «Новая цель» – всегда на виду, заполняет место справа */
.create-side {
    background: #fff;
    border-radius: 20px;
    padding: 22px 20px;
    box-shadow: 0 5px 0 var(--card-sh);
    position: sticky;
    top: 24px;
}
.create-side h3 { font-size: 18px; color: var(--ink); margin-bottom: 4px; }
.create-side .side-hint { font-size: 12.5px; color: var(--muted); margin-bottom: 16px; line-height: 1.35; }
/* форма внутри панели – без собственных отступов, карточка их уже задаёт */
.create-side .create-form { padding: 0; grid-template-columns: 1fr; gap: 14px; }
/* значки – сеткой во всю ширину поля (7 колонок × 2 ряда = ровный прямоугольник) */
.create-side .emoji-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.create-side .emoji-pick .ep { width: 100%; height: 40px; }

/* Узкие экраны – панель уходит под контент */
@media (max-width: 1000px) {
    .skill-layout,
    .task-layout { grid-template-columns: 1fr; }
    .create-side { position: static; }
}
@media (max-width: 640px) {
    .task-layout > .tasks-cols { grid-template-columns: 1fr; }
}


/* ============================================================
   7. ВСЕ ЗАДАЧИ (task.php)
   ============================================================ */

/* Форма создания квеста (раскрывается по клику) */
.create-panel {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 0 var(--card-sh);
    margin-bottom: 22px;
    overflow: hidden;
}
.create-panel summary {
    list-style: none;
    cursor: pointer;
    padding: 15px 20px;
    font-weight: 700;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
}
.create-panel summary::-webkit-details-marker { display: none; }
.create-form {
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.create-form .full { grid-column: 1 / -1; }
.create-form label { font-size: 12px; font-weight: 600; color: var(--ink2); display: grid; gap: 5px; }
/* Поле выбора значка – вне <label>, чтобы клик по пустому месту не активировал первый значок */
.create-form .pick-field { font-size: 12px; font-weight: 600; color: var(--ink2); display: grid; gap: 5px; }
.create-form input,
.create-form select {
    font-family: inherit; font-size: 14px;
    padding: 11px 13px;
    border: 2px solid var(--card-sh); border-radius: 12px;
    background: #fffaf3; color: var(--ink); width: 100%;
}
.create-form .save-task {
    grid-column: 1 / -1;
    padding: 13px; border: none; border-radius: 12px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    color: #fff; font-family: inherit; font-weight: 700; font-size: 15px;
    cursor: pointer; box-shadow: 0 4px 0 #c2410c;
}

/* Фильтр по категориям */
.task-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.task-tabs a {
    padding: 9px 16px; border-radius: 99px;
    border: 2px solid var(--card-sh); background: #fff;
    color: var(--ink2); font-weight: 600; font-size: 13px; text-decoration: none;
}
.task-tabs a.on { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 4px 0 #c2410c; }

/* Три колонки – каждая белая карточка, как на дэшборде */
.tasks-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; align-items: start; }
.task-col {
    background: #fff;
    border-radius: 20px;
    padding: 20px 20px 8px;
    box-shadow: 0 5px 0 var(--card-sh);
}
.task-col .col-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.task-col .col-h .n { font-weight: 700; color: var(--ink2); }
.task-col .col-h .cnt {
    font-size: 12px; color: var(--muted); background: #fff7ed;
    padding: 2px 9px; border-radius: 99px; box-shadow: 0 2px 0 var(--card-sh);
}
.col-empty { font-size: 13px; color: var(--muted); padding: 4px; }
/* пустая колонка на странице «Задачи» – как заглушка на дэшборде, ≈ две карточки */
.task-col .col-empty {
    min-height: 140px; display: flex; align-items: center; justify-content: center;
    text-align: center; margin: 4px 0 3px; padding: 12px;
    border: 2px dashed var(--card-sh); border-radius: 14px; background: #fffaf3;
}
/* карточки задач внутри – кремовые с обводкой, чтобы отделялись на белом */
.task-col .today-task-card,
.task-col .todo-task-card,
.task-col .habbit-task-card {
    background: #fff7ed;
    box-shadow: none;
    border: 2px solid #fde4cf;
}
.task-col .today-task-card:hover,
.task-col .todo-task-card:hover,
.task-col .habbit-task-card:hover {
    transform: translateY(-2px);
    border-color: #fdba74;
}

@media (max-width: 820px) {
    .tasks-cols { grid-template-columns: 1fr; }
    .create-form { grid-template-columns: 1fr; }
}

/* Кнопка «Создать квест» снизу */
.create-fab {
    display: block; width: 100%; margin-top: 26px; padding: 16px;
    border: none; border-radius: 16px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    color: #fff; font-family: inherit; font-weight: 700; font-size: 16px;
    cursor: pointer; box-shadow: 0 5px 0 #c2410c; transition: transform .15s;
}
.create-fab.active { background: linear-gradient(90deg, #ea580c, #f97316); }
.create-fab:active { transform: translateY(2px); box-shadow: 0 3px 0 #c2410c; }

/* Выпадающая форма – плавное раскрытие */
.create-drop {
    max-height: 0; opacity: 0; overflow: hidden;
    transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease, overflow 0s;
}
/* после раскрытия убираем обрезку, чтобы выпадающий список был виден целиком */
.create-drop.open {
    max-height: 720px; opacity: 1; margin-top: 14px; overflow: visible;
    transition: max-height .4s ease, opacity .3s ease, margin-top .3s ease, overflow 0s .4s;
}
/* форма внутри – цельная белая карточка */
.create-drop .create-form {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 5px 0 var(--card-sh);
}

/* Кастомный <select> в стиле проекта (пункт 7) */
.select-wrap { position: relative; }
.select-wrap::after {
    content: "▾"; position: absolute; right: 14px; top: 50%;
    transform: translateY(-50%); color: var(--orange); font-size: 14px; pointer-events: none;
}
.create-form select,
.styled-select {
    appearance: none; -webkit-appearance: none;
    width: 100%; font-family: inherit; font-size: 14px;
    padding: 11px 34px 11px 13px;
    border: 2px solid var(--card-sh); border-radius: 12px;
    background: #fffaf3; color: var(--ink); cursor: pointer;
}
.create-form select:focus,
.styled-select:focus { outline: none; border-color: var(--orange); }

/* Когда список заменён кастомным – прячем нативный и его стрелку */
.select-wrap.enhanced::after { display: none; }
.select-wrap.enhanced select { display: none; }

/* Кастомный выпадающий список в стиле приложения */
.cs { position: relative; }
.cs-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-family: inherit; font-size: 14px; color: var(--ink2);
    padding: 11px 13px; border: 2px solid var(--card-sh); border-radius: 12px;
    background: #fffaf3; cursor: pointer; text-align: left;
}
.cs.open .cs-trigger { border-color: var(--orange); }
.cs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-arrow { color: var(--orange); font-size: 14px; flex: none; transition: transform .15s; }
.cs.open .cs-arrow { transform: rotate(180deg); }
.cs-list {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50;
    background: #fff; border: 2px solid var(--card-sh); border-radius: 12px;
    box-shadow: 0 6px 0 var(--card-sh); padding: 6px; display: none;
    max-height: 240px; overflow-y: auto;
}
.cs.open .cs-list { display: block; }
.cs-option {
    padding: 10px 12px; border-radius: 9px; font-size: 14px; color: var(--ink2);
    cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cs-option:hover { background: #fff3e6; }
.cs-option.sel { background: #ffe8cf; font-weight: 600; }

/* Превью награды */
.reward-preview { font-size: 13px; color: var(--muted); align-self: center; }
.reward-preview b { color: var(--green); }

/* Привычка «+» уже нажата сегодня */
.habbit-task-card .plus:disabled,
.habbit-task-card .minus:disabled { background: #d1d5db; box-shadow: 0 3px 0 #9ca3af; cursor: not-allowed; }


/* ============================================================
   8. ЦЕЛИ И ГРАФ (skill.php)
   ============================================================ */
.goals-list { margin-top: 18px; display: grid; gap: 18px; }
.goal-empty {
    background: #fff; border-radius: 20px; padding: 30px;
    box-shadow: 0 5px 0 var(--card-sh); color: var(--muted); text-align: center; line-height: 1.5;
}
.goal-empty p:first-child { font-size: 18px; font-weight: 600; color: var(--ink2); margin-bottom: 8px; }

.goal-card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 5px 0 var(--card-sh); }
.goal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.goal-title { font-size: 18px; font-weight: 700; color: var(--ink2); }
.goal-meta { font-size: 12px; color: var(--muted); background: #fff7ed; padding: 3px 10px; border-radius: 99px; }
.goal-del { margin-left: auto; border: none; background: #fee2e2; color: #b91c1c; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; font-weight: 700; }

.goal-branch { display: flex; align-items: center; overflow-x: auto; padding: 6px 2px 10px; }
.gnode { flex: none; text-align: center; width: 92px; }
.gnode .orb {
    width: 56px; height: 56px; margin: 0 auto 6px; border-radius: 50%;
    display: grid; place-items: center; font-size: 24px;
    border: 4px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.12); position: relative;
}
.gnode .lbl { font-size: 11px; font-weight: 600; color: var(--ink2); line-height: 1.2; display: block; }
.gnode.start .orb  { background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24); }
.gnode.done .orb   { background: linear-gradient(180deg, #4ade80, #22c55e); color: #fff; }
.gnode.now .orb    { background: linear-gradient(180deg, #fbbf24, #f97316); color: #fff; }
.gnode.empty .orb  { background: #f1e6da; color: #a8896f; border-style: dashed; }
.gnode.vertex .orb { width: 70px; height: 70px; font-size: 30px; background: linear-gradient(180deg, #a78bfa, #7c3aed); color: #fff; box-shadow: 0 5px 0 #5b21b6; }
.gnode.vertex.reached .orb { background: linear-gradient(180deg, #fbbf24, #f59e0b); box-shadow: 0 5px 0 #b45309; }
.gnode .lockico { position: absolute; bottom: -4px; right: -4px; font-size: 14px; background: #fff; border-radius: 50%; padding: 1px 2px; }
.gconn { flex: none; width: 34px; height: 5px; border-radius: 99px; background: #fdba74; }

/* Единая доска: слева «Ты», справа ветки к целям */
.skill-board { display: flex; align-items: center; gap: 6px; }
.board-you { flex: none; text-align: center; padding-right: 2px; }
.you-orb { width: 66px; height: 66px; border-radius: 50%; margin: 0 auto 5px; display: grid; place-items: center; font-size: 32px; background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24); border: 4px solid #fff; box-shadow: 0 5px 0 rgba(0,0,0,.12); }
.you-lbl { font-size: 12px; font-weight: 700; color: var(--ink2); }
.trunk { flex: none; width: 5px; align-self: stretch; background: #fdba74; border-radius: 99px; margin: 42px 0; }
.board-branches { display: flex; flex-direction: column; gap: 22px; flex: 1; min-width: 0; }
.board-branch { display: flex; align-items: center; overflow-x: auto; padding: 6px 0; }
.gnode.vertex { position: relative; }
.vmeta { font-size: 10px; color: var(--muted); display: block; margin-top: 1px; }
.vdel-form { position: absolute; top: 0; right: 8px; margin: 0; }
.vdel { border: none; background: #fee2e2; color: #b91c1c; width: 22px; height: 22px; border-radius: 7px; cursor: pointer; font-weight: 700; font-size: 11px; }

/* Кнопка удаления цели на вершине дерева */
.ndel-form { position: absolute; top: -4px; right: 10px; margin: 0; z-index: 2; }
.ndel { border: none; background: #fee2e2; color: #b91c1c; width: 22px; height: 22px; border-radius: 7px; cursor: pointer; font-weight: 700; font-size: 11px; }


/* ============================================================
   9. МАГАЗИН (shop.php)
   ============================================================ */
.shop-cat { margin-bottom: 26px; }
.shop-cat .shop-grid { margin-bottom: 0; }
.shop-section { font-size: 16px; font-weight: 700; color: var(--ink2); margin: 8px 0 14px; }

/* Категории по две на строку – карточки в стиле колонок задач */
.shop-cats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 26px; align-items: start; }
.shop-cats .shop-cat { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 5px 0 var(--card-sh); margin-bottom: 0; }
/* шапка карточки: название + счётчик-пилюля (как .col-h у задач) */
.shop-cats .col-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.shop-cats .col-h .n { font-weight: 700; color: var(--ink2); }
.shop-cats .col-h .cnt { font-size: 12px; color: var(--muted); background: #fff7ed; padding: 2px 9px; border-radius: 99px; box-shadow: 0 2px 0 var(--card-sh); }
.shop-cats .col-h .cnt.soon { color: #a8896f; }
/* товары растягиваются, чтобы не оставалось пустого места справа */
.shop-cats .shop-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin-bottom: 0; }
/* плитки товаров – кремовые с обводкой, компактные */
.shop-cats .shop-cat { padding: 16px; }
.shop-cats .item { background: #fff7ed; border: 2px solid #fde4cf; box-shadow: none; padding: 8px; border-radius: 12px; }
.shop-cats .item:hover { transform: translateY(-2px); border-color: #fdba74; box-shadow: none; }
.shop-cats .item .pic { height: 42px; font-size: 24px; border-radius: 9px; margin-bottom: 5px; }
.shop-cats .item .nm { font-size: 11px; min-height: 24px; margin-bottom: 0; }
.shop-cats .item .buy, .shop-cats .item .owned-btn { margin-top: 5px; padding: 5px 4px; font-size: 11px; border-radius: 8px; }
@media (max-width: 820px) { .shop-cats { grid-template-columns: 1fr; } }
.shop-hint { font-size: 12px; color: var(--muted); font-weight: 400; }

.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 12px; margin-bottom: 30px; }
.item { background: #fff; border-radius: 14px; padding: 11px; text-align: center; box-shadow: 0 4px 0 var(--card-sh); transition: .15s; }
.item:hover { transform: translateY(-3px); box-shadow: 0 7px 0 #fdba74; }
.item .pic { width: 100%; height: 62px; border-radius: 11px; background: linear-gradient(160deg, #fef3c7, #fde68a); display: grid; place-items: center; font-size: 32px; margin-bottom: 7px; }
.item .nm { font-weight: 600; font-size: 12.5px; color: var(--ink); min-height: 30px; line-height: 1.2; }
.item form { margin: 0; }
.item .buy { margin-top: 7px; width: 100%; padding: 7px; border: none; border-radius: 9px; background: #ede9fe; color: #7c3aed; font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; }
.item.owned .buy, .item .owned-btn { background: #dcfce7; color: #16a34a; cursor: default; }
.item .buy.cant { background: #f1f1f1; color: #9ca3af; cursor: not-allowed; }

/* Секции-карточки магазина (Герой, Заморозки) */
.shop-block { margin-bottom: 26px; }
.shop-block .shop-hint { margin: 0 0 14px; }
.shop-block .shop-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); margin-bottom: 0; }
.shop-block .item { background: #fff7ed; border: 2px solid #fde4cf; box-shadow: none; }
.shop-block .item:hover { transform: translateY(-2px); border-color: #fdba74; box-shadow: none; }
.shop-block .item .pic { background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24); }
.item .buy.av-use { background: linear-gradient(180deg, var(--orange-2), #ea580c); color: #fff; }
.freeze-have { font-size: 12px; font-weight: 700; color: var(--muted); background: #e0f2fe; padding: 2px 10px;
    border-radius: 99px; margin-left: 6px; }

/* Выбор аватара при регистрации */
.auth-avatar { font-size: 13px; font-weight: 600; color: var(--ink2); text-align: left; }
.av-pick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
.av-opt { position: relative; cursor: pointer; }
.av-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.av-opt span { display: grid; place-items: center; height: 46px; font-size: 26px; border-radius: 12px;
    border: 2px solid var(--card-sh); background: #fffaf3; transition: .15s; }
.av-opt:hover span { border-color: #fdba74; transform: translateY(-2px); }
.av-opt input:checked + span { border-color: var(--orange); background: #ffe8cf; }
.auth-hint { font-size: 11.5px; color: var(--muted); margin: 8px 0 0; }

.reward-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; align-items: start; }
.reward { background: linear-gradient(160deg, #fff, #fff7ed); border-radius: 16px; padding: 14px; box-shadow: 0 4px 0 var(--card-sh); display: flex; gap: 12px; align-items: center; }
.reward .em { width: 46px; height: 46px; border-radius: 12px; background: #fff7ed; display: grid; place-items: center; font-size: 24px; flex: none; box-shadow: 0 3px 0 var(--card-sh); }
.reward-body { flex: 1; min-width: 0; }
.reward-body .t { font-weight: 600; color: var(--ink); }
.reward-price { font-size: 12.5px; color: var(--muted); font-weight: 600; margin-top: 2px; }
.reward-actions { display: flex; gap: 6px; align-items: center; margin: 0; }
.redeem { padding: 8px 12px; border: none; border-radius: 11px; background: #fef08a; color: #a16207; font-family: inherit; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; }
.redeem.cant { background: #f1f1f1; color: #9ca3af; cursor: not-allowed; }
.reward-del { border: none; background: #fee2e2; color: #b91c1c; width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-weight: 700; }

/* Раздел «Реальные награды» – карточка в стиле категорий, плитки как у товаров */
.reward-cat { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 5px 0 var(--card-sh); }
.reward-cat .col-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.reward-cat .col-h .n { font-weight: 700; color: var(--ink2); }
.reward-cat .col-h .cnt { font-size: 12px; color: var(--muted); background: #fff7ed; padding: 2px 9px; border-radius: 99px; box-shadow: 0 2px 0 var(--card-sh); }
.reward-cat .reward-sub { margin-bottom: 14px; }
.reward-cat .item { background: #fff7ed; border: 2px solid #fde4cf; box-shadow: none; }
.reward-cat .item:hover { transform: translateY(-2px); border-color: #fdba74; box-shadow: none; }   /* подъём как у товаров каталога */
/* плитка награды: как товар, но с ✕ в углу */
.reward-item { position: relative; }
.reward-item .reward-del-form { position: absolute; top: 6px; right: 6px; margin: 0; z-index: 2; }
.reward-item .reward-del { width: 22px; height: 22px; border: none; border-radius: 7px; background: #fee2e2; color: #b91c1c; font-size: 11px; font-weight: 700; cursor: pointer; }
.reward-item .buy { background: #fef08a; color: #a16207; }        /* золотая – трата золота */
.reward-item .buy.cant { background: #f1f1f1; color: #9ca3af; }

/* Карточка создания награды – вертикальная, стоит в общей сетке */
.reward-add {
    background: #fff; border: 2px dashed #fdba74; box-shadow: 0 4px 0 var(--card-sh);
    border-radius: 16px; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
    grid-column: span 2;                 /* занимает 2 ячейки… */
    max-width: 340px;                    /* …но не растягивается шире, чем нужно */
}
.reward-add .ra-h { font-weight: 700; color: var(--ink2); font-size: 15px; }
.reward-add .emoji-pick { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.reward-add .emoji-pick .ep { width: 100%; height: 36px; }
.reward-add input {
    font-family: inherit; width: 100%; font-size: 14px; padding: 11px 13px;
    border: 2px solid var(--card-sh); border-radius: 12px; background: #fffaf3; color: var(--ink2);
}
.reward-add .ra-add {
    border: none; border-radius: 12px; padding: 13px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2));
    color: #fff; font-family: inherit; font-weight: 700; font-size: 15px;
    cursor: pointer; box-shadow: 0 4px 0 #c2410c;
}
.reward-add .ra-add:active { transform: translateY(2px); box-shadow: 0 2px 0 #c2410c; }

/* Раскладка: форма слева (фикс. ширина), награды справа – той же высоты, низ вровень */
.reward-layout { display: grid; grid-template-columns: 320px 1fr; gap: 16px; align-items: stretch; }
.reward-layout .create-side { position: static; margin: 0; box-shadow: none; border: 2px solid #fde4cf; }

/* Награды справа: карточки во всю высоту формы, лишние – горизонтальной прокруткой */
.reward-scroll { min-width: 0; overflow-x: auto; overflow-y: hidden; padding-top: 8px; margin-top: -8px; }   /* место под подъём карточки, без сдвига высоты */
.reward-tiles {
    display: grid; grid-auto-flow: column;
    grid-template-rows: 1fr 1fr;                  /* две награды в одном столбике */
    grid-auto-columns: minmax(160px, 200px); gap: 12px; height: 100%;
}
.reward-tiles .item { display: flex; flex-direction: column; margin: 0; height: 100%; }
.reward-tiles .item form:last-of-type { margin-top: auto; }   /* кнопка цены прижата к низу карточки */
.reward-empty { color: var(--muted); font-size: 13px; align-self: center; }

@media (max-width: 720px) {
    .reward-layout { grid-template-columns: 1fr; }        /* на узком: форма сверху, награды под ней */
    .reward-tiles { grid-auto-flow: row; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-auto-columns: auto; height: auto; }
    .reward-tiles .item { height: auto; }
}

@media (max-width: 900px) { .shop-grid { grid-template-columns: 1fr 1fr; } .reward-grid { grid-template-columns: 1fr; } .reward-add { grid-column: auto; } }

/* Заблокированные категории (машина/тюнинг) – «🔒 Скоро» */
.shop-soon { font-size: 12px; font-weight: 600; color: var(--muted); background: #fff7ed; padding: 3px 10px; border-radius: 99px; box-shadow: 0 2px 0 var(--card-sh); margin-left: 6px; }
.item.locked { opacity: .95; }
.item.locked .pic { background: linear-gradient(160deg, #f1e6da, #e7d3c0); filter: grayscale(.35); position: relative; }
.item.locked .pic::after {
    content: "🔒"; position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 24px; background: rgba(255,255,255,.4); border-radius: 11px;
}
.item .locked-btn {
    margin-top: 7px; width: 100%; padding: 7px; border: none; border-radius: 9px;
    background: #efe7dd; color: #a8896f; font-family: inherit; font-weight: 700; font-size: 12px; cursor: not-allowed;
}


/* ============================================================
   10. ПЕРСОНАЖ (hero.php)
   ============================================================ */
.hero-layout { display: grid; grid-template-columns: minmax(320px, 30%) 1fr; gap: 22px; align-items: start; }

/* Персонаж: слева белая 3D-карточка + горизонтальные вкладки, справа характеристики */
.hero-shell2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.hero-left { display: flex; flex-direction: column; gap: 14px; }
/* карточка-сцена растягивается на всю высоту колонки → вкладки уходят к низу (вровень с правой колонкой) */
.hero-left .stage-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hero-left .stage-wrap .hview.on { flex: 1; min-height: 0; }
.hview[data-view="car"].on, .hview[data-view="flat"].on { display: flex; flex-direction: column; }
.hview[data-view="car"] .car-garage, .hview[data-view="flat"] .car-garage { flex: 1; }
.stage { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 5px 0 var(--card-sh); }
.stage > h3 { font-size: 16px; color: var(--ink2); margin-bottom: 12px; }
.hero-tabs-h { display: flex; gap: 10px; }
.hero-tabs-h .htab { flex: 1; justify-content: center; }
.hero-right-col { display: flex; flex-direction: column; gap: 22px; }
.hero-ach .ach-badges { justify-content: space-between; gap: 10px; }
@media (max-width: 900px) { .hero-shell2 { grid-template-columns: 1fr; } }
.hero-right { display: grid; gap: 22px; }
/* Базовая «карточка» (используется на Персонаже и в Гильдии) */
.card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 5px 0 var(--card-sh); }
.card > h3 { font-size: 16px; color: var(--ink2); margin-bottom: 12px; }
.hero-big { text-align: center; }
.hero-avatar {
    width: 150px; height: 150px; margin: 4px auto 12px; border-radius: 36px;
    background: radial-gradient(circle at 50% 32%, #fde68a, #fb923c);
    display: grid; place-items: center; font-size: 78px; border: 5px solid #fff;
    box-shadow: inset 0 -10px 0 rgba(0,0,0,.08), 0 12px 24px rgba(0,0,0,.14);
}
.hero-name { font-size: 22px; font-weight: 700; }
.hero-class { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.hero-bar { text-align: left; margin-bottom: 12px; }
.hb-lab { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; color: var(--ink2); }
.hero-sub { font-size: 14px; font-weight: 600; color: var(--ink2); margin: 16px 0 10px; }
.hero-hint { font-size: 13px; color: var(--muted); }
.hero-hint a { color: var(--orange); font-weight: 600; }
.hero-note { font-size: 12px; color: var(--muted); margin-top: 10px; }

.equip-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.equip-item { margin: 0; }
.equip-item button {
    width: 100%; height: 92px; background: #fff7ed; border: 2px solid var(--card-sh); border-radius: 14px;
    padding: 8px 4px; cursor: pointer; font-family: inherit;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.equip-item .ei-emoji { font-size: 26px; line-height: 1; }
.equip-item .ei-nm {
    font-size: 11px; font-weight: 600; color: var(--muted); text-align: center; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.equip-item button.on { border-color: var(--orange); background: #ffedd5; box-shadow: 0 0 0 2px rgba(249,115,22,.18); }
.equip-item button.on .ei-nm { color: var(--orange); }
/* Иконка-галочка (SVG) вместо символа ✓/✅ – общий базовый размер + контексты */
.ico-check { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; flex-shrink: 0; }
.node .seal .ico-check { width: 16px; height: 16px; }
.hero-tile .ht-act .ico-check { width: 15px; height: 15px; display: block; }
.equip-item .ei-nm .ico-check { width: .95em; height: .95em; margin-right: 3px; }

.ach-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.ach-card { background: #fff7ed; border-radius: 14px; padding: 12px; text-align: center; box-shadow: 0 3px 0 var(--card-sh); }
.ach-card.unlocked { background: #fffdf5; }
.ach-card.ach-locked { opacity: .7; }
.ach-ico { font-size: 30px; filter: grayscale(1); opacity: .5; }
.ach-card.unlocked .ach-ico { filter: none; opacity: 1; }
.ach-nm { font-size: 13px; font-weight: 700; color: var(--ink2); margin-top: 4px; }
.ach-tier { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.ach-goal { font-size: 10px; color: var(--muted); margin-top: 4px; }

.settings-form .set-row { display: flex; align-items: center; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #fee9d6; gap: 10px; }
.settings-form .set-row:last-of-type { border-bottom: none; }
.settings-form label { font-weight: 600; color: var(--ink2); font-size: 14px; }
.settings-form input[type=text],
.settings-form input[type=number] {
    font-family: inherit; text-align: right; border: 2px solid var(--card-sh);
    border-radius: 10px; padding: 8px 10px; background: #fffaf3; color: var(--ink); max-width: 150px;
}
.settings-form .select-wrap { max-width: 150px; }
.settings-form .set-row.col { flex-direction: column; align-items: stretch; gap: 10px; }
.settings-form .set-row.col .emoji-pick { width: 100%; }
.save-settings {
    margin-top: 14px; width: 100%; padding: 12px; border: none; border-radius: 12px;
    background: linear-gradient(90deg, var(--orange), var(--orange-2)); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; box-shadow: 0 4px 0 #c2410c;
}

/* Переключатель on/off */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { display: none; }
.switch span { position: absolute; inset: 0; background: #e5cdb8; border-radius: 99px; transition: .2s; cursor: pointer; }
.switch span::after { content: ""; position: absolute; width: 20px; height: 20px; border-radius: 50%; background: #fff; top: 3px; left: 3px; transition: .2s; }
.switch input:checked + span { background: var(--green); }
.switch input:checked + span::after { left: 23px; }

@media (max-width: 900px) { .hero-layout { grid-template-columns: 1fr; } .ach-grid, .equip-grid { grid-template-columns: 1fr 1fr; } }


/* Дополнения к Персонажу (как в референсе) */
.hero-avatar { position: relative; }
.hero-hat { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 40px; }

.equip-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 6px; }
.eslot { width: 100%; height: 52px; border-radius: 14px; background: #fff7ed; border: 2px dashed #fdba74; display: grid; place-items: center; font-size: 24px; color: var(--muted); }
.eslot.filled { border-style: solid; background: #fff; box-shadow: 0 3px 0 var(--card-sh); color: var(--ink); }

.hero-shop-btn { display: block; text-align: center; margin-top: 16px; padding: 11px; border-radius: 14px; border: 2px solid #fdba74; background: #fff; color: var(--ink2); font-weight: 600; font-size: 14px; text-decoration: none; }
.hero-shop-btn:hover { background: #fff7ed; }

/* ============================================================
   ПСЕВДО-3D СЦЕНА ГЕРОЯ
   ============================================================ */
.hero3d {
    position: relative; height: 250px; margin: 2px auto 16px; border-radius: 24px; overflow: hidden;
    background: radial-gradient(120% 95% at 50% 18%, #fff5df 0%, #ffe4c4 48%, #ffd0a6 100%);
    box-shadow: inset 0 -20px 34px rgba(194,65,12,.14), inset 0 2px 0 #fff;
    perspective: 720px;
}
.hero3d-bg { position: absolute; inset: 0; display: grid; place-items: center; font-size: 160px; opacity: .13; filter: blur(1px); }
.hero3d-stage { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .45s ease; }
.hero3d:hover .hero3d-stage { transform: rotateY(9deg); }

.hero3d-char {
    position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%);
    font-size: 100px; line-height: 1; z-index: 3;
    filter: drop-shadow(0 16px 12px rgba(67,20,7,.28));
    animation: heroFloat 3.4s ease-in-out infinite;
}
@keyframes heroFloat {
    0%,100% { transform: translate(-50%,-50%) translateY(0)   rotate(-1.5deg); }
    50%     { transform: translate(-50%,-50%) translateY(-15px) rotate(1.5deg); }
}
.h3-body   { position: relative; z-index: 2; }
.h3-hat    { position: absolute; left: 50%; top: -46px; transform: translateX(-50%); font-size: 54px; z-index: 4; }
.h3-pet    { position: absolute; left: 82px; bottom: -6px; font-size: 42px; z-index: 3; filter: drop-shadow(0 8px 6px rgba(67,20,7,.25)); animation: heroFloat 3.4s ease-in-out .5s infinite; }
.h3-outfit { position: absolute; left: -58px; top: 4px; font-size: 40px; z-index: 1; }

.hero3d-shadow {
    position: absolute; left: 50%; bottom: 48px; width: 150px; height: 26px; transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(67,20,7,.3), rgba(67,20,7,0));
    z-index: 1; animation: heroShadow 3.4s ease-in-out infinite;
}
@keyframes heroShadow { 0%,100% { width: 150px; opacity: .9; } 50% { width: 116px; opacity: .55; } }
.hero3d-pedestal {
    position: absolute; left: 50%; bottom: 34px; width: 196px; height: 46px;
    transform: translateX(-50%) rotateX(60deg); border-radius: 50%; z-index: 0;
    background: radial-gradient(closest-side, #fff, #fed7aa 68%, #fbbf24);
    box-shadow: 0 12px 0 #f59e0b;
}

/* ============================================================
   ГАРАЖ + ДОМ
   ============================================================ */
.play-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; margin-top: 22px; }
@media (max-width: 1000px) { .play-layout { grid-template-columns: 1fr; } }

/* заглушка, когда нет машины */
.locked-stage { text-align: center; padding: 22px 10px; color: var(--muted); }
.locked-stage .ls-emoji { font-size: 62px; filter: grayscale(.35); opacity: .7; margin-bottom: 6px; }
.locked-stage p { margin-bottom: 12px; }

/* сцена с машиной */
.car-stage {
    background: linear-gradient(180deg, #eef4fb, #dceafa); border-radius: 18px; padding: 12px;
    box-shadow: inset 0 -10px 18px rgba(30,58,90,.08);
}
.car-svg { width: 100%; height: auto; display: block; }

/* комната */
.room {
    position: relative; height: 270px; border-radius: 18px; overflow: hidden;
    background: linear-gradient(180deg, #f4ebff, #ece0fb);
    box-shadow: inset 0 -10px 18px rgba(90,50,140,.08);
}
.room-wall   { position: absolute; left: 0; right: 0; top: 0; height: 66%; background: linear-gradient(180deg, #fdead9, #f7dcc2); }
.room-floor  { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; background: linear-gradient(180deg, #e7cba6, #d6b083); box-shadow: inset 0 7px 12px rgba(120,72,20,.16); }
.room-window { position: absolute; left: 7%; top: 12%; width: 24%; height: 32%; border-radius: 10px; background: linear-gradient(160deg, #c6e6ff, #93c5fd); border: 6px solid #fff; box-shadow: 0 4px 0 rgba(0,0,0,.08); }
.furn { position: absolute; line-height: 1; filter: drop-shadow(0 8px 6px rgba(67,20,7,.22)); transition: transform .18s; cursor: default; }
.furn:hover { transform: scale(1.07); }

/* тумблеры деталей/мебели */
.parts-tray { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.part-form { margin: 0; }
.part-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 100px;
    padding: 10px 12px; cursor: pointer; font-family: inherit;
    background: #fff7ed; border: 2px solid var(--card-sh); border-radius: 14px; color: var(--ink2); transition: .15s;
}
.part-btn:hover { transform: translateY(-2px); border-color: #fdba74; }
.part-btn .pe { font-size: 26px; }
.part-btn .pn { font-size: 12px; font-weight: 600; }
.part-btn .ps { font-size: 10px; color: var(--muted); }
.part-btn.on { border-color: var(--green); background: #dcfce7; }
.part-btn.on .ps { color: #16a34a; font-weight: 700; }

/* ============================================================
   ВКЛАДКИ ПЕРСОНАЖА (Персонаж / Машина / Квартира)
   ============================================================ */
.hero-shell { display: grid; grid-template-columns: 220px 1fr; gap: 22px; align-items: start; }
.hero-tabs {
    position: sticky; top: 24px; display: flex; flex-direction: column; gap: 10px;
    background: #fff; border-radius: 20px; padding: 14px; box-shadow: 0 5px 0 var(--card-sh);
}
.htab {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px;
    border: 2px solid transparent; border-radius: 14px; background: #fff7ed;
    color: var(--ink2); font-family: inherit; font-weight: 700; font-size: 15px; cursor: pointer; text-align: left; transition: .15s;
}
.htab .ico { font-size: 20px; }
.htab:hover { border-color: #fdba74; }
.htab.on { background: linear-gradient(90deg, var(--orange), var(--orange-2)); color: #fff; box-shadow: 0 4px 0 #c2410c; }
.hero-stage { min-width: 0; }
.hview { display: none; }
.hview.on { display: block; }
@media (max-width: 900px) {
    .hero-shell { grid-template-columns: 1fr; }
    .hero-tabs { position: static; flex-direction: row; overflow-x: auto; }
    .htab { flex: 1; justify-content: center; }
}

/* Изометрическая комната */
.flat-stage {
    background: linear-gradient(180deg, #eef3f6, #e3ecef); border-radius: 18px; padding: 6px;
    box-shadow: inset 0 -10px 18px rgba(40,60,80,.08); overflow: hidden;
}
.flat-svg { width: 100%; height: auto; display: block; }

.ach-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.abadge { width: 62px; text-align: center; border: none; background: transparent; cursor: pointer; padding: 0; font-family: inherit; transition: transform .12s; }
.abadge:hover { transform: translateY(-3px); }
.abadge .b { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: #fff7ed; box-shadow: 0 3px 0 var(--card-sh); margin: 0 auto 5px; }
.abadge small { font-size: 10px; color: var(--muted); line-height: 1.15; display: block; }
.abadge.locked .b { filter: grayscale(1); opacity: .4; }

/* Окно достижения (детали по клику) */
.ach-modal { position: fixed; inset: 0; z-index: 100; background: rgba(67,20,7,.45); display: none; place-items: center; padding: 20px; overflow: auto; }
.ach-modal.open { display: grid; animation: helpFade .2s ease; }
.ach-modal-card { position: relative; width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 28px; box-shadow: 0 10px 0 var(--card-sh); animation: helpPop .25s ease; }
.ach-modal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ach-modal-ico { font-size: 40px; }
.ach-modal-name { font-size: 20px; font-weight: 700; color: var(--ink); }
.ach-modal-desc { font-size: 14px; color: var(--ink2); line-height: 1.45; margin-bottom: 16px; }
.ach-modal-text { font-size: 13px; color: var(--muted); font-weight: 600; margin: 8px 0 16px; }

/* --- Модалка задачи (task.php): детали + редактирование + удаление --- */
/* высокая форма – прижимаем к верху и даём скролл, чтобы не обрезалась */
.task-modal { align-items: start; padding-top: 40px; padding-bottom: 40px; }

.today-task-card.clickable,
.todo-task-card.clickable,
.habbit-task-card.clickable { cursor: pointer; }

.tm-head { display: flex; align-items: center; gap: 12px; margin: 2px 40px 16px 0; }
.tm-ico  { font-size: 38px; }
.tm-name { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.2; }

.tm-meta { background: #fff7ed; border-radius: 14px; padding: 6px 14px; margin-bottom: 18px; }
.tm-row  { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--muted); border-bottom: 1px solid #fde4cf; }
.tm-row:last-child { border-bottom: none; }
.tm-row b { color: var(--ink2); font-weight: 600; text-align: right; }

.tm-delform { margin-top: 4px; }
.tm-delete {
    display: block; width: 100%; padding: 12px; border: 2px solid #fecaca; border-radius: 12px;
    background: #fef2f2; color: #b91c1c; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
}
.tm-delete:hover { background: #fee2e2; border-color: #f87171; }
.ach-tiers-title { font-size: 13px; font-weight: 700; color: var(--ink2); margin-bottom: 8px; }
.ach-tiers { display: grid; gap: 8px; }
.ach-tier-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; background: #fff7ed; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; color: var(--ink2); }
.ach-tier-row b { font-weight: 700; color: var(--muted); }
.ach-tier-row.reached { background: #dcfce7; color: #166534; }
.ach-tier-row.reached b { color: #166534; }
.ach-tier-row span:last-child { font-weight: 700; }


/* ============================================================
   11. ГИЛЬДИЯ (guild.php)
   ============================================================ */
.guild-layout { display: grid; grid-template-columns: 1fr minmax(300px, 30%); gap: 22px; align-items: start; }
.lead { display: flex; align-items: center; gap: 14px; padding: 13px 14px; border-radius: 15px; background: #fff; box-shadow: 0 4px 0 var(--card-sh); margin-bottom: 10px; transition: transform .15s ease, box-shadow .15s ease; }
.lead:hover { transform: translateY(-3px); box-shadow: 0 7px 0 var(--card-sh); }
.lead .rk { width: 30px; text-align: center; font-weight: 700; font-size: 16px; color: var(--muted); }
.lead-av { width: 44px; height: 44px; border-radius: 13px; background: radial-gradient(circle at 50% 35%, #fde68a, #fbbf24); display: grid; place-items: center; font-size: 24px; border: 2px solid #fff; box-shadow: 0 3px 0 var(--card-sh); }
.lead-info { flex: 1; }
.lead-info .nm { font-weight: 600; color: var(--ink); }
.lead-info .sub { font-size: 12px; color: var(--muted); }
.lead .pts { font-weight: 700; color: var(--ink2); }
.lead.you { background: linear-gradient(90deg, #fff7ed, #ffedd5); border: 2px solid var(--orange-2); }

.boss-card { text-align: center; background: linear-gradient(180deg, #fff, #fef2f2); }
.boss-emoji { font-size: 76px; margin: 6px 0; }
.boss-name { font-weight: 700; font-size: 18px; color: var(--ink2); }
.boss-hp { height: 16px; border-radius: 99px; background: #fee2e2; overflow: hidden; margin: 12px 0 6px; }
.boss-hp > i { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #dc2626); border-radius: 99px; }
.boss-meta { font-size: 13px; color: var(--muted); }
.boss-desc { font-size: 13px; color: var(--ink2); margin: 14px 0; line-height: 1.5; }
.boss-team { font-size: 22px; margin-top: 8px; }

.boss-hp > i { transition: width .5s ease; }

/* --- Вступление в гильдию (создать / по коду) --- */
.guild-join-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
.guild-card { display: flex; flex-direction: column; }
.guild-error {
    background: #fef2f2; border: 2px solid #fecaca; color: #b91c1c;
    padding: 12px 16px; border-radius: 14px; margin-bottom: 16px; font-weight: 600; font-size: 14px;
}
.guild-form { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.guild-lbl { display: block; font-size: 13px; font-weight: 700; color: var(--ink2); }
.guild-lbl .emoji-pick { margin-top: 8px; }
.guild-text-input {
    display: block; width: 100%; margin-top: 8px; box-sizing: border-box;
    border: 2px solid var(--card-sh); border-radius: 13px; padding: 12px 14px;
    font-size: 15px; color: var(--ink); background: #fffaf3; font-family: inherit; outline: none;
}
.guild-text-input.code { letter-spacing: 3px; font-weight: 700; }
.guild-text-input.code::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; font-size: 15px; }
.guild-text-input:focus { border-color: var(--orange-2); }

/* Значок гильдии: кнопка-триггер слева от поля + выпадающее меню со значками */
.guild-name-row { display: flex; gap: 10px; align-items: stretch; margin-top: 8px; }
.guild-name-row .guild-text-input { margin-top: 0; flex: 1; }
.emoji-drop { position: relative; flex: 0 0 auto; }
.emoji-drop-btn {
    width: 54px; min-height: 100%; height: 100%; border: 2px solid var(--card-sh); border-radius: 13px;
    background: #fffaf3; font-size: 24px; line-height: 1; cursor: pointer;
    transition: background .12s, border-color .12s;
}
.emoji-drop-btn:hover { border-color: #fdba74; background: #fff3e6; }
.emoji-drop-menu {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 40;
    width: 330px; max-width: 80vw; padding: 12px; background: #fff;
    border: 2px solid var(--card-sh); border-radius: 16px; box-shadow: 0 10px 26px rgba(67, 20, 7, .16);
}
.emoji-drop-menu.open { display: block; }
.guild-btn {
    margin-top: auto; align-self: flex-start; border: none; cursor: pointer; color: #fff;
    font-weight: 700; font-size: 15px; padding: 12px 26px; border-radius: 13px;
    background: linear-gradient(180deg, var(--orange-2), #ea580c); box-shadow: 0 4px 0 #c2410c;
}
.guild-btn:hover { filter: brightness(1.05); }
.guild-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #c2410c; }

/* --- Шапка гильдии (когда игрок в команде) --- */
.guild-head {
    display: flex; align-items: center; gap: 16px; margin-bottom: 22px;
    background: #fff; border-radius: 20px; padding: 16px 20px; box-shadow: 0 5px 0 var(--card-sh);
}
.guild-badge {
    width: 60px; height: 60px; border-radius: 16px; flex: 0 0 auto; font-size: 38px; line-height: 1;
    display: grid; place-items: center; background: linear-gradient(180deg, #fde68a, #fbbf24);
    border: 3px solid #fff; box-shadow: 0 4px 0 var(--card-sh);
}
.guild-head-info { flex: 1; }
.guild-title { font-size: 20px; font-weight: 700; color: var(--ink); }
.guild-sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.guild-code {
    font-family: ui-monospace, monospace; letter-spacing: 2px; color: var(--ink2);
    background: #fff7ed; border: 1px dashed var(--orange-2); border-radius: 8px; padding: 1px 8px; margin-left: 4px;
}
.guild-leave button {
    border: none; cursor: pointer; background: #fff1f2; color: #e11d48; font-weight: 700; font-size: 13px;
    padding: 9px 16px; border-radius: 11px; box-shadow: 0 3px 0 #fecdd3;
}
.guild-leave button:hover { background: #ffe4e6; }
.guild-leave button:active { transform: translateY(2px); box-shadow: 0 1px 0 #fecdd3; }

/* --- Единое окно подтверждения (в стиле приложения) --- */
.confirm-modal {
    position: fixed; inset: 0; z-index: 200; display: none;
    align-items: center; justify-content: center; padding: 20px;
    background: rgba(67, 20, 7, .45);
}
.confirm-modal.open { display: flex; }
.confirm-card {
    background: #fff; border-radius: 22px; padding: 26px 24px; width: 100%; max-width: 360px;
    text-align: center; box-shadow: 0 12px 0 var(--card-sh); animation: confirmPop .18s ease;
}
@keyframes confirmPop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm-emoji { font-size: 46px; line-height: 1; }
.confirm-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 12px 0 6px; }
.confirm-text  { font-size: 14px; color: var(--muted); line-height: 1.5; margin-bottom: 22px; }
.confirm-actions { display: flex; gap: 12px; }
.confirm-actions button { flex: 1; border: none; cursor: pointer; font-weight: 700; font-size: 15px; padding: 12px; border-radius: 14px; }
.confirm-actions button:active { transform: translateY(2px); }
.confirm-cancel { background: #fff1e6; color: var(--muted); box-shadow: 0 4px 0 var(--card-sh); }
.confirm-cancel:hover { background: #ffe6d2; }
.confirm-cancel:active { box-shadow: 0 2px 0 var(--card-sh); }
.confirm-ok { background: linear-gradient(180deg, #fb7185, #e11d48); color: #fff; box-shadow: 0 4px 0 #9f1239; }
.confirm-ok:hover { filter: brightness(1.05); }
.confirm-ok:active { box-shadow: 0 2px 0 #9f1239; }
/* Позитивное действие (покупка и т.п.) – оранжевая вместо красной */
.confirm-ok.positive { background: linear-gradient(180deg, var(--orange-2), #ea580c); box-shadow: 0 4px 0 #c2410c; }
.confirm-ok.positive:active { box-shadow: 0 2px 0 #c2410c; }

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


/* ============================================================
   12. ПОЛЗУНОК СЛОЖНОСТИ + ВЫБОР ЗНАЧКА
   ============================================================ */

/* Ползунок «сложность и важность» (1..5) */
.slider-wrap { padding: 4px 0 4px; }
/* Сам input делаем высоким и прозрачным – это «поле» для кружка, без обрезки.
   Видимую полоску рисуем отдельным треком, кружок центрируем по нему. */
.create-form input[type=range] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 32px; margin: 0;
    background: transparent; outline: none; cursor: pointer;
}
/* Полоска-трек: JS через --slider-fill задаёт заливку прогресса (пройдено/осталось) */
.create-form input[type=range]::-webkit-slider-runnable-track {
    height: 10px; border-radius: 99px;
    background: var(--slider-fill, linear-gradient(90deg, #f97316 50%, var(--track) 50%));
}
.create-form input[type=range]::-moz-range-track {
    height: 10px; border-radius: 99px;
    background: var(--slider-fill, linear-gradient(90deg, #f97316 50%, var(--track) 50%));
}
/* Кружок */
.create-form input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(180deg, #fb923c, #f97316);
    border: 3px solid #fff; box-shadow: 0 3px 0 #c2410c; cursor: pointer;
    /* реальная высота кружка = 20 + рамка 3+3 = 26px; центр по треку 10px: (10-26)/2 = -8 */
    margin-top: -8px;
}
.create-form input[type=range]::-moz-range-thumb {
    width: 20px; height: 20px; border-radius: 50%;
    background: linear-gradient(180deg, #fb923c, #f97316); border: 3px solid #fff;
    box-shadow: 0 3px 0 #c2410c; cursor: pointer;
}
.slider-ticks { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; color: var(--muted); margin-top: 6px; padding: 0; }

/* Выбор значка – ряд аккуратных кнопок (переносится, без скролла) */
.emoji-pick {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.emoji-pick .ep {
    flex: none; width: 38px; height: 38px; border: 2px solid var(--card-sh); border-radius: 10px;
    background: #fffaf3; font-size: 18px; line-height: 1; cursor: pointer;
    transform: translateY(0);
    box-shadow: 0 0 0 rgba(249, 115, 22, 0);
    /* плавный «пружинистый» подъём */
    transition: transform .2s cubic-bezier(.34, 1.56, .64, 1), box-shadow .2s ease, background .15s ease, border-color .15s ease;
}
.emoji-pick .ep:hover {
    border-color: #fdba74; background: #fff3e6;
    transform: translateY(-3px); box-shadow: 0 5px 11px rgba(249, 115, 22, .2);
}
.emoji-pick .ep:active { transform: translateY(-2px); }
.emoji-pick .ep.on { border-color: var(--orange); background: #ffe8cf; }

/* Обёртка форм создания – аккуратная ширина, по центру */
.create-zone { max-width: 680px; margin: 26px auto 0; }
.create-zone .create-fab { margin-top: 0; }

/* Оранжевая рамка при фокусе – на всех полях, любая страница */
input[type=text]:focus,
input[type=number]:focus,
input[type=email]:focus,
input[type=password]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--orange);
}

/* Галочка на выполненном узле цели */
.node-check {
    position: absolute; bottom: -4px; right: -4px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #16a34a; color: #fff; font-size: 11px; font-weight: 700;
    display: grid; place-items: center; border: 2px solid #fff;
}

/* Выход из аккаунта – внизу настроек */
.logout-settings {
    display: block; text-align: center; margin-top: 16px;
    font-size: 14px; font-weight: 600; color: #b91c1c; text-decoration: none;
}
.logout-settings:hover { text-decoration: underline; }


/* ============================================================
   13. ИНСТРУКЦИЯ (модальное окно по клику на лису)
   ============================================================ */
.help-modal {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(67, 20, 7, .45);
    display: none; place-items: center; padding: 20px; overflow: auto;
}
.help-modal.open { display: grid; animation: helpFade .2s ease; }
@keyframes helpFade { from { opacity: 0; } to { opacity: 1; } }

.help-card {
    position: relative; width: 100%; max-width: 520px;
    background: #fff; border-radius: 24px; padding: 30px 30px 26px;
    box-shadow: 0 10px 0 var(--card-sh); animation: helpPop .25s ease;
    max-height: calc(100vh - 40px); overflow-y: auto;   /* инструкция + настройки – со скроллом */
}
/* Блок настроек в модалке (под инструкцией) */
.help-settings { border-top: 2px solid var(--card-sh); margin-top: 20px; padding-top: 18px; }
.help-settings h3 { font-size: 16px; color: var(--ink2); margin-bottom: 12px; }
@keyframes helpPop { from { transform: translateY(14px) scale(.98); } to { transform: none; } }
.help-close {
    position: absolute; top: 16px; right: 16px;
    width: 34px; height: 34px; border: none; border-radius: 10px;
    background: #fff7ed; color: var(--ink2); font-weight: 700; font-size: 16px; cursor: pointer;
}
.help-card h2 { font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.help-lead { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.help-list { list-style: none; display: grid; gap: 12px; margin-bottom: 18px; }
.help-list li { font-size: 14px; color: var(--ink); line-height: 1.45; padding-left: 4px; }
.help-list b { color: var(--ink2); }
.help-cur { display: grid; gap: 8px; background: #fff7ed; border-radius: 14px; padding: 14px 16px; font-size: 13px; color: var(--ink2); }
.help-cur b { color: var(--muted); }


.skill-map-container {
    display: flex;
    
}
/* ============================================================
   3D-квартира (вкладка «Квартира» на hero.php)
   ============================================================ */
.flat3d { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.flat3d-view { flex: 1; min-width: 300px; height: 460px; border-radius: 14px; overflow: hidden; background: #232830; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.flat3d-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* --- Гараж: просмотр модели + прокачка --- */
.car-garage { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; }
.car3d-view { flex: 1; min-width: 300px; height: auto; min-height: 400px; border-radius: 14px; overflow: hidden; position: relative;
    background: radial-gradient(120% 100% at 50% 0%, #fffdf9, #ffedd5); box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.car3d-view canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.car3d-err { position: absolute; inset: auto 12px 12px; color: #b91c1c; background: #fff; border: 2px solid #fecaca;
    border-radius: 10px; padding: 8px 12px; font-size: 12px; font-weight: 600; }
.car3d-loading { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: var(--muted); font-weight: 700; font-size: 13px; background: rgba(255,247,235,.45); backdrop-filter: blur(1px); }
.car3d-loading .c3l-spin { width: 34px; height: 34px; border-radius: 50%; border: 4px solid #fde4cf;
    border-top-color: var(--orange); animation: c3lspin .8s linear infinite; }
@keyframes c3lspin { to { transform: rotate(360deg); } }
.car-panel { width: 232px; display: flex; flex-direction: column; gap: 8px;
    background: #fffaf3; border: 1px solid var(--card-sh); border-radius: 14px; padding: 16px; }
.car-lvl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.car-name { font-size: 20px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.car-dots { display: flex; gap: 6px; margin: 4px 0 10px; }
.car-dots .cud { width: 100%; height: 8px; border-radius: 99px; background: #fde4cf; }
.car-dots .cud.on { background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.car-panel form { margin: 0; margin-top: auto; }   /* к низу карточки уходит только кнопка */
.car-next { font-size: 13px; color: var(--ink2); margin-bottom: 4px; }
.char-hat-cur { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: #fff7ed; border: 1px solid #fdba74; font-size: 13px; font-weight: 600; color: var(--ink2); }

/* Слоты экипировки – кликабельны (открывают выбор предмета) */
button.eslot { cursor: pointer; font-family: inherit; padding: 0; transition: transform .1s ease, border-color .15s ease; }
button.eslot:hover { border-color: var(--orange); transform: translateY(-2px); }

/* Кнопка выбора героя-животного */
.char-hero { display: flex; align-items: center; gap: 10px; width: 100%; cursor: pointer; font-family: inherit;
    background: #fff7ed; border: 2px solid #fdba74; border-radius: 14px; padding: 8px 12px; text-align: left; transition: border-color .15s ease, transform .1s ease; }
.char-hero:hover { border-color: var(--orange); transform: translateY(-1px); }
.char-hero .ch-em { font-size: 28px; line-height: 1; }
.char-hero .ch-nm { font-size: 15px; font-weight: 700; color: var(--ink); flex: 1; }
.char-hero .ch-ar { font-size: 14px; color: var(--muted); }

/* В попапе экипировки под эмодзи – название предмета (может переноситься) */
.pick-card .ei-nm { white-space: normal; line-height: 1.15; }

/* Всплывающее меню выбора предмета категории */
.pick-modal { position: fixed; inset: 0; z-index: 100; background: rgba(67,20,7,.45); display: none; place-items: center; padding: 20px; overflow: auto; }
.pick-modal.open { display: grid; animation: helpFade .2s ease; }
.pick-card { position: relative; width: 100%; max-width: 440px; background: #fff; border-radius: 22px; padding: 26px 24px; box-shadow: 0 10px 0 var(--card-sh); animation: helpPop .25s ease; }
.pick-title { font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 30px 16px 0; }
.pick-empty { grid-column: 1 / -1; text-align: center; color: var(--muted); font-size: 14px; padding: 24px 0; }
#pickUnequip { margin: 14px 0 0; }
.pick-unequip { width: 100%; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 14px;
    padding: 11px; border-radius: 12px; border: 2px solid #fecaca; background: #fef2f2; color: #b91c1c; }
.pick-unequip:hover { background: #fee2e2; border-color: #fca5a5; }

/* Выбор героя – компактные тайлы как эмодзи-пикер (клик = выбор, без кнопки) */
.hero-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; }
.hero-tile-form { margin: 0; }
.hero-tile { position: relative; width: 100%; cursor: pointer; font-family: inherit;
    background: #fff7ed; border: 2px solid #fed7aa; border-radius: 12px; padding: 8px 4px;
    display: flex; flex-direction: column; align-items: center; gap: 3px; transition: border-color .12s, transform .1s; }
.hero-tile:hover { border-color: var(--orange); transform: translateY(-2px); }
.hero-tile.on { border-color: var(--green); background: #dcfce7; }
.hero-tile .ht-em { font-size: 30px; line-height: 1; }
.hero-tile .ht-nm { font-size: 10px; font-weight: 600; color: var(--muted); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-tile.on .ht-nm { color: #16a34a; }
.hero-tile .ht-act { position: absolute; top: 3px; right: 5px; font-size: 11px; font-weight: 700; color: #16a34a; }

/* ===== Магазин: кейсы, редкость, коллекция, ревил ===== */
.case-note { border-radius: 14px; padding: 12px 16px; font-weight: 600; margin: 0 0 14px; }
.case-note.err { background: #fef2f2; color: #b91c1c; border: 2px solid #fecaca; }

.rar-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 10px 0 4px; }
.rar-legend .rl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink2); }
.rar-legend .rl i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }

/* Кейсы – плитки как «Реальные награды»: 2 в столбик, дальше вправо (горизонтальная прокрутка) */
.case-grid { display: grid; grid-auto-flow: column; grid-template-rows: max-content max-content; align-items: start; grid-auto-columns: minmax(160px, 200px);
    gap: 12px; margin-top: 2px; overflow-x: auto; padding-top: 6px; padding-bottom: 8px; }   /* padding-top – место под подъём карточки при наведении (overflow-x обрезает верх) */
.util-grid { grid-auto-columns: minmax(160px, 200px); }
/* Тёплые плитки кейсов – в точности как «Реальные награды» */
.case-card { align-self: start; background: #fff7ed; border: 2px solid #fde4cf; border-radius: 14px; padding: 11px; text-align: center; box-shadow: none; display: flex; flex-direction: column; align-items: center; gap: 7px; transition: transform .12s, border-color .15s; }
.case-card:hover { transform: translateY(-3px); border-color: #fdba74; }
/* Янтарная «сцена» под иконкой (как .item .pic у наград) */
.case-stage { width: 100%; height: 62px; border-radius: 11px; display: grid; place-items: center;
    background: linear-gradient(160deg, #fef3c7, #fde68a); }
.cs-big { font-size: 32px; line-height: 1; filter: drop-shadow(0 3px 3px rgba(90,60,10,.16)); }
/* Иконка кейса: деревянный ящик/сундук (--cc заливка, --cb обводка) + значок «что внутри» */
.case-icon { position: relative; width: 54px; height: 44px; margin: 1px auto 2px; }
.case-icon .ci-body { position: absolute; left: 4px; right: 4px; bottom: 0; height: 28px; border-radius: 6px; background: var(--cc); border: 2px solid var(--cb); box-shadow: inset 0 -6px 0 rgba(0,0,0,.13); }
.case-icon .ci-lid { position: absolute; left: 0; right: 0; top: 3px; height: 16px; border-radius: 6px; background: var(--cc); border: 2px solid var(--cb); box-shadow: inset 0 4px 0 rgba(255,255,255,.4); z-index: 2; }
.case-icon .ci-lock { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 10px; height: 12px; border-radius: 3px; background: #f7d97a; border: 2px solid var(--cb); z-index: 3; }
.case-icon .ci-peek { position: absolute; right: -5px; bottom: -5px; width: 23px; height: 23px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 14px; box-shadow: 0 2px 4px rgba(0,0,0,.22); z-index: 4; }
.case-icon.chest .ci-lid { border-radius: 8px 8px 3px 3px; height: 18px; top: 2px; }
.case-icon.chest .ci-body { box-shadow: inset 0 -6px 0 rgba(0,0,0,.13), inset 0 0 0 2px rgba(255,255,255,.12); }
.case-name { font-size: 12.5px; font-weight: 700; color: var(--ink); min-height: 30px; line-height: 1.2; }
.util-note { font-size: 10px; color: var(--muted); font-weight: 600; }
.odds-bar { display: flex; width: 100%; height: 5px; border-radius: 99px; overflow: hidden; background: #fdead3; }
.odds-bar span { display: block; }
.case-card form { margin: 0; width: 100%; }
/* Кнопка – прежняя оранжевая, но плоская и того же размера, что у «Реальных наград» */
.case-open { width: 100%; border: none; cursor: pointer; padding: 7px; border-radius: 9px; font-family: inherit; font-weight: 700; font-size: 12px; color: #fff; background: linear-gradient(90deg, var(--orange), var(--orange-2)); }
.case-open:hover { filter: brightness(1.05); }
.case-open:active { filter: brightness(0.96); }
.case-open.cant { background: #f1f1f1; color: #9ca3af; cursor: not-allowed; }

.col-cat { margin-top: 16px; }
.col-cat-h { font-size: 14px; font-weight: 700; color: var(--ink2); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.col-cnt { font-size: 12px; font-weight: 700; color: var(--muted); background: #f1f1f1; border-radius: 99px; padding: 1px 9px; }
.col-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.col-item { background: #fff; border: 2px solid var(--rc); border-radius: 14px; padding: 10px 6px; text-align: center; box-shadow: 0 3px 0 var(--card-sh); }
.col-item .ci-pic { font-size: 30px; position: relative; line-height: 1.1; }
.col-item .ci-lock { position: absolute; inset: 0; display: grid; place-items: center; font-size: 20px; }
.col-item .ci-nm { font-size: 11px; font-weight: 600; color: var(--ink2); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.col-item .ci-rar { font-size: 10px; font-weight: 700; margin-top: 2px; }
.col-item.locked { border-color: #e5e7eb; background: #fafafa; box-shadow: 0 3px 0 #eee; }
.col-item.locked .ci-pic { filter: grayscale(1); opacity: .38; }

/* Ревил выпавшего предмета */
.reveal-modal { position: fixed; inset: 0; z-index: 120; background: rgba(20,12,6,.62); display: none; place-items: center; padding: 20px; }
.reveal-modal.open { display: grid; animation: helpFade .2s ease; }
.reveal-card { position: relative; overflow: hidden; width: 100%; max-width: 320px; text-align: center; background: #fff; border-radius: 24px; padding: 28px 24px; box-shadow: 0 12px 0 var(--card-sh), 0 0 0 3px var(--rc) inset; animation: revealPop .35s cubic-bezier(.2,1.3,.5,1); }
.reveal-burst { position: absolute; top: -40%; left: 50%; width: 260px; height: 260px; transform: translateX(-50%); background: radial-gradient(circle, var(--rc) 0%, transparent 62%); opacity: .28; }
.reveal-lab { position: relative; font-size: 13px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.reveal-emoji { position: relative; font-size: 88px; line-height: 1; margin: 6px 0 4px; filter: drop-shadow(0 6px 6px rgba(0,0,0,.18)); animation: revealSpin .6s ease; }
.reveal-name { position: relative; font-size: 20px; font-weight: 800; color: var(--ink); }
.reveal-dupe { position: relative; margin-top: 8px; font-weight: 700; color: #b45309; }
.reveal-new { position: relative; margin-top: 8px; font-weight: 700; color: #16a34a; }
.reveal-ok { position: relative; margin-top: 18px; border: none; cursor: pointer; padding: 12px 26px; border-radius: 14px; font-family: inherit; font-weight: 800; font-size: 15px; color: #fff; background: linear-gradient(90deg, var(--orange), var(--orange-2)); box-shadow: 0 5px 0 #c2410c; }
.reveal-ok:active { transform: translateY(2px); box-shadow: 0 3px 0 #c2410c; }
@keyframes revealPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes revealSpin { 0% { transform: rotate(-16deg) scale(.4); } 100% { transform: rotate(0) scale(1); } }
.car-up-btn { border: none; cursor: pointer; width: 100%; padding: 13px; border-radius: 12px; font-family: inherit;
    font-weight: 700; font-size: 15px; color: #fff; background: linear-gradient(180deg, var(--orange-2), #ea580c);
    box-shadow: 0 4px 0 #c2410c; }
.car-up-btn:hover { filter: brightness(1.05); }
.car-up-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #c2410c; }
.car-up-btn.cant { background: #f1f1f1; color: #9ca3af; box-shadow: 0 4px 0 #e5e7eb; cursor: not-allowed; }
.car-max { margin-top: auto; padding: 12px; border-radius: 12px; text-align: center; font-weight: 700; color: #a16207;
    background: #fef08a; }
@media (max-width: 760px) { .car-panel { width: 100%; } .car3d-view { width: 100%; flex: none; height: 360px; } }
.flat3d-panel { width: 232px; display: flex; flex-direction: column; gap: 12px; }
.f3-block { background: #fffaf3; border: 1px solid var(--card-sh); border-radius: 12px; padding: 10px; }
.f3-title { font-size: 12.5px; font-weight: 700; color: var(--ink2); margin-bottom: 8px; }
.f3-sel { font-weight: 400; color: var(--muted); }
.f3-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.f3-item { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #fff; border: 1px solid var(--card-sh); border-radius: 9px; padding: 7px 3px; font-size: 10.5px; color: var(--ink2); cursor: pointer; transition: transform .1s, border-color .12s; }
.f3-item:hover { border-color: var(--amber); transform: translateY(-1px); }
.f3-ico { width: 100%; height: 26px; display: flex; align-items: center; justify-content: center; }
.f3-ico svg { width: 34px; height: 24px; }
.f3-sw-row { display: flex; flex-wrap: nowrap; gap: 4px; }
.f3-sw { flex: 1; height: 22px; min-width: 0; border-radius: 6px; border: 2px solid transparent; cursor: pointer; padding: 0; }
.f3-sw:hover { border-color: var(--ink); }
.f3-row { display: flex; gap: 6px; }
.f3-btn { flex: 1; background: #fff; border: 1px solid var(--card-sh); border-radius: 9px; padding: 7px 6px; font-size: 12px; color: var(--ink2); cursor: pointer; }
.f3-btn:hover { background: #fff3e6; }
.f3-btn.on { background: #dcfce7; border-color: var(--green); color: #166534; font-weight: 700; }
.f3-primary { background: var(--amber); border-color: #d98a09; color: #fff; font-weight: 700; }
.f3-primary:hover { background: #e8920a; }
.f3-danger { color: #b4453a; }
.f3-danger:hover { background: #fbeae7; }
.f3-status { font-size: 12px; color: #2f9a4a; min-height: 16px; text-align: center; }
.f3-range { flex: 1; min-width: 0; accent-color: var(--amber); cursor: pointer; }
.f3-check { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink2); cursor: pointer; }
.f3-check input { accent-color: var(--amber); width: 15px; height: 15px; cursor: pointer; }
.f3-item.f3-wall { border-style: dashed; }
/* Кнопка добавления мебели */
.f3-add { width: 100%; background: var(--amber); color: #fff; font-weight: 700; border: none; border-radius: 11px; padding: 11px; font-size: 13.5px; cursor: pointer; box-shadow: 0 3px 0 #d98a09; }
.f3-add:hover { background: #e8920a; }
.f3-add:active { transform: translateY(1px); box-shadow: 0 2px 0 #d98a09; }
/* Модалка каталога */
.f3-modal { position: fixed; inset: 0; background: rgba(30,20,12,.5); display: none; align-items: center; justify-content: center; z-index: 2000; padding: 16px; }
.f3-modal.open { display: flex; }
.f3-modal-card { background: #fff; border-radius: 20px; padding: 18px; width: min(560px, 94vw); max-height: 82vh; overflow-y: auto; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
.f3-modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.f3-modal-head h3 { font-size: 17px; color: var(--ink2); }
.f3-modal-close { background: #f4efe4; border: none; border-radius: 9px; width: 32px; height: 32px; font-size: 15px; cursor: pointer; color: var(--ink2); }
.f3-modal-close:hover { background: #ece5d6; }
.f3-modal-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 560px) { .f3-modal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .flat3d-panel { width: 100%; } .flat3d-view { width: 100%; flex: none; height: 360px; } }