.dashboard[data-game="zombietrash"] {
  --game-accent: #a7f25d;
  --game-dark: #173a35;
  --game-soft: #20322d;
}

.game-tile.zombietrash {
  background: #0c252a url("trashzombie/symbols/background.png") center / cover no-repeat;
}

.game-tile.zombietrash::before {
  background: linear-gradient(180deg, rgba(3, 11, 15, .15), rgba(3, 8, 12, .82));
}

.game-tile.zombietrash.selected { outline-color: #a7f25d; }
.zombietrash .game-logo b { color: #bcff70; }
.game-cover-zombietrash img { object-position: 50% 34%; }
.continue-collage img[data-continue-cover="zombietrash"] { object-position: 50% 34%; }

.dashboard[data-game="zombietrash"] .game-screen {
  background: #06171b;
}

.dashboard[data-game="zombietrash"] .game-screen::after {
  background-color: #06171b;
  background-image: url("trashzombie/symbols/background.png");
}

.dashboard[data-game="zombietrash"] .game-screen::before {
  background: rgba(2, 11, 15, .2);
}

.dashboard[data-game="zombietrash"] .slot-card {
  overflow: visible;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard[data-game="zombietrash"] .machine-shell {
  overflow: visible;
  margin: 16px 0 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard[data-game="zombietrash"] .machine-topline,
.dashboard[data-game="zombietrash"] .machine-lights {
  display: none;
}

.dashboard[data-game="zombietrash"] .reels {
  width: min(100%, 940px);
  margin: 0 auto;
  gap: 0;
}

.dashboard[data-game="zombietrash"] .reels::before {
  display: none;
}

.dashboard[data-game="zombietrash"] .reel,
.dashboard[data-game="zombietrash"] .reel.spinning,
.dashboard[data-game="zombietrash"] .machine-shell[data-rows="3"] .reel,
.dashboard[data-game="zombietrash"] .game-screen .machine-shell[data-rows="3"] .reel {
  min-height: 0;
  aspect-ratio: 1;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.dashboard[data-game="zombietrash"] .machine-shell[data-rows="3"] .reel > img.reel-symbol,
.dashboard[data-game="zombietrash"] .game-screen .machine-shell[data-rows="3"] .reel > img.reel-symbol {
  width: 88%;
  height: 88%;
}

.dashboard[data-game="zombietrash"] .reel.winning {
  border: 0;
  box-shadow: none;
  animation: none;
}

.dashboard[data-game="zombietrash"] .reel.bonus-hit {
  border: 0;
  box-shadow: none;
  animation: none;
}

.dashboard[data-game="zombietrash"] .free-spins-banner {
  border-color: rgba(165, 238, 88, .34);
  background: linear-gradient(135deg, rgba(26, 62, 48, .94), rgba(11, 30, 31, .94));
}

.dashboard[data-game="zombietrash"] .bonus-buy-row {
  border-color: rgba(165, 238, 88, .25);
  background: rgba(18, 42, 35, .72);
}

.dashboard[data-game="zombietrash"] .spin-button,
.dashboard[data-game="zombietrash"] #buy-bonus-button {
  color: #0b170b;
  background: linear-gradient(180deg, #caff7a, #86d947);
  box-shadow: 0 5px 0 #47782b, 0 12px 24px rgba(92, 174, 54, .22);
}

.history-game.zombietrash {
  border-color: #5f923f;
  color: #d9ffb1;
  background: #203c27;
}

.zombie-trash-bonus {
  position: fixed;
  z-index: 10000;
  inset: 0;
  overflow: hidden;
  color: #f7ffe9;
  background: #06181a;
  isolation: isolate;
}

.zombie-trash-bonus[hidden] { display: none; }
.zombie-trash-bonus-open { overflow: hidden; }

.ztb-scene,
.ztb-scene::after {
  position: absolute;
  inset: 0;
}

.ztb-scene {
  z-index: -2;
  background: #09282b url("trashzombie/zombiebonusanimation/background.png") center / cover no-repeat;
}

.ztb-scene::after {
  z-index: 2;
  content: "";
  background:
    linear-gradient(180deg, rgba(2, 14, 17, .42), transparent 32%, transparent 68%, rgba(2, 11, 13, .62)),
    radial-gradient(circle at center, transparent 35%, rgba(0, 8, 10, .35));
  pointer-events: none;
}

.ztb-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.ztb-header {
  position: absolute;
  top: clamp(18px, 4vh, 42px);
  right: clamp(18px, 4vw, 54px);
  left: clamp(18px, 4vw, 54px);
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.ztb-header span,
.ztb-score small,
.ztb-final > span {
  display: block;
  color: #c7ff84;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.ztb-header h2 {
  margin: 3px 0 0;
  color: #fff9d8;
  font-size: clamp(1.5rem, 3.6vw, 3.5rem);
  letter-spacing: -.045em;
  line-height: 1;
  text-shadow: 0 5px 18px rgba(0, 0, 0, .55);
}

.ztb-final button {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(222, 255, 180, .26);
  border-radius: 12px;
  color: #ecffd6;
  background: rgba(4, 19, 20, .72);
  cursor: pointer;
  font: inherit;
  font-size: .75rem;
  font-weight: 800;
  backdrop-filter: blur(12px);
}

.ztb-score {
  position: absolute;
  top: clamp(104px, 18vh, 170px);
  left: clamp(18px, 4vw, 54px);
  min-width: 180px;
  padding: 15px 18px;
  border: 1px solid rgba(197, 255, 120, .25);
  border-radius: 17px;
  background: rgba(4, 19, 21, .74);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
  backdrop-filter: blur(12px);
}

.ztb-score strong {
  display: block;
  margin: 2px 0;
  color: #d8ff8c;
  font-size: clamp(2rem, 5vw, 4.2rem);
  line-height: 1;
  text-shadow: 0 0 28px rgba(173, 255, 91, .4);
}

.ztb-score span { color: #fff5c4; font-size: .8rem; font-weight: 800; }

.ztb-zombies {
  position: absolute;
  top: clamp(185px, 35vh, 310px);
  left: clamp(18px, 4vw, 54px);
  display: grid;
  gap: 8px;
}

.ztb-zombies > span {
  display: grid;
  width: 132px;
  height: 32px;
  grid-template-columns: 30px 1fr;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(226, 243, 210, .14);
  border-radius: 9px;
  color: #849a8d;
  background: rgba(4, 18, 20, .66);
  transition: 180ms ease;
  backdrop-filter: blur(8px);
}

.ztb-zombies b {
  display: grid;
  height: 100%;
  place-items: center;
  border-right: 1px solid rgba(226, 243, 210, .12);
  font-size: .7rem;
}

.ztb-zombies i { padding-left: 12px; font-size: .72rem; font-style: normal; font-weight: 900; }
.ztb-zombies > span.active { border-color: #ffd159; color: #fff3bd; transform: translateX(7px); }
.ztb-zombies > span.passed { border-color: #89dd52; color: #dcffbd; background: rgba(30, 75, 39, .78); }
.ztb-zombies > span.failed { border-color: #ff6f55; color: #ffd2c8; background: rgba(92, 29, 25, .82); }

.ztb-message {
  position: absolute;
  right: clamp(18px, 4vw, 54px);
  bottom: clamp(24px, 6vh, 60px);
  left: clamp(18px, 4vw, 54px);
  max-width: 650px;
  margin-inline: auto;
  padding: 15px 22px;
  border: 1px solid rgba(220, 255, 177, .2);
  border-radius: 18px;
  background: rgba(3, 17, 19, .8);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
  text-align: center;
  backdrop-filter: blur(14px);
}

.ztb-message span { display: block; color: #b8ff75; font-size: .67rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.ztb-message strong { display: block; margin-top: 4px; color: #fff9df; font-size: clamp(.9rem, 1.7vw, 1.2rem); }

.ztb-speed {
  position: absolute;
  z-index: 6;
  bottom: clamp(24px, 6vh, 60px);
  left: clamp(18px, 4vw, 54px);
  display: grid;
  gap: 6px;
}

.ztb-speed > span {
  color: #c7d9c2;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px #000;
}

.ztb-speed > div {
  display: flex;
  gap: 4px;
  padding: 4px;
  border: 1px solid rgba(220, 255, 177, .2);
  border-radius: 13px;
  background: rgba(3, 17, 19, .8);
  box-shadow: 0 12px 34px rgba(0, 0, 0, .3);
  backdrop-filter: blur(14px);
}

.ztb-speed button {
  min-width: 84px;
  min-height: 36px;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  color: #aebcaf;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: .7rem;
  font-weight: 900;
}

.ztb-speed button[aria-pressed="true"] {
  color: #122008;
  background: linear-gradient(#d8ff92, #91df4b);
  box-shadow: 0 3px 0 #4f8129;
}

.ztb-final {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(570px, calc(100% - 32px));
  padding: clamp(24px, 5vw, 48px);
  border: 1px solid rgba(211, 255, 152, .34);
  border-radius: 28px;
  background: rgba(4, 20, 20, .93);
  box-shadow: 0 32px 100px rgba(0, 0, 0, .58), inset 0 0 70px rgba(100, 163, 54, .08);
  text-align: center;
  transform: translate(-50%, -45%) scale(.92);
  opacity: 0;
  backdrop-filter: blur(18px);
  transition: 380ms cubic-bezier(.2, .8, .2, 1);
}

.ztb-final[hidden] { display: none; }
.show-final .ztb-final { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.show-final .ztb-message { opacity: 0; }

.ztb-final strong {
  display: block;
  margin: 12px 0 9px;
  color: #e0ff9b;
  font-size: clamp(1.7rem, 5vw, 3.6rem);
  letter-spacing: -.05em;
  line-height: 1.08;
}

.ztb-final small { display: block; color: #c7d9c2; font-size: .86rem; line-height: 1.55; }
.ztb-final button { margin-top: 24px; border: 0; color: #112008; background: linear-gradient(#d8ff92, #91df4b); box-shadow: 0 5px 0 #4f8129; }

.ztb-no-pixi .ztb-scene { background-image: linear-gradient(rgba(2, 14, 17, .12), rgba(2, 14, 17, .35)), url("trashzombie/zombiebonusanimation/background.png"); }

@media (min-width: 1121px) {
  .dashboard[data-game="zombietrash"] .game-screen-inner {
    width: min(1320px, calc(100% - 42px));
  }
}

@media (max-width: 680px) {
  .dashboard[data-game="zombietrash"] .machine-shell {
    margin: 16px 0;
    padding: 0;
  }

  .dashboard[data-game="zombietrash"] .machine-shell[data-rows="3"] .reel-symbol,
  .dashboard[data-game="zombietrash"] .game-screen .machine-shell[data-rows="3"] .reel-symbol {
    width: 100%;
    height: 100%;
  }

  .dashboard[data-game="zombietrash"] .machine-shell[data-rows="3"] .reel > img.reel-symbol,
  .dashboard[data-game="zombietrash"] .game-screen .machine-shell[data-rows="3"] .reel > img.reel-symbol {
    width: 88%;
    height: 88%;
  }

  .ztb-speed {
    right: auto;
    bottom: 164px;
    left: 12px;
  }

  .ztb-speed > span { display: none; }
  .ztb-speed button { min-width: 72px; min-height: 33px; padding: 0 9px; font-size: .63rem; }

  .ztb-score { top: 94px; min-width: 132px; padding: 11px 13px; }
  .ztb-zombies {
    top: auto;
    right: 12px;
    bottom: 118px;
    left: 12px;
    grid-template-columns: repeat(8, 1fr);
    gap: 3px;
  }
  .ztb-zombies > span {
    width: auto;
    height: 35px;
    grid-template-columns: 1fr;
    text-align: center;
  }
  .ztb-zombies b { border: 0; }
  .ztb-zombies i { display: none; }
  .ztb-zombies > span.active { transform: translateY(-5px); }
  .ztb-message { bottom: 18px; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .ztb-zombies > span,
  .ztb-final { transition: none; }
}
