:root {
  color-scheme: dark;

  /* Мир — вода, а всё, чем его трогают, вырезано из картона. Отсюда две
     палитры: тёмная остаётся в шейдерах сцены, а здесь всё крафтовое. */
  --ink: #2f2a24;            /* маркер: текст на картоне */
  /* Второстепенный текст. Был заметно светлее — и на крафте пропадал:
     контраст выходил 3.1 при нужных 4.5. Разница с основным маркером
     теперь держится не цветом, а кеглем. */
  --dim: #4a3c2b;
  --accent: #d1462f;         /* красный маркер вместо голубого */
  --kraft: #cfa877;          /* лицевая сторона листа */
  --kraft-light: #e6cca2;    /* срез: сердцевина светлее лица */
  --kraft-dark: #a97f4d;     /* изнанка и тени */
  --kraft-deep: #7d5a33;     /* толщина листа снизу */
  --tape: #f1e6ca;           /* малярный скотч и наклейки */
  --outline: #0d0c0b;        /* контур тела рыбки на карточках — как в аквариуме */
  /* Для того, что лежит поверх воды: там картон подсвечен ею снизу, и
     обычный маркер на нём выцветает. Почти чёрный, но всё же тёплый. */
  --ink-strong: #17130c;
  --panel: linear-gradient(180deg, #d9b789, #c39c6c);
  --line: rgba(125, 90, 51, .38);
  --radius: 18px;

  /* Рукописный шрифт есть в системе почти всюду, кроме Android, — там
     подхватится обычный. Заводить свой файл ради заголовков не стоит:
     это лишний мегабайт на первую загрузку и офлайн-зависимость. */
  --marker: "Marker Felt", "Bradley Hand", "Chalkboard SE", "Segoe Print",
            "Comic Sans MS", system-ui, sans-serif;

  /* Зерно бумаги: шум рисуется браузером, файла картинки нет. Кладётся
     первым слоем и умножается на крафтовую подложку. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.4'/%3E%3C/svg%3E");
  --board: var(--grain), linear-gradient(180deg, #d9b789, #c39c6c);
}

/* Лист картона: зерно поверх крафта плюс толщина среза снизу. */
.board {
  background-image: var(--board); background-blend-mode: multiply;
  color: var(--ink); border: 1px solid var(--kraft-deep);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #02080f; }
body {
  font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Inter, sans-serif;
  color: var(--ink);
  overscroll-behavior: none;
}
button { font: inherit; cursor: pointer; }

/* Правило класса с display перебивает браузерное [hidden] { display: none },
   и «скрытый» слой продолжает висеть поверх страницы. Закрываем это явно. */
[hidden] { display: none !important; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ------------------------------------------------------------ пузырьки */
.bubbles { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.bubble {
  position: absolute; bottom: -40px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.5), rgba(255,255,255,.05) 60%, transparent 70%);
  animation: rise linear infinite;
}
@keyframes rise {
  from { transform: translateY(0); opacity: 0; }
  10% { opacity: .75; }
  90% { opacity: .45; }
  to { transform: translateY(-105vh) translateX(28px); opacity: 0; }
}

/* ------------------------------------------------------------ верхняя панель */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 4;
  /* В шапке остался один значок меню — прижимаем его вправо. */
  display: flex; align-items: center; justify-content: flex-end;
  padding: max(14px, env(safe-area-inset-top)) 16px 14px;
  pointer-events: none;
}
.icon-btn {
  pointer-events: auto;
  width: 46px; height: 46px; border-radius: 12px;
  font-size: 22px; font-weight: 800; color: var(--ink-strong);
  /* Прозрачный фон обязателен: у кнопки он по умолчанию buttonface, а при
     color-scheme: dark это тёмно-серый — и multiply умножал на него весь
     картон. Отсюда и бралась «бледная тёмная плашка»: не текст выцвел, а
     подложка ушла в тень. */
  background-color: transparent;
  background-image: var(--board); background-blend-mode: multiply;
  border: 1px solid var(--kraft-deep);
  /* Первая тень — толщина картона, вторая — от воды под ним. */
  box-shadow: 0 3px 0 var(--kraft-deep), 0 8px 18px rgba(0, 0, 0, .38);
  transform: rotate(-2deg);
}
/* Картон не уезжает вниз, а проминается: кнопка чуть сжимается,
   а тень под ней подбирается. */
.icon-btn:active {
  transform: rotate(-2deg) scale(.96);
  box-shadow: 0 1px 0 var(--kraft-deep), 0 4px 10px rgba(0, 0, 0, .32);
}

/* ------------------------------------------------------------ подсказка */
.empty-hint {
  position: fixed; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; pointer-events: none;
}
/* Подсказка — записка на полоске скотча: тёмный маркер по воде не читается,
   а класть под него целый лист картона ради двух строк незачем. */
.empty-hint p {
  margin: 0; padding: 8px 20px; border-radius: 3px;
  font-family: var(--marker); font-size: 26px; font-weight: 650;
  background: var(--tape); color: var(--ink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
  transform: rotate(-1.6deg);
}
.empty-hint .sub {
  margin-top: 12px; font-size: 17px; font-weight: 400; padding: 7px 16px;
  transform: rotate(1.1deg);
}

/* ------------------------------------------------------------ главная кнопка */
.fab-row {
  position: fixed; left: 0; right: 0; z-index: 4;
  bottom: calc(22px + env(safe-area-inset-bottom));
  display: flex; justify-content: center;
}
.fab {
  border: 1px solid var(--kraft-deep); border-radius: 14px;
  font-family: var(--marker); font-weight: 800; font-size: 19px;
  padding: 15px 30px; color: var(--ink-strong);
  background-color: transparent;   /* см. .icon-btn: иначе multiply на buttonface */
  background-image: var(--board); background-blend-mode: multiply;
  box-shadow: 0 4px 0 var(--kraft-deep), 0 10px 26px rgba(0, 0, 0, .42);
  transform: rotate(-1deg);
}
.fab:active {
  transform: rotate(-1deg) scale(.97);
  box-shadow: 0 2px 0 var(--kraft-deep), 0 5px 14px rgba(0, 0, 0, .36);
}

.fab-row { gap: 10px; }
.fab.feed {
  padding: 15px 20px; font-size: 22px; line-height: 1;
  transform: rotate(1.4deg);
}
.fab:active.feed { transform: rotate(1.4deg) scale(.97); }
/* Проголодались — кнопка тихо дышит. Без слов: их ещё не все читают.
   Дышит подсветкой красного маркера: на картоне это единственный цвет,
   который бросается в глаза. */
.fab.feed.hungry { animation: feed-pulse 1.9s ease-in-out infinite; }
@keyframes feed-pulse {
  0%, 100% { transform: rotate(1.4deg) scale(1);
             box-shadow: 0 4px 0 var(--kraft-deep), 0 10px 26px rgba(0, 0, 0, .42); }
  50%      { transform: rotate(1.4deg) scale(1.09);
             box-shadow: 0 4px 0 var(--kraft-deep), 0 0 0 4px rgba(209, 70, 47, .5),
                         0 12px 30px rgba(209, 70, 47, .45); }
}
@media (prefers-reduced-motion: reduce) { .fab.feed.hungry { animation: none; } }

/* --------------------------------------------------------- имя рыбки по тапу */
/* Имя — подписанный маркером кусочек скотча над рыбкой. */
.fish-name {
  position: fixed; z-index: 6; pointer-events: none;
  transform: translate(-50%, -100%) scale(.86) rotate(-2deg);
  padding: 6px 15px; border-radius: 3px;
  background: var(--tape); color: var(--ink);
  font-family: var(--marker); font-weight: 650; font-size: 16px; white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .32);
  opacity: 0; transition: opacity .18s ease, transform .18s cubic-bezier(.2, 1.5, .5, 1);
}
.fish-name.show { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(-2deg); }

/* ------------------------------------------------------ выбор характера рыбки */
.sizes { display: flex; gap: 9px; margin: 4px 0 14px; }
.size-card {
  flex: 1; padding: 12px 6px 11px; border-radius: 14px;
  border: 2px dashed var(--line);
  background: rgba(255, 255, 255, .3); color: var(--ink);
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
/* Высота фиксированная, а значок внутри разного размера — карточки от этого
   не разъезжаются, но выбор виден с одного взгляда. */
.size-card .emoji { height: 46px; display: flex; align-items: center; line-height: 1; }
.size-card b { font-family: var(--marker); font-size: 16px; }
.size-card small { font-size: 12px; color: var(--dim); line-height: 1.25; text-align: center; }
/* Выбранное обведено красным маркером — как отмечают галочкой на бумаге. */
.size-card.on {
  border: 2px solid var(--accent); background: var(--tape);
  box-shadow: 0 0 0 3px rgba(209, 70, 47, .18);
}

/* ------------------------------------------------- «точно выйти?» поверх листа */
.ask {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; border-radius: 22px;
  background: rgba(26, 16, 6, .68); backdrop-filter: blur(3px);
}
/* Вопрос — записка на скотче, положенная поверх листа. */
.ask-box {
  width: 100%; max-width: 340px; padding: 20px;
  border-radius: 4px; border: 1px solid rgba(125, 90, 51, .3);
  background: var(--tape); color: var(--ink);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  transform: rotate(-1deg);
}
.ask-box p {
  margin: 0 0 14px; font-family: var(--marker); font-size: 18px;
  font-weight: 650; text-align: center;
}

/* ------------------------------------------------------------ модальный лист */
.overlay {
  position: fixed; inset: 0; z-index: 10;
  background: rgba(10, 6, 2, .6);
  backdrop-filter: blur(6px);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
@media (min-width: 720px) { .overlay { align-items: center; padding: 24px; } }

/* Крестик сидит на верхнем правом углу листа, наполовину выйдя за его край, —
   как кружки с цифрами на печатном шаблоне. Внутри листа ему не место: лист
   прокручивается, и крестик либо уезжал бы вверх с содержимым, либо занимал
   строку рядом с заголовком.
   Поэтому он — сосед листа в обёртке, а не его ребёнок: у листа своя
   прокрутка, и она обрезала бы всё, что вылезло за края. */
.sheet-wrap {
  position: relative;
  width: 100%; max-width: 620px;
  display: flex;
}
.sheet-close {
  position: absolute; z-index: 3;
  /* На узком экране лист во всю ширину, и угол приходится на самый край:
     крестик уводим внутрь, иначе половина его окажется за кадром. */
  top: -21px; right: 12px;
  /* Квадратик скотча с крестом маркером, а не кружок: круглых кнопок на
     столе с картоном не бывает. Скотч полупрозрачный — под ним видно воду. */
  width: 48px; height: 44px; padding: 0; border-radius: 3px;
  border: 0; background: rgba(241, 230, 202, .93);
  color: var(--ink); font-family: var(--marker); font-size: 26px;
  font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .42);
  transform: rotate(-5deg);
}
@media (min-width: 720px) { .sheet-close { top: -17px; right: -17px; } }
.sheet-close:active {
  transform: rotate(-5deg) scale(.95);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .36);
}

/* Гофра на верхнем срезе листа — там, где картон разрезан. Живёт в обёртке,
   а не в самом листе: внутри листа прокрутка, и полоска уехала бы вверх
   вместе с содержимым. */
.sheet-wrap::before {
  content: ''; position: absolute; left: 14px; right: 14px; top: -7px; height: 8px;
  border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(90deg,
    var(--kraft-light) 0 2px, var(--kraft-dark) 2px 3px, var(--kraft-light) 3px 6px);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .18);
}

.sheet {
  width: 100%; max-height: 92vh; overflow-y: auto;
  background-image: var(--board); background-blend-mode: multiply;
  color: var(--ink);
  border: 1px solid var(--kraft-deep);
  /* Углы чуть разные: лист резали ножницами, а не штамповали. */
  border-radius: 20px 24px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; gap: 16px;
  animation: slideUp .25s ease-out;
}
@media (min-width: 720px) { .sheet { border-radius: 22px 18px 24px 20px; } }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } }

.sheet h2 { margin: 0; font-family: var(--marker); font-size: 24px; font-weight: 650; }
.sheet p.lead { margin: 0; color: var(--dim); font-size: 15px; }

/* Главная кнопка — наклейка из скотча, обведённая красным маркером.
   На крафтовом листе это единственное, что бросается в глаза. */
.btn {
  border: 2px solid var(--accent); border-radius: 6px;
  font-family: var(--marker); font-weight: 650; font-size: 17px;
  padding: 15px 18px; color: var(--ink); text-align: center;
  background: var(--tape);
  box-shadow: 0 3px 0 rgba(125, 90, 51, .45);
}
.btn:active { transform: scale(.98); box-shadow: 0 1px 0 rgba(125, 90, 51, .45); }
/* Второстепенное обведено карандашом по самому картону. Текст тут тот же
   маркер, что и на главной кнопке: «Отмена» серым читалась подписью, а не
   кнопкой, и палец её не находил. */
.btn.ghost {
  background: transparent; color: var(--ink); box-shadow: none;
  border: 2px dashed rgba(90, 65, 35, .55);
}
.btn.ghost:active { box-shadow: none; }
.btn.danger {
  background: transparent; color: var(--accent); box-shadow: none;
  border: 2px dashed rgba(209, 70, 47, .5);
}
.btn:disabled { opacity: .45; }
.btn.big { padding: 19px; font-size: 19px; }

.stack { display: flex; flex-direction: column; gap: 10px; }
.row { display: flex; gap: 10px; }
.row > * { flex: 1; }

/* Поле для имени — полоска бумаги с линейкой, на которой пишут. */
input[type=text] {
  font: inherit; width: 100%; padding: 15px 16px; border-radius: 4px;
  background: #fbf5e7; color: var(--ink);
  border: 1px solid rgba(125, 90, 51, .3);
  box-shadow: inset 0 -2px 0 rgba(125, 90, 51, .22);
}
input[type=text]::placeholder { color: #8a785f; }
input[type=file] { display: none; }

.choice {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px; border-radius: 12px;
  background: rgba(255, 255, 255, .28); border: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 2px 0 rgba(125, 90, 51, .3);
}
/* Карточки положены рукой, а не выставлены по линейке: чередуем наклон. */
.choice:nth-child(odd) { transform: rotate(-.5deg); }
.choice:nth-child(even) { transform: rotate(.45deg); }
.choice:active { transform: scale(.99); box-shadow: 0 1px 0 rgba(125, 90, 51, .3); }
.choice .emoji { font-size: 30px; line-height: 1; }
.choice b { display: block; font-family: var(--marker); font-size: 17px; }
.choice small { color: var(--dim); }

/* ------------------------------------------------------------ галерея шаблонов */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
/* Шаблон — лист белой бумаги, лежащий на картоне. Белым он и остаётся:
   это будущая распечатка, и подменять её цвет нечестно. */
.gallery button {
  background: #fdfaf2; border: 2px solid transparent; border-radius: 4px;
  padding: 8px; display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .25);
}
.gallery button:nth-child(odd) { transform: rotate(-.8deg); }
.gallery button:nth-child(even) { transform: rotate(.7deg); }
.gallery button:active { border-color: var(--accent); }
.gallery img, .gallery canvas { width: 100%; height: 78px; object-fit: contain; }
.gallery span { font-family: var(--marker); font-size: 13px; color: #4a3a26; font-weight: 600; }

/* ------------------------------------------------------------ раскраска */
.painter { display: flex; flex-direction: column; gap: 12px; }
/* Холст — лист белой бумаги на столе, а не окно в воду: раскрашивают на
   бумаге. Незакрашенная рыбка на нём видна по контуру — ровно как в
   настоящей раскраске. */
.paint-stage {
  background: #fdfaf2;
  border: 1px solid rgba(125, 90, 51, .35); border-radius: 4px; padding: 10px;
  display: flex; justify-content: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .28);
}
.paint-view { width: 100%; height: auto; touch-action: none; display: block; }

.paint-tools { display: flex; flex-direction: column; gap: 10px; }
.swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; }
.swatch {
  aspect-ratio: 1; border-radius: 4px; border: 2px solid rgba(125, 90, 51, .35);
  padding: 0;
}
.swatch.on { border-color: var(--ink); box-shadow: 0 0 0 3px rgba(209, 70, 47, .55); }

/* Ряд инструментов — колонки, а не перенос: на узком экране семь кнопок по
   48px не помещались, и «Очистить» уезжала на отдельную строку во всю
   ширину. Колонки просто ужимаются, сколько бы кнопок ни добавилось. */
.tool-row { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 7px; }
.tool {
  height: 48px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tape); border: 1px solid rgba(125, 90, 51, .35);
  color: var(--ink); font-size: 19px;
  box-shadow: 0 2px 0 rgba(125, 90, 51, .35);
}
.tool:active { transform: scale(.96); box-shadow: 0 1px 0 rgba(125, 90, 51, .35); }
/* Значки-картинки красятся текстовым цветом кнопки — тогда подсветка
   выбранного инструмента работает для них так же, как для эмодзи. */
.tool svg { width: 24px; height: 24px; display: block; }
/* Краска в банке — того цвета, что выбран сейчас; ряд инструментов ставит
   --paint, и его наследуют и банка, и точки кистей. */
.tool .paint-fill { fill: var(--paint, #e63946); }
.tool .paint-line { fill: none; stroke: var(--paint, #e63946); }
.tool.on { background: #fff8e4; border: 2px solid var(--accent); }
.tool:disabled { opacity: .35; }
/* Точка кисти — того же цвета, что и краска в банке: видно не только какой
   толщины будет мазок, но и чем. Тонкая тёмная обводка нужна светлым
   цветам — белая точка на светлой кнопке иначе читается пустым местом. */
.tool .dot {
  background: var(--paint, currentColor); border-radius: 50%; display: block;
  box-shadow: 0 0 0 1px rgba(47, 42, 36, .38);
}

/* ------------------------------------------------------------ выравнивание фото */
.aligner { display: flex; flex-direction: column; gap: 10px; }
.align-stage { border-radius: 16px; overflow: hidden; background: #000; }
.align-view { display: block; touch-action: none; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--dim); }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }

/* ------------------------------------------------------------ предпросмотр */
.preview {
  border-radius: 4px; padding: 16px; text-align: center;
  background: #fdfaf2;
  border: 1px solid rgba(125, 90, 51, .35);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .26);
}
.preview canvas { width: 100%; max-width: 420px; height: auto; }

/* Печатная обводка уходит вместе с обрезком, когда рыбку вырезают по
   линии, — кромку ей рисуем сами. В аквариуме это делает шейдер, а на
   карточках подставляем ту же тёмно-коричневую кромку четырьмя тенями
   в стороны. */
.preview canvas {
  filter: drop-shadow(2px 0 0 var(--outline)) drop-shadow(-2px 0 0 var(--outline))
          drop-shadow(0 2px 0 var(--outline)) drop-shadow(0 -2px 0 var(--outline));
}
.fish-row img {
  filter: drop-shadow(1px 0 0 var(--outline)) drop-shadow(-1px 0 0 var(--outline))
          drop-shadow(0 1px 0 var(--outline)) drop-shadow(0 -1px 0 var(--outline));
}

/* ------------------------------------------------------------ фоны */
.bg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.bg-card {
  border-radius: 4px; border: 2px solid rgba(125, 90, 51, .35); padding: 0; overflow: hidden;
  height: 84px; position: relative; color: #fff; font-weight: 650; font-size: 13px;
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.bg-card.on { border-color: var(--accent); }
.bg-card span { padding: 8px 10px; text-shadow: 0 1px 6px rgba(0,0,0,.8); }

/* ------------------------------------------------------------ список рыбок */
.fish-list { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow-y: auto; }
.fish-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 8px;
  background: rgba(255, 255, 255, .28); border: 1px solid var(--line);
}
.fish-row img { width: 74px; height: 40px; object-fit: contain; }
.fish-row .meta { flex: 1; min-width: 0; }
.fish-row .meta b { display: block; font-family: var(--marker); font-size: 16px; }
.fish-row .meta small { color: var(--dim); }
.fish-row button {
  background: transparent; border: 1px dashed rgba(209, 70, 47, .5);
  color: var(--accent); border-radius: 5px; padding: 8px 12px; font-size: 14px;
  white-space: nowrap;
}
/* Дорисовать — обычное действие, удалить — опасное. Разный цвет, чтобы
   палец не путал их в спешке. */
.fish-row button.edit {
  border-color: rgba(90, 65, 35, .55); color: var(--ink);
}
@media (max-width: 480px) {
  .fish-row { gap: 8px; }
  .fish-row img { width: 56px; }
  .fish-row button { padding: 8px 10px; font-size: 13px; }
}

/* ------------------------------------------------------------ прочее */
.busy {
  text-align: center; color: var(--ink); font-family: var(--marker);
  font-size: 18px; padding: 34px 0;
}
.err { color: var(--accent); font-size: 14px; min-height: 18px; }

/* ------------------------------------------------------------ код аквариума */
/* Код читают с дивана, с экрана телевизора, и набирают на телефоне. Поэтому
   он крупный, моноширинный (в пропорциональном шрифте KM7 и 9XQ выходят
   разной длины и хуже читаются по знакам) и с разрядкой между буквами.
   Наклеен на скотч, как ценник на коробке. */
.code-big {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: clamp(30px, 9vw, 46px); font-weight: 700; letter-spacing: .12em;
  text-align: center; padding: 16px 12px; border-radius: 6px;
  background: var(--tape); color: var(--ink-strong);
  border: 2px solid var(--accent);
  box-shadow: 0 3px 0 rgba(125, 90, 51, .45);
  transform: rotate(-.6deg);
  user-select: all;                    /* тап по коду выделяет его целиком */
}

/* Поле ввода кода — то же самое поле для имени, но набирают в него код:
   те же кегль и разрядка, чтобы набранное сверялось с экраном по знакам. */
.code-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 26px; letter-spacing: .1em; text-align: center;
  text-transform: uppercase;
}

/* Сообщение — тот же скотч, только приклеен сверху. */
.toast {
  position: fixed; top: 76px; left: 50%; z-index: 20;
  transform: translate(-50%, -14px) rotate(-1.2deg);
  padding: 12px 24px; border-radius: 3px;
  font-family: var(--marker); font-weight: 650;
  background: var(--tape); color: var(--ink);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .4);
  opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none;
  max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translate(-50%, 0) rotate(-1.2deg); }