/* Decorative tint: washes, glyph colours and rings that follow the accent but
   are not calls to action. A theme sets --ps-tint to dial them away from the
   accent; bababet does, to cut red density. */
:root {
  --pst: var(--ps-tint, var(--accent));
}

/* SearchField (type="search") draws its own clear button — never the UA's too. */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

:root {
  --mobile-gutter: 10px;
  --mobile-gutter-sm: 5px;
}

button,
input,
select,
textarea {
  border: 0;
}

html {
  background: var(--mobile-bg);

  overflow-anchor: none;
}

html,
body {
  margin: 0;
  min-width: 320px;
  min-height: 100%;
  min-height: 100dvh;

  overflow-x: clip;
  background: var(--mobile-bg);
  color: var(--mobile-text);
  font-family: var(--font);
}

@supports not (overflow: clip) {
  html {
    overflow-x: hidden;
  }
}

/*
 * KAYDIRMA ÇUBUĞU - TEK YER.
 *
 * Tarayıcının varsayılan açık gri çubuğu koyu yüzeyin sağ kenarında yamalı
 * duruyordu. Kural `*` üzerinde: sayfa (`html`), masaüstünde içerik panosu ve
 * her iç kutu aynı çubuğu alıyor; kaydırılan bir sonraki kutu için ikinci bir
 * kural yazmak gerekmiyor.
 *
 * DİKKAT: çubuğunu GİZLEYEN satırlar bozulmuyor —
 * `.carousel-track::-webkit-scrollbar` gibi sınıf seçicileri buradaki `*`ten
 * daha özgül, `display: none` yine kazanıyor.
 */
/*
 * 🔴 `scrollbar-color` KALITIMLA HER ŞEYE İNMEMELİ. Chrome 121'den beri bir
 * öğede standart `scrollbar-width`/`scrollbar-color` TANIMLIYSA o öğenin
 * `::-webkit-scrollbar` kuralları TAMAMEN yok sayılıyor. `:root`a yazınca ikisi
 * de kalıtımla her kutuya iniyordu, yani aşağıdaki tutamağın hiçbiri
 * çizilmiyordu: tarayıcı kendi ince çubuğunu basıyordu. Bu yüzden bu iki satır
 * yalnız `::-webkit-scrollbar`ı TANIMAYAN tarayıcıda (Firefox) veriliyor.
 */
@supports not selector(::-webkit-scrollbar) {
  :root {
    scrollbar-width: thin;
    /* Firefox tek satırda okur: önce tutamak, sonra oluk. */
    scrollbar-color: var(--red) var(--black);
  }
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track,
*::-webkit-scrollbar-corner {
  background: var(--black);
}

*::-webkit-scrollbar-thumb {
  /* Oluğa yapışmasın diye şeffaf kenarlık + `background-clip`: çizgi değil,
     tutamağı inceltip ortalayan tek numara. */
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  background: var(--red);
  background-clip: padding-box;
}

*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active {
  background: var(--white);
  background-clip: padding-box;
}

@layer base {
  button,
  input,
  select,
  textarea {
    font: inherit;

    border: 0;
  }

  button {
    cursor: pointer;
  }
}

button:active:not(:disabled),
[role="button"]:active:not(:disabled) {
  transform: translateY(1px) scale(0.985);
  box-shadow:
    inset 0 3px 8px var(--black-a45),
    inset 0 1px 2px var(--black-a60),
    inset 0 -1px 0 var(--white-a10);
  filter: brightness(0.92);
}

@media (prefers-reduced-motion: reduce) {
  button:active:not(:disabled),
  [role="button"]:active:not(:disabled) {
    transform: none;
  }
}

::selection {
  background: var(--secondary);
  color: var(--white);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

:where(.mobile-search, label) input:focus-visible {
  outline: none;
}

@layer components {
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 44px;
    padding: 0 18px;
    border-radius: var(--r-md);
    font-family: inherit;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: filter 0.16s ease, background 0.16s ease, border-color 0.16s ease,
      transform 0.16s ease;
  }

  .btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
  }

  /* MALZEME, DOLGU DEĞİL — ve MAT bir malzeme. Reçetenin kendisi tek yerde
     duruyor (`--btn-material`, theme.css): aynı yüzeyi mobil başlıktaki Kayıt Ol
     ve profil eylemleri de giyiyor, dördüne kopyalanan bir gradyan er geç
     birbirinden yarım ton kayardı. */
  .btn--primary {
    background-image: var(--btn-material);
    background-size: var(--btn-material-size);
    box-shadow:
      var(--shadow-accent),
      /* üst kenarın ışık çizgisi ve alt kenarın gölgesi: yüzeyin KALINLIĞI */
      inset 0 1px 0 var(--btn-sheen),
      inset 0 -1px 0 var(--black-a45),
      /* siyah sahnede kenarın kaybolmaması için kararan kontur */
      inset 0 0 0 1px var(--black-a20);
    color: var(--on-accent);
    /* Yazı yüzeyin ÜSTÜNDE duruyor, içine gömülmüyor: bir piksellik gölge. */
    text-shadow: 0 1px 1px var(--black-a30);
  }

  .btn--primary:hover:not(:disabled) {
    background-image: var(--btn-material-hover);
    background-size: var(--btn-material-size);
    filter: brightness(1.05);
  }

  .btn--secondary {
    background: linear-gradient(180deg, var(--secondary-dark), var(--secondary));
    box-shadow: var(--shadow-secondary);
    color: var(--text);
  }

  .btn--secondary:hover:not(:disabled) {
    filter: brightness(1.06);
  }

  .btn--ghost {
    background: var(--white-a05);
    color: var(--text);
  }

  .btn--ghost:hover:not(:disabled) {
    background: var(--white-a10);
  }

  .btn--close {
    flex: 0 0 auto;
    gap: 0;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: var(--r-md);
    background: var(--chip);
    color: var(--muted);
    font-size: var(--fs-3xl);
  }

  .btn--close:hover:not(:disabled) {
    background: var(--panel-3);
    color: var(--text);
    transform: rotate(90deg);
  }

  .btn--sm {
    height: 33px;
    font-size: var(--fs-md);
  }

  .btn--lg {
    height: 53px;
    border-radius: var(--r-lg);
    font-size: var(--fs-lg);
  }

  .btn--block {
    width: 100%;
  }
}

img {
  display: block;
  max-width: 100%;
}

.mobile-body {
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
}

.mobile-shell {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: clip;
  background: var(--mobile-bg);
}

body,
.app-shell,
.mobile-shell {
  background-color: transparent;
}

.app-shell::before,
.mobile-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;

  --backdrop-glow: var(--accent-a25);
  --backdrop-glow-2: var(--secondary-a12);

  --backdrop-veil: 89%;
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(72% 52% at 4% -8%, var(--backdrop-glow), transparent 68%),
    radial-gradient(58% 44% at 104% 10%, var(--backdrop-glow-2), transparent 70%),
    radial-gradient(var(--white-a05) 1px, transparent 1.3px),
    linear-gradient(
      color-mix(in srgb, var(--bg-deep) var(--backdrop-veil), transparent),
      color-mix(in srgb, var(--bg-deep) var(--backdrop-veil), transparent)
    ),
    var(--img-art-dash),
    var(--img-art-orb);
  background-repeat: no-repeat, no-repeat, repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 0, 0 0, 0 0, left -6vw bottom -6vh, right -5vw top 12vh;
  background-size: auto, auto, 28px 28px, auto, auto 58vh, auto 48vh;
}

@media (min-width: 769px) {
  .app-shell .content {
    background: var(--content-bg, color-mix(in srgb, var(--bg-deep) 72%, transparent));
  }

  .app-shell::before {
    background-color: var(--bg);
    background-position: 0 0, 0 0, 0 0, 0 0, left 300px bottom -8vh, right 30px top 22vh;
    background-size: auto, auto, 30px 30px, auto, auto 66vh, auto 54vh;
  }
}

@media (max-width: 768px) {
  .mobile-shell::before,
  .app-shell::before {
    --backdrop-glow: var(--accent-a45);
    --backdrop-glow-2: var(--secondary-a25);

    --backdrop-veil: 93%;
  }
}

.mobile-home-top {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 5px auto 0;
  padding-inline: 15px;
  overflow: hidden;
}

.mobile-home-top::before {
  content: "";
  position: absolute;
  left: 5px;
  top: -6px;
  z-index: 2;
  width: 46px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(5px);
  opacity: 0.18;
  pointer-events: none;
}

.mobile-home-body {
  width: 100%;
  max-width: 100%;
  margin: 20px auto 0;
  padding-inline: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.mobile-home-body .mobile-section {
  width: 100%;
}

@media (max-width: 768px) {
  :root {
    --mobile-header-h: 114px;
  }
}

.mobile-header {
  position: sticky;
  top: 0;

  z-index: 12500;
  width: 100%;
  overflow: visible;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-2);
}

.mobile-header-row {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  /* Logonun alti ile mod satiri ic ice giriyordu: marka isareti 57px kutunun
     alt kenarina kadar iniyor, satir da tam 57px de basliyordu. Ustten bir tik pay. */
  margin: 6px var(--mobile-gutter-sm) 8px;
  transition:
    height 0.28s ease,
    margin-block 0.28s ease,
    opacity 0.28s ease;
}

.mobile-header .mode-switch {
  /* `relative`, `static` degil: kayan cam mutlak konumlu ve tutunacagi kutu bu. */
  position: relative;
  /* styles.css masaustu pili `left:310px; top:14px` ile konumlar; relative
     kalinca o ofset burada da isler ve pil sagdan tasip afisin ustune duserdi. */
  left: 0;
  top: 0;
  gap: 0;
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 4px;

  overflow-x: auto;
  scrollbar-width: none;
}

.mobile-header .mode-switch::-webkit-scrollbar {
  display: none;
}

.mobile-header.is-condensed .mobile-header-row,
body.mobile-overlay-open .mobile-header .mobile-header-row,
body.mobile-drawer-open .mobile-header .mobile-header-row,
body.app-modal-open .mobile-header .mobile-header-row,
body.modal-open .mobile-header .mobile-header-row,
html.app-scroll-lock .mobile-header .mobile-header-row {
  height: 0;
  margin-block: 0;
  padding-block: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

body.mobile-overlay-open .mobile-header .mobile-header-row,
body.mobile-drawer-open .mobile-header .mobile-header-row,
body.app-modal-open .mobile-header .mobile-header-row,
body.modal-open .mobile-header .mobile-header-row,
html.app-scroll-lock .mobile-header .mobile-header-row {
  transition: none;
}

.mobile-header .mode-switch a {
  flex: 1 0 auto;
  width: auto;
  min-width: auto;
  height: 34px;
  gap: 6px;
  font-size: var(--fs-base);
  font-weight: 800;
}

.mobile-header .mode-switch .seg--page {
  max-width: none;
  padding: 0 8px;
}

.mobile-header .mode-switch a.active {
  flex-grow: 1.6;
  width: auto;
}

.mobile-header .mode-switch a:first-child {
  flex: 0 0 34px;
}

.mobile-header .mode-switch .seg:first-child img {
  width: 17px;
  height: 17px;
}

/* Dar ekranda dort segment tek satira sigsin: masaustu dolgusu (16/22px) ve
   14px ad 390px'te tam, 360px'te tasiyordu. */
.mobile-header .mode-switch .seg:not(:first-child) {
  padding: 0 12px;
}

.mobile-header .mode-switch .seg.active:not(:first-child) {
  padding: 0 14px;
}

.mobile-header .mode-switch .seg span {
  font-size: var(--fs-md);
}

.mobile-header-accent {
  position: absolute;
  left: 6px;
  bottom: 0;
  width: 143px;
  height: 1px;
  border-radius: var(--r-4xl) var(--r-4xl) 0 0;
  background: linear-gradient(90deg, var(--accent-a00) 0%, var(--accent) 50%, var(--accent-a00) 100%);
  pointer-events: none;
}

.mobile-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  width: 100%;
  max-width: 100%;
  height: 57px;
  margin: 0 auto;
  padding: 0 var(--mobile-gutter-sm);
  border-bottom: 0;
  background: transparent;
}

.mobile-topbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin-left: auto;
}

.mobile-icon-button,
.header-menu-trigger {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--mobile-muted);
  text-decoration: none;
}

.mobile-shell .mobile-topbar {
  width: 100%;
  padding: 0 var(--mobile-gutter-sm);
  gap: 4px;
}

.mobile-shell .mobile-topbar .mobile-brand {
  flex: 1 1 90px;
  width: 90px;
  min-width: 72px;
  height: 40px;
}

.mobile-shell .mobile-topbar .mobile-brand-mark {
  width: 90px;
  height: auto;
}

.mobile-brand,
.mobile-auth-logo {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--white);
  font-size: var(--fs-3xl);
  font-style: italic;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
}

.mobile-topbar .mobile-brand {
  display: block;
}

.mobile-brand {
  position: relative;
  display: block;

  flex: 0 1 156px;
  width: 156px;
  min-width: 100px;
  height: 57px;
  overflow: visible;
  text-decoration: none;
}

.mobile-brand-glow {
  position: absolute;
  left: 0;
  top: 44px;
  width: 48px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  filter: blur(5px);
  opacity: 0.22;
  pointer-events: none;
}

.mobile-brand-mark {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: min(134px, 100%);
  height: auto;
  max-width: none;
  object-fit: contain;
  display: block;
}

.mobile-brand em,
.mobile-auth-logo em {
  color: var(--mobile-accent);
  font-size: var(--fs-base);
  font-style: italic;
}

.mobile-topbar .mobile-header-chip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 0 0 119px;
  width: 119px;
  height: 37.1px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--panel-3) 100%);
  color: var(--mobile-muted);
  padding: 4.2px 4.9px;
  text-decoration: none;
}

.mobile-topbar .mobile-header-chip-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 28.7px;
  min-width: 0;
}

.mobile-topbar .mobile-header-chip-leading {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.mobile-topbar .mobile-header-chip-avatar {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--bg-deep);
}

.mobile-topbar .mobile-header-chip-avatar img {
  display: block;
  width: 28px;
  height: 28px;
  max-width: none;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.mobile-topbar .mobile-header-chip-meta {
  display: flex;
  flex-direction: column;
  gap: 3.5px;
  width: 46.9px;
  min-width: 0;
  flex-shrink: 0;
}

.mobile-topbar .mobile-header-chip-name {
  display: block;
  width: 46.671px;
  height: 6.923px;
  max-width: none;
}

.mobile-topbar .mobile-header-chip-balance {
  display: flex;
  align-items: center;
  gap: 3.5px;
}

.mobile-topbar .mobile-header-chip-balance img {
  flex: 0 0 9.8px;
  width: 9.8px;
  height: 9.8px;
  max-width: none;
  border-radius: 50%;
}

.mobile-topbar .mobile-header-chip-balance strong {
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-size: var(--fs-3xs);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.1px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-topbar .mobile-header-chip-arrow {
  flex: 0 0 23.1px;
  width: 23.1px;
  height: 22.702px;
  max-width: none;
  transition: transform 0.2s ease;
}

.mobile-topbar .mobile-header-auth {
  display: flex;
  align-items: center;
  gap: 6px;
}

.mobile-topbar .mobile-header-auth a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
}

.mobile-topbar .mobile-header-login {
  background: var(--white-a05);
  color: var(--text);
}

.mobile-topbar .mobile-header-register {
  background-image: var(--btn-material);
  background-size: var(--btn-material-size);
  box-shadow: var(--shadow-accent), inset 0 1px 0 var(--btn-sheen), inset 0 -1px 0 var(--black-a45);
  color: var(--on-accent);
  text-shadow: 0 1px 1px var(--black-a30);
}

.mobile-header-menu {
  position: relative;
  flex: 0 0 119px;
  width: 119px;
  z-index: 180;
}

.mobile-header-menu .mobile-header-chip {
  flex: none;
  width: 100%;
  cursor: pointer;
}

.mobile-header-menu.is-open .mobile-header-chip-arrow {
  transform: rotate(180deg);
}

.mobile-header-backdrop {
  position: fixed;
  inset: 0;
  z-index: 170;
  border: 0;
  padding: 0;
  background: var(--scrim-a55);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.mobile-header-backdrop.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  pointer-events: none;
}

.mobile-header-menu.is-open .mobile-profile-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.mobile-profile-dropdown-card {
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--bg) 100%);
  box-shadow: var(--shadow-lg);
}

.mobile-profile-dropdown-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--panel-3-a90);
}

.mobile-profile-dropdown-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-deep);
}

.mobile-profile-dropdown-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mobile-profile-dropdown-identity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mobile-profile-dropdown-nameline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mobile-profile-dropdown-identity strong {
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-profile-dropdown-identity span {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}

.mobile-profile-dropdown-identity .mobile-profile-dropdown-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-top: 0;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--accent-a12);
  color: var(--mobile-accent);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-profile-dropdown-vip {
  position: relative;
  display: block;
  margin: 10px 14px 2px;
  padding: 10px 12px 9px;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tier-c) 20%, transparent), transparent 65%),
    var(--panel-a92);
  color: inherit;
  text-decoration: none;
  transition: background 0.16s ease;
}

.mobile-profile-dropdown-vip:hover {
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--tier-c) 34%, transparent), transparent 65%),
    var(--panel-2);
}

.mobile-profile-dropdown-vip-top {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}

.mobile-profile-dropdown-vip-lv {
  flex: 0 0 auto;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tier-c) 18%, transparent);
  color: var(--tier-c);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mobile-profile-dropdown-vip strong {
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-profile-dropdown-vip-next {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.mobile-profile-dropdown-vip-bar {
  position: relative;
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--black-a45);
  overflow: hidden;
}

.mobile-profile-dropdown-vip-bar > i {
  position: relative;
  display: block;
  overflow: hidden;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier-c) 55%, var(--bg)), var(--tier-c));
  box-shadow: 0 0 10px color-mix(in srgb, var(--tier-c) 60%, transparent);
}

.mobile-profile-dropdown-vip-bar > i::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--white-a28) 50%, transparent);
  transform: translateX(-100%);
  animation: vip-strip-shine 2.6s ease-in-out infinite;
}

@keyframes vip-strip-shine {
  0%,
  60% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-profile-dropdown-vip-bar > i::after {
    animation: none;
  }
}

.mobile-profile-dropdown-vip-xp {
  display: block;
  margin-top: 6px;
  color: var(--muted-3);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.mobile-profile-dropdown-section {
  padding: 12px 16px;
}

.mobile-profile-dropdown-section h3 {
  margin: 0 0 10px;
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.mobile-profile-dropdown-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-profile-dropdown-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 9px 11px;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-a16), transparent 60%),
    var(--panel-a92);
  overflow: hidden;
}

.mobile-profile-dropdown-stat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mobile-accent), transparent 85%);
  opacity: 0.85;
}

.mobile-profile-dropdown-stat.is-bonus {
  background:
    radial-gradient(120% 90% at 100% 0%, var(--teal-a16), transparent 60%),
    var(--panel-a92);
}

.mobile-profile-dropdown-stat.is-bonus::before {
  background: linear-gradient(90deg, var(--teal), transparent 85%);
}

.mobile-profile-dropdown-stat-label {
  color: var(--muted-3);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
}

.mobile-profile-dropdown-stat strong {
  color: var(--white);
  font-size: var(--fs-xl);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

.mobile-profile-dropdown-stat strong em {
  color: var(--mobile-accent);
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.mobile-profile-dropdown-stat.is-bonus strong em {
  color: var(--teal);
}

.mobile-profile-dropdown-actions {
  display: grid;
  padding: 0 16px 16px;
}

.mobile-profile-dropdown-actions .mobile-btn {
  width: 100%;
  gap: 8px;
  height: 42px;
  margin-top: 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 22px var(--accent-a45);
}

.mobile-profile-dropdown-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--panel-3-a90);
}

.mobile-profile-dropdown-links a {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 10px 4px;
  border-radius: var(--r-md);
  background: var(--panel-3);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
}

.mobile-profile-dropdown-links a svg {
  color: var(--mobile-accent);
}

.mobile-profile-dropdown-links a.is-danger svg {
  color: var(--muted);
}

.mobile-profile-dropdown-links a:hover {
  border-color: var(--accent-a55);
  background: linear-gradient(180deg, var(--panel-3), var(--accent-a16));
}

.mobile-header-actions {
  position: relative;
  display: flex;
  align-items: center;
  flex: 0 0 72.8px;
  width: 72.8px;
  height: 37.1px;
  padding: 2.1px 0;
  overflow: visible;
  border-radius: var(--r-md);
  background: var(--panel-2);
  z-index: 181;
}

.mobile-header-actions.is-guest {
  flex-basis: auto;
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
}

.mobile-header-actions.is-guest .mobile-action-menu {
  flex-basis: auto;
  width: auto;
  height: auto;
}

.mobile-header-actions.is-guest .header-menu-trigger {
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--white-a05);
}

.mobile-action-menu {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 36.4px;
  width: 36.4px;
  height: 32.9px;
}

.mobile-notification-menu {
  position: static;
}

.mobile-action-menu.is-open .mobile-action-trigger {
  background: var(--accent-a07);
}

.mobile-action-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 280px;
}

.mobile-notification-menu .mobile-action-dropdown {
  left: auto;
  width: 258px;
  max-width: calc(100vw - 24px);
}

.mobile-action-dropdown-card {
  overflow: hidden;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--panel-2) 0%, var(--bg) 100%);
  box-shadow: var(--shadow-lg);
}

.mobile-action-dropdown-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--panel-3-a90);
}

.mobile-action-dropdown-head strong {
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.mobile-notification-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);

  background: color-mix(in srgb, var(--secondary) 15%, transparent);
  color: var(--secondary-light);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.mobile-notification-list {
  display: flex;
  flex-direction: column;
  max-height: 220px;
  overflow: auto;
}

.mobile-notification-item {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: start;
  width: 100%;
  padding: 11px 14px;
  border: 0;
  border-bottom: 1px solid var(--panel-3-a65);
  background: transparent;
  color: var(--mobile-muted);
  text-align: left;
}

.mobile-notification-item:last-child {
  border-bottom: 0;
}

.mobile-notification-item.is-unread {
  background: color-mix(in srgb, var(--secondary) 6%, transparent);
}

.mobile-notification-dot {
  width: 6px;
  height: 6px;
  margin-top: 5px;
  border-radius: 50%;
  background: transparent;
}

.mobile-notification-item.is-unread .mobile-notification-dot {
  background: var(--mobile-accent);
  box-shadow: 0 0 8px var(--accent-a45);
}

.mobile-notification-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mobile-notification-copy strong {
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1.25;
}

.mobile-notification-copy span {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.mobile-notification-item time {
  flex-shrink: 0;
  padding-top: 1px;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
}

.mobile-action-dropdown-footer {
  display: block;
  width: 100%;
  padding: 11px 14px 13px;
  border: 0;
  border-top: 1px solid var(--panel-3-a90);
  background: var(--panel-a65);
  color: var(--mobile-accent);
  font-size: var(--fs-base);
  font-weight: 800;
  text-align: center;
}

.header-menu-dots {
  display: flex;
  align-items: center;
  gap: 3px;
}

.header-menu-dots i {
  width: 3.4px;
  height: 3.4px;
  border-radius: 50%;
  background: currentColor;
  transition:
    gap 0.18s ease,
    transform 0.18s ease;
}

.header-menu.is-open .header-menu-trigger {
  color: var(--pst);
}

.header-menu.is-open .header-menu-dots {
  gap: 4.5px;
}

.header-menu.is-open .header-menu-dots i:first-child {
  transform: translateY(-1.5px);
}

.header-menu.is-open .header-menu-dots i:last-child {
  transform: translateY(1.5px);
}

.header-menu-trigger {
  position: relative;
}

.header-menu-ping {
  position: absolute;
  top: 6px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pst);
  box-shadow: 0 0 6px var(--pst);
}

.header-menu-panel {
  --qm-pad: 10px;
  --qm-plate: 30px;
  width: 300px;
  max-width: calc(100vw - 24px);
}

.header-menu-panel .mobile-action-dropdown-card {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--pst) 7%, transparent), 0 16px 40px var(--black-a45);
  transform-origin: top right;
  animation: header-menu-in 0.22s ease both;
}

@keyframes header-menu-in {
  from { opacity: 0; translate: 0 -8px; scale: 0.97; }
  to { opacity: 1; translate: 0; scale: 1; }
}

.header-menu-band {
  padding: var(--qm-pad);
}

.header-menu-band + .header-menu-band,
.header-menu-prefs {
  border-top: 1px solid var(--panel-3-a90);
}

.header-menu-caption {
  margin: 0 0 8px 6px;
  color: var(--mobile-muted);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.75;
}

.header-menu-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.header-menu-row {
  display: grid;
  grid-template-columns: var(--qm-plate) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 6px;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--mobile-muted);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.12s ease;
}

.header-menu-row:hover,
.header-menu-row:focus-visible {
  background: color-mix(in srgb, var(--pst) 7%, transparent);
  color: var(--text);
}

.header-menu-row:focus-visible,
.quick-action-tile:focus-visible,
.header-menu-pref:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.header-menu-row:active,
.quick-action-tile:active,
.header-menu-pref:active {
  transform: scale(0.97);
}

.header-menu-label {
  min-width: 0;
  overflow: hidden;
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu-icon {
  display: grid;
  place-items: center;
  width: var(--qm-plate);
  height: var(--qm-plate);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--pst);
  transition:
    background 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.header-menu-row:hover .header-menu-icon,
.header-menu-row:focus-visible .header-menu-icon,
.quick-action-tile:hover .header-menu-icon,
.quick-action-tile:focus-visible .header-menu-icon {
  background: color-mix(in srgb, var(--pst) 16%, transparent);
  transform: scale(1.06);
  box-shadow: 0 0 10px color-mix(in srgb, var(--pst) 25%, transparent);
}

.header-menu-chevron,
.header-menu-lock {
  margin-right: 2px;
  color: var(--mobile-muted);
  opacity: 0.45;
  transition:
    color 0.16s ease,
    opacity 0.16s ease,
    translate 0.16s ease;
}

.header-menu-row:hover .header-menu-chevron {
  opacity: 0.9;
  translate: 2px 0;
}

.header-menu-kbd {
  margin-right: 2px;
  padding: 3px 7px;
  border-radius: var(--r-xs);
  background: var(--panel-3);
  color: var(--muted);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.header-menu-row .header-menu-icon {
  color: var(--mobile-muted);
}

.header-menu-row:hover .header-menu-lock {
  color: var(--pst);
  opacity: 1;
}

.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.quick-action-tile {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 9px 4px;
  border-radius: var(--r-md);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pst) 12%, transparent), transparent 65%),
    var(--panel-a92);
  color: var(--white);
  cursor: pointer;
  transition:
    background 0.16s ease,
    transform 0.12s ease;
}

.quick-action-tile .header-menu-icon {
  background: color-mix(in srgb, var(--pst) 12%, transparent);
}

.quick-action-tile:hover,
.quick-action-tile:focus-visible {
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--pst) 25%, transparent), transparent 65%),
    var(--panel-a92);
}

.header-menu.is-open .quick-action-tile {
  animation: quick-action-in 0.28s ease both;
}

.quick-action-tile:nth-child(2) { animation-delay: 0.04s; }
.quick-action-tile:nth-child(3) { animation-delay: 0.08s; }

@keyframes quick-action-in {
  from { opacity: 0; translate: 0 6px; scale: 0.96; }
  to { opacity: 1; translate: 0; scale: 1; }
}

.quick-action-tile strong {
  overflow: hidden;
  max-width: 100%;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu-prefs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
  padding: var(--qm-pad);
  background: var(--panel-a65);
}

.header-menu-pref {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--mobile-muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.16s ease,
    color 0.16s ease,
    transform 0.12s ease;
}

.header-menu-pref span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.header-menu-pref:hover,
.header-menu-pref:focus-visible {
  background: color-mix(in srgb, var(--pst) 12%, transparent);
  color: var(--white);
}

/* Theme picker — the same chip as the two prefs above, one per theme folder, so
   the roster grows on its own when a folder is added. `auto-fit` because that
   count is not fixed at two the way language/currency is. */
.header-menu-themes {
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  border-top: 1px solid var(--panel-3-a90);
  text-transform: capitalize;
}

.header-menu-pref.is-active {
  background: color-mix(in srgb, var(--pst) 12%, transparent);
  color: var(--white);
}

.header-menu-swatch {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
  .header-menu-panel .mobile-action-dropdown-card,
  .header-menu-icon,
  .header-menu-row,
  .header-menu-row:hover .header-menu-icon,
  .quick-action-tile,
  .header-menu.is-open .quick-action-tile,
  .header-menu-pref {
    transition: none;
    animation: none;
    transform: none;
  }
}

.lang-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lang-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 9px 0 6px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--mobile-muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  opacity: 0.6;
  cursor: pointer;
  transition:
    opacity 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}

.lang-flag {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--black-a30) inset;
}

.cur-symbol {
  display: grid;
  place-items: center;
  background: var(--accent-a12);
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 800;
  line-height: 1;
}

.lang-tile .cur-symbol {
  font-size: var(--fs-base);
}

.lang-chip.is-active,
.lang-chip:hover {
  background: var(--accent-a07);
  color: var(--white);
  opacity: 1;
}

.lang-chip-all {
  color: var(--accent);
  opacity: 0.9;
}

.lang-chip-all:hover {
  color: var(--white);
}

.lang-shell {
  width: min(560px, 96vw);
  max-height: min(78vh, 720px);
}

.cur-shell {
  width: min(620px, 96vw);
}

.lang-head-glyph {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: var(--r-md);
  background: var(--accent-a07);
  color: var(--accent);
}

.lang-searchbar {
  position: sticky;
  top: -18px;
  z-index: 2;
  margin: -18px -20px 4px;
  padding: 18px 20px 10px;
  background: var(--panel);
}

.lang-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  color: var(--muted);
  box-shadow: 0 0 0 1px var(--panel-3-a90);
  transition:
    box-shadow 0.16s ease,
    color 0.16s ease;
}

.lang-search:focus-within {
  color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-a30), 0 0 18px var(--accent-a12);
}

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

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

.lang-search > img {
  width: 15px;
  height: 15px;
  opacity: 0.6;
}

.lang-search button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}

.lang-caption {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lang-caption + .lang-grid {
  margin-bottom: 18px;
}

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

.cur-shell .lang-grid {
  grid-template-columns: repeat(auto-fill, minmax(182px, 1fr));
}

.lang-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition:
    box-shadow 0.16s ease,
    background 0.16s ease,
    transform 0.16s ease;
}

.lang-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--black-a30), 0 0 0 1px var(--accent-a25);
}

.lang-tile.is-active {
  background: linear-gradient(180deg, var(--accent-a12) 0%, var(--bg-deep) 100%);
  box-shadow: 0 0 0 1px var(--accent-a30);
}

.lang-tile .lang-flag {
  width: 24px;
  height: 24px;
}

.lang-tile-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.lang-tile-copy strong {
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-tile-copy small {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-tile-copy .cur-rate {
  color: var(--accent);
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.lang-tile-check {
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--accent);
}

.lang-none {
  margin: 24px 0;
  color: var(--muted);
  font-size: var(--fs-md);
  text-align: center;
}

.mobile-header-divider {
  flex: 0 0 0.7px;
  width: 0.7px;
  height: 22.4px;
  background: var(--muted);
  opacity: 0.2;
}

.mobile-header-actions .mobile-icon-button,
.mobile-header-actions .header-menu-trigger {
  display: grid;
  place-items: center;
  width: 36.4px;
  height: 32.9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--mobile-muted);
}

.mobile-header-actions .mobile-icon-button {
  border-right: 0;
}

.mobile-header-actions .mobile-icon-button img {
  width: 17.136px;
  height: 17.136px;
  transform: rotate(15deg);
}

.mobile-winners {
  /* A ticker, not a row of cards: 72px made the first thing under the header as
     tall as a game tile and pushed the hero slider down. */
  --winners-h: 54px;
  /* Bant kenardan kenara gitsin diye kabın YATAY DOLGUSU kadar taşıyor. Değer
     sabit -15px'ti; şerit artık altbilginin başında ve altbilginin dolgusu
     masaüstünde 40px, mobilde 15px (styles.css) — taşma o yüzden değişken. */
  --winners-bleed: 15px;
  position: relative;

  width: calc(100% + var(--winners-bleed) * 2);
  height: calc(var(--winners-h) + 8px);
  margin-left: calc(var(--winners-bleed) * -1);
  padding: 4px 0;
  overflow: hidden;
  border-radius: 0;

  /* DOLGU YOK. Opak `--bg-deep` bandı, altbilginin kendi degradesinin üstünde
     ayrı bir kutu gibi duruyordu: şerit altbilginin İÇİNDE ama ondan değilmiş
     gibi. Altbilgi zaten kendi zeminini çiziyor; şerit onun ilk satırı, kendi
     paneli değil. Ayıran çizgiyi de altında duran `.footer-main`ın kendi üst
     kenarı çiziyor — altbilgideki her blok gibi. */
  background: none;
}

.mobile-winners-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 4px;
  align-items: center;
  width: 100%;
  min-width: 0;
  height: var(--winners-h);
}

.mobile-winners-track {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}

.mobile-winners-marquee {
  display: flex;
  width: max-content;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}

.mobile-winners-marquee:active {
  cursor: grabbing;
}

.mobile-winners-marquee img {
  pointer-events: none;
  -webkit-user-drag: none;
}

.mobile-winners-marquee-group {
  display: flex;
  flex: 0 0 auto;
  /* Wide gaps do the separating now that the cards have no edges. */
  gap: 22px;

  padding-right: 22px;
}

.mobile-winner-card {
  contain: layout paint;
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 176px;
  width: 176px;
  height: var(--winners-h);
  overflow: hidden;

  /* Flat: no panel, no radius, no tint. The page's own language is coverless
     rows on the page surface, and a strip of tinted boxes read as a foreign
     widget bolted above it. Colour survives only on the multiplier. */
}

.mobile-winner-thumb {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 32px;
  height: calc(100% - 12px);
  display: block;
  object-fit: cover;
  border-radius: var(--r-xs);
}

.mobile-winner-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  flex: 1;
}

.mobile-winner-title-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}

.mobile-winner-game {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: var(--muted-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-winner-payout {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow: visible;
}

.mobile-winner-coin {
  position: relative;
  flex: 0 0 11px;
  width: 11px;
  height: 11px;
  overflow: visible;
}

.mobile-winner-coin-bleed {
  position: absolute;
  top: -28.57%;
  right: -42.86%;
  bottom: -71.43%;
  left: -57.14%;
}

/* Çizilen jeton (USDT dışı birimler) diski viewBox'a TAM oturtuyor: yukarıdaki
   pay ona uygulanınca iki katı büyük çıkıyordu. Pay yalnız gönderilen çizimin.
   Taşma bittiği için `gap` de geri geliyor — pay sağa 42.86% sarkıyor ve rakamla
   jetonun arasındaki boşluğu tamamen yiyordu. */
.mobile-winner-coin-bleed[data-drawn] {
  inset: 0;
  display: grid;
  place-items: center;
}

/* Disk yazıdan küçük durmalı: gönderilen çizimde gölge payı bu işi kendiliğinden
   yapıyor, çizilende yapmıyor. */
.mobile-winner-coin-bleed[data-drawn] img {
  width: 78%;
  height: 78%;
}

.mobile-winner-coin-bleed img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.mobile-winner-amount {
  color: var(--gold);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Right-aligned plain text, not a filled brightened pill — the payout is the
   one thing on the card allowed to shout. */
.mobile-winner-mult {
  flex: 0 0 auto;
  margin-left: auto;
  color: rgb(var(--winner-glow, 0 217 255));
  font-size: var(--fs-xs);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  filter: brightness(1.2);
}

.mobile-winner-name {
  flex: 0 0 auto;
  max-width: 46%;
  overflow: hidden;
  color: var(--muted-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.hero-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  gap: 14px;
}

.hero-pair > .hero-pair-desktop {
  display: none;
}

@media (min-width: 769px) {
  .hero-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-pair > .hero-pair-mobile {
    display: none;
  }

  .hero-pair > .hero-pair-desktop {
    display: block;
  }
}

.hero-slider {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
  align-self: start;
  overflow: hidden;
  container-type: inline-size;

  --hero-w: 720;
  --hero-h: 220;
  aspect-ratio: var(--hero-w) / var(--hero-h);
  box-sizing: content-box;
  padding-bottom: 0;

  /* Dört köşe de yuvarlak: alt-sol eskiden kareydi çünkü oraya "Bonusu al"
     düğmesinin dik kenarı oturuyordu. Düğme kalktı, kart da sayfanın öbür
     kartları gibi (`.home-promo`, --r-xl) tam yuvarlak. */
  border-radius: var(--r-xl);
  box-shadow: 0 4px 12px rgb(0 0 0 / 12%), 0 12px 28px -12px rgb(0 0 0 / 28%);
}

.carousel-track {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.carousel-track::-webkit-scrollbar {
  display: none;
}

.carousel-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
}

.carousel-slide,
.carousel-slide a,
.carousel-slide img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
}

.hero-slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
}

/* Artwork fills the slider; controls sit over its lower edge. */
.hero-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-slider > .carousel-nav {
  display: grid;
  place-items: center;
  isolation: isolate;
  opacity: 1;
  bottom: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  box-shadow: none;
  color: rgb(255 255 255 / 72%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  touch-action: manipulation;
}

/* Only the slim chevron is visible; its touch target stays 44px. */
.hero-slider > .carousel-nav svg {
  width: 14px;
  height: 14px;
  stroke-width: 1.4;
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 55%));
  transition: filter 0.18s ease;
}

.hero-slider > .carousel-nav.prev {
  left: 4px;
}

.hero-slider > .carousel-nav.next {
  right: 4px;
}

.hero-slider > .carousel-nav:focus-visible {
  outline: 1px solid rgb(255 255 255 / 85%);
  outline-offset: -3px;
}

.hero-slider > .carousel-nav:active {
  transform: none;
  filter: none;
  box-shadow: none;
}

.hero-slider > .carousel-nav:hover {
  background: transparent;
  box-shadow: none;
}

@media (hover: hover) {
  .hero-slider > .carousel-nav:hover {
    color: var(--white);
  }

  .hero-slider > .carousel-nav:hover svg {
    filter: drop-shadow(0 1px 2px rgb(0 0 0 / 45%)) drop-shadow(0 0 3px rgb(255 255 255 / 28%));
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider > .carousel-nav,
  .hero-slider > .carousel-nav svg {
    transition: none;
  }
}

.hero-slider > .carousel-dots {
  left: 0;
  right: 0;
  bottom: 12px;
  flex-wrap: wrap;
}

.hero-stage {
  position: absolute;
  top: 0;
  left: 0;
  display: block;

  width: 720px;
  height: calc(var(--hero-h) * 1px);

  transform: scale(tan(atan2(100cqw, calc(var(--hero-w) * 1px))));
  transform-origin: top left;
  color: inherit;
  text-decoration: none;
}

.hero-layer {
  position: absolute;
  margin: 0;
}

.hero-layer img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;

  /* One theme knob for how hot the baked-in art reads — bababet ships red-lit
     webp/svg layers that made the whole band one red block. `none` for every
     other theme, so no extra compositing layer where nothing needs toning. */
  filter: var(--art-filter, none);
}

@media (max-width: 768px) {
  .hero-slider {
    --hero-w: 520;
    /* Gövde metni mobilde çizilmiyor (aşağıda), kutu 220'de altı boş kalıyor.
       HER deste için: ana sayfa, /casino, /casino/slots, /casino/live-casino
       aynı `HeroBanner`ı basıyor ve bu kural `.mobile-home-top`a bağlıyken
       yalnız ana sayfa 184'e iniyordu — casino dikeylerinde afiş 36px daha
       yüksekti (ölçüldü 2026-09-08, 390px: 138px'e karşı 165px). */
    --hero-h: 184;
  }

  /* Sahne 720 geniş, kutu 520'sini gösteriyor: sağdaki 200px kırpılıyor. Ana
     sayfa destesinin maskotları 617-695'e kadar uzanıyor ve mobilde tamamen
     kesiliyordu (ölçüldü 2026-09-08, 390px: welcome maskotunun 130px'inin 33'ü
     görünüyordu). Maskot SAĞA demirleniyor: her destede sağ kenar 505'te,
     kırpmanın içinde; casino desteleri zaten oradaydı, onlar 15px kayıyor.
     `!important` şart — `left` slider.json'dan satır içi geliyor. */
  .hero-stage > .hero-mascot {
    left: auto !important;
    right: 215px;
    max-width: 210px;
    /* Kutu mobilde 184 (aşağıda); 12+196'lık maskot kutusu altından taşardı. */
    max-height: 164px;
  }

  /* OKLAR ALT KÖŞEYE. Masaüstünde dikey ortada duruyorlar ve kopyaya
     değmiyorlar (ölçüldü 1440px: çubuk 347-361, metin 369'da başlıyor). Mobilde
     ise sahne daralıyor, kopya 43px'te başlıyor ve 44px'lik dokunma hedefinin
     ortası 41px — blok dikey ortalanınca çubuk doğrudan BAŞLIĞIN üstüne oturdu.
     Aşağıda nokta sırasının hizasında, afişin boş alt köşelerinde duruyorlar;
     `top: auto` şart, yoksa `.carousel-nav`ın top+bottom+auto marjı onları
     tekrar ortalar. */
  .hero-slider > .carousel-nav {
    top: auto;
    bottom: 0;
  }

  /* Maskotun arkasındaki ışık lekesi (sınıfsız, boş div) onunla gelsin. */
  .hero-stage > .hero-layer:empty {
    left: auto !important;
    right: 190px;
  }

  /* Kampanya afişi de sağa demirleniyor: sağ kenarı 520'de, yani kırpmanın tam
     ucunda; yüksekliği mobil kutunun kendisi (184), yoksa 220'lik poster
     alttan kesilirdi. */
  .hero-stage > .hero-bonus-art {
    left: auto !important;
    right: 200px;
    /* `!important` şart: kutu `promoSlides.ts`ten SATIR İÇİ geliyor (720'lik
       sahnenin ölçüsü), mobilde kutu 520 ve yükseklik 184. 245 = 184 × 4/3,
       yani posterin kendi oranı — mobilde hiç kırpılmıyor. */
    width: 245px !important;
    height: 100% !important;
  }
}

.hero-layer.is-crop {
  overflow: hidden;
}

.hero-layer.is-crop img {
  position: absolute;
}

.hero-title {
  font-family: var(--font-slider, var(--font));
  overflow-wrap: anywhere;
  font-size: var(--fs-5xl);
  font-weight: 900;
  line-height: 28.35px;
  text-transform: uppercase;
  white-space: pre-line;
}

.hero-text {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 13.86px;
  white-space: pre-line;
}

.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 25.2px;
  color: var(--white);
  font-size: var(--fs-2xs);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 1px 6px var(--black-a45);
}

.hero-pill.is-gem::before {
  content: "";
  flex: none;
  width: 12px;
  height: 10px;
  --icon-url: url("../images/mobile-diamond.svg");
  background: var(--white);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.hero-mascot {
  filter: drop-shadow(0 0 18px var(--accent-a45));
}

/* KAMPANYA AFİŞİ (hero'daki bonus slaytları — `promoSlides.ts`).
   Yerleşik destenin maskotu kesilmiş bir PNG, bu ise DÖRTGEN bir poster
   (BO'nun kendi görseli, ölçüldü: dokuz kampanyanın dokuzu 768×576). Çerçeveli
   bir fotoğraf kutusu olarak durmasın diye sağ kenardan taşıyor ve sol kenarı
   maskeyle slaydın zeminine eriyor — metnin oturduğu yer o eriyen taraf.
   Maske katmanın KENDİSİNDE: ayrı bir perde katmanı olsaydı mobilde afişle
   birlikte kaymazdı. */
.hero-bonus-art {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--black) 34%);
  mask-image: linear-gradient(90deg, transparent 0%, var(--black) 34%);
}

/* Approved wide scenes already include the left background: no edge mask. */
.hero-stage > .hero-panorama-art {
  width: calc(var(--hero-w) * 1px) !important;
  height: 100% !important;
}
.hero-panorama-art img {
  filter: none;
}

/* Lightning stays behind the artwork; preserve the copy's dark backdrop. */
.hero-stage > .hero-layer:has(img) { z-index: 1; }
.hero-stage > .hero-layer:not(:has(img)):not(:empty) { z-index: 3; }
.hero-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  width: calc(var(--hero-w) * 1px);
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(0 0 0 / .82) 0%, rgb(0 0 0 / .78) 31%, rgb(0 0 0 / .52) 53%, rgb(0 0 0 / .3) 76%, rgb(0 0 0 / .26) 100%);
}
.hero-atmosphere {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--hero-w) * 1px);
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.hero-lightning-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 34% 110% at var(--bolt-x, 72%) 0%, rgb(197 215 255 / .42), rgb(116 153 225 / .14) 42%, transparent 76%),
    linear-gradient(90deg, transparent 32%, rgb(181 204 255 / .08) 67%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
}
.hero-lightning-bolt {
  position: absolute;
  top: -10%;
  left: var(--bolt-x, 72%);
  height: 118%;
  width: 18%;
  stroke: #b7cbea;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: .65;
  transform: translateX(-50%) rotate(var(--bolt-lean, 0deg));
  transform-origin: 50% 0;
  filter: blur(.55px) drop-shadow(0 0 4px rgb(177 204 255 / .5)) drop-shadow(0 0 13px rgb(113 156 243 / .35));
  mask-image: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .8) 48%, transparent 100%);
  opacity: 0;
}
.hero-lightning-sky {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(105deg, transparent 20%, rgb(205 220 255 / .2) 58%, rgb(230 238 255 / .32) 73%, transparent 94%),
    radial-gradient(ellipse at 74% 5%, rgb(224 234 255 / .32), transparent 58%);
  mix-blend-mode: screen;
  opacity: 0;
}
.hero-lightning-main { stroke-width: 1.15; }
.hero-atmosphere.is-flashing .hero-lightning-bolt {
  animation: hero-lightning-bolt-flash 1150ms ease-out both;
}
.hero-atmosphere.is-flashing .hero-lightning-glow {
  animation: hero-lightning-glow-flash 1150ms ease-out both;
}
.hero-atmosphere.is-flashing .hero-lightning-sky {
  animation: hero-lightning-sky-flash 1150ms ease-out both;
}
@keyframes hero-lightning-bolt-flash {
  0%, 100% { opacity: 0; }
  6% { opacity: .48; }
  13% { opacity: .1; }
  20% { opacity: .32; }
  42% { opacity: 0; }
}
@keyframes hero-lightning-glow-flash {
  0%, 100% { opacity: 0; }
  5% { opacity: 1; }
  13% { opacity: .16; }
  18% { opacity: .86; }
  29% { opacity: .1; }
  34% { opacity: .58; }
  72% { opacity: 0; }
}
@keyframes hero-lightning-sky-flash {
  0%, 100% { opacity: 0; }
  4% { opacity: .9; }
  12% { opacity: .12; }
  17% { opacity: .72; }
  27% { opacity: .08; }
  33% { opacity: .46; }
  68% { opacity: 0; }
}
.site-lightning-ambient {
  position: fixed;
  inset: 0;
  z-index: 12600;
  pointer-events: none;
  background: radial-gradient(ellipse at 65% 0%, #e1ecff, #b9cbea 65%, #9daecc);
  mix-blend-mode: screen;
  opacity: 0;
}
.site-lightning-ambient.is-flashing {
  animation: site-lightning-ambient-flash 1150ms ease-out both;
}
@keyframes site-lightning-ambient-flash {
  0%, 100% { opacity: 0; }
  6% { opacity: .045; }
  13% { opacity: .012; }
  20% { opacity: .03; }
  65% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-lightning-bolt, .hero-lightning-glow, .hero-lightning-sky, .site-lightning-ambient { display: none; }
}

/* Sinematik PNG'lerin ten ve malzeme renklerini koru. */
.hero-mascot:has(img[src*="/sliders/corleone-v1/"]) {
  left: 425px !important;
  top: 5px !important;
  width: 270px !important;
  height: 210px !important;
  filter: none;
}

.hero-mascot img[src*="/sliders/corleone-v1/"] {
  filter: none;
}

@media (max-width: 768px) {
  .hero-stage > .hero-mascot:has(img[src*="/sliders/corleone-v1/"]) {
    left: auto !important;
    right: 215px;
  }
}

/* Yukarıdaki temel kurallardan SONRA durmalı (aynı özgüllük, kaynak sırası
   kazanır): mobil afişin ölçüsü ve oluğu buradan geliyor. */
@media (max-width: 768px) {
  .mobile-home-top {
    margin-top: 0;
  }

  /* SAYFA ŞABLONUNA UYUYOR. Afiş eskiden `margin: 0 -15px` ile kabın oluğundan
     dışarı taşıp kenardan kenara, köşesiz basılıyordu: altındaki promo kutuları,
     oyun satırları ve bölüm başlıkları 15px içerideyken taşan tek öğe oydu.
     Artık kabın kendi oluğunu kullanıyor — sağdan da soldan da aynı boşluk. */
  .hero-slider {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* METİN AZALTMA: dört metinden gövde satırı mobilde ÇİZİLMİYOR. 0,69-0,75x
     ölçekte 8-10px'e iniyordu ve söylediği şey başlığın ayrıntısı ("₺100 üzeri
     her yatırıma ₺5.000'e kadar") — yeri promosyon sayfası. Kalan üçü yeter:
     üst yazı (bağlam) + başlık (teklif) + düğme (eylem). */
  .hero-text {
    display: none;
  }

  .hero-pill {
    font-size: 12px;
  }

}

.carousel-dots {
  position: absolute;
  right: 0;
  bottom: 8px;
  left: 0;
  z-index: 5;
  display: flex;
  justify-content: center;
  gap: 6px;

  pointer-events: none;
}

.carousel-dot {
  position: relative;
  width: 6px;
  height: 6px;
  pointer-events: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white-a35);
  cursor: pointer;
  transition:
    width 0.2s ease,
    background 0.2s ease;
}

.carousel-dot::after {
  content: "";
  position: absolute;
  inset: -9px -4px;
}

.carousel-dot[aria-current="true"] {
  width: 18px;
  background: var(--white);
}

.carousel-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: var(--r-md);
  background: var(--white-a08, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--white);
  cursor: pointer;
  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease;
}

.carousel-arrow svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.carousel-arrow.prev svg {
  transform: rotate(180deg);
}

.carousel-arrow:hover {
  background: var(--accent-a30);
  color: var(--white);
}

.carousel-arrow:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.carousel-nav {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;

  margin-block: auto;
  opacity: 0;
  transition:
    opacity 0.2s ease,
    background 0.18s ease,
    color 0.18s ease;
}

.carousel-nav.prev {
  left: 10px;
}

.carousel-nav.next {
  right: 10px;
}

.carousel:hover .carousel-nav,
.carousel-nav:focus-visible {
  opacity: 1;
}

@media (hover: none), (max-width: 768px) {
  .carousel-nav {
    display: none;
  }
}

.mobile-section {
  width: 100%;
  max-width: 100%;
  margin: 20px auto 0;
}

.mobile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 33px;
  margin-bottom: 15px;
}

.mobile-section-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 29.476px;
}

/* A BO-supplied section title ("En Popüler Canlı Casino Oyunları") is longer
   than the hand-picked English ones: keep it on one line and ellipsize. */
.mobile-section-head h2 > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-section-head h2::before {
  content: "";
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  --icon-url: url("../images/mobile-section-star.svg");
  /* The decorative tint, not --secondary: on a red-brand theme the second brand
     hue is another red, and a screen full of red section glyphs is what
     --accent-tint exists to drain. */
  background: var(--accent-tint);
  -webkit-mask: var(--icon-url) center / contain no-repeat;
  mask: var(--icon-url) center / contain no-repeat;
}

.mobile-home-sports .mobile-section-head h2::before {
  --icon-url: url("../images/mobile-section-sports.svg");
}

.mobile-home-live .mobile-section-head h2::before {
  --icon-url: url("../images/mobile-menu-live-casino.svg");
}

.mobile-recent-wins .mobile-section-head h2::before {
  --icon-url: url("../images/mobile-section-recent.svg");
}

.mobile-section-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  height: 34px;
}

.mobile-section-actions .carousel-arrow,
.mobile-section-actions .mobile-view-all {
  height: 100%;
  border: 0;
  border-radius: var(--r-sm, 8px);
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  color: var(--white);
  transition: background 0.16s ease, color 0.16s ease;
}

.mobile-section-actions .carousel-arrow {
  flex: 0 0 32px;
  width: 32px;
}

.mobile-view-all {
  flex: 0 0 auto;
  min-width: 76px;
  padding-inline: 12px;
  white-space: nowrap;
  font-weight: 600;
}

.mobile-section-actions .carousel-arrow:hover,
.mobile-section-actions .mobile-view-all:hover {
  background: var(--white-a08, rgba(255, 255, 255, 0.08));
}

.mobile-section-actions .carousel-arrow:active,
.mobile-section-actions .mobile-view-all:active {
  background: var(--white-a12, rgba(255, 255, 255, 0.12));
  filter: none;
  transform: none;
}

.mobile-section-actions :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.mobile-game-row,
.mobile-sports-row {
  display: flex;
  gap: 8px;
  /* Yatay kaydirma kutusu dikeyi de kirpar (overflow-y: visible mumkun degil):
     hover'da -4px kalkan karo ile golgesi kirpilmasin diye seride bosluk var,
     negatif margin ayni bosluğu disaridan geri aliyor. */
  padding-block: 10px;
  margin-block: -10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.mobile-game-row::-webkit-scrollbar,
.mobile-sports-row::-webkit-scrollbar {
  display: none;
}

.mobile-game-row .casino-game-card {
  flex: 0 0 112.528px;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.mobile-sports-row .sport-tile {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  flex: 0 0 100px;
  width: 100px;
  height: 84px;
  overflow: hidden;
  border-radius: var(--r-xl);

  background:
    radial-gradient(58% 44% at 50% 34%, var(--accent-a25), var(--accent-a00) 70%),
    var(--bg-deep);
  box-shadow:
    inset 0 1px 0 var(--accent-a25),
    0 10px 24px var(--black-a45);
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}

.mobile-sports-row .sport-tile:hover,
.mobile-sports-row .sport-tile:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 var(--accent-a30),
    0 14px 30px var(--black-a45),
    0 4px 18px var(--accent-a16);
}

.mobile-sports-row .sport-tile:active {
  transform: translateY(0) scale(0.97);
  box-shadow:
    inset 0 1px 0 var(--accent-a25),
    0 4px 12px var(--black-a45);
}

.mobile-sports-row span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
}

.mobile-sports-row .sport-tile strong {
  position: relative;
  z-index: 1;
}

.mobile-sports-row span i {
  display: block;
  width: 25.2px;
  height: 25.2px;
  background: linear-gradient(180deg, var(--accent-tint-light), var(--accent-tint-dark));
  -webkit-mask: var(--sport-icon) center / contain no-repeat;
  mask: var(--sport-icon) center / contain no-repeat;
}

.mobile-recent-wins .mobile-section-head {
  height: auto;
  flex-wrap: wrap;
  gap: 10px;
}

.mobile-wins-tabs {
  display: flex;
  flex: 1 1 100%;
  gap: 4px;
  padding: 3px;
  border-radius: var(--r-md);
  background: var(--bg);
}

.mobile-wins-tab {
  flex: 1 1 0;
  height: 29px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.mobile-wins-tab[aria-selected="true"] {
  background: linear-gradient(180deg, var(--accent-dark), var(--accent));
  color: var(--on-accent);
  box-shadow: var(--shadow-accent);
}

.mobile-wins-table-wrap {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.mobile-wins-caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.mobile-wins-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}

.mobile-wins-table thead {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.mobile-wins-table tbody {
  display: block;
  overflow: hidden;
  padding: 6px 0;
  border-radius: var(--r-md);
  background: var(--bg);
}

.mobile-wins-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 52px;
}

.mobile-wins-table thead th {
  padding: 0 8px;
  height: 32px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -0.2642px;
  text-transform: uppercase;
  text-align: left;
  vertical-align: middle;
}

.mobile-wins-table tbody td {
  padding: 0 8px;
  vertical-align: middle;
  border-bottom: 1px solid var(--white-a05);
}

.mobile-wins-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Sütunlar: 1 Oyun · 2 Tarih · 3 Bahis · 4 Çarpan · 5 Ödeme.
   Dar ekranda BAHİS düşer — ödeme ve çarpan zaten kazancın büyüklüğünü
   anlatıyor, tarih ise satırın NE ZAMAN düştüğünü söyleyen tek alan. */
.mobile-wins-table th:nth-child(3),
.mobile-wins-table td:nth-child(3) {
  display: none;
}

.mobile-wins-table th:nth-child(1),
.mobile-wins-table td:nth-child(1) {
  width: 45%;
}

.mobile-wins-table th:nth-child(2),
.mobile-wins-table td:nth-child(2) {
  width: 15%;
}

.mobile-wins-table th:nth-child(4),
.mobile-wins-table td:nth-child(4) {
  width: 16%;
  text-align: center;
}

.mobile-wins-table th:nth-child(5),
.mobile-wins-table td:nth-child(5) {
  width: 24%;
  text-align: right;
}

.mobile-wins-table tbody tr[data-mine] td:first-child {
  box-shadow: inset 2px 0 0 var(--accent);
}

@keyframes mobile-wins-row-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes mobile-wins-flash {
  from {
    background: var(--accent-a25);
  }
}

.mobile-wins-table tbody tr[data-fresh] {
  animation: mobile-wins-row-in 0.4s ease-out;
}

.mobile-wins-table tbody tr[data-fresh] td {
  animation: mobile-wins-flash 1.4s ease-out;
}

.mobile-wins-empty td {
  color: var(--muted);
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: center;
}

.mobile-wins-game {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.mobile-wins-game-icon {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  max-width: none;
  border-radius: var(--r-sm);
  object-fit: cover;
}

.mobile-wins-game-text {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.mobile-wins-game-text strong {
  overflow: hidden;
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mobile-wins-game-text small {
  display: flex;
  gap: 6px;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

/* Tarih + saat, kendi sütununda: gün üstte, saat altında.
   `tabular-nums` ŞART — orantılı rakamlarda saat her saniye bir piksel
   kayar ve sütun titrer; titreyen bir tablo, gerçek bir tablo gibi durmaz. */
.mobile-wins-when {
  display: grid;
  gap: 1px;
  min-width: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.mobile-wins-when strong {
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: -0.2642px;
}

.mobile-wins-when small {
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Yıl dar ekranda düşer: `08.09.2026` 10px'te bile sütuna sığmıyor, `08.09`
   sığıyor. Geniş ekranda geri gelir — bayat bir feed'i "bugün" sanmayalım. */
.mobile-wins-year {
  display: none;
}

.mobile-wins-money {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--fs-base);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2642px;
  white-space: nowrap;
}

.mobile-wins-bet {
  color: var(--muted);
}

.mobile-wins-payout {
  justify-content: flex-end;
  color: var(--white);
}

.mobile-wins-coin {
  position: relative;
  flex: 0 0 15.094px;
  width: 15.094px;
  height: 15.094px;
  overflow: visible;
}

.mobile-wins-coin-bleed {
  position: absolute;
  top: -28.57%;
  right: -42.86%;
  bottom: -71.43%;
  left: -57.14%;
}

/* Bkz. `.mobile-winner-coin-bleed[data-drawn]` — pay gönderilen çizime ait. */
.mobile-wins-coin-bleed[data-drawn] {
  inset: 0;
  display: grid;
  place-items: center;
}

.mobile-wins-coin-bleed[data-drawn] img {
  width: 78%;
  height: 78%;
}

.mobile-wins-coin-bleed img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* Rozet DEĞİL, rakam. Çarpanın etrafındaki hap (dolgu + halka + ışıma) sütunun
   dar olduğu her yerde taşıyordu ve tabloya ait olmayan tek kutuydu; sütunun ne
   olduğunu artık başlık söylüyor ("Çarpan"), kutuya gerek yok. */
.mobile-wins-multiplier {
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2642px;
  white-space: nowrap;
}

/* Büyük vuruş yalnız RENKLE ayrılıyor — arka planla değil. */
.mobile-wins-multiplier[data-hot] {
  color: var(--accent-light);
}

@media (min-width: 769px) {
  .mobile-recent-wins .mobile-section-head {
    flex-wrap: nowrap;
  }

  .mobile-wins-tabs {
    flex: 0 0 auto;
  }

  .mobile-wins-tab {
    height: 31px;
    padding: 0 16px;
    font-size: var(--fs-md);
  }

  .mobile-wins-table-wrap {
    max-width: none;
  }

  .mobile-wins-table th:nth-child(3),
  .mobile-wins-table td:nth-child(3) {
    display: table-cell;
    width: 17%;
  }

  .mobile-wins-table th:nth-child(1),
  .mobile-wins-table td:nth-child(1) {
    width: 34%;
  }

  .mobile-wins-table th:nth-child(2),
  .mobile-wins-table td:nth-child(2) {
    width: 14%;
  }

  .mobile-wins-table th:nth-child(4),
  .mobile-wins-table td:nth-child(4) {
    width: 12%;
  }

  .mobile-wins-table th:nth-child(5),
  .mobile-wins-table td:nth-child(5) {
    width: 23%;
  }

  .mobile-wins-table tbody tr {
    height: 58px;
  }

  .mobile-wins-table tbody td,
  .mobile-wins-table thead th {
    padding: 0 16px;
  }

  .mobile-wins-table thead th {
    font-size: var(--fs-base);
  }

  .mobile-wins-game-text strong {
    font-size: var(--fs-lg);
  }

  .mobile-wins-game-text small,
  .mobile-wins-money {
    font-size: var(--fs-base);
  }

  .mobile-wins-year {
    display: inline;
  }

  .mobile-wins-when strong {
    font-size: var(--fs-base);
  }

  .mobile-wins-game-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-wins-table tbody tr[data-fresh],
  .mobile-wins-table tbody tr[data-fresh] td {
    animation: none;
  }
}

.mobile-bottom-nav {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 200;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;

  padding:
    6px
    max(var(--mobile-gutter), env(safe-area-inset-right, 0px))
    calc(8px + env(safe-area-inset-bottom, 0px))
    max(var(--mobile-gutter), env(safe-area-inset-left, 0px));
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;

  background: var(--panel);
  box-shadow:
    0 -14px 34px var(--black-a45),
    inset 0 1px 0 var(--white-a10);
  transform: none;
}

.mobile-bottom-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--panel);
}

.mobile-bottom-nav-tabs {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.mobile-bottom-nav-item,
.mobile-bottom-nav a {
  --tab-accent: var(--mobile-accent);
  --tab-glow: var(--accent-a55);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex: 1 1 0;
  min-width: 0;
  padding: 3px 2px 4px;
  color: var(--mobile-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.22s ease;
}

.mobile-bottom-nav-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 26px;
  color: inherit;
  transition: transform 0.18s ease;
}

.mobile-bottom-nav-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  transition:
    transform 0.2s ease,
    fill 0.2s ease,
    filter 0.2s ease;
}

.mobile-bottom-nav-label {
  display: block;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  transition: color 0.22s ease;
}

.mobile-bottom-nav-item.active,
.mobile-bottom-nav a.active {
  color: var(--tab-accent);
}

.mobile-bottom-nav-item.active .mobile-bottom-nav-icon svg,
.mobile-bottom-nav a.active .mobile-bottom-nav-icon svg {
  fill: currentColor;
  filter: drop-shadow(0 0 6px var(--tab-glow));
}

.mobile-bottom-nav-item:active .mobile-bottom-nav-icon,
.mobile-bottom-nav a:active .mobile-bottom-nav-icon {
  transform: scale(0.9);
}

/* The centre action is flat like every other tab: the site's own (white) mark,
   no disc, no ring, no pulse. It just runs taller than the 24px stroke icons. */
.mobile-bottom-nav .mobile-bottom-nav-item--home .mobile-bottom-nav-icon {
  width: auto;
  height: 42px;
  margin-top: -10px;
}

.mobile-bottom-nav .mobile-bottom-nav-item--home .mobile-bottom-nav-icon img {
  display: block;
  width: auto;
  height: 42px;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px var(--black-a45));
  transition: filter 0.22s ease;
}

.mobile-bottom-nav .mobile-bottom-nav-item--home.active .mobile-bottom-nav-icon img {
  filter: drop-shadow(0 0 8px var(--accent-a55)) drop-shadow(0 2px 4px var(--black-a45));
}

.mobile-bottom-nav [data-nav-id="bonus"] .mobile-bottom-nav-icon::after,
.mobile-bottom-nav [data-nav-id="bonus"] .mobile-bottom-nav-icon::before {
  content: "";
  position: absolute;
  top: 0;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.mobile-bottom-nav [data-nav-id="bonus"] .mobile-bottom-nav-icon::after {
  background: var(--tab-accent);
}

.mobile-bottom-nav [data-nav-id="bonus"] .mobile-bottom-nav-icon::before {
  box-shadow: 0 0 0 7px var(--accent-a55);
  animation: mobile-dock-bonus-pulse 2.2s ease-out infinite;
}

@keyframes mobile-dock-bonus-pulse {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  70%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav [data-nav-id="bonus"] .mobile-bottom-nav-icon::before {
    animation: none;
    opacity: 0;
  }
}

/* Auth owns the entire mobile viewport, including when opened over a game. */
.mobile-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 12700;
}

.mobile-auth-overlay .mobile-auth-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-deep-a90);
}

.mobile-auth-sheet {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
  width: 100%;
  max-width: 100%;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-padding-block: 96px 24px;
  padding: 0 max(20px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  border-radius: 0;
  background: var(--mobile-bg);
  transform: none;
}

.mobile-auth-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(80px + env(safe-area-inset-top, 0px));
  padding: calc(12px + env(safe-area-inset-top, 0px)) 48px 12px;
  margin-bottom: 16px;
  background: var(--mobile-bg);
}

.mobile-auth-close {
  position: absolute;
  right: 0;
  top: calc(18px + env(safe-area-inset-top, 0px));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--mobile-muted);
  font-size: var(--fs-4xl);
  line-height: 1;
}

.mobile-auth-logo {
  display: flex;
  justify-content: center;
  margin: 0;
}

.mobile-auth-logo img {
  width: 134px;
  height: 50px;
  object-fit: contain;
}

/* The password-reset page shares this surface without the auth header. */
.mobile-auth-sheet > .mobile-auth-logo {
  padding-top: calc(24px + env(safe-area-inset-top, 0px));
  margin-bottom: 24px;
}

.mobile-auth-tabs,
.mobile-auth-form {
  width: 100%;
  max-width: 440px;
  margin-inline: auto;
}

.mobile-auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 20px;
  gap: 4px;
  padding: 4px;
  border-radius: var(--r-lg);
  background: var(--mobile-panel);
}

.mobile-auth-tabs button {
  min-height: 44px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--mobile-muted);
  font-weight: 800;
}

.mobile-auth-tabs .active {
  background: var(--mobile-accent);
  color: var(--white);
}

.mobile-auth-sheet[data-mode="signup"] .mobile-auth-tabs .active {
  background: var(--secondary);
}

.mobile-auth-sheet[data-mode="signup"] .mobile-submit {
  background: linear-gradient(180deg, var(--secondary-dark) 0%, var(--secondary) 100%);
}

.mobile-auth-form {
  display: grid;
  gap: 12px;
}

.mobile-auth-form input,
.mobile-auth-form select,
.mobile-auth-form textarea {
  width: 100%;
  height: 51px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--white);
  padding: 0 20px;
  font-size: 16px;
  font-weight: 800;
}

.mobile-auth-form .auth-fields {
  display: grid;
  gap: 14px;
}

.mobile-auth-form .auth-field input,
.mobile-auth-form .auth-field select {
  border: 1px solid var(--white-a14);
  font-weight: 600;
}

.mobile-auth-form .auth-field:focus-within > span {
  color: var(--text);
}

.mobile-auth-form .auth-field {
  scroll-margin-block: 96px 24px;
}

.mobile-auth-form .forgot-link,
.mobile-auth-form .auth-back {
  min-height: 44px;
}

.mobile-auth-sheet :focus-visible {
  outline: 2px solid var(--mobile-accent);
  outline-offset: 3px;
}

.mobile-auth-form label {
  display: grid;
  gap: 6px;
  color: var(--mobile-muted);
  font-weight: 800;
}

.mobile-auth-form label.mobile-check {
  display: flex;
}
.mobile-auth-form[data-error="true"] input {
  box-shadow: 0 0 0 1px var(--red) inset;
}

.mobile-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: var(--fs-md);
  line-height: 1.2;
}

.mobile-check input {
  width: 26px;
  height: 26px;
}

.mobile-submit {
  height: 55px;
  font-size: var(--fs-xl);
}

html.mobile-drawer-open {
  overflow: hidden;
}

.mobile-drawer {
  width: 255px;
  min-height: 844px;
  padding: 10px 9px;
  background: var(--mobile-panel);
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-drawer::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.mobile-drawer-banners {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72.72px;
  gap: 9.09px;
}

.mobile-drawer-telegram {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-sm);
}

/* Telegram card. Cut from the promo title-card recipe (promotions.css): a
   poster-lit dark face with the theme's tint blooming out of the lower corner,
   a lit hairline along the top, engraved serif caps and a plate for the handle.
   It reads the same theme knobs the promo cards do (`--promo-card-tint`,
   `--promo-card-shadow`, `--promo-plate-radius`), so bababet's tight framed
   look and the stock soft card both come out of colors.json — nothing here is
   pinned to one theme.

   The plane is a WATERMARK, not a second object competing with the copy: it
   bleeds off the lower-right corner, larger than the old parked mark, and a
   vignette (`::before`, the stage's own scrim) sits between it and the text.
   That is what buys the title the card's FULL width — it used to be capped at
   a hand-tuned 104px so it would clear the plane, which still overlapped in the
   255px drawer and left the desktop rail's last 60px empty. */
.mobile-drawer-telegram {
  /* Same knob the promo cards mix off: a theme that drains --accent-tint to
     neutral (bababet does, on purpose) still points this card at its brand. */
  --tg-tint: var(--promo-card-tint, var(--accent));
  --tg-gold: color-mix(in srgb, var(--tg-tint) 72%, var(--white));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 6px;
  box-sizing: border-box;
  width: 100%;
  height: 90.9px;
  padding: 8px 11px;
  border: 0;

  /* Stage light, in the promo card's own order: vignette last-painted at the
     top of the stack sits BELOW the children, so the scrim that dims the
     watermark is `::before`, not another background layer here. */
  background:
    radial-gradient(80% 90% at 6% -6%, var(--white-a08), transparent 62%),
    linear-gradient(158deg, color-mix(in srgb, var(--tg-tint) 14%, var(--panel-2)), var(--bg-deep));
  box-shadow: var(--promo-card-shadow, 0 10px 26px -20px var(--black-a95));
  color: var(--text);
  text-decoration: none;
  cursor: pointer;
}

/* The scrim: the stage vignette, above the watermark and below the copy. Two
   lines of serif caps over a bright plane tail was the one thing the old card
   could not fix by moving the plane, because at 155px there is nowhere to move
   it to. */
.mobile-drawer-telegram::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(120% 100% at 34% 40%, transparent 30%, var(--black-a60) 100%);
  pointer-events: none;
}

/* The lit edge, straight off `.promo-card-body::before` — the poster's own
   hairline, gold at the middle and gone at the corners. */
.mobile-drawer-telegram::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--tg-gold) 50%, transparent);
  opacity: 0.45;
}

/* The tint bloom the plane flies out of (`.promo-card-glow`). It was in the
   markup all along with `display: none` on it. */
.mobile-drawer-telegram-glow {
  position: absolute;
  right: -26px;
  bottom: -34px;
  z-index: 0;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tg-tint) 42%, transparent), transparent 70%);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

.mobile-drawer-telegram-plane {
  position: absolute;
  right: -16px;
  bottom: -20px;
  z-index: 0;
  width: 88px;
  height: 88px;
  /* Banked, not parked: the old mark sat square in the corner like a sticker. */
  rotate: -8deg;
  filter: drop-shadow(0 4px 10px var(--black-a60));
  pointer-events: none;
  transition: rotate 0.22s ease, translate 0.22s ease;
}

.mobile-drawer-telegram-title {
  position: relative;
  z-index: 2;
  font-family: var(--font-serif);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.22;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tg-gold) 30%, var(--white));
  text-shadow: 0 2px 10px var(--black-a95);
}

.mobile-drawer-telegram-handle {
  position: relative;
  z-index: 2;
  padding: 3px 8px;
  border-radius: var(--promo-plate-radius, var(--r-xs));
  background: color-mix(in srgb, var(--tg-tint) 14%, var(--white-a05));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tg-gold) 22%, transparent);
  color: color-mix(in srgb, var(--tg-gold) 62%, var(--white));
  font-family: var(--font-serif);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

/* Hover: the bloom comes up, the plane banks a little further and climbs, and
   the handle plate turns into the promo CTA's solid gold. One gesture. */
.mobile-drawer-telegram:hover .mobile-drawer-telegram-glow,
.mobile-drawer-telegram:focus-visible .mobile-drawer-telegram-glow {
  opacity: 1;
}

.mobile-drawer-telegram:hover .mobile-drawer-telegram-plane,
.mobile-drawer-telegram:focus-visible .mobile-drawer-telegram-plane {
  rotate: -14deg;
  translate: 4px -4px;
}

.mobile-drawer-telegram:hover .mobile-drawer-telegram-handle,
.mobile-drawer-telegram:focus-visible .mobile-drawer-telegram-handle {
  background: linear-gradient(180deg, color-mix(in srgb, var(--tg-gold) 82%, var(--white)), var(--tg-tint));
  color: var(--accent-black);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer-telegram-plane {
    transition: none;
  }

  .mobile-drawer-telegram:hover .mobile-drawer-telegram-plane,
  .mobile-drawer-telegram:focus-visible .mobile-drawer-telegram-plane {
    rotate: -8deg;
    translate: none;
  }
}

.mobile-search {
  display: flex;
  align-items: center;
  gap: 9.09px;
  height: 45.45px;
  margin: 9.09px 0 4px;
  padding: 0 13.63px;
  border-radius: var(--r-sm);
  background: var(--panel-2);
}

.mobile-search-icon {
  flex: 0 0 17.271px;
  width: 17.271px;
  height: 17.271px;
  transform: scaleY(-1) rotate(180deg);
}

.mobile-search-icon img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}

.mobile-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--white);
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: normal;
}

.mobile-search input::placeholder {
  color: var(--muted);
}

.mobile-search {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
}

.mobile-search-input {
  cursor: text;
}

.mobile-search-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
  transition: transform 160ms ease;
}

.mobile-search-kbd {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: var(--r-xs);
  background: var(--white-a05);
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 800;
  line-height: 1;
  transition:
    color 160ms ease,
    border-color 160ms ease;
}

.mobile-search-go-icon {
  display: none;
  transform: scaleY(-1) rotate(180deg);
}

.mobile-search-go:hover {
  transform: scale(1.06);
}

.mobile-search-go:hover .mobile-search-kbd {
  color: var(--accent);
}

.mobile-menu-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0;
}

.mobile-menu-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.mobile-menu-sublist {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  margin-top: 0;
  pointer-events: none;
  transition:
    grid-template-rows 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    margin-top 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu-group.is-open .mobile-menu-sublist {
  grid-template-rows: 1fr;
  margin-top: 0;
  pointer-events: auto;
}

.mobile-menu-sublist-inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
  margin-left: 18px;
  padding-left: 12px;
}

.mobile-menu-sublist .mobile-menu-row {
  font-size: var(--fs-md);
}

.mobile-menu-group.is-open .mobile-menu-chevron img {
  transform: rotate(0deg);
}

.mobile-menu-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: var(--fs-lg);
  font-weight: 600;
  line-height: normal;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.mobile-menu-row.is-active,
.mobile-menu-row.is-active .mobile-menu-label {
  color: var(--white);
}

.mobile-menu-row--toggle {
  justify-content: flex-start;
}

.mobile-menu-row--nested {
  padding-left: 9.09px;
  font-size: var(--fs-md);
}

.mobile-menu-icon {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.mobile-menu-label {
  flex: 1 1 auto;
  min-width: 0;
}

.mobile-menu-chevron {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-left: auto;
}

.mobile-menu-chevron img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  transform: rotate(-90deg);
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-sublist {
    transition: none;
  }

  .mobile-menu-chevron img {
    transition: none;
  }
}

.mobile-menu-row--badge {
  gap: 11.817px;
}

.mobile-menu-badge {
  flex: 0 0 auto;
  height: 19.089px;
  margin-left: auto;
  padding: 3.64px 7.27px 0;
  border-radius: var(--r-xs);
  background: var(--accent-bright-a10);
  color: var(--accent-bright);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: normal;
}

.mobile-menu-divider {
  width: 100%;
  height: 0.909px;
  margin: 0;
  padding: 4px 0;
  border: 0;
  background: var(--stroke);
  background-clip: content-box;
}

.mobile-menu-list {
  --row-accent: var(--accent-l72);
}

.mobile-menu-row {
  position: relative;
  border-radius: var(--r-sm);

  color: var(--muted-5);
  letter-spacing: 0.01em;
  transition:
    background-color 0.16s ease,
    color 0.16s ease;
}

.mobile-menu-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 2px;
  height: 0;
  border-radius: 0 var(--r-hair) var(--r-hair) 0;
  background: var(--row-accent);
  transform: translateY(-50%);
  transition: height 0.2s ease;
}

.mobile-menu-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  -webkit-mask: var(--icon-url, linear-gradient(transparent, transparent)) center / contain no-repeat;
  mask: var(--icon-url, linear-gradient(transparent, transparent)) center / contain no-repeat;
}

.mobile-menu-icon--casino {
  --icon-url: url("/assets/images/mobile-menu-casino.svg");
}
.mobile-menu-icon--favorites {
  --icon-url: url("/assets/images/mobile-menu-favorites.svg");
}
.mobile-menu-icon--hot {
  --icon-url: url("/assets/images/mobile-menu-hot.svg");
}
.mobile-menu-icon--slots {
  --icon-url: url("/assets/images/mobile-menu-slots.svg");
}
.mobile-menu-icon--live {
  --icon-url: url("/assets/images/mobile-menu-live-casino.svg");
}
.mobile-menu-icon--rtp {
  --icon-url: url("/assets/images/mobile-menu-rtp.svg");
}
.mobile-menu-icon--table {
  --icon-url: url("/assets/images/mobile-menu-table-games.svg");
}
.mobile-menu-icon--providers {
  --icon-url: url("/assets/images/mobile-menu-providers.svg");
}
.mobile-menu-icon--sports {
  --icon-url: url("/assets/images/mobile-menu-sports.svg");
}
.mobile-menu-icon--predictions {
  --icon-url: url("/assets/images/mobile-menu-predictions.svg");
}
.mobile-menu-icon--bonus {
  --icon-url: url("/assets/images/mobile-menu-bonus.svg");
}
.mobile-menu-icon--affiliate {
  --icon-url: url("/assets/images/mobile-menu-affiliate.svg");
}
.mobile-menu-icon--vip {
  --icon-url: url("/assets/images/mobile-menu-vip.svg");
}
.mobile-menu-icon--profile {
  --icon-url: url("/assets/images/mobile-menu-profile.svg");
}
.mobile-menu-icon--help {
  --icon-url: url("/assets/images/mobile-menu-help.svg");
}
.mobile-menu-icon--call {
  --icon-url: url("/assets/images/mobile-menu-call.svg");
}

@media (hover: hover) {
  .mobile-menu-row:hover {
    background-color: var(--white-a05);
    color: var(--white);
  }
}

/* Menunun en altindaki hizli bonus dugmesi: satir degil EYLEM, o yuzden
   accent zeminli. Ayni recete .btn--primary'de (yukarida) — yeni bir renk
   uydurulmuyor, temanin kendi vurgusu. */
.mobile-menu-row--cta {
  margin-top: 2px;
  background: linear-gradient(
    180deg,
    var(--accent-light) 0%,
    var(--accent) 52%,
    var(--accent-dark) 100%
  );
  box-shadow: var(--shadow-accent), inset 0 1px 0 var(--white-a40);
  color: var(--on-accent);
  font-weight: 800;
}

.mobile-menu-row--cta::before {
  content: none;
}

@media (hover: hover) {
  .mobile-menu-row--cta:hover {
    background-color: transparent;
    color: var(--on-accent);
    filter: brightness(1.06);
  }
}

.mobile-menu-row.is-active {
  background-color: var(--white-a08);
}

.mobile-menu-row.is-active::before {
  height: 58%;
}

.mobile-menu-row.is-active .mobile-menu-icon::after {
  background: var(--row-accent);
}

.mobile-menu-group.is-open > .mobile-menu-row--toggle {
  color: var(--white);
}

.mobile-menu-chevron img {
  opacity: 0.45;
  transition:
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.2s ease;
}

.mobile-menu-group.is-open .mobile-menu-chevron img {
  opacity: 0.75;
}

.mobile-menu-badge {
  background: var(--accent-a12);
  color: var(--row-accent);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-row {
    transition: none;
  }
}

.mobile-giveaway-card {
  position: relative;
  display: block;
  width: 100%;
  height: 112px;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--r-md);
  background: var(--panel);
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.mobile-giveaway-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.mobile-giveaway-card:hover .mobile-giveaway-photo {
  transform: scale(1.05);
}

.mobile-giveaway-card:hover .mobile-giveaway-action {
  background: var(--accent-light);
}

/* Full-bleed banner again (themes/<t>/…/mobile-giveaway-car.webp, generated by
   tools/tema-uret.py BANNERLER): the scene keeps its left half unlit, which is
   where the title and the CTA sit. */
.mobile-giveaway-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 62% 50%;
  transition: transform 0.4s ease;
}

/* Legibility: dark wash top-left for the title, fade at the bottom under the button. */
.mobile-giveaway-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.38) 0%, rgb(0 0 0 / 0) 45%, rgb(0 0 0 / 0.5) 100%),
    linear-gradient(90deg, rgb(0 0 0 / 0.42) 0%, rgb(0 0 0 / 0) 65%);
  pointer-events: none;
}

.mobile-giveaway-title {
  position: absolute;
  left: 12px;
  top: 10px;
  z-index: 2;
  margin: 0;
  color: var(--white);
  /* The payout line is the whole message — at --fs-lg it read as a caption next
     to the artwork. The small first line rides off this size (0.6em). */
  font-size: 20px;
  font-weight: 900;
  line-height: 1.1;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.6);
  white-space: nowrap;
}

.mobile-giveaway-title span {
  display: block;
}

.mobile-giveaway-title span:first-child {
  font-size: 0.6em;
  letter-spacing: 0.06em;
  opacity: 0.85;
}

.mobile-giveaway-title span:last-child {
  color: var(--accent-light);
}

.mobile-giveaway-action {
  position: absolute;
  /* Under the title, not centred: the art now owns the right side and a centred
     pill sat on top of it. */
  left: 12px;
  bottom: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 28px;
  padding: 0 14px;
  white-space: nowrap;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--white);
  font-size: var(--fs-base);
  font-weight: 800;
  line-height: 1;
  text-align: center;
}

.mobile-wallet-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--muted-a10);
}

.mobile-wallet-tabs button {
  height: 52px;
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--mobile-muted);
  font-size: var(--fs-xl);
  font-weight: 800;
}

.mobile-wallet-tabs .active {
  border-color: var(--mobile-accent);
  color: var(--white);
}

.mobile-wallet-selects {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 20px;
}

.mobile-wallet-selects label {
  display: grid;
  gap: 5px;
  color: var(--muted-2);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.mobile-wallet-selects button {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--white);
  padding: 0 18px;
  font-size: var(--fs-xl);
  font-weight: 800;
}

.mobile-wallet-selects img {
  width: 25px;
  height: 25px;
}

.mobile-wallet-selects em {
  margin-left: auto;
  color: var(--mobile-muted);
  font-style: normal;
}

.mobile-address {
  position: relative;
  display: flex;
  align-items: center;
  height: 50px;
  margin-top: 0;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  overflow: hidden;
}

.mobile-address span {
  flex: 1;
  min-width: 0;
  padding: 0 54px 0 22px;
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mobile-address button {
  position: absolute;
  right: 7px;
  top: 7px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--accent-dark) 0%, var(--accent) 100%);
}

.mobile-address button img {
  width: 16px;
  height: 16px;
}

.mobile-address button.copied img {
  opacity: 0;
}

.mobile-address button.copied::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--bg);
  font-size: var(--fs-xl);
  font-weight: 900;
}

.mobile-scroll-shell {
  min-height: 844px;
  padding-bottom: 112px;
}

.mobile-crash-shell {
  min-height: 3040px;
}

.mobile-profile-shell {
  min-height: 3705px;
}

.mobile-auth-screen {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--mobile-bg);
}

.mobile-auth-screen .mobile-bottom-nav {
  display: none;
}

.mobile-auth-screen .mobile-auth-sheet {
  position: relative;
  top: 0;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;

  min-height: 100dvh;
  border-radius: 0;
  height: 100dvh;
}

.mobile-auth-screen .mobile-auth-backdrop {
  position: fixed;
  inset: 0;
  background: var(--bg-deep-a90);
}

.mobile-casino-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  margin-top: 4px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--white-a55);
}

.mobile-casino-search img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.6;
}

.mobile-casino-search input {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--white);
  font: 500 12px/1 Montserrat, sans-serif;
}

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

.mobile-casino-search button {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--white-a55);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.16s;
}

.mobile-casino-search button:hover {
  color: var(--white);
}

.mobile-crash-chart {
  position: relative;
  height: 550px;
  overflow: hidden;
  background: var(--bg);
}

[data-crash-pane] {
  display: none;
}

[data-crash-pane].active {
  display: block;
}

.mobile-profile-hero {
  width: 100%;
  height: 200px;
  background: var(--img-mobile-profile-hero) center / cover no-repeat;
}

.mobile-profile-shell .mobile-profile-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 16px 15px 14px;
}

.mobile-profile-head .mobile-profile-avatar {
  position: relative;
  flex: 0 0 64px;
}

.mobile-profile-head .mobile-profile-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--mobile-accent);
}

.mobile-profile-head .mobile-profile-avatar-trigger {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 50%;
  cursor: pointer;
}

.mobile-profile-head .mobile-profile-avatar .mobile-profile-edit-photo {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: var(--mobile-accent);
  color: var(--black);
  font-size: var(--fs-base);
  cursor: pointer;
}

.mobile-profile-head .mobile-profile-avatar .mobile-profile-edit-photo {
  display: grid;
  place-items: center;
  text-decoration: none;
}

.mobile-profile-head .mobile-profile-meta h1 {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: 800;
}

.mobile-profile-head .mobile-profile-meta p {
  margin: 3px 0 0;
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  font-weight: 600;
}

.mobile-profile-card {
  width: auto;
  max-width: 100%;
  margin: 0 var(--prof-gutter) 14px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--bg);
}

.mobile-profile-card h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-size: var(--fs-xl);
}

.mobile-profile-assets {
  padding: 12px;
}

.mobile-profile-balance-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.mobile-profile-balance-row div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  min-width: 0;
}

.mobile-profile-balance-row div span {
  font-size: var(--fs-base);
  color: var(--mobile-muted);
}

.mobile-profile-balance-row strong {
  font-size: clamp(var(--fs-lg), 4.2vw, var(--fs-2xl));
  white-space: nowrap;
}

.mobile-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mobile-profile-actions a,
.mobile-profile-actions button {
  display: grid;
  place-items: center;
  height: 44px;
  border: 0;
  border-radius: var(--r-md);
  background-image: var(--btn-material);
  background-size: var(--btn-material-size);
  box-shadow: inset 0 1px 0 var(--btn-sheen), inset 0 -1px 0 var(--black-a45);
  color: var(--white);
  font-weight: 800;
  text-decoration: none;
  text-shadow: 0 1px 1px var(--black-a30);
}

.mobile-profile-actions button:last-child {
  background: var(--mobile-panel);
}

.mobile-edit-form {
  display: grid;
  gap: 16px;
}

.mobile-edit-form label {
  display: grid;
  gap: 8px;
  color: var(--mobile-muted);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.mobile-edit-form input,
.mobile-edit-form select {
  height: 50px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--white);
  padding: 0 20px;
  font-weight: 800;
}

.mobile-vip-progress {
  display: block;
  height: 10px;
  margin: 16px 0 8px;
  border-radius: var(--r-pill);
  background: var(--mobile-panel);
  overflow: hidden;
}

.mobile-vip-progress i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark) 0%, var(--accent) 100%);
}

.mobile-wallet-pane {
  display: none;
}

.mobile-wallet-pane.active {
  display: block;
}

.mobile-wallet-field {
  display: grid;
  gap: 8px;
  margin-top: 20px;
}

.mobile-wallet-field span {
  color: var(--muted-2);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.mobile-wallet-field input {
  height: 55px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--white);
  padding: 0 20px;
  font-weight: 800;
}

.mobile-wallet-field .mobile-wallet-hint {
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  font-style: normal;
  font-weight: 700;
}

.mobile-wallet-nudge {
  margin: 0 0 4px;
}

.mobile-wallet-submit {
  height: 55px;
  margin-top: 24px;
  font-size: var(--fs-xl);
}

.wallet-tx {
  margin-top: 18px;
}

.wallet-tx-filters {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--panel);
}

.wallet-tx-field {
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
}

.wallet-tx-field > span {
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.wallet-tx-select,
.wallet-tx-field select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-lg);
  font-weight: 800;
  cursor: pointer;
}

input.wallet-tx-select {
  cursor: text;
}

input.wallet-tx-select::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: 0.55;
  cursor: pointer;
}

.wallet-tx-show {
  height: 46px;
  align-self: end;
  font-size: var(--fs-lg);
}

.wallet-tx-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.wallet-tx-head {
  display: none;
}

.wallet-tx-row {
  position: relative;
  display: grid;
  gap: 8px;
  padding: 14px 46px 14px 14px;
  border-radius: var(--r-md);
  background: var(--panel);
  font-size: var(--fs-md);
  font-weight: 700;
}

.wallet-tx-when {
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: var(--fs-base);
}

.wallet-tx-when strong {
  color: var(--text);
  font-size: var(--fs-md);
}

.wallet-tx-when span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.wallet-tx-when em {
  font-style: normal;
  font-weight: 700;
}

.wallet-tx-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text);
  font-weight: 800;
}

.wallet-tx-copy button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
}

.wallet-tx-copy button img {
  width: 13px;
  height: 13px;
  opacity: 0.6;
}

.wallet-tx-copy button:hover img,
.wallet-tx-copy button.copied img {
  opacity: 1;
}

.wallet-tx-type,
.wallet-tx-amount,
.wallet-tx-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.wallet-tx-cell[data-label]::before {
  content: attr(data-label);
  color: var(--muted);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
}

.wallet-tx-amount.is-up {
  color: var(--amber);
}

.wallet-tx-amount.is-down {
  color: var(--red);
}

.wallet-tx-balance {
  color: var(--accent);
}

.wallet-tx-amount i,
.wallet-tx-balance i {
  font-style: normal;
  opacity: 0.75;
}

.wallet-tx-empty {
  padding: 26px 14px;
  border-radius: var(--r-md);
  background: var(--panel);
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

@media (min-width: 760px) {
  .wallet-tx-filters {
    grid-template-columns: repeat(4, 1fr);
  }

  .wallet-tx-show {
    grid-column: 4;
    min-width: 180px;
    justify-self: end;
  }

  .wallet-tx-list {
    gap: 0;
    border-radius: var(--r-lg);
    background: var(--panel);
    overflow: hidden;
  }

  .wallet-tx-head,
  .wallet-tx-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 0.8fr) minmax(0, 0.8fr) 40px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 0;
  }

  .wallet-tx-head {
    background: var(--bg-deep);
    color: var(--muted);
    font-size: var(--fs-sm);
    font-weight: 800;
    text-transform: uppercase;
  }

  .wallet-tx-row + .wallet-tx-row {
    border-top: 1px solid var(--stroke);
  }

  .wallet-tx-type,
  .wallet-tx-amount,
  .wallet-tx-balance {
    justify-content: flex-start;
  }

  .wallet-tx-cell[data-label]::before {
    content: none;
  }}

.mobile-profile-head,
.mobile-profile-hero,
.mobile-topbar {
  width: 100%;
  max-width: 100%;
}

.mobile-profile-head {
  padding-inline: var(--prof-gutter);
}

.mobile-bottom-nav-item .mobile-bottom-nav-icon,
.mobile-bottom-nav-item span.mobile-bottom-nav-icon {
  flex-shrink: 0;
}

@media (max-width: 380px) {
  .mobile-topbar .mobile-header-chip {
    flex: 0 1 108px;
    width: auto;
    min-width: 96px;
  }

  .mobile-header-actions {
    flex: 0 0 64px;
    width: 64px;
  }

  .mobile-header .mode-switch a {
    gap: 4px;
    font-size: var(--fs-sm);
  }

  .mobile-bottom-nav-item,
  .mobile-bottom-nav a {
    font-size: var(--fs-xs);
    gap: 6px;
  }
}

.mobile-bottom-nav button.mobile-bottom-nav-item {
  margin: 0;
  border: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

html.mobile-overlay-open {
  overflow: hidden;
}

html.app-scroll-lock {
  overflow: hidden;
}

.mobile-app-overlay {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 190;
  overflow: hidden;
  pointer-events: none;
}

.mobile-app-overlay--menu {
  top: var(--mobile-header-h, 0px);
  bottom: 0;
  z-index: 220;
  visibility: hidden;
}

.mobile-app-overlay--menu.is-visible {
  visibility: visible;
}

.mobile-app-overlay--chat {
  top: var(--mobile-header-h, 0px);
  bottom: 0;
  z-index: 195;
}

.mobile-app-overlay--profile {
  top: var(--mobile-header-h, 0px);
  bottom: 0;
  z-index: 210;
}

.mobile-app-overlay.is-open,
.mobile-app-overlay--menu.is-visible {
  pointer-events: auto;
}

.mobile-app-overlay-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  padding: 0;
  background: var(--bg-deep-a78);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.32s ease;
}

.mobile-app-overlay.is-open .mobile-app-overlay-backdrop {
  opacity: 1;
}

.mobile-app-overlay-surface {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--mobile-bg);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mobile-app-overlay--menu .mobile-drawer {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  min-height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  box-shadow: 12px 0 40px var(--black-a35);
  transform: translateX(-105%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.mobile-app-overlay--menu.is-open .mobile-drawer {
  transform: translateX(0);
}

.mobile-app-overlay-sheet,
.mobile-app-overlay-panel {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.mobile-app-overlay-panel {
  box-shadow: 0 -12px 40px var(--black-a45);
  transform: translateY(100%);
}

.mobile-app-overlay-sheet {
  overflow: hidden;
  box-shadow: -12px 0 40px var(--black-a45);
  transform: translateX(105%);
}

.mobile-app-overlay--chat.is-open .mobile-app-overlay-sheet {
  transform: translateX(0);
}

.mobile-app-overlay--chat .mobile-chat-form {
  padding-bottom: calc(var(--mobile-bottom-nav-h, 0px) + 18px);
}

.mobile-app-overlay--profile.is-open .mobile-app-overlay-panel {
  transform: translateY(0);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-app-overlay-sheet {
    background: linear-gradient(
      180deg,
      var(--bg-deep-a65) 0%,
      var(--bg-deep-a85) 100%
    );
    backdrop-filter: blur(28px) saturate(150%);
    -webkit-backdrop-filter: blur(28px) saturate(150%);
  }

  .mobile-app-overlay--chat .mobile-app-overlay-backdrop {
    background: var(--bg-deep-a50);
  }

  .mobile-app-overlay-sheet .mobile-chat {
    background:
      radial-gradient(120% 62% at 100% 0%, var(--accent-a07) 0%, transparent 58%),
      radial-gradient(
        110% 55% at 0% 100%,
        color-mix(in srgb, var(--ice) 6%, transparent) 0%,
        transparent 60%
      );
  }
}

.mobile-app-overlay-body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-app-overlay-body.mobile-profile-shell {
  min-height: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}

.mobile-prof-screen {
  /* ONE gutter for the whole profile window. It used to be typed per block —
     the wallet brought 15px, the edit form 12px, the game list 12px, and every
     pane shared with the desktop screen (messages, bonuses, security, the
     activity tables) brought none at all, so on a phone half the profile ran
     edge to edge while the other half was inset. */
  --prof-gutter: 15px;
  display: flex;
  flex-direction: column;
}

/* Every spoke sits inside this, so the gutter is applied once, here, instead of
   by each pane — including the ones written for the desktop screen, which have
   no reason to know a phone exists. */
.mobile-prof-section {
  padding: 4px var(--prof-gutter) 28px;
}

.mobile-prof-wallet {
  padding: 0;
}

.mobile-prof-subhead {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 15px 12px;
  background: var(--mobile-bg);
  border-bottom: 1px solid var(--mobile-panel-2);
}

.mobile-prof-subhead h2 {
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 800;
  color: var(--mobile-text);
}

.mobile-prof-back {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--mobile-text);
  cursor: pointer;
}

.mobile-prof-back:active {
  transform: translateY(1px);
}

.mobile-prof-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  width: 38px;
  height: 28px;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--mobile-panel-2);
  color: var(--mobile-text);
  cursor: pointer;
}

.mobile-prof-close svg {
  width: 22px;
  height: 22px;
}

.mobile-prof-close:active {
  background: var(--white-a10);
}

.mobile-prof-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin: 0 0 14px;
  padding-inline: var(--prof-gutter);
}

.mobile-prof-nav-row {
  --row-c: var(--mobile-accent);
  display: grid;
  grid-template-columns: 36px 1fr 18px;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--mobile-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}

.mobile-prof-nav-row[data-nav="bonuses"] {
  --row-c: var(--gold);
}

.mobile-prof-nav-row[data-nav="activity"] {
  --row-c: var(--amber);
}

.mobile-prof-nav-row[data-nav="notifications"] {
  --row-c: var(--secondary-light);
}

.mobile-prof-nav-row[data-nav="account"] {
  --row-c: var(--orchid);
}

.mobile-prof-nav-glyph {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--row-c) 14%, transparent);
  color: var(--row-c);
  transition: background 0.16s ease, color 0.16s ease;
}

.mobile-prof-nav-glyph svg {
  width: 20px;
  height: 20px;
}

.mobile-prof-nav-label {
  min-width: 0;
  overflow: hidden;
  font-size: var(--fs-lg);
  font-weight: 800;
  color: var(--mobile-text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-prof-nav-chevron {
  display: grid;
  place-items: center;
  color: var(--mobile-muted);
}

.mobile-prof-nav-row--accent {
  background: var(--accent-a12);
}

.mobile-prof-nav-row--accent .mobile-prof-nav-glyph {
  background: var(--accent);
  color: var(--on-accent);
}

.mobile-prof-nav-row--danger {
  --row-c: var(--red);
}

.mobile-prof-nav-row--danger .mobile-prof-nav-label {
  color: var(--red);
}

.mobile-prof-nav-row:active {
  background: color-mix(in srgb, var(--row-c) 14%, var(--bg));
}

.mobile-prof-nav-row:active .mobile-prof-nav-glyph {
  background: var(--row-c);
  color: var(--bg-deep);
}

.mobile-prof-nav-row--accent:active .mobile-prof-nav-glyph {
  background: var(--accent-dark);
  color: var(--on-accent);
}

.mobile-profile-hub-vip {
  margin: 0 var(--prof-gutter) 14px;
}

.mobile-prof-card {
  width: auto;
  margin: 0 var(--prof-gutter) 14px;
  padding: 16px;
  border-radius: var(--r-md);
  background: var(--bg);
}

.mobile-prof-card > h2 {
  margin: 0 0 12px;
  font-size: var(--fs-xl);
  color: var(--mobile-text);
}

.mobile-prof-card-lead {
  margin: 0 0 12px;
  color: var(--mobile-muted);
  font-size: var(--fs-md);
}

.mobile-prof-verify-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-prof-verify-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 12px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
}

/* After `.mobile-prof-verify-list`, which the nudge also carries and which zeroes
   the margin — the hub's nudge ran edge to edge while the rows under it did not. */
.mobile-prof-nudge {
  margin: 0 var(--prof-gutter) 14px;
}

.mobile-prof-verify-list strong {
  display: block;
  font-size: var(--fs-lg);
  color: var(--mobile-text);
}

.mobile-prof-verify-list span {
  font-size: var(--fs-base);
  color: var(--mobile-muted);
}

.mobile-prof-verify-btn {
  height: 36px;
  padding: 0 14px;
  background: var(--accent-a12);
  color: var(--mobile-accent);
  font-size: var(--fs-md);
}

.mobile-prof-card .mobile-referral-link {
  margin-top: 0;
}

.mobile-prof-edit-form {
  padding: 8px 0 20px;
}

.mobile-edit-avatars strong {
  display: block;
  margin-bottom: 10px;
  color: var(--mobile-muted);
  font-size: var(--fs-lg);
  font-weight: 800;
}

.mobile-edit-avatar-picks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.mobile-edit-avatar-pick {
  aspect-ratio: 1;
  padding: 2px;
  border-radius: 50%;
  background: var(--mobile-panel);
  cursor: pointer;
}

.mobile-edit-avatar-pick img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.mobile-edit-avatar-pick.is-on {
  box-shadow: 0 0 0 3px var(--accent);
}

.mobile-prof-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mobile-prof-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r-lg);
  background: var(--mobile-panel);
}

.mobile-prof-list-row strong {
  display: block;
  color: var(--mobile-text);
  font-size: var(--fs-lg);
}

.mobile-prof-list-row span {
  color: var(--mobile-muted);
  font-size: var(--fs-base);
}

.mobile-prof-list-row em {
  font-style: normal;
  font-weight: 700;
  font-size: var(--fs-lg);
}

.mobile-prof-win {
  color: var(--mobile-accent);
}

.mobile-prof-loss {
  color: var(--red-soft);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-app-overlay-surface,
  .mobile-app-overlay-backdrop,
  .mobile-app-overlay--menu .mobile-drawer {
    transition: none;
  }
}

.mobile-chat {
  --chat-accent: color-mix(in srgb, var(--accent) 45%, var(--ice));

  --chat-line: transparent;

  --chat-bar: var(--panel);
  --chat-hover: var(--white-a08);
  --chat-radius: 16px;
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  isolation: isolate;

  background: var(--mobile-bg);
}

.mobile-chat-pinned {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 0 0 auto;
  margin-bottom: 8px;
  padding: 9px 10px 9px 12px;
  border-radius: var(--r-md);

  background: color-mix(in srgb, var(--chat-accent) 16%, var(--chat-bar));
}

.mobile-chat-pinned-icon {
  flex: 0 0 auto;
  display: flex;
  margin-top: 1px;
  color: var(--chat-accent);
}

.mobile-chat-pinned-icon svg {
  width: 14px;
  height: 14px;
}

.mobile-chat-pinned-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.mobile-chat-pinned-label {
  color: var(--chat-accent);
  font-size: var(--fs-sm);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.mobile-chat-pinned-text {
  color: var(--mobile-text);
  font-size: var(--fs-base);
  line-height: 1.45;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-chat-pinned.is-open .mobile-chat-pinned-text {
  white-space: normal;
  max-height: 32vh;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-chat-pinned-close {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: none;
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  cursor: pointer;
}

.mobile-chat-pinned-close:hover {
  background: var(--white-a08);
  color: var(--mobile-text);
}

.mobile-chat-head {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  background: var(--chat-bar);
}

.mobile-chat button:focus-visible,
.mobile-chat textarea:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--chat-accent) 70%, transparent);
  outline-offset: 2px;
}

.mobile-chat-room {
  position: relative;
  z-index: 7;
  flex: 0 1 auto;
  min-width: 0;
}

.mobile-chat-room-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 6px 9px 6px 8px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white-a08);
  color: var(--mobile-text);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.mobile-chat-room-toggle:hover,
.mobile-chat-room-toggle[aria-expanded="true"] {
  background: color-mix(in srgb, var(--chat-accent) 22%, transparent);
  color: var(--mobile-text);
}

.mobile-chat-room-toggle:active {
  transform: scale(0.97);
}

.mobile-chat-room-flag {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  line-height: 1;
}

.mobile-chat-room-flag svg {
  width: 16px;
  height: 16px;
  color: var(--chat-accent);
}

.mobile-chat-room-name {
  overflow: hidden;
  font-size: var(--fs-md);
  font-weight: 800;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-chat-room-caret {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--mobile-muted);
  transition: transform 0.18s ease;
}

.mobile-chat-room-caret svg {
  width: 13px;
  height: 13px;
}

.mobile-chat-room-toggle[aria-expanded="true"] .mobile-chat-room-caret {
  transform: rotate(180deg);
}

.mobile-chat-room-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 7;
  min-width: 210px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 0;
  border-radius: var(--r-lg);

  background: var(--chip);
  box-shadow: var(--shadow-lg);
  transform-origin: top left;
  animation: mobileChatPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mobileChatPopIn {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-chat-room-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--mobile-text);
  font-size: var(--fs-md);
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background 0.16s ease;
}

.mobile-chat-room-option .mobile-chat-room-name {
  flex: 1 1 auto;
  font-weight: 700;
}

.mobile-chat-room-option.is-active {
  background: var(--accent-a22);
}

.mobile-chat-room-option:hover,
.mobile-chat-room-option:active {
  background: var(--chat-hover);
}

.mobile-chat-room-count {
  flex: 0 0 auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--mobile-muted);
}

.mobile-chat-room-check {
  flex: 0 0 auto;
  color: var(--chat-accent);
  font-weight: 800;
}

.mobile-chat-room-backdrop {
  position: absolute;
  inset: 0;
  z-index: 5;
  border: 0;
  background: transparent;
}
@keyframes mobileChatPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  80%,
  100% {
    transform: scale(2.8);
    opacity: 0;
  }
}

.mobile-chat-close {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  margin-left: auto;
  width: 38px;
  height: 28px;
  border: 0;
  border-radius: var(--r-md);
  background: var(--white-a08);
  color: var(--mobile-text);
  cursor: pointer;
  transition: background 0.16s ease, transform 0.12s ease;
}

.mobile-chat-close svg {
  width: 22px;
  height: 22px;
}

.mobile-chat-close:hover {
  background: var(--chat-hover);
}

.mobile-chat-close:active {
  transform: translateY(1px);
}
.mobile-chat-body {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

/*
 * DURUST BOS EKRAN. Panel iceriginin tamami BO'dan geliyor; marka henuz
 * icerik girmediyse (ya da uc dustuyse) burasi tek satirlik bir aciklama
 * basiyor. Eskiden koda gomulu sahte bir topluluk basiliyordu -- kaldirilan
 * sey tam olarak oydu, o yuzden bos hale bir "yedek metin" DUSURULMEZ.
 */
.mobile-chat-bos {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px 18px;
  color: var(--muted, #9aa4b2);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

.mobile-chat-messages {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  padding: 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;

}

.mobile-chat-jump {
  position: absolute;
  left: 50%;
  bottom: 12px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px 7px 7px;
  border: 0;
  border-radius: var(--r-pill);

  background: var(--chat-accent);
  color: var(--bg-deep);
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transform: translateX(-50%);
  animation: mobileChatJumpIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
  transition: filter 0.16s ease;
}

.mobile-chat-jump:hover {
  filter: brightness(1.1);
}

.mobile-chat-jump svg {
  width: 14px;
  height: 14px;
  color: var(--bg-deep);
}

.mobile-chat-jump-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);

  background: var(--bg-deep);
  color: var(--chat-accent);
  font-size: var(--fs-sm);
  font-weight: 800;
}

@keyframes mobileChatJumpIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%);
  }
}

.mobile-chat-typing {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 2px 2px 42px;
  animation: mobileChatMsgIn 0.24s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-chat-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--chip);
}

.mobile-chat-typing-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mobile-muted);
  animation: mobileChatTypingDot 1.15s ease-in-out infinite;
}

.mobile-chat-typing-dots i:nth-child(2) {
  animation-delay: 0.16s;
}

.mobile-chat-typing-dots i:nth-child(3) {
  animation-delay: 0.32s;
}

@keyframes mobileChatTypingDot {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.mobile-chat-typing-text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--mobile-muted);
}

.mobile-chat-typing-text b {
  font-weight: 800;
}

.mobile-chat-messages::-webkit-scrollbar {
  width: 8px;
}

.mobile-chat-messages::-webkit-scrollbar-track {
  margin: 6px 0;
  background: transparent;
}

.mobile-chat-messages::-webkit-scrollbar-thumb {
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  background-clip: padding-box;
  background-color: var(--accent-a38);
}

.mobile-chat-messages::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent-a55);
}

.mobile-chat-messages::-webkit-scrollbar-thumb:active {
  background-color: var(--accent-a80);
}

.mobile-chat-message {
  display: flex;
  gap: 10px;
  align-items: flex-start;

  animation: mobileChatMsgIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mobileChatMsgIn {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-chat-message,
  .mobile-chat-typing,
  .mobile-chat-typing-dots i,
  .mobile-chat-jump,
  .mobile-chat-room-menu,
  .mobile-chat-react-strip,
  .mobile-chat-reaction,
  .mobile-chat-emoji-panel {
    animation: none;
  }
}

.mobile-chat-message.is-self {
  flex-direction: row-reverse;
}

.mobile-chat-message.is-grouped {
  margin-top: -9px;
}

.mobile-chat-avatar-spacer {
  flex: 0 0 auto;
  width: 32px;
}

.mobile-chat-avatar {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;

  border: 0;
  background: color-mix(in srgb, var(--ring, var(--white)) 22%, var(--chip));
}

.mobile-chat-bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  padding: 9px 12px;
  border-radius: var(--chat-radius);

  border-top-left-radius: 6px;
  background: var(--chip);
  border: 0;
  transition: background 0.18s ease, transform 0.18s ease;
}

@media (hover: hover) {
  .mobile-chat-message:hover .mobile-chat-bubble {
    background: var(--panel-3);
  }
}

.mobile-chat-message.is-self .mobile-chat-bubble {
  flex: 0 1 auto;
  max-width: 86%;
  border-top-left-radius: var(--chat-radius);
  border-top-right-radius: 6px;
  background: color-mix(in srgb, var(--accent) 22%, var(--chip));
}

@media (hover: hover) {
  .mobile-chat-message.is-self:hover .mobile-chat-bubble {
    background: color-mix(in srgb, var(--accent) 30%, var(--chip));
  }
}

.mobile-chat-message.mentions-you .mobile-chat-bubble {
  --chat-accent: var(--secondary);
  background: color-mix(in srgb, var(--secondary) 20%, var(--chip));
}

.mobile-chat-message.is-active .mobile-chat-bubble {
  background: var(--panel-3);
}

.mobile-chat-actions {
  position: absolute;
  top: -17px;
  right: 8px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--panel-3);
  box-shadow: var(--shadow-sm);

  opacity: 0;
  transform: translateY(3px);
  pointer-events: none;
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.mobile-chat-message.is-self .mobile-chat-actions {
  right: auto;
  left: 8px;
}

.mobile-chat-message.is-active .mobile-chat-actions {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (hover: hover) {
  .mobile-chat-message:hover .mobile-chat-actions,
  .mobile-chat-message:focus-within .mobile-chat-actions {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

.mobile-chat-action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--mobile-muted);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}

.mobile-chat-action svg {
  width: 14px;
  height: 14px;
}

.mobile-chat-action:hover,
.mobile-chat-action[aria-expanded="true"] {
  color: var(--chat-accent);
  background: var(--accent-a16);
}

.mobile-chat-react-strip {
  display: flex;
  align-items: center;
  gap: 2px;
  padding-right: 3px;
  margin-right: 1px;
  animation: mobileChatStripIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mobileChatStripIn {
  from {
    opacity: 0;
    transform: translateX(10px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mobile-chat-react-opt {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  font-size: var(--fs-lg);
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.14s ease;
}

.mobile-chat-react-opt:hover {
  background: var(--chat-hover);
  transform: scale(1.18);
}

.mobile-chat-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.mobile-chat-reaction {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--white-a10);
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  line-height: 1.5;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease, transform 0.12s ease;
  animation: mobileChatPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-chat-reaction b {
  font-size: var(--fs-sm);
  font-weight: 800;
}

.mobile-chat-reaction:hover {
  background: var(--white-a14);
}

.mobile-chat-reaction:active {
  transform: scale(0.94);
}

.mobile-chat-reaction.is-mine {
  background: var(--chat-accent);
  color: var(--bg-deep);
}

.mobile-chat-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  row-gap: 4px;
  margin-bottom: 3px;
  font-size: var(--fs-sm);
  color: var(--mobile-muted);
}

.mobile-chat-name {
  padding: 0;
  border: 0;
  background: none;
  color: var(--mobile-text);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: underline transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.16s ease, opacity 0.16s ease;
}

.mobile-chat-name:hover {
  text-decoration-color: currentColor;
}

.mobile-chat-name:active {
  opacity: 0.7;
}

.mobile-chat-meta time {
  margin-left: auto;
}

.mobile-chat-gem {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: var(--r-hair);
  transform: rotate(45deg);
  border: 0;
}

.mobile-chat-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  border-radius: var(--r-xs);
  color: var(--accent-black);
  background: var(--chat-accent);
}

.mobile-chat-badge svg {
  width: 10px;
  height: 10px;
}

.mobile-chat-badge--admin {
  background: var(--red);
  color: var(--white);
}

.mobile-chat-badge--moder {
  background: color-mix(in srgb, var(--blue) 65%, var(--white));
  color: var(--accent-black);
}

.mobile-chat-quote {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-bottom: 6px;
  padding: 6px 9px;
  border-radius: var(--r-sm);

  background: color-mix(in srgb, var(--chat-accent) 16%, var(--panel));
}

.mobile-chat-quote-user {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--chat-accent);
}

.mobile-chat-quote-text {
  overflow: hidden;
  font-size: var(--fs-sm);
  color: var(--mobile-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-chat-bubble p {
  margin: 0;
  font-size: var(--fs-md);
  line-height: 1.4;
  color: var(--mobile-text);
  word-break: break-word;
}

.mobile-chat-mention {
  padding: 0 4px;
  border-radius: var(--r-xs);
  font-weight: 700;
  color: var(--ice);
  background: color-mix(in srgb, var(--ice) 14%, transparent);
}

.mobile-chat-mention.is-you {
  color: var(--chat-accent);
  background: var(--accent-a16);
}

.mobile-chat-form {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));

  background: var(--chat-bar);
}

.mobile-chat-form-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.mobile-chat-form textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 40px;

  max-height: 120px;
  padding: 9px 14px;
  border: 0;
  border-radius: var(--r-2xl);

  background: var(--bg-deep);
  color: var(--mobile-text);
  font: inherit;
  line-height: 1.35;
  resize: none;
  overflow-y: auto;
  transition: background 0.18s ease;

  scrollbar-width: none;
  -ms-overflow-style: none;
}

.mobile-chat-form textarea::-webkit-scrollbar {
  display: none;
}

.mobile-chat-form textarea::placeholder {
  color: var(--mobile-muted);
}

.mobile-chat-form textarea:focus {
  background: color-mix(in srgb, var(--chat-accent) 12%, var(--bg-deep));
}

.mobile-chat-form textarea:focus:not(:focus-visible) {
  outline: none;
}

.mobile-chat-emoji-btn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--white-a08);
  color: var(--mobile-muted);
  cursor: pointer;
  transition: color 0.16s ease, background 0.16s ease, transform 0.12s ease;
}

.mobile-chat-emoji-btn svg {
  width: 19px;
  height: 19px;
}

.mobile-chat-emoji-btn:hover,
.mobile-chat-emoji-btn.is-open {
  color: var(--bg-deep);
  background: var(--chat-accent);
}

.mobile-chat-emoji-btn:active {
  transform: scale(0.94);
}

.mobile-chat-emoji-panel {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  max-height: 148px;
  padding: 8px;
  overflow-y: auto;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--bg-deep);
  animation: mobileChatPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-chat-emoji-opt {
  aspect-ratio: 1;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  transition: background 0.14s ease, transform 0.14s ease;
}

.mobile-chat-emoji-opt:hover {
  background: var(--chat-hover);
  transform: scale(1.15);
}

.mobile-chat-send {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  transition: opacity 0.18s ease, transform 0.12s ease, filter 0.18s ease;
}

.mobile-chat-send svg {
  width: 18px;
  height: 18px;
  margin-left: -1px;
}

.mobile-chat-send:disabled {
  opacity: 0.35;
  cursor: default;
  filter: grayscale(0.5);
}

.mobile-chat-send:not(:disabled):hover {
  filter: brightness(1.1);
}

.mobile-chat-send:not(:disabled):active {
  transform: scale(0.94);
}

.mobile-chat-replybar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 0;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--chat-accent) 16%, var(--bg-deep));
  animation: mobileChatPopIn 0.18s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.mobile-chat-replybar-icon {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--mobile-accent);
}

.mobile-chat-replybar-icon svg {
  width: 15px;
  height: 15px;
}

.mobile-chat-replybar-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
}

.mobile-chat-replybar-text strong {
  color: var(--mobile-accent);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.mobile-chat-replybar-text em {
  overflow: hidden;
  font-style: normal;
  color: var(--mobile-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-chat-replybar-cancel {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: color 0.14s ease, background 0.14s ease;
}

.mobile-chat-replybar-cancel:hover {
  color: var(--mobile-text);
  background: var(--chat-hover);
}

.mobile-notification-item.is-unread .mobile-notification-dot {
  background: var(--notif-accent, var(--mobile-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--notif-accent, var(--mobile-accent)) 45%, transparent);
}

.mobile-prof-nav-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.mobile-prof-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);

  background: color-mix(in srgb, var(--secondary) 15%, transparent);
  color: var(--secondary-light);
  font-size: var(--fs-sm);
  font-weight: 800;
}

.mobile-msg-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  padding: 4px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
}

.mobile-msg-tab {
  flex: 1;
  padding: 9px 6px;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  font-weight: 800;
}

.mobile-msg-tab.is-on {
  background: var(--mobile-accent);
  color: var(--on-accent);
}

.mobile-msg-filters {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.mobile-msg-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
}

.mobile-msg-search input {
  flex: 1;
  min-width: 0;
  height: 44px;
  background: transparent;
  color: var(--white);
  font-weight: 700;
}

.mobile-msg-search button {
  color: var(--mobile-muted);
  font-size: var(--fs-base);
}

.mobile-msg-dates {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mobile-msg-dates label {
  display: grid;
  gap: 6px;
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  font-weight: 800;
}

.mobile-msg-dates input {
  height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--white);
  font: inherit;
  font-size: var(--fs-md);
  font-weight: 700;
}

.mobile-msg-dates input::-webkit-calendar-picker-indicator {
  opacity: 0.6;
  filter: invert(1);
}

.mobile-msg-compose textarea {
  min-height: 140px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--mobile-panel);
  color: var(--white);
  font: inherit;
  font-weight: 700;
  resize: vertical;
}

.mobile-msg-empty {
  padding: 26px 14px;
  border-radius: var(--r-lg);
  background: var(--mobile-panel);
  color: var(--mobile-muted);
  font-size: var(--fs-md);
  text-align: center;
}

.mobile-prof-notifs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.mobile-prof-notifs-head span {
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  font-weight: 700;
}

.mobile-prof-notifs-head button {
  padding: 6px 12px;
  border-radius: var(--r-pill);
  background: var(--accent-a07);
  color: var(--mobile-accent);
  font-size: var(--fs-base);
  font-weight: 800;
}

.mobile-prof-notifs-head button:disabled {
  background: transparent;
  color: var(--mobile-muted);
  opacity: 0.7;
}

.mobile-prof-notif-list {
  /* Gercek bir <ul> (mesaj listesi listedir) — isaretci ve varsayilan bosluk gider. */
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-prof-notif {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 12px 13px;
  border-radius: var(--r-lg);
  background: var(--bg);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.mobile-prof-notif.is-unread {
  background: linear-gradient(180deg, color-mix(in srgb, var(--notif-accent, var(--accent)) 8%, transparent) 0%, var(--bg) 100%);
}

.mobile-prof-notif-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--notif-accent, var(--accent)) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--notif-accent, var(--accent)) 30%, transparent);
  color: var(--notif-accent, var(--accent));
  line-height: 1;
}

.mobile-prof-notif-copy {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.mobile-prof-notif-copy strong {
  color: var(--white);
  font-size: var(--fs-lg);
  font-weight: 800;
  line-height: 1.25;
}

.mobile-prof-notif-copy span {
  color: var(--mobile-muted);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.mobile-prof-notif-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.mobile-prof-notif-meta time {
  color: var(--mobile-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.mobile-prof-notif-meta i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--notif-accent, var(--mobile-accent));
  box-shadow: 0 0 8px color-mix(in srgb, var(--notif-accent, var(--mobile-accent)) 55%, transparent);
}

.game-stage {
  position: relative;
  margin-top: 14px;
  border-radius: var(--r-2xl);
  background:
    radial-gradient(120% 90% at 50% 0%, var(--accent-a07), transparent 60%),
    linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  overflow: hidden;
}

.game-provider {
  margin: 0;
  color: var(--mobile-muted);
  font-size: var(--fs-md);
  font-weight: 700;
}

.game-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.game-play,
.game-demo {
  height: 46px;
  padding: 0 26px;
  font-size: var(--fs-lg);
}

.game-demo:hover {
  background: var(--white-a10);
}

.game-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--white-a05);
  background: var(--black-a20);
}

.game-tool {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  background: var(--white-a05);
  color: var(--mobile-muted);
  cursor: pointer;
}

.game-tool:hover {
  color: var(--mobile-accent);
}

.game-tool svg {
  width: 18px;
  height: 18px;
}

.side-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.side-scroll::-webkit-scrollbar {
  display: none;
}

.side-events {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--panel-a65);
}

.side-vip {
  position: relative;
  display: grid;

  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-areas:
    "avatar head"
    "avatar copy"
    "bar    bar";
  align-items: center;
  gap: 3px 9px;
  width: 100%;
  padding: 8px 9px;
  overflow: hidden;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tier-c, var(--accent)) 24%, transparent) 0%, transparent 64%),
    var(--panel-2);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.side-vip:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.side-vip-art {
  position: absolute;
  right: -12px;
  bottom: -8px;
  width: 56px;
  height: auto;
  opacity: 0.3;

  -webkit-mask: radial-gradient(115% 115% at 100% 100%, var(--black) 38%, transparent 76%);
  mask: radial-gradient(115% 115% at 100% 100%, var(--black) 38%, transparent 76%);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.side-vip:hover .side-vip-art {
  opacity: 0.45;
  transform: translateY(-2px) scale(1.04);
}

.side-vip-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.side-vip-eyebrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--tier-c, var(--accent));
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.side-vip-eyebrow::before {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("/assets/images/mobile-menu-vip.svg") center / contain no-repeat;
  mask: url("/assets/images/mobile-menu-vip.svg") center / contain no-repeat;
}

.side-vip-avatar {
  grid-area: avatar;
  align-self: center;
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--tier-c, var(--accent)), var(--accent));
}

.side-vip-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.side-vip-copy {
  grid-area: copy;
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.side-vip-copy strong {
  overflow: hidden;
  color: var(--white);
  font-size: var(--fs-md);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.side-vip-level {
  flex: 0 0 auto;
  color: var(--tier-c, var(--accent));
  font-size: var(--fs-xs);
  font-weight: 800;
}

.side-vip-bar {
  grid-area: bar;
  position: relative;
  display: block;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--bg-deep);
  overflow: hidden;
}

.side-vip-bar i {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, color-mix(in srgb, var(--tier-c, var(--accent)) 45%, var(--black)), var(--tier-c, var(--accent)));
  box-shadow: 0 0 8px color-mix(in srgb, var(--tier-c, var(--accent)) 70%, transparent);
}

.side-vip-next {
  margin-left: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-app-overlay--menu .mobile-drawer {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 951px) {
  .app-shell.app-fluid .sidebar {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.app-shell .sidebar > .side-scroll {
  display: flex;
  flex-direction: column;
  gap: 15px;

  flex: 1 1 auto;
  min-height: 0;
}

.app-shell .sidebar > .side-scroll > * {
  flex: 0 0 auto;
}

.app-shell .sidebar > .side-events {
  margin-bottom: 8px;
}

.app-shell.sidebar-collapsed .sidebar .side-events {
  display: none;
}

html.is-authed .top-actions .login-button,
html.is-authed .top-actions .register-button,
html.is-authed .mobile-header-auth {
  visibility: hidden;
}

.app-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;

  min-height: min(60vh, 520px);
  min-height: min(60svh, 520px);
  padding: 40px 20px;
  text-align: center;
  color: var(--muted-5);
}

.app-state img {
  width: 148px;
  max-width: 45vw;
  aspect-ratio: 2 / 3;
  height: auto;
  filter: drop-shadow(0 14px 30px var(--accent-a25));
}

.app-state strong {
  font-size: var(--fs-3xl);
  font-weight: 800;
  color: var(--white);
}

.app-state p {
  margin: 0;
  max-width: 42ch;
  font-size: var(--fs-md);
  line-height: 1.6;
}

.app-state-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

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

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

@media (prefers-reduced-motion: reduce) {
  .app-spinner {
    animation-duration: 2.4s;
  }
}

/* ---- Desktop/mobile shell toggle. Lives here, not in globals.css: the app's
   own CSS chunk is emitted by the bundler and can go missing (stale .next in
   dev, 404 on /_next/static/css/app/layout.css) — and when it does, the mobile
   bottom nav shows up on desktop. base.css always loads. */
@media (min-width: 769px) {
  .betgo-view--mobile {
    display: none !important;
  }
}

@media (max-width: 768px) {
  .betgo-view--desktop {
    display: none !important;
  }

  .betgo-view--mobile {
    display: block !important;
  }
}

/* Shared theme-controlled atmosphere for every hero slider. */
/* Duman `screen` ile karışıyor; `.hero-slider` position:relative ama z-index'siz,
   yani KENDİ yığın bağlamı yok — karışım afişin değil, üstteki bir atanın arka
   planıyla hesaplanırdı. `isolate` karışımı afişin içinde tutuyor. */
.hero-slider {
  isolation: isolate;
}

/* Tek yumuşak radial leke, çok yavaş sürükleniyor. Kenarı yok — gradyanın
   kendisi zaten bulanık, `filter: blur()` gereksiz bir katman olurdu.
   `alternate` çünkü gidiş-dönüş dikişsiz, döngü hesabı gerekmiyor. */
.hero-slider::before {
  content: var(--noir, none);
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background-image: radial-gradient(
    46% 82% at 32% 64%,
    color-mix(in srgb, var(--white) 40%, transparent) 0%,
    transparent 72%
  );
  background-size: 170% 170%;
  opacity: 0.08;
  mix-blend-mode: screen;
  animation: hero-noir-drift 44s ease-in-out infinite alternate;
}

@keyframes hero-noir-drift {
  from {
    background-position: 8% 60%;
  }

  to {
    background-position: 92% 34%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider::before {
    animation: none;
  }
}