/* Страницы сайта: главная (.home-), соло (.solo-), онлайн (.online-) и их общие кусочки (.hub-).
   Только токены и классы из base.css — свои цвета лишь как акценты (медали, турнир). */

/* ================= общее для хабов ================= */

/* медалька места на аватарке */
.hub-medal {
  position: absolute;
  left: -5px;
  top: -4px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font: 400 10px/1 var(--font-logo);
  font-style: normal;
  color: #2A1A00;
  background: radial-gradient(circle at 35% 30%, #FFF6C8, #FFD23F 55%, #C08A12);
  box-shadow: 0 0 0 2px var(--card), 0 2px 6px rgba(0, 0, 0, .4);
}
.hub-medal.m2 { background: radial-gradient(circle at 35% 30%, #FFFFFF, #CFD8E6 55%, #8893A6); color: #1B2230; }
.hub-medal.m3 { background: radial-gradient(circle at 35% 30%, #FFE2C8, #D99A6A 55%, #8E5530); color: #2A1405; }
/* в строках турнира медаль стоит в ряд, а не на аватарке */
.hub-wk-row .hub-medal { position: static; flex: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); }
/* место без медали — просто номер в той же клетке, чтобы список не терял нумерацию */
.hub-rank { flex: none; display: grid; place-items: center; width: 22px; height: 22px; font: 400 11px/1 var(--font-logo); font-style: normal; color: var(--muted); }

/* я в ленте — оранжевое имя */
.feed-ava.hub-me .fa-nm { color: var(--orange-2); }

/* живой огонёк «онлайн» */
.hub-live {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 3px rgba(61, 220, 106, .18), 0 0 10px rgba(61, 220, 106, .8);
}
.hub-live.busy { background: var(--orange); box-shadow: 0 0 0 3px rgba(255, 157, 28, .18), 0 0 10px rgba(255, 157, 28, .7); }
.hub-live.off { background: var(--dim); box-shadow: none; }
.hub-online { font-size: 12px; }
.hub-online.off { color: var(--muted); }

/* стопка аватарок внахлёст */
.hub-stack { display: inline-flex; align-items: center; padding-left: 6px; }
.hub-stack > .ava { margin-left: -8px; }
.hub-stack > .ava .ava-in { box-shadow: 0 0 0 2px var(--card-2); }
.hub-stack-more {
  display: grid;
  place-items: center;
  width: var(--s);
  height: var(--s);
  margin-left: -8px;
  border-radius: 50%;
  background: var(--cell-face);
  box-shadow: 0 0 0 2px var(--card-2);
  font: 800 11px/1 var(--font-ui);
  color: var(--muted);
}

/* сетка дейлика клетками */
.hub-grid { --g: 22px; display: inline-flex; gap: 5px; }
.hub-grid i {
  width: var(--g);
  height: var(--g);
  border-radius: calc(var(--g) * .28);
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .18);
}
.hub-grid i.g { background: linear-gradient(180deg, #6BF08F, var(--good) 60%, #23A84A); }
.hub-grid i.y { background: linear-gradient(180deg, #FFE98A, var(--gold) 60%, #D9A514); }
.hub-grid i.o { background: linear-gradient(180deg, #FFC66E, var(--orange) 60%, #E07E06); }
.hub-grid i.r { background: linear-gradient(180deg, #FF7B66, var(--red) 60%, var(--red-deep)); }
.hub-grid i.e { background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line-2); }
.hub-grid.lg { --g: 30px; gap: 6px; }

/* секция не загрузилась: пунктир, как у пустых мест, но с «Ещё раз» */
.hub-fail { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 14px 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); }
.hub-fail-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hub-fail-txt b { font-weight: 800; font-size: 15px; line-height: 1.25; }

/* ---------- карточка рубрики ---------- */
.card.hub-rub {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 10px;
  width: 172px;
  height: 214px;
  padding: 14px;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hub-rub .card-media .emo { --emo: 76px; right: 10px; top: 14px; }
.hub-rub-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-rub-nm { font-weight: 800; font-size: 16px; line-height: 1.15; text-shadow: 0 2px 8px rgba(0, 0, 0, .5); overflow-wrap: anywhere; }
.hub-rub-sub { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.hub-18 { position: absolute; left: 12px; top: 12px; min-height: 22px; padding: 2px 7px; font-size: 11px; }
.hub-rub-go {
  position: absolute;
  left: 50%;
  top: 38%;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--lit-face);
  color: var(--orange-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--orange-edge), 0 0 30px rgba(255, 157, 28, .55);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .18s, transform .24s var(--ease-pop);
}
.hub-rub-go svg { margin-left: 3px; }
.hub-rub:hover .hub-rub-go, .hub-rub:focus-visible .hub-rub-go { opacity: 1; transform: none; }
.hub-rub-best { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; padding-top: 9px; border-top: 1px solid rgba(190, 255, 170, .14); }
.hub-rub-best small { font: 700 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ---------- строка матча ---------- */
/* широкая колонка: «победитель  8 800 : 4 200  второй»; узкая (container query) — табло в две строки */
.hub-mlist { container-type: inline-size; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hub-match {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
  grid-template-areas: "l sa c sb r" "l meta meta meta r";
  align-items: center;
  column-gap: 8px;
  row-gap: 4px;
  min-height: 60px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), var(--card-2);
}
.hub-m-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.hub-m-who.l { grid-area: l; }
.hub-m-who.r { grid-area: r; flex-direction: row-reverse; text-align: right; }
.hub-m-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 14.5px; }
.hub-m-nm a { color: inherit; text-decoration: none; }
.hub-m-nm a:hover { color: var(--orange-2); }
.hub-m-crown { flex: none; display: grid; color: var(--gold); filter: drop-shadow(0 0 6px rgba(255, 210, 63, .6)); }
.hub-m-more { flex: none; font: 800 11px/1 var(--font-ui); color: var(--muted); padding: 4px 6px; border-radius: 7px; background: rgba(0, 0, 0, .25); }
.hub-m-sa, .hub-m-sb {
  align-self: end;
  font: 400 15px/1 var(--font-logo);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  word-spacing: -.35em;
  color: var(--muted);
  white-space: nowrap;
}
.hub-m-sa { grid-area: sa; justify-self: end; }
.hub-m-sb { grid-area: sb; }
.hub-m-sa.w { color: var(--orange); text-shadow: 0 0 12px rgba(255, 157, 28, .5); }
.hub-m-colon { grid-area: c; align-self: end; font-style: normal; font: 400 13px/1 var(--font-logo); color: var(--dim); }
.hub-m-meta { grid-area: meta; justify-self: center; align-self: start; font: 700 9.5px/1.2 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.hub-match.draw .hub-m-sa, .hub-match.draw .hub-m-sb { color: var(--orange-2); }
@container (max-width: 500px) {
  .hub-match {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "l sa" "r sb" "meta meta";
    row-gap: 7px;
    padding: 10px 14px 9px 10px;
  }
  .hub-m-colon { display: none; }
  .hub-m-who.r { flex-direction: row; text-align: left; }
  .hub-m-who .ava { --s: 30px !important; }
  .hub-m-sa, .hub-m-sb { align-self: center; justify-self: end; font-size: 14px; }
  .hub-m-meta { justify-self: start; padding: 5px 0 0 2px; border-top: 1px solid var(--line); width: 100%; }
}

/* ---------- турнир недели — золото чемпионов ---------- */
.hub-wk { display: flex; flex-direction: column; gap: 14px; }
.hub-wk .sec-head { margin: 0; }
.hub-wk-in { display: flex; align-items: flex-start; gap: 16px; }
.hub-cup {
  display: grid;
  place-items: center;
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 20px;
  color: #3A2600;
  background: radial-gradient(circle at 35% 25%, #FFF3B8, #FFD23F 45%, #C08A12 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 4px 0 #7A5208, 0 0 30px rgba(255, 210, 63, .3);
}
.hub-wk-n { font: 700 12px/1 var(--font-ui); letter-spacing: .04em; word-spacing: normal; text-transform: none; color: var(--muted); vertical-align: middle; margin-left: 8px; white-space: nowrap; }
.hub-wk-top { display: flex; flex-direction: column; gap: 6px; }
.hub-wk-row { display: flex; align-items: center; gap: 10px; min-width: 0; color: inherit; text-decoration: none; font-size: 14px; }
.hub-wk-row b { flex: 1; font-weight: 700; }
.hub-wk-row .num { font: 400 13px/1 var(--font-logo); color: var(--orange); }
a.hub-wk-row:hover { color: var(--orange-2); }
.hub-wk-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.hub-wk-my { font-size: 13.5px; font-weight: 600; }

/* ---------- дуэли — красная «особая» карточка ---------- */
.hub-duel { display: flex; flex-direction: column; gap: 12px; }
.hub-duel .sec-head { margin: 0; }
.hub-duel .eyebrow { color: #FFD9CF; }
.hub-duel-in { display: flex; flex-direction: column; gap: 8px; }
.hub-duel-vs { font-size: clamp(38px, 4vw, 50px); color: #FFF4E0; text-shadow: 0 3px 0 rgba(90, 0, 0, .45), 0 0 26px rgba(255, 190, 120, .35); }
.hub-duel-vs i { font-style: normal; color: var(--gold); margin: 0 .12em; }
.hub-duel-in p { color: #FFE2D8; max-width: 34ch; }
.hub-duel-hint { color: #FFD9CF; }
.hub-duel-foot { margin-top: auto; }
.hub-duel .hub-stack > .ava .ava-in { box-shadow: 0 0 0 2px var(--red-deep); }

/* ---------- строка открытой комнаты ---------- */
.hub-room {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 14px;
  min-height: 64px;
  padding: 9px 10px 9px 10px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .025), transparent), var(--card-2);
  color: inherit;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}
.hub-room:hover { color: inherit; background-color: var(--card-3); border-color: var(--line-2); }
.hub-room-code { min-width: 4.4em; letter-spacing: .08em; }
.hub-room-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hub-room-txt b { font-weight: 800; }
.hub-room-sub { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-room-ppl { display: flex; align-items: center; gap: 8px; }
.hub-room-n { font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.hub-room-go { pointer-events: none; }

/* ================= главная ================= */

/* приветствие для новичка */
.home-hello {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px 32px;
  padding: 10px 6px 8px;
}
.home-hello-txt { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.home-hello h1 { color: #FFF8EC; }
.home-hello .lead { font-size: 16px; }
.home-cells { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.home-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 104px;
  padding: 12px 8px 10px;
  border-radius: var(--r-md);
  background: var(--cell-face);
  box-shadow: var(--cell-bevel), 0 4px 0 var(--cell-edge), 0 10px 20px rgba(0, 0, 0, .25);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: transform .1s, background .15s, box-shadow .2s;
}
.home-cell svg { color: var(--orange); filter: drop-shadow(0 0 8px rgba(255, 157, 28, .5)); }
.home-cell b { font: 400 13px/1 var(--font-logo); text-transform: uppercase; letter-spacing: .02em; color: var(--orange); text-shadow: 0 0 12px rgba(255, 157, 28, .45); }
.home-cell span { font-size: 11.5px; font-weight: 600; line-height: 1.25; color: var(--muted); }
.home-cell:hover { color: var(--orange-ink); background: var(--lit-face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--orange-edge), 0 0 26px rgba(255, 157, 28, .4); }
.home-cell:hover svg, .home-cell:hover b, .home-cell:hover span { color: var(--orange-ink); text-shadow: none; filter: none; }
.home-cell:active { transform: translateY(3px); }
/* место для ведущего-маскота (появится позже); пока пусто — не занимает места */
.home-mascot:empty { display: none; }

/* дейлик */
.home-daily { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 248px; container: hdaily / inline-size; }
.home-daily-mid { display: flex; align-items: center; gap: 22px; color: inherit; text-decoration: none; }
a.home-daily-mid:hover { color: inherit; }
.home-daily .btn.buzzer { --bz: 104px; }
.home-daily-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.home-daily-txt .display { white-space: nowrap; }
.home-daily-score { font-size: 30px; padding: .4em .5em .34em; }
.home-daily-n { font-size: 13px; font-weight: 700; color: var(--orange-2); }
.home-daily-foot { min-height: 36px; }
/* узкая карточка (ноутбук 1024–1240): кнопка и заголовок друг под другом */
@container hdaily (max-width: 300px) {
  .home-daily-mid { flex-direction: column; align-items: center; gap: 14px; text-align: center; }
  .home-daily-txt { align-items: center; }
  .home-daily-txt .display { font-size: 19px; }
  .home-daily-foot { flex-wrap: wrap; justify-content: center; gap: 6px 12px; text-align: center; }
}
.home-qs { display: flex; gap: 5px; margin-top: 2px; }
.home-qs i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-style: normal;
  font-size: 15px;
  background: var(--cell-face);
  box-shadow: var(--cell-bevel), 0 2px 0 var(--cell-edge);
}
.home-qs i.locked { filter: saturate(.6); opacity: .8; }
.home-qs i.current { box-shadow: inset 0 0 0 2px var(--orange), 0 2px 0 var(--orange-edge), 0 0 12px rgba(255, 157, 28, .45); }
.home-qs i.solved { background: linear-gradient(180deg, #4BE07A, #23A84A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 0 #137A33; }
.home-qs i.failed { background: var(--red-face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 var(--red-edge); }

/* лента дейлика */
.home-feed { display: flex; flex-direction: column; }
.home-feed [data-body] { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.home-feed-row { gap: 6px; padding-top: 8px; }
.home-feed-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-fs {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 9px 4px 8px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .2);
  box-shadow: inset 0 0 0 1px var(--line);
  text-align: center;
}
.home-fs b { font: 400 17px/1 var(--font-logo); color: var(--orange); text-shadow: 0 0 12px rgba(255, 157, 28, .4); font-variant-numeric: tabular-nums; }
.home-fs small { font: 700 9.5px/1.15 var(--font-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.home-feed-empty { display: flex; align-items: center; gap: 22px; padding: 6px 2px; }
.home-feed-ghosts { display: flex; flex: none; }
.home-feed-ghosts i {
  width: 52px;
  height: 52px;
  margin-left: -14px;
  border-radius: 50%;
  border: 2px dashed var(--line-2);
  background: rgba(0, 0, 0, .18);
}
.home-feed-ghosts i:first-child { margin-left: 0; border-color: rgba(255, 157, 28, .6); background: rgba(255, 157, 28, .08); }
.home-feed-empty .btn { align-self: flex-start; margin-top: 4px; }

/* серия */
.home-streak { display: flex; flex-direction: column; gap: 14px; }
.home-streak .sec-head { margin: 0; }
.home-streak-big { display: flex; align-items: center; gap: 12px; }
.home-flame {
  display: grid;
  place-items: center;
  flex: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  color: #FFE0A8;
  background: radial-gradient(circle at 50% 70%, #FF9D1C, #E0301E 70%);
  box-shadow: 0 0 0 3px rgba(255, 157, 28, .2), 0 0 26px rgba(255, 120, 20, .55);
}
.home-flame.off { color: var(--dim); background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line-2); }
.home-streak-num {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  min-height: 58px;
  padding: 0 14px 0 10px;
  border-radius: 16px;
  background: var(--lit-face);
  color: var(--orange-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 0 var(--orange-edge), 0 0 28px rgba(255, 140, 20, .45);
}
.home-streak-num svg { color: #C2280F; }
.home-streak-num b { font: 400 30px/1 var(--font-logo); font-weight: 400; }
.home-streak-num.off { background: var(--cell-used); color: var(--dim); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .35); }
.home-streak-num.off svg { color: var(--dim); }
.home-streak-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; line-height: 1.25; }
.home-streak-txt b { font-weight: 800; }
.home-ticks { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.home-tick { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.home-tick i {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 32px;
  aspect-ratio: 1;
  border-radius: 9px;
  background: var(--cell-used);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .35);
}
.home-tick small { font: 700 9.5px/1 var(--font-ui); letter-spacing: .08em; color: var(--dim); }
.home-tick.on i { background: var(--lit-face); color: var(--orange-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 2px 0 var(--orange-edge), 0 0 12px rgba(255, 157, 28, .45); }
.home-tick.on small { color: var(--orange-2); }
.home-tick.today i { background: rgba(255, 157, 28, .08); box-shadow: inset 0 0 0 2px rgba(255, 157, 28, .7); }
.home-tick.today small { color: var(--orange-2); }
.home-tick.miss i { background: rgba(224, 48, 30, .14); box-shadow: inset 0 0 0 1px rgba(255, 93, 77, .3); }
.home-tick.pre i { opacity: .7; }
.home-streak .btn { margin-top: auto; }
.home-streak-warn { margin-top: -4px; }
@media (prefers-reduced-motion: no-preference) {
  .home-tick.today i { animation: home-blink 1.6s ease-in-out infinite; }
  .home-streak-num:not(.off) svg { animation: flicker 1.4s ease-in-out infinite; }
}
@keyframes home-blink { 50% { box-shadow: inset 0 0 0 2px rgba(255, 157, 28, .25); } }

/* популярные рубрики */
.home-rubrics { display: flex; flex-direction: column; }
.home-rubrics [data-body] { flex: 1; display: flex; flex-direction: column; }
.home-rub-row { flex: 1; gap: 12px; }
.home-rub-row .hub-rub { height: auto; min-height: 214px; }
.home-rub-row > .skel { width: 172px; border-radius: var(--r-lg); }

/* новости: на десктопе тянутся на два ряда */
.home-news { grid-row: span 2; display: flex; flex-direction: column; }
.home-news-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.home-news-it { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 10px 6px 10px 0; border-top: 1px solid var(--line); }
.home-news-it:first-child { border-top: 0; padding-top: 0; }
.home-news-ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 19px;
  background: var(--cell-face);
  box-shadow: var(--cell-bevel), 0 3px 0 var(--cell-edge);
}
.home-news-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.home-news-txt b { font-weight: 800; font-size: 15px; line-height: 1.2; }
/* обрезаем только совсем длинное: пять строк вмещают каждую новость целиком, с последней шуткой */
.home-news-txt span { font-size: 13px; line-height: 1.4; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }

/* онлайн сейчас */
.home-online-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.home-online .sec-head .row { flex-wrap: wrap; justify-content: flex-end; }
.home-noroom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
  border: 1.5px dashed var(--line-2);
  border-radius: var(--r-lg);
}
.home-noroom-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--cell-face); color: var(--orange); box-shadow: var(--cell-bevel), 0 3px 0 var(--cell-edge); }
.home-online { display: flex; flex-direction: column; }
.home-online [data-body] { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.home-online-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); }
.home-online-foot .btn.link { margin-left: auto; }
.home-nomatch { padding: 16px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); line-height: 1.45; }

/* профиль */
.home-me { display: flex; flex-direction: column; gap: 14px; }
.home-me-in { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: inherit; text-decoration: none; min-width: 0; }
a.home-me-in:hover { color: inherit; }
a.home-me-in:hover .display { color: var(--orange-2); }
.home-me-ava { padding: 10px 0 4px; }
/* аватарка-заглушка гостя — клетка табло с оранжевым «?», как неоткрытый вопрос */
.home-me-ava .ava:has(.emo.q) .ava-in { --bg: var(--cell); }
.home-me-ava .emo.q { color: var(--orange); text-shadow: 0 0 16px rgba(255, 157, 28, .6); }
.home-me-in .display { max-width: 100%; }
.home-me-lv { display: flex; flex-direction: column; gap: 8px; }
.home-ach { display: flex; flex-direction: column; gap: 8px; }
.home-ach-row { display: flex; flex-wrap: wrap; gap: 6px; }
.home-ach-it {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  font-size: 18px;
  background: var(--cell-face);
  box-shadow: var(--cell-bevel), 0 2px 0 var(--cell-edge);
}
.home-ach-it.more { font: 800 12px/1 var(--font-ui); color: var(--muted); }
.home-me .btn.block { margin-top: auto; }
.home-me-guest { text-align: center; }
.home-perks { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px 14px; list-style: none; border-radius: 14px; background: rgba(0, 0, 0, .2); box-shadow: inset 0 0 0 1px var(--line); }
.home-perks li { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.home-perks svg { flex: none; color: var(--orange); }

/* ================= соло ================= */

/* топ дейлика за сегодня */
.solo-top-row { gap: 8px; padding-top: 8px; }
.solo-top-row .feed-ava { width: 86px; }
.solo-sk-ava { width: 76px; border-radius: 40px; }
.solo-top-empty { display: flex; align-items: center; gap: 22px; padding: 4px 2px; }
.solo-top-empty .btn { margin-left: auto; }
.hub-podium { display: flex; align-items: flex-end; gap: 5px; flex: none; }
.hub-podium i {
  display: grid;
  place-items: start center;
  width: 34px;
  padding-top: 7px;
  border-radius: 9px 9px 4px 4px;
  font: 400 13px/1 var(--font-logo);
  font-style: normal;
  color: var(--orange);
  background: var(--cell-face);
  box-shadow: var(--cell-bevel), 0 3px 0 var(--cell-edge);
}
.hub-podium .p1 { height: 58px; color: var(--orange-ink); background: var(--lit-face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--orange-edge), 0 0 18px rgba(255, 157, 28, .4); }
.hub-podium .p2 { height: 44px; }
.hub-podium .p3 { height: 34px; }

/* большой дейлик */
.solo-daily { display: flex; flex-direction: column; min-height: 440px; padding-top: 28px; }
.solo-daily > [data-body] { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.solo-daily-media img { opacity: .55; }
.solo-arch {
  position: absolute;
  top: 26px;
  left: 26px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 6px 12px 6px 12px;
  border-radius: 14px;
  background: var(--cell-face);
  color: var(--text);
  text-align: left;
  box-shadow: var(--cell-bevel), 0 3px 0 var(--cell-edge), 0 8px 18px rgba(0, 0, 0, .25);
  transition: background .15s, color .15s, transform .08s, box-shadow .2s;
}
.solo-arch > svg:first-child { color: var(--orange); }
.solo-arch > svg:last-child { color: var(--muted); }
.solo-arch span { display: flex; flex-direction: column; gap: 3px; }
.solo-arch b { font: 400 13px/1 var(--font-logo); text-transform: uppercase; letter-spacing: .03em; }
.solo-arch small { font: 700 10px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.solo-arch:hover { background: var(--lit-face); color: var(--orange-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--orange-edge), 0 0 22px rgba(255, 157, 28, .4); }
.solo-arch:hover svg, .solo-arch:hover small { color: var(--orange-ink); }
.solo-arch:active { transform: translateY(2px); }
.solo-daily-top { display: flex; justify-content: flex-end; align-items: center; min-height: 48px; }
.solo-daily-grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: 30px; }
.solo-daily-main { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.solo-daily-title { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.solo-daily-title .display { font-size: clamp(28px, 2.6vw, 38px); color: #FFF8EC; }
.solo-daily-lead { color: var(--muted); font-size: 15px; max-width: 38ch; }
.solo-daily-go { display: flex; align-items: center; gap: 22px; margin-top: 6px; }
.solo-daily-go .btn.buzzer { --bz: 128px; }
.solo-daily-go-txt { display: flex; flex-direction: column; gap: 4px; }
.solo-daily-go-txt b { font-weight: 800; font-size: 17px; }
.solo-daily-foot { display: flex; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 196, 107, .14); font-size: 13px; font-weight: 700; color: var(--orange-2); }
.solo-result { display: flex; align-items: center; gap: 18px; }
.solo-result-txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }

/* табло дня: пять рубрик */
.solo-board { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.solo-board > .skel { border-radius: 14px; }
.solo-bq {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 7px 8px 7px 7px;
  border-radius: 14px;
  background: rgba(0, 0, 0, .22);
  box-shadow: inset 0 0 0 1px var(--line);
}
.solo-bq-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  font-size: 21px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--tint) 55%, var(--card)) 0%, var(--card-2) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 2px 0 rgba(0, 0, 0, .3);
}
.solo-bq-txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.solo-bq-txt b { font-weight: 700; font-size: 14px; }
.solo-bq-txt .dots i { width: 6px; height: 6px; }
.solo-bq .price { min-width: 44px; }
.solo-bq.current { background: rgba(255, 157, 28, .1); box-shadow: inset 0 0 0 1.5px rgba(255, 157, 28, .6); }
.solo-bq.locked .solo-bq-txt b { color: var(--muted); }
.solo-now { color: var(--orange); }

/* правая колонка: турнир и дуэли */
.solo-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.solo-side > .card { flex: 1; }

/* плитки режимов */
.solo-more .sec-head { margin: 6px 4px 12px; }
.solo-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.solo-tiles .tile { min-height: 84px; }
.solo-best { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.solo-best small { font: 700 9.5px/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.solo-ico-img { overflow: hidden; padding: 0; }
.solo-ico-img img { width: 100%; height: 100%; object-fit: cover; }

/* все рубрики */
.solo-rubrics { scroll-margin-top: 16px; }
.solo-rub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.solo-rub-grid > .skel { border-radius: var(--r-lg); }
.solo-rub-grid .hub-rub { width: auto; height: 236px; }
.btn.solo-rub-all { display: none; margin-top: 14px; }

/* архив (модалка) */
.solo-arch-note { margin-bottom: 14px; }
.solo-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.solo-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 12px 8px 11px;
  border-radius: 14px;
  background: var(--cell-face);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--cell-bevel), 0 3px 0 var(--cell-edge);
  transition: background .15s, transform .08s, box-shadow .2s;
}
.solo-ad-n { font: 400 15px/1 var(--font-logo); color: var(--orange); }
.solo-ad-d { font-size: 11.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.solo-ad-play { display: grid; place-items: center; width: 30px; height: 26px; border-radius: 8px; color: var(--orange); background: rgba(0, 0, 0, .25); }
.solo-ad.done { background: var(--cell-used); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .3); }
.solo-ad:hover { color: var(--orange-ink); background: var(--lit-face); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 3px 0 var(--orange-edge), 0 0 18px rgba(255, 157, 28, .35); }
.solo-ad:hover .solo-ad-n, .solo-ad:hover .solo-ad-d, .solo-ad:hover .solo-ad-play { color: var(--orange-ink); }
.solo-ad:active { transform: translateY(2px); }
.solo-arch-empty { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 6px; text-align: center; }

/* ================= онлайн ================= */

/* топ недели */
.online-top-row { gap: 8px; padding-top: 8px; }
.online-ta { width: 96px; gap: 7px; }
.online-ta .tier { min-height: 20px; padding: 2px 7px 2px 6px; font-size: 9.5px; letter-spacing: .08em; gap: 5px; }
.online-ta .tier::before { width: 7px; height: 7px; }
.online-ta-sub { font-size: 11px; color: var(--dim); font-weight: 700; }
.online-sk { width: 80px; border-radius: 40px; }
.online-top-empty { display: flex; align-items: center; gap: 22px; padding: 4px 2px; }

/* своя игра: создать комнату */
.online-create { display: flex; flex-direction: column; gap: 18px; }
.online-create .sec-head { margin: 0; }
.online-create h1 { color: #FFF8EC; margin-top: -4px; }
.online-lead { color: var(--muted); font-size: 15px; max-width: 52ch; margin-top: -6px; }
.online-split { display: grid; grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); gap: 12px; align-items: stretch; }
.online-mode {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 158px;
  padding: 16px 16px 18px;
  border-radius: 18px;
  background: var(--cell-face);
  color: var(--text);
  text-align: left;
  box-shadow: var(--cell-bevel), 0 5px 0 var(--cell-edge), 0 12px 22px rgba(0, 0, 0, .25);
  transition: background .15s, color .15s, box-shadow .2s, transform .08s;
}
.online-mode:hover { background: linear-gradient(180deg, #179A31 0%, var(--cell-hi) 55%, #0F7022 100%); }
.online-mode:active { transform: translateY(3px); box-shadow: var(--cell-bevel), 0 2px 0 var(--cell-edge); }
.online-mode-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgba(0, 0, 0, .22); color: var(--orange); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3); }
.online-mode-t { font: 400 16px/1.1 var(--font-logo); text-transform: uppercase; letter-spacing: .01em; word-spacing: -.3em; }
.online-mode-d { font-size: 13px; line-height: 1.35; font-weight: 500; color: var(--muted); }
.online-mode-ok {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .2);
  color: transparent;
  box-shadow: inset 0 0 0 2px var(--line-2);
  transition: background .15s, color .15s;
}
.online-mode.on {
  background: var(--lit-face);
  color: var(--orange-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 5px 0 var(--orange-edge), 0 0 34px rgba(255, 157, 28, .38);
}
.online-mode.on .online-mode-d { color: rgba(42, 22, 0, .78); }
.online-mode.on .online-mode-ico { background: rgba(42, 22, 0, .14); color: var(--orange-ink); box-shadow: none; }
.online-mode.on .online-mode-ok { background: var(--orange-ink); color: var(--orange); box-shadow: none; }
.online-or {
  z-index: 2;
  align-self: center;
  justify-self: center;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin: 0 -19px;
  border-radius: 50%;
  background: var(--card);
  box-shadow: 0 0 0 4px var(--card), inset 0 0 0 1.5px var(--line-2);
  font: 400 9px/1 var(--font-logo);
  color: var(--muted);
  text-transform: uppercase;
}
.online-opts { display: flex; flex-direction: column; gap: 14px; }
.online-sw { align-items: flex-start; }
.online-sw > i { margin-top: 2px; }
.online-sw > span { display: flex; flex-direction: column; gap: 2px; }
.online-sw b { font-weight: 700; }
.online-sw small { font-size: 12.5px; font-weight: 500; color: var(--muted); line-height: 1.35; }
.online-party {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 157, 28, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 157, 28, .38);
  color: var(--orange-2);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}
.online-party b { color: #FFE6C2; overflow-wrap: anywhere; }
.online-party-ico { font-size: 26px; flex: none; }
.online-form { display: flex; flex-direction: column; gap: 8px; }
.online-form .label { margin: 0; }
.online-form .btn { margin-top: 4px; }
.online-as { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px var(--line); font-weight: 600; color: var(--muted); }
.online-as b { color: var(--text); }
/* имя без пробелов (до 16 букв) переносим, а не выпускаем за карточку */
.online-as > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.online-divider { display: flex; align-items: center; gap: 12px; color: var(--dim); font: 700 11px/1 var(--font-ui); letter-spacing: .16em; text-transform: uppercase; }
.online-divider::before, .online-divider::after { content: ''; flex: 1; height: 1px; background: var(--line-2); }
.online-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; scroll-margin-top: 90px; }

/* лента игр */
.online-feed { display: flex; flex-direction: column; }
.online-feed [data-body] { flex: 1; display: flex; flex-direction: column; }
.online-feed-empty { flex: 1; display: flex; flex-direction: column; }
.online-feed-empty .empty { flex: 1; min-height: 220px; }

/* открытые комнаты */
.online-auto { font-size: 11.5px; gap: 8px; }
.online-norooms { display: flex; align-items: center; gap: 20px; padding: 18px; border: 1.5px dashed var(--line-2); border-radius: var(--r-lg); }
.online-norooms .btn { margin-left: auto; }
.online-norooms-board { display: grid; grid-template-columns: repeat(2, 22px); gap: 4px; flex: none; }
.online-norooms-board i { height: 22px; border-radius: 6px; background: var(--cell-used); box-shadow: inset 0 2px 5px rgba(0, 0, 0, .35); }
.online-norooms-board i:first-child { background: var(--lit-face); box-shadow: 0 0 12px rgba(255, 157, 28, .4); }

/* плитки справа */
.online-tiles { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.online-tiles .tile { flex: 1; }
.online-tg > .ico { background: linear-gradient(180deg, #4CC0F7 0%, var(--tg) 55%, #1E9AD9 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--tg-edge); }
.online-tg:hover > .ico { background: linear-gradient(180deg, #5DCBFF 0%, #3BB6F5 55%, #2AABEE 100%); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 3px 0 var(--tg-edge), 0 0 18px rgba(42, 171, 238, .45); }

/* окно «комната готова» для режима вечеринки */
.online-tv { display: flex; flex-direction: column; gap: 14px; }
.online-tv-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  background: radial-gradient(80% 100% at 50% 0, rgba(255, 157, 28, .18), transparent 70%), #031207;
  box-shadow: inset 0 0 0 6px #0B0503, inset 0 0 0 8px rgba(255, 196, 107, .25), 0 10px 24px rgba(0, 0, 0, .35);
}
.online-tv-screen span { font-size: 40px; }
.online-tv-screen .price { letter-spacing: .12em; }
.online-tv-link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 14px; background: rgba(0, 0, 0, .3); box-shadow: inset 0 0 0 1px var(--line-2); }
.online-tv-link a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }

/* ================= адаптив ================= */

@media (max-width: 1240px) {
  .home-hello { grid-template-columns: minmax(0, 1fr); }
  .home-online-grid { grid-template-columns: minmax(0, 1fr); }
  .solo-daily-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 899px) {
  /* порядок на телефоне: лента, серия, дейлик, рубрики, турнир, дуэли, онлайн, новости, профиль */
  .home-o-hello { order: 0; }
  .home-o-feed { order: 1; }
  .home-o-streak { order: 2; }
  .home-o-daily { order: 3; }
  .home-o-rubrics { order: 4; }
  .home-o-weekly { order: 5; }
  .home-o-duel { order: 6; }
  .home-o-online { order: 7; }
  .home-o-news { order: 8; grid-row: auto; }
  .home-o-me { order: 9; }

  .home-hello { padding: 4px 2px 6px; gap: 16px; }
  .home-hello .lead { font-size: 15px; }
  .home-cells { gap: 8px; }
  .home-cell { min-height: 86px; padding: 10px 4px 8px; }
  .home-cell b { font-size: 11px; }
  .home-cell span { display: none; }
  .home-daily { min-height: 0; }
  .home-daily .btn.buzzer { --bz: 92px; }
  .home-feed-empty { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hub-rub { width: 150px; height: 190px; }
  .hub-rub .card-media .emo { --emo: 64px; }
  .home-rub-row > .skel { width: 150px; }
  .hub-room { grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; }
  .hub-room-ppl { display: none; }
  .hub-room-sub { white-space: normal; line-height: 1.3; }
  .home-online-foot .btn:not(.link) { flex: 1 1 auto; }

  .solo-daily { min-height: 0; padding-top: 24px; }
  .solo-arch { top: 22px; left: 20px; min-height: 44px; }
  .solo-daily-grid { gap: 22px; }
  .solo-daily-go .btn.buzzer { --bz: 104px; }
  .solo-tiles { grid-template-columns: minmax(0, 1fr); }
  .solo-rub-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .solo-rub-grid .hub-rub { height: 196px; }
  .solo-rub-grid.clip > .hub-rub:nth-child(n + 9) { display: none; }
  .btn.solo-rub-all { display: flex; }
  .solo-top-empty { flex-wrap: wrap; gap: 16px; }
  .solo-top-empty .btn { margin-left: 0; }

  .online-top-empty { gap: 16px; }
  .online-feed-empty .empty { min-height: 0; }
  .online-norooms { flex-wrap: wrap; gap: 14px; }
  .online-norooms .btn { margin-left: 0; }
}

@media (max-width: 520px) {
  .solo-arch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .solo-ad { padding: 10px 4px 9px; gap: 6px; }
  .solo-ad-wd { display: none; }
}

@media (max-width: 640px) {
  /* режимы друг под другом: строка «иконка — текст», «или» на стыке */
  .online-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 0 auto; }
  .online-or { margin: -19px 0; }
  .online-mode { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-areas: "ico t" "ico d"; column-gap: 14px; row-gap: 4px; min-height: 0; padding: 14px 46px 14px 14px; }
  .online-mode-ico { grid-area: ico; align-self: center; }
  .online-mode-t { grid-area: t; font-size: 14px; }
  .online-mode-d { grid-area: d; font-size: 12.5px; }
  .online-mode-ok { top: 50%; margin-top: -13px; }
}

@media (max-width: 420px) {
  .home-daily-mid { gap: 16px; }
  .home-daily .btn.buzzer { --bz: 84px; }
  .home-daily-txt .display { font-size: 18px; }
}