@font-face {
  font-family: 'Dogbangy';
  src: url('assets/Font/Dogbangy.ttf') format('truetype');
}
@font-face {
  font-family: 'Puffy Caps.otf';
  src: url('assets/Font/Puffy Caps.otf') format('truetype');
}
@font-face {
  font-family: 'Pinemon Kingdom.ttf';
  src: url('assets/Font/Pinemon Kingdom.ttf') format('truetype');
}
@font-face {
  font-family: 'Ethnocentric Rg It.otf';
  src: url('assets/Font/Ethnocentric Rg It.otf') format('truetype');
}
.popup-win-text {
  font-family: 'Dogbangy', sans-serif;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 1.5px;
  text-shadow:
    0 0 4px #000,
    1px 1px 2px #000,
    -1px -1px 2px #000,
    0 0 8px gold;
}


:root{--cell:82px;--cols:3;--rows:4}
*{box-sizing:border-box;margin:0;padding:0}

/* -------- BODY & BG ------- */
body {
  background:
    linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
    url('assets/bg/bgestetik23.jpg') center/cover no-repeat;
  font-family: 'Segoe UI', sans-serif;
  color: #ffd700;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 16px;
  overflow-x: hidden;

  min-height: 100vh;  /* ⬅️ ini baris penting biar full tinggi layar */
}


/* -------- TOP BAR RAPI 1 BARIS ------- */
/* === TOP ROW: SALDO === */
.top-row {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 460px;
  padding: 6px 12px;
  box-sizing: border-box;
}

.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 1 0;
  min-width: 0;
  gap: 6px;
}

/* === Ikon Sak Dollar === */
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 6px;
}

/* === Saldo TENGAH === */
#bal {
  
  flex: 1;
  text-align: center;
  font-weight: bold;
  font-size: 1.1rem;
  color: #fff8d6;
  text-shadow: 1px 1px 2px rgba(139, 69, 19, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* === Tombol + / User === */
.btnPlus {
  background: rgba(211, 143, 0, 0.75);
  color: #000;
  border: none;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btnPlus img {
  width: 24px;
  height: 24px;
  filter: drop-shadow(0 0 2px #000);
}

.bottom-row .item {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0;
  margin: 0;
  height: 44px; /* tinggi pas dan sejajar */
}

.btnBet {
  background: linear-gradient(to bottom, #f2c94c, #d38f00);
  border: 1.5px solid #e6b800;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  box-shadow: 0 0 6px rgba(255, 230, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}

.btnBet:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255, 230, 0, 0.9);
}

.btnBet img {
  width: 22px;
  height: 22px;
  filter: drop-shadow(1px 1px 0 #000);
}

#bet {
  color: #fff7c2;
  font-weight: bold;
  font-size: 1.1rem;
  text-shadow: -1px -1px 0 #000,
                1px -1px 0 #000,
               -1px 1px 0 #000,
                1px 1px 0 #000;
  min-width: 120px;
  text-align: center;
}

.glass-bet {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 14px;
  padding: 8px 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255,255,255,0.25);
  font-weight: bold;
  font-size: 1rem;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  position: relative;
  overflow: hidden;
}

/* Efek highlight kilau di atas kaca */
.glass-bet::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.2), transparent 70%);
  opacity: 0.7;
  pointer-events: none;
}


/* -------- TICKER ------- */
.ticker{width:100%;max-width:460px;height:26px;overflow:hidden;
  border-radius:6px;margin-bottom:6px;margin-top:6px}
#tickerText{display:inline-block;white-space:nowrap;line-height:26px;
  animation:tickerMove 18s linear infinite;color:	#adff2f;font-weight:bold}
@keyframes tickerMove{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}

/* -------- BOARD ------- */
#board{display:grid;grid-template-columns:repeat(var(--cols),var(--cell));
  gap:8px;border:4px solid rgba(139, 69, 19, 0.5);background:rgba(0,0,0,.5);
  padding:8px;border-radius:12px;margin-top:4px}
.reel{width:var(--cell);height:calc(var(--cell)*var(--rows));overflow:hidden;position:relative}
.icons{position:absolute;top:0;left:0;width:100%}
.icon{width:100%;height:var(--cell);display:flex;justify-content:center;align-items:center;position:relative}
.icon img{width:85%;height:85%;object-fit:contain}
.icon.win::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12%;
}

@keyframes pulse{from{transform:scale(1)}to{transform:scale(1.08)}}

/* -------- SPIN AREA ------- */
.spin-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 22px;         /* jarak antar elemen horizontal */
  margin: 22px 0 8px;
  flex-wrap: wrap;
  margin-top:8px;/* biar responsif di layar sempit */
}

#freeBox{font-size:1.05rem;font-weight:700}
.spin-frame-container{position:relative;width:110px;height:110px;transition:transform .08s}
.spin-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:1}
#spinBtn {
  font-family: 'Puffy Caps.otf', 'Segoe UI';
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff200;
  font-weight: bold;

  /* Ukuran teks sedikit diperbesar */
  font-size: calc(var(--spinSize) * 1 / 100); /* sebelumnya 0.8, sekarang 1 */

  /* Efek 3D teks menjorok ke depan */
      0 0 4px #000,
    1px 1px 2px #000,
    -1px -1px 2px #000,
    0 0 8px gold;

  transform: perspective(200px) translateZ(30px) scale(1.1);
 /* efek menonjol */
  cursor: pointer;
}

.spin-frame-container:active{transform:scale(.94)}
.spin-frame-container:active .spin-frame{filter:brightness(1.2) drop-shadow(0 0 6px #ffd700)}
.spin-frame-container.pressed{transform:scale(.94)}

.autoplay{display:flex;align-items:center;gap:6px;font-size:.9rem}

/* -------- COIN & EFFECTS ------- */
.coin{position:fixed;width:48px;height:48px;pointer-events:none;z-index:999;will-change:transform,opacity}
@keyframes explode{0%{transform:scale(.6) rotate(0);opacity:0}
50%{transform:scale(1.2) rotate(180deg);opacity:1}
100%{transform:scale(1) rotate(360deg);opacity:0}}
.effect-explode {
  position: absolute;
  width: 100%;
  height: 100%;
  background: url('assets/effects/effects1.gif') center/contain no-repeat;
  border-radius: 0;
  animation: none;
  pointer-events: none;
  z-index: 5;
}


/* -------- WIN POPUP (5 animasi) ------- */
.big-win{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;animation:fade 4s forwards;z-index:50}
@keyframes fade{0%,80%{opacity:1}100%{opacity:0}}
@keyframes pop-win    {0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes pop-big    {0%{transform:scale(.1);opacity:0}50%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes pop-mega   {0%{transform:scale(0);opacity:0}40%{transform:scale(1.5);opacity:1}100%{transform:scale(1);opacity:1}}
@keyframes pop-super  {0%{transform:scale(.4) rotate(0);opacity:0}30%{transform:scale(1.3) rotate(3deg);opacity:1}70%{transform:scale(1) rotate(-2deg)}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes pop-jackpot{0%{transform:scale(.1) rotate(0);opacity:0}40%{transform:scale(1.6) rotate(720deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.popup-win    {animation:pop-win     3s forwards}
.popup-big    {animation:pop-big     3s forwards}
.popup-mega   {animation:pop-mega    3s forwards}
.popup-super  {animation:pop-super   3s forwards}
.popup-jackpot{animation:pop-jackpot 3s forwards}

/* -------- BONUS POPUP ------- */
#bonusPopup{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);
 align-items:center;justify-content:center;z-index:9999}
.bonus-box{background:#111;border:3px solid gold;border-radius:12px;
 padding:18px 24px;color:#ffd700;text-align:center;min-width:240px}
.bonus-box button{margin-top:12px;background:gold;color:#000;font-weight:bold;
 border:none;border-radius:6px;padding:6px 14px;cursor:pointer}
 .topbar{ overflow-x:auto; scrollbar-width:none; }     /* Firefox */
.topbar::-webkit-scrollbar{ display:none; }           /* Chrome/Edge/Safari */
.btnPlus:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.auto-badge {
  margin-left: 6px;
  width: 24px;
  height: 24px;
  background: gold;
  color: black;
  font-size: 0.8rem;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 4px #000;
  text-shadow: none;
}
.autoplay label {
  font-weight: bold;
  font-size: 1rem;
  color: gold;
  text-shadow: 1px 1px 2px #000;
}
#freeBox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  font-size: 1rem;
  color: gold;
  text-shadow: 1px 1px 2px #000;
}

.free-badge {
  background: rgba(0,0,0,.6);
  color: white;
  font-weight: bold;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.1rem;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 2px #000;
}
/* 1.  Matikan highlight biru bawaan WebKit saat tap */
#spinBtn,
#spinBtn * {
  -webkit-tap-highlight-color: transparent;  /* Chrome / Android / Safari */
}

/* 2.  Hilangkan outline focus (default browser focus ring) */
#spinBtn {
  outline: none;                 /* semua browser */
}
#spinBtn:focus,
#spinBtn:focus-visible {
  outline: none;                 /* Firefox & Chrome baru */
}
/* Firefox khusus: hilangkan inner border default */
#spinBtn::-moz-focus-inner {
  border: 0;
}
.auto-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.auto-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  border: 2px solid #d38f00;
  border-radius: 50%;
  margin-right: 6px;
  cursor: pointer;
  transition: background 0.3s, box-shadow 0.3s;
}

.rocket-icon {
  width: 18px;
  height: 18px;
  filter: brightness(1.4) drop-shadow(0 0 1px gold);
  transition: filter 0.3s;
}

/* ON state (checkbox checked) */
.auto-toggle:checked + .auto-btn {
  background: #d38f00;
  box-shadow: 0 0 6px #d38f00;
}

.auto-toggle:checked + .auto-btn .rocket-icon {
  filter: brightness(0) invert(1) drop-shadow(0 0 3px black);
}

.auto-text {
  font-weight: bold;
  font-size: 1rem;
  color: gold;
  text-shadow: 1px 1px 2px #000;
}
/* ====== ANIMASI MASUK SIMBOL ====== */
@keyframes bounceIn {
  0%   {transform: translateY(-140%) scale(.7); opacity:0;}
  60%  {transform: translateY(15%)  scale(1.05);}
  80%  {transform: translateY(-6%)  scale(.98);}
  100% {transform: translateY(0)    scale(1);   opacity:1;}
}
@keyframes zoomIn {
  0%   {transform: scale(.2); opacity:0;}
  100% {transform: scale(1);  opacity:1;}
}
@keyframes rotateIn {
  0%   {transform: translateY(-140%) rotate(-420deg); opacity:0;}
  100% {transform: translateY(0)     rotate(0);       opacity:1;}
}
@keyframes glowDrop {
  0%   {transform: translateY(-140%); filter:none;                opacity:.2;}
  70%  {transform: translateY(5%);    filter:drop-shadow(0 0 8px gold);}
  100% {transform: translateY(0);     filter:none;                opacity:1;}
}

/* –– masing‑masing class –– */
.fx-bounce {animation:bounceIn .7s cubic-bezier(.22,1.4,.38,1) forwards;}
.fx-zoom   {animation:zoomIn   .5s ease-out              forwards;}
.fx-rotate {animation:rotateIn .7s cubic-bezier(.4,.7,.3,1.1) forwards;}
.fx-glow   {animation:glowDrop .6s ease-out              forwards;}

/* ========== QUICK BET BAR ========== */
.qbet           { font-family:'Pinemon Kingdom.ttf', sans-serif; } /* tanda × */
.qbet span      { font-family:'Pinemon Kingdom.ttf', sans-serif; }            /* angka */

.qbet {
  flex: 1;
  margin: 0 4px;
  height: 25px;
  font-size: 1.50rem;
  font-weight: 900;
  background: linear-gradient(#111, #222);
  color: gold;
  border: 2px solid #d38f00;
  border-radius: 8px;
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.25);
  text-shadow: 1px 1px 2px #000;
  cursor: pointer;
  transition: background 0.18s, transform 0.1s;
}
.qbet:active {
  transform: scale(0.94);
}
.qbet.active {
  background: linear-gradient(#ffd800, #e6a800);
  color: #000;
  border-color: #ffe560;
  box-shadow: 0 0 10px #ffd800, inset 0 0 6px #fff59a;
}
.qbet:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}
.quick-bet {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: calc(
    var(--cols) * var(--cell) +
    (var(--cols) - 1) * 8px +
    16px
  );
  margin: 10px auto;
  padding: 0;
  box-sizing: content-box;
}

/* ─── RAPI TAPI MASIH TEGAS ─── */
.stats {
  margin: 3px 0;
}
#lastWin {
  display: inline-block;
  padding: 3px 8px;
  font-size: 1.rem;
  font-weight: bold;
  color: #fff; /* gading lembut */
  text-shadow: 1px 1px 2px #000;

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 20px;

  border: 2px solid rgba(255, 255, 255, 0.25); /* warna bingkai emas coklat */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3),
              inset 0 1px 2px rgba(255,255,255,0.25); /* glow kayu tua */

  max-width: 90vw;
  margin: 4px auto;
}

@media (max-width: 480px) {
  #lastWin {
    font-size: 1.1rem;
  }
}



#dummyTopUp {
  background: linear-gradient(#ffd800, #d38f00);
  color: black;
  font-weight: bold;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 0 4px #000;
  transition: transform 0.1s, background 0.3s;
}
#dummyTopUp:active {
  transform: scale(0.95);
}

@keyframes popupIn {
  0%   { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes popupOut {
  0%   { transform: scale(1); opacity: 1; }
  100% { transform: scale(0.7); opacity: 0; }
}

.popup.show {
  display: flex !important;
  animation: popupIn 0.3s ease-out forwards;
}

.popup.hide {
  animation: popupOut 0.25s ease-in forwards;
}

@keyframes popupIn {
  from {opacity:0; transform:translateY(40px) scale(.95);}
  to   {opacity:1; transform:translateY(0)    scale(1);}
}
@keyframes popupOut{
  from {opacity:1; transform:translateY(0)    scale(1);}
  to   {opacity:0; transform:translateY(40px) scale(.95);}
}

.popup-content.animate-in  {animation:popupIn  .35s cubic-bezier(.4,1,.4,1) forwards;}
.popup-content.animate-out {animation:popupOut .28s ease-in forwards;}

@keyframes shake{
  0%{transform:translate(0,0);} 20%{transform:translate(-2px,0);}
  40%{transform:translate(2px,0);}60%{transform:translate(-2px,0);}
  80%{transform:translate(2px,0);}100%{transform:translate(0,0);}
}
.btnPlus.shake{animation:shake .4s;}

@keyframes pulse {
  0% {transform: scale(1);}
  50%{transform: scale(1.08);}
  100%{transform: scale(1);}
}
#spinBtn.idle-anim {
  animation: pulse 1.5s infinite ease-in-out;
}
#spinBtn.clicked {
  animation: shake 0.3s;
}

@keyframes fadeUp {
  0%   {opacity:0; transform:translateY(10px);}
  100% {opacity:1; transform:translateY(0);}
}
#lastWin.animate {
  animation: fadeUp 0.5s ease-out;
}

@keyframes slideFade {
  0% {opacity:0; transform:translateY(8px);}
  100%{opacity:1; transform:translateY(0);}
}
#userOnline.animate {
  animation: slideFade 0.4s ease-out;
}

@keyframes flip {
  0%   {transform: rotateY(0);}
  50%  {transform: rotateY(90deg);}
  100% {transform: rotateY(0);}
}
@keyframes flash {
  0%   {text-shadow: 0 0 0 transparent;}
  100% {text-shadow: 0 0 12px gold;}
}



@keyframes coinShake {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(8deg); }
  50% { transform: rotate(-6deg); }
  75% { transform: rotate(4deg); }
  100% { transform: rotate(0deg); }
}

@keyframes coinGlow {
  0% { filter: drop-shadow(0 0 0px gold); }
  50% { filter: drop-shadow(0 0 6px gold); }
  100% { filter: drop-shadow(0 0 0px gold); }
}

.ui-icon.animated-coin {
  animation: coinShake 0.5s ease-out, coinGlow 0.5s ease-out;
}
@keyframes sackBump {
  0%   { transform: scale(1); filter: drop-shadow(0 0 0px gold); }
  30%  { transform: scale(1.3, 1.4); filter: drop-shadow(0 0 8px gold); }
  60%  { transform: scale(1.1, 1.2); filter: drop-shadow(0 0 4px gold); }
  100% { transform: scale(1); filter: drop-shadow(0 0 0px gold); }
}

.ui-icon.bumped {
  animation: sackBump 0.6s ease-out;
}
.icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  padding: 6px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-wrap.bumped {
  transform: scale(1.3);
  box-shadow: 0 0 12px 4px gold;
}

.coin-mini {
  position: fixed;
  width: 14px;
  height: 14px;
  pointer-events: none;
  z-index: 10000;
  transform: scale(1);
  animation: explode-mini 800ms ease-out forwards;
}

@keyframes explode-mini {
  0% {
    transform: scale(0.5) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(1) translate(var(--x), var(--y));
    opacity: 0;
  }
}

/* 🔥 Api roket (pseudo‑elem) */
.rocket-icon {
  position: relative;
  transition: transform 0.2s;
}
.rocket-icon::after{
  content:'';
  position:absolute;
  left:50%; top:90%;
  width:6px; height:14px;
  background: linear-gradient(#ffa500 0%, #ff4500 40%, transparent 100%);
  border-radius:3px;
  transform: translateX(-50%) scaleY(0);
  transition: transform 0.15s;
}

/* 🚀 Animasi take‑off */
@keyframes rocketLaunch {
  0%   {transform: translateY(0)   rotate(0);}
  30%  {transform: translateY(-60px) rotate(-5deg);}
  60%  {transform: translateY(-90px) rotate(3deg);}
  100% {transform: translateY(0)   rotate(0);}
}

.launch {
  animation: rocketLaunch 0.9s cubic-bezier(.42,-0.01,.57,1.35);
}
.launch::after{
  transform: translateX(-50%) scaleY(1);
}
/* --- hapus / ganti TOTAL rule lama .effect‑explode --- */

/* pastikan di file style.css, setelah aturan .coin lama kalau ada */
.coin{
  position:fixed;
  width:48px;height:48px;
  pointer-events:none;
  z-index:12000;        /* lebih tinggi dari pop‑up (9999) */
  will-change:transform,opacity;
}
/* ── GPU hint & matikan animasi berat saat spinning ── */
.reel .icons,
.icon,
.icon img { will-change: transform, opacity; }

body.spinning .icon img      { filter:none !important; }         /* matikan drop‑shadow png */
body.spinning .icon::after   { display:none !important; }        /* matikan blinking overlay */
body.spinning .icon          { animation:none !important; }      /* stop keyframes */

/* ===== POP‑UP SALDO KOSONG ===== */
.nosaldo-backdrop{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;
  z-index:99999;
}

.nosaldo-card{
  min-width:240px;
  background:#f5f5f5;          /* abu netral */
  color:#222;
  border-radius:10px;
  box-shadow:0 6px 18px rgba(0,0,0,.4);
  padding:20px 26px;
  text-align:center;
  font-family:'Segoe UI',sans-serif;
}

.nosaldo-card h2{
  margin:0 0 10px;
  font-size:1.3rem;
  font-weight:700;
}

.nosaldo-card p{
  margin:0 0 18px;
  font-size:.95rem;
  line-height:1.4;
}

.nosaldo-btn{
  padding:6px 22px;
  border:none;
  border-radius:6px;
  background:#2d89ff;          /* biru aksen */
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background .2s;
}
.nosaldo-btn:hover{background:#1962d2;}