/* Глобально запрещаем выделение/вызов системного меню (требования 1.6.x) */
* {
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
/* ДОБАВЛЕНО: отключаем авто-изменение размера текста в Chromium/YA */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

:root {
  --bg-page: #0f0c14;
  --bg-panel: rgba(20,15,25,0.85);
  --bg-card: rgba(20,15,25,0.8);

  --border-color: rgba(229,154,58,.4);
  --border-dim: rgba(255,255,255,.07);

  --text-main: #fff;
  --text-dim: #9b96b8;

  --accent: #e59a3a;
  --accent-rare: #9bff8a;

  --radius-md: .5rem;
  --radius-lg: .75rem;

  --gap: 1rem;

  --panel-w: 360px;
  --left-w: 340px;
  --side-padding: 1rem;
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, "Inter", Roboto, sans-serif;

  /* скейл интерфейса */
  --scale-ui: 1;
}

/* телефон */
@media (max-width: 480px) {
  :root {
    --scale-ui: .9;
    --panel-w: 100vw;
    --left-w: 100vw;
  }
}

/* ноут / обычный монитор */
@media (min-width: 1024px) {
  :root {
    --scale-ui: 1.15;
    --panel-w: 380px;
    --left-w: 360px;
  }
}

/* большой монитор типа 27" */
@media (min-width: 1440px) {
  :root {
    --scale-ui: 1.3;
    --panel-w: 400px;
    --left-w: 380px;
  }
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

body {
  margin: 0;
  background-color: var(--bg-page);
  color: var(--text-main);
  font-family: var(--font-main);
  font-size: calc(16px * var(--scale-ui));
  line-height: 1.45;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ГЛАВНАЯ СЕТКА */


/* ЛЕВАЯ КОЛОНКА */
.left-pane {
  height: 100%;
  background: radial-gradient(circle at 0% 0%, rgba(229,154,58,.08) 0%, rgba(0,0,0,0) 60%), rgba(15,10,20,.9);
  border-right: 1px solid var(--border-color);
  box-shadow:
    0 0 40px rgba(229,154,58,.2),
    20px 0 60px rgba(0,0,0,.9) inset,
    0 40px 80px rgba(0,0,0,.9);

  padding: calc(var(--side-padding) * var(--scale-ui));
  display: flex;
  flex-direction: column;
  gap: calc(1rem * var(--scale-ui));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(229,154,58,.4) rgba(0,0,0,0);
}
.left-pane::-webkit-scrollbar {
  width: 6px;
}
.left-pane::-webkit-scrollbar-thumb {
  background: rgba(229,154,58,.4);
  border-radius: 4px;
}

/* карточки слева */
.hud-top-left,
.hud-quests {
  max-height: 100vh;
  overflow-y: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: calc(1rem * var(--scale-ui));
  box-shadow:
    0 24px 48px rgba(0,0,0,.9),
    0 0 24px rgba(229,154,58,.2);
  font-size: calc(1.2rem * var(--scale-ui));
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  gap: calc(1rem * var(--scale-ui));
  user-select: none;
}

/* монеты / уровень */
.coins-wrap {
  display: flex;
  flex-direction: column;
  row-gap: calc(.25rem * var(--scale-ui));
}
.coins-amount {
  font-size: calc(2rem * var(--scale-ui));
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(229,154,58,.4);
}
.coins-label {
  font-size: calc(1rem * var(--scale-ui));
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.hud-level {
  background: rgba(0,0,0,.2);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: calc(.6rem * var(--scale-ui));
  display: flex;
  flex-direction: column;
  gap: calc(.4rem * var(--scale-ui));
  box-shadow: 0 0 18px rgba(229,154,58,.15);
}
.hud-level-header {
  display: flex;
  justify-content: space-between;
}
.hud-level-left {
  display: flex;
  flex-direction: column;
  gap: calc(.25rem * var(--scale-ui));
}
.hud-level-label {
  font-size: calc(1rem * var(--scale-ui));
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  line-height: 1.2;
}
.lvl {
  font-weight: 600;
  color: var(--accent);
  font-size: calc(1.4rem * var(--scale-ui));
  text-shadow: 0 0 8px rgba(229,154,58,.4);
  line-height: 1.2;
}

.progress-bar.small {
  height: calc(.5rem * var(--scale-ui));
  background: #2a2a42;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg,#e59a3a,#ffde6a);
  width:0%;width: 0%;
}
.progress-text {
  font-size: calc(1rem * var(--scale-ui));
  color: var(--text-dim);
  line-height: 1.2;
}

/* квесты */
.hud-quests-header {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: calc(.5rem * var(--scale-ui));
  text-transform: uppercase;
  letter-spacing: .07em;
  text-shadow: 0 0 8px rgba(229,154,58,.4);
}
.hud-quests-left {
  display: flex;
  align-items: center;
  gap: calc(.5rem * var(--scale-ui));
}
.hud-quests-icon {
  font-size: calc(1.3rem * var(--scale-ui));
  color: var(--accent);
  line-height: 1;
}
.hud-quests-title {
  color: var(--text-main);
  font-size: calc(1.1rem * var(--scale-ui));
  font-weight: 600;
  line-height: 1.2;
}
.hud-quests-progress {
  font-size: calc(1rem * var(--scale-ui));
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(229,154,58,.4);
  line-height: 1.2;
}

/* гаст статус */
.hud-quests-gast-hint {
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border-dim);
  border-radius: var(--radius-md);
  padding: calc(.75rem * var(--scale-ui));
  box-shadow:
    0 20px 36px rgba(0,0,0,.85),
    0 0 20px rgba(155,255,138,.25);
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.4;
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  gap: calc(.4rem * var(--scale-ui));
}
.gast-row {
  display: flex;
  align-items: flex-start;
  gap: calc(.5rem * var(--scale-ui));
  line-height: 1.3;
}
.gast-icon {
  font-size: calc(1.2rem * var(--scale-ui));
  color: var(--accent-rare);
  text-shadow: 0 0 10px rgba(155,255,138,.5);
}
.gast-label {
  color: var(--text-main);
  font-weight: 600;
  line-height: 1.3;
  font-size: calc(1rem * var(--scale-ui));
}
.gast-status {
  font-size: calc(1rem * var(--scale-ui));
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-dim);
  text-shadow: 0 0 6px rgba(0,0,0,.8);
}

.hud-quests-list {
  display: flex;
  flex-direction: column;
  gap: calc(1rem * var(--scale-ui));
}

/* карточки квестов */
.quest-item {
  background:
    radial-gradient(circle at 20% 20%, rgba(229,154,58,.08) 0%, rgba(0,0,0,0) 60%),
    var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow:
    0 20px 36px rgba(0,0,0,.9),
    0 0 20px rgba(229,154,58,.25);
  padding: calc(.9rem * var(--scale-ui));
  display: flex;
  flex-direction: column;
  gap: calc(.6rem * var(--scale-ui));
}
.quest-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  column-gap: calc(.75rem * var(--scale-ui));
  row-gap: calc(.5rem * var(--scale-ui));
  font-weight: 600;
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.3;
  color: var(--text-main);
  text-shadow: 0 0 8px rgba(229,154,58,.4);
}
.quest-name {
  display: flex;
  flex-direction: column;
  word-break: break-word;
  font-size: calc(1rem * var(--scale-ui));
}
.quest-reward {
  white-space: nowrap;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(229,154,58,.6);
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.3;
  font-weight: 600;
}

.quest-desc {
  color: var(--text-main);
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: calc(.25rem * var(--scale-ui));
}
.quest-progress-line {
  color: var(--text-dim);
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.3;
}

.quest-bottom-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: calc(.75rem * var(--scale-ui));
}
.quest-status {
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.3;
  font-weight: 600;
  text-shadow: 0 0 6px rgba(0,0,0,.8);
}
.quest-status.inprogress { color: var(--accent); }
.quest-status.ready {
  color: var(--accent-rare);
  text-shadow: 0 0 10px rgba(155,255,138,.6);
}
.quest-status.claimed { color: var(--text-dim); }

.claim-btn {
  background: linear-gradient(to bottom,rgba(229,154,58,1) 0%,rgba(160,90,20,1) 100%);
  border: 1px solid rgba(0,0,0,.8);
  border-radius: var(--radius-md);
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.3;
  padding: calc(.55rem * var(--scale-ui)) calc(.8rem * var(--scale-ui));
  font-weight: 600;
  cursor: pointer;
  color: #000;
  text-shadow: 0 0 4px rgba(0,0,0,.6);
  box-shadow:
    0 10px 24px rgba(0,0,0,.9),
    0 0 14px rgba(229,154,58,.5);
  white-space: nowrap;
}
.claim-btn:disabled {
  background: linear-gradient(to bottom,rgba(60,60,75,1) 0%,rgba(40,40,55,1) 100%);
  color: #77778f;
  border: 1px solid rgba(0,0,0,.8);
  box-shadow: none;
  cursor: not-allowed;
}

/* волна закрыта */
.quest-item.completed {
  background: var(--bg-card);
  border: 2px solid var(--accent);
  box-shadow:
    0 0 20px rgba(229,154,58,.6),
    0 24px 48px rgba(0,0,0,.95);
  min-height: calc(4.5rem * var(--scale-ui));
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(229,154,58,.8);
  font-weight: 600;
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.4;
  flex-direction: column;
  gap: calc(.4rem * var(--scale-ui));
}
.quest-done-text {
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.3;
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 10px rgba(229,154,58,.8);
}
.quest-next-time {
  font-size: calc(.8rem * var(--scale-ui));
  color: var(--text-dim);
  text-shadow: 0 0 6px rgba(0,0,0,.8);
  line-height: 1.3;
}
.quest-item.completed .quest-top,
.quest-item.completed .quest-desc,
.quest-item.completed .quest-bottom-row {
  display: none;
}

/* ЦЕНТРРАЛЬНОЕ ПОЛЕ */
.play-area {
  position: relative;
  overflow: hidden;
  background-color: #000;
  background-image: url("img/bg_halloween.png"); /* поменяли только это */
  background-size: cover;
  background-position: center;
  border-left: 1px solid rgba(255,255,255,.07);
  border-right: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 0 60px rgba(0,0,0,.9);
}

/* персонаж */
.character-wrap {
  position: absolute;
  left: 50%;
  top: 55%;
  /* БЫЛО: transform: translate(-50%, -50%);  */
  transform: translate(-50%, -50%) scale(var(--hero-scale, 1.5));
  transform-origin: center;
  user-select: none;
}
.character-hitbox {
  cursor: pointer;
}
.character-img {
  width: calc(260px * var(--scale-ui));
  max-width: 40vw;
  image-rendering: pixelated;
  filter:
    drop-shadow(0 0 12px rgba(229,154,58,.3))
    drop-shadow(0 20px 40px rgba(0,0,0,.9));
  user-select: none;
  pointer-events: none;
}

/* правый верх в центре */
.hud-top-right {
  position: absolute;
  top: var(--gap);
  right: var(--gap);
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: calc(.75rem * var(--scale-ui));
  min-width: calc(200px * var(--scale-ui));
  box-shadow:
    0 16px 40px rgba(0,0,0,.8),
    0 0 20px rgba(229,154,58,.18);
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.4;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: calc(.5rem * var(--scale-ui));
}
.cps-label {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: calc(.5rem * var(--scale-ui));
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.2;
  color: var(--text-main);
  text-shadow: 0 0 8px rgba(229,154,58,.4);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 600;
}
.lang-btn {
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: calc(.8rem * var(--scale-ui));
  font-weight: 600;
  line-height: 1.2;
  color: var(--accent);
  padding: calc(.25rem * var(--scale-ui)) calc(.5rem * var(--scale-ui));
  cursor: pointer;
  text-shadow: 0 0 6px rgba(229,154,58,.6);
}
.cps-value {
  font-size: calc(1.6rem * var(--scale-ui));
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(229,154,58,.4);
}
.boost-timers {
  font-size: calc(.8rem * var(--scale-ui));
  line-height: 1.3;
  color: var(--text-dim);
  white-space: pre-line;
  min-height: 1.4em;
}

/* всплывающие числа */
.float-text {
  position: fixed;
  font-size: calc(1rem * var(--scale-ui));
  font-weight: 600;
  pointer-events: none;
  animation: floatUp .8s ease-out forwards;
  text-shadow:
    0 0 10px rgba(0,0,0,.9),
    0 0 8px rgba(229,154,58,.6);
  z-index: 1000;
}
@keyframes floatUp {
  0%   { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-120%) scale(1.1); }
}

/* ПРАВАЯ КОЛОНКА */
.side-panel {
  background: radial-gradient(circle at 0% 0%, rgba(229,154,58,.08) 0%, rgba(0,0,0,0) 60%), rgba(15,10,20,.9);
  border-left: 1px solid var(--border-color);
  box-shadow:
    0 0 40px rgba(229,154,58,.2),
    -20px 0 60px rgba(0,0,0,.9) inset,
    0 40px 80px rgba(0,0,0,.9);

  padding: calc(var(--side-padding) * var(--scale-ui));
  display: flex;
  flex-direction: column;
  gap: calc(1rem * var(--scale-ui));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(229,154,58,.4) rgba(0,0,0,0);
}
.side-panel::-webkit-scrollbar {
  width: 6px;
}
.side-panel::-webkit-scrollbar-thumb {
  background: rgba(229,154,58,.4);
  border-radius: 4px;
}

.panel-upgrades,
.panel-block {
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow:
    0 24px 48px rgba(0,0,0,.9),
    0 0 24px rgba(229,154,58,.2);
  padding: calc(1rem * var(--scale-ui));
  display: flex;
  flex-direction: column;
  gap: calc(.75rem * var(--scale-ui));
}

.panel-headline {
  color: var(--accent);
  font-size: calc(1.4rem * var(--scale-ui));
  font-weight: 600;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: space-between;
  line-height: 1.2;
  text-shadow: 0 0 8px rgba(229,154,58,.4);
}
.panel-headline-sm {
  font-size: calc(1.2rem * var(--scale-ui));
  gap: calc(.5rem * var(--scale-ui));
  display: flex;
  align-items: flex-start;
}
.panel-headline-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.meta-row {
  display: flex;
  flex-direction: column;
  gap: calc(.5rem * var(--scale-ui));
}
.meta-btn {
  background: linear-gradient(to bottom,rgba(229,154,58,1) 0%,rgba(160,90,20,1) 100%);
  border: 1px solid rgba(0,0,0,.8);
  border-radius: var(--radius-md);
  font-size: calc(1rem * var(--scale-ui));
  font-weight: 600;
  color: #000;
  line-height: 1.3;
  padding: calc(.6rem * var(--scale-ui)) calc(.8rem * var(--scale-ui));
  cursor: pointer;
  text-shadow: 0 0 4px rgba(0,0,0,.6);
  box-shadow:
    0 10px 24px rgba(0,0,0,.9),
    0 0 14px rgba(229,154,58,.5);
}

/* список апгрейдов */
.upgrade-scroll-area {
  display: flex;
  flex-direction: column;
  gap: calc(.5rem * var(--scale-ui));
  max-height: calc(250px * var(--scale-ui));
  overflow-y: auto;
  padding-right: .5rem;
}
.upgrade-scroll-area::-webkit-scrollbar {
  width: 4px;
}
.upgrade-scroll-area::-webkit-scrollbar-thumb {
  background: rgba(229,154,58,.4);
  border-radius: 4px;
}

/* кнопка апгрейда с доп. инфой */
.upgrade-btn {
  width: 100%;
  background: rgba(20,15,25,.8);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow:
    0 16px 40px rgba(0,0,0,.8),
    0 0 20px rgba(229,154,58,.18);
  padding: calc(.6rem * var(--scale-ui)) calc(.75rem * var(--scale-ui));
  text-align: left;
  color: var(--text-main);
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.3;
  font-weight: 600;
  cursor: pointer;

  display: flex;
  flex-direction: column;
  gap: calc(.4rem * var(--scale-ui));
}
.upgrade-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.upgrade-line-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.2;
  color: var(--text-main);
  text-shadow: 0 0 8px rgba(229,154,58,.4);
}
.upgrade-name {
  font-weight: 600;
  color: var(--text-main);
}
.upgrade-cost {
  font-weight: 600;
  color: var(--accent);
  text-shadow: 0 0 8px rgba(229,154,58,.5);
  white-space: nowrap;
}
.upgrade-line-mid {
  font-size: calc(.9rem * var(--scale-ui));
  color: var(--text-main);
  line-height: 1.3;
}
.upgrade-line-bottom {
  font-size: calc(.8rem * var(--scale-ui));
  color: var(--text-dim);
  line-height: 1.2;
}

/* ежедневка / престиж */
.daily-wrap {
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.4;
  color: var(--text-main);
}
.daily-desc,
.prestige-info {
  font-size: calc(.9rem * var(--scale-ui));
  color: var(--text-dim);
  white-space: pre-line;
}
.streak-badge,
.prestige-badge {
  background: rgba(0,0,0,.4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.2;
  padding: calc(.25rem * var(--scale-ui)) calc(.5rem * var(--scale-ui));
  color: var(--accent);
  font-weight: 600;
  text-shadow: 0 0 6px rgba(229,154,58,.4);
  box-shadow: 0 0 16px rgba(229,154,58,.4);
}

.daily-btn,
.prestige-btn {
  background: linear-gradient(to bottom,rgba(229,154,58,1) 0%,rgba(160,90,20,1) 100%);
  border: 1px solid rgba(0,0,0,.8);
  border-radius: var(--radius-md);
  font-size: calc(1rem * var(--scale-ui));
  line-height: 1.3;
  padding: calc(.6rem * var(--scale-ui)) calc(.8rem * var(--scale-ui));
  font-weight: 600;
  cursor: pointer;
  color: #000;
  text-shadow: 0 0 4px rgba(0,0,0,.6);
  box-shadow:
    0 10px 24px rgba(0,0,0,.9),
    0 0 14px rgba(229,154,58,.5);
}
.prestige-btn:disabled {
  filter: grayscale(1);
  opacity: .4;
  cursor: not-allowed;
}

/* АДАПТИВ ЛЕЙАУТА: мобилка стэком */
@media (max-width: 1024px) {
  

  .left-pane,
  .side-panel {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    height: auto;
    border: none;
  }

  .play-area {
    min-height: 60vh;
    border-left: none;
    border-right: none;
  }

  .hud-top-right {
    right: .5rem;
    top: .5rem;
    min-width: calc(160px * var(--scale-ui));
  }
}

/* персонаж ещё крупнее на реально больших экранах */
@media (min-width: 1440px){
  .character-img {
    width: calc(320px * var(--scale-ui));
    max-width: 32vw;
  }
}

/* ======== ДОБАВЛЕНО: HALLOWEEN GLOW & CLICK FX ======== */

/* на всякий случай оставляем возможность быстро менять масштаб героя */
:root { --hero-scale: 1.5; }

/* мягкая «хэллоуин»-аура вокруг героя */
.character-wrap::before {
  content: "";
  position: absolute;
  inset: -12% -10%;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, rgba(229,154,58,.55), rgba(229,154,58,0) 70%),
    radial-gradient(closest-side, rgba(155, 80, 255,.28), rgba(155, 80, 255,0) 75%);
  filter: blur(18px);
  z-index: 0;
}

/* усиливаем базовое свечение спрайта */
.character-img {
  position: relative;
  z-index: 1;
  filter:
    drop-shadow(0 0 16px rgba(229,154,58,.55))
    drop-shadow(0 22px 44px rgba(0,0,0,.95));
}

/* вспышка ауры при клике */
.character-wrap.glow-pulse::before { animation: heroGlowPulse 260ms ease-out; }
@keyframes heroGlowPulse {
  0%   { opacity: 1; transform: scale(1); }
  50%  { opacity: 1; transform: scale(1.08); filter: blur(22px); }
  100% { opacity: 1; transform: scale(1);   filter: blur(18px); }
}

/* лёгкий поп-скейл героя при клике */
.character-wrap.click-pop { animation: heroPop 120ms ease-out; }
@keyframes heroPop {
  0%   { transform: translate(-50%, -50%) scale(var(--hero-scale, 1.5)); }
  55%  { transform: translate(-50%, -50%) scale(calc(var(--hero-scale, 1.5) * 1.08)); }
  100% { transform: translate(-50%, -50%) scale(var(--hero-scale, 1.5)); }
}


/* --- Anti-overlap fixes (platform req. 1.10.3) --- */
* { min-width: 0; } /* allow flex items to shrink */
.hud-level-header, .panel-headline { flex-wrap: wrap; gap: calc(.25rem * var(--scale-ui)); }
.hud-level-header > *, .panel-headline > * { min-width: 0; }
.hud-level-text, .panel-headline-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
button, .btn { min-height: calc(38px * var(--scale-ui)); min-width: calc(96px * var(--scale-ui)); }
@supports (padding: max(0px)) {
  body { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
}
@media (max-width: 480px), (max-height: 360px) {
  :root { --scale-ui: calc(var(--scale-ui) * .9); }
  h1, h2, .panel-headline span { font-size: clamp(12px, 2.6vw, 18px); }
}



.upgrade-scroll-area { position: relative; }
.upgrade-btn { display: grid; grid-auto-rows: min-content; row-gap: calc(.35rem * var(--scale-ui)); }
.upgrade-line-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.upgrade-line-mid, .upgrade-line-bottom { white-space: normal; }
.panel-upgrades .upgrade-btn + .upgrade-btn { margin-top: calc(.5rem * var(--scale-ui)); }

.hud-quests-list { position: relative; }
.quest-item { display: grid; grid-auto-rows: min-content; row-gap: calc(.4rem * var(--scale-ui)); }
.quest-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: calc(.4rem * var(--scale-ui)); }
.quest-name { min-width: 0; }
.quest-reward { white-space: nowrap; }


/* === Upgrades visual refresh (clean, compact, no overlaps) === */
.upgrade-scroll-area { 
  position: relative; 
  max-height: calc(360px * var(--scale-ui));
}
@media (min-width: 1200px) {
  .upgrade-scroll-area { max-height: calc(420px * var(--scale-ui)); }
}
.upgrade-btn {
  display: grid;
  grid-auto-rows: min-content;
  row-gap: calc(.45rem * var(--scale-ui));
  padding: calc(.7rem * var(--scale-ui)) calc(.8rem * var(--scale-ui));
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(229,154,58,.06), rgba(0,0,0,.05));
  transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease;
}
.upgrade-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.6), 0 0 12px rgba(229,154,58,.18);
  border-color: rgba(229,154,58,.28);
}
.upgrade-btn:disabled {
  opacity: .65;
}

.upgrade-line-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  min-width: 0;
}
.upgrade-name {
  font-weight: 700;
  letter-spacing: .02em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upgrade-cost {
  margin-left: auto;
  background: rgba(0,0,0,.35);
  border: 1px solid var(--border-color);
  border-radius: calc(.45rem * var(--scale-ui));
  padding: calc(.15rem * var(--scale-ui)) calc(.45rem * var(--scale-ui));
  font-size: calc(.9rem * var(--scale-ui));
  line-height: 1.2;
  box-shadow: inset 0 0 8px rgba(229,154,58,.18);
}

.upgrade-line-mid,
.upgrade-line-bottom {
  white-space: normal;
}

.panel-upgrades .upgrade-btn + .upgrade-btn { 
  margin-top: calc(.55rem * var(--scale-ui)); 
}


/* === Upgrades: safe non-overlapping layout (grid, wraps on narrow) === */
.upgrade-btn {
  display: flex;
  flex-direction: column;
  /* overflow hidden убран, чтобы описания апгрейдов не обрезались */
}
.upgrade-line-top {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  grid-auto-rows: min-content;
  column-gap: calc(.5rem * var(--scale-ui));
  row-gap: calc(.25rem * var(--scale-ui));
  align-items: center;
}
.upgrade-name { 
  grid-column: 1 / 2; 
  min-width: 0;
  overflow: hidden; 
  text-overflow: ellipsis; 
  white-space: nowrap;
}
.upgrade-cost { 
  grid-column: 2 / 3; 
  justify-self: end;
  white-space: nowrap;
}
@media (max-width: 1300px) {
  .upgrade-line-top { grid-template-columns: 1fr; }
  .upgrade-cost { grid-column: 1 / 2; justify-self: start; }
}


/* === Safe upgrades layout v2 === */
.upgrade-btn { 
  min-height: calc(72px * var(--scale-ui));
}
.upgrade-line-mid, .upgrade-line-bottom { 
  line-height: 1.35; 
  word-break: break-word;
}


/* Адаптив: чтобы на узких экранах боковые панели не обрезались */
@media (max-width: 1400px) {
  :root {
    --scale-ui: 1.0;
    --panel-w: 340px;
    --left-w: 320px;
  }
}

@media (max-width: 1200px) {
  :root {
    --scale-ui: 0.9;
    --panel-w: 310px;
    --left-w: 290px;
  }
}

/* --- Adaptation Fixes by Assistant --- */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    overscroll-behavior: none;
    height: 100%;
}

/* Подгонка игрового контейнера */
body, canvas, #game-container {
    max-width: 100vw;
    max-height: 100vh;
    width: 100vw;
    height: 100vh;
    box-sizing: border-box;
}

/* Адаптивная прокрутка правого меню, если оно переполняется */
.upgrade-panel, .right-panel {
    overflow-y: auto;
    max-height: 100vh;
}

/* Предотвращение наложения текста */
.task, .upgrade-item, .reward-block {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Предусмотрительно для flex-компоновки, если используется */
.flex-container {
    display: flex;
    flex-wrap: wrap;
}

/* гарантируем, что описания апгрейдов полностью видимы и переносятся */
.upgrade-line-mid,
.upgrade-line-bottom {
  max-width: 100%;
  word-break: break-word;
  overflow: visible;
  white-space: normal;
}
.upgrade-btn * {
  min-width: 0;
}


/* Финальная полировка апгрейдов: аккуратные описания под названием */
.panel-upgrades .upgrade-btn {
  gap: calc(.25rem * var(--scale-ui));
}

.panel-upgrades .upgrade-line-mid,
.panel-upgrades .upgrade-line-bottom {
  font-size: calc(.9rem * var(--scale-ui));
  color: var(--text-dim);
  margin-left: calc(.15rem * var(--scale-ui));
}


/* === FINAL UPGRADE CARD LAYOUT OVERRIDE === */
.panel-upgrades .upgrade-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(.25rem * var(--scale-ui));
  padding: calc(.65rem * var(--scale-ui)) calc(.8rem * var(--scale-ui));
}

.panel-upgrades .upgrade-line-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  min-width: 0;
}

.panel-upgrades .upgrade-name {
  font-weight: 700;
  min-width: 0;
  white-space: normal;        /* больше НЕТ троеточий по имени */
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.panel-upgrades .upgrade-cost {
  margin-left: auto;
  white-space: nowrap;
}

.panel-upgrades .upgrade-line-mid,
.panel-upgrades .upgrade-line-bottom {
  font-size: calc(.9rem * var(--scale-ui));
  color: var(--text-main);
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}


/* Compact meta line: эффект + куплено в одну строку */
.panel-upgrades .upgrade-line-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-top: calc(.25rem * var(--scale-ui));
  font-size: calc(.9rem * var(--scale-ui));
  color: var(--text-main);
  white-space: normal;
}

.panel-upgrades .upgrade-effect {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.panel-upgrades .upgrade-bought {
  flex: 0 0 auto;
  white-space: nowrap;
  margin-left: calc(.5rem * var(--scale-ui));
}

/* === HARD RESET: upgrades layout, single clean variant === */
.panel-upgrades .upgrade-scroll-area {
  max-height: calc(360px * var(--scale-ui));
  overflow-y: auto;
  padding-right: .35rem;
}

@media (min-width: 1200px) {
  .panel-upgrades .upgrade-scroll-area {
    max-height: calc(420px * var(--scale-ui));
  }
}

.panel-upgrades .upgrade-btn {
  display: flex !important;
  flex-direction: column;
  align-items: stretch;
  gap: calc(.35rem * var(--scale-ui));
  padding: calc(.7rem * var(--scale-ui)) calc(.85rem * var(--scale-ui));
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.panel-upgrades .upgrade-btn + .upgrade-btn {
  margin-top: calc(.8rem * var(--scale-ui));
}

.panel-upgrades .upgrade-line-top {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.panel-upgrades .upgrade-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.panel-upgrades .upgrade-cost {
  flex: 0 0 auto;
  white-space: nowrap;
}

.panel-upgrades .upgrade-line-meta {
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-top: calc(.2rem * var(--scale-ui));
  font-size: calc(.9rem * var(--scale-ui));
}

.panel-upgrades .upgrade-effect {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.panel-upgrades .upgrade-bought {
  flex: 0 0 auto;
  margin-left: calc(.6rem * var(--scale-ui));
  white-space: nowrap;
  color: var(--text-dim);
}


/* === Чистый лейаут апгрейдов: 3 строки, без каши === */

/* контейнер списка */
.panel-upgrades .upgrade-scroll-area {
  max-height: calc(360px * var(--scale-ui));
  overflow-y: auto;
  padding-right: .35rem;
}

/* сама карточка */
.panel-upgrades .upgrade-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(.25rem * var(--scale-ui));
  padding: calc(.7rem * var(--scale-ui)) calc(.85rem * var(--scale-ui));
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* расстояние между карточками */
.panel-upgrades .upgrade-btn + .upgrade-btn {
  margin-top: calc(.9rem * var(--scale-ui));
}

/* верхняя строка: название + цена */
.panel-upgrades .upgrade-line-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .6rem;
  min-width: 0;
}

.panel-upgrades .upgrade-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.panel-upgrades .upgrade-cost {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* строка эффекта */
.panel-upgrades .upgrade-line-mid {
  font-size: calc(.9rem * var(--scale-ui));
  color: var(--text-main);
  white-space: normal;
  word-break: break-word;
}

/* строка "Куплено" */
.panel-upgrades .upgrade-line-bottom {
  font-size: calc(.85rem * var(--scale-ui));
  color: var(--text-dim);
  white-space: nowrap;
}


/* === FINAL VISUAL SEPARATION FOR UPGRADE CARDS === */
.panel-upgrades .upgrade-btn {
  margin-bottom: calc(1.2rem * var(--scale-ui));
  box-shadow:
    0 10px 24px rgba(0,0,0,.9),
    0 0 14px rgba(229,154,58,.25);
  background: rgba(20,15,25,0.95);
}

.panel-upgrades .upgrade-btn:last-child {
  margin-bottom: 0;
}

.panel-upgrades .upgrade-line-bottom {
  padding-bottom: calc(.15rem * var(--scale-ui));
}


/* === COMPACT UPGRADE CARD STYLE === */
.panel-upgrades .upgrade-btn {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(.2rem * var(--scale-ui));
  padding: calc(.55rem * var(--scale-ui)) calc(.75rem * var(--scale-ui));
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.panel-upgrades .upgrade-btn + .upgrade-btn {
  margin-top: calc(.8rem * var(--scale-ui));
}

.panel-upgrades .upgrade-line-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}

.panel-upgrades .upgrade-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.panel-upgrades .upgrade-cost {
  flex: 0 0 auto;
  white-space: nowrap;
}

.panel-upgrades .upgrade-line-mid {
  font-size: calc(.85rem * var(--scale-ui));
  color: var(--text-main);
  white-space: normal;
  word-break: break-word;
}

.panel-upgrades .upgrade-line-bottom {
  font-size: calc(.8rem * var(--scale-ui));
  color: var(--text-dim);
  white-space: nowrap;
}


/* === Auto-shrink text in upgrades for narrow screens === */
@media (max-width: 1400px) {
  .panel-upgrades .upgrade-name {
    font-size: 0.95em;
  }
  .panel-upgrades .upgrade-line-mid {
    font-size: 0.9em;
  }
  .panel-upgrades .upgrade-line-bottom {
    font-size: 0.85em;
  }
}

@media (max-width: 1100px) {
  .panel-upgrades .upgrade-name {
    font-size: 0.9em;
  }
  .panel-upgrades .upgrade-line-mid {
    font-size: 0.85em;
  }
  .panel-upgrades .upgrade-line-bottom {
    font-size: 0.8em;
  }
}

@media (max-width: 900px) {
  .panel-upgrades .upgrade-name {
    font-size: 0.85em;
  }
  .panel-upgrades .upgrade-line-mid {
    font-size: 0.8em;
  }
  .panel-upgrades .upgrade-line-bottom {
    font-size: 0.75em;
  }
}

/* === FIX: безопасное имя апгрейда, чтобы не обрезалось при любых размерах окна === */
.panel-upgrades .upgrade-name {
  flex: 1 1 100%;
  min-width: 0;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-word;
}


/* === FIX размеров карточек улучшений, сетку не трогаем === */
.panel-upgrades .upgrade-btn {
  min-height: 96px;
  padding: calc(.8rem * var(--scale-ui)) calc(1rem * var(--scale-ui));
  box-sizing: border-box;
}

.panel-upgrades .upgrade-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: .25rem;
}

.panel-upgrades .upgrade-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.panel-upgrades .upgrade-cost {
  flex: 0 0 auto;
  white-space: nowrap;
}


/* === FINAL UPGRADE CARD LAYOUT FIX === */
/* cards auto-grow by content; no huge min-height */
.panel-upgrades .upgrade-btn {
  min-height: auto;
  padding: calc(.75rem * var(--scale-ui)) calc(.95rem * var(--scale-ui));
  box-sizing: border-box;
}

/* top row: name + cost, always inside card */
.panel-upgrades .upgrade-line-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  column-gap: .5rem;
  row-gap: .25rem;
}

/* long names wrap inside the card */
.panel-upgrades .upgrade-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

/* cost badge stays compact; may move to next line but stays inside */
.panel-upgrades .upgrade-cost {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* middle & bottom lines fully inside card, text wraps when needed */
.panel-upgrades .upgrade-line-mid,
.panel-upgrades .upgrade-line-bottom {
  white-space: normal;
  word-break: break-word;
  overflow: visible;
}

/* Мобильная компоновка: колонки складываем в столбик */
@media (max-width: 768px) {
  

  .left-pane,
  .play-area,
  .side-panel {
    width: 100%;
    max-width: 100%;
    height: auto;
  }
}
html, body {
  height: 100dvh;
  overflow: hidden;
}

/* === ЛАНДШАФТ (основной режим на всех устройствах) === */
@media (orientation: landscape) {
  #game {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    padding: 8px 12px;               /* отступы от краёв экрана — иконки Яндекса видны! */
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr 1.4fr 1fr;   /* как на ПК: лево | центр | право */
    gap: 12px;
    background: var(--bg-page);
    overflow: hidden;
  }

  .left-pane   { grid-column: 1; }
  .play-area   { grid-column: 2; display: flex; justify-content: center; align-items: center; }
  .side-panel  { grid-column: 3; }

  .character-img {
    max-width: 100%;
    max-height: 92vh;
    width: auto;
    height: auto;
  }

  /* Чтобы реклама не перекрывалась — безопасная зона */
  .left-pane, .side-panel {
    padding-top: 4px;
    padding-bottom: 4px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  #rotateHint { display: none !important; }
}

/* === ПОРТРЕТ — только подсказка, игра скрыта === */
@media (orientation: portrait) {
  #game {
    filter: blur(8px);
    opacity: 0.15;
    pointer-events: none;
  }

  #rotateHint {
    display: flex !important;
  }
}

/* Красивая подсказка поворота */
#rotateHint {
  position: fixed;
  inset: 0;
  background: #000d;
  color: #fff;
  font-size: 6vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  z-index: 99999;
  display: none;
  backdrop-filter: blur(4px);
  user-select: none;
}

.rotate-icon {
  font-size: 18vw;
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Фикс для панелей: ключевые элементы всегда видны, списки скроллятся */
.left-pane, .side-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden; /* нет системного скролла */
}

.hud-top-left, .hud-top-right { /* монеты, уровень, CPS — всегда наверху, не скроллятся */
  flex-shrink: 0;
  padding: 8px;
}

.upgrade-scroll-area, .hud-quests-list { /* улучшения и задания — скролл внутри */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  max-height: 50vh; /* половина экрана на мобильных */
  scrollbar-width: thin;
}

/* На телефоне: уменьшим шрифты/отступы, скролл короче */
@media (orientation: landscape) and (max-width: 1024px) {
  :root {
    --scale-ui: 0.9; /* чуть меньше, чтобы поместилось больше */
    --gap: 0.6rem;
  }
  .left-pane, .side-panel {
    padding: 6px;
  }
  .upgrade-scroll-area, .hud-quests-list {
    max-height: 45vh; /* короче, чтобы прогресс кликов был виден без скролла */
  }
  .character-img {
    max-height: 85vh; /* чуть меньше, чтобы панели не жались */
  }
}

/* На ПК: макет как исходный, широкие панели */
@media (min-width: 1025px) {
  :root {
    --left-w: 340px; /* левая */
    --panel-w: 360px; /* правая */
    --hero-scale: 1.1; /* персонаж чуть меньше на ПК */
  }

  #game {
    grid-template-columns: var(--left-w) 1fr var(--panel-w);
    max-width: none;
    margin: 0;
  }

  /* персонаж компактнее на ПК */
  .character-wrap {
    top: 52%;
  }
  .character-img {
    max-height: 68vh;
    max-width: 30vw;
  }

  /* правая колонка: улучшения скроллятся, дейлик и престиж всегда видны снизу */
  .side-panel {
    display: flex;
    flex-direction: column;
  }

  .panel-upgrades {
    flex: 1 1 auto;
    min-height: 0;
  }

  .upgrade-scroll-area {
    max-height: calc(300px * var(--scale-ui));
  }
}

/* очень широкие экраны — персонаж и список улучшений чуть крупнее */
@media (min-width: 1440px) {
  .character-img {
    max-height: 72vh;
    max-width: 28vw;
  }
  .upgrade-scroll-area {
    max-height: calc(380px * var(--scale-ui));
  }
}


/* Скрываем статус "В процессе / In progress", чтобы не залезал на кнопку */
.quest-status.inprogress {
  display: none !important;
}

/* Мобильные/планшеты в landscape: делаем панель дохода компактнее,
   чтобы не перекрывать персонажа */
@media (orientation: landscape) and (max-width: 1024px) {
  .hud-top-right {
    transform-origin: top center;
    transform: scale(0.7);
    min-width: calc(140px * var(--scale-ui));
    padding: calc(.5rem * var(--scale-ui));
  }
}