hi@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');
}
.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:100px;--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/background2.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;
  position:relative;

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


/* -------- TOP BAR ------- */
/* 1️⃣  Hapus kemampuan membungkus baris */
.topbar{
  display:flex;
  flex-wrap:nowrap;         /* <─ tadinya wrap  */
  justify-content:space-between;
  align-items:center;
  gap:6px;
  width:100%;
  max-width:460px;
}

/* 2️⃣  Biarkan masing‑masing blok memendek kalau perlu  */
.item{
  flex:1 1 0;               /* grow = 1, shrink = 1, basis = 0  */
  min-width:0;              /* izinkan menyusut sebelum pindah baris */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
}

/* 3️⃣  Angka panjang digunting elipsis, tidak mendorong baris */
.item span{
  max-width:100%;           /* ikut lebar flex‑item */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  line-height:1;
}

.btnBet{background:rgba(211, 143, 0, 0.75);color:#000;border:none;width:22px;height:22px;
  border-radius:4px;font-weight:700;cursor:pointer}
.btnPlus{
  background:rgba(211, 143, 0, 0.75);color:#000;border:none;font-weight:700;
  padding:2px 6px;border-radius:4px;font-size:.85rem;cursor:pointer
}
#bal,#bet{font-weight:700;font-size:1.05rem;text-shadow:-1px -1px 0 #000,
 1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000}

/* -------- 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 #d38f00;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%;
 box-shadow:0 0 12px 3px #ff4500,inset 0 0 6px #ffa500;animation:pulse .55s alternate infinite}
@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:radial-gradient(circle,#fff200 20%,transparent 60%);
 border-radius:50%;animation:explode 1s ease-out forwards}

/* -------- 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;
}
@keyframes dropSymbol {
  0%   { transform: translateY(-120px); opacity: 0; }
  80%  { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); }
}
.icon.drop {
  animation: dropSymbol 0.6s ease-out;
}
/* Efek animasi jatuh simbol */
.icon.drop {
  opacity: 0;
  animation: dropSymbol 0.6s ease-out forwards;
}

@keyframes dropSymbol {
  0%   { transform: translateY(-120px); opacity: 0; }
  80%  { transform: translateY(0);      opacity: 1; }
  100% { transform: translateY(0);      opacity: 1; }
}
/* ========== QUICK BET BAR ========== */
.qbet           { font-family:'Pinemon Kingdom.ttf', sans-serif; } /* tanda × */
.qbet span      { font-family:'Pinemon Kingdom.ttf', sans-serif; }            /* angka */

.quick-bet{
  width:100%;              /* selebar layar */
  max-width:460px;         /* sama dgn board */
  padding:0 15px;          /* kiri‑kanan rata tepi board */
  display:flex;
  justify-content:space-between;
  margin:12px 0;
}

.qbet{
  flex:1;                  /* 3 tombol lebar sama */
  margin:0 4px;
  height:25px;             /* tidak terlalu tinggi */
  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,.25);
  text-shadow:1px 1px 2px #000;
  cursor:pointer;
  transition:background .18s,transform .1s;
}
.qbet:active      { transform:scale(.94); }
.qbet.active{
  background:linear-gradient(#ffd800,#e6a800);
  color:#000;
  border-color:#ffe560;
  box-shadow:0 0 10px #ffd800,inset 0 0 6px #fff59a;
}
/* taruh di style.css */
.qbet:disabled{
  opacity: .4;            /* kelihatan redup */
  cursor: not-allowed;    /* tanda tidak bisa di‑klik */
  transform: none!important; /* matikan efek :active scale(.92) */
}


/* panel Last Win ---------------------------------*/
.stats{
  margin-top: 10px;           /* jarak dari SPIN */
  font-weight: bold;
  font-size: 1rem;
  color: gold;
  text-shadow: 1px 1px 2px #000;
  display: flex;
  justify-content: center;
}
#lastWin {
  font-family: 'Pinemon Kingdom.ttf', 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  color: gold;
  text-shadow: 1px 1px 2px #000, 0 0 8px rgba(255, 215, 0, 0.6);
  font-weight: bold;
  background: linear-gradient(to right, #ff4500, #5e3b1f);
  padding: 6px 12px;
  border-radius: 8px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
  display: inline-block;
}

.user-online-panel {
  position: absolute;
  bottom: 55px; /* makin kecil, makin ke bawah */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.6);
  padding: 6px 12px;
  border-radius: 16px;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
  font-weight: bold;
  color: gold;
  font-size: 14px;
  z-index: 99;
}

.user-online-panel .user-icon {
  width: 18px;
  height: 18px;
  filter: drop-shadow(0 0 2px gold);
}