@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);
}

/* KARONUN ALTINDAKİ ŞERİT — oyun adı + sağlayıcı.
   Marka bazında açılıyor (`proton_oyun_kart_bilgisi`); kapalıyken markup hiç
   basılmıyor, yani bu kurallar da boşta durur.

   ⚠️ Karo yüksekliği şerit açıkken artıyor ve ızgarada
   `contain-intrinsic-size: auto 200px` var. `auto` anahtar sözcüğü son ÖLÇÜLEN
   yüksekliği hatırladığı için kaydırma çubuğu kendini düzeltiyor — sabit bir
   değer olsaydı görüş alanı dışındaki karolar yanlış boyda sayılırdı. */
.casino-game-cap {
  display: block;
  min-width: 0;
  padding: 8px 10px 9px;
  line-height: 1.25;
  background: var(--panel-2);
  border-top: 1px solid var(--white-a06);
}

/* 🔴 BANT YALNIZ ŞERİT AÇIKKEN. Kartın kendi zemini ve kapağın köşe
   yuvarlaklığı ancak altında bir bant varsa anlamlı; `:has()` olmadan bu
   kurallar şerit KAPALI markalarda da koşar ve kapağın altında bir çizgi
   kalırdı. Şerit varsayılan kapalı olduğu için bu seçici, kuralların
   bababet'te hiç uygulanmadığının GARANTİSİ. */
.casino-game-card:has(.casino-game-cap) {
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--white-a06);
}

/* Kapak artık bandın üstünde oturuyor: kendi yuvarlağını bırakıyor, köşeleri
   kartın `overflow: hidden`ı kesiyor. */
.casino-game-card:has(.casino-game-cap) .casino-game-thumb {
  border-radius: 0;
  box-shadow: none;
}

.casino-game-card:has(.casino-game-cap):hover {
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
}

.casino-game-card:has(.casino-game-cap):hover .casino-game-cap i {
  color: var(--accent-light, var(--accent));
}

/* İkisi de TEK SATIR: ad uzunluğu karo yüksekliğini oynatırsa ızgara satır
   satır zıplar. Taşan ad üç noktayla kesilir, tam adı `aria-label` taşır. */
.casino-game-cap b,
.casino-game-cap i {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.casino-game-cap b {
  color: var(--text);
  font-weight: 600;
  font-size: 12.5px;
}

.casino-game-cap i {
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}
.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);
  }
}

/* DOKUNMATİKTE CAM YOK. Perde (`.casino-game-hover`) yalnız :hover'da açılıyor,
   telefonda hiç görünmüyor — ama her kartın düğmesi `backdrop-filter` katmanı
   olarak yine duruyordu: bababet /casino'da 40 kart = 40 bulanıklık katmanı,
   orta seviye telefonda kaydırma kasması (ölçüldü 2026-10-11). Dokunuşta
   yapışan :hover olursa düğme bulanıksız dolguyla yine okunur. */
@media (hover: none) {
  .casino-game-play {
    background: var(--white-a35);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.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);
}

/* 🔴 DÖNEN HALKANIN BİR UCU FARKLI OLMAK ZORUNDA.
   Dört kenar da `--accent-a25` iken eleman 360° dönüyordu ama ekranda HİÇBİR
   ŞEY değişmiyordu: tek renkli bir daire döndüğünde kendine eş kalıyor. Yani
   animasyon çalışıyor, spinner DONMUŞ görünüyor — "yükleme takıldı" diye
   bildirilen şey buydu (ölçüldü 2026-09-20, betforyou ve bababet'te birebir
   aynı: dört kenar da `color(srgb 1 1 1 / 0.25)`).
   Öncü yay AYNI token ailesinden, yalnız daha opak: temanın `--accent-tint`i
   beyaza çekmesi (bababet, betforyou) durumunda bile kontrast kalıyor ve
   temanın süsten çıkardığı marka rengi geri gelmiyor. */
.casino-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid var(--accent-a25);
  border-top-color: var(--accent-a80);
  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;
  }
}

/* ============================================================
   LOBİ RAFLARI — ızgaranın üstündeki yatay şeritler
   İçerik BO'dan (`proton_slot_raflari`); ayar boşken hiç basılmıyor,
   yani bu blok varsayılan olarak boşta durur.
   ============================================================ */
.casino-shelves {
  display: grid;
  gap: 20px;
  margin-bottom: 14px;
  padding-inline: var(--mobile-gutter);
}

.casino-shelf {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.casino-shelf-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

/* Simge, çipinkiyle AYNI (`chipIcon`) — maskeli, yani tema rengini alıyor.
   Kutu vurgu renginde: raf başlığı ekranda bir bölüm başlığı gibi okunsun. */
.casino-shelf-ico {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--r-md);
  background: var(--accent);
}

.casino-shelf-ico::after {
  content: "";
  width: 19px;
  height: 19px;
  background: var(--on-accent);
  -webkit-mask: var(--shelf-ico) center / contain no-repeat;
  mask: var(--shelf-ico) center / contain no-repeat;
}

/* Başlık ve sayı AYNI satırda, taban çizgisinde hizalı. Sayı başlığın parçası:
   ayrı bir düğüm olarak sağa atmak, uzun başlıkta sayıyı başlıktan koparırdı. */
.casino-shelf-title {
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font: 700 var(--fs-lg) / 1.2 var(--font);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.casino-shelf-title small {
  flex: 0 0 auto;
  color: var(--muted);
  font: 600 var(--fs-xs) / 1 var(--font);
}

.casino-shelf-tools {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
  align-items: center;
  margin-left: auto;
}

.casino-shelf-all {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--r-pill);
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--white-a06);
  color: var(--text);
  font: 700 var(--fs-xs) / 30px var(--font);
  text-decoration: none;
  white-space: nowrap;
}

.casino-shelf-all:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.casino-shelf-arrow {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px var(--white-a06);
  color: var(--text);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.casino-shelf-arrow:hover {
  background: var(--accent);
  color: var(--on-accent);
}

/* Şerit: sütun akışlı ızgara + yatay kaydırma. Masaüstünde 8 kart görünür,
   1400 px altında 6 — `grid-auto-columns` boşlukları düşerek hesaplıyor, yani
   kart genişliği ekrana göre değil KART SAYISINA göre sabit.
   `scroll-snap` okların bıraktığı yeri kartın kenarına oturtuyor. */
.casino-shelf-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 7 * 14px) / 8);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.casino-shelf-track::-webkit-scrollbar {
  display: none;
}

.casino-shelf-track > .casino-game-card {
  scroll-snap-align: start;
}

@media (max-width: 1400px) {
  .casino-shelf-track {
    grid-auto-columns: calc((100% - 5 * 14px) / 6);
  }
}

/* Mobil: 2,6 kart görünür — yarım kalan kart şeridin kaydığını SÖYLÜYOR.
   Oklar gizli (parmakla kaydırılıyor) ama DOM'da duruyor: klavyeyle gezen
   masaüstü kullanıcısının tek kaydırma yolu onlar. */
@media (max-width: 768px) {
  .casino-shelves {
    gap: 16px;
  }

  .casino-shelf-track {
    grid-auto-columns: calc((100% - 2 * 8px) / 2.6);
    gap: 8px;
  }

  .casino-shelf-arrow {
    display: none;
  }

  .casino-shelf-ico {
    width: 28px;
    height: 28px;
  }

  .casino-shelf-ico::after {
    width: 16px;
    height: 16px;
  }

  .casino-shelf-title {
    font-size: var(--fs-md);
  }
}

/* ============================================================
   PANELİN ALTINDAKİ RAFLAR — BO bölüm sırası (2026-09-24)
   Varsayılanda panel (`.gb`) ile ızgara TEK kartın iki yarısı: panelin alt
   köşeleri kare, ızgara masaüstünde -26px ile panelin altına giriyor. BO
   paneli rafların ÜSTÜNE aldıysa araya raf giriyor ve o birleşim bozulur —
   ızgara rafların üstüne biner, panel yarım kart gibi asılı kalır. Bu blok
   yalnız `.is-panel-alti` rafları VARKEN devreye giriyor; yoksa hiçbir
   markanın lobisi değişmiyor.
   ============================================================ */
.gb:has(+ .casino-shelves.is-panel-alti) {
  margin-bottom: 18px;
  border-radius: var(--r-xl);
}

.casino-shelves.is-panel-alti + .casino-games-section {
  border-radius: var(--r-xl);
}

@media (min-width: 769px) {
  .casino-content .gb:has(+ .casino-shelves.is-panel-alti) {
    margin-bottom: 20px;
    border-radius: var(--r-2xl);
  }

  .casino-content .casino-shelves.is-panel-alti + .mobile-section.casino-games-section {
    margin-top: 0;
    border-radius: var(--r-2xl);
  }
}