/* Palette read straight off the original client's computed styles:
   page #313131 · bars #424242 · menu #545454 · play #3dc55b · online #53f35e */

* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; background: #313131; overflow: hidden;
  font-family: Montserrat, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #fff; -webkit-font-smoothing: antialiased;
  user-select: none; -webkit-user-select: none;
}
button { font-family: inherit; border: 0; cursor: pointer; color: inherit; }
.icon { width: 20px; height: 20px; display: block; }

#app { height: 100%; display: flex; flex-direction: column; }

/* ------------------------------------------------------------- header --- */
.header {
  background: #424242; padding: 8px 22px; height: 49px; flex: 0 0 49px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.logo { height: 26px; display: block; }
.header-right { display: flex; align-items: center; gap: 10px; }

.ghost-btn {
  background: rgba(255,255,255,.1); border-radius: 6px; padding: 8px 16px;
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500;
  transition: background .15s;
}
.ghost-btn:hover { background: rgba(255,255,255,.16); }
.icon-btn {
  background: transparent; padding: 6px; border-radius: 6px; display: grid; place-items: center;
  color: rgba(255,255,255,.85); transition: background .15s, color .15s;
}
.icon-btn:hover { background: rgba(255,255,255,.1); color: #fff; }
.icon-btn.off { color: rgba(255,255,255,.35); }
.icon-btn.off #wave1, .icon-btn.off #wave2 { display: none; }

.balance {
  background: rgba(255,255,255,.1); border-radius: 6px; padding: 8px 14px;
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.coin {
  width: 17px; height: 17px; border-radius: 50%; background: #ffc21a; color: #6b4c00;
  display: grid; place-items: center; font-size: 11px; font-weight: 900;
}

/* ---------------------------------------------------------- live wins --- */
.livewins {
  height: 30px; flex: 0 0 30px; display: flex; align-items: center; gap: 14px;
  padding: 0 22px; font-size: 11px; color: rgba(255,255,255,.75); overflow: hidden;
}
.lw-label { flex: 0 0 auto; font-weight: 600; }
.lw-online { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: #53f35e; box-shadow: 0 0 6px #53f35e; }
.lw-track { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.lw-strip { display: flex; gap: 8px; align-items: center; }
.lw-chip {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  background: rgba(255,255,255,.08); border-radius: 20px; padding: 3px 10px 3px 3px;
  font-size: 11px; white-space: nowrap;
}
.lw-avatar { width: 16px; height: 16px; border-radius: 50%; background: #b06a4a; flex: 0 0 auto; }
.lw-name { color: rgba(255,255,255,.7); max-width: 78px; overflow: hidden; text-overflow: ellipsis; }
.lw-amt { color: #53f35e; font-weight: 700; }

/* --------------------------------------------------------------- game --- */
.game { flex: 1; min-height: 0; position: relative; width: 100%; display: flex; }
.game canvas { display: block; width: 100%; height: 100%; }

.loader { position: absolute; inset: 0; display: grid; place-items: center; background: #313131; z-index: 5; }
.loader.hidden { opacity: 0; pointer-events: none; transition: opacity .35s; }
.loader-inner { display: grid; gap: 16px; justify-items: center; }
.loader-inner img { height: 40px; }
.bar { width: 220px; height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: #3dc55b; border-radius: 3px; transition: width .2s; }

/* ------------------------------------------------------------- betbar --- */
.betbar {
  margin: 10px 16px 16px; padding: 16px; gap: 20px; display: flex; align-items: center;
  background: #424242; border: 2px solid rgba(255,255,255,.1); border-radius: 16px;
  flex: 0 0 auto;
}
.bet-col { display: flex; flex-direction: column; gap: 8px; flex: 0 0 auto; }
.bet-amount {
  display: flex; align-items: center; gap: 8px; background: #313131;
  border-radius: 8px; padding: 6px 8px;
}
.minmax {
  background: #656565; border-radius: 4px; padding: 4px 8px; font-size: 12px; font-weight: 600;
  letter-spacing: .3px; transition: background .15s;
}
.minmax:hover { background: #767676; }
#betInput {
  width: 92px; background: transparent; border: 0; outline: 0; color: #fff;
  font: 600 15px Montserrat, sans-serif; text-align: center; font-variant-numeric: tabular-nums;
}
.presets { display: flex; gap: 6px; }
.preset {
  display: flex; align-items: center; gap: 5px; background: #313131; border-radius: 6px;
  padding: 5px 9px; font-size: 12px; font-weight: 600; transition: background .15s;
}
.preset:hover { background: #3c3c3c; }
.preset .coin { width: 14px; height: 14px; font-size: 9px; }

.diff-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.diff-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.diff-title { font-size: 14px; font-weight: 600; }
.risk { font-size: 12px; color: rgba(255,255,255,.6); }
.risk b { color: #ff8a8a; font-weight: 700; }

.tabs { display: flex; background: #313131; border-radius: 8px; padding: 4px; gap: 2px; }
.tab {
  flex: 1; background: transparent; border-radius: 6px; padding: 7px 4px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.6); transition: background .15s, color .15s;
}
.tab:hover:not(.active) { color: rgba(255,255,255,.85); }
.tab.active { background: #656565; color: #fff; }

.buttons-wrapper { flex: 0 0 auto; display: flex; gap: 10px; }
.play-btn, .go-btn {
  width: 204px; height: 61px; border-radius: 12px; background: #3dc55b;
  font-size: 20px; font-weight: 700; color: #fff; letter-spacing: .2px;
  transition: filter .15s, transform .06s;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15;
}
.play-btn small { font-size: 13px; font-weight: 600; opacity: .9; }
.play-btn:hover, .go-btn:hover { filter: brightness(1.08); }
.play-btn:active, .go-btn:active { transform: translateY(1px); }
.play-btn.cashout { background: #ffc21a; color: #4a3600; }
.play-btn:disabled { background: #5a5a5a; color: rgba(255,255,255,.5); cursor: default; filter: none; }
.go-btn { width: 92px; background: #545454; font-size: 16px; }

/* ---------------------------------------------------------- win toast --- */
.win-toast {
  position: fixed; left: 50%; top: 22%; transform: translate(-50%, -10px) scale(.9);
  z-index: 30; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.win-toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.win-toast img { display: block; width: 268px; height: auto; }
/* the artwork is a green panel with a yellow pill on top: multiplier goes in
   the pill (28.3% down), the amount sits in the green panel (68% down) */
.win-body { position: absolute; inset: 0; }
.win-coef, .win-amount {
  position: absolute; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap; line-height: 1;
}
.win-coef { top: 28.3%; font-weight: 900; color: #7a5600; }
.win-amount { top: 68%; font-size: 24px; font-weight: 800; color: #fff; }

/* ------------------------------------------------------------- modals --- */
.overlay[hidden], .modal[hidden], .win-toast[hidden], .go-btn[hidden] { display: none !important; }
.overlay {
  position: fixed; inset: 0; background: rgba(26,26,26,.8); z-index: 40;
  display: grid; place-items: center; padding: 20px;
}
.modal {
  background: #545454; border-radius: 12px; width: min(420px, 100%);
  max-height: 82vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.modal.wide { width: min(560px, 100%); }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid rgba(255,255,255,.1);
}
.modal-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
.close { background: transparent; font-size: 26px; line-height: 1; color: rgba(255,255,255,.7); padding: 0 4px; }
.close:hover { color: #fff; }
.modal-body { padding: 18px; overflow: auto; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.9); }
.modal-body p { margin: 0 0 12px; }
.modal-body ol { margin: 0 0 14px; padding-left: 20px; }
.modal-body li { margin-bottom: 6px; }
.odds { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 12px; }
.odds th, .odds td { text-align: left; padding: 7px 8px; border-bottom: 1px solid rgba(255,255,255,.1); }
.odds th { color: rgba(255,255,255,.6); font-weight: 600; }
.odds td:last-child { color: #ffc21a; font-weight: 700; text-align: right; }
.odds th:last-child { text-align: right; }
.rtp { color: rgba(255,255,255,.6); font-size: 12px; margin: 0; }

.menu-row {
  width: 100%; text-align: left; background: rgba(255,255,255,.07); border-radius: 8px;
  padding: 12px 14px; font-size: 14px; font-weight: 600; margin-bottom: 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.menu-row:hover { background: rgba(255,255,255,.12); }
.menu-row.toggle { cursor: pointer; }
.menu-row input { width: 18px; height: 18px; accent-color: #3dc55b; }

.fair-field { display: block; margin-bottom: 12px; }
.fair-field span { display: block; font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 4px; }
.fair-field code {
  display: block; background: #313131; border-radius: 6px; padding: 8px 10px;
  font: 12px/1.4 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; color: #9fe6ad;
}
.fair-field input {
  width: 100%; background: #313131; border: 0; border-radius: 6px; padding: 9px 10px;
  color: #fff; font: 13px ui-monospace, Menlo, Consolas, monospace; outline: 0;
}
.fair-note { font-size: 12px; color: rgba(255,255,255,.55); line-height: 1.6; }
.fair-note code { background: rgba(0,0,0,.25); border-radius: 4px; padding: 1px 5px; font-size: 11px; }
hr { border: 0; border-top: 1px solid rgba(255,255,255,.1); margin: 16px 0; }

/* -------------------------------------------------------------- mobile --- */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .header { padding: 8px 12px; }
  .ghost-btn span { display: none; }
  .ghost-btn { padding: 8px; }
  .livewins { padding: 0 12px; gap: 10px; }
  .betbar {
    flex-direction: column; align-items: stretch; gap: 12px; padding: 16px 12px;
    margin: 8px 10px 10px; border-radius: 12px;
  }
  .bet-col { flex-direction: row; align-items: center; gap: 10px; }
  .bet-amount { flex: 1; }
  #betInput { width: 100%; }
  .presets { display: none; }
  .buttons-wrapper { width: 100%; }
  .play-btn { width: 100%; height: 54px; }
  .go-btn { width: 88px; height: 54px; }
}