/* Детектив-игра «Убийца в кабинете» — единый CSS (Ф1.1 REV.3).
 *
 * [РЕАЛИЗОВАНО В: code-2026-09-04-detective-round2 — Ф1.1]
 *
 * Экспорт трёх дублированных инъектов в один static-файл (DRY):
 *   - pages._DETECTIVE_MOBILE_CSS (action-bar/touch-targets/anti-zoom);
 *   - game_seating_circle._DETECTIVE_CSS (круг стола, лог, таймлайн);
 *   - stats_ui._STATS_CSS (чипы статистики, баннеры).
 * Доставка: render-blocking <link rel="stylesheet"
 * href="/static/css/detective.css?v=CACHE_VERSION"> shared=True
 * (mount /static → appFrontend/static, appFrontend/main.py:42-43).
 * SW: Cache-First с cacheKey ?v= (service-worker.js, v14) — после первой
 * загрузки файл из кеша. Live-WS-инъект удалён (ненадёжен — WS-502-окно).
 *
 * Дубли правил action-bar/action-btn/input (были в двух инъектах) сведены.
 */

/* ── H.8 мобильный: sticky-панель, тач-таргеты ≥44px, anti-zoom iOS ──────── */
.detective-action-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--bg-white, #ffffff);
    border-top: 1px solid var(--border-light, #e0e0e0);
}
body.body--dark .detective-action-bar { background: #1d1d1d; }
.detective-action-btn { min-height: 44px; min-width: 44px; }
.detective-action-bar .q-btn { min-height: 44px; min-width: 44px; }
.detective-action-bar input, .detective-action-bar textarea { font-size: 16px; }
.detective-page input, .detective-page textarea { font-size: 16px; }

/* ── Круг стола (дизайн §A.1) ─────────────────────────────────────────────── */
.detective-circle {
    position: relative;
    width: min(100%, 400px);
    aspect-ratio: 1;
    margin: 0 auto;
}
.detective-circle--grid { aspect-ratio: 4 / 5; }
.detective-table {
    position: absolute;
    left: 50%; top: 50%;
    width: 52%; height: 52%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--green-primary, #4caf50);
    color: #ffffff;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    text-align: center;
    gap: 2px;
    padding: 6px;
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
    z-index: 1;
    overflow: hidden;
}
body.body--dark .detective-table { background: var(--green-dark, #388e3c); }
.detective-table-title {
    font-size: 0.8rem; font-weight: 600;
    line-height: 1.1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.detective-table-subtitle {
    font-size: 0.68rem;
    opacity: 0.92;
    line-height: 1.15;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.detective-seat {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 1px;
    border-radius: 10px;
    padding: 2px 1px;
    z-index: 2;
    text-align: center;
    overflow: visible;
}
.detective-seat--clickable { cursor: pointer; }
.detective-seat--clickable:hover { background: rgba(255, 82, 82, 0.12); }
.detective-seat--dead { opacity: 0.45; }
.detective-seat--me { box-shadow: 0 0 0 2px var(--green-primary, #4caf50); }
/* V2 (P3-11): партнёр тандема — пунктирная обводка (НЕ цель тапа) */
.detective-seat--partner { outline: 2px dashed #9c27b0; outline-offset: 1px; }
.detective-avatar {
    position: relative;
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 700;
    color: #ffffff;
    border: 2px solid var(--green-primary, #4caf50);
    overflow: hidden;
}
/* Э4: фото участника из профиля (если есть) — обрезается в круг;
   у мёртвых — grayscale (визуально «убит»). */
.detective-avatar img {
    width: 100%; height: 100%;
    object-fit: cover; border-radius: 50%;
    display: block;
}
.detective-seat--dead .detective-avatar img { filter: grayscale(1); }
.detective-seat--lg .detective-avatar { width: 34px; height: 34px; font-size: 0.8rem; }
.detective-seat--sm .detective-avatar { width: 24px; height: 24px; font-size: 0.62rem; }
.detective-avatar--0 { background: #ef5350; }
.detective-avatar--1 { background: #42a5f5; }
.detective-avatar--2 { background: #ffa726; }
.detective-avatar--3 { background: #ab47bc; }
.detective-avatar--4 { background: #26a69a; }
.detective-avatar--5 { background: #78909c; }
.detective-seat--dead .detective-avatar { border-color: #9e9e9e; background: #757575; }
.detective-name {
    font-size: 0.68rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 90px;   /* P1-5: ≤8 игроков */
    line-height: 1.15;
}
.detective-name--md { max-width: 56px; }   /* P1-5: 9-12 игроков */
body.body--dark .detective-name { color: #e0e0e0; }
.detective-username {
    font-size: 0.6rem;
    color: var(--text-secondary, #555555);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 70px;   /* P1-5: telegram_username String(100) */
    line-height: 1.15;
}
body.body--dark .detective-username { color: #9e9e9e; }
.detective-seat-badges {
    position: absolute; top: -4px; right: -4px;
    display: flex; gap: 2px; z-index: 4;
}
.detective-badge {
    background: #ffffff;
    border: 1px solid var(--border-light, #e0e0e0);
    border-radius: 8px;
    font-size: 0.55rem;
    padding: 0 2px;
    line-height: 1.2;
}
body.body--dark .detective-badge { background: #2c2c2c; }
.detective-me-badge {
    position: absolute; bottom: -5px; left: 50%;
    transform: translateX(-50%);
    background: var(--green-primary, #4caf50);
    color: #ffffff;
    border-radius: 6px;
    font-size: 0.5rem;
    padding: 0 3px;
    z-index: 4;
    white-space: nowrap;
}
.detective-skull {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    z-index: 5;
    pointer-events: none;
}
.detective-role-icon {
    position: absolute; top: -8px; left: -8px;
    font-size: 0.85rem; z-index: 4;
}
/* B2 (quick-wins): текстовая подпись роли — только GM-круг
   (reveal_roles): короткое имя под иконкой; тандем — красным,
   сыщики/гость — синим. Seat — flex-column → подпись в потоке
   между аватаром и именем. */
.detective-role-name {
    font-size: 0.56rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    color: #1976d2;
}
.detective-role-name--tandem { color: #d32f2f; }
body.body--dark .detective-role-name { color: #64b5f6; }
body.body--dark .detective-role-name--tandem { color: #ef9a9a; }
.detective-log {
    max-height: 30vh;
    overflow-y: auto;
    scrollbar-width: thin;
}
.detective-log-entry {
    font-size: 0.8rem;
    padding: 2px 0;
    border-bottom: 1px dashed rgba(128, 128, 128, 0.25);
}
/* §24: таймлайн-полоса акта 2 — одна строка, горизонтальный скролл
   на мобильном (не увеличивает documentElement.scrollWidth). */
.detective-timeline { display: flex; flex-wrap: nowrap; overflow-x: auto; }
.detective-timeline .timeline-done { opacity: 0.45; }
.detective-timeline .timeline-future { opacity: 0.6; }
.detective-timeline .timeline-current { font-weight: 700; }

/* ── Статистика (stats_ui._STATS_CSS) ─────────────────────────────────────── */
.dg-stats-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 1px 10px; border-radius: 999px; font-size: 0.78rem;
    color: #ffffff; white-space: nowrap;
}
.dg-stats-row--me { background: rgba(25, 118, 210, 0.12); border-radius: 4px; }
.dg-stats-banner {
    padding: 8px 14px; border-radius: 8px; font-weight: 600; margin: 8px 0;
}
.dg-stats-banner--tandem { background: #3e2723; color: #ffb74d; }
.dg-stats-banner--detectives { background: #1b2a4a; color: #90caf9; }
.dg-stats-accuracy-row { margin: 2px 0; }

/* ── Ф1.2 (REV.3): замороженная гипотеза — форма видна, но неактивна ──────── */
.detective-hypothesis-frozen {
    opacity: 0.6;
    pointer-events: none;
}