:root {
   --bg: #292f37;
   --panel: #343c46;
   --dark: #1e242b;
   --red: #ff3038;
   --muted: #b8c7db;
   --border: #414b58
}

* {
   box-sizing: border-box
}

html {
   scroll-behavior: smooth;
   scroll-padding-top: 160px
}

body {
   margin: 0;
   background: var(--bg);
   color: white;
   font: 14px Arial, Helvetica, sans-serif
}

button,
a {
   -webkit-tap-highlight-color: transparent
}

button {
   font: inherit;
   color: inherit;
   cursor: pointer;
   border: 1px solid var(--border);
   background: #252c34;
   border-radius: 9px;
   padding: 12px 17px
}

button:hover {
   filter: brightness(1.16)
}

button:focus-visible,
a:focus-visible {
   outline: 2px solid #ffd400;
   outline-offset: 3px
}

a {
   color: inherit;
   text-decoration: none
}

.wrap {
   max-width: 1360px;
   width: calc(100% - 40px);
   margin: auto
}

.announcement {
   background: #a32c35;
   text-align: center;
   padding: 14px 24px;
   font-size: 12px;
   line-height: 16px
}

header {
   background: #161b21;
   position: sticky;
   top: 0;
   z-index: 20
}

.top {
   height: 60px;
   display: flex;
   align-items: center;
   gap: 30px
}

.logo {
   width: 204px;
   height: 42px;
   object-fit: contain
}

.language {
   background: transparent
}

.account {
   display: flex;
   gap: 6px;
   margin-left: auto;
   align-items: center
}

.account button {
   font-weight: bold
}

.desktop-link {
   border: 0;
   background: transparent;
   padding: 5px 8px;
   display: flex;
   align-items: center;
   gap: 8px
}

.primary {
   background: var(--red);
   border-color: var(--red);
   box-shadow: inset 0 2px #ffffff38;
   font-weight: bold
}

.login {
   background: #414b57;
   box-shadow: inset 0 2px #ffffff30;
   font-weight: bold
}

i {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   background: var(--red);
   border-radius: 50%;
   font-style: normal;
   font-size: 20px;
   flex-shrink: 0
}

.desktop-link i {
   width: 32px;
   height: 32px;
   font-size: 16px
}

.blue {
   background: #3282ff
}

.yellow {
   background: #efbf00
}

#menu-toggle {
   border: 0;
   border-left: 1px solid #262d35;
   border-radius: 0;
   color: var(--red);
   background: transparent;
   margin-left: 18px
}

.nav {
   border-block: 1px solid #272d34;
   background: #1b2027
}

.nav .wrap {
   display: flex;
   height: 48px
}

.nav a,
.nav button {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 12px;
   flex: 1;
   border: 0;
   border-left: 1px solid #272d34;
   border-radius: 0;
   background: none;
   font-weight: bold;
   white-space: nowrap
}

.nav .home {
   flex: 0 0 56px;
   color: var(--red)
}

.nav a:hover {
   background: #303843
}

#drawer {
   position: absolute;
   right: 20px;
   padding: 16px;
   background: var(--panel);
   box-shadow: 0 10px 25px #0008;
   border-radius: 8px
}

#drawer a {
   display: block;
   padding: 12px 31px;
}

.hero {
   position: relative
}

.hero img {
   display: block;
   width: 100%;
   height: auto
}

.hero-link {
   position: absolute;
   inset: 0;
   opacity: 0;
   width: 100%;
   border-radius: 0
}

.mobile-shortcuts {
   display: none
}

.game-section {
   scroll-margin-top: 115px
}

.section-bar {
   background: #1e242b
}

.section-bar>.wrap {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-block: 12px;
   gap: 20px
}

.section-bar h2 {
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 22px;
   font-weight: 400;
   margin: 0;
   white-space: nowrap
}

.tabs {
   display: flex;
   gap: 4px;
   overflow: auto;
   scrollbar-width: none
}

.tabs button {
   white-space: nowrap;
   font-size: 13px;
   color: var(--muted);
   padding: 12px 15px
}

.tabs button::before {
   content: '▦';
   margin-right: 8px;
   font-size: 18px;
   color: #8493a5
}

.tabs button.active {
   background: var(--red);
   color: #fff;
   border-color: var(--red)
}

.tabs button.active::before {
   color: #fff
}

.game-content {
   padding-top: 20px;
   padding-bottom: 20px
}

.game-subtitle {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 12px
}

.game-subtitle h3 {
   font-size: 18px;
   font-weight: 400;
   margin: 0
}

.game-subtitle h3:before {
   content: '▦';
   color: #8594a5;
   margin-right: 10px
}

.view-all {
   font-size: 11px;
   color: var(--muted);
   padding: 9px 17px;
   background: #2e3641
}

.game-grid {
   display: grid;
   grid-template-columns: repeat(8, minmax(0, 1fr));
   gap: 11px
}

.game-card {
   padding: 0;
   border: 0;
   position: relative;
   overflow: hidden;
   border-radius: 20px;
   aspect-ratio: 160/210;
   background: #1d242b
}

.game-card img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .2s
}

.game-card:hover img {
   transform: scale(1.04)
}

.game-card .play {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   background: #0007;
   font-size: 36px;
   opacity: 0;
   transition: opacity .2s
}

.game-card:hover .play,
.game-card:focus-visible .play {
   opacity: 1
}

.mobile-all {
   display: none
}

.sports {
   display: grid;
   grid-template-columns: 1fr 295px;
   background: var(--panel);
   border-radius: 6px;
   margin-top: 40px;
   overflow: hidden
}

.sports h2,
.winners h2 {
   font-size: 18px;
   font-weight: 500;
   margin: 0;
   padding: 18px 20px;
   border-bottom: 1px solid var(--border)
}

em {
   font-style: normal;
   color: var(--red);
   margin-right: 8px
}

.sport-tabs {
   display: flex;
   gap: 5px;
   padding: 12px 20px;
   border-bottom: 1px solid var(--border)
}

.sport-tabs button {
   min-width: 84px;
   line-height: 22px;
   border: 0;
   font-size: 12px;
   font-weight: bold
}

.sport-tabs button.active,
.odd.selected {
   background: var(--red)
}

#matches {
   padding: 20px
}

.match-head,
.match-row {
   display: grid;
   grid-template-columns: 60px 1fr repeat(3, 68px);
   gap: 6px;
   align-items: center;
   background: #282f38;
   border-radius: 9px;
   padding: 18px 20px;
   margin-bottom: 5px
}

.match-head {
   font-size: 12px;
   padding: 12px 20px;
   background: #252b32
}

.match-head span:first-child {
   grid-column: span 2
}

.match-head span:not(:first-child) {
   text-align: center
}

.match-row time {
   font-size: 11px;
   color: var(--muted);
   line-height: 20px
}

.match-row b {
   line-height: 24px;
   font-size: 13px
}

.odd {
   padding: 12px 5px;
   font-weight: bold;
   background: transparent
}

.coupon {
   border-left: 1px solid var(--border);
   text-align: center;
   padding: 12px 20px
}

.coupon h3 {
   background: var(--red);
   padding: 12px 8px;
   border-radius: 9px;
   font-size: 14px;
   margin: 0 0 15px
}

.coupon h3 span {
   margin-left: 10px;
   font-size: 12px
}

.coupon-types {
   font-size: 11px;
   color: var(--muted);
   padding-block: 10px;
   border-block: 1px solid var(--border)
}

#coupon-body {
   padding: 24px 0;
   line-height: 1.8
}

#coupon-body em {
   font-size: 30px
}

#coupon-body p,
.coupon small {
   font-size: 12px;
   color: var(--muted)
}

.winners {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-top: 24px
}

.winners article {
   background: var(--panel);
   border-radius: 10px;
   overflow: hidden
}

.winner {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 12px 20px
}

.winner i {
   border-radius: 9px;
   background: #424d59;
   width: 60px;
   height: 60px
}

.winner img {
   width: 60px;
   height: 60px;
   object-fit: cover;
   border-radius: 8px
}

.winner small {
   display: block;
   color: var(--muted);
   margin-top: 8px
}

.winner strong {
   margin-left: auto
}

.info-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 12px;
   margin-top: 20px
}

.info-grid button {
   background: var(--panel);
   border: 0;
   padding: 20px 10px;
   line-height: 2.2
}

.info-grid b,
.info-grid small {
   display: block
}

.info-grid small {
   text-decoration: underline;
   color: var(--muted)
}

.info-grid .symbol {
   font-size: 28px;
   color: #ffca00
}

.services {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   margin-block: 55px 30px
}

.services article {
   padding: 24px;
   background: var(--panel);
   border-radius: 12px
}

.services h2 {
   font-size: 18px;
   font-weight: 400;
   min-height: 43px;
   margin: 25px 0 6px
}

.services p {
   font-size: 13px;
   color: var(--muted);
   min-height: 35px;
   line-height: 1.7
}

.services article>button,
.services article>div {
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 6px
}

.services article>div button {
   flex: 1
}

.providers {
   border-top: 1px solid #38404a;
   text-align: center;
   padding: 32px 0
}

.providers h2 {
   font-size: 22px;
   font-weight: 400
}

.providers p {
   color: var(--muted)
}

.provider-track {
   display: flex;
   gap: 9px;
   overflow-x: auto;
   padding: 10px 20px;
   scrollbar-width: thin
}

.provider {
   min-width: 175px;
   text-align: left;
   background: var(--panel);
   padding: 20px;
   border-radius: 10px
}

.provider i {
   background: #404b56;
   border-radius: 12px;
   color: #ffcb00;
   margin-bottom: 18px
}

.provider b,
.provider small {
   display: block;
   margin-bottom: 15px
}

.provider small {
   color: #c2cbd6
}

footer {
   border-top: 2px solid var(--red);
   background: #2e3641;
   padding: 35px 0 20px
}

.footer-top {
   display: flex;
   justify-content: space-between;
   gap: 30px
}

.age {
   background: #414b59;
   padding: 8px;
   border-radius: 5px;
   vertical-align: 18px;
   margin-left: 12px
}

.footer-top h3 {
   font-size: 18px
}

.footer-top p {
   font-size: 13px
}

.socials {
   display: flex;
   gap: 4px;
   margin-top: 28px
}

.socials button {
   font-size: 20px;
   padding: 9px 12px;
   background: #414b59;
   border: 0
}

.footer-right {
   text-align: right;
   padding-top: 32px
}

.legal-links {
   display: flex;
   gap: 4px;
   margin-top: 20px
}

.legal-links button {
   font-size: 12px;
   background: transparent
}

.payments {
   display: flex;
   gap: 22px;
   overflow: auto;
   align-items: center;
   margin-top: 40px;
   padding: 20px 0;
   border-block: 1px solid var(--border);
   white-space: nowrap;
   color: #cbd3de;
   font-size: 13px
}

.license {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 24px 20px 0
}

.license>strong {
   font-size: 54px;
   background: #fff;
   color: #86449b;
   line-height: 1;
   padding: 0 3px
}

.license p {
   color: var(--muted);
   font-size: 12px;
   line-height: 1.9
}

.support {
   position: fixed;
   right: 15px;
   bottom: 20px;
   z-index: 30;
   border: 4px solid var(--red);
   background: #9d1820;
   border-radius: 50%;
   font-size: 30px;
   width: 65px;
   height: 65px;
   padding: 0;
   box-shadow: 0 0 0 3px #1e242b
}

dialog {
   color: white;
   background: #2c343e;
   border: 1px solid #4b5666;
   border-radius: 16px;
   padding: 35px;
   max-width: 420px;
   width: calc(100% - 32px);
   text-align: center
}

dialog::backdrop {
   background: #000b;
   backdrop-filter: blur(3px)
}

dialog p {
   color: #b8c7db;
   line-height: 1.7
}

.close {
   position: absolute;
   top: 8px;
   right: 8px;
   padding: 5px 10px;
   background: transparent;
   border: 0;
   font-size: 26px
}

.close-action {
   width: 100%;
   margin-top: 15px
}

[hidden] {
   display: none !important
}

@media(min-width: 1600px) {
   .top {
      height: 60px
   }

   .hero img {
      min-height: 278px;
      object-fit: cover
   }
}

@media(max-width: 1100px) {
   .top {
      gap: 14px
   }

   .desktop-link {
      display: none
   }

   .nav a,
   .nav button {
      font-size: 12px;
      gap: 6px
   }

   .section-bar>.wrap {
      display: block
   }

   .tabs {
      margin-top: 12px
   }

   .game-grid {
      grid-template-columns: repeat(6, minmax(0, 1fr))
   }

   .game-card:nth-child(n+7) {
      display: none
   }

   .game-grid.expanded .game-card {
      display: block
   }

   .info-grid {
      grid-template-columns: repeat(4, 1fr)
   }

   .footer-top {
      display: block
   }

   .footer-right {
      text-align: left
   }

   .services {
      gap: 10px
   }

   .services article {
      padding: 20px
   }

   .sports {
      grid-template-columns: 1fr 250px
   }

   .match-row,
   .match-head {
      grid-template-columns: 55px 1fr repeat(3, 55px);
      padding: 12px 10px
   }
}

@media(max-width: 600px) {
   body {
      font-size: 12px
   }

   .wrap {
      width: calc(100% - 20px)
   }

   .announcement {
      font-size: 9px;
      padding: 5px 0;
      white-space: nowrap;
      overflow: hidden;
      line-height: 15px;
      text-align: left;
      height: 26px
   }

   .top {
      height: 39px;
      gap: 5px
   }

   .logo {
      width: 103px;
      height: 27px
   }

   .language {
      display: none
   }

   .account {
      gap: 4px
   }

   .account button {
      font-size: 9px;
      padding: 6px 12px;
      border-radius: 7px
   }

   .account span {
      display: none
   }

   .account .login {
      font-size: 0
   }

   .account .login:before {
      content: 'Giriş';
      font-size: 9px
   }

   .account .primary {
      font-size: 0
   }

   .account .primary:before {
      content: 'Kayıt';
      font-size: 9px
   }

   #menu-toggle {
      margin-left: 6px;
      font-size: 14px;
      padding: 7px 10px
   }

   .nav .wrap {
      width: 100%;
      height: 31px;
      overflow-x: auto;
      scrollbar-width: none
   }

   .nav a,
   .nav button {
      font-size: 9px;
      gap: 8px;
      flex: 0 0 96px;
      padding: 0 8px
   }

   .nav .home {
      flex-basis: 40px
   }

   .hero img {
      width: 100%;
      aspect-ratio: 329/182;
      object-fit: cover
   }

   .mobile-shortcuts {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      margin-block: 12px
   }

   .mobile-shortcuts a,
   .mobile-shortcuts button {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 9px 8px;
      background: #1b2127;
      border: 0;
      border-bottom: 2px solid #151b20;
      border-radius: 5px;
      font-size: 20px;
      min-height: 40px
   }

   .mobile-shortcuts b {
      font-size: 10px;
      flex: 1;
      text-align: center
   }

   .game-section {
      border-radius: 12px 12px 6px 6px;
      border-top: 3px solid var(--red);
      background: #1c2229;
      margin: 10px 0 18px;
      overflow: hidden;
      scroll-margin-top: 100px
   }

   #slots {
      border-color: #f7ca00
   }

   #live {
      border-color: #3282ff
   }

   .section-bar>.wrap {
      padding: 9px 0 0
   }

   .section-bar h2 {
      font-weight: bold;
      font-size: 15px;
      gap: 8px
   }

   .section-bar i {
      width: 24px;
      height: 24px;
      font-size: 14px
   }

   #slots .section-bar i,
   #slots .tabs .active {
      background: #ebbd00;
      border-color: #ebbd00
   }

   #live .section-bar i,
   #live .tabs .active {
      background: #3282ff;
      border-color: #3282ff
   }

   .tabs {
      margin-top: 9px;
      gap: 4px
   }

   .tabs button {
      font-size: 8px;
      padding: 9px 10px;
      border-radius: 5px
   }

   .tabs button::before {
      font-size: 12px;
      margin-right: 5px
   }

   .game-content {
      padding: 12px 0 10px
   }

   .game-subtitle {
      display: none
   }

   .game-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px 7px
   }

   .game-card {
      border-radius: 9px;
      aspect-ratio: 98/118
   }

   .game-card:nth-child(n+7) {
      display: none
   }

   .game-grid.expanded .game-card {
      display: block
   }

   .mobile-all {
      display: block;
      width: 100%;
      margin-top: 9px;
      background: #353f4a;
      border: 0;
      padding: 8px;
      font-size: 9px;
      font-weight: bold;
      border-radius: 4px
   }

   .sports,
   .winners,
   .info-grid,
   .services,
   .providers {
      display: none
   }

   footer {
      padding: 12px 0;
      border-top-width: 1px
   }

   .footer-top {
      display: flex;
      flex-direction: column;
      gap: 0
   }

   .footer-top .logo {
      width: 130px
   }

   .footer-top .age {
      vertical-align: 9px;
      font-size: 11px;
      padding: 5px
   }

   .footer-top h3 {
      display: none
   }

   .footer-top p {
      font-size: 10px
   }

   .socials {
      margin-top: 10px;
      gap: 4px
   }

   .socials button {
      font-size: 13px;
      padding: 6px 8px;
      border-radius: 4px
   }

   .footer-right {
      padding: 12px 0 0;
      display: flex;
      flex-wrap: wrap;
      gap: 4px
   }

   .footer-right>.login,
   .footer-right>.primary {
      font-size: 9px;
      flex: 1;
      padding: 9px 5px;
      border-radius: 5px
   }

   .legal-links {
      display: grid;
      grid-template-columns: 1fr 1fr;
      width: 100%;
      gap: 4px;
      margin-top: 5px
   }

   .legal-links button {
      font-size: 9px;
      padding: 11px 3px;
      border-radius: 5px
   }

   .payments {
      margin-top: 16px;
      gap: 16px;
      padding: 15px 0;
      font-size: 10px
   }

   .license {
      padding: 12px 0 0;
      gap: 10px;
      align-items: flex-start
   }

   .license>strong {
      font-size: 36px
   }

   .license p {
      font-size: 9px;
      margin: 0
   }

   .support {
      width: 38px;
      height: 38px;
      font-size: 22px;
      border-width: 2px;
      right: 10px;
      bottom: 15px
   }

   .hero-link:focus-visible {
      opacity: .5;
      background: transparent
   }

   .game-card .play {
      font-size: 24px
   }
}

@media(prefers-reduced-motion:reduce) {
   html {
      scroll-behavior: auto
   }

   * {
      transition: none !important
   }
}

@media(max-width: 600px) {
   .sports:target {
      display: block;
      margin-top: 20px
   }

   .sports:target .coupon {
      border-left: 0
   }

   .sports:target .match-row,
   .sports:target .match-head {
      grid-template-columns: 42px 1fr repeat(3, 38px);
      gap: 4px;
      padding: 8px 4px
   }

   .sports:target #matches {
      padding: 8px
   }

   .sports:target .sport-tabs {
      padding: 8px;
      gap: 3px
   }

   .sports:target .sport-tabs button {
      min-width: 0;
      flex: 1;
      padding: 6px
   }

   .sports:target .match-row b {
      font-size: 10px;
      line-height: 17px
   }
}

/* Reference refinements: compact navigation, card actions and mobile drawer. */
.ui-icon {
   width: 18px;
   height: 18px;
   fill: currentColor;
   display: inline-block;
   flex-shrink: 0;
   vertical-align: middle
}

.announcement {
   background: #dc2e35;
   padding-block: 12px
}

.top {
   height: 60px;
   gap: 32px
}

.top .logo {
   width: 200px
}

.account {
   gap: 4px
}

.account>.login,
.account>.primary {
   height: 44px;
   min-width: 112px;
   padding: 10px 18px;
   font-size: 13px;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px
}

.account .ui-icon {
   width: 16px;
   height: 16px
}

.desktop-link {
   font-size: 13px;
   padding: 4px 8px
}

.nav .wrap {
   height: 46px
}

.nav .ui-icon {
   width: 17px;
   height: 17px;
   color: #c5cbd3
}

.nav .home .ui-icon {
   color: var(--red)
}

.nav button .ui-icon {
   color: #ffd000
}

.nav a,
.nav button {
   font-size: 13px;
   font-weight: 600
}

.language-picker {
   position: relative
}

.language {
   display: flex;
   align-items: center;
   gap: 9px;
   height: 44px;
   padding: 10px 18px;
   min-width: 123px;
   font-weight: 600;
   border-color: #303842
}

.language img,
.language-options img {
   width: 16px;
   height: 16px;
   object-fit: cover;
   border-radius: 50%;
   flex-shrink: 0
}

.chevron {
   margin-left: auto;
   color: #9ca8b6
}

.language-options {
   position: absolute;
   left: 0;
   top: calc(100% + 5px);
   z-index: 45;
   min-width: 145px;
   padding: 4px;
   border: 1px solid #343e49;
   background: #171d24;
   border-radius: 7px;
   box-shadow: 0 8px 24px #0006
}

.language-options button {
   width: 100%;
   display: flex;
   gap: 10px;
   align-items: center;
   background: none;
   border: 0;
   border-radius: 4px;
   font-size: 12px;
   padding: 10px
}

.language-options button[aria-pressed=true] {
   background: #303944
}

.section-bar>.wrap {
   padding-block: 8px;
   gap: 14px
}

.section-bar h2 {
   font-size: 22px;
   gap: 12px
}

.section-bar h2 i {
   width: 40px;
   height: 40px
}

.section-bar .tabs {
   gap: 4px;
   margin-top: 0
}

.tabs button {
   height: 40px;
   padding: 8px 14px;
   font-size: 12px;
   display: flex;
   align-items: center;
   border-radius: 10px
}

.tabs button::before {
   content: '';
   display: inline-block;
   width: 16px;
   height: 16px;
   flex-shrink: 0;
   background: currentColor;
   opacity: .65;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect width='7' height='7' rx='2'/%3E%3Crect x='9' width='7' height='7' rx='2'/%3E%3Crect y='9' width='7' height='7' rx='2'/%3E%3Crect x='9' y='9' width='7' height='7' rx='2'/%3E%3C/svg%3E") center/contain no-repeat
}

.tabs button.active::before {
   opacity: 1
}

#slots .tabs [data-tab="Diğer Oyunlar"] {
   display: none
}

.tabs button[data-tab="Diğer"]:after {
   content: '⌄';
   margin-left: 8px
}

.game-card {
   margin: 0;
   position: relative;
   isolation: isolate
}

.game-card img {
   object-fit: fill;
   transform: none;
   filter: saturate(1.07) contrast(1.025);
   transition: filter .18s ease
}

.game-card:hover img,
.game-card:focus-within img {
   transform: none;
   filter: blur(7px) brightness(.5) saturate(1.1)
}

.game-overlay {
   position: absolute;
   inset: 0;
   opacity: 0;
   transition: opacity .18s;
   background: #07101a22;
   pointer-events: none
}

.game-card:hover .game-overlay,
.game-card:focus-within .game-overlay {
   opacity: 1;
   pointer-events: auto
}

.card-tools {
   position: absolute;
   top: 8px;
   right: 9px;
   display: flex;
   gap: 1px;
   background: #0d141c99;
   border-radius: 20px;
   padding: 0 3px
}

.card-tools button {
   background: transparent;
   border: 0;
   border-radius: 50%;
   height: 28px;
   width: 28px;
   padding: 0;
   color: #cbd2da;
   font-size: 16px
}

.card-tools button[aria-pressed=true] {
   color: #ffd34b
}

.game-play {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   border: 0;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   padding: 10px;
   background: #fff;
   color: #6e531a;
   display: flex;
   align-items: center;
   justify-content: center
}

.game-play svg {
   width: 25px;
   height: 25px;
   fill: currentColor
}

.game-play:hover {
   background: #fff;
   filter: brightness(.95)
}

.menu-open {
   overflow: hidden
}

dialog#drawer {
   position: fixed;
   inset: 0 0 0 auto;
   margin: 0;
   width: 254px;
   height: 100dvh;
   max-height: none;
   max-width: 100%;
   padding: 0;
   border: 0;
   border-left: 1px solid #232a32;
   border-radius: 0;
   background: #13181e;
   color: #fff;
   text-align: left;
   box-shadow: -15px 0 50px #0005;
   overflow-y: auto;
   scrollbar-width: thin;
   z-index: 100
}

#drawer::backdrop {
   background: #0009;
   backdrop-filter: blur(2px)
}

.drawer-head {
   display: flex;
   height: 58px;
   align-items: center;
   gap: 4px;
   padding: 6px;
   border-bottom: 1px solid #252c34
}

.brand-mark {
   background: #c92a31;
   border-radius: 6px;
   width: 30px;
   height: 30px;
   font-size: 30px;
   line-height: 30px;
   font-weight: bold;
   text-align: center;
   margin-right: auto
}

.drawer-head button {
   font-size: 9px;
   height: 28px;
   padding: 6px 13px;
   border-radius: 7px;
   white-space: nowrap
}

.drawer-head .drawer-close {
   font-size: 22px;
   padding: 0 5px;
   border: 0;
   background: none
}

.drawer-content {
   padding: 0 6px 65px
}

.drawer-group {
   margin-top: 12px
}

.group-toggle {
   display: flex;
   align-items: center;
   gap: 9px;
   border: 0;
   background: none;
   padding: 0;
   font-size: 14px;
   margin-bottom: 9px;
   border-radius: 0
}

.collapse-symbol {
   width: 20px;
   height: 21px;
   background: #353e48;
   border-radius: 5px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #c7cdd5;
   font-size: 17px
}

.drawer-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 4px
}

.drawer-grid a,
.drawer-grid button {
   min-height: 36px;
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   font-size: 10px;
   font-weight: 600;
   background: #20262e;
   border: 1px solid #2c343e;
   border-radius: 7px;
   box-shadow: inset 0 1px #ffffff07;
   line-height: 1.2;
   text-align: left
}

.drawer-grid .ui-icon {
   width: 13px;
   height: 13px;
   color: #c4ccd5
}

#drawer .drawer-grid a {
   padding: 8px 10px
}

.drawer-language {
   margin-top: 20px
}

.drawer-language .language {
   width: 100%;
   height: 31px;
   padding: 6px 11px;
   border-radius: 7px;
   font-size: 10px;
   background: #171c23;
   min-width: 0
}

.drawer-language .language img {
   width: 12px;
   height: 12px
}

.drawer-language .language-options {
   top: auto;
   bottom: calc(100% + 4px);
   width: 100%
}

.drawer-support {
   position: fixed;
   bottom: 12px;
   right: 10px;
   width: 32px;
   height: 32px;
   border: 2px solid #ff343b;
   border-radius: 50%;
   background: #9d2029;
   padding: 4px;
   color: white
}

.drawer-support .ui-icon {
   width: 21px;
   height: 21px
}

html[lang=en] .account .login:before {
   content: 'Log In'
}

html[lang=en] .account .primary:before {
   content: 'Sign Up'
}

@media(min-width: 601px) {

   html[lang=en] .account .login:before,
   html[lang=en] .account .primary:before {
      content: none
   }
}

@media(min-width: 1101px) and (max-width:1400px) {
   .tabs button {
      padding-inline: 10px
   }

   .section-bar h2 {
      font-size: 20px
   }

   .top {
      gap: 22px
   }

   .nav a,
   .nav button {
      font-size: 12px
   }
}

@media(min-width: 601px) and (max-width:1100px) {
   .section-bar>.wrap {
      display: flex
   }

   .section-bar h2 {
      font-size: 18px
   }

   .section-bar .tabs {
      min-width: 0
   }

   .section-bar i {
      width: 32px;
      height: 32px
   }

   .tabs button {
      height: 36px;
      padding: 8px 10px
   }

   .nav a,
   .nav button {
      gap: 6px;
      font-size: 11px
   }

   .top .logo {
      width: 170px
   }
}

@media(max-width: 600px) {
   .announcement {
      padding: 5px 0;
      height: 26px
   }

   .top {
      height: 39px;
      gap: 5px
   }

   .top .logo {
      width: 103px
   }

   .top>.language-picker {
      display: none
   }

   .account>.login,
   .account>.primary {
      min-width: 47px;
      height: 26px;
      padding: 6px 9px;
      font-size: 0;
      display: block
   }

   .account>.login:before,
   .account>.primary:before {
      font-size: 9px
   }

   .account span {
      display: none
   }

   .nav .wrap {
      height: 31px
   }

   .nav .ui-icon {
      width: 12px;
      height: 12px
   }

   .nav a,
   .nav button {
      font-size: 9px
   }

   .account #menu-toggle {
      padding: 5px 9px
   }

   .section-bar>.wrap {
      padding: 9px 0 0;
      display: block
   }

   .section-bar h2 {
      font-size: 15px;
      gap: 8px
   }

   .section-bar h2 i {
      width: 24px;
      height: 24px
   }

   .section-bar h2 .ui-icon {
      width: 14px;
      height: 14px
   }

   .section-bar .tabs {
      margin-top: 8px
   }

   .tabs button {
      height: 30px;
      padding: 6px 10px;
      font-size: 8px;
      border-radius: 6px
   }

   .tabs button::before {
      width: 12px;
      height: 12px;
      margin-right: 5px
   }

   .game-play {
      width: 34px;
      height: 34px;
      padding: 8px
   }

   .card-tools {
      top: 5px;
      right: 4px
   }

   .card-tools button {
      width: 23px;
      height: 23px;
      font-size: 13px
   }

   .game-card {
      aspect-ratio: 160/210
   }

   .game-card img {
      object-fit: fill
   }

   .game-overlay {
      pointer-events: auto
   }

   .game-card:active .game-overlay {
      opacity: 1
   }

   .game-card:active img {
      filter: blur(7px) brightness(.5)
   }
}

#drawer .drawer-grid a {
   display: flex;
   gap: 8px
}

#drawer .drawer-grid a span {
   white-space: nowrap;
   font-size: 10px;
   letter-spacing: -.25px
}

.game-card:focus-within .game-overlay {
   pointer-events: auto
}

/* Compact edge-to-edge provider ribbon and continuous game carousels. */
.game-content {
   position: relative
}

.game-subtitle {
   padding-right: 110px
}

.carousel-controls {
   display: flex;
   align-items: center;
   gap: 4px;
   position: absolute;
   top: 20px;
   right: 0
}

.carousel-controls button {
   width: 29px;
   height: 30px;
   padding: 0;
   background: #303944;
   border: 1px solid #434e5b;
   border-radius: 7px;
   color: #c6d0de;
   font-size: 21px;
   line-height: 1
}

.carousel-controls .carousel-pause {
   font-size: 12px
}

.carousel-controls button[aria-pressed=true] {
   color: #ff424b
}

.carousel-viewport {
   width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
   touch-action: pan-x pan-y;
   position: relative
}

.carousel-viewport::-webkit-scrollbar {
   display: none
}

.carousel-track.game-grid {
   display: flex;
   gap: 11px;
   width: max-content;
   max-width: none
}

.carousel-track .game-card {
   display: block !important;
   flex: 0 0 160px;
   width: 160px;
   aspect-ratio: 160/210;
   user-select: none
}

.carousel-track .game-card img {
   pointer-events: none
}

.carousel-track .game-card:nth-child(n+7) {
   display: block
}

.carousel-viewport.expanded {
   overflow: visible
}

.carousel-track.game-grid.expanded {
   display: grid;
   width: 100%;
   grid-template-columns: repeat(auto-fill, minmax(145px, 1fr))
}

.carousel-track.game-grid.expanded .game-card {
   width: 100%
}

.carousel-track .empty {
   padding: 25px 5px;
   color: #aebccc
}

.providers {
   display: block;
   border-top: 1px solid #3b434e;
   padding: 22px 0 24px;
   overflow: hidden
}

.providers-heading {
   display: flex;
   align-items: center;
   gap: 9px;
   padding: 0 20px;
   margin-bottom: 15px;
   position: relative
}

.providers-heading>i {
   width: 30px;
   height: 30px;
   font-size: 15px
}

.providers-heading h2 {
   font-size: 18px;
   margin: 0;
   font-weight: 500
}

.providers-heading .carousel-controls {
   position: static;
   margin-left: auto
}

.providers>p {
   display: none
}

.providers .carousel-viewport {
   width: 100%
}

.provider-track.carousel-track {
   padding: 0 20px;
   display: flex;
   gap: 8px;
   width: max-content;
   overflow: visible
}

.provider-track .provider {
   flex: 0 0 164px;
   min-width: 0;
   width: 164px;
   height: 74px;
   border-radius: 8px;
   border: 1px solid #414b58;
   padding: 12px;
   display: grid;
   grid-template-columns: 34px 1fr;
   grid-template-rows: 1fr 1fr;
   column-gap: 9px;
   align-items: center;
   box-shadow: inset 0 1px #ffffff06
}

.provider-track .provider i {
   grid-row: 1/3;
   width: 34px;
   height: 34px;
   margin: 0;
   border-radius: 8px;
   font-size: 20px
}

.provider-track .provider b {
   font-size: 12px;
   font-weight: 600;
   white-space: nowrap;
   margin: 0;
   align-self: end
}

.provider-track .provider small {
   font-size: 10px;
   margin: 3px 0 0;
   color: #aeb9c7;
   align-self: start
}

.mobile-bottom-nav {
   display: none
}

@media(max-width: 600px) {
   body {
      padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px))
   }

   .game-content {
      padding-top: 42px
   }

   .game-content>.carousel-controls {
      top: 6px;
      right: 0;
      gap: 4px
   }

   .carousel-controls button {
      width: 26px;
      height: 25px;
      font-size: 18px;
      border-radius: 6px
   }

   .carousel-controls .carousel-pause {
      font-size: 10px
   }

   .carousel-track.game-grid {
      gap: 8px
   }

   .carousel-track .game-card {
      width: 110px;
      flex-basis: 110px;
      border-radius: 9px
   }

   .carousel-track.game-grid.expanded {
      grid-template-columns: repeat(3, minmax(0, 1fr))
   }

   .mobile-all {
      margin-top: 10px
   }

   .providers {
      display: block;
      padding: 16px 0 18px;
      background: #252c34
   }

   .providers-heading {
      padding: 0 10px;
      gap: 7px;
      margin-bottom: 10px
   }

   .providers-heading h2 {
      font-size: 14px;
      font-weight: 600
   }

   .providers-heading>i {
      width: 25px;
      height: 25px;
      font-size: 13px
   }

   .provider-track.carousel-track {
      padding-inline: 10px;
      gap: 6px
   }

   .provider-track .provider {
      width: 142px;
      flex-basis: 142px;
      height: 63px;
      padding: 9px;
      grid-template-columns: 29px 1fr;
      column-gap: 7px
   }

   .provider-track .provider i {
      width: 29px;
      height: 29px;
      font-size: 17px
   }

   .provider-track .provider b {
      font-size: 10px
   }

   .provider-track .provider small {
      font-size: 9px
   }

   .mobile-bottom-nav {
      position: fixed;
      z-index: 35;
      bottom: 0;
      left: 0;
      right: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      height: calc(61px + env(safe-area-inset-bottom, 0px));
      padding: 5px 6px calc(5px + env(safe-area-inset-bottom, 0px));
      background: #181e25f5;
      border-top: 1px solid #39424d;
      box-shadow: 0 -5px 20px #0003;
      backdrop-filter: blur(12px)
   }

   .mobile-bottom-nav a,
   .mobile-bottom-nav button {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 5px 0;
      border: 0;
      background: transparent;
      border-radius: 7px;
      color: #a9b5c5;
      font-size: 9px;
      font-weight: 600;
      position: relative;
      min-width: 0
   }

   .mobile-bottom-nav .ui-icon {
      height: 19px;
      width: 19px
   }

   .mobile-bottom-nav .active {
      color: #ff3b44;
      background: #ff343810
   }

   .mobile-bottom-nav .active:before {
      content: '';
      position: absolute;
      top: -5px;
      width: 24px;
      height: 2px;
      background: #ff343b;
      border-radius: 0 0 4px 4px
   }

   .support {
      bottom: calc(76px + env(safe-area-inset-bottom, 0px))
   }

   .menu-open .mobile-bottom-nav {
      visibility: hidden
   }

   .drawer-support {
      bottom: 16px
   }

   html {
      scroll-padding-bottom: 85px
   }
}

@media(prefers-reduced-motion:reduce) {
   .carousel-viewport {
      scroll-behavior: auto
   }
}

/* Language chevron: fixed icon box, independent of font baselines. */
.language .chevron {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 12px;
   width: 12px;
   height: 12px;
   margin: 0 0 0 auto;
   padding: 0;
   line-height: 1;
   align-self: center;
   transition: transform .15s ease
}

.chevron svg {
   display: block;
   width: 12px;
   height: 12px;
   fill: none;
   stroke: currentColor;
   stroke-width: 1.5;
   stroke-linecap: round;
   stroke-linejoin: round
}

.language[aria-expanded=true] .chevron {
   transform: rotate(180deg)
}

.language>span:not(.chevron) {
   line-height: 1.2
}

.drawer-language .language .chevron {
   flex-basis: 10px;
   width: 10px;
   height: 10px
}

.drawer-language .chevron svg {
   width: 10px;
   height: 10px
}

/* Separate reference proportions for desktop and mobile navigation. */
dialog#drawer {
   width: 346px;
   background: linear-gradient(125deg, #191e25, #151a20 75%);
   border-left: 1px solid #2a3038;
   box-shadow: -8px 0 24px #0002
}

#drawer::backdrop {
   background: transparent;
   backdrop-filter: none
}

.drawer-head {
   height: 61px;
   padding: 8px 16px 14px 24px;
   gap: 8px;
   justify-content: flex-end
}

.drawer-head .brand-mark {
   display: none
}

.drawer-head>.login,
.drawer-head>.primary {
   height: 36px;
   padding: 8px 10px;
   background: #343c46;
   border-color: #343c46;
   box-shadow: none;
   font-size: 13px;
   display: flex;
   align-items: center;
   gap: 8px;
   border-radius: 10px
}

.drawer-head .ui-icon {
   width: 16px;
   height: 16px;
   color: #ff3038
}

.drawer-head .drawer-close {
   height: 30px;
   font-size: 24px;
   padding: 0 0 0 4px
}

.drawer-content {
   padding: 0 19px 90px 23px
}

.drawer-group {
   margin-top: 16px
}

.group-toggle {
   font-size: 20px;
   gap: 12px;
   margin-bottom: 12px;
   line-height: 28px;
   letter-spacing: -.6px
}

.collapse-symbol {
   width: 28px;
   height: 28px;
   font-size: 20px;
   border-radius: 8px
}

.drawer-grid {
   gap: 4px 6px;
   grid-template-columns: repeat(2, minmax(0, 1fr))
}

#drawer .drawer-grid a,
#drawer .drawer-grid button {
   height: 48px;
   min-height: 48px;
   padding: 10px 14px;
   font-size: 13px;
   gap: 10px;
   border-radius: 10px;
   min-width: 0;
   font-weight: 600;
   box-shadow: inset 0 1px #ffffff0b
}

#drawer .drawer-grid a span,
#drawer .drawer-grid button span {
   font-size: 13px;
   letter-spacing: -.4px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   min-width: 0
}

.drawer-grid .ui-icon {
   width: 16px;
   height: 16px;
   flex-shrink: 0
}

.drawer-group:first-child .drawer-grid button:first-child .ui-icon {
   color: #ffd100
}

.drawer-language {
   display: none
}

.drawer-support {
   right: 20px;
   bottom: 28px;
   width: 60px;
   height: 60px;
   border-width: 3px;
   padding: 12px
}

.drawer-support .ui-icon {
   width: 31px;
   height: 31px
}

.brand-mark img {
   display: block;
   width: 30px;
   height: 31px;
   object-fit: contain;
   border-radius: 5px
}

@media(max-width: 600px) {
   dialog#drawer {
      width: 260px;
      max-width: calc(100vw - 42px);
      background: #13181e
   }

   #drawer::backdrop {
      background: #000b;
      backdrop-filter: none
   }

   .drawer-head {
      height: 61px;
      padding: 10px;
      gap: 4px;
      justify-content: normal
   }

   .drawer-head .brand-mark {
      display: block;
      flex-shrink: 0;
      margin-right: auto;
      width: 30px;
      height: 31px;
      background: none
   }

   .drawer-head>.login,
   .drawer-head>.primary {
      height: 28px;
      padding: 6px 13px;
      font-size: 9px;
      border-radius: 7px;
      display: block;
      letter-spacing: -.2px
   }

   .drawer-head>.login {
      background: #414b57;
      box-shadow: inset 0 2px #ffffff25
   }

   .drawer-head>.primary {
      background: #ff3038;
      border-color: #ff3038;
      box-shadow: inset 0 2px #ffffff25
   }

   .drawer-head .ui-icon {
      display: none
   }

   .drawer-head .drawer-close {
      font-size: 21px;
      width: 20px;
      padding: 0
   }

   .drawer-content {
      padding: 0 10px 65px
   }

   .drawer-group {
      margin-top: 14px
   }

   .group-toggle {
      font-size: 14px;
      line-height: 21px;
      gap: 9px;
      margin-bottom: 9px;
      letter-spacing: -.25px
   }

   .collapse-symbol {
      width: 21px;
      height: 21px;
      font-size: 16px;
      border-radius: 5px
   }

   .drawer-grid {
      gap: 4px
   }

   #drawer .drawer-grid a,
   #drawer .drawer-grid button {
      height: 36px;
      min-height: 36px;
      padding: 8px 10px;
      gap: 8px;
      border-radius: 7px;
      font-size: 10px
   }

   #drawer .drawer-grid a span,
   #drawer .drawer-grid button span {
      font-size: 10px;
      letter-spacing: -.25px
   }

   .drawer-grid .ui-icon {
      width: 13px;
      height: 13px
   }

   .drawer-group:first-child .drawer-grid button:first-child .ui-icon {
      color: #c4ccd5
   }

   .drawer-language {
      display: block;
      margin-top: 18px
   }

   .drawer-language .language {
      height: 31px
   }

   .drawer-support {
      bottom: 12px;
      right: 10px;
      width: 32px;
      height: 32px;
      padding: 4px;
      border-width: 2px
   }

   .drawer-support .ui-icon {
      width: 20px;
      height: 20px
   }
}

@media(max-width: 600px) {
   #drawer .drawer-group:nth-child(3) .drawer-grid a:last-child span {
      font-size: 9px;
      letter-spacing: -.45px;
      text-overflow: clip
   }
}

/* Exact reference header silhouettes, with theme-colored masks. */
.nav-reference-icon {
   display: inline-block;
   width: 22px;
   height: 22px;
   flex: 0 0 22px;
   background: currentColor;
   mask: var(--nav-image) center/contain no-repeat;
   -webkit-mask: var(--nav-image) center/contain no-repeat;
   color: #c5cbd3
}

.nav-icon-home {
   --nav-image: url('../images/nav-home.png');
   color: #ff3038
}

.nav-icon-ball {
   --nav-image: url('../images/nav-ball.png')
}

.nav-icon-live {
   --nav-image: url('../images/nav-live.png')
}

.nav-icon-slot {
   --nav-image: url('../images/nav-slot.png')
}

.nav-icon-cards {
   --nav-image: url('../images/nav-cards.png')
}

.nav-icon-horse {
   --nav-image: url('../images/nav-horse.png')
}

.nav-icon-dice {
   --nav-image: url('../images/nav-dice.png')
}

.nav-icon-gift {
   --nav-image: url('../images/nav-gift.png');
   color: #ffd000
}

.nav a,
.nav button {
   transition: color .15s, background-color .15s;
   gap: 10px
}

.nav a:hover,
.nav a:focus-visible {
   color: #ff3038;
   background: #161b21
}

.nav a:hover .nav-reference-icon,
.nav a:focus-visible .nav-reference-icon {
   color: #ff3038
}

.nav button[data-info="Promosyonlar"]:hover,
.nav button[data-info="Promosyonlar"]:focus-visible {
   color: #ffd000;
   background: #161b21;
   filter: none
}

.nav button[data-info="Promosyonlar"]:hover .nav-reference-icon {
   color: #ffd000
}

.logo {
   object-fit: contain
}

.top .logo {
   height: 44px;
   width: 200px
}

@media(max-width: 600px) {
   .top .logo {
      width: 103px;
      height: 29px
   }

   .nav-reference-icon {
      width: 17px;
      height: 17px;
      flex-basis: 17px
   }

   .nav a,
   .nav button {
      gap: 6px
   }
}

/* Mobile reference: use viewport proportions instead of a fixed 260px drawer.
   Keeps the same visual scale at 330px, 390px and 435px device widths. */
@media(max-width: 600px) {
   dialog#drawer {
      --menu-unit: calc(100vw / 330);
      width: 80vw;
      max-width: 80vw;
      min-width: 0;
      height: 100dvh;
      padding: 0;
      right: 0;
      left: auto;
      margin: 0;
      border-left: 1px solid #292f37;
      background: #13181e;
      text-size-adjust: 100%;
      -webkit-text-size-adjust: 100%
   }

   #drawer .drawer-head {
      height: calc(57 * var(--menu-unit));
      min-height: calc(57 * var(--menu-unit));
      padding: calc(10 * var(--menu-unit));
      gap: calc(4 * var(--menu-unit))
   }

   #drawer .brand-mark,
   #drawer .brand-mark img {
      width: calc(30 * var(--menu-unit));
      height: calc(30 * var(--menu-unit));
      border-radius: calc(5 * var(--menu-unit))
   }

   #drawer .drawer-head>.login,
   #drawer .drawer-head>.primary {
      height: calc(28 * var(--menu-unit));
      min-width: calc(60 * var(--menu-unit));
      padding: calc(6 * var(--menu-unit)) calc(10 * var(--menu-unit));
      font-size: calc(9 * var(--menu-unit));
      line-height: 1.2;
      border-radius: calc(7 * var(--menu-unit));
      letter-spacing: -.2px
   }

   #drawer .drawer-head .drawer-close {
      font-size: calc(21 * var(--menu-unit));
      width: calc(20 * var(--menu-unit));
      height: calc(28 * var(--menu-unit));
      padding: 0;
      flex-shrink: 0
   }

   #drawer .drawer-content {
      padding: 0 calc(10 * var(--menu-unit)) calc(72 * var(--menu-unit))
   }

   #drawer .drawer-group {
      margin-top: calc(18 * var(--menu-unit))
   }

   #drawer .drawer-group:first-child {
      margin-top: calc(12 * var(--menu-unit))
   }

   #drawer .group-toggle {
      font-size: calc(14 * var(--menu-unit));
      line-height: calc(21 * var(--menu-unit));
      gap: calc(9 * var(--menu-unit));
      margin: 0 0 calc(9 * var(--menu-unit));
      padding: 0;
      letter-spacing: -.3px
   }

   #drawer .collapse-symbol {
      width: calc(21 * var(--menu-unit));
      height: calc(21 * var(--menu-unit));
      border-radius: calc(5 * var(--menu-unit));
      font-size: calc(16 * var(--menu-unit));
      flex-shrink: 0
   }

   #drawer .drawer-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: calc(4 * var(--menu-unit))
   }

   #drawer .drawer-grid a,
   #drawer .drawer-grid button {
      height: calc(36 * var(--menu-unit));
      min-height: calc(36 * var(--menu-unit));
      padding: calc(8 * var(--menu-unit)) calc(10 * var(--menu-unit));
      gap: calc(8 * var(--menu-unit));
      border-radius: calc(7 * var(--menu-unit));
      font-size: calc(10 * var(--menu-unit));
      background: #20262e;
      border-color: #303842
   }

   #drawer .drawer-grid a span,
   #drawer .drawer-grid button span {
      font-size: calc(10 * var(--menu-unit));
      font-weight: 600;
      letter-spacing: -.3px;
      line-height: 1.2
   }

   #drawer .drawer-grid .ui-icon {
      width: calc(13 * var(--menu-unit));
      height: calc(13 * var(--menu-unit));
      flex-shrink: 0
   }

   #drawer .drawer-group:nth-child(3) .drawer-grid a:last-child span {
      font-size: calc(10 * var(--menu-unit));
      letter-spacing: -.5px
   }

   #drawer .drawer-language {
      margin-top: calc(18 * var(--menu-unit));
      display: block
   }

   #drawer .drawer-language .language {
      height: calc(31 * var(--menu-unit));
      padding: calc(6 * var(--menu-unit)) calc(11 * var(--menu-unit));
      gap: calc(7 * var(--menu-unit));
      border-radius: calc(7 * var(--menu-unit));
      font-size: calc(10 * var(--menu-unit))
   }

   #drawer .drawer-language .language img {
      width: calc(12 * var(--menu-unit));
      height: calc(12 * var(--menu-unit))
   }

   #drawer .language .chevron,
   #drawer .language .chevron svg {
      width: calc(10 * var(--menu-unit));
      height: calc(10 * var(--menu-unit));
      flex-basis: calc(10 * var(--menu-unit))
   }

   #drawer .language-options button {
      font-size: calc(11 * var(--menu-unit));
      padding: calc(10 * var(--menu-unit))
   }

   #drawer .drawer-support {
      width: calc(34 * var(--menu-unit));
      height: calc(34 * var(--menu-unit));
      right: calc(10 * var(--menu-unit));
      bottom: calc(12 * var(--menu-unit));
      padding: calc(5 * var(--menu-unit))
   }

   #drawer .drawer-support .ui-icon {
      width: calc(21 * var(--menu-unit));
      height: calc(21 * var(--menu-unit))
   }
}

#drawer .drawer-reference-icon {
   width: 20px;
   height: 20px;
   flex: 0 0 20px;
   color: #c4ccd5
}

#drawer .ninja-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 16px;
   width: 16px;
   height: 16px;
   background: #10091c;
   color: #eee;
   font-size: 10px;
   font-weight: 800;
   border-radius: 2px
}

#drawer .drawer-group:first-child .drawer-reference-icon {
   color: #ffd100
}

@media(max-width: 600px) {
   #drawer .drawer-grid .drawer-reference-icon {
      width: calc(17 * var(--menu-unit));
      height: calc(17 * var(--menu-unit));
      flex-basis: calc(17 * var(--menu-unit));
      color: #c4ccd5;
      margin-left: calc(-2 * var(--menu-unit));
      margin-right: calc(-2 * var(--menu-unit))
   }

   #drawer .drawer-grid .ninja-badge {
      width: calc(13 * var(--menu-unit));
      height: calc(13 * var(--menu-unit));
      flex-basis: calc(13 * var(--menu-unit));
      font-size: calc(8 * var(--menu-unit))
   }
}

/* Reserve the document scrollbar lane so opening a dialog cannot shift content. */
html {
   scrollbar-gutter: stable
}

body.menu-open {
   overflow: hidden
}

/* Matched winners panels: stationary titles and independent red scrollbars. */
.winners {
   gap: 20px;
   margin-top: 24px
}

.winners article {
   height: 440px;
   border-radius: 11px;
   background: #343c46;
   min-width: 0;
   overflow: hidden
}

.winners h2 {
   height: 48px;
   padding: 0 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   font-size: 16px;
   font-weight: 400;
   line-height: 1;
   border-bottom: 1px solid #424b56
}

.winners h2 em {
   display: flex;
   margin: 0
}

.winners h2 .nav-reference-icon {
   width: 22px;
   height: 22px;
   color: #ff3038
}

.winner-scroll {
   height: 392px;
   overflow-y: auto;
   overflow-x: hidden;
   overscroll-behavior: contain;
   scrollbar-color: #ff343b transparent;
   scrollbar-width: thin;
   scrollbar-gutter: stable;
   padding: 12px 0;
   outline-offset: -3px
}

.winner-scroll::-webkit-scrollbar {
   width: 4px
}

.winner-scroll::-webkit-scrollbar-track {
   background: transparent
}

.winner-scroll::-webkit-scrollbar-thumb {
   background: #ff343b;
   border-radius: 5px
}

.winner-scroll .winner {
   height: 64px;
   min-height: 64px;
   margin: 0 16px 8px 20px;
   gap: 12px
}

.winner-scroll .winner:last-child {
   margin-bottom: 0
}

.winner-scroll .winner>i {
   width: 64px;
   height: 64px;
   flex: 0 0 64px;
   background: #424d59;
   border-radius: 9px
}

.winner-scroll .winner>i svg {
   width: 23px;
   height: 23px
}

.winner-scroll .winner>img {
   width: 64px;
   height: 64px;
   flex: 0 0 64px;
   border-radius: 8px;
   object-fit: cover
}

.winner-person {
   min-width: 0;
   font-size: 13px;
   line-height: 1.4
}

.winner-person>b {
   font-weight: 600
}

.winner-scroll small {
   font-size: 12px;
   color: #c7d8f0;
   line-height: 1.4;
   margin-top: 5px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis
}

.winner-scroll .winner>strong {
   font-size: 16px;
   white-space: nowrap;
   margin-left: auto;
   font-weight: 700
}

.winner-person>strong {
   display: block;
   font-size: 18px;
   line-height: 1.3;
   margin: 0
}

.winner-details {
   border: 0;
   background: #fff;
   color: #343c46;
   border-radius: 50%;
   font: 700 13px Georgia, serif;
   width: 20px;
   height: 20px;
   flex: 0 0 20px;
   padding: 0;
   margin-left: 0
}

.winner-scroll#casino-winners {
   padding-top: 0;
   padding-bottom: 4px
}

.winner-scroll#casino-winners small {
   margin-top: 0
}

.info-grid {
   gap: 12px;
   margin-top: 20px;
   grid-template-columns: repeat(7, minmax(0, 1fr))
}

.info-grid .info-tile {
   position: relative;
   isolation: isolate;
   overflow: hidden;
   height: 168px;
   display: flex;
   align-items: center;
   flex-direction: column;
   background: #343c46;
   border: 0;
   border-radius: 10px;
   padding: 20px 7px 15px;
   line-height: 1.2;
   box-shadow: inset 0 2px #ffffff03
}

.info-tile:before {
   content: '';
   position: absolute;
   right: 7px;
   top: 7px;
   width: 45px;
   height: 30px;
   background: radial-gradient(circle, #a9b5c4 1px, transparent 1.2px) 0 0/6px 6px;
   clip-path: polygon(0 0, 100% 0, 100% 45%, 76% 45%, 76% 100%, 62% 100%, 62% 63%, 45% 63%, 45% 85%, 30% 85%, 30% 40%, 0 40%);
   opacity: .9
}

.tile-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   margin-bottom: 16px;
   color: #f3c000
}

.tile-icon>svg,
.tile-icon>img {
   display: block;
   width: 32px;
   height: 32px
}

.info-tile.trust .tile-icon {
   color: #12cf70
}

.info-tile.interface .tile-icon {
   color: #3282ff
}

.info-tile.withdraw .tile-icon {
   color: #ff781e
}

.info-tile.deposit .tile-icon {
   color: #ff343b
}

.transfer-mark {
   width: 32px;
   height: 32px;
   border-radius: 50%;
   background: #fff;
   color: #20252d;
   font-size: 28px;
   line-height: 32px;
   font-weight: 900;
   font-style: italic;
   border-top: 3px solid #ff343b
}

.tile-lead {
   font-size: 14px;
   margin-bottom: 12px
}

.info-tile>b {
   font-size: 16px;
   line-height: 1.3;
   margin-bottom: 12px
}

.info-tile>small {
   font-size: 11px;
   text-decoration: underline;
   color: #d1def1;
   margin-top: auto
}

.info-tile:hover {
   background: #3b4551;
   filter: none
}

@media(min-width: 601px) and (max-width:1000px) {
   .info-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr))
   }

   .winner-scroll .winner {
      margin-left: 12px;
      gap: 8px
   }

   .winner-scroll .winner>strong {
      font-size: 13px
   }

   .winner-scroll .winner>i {
      width: 46px;
      flex-basis: 46px
   }

   .winner-scroll small {
      font-size: 10px
   }

   .winner-details {
      width: 17px;
      height: 17px;
      flex-basis: 17px
   }
}

@supports selector(::-webkit-scrollbar) {
   .winner-scroll {
      scrollbar-width: auto
   }

   .winner-scroll::-webkit-scrollbar {
      width: 4px
   }

   .winner-scroll::-webkit-scrollbar-button {
      display: none;
      height: 0;
      width: 0
   }
}

/* Footer actions have their own wrapping row and a real gap at every width. */
.footer-right {
   min-width: 0
}

.footer-actions {
   display: flex;
   align-items: stretch;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 10px
}

.footer-actions>button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 44px;
   padding: 11px 18px;
   white-space: normal;
   line-height: 1.35;
   font-size: 13px;
   flex-shrink: 0
}

.footer-actions>.primary {
   min-width: 138px
}

.footer-right .legal-links {
   flex-wrap: wrap;
   justify-content: flex-end;
   gap: 5px;
   margin-top: 20px
}

/* Reference provider heading, above an automatic ribbon without controls. */
.providers {
   padding-top: 28px;
   padding-bottom: 28px
}

.providers-heading {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0;
   padding: 0 16px;
   margin: 0;
   text-align: center
}

.providers-heading>i {
   width: 40px;
   height: 40px;
   margin: 0 0 24px;
   font-size: 18px
}

.providers-heading h2 {
   font-size: 22px;
   line-height: 1.25;
   font-weight: 400;
   margin: 0
}

.providers>p {
   display: block;
   text-align: center;
   font-size: 16px;
   line-height: 1.5;
   color: #bdcde3;
   margin: 20px 16px 22px
}

.providers .carousel-controls {
   display: none !important
}

@media(max-width: 1100px) {

   .footer-actions,
   .footer-right .legal-links {
      justify-content: flex-start
   }
}

@media(max-width: 600px) {
   .footer-right {
      display: block;
      padding-top: 12px
   }

   .footer-actions {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
      gap: 8px;
      width: 100%
   }

   .footer-actions>button {
      min-width: 0;
      width: 100%;
      min-height: 38px;
      padding: 7px 6px;
      font-size: 9px;
      border-radius: 6px;
      white-space: normal;
      overflow-wrap: anywhere
   }

   .footer-actions>.primary {
      min-width: 0
   }

   .footer-right .legal-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 4px;
      margin-top: 10px
   }

   .providers {
      padding: 24px 0 20px
   }

   .providers-heading>i {
      width: 36px;
      height: 36px;
      font-size: 16px;
      margin-bottom: 18px
   }

   .providers-heading h2 {
      font-size: 20px
   }

   .providers>p {
      font-size: 12px;
      line-height: 1.5;
      margin: 16px 18px 20px
   }
}

.payment-bar {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 40px;
   border-block: 1px solid #424b56;
   padding: 11px 0
}

.payment-bar .payments {
   display: flex;
   gap: 24px;
   align-items: center;
   overflow-x: auto;
   min-width: 0;
   flex: 1;
   margin: 0;
   padding: 0;
   border: 0;
   scrollbar-width: none;
   overscroll-behavior-x: contain;
   scroll-snap-type: x proximity
}

.payments::-webkit-scrollbar {
   display: none
}

.payment-method {
   display: flex;
   align-items: center;
   gap: 7px;
   flex: 0 0 auto;
   min-height: 38px;
   scroll-snap-align: start;
   color: #cbd3de;
   font-size: 13px
}

.payment-method img {
   width: 38px;
   height: 38px;
   object-fit: contain;
   flex: 0 0 38px
}

.payment-method b {
   white-space: nowrap;
   letter-spacing: -.3px
}

.payment-controls {
   display: flex;
   gap: 4px;
   flex-shrink: 0
}

.payment-controls button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 29px;
   height: 29px;
   padding: 0;
   border: 0;
   border-radius: 50%;
   background: #45505d;
   color: #fff;
   font-size: 16px;
   line-height: 1
}

@media(max-width: 600px) {
   .payment-bar {
      margin-top: 18px;
      padding: 10px 0;
      gap: 7px
   }

   .payment-bar .payments {
      gap: 16px
   }

   .payment-method {
      font-size: 10px;
      gap: 5px
   }

   .payment-method img {
      width: 30px;
      height: 30px;
      flex-basis: 30px
   }

   .payment-controls button {
      width: 24px;
      height: 24px;
      font-size: 13px
   }
}

/* Reference cards and original brand artwork, rendered as CSS sprites. */
.provider-track .provider {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   justify-content: flex-start;
   width: 181px;
   flex: 0 0 181px;
   height: 164px;
   padding: 20px;
   border-radius: 10px;
   background: #343c46;
   border-color: #414952;
   gap: 0
}

.provider-track .provider i.provider-logo {
   display: block;
   width: 48px;
   height: 48px;
   flex: 0 0 48px;
   margin: 0 0 18px;
   border-radius: 11px;
   background-image: url('../images/provider-reference.png');
   background-repeat: no-repeat;
   background-size: 1897px 338px
}

.provider-track .provider b {
   font-size: 16px;
   line-height: 20px;
   font-weight: 600;
   margin: 0;
   align-self: auto;
   letter-spacing: -.6px
}

.provider-track .provider small {
   font-size: 14px;
   line-height: 18px;
   font-weight: 400;
   margin: 18px 0 0;
   align-self: auto;
   color: #bdc5cf;
   letter-spacing: -.4px
}

.provider-track.carousel-track {
   gap: 8px
}

.socials {
   gap: 4px
}

.socials button {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 40px;
   height: 40px;
   padding: 0;
   border-radius: 9px;
   background: #414b59
}

.social-icon {
   display: block;
   width: 24px;
   height: 24px;
   background-image: url('../images/footer-reference.png');
   background-size: 1415px 163px;
   background-repeat: no-repeat
}

.payment-icon {
   display: block;
   width: 38px;
   height: 38px;
   flex: 0 0 38px;
   background-image: url('../images/footer-reference.png');
   background-size: 1415px 163px;
   background-repeat: no-repeat
}

.payment-method {
   gap: 7px
}

.payment-bar .payments {
   gap: 26px
}

.payment-method b {
   font-size: 13px;
   font-weight: 600;
   letter-spacing: -.5px
}

@media(max-width: 600px) {
   .provider-track .provider {
      width: 160px;
      flex-basis: 160px;
      height: 156px;
      padding: 16px
   }

   .provider-track .provider b {
      font-size: 14px
   }

   .provider-track .provider small {
      font-size: 12px
   }

   .payment-method b {
      font-size: 11px
   }

   .payment-bar .payments {
      gap: 18px
   }

   .payment-method img {
      width: 38px;
      height: 38px;
      flex-basis: 38px
   }
}

.provider-track .provider i.provider-logo-0 {
   background-position: -128px -177px
}

.provider-track .provider i.provider-logo-1 {
   background-position: -316px -177px
}

.provider-track .provider i.provider-logo-2 {
   background-position: -504px -177px
}

.provider-track .provider i.provider-logo-3 {
   background-position: -692px -177px
}

.provider-track .provider i.provider-logo-4 {
   background-position: -880px -177px
}

.provider-track .provider i.provider-logo-5 {
   background-position: -1068px -177px
}

.provider-track .provider i.provider-logo-6 {
   background-position: -1256px -177px
}

.provider-track .provider i.provider-logo-7 {
   background-position: -1444px -177px
}

.provider-track .provider i.provider-logo-8 {
   background-position: -1632px -177px
}

.provider-track .provider i.provider-logo-9 {
   background-position: -1820px -177px
}

.social-facebook {
   background-position: -40px -24px
}

.social-instagram {
   background-position: -84px -24px
}

.social-telegram {
   background-position: -128px -24px
}

.social-youtube {
   background-position: -172px -24px
}

.social-x {
   background-position: -216px -24px
}

.payment-crypto {
   background-position: -31px -108px
}

.payment-parakart {
   background-position: -167px -108px
}

.payment-ecopayz {
   background-position: -290px -108px
}

.payment-cepbank {
   background-position: -411px -108px
}

.payment-payruus {
   background-position: -560px -108px
}

.payment-transfer {
   background-position: -677px -108px
}

.payment-visa {
   background-position: -893px -108px
}

.payment-fast {
   background-position: -1185px -108px
}

/* Dropdown is outside the tab strip so overflow cannot crop it. */
.tabs .more-tabs-trigger::after {
   content: '';
   width: 6px;
   height: 6px;
   border-right: 1.5px solid currentColor;
   border-bottom: 1.5px solid currentColor;
   transform: rotate(45deg);
   margin: -3px 0 0 9px;
   transition: transform .15s
}

.tabs .more-tabs-trigger[aria-expanded=true]::after {
   transform: rotate(225deg);
   margin-top: 3px
}

.more-tabs-menu {
   position: fixed;
   z-index: 60;
   min-width: 150px;
   max-width: calc(100vw - 16px);
   padding: 5px;
   border: 1px solid #414b58;
   border-radius: 9px;
   background: #252d37;
   box-shadow: 0 10px 24px #0006
}

.more-tabs-menu button {
   display: block;
   width: 100%;
   text-align: left;
   background: transparent;
   border: 0;
   border-radius: 5px;
   padding: 11px 14px;
   font-size: 12px;
   color: #cbd3de
}

.more-tabs-menu button:hover,
.more-tabs-menu button:focus-visible {
   background: #ff3038;
   color: white
}

/* Full mobile footer shared by the home and account pages. */
.footer-brand {
   display: flex;
   align-items: center;
   gap: 12px
}

.footer-brand .age {
   margin: 0;
   vertical-align: baseline
}

.footer-actions svg {
   width: 15px;
   height: 15px;
   flex-shrink: 0
}

@media(max-width: 700px) {
   footer {
      padding: 13px 0 0;
      border-top: 2px solid var(--red)
   }

   footer>.wrap {
      display: flex;
      flex-direction: column;
      gap: 0;
      width: 100%;
      max-width: none;
      margin: 0;
      padding: 0 14px;
      min-width: 0
   }

   footer .footer-top,
   footer .footer-top>div:first-child,
   footer .license {
      display: contents
   }

   footer .footer-brand {
      order: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 0 0 14px
   }

   footer .footer-brand .logo {
      width: 118px;
      height: 24px;
      object-fit: contain
   }

   footer .footer-brand .age {
      font-size: 10px;
      padding: 6px 8px;
      line-height: 1;
      border-radius: 5px
   }

   footer .footer-top h3 {
      display: none
   }

   footer .license p {
      order: 1;
      margin: 0 0 12px;
      color: #edf0f5;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.18;
      letter-spacing: -.35px;
      overflow-wrap: anywhere
   }

   footer .footer-top>div>p {
      order: 2;
      margin: 0 0 12px;
      font-size: 11px;
      line-height: 1.3;
      letter-spacing: -.4px
   }

   footer .socials {
      order: 3;
      display: flex;
      gap: 4px;
      margin: 0 0 12px
   }

   footer .socials button {
      width: 30px;
      height: 30px;
      border-radius: 5px;
      padding: 0
   }

   footer .social-icon {
      transform: scale(.75)
   }

   footer .footer-right {
      order: 4;
      display: block;
      padding: 0;
      margin: 0 0 12px;
      width: 100%;
      text-align: left
   }

   footer .footer-actions {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 4px;
      width: 100%
   }

   footer .footer-actions>button {
      min-width: 0;
      width: 100%;
      height: 34px;
      min-height: 34px;
      padding: 6px 4px;
      gap: 5px;
      font-size: 10px;
      letter-spacing: -.4px;
      border-radius: 7px
   }

   footer .footer-right .legal-links {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 3px;
      margin-top: 12px
   }

   footer .legal-links button {
      padding: 7px 3px;
      min-height: 37px;
      font-size: 10px;
      letter-spacing: -.5px;
      border-radius: 7px;
      font-weight: 700;
      line-height: 1.2
   }

   footer .license>strong {
      order: 5;
      display: block;
      align-self: stretch;
      margin: 0 -14px;
      padding: 12px 20px 14px;
      border-top: 1px solid var(--border);
      font-size: 49px;
      line-height: 42px;
      height: 70px;
      background: linear-gradient(#fff, #fff) 20px 12px/50px 42px no-repeat;
      color: #86449b;
      letter-spacing: -5px
   }

   footer .payment-bar {
      order: 6;
      display: flex;
      margin: 0 -14px;
      padding: 12px 16px;
      border-bottom: 0;
      gap: 0
   }

   footer .payment-bar .payments {
      gap: 16px;
      min-width: 0;
      padding-right: 32px
   }

   footer .payment-method {
      min-height: 28px;
      gap: 6px
   }

   footer .payment-method b {
      font-size: 10px;
      letter-spacing: -.5px
   }

   footer .payment-method img {
      width: 28px;
      height: 28px;
      flex-basis: 28px
   }

   footer .payment-icon {
      zoom: .74
   }

   footer .payment-controls {
      display: none
   }

   .auth-mode>.support {
      display: block;
      width: 32px;
      height: 32px;
      right: 8px;
      bottom: 8px;
      font-size: 21px;
      border-width: 2px
   }
}

.support svg {
   width: 65%;
   height: 65%;
   vertical-align: middle
}