/* =====================================================================
   Jottle — тёмный неон. Анимации только transform/opacity (плавно на слабых телефонах)
   ===================================================================== */
:root {
  --bg: #050607;
  --panel: #16181c;
  --panel-2: #0d0f12;
  --text: #ffffff;
  --grey: #c6c7c9;
  --blue: #00b7ff;
  --red: #ff3b3b;
  --green: #9fffb1;
  --btn: #eef9ff;
  --btn-text: #0b0d10;
  --radius: 24px;
  --frame-w: 3px;
  --ease: cubic-bezier(.22, .9, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: radial-gradient(circle at center, #111318 0, #020203 65%) fixed, var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  overflow: hidden;
}

.hidden { display: none !important; }

/* ---------- Каркас ---------- */
.app {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

/* Неоновая рамка: большой вращающийся conic-градиент под картой.
   Крутится через transform — это считает видеокарта, без перерисовки */
.frame {
  position: relative;
  width: min(400px, 100%);
  height: min(700px, 100%);
  border-radius: var(--radius);
  padding: var(--frame-w);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 0 24px rgba(0, 183, 255, .18), 0 0 60px rgba(224, 42, 54, .08);
}
.frame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 250%;
  aspect-ratio: 1;
  z-index: -1;
  background: conic-gradient(
    from 0deg,
    transparent 0 12%,
    rgba(0, 183, 255, .95) 22%,
    rgba(255, 255, 255, .55) 26%,
    transparent 36% 58%,
    rgba(224, 42, 54, .9) 70%,
    rgba(255, 255, 255, .35) 73%,
    transparent 84% 100%
  );
  transform: translate(-50%, -50%) rotate(0deg);
  animation: frame-spin 7s linear infinite;
  will-change: transform;
}
@keyframes frame-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.card {
  position: relative;
  height: 100%;
  border-radius: calc(var(--radius) - var(--frame-w));
  background:
    linear-gradient(-30deg, rgba(0, 183, 255, .07), transparent 45%, rgba(224, 42, 54, .05)),
    var(--panel);
  overflow: hidden;
}

/* ---------- Экраны и переходы ---------- */
.screen {
  position: absolute;
  inset: 0;
  padding: 22px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(36px) scale(.98);
  pointer-events: none;
  visibility: hidden;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s linear .35s;
}
.screen.active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility 0s;
}
.screen.leave {
  opacity: 0;
  transform: translateX(-36px) scale(.98);
}

/* ---------- Лого ---------- */
.logo {
  display: block;
  width: min(220px, 64%);
  height: auto;
  margin: 6px auto 4px;
  filter: drop-shadow(0 0 14px rgba(0, 183, 255, .25)); /* статично, не анимируется */
}
.logo-text {
  text-align: center;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 6px;
  margin: 8px 0 4px;
  color: #fff;
  text-shadow: 0 0 12px rgba(0, 183, 255, .8), 0 0 28px rgba(0, 183, 255, .35);
}
.logo-big { width: min(260px, 72%); font-size: 44px; }

.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.04); opacity: 1; }
}

/* ---------- Заставка ---------- */
.splash {
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.loader {
  width: 70%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.loader-fill {
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform-origin: left center;
  transform: scaleX(0);
  animation: loader 1.2s var(--ease) forwards;
}
@keyframes loader { to { transform: scaleX(1); } }

/* ---------- Текст ---------- */
.title { text-align: center; font-size: 20px; font-weight: 900; letter-spacing: .5px; }
.muted { color: var(--grey); font-size: 14px; text-align: center; }
.hint  { color: rgba(198, 199, 201, .75); font-size: 12px; line-height: 1.45; text-align: center; margin-top: auto; }
.err   { color: #ff8a8a; font-size: 13px; text-align: center; min-height: 18px; }

/* ---------- Плашки ---------- */
.top-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pill {
  background: #101217;
  border: 1px solid rgba(0, 183, 255, .25);
  border-radius: 999px;
  padding: 7px 12px;
  font-weight: 900;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}
.pill.light { background: #f0f0f0; color: #111; border-color: transparent; }

.banner {
  background: rgba(224, 42, 54, .12);
  border: 1px solid rgba(255, 59, 59, .45);
  color: #ffcdd2;
  border-radius: 14px;
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
}

/* ---------- Поля ---------- */
.input {
  width: 100%;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid rgba(0, 183, 255, .22);
  border-radius: 14px;
  padding: 14px 14px;
  font-size: 16px; /* меньше 16px — iPhone зумит страницу при фокусе */
  font-family: inherit;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.input::placeholder { color: rgba(198, 199, 201, .5); }
.input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0, 183, 255, .18), 0 0 18px rgba(0, 183, 255, .25);
}
.input.code {
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 4px;
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ---------- Кнопки ---------- */
.btn {
  appearance: none;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  background: var(--btn);
  color: var(--btn-text);
  font-family: inherit;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .3px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 183, 255, .28);
  transition: transform .12s var(--ease), opacity .2s;
  touch-action: manipulation;
}
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid rgba(0, 183, 255, .45);
  box-shadow: none;
}
.btn.link {
  background: transparent;
  color: var(--grey);
  box-shadow: none;
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  margin-top: auto;
}

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

.menu { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.join-row { display: flex; gap: 10px; animation: drop-in .3s var(--ease); }
.join-row .input { flex: 1; }
.join-row .btn { flex: 0 0 84px; }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Диалог ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .6);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card {
  width: min(340px, 100%);
  background: var(--panel);
  border: 1px solid rgba(0, 183, 255, .4);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 0 30px rgba(0, 183, 255, .2);
  transform: scale(.92);
  transition: transform .3s var(--ease);
}
.modal.open .modal-card { transform: scale(1); }
.modal-text { text-align: center; font-size: 16px; font-weight: 700; line-height: 1.4; }

/* ---------- Тост ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(24px, env(safe-area-inset-bottom));
  z-index: 60;
  max-width: 86vw;
  background: #f0f0f0;
  color: #111;
  font-weight: 800;
  font-size: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  opacity: 0;
  transform: translate(-50%, 16px);
  pointer-events: none;
  transition: opacity .25s, transform .25s var(--ease);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Тряска при ошибке ---------- */
.shake { animation: shake .4s; }
@keyframes shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

/* =====================================================================
   Комната
   ===================================================================== */
.small { font-size: 12px; }
.btn.chip {
  padding: 7px 12px;
  font-size: 13px;
  border-radius: 999px;
  box-shadow: none;
}
.code-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border-radius: 18px;
  background: var(--panel-2);
  border: 1px solid rgba(0, 183, 255, .25);
}
.code-big {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 40px;
  font-weight: 900;
  letter-spacing: 10px;
  padding-left: 10px;
  text-shadow: 0 0 14px rgba(0, 183, 255, .6);
}
.banner.info {
  background: rgba(0, 183, 255, .1);
  border-color: rgba(0, 183, 255, .45);
  color: #d8f3ff;
  font-weight: 800;
}
.seats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.seat {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #101217;
  border: 1px solid rgba(255, 255, 255, .06);
  font-weight: 800;
  font-size: 14px;
  overflow: hidden;
  animation: pop-in .35s var(--ease) both;
}
.seat.empty { color: rgba(198, 199, 201, .35); font-weight: 600; border-style: dashed; animation: none; }
.seat.me { border-color: rgba(0, 183, 255, .55); }
.seat .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.seat .off { color: #ff9a9a; font-size: 11px; font-weight: 700; }
.dot-on, .dot-off { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; }
.dot-on { background: #4dff88; box-shadow: 0 0 6px #4dff88; }
.dot-off { background: #666; }

@keyframes pop-in {
  from { opacity: 0; transform: scale(.85); }
  to   { opacity: 1; transform: none; }
}

/* =====================================================================
   Общая шапка игры и таймер
   ===================================================================== */
.screen.game { gap: 10px; }
.game-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.timer-num { min-width: 52px; text-align: center; font-variant-numeric: tabular-nums; }
.timer-num.hurry { background: var(--red); color: #fff; animation: pulse .6s ease-in-out infinite; }
.timer-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); overflow: hidden; flex: 0 0 4px; }
.timer-fill {
  height: 100%;
  width: 100%;
  background: var(--blue);
  transform-origin: left center;
  transform: scaleX(1);
  transition: transform .25s linear, background-color .3s;
}
.timer-fill.hurry { background: var(--red); }

.dots { display: flex; gap: 6px; }
.dots span {
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid rgba(0, 183, 255, .6);
  transition: transform .3s var(--ease);
}
.dots span.on { background: var(--blue); box-shadow: 0 0 8px var(--blue); transform: scale(1.15); }

/* =====================================================================
   Ответы
   ===================================================================== */
.answer-zone { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; }
.q-card {
  position: relative;
  padding: 18px 16px;
  border-radius: 18px;
  background: linear-gradient(150deg, rgba(0, 183, 255, .12), rgba(224, 42, 54, .06)), var(--panel-2);
  border: 1px solid rgba(0, 183, 255, .45);
  box-shadow: 0 0 22px rgba(0, 183, 255, .15);
}
.q-card.small-card { padding: 14px; }
.q-label { color: var(--blue); font-weight: 900; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.q-text { font-size: 21px; font-weight: 900; line-height: 1.25; }
.small-card .q-text { font-size: 18px; }
.q-text .w { display: inline-block; opacity: 0; transform: translateY(6px); animation: word-in .35s var(--ease) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; } }

.q-card.fly-out { animation: fly-out .45s var(--ease) forwards; }
.q-card.fly-in  { animation: fly-in .45s var(--ease); }
@keyframes fly-out { to { opacity: 0; transform: translateY(-40px) scale(.95); } }
@keyframes fly-in  { from { opacity: 0; transform: translateX(40px) scale(.97); } to { opacity: 1; transform: none; } }

.input-wrap { position: relative; }
.input.answer { resize: none; padding-right: 54px; line-height: 1.35; }
.counter {
  position: absolute; right: 12px; bottom: 10px;
  font-size: 12px; font-weight: 800; color: var(--grey);
  font-variant-numeric: tabular-nums;
}
.counter.warn { color: var(--red); }

.waiting { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; animation: drop-in .35s var(--ease); }
.progress { display: flex; flex-direction: column; gap: 6px; }
.progress.compact { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.prog {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; border-radius: 12px;
  background: #101217; font-weight: 800; font-size: 14px;
}
.progress.compact .prog { padding: 5px 9px; font-size: 12px; border-radius: 999px; }
.prog .st { margin-left: auto; }
.progress.compact .prog .st { margin-left: 2px; }
.prog.done { border: 1px solid rgba(77, 255, 136, .35); }

/* =====================================================================
   Голосование
   ===================================================================== */
.answers { display: flex; flex-direction: column; gap: 8px; }
.ans {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 14px;
  border-radius: 14px;
  background: #101217;
  border: 1px solid rgba(255, 255, 255, .08);
  opacity: 0;
  animation: pop-in .35s var(--ease) forwards;
}
.ans .txt { flex: 1; font-size: 16px; font-weight: 700; line-height: 1.3; word-break: break-word; }
.pick {
  flex: 0 0 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: transparent;
  font-size: 22px;
  cursor: pointer;
  opacity: .45;
  transition: transform .15s var(--ease), opacity .15s, background-color .15s, border-color .15s;
  touch-action: manipulation;
}
.pick.on { opacity: 1; transform: scale(1.08); }
.pick.like.on { background: rgba(255, 214, 0, .18); border-color: #ffd600; }
.pick.ai.on { background: rgba(255, 59, 59, .18); border-color: var(--red); }
.pick:active { transform: scale(.9); }
.ans.liked { border-color: rgba(255, 214, 0, .6); }
.ans.guessed { border-color: rgba(255, 59, 59, .6); }
.ans.liked.guessed { border-color: #ff9d2e; }

.ok-label { text-align: center; font-weight: 900; color: #4dff88; animation: pop-in .3s var(--ease); }

/* =====================================================================
   Разбор
   ===================================================================== */
.reveal { display: flex; flex-direction: column; gap: 14px; }
.rv-item { display: flex; flex-direction: column; gap: 6px; }
.rv-q { font-weight: 900; font-size: 15px; color: var(--blue); }
.rv-ans {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 9px 12px;
  border-radius: 12px;
  background: #101217;
  border: 1px solid rgba(255, 255, 255, .06);
  opacity: 0;
  transform: rotateX(80deg);
  transform-origin: top center;
  animation: flip-in .45s var(--ease) forwards;
}
@keyframes flip-in { to { opacity: 1; transform: none; } }
.rv-ans .txt { font-weight: 700; font-size: 15px; word-break: break-word; }
.rv-ans .likes { font-weight: 900; color: #ffd600; white-space: nowrap; }
.rv-ans .author { grid-column: 1 / -1; font-size: 12px; color: var(--grey); font-weight: 700; }
.rv-ans.ai { border-color: rgba(255, 59, 59, .55); background: linear-gradient(90deg, rgba(255, 59, 59, .12), #101217); }
.rv-ans.ai .author { color: #ff8a8a; }
.rv-ans.mine-like { box-shadow: inset 3px 0 0 #ffd600; }
.rv-ans.mine-guess { outline: 1px dashed rgba(255, 255, 255, .4); outline-offset: -3px; }
.rv-me {
  font-size: 13px; font-weight: 800; line-height: 1.45;
  padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, .04);
}
.rv-me .good { color: #4dff88; }
.rv-me .bad { color: #ff8a8a; }

.rv-sub { text-align: left; }
.rv-ans .counts { display: flex; gap: 6px; align-items: center; }
.rv-ans .cnt {
  font-weight: 900; font-size: 13px; white-space: nowrap;
  padding: 3px 7px; border-radius: 999px; background: rgba(255, 255, 255, .06);
}
.rv-ans .cnt.like { color: #ffd600; }
.rv-ans .cnt.ai { color: #ff8a8a; }
.rv-ans .cnt.zero { opacity: .35; }
.rv-ans.mine { border-color: rgba(0, 183, 255, .7); background: linear-gradient(90deg, rgba(0, 183, 255, .14), #101217); }

/* пропуск в вопросах «вставь слово» */
.q-text .w.blank {
  border-bottom: 3px solid var(--blue);
  margin: 0 2px;
  box-shadow: 0 6px 10px -8px var(--blue);
}

/* =====================================================================
   Таблицы
   ===================================================================== */
.table { position: relative; display: flex; flex-direction: column; gap: 6px; }
.row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 12px;
  background: #101217;
  border: 1px solid rgba(255, 255, 255, .06);
  font-weight: 800;
  font-size: 14px;
  will-change: transform;
}
.row .pos { color: var(--grey); text-align: center; }
.row .nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .ai-stat { font-size: 11px; color: var(--grey); white-space: nowrap; }
.row .score { font-variant-numeric: tabular-nums; min-width: 56px; text-align: right; font-size: 16px; }
.row .rdelta { grid-column: 2 / -1; font-size: 12px; color: var(--grey); }
.row .rdelta .plus { color: #4dff88; }
.row .rdelta .minus { color: #ff8a8a; }
.row.me { border-color: rgba(0, 183, 255, .6); background: linear-gradient(90deg, rgba(0, 183, 255, .14), #101217); }
.row.ai { border-color: rgba(255, 59, 59, .5); background: linear-gradient(90deg, rgba(255, 59, 59, .14), #101217); }
.row.up { animation: row-glow 1.2s ease-out; }
@keyframes row-glow {
  0%   { box-shadow: 0 0 0 rgba(77, 255, 136, 0); }
  30%  { box-shadow: 0 0 18px rgba(77, 255, 136, .55); }
  100% { box-shadow: 0 0 0 rgba(77, 255, 136, 0); }
}
.place-1 .pos { color: #ffd600; }
.place-2 .pos { color: #e0e0e0; }
.place-3 .pos { color: #d08a4a; }

/* =====================================================================
   Финал
   ===================================================================== */
.winner {
  text-align: center;
  font-size: 26px;
  font-weight: 900;
  padding: 10px 0 4px;
  animation: pop-in .6s var(--ease);
}
.winner.humans { color: #fff; text-shadow: 0 0 16px rgba(0, 183, 255, .8); }
.winner.ai { color: #ff6b6b; text-shadow: 0 0 18px rgba(255, 59, 59, .9); animation: pop-in .6s var(--ease), ai-flicker 1.6s steps(2) .6s 2; }
@keyframes ai-flicker { 50% { opacity: .55; } }

.confetti { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; }
.confetti i {
  position: absolute; top: -12px;
  width: 8px; height: 14px; border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translate3d(var(--dx), 110vh, 0) rotate(var(--rot)); }
}

/* =====================================================================
   Статистика
   ===================================================================== */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat {
  padding: 14px 12px;
  border-radius: 16px;
  background: var(--panel-2);
  border: 1px solid rgba(0, 183, 255, .2);
  animation: pop-in .4s var(--ease) both;
}
.stat .v { font-size: 26px; font-weight: 900; }
.stat .k { font-size: 12px; color: var(--grey); font-weight: 700; margin-top: 2px; }

/* =====================================================================
   Заставка стадии
   ===================================================================== */
.stage-intro {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 6, 7, .78);
  opacity: 0; pointer-events: none;
  transition: opacity .3s;
}
.stage-intro.show { opacity: 1; pointer-events: auto; }
.intro-card { text-align: center; transform: scale(.8); transition: transform .45s var(--ease); }
.stage-intro.show .intro-card { transform: scale(1); }
.intro-title { font-size: 36px; font-weight: 900; text-shadow: 0 0 18px rgba(0, 183, 255, .9); }
.intro-sub { margin-top: 8px; font-size: 16px; color: var(--grey); font-weight: 700; }

/* ---------- «Уменьшить движение» ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}