/* Башня — стили. Палитра: тёплая тёмная + янтарный акцент, никакой фиолетовости. */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: #17130E;
  color: #F4EDE2;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#game { position: fixed; inset: 0; display: block; z-index: 0; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  pointer-events: none;
}
.hud-top {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  width: 100%; position: relative;
}
.hud-score {
  font-size: 52px; font-weight: 800; letter-spacing: -0.5px; line-height: 1;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
  font-variant-numeric: tabular-nums;
}
.icon-btn {
  position: absolute; top: 6px;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(244, 237, 226, .16);
  background: rgba(30, 25, 19, .72); color: #F4EDE2;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
}
.icon-btn:hover { background: rgba(50, 42, 30, .92); }
#btn-mute { left: max(14px, env(safe-area-inset-left, 0px)); }
#btn-pause { right: max(14px, env(safe-area-inset-right, 0px)); }
.icon-btn .ic-off { display: none; }
.icon-btn.is-muted .ic-off { display: block; }
.icon-btn.is-muted .ic-on { display: none; }
.hud-sub { display: flex; gap: 8px; }
.chip {
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: rgba(244, 237, 226, .62);
  background: rgba(30, 25, 19, .55);
  border: 1px solid rgba(244, 237, 226, .12);
  border-radius: 999px; padding: 5px 12px;
  font-variant-numeric: tabular-nums;
}
.chip.accent { color: #FFB020; border-color: rgba(255, 176, 32, .4); animation: pop .25s ease; }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- Оверлеи ---------- */
.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; }
.overlay.dark { background: rgba(20, 16, 11, .74); backdrop-filter: blur(6px); }
/* панель проигрыша — фон лёгкий, чтобы дом за ней оставался виден */
#over { background: rgba(20, 16, 11, .38); backdrop-filter: blur(1px); }
#menu { background: linear-gradient(180deg, rgba(23, 19, 14, .25), rgba(23, 19, 14, .62) 72%); }
.menu-inner {
  text-align: center; padding: 24px;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
h1 {
  font-size: clamp(46px, 13vw, 76px); font-weight: 800; letter-spacing: 4px; line-height: 1;
  text-shadow: 0 6px 40px rgba(255, 176, 32, .16);
}
.tagline { color: rgba(244, 237, 226, .65); font-size: 15px; }
.hint { font-size: 13px; color: rgba(244, 237, 226, .45); max-width: 340px; line-height: 1.55; }

/* ---------- Кнопки ---------- */
.btn {
  border: 1px solid rgba(244, 237, 226, .16);
  background: #241E16; color: #F4EDE2;
  border-radius: 999px; padding: 13px 24px;
  font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer;
  transition: transform .12s ease, background .12s ease;
}
.btn:hover { background: #2E2719; transform: translateY(-1px); }
.btn:active { transform: scale(.97); }
.btn.primary { background: #FFB020; border-color: #FFB020; color: #2A1D00; }
.btn.primary:hover { background: #FFC14D; }
.btn.ghost { background: transparent; }
.btn.big { padding: 16px 44px; font-size: 17px; }
button:focus-visible { outline: 2px solid #FFB020; outline-offset: 2px; }

/* ---------- Панели ---------- */
.panel {
  width: min(340px, calc(100vw - 40px));
  background: #201A13;
  border: 1px solid rgba(244, 237, 226, .12);
  border-radius: 20px; padding: 28px 22px;
  text-align: center;
  display: flex; flex-direction: column; gap: 14px; align-items: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.panel h2 { font-size: 20px; font-weight: 700; }
.final { font-size: 64px; font-weight: 800; line-height: 1; color: #FFB020; font-variant-numeric: tabular-nums; }
.badge {
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase;
  color: #2A1D00; background: #FFB020; border-radius: 999px; padding: 5px 14px;
}
.over-best { font-size: 13px; color: rgba(244, 237, 226, .55); letter-spacing: 1px; text-transform: uppercase; }
.col { display: flex; flex-direction: column; gap: 10px; width: 100%; }

/* ---------- Демо-реклама ---------- */
.overlay.ad { z-index: 20; background: rgba(10, 8, 6, .92); }
.ad-box { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.ad-title { font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: rgba(244, 237, 226, .6); }
.ad-count { font-size: 56px; font-weight: 800; font-variant-numeric: tabular-nums; }
.ad-note { font-size: 12px; color: rgba(244, 237, 226, .4); }

/* ---------- Тост ---------- */
.toast {
  position: fixed; left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 26px);
  transform: translateX(-50%);
  z-index: 30;
  background: #241E16; border: 1px solid rgba(244, 237, 226, .16);
  border-radius: 999px; padding: 10px 18px;
  font-size: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.hidden { display: none !important; }

/* Бесплатный тариф Netlify вживляет свой промо-виджет поверх игры
   (скрипт /.netlify/scripts/hud). Прячем его намертво. */
#nl-hud-frame,
#nl-badge-frame,
#netlify_badge,
#netlify-badge {
  display: none !important;
}

@media (max-height: 620px) {
  .hud-score { font-size: 40px; }
  .final { font-size: 52px; }
}