/* =====================================================================
   RETRO THEME — "Arcade OS 95"
   Only visual overrides for index.html. Loaded after every other sheet;
   selectors are prefixed with `html body` so they win over the originals.
   All motion lives inside (prefers-reduced-motion: no-preference).
   ===================================================================== */

@font-face { font-family: 'Press Start 2P'; src: url('../fonts/press-start-2p-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'VT323'; src: url('../fonts/vt323-400.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url('../fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --r-night: #0e0b24;
  --r-night-2: #17123a;
  --r-night-3: #221a52;
  --r-ink: #07051a;
  --r-line: #2e2766;
  --r-win: #c6c6c6;
  --r-win-hi: #ffffff;
  --r-win-mid: #dfdfdf;
  --r-win-lo: #868686;
  --r-win-dk: #0a0a0a;
  --r-title-a: #000080;
  --r-title-b: #1084d0;
  --r-text: #ece9ff;
  --r-muted: #a9a3d9;
  --r-yellow: #ffd23f;
  --r-pink: #ff4fd8;
  --r-cyan: #3ef0ff;
  --r-green: #39ff88;
  --r-red: #ff4757;
  --r-f-px: 'Press Start 2P', 'VT323', monospace;
  --r-f-term: 'VT323', 'Space Mono', monospace;
  --r-f-mono: 'Space Mono', ui-monospace, Consolas, monospace;
  --r-bevel: inset -2px -2px 0 var(--r-win-dk), inset 2px 2px 0 var(--r-win-hi), inset -4px -4px 0 var(--r-win-lo), inset 4px 4px 0 var(--r-win-mid);
  --r-bevel-in: inset 2px 2px 0 var(--r-win-dk), inset -2px -2px 0 var(--r-win-hi), inset 4px 4px 0 var(--r-win-lo), inset -4px -4px 0 var(--r-win-mid);
  --r-drop: 8px 8px 0 rgba(0, 0, 0, .55);
  --r-title: linear-gradient(90deg, var(--r-title-a), var(--r-title-b));
  --r-rainbow: linear-gradient(90deg, var(--r-pink) 0 25%, var(--r-yellow) 25% 50%, var(--r-green) 50% 75%, var(--r-cyan) 75% 100%);
  /* the three "_ □ ×" window buttons, drawn with gradients (no extra markup) */
  --r-winbtns:
    linear-gradient(#000, #000) 4px 9px / 7px 2px no-repeat,
    linear-gradient(#000, #000) 23px 3px / 9px 2px no-repeat,
    linear-gradient(#000, #000) 23px 3px / 1px 8px no-repeat,
    linear-gradient(#000, #000) 31px 3px / 1px 8px no-repeat,
    linear-gradient(#000, #000) 23px 10px / 9px 1px no-repeat,
    linear-gradient(45deg, transparent 43%, #000 43% 60%, transparent 60%) 43px 2px / 9px 9px no-repeat,
    linear-gradient(-45deg, transparent 43%, #000 43% 60%, transparent 60%) 43px 2px / 9px 9px no-repeat,
    linear-gradient(var(--r-win), var(--r-win)) 1px 1px / 13px 11px no-repeat,
    linear-gradient(var(--r-win-hi), var(--r-win-hi)) 0 0 / 14px 12px no-repeat,
    linear-gradient(#000, #000) 0 0 / 15px 13px no-repeat,
    linear-gradient(var(--r-win), var(--r-win)) 20px 1px / 13px 11px no-repeat,
    linear-gradient(var(--r-win-hi), var(--r-win-hi)) 19px 0 / 14px 12px no-repeat,
    linear-gradient(#000, #000) 19px 0 / 15px 13px no-repeat,
    linear-gradient(var(--r-win), var(--r-win)) 40px 1px / 13px 11px no-repeat,
    linear-gradient(var(--r-win-hi), var(--r-win-hi)) 39px 0 / 14px 12px no-repeat,
    linear-gradient(#000, #000) 39px 0 / 15px 13px no-repeat;
}

/* ---------------------------------------------------------------- base */
html { scroll-behavior: smooth; }

html body {
  color: var(--r-text);
  font-family: var(--r-f-mono);
  font-size: 13px;
  background-color: var(--r-night);
  background-image:
    radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.6px),
    radial-gradient(ellipse 110% 55% at 50% 115%, rgba(255, 79, 216, .22), transparent 60%),
    radial-gradient(ellipse 70% 40% at 10% 0%, rgba(62, 240, 255, .10), transparent 60%),
    linear-gradient(180deg, #0e0b24 0%, #140f36 55%, #1f103f 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
}

html body ::selection { background: var(--r-pink); color: #000; }

html body a:focus-visible,
html body button:focus-visible,
html body [tabindex]:focus-visible {
  outline: 3px dashed var(--r-yellow);
  outline-offset: 3px;
}

/* CRT: scanlines + vignette, and a slow refresh bar */
html body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  background:
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at center, transparent 62%, rgba(0, 0, 0, .42) 100%);
}

html body::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  height: 140px;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(62, 240, 255, .05) 50%, transparent);
  transform: translateY(-160px);
}

/* Win95 scrollbars */
html::-webkit-scrollbar,
html body ::-webkit-scrollbar { width: 16px; height: 16px; }
html::-webkit-scrollbar-track,
html body ::-webkit-scrollbar-track { background: repeating-conic-gradient(#c6c6c6 0 25%, #f1f1f1 0 50%) 0 0 / 2px 2px; }
html::-webkit-scrollbar-thumb,
html body ::-webkit-scrollbar-thumb { background: var(--r-win); box-shadow: var(--r-bevel); border-radius: 0; }

/* ---------------------------------------------------------------- top bar = taskbar */
html body .topbar-container {
  position: relative;
  z-index: 30;
  padding: 6px 0;
  background: var(--r-win);
  box-shadow: inset 0 2px 0 var(--r-win-hi), inset 0 -2px 0 var(--r-win-lo), 0 2px 0 var(--r-win-dk);
}

html body .topbar-left-section .topbar-item {
  color: #000;
  font-family: var(--r-f-term);
  font-size: 18px;
}

html body .topbar-left-section .topbar-item + .topbar-item {
  margin-left: 6px;
  padding-left: 0;
  border-left: 0;
}

html body .topbar-left-section .topbar-item a,
html body .topbar-left-section .topbar-item a.telegram-btn,
html body .topbar-left-section .topbar-item a.download-apk-btn,
html body .topbar-left-section .topbar-item .live-chat,
html body .topbar-left-section .language-selector-trigger {
  min-height: 30px;
  padding: 4px 10px;
  border-radius: 0;
  color: #000;
  background: var(--r-win);
  background-image: none;
  box-shadow: var(--r-bevel);
}

html body .topbar-left-section .topbar-item a:hover,
html body .topbar-left-section .topbar-item a.telegram-btn:hover,
html body .topbar-left-section .topbar-item a.download-apk-btn:hover,
html body .topbar-left-section .topbar-item .live-chat:hover,
html body .topbar-left-section .language-selector-trigger:hover {
  color: var(--r-title-a);
  background: #d6d6d6;
  background-image: none;
}

html body .topbar-left-section .topbar-item a:active,
html body .topbar-left-section .topbar-item .live-chat:active {
  box-shadow: var(--r-bevel-in);
  transform: translate(1px, 1px);
}

html body .topbar-left-section [data-icon] { filter: invert(1); }
html body .topbar-left-section .language-selector-trigger:after { border-top-color: #000; }
html body .topbar-left-section .language-selector-trigger[data-active='true']:after { border-bottom-color: #000; }

html body .topbar-left-section .language-selector {
  border-radius: 0;
  background: var(--r-win);
  box-shadow: var(--r-bevel), var(--r-drop);
}

html body .topbar-left-section .language-selector li { color: #000; border-bottom: 1px solid var(--r-win-lo); }
html body .topbar-left-section .language-selector li:hover { color: #fff; background: var(--r-title-a); }

/* Masuk / Daftar */
html body .login-panel .login-button,
html body .login-panel .register-button {
  position: relative;
  width: auto;
  min-width: 112px;
  padding: 10px 14px 9px;
  border-radius: 0;
  font-family: var(--r-f-px);
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 1px;
  transition: transform .1s steps(2), box-shadow .1s steps(2);
}

html body .login-panel .login-button,
html body .login-panel .login-button:hover {
  color: #000;
  background: var(--r-win);
  box-shadow: var(--r-bevel);
}

html body .login-panel .login-button:hover { color: var(--r-title-a); }

html body .login-panel .register-button,
html body .login-panel .register-button:hover {
  color: #1d0d00;
  background: var(--r-yellow);
  box-shadow: inset -3px -3px 0 #b88a00, inset 3px 3px 0 #fff3b0, 0 0 0 2px #000, 4px 4px 0 2px #000;
}

html body .login-panel .register-button:hover { background: #ffe066; }
html body .login-panel .register-button::before { content: "\25B6"; margin-right: 6px; font-size: 8px; vertical-align: 1px; }

html body .login-panel .login-button:active,
html body .login-panel .register-button:active {
  transform: translate(3px, 3px);
  box-shadow: var(--r-bevel-in);
}

/* ---------------------------------------------------------------- site header */
html body .site-header {
  position: relative;
  z-index: 20;
  border-bottom: 0;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 4px),
    linear-gradient(180deg, #16103d 0%, #0b0822 100%);
}

html body .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 6px;
  background: var(--r-rainbow);
  background-size: 50% 100%;
}

html body .site-header .logo > img,
html body .site-header .logo > picture { filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .6)); }

html body .site-header .logo:hover > img {
  filter: drop-shadow(3px 0 0 rgba(255, 79, 216, .85)) drop-shadow(-3px 0 0 rgba(62, 240, 255, .85));
}

html body .menu-slide > i { color: var(--r-yellow); font-size: 16px; }

html body .top-menu > li > a {
  padding: 16px 2px 14px;
  color: var(--r-muted);
  font-family: var(--r-f-term);
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
}

html body .top-menu > li:hover,
html body .top-menu > li[data-active="true"] { background: none; }

html body .top-menu > li > a:hover,
html body .top-menu > li:hover > a,
html body .top-menu > li[data-active="true"] > a {
  color: var(--r-yellow);
  text-shadow: 2px 2px 0 #000;
}

html body .top-menu > li > a::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: 4px;
  height: 4px;
  background: var(--r-yellow);
  box-shadow: 2px 2px 0 #000;
  transform: scaleX(0);
  transition: transform .2s steps(4);
}

html body .top-menu > li:hover > a::after { transform: scaleX(1); }

html body .top-menu > li > a > img { filter: drop-shadow(2px 2px 0 #000); }

/* dropdown game list = little window */
html body .top-menu .game-list {
  border: 0;
  border-radius: 0;
  padding: 0 4px 16px;
  background: rgba(14, 11, 36, .97);
  box-shadow: inset 0 0 0 4px var(--r-win), inset 0 0 0 6px #000, 10px 10px 0 rgba(0, 0, 0, .5);
}

html body .top-menu .game-list::before {
  content: "";
  flex: 0 0 calc(100% - 12px);
  height: 24px;
  margin: 6px 6px 14px;
  background: var(--r-title);
}

html body .top-menu .game-list::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 14px;
  width: 54px;
  height: 13px;
  background: var(--r-winbtns);
}

html body .top-menu .game-list > li > a .background {
  border: 2px solid var(--r-pink);
  border-radius: 0;
  background: linear-gradient(90deg, rgba(255, 79, 216, 0) 0%, rgba(255, 79, 216, .35) 100%);
  box-shadow: 4px 4px 0 #000;
}

html body .top-menu .game-list > li > a .foreground { border-radius: 0; }
html body .top-menu .game-list > li:hover > a { transform: translate(-2px, -2px); transition: transform .15s steps(3); }

/* ---------------------------------------------------------------- banner = CRT screen */
html body .banner {
  position: relative;
  overflow: hidden;
  background: #000;
  border-top: 6px solid transparent;
}

html body .banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .25) 0 2px, transparent 2px 4px);
  box-shadow: inset 0 0 120px rgba(0, 0, 0, .7), inset 0 -40px 60px -20px var(--r-night);
}

/* ---------------------------------------------------------------- announcements */
html body .home-info-container {
  background: transparent;
  border-bottom: 0;
}

html body .announcement-container {
  align-items: stretch;
  gap: 4px;
  margin: 24px 0 20px;
  padding: 5px;
  border-radius: 0;
  color: #000;
  background: var(--r-win);
  box-shadow: var(--r-bevel), var(--r-drop);
}

html body .announcement-container > [data-section="title"] {
  gap: 10px;
  padding: 0 16px;
  white-space: nowrap;
  color: #fff;
  font-family: var(--r-f-px);
  font-size: 10px;
  background: var(--r-title);
}

html body .announcement-container [data-icon="announcement"] {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 22px;
  margin: 0;
  color: #000;
  font: 10px/1 var(--r-f-px);
  background: var(--r-yellow);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

html body .announcement-container [data-icon="announcement"]::after { content: "!"; padding-top: 8px; }

html body .announcement-container > [data-section="announcements"] {
  position: relative;
  flex: 1;
  width: auto;
  padding: 8px 0;
  overflow: hidden;
  background: #000;
  box-shadow: var(--r-bevel-in);
}

html body .announcement-container .announcement-list li {
  padding: 2px 14px;
  color: var(--r-green);
  font-family: var(--r-f-term);
  font-size: 21px;
  line-height: 1.2;
  text-shadow: 0 0 6px rgba(57, 255, 136, .55);
}

html body .announcement-container .announcement-list li::before { content: "> "; color: var(--r-yellow); }

html body .announcement-container > [data-section="date"] {
  padding: 0 14px;
  white-space: nowrap;
  color: var(--r-yellow);
  font-family: var(--r-f-term);
  font-size: 20px;
  background: #000;
  box-shadow: var(--r-bevel-in);
  text-shadow: 0 0 6px rgba(255, 210, 63, .6);
}

/* ---------------------------------------------------------------- jackpot = arcade marquee */
html body .home-inner-container { margin: 30px 10px 46px; }

html body .home-progressive-jackpot {
  position: relative;
  padding: 6px;
  border-radius: 0;
  background: #000;
  box-shadow: 0 0 0 4px var(--r-win), 0 0 0 7px #000, 14px 14px 0 rgba(0, 0, 0, .5);
}

html body .home-progressive-jackpot::before {
  content: "";
  position: absolute;
  inset: -16px;
  pointer-events: none;
  border: 5px dotted var(--r-yellow);
}

html body .home-progressive-jackpot .outer-container {
  border-radius: 0;
  background: repeating-linear-gradient(45deg, #1d1648 0 8px, #120d33 8px 16px);
}

html body .home-progressive-jackpot .inner-container { border-radius: 0; background: transparent; }

html body .home-progressive-jackpot .border-container {
  border: 3px solid #000;
  border-radius: 0;
  background: rgba(0, 0, 0, .55);
  box-shadow: inset 0 0 0 3px var(--r-pink);
}

html body .home-progressive-jackpot .jackpot-container {
  border-radius: 0;
  color: var(--r-yellow);
  font-family: var(--r-f-term);
  font-size: 58px;
  background: #000;
  box-shadow: var(--r-bevel-in);
  text-shadow: 0 0 10px rgba(255, 210, 63, .7);
}

html body .home-progressive-jackpot .jackpot-inner-container { border-radius: 0; background: #050505; }
html body .home-progressive-jackpot .jackpot-border-container { border: 3px dotted rgba(255, 210, 63, .5); border-radius: 0; }
html body .home-progressive-jackpot .jackpot-currency { color: var(--r-red); text-shadow: 0 0 10px var(--r-red); }
html body #progressive_jackpot::after { content: "\2588"; margin-left: 6px; color: var(--r-yellow); }

html body .home-progressive-jackpot .jackpot-play-section .jackpot-play-text {
  color: var(--r-cyan);
  font-family: var(--r-f-px);
  font-size: 22px;
  line-height: 1.3;
  text-shadow: 3px 3px 0 var(--r-pink);
}

html body .home-progressive-jackpot .jackpot-play-section .jackpot-play-text label { color: var(--r-yellow); }

/* ---------------------------------------------------------------- shared window look */
html body .popular-game-title-container,
html body .popular-games [data-section="left"],
html body .popular-games [data-section="right"] {
  padding: 5px;
  background: var(--r-win);
  box-shadow: var(--r-bevel), var(--r-drop);
}

html body .popular-game-title-container .container-title,
html body .popular-games [data-section="left"] .section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: auto;
  padding: 7px 8px 7px 12px;
  color: #fff;
  font-family: var(--r-f-px);
  font-size: 11px;
  letter-spacing: 1px;
  background: var(--r-title);
}

html body .popular-game-title-container .container-title::after,
html body .popular-games [data-section="left"] .section-title::after {
  content: "";
  flex: none;
  width: 54px;
  height: 13px;
  margin-left: 12px;
  background: var(--r-winbtns);
}

html body .popular-game-title-container .container-title span {
  padding: 0;
  color: #fff;
  background: none;
}

html body .popular-game-title-container .container-title span::after {
  content: "_";
  position: static;
  width: auto;
  height: auto;
  margin-left: 4px;
  background: none;
  transform: none;
}

/* ---------------------------------------------------------------- "Game Populer" strip */
html body .popular-game-title-container { margin: 0 0 30px; }

html body .popular-game-title-container .container-content {
  margin-top: 5px;
  padding: 14px 12px 8px;
  border: 0;
  background: #000;
  box-shadow: var(--r-bevel-in);
}

html body .popular-game-title-container .container-content .game-list .games-group { gap: 14px; }

html body .game-list .wrapper-container,
html body .game-list .wrapper-container:hover {
  background: var(--r-win);
  box-shadow: var(--r-bevel);
  transition: transform .15s steps(3), box-shadow .15s steps(3);
}

html body .game-list .game-item:hover .wrapper-container {
  transform: translate(-3px, -3px);
  box-shadow: var(--r-bevel), 5px 5px 0 var(--r-pink);
}

html body .game-list .wrapper-container:hover img { opacity: .3; }

html body .popular-game-title-container .container-content .game-list .game-item .game-name {
  padding: 7px 2px 0;
  color: var(--r-text);
  font-family: var(--r-f-term);
  font-size: 18px;
  line-height: 1.1;
}

html body .game-list .game-item:hover .game-name { color: var(--r-yellow); }

/* play / try buttons on hover */
html body .game-list .link-container a,
html body .popular-games .popular-game-list .link-container a,
html body .popular-game-title-container .container-content .game-list .game-item .link-container a {
  padding: 9px 4px 8px;
  border: 0;
  border-radius: 0;
  color: #1d0d00;
  font-family: var(--r-f-px);
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
  background: var(--r-yellow);
  box-shadow: 0 0 0 2px #000, 3px 3px 0 2px #000;
}

html body .game-list .link-container a:hover,
html body .popular-games .popular-game-list .link-container a:hover { color: #000; background: #fff07a; }

html body .game-list .link-container a.free-play,
html body .popular-games .popular-game-list .link-container a.free-play { background: var(--r-cyan); }

html body .game-list .link-container a:active,
html body .popular-games .popular-game-list .link-container a:active { transform: translate(2px, 2px); box-shadow: 0 0 0 2px #000; }

/* ---------------------------------------------------------------- slots popular + providers */
html body .popular-games {
  gap: 18px;
  margin-bottom: 34px;
  background: none;
  background-color: transparent;
}

html body .popular-games [data-section="left"] {
  position: sticky;
  top: 16px;
  align-self: flex-start;
  justify-content: flex-start;
  width: 280px;
  flex: none;
  margin-right: 0;
}

html body .popular-games [data-section="left"] .section-title { font-size: 10px; line-height: 1.5; }

html body .popular-games [data-section="left"] [data-icon="play"] {
  width: 12px;
  height: 14px;
  margin-right: 10px;
  background: var(--r-yellow);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

html body .popular-games [data-section="left"] .section-title > i { order: -1; }

html body .jackpot-winners {
  margin-top: 5px;
  padding: 6px 0 4px;
  background: #000;
  box-shadow: var(--r-bevel-in);
}

html body .jackpot-winners .jackpot-winner-title {
  padding: 8px 10px;
  color: var(--r-yellow);
  font-family: var(--r-f-px);
  font-size: 9px;
  letter-spacing: 1px;
}

html body .jackpot-winners .jackpot-winner-title [data-icon="trophy"] {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background: var(--r-yellow);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

html body .popular-games .jackpot-winners .winners-ticker-container,
html body .jackpot-winners .winners-ticker-container {
  height: 210px;
  margin: 0 6px;
  background: #000;
}

html body .jackpot-winners .winners-ticker-container ul li,
html body .winners-ticker ul li {
  padding: 8px 4px;
  background: transparent;
  border-bottom: 1px dashed #1f4d2e;
}

html body .winners-ticker ul li img { width: 46px; height: 46px; box-shadow: 0 0 0 2px var(--r-win); image-rendering: auto; }

html body .winners-ticker ul li .winner-info {
  color: var(--r-text);
  font-family: var(--r-f-term);
  font-size: 17px;
  line-height: 1.1;
}

html body .winners-ticker ul li .winner-amount { color: var(--r-green); text-shadow: 0 0 6px rgba(57, 255, 136, .6); }

html body .popular-games [data-section="left"] > a { display: block; margin-top: 5px; box-shadow: var(--r-bevel-in); padding: 4px; background: #000; }
html body .popular-games [data-section="left"] > a img { display: block; width: 100%; height: auto; }

html body .popular-games [data-section="right"] {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  width: auto;
  min-width: 0;
}

html body .popular-games [data-section="right"]::before {
  content: "";
  order: -2;
  height: 26px;
  margin-bottom: 5px;
  background: var(--r-title);
}

html body .popular-games [data-section="right"]::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 13px;
  width: 54px;
  height: 13px;
  background: var(--r-winbtns);
}

html body .popular-games .nav-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  margin: 0;
  background: #000;
  box-shadow: var(--r-bevel-in);
}

html body .popular-games .nav-tabs::before,
html body .popular-games .nav-tabs::after { content: none; }
html body .popular-games .nav-tabs > li { float: none; margin: 0; }

html body .popular-games .nav-tabs > li > a,
html body .popular-games .nav-tabs > li > a:hover,
html body .popular-games .nav-tabs > li > a:focus {
  display: block;
  margin: 0;
  padding: 4px 8px;
  border: 0;
  border-radius: 0;
  background-color: var(--r-night-2);
  box-shadow: inset 0 0 0 2px var(--r-line), 3px 3px 0 #000;
  transition: transform .12s steps(3), box-shadow .12s steps(3);
}

html body .popular-games .nav-tabs > li > a:hover {
  transform: translate(-2px, -2px);
  background-color: var(--r-night-3);
  box-shadow: inset 0 0 0 2px var(--r-yellow), 5px 5px 0 #000;
}

html body .popular-games .nav-tabs > li > a img { display: block; max-height: 40px; width: auto; }

/* provider tabs work without JS: the clicked provider (#tab-X) is shown, the first one by default */
html body .popular-games .tab-content {
  position: relative;
  order: -1;
  min-height: 260px;
  margin: 0 0 6px;
  border: 0;
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 3px),
    radial-gradient(ellipse at 80% 20%, rgba(255, 79, 216, .18), transparent 60%),
    #07051a;
  box-shadow: var(--r-bevel-in);
}

html body .popular-games .tab-content > .tab-pane {
  position: relative;
  padding: 16px 0 10px;
  background: transparent;
  scroll-margin-top: 140px;
}

html body .popular-games .tab-content > .tab-pane:target,
html body .popular-games .tab-content:not(:has(> .tab-pane:target)) > .tab-pane:first-child { display: block; }

html body .popular-games .animated-image { opacity: .55; filter: drop-shadow(6px 6px 0 rgba(0, 0, 0, .6)); }

html body .popular-games .popular-game-list { width: 72%; padding: 0 12px; }
html body .popular-games .popular-game-list .game-item { padding: 7px; }

html body .popular-games .popular-game-list .game-wrapper {
  background: var(--r-win);
  box-shadow: var(--r-bevel);
  transition: transform .15s steps(3), box-shadow .15s steps(3);
}

html body .popular-games .popular-game-list img { top: 5px; left: 5px; width: calc(100% - 10px); height: calc(100% - 10px); }

html body .popular-games .popular-game-list .game-item:hover .game-wrapper {
  transform: translate(-3px, -3px);
  box-shadow: var(--r-bevel), 5px 5px 0 var(--r-cyan);
}

html body .popular-games .popular-game-list .game-item:hover .link-container {
  gap: 8px;
  background: rgba(7, 5, 26, .72);
  background-image: repeating-linear-gradient(180deg, rgba(0, 0, 0, .35) 0 1px, transparent 1px 3px);
}

/* ---------------------------------------------------------------- download APK */
html body .download-apk-container {
  position: relative;
  padding: 34px 0;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
  background:
    repeating-linear-gradient(90deg, rgba(62, 240, 255, .07) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(180deg, rgba(62, 240, 255, .07) 0 2px, transparent 2px 46px),
    linear-gradient(180deg, #1b1247 0%, #0b0822 100%);
}

html body .download-apk { color: var(--r-text); font-family: var(--r-f-mono); }
html body .download-apk > div { opacity: 1; transform: none; }
html body .download-apk > div:first-child img { filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, .55)); }

html body .download-apk .h2 {
  color: var(--r-text);
  font-family: var(--r-f-px);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
}

html body .download-apk .h2 > strong {
  margin-top: 6px;
  color: var(--r-yellow);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.35;
  text-align: left;
  text-shadow: 4px 4px 0 var(--r-pink), 8px 8px 0 #000;
}

html body .download-apk .h3,
html body .download-apk h3 {
  margin: 14px 0 6px;
  color: var(--r-cyan);
  font-family: var(--r-f-term);
  font-size: 26px;
  font-weight: 400;
}

html body .download-apk-info .download-apk-section {
  display: grid;
  flex-basis: 85%;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px 22px;
  font-family: var(--r-f-term);
  font-size: 20px;
  font-weight: 400;
  text-align: left;
}

html body .download-apk-section > * { margin: 0; }
html body .download-apk-section > span { grid-column: 1 / -1; color: var(--r-muted); }
html body .download-apk-section > span i { display: inline; }
html body .download-apk-detail { gap: 10px; align-items: flex-start; font-size: 22px; text-align: left; }
html body .download-apk-section i { color: var(--r-green); }
html body .download-apk-qr-code img { padding: 6px; background: #fff; box-shadow: 0 0 0 3px #000, 6px 6px 0 #000; }

html body .download-apk .btn,
html body .download-apk .btn:hover {
  padding: 9px 6px 8px;
  border-radius: 0;
  color: #000;
  font-family: var(--r-f-px);
  font-size: 9px;
  font-weight: 400;
  background: var(--r-green);
  box-shadow: 0 0 0 2px #000, 4px 4px 0 2px #000;
}

html body .download-apk .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 2px #000; }

/* ---------------------------------------------------------------- telegram banner */
html body .telegram-banner-container { padding: 30px 0; background: transparent; }
html body .telegram-banner-container > .container { font-size: 0; }

html body .telegram-banner-container a {
  position: relative;
  display: block;
  overflow: hidden;
  box-shadow: 0 0 0 4px #000, 0 0 0 8px var(--r-win), 0 0 0 10px #000, 14px 14px 0 10px rgba(0, 0, 0, .45);
  transition: transform .15s steps(3);
}

html body .telegram-banner-container a::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-110%);
}

html body .telegram-banner-container a:hover { transform: translate(-3px, -3px); }
html body .telegram-banner-container img { display: block; }

/* ---------------------------------------------------------------- footer */
html body .site-footer {
  position: relative;
  padding-top: 34px;
  border-top: 0;
  background: #07051a;
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px);
}

html body .site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--r-rainbow);
  background-size: 50% 100%;
}

html body .footer-links > li > a {
  color: var(--r-muted);
  font-family: var(--r-f-term);
  font-size: 20px;
}

html body .footer-links > li > a:hover { color: var(--r-yellow); }
html body .footer-links > li > a::before { content: "> "; color: var(--r-pink); }
html body .footer-links > li + li > a { border-left: 2px solid var(--r-line); }

html body .copyright { color: var(--r-muted); font-family: var(--r-f-term); font-size: 18px; }
html body .footer-separator { border-top: 2px dashed var(--r-line); }

/* SEO text block -> Notepad window */
html body .cyber-wrapper {
  max-width: 1000px;
  margin: 40px auto;
  padding: 5px;
  border: 0;
  border-radius: 0;
  font-family: var(--r-f-mono);
  background: var(--r-win);
  box-shadow: var(--r-bevel), 12px 12px 0 rgba(0, 0, 0, .55);
}

html body .cyber-wrapper::before {
  content: "README.TXT - Notepad";
  position: relative;
  inset: auto;
  z-index: 1;
  display: block;
  padding: 8px 10px;
  color: #fff;
  font: 10px/1.4 var(--r-f-px);
  letter-spacing: 1px;
  background: var(--r-title);
  background-size: auto;
}

html body .cyber-wrapper::after {
  content: "";
  position: absolute;
  top: 11px;
  right: 11px;
  z-index: 2;
  width: 54px;
  height: 13px;
  background: var(--r-winbtns);
}

html body .cyber-wrapper .corner-accent { display: none; }

/* the <hr> at the bottom of the window becomes its status bar */
html body .cyber-wrapper .footer-separator {
  height: 20px;
  margin: 5px 0 0;
  padding: 0;
  border: 0;
  background: var(--r-win);
  box-shadow: var(--r-bevel-in);
}

html body .cyber-header {
  display: block;
  margin-top: 5px;
  padding: 26px 30px 24px;
  border: 0;
  border-radius: 0;
  background: #fffef6;
  background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(16, 132, 208, .12) 27px 28px);
  box-shadow: var(--r-bevel-in);
}

html body .cyber-header-left {
  margin-bottom: 18px;
  padding: 0 0 16px;
  border-left: 0;
  border-bottom: 3px dashed #c9c4ea;
}

html body .cyber-header h1 {
  color: var(--r-title-a);
  font-family: var(--r-f-px);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: 0;
  text-shadow: 3px 3px 0 rgba(255, 79, 216, .25);
}

html body .cyber-header h1::after { content: "\2588"; margin-left: 6px; color: var(--r-pink); }

html body .cyber-content { padding: 0; }

html body .cyber-content p {
  color: #24203f;
  font-family: var(--r-f-mono);
  font-size: 14px;
  line-height: 1.85;
}

html body .cyber-content strong { color: #000; font-weight: 700; }

html body .cyber-content h2 {
  margin: 30px 0 10px;
  color: var(--r-title-a);
  font: 13px/1.7 var(--r-f-px);
  text-transform: none;
}

html body .cyber-content h2::before { content: "\25B6"; margin-right: 10px; color: var(--r-pink); font-size: 10px; }

html body .cyber-content ol,
html body .cyber-content ul {
  margin: 0 0 16px;
  padding-left: 28px;
  color: #24203f;
  font: 14px/1.85 var(--r-f-mono);
}

html body .cyber-content ol { list-style: decimal; }
html body .cyber-content ul { list-style: square; }
html body .cyber-content li { margin-bottom: 6px; }
html body .cyber-content li::marker { color: #b8004f; font-weight: 700; }

html body .cyber-content a,
html body .cyber-content a:hover {
  color: var(--r-title-a);
  border-bottom: 2px solid var(--r-pink);
}

html body .cyber-content a:hover { background: var(--r-yellow); }

/* info columns */
html body .site-info .site-info-title { border-bottom: 2px dashed var(--r-line); }

html body .site-info .site-info-title h3 {
  color: var(--r-yellow);
  font-family: var(--r-f-px);
  font-size: 13px;
  line-height: 1.5;
  text-shadow: 3px 3px 0 #000;
}

html body .site-info .site-info-title p,
html body .site-info-container .site-info .site-info-title p {
  margin-top: 6px;
  color: var(--r-muted);
  font-family: var(--r-f-term);
  font-size: 19px;
}

html body .site-info [data-icon] {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 42px;
  height: 42px;
  color: #000;
  font: 16px/1 var(--r-f-px);
  background: var(--r-cyan);
  box-shadow: 0 0 0 3px #000, 5px 5px 0 3px var(--r-pink);
}

html body .site-info [data-icon="service"]::after { content: "$"; }
html body .site-info [data-icon="product"]::after { content: ">"; }
html body .site-info [data-icon="help-and-service"]::after { content: "?"; }

html body .site-info .site-info-description h4 {
  margin-bottom: 8px;
  color: var(--r-cyan);
  font-family: var(--r-f-px);
  font-size: 11px;
  line-height: 1.6;
}

html body .site-info .site-info-description p,
html body .site-info-container .site-info .site-info-description p {
  color: #bab4e8;
  font-family: var(--r-f-mono);
  font-size: 12px;
  line-height: 1.8;
}

html body .site-info .site-info-description.with-seperator + .with-seperator { border-top: 2px dashed var(--r-line); }
html body .site-info-container:not(:last-child):after { width: 2px; background: var(--r-line); }

html body .contact-list > li a {
  border-radius: 0;
  color: var(--r-text);
  font-family: var(--r-f-term);
  font-size: 20px;
  background: var(--r-night-2);
  box-shadow: inset 0 0 0 2px var(--r-line), 4px 4px 0 #000;
  transition: transform .12s steps(3);
}

html body .contact-list > li a:hover { color: var(--r-yellow); transform: translate(-2px, -2px); }
html body .contact-list > li a i { border-radius: 0; background: var(--r-pink); box-shadow: 0 0 0 2px #000; }

html body .footer-section-title {
  color: var(--r-cyan);
  font-family: var(--r-f-px);
  font-size: 10px;
  letter-spacing: 1px;
}

html body .provider-container {
  margin: 26px 12px 0 0;
  border: 2px dashed var(--r-line);
  border-radius: 0;
}

html body .provider-container > h5 {
  top: -12px;
  padding: 4px 10px;
  color: #000;
  font-family: var(--r-f-px);
  font-size: 9px;
  background: var(--r-yellow);
  box-shadow: 3px 3px 0 #000;
}

/* ---------------------------------------------------------------- motion */
@keyframes r-scanbar { to { transform: translateY(110vh); } }
@keyframes r-flicker { 0%, 100% { opacity: 1; } 48% { opacity: .92; } 50% { opacity: .8; } 52% { opacity: .95; } }
@keyframes r-boot { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes r-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: none; } }
@keyframes r-crt-on {
  0% { opacity: 0; transform: scale(1, .006); filter: brightness(5); }
  45% { opacity: 1; transform: scale(1, .006); filter: brightness(5); }
  70% { transform: scale(1, 1.02); filter: brightness(1.6); }
  100% { transform: none; filter: none; }
}
@keyframes r-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes r-blink { 50% { opacity: 0; } }
@keyframes r-marquee { to { transform: translateX(-100%); } }
@keyframes r-ticker { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 210px)); } }
@keyframes r-rainbow { to { background-position: 100% 0; } }
@keyframes r-bulbs { 50% { border-color: var(--r-pink); } }
@keyframes r-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes r-glitch {
  0%, 100% { transform: translate(-50%, 0); }
  20% { transform: translate(calc(-50% - 3px), 1px); }
  40% { transform: translate(calc(-50% + 3px), -1px); }
  60% { transform: translate(calc(-50% - 2px), 0); }
  80% { transform: translate(calc(-50% + 2px), 1px); }
}
@keyframes r-sweep { 0%, 55% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@keyframes r-pulse { 50% { box-shadow: inset -3px -3px 0 #b88a00, inset 3px 3px 0 #fff3b0, 0 0 0 2px #000, 4px 4px 0 2px #000, 0 0 18px 4px rgba(255, 210, 63, .55); } }
@keyframes r-slide-l { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes r-slide-r { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  html body::before { animation: r-flicker 6s steps(1) infinite; }
  html body::after { animation: r-scanbar 8s linear infinite; }

  html body .topbar-container { animation: r-drop .5s steps(5) both; }
  html body .site-header { animation: r-drop .5s steps(5) .1s both; }
  html body .site-header::after,
  html body .site-footer::before { animation: r-rainbow 3s linear infinite; }
  html body .site-header .logo { animation: r-float 3s ease-in-out infinite; }
  html body .site-header .logo:hover > img { animation: r-glitch .3s steps(2) infinite; }
  html body .top-menu > li:hover > a > img { animation: r-hop .45s steps(3); }

  html body .banner .banner-carousel { animation: r-crt-on 1.1s ease-out .2s both; }

  html body .announcement-container { animation: r-boot .5s steps(5) .5s both; }
  html body .home-inner-container { animation: r-boot .5s steps(5) .65s both; }
  html body .popular-game-title-container { animation: r-boot .5s steps(5) .8s both; }
  html body .popular-games { animation: r-boot .5s steps(5) .95s both; }

  /* announcements become a marquee; hover pauses it */
  html body .announcement-container .announcement-list {
    display: inline-flex;
    flex-wrap: nowrap;
    padding-left: 100%;
    white-space: nowrap;
    animation: r-marquee 95s linear infinite;
  }

  html body .announcement-container .announcement-list li { padding-right: 70px; white-space: nowrap; }
  html body .announcement-container > [data-section="announcements"]:hover .announcement-list { animation-play-state: paused; }
  html body .announcement-container [data-icon="announcement"] { animation: r-blink 1.2s steps(1) infinite; }

  html body .home-progressive-jackpot::before { animation: r-bulbs .7s steps(1) infinite; }
  html body #progressive_jackpot::after { animation: r-blink 1s steps(1) infinite; }

  html body .popular-game-title-container .container-title span::after,
  html body .cyber-header h1::after { animation: r-blink 1s steps(1) infinite; }

  html body .winners-ticker ul { animation: r-ticker 18s ease-in-out infinite alternate; }
  html body .winners-ticker-container:hover ul { animation-play-state: paused; }

  html body .login-panel .register-button { animation: r-pulse 1.6s steps(2) infinite; }
  html body .login-panel .register-button::before { animation: r-blink 1s steps(1) infinite; display: inline-block; }

  html body .download-apk > div:nth-child(1) { animation: r-slide-l .7s steps(7) both; }
  html body .download-apk > div:nth-child(2) { animation: r-slide-r .7s steps(7) .15s both; }

  html body .telegram-banner-container a::after { animation: r-sweep 4.5s ease-in-out 1.5s infinite; }

  html body .popular-games .tab-content > .tab-pane:target { animation: r-boot .35s steps(4) both; }
}