.dashboard[data-game="bankrobbery"] {
  --game-accent: #b9ff27;
  --game-dark: #316c14;
  --game-soft: #17331e;
}

.game-tile.bankrobbery {
  background: #dfefff url("Bank%20Robbery/bg/background.png") center / cover no-repeat;
  box-shadow: 0 10px 0 #213245, 0 22px 40px rgba(0, 0, 0, .36);
}

.game-tile.bankrobbery::before {
  background: linear-gradient(90deg, rgba(10, 24, 38, .84), rgba(10, 24, 38, .14) 72%);
}

.game-tile.bankrobbery.selected { outline-color: #b9ff27; }
.bankrobbery .game-logo b { color: #b9ff27; }
.game-cover-bankrobbery img { width: 100%; height: 100%; object-fit: cover; opacity: .72; }

.dashboard[data-game="bankrobbery"] .game-screen {
  background: #dcecff;
}

.dashboard[data-game="bankrobbery"] .game-screen::after {
  opacity: .42;
  background-color: #dcecff;
  background-image: url("Bank%20Robbery/bg/background.png");
  background-position: center;
  background-size: cover;
}

.dashboard[data-game="bankrobbery"] .game-screen::before {
  background: linear-gradient(rgba(238, 248, 255, .2), rgba(10, 28, 43, .5));
}

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

.dashboard[data-game="bankrobbery"] .slot-heading {
  padding: 12px 18px;
  border: 3px solid #14283c;
  border-radius: 20px;
  color: #fff;
  background: rgba(12, 31, 48, .88);
  box-shadow: 0 7px 0 rgba(5, 15, 25, .72);
}

.dashboard[data-game="bankrobbery"] .machine-shell {
  width: min(100%, 1120px);
  aspect-ratio: 1672 / 941;
  margin: 18px auto 20px;
  padding: 2.8% 0;
  border: 0;
  border-radius: 30px;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
}

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

.dashboard[data-game="bankrobbery"] .reels {
  width: min(66%, 720px);
  aspect-ratio: 5 / 4;
  margin: 0 auto;
  gap: 0;
  filter: drop-shadow(0 7px 7px rgba(6, 24, 35, .3));
}

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

.dashboard[data-game="bankrobbery"] .machine-shell[data-rows="4"] .reel > img.reel-symbol,
.dashboard[data-game="bankrobbery"] .game-screen .machine-shell[data-rows="4"] .reel > img.reel-symbol {
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 5px 2px rgba(4, 20, 29, .38));
}

.dashboard[data-game="bankrobbery"] .reel.winning {
  z-index: 2;
  background: radial-gradient(circle, rgba(190, 255, 50, .42), transparent 68%);
  animation: bank-symbol-win .65s ease-in-out infinite alternate;
}

.dashboard[data-game="bankrobbery"] .reel.bonus-hit {
  z-index: 3;
  background: radial-gradient(circle, rgba(255, 226, 63, .7), transparent 72%);
  animation: bank-bonus-hit .58s ease-in-out 3;
}

.dashboard[data-game="bankrobbery"] .free-spins-banner,
.dashboard[data-game="bankrobbery"] .bonus-buy-row {
  border-color: #1c3c2e;
  background: rgba(10, 32, 35, .9);
}

.dashboard[data-game="bankrobbery"] .spin-button,
.dashboard[data-game="bankrobbery"] #buy-bonus-button {
  color: #10220a;
  background: #b9ff27;
  box-shadow: 0 6px 0 #376f16;
}

.history-game.bankrobbery {
  border-color: #78bb25;
  color: #efffc7;
  background: #234619;
}

.bank-robbery-overlay {
  position: absolute;
  z-index: 12;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}

.bank-thief {
  --bank-facing: 1;
  position: absolute;
  z-index: 4;
  left: calc(var(--bank-column) * 20%);
  top: calc(var(--bank-row) * 25%);
  display: grid;
  place-items: center;
  width: 40%;
  height: 50%;
  border: clamp(3px, .42vw, 6px) solid #eaff9a;
  border-radius: 19%;
  background: radial-gradient(circle, rgba(67, 100, 38, .97), rgba(7, 23, 21, .995));
  box-shadow:
    0 0 0 4px #1d3b31,
    0 0 0 7px rgba(255, 211, 55, .9),
    0 0 30px 12px rgba(185, 255, 39, .55),
    inset 0 0 25px rgba(235, 255, 174, .4);
  backface-visibility: hidden;
  isolation: isolate;
  transform: translate3d(0, 0, 0);
  transition:
    left .5s cubic-bezier(.22, 1, .36, 1),
    top .5s cubic-bezier(.22, 1, .36, 1),
    opacity .55s ease,
    transform .55s ease;
  will-change: left, top, transform;
}

.bank-thief img {
  display: block;
  width: 108%;
  height: 108%;
  max-width: none;
  object-fit: contain;
  backface-visibility: hidden;
  filter: drop-shadow(0 8px 3px rgba(0, 0, 0, .45));
  transform: translateZ(0) scaleX(var(--bank-facing));
  transform-origin: 50% 76%;
  will-change: transform;
}

.bank-thief.walking img { animation: bank-thief-walk .46s cubic-bezier(.45, 0, .55, 1) infinite; }
.bank-thief.catching { animation: bank-catch-frame .68s ease-out; }
.bank-thief.empty-catch { filter: grayscale(.45); animation: bank-empty-catch .55s ease-in-out 2; }
.bank-thief.exit { opacity: 0; transform: translateY(-22%) scale(.82); transition: opacity .55s ease, transform .55s ease; }

.bank-multiplier-token {
  position: absolute;
  z-index: 3;
  left: calc(var(--bank-column) * 20% + 1%);
  top: calc(var(--bank-row) * 25% + 1%);
  display: grid;
  place-items: center;
  width: 18%;
  height: 23%;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .42));
  animation: bank-token-float .72s ease-in-out infinite alternate;
}

.bank-multiplier-token img { width: 100%; height: 100%; object-fit: contain; }
.bank-multiplier-token.dropping {
  z-index: 7;
  animation: bank-token-drop .68s var(--bank-drop-delay) cubic-bezier(.16, .76, .2, 1.08) both;
}
.bank-multiplier-token.caught { z-index: 5; animation: bank-token-caught .62s ease-in forwards; }

.reels.bank-multiplier-phase .reel:not(.bank-thief-zone) > img.reel-symbol {
  animation: bank-symbol-phase-out .34s ease-in both;
}
.reel.bank-thief-zone {
  background: rgba(7, 23, 21, .94) !important;
  box-shadow: inset 0 0 0 3px rgba(235, 255, 172, .72) !important;
}

.dashboard[data-game="bankrobbery"] .reel.bank-thief-zone > img.reel-symbol {
  opacity: 0 !important;
  transform: scale(.72);
  transition: opacity .2s ease, transform .26s ease;
}

.bank-cash-rain {
  position: absolute;
  z-index: 10;
  inset: -24% 0 0;
  overflow: hidden;
}

.bank-cash-rain img {
  position: absolute;
  top: -12%;
  left: var(--cash-left);
  width: var(--cash-size);
  height: var(--cash-size);
  object-fit: contain;
  animation: bank-cash-fall 1.25s var(--cash-delay) cubic-bezier(.25, .58, .5, 1) forwards;
}

@keyframes bank-symbol-win {
  to { filter: brightness(1.22) drop-shadow(0 0 10px #b9ff27); transform: scale(1.07); }
}

@keyframes bank-bonus-hit {
  50% { filter: brightness(1.32) drop-shadow(0 0 16px #fff36d); transform: scale(1.13) rotate(-3deg); }
}

@keyframes bank-thief-walk {
  0%, 100% { transform: translate3d(-.8%, 1.2%, 0) rotate(-.7deg) scaleX(var(--bank-facing)); }
  25% { transform: translate3d(0, -2.7%, 0) rotate(.45deg) scaleX(var(--bank-facing)); }
  50% { transform: translate3d(.8%, .4%, 0) rotate(.7deg) scaleX(var(--bank-facing)); }
  75% { transform: translate3d(0, -2.2%, 0) rotate(-.35deg) scaleX(var(--bank-facing)); }
}

@keyframes bank-token-float {
  to { transform: translateY(-7%) scale(1.05); filter: drop-shadow(0 0 11px #fff58a); }
}

@keyframes bank-symbol-phase-out {
  to { opacity: 0; transform: translateY(12%) scale(.72); filter: brightness(1.65) blur(4px); }
}

@keyframes bank-token-drop {
  0% { opacity: 0; transform: translateY(-330%) scale(.72) rotate(-12deg); filter: blur(3px) brightness(1.8); }
  72% { opacity: 1; transform: translateY(10%) scale(1.08) rotate(3deg); filter: blur(0) brightness(1.25); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: drop-shadow(0 5px 4px rgba(0, 0, 0, .42)); }
}

@keyframes bank-token-caught {
  60% { opacity: 1; transform: scale(1.55) rotate(12deg); }
  to { opacity: 0; transform: translateY(45%) scale(.25) rotate(28deg); }
}

@keyframes bank-catch-frame {
  35% { border-color: #fff; filter: brightness(1.35); transform: scale(1.08); }
}

@keyframes bank-empty-catch {
  50% { transform: translateX(-2%) rotate(-1deg); }
}

@keyframes bank-cash-fall {
  to { top: 110%; opacity: .12; transform: rotate(var(--cash-spin)) scale(.72); }
}

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

@media (max-width: 780px) {
  .dashboard[data-game="bankrobbery"] .machine-shell {
    aspect-ratio: 5 / 4;
    padding: 3.5% 0;
    background-size: auto 100%;
  }

  .dashboard[data-game="bankrobbery"] .reels { width: 94%; }
  .bank-thief { border-width: 3px; box-shadow: 0 0 0 2px #1d3b31, 0 0 0 4px #ffd337, 0 0 18px 5px rgba(185, 255, 39, .55); }
  .bank-cash-rain img { --cash-size: 24px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .bank-thief,
  .bank-multiplier-token,
  .bank-cash-rain img {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}