/* ===== Луксмаксинг: Путь Чада — стили =====
   Направление: печатный тир-лист. Газетная бумага, чёрная краска, один
   красный. Выведено из мира темы: сам референс — чёрно-белый печатный лист
   с подписями, а красным в этой субкультуре размечают фотографии лиц.

   Signature (один): красная измерительная разметка на портрете.
   Красный больше НИГДЕ не используется как декор — только разметка,
   слабое звено и активное действие.

   Запрещено: градиенты, скруглённые углы, размытые тени, эмодзи. */

:root {
  /* 60% — бумага */
  --paper:   #e5e3dd;
  --paper-2: #f2f0ea;      /* карточки, «белее листа» */
  /* 30% — краска */
  --ink:     #131312;
  --ink-2:   #6b6862;      /* серый со сдвигом в тёплый — к акценту */
  --ink-3:   #a8a49c;
  /* 10% — акцент */
  --red:     #d81f26;

  --rule:   2px;
  --rule-2: 3px;
  --shift:  3px;           /* печатный сдвиг вместо тени */
  --dot: rgba(19, 19, 18, .11);

  /* шкала 1.25 */
  --t-xs: .64rem; --t-sm: .8rem; --t-md: 1rem;
  --t-lg: 1.25rem; --t-xl: 1.5625rem; --t-2xl: 1.9531rem;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: var(--paper); color: var(--ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-md); line-height: 1.5;
  font-variant-numeric: tabular-nums;
  /* поле игры не выделяется, не даёт лонгтап-меню и не тянет страницу
     (требования платформы 1.6.2.7, 1.6.1.8, 1.10.2) */
  user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  overscroll-behavior: none;
}
img, svg { -webkit-user-drag: none; user-select: none; }
.hidden { display: none !important; }
.ico { width: 1em; height: 1em; display: block; }

/* растровая точка — фактура печати, лечит «AI-гладкость» */
.halftone {
  background-image: radial-gradient(var(--dot) .9px, transparent 1px);
  background-size: 4px 4px;
}

#app { position: fixed; inset: 0; display: flex; flex-direction: column; }

/* ---------------- Загрузчик ---------------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; background: var(--paper); transition: opacity .3s;
}
#loader.gone { opacity: 0; pointer-events: none; }
.loader-title {
  font-family: 'Russo One', sans-serif; font-size: clamp(26px, 8.5vw, 44px);
  letter-spacing: -.02em; line-height: 1.05; color: var(--ink);
}
.loader-sub {
  font-size: var(--t-sm); color: var(--ink-2);
  letter-spacing: .22em; text-transform: uppercase;
  border-top: var(--rule) solid var(--ink); padding-top: 5px; margin-bottom: 10px;
}
.loader-face { width: min(44vw, 180px); height: auto; border: var(--rule) solid var(--ink); background: var(--paper-2); }
.loader-bar { width: min(62vw, 240px); height: 10px; border: var(--rule) solid var(--ink); margin-top: 14px; }
#loaderFill { height: 100%; width: 0; background: var(--ink); transition: width .2s; }

/* ---------------- Шапка: чёрная плашка, как заголовок листа --------- */
#game { flex: 1; display: flex; flex-direction: column; min-height: 0; }

#topbar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(6px + var(--safe-t)) 10px 6px;
  background: var(--ink); color: var(--paper);
}
.aura-main { display: flex; align-items: baseline; gap: 8px; flex: 1; min-width: 0; }
.aura-value {
  font-family: 'Russo One', sans-serif; font-size: var(--t-xl); line-height: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aura-label { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase; letter-spacing: .14em; }
.aura-side { text-align: right; font-size: var(--t-sm); line-height: 1.35; flex: none; font-weight: 700; }
.rate-row .unit { color: var(--ink-3); font-size: var(--t-xs); margin-left: 2px; font-weight: 400; }
.icon-btn {
  flex: none; width: 32px; height: 32px; border: var(--rule) solid var(--paper);
  background: var(--ink); color: var(--paper); cursor: pointer;
  display: grid; place-items: center; padding: 0;
}
.icon-btn .ico { width: 18px; height: 18px; }

/* ---------------- Полоса тира ---------------- */
#tierStrip {
  position: relative; display: flex; align-items: center; gap: 8px;
  padding: 7px 10px 9px; background: var(--paper);
  border-bottom: var(--rule) solid var(--ink);
}
#tierBadge {
  font-family: 'Russo One', sans-serif; font-size: var(--t-sm); text-transform: lowercase;
  padding: 4px 8px; flex: none; background: var(--ink); color: var(--paper);
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tier-mid { min-width: 0; flex: 1; }
#tierName { font-weight: 700; font-size: var(--t-sm); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tierSub { font-size: var(--t-xs); color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tierStrip .icon-btn { border-color: var(--ink); background: var(--paper); color: var(--ink); }
/* Сколько осталось до следующего тира. Раньше это была волосяная линия 3px
   на всю ширину — её никто не замечал. Теперь настоящая полоса с числом. */
#tierNext {
  flex: none; line-height: 1.15;
  border-left: var(--rule) solid var(--ink); padding: 1px 0 1px 8px;
  width: clamp(104px, 26vw, 190px);
}
.tn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
#tierNextCode {
  font-family: 'Russo One', sans-serif; font-size: 10px;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#tierNextVal { font-size: var(--t-sm); font-weight: 700; color: var(--red); flex: none; }
#tierNext.done #tierNextVal { color: var(--ink); }
#tierTrack {
  height: 11px; margin-top: 3px;
  border: var(--rule) solid var(--ink); background: var(--paper-2);
}
#tierFill { height: 100%; width: 0; background: var(--red); transition: width .3s steps(12); }
#tierNext.done #tierFill { background: var(--ink); }
#genePill {
  flex: none; display: flex; align-items: center; gap: 3px;
  font-size: var(--t-xs); font-weight: 700; padding: 3px 6px;
  border: var(--rule) solid var(--ink);
}
#genePill .ico { width: 13px; height: 13px; }

/* ---------------- Сцена ---------------- */
#scene {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: var(--paper);
}
#bg { position: absolute; inset: 0; transition: background-color .5s; }
/* Рейка тиров — только там, где сцена шире портрета и остаётся пустое поле */
#rail { display: none; }
@media (orientation: landscape) and (min-width: 900px) {
  /* Высота считается от сцены, чтобы все 11 ступеней всегда влезали целиком */
  #rail {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px; z-index: 3;
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    height: 92%; overflow: hidden;
  }
  /* Кнопка реинкарнации на широком экране уезжает вправо: слева теперь рейка */
  #btnPrestige { left: auto; right: 10px; top: 84px; }
  .rail-item {
    flex: 1 1 0; min-height: 0; aspect-ratio: 300 / 360; width: auto;
    border: var(--rule) solid var(--ink); background: var(--paper-2);
    line-height: 0; position: relative;
  }
  .rail-item svg { width: 100%; height: 100%; display: block; }
  .rail-item.locked { opacity: .3; }
  .rail-item.locked svg { filter: contrast(.5); }
  .rail-item.cur { box-shadow: var(--shift) var(--shift) 0 var(--red); }
  .rail-item b {
    position: absolute; left: 0; right: 0; bottom: 0; font-size: 8px; line-height: 1.3;
    font-family: 'Russo One', sans-serif; text-align: center;
    background: var(--ink); color: var(--paper);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
/* Декоративные слои на всю сцену обязаны пропускать тапы к #scene:
   иначе полноэкранный div молча съедает управление (см. п.1.15). */
#bgProps { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#portraitWrap {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .09s steps(3, end);
}
#portraitWrap.tap { transform: scale(.955); }
#portrait, #portraitGhost, #markup {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
#markup, #portraitGhost, #portrait { pointer-events: none; }
/* Призрак следующего тира: проступает поверх текущего лица к концу тира */
#portraitGhost { opacity: 0; transition: opacity .45s ease-out; mix-blend-mode: multiply; }

/* Разметка «прочерчивается» заново, когда замер изменился */
#markup .mk { animation: mkIn .28s ease-out both; }
@keyframes mkIn { from { opacity: 0 } to { opacity: 1 } }
#markup .mk-scan { animation: mkScan .5s linear 1 both; }
@keyframes mkScan {
  0%   { transform: translateX(0); opacity: .8 }
  92%  { opacity: .8 }
  100% { transform: translateX(308px); opacity: 0 }
}

/* Прогон печатного валика при смене тира — ровно по ячейке портрета */
#roller {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 5;
}
#roller rect { transform: translateX(-300px); }
#roller.run rect { animation: roller .6s steps(14, end) 1 both; }
@keyframes roller {
  0%   { transform: translateX(-300px) }
  38%  { transform: translateX(0) }
  100% { transform: translateX(300px) }
}

@keyframes shakeKf {
  0%, 100% { transform: translate(0, 0) }
  20% { transform: translate(-4px, 2px) }
  40% { transform: translate(4px, -2px) }
  60% { transform: translate(-3px, -2px) }
  80% { transform: translate(3px, 2px) }
}
#scene.shake { animation: shakeKf .26s steps(5, end) 1; }
#fxLayer { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#tapHint {
  position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%);
  font-size: var(--t-xs); color: var(--ink-2); letter-spacing: .18em; text-transform: uppercase;
  background: var(--paper); padding: 2px 8px; border: var(--rule) solid var(--ink);
  pointer-events: none;
}

.pop {
  position: absolute; font-family: 'Russo One', sans-serif; font-size: var(--t-md);
  color: var(--ink); background: var(--paper); padding: 0 4px; border: 1.5px solid var(--ink);
  animation: popUp .9s steps(10, end) forwards; pointer-events: none; white-space: nowrap;
  --tilt: 0deg;
}
.pop.mark { border: none; background: none; color: var(--red); font-size: var(--t-lg); }
.pop.crit {
  background: var(--red); color: var(--paper); border-color: var(--red);
  font-size: var(--t-lg); padding: 1px 7px;
}
.pop.crit-label {
  background: none; border: none; color: var(--red); font-size: var(--t-sm);
  letter-spacing: .1em;
}
@keyframes popUp {
  0% { opacity: 0; transform: translate(-50%, 0) rotate(var(--tilt)) scale(.7) }
  14% { opacity: 1; transform: translate(-50%, -14px) rotate(var(--tilt)) scale(1) }
  100% { opacity: 0; transform: translate(-50%, -64px) rotate(var(--tilt)) scale(1) }
}

/* Брызги туши из точки удара */
.ink {
  position: absolute; width: 7px; height: 2.5px; background: var(--ink);
  transform-origin: 0 50%; pointer-events: none;
  animation: inkFly .4s ease-out forwards;
  --dx: 0px; --dy: 0px; --rot: 0deg;
}
@keyframes inkFly {
  0% { opacity: 1; transform: translate(0, 0) rotate(var(--rot)) scaleX(.4) }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scaleX(1.6) }
}

/* Плашка серии быстрых тапов */
#combo {
  position: absolute; left: 10px; bottom: 10px; z-index: 5; pointer-events: none;
  font-family: 'Russo One', sans-serif; font-size: var(--t-sm);
  background: var(--red); color: var(--paper); padding: 3px 8px;
}
#combo.pulse { animation: comboPulse .18s steps(3, end) 1; }
@keyframes comboPulse { 0% { transform: scale(1.16) } 100% { transform: scale(1) } }

/* Штамп нового тира */
.stamp {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  font-family: 'Russo One', sans-serif; font-size: var(--t-2xl); white-space: nowrap;
  color: var(--red); border: var(--rule-2) solid var(--red); padding: 6px 14px;
  pointer-events: none; animation: stampIn 1.5s steps(12, end) forwards;
  max-width: 92%; overflow: hidden; text-overflow: ellipsis;
}
@keyframes stampIn {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(2.4) rotate(-9deg) }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-5deg) }
  72% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-5deg) }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08) rotate(-5deg) }
}

/* Кнопки на сцене — чёрная плашка с печатным сдвигом */
.plate {
  background: var(--ink); color: var(--paper); border: var(--rule) solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--ink); cursor: pointer; padding: 0;
  font-family: 'Russo One', sans-serif;
}
.plate:active { box-shadow: 0 0 0 var(--ink); transform: translate(var(--shift), var(--shift)); }
.plate:disabled { background: var(--paper); color: var(--ink-3); border-color: var(--ink-3); box-shadow: none; cursor: default; }

.bonus-btn {
  position: absolute; right: 10px; top: 10px; z-index: 4;
  width: 56px; padding: 6px 3px 5px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.bonus-btn .ico { width: 17px; height: 17px; }
.bonus-big { font-size: var(--t-md); line-height: 1; }
.bonus-txt { font-size: 9px; line-height: 1.15; text-align: center; letter-spacing: .04em; }
/* Кнопка ролика: красная, чтобы отличалась от бесплатной воды, и стоит
   под ней — предложение сверху, а не подмена бесплатного действия. */
.ad-btn { top: 78px; background: var(--red); border-color: var(--red); }
.ad-btn .bonus-txt { font-size: 8px; }
#boostTimer {
  position: absolute; right: 10px; top: 74px; z-index: 4;
  font-family: 'Russo One', sans-serif; font-size: var(--t-xs); padding: 3px 6px;
  background: var(--red); color: var(--paper);
}
#btnPrestige { position: absolute; left: 10px; top: 10px; z-index: 4; font-size: var(--t-xs); padding: 8px 10px; background: var(--red); border-color: var(--red); box-shadow: var(--shift) var(--shift) 0 var(--ink); }

/* Карточка события */
#eventCard {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 6;
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  background: var(--paper-2); border: var(--rule) solid var(--ink);
  box-shadow: var(--shift) var(--shift) 0 var(--ink);
}
#evIco { flex: none; width: 30px; height: 30px; border: var(--rule) solid var(--ink); display: grid; place-items: center; }
#evIco .ico { width: 20px; height: 20px; }
.ev-body { flex: 1; min-width: 0; }
#evTitle { font-family: 'Russo One', sans-serif; font-size: var(--t-sm); }
#evText { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.35; }
#evButtons { display: flex; flex-direction: column; gap: 4px; flex: none; }
#evButtons button {
  font-family: 'Russo One', sans-serif; font-size: var(--t-xs); padding: 6px 9px; cursor: pointer;
  border: var(--rule) solid var(--ink); background: var(--paper); color: var(--ink);
}
#evButtons button.primary { background: var(--ink); color: var(--paper); }

/* ------ Пять шкал: они же переключатель разделов магазина ------------
   Ряд одновременно показывает замер и выбирает раздел — отдельная полоса
   вкладок дублировала бы ровно эти же пять кнопок. */
#meters {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink);
}
.meter {
  min-width: 0; background: var(--paper); padding: 5px 2px 5px; text-align: center; cursor: pointer;
  position: relative; border-right: var(--rule) solid var(--ink); color: var(--ink-2);
}
.meter:last-child { border-right: none; }
.meter.sel { background: var(--ink); color: var(--paper); }
.meter.weak::after {
  content: ''; position: absolute; top: 0; right: 0; width: 7px; height: 7px; background: var(--red);
}
.meter-ico { width: 17px; height: 17px; margin: 0 auto; color: inherit; }
.meter-name {
  font-size: 9px; font-weight: 700; letter-spacing: .01em; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meter-track {
  position: relative; height: 7px; border: 1.5px solid currentColor; margin: 3px 3px 2px;
}
.meter-fill { height: 100%; width: 0; background: currentColor; transition: width .35s steps(12); }
.meter.full .meter-fill { background: var(--red); }
/* Засечка порога следующего тира — видно, каким шкалам ещё не хватает */
.meter-gate {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--red);
  transform: translateX(-1px); transition: left .3s steps(8);
}
.meter.full .meter-gate, .meter:not(.blocking) .meter-gate { opacity: .35; }
.meter.blocking .meter-gate { opacity: 1; }
.meter.blocking .meter-val { color: var(--red); }
.meter.sel.blocking .meter-val { color: var(--paper); }
.meter-val { font-family: 'Russo One', sans-serif; font-size: var(--t-xs); color: inherit; }
.meter.bump .meter-val { animation: bumpKf .3s steps(4, end) 1; }
@keyframes bumpKf { 0% { transform: scale(1.5) } 100% { transform: scale(1) } }

/* ---------------- Магазин ---------------- */
#shop { flex: none; height: 36vh; min-height: 180px; display: flex; flex-direction: column; background: var(--paper); }
#shopList { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--safe-b); }

.up {
  display: flex; align-items: center; gap: 8px; padding: 7px 9px;
  border-bottom: var(--rule) solid var(--ink); cursor: pointer; background: var(--paper);
}
.up.can { background: var(--paper-2); }
.up.can .up-cost { color: var(--red); }
.up.cant { color: var(--ink-2); cursor: default; }
.up.maxed, .up.lock { color: var(--ink-3); cursor: default; }
.up-step {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center;
  font-family: 'Russo One', sans-serif; font-size: var(--t-sm);
  border: var(--rule) solid currentColor;
}
.up.can .up-step { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.up-body { flex: 1; min-width: 0; }
.up-name { font-weight: 700; font-size: var(--t-sm); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-desc { font-size: var(--t-xs); color: var(--ink-2); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.up-gain { font-size: var(--t-xs); color: var(--ink-2); margin-top: 1px; letter-spacing: -.01em; }
.up-right { flex: none; text-align: right; }
.up-cost { font-family: 'Russo One', sans-serif; font-size: var(--t-sm); }
.up-lvl { font-size: var(--t-xs); color: var(--ink-2); }

/* ---------------- Лестница тиров: тот самый печатный лист ---------- */
#ladder { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; background: var(--paper); padding-top: var(--safe-t); }
#ladderHead {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; background: var(--ink); color: var(--paper);
}
#ladderTitle { font-family: 'Russo One', sans-serif; font-size: var(--t-md); letter-spacing: -.01em; }
#ladderHead .icon-btn { border-color: var(--paper); }
/* Сетка лестницы: колонки одинаковой ширины на любом экране, карточки
   крупные. Высота карточки задана жёстко по строкам текста — иначе длинные
   названия («absolute beauty of adam») делают соседние карточки разной высоты. */
#ladderGrid {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(136px, 17vw, 250px), 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  align-content: start; justify-content: center;
  padding: clamp(10px, 1.4vw, 20px);
  padding-bottom: calc(20px + var(--safe-b));
}
.rung {
  border: var(--rule) solid var(--ink); background: var(--paper-2); text-align: center;
  display: flex; flex-direction: column;
}
.rung svg { width: 100%; height: auto; display: block; aspect-ratio: 300 / 360; }
.rung.locked { opacity: .38; }
.rung.locked svg { filter: contrast(.5); }
.rung.cur { box-shadow: var(--shift) var(--shift) 0 var(--red); }
.rung-code {
  font-family: 'Russo One', sans-serif; font-size: clamp(10px, 1vw, 14px);
  line-height: 1.15; height: 2.5em; padding: 3px 3px 0;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border-top: var(--rule) solid var(--ink);
}
.rung-name {
  font-size: clamp(9.5px, .85vw, 12px); color: var(--ink-2);
  line-height: 1.2; height: 2.6em; padding: 0 4px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.rung-gate {
  font-size: clamp(9px, .8vw, 11px); color: var(--ink-3);
  line-height: 1.4; height: 1.6em; padding-bottom: 3px;
}
.rung.cur .rung-gate { color: var(--red); font-weight: 700; }

/* ---------------- Пауза ---------------- */
#pause { position: fixed; inset: 0; z-index: 75; display: grid; place-items: center; background: rgba(19, 19, 18, .6); padding: 18px; }
#pauseCard {
  width: min(94vw, 340px); background: var(--paper-2);
  border: var(--rule-2) solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 18px 16px;
}
#pauseTitle { font-family: 'Russo One', sans-serif; font-size: var(--t-xl); text-align: center; letter-spacing: .06em; }
#pauseStats {
  margin: 12px 0 14px; font-size: var(--t-sm); color: var(--ink-2);
  border-top: var(--rule) solid var(--ink); border-bottom: var(--rule) solid var(--ink); padding: 8px 0;
}
.pstat { display: flex; justify-content: space-between; gap: 10px; }
.pstat b { color: var(--ink); font-weight: 700; }
#pauseButtons { display: flex; flex-direction: column; gap: 7px; }
#pauseButtons button {
  font-family: 'Russo One', sans-serif; font-size: var(--t-sm); padding: 11px; cursor: pointer;
  border: var(--rule) solid var(--ink); background: var(--paper); color: var(--ink);
}
#pauseButtons button.primary { background: var(--ink); color: var(--paper); }

/* ---------------- Модалка ---------------- */
#modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(19, 19, 18, .55); padding: 18px; }
#modalCard {
  width: min(94vw, 380px); background: var(--paper-2);
  border: var(--rule-2) solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  padding: 18px 16px; text-align: center;
}
#modalIcon { width: 44px; height: 44px; margin: 0 auto 8px; border: var(--rule) solid var(--ink); display: grid; place-items: center; }
#modalIcon .ico { width: 28px; height: 28px; }
#modalTitle { font-family: 'Russo One', sans-serif; font-size: var(--t-lg); margin-bottom: 6px; }
#modalText { font-size: var(--t-sm); color: var(--ink-2); line-height: 1.5; margin-bottom: 14px; }
#modalButtons { display: flex; flex-direction: column; gap: 7px; }
#modalButtons button {
  font-family: 'Russo One', sans-serif; font-size: var(--t-sm); padding: 11px; cursor: pointer;
  border: var(--rule) solid var(--ink); background: var(--paper); color: var(--ink);
}
#modalButtons button.primary { background: var(--ink); color: var(--paper); }

/* ---------------- Ландшафт ---------------- */
@media (orientation: landscape) and (min-width: 620px) {
  #game { display: grid; grid-template-columns: 1fr minmax(280px, 34%); grid-template-rows: auto auto 1fr auto; }
  #topbar, #tierStrip { grid-column: 1 / -1; }
  #scene { grid-column: 1; grid-row: 3 / 5; border-right: var(--rule) solid var(--ink); }
  #shop { grid-column: 2; grid-row: 3; height: auto; min-height: 0; }
  #meters { grid-column: 2; grid-row: 4; }
}