/* ══════════════════════════════════════════════
   DWARVEN DEPTHS — эффекты и анимации (пиксель-арт)
   Туман войны, порода, трещины, частицы, всплывающие цифры,
   юниты/враги, прогресс-бары, виньетки, screen shake.
   ══════════════════════════════════════════════ */

/* ══════════ СОСТОЯНИЯ КЛЕТОК ══════════ */

/* Туман войны: тёмный камень + пиксельный шум */
.cell.hidden {
  background:
    repeating-linear-gradient(90deg, rgba(242,240,229,.03) 0 3px, transparent 3px 7px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 3px, transparent 3px 8px),
    linear-gradient(160deg, var(--bg-deep), var(--shadow));
  animation: fog-noise 6s steps(6) infinite;
}
.cell.hidden:hover {
  border-color: var(--gold);
  box-shadow: 0 0 14px rgba(237, 225, 158, .4);
}

/* Открытая порода (можно ломать) */
.cell.ground {
  background:
    radial-gradient(circle at 25% 35%, rgba(242,240,229,.14) 0 2px, transparent 3px),
    radial-gradient(circle at 65% 70%, rgba(242,240,229,.1) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 24%, rgba(242,240,229,.08) 0 1px, transparent 2px),
    linear-gradient(150deg, var(--stone) 0 55%, var(--line-lit) 55% 100%);
  background-size: 21px 19px, 25px 23px, 15px 15px, cover;
  animation: rock-shimmer 4.5s steps(4) infinite;
}

/* Пустая клетка (можно строить) */
.cell.empty {
  background: linear-gradient(150deg, #56517e 0 52%, var(--bg-soft) 52% 100%);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.35);
}
.cell.empty.fresh { animation: fresh-glow 2s steps(5) ease-out; }

/* Клетка с постройкой */
.cell.building {
  background: linear-gradient(150deg, #5b5486 0 52%, var(--bg-soft) 52% 100%);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.35);
}
.cell.building:hover { box-shadow: 0 0 16px rgba(237, 225, 158, .4); }

/* Логово / крепость (пульсируют сквозь туман) */
.cell.lair, .cell.fortress { background: linear-gradient(150deg, var(--red-deep), var(--red) 60%, var(--red-deep)); }
.cell.lair::after, .cell.fortress::after {
  content: ''; position: absolute; inset: 22%;
  border-radius: 2px;
  background: var(--red);
  box-shadow: 0 0 18px var(--red);
  animation: danger-pulse 1.2s steps(3) infinite;
}
.cell.fortress::after {
  background: var(--violet);
  box-shadow: 0 0 26px var(--violet), 0 0 44px rgba(207, 138, 203, .5);
  animation-duration: .9s;
}

/* Разлом прорыва */
.cell.breach {
  background: linear-gradient(150deg, var(--red-deep), var(--bg-deep));
  animation: breach-pulse 1s steps(3) infinite;
}
.cell.breach::after {
  content: ''; position: absolute; inset: 8%;
  background: conic-gradient(from 0deg, var(--red), var(--bg-deep), var(--red), var(--bg-deep), var(--red));
  border-radius: 2px;
  opacity: .85;
  animation: spin 3.5s steps(12) linear infinite;
}

/* Трещины при ломке (по 25%) */
.cell .crack {
  position: absolute; background: var(--bg);
  box-shadow: 1px 0 0 rgba(242,240,229,.35);
  transform-origin: center; z-index: 2; pointer-events: none;
}
.cell .crack.c1 { width: 3px; height: 60%; left: 30%; top: 20%; transform: rotate(24deg); }
.cell .crack.c2 { width: 3px; height: 70%; left: 58%; top: 12%; transform: rotate(-31deg); }
.cell .crack.c3 { width: 3px; height: 55%; left: 44%; top: 32%; transform: rotate(72deg); }

/* Растворение тумана при раскрытии */
.cell.revealing { animation: fog-dissolve .5s steps(4) ease-out; }

/* Призраки и подсветка валидности */
.cell.ghost-ok {
  box-shadow: 0 0 16px rgba(194, 211, 104, .85), inset 0 0 14px rgba(138, 176, 96, .35);
  animation: valid-pulse 1.1s steps(3) infinite;
}
.cell.ghost-no, .cell.ghost-bad {
  box-shadow: 0 0 12px rgba(180, 82, 82, .75), inset 0 0 12px rgba(180, 82, 82, .3);
}
.cell.ghost-townhall {
  box-shadow: 0 0 22px rgba(237, 225, 158, .9), inset 0 0 16px rgba(237, 225, 158, .35);
  animation: valid-pulse 1.1s steps(3) infinite;
}
.cell.dig-target { box-shadow: 0 0 18px rgba(237, 225, 158, .85); animation: valid-pulse 1s steps(3) infinite; }

/* Подсветка валидных/невалидных клеток при hover по карточке */
.cell.cell-valid {
  box-shadow: 0 0 15px rgba(194, 211, 104, .85), inset 0 0 13px rgba(138, 176, 96, .32);
  animation: valid-pulse 1.1s steps(3) infinite;
}
.cell.cell-invalid { box-shadow: 0 0 11px rgba(180, 82, 82, .65), inset 0 0 10px rgba(180, 82, 82, .25); }

/* ══════════ КЛЮЧЕВЫЕ КАДРЫ ══════════ */
@keyframes fog-noise {
  0%, 100% { background-position: 0 0, 0 0, 0 0; }
  50% { background-position: 7px 4px, -5px 3px, 0 0; }
}
@keyframes rock-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.15); }
}
@keyframes fresh-glow {
  0% { box-shadow: 0 0 22px rgba(237, 225, 158, .95); }
  100% { box-shadow: inset 2px 2px 0 rgba(0,0,0,.35); }
}
@keyframes fog-dissolve {
  0% { filter: brightness(2.4) blur(3px); transform: scale(1.12); opacity: .3; }
  100% { filter: none; transform: scale(1); opacity: 1; }
}
@keyframes valid-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.35); }
}
@keyframes danger-pulse {
  0%, 100% { transform: scale(.7); opacity: .55; }
  50% { transform: scale(1.15); opacity: 1; }
}
@keyframes breach-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(180, 82, 82, .5); }
  50% { box-shadow: 0 0 30px rgba(180, 82, 82, .95); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes building-grow {
  0% { transform: scaleY(0) scaleX(.6); }
  70% { transform: scaleY(1.2) scaleX(1.05); }
  100% { transform: scale(1); }
}
@keyframes pulse-outline {
  0%, 100% { box-shadow: 0 0 0 0 rgba(237, 225, 158, .6); }
  50% { box-shadow: 0 0 0 5px rgba(237, 225, 158, 0); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .82; transform: scale(1.035); }
}
@keyframes glitch {
  0% { transform: translate(0); }
  25% { transform: translate(3px, -2px) skewX(-3deg); }
  50% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, 1px) skewX(2deg); }
  100% { transform: translate(0); }
}
@keyframes shake-cell {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, -1px); }
}
.cell.shaking, .cell.shake { animation: shake-cell .18s steps(2) infinite; }

/* Screen shake всего поля */
@keyframes screen-shake {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-5px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-4px, -2px); }
  80% { transform: translate(3px, 4px); }
}
#field-wrap.shake-sm { animation: screen-shake .35s steps(5) ease-out; }
#field-wrap.shake-lg { animation: screen-shake .6s steps(6) ease-out; }

/* ══════════ СУЩНОСТИ (юниты, враги) ══════════ */
.unit {
  position: absolute;
  width: calc(var(--cell) * .62); height: calc(var(--cell) * .62);
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .5);
  transform: translate(-50%, -50%);
  z-index: 10;
  transition: filter .15s;
}
.unit.worker {
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.65));
}
.unit.moving { animation: walk-bob .34s steps(2) infinite; }
.unit.digging { animation: dig-shake .22s steps(2) infinite; }

.unit.soldier {
  filter: drop-shadow(2px 3px 0 rgba(0,0,0,.65)) drop-shadow(0 0 6px rgba(237, 225, 158, .7));
  z-index: 11;
}
.unit.enemy {
  z-index: 12;
  pointer-events: auto;        /* ЛКМ по противнику = приказ солдатам */
  cursor: crosshair;
  filter: saturate(1.25) drop-shadow(2px 3px 0 rgba(0,0,0,.65)) drop-shadow(0 0 9px rgba(180, 82, 82, .9));
}
.unit.enemy.strong {
  filter: saturate(1.35) drop-shadow(2px 3px 0 rgba(0,0,0,.7)) drop-shadow(0 0 15px rgba(207, 138, 203, .9));
}

.unit.rise { animation: rise-from-ground .5s steps(5) var(--spring); }
.unit.lunge { animation: lunge .15s steps(3) ease-out; }
.unit.dmg-flash { animation: hit-flash .25s steps(3) ease-out; }
.unit.pop-in { animation: pop-in .4s steps(4) var(--spring); }
.unit.spawn-flash { animation: spawn-flash .5s steps(4) ease-out; }

@keyframes walk-bob {
  0%, 100% { transform: translate(-50%, -50%) scale(1, 1); }
  50% { transform: translate(-50%, -54%) scale(.92, 1.1); }
}
@keyframes dig-shake {
  0%, 100% { transform: translate(-50%, -50%) rotate(-6deg); }
  50% { transform: translate(-50%, -50%) rotate(6deg); }
}
@keyframes rise-from-ground {
  0% { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
  60% { transform: translate(-50%, -50%) scaleY(1.15); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes lunge {
  0% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.3) rotate(8deg); }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes hit-flash {
  0% { filter: brightness(4) drop-shadow(0 0 12px #fff); }
  100% { filter: brightness(1); }
}
@keyframes pop-in {
  0% { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}
@keyframes spawn-flash {
  0% { filter: brightness(6) drop-shadow(0 0 26px var(--gold)); transform: translate(-50%,-50%) scale(.4); }
  100% { filter: brightness(1); transform: translate(-50%,-50%) scale(1); }
}

/* ══════════ ПРОГРЕСС-БАРЫ И КОЛЬЦА ══════════ */
.dig-ring {
  position: absolute;
  width: 30px; height: 30px;
  border-radius: 3px;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; justify-content: center;
  background: conic-gradient(var(--gold) 0deg, rgba(242,240,229,.15) 0deg);
  border: 2px solid var(--line-lit);
  z-index: 20; pointer-events: none;
}
.dig-ring::after {
  content: ''; position: absolute; inset: 4px;
  background: var(--bg);
}
.dig-num {
  position: relative; z-index: 2;
  font-size: 11px; font-weight: 900; color: var(--gold);
  text-shadow: 1px 1px 0 var(--shadow);
}

.progress-bar {
  position: absolute;
  width: calc(var(--cell) * .85); height: 8px;
  transform: translate(-50%, -50%);
  border: 2px solid var(--line-lit);
  background: var(--bg);
  overflow: visible; z-index: 20;
}
.progress-bar .pb-fill {
  display: block; height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--gold) 0 8px, var(--gold-deep) 8px 10px);
  transition: width .25s steps(5);
}
.progress-bar .pb-num {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-size: 10px; font-weight: 900; color: var(--gold);
  text-shadow: 1px 1px 0 var(--shadow);
}
.progress-bar i { display: none; }

/* ══════════ ВСПЛЫВАЮЩИЕ ЦИФРЫ ══════════ */
.float-text {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font);
  font-weight: 900; font-size: 15px; white-space: nowrap;
  text-shadow: -2px -2px 0 var(--shadow), 2px -2px 0 var(--shadow),
               -2px 2px 0 var(--shadow), 2px 2px 0 var(--shadow),
               3px 3px 0 rgba(0,0,0,.55);
  z-index: 60; pointer-events: none;
  animation: float-up .7s ease-out forwards;
}
.float-text.ft-mat  { color: var(--red); }
.float-text.ft-food { color: var(--green-lit); }
.float-text.ft-gold { color: var(--gold); }
.float-text.ft-white { color: var(--white); }
.float-text.ft-dmg, .float-text.ft-damage { color: var(--gold-deep); }
.float-text.ft-hurt { color: var(--red); }
.float-text.ft-big {
  font-size: 22px;
  text-shadow: 0 0 16px rgba(237, 225, 158, .9), -2px -2px 0 var(--shadow), 2px 2px 0 var(--shadow), 4px 4px 0 rgba(0,0,0,.55);
  animation: float-up-big .85s ease-out forwards;
}

@keyframes float-up {
  0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; }
  22% { transform: translate(-50%, -62%) scale(1.2); opacity: 1; }
  45% { transform: translate(-50%, -72%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -135%) scale(1); opacity: 0; }
}
@keyframes float-up-big {
  0% { transform: translate(-50%, -50%) scale(.3) rotate(-8deg); opacity: 0; }
  22% { transform: translate(-50%, -64%) scale(1.25) rotate(3deg); opacity: 1; }
  55% { transform: translate(-50%, -82%) scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: translate(-50%, -155%) scale(1.05) rotate(2deg); opacity: 0; }
}

/* ══════════ ПАРТИКЛЫ ══════════ */
.particle {
  position: absolute;
  border-radius: 1px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 55;
  animation: particle-fly var(--pl, 700ms) ease-out forwards;
}
@keyframes particle-fly {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 20px)), calc(-50% + var(--dy, 20px))) scale(.2); opacity: 0; }
}

/* ══════════ ВИНЬЕТКИ И ЭФФЕКТЫ ЭКРАНА ══════════ */
#vignette {
  position: fixed; inset: 0; pointer-events: none; z-index: 70;
  opacity: 0;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(180, 82, 82, .55) 100%);
  transition: opacity .5s steps(4);
}
#vignette.danger, #vignette.v-danger, #vignette.danger-pulse {
  opacity: 1;
  animation: vignette-pulse 1.4s steps(3) infinite;
}
#vignette.gold, #vignette.v-gold {
  opacity: 1;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(237, 225, 158, .75) 100%);
  animation: vignette-pulse 1.2s steps(3) infinite;
}
@keyframes vignette-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* Пульсация тревоги орбов */
.orb.pulse { animation: orb-pulse .3s steps(3) ease-out; }
@keyframes orb-pulse {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.orb.warn { animation: orb-warn 1s steps(3) infinite; }
@keyframes orb-warn {
  0%, 100% { box-shadow: 3px 3px 0 rgba(0,0,0,.5), 0 0 12px rgba(180, 82, 82, .5); }
  50% { box-shadow: 3px 3px 0 rgba(0,0,0,.5), 0 0 30px rgba(180, 82, 82, 1); }
}
.orb.max-flash { animation: max-flash .5s steps(4); }
@keyframes max-flash {
  0% { filter: brightness(2.5); transform: scale(1.25); }
  100% { filter: brightness(1); transform: scale(1); }
}

/* Flip-анимация цифр */
.flip { animation: flip-num .3s steps(3); }
@keyframes flip-num {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); opacity: .25; }
  100% { transform: rotateX(0); }
}

/* Тряска карточки при нехватке ресурсов */
.card.shake-red { animation: card-shake .4s steps(4); border-color: var(--red) !important; }
@keyframes card-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-7px); }
  40% { transform: translateX(7px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* Вдавливание кнопок + ripple */
.tab-btn, .sb-btn { position: relative; overflow: hidden; }
.ripple {
  animation: ripple .35s steps(4);
}
@keyframes ripple {
  0% { box-shadow: 0 0 0 0 rgba(237, 225, 158, .5); }
  100% { box-shadow: 0 0 0 14px rgba(237, 225, 158, 0); }
}

/* Ударная волна (кольцо) */
.shock-ring {
  position: absolute;
  width: 20px; height: 20px;
  border-radius: 3px;
  border: 3px solid var(--gold);
  transform: translate(-50%, -50%);
  z-index: 50; pointer-events: none;
  animation: shock-expand .6s steps(6) ease-out forwards;
}
.shock-ring.white { border-color: var(--white); }
.shock-ring.red { border-color: var(--red); }
@keyframes shock-expand {
  0% { width: 16px; height: 16px; opacity: 1; }
  100% { width: 150px; height: 150px; opacity: 0; }
}

/* Вспышка клетки */
.cell.flashing, .cell.dmg-flash { animation: cell-flash .3s steps(3) ease-out; }
@keyframes cell-flash {
  0% { filter: brightness(3.2); }
  100% { filter: brightness(1); }
}

/* Появление юнита */
.unit.pop-in { animation: pop-in .4s steps(4) var(--spring); }

/* Оверлей кулдауна модификаторов */
.card-cooldown {
  position: absolute; inset: 0;
  background: rgba(20, 18, 28, .78);
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 900; color: var(--gold);
  letter-spacing: 1px;
}

/* Золотая волна победы */
.wave-gold {
  position: fixed; inset: 0; z-index: 94; pointer-events: none;
  background: linear-gradient(120deg, transparent 20%, rgba(237, 225, 158, .55) 50%, transparent 80%);
  animation: wave-sweep 1.4s steps(14) ease-out forwards;
}
@keyframes wave-sweep {
  0% { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* ══════════ СУНДУКИ И ВЫБОР БОНУСА ══════════ */

/* Клетка с сундуком: золотое сияние, строить нельзя */
.cell.chest {
  background: linear-gradient(150deg, var(--gold-deep) 0 52%, var(--red-deep) 52% 100%);
  border-color: var(--gold);
}
.cell.chest .chest-icon {
  animation: chest-bounce 1.4s steps(4) infinite;
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55)) drop-shadow(0 0 12px rgba(237, 225, 158, .8));
}
.cell.chest.chest-glow {
  box-shadow: 0 0 22px rgba(237, 225, 158, .85), inset 0 0 14px rgba(237, 225, 158, .35);
}
@keyframes chest-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.08); }
}

/* Модалка сундука */
.chest-box {
  width: min(760px, 94vw);
  border-color: var(--gold);
  box-shadow: 8px 8px 0 rgba(0,0,0,.55), 0 0 60px rgba(237, 225, 158, .35);
}
.chest-box h2 { color: var(--gold); letter-spacing: 4px; }
.chest-cards {
  display: flex; gap: 14px; justify-content: center;
  flex-wrap: wrap;
  margin-top: 6px;
}
.card.chest-card {
  min-width: 190px; max-width: 210px;
  padding: 16px 14px;
  border-color: var(--gold-deep);
  background: linear-gradient(180deg, var(--bg-soft) 0 52%, var(--bg-mid) 52% 100%);
  animation: card-in .3s ease-out both;
}
.card.chest-card:hover {
  border-color: var(--gold);
  transform: translate(-2px, -5px);
  box-shadow: 8px 10px 0 rgba(0,0,0,.5), 0 0 26px rgba(237, 225, 158, .5);
}
.card.chest-card .card-icon { font-size: 34px; }
.card.chest-card .card-name { font-size: 11px; color: var(--gold); }
.card.chest-card .card-desc { font-size: 10px; opacity: .9; }

/* Заглушка пустой вкладки модификаторов */
.card.empty-mods {
  cursor: help;
  border-style: dashed;
  border-color: var(--line-lit);
  opacity: .85;
}

/* Тикер статистики */
.stat-row b.tick { animation: flip-num .35s steps(3); }

/* ══════════ ПОСТРОЙКИ: ВИЗУАЛЬНОЕ РАЗЛИЧИЕ ТИПОВ ══════════ */
.cell.building-townhall {
  background: linear-gradient(150deg, var(--gold-deep) 0 48%, var(--red-deep) 48% 100%);
  border-color: var(--gold);
  box-shadow: 0 0 16px rgba(237, 225, 158, .5), inset 2px 2px 0 rgba(0,0,0,.35);
}
.cell.building-mason {
  background: linear-gradient(150deg, var(--stone-lit) 0 48%, var(--stone) 48% 100%);
  border-color: var(--stone-lit);
}
.cell.building-farm {
  background: linear-gradient(150deg, var(--green) 0 48%, var(--green-lit) 48% 100%);
  border-color: var(--green-lit);
}
.cell.building-market {
  background: linear-gradient(150deg, var(--gold) 0 48%, var(--gold-deep) 48% 100%);
  border-color: var(--gold);
}
.cell.building-house {
  background: linear-gradient(150deg, #a77b5b 0 48%, var(--red-deep) 48% 100%);
  border-color: var(--gold-deep);
}
.cell.building-barracks {
  background: linear-gradient(150deg, var(--red) 0 48%, var(--line) 48% 100%);
  border-color: var(--red);
  box-shadow: 0 0 12px rgba(180, 82, 82, .45), inset 2px 2px 0 rgba(0,0,0,.35);
}

/* Иконка постройки внутри клетки */
.cell .b-icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--cell) * .58);
  filter: drop-shadow(2px 2px 0 rgba(0,0,0,.55));
  z-index: 3;
  pointer-events: none;
}
.cell.grow .b-icon { animation: building-grow .35s steps(4) var(--spring); }

/* Трещины при ломке (по 25% прогресса) */
.cell.cracked-1 .crack.c1,
.cell.cracked-2 .crack.c1,
.cell.cracked-2 .crack.c2,
.cell.cracked-3 .crack.c1,
.cell.cracked-3 .crack.c2,
.cell.cracked-3 .crack.c3 { display: block; }

/* Стаггер появления карточек (slide-up + fade) */
.card.card-in { animation: card-in .25s ease-out both; }
@keyframes card-in {
  0% { transform: translateY(16px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Сквозной пиксельный сканлайн на весь экран */
#app::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  background: repeating-linear-gradient(0deg,
    rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply;
}