/* ============================================================
   Города — комната и витрина
   ============================================================ */

.cities-stage{display:grid;grid-template-columns:1fr 300px;gap:0;min-height:520px}
.cities-main{display:flex;flex-direction:column;gap:18px;padding:26px 28px}
.cities-side{display:flex;flex-direction:column;gap:12px;padding:22px 20px;border-left:1px solid var(--line);background:var(--surface-2)}

/* ---------- Ход, буква и таймер ---------- */
.cities-turn{display:flex;align-items:center;gap:20px;padding:18px 22px;border-radius:var(--r-lg);background:linear-gradient(135deg,#f3f0ff,#e6f0ff);transition:background .25s}
.cities-turn.my-turn{background:linear-gradient(135deg,#e4fbe9,#dcf6ff);box-shadow:inset 0 0 0 2px rgba(37,201,138,.35)}
.cities-letter-wrap{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:96px}
.cities-letter-label{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cities-letter{display:grid;place-items:center;width:76px;height:76px;border-radius:22px;background:#fff;color:var(--accent);font-size:40px;font-weight:800;line-height:1;box-shadow:var(--shadow-md)}
.cities-letter.pulse{animation:letterPop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes letterPop{0%{transform:scale(.7) rotate(-8deg);background:var(--accent);color:#fff}60%{transform:scale(1.12) rotate(3deg)}100%{transform:none}}

.cities-timer{position:relative;width:72px;height:72px;flex:0 0 auto;display:grid;place-items:center}
.cities-timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cities-timer circle{fill:none;stroke-width:6;stroke-linecap:round}
.timer-track{stroke:rgba(28,32,48,.1)}
/* 195 ≈ длина окружности радиуса 31: заполнение задаётся переменной --progress. */
.timer-fill{stroke:var(--accent);stroke-dasharray:195;stroke-dashoffset:calc(195 - 195 * var(--progress) / 100%);transition:stroke-dashoffset .9s linear,stroke .3s}
.cities-timer.hurry .timer-fill{stroke:var(--coral)}
.cities-timer b{font-size:22px;font-weight:800}
.cities-timer.hurry b{color:var(--coral-ink);animation:citiesHurry 1s ease-in-out infinite}
@keyframes citiesHurry{50%{scale:1.2}}
.cities-turn-text{display:flex;flex-direction:column;min-width:0}
.cities-turn-text small{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cities-turn-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px}

/* ---------- Ввод ---------- */
.cities-form{display:flex;gap:10px;border-radius:var(--r)}
.cities-form.ok input{animation:citiesOk .7s ease-out}
@keyframes citiesOk{0%{background:#dcf7ea;border-color:var(--mint);box-shadow:0 0 0 6px rgba(37,201,138,.25)}}
.cities-form.bad{animation:fxShake .42s cubic-bezier(.36,.07,.19,.97)}
.cities-form.bad input{animation:citiesBad .7s ease-out}
@keyframes citiesBad{0%{background:#ffe7e2;border-color:var(--coral);box-shadow:0 0 0 6px rgba(255,107,87,.25)}}
.cities-form input{flex:1;min-width:0;height:52px;padding:0 18px;border:1px solid var(--line-strong);border-radius:var(--r);background:#fff;font-size:17px;font-weight:600;transition:border-color .15s,background .15s}
.cities-form input:focus{outline:none;border-color:var(--accent)}
.cities-form input:disabled{background:var(--surface-2);color:var(--faint)}
.cities-form .primary-link{min-height:52px}
.cities-hint{color:var(--muted);font-size:13px}

/* ---------- Цепочка городов ---------- */
.cities-chain{flex:1;min-height:150px;max-height:280px;overflow-y:auto;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px;padding:16px;border-radius:var(--r-lg);background:var(--surface-2)}
.cities-chain-empty{width:100%;align-self:center;color:var(--faint);font-size:14px;text-align:center}
.cities-chip{padding:7px 14px;border-radius:var(--r-pill);background:#fff;color:var(--text);font-size:14px;font-weight:600;box-shadow:var(--shadow-sm);animation:chipIn .3s ease}
.cities-chip.last{background:var(--accent);color:#fff;box-shadow:0 6px 16px rgba(110,79,245,.28);animation:chipIn .3s ease,chipGlow 2s ease-in-out .3s infinite}
@keyframes chipGlow{50%{box-shadow:0 8px 22px rgba(110,79,245,.5)}}
@keyframes chipIn{from{transform:translateY(8px) scale(.9);opacity:0}}

/* ---------- Игроки и лента ---------- */
.cities-players-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cities-players-head b{color:var(--ink);font-size:15px}
.cities-players{display:flex;flex-direction:column;gap:8px}
.cities-player{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow-sm);transition:box-shadow .2s,opacity .2s}
.cities-player.active{box-shadow:0 0 0 2px var(--accent),var(--shadow-sm);animation:fxTurnGlow 1.8s ease-in-out infinite}
.cities-player.out{opacity:.45}
.cities-player div{display:flex;flex:1;min-width:0;flex-direction:column}
.cities-player strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.cities-player small{color:var(--muted);font-size:11px}
.cities-avatar{width:34px;height:34px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:13px;font-weight:700;overflow:hidden}
.cities-avatar img{width:100%;height:100%;object-fit:cover}
.cities-lives{flex:0 0 auto;color:var(--coral);font-size:13px;letter-spacing:1px;transition:color .3s}
.cities-start{margin-top:6px}
.cities-give-up{margin-top:2px;align-self:center}
.cities-log{margin-top:4px;display:flex;flex-direction:column;gap:6px;max-height:220px;overflow-y:auto}
.cities-log-row{display:flex;flex-direction:column;padding:7px 10px;border-radius:10px;background:#fff;font-size:12px}
.cities-log-row b{font-size:11px;color:var(--muted);font-weight:700}
.cities-log-row.ok span{color:var(--green-ink);font-weight:600}
.cities-log-row.bad span{color:var(--coral-ink)}

/* ---------- Итог ---------- */
.cities-result-overlay{position:absolute;z-index:20;inset:0;display:grid;place-items:center;padding:20px;background:rgba(240,242,245,.72)}
#citiesShell{position:relative}

/* ---------- Витрина на странице игры ---------- */
.cities-hero-visual{position:relative;display:flex;flex-direction:column;justify-content:center;gap:14px;min-height:400px;padding:28px;border-radius:var(--r-lg);background:linear-gradient(160deg,#ece7ff,#dff1ff)}
.cities-hero-letter{align-self:flex-start;display:grid;place-items:center;width:88px;height:88px;border-radius:26px;background:#fff;color:var(--accent);font-size:46px;font-weight:800;box-shadow:var(--shadow-md);animation:letterFloat 3.4s ease-in-out infinite}
@keyframes letterFloat{50%{transform:translateY(-10px) rotate(-4deg)}}
.cities-hero-chain{display:flex;flex-wrap:wrap;gap:8px}
.cities-hero-chain span{padding:8px 14px;border-radius:var(--r-pill);background:#fff;font-size:14px;font-weight:600;box-shadow:var(--shadow-sm)}
.cities-hero-chain span:last-child{background:var(--accent);color:#fff}
.cities-hero-hearts{display:flex;align-items:center;gap:8px;margin-top:6px;padding:10px 14px;border-radius:var(--r);background:rgba(255,255,255,.75);width:fit-content}
.cities-hero-hearts b{color:var(--coral);letter-spacing:2px}
.cities-hero-hearts small{color:var(--muted);font-size:12px}

@media(max-width:900px){
  .cities-stage{grid-template-columns:1fr}
  .cities-side{border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .cities-main{padding:18px 14px;gap:14px}
  .cities-turn{flex-wrap:wrap;gap:14px;padding:14px}
  .cities-letter{width:62px;height:62px;font-size:32px}
  .cities-letter-wrap{min-width:72px}
  .cities-timer{width:58px;height:58px}
  .cities-timer b{font-size:18px}
  .cities-turn-text strong{font-size:17px}
  .cities-form{flex-direction:column}
  .cities-form .primary-link{width:100%}
  .cities-chain{max-height:200px}
}