/* Four root destinations and compact animated game covers. */
.bottom-nav.bottom-nav--four-tabs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bottom-nav--four-tabs .nav-item {
  min-width: 0;
  padding-inline: 4px;
}

.app-shell--root .roulette-catalog-page {
  padding-top: 0;
}

.game-preview-list {
  display: grid;
  gap: 14px;
  width: 100%;
  padding-block: 8px 16px;
}

.game-preview {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-width: 0;
  min-height: 124px;
  aspect-ratio: 2.65;
  padding: 20px;
  overflow: hidden;
  border: 1px solid var(--line, rgb(235 242 249 / 8%));
  border-radius: var(--ui-radius-card);
  background: #242a32;
  color: var(--text, var(--ui-text));
  text-align: left;
  cursor: pointer;
  touch-action: manipulation;
}

.game-preview__title {
  position: relative;
  z-index: 1;font-size: var(--ui-size-heading);font-weight: var(--ui-weight-bold);line-height: var(--ui-line-heading);
}

.game-preview:focus-visible {
  outline: 2px solid var(--accent, #a5ed3e);
  outline-offset: 3px;
}

.game-preview:active {
  background: #2b323c;
}

.game-preview--plinko,
.game-preview--plinko:active {
  isolation: isolate;
  background: #c51d3b;
  border-color: rgb(255 165 143 / 38%);
}

.plinko-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.game-preview--plinko .game-preview__title {
  color: #fff7e8;font-size: var(--ui-size-amount);font-weight: var(--ui-weight-bold);letter-spacing: normal;
  text-shadow: 0 1px 3px rgb(47 10 25 / 25%);line-height: var(--ui-line-amount)}

@media (hover: hover) {
  .game-preview:hover { border-color: rgb(235 242 249 / 20%); }
}

/* Keep the original compact banner proportions. */
.game-preview--plinko { aspect-ratio: 2.65; min-height: 124px; }
@media (max-width: 360px) {
  .game-preview--plinko .game-preview__title {font-size: var(--ui-size-heading);line-height: var(--ui-line-heading)}
}

.game-preview--containers,
.game-preview--containers:active {
  isolation: isolate;
  background: #1668b9;
  border-color: rgb(137 183 233 / 32%);
}
.containers-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.game-preview--containers .game-preview__title {
  color: #fff7e8;font-size: var(--ui-size-amount);font-weight: var(--ui-weight-bold);letter-spacing: normal;
  text-shadow: 0 1px 3px rgb(6 24 38 / 35%);line-height: var(--ui-line-amount)}
@media (max-width: 360px) {
  .game-preview--containers .game-preview__title {font-size: var(--ui-size-heading);line-height: var(--ui-line-heading)}
}

.game-preview--chase,
.game-preview--chase:active {
  isolation: isolate;
  background: #7428c8;
  border-color: rgb(213 167 255 / 38%);
}
.chase-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.game-preview--chase .game-preview__title {
  color: #fff7e8;font-size: var(--ui-size-amount);font-weight: var(--ui-weight-bold);letter-spacing: normal;
  text-shadow: 0 1px 3px rgb(27 10 43 / 35%);line-height: var(--ui-line-amount)}
@media (max-width: 360px) {
  .game-preview--chase .game-preview__title {font-size: var(--ui-size-heading);line-height: var(--ui-line-heading)}
}