* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  position: relative;
  background: #000000;
  background-image: radial-gradient(#4a4a48 5%, transparent 50%);
  background-size: 5px 5px;
  background-attachment: fixed;
}

.container {
  max-width: 400px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 10px 15px 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

/* =============================================
   LOGO — float + glow pulse
============================================= */
.logo-wrap {
  text-align: center;
  margin-bottom: 8px;
}

.logo-wrap a {
  display: inline-block;
  animation: logoFloat 3s ease-in-out infinite;
}

.logo-wrap img {
  display: block;
  width: 200px;
  height: auto;
  animation: logoPulse 3s ease-in-out infinite;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-5px); }
}

@keyframes logoPulse {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(44,211,29,0.5))
            drop-shadow(0 0 12px rgba(44,211,29,0.25));
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(44,211,29,0.9))
            drop-shadow(0 0 24px rgba(44,211,29,0.5))
            drop-shadow(0 0 40px rgba(44,211,29,0.2));
  }
}

/* =============================================
   TYPEWRITER TAGLINE — JS driven
============================================= */
.welcome {
  max-width: 350px;
  margin: 0 auto 6px;
  height: 20px;
  overflow: hidden;
}

#taglineEl {
  font-size: 12px;
  color: #fff;
  letter-spacing: 0.09em;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  border-right: 0.15em solid #f8fba0;
  animation: blink-caret 0.75s step-end infinite;
  vertical-align: bottom;
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50%      { border-color: #f8fba0; }
}

/* =============================================
   SLIDESHOW
============================================= */
.banner-wrap {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin-top: 8px;
}

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}

.slide.active { opacity: 1; }

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 10px;
}

.slide-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #4a4a48;
  border: 1px solid #777;
  cursor: pointer;
  transition: background 0.3s;
}

.dot.active {
  background: rgb(44, 211, 29);
  border-color: rgb(44, 211, 29);
}

/* =============================================
   CSS VARIABLES
============================================= */
:root {
  --w-color: #ffffff;
  --b-color: #000000;
  --t1-color: #d10808;
  --t2-color: #ff0202;
  --t3-color: rgb(44, 211, 29);
  --t4-color: rgb(19, 113, 0);
  --t5-color: rgb(19, 113, 0);
  --t6-color: rgb(0, 41, 9);
  --yuji-color: rgb(255, 2, 2);
  --o-color: transparent;
  --o2-color: rgb(44, 211, 29);
  --o3-color: rgb(19, 113, 0);
}

/* =============================================
   BUTTONS
============================================= */
.btn-menu {
  border: none;
  outline: none;
  color: white;
  background: var(--o-color);
  cursor: pointer;
  position: relative;
  z-index: 5;
  font-weight: bold;
  margin-top: 7px;
  padding: 6px 15px;
  border-radius: 5px;
  letter-spacing: 2px;
  text-decoration: none;
  text-align: center;
  display: block;
  overflow: hidden;
}

.btn-menu::before {
  content: '';
  background: linear-gradient(
    45deg,
    var(--o-color), var(--t1-color), var(--t2-color),
    var(--o-color), var(--t2-color), var(--o-color), var(--t1-color)
  );
  position: absolute;
  top: -2px;
  left: -2px;
  background-size: 300%;
  z-index: -1;
  filter: blur(4px);
  width: calc(100% + 4px);
  height: calc(100% + 4px);
  animation: glowing 20s linear infinite;
  opacity: 0.65;
  border-radius: 10px;
  transition: opacity 0.3s, filter 0.3s;
}

.btn-menu::after {
  z-index: -1;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  left: 0;
  top: 0;
  border-radius: 10px;
}

.btn-menu:hover::before {
  opacity: 0.9;
  filter: blur(6px);
}

.btn-menu:hover { color: #fff; }

@keyframes glowing {
  0%   { background-position: 0 0; }
  50%  { background-position: 300% 0; }
  100% { background-position: 0 0; }
}

/* per-button brand glow colors — balanced saturation */
#btnContainer a:nth-child(1) { --t1-color: #00b8cc; --t2-color: #0090a8; } /* Dauntogel   — teal    */
#btnContainer a:nth-child(2) { --t1-color: #2962cc; --t2-color: #0080bb; } /* Gadun Gaming — blue   */
#btnContainer a:nth-child(3) { --t1-color: #cc1a1a; --t2-color: #e03030; } /* Redmitoto   — red     */
#btnContainer a:nth-child(4) { --t1-color: #cc9900; --t2-color: #bb7a00; } /* Admintoto   — gold    */
#btnContainer a:nth-child(5) { --t1-color: #8800cc; --t2-color: #aa00dd; } /* Ortu Gaming — purple  */
#btnContainer a:nth-child(6) { --t1-color: #3355bb; --t2-color: #4466cc; } /* Jasminplay  — indigo  */
#btnContainer a:nth-child(7) { --t1-color: #00aa44; --t2-color: #00882f; } /* Daunpoker   — green   */
#btnContainer a:nth-child(8) { --t1-color: #bb2020; --t2-color: #992020; } /* Doyanpoker  — crimson */

/* =============================================
   BUTTON INNER: static name + rotating label
============================================= */
.btn-site-name {
  font-size: 15px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 3px;
}

.rtext-wrap {
  position: relative;
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rtext-item {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.96);
  filter: blur(6px);
  white-space: nowrap;
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 3px;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  text-transform: uppercase;
}

.rtext-item.state-enter {
  animation: rtEnter 0.4s ease forwards;
}

.rtext-item.state-exit {
  animation: rtExit 0.35s ease forwards;
}

@keyframes rtEnter {
  from { opacity: 0; transform: scale(0.96); filter: blur(6px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0);   }
}

@keyframes rtExit {
  from { opacity: 1; transform: scale(1);    filter: blur(0);   }
  to   { opacity: 0; transform: scale(1.04); filter: blur(8px); }
}

/* =============================================
   WIND / RETRO FOOTER
============================================= */
.gold-wind {
  position: relative;
  height: 100px;
  overflow: hidden;
  margin-top: 5px;
}

.wind-line {
  position: absolute;
  top: 1px;
  left: -200%;
  width: 300%;
  height: 10px;
  background: linear-gradient(90deg, transparent, #d10808, transparent);
  animation: wind-blow 4s linear infinite;
}

.retro-text {
  position: relative;
  text-align: center;
  font-size: 1.09rem;
  color: #ff0000;
  text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
  animation: flicker 1s infinite;
}

.retro-text::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0.2) 0px, rgba(0,0,0,0.2) 2px,
    transparent 2px, transparent 4px
  );
  pointer-events: none;
  animation: scanline 1.5s linear infinite;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 22%, 24%, 55% { opacity: 0.7; }
}

@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes wind-blow {
  0%   { left: -200%; }
  100% { left: 100%; }
}

/* =============================================
   COPYRIGHT
============================================= */
.copyright {
  text-align: center;
  color: #ffffff;
}

.kelapkelip {
  font-family: tahoma, arial, helvetica, sans-serif;
  font-size: 15px;
  color: red;
  animation: kelapkelip 1s ease-out infinite;
}

@keyframes kelapkelip {
  from {
    text-shadow:
      0 0 1px #def, 0 0 2px #def, 0 0 2px #def, 0 0 2px #def,
      0 0 2px #fff, 0 0 12px #fff, 0 0 5px #fff,
      0 0 5px #7b96b8, 0 5px 2px #ffffe8,
      0 5px 25px #ffffe8, 0 5px 50px #e4be0d,
      0 -5px 50px #e4be0d;
    color: #fff;
  }
}