/* =====================================================================
   «Строим лестницу» — сложение и вычитание
   Чистый CSS, без внешних ресурсов. Мультяшный стиль по общей спецификации.
   ===================================================================== */

:root {
  --bg1: #FFF6E5;
  --bg2: #FFE3F1;
  --accent: #FF7A59;
  --accent2: #4EC5F1;
  --ok: #3BC97D;
  --err: #FF5A6E;
  --text: #2E2A4F;
  --card: #FFFFFF;
  --shadow: 0 10px 24px rgba(46, 42, 79, .14);
  --wood1: #F0B267;
  --wood2: #D08B3C;
  --wood-help1: #B7A6F0;
  --wood-help2: #8A74D8;
  --radius: 22px;

  /* --- переменные оформления темы раунда (перекрываются из game.js) --- */
  --sky1: #BFE9FF;
  --sky2: #E7F7FF;
  --sky3: #F6FFF2;
  --ground1: #8FD86B;
  --ground2: #57B44A;
  --tower1: #C9BFE6;
  --tower2: #B7ABDD;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: "Naukino Emoji", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  color: var(--text);
  background: linear-gradient(160deg, var(--bg1), var(--bg2));
  background-attachment: fixed;
  transition: background-color .6s ease;
  -webkit-text-size-adjust: 100%;
}

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 10px clamp(8px, 2vw, 20px) 28px;
  user-select: none;
  -webkit-user-select: none;
}

/* ---------------- Верхняя панель ---------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.topbar__title {
  font-size: clamp(18px, 3.4vw, 26px);
  font-weight: 800;
  letter-spacing: .2px;
}

.topbar__tools { display: flex; gap: 8px; }

.icon-btn {
  font-size: clamp(20px, 4vw, 26px);
  line-height: 1;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 18px;
  background: var(--card);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform .12s ease, filter .15s ease;
}
.icon-btn:hover { transform: translateY(-2px); }
.icon-btn:active { transform: translateY(1px) scale(.96); }
.icon-btn.is-off { filter: grayscale(1) opacity(.55); }

:focus-visible {
  outline: 4px solid var(--accent2);
  outline-offset: 3px;
}

/* ---------------- Карточки и общие блоки ---------------- */
.card {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(16px, 3vw, 28px);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.section-title {
  font-size: clamp(18px, 3vw, 22px);
  margin: 18px 0 10px;
}

/* ---------------- Стартовый экран ---------------- */
.start__hero {
  font-size: clamp(52px, 12vw, 78px);
  animation: idle 3s ease-in-out infinite;
}

.start__title {
  font-size: clamp(26px, 6vw, 40px);
  margin: 6px 0 8px;
  color: var(--accent);
}

.start__rules {
  font-size: clamp(16px, 2.6vw, 19px);
  line-height: 1.5;
  margin: 0 auto;
  max-width: 34em;
}

.bubble {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #FFF3D9;
  border: 3px solid #FFD79A;
  border-radius: 20px;
  padding: 12px 16px;
  text-align: left;
  font-size: clamp(16px, 2.6vw, 20px);
  line-height: 1.4;
  min-height: 72px;
}
.bubble p { margin: 0; }
.bubble--start { max-width: 34em; margin: 10px auto 14px; }
.bubble__hero { font-size: 30px; flex: 0 0 auto; }
.bubble.is-ok   { background: #E4FBEE; border-color: #9BE7BE; }
.bubble.is-err  { background: #FFECEE; border-color: #FFB7BF; }

.diff-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.diff-btn {
  font: inherit;
  color: var(--text);
  cursor: pointer;
  border: 3px solid #EDE7F6;
  background: #FAF8FF;
  border-radius: 20px;
  padding: 12px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.diff-btn:hover { transform: translateY(-3px); }
.diff-btn:active { transform: scale(.97); }
.diff-btn__emoji { font-size: clamp(24px, 5vw, 30px); }
.diff-btn__name { font-weight: 800; font-size: clamp(15px, 2.6vw, 19px); }
.diff-btn__hint { font-size: clamp(12px, 2.2vw, 14px); opacity: .7; }
.diff-btn.is-active {
  border-color: var(--accent);
  background: #FFEFE9;
  box-shadow: 0 6px 16px rgba(255, 122, 89, .28);
}

.big-btn {
  font: inherit;
  font-weight: 800;
  font-size: clamp(18px, 3.4vw, 24px);
  color: #fff;
  background: linear-gradient(180deg, #FF9070, var(--accent));
  border: none;
  border-radius: 22px;
  padding: 14px 30px;
  margin-top: 16px;
  cursor: pointer;
  box-shadow: 0 8px 0 #E05B3C, var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.big-btn:hover { transform: translateY(-2px); }
.big-btn:active { transform: translateY(4px); box-shadow: 0 3px 0 #E05B3C; }
.big-btn--ghost {
  background: linear-gradient(180deg, #7FD8F7, var(--accent2));
  box-shadow: 0 8px 0 #2FA2CD, var(--shadow);
}
.big-btn--ghost:active { box-shadow: 0 3px 0 #2FA2CD; }

.record { font-size: 16px; opacity: .75; margin: 14px 0 0; min-height: 1.2em; }

/* ---------------- Прогресс ---------------- */
.progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 8px 14px;
  margin-bottom: 12px;
  font-weight: 700;
  font-size: clamp(14px, 2.4vw, 18px);
}
.progress-row__label { white-space: nowrap; }
.progress-row__theme {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .85em;
  background: #E9F6FF;
  border-radius: 999px;
  padding: 4px 10px;
  max-width: 12em;
}
.progress-row__diff {
  white-space: nowrap;
  font-size: .85em;
  background: #EFEAFB;
  border-radius: 999px;
  padding: 4px 10px;
}
.bar {
  flex: 1 1 auto;
  height: 14px;
  background: #EFEAFB;
  border-radius: 999px;
  overflow: hidden;
  min-width: 40px;
}
.bar__fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent2), var(--ok));
  transition: width .45s ease;
}

/* ---------------- Игровая сетка ---------------- */
.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 20px);
  align-items: start;
}

@media (max-width: 880px) {
  .game-grid { grid-template-columns: minmax(0, 1fr); }
  /* на телефоне сцена ниже, чтобы задание и кнопки помещались на экран */
  .scene { aspect-ratio: 16 / 10; }
  /* со экранной клавиатурой (сложный уровень) места нужно ещё больше */
  body.mode-input .scene { aspect-ratio: 2 / 1; }
}

.scene-wrap {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 10px;
}

/* ---------------- Сцена: лестница ---------------- */
.scene {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 62%, var(--sky3) 100%);
  touch-action: manipulation;
}
.scene.is-theme-in { animation: themeIn .6s ease-out both; }

.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6%;
  background: linear-gradient(180deg, var(--ground1), var(--ground2));
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, .1);   /* линия горизонта видна в любой теме */
}

/* ---- Декорации темы (солнце, облака, звёзды, рыбки…) ---- */
.deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deco-item {
  position: absolute;
  line-height: 1;
  font-size: calc(clamp(17px, 4.4vw, 30px) * var(--s, 1));
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .5)) drop-shadow(0 2px 3px rgba(0, 0, 0, .18));
  animation: decoIn .5s ease-out both;
}
.deco-item--float   { animation: decoIn .5s ease-out both, decoFloat 4.4s ease-in-out infinite; }
.deco-item--drift   { animation: decoIn .5s ease-out both, decoDrift 10s ease-in-out infinite; }
.deco-item--drift2  { animation: decoIn .5s ease-out both, decoDrift 14s ease-in-out infinite reverse; }
.deco-item--twinkle { animation: decoIn .5s ease-out both, decoTwinkle 3.2s ease-in-out infinite; }
.deco-item--bob     { animation: decoIn .5s ease-out both, decoBob 5.2s ease-in-out infinite; }

/* Башня с призом */
.tower {
  position: absolute;
  left: 74%;
  width: 22%;
  bottom: 6%;
  height: 76%;
  border-radius: 12px 12px 4px 4px;
  background:
    repeating-linear-gradient(0deg, var(--tower1) 0 6%, var(--tower2) 6% 12%),
    var(--tower2);
  box-shadow: inset -8px 0 0 rgba(0, 0, 0, .08), 0 0 0 2px rgba(0, 0, 0, .1);
}

.prize {
  position: absolute;
  left: 85%;
  bottom: 82%;
  transform: translateX(-50%);
  font-size: clamp(24px, 7vw, 46px);
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .2));
  animation: idle 2.4s ease-in-out infinite;
}
.prize.is-won { animation: prizePop 1s ease-out both; }

/* Ступеньки */
.steps { position: absolute; inset: 0; }

.step {
  position: absolute;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--wood1), var(--wood2));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, .45), 0 3px 6px rgba(0, 0, 0, .12),
              0 0 0 1.5px rgba(0, 0, 0, .09);   /* контур: ступенька видна на любом фоне */
  transform-origin: bottom center;
}
.step.is-built { animation: stepIn .45s cubic-bezier(.2, 1.5, .5, 1) both; }
.step--helped { background: linear-gradient(180deg, var(--wood-help1), var(--wood-help2)); }

.step__mark {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(9px, 2vw, 14px);
}

/* Треснувшая (сломанная) ступенька при ошибке */
.step--ghost {
  background: linear-gradient(180deg, #F09B9B, #D45A5A);
  animation: stepCrack .9s ease-in-out both;
  z-index: 3;
}
.step--ghost .crack {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.step--ghost .crack polyline {
  fill: none;
  stroke: #FFF3D9;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: drawCrack .5s ease-out .1s forwards;
}
.boom {
  position: absolute;
  transform: translate(-50%, 40%);
  font-size: clamp(20px, 5vw, 32px);
  z-index: 4;
  animation: boomUp .9s ease-out both;
  pointer-events: none;
}

/* Совёнок на лестнице */
.hero-art {
  position: absolute;
  font-size: clamp(17px, 5.6vw, 36px);
  line-height: 1;
  transform: translateX(-50%);
  transition: left .5s cubic-bezier(.34, 1.3, .64, 1), bottom .5s cubic-bezier(.34, 1.3, .64, 1);
  z-index: 5;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .2));
}
.hero-art.is-jump { animation: heroJump .55s ease-out; }
.hero-art.is-wobble { animation: heroWobble .6s ease-in-out; }

.confetti {
  position: absolute;
  font-size: clamp(16px, 4vw, 26px);
  z-index: 6;
  animation: confettiFall 1.6s ease-in forwards;
  pointer-events: none;
}

/* ---------------- Панель задания ---------------- */
.panel {
  background: var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(12px, 2.4vw, 20px);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task {
  margin: 0;
  font-weight: 800;
  font-size: clamp(28px, 7vmin, 46px);
  color: var(--text);
  background: #F3F7FF;
  border: 3px dashed #B9D6F5;
  border-radius: 20px;
  padding: 14px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.answers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.answer {
  font: inherit;
  font-weight: 800;
  font-size: clamp(24px, 5.6vmin, 34px);
  color: var(--text);
  background: linear-gradient(180deg, #FFFFFF, #F2F5FF);
  border: 3px solid #DCE4FF;
  border-radius: 20px;
  padding: 16px 8px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.answer:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent2); }
.answer:active:not(:disabled) { transform: scale(.97); }
.answer.is-ok { background: #DFFAEA; border-color: var(--ok); animation: pop .4s ease-out; }
.answer.is-err { background: #FFE6E9; border-color: var(--err); animation: shake .45s ease-in-out; }
.answer.is-dead { opacity: .45; cursor: default; }
.answer:disabled { cursor: default; }

/* Экранная клавиатура (сложный уровень) */
.keypad { display: flex; flex-direction: column; gap: 10px; }
.keypad__display {
  font-size: clamp(28px, 7vmin, 42px);
  font-weight: 800;
  text-align: center;
  background: #F3F7FF;
  border: 3px solid #DCE4FF;
  border-radius: 18px;
  padding: 8px 12px;
  min-height: 1.6em;
  letter-spacing: 2px;
}
.keypad__display.is-ok { background: #DFFAEA; border-color: var(--ok); }
.keypad__display.is-err { background: #FFE6E9; border-color: var(--err); animation: shake .45s ease-in-out; }
.keypad__keys {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.key {
  font: inherit;
  font-weight: 800;
  font-size: clamp(20px, 4.6vmin, 28px);
  color: var(--text);
  background: linear-gradient(180deg, #FFFFFF, #F2F5FF);
  border: 3px solid #DCE4FF;
  border-radius: 18px;
  padding: 12px 4px;
  cursor: pointer;
  transition: transform .1s ease, background .15s ease;
}
.key:hover:not(:disabled) { background: #E9F1FF; transform: translateY(-2px); }
.key:active:not(:disabled) { transform: scale(.95); }
.key--wide { grid-column: span 2; background: linear-gradient(180deg, #9EE9BF, #3BC97D); color: #fff; border-color: #35B26E; }
.key--del { background: linear-gradient(180deg, #FFD1B8, #FFA07A); border-color: #F08050; }
.key:disabled { opacity: .5; cursor: default; }

/* ---------------- Результаты ---------------- */
.result__title { font-size: clamp(24px, 5.4vw, 34px); margin: 4px 0 10px; color: var(--accent); }
.stars { display: flex; justify-content: center; gap: 10px; margin: 8px 0; min-height: 1.4em; }
.star { font-size: clamp(38px, 9vw, 60px); animation: starPop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.star--off { filter: grayscale(1); opacity: .35; }
.result__score { font-size: clamp(18px, 3.4vw, 22px); font-weight: 700; margin: 6px 0 4px; }
.result__theme { font-size: clamp(14px, 2.6vw, 17px); opacity: .75; margin: 0 0 12px; }
.result__buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.parents {
  text-align: left;
  background: #F7F5FF;
  border: 2px solid #E4DDF7;
  border-radius: 18px;
  padding: 10px 14px;
  margin: 12px auto 4px;
  max-width: 34em;
  font-size: 16px;
}
.parents > summary {
  cursor: pointer;
  font-weight: 800;
  padding: 4px 0;
  list-style: none;
}
.parents > summary::before { content: "📋 "; }
.parents ul { margin: 8px 0 0; padding-left: 20px; }
.parents li { margin-bottom: 6px; line-height: 1.4; }
.parents .p-wrong { color: var(--err); font-weight: 700; }
.parents .p-right { color: #2A9A5F; font-weight: 700; }

/* ---------------- Анимации ---------------- */
@keyframes idle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes themeIn {
  from { opacity: .35; filter: saturate(.4); }
  to   { opacity: 1; filter: none; }
}
@keyframes decoIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes decoFloat {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(-50%, calc(-50% - 9px)); }
}
@keyframes decoDrift {
  0%, 100% { transform: translate(-50%, -50%); }
  50%      { transform: translate(calc(-50% + 20px), calc(-50% - 4px)); }
}
@keyframes decoTwinkle {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50%      { transform: translate(-50%, -50%) scale(1.16); opacity: 1; }
}
@keyframes decoBob {
  0%, 100% { transform: translate(-50%, -50%) rotate(-5deg); }
  50%      { transform: translate(-50%, -50%) rotate(5deg); }
}
@keyframes floatX {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(14px); }
}
@keyframes stepIn {
  from { transform: translateY(30%) scaleY(.2); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
@keyframes stepCrack {
  0%       { transform: translateY(20%) scaleY(.6); opacity: 0; }
  25%      { transform: none; opacity: 1; }
  35%      { transform: translateX(-3px) rotate(-1.5deg); }
  45%      { transform: translateX(3px) rotate(1.5deg); }
  55%      { transform: translateX(-3px) rotate(-1.5deg); }
  65%      { transform: translateX(3px) rotate(1.5deg); }
  75%      { transform: none; opacity: 1; }
  100%     { transform: translateY(35%) scaleY(.3) rotate(-4deg); opacity: 0; }
}
@keyframes drawCrack { to { stroke-dashoffset: 0; } }
@keyframes boomUp {
  0%   { opacity: 0; transform: translate(-50%, 40%) scale(.4); }
  30%  { opacity: 1; transform: translate(-50%, 0) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.9); }
}
@keyframes heroJump {
  0%   { transform: translateX(-50%) translateY(0) scale(1); }
  45%  { transform: translateX(-50%) translateY(-38%) scale(1.12); }
  100% { transform: translateX(-50%) translateY(0) scale(1); }
}
@keyframes heroWobble {
  0%, 100% { transform: translateX(-50%) rotate(0deg); }
  25%      { transform: translateX(-50%) rotate(-11deg); }
  75%      { transform: translateX(-50%) rotate(11deg); }
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-8px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(5px); }
}
@keyframes pop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes starPop {
  from { transform: scale(0) rotate(-40deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes prizePop {
  0%   { transform: translateX(-50%) scale(1); }
  40%  { transform: translateX(-50%) scale(1.6) rotate(12deg); }
  100% { transform: translateX(-50%) scale(1.25) rotate(0); }
}
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0); }
  100% { opacity: 0; transform: translateY(120px) rotate(200deg); }
}

/* ---------------- Узкие экраны ---------------- */
@media (max-width: 420px) {
  body { font-size: 17px; }
  .app { padding: 8px 8px 20px; }
  .icon-btn { width: 46px; height: 46px; border-radius: 15px; }
  .diff-row { gap: 6px; }
  .diff-btn { padding: 10px 2px; border-radius: 16px; }
  .answers { gap: 8px; }
  .answer { padding: 12px 6px; }
  .bubble { padding: 10px 12px; min-height: 58px; }
  .progress-row { padding: 6px 10px; gap: 8px; }
  .progress-row__diff { display: none; }
  .progress-row__theme { max-width: none; font-size: .95em; padding: 4px 8px; }
  .progress-row__theme .theme-name { display: none; }   /* остаётся только значок темы */
  .scene-wrap { padding: 6px; }
  .panel { gap: 8px; }
  .task { padding: 8px 8px; }
  .keypad { gap: 8px; }
  .keypad__display { min-height: 1.25em; padding: 4px 10px; }
  .key { padding: 8px 2px; border-radius: 15px; }
  .keypad__keys { gap: 6px; }
}

/* Уважение к настройке «меньше движения» */
/* Стартовый экран не помещался в окно ноутбука: карточка занимала 810
   пикселей при высоте 720, и кнопка «Играть» уходила под сгиб наполовину.
   Ужимаем совёнка, заголовок и отступы — читать тут нечего, кнопку нажать
   надо сразу. */
@media (max-height: 800px) {
  .card { padding: clamp(12px, 2vw, 18px); }
  .start__hero { font-size: clamp(40px, 8vw, 50px); }
  .start__title { font-size: clamp(22px, 4.4vw, 30px); margin: 2px 0 6px; }
  .start__rules { font-size: clamp(15px, 2.2vw, 17px); }
  .bubble { min-height: 56px; padding: 9px 14px; font-size: clamp(15px, 2.2vw, 17px); }
  .bubble--start { margin: 8px auto 10px; }
  .section-title { margin: 10px 0 6px; }
  .record { margin-top: 8px; }

  /* Сложный уровень набирают на клавиатуре, и «✓» стоит под ней последней
     строкой: на окне 720 она уходила за нижний край, и подтвердить ответ было
     нечем. Клавиши ужимаем — цифры и так крупные. */
  .keypad { gap: 6px; }
  .keypad__display { min-height: 1.25em; padding: 4px 10px; font-size: clamp(24px, 5vmin, 32px); }
  .keypad__keys { gap: 6px; }
  .key { padding: 6px 2px; font-size: clamp(18px, 3.6vmin, 24px); border-radius: 15px; }
  .task { font-size: clamp(22px, 4.4vmin, 30px); padding: 8px 14px; }
}

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

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (docs/09-games.md), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. */
/* Место, которое кнопка занимает в левом верхнем углу. Игры, у которых там
   своя строка (счёт, прогресс), сдвигают её на эти величины: на широком
   экране вбок, на телефоне вниз — рядом с кнопкой строке уже не хватило бы
   ширины и она полезла бы под кнопки звука справа. */
:root{ --exit-space:124px; --exit-drop:0px; }
@media (max-width:640px){ :root{ --exit-space:0px; --exit-drop:54px; } }

.exit-btn{
  display:inline-flex; align-items:center; gap:6px;
  height:46px; padding:0 16px; flex:none;
  border:none; border-radius:16px;
  background:#fff; color:#3D3455;
  font:inherit; font-size:16px; font-weight:800; line-height:1;
  white-space:nowrap; cursor:pointer;
  box-shadow:0 3px 0 rgba(61,52,85,.12);
}
.exit-btn:hover{ background:#F2EFFF; }
.exit-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(61,52,85,.12); }
/* Вариант для игр без собственной верхней панели: тот же левый верхний угол,
   только сам по себе. Ниже модальных окон игры (у них z-index от 80). */
.exit-btn--float{ position:fixed; top:10px; left:10px; z-index:60; }
@media (max-width:480px){
  .exit-btn{ height:40px; padding:0 12px; font-size:14px; }
  .exit-btn--float{ top:6px; left:6px; }
}