/* ValoBase - тактический интерфейс.

   Главный принцип, который легко понять неправильно: панели в игре
   прямоугольные. Угловатость набирается тем, что добавлено поверх -
   засечки по углам, тонкие линейки, акцентные подчёркивания и один
   маленький скос у заполненных кнопок. Срезать все углы подряд -
   это общий приём научной фантастики, а не язык игры.

   Второй принцип: красный означает противника, опасность и отказ.
   Выбор и подтверждение показываются инверсией в кремовый. */

:root{
  /* Нейтральный ряд держит один тон (210) и теряет насыщенность,
     когда светлеет. Соседние поверхности почти не отличаются по
     яркости: разделяет их волосяная линия, а не ступенька. */
  --deep:#0A121A;
  --ground:#0F1923;
  --surface:#1A242E;
  --raise:#262F38;
  --nav-bg:#141E28;

  --ink:#ECE8E1;
  --muted:#8B98A5;
  --dim:#63727E;
  --on-accent:#0F1923;

  --accent:#FF4655;
  --live:#78E0C0;
  --live-wash:rgba(120,224,192,.10);
  --warn:#FFB648;

  /* Границы - это кремовый с прозрачностью, а не отдельный серый цвет:
     так линия остаётся волосяной на любой подложке. */
  --edge:rgba(236,232,225,.14);
  --edge-soft:rgba(236,232,225,.08);
  --edge-fill:#2B3742;
  --scrim:rgba(15,25,35,.975);

  /* Цвета рангов - из самой игры, а не подобранные на глаз. */
  --t-iron:#868986;   --t-bronze:#A5855D; --t-silver:#BBC2C2;
  --t-gold:#ECCF56;   --t-plat:#59A9B6;   --t-diamond:#B489C4;
  --t-asc:#6AE2AF;    --t-imm:#BB3D65;    --t-radiant:#FFFFAA;

  --display:"Sofia Sans Extra Condensed","Oswald","Arial Narrow",sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono","Consolas",ui-monospace,monospace;

  /* Единственный скос в системе: 7x5 у правого нижнего угла
     заполненных кнопок. Больше нигде. */
  --notch:polygon(0 0, 100% 0, 100% calc(100% - 5px),
    calc(100% - 7px) calc(100% - 5px), calc(100% - 7px) 100%, 0 100%);

  --d-tick:100ms; --d-hover:150ms; --d-state:200ms; --d-panel:300ms;
  --ease-reveal:cubic-bezier(.06,.81,0,.98);

  --safe-b:env(safe-area-inset-bottom, 0px);
  --nav-h:52px;
  /* высота ряда «скип/лайк» - над ним живут плашка и подсказка */
  --acts-h:88px;
}

*{box-sizing:border-box;border-radius:0}
html,body{height:100%}
html{font-synthesis:none}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--body);
  font-size:14px;
  line-height:1.55;
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;text-wrap:balance;margin:0;font-language-override:"RUS"}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Цифры не должны прыгать при обновлении счётчиков. */
:where(.fv,.livetxt .count,.lobby .v,.pcell b,.likemeter,.likemeter b,
       .rankchip .v,.rep .score,.counter,.mrow .when,.contact .v,.nav .badge){
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
}

/* Единый вид для всех микро-подписей. */
.rankchip .k,.field .k,.contact .k,.lobby .k,.dlist dt,.slabel,
.mrow .st,.pcell,.overlay .kicker,.likemeter{
  font-family:var(--body);font-weight:600;font-size:10px;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

.app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  /* Текстура должна быть неназываемой: заметишь, только если искать. */
  background-image:
    repeating-linear-gradient(135deg, rgba(255,70,85,.025) 0 1px, rgba(0,0,0,0) 1px 11px),
    radial-gradient(rgba(236,232,225,.055) 1px, rgba(0,0,0,0) 1px);
  background-size:auto, 26px 26px;
}
.screen{position:absolute;top:0;left:0;right:0;
  bottom:calc(var(--nav-h) + var(--safe-b));
  display:none;flex-direction:column;min-height:0}
.screen.on{display:flex}

.scrollarea{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
.scrollarea::-webkit-scrollbar{width:6px}
.scrollarea::-webkit-scrollbar-thumb{background:rgba(236,232,225,.16)}

/* ---------- верхняя панель ---------- */
.appbar{display:flex;align-items:center;gap:12px;padding:13px 16px 10px;flex:none}
.appbar h2{font-size:18px;font-weight:700;display:flex;align-items:center;gap:12px;
  flex:1 1 auto;min-width:0}
.appbar h2::after{content:"";flex:1 1 auto;height:1px;background:var(--edge-soft)}
.appbar .right{display:flex;gap:9px;align-items:center;flex:none}
.likemeter{color:var(--muted)}
.likemeter b{color:var(--ink);font-weight:600}
/* Скрытый элемент обязан исчезать, даже если у него свой display:
   без этого кнопка фильтров с display:grid оставалась на экране. */
[hidden]{display:none !important}

.iconbtn{width:34px;height:34px;display:grid;place-items:center;
  background:var(--surface);color:var(--muted);flex:none}
.iconbtn:active{background:var(--raise);color:var(--ink)}

/* ---------- публичная сводка ---------- */
.pulse{display:flex;flex-wrap:wrap;gap:4px 13px;padding:0 16px 10px;flex:none}
.pulse[hidden]{display:none}
.pcell{display:inline-flex;gap:5px;align-items:baseline;color:var(--dim);
  letter-spacing:.09em;white-space:nowrap}
.pcell b{font-family:var(--body);font-weight:700;font-size:13px;
  letter-spacing:.02em;color:var(--muted)}
.pcell.live b{color:var(--live)}

/* ---------- колода ---------- */
.deck{flex:1;min-height:0;position:relative;margin:0 16px}
.pcard{position:absolute;inset:0;background:var(--surface);display:flex;
  flex-direction:column;overflow:hidden;will-change:transform;--tier:var(--edge)}
.pcard.behind{transform:scale(.955) translateY(12px);filter:brightness(.62)}
.pcard.behind2{transform:scale(.91) translateY(24px);filter:brightness(.42)}
.pcard .body{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 16px;
  display:flex;flex-direction:column;gap:13px}
.pcard .body::-webkit-scrollbar{width:5px}
.pcard .body::-webkit-scrollbar-thumb{background:rgba(236,232,225,.16)}

/* Единственный цветовой сигнал ранга на карточке. */
.topstripe{height:3px;background:linear-gradient(90deg,var(--tier) 0%,rgba(0,0,0,0) 78%);flex:none}

/* Засечки по углам короткие. Длинные скобки читаются как пародия на HUD. */
.pcard::before,.pcard::after{content:"";position:absolute;width:9px;height:9px;
  pointer-events:none;z-index:2;border-color:rgba(236,232,225,.45);border-width:1px}
.pcard::before{top:8px;left:8px;border-left-style:solid;border-top-style:solid}
.pcard::after{bottom:8px;right:8px;border-right-style:solid;border-bottom-style:solid}

.idrow{display:flex;gap:13px;align-items:flex-start}
.avatar{width:56px;height:56px;flex:none;display:grid;place-items:center;
  font-family:var(--display);font-size:26px;font-weight:800;color:var(--on-accent);
  background:var(--tier,var(--edge-fill));overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.nameblk{min-width:0;flex:1}
.nick{font-family:var(--display);font-size:26px;font-weight:800;letter-spacing:.01em;
  line-height:1.05;overflow-wrap:anywhere;font-language-override:"RUS"}
.riotid{font-family:var(--mono);font-size:11px;color:var(--muted)}
.livepill{display:inline-flex;align-items:center;gap:7px;margin-top:6px;
  font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--live);background:var(--live-wash);padding:3px 8px}
.livepill i{width:6px;height:6px;background:var(--live);position:relative;font-style:normal}
.livepill.off{color:var(--dim);background:rgba(236,232,225,.05)}
.livepill.off i{background:var(--dim)}
.livepill.off i::after{display:none}

/* Кольцо пинга вместо дышащей точки: медленно и один раз в пять секунд. */
@keyframes val-ping{
  0%{opacity:.55;transform:scale(1)}
  50%{opacity:0;transform:scale(2.6)}
  100%{opacity:0}
}
.livedot::after,.livepill i::after{content:"";position:absolute;inset:0;
  background:inherit;animation:val-ping 5s var(--ease-reveal) infinite}

/* Пол и возраст одной плашкой рядом со статусом. Розовое и синее -
   единственное место в интерфейсе, где цвет не означает действие. */
.gpill{display:inline-flex;align-items:center;margin-top:6px;margin-left:7px;
  font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;padding:3px 8px}
.gpill.f{color:#FF8FBF;background:rgba(255,143,191,.12)}
.gpill.m{color:#6FB4FF;background:rgba(111,180,255,.12)}
.gpill.n{color:var(--muted);background:rgba(236,232,225,.06)}

/* Титул под ником. Носить можно один, и он единственное украшение
   анкеты, которое нельзя получить кроме как делом - поэтому у каждого
   свой цвет. Одинаковые плашки титул обесценивают.

   Редкие помечены засечками по углам: тот же знак, что и рамка карточки,
   новой фигуры в язык не добавляем. Скос остаётся только у кнопок. */
.titleline{margin-top:7px}
.title{--t:var(--muted);--tw:rgba(236,232,225,.07);
  position:relative;display:inline-flex;align-items:center;
  font-family:var(--display);font-weight:700;font-size:12.5px;
  letter-spacing:.15em;text-transform:uppercase;padding:3px 10px;
  color:var(--t);background:var(--tw);box-shadow:inset 2px 0 0 var(--t)}
.title.rare::before,.title.rare::after{content:"";position:absolute;
  width:5px;height:5px;border-color:var(--t);border-width:1px;
  pointer-events:none}
.title.rare::before{top:2px;right:2px;border-top-style:solid;
  border-right-style:solid}
.title.rare::after{bottom:2px;right:2px;border-bottom-style:solid;
  border-right-style:solid}

.t-gold{--t:#ECCF56;--tw:rgba(236,207,86,.12)}
.t-amber{--t:#FFB648;--tw:rgba(255,182,72,.12)}
.t-sun{--t:#FFE9A3;--tw:rgba(255,233,163,.11)}
.t-rose{--t:#FF8FBF;--tw:rgba(255,143,191,.12)}
.t-cyan{--t:#59A9B6;--tw:rgba(89,169,182,.14)}
.t-violet{--t:#B489C4;--tw:rgba(180,137,196,.13)}
.t-mint{--t:#78E0C0;--tw:rgba(120,224,192,.11)}
.t-green{--t:#6AE2AF;--tw:rgba(106,226,175,.11)}
.t-red{--t:#FF6B78;--tw:rgba(255,107,120,.12)}
.t-blue{--t:#6FB4FF;--tw:rgba(111,180,255,.12)}
.t-plum{--t:#C98FE0;--tw:rgba(201,143,224,.12)}
.t-lime{--t:#B6D96A;--tw:rgba(182,217,106,.12)}
.t-ice{--t:#9FD4E8;--tw:rgba(159,212,232,.12)}
.t-copper{--t:#D69A6A;--tw:rgba(214,154,106,.13)}
.t-sand{--t:#D8C9A3;--tw:rgba(216,201,163,.11)}
.t-steel{--t:#A9B6C2;--tw:rgba(169,182,194,.11)}
/* Цвета сложных титулов. Держатся того же ряда, что и остальные:
   приглушённые, ни один не спорит с красным акцентом интерфейса. */
.t-jade{--t:#5FC9A0;--tw:rgba(95,201,160,.12)}
.t-teal{--t:#4FBFC9;--tw:rgba(79,191,201,.13)}
.t-pearl{--t:#E4E0D6;--tw:rgba(228,224,214,.10)}
.t-wine{--t:#C9637F;--tw:rgba(201,99,127,.13)}
.t-coral{--t:#FF9A76;--tw:rgba(255,154,118,.12)}
.t-indigo{--t:#8E9BE8;--tw:rgba(142,155,232,.13)}
.t-bronze{--t:#B08D57;--tw:rgba(176,141,87,.14)}

/* Выбор титула в анкете. Выбранный залит своим цветом - это та же
   инверсия, что у остальных переключателей, только не в кремовый:
   в кремовом титул теряет ровно то, ради чего его выбирают. */
.titlepick{display:flex;flex-wrap:wrap;gap:8px}
/* В самом выборе подложка у всех одна: заливка своим цветом остаётся
   единственным признаком надетого титула. Со своей подложкой у каждого
   ряд выглядел так, будто выбраны сразу пять. */
.titlepick .title{font-size:12px;padding:7px 11px;cursor:pointer;
  background:rgba(236,232,225,.05)}
.titlepick .title.on{background:var(--t);color:var(--ground);box-shadow:none}
.titlepick .title.on::before,.titlepick .title.on::after{border-color:var(--ground)}
.titlepick .title.locked{--t:var(--dim);--tw:rgba(236,232,225,.035)}
.titlepick .title.locked::before,.titlepick .title.locked::after{display:none}
.title.none{--t:var(--muted);--tw:rgba(236,232,225,.06)}

.rankrow{display:flex;gap:9px;flex-wrap:wrap}
.rankchip{display:flex;flex-direction:column;gap:3px;padding:7px 12px 8px;
  background:var(--raise);box-shadow:inset 0 -2px 0 var(--tier,var(--edge))}
.rankchip .v{font-family:var(--display);font-size:18px;font-weight:700;
  letter-spacing:.03em;color:var(--tier,var(--ink));text-transform:none}
.rankchip.plain{box-shadow:inset 0 -2px 0 var(--edge)}
.rankchip.plain .v{color:var(--ink)}

.warnstrip{display:flex;align-items:flex-start;gap:9px;padding:7px 11px;
  background:rgba(255,182,72,.09);color:var(--warn);font-size:11.5px;line-height:1.4}
.warnstrip.ok{background:var(--live-wash);color:var(--live)}
.warnstrip svg{flex:none;margin-top:2px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{font-size:11.5px;padding:4px 10px;background:var(--raise);color:var(--muted)}

.dlist{display:grid;grid-template-columns:auto 1fr;gap:7px 16px;font-size:13px;
  align-items:baseline;margin:0}
.dlist dt{white-space:nowrap}
.dlist dd{margin:0;color:var(--ink)}

.bio{font-size:13px;color:var(--ink);opacity:.84;line-height:1.5;
  border-left:1px solid rgba(236,232,225,.14);padding-left:11px;overflow-wrap:anywhere}

.rep{background:var(--raise);padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.rep .head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.rep .score{font-family:var(--display);font-size:20px;font-weight:700;color:var(--live)}
.rep .of{font-size:11.5px;color:var(--muted)}
.rep .none{font-size:11.5px;color:var(--dim);line-height:1.45}
.reptag{font-size:11px;padding:3px 9px;background:var(--live-wash);color:var(--live);
  display:inline-flex;gap:6px;align-items:center}
.reptag b{font-family:var(--mono);font-weight:500;color:var(--live)}

.cardfoot{display:flex;justify-content:flex-end;padding-top:2px;margin-top:auto}
.reportbtn{font-size:11px;color:var(--dim);font-family:var(--mono);letter-spacing:.03em}
.reportbtn:active{color:var(--accent)}

/* Штампы свайпа: плоские плашки у края, без наклона и рамки. */
.stamp{position:absolute;top:46px;font-family:var(--display);font-weight:800;
  font-size:26px;letter-spacing:.08em;padding:7px 14px;opacity:0;
  pointer-events:none;z-index:3;text-transform:uppercase}
.stamp.like{left:0;background:var(--live);color:var(--ground)}
.stamp.nope{right:0;background:var(--accent);color:var(--ink)}

.empty{position:absolute;inset:0;display:flex;flex-direction:column;
  justify-content:center;gap:15px;padding:0 24px;text-align:center;align-items:center}
.empty h3{font-size:23px}
.empty p{color:var(--muted);font-size:13px;max-width:32ch}

/* ---------- главные действия ---------- */
.actions{flex:none;display:flex;gap:20px;padding:16px 18px 18px;overflow:visible}
.act{flex:1;display:flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 0;font-family:var(--display);font-size:18px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;position:relative}
.act.skip{background:var(--surface);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--edge)}
/* Главное действие экрана - красное, как кнопка PLAY в меню игры.
   Кремовая инверсия остаётся за выбранным пунктом списка, а не за действием:
   так «что я выбрал» и «что я сейчас сделаю» не путаются между собой. */
.act.like{background:var(--accent);color:var(--on-accent);overflow:visible}
/* Смещённая разорванная рамка. Ровно один элемент на экране. */
.act.like::before,.act.like::after{content:"";position:absolute;left:-5px;right:-5px;
  height:calc(50% + 2px);border:1px solid rgba(255,70,85,.30);pointer-events:none;
  background-repeat:no-repeat;background-size:4px 1px;
  background-image:linear-gradient(rgba(255,70,85,.75),rgba(255,70,85,.75)),
                   linear-gradient(rgba(255,70,85,.75),rgba(255,70,85,.75))}
.act.like::before{top:-5px;border-bottom:0;background-position:0 0,100% 0}
.act.like::after{bottom:-5px;border-top:0;background-position:0 100%,100% 100%}
.act[disabled]{opacity:.35}

/* ---------- оверлей ---------- */
.overlay{position:fixed;inset:0;background:var(--scrim);display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:16px;
  padding:26px;text-align:center;z-index:20}
.overlay.on{display:flex;animation:fadein .22s linear}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.overlay .kicker{letter-spacing:.20em;color:var(--accent)}
.overlay h3{font-size:30px;font-weight:800}
.pair{display:flex;align-items:center;gap:16px}
.pair .avatar{width:64px;height:64px;font-size:30px}
.pair .x{font-family:var(--display);font-size:22px;color:var(--accent)}
.contact{background:var(--surface);padding:12px 18px;display:flex;flex-direction:column;gap:3px}
.contact .v{font-family:var(--mono);font-size:18px;color:var(--live)}
.overlay .note{font-size:12.5px;color:var(--muted);max-width:32ch;line-height:1.5}
.overlay .who{font-family:var(--mono);font-size:12px;color:var(--muted)}
.btnrow{display:flex;gap:10px;width:100%;max-width:320px}
.btn{flex:1;padding:13px 12px;font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;text-align:center;display:block;
  text-decoration:none}
.btn.primary{background:var(--accent);color:var(--on-accent);clip-path:var(--notch)}
.btn.warn{background:var(--warn);color:var(--on-accent);clip-path:var(--notch)}
.btn.ghost{background:var(--surface);color:var(--muted)}

/* ---------- листы ---------- */
.sheet{position:absolute;top:0;left:0;right:0;
  bottom:calc(var(--nav-h) + var(--safe-b));
  background:var(--ground);display:none;flex-direction:column;z-index:10}
.sheet.on{display:flex;animation:slideup .2s linear}
@keyframes slideup{from{transform:translateY(10px);opacity:.5}to{transform:none;opacity:1}}

.sect{padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.sect + .sect{border-top:1px solid var(--edge-soft);position:relative}
.sect + .sect::before{content:"";position:absolute;top:-1px;left:0;width:34px;
  height:2px;background:var(--accent);opacity:.85}
.slabel{display:flex;align-items:center;gap:10px}
.slabel::after{content:"";flex:1 1 auto;height:1px;background:rgba(236,232,225,.10)}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{font-size:12.5px;padding:8px 13px;background:var(--surface);color:var(--muted)}
.opt.on{background:var(--ink);color:var(--ground);font-weight:600;clip-path:var(--notch)}

.switch{display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--surface);padding:12px 13px;width:100%;text-align:left}
.switch .txt{font-size:12.5px}
.switch .txt small{display:block;color:var(--dim);font-size:11px;line-height:1.4;margin-top:3px}
.track{width:40px;height:22px;flex:none;background:var(--edge-fill);position:relative}
.track i{position:absolute;top:3px;left:3px;width:16px;height:16px;
  background:var(--muted);font-style:normal}
.switch.on .track{background:rgba(120,224,192,.28)}
.switch.on .track i{transform:translateX(18px);background:var(--live)}

.counter{font-family:var(--body);font-size:11.5px;color:var(--muted);
  padding:2px 16px 10px;line-height:1.5}
.counter b{color:var(--live);font-weight:600}

/* ---------- мэтчи ---------- */
.mcard{border-bottom:1px solid var(--edge-soft);padding-bottom:12px}
.mrow{display:flex;gap:12px;align-items:flex-start;padding:12px 16px 8px}
.mrow .avatar{width:44px;height:44px;font-size:20px}
.mrow .info{min-width:0;flex:1}
.mrow .n{font-family:var(--display);font-size:18px;font-weight:700;letter-spacing:.02em}
.mrow .u{font-family:var(--mono);font-size:11.5px;color:var(--live)}
.mrow .meta{font-size:11px;color:var(--dim)}
.mrow .when{font-family:var(--mono);font-size:10px;color:var(--dim);
  white-space:nowrap;padding-top:3px}
.mrow .st{margin-top:2px}
.mrow .st.hot{color:var(--accent)}
.mrow .st.wait{color:var(--warn)}
.mrow .st.ok{color:var(--live)}
.mrow .st.off{color:var(--dim)}

.macts{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
.mact{font-size:12px;padding:8px 13px;background:var(--surface);color:var(--muted)}
.mact:active{background:var(--raise)}
.mact.primary{background:var(--accent);color:var(--on-accent);font-weight:600;
  clip-path:var(--notch)}
.mact[disabled]{opacity:.4}

.incard{background:var(--surface);box-shadow:inset 3px 0 0 var(--accent);
  padding-bottom:12px;margin-top:10px}
.incard .mrow{padding:12px 13px 6px}
.incard .macts{padding:0 13px}
.bio.inbio{margin:0 13px 10px;font-size:12.5px}
.slabel.pad{padding:16px 16px 6px}

.survey{margin:14px 16px;background:var(--surface);padding:14px;
  display:flex;flex-direction:column;gap:11px}
.survey h4{font-size:17px}
.survey p{font-size:12px;color:var(--muted);line-height:1.45}
.survey .done{font-size:12.5px;color:var(--live);line-height:1.45}
.survey .opt{background:var(--raise)}
.survey .opt.on{background:var(--ink);color:var(--ground)}

.emptylist{padding:30px 24px;text-align:center;color:var(--dim);font-size:12.5px;
  line-height:1.5;box-shadow:inset 0 2px 0 rgba(236,232,225,.35);
  background:rgba(236,232,225,.04)}

/* ---------- мнения об игроке ---------- */
/* Кнопка под репутацией. Число крупнее слова: сколько написали - важнее,
   чем само слово «мнения», которое и так понятно из места. */
.notesbtn{display:flex;align-items:center;justify-content:space-between;
  gap:9px;width:100%;margin-top:8px;padding:10px 12px;background:var(--raise);
  box-shadow:inset 2px 0 0 var(--accent);color:var(--muted)}
.notesbtn .k{font-family:var(--body);font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase}
.notesbtn .n{font-family:var(--display);font-size:18px;font-weight:700;
  letter-spacing:.02em;color:var(--ink)}
.notesbtn:active{background:var(--edge-fill)}

.noteslist{display:flex;flex-direction:column;gap:10px;width:100%;
  max-width:420px;max-height:56vh;overflow-y:auto;text-align:left}
.notecard{background:var(--surface);padding-bottom:11px}
.notecard.own{box-shadow:inset 3px 0 0 var(--accent)}
.notecard .mrow{padding:11px 13px 4px}
.notecard .avatar{width:34px;height:34px;font-size:15px}
.notecard .mrow .n{font-size:15px}
.notecard .stars{margin-top:2px}
.notecard .titleline{margin-top:4px}
.notecard .title{font-size:10px;padding:2px 6px}
.notetext{margin:0 13px 9px;font-size:13px;line-height:1.5;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
/* Ответ стоит рядом с мнением, а не вместо него: видно и то, и другое. */
.notereply{margin:0 13px 9px;padding:8px 10px;background:var(--raise);
  box-shadow:inset 2px 0 0 var(--live)}
.notereply .k{display:block;font-family:var(--body);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--live);
  margin-bottom:4px}
.notereply p{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
.notecard .field{margin:0 13px 9px}

/* ---------- отзывы о приложении ---------- */
/* Карточка мнения, а не анкеты: имени и текста достаточно, ранга и роли
   здесь нет - они к делу не относятся. Свой отзыв отмечен слева акцентом,
   чтобы человек находил его в списке, не вчитываясь. */
.saytop{padding-bottom:14px}
.saytop .btn{margin-top:10px}
.saycard{background:var(--surface);padding-bottom:11px;margin-top:10px}
.saycard.own{box-shadow:inset 3px 0 0 var(--accent)}
.saycard .mrow{padding:12px 13px 4px}
.saycard .avatar{width:36px;height:36px;font-size:16px}
.saycard .mrow .n{font-size:16px}
.saycard .titleline{margin-top:4px}
.saycard .title{font-size:10.5px;padding:2px 7px}
.saytext{margin:0 13px 10px;font-size:13px;line-height:1.5;color:var(--ink);
  white-space:pre-wrap;overflow-wrap:anywhere}
.sayacts{display:flex;align-items:center;gap:8px;padding:0 13px}
.saynote{padding-top:14px}

/* Лайк тут значит «у меня так же», поэтому счётчик крупнее сердца. */
.likebtn{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;
  background:var(--raise);color:var(--muted)}
.likebtn .h{font-size:12px;line-height:1}
.likebtn .c{font-family:var(--mono);font-size:12.5px;font-weight:500}
.likebtn.on{color:var(--accent)}
.likebtn.on .h{color:var(--accent)}
.likebtn[disabled]{opacity:.45}

/* ---------- анкета ---------- */
.pfhead{display:flex;gap:13px;align-items:center;padding:16px 16px 4px}
.pfhead .avatar{width:60px;height:60px;font-size:28px}

/* Переключатель подразделов анкеты. Тот же язык, что у остальных
   переключателей: выбранное инвертируется в кремовый и получает скос. */
.pfseg{display:flex;gap:8px;padding:12px 16px 2px}
.pfseg button{flex:1;padding:9px 6px;background:var(--surface);color:var(--muted);
  font-family:var(--body);font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;text-align:center}
.pfseg button.on{background:var(--ink);color:var(--ground);clip-path:var(--notch)}
.pfpane[hidden]{display:none}
/* Первый раздел внутри вкладки уже отделён переключателем, ещё одна
   красная засечка сверху делала бы два разделителя подряд. */
.pfpane > .sect:first-child::before{display:none}

.field{background:var(--surface);padding:11px 13px;display:flex;flex-direction:column;gap:4px}
.field input,.field textarea{background:none;border:0;color:var(--ink);
  font-family:var(--mono);font-size:15px;width:100%;padding:0;outline:none;resize:none}
.field textarea{font-family:var(--body);font-size:13px;line-height:1.5;min-height:66px}
.timepair{display:flex;gap:9px}
.timepair .field{flex:1}

/* ---------- статус и код лобби ---------- */
.livebox{display:flex;align-items:center;gap:12px;background:var(--live-wash);
  padding:13px;box-shadow:inset 0 0 0 1px rgba(120,224,192,.22)}
.livedot{width:9px;height:9px;flex:none;background:var(--live);position:relative;
  box-shadow:0 0 16px rgba(120,224,192,.40)}
.livetxt{display:flex;flex-direction:column;gap:3px;min-width:0}
.livetxt b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.03em;
  text-transform:uppercase;color:var(--live)}
.livetxt .count{font-family:var(--mono);font-size:20px;color:var(--ink);letter-spacing:.04em}

.lobby{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  background:rgba(120,224,192,.07);padding:10px 12px;
  box-shadow:inset 0 0 0 1px rgba(120,224,192,.20)}
.lobby:active{background:rgba(120,224,192,.14)}
.lobby .lk{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.lobby .v{font-family:var(--mono);font-size:19px;color:var(--ink);
  letter-spacing:.14em;overflow-wrap:anywhere}
.lobby .copy{font-family:var(--body);font-weight:600;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--live);white-space:nowrap}

/* ---------- онбординг ---------- */
.ob{flex:1;display:flex;flex-direction:column;padding:20px 16px;gap:14px;
  min-height:0;overflow-y:auto}
.obbar{display:flex;gap:6px;flex:none}
.obbar span{flex:1;height:3px;background:var(--edge-fill)}
.obbar span.on{background:var(--accent)}
.ob h3{font-size:24px;font-weight:800}
.ob .hint{font-size:12.5px;color:var(--muted);line-height:1.5}
.obfoot{margin-top:auto;display:flex;flex-direction:column;gap:10px;padding-top:16px}
.obnote{font-size:11.5px;color:var(--dim);line-height:1.45}
.obnote.pad{padding:0 16px 20px}

/* ---------- статистика ---------- */
.frow{display:flex;flex-direction:column;gap:6px}
.fhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fk{font-size:12.5px;color:var(--muted)}
.fv{font-family:var(--mono);font-size:16px;color:var(--ink)}
/* Сегментированная шкала: десять слотов, а не гладкая заливка. */
.fbar{height:6px;overflow:hidden;background:rgba(236,232,225,.10);
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),
    transparent calc(10% - 2px) 10%);
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(10% - 2px),
    transparent calc(10% - 2px) 10%)}
.fbar i{display:block;height:100%;background:var(--ink);transition:width .7s ease-out}
.frow + .frow{margin-top:10px}

/* ---------- подсказка ---------- */
.coach{position:fixed;left:14px;right:14px;
  bottom:calc(var(--nav-h) + var(--safe-b) + var(--acts-h) + 12px);z-index:24;
  background:var(--raise);padding:14px;display:flex;flex-direction:column;gap:11px;
  box-shadow:inset 0 0 0 1px rgba(236,232,225,.12);animation:slideup .22s linear}
.coach[hidden]{display:none}
.coach .ctext{font-size:12.5px;line-height:1.5;color:var(--ink)}
.coach .cbtn{align-self:flex-start;font-family:var(--body);font-weight:700;font-size:12px;
  letter-spacing:.10em;text-transform:uppercase;background:var(--accent);
  color:var(--on-accent);padding:9px 17px;clip-path:var(--notch)}
.coach.at-profile::after{content:"";position:absolute;bottom:-9px;right:16%;
  width:0;height:0;border-left:9px solid transparent;border-right:9px solid transparent;
  border-top:9px solid var(--raise)}

/* ---------- карточка на весь экран ---------- */
.overlay.cardmode{justify-content:flex-start;padding:16px 16px 18px;gap:14px}
.cardholder{position:relative;width:100%;flex:1;min-height:0}
.overlay.cardmode .cardholder .pcard{position:absolute;inset:0}

/* ---------- нижняя навигация ---------- */
.nav{position:absolute;left:0;right:0;bottom:0;
  height:calc(var(--nav-h) + var(--safe-b));padding-bottom:var(--safe-b);
  display:flex;border-top:1px solid var(--edge-soft);background:var(--nav-bg);z-index:15}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;color:var(--dim);font-family:var(--body);
  font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  border-top:2px solid transparent;margin-top:-1px;position:relative}
.nav button.on{color:var(--ink);border-top-color:var(--accent)}
.nav button.on::before{content:"";position:absolute;top:-1px;left:50%;width:12px;
  height:6px;transform:translateX(-50%);background:var(--accent);
  clip-path:polygon(0 0, 100% 0, 50% 100%)}
.nav .badge{position:absolute;top:7px;right:calc(50% - 28px);background:var(--accent);
  color:var(--on-accent);font-family:var(--mono);font-size:9px;padding:0 4px;font-weight:500}
.nav[hidden]{display:none}

/* ---------- заглушки ---------- */
.boot{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:14px;padding:26px;text-align:center;
  background:var(--ground);z-index:30}
.boot .brand{font-family:var(--display);font-size:34px;font-weight:800;
  letter-spacing:.08em;color:var(--ink)}
.boot p{color:var(--muted);font-size:13px;max-width:34ch;line-height:1.5}
.boot .fine{color:var(--dim);font-size:10.5px;letter-spacing:.04em;max-width:36ch}
.boot[hidden]{display:none}

/* Плашка всегда выше ряда «скип/лайк»: высота считалась на лету, но
   уведомление живёт несколько секунд и переживает переход между вкладками -
   показанное в анкете, оно потом накрывало кнопки в ленте. */
.toast{position:fixed;left:14px;right:14px;
  bottom:calc(var(--nav-h) + var(--safe-b) + var(--acts-h) + 12px);background:var(--raise);
  padding:11px 14px;font-size:12.5px;color:var(--ink);z-index:25;opacity:0;
  transform:translateY(8px);transition:opacity var(--d-state) linear,
  transform var(--d-state) linear;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(236,232,225,.12)}
.toast.on{opacity:1;transform:none}

/* Предложение написать пару слов. Намеренно не похоже на серую плашку
   уведомлений: лицо, ник и красная кромка - это про человека, а не про
   систему. Живёт над рядом кнопок, там же, где и плашка, но одновременно
   они не появляются. */
.notebar{position:fixed;left:14px;right:14px;
  bottom:calc(var(--nav-h) + var(--safe-b) + var(--acts-h) + 12px);
  z-index:26;display:flex;align-items:center;gap:10px;
  background:var(--raise);padding:9px 10px;
  box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(236,232,225,.10);
  opacity:0;transform:translateY(8px);
  transition:opacity var(--d-state) linear, transform var(--d-state) linear}
.notebar.on{opacity:1;transform:none}
.notebar .avatar.mini{width:34px;height:34px;flex:none}
.nbtext{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.nbtext b{font-family:var(--display);font-size:15px;letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nbtext span{font-size:11.5px;color:var(--muted)}
.nbgo{flex:none;background:var(--accent);color:var(--on-accent);
  font-weight:600;font-size:12px;padding:8px 13px;clip-path:var(--notch)}
.nbclose{flex:none;background:transparent;color:var(--dim);font-size:18px;
  line-height:1;padding:4px 6px}

/* Почему подходит: вывод вместо голых полей. Красные засечки слева -
   тот же язык, что у строки к лайку: «это про тебя лично». */
.why{margin:2px 0 10px;padding:9px 11px;background:var(--raise);
  box-shadow:inset 2px 0 0 var(--accent)}
.why .k{display:block;font-family:var(--body);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.wrow{display:flex;align-items:baseline;gap:7px;font-size:12.5px;
  line-height:1.45;color:var(--ink)}
.wrow + .wrow{margin-top:3px}
.wrow i{width:4px;height:4px;flex:none;background:var(--accent);
  transform:translateY(-2px)}

/* Свои цифры в анкете. Люди скринят такое - значит, должно быть красиво. */
.mystats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mscell{background:var(--surface);padding:10px 12px;display:flex;
  flex-direction:column;gap:2px}
.mscell b{font-family:var(--display);font-size:24px;font-weight:800;
  letter-spacing:.02em;color:var(--ink)}
.mscell span{font-size:11px;color:var(--muted)}
.chips.badges{margin-top:2px}
.chips.badges .chip{background:var(--raise);color:var(--ink);
  box-shadow:inset 0 -2px 0 var(--accent)}

/* Приглашение на доску там, где лента кончилась. */
.boardhintbig{margin:0 0 14px;padding:13px;background:var(--surface);
  box-shadow:inset 3px 0 0 var(--accent);display:flex;flex-direction:column;
  gap:6px;text-align:left}
.boardhintbig b{font-family:var(--display);font-size:17px;color:var(--ink)}
.boardhintbig span{font-size:12.5px;color:var(--muted)}
.boardhintbig .btn{align-self:flex-start;margin-top:3px}

/* ---------- доска объявлений ----------
   Заявки висят как записки на доске: булавка сверху, лёгкий наклон через
   одну, срезанный уголок снизу. Фон чуть теплее остального интерфейса -
   этого хватает, чтобы читалось «доска», и при этом не спорит с Valorant. */
.board{background:
  radial-gradient(circle at 20% 0%, rgba(255,180,120,.05), transparent 60%),
  radial-gradient(circle at 80% 40%, rgba(255,120,120,.04), transparent 55%),
  var(--ground)}
.boardtop{padding:14px 16px 4px;display:flex;flex-direction:column;gap:9px}
.btn.wide{width:100%}
.boardhint{font-family:var(--body);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim)}

.notice{position:relative;margin:14px 16px;padding:20px 14px 12px;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px rgba(236,232,225,.09),
             0 6px 16px rgba(0,0,0,.35);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transform:rotate(-.5deg)}
.notice.tilt{transform:rotate(.55deg)}
.notice.own{box-shadow:inset 0 0 0 1px var(--accent),
            0 6px 16px rgba(0,0,0,.35)}
/* Деревянная кнопка-булавка: тёплый блик сверху слева, тень снизу справа -
   этого хватает, чтобы шляпка читалась объёмной на плоском интерфейсе. */
.notice .pin{position:absolute;top:6px;left:50%;width:12px;height:12px;
  margin-left:-6px;border-radius:50%;
  background:radial-gradient(circle at 33% 30%,
    #E8C79C 0%, #C99A63 42%, #9A6E3E 78%, #6E4A26 100%);
  box-shadow:0 3px 5px rgba(0,0,0,.55),
             inset 0 -2px 3px rgba(0,0,0,.30),
             inset 0 1px 1px rgba(255,235,205,.45)}
.notice .pin::after{content:"";position:absolute;left:50%;top:100%;
  width:2px;height:4px;margin-left:-1px;background:rgba(0,0,0,.35)}

.need{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.need .k{font-family:var(--body);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.need strong{font-family:var(--display);font-size:23px;font-weight:800;
  letter-spacing:.02em;color:var(--tier,var(--ink));text-transform:uppercase}
.need .goal{font-size:11.5px;color:var(--muted);
  background:var(--raise);padding:3px 8px}
.needroles{margin:-2px 0 9px}
.ntext{margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--ink)}
.notice .mrow{padding:0;margin-bottom:9px}
.notice .lobby{margin-bottom:9px}
.notice .macts{padding:0;align-items:center}
.replies{font-size:11.5px;color:var(--dim);margin-left:2px}

.replylist{max-height:46vh;overflow-y:auto;margin:2px -4px 4px;padding:0 4px}
.replylist .mcard{margin-top:8px}
.replylist .mrow{padding:10px 12px 4px}
.replylist .macts{padding:0 12px}

/* Строка к лайку: заметнее описания - ради неё и отвечают. */
.likenote{margin:8px 13px 2px;padding:9px 11px;background:var(--raise);
  box-shadow:inset 2px 0 0 var(--accent)}
.likenote .k{display:block;font-family:var(--body);font-size:9.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:3px}
.likenote p{margin:0;font-size:13px;line-height:1.4;color:var(--ink)}
/* Описание из анкеты - тем же блоком, но приглушённое: так видно, что
   это не написанное тебе сообщение, а просто текст анкеты. */
.likenote.about{box-shadow:inset 2px 0 0 var(--edge);background:transparent;
  padding-left:9px}
.likenote.about p{color:var(--muted)}

.reportbtn.mod{color:var(--muted);box-shadow:inset 0 0 0 1px var(--edge);
  padding:4px 9px;margin-left:8px}
.reportbtn.mod.danger{color:var(--accent)}

.autosave{font-size:11.5px;color:var(--dim);min-height:14px;
  font-family:var(--body)}
.autosave.bad{color:var(--accent)}

/* Загрузка своего фото: кружок предпросмотра и кнопка рядом. */
.avaField{display:flex;gap:13px;align-items:center}
.avaShot{width:72px;height:72px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--surface);display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--edge)}
.avaShot img{width:100%;height:100%;object-fit:cover;display:block}
.avaEmpty{font-family:var(--body);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim)}
.avaSide{display:flex;flex-direction:column;gap:7px;min-width:0}
.avaSide .btn{align-self:flex-start}

/* ---------- отклик на нажатие ---------- */
.act,.opt,.mact,.btn,.iconbtn,.chip,.switch,.lobby,.track,.track i{
  transition:background-color var(--d-state) linear,
             color var(--d-tick) linear,
             transform var(--d-tick) linear,
             box-shadow var(--d-hover) linear}
.act:active,.opt:active,.mact:active,.btn:active,.iconbtn:active,.lobby:active{
  transition-duration:0s;filter:brightness(.82);transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .livedot::after,.livepill i::after{animation:none}
}

/* ---------- подсказка про статус в ленте ---------- */
.nudge{margin:0 16px 10px;padding:11px 13px;background:var(--surface);
  box-shadow:inset 3px 0 0 var(--accent);display:flex;flex-direction:column;
  gap:10px;flex:none}
.nudge[hidden]{display:none}
.ntext{display:flex;flex-direction:column;gap:3px}
.ntext b{font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.ntext span{font-size:12px;color:var(--muted);line-height:1.45}
.nrow{display:flex;gap:8px}
.nbtn{font-size:12px;padding:8px 14px;background:var(--raise);color:var(--muted);
  font-family:var(--body);font-weight:600}
.nbtn.primary{background:var(--accent);color:var(--on-accent);clip-path:var(--notch)}
.sheetfield{width:100%;max-width:320px}

/* ---------- ссылка на канал проекта ---------- */
.newslink{display:flex;flex-direction:column;gap:2px;width:100%;text-align:left;
  background:var(--surface);padding:11px 13px;
  box-shadow:inset 0 0 0 1px var(--edge)}
.newslink:active{background:var(--raise)}
.newslink b{font-family:var(--display);font-size:16px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink)}
.newslink span{font-family:var(--mono);font-size:12.5px;color:var(--live)}

/* ---------- тост с действием ---------- */
.toast{display:flex;align-items:center;gap:12px;justify-content:space-between}
.ttext{flex:1;min-width:0}
.tact{font-family:var(--body);font-weight:700;font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--live);white-space:nowrap;padding:2px 0}
.tact:active{opacity:.7}

/* ---------- причины жалобы ---------- */
.opts.reasons{flex-direction:column;align-items:stretch;width:100%;max-width:320px}
.opts.reasons .opt{text-align:left;font-size:13px;padding:11px 13px}

/* Убрать - действие второго ряда: заметно, но не спорит с главным. */
.mact.on{color:var(--ink);box-shadow:inset 0 0 0 1px var(--edge)}
.mact.quiet{color:var(--dim)}
.mact.quiet:active{color:var(--accent)}

/* ---------- звёзды ---------- */
.stars{position:relative;display:inline-block;font-size:15px;line-height:1;
  letter-spacing:.08em;white-space:nowrap}
.stars .sbase{color:var(--edge-fill)}
.stars .sfill{position:absolute;left:0;top:0;overflow:hidden;color:var(--t-gold);
  white-space:nowrap}
.rep .head{align-items:center}
.rep .score{font-family:var(--display);font-size:20px;font-weight:700;
  color:var(--ink);letter-spacing:.02em}
.rep .of{font-size:11.5px;color:var(--muted);line-height:1.4}

.marks{display:flex;flex-direction:column;gap:4px}
.mark{display:flex;gap:7px;align-items:baseline;font-size:12px;color:var(--muted)}
.mark b{font-family:var(--mono);font-weight:500;font-size:13px;color:var(--live);
  font-variant-numeric:tabular-nums}

/* выбор оценки в опросе */
.starpick{display:flex;gap:6px}
.star{font-size:30px;line-height:1;color:var(--edge-fill);padding:2px 0;
  transition:color var(--d-tick) linear}
.star.on{color:var(--t-gold)}
.starhint{font-size:12px;color:var(--dim);margin-top:-4px}