/* MRWINNER | Slot action overlay, UI-only.
   Gameplay handlers, modes, catalogue data and favourites are untouched. */
.game-card .game-image-wrap {
  isolation: isolate;
}

/* Keep interactive artwork inside its grid cell even with frame settings on. */
body.has-mrw-frames .game-card:hover .game-image-wrap,
body.has-mrw-frames .game-card:focus-within .game-image-wrap {
  transform: none;
}
.game-card:is(:hover,:focus-within) .game-image {
  transform: scale(1.025);
  filter: brightness(.79);
}

.game-card .game-cover-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: clamp(5px, .58vw, 9px);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 100%;
  padding: clamp(6px, 7%, 13px);
  background: linear-gradient(180deg,
    rgba(3, 14, 11, .22) 0%,
    rgba(2, 17, 13, .59) 43%,
    rgba(2, 13, 10, .88) 100%);
  -webkit-backdrop-filter: blur(1.8px);
  backdrop-filter: blur(1.8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, visibility .2s ease;
}
.game-card:hover .game-cover-play,
.game-card:focus-within .game-cover-play {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.game-card .game-cover-play .game-play-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(3px, .45vw, 7px);
  flex: 0 1 auto;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: clamp(29px, 2.65vw, 38px);
  margin: 0;
  padding: 6px 5px;
  border-radius: 999px;
  font: 750 clamp(10px, .75vw, 12px)/1.18 Inter, "Segoe UI", system-ui, sans-serif;
  letter-spacing: .015em;
  white-space: nowrap;
  text-transform: none;
  cursor: pointer;
  transform: none;
  overflow: hidden;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.game-card .game-cover-play .game-play-btn::before {
  content: "▶";
  font-size: .93em;
  line-height: 1;
  font-weight: 400;
}
.game-card .game-cover-play .game-play-btn::after {
  content: " OYUN";
  white-space: pre;
}
.game-card .game-cover-play .game-play-real {
  border: 1px solid rgba(255, 223, 147, .93);
  background: linear-gradient(115deg, #f7dfaa 0%, #e7be72 47%, #bd914b 100%);
  color: #0b2118;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .38), 0 3px 14px rgba(221, 174, 80, .25);
}
.game-card .game-cover-play .game-play-demo {
  border: 1px solid rgba(238, 209, 157, .53);
  background: rgba(3, 17, 13, .9);
  color: #f4e9ce;
  box-shadow: inset 0 1px 0 rgba(255, 242, 205, .055);
}
.game-card .game-cover-play .game-play-demo::before {
  content: "◇";
  font-size: 1.4em;
  line-height: .7;
}
.game-card .game-cover-play .game-play-real:hover:not(:disabled) {
  background: linear-gradient(115deg, #ffe8b8, #f0ce89, #d7a45d);
  box-shadow: 0 0 15px rgba(234, 198, 111, .4);
}
.game-card .game-cover-play .game-play-demo:hover:not(:disabled) {
  background: rgba(19, 50, 36, .96);
  border-color: rgba(247, 220, 167, .8);
}
.game-card .game-cover-play .game-play-btn:focus-visible {
  outline: 2px solid #fff5d4;
  outline-offset: 1px;
}
.game-card .game-cover-play .game-play-btn:disabled {
  cursor: wait;
  opacity: .6;
}

/* Touch screens have no hover: show compact controls within each thumbnail. */
@media (hover: none) and (pointer: coarse) {
  .game-card .game-cover-play,
  .game-card:hover .game-cover-play {
    visibility: visible;
    opacity: 1;
    pointer-events: none;
    flex-direction: row;
    justify-content: center;
    align-items: flex-end;
    gap: 5px;
    padding: 6px;
    background: linear-gradient(180deg, transparent 29%, rgba(2, 10, 8, .23) 54%, rgba(2, 12, 9, .88) 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .game-card .game-cover-play .game-play-btn {
    flex: 1 1 0;
    width: 0;
    min-height: 30px;
    padding: 6px 3px;
    font-size: clamp(9px, 2.6vw, 11px);
    gap: 3px;
    pointer-events: auto;
  }
  .game-card .game-cover-play .game-play-btn::after {
    content: "";
  }
  .game-card .game-cover-play .game-play-demo::before {
    font-size: 1.15em;
  }
  body.has-mrw-frames .game-card:hover .game-image-wrap {
    transform: none;
  }
}
@media (max-width: 420px) and (hover: hover) {
  .game-card .game-cover-play {
    padding: 6px;
    gap: 5px;
  }
  .game-card .game-cover-play .game-play-btn {
    min-height: 30px;
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .game-card .game-cover-play,
  .game-card .game-cover-play .game-play-btn {
    transition: none;
  }
}