.mcb-casino-title {
  display: none;
  opacity: 0;
}
.home-main {
  text-align: center;
}
.mcb-casino-list {
  margin-bottom: 4rem;
  display: grid;
  place-items: center;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 2.6rem;
  grid-row-gap: 2.6rem;
  perspective: 1500px;
}

.mcb-casino-list a {
  text-decoration: none !important;
}

.mcb-casino-item {
  --mcb-flip-x: 0px;
  --mcb-flip-y: 0px;
  --sq-tilt-x: 0deg;
  --sq-tilt-y: 0deg;
  --sq-shine-x: -140%;
  --sq-shine-o: 0;

  --frame-src: var(--sq-card-frame);
  --frame-slice: 25;
  background-image: var(--sq-card-texture),
    linear-gradient(0deg, rgba(97, 10, 65, 1) 0%, rgba(199, 21, 133, 1) 100%);
  background-position: center, center;
  background-size: cover, cover;
  background-blend-mode: multiply;
  position: relative;
  width: 300px;
  height: 420px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  padding: 17px;
  overflow: hidden;
  /* 3D context for faces */
  transform-style: preserve-3d;
  transform-origin: center;
  transform: translate3d(var(--mcb-flip-x), var(--mcb-flip-y), 0)
    rotateY(180deg) rotateX(var(--sq-tilt-x)) rotateY(var(--sq-tilt-y));
  will-change: transform, opacity;
  contain: layout paint;
  isolation: isolate;
  transition: transform 650ms cubic-bezier(0.18, 1.05, 0.32, 1),
    box-shadow 0.25s, opacity 400ms ease-out;
}

.mcb-casino-item::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    transparent 20%,
    rgba(255, 255, 255, 0.22) 45%,
    transparent 70%
  );
  opacity: var(--sq-shine-o);
  transform: translateX(var(--sq-shine-x)) rotate(10deg) scaleY(1.2);
  transition: transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1),
    opacity 250ms ease-out;
  pointer-events: none;
  z-index: 0;
}

.mcb-casino-item:focus-visible {
  outline: 2px solid var(--queenYellow);
  outline-offset: 6px;
}
/* Flip the whole card to reveal front */
.mcb-casino-item.is-in-view {
  transform: translate3d(var(--mcb-flip-x), var(--mcb-flip-y), 0) rotateY(0deg)
    rotateX(var(--sq-tilt-x)) rotateY(var(--sq-tilt-y));
}
/* On hover, bring the front-facing card closer */
.mcb-casino-item.is-in-view:where(:hover, :focus-visible) {
  --sq-shine-x: 140%;
  --sq-shine-o: 1;
  --sq-tilt-x: 2deg;
  --sq-tilt-y: -3deg;
  transform: translate3d(var(--mcb-flip-x), var(--mcb-flip-y), 0) rotateY(0deg)
    rotateX(var(--sq-tilt-x)) rotateY(var(--sq-tilt-y)) translateY(-8px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(253, 221, 11, 0.12);
}
/* Hide the back image after the half-turn */
.mcb-casino-item.is-in-view::before {
  opacity: 0;
}
.mcb-casino-body {
  position: relative;
  border-radius: 10px;
  width: calc(100% - 70px);
  height: calc(100% - 70px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 10px 5px;
  border: 30px solid transparent;
  border-image-source: var(--frame-src);
  border-image-slice: var(--frame-slice);
  border-image-repeat: stretch;
  /* front face */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: rotateY(0deg);
  transform-style: preserve-3d;
  z-index: 1;
  opacity: 0;
  transition: opacity 240ms linear 120ms;
  pointer-events: none;
}
/* Ensure children don't bleed through when back face is showing */
.mcb-casino-body * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
/* On reveal, rotate front into view */
.mcb-casino-item.is-in-view .mcb-casino-body {
  transform: rotateY(0deg);
  opacity: 1;
  pointer-events: auto;
}

/* During sorting, prefer a shorter transform transition */
.mcb-sorting .mcb-casino-item {
  transition: transform 320ms cubic-bezier(0.2, 0.6, 0.2, 1), box-shadow 0.25s,
    opacity 400ms ease-out;
}

.mcb-sorting .mcb-casino-item {
  --sq-tilt-x: 0deg;
  --sq-tilt-y: 0deg;
}

.mcb-casino-item.mcb-top1 {
  --frame-src: var(--sq-card-top1-frame);
  --frame-slice: 25;
}
.mcb-casino-item.mcb-top1 .mcb-casino-body::before,
.mcb-casino-item.mcb-top1 .mcb-casino-body::after {
  content: '';
}
.mcb-casino-item.mcb-top2 {
  --frame-src: var(--sq-card-top2-frame);
  --frame-slice: 25;
}
.mcb-casino-item.mcb-top2 .mcb-casino-body::before,
.mcb-casino-item.mcb-top2 .mcb-casino-body::after {
  content: '';
}
.mcb-casino-item.mcb-top3 {
  --frame-src: var(--sq-card-top3-frame);
  --frame-slice: 25;
}
.mcb-casino-item.mcb-top3 .mcb-casino-body::before,
.mcb-casino-item.mcb-top3 .mcb-casino-body::after {
  content: '';
}
.mcb-casino-body::before,
.mcb-casino-body::after {
  content: attr(data-rank);
  position: absolute;
  font-weight: 500;
  font-size: 1.875rem;
  color: var(--queenWhite);
  line-height: 1;
  pointer-events: none;
  z-index: 2;
}
.mcb-casino-body::before {
  top: -20px;
  left: -20px;
}
.mcb-casino-body::after {
  bottom: -20px;
  right: -20px;
  transform: rotate(180deg);
}
.mcb-casino-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 150px;
  max-height: 90px;
}
.mcb-casino-image img {
  width: 100%;
}
.mcb-casino-order {
  display: none;
}
.mcb-casino-bonuses {
  display: flex;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--queenWhite);
  min-height: 28px;
  align-items: center;
}
.mcb-casino-bonuses__bonus,
.mcb-casino-bonuses__spins {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mcb-casino-freespins {
  color: var(--queenYellow);
  font-size: 1.75rem;
  font-weight: 700;
  min-height: 1.4em;
  display: flex;
  align-items: center;
}
.mcb-casino-wager {
  color: var(--queenWhite);
  font-size: 1.75rem;
  font-weight: 700;
  min-height: 1.4em;
  display: flex;
  align-items: center;
}
.mcb-casino-features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  text-align: start;
  list-style-position: inside;
  min-height: calc(3 * 1.4em);
}
.mcb-casino-feature {
  position: relative;
  padding-left: 22px;
  color: var(--queenWhite);
  font-size: 1rem;
  font-weight: 500;
}
.mcb-casino-feature::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background: no-repeat center / contain
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='%23FDDD0B'%3E%3Cpath d='M7 0C3.13425 0 0 3.13425 0 7C0 10.8658 3.13425 14 7 14C10.8658 14 14 10.8658 14 7C14 3.13425 10.8658 0 7 0ZM7 13.125C3.6225 13.125 0.875 10.3775 0.875 7C0.875 3.6225 3.6225 0.875 7 0.875C10.3775 0.875 13.125 3.6225 13.125 7C13.125 10.3775 10.3766 13.125 7 13.125ZM10.066 4.21575C9.99867 4.17173 9.92332 4.14141 9.84427 4.12652C9.76522 4.11162 9.684 4.11245 9.60527 4.12894C9.52654 4.14543 9.45182 4.17728 9.3854 4.22265C9.31897 4.26802 9.26213 4.32603 9.21812 4.39337L6.26413 8.9075L4.85188 7.60025C4.60337 7.371 4.21575 7.38588 3.98563 7.63438C3.7555 7.88288 3.77125 8.26962 4.01975 8.49975L5.97188 10.3057C5.97888 10.3119 5.98763 10.3136 5.99463 10.3197C6.01213 10.3337 6.02263 10.353 6.041 10.3661C6.06725 10.3836 6.097 10.3871 6.125 10.3994C6.15825 10.4151 6.19063 10.43 6.22563 10.4396C6.25975 10.4484 6.293 10.4528 6.328 10.4554C6.37788 10.4606 6.426 10.4606 6.475 10.4536C6.49513 10.4501 6.51438 10.4449 6.5345 10.4396C6.59488 10.4247 6.65088 10.4011 6.706 10.3679C6.71562 10.3617 6.7235 10.3547 6.73313 10.3486C6.769 10.3241 6.8075 10.3057 6.83813 10.2725C6.86 10.2489 6.86963 10.2182 6.88713 10.192C6.888 10.1911 6.88975 10.1903 6.88975 10.1894L10.2428 5.0645C10.3318 4.92848 10.3632 4.76269 10.33 4.60355C10.2969 4.4444 10.2019 4.30492 10.066 4.21575Z'/%3E%3C/svg%3E");
}
.mcb-casino-btntext {
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--queenWhite);
  color: var(--queenPurple);
  font-size: 1.5rem;
  font-weight: 800;
  border-radius: 10px;
  transition: transform 120ms ease, background-color 0.15s, color 0.15s,
    box-shadow 0.15s, text-shadow 0.15s;
  text-shadow: 0 0 0 currentColor;
  min-height: calc(1.2em + 8px);
  perspective: 1500px;
}
.mcb-casino-btntext.sq-cta-attn {
  animation: sq-cta-attn 900ms cubic-bezier(0.2, 0.6, 0.2, 1) 2 both;
}
.mcb-casino-span {
  display: inline-block;
  transform-style: preserve-3d;
}
.mcb-casino-btntext:where(:hover, :focus) {
  background-color: var(--queenPurple);
  color: var(--queenWhite);
  text-shadow: none;
}
.mcb-casino-btntext:active {
  transform: translateY(1px) scale(0.98);
}
.mcb-casino-btntext:focus-visible {
  outline: 2px solid var(--queenYellow);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(253, 221, 11, 0.14);
}
.mcb-casino-btntext:where(:hover, :focus-visible) .mcb-casino-span {
  animation: rotate-x 0.5s ease forwards;
}

@keyframes rotate-x {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(360deg);
  }
}

@keyframes sq-text-pulse {
  0%,
  100% {
    text-shadow: 0 0 0 currentColor;
  }
  50% {
    text-shadow: 0 0 4px currentColor;
  }
}

@keyframes sq-cta-attn {
  0% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 currentColor;
  }
  45% {
    transform: translateY(-1px) scale(1.03);
    text-shadow: 0 0 10px currentColor;
  }
  100% {
    transform: translateY(0) scale(1);
    text-shadow: 0 0 0 currentColor;
  }
}

.mcb-casino-btntext:disabled {
  opacity: 0;
  pointer-events: none;
}

.mcb-casino-cta {
  align-self: stretch;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcb-casino-code {
  min-height: 1.4em;
  border-radius: 10px;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  overflow-wrap: anywhere;
  position: relative;
  display: block;
  overflow: hidden;
}

.mcb-casino-code--empty {
  opacity: 0;
  pointer-events: none;
}

.mcb-casino-code__summary {
  list-style: none;
  min-height: 1.4em;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  padding: 0 10px;
  background-color: var(--queenPurple);
  color: var(--queenWhite);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  white-space: nowrap;
}

.mcb-casino-code__summary::-webkit-details-marker {
  display: none;
}

.mcb-casino-code__summary::marker {
  content: '';
}

.mcb-casino-code__summary:focus-visible {
  outline: 2px solid var(--queenYellow);
  outline-offset: 2px;
}

.mcb-casino-code:where(:hover, :focus-within) .mcb-casino-code__summary {
  outline: 1px solid var(--queenWhite);
}

.mcb-casino-code__label,
.mcb-casino-code__value {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 0;
  max-width: calc(100% - 20px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 300ms ease, filter 300ms ease, transform 300ms ease;
}

.mcb-casino-code__label {
  opacity: 1;
}

.mcb-casino-code__value {
  opacity: 0;
  filter: blur(10px);
  transform: translate(-50%, -50%) scale(0.98);
}

.mcb-casino-code:not([open]) .mcb-casino-code__label {
  opacity: 1;
}

.mcb-casino-code:not([open]) .mcb-casino-code__value {
  opacity: 0;
  filter: blur(10px);
}

.mcb-casino-code[open] .mcb-casino-code__summary {
  background-color: var(--queenWhite);
  color: var(--queenPurple);
  cursor: pointer;
}

.mcb-casino-code[open] .mcb-casino-code__summary:where(:hover, :focus-visible) {
  outline: 1px solid var(--queenPurple);
}

.mcb-casino-code[open] .mcb-casino-code__label {
  opacity: 0;
  filter: blur(10px);
}

.mcb-casino-code[open] .mcb-casino-code__value {
  opacity: 1;
  filter: blur(0);
  transform: translate(-50%, -50%) scale(1);
  -webkit-user-select: all;
  -moz-user-select: all;
  user-select: all;
}

.mcb-casino-code.sq-code-sparkle::before {
  content: '';
  position: absolute;
  inset: -40%;
  pointer-events: none;
  background: radial-gradient(
      circle at 20% 40%,
      rgba(253, 221, 11, 0.75) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 70% 30%,
      rgba(253, 221, 11, 0.55) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(255, 255, 255, 0.45) 0 2px,
      transparent 3px
    ),
    radial-gradient(
      circle at 35% 75%,
      rgba(255, 255, 255, 0.35) 0 2px,
      transparent 3px
    );
  opacity: 0;
  transform: scale(0.7);
  animation: sq-code-sparkle 650ms ease-out both;
}

@keyframes sq-code-sparkle {
  0% {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(0px);
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(1.15);
    filter: blur(1px);
  }
}

#mcb-casino-sortbar {
  width: fit-content;
  margin-inline: auto;
  margin-block: 2rem;
  padding: 8px 16px;
  border-radius: 10px;
  background-color: var(--queenBlack);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
#mcb-casino-sortbar span {
  font-size: 1rem;
  font-weight: 400;
  color: var(--queenWhite);
}
#mcb-casino-sortbar button:last-child {
  min-height: auto;
  padding: 3px 9px;
  font-size: 0.813rem;
}
.sq-reset-icon {
  width: 1.1em;
  height: 1.1em;
  display: block;
  fill: currentColor;
}
.sortbar-btn {
  padding: 0px 8px;
  font-size: 0.875rem;
  font-weight: 400;
  border: 1px solid var(--queenWhite);
  background-color: var(--queenBlack);
  color: var(--queenWhite);
  border-radius: 10px;
  min-height: 30px;
  transition: 0.25s;
}
.sortbar-btn:where(:hover, :focus-visible) {
  color: var(--queenPurple);
}
#mcb-casino-sortbar [data-mcb-sort] {
  position: relative;
  padding-right: 22px;
}
#mcb-casino-sortbar [data-mcb-sort]::before,
#mcb-casino-sortbar [data-mcb-sort]::after {
  content: '';
  position: absolute;
  right: 6px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.35;
}
/* Up arrow */
#mcb-casino-sortbar [data-mcb-sort]::before {
  top: 6px;
  border-bottom: 6px solid currentColor;
}
/* Down arrow */
#mcb-casino-sortbar [data-mcb-sort]::after {
  bottom: 6px;
  border-top: 6px solid currentColor;
}
#mcb-casino-sortbar [data-mcb-sort][data-mcb-dir='asc']::before {
  opacity: 1;
  color: var(--queenPurple);
}
#mcb-casino-sortbar [data-mcb-sort][data-mcb-dir='desc']::after {
  opacity: 1;
  color: var(--queenPurple);
}
/* Improve FLIP animation stability */
/* Disable hover transform override during sorting to avoid transform jumps */
.mcb-sorting .mcb-casino-item.is-in-view:where(:hover, :focus-visible) {
  transform: translate3d(var(--mcb-flip-x), var(--mcb-flip-y), 0) rotateY(0deg)
    translateY(-10px);
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(253, 221, 11, 0.12);
}

@media (max-width: 1240px) {
  .mcb-casino-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 800px) {
  .mcb-casino-list {
    grid-template-columns: repeat(1, 1fr);
  }
  #mcb-casino-sortbar {
    padding: 5px;
    margin-bottom: 1rem;
    gap: 5px;
  }
  .sortbar-btn {
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mcb-casino-btntext {
    animation: none !important;
  }

  .mcb-casino-item::after {
    opacity: 0 !important;
    transition: none !important;
  }

  .mcb-casino-code__summary,
  .mcb-casino-code__label,
  .mcb-casino-code__value {
    transition: none !important;
  }
  .mcb-casino-code.sq-code-sparkle::before {
    animation: none !important;
  }
  /* Stop the outer card from flipping or animating */
  .mcb-casino-item,
  .mcb-casino-item.is-in-view,
  .mcb-casino-item.is-in-view:where(:hover, :focus-visible) {
    transform: translate3d(var(--mcb-flip-x), var(--mcb-flip-y), 0) !important;
    transition: none !important;
    box-shadow: none !important;
  }

  /* Keep inner content static and remove 3D transforms */
  .mcb-casino-item .mcb-casino-body,
  .mcb-casino-item::before {
    transform: none !important;
    transition: none !important;
  }
}