/*
 * ОДИН УДАР — оболочка.
 *
 * Игра занимает весь экран, интерфейс лежит поверх холста. Всё, что
 * можно, сделано на CSS: развёртка, зерно и свечение не должны стоить
 * кадров, их и так мало на телефоне.
 */

:root {
  --ink: #08070d;
  --acid: #76ff9f;
  --violet: #bc70ff;
  --pink: #ff2d95;
  --amber: #ffe06b;
  --paper: #f6edff;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--mono);
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#screen {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
}


/*
 * Кнопка возврата. На сайте такая же лежит в общем /game-menu.css, но
 * игра живёт отдельным репозиторием и обязана открываться сама по себе —
 * из папки, с флешки, откуда угодно. Двадцать строк дешевле зависимости.
 */
.game-home-menu {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  right: max(10px, env(safe-area-inset-right));
  z-index: 1000;
  /*
   * Палец промахивается по всему, что меньше сорока четырёх точек, —
   * это не рекомендация Apple ради красоты, а размер подушечки. Было
   * 74×34, и владелец жал мимо.
   */
  display: grid;
  place-items: center;
  min-width: 74px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--acid);
  background: #0b1010f2;
  color: var(--paper);
  font: 700 10px var(--mono);
  letter-spacing: .08em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 0 14px #76ff9f20;
}

.game-home-menu:hover,
.game-home-menu:focus-visible {
  background: #153725;
  color: #fff;
  outline: 2px solid var(--violet);
  outline-offset: 3px;
}

@media (max-height: 600px) and (orientation: landscape) {
  /* В лежачем телефоне высоты мало, но сорок четыре точки держим: это
     нижняя граница попадания пальцем, а не украшение. */
  .game-home-menu { padding: 8px 10px; min-height: 44px; }
}


/* =========================================================
   ПЛЁНКА
   ========================================================= */

.grain, .sweep {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.grain {
  background: repeating-linear-gradient(
    180deg,
    rgba(0, 0, 0, .22) 0 1px,
    rgba(0, 0, 0, 0) 1px 3px
  );
  mix-blend-mode: multiply;
  opacity: .5;
}

/*
 * Расслоение цвета по краям кадра. Дешёвая подделка под хроматическую
 * аберрацию: настоящая стоила бы трёх проходов по холсту, а нужна она
 * здесь не ради точности, а ради ощущения плёнки.
 */
#screen {
  filter: saturate(1.12) contrast(1.06);
}

.sweep::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 12% 50%, rgba(255, 31, 143, .09), transparent 42%),
    radial-gradient(circle at 88% 50%, rgba(44, 232, 255, .09), transparent 42%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Одна полоса, медленно ползущая сверху вниз, — вся «кассетность» кадра. */
.sweep {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(188, 112, 255, .07) 45%,
    rgba(255, 255, 255, 0) 100%
  );
  height: 38vh;
  animation: sweep 7.5s linear infinite;
}

@keyframes sweep {
  from { transform: translateY(-45vh); }
  to { transform: translateY(115vh); }
}

@media (prefers-reduced-motion: reduce) {
  .sweep { animation: none; opacity: .35; }
}


/* =========================================================
   HUD
   ========================================================= */

.hud {
  position: fixed;
  top: max(10px, env(safe-area-inset-top));
  left: max(10px, env(safe-area-inset-left));
  /* Справа сверху живёт кнопка «НА САЙТ» — HUD в неё не заезжает. */
  right: max(112px, env(safe-area-inset-right));
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
  pointer-events: none;
}

/* Атрибут hidden обязан побеждать раскладку: иначе спрятанный блок
   исправно занимает место, а игрок читает пустую строку как поломку. */
.hud-slot[hidden] { display: none; }

.hud-slot {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 11px;
  border: 1px solid #ffffff1c;
  background: #0b0713cc;
  backdrop-filter: blur(3px);
}

/* Иконка оружия: пиксели не сглаживаем, иначе бита превращается в пятно. */
.weapon-icon {
  display: block;
  width: 44px;
  height: 22px;
  margin-bottom: 4px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Пауза: маленькая, в строке показаний, вне зоны большого пальца. */
.hud-pause {
  display: none;
  align-self: flex-start;
  width: 34px;
  height: 34px;
  border: 1px solid #ffffff26;
  background: #0d0a18cc;
  color: var(--paper);
  font: 800 12px var(--mono);
  letter-spacing: .1em;
  cursor: pointer;
}

.hud-pause:active { border-color: var(--acid); color: var(--acid); }

.hud-slot b {
  font: 800 13px/1 var(--mono);
  letter-spacing: .1em;
  color: var(--acid);
}

.hud-label {
  font: 700 8px/1 var(--mono);
  letter-spacing: .16em;
  color: #8a7c99;
}

.hud-score {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.hud-score b { color: var(--paper); }

.bare {
  display: flex;
  gap: 3px;
}

.bare[hidden] { display: none; }

.bare i {
  width: 13px;
  height: 5px;
  background: var(--acid);
  box-shadow: 0 0 8px #76ff9f60;
}

.bare i[data-lost="1"] {
  background: #2f4436;
  box-shadow: none;
}

.moves {
  color: #6f6280;
  font: 700 8px var(--mono);
  letter-spacing: .08em;
}

/* Цвета приёмов те же, что и у конечностей с кольцами на врагах: подсказка
   и бой должны говорить на одном языке. */
.moves i {
  font-style: normal;
  font-weight: 800;
}

.moves i[data-move="hand"] { color: #ffe06b; }
.moves i[data-move="kick"] { color: #76ff9f; }
.moves i[data-move="grab"] { color: #ff2d95; }

.moves[hidden] { display: none; }

.ammo {
  display: flex;
  gap: 3px;
  min-height: 7px;
}

.ammo i {
  width: 3px;
  height: 9px;
  background: var(--amber);
  box-shadow: 0 0 6px #ffe06b60;
}

.ammo[data-empty="1"] i { background: #5b4b2a; }

.hud-target b { color: var(--violet); }

/* Время вышло за чужой результат — цель уже не побить, и это видно сразу. */
.hud-target[data-late="1"] b { color: var(--pink); }

.hud-points {
  position: relative;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.hud-points b { color: var(--amber); }

.rank-now {
  padding: 1px 6px;
  border: 1px solid var(--amber);
  color: var(--amber);
  font: 900 13px/1.3 var(--mono);
}

/*
 * Цепочка. Она вынесена из строки показаний в отдельную крупную панель:
 * это единственное, за чем игрок следит в бою, и мелкая полоска сбоку эту
 * роль не выполняла — её просто не видели.
 */
.combo {
  position: fixed;
  top: max(74px, calc(env(safe-area-inset-top) + 74px));
  left: max(10px, env(safe-area-inset-left));
  z-index: 10;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 9px;
  padding: 8px 12px;
  border: 2px solid var(--pink);
  background: #2a0a1bd9;
  box-shadow: 0 0 22px #ff2d9530;
  pointer-events: none;
  animation: comboPop .16s ease-out;
}

.combo[hidden] { display: none; }

.combo b {
  grid-row: span 2;
  color: #fff;
  font: 900 30px/1 var(--mono);
  text-shadow: 0 0 14px var(--pink);
}

.combo-label {
  align-self: end;
  color: #ffb3d8;
  font: 800 8px var(--mono);
  letter-spacing: .2em;
}

.combo i {
  display: block;
  height: 5px;
  background: var(--pink);
  transform-origin: left center;
  transition: transform .05s linear;
}

/* Последняя секунда цепочки: полоска и рамка начинают мигать. */
.combo[data-urgent="1"] {
  animation: comboWarn .28s steps(2, end) infinite;
}

@keyframes comboWarn {
  from { border-color: var(--pink); }
  to { border-color: #ffe06b; }
}

@keyframes comboPop {
  from { transform: scale(1.25); }
  to { transform: scale(1); }
}

.mute {
  position: fixed;
  top: calc(max(10px, env(safe-area-inset-top)) + 44px);
  right: max(10px, env(safe-area-inset-right));
  z-index: 1000;
  padding: 8px 10px;
  border: 1px solid #ffffff22;
  background: #0b0713e6;
  color: #a596b3;
  font: 700 9px var(--mono);
  letter-spacing: .1em;
  cursor: pointer;
}

.mute[data-off="1"] { color: var(--pink); border-color: #ff2d9555; }

/*
 * Экран смерти. Ни кнопок, ни статистики, ни затемнения на пол-экрана:
 * всё это заставляет читать, а чтение выбивает из ритма. Игрок и так
 * знает, что произошло, — ему нужно только разрешение начать заново.
 */
.dead {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-content: center;
  gap: 4px;
  background: radial-gradient(circle at 50% 50%, #ff2d9508, #14020a66 70%);
  text-align: center;
  pointer-events: none;
  animation: deadIn .18s ease-out;
}

.dead[hidden] { display: none; }

.dead b {
  /* Слово тянется по ширине экрана, но не наезжает на кнопки справа: на
     узком телефоне «ЗАНОВО» кеглем в 56 пикселей уходило прямо под
     «БРОСИТЬ». */
  font: 900 clamp(34px, 11vw, 56px)/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .06em;
  color: #fff;
  text-shadow:
    0 0 18px #ff2d95,
    4px 4px 0 #14020a,
    -2px -2px 0 #14020a;
}

.dead span {
  font: 800 11px var(--mono);
  letter-spacing: .28em;
  color: #ffd7ec;
  text-shadow: 2px 2px 0 #14020a;
}

@keyframes deadIn {
  from { opacity: 0; transform: scale(1.06); }
  to { opacity: 1; transform: scale(1); }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: max(22vh, 140px);
  z-index: 10;
  padding: 9px 14px;
  border-left: 3px solid var(--acid);
  background: #0b0713e6;
  color: var(--paper);
  font: 800 11px var(--mono);
  letter-spacing: .14em;
  white-space: nowrap;
  transform: translateX(-50%);
  pointer-events: none;
}


/* =========================================================
   ПАЛЬЦЫ
   ========================================================= */

.ghost {
  position: fixed;
  z-index: 8;
  width: 0;
  height: 0;
  pointer-events: none;
}

.ghost::before {
  content: '';
  position: absolute;
  left: -46px;
  top: -46px;
  width: 92px;
  height: 92px;
  border: 1px solid #ffffff20;
  border-radius: 50%;
}

.ghost i {
  position: absolute;
  left: -17px;
  top: -17px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--acid);
  border-radius: 50%;
  background: #76ff9f1f;
}

/*
 * Кнопки стоят столбиком у правой кромки, а не в углу. Угол занят: там
 * лежит большой палец, который целится плавающим стиком, и кнопка в том
 * же месте отбирает у него прицел.
 */
.pad {
  /*
   * Кнопки внизу, где и лежит палец.
   *
   * Они висели посередине правого края — там, куда удобно тянуться
   * мышью, а не большим пальцем. Палец на телефоне живёт внизу: там же
   * и стик, который ведёт. «БИТЬ» стоит ниже всех, в самом углу, потому
   * что нажимают её чаще остальных вместе взятых.
   */
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(14px, calc(env(safe-area-inset-bottom) + 14px));
  z-index: 9;
  display: none;
  grid-auto-flow: row;
  gap: 9px;
  justify-items: end;
}

.pad-key {
  border: 1px solid var(--acid);
  background: #0b1010cc;
  color: var(--paper);
  font: 800 9px var(--mono);
  letter-spacing: .08em;
  border-radius: 50%;
  touch-action: none;
}

.pad-small {
  width: 62px;
  height: 62px;
}

/* Доля музыки на кнопке удара: короткая вспышка, которую видно краем
   глаза, не отвлекаясь от этажа. */
.pad-key.on-beat {
  animation: padBeat .18s ease-out;
}

@keyframes padBeat {
  from { box-shadow: 0 0 0 0 #76ff9f88; border-color: var(--acid); }
  to { box-shadow: 0 0 0 12px #76ff9f00; }
}

.pad-big {
  width: 76px;
  height: 76px;
  border-width: 2px;
  border-color: var(--pink);
  color: var(--pink);
  font-size: 11px;
  box-shadow: 0 0 24px #ff2d9525;
}

.pad-key.is-held {
  background: #76ff9f28;
  transform: scale(.94);
}

/*
 * Витрина: в петле для карточки на сайте показывается только бой. Ни
 * показаний, ни кнопок, ни ссылки на сайт — три секунды чистого кадра.
 */
body[data-showcase="1"] .hud,
body[data-showcase="1"] .pad,
body[data-showcase="1"] .mute,
body[data-showcase="1"] .game-home-menu,
body[data-showcase="1"] .toast,
body[data-showcase="1"] .combo { display: none; }

/* Кнопки нужны только пальцу: мышь получает тот же ввод с клавиатуры. */
@media (pointer: coarse) {
  .pad { display: grid; }
  .hud-pause { display: block; }

  /*
   * Во время боя «ЗВУК» уходит с экрана: случайное касание включает
   * музыку посреди тишины, а вернуть её тише уже не выйдет.
   *
   * «НА САЙТ» раньше пряталась рядом с ним — по той же причине, только
   * там цена была партия. Теперь она остаётся на месте всегда, а
   * случайное касание перехватывает вопрос (см. src/exit.js): промах
   * стоит одного «нет», а не партии. Требование владельца: кнопка
   * должна быть видна из боя, а не только между попытками.
   */
  body[data-scene="play"] .mute { display: none; }

  /* Тост поднят выше: внизу лежит палец, который ведёт. */
  .toast { bottom: max(30vh, 190px); }

  /* Слово «ЗАНОВО» центруется по свободной части экрана, а не по всему
     экрану: справа стоят кнопки, и на узком телефоне надпись уезжала
     прямо под них. */
  .dead { padding-right: 96px; }
}

/*
 * Телефон, положенный набок, — самый тесный экран, какой у игры бывает:
 * сверху его ест панель браузера, снизу лежит палец. Кнопки меньше,
 * чтобы верхняя не подходила вплотную к «ЗВУК ВЫКЛ» (промах по ней
 * посреди драки выключает музыку), и полупрозрачные: они нужны пальцу, а
 * не глазу, и закрывать ими угол, откуда выходят враги, нельзя.
 * Показания в этой ориентации жмутся в одну узкую строку.
 */
@media (pointer: coarse) and (max-height: 430px) {
  /*
   * Кнопки в строку, а не в столбик. В столбик они съедали всю правую
   * сторону: сверху «НА САЙТ», под ним «ЗВУК», под ним три круга — пять
   * предметов в одной колонке на триста двадцать пикселей высоты, и всё
   * это поверх угла, откуда выходят враги. В строку они занимают то,
   * чего в этой ориентации много: ширину.
   */
  .pad {
    grid-auto-flow: column;
    align-items: end;
    gap: 12px;
  }

  .pad-big { width: 62px; height: 62px; font-size: 10px; }
  .pad-small { width: 50px; height: 50px; font-size: 8px; }
  .pad-key { opacity: .62; }
  .pad-key:active, .pad-key.is-held { opacity: 1; }

  .hud { gap: 6px; }
  .hud-slot { padding: 4px 7px; }
  .hud-slot b { font-size: 10px; }
  .weapon-icon { width: 30px; height: 15px; margin-bottom: 2px; }

}


/* =========================================================
   ЭКРАНЫ МЕЖДУ ПОПЫТКАМИ
   ========================================================= */

.veil {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #05040ad9;
  backdrop-filter: blur(6px);
}

.veil[hidden] { display: none; }

.veil-logo {
  display: block;
  width: min(260px, 70%);
  margin: 0 auto 14px;
}

.veil-logo[hidden] { display: none; }

.veil-card {
  width: min(430px, 100%);
  /*
   * Высота считается в динамических единицах: на телефоне адресная
   * строка и панель вкладок съедают часть окна, и карточка, посчитанная
   * в обычных vh, вылезала за экран вместе с кнопкой «дальше». Старым
   * браузерам остаётся vh — там просто чуть теснее.
   */
  max-height: 92vh;
  max-height: 92dvh;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 24px 22px 20px;
  border: 2px solid var(--acid);
  /* Картинка и градиент одним слоёным фоном. Раньше картинка стояла
     отдельным свойством выше, а сокращённая запись ниже её затирала —
     файл грузился и не показывался. */
  background:
    linear-gradient(150deg, #1a0b28ee, #0a1512ee),
    url('assets/ui/veil.png') center / cover;
  box-shadow: 10px 10px 0 #05040a, 0 0 44px #76ff9f22;
}

.veil[data-tone="dead"] .veil-card { border-color: var(--pink); box-shadow: 10px 10px 0 #05040a, 0 0 44px #ff2d9530; }
.veil[data-tone="clear"] .veil-card { border-color: var(--amber); box-shadow: 10px 10px 0 #05040a, 0 0 44px #ffe06b30; }
.veil[data-tone="pause"] .veil-card { border-color: var(--violet); box-shadow: 10px 10px 0 #05040a, 0 0 44px #bc70ff30; }

.veil-kicker {
  display: block;
  margin-bottom: 8px;
  color: var(--violet);
  font: 800 9px var(--mono);
  letter-spacing: .22em;
}

.veil h1 {
  margin: 0 0 12px;
  font: 900 30px/1 system-ui, -apple-system, sans-serif;
  letter-spacing: .01em;
  color: var(--acid);
  text-transform: uppercase;
}

.veil[data-tone="dead"] h1 { color: var(--pink); }
.veil[data-tone="clear"] h1 { color: var(--amber); }
.veil[data-tone="pause"] h1 { color: var(--violet); }

.veil p {
  margin: 0 0 16px;
  color: #cbbbd6;
  font-size: 12px;
  line-height: 1.55;
}

.veil-stats span[data-warn="1"] {
  color: var(--pink);
}

.veil-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 18px;
  color: #8a7c99;
  font: 700 9px var(--mono);
  letter-spacing: .14em;
  line-height: 1.5;
}

.veil-score {
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid #ffffff1c;
  background: #06040c;
}

.veil-score[hidden] { display: none; }

.veil-score .rank {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-bottom: 12px;
}

.veil-score .rank b {
  font: 900 46px/1 system-ui, -apple-system, sans-serif;
  color: var(--amber);
  text-shadow: 3px 3px 0 #05040a;
}

.veil-score .rank span {
  color: #6f6280;
  font: 800 9px var(--mono);
  letter-spacing: .2em;
}

.veil-score[data-rank="S"] .rank b { color: var(--pink); }
.veil-score[data-rank="A"] .rank b { color: var(--acid); }
.veil-score[data-rank="D"] .rank b { color: #8a7c99; }

.veil-score ul {
  display: grid;
  gap: 5px;
  margin: 0 0 11px;
  padding: 0;
  list-style: none;
}

.veil-score li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #a596b3;
  font: 700 10px var(--mono);
  letter-spacing: .08em;
}

.veil-score li b { color: var(--paper); font-weight: 800; }

.score-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 9px;
  border-top: 1px solid #ffffff1c;
  color: #6f6280;
  font: 800 9px var(--mono);
  letter-spacing: .18em;
}

.score-total b {
  color: var(--amber);
  font: 900 22px/1 var(--mono);
}

.score-best {
  margin: 9px 0 0;
  color: #6f6280;
  font: 700 9px var(--mono);
  letter-spacing: .12em;
}

.score-best[data-record="1"] { color: var(--acid); }

/* Кнопка «дальше» прилипает к низу карточки: длинные итоги её уносили
   за край, и до неё приходилось долистывать. */
.veil-action {
  position: sticky;
  bottom: 0;
  z-index: 1;
}

.veil-action, .veil-second {
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--acid);
  background: #16412c;
  color: #fff;
  font: 800 12px var(--mono);
  letter-spacing: .12em;
  cursor: pointer;
  box-shadow: 4px 4px 0 #05040a;
}

.veil-second {
  margin-top: 9px;
  border-color: #ffffff28;
  background: transparent;
  color: #a596b3;
  box-shadow: none;
}

.veil-action:hover, .veil-second:hover { background: #1e5c3d; color: #fff; }


/* Свои этажи: строка фишек, а не меню. Меню заставляет выбирать, строка —
   вспоминать: «вот тот, где я выбил ранг B». */
.floor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 8px;
}

.floor-chip {
  padding: 5px 9px;
  border: 1px solid #ffffff26;
  background: #0d0a18;
  color: var(--paper);
  font: 700 9px var(--mono);
  letter-spacing: .08em;
  cursor: pointer;
}

.floor-chip:hover { border-color: var(--acid); color: var(--acid); }

.veil-code {
  margin: 0 0 16px;
  padding: 12px;
  border: 1px dashed #ffffff22;
  background: #06040c;
}

.veil-code label {
  display: block;
  margin-bottom: 6px;
  color: var(--violet);
  font: 800 8px var(--mono);
  letter-spacing: .18em;
}

.code-row { display: flex; gap: 6px; }

.code-row #nickBox {
  flex: 0 0 120px;
  color: var(--acid);
  text-transform: uppercase;
}

.code-row input {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #ffffff22;
  background: #0d0817;
  color: var(--amber);
  font: 600 11px var(--mono);
  outline: none;
}

.code-row button {
  padding: 0 12px;
  border: 1px solid var(--violet);
  background: #23113a;
  color: var(--paper);
  font: 800 9px var(--mono);
  letter-spacing: .1em;
  cursor: pointer;
}

.veil-code small {
  display: block;
  margin-top: 7px;
  color: #6f6280;
  font-size: 9px;
  line-height: 1.5;
}

/* Узкий экран: показания уходят в столбик, иначе они не помещаются. */
@media (max-width: 430px) {
  .hud { flex-direction: column; }
  .hud-slot { padding: 6px 9px; }
.hud-slot b { font-size: 11px; }
}

@media (max-height: 560px) {
  .veil-card { padding: 14px 14px 10px; }
  .veil h1 { font-size: 20px; }
  .veil p { margin-bottom: 8px; font-size: 12px; }
  .veil-logo { width: min(180px, 55%); margin-bottom: 8px; }
  .veil-score { padding: 10px 12px; }
  .score-lines li, .veil-score li { padding: 2px 0; }
  .rank b, #rankLetter { font-size: 34px; }
.veil-stats { margin-bottom: 12px; }
}