/* ================= Программа для зверят — оформление ================= */

:root{
  --accent: #FF7A59;
  --accent2: #4EC5F1;
  --ok: #3BC97D;
  --bad: #FF5A6E;
  --text: #2E2A4F;
  --sun: #FFD166;
  --card: #FFFFFF;
  /* фон, акцент и клетки поля — переопределяются из game.js при выборе места */
  --bg1:#FFF6E5; --bg2:#FFE3F1; --bg3:#E6F4FF;
  --theme-accent:#FF7A59;
  --cell-light:#E9F7D9; --cell-dark:#D6EEC2; --cell-frame:#8FBF6B;
  /* сторона клетки поля: подстраивается под экран */
  --cs: clamp(38px, 9.4vmin, 66px);
  /* цвета команд по смыслу — ребёнок узнаёт группу по цвету раньше, чем прочтёт */
  --c-move:#3C9BE0; --c-turn:#9B6BE0; --c-food:#E08A2E;
  --c-loop:#E0562E; --c-cond:#2FA37A; --c-var:#C43F86; --c-fn:#4B6BD6;
}

*{ box-sizing: border-box; }

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: clamp(18px, 2.2vw, 20px);
  color: var(--text);
  background: linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
  transition: background .6s ease;
  background-attachment: fixed;
  -webkit-text-size-adjust: 100%;
}

.app{
  max-width: 1180px;
  position: relative;
  z-index: 1;                /* интерфейс поверх украшений места */
  margin: 0 auto;
  padding: 14px 14px 40px;
  user-select: none;
  -webkit-user-select: none;
}

.hidden{ display:none !important; }

/* ---------- верхние кнопки звука ---------- */
.top-bar{ position:fixed; top:8px; right:8px; display:flex; gap:8px; z-index:20; }

.icon-btn{
  font-size:22px; width:46px; height:46px;
  border-radius:18px; border:3px solid #fff;
  background:rgba(255,255,255,.85);
  box-shadow:0 4px 10px rgba(46,42,79,.18);
  cursor:pointer; transition:transform .15s ease, background .15s ease;
}
.icon-btn:hover{ transform:translateY(-2px); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn.off{ opacity:.55; }

/* ---------- общие элементы ---------- */
.title{
  text-align:center;
  font-size:clamp(28px, 6.4vw, 44px);
  margin:10px 0 6px;
  color:var(--accent);
  text-shadow:0 3px 0 rgba(255,255,255,.9);
}
.title-sm{ font-size:clamp(22px, 4.4vw, 32px); margin-top:18px; }
#screenStart .title{ margin-top:54px; }

.rules{
  max-width:640px; margin:0 auto 18px;
  text-align:center; line-height:1.5;
  background:rgba(255,255,255,.72);
  border-radius:20px; padding:14px 18px;
}

.big-btn{
  font:inherit; font-weight:800; font-size:clamp(18px,2.4vw,22px);
  padding:14px 26px; border:none; border-radius:22px;
  background:var(--accent); color:#fff; cursor:pointer;
  box-shadow:0 5px 0 rgba(46,42,79,.18);
  transition:transform .12s ease, filter .15s ease;
}
.big-btn:hover{ filter:brightness(1.06); }
.big-btn:active{ transform:translateY(4px); box-shadow:0 1px 0 rgba(46,42,79,.18); }
.big-btn.secondary{ background:#fff; color:var(--text); }
.big-btn[disabled]{ opacity:.5; cursor:default; transform:none; }

.mini-btn{
  font:inherit; font-size:15px; font-weight:800;
  padding:7px 13px; border:none; border-radius:14px;
  background:#fff; color:var(--text); cursor:pointer;
  box-shadow:0 3px 0 rgba(46,42,79,.12);
}
.mini-btn:active{ transform:translateY(2px); box-shadow:none; }

:focus-visible{ outline:3px solid #2E2A4F; outline-offset:3px; }

.start-btns, .pick-btns, .result-btns, .run-row, .modal-btns{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center;
}
.best-line{ text-align:center; font-size:16px; opacity:.8; min-height:24px; }

/* ---------- совёнок Наум ---------- */
.hero-row{
  display:flex; align-items:center; gap:10px;
  justify-content:center; margin:16px auto 0; max-width:720px;
}
.hero-art{ font-size:clamp(38px,7vmin,56px); line-height:1; }
.hero-art.happy{ animation:heroJump .5s ease; }
.hero-art.sad{ animation:heroShake .5s ease; }
@keyframes heroJump{ 0%,100%{transform:translateY(0)} 40%{transform:translateY(-16px) scale(1.08)} }
@keyframes heroShake{ 0%,100%{transform:rotate(0)} 25%{transform:rotate(-9deg)} 75%{transform:rotate(9deg)} }

.bubble{
  position:relative; flex:1 1 auto; max-width:560px;
  background:#fff; border-radius:20px; padding:12px 16px;
  font-size:clamp(16px,2vw,19px); line-height:1.45;
  box-shadow:0 5px 14px rgba(46,42,79,.14);
}
.bubble::before{
  content:''; position:absolute; left:-9px; top:50%;
  width:0; height:0; margin-top:-8px;
  border:9px solid transparent; border-right-color:#fff; border-left:0;
}
.bubble b{ color:var(--accent); }
.bubble.ok{ box-shadow:0 0 0 3px var(--ok), 0 5px 14px rgba(46,42,79,.14); }
.bubble.bad{ box-shadow:0 0 0 3px var(--bad), 0 5px 14px rgba(46,42,79,.14); }

/* ---------- выбор зверя и места ---------- */
.pick-grid{
  display:grid; gap:10px; max-width:760px; margin:0 auto 6px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.pick-card{
  font:inherit; cursor:pointer; text-align:center;
  border:3px solid transparent; border-radius:20px;
  background:rgba(255,255,255,.86); padding:10px 6px;
  box-shadow:0 4px 10px rgba(46,42,79,.12);
  transition:transform .14s ease, border-color .14s ease;
  display:flex; flex-direction:column; align-items:center; gap:4px;
}
.pick-card:hover{ transform:translateY(-3px); }
.pick-card .pc-emo{ font-size:clamp(30px,6vmin,44px); line-height:1; }
.pick-card .pc-name{ font-size:14px; font-weight:800; }
.pick-card .pc-note{ font-size:12px; opacity:.7; }
.pick-card.on{ border-color:var(--accent); background:#fff; }
.pick-card .pc-food{ font-size:16px; }

/* ---------- карта глав ---------- */
.map-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  margin-top:calc(6px + var(--exit-drop)); padding:0 106px; }
@media (max-width:640px){ .map-top{ padding:0; } }
.map-tools{ display:flex; align-items:center; gap:8px; }
.map-sub{ text-align:center; margin:0 0 14px; font-size:16px; opacity:.85; }

.chapters{ display:grid; gap:12px; }
.chapter{
  background:rgba(255,255,255,.85); border-radius:22px;
  padding:12px 14px; box-shadow:0 5px 14px rgba(46,42,79,.10);
}
.chapter.locked{ opacity:.55; }
.ch-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.ch-ico{ font-size:30px; line-height:1; }
.ch-name{ font-size:clamp(18px,2.4vw,22px); font-weight:800; }
.ch-what{ flex:1 1 100%; font-size:15px; opacity:.8; line-height:1.4; }
.ch-stars{ font-size:15px; font-weight:800; color:var(--accent); white-space:nowrap; }
.ch-levels{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }

.lv-btn{
  font:inherit; cursor:pointer; width:64px; padding:6px 0;
  border:3px solid #fff; border-radius:16px;
  background:#F4F1FF; color:var(--text);
  box-shadow:0 3px 0 rgba(46,42,79,.12);
  display:flex; flex-direction:column; align-items:center; gap:2px;
}
.lv-btn:hover{ background:#fff; }
.lv-btn:active{ transform:translateY(2px); box-shadow:none; }
.lv-btn .lv-n{ font-weight:800; font-size:17px; }
.lv-btn .lv-st{ font-size:11px; letter-spacing:1px; color:var(--sun); min-height:14px; }
.lv-btn.done{ background:#E6F9EE; }
.lv-btn.locked{ opacity:.45; cursor:default; }
.lock-note{ font-size:14px; opacity:.8; margin-top:8px; }

/* ---------- строка прогресса уровня ---------- */
:root{ --exit-space:124px; --exit-drop:0px; }
@media (max-width:640px){ :root{ --exit-space:0px; --exit-drop:54px; } }

.progress-row{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin-left:var(--exit-space); margin-top:calc(4px + var(--exit-drop));
  /* справа сверху висят кнопки звука — строка не должна заезжать под них */
  padding-right:106px;
}
@media (max-width:640px){ .progress-row{ padding-right:0; } }
.progress-text{ font-weight:800; font-size:16px; }
.progress{
  flex:1 1 120px; height:12px; min-width:80px;
  background:rgba(255,255,255,.7); border-radius:99px; overflow:hidden;
}
.progress-bar{ height:100%; width:0; background:var(--theme-accent); border-radius:99px; transition:width .35s ease; }

.task-title{ text-align:center; font-size:clamp(20px,3.4vw,28px); margin:10px 0 6px; }

.teach{
  max-width:820px; margin:0 auto 12px;
  background:rgba(255,255,255,.85); border-radius:20px;
  padding:12px 16px; font-size:clamp(15px,1.9vw,18px); line-height:1.5;
  border-left:8px solid var(--theme-accent);
}
.teach b{ color:var(--theme-accent); }
.teach .teach-btns{ display:flex; gap:10px; margin-top:10px; flex-wrap:wrap; }
.teach code{
  background:#F1EEFF; border-radius:8px; padding:1px 6px;
  font-family:inherit; font-weight:800;
}

/* ---------- игровое поле ---------- */
.play-wrap{
  display:grid; gap:14px; align-items:start;
  grid-template-columns:minmax(0,auto) minmax(300px,1fr);
  justify-content:center;
}
.field-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }

.field-box{
  position:relative;
  padding:10px; border-radius:22px;
  background:rgba(255,255,255,.55);
  box-shadow:0 6px 18px rgba(46,42,79,.14);
}
.field{
  position:relative;
  display:grid;
  grid-template-columns:repeat(var(--cols), var(--cs));
  grid-auto-rows:var(--cs);
  border-radius:14px; overflow:hidden;
  outline:4px solid var(--cell-frame); outline-offset:0;
  touch-action:none;
}
.cell{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cs) * .56); line-height:1;
}
.cell.light{ background:var(--cell-light); }
.cell.dark{ background:var(--cell-dark); }
.cell.wall{ background:var(--cell-wall, #C9B79A); }
.cell.water{ background:var(--cell-water, #A9DDF3); }
.cell .thing{ filter:drop-shadow(0 2px 2px rgba(46,42,79,.25)); }
.cell .thing.pop{ animation:thingPop .4s ease; }
@keyframes thingPop{ 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(0); opacity:0} }
.cell.home{ box-shadow:inset 0 0 0 4px var(--sun); }

/* зверёк едет по полю, а не перепрыгивает: ребёнок должен видеть путь */
.pet{
  position:absolute; left:0; top:0;
  width:var(--cs); height:var(--cs);
  display:flex; align-items:center; justify-content:center;
  font-size:calc(var(--cs) * .68); line-height:1;
  /* место зверька живёт в переменных: тогда радостный прыжок можно
     проиграть анимацией, не потеряв клетку, на которой он стоит */
  --px:0; --py:0;
  transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py)));
  transition:transform .26s ease;
  will-change:transform; pointer-events:none;
}
/* стрелки на носу нет: сторону показывает сам зверёк — он повёрнут туда,
   куда смотрит, и доворачивается на глазах у ребёнка */
.pet .pet-emo{
  display:block; filter:drop-shadow(0 3px 3px rgba(46,42,79,.3));
  transition:transform .2s ease;
}
.pet.bump{ animation:petBump .34s ease; }
@keyframes petBump{ 0%,100%{filter:none} 40%{filter:drop-shadow(0 0 8px var(--bad))} }

/* цель достигнута: зверёк подпрыгивает от радости, поле вспыхивает
   золотом, над клеткой разлетаются искры. Окошко с звёздами ждёт,
   пока это доиграет: сначала видно, что получилось, потом счёт. */
.pet.cheer{ animation:petCheer 1s ease-in-out; }
@keyframes petCheer{
  0%   { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) }
  12%  { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) translateY(6%) scale(1.14,.86) }
  32%  { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) translateY(-42%) scale(.92,1.12) }
  50%  { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) translateY(4%) scale(1.10,.90) }
  70%  { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) translateY(-26%) scale(.95,1.08) }
  86%  { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) translateY(2%) scale(1.05,.95) }
  100% { transform:translate(calc(var(--cs) * var(--px)), calc(var(--cs) * var(--py))) }
}

.field.cheer{ animation:fieldCheer 1s ease; }
@keyframes fieldCheer{
  0%,100%{ outline-color:var(--cell-frame) }
  35%    { outline-color:var(--sun) }
}

/* слой шире поля: искры взлетают выше рамки, но наружу страницы
   не вылезают — по бокам запас меньше, чем поля у поля на телефоне */
.cheer-layer{
  position:absolute; inset:-96px -24px -12px; z-index:5;
  overflow:hidden; pointer-events:none;
}
.cheer-spark{
  position:absolute; line-height:1;
  font-size:calc(var(--cs) * .36);
  opacity:0; transform:translate(-50%,-50%) scale(.4);
  animation:sparkFly .95s ease-out forwards;
}
@keyframes sparkFly{
  0%  { opacity:0; transform:translate(-50%,-50%) scale(.5) rotate(0) }
  22% { opacity:1;
        transform:translate(calc(-50% + var(--dx) * .3), calc(-50% + var(--dy) * .3))
                  scale(1.15) rotate(calc(var(--rot) * .3)) }
  70% { opacity:1 }
  100%{ opacity:0;
        transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.9) rotate(var(--rot)) }
}

.state-lines{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.goal-line, .vars-line, .bag-line{
  background:rgba(255,255,255,.8); border-radius:14px;
  padding:6px 12px; font-size:15px; font-weight:700;
}
.goal-line{ border-left:6px solid var(--theme-accent); }
.vars-line .vv{ color:var(--c-var); }
.vars-line .vv.blink{ animation:vvBlink .5s ease; }
@keyframes vvBlink{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.35)} }

/* ---------- программа ---------- */
.code-col{ display:flex; flex-direction:column; gap:10px; min-width:0; }

.code-box{
  background:rgba(255,255,255,.92); border-radius:20px;
  box-shadow:0 5px 14px rgba(46,42,79,.12);
  overflow:hidden;
}
.code-head{
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 14px; font-size:15px; font-weight:800;
  background:var(--theme-accent); color:#fff;
}
.code-count{ font-size:13px; opacity:.9; }
#fnBox .code-head{ background:var(--c-fn); }

.prog{
  list-style:none; margin:0; padding:8px 8px 10px;
  min-height:70px; max-height:44vh; overflow:auto;
}
.prog .empty{
  font-size:15px; opacity:.6; padding:10px 8px; line-height:1.4;
}
.line{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:5px 8px; margin:2px 0;
  border-radius:12px; cursor:pointer;
  font-size:clamp(15px,1.9vw,18px); font-weight:700;
  background:#F6F4FF;
  border-left:6px solid var(--ln, #999);
}
.line:hover{ background:#EFEBFF; }
.line.sel{ box-shadow:0 0 0 3px var(--theme-accent); }
.line.now{ background:#FFF3C9; box-shadow:0 0 0 3px var(--sun); }
.line.err{ background:#FFE2E6; box-shadow:0 0 0 3px var(--bad); animation:lineShake .4s ease; }
@keyframes lineShake{ 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.line .kw{ color:var(--ln); }
.line .num{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; padding:0 8px; height:28px;
  border:none; border-radius:10px; cursor:pointer;
  background:var(--ln); color:#fff; font:inherit; font-weight:800;
}
.line .tools{ margin-left:auto; display:flex; gap:4px; }
.line .tool{
  border:none; border-radius:9px; cursor:pointer;
  width:30px; height:28px; font-size:14px;
  background:#fff; box-shadow:0 2px 0 rgba(46,42,79,.14);
}
.line .tool:active{ transform:translateY(2px); box-shadow:none; }
.slot{
  margin:2px 0 2px 22px; padding:5px 10px;
  border-radius:12px; border:2px dashed #C7BFEA;
  font-size:14px; opacity:.75; cursor:pointer;
}
.slot.sel{ border-color:var(--theme-accent); opacity:1; }

/* ---------- палитра команд ---------- */
.palette{ display:flex; flex-wrap:wrap; gap:8px; }
.pal-group{ display:flex; flex-wrap:wrap; gap:8px; width:100%; }
.pal{
  font:inherit; font-weight:800; font-size:clamp(14px,1.7vw,17px);
  padding:9px 13px; border:none; border-radius:16px; cursor:pointer;
  background:var(--pc, #666); color:#fff;
  box-shadow:0 4px 0 rgba(46,42,79,.20);
  display:inline-flex; align-items:center; gap:6px;
}
.pal:hover{ filter:brightness(1.08); }
.pal:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(46,42,79,.2); }
.pal[disabled]{ opacity:.45; cursor:default; }
.pal .pal-ico{ font-size:17px; }

.run-row{ margin-top:14px; }

/* ---------- звёзды и окошки ---------- */
.stars{ text-align:center; font-size:clamp(34px,8vw,58px); line-height:1.1; min-height:1.2em; }
.stars span{ display:inline-block; opacity:0; transform:scale(.4); }
.stars span.show{ animation:starPop .5s ease forwards; }
@keyframes starPop{ to{ opacity:1; transform:scale(1); } }

.result-score{ text-align:center; font-size:clamp(18px,2.6vw,22px); font-weight:800; }

.modal{
  position:fixed; inset:0; z-index:80;
  display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(46,42,79,.45);
}
.modal-card{
  background:#fff; border-radius:26px; padding:20px;
  max-width:460px; width:100%; text-align:center;
  box-shadow:0 16px 40px rgba(46,42,79,.32);
  animation:cardIn .3s ease;
}
@keyframes cardIn{ from{ transform:translateY(20px) scale(.94); opacity:0 } }
.modal-title{ margin:6px 0; font-size:clamp(22px,4vw,30px); color:var(--accent); }
.modal-text{ margin:0 0 14px; line-height:1.5; font-size:17px; }

.parents{
  max-width:720px; margin:18px auto 0;
  background:rgba(255,255,255,.85); border-radius:18px; padding:10px 16px;
}
.parents summary{ cursor:pointer; font-weight:800; }
.parents ul{ margin:8px 0; padding-left:20px; line-height:1.5; font-size:16px; }

/* ---------- фоновые украшения места ---------- */
.theme-deco{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.theme-deco i{ position:absolute; display:block; transform:translate(-50%,-50%); font-style:normal; }
.theme-deco span{ display:block; opacity:.42; will-change:transform;
  filter:drop-shadow(0 4px 10px rgba(46,42,79,.10)); }

@keyframes thFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
@keyframes thBob{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
@keyframes thDrift{0%{transform:translateX(-5vw)}100%{transform:translateX(5vw)}}
@keyframes thTwinkle{0%,100%{transform:scale(1);opacity:.30}50%{transform:scale(1.18);opacity:.62}}
.th-float{animation:thFloat 5s ease-in-out infinite}
.th-bob{animation:thBob 4.4s ease-in-out infinite}
.th-drift{animation:thDrift 15s ease-in-out infinite alternate}
.th-drift2{animation:thDrift 21s ease-in-out infinite alternate-reverse}
.th-twinkle{animation:thTwinkle 3.4s ease-in-out infinite}

.theme-chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.82);
  border:2px solid rgba(255,255,255,.92);
  box-shadow:0 4px 12px rgba(46,42,79,.10);
  font-size:15px; font-weight:800; color:var(--text);
  white-space:nowrap; vertical-align:middle;
}
.theme-chip .th-ico{ font-size:20px; line-height:1; }
.theme-chip.is-new{ animation:thPop .7s ease; }
@keyframes thPop{0%{transform:scale(.7);opacity:0}55%{transform:scale(1.14)}100%{transform:scale(1)}}

/* ---------- узкие экраны ---------- */
@media (max-width:900px){
  .play-wrap{ grid-template-columns:minmax(0,1fr); }
  .field-col{ order:1; }
  .code-col{ order:2; }
  .prog{ max-height:none; }
}
@media (max-width:560px){
  .pick-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .theme-chip .th-name{ display:none; }
  .theme-chip{ padding:5px 9px; }
  .theme-deco span{ opacity:.3; }
  .big-btn{ padding:12px 18px; }
  .rules{ font-size:16px; }
}

@media (prefers-reduced-motion:reduce){
  .theme-deco span{ animation:none !important; }
  .pet, .pet .pet-emo{ transition:none; }
  .hero-art.happy, .hero-art.sad, .line.err, .modal-card, .theme-chip.is-new{ animation:none; }
  .pet.cheer, .field.cheer, .cheer-spark{ animation:none; }
  .cheer-layer{ display:none; }
}

/* ---------- кнопка возврата на страницу игры ---------- */
/* Игра открыта в рамке сайта (docs/09-games.md), и эта кнопка — её выход:
   она просит страницу закрыть окно игры. Открытая отдельной вкладкой игра
   кнопку убирает — возвращаться неоткуда. */
.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; }
}

/* число в строке программы: «−  3  +» */
.line .numbox{
  display:inline-flex; align-items:center; overflow:hidden;
  border-radius:10px; background:var(--ln); color:#fff;
}
.line .numbox .nb{
  width:28px; height:28px; border:none; cursor:pointer;
  background:rgba(255,255,255,.22); color:#fff;
  font:inherit; font-size:17px; font-weight:800; line-height:1;
}
.line .numbox .nb:hover{ background:rgba(255,255,255,.38); }
.line .numbox .nv{ padding:0 9px; min-width:20px; text-align:center; font-size:16px; }