@media (min-width: 769px) {
  .content.casino-content {
    gap: 20px;
    padding: 0;
  }

  .casino-content .mobile-section {
    margin-top: 0;
  }

  .casino-content .mobile-casino-search {
    flex: 0 0 264px;
    height: 46px;
    margin-top: 0;
  }

  .casino-content .mobile-section-head h2 {
    font-size: var(--fs-2xl);
  }
}
@keyframes casino-vertical-shine {
  0% {
    transform: translateX(-130%);
  }
  32%,
  100% {
    transform: translateX(130%);
  }
}


.gb,
.casino-games-section {
  --v: var(--accent);
  --v-ink: var(--on-accent);
  --v-invert: var(--on-accent-invert);
}

.gb {
  margin: 18px var(--mobile-gutter) 0;
  padding: 14px 12px;
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  background: var(--panel);
}

.gb-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 100%;
  min-width: 0;
  margin-bottom: 4px;
}

.gb-head-icon {
  display: block;
  flex: 0 0 auto;
  width: 32px;
  height: 36px;
  object-fit: contain;
}

.gb-head-text {
  min-width: 0;
}

.gb-head-text h2 {
  margin: 0;
  font: 800 17px/1.1 Montserrat, sans-serif;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gb-head-text .casino-games-count {
  display: block;
  margin-top: 3px;
}

.casino-games-count i {
  font-style: normal;
  font-weight: 600;
  opacity: 0.7;
}

.gb-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.gb .casino-search {
  flex: 1 1 100%;
  min-width: 0;
  margin-top: 0;
  background: var(--black-a20);
}

.gb .casino-tool-btn {
  flex: 1 1 auto;
}

.gb-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 38px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--white-a08);
  color: var(--muted);
  font: 700 12px/1 Montserrat, sans-serif;
  cursor: pointer;
  animation: casino-badge-pop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gb-clear:hover {
  background: color-mix(in srgb, var(--v) 26%, var(--panel));
  color: var(--text);
}

.gb .gb-shelf {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  box-shadow: inset 0 1px 0 var(--white-a08);
  animation: casino-shelf-open 280ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.gb .gb-chips {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gb .gb-chips::-webkit-scrollbar {
  display: none;
}

/* The two arrows float over the ends of the strip instead of standing in it:
   one on each side, above the line, so the chips keep the full width and slide
   under them. No chrome of their own — the gradient behind each is the panel
   itself fading in, which is what makes an overflowing chip look like it slips
   inside the edge rather than getting cut off. Each appears only while that
   side has somewhere left to go (`can-prev` / `can-next` from GameBrowser). */
.gb .gb-chips-arrow {
  position: absolute;
  top: 12px;
  bottom: 0;
  z-index: 2;
  flex: none;
  width: 46px;
  height: auto;
  border-radius: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    color 0.18s ease;
}

.gb .gb-chips-arrow.prev {
  left: 0;
  padding-left: 2px;
  justify-items: start;
  background: linear-gradient(90deg, var(--panel) 42%, transparent);
}

.gb .gb-chips-arrow.next {
  right: 0;
  padding-right: 2px;
  justify-items: end;
  background: linear-gradient(270deg, var(--panel) 42%, transparent);
}

.gb .gb-shelf.can-prev .gb-chips-arrow.prev,
.gb .gb-shelf.can-next .gb-chips-arrow.next {
  opacity: 1;
  pointer-events: auto;
}

.gb .gb-chips-arrow:hover {
  background-color: transparent;
  color: var(--text);
}

.gb .gb-chips-arrow svg {
  width: 15px;
  height: 15px;
  stroke-width: 2.4;
}

@media (max-width: 768px) {
  .gb .gb-chips-arrow {
    display: none;
  }
}

@keyframes casino-shelf-open {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

.gb .gb-chips button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;

  flex: 0 0 auto;
  height: 34px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  background: var(--white-a05);
  color: var(--muted);
  font: 700 12px/1 Montserrat, sans-serif;

  white-space: nowrap;
  cursor: pointer;
}

.gb .gb-chips button img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  opacity: 0.7;
  filter: brightness(0) invert(1);
}

.gb .gb-chips button.active {
  color: var(--v-ink);
  background: var(--v);
}

.gb .gb-chips button.active img {
  opacity: 1;
  filter: brightness(0) invert(var(--v-invert));
}

.gb .gb-chips button:not(.active):hover {
  color: var(--text);
  background: var(--white-a14);
}

.gb .gb-chips button:not(.active):hover img {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gb .gb-shelf {
    animation: none;
  }
}

@media (max-width: 768px) {
  .gb .casino-search {
    flex: 0 0 38px;
    gap: 0;
    padding: 0 11px;
    cursor: pointer;
    transition: flex-basis 0.2s ease;
  }

  .gb .casino-search input {
    min-width: 0;
    opacity: 0;
  }

  .gb .casino-search:focus-within,
  .gb .casino-search:has(input:not(:placeholder-shown)) {
    flex: 3 1 120px;
    gap: 8px;
  }

  .gb .casino-search:focus-within input,
  .gb .casino-search:has(input:not(:placeholder-shown)) input {
    opacity: 1;
  }
}

.gb-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.gb-active {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1 1 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gb-active button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--v) 22%, var(--panel));
  color: var(--text);
  font: 700 11px/1 Montserrat, sans-serif;
  cursor: pointer;
  animation: casino-badge-pop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.gb-active button span {
  opacity: 0.6;
}

.gb-active button:hover {
  background: color-mix(in srgb, var(--v) 40%, var(--panel));
}

.gb-active button:hover span {
  opacity: 1;
}

.gb-sort {
  margin-left: auto;
}

.gb-sort select:hover {
  background-color: color-mix(in srgb, var(--v) 22%, var(--panel));
}

.gb-density {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  border-radius: var(--r-sm);
  background: var(--white-a08);
}

.gb-density button {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  color: var(--muted);
  cursor: pointer;
}

.gb-density button.on {
  color: var(--v-ink);
  background: var(--v);
}

.gb .gb-chips button.is-empty:not(.active) {
  opacity: 0.45;
}

.gb .gb-chips button small {
  padding: 2px 5px;
  border-radius: var(--r-xs);
  background: var(--black-a20);
  font: 800 10px/1 Montserrat, sans-serif;
  opacity: 0.85;
}

.gb .gb-chips button.active small {
  background: color-mix(in srgb, var(--v-ink) 18%, transparent);
  opacity: 1;
}
.mobile-section.casino-games-section {
  margin: 0 var(--mobile-gutter);
  width: auto;
  padding: 12px 10px 18px;
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  background: linear-gradient(180deg, var(--bg-deep), var(--panel-2) 320px);
  box-shadow: 0 14px 30px var(--bg-deep-a50);
}

.casino-games-section .casino-game-grid {
  padding-inline: 0;
}

.casino-games-section.is-dense .casino-game-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.casino-tool-btn {
  gap: 8px;
  flex: 1 1 auto;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font: 700 12px/1 Montserrat, sans-serif;
}

.casino-tool-btn:active {
  transform: translateY(1px);
}

.casino-tool-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.casino-providers-btn {
  position: relative;
  overflow: hidden;
}

.casino-providers-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 140% at 50% 0%, var(--accent-a16), transparent 62%);
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}

.casino-providers-btn:hover::before,
.casino-providers-btn.open::before,
.casino-providers-btn.has-selection::before {
  opacity: 1;
}

.casino-providers-btn-icon {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  background: var(--accent-a12);
  transition: border-color 0.18s, background 0.18s;
}

.casino-providers-btn-icon img {
  width: 13px;
  height: 13px;
}

.casino-providers-btn:hover .casino-providers-btn-icon,
.casino-providers-btn.open .casino-providers-btn-icon,
.casino-providers-btn.has-selection .casino-providers-btn-icon {
  background: var(--accent-a16);
}

.casino-providers-btn .casino-btn-chevron {
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.casino-providers-btn.open .casino-btn-chevron {
  transform: rotate(180deg);
}

.casino-providers-btn.open,
.casino-providers-btn.has-selection {
  box-shadow: var(--shadow-accent);
}

.casino-providers-btn em {
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: linear-gradient(180deg, var(--accent-dark), var(--accent));
  color: var(--on-accent);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 800;
  box-shadow: 0 0 10px var(--accent-a45);
  animation: casino-badge-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes casino-badge-pop {
  0% {
    transform: scale(0.4);
  }
  100% {
    transform: scale(1);
  }
}

.casino-dice {
  color: var(--on-accent);
}

.casino-dice.rolling {
  animation: casino-dice-roll 0.48s ease-in-out;
}

@keyframes casino-dice-roll {
  0% {
    transform: rotate(0) scale(1);
  }
  50% {
    transform: rotate(200deg) scale(1.25);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

.cp-modal {
  z-index: 9995;
}

.cp-shell {
  /* A 106-card picker: the extra 160px buys a fifth logo column and stops the
     name list truncating brands like "Backseat Gaming". */
  width: min(880px, 96vw);
  background:
    radial-gradient(520px 240px at 6% -10%, var(--accent-a12), transparent 70%),
    radial-gradient(460px 280px at 100% 0%, var(--blue-a14), transparent 72%),
    var(--panel);
}

.cp-shell::after {
  content: "";
  position: absolute;
  right: -70px;
  bottom: -80px;
  z-index: 0;
  width: 320px;
  height: 320px;
  background: var(--img-art-orb) right bottom / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
}

.cp-shell > * {
  position: relative;
  z-index: 1;
}

.cp-shell .cp-mascot {
  flex: 0 0 auto;
  width: 52px;
  height: 62px;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px var(--black-a50));
}

.cp-body {
  padding-top: 14px;
}

.cp-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0 0 0 auto;
  padding-right: 4px;
}

.cp-stat {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
}

.cp-stat b {
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.cp-stat em {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-style: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.cp-stat-live.is-on b {
  color: var(--accent);
}

.cp-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.cp-search {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  transition: background 0.16s;
}

.cp-search:focus-within {
  background: var(--accent-a12);
}

.cp-search > img {
  width: 16px;
  height: 16px;
  opacity: 0.6;
}

.cp-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--white);
  font: 500 13px Montserrat, sans-serif;
}

.cp-search input::placeholder {
  color: var(--white-a40);
}

.cp-search button {
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-base);
  cursor: pointer;
}

.cp-search button:hover {
  color: var(--text);
}

.cp-sort {
  margin-bottom: 0;
}

.cp-sort .ps-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 7px 13px;
  font-size: var(--fs-base);
  font-weight: 700;
}

.cp-sort .ps-tab img {
  width: 13px;
  height: 13px;
}

.cp-bulk {
  display: flex;
  gap: 6px;
}

.cp-bulk button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 11px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  color: var(--muted);
  font: 700 12px Montserrat, sans-serif;
  cursor: pointer;
  transition: border-color 0.16s, color 0.16s;
}

.cp-bulk button:hover {
  color: var(--text);
}

.cp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.casino-provider-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--text);
  font: 700 11px Montserrat, sans-serif;
  cursor: pointer;
  transition: background 0.16s, border-color 0.16s;
  animation: casino-badge-pop 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.casino-provider-chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 70%, transparent);
}

.casino-provider-chip span {
  font-size: var(--fs-2xs);
  color: color-mix(in srgb, var(--accent) 80%, var(--white));
}

.casino-provider-chip:hover {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.casino-provider-none {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 26px 0;
  color: var(--muted);
  font-size: var(--fs-md);
  text-align: center;
}

.casino-provider-none img {
  width: 92px;
  filter: drop-shadow(0 10px 22px var(--black-a50));
}

.casino-provider-none p {
  margin: 0;
}

.casino-provider-none button {
  height: 32px;
  padding: 0 16px;
  border-radius: var(--r-sm);
  background: var(--accent-a12);
  color: var(--accent);
  font: 700 12px Montserrat, sans-serif;
  cursor: pointer;
  transition: background 0.16s;
}

.casino-provider-none button:hover {
  background: var(--accent-a22);
}

.casino-provider-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
  gap: 8px;
}

.casino-provider-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 96px;
  padding: 14px 10px;
  overflow: hidden;
  border-radius: var(--r-lg);
  /* Duruş hâli düz panel: kart başına ton 138 özdeş kırmızı ışıltı boyuyordu,
     vurgu artık yalnızca hover ve seçim işareti. (Stüdyo başına renk taşıyan
     `--p` değişkeni de gitti — kaynağında zaten sabit `var(--accent)`ti.) */
  background: var(--mobile-panel-2);
  cursor: pointer;
  transition: border-color 0.2s, transform 0.18s, box-shadow 0.2s;
  animation: casino-provider-card-in 0.42s cubic-bezier(0.34, 1.3, 0.64, 1) backwards;
}

.casino-provider-card::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, var(--white-a10), transparent);
  pointer-events: none;
}

.casino-provider-card:hover::after {
  transition: transform 0.6s ease;
  transform: translateX(120%) skewX(-18deg);
}

@keyframes casino-provider-card-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.casino-provider-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px var(--black-a35), 0 0 20px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Stüdyo logosu. Doğrudan çocuk: sayaç rozetindeki elmas bu kuralın dışında.
   Logolar 138 ayrı markadan geliyor — kimi siyah, kimi rengarenk, kimi açık
   zemin için çizilmiş. `brightness(0) invert(1)` hepsini tek bir beyaz
   sözcük-markasına indirir: koyu kartta okunur, ızgara tek dil konuşur. */
.casino-provider-card > img {
  height: 32px;
  max-width: 86%;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.92) drop-shadow(0 2px 8px var(--black-a60));
  transition: transform 0.24s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.casino-provider-card:hover > img {
  transform: scale(1.08);
}

.casino-provider-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--text);
  text-align: center;
  text-shadow: 0 1px 6px var(--black-a60);
}

.casino-provider-count {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: var(--white-a08);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--muted-5);
  transition: background 0.16s, color 0.16s;
}

.casino-provider-count img {
  width: 9px;
  height: 9px;
  opacity: 0.85;
}

/* Selected = one steady ring plus the check. It used to also pulse forever;
   with 106 cards on screen a dozen breathing rings is noise, not a signal. */
.casino-provider-card.selected {
  box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--accent) 62%, transparent), 0 12px 30px color-mix(in srgb, var(--accent) 24%, transparent);
}

.casino-provider-card.selected .casino-provider-count {
  background: color-mix(in srgb, var(--accent) 26%, transparent);
  color: var(--white);
}

.casino-provider-check {
  position: absolute;
  top: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 92%, var(--white)), var(--accent));
  color: var(--bg-deep);
  font-size: var(--fs-sm);
  font-weight: 900;
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 65%, transparent);
  animation: casino-badge-pop 0.24s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@media (prefers-reduced-motion: reduce) {
  .casino-provider-card {
    animation: none;
  }
}

/* Name view. Same card, laid on its side: no logo, no cover art, no 108px
   band — just the name and its count, four to a row. 106 studios go from 27
   rows of scrolling to about 9, and an A–Z scan finally works like a list. */
.casino-provider-grid.cp-text {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
}

.cp-text .casino-provider-card {
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
  min-height: 0;
  padding: 9px 12px 9px 14px;
  border-radius: var(--r-md);
  background: var(--mobile-panel-2);
  box-shadow: inset 2px 0 0 var(--white-a10);
  text-align: left;
}

.cp-text .casino-provider-name {
  overflow: hidden;
  font-size: var(--fs-md);
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cp-text .casino-provider-count {
  flex: 0 0 auto;
}

.cp-text .casino-provider-card:hover {
  transform: none;
  box-shadow: inset 2px 0 0 var(--accent), 0 6px 18px var(--black-a35);
}

/* The check would collide with the count on a 34px-tall row; the ring and the
   tinted face already say "on". */
.cp-text .casino-provider-check {
  display: none;
}

.cp-text .casino-provider-card.selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%), var(--mobile-panel-2);
  box-shadow: inset 3px 0 0 var(--accent), 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
}

/* Both view chips are icon-only: keep them square instead of letting the
   segmented control's text padding stretch them. */
.cp-view .ps-tab {
  padding: 7px 10px;
}

.cp-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--stroke);
  background: var(--bg-deep-a42);
}

.casino-provider-reset {
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  background: var(--chip);
  color: var(--muted);
  font: 800 13px Montserrat, sans-serif;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.casino-provider-reset:hover:not(:disabled) {
  background: var(--panel-3);
  color: var(--text);
}

.casino-provider-reset:disabled {
  opacity: 0.4;
  cursor: default;
}

.casino-provider-apply {
  position: relative;
  flex: 1;
  overflow: hidden;
  font-size: var(--fs-md);
}

.casino-provider-apply::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-110%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, var(--white-a35), transparent);
  pointer-events: none;
}

.casino-provider-apply:hover {
  filter: brightness(1.05);
}

.casino-provider-apply:hover::after {
  transition: transform 0.5s ease;
  transform: translateX(110%) skewX(-18deg);
}

.casino-provider-apply:active {
  transform: translateY(1px);
}

@media (max-width: 768px) {
  .cp-shell .cp-mascot {
    width: 42px;
    height: 50px;
  }

  .cp-body {
    padding-inline: 14px;
  }

  .cp-shell .app-modal-head {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .cp-stats {
    gap: 2px 10px;
    width: 100%;
    margin-left: 0;
  }

  .cp-search {
    flex-basis: 100%;
  }

  .cp-foot {
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  }
}

.casino-games-count {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--muted);
}

.casino-games-count b {
  display: inline-block;
  animation: casino-count-tick 0.3s ease;
}

.casino-games-count b.is-loading {
  color: var(--accent);
  animation: casino-count-wait 0.9s ease-in-out infinite;
}

@keyframes casino-count-tick {
  from {
    transform: translateY(-6px);
    opacity: 0;
  }
}

@keyframes casino-count-wait {
  50% {
    opacity: 0.45;
  }
}

.casino-game-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding-inline: var(--mobile-gutter);
}

.casino-tile-skeleton {
  display: block;
  aspect-ratio: var(--game-art);
  border-radius: var(--r-lg);
  background:
    linear-gradient(100deg, var(--white-a05) 30%, var(--white-a14) 50%, var(--white-a05) 70%)
    0 0 / 260% 100%;
  animation: casino-tile-in 0.3s ease backwards, casino-tile-shimmer 1.1s linear infinite;
}

/* Karo, kapagi boyanana kadar gizli durur; `is-loaded` (GameCard, img.onLoad)
   ziplayarak iceri getirir. Gorseller yuklendikce izgara kendi ritminde dolar. */
.casino-game-card {
  opacity: 0;
}

.casino-game-card.is-loaded {
  opacity: 1;
  animation: casino-tile-in 0.42s cubic-bezier(0.22, 1.4, 0.36, 1) backwards;
}

/* Sonsuz kaydırma ızgarayı biriktiriyor: 5 sayfa = 200 karo, hepsi DOM'da.
   Kapakların ~%24'u vektorlestirilmis SVG (~240 KB, binlerce path) ve tarayici
   bunlari HER boyamada yeniden rasterize ediyor — kasmanin ekran tarafi bu.
   `content-visibility` gorus alani disindaki karonun duzenini ve boyamasini
   atlatir; `auto` yukseklik son olculen degeri hatirladigi icin kaydirma cubugu
   ziplamaz. Yalniz buyuk ızgarada: anasayfanin yatay serileri zaten 10-12 kart. */
.casino-game-grid > .casino-game-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 200px;
}

@keyframes casino-tile-in {
  0% {
    transform: translateY(14px) scale(0.92);
    opacity: 0;
  }
  55% {
    transform: translateY(-5px) scale(1.03);
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

@keyframes casino-tile-shimmer {
  to {
    background-position: -260% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Animasyon kapali; karo yine de kapak yuklenince (is-loaded) gorunur. */
  .casino-game-card,
  .casino-tile-skeleton,
  .casino-games-count b {
    animation: none;
  }
}

.casino-game-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  color: var(--text);
  text-decoration: none;
  /* Hafif zipla: yay egrisi -4px'i biraz asip yerine oturur. */
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.casino-game-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.casino-game-thumb {
  position: relative;
  display: block;

  aspect-ratio: var(--game-art);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--mobile-panel-2);
  box-shadow: var(--shadow-sm);
}

.casino-game-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Kapak gelmedi (404 / bozuk dosya): karo bos ya da kirik ikonlu kalmasin —
   ayni cerceve, ustunde oyunun adini tasiyan levha. Metin `data-title`'dan
   gelir (GameCard), ek dugum yok. Hover katmani ustte kaldigi icin oynat
   dugmesi de aynen calisir. */
.casino-game-card.is-broken .casino-game-thumb img {
  display: none;
}

.casino-game-card.is-broken .casino-game-thumb {
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 88% at 50% 0%, var(--white-a14) 0%, transparent 68%),
    linear-gradient(165deg, var(--mobile-panel-2) 0%, var(--bg-deep) 100%);
}

.casino-game-card.is-broken .casino-game-thumb::after {
  content: attr(data-title);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  padding: 0 10px;
  color: var(--text);
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-shadow: 0 1px 8px var(--bg-deep-a50);
}

.casino-game-hover {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Kapagin yuvarlagini kendi de tasisin: icindeki `backdrop-filter` bazi
     tarayicilarda ust kutunun radius kirpmasini bosa dusuruyor, kose kariyor. */
  border-radius: inherit;
  /* Duz perde yok: kapagin kenarlari acik kalsin, sadece ortada yumusak bir
     odak golgesi dugme ile etiketi tasisin. */
  background: radial-gradient(ellipse 78% 62% at 50% 52%, var(--bg-deep-a50) 0%, transparent 72%);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.casino-game-card:hover .casino-game-hover {
  opacity: 1;
}

/* Cam dugme: kapagi bulaniklastirir, uzerine ince bir beyaz cila birakir. */
.casino-game-play {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  color: var(--white);
  background: var(--white-a35);
  box-shadow:
    inset 0 1px 0 var(--white-a55),
    inset 0 0 0 1px var(--white-a40),
    0 10px 26px var(--bg-deep-a90);
  transform: translateY(6px);
  transition: transform 0.2s ease;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .casino-game-play {
    /* Bulaniklik tutunca dolgu azalir; `brightness` sadece dugmenin altini
       koyultur — beyaz ucgen parlak kapaklarda da ayrisir. */
    background: var(--white-a14);
    backdrop-filter: blur(16px) saturate(170%) brightness(0.55);
    -webkit-backdrop-filter: blur(16px) saturate(170%) brightness(0.55);
  }
}

.casino-game-card:hover .casino-game-play {
  transform: translateY(0);
}

.casino-game-play-label {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--white);
  /* Perde kalkinca etiket parlak kapaklarin uzerinde de okunsun: yakin sert
     golge kenari keser, genis olan zemini bastirir. */
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 2px var(--bg-deep),
    0 2px 12px var(--bg-deep-a90);
}

/* Sayfalama satiri bir dugme: gozlemci kendiliginden cekiyor, dugme de her
   tarayicida calisan zemin -- oyuncu asla takilip kalmiyor. */
.casino-grid-sentinel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 22px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
}

.casino-grid-sentinel:disabled {
  cursor: default;
}

.casino-grid-sentinel:not(:disabled):hover {
  color: var(--white);
}

.casino-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-a25);
  border-radius: 50%;
  animation: casino-spin 0.8s linear infinite;
}

@keyframes casino-spin {
  to {
    transform: rotate(360deg);
  }
}

.casino-grid-end {
  padding: 20px 0;
  color: var(--muted);
  font-size: var(--fs-base);
  text-align: center;
}

.casino-games-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 20px;
  color: var(--muted);
}

.casino-games-empty img {
  width: 132px;
  height: auto;
  filter: drop-shadow(0 14px 30px var(--accent-a25));
}

.casino-games-empty button {
  height: 40px;
  padding: 0 20px;
  border-radius: var(--r-md);
  background: var(--accent-a12);
  color: var(--accent);
  font-weight: 800;
  cursor: pointer;
}

.casino-games-empty button:hover {
  background: var(--accent-a22);
}

@media (min-width: 769px) {
  .casino-content .gb {
    margin: 0;
    padding: 14px;
    border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  }

  .casino-content .mobile-section.casino-games-section {
    margin: -26px 0 0;
    padding: 16px 14px 22px;
    border-radius: 0 0 var(--r-2xl) var(--r-2xl);
  }

  :is(.casino-content, .game-rail.is-lobby) .gb-head {
    flex: 1 1 auto;
    margin-bottom: 0;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb-foot {
    flex-wrap: nowrap;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb-active {
    flex: 1 1 auto;
  }

  .casino-content .casino-games-section.is-dense .casino-game-grid {
    grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
    gap: 10px;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb-tools {
    flex-wrap: nowrap;
    gap: 10px;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb .casino-search {
    flex: 0 0 240px;
    height: 46px;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb .casino-tool-btn,
  :is(.casino-content, .game-rail.is-lobby) .gb-clear {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 18px;
    font-size: var(--fs-md);
  }

  :is(.casino-content, .game-rail.is-lobby) .gb .gb-shelf {
    margin-top: 14px;
    padding-top: 14px;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb .gb-chips {
    gap: 8px;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb .gb-chips-arrow {
    top: 14px;
  }

  :is(.casino-content, .game-rail.is-lobby) .gb .gb-chips button {
    height: 38px;
    padding: 0 14px;
    font-size: var(--fs-base);
  }

  .casino-content .casino-game-grid {
    padding-inline: 0;
  }

  .casino-content .casino-game-grid {
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 16px;
  }
}

.casino-roll {
  position: fixed;
  inset: 0;

  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--bg-a82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: casino-modal-fade 0.18s ease;
}

/* Opened FROM a window — the game lobby's own Random — the draw goes above it:
   every window in the app outranks 10000 (the game window is z 12600), so it
   would otherwise spin behind the surface that asked for it. Same step the auth
   sheet takes (base.css). */
body.app-modal-open .casino-roll {
  z-index: 12700;
}

@media (max-width: 768px) {
  .casino-roll {
    top: var(--mobile-header-h, 0px);
  }
}

.casino-roll-dialog {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(500px, 96vw);
  padding: 22px 22px 22px;
  overflow: hidden;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-a12), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, var(--blue-a14), transparent 64%),
    var(--bg);
  box-shadow: 0 40px 120px var(--black-a60), 0 0 60px var(--accent-a07);
  animation: casino-modal-pop 0.24s ease;
}

.casino-roll-dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 4%, var(--accent) 50%, transparent 96%);
  opacity: 0.8;
}

.casino-roll-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
}

.casino-roll-eyebrow {
  color: var(--muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.casino-roll-reel {
  --cell: 94px;
  --gap: 10px;
  position: relative;
  align-self: stretch;
  margin-top: 18px;
  overflow: hidden;

  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 18%, var(--black) 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, var(--black) 18%, var(--black) 82%, transparent);
}

.casino-roll-marker {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: calc(var(--cell) + 12px);
  height: calc(var(--cell) * 1.34 + 12px);
  border: 2px solid var(--accent);
  border-radius: var(--r-xl);
  transform: translate(-50%, -50%);
  pointer-events: none;
  box-shadow: 0 0 22px var(--accent-a45), inset 0 0 20px var(--accent-a25);
}

.casino-roll-strip {
  display: flex;
  gap: var(--gap);
  padding: 8px 0 8px calc(50% - var(--cell) / 2);
  transform: translate3d(calc(var(--i, 0) * (var(--cell) + var(--gap)) * -1), 0, 0);
  transition-property: transform;
  transition-timing-function: linear;
  will-change: transform;
}

.casino-roll-strip.is-landing {
  transition-timing-function: cubic-bezier(0.16, 0.9, 0.24, 1);
}

.casino-roll-cell {
  flex: 0 0 var(--cell);
  height: calc(var(--cell) * 1.34);
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--panel);
  opacity: 0.3;
  transform: scale(0.85);
  filter: saturate(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease, filter 0.2s ease;
}

.casino-roll-cell.is-center {
  opacity: 1;
  transform: scale(1);
  filter: none;
}

.casino-roll-cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.casino-roll.landed .casino-roll-marker {
  animation: casino-roll-hit 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.casino-roll.landed .casino-roll-cell.is-center {
  transform: scale(1.05);
  box-shadow: 0 12px 34px var(--accent-a45);
  animation: casino-roll-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes casino-roll-hit {
  0% {
    box-shadow: 0 0 0 0 var(--accent-a55), inset 0 0 20px var(--accent-a45);
  }
  100% {
    box-shadow: 0 0 0 26px var(--accent-a00), inset 0 0 20px var(--accent-a25);
  }
}

@keyframes casino-roll-pop {
  0% {
    transform: scale(1);
  }
  55% {
    transform: scale(1.13);
  }
  100% {
    transform: scale(1.05);
  }
}

.casino-roll-caption {
  width: 100%;
  margin-top: 18px;
  text-align: center;
}

.casino-roll-caption h3 {
  overflow: hidden;
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-3xl);
  font-weight: 800;
  line-height: 26px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease, transform 0.3s ease;
}

.casino-roll-caption p {
  overflow: hidden;
  margin: 3px 0 0;
  color: var(--muted-5);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 16px;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.casino-roll.landed .casino-roll-caption h3 {
  color: var(--text);
  transform: scale(1.06);
}

.casino-roll.landed .casino-roll-caption p {
  color: var(--accent);
}

.casino-roll-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 44px;
  margin-top: 18px;
}

.casino-roll-play,
.casino-roll-again {
  flex: 1;
  height: 44px;
  border-radius: var(--r-md);
  font-size: var(--fs-md);
  animation: casino-roll-rise 0.34s ease both;
}

.casino-roll-again {
  animation-delay: 0.05s;
}

@keyframes casino-roll-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 769px) {
  .casino-roll-reel {
    --cell: 112px;
    --gap: 12px;
  }

  .casino-roll-caption h3 {
    font-size: var(--fs-3xl);
    line-height: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .casino-roll,
  .casino-roll-dialog,
  .casino-roll-marker,
  .casino-roll.landed .casino-roll-cell.is-center,
  .casino-roll-play,
  .casino-roll-again {
    animation: none;
  }
}