@layer base, components;

:root {
  --shadow-accent: 0 4px 19px var(--accent-a25);
  --shadow-secondary: 0 4px 19px var(--secondary-a25);
}

html {
  min-width: 320px;
  scrollbar-width: none;
}

body {
  margin: 0;
  font-family: var(--font);

  overflow-x: clip;
  -ms-overflow-style: none;
}

html.modal-open {
  overflow: hidden;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
}

@layer base {
  button,
  input {
    font: inherit;
  }

  button {
    cursor: pointer;
  }
}

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

.app-shell {
  display: block;
  position: relative;
  width: 1920px;
  min-width: 1920px;
  height: 2760px;
  min-height: 2760px;
  margin: 0;
  transform-origin: top left;
}

.app-shell.sidebar-collapsed .sidebar {
  width: 64px;
  padding-right: 0;
}

.app-shell.sidebar-collapsed .content {
  left: 84px;
  width: 1486px;
}

.topbar {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: block;
  width: 1920px;
  height: 83px;
  background: var(--shell-bg, var(--bg-deep));
  border-bottom: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.topbar::after {
  content: "";
  position: absolute;
  left: 96px;
  top: 82px;
  width: 143px;
  height: 1px;
  border-radius: var(--r-4xl) var(--r-4xl) 0 0;
  background: linear-gradient(90deg, var(--accent-a00), var(--accent), var(--accent-a00));
}

.brand,
.top-actions,
.profile-card,
.providers,
.footer-community {
  display: flex;
  align-items: center;
}

.brand {
  position: absolute;
  left: 15px;

  top: 6px;
  gap: 16px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 53px;
  height: 53px;
  border: 0;
  border-radius: var(--r-lg);
  background: var(--panel-2);
  color: var(--text);
}

.icon-button img {
  width: 27px;
  height: 27px;
  object-fit: contain;
  transition: transform 180ms ease;
}

.brand .icon-button svg {
  width: 24px;
  height: 24px;
  fill: none;
}

.logo-image {
  width: 215px;

  height: 72px;
  object-fit: contain;
}

.footer-bottom span {
  color: var(--accent);
}

.seg-switch {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px;
  border-radius: var(--r-md);
  background: var(--bg-deep);
  box-shadow: inset 0 1px 0 var(--white-a05);
}

.seg-switch .seg {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 0;
  border-radius: var(--r-md);
  color: var(--muted);
  background: transparent;
  font-weight: 700;
  text-decoration: none;

  transition: flex-grow 140ms cubic-bezier(0.22, 1, 0.36, 1),
    background 120ms ease, color 120ms ease, box-shadow 120ms ease;
}

.seg-switch .seg span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.seg-switch .seg img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: 0.75;
  transition: opacity 180ms ease;
}

.seg-switch .seg:not(.active):hover {
  color: var(--text);
  background: var(--white-a05);
}

.seg-switch .seg:active {
  transform: translateY(1px);
}

.seg-busy {
  display: none;
}

.seg-switch .seg.active {
  background: linear-gradient(180deg, var(--accent-dark), var(--accent));
  color: var(--on-accent, var(--text));
  box-shadow: var(--shadow-accent);
}

.mode-switch {
  position: absolute;
  left: 310px;
  top: 14px;
  width: auto;
  height: 55px;

  /* Pil artik duz `--bg-deep` degil: tabanda kor gibi duran ince bir accent
     sicakligi var. Ust bardaki tek marka yuzeyi bu; gri bir cubuk olarak
     duruyordu. */
  background: linear-gradient(180deg, var(--bg-deep), color-mix(in srgb, var(--accent) 7%, var(--bg-deep)));
  box-shadow:
    inset 0 1px 0 var(--white-a05),
    0 10px 26px -20px var(--black),
    0 0 18px -14px var(--accent);

  /* Bir anahtar, dort dugme degil: segmentler bitisik duruyor, yuvarlaklik
     yalnizca pilin dis koselerinde ve aralarinda tel bir ayrac var. */
  gap: 0;
  padding: 4px;
}

.mode-switch .seg {
  width: auto;
  height: 45px;
  padding: 0 16px;
  border-radius: 0;
}

.mode-switch .seg + .seg {
  border-left: 1px solid var(--white-a08);
}

.mode-switch .seg:first-child {
  border-radius: var(--r-md) 0 0 var(--r-md);
}

.mode-switch .seg:last-of-type {
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* Secili segment KENDI ZEMININI BOYAMIYOR ve OLCU DEGISTIRMIYOR: isikli yuzey
   tek ve o da kayan cam (`.seg-thumb`). Secilen segment genisleseydi (eski
   22px ic bosluk) yanindakiler de kayardi -- tiklamada yazi yerinden oynamaz,
   yalnizca cam gider. Bekleyen (`.seg-busy`) ve basili (`:active`) hali de
   ayni sebeple bos: segment tiklandiginda hicbir sey yanmaz, kaymaz. */
.mode-switch .seg.active {
  /* `.seg-switch`in dolu accent zeminini geri aliyor: burada isigi cam tasiyor. */
  background: transparent;
  box-shadow: none;
}

.mode-switch .seg:active {
  transform: none;
}

/* KAYAN CAM
   Dort dugmenin sirayla yanip sonmesi yerine TEK bir cam levha var ve secim
   degisince sagdan sola kayiyor: hareketin kendisi "hangi bolumdesin"i
   anlatiyor. Levha segmentlerin USTUNDE duruyor, altindaki bolum sanatini
   `backdrop-filter` ile bulaniklastirip parlatiyor; ad ise camin da ustunde
   (`span` z-index 2) kaliyor, yoksa okunmazdi.
   Yeri piksel olarak JS'ten geliyor (ModeSwitch, --thumb-x/w/h): segment
   genislikleri metne bagli, CSS tek basina hesaplayamaz.
   Egilme (rotateY) kaldirildi: ucusun ortasinda sifirlanan egim `transform`
   gecisini yeniden baslatiyordu ve cam yolun yarisinda takiliyordu. */

/* Yalnizca bu anahtarda: casino dikeylerinin kendi dolu-accent segmenti duruyor. */
.seg-thumb {
  display: none;
}

.mode-switch .seg-thumb {
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 1;
  width: var(--thumb-w, 0);
  height: var(--thumb-h, 100%);
  border-radius: calc(var(--r-md) - 2px);
  pointer-events: none;
  opacity: 0;

  transform: translate3d(var(--thumb-x, 0px), -50%, 0);
  will-change: transform, width;

  /* Camin kendisi: ustte isik toplayan egik bir parlama, govdede ince accent
     dolgusu. Bulaniklik BILEREK az -- 6px'te levha buzlu cama donuyor ve
     altindaki bolum sanatini yutuyordu; 2px sadece kirilma veriyor, sanat
     okunur kaliyor. Isigi asil doygunluk ve parlaklik tasiyor. */
  background:
    linear-gradient(155deg, var(--white-a24), var(--white-a05) 34%, transparent 58%),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--accent) 62%, transparent),
      color-mix(in srgb, var(--accent) 30%, transparent) 58%,
      color-mix(in srgb, var(--accent) 54%, transparent)
    );
  /* Doygunluk ve parlaklik yukari: altindaki sanat gri uretiliyor, camdan
     gecerken isinmasi gereken yer burasi. */
  backdrop-filter: blur(2px) saturate(2.1) brightness(1.2);
  -webkit-backdrop-filter: blur(2px) saturate(2.1) brightness(1.2);

  /* Kalinlik: ust kavis isigi, ACCENT cam kenari, ic golge ve disarida iki
     kademeli hale -- yakin ve sicak, uzak ve genis. Kenar beyazdi; kirmizi
     dolgunun etrafinda beyaz bir tel, rengi sondururen seyin kendisiydi. */
  box-shadow:
    inset 0 1px 0 var(--white-a55),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 62%, var(--white-a24)),
    inset 0 -8px 14px -10px var(--black),
    0 10px 20px -10px var(--black),
    0 0 16px -4px var(--accent),
    0 0 40px -10px var(--accent);

  /* Tasmasiz egri: eski 1.35'lik yay hedefi asip geri geliyordu, o da
     "takilma" gibi okunuyordu. Tek yonde, yumusak duran bir kayis. */
  transition:
    transform 320ms cubic-bezier(0.22, 1, 0.36, 1),
    width 320ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 220ms ease;
}

/* Olculer alinana kadar cizilmiyor: sifir genislikte bir levha ilk karede
   soldan firlardi. */
.mode-switch[data-thumb="on"] .seg-thumb {
  opacity: 1;
}

/* Alttaki accent teli: cam saydam oldugu icin secim isareti bir de burada
   somutlasiyor, levhanin ayagi gibi. */
.mode-switch .seg-thumb::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 0;
  left: 6px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 40%, transparent), var(--accent) 50%, color-mix(in srgb, var(--accent) 40%, transparent));
  box-shadow: 0 0 14px var(--accent), 0 0 4px var(--accent);
}

/* Dokunmatik olmayan zeminde levha bir tik kabariyor. */
.mode-switch .seg:hover ~ .seg-thumb {
  box-shadow:
    inset 0 1px 0 var(--white-a55),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 78%, var(--white-a24)),
    inset 0 -8px 14px -10px var(--black),
    0 14px 26px -12px var(--black),
    0 0 20px -2px var(--accent),
    0 0 52px -8px var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .mode-switch .seg-thumb {
    transition: opacity 220ms ease;
  }
}

.mode-switch .seg:first-child {
  width: 45px;

  padding: 0;
  justify-content: center;
}

.mode-switch .seg:first-child span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Tek glif kalan yer: ana sayfa. Sanatin onunde ve tam beyaz -- arkasindaki
   konak cephesiyle ayni parlaklikta olsa ikisi birbirine karisirdi. */
.mode-switch .seg:first-child img {
  position: relative;
  z-index: 2;
  flex: none;
  width: 20px;
  height: 20px;
  opacity: 1;
  filter: drop-shadow(0 1px 3px var(--black));
}

.mode-switch .seg--page {
  width: auto;
  max-width: 210px;
  padding: 0 18px;
}

/* Her segment kendi sanatini tasir: temanin renginde yanan nesneler,
   etiketin ARKASINDA -- ana sayfada konak, digerlerinde bolumun kendi sahnesi.
   `screen` harmani karanligi gecirip sadece isigi birakiyor: segment pasifken
   sanat anahtarin ic zeminine kazinmis gibi, aktifken accent dolgusunun icinde
   kabartma gibi duruyor. Ustteki ic golge ve alttaki tel isik girintiyi
   tamamliyor. Adli segmentte artik glif yok, o yuzden sanat ONE cikabiliyor;
   ana sayfada glif duruyor ve sanatin ustunde kaliyor. */
.mode-switch .seg--home::before,
.mode-switch .seg--slots::before,
.mode-switch .seg--live-casino::before,
.mode-switch .seg--sports::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  /* Sanat gri uretiliyor (tek dosya, her temada dogru) ve RENGINI BURADAN
     aliyor: `color` harmani ustteki accent katmanindan ton/doygunlugu, alttaki
     sanattan parlakligi aliyor -- nesneler temanin kendi isigiyla yanmis gibi
     cikiyor, mavi/yesil temada da. */
  /* Ton accentin yalnizca %15i: `color` harmani koyu sanatta doygunlugu kendiliginden yukseltiyor, %30 bile ekranda tam kirmizinin %80i olarak olculdu; gumus uzerine hafif kirmizi cast icin %15.
     Sanat artik tek buyuk sekil (seg-uret.py), rengi de daha sessiz. */
  --seg-tint: color-mix(in srgb, var(--accent) 15%, var(--muted-6));

  background-image: linear-gradient(var(--seg-tint), var(--seg-tint)), var(--seg-art);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-blend-mode: color;
  box-shadow: inset 0 2px 4px -2px var(--black), inset 0 -1px 0 var(--white-a08);
  opacity: 0.85;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Ana sayfa karesi digerlerinin ucte biri genislikte ve ustunde bir de glif
   var: tam accent tonu orayi duz kirmizi bir lekeye ceviriyor, konak
   kayboluyordu. Ton buyuk olcude griye cekiliyor (`color` harmani doygunlugu
   ustteki katmandan alir) ve cephe biraz daha aciliyor -- kirmizi kalir, konak
   gorunur. */
.mode-switch .seg--home::before {
  --seg-art: url("/assets/images/seg-home.webp");
  --seg-tint: color-mix(in srgb, var(--accent) 22%, var(--muted-6));

  filter: brightness(1.75) contrast(1.15);
}

.mode-switch .seg--slots::before {
  --seg-art: url("/assets/images/seg-slots.webp");
}

.mode-switch .seg--live-casino::before {
  --seg-art: url("/assets/images/seg-live-casino.webp");
}

.mode-switch .seg--sports::before {
  --seg-art: url("/assets/images/seg-sports.webp");
}

/* Ad, sanatin onunde: yazi konumlanmadan sanatin ALTINDA kalirdi. Golge onu
   sanatin gumus isiklarindan ayiriyor; pasif segment de artik gri degil, cunku
   okunacak tek sey o. */
.mode-switch .seg span {
  position: relative;
  z-index: 2;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 3px var(--black), 0 0 10px var(--black);
}

.mode-switch .seg:not(.active) span {
  opacity: 0.86;
}

/* Camin ustundeki ad tam beyaz ve biraz daha agir: altindaki yuzey artik
   kirmizi, `--text`in gri tonu orada okunakligi dusuruyordu. */
.mode-switch .seg.active span,
.mode-switch .seg:has(.seg-busy) span {
  color: var(--white);
  text-shadow: 0 1px 3px var(--black), 0 0 12px var(--black-a95);
}

.app-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  font: 700 11px/1 Montserrat, sans-serif;
}

.app-select select {
  appearance: none;
  height: 32px;
  padding: 0 26px 0 12px;
  border-radius: var(--r-md);

  background:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%) calc(100% - 14px) 55% / 5px 5px no-repeat,
    linear-gradient(-45deg, transparent 50%, var(--muted) 50%) calc(100% - 9px) 55% / 5px 5px no-repeat,
    var(--white-a08);
  color: var(--text);
  font: 700 12px/1 Montserrat, sans-serif;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.app-select select:hover {
  background-color: var(--white-a14);
}

@supports (appearance: base-select) {
  .app-select select,
  .app-select select::picker(select) {
    appearance: base-select;
  }

  .app-select select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--white-a08);
  }

  .app-select select::picker-icon {
    color: var(--muted);
    transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .app-select select:open::picker-icon {
    transform: rotate(180deg);
  }

  .app-select select::picker(select) {
    max-height: 320px;
    min-width: anchor-size(width);
    margin-block: 6px;
    padding: 6px;
    border-radius: var(--r-lg);
    background: var(--panel-2, var(--panel));
    box-shadow: inset 0 1px 0 var(--white-a08), 0 18px 40px var(--black-a35);
    overflow-y: auto;
  }

  .app-select option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    border-radius: var(--r-md);
    color: var(--muted-5);
    font: 700 12px/1 Montserrat, sans-serif;
    cursor: pointer;
  }

  .app-select option:hover,
  .app-select option:focus {
    background: var(--white-a08);
    color: var(--text);
    outline: none;
  }

  .app-select option:checked {
    background: var(--accent-a30);
    color: var(--text);
  }

  .app-select option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--accent);
  }
}

.top-actions {
  position: absolute;
  top: 15px;
  right: 15px;
  gap: 10px;
}

.wallet-pill {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  height: 53px;
  border-radius: var(--r-lg);
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  overflow: hidden;
}

.wallet-pill-balance,
.wallet-pill-deposit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.2s ease;
}

.wallet-pill-balance {
  color: var(--text);

  font-variant-numeric: tabular-nums;
}

/* Currency mark, one per pill: it labels the UNIT both rows are written in, so it
   stands beside the pair rather than being repeated on each row. */
.wallet-pill-coin {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

/* The balance half split down the middle: real money over bonus money, one
   hairline between them. Fixed min-width so the pill does not resize itself
   every time a figure gains a digit. */
.wallet-pill-figures {
  display: flex;
  flex-direction: column;
  min-width: 132px;
}

.wallet-pill-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}

.wallet-pill-row.is-bonus {
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.wallet-pill-row em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wallet-pill-row strong {
  font-size: 14px;
  font-weight: 700;
}

/* Bonus money is not spendable money — it reads a shade back from the real one. */
.wallet-pill-row.is-bonus strong {
  color: var(--muted);
  font-weight: 600;
}

.wallet-pill-balance:hover {
  background: rgb(255 255 255 / 0.06);
}

.wallet-pill-deposit {
  gap: 10px;
  padding: 0 20px 0 0;
  color: var(--on-accent);
  font-weight: 800;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent));
}

.wallet-pill-deposit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 50px;
  background: rgb(0 0 0 / 0.16);
}

.wallet-pill-deposit-icon svg {
  /* Flat glyph: no drop-shadow — it inks in --on-accent like the rest of the set. */
  transition: transform 0.25s ease;
}

.wallet-pill-deposit:hover .wallet-pill-deposit-icon svg {
  transform: translateY(1px) scale(1.08);
}

.wallet-pill-deposit:hover {
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 82%, #000));
}

@media (prefers-reduced-motion: reduce) {
  .wallet-pill-deposit-icon svg {
    transition: none;
    transform: none;
  }
}

.wallet-pill-balance:focus-visible,
.wallet-pill-deposit:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -3px;
}

.deposit-button {
  width: 160px;
  gap: 8px;
}

.deposit-button .deposit-icon {
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 3px rgb(0 0 0 / 0.35));
  transition: transform 0.25s ease;
}

.deposit-button:hover .deposit-icon {
  transform: rotate(-12deg) scale(1.12);
}

/* Misafir ikilisi: kutu artik yaziyi + simgesini sariyor. Sabit 118/140px
   dugmeleri, iki kelimeyi bos bir levhanin ortasinda yuzduruyordu. */
.login-button,
.register-button {
  width: auto;
  padding: 0 20px;
  gap: 9px;
}

.login-button svg,
.register-button svg {
  flex: 0 0 auto;
  transition: transform 0.16s ease;
}

.login-button:hover svg {
  transform: translateX(2px);
}

/* Kayit ol ikilinin CTA'si: deposit dugmesinin parlama serididir, ama beklerken
   degil yalniz imlec ustundeyken bir kez gecer -- baslik zaten yeterince nefes
   aliyor. */
.register-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.register-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.3) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 200% 0;
}

.register-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--secondary-a50);
}

.register-button:hover::after {
  animation: register-sweep 0.75s ease-out;
}

.register-button:hover svg {
  transform: rotate(-8deg) scale(1.12);
}

@keyframes register-sweep {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -60% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .login-button svg,
  .register-button svg,
  .register-button:hover::after {
    animation: none;
    transition: none;
    transform: none;
  }
}

.profile-area {
  position: relative;
}

.profile-area .profile-card {
  cursor: pointer;
}

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

.profile-area .mobile-profile-dropdown {
  top: 100%;
  padding-top: 8px;
  z-index: 40;
}

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

.profile-area.is-open .profile-card-arrow {
  transform: rotate(180deg);
}

.notification-area {
  position: relative;
}

.notification-area .mobile-action-dropdown {
  z-index: 40;
}

.quick-menu-area {
  position: relative;
  display: flex;
  align-items: center;
}

.top-actions .header-menu {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: auto;
  height: auto;
}

.top-actions .header-menu-trigger {
  width: 53px;
  height: 53px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease,
    color 0.2s ease;
}

.top-actions .header-menu-trigger:hover,
.top-actions .header-menu.is-open .header-menu-trigger {
  color: var(--accent);
  box-shadow: inset 0 -10px 18px var(--accent-a12), 0 0 0 1px var(--accent-a22),
    var(--shadow-accent);
}

.top-actions .header-menu-trigger:hover .header-menu-dots {
  gap: 4.5px;
}

.top-actions .header-menu-trigger:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.top-actions .header-menu-dots i {
  width: 5px;
  height: 5px;
}

.top-actions .header-menu-panel {
  top: 100%;
  right: 0;
  left: auto;
  padding-top: 8px;
  z-index: 40;
}

.top-actions > button,
.top-actions .profile-card,
.top-actions .icon-button,
.top-actions .header-menu-trigger {
  transition: transform 0.12s ease, border-color 0.2s ease, box-shadow 0.2s ease,
    filter 0.2s ease;
}

.top-actions > button:active,
.top-actions .profile-card:active,
.top-actions .icon-button:active,
.top-actions .header-menu-trigger:active {
  transform: scale(0.95);
}

.deposit-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  font-weight: 800;
  letter-spacing: 0.02em;
  animation: deposit-breathe 3.2s ease-in-out infinite;
}

.deposit-button::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.38) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 200% 0;
  animation: deposit-sweep 3.2s ease-in-out infinite;
}

.deposit-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px var(--accent-a45);
}

@keyframes deposit-breathe {
  0%,
  100% {
    box-shadow: var(--shadow-accent);
  }
  50% {
    box-shadow: 0 8px 26px var(--accent-a45);
  }
}

@keyframes deposit-sweep {
  0%,
  62% {
    background-position: 200% 0;
  }
  92%,
  100% {
    background-position: -100% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .deposit-button,
  .deposit-button::after {
    animation: none;
  }
}

.icon-button.notification {
  position: relative;
}

.icon-button.notification:hover,
.icon-button.chat-toggle:hover {
  box-shadow: 0 0 0 1px var(--accent-a22);
}

.icon-button.notification img {
  transition: transform 0.3s ease;
  transform-origin: 50% 15%;
}

.icon-button.notification:hover img {
  animation: bell-swing 0.6s ease;
}

.notification-area.is-open .icon-button.notification {
  box-shadow: 0 0 0 1px var(--accent-a30), var(--shadow-accent);
}

@keyframes bell-swing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(14deg); }
  45% { transform: rotate(-11deg); }
  70% { transform: rotate(6deg); }
}

.notification-badge {
  animation: badge-pulse 2.4s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 70%, 100% { transform: scale(1); box-shadow: 0 0 0 0 var(--secondary-a50); }
  35% { transform: scale(1.12); box-shadow: 0 0 0 6px transparent; }
}

.profile-area .profile-card:hover {
  box-shadow: var(--shadow-sm);
}

.profile-card > img {
  transition: transform 0.2s ease;
}

.profile-area .profile-card:hover > img {
  transform: scale(1.06);
}

.profile-card-arrow {
  transition: transform 0.2s ease;
}

@media (prefers-reduced-motion: reduce) {
  .top-actions > button,
  .top-actions .profile-card,
  .top-actions .icon-button,
  .top-actions .header-menu-trigger,
  .icon-button.notification img,
  .notification-badge,
  .profile-card > img {
    transition: none;
    animation: none;
    transform: none;
  }
}

.profile-card {
  gap: 10px;
  width: 170px;
  height: 53px;
  padding: 6px 7px;
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--panel-2), var(--panel-3));
}

.profile-card > img {
  width: 40px;
  height: 40px;
  border-radius: var(--r-md);
  object-fit: cover;
}

.profile-card-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
  text-align: left;
  overflow: hidden;
}

.profile-card-copy strong {
  max-width: 100%;
  color: var(--text);
  font-size: var(--fs-sm, 14px);
  line-height: 1.1;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-copy small {
  display: block;
  max-width: 100%;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  font-style: normal;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profile-card-arrow {
  display: block;
  width: 0;
  height: 0;
  margin-left: auto;
  border-top: 7px solid var(--muted);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 280px;
  padding: 10px 10px 0 0;
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    width 180ms ease;
}

.sidebar > * {
  flex: 0 0 auto;
}

@keyframes sidebarBlockIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.sidebar .side-scroll > *,
.sidebar > .side-events {
  animation: sidebarBlockIn 460ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.sidebar .side-scroll > :nth-child(1) {
  animation-delay: 40ms;
}
.sidebar .side-scroll > :nth-child(2) {
  animation-delay: 110ms;
}
.sidebar .side-scroll > :nth-child(3) {
  animation-delay: 180ms;
}
.sidebar > .side-events {
  animation-delay: 230ms;
}

.sidebar .mobile-search {
  height: 37px;
  padding: 8px 14px;
  border-radius: var(--r-lg);
  transition:
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

.sidebar .mobile-search-input {
  align-self: stretch;
  height: 100%;
  font-size: var(--fs-lg);
  line-height: 1;
}

.sidebar .mobile-search:hover,
.sidebar .mobile-search:focus-within {
  box-shadow: 0 0 0 3px var(--accent-a12);
}

.sidebar .mobile-drawer-telegram {
  transition:
    transform 200ms ease,
    box-shadow 200ms ease;
}

.sidebar .mobile-drawer-telegram:hover {
  transform: translateY(-2px);
}

.mobile-giveaway-action {
  transition: background-color 170ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .sidebar .side-scroll > *,
  .sidebar > .side-events {
    animation: none !important;
  }
}

.content {
  position: absolute;
  left: 290px;
  top: 83px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 1280px;
  min-height: 2677px;
  padding: 8px 13px 30px;
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  background: var(--content-bg, var(--bg-deep));
  overflow: hidden;
  transition:
    left 180ms ease,
    width 180ms ease;
}

/* The pane is a fixed-height flex column on desktop, so a section that clips its
   own overflow has an automatic minimum size of 0 and absorbs the whole column's
   shrink — .aff-hero collapsed to its eyebrow. Sections never shrink here; the
   pane scrolls instead. */
.content > * {
  flex-shrink: 0;
}

.home-content {
  gap: 0;
  padding-bottom: 11px;
}

.home-content > .site-footer {
  margin-top: 80px;
}

.content.crash-content,
.content.vip-content {
  min-height: 0;
}

.content.vip-content {
  min-height: 2387px;
}

.content.crash-content {
  min-height: 2282px;
}

.site-footer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* Bleeds over `.content`'s padding so the darkening layer and the accent
     bloom end at the panel's own edges. Inside the padding box they stopped
     short on both sides and above the bottom, which read as three hard seams
     around the footer. The inline bleed deliberately overshoots any panel
     padding (13px legacy / 26px fluid) — `overflow-x: clip` cuts the rest. */
  margin: 0 -40px -30px;
  padding: 0 40px 46px;
  color: var(--muted);
  font-weight: 700;
  background:
    radial-gradient(76% 50% at 50% 112%, var(--accent-a25), transparent 74%),
    linear-gradient(180deg, transparent 4%, var(--black-a45) 78%);
}

/* Şerit altbilginin açılış bandı: taşma altbilginin kendi yatay dolgusu kadar
   (burada 40px), böylece bant panelin kenarlarında bitiyor. */
.site-footer .mobile-winners {
  --winners-bleed: 40px;
}

.footer-main,
.providers,
.footer-badges,
.footer-bottom {
  position: relative;
  border-top: 1px solid var(--white-a05);
}

.footer-main::before,
.providers::before,
.footer-badges::before,
.footer-bottom::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-a55), transparent);
  opacity: 0.35;
}

.footer-main {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding-top: 34px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  flex: 0 0 auto;
  max-width: 216px;
}

.footer-logo {
  width: 172px;
  height: 48px;
  object-fit: contain;
}

.footer-tagline {
  margin: 0;
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.65;
}

.footer-age-badge {
  display: inline-grid;
  place-items: center;
  min-width: 42px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  background: var(--accent-a05);
  color: var(--accent);
  font-size: var(--fs-md);
  font-weight: 800;
  letter-spacing: 0.02em;
}

.footer-links {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 24px 16px;
}

.footer-links div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-links h3 {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 11px;
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-links h3::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 18px;
  height: 2px;
  border-radius: var(--r-hair);
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-a55);
}

.footer-links a {
  color: var(--muted);
  font-size: var(--fs-lg);
  line-height: 1;
  text-decoration: none;
  transition: color 0.18s ease, transform 0.18s ease;
}

.footer-links a:hover {
  color: var(--accent);
  transform: translateX(3px);
}

.providers {
  justify-content: space-between;
  gap: 12px;
  padding-top: 30px;
}

.providers > div {
  display: grid;
  place-items: center;
  flex: 1 1 0;
  min-width: 0;
  height: 58px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--white-a05), var(--white-a015));
  box-shadow: inset 0 1px 0 var(--white-a05);
  overflow: hidden;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.providers > div:hover {
  border-color: var(--accent-a30);
  background: var(--accent-a05);
  transform: translateY(-2px);
}

.providers img {
  width: 76%;
  height: 30px;
  max-width: none;
  max-height: none;
  object-fit: contain;
  opacity: 0.72;
  filter: grayscale(1) brightness(1.45);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.providers > div:hover img {
  opacity: 1;
  filter: none;
}

/* BO'nun yukledigi rozet seritleri: footer_trust_badges, footer_license_badges
   ve footer_partner_logos tek sirada. Saglayici siralarinin PLAKALARI YOK —
   bunlar lisans ve guven isaretleri, tiklanacak kutular degil; BO hicbirini
   doldurmazsa bolum hic basilmaz (SiteFooter). */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 30px;
  padding-top: 26px;
}

.footer-badges img {
  height: 34px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  opacity: 0.7;
  filter: grayscale(1) brightness(1.4);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.footer-badges img:hover {
  opacity: 1;
  filter: none;
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 26px;
  color: var(--muted);
  font-weight: 600;
}

.footer-bottom p {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 18.15px;
}

.footer-community {
  gap: 10px;
}

/* The disc and the glyph are the theme's, not the artwork's: the icons used to
   be <img> SVGs, which can't read a custom property from the page, so every
   theme got the same navy tile. The squircle matches the shape those files
   drew (13.1/48.4 of the box). */
.footer-community .footer-community-link {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 27%;
  background: var(--social-disc);
  color: var(--social-glyph);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.footer-community .footer-community-link:hover {
  transform: translateY(-3px);
  filter: drop-shadow(0 6px 14px var(--accent-a45));
}

.footer-community .footer-community-link .footer-community-icon {
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
}

.footer-community .footer-community-link:hover .footer-community-icon {
  transform: scale(1.05);
}

@media (max-width: 768px) {
  .site-footer {
    gap: 0;
    margin: 0;
    padding: 0 15px 20px;
    font-weight: 600;
    /* No panel to bleed into here — the shell keeps 112px clear under the
       footer for the floating nav — so both layers have to die inside the
       footer's own box instead of stopping dead at its bottom edge. */
    background:
      radial-gradient(100% 26% at 50% 76%, var(--accent-a25), transparent 66%),
      linear-gradient(180deg, transparent 4%, var(--black-a45) 62%, var(--black-a45) 86%, transparent);
  }

  /* Mobilde altbilgi dolgusu 15px — taşma da o kadar. */
  .site-footer .mobile-winners {
    --winners-bleed: 15px;
  }

  .footer-main::before,
  .providers::before,
  .footer-bottom::before {
    display: none;
  }

  .providers,
  .footer-bottom {
    border-top: none;
  }

  .footer-main {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 40px;
    border-top-color: var(--muted-a10);
  }

  .footer-brand {
    max-width: none;
    gap: 0;
    margin-bottom: 40px;
  }

  .footer-logo {
    width: 190px;
    height: 53px;
  }

  .footer-tagline,
  .footer-age-badge {
    display: none;
  }

  .footer-links {
    display: block;
    column-count: 2;
    column-gap: 0;

    margin-bottom: -41px;
  }

  .footer-links div {
    gap: 10.321px;
    break-inside: avoid;
    margin-bottom: 41px;
  }

  .footer-links h3 {
    margin: 0 0 20px;
    padding-bottom: 0;
    font-size: var(--fs-lg);
    text-transform: none;
    letter-spacing: 0;
  }

  .footer-links h3::after {
    display: none;
  }

  .footer-links a {
    font-size: var(--fs-lg);
    line-height: normal;
  }

  .footer-links a:hover {
    transform: none;
  }

  .providers {
    display: block;
    padding-top: 36px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 6%, var(--black) 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, var(--black) 6%, var(--black) 94%, transparent);
  }

  @keyframes provider-marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-50%);
    }
  }

  .providers img {
    width: 82%;
    height: 24px;
    opacity: 0.9;
    filter: grayscale(1) brightness(1.5);
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    padding-top: 30px;
  }

  .footer-bottom .footer-community {
    order: -1;
    gap: 6px;
  }

  .footer-bottom p {
    font-size: var(--fs-base);
    font-weight: 700;
    line-height: 18.577px;
    color: var(--muted);
  }

  .footer-bottom p span {
    color: var(--mobile-accent);
  }

  .footer-community .footer-community-link {
    width: 37px;
    height: 37px;
  }

  .footer-community .footer-community-link:hover {
    transform: none;
    filter: none;
  }
}

.chat-panel {
  position: absolute;
  right: 15px;
  top: 83px;
  display: flex;
  flex-direction: column;
  width: 321px;
  height: 1184px;
  padding: 0;
  border-radius: var(--r-lg);
  background: var(--panel);
  overflow: hidden;
}

.chat-panel .mobile-chat {
  flex: 1 1 auto;
  min-height: 0;
}

.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: var(--bg-a82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.auth-overlay[hidden] {
  display: none !important;
}

.auth-overlay.is-open {
  display: block;
  animation: auth-fade 180ms ease both;
}

@keyframes auth-fade {
  from {
    opacity: 0;
  }
}

@keyframes auth-pop {
  from {
    opacity: 0;
    transform: translate(-50%, -46%) scale(0.96);
  }
}

/* Two columns of a grid, not two absolutely-placed boxes at hardcoded offsets.
   The old `left: 359px / top: 30px / width: 336px` form column could not react
   to its own content: sign-up is a good 150px taller than sign-in, so it spilled
   past the fixed 596px and the scrollbar it grew ate 15px the fixed widths inside
   never gave back. Grid + `min-height: 0` lets the form column scroll on its own. */
.auth-dialog {
  position: fixed;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-columns: 317px minmax(0, 1fr);
  gap: 22px;
  width: 727px;
  height: min(596px, calc(100dvh - 32px));
  padding: 10px;
  border-radius: var(--r-3xl);
  background: var(--bg-deep);
  box-shadow: var(--shadow-xl);
  overflow: hidden;
  transform: translate(-50%, -50%);
  transform-origin: center;
  animation: auth-pop 260ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.auth-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 0;
  padding: 22px 20px 14px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--white-a14);
  background:
    radial-gradient(115% 52% at 50% 104%, var(--accent-light-a80), transparent 72%),

    radial-gradient(42% 26% at 50% 60%, var(--white-a24), transparent 72%),
    radial-gradient(90% 45% at 50% -6%, var(--white-a24), transparent 70%),
    linear-gradient(168deg, var(--accent) 0%, var(--accent-ink) 100%);
}

.auth-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0.22;
  background-image: radial-gradient(var(--white-a40) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, var(--black), transparent 62%);
  mask-image: linear-gradient(180deg, var(--black), transparent 62%);
}

.auth-promo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -46px;
  z-index: 2;
  width: 250px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--white-a35), transparent);
  transform: translateX(-50%);
}

.auth-logo {
  flex: none;
  align-self: center;
  width: auto;
  height: 42px;
  margin-bottom: 22px;
  object-fit: contain;
}

.auth-copy {
  position: relative;
  z-index: 4;
  flex: none;
  margin: 0;
  color: var(--text);
  text-align: center;
  font-size: var(--fs-4xl);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  text-shadow: 0 2px 12px var(--black-a35);
}

.auth-copy span {
  display: inline-block;
  margin-top: 4px;
  color: var(--gold);
  text-shadow:
    0 0 18px var(--black-a35),
    0 2px 10px var(--black-a45);
}

/* The panel's one picture. It takes whatever height the badge, headline and live
   bar leave over (`flex: 1`, `min-height: 0`) and is contained inside it, so the
   art never crops and the panel never overflows — whatever the theme ships and
   however tall the dialog has been clamped to. */
.auth-art {
  position: relative;
  z-index: 3;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  animation: auth-art-in 520ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
  filter: drop-shadow(0 18px 32px var(--black-a50));
}

/* Bababet's cinematic photos fill the panel; keep the headline over the
   dark upper part of the frame, with the face clear below it. */
.auth-promo:has(.auth-art[src*="/themes/bababet/"]) {
  isolation: isolate;
  background: var(--bg-deep);
  padding-top: 28px;
}

.auth-promo:has(.auth-art[src*="/themes/bababet/"]) .auth-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  filter: none;
}

.auth-promo:has(.auth-art[src*="/themes/bababet/"])::before {
  z-index: 1;
  opacity: 1;
  background: linear-gradient(180deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 35%) 22%, transparent 43%, rgb(0 0 0 / 24%));
  mask-image: none;
  -webkit-mask-image: none;
  pointer-events: none;
}

.auth-promo:has(.auth-art[src*="/themes/bababet/"])::after {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: inherit;
  background: none;
  box-shadow: inset 0 0 0 1px var(--white-a14);
  transform: none;
  pointer-events: none;
}

@keyframes auth-art-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
}

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

.auth-form {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 20px 22px 16px 0;
}

/* BO'nun kayit basligi (register_title / register_subtitle). Metin ZATEN
   cevrilmis gelir (`?lang=`), ekran t()'den gecirmez. BO bos birakirsa blok
   hic basilmaz — bosluk da kalmaz. */
.auth-intro {
  margin-bottom: 16px;
}

.auth-intro h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
}

.auth-intro p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--muted-5);
}

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

.auth-tabs button {
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.3px;
  transition:
    background 180ms ease,
    color 180ms ease;
}

.auth-tabs button:hover {
  color: var(--text);
}

/* The glow is clipped to the row: at 19px of blur it used to bleed across the
   inactive half and out past the column, which read as the active pill sitting
   crooked in its slot. */
.auth-tabs {
  overflow: hidden;
}

.auth-tabs button.active {
  background: linear-gradient(180deg, var(--accent-dark), var(--accent));
  box-shadow: var(--shadow-accent);
  color: var(--text);
}

.auth-form[data-mode="signup"] .auth-tabs button.active {
  background: linear-gradient(180deg, var(--secondary-dark), var(--secondary));
  box-shadow: var(--shadow-secondary);
}

.auth-form[data-mode="signup"] .create-account {
  background: linear-gradient(180deg, var(--secondary-dark), var(--secondary));
  box-shadow: var(--shadow-secondary);
}
.auth-form label:not(.age-check) {
  position: relative;
  display: block;
  height: 54px;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  background: var(--panel);
  overflow: hidden;
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.auth-form label:not(.age-check):focus-within {
  box-shadow: 0 0 0 3px var(--accent-a16);
}

.auth-form[data-mode="signup"] label:not(.age-check):focus-within {
  box-shadow: 0 0 0 3px var(--secondary-a12);
}

.auth-form label:not(.age-check) span {
  position: absolute;
  left: 20px;
  top: 50%;
  color: var(--muted);
  font-size: var(--fs-lg);
  font-weight: 700;
  letter-spacing: -0.24px;
  transform: translateY(-50%);
  pointer-events: none;
  transition:
    top 140ms ease,
    font-size 140ms ease,
    transform 140ms ease;
}

.auth-form label:not(.age-check):focus-within span,
.auth-form label:not(.age-check).is-filled span {
  top: 8px;
  font-size: var(--fs-base);
  transform: none;
}

.auth-form input[type="email"],
.auth-form input[type="password"] {
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 24px 20px 7px;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-lg);
  font-weight: 700;
}
.forgot-link {
  align-self: flex-end;
  margin: 0 2px 18px;
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.26px;
  text-decoration: none;
  transition: color 160ms ease;
}

.forgot-link:hover {
  color: var(--accent);
}

.age-check {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  align-items: center;
  margin-bottom: 16px;
}

.auth-form[data-mode="signin"] .age-check {
  display: none;
}

.auth-form[data-mode="signin"] .forgot-link {
  margin-bottom: 20px;
}

.auth-form[data-mode="signup"] .forgot-link {
  display: none;
}
.age-check input {
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  border-radius: var(--r-xs);
  background: var(--panel);
}

.age-check input:checked {
  background:
    linear-gradient(180deg, var(--accent-dark), var(--accent));
  box-shadow: inset 0 0 0 5px var(--panel);
}

.age-check span {
  color: var(--muted);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -0.26px;
}

.age-check a {
  color: var(--text);
  text-decoration: underline;
}

.create-account {
  width: 100%;
  font-size: var(--fs-xl);
}

.create-account:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

.create-account:active {
  transform: translateY(0);
}
.auth-close {
  position: absolute;
  right: 14px;
  top: 14px;
}

.app-shell .sidebar .mobile-menu-list {
  padding: 6px;
  border-radius: var(--r-xl);
  background: var(--panel-a65);
}

@media (max-height: 860px) {
  .app-shell:not(.sidebar-collapsed) .sidebar .mobile-drawer-banners {
    display: none;
  }
}

@media (max-height: 760px) {
  .app-shell:not(.sidebar-collapsed) .sidebar .mobile-giveaway-card {
    display: none;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar .mobile-menu-row {
    min-height: 34px;
  }

  .app-shell:not(.sidebar-collapsed) .sidebar > .side-scroll {
    gap: 8px;
  }
}

.app-shell.sidebar-collapsed .sidebar .mobile-menu-list,
.app-shell.sidebar-collapsed .sidebar .mobile-menu-group {
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
}

.app-shell.sidebar-collapsed .sidebar .mobile-menu-row {
  width: 54px;
  height: 54px;
  min-height: 54px;
  justify-content: center;
  padding: 0;
  gap: 0;
  border-radius: var(--r-lg);
  background-color: var(--white-a05);
  transform: none;
}

.app-shell.sidebar-collapsed .sidebar .mobile-menu-icon {
  width: 24px;
  height: 24px;
}

.app-shell.sidebar-collapsed .sidebar .mobile-menu-row::before {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar .mobile-menu-label,
.app-shell.sidebar-collapsed .sidebar .mobile-menu-badge,
.app-shell.sidebar-collapsed .sidebar .mobile-menu-chevron,
.app-shell.sidebar-collapsed .sidebar .mobile-menu-divider,
.app-shell.sidebar-collapsed .sidebar .mobile-menu-sublist,
.app-shell.sidebar-collapsed .sidebar .mobile-drawer-banners,

.app-shell.sidebar-collapsed .sidebar .mobile-giveaway-card,
.app-shell.sidebar-collapsed .sidebar .mobile-search-input,
.app-shell.sidebar-collapsed .sidebar .mobile-search-icon {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar .mobile-search-go {
  width: 100%;
  height: 100%;
  border-radius: var(--r-lg);
  background: transparent;
}

.app-shell.sidebar-collapsed .sidebar .mobile-search-kbd {
  display: none;
}

.app-shell.sidebar-collapsed .sidebar .mobile-search-go-icon {
  display: block;
}

.app-shell.sidebar-collapsed .sidebar .mobile-search {
  justify-content: center;
  width: 54px;
  height: 54px;
  padding: 0;
  margin: 0;
  border-radius: var(--r-lg);
}

.level-rail {
  --orb: clamp(38px, 12vw, 52px);
  position: relative;
  z-index: 1;
  display: flex;
  padding: 4px 0 2px;
}

.level-chip {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 6px 2px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0.5;

  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.2s ease;
}

.level-chip:focus-visible {
  outline: none;
}

.level-chip:active:not(:disabled) {
  transform: none;
  box-shadow: none;
  filter: none;
}

.level-chip + .level-chip::before {
  content: "";
  position: absolute;
  top: calc(6px + var(--orb) / 2 - 1px);
  left: -50%;
  right: 50%;
  height: 2px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
}

.level-chip.is-reached + .level-chip::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--tier-c) 75%, transparent));
}

.level-chip.is-reached {
  opacity: 0.9;
}

.level-chip:hover,
.level-chip.is-on {
  opacity: 1;
}

.level-orb {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: var(--orb);
  height: var(--orb);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: color-mix(in srgb, var(--tier-c) 45%, transparent);
  color: var(--tier-c);
  font-size: calc(var(--orb) * 0.4);
  font-weight: 900;
  transition:
    transform 0.25s ease,
    filter 0.25s ease;
}

.level-orb::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background: linear-gradient(160deg, var(--panel-3), var(--bg-deep));
}

.level-orb::after {
  content: "";
  position: absolute;
  inset: -40%;
  opacity: 0;
  background: conic-gradient(var(--tier-c), transparent 22% 78%, var(--tier-c));
}

.level-orb img,
.level-orb b {
  position: relative;
  z-index: 2;
}

.level-orb img {
  width: calc(var(--orb) * 0.65);
  height: calc(var(--orb) * 0.65);
  object-fit: contain;
}

.level-chip.is-on .level-orb {
  transform: scale(1.18);
  filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--tier-c) 55%, transparent));
}

.level-chip.is-on .level-orb::after {
  opacity: 1;
  animation: level-sweep 2.6s linear infinite;
}

.level-chip:not(.is-reached):not(.is-on) .level-orb {
  background: color-mix(in srgb, var(--text) 16%, transparent);
  color: var(--muted);
  filter: grayscale(0.75);
}

.level-chip:hover .level-orb {
  transform: translateY(-3px) scale(1.06);
}

.level-chip.is-on:hover .level-orb {
  transform: translateY(-3px) scale(1.18);
}

.level-chip:focus-visible .level-orb {
  filter: drop-shadow(0 0 0 var(--accent)) drop-shadow(0 0 5px var(--accent));
}

.level-chip:active:not(:disabled) .level-orb {
  transform: scale(0.94);
}

.level-chip.is-on:active:not(:disabled) .level-orb {
  transform: scale(1.08);
}

.level-chip strong {
  position: relative;
  z-index: 2;
  color: var(--muted-5);
  font-size: clamp(var(--fs-3xs), 2.6vw, var(--fs-sm));
  font-weight: 900;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.level-chip.is-on strong {
  color: var(--tier-c);
}

.level-chip small {
  position: relative;
  z-index: 2;
  color: var(--muted-5);
  font-size: clamp(var(--fs-3xs), 2.1vw, var(--fs-2xs));
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
}

@keyframes level-sweep {
  to {
    transform: rotate(1turn);
  }
}

@media (prefers-reduced-motion: reduce) {
  .level-orb,
  .level-orb::after {
    transition: none;
    animation: none;
  }
}