/* «Контекстно» — оформление. Мобильный-первый: сначала 360–430 px, потом десктоп.
   Никаких внешних шрифтов и картинок — только системные шрифты и CSS. */

/* ============================ 1. Токены ============================ */
:root {
  /* фон и поверхности */
  --ink:        #0a0a14;
  --ink-2:      #10101d;
  --panel:      #15152700;
  --card:       #14142a;
  --card-2:     #1b1b33;
  --line:       rgba(255, 255, 255, 0.10);
  --line-soft:  rgba(255, 255, 255, 0.06);
  --hi:         inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* текст */
  --text:       #f5f3ff;
  --text-dim:   #b6b2d4;
  --text-soft:  #8b87ab;

  /* акценты */
  --mint:       #38e5a6;
  --mint-ink:   #032117;
  --pink:       #ff6bb5;
  --pink-ink:   #2b0517;

  /* шкала близости */
  --h-win:      #ffd85e;
  --h-1:        #ff4f5e;
  --h-2:        #ff8f2e;
  --h-3:        #d7e04a;
  --h-4:        #4cc9ff;
  --h-5:        #8b93b8;

  /* геометрия */
  --r-lg:       22px;
  --r-md:       16px;
  --r-sm:       11px;
  --pad:        16px;
  --gap:        14px;

  --font: "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", "Consolas", "SF Mono", ui-monospace, monospace;
}

/* ============================ 2. База ============================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

[hidden] { display: none !important; }

h1, h2, h3, p, ul, li, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
b, strong { font-weight: 800; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.05em; height: 1.05em; flex: 0 0 auto; fill: none; stroke: currentColor;
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* фоновое свечение: держим в fixed-слое, чтобы не появлялось прокрутки */
.glow { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.glow span { position: absolute; display: block; border-radius: 50%; filter: blur(70px); opacity: .5; }
.glow__a { width: 60vw; height: 60vw; max-width: 520px; max-height: 520px; top: -14vh; left: -18vw;
           background: radial-gradient(circle, rgba(56,229,166,.42), transparent 70%); animation: float1 22s ease-in-out infinite; }
.glow__b { width: 56vw; height: 56vw; max-width: 480px; max-height: 480px; top: 32vh; right: -22vw;
           background: radial-gradient(circle, rgba(255,107,181,.36), transparent 70%); animation: float2 26s ease-in-out infinite; }
.glow__c { width: 70vw; height: 70vw; max-width: 560px; max-height: 560px; bottom: -24vh; left: 8vw;
           background: radial-gradient(circle, rgba(76,201,255,.22), transparent 72%); animation: float1 30s ease-in-out infinite reverse; }
@keyframes float1 { 50% { transform: translate3d(6vw, 5vh, 0) scale(1.12); } }
@keyframes float2 { 50% { transform: translate3d(-7vw, -4vh, 0) scale(1.08); } }

/* ============================ 3. Верхняя панель ============================ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px calc(9px + env(safe-area-inset-bottom, 0px));
  background: rgba(10, 10, 20, .74);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(14px);
}
.topbar__brand { display: flex; align-items: center; gap: 8px; min-width: 0; margin-right: auto; }
.logo {
  width: 22px; height: 22px; border-radius: 50%;
  border: 3px solid var(--mint); position: relative; flex: 0 0 auto;
}
.logo::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 6px; height: 6px;
  border-radius: 50%; background: var(--pink);
}
.brandname { font-weight: 900; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }

.codebox {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line);
  cursor: pointer; color: var(--text);
  transition: transform .12s ease, border-color .12s ease;
}
.codebox:active { transform: scale(.96); }
.codebox__label { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-soft); }
.codebox__value { font-family: var(--mono); font-weight: 800; font-size: 15px; letter-spacing: .12em; color: var(--mint); }
.codebox .icon { width: 14px; height: 14px; color: var(--text-soft); }

.net { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-soft); }
.net__dot { width: 9px; height: 9px; border-radius: 50%; background: #61617f; transition: background .2s; }
.net[data-state="on"]  .net__dot { background: var(--mint); box-shadow: 0 0 0 4px rgba(56,229,166,.16); }
.net[data-state="on"]  .net__text { color: var(--mint); }
.net[data-state="wait"] .net__dot { background: var(--h-3); animation: blink 1s ease-in-out infinite; }
.net[data-state="off"] .net__dot { background: var(--h-1); }
.net[data-state="off"] .net__text { color: var(--h-1); }
@keyframes blink { 50% { opacity: .3; } }
@media (max-width: 430px) { .net__text { display: none; } }

/* ============================ 4. Каркас ============================ */
.app {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  padding: 16px 14px 28px;
  display: flex; flex-direction: column; gap: var(--gap);
}
.screen { display: flex; flex-direction: column; gap: var(--gap); animation: screenin .22s ease both; }
.screen--center { min-height: 62vh; justify-content: center; align-items: center; text-align: center; }
@keyframes screenin { from { opacity: 0; transform: translateY(6px); } }

.footer {
  position: relative; z-index: 1;
  max-width: 520px; margin: 0 auto;
  padding: 6px 14px 30px;
  color: var(--text-soft); font-size: 11px; line-height: 1.5; text-align: center;
}
.footer__soft { margin-top: 4px; opacity: .8; }
.noscript { padding: 24px; text-align: center; color: var(--h-1); }

/* ============================ 5. Типографика ============================ */
.eyebrow {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--text-soft);
}
.hero { padding: 8px 2px 0; }
.hero__title {
  font-size: clamp(38px, 13vw, 62px); font-weight: 900; line-height: .95;
  letter-spacing: -0.045em; margin: 8px 0 10px;
  background: linear-gradient(96deg, var(--mint) 0%, #a9ffd8 38%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__lead { color: var(--text-dim); font-size: 15px; max-width: 44ch; }
.invitenote {
  margin-top: 10px; padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(56,229,166,.10); border: 1px solid rgba(56,229,166,.32);
  color: var(--mint); font-size: 13px; font-weight: 600;
}
.hint { color: var(--text-soft); font-size: 12.5px; line-height: 1.5; }
.hint--wait { color: var(--h-3); }
.warnline { color: var(--h-1); font-weight: 700; }

/* ============================ 6. Карточки, кнопки, поля ============================ */
.card {
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--pad); box-shadow: var(--hi), 0 14px 34px -22px rgba(0,0,0,.9);
  display: flex; flex-direction: column; gap: 12px;
}
.card__head { display: flex; align-items: center; gap: 10px; }
.card__title { font-size: 17px; font-weight: 800; letter-spacing: -0.015em; flex: 1; min-width: 0; }
.counter {
  font-family: var(--mono); font-size: 13px; font-weight: 800;
  background: var(--card-2); border: 1px solid var(--line);
  padding: 3px 9px; border-radius: 999px; color: var(--text-dim);
}
.card--invite { border-color: rgba(56,229,166,.28); background: linear-gradient(180deg, rgba(56,229,166,.12), var(--card)); }
.card--host { border-color: rgba(255,107,181,.32); background: linear-gradient(180deg, rgba(255,107,181,.12), var(--card)); }

.badge {
  align-self: flex-start; font-size: 10px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}
.badge--host { background: var(--pink); color: var(--pink-ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--card-2); color: var(--text);
  padding: 12px 16px; min-height: 46px;
  font-weight: 800; font-size: 15px; letter-spacing: -0.01em;
  cursor: pointer; text-align: center;
  transition: transform .12s ease, filter .15s ease, background .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(.985); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn--primary { background: linear-gradient(180deg, #57f0b6, var(--mint)); color: var(--mint-ink); border-color: transparent;
                box-shadow: 0 10px 26px -14px rgba(56,229,166,.85); }
.btn--ghost  { background: transparent; border-color: var(--line); color: var(--text); }
.btn--outline { background: rgba(56,229,166,.10); border: 1.5px solid rgba(56,229,166,.6); color: var(--mint); }
.btn--outline:hover:not(:disabled) { background: rgba(56,229,166,.18); }
.btn--hint:disabled { color: var(--text-soft); border-color: var(--line); }
.btn--ghost:hover:not(:disabled) { background: rgba(255,255,255,.05); }
.btn--big    { min-height: 54px; font-size: 16.5px; border-radius: 18px; }
.btn--small  { min-height: 38px; padding: 8px 13px; font-size: 13.5px; border-radius: 12px; }
.btn--hint   { border-color: rgba(255,210,63,.35); color: var(--h-3); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; }
.btnrow .btn { flex: 1 1 46%; }

.field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.field__label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }

.input {
  width: 100%; min-height: 48px; padding: 12px 14px;
  background: rgba(0,0,0,.34); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 16px; /* 16px — чтобы iOS не зумил при фокусе */
  transition: border-color .15s ease, box-shadow .15s ease;
}
.input::placeholder { color: #6b6889; }
.input:focus { outline: none; border-color: var(--mint); box-shadow: 0 0 0 3px rgba(56,229,166,.20); }
.input--code { text-transform: uppercase; font-family: var(--mono); font-weight: 800; letter-spacing: .3em; font-size: 20px; text-align: center; }
.invitelink {
  flex: 1 1 100%; min-width: 0; margin: 0;
  font-size: 12.5px; line-height: 1.45; color: var(--text-dim);
  background: rgba(0,0,0,.34); border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 9px 11px; overflow-wrap: anywhere; word-break: break-word;
}
.input--guess { font-size: 17px; font-weight: 700; min-height: 54px; padding: 12px 16px; }

/* ============================ 7. Лобби ============================ */
.invite__top { display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; }
.invite__code {
  font-family: var(--mono); font-weight: 900; font-size: clamp(30px, 11.5vw, 46px);
  letter-spacing: .16em; line-height: 1.1; color: var(--mint); text-shadow: 0 0 26px rgba(56,229,166,.5);
  flex: 1 1 auto; min-width: 0;
  white-space: nowrap; word-break: keep-all; overflow-wrap: normal;
}
.invite__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.invite__row .btn { flex: 0 0 auto; padding: 8px 12px; min-height: 40px; }

.players { display: flex; flex-direction: column; gap: 8px; }
.player {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 13px; border-radius: var(--r-md);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-soft);
}
.player--me { border-color: rgba(56,229,166,.45); background: rgba(56,229,166,.10); }
.player--host .player__nick::after { content: "ведущий"; margin-left: 8px; font-size: 10px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase; color: var(--pink);
  background: rgba(255,107,181,.14); padding: 2px 7px; border-radius: 999px; }
.player__nick { font-weight: 800; flex: 1; min-width: 0; }
.player__me { font-size: 11px; font-weight: 800; color: var(--mint); letter-spacing: .1em; text-transform: uppercase; }
.player__score { font-family: var(--mono); font-weight: 900; font-size: 16px; color: var(--h-win); }
.player__off { font-size: 11px; color: var(--text-soft); }

.segmented { display: flex; gap: 6px; flex-wrap: wrap; }
.seg {
  flex: 1 1 auto; min-width: 46px; min-height: 44px;
  background: rgba(0,0,0,.28); border: 1px solid var(--line); border-radius: var(--r-sm);
  font-family: var(--mono); font-weight: 800; font-size: 16px; color: var(--text-dim);
  cursor: pointer; transition: all .15s ease;
}
.seg[aria-pressed="true"] { background: var(--mint); color: var(--mint-ink); border-color: transparent; }

.search { display: flex; flex-direction: column; gap: 8px; }
/* Список стоит в потоке: он раздвигает кнопки вниз, а не накрывает их.
   Так «что видно» и «куда попадает палец» всегда совпадают. */
.suggest {
  position: static; max-height: 208px; overflow-y: auto;
  background: #1d1d38; border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 14px 30px -20px #000; padding: 5px; margin: 0;
  overscroll-behavior: contain;
}
.suggest__item {
  display: block; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; background: none; border: 0;
  color: var(--text); font-size: 15px; font-weight: 600; cursor: pointer;
}
.suggest__item:hover, .suggest__item:focus-visible { background: rgba(56,229,166,.16); outline: none; }

.startbox { display: flex; flex-direction: column; gap: 8px; }

/* ============================ 8. Раунд ============================ */
.roundhead { display: flex; align-items: flex-end; gap: 12px; justify-content: space-between; }
.roundhead__title { font-size: clamp(26px, 8.4vw, 34px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; margin-top: 4px; }
.roundhead__title span { color: var(--mint); }
.roundhead__host { text-align: right; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.roundhead__host strong { font-size: 16px; font-weight: 800; }

.roundgrid { display: flex; flex-direction: column; gap: var(--gap); }
.roundgrid__main, .roundgrid__side { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }

.card--hostword { border-color: rgba(255,107,181,.4); background: linear-gradient(180deg, rgba(255,107,181,.16), var(--card)); }
.hostword {
  font-size: clamp(28px, 10vw, 40px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05;
  color: var(--pink); text-shadow: 0 0 30px rgba(255,107,181,.45); overflow-wrap: anywhere;
}

.waitbox { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-radius: var(--r-md); background: rgba(255,210,63,.10); border: 1px solid rgba(255,210,63,.3);
  color: var(--h-3); font-size: 14px; font-weight: 600; }
.pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--h-3); flex: 0 0 auto;
         animation: pulse 1.3s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,210,63,.5); } 50% { box-shadow: 0 0 0 9px rgba(255,210,63,0); } }

.guessbar { display: flex; gap: 8px; align-items: stretch; }
.guessbar .input { flex: 1; }
.btn--send { flex: 0 0 auto; width: 54px; min-height: 54px; padding: 0; border-radius: var(--r-md); }
.btn--send .icon { width: 22px; height: 22px; }

.feedback {
  padding: 11px 14px; border-radius: var(--r-md); font-size: 14px; font-weight: 700;
  border: 1px solid var(--line); background: rgba(255,255,255,.05);
}
.feedback[data-kind="err"]  { color: #ffd9dd; background: rgba(255,79,94,.14); border-color: rgba(255,79,94,.45); }
.feedback[data-kind="ok"]   { color: #d6fff0; background: rgba(56,229,166,.14); border-color: rgba(56,229,166,.45); }
.feedback[data-kind="warn"] { color: #ffeec2; background: rgba(255,210,63,.14); border-color: rgba(255,210,63,.4); }

.roundbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.stat { font-size: 12.5px; color: var(--text-soft); }
.stat strong { font-family: var(--mono); font-size: 15px; color: var(--text); margin-left: 2px; }
.roundbar .btn--hint { margin-left: auto; }

.card--feed { gap: 10px; }
.feed { display: flex; flex-direction: column; gap: 7px; }

.guess {
  position: relative; display: flex; align-items: center; gap: 8px 11px; flex-wrap: wrap;
  padding: 11px 13px 11px 15px; border-radius: var(--r-md);
  background: rgba(255,255,255,.035); border: 1px solid var(--line-soft);
  overflow: hidden; isolation: isolate;
}
.guess::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--fill, 20%); z-index: -1;
  background: linear-gradient(90deg, var(--tint) 0%, transparent 100%); opacity: .22;
}
.guess__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tint); }
.guess__rank {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  min-width: 54px; justify-content: center;
  padding: 6px 9px; border-radius: 10px;
  background: var(--tint); color: #10101d;
  font-family: var(--mono); font-weight: 900; font-size: 16px; letter-spacing: -0.02em;
}
.guess__rank .icon { width: 15px; height: 15px; stroke-width: 1.8; }
.guess__mid { display: flex; flex-direction: column; gap: 1px; flex: 1 1 140px; min-width: 0; }
.guess__word { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.guess__meta { display: flex; align-items: center; gap: 4px 7px; flex-wrap: wrap; font-size: 12px; color: var(--text-soft); }
.guess__nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16ch; }
.guess__tag { font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  color: var(--h-3); border: 1px solid rgba(255,210,63,.4); border-radius: 999px; padding: 1px 7px; }
.guess__heat { font-size: 11px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tint); flex: 0 0 auto; margin-left: auto; text-align: right; white-space: nowrap;
  overflow-wrap: normal; word-break: normal; hyphens: none; }

.guess--mine { background: rgba(56,229,166,.10); border-color: rgba(56,229,166,.55); box-shadow: 0 0 0 1px rgba(56,229,166,.18); }
.guess--mine .guess__word { color: #eafff7; }
.guess--mine .guess__nick { color: var(--mint); font-weight: 800; }
.guess__tag--mine { color: var(--mint-ink); background: var(--mint); border-color: transparent; }
.guess--win { animation: winglow 1.6s ease-in-out infinite; }
@keyframes winglow { 50% { box-shadow: 0 0 0 3px rgba(255,216,94,.28); } }

.h-win { --tint: var(--h-win); }
.h-1   { --tint: var(--h-1); }
.h-2   { --tint: var(--h-2); }
.h-3   { --tint: var(--h-3); }
.h-4   { --tint: var(--h-4); }
.h-5   { --tint: var(--h-5); }
.guess.h-3 .guess__rank, .guess.h-4 .guess__rank, .guess.h-5 .guess__rank { color: #10101d; }

.empty { color: var(--text-soft); font-size: 13.5px; padding: 10px 2px; }

.legend { display: flex; flex-wrap: wrap; gap: 5px 12px; padding-top: 10px; margin-top: 2px;
          border-top: 1px dashed var(--line-soft); }
.legend__item { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--text-soft); }
.legend__item i { width: 9px; height: 9px; border-radius: 3px; background: var(--tint); flex: 0 0 auto; }
.legend__item.h-win { color: var(--h-win); }
.legend__item.h-win .icon { width: 12px; height: 12px; fill: var(--h-win); stroke: none; }
.headnote { font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }

.scorelist { display: flex; flex-direction: column; gap: 7px; }
.score {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--r-sm);
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.score--me { border-color: rgba(56,229,166,.45); background: rgba(56,229,166,.09); }
.score__nick { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.score__attr { font-size: 11.5px; color: var(--text-soft); font-family: var(--mono); }
.score__val { font-family: var(--mono); font-weight: 900; font-size: 16px; color: var(--h-win); min-width: 2ch; text-align: right; }
.score__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); flex: 0 0 auto; }
.score__dot[data-off="1"] { background: #5b5b78; }

/* ============================ 9. Итоги ============================ */
.result { display: flex; flex-direction: column; gap: 10px; padding: 6px 2px 0; }
.result__winner { font-size: clamp(27px, 9.5vw, 40px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.05; }
.result__winner .win-name { color: var(--h-win); text-shadow: 0 0 30px rgba(255,216,94,.4); }
.answer { margin-top: 6px; padding: 14px 16px; border-radius: var(--r-lg);
          background: linear-gradient(180deg, rgba(255,216,94,.14), rgba(255,216,94,.04));
          border: 1px solid rgba(255,216,94,.35); display: flex; flex-direction: column; gap: 4px; }
.answer__word { font-size: clamp(30px, 11vw, 46px); font-weight: 900; letter-spacing: -0.045em;
                color: var(--h-win); overflow-wrap: anywhere; }
.answer__hidden { color: var(--text-soft); font-size: 15px; font-weight: 600; }

.autonext { height: 4px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.autonext span { display: block; height: 100%; width: 100%; transform-origin: left;
                 background: linear-gradient(90deg, var(--mint), var(--pink)); transform: scaleX(0); }
.autonext.is-run span { animation: countdown 8s linear forwards; }
@keyframes countdown { to { transform: scaleX(1); } }

.leaderboard { display: flex; flex-direction: column; gap: 9px; }
.rank-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--card-2), var(--card));
  border: 1px solid var(--line);
}
.rank-row--1 { border-color: rgba(255,216,94,.6); background: linear-gradient(180deg, rgba(255,216,94,.18), var(--card));
               box-shadow: 0 0 0 1px rgba(255,216,94,.25), 0 16px 34px -22px rgba(255,216,94,.6); }
.rank-row--2 { border-color: rgba(205,214,255,.35); }
.rank-row--3 { border-color: rgba(255,143,46,.35); }
.rank-row--me { outline: 1px dashed rgba(56,229,166,.55); outline-offset: 3px; }
.rank-row__place { font-family: var(--mono); font-weight: 900; font-size: 19px; color: var(--text-soft); min-width: 2ch; }
.rank-row--1 .rank-row__place { color: var(--h-win); }
.rank-row__nick { flex: 1; min-width: 0; font-weight: 800; font-size: 17px; letter-spacing: -0.02em;
                  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-row__score { font-family: var(--mono); font-weight: 900; font-size: 19px; color: var(--h-win); }
.rank-row__score small { font-size: 11px; color: var(--text-soft); font-weight: 700; margin-left: 3px; }

/* ============================ 10. Служебное ============================ */
.splash { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px 18px; }
.spinner {
  width: 42px; height: 42px; border-radius: 50%;
  border: 4px solid rgba(255,255,255,.12); border-top-color: var(--mint);
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.splash__title { font-size: 20px; font-weight: 800; }
.splash__problem { display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: 340px; margin-top: 6px; }

.toasts { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%);
          bottom: calc(14px + env(safe-area-inset-bottom, 0px));
          display: flex; flex-direction: column; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.toast {
  padding: 12px 15px; border-radius: 14px; font-size: 14px; font-weight: 700;
  background: #20203c; border: 1px solid var(--line); color: var(--text);
  box-shadow: 0 20px 40px -20px #000; animation: toastin .2s ease both;
}
.toast[data-kind="err"]  { border-color: rgba(255,79,94,.55); background: #301725; color: #ffdfe3; }
.toast[data-kind="ok"]   { border-color: rgba(56,229,166,.55); background: #0f2b24; color: #d8ffef; }
.toast[data-kind="warn"] { border-color: rgba(255,210,63,.5);  background: #302713; color: #ffeec2; }
@keyframes toastin { from { opacity: 0; transform: translateY(10px); } }

/* ============================ 11. Десктоп ============================ */
@media (min-width: 620px) {
  .app { max-width: 640px; padding: 22px 20px 34px; }
  .footer { max-width: 640px; }
  :root { --pad: 20px; --gap: 16px; }
}

@media (min-width: 960px) {
  .app { max-width: 1060px; }
  .footer { max-width: 1060px; }
  .hero__title { font-size: 68px; }
  #screen-entry { display: grid; grid-template-columns: 1.05fr .95fr; grid-template-areas: "hero create" "hero join"; gap: 16px; align-items: start; }
  #screen-entry .hero { grid-area: hero; padding-right: 24px; align-self: center; }
  #formCreate { grid-area: create; }
  #formJoin { grid-area: join; }
  .roundgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
  .card--feed .feed { max-height: 46vh; overflow-y: auto; padding-right: 4px; }
  #endFeed { max-height: 34vh; overflow-y: auto; }
  .guess__heat { max-width: none; }
  .leaderboard { gap: 10px; }
}

/* уважаем просьбу «меньше движения» */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}