/* ==========================================================================
   Рифмоплёт — дизайн-система «Чернила и сцена»
   Telegram Mini App. Мобильный first, 3 темы, единый набор компонентов.
   ========================================================================== */

/* --- 1. Токены ----------------------------------------------------------- */

:root {
  /* Тема «Чернила» — основная */
  --bg:            #05090B;
  --bg-raise:      #0D1719;
  --bg-sink:       #020506;
  --hair:          rgba(215, 246, 242, .10);
  --hair-strong:   rgba(215, 246, 242, .22);

  --fg:            #F5FAFA;
  --fg-2:          #A8B8B7;
  --fg-3:          #647674;

  --lamp:          #2DD4BF;
  --lamp-ink:      #021817;
  --lamp-soft:     rgba(45, 212, 191, .13);
  --lamp-glow:     rgba(45, 212, 191, .20);

  --win:           #6FD79A;
  --lose:          #F26A5E;

  /* Типографика */
  --ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI',
        'Helvetica Neue', Arial, 'Liberation Sans', sans-serif;
  --verse: var(--ui);

  --t-micro: 12px;
  --t-small: 14px;
  --t-body:  16px;
  --t-lead:  19px;
  --t-verse: 26px;
  --t-title: 40px;
  --t-hero:  42px;
  --t-score: 104px;

  /* Ритм */
  --u: 8px;
  --gutter: 22px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;

  /* Движение */
  --ease: cubic-bezier(.2, .8, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --fast: 130ms;
  --mid: 260ms;
  --slow: 520ms;
}

/* Светлая тема: та же «тушь и бирюза», но на холодной бумаге. */
[data-theme='paper'] {
  --bg:          #F2F8F7;
  --bg-raise:    #FFFFFF;
  --bg-sink:     #E4EFED;
  --hair:        rgba(7, 34, 33, .11);
  --hair-strong: rgba(7, 34, 33, .25);

  --fg:          #071615;
  --fg-2:        #3F5957;
  --fg-3:        #687E7C;

  --lamp:        #087E73;
  --lamp-ink:    #FFFFFF;
  --lamp-soft:   rgba(8, 126, 115, .11);
  --lamp-glow:   rgba(45, 212, 191, .18);

  --win:         #19784E;
  --lose:        #C83E37;
}

/* Тема «Сцена» — максимальный контраст, для дуэлей и тёмных залов */
[data-theme='stage'] {
  --bg:          #000000;
  --bg-raise:    #0C0A08;
  --bg-sink:     #000000;
  --hair:        rgba(255, 240, 214, .12);
  --hair-strong: rgba(255, 240, 214, .28);

  --fg:          #FFF6E6;
  --fg-2:        #9A9078;
  --fg-3:        #5E5748;

  --lamp:        #FFD166;
  --lamp-ink:    #100B02;
  --lamp-soft:   rgba(255, 209, 102, .16);
  --lamp-glow:   rgba(255, 209, 102, .38);
}

/* --- 2. База ------------------------------------------------------------- */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ui);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body { transition: background-color var(--mid) var(--ease), color var(--mid) var(--ease); }
body.has-avatar-dialog { overflow: hidden; }

::selection { background: var(--lamp); color: var(--lamp-ink); }

/* --- 3. Каркас ----------------------------------------------------------- */

.app {
  position: relative;
  min-height: 100dvh;
  max-width: 480px;
  margin: 0 auto;
  isolation: isolate;
  overflow: hidden;
}

/* Свет лампы: единственный градиент в системе, мотивирован метафорой сцены */
.app::before {
  content: '';
  position: absolute;
  inset: -34% -8% auto -8%;
  height: 74%;
  background: radial-gradient(ellipse 62% 50% at 50% 0%, var(--lamp-glow), transparent 68%);
  opacity: .22;
  pointer-events: none;
  z-index: 0;
}

[data-theme='paper'] .app::before { opacity: .22; }
[data-theme='stage'] .app::before { opacity: .70; height: 64%; }

.screen {
  position: relative;
  z-index: 1;
  display: none;
  flex-direction: column;
  min-height: 100dvh;
  padding: calc(var(--u) * 3 + env(safe-area-inset-top, 0px))
           var(--gutter)
           calc(var(--u) * 4 + env(safe-area-inset-bottom, 0px));
}

.screen.is-active { display: flex; }

.screen__body { flex: 1 1 auto; }
.screen__foot { flex: 0 0 auto; padding-top: calc(var(--u) * 3); }

/* --- 4. Шапка ------------------------------------------------------------ */

.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 40px;
  margin-bottom: calc(var(--u) * 3);
}

.bar__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px 8px 8px;
  margin-left: -8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-2);
  font: 500 var(--t-small)/1 var(--ui);
  cursor: pointer;
  transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.bar__back:active { color: var(--fg); transform: translateX(-2px); }
.bar__back svg { width: 8px; height: 13px; }
.has-native-back .bar__back { display:none; }
.has-native-back .bar--native-only { display:none; }

.bar__mark { margin-left: auto; display: flex; align-items: center; color: var(--fg-3); }
.bar__mark svg { width: 22px; height: 22px; display: block; }

.bar__meta {
  margin-left: auto;
  color: var(--fg-3);
  font-size: var(--t-micro);
  letter-spacing: .02em;
}

/* --- 5. Типографика ------------------------------------------------------ */

.hero, .title {
  font-family: var(--ui);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.05;
  margin: 0;
}

.hero  { font-size: var(--t-hero); }
.title { font-size: var(--t-title); }

/* Фирменный приём «эхо»: рифма — это отражённый звук.
   Один раз на экран, на главном объекте. */
.echo { position: relative; display: inline-block; isolation: isolate; }
.echo::before {
  content: attr(data-echo);
  position: absolute;
  left: 0; top: 0;
  color: transparent;
  -webkit-text-stroke: .018em var(--lamp);
  display: none !important;
  opacity: 0 !important;
  transform: translate(.14em, .115em);
  z-index: -1;
  pointer-events: none;
  white-space: pre;
}
[data-theme='paper'] .echo::before { opacity: .85; }
[data-theme='stage'] .echo::before { opacity: .85; }

.lede {
  margin: 14px 0 0;
  max-width: 30ch;
  color: var(--fg-2);
  font-size: var(--t-lead);
  line-height: 1.42;
}

.note {
  margin: 0;
  color: var(--fg-3);
  font-size: var(--t-small);
  line-height: 1.5;
}

.verse {
  font-family: var(--verse);
  font-size: var(--t-verse);
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -.01em;
  margin: 0;
  max-width: 20ch;
}

.verse--mine { font-style: normal; color: var(--lamp); }

/* Игровые экраны: композиция собирается вокруг пары строк */
.screen--play .screen__body,
.screen--mid .screen__body { display: flex; flex-direction: column; }
.screen--play .couplet { margin-top: auto; margin-bottom: auto; padding: 26px 0; }
.screen--mid .middle { margin-top: auto; margin-bottom: auto; }

/* --- 6. Строка: главный структурный элемент ------------------------------ */
/* Заданная фраза и ответ игрока лежат на одной линованной строке. */

.rule {
  height: 1px;
  background: var(--hair-strong);
  border: 0;
  margin: 0;
}

.line {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair-strong);
}

.line + .line { padding-top: 18px; }

/* --- 7. Сцена: главный блок меню ----------------------------------------- */

.stage {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  padding: 26px 24px 22px;
  border: 1px solid var(--hair);
  border-radius: var(--r-lg);
  background: var(--bg-raise);
  color: inherit;
  font: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.stage:active { transform: scale(.985); border-color: var(--hair-strong); }

.stage__label {
  display: block;
  color: var(--fg-3);
  font-size: var(--t-micro);
  margin-bottom: 12px;
}

.stage__verse {
  font-family: var(--verse);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -.01em;
  margin: 0 0 20px;
  max-width: 17ch;
}

.stage__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  border-top: 1px solid var(--hair);
  font-size: var(--t-lead);
  font-weight: 600;
  color: var(--lamp);
}
.stage__cta i {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fast) var(--ease);
}
.stage:active .stage__cta i { transform: rotate(45deg) translate(2px, -2px); }

/* --- 8. Ряды режимов (вместо сетки карточек) ----------------------------- */

.menu-intro { margin-top: 12px; font-size: 16px; color: var(--fg-2); }
.rows { margin: 42px 0 0; }
.row--primary {
  margin-bottom: 14px;
  padding: 20px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-md);
  background: var(--bg-raise);
}
.row--primary .row__name { color: var(--lamp); }

.row {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 22px 4px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fast) var(--ease), padding-left var(--fast) var(--ease);
}
.rows .row:last-child { border-bottom: 1px solid var(--hair); }
.row:active { background: var(--lamp-soft); padding-left: 10px; }

.row__text { flex: 1 1 auto; min-width: 0; }
.row__name { display: block; font-size: var(--t-lead); font-weight: 600; letter-spacing: -.01em; }
.row__hint { display: block; margin-top: 3px; color: var(--fg-3); font-size: var(--t-small); }

.row__chev {
  flex: 0 0 auto;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--fg-3);
  border-top: 1.5px solid var(--fg-3);
  transform: rotate(45deg);
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.row:active .row__chev { border-color: var(--lamp); transform: rotate(45deg) translate(3px, -3px); }

/* Главное меню — игровая полка, а не список сообщений. */
#s-menu { gap: 12px; }
.menu-body { display:flex; flex-direction:column; }
.menu-head { display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; gap:12px; min-height:70px; }
.menu-head__mark { position:relative; width:48px; height:48px; display:block; }
.brand-mark { position:absolute; inset:0; display:block; width:100%; height:100%; }
.brand-mark--paper { visibility:hidden; }
[data-theme='paper'] .brand-mark--ink { visibility:hidden; }
[data-theme='paper'] .brand-mark--paper { visibility:visible; }
.menu-head__copy { min-width:0; }
.menu-head__copy b { display:block; color:var(--fg); font-size:24px; line-height:1.05; letter-spacing:-.035em; }
.menu-head__copy small { display:block; margin-top:6px; color:var(--fg-2); font-size:13px; line-height:1.2; }
.menu-score { min-width:104px; margin:0; padding:11px 13px; border:1px solid var(--hair); border-radius:999px; background:var(--bg-raise); color:var(--fg-3); font-size:11px; line-height:1.25; text-align:center; }
.menu-score b { color:var(--fg); font-size:13px; font-weight:750; }
.menu-score span { white-space:nowrap; }

.mode-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:20px; }
.mode-card { position:relative; min-width:0; min-height:148px; display:flex; flex-direction:column; align-items:flex-start; overflow:hidden; padding:18px; border:1px solid var(--hair); border-radius:24px; background:var(--bg-raise); color:var(--fg); font:inherit; text-align:left; cursor:pointer; box-shadow:0 12px 28px rgba(0,0,0,.15); transition:transform var(--fast) var(--ease),border-color var(--fast) var(--ease),background-color var(--fast) var(--ease); }
.mode-card:active { transform:scale(.975); border-color:var(--lamp); background:var(--lamp-soft); }
.mode-card:focus-visible,.menu-dock button:focus-visible { outline:2px solid var(--lamp); outline-offset:2px; }
.mode-card--daily { grid-column:1/-1; min-height:132px; padding:18px 22px; background:linear-gradient(135deg,var(--lamp-soft),var(--bg-raise) 72%); border-color:var(--hair-strong); }
.mode-card__eyebrow { margin-bottom:5px; color:var(--lamp); font-size:11px; font-weight:750; }
.mode-card__name { display:block; margin-top:auto; max-width:100%; font-size:21px; font-weight:720; line-height:1.08; letter-spacing:-.025em; }
.mode-card__hint { display:block; margin-top:6px; max-width:100%; overflow:hidden; color:var(--fg-2); font-size:12px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.mode-card__meta { display:block; margin-top:8px; color:var(--fg-3); font-size:11px; line-height:1.2; }
.mode-card__meta--accent { color:var(--lamp); font-weight:650; }
.mode-card__svg { width:44px; height:44px; margin-bottom:16px; fill:none; stroke:var(--lamp); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.mode-card__svg--quill { width:46px; height:46px; stroke-width:3.4; }
.mode-card--daily .mode-card__name { margin-top:0; font-size:25px; }
.mode-card--daily .mode-card__hint { max-width:70%; }
.mode-card--daily .mode-card__meta { margin-top:auto; }
.mode-card--friends { grid-column:1/-1; min-height:126px; display:grid; grid-template-columns:54px 1fr; column-gap:14px; align-content:center; }
.mode-card--friends .mode-card__svg { grid-row:1/4; align-self:center; margin:0; }
.mode-card--friends .mode-card__name { margin-top:0; }
.mode-card__icon--sun { position:absolute; top:18px; right:20px; width:48px; height:48px; border:4px solid var(--lamp); border-radius:50%; }
.mode-card__icon--sun::before { content:''; position:absolute; inset:-13px; border:3px dotted var(--lamp); border-radius:50%; opacity:.9; }
.mode-card__icon--sun i { position:absolute; inset:12px; border-radius:50%; background:var(--lamp-soft); }

.menu-foot { padding-top:0; }
.menu-dock { display:grid; grid-template-columns:repeat(4,1fr); min-height:78px; padding:10px 4px 8px; border:1px solid var(--hair); border-radius:24px; background:var(--bg-raise); box-shadow:0 12px 30px rgba(0,0,0,.16); }
.menu-dock button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; padding:2px; border:0; background:transparent; color:var(--fg-2); font:600 10px/1 var(--ui); cursor:pointer; transition:color var(--fast) var(--ease),transform var(--fast) var(--ease); }
.menu-dock button:active { color:var(--lamp); transform:scale(.95); }
.menu-dock svg { width:25px; height:25px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.menu-dock span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

[data-theme='paper'] .mode-card,[data-theme='paper'] .menu-dock,[data-theme='paper'] .menu-score { box-shadow:0 10px 26px rgba(7,34,33,.07); }
@media (max-height:700px) {
  #s-menu { padding-top:16px; padding-bottom:16px; }
  .menu-head { min-height:58px; }
  .menu-head__mark { width:42px; height:42px; }
  .mode-grid { margin-top:12px; gap:9px; }
  .mode-card { min-height:126px; padding:14px; border-radius:20px; }
  .mode-card--daily { min-height:110px; padding:14px 18px; }
  .mode-card__svg { width:36px; height:36px; margin-bottom:10px; }
  .mode-card__name { font-size:19px; }
  .mode-card__meta { margin-top:5px; }
  .menu-dock { min-height:68px; }
}
@media (max-width:350px) {
  .menu-head { grid-template-columns:44px minmax(0,1fr); }
  .menu-score { grid-column:1/-1; justify-self:start; min-width:0; padding:7px 11px; }
  .mode-card { padding:14px; }
  .mode-card__name { font-size:18px; }
  .mode-card__hint { font-size:11px; }
  .menu-dock button { font-size:9px; }
}

/* --- 9. Кнопки ----------------------------------------------------------- */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 16px 22px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--fg);
  font: 600 var(--t-lead)/1.2 var(--ui);
  letter-spacing: -.01em;
  cursor: pointer;
  overflow: hidden;
  user-select: none;
  transition: transform var(--fast) var(--ease),
              background-color var(--fast) var(--ease),
              border-color var(--fast) var(--ease),
              opacity var(--fast) var(--ease);
}
.btn:active { transform: scale(.975); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }

.btn--primary { background: var(--lamp); color: var(--lamp-ink); }
.btn--primary:disabled { background: transparent; border-color: var(--hair); color: var(--fg-3); opacity: 1; }
.btn--primary:active { background: var(--lamp); filter: brightness(1.08); }

.btn--quiet { border-color: var(--hair-strong); color: var(--fg); }
.btn--quiet:active { background: var(--lamp-soft); border-color: var(--lamp); }

.btn--text {
  min-height: 44px;
  color: var(--fg-2);
  font-weight: 500;
  font-size: var(--t-body);
}
.btn--text:active { color: var(--fg); }

.btn--danger { border-color: var(--hair-strong); color: var(--lose); }

.btn + .btn { margin-top: 10px; }

/* --- 10. Поле ввода на строке ------------------------------------------- */

.field { position: relative; }

.field__input {
  display: block;
  width: 100%;
  padding: 6px 0 14px;
  border: 0;
  border-bottom: 1px solid var(--hair-strong);
  border-radius: 0;
  background: transparent;
  color: var(--lamp);
  font-family: var(--verse);
  font-size: var(--t-verse);
  font-style: normal;
  font-weight: 500;
  line-height: 1.28;
  outline: none;
  resize: none;
  overflow: hidden;
  min-height: 2.6em;
  transition: border-color var(--mid) var(--ease);
}
.field__input::placeholder { color: var(--fg-3); font-style: normal; font-family: var(--ui); font-size: var(--t-lead); }
.field__input:focus { border-color: var(--lamp); }

.field__count {
  margin-top: 10px;
  color: var(--fg-3);
  font-size: var(--t-micro);
}

.input {
  display: block;
  width: 100%;
  padding: 15px 16px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg);
  font: 500 var(--t-body)/1.3 var(--ui);
  outline: none;
  transition: border-color var(--fast) var(--ease);
}
.input::placeholder { color: var(--fg-3); }
.input:focus { border-color: var(--lamp); }

/* --- 11. Таймер и прогресс раунда --------------------------------------- */

.rail {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: calc(var(--u) * 4);
}

.rail__track {
  flex: 1 1 auto;
  height: 2px;
  background: var(--hair);
  border-radius: 2px;
  overflow: hidden;
}
.rail__fill {
  display: block;
  height: 100%;
  background: var(--lamp);
  border-radius: 2px;
  transition: width 1s linear;
}
.rail__fill.is-low { background: var(--lose); }

.rail__time {
  flex: 0 0 auto;
  font-family: var(--verse);
  font-size: var(--t-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg-2);
}
.rail__time.is-low { color: var(--lose); }

.rail__step { flex: 0 0 auto; color: var(--fg-3); font-size: var(--t-micro); }

/* --- 12. Оценка ---------------------------------------------------------- */

.score { display: flex; align-items: baseline; gap: 26px; }

.score__value {
  font-family: var(--verse);
  font-size: var(--t-score);
  font-weight: 600;
  line-height: .82;
  letter-spacing: -.045em;
  color: var(--lamp);
  font-variant-numeric: tabular-nums;
}
.score__max { font-family: var(--verse); font-size: 26px; color: var(--fg-3); }

.verdict {
  font-family: var(--verse);
  font-size: 25px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.3;
  margin: 22px 0 0;
  max-width: 22ch;
}

/* --- 13. Статистика ------------------------------------------------------ */

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 4px; }

.stat {
  padding: 20px 0;
  border-top: 1px solid var(--hair);
}
.stat:nth-child(odd) { padding-right: 16px; }
.stat:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--hair); }

.stat__value {
  display: block;
  font-family: var(--verse);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.stat__name { display: block; margin-top: 6px; color: var(--fg-3); font-size: var(--t-small); }

.stat--win .stat__value { color: var(--win); }
.stat--lose .stat__value { color: var(--lose); }
.stat--lamp .stat__value { color: var(--lamp); }

.group { margin-top: 30px; }
.group__name { margin: 0 0 4px; color: var(--fg-3); font-size: var(--t-small); font-weight: 500; }

.profile-head { display: flex; align-items: center; gap: 18px; margin-top: 12px; min-width: 0; }
.profile-avatar {
  position: relative;
  flex: 0 0 88px;
  width: 88px;
  height: 88px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hair-strong);
  border-radius: 50%;
  background: var(--bg-sink);
  box-shadow: 0 10px 26px rgba(0,0,0,.16);
}
.profile-avatar img { display: block; width: 100%; height: 100%; border-radius:50%; object-fit: cover; }
.profile-identity { min-width: 0; flex: 1 1 auto; }
.profile-identity .title { max-width: 100%; overflow-wrap: anywhere; font-size: clamp(30px, 10vw, var(--t-title)); }
.profile-rank { display:flex; align-items:center; gap:7px; margin:8px 0 0; color:var(--lamp); font-size:var(--t-small); }
.profile-rank svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.profile-actions { display:flex; flex-wrap:wrap; gap:8px 14px; margin-top:9px; }
.profile-action { padding:0 0 3px; border:0; border-bottom:1px solid var(--hair-strong); background:none; color:var(--fg-2); font:500 14px/1.2 var(--ui); }

.profile-name-editor { margin-top:20px; padding:16px; border:1px solid var(--hair); border-radius:var(--r-md); background:var(--bg-raise); }
.profile-name-editor[hidden] { display:none; }
.profile-name-editor__row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; align-items:stretch; margin-top:9px; }
.profile-name-editor__row .input { min-width:0; }
.profile-name-editor__row .mini-btn { min-width:94px; }
.profile-name-editor__cancel { display:block; margin:11px auto 0; padding:5px 12px; border:0; background:none; color:var(--fg-3); font:500 var(--t-small)/1 var(--ui); }

.avatar-scrim { position:fixed; z-index:39; inset:0; width:100%; border:0; background:rgba(2,5,6,.64); backdrop-filter:blur(2px); }
.avatar-scrim[hidden] { display:none; }
.avatar-panel { position:fixed; z-index:40; left:50%; bottom:calc(14px + env(safe-area-inset-bottom, 0px)); width:min(calc(100% - 24px), 456px); max-height:calc(100dvh - 120px); padding:18px; overflow-y:auto; transform:translateX(-50%); border:1px solid var(--hair-strong); border-radius:24px; background:var(--bg-raise); color:var(--fg); box-shadow:0 24px 64px rgba(0,0,0,.34); }
.avatar-panel[hidden] { display: none; }
.avatar-panel__head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.avatar-panel__head b { display:block; font-size:16px; }
.avatar-panel__head span { display:block; margin-top:3px; color:var(--fg-3); font-size:12px; }
.avatar-panel__head button { width:34px; height:34px; padding:0; border:1px solid var(--hair); border-radius:50%; background:transparent; color:var(--fg-2); font:300 22px/1 var(--ui); }
.avatar-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:18px; }
.avatar-grid .avatar-option:nth-child(9) { grid-column:2; }
.avatar-option { position:relative; min-width:0; aspect-ratio:1; padding:5px; overflow:visible; border:1px solid var(--hair); border-radius:18px; background:var(--bg-sink); }
.avatar-option img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; opacity:.68; filter:saturate(.82); transition:opacity var(--fast) var(--ease),filter var(--fast) var(--ease),transform var(--fast) var(--ease); }
.avatar-option:active img { transform:scale(.94); }
.avatar-option[aria-pressed='true'] { border-color:var(--lamp); background:rgba(45,212,191,.11); box-shadow:none; }
.avatar-option[aria-pressed='true'] img { opacity:1; filter:none; }
.avatar-option[aria-pressed='true']::after { content:'✓'; position:absolute; right:-4px; bottom:-4px; display:grid; place-items:center; width:22px; height:22px; border:3px solid var(--bg-raise); border-radius:50%; background:var(--lamp); color:var(--lamp-ink); font:800 11px/1 var(--ui); }

@media (max-width:360px) {
  .profile-head { gap:14px; }
  .profile-avatar { flex-basis:78px; width:78px; height:78px; }
  .avatar-grid { gap:8px; }
  .avatar-panel { padding:16px; }
  .profile-name-editor__row { grid-template-columns:1fr; }
}

/* --- 14. История --------------------------------------------------------- */

.log { margin-top: 6px; }

.log__item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--hair);
}
.log__item:last-child { border-bottom: 1px solid var(--hair); }

.log__given {
  grid-column: 1;
  font-family: var(--verse);
  font-size: var(--t-body);
  font-weight: 500;
  line-height: 1.3;
}
.log__mine {
  grid-column: 1;
  font-family: var(--verse);
  font-style: normal;
  font-size: var(--t-body);
  color: var(--fg-2);
  line-height: 1.3;
}
.log__mode { grid-column: 1; margin-top: 6px; color: var(--fg-3); font-size: var(--t-micro); }
.log__score {
  grid-row: 1 / span 3;
  grid-column: 2;
  align-self: center;
  font-family: var(--verse);
  font-size: 26px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lamp);
}
.log__score.is-weak { color: var(--fg-3); }

/* --- 15. Дуэль ----------------------------------------------------------- */

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  margin: 30px 0;
}

.side { text-align: center; }
.side__name { font-size: var(--t-body); font-weight: 600; letter-spacing: -.01em; }
.side__score {
  display: block;
  margin-top: 6px;
  font-family: var(--verse);
  font-size: 46px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.side--me .side__score { color: var(--lamp); }
.side--rival .side__score { color: var(--fg-2); }

.versus__mark {
  font-family: var(--verse);
  font-size: 15px;
  font-style: normal;
  color: var(--fg-3);
}

/* Поиск соперника: два «эха» сходятся */
.seek { display: flex; flex-direction: column; align-items: center; padding: 46px 0 40px; }
.seek__lines { position: relative; width: 168px; height: 46px; }
.seek__lines span {
  position: absolute;
  left: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--fg-3);
}
.seek__lines span:nth-child(1) { top: 12px; width: 100%; animation: seekA 2.1s var(--ease) infinite; }
.seek__lines span:nth-child(2) { top: 32px; width: 72%; background: var(--lamp); animation: seekB 2.1s var(--ease) infinite; }

@keyframes seekA { 0%,100% { transform: translateX(-14px); opacity:.5 } 50% { transform: translateX(0); opacity:1 } }
@keyframes seekB { 0%,100% { transform: translateX(46px); opacity:.5 } 50% { transform: translateX(0); opacity:1 } }

/* --- 16. Переключатели --------------------------------------------------- */

.opt {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 4px;
  border: 0;
  border-top: 1px solid var(--hair);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.opts .opt:last-child { border-bottom: 1px solid var(--hair); }

.opt__text { flex: 1 1 auto; }
.opt__name { display: block; font-size: var(--t-body); font-weight: 500; }
.opt__hint { display: block; margin-top: 2px; color: var(--fg-3); font-size: var(--t-small); }

.switch {
  flex: 0 0 auto;
  position: relative;
  width: 48px; height: 28px;
  border-radius: 14px;
  background: var(--hair-strong);
  transition: background-color var(--mid) var(--ease);
}
.switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform var(--mid) var(--ease-out), background-color var(--mid) var(--ease);
}
.opt[aria-pressed='true'] .switch { background: var(--lamp); }
.opt[aria-pressed='true'] .switch::after { transform: translateX(20px); background: var(--lamp-ink); }

/* Выбор темы */
.themes { display: flex; gap: 10px; margin-top: 14px; }
.theme {
  flex: 1 1 0;
  padding: 14px 10px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--fg-2);
  font: 500 var(--t-small)/1.2 var(--ui);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}
.theme[aria-pressed='true'] { border-color: var(--lamp); color: var(--lamp); }
.theme i { display: block; width: 100%; height: 24px; border-radius: 5px; margin-bottom: 9px; }
.theme--ink i   { background: linear-gradient(135deg, #05090B 42%, #2DD4BF 42%); }
.theme--paper i { background: linear-gradient(135deg, #F2F8F7 42%, #087E73 42%); }
.theme--stage i { background: linear-gradient(135deg, #000 42%, #FFD166 42%); }

/* --- 17. Детская игра ---------------------------------------------------- */
/* Та же система, крупнее и мягче: больше воздуха, больше радиусы. */




/* --- 18. Мелочи ---------------------------------------------------------- */

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.tag {
  padding: 7px 12px;
  border: 1px solid var(--hair);
  border-radius: 100px;
  color: var(--fg-2);
  font-size: var(--t-small);
}
.tag--lamp { border-color: var(--lamp); color: var(--lamp); }

.links { display: flex; gap: 22px; justify-content: center; padding-top: 22px; }
.links button {
  border: 0; background: transparent; padding: 6px 2px;
  color: var(--fg-3); font: 500 var(--t-small)/1 var(--ui); cursor: pointer;
  transition: color var(--fast) var(--ease);
}
.links button:active { color: var(--lamp); }

.foot-stat { text-align: center; color: var(--fg-3); font-size: var(--t-small); }
.foot-stat b { color: var(--fg-2); font-weight: 600; }

/* --- 19. Появление экрана: один срежиссированный момент ------------------ */

.screen.is-active > * > .rise,
.screen.is-active > .rise { animation: rise var(--slow) var(--ease-out) backwards; }
.rise:nth-child(1) { animation-delay: 0ms; }
.rise:nth-child(2) { animation-delay: 55ms; }
.rise:nth-child(3) { animation-delay: 110ms; }
.rise:nth-child(4) { animation-delay: 165ms; }
.rise:nth-child(5) { animation-delay: 210ms; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Раскрытие оценки: эхо расходится и садится на место */
@keyframes echo-split {
  0%   { opacity: 0; transform: translate(.14em, .115em) scale(1.4); }
  55%  { opacity: 1; transform: translate(.40em, .34em) scale(1); }
  100% { opacity: .75; transform: translate(.14em, .115em) scale(1); }
}
.is-revealing .echo::before { display: none !important; animation: none !important; }

/* --- 20. Доступность ----------------------------------------------------- */

:focus-visible {
  outline: 2px solid var(--lamp);
  outline-offset: 3px;
}
/* Поле рифмы показывает фокус самой строкой, рамка вокруг неё лишняя */
.field__input:focus-visible { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media (max-width: 340px) {
  :root { --t-hero: 44px; --t-title: 34px; --t-verse: 23px; --t-score: 86px; --gutter: 18px; }
}

/* --- 21. Детский режим: звёзды ------------------------------------------- */

.stars { display: flex; gap: 10px; }
.star { width: 38px; height: 38px; color: var(--hair-strong); transition: color var(--mid) var(--ease); }
.star.is-on { color: var(--lamp); }

.praise {
  font-family: var(--verse);
  font-size: 25px;
  font-weight: 500;
  font-style: normal;
  line-height: 1.3;
  margin: 22px 0 0;
  max-width: 22ch;
}

/* --- 22. Ссылка на дуэль -------------------------------------------------- */

.share {
  padding: 16px 18px;
  border: 1px solid var(--hair-strong);
  border-radius: var(--r-sm);
  color: var(--fg-2);
  font-size: var(--t-small);
  line-height: 1.5;
  word-break: break-all;
}

/* --- 23. Сообщение об ошибке --------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  max-width: 420px;
  width: calc(100% - 44px);
  padding: 14px 18px;
  border: 1px solid var(--lose);
  border-radius: var(--r-sm);
  background: var(--bg-raise);
  color: var(--fg);
  font-size: var(--t-small);
  line-height: 1.4;
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease-out);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* --- 24. Ожидание ответа сервера ----------------------------------------- */

.btn.is-busy { color: transparent; pointer-events: none; }
.btn.is-busy::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--lamp-ink);
  animation: spin 700ms linear infinite;
}
.btn--quiet.is-busy::after, .btn--text.is-busy::after { color: var(--fg-2); }
@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
  color: transparent;
  background: var(--hair);
  border-radius: 4px;
  animation: pulse 1.4s var(--ease) infinite;
}
@keyframes pulse { 50% { opacity: .45; } }

/* --- 25. Стол друзей ---------------------------------------------------- */

.room-form { display: grid; gap: 10px; }
.form-label { margin-top: 8px; color: var(--fg-2); font-size: var(--t-small); }
.select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-2) 50%), linear-gradient(135deg, var(--fg-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size: 5px 5px; background-repeat: no-repeat; }
.table-players { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 8px; margin: 28px 0 10px; }
.table-player { min-width: 0; text-align: center; color: var(--fg-3); }
.table-player__dot { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 7px; border: 3px solid var(--bg-raise); outline:1px solid var(--hair-strong); border-radius: 50%; background: #071314; color: var(--fg); font-weight: 700; box-shadow:0 7px 16px rgba(0,0,0,.14); }
.table-player__dot img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.table-player.is-done .table-player__dot { border-color: var(--lamp); color: var(--lamp); background: var(--lamp-soft); }
.table-player__name { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.table-player__score { display: block; color: var(--fg-2); font-size: 11px; }
.table-players--compact { margin-top: 8px; padding-bottom: 18px; border-bottom: 1px solid var(--hair); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 14px; }
.mini-btn { border: 0; border-radius: var(--r-sm); padding: 0 14px; background: var(--lamp); color: var(--lamp-ink); font: 700 var(--t-small)/1 var(--ui); }
.phrase-list { display: grid; gap: 1px; margin-top: 12px; }
.phrase-chip { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); color: var(--fg-2); font-size: var(--t-small); }
.phrase-chip button { flex: 0 0 auto; border: 0; background: transparent; color: var(--fg-3); font: 500 20px/1 var(--ui); }
.room-hint { margin-top: 10px; text-align: center; }
.room-phase { padding: 30px 0 10px; }
.room-phase__label { color: var(--fg-3); font-size: var(--t-small); }
.room-phase__phrase { margin: 12px 0 30px; font-size: 28px; font-weight: 650; line-height: 1.25; }
.vote-list { display: grid; gap: 10px; }
.vote-card { width: 100%; padding: 16px; border: 1px solid var(--hair-strong); border-radius: var(--r-md); background: transparent; color: var(--fg); text-align: left; font: inherit; }
.vote-card:not(:disabled):active { border-color: var(--lamp); }
.vote-card:disabled { color: var(--fg-3); }
.vote-card__line { display: block; font-size: 18px; line-height: 1.35; }
.vote-card__by { display: block; margin-top: 8px; color: var(--fg-3); font-size: 12px; }
.result-row { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 15px 0; border-bottom: 1px solid var(--hair); }
.result-row__votes { color: var(--lamp); font-weight: 700; }

/* --- 26. Рифма дня и ачивки -------------------------------------- */
.daily-clock { margin-bottom:30px; color:var(--fg-2); font-size:15px; line-height:1.4; }
.daily-clock b { color:var(--lamp); font-variant-numeric:tabular-nums; font-weight:700; }
.score--daily { margin-top:24px; }
.score--daily .score__value { color:var(--lamp); }
.daily-streak { margin-top:22px; color:var(--fg-2); font-size:18px; }
.daily-unlock { margin-top:12px; padding:12px 0; border-top:1px solid var(--lamp); color:var(--fg); line-height:1.4; }
.daily-contest { margin-top:34px; padding-top:22px; border-top:1px solid var(--hair-strong); }
.daily-contest__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.daily-contest__head h2 { margin:0; font-size:21px; line-height:1.2; }
.daily-contest__head span,.daily-contest__hint { color:var(--fg-3); font-size:12px; }
.daily-contest__hint { margin:8px 0 14px; line-height:1.4; }
.daily-contest__list { display:grid; gap:8px; }
.daily-entry { width:100%; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:11px; align-items:center; padding:12px; border:1px solid var(--hair); border-radius:14px; background:var(--bg-raise); color:var(--fg); font:inherit; text-align:left; }
.daily-entry:not(:disabled):active { border-color:var(--lamp); background:var(--lamp-soft); }
.daily-entry.is-voted { border-color:var(--lamp); }
.daily-entry.is-mine { background:var(--lamp-soft); }
.daily-entry__avatar { width:38px; height:38px; border-radius:50%; object-fit:cover; background:var(--bg-sink); }
.daily-entry__copy { min-width:0; }
.daily-entry__copy b,.daily-entry__copy span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.daily-entry__copy b { font-size:12px; color:var(--fg-2); }
.daily-entry__copy span { margin-top:3px; font-size:15px; }
.daily-entry__votes { color:var(--lamp); font-size:13px; font-weight:700; white-space:nowrap; }
.achievement-list { margin-top:30px; border-top:1px solid var(--hair); }
.achievement { display:grid; grid-template-columns:38px 1fr; gap:14px; padding:18px 0; border-bottom:1px solid var(--hair); color:var(--fg-3); }
.achievement__mark { display:grid; place-items:center; width:30px; height:30px; border:1px solid var(--hair-strong); border-radius:50%; font-weight:800; }
.achievement b { display:block; color:inherit; font-size:17px; line-height:1.25; }
.achievement p { margin-top:5px; font-size:14px; line-height:1.4; }
.achievement time { display:block; margin-top:8px; color:var(--fg-2); font-size:12px; }
.achievement.is-open { color:var(--fg); }
.achievement.is-open .achievement__mark { border-color:var(--lamp); background:var(--lamp); color:var(--lamp-ink); }

/* Обложка и сценическая подача результата */
.splash { position:fixed; inset:0; z-index:1000; display:grid; place-items:start center; padding-top:clamp(150px,20svh,240px); background:var(--bg); color:var(--fg); transition:opacity .28s ease, transform .28s ease; }
.splash.is-leaving { opacity:0; transform:scale(1.015); pointer-events:none; }
.splash__lockup { width:min(76vw,350px); display:grid; grid-template-columns:1fr 86px 1fr; align-items:center; gap:0; text-align:center; }
.splash__rule { height:1px; background:var(--lamp); opacity:.58; transform:scaleX(0); transform-origin:center; animation:splash-rule .65s .12s var(--ease-out) forwards; }
.splash__emblem { position:relative; width:86px; height:86px; display:grid; place-items:center; border:1px solid var(--hair-strong); border-radius:50%; background:var(--bg-raise); opacity:0; transform:scale(.84); animation:splash-emblem .58s .25s var(--ease-out) forwards; }
.splash__mark { position:absolute; width:55px; height:55px; filter:drop-shadow(0 0 7px var(--lamp-glow)); }
.splash__mark--paper { visibility:hidden; }
[data-theme='paper'] .splash__mark--ink { visibility:hidden; }
[data-theme='paper'] .splash__mark--paper { visibility:visible; }
.splash__lockup strong { grid-column:1/-1; margin-top:24px; font-size:clamp(42px,11vw,56px); line-height:1; letter-spacing:-.052em; opacity:0; transform:translateY(10px); animation:splash-copy .48s .72s var(--ease-out) forwards; }
.splash__lockup small { grid-column:1/-1; margin-top:3px; color:var(--fg-2); font-size:12px; letter-spacing:.11em; text-transform:uppercase; opacity:0; transform:translateY(6px); animation:splash-copy .45s 1.04s var(--ease-out) forwards; }
@keyframes splash-rule { to{transform:scaleX(1)} }
@keyframes splash-emblem { 70%{opacity:1;transform:scale(1.04);box-shadow:0 0 30px var(--lamp-soft)} to{opacity:1;transform:none;box-shadow:0 0 18px var(--lamp-soft)} }
@keyframes splash-copy { to{opacity:1;transform:none} }
@media (prefers-reduced-motion:reduce) { .splash__rule,.splash__emblem,.splash__lockup strong,.splash__lockup small { animation:none; opacity:1; transform:none; } }
.rail.is-low .rail__time { animation:timer-pulse .8s ease-in-out infinite alternate; }
.rail.is-expired .rail__time { opacity:.35; }
@keyframes timer-pulse { to { transform:scale(1.08); } }
.result-line { opacity:0; transform:translateY(8px); }
.result-stitch { display:block; height:1px; margin:-1px 0 0; background:var(--lamp); transform:scaleX(0); transform-origin:left; }
#s-result.is-revealing .result-line--first { animation:result-line .25s .05s forwards; }
#s-result.is-revealing .result-stitch { animation:result-stitch .28s .22s forwards; }
#s-result.is-revealing .result-line--second { animation:result-line .25s .38s forwards; }
#s-result.has-result .result-line { opacity:1; transform:none; }
#s-result.has-result .result-stitch { transform:scaleX(1); }
@keyframes result-line { to{opacity:1;transform:none} }
@keyframes result-stitch { to{transform:scaleX(1)} }
.result-row.is-winner { border-color:var(--lamp); }
.result-row.is-winner b::after { content:' · победитель'; color:var(--lamp); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }
.line-caption { display:block; margin-bottom:7px; color:var(--fg-3); font-size:11px; letter-spacing:.08em; text-transform:uppercase; }
.duel-series { margin:18px 0 12px; color:var(--fg-2); font-size:13px; }
.duel-board { margin:-4px 0 22px; padding:0 0 14px; border-bottom:1px solid var(--hair); }
.duel-board > span { display:block; margin-bottom:7px; color:var(--fg-3); font-size:11px; }
.duel-board p { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:baseline; gap:12px; margin:0; }
.duel-board b { overflow:hidden; color:var(--fg-2); font-size:13px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.duel-board b:last-child { text-align:right; }
.duel-board strong { display:flex; align-items:baseline; gap:5px; color:var(--fg); font-size:22px; font-variant-numeric:tabular-nums; }
.duel-board strong i,.duel-board strong em { font:inherit; font-style:normal; }
.duel-board strong i:first-child { color:var(--lamp); }
.room-vote-status { margin:0 0 14px; color:var(--fg-2); font-size:13px; }
.achievement-group { margin-top:28px; }
.achievement-group__title { color:var(--lamp); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }

/* --- 27. Обратная связь ----------------------------------------------- */
.feedback-form { display:grid; gap:16px; margin-top:30px; }
.feedback-kinds { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.feedback-kinds button { min-height:48px; border:1px solid var(--hair-strong); border-radius:var(--r-sm); background:transparent; color:var(--fg-2); font:600 var(--t-small)/1 var(--ui); }
.feedback-kinds button[aria-pressed="true"] { border-color:var(--lamp); background:var(--lamp-soft); color:var(--lamp); }
.feedback-message { min-height:150px; resize:none; line-height:1.45; }
.feedback-success { margin-top:54px; text-align:center; }
.feedback-success span { display:grid; width:54px; height:54px; margin:0 auto 20px; place-items:center; border-radius:50%; background:var(--lamp); color:var(--lamp-ink); font-size:28px; font-weight:800; }
.feedback-success h2 { margin-bottom:10px; font-size:24px; }

/* --- 28. Политика конфиденциальности ----------------------------------- */
.privacy-link { display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:18px; padding:18px 2px 0; border:0; border-top:1px solid var(--hair); background:transparent; color:var(--fg-2); font:600 var(--t-small)/1.3 var(--ui); text-align:left; }
.privacy-link span:last-child { color:var(--fg-3); font-size:26px; font-weight:400; line-height:1; }
.privacy-copy { margin-top:30px; border-top:1px solid var(--hair); }
.privacy-copy section { padding:20px 0; border-bottom:1px solid var(--hair); }
.privacy-copy h2 { margin:0 0 8px; color:var(--fg); font-size:18px; line-height:1.3; }
.privacy-copy p { margin:0; color:var(--fg-2); font-size:15px; line-height:1.55; }