/* Маркетинговый Тамагочи: стиль презентаций отдела.
   Цвета: Delft #1E3250, Powder #AAC8E6, Pumpkin #F07832, фон #F7FBFE, карточки #F0F7FD, рамка #DCE7F0, серый #8C96A5.
   Шрифты: Montserrat (заголовки, кнопки), Raleway (текст), пиксельный Handjet (есть кириллица, Pixelify Sans путает Е и Є) только на экране тамагочи. */
:root {
  --delft: #1E3250;
  --powder: #AAC8E6;
  --pumpkin: #F07832;
  --bg: #F7FBFE;
  --card: #F0F7FD;
  --border: #DCE7F0;
  --gray: #8C96A5;
  --ink2: #4A5A75;
  --col: min(92vw, 560px);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; background: #C9DDF0; color: var(--delft);
  font-family: 'Raleway', system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
}
/* фон: комната вечером (пиксель-арт); вертикальная картинка для телефона, широкая для компьютера; слой закреплён, страница прокручивается поверх */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1; background: #C9DDF0 url('assets/bg-portrait.webp') center bottom / cover no-repeat;
}
@media (min-aspect-ratio: 1/1) { body::before { background-image: url('assets/bg-landscape.webp'); } }
.stage {
  min-height: 100svh; display: flex; flex-direction: column; align-items: center;
  padding: 14px 0 28px; gap: 0;
}
[hidden] { display: none !important; }

/* ── Корпус и экран ───────────────────────────────────────────── */
.device {
  position: relative; flex: none; aspect-ratio: 696 / 851; container-type: inline-size;
  width: max(230px, min(92vw, 420px, calc((100svh - 380px) * 0.8179)));
  user-select: none; -webkit-user-select: none;
}
.device__body { display: block; width: 100%; height: 100%; pointer-events: none; filter: drop-shadow(0 16px 16px rgba(20, 35, 60, .38)); }

/* экран: прямоугольник в координатах корпуса 696x851 (x 185..513, y 232..540) */
.screen {
  position: absolute; left: 26.58%; top: 27.26%; width: 47.13%; height: 36.19%; overflow: hidden;
  font-family: 'Handjet', 'Courier New', monospace; font-weight: 600; color: var(--delft); text-transform: uppercase;
}
.screen__stage { position: absolute; inset: 0; }
.screen__top {
  position: absolute; left: 0; right: 0; top: 0; height: 23.4%; display: flex; align-items: center; gap: 1.5cqw;
  padding: 0 4%; font-size: 4.4cqw; line-height: 1; letter-spacing: .04em; white-space: nowrap; overflow: hidden;
}
.screen__top > span:first-child { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: clip; }
.screen__pips { flex: none; display: flex; gap: .7cqw; }
.pip { width: 1.3cqw; height: 1.3cqw; border: .35cqw solid var(--delft); background: transparent; }
.pip.is-done { background: var(--delft); }

.sprite { position: absolute; image-rendering: pixelated; user-select: none; -webkit-user-drag: none; transition: left .35s steps(5), top .35s steps(5); }
.sprite--bob { animation: bob 1.2s steps(1) infinite; }
.sprite--shake { animation: shake .9s steps(1) infinite; }
.sprite--grow { animation: grow 1.4s steps(4) forwards; transform-origin: 50% 100%; }
@keyframes bob { 0%, 49.99% { transform: translateY(0); } 50%, 100% { transform: translateY(-2.4%); } }
@keyframes shake { 0%, 24.99% { transform: translateX(0); } 25%, 49.99% { transform: translateX(-3%); } 50%, 74.99% { transform: translateX(0); } 75%, 100% { transform: translateX(3%); } }
@keyframes grow { from { transform: scale(1); } to { transform: scale(1.22); } }
.prop { position: absolute; image-rendering: pixelated; shape-rendering: crispEdges; }
.prop svg { display: block; width: 100%; height: 100%; }

.ptext { position: absolute; left: 0; right: 0; text-align: center; letter-spacing: .06em; white-space: nowrap; }
.loading { position: absolute; left: 0; right: 0; top: 23.4%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3cqw; font-size: 6.2cqw; line-height: 1; letter-spacing: .08em; }
.loading__bar { width: 62%; height: 4.2cqw; border: .6cqw solid var(--delft); padding: .5cqw; display: flex; gap: .5cqw; }
.loading__bar i { flex: 1; background: transparent; }
.loading__bar i.on { background: var(--delft); }
.nps-big { position: absolute; left: 0; right: 0; top: 23.4%; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1cqw; }
.nps-big b { font-weight: 600; font-size: 18cqw; line-height: .85; }
.nps-big span { font-size: 4.8cqw; line-height: 1; letter-spacing: .08em; }

/* кнопки A, B, C (прозрачные зоны поверх нарисованных кнопок) */
.key {
  position: absolute; width: 12.4%; height: 10.1%; border: 0; border-radius: 50%; padding: 0;
  background: transparent; cursor: pointer; outline: none;
}
.key--a { left: 25.1%; top: 66.6%; }
.key--b { left: 62.6%; top: 66.6%; }
.key--c { left: 44%; top: 70.2%; }
.key:active, .key.is-press { background: rgba(10, 20, 40, .32); transform: translateY(1px); }
.key:focus-visible { box-shadow: 0 0 0 .8cqw var(--powder); }
.key.is-hint { animation: ring 1.1s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(240, 120, 50, .75); } 100% { box-shadow: 0 0 0 4cqw rgba(240, 120, 50, 0); } }

/* ── Диалог внизу, как в визуальной новелле ─────────────────────────── */
.dialog {
  position: relative; width: var(--col); margin-top: 22px; background: #fff; border: 1px solid var(--border);
  border-radius: 18px; padding: 24px 22px 26px; box-shadow: 0 12px 30px rgba(20, 35, 60, .26); cursor: pointer;
}
.dialog__name {
  position: absolute; left: 18px; top: -13px; background: var(--delft); color: #fff; border-radius: 8px;
  padding: 6px 12px; font: 700 11px/1 'Montserrat', sans-serif; letter-spacing: .14em; text-transform: uppercase;
}
.dialog__text { margin: 0; font: 500 19px/1.5 'Raleway', sans-serif; color: var(--delft); min-height: 3em; padding-right: 22px; }
.dialog__text strong { display: block; font: 800 22px/1.25 'Montserrat', sans-serif; margin-bottom: 10px; }
.dialog__text em { font-style: normal; color: var(--ink2); }
.dialog__next {
  position: absolute; right: 18px; bottom: 16px; width: 0; height: 0; border-left: 11px solid var(--pumpkin);
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; animation: blink 1s steps(1) infinite;
}
.dialog__next.is-off { display: none; }
@keyframes blink { 0%, 49.99% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── Варианты ответа ─────────────────────────────────────────── */
.choices { width: var(--col); margin-top: 12px; display: grid; gap: 10px; }
.choice {
  display: flex; gap: 14px; align-items: center; text-align: left; background: #fff; color: var(--delft);
  border: 1.5px solid var(--border); border-radius: 14px; padding: 13px 16px; cursor: pointer;
  font: 500 17px/1.4 'Raleway', sans-serif; transition: border-color .15s, background .15s, transform .15s;
}
.choice:hover, .choice:focus-visible { border-color: var(--pumpkin); background: var(--card); outline: none; }
.choice:active { transform: translateY(1px); }
.choice.is-on { border-color: var(--delft); background: #E4EFF9; }
.choice__key {
  flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--pumpkin); color: #fff; display: grid;
  place-items: center; font: 800 15px/1 'Montserrat', sans-serif; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18);
}
.choices--six { grid-template-columns: 1fr; }

.nps { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 6px; }
.nps__tile {
  aspect-ratio: 1; border: 1.5px solid var(--border); border-radius: 10px; background: #fff; color: var(--delft);
  font: 700 17px/1 'Montserrat', sans-serif; cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.nps__tile:hover, .nps__tile:focus-visible { border-color: var(--pumpkin); background: var(--card); outline: none; }
.nps__tile.is-on { background: var(--delft); border-color: var(--delft); color: #fff; }
.nps__legend {
  display: flex; justify-content: space-between; gap: 12px; color: var(--ink2); font: 500 13px/1.35 'Raleway', sans-serif;
  background: rgba(247, 251, 254, .9); border-radius: 10px; padding: 7px 12px;
}
.nps__legend span:last-child { text-align: right; }
.btn {
  border: 0; border-radius: 12px; background: var(--pumpkin); color: #fff; padding: 14px 22px; cursor: pointer;
  font: 700 15px/1 'Montserrat', sans-serif; letter-spacing: .02em; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16);
  transition: opacity .15s, transform .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .4; cursor: default; transform: none; }
.btn--ghost { background: transparent; color: var(--ink2); box-shadow: none; border: 1.5px solid var(--border); font-weight: 600; }

/* анкета: имя и проект */
.profile { display: grid; gap: 16px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 18px 16px 16px; box-shadow: 0 12px 30px rgba(20, 35, 60, .2); }
.field { display: grid; gap: 7px; }
.field__q { font: 700 14px/1.3 'Montserrat', sans-serif; color: var(--delft); }
.field__in {
  width: 100%; border: 1.5px solid var(--border); border-radius: 12px; background: #fff; color: var(--delft); padding: 13px 14px;
  font: 500 17px/1.3 'Raleway', sans-serif; outline: none; transition: border-color .15s, background .15s; appearance: none; -webkit-appearance: none;
}
.field__in::placeholder { color: var(--gray); opacity: 1; }
.field__in:hover { border-color: var(--powder); }
.field__in:focus { border-color: var(--pumpkin); background: var(--card); }
.field__in:-webkit-autofill, .field__in:-webkit-autofill:focus { -webkit-text-fill-color: var(--delft); -webkit-box-shadow: 0 0 0 1000px #E4EFF9 inset; caret-color: var(--delft); transition: background-color 9999s; }
.profile .btn { justify-self: stretch; }

.hint {
  margin: 16px 0 0; max-width: var(--col); text-align: center; color: var(--ink2); background: rgba(247, 251, 254, .88); border-radius: 10px;
  padding: 7px 14px; font: 500 13px/1.4 'Raleway', sans-serif;
}
.hint:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .sprite--bob, .sprite--shake, .key.is-hint, .dialog__next { animation: none; }
  .sprite { transition: none; }
}