/* ==========================================================
   ЩЕНОК-ОЗОРНИК — интерфейс в пиксельном стиле
   Ни одного скругления и мягкой тени: только жёсткие грани,
   чтобы HUD жил в одном мире с пиксельной картинкой.
   ========================================================== */

:root{
  --hud-h: clamp(48px, 9.6vh, 66px);   /* два ряда: шкала бардака + строка значений */
  --gold:      #e6a54e;
  --gold-lite: #ffd93d;
  --cream:     #fff1d2;
  --paper:     #ffe9c0;
  --ink:       #4a2c14;
  --ink-soft:  #7a5433;
  --blue:      #4a90c4;
  --blue-lite: #83c2ea;
  --pink:      #ff8fab;
  --green:     #5fae6a;
  --danger:    #e04b4b;
  --warn:      #ffb020;
  --bg:        #2b1d3a;

  --font: ui-monospace, "SF Mono", "Menlo", "Consolas", "Courier New", monospace;
}

*{ box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body{
  margin:0; padding:0; height:100%; overflow:hidden;
  background: var(--bg);
  font-family: var(--font);
  color: var(--ink);
  user-select:none; -webkit-user-select:none;
  touch-action: manipulation;
  text-transform: uppercase;
}

#app{
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 2px, transparent 2px 4px),
    radial-gradient(circle at 50% 40%, #3d2a54 0%, #241733 70%, #1b1126 100%);
}

/* ---------- Сцена ---------- */
#stage{
  position:relative;
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

/* Полоса HUD живёт под полем: место под неё резервируется всегда,
   поэтому при старте уровня картинка не прыгает. */
#frame{
  position:relative;
  display:flex;
  flex-direction:column;
  line-height:0;
  padding-bottom: var(--hud-h);
}

#game{
  display:block;
  background:#efd0a0;
  /* Ключ к чёткому пиксель-арту: никакого сглаживания при масштабировании */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 0 0 4px #4a2c14, 0 0 0 8px #2b1d3a, 0 12px 0 8px rgba(0,0,0,.35);
  touch-action:none;
}

/* ---------- HUD ---------- */
#hud{
  position:absolute;
  bottom:0; left:0; right:0;
  height: var(--hud-h);
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:3px;
  padding: 3px 6px;
  background: var(--paper);
  border: 3px solid var(--ink);
  border-top-width: 4px;
  box-sizing: border-box;
  z-index:5;
}

/* Строка значений: всё по центру, кнопка паузы вынесена из потока,
   чтобы не сдвигать центровку надписей. */
#hud .hud-row{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: clamp(6px, 1.8vw, 18px);
  min-width:0;
  /* Симметричные поля под кнопку паузы: центр строки остаётся истинным центром */
  padding: 0 32px;
  min-height: 26px;
  text-align:center;
  line-height:1;
}

.hud-chip{
  background: var(--cream);
  border: 2px solid var(--ink);
  padding: 2px 6px;
  font-weight: 700;
  font-size: clamp(8px, 1.2vw, 12px);
  letter-spacing: .5px;
  color: var(--ink);
  white-space:nowrap;
  line-height:1.3;
  text-align:center;
}

/* Пара «подпись + значение» — читается как один блок */
.hud-stat{
  display:flex; align-items:baseline; justify-content:center;
  gap:5px; white-space:nowrap;
}
.hud-label{
  font-size: clamp(7px, 1vw, 10px);
  letter-spacing: 1.5px; font-weight:700;
  color: var(--ink-soft);
}
.hud-timer{ background: var(--blue-lite); }
.hud-timer.urgent{ background: var(--danger); color:#fff; animation: blink .5s steps(2) infinite; }
@keyframes blink{ 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

.hud-score{
  font-size: clamp(13px, 2vw, 20px);
  font-weight: 700; color: var(--ink);
  text-shadow: 2px 2px 0 var(--gold);
  line-height:1; letter-spacing: 2px;
  white-space:nowrap;
}
.hud-combo{
  display:inline-block;
  font-weight:700; color: var(--ink);
  font-size: clamp(9px, 1.6vw, 15px);
  background: var(--pink);
  border: 2px solid var(--ink);
  padding: 2px 8px;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  animation: comboPop .2s steps(3);
}
@keyframes comboPop{ from{ transform: scale(.6) } to{ transform: scale(1) } }

/* Шкала бардака — во всю ширину табло: «уровень затопления» комнаты.
   Подпись и процент напечатаны прямо на полосе, иначе она читается как
   декоративная линия и теряется. */
.mess-box{
  width:100%;
  background: transparent;
  border: 0;
  padding: 0;
  flex: 0 0 auto;
}
.mess-track{
  position:relative;
  height: clamp(14px, 2.6vh, 19px);
  background: #d8c7aa;
  border: 2px solid var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 5px;
  overflow:hidden;
}
.mess-cap, .mess-pct{
  position:relative; z-index:1;          /* поверх заливки */
  font-size: clamp(7px, 1.15vw, 11px);
  font-weight:700; letter-spacing:1px;
  color: var(--ink);
  line-height:1;
  text-shadow: 1px 1px 0 rgba(255,241,210,.65);   /* читается и на заливке, и на фоне */
  white-space:nowrap;
}
.mess-fill{
  position:absolute;
  left:0; top:0; bottom:0;
  width:0%;
  background: var(--blue);
  transition: width .15s steps(8);
}
.mess-box.warn .mess-fill{ background: var(--warn); }
.mess-box.crit{ animation: blink .4s steps(2) infinite; }
.mess-box.crit .mess-fill{ background: var(--danger); }

.btn-icon{
  pointer-events:auto;
  flex: 0 0 auto;
  width: 26px; height: 26px;
  border: 2px solid var(--ink);
  background: var(--cream);
  color: var(--ink); font-size: 11px; font-weight:700;
  font-family: var(--font);
  cursor:pointer; box-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.btn-icon:active{ transform: translateY(3px); box-shadow:none; }

/* Пауза прижата к правому краю строки значений и не участвует в центровке:
   привязка именно к строке, а не ко всей полосе, — иначе кнопка «плавает»
   между шкалой бардака и надписями. */
#hud .hud-row > .btn-icon{
  position:absolute;
  right:0;
  top:50%;
  transform: translateY(-50%);
}
#hud .hud-row > .btn-icon:active{
  transform: translateY(calc(-50% + 3px));
  box-shadow:none;
}

/* ---------- Всплывающее сообщение над полем ---------- */
#toast{
  position:absolute; left:50%; top:22%;
  transform: translateX(-50%);
  background: var(--pink);
  border: 3px solid var(--ink);
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
  color: var(--ink); font-weight:700;
  font-size: clamp(12px, 2vw, 18px);
  letter-spacing: 2px;
  padding: 6px 14px;
  z-index: 8; pointer-events:none;
}
.toast-anim{ animation: toastIn .25s steps(4); }
@keyframes toastIn{ from{ transform: translateX(-50%) scale(.4) } to{ transform: translateX(-50%) scale(1) } }

/* ---------- Оверлеи ---------- */
.overlay{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  padding: 14px;
  background: rgba(24,15,38,.86);
  z-index: 20;
  overflow:auto;
}
.hidden{ display:none !important; }

.panel{
  background: var(--paper);
  border: 4px solid var(--ink);
  box-shadow:
    0 0 0 4px var(--gold),
    0 10px 0 4px rgba(0,0,0,.45);
  padding: 18px 20px 20px;
  text-align:center;
  max-width: min(94vw, 420px);
  width:100%;
  animation: popIn .18s steps(3);
}
@keyframes popIn{ from{ transform: scale(.8) } to{ transform: scale(1) } }

.panel h2{
  margin: 0 0 12px;
  font-size: clamp(15px, 3vw, 22px);
  color: var(--ink);
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--gold);
}

/* ---------- Кнопки ---------- */
.btn{
  display:block; width:100%;
  margin: 7px 0;
  padding: 11px 14px;
  border: 3px solid var(--ink);
  font-family: var(--font);
  font-size: clamp(11px, 1.9vw, 15px);
  font-weight: 700; letter-spacing: 1.5px;
  color: var(--ink); cursor:pointer;
  background: var(--gold);
  box-shadow: 0 5px 0 rgba(0,0,0,.4);
  transition: none;
}
.btn:hover{ filter: brightness(1.08); }
.btn:active{ transform: translateY(5px); box-shadow: none; }
.btn-primary{ background: var(--gold-lite); }
.btn-secondary{ background: #cdb69a; }
.btn-endless{ background: #b58cf0; }
.btn-big{ font-size: clamp(14px, 2.6vw, 20px); padding: 14px; }
.btn-toggle{
  /* Ширина фиксированная и одинаковая у всех трёх: самая длинная надпись
     «СБРОС» занимает 58 px на двойном масштабе плюс 24 px полей. При
     min-width кнопки разъезжались — «ВКЛ» ужималась до 76, «СБРОС» до 82. */
  width: 84px; min-width: 0; margin:0;
  padding: 7px 12px; font-size: 14px;   /* x2: на x3 кнопка «СБРОС» отбирает
                                          ширину у надписи слева */
  background: var(--green); color:#fff;
}
.btn-toggle.off{ background: #9a9a9a; }
.btn-reset{ background: var(--danger); color:#fff; }
.panel-buttons{ margin-top: 12px; }

/* Пиксельные надписи: канвас внутри элемента, масштабируется без сглаживания */
.px-text{
  display:block;
  margin: 0 auto;      /* канвас уже точной ширины — авто-поля центруют его */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* У элементов с пиксельным текстом собственная типографика больше не нужна */
/* Хост пиксельной надписи: канвас центруется и по горизонтали, и по вертикали */
.px-host{
  display:flex;
  align-items:center;
  justify-content:center;
  letter-spacing: 0;
  text-shadow: none;
  line-height: 0;
}

/* Строки, где текст стал канвасом: у флекса свои правила выравнивания */
.result-line, .result-sub, .menu-records span, .setting-row span,
.level-num, .level-stars[data-px-auto]{
  min-width: 0;
}
/* Панель не должна выпускать надписи наружу, даже если что-то не поместилось */
.panel{ overflow: hidden; }
.menu-records{ display:flex; justify-content:center; gap:18px; flex-wrap:wrap; }

/* ---------- Заставка при запуске ---------- */
#screen-splash{ background: radial-gradient(circle at 50% 45%, #3d2a54 0%, #241733 70%, #1b1126 100%); }
.splash-wrap{ text-align:center; width: min(94vw, 420px); }
.splash-dog{
  display:block; margin: 0 auto 10px;
  width: clamp(200px, 56vw, 340px); height:auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
/* Название и подсказка проступают только когда щенок проснулся */
.splash-title, .splash-hint{ opacity: 0; transition: opacity .25s steps(4); }
.splash-title.shown, .splash-hint.shown{ opacity: 1; }
.splash-hint{
  margin: 12px 0 0;
  font-size: clamp(13px, 2.4vw, 20px);   /* заметно, но всегда мельче названия */
  letter-spacing: 2px; color: var(--gold);
  animation: blink 1.1s steps(2) infinite;
}

/* ---------- Меню ---------- */
.menu-wrap{ text-align:center; width: min(94vw, 420px); }
/* Мордочка нарисована тем же спрайтом, что и щенок в игре:
   канвас рисуется в game.js, здесь только размер и «пиксельное» масштабирование. */
.logo-dog{
  display:block;
  margin: 0 auto;
  width: clamp(72px, 16vw, 116px);
  height: auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  animation: hop .9s steps(2) infinite;
  /* Без тени: у спрайта своя обводка, а смещённая копия её только утолщает */
}
@keyframes hop{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.title{
  margin: 4px 0 6px;
  font-size: clamp(20px, 5.4vw, 40px);
  font-weight:700; letter-spacing: 2px;
  color: var(--pink);           /* название розовое — цвет языка щенка и комбо */
  text-shadow:
    3px 3px 0 var(--ink),
    6px 6px 0 rgba(0,0,0,.45);
}
/* Дефис внутри названия рисуется тем же пиксельным шрифтом,
   отдельный цвет ему больше не нужен */
.title-dash{ color: inherit; }
.subtitle{
  margin: 6px 0 18px;
  color: #ffe9c0; font-weight:700;
  font-size: clamp(9px, 1.6vw, 13px);
  letter-spacing: 1px; line-height: 1.6;
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}
.menu-buttons{ max-width: 300px; margin: 0 auto; }
.menu-records{
  margin-top: 14px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap;
  color:#ffe9c0; font-weight:700; font-size: clamp(9px,1.5vw,12px);
  text-shadow: 2px 2px 0 rgba(0,0,0,.5);
}

/* ---------- Уровни ---------- */
.levels-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin-bottom: 12px;
}
.level-card{
  background: var(--gold);
  border: 3px solid var(--ink);
  padding: 9px 4px 7px;
  cursor:pointer; color: var(--ink);
  font-family: var(--font); font-weight:700;
  box-shadow: 0 4px 0 rgba(0,0,0,.4);
}
.level-card:active{ transform: translateY(4px); box-shadow:none; }
.level-card.locked{ background: #a9a294; cursor:not-allowed; color:#5f594e; }
.level-card.endless-card{ background: #b58cf0; grid-column: span 3; }
.level-num{ font-size: clamp(13px, 2.6vw, 18px); line-height:1.2; }
/* На кнопке бесконечного режима знак рисуется на ступень крупнее цифр:
   пиксельный масштаб = round(размер / 9), поэтому 23-27px дают ровно x3. */
.endless-card .level-num{ font-size: clamp(23px, 3.9vw, 27px); }
.level-stars{ font-size: 11px; letter-spacing:2px; }
.level-stars .on{ color: #fff3b0; text-shadow: 1px 1px 0 var(--ink); }
.level-stars .off{ color: rgba(74,44,20,.3); }

/* ---------- Настройки ---------- */
.setting-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; padding: 9px 2px;
  font-weight:700; color: var(--ink);
  /* Пиксельный масштаб = round(размер / 9): 14-19px дают ровно x2 на любом
     экране. Нижняя граница именно 14, а не 11: на 11px масштаб падал до x1,
     и на узких экранах надписи выходили вдвое мельче, чем на широких. */
  font-size: clamp(14px, 2.2vw, 19px);
  border-bottom: 2px dashed rgba(74,44,20,.25);
}
.setting-danger{ border-bottom:none; margin-bottom:4px; }

/* ---------- Результаты ---------- */
.win-emoji{ display:block; margin: 0 auto; width: auto; height: clamp(34px, 6vw, 52px);
            image-rendering: pixelated; animation: hop 1s steps(2) infinite; }
.over-text{ margin: 2px 0 8px; font-weight:700; color: var(--danger); font-size: clamp(10px,1.7vw,13px); }
.result-line{ font-size: clamp(13px, 2.3vw, 18px); font-weight:700; color: var(--ink); margin-top:8px; letter-spacing:1px; }
.result-sub{ font-size: clamp(9px, 1.5vw, 12px); font-weight:700; color: var(--ink-soft); margin-top:4px; }

.stars{ display:flex; justify-content:center; gap:8px; margin: 8px 0 4px; }
.star{
  font-size: clamp(26px, 5.5vw, 38px);
  color: #c9bda6;
  text-shadow: 2px 2px 0 rgba(0,0,0,.25);
  transform: scale(.7); opacity:.55;
}
.star.on{
  color: var(--gold-lite);
  text-shadow: 2px 2px 0 var(--ink);
  animation: starPop .3s steps(4) forwards;
}
@keyframes starPop{
  0%{ transform: scale(.2); opacity:0 }
  60%{ transform: scale(1.3); opacity:1 }
  100%{ transform: scale(1); opacity:1 }
}

.puppy-innocent{ position:relative; margin: 6px 0 2px; animation: hop 1.4s steps(2) infinite; }
.innocent-dog{
  display:block; margin: 0 auto;
  width: clamp(46px, 9vw, 68px); height:auto;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* Без тени: на мелкой мордочке смещённая копия читается не как объём,
     а как лишняя коричневая полоса под подбородком. */
}
.innocent-bubble{
  position:absolute; top: 2px; left: 50%; margin-left: 20px;
  font-size: 9px; font-weight:700; color:var(--ink);
  background:var(--cream); border:2px solid var(--ink);
  padding:4px 6px; white-space:nowrap;
  box-shadow: 0 3px 0 rgba(0,0,0,.3);
}

/* Обучение больше не окно, а сцена внутри уровня — стилей ему не нужно */

/* ---------- Подсказка о повороте экрана ---------- */
#rotate-hint{
  display:none;
  position:absolute; left:50%; transform:translateX(-50%);
  bottom: 12%;
  padding: 6px 12px;
  background: var(--cream);
  border: 2px solid var(--ink);
  color: var(--ink); font-weight:700; font-size: 10px;
  text-align:center; white-space:nowrap;
  box-shadow: 0 3px 0 rgba(0,0,0,.35);
  animation: hop 1.6s steps(2) infinite;
  pointer-events:none; z-index: 6;
}
@media (orientation: portrait) and (max-width: 820px){
  #rotate-hint{ display:block; }
}
body.in-game #rotate-hint{ display:none; }

/* ---------- Мобильные ---------- */
@media (max-width: 620px){
  .panel{ padding: 14px 12px 16px; }
  #hud{ padding: 3px; gap:2px; }
  .btn-icon{ width:22px; height:22px; font-size:8px; }
  #hud .hud-row{ padding: 0 26px; min-height: 22px; }
  .hud-label{ display:none; }            /* на узком экране остаются только значения */
  #game{ box-shadow: 0 0 0 3px #4a2c14, 0 0 0 6px #2b1d3a; }
}
@media (max-height: 470px){
  .logo-dog{ width: 64px; }
  .subtitle{ margin-bottom: 10px; }
  .btn{ padding: 8px 12px; margin:5px 0; }
}