/* style.css */

/*
|======================================================|
| 🎨 ГЛОБАЛЬНІ ЗМІННІ (КОНФІГУРАЦІЯ) - РЕДАГУВАТИ ТУТ! |
|======================================================|
*/
:root{
  /* Шрифти та відступи */
  --font-family: 'Open Sans', Arial, sans-serif;
  --gap: 12px;
  
  /* Розміри */
  --header-h: 64px; /* Висота заголовків категорій */
  --cell-h: 100px; /* Висота клітинок з балами */
  
  /* Кольори фону та тексту */
  --color-bg-main: #0f172a; /* Темний фон сторінки */
  --color-bg-card: #1f2937; /* Фон кнопок керування */
  --color-text-main: #ffffff;
  
  /* Кольори за замовчуванням */
  --color-cell-default: #0e4c6c; /* Основний колір клітинок */
  --color-used: #4b5563; /* Колір використаної клітинки */
  
  /* Акценти та результати */
  --color-team-active: #ffffff; /* Обведення активної команди */
  --color-correct: #10b981; /* Зелений */
  --color-wrong: #ef4444; /* Червоний */
  --color-modal-bg: #0b1220; /* Фон модального вікна */
}

/*
|====================================|
| ⚙️ ЗАГАЛЬНІ СТИЛІ (НЕ РЕДАГУВАТИ!) |
|====================================|
*/

body {
    font-family: var(--font-family);
    margin: 0;
    background: var(--color-bg-main);
    color: var(--color-text-main);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px;
}

.topbar, .container {
    width: 100%;
    max-width: 1400px;
}

.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap);
    margin-bottom: 14px;
}
.title {
    font-size: 20px;
    font-weight: 700;
}
.teams {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}
.team {
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--color-bg-card);
    cursor: pointer;
    min-width: 90px;
    text-align: center;
    transition: all 0.2s;
}
.team.active {
    outline: 3px solid var(--color-team-active);
    transform: translateY(-4px);
}
.score {
    font-weight: 700;
    display: block;
    font-size: 16px;
    margin-top: 6px;
}
.controls {
    display: flex;
    gap: 8px;
}
.btn {
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--color-bg-card);
    border: 0;
    color: var(--color-text-main);
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn:hover {
    background: #2d3846;
}

/* Сітка */
.grid {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(7, 1fr);
}
.header-cell {
    height: var(--header-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    border-radius: 8px;
}
.cell {
    height: var(--cell-h);
    background: var(--color-cell-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 24px; /* Збільшено для проектора */
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.3s, filter 0.3s, background 0.3s;
}
.cell.used {
    opacity: 0.35;
    pointer-events: none;
    background: var(--color-used);
    filter: grayscale(100%);
}

/*
|============================|
| 🌈 КОЛЬОРИ КАТЕГОРІЙ      |
|============================|
*/
/* Ці кольори потрібно змінювати тут, вони не можуть бути змінними через динамічні класи */
/* Category Cell Colors */
.cat-0{background:#1f8a70;} /* Реаб. */
.cat-1{background:#ff7f50;} /* Офіс */
.cat-2{background:#6a5acd;} /* Доглядачі */
.cat-3{background:#f59e0b;} /* Тех. працівники */
.cat-4{background:#ef476f;} /* Кухня */
.cat-5{background:#06b6d4;} /* Гараж */
.cat-6{background:#8b5cf6;} /* Медики */

/* Header Cell Colors (трохи темніші) */
.hdr-0{background:#196b56;}
.hdr-1{background:#d66a4a;}
.hdr-2{background:#5747b6;}
.hdr-3{background:#b97706;}
.hdr-4{background:#c43b56;}
.hdr-5{background:#0893a6;}
.hdr-6{background:#6b46c1;}


/*
|============================|
| 💬 MODAL (Вікно питання) |
|============================|
*/
.modal{
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal .bg{
    position: absolute;
    inset: 0;
    background: rgba(1,2,6,0.85); /* Затемнення */
}
.modal .dialog{
    position: relative;
    width: min(1000px, 96%); /* Трохи ширше для проектора */
    background: var(--color-modal-bg);
    padding: 30px;
    border-radius: 10px;
    z-index: 2;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.dialog .meta{
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 20px;
    font-size: 1.1em;
}
.meta .cat{
    font-weight: 800;
}
.question{
    font-size: 2.5em; /* Дуже великий текст питання */
    margin-bottom: 20px;
    line-height: 1.3;
}
.answers{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
}
.answer-btn{
    padding: 20px;
    border-radius: 8px;
    background: #061626;
    border: 1px solid rgba(255,255,255,0.08);
    cursor: pointer;
    font-weight: 700;
    font-size: 1.2em;
    color: var(--color-text-main);
    transition: background-color 0.1s;
}
.answer-btn:hover:not(:disabled){
    background: #142a42;
}

/* Підсвічування результату */
.answer-btn.correct{
    outline: 4px solid var(--color-correct);
    background: rgba(16, 185, 129, 0.2);
}
.answer-btn.wrong{
    outline: 4px solid var(--color-wrong);
    background: rgba(239, 68, 68, 0.2);
}

.modal-footer{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}
.small{
    font-size: 13px;
    opacity: 0.8;
}

/* Адаптивність */
@media (max-width:900px){
    .cell{height: 72px; font-size: 16px}
    .team{min-width: 72px; padding: 6px}
    .question{font-size: 1.8em;}
    .answers{grid-template-columns: 1fr;}
    .answer-btn{padding: 15px;}
}

/* style.css */
/* ... (Ваші попередні стилі) ... */

/* Додаємо нові змінні для недоступних клітинок */
:root{
  /* ... (інші змінні) ... */
  --color-forbidden-bg: #444444; /* Сірий фон для недоступних (своїх) питань */
  --color-forbidden-text: #aaaaaa; /* Сірий текст */
}

/* ... (Загальні стилі) ... */

/* Стиль для вже використаної клітинки (used) */
.cell.used {
    opacity: 0.35;
    pointer-events: none;
    background: var(--color-used);
    filter: grayscale(100%);
}

/* ⚠️ НОВИЙ СТИЛЬ: Клітинка недоступна для поточної команди */
.cell.forbidden {
    background: var(--color-forbidden-bg) !important; /* Важливо: перебиває колір категорії */
    color: var(--color-forbidden-text);
    cursor: not-allowed;
    pointer-events: none; /* Вимикає клікабельність */
    opacity: 0.6;
    filter: grayscale(70%);
}

/* ... (Модальні стилі) ... */