/* ════════════════════════════════════════════════════════════════════
   NOCINATOR — stylesheet
   ════════════════════════════════════════════════════════════════════ */

/* ── Reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Переменные ──────────────────────────────────────────────────── */
:root {
  --sky-top:        #5bbee0;
  --sky-mid:        #3b96cc;
  --sky-bottom:     #1e6aaa;

  --badge-bg:       #2C5F6B;
  --badge-tail:     #1a4050;
  --card-bg:        #DDE6EC;
  --card-text:      #2C3E50;
  --card-shadow:    2px 4px 12px rgba(0,0,0,.15);

  --ans-bg:         #f4f8fc;
  --ans-border:     #d4dee8;
  --ans-hover:      rgba(30,110,190,.11);
  --ans-active:     rgba(30,110,190,.22);
  --ans-text:       #132033;

  --accent:         #4aaddf;
  --back-bg:        #0b192a;

  --font:           'Segoe UI', system-ui, Arial, sans-serif;
  --header-h:       76px;
}

/* ── Основа ──────────────────────────────────────────────────────── */
html, body {
  height: 100%;
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body {
  background: linear-gradient(170deg,
    var(--sky-top)    0%,
    var(--sky-mid)   50%,
    var(--sky-bottom)100%);
  min-height: 100dvh;
}

/* ── Декоративные кристаллы ──────────────────────────────────────── */
.bg-crystals { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.crystal {
  position: absolute;
  background: rgba(255,255,255,.17);
  transform: rotate(45deg);
  border-radius: 4px;
}
.c1 { width:42px; height:42px; top:5%;    left:3%;   }
.c2 { width:22px; height:22px; top:12%;   left:8%;   opacity:.2;  }
.c3 { width:14px; height:14px; top:21%;   left:15%;  opacity:.14; }
.c4 { width:38px; height:38px; top:4%;    right:4%;  }
.c5 { width:18px; height:18px; top:15%;   right:11%; opacity:.18; }
.c6 { width:28px; height:28px; bottom:22%;left:5%;   opacity:.2;  }
.c7 { width:34px; height:34px; bottom:11%;right:5%;  }
.c8 { width:16px; height:16px; bottom:7%; right:13%; opacity:.17; }

/* ── Page wrapper ────────────────────────────────────────────────── */
.page-wrapper {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════════ */
.header {
  width: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 32px;
  height: var(--header-h);
  justify-content: center;
}

.logo-img {
  height: 58px;
  max-width: 250px;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.25));
}


/* ════════════════════════════════════════════════════════════════════
   GAME SCREEN — desktop 50 / 50
   ════════════════════════════════════════════════════════════════════ */
.game-screen {
  width: 100%;
  max-width: 1200px;
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: stretch;              /* обе колонки растягиваются на всю высоту */
  padding: 0 40px 0 0;
  min-height: calc(100dvh - var(--header-h));
}

/* ── Левая колонка: джинн ────────────────────────────────────────── */
.genie-col {
  flex: 0 0 50%;
  display: flex;
  align-items: flex-end;             /* джинн прижат к низу своей колонки */
  justify-content: center;
  overflow: visible;
  position: relative;
}

.genie-img {
  width: auto;
  max-width: 100%;
  height: calc(120dvh - var(--header-h));
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 14px 30px rgba(0,0,0,.35));
  animation: float 4.8s ease-in-out infinite;
  margin-bottom: -18px;
  margin-top: -175px;
  transition: opacity 0.28s ease;
}
.genie-img.genie-fading { opacity: 0; }

.genie-fallback {
  font-size: 130px;
  animation: float 4.8s ease-in-out infinite;
  padding-bottom: 16px;
}

@keyframes float {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-15px); }
}

/* ── Правая колонка: вопрос + ответы ────────────────────────────── */
.card-col {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;          /* контент по центру по вертикали */
  padding: 28px 0 56px 24px;
  overflow: visible;
}

/* ════════════════════════════════════════════════════════════════════
   SPEECH BUBBLE — точная копия оригинального Акинатора

   Структура (flex-row):
   ┌──────────────┬──────────────────────────────────────┐
   │  bubble-tail │  bubble-body                         │
   │  (тёмный)    │  (светлый)                           │
   │  номер "2"   │  текст вопроса                       │
   │  ◄           │                                      │
   └──────────────┴──────────────────────────────────────┘
   Треугольный хвостик ::before торчит ВЛЕВО из bubble-tail.
   ════════════════════════════════════════════════════════════════════ */

.bubble-question {
  display: flex;
  flex-direction: row;
  border-radius: 8px;
  box-shadow: var(--card-shadow);
  overflow: visible;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

/* ── Левая тёмная часть: хвостик + номер ──────────────────────────
   Выступает влево треугольником через ::before.            */
.bubble-tail {
  position: relative;
  background: var(--badge-bg);      /* #2C5F6B */
  border-radius: 8px 0 0 8px;
  width: 68px;
  min-width: 68px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 8px;
}

/* Треугольник-хвостик, указывает влево (на джинна) */
.bubble-tail::before {
  content: '';
  position: absolute;
  right: 100%;      /* вплотную к левому краю bubble-tail */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top:    12px solid transparent;
  border-bottom: 12px solid transparent;
  border-right:  16px solid var(--badge-bg);  /* совпадает с фоном tail */
}

.wrapper-question-number {
  display: flex;
  align-items: center;
  justify-content: center;
}

.question-number {
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  user-select: none;
}

/* ── Правая светлая часть: текст вопроса ──────────────────────────*/
.bubble-body {
  background: var(--card-bg);       /* #DDE6EC */
  border-radius: 0 8px 8px 0;
  flex: 1;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  min-height: 65px;
}

.question-text {
  color: var(--card-text);          /* #2C3E50 */
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  transition: opacity .24s ease;
}

/* ════════════════════════════════════════════════════════════════════
   ПАНЕЛЬ ОТВЕТОВ — отдельная карточка под вопросом
   ════════════════════════════════════════════════════════════════════ */
.answers-panel {
  background: var(--ans-bg);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0,0,0,.2);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.panel-hidden {
  opacity: 0 !important;
  transform: translateY(8px) !important;
  pointer-events: none !important;
}

.ans-btn {
  display: block;
  width: 100%;
  padding: 15px 24px;
  border: none;
  border-top: 1px solid var(--ans-border);
  background: transparent;
  color: var(--ans-text);
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  min-height: 52px;
  letter-spacing: .15px;
  transition: background .13s, transform .1s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.ans-btn:first-child,
#answers-panel .ans-btn:first-child { border-top: none; }
.ans-btn:hover       { background: var(--ans-hover); }
.ans-btn:active      { background: var(--ans-active); transform: scale(.985); }
.ans-btn:disabled    { opacity: .38; cursor: not-allowed; transform: none; }

/* ════════════════════════════════════════════════════════════════════
   КНОПКА «ИСПРАВИТЬ»
   ════════════════════════════════════════════════════════════════════ */
.back-btn {
  position: fixed;
  bottom: 26px;
  right: 26px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--back-bg);
  color: #fff;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 11px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 6px 22px rgba(0,0,0,.45);
  transition: background .16s, transform .12s;
  z-index: 100;
  -webkit-tap-highlight-color: transparent;
}
.back-btn:hover  { background: #183050; }
.back-btn:active { transform: scale(.94); }
.back-label { letter-spacing: .2px; }

/* ════════════════════════════════════════════════════════════════════
   ЗАГРУЗКА
   ════════════════════════════════════════════════════════════════════ */
.loading {
  position: fixed;
  inset: 0;
  background: rgba(4,12,24,.62);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 300;
  gap: 18px;
}

.spinner {
  width: 48px; height: 48px;
  border: 4px solid rgba(255,255,255,.18);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.loading-label {
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .4px;
}

/* ════════════════════════════════════════════════════════════════════
   ЭКРАН РЕЗУЛЬТАТОВ
   ════════════════════════════════════════════════════════════════════ */
.result-screen {
  width: 100%;
  max-width: 820px;
  padding: 24px 20px 80px;
  flex: 1;
}

.result-card {
  background: #0a1220;
  border: 1px solid #1a2840;
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 16px 52px rgba(0,0,0,.55);
  color: #fff;
}

.result-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.result-orb { font-size: 36px; }
.result-header h2 { font-size: 22px; font-weight: 800; color: #58a6ff; }

.result-net-type {
  font-size: 17px;
  font-weight: 700;
  color: #e3b341;
  padding: 12px 18px;
  background: rgba(227,179,65,.07);
  border-left: 3px solid #e3b341;
  border-radius: 0 10px 10px 0;
  margin-bottom: 22px;
}

.result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.rg-cell {
  background: #121d30;
  border: 1px solid #1a2840;
  border-radius: 10px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rg-label { font-size: 11px; color: #6a7f96; text-transform: uppercase; letter-spacing: .7px; }
.rg-value { font-size: 16px; font-weight: 700; color: #58a6ff; }

.result-section { margin-bottom: 22px; }
.section-title  { font-size: 11px; color: #6a7f96; text-transform: uppercase; letter-spacing: .7px; margin-bottom: 10px; }

.features-list { display: flex; flex-wrap: wrap; gap: 8px; }
.feat-tag {
  background: rgba(88,166,255,.09);
  color: #58a6ff;
  border: 1px solid rgba(88,166,255,.22);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
}

.result-summary {
  color: #c9d1d9;
  font-size: 14px;
  line-height: 1.7;
  background: #0d1117;
  border-radius: 10px;
  padding: 14px 18px;
  border-left: 3px solid #58a6ff;
}

.ai-image-wrap { display: flex; flex-direction: column; gap: 10px; }
.ai-loading {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  background: #0d1117;
  border-radius: 12px;
  color: #6a7f96;
  font-size: 14px;
}
.spinner-sm {
  width: 22px; height: 22px;
  border: 3px solid rgba(255,255,255,.14);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  flex-shrink: 0;
}
.ai-img { width: 100%; border-radius: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.4); display: block; }
.ai-prompt-text {
  font-size: 11px;
  color: #4a6078;
  font-style: italic;
  line-height: 1.6;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: #090f1a;
  border-radius: 8px;
}

.restart-btn {
  width: 100%;
  padding: 15px;
  background: linear-gradient(90deg, #1648a0, #3b82f6);
  color: #fff;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: .3px;
  transition: opacity .17s, transform .1s;
}
.restart-btn:hover  { opacity: .86; }
.restart-btn:active { transform: scale(.98); }

/* ── Утилиты ─────────────────────────────────────────────────────── */
.hidden { display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   АДАПТИВ
   Лэйаут ВСЕГДА горизонтальный: джинн слева, вопрос+ответы справа.
   На маленьких экранах просто уменьшаем размеры.
   ════════════════════════════════════════════════════════════════════ */

/* ── Планшет (≤900px) ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .game-screen  { padding: 0 16px 0 0; }
  .card-col     { padding: 20px 0 48px 20px; gap: 14px; }

  .bubble-tail  { width: 58px; min-width: 58px; }
  .question-number { font-size: 22px; }
  .bubble-body  { padding: 16px 18px; }
  .question-text { font-size: 15px; }

  .ans-btn { font-size: 15px; padding: 14px 18px; min-height: 50px; }
}

/* ── Маленький планшет / большой телефон (≤640px) ───────────────── */
@media (max-width: 640px) {
  :root { --header-h: 56px; }

  .header   { padding: 6px 12px; }
  .logo-img { height: 36px; }

  /* Горизонталь сохраняется, убираем лишние отступы */
  .game-screen { padding: 0 8px 0 0; }

  /* Джинн: занимает 42% — достаточно чтобы быть заметным */
  .genie-col { flex: 0 0 42%; }
  .genie-img { margin-bottom: -10px; }
  .genie-fallback { font-size: 72px; }

  /* Правая колонка: 58% */
  .card-col {
    flex: 0 0 58%;
    padding: 12px 0 56px 16px;
    gap: 10px;
  }

  /* Bubble компактнее */
  .bubble-tail  { width: 46px; min-width: 46px; }
  .question-number { font-size: 18px; }
  .bubble-tail::before {
    border-top-width: 9px;
    border-bottom-width: 9px;
    border-right-width: 12px;
  }
  .bubble-body  { padding: 12px 12px; min-height: 52px; }
  .question-text { font-size: 13px; line-height: 1.5; }

  /* Кнопки ответов */
  .ans-btn {
    font-size: 13px;
    padding: 11px 10px;
    min-height: 44px;
  }

  /* Кнопка «Исправить» */
  .back-btn   { bottom: 12px; right: 12px; padding: 9px 12px; }
  .back-label { display: none; }

  /* Результат */
  .result-screen { padding: 12px 10px 64px; }
  .result-card   { padding: 16px 14px; border-radius: 14px; }
  .result-header h2  { font-size: 17px; }
  .result-net-type   { font-size: 14px; padding: 10px 14px; }
  .result-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .rg-value    { font-size: 14px; }
}

/* ── Маленький телефон (≤420px) ─────────────────────────────────── */
@media (max-width: 420px) {
  .genie-col { flex: 0 0 38%; }
  .card-col  { flex: 0 0 62%; padding-left: 14px; }

  .bubble-tail { width: 40px; min-width: 40px; }
  .question-number { font-size: 16px; }
  .bubble-body { padding: 10px 10px; }
  .question-text { font-size: 12px; }

  .ans-btn { font-size: 12px; padding: 10px 8px; min-height: 40px; }
}

/* ── Очень маленький (≤360px) ────────────────────────────────────── */
@media (max-width: 360px) {
  .genie-col { flex: 0 0 35%; }
  .card-col  { flex: 0 0 65%; padding-left: 12px; }
  .bubble-tail { width: 36px; min-width: 36px; padding: 14px 4px; }
  .question-number { font-size: 14px; }
  .question-text { font-size: 11px; }
  .ans-btn { font-size: 11px; padding: 9px 6px; }
}