/* ============ Экран телевизора ============ */

body { overflow: hidden; }
#app { display: flex; flex-direction: column; height: 100vh; padding: 3vh 3.5vw; }

.connecting { display: grid; place-items: center; height: 100%; gap: 12px; text-align: center; align-content: center; }

/* ---------- ЛОББИ ---------- */
.lobby { display: grid; grid-template-columns: minmax(340px, 30vw) 1fr; gap: 3vw; height: 100%; align-items: stretch; }

.lobby-left { display: flex; flex-direction: column; gap: 2.4vh; justify-content: center; }
.lobby .wordmark { font-size: clamp(30px, 3.4vw, 54px); }
.lobby-tagline { color: var(--muted); font-size: clamp(14px, 1.1vw, 19px); margin-top: -1vh; }

/* QR-карточка с бегущей неоновой рамкой */
.qr-card {
  position: relative;
  border-radius: var(--r-l);
  padding: 4px;
  background: conic-gradient(from var(--spin, 0deg), var(--cyan), var(--pink), var(--amber), var(--lime), var(--cyan));
  animation: qr-spin 6s linear infinite;
  width: fit-content;
}
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes qr-spin { to { --spin: 360deg; } }
.qr-card img {
  display: block;
  width: min(24vw, 38vh);
  border-radius: calc(var(--r-l) - 4px);
  background: #fff;
}
.join-hint { font-size: clamp(14px, 1.15vw, 20px); font-weight: 600; }
.join-hint .url { color: var(--cyan); font-weight: 800; }
.join-hint .code {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(28px, 3vw, 52px);
  letter-spacing: 0.22em;
  color: var(--lime);
  text-shadow: 0 0 24px color-mix(in srgb, var(--lime) 55%, transparent);
}

.lobby-right { display: flex; flex-direction: column; gap: 2.6vh; min-width: 0; justify-content: center; }
.lobby-right h2 { font-size: clamp(17px, 1.4vw, 24px); color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }
.players-cloud { display: flex; flex-wrap: wrap; gap: 12px; min-height: 54px; align-content: flex-start; }
.players-cloud .chip { font-size: clamp(14px, 1.1vw, 19px); padding: 10px 18px 10px 12px; }
.players-cloud .empty { color: var(--muted); font-style: italic; padding: 10px 0; }

.games-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.6vh 1.2vw; }
.games-grid .game-card { padding: 2vh 1.4vw; }
.games-grid .game-card .icon { font-size: clamp(26px, 2.4vw, 42px); width: clamp(52px, 4.6vw, 80px); height: clamp(52px, 4.6vw, 80px); }
.games-grid .game-card .nm { font-size: clamp(16px, 1.5vw, 26px); }
.games-grid .game-card .tg { font-size: clamp(12px, 0.95vw, 16px); }
.games-grid .game-card .need { font-size: clamp(11px, 0.85vw, 14px); }

.lobby-vip-hint { color: var(--muted); font-size: clamp(12px, 1vw, 16px); }

/* ---------- ИГРА: каркас ---------- */
.stage { display: flex; flex-direction: column; height: 100%; gap: 2.2vh; }
.stage-head { display: flex; align-items: center; gap: 18px; }
.stage-head .pill { font-size: clamp(13px, 1vw, 17px); }
.stage-head .prog { font-family: var(--font-display); color: var(--muted); font-weight: 700; font-size: clamp(14px, 1.1vw, 19px); }
.stage-head .spacer { flex: 1; }
.stage-head .timer { width: clamp(56px, 5vw, 84px); height: clamp(56px, 5vw, 84px); font-size: clamp(18px, 1.7vw, 30px); }

.stage-main { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 3vh; min-height: 0; }

.stage-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-right: 250px; }
.stage-foot .code-hint { margin-left: auto; color: var(--muted); font-weight: 600; font-size: clamp(12px, 0.95vw, 16px); }
.stage-foot .code-hint b { color: var(--lime); font-family: var(--font-display); letter-spacing: 0.14em; }

.big-q {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 56px);
  line-height: 1.18;
  text-wrap: balance;
  max-width: 90%;
}

/* ---------- Квиз ---------- */
.opts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8vh 1.4vw; }
.opt {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 2.6vh 1.6vw;
  border-radius: var(--r-l);
  background: var(--panel);
  border: 2px solid color-mix(in srgb, var(--oc) 40%, transparent);
  font-size: clamp(18px, 1.9vw, 34px);
  font-weight: 700;
  transition: opacity 0.4s, transform 0.4s, box-shadow 0.4s;
  position: relative;
}
.opt .letter {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(18px, 1.7vw, 30px);
  color: #0b0b14;
  background: var(--oc);
  width: clamp(44px, 3.6vw, 64px);
  height: clamp(44px, 3.6vw, 64px);
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.opt.o0 { --oc: var(--opt-0); } .opt.o1 { --oc: var(--opt-1); }
.opt.o2 { --oc: var(--opt-2); } .opt.o3 { --oc: var(--opt-3); }
.opt.win { border-color: var(--oc); box-shadow: 0 0 44px color-mix(in srgb, var(--oc) 40%, transparent); transform: scale(1.02); }
.opt.lose { opacity: 0.3; }
.opt .cnt {
  margin-left: auto;
  font-family: var(--font-display);
  color: var(--oc);
  font-size: clamp(18px, 1.9vw, 34px);
}

.gains-row { display: flex; gap: 12px; flex-wrap: wrap; }
.gain-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
  border-radius: 999px; padding: 8px 16px; font-weight: 700;
  font-size: clamp(13px, 1.05vw, 18px);
  animation: chip-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.gain-chip b { color: var(--accent); font-family: var(--font-display); }

/* ---------- Блеф ---------- */
.write-hint { display: flex; align-items: center; gap: 16px; color: var(--muted); font-size: clamp(15px, 1.3vw, 23px); font-weight: 600; }
.write-hint .phone { font-size: clamp(30px, 3vw, 52px); animation: phone-wiggle 1.6s ease infinite; }
@keyframes phone-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

.bluff-opts { display: flex; flex-direction: column; gap: 1.4vh; max-width: 74%; }
.bluff-opt {
  display: flex; align-items: baseline; gap: 16px;
  padding: 1.6vh 1.4vw;
  border-radius: var(--r-m);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: clamp(17px, 1.7vw, 30px);
  font-weight: 700;
}
.bluff-opt .num { font-family: var(--font-display); color: var(--accent); font-size: 0.8em; }

.reveal-list { display: flex; flex-direction: column; gap: 1.3vh; max-width: 86%; }
.reveal-item {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 1.3vh 1.3vw;
  border-radius: var(--r-m);
  background: var(--panel);
  border: 1px solid var(--line);
  font-size: clamp(14px, 1.25vw, 22px);
  animation: enter 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.reveal-item .txt { font-weight: 800; }
.reveal-item .meta { color: var(--muted); font-size: 0.82em; font-weight: 600; }
.reveal-item .meta b { color: var(--pink); }
.reveal-item.truth-card {
  border: 2px solid var(--lime);
  background: color-mix(in srgb, var(--lime) 8%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--lime) 22%, transparent);
  font-size: clamp(18px, 1.8vw, 32px);
}
.reveal-item.truth-card .badge {
  font-family: var(--font-display); font-weight: 900; color: #0b0b14;
  background: var(--lime); border-radius: 10px; padding: 4px 12px; font-size: 0.62em;
}

/* ---------- Кто из нас ---------- */
.votes-bars { display: flex; flex-direction: column; gap: 1.4vh; max-width: 80%; width: 100%; }
.vote-bar { display: flex; align-items: center; gap: 14px; font-size: clamp(15px, 1.4vw, 25px); font-weight: 700; }
.vote-bar .ava { font-size: 1.5em; }
.vote-bar .nm { min-width: 7em; }
.vote-bar .track { flex: 1; height: clamp(20px, 2vh, 30px); border-radius: 999px; background: var(--panel); overflow: hidden; }
.vote-bar .fill {
  display: block;
  height: 100%; border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 20px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: fill-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fill-grow { from { width: 0; } }
.vote-bar .n { font-family: var(--font-display); color: var(--accent); min-width: 1.6em; text-align: right; }

.titles-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4vh 2vw; max-width: 90%; }
.title-item { display: flex; gap: 12px; align-items: center; font-size: clamp(13px, 1.15vw, 20px); }
.title-item .ava { font-size: 1.8em; }
.title-item .t { color: var(--muted); font-weight: 600; }
.title-item .t b { color: var(--ink); display: block; font-family: var(--font-display); font-size: 0.9em; }

/* ---------- Ставки ---------- */
.numline-wrap { max-width: 88%; width: 100%; padding: 8vh 3vw 12vh; }
.numline { position: relative; height: 4px; background: var(--line); border-radius: 999px; }
.numline .mark {
  position: absolute; top: 16px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.numline .mark .ava { font-size: clamp(22px, 2vw, 36px); }
.numline .mark .val { font-weight: 700; font-size: clamp(11px, 0.9vw, 15px); color: var(--muted); white-space: nowrap; }
.numline .mark.exact .ava { filter: drop-shadow(0 0 12px var(--lime)); }
.numline .truth-mark {
  position: absolute; top: -10px; bottom: -10px; width: 4px; border-radius: 2px;
  background: var(--accent); transform: translateX(-50%);
  box-shadow: 0 0 18px var(--accent);
}
.numline .truth-label {
  position: absolute; bottom: 22px; transform: translateX(-50%);
  font-family: var(--font-display); font-weight: 900;
  color: var(--accent); font-size: clamp(16px, 1.6vw, 28px); white-space: nowrap;
}

/* ---------- Результаты ---------- */
.results-wrap { display: flex; flex-direction: column; gap: 4vh; align-items: center; }
.results-wrap h2.rt { font-size: clamp(22px, 2.4vw, 42px); }
.board-list { display: flex; flex-direction: column; gap: 8px; width: min(560px, 80%); }
.board-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border-radius: var(--r-s);
  padding: 8px 16px; font-weight: 600; font-size: clamp(13px, 1.05vw, 18px);
}
.board-row .rank { color: var(--muted); font-family: var(--font-display); width: 1.6em; }
.board-row .pts { margin-left: auto; color: var(--accent); font-family: var(--font-display); }

/* Кнопки управления в углу */
.host-controls { position: fixed; right: 24px; bottom: 20px; display: flex; gap: 10px; z-index: 60; }
.host-controls .btn { font-size: 12px; padding: 9px 16px; opacity: 0.75; }
.host-controls .btn:hover { opacity: 1; }