/* ============================================================
   ОФОРМЛЕНИЕ ИГРЫ

   Здесь можно менять цвета, скругления и шрифт, не трогая
   остальную программу. Меняете значение справа от двоеточия,
   сохраняете файл, обновляете игру — и видите результат.

   Если что-то сломается внешне, игра продолжит работать:
   этот файл отвечает только за внешний вид.

   Цвета пишутся так:  #b2ea03
   Размеры так:        18px
   ============================================================ */

:root {

  /* ---------- ПРИВЕТСТВЕННЫЙ ЭКРАН (первый заход) ---------- */

  --wel-bg:            #b2ea03;   /* фон всего экрана */
  --wel-title:         #031225;   /* заголовок «Придумай никнейм» */
  --wel-sub:           #46660a;   /* подпись под заголовком */

  --wel-field-bg:      #83ab07;   /* плашка ввода имени */
  --wel-field-text:    #ffffff;   /* то, что человек печатает */
  --wel-field-hint:    #739800;   /* серая подсказка «Ваше имя» */

  --wel-btn-bg:        #739800;   /* кнопка «Продолжить» */
  --wel-btn-text:      #ffffff;   /* текст на кнопке */
  --wel-btn-off:       #8fb61f;   /* кнопка, пока имя не введено */

  --wel-error:         #8E1D0F;   /* надпись об ошибке, например «имя занято» */

  --wel-eye-white:     #ffffff;   /* белки глаз крокодила */
  --wel-eye-dark:      #031225;   /* зрачки, брови, ноздри */
  --wel-tuft:          #fbf6e4;   /* хохолок на макушке */


  /* ---------- ГЛАВНОЕ МЕНЮ: СВЕТЛАЯ ТЕМА ---------- */

  --menu-bg:           #ffffff;   /* фон под шапкой */
  --menu-header:       #5ccc02;   /* шапка со скруглённым низом */
  --menu-logo:         #ffffff;   /* надпись «croco» */
  --menu-name:         #ffffff;   /* имя игрока */
  --menu-sub:          #d9f2cb;   /* «Место в рейтинге» */

  --menu-icon-bg:      #4cb302;   /* кружки значков в шапке */
  --menu-icon:         #ffffff;   /* сами значки */
  --menu-dot:          #ff4b4b;   /* точка новых жалоб */

  --tile-1:            #5ccc02;   /* Быстрая игра */
  --tile-1-edge:       #46a302;
  --tile-2:            #1cb0f6;   /* Создать лобби */
  --tile-2-edge:       #138cc4;
  --tile-3:            #a573f1;   /* Войти в лобби */
  --tile-3-edge:       #8055c9;
  --tile-4:            #ffc832;   /* Список лобби */
  --tile-4-edge:       #daa31d;
  --tile-icon:         #ffffff;   /* значки на плитках */
  --tile-text:         #ffffff;   /* подписи на плитках */

  /* ---------- ЭКРАН СОЗДАНИЯ ЛОББИ ---------- */

  --page-bg:           #ffffff;   /* фон экрана */
  --page-head:         #5ccc02;   /* шапка со стрелкой назад */
  --page-head-text:    #ffffff;
  --page-label:        #3c3c3c;   /* подписи разделов */
  --page-hint:         #8a8a8a;   /* пояснения мелким шрифтом */

  --seg-bg:            #ede7d4;   /* подложка переключателя */
  --seg-on:            #5ccc02;   /* выбранная часть */
  --seg-on-edge:       #46a302;   /* её объёмный край */
  --seg-on-text:       #ffffff;
  --seg-off-text:      #8a8a8a;

  --badge-bg:          #5ccc02;   /* пилюля с числом игроков */
  --badge-text:        #ffffff;
  --track-bg:          #ede7d4;   /* дорожка ползунка */
  --track-on:          #5ccc02;   /* заполненная часть */
  --knob:              #ffffff;   /* ручка ползунка */
  --knob-edge:         #cfc8b4;

  --cta:               #5ccc02;   /* главная кнопка */
  --cta-edge:          #46a302;
  --cta-text:          #ffffff;

  /* ---------- ЛОББИ И ИГРА: СВЕТЛАЯ ТЕМА ---------- */

  --game-bg:           #ffffff;   /* фон экрана игры */
  --surface-1:         #f4f7ef;   /* карточки, поле ввода, подсказки */
  --surface-2:         #d6e4c6;   /* закрытые буквы слова */

  --game-head:         #5ccc02;   /* шапка */
  --game-head-btn:     #4cb302;   /* плашка раунда и кружок выхода */
  --game-head-text:    #ffffff;
  --game-head-soft:    #e4f6d2;   /* число игроков */
  --exit-icon:         #ffe0dd;   /* значок выхода */

  --timer-track:       #4cb302;   /* дорожка времени */
  --timer-line:        #ffffff;   /* оставшееся время */
  --timer-warn:        #ffc832;   /* осталось меньше 30 секунд */
  --timer-danger:      #ff5a4e;   /* осталось меньше 10 секунд */

  --word-color:        #3d9e02;   /* загаданное слово у ведущего */
  --host-card:         #eef8e2;   /* карточка ведущего */
  --host-label:        #3f7f0a;
  --host-hint:         #5c7a33;

  --tile-open:         #5ccc02;   /* открытая буква */
  --tile-open-text:    #ffffff;
  --hint-label:        #3f7f0a;   /* подпись «Подсказки ведущего» */

  --chat-gap:          14px;      /* отступ между сообщениями */
  --chat-text:         #2b2b2b;   /* реплики игроков */
  --chat-sys:          #6e6a5e;   /* системные сообщения */
  --ava-text:          #ffffff;

  --good:              #1fa971;   /* правильный ответ */
  --good-soft:         #e3f6ec;
  --good-text:         #137a50;

  --input-bg:          #f4f7ef;   /* поле ввода */
  --input-hint:        #6e6a5e;
  --send-bg:           #5ccc02;   /* кнопка отправки */
  --send-icon:         #ffffff;

  --start-off:         #ede7d4;   /* кнопка старта, пока людей мало */
  --share-face:        #ffffff;   /* плашка «Поделиться» в карточке кода */
  --share-edge:        #dfe6d3;
  --start-off-text:    #a79f8a;
  --empty-link:        #3d9e02;   /* ссылка под кнопкой в пустом списке */
  --empty-face-ink:    #b9bab7;   /* глаза и рот на грустном лице */
  --onb-bright:        #4a9e02;   /* главная фигура в обучении */
  --onb-muted:         #cfd8c4;   /* второстепенные фигуры */
  --onb-mark:          #9aa48f;   /* вопросительные знаки */
  --cel-win:           #2f9e46;   /* фон празднования: слово угадано */
  --cel-miss:          #6e6a5e;   /* время вышло */
  --cel-leak:          #b8402f;   /* ведущий назвал слово */

  /* ---------- ОБЩИЕ ЭЛЕМЕНТЫ ---------- */

  --sheet:             #ffffff;   /* шторки поверх экрана */
  --sheet-grab:        #dde3d5;   /* полоска-ручка вверху шторки */
  --search-bg:         #f1f4eb;   /* поле поиска в шторке */
  --role-card:         #f5f7f0;   /* карточка роли */
  --role-tile:         #f9f0db;   /* плитка с короной */
  --role-crown:        #c78d30;
  --role-card-off:     #f2f2ee;   /* роль недоступна */
  --role-tile-off:     #eaeae6;
  --role-crown-off:    #b4b4ad;
  --pattern-light:     #7be01a;   /* узор в шапке профиля */
  --pattern-dark:      #4cb302;
  --podium-top:        #41a002;   /* ступень первого места */
  --medal-1:           #e8b33a;   /* золото */
  --medal-2:           #a8afb8;   /* серебро */
  --medal-3:           #c08050;   /* бронза */
  --badge-admin:       #3d9e02;   /* плашка администратора */
  --badge-moder:       #d18a00;   /* плашка модератора */
  --danger:            #c2311f;   /* исключение */
  --danger-bg:         #fbe3df;
  --danger-edge:       #96261a;
  --warn:              #b07500;   /* заглушение */
  --warn-bg:           #fbf3e2;
  --warn-edge:         #9c6800;
  --observe:           #6b4fd0;   /* наблюдение по жалобе */
  --observe-bg:        #ede7fb;
  --quote:             #f0f4ea;   /* цитаты сообщений */
  --medal-1:           #e8b33a;   /* золото */
  --medal-2:           #a8afb8;   /* серебро */
  --medal-3:           #c08050;   /* бронза */

  /* ---------- КОНФЕТТИ ЗА ПРАВИЛЬНЫЙ ОТВЕТ ---------- */

  /* Цвета кусочков. Можно писать сколько угодно через запятую. */
  --confetti: #5ccc02, #1cb0f6, #a573f1, #ffc832, #ff6b6b, #2ec4b6;

  /* ---------- ОСНОВНЫЕ ЦВЕТА ИГРЫ ---------- */

  --violet:            #5B4BE8;   /* главный цвет: кнопки, выделения */
  --green:             #1FA971;   /* правильный ответ, подтверждения */
  --amber:             #F0A020;   /* предупреждения, муты */
  --red:               #E2574C;   /* ошибки, исключения */


  /* ---------- ФОРМА ---------- */

  --radius:            14px;      /* скругление кнопок и карточек */
  --tile-radius:       26px;      /* скругление больших плиток меню */
  --wel-radius:        18px;      /* скругление на приветственном экране */


  /* ---------- ШРИФТ ---------- */

  /* Оставьте как есть, чтобы использовался шрифт телефона.
     Можно вписать другой, если он установлен на устройстве. */
  --font:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

}


/* ============================================================
   ТЁМНАЯ ТЕМА ГЛАВНОГО МЕНЮ

   Те же настройки, но для тёмного оформления. Применяются,
   когда человек выбрал тёмную тему или она включена в Telegram.
   ============================================================ */

html[data-theme="dark"] {
  --menu-header:       #5b3fd1;
  --menu-logo:         #ffffff;
  --menu-name:         #ffffff;
  --menu-sub:          #c9bdf2;

  --menu-icon-bg:      #4a31b0;
  --menu-icon:         #ffffff;
  --menu-dot:          #ff6b6b;

  --tile-1:            #7c5ce0;  --tile-1-edge:  #5b41a8;
  --tile-2:            #4c7fe0;  --tile-2-edge:  #375da8;
  --tile-3:            #9a5cc4;  --tile-3-edge:  #713f92;
  --tile-4:            #c08a3e;  --tile-4-edge:  #8f672c;
  --tile-icon:         #ffffff;
  --tile-text:         #ffffff;

  --page-bg:           #120e26;
  --page-head:         #5b3fd1;
  --page-label:        #f3f0fc;
  --page-hint:         #a79bd1;

  --seg-bg:            #1e1840;
  --seg-on:            #7c5ce0;
  --seg-on-edge:       #5b41a8;
  --seg-off-text:      #a79bd1;

  --badge-bg:          #7c5ce0;
  --track-bg:          #1e1840;
  --track-on:          #7c5ce0;
  --knob-edge:         #4a3e7a;

  --cta:               #7c5ce0;
  --cta-edge:          #5b41a8;

  /* Три уровня поверхности: фон, карточки, приподнятое */
  --game-bg:           #120e26;
  --menu-bg:           #120e26;
  --page-bg:           #120e26;
  --surface-1:         #1e1840;
  --surface-2:         #332c66;

  --sheet:             #1e1840;
  --sheet-grab:        #392f6c;
  --search-bg:         #292353;
  --role-card:         #292353;
  --role-tile:         #322a1a;
  --role-crown:        #dea75a;
  --role-card-off:     #231f42;
  --role-tile-off:     #292347;
  --role-crown-off:    #59547d;
  --pattern-light:     #6e4fe0;
  --pattern-dark:      #4a31b0;
  --podium-top:        #3f2899;
  --badge-admin:       #3d9e02;
  --badge-moder:       #d18a00;
  --danger:            #c2311f;
  --danger-bg:         #331e1c;
  --danger-edge:       #8e2415;
  --warn:              #c77f1e;
  --warn-bg:           #2c2415;
  --warn-edge:         #966014;
  --observe:           #a98cf7;
  --observe-bg:        #2a2356;
  --quote:             #2a2356;

  --game-head:         #5b3fd1;
  --game-head-btn:     #4a31b0;
  --game-head-soft:    #9e8fd6;
  --exit-icon:         #ffb3ae;

  --timer-track:       #4a31b0;
  --timer-line:        #ffffff;
  --timer-warn:        #ffc832;
  --timer-danger:      #ff5a4e;

  --word-color:        #ffffff;
  --host-card:         #241d4e;
  --host-label:        #a98cf7;
  --host-hint:         #a79bd1;

  --tile-open:         #7c5ce0;
  --tile-open-text:    #ffffff;
  --hint-label:        #a98cf7;

  --chat-text:         #f3f0fc;
  --chat-sys:          #a79bd1;

  --good:              #35c77b;
  --good-soft:         #1b3d2e;
  --good-text:         #35c77b;

  --input-bg:          #1e1840;
  --input-hint:        #a79bd1;
  --send-bg:           #7c5ce0;

  --start-off:         #231d4b;
  --share-face:        #292353;
  --share-edge:        #191534;
  --start-off-text:    #6e6390;
  --empty-link:        #a48df0;
  --empty-face-ink:    #6c638d;
  --onb-bright:        #a98cf7;
  --onb-muted:         #453c7e;
  --onb-mark:          #5c4f94;
  --cel-win:           #1f7a3a;
  --cel-miss:          #4a4258;
  --cel-leak:          #8a2f26;

  --confetti:          #7c5ce0, #4c7fe0, #c08ae8, #e8a44a, #ff6b6b, #3fc9b0;
}

@media (prefers-color-scheme: dark) {
  /* Собрано из тёмной темы */
  html:not([data-theme="light"]) {
  --menu-header:       #5b3fd1;
  --menu-logo:         #ffffff;
  --menu-name:         #ffffff;
  --menu-sub:          #c9bdf2;

  --menu-icon-bg:      #4a31b0;
  --menu-icon:         #ffffff;
  --menu-dot:          #ff6b6b;

  --tile-1:            #7c5ce0;  --tile-1-edge:  #5b41a8;
  --tile-2:            #4c7fe0;  --tile-2-edge:  #375da8;
  --tile-3:            #9a5cc4;  --tile-3-edge:  #713f92;
  --tile-4:            #c08a3e;  --tile-4-edge:  #8f672c;
  --tile-icon:         #ffffff;
  --tile-text:         #ffffff;

  --page-bg:           #120e26;
  --page-head:         #5b3fd1;
  --page-label:        #f3f0fc;
  --page-hint:         #a79bd1;

  --seg-bg:            #1e1840;
  --seg-on:            #7c5ce0;
  --seg-on-edge:       #5b41a8;
  --seg-off-text:      #a79bd1;

  --badge-bg:          #7c5ce0;
  --track-bg:          #1e1840;
  --track-on:          #7c5ce0;
  --knob-edge:         #4a3e7a;

  --cta:               #7c5ce0;
  --cta-edge:          #5b41a8;

  /* Три уровня поверхности: фон, карточки, приподнятое */
  --game-bg:           #120e26;
  --menu-bg:           #120e26;
  --page-bg:           #120e26;
  --surface-1:         #1e1840;
  --surface-2:         #332c66;

  --sheet:             #1e1840;
  --sheet-grab:        #392f6c;
  --search-bg:         #292353;
  --role-card:         #292353;
  --role-tile:         #322a1a;
  --role-crown:        #dea75a;
  --role-card-off:     #231f42;
  --role-tile-off:     #292347;
  --role-crown-off:    #59547d;
  --pattern-light:     #6e4fe0;
  --pattern-dark:      #4a31b0;
  --podium-top:        #3f2899;
  --badge-admin:       #3d9e02;
  --badge-moder:       #d18a00;
  --danger:            #c2311f;
  --danger-bg:         #331e1c;
  --danger-edge:       #8e2415;
  --warn:              #c77f1e;
  --warn-bg:           #2c2415;
  --warn-edge:         #966014;
  --observe:           #a98cf7;
  --observe-bg:        #2a2356;
  --quote:             #2a2356;

  --game-head:         #5b3fd1;
  --game-head-btn:     #4a31b0;
  --game-head-soft:    #9e8fd6;
  --exit-icon:         #ffb3ae;

  --timer-track:       #4a31b0;
  --timer-line:        #ffffff;
  --timer-warn:        #ffc832;
  --timer-danger:      #ff5a4e;

  --word-color:        #ffffff;
  --host-card:         #241d4e;
  --host-label:        #a98cf7;
  --host-hint:         #a79bd1;

  --tile-open:         #7c5ce0;
  --tile-open-text:    #ffffff;
  --hint-label:        #a98cf7;

  --chat-text:         #f3f0fc;
  --chat-sys:          #a79bd1;

  --good:              #35c77b;
  --good-soft:         #1b3d2e;
  --good-text:         #35c77b;

  --input-bg:          #1e1840;
  --input-hint:        #a79bd1;
  --send-bg:           #7c5ce0;

  --start-off:         #231d4b;
  --share-face:        #292353;
  --share-edge:        #191534;
  --start-off-text:    #6e6390;
  --empty-link:        #a48df0;
  --empty-face-ink:    #6c638d;
  --onb-bright:        #a98cf7;
  --onb-muted:         #453c7e;
  --onb-mark:          #5c4f94;
  --cel-win:           #1f7a3a;
  --cel-miss:          #4a4258;
  --cel-leak:          #8a2f26;

  --confetti:          #7c5ce0, #4c7fe0, #c08ae8, #e8a44a, #ff6b6b, #3fc9b0;
}
}