@font-face {
  font-family: "Montserrat";
  src: url("fonts/Montserrat-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Comic Neue";
  src: local("Comic Neue"), local("ComicNeue-Regular"), url("fonts/ComicNeue-400.woff2") format("woff2");
  font-weight: 400;
  font-display: block;
}

@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-500.woff2") format("woff2");
  font-weight: 500;
  font-display: block;
}

:root {
  --bg: #fff;
  --text: #000;

  --font-name: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-comic: "Comic Sans MS", "Comic Sans", "Comic Neue", cursive;
  --font-label: "Inter", system-ui, sans-serif;
  /* 36px на макете шириной 1280 */
  --name-size: clamp(28px, 2.8125vw, 72px);

  --hover: #008ff0;
  --underline-thickness: 3px;
  --underline-left: calc(-5em / 36);
  --underline-right: calc(-1em / 36);
  --underline-bottom: calc(6em / 36);

  --guest: #9900ff;
  --alexander: #ff3000;
  /* В макете рамка #008ff0, в ТЗ — цвет курсора хозяина. Поменять на var(--hover), если нужен синий. */
  --selection: var(--alexander);
  --handle-size: 7px;

  /* выделение текста внутри слоя: отступы от бокса надписи из макета (36px) */
  --text-highlight: #b1dfff;
  --text-highlight-left: calc(-4em / 36);
  --text-highlight-right: 0px;
  --text-highlight-top: calc(4em / 36);
  --text-highlight-bottom: calc(6em / 36);

  --undo-size: 18px;
  --undo-icon: 12px;
  --undo-radius: 4px;
  --undo-bg: #008ff0;
  --undo-bg-hover: #126aa5;
  --undo-gap: 4px;           /* от правого края и верха бокса надписи */

  --label-size: 12px;
  --label-padding: 4px;
  --label-radius: 4px;
  --label-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
  --label-offset: 30px;
  --cursor-width: 30.8883px;
  --cursor-height: 30.7707px;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
}

.has-guest,
.has-guest * {
  cursor: none !important;
}

.stage {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0 16px;
}

.name {
  position: relative;
  display: inline-block;
  margin: 0;
  color: var(--text);
  font-family: var(--font-name);
  font-size: var(--name-size);
  font-weight: 400;
  line-height: normal;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}

.title {
  position: relative;
  display: inline-flex;
}

/* Хит-зона кнопки начинается вплотную к надписи и закрывает зазор, иконка — со смещением */
.undo {
  position: absolute;
  top: 0;
  left: 100%;
  display: block;
  margin: 0;
  padding: var(--undo-gap) 8px 8px var(--undo-gap);
  border: 0;
  background: none;
  visibility: hidden;
  -webkit-tap-highlight-color: transparent;
}

.title.has-undo .undo,
.title.is-undo-pending .undo {
  visibility: visible;
}

.title.is-undo-pending .undo__icon {
  visibility: hidden;
}

.undo__icon {
  display: grid;
  place-items: center;
  width: var(--undo-size);
  height: var(--undo-size);
  border-radius: var(--undo-radius);
  background: var(--undo-bg);
}

.undo__icon img {
  display: block;
  width: var(--undo-icon);
  height: var(--undo-icon);
}

@media (hover: hover) {
  .undo:hover .undo__icon {
    background: var(--undo-bg-hover);
  }
}

.undo:focus-visible .undo__icon {
  outline: 2px solid var(--undo-bg);
  outline-offset: 2px;
}

.is-comic .name {
  font-family: var(--font-comic);
}

.name.is-text-selected::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: var(--text-highlight-top);
  right: var(--text-highlight-right);
  bottom: var(--text-highlight-bottom);
  left: var(--text-highlight-left);
  background: var(--text-highlight);
}

.name.is-hover::after {
  content: "";
  position: absolute;
  left: var(--underline-left);
  right: var(--underline-right);
  bottom: var(--underline-bottom);
  height: var(--underline-thickness);
  background: var(--hover);
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.selection {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  border: 1px solid var(--selection);
  visibility: hidden;
}

.selection.is-visible {
  visibility: visible;
}

.selection__handle {
  position: absolute;
  box-sizing: border-box;
  width: var(--handle-size);
  height: var(--handle-size);
  border: 1px solid var(--selection);
  background: var(--bg);
}

/* центр маркера на линии рамки: -(7/2 - 0.5) - 1px бордера */
.selection__handle--tl { top: -4px; left: -4px; }
.selection__handle--tr { top: -4px; right: -4px; }
.selection__handle--bl { bottom: -4px; left: -4px; }
.selection__handle--br { bottom: -4px; right: -4px; }

.cursor {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  will-change: transform;
}

.cursor.is-visible {
  visibility: visible;
}

.cursor img {
  display: block;
  width: var(--cursor-width);
  height: var(--cursor-height);
}

.cursor__label {
  position: absolute;
  top: var(--label-offset);
  left: var(--label-offset);
  padding: var(--label-padding);
  border-radius: var(--label-radius);
  box-shadow: var(--label-shadow);
  color: #fff;
  font-family: var(--font-label);
  font-size: var(--label-size);
  font-weight: 500;
  line-height: normal;
  white-space: nowrap;
}

.cursor--guest .cursor__label {
  background: var(--guest);
}

.cursor--alexander .cursor__label {
  background: var(--alexander);
}