/* ================================================
   BUKTOPUHA - Классическая IRC викторина
   Стили интерфейса mIRC
   ================================================ */

/* Импорт настоящего шрифта Fixedsys Excelsior (локально) */
@font-face {
  font-family: 'Fixedsys Excelsior';
  src: url('fonts/fixedsys/FSEX300.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  height: 100%;
  overflow: hidden;
  position: fixed;
  width: 100%;
  /* Safari iOS фикс */
  height: 100%;
  height: -webkit-fill-available;
}

/* Основной шрифт - настоящий Fixedsys! */
body {
  font-family: 'Fixedsys Excelsior', 'Fixedsys', 'Consolas', 'Courier New', monospace;
  /* Windows XP Bliss background */
  background: linear-gradient(to bottom, #5a9fd4 0%, #7db9e8 50%, #b5e3ff 100%);
  overflow: hidden;
  font-size: 16px;
  position: fixed;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* iOS Safari фикс */
  -webkit-overflow-scrolling: touch;
}

/* ================================================
   Окно приложения с рамкой как в Windows XP
   ================================================ */

.win {
  width: 85vw;
  height: 90vh;
  background: #fff;
  display: flex;
  flex-direction: column;
  /* Рамка окна Windows XP */
  /*border: 3px solid #0055ea;*/
  /*border-top: 4px solid #0055ea;*/
  /*border-radius: 8px 8px 0 0;*/
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.3);
  position: relative;
  overflow: hidden;

  border: 3px solid #c0c0c0;
}

/* iOS Safari height fix */
@supports (-webkit-touch-callout: none) {
  .win { height: -webkit-fill-available; }
}

/* ================================================
   Title bar - заголовок окна mIRC с рамкой XP
   ================================================ */

.title {
  /*background: linear-gradient(to bottom, #0a246a 0%, #3a6ea5 8%, #3a6ea5 92%, #0a246a 100%);*/
  background: linear-gradient(to bottom, #0a246a 0%, #0500A4 8%, #0500A4 92%, #0a246a 100%);
  color: #fff;
  padding: 4px 8px;
  font-size: 13px;
  font-family: 'Trebuchet MS', 'MS Sans Serif', sans-serif;
  height: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*border-radius: 5px 5px 0 0;*/
}

.title span { font-weight: bold; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); }

/* ================================================
   Menu bar - меню mIRC
   ================================================ */

.menu {
  background: #c0c0c0;
  border-bottom: 1px solid #808080;
  padding: 4px 5px;
  font-size: 12px;
  font-family: 'MS Sans Serif', sans-serif;
  display: flex;
  gap: 5px;
}

.menu-item {
  padding: 2px 8px;
  cursor: pointer;
  border: 1px solid transparent;
}

.menu-item:hover {
  background: #e0e0e0;
  border: 1px outset #fff;
}

.menu-item u { text-decoration: underline; }

.title-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.title-icon {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block;          /* важно для Safari */
  flex: 0 0 auto;          /* чтобы flex не растягивал */
  object-fit: contain;     /* чтобы не тянуло */
  image-rendering: pixelated;
}

/* ================================================
   Main area - основная область
   ================================================ */

.main {
  display: flex;
  flex: 1;
  background: #c0c0c0;
  overflow: hidden;
}

/* ================================================
   Chat area - область чата
   ================================================ */

.chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 2px inset #808080;
  margin: 3px;
  background: #fff;
}

/* Topic bar - тема канала */
.topic {
  background: #c0c0c0;
  padding: 3px;
  border-bottom: 1px solid #808080;
  font-size: 11px;
  font-family: 'MS Sans Serif', sans-serif;
}

.topic-mobile { display: none; }
.topic-full { display: inline; }

/* Messages area - область сообщений */
.msgs {
  flex: 1;
  overflow-y: auto;
  padding: 5px;
  background: #fff;
  font-size: 18px;  /* Крупнее для больших мониторов */
  line-height: 24px;
  color: #000;
  font-family: 'Fixedsys Excelsior', 'Fixedsys', 'Consolas', monospace;
}

.msg { white-space: pre-wrap; word-wrap: break-word; }

/* ================================================
   Colors - КАК В ОРИГИНАЛЕ mIRC
   ================================================ */

.bot { color: #800080; }        /* Фиолетовый для вопросов (БЕЗ bold) */
.hint { color: #03b5aa; }       /* Бирюзовый для подсказок */
.chat-msg { color: #000000; }   /* ЧЁРНЫЙ для игроков */
.correct { color: #008000; }    /* Зелёный для правильных (БЕЗ bold) */
.error { color: #c00000; }      /* Красный для ошибок (БЕЗ bold) */
.info { color: #808080; }       /* Серый для системных */
.private { color: #808080; }    /* Серый для приватных ответов */

/* Время и скобки - ЧЕРНЫЕ */
.time-stamp { color: #000000; }
.bracket { color: #000000; }

/* Имя бота - КРАСНОЕ с @ */
.bot-name { color: #c00000; }

/* Имена игроков - СИНИЕ */
.player-name {
  color: #0000ff;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0;
}

/* Цвета вопроса */
.q-label { color: #008000; }    /* Зелёный для "Вопрос:", мета-текст */
.q-text { color: #800080; }     /* Фиолетовый для текста вопроса */
.q-value { color: #800080; }    /* Фиолетовый для числовых значений */

/* Цвета правильного ответа */
.ca-green { color: #008000; }   /* Зелёный основной текст */
.ca-nick { color: #c00000; }    /* Красный ник */
.ca-time { color: #0000ff; }    /* Синее время */
.ca-answer { color: #800080; }  /* Фиолетовый ответ */
.ca-points { color: #d9930f; }  /* Золотые очки */

/* Цвета подсказок */
.hint-text { color: #03b5aa; }     /* Основной текст подсказки */
.hint-seconds { color: #0F0F38; }  /* Секунды */

/* ================================================
   Input area - поле ввода как в mIRC
   ================================================ */

.input {
  border-top: 2px solid #808080;
  /*background: #c0c0c0;*/
  /*padding: 3px;*/
}

.input-field {
  width: 100%;
  border: none;
  padding: 5px 8px;
  font-family: 'Fixedsys Excelsior', 'Fixedsys', 'Consolas', monospace;
  font-size: 17px;
  background: #fff;
  outline: none;
}

.input-field::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

/* Кнопка (для модалок) */
.btn {
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 8px 16px;
  font-family: 'MS Sans Serif', sans-serif;
  font-size: 12px;
  cursor: pointer;
}

.btn:active { border-style: inset; }

/* ================================================
   Sidebar - боковая панель участников
   ================================================ */

.side {
  width: 180px;
  background: #fff;
  border: 2px inset #808080;
  margin: 3px 3px 3px 0;
  display: flex;
  flex-direction: column;
}

.side-title {
  background: #c0c0c0;
  padding: 3px;
  border-bottom: 1px solid #808080;
  font-size: 11px;
  font-family: 'MS Sans Serif', sans-serif;
  font-weight: bold;
}

.users {
  flex: 1;
  overflow-y: auto;
  padding: 5px;
  font-size: 16px;  /* Крупнее шрифт */
  font-family: 'Fixedsys Excelsior', 'Fixedsys', 'Consolas', monospace;
}

.user {
  padding: 3px 0;
  color: #0000FF;  /* Синий цвет для ников */
}

.user-bot {
  padding: 3px 0;
  color: #c00000;  /* Красный для бота */
}

.score { color: #008000; float: right; }  /* БЕЗ bold */

/* ================================================
   Status bar - строка состояния
   ================================================ */

.status {
  background: #c0c0c0;
  border-top: 1px solid #fff;
  padding: 2px 5px;
  font-size: 11px;
  font-family: 'MS Sans Serif', sans-serif;
  display: flex;
  gap: 10px;
}

.status-item {
  border-right: 1px solid #808080;
  padding-right: 10px;
}

/* ================================================
   Scrollbar - полоса прокрутки Windows
   ================================================ */

::-webkit-scrollbar { width: 16px; }
::-webkit-scrollbar-track { background: #c0c0c0; }
::-webkit-scrollbar-thumb { background: #c0c0c0; border: 2px outset #fff; }

/* ================================================
   Modal dialog - модальные окна
   ================================================ */

.modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.5);
}

.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: #c0c0c0;
  border: 3px outset #fff;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  min-width: 350px;
}

.modal-title {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff;
  padding: 3px 5px;
  font-size: 11px;
  font-family: 'MS Sans Serif', sans-serif;
  font-weight: bold;
}

.modal-body {
  padding: 20px;
  font-family: 'MS Sans Serif', sans-serif;
  font-size: 11px;
}

.modal-input {
  width: 100%;
  border: 2px inset #808080;
  padding: 5px;
  font-family: 'Fixedsys Excelsior', 'Consolas', monospace;
  font-size: 14px;
  margin: 10px 0;
}

.modal-buttons { text-align: right; margin-top: 15px; }
.modal-buttons .btn { margin-left: 5px; }
.modal-error { color: #c00000; font-size: 11px; margin-top: 5px; min-height: 16px; }
.modal-hint-text { color: #000080; font-size: 11px; margin-top: 5px; font-style: italic; }
.modal-label { display: block; margin-top: 8px; margin-bottom: 2px; }

/* ================================================
   Модальное окно Users
   ================================================ */

.users-modal {
  display: none;
  position: fixed;
  z-index: 10000;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #c0c0c0;
  border: 3px outset #fff;
  box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
  min-width: 250px;
  max-width: 400px;
}

.users-modal.show { display: block; }

/*.users-modal-title {
  background: linear-gradient(to right, #000080, #1084d0);
  color: #fff;
  padding: 3px 5px;
  font-size: 11px;
  font-family: 'MS Sans Serif', sans-serif;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  cursor: move;
}*/

.users-modal-title {
  background: linear-gradient(to bottom, #0a246a 0%, #0500A4 8%, #0500A4 92%, #0a246a 100%);
  color: #fff;
  padding: 4px 8px;
  font-size: 13px;
  font-family: 'Trebuchet MS', 'MS Sans Serif', sans-serif;
  height: 26px;

  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: move;
}

.users-modal-body {
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
  background: #fff;
  border: 2px inset #808080;
  margin: 5px;
}

.users-modal-user {
  padding: 3px 5px;
  color: #0000FF;
  font-family: 'Fixedsys Excelsior', 'Consolas', monospace;
  font-size: 14px;
}


/* кнопки справа в заголовке */
.title-buttons {
  display: flex;
  gap: 2px;
}

/* Win98 кнопка */
.win-btn {
  width: 16px;
  height: 14px;
  padding: 0;
  margin: 0;
  background: #c0c0c0;
  color: #000;
  border: 1px solid;
  border-color: #ffffff #404040 #404040 #ffffff; /* raised */
  box-sizing: border-box;
  font-family: "MS Sans Serif", sans-serif;
  font-size: 12px;
  line-height: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
}

.win-btn:active {
  border-color: #404040 #ffffff #ffffff #404040; /* pressed */
  padding-left: 1px;
  padding-top: 1px;
}

.win-btn-close {
  font-weight: bold;
}


/* ================================================
   Подменю (File, View, Tools)
   ================================================ */

.submenu {
  display: none;
  position: absolute;
  background: #c0c0c0;
  border: 2px outset #fff;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  z-index: 1000;
  min-width: 150px;
}

.submenu.show { display: block; }

.submenu-item {
  padding: 4px 20px 4px 8px;
  cursor: pointer;
  font-size: 11px;
  font-family: 'MS Sans Serif', sans-serif;
}

.submenu-item:hover { background: #000080; color: #fff; }
.submenu-item u { text-decoration: underline; }
.submenu-separator { border-top: 1px solid #808080; border-bottom: 1px solid #fff; margin: 2px 0; }

/* Скрываем кнопку Очки на desktop */
.scores-toggle { display: none; }

/* ================================================
   Адаптивный дизайн - мобильные устройства
   ================================================ */

@media (max-width: 768px) {
  body {
    background: #000 !important;
    align-items: stretch;
    justify-content: stretch;
  }

  /*
     Стратегия: visualViewport tracking
     Safari при клавиатуре скроллит страницу и уменьшает visualViewport.
     100dvh НЕ уменьшается при клавиатуре в Safari!
     Поэтому: .win = position:fixed, размеры из JS через visualViewport.
     JS ставит --vvh (высота) и --vvt (смещение сверху).
  */

  html, body {
    overflow: hidden !important;
    overscroll-behavior: none !important;
    width: 100% !important;
    height: 100% !important;
  }

  .win {
    width: 100% !important;
    /* JS ставит --vvh = visualViewport.height, --vvt = visualViewport.offsetTop */
    height: var(--vvh, 100vh) !important;
    position: fixed !important;
    left: 0 !important;
    top: var(--vvt, 0px) !important;
    overflow: hidden !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .title, .menu {
    flex: 0 0 auto;
    position: relative;
    z-index: 50;
    border-radius: 0;
  }
  .title { font-size: 12px; padding: 4px; }

  .main {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .chat {
    margin: 2px;
    border-width: 1px;
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .topic {
    flex: 0 0 auto;
    font-size: 9px;
    padding: 2px;
    overflow-x: auto;
    white-space: nowrap;
  }
  .topic-full { display: none; }
  .topic-mobile { display: block; }

  .msgs {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    font-size: 18px;
    line-height: 24px;
    padding: 8px;
    padding-bottom: 8px !important;
    /* JS ставит height/maxHeight напрямую */
  }

  /* Input — в потоке внутри .chat, НЕ fixed */
  .input {
    position: relative !important;
    flex: 0 0 auto !important;
    background: #fff;
    z-index: 200;
    padding: calc(6px + env(safe-area-inset-bottom));
    border-top: 2px solid #808080;
  }

  .input-field { font-size: 16px; padding: 10px; }
  .btn { font-size: 14px; padding: 10px 16px; min-width: 60px; }

  .status {
    display: none !important;
  }

  .side {
    position: fixed;
    top: 0; right: -160px; bottom: 0;
    width: 160px; z-index: 1000;
    transition: right 0.3s ease;
    box-shadow: -2px 0 5px rgba(0,0,0,0.3);
  }
  .side.visible { right: 0; }

  .score-toggle {
    display: block !important;
    position: fixed; top: 50%; right: 10px;
    transform: translateY(-50%);
    background: #c0c0c0; border: 2px outset #fff;
    padding: 8px 12px;
    font-family: 'MS Sans Serif', sans-serif;
    font-size: 12px; cursor: pointer; z-index: 999;
  }

  .overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 998;
  }
  .overlay.visible { display: block; }
}

@media (max-width: 480px) {
  .msgs { font-size: 16px; line-height: 22px; }
  .status-item:nth-child(2) { display: none; }
  .score-toggle { padding: 6px 10px; font-size: 11px; }
}

@media (max-width: 600px){
  .title-icon{
    width: 12px !important;
    height: 12px !important;
    max-width: 12px !important;
    max-height: 12px !important;
  }
}