:root {
  --bg: #1a0508;
  --bg2: #120408;
  --panel: #2a1018;
  --panel2: #3a1822;
  --line: rgba(255, 190, 120, 0.22);
  --gold: #f0c14b;
  --gold2: #ffe08a;
  --mint: #2ee59d;
  --danger: #ff3b4a;
  --red: #e11d2e;
  --text: #fff6f2;
  --muted: #d0a8b0;
  --nav-h: 68px;
  --top-h: 92px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Outfit", "Noto Sans Arabic", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(225, 29, 46, 0.35), transparent 55%),
    radial-gradient(700px 400px at 100% 40%, rgba(240, 193, 75, 0.12), transparent 50%),
    var(--bg);
}

#app {
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  padding: calc(var(--top-h) + 8px) 12px calc(var(--nav-h) + 12px);
  position: relative;
}

.demo-strip {
  display: none !important;
}

.topbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(480px, 100%);
  height: var(--top-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  background: rgba(7, 14, 26, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  z-index: 50;
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  color: var(--gold2);
}

.brand img { border-radius: 9px; }

.coins-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #1a2b48, #122038);
  color: var(--gold2);
  border-radius: 999px;
  padding: 7px 10px 7px 12px;
  font-weight: 700;
  cursor: pointer;
}

.coins-pill .coin-ico {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  opacity: 0.9;
}

.coins-pill .plus {
  background: var(--gold);
  color: #1a1200;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
}

.coin-ico { color: var(--gold); }

.view { animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.hero-banner {
  border-radius: 16px;
  padding: 22px 18px;
  background:
    linear-gradient(135deg, rgba(240, 193, 75, 0.25), rgba(46, 229, 157, 0.1)),
    var(--panel);
  border: 1px solid var(--line);
  margin-bottom: 16px;
}

.hero-banner h1 {
  margin: 0 0 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.8rem;
  letter-spacing: 0.03em;
}

.hero-banner p {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.btn {
  border: 0;
  border-radius: 12px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  font-family: inherit;
}

.btn-gold {
  background: linear-gradient(135deg, #f0c14b, #ff8a3d);
  color: #1a1000;
}

.btn-mint {
  background: linear-gradient(135deg, #2ee59d, #3aa0ff);
  color: #041018;
}

.btn-ghost {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}

.btn-block { width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 8px 2px 10px;
}

.section-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-family: "Rajdhani", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-head span { color: var(--muted); font-size: 0.8rem; }

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.game-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #183050, #101c30);
  padding: 14px 12px 12px;
  text-align: left;
  color: inherit;
  cursor: pointer;
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.12s ease;
}

.game-card:active { transform: scale(0.98); }

.game-card .emoji {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 8px;
}

.game-card h3 {
  margin: 0 0 4px;
  font-size: 1rem;
  font-family: "Rajdhani", sans-serif;
  letter-spacing: 0.03em;
}

.game-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0;
}

.chip {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.chip.active {
  background: rgba(240, 193, 75, 0.2);
  border-color: var(--gold);
  color: var(--gold2);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}

.panel h2, .panel h3 {
  margin-top: 0;
  font-family: "Rajdhani", sans-serif;
}

.result {
  min-height: 1.4em;
  margin: 12px 0;
  font-weight: 700;
  text-align: center;
}

.result.win { color: var(--mint); }
.result.lose { color: var(--danger); }
.result.info { color: var(--muted); }

.game-stage {
  min-height: 140px;
  display: grid;
  place-items: center;
  background: #0b1424;
  border-radius: 14px;
  border: 1px dashed var(--line);
  margin: 12px 0;
  font-size: 2.4rem;
  letter-spacing: 0.08em;
  padding: 16px;
  text-align: center;
}

.back-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.back-row button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-family: inherit;
}

.pack-list { display: grid; gap: 10px; }

.pack {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #183050, #122038);
}

.pack strong { display: block; }
.pack small { color: var(--muted); }

.bottomnav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(480px, 100%);
  height: var(--nav-h);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(8, 14, 26, 0.96);
  border-top: 1px solid var(--line);
  z-index: 50;
  backdrop-filter: blur(10px);
}

.nav-item {
  border: 0;
  background: transparent;
  color: var(--muted);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.68rem;
  cursor: pointer;
  font-family: inherit;
}

.nav-item.active { color: var(--gold2); }
.nav-ico { font-size: 1.1rem; line-height: 1; }

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-h) + 36px);
  background: #1a2b48;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  z-index: 80;
  max-width: min(420px, 92vw);
  text-align: center;
  animation: fadeIn 0.2s ease;
}

.spin-reel {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-size: 2.2rem;
}

.spin-reel span {
  width: 64px;
  height: 72px;
  display: grid;
  place-items: center;
  background: #0f1a2e;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.muted { color: var(--muted); font-size: 0.85rem; line-height: 1.45; }

.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.9rem;
}

.btn-red {
  background: linear-gradient(135deg, #ff3b4a, #b80f1f);
  color: #fff;
}

.btn-sm {
  padding: 8px 12px;
  font-size: 0.82rem;
  border-radius: 10px;
}

.auth-row {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
}

.auth-row .btn { flex: 1; }

.promo-slider {
  display: grid;
  gap: 10px;
  margin-bottom: 12px;
}

.slide {
  border-radius: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 88px;
}

.slide small {
  display: block;
  color: var(--gold2);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
}

.slide strong {
  display: block;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.25rem;
  margin: 2px 0;
}

.slide p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.slide.s1 {
  background: linear-gradient(120deg, #5a1520, #2a0c12 60%, #3a2810);
}

.slide.s2 {
  background: linear-gradient(120deg, #2a0c12, #4a1810);
}

.jackpot-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(90deg, #5c1018, #3a0c12);
  border: 1px solid rgba(240, 193, 75, 0.35);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 12px;
  font-family: "Rajdhani", sans-serif;
}

.jackpot-bar span { color: var(--gold2); letter-spacing: 0.08em; }
.jackpot-bar strong { font-size: 1.35rem; color: #fff; }

.cat-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-bottom: 8px;
  scrollbar-width: none;
}

.cat-row::-webkit-scrollbar { display: none; }

.cat {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  background: #240c12;
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.cat.active {
  background: var(--red);
  border-color: #ff6b78;
  color: #fff;
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

@media (max-width: 360px) {
  .tile-grid { grid-template-columns: repeat(2, 1fr); }
}

.tile {
  position: relative;
  border: 0;
  border-radius: 14px;
  min-height: 112px;
  padding: 10px 8px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
}

.tile .badge,
.shelf-tile .badge {
  position: absolute;
  top: 6px;
  left: 6px;
  right: auto;
  z-index: 2;
  background: linear-gradient(135deg, #ff3b4a, #e11d2e);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(225, 29, 46, 0.55);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

.tile-emoji {
  font-size: 1.6rem;
  margin-bottom: 6px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.35));
}
.tile-name {
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
}
.tile-cat {
  font-size: 0.68rem;
  margin-top: 2px;
  color: rgba(255, 246, 242, 0.78);
}

.tile.g1, .shelf-tile.g1 {
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 120, 140, 0.35), transparent 42%),
    linear-gradient(160deg, #8a1e2c, #2a0a10 70%);
}
.tile.g2, .shelf-tile.g2 {
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 190, 90, 0.3), transparent 42%),
    linear-gradient(160deg, #7a4212, #2a1408 70%);
}
.tile.g3, .shelf-tile.g3 {
  background:
    radial-gradient(circle at 80% 18%, rgba(80, 230, 180, 0.28), transparent 42%),
    linear-gradient(160deg, #1a5240, #0a1a14 70%);
}
.tile.g4, .shelf-tile.g4 {
  background:
    radial-gradient(circle at 80% 18%, rgba(160, 130, 255, 0.3), transparent 42%),
    linear-gradient(160deg, #3f2d72, #120a24 70%);
}
.tile.g5, .shelf-tile.g5 {
  background:
    radial-gradient(circle at 80% 18%, rgba(255, 100, 180, 0.28), transparent 42%),
    linear-gradient(160deg, #721a52, #220812 70%);
}
.tile.g6, .shelf-tile.g6 {
  background:
    radial-gradient(circle at 80% 18%, rgba(90, 170, 255, 0.3), transparent 42%),
    linear-gradient(160deg, #1a3f72, #0a1428 70%);
}

.download-card {
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(135deg, #3a1018, #1a080c);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.download-card strong { display: block; font-family: "Rajdhani", sans-serif; }
.download-card p { margin: 4px 0 0; }

.promo-item {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mines-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 12px 0;
}

.mine-cell {
  height: 72px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #1a0a10;
  color: #fff;
  font-size: 1.4rem;
  font-weight: 800;
  cursor: pointer;
}

.install-help { margin-top: 8px; }

.topbar {
  background: rgba(20, 6, 10, 0.94);
}

.coins-pill {
  background: linear-gradient(180deg, #3a1820, #2a1018);
}

.bottomnav {
  background: rgba(18, 6, 10, 0.97);
}

.nav-item.active { color: #fff6c8; }

.game-card {
  background: linear-gradient(180deg, #3a1822, #1a0a10);
}

.panel {
  background: var(--panel);
}

.chip.active {
  background: rgba(225, 29, 46, 0.25);
  border-color: #ff6b78;
  color: #ffd0d4;
}

.field-label {
  display: block;
  margin: 10px 0 4px;
  font-size: 0.8rem;
  color: var(--muted);
}

.field {
  width: 100%;
  border: 1px solid var(--line);
  background: #1a0a10;
  color: #fff;
  border-radius: 12px;
  padding: 12px;
  font: inherit;
}

.divider {
  text-align: center;
  margin: 14px 0;
  color: var(--muted);
  font-size: 0.8rem;
}

.aviator-board { margin-bottom: 10px; }
.aviator-sky {
  position: relative;
  height: 210px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(500px 160px at 70% 20%, rgba(255,80,100,.25), transparent 60%),
    linear-gradient(180deg, #142838, #0a121c 55%, #2a1014);
  border: 1px solid var(--line);
}
.aviator-sky canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.aviator-status {
  position: absolute;
  top: 8px;
  left: 10px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: #ffb4bc;
  font-weight: 700;
}
.aviator-plane {
  position: absolute;
  left: 8%;
  bottom: 16%;
  font-size: 2.1rem;
  transition: transform 0.08s linear;
  z-index: 3;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.45));
}
.aviator-plane.flying { animation: planePulse 0.6s ease-in-out infinite alternate; }
@keyframes planePulse {
  from { filter: drop-shadow(0 0 0 rgba(255,80,100,0)); }
  to { filter: drop-shadow(0 0 12px rgba(255,80,100,.7)); }
}
.aviator-mult {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Rajdhani", sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: #fff;
  z-index: 2;
  transition: transform 0.08s linear;
  text-shadow: 0 6px 22px rgba(0,0,0,.5);
}

.chicken-board.pro {
  position: relative;
  height: 190px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, #1c3d1a, #102010 40%, #2a2a2a 41%, #1a1a1a 70%, #143018);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 10px 0;
}
.road-lines {
  position: absolute;
  left: 0; right: 0; top: 42%;
  height: 28%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 18px,
    rgba(255,255,255,.35) 18px 34px,
    transparent 34px 52px
  );
  opacity: 0.35;
}
.chicken-hud {
  position: absolute;
  top: 8px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  z-index: 4;
}
.chicken-hud span:last-child {
  color: var(--gold2);
  font-family: "Rajdhani", sans-serif;
  font-size: 1.2rem;
}
.chicken-actor {
  position: absolute;
  bottom: 22px;
  left: 6%;
  font-size: 2rem;
  transition: left 0.28s cubic-bezier(.2,.8,.2,1);
  z-index: 3;
}
.chicken-actor.hop { animation: hop 0.28s ease; }
@keyframes hop {
  0% { transform: translateY(0); }
  40% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}
.car {
  display: none;
  position: absolute;
  bottom: 24px;
  font-size: 1.8rem;
  z-index: 2;
}
.car.hit { animation: carHit 0.35s ease; }
@keyframes carHit {
  from { transform: translateX(-40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

.tyre-stage {
  text-align: center;
  padding-bottom: 8px;
  background: radial-gradient(circle at 50% 40%, #2a1820, #0a0a0a);
}
.bet-pulse {
  animation: betPulse 1.6s ease-in-out infinite;
}
@keyframes betPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,80,100,0.35); }
  50% { box-shadow: 0 0 0 8px rgba(255,80,100,0); }
}
.aviator-board.pro-game .aviator-mult {
  pointer-events: none;
}

.lang-switch {
  display: inline-flex;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lang-btn {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
}
.lang-btn.active {
  background: var(--red);
  color: #fff;
}

.winners-feed {
  display: grid;
  gap: 8px;
  max-height: 210px;
  overflow: hidden;
  margin-bottom: 14px;
}
.win-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  animation: winIn 0.35s ease;
}
@keyframes winIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.win-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: #fff;
  flex: 0 0 auto;
}
.win-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.win-meta strong {
  font-size: 0.88rem;
}
.win-meta span {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.win-meta b { color: var(--gold2); }

.result-pop {
  animation: resultPop 0.35s ease;
  font-size: 1.05rem !important;
}
@keyframes resultPop {
  from { transform: scale(0.92); opacity: 0.4; }
  to { transform: scale(1); opacity: 1; }
}

html[dir="rtl"] .auth-row { flex-direction: row-reverse; }
html[dir="rtl"] .lang-switch { margin-left: 0; margin-right: auto; }
.aviator-history {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-top: 8px;
}
.aviator-history span {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 700;
}
.aviator-history .up { background: rgba(46,229,157,.2); color: #2ee59d; }
.aviator-history .down { background: rgba(255,59,74,.2); color: #ff8a93; }
.aviator-actions { display: flex; gap: 8px; margin-top: 8px; }

.chicken-board {
  position: relative;
  height: 160px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1a3a18, #0e180c);
  border: 1px solid var(--line);
  overflow: hidden;
  margin: 10px 0;
}
.chicken-lanes {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  height: 100%;
}
.chicken-lanes .lane {
  border-right: 1px dashed rgba(255,255,255,.12);
  font-size: 0.55rem;
  color: rgba(255,255,255,.35);
  padding: 4px;
}
.chicken-actor {
  position: absolute;
  bottom: 20px;
  left: 4%;
  font-size: 1.8rem;
  transition: left 0.2s ease;
  z-index: 2;
}

.tyre-wrap {
  text-align: center;
  padding: 18px 0;
}
.tyre {
  font-size: 5rem;
  display: inline-block;
}
.tyre.spinning {
  animation: tyreSpin 0.35s linear infinite;
}
@keyframes tyreSpin {
  to { transform: rotate(360deg); }
}
.tyre-label {
  margin-top: 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.4rem;
  color: var(--gold2);
}

body.is-installed-app .install-only,
body.is-installed-app [data-install-btn],
body.is-installed-app .download-card,
body.is-installed-app .slide.s2 {
  display: none !important;
}

.pro-game {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0f18;
  margin-bottom: 10px;
  min-height: 220px;
}
.pro-game canvas,
.game-canvas {
  display: block !important;
  width: 100% !important;
  min-height: 220px;
  height: 280px;
  background: #0c1422;
}
#chickenCanvas.game-canvas { height: 300px; min-height: 300px; }
#aviatorCanvas.game-canvas { height: 280px; min-height: 280px; }
.aviator-sky {
  position: relative;
  min-height: 280px;
  background: #0c1422;
}
.aviator-board.pro-game .aviator-sky {
  height: auto;
  min-height: 280px;
  border: 0;
  border-radius: 0;
}

.fx-stage {
  min-height: 180px;
  display: grid;
  place-items: center;
  margin: 8px 0 12px;
  perspective: 900px;
  background: radial-gradient(circle at 50% 40%, rgba(255,80,100,0.12), transparent 60%), #0b1018;
  border-radius: 16px;
  border: 1px solid var(--line);
}
.dice-3d { width: 88px; height: 88px; position: relative; transform-style: preserve-3d; }
.dice-cube {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transform: rotateX(-20deg) rotateY(30deg); transition: transform 0.45s ease;
}
.dice-cube.rolling { animation: diceRoll 0.35s linear infinite; }
@keyframes diceRoll {
  0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
  100% { transform: rotateX(360deg) rotateY(240deg) rotateZ(180deg); }
}
.dice-cube .face {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(145deg, #fff, #ddd); color: #1a1a1a;
  font-weight: 800; font-size: 1.6rem; border-radius: 12px; border: 2px solid #ccc;
  backface-visibility: visible;
}
.dice-cube.rolling {
  animation: diceRoll 0.28s linear infinite;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.f1 { transform: translateZ(44px); }
.f2 { transform: rotateY(90deg) translateZ(44px); }
.f3 { transform: rotateY(180deg) translateZ(44px); }
.f4 { transform: rotateY(-90deg) translateZ(44px); }
.f5 { transform: rotateX(90deg) translateZ(44px); }
.f6 { transform: rotateX(-90deg) translateZ(44px); }
.dice-cube.show-1 { transform: rotateX(0) rotateY(0); }
.dice-cube.show-2 { transform: rotateY(-90deg); }
.dice-cube.show-3 { transform: rotateY(180deg); }
.dice-cube.show-4 { transform: rotateY(90deg); }
.dice-cube.show-5 { transform: rotateX(-90deg); }
.dice-cube.show-6 { transform: rotateX(90deg); }

.coin-3d { width: 110px; height: 110px; position: relative; transform-style: preserve-3d; }
.coin-inner {
  width: 100%; height: 100%; position: relative; transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.coin-inner.flipping { animation: coinFlip 0.45s linear infinite; }
@keyframes coinFlip { to { transform: rotateY(360deg) rotateX(20deg); } }
.coin-face {
  position: absolute; inset: 0; border-radius: 50%; display: grid; place-items: center;
  font-size: 2.4rem; font-weight: 800; backface-visibility: hidden;
  border: 4px solid #c9a227;
  box-shadow: inset 0 0 18px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.35);
}
.coin-face.heads { background: radial-gradient(circle at 35% 30%, #ffe08a, #d4a017); color: #5a3a00; }
.coin-face.tails {
  background: radial-gradient(circle at 35% 30%, #c0c7d4, #6a7385); color: #1a2030;
  transform: rotateY(180deg);
}
.coin-inner.land-heads { transform: rotateY(0deg); }
.coin-inner.land-tails { transform: rotateY(180deg); }

/* ===== Mini Roulette  -  premium wheel ===== */
.roulette-arena {
  position: relative;
  margin: 8px 0 14px;
  padding: 18px 12px 14px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: 18px;
  border: 1px solid rgba(240, 193, 75, 0.22);
  background:
    radial-gradient(ellipse at 50% 28%, rgba(46, 229, 157, 0.1), transparent 42%),
    radial-gradient(circle at 50% 55%, rgba(225, 29, 46, 0.18), transparent 55%),
    linear-gradient(165deg, #1a0c12 0%, #0a0608 55%, #120810 100%);
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.08);
}
.roulette-arena::before {
  content: "";
  position: absolute;
  inset: -40% -20% auto;
  height: 70%;
  background: radial-gradient(ellipse, rgba(240, 193, 75, 0.09), transparent 70%);
  pointer-events: none;
}
.roulette-pointer {
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 5;
  width: 0;
  height: 0;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 18px solid #f0c14b;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}
.roulette-pointer::after {
  content: "";
  position: absolute;
  top: -18px;
  left: -4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #c9a227);
  box-shadow: 0 0 10px rgba(240, 193, 75, 0.7);
}
.roulette-bowl {
  position: relative;
  width: min(78vw, 236px);
  height: min(78vw, 236px);
  --rw-size: min(78vw, 236px);
  border-radius: 50%;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 50%, #2a1810 58%, #5a3a18 72%, #f0c14b 86%, #8a6020 100%);
  box-shadow:
    0 0 0 2px rgba(240, 193, 75, 0.35),
    0 12px 28px rgba(0, 0, 0, 0.45),
    inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.roulette-wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: rotate(0deg);
  will-change: transform;
  background:
    conic-gradient(
      from 0deg,
      #c41e2a 0deg 30deg,
      #141414 30deg 60deg,
      #c41e2a 60deg 90deg,
      #141414 90deg 120deg,
      #c41e2a 120deg 150deg,
      #141414 150deg 180deg,
      #1faa6e 180deg 210deg,
      #141414 210deg 240deg,
      #c41e2a 240deg 270deg,
      #141414 270deg 300deg,
      #c41e2a 300deg 330deg,
      #141414 330deg 360deg
    );
  box-shadow: inset 0 0 0 3px rgba(255, 230, 160, 0.2);
}
.roulette-arena.spinning .roulette-wheel {
  filter: blur(0.4px) saturate(1.15);
}
.rw-face {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}
.rw-num {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform: rotate(calc(var(--i) * 30deg + 15deg)) translateY(calc(var(--rw-size) * -0.32));
}
.rw-num i {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  font-style: normal;
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
  transform: rotate(calc(var(--i) * -30deg - 15deg));
}
.rw-num.tone-green i {
  color: #dfffee;
  text-shadow: 0 0 8px rgba(46, 229, 157, 0.7);
}
.rw-hub {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  background:
    radial-gradient(circle at 35% 28%, #ffe08a, #c9a227 55%, #7a5410);
  border: 2px solid rgba(255, 240, 200, 0.55);
  box-shadow:
    0 0 0 4px #1a1008,
    0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  z-index: 2;
}
.rw-hub-label {
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(60, 35, 0, 0.75);
  line-height: 1;
}
.rw-hub-num {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  color: #3a2200;
  line-height: 1;
}
.roulette-ball-ring {
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.roulette-ball {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #d0d4dc 55%, #8a909a);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(255, 255, 255, 0.35);
}
.roulette-arena.spinning .roulette-ball {
  animation: rouletteBallPulse 0.18s ease infinite alternate;
}
@keyframes rouletteBallPulse {
  from { transform: scale(1); }
  to { transform: scale(1.15); }
}
.roulette-rail {
  display: flex;
  gap: 8px;
  z-index: 1;
}
.roulette-rail .rr {
  width: 28px;
  height: 6px;
  border-radius: 99px;
  opacity: 0.45;
}
.roulette-rail .rr.red { background: #c41e2a; }
.roulette-rail .rr.black { background: #2a2a2a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15); }
.roulette-rail .rr.green { background: #1faa6e; }

.roulette-arena.landed.win-red {
  box-shadow: inset 0 0 40px rgba(225, 29, 46, 0.35), 0 0 24px rgba(225, 29, 46, 0.25);
}
.roulette-arena.landed.win-black {
  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.08), 0 0 18px rgba(0, 0, 0, 0.4);
}
.roulette-arena.landed.win-green {
  box-shadow: inset 0 0 40px rgba(46, 229, 157, 0.3), 0 0 28px rgba(46, 229, 157, 0.28);
}
.roulette-arena.landed.win-red .rw-hub {
  box-shadow: 0 0 0 4px #1a1008, 0 0 22px rgba(225, 29, 46, 0.65);
}
.roulette-arena.landed.win-green .rw-hub {
  box-shadow: 0 0 0 4px #1a1008, 0 0 22px rgba(46, 229, 157, 0.7);
}
.roulette-arena.landed .rw-hub-num {
  animation: rouletteHubPop 0.45s cubic-bezier(0.2, 1.4, 0.3, 1);
}
@keyframes rouletteHubPop {
  0% { transform: scale(0.6); opacity: 0.4; }
  100% { transform: scale(1); opacity: 1; }
}

.chips.roulette-picks { gap: 8px; }
.chip.roulette-pick {
  flex: 1;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 12px;
  padding: 10px 8px;
  font-size: 0.82rem;
  border-width: 1.5px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.chip.roulette-pick small {
  font-size: 0.68rem;
  opacity: 0.7;
  font-weight: 700;
}
.chip.roulette-pick .rp-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.chip.roulette-pick.red .rp-dot { background: #e11d2e; }
.chip.roulette-pick.black .rp-dot { background: #1a1a1a; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25); }
.chip.roulette-pick.lucky7 .rp-dot { background: #1faa6e; box-shadow: 0 0 8px rgba(46, 229, 157, 0.45); }
.chip.roulette-pick.red.active {
  background: linear-gradient(180deg, rgba(225, 29, 46, 0.35), rgba(225, 29, 46, 0.12));
  border-color: #ff6b78;
  color: #ffd0d4;
  box-shadow: 0 0 14px rgba(225, 29, 46, 0.25);
}
.chip.roulette-pick.black.active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(0, 0, 0, 0.25));
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.1);
}
.chip.roulette-pick.lucky7.active {
  background: linear-gradient(180deg, rgba(46, 229, 157, 0.28), rgba(46, 229, 157, 0.08));
  border-color: #2ee59d;
  color: #b8ffe0;
  box-shadow: 0 0 14px rgba(46, 229, 157, 0.28);
}

.tyre-stage.generator { position: relative; padding-top: 10px; }
.gen-lights { display: flex; justify-content: center; gap: 8px; margin-bottom: 6px; }
.gen-lights span {
  width: 12px; height: 12px; border-radius: 50%; background: #333;
  box-shadow: inset 0 0 4px #000;
}
.gen-lights.active span { animation: genBlink 0.35s ease infinite alternate; }
.gen-lights.active span:nth-child(2) { animation-delay: 0.08s; }
.gen-lights.active span:nth-child(3) { animation-delay: 0.16s; }
.gen-lights.active span:nth-child(4) { animation-delay: 0.24s; }
@keyframes genBlink {
  from { background: #444; }
  to { background: #2ee59d; box-shadow: 0 0 10px #2ee59d; }
}
.gen-bar {
  height: 8px; margin: 8px 16px 10px; border-radius: 99px; background: #1a1a1a;
  overflow: hidden; border: 1px solid rgba(240,193,75,0.3);
}
.gen-bar i {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, #ff8a3d, #f0c14b, #2ee59d);
  transition: width 4.5s linear;
}

#fxLayer { position: fixed; inset: 0; pointer-events: none; z-index: 120; }
.fx-canvas { position: absolute; inset: 0; }

/*  -  How to Play / Guides  -  */
.guide-list { display: flex; flex-direction: column; gap: 8px; padding: 0 0 24px; }
.guide-list-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  padding: 14px 14px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(135deg, #2a1018, #1a0a10);
  color: #fff; cursor: pointer;
}
.guide-list-item .g-emoji { font-size: 1.6rem; width: 40px; text-align: center; }
.guide-list-item strong { display: block; font-family: "Rajdhani", sans-serif; font-size: 1.05rem; }
.guide-list-item small { color: rgba(255,255,255,0.45); font-size: 0.75rem; }
.guide-list-item .g-arrow { margin-left: auto; opacity: 0.4; font-size: 1.4rem; }

.guide-modal {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(8,2,6,0.82);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 16px; animation: guideFade 0.25s ease;
}
@keyframes guideFade { from { opacity: 0; } to { opacity: 1; } }
.guide-card {
  width: 100%; max-width: 420px;
  background: linear-gradient(180deg, #2c121a, #16080e);
  border: 1px solid rgba(240,193,75,0.25);
  border-radius: 20px 20px 16px 16px;
  padding: 16px 16px 18px;
  animation: guideUp 0.3s ease;
}
@keyframes guideUp { from { transform: translateY(40px); } to { transform: translateY(0); } }
.guide-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px; font-family: "Rajdhani", sans-serif; font-size: 1.15rem;
}
.guide-skip {
  background: transparent; border: 0; color: rgba(255,255,255,0.5);
  font-size: 0.9rem; cursor: pointer; padding: 6px 8px;
}
.guide-step { display: none; text-align: center; }
.guide-step.active { display: block; animation: guideFade 0.2s ease; }
.guide-step h3 {
  margin: 12px 0 6px; font-family: "Rajdhani", sans-serif;
  font-size: 1.25rem; color: #f0c14b;
}
.guide-step p { margin: 0; color: rgba(255,255,255,0.7); font-size: 0.92rem; line-height: 1.4; }
.guide-dots { display: flex; justify-content: center; gap: 6px; margin: 14px 0 12px; }
.guide-dots i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,0.2); display: block;
}
.guide-dots i.on { background: #e11d48; width: 18px; border-radius: 99px; }
.guide-actions { display: flex; gap: 10px; }
.guide-actions .btn { flex: 1; }

.guide-shot {
  height: 160px; border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  background: #0d0609; position: relative;
}
.shot-screen { position: absolute; inset: 8px; border-radius: 10px; overflow: hidden; }
.shot-top, .shot-mid, .shot-bot { position: absolute; left: 10%; right: 10%; border-radius: 8px; }
.shot-top { top: 10%; height: 18%; background: rgba(255,255,255,0.08); }
.shot-mid { top: 36%; height: 28%; background: linear-gradient(90deg, #e11d48, #f0c14b); opacity: 0.85; }
.shot-bot { bottom: 12%; height: 16%; background: rgba(46,229,157,0.35); }
.shot-badge {
  position: absolute; top: 10px; right: 10px;
  font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em;
  background: rgba(0,0,0,0.55); color: #f0c14b; padding: 3px 8px; border-radius: 6px;
}

/* Visual mock variants per game step */
.shot-aviator-bet .shot-mid { background: linear-gradient(180deg, #1a3048, #e11d48); clip-path: polygon(10% 80%, 55% 35%, 90% 55%, 70% 80%); }
.shot-aviator-fly .shot-mid { background: linear-gradient(135deg, #3b82f6, #f0c14b); transform: rotate(-12deg) scale(0.7); top: 20%; }
.shot-aviator-cash .shot-bot { background: #2ee59d; box-shadow: 0 0 20px #2ee59d; }
.shot-chicken-start .shot-mid { background: #2ee59d; width: 18%; left: 41%; height: 20%; top: 60%; border-radius: 50%; }
.shot-chicken-go .shot-mid { background: #f0c14b; width: 18%; left: 41%; height: 20%; top: 35%; border-radius: 50%; }
.shot-chicken-cash .shot-bot { background: #2ee59d; }
.shot-tyre-charge .shot-mid { border-radius: 50%; width: 42%; left: 29%; height: 55%; top: 18%; background: conic-gradient(#333, #f0c14b, #333); }
.shot-tyre-spin .shot-mid { border-radius: 50%; width: 42%; left: 29%; height: 55%; top: 18%; background: conic-gradient(#e11d48, #f0c14b, #2ee59d, #e11d48); animation: tyreSpinShot 1.2s linear infinite; }
.shot-tyre-result .shot-bot { background: #e11d48; }
@keyframes tyreSpinShot { to { transform: rotate(360deg); } }
.shot-dice-pick .shot-mid { width: 28%; left: 36%; height: 40%; top: 28%; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #333; }
.shot-dice-roll .shot-mid { width: 28%; left: 36%; height: 40%; top: 28%; border-radius: 10px; background: #fff; animation: diceWobble 0.5s ease infinite; }
@keyframes diceWobble { 50% { transform: rotate(18deg) translateY(-6px); } }
.shot-coin-pick .shot-mid, .shot-coin-flip .shot-mid {
  width: 36%; left: 32%; height: 48%; top: 22%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #c9a227);
}
.shot-coin-flip .shot-mid { animation: coinFlipShot 0.6s linear infinite; }
@keyframes coinFlipShot { to { transform: rotateY(360deg); } }
.shot-slots-spin .shot-mid { display: flex; background: #111; }
.shot-slots-spin .shot-mid::before {
  content: "7 * *"; position: absolute; inset: 20% 12%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; letter-spacing: 0.2em;
  color: #ffe08a; font-weight: 800;
}
.shot-roulette-spin .shot-mid {
  border-radius: 50%; width: 50%; left: 25%; height: 65%; top: 12%;
  background: conic-gradient(
    #c41e2a 0 30deg, #111 30deg 60deg, #c41e2a 60deg 90deg, #111 90deg 120deg,
    #c41e2a 120deg 150deg, #111 150deg 180deg, #2ee59d 180deg 210deg, #111 210deg 240deg,
    #c41e2a 240deg 270deg, #111 270deg 300deg, #c41e2a 300deg 330deg, #111 330deg 360deg
  );
  animation: rouletteSpinShot 1.1s cubic-bezier(0.12, 0.8, 0.1, 1) infinite;
  box-shadow: 0 0 0 3px #c9a227, inset 0 0 12px rgba(0,0,0,0.4);
}
.shot-roulette-spin .shot-mid::after {
  content: "";
  position: absolute;
  top: -6px; left: 50%; margin-left: -5px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #f0c14b;
}
@keyframes rouletteSpinShot {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.shot-roulette-pick .shot-mid {
  height: 22%; top: 42%;
  background: linear-gradient(90deg, #c41e2a 0 33%, #1a1a1a 33% 66%, #1faa6e 66%);
  border-radius: 10px;
}
.shot-roulette-win .shot-mid {
  border-radius: 50%; width: 44%; left: 28%; height: 58%; top: 16%;
  background: radial-gradient(circle at 50% 45%, #2ee59d, #0a3020 70%);
  box-shadow: 0 0 18px rgba(46, 229, 157, 0.45);
}
.shot-roulette-win .shot-bot { background: #2ee59d; }
.shot-mines-pick .shot-mid {
  background: repeating-linear-gradient(90deg, #1a3048 0 22%, #0d1520 22% 25%);
  height: 40%; top: 30%;
}
.shot-mines-reveal .shot-bot { background: #2ee59d; }
.shot-wheel-spin .shot-mid {
  border-radius: 50%; width: 48%; left: 26%; height: 62%; top: 14%;
  background: conic-gradient(#e11d48, #f0c14b, #2ee59d, #3b82f6, #e11d48);
}
.shot-teen-reveal .shot-mid {
  background: linear-gradient(135deg, #1a3048, #e11d48);
  width: 30%; left: 20%; height: 48%; top: 22%;
  box-shadow: 40px 8px 0 #2a1820;
}

/* Aliases  -  new lobby games reuse proven shot visuals */
.shot-rocket-bet .shot-mid { background: linear-gradient(180deg, #1a3048, #e11d48); clip-path: polygon(10% 80%, 55% 35%, 90% 55%, 70% 80%); }
.shot-rocket-fly .shot-mid { background: linear-gradient(135deg, #3b82f6, #f0c14b); transform: rotate(-12deg) scale(0.7); top: 20%; }
.shot-rocket-cash .shot-bot { background: #2ee59d; box-shadow: 0 0 20px #2ee59d; }
.shot-balloon-bet .shot-top { background: rgba(255,120,160,0.25); }
.shot-balloon-inflate .shot-mid { width: 36%; left: 32%; height: 48%; top: 18%; border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 35% 30%, #ff8fab, #e11d48); }
.shot-balloon-cash .shot-bot { background: #2ee59d; box-shadow: 0 0 20px #2ee59d; }
.shot-sugar-bet .shot-bot,
.shot-cascade-bet .shot-bot,
.shot-volcano-bet .shot-bot,
.shot-neon-bet .shot-bot,
.shot-aztec-bet .shot-bot,
.shot-crystal-bet .shot-bot,
.shot-slots-bet .shot-bot { background: rgba(240,193,75,0.45); }
.shot-sugar-spin .shot-mid,
.shot-cascade-spin .shot-mid,
.shot-volcano-spin .shot-mid,
.shot-neon-spin .shot-mid,
.shot-aztec-spin .shot-mid,
.shot-crystal-spin .shot-mid { display: flex; background: #111; }
.shot-sugar-spin .shot-mid::before,
.shot-cascade-spin .shot-mid::before,
.shot-volcano-spin .shot-mid::before,
.shot-neon-spin .shot-mid::before,
.shot-aztec-spin .shot-mid::before,
.shot-crystal-spin .shot-mid::before {
  content: "7 * *"; position: absolute; inset: 20% 12%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; letter-spacing: 0.2em;
  color: #ffe08a; font-weight: 800;
}
.shot-sugar-win .shot-bot,
.shot-cascade-win .shot-bot,
.shot-volcano-win .shot-bot,
.shot-neon-win .shot-bot,
.shot-aztec-win .shot-bot,
.shot-crystal-win .shot-bot,
.shot-slots-win .shot-bot { background: #2ee59d; }
.shot-lucky7-pick .shot-mid,
.shot-colorspin-pick .shot-mid {
  height: 22%; top: 42%;
  background: linear-gradient(90deg, #c41e2a 0 33%, #1a1a1a 33% 66%, #1faa6e 66%);
  border-radius: 10px;
}
.shot-lucky7-spin .shot-mid,
.shot-colorspin-spin .shot-mid {
  border-radius: 50%; width: 50%; left: 25%; height: 65%; top: 12%;
  background: conic-gradient(
    #c41e2a 0 30deg, #111 30deg 60deg, #c41e2a 60deg 90deg, #111 90deg 120deg,
    #c41e2a 120deg 150deg, #111 150deg 180deg, #2ee59d 180deg 210deg, #111 210deg 240deg,
    #c41e2a 240deg 270deg, #111 270deg 300deg, #c41e2a 300deg 330deg, #111 330deg 360deg
  );
  animation: rouletteSpinShot 1.1s cubic-bezier(0.12, 0.8, 0.1, 1) infinite;
  box-shadow: 0 0 0 3px #c9a227, inset 0 0 12px rgba(0,0,0,0.4);
}
.shot-lucky7-win .shot-mid,
.shot-colorspin-win .shot-mid {
  border-radius: 50%; width: 44%; left: 28%; height: 58%; top: 16%;
  background: radial-gradient(circle at 50% 45%, #2ee59d, #0a3020 70%);
  box-shadow: 0 0 18px rgba(46, 229, 157, 0.45);
}
.shot-lucky7-win .shot-bot,
.shot-colorspin-win .shot-bot { background: #2ee59d; }
.shot-plinko-drop .shot-mid { width: 14%; left: 43%; height: 14%; top: 12%; border-radius: 50%; background: #fff; }
.shot-plinko-bounce .shot-mid {
  background: repeating-linear-gradient(180deg, transparent 0 12%, rgba(255,255,255,0.12) 12% 14%);
  height: 55%; top: 20%;
}
.shot-plinko-bounce .shot-mid::after {
  content: ""; position: absolute; width: 12%; left: 44%; top: 70%; height: 12%;
  border-radius: 50%; background: #f0c14b;
}
.shot-plinko-win .shot-bot,
.shot-hilo-win .shot-bot,
.shot-andar-win .shot-bot,
.shot-poker-win .shot-bot,
.shot-ocean-win .shot-bot,
.shot-draw-win .shot-bot,
.shot-dice-win .shot-bot,
.shot-coin-result .shot-bot,
.shot-teen-win .shot-bot,
.shot-wheel-win .shot-bot,
.shot-wheel-result .shot-bot,
.shot-mines-lock .shot-bot { background: #2ee59d; }
.shot-hilo-pick .shot-mid { width: 28%; left: 36%; height: 40%; top: 28%; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 2px #333; }
.shot-hilo-reveal .shot-mid { width: 28%; left: 36%; height: 40%; top: 28%; border-radius: 10px; background: #fff; animation: diceWobble 0.5s ease infinite; }
.shot-andar-bet .shot-bot,
.shot-poker-bet .shot-bot,
.shot-teen-bet .shot-bot { background: rgba(240,193,75,0.45); }
.shot-andar-reveal .shot-mid,
.shot-poker-reveal .shot-mid {
  background: linear-gradient(135deg, #1a3048, #e11d48);
  width: 30%; left: 20%; height: 48%; top: 22%;
  box-shadow: 40px 8px 0 #2a1820;
}
.shot-ocean-cast .shot-mid { background: linear-gradient(180deg, #0a2840, #1faa6e); height: 50%; top: 25%; }
.shot-ocean-hook .shot-mid { width: 22%; left: 39%; height: 28%; top: 36%; border-radius: 40% 40% 50% 50%; background: #3b82f6; }
.shot-draw-ticket .shot-mid { height: 28%; top: 36%; background: linear-gradient(90deg, #f0c14b, #e11d48); border-radius: 8px; }
.shot-draw-spin .shot-mid {
  border-radius: 50%; width: 48%; left: 26%; height: 62%; top: 14%;
  background: conic-gradient(#e11d48, #f0c14b, #2ee59d, #3b82f6, #e11d48);
  animation: tyreSpinShot 1.2s linear infinite;
}

/* ===== BN55-style lobby (Bn786 branded) ===== */
.announce-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(90deg, #2a1018, #1a0a10);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px 6px 8px;
  margin-bottom: 10px;
  overflow: hidden;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
}
.announce-bar:active { transform: scale(0.99); }
.announce-ico {
  flex: 0 0 auto;
  font-size: 1rem;
  filter: drop-shadow(0 0 4px rgba(240, 193, 75, 0.5));
}
.announce-track {
  overflow: hidden;
  flex: 1;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  pointer-events: none;
}
.announce-track span {
  display: inline-block;
  white-space: nowrap;
  color: #f5d0a8;
  font-size: 0.72rem;
  animation: announceScroll 28s linear infinite;
}
.announce-open-lab {
  flex: 0 0 auto;
  font-size: 0.65rem;
  font-weight: 800;
  color: #1a1000;
  background: linear-gradient(135deg, #f0c14b, #ff8a3d);
  border-radius: 999px;
  padding: 3px 8px;
}
@keyframes announceScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.carousel {
  position: relative;
  margin-bottom: 12px;
}
.carousel-track {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 118px;
}
.carousel-slide {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 16px;
  min-height: 118px;
  border: 1px solid var(--line);
  border-radius: 16px;
  animation: slideIn 0.35s ease;
}
.carousel-slide.active { display: flex; }
@keyframes slideIn {
  from { opacity: 0.4; transform: translateX(12px); }
  to { opacity: 1; transform: none; }
}
.carousel-slide small {
  display: block;
  color: var(--gold2);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  font-weight: 800;
}
.carousel-slide strong {
  display: block;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.35rem;
  margin: 2px 0;
}
.carousel-slide p {
  margin: 0;
  color: rgba(255, 246, 242, 0.82);
  font-size: 0.8rem;
}
.cs-art {
  font-size: 2.2rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35));
}
.cs1 { background: linear-gradient(120deg, #8b1528, #3a0c12 55%, #5a3010); }
.cs2 { background: linear-gradient(120deg, #1a3a5a, #0c1a2a 60%, #3a1520); }
.cs3 { background: linear-gradient(120deg, #5a1a4a, #2a0a18 55%, #4a2810); }
.cs4 { background: linear-gradient(120deg, #3a1820, #1a0a10); }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.cdot {
  width: 18px;
  height: 4px;
  border: 0;
  border-radius: 4px;
  background: rgba(255,255,255,0.28);
  padding: 0;
  cursor: pointer;
}
.cdot.active { background: #5ee7ff; box-shadow: 0 0 8px rgba(94, 231, 255, 0.55); }

.jackpot-board {
  position: relative;
  border-radius: 14px;
  padding: 16px 12px 14px;
  margin-bottom: 14px;
  background:
    radial-gradient(circle at 78% 40%, rgba(225, 29, 46, 0.45), transparent 42%),
    linear-gradient(180deg, #1a2838, #0e1620);
  border: 1px solid rgba(240, 193, 75, 0.35);
  overflow: hidden;
  text-align: center;
}
.jp-plane {
  position: absolute;
  right: 18px;
  top: 10px;
  font-size: 2rem;
  opacity: 0.85;
  animation: planeBob 2.4s ease-in-out infinite;
}
@keyframes planeBob {
  0%, 100% { transform: translateY(0) rotate(-8deg); }
  50% { transform: translateY(-6px) rotate(-4deg); }
}
.jp-label {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  background: linear-gradient(180deg, #ffe08a, #f0c14b 50%, #c9a227);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 0 rgba(0,0,0,0.25);
  margin-bottom: 8px;
}
.jp-digits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: 3px;
}
.jp-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 32px;
  padding: 0 4px;
  background: #fff;
  color: #111;
  border-radius: 5px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 2px 0 #c9a227, inset 0 -1px 0 rgba(0,0,0,0.08);
}
.jp-box.jp-rs {
  background: linear-gradient(180deg, #fff8e0, #ffe08a);
  color: #5a3a00;
  font-size: 0.85rem;
  min-width: 28px;
}
.jp-comma {
  color: #f0c14b;
  font-weight: 800;
  font-size: 1.1rem;
  padding: 0 1px 4px;
}

.shelf-block { margin-bottom: 16px; }
.shelf-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.shelf-head h2 {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.28rem;
  font-weight: 800;
  color: #7ef0ff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-shadow: 0 0 18px rgba(94, 231, 255, 0.35);
  position: relative;
  padding-left: 10px;
}
.shelf-head h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #7ef0ff, #3aa0ff);
  box-shadow: 0 0 10px rgba(94, 231, 255, 0.55);
}
.shelf-controls { display: flex; gap: 6px; align-items: center; }
.shelf-more, .shelf-arrow {
  border: 1px solid rgba(126, 240, 255, 0.22);
  background: linear-gradient(180deg, #243840, #152028);
  color: #d8f6ff;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}
.shelf-more:active, .shelf-arrow:active { transform: scale(0.96); }
.shelf-arrow { padding: 5px 9px; font-size: 0.95rem; }
.shelf-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.shelf-row::-webkit-scrollbar { display: none; }
.shelf-tile {
  flex: 0 0 118px;
  scroll-snap-align: start;
  position: relative;
  border: 0;
  border-radius: 16px;
  min-height: 152px;
  padding: 28px 10px 12px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 8px 18px rgba(0, 0, 0, 0.35);
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.shelf-tile:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.2),
    0 4px 10px rgba(0, 0, 0, 0.4);
}
.shelf-tile .tile-emoji {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto 10px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 1.75rem;
}
.shelf-tile .tile-name {
  font-size: 0.98rem;
  text-align: center;
}
.shelf-tile .tile-cat {
  text-align: center;
  color: rgba(255, 246, 242, 0.72);
}
.fav-heart {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #fff;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.fav-heart.on {
  color: #ff5a6a;
  background: rgba(40, 8, 14, 0.72);
  border-color: rgba(255, 90, 106, 0.55);
}
.tile .fav-heart { top: 6px; right: 6px; }

.home-profile-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 190, 120, 0.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 12% 40%, rgba(240, 193, 75, 0.18), transparent 45%),
    linear-gradient(120deg, #2a1018, #1a0a10 55%, #241018);
  color: #fff6f2;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28);
}
.home-profile-chip:active { transform: scale(0.99); }
.home-profile-av {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #1a1000;
  background: linear-gradient(145deg, #ffe08a, #f0c14b);
  box-shadow: 0 0 0 2px rgba(240, 193, 75, 0.35);
  flex: 0 0 auto;
}
.home-profile-meta { flex: 1; min-width: 0; }
.home-profile-meta strong {
  display: block;
  font-family: "Rajdhani", sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  font-weight: 700;
}
.home-profile-meta span {
  display: block;
  font-size: 0.72rem;
  color: rgba(255, 220, 190, 0.78);
}
.home-profile-cta {
  flex: 0 0 auto;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a1000;
  background: linear-gradient(135deg, #f0c14b, #ff8a3d);
  border-radius: 999px;
  padding: 7px 10px;
}

.rich-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 140px;
  border-radius: 14px;
  transition: transform 0.3s ease;
}
.rich-stage.spinning { animation: richPulse 0.4s ease infinite alternate; }
@keyframes richPulse {
  from { transform: scale(0.98); filter: brightness(1); }
  to { transform: scale(1.03); filter: brightness(1.15); }
}
.rich-emoji { font-size: 2.6rem; }
.rich-title { font-family: "Rajdhani", sans-serif; font-weight: 800; font-size: 1.2rem; }

.lobby-footer {
  margin-top: 22px;
  padding: 18px 8px 12px;
  border-top: 1px solid rgba(255,190,120,0.18);
  background: linear-gradient(180deg, rgba(0,40,36,0.35), rgba(10,4,8,0.2));
  border-radius: 14px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.4fr auto;
  gap: 14px;
  align-items: start;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 14px;
}
.lobby-footer h3 {
  margin: 0 0 8px;
  color: #ff9a4a;
  font-family: "Rajdhani", sans-serif;
  font-size: 1rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.footer-links button,
.footer-links-mini button {
  border: 0;
  background: transparent;
  color: #fff;
  padding: 2px 0;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  opacity: 0.88;
}
.footer-links-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  max-width: 140px;
  justify-content: flex-end;
}
.footer-about p {
  margin: 0 0 8px;
  color: rgba(255,246,242,0.78);
  font-size: 0.74rem;
  line-height: 1.45;
}
.footer-about-ur {
  font-size: 0.78rem !important;
  color: rgba(255, 220, 160, 0.88) !important;
}
.footer-brand p {
  margin: 0 0 10px;
  color: rgba(255,246,242,0.75);
  font-size: 0.75rem;
  line-height: 1.4;
}
.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
.footer-logo {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px solid #f0c14b;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  color: #f0c14b;
  background:
    radial-gradient(circle at 30% 28%, #3a2810, #14060a 70%),
    conic-gradient(from 200deg, #5a3a10, #1a0a08, #5a3a10);
  box-shadow: 0 0 0 3px rgba(240,193,75,0.18), inset 0 0 12px rgba(240,193,75,0.15);
}
.footer-crown {
  font-size: 0.95rem;
  line-height: 1;
  color: #ffe08a;
  text-shadow: 0 0 6px rgba(240,193,75,0.5);
}
.footer-logo-text {
  font-size: 0.52rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-align: center;
  max-width: 58px;
  color: #ffb84a;
}
.footer-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.footer-action {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffe08a;
  cursor: pointer;
  background: linear-gradient(180deg, #0d3d38, #062420);
  box-shadow: inset 0 0 0 1px rgba(240,193,75,0.35);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.footer-action:active { filter: brightness(1.1); }
.footer-social { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.footer-social a, .age-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  color: #fff;
  background: #1877f2;
}
.footer-social a[aria-label="Telegram"] { background: #29a8eb; }
.footer-social a[aria-label="WhatsApp"] { background: #25d366; }
.age-badge {
  background: #fff;
  color: #c62828;
  border: 2px solid #c62828;
  width: auto;
  min-width: 28px;
  padding: 0 6px;
  font-size: 0.62rem;
}
.provider-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,190,120,0.14);
}
.provider-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 4px 5px;
  border-radius: 6px;
  background: rgba(0,0,0,0.28);
  color: var(--pc, #f0c14b);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.2);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-align: center;
  text-transform: uppercase;
  font-family: "Rajdhani", sans-serif;
}
.provider-chip i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pc, #f0c14b);
  box-shadow: 0 0 6px var(--pc, #f0c14b);
  flex: 0 0 auto;
}

/* ===== Announcement modal (Bn786) ===== */
.an-backdrop {
  position: fixed;
  inset: 0;
  z-index: 220;
  background: rgba(0, 8, 10, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px 72px;
  animation: anFadeIn 0.25s ease;
}
@keyframes anFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.an-modal {
  position: relative;
  width: min(440px, 100%);
  max-height: min(78vh, 620px);
  background: linear-gradient(165deg, #0a3d3f 0%, #063032 45%, #042426 100%);
  border-radius: 14px;
  border: 1px solid rgba(120, 220, 210, 0.22);
  box-shadow: 0 18px 48px rgba(0,0,0,0.55);
  overflow: hidden;
  animation: anPop 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes anPop {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.an-x {
  position: absolute;
  top: -6px;
  left: -6px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: #f5d000;
  color: #111;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.an-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 2;
  background: #1e5cff;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 4px;
}
.an-layout {
  display: grid;
  grid-template-columns: 1fr 118px;
  min-height: 360px;
  max-height: min(78vh, 620px);
}
.an-main {
  padding: 28px 12px 14px 14px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #5ee7ff transparent;
}
.an-main::-webkit-scrollbar { width: 3px; }
.an-main::-webkit-scrollbar-thumb { background: #5ee7ff; border-radius: 3px; }
.an-title {
  margin: 0 0 10px;
  color: #7eb6ff;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
  font-family: "Rajdhani", sans-serif;
}
.an-body {
  margin: 10px 0 12px;
  padding: 10px;
  background: rgba(255,255,255,0.94);
  color: #1a2030;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.55;
  max-height: 140px;
  overflow-y: auto;
}
.an-ok {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 12px 16px;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  color: #1a1000;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe34a, #f0c000);
  box-shadow: 0 4px 0 #b89200;
}
.an-ok:active { transform: translateY(2px); box-shadow: 0 2px 0 #b89200; }
.an-tabs {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.22);
  border-left: 1px solid rgba(0,0,0,0.25);
  overflow-y: auto;
  max-height: min(78vh, 620px);
}
.an-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.28);
  background: transparent;
  color: #d7ecff;
  padding: 12px 8px;
  font: inherit;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
}
.an-tab i {
  color: #ff5a3d;
  font-style: normal;
  font-size: 0.7rem;
  text-shadow: 0 0 4px #f5d000;
  flex: 0 0 auto;
}
.an-tab.active {
  background: linear-gradient(180deg, #ffe34a, #f0b400);
  color: #0a2840;
}
.an-tab.active i { color: #c62828; }

.an-banner {
  position: relative;
  height: 112px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
}
.an-banner-art { position: absolute; inset: 0; pointer-events: none; }
.an-banner-brand {
  position: absolute;
  top: 8px;
  left: 10px;
  z-index: 2;
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  color: #ffe08a;
  letter-spacing: 0.04em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(10, 6, 8, 0.55);
  border: 1px solid rgba(240,193,75,0.45);
}
.an-banner-copy {
  position: absolute;
  left: 12px;
  bottom: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.an-banner-copy strong {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.an-banner-copy span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe08a;
}
.an-coin {
  position: absolute;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffe9a0, #d4a017 55%, #8a5a00);
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.25), 0 2px 6px rgba(0,0,0,0.3);
  animation: anFloat 2.8s ease-in-out infinite;
}
.an-coin-a { top: 18px; right: 48px; }
.an-coin-b { bottom: 16px; right: 22px; width: 20px; height: 20px; animation-delay: 0.6s; }
.an-gift {
  position: absolute;
  right: 70px;
  bottom: 18px;
  width: 34px;
  height: 28px;
  border-radius: 4px;
  background: linear-gradient(180deg, #3b82f6, #1d4ed8);
  box-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.an-gift::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -8px;
  width: 18px;
  height: 12px;
  transform: translateX(-50%);
  border-radius: 8px 8px 2px 2px;
  background: #2563eb;
}
.an-gift::after {
  content: "";
  position: absolute;
  inset: 0 40% 0 40%;
  background: #f0c14b;
}
.an-spark {
  position: absolute;
  top: 22px;
  right: 18px;
  width: 10px;
  height: 10px;
  background: #fff;
  clip-path: polygon(50% 0, 61% 35%, 100% 50%, 61% 65%, 50% 100%, 39% 65%, 0 50%, 39% 35%);
  animation: anTwinkle 1.4s ease-in-out infinite;
}
@keyframes anFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes anTwinkle {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
.an-banner--tournament {
  background:
    linear-gradient(120deg, rgba(8,40,20,0.2), rgba(0,0,0,0.15)),
    repeating-linear-gradient(90deg, #0d5c2e 0 8px, #0a4a24 8px 16px);
}
.an-banner--jazz {
  background: linear-gradient(135deg, #5a0018, #c4002b 45%, #2a0a10);
}
.an-banner--wheel {
  background:
    radial-gradient(circle at 78% 50%, rgba(255,200,60,0.35), transparent 40%),
    conic-gradient(from 20deg, #7c2d12, #f0c14b, #7c2d12, #f59e0b, #7c2d12);
}
.an-banner--referral {
  background: linear-gradient(145deg, #1e3a5f, #0f766e 50%, #134e4a);
}
.an-banner--members {
  background: linear-gradient(135deg, #4a1942, #7c3aed 40%, #1e1b4b);
}
.an-banner--gifts {
  background: linear-gradient(135deg, #064e3b, #059669 50%, #022c22);
}

@media (max-width: 420px) {
  .an-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .an-tabs {
    order: -1;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    border-left: 0;
    border-bottom: 1px solid rgba(0,0,0,0.28);
  }
  .an-tab {
    flex: 0 0 auto;
    min-width: 118px;
    border-bottom: 0;
    border-right: 1px solid rgba(0,0,0,0.28);
    padding: 10px 8px;
  }
  .an-main { max-height: min(58vh, 480px); }
  .footer-top { grid-template-columns: 1fr; }
  .footer-brand-col { align-items: flex-start; }
  .footer-links-mini { max-width: none; justify-content: flex-start; }
}

/* Floating quick dock + rewards — RETIRED: orange X never shown anywhere */
#gbQuickDock,
.gb-quick-dock,
.gb-dock-toggle,
body.gb-in-game #gbQuickDock,
body.gb-in-game .gb-quick-dock,
body.gb-in-game .gb-dock-toggle,
body.gb-slot-fs #gbQuickDock,
body.gb-slot-fs .gb-quick-dock,
body.gb-land-game #gbQuickDock,
body.gb-land-game .gb-quick-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}
.gb-quick-dock {
  position: fixed;
  right: max(8px, calc(50% - 240px + 8px));
  top: 50%;
  transform: translateY(-40%);
  z-index: 80;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.gb-dock-toggle {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 0;
  background: #ff8a3d;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}
.gb-dock-rail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 8px;
  background: rgba(10, 6, 10, 0.72);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.gb-quick-dock.collapsed .gb-dock-rail { display: none; }
.gb-dock-btn {
  position: relative;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  padding: 0;
}
.dock-ico {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.dock-ico.cal { background: linear-gradient(160deg, #7b5cff, #3a1a6a); }
.dock-ico.tg { background: #29a8eb; color: #fff; }
.dock-ico.trophy { background: linear-gradient(160deg, #ffe08a, #c9a227); }
.dock-ico.wa { background: #25d366; }
.dock-ico.chest { background: linear-gradient(160deg, #8b5a2b, #3a2010); }
.dock-ico.feat { background: linear-gradient(160deg, #2a1018, #14060a); color: #f0c14b; border: 1px solid #f0c14b; }
.dock-dot {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff3b4a;
  border: 1px solid #fff;
}

.gb-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.62);
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}
.gb-modal {
  position: relative;
  width: min(360px, 100%);
  background: #2a2a2e;
  border-radius: 14px;
  padding: 22px 18px 16px;
  color: #fff;
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.gb-modal.wide { width: min(400px, 100%); }
.gb-modal h3 {
  margin: 0 0 8px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.25rem;
  text-align: center;
}
.gb-modal p { margin: 0 0 12px; text-align: center; color: rgba(255,255,255,0.85); font-size: 0.9rem; line-height: 1.4; }
.gb-modal-x {
  position: absolute;
  top: 8px;
  right: 10px;
  border: 0;
  background: transparent;
  color: #aaa;
  font-size: 1.4rem;
  cursor: pointer;
}
.gb-modal-ico {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: 800;
}
.gb-modal-ico.warn {
  background: #f0c14b;
  color: #1a1000;
  border-radius: 8px;
  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
  width: 52px;
  height: 48px;
  padding-top: 14px;
  font-size: 1.1rem;
}
.gb-modal-ico.claim { background: rgba(46, 229, 157, 0.15); }
.gb-deposit-status {
  background: rgba(0,0,0,0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  line-height: 1.6;
}
.treasure-list, .lb-list { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow: auto; }
.treasure-row, .lb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
  padding: 10px;
}
.treasure-row strong, .lb-name { display: block; font-size: 0.9rem; }
.treasure-row small { color: #f0c14b; font-size: 0.75rem; }
.treasure-ico { font-size: 1.4rem; }
.tag { font-size: 0.72rem; color: #aaa; }
.tag.done { color: #2ee59d; }
.tag.wait { color: #f0c14b; }
.lb-rank { width: 32px; color: #f0c14b; font-weight: 800; }
.lb-amt { margin-left: auto; color: #ffe08a; font-size: 0.85rem; }

.gb-msg-toast {
  position: fixed;
  right: max(12px, calc(50% - 240px + 12px));
  bottom: calc(var(--nav-h) + 16px);
  width: min(280px, calc(100vw - 24px));
  background: #ececec;
  color: #222;
  border-radius: 10px;
  padding: 10px 12px;
  z-index: 90;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  animation: msgIn 0.35s ease;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
.gb-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  font-size: 0.85rem;
}
.gb-msg-min {
  border: 0;
  background: #ff8a3d;
  color: #fff;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-weight: 800;
}
.gb-msg-body { font-size: 0.78rem; line-height: 1.35; }
.gb-msg-goto {
  border: 0;
  background: transparent;
  color: #1a73e8;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
}

.toast {
  z-index: 130;
  background: rgba(20, 6, 10, 0.94);
  border: 1px solid rgba(240, 193, 75, 0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.4);
}

/* ===== Personal Center (Bn786) ===== */
.pc-backdrop {
  position: fixed;
  inset: 0;
  z-index: 160;
  background: rgba(4, 2, 6, 0.72);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 10px;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.pc-backdrop.show { opacity: 1; }
.pc-shell {
  width: min(980px, 100%);
  max-height: min(92vh, 820px);
  display: grid;
  grid-template-columns: 200px 1fr;
  background: #f4f6f8;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  animation: pcIn 0.35s cubic-bezier(.2,.8,.2,1);
  color: #1a1214;
}
@keyframes pcIn {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.pc-side {
  background:
    radial-gradient(180px 120px at 20% 0%, rgba(225,29,46,0.35), transparent 70%),
    linear-gradient(180deg, #1a3a3a 0%, #0f2428 55%, #0a181c 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.pc-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(-18deg, transparent, transparent 18px, rgba(255,255,255,0.03) 18px, rgba(255,255,255,0.03) 19px);
  pointer-events: none;
}
.pc-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 14px 10px;
  position: relative;
  z-index: 1;
}
.pc-side-head strong {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
}
.pc-close {
  border: 0;
  background: #e11d2e;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.45rem;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(225, 29, 46, 0.45);
  -webkit-tap-highlight-color: transparent;
}
.pc-close:active { transform: scale(0.94); }
.pc-topbar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: linear-gradient(180deg, #1a1214 0%, #2a1018 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 190, 120, 0.2);
  position: sticky;
  top: 0;
  z-index: 5;
  flex-shrink: 0;
}
.pc-topbar-mid {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.pc-topbar-title {
  flex: none;
  display: block;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.1rem;
  letter-spacing: 0.03em;
  font-weight: 700;
}
.pc-topbar-name {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  color: #c9a27a;
  text-align: center;
  margin-top: 1px;
}
.pc-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.pc-back-arrow { font-size: 1.15rem; line-height: 1; }
.pc-close-fab {
  width: 44px;
  height: 44px;
  font-size: 1.75rem;
  font-weight: 700;
  border: 2px solid #ffe08a;
}
.pc-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 8px 12px;
  position: relative;
  z-index: 1;
  overflow: auto;
  flex: 1;
}
.pc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.88);
  text-align: left;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pc-nav-item.on {
  background: rgba(244,246,248,0.92);
  color: #1a1214;
  font-weight: 700;
}
.pc-nav-ico { width: 18px; text-align: center; opacity: 0.9; }
.pc-badge {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #e11d2e;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pc-side-brand {
  padding: 10px 14px 14px;
  font-family: "Rajdhani", sans-serif;
  font-weight: 700;
  color: #f0c14b;
  letter-spacing: 0.06em;
  position: relative;
  z-index: 1;
}
.pc-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f7f8fa;
}
.pc-mobile-tabs {
  display: none;
  gap: 4px;
  padding: 8px 8px 0;
  overflow-x: auto;
}
.pc-mtab {
  flex: 0 0 auto;
  border: 0;
  background: #fff;
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  position: relative;
}
.pc-mtab.on { background: #e11d2e; color: #fff; }
.pc-mtab i {
  font-style: normal;
  margin-left: 4px;
  background: #fff;
  color: #e11d2e;
  border-radius: 999px;
  padding: 0 5px;
  font-size: 0.65rem;
}
.pc-body {
  flex: 1;
  overflow: auto;
  padding: 12px 14px 18px;
}
.pc-panel-head h2 {
  margin: 0 0 4px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.35rem;
  color: #1a1214;
}
.pc-panel-head p { margin: 0 0 12px; color: #777; font-size: 0.85rem; }
.pc-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  border-bottom: 1px solid #e4e6ea;
  margin-bottom: 12px;
}
.pc-subtabs.right { margin-left: auto; }
.pc-stab {
  border: 0;
  background: transparent;
  padding: 8px 2px 10px;
  font-size: 0.82rem;
  color: #777;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.pc-stab.on { color: #e11d2e; font-weight: 700; border-bottom-color: #e11d2e; }
.pc-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.pc-stat {
  border-radius: 10px;
  padding: 12px 10px;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 72px;
  box-shadow: 0 6px 14px rgba(20,40,80,0.12);
}
.pc-stat.blue { background: linear-gradient(145deg, #5b8def, #3a6fd8); }
.pc-stat.purple { background: linear-gradient(145deg, #8b6cf0, #5b49c9); }
.pc-stat span { font-size: 0.72rem; opacity: 0.92; }
.pc-stat strong { font-size: 1.05rem; font-weight: 800; }
.pc-invite-row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}
.pc-est-card {
  background: linear-gradient(135deg, #4f7cf0, #7a5ce8 55%, #9a4fd4);
  border-radius: 12px;
  padding: 16px;
  color: #fff;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
  min-height: 140px;
}
.pc-est-card::after {
  content: "";
  position: absolute;
  right: -20px;
  bottom: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
}
.pc-est-ico { font-size: 1.8rem; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.25)); }
.pc-est-card span { display: block; font-size: 0.85rem; opacity: 0.9; }
.pc-est-card strong { display: block; font-size: 1.55rem; margin: 4px 0 8px; }
.pc-est-card em { font-style: italic; font-size: 0.72rem; opacity: 0.85; line-height: 1.35; }
.pc-status-card {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  border: 1px solid #e8eaee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.pc-status-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.pc-l1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #ffe08a, transparent 50%),
    linear-gradient(160deg, #2a1018, #5a2030);
  color: #ffe08a;
  font-family: "Rajdhani", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  box-shadow: 0 0 0 3px rgba(240,193,75,0.35);
  animation: pcPulse 2.4s ease-in-out infinite;
}
@keyframes pcPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(240,193,75,0.35); }
  50% { box-shadow: 0 0 0 6px rgba(225,29,46,0.25); }
}
.pc-rules-btn {
  border: 0;
  background: #f3f4f7;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 0.72rem;
  cursor: pointer;
  color: #444;
}
.pc-prog { margin-bottom: 8px; }
.pc-prog-lab {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: #666;
  margin-bottom: 3px;
}
.pc-bar {
  height: 7px;
  background: #e8eaee;
  border-radius: 999px;
  overflow: hidden;
}
.pc-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e11d2e, #f0c14b);
  border-radius: 999px;
  transition: width 0.4s ease;
}
.pc-bar.thin { height: 5px; margin-top: 6px; }
.pc-bar.tall { height: 12px; margin: 12px 0; }
.pc-disc-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: #888;
  margin: 8px 0;
}
.pc-cta-bar {
  background: linear-gradient(90deg, #ff5a7a, #ff8a93);
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 8px;
  font-size: 0.8rem;
  font-weight: 700;
}
.pc-share-block h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: #222;
}
.pc-share-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}
.pc-qr {
  width: 88px;
  height: 88px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 6px;
  flex-shrink: 0;
}
.pc-qr-svg { width: 100%; height: 100%; display: block; }
.pc-share-tools { flex: 1; min-width: 0; }
.pc-link-box {
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 8px;
}
.pc-link-box input {
  flex: 1;
  border: 0;
  padding: 10px 12px;
  font-size: 0.78rem;
  background: transparent;
  color: #333;
  min-width: 0;
}
.pc-copy {
  border: 0;
  background: linear-gradient(135deg, #7a5ce8, #5b49c9);
  color: #fff;
  width: 42px;
  height: 38px;
  cursor: pointer;
  font-size: 1.1rem;
}
.pc-socials { display: flex; flex-wrap: wrap; gap: 6px; }
.pc-soc {
  text-decoration: none;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 999px;
}
.pc-soc.wa { background: #25d366; }
.pc-soc.tg { background: #29a8eb; }
.pc-soc.fb { background: #1877f2; }
.pc-ticker-wrap {
  background: #fff;
  border: 1px solid #e8eaee;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.pc-ticker-label {
  font-size: 0.72rem;
  color: #888;
  margin-bottom: 6px;
  font-weight: 700;
}
.pc-ticker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 72px;
  overflow: hidden;
}
.pc-ticker-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 0.78rem;
  animation: tickerIn 0.4s ease;
  color: #444;
}
.pc-ticker-item em { color: #888; font-style: normal; }
.pc-ticker-item strong { margin-left: auto; color: #e11d2e; }
@keyframes tickerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.pc-income-global h3 {
  margin: 0 0 10px;
  font-size: 1rem;
}
.pc-global-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.pc-gcard {
  background: #fff;
  border-radius: 10px;
  border: 1px solid #e8eaee;
  padding: 10px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.pc-gico { font-size: 1.4rem; }
.pc-gcard strong { display: block; font-size: 0.78rem; color: #555; }
.pc-gcard b { display: block; font-size: 0.95rem; color: #1a1214; margin: 2px 0; }
.pc-gcard em { font-style: normal; font-size: 0.7rem; color: #999; }
.pc-reward-list, .pc-mission-list, .pc-record-list, .pc-msg-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pc-reward-row, .pc-mission-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e8eaee;
  border-radius: 10px;
  padding: 10px 12px;
}
.pc-reward-info, .pc-mission-row > div:first-child { flex: 1; min-width: 0; }
.pc-reward-info strong, .pc-mission-row strong { display: block; font-size: 0.9rem; }
.pc-reward-info small, .pc-mission-row small { color: #888; font-size: 0.72rem; }
.pc-reward-ico { font-size: 1.4rem; }
.pc-pill {
  display: inline-block;
  font-style: normal;
  font-size: 0.62rem;
  background: #e11d2e;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  vertical-align: middle;
  margin-left: 4px;
}
.pc-tag { font-size: 0.72rem; color: #999; white-space: nowrap; }
.pc-tag.done { color: #1a9b6a; font-weight: 700; }
.pc-tag.wait { color: #b8860b; }
.pc-mission-top {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-end;
  margin-bottom: 4px;
}
.pc-mission-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;
  gap: 12px;
}
.pc-mission-left, .pc-mission-right { min-width: 0; }
.pc-mission-right.hidden { display: none; }
.pc-wallet-card {
  background: linear-gradient(135deg, #6a4de8, #3d2db8);
  color: #fff;
  border-radius: 12px;
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}
.pc-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f0c14b, #e11d2e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 1.2rem;
  border: 2px solid rgba(255,255,255,0.5);
}
.pc-wallet-card span { display: block; font-size: 0.72rem; opacity: 0.85; }
.pc-wallet-card b { display: block; font-size: 1.15rem; }
.pc-mile-card {
  background: #eef0f4;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  font-size: 0.8rem;
  color: #555;
}
.pc-mile-head { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.pc-medal { font-size: 1.6rem; }
.pc-mini-btn {
  border: 0;
  background: #5b8def;
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 0.68rem;
  cursor: pointer;
  margin-left: 6px;
}
.pc-podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  background:
    radial-gradient(120% 80% at 50% 100%, #6a4de8 0%, #3d2db8 45%, transparent 70%);
  border-radius: 16px 16px 0 0;
  padding: 20px 8px 16px;
  min-height: 220px;
  margin-bottom: 8px;
}
.pc-pod {
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  width: 30%;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  animation: podUp 0.5s ease both;
}
.pc-pod.p1 { order: 2; transform: translateY(-12px); animation-delay: 0.1s; }
.pc-pod.p2 { order: 1; animation-delay: 0.2s; }
.pc-pod.p3 { order: 3; animation-delay: 0.3s; }
@keyframes podUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: none; }
}
.pc-pod.p1 { animation-name: podUp1; }
@keyframes podUp1 {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(-12px); }
}
.pc-pod-av {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #1a1214;
  border: 3px solid #ccc;
}
.pc-pod-av.gold { border-color: #f0c14b; background: #ffe08a; width: 56px; height: 56px; }
.pc-pod-av.silver { border-color: #c0c5ce; background: #e8eaee; }
.pc-pod-av.bronze { border-color: #c47a3a; background: #f0d0b0; }
.pc-pod strong { display: block; font-size: 0.78rem; }
.pc-pod span { font-size: 0.65rem; color: #888; }
.pc-pod b { display: block; font-size: 0.72rem; color: #e11d2e; word-break: break-all; }
.pc-gift { position: absolute; top: -8px; right: -4px; font-size: 1.1rem; animation: giftBob 1.6s ease-in-out infinite; }
@keyframes giftBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.pc-lb-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow: auto; }
.pc-lb-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #e8eaee;
}
.pc-lb-rank { width: 22px; font-weight: 800; color: #888; }
.pc-lb-av {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f0c14b, #e11d2e);
}
.pc-lb-row strong { display: block; font-size: 0.82rem; }
.pc-lb-row small { color: #888; font-size: 0.7rem; }
.pc-lb-row > div { flex: 1; }
.pc-gift-btn {
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  cursor: pointer;
}
.pc-mile-big {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e8eaee;
}
.pc-rec {
  display: flex;
  justify-content: space-between;
  background: #fff;
  border: 1px solid #e8eaee;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.9rem;
}
.pc-pnl-hero {
  border-radius: 12px;
  padding: 20px;
  text-align: center;
  margin-bottom: 12px;
  color: #fff;
}
.pc-pnl-hero.up { background: linear-gradient(135deg, #1a9b6a, #2ee59d); }
.pc-pnl-hero.down { background: linear-gradient(135deg, #a01020, #e11d2e); }
.pc-pnl-hero span { display: block; font-size: 0.85rem; opacity: 0.9; }
.pc-pnl-hero strong { font-size: 1.8rem; font-family: "Rajdhani", sans-serif; }
.pc-rec .up, .up { color: #1a9b6a; }
.pc-rec .down, .down { color: #e11d2e; }
.pc-msg-row {
  display: flex;
  gap: 10px;
  text-align: left;
  width: 100%;
  border: 1px solid #e8eaee;
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  cursor: pointer;
}
.pc-msg-row.unread { border-color: #f0c14b; box-shadow: 0 0 0 1px rgba(240,193,75,0.35); }
.pc-msg-row strong { display: block; font-size: 0.9rem; margin-bottom: 4px; }
.pc-msg-row p { margin: 0; font-size: 0.78rem; color: #666; line-height: 1.35; }
.pc-msg-row time { font-size: 0.7rem; color: #999; white-space: nowrap; }
.pc-empty { color: #888; font-size: 0.85rem; padding: 12px; }
.pc-empty-rich {
  text-align: center;
  padding: 22px 16px 18px;
  border: 1px dashed #e0e3e8;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 0%, rgba(225, 29, 46, 0.08), transparent 55%),
    #fafbfc;
  margin-top: 4px;
}
.pc-empty-ico {
  width: 56px;
  height: 56px;
  margin: 0 auto 10px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  background: linear-gradient(145deg, #fff4e8, #ffe0c8);
  box-shadow: inset 0 0 0 1px rgba(240, 193, 75, 0.35);
}
.pc-empty-rich strong {
  display: block;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.15rem;
  color: #1a1214;
  margin-bottom: 4px;
}
.pc-empty-rich p {
  margin: 0 0 14px;
  color: #777;
  font-size: 0.82rem;
  line-height: 1.4;
}
.pc-empty-tips {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
  display: grid;
  gap: 6px;
}
.pc-empty-tips li {
  font-size: 0.78rem;
  color: #555;
  background: #fff;
  border: 1px solid #eceef2;
  border-radius: 10px;
  padding: 8px 10px;
}
.pc-rules-panel {
  background: #fff;
  border: 1px solid #e8eaee;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.06);
}
.pc-rules-panel h3 {
  margin: 0 0 6px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.25rem;
  color: #1a1214;
}
.pc-rules-lead {
  margin: 0 0 14px;
  color: #777;
  font-size: 0.82rem;
  line-height: 1.4;
}
.pc-rule-block {
  border: 1px solid #eef0f4;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: linear-gradient(180deg, #fff, #fafbfd);
}
.pc-rule-block:last-child { margin-bottom: 0; }
.pc-rule-block h4 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: #e11d2e;
  font-family: "Rajdhani", sans-serif;
  letter-spacing: 0.02em;
}
.pc-rule-block ul {
  margin: 0;
  padding-left: 18px;
  color: #444;
  font-size: 0.8rem;
  line-height: 1.45;
}
.pc-rule-block li { margin-bottom: 4px; }
.pc-rules-foot {
  margin: 12px 0 0;
  font-size: 0.75rem;
  color: #888;
  text-align: center;
}
.pc-entry {
  margin-top: 12px;
  display: grid;
  gap: 8px;
}
.btn-sm { padding: 8px 12px; font-size: 0.78rem; border-radius: 8px; }

@media (max-width: 760px) {
  .pc-backdrop {
    bottom: var(--nav-h);
    padding: 0;
    align-items: stretch;
  }
  .pc-shell {
    grid-template-columns: 1fr;
    max-height: none;
    height: 100%;
    width: 100%;
    border-radius: 0;
  }
  .pc-side { display: none; }
  .pc-topbar { display: flex; }
  .pc-mobile-tabs { display: flex; }
  .pc-stat-grid { grid-template-columns: 1fr 1fr; }
  .pc-invite-row, .pc-mission-layout, .pc-global-grid { grid-template-columns: 1fr; }
  .pc-podium { min-height: 200px; }
  /* Bottom nav stays visible below PC; PC itself must stay above for tab taps */
  .bottomnav { z-index: 150; }
  .pc-backdrop { z-index: 160; }
}

@media (max-width: 380px) {
  .jp-box { min-width: 18px; height: 28px; font-size: 0.95rem; }
  .footer-grid { grid-template-columns: 1fr; }
  .provider-grid { grid-template-columns: repeat(3, 1fr); }
  .gb-quick-dock { transform: translateY(-35%) scale(0.92); transform-origin: right center; }
}

/* ===== Quick / themed game stages ===== */
.gs-stage {
  position: relative;
  min-height: 200px;
  margin: 12px 0;
  padding: 16px 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,190,120,0.22);
  background: linear-gradient(160deg, #2a1018 0%, #14060a 55%, #1a0c14 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  visibility: visible;
  opacity: 1;
}
body.gb-busy .bottomnav .nav-item,
body.gb-busy [data-action="back"] {
  opacity: 0.45;
  pointer-events: none;
}
.gs-stage.playing { box-shadow: inset 0 0 40px rgba(255,138,61,0.12); }
.gs-stage.settled.win { box-shadow: inset 0 0 36px rgba(46,229,157,0.18); }
.gs-stage.settled.lose { box-shadow: inset 0 0 36px rgba(225,29,46,0.16); }
.gs-status {
  font-family: Rajdhani, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: #ffe08a;
  text-align: center;
  min-height: 1.2em;
}
.gs-mult {
  font-family: Rajdhani, sans-serif;
  font-weight: 800;
  font-size: 1.8rem;
  color: #2ee59d;
  text-shadow: 0 0 18px rgba(46,229,157,0.35);
  z-index: 3;
}
.skin-rocket .gs-mult {
  position: absolute;
  top: 10px;
  right: 12px;
}
.gs-reels { display: flex; gap: 10px; perspective: 420px; }
.gs-sym {
  width: 64px; height: 74px; display: grid; place-items: center; font-size: 2rem;
  background: linear-gradient(180deg, #3a1824, #201018);
  border: 1px solid rgba(255,190,120,0.28); border-radius: 12px;
  box-shadow: inset 0 -8px 16px rgba(0,0,0,0.35);
}
.gs-sym.spin { animation: gsReelBlur 0.12s linear infinite; }
.gs-sym.land { animation: gsLand 0.35s ease; }
@keyframes gsReelBlur {
  from { filter: blur(0.5px); transform: translateY(-4px); }
  to { filter: blur(1.5px); transform: translateY(4px); }
}
@keyframes gsLand { from { transform: scale(1.15); } to { transform: scale(1); } }

.skin-rocket .gs-sky {
  position: relative; width: 100%; height: 160px; display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(80,40,120,0.45), transparent 60%),
    linear-gradient(180deg, #1a2848 0%, #0c1422 70%);
  border-radius: 12px;
  overflow: hidden;
}
.gs-stars { position: absolute; inset: 0; pointer-events: none; }
.gs-stars i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: 0.55;
}
.gs-stars i:nth-child(1) { top: 18%; left: 12%; }
.gs-stars i:nth-child(2) { top: 28%; left: 72%; width: 2px; height: 2px; }
.gs-stars i:nth-child(3) { top: 42%; left: 40%; }
.gs-stars i:nth-child(4) { top: 14%; left: 55%; width: 2px; height: 2px; }
.gs-stars i:nth-child(5) { top: 55%; left: 22%; }
.gs-stars i:nth-child(6) { top: 22%; left: 88%; }
.gs-rocket {
  position: relative; z-index: 2; width: 36px; height: 64px;
  transition: transform 0.08s linear;
}
.gs-rocket-body {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 22px; height: 40px; border-radius: 10px 10px 4px 4px;
  background: linear-gradient(180deg, #fff 0%, #d8e6ff 40%, #ff4d62 100%);
  box-shadow: 0 0 12px rgba(255,80,100,0.45);
}
.gs-rocket-body::before {
  content: ""; position: absolute; left: 50%; top: -10px; transform: translateX(-50%);
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-bottom: 12px solid #ffe08a;
}
.gs-rocket-fin {
  position: absolute; bottom: 10px; width: 0; height: 0;
  border-top: 10px solid transparent; border-bottom: 4px solid transparent;
}
.gs-rocket-fin.l { left: -2px; border-right: 12px solid #ff3355; }
.gs-rocket-fin.r { right: -2px; border-left: 12px solid #ff3355; }
.gs-rocket-flame {
  position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%);
  width: 10px; height: 16px; border-radius: 0 0 8px 8px;
  background: linear-gradient(180deg, #ffe08a, #ff8a3d, transparent);
  opacity: 0.85;
}
.skin-rocket.launching .gs-rocket-flame { animation: gsTrailFlicker 0.12s infinite alternate; }
.gs-trail {
  position: absolute; bottom: 28px; left: 50%; width: 8px; height: 20px;
  transform: translateX(-50%); border-radius: 8px;
  background: linear-gradient(180deg, #ff8a3d, transparent); opacity: 0.85;
}
.skin-rocket.launching .gs-trail { animation: gsTrailFlicker 0.15s infinite alternate; }
.skin-rocket.crashed .gs-mult { color: #ff8a93; }
.skin-rocket.crashed .gs-rocket { filter: grayscale(0.4) brightness(0.7); }
@keyframes gsTrailFlicker {
  from { opacity: 0.5; filter: brightness(1); }
  to { opacity: 1; filter: brightness(1.4); }
}

.skin-balloon .gs-balloon-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 140px; justify-content: center;
}
.gs-balloon {
  position: relative; width: 56px; height: 72px;
  transform-origin: center bottom; transition: transform 0.08s linear;
}
.gs-balloon-orb {
  display: block; width: 56px; height: 58px; border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 35% 30%, #ff8a9a, #e11d2e 55%, #9a1020);
  box-shadow: inset -6px -8px 0 rgba(0,0,0,0.12), 0 8px 18px rgba(225,29,46,0.35);
}
.gs-balloon-knot {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  width: 10px; height: 8px; background: #c9a227; border-radius: 2px;
}
.gs-balloon-string {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 2px; height: 14px; background: rgba(255,224,138,0.7);
}
.skin-balloon.popped .gs-balloon-orb {
  background: radial-gradient(circle at 40% 40%, #ffc8a0, #ff8a3d 60%, #aa4420);
  animation: gsLand 0.35s ease;
}
.skin-balloon.popped .gs-balloon-orb::after {
  content: "POP"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: Rajdhani, sans-serif; font-weight: 800; color: #fff; font-size: 0.85rem;
}

.skin-lucky7 .gs-flip-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 1; }
.skin-lucky7 .gs-flip-num {
  font-family: Rajdhani, sans-serif; font-weight: 800; font-size: 4.2rem; line-height: 1;
  color: #ffe08a; min-width: 1.2em; text-align: center;
  text-shadow: 0 0 24px rgba(240,193,75,0.45);
}
.gs-flip-sub {
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.12em; color: #d0a8b0;
}
.gs-flip-num.land { animation: gsLand 0.4s ease; }
.gs-flip-num.lucky { color: #2ee59d; font-size: 4.6rem; text-shadow: 0 0 28px rgba(46,229,157,0.55); }
.gs-lucky-rail {
  display: flex; gap: 6px; margin-bottom: 6px; z-index: 1;
}
.gs-rail-n {
  width: 28px; height: 28px; border-radius: 8px;
  display: grid; place-items: center;
  font-family: Rajdhani, sans-serif; font-weight: 800; font-size: 0.85rem;
  color: #c9b0b8; background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,190,120,0.18);
  transition: transform 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.gs-rail-n.is-lucky { color: #2ee59d; border-color: rgba(46,229,157,0.35); }
.gs-rail-n.on {
  transform: scale(1.12);
  color: #14060a; background: #ffe08a; border-color: #ffe08a;
  box-shadow: 0 0 12px rgba(240,193,75,0.45);
}
.gs-rail-n.is-lucky.on { background: #2ee59d; border-color: #2ee59d; }
.gs-runes { position: absolute; inset: 0; pointer-events: none; }
.gs-runes i {
  position: absolute; width: 10px; height: 10px; border-radius: 2px;
  background: #f0c14b; opacity: 0.35;
}
.gs-runes i:nth-child(1) { top: 18%; left: 14%; }
.gs-runes i:nth-child(2) { top: 22%; right: 16%; }
.gs-runes i:nth-child(3) { bottom: 28%; left: 18%; }
.gs-runes i:nth-child(4) { bottom: 24%; right: 14%; }
.skin-lucky7.rune-glow .gs-runes i { animation: gsRune 0.6s ease infinite alternate; }
@keyframes gsRune {
  from { opacity: 0.25; transform: scale(0.8); }
  to { opacity: 0.9; transform: scale(1.3); box-shadow: 0 0 12px #f0c14b; }
}

.gs-color-ring {
  width: 120px; height: 120px; border-radius: 50%;
  background: conic-gradient(#e11d2e 0 60deg, #1a1a2e 60deg 120deg, #2ee59d 120deg 180deg, #f0c14b 180deg 240deg, #4a90e2 240deg 300deg, #e11d2e 300deg 360deg);
  display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(255,190,120,0.15);
}
.gs-c-dot {
  width: 28px; height: 28px; border-radius: 50%; background: #14060a; border: 2px solid #ffe08a;
}
.gs-color-label {
  margin-top: 4px; padding: 6px 14px; border-radius: 999px; font-weight: 800;
  font-size: 0.9rem; color: #fff; min-width: 90px; text-align: center;
}

.gs-canvas { width: 100%; max-width: 320px; border-radius: 12px; background: #0a1828; }
.gs-hilo-cards, .gs-deal { display: flex; align-items: center; gap: 14px; }
.gs-card-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gs-card-tag {
  font-family: Rajdhani, sans-serif; font-weight: 700; font-size: 0.68rem;
  letter-spacing: 0.08em; color: #d0a8b0;
}
.gs-card {
  width: 72px; height: 96px; border-radius: 10px;
  background: linear-gradient(160deg, #fff6f2, #f0d8c8); color: #1a1000;
  display: grid; place-items: center; font-family: Rajdhani, sans-serif;
  font-weight: 800; font-size: 1.5rem; box-shadow: 0 8px 18px rgba(0,0,0,0.35);
  transition: transform 0.35s ease;
}
.gs-card.flip-back, .skin-cards.dealing .gs-card {
  background: linear-gradient(160deg, #3a1520, #1a0a10); color: #ffe08a;
}
.gs-card.flipping { animation: gsCardFlip 0.45s linear infinite; }
.gs-card.revealed { animation: gsLand 0.35s ease; }
.gs-card.hi { background: linear-gradient(160deg, #2ee59d, #1a8f60); color: #04140c; }
.gs-card.lo { background: linear-gradient(160deg, #ff8a93, #e11d2e); color: #fff; }
.gs-hilo-vs, .gs-deal-vs { font-family: Rajdhani, sans-serif; font-weight: 800; color: #d0a8b0; }
@keyframes gsCardFlip { from { transform: rotateY(0); } to { transform: rotateY(180deg); } }

.gs-ocean {
  position: relative; width: 100%; height: 140px; border-radius: 12px;
  background: linear-gradient(180deg, #16324a 0%, #0a2034 55%, #082038 100%); overflow: hidden;
}
.gs-wave {
  position: absolute; left: 0; right: 0; top: 28%; height: 40px;
  background: repeating-linear-gradient(90deg, transparent, transparent 18px, rgba(120,200,255,0.12) 18px, rgba(120,200,255,0.12) 22px);
  animation: gsWave 1.2s linear infinite;
}
.gs-bubbles { position: absolute; inset: 0; pointer-events: none; }
.gs-bubbles i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  border: 1px solid rgba(180,230,255,0.45); bottom: 20%;
  animation: gsBubble 2.4s linear infinite;
}
.gs-bubbles i:nth-child(1) { left: 20%; animation-delay: 0s; }
.gs-bubbles i:nth-child(2) { left: 55%; width: 4px; height: 4px; animation-delay: 0.7s; }
.gs-bubbles i:nth-child(3) { left: 78%; animation-delay: 1.3s; }
@keyframes gsBubble {
  from { transform: translateY(0); opacity: 0.6; }
  to { transform: translateY(-70px); opacity: 0; }
}
.gs-hook {
  position: absolute; left: 50%; top: 8px; transform: translateX(-50%);
  width: 18px; height: 40px; transition: transform 0.5s ease; z-index: 2;
}
.gs-hook-line {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 2px; height: 28px; background: rgba(255,224,138,0.75);
}
.gs-hook-tip {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 12px; height: 12px; border: 2px solid #ffe08a; border-top: 0; border-radius: 0 0 10px 10px;
}
.gs-fish {
  position: absolute; right: 14%; bottom: 22px; width: 44px; height: 28px;
  transition: transform 0.4s ease, opacity 0.4s ease, left 0.4s ease, right 0.4s ease, bottom 0.4s ease;
}
.gs-fish-body {
  position: absolute; left: 0; top: 4px; width: 30px; height: 20px; border-radius: 50%;
  background: linear-gradient(180deg, #5ad0ff, #1a7ab8);
  box-shadow: 0 0 10px rgba(90,208,255,0.35);
}
.gs-fish-tail {
  position: absolute; right: 0; top: 6px;
  border-top: 8px solid transparent; border-bottom: 8px solid transparent;
  border-left: 14px solid #1a7ab8;
}
.gs-fish-eye {
  position: absolute; left: 8px; top: 10px; width: 4px; height: 4px;
  border-radius: 50%; background: #041018;
}
.gs-fish.caught { left: 50%; right: auto; bottom: 48px; transform: translateX(-50%) scale(1.15); }
.gs-fish.escaped { transform: translateX(80px); opacity: 0; }
.gs-splash {
  position: absolute; left: 50%; top: 55%; width: 10px; height: 10px;
  border-radius: 50%; background: rgba(180,230,255,0.5); opacity: 0; transform: translateX(-50%);
}
.gs-splash.on { animation: gsSplash 0.55s ease-out; }
@keyframes gsWave { to { background-position: 40px 0; } }
@keyframes gsSplash {
  from { opacity: 1; transform: translateX(-50%) scale(0.5); }
  to { opacity: 0; transform: translateX(-50%) scale(6); }
}

.gs-balls { display: flex; gap: 12px; }
.gs-balls span {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  font-family: Rajdhani, sans-serif; font-weight: 800; font-size: 1.3rem; color: #1a1000;
  background: radial-gradient(circle at 30% 30%, #fff6a8, #f0c14b 45%, #c48a20);
  box-shadow: 0 6px 12px rgba(0,0,0,0.35);
}
.gs-balls.tumble span { animation: gsBallTumble 0.28s linear infinite; }
.gs-balls span.land { animation: gsLand 0.4s ease; }
@keyframes gsBallTumble {
  from { transform: translateY(-6px) rotate(-12deg); }
  to { transform: translateY(6px) rotate(12deg); }
}

.gs-wheel-bowl { position: relative; width: 180px; height: 180px; display: grid; place-items: center; }
.gs-wheel-pointer {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 16px solid #ff3355; z-index: 3;
}
.gs-wheel-disk {
  width: 160px; height: 160px; border-radius: 50%;
  background: conic-gradient(#5a1420 0 60deg, #203040 60deg 120deg, #204028 120deg 180deg, #403020 180deg 240deg, #402060 240deg 300deg, #2a2840 300deg 360deg);
  display: grid; place-items: center; position: relative;
  box-shadow: 0 0 0 5px rgba(240,193,75,0.35);
}
.gs-wheel-disk span { position: absolute; font-size: 0.7rem; font-weight: 800; color: #ffe08a; }
.gs-wheel-disk span:nth-child(1) { top: 18px; }
.gs-wheel-disk span:nth-child(2) { top: 40px; right: 28px; }
.gs-wheel-disk span:nth-child(3) { bottom: 40px; right: 28px; }
.gs-wheel-disk span:nth-child(4) { bottom: 18px; }
.gs-wheel-disk span:nth-child(5) { bottom: 40px; left: 28px; }
.gs-wheel-disk span:nth-child(6) { top: 40px; left: 28px; }
.gs-wheel-hub {
  position: absolute; width: 48px; height: 48px; border-radius: 50%;
  background: #14060a; border: 2px solid #f0c14b; display: grid; place-items: center;
  font-family: Rajdhani, sans-serif; font-weight: 800; color: #ffe08a; z-index: 2;
}
.gs-stage.pulse { animation: richPulse 0.35s ease infinite alternate; }
.skin-rocket { background: linear-gradient(180deg, #1a1030, #0a0614 70%); }
.skin-balloon { background: linear-gradient(180deg, #301828, #140810); }
.skin-fish { background: linear-gradient(180deg, #102838, #081420); }
.skin-lottery { background: linear-gradient(160deg, #302010, #140c08); }
/* ===== Bn786 N999 chrome parity (v24) ===== */
.dl-x {
  border: 0; background: transparent; color: #f5d0a8; font-size: 1.1rem; padding: 0 4px; line-height: 1;
}
.btn, .btn-go, .chip, .uw-act, .cat-shield, .nav-item, .btn-dl, .top-act, .pack, .pc-nav-item, .bonus-x, .claim-x {
  transition: transform 0.14s ease, filter 0.14s ease, box-shadow 0.14s ease;
}
.btn:hover, .btn-go:hover, .chip:hover, .uw-act:hover, .btn-dl:hover, .top-act:hover {
  filter: brightness(1.08);
}
.btn:active, .btn-go:active, .chip:active, .uw-act:active, .cat-shield:active, .top-act:active,
.btn.press, .btn-go.press, .chip.press, .uw-act.press, .cat-shield.press, .top-act.press,
.btn-dl:active, .btn-dl.press, .pack:active, .pack.press, .bonus-x:active, .claim-x:active {
  transform: scale(0.94);
  filter: brightness(1.14);
}
.btn, .btn-gold, .btn-red, .btn-mint, .btn-go, .btn-dl, .shiny {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 14px rgba(0,0,0,.35) !important;
}
.btn::after, .btn-gold::after, .btn-go::after, .btn-dl::after, .shiny::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 45%;
  background: linear-gradient(180deg, rgba(255,255,255,.28), transparent);
  pointer-events: none;
}
.chip {
  background: linear-gradient(180deg, #4a2030, #2a1018) !important;
  border: 1px solid rgba(240,193,75,.35) !important;
  color: #ffe08a !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.chip.active {
  background: linear-gradient(180deg, #ffe08a, #c9a227) !important;
  color: #1a1000 !important;
}

/* Hero carousel */
.hero-carousel .carousel-track { min-height: 148px; border-radius: 14px; }
.carousel-slide.hero-slide {
  display: none;
  position: relative;
  min-height: 148px;
  padding: 18px 16px;
  border: 1px solid rgba(240,193,75,.28);
  border-radius: 14px;
  background-size: cover;
  background-position: center top;
  background-color: #2a0a10;
  overflow: hidden;
}
.carousel-slide.hero-slide.active { display: flex; align-items: flex-end; }
.carousel-slide.hero-slide::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(10,4,8,.42) 0%, rgba(10,4,8,.12) 48%, transparent 72%);
}
.hero-copy { position: relative; z-index: 1; max-width: 78%; }
.hero-copy small {
  display: block; color: #ffe08a; font-size: 0.68rem; letter-spacing: .08em; font-weight: 800;
}
.hero-copy strong {
  display: block; font-family: Rajdhani, sans-serif; font-size: 1.35rem; line-height: 1.15; margin: 4px 0;
  text-shadow: 0 2px 10px rgba(0,0,0,.55);
}
.hero-copy p { margin: 0; color: rgba(255,246,242,.92); font-size: 0.85rem; }
.hero-copy em { color: #ffe08a; font-style: normal; font-weight: 800; }

/* Withdraw ticker */
.win-ticker {
  display: flex; align-items: center; gap: 8px;
  margin: 8px 0 10px; padding: 7px 10px;
  background: linear-gradient(90deg, #8a1020, #c41e2a 40%, #8a1020);
  border: 1px solid rgba(240,193,75,.55);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 2px 10px rgba(0,0,0,.3);
}
.win-trophy { filter: drop-shadow(0 0 4px rgba(240,193,75,.7)); }
.win-ticker-track { flex: 1; overflow: hidden; }
#winTickerText {
  display: block; white-space: nowrap; color: #fff6c8; font-size: 0.72rem; font-weight: 700;
  transition: opacity .2s ease;
}

/* User wallet row */
.user-wallet-row {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 8px 4px 12px;
}
.uw-avatar {
  border: 0; background: transparent; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.uw-avatar span {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: linear-gradient(160deg,#5a2a14,#2a1008); border: 2px solid #f0c14b;
  font-weight: 800; font-size: 0.85rem;
}
.uw-avatar em {
  font-style: normal; font-size: 0.58rem; font-weight: 800; color: #1a1000;
  background: linear-gradient(180deg,#ffe08a,#c9a227); border-radius: 999px; padding: 1px 6px;
}
.uw-uid { font-size: 0.72rem; color: #f5d0a8; }
.uw-meta { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.uw-bal { display: flex; align-items: center; gap: 6px; }
.uw-bal strong { color: #ffe08a; font-size: 1.05rem; }
.uw-refresh {
  border: 0; background: transparent; color: #f0c14b; font-size: 1rem; padding: 0;
}
.uw-actions { display: flex; gap: 10px; }
.uw-act {
  border: 0; background: transparent; color: #ffe08a; display: flex; flex-direction: column;
  align-items: center; gap: 3px; font-size: 0.58rem; font-weight: 700; position: relative; padding: 2px;
}
.uw-ico {
  position: relative;
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem;
  color: #ffe08a;
  background:
    linear-gradient(165deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 38%, transparent 52%),
    linear-gradient(160deg, #6a3218 0%, #3a180c 55%, #1a0a06 100%);
  border: 1.5px solid #f0c14b;
  box-shadow:
    0 0 0 1px rgba(255,230,150,.25),
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -3px 6px rgba(0,0,0,.4),
    0 3px 8px rgba(0,0,0,.4);
  overflow: hidden;
}
.uw-ico::after {
  content: "";
  position: absolute; top: 0; left: -20%; right: -20%; height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.5), transparent);
  pointer-events: none;
}
.uw-ico.plus { color: #2ee59d; font-weight: 900; text-shadow: 0 0 6px rgba(46,229,157,.55); }
.uw-ico.bag { color: #ffb347; font-weight: 900; }
.uw-ico.mail { color: #ffe08a; }
.uw-dot {
  position: absolute; top: -2px; right: 0; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 999px; background: #e11d2e; color: #fff; font-size: 0.55rem; font-style: normal;
  font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 0 0 1.5px #1a0508;
}

/* Category rail  -  N999 tall silver-ring shield pills */
.lobby-main { display: grid; grid-template-columns: 60px 1fr; gap: 8px; align-items: start; }
.cat-rail {
  display: flex; flex-direction: column; gap: 9px; position: sticky; top: 4px;
  width: 56px;
}
.cat-shield {
  position: relative;
  border: 0;
  width: 56px;
  height: 64px;
  padding: 10px 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #ffffff;
  background: transparent;
  isolation: isolate;
  filter:
    drop-shadow(0 0 1.5px #ffffff)
    drop-shadow(0 0 4px rgba(255,255,255,.85))
    drop-shadow(0 0 8px rgba(255,255,255,.35))
    drop-shadow(0 2px 4px rgba(0,0,0,.55));
}
/* Silver/white outer ring */
.cat-shield::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(160deg, #ffffff 0%, #d8d8d8 28%, #f8f8f8 50%, #a8a8a8 78%, #ececec 100%);
  clip-path: polygon(50% 0%, 88% 12%, 92% 28%, 92% 72%, 88% 88%, 50% 100%, 12% 88%, 8% 72%, 8% 28%, 12% 12%);
}
/* Glossy maroon glass face */
.cat-shield::after {
  content: "";
  position: absolute;
  inset: 2.5px;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,.02) 40%, transparent 52%),
    linear-gradient(165deg, #8a1c2c 0%, #5a101c 38%, #3a0a12 68%, #1a0508 100%);
  clip-path: polygon(50% 0%, 88% 12%, 92% 28%, 92% 72%, 88% 88%, 50% 100%, 12% 88%, 8% 72%, 8% 28%, 12% 12%);
  box-shadow: inset 0 -5px 10px rgba(0,0,0,.45), inset 0 2px 3px rgba(255,255,255,.2);
}
.cat-shield.active {
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 6px rgba(255,240,180,.95))
    drop-shadow(0 0 12px rgba(240,193,75,.75))
    drop-shadow(0 0 18px rgba(225,29,46,.45))
    drop-shadow(0 2px 4px rgba(0,0,0,.55));
  animation: catGlow 1.8s ease-in-out infinite;
}
.cat-shield.active::after {
  background:
    linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 24%, rgba(255,224,138,.1) 42%, transparent 55%),
    linear-gradient(165deg, #e11d2e 0%, #a01020 40%, #6a0c16 70%, #3a0810 100%);
}
.cat-shield.active::before {
  background: linear-gradient(160deg, #fffef5 0%, #ffe08a 30%, #ffffff 52%, #c9a227 82%, #fff6c8 100%);
}
@keyframes catGlow {
  0%,100% { filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 6px rgba(255,240,180,.9))
    drop-shadow(0 0 12px rgba(240,193,75,.7))
    drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
  50% { filter:
    drop-shadow(0 0 3px #ffffff)
    drop-shadow(0 0 10px rgba(255,240,180,1))
    drop-shadow(0 0 18px rgba(240,193,75,.95))
    drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
}
.cat-shield-ico,
.cat-shield-lab {
  position: relative;
  z-index: 2;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 6px rgba(255,255,255,.25);
}
.cat-shield-ico {
  font-size: 0.92rem; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em;
}
.cat-shield-lab {
  font-size: 0.5rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.lobby-grid-wrap { min-width: 0; }
.lobby-grid { gap: 7px; }
.grid-tile, .lobby-grid .tile {
  min-height: 112px; border-radius: 12px; padding: 8px 6px 10px;
  background:
    radial-gradient(circle at 70% 20%, rgba(240,193,75,.12), transparent 45%),
    linear-gradient(160deg, #4a1824, #1a080c);
  border: 1px solid rgba(240,193,75,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 4px 12px rgba(0,0,0,.25);
  position: relative; overflow: hidden;
}
.mx-badge {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  background: linear-gradient(180deg,#ff5a6a,#b01020); color: #fff;
  font-size: 0.55rem; font-weight: 800; padding: 2px 5px; border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,.35); animation: badgePulse 1.8s ease-in-out infinite;
}
@keyframes badgePulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.lobby-count {
  margin: 8px 0 10px; text-align: center; color: #f5d0a8; font-size: 0.72rem; font-weight: 700;
}
.provider-banners { display: grid; gap: 8px; margin-bottom: 12px; }
.prov-ban {
  border: 1px solid rgba(240,193,75,.3); border-radius: 12px; min-height: 72px;
  background-size: cover; background-position: center; position: relative; overflow: hidden;
  text-align: left; padding: 14px;
}
.prov-ban::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(10,4,8,.35), transparent 55%);
}
.prov-ban span {
  position: relative; z-index: 1; color: #ffe08a; font-weight: 800; font-size: 0.95rem;
  text-shadow: 0 2px 8px rgba(0,0,0,.5);
}
.auth-row.compact { margin-bottom: 8px; }

/* Available Bonus modal */
.bonus-backdrop, .claim-backdrop {
  position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.72);
  display: grid; place-items: center; padding: 20px; animation: anFade .25s ease;
}
.bonus-modal {
  width: min(360px, 100%); position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(240,193,75,.12), transparent 40%),
    linear-gradient(180deg, #5a121c, #2a080e 40%, #1a0508);
  border: 2px solid rgba(240,193,75,.45); border-radius: 16px;
  padding: 0 0 18px; box-shadow: 0 20px 50px rgba(0,0,0,.55);
}
.bonus-hero {
  position: relative; margin: 0 0 8px; height: 168px;
  overflow: hidden; background: #2a0a10;
}
.bonus-girl {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  filter: brightness(1.18) contrast(1.08) saturate(1.12);
}
.bonus-hero-fade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(26,5,8,.05) 0%, transparent 40%, rgba(26,5,8,.28) 78%, #2a080e 100%),
    radial-gradient(ellipse at 50% 100%, rgba(240,193,75,.18), transparent 55%);
  pointer-events: none;
}
.bonus-ribbon {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  z-index: 2; margin: 0; width: fit-content; white-space: nowrap;
  background: linear-gradient(180deg, #ff3b4a, #a01020);
  color: #fff; font-weight: 800; font-size: 1.05rem;
  padding: 8px 28px; border-radius: 6px;
  box-shadow: 0 4px 0 #5a0810, 0 8px 18px rgba(0,0,0,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
.bonus-ribbon::before, .bonus-ribbon::after {
  content: ""; position: absolute; bottom: -8px; width: 0; height: 0;
  border-top: 10px solid #5a0810;
}
.bonus-ribbon::before { left: -2px; border-left: 12px solid transparent; }
.bonus-ribbon::after { right: -2px; border-right: 12px solid transparent; }
.bonus-body { padding: 10px 16px 0; }
.bonus-list { display: grid; gap: 8px; }
.bonus-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(240,193,75,.18);
}
.bonus-row span { color: #ffe08a; font-weight: 700; font-size: 0.9rem; }
.btn-go {
  border: 0; min-width: 64px; padding: 8px 14px; border-radius: 8px; font-weight: 800;
  color: #1a1000;
  background: linear-gradient(180deg, #ffe08a 0%, #f0c14b 45%, #c9a227 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 3px 8px rgba(0,0,0,.35);
  position: relative; overflow: hidden;
}
.bonus-dont {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 4px;
  color: #fff; font-size: 0.82rem;
}
.bonus-foot { text-align: center; margin: 6px 0 0; font-size: 0.7rem; }
.bonus-x, .claim-x {
  display: grid; place-items: center; margin: 12px auto 0;
  width: 36px; height: 36px; border-radius: 50%; border: 2px solid rgba(255,255,255,.45);
  background: rgba(0,0,0,.35); color: #fff; font-size: 1.2rem;
}

/* Claim money bag */
.claim-backdrop {
  z-index: 240;
  padding:
    max(20px, calc(env(safe-area-inset-top, 0px) + 16px))
    max(16px, calc(env(safe-area-inset-right, 0px) + 12px))
    max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px))
    max(16px, calc(env(safe-area-inset-left, 0px) + 12px));
  backdrop-filter: blur(4px);
}
.claim-panel {
  position: relative;
  z-index: 2;
  width: min(360px, 100%);
  padding: 20px 18px 18px;
  border-radius: 24px;
  border: 1px solid rgba(255, 224, 138, 0.36);
  background:
    radial-gradient(circle at top, rgba(240,193,75,0.18), transparent 34%),
    linear-gradient(180deg, rgba(122,16,32,0.98) 0%, rgba(58,10,18,0.98) 48%, rgba(26,5,8,0.99) 100%);
  box-shadow:
    0 24px 70px rgba(0,0,0,0.58),
    inset 0 1px 0 rgba(255,255,255,0.18);
}
.claim-bag {
  text-align: center;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.claim-bag-art {
  font-size: 6rem; line-height: 1; filter: drop-shadow(0 12px 24px rgba(0,0,0,.5));
  animation: bagBob 1.4s ease-in-out infinite;
}
@keyframes bagBob {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.04); }
}
.claim-panel h3 {
  margin: 0;
  padding: 0 34px 0 0;
  color: #fff6d6;
  font-family: Rajdhani, Outfit, sans-serif;
  font-size: 1.38rem;
  line-height: 1.1;
}
.claim-copy {
  margin: 0;
  color: rgba(255,255,255,0.84);
  font-size: 0.95rem;
  line-height: 1.5;
}
.claim-meta {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(0,0,0,0.26);
  border: 1px solid rgba(255,224,138,0.16);
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
}
.claim-meta strong {
  color: #ffe08a;
  font-size: 0.92rem;
}
.claim-btn {
  width: 100%;
  margin-top: 2px;
  min-width: 140px;
  font-size: 1.08rem;
}
.claim-coins { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.claim-coins span {
  position: absolute; top: -20px; width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff6c8, #c9a227);
  box-shadow: 0 0 0 2px rgba(160,110,20,.5);
  animation: coinFall linear infinite;
}
.claim-panel .claim-x {
  position: absolute;
  top: 12px;
  right: 12px;
  margin: 0;
  z-index: 3;
}
@keyframes coinFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: .2; }
}
@media (max-width: 420px) {
  .claim-panel {
    padding: 18px 16px 16px;
    border-radius: 20px;
  }
  .claim-bag {
    gap: 10px;
  }
  .claim-bag-art svg {
    width: 52px;
    height: 52px;
  }
  .claim-panel h3 {
    font-size: 1.2rem;
    padding-right: 30px;
  }
  .claim-copy {
    font-size: 0.9rem;
  }
  .claim-meta {
    padding: 10px 12px;
    font-size: 0.78rem;
  }
  .claim-meta strong {
    font-size: 0.86rem;
  }
}

/* Game stage visibility / motion boost */
.game-stage, .gs-stage, .fx-stage, .roulette-arena {
  visibility: visible !important;
  opacity: 1 !important;
}
.game-stage {
  min-height: 160px !important;
  background: linear-gradient(160deg, #2a1018, #0a0608) !important;
  border: 1px solid rgba(240,193,75,.28) !important;
}
.spin-reel, .gs-reels { min-height: 80px; }
.spin-reel.is-spinning span, .gs-reels.is-spinning .gs-sym {
  animation: gsReelBlur 0.1s linear infinite;
}
.mine-cell.mine-picking {
  animation: minePulse 0.35s ease infinite alternate;
  filter: brightness(1.25);
}
.mine-cell.mine-revealed { transform: scale(1.05); transition: transform .25s ease; }
@keyframes minePulse {
  from { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(240,193,75,.3); }
  to { transform: scale(1.05); box-shadow: 0 0 16px rgba(240,193,75,.55); }
}
.footer-logo { display: flex; align-items: center; gap: 8px; }
.footer-logo img { border-radius: 50%; }

body.gb-busy .bottomnav .nav-item { pointer-events: none; opacity: .45; }

/* ===== v24 shell overrides (download strip + metallic top + bottom Get1500) ===== */
:root { --top-h: 92px; --nav-h: 78px; --dl-h: 34px; }
.dl-strip { height: var(--dl-h); }
.topbar {
  top: var(--dl-h) !important;
  height: 58px !important;
  background: #1a0508 !important;
  justify-content: space-between;
}
body.dl-hidden .topbar { top: 0 !important; }
body.dl-hidden { --top-h: 58px; }
#app {
  padding: calc(var(--dl-h) + 58px + 8px) 10px calc(var(--nav-h) + env(safe-area-inset-bottom, 0px) + 14px) !important;
}
body.dl-hidden #app {
  padding-top: calc(58px + 8px) !important;
}
.brand img { border-radius: 50% !important; }
.brand-name {
  font-family: Rajdhani, Outfit, sans-serif !important;
  font-size: 1.4rem !important;
  letter-spacing: 0.04em;
  background: linear-gradient(180deg, #fff6c8 0%, #f0c14b 45%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
.brand-stack {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  min-width: 0;
}
.brand-player {
  font-size: 0.62rem;
  font-weight: 700;
  color: #c9a27a;
  letter-spacing: 0.02em;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uw-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffe08a;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Metallic gold 3D top utility icons */
.top-actions { display: flex; gap: 8px; align-items: center; }
.top-act {
  border: 0 !important; background: transparent !important;
  color: #f0c14b !important;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.55rem !important; font-weight: 800 !important;
  position: relative; padding: 2px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.5);
}
.top-act .ico {
  position: relative;
  width: 32px !important; height: 32px !important; border-radius: 50% !important;
  display: grid; place-items: center;
  font-size: 1.05rem !important;
  color: #1a1000;
  background:
    radial-gradient(circle at 32% 28%, #fff6c8 0%, transparent 42%),
    linear-gradient(160deg, #ffe08a 0%, #f0c14b 38%, #a67c1a 72%, #7a5a10 100%) !important;
  border: 1.5px solid #fff6c8 !important;
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,.65),
    inset 0 -3px 5px rgba(80,50,0,.45),
    0 3px 8px rgba(0,0,0,.45),
    0 0 10px rgba(240,193,75,.35) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  overflow: hidden;
}
.top-act .ico::after {
  content: "";
  position: absolute; top: 0; left: 10%; right: 10%; height: 42%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.55), transparent);
  pointer-events: none;
}
.top-act .ico svg {
  width: 18px; height: 18px; display: block;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}
.top-act .badge {
  position: absolute; top: -2px; right: -2px; min-width: 14px; height: 14px; padding: 0 3px;
  border-radius: 999px; background: #e11d2e; color: #fff; font-size: 0.55rem; font-weight: 800;
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 0 0 1.5px #1a0508, 0 2px 4px rgba(0,0,0,.4);
}

/* Bottom nav — floating icons on dark fade, thin gold line, 2+center+2 */
.bottomnav {
  height: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px)) !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1.3fr 1fr 1fr !important;
  align-items: end !important;
  padding: 0 4px env(safe-area-inset-bottom, 0) !important;
  background:
    linear-gradient(180deg,
      rgba(8,2,4,0) 0%,
      rgba(12,4,8,.45) 28%,
      rgba(18,6,10,.82) 62%,
      rgba(8,2,4,.96) 100%) !important;
  border-top: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}
.bottomnav::before {
  content: "";
  position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent 2%, #a67c1a 16%, #ffe08a 50%, #a67c1a 84%, transparent 98%);
  pointer-events: none;
}
.bottomnav::after {
  content: none !important;
  display: none !important;
}
.nav-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nav-item {
  color: #f0c14b !important;
  font-size: 0.58rem !important;
  font-weight: 800 !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 1px 2px rgba(0,0,0,.85) !important;
  transition: transform .12s ease, filter .12s ease;
  justify-content: flex-end !important;
  padding: 4px 2px 7px !important;
  gap: 1px !important;
  position: relative;
  z-index: 1;
}
.nav-item:not(.nav-center)::before {
  content: "";
  position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  pointer-events: none; z-index: 0;
  background: radial-gradient(circle, rgba(240,193,75,.32) 0%, rgba(240,193,75,.08) 42%, transparent 72%);
}

/* The 108px centre wheel makes the grid row taller than the 78px bar.
   Lift regular buttons only by the overflow that is not covered by a device
   safe-area, so their labels always stay inside the visible viewport. */
.bottomnav > .nav-item:not(.nav-center) {
  bottom: max(0px, calc(30px - env(safe-area-inset-bottom, 0px)));
}
.nav-item .nav-lab {
  color: #f0c14b !important;
  font-weight: 800 !important;
  font-size: 0.58rem !important;
  line-height: 1.1;
  font-family: Rajdhani, Outfit, sans-serif;
  position: relative; z-index: 1;
}
.nav-item:hover { filter: brightness(1.12); }
.nav-item:hover .nav-ico { transform: scale(1.06); }
.nav-item:active, .nav-item.press { transform: scale(0.95); filter: brightness(1.15); }
.nav-item.active .nav-lab {
  color: #fff6c8 !important;
  text-shadow: 0 0 8px rgba(255,240,180,.4), 0 1px 2px rgba(0,0,0,.85);
}
.nav-item.active::after {
  content: "";
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 2px; border-radius: 999px;
  background: linear-gradient(90deg, #a67c1a, #fff6c8, #a67c1a);
}
.nav-item .nav-ico {
  width: 52px !important; height: 52px !important;
  display: grid !important; place-items: center;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative; z-index: 1;
  filter: drop-shadow(0 0 8px rgba(240,193,75,.4)) drop-shadow(0 3px 6px rgba(0,0,0,.55));
  transition: transform .12s ease;
  animation: none !important;
}
.nav-item.active .nav-ico {
  filter: drop-shadow(0 0 12px rgba(255,240,180,.55)) drop-shadow(0 3px 6px rgba(0,0,0,.55));
  transform: scale(1.04);
}
.nav-item .nav-ico svg {
  width: 52px !important; height: 52px !important; display: block;
  overflow: visible;
}
.nav-item .nav-badge {
  position: absolute; top: 0; right: 8%;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px;
  background: #e11d2e;
  color: #fff; font-size: 0.55rem; font-weight: 800;
  display: grid; place-items: center; z-index: 4;
  box-shadow: 0 0 0 1.5px #1a0508, 0 2px 6px rgba(0,0,0,.45);
  animation: none !important;
}
.nav-center {
  transform: translateY(-42px) !important;
  z-index: 4 !important;
  overflow: visible !important;
  padding-bottom: 2px !important;
  color: #f0c14b !important;
}
.nav-center:hover { filter: brightness(1.1); }
.nav-center:hover .nav-get { transform: scale(1.04); }
.nav-center:active, .nav-center.press { transform: translateY(-42px) scale(0.96) !important; }
.nav-center.active::after { display: none !important; }
.nav-center::before { display: none !important; content: none !important; }
.nav-get {
  position: relative; width: 100%; max-width: 118px; height: 102px;
  display: grid; place-items: end center; margin: 0 auto;
  transition: transform .12s ease;
}
.nav-get .nav-wheel {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  width: 84px !important; height: 84px !important; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 40%),
    conic-gradient(#e11d2e 0 45deg,#f0c14b 45deg 90deg,#1db954 90deg 135deg,#e11d2e 135deg 180deg,#f0c14b 180deg 225deg,#1db954 225deg 270deg,#e11d2e 270deg 315deg,#f0c14b 315deg 360deg) !important;
  border: 3px solid #ffe08a !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.55),
    0 0 0 3px #8a6010,
    inset 0 0 12px rgba(255,255,255,.25) !important;
  animation: none !important;
}
.nav-get .nav-wheel::before {
  content: "" !important;
  position: absolute; left: 50%; top: -7px; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent; border-right: 7px solid transparent;
  border-bottom: 10px solid #f0c14b;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.5));
  animation: none !important;
}
.nav-get .nav-wheel::after {
  content: "" !important;
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 18px; height: 18px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c8, #c9a227 60%, #6a4208);
  border: 1.5px solid #5a3a08;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  font-size: 0 !important; animation: none !important;
}
.nav-get .nav-pill {
  position: relative; z-index: 2; width: 100%;
  padding: 6px 6px 7px; border-radius: 999px;
  font-size: 0.78rem; font-weight: 900; letter-spacing: .08em; color: #ffe08a;
  text-shadow: 0 1px 2px rgba(0,0,0,.65);
  background: linear-gradient(180deg, #ff3b4a 0%, #c41e2a 45%, #8a1020 100%);
  border: 2px solid #f0c14b;
  box-shadow:
    0 3px 0 #4a060c, 0 6px 14px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.3);
  white-space: nowrap; text-align: center;
  font-family: Rajdhani, Outfit, sans-serif;
}
.nav-get .nav-coin {
  position: absolute; z-index: 3; width: 13px; height: 13px; border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6c8, #f0c14b 50%, #a67c1a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.4);
  animation: none !important;
}
.nav-get .nav-coin.c1 { left: 0; bottom: 22px; }
.nav-get .nav-coin.c2 { right: -2px; bottom: 26px; width: 11px; height: 11px; }
.nav-get .nav-coin.c3 { left: 14%; bottom: 4px; width: 10px; height: 10px; }
.nav-get .nav-coin.c4 { right: 10%; bottom: 6px; width: 12px; height: 12px; }
/* Scroll-to-top floating chip (N999 style) */
.gb-top-fab {
  position: fixed;
  right: max(12px, calc(50% - 228px));
  bottom: calc(var(--nav-h) + 18px);
  z-index: 45;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1.5px solid rgba(255,224,138,.55);
  background: linear-gradient(180deg, #e11d2e, #8a1020);
  color: #fff; font-size: 0.55rem; font-weight: 800;
  display: none; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.25);
  line-height: 1.05;
}
.gb-top-fab.show { display: flex; }
.gb-top-fab span { font-size: 0.95rem; line-height: 1; }

/* Home-only WhatsApp support button */
.gb-whatsapp-fab {
  position: fixed;
  right: max(14px, calc(50% - 226px));
  bottom: calc(var(--nav-h) + 20px + env(safe-area-inset-bottom, 0px));
  z-index: 145;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: none;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, #35df72, #16a64f);
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 8px 20px rgba(0,0,0,.42), 0 0 0 4px rgba(37,211,102,.17), inset 0 1px 0 rgba(255,255,255,.35);
  text-decoration: none;
  transition: transform .15s ease, filter .15s ease;
}
.gb-whatsapp-fab svg { width: 34px; height: 34px; display: block; }
body.gb-route-home .gb-whatsapp-fab { display: grid; }
body.gb-auth-gate .gb-whatsapp-fab,
body.gb-in-game .gb-whatsapp-fab,
body.gb-land-game .gb-whatsapp-fab { display: none !important; }
.gb-whatsapp-fab:hover { filter: brightness(1.08); transform: translateY(-2px); }
.gb-whatsapp-fab:active,
.gb-whatsapp-fab.press { transform: scale(.93); filter: brightness(1.1); }
.gb-whatsapp-fab:focus-visible { outline: 3px solid #fff6c8; outline-offset: 3px; }

/* Keep the scroll-to-top control clear of WhatsApp on the home screen. */
body.gb-route-home .gb-top-fab {
  right: max(76px, calc(50% - 164px));
}

/* ===== v25 motion + premium interactions ===== */
@keyframes shineSweep {
  0% { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
  35% { opacity: .85; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
@keyframes catPressBounce {
  0% { transform: scale(1); }
  40% { transform: scale(0.88); }
  70% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes tileLift {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-3px) scale(0.97); }
}

.shiny,
.btn-gold,
.btn-red,
.btn-mint,
.btn-go,
.btn-dl,
.btn[data-action],
.pack,
.uw-act .uw-ico,
.claim-btn {
  position: relative;
  overflow: hidden;
}
.shiny::before,
.btn-gold::before,
.btn-red::before,
.btn-mint::before,
.btn-go::before,
.btn-dl::before,
.claim-btn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 0;
  width: 38%;
  height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
  z-index: 3;
  opacity: 0;
}
.shiny:hover::before,
.btn-gold:hover::before,
.btn-red:hover::before,
.btn-mint:hover::before,
.btn-go:hover::before,
.btn-dl:hover::before,
.claim-btn:hover::before,
.shiny:active::before,
.btn-gold:active::before,
.btn-red:active::before,
.btn-go:active::before,
.btn-dl:active::before,
.shiny.press::before,
.btn-gold.press::before,
.btn-red.press::before,
.btn-go.press::before,
.btn-dl.press::before {
  animation: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .btn:hover, .btn-gold:hover, .btn-red:hover, .btn-mint:hover, .btn-go:hover, .btn-dl:hover, .chip:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.08);
  }
  .nav-item:hover:not(.nav-center) { transform: translateY(-2px); }
  .nav-center:hover { transform: translateY(-42px) scale(1.04) !important; }
  .grid-tile:hover, .lobby-grid .tile:hover, .game-card:hover, .pack:hover, .tile:hover {
    transform: translateY(-3px) scale(1.03);
    filter: brightness(1.12);
    box-shadow: 0 10px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.15);
  }
  .grid-tile:hover::after, .lobby-grid .tile:hover::after, .tile:hover::after, .game-card:hover::after {
    animation-duration: 0.9s;
    opacity: 1;
  }
}

.cat-shield {
  transition: transform .16s cubic-bezier(.34,1.56,.64,1), filter .16s ease !important;
}
.cat-shield:active, .cat-shield.press {
  animation: catPressBounce .32s cubic-bezier(.34,1.56,.64,1);
  filter:
    drop-shadow(0 0 2px #ffffff)
    drop-shadow(0 0 8px rgba(255,240,180,.95))
    drop-shadow(0 2px 4px rgba(0,0,0,.55)) !important;
}

.grid-tile, .lobby-grid .tile, .game-card, .tile {
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}
.grid-tile:active, .lobby-grid .tile:active, .game-card:active, .tile:active,
.grid-tile.press, .lobby-grid .tile.press, .game-card.press, .tile.press {
  transform: translateY(-2px) scale(0.97);
  filter: brightness(1.1);
  box-shadow: 0 6px 16px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.12);
}

.chip {
  position: relative;
  overflow: hidden;
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
}
.chip:hover { filter: brightness(1.1); }
.chip:active, .chip.press {
  transform: scale(0.92);
  filter: brightness(1.15);
}
.chip.shiny::before, .chip::before {
  content: "";
  position: absolute; top: -20%; left: 0; width: 40%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent);
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none; opacity: 0; z-index: 2;
}
.chip:active::before, .chip.press::before { animation: none !important; }

.pack {
  transition: transform .14s ease, filter .14s ease, box-shadow .14s ease !important;
  cursor: pointer;
}
.pack:active, .pack.press {
  transform: scale(0.97);
  filter: brightness(1.1);
}

.pc-nav-item, .pc-act, .uw-act, .top-act, .bonus-x, .claim-x, .gb-top-fab {
  transition: transform .14s ease, filter .14s ease !important;
}
.pc-nav-item:active, .pc-nav-item.press,
.pc-act:active, .pc-act.press,
.uw-act:active, .uw-act.press,
.top-act:active, .top-act.press,
.bonus-x:active, .bonus-x.press,
.claim-x:active, .claim-x.press,
.gb-top-fab:active, .gb-top-fab.press {
  transform: scale(0.92);
  filter: brightness(1.14);
}

/* Keep busy locks intact  -  no press feedback when disabled */
body.gb-busy .bottomnav .nav-item,
body.gb-busy .bottomnav .nav-item:active,
body.gb-busy .bottomnav .nav-item.press {
  transform: none !important;
  filter: none !important;
  pointer-events: none;
  opacity: .45;
}
body.gb-busy .btn:disabled,
.btn:disabled,
.btn:disabled:hover,
.btn:disabled:active {
  transform: none !important;
  filter: none !important;
  animation: none !important;
}
body.gb-busy .btn:disabled::before,
.btn:disabled::before { animation: none !important; opacity: 0 !important; }

.nav-item { position: relative; }
.bottomnav { position: fixed; }

/* ===== v27 game companion girl ===== */
.game-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.game-panel { position: relative; z-index: 2; }
.game-girl {
  position: relative;
  align-self: center;
  width: min(148px, 38vw);
  height: 118px;
  margin: 0 auto 2px;
  border-radius: 14px;
  overflow: hidden;
  border: 1.5px solid rgba(240,193,75,.55);
  box-shadow:
    0 0 0 1px rgba(255,246,200,.2),
    0 6px 18px rgba(0,0,0,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
  background:
    radial-gradient(ellipse at 50% 20%, rgba(240,193,75,.18), transparent 60%),
    linear-gradient(160deg,#3a1018,#1a0508);
  z-index: 1;
  pointer-events: none;
  transition: transform .25s ease, box-shadow .25s ease, filter .25s ease;
}
.game-girl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: brightness(1.16) contrast(1.08) saturate(1.1);
  transition: transform .35s ease, filter .35s ease;
}
.game-girl[data-state="play"] img {
  transform: scale(1.04) translateY(-2px);
  filter: brightness(1.18) contrast(1.08) saturate(1.12);
  animation: girlPulse 0.9s ease-in-out infinite alternate;
}
.game-girl[data-state="win"] {
  box-shadow:
    0 0 0 1px rgba(255,246,200,.45),
    0 0 22px rgba(240,193,75,.45),
    0 6px 18px rgba(0,0,0,.4);
}
.game-girl[data-state="win"] img { filter: brightness(1.22) contrast(1.1) saturate(1.15); }
.game-girl[data-state="lose"] img { filter: saturate(.88) brightness(1.05); }
.game-girl-sparkle {
  position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,246,200,.75) 0 2px, transparent 3px),
    radial-gradient(circle at 75% 22%, rgba(255,224,138,.7) 0 1.5px, transparent 3px),
    radial-gradient(circle at 60% 70%, rgba(255,255,255,.65) 0 2px, transparent 3px),
    radial-gradient(circle at 30% 80%, rgba(240,193,75,.55) 0 1.5px, transparent 3px);
}
.game-girl.sparkle .game-girl-sparkle {
  opacity: 1;
  animation: girlSparkle 1.2s ease-in-out infinite;
}
@keyframes girlPulse {
  from { transform: scale(1.02); }
  to { transform: scale(1.06) translateY(-3px); }
}
@keyframes girlSparkle {
  0%,100% { opacity: .35; filter: brightness(1); }
  50% { opacity: 1; filter: brightness(1.25); }
}
@media (min-width: 420px) {
  .game-shell {
    display: grid;
    grid-template-columns: 112px 1fr;
    align-items: start;
    gap: 10px;
  }
  .game-girl {
    width: 112px;
    height: 168px;
    margin: 0;
    position: sticky;
    top: 8px;
  }
  .back-row { grid-column: 1 / -1; }
}
@media (max-width: 419px) {
  .game-girl { order: -1; }
}

/* ===== v27 silver flare tiles + coin rain ===== */
@keyframes tileFlareSweep {
  0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; }
  12% { opacity: .9; }
  28% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
  100% { transform: translateX(220%) skewX(-18deg); opacity: 0; }
}
@keyframes coinRainFall {
  0% { transform: translateY(-12vh) rotate(0deg); opacity: 0; }
  8% { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: .15; }
}

.grid-tile, .lobby-grid .tile, .tile, .game-card, .shelf-tile {
  position: relative;
  overflow: hidden;
}
.grid-tile::before, .lobby-grid .tile::before, .tile::before, .game-card::before, .shelf-tile::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(165deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 28%, transparent 48%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.18));
  border-radius: inherit;
}
.grid-tile::after, .lobby-grid .tile::after, .tile::after, .game-card::after, .shelf-tile::after {
  content: none;
  display: none;
  animation: none;
}

.grid-tile:active::after, .lobby-grid .tile:active::after, .tile:active::after,
.game-card:active::after, .shelf-tile:active::after,
.grid-tile.press::after, .lobby-grid .tile.press::after, .tile.press::after,
.game-card.press::after, .shelf-tile.press::after {
  animation: none !important;
  opacity: 1;
}

.grid-tile > *, .lobby-grid .tile > *, .tile > *, .game-card > *, .shelf-tile > * {
  position: relative; z-index: 2;
}

#gbCoinRain {
  position: fixed; inset: 0; z-index: 240;
  pointer-events: none; overflow: hidden;
}
#gbCoinRain .gb-coin {
  position: absolute; top: -8%;
  width: 18px; height: 18px; border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, #fff6c8 0%, #f0c14b 42%, #c9a227 72%, #8a6010 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -2px 3px rgba(80,50,0,.45),
    0 0 0 1px rgba(160,110,20,.5),
    0 2px 6px rgba(0,0,0,.35);
  animation: coinRainFall linear forwards;
}
#gbCoinRain .gb-coin::after {
  content: "Rs";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 0.55rem; font-weight: 900; color: #7a5010;
  text-shadow: 0 1px 0 rgba(255,246,200,.5);
}

/* ===== v29 full-bleed covers + SVG icons ===== */
.gb-ico { display: block; width: 1em; height: 1em; }
.cat-shield-ico { font-size: 1.05rem; display: grid; place-items: center; }
.cat-shield-ico .gb-ico { width: 18px; height: 18px; }
.cat-shield-ico svg { display: block; }
.uw-refresh { display: inline-flex; align-items: center; justify-content: center; }
.uw-refresh .gb-ico { width: 16px; height: 16px; }
.uw-ico .gb-ico { width: 18px; height: 18px; position: relative; z-index: 1; }
.win-trophy .gb-ico, .win-trophy svg { width: 16px; height: 16px; color: #f0c14b; }
.dock-ico svg { display: block; }
.gb-dock-toggle { display: none !important; padding: 0; }
.gb-top-fab span { display: grid; place-items: center; }
.gb-top-fab svg { display: block; }
.dl-x { display: inline-flex; align-items: center; justify-content: center; color: #f5d0a8; }
.fav-heart .gb-ico { width: 14px; height: 14px; }
.fav-heart svg { display: block; }

.grid-tile.has-cover,
.lobby-grid .tile.has-cover,
.tile.has-cover,
.shelf-tile.has-cover {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  min-height: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible;
}
.grid-tile.has-cover::before,
.lobby-grid .tile.has-cover::before,
.tile.has-cover::before,
.shelf-tile.has-cover::before,
.grid-tile.has-cover::after,
.lobby-grid .tile.has-cover::after,
.tile.has-cover::after,
.shelf-tile.has-cover::after {
  display: none;
}
.tile-face {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(240, 193, 75, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 6px 14px rgba(0, 0, 0, 0.35);
  background: #1a080c;
}
.tile-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.tile-face::before {
  content: "";
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(165deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.08) 28%, transparent 48%),
    linear-gradient(180deg, transparent 62%, rgba(0,0,0,.22));
  border-radius: inherit;
}
.tile-face::after {
  content: none;
  display: none;
  animation: none;
  opacity: 0;
}
.grid-tile.has-cover:nth-child(3n+1) .tile-face::after,
.shelf-tile.has-cover:nth-child(3n+1) .tile-face::after { animation-delay: 0s; }
.grid-tile.has-cover:nth-child(3n+2) .tile-face::after,
.shelf-tile.has-cover:nth-child(3n+2) .tile-face::after { animation-delay: 1.1s; }
.grid-tile.has-cover:nth-child(3n) .tile-face::after,
.shelf-tile.has-cover:nth-child(3n) .tile-face::after { animation-delay: 2.2s; }
.grid-tile.has-cover:active .tile-face::after,
.shelf-tile.has-cover:active .tile-face::after,
.grid-tile.has-cover.press .tile-face::after,
.shelf-tile.has-cover.press .tile-face::after {
  animation: none !important;
  opacity: 1;
}
.tile-face > * { position: relative; z-index: 2; }
.tile-face .tile-cover { z-index: 0; }
.tile-face .mx-badge,
.tile-face .badge,
.tile-face .fav-heart { z-index: 4; }
.tile-caption {
  display: block;
  padding: 5px 2px 2px;
  text-align: center;
  line-height: 1.15;
}
.tile-caption .tile-name {
  font-family: "Rajdhani", Outfit, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff6f2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shelf-tile.has-cover {
  flex: 0 0 118px;
  min-height: 0;
}
.shelf-tile.has-cover .tile-caption .tile-name { font-size: 0.8rem; }
.lobby-grid { gap: 8px 7px; }

@media (max-width: 360px) {
  .tile-caption .tile-name { font-size: 0.66rem; }
}



/* ===== Bn786 v31 additive upgrades ===== */
#gbNetToast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom,0));
  transform: translateX(-50%) translateY(16px);
  z-index: 320; max-width: min(420px, 92vw);
  padding: 10px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #3a0a12, #1a0508);
  border: 1px solid rgba(240,193,75,.45);
  color: #ffe08a; font-weight: 800; font-size: 0.82rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
}
#gbNetToast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.vip-bar { margin-top: 6px; width: 100%; }
.vip-bar-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.vip-badge {
  font-size: 0.62rem; font-weight: 900; letter-spacing: .04em;
  padding: 2px 7px; border-radius: 999px; color: #1a1000;
  background: linear-gradient(180deg,#ffe08a,#c9a227);
  border: 1px solid #fff6c8;
}
.vip-badge.shine {
  box-shadow: 0 0 12px rgba(240,193,75,.75), inset 0 1px 0 rgba(255,255,255,.55);
  animation: vipBadgePulse 1.8s ease-in-out infinite;
}
.vip-bar-lab { font-size: 0.62rem; color: rgba(255,224,138,.85); font-weight: 700; }
.vip-track {
  height: 5px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,.1); border: 1px solid rgba(240,193,75,.22);
}
.vip-track i {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg,#c9a227,#ffe08a,#f0c14b);
  box-shadow: 0 0 8px rgba(240,193,75,.55);
}
.uw-avatar em.vip-glow {
  color: #ffe08a; text-shadow: 0 0 8px rgba(240,193,75,.8);
}
@keyframes vipBadgePulse {
  0%,100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}

body.vip-theme {
  --gb-deep: #120206;
  background: #120206 !important;
}
body.vip-theme #app,
body.vip-theme .topbar,
body.vip-theme .dl-strip {
  background: linear-gradient(180deg, #2a0610 0%, #120206 40%) !important;
}
body.vip-theme .brand-name,
body.vip-glow-soft .brand-name {
  text-shadow: 0 0 14px rgba(240,193,75,.55), 0 2px 8px rgba(0,0,0,.5);
}
body.vip-theme .bottomnav {
  border-top: 0 !important;
  box-shadow: none !important;
}
body.vip-theme .tile-face,
body.vip-glow-soft .tile-face {
  border-color: rgba(255,224,138,.55);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 6px 16px rgba(0,0,0,.4), 0 0 12px rgba(240,193,75,.18);
}
.vip-theme-toggle.on .ico {
  box-shadow: inset 0 2px 3px rgba(255,255,255,.65), 0 0 14px rgba(240,193,75,.75);
}

/* VIP panel */
.vip-backdrop {
  position: fixed; inset: 0; z-index: 280;
  background: rgba(8,2,6,.72);
  display: grid; place-items: end center;
  padding: 12px 12px calc(88px + env(safe-area-inset-bottom,0));
  animation: guideFade .2s ease;
}
.vip-modal {
  width: min(420px, 100%);
  position: relative;
  border-radius: 16px 16px 14px 14px;
  background: linear-gradient(180deg, #3a1018 0%, #1a0508 55%);
  border: 1px solid rgba(240,193,75,.45);
  box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 24px rgba(240,193,75,.12);
  padding: 16px 14px 14px;
  animation: guideUp .28s ease;
}
.vip-panel-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.vip-panel-head strong {
  font-family: Rajdhani, Outfit, sans-serif;
  font-size: 1.15rem; font-weight: 800; color: #ffe08a;
}
.vip-panel-card .vip-bar { margin: 0 0 12px; }
.vip-panel-card .vip-bar-top em {
  font-style: normal; font-size: 0.62rem; font-weight: 800; color: #ffe08a;
}
.vip-benefits {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; gap: 6px;
}
.vip-benefits li {
  font-size: 0.78rem; color: rgba(255,246,242,.88); font-weight: 600;
  padding: 7px 10px 7px 28px; border-radius: 8px;
  background: rgba(255,224,138,.06);
  border: 1px solid rgba(240,193,75,.2);
  position: relative;
}
.vip-benefits li::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  background: linear-gradient(135deg, #ffe08a, #c9a227);
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(240, 193, 75, 0.45);
}
.vip-panel-note { margin: 8px 0 0; font-size: 0.68rem; text-align: center; }
.vip-x {
  position: absolute; top: 8px; right: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #ffe08a; font-size: 1.25rem; line-height: 1;
  cursor: pointer;
}

/* Live chat overlay */
.gb-chat {
  position: fixed; inset: 0; z-index: 300; pointer-events: none;
  opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s;
}
.gb-chat.open { pointer-events: auto; opacity: 1; visibility: visible; }
.gb-chat-backdrop {
  position: absolute; inset: 0; background: rgba(8,2,6,.55);
}
.gb-chat-panel {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%) translateY(12px);
  width: min(420px, 100%); height: min(72vh, 560px);
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #2a0c14, #140508);
  border: 1px solid rgba(240,193,75,.4);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -12px 36px rgba(0,0,0,.5);
  transition: transform .25s ease;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.gb-chat.open .gb-chat-panel { transform: translateX(-50%) translateY(0); }
.gb-chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 12px 10px; border-bottom: 1px solid rgba(240,193,75,.22);
}
.gb-chat-agent { display: flex; align-items: center; gap: 10px; }
.gb-chat-av {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  background: #1a0508 center/cover no-repeat;
  border: 2px solid rgba(240,193,75,.55);
  box-shadow: 0 0 0 2px rgba(0,0,0,.35);
}
.gb-chat-online {
  position: absolute; right: -1px; bottom: -1px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #2ee59d; border: 2px solid #1a0508;
  box-shadow: 0 0 6px #2ee59d;
}
.gb-chat-agent strong {
  display: block; font-size: 0.92rem; font-weight: 800; color: #ffe08a;
  font-family: Rajdhani, Outfit, sans-serif;
}
.gb-chat-agent em {
  display: block; font-style: normal; font-size: 0.68rem; font-weight: 700;
  color: #2ee59d;
}
.gb-chat-x {
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(0,0,0,.35); color: #ffe08a; font-size: 1.3rem; cursor: pointer;
}
.gb-chat-msgs {
  flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px;
  -webkit-overflow-scrolling: touch;
}
.gb-chat-row { display: flex; align-items: flex-end; gap: 8px; max-width: 92%; }
.gb-chat-row.user { align-self: flex-end; flex-direction: row-reverse; }
.gb-chat-row.bot { align-self: flex-start; }
.gb-chat-miniav {
  flex: 0 0 28px; width: 28px; height: 28px; border-radius: 50%;
  background: #1a0508 center/cover no-repeat;
  border: 1px solid rgba(240,193,75,.4);
}
.gb-chat-bubble {
  padding: 8px 11px; border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.1);
  color: #fff6f2; font-size: 0.82rem; line-height: 1.35;
}
.gb-chat-row.user .gb-chat-bubble {
  background: linear-gradient(180deg, rgba(196,30,42,.85), rgba(120,16,28,.9));
  border-color: rgba(240,193,75,.35);
}
.gb-chat-bubble p { margin: 0; }
.gb-chat-bubble time {
  display: block; margin-top: 4px; font-size: 0.58rem;
  color: rgba(255,246,242,.45); font-weight: 600;
}
.gb-chat-typing {
  display: inline-flex; gap: 4px; align-items: center; min-width: 48px; padding: 10px 14px;
}
.gb-chat-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: #ffe08a;
  animation: chatDot 1s ease-in-out infinite;
}
.gb-chat-typing span:nth-child(2) { animation-delay: .15s; }
.gb-chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatDot {
  0%,80%,100% { opacity: .25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.gb-chat-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 12px 8px;
  border-top: 1px solid rgba(240,193,75,.12);
  padding-top: 8px;
}
.gb-chat-chip {
  border: 1px solid rgba(240,193,75,.4);
  background: rgba(0,0,0,.28);
  color: #ffe08a;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: Rajdhani, Outfit, sans-serif;
  letter-spacing: .02em;
}
.gb-chat-chip:active { background: rgba(196,30,42,.35); }
.gb-chat-typing-lab {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255,224,138,.85);
}
.gb-chat-compose {
  display: flex; gap: 8px; padding: 10px 12px 12px;
  border-top: 1px solid rgba(240,193,75,.18);
}
.gb-chat-compose input {
  flex: 1; border-radius: 999px; border: 1px solid rgba(240,193,75,.35);
  background: rgba(0,0,0,.35); color: #fff6f2;
  padding: 10px 14px; font-size: 0.88rem; outline: none;
}
.gb-chat-compose input::placeholder { color: rgba(255,246,242,.4); }
.gb-chat-send {
  border: 0; border-radius: 999px; padding: 0 16px;
  font-weight: 800; font-size: 0.82rem; cursor: pointer;
  color: #1a1000;
  background: linear-gradient(180deg, #ffe08a, #c9a227);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.streak-strip {
  margin: 8px 0 10px; padding: 8px 8px 10px;
  border-radius: 12px;
  background: linear-gradient(160deg, rgba(90,12,20,.55), rgba(26,5,8,.8));
  border: 1px solid rgba(240,193,75,.28);
}
.streak-head {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.72rem; font-weight: 800; color: #ffe08a; margin-bottom: 8px;
}
.streak-head em { font-style: normal; color: rgba(255,246,242,.75); font-weight: 700; }
.streak-days {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.streak-day {
  border: 1px solid rgba(240,193,75,.28); border-radius: 8px;
  background: rgba(0,0,0,.28); color: #fff6f2;
  padding: 6px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 0.55rem; font-weight: 800;
}
.streak-day strong { font-size: 0.58rem; color: #ffe08a; }
.streak-day.today {
  border-color: #f0c14b;
  background: linear-gradient(180deg, rgba(255,224,138,.22), rgba(196,30,42,.35));
  box-shadow: 0 0 10px rgba(240,193,75,.35);
}
.streak-day.done { opacity: .55; filter: grayscale(.2); }
.streak-day.locked { opacity: .4; }

.live-dealer-strip { margin: 0 0 12px; }
.live-dealer-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-size: 0.72rem; font-weight: 800; color: rgba(255,246,242,.85);
}
.live-pulse {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; font-size: 0.62rem; font-weight: 900;
  color: #fff; background: #e11d2e; letter-spacing: .06em;
  box-shadow: 0 0 0 0 rgba(225,29,46,.55);
  animation: livePulse 1.4s ease-out infinite;
}
.live-pulse::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff;
}
@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(225,29,46,.55); }
  70% { box-shadow: 0 0 0 10px rgba(225,29,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(225,29,46,0); }
}
.live-dealer-row {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.live-dealer-row::-webkit-scrollbar { display: none; }
.live-card {
  flex: 0 0 132px; border: 0; border-radius: 12px; padding: 0;
  position: relative; overflow: hidden; text-align: left; color: #fff;
  background: #2a0a10; border: 1px solid rgba(240,193,75,.32);
  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.live-card-img {
  display: block; height: 92px; background: #f5e6d3;
  position: relative; overflow: hidden;
}
.live-card-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  display: block; opacity: 0; transition: opacity .2s ease;
}
.live-card-img.cover-ready img { opacity: 1; }
.live-card-img.is-loading::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, #e8d5c0 25%, #f7ebe0 37%, #e8d5c0 63%);
  background-size: 200% 100%;
  animation: skelShimmer 1.1s linear infinite;
}
.live-card-meta {
  display: flex; flex-direction: column; gap: 1px; padding: 6px 8px 8px;
}
.live-card-meta strong { font-size: 0.78rem; font-family: Rajdhani, Outfit, sans-serif; }
.live-card-meta span { font-size: 0.62rem; color: #ffe08a; font-weight: 700; }
.live-dot {
  position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%;
  background: #2ee59d; box-shadow: 0 0 0 2px rgba(0,0,0,.45), 0 0 8px #2ee59d;
}

.hero-carousel { position: relative; overflow: hidden; }
.motion-hero {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.mh-logo {
  position: absolute; right: 10px; top: 10px; width: 42px; height: 42px; border-radius: 50%;
  background: center/cover no-repeat;
  box-shadow: 0 0 0 2px rgba(240,193,75,.45), 0 4px 12px rgba(0,0,0,.4);
  animation: mhFloat 3.6s ease-in-out infinite;
  opacity: .92;
}
.mh-coin {
  position: absolute; width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #fff6c8, #f0c14b 55%, #a67c1a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.4);
  animation: mhCoinDrift 4.8s linear infinite;
  opacity: .75;
}
.mh-coin.c1 { left: 12%; top: 18%; animation-delay: 0s; }
.mh-coin.c2 { left: 28%; top: 62%; width: 10px; height: 10px; animation-delay: .8s; }
.mh-coin.c3 { left: 58%; top: 22%; width: 11px; height: 11px; animation-delay: 1.4s; }
.mh-coin.c4 { left: 74%; top: 58%; animation-delay: 2.1s; }
.mh-spark {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: #ffe08a; box-shadow: 0 0 10px #f0c14b; opacity: .55;
  animation: mhSpark 2.4s ease-in-out infinite;
}
.mh-spark.s1 { left: 40%; top: 30%; }
.mh-spark.s2 { left: 66%; top: 48%; animation-delay: 1s; }
@keyframes mhFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.04); }
}
@keyframes mhCoinDrift {
  0% { transform: translateY(0) rotate(0deg); opacity: .2; }
  20% { opacity: .8; }
  100% { transform: translateY(28px) rotate(220deg); opacity: .15; }
}
@keyframes mhSpark {
  0%,100% { transform: scale(.7); opacity: .25; }
  50% { transform: scale(1.35); opacity: .8; }
}

.tile-face.is-loading::before {
  background:
    linear-gradient(110deg, rgba(60,20,28,.9) 25%, rgba(120,40,50,.95) 37%, rgba(60,20,28,.9) 63%);
  background-size: 200% 100%;
  animation: skelShimmer 1.1s linear infinite;
  z-index: 5; opacity: 1;
}
.tile-face.is-loading .tile-cover { opacity: 0; }
.tile-face.cover-ready .tile-cover,
.tile-face.is-loaded .tile-cover { opacity: 1; transition: opacity .28s ease; }
.tile-face.is-loaded .tile-cover { transition: none; }
.tile-face.is-loaded.is-loading::before,
.tile-face.cover-ready.is-loading::before { display: none; }
@keyframes skelShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.tile-poster {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none;
  padding: 18px 6px 6px;
  background: linear-gradient(180deg, transparent 0%, rgba(10,2,6,.82) 55%, rgba(10,2,6,.95) 100%);
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
}
.tile-poster-name {
  font-family: Rajdhani, Outfit, sans-serif; font-weight: 800; font-size: 0.72rem;
  color: #fff; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0,0,0,.75);
  max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tile-poster-win {
  font-size: 0.58rem; font-weight: 900; letter-spacing: .08em;
  color: #1a1000; background: linear-gradient(180deg,#ffe08a,#f0c14b);
  padding: 1px 6px; border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.mx-badge {
  top: 6px; left: 6px;
  background: linear-gradient(180deg,#ff4d5e,#c41e2a) !important;
  border: 1px solid rgba(255,224,138,.65);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.btn, .btn-go, .btn-dl, .btn-gold, .btn-red, .uw-act {
  position: relative; overflow: hidden;
}
.nav-item { position: relative; }
.btn:active, .btn-go:active, .btn-dl:active, .btn-gold:active, .btn-red:active,
.uw-act:active, .nav-item:active, .haptic-press {
  transform: scale(0.93) !important;
  filter: brightness(1.14);
}
.haptic-ripple {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; pointer-events: none; z-index: 5;
  background: radial-gradient(circle, rgba(255,246,200,.75) 0%, rgba(255,224,138,.25) 45%, transparent 70%);
  animation: hapticRipple .45s ease-out forwards;
}
@keyframes hapticRipple {
  from { transform: scale(1); opacity: .9; }
  to { transform: scale(18); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-hero, .live-pulse, .vip-badge.shine, .tile-face.is-loading::before, .gb-chat-typing span { animation: none !important; }
}

/* Perf lite mode — fewer GPU filters while scrolling tiles */
html.gb-lite .tile-face,
body.gb-lite .tile-face,
body.gb-boot .tile-face,
html.perf-low .tile-face,
html[data-perf="low"] .tile-face {
  filter: none !important;
}
html.gb-lite .motion-hero,
body.gb-lite .motion-hero,
html.perf-low .motion-hero,
html[data-perf="low"] .motion-hero { display: none !important; }

.tile-grid, .lobby-grid, .live-dealer-row {
  -webkit-overflow-scrolling: touch;
  content-visibility: auto;
  contain: layout style;
}
.grid-tile, .tile, .shelf-tile {
  content-visibility: auto;
  contain-intrinsic-size: 120px 148px;
  contain: layout paint style;
}

/* ===== v39 scroll-safe + low-end (kill shine jank) ===== */
/* Low-end: silver flare OFF entirely — never animate tile shine */
html.perf-low .tile-face::after,
html[data-perf="low"] .tile-face::after,
html.perf-low .grid-tile::after,
html[data-perf="low"] .grid-tile::after,
html.perf-low .lobby-grid .tile::after,
html[data-perf="low"] .lobby-grid .tile::after,
html.perf-low .tile::after,
html[data-perf="low"] .tile::after,
html.perf-low .game-card::after,
html[data-perf="low"] .game-card::after,
html.perf-low .shelf-tile::after,
html[data-perf="low"] .shelf-tile::after,
html.perf-low .tile-flare,
html[data-perf="low"] .tile-flare,
.perf-low .tile-flare {
  animation: none !important;
  opacity: 0 !important;
  content: none !important;
  display: none !important;
  background: none !important;
  transform: none !important;
}
/* Low-end: static soft gloss only (no animated layer) */
html.perf-low .tile-face::before,
html[data-perf="low"] .tile-face::before {
  animation: none !important;
}
html.perf-low .live-pulse,
html[data-perf="low"] .live-pulse {
  animation: none !important;
  box-shadow: none !important;
}
html.perf-low .vip-badge.shine,
html[data-perf="low"] .vip-badge.shine {
  animation: none !important;
  box-shadow: 0 0 4px rgba(240,193,75,.35) !important;
  filter: none !important;
}
html.perf-low .vip-track i,
html[data-perf="low"] .vip-track i {
  box-shadow: none !important;
}
html.perf-low body.vip-theme .tile-face,
html[data-perf="low"] body.vip-theme .tile-face,
html.perf-low .tile-face,
html[data-perf="low"] .tile-face {
  box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
  border-color: rgba(240,193,75,.28) !important;
}
html.perf-low .topbar,
html[data-perf="low"] .topbar,
html.perf-low .bottomnav,
html[data-perf="low"] .bottomnav,
html.perf-low .gb-dock-rail,
html[data-perf="low"] .gb-dock-rail,
html.perf-low .fav-heart,
html[data-perf="low"] .fav-heart,
html.perf-low .pc-backdrop,
html[data-perf="low"] .pc-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.perf-low .tile-face.is-loading::before,
html[data-perf="low"] .tile-face.is-loading::before {
  animation: none !important;
  background: rgba(60,20,28,.92) !important;
}
html.perf-low .mh-logo,
html.perf-low .mh-coin,
html.perf-low .mh-spark,
html[data-perf="low"] .mh-logo,
html[data-perf="low"] .mh-coin,
html[data-perf="low"] .mh-spark {
  animation: none !important;
}
html.perf-low .nav-center .nav-ico,
html[data-perf="low"] .nav-center .nav-ico {
  animation: none !important;
  filter: none !important;
}
html.perf-low #gbCoinRain .gb-coin,
html[data-perf="low"] #gbCoinRain .gb-coin {
  box-shadow: none !important;
}
html.perf-low .section-home-away .motion-hero,
html[data-perf="low"] .section-home-away .motion-hero,
body.home-away .motion-hero {
  display: none !important;
  animation: none !important;
}
html.perf-low .lobby-grid-wrap,
html[data-perf="low"] .lobby-grid-wrap,
html.perf-low .tile-grid,
html[data-perf="low"] .tile-grid {
  content-visibility: auto;
  contain-intrinsic-size: auto 480px;
}

/* While scrolling (all devices): freeze tile shine + heavy GPU effects */
body.is-scrolling .tile-face::after,
body.is-scrolling .grid-tile::after,
body.is-scrolling .lobby-grid .tile::after,
body.is-scrolling .tile::after,
body.is-scrolling .game-card::after,
body.is-scrolling .shelf-tile::after,
body.is-scrolling .motion-hero,
body.is-scrolling .live-pulse,
body.is-scrolling .vip-badge.shine,
body.is-scrolling .tile-face.is-loading::before {
  animation: none !important;
}
body.is-scrolling .tile-face::after,
body.is-scrolling .grid-tile::after,
body.is-scrolling .lobby-grid .tile::after,
body.is-scrolling .tile::after,
body.is-scrolling .game-card::after,
body.is-scrolling .shelf-tile::after {
  opacity: 0 !important;
  visibility: hidden !important;
}
body.is-scrolling .motion-hero {
  visibility: hidden !important;
}
body.is-scrolling .topbar,
body.is-scrolling .bottomnav,
body.is-scrolling .gb-dock-rail,
body.is-scrolling .fav-heart {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-scrolling .tile-face {
  box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
  filter: none !important;
}

.gb-load-more {
  display: block;
  width: 100%;
  margin: 10px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(240,193,75,.4);
  border-radius: 10px;
  background: rgba(0,0,0,.28);
  color: #ffe08a;
  font-weight: 800;
  font-size: 0.85rem;
  font-family: Rajdhani, Outfit, sans-serif;
  cursor: pointer;
}
.gb-load-more:active { filter: brightness(1.12); }

/* ===== v40 lag-free lobby ===== */
html.perf-low .nav-get .nav-wheel,
html.gb-lite .nav-get .nav-wheel,
html.perf-low .nav-get .nav-coin,
html.gb-lite .nav-get .nav-coin,
body.is-scrolling .nav-get .nav-wheel,
body.is-scrolling .nav-get .nav-coin {
  animation: none !important;
}
html.perf-low .nav-get .nav-wheel,
html.gb-lite .nav-get .nav-wheel,
body.is-scrolling .nav-get .nav-wheel {
  box-shadow: 0 6px 14px rgba(0,0,0,.45), 0 0 0 2px rgba(240,193,75,.3) !important;
}
html.perf-low .nav-get .nav-coin.c3,
html.perf-low .nav-get .nav-coin.c4,
html.gb-lite .nav-get .nav-coin.c3,
html.gb-lite .nav-get .nav-coin.c4 {
  /* keep Get coins visible — do not hide dock chrome */
}

html.perf-low .cat-shield,
html.gb-lite .cat-shield,
body.is-scrolling .cat-shield {
  filter: none !important;
  animation: none !important;
}
html.perf-low .cat-shield.active,
html.gb-lite .cat-shield.active,
body.is-scrolling .cat-shield.active {
  filter: none !important;
  animation: none !important;
}

html.perf-low .mx-badge,
html.gb-lite .mx-badge,
body.is-scrolling .mx-badge,
html.perf-low .badge,
body.is-scrolling .badge {
  animation: none !important;
}

html.perf-low .topbar,
html.gb-lite .topbar,
html.perf-low .bottomnav,
html.gb-lite .bottomnav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html.perf-low .bottomnav,
html.gb-lite .bottomnav {
  /* Keep red/gold dock — do not restyle */
}

/* Default: no infinite tile flare */
.tile-face::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
html:not(.perf-low):not(.gb-lite) .tile-face.tile-flare-on::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}
body.is-scrolling .tile-face.tile-flare-on::after {
  animation: none !important;
  opacity: 0 !important;
  display: none !important;
}

/* ===== v40 Aviator / Chicken pro UI ===== */
.game-shell.pro-focus .game-girl { display: none; }
.game-shell.pro-focus { display: block; }
.game-shell.pro-focus .game-panel { max-width: 100%; }

.av-pro {
  display: grid;
  gap: 8px;
}
.av-history {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.av-history::-webkit-scrollbar { display: none; }
.av-history span {
  flex: 0 0 auto;
  min-width: 48px;
  text-align: center;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  font-family: Rajdhani, Outfit, sans-serif;
  background: rgba(255,255,255,.08);
  color: #ff8a9a;
}
.av-history span.up { background: rgba(46,229,157,.18); color: #2ee59d; }
.av-history span.mid { background: rgba(240,193,75,.18); color: #f0c14b; }

.av-stage-wrap {
  display: grid;
  grid-template-columns: 1fr 118px;
  gap: 8px;
  align-items: stretch;
}
@media (max-width: 380px) {
  .av-stage-wrap { grid-template-columns: 1fr; }
  .av-bets-feed { max-height: 120px; }
}
.av-sky {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #0b1220;
  min-height: 260px;
}
.av-sky .game-canvas { display: block; width: 100%; height: 280px; }
.av-mult {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%,-50%);
  font-family: Rajdhani, Outfit, sans-serif;
  font-size: 2.6rem; font-weight: 800; letter-spacing: .02em;
  color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.55);
  pointer-events: none; z-index: 2;
}
.av-mult.fly { color: #2ee59d; }
.av-mult.crash { color: #ff4d5e; }
.av-status {
  position: absolute; left: 0; right: 0; bottom: 10px;
  text-align: center; font-size: 0.78rem; font-weight: 700;
  color: rgba(255,246,242,.85); letter-spacing: .06em; z-index: 2;
  text-transform: uppercase;
}
.av-bets-feed, .ck-bets-feed, .pro-live-feed {
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(0,0,0,.35);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 160px;
  max-height: 280px;
}
.av-feed-head, .ck-feed-head, .pro-live-feed .feed-head {
  padding: 8px 10px;
  font-size: 0.68rem; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: #ffe08a;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.04);
}
.av-feed-list, .ck-feed-list, .pro-live-feed .feed-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.av-bet-row, .ck-bet-row, .pro-live-feed .feed-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 6px;
  align-items: center;
  padding: 5px 10px;
  font-size: 0.68rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.av-bet-row .nm, .ck-bet-row .nm, .pro-live-feed .nm {
  font-weight: 700; color: #fff6f2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.av-bet-row .st, .ck-bet-row .st { color: #f5d0a8; font-weight: 700; }
.av-bet-row .mx, .ck-bet-row .mx { font-weight: 800; color: #9aa3b5; min-width: 42px; text-align: right; }
.av-bet-row.cashed .mx, .ck-bet-row.cashed .mx { color: #2ee59d; }
.av-bet-row.lost .mx, .ck-bet-row.lost .mx { color: #ff6b7a; }

.av-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
@media (max-width: 360px) {
  .av-dual { grid-template-columns: 1fr; }
}
.av-panel {
  border-radius: 12px;
  border: 1px solid rgba(240,193,75,.28);
  background: linear-gradient(180deg, rgba(60,16,24,.9), rgba(20,6,10,.95));
  padding: 10px;
  display: grid;
  gap: 8px;
}
.av-panel-lab {
  font-size: 0.7rem; font-weight: 800; letter-spacing: .06em;
  color: #ffe08a; text-transform: uppercase;
}
.av-panel .chips { gap: 4px; flex-wrap: wrap; }
.av-panel .chip { padding: 6px 8px; font-size: 0.68rem; }
.av-auto {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.68rem; color: #f5d0a8; font-weight: 700;
}
.av-auto input[type="number"] {
  width: 64px; border-radius: 8px; border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.35); color: #fff; padding: 5px 6px; font-weight: 800;
}
.av-auto input[type="checkbox"] { accent-color: #e11d2e; width: 16px; height: 16px; }
.av-panel-actions { display: grid; grid-template-columns: 1fr; gap: 6px; }
.av-panel-actions .btn { padding: 11px 8px; font-size: 0.82rem; }
.av-panel .btn-cash { background: linear-gradient(180deg,#2ee59d,#0f8f5c); color: #04140c; }
.av-panel.is-flying .btn-bet { display: none; }
.av-panel:not(.is-flying) .btn-cash { display: none; }
.av-panel.is-queued .btn-bet { opacity: .7; }

.ck-pro { display: grid; gap: 8px; }
.ck-diff {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
}
.ck-diff button {
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px; padding: 8px 4px;
  background: rgba(0,0,0,.28); color: #fff6f2;
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
}
.ck-diff button.active {
  border-color: rgba(240,193,75,.7);
  background: linear-gradient(180deg,#e11d2e,#8a1020);
  box-shadow: 0 0 0 1px rgba(240,193,75,.35);
}
.ck-board {
  position: relative;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: #123018;
}
.ck-board .game-canvas { display: block; width: 100%; height: 340px; }
.ck-hud {
  position: absolute; left: 10px; right: 10px; top: 8px;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 2; pointer-events: none;
}
.ck-hud .ck-mult {
  font-family: Rajdhani, Outfit, sans-serif;
  font-size: 1.45rem; font-weight: 800; color: #ffe08a;
  text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.ck-hud .ck-mode {
  font-size: 0.68rem; font-weight: 800; letter-spacing: .06em;
  color: #fff; background: rgba(0,0,0,.45); padding: 4px 8px; border-radius: 999px;
}
.ck-layout {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 8px;
}
@media (max-width: 380px) {
  .ck-layout { grid-template-columns: 1fr; }
}
.ck-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.ck-actions .btn { padding: 12px 6px; font-size: 0.78rem; }
.ck-history {
  display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 6px;
}
.ck-history span {
  flex: 0 0 auto; min-width: 44px; text-align: center;
  padding: 3px 7px; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
  background: rgba(255,255,255,.08); color: #ff8a9a;
}
.ck-history span.up { background: rgba(46,229,157,.18); color: #2ee59d; }

.gs-stage {
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(240,193,75,.1), transparent 55%),
    linear-gradient(180deg, #241018, #10060a) !important;
}
.game-stage, .roulette-arena, .mines-grid, .tyre-wrap {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
}

.pro-game-meta {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 6px;
}
.pro-game-meta .muted { margin: 0; font-size: 0.72rem; }
.pro-live-feed.compact { max-height: 96px; min-height: 72px; margin-bottom: 8px; }
.crash-cash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }


/* ===== v42 Spribe Aviator + InOut Chicken landscape ===== */
body.gb-land-game .bottomnav,
body.gb-land-game .dl-strip,
body.gb-land-game .gb-top-fab,
html.gb-land-game .bottomnav { display: none !important; }
/* Hide download strip during any game (not only landscape Aviator/Chicken) */
body.gb-in-game .dl-strip { display: none !important; }
body.gb-in-game.dl-hidden #app,
body.gb-in-game #app { padding-top: 72px; }
body.dl-hidden.gb-in-game #app { padding-top: 72px; }

/* Hide lobby chrome during any game — bonus/options stay on home only */
body.gb-in-game .topbar,
body.gb-in-game .bottomnav,
body.gb-in-game .dl-strip,
body.gb-in-game .gb-top-fab { display: none !important; }
body.gb-in-game.dl-hidden #app,
body.gb-in-game #app { padding-top: 0 !important; padding-bottom: 0 !important; }

/* In-game exit — NEVER show orange/X close over slots (lobby/PC only) */
.gb-game-close,
body.gb-in-game .gb-game-close,
body.gb-slot-fs .gb-game-close,
body.gb-in-game .game-exit-btn,
body.gb-slot-fs .game-exit-btn,
.game-exit-btn {
  display: none !important;
}
/* Dark chevron back — not an X, never orange */
.game-back-btn {
  position: absolute;
  top: max(8px, env(safe-area-inset-top));
  left: max(8px, env(safe-area-inset-left));
  z-index: 90;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.62);
  color: #fff;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 10px rgba(0,0,0,.4);
  display: grid;
  place-items: center;
  padding: 0;
}
.game-back-btn span { display: block; margin-top: -2px; }
.game-back-btn:active { transform: scale(.94); background: rgba(0,0,0,.78); }
/* Keep PC close / bonus X off the slot canvas */
body.gb-in-game .pc-close,
body.gb-in-game .pc-close-fab,
body.gb-slot-fs .pc-close,
body.gb-slot-fs .pc-close-fab { display: none !important; }

/* Portrait slots fullscreen — match Aviator/Chicken immersion (portrait) */
body.gb-in-game .gb-top-fab { display: none !important; }

body.gb-slot-fs .topbar,
body.gb-slot-fs .bottomnav,
body.gb-slot-fs .dl-strip { display: none !important; }
body.gb-slot-fs #app {
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
  margin: 0 !important;
}
body.gb-slot-fs #view,
body.gb-slot-fs .view {
  height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}
body.gb-slot-fs .play-shell.slot-shell {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}
body.gb-slot-fs .fb-mount,
body.gb-slot-fs .jj-mount,
body.gb-slot-fs .jl-mount,
body.gb-slot-fs .mp2-mount,
body.gb-slot-fs .fw-mount,
body.gb-slot-fs .tr-mount,
body.gb-slot-fs .td-mount,
body.gb-slot-fs .fb-root,
body.gb-slot-fs .jj-root,
body.gb-slot-fs .jl-root,
body.gb-slot-fs .mp2-root,
body.gb-slot-fs .fw-root,
body.gb-slot-fs .tr-root,
body.gb-slot-fs .td-root,
body.gb-slot-fs .fg-game,
body.gb-slot-fs .garuda-shell {
  min-height: 100dvh !important;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
}
body.gb-slot-fs .mp2-stage,
body.gb-slot-fs .fw-stage,
body.gb-slot-fs .fg-stage,
body.gb-slot-fs .jj-stage,
body.gb-slot-fs .jl-stage {
  min-height: 100dvh;
  height: 100dvh;
  box-sizing: border-box;
  padding-top: max(48px, calc(env(safe-area-inset-top) + 36px));
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
}
body.gb-slot-fs .fg-game {
  min-height: 100dvh !important;
  height: 100dvh;
  aspect-ratio: unset;
  max-height: none;
  width: 100%;
  border-radius: 0;
}
body.gb-slot-fs .fg-stage {
  border-radius: 0;
  border: 0;
  min-height: 100dvh;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
body.gb-slot-fs .fg-board {
  flex: 1;
  min-height: 0;
  align-content: center;
}
body.gb-slot-fs .jj-board-wrap,
body.gb-slot-fs .jl-board-wrap,
body.gb-slot-fs .fb-reels-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  position: relative;
  z-index: 2;
}
body.gb-slot-fs .jj-board,
body.gb-slot-fs .fb-reels {
  width: min(100%, calc(100dvh - 220px));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  margin: 0 auto;
  flex-shrink: 0;
}
/* Money Pot portrait — stacked layout; compact reel; symbols scaled inside cells */
body.gb-slot-fs .mp2-stage {
  flex: 1 1 auto;
  min-height: 0;
  gap: 3px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
}
body.gb-slot-fs .mp2-topbar,
body.gb-slot-fs .mp2-extra-row,
body.gb-slot-fs .mp2-jackpots {
  flex: 0 0 auto;
  position: relative;
  z-index: 4;
  flex-shrink: 0;
}
body.gb-slot-fs .mp2-extra-row {
  margin-bottom: 2px;
}
body.gb-slot-fs .mp2-reel-grow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  position: relative;
  z-index: 1;
  margin: 0;
  flex-shrink: 0;
}
body.gb-slot-fs .mp2-reel-frame {
  width: min(76vw, 268px);
  max-width: 268px;
  height: auto;
  aspect-ratio: 1;
  min-height: unset;
  margin: 0 auto 2px;
  z-index: 1;
  flex-shrink: 0;
}
body.gb-slot-fs .mp2-reels {
  min-height: 0;
  height: 100%;
  width: 100%;
}
body.gb-slot-fs .mp2-cell {
  min-height: 0;
  aspect-ratio: 1;
}
body.gb-slot-fs .mp2-sym-inner {
  transform: scale(1.22);
  transform-origin: center center;
}
body.gb-slot-fs .mp2-win-panel {
  flex: 0 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 10px;
  margin: 6px 0 0;
  padding: 6px 10px 4px;
  z-index: 3;
  background: rgba(0,0,0,.5);
  border-radius: 8px;
  border-top: 1px solid rgba(240,193,75,.22);
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
}
body.gb-slot-fs .mp2-win-panel p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}
body.gb-slot-fs .mp2-score {
  justify-self: center;
  text-align: center;
}
body.gb-slot-fs .mp2-cheer-zone {
  flex: 0 0 auto;
  height: min(13dvh, 100px);
  max-height: 100px;
  min-height: 68px;
  overflow: hidden;
  margin: 2px 0 0;
  flex-shrink: 0;
}
body.gb-slot-fs .mp2-coin-bed {
  flex: 0 0 auto;
  margin-top: auto;
  flex-shrink: 0;
  position: relative;
  z-index: 4;
  width: 100%;
}
body.gb-slot-fs .mp2-controls {
  display: grid;
  grid-template-columns: 28px 28px minmax(48px, 0.85fr) minmax(64px, 1.35fr) 32px 28px;
  align-items: center;
  gap: 4px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 6px max(8px, env(safe-area-inset-bottom));
  flex-wrap: unset;
}
body.gb-slot-fs .mp2-bet-ctrl {
  min-width: 0;
}
body.gb-slot-fs .mp2-spin-btn {
  flex: unset;
  width: 100%;
  min-width: 0;
  height: 40px;
  font-size: 12px;
}
body.gb-slot-fs .mp2-round-btn.mp2-auto {
  width: 32px;
  height: 32px;
}
/* Compact slot footers — keep SPIN fully visible on narrow portrait */
body.gb-slot-fs .jj-hud,
body.gb-slot-fs .slot-hud,
body.gb-slot-fs .jl-root .jj-hud,
body.gb-slot-fs .fb-hud,
body.gb-slot-fs .fw-hud,
body.gb-slot-fs .fg-hud {
  flex-wrap: nowrap;
  gap: 2px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 6px 4px max(6px, env(safe-area-inset-bottom));
  padding-right: max(4px, env(safe-area-inset-right));
  overflow: hidden;
}
/* Never show secondary controls on bottom bar */
body.gb-slot-fs .fg-hud .fg-info,
body.gb-slot-fs .fg-hud .fg-gear,
body.gb-slot-fs .fg-hud .fg-ex,
body.gb-slot-fs .fg-hud .fg-gift {
  display: none !important;
}
body.gb-slot-fs .jj-stat,
body.gb-slot-fs .jj-bet,
body.gb-slot-fs .fb-stat,
body.gb-slot-fs .fb-bet-ctrl,
body.gb-slot-fs .fw-stat,
body.gb-slot-fs .fw-bet-ctrl,
body.gb-slot-fs .fg-stat,
body.gb-slot-fs .fg-bet {
  flex: 1 1 0;
  min-width: 0;
  font-size: 9px;
}
body.gb-slot-fs .jj-stat strong,
body.gb-slot-fs .fb-stat strong,
body.gb-slot-fs .fw-stat strong,
body.gb-slot-fs .fg-stat strong,
body.gb-slot-fs .fg-bet b {
  font-size: 11px;
}
body.gb-slot-fs .jj-bet-row,
body.gb-slot-fs .fb-bet-row,
body.gb-slot-fs .fw-bet-row,
body.gb-slot-fs .fg-bet-row {
  gap: 3px;
}
body.gb-slot-fs .jj-bet-row button,
body.gb-slot-fs .fb-bet-row button,
body.gb-slot-fs .fw-bet-row button,
body.gb-slot-fs .fg-bet-row button {
  width: 20px;
  height: 20px;
  font-size: 13px;
}
body.gb-slot-fs .jj-bet-row b,
body.gb-slot-fs .fb-bet-row b,
body.gb-slot-fs .fw-bet-row b,
body.gb-slot-fs .fg-bet-row b {
  font-size: 12px;
  min-width: 16px;
}
body.gb-slot-fs .jj-turbo,
body.gb-slot-fs .jj-auto,
body.gb-slot-fs .fb-turbo,
body.gb-slot-fs .fb-auto,
body.gb-slot-fs .fw-turbo,
body.gb-slot-fs .fw-auto,
body.gb-slot-fs .fg-turbo,
body.gb-slot-fs .fg-auto {
  width: 26px;
  height: 26px;
  font-size: 11px;
}
body.gb-slot-fs button.jj-spin,
body.gb-slot-fs #jjSpin,
body.gb-slot-fs .jl-root button.jj-spin,
body.gb-slot-fs .fb-spin,
body.gb-slot-fs .fw-spin,
body.gb-slot-fs .fg-spin {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}
body.gb-slot-fs .fg-spin-core { inset: 6px; }
body.gb-slot-fs .fg-top {
  flex-shrink: 0;
  padding: 4px 6px 2px;
  padding-left: max(44px, calc(env(safe-area-inset-left) + 40px));
  gap: 4px;
  min-width: 0;
}
body.gb-slot-fs .fg-top-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}
body.gb-slot-fs .fg-top-actions .fg-info {
  width: 26px;
  height: 26px;
  font-size: .68rem;
  flex-shrink: 0;
}
body.gb-slot-fs .fg-top-actions .fg-ex {
  width: 26px;
  height: 26px;
  font-size: .54rem;
  flex-shrink: 0;
  padding: 0;
}
body.gb-slot-fs .fg-top-actions .fg-ex span {
  width: 12px;
  height: 12px;
  font-size: .48rem;
  right: -2px;
  bottom: -1px;
}
body.gb-slot-fs .fg-top-actions .fg-ex-up {
  top: 1px;
  border-left-width: 3px;
  border-right-width: 3px;
  border-bottom-width: 4px;
}
body.gb-slot-fs .fg-logo {
  min-width: 0;
  overflow: hidden;
}
body.gb-slot-fs .fg-logo-mark {
  display: block;
  font-size: clamp(.68rem, 2.8vw, 1rem);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
body.gb-slot-fs .fg-gift {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
body.gb-slot-fs .fg-gift-ico { width: 11px; height: 11px; }
body.gb-slot-fs .fg-stat em,
body.gb-slot-fs .fg-bet em {
  font-size: .5rem;
}
body.gb-slot-fs .fg-cost-desk,
body.gb-slot-fs .fg-bet small { display: none; }
body.gb-slot-fs .fg-coin { display: none; }
body.gb-slot-fs .fg-bet-row { padding: 2px 4px; gap: 2px; }
body.gb-slot-fs .fg-bolt { width: 7px; height: 12px; }
body.gb-slot-fs .fg-auto-ico { width: 12px; height: 12px; }
body.gb-slot-fs .fg-spin-label { font-size: .5rem; letter-spacing: .06em; }
body.gb-slot-fs .jj-top,
body.gb-slot-fs .jl-top {
  flex-shrink: 0;
  margin-bottom: 4px;
}
body.gb-slot-fs .jj-status,
body.gb-slot-fs .jl-status {
  flex-shrink: 0;
  margin: 2px 0 0;
  font-size: 10px;
}
body.gb-slot-fs button.jj-spin .jj-spin-ring,
body.gb-slot-fs #jjSpin .jj-spin-ring {
  inset: -3px;
}
#gbQuickDock,
.gb-quick-dock,
.gb-dock-toggle,
body.gb-in-game #gbQuickDock,
body.gb-in-game .gb-quick-dock,
body.gb-slot-fs #gbQuickDock,
body.gb-slot-fs .gb-quick-dock,
body.gb-land-game #gbQuickDock,
body.gb-land-game .gb-quick-dock,
#gbQuickDock.gb-dock-suppressed,
.gb-quick-dock.gb-dock-suppressed,
#gbQuickDock[hidden],
.gb-quick-dock[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}
/* ambient slot particles */
.gb-slot-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.gb-slot-ambient i {
  position: absolute;
  bottom: -8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe08a, #f0c14b 60%, transparent);
  opacity: 0;
  animation: gbSlotFloat 3.2s ease-in infinite;
}
.gb-slot-ambient--fruit i { background: radial-gradient(circle, #fda4af, #f43f5e 55%, transparent); }
.gb-slot-ambient--joker i { background: radial-gradient(circle, #e879f9, #a855f7 55%, transparent); }
.gb-slot-ambient--pot i { background: radial-gradient(circle, #fde68a, #d97706 55%, transparent); }
.gb-slot-ambient--box i { background: radial-gradient(circle, #fde68a, #ef4444 55%, transparent); }
.gb-slot-ambient--fish i { background: radial-gradient(circle, #7dd3fc, #0284c7 55%, transparent); }
@keyframes gbSlotFloat {
  0% { transform: translateY(0) scale(.6); opacity: 0; }
  15% { opacity: .85; }
  100% { transform: translateY(-110dvh) scale(1.1); opacity: 0; }
}
/* Money Pot cheer zone — BELOW win panel / ABOVE controls; never covers reels */
.mp2-cheer-zone {
  flex: 0 0 auto;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  min-height: 0;
  height: min(14dvh, 110px);
  max-height: 110px;
  padding: 2px 6px 0;
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.mp2-cheer-girl {
  flex: 1;
  max-width: 46%;
  height: 100%;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  border: 1.5px solid rgba(240,193,75,.45);
  box-shadow: 0 -8px 24px rgba(240,193,75,.15);
  animation: mp2CheerBounce 2.4s ease-in-out infinite;
}
.mp2-cheer-girl img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  filter: brightness(1.12) saturate(1.15);
}
.mp2-cheer-r { animation-delay: .6s; }
.mp2-cheer-badge {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .12em;
  color: #fde68a;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(240,193,75,.35);
  animation: mp2CheerPulse 1.8s ease-in-out infinite;
  white-space: nowrap;
}
@keyframes mp2CheerBounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes mp2CheerPulse {
  0%,100% { opacity: .85; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.06); }
}
.mp2-cheer-win .mp2-cheer-girl { animation-duration: .9s; filter: brightness(1.2); }
.mp2-cheer-win .mp2-cheer-badge { color: #4ade80; border-color: #4ade80; }
/* Keep BIG WIN / loaders truly hidden when [hidden] */
.fb-bigwin[hidden], .fb-loader[hidden], .fb-stage[hidden],
.jj-bigwin[hidden], .jj-loader[hidden], .jj-stage[hidden], .jj-winflash[hidden],
.mp2-bigwin[hidden], .mp2-loader[hidden], .mp2-stage[hidden],
.fw-loader[hidden], .fw-stage[hidden], .fw-flash[hidden] {
  display: none !important;
}
body.is-installed-app .dl-strip { display: none !important; }
body.is-installed-app:not(.dl-hidden) #app { padding-top: 72px; }
body.gb-land-game .topbar { display: none !important; }
body.gb-land-game #app {
  max-width: 100% !important;
  padding: 0 !important;
  min-height: 100vh;
  min-height: 100dvh;
}
body.gb-land-game #app:has(.ck-root),
body.gb-land-game #app:has(.spb-root),
body.gb-land-game #app:has(.td-root),
body.gb-land-game #app:has(.td-mount) {
  padding: 0 !important;
}
body.gb-land-game.dl-hidden #app { padding-top: 8px !important; }
body.gb-land-game .land-back { margin-bottom: 4px; }
body.gb-land-game .game-shell.land-shell,
body.gb-land-game .game-shell.pro-focus { display: block; }
body.gb-land-game .game-panel {
  padding: 6px !important;
  background: #12141a !important;
  border: 1px solid rgba(255,255,255,.08);
}

/* ===== SPRIBE AVIATOR — pixel-perfect replica ===== */
.spb-root {
  display: flex; flex-direction: column;
  background: #0c0e14; color: #e8eaed;
  min-height: 100dvh; overflow: hidden;
  font-family: Rajdhani, Outfit, sans-serif;
  user-select: none;
}

/* topbar */
.spb-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px 4px;
  background: #12151c;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.spb-logo-wrap { display: flex; align-items: center; gap: 6px; }
.spb-plane-icon { flex-shrink: 0; }
.spb-logo {
  font-size: 1.25rem; font-weight: 700; color: #e11d2e;
  font-style: italic; letter-spacing: .02em;
}
.spb-bal-wrap { display: flex; align-items: center; gap: 6px; }
.spb-bal { font-size: .9rem; font-weight: 800; color: #28a745; }
.spb-currency { font-size: .75rem; color: #94a3b8; font-weight: 700; }
.spb-menu {
  border: 0; background: transparent; color: #94a3b8;
  font-size: 1.1rem; padding: 2px 4px; line-height: 1;
}

/* history chips — Spribe purple/blue pills */
.spb-hist-bar {
  display: flex; gap: 5px; padding: 5px 10px;
  overflow-x: auto; scrollbar-width: none; flex-shrink: 0;
  background: #12151c;
}
.spb-hist-bar::-webkit-scrollbar { display: none; }
.spb-hist-bar span {
  flex: 0 0 auto; padding: 4px 11px; border-radius: 999px;
  font-size: .72rem; font-weight: 800; white-space: nowrap;
  background: #243b6b; color: #93c5fd;
  letter-spacing: .01em;
}
.spb-hist-bar span.mid { background: #4c1d95; color: #e9d5ff; }
.spb-hist-bar span.up { background: #6b21a8; color: #f5d0fe; }
.spb-hist-bar span.hot { background: #9d174d; color: #fff; }
.spb-hist-bar span.down { background: #1e293b; color: #94a3b8; }

/* sky canvas area */
.spb-sky {
  position: relative; flex: 0 0 auto;
  background: #0c0e14; overflow: hidden;
  height: clamp(200px, 38vh, 340px);
  min-height: 200px;
}
.spb-canvas { display: block; width: 100%; height: 100%; object-fit: fill; }
.spb-mult-wrap {
  position: absolute; left: 50%; top: 42%;
  transform: translate(-50%, -50%);
  text-align: center; z-index: 4; pointer-events: none;
}
.spb-mult {
  font-size: 3.6rem; font-weight: 900; color: #fff;
  line-height: 1; letter-spacing: -.01em;
}
.spb-mult.fly { color: #fff; }
.spb-mult.crash { color: #ff3344; animation: spbCrashPulse 0.4s ease-out; }
@keyframes spbCrashPulse {
  0% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.spb-mult-label {
  font-size: .68rem; font-weight: 700; color: rgba(255,255,255,.65);
  letter-spacing: .1em; text-transform: uppercase; margin-top: 6px;
}
.spb-flew-label {
  font-size: 1rem; font-weight: 900; color: #fff;
  letter-spacing: .06em; margin-bottom: 2px;
}
/* fake players badge bottom-right of sky */
.spb-players {
  position: absolute; right: 10px; bottom: 10px; z-index: 5;
  display: flex; align-items: center; gap: 5px;
  background: rgba(13,15,20,.75); border-radius: 999px;
  padding: 4px 9px 4px 4px;
  border: 1px solid rgba(255,255,255,.12);
}
.spb-avatars { display: flex; }
.spb-av-img {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid #0c0e14; object-fit: cover;
  margin-left: -6px;
}
.spb-av-img:first-child { margin-left: 0; }
.spb-pcount { font-size: .78rem; font-weight: 900; color: #fff; }

/* bottom bets bar */
.spb-bets-bottom {
  background: #12151c;
  border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.spb-bets-tabs {
  display: flex; gap: 0; padding: 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.spb-btab {
  border: 0; background: transparent; color: #64748b;
  font-weight: 800; font-size: .68rem; padding: 8px 12px;
  text-transform: uppercase; border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.spb-btab.on { color: #fff; border-bottom-color: #e11d2e; }
.spb-bets-summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 5px 10px;
}
.spb-bets-left { display: flex; align-items: center; gap: 6px; }
.spb-avatar-row { display: flex; }
.spb-avatar-row .spb-av-img { width: 20px; height: 20px; }
.spb-bets-count { font-size: .68rem; font-weight: 800; color: #94a3b8; }
.spb-bets-right { text-align: right; }
.spb-win-label { display: block; font-size: .6rem; color: #64748b; font-weight: 700; }
.spb-win-amt { font-size: .85rem; font-weight: 900; color: #2ee59d; }
.spb-feed-cols {
  display: grid; grid-template-columns: 2.1fr 1fr 0.85fr 1.05fr;
  padding: 4px 12px; font-size: .62rem; color: #64748b; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.spb-feed-list { max-height: 96px; overflow-y: auto; scrollbar-width: none; }
.spb-feed-list::-webkit-scrollbar { display: none; }
.spb-feed-row {
  display: grid; grid-template-columns: 2.1fr 1fr 0.85fr 1.05fr;
  padding: 5px 12px; font-size: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  align-items: center;
}
.spb-feed-row .fn { font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spb-feed-row .fs, .spb-feed-row .fw { color: #94a3b8; }
.spb-feed-row .fm { color: #64748b; font-weight: 700; }
.spb-feed-row.cashed .fm, .spb-feed-row.cashed .fw { color: #2ee59d; font-weight: 800; }
.spb-feed-row.lost .fm { color: #334155; }
.spb-feed-list .av-bet-row {
  display: grid; grid-template-columns: 2.1fr 1fr 0.85fr 1.05fr;
  padding: 5px 12px; font-size: .7rem;
  border-bottom: 1px solid rgba(255,255,255,.04);
  align-items: center;
}
.spb-feed-list .av-bet-row .nm { font-weight: 700; color: #e2e8f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spb-feed-list .av-bet-row .st, .spb-feed-list .av-bet-row .wn { color: #94a3b8; }
.spb-feed-list .av-bet-row .mx { color: #64748b; font-weight: 700; }
.spb-feed-list .av-bet-row.cashed .mx, .spb-feed-list .av-bet-row.cashed .wn { color: #2ee59d; font-weight: 800; }
.spb-feed-list .av-bet-row.lost .mx { color: #334155; }

/* FUN / BET MODE banner inside sky */
.spb-fun-banner {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  background: #f59e0b; color: #1a0a00;
  font-size: .72rem; font-weight: 900; letter-spacing: .1em;
  padding: 4px 20px; border-radius: 0 0 8px 8px;
  z-index: 6; text-transform: uppercase; pointer-events: none;
}
.spb-fun-banner.is-bet-mode {
  background: #e11d48; color: #fff;
}

/* dual bet panels — Spribe stacked rows */
.spb-panels {
  display: flex; flex-direction: column; gap: 8px;
  padding: 8px 8px 6px; background: #0c0e14; flex-shrink: 0;
}
.spb-panel-row {
  display: flex; flex-direction: column; gap: 0;
  background: #1a1d24; border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 0; overflow: hidden;
}
.spb-panel-tabs {
  display: flex; background: #12151c;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.spb-panel-row > .spb-tab,
.spb-panel-tabs .spb-tab {
  flex: 1; border: 0; background: transparent; color: #64748b;
  font-size: .72rem; font-weight: 800; padding: 8px 4px;
  text-transform: uppercase; letter-spacing: .04em;
}
.spb-panel-row > .spb-tab.active,
.spb-panel-tabs .spb-tab.active {
  background: #1a1d24; color: #fff;
  box-shadow: inset 0 -2px 0 #e11d2e;
}
.spb-panel-body {
  display: grid; grid-template-columns: 40% 1fr; gap: 10px;
  padding: 10px 12px; align-items: stretch;
}
.spb-panel-body.hide { display: none; }
.spb-panel-left { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.spb-panel-right { display: flex; min-height: 90px; }
.spb-action {
  flex: 1; border: 0; border-radius: 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; font-weight: 900; width: 100%; min-height: 90px;
}
.spb-action .av-main-lab {
  font-size: 1.4rem; line-height: 1; text-transform: capitalize;
  font-weight: 900; color: #fff; letter-spacing: .01em;
}
.spb-action .av-main-sub {
  font-size: .92rem; opacity: 1; font-weight: 700; color: #fff; line-height: 1.1;
}
.spb-action.btn-bet { background: #28a745; color: #fff; }
.spb-panel-row.is-queued .spb-action.btn-bet { background: #e11d2e; color: #fff; }
.spb-panel-row.is-queued .spb-action.btn-bet .av-main-sub {
  font-size: .76rem; font-weight: 600; opacity: .95;
}
.spb-action.btn-cash { background: #f97316; color: #fff; display: none; }
.spb-panel-row.is-flying .spb-action.btn-bet { display: none !important; }
.spb-panel-row.is-flying .spb-action.btn-cash { display: flex !important; }

.spb-stake-row {
  display: grid; grid-template-columns: 38px 1fr 38px; gap: 6px; align-items: center;
}
.spb-qbets { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.av-step {
  border: 0; border-radius: 50%; width: 38px; height: 38px;
  background: #2a2f3a; color: #fff; font-size: 1.25rem; font-weight: 800;
  display: grid; place-items: center; padding: 0; line-height: 1;
}
.av-stake-in {
  width: 100%; text-align: center; border-radius: 10px; border: 1px solid rgba(255,255,255,.14);
  background: #0a0c10; color: #fff; font-weight: 800; padding: 10px 6px; font-size: 1.2rem;
}
.av-qbet {
  border: 0; border-radius: 8px; padding: 6px 2px;
  background: #2a2f3a; color: #c8d0dc; font-size: .62rem; font-weight: 800;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.av-qbet.active { background: #3d4658; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }

.spb-panel-row .spb-auto-body {
  display: flex; flex-direction: column; gap: 10px;
  padding: 12px 14px 14px; background: #1a1d24;
}
.spb-panel-row .spb-auto-body.hide { display: none; }
.spb-auto-row {
  display: flex; align-items: center; gap: 8px;
  font-size: .78rem; color: #cbd5e1; font-weight: 700;
}
.spb-auto-row input[type="checkbox"] {
  width: 16px; height: 16px; accent-color: #e11d2e;
}
.spb-auto-in {
  width: 64px; border-radius: 8px; border: 1px solid rgba(255,255,255,.15);
  background: #0c0e14; color: #fff; padding: 6px 8px; font-weight: 800; font-size: .8rem;
}

.spb-panel {
  background: #161922; border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.spb-tabs { display: flex; background: #0c0e14; border-radius: 8px; overflow: hidden; }
.spb-tab {
  flex: 1; border: 0; background: transparent; color: #64748b;
  font-size: .6rem; font-weight: 800; padding: 6px 2px;
  text-transform: uppercase;
}
.spb-tab.active { background: #1e2330; color: #fff; }
.spb-tab-body { display: flex; flex-direction: column; gap: 5px; }
.spb-tab-body.hide, .spb-auto-body.hide { display: none; }
.spb-auto-body { display: flex; flex-direction: column; gap: 6px; }
.spb-auto-row { display: flex; align-items: center; gap: 6px; font-size: .68rem; color: #cbd5e1; font-weight: 700; }
.spb-auto-in { width: 52px; border-radius: 6px; border: 1px solid rgba(255,255,255,.15); background: #0c0e14; color: #fff; padding: 4px 6px; font-weight: 800; font-size: .72rem; }
.av-main-btn {
  border: 0; border-radius: 10px; padding: 11px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-weight: 900; letter-spacing: .04em; width: 100%;
}
.av-main-btn .av-main-lab { font-size: .88rem; text-transform: uppercase; }
.av-main-btn .av-main-sub { font-size: .68rem; opacity: .9; }
.av-main-btn.btn-bet { background: linear-gradient(180deg,#34d399,#059669); color: #04140c; }
.spb-panel.is-queued .av-main-btn.btn-bet { background: linear-gradient(180deg,#f87171,#b91c1c); color: #fff; }
.av-main-btn.btn-cash {
  background: linear-gradient(180deg,#fb923c,#ea580c); color: #fff;
  display: none;
}
.spb-panel.is-flying .av-main-btn.btn-bet { display: none !important; }
.spb-panel.is-flying .av-main-btn.btn-cash { display: flex !important; }
.spb-panel.is-queued .av-main-btn.btn-bet {
  background: linear-gradient(180deg,#f87171,#b91c1c) !important; color: #fff !important;
}

/* close X on player badge */
.spb-pclose {
  border: 0; background: #ea580c; color: #fff;
  border-radius: 50%; width: 20px; height: 20px;
  font-size: .65rem; font-weight: 900; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 0; margin-left: 2px; flex-shrink: 0;
}

.av-result { display: none !important; }

/* old classes kept for JS compat */
.av-spribe { display: contents; }
.av-topbar, .av-main, .av-sky, .av-dual, .av-side,
.av-feed-tabs, .av-feed-total, .av-feed-cols, .av-feed-list,
.av-bet-row, .av-mult, .av-status, .av-panel, .av-result,
.av-auto-row, .av-fair { /* kept for backwards compat; new HTML uses spb-* */ }

/* ===== CHICKEN ROAD — InOut replica ===== */
.ck-root {
  display: flex;
  flex-direction: column;
  background: #1a1d24;
  color: #e8eaed;
  min-height: 100dvh;
  overflow: hidden;
  font-family: Rajdhani, Outfit, sans-serif;
  user-select: none;
}
.ck-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px 4px;
  background: #12151c;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.ck-brand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ck-logo {
  display: flex; align-items: center; gap: 6px;
  font-size: 1.05rem; font-weight: 900; color: #fff; letter-spacing: .04em;
}
.ck-logo i {
  display: inline-grid; place-items: center;
  width: 1.15em; height: 1.15em; border-radius: 50%;
  background: #e11d2e; color: #fff; font-style: normal; font-weight: 900;
  font-size: .95em; line-height: 1;
}
.ck-live {
  display: flex; align-items: center; gap: 10px;
  font-size: .68rem; color: #94a3b8; font-weight: 700;
}
.ck-live-toggle {
  border: 0; background: transparent; color: #cbd5e1;
  font-weight: 800; font-size: .68rem; padding: 0; cursor: pointer;
}
.ck-online { display: inline-flex; align-items: center; gap: 4px; }
.ck-online i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.25);
}
.ck-online b { color: #e2e8f0; font-weight: 800; }
.ck-top-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.ck-how {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; border-radius: 8px; padding: 6px 10px;
  background: #2a2f3a; color: #e5e7eb; font-weight: 800; font-size: .72rem;
}
.ck-how i {
  display: inline-grid; place-items: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #3b4250; font-style: normal; font-size: .65rem; font-weight: 900;
}
.ck-bal-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #1a1d24; border: 1px solid rgba(240,193,75,.35);
  border-radius: 999px; padding: 5px 10px 5px 12px;
  font-weight: 800; color: #f8fafc; font-size: .88rem;
}
.ck-coin { display: block; flex-shrink: 0; }
.ck-menu {
  border: 0; background: transparent; color: #94a3b8;
  font-size: 1.2rem; padding: 2px 4px; line-height: 1;
}
.ck-live-panel {
  max-height: 88px; overflow: auto; background: #0f1218;
  border-bottom: 1px solid rgba(255,255,255,.06); padding: 4px 8px;
}
.ck-live-panel[hidden] { display: none !important; }
.ck-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 180px;
  height: clamp(180px, calc(100dvh - 148px), 560px);
  background: #4d5560;
  overflow: hidden;
}
.ck-canvas {
  display: block; width: 100%; height: 100%;
  touch-action: manipulation; cursor: pointer;
}
.ck-toast {
  position: absolute; left: 50%; top: 12px; transform: translateX(-50%);
  background: rgba(8,12,18,.82); color: #fff; font-weight: 800;
  font-size: .78rem; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12); pointer-events: none; z-index: 5;
}
.ck-stage-tip {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  max-width: min(92%, 420px); text-align: center;
  background: rgba(8,12,18,.78); color: #e8eef8; font-weight: 700;
  font-size: .74rem; line-height: 1.35; padding: 7px 12px; border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12); pointer-events: none; z-index: 6;
}
.ck-stage-tip b { color: #86efac; font-weight: 900; }
.ck-stage-tip[hidden] { display: none !important; }

/* Chicken cashout win — brief stage-local glow + coins (not full-screen clutter) */
.gb-stage-win {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 12;
  overflow: hidden;
}
.gb-stage-win--fixed {
  position: fixed;
  z-index: 130;
}
.gb-stage-win-flash {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 48%, rgba(255, 236, 170, 0.55), rgba(255, 200, 80, 0.12) 45%, transparent 72%);
  animation: gbStageFlash 0.85s ease-out forwards;
}
.gb-stage-win-glow {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 120, 0.55), transparent 68%);
  filter: blur(8px);
  animation: gbStageGlow 1s ease-out forwards;
}
.gb-stage-win-ring {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 232, 160, 0.85);
  box-shadow: 0 0 18px rgba(255, 200, 80, 0.45);
  animation: gbStageRing 0.95s ease-out forwards;
}
.gb-stage-win-coin {
  position: absolute;
  top: 42%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, #fff6c8, #f0c14b 45%, #b8860b 78%);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  animation: gbStageCoin 1s ease-out forwards;
  opacity: 0;
}
@keyframes gbStageFlash {
  0% { opacity: 0; }
  18% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes gbStageGlow {
  0% { transform: scale(0.45); opacity: 0.9; }
  100% { transform: scale(2.1); opacity: 0; }
}
@keyframes gbStageRing {
  0% { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes gbStageCoin {
  0% { transform: translateY(0) scale(0.6); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(-72px) scale(1); opacity: 0; }
}
html.perf-low .gb-stage-win-coin,
html[data-perf="low"] .gb-stage-win-coin {
  animation-duration: 0.7s;
}
.ck-bar {
  display: grid;
  grid-template-columns: 1.05fr 1.2fr 1.35fr;
  gap: 10px; align-items: end;
  background: #232833; padding: 10px 12px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
  flex-shrink: 0;
  position: relative;
  z-index: 8;
}
.ck-lab {
  display: block; font-size: .62rem; font-weight: 800;
  color: #94a3b8; margin-bottom: 4px; text-transform: none;
}
.ck-stake-row {
  display: grid; grid-template-columns: 52px 1fr 52px; gap: 6px;
}
.ck-stake-row input {
  width: 100%; text-align: center; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  background: #141820; color: #fff; font-weight: 800; padding: 10px 6px;
  font-size: 1rem;
}
.ck-minmax {
  border: 0; border-radius: 8px; background: #3a4150; color: #e5e7eb;
  font-weight: 900; font-size: .72rem;
}
.ck-presets {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 6px;
}
.ck-presets button {
  border: 0; border-radius: 8px; background: #2a3140; color: #f8fafc;
  font-weight: 800; padding: 7px 4px; font-size: .78rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
}
.ck-presets button.active {
  background: #3d4658;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}
.ck-diff-block { min-width: 0; }
.ck-diff {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  background: #141820; border-radius: 10px; padding: 4px;
  border: 1px solid rgba(255,255,255,.08);
}
.ck-diff button {
  border: 0; border-radius: 8px; background: transparent; color: #94a3b8;
  font-weight: 800; font-size: .72rem; padding: 10px 2px;
}
.ck-diff button.active {
  background: #2f3748; color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.ck-select-hidden { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ck-act-block { min-width: 0; position: relative; z-index: 9; }
.ck-chance {
  display: block; text-align: center; font-size: .62rem;
  font-weight: 800; color: #94a3b8; margin-bottom: 4px;
}
.ck-act-row {
  display: grid; grid-template-columns: 1.25fr .85fr; gap: 8px;
  position: relative; z-index: 9;
}
.ck-big {
  border: 0; border-radius: 12px; padding: 10px 8px; font-weight: 900;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; min-height: 58px;
  position: relative; z-index: 10;
  touch-action: manipulation;
  cursor: pointer;
}
.ck-cash {
  background: linear-gradient(180deg, #f5d76e, #e0b429);
  color: #1a1000; opacity: .5;
  pointer-events: none;
}
.ck-cash.is-ready,
.ck-cash:not(:disabled) {
  opacity: 1;
  pointer-events: auto !important;
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
}
.ck-cash:disabled {
  opacity: .45;
  pointer-events: none !important;
  cursor: not-allowed;
}
.ck-cash span { font-size: .72rem; font-weight: 800; pointer-events: none; }
.ck-cash strong { font-size: .95rem; letter-spacing: .02em; pointer-events: none; }
.ck-go {
  background: linear-gradient(180deg, #34d399, #059669) !important;
  color: #04140c !important;
  font-size: 1.25rem;
}
.ck-go.is-on { display: flex !important; }
.ck-go.ck-pulse { animation: ckPulse 1s ease-in-out infinite; }
.ck-start-hidden { display: none !important; }
.ck-history { display: none; }

body.gb-land-game .ck-root {
  min-height: 100dvh;
}
body.gb-land-game .game-panel:has(.ck-root),
body.gb-land-game .game-shell:has(.ck-root) {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

@media (max-width: 720px) {
  .ck-bar { grid-template-columns: 1fr 1fr; }
  .ck-act-block { grid-column: 1 / -1; }
  .ck-how span { display: none; }
  .ck-logo { font-size: .92rem; }
}
@media (orientation: landscape) and (max-height: 480px) {
  .ck-stage { min-height: 120px; }
  .ck-bar { padding: 6px 8px 8px; gap: 6px; }
  .ck-big { min-height: 48px; padding: 6px; }
  .ck-diff button { padding: 7px 2px; font-size: .65rem; }
  .ck-presets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
  .ck-presets button { padding: 4px 2px; font-size: .58rem; }
}

/* legacy chicken hooks kept quiet */
.ck-inout { display: contents; }
.ck-hint { display: none; }
.ck-mult-hud { display: none !important; }
.ck-add { display: none; }

@keyframes ckPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.03); filter: brightness(1.08); }
}

/* ===== v43 sports + lag + chicken hint ===== */
.lobby-grid .tile-face,
.grid-tile .tile-face {
  box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
}
.lobby-grid .tile-face::before,
.grid-tile .tile-face::before {
  opacity: .35;
}
html.perf-low .lobby-grid .tile-face::before,
html.gb-lite .lobby-grid .tile-face::before {
  display: none !important;
}
body.is-scrolling .lobby-grid,
body.is-scrolling .tile-grid {
  pointer-events: none;
}

.ck-hint {
  margin: 4px 0 0;
  font-size: .72rem;
  color: #f5d0a8;
  font-weight: 700;
  line-height: 1.35;
}
.ck-go small, .ck-start small { font-size: .58rem; font-weight: 800; opacity: .85; }
.ck-pulse { animation: ckPulse 1s ease-in-out infinite; }
@keyframes ckPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
  50% { transform: scale(1.04); box-shadow: 0 0 0 8px rgba(52,211,153,0); }
}

.sp-lock-banner {
  display: grid;
  gap: 2px;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(240,193,75,.4);
  background: linear-gradient(120deg, rgba(60,40,10,.9), rgba(20,12,8,.95));
  color: #ffe08a;
}
.sp-lock-banner[hidden] { display: none !important; }
.sp-lock-banner strong { font-size: .85rem; }
.sp-lock-banner span { font-size: .7rem; color: #f5d0a8; opacity: .9; }
.sp-card.is-locked {
  border-color: rgba(240,193,75,.45);
  box-shadow: 0 0 0 1px rgba(240,193,75,.15);
}
.sp-locked {
  display: grid;
  gap: 2px;
  margin-top: 8px;
  padding: 10px;
  border-radius: 10px;
  background: rgba(240,193,75,.12);
  border: 1px dashed rgba(240,193,75,.45);
  text-align: center;
}
.sp-locked strong { color: #f0c14b; font-size: .78rem; }
.sp-locked span { color: #e8eaed; font-size: .72rem; font-weight: 700; }
.sp-locked em { color: #94a3b8; font-size: .65rem; font-style: normal; }
.sp-mybet.open {
  border-left: 3px solid #f0c14b;
}
.sp-mybet.won {
  border-left: 3px solid #2ee59d;
}
.sp-mybet.lost {
  border-left: 3px solid #ff6b7a;
}

/* ===== v45 lag-free polish + deposit + jili ===== */
.shiny::before,
.btn-gold::before,
.btn-red::before,
.btn-mint::before,
.btn-go::before,
.btn-dl::before,
.claim-btn::before,
.shiny:hover::before,
.btn-gold:hover::before,
.btn-red:hover::before,
.btn-mint:hover::before,
.btn-go:hover::before,
.btn-dl:hover::before,
.claim-btn:hover::before,
.shiny:active::before,
.btn-gold:active::before,
.btn-red:active::before,
.btn-go:active::before,
.btn-dl:active::before,
.shiny.press::before,
.btn-gold.press::before,
.btn-red.press::before,
.btn-go.press::before,
.btn-dl.press::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.btn, .btn-gold, .btn-red, .btn-mint, .btn-go, .btn-dl, .chip, .pack, .uw-act, .nav-item, .grid-tile, .tile {
  transition: transform .12s ease, filter .12s ease !important;
  will-change: auto !important;
}
.btn:active, .btn-gold:active, .btn-mint:active, .btn-go:active, .chip:active, .pack:active {
  transform: scale(0.96) !important;
  filter: brightness(1.1) !important;
}
/* Lightweight press glow — GPU cheap, no sweeping shine */
.btn-gold, .btn-mint, .btn-go, .av-main-btn, .ck-go.is-on {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 0 rgba(0,0,0,.25) !important;
}
.btn-gold:active, .btn-mint:active, .ck-go.is-on:active {
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25) !important;
}

html.perf-low .btn::after,
html.gb-lite .btn::after,
html.perf-low .btn-gold::after,
html.gb-lite .btn-gold::after,
body.is-scrolling .shiny::before,
body.is-scrolling .btn-gold::before {
  display: none !important;
}

.jili-panel { position: relative; overflow: hidden; }
.jili-badge {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  font-size: .58rem; font-weight: 900; letter-spacing: .06em;
  padding: 3px 7px; border-radius: 6px;
  background: linear-gradient(180deg,#e11d2e,#8a1020); color:#fff;
  border: 1px solid rgba(255,255,255,.25);
}
.jili-shell .gs-stage {
  border: 2px solid rgba(225,29,46,.45);
  border-radius: 12px;
  background: linear-gradient(180deg,#1a0a10,#0c0810);
}

.jili-game { display: grid; gap: 8px; }
.jili-top {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
}
.jili-brand {
  font-size: .65rem; font-weight: 900; letter-spacing: .12em;
  padding: 4px 8px; border-radius: 6px;
  background: linear-gradient(180deg,#e11d2e,#7f1d1d); color: #fff;
}
.jili-title { font-weight: 900; color: #ffe08a; font-size: 1.05rem; }
.jili-stage {
  position: relative; border-radius: 14px; overflow: hidden;
  border: 2px solid rgba(240,193,75,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  background: #0a0610;
}
.jili-canvas { width: 100%; height: 300px; display: block; touch-action: manipulation; }
.jili-overlay {
  position: absolute; left: 10px; right: 10px; bottom: 8px;
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;
}
.jili-status {
  font-size: .78rem; font-weight: 800; color: #ffe08a;
  text-shadow: 0 1px 4px #000;
}
.jili-win {
  font-size: 1rem; font-weight: 900; color: #2ee59d;
  text-shadow: 0 1px 4px #000;
}
.jili-tip {
  margin: 0; font-size: .72rem; color: #f5d0a8; font-weight: 700;
}
.jili-spin {
  min-height: 52px; font-size: 1.1rem; letter-spacing: .04em;
}
body.gb-busy .jili-spin { opacity: .7; }

/* Money Pot–class HUD */
.mp-game { display: grid; gap: 6px; }
.mp-jackpots {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.mp-jp {
  border-radius: 6px;
  padding: 4px 4px 5px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.mp-jp span {
  display: block;
  font-size: .52rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: rgba(0,0,0,.75);
}
.mp-jp b {
  display: block;
  font-size: .85rem;
  font-weight: 900;
  color: #1a1000;
  font-variant-numeric: tabular-nums;
}
.mp-jp.grand { background: linear-gradient(180deg,#ffe08a,#c9a227); }
.mp-jp.major { background: linear-gradient(180deg,#d8b4fe,#7e22ce); color:#fff; }
.mp-jp.major span, .mp-jp.major b { color: #fff; }
.mp-jp.minor { background: linear-gradient(180deg,#7dd3fc,#0284c7); }
.mp-jp.minor span, .mp-jp.minor b { color: #04121f; }
.mp-jp.mini { background: linear-gradient(180deg,#86efac,#16a34a); }
.mp-stage {
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid rgba(240,193,75,.4);
  background: #2a1060;
}
.mp-canvas { width: 100%; height: 280px; display: block; touch-action: manipulation; }
.mp-hud {
  display: grid;
  grid-template-columns: 36px 1.1fr auto 1fr 36px 58px;
  gap: 4px;
  align-items: center;
  padding: 8px 6px;
  border-radius: 12px;
  background: rgba(8,6,16,.88);
  border: 1px solid rgba(255,255,255,.1);
}
.mp-ico, .mp-turbo {
  width: 36px; height: 36px; border-radius: 50%;
  border: 0; font-size: 1rem;
  background: #14532d; color: #fff;
}
.mp-turbo { background: #3f3f46; }
.mp-turbo.on { background: #eab308; color: #111; box-shadow: 0 0 0 2px rgba(234,179,8,.35); }
.mp-stat, .mp-bet { text-align: center; min-width: 0; }
.mp-stat em, .mp-bet em {
  display: block; font-size: .55rem; font-style: normal; font-weight: 800;
  color: #94a3b8; text-transform: uppercase;
}
.mp-stat strong, .mp-bet b {
  display: block; font-size: .78rem; font-weight: 900; color: #ffe08a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mp-stat.win strong { color: #4ade80; }
.mp-bet-row {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.06); border-radius: 999px; padding: 2px 4px;
}
.mp-bet-row button {
  width: 22px; height: 22px; border-radius: 50%; border: 0;
  background: #16a34a; color: #fff; font-weight: 900; line-height: 1;
}
.mp-spin {
  width: 58px; height: 58px; border-radius: 50%;
  border: 3px solid #f0c14b;
  background: radial-gradient(circle at 35% 30%, #ff6b7a, #c41e2a 55%, #7f1d1d);
  color: #fff; font-weight: 900; font-size: .72rem;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.4);
}
.mp-spin:active { transform: scale(0.94); }
.mp-spin:disabled { opacity: .55; }
.mp-status {
  margin: 0; text-align: center; font-size: .72rem; font-weight: 800; color: #f5d0a8;
}
@media (max-width: 400px) {
  .mp-hud { grid-template-columns: 32px 1fr auto 1fr 32px 52px; }
  .mp-canvas { height: 240px; }
  .mp-jp b { font-size: .72rem; }
}

.dep-form label.ck-lab { margin-top: 8px; }
.dep-form input, .dep-form select {
  width: 100%; border-radius: 10px; border: 1px solid rgba(255,255,255,.12);
  background: #0d0f14; color: #fff; padding: 10px; font-weight: 700;
}
.dep-timer-card {
  margin: 10px 0; padding: 14px; border-radius: 14px; text-align: center;
  border: 1px solid rgba(240,193,75,.4);
  background: linear-gradient(160deg, rgba(60,40,10,.9), rgba(20,10,8,.95));
}
.dep-timer {
  font-size: 2rem; font-weight: 900; color: #f0c14b; letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
}
.dep-mylist { display: grid; gap: 6px; }
.dep-coins-popup {
  position: fixed; inset: 0; z-index: 9999; display: none; place-items: center;
  background: rgba(0,0,0,.55); padding: 20px;
}
.dep-coins-popup.show { display: grid; }
.dep-coins-card {
  width: min(340px, 100%); background: #161a24; border-radius: 16px; padding: 18px;
  border: 1px solid rgba(46,229,157,.45); text-align: center;
}
.dep-coins-card strong { display:block; color:#2ee59d; font-size:1.2rem; margin-bottom:6px; }
.uw-uid b { color: #ffe08a; font-weight: 800; }

.sp-home-banner {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  text-align: left;
  margin: 0 0 10px;
  padding: 12px 12px;
  border: 1px solid rgba(46,229,157,.35);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(16,60,40,.9), rgba(20,8,12,.95));
  color: #fff;
}
.sp-home-ico { font-size: 1.4rem; }
.sp-home-meta { display: flex; flex-direction: column; gap: 2px; }
.sp-home-meta strong { font-size: .92rem; color: #9ef0c6; }
.sp-home-meta span { font-size: .68rem; color: #c8d5cc; font-weight: 600; }
.sp-home-go {
  background: #2ee59d; color: #042015; font-weight: 900;
  padding: 7px 10px; border-radius: 999px; font-size: .68rem;
}

.sp-page { display: grid; gap: 10px; }
.sp-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sp-status { margin: 0; font-size: .72rem; color: #f5d0a8; font-weight: 700; }
.sp-tabs { display: flex; gap: 6px; overflow-x: auto; }
.sp-tab {
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.28); color: #fff;
  border-radius: 999px; padding: 7px 12px; font-weight: 800; font-size: .72rem;
  white-space: nowrap;
}
.sp-tab.active { background: #e11d2e; border-color: #ffe08a; }
.sp-list { display: grid; gap: 10px; }
.sp-card {
  border-radius: 14px; padding: 12px;
  background: linear-gradient(180deg,#241018,#12080c);
  border: 1px solid rgba(240,193,75,.22);
}
.sp-card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.sp-comp { font-size: .65rem; color: #f5d0a8; font-weight: 700; }
.sp-live { background: #e11d2e; color: #fff; font-size: .58rem; font-weight: 900; padding: 3px 7px; border-radius: 999px; }
.sp-done { background: #334155; color: #cbd5e1; font-size: .58rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; }
.sp-up { background: rgba(46,229,157,.15); color: #2ee59d; font-size: .58rem; font-weight: 800; padding: 3px 7px; border-radius: 999px; }
.sp-teams { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; margin-bottom: 10px; }
.sp-team { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-team.right { justify-content: flex-end; text-align: right; }
.sp-team img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: #111; }
.sp-team strong { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-score { font-weight: 900; color: #ffe08a; font-size: .95rem; }
.sp-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.sp-odd {
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 8px 6px;
  background: rgba(0,0,0,.35); color: #fff;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.sp-odd span { font-size: .62rem; color: #94a3b8; font-weight: 800; }
.sp-odd b { font-size: .9rem; color: #2ee59d; }
.sp-odd:disabled { opacity: .45; }
.sp-mybets { display: grid; gap: 6px; }
.sp-mybet {
  padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.08);
  display: flex; flex-direction: column; gap: 2px;
}
.sp-mybet strong { font-size: .78rem; }
.sp-mybet span { font-size: .68rem; color: #f5d0a8; }
.sp-mybet.won { border-color: rgba(46,229,157,.4); }
.sp-mybet.lost { border-color: rgba(255,77,94,.35); }
.sp-attr { font-size: .65rem; }
.sp-attr a { color: #2ee59d; }

/* ===== v48b: client-demo reels + zero glow ===== */
.mp-canvas { display: none !important; }
.mp-stage {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 18px 1fr !important;
  gap: 4px !important;
  align-items: stretch !important;
  min-height: 268px !important;
  padding: 8px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  border: 3px solid #c9a227 !important;
  background: linear-gradient(180deg, #3b1d6e, #1a0a30) !important;
}
.mp-stage.has-char { grid-template-columns: 18px 1fr minmax(72px, 28%) !important; }
.mp-stage.skin-moneypot {
  background:
    linear-gradient(180deg, rgba(6,20,16,.55), rgba(8,12,20,.72)),
    url("/assets/jili/dollar-vault-bg.jpg?v=76") center 40% / cover no-repeat !important;
  border-color: #c9a227 !important;
  box-shadow: inset 0 0 0 1px rgba(240,193,75,.25) !important;
}
.mp-stage.skin-moneypot .mp-reels {
  background: rgba(4,10,14,.72);
  border-color: rgba(240,193,75,.55);
  box-shadow: inset 0 0 24px rgba(0,0,0,.45);
}
.mp-stage.skin-moneypot .mp-reel {
  background: linear-gradient(180deg, rgba(12,28,22,.98), rgba(6,10,16,.98));
  border: 1px solid rgba(240,193,75,.18);
}
.mp-stage.skin-moneypot .mp-ico-wrap {
  background: linear-gradient(160deg, rgba(255,224,138,.18), rgba(0,0,0,.35));
  border-color: rgba(240,193,75,.28);
}
.mp-stage.skin-moneypot .mp-sym.sy-dollar .mp-ico-wrap,
.mp-stage.skin-moneypot .mp-sym.sy-wildcash .mp-ico-wrap {
  border-color: rgba(240,193,75,.55);
}
.mp-stage.skin-moneypot .mp-char img {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.55));
  animation: mpCharIdle 3.6s ease-in-out infinite;
}
@keyframes mpCharIdle {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-4px,0); }
}
.mp-game[data-jili="moneypot"] .mp-jackpots .mp-jp.grand,
.mp-game[data-jili="moneyrain"] .mp-jackpots .mp-jp.grand {
  background: linear-gradient(180deg,#ffe08a,#b8860b);
}
.mp-game[data-jili="moneypot"] .mp-status,
.mp-game[data-jili="moneyrain"] .mp-status {
  color: #b7f7d2;
}
.mp-game[data-jili="moneypot"] .mp-hud,
.mp-game[data-jili="moneyrain"] .mp-hud {
  background: linear-gradient(180deg, rgba(10,24,18,.94), rgba(6,10,14,.96));
  border-color: rgba(240,193,75,.28);
}
.mp-game[data-jili="moneypot"] .mp-spin,
.mp-game[data-jili="moneyrain"] .mp-spin {
  background: linear-gradient(160deg,#16a34a,#14532d) !important;
  border-color: #f0c14b !important;
}
.mp-stage.skin-gems { background: linear-gradient(180deg,#0f766e,#042f2e) !important; border-color:#5eead4 !important; }
.mp-stage.skin-ace { background: linear-gradient(180deg,#1e3a8a,#0f172a) !important; border-color:#f0c14b !important; }
.mp-stage.skin-777 { background: linear-gradient(180deg,#7f1d1d,#1a0508) !important; border-color:#ffd60a !important; }
.mp-stage.skin-box { background: linear-gradient(180deg,#44403c,#1c1917) !important; border-color:#f59e0b !important; }
.mp-stage.skin-fish { background: linear-gradient(180deg,#0e7490,#082f49) !important; border-color:#38bdf8 !important; }
.mp-stage.skin-empire { background: linear-gradient(180deg,#991b1b,#450a0a) !important; border-color:#fbbf24 !important; }
.mp-stage.skin-buffalo { background: linear-gradient(180deg,#92400e,#451a03) !important; border-color:#fde68a !important; }

.mp-lines { display:flex; flex-direction:column; justify-content:space-around; padding:8px 0; }
.mp-line {
  width:16px; height:16px; border-radius:50%; display:grid; place-items:center;
  font-size:.62rem; font-weight:900; font-style:normal;
  background:#f0c14b; color:#1a1000; opacity:.5;
  transition: transform .12s ease, opacity .12s ease;
}
.mp-line.on { opacity:1; transform:scale(1.15); }

.mp-reels {
  position:relative;
  display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
  height:248px; background:rgba(0,0,0,.5); border-radius:10px; padding:5px;
  border:1px solid rgba(240,193,75,.4);
}
.mp-reel { position:relative; overflow:hidden; border-radius:8px; background:rgba(8,6,16,.95); height:100%; }
.mp-strip { position:relative; will-change:transform; transform:translate3d(0,0,0); }
.mp-sym {
  height:calc((248px - 10px) / 3);
  display:grid; place-items:center;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.mp-ico-wrap {
  width:78%; aspect-ratio:1; max-height:88%;
  display:grid; place-items:center;
  border-radius:12px;
  background:linear-gradient(160deg, rgba(255,255,255,.14), rgba(0,0,0,.25));
  border:1px solid rgba(255,255,255,.12);
  transform:translate3d(0,0,0);
}
.mp-ico-wrap svg { width:86%; height:86%; display:block; }
.mp-sym.is-win .mp-ico-wrap {
  border-color:#ffe08a;
  animation: mpWinPulse .45s ease 2;
}
@keyframes mpWinPulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.08); }
}

.mp-winlines {
  pointer-events:none; position:absolute; inset:5px; z-index:4;
  display:grid; grid-template-rows:repeat(3,1fr);
}
.mp-winlines i {
  display:block; align-self:center; height:3px; border-radius:2px;
  background:transparent; opacity:0;
  transition: opacity .15s ease;
}
.mp-winlines i.on {
  opacity:1;
  background:#ffe08a;
}

.mp-char { display:flex; align-items:flex-end; justify-content:center; pointer-events:none; }
.mp-char img { width:100%; max-height:236px; object-fit:contain; transform:translate3d(0,0,0); }

.mp-jackpots { gap:5px !important; }
.mp-jp { box-shadow:none !important; }
.mp-spin, .mp-ico, .mp-turbo {
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}
.mp-spin {
  background:linear-gradient(160deg,#ef4444,#991b1b) !important;
  border:2px solid #f0c14b !important;
  box-shadow:none !important;
}
.mp-turbo.on, .mp-ico.on { background:#ca8a04 !important; color:#111 !important; }
.mp-game.is-win .mp-status { color:#4ade80; font-size:.8rem; }
.mp-game.is-spinning .mp-spin { transform:scale(.96); }

/* Global: no glow / shine — animate press only */
.btn, .btn-gold, .btn-red, .btn-mint, .btn-go, .btn-dl, .shiny, .chip, .pack,
.uw-act, .nav-item, .claim-btn, .mp-spin, .av-main-btn, .ck-big, .ck-go {
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}
.btn::before, .btn::after, .btn-gold::before, .btn-gold::after,
.btn-red::before, .btn-mint::before, .btn-go::before, .btn-dl::before,
.shiny::before, .shiny::after, .claim-btn::before, .chip::before {
  content:none !important; display:none !important; animation:none !important;
}
.btn:hover, .btn-gold:hover, .btn-mint:hover, .chip:hover, .pack:hover {
  filter:none !important; box-shadow:none !important;
}
.btn:active, .btn-gold:active, .mp-spin:active, .chip:active, .ck-go:active, .av-main-btn:active {
  transform:scale(0.95) !important;
  transition:transform .1s ease !important;
}
.ck-pulse, .vip-glow, .vip-glow-soft { animation:none !important; filter:none !important; box-shadow:none !important; }

@media (max-width:400px) {
  .mp-reels { height:214px; }
  .mp-sym { height:calc((214px - 10px) / 3); }
  .mp-stage { min-height:236px !important; }
}
/* ===== v124: Spin Wheel (left needle, purple sunburst) ===== */
.lw3 { display: grid; gap: 10px; }
.lw3-hero { text-align: center; padding: 4px 0 0; position: relative; z-index: 2; }
.lw3-title {
  position: relative;
  margin: 0;
  font-family: Rajdhani, Outfit, sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.15;
}
.lw3-title::before {
  content: "Spin Wheel";
  position: absolute;
  left: 0; right: 0; top: 0;
  color: transparent;
  -webkit-text-stroke: 5px #fff;
  z-index: 0;
  pointer-events: none;
}
.lw3-title span {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #fffce8 0%, #ffe08a 32%, #f0c14b 58%, #c9a227 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lw3-tag { margin: 4px 0 0; font-size: .78rem; color: #e9d5ff; font-weight: 600; }
.lw3-tag b { color: #ffe08a; font-weight: 800; }
.lw3-hist {
  display: flex; gap: 5px; justify-content: center; min-height: 26px; overflow: hidden;
}
.lw3-hist span {
  min-width: 36px; text-align: center; font-size: .65rem; font-weight: 800;
  padding: 4px 7px; border-radius: 999px;
  border: 1px solid rgba(240,193,75,.4); background: rgba(20,8,48,.45); color: #ffe9b8;
}
.lw3-hist span.up { border-color: rgba(46,229,157,.45); color: #86efac; background: rgba(20,83,45,.45); }
.lw3-hist span.down { border-color: rgba(225,29,46,.35); color: #fca5a5; background: rgba(63,29,29,.45); }

.lw3-stage {
  position: relative;
  display: grid; place-items: center;
  padding: 22px 14px 20px 44px;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(232,196,80,.28);
  background:
    radial-gradient(ellipse 72% 58% at 50% 48%, #5b2aa0 0%, transparent 64%),
    linear-gradient(180deg, #4a1c8c 0%, #321268 44%, #1c0848 100%);
}
.lw3-fx {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}
.lw3-rays {
  position: absolute;
  left: 50%; top: 52%;
  width: 150%; height: 150%;
  margin: -75% 0 0 -75%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 214, 96, .17) 0 8deg,
    transparent 8deg 16deg
  );
  animation: lw3Rays 36s linear infinite;
}
.lw3-streaks {
  position: absolute; inset: -12%;
  background: repeating-linear-gradient(
    118deg,
    transparent 0 40px,
    rgba(255,255,255,.12) 40px 42px,
    transparent 42px 96px
  );
  animation: lw3Streak 6.5s linear infinite;
  opacity: .75;
}
.lw3-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #ffcc4d;
  box-shadow: 0 0 5px #ff9a1a;
  animation: lw3Spark 3.1s ease-in-out infinite;
}
.lw3-machine {
  position: relative;
  width: min(78vw, 286px);
  aspect-ratio: 1;
  z-index: 2;
  isolation: isolate;
  overflow: visible;
  border-radius: 50%;
  box-shadow:
    0 10px 22px rgba(0,0,0,.42),
    0 0 0 2px rgba(255, 232, 160, .35);
}
.lw3-rotor {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%; height: 100%; border-radius: 50%;
  pointer-events: none;
  transform: translate3d(0,0,0);
  background: none !important; box-shadow: none !important; border: 0 !important;
}
.lw3.is-spinning .lw3-rotor { will-change: transform; }
.lw3-svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.lw3-bulb {
  fill: #ff9a1a;
  animation: lw3Bulb .9s ease-in-out infinite alternate;
}
.lw3-labs text {
  paint-order: stroke fill;
  stroke: rgba(20, 8, 30, .4);
  stroke-width: 2.2px;
}
.lw3-hub,
.lw3 .lw3-spin,
button.lw3-hub,
button.lw3-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 92px;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  z-index: 40;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto;
  border: 4px solid #fff !important;
  background:
    radial-gradient(circle at 32% 28%, #ff8a8a 0%, #e11d2e 42%, #9f1239 78%, #7f1d1d 100%) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-family: Rajdhani, Outfit, sans-serif;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: .12em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,.32),
    inset 0 7px 10px rgba(255,255,255,.38),
    0 0 0 3px #c9a227,
    0 6px 14px rgba(0,0,0,.4);
  filter: none !important;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.lw3-hub span, .lw3-spin span {
  pointer-events: none;
  color: #fff !important;
  -webkit-text-fill-color: #fff;
  font-weight: 800;
}
.lw3-hub:active, .lw3-spin:active { transform: translate(-50%, -50%) scale(0.96); }
.lw3-hub:disabled, .lw3-spin:disabled { filter: brightness(.85) !important; }
.lw3-hub.is-hot {
  box-shadow:
    inset 0 -8px 12px rgba(0,0,0,.32),
    inset 0 7px 10px rgba(255,255,255,.42),
    0 0 0 3px #ffe08a,
    0 0 16px rgba(255, 80, 80, .55);
}

.lw3-pointer {
  position: absolute;
  left: -30px; top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex; align-items: center;
  transform-origin: 14px 50%;
  pointer-events: none;
}
.lw3-pin-block {
  width: 26px; height: 46px;
  border-radius: 5px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.12) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, #a56b38 0%, #7a4a22 48%, #4a2c12 100%);
  border: 1px solid #3a220c;
  box-shadow: inset 0 1px 0 rgba(255,220,170,.35), 0 2px 4px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: space-evenly;
  z-index: 2;
}
.lw3-pin-block i {
  width: 9px; height: 9px; border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #d4d4d4, #7a7a7a 60%, #3f3f3f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5);
  position: relative;
}
.lw3-pin-block i::after {
  content: "";
  position: absolute; left: 1px; right: 1px; top: 4px; height: 1px;
  background: #2a2a2a; transform: rotate(-28deg);
}
.lw3-pin-arrow {
  margin-left: -6px;
  display: block;
  filter: none;
}
.lw3.is-spinning .lw3-pointer {
  animation: lw3Pin .16s ease-in-out infinite alternate;
}

.lw3-status {
  margin: 0; text-align: center; font-weight: 800; font-size: .8rem; color: #f3e8ff;
}
.lw3 .chips { justify-content: center; }
.lw3 .chip {
  border-radius: 999px !important; box-shadow: none !important; filter: none !important;
  border: 1px solid rgba(240,193,75,.4);
  background: rgba(20,8,48,.4); color: #f5e6c8; font-weight: 800;
}
.lw3 .chip.active {
  background: linear-gradient(180deg, #ffe08a, #c9a227); color: #1a1000;
  border-color: #8a6010;
}

@keyframes lw3Rays { to { transform: rotate(360deg); } }
@keyframes lw3Streak {
  from { background-position: 0 0; }
  to { background-position: 88px 32px; }
}
@keyframes lw3Spark {
  0%, 100% { opacity: .15; transform: translate3d(0, 6px, 0) scale(.7); }
  40% { opacity: 1; transform: translate3d(4px, -10px, 0) scale(1.15); }
  70% { opacity: .45; transform: translate3d(-3px, -4px, 0) scale(.85); }
}
@keyframes lw3Bulb {
  from { fill: #ffb020; opacity: 1; }
  to { fill: #ffe08a; opacity: .4; }
}
@keyframes lw3Pin {
  from { transform: translateY(-50%) rotate(-5deg); }
  to { transform: translateY(-50%) rotate(5deg); }
}

@media (max-width: 380px) {
  .lw3-title { font-size: 1.5rem; }
  .lw3-machine { width: min(82vw, 250px); }
  .lw3-hub, .lw3 .lw3-spin, button.lw3-hub, button.lw3-spin {
    width: 80px; height: 80px; font-size: 1rem;
  }
  .lw3-stage { padding: 18px 10px 16px 36px; }
  .lw3-pointer { left: -24px; }
}

html.perf-low .lw3-rays,
html.gb-lite .lw3-rays,
html.perf-low .lw3-streaks,
html.gb-lite .lw3-streaks,
html.perf-low .lw3-spark,
html.gb-lite .lw3-spark,
html[data-perf="low"] .lw3-rays,
html[data-perf="low"] .lw3-streaks,
html[data-perf="low"] .lw3-spark {
  display: none !important;
  animation: none !important;
}
html.perf-low .lw3-bulb,
html.gb-lite .lw3-bulb,
html[data-perf="low"] .lw3-bulb,
body.is-scrolling .lw3-rays,
body.is-scrolling .lw3-streaks,
body.is-scrolling .lw3-spark,
body.is-scrolling .lw3-bulb {
  animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .lw3-rays, .lw3-streaks, .lw3-spark, .lw3-bulb, .lw3.is-spinning .lw3-pointer {
    animation: none !important;
  }
}
/* ===== v75 Fortune Garuda 500 (JILI landscape + sensory) ===== */
.fg-game {
  --fg-gold: #f0c14b;
  --fg-gold2: #ffe08a;
  --fg-amber: #ffb020;
  --fg-stone: #3a2a1c;
  --fg-ink: #0c0806;
  --fg-reel-h: 252px;
  position: relative;
  display: grid;
  gap: 0;
  min-height: min(78vh, 560px);
  isolation: isolate;
  overflow: hidden;
}
body.gb-land-game #app:has(#fgRoot) { padding: 0 !important; }
body.gb-land-game .game-panel:has(#fgRoot),
body.gb-land-game .game-shell:has(#fgRoot) {
  padding: 0 !important; border: 0 !important; background: transparent !important;
}
body.gb-land-game .fg-game {
  min-height: calc(100dvh - 36px);
  aspect-ratio: 16 / 9;
  width: min(100vw, 177.78dvh);
  height: min(56.25vw, calc(100dvh - 36px));
  margin: 0 auto;
  max-width: 100vw;
  max-height: calc(100dvh - 36px);
}
body.gb-land-game .fg-game.fg-need-land { filter: none; }
.fg-rotate {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(8,4,10,.55); backdrop-filter: blur(2px);
  pointer-events: none;
}
.fg-rotate.is-soft {
  background: rgba(8,4,10,.35);
  pointer-events: none;
}
.fg-rotate[hidden] { display: none !important; }
.fg-rotate-card {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  color: #ffe08a; padding: 18px 22px;
  border: 1px solid rgba(240,193,75,.45); border-radius: 12px;
  background: linear-gradient(180deg, rgba(60,36,18,.95), rgba(18,10,8,.98));
  pointer-events: none;
}
.fg-rotate-card strong { font-family: Cinzel, Georgia, serif; letter-spacing: .06em; }
.fg-rotate-card em { font-style: normal; font-size: .78rem; color: rgba(255,224,138,.75); }
.fg-rotate-ico {
  width: 42px; height: 28px; border: 2px solid #f0c14b; border-radius: 6px;
  animation: fgRotateHint 1.4s ease-in-out infinite;
}
@keyframes fgRotateHint {
  0%,100% { transform: rotate(0deg); }
  40% { transform: rotate(90deg); }
}
.fg-loader {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 40%, rgba(80,30,20,.55), rgba(8,4,10,.92)), #12080c;
  transition: opacity .3s ease;
}
.fg-loader.is-done { opacity: 0; pointer-events: none; }
.fg-loader[hidden] { display: none !important; }
.fg-loader-card { width: min(320px, 78vw); display: grid; gap: 12px; justify-items: center; }
.fg-loader-mark {
  font-family: Cinzel, Georgia, serif; font-weight: 900; letter-spacing: .1em;
  font-size: clamp(1rem, 3.2vw, 1.35rem); color: #ffe08a;
  text-shadow: 0 2px 0 #5a3a08, 0 0 18px rgba(240,193,75,.45);
}
.fg-loader-bar {
  width: 100%; height: 10px; border-radius: 999px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(240,193,75,.4); overflow: hidden;
}
.fg-loader-bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #a16207, #f0c14b, #ffe08a);
  box-shadow: 0 0 12px rgba(240,193,75,.55); transition: width .15s linear;
}
.fg-loader-pct { font-size: .78rem; color: rgba(255,224,138,.8); letter-spacing: .06em; }
.fg-ambient {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,200,120,.08), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(180,120,255,.06), transparent 35%);
  animation: fgHazeShift 8s ease-in-out infinite alternate;
}
.fg-spin-label {
  position: absolute; inset: 0; display: grid; place-items: center; z-index: 2;
  font-family: Cinzel, Georgia, serif; font-weight: 900; font-size: .72rem;
  letter-spacing: .12em; color: #5a2e05;
  text-shadow: 0 1px 0 rgba(255,240,180,.55); pointer-events: none;
}
.fg-stage {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1.5px solid rgba(240,193,75,.4);
  background: #1a0e18;
  box-shadow: inset 0 0 40px rgba(0,0,0,.35);
  min-height: 460px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translate3d(0,0,0);
  will-change: transform;
  transition: transform .12s ease;
}
.fg-stage.fg-rumble {
  animation: fgRumble .45s linear infinite;
}
.fg-stage.fg-win-punch {
  animation: fgWinPunch .42s cubic-bezier(.2,1.4,.3,1);
}
.fg-stage.fg-bigzoom {
  animation: fgBigZoom .85s ease-out;
}
.fg-stage.fg-gift-flash .fg-sky-rays {
  animation: fgRayPulse .7s ease-in-out 2;
  opacity: 1;
}
@keyframes fgRumble {
  0%,100% { transform: translate3d(0,0,0); }
  25% { transform: translate3d(-1.5px,1px,0); }
  50% { transform: translate3d(1.5px,-1px,0); }
  75% { transform: translate3d(-1px,-1px,0); }
}
@keyframes fgWinPunch {
  0% { transform: scale(1); }
  35% { transform: scale(1.018) translate3d(0,-2px,0); }
  100% { transform: scale(1); }
}
@keyframes fgBigZoom {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.03); filter: brightness(1.12); }
  100% { transform: scale(1); filter: brightness(1); }
}
.fg-sky {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.fg-sky-base {
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(180deg, rgba(40,10,50,.35) 0%, rgba(20,8,20,.12) 40%, rgba(10,6,8,.55) 100%),
    url("/assets/garuda/bg.jpg?v=76") center 35% / cover no-repeat;
  animation: fgSkyDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}
.fg-sky-drift {
  position: absolute;
  inset: -10% -20%;
  background:
    radial-gradient(ellipse 40% 28% at 18% 32%, rgba(255,200,140,.18), transparent 70%),
    radial-gradient(ellipse 36% 24% at 78% 28%, rgba(180,120,220,.16), transparent 72%),
    radial-gradient(ellipse 50% 20% at 50% 18%, rgba(255,160,80,.1), transparent 75%);
  animation: fgCloudDrift 22s linear infinite;
  mix-blend-mode: screen;
  opacity: .85;
  will-change: transform;
}
.fg-sky-rays {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 40% at 62% 42%, rgba(255,190,90,.22), transparent 70%),
    conic-gradient(from 200deg at 62% 40%, transparent 0 8%, rgba(255,210,140,.08) 10%, transparent 14%, transparent 100%);
  opacity: .7;
  animation: fgRayPulse 4.5s ease-in-out infinite alternate;
}
.fg-sky-haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(255,140,60,.08) 70%, rgba(20,8,12,.35) 100%);
  animation: fgHazeShift 12s ease-in-out infinite alternate;
}
@keyframes fgSkyDrift {
  from { transform: translate3d(-1.5%, -0.8%, 0) scale(1.04); }
  to { transform: translate3d(1.8%, 0.6%, 0) scale(1.08); }
}
@keyframes fgCloudDrift {
  from { transform: translate3d(-4%, 0, 0); }
  to { transform: translate3d(6%, -2%, 0); }
}
@keyframes fgRayPulse {
  from { opacity: .45; }
  to { opacity: .9; }
}
@keyframes fgHazeShift {
  from { opacity: .7; }
  to { opacity: 1; }
}
.fg-vignette {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 35% 45%, transparent 20%, rgba(8,4,10,.45) 100%),
    linear-gradient(90deg, rgba(0,0,0,.25), transparent 28%, transparent 62%, rgba(0,0,0,.15));
}
.fg-top, .fg-board, .fg-hud, .fg-status, .fg-bigwin { position: relative; z-index: 1; }
.fg-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px 2px;
}
.fg-top-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
}
.fg-top-actions .fg-ex {
  width: 36px;
  height: 36px;
  font-size: .65rem;
}
.fg-top-actions .fg-ex span {
  width: 14px;
  height: 14px;
  font-size: .55rem;
  right: -3px;
  bottom: -1px;
}
.fg-logo {
  margin: 0;
  flex: 1;
  text-align: center;
}
.fg-logo-mark {
  display: inline-block;
  font-family: Cinzel, "Palatino Linotype", Palatino, serif;
  font-size: clamp(1rem, 3.6vw, 1.45rem);
  font-weight: 900;
  letter-spacing: .08em;
  color: #ffe9a8;
  background: linear-gradient(180deg, #fff6c8 0%, #f0c14b 45%, #b8860b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #5a3a08) drop-shadow(0 0 12px rgba(240,193,75,.45));
}
.fg-info, .fg-gift, .fg-gear, .fg-turbo, .fg-auto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(240,193,75,.55);
  background: linear-gradient(180deg, #4a3420, #1a100a);
  color: var(--fg-gold);
  font-weight: 800;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 2px 0 #2a1808, inset 0 1px 0 rgba(255,230,150,.25);
}
.fg-gear::before {
  content: "";
  width: 16px; height: 16px;
  background:
    radial-gradient(circle at center, #1a100a 0 28%, transparent 29%),
    conic-gradient(from 20deg, #f0c14b 0 12%, transparent 12% 25%, #f0c14b 25% 37%, transparent 37% 50%, #f0c14b 50% 62%, transparent 62% 75%, #f0c14b 75% 87%, transparent 87% 100%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px #f0c14b;
}
.fg-gift { position: relative; }
.fg-gift-ico {
  width: 14px;
  height: 14px;
  background: linear-gradient(180deg, #f0c14b, #a16207);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(240,193,75,.5);
  position: relative;
}
.fg-gift-ico::before {
  content: "";
  position: absolute;
  left: 50%; top: -3px;
  width: 10px; height: 6px;
  margin-left: -5px;
  background: #e11d48;
  border-radius: 2px 2px 0 0;
}
.fg-gift.pulse { animation: fgGiftPulse .9s ease 2; }
@keyframes fgGiftPulse {
  0%,100% { transform: scale(1); box-shadow: 0 0 0 rgba(240,193,75,0); }
  50% { transform: scale(1.12); box-shadow: 0 0 16px rgba(240,193,75,.55); }
}
.fg-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(140px, .55fr);
  gap: 6px;
  padding: 4px 10px 2px;
  align-items: end;
  min-height: 0;
  flex: 1;
}
body.gb-land-game .fg-stage {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
body.gb-land-game .fg-game { --fg-reel-h: min(42vh, 280px); }
body.gb-land-game .fg-garuda-canvas { max-height: none; height: 100%; }
body.gb-land-game .fg-hero {
  min-height: 0;
  height: 100%;
  max-height: none;
}
.fg-frame {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 78px;
  gap: 6px;
  padding: 18px 14px 20px 18px;
  border-radius: 6px;
  background:
    linear-gradient(180deg, rgba(70,48,28,.92), rgba(28,18,10,.96));
  box-shadow:
    0 0 0 2px #8a6110,
    0 0 0 5px #3a2610,
    0 0 0 7px #c9a227,
    inset 0 0 28px rgba(0,0,0,.45),
    0 12px 28px rgba(0,0,0,.4);
}
.fg-pillar {
  position: absolute;
  top: 6px; bottom: 10px;
  width: 14px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(90deg, #5a3a18, #c9a227 35%, #8a6110 55%, #f0c14b 70%, #5a3a18),
    repeating-linear-gradient(180deg, transparent 0 10px, rgba(0,0,0,.18) 10px 12px);
  border-radius: 3px;
  box-shadow: inset 0 0 6px rgba(0,0,0,.35), 0 0 8px rgba(240,193,75,.2);
}
.fg-pillar::before,
.fg-pillar::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px;
  height: 16px;
  background: linear-gradient(180deg, #f0c14b, #8a6110);
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,.35);
}
.fg-pillar::before { top: -4px; }
.fg-pillar::after { bottom: -4px; }
.fg-pillar-l { left: 2px; }
.fg-pillar-r { right: 2px; }
.fg-lintel {
  position: absolute;
  left: 10px; right: 10px; top: 2px;
  height: 12px;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg, #d4a84a, #7a4e14),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(0,0,0,.2) 14px 16px);
  border-radius: 2px 2px 0 0;
  box-shadow: 0 2px 0 #3a2208;
}
.fg-plinth {
  position: absolute;
  left: 8px; right: 8px; bottom: 2px;
  height: 14px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, #8a6110, #3a2208);
  border-radius: 0 0 3px 3px;
  box-shadow: inset 0 2px 0 rgba(255,220,140,.25);
}
.fg-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  height: var(--fg-reel-h);
  overflow: hidden;
  border-radius: 4px;
  background:
    linear-gradient(180deg, #c4a574 0%, #a88858 40%, #8a6e44 100%);
  border: 1px solid rgba(90,60,20,.55);
  box-shadow: inset 0 0 12px rgba(0,0,0,.25);
}
.fg-game.is-spinning .fg-reels {
  filter: brightness(1.06) saturate(1.08);
  box-shadow: inset 0 0 18px rgba(255,200,80,.2), 0 0 12px rgba(240,193,75,.15);
}
.fg-reel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.12), transparent 30%, transparent 70%, rgba(0,0,0,.12)),
    linear-gradient(180deg, #b89860, #9a7a48);
  border-right: 1px solid rgba(60,40,15,.35);
}
.fg-reel:last-child { border-right: 0; }
.fg-game.is-spinning .fg-strip,
.fg-game.is-spinning .fg-spec-strip {
  filter: blur(0.6px) brightness(1.05);
}
.fg-strip, .fg-spec-strip {
  will-change: transform;
  transform: translate3d(0,0,0);
}
.fg-sym {
  height: calc(var(--fg-reel-h) / 3);
  display: grid;
  place-items: center;
  padding: 2px;
  box-sizing: border-box;
}
.fg-ico-wrap {
  aspect-ratio: 1 / 1;
  height: 90%;
  width: auto;
  max-width: 94%;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: transparent;
  border: 0;
  overflow: hidden;
}
.fg-spr {
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25);
}
.fg-spr.spr-wild {
  background-image: url("/assets/garuda/wild.png?v=76");
  background-size: contain;
}
.fg-spr.spr-exwild {
  background-image: url("/assets/garuda/wild.png?v=76");
  background-size: contain;
  filter: hue-rotate(-15deg) saturate(1.35) brightness(1.05);
  box-shadow: 0 0 10px rgba(225,29,72,.55);
}
.fg-spr.spr-sapphire,
.fg-spr.spr-emerald,
.fg-spr.spr-ruby {
  background-image: url("/assets/garuda/gems.png?v=76");
  background-size: 300% 100%;
  background-repeat: no-repeat;
}
.fg-spr.spr-sapphire { background-position: 0% 50%; }
.fg-spr.spr-emerald { background-position: 50% 50%; }
.fg-spr.spr-ruby { background-position: 100% 50%; }
.fg-spr.spr-A,
.fg-spr.spr-K,
.fg-spr.spr-Q,
.fg-spr.spr-J {
  background-image: url("/assets/garuda/letters.png?v=76");
  background-size: 200% 200%;
  background-repeat: no-repeat;
}
.fg-spr.spr-A { background-position: 0% 0%; }
.fg-spr.spr-K { background-position: 100% 0%; }
.fg-spr.spr-Q { background-position: 0% 100%; }
.fg-spr.spr-J { background-position: 100% 100%; }
.fg-sym.is-win .fg-ico-wrap {
  animation: fgSymWin .45s ease infinite alternate;
  filter: drop-shadow(0 0 8px rgba(255,224,138,.85));
}
.fg-land-spark {
  pointer-events: none;
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, rgba(240,193,75,.2) 55%, transparent 70%);
  box-shadow: 0 0 16px rgba(255,220,120,.9), 0 0 28px rgba(250,204,21,.45);
  animation: fgLandSpark .4s ease-out forwards;
  z-index: 4;
}
@keyframes fgLandSpark {
  0% { transform: scale(.4); opacity: 1; }
  100% { transform: scale(4.2); opacity: 0; }
}
@keyframes fgSymWin {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}
.fg-spec-wrap {
  position: relative;
  height: var(--fg-reel-h);
  border-radius: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 50%, rgba(80,40,20,.4), #120a06 70%);
  border: 1.5px solid rgba(240,193,75,.55);
  box-shadow: inset 0 0 16px rgba(0,0,0,.45), 0 0 12px rgba(240,193,75,.15);
}
.fg-spec-glow {
  position: absolute;
  inset: 28% 8%;
  border-radius: 10px;
  background: radial-gradient(circle, rgba(255,200,80,.28), transparent 70%);
  pointer-events: none;
  z-index: 1;
  filter: blur(6px);
  animation: fgMultBloom 1.8s ease-in-out infinite alternate;
}
@keyframes fgMultBloom {
  from { opacity: .55; }
  to { opacity: 1; }
}
.fg-spec { height: 100%; overflow: hidden; position: relative; z-index: 1; }
.fg-spec-focus {
  position: absolute;
  left: 5px; right: 5px;
  top: 33.333%;
  height: 33.333%;
  border: 2.5px solid #ffe08a;
  border-radius: 8px;
  box-shadow: 0 0 16px rgba(240,193,75,.7), inset 0 0 12px rgba(240,193,75,.2);
  pointer-events: none;
  z-index: 2;
}
.fg-game.is-win .fg-spec-glow {
  animation: fgMultBloom .55s ease-in-out infinite alternate;
  background: radial-gradient(circle, rgba(255,230,120,.55), transparent 70%);
}
.fg-ring {
  height: calc(var(--fg-reel-h) / 3);
  display: grid;
  place-items: center;
  padding: 4px;
  box-sizing: border-box;
}
.fg-ring b {
  width: min(56px, 78%);
  height: min(56px, 78%);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: Cinzel, Georgia, serif;
  font-size: .9rem;
  font-weight: 900;
  color: #fff8e7;
  border: 2px solid rgba(255,230,180,.85);
  box-shadow: 0 0 12px rgba(240,193,75,.45), inset 0 -4px 8px rgba(0,0,0,.35), inset 0 3px 6px rgba(255,255,255,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
}
.fg-ring b.m-lo {
  background: radial-gradient(circle at 32% 28%, #ffe08a, #c97812 55%, #5a2e05);
}
.fg-ring b.m-cool {
  background: radial-gradient(circle at 32% 28%, #e9d5ff, #7c3aed 50%, #3b0764);
  border-color: #d8b4fe;
  box-shadow: 0 0 14px rgba(168,85,247,.55), inset 0 -4px 8px rgba(0,0,0,.35);
}
.fg-ring b.m-mid {
  background: radial-gradient(circle at 32% 28%, #fce7f3, #db2777 52%, #831843);
  border-color: #f9a8d4;
  box-shadow: 0 0 14px rgba(236,72,153,.55), inset 0 -4px 8px rgba(0,0,0,.35);
}
.fg-ring b.m-hi {
  background: radial-gradient(circle at 32% 28%, #e0f2fe, #38bdf8 48%, #0c4a6e);
  border-color: #bae6fd;
  box-shadow: 0 0 16px rgba(56,189,248,.55), inset 0 -4px 8px rgba(0,0,0,.35);
}
.fg-ring b.m-max {
  background: radial-gradient(circle at 32% 28%, #fef9c3, #facc15 40%, #a16207 75%, #431407);
  border-color: #fde68a;
  box-shadow: 0 0 18px rgba(250,204,21,.7), inset 0 -4px 8px rgba(0,0,0,.35);
  animation: fgMultPulse 1s ease-in-out infinite alternate;
}
@keyframes fgMultPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.15); }
}
.fg-ring.is-nudge b.fg-ring-n {
  font-size: .72rem;
  background: radial-gradient(circle at 30% 30%, #fecaca, #b91c1c 65%, #450a0a);
  border-color: #fda4af;
}
.fg-ring.is-nudge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.fg-ring.is-nudge em {
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .08em;
  color: #fecaca;
  font-weight: 800;
}
.fg-ring.is-nudge span {
  font-size: .7rem;
  color: #ffe08a;
  font-weight: 800;
}
.fg-ex {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid #86efac;
  background: radial-gradient(circle at 35% 30%, #4ade80, #16a34a 55%, #14532d);
  color: #052e16;
  font-weight: 900;
  font-size: .72rem;
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  box-shadow: 0 0 14px rgba(74,222,128,.55), inset 0 2px 4px rgba(255,255,255,.35);
  padding: 0;
}
.fg-ex em { font-style: normal; line-height: 1; }
.fg-ex-up {
  position: absolute;
  top: 4px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 7px solid #bbf7d0;
}
.fg-ex span {
  position: absolute;
  right: -4px; bottom: -2px;
  background: #e11d48;
  color: #fff;
  border-radius: 50%;
  width: 16px; height: 16px;
  display: grid; place-items: center;
  font-size: .62rem;
  border: 1px solid #fecaca;
}
.fg-ex.on {
  box-shadow: 0 0 18px rgba(74,222,128,.75), 0 0 8px rgba(250,204,21,.4);
  border-color: #facc15;
}
.fg-hero {
  position: relative;
  min-height: 280px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.45));
}
.fg-hero-plinth {
  position: absolute;
  left: 12%; right: 12%;
  bottom: 2%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(90,50,20,.85), rgba(20,10,8,.2) 70%, transparent);
  box-shadow: 0 0 18px rgba(255,180,60,.25);
  z-index: 0;
  animation: fgPlinthGlow 2.4s ease-in-out infinite alternate;
}
@keyframes fgPlinthGlow {
  from { opacity: .65; transform: scaleX(1); }
  to { opacity: 1; transform: scaleX(1.06); }
}
.fg-garuda-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 360px;
  display: block;
  pointer-events: none;
}
.fg-lines {
  position: absolute;
  inset: 18px 92px 20px 18px;
  pointer-events: none;
  z-index: 2;
}
.fg-line {
  position: absolute;
  left: 4%; right: 4%;
  height: 2px;
  background: transparent;
  opacity: 0;
  transition: opacity .2s ease;
}
.fg-line[data-line="0"] { top: 50%; }
.fg-line[data-line="1"] { top: 16.5%; }
.fg-line[data-line="2"] { top: 83.5%; }
.fg-line[data-line="3"] { top: 16.5%; transform: rotate(28deg); transform-origin: left center; width: 100%; }
.fg-line[data-line="4"] { top: 83.5%; transform: rotate(-28deg); transform-origin: left center; width: 100%; }
.fg-line.on {
  opacity: 1;
  background: linear-gradient(90deg, transparent, #4ade80, #ffe08a, #4ade80, transparent);
  box-shadow: 0 0 8px rgba(74,222,128,.55);
  animation: fgLineFlash .55s ease infinite alternate;
}
@keyframes fgLineFlash {
  from { filter: brightness(1); opacity: .85; }
  to { filter: brightness(1.35); opacity: 1; }
}
.fg-hud {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 8px 10px max(10px, env(safe-area-inset-bottom));
  background:
    linear-gradient(180deg, rgba(55,38,22,.95), rgba(18,12,8,.98));
  border-top: 2px solid rgba(201,162,39,.45);
  box-shadow: inset 0 1px 0 rgba(255,220,140,.15), 0 -8px 24px rgba(0,0,0,.25);
}
.fg-hud .fg-stat,
.fg-hud .fg-bet {
  flex: 1 1 0;
  min-width: 0;
}
.fg-hud .fg-turbo,
.fg-hud .fg-auto,
.fg-hud .fg-spin {
  flex-shrink: 0;
}
.fg-hud .fg-info,
.fg-hud .fg-gear,
.fg-hud .fg-ex,
.fg-hud .fg-gift {
  display: none !important;
}
.fg-stat {
  display: grid;
  gap: 0;
  min-width: 0;
  position: relative;
}
.fg-stat em, .fg-bet em {
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,224,138,.75);
}
.fg-stat strong, .fg-bet b {
  font-size: .95rem;
  color: #fff6e8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fg-stat.win strong { color: #4ade80; text-shadow: 0 0 10px rgba(74,222,128,.35); }
.fg-lv {
  position: absolute;
  right: 0; top: 0;
  font-size: .52rem;
  color: #86efac;
  background: rgba(22,101,52,.45);
  border: 1px solid rgba(134,239,172,.4);
  border-radius: 4px;
  padding: 0 4px;
}
.fg-bet { text-align: center; }
.fg-bet-row {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(0,0,0,.4);
  border-radius: 999px;
  padding: 2px 6px;
  border: 1px solid rgba(240,193,75,.35);
}
.fg-coin {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe08a, #d4a017 55%, #7a4e00);
  box-shadow: inset 0 0 0 2px #a16207, 0 1px 2px rgba(0,0,0,.4);
  position: relative;
}
.fg-coin::after {
  content: "$";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: .55rem;
  font-weight: 900;
  color: #5a3a08;
}
.fg-bet-row button {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: #16a34a;
  color: #fff;
  font-weight: 900;
  cursor: pointer;
}
.fg-bet small {
  display: block;
  margin-top: 2px;
  font-size: .55rem;
  color: rgba(255,224,138,.5);
}
.fg-bolt {
  width: 10px; height: 16px;
  background: #facc15;
  clip-path: polygon(35% 0, 100% 0, 55% 42%, 90% 42%, 0 100%, 40% 52%, 10% 52%);
}
.fg-turbo.on, .fg-auto.on {
  border-color: #facc15;
  box-shadow: 0 0 12px rgba(250,204,21,.5);
}
.fg-auto-ico {
  width: 16px; height: 16px;
  border: 2px solid #f0c14b;
  border-radius: 50%;
  border-top-color: transparent;
  border-left-color: transparent;
  position: relative;
  transform: rotate(-45deg);
}
.fg-auto-ico::before {
  content: "";
  position: absolute;
  top: -3px; left: 6px;
  border: 4px solid transparent;
  border-bottom-color: #f0c14b;
  transform: rotate(45deg);
}
.fg-spin {
  position: relative;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: 3px solid #ffe08a;
  background:
    conic-gradient(from 0deg, #8a6110, #f0c14b, #ffe08a, #c9a227, #8a6110);
  color: #5a2e05;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #5a3a08, 0 10px 22px rgba(0,0,0,.45), 0 0 18px rgba(240,193,75,.35);
  padding: 0;
}
.fg-spin-core {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background:
    repeating-linear-gradient(135deg, #f0c14b 0 6px, #d4a017 6px 12px);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.35);
}
.fg-spin-ring {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 2px solid rgba(90,46,5,.35);
  pointer-events: none;
  z-index: 1;
}
.fg-game.is-spinning .fg-spin { transform: scale(.96); }
.fg-game.is-spinning .fg-spin-ring {
  animation: fgSpinRing .55s linear infinite;
}
.fg-game.is-win .fg-frame {
  box-shadow:
    0 0 0 2px #8a6110,
    0 0 0 5px #3a2610,
    0 0 0 7px #ffe08a,
    0 0 28px rgba(240,193,75,.45),
    inset 0 0 28px rgba(0,0,0,.45);
}
@keyframes fgSpinRing {
  to { transform: rotate(360deg); }
}
.fg-status {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  padding: 6px 14px;
  font-size: .78rem;
  color: #fff6e8;
  text-align: center;
  background: rgba(12,8,6,.72);
  border: 1px solid rgba(240,193,75,.4);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
}
.fg-status[hidden] { display: none !important; }
.fg-bigwin {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.1), rgba(0,0,0,.55));
  pointer-events: none;
}
.fg-bigwin[hidden] { display: none !important; }
.fg-big-inner { text-align: center; animation: fgBigPop .45s cubic-bezier(.2,1.2,.3,1); }
.fg-big-title {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  color: #4ade80;
  -webkit-text-stroke: 2px #14532d;
  text-shadow: 0 4px 0 #166534, 0 0 24px rgba(74,222,128,.45);
  letter-spacing: .04em;
}
.fg-big-amt {
  margin-top: 4px;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 3px 0 #7a4e00, 0 0 18px rgba(240,193,75,.5);
}
@keyframes fgBigPop {
  from { transform: scale(.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
body.gb-land-game .fg-stage { min-height: min(82vh, 600px); }
body.gb-land-game .fg-board { min-height: 0; }
body.gb-land-game .fg-game { --fg-reel-h: min(42vh, 280px); }
body.gb-land-game .fg-garuda-canvas { max-height: none; height: 100%; }
body.gb-land-game .fg-hero { min-height: 0; height: 100%; }
@media (max-width: 420px) {
  body.gb-land-game .fg-board { grid-template-columns: minmax(0, 1.35fr) minmax(120px, .55fr); }
  body.gb-land-game .fg-game { --fg-reel-h: min(38vh, 240px); }
  .fg-board { grid-template-columns: 1fr 96px; }
  .fg-frame { grid-template-columns: 1fr 62px; padding: 14px 10px 16px 14px; }
  .fg-game { --fg-reel-h: 210px; }
  .fg-ring b { width: 46px; height: 46px; font-size: .78rem; }
  body.gb-slot-fs .fg-hud {
    gap: 2px;
    padding: 6px 4px max(6px, env(safe-area-inset-bottom));
    padding-right: max(4px, env(safe-area-inset-right));
  }
  body.gb-slot-fs .fg-spin { width: 44px; height: 44px; }
  body.gb-slot-fs .fg-turbo,
  body.gb-slot-fs .fg-auto { width: 26px; height: 26px; }
  .fg-hud {
    gap: 3px;
    padding: 6px 6px max(8px, env(safe-area-inset-bottom));
  }
  .fg-spin { width: 52px; height: 52px; }
  .fg-spin-label { font-size: .56rem; }
  body.gb-slot-fs .fg-top-actions .fg-ex { width: 26px; height: 26px; font-size: .54rem; }
  .fg-garuda-canvas { max-height: 250px; }
  .fg-hero { min-height: 210px; }
}
@media (prefers-reduced-motion: reduce) {
  .fg-sym.is-win .fg-ico-wrap,
  .fg-gift.pulse,
  .fg-game.is-spinning .fg-spin-ring,
  .fg-big-inner,
  .fg-spec-glow,
  .fg-ring b.m-max,
  .fg-sky-base,
  .fg-sky-drift,
  .fg-sky-rays,
  .fg-sky-haze,
  .fg-hero-plinth,
  .fg-line.on,
  .fg-stage.fg-rumble,
  .fg-stage.fg-win-punch,
  .fg-stage.fg-bigzoom { animation: none !important; }
}

/* ===== v75 Fortune Garuda — loader, landscape tip, SPIN label, RE-NUDGE ===== */
.fg-game { position: relative; }
.fg-loader {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(80,40,10,.55), rgba(8,4,6,.92)),
    linear-gradient(180deg, #2a1410, #0c0806);
  transition: opacity .35s ease, visibility .35s ease;
}
.fg-loader.is-done { opacity: 0; pointer-events: none; }
.fg-loader[hidden] { display: none !important; }
.fg-loader-card {
  width: min(320px, 86%);
  text-align: center;
  padding: 18px 16px 14px;
}
.fg-loader-mark {
  font-family: Cinzel, "Palatino Linotype", Palatino, serif;
  font-weight: 900;
  letter-spacing: .1em;
  font-size: clamp(.95rem, 3.2vw, 1.25rem);
  color: #ffe9a8;
  text-shadow: 0 2px 0 #5a3a08, 0 0 16px rgba(240,193,75,.45);
  margin-bottom: 16px;
}
.fg-loader-bar {
  height: 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(240,193,75,.45);
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
}
.fg-loader-bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #8a6110, #f0c14b, #ffe08a);
  box-shadow: 0 0 10px rgba(240,193,75,.55);
  transition: width .15s linear;
}
.fg-loader-pct {
  margin-top: 10px;
  font-size: .78rem;
  color: rgba(255,224,138,.8);
  letter-spacing: .06em;
}
.fg-rotate {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(8,4,6,.45);
  backdrop-filter: blur(2px);
  pointer-events: none;
}
.fg-rotate.is-soft { pointer-events: none; background: rgba(8,4,6,.28); }
.fg-rotate[hidden] { display: none !important; }
.fg-rotate-card {
  text-align: center;
  color: #ffe9a8;
  padding: 20px;
  pointer-events: none;
}
.fg-rotate-ico {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 12px;
  border: 3px solid #f0c14b;
  border-radius: 10px;
  position: relative;
  animation: fgRotateHint 1.4s ease-in-out infinite;
}
.fg-rotate-ico::after {
  content: "";
  position: absolute;
  inset: 10px 18px;
  border: 2px solid rgba(240,193,75,.7);
  border-radius: 4px;
}
@keyframes fgRotateHint {
  0%,100% { transform: rotate(0deg); }
  40% { transform: rotate(90deg); }
  60% { transform: rotate(90deg); }
}
.fg-rotate-card strong {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 4px;
}
.fg-rotate-card em {
  font-style: normal;
  font-size: .82rem;
  color: rgba(255,224,138,.7);
}
.fg-spin-label {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  font-family: Cinzel, Georgia, serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: #5a2e05;
  text-shadow: 0 1px 0 rgba(255,240,180,.55);
  pointer-events: none;
}
.fg-spin-core { opacity: .92; }
.fg-renudge {
  position: absolute;
  top: 8px;
  right: 88px;
  z-index: 4;
  padding: 3px 8px;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .08em;
  color: #3a2208;
  background: linear-gradient(180deg, #e8d5a0, #b8923a);
  border: 1px solid #7a5610;
  border-radius: 3px;
  box-shadow: 0 1px 0 #5a3a08, inset 0 1px 0 rgba(255,255,255,.35);
  pointer-events: none;
}
.fg-ambient {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,200,120,.08), transparent 40%),
    radial-gradient(circle at 80% 20%, rgba(180,120,220,.06), transparent 42%);
  animation: fgHazeShift 14s ease-in-out infinite alternate;
}
.fg-stage.fg-alive .fg-sky-base { animation-duration: 32s; }
body.gb-land-game .fg-game.land-shell {
  max-width: 100%;
}
@media (orientation: portrait) and (max-width: 900px) {
  body.gb-land-game .fg-game.fg-need-land .fg-stage {
    filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fg-rotate-ico,
  .fg-ambient { animation: none !important; }
}

/* ===== v78 Money Pot — dedicated premium vault module (not jili skin) ===== */
.mvp-game {
  --mvp-gold: #f0c14b;
  --mvp-gold2: #ffe08a;
  --mvp-emerald: #10b981;
  --mvp-emerald2: #34d399;
  --mvp-ink: #06140f;
  --mvp-reel-h: 252px;
  position: relative;
  display: grid;
  gap: 0;
  min-height: min(78vh, 560px);
  isolation: isolate;
  overflow: hidden;
}
body.gb-land-game #app:has(#mvpRoot) { padding: 0 !important; }
body.gb-land-game .game-panel:has(#mvpRoot),
body.gb-land-game .game-shell:has(#mvpRoot) {
  padding: 0 !important; border: 0 !important; background: transparent !important;
}
body.gb-land-game .mvp-game {
  min-height: calc(100dvh - 36px);
  aspect-ratio: 16 / 9;
  width: min(100vw, 177.78dvh);
  height: min(56.25vw, calc(100dvh - 36px));
  margin: 0 auto;
  max-width: 100vw;
  max-height: calc(100dvh - 36px);
}
.mvp-rotate {
  position: absolute; inset: 0; z-index: 40;
  display: grid; place-items: center;
  background: rgba(4,16,12,.4); backdrop-filter: blur(2px);
  pointer-events: none;
}
.mvp-rotate.is-soft { background: rgba(4,16,12,.28); pointer-events: none; }
.mvp-rotate[hidden] { display: none !important; }
.mvp-rotate-card {
  display: grid; gap: 6px; justify-items: center; text-align: center;
  color: #d1fae5; padding: 18px 22px;
  border: 1px solid rgba(52,211,153,.4); border-radius: 12px;
  background: linear-gradient(180deg, rgba(16,60,40,.95), rgba(6,20,14,.98));
  pointer-events: none;
}
.mvp-rotate-card strong { font-family: Cinzel, Georgia, serif; letter-spacing: .06em; color: #ffe08a; }
.mvp-rotate-card em { font-style: normal; font-size: .78rem; color: rgba(209,250,229,.75); }
.mvp-rotate-ico {
  width: 42px; height: 28px; border: 2px solid #34d399; border-radius: 6px;
  animation: mvpRotateHint 1.4s ease-in-out infinite;
}
@keyframes mvpRotateHint {
  0%,100% { transform: rotate(0deg); }
  40% { transform: rotate(90deg); }
}
.mvp-loader {
  position: absolute; inset: 0; z-index: 30;
  display: grid; place-items: center;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(16,85,55,.55), rgba(4,12,10,.94)),
    linear-gradient(180deg, #0c2218, #06140f);
  transition: opacity .3s ease;
}
.mvp-loader.is-done { opacity: 0; pointer-events: none; }
.mvp-loader[hidden] { display: none !important; }
.mvp-loader-card { width: min(320px, 78vw); display: grid; gap: 12px; justify-items: center; }
.mvp-loader-mark {
  font-family: Cinzel, Georgia, serif; font-weight: 900; letter-spacing: .12em;
  font-size: clamp(1rem, 3.2vw, 1.35rem); color: #ffe08a;
  text-shadow: 0 2px 0 #14532d, 0 0 18px rgba(52,211,153,.45);
}
.mvp-loader-bar {
  width: 100%; height: 10px; border-radius: 999px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(52,211,153,.4); overflow: hidden;
}
.mvp-loader-bar i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, #047857, #34d399, #f0c14b);
  box-shadow: 0 0 12px rgba(52,211,153,.55); transition: width .15s linear;
}
.mvp-loader-pct { font-size: .78rem; color: rgba(209,250,229,.8); letter-spacing: .06em; }
.mvp-stage {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1.5px solid rgba(52,211,153,.35);
  background: #0a1a14;
  box-shadow: inset 0 0 40px rgba(0,0,0,.4), 0 0 24px rgba(16,185,129,.12);
  min-height: 460px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  transform: translate3d(0,0,0);
  will-change: transform;
}
.mvp-game.mvp-win-punch .mvp-stage,
.mvp-stage.mvp-win-punch { animation: mvpWinPunch .42s cubic-bezier(.2,1.4,.3,1); }
.mvp-game.mvp-bigzoom .mvp-stage,
.mvp-stage.mvp-bigzoom { animation: mvpBigZoom .85s ease-out; }
.mvp-game.mvp-lock-flash .mvp-sky-glow,
.mvp-stage.mvp-lock-flash .mvp-sky-glow {
  animation: mvpRayPulse .55s ease-in-out 2;
  opacity: 1;
}
@keyframes mvpWinPunch {
  0% { transform: scale(1); }
  35% { transform: scale(1.018) translate3d(0,-2px,0); }
  100% { transform: scale(1); }
}
@keyframes mvpBigZoom {
  0% { transform: scale(1); filter: brightness(1); }
  40% { transform: scale(1.03); filter: brightness(1.14); }
  100% { transform: scale(1); filter: brightness(1); }
}
.mvp-sky {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.mvp-sky-base {
  position: absolute;
  inset: -4%;
  background:
    linear-gradient(180deg, rgba(6,30,22,.45) 0%, rgba(4,16,12,.2) 40%, rgba(2,10,8,.62) 100%),
    url("/assets/moneypot/bg.jpg?v=78") center 40% / cover no-repeat;
  animation: mvpSkyDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
.mvp-sky-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 36% at 72% 42%, rgba(240,193,75,.2), transparent 70%),
    radial-gradient(ellipse 40% 30% at 28% 30%, rgba(16,185,129,.18), transparent 68%),
    linear-gradient(180deg, transparent 50%, rgba(4,12,10,.4) 100%);
  animation: mvpRayPulse 5s ease-in-out infinite alternate;
  mix-blend-mode: screen;
  opacity: .85;
}
@keyframes mvpSkyDrift {
  from { transform: translate3d(-1.2%, -0.6%, 0) scale(1.04); }
  to { transform: translate3d(1.6%, 0.5%, 0) scale(1.07); }
}
@keyframes mvpRayPulse {
  from { opacity: .5; }
  to { opacity: .95; }
}
.mvp-top, .mvp-board, .mvp-hud, .mvp-status, .mvp-bigwin, .mvp-lock-banner { position: relative; z-index: 1; }
.mvp-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px 2px;
}
.mvp-logo {
  margin: 0;
  flex: 1;
  text-align: center;
  font-family: Cinzel, "Palatino Linotype", Palatino, serif;
  font-size: clamp(1rem, 3.4vw, 1.4rem);
  font-weight: 900;
  letter-spacing: .1em;
  color: #ffe9a8;
  background: linear-gradient(180deg, #fff6c8 0%, #f0c14b 40%, #34d399 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 #064e3b) drop-shadow(0 0 12px rgba(52,211,153,.4));
}
.mvp-info {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(240,193,75,.55);
  background: linear-gradient(180deg, #1a3a2c, #0a1812);
  color: var(--mvp-gold);
  font-weight: 800;
  display: grid; place-items: center;
  cursor: pointer; padding: 0;
  box-shadow: 0 2px 0 #062018, inset 0 1px 0 rgba(255,230,150,.2);
}
.mvp-jackpots {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end;
  max-width: 46%;
}
.mvp-jp-pill {
  font-size: .55rem; letter-spacing: .04em; font-weight: 800;
  padding: 3px 6px; border-radius: 999px;
  color: #ecfdf5;
  background: rgba(6,20,14,.72);
  border: 1px solid rgba(52,211,153,.35);
  white-space: nowrap;
}
.mvp-jp-pill.grand {
  color: #052e16;
  background: linear-gradient(180deg, #f0c14b, #34d399);
  border-color: #a16207;
}
.mvp-jp-pill b { margin-left: 3px; color: #ffe08a; }
.mvp-jp-pill.grand b { color: #064e3b; }
.mvp-lock-banner {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin: 2px 10px 0; padding: 6px 12px;
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(4,120,87,.15), rgba(240,193,75,.35), rgba(4,120,87,.15));
  border: 1px solid rgba(240,193,75,.55);
  color: #ffe08a;
  box-shadow: 0 0 16px rgba(240,193,75,.25);
  animation: mvpLockPulse 1.2s ease-in-out infinite alternate;
}
.mvp-lock-banner[hidden] { display: none !important; }
.mvp-lock-banner strong {
  font-family: Cinzel, Georgia, serif; font-size: .78rem; letter-spacing: .08em;
}
.mvp-lock-banner em { font-style: normal; font-size: .72rem; color: #ecfdf5; }
@keyframes mvpLockPulse {
  from { filter: brightness(1); }
  to { filter: brightness(1.12); }
}
.mvp-board {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(110px, .72fr);
  gap: 6px;
  padding: 4px 10px 6px;
  min-height: 0;
  align-items: stretch;
}
.mvp-frame {
  position: relative;
  border-radius: 10px;
  padding: 10px 10px 12px;
  background:
    linear-gradient(180deg, rgba(16,60,40,.55), rgba(6,20,14,.75)),
    linear-gradient(135deg, rgba(240,193,75,.15), transparent 40%);
  border: 2px solid rgba(240,193,75,.4);
  box-shadow:
    0 0 0 1px rgba(4,120,87,.35),
    inset 0 0 24px rgba(0,0,0,.35),
    0 8px 20px rgba(0,0,0,.35);
}
.mvp-game.is-win .mvp-frame {
  box-shadow:
    0 0 0 2px #047857,
    0 0 0 5px #064e3b,
    0 0 0 7px #f0c14b,
    0 0 28px rgba(52,211,153,.4),
    inset 0 0 28px rgba(0,0,0,.4);
}
.mvp-lines {
  position: absolute;
  inset: 14px 12px 16px;
  pointer-events: none;
  z-index: 2;
}
.mvp-line {
  position: absolute;
  left: 4%; right: 4%;
  height: 2px;
  background: transparent;
  opacity: 0;
  transition: opacity .2s ease;
}
.mvp-line[data-line="0"] { top: 50%; }
.mvp-line[data-line="1"] { top: 16.5%; }
.mvp-line[data-line="2"] { top: 83.5%; }
.mvp-line.on {
  opacity: 1;
  background: linear-gradient(90deg, transparent, #34d399, #ffe08a, #34d399, transparent);
  box-shadow: 0 0 8px rgba(52,211,153,.55);
  animation: mvpLineFlash .55s ease infinite alternate;
}
@keyframes mvpLineFlash {
  from { filter: brightness(1); opacity: .85; }
  to { filter: brightness(1.35); opacity: 1; }
}
.mvp-reels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  height: var(--mvp-reel-h);
  overflow: hidden;
  border-radius: 6px;
  background:
    linear-gradient(180deg, #1a3d30 0%, #0f2920 40%, #0a1c16 100%);
  border: 1px solid rgba(52,211,153,.35);
  box-shadow: inset 0 0 14px rgba(0,0,0,.4);
}
.mvp-game.is-spinning .mvp-reels {
  filter: brightness(1.08) saturate(1.1);
  box-shadow: inset 0 0 18px rgba(52,211,153,.2), 0 0 12px rgba(240,193,75,.15);
}
.mvp-reel {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(0,0,0,.2), transparent 30%, transparent 70%, rgba(0,0,0,.2)),
    linear-gradient(180deg, #14362a, #0c221a);
  border-right: 1px solid rgba(4,80,55,.4);
}
.mvp-reel:last-child { border-right: 0; }
.mvp-reel.is-locked {
  box-shadow: inset 0 0 0 2px rgba(240,193,75,.75), inset 0 0 18px rgba(240,193,75,.25);
}
.mvp-game.is-spinning .mvp-strip { filter: blur(0.55px) brightness(1.05); }
.mvp-strip {
  will-change: transform;
  transform: translate3d(0,0,0);
}
.mvp-cell {
  height: calc(var(--mvp-reel-h) / 3);
  display: grid;
  place-items: center;
  padding: 2px;
}
.mvp-cell.is-win .mvp-sym {
  transform: scale(1.08);
  filter: drop-shadow(0 0 10px rgba(52,211,153,.7));
}
.mvp-sym {
  width: 92%;
  height: 90%;
  border-radius: 10px;
  display: grid;
  place-items: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
  border: 1.5px solid rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 3px 8px rgba(0,0,0,.35);
  transition: transform .2s ease, filter .2s ease;
}
.mvp-sym em {
  font-style: normal;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1;
}
.mvp-sym b {
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.mvp-ico {
  width: 22px; height: 22px;
  display: block;
  border-radius: 50%;
  position: relative;
}
.mvp-ico-bag {
  background:
    radial-gradient(circle at 35% 30%, #fff7cc, #f0c14b 45%, #a16207);
  box-shadow: 0 0 8px rgba(240,193,75,.45);
}
.mvp-ico-bag::after {
  content: "$";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .72rem; font-weight: 900; color: #3f2a05;
}
.mvp-bag-bronze {
  background: linear-gradient(160deg, #cd7f32, #8b4513 60%, #5c2e0a);
  color: #fff7ed;
}
.mvp-bag-silver {
  background: linear-gradient(160deg, #e5e7eb, #9ca3af 55%, #4b5563);
  color: #111827;
}
.mvp-bag-gold {
  background: linear-gradient(160deg, #fff7cc, #f0c14b 45%, #a16207);
  color: #422006;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 12px rgba(240,193,75,.35);
}
.mvp-collector {
  background: linear-gradient(160deg, #34d399, #059669 50%, #064e3b);
  color: #ecfdf5;
  border-color: rgba(240,193,75,.55);
}
.mvp-ico-keep {
  background: radial-gradient(circle at 35% 30%, #6ee7b7, #059669);
  box-shadow: 0 0 10px rgba(16,185,129,.55);
}
.mvp-ico-keep::after {
  content: "K";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .65rem; font-weight: 900; color: #052e16;
}
.mvp-jp {
  background: linear-gradient(160deg, #fde68a, #f59e0b 50%, #b45309);
  color: #422006;
}
.mvp-jp-mini { filter: hue-rotate(-8deg) saturate(.9); }
.mvp-jp-minor { filter: hue-rotate(20deg); }
.mvp-jp-major { filter: saturate(1.2) brightness(1.05); }
.mvp-jp-grand {
  background: linear-gradient(160deg, #ffe08a, #f0c14b, #34d399);
  box-shadow: 0 0 14px rgba(52,211,153,.45);
}
.mvp-ico-jp {
  background: radial-gradient(circle at 35% 30%, #fff, #f0c14b 50%, #047857);
}
.mvp-ico-jp::after {
  content: "★";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .7rem; color: #064e3b;
}
.mvp-mystery {
  background: linear-gradient(160deg, #312e81, #1e1b4b 55%, #0f172a);
  color: #c7d2fe;
  border-color: rgba(165,180,252,.4);
}
.mvp-ico-q {
  background: radial-gradient(circle at 35% 30%, #a5b4fc, #4338ca);
}
.mvp-ico-q::after {
  content: "?";
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: .85rem; font-weight: 900; color: #eef2ff;
}
.mvp-hero {
  position: relative;
  min-height: 220px;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.5));
}
.mvp-hero::before {
  content: "";
  position: absolute;
  left: 14%; right: 14%;
  bottom: 4%;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(16,185,129,.55), rgba(4,12,10,.15) 70%, transparent);
  box-shadow: 0 0 18px rgba(240,193,75,.2);
  z-index: 0;
  animation: mvpPlinthGlow 2.4s ease-in-out infinite alternate;
}
@keyframes mvpPlinthGlow {
  from { opacity: .65; transform: scaleX(1); }
  to { opacity: 1; transform: scaleX(1.06); }
}
.mvp-hero-canvas {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-height: 360px;
  display: block;
  pointer-events: none;
}
.mvp-hud {
  display: grid;
  grid-template-columns: minmax(70px,1.1fr) auto minmax(64px,1fr) 36px 36px 72px;
  gap: 6px;
  align-items: center;
  padding: 8px 10px 10px;
  background: linear-gradient(180deg, rgba(12,48,36,.96), rgba(4,16,12,.98));
  border-top: 2px solid rgba(52,211,153,.4);
  box-shadow: inset 0 1px 0 rgba(209,250,229,.12), 0 -8px 24px rgba(0,0,0,.3);
}
.mvp-stat, .mvp-bet {
  display: grid;
  gap: 0;
  min-width: 0;
}
.mvp-stat em, .mvp-bet em {
  font-style: normal;
  font-size: .58rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(209,250,229,.75);
}
.mvp-stat strong, .mvp-bet b {
  font-size: .92rem;
  color: #ffe08a;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvp-stat.win strong { color: #6ee7b7; }
.mvp-bet-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mvp-bet-row button {
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 1px solid rgba(240,193,75,.45);
  background: #0f2920;
  color: #ffe08a;
  font-weight: 900;
  cursor: pointer;
}
.mvp-turbo, .mvp-auto {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(240,193,75,.5);
  background: linear-gradient(180deg, #1a3a2c, #0a1812);
  color: #f0c14b;
  font-weight: 900;
  cursor: pointer;
  padding: 0;
}
.mvp-turbo.on, .mvp-auto.on {
  border-color: #facc15;
  box-shadow: 0 0 12px rgba(250,204,21,.5);
}
.mvp-spin {
  position: relative;
  width: 70px; height: 70px;
  border-radius: 50%;
  border: 3px solid #ffe08a;
  background: conic-gradient(from 0deg, #047857, #34d399, #f0c14b, #10b981, #047857);
  color: #052e16;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 0 #064e3b, 0 10px 22px rgba(0,0,0,.45), 0 0 18px rgba(52,211,153,.35);
  padding: 0;
}
.mvp-spin span {
  position: relative; z-index: 1;
  font-family: Cinzel, Georgia, serif;
  letter-spacing: .06em;
  font-size: .72rem;
}
.mvp-spin::before {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: repeating-linear-gradient(135deg, #34d399 0 6px, #059669 6px 12px);
  box-shadow: inset 0 2px 4px rgba(255,255,255,.3), inset 0 -3px 6px rgba(0,0,0,.35);
}
.mvp-game.is-spinning .mvp-spin { transform: scale(.96); }
.mvp-game.is-spinning .mvp-spin::after {
  content: "";
  position: absolute; inset: 4px;
  border-radius: 50%;
  border: 2px solid rgba(255,224,138,.55);
  border-top-color: transparent;
  animation: mvpSpinRing .55s linear infinite;
}
@keyframes mvpSpinRing { to { transform: rotate(360deg); } }
.mvp-status {
  position: absolute;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%);
  z-index: 4;
  margin: 0;
  padding: 6px 14px;
  font-size: .78rem;
  color: #ecfdf5;
  text-align: center;
  background: rgba(4,16,12,.75);
  border: 1px solid rgba(52,211,153,.4);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  pointer-events: none;
  white-space: nowrap;
}
.mvp-status[hidden] { display: none !important; }
.mvp-bigwin {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.08), rgba(0,0,0,.55));
  pointer-events: none;
}
.mvp-bigwin[hidden] { display: none !important; }
.mvp-bigwin.on .mvp-big-inner { animation: mvpBigPop .45s cubic-bezier(.2,1.2,.3,1); }
.mvp-big-inner { text-align: center; }
.mvp-big-title {
  font-family: Cinzel, Georgia, serif;
  font-size: clamp(1.8rem, 7vw, 2.8rem);
  font-weight: 900;
  color: #34d399;
  -webkit-text-stroke: 2px #064e3b;
  text-shadow: 0 4px 0 #047857, 0 0 24px rgba(52,211,153,.45);
  letter-spacing: .04em;
}
.mvp-big-amt {
  margin-top: 4px;
  font-size: clamp(1.4rem, 5vw, 2.1rem);
  font-weight: 900;
  color: #ffe08a;
  text-shadow: 0 2px 0 #064e3b, 0 0 16px rgba(240,193,75,.45);
}
@keyframes mvpBigPop {
  0% { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.mvp-game.mvp-in-lock .mvp-frame,
.mvp-stage.mvp-in-lock .mvp-frame {
  border-color: rgba(240,193,75,.75);
  box-shadow: 0 0 22px rgba(240,193,75,.35), inset 0 0 20px rgba(240,193,75,.12);
}
body.gb-land-game .mvp-stage { min-height: min(82vh, 600px); }
body.gb-land-game .mvp-game { --mvp-reel-h: min(42vh, 280px); }
body.gb-land-game .mvp-hero { min-height: 0; height: 100%; }
body.gb-land-game .mvp-game.land-shell { max-width: 100%; }
@media (max-width: 720px) {
  body.gb-land-game .mvp-game { --mvp-reel-h: min(38vh, 240px); }
  .mvp-board { grid-template-columns: minmax(0, 1.25fr) minmax(96px, .65fr); }
}
@media (max-width: 520px) {
  .mvp-game { --mvp-reel-h: 210px; }
  .mvp-hero { min-height: 180px; }
  .mvp-jackpots { max-width: 42%; }
  .mvp-hud {
    grid-template-columns: minmax(60px,1fr) auto minmax(54px,.9fr) 32px 32px 64px;
  }
  .mvp-spin { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .mvp-sky-base, .mvp-sky-glow, .mvp-rotate-ico, .mvp-lock-banner,
  .mvp-hero::before, .mvp-stage.mvp-win-punch, .mvp-stage.mvp-bigzoom { animation: none !important; }
}

/* ===== v77: CSS-force landscape when orientation.lock fails (Garuda / Money Pot only) ===== */
html.gb-css-land,
html.gb-css-land body {
  overflow: hidden !important;
  width: 100% !important;
  height: 100% !important;
  overscroll-behavior: none;
}
html.gb-css-land body.gb-force-land #app {
  position: fixed !important;
  z-index: 60;
  width: 100dvh !important;
  height: 100dvw !important;
  top: 0 !important;
  left: 100dvw !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 6px 8px !important;
  transform: rotate(90deg) !important;
  transform-origin: top left !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  background: #0c0810;
}
html.gb-css-land body.gb-force-land .fg-game,
html.gb-css-land body.gb-force-land .mvp-game {
  max-width: none !important;
  width: 100% !important;
  min-height: calc(100dvw - 48px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
}
html.gb-css-land body.gb-force-land .fg-stage,
html.gb-css-land body.gb-force-land .mvp-stage {
  min-height: min(82dvw, 560px) !important;
}
html.gb-css-land body.gb-force-land .land-back {
  margin: 0 0 4px !important;
}
html.gb-css-land .fg-rotate,
html.gb-css-land .mvp-rotate {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════
   JACKPOT JOKER (GBJackpotJoker)
═══════════════════════════════════════════════════════════ */
.jj-mount { width: 100%; min-height: 100dvh; }
.jj-root { position: relative; width: 100%; min-height: 100dvh; background: #120016; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.jj-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.jj-loader, .jj-stage { position: relative; z-index: 1; }
.jj-loader { display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.jj-loader-card { text-align: center; padding: 24px 32px; background: rgba(0,0,0,.6); border: 1px solid #6b21a8; border-radius: 12px; min-width: 220px; }
.jj-loader-mark { font-weight: 900; font-size: 18px; color: #fde68a; letter-spacing: .1em; margin-bottom: 12px; }
.jj-loader-bar { height: 6px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.jj-loader-bar i { display: block; height: 100%; background: #22d3ee; border-radius: 4px; transition: width .15s; }
.jj-loader-pct { font-size: 11px; color: rgba(255,255,255,.6); }
.jj-stage { flex: 1; display: flex; flex-direction: column; padding: 10px 8px 16px; }
.jj-top { text-align: center; margin-bottom: 8px; }
.jj-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: .85; }
.jj-logo-kicker { font-size: 11px; font-weight: 900; letter-spacing: .22em; color: #fde68a; }
.jj-logo-main { font-size: 32px; font-weight: 900; background: linear-gradient(to bottom, #fff1b8, #f0c14b 45%, #8a6010); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.jj-jackpots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.jj-jp { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.15); }
.jj-jp b { color: #fde68a; margin-left: 4px; }
.jj-jp.joker { border-color: #a855f7; color: #e879f9; }
.jj-jp.grand { border-color: #ef4444; }
.jj-jp.major { border-color: #8b5cf6; }
.jj-jp.minor { border-color: #22c55e; }
.jj-board-wrap { position: relative; width: 100%; flex-shrink: 0; }
.jj-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0;
  aspect-ratio: 1;
  width: 100%;
  height: auto;
  background: #09051b;
  border: 2px solid #f0c14b;
  box-shadow: inset 0 0 0 2px #a43b00, 0 0 24px rgba(255,187,37,.35);
  margin: 4px 0 6px;
  border-radius: 4px;
  overflow: hidden;
  box-sizing: border-box;
  align-content: stretch;
  justify-content: stretch;
}
.jj-cell {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  align-self: stretch;
  justify-self: stretch;
  box-sizing: border-box;
  background: radial-gradient(circle at 50% 30%, #26325b, #09051b 72%);
  border-right: 1px solid rgba(139,0,255,.3);
  border-bottom: 1px solid rgba(139,0,255,.3);
  overflow: hidden;
  border-radius: 0;
  flex: unset;
  container-type: size;
}
/* Cells must NEVER inherit HUD SPIN button styles even if a bad class sneaks on */
.jj-board > .jj-cell.jj-spin,
.jj-board > .jj-cell.jj-cell-spin {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  background: radial-gradient(circle at 50% 30%, #26325b, #09051b 72%) !important;
  border-right: 1px solid rgba(139,0,255,.3) !important;
  border-bottom: 1px solid rgba(139,0,255,.3) !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  flex: unset !important;
  cursor: default !important;
}
.jj-cell:nth-child(3n) { border-right: none; }
.jj-cell:nth-child(n+7) { border-bottom: none; }
.jj-cell.jj-win {
  background: radial-gradient(circle at 50% 40%, #3b2800 0%, #09051b 72%);
  box-shadow: inset 0 0 0 3px #fde68a, inset 0 0 18px rgba(255,220,60,.45);
}
/* Animate ONLY inner glyphs — board keeps fixed 3x3 cell chrome during spin */
.jj-board.jj-reel-spinning .jj-sym-inner { animation: jj-reel-tick .14s ease-in-out infinite; }
.jj-cell.jj-win .jj-sym-inner { animation: jj-win-pulse .45s ease-in-out 2; }
@keyframes jj-reel-tick {
  0%,100% { filter: brightness(1.12); opacity: 1; transform: none; }
  50% { filter: brightness(1.35); opacity: .82; transform: none; }
}
.jj-sym {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 900;
  overflow: hidden;
  pointer-events: none;
  width: auto;
  height: auto;
  transform: none;
}
.jj-sym-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 100%;
  height: 100%;
  font-size: 42cqmin;
  will-change: filter, opacity;
  transform: none;
}
.jj-sym-inner[data-sym="bar"] { font-size: 24cqmin; letter-spacing: .06em; }
.jj-sym-inner[data-sym="seven"] { font-size: 46cqmin; }
.jj-sym.jj-sym-emoji { background-image: none !important; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
@keyframes jj-win-pulse { 0%,100%{ filter: brightness(1);} 50%{ filter: brightness(1.35);} }
.jj-winflash {
  position: absolute;
  inset: 0;
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  z-index: 4;
  background: rgba(255,220,60,.14);
  animation: jj-flash .25s ease-in-out 2;
  pointer-events: none;
  border-radius: inherit;
}
@keyframes jj-flash { 0%,100%{opacity:0} 50%{opacity:1} }
.jj-root, .fb-root, .fw-root { position: relative; }
.jj-bigwin { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(99,14,150,.45); backdrop-filter: blur(2px); }
.jj-big-title { font-size: 52px; font-weight: 900; font-style: italic; background: linear-gradient(to bottom, #fff1b8, #f0c14b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: pop-win .55s cubic-bezier(.1,.8,.2,1); }
.jj-big-amt { font-size: 32px; font-weight: 900; color: #fff; margin-top: 8px; }
.jj-coin { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #f0c14b; border: 2px solid #fff1b8; box-shadow: 0 0 10px #ffd000; animation: jj-coin-fall 1.4s linear forwards; }
@keyframes jj-coin-fall { to { transform: translateY(100dvh); opacity: 0; } }
.jj-hud, .slot-hud { display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,.55); border-radius: 10px; padding: 6px 6px; margin-top: auto; flex-shrink: 0; max-width: 100%; box-sizing: border-box; }
.jj-stat { display: flex; flex-direction: column; align-items: center; font-size: 10px; flex: 1 1 0; min-width: 0; }
.jj-stat em { color: rgba(255,255,255,.55); font-style: normal; }
.jj-stat strong { color: #fde68a; font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.jj-stat.win strong { color: #4ade80; }
.jj-bet { display: flex; flex-direction: column; align-items: center; font-size: 10px; flex: 1 1 0; min-width: 0; }
.jj-bet em { color: rgba(255,255,255,.55); font-style: normal; }
.jj-bet-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.jj-bet-row button { width: 22px; height: 22px; border: 1px solid #6b21a8; border-radius: 50%; background: rgba(0,0,0,.4); color: #fde68a; font-size: 14px; cursor: pointer; flex-shrink: 0; padding: 0; }
.jj-bet-row b { font-size: 14px; color: #fff; min-width: 20px; text-align: center; }
.jj-turbo, .jj-auto { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #6b21a8; background: rgba(0,0,0,.4); color: #c4b5fd; font-size: 13px; cursor: pointer; flex-shrink: 0; padding: 0; }
.jj-turbo.active, .jj-auto.active, .jj-turbo.on, .jj-auto.on { background: #f0c14b; color: #3b0764; border-color: #fde68a; }
/* SPIN button ONLY — never match .jj-cell / reel classes */
button.jj-spin,
#jjSpin { position: relative; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fde68a, #c9a227 60%, #7a4e00); border: 2px solid #ffe08a; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 14px rgba(240,193,75,.5); padding: 0; margin-left: 1px; }
button.jj-spin .jj-spin-ring,
#jjSpin .jj-spin-ring { position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(240,193,75,.4); animation: jj-ring-spin 2s linear infinite; }
@keyframes jj-ring-spin { to { transform: rotate(360deg); } }
button.jj-spin .jj-spin-label,
#jjSpin .jj-spin-label { font-size: 10px; font-weight: 900; color: #3b0764; z-index: 1; }
button.jj-spin:disabled,
#jjSpin:disabled { opacity: .5; cursor: not-allowed; }
.jj-status { font-size: 11px; color: rgba(255,255,255,.5); text-align: center; margin: 6px 0 0; }
@keyframes pop-win { 0%{transform:scale(0) rotate(-8deg);opacity:0} 70%{transform:scale(1.15) rotate(2deg)} 100%{transform:scale(1) rotate(0);opacity:1} }

/* ═══════════════════════════════════════════════════════════
   JILI PREMIUM — Boxing King / Mega Fishing
═══════════════════════════════════════════════════════════ */
.jl-mount { width: 100%; min-height: 100dvh; }
.jl-root { position: relative; width: 100%; min-height: 100dvh; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.jl-root.jl-box { background: #1a0800; }
.jl-root.jl-fish { background: #041420; }
.jl-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.jl-stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 10px 8px 16px; min-height: 0; }
.jl-top { text-align: center; margin-bottom: 8px; }
.jl-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0; line-height: .85; }
.jl-logo-kicker { font-size: 11px; font-weight: 900; letter-spacing: .22em; color: #fde68a; }
.jl-root.jl-fish .jl-logo-kicker { color: #7dd3fc; }
.jl-logo-main { font-size: 32px; font-weight: 900; background: linear-gradient(to bottom, #fff1b8, #f0c14b 45%, #8a6010); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.jl-root.jl-fish .jl-logo-main { background: linear-gradient(to bottom, #e0f2fe, #38bdf8 45%, #0369a1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.jl-jackpots { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.jl-jp { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.15); }
.jl-jp b { color: #fde68a; margin-left: 4px; }
.jl-jp.grand { border-color: #ef4444; }
.jl-jp.major { border-color: #8b5cf6; }
.jl-jp.minor { border-color: #22c55e; }
.jl-jp.mini { border-color: #38bdf8; }
.jl-board-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; width: 100%; }
.jl-board-wrap .mp-stage { width: 100%; max-width: 100%; min-height: 220px; border-radius: 12px; border-width: 3px; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 28px rgba(240,193,75,.25); }
.jl-root.jl-fish .jl-board-wrap .mp-stage { box-shadow: inset 0 0 0 2px rgba(0,0,0,.35), 0 0 28px rgba(56,189,248,.3); }
/* JL premium games reuse JJ footer — full scoped HUD (survives partial CSS cache) */
.jl-root .jj-hud,
.jl-root .slot-hud {
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,.55);
  border-radius: 10px;
  padding: 6px 6px;
  margin-top: auto;
  flex-shrink: 0;
  max-width: 100%;
  box-sizing: border-box;
  width: 100%;
}
.jl-root .jj-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.jl-root .jj-stat em { color: rgba(255,255,255,.55); font-style: normal; }
.jl-root .jj-stat strong {
  color: #fde68a;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.jl-root .jj-stat.win strong { color: #4ade80; }
.jl-root .jj-bet {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 10px;
  flex: 1 1 0;
  min-width: 0;
}
.jl-root .jj-bet em { color: rgba(255,255,255,.55); font-style: normal; }
.jl-root .jj-bet-row { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.jl-root .jj-bet-row button {
  width: 22px;
  height: 22px;
  border: 1px solid #6b21a8;
  border-radius: 50%;
  background: rgba(0,0,0,.4);
  color: #fde68a;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.jl-root .jj-bet-row b { font-size: 14px; color: #fff; min-width: 20px; text-align: center; }
.jl-root .jj-turbo,
.jl-root .jj-auto {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #6b21a8;
  background: rgba(0,0,0,.4);
  color: #c4b5fd;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  line-height: 1;
  -webkit-appearance: none;
  appearance: none;
}
.jl-root .jj-turbo.active,
.jl-root .jj-auto.active,
.jl-root .jj-turbo.on,
.jl-root .jj-auto.on {
  background: #f0c14b;
  color: #3b0764;
  border-color: #fde68a;
}
.jl-root button.jj-spin {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fde68a, #c9a227 60%, #7a4e00);
  border: 2px solid #ffe08a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 14px rgba(240,193,75,.5);
  padding: 0;
  margin-left: 1px;
  font-family: inherit;
  -webkit-appearance: none;
  appearance: none;
}
.jl-root button.jj-spin .jj-spin-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid rgba(240,193,75,.4);
  animation: jj-ring-spin 2s linear infinite;
}
.jl-root button.jj-spin .jj-spin-label {
  font-size: 10px;
  font-weight: 900;
  color: #3b0764;
  z-index: 1;
}
.jl-root button.jj-spin:disabled { opacity: .5; cursor: not-allowed; }
body.gb-slot-fs .jl-root button.jj-spin {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}
/* Theme tint — Boxing King (red) */
.jl-root.jl-box .jj-hud { border: 1px solid rgba(239,68,68,.25); }
.jl-root.jl-box .jj-bet-row button {
  border-color: rgba(239,68,68,.45);
  color: #fca5a5;
}
.jl-root.jl-box .jj-turbo,
.jl-root.jl-box .jj-auto {
  border-color: rgba(239,68,68,.45);
  color: #fca5a5;
}
.jl-root.jl-box .jj-turbo.active,
.jl-root.jl-box .jj-auto.active,
.jl-root.jl-box .jj-turbo.on,
.jl-root.jl-box .jj-auto.on { background: #ef4444; color: #fff; border-color: #fca5a5; }
.jl-root.jl-box button.jj-spin,
.jl-root.jl-box #jjSpin { background: radial-gradient(circle at 40% 35%, #fde68a, #ef4444 55%, #7f1d1d); border-color: #fca5a5; box-shadow: 0 0 14px rgba(239,68,68,.45); }
.jl-root.jl-box button.jj-spin .jj-spin-label,
.jl-root.jl-box #jjSpin .jj-spin-label { color: #fff; }
.jl-root.jl-fish .jj-hud { border: 1px solid rgba(56,189,248,.25); }
.jl-root.jl-fish .jj-stat strong, .jl-root.jl-fish .jj-bet-row button { color: #bae6fd; }
.jl-root.jl-fish .jj-bet-row button { border-color: rgba(56,189,248,.45); }
.jl-root.jl-fish .jj-turbo, .jl-root.jl-fish .jj-auto { border-color: rgba(56,189,248,.45); color: #7dd3fc; }
.jl-root.jl-fish .jj-turbo.active, .jl-root.jl-fish .jj-auto.active,
.jl-root.jl-fish .jj-turbo.on, .jl-root.jl-fish .jj-auto.on { background: #0284c7; color: #e0f2fe; border-color: #7dd3fc; }
.jl-root.jl-fish button.jj-spin,
.jl-root.jl-fish #jjSpin { background: radial-gradient(circle at 40% 35%, #bae6fd, #0284c7 60%, #0c4a6e); border-color: #7dd3fc; box-shadow: 0 0 14px rgba(56,189,248,.5); }
.jl-root.jl-fish button.jj-spin .jj-spin-ring,
.jl-root.jl-fish #jjSpin .jj-spin-ring { border-color: rgba(125,211,252,.4); }
.jl-root.jl-fish button.jj-spin .jj-spin-label,
.jl-root.jl-fish #jjSpin .jj-spin-label { color: #0c4a6e; }
.jl-status { font-size: 11px; color: rgba(255,255,255,.5); text-align: center; margin: 6px 0 0; }
body.gb-slot-fs .jl-board-wrap .mp-stage { width: min(100%, calc(100dvh - 260px)); max-height: min(100%, calc(100dvh - 260px)); }
body.gb-slot-fs .jj-hud, body.gb-slot-fs .slot-hud, body.gb-slot-fs .jl-root .jj-hud { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   FRUIT BLAST (GBFruitBlast)
═══════════════════════════════════════════════════════════ */
.fb-mount { width: 100%; min-height: 100dvh; }
.fb-root { position: relative; width: 100%; min-height: 100dvh; background: #200012; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.fb-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.fb-sparkles { display: none !important; }
.fb-loader, .fb-stage { position: relative; z-index: 1; }
.fb-loader { display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.fb-loader-card { text-align: center; padding: 24px 32px; background: rgba(0,0,0,.65); border: 1px solid #be185d; border-radius: 12px; min-width: 220px; }
.fb-loader-mark { font-weight: 900; font-size: 18px; color: #fda4af; letter-spacing: .1em; margin-bottom: 12px; }
.fb-loader-bar { height: 6px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.fb-loader-bar i { display: block; height: 100%; background: #f43f5e; border-radius: 4px; transition: width .15s; }
.fb-loader-pct { font-size: 11px; color: rgba(255,255,255,.55); }
.fb-stage { flex: 1; display: flex; flex-direction: column; padding: 10px 8px 16px; }
.fb-top { display: flex; flex-direction: column; align-items: center; margin-bottom: 6px; }
.fb-logo { text-align: center; }
.fb-logo small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .18em; color: rgba(255,255,255,.5); }
.fb-logo b { font-size: 30px; font-weight: 900; background: linear-gradient(to bottom, #fda4af, #f43f5e 50%, #9f1239); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.fb-logo em { font-style: normal; display: block; font-size: 11px; color: #fda4af; letter-spacing: .08em; }
.fb-jackpots { display: flex; gap: 5px; margin-top: 6px; }
.fb-jp { font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 4px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.12); }
.fb-jp b { color: #fde68a; display: block; font-size: 12px; }
.fb-jp.grand { border-color: #ef4444; }
.fb-jp.major { border-color: #8b5cf6; }
.fb-jp.minor { border-color: #22c55e; }
.fb-jp.mini { border-color: #f59e0b; }
.fb-reels { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 3px; background: #1a000a; border: 2px solid #be185d; border-radius: 6px; overflow: hidden; aspect-ratio: 1; margin: 4px 0 6px; }
.fb-cell { position: relative; display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(0,0,0,.35); border-right: 1px solid rgba(190,24,93,.25); border-bottom: 1px solid rgba(190,24,93,.25); min-height: 0; overflow: hidden; transition: background .15s; }
.fb-cell:nth-child(3n) { border-right: none; }
.fb-cell:nth-child(n+7) { border-bottom: none; }
.fb-cell.fb-win { box-shadow: inset 0 0 0 2px #fde68a, 0 0 18px rgba(253,230,138,.55); background: radial-gradient(circle, rgba(253,230,138,.22), rgba(0,0,0,.2)); }
.fb-cell.fb-win .fb-sym { animation: fb-win-pop .4s ease; }
@keyframes fb-win-pop { 0%{ filter: brightness(1);} 60%{ filter: brightness(1.35);} 100%{ filter: brightness(1);} }
.fb-cell .fb-sym { font-size: clamp(28px, 10vw, 52px); line-height: 1; max-width: 94%; max-height: 94%; }
.fb-cell .fb-bar { font-size: clamp(16px, 5.5vw, 28px); font-weight: 900; color: #fde68a; }
.fb-cell.fb-locked { background: rgba(240,193,75,.18); border-color: #f0c14b; }
.fb-coin-val { font-size: 13px; font-weight: 900; color: #fde68a; }
.fb-coin-glow { position: absolute; width: 100%; height: 100%; border-radius: 4px; box-shadow: inset 0 0 12px rgba(240,193,75,.5); pointer-events: none; }
.fb-readout { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(255,255,255,.6); justify-content: center; margin-bottom: 4px; }
.fb-readout b { color: #4ade80; font-size: 18px; }
.fb-bigwin { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(0,0,0,.6); }
.fb-bw-title { font-size: 48px; font-weight: 900; font-style: italic; color: #fde68a; text-shadow: 0 0 24px #f0c14b; }
.fb-bw-amt { font-size: 32px; font-weight: 900; color: #fff; margin-top: 8px; }
.fb-hud { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.55); border-radius: 10px; padding: 8px; margin-top: auto; }
.fb-stat { display: flex; flex-direction: column; align-items: center; font-size: 10px; flex: 1; }
.fb-stat em { color: rgba(255,255,255,.5); font-style: normal; }
.fb-stat strong { color: #fda4af; font-size: 13px; font-weight: 800; }
.fb-stat.win strong { color: #4ade80; }
.fb-bet-ctrl { display: flex; flex-direction: column; align-items: center; font-size: 10px; flex: 1; }
.fb-bet-ctrl em { color: rgba(255,255,255,.5); font-style: normal; }
.fb-bet-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.fb-bet-row button { width: 22px; height: 22px; border: 1px solid #be185d; border-radius: 50%; background: rgba(0,0,0,.4); color: #fda4af; font-size: 14px; cursor: pointer; }
.fb-bet-row b { font-size: 14px; color: #fff; min-width: 22px; text-align: center; }
.fb-turbo, .fb-auto { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #be185d; background: rgba(0,0,0,.4); color: #fda4af; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.fb-turbo.active, .fb-auto.active { background: #f43f5e; color: #fff; }
.fb-spin { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #f43f5e, #be185d); border: 2px solid #fda4af; color: #fff; font-size: 10px; font-weight: 900; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 12px rgba(244,63,94,.5); }
.fb-spin:disabled { opacity: .5; cursor: not-allowed; }
.fb-status { font-size: 11px; color: rgba(255,255,255,.5); text-align: center; margin: 4px 0 0; }
.fb-winstat-sync { display: none; }

/* ═══════════════════════════════════════════════════════════
   FORTUNE WHEEL (GBFortuneWheel)
═══════════════════════════════════════════════════════════ */
.fw-mount { width: 100%; min-height: 100dvh; }
.fw-root { position: relative; width: 100%; min-height: 100dvh; background: #120004; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.fw-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.fw-top-notch { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); font-size: 10px; color: rgba(255,255,255,.2); z-index: 1; }
.fw-loader, .fw-stage { position: relative; z-index: 1; }
.fw-loader { display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.fw-loader-card { text-align: center; padding: 24px 32px; background: rgba(0,0,0,.65); border: 1px solid #7f1d1d; border-radius: 12px; min-width: 220px; }
.fw-loader-mark { font-weight: 900; font-size: 18px; color: #fca5a5; letter-spacing: .1em; margin-bottom: 12px; }
.fw-loader-bar { height: 6px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.fw-loader-bar i { display: block; height: 100%; background: #ef4444; border-radius: 4px; transition: width .15s; }
.fw-loader-pct { font-size: 11px; color: rgba(255,255,255,.55); }
.fw-stage { flex: 1; display: flex; flex-direction: column; padding: 10px 8px 16px; }
.fw-machine { display: flex; gap: 8px; align-items: flex-start; flex: 1; margin-bottom: 6px; }
.fw-wheel-cabinet { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.fw-cabinet-lights { width: 100%; height: 8px; background: repeating-linear-gradient(90deg, #ef4444 0 8px, transparent 8px 16px); border-radius: 4px; opacity: .7; animation: fw-blink 1.2s ease-in-out infinite alternate; }
@keyframes fw-blink { to { opacity: .3; } }
.fw-wheel-pointer { font-size: 14px; font-weight: 900; color: #fca5a5; }
.fw-wheel-rim { width: 100%; aspect-ratio: 1; position: relative; border-radius: 50%; box-shadow: 0 0 20px rgba(239,68,68,.35); }
.fw-wheel { width: 100%; height: 100%; border-radius: 50%; }
.fw-wheel svg { width: 100%; height: 100%; }
.fw-brand { font-size: 11px; font-weight: 900; letter-spacing: .12em; color: #fca5a5; margin-top: 4px; }
.fw-reel-window { flex: 1; display: flex; flex-direction: column; }
.fw-reels { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 2px; background: #1a0003; border: 2px solid #ef4444; border-radius: 6px; overflow: hidden; flex: 1; min-height: 160px; }
.fw-cell { display: flex; align-items: center; justify-content: center; font-size: clamp(10px,3vw,16px); font-weight: 700; background: rgba(0,0,0,.4); border-right: 1px solid rgba(239,68,68,.2); border-bottom: 1px solid rgba(239,68,68,.2); min-height: 0; }
.fw-cell:nth-child(3n) { border-right: none; }
.fw-cell:nth-child(n+7) { border-bottom: none; }
.fw-cell.fw-badge { color: #fde68a; background: rgba(240,193,75,.12); font-weight: 900; }
.fw-payline { height: 2px; background: rgba(239,68,68,.4); margin: 2px 0; }
.fw-win-readout { display: flex; align-items: center; gap: 8px; justify-content: center; font-size: 12px; color: rgba(255,255,255,.6); margin: 4px 0; }
.fw-win-readout b { color: #4ade80; font-size: 18px; }
.fw-flash { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(239,68,68,.2); pointer-events: none; }
.fw-flash span { font-size: 42px; font-weight: 900; color: #fff; text-shadow: 0 0 24px #ef4444; animation: fw-flash-text .3s ease-in-out infinite alternate; }
@keyframes fw-flash-text { to { opacity: .5; transform: scale(1.08); } }
.fw-hud { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.55); border-radius: 10px; padding: 8px; margin-top: auto; }
.fw-stat { display: flex; flex-direction: column; align-items: center; font-size: 10px; flex: 1; }
.fw-stat em { color: rgba(255,255,255,.5); font-style: normal; }
.fw-stat strong { color: #fca5a5; font-size: 13px; font-weight: 800; }
.fw-stat.win strong { color: #4ade80; }
.fw-bet-ctrl { display: flex; flex-direction: column; align-items: center; font-size: 10px; flex: 1; }
.fw-bet-ctrl em { color: rgba(255,255,255,.5); font-style: normal; }
.fw-bet-row { display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.fw-bet-row button { width: 22px; height: 22px; border: 1px solid #7f1d1d; border-radius: 50%; background: rgba(0,0,0,.4); color: #fca5a5; font-size: 14px; cursor: pointer; }
.fw-bet-row b { font-size: 14px; color: #fff; min-width: 22px; text-align: center; }
.fw-turbo, .fw-auto { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #7f1d1d; background: rgba(0,0,0,.4); color: #fca5a5; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.fw-turbo.active, .fw-auto.active { background: #ef4444; color: #fff; }
.fw-spin { width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #ef4444, #7f1d1d); border: 2px solid #fca5a5; color: #fff; font-size: 10px; font-weight: 900; cursor: pointer; flex-shrink: 0; box-shadow: 0 0 12px rgba(239,68,68,.5); }
.fw-spin:disabled { opacity: .5; cursor: not-allowed; }
.fw-status { font-size: 11px; color: rgba(255,255,255,.5); text-align: center; margin: 4px 0 0; }

/* ═══════════════════════════════════════════════════════════
   MONEY POT L&R (GBMoneyPotLR)
═══════════════════════════════════════════════════════════ */
.mp2-mount { width: 100%; min-height: 100dvh; }
.mp2-root { position: relative; width: 100%; min-height: 100dvh; background: #0a0a00; color: #fff; display: flex; flex-direction: column; overflow: hidden; }
.mp2-ambient { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.mp2-ambient-one { width: 70%; aspect-ratio: 1; top: -20%; left: -20%; background: radial-gradient(circle, rgba(212,160,23,.18), transparent 70%); }
.mp2-ambient-two { width: 60%; aspect-ratio: 1; bottom: -15%; right: -15%; background: radial-gradient(circle, rgba(139,92,246,.12), transparent 70%); }
.mp2-loader { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 100dvh; }
.mp2-loader-card { text-align: center; padding: 24px 32px; background: rgba(0,0,0,.7); border: 1px solid #a16207; border-radius: 12px; min-width: 220px; }
.mp2-loader-mark { font-weight: 900; font-size: 18px; color: #fde68a; letter-spacing: .12em; margin-bottom: 12px; }
.mp2-loader-bar { height: 6px; background: rgba(255,255,255,.15); border-radius: 4px; overflow: hidden; margin-bottom: 8px; }
.mp2-loader-bar i { display: block; height: 100%; background: #f0c14b; border-radius: 4px; transition: width .15s; }
.mp2-loader-pct { font-size: 11px; color: rgba(255,255,255,.55); }
.mp2-stage { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; padding: 8px 8px 12px; gap: 2px; }
.mp2-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.mp2-ex-badge { font-size: 11px; font-weight: 900; padding: 4px 10px; border: 1px solid #a16207; border-radius: 6px; background: rgba(0,0,0,.4); color: #fde68a; cursor: pointer; }
.mp2-ex-badge[aria-pressed="true"] { background: #f0c14b; color: #1a0508; }
.mp2-brand-lockup { display: flex; align-items: center; gap: 8px; }
.mp2-logo { font-size: 22px; font-weight: 900; line-height: .9; text-align: center; }
.mp2-logo b { display: block; font-size: 28px; background: linear-gradient(to bottom, #fde68a, #d97706); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.mp2-logo i { font-size: 8px; color: #f0c14b; }
.mp2-info-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid #a16207; background: rgba(0,0,0,.4); color: #fde68a; font-size: 14px; font-style: italic; cursor: pointer; font-weight: 900; }
.mp2-extra-row { display: flex; align-items: center; justify-content: space-between; font-size: 11px; color: rgba(255,255,255,.55); padding: 4px 2px; margin-bottom: 4px; }
.mp2-switch { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; background: rgba(0,0,0,.4); color: rgba(255,255,255,.5); cursor: pointer; font-size: 11px; }
.mp2-switch.on { background: #16a34a; color: #fff; border-color: #4ade80; }
.mp2-switch b { font-weight: 900; }
.mp2-switch i { width: 16px; height: 8px; border-radius: 4px; border: 1px solid currentColor; position: relative; }
.mp2-jackpots { display: flex; gap: 4px; margin-bottom: 6px; }
.mp2-jp { flex: 1; text-align: center; font-size: 9px; font-weight: 700; padding: 4px 2px; border-radius: 5px; background: rgba(0,0,0,.5); border: 1px solid rgba(255,255,255,.1); }
.mp2-jp b { display: block; font-size: 11px; color: #fde68a; margin-top: 2px; }
.mp2-jp.grand { border-color: #ef4444; }
.mp2-jp.major { border-color: #8b5cf6; }
.mp2-jp.minor { border-color: #22c55e; }
.mp2-jp.mini { border-color: #f59e0b; }
.mp2-reel-frame { position: relative; background: #1a1200; border: 2px solid #a16207; border-radius: 8px; overflow: hidden; margin-bottom: 4px; flex-shrink: 0; }
.mp2-payline { position: absolute; left: 0; right: 0; height: 1px; background: rgba(240,193,75,.12); z-index: 1; pointer-events: none; }
.mp2-line-one { top: 33.33%; }
.mp2-line-two { top: 50%; }
.mp2-line-three { top: 66.66%; }
.mp2-reels { display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 3px; padding: 3px; min-height: 0; height: 100%; box-sizing: border-box; }
.mp2-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0; aspect-ratio: 1; overflow: hidden; background: rgba(0,0,0,.35); border-radius: 6px; font-size: 12px; font-weight: 700; transition: background .12s; transform: none; }
.mp2-cell.bronze { background: rgba(205,127,50,.22); color: #cd7f32; }
.mp2-cell.silver { background: rgba(192,192,192,.18); color: #d4d4d4; }
.mp2-cell.gold { background: rgba(240,193,75,.22); color: #f0c14b; }
.mp2-cell.mini, .mp2-cell.minor, .mp2-cell.major { background: rgba(139,92,246,.2); color: #c4b5fd; }
.mp2-cell.mystery { background: rgba(34,197,94,.14); color: #4ade80; }
.mp2-cell.pot { background: rgba(234,179,8,.16); color: #fde68a; }
.mp2-cell.locked { background: rgba(240,193,75,.3); border: 1px solid #f0c14b; }
.mp2-sym-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; max-width: 96%; max-height: 96%; will-change: filter, opacity; pointer-events: none; }
.mp2-cell.mp2-spinning .mp2-sym-inner { animation: mp2-spin-sym .14s ease-in-out infinite; }
@keyframes mp2-spin-sym {
  0%,100% { filter: brightness(1.15); opacity: 1; }
  50% { filter: brightness(1.45) blur(0.8px); opacity: .72; }
}
.mp2-ingot { font-size: clamp(36px, 12vw, 54px); line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
.mp2-val { font-size: clamp(11px, 3.2vw, 15px); font-weight: 900; margin-top: 0; letter-spacing: .04em; }
.mp2-mystery { font-size: clamp(44px, 15vw, 62px); font-weight: 900; line-height: 1; }
.mp2-pot { font-size: clamp(40px, 13vw, 56px); line-height: 1; filter: drop-shadow(0 2px 6px rgba(240,193,75,.45)); }
.mp2-jp-ico { font-size: clamp(32px, 10vw, 46px); line-height: 1; }
.mp2-sym-icon { font-size: clamp(11px, 3.2vw, 15px); font-weight: 900; letter-spacing: .06em; }
.mp2-side-lamps { position: absolute; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: space-around; padding: 8px 4px; z-index: 2; pointer-events: none; }
.mp2-left { left: 0; }
.mp2-right { right: 0; }
.mp2-side-lamps i { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(240,193,75,.15); border: 1px solid rgba(240,193,75,.3); font-size: 9px; color: rgba(255,255,255,.5); font-style: normal; }
.mp2-win-panel { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 2px 0 0; flex: 0 0 auto; position: relative; z-index: 2; }
.mp2-score { display: flex; gap: 8px; align-items: baseline; font-size: 11px; color: rgba(255,255,255,.55); }
.mp2-score strong { color: #fde68a; font-size: 16px; font-weight: 800; }
.mp2-score.mp2-win-score strong { color: #4ade80; }
.mp2-win-panel p { font-size: 11px; color: rgba(255,255,255,.5); text-align: center; }
.mp2-coin-bed { position: relative; overflow: visible; }
.mp2-coin { position: absolute; top: -100px; width: 16px; height: 16px; border-radius: 50%; background: #f0c14b; border: 2px solid #fde68a; animation: mp2-coin-fall 1.4s linear forwards; pointer-events: none; z-index: 10; }
@keyframes mp2-coin-fall { to { transform: translateY(100dvh); opacity: 0; } }
.mp2-controls { display: flex; align-items: center; gap: 5px; background: rgba(0,0,0,.55); border-radius: 10px; padding: 8px 6px max(8px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
.mp2-round-btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(240,193,75,.3); background: rgba(0,0,0,.4); color: #fde68a; font-size: 13px; cursor: pointer; flex-shrink: 0; }
.mp2-round-btn.mp2-auto {
  width: 34px;
  height: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  line-height: 1;
  padding: 1px 0 0;
  overflow: hidden;
}
.mp2-round-btn.mp2-auto small {
  display: block;
  font-size: 6.5px;
  font-weight: 800;
  letter-spacing: .03em;
  line-height: 1;
  margin-top: -1px;
}
.mp2-round-btn.active, .mp2-round-btn.on { background: #f0c14b; color: #1a0508; border-color: #fde68a; }
.mp2-bet-ctrl { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.mp2-bet-btn { width: auto; height: auto; padding: 4px 10px; border-radius: 8px; font-size: 11px; display: flex; flex-direction: column; align-items: center; border: 1px solid rgba(240,193,75,.4); background: rgba(0,0,0,.4); color: #fde68a; cursor: pointer; }
.mp2-bet-btn b { font-size: 16px; font-weight: 900; }
.mp2-bet-menu { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); background: #161922; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 6px; z-index: 40; min-width: min(340px, 86vw); max-height: 240px; overflow: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; box-shadow: 0 12px 28px rgba(0,0,0,.5); }
.mp2-bet-menu h3 { font-size: 10px; text-align: center; color: rgba(255,255,255,.5); margin-bottom: 6px; grid-column: 1 / -1; }
.mp2-bet-menu button { display: block; width: 100%; padding: 6px; border: 1px solid rgba(240,193,75,.25); border-radius: 4px; background: transparent; color: #fff; font-size: 12px; cursor: pointer; }
.mp2-bet-menu button.selected { background: #f0c14b; color: #1a0508; border-color: #fde68a; }
.mp2-spin-btn { flex: 1.4 1 0; min-width: 0; height: 44px; border-radius: 22px; background: radial-gradient(circle at 40% 35%, #fde68a, #c9a227 60%, #7a4e00); border: 2px solid #ffe08a; color: #3b0764; font-size: 13px; font-weight: 900; cursor: pointer; box-shadow: 0 0 14px rgba(240,193,75,.5); }
.mp2-spin-btn.spinning { opacity: .6; cursor: not-allowed; }
.mp2-spin-btn:disabled { opacity: .5; cursor: not-allowed; }
.mp2-bigwin[hidden], .mp2-loader[hidden], .mp2-stage[hidden],
.jj-bigwin[hidden], .jj-loader[hidden], .jj-stage[hidden],
.fb-bigwin[hidden], .fb-loader[hidden], .fb-stage[hidden],
.fw-flash[hidden], .fw-loader[hidden], .fw-stage[hidden] { display: none !important; }
.mp2-bigwin { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,10,0,.55); cursor: pointer; }
.mp2-win-rays { position: absolute; inset: 0; background: conic-gradient(rgba(240,193,75,.15) 0deg, transparent 30deg, rgba(240,193,75,.15) 60deg, transparent 90deg, rgba(240,193,75,.15) 120deg, transparent 150deg, rgba(240,193,75,.15) 180deg, transparent 210deg, rgba(240,193,75,.15) 240deg, transparent 270deg, rgba(240,193,75,.15) 300deg, transparent 330deg, rgba(240,193,75,.15) 360deg); animation: mp2-rays-spin 8s linear infinite; pointer-events: none; }
@keyframes mp2-rays-spin { to { transform: rotate(360deg); } }
.mp2-win-crown { font-size: 40px; animation: mp2-crown-bounce 1s ease-in-out infinite alternate; }
@keyframes mp2-crown-bounce { to { transform: translateY(-8px); } }
.mp2-big-title { font-size: 50px; font-weight: 900; }
.mp2-big-title span { color: #fde68a; }
.mp2-big-title b { color: #f43f5e; }
.mp2-bw-amt { font-size: 36px; font-weight: 900; color: #fff; margin: 4px 0 8px; }
.mp2-win-subtitle { font-size: 14px; font-weight: 700; color: #fde68a; letter-spacing: .12em; }
.mp2-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #f0c14b; animation: mp2-spark-fly calc(.8s + var(--i, 0) * .04s) calc(var(--i, 0) * .05s) ease-out forwards; }
@keyframes mp2-spark-fly { 0%{transform:translate(0,0) scale(1);opacity:1} 100%{transform:translate(calc(cos(var(--i,0)*20deg)*80px),calc(sin(var(--i,0)*20deg)*-80px)) scale(0);opacity:0} }
.mp2-rotate { display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.8); min-height: 80px; }
.mp2-rotate-card { text-align: center; color: #fde68a; }
html.gb-css-land .mp2-rotate { display: none !important; }

/* Sports settle result modal */
.sp-settle-popup {
  position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.65); padding: 16px;
}
.sp-settle-popup.show { display: flex; }
.sp-settle-card {
  width: min(360px, 100%); border-radius: 16px; padding: 20px 18px; text-align: center;
  background: linear-gradient(180deg, #1a1208, #0c0e14); border: 1px solid rgba(240,193,75,.35);
  box-shadow: 0 12px 40px rgba(0,0,0,.5);
}
.sp-settle-card.won { border-color: rgba(46,229,157,.5); }
.sp-settle-card.lost { border-color: rgba(255,107,122,.45); }
.sp-settle-card strong { display: block; font-size: 1.4rem; color: #f0c14b; margin-bottom: 8px; }
.sp-settle-card.won strong { color: #2ee59d; }
.sp-settle-card.lost strong { color: #ff6b7a; }
.sp-settle-card p { margin: 0; font-weight: 700; }
.sp-settle-card em { display: block; margin: 6px 0 12px; color: #94a3b8; font-style: normal; font-size: .85rem; }
.sp-settle-amt { display: block; font-size: 1.6rem; margin-bottom: 14px; color: #fff; }
.sp-mybet.won { border-left: 3px solid #2ee59d; }
.sp-mybet.lost { border-left: 3px solid #ff6b7a; }
.sp-mybet.open { border-left: 3px solid #f0c14b; }

/* Deposit pay-to number box */
.dep-payto {
  margin: 10px 0; padding: 12px; border-radius: 12px;
  background: rgba(240,193,75,.1); border: 1px dashed rgba(240,193,75,.45);
}
.dep-payto strong { display: block; color: #f0c14b; font-size: 1.05rem; letter-spacing: .02em; }
.dep-payto .muted { margin: 4px 0 8px; }
.wd-locked { color: #ff8a9a; font-size: .8rem; }

/* Firebase Login / Register — Bn786 gold/dark */
.auth-panel {
  position: relative;
  overflow: hidden;
  padding: 16px 14px 18px;
  background:
    radial-gradient(circle at 50% -10%, rgba(240,193,75,.16), transparent 46%),
    linear-gradient(180deg, #4a1018 0%, #1a0508 55%, #120408 100%);
  border: 1.5px solid rgba(240,193,75,.42);
  box-shadow: 0 10px 28px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,224,138,.18);
}
.auth-crest {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.auth-crest-mark {
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: Rajdhani, Outfit, sans-serif;
  font-weight: 800; font-size: 0.95rem; letter-spacing: .04em;
  color: #1a1000;
  background:
    radial-gradient(circle at 32% 28%, #fff6c8 0%, transparent 42%),
    linear-gradient(160deg, #ffe08a 0%, #f0c14b 38%, #a67c1a 72%, #7a5a10 100%);
  border: 1.5px solid #fff6c8;
  box-shadow: inset 0 2px 3px rgba(255,255,255,.65), 0 3px 8px rgba(0,0,0,.45);
}
.auth-crest strong {
  display: block; color: #ffe08a; font-size: 1.05rem; letter-spacing: .04em;
  font-family: Rajdhani, Outfit, sans-serif;
}
.auth-crest em {
  display: block; color: #c9a27a; font-style: normal; font-size: .72rem;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 4px;
  margin-bottom: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(240,193,75,.22);
}
.auth-tab {
  border: 0; background: transparent; color: #c9a27a;
  font: inherit; font-weight: 800; font-size: .82rem;
  padding: 10px 8px; border-radius: 10px; cursor: pointer;
}
.auth-tab.active {
  color: #1a1000;
  background: linear-gradient(180deg, #ffe08a 0%, #f0c14b 45%, #c9a227 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 2px 8px rgba(0,0,0,.35);
}
.auth-lead {
  margin: 0 0 10px;
  color: #e8d5b0;
  font-size: .82rem;
  line-height: 1.4;
}
.auth-phone-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid rgba(240,193,75,.35);
  border-radius: 12px;
  overflow: hidden;
  background: #1a0a10;
}
.auth-phone-row .auth-cc {
  display: grid; place-items: center;
  padding: 0 12px;
  font-weight: 800;
  color: #1a1000;
  background: linear-gradient(180deg, #ffe08a, #c9a227);
  border-right: 1px solid rgba(90,50,0,.35);
  white-space: nowrap;
}
.auth-phone-row .field {
  border: 0; border-radius: 0; background: transparent;
}
.auth-otp-field {
  letter-spacing: .42em;
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
}
.auth-panel {
  overflow: hidden;
  padding-top: 0;
}
.auth-glam,
.gb-gate-glam {
  position: relative;
  height: 152px;
  margin: 0 -2px 12px;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(240,193,75,.28), transparent 58%),
    linear-gradient(180deg, #5a1420 0%, #2a0810 70%, #1a0508 100%);
}
.auth-panel .auth-glam {
  margin: 0 -16px 14px;
  border-radius: 16px 16px 0 0;
}
.gb-gate-glam {
  margin: -22px -16px 14px;
  border-radius: 16px 16px 0 0;
  height: 168px;
}
.auth-glam img,
.gb-gate-glam img {
  position: absolute;
  left: 50%;
  bottom: -6px;
  transform: translateX(-50%);
  height: 210px;
  width: auto;
  max-width: none;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.auth-glam-fade,
.gb-gate-glam-fade {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, rgba(26,5,8,.55) 45%, #1a0508 100%);
}
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: linear-gradient(180deg, #2a1218, #1a080c);
  color: #fff6c8;
  border: 1px solid rgba(240,193,75,.4);
  font-weight: 800;
}
.btn-google-g {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #1a73e8;
  font-weight: 900; font-size: .9rem;
}
.auth-err {
  min-height: 1.1em;
  margin: 10px 0 0;
  color: #ff8a9a;
  font-size: .8rem;
  font-weight: 700;
}

/* First-launch full-screen auth gate (below splash z-index 9999) */
#gbAuthGate {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 14px;
  background:
    radial-gradient(ellipse at 50% 12%, rgba(240,193,75,.18), transparent 48%),
    linear-gradient(180deg, rgba(26,5,8,.92) 0%, rgba(10,4,8,.96) 100%);
}
.gb-gate-card {
  width: min(420px, 100%);
  padding: 22px 16px 20px;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -8%, rgba(240,193,75,.16), transparent 46%),
    linear-gradient(180deg, #4a1018 0%, #1a0508 58%, #120408 100%);
  border: 1.5px solid rgba(240,193,75,.45);
  box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,224,138,.18);
}
.gb-gate-crest {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.gb-gate-crest strong {
  display: block;
  color: #ffe08a;
  font-size: 1.2rem;
  letter-spacing: .04em;
  font-family: Rajdhani, Outfit, sans-serif;
}
.gb-gate-crest em {
  display: block;
  color: #c9a27a;
  font-style: normal;
  font-size: .78rem;
}
.gb-gate-lead {
  margin: 0 0 14px;
  color: #e8d5b0;
  font-size: .86rem;
  line-height: 1.45;
}
.gb-gate-btn { margin-top: 8px; min-height: 48px; font-weight: 800; }
.gb-gate-google { margin-top: 8px; }
.gb-gate-back { margin-bottom: 10px; }
body.gb-auth-gate .bottomnav { visibility: hidden; pointer-events: none; }

.gb-fx-lightning {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(240,193,75,.18) 40%, transparent 70%);
  animation: gbLightning 0.38s ease-out forwards;
}
.gb-fx-lightning.gb-fx-lightning--page {
  position: fixed;
  z-index: 140;
}
@keyframes gbLightning {
  0% { opacity: 0; }
  18% { opacity: 1; }
  40% { opacity: .15; }
  58% { opacity: .85; }
  100% { opacity: 0; }
}
.gb-spin-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  overflow: hidden;
}
.gb-spin-dust i {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6c8, #f0c14b 55%, transparent);
  animation: gbSpinDust 0.9s linear infinite;
  opacity: .85;
}
.gb-fw-burst {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 130;
  overflow: hidden;
}
.gb-fw-burst b {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  animation: gbFwPop 0.9s ease-out forwards;
}
@keyframes gbSpinDust {
  0% { transform: translate(0,0) scale(.4); opacity: 0; }
  20% { opacity: .9; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; }
}
@keyframes gbFwPop {
  0% { transform: translate(0,0) scale(.4); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   TOWER RUSH (GBTowerRush) — from Music/Game-2
═══════════════════════════════════════════════════════════ */
.tr-mount, .td-mount { width: 100%; min-height: 100dvh; height: 100%; }
.tr-root {
  position: relative; width: 100%; min-height: 100dvh; height: 100dvh;
  overflow: hidden; color: #fff; display: flex; flex-direction: column;
  background: #55b7d5; font-family: Arial, Helvetica, sans-serif;
}
.tr-webgl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; opacity: .12; pointer-events: none; }
.tr-city {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #6ec8e4 0%, #55b7d5 42%, #4aa3c4 58%, #3d8a4a 58%, #2d6a3a 100%);
}
.tr-city:before {
  content: ""; position: absolute; left: 4%; bottom: 42%; width: 18%; height: 28%;
  background: linear-gradient(#8fd4ea, #4a90a8); box-shadow: 28vw -8% 0 #7ec4dc, 62vw -4% 0 #6bb8d2, 78vw -12% 0 #8ad0e8;
  clip-path: polygon(0 20%, 20% 0, 40% 18%, 55% 0, 100% 22%, 100% 100%, 0 100%);
  opacity: .55;
}
.tr-root > *:not(.tr-webgl):not(.tr-city) { position: relative; z-index: 1; }
.tr-topbar {
  display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start;
  padding: 10px 14px 8px 52px; height: 76px; border: 0;
  background: linear-gradient(180deg, rgba(30,109,136,.3), transparent);
}
.tr-brand { position: relative; width: 130px; height: 64px; transform: rotate(-2deg) scale(.9); transform-origin: top left; filter: drop-shadow(0 4px 0 #202a33); }
.tr-brand b, .tr-brand strong {
  display: block; font-family: Impact, "Arial Black", sans-serif; font-style: italic; line-height: .78; text-align: center;
  -webkit-text-stroke: 1px #382215;
}
.tr-brand b { font-size: 32px; color: #ffb51c; }
.tr-brand strong { font-size: 28px; color: #31b9f0; }
.tr-brand small { position: absolute; right: -4px; bottom: 0; padding: 2px 5px; background: #253b47; border-radius: 4px; color: #fff; font-size: 8px; }
.tr-balance {
  align-self: start; margin-top: 4px; background: linear-gradient(#3a4d54, #192329);
  border: 3px solid #d8e8eb; border-radius: 13px; padding: 6px 12px; box-shadow: 0 4px 0 #243138; text-align: right;
}
.tr-balance small { display: block; color: #d7e8ed; font-size: 8px; letter-spacing: 1px; }
.tr-balance strong { font-size: 13px; color: #fff; }
.tr-history { display: flex; gap: 6px; padding: 4px 12px; overflow: hidden; }
.tr-history span { background: #34474d; color: #fff; border: 2px solid #e4eef0; box-shadow: 0 2px 0 #1c2a2e; font-size: 9px; padding: 3px 7px; border-radius: 20px; font-weight: 800; }
.tr-arena {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 70px; cursor: default;
}
.tr-arena.tap-ready { cursor: pointer; }
.tr-arena.crashed { animation: tr-shake 1.6s cubic-bezier(.36,.07,.19,.97) both; }
.tr-status { position: absolute; top: 8px; left: 0; right: 0; text-align: center; z-index: 12; }
.tr-status small { display: inline-block; background: #325761d9; border: 2px solid #e8f7f8; border-radius: 18px; padding: 5px 12px; color: #fff; letter-spacing: 1.5px; font-size: 10px; font-weight: 800; }
.tr-status strong {
  display: block; font-family: Impact, "Arial Black", sans-serif; color: #ffbf25;
  -webkit-text-stroke: 1px #4b2910; font-size: 42px; margin-top: 4px;
}
.tr-status em { background: #fff7dc; color: #74410c; border-radius: 12px; display: inline-block; padding: 3px 9px; font-style: normal; font-weight: 700; font-size: 12px; margin-top: 4px; }
.tr-crane { position: absolute; z-index: 6; top: -90px; left: 50%; width: 90px; height: 280px; transform: translateX(-50%); pointer-events: none; transform-origin: 50% 0; animation: tr-pendulum 2.7s ease-in-out infinite; }
.tr-crane:before { content: ""; position: absolute; left: 44px; top: 0; width: 5px; height: 210px; background: repeating-linear-gradient(90deg, #252a2c 0 2px, #a8acaf 2px 4px); }
.tr-crane i { position: absolute; left: 26px; bottom: 48px; width: 40px; height: 53px; border-radius: 50% 50% 35% 35%; background: repeating-linear-gradient(135deg, #ffbc13 0 7px, #242424 7px 13px); border: 3px solid #352612; animation: tr-hook 2.7s ease-in-out infinite; }
.tr-crane span, .tr-crane b { position: absolute; bottom: 21px; width: 2px; height: 35px; background: #2d3132; transform-origin: top; }
.tr-crane span { left: 28px; transform: rotate(31deg); }
.tr-crane b { right: 27px; transform: rotate(-31deg); }
.tr-tower-wrap { width: 280px; height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; filter: drop-shadow(0 10px 8px #263c4877); }
.tr-tower { width: 220px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.tr-floor {
  width: 220px; height: 28px; display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center;
  opacity: 0; transform-origin: center;
}
.tr-floor.active { opacity: 1; }
.tr-floor i { height: 100%; border: 2px solid #9b572a; background: linear-gradient(#ffb341, #d87728); box-shadow: inset 0 4px #ffd48d; }
.tr-floor i:after { content: ""; display: block; width: 18px; height: 14px; margin: 5px auto; background: linear-gradient(90deg, #1b779b 46%, #a4e8f1 47% 53%, #1b779b 54%); border: 2px solid #f5e4c1; }
.tr-floor span { height: 100%; display: grid; place-items: center; background: #71462b; color: #ffe69c; border: 2px solid #542b16; font-size: 8px; font-weight: 900; }
.tr-floor.active i { background: linear-gradient(#ffd06c, #e4872e); border-color: #a55622; box-shadow: inset 0 5px #fff0bd, 0 2px 0 #67351a; }
.tr-floor.active span { background: #6d3c20; color: #fff1a5; border-color: #4d2715; }
.tr-tower-wrap.collapsing .tr-floor { animation: tr-collapse 1.35s var(--fall-delay) cubic-bezier(.45,0,.8,.5) both !important; }
.tr-base {
  width: 250px; height: 56px; border: 3px solid #315936; border-radius: 5px 5px 0 0;
  background: linear-gradient(#41794d, #21472d); display: grid; grid-template-columns: 1fr 70px 1fr;
  place-items: center; box-shadow: inset 0 5px #8eb46d, 0 4px 0 #173525; position: relative;
}
.tr-base i { width: 36px; height: 40px; background: repeating-linear-gradient(90deg, #e2d094 0 5px, #457352 5px 9px); border: 3px solid #e5d393; }
.tr-base strong { font: 14px Georgia, serif; color: #ffe29a; }
.tr-base small { position: absolute; bottom: 3px; left: 0; right: 0; text-align: center; color: #bfe4bc; font-size: 7px; }
.tr-sky-floor {
  position: absolute; z-index: 8; left: 50%; bottom: var(--land, 90px); width: 220px; height: 28px;
  display: grid; grid-template-columns: 1fr 48px 1fr; transform: translateX(-50%); pointer-events: none;
  animation: tr-drop .9s cubic-bezier(.42,0,.65,1) both; filter: drop-shadow(0 8px 5px #26343a88);
}
.tr-sky-floor i { background: linear-gradient(#ffd06c, #e4872e); border: 2px solid #a55622; }
.tr-sky-floor i:after { content: ""; display: block; width: 18px; height: 14px; margin: 5px auto; background: linear-gradient(90deg, #1b779b 46%, #a4e8f1 47% 53%, #1b779b 54%); border: 2px solid #f5e4c1; }
.tr-sky-floor span { display: grid; place-items: center; background: #6d3c20; color: #fff1a5; border: 2px solid #4d2715; font-size: 8px; font-weight: 900; }
.tr-win-burst { position: absolute; inset: 0; z-index: 9; display: grid; place-content: center; text-align: center; background: radial-gradient(circle, #ffd83e33, transparent 58%); animation: tr-winpop .45s cubic-bezier(.2,1.7,.4,1) both; pointer-events: none; }
.tr-win-burst small { font-family: Impact, "Arial Black", sans-serif; font-size: 36px; color: #ffe135; -webkit-text-stroke: 2px #673508; }
.tr-win-burst strong { display: block; font-size: 18px; color: #fff; }
.tr-crash-flash { position: absolute; inset: 0; z-index: 7; background: radial-gradient(circle, #ffba3988, transparent 55%); animation: tr-flash .3s 3; pointer-events: none; }
.tr-dust { position: absolute; inset: 0; z-index: 10; overflow: hidden; pointer-events: none; }
.tr-dust i { position: absolute; left: var(--dust-x); bottom: 38px; width: var(--dust-size); height: var(--dust-size); border-radius: 45%; background: #9c6b45; animation: tr-dust 1.4s var(--dust-delay) ease-out both; }
.tr-controls { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(#4d3628, #2c1d16); border-top: 8px solid #25353a; box-shadow: inset 0 6px #6a4934; flex-shrink: 0; }
.tr-modes { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.tr-modes button { padding: 5px 10px; border: 2px solid #fff; background: #2c4e59; color: #fff; border-radius: 13px; font-size: 9px; font-weight: 800; cursor: pointer; }
.tr-modes button.selected { background: #ffc327; color: #4f2d08; }
.tr-build-panel { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 620px; margin: 10px auto 0; }
.tr-betbar { margin: 0 0 8px; }
.gb-betbar { pointer-events: auto; z-index: 8; position: relative; }
.gb-chip-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  pointer-events: auto; z-index: 9;
}
.gb-chip {
  min-width: 44px; min-height: 36px; padding: 6px 8px; border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.35); background: #1a1208; color: #ffe08a;
  font-size: 11px; font-weight: 800; cursor: pointer; pointer-events: auto;
}
.gb-chip.active {
  background: linear-gradient(180deg, #ffe08a, #c9a227); color: #1a1000;
  border-color: #fff6c8; transform: translateY(-2px);
}
.gb-custom-bet {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  margin-top: 8px; font-size: 11px; font-weight: 800; color: #d7c7a4; letter-spacing: .04em;
  text-transform: uppercase;
}
.gb-custom-bet input {
  width: 110px; min-height: 36px; border-radius: 10px; border: 1.5px solid rgba(255,255,255,.28);
  background: #0d1018; color: #fff; text-align: center; font-weight: 800; font-size: 14px;
  pointer-events: auto;
}
.tr-stepper { display: grid; grid-template-columns: 44px 1fr 44px; border: 4px solid #687076; border-radius: 12px; background: linear-gradient(#41464b, #22262a); overflow: hidden; }
.tr-stepper button { border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.tr-stepper input { min-width: 0; background: transparent; border: 0; text-align: center; color: #fff; font-size: 18px; font-weight: 900; outline: 0; }
.tr-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 7px; }
.tr-quick button { border: 0; border-radius: 8px; background: linear-gradient(#28a2ef, #1263ba); color: #fff; padding: 10px; font-weight: 900; box-shadow: inset 0 3px #81d4ff, 0 4px 0 #0b3d73; cursor: pointer; }
.tr-build {
  position: relative; display: block; width: 100%; min-height: 72px; padding: 18px 12px 20px;
  border: 0; border-radius: 12px; background: linear-gradient(#ffe14a, #e8a300); color: #fff8d2;
  font-weight: 900; box-shadow: inset 0 5px #fff27d, 0 8px 0 #7e5900; font-family: Impact, "Arial Black", sans-serif;
  letter-spacing: 3px; cursor: pointer; visibility: visible !important; opacity: 1;
}
.tr-build:disabled { opacity: .72; cursor: not-allowed; }
.tr-build.tr-build-lowbal { opacity: 1; filter: saturate(1.05); }
.tr-build:before, .tr-build:after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: repeating-linear-gradient(135deg, #201b12 0 8px, #ffcc29 8px 16px); }
.tr-build:before { top: 0; border-radius: 12px 12px 0 0; }
.tr-build:after { bottom: 0; border-radius: 0 0 12px 12px; }
.tr-build small {
  display: block; font: 800 12px/1.2 Arial, Helvetica, sans-serif; margin-bottom: 4px;
  letter-spacing: 3px; color: #5a3a00; text-shadow: none; text-transform: uppercase;
}
.tr-build strong {
  display: block; font-size: 34px; line-height: 1; color: #2a1600;
  -webkit-text-stroke: 0; text-shadow: 0 1px 0 #fff3a8; letter-spacing: 4px;
}
.tr-build.tr-build-pulse { animation: tr-build-pulse 1.35s ease-in-out infinite; }
.tr-build.tr-build-pulse strong { animation: tr-build-label 1.1s ease-in-out infinite; }
@keyframes tr-build-pulse {
  0%, 100% { transform: scale(1); box-shadow: inset 0 5px #fff27d, 0 8px 0 #7e5900, 0 0 0 0 rgba(255, 200, 40, 0); }
  50% { transform: scale(1.03); box-shadow: inset 0 5px #fff27d, 0 8px 0 #7e5900, 0 0 22px 4px rgba(255, 210, 60, .55); }
}
@keyframes tr-build-label {
  0%, 100% { opacity: 1; letter-spacing: 4px; }
  50% { opacity: .88; letter-spacing: 6px; }
}
.tr-cash { display: block; width: min(620px, 100%); margin: 8px auto 0; border: 0; border-radius: 8px; background: linear-gradient(#62d768, #24883c); color: #fff; padding: 8px; font-weight: 900; box-shadow: inset 0 3px #b6ffb2; cursor: pointer; }
.tr-cash:disabled { opacity: .55; }
.tr-notice { text-align: center; margin: 6px 0 0; color: #bba797; font-size: 8px; }
@keyframes tr-pendulum { 0%,100% { transform: translateX(-50%) rotate(-7deg); } 50% { transform: translateX(-50%) rotate(7deg); } }
@keyframes tr-hook { 0%,100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
@keyframes tr-drop { 0% { transform: translate(-82px, -510px) rotate(-11deg); opacity: .85; } 70% { transform: translate(-25px, -80px) rotate(-3deg); } 100% { transform: translate(-50%, 0) rotate(0); } }
@keyframes tr-collapse { 0% { transform: none; opacity: 1; } 100% { transform: translate(var(--shift), 310px) rotate(var(--rot)) scale(.65); opacity: 0; } }
@keyframes tr-shake { 0%,100% { transform: translate(0); } 20% { transform: translate(6px, -3px); } 40% { transform: translate(-8px, 4px); } }
@keyframes tr-winpop { from { transform: scale(.1); opacity: 0; } }
@keyframes tr-flash { 50% { opacity: .1; } }
@keyframes tr-dust { 0% { transform: translate(0,0) scale(.2); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(calc((var(--dust-x) - 50%) * var(--dust-move)), -90px) rotate(240deg) scale(.15); opacity: 0; } }
@media (max-height: 720px) {
  .tr-tower-wrap { height: 280px; transform: scale(.86); transform-origin: bottom; }
  .tr-status strong { font-size: 34px; }
  .tr-arena { padding-bottom: 52px; }
}

/* ═══════════════════════════════════════════════════════════
   TIGER VS DRAGON (GBTigerDragon) — from Music/Game-1
═══════════════════════════════════════════════════════════ */
.td-root {
  position: relative; width: 100%; min-height: 100dvh; height: 100dvh; overflow: hidden;
  color: #fff; display: flex; flex-direction: column; font-family: Arial, Helvetica, sans-serif;
  background: radial-gradient(circle at 50% 36%, #75070b66, transparent 45%), #020102;
}
.td-root:before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 42%, rgba(255,140,40,.38), transparent 42%),
    radial-gradient(ellipse at 88% 42%, rgba(40,170,255,.34), transparent 42%),
    radial-gradient(circle at 50% 40%, rgba(255,210,90,.16), transparent 28%),
    linear-gradient(180deg, #3a080c 0%, #120305 100%);
  opacity: .95;
}
.td-ambient {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, #00000000, #0006 44%, #0006 56%, #00000000), linear-gradient(0deg, #070203 4%, transparent 54%);
}
.td-webgl { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.td-root > *:not(.td-ambient):not(.td-webgl):not(.td-side-art) { position: relative; z-index: 3; }
.td-topbar, .td-arena, .td-panel { position: relative; z-index: 4; }
.td-topbar {
  height: 72px; display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 8px 52px; background: linear-gradient(#000e, #0004); border-bottom: 1px solid #ffc34747; flex-shrink: 0;
}
.td-brand { display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; }
.td-mini {
  grid-row: 1 / 3; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 2px solid #f4b83e; background: radial-gradient(circle, #9d1422, #370307); font-size: 9px; font-weight: 900;
}
.td-brand strong { font-family: Georgia, serif; font-size: 15px; letter-spacing: 1px; color: #ffcf63; }
.td-brand i { font-size: .55em; color: #fff; font-style: italic; }
.td-brand small { font-size: 7px; letter-spacing: 1.5px; color: #ccb78e; }
.td-top-actions { display: flex; align-items: center; gap: 8px; }
.td-sound { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #9f803a; background: #160b08; color: #ffe096; cursor: pointer; }
.td-balance { padding: 6px 10px; background: #000a; border: 1px solid #7b5722; border-radius: 9px; text-align: right; }
.td-balance span { display: block; font-size: 7px; letter-spacing: 1.5px; color: #ba9a63; }
.td-balance strong { color: #ffe096; font-size: 13px; }
.td-arena { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px; position: relative; overflow: hidden; }
.td-side-art {
  position: absolute; top: 0; bottom: 0;
  width: 48%; pointer-events: none; z-index: 2; overflow: hidden; user-select: none;
}
.td-side-tiger {
  left: 0;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 42%, transparent 100%);
}
.td-side-dragon {
  right: 0; left: auto;
  -webkit-mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 100%);
  mask-image: linear-gradient(to left, #000 0%, #000 42%, transparent 100%);
}
.td-side-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  opacity: .78; display: block;
}
.td-side-tiger img {
  object-position: 28% 12%;
  filter: saturate(1.2) contrast(1.08) drop-shadow(0 0 42px rgba(255,140,40,.55));
}
.td-side-dragon img {
  object-position: 72% 12%;
  filter: saturate(1.18) contrast(1.08) drop-shadow(0 0 42px rgba(50,180,255,.5));
}
.td-side-tiger:after, .td-side-dragon:after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.td-side-tiger:after {
  background: radial-gradient(ellipse at 28% 40%, rgba(255,150,40,.32), transparent 62%);
}
.td-side-dragon:after {
  background: radial-gradient(ellipse at 72% 40%, rgba(40,170,255,.3), transparent 62%);
}
.td-status { position: relative; z-index: 3; padding: 6px 14px; background: #000b; border: 1px solid #927333; border-radius: 30px; font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.td-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #3ee280; margin-right: 8px; box-shadow: 0 0 9px #3ee280; }
.td-dot.dealing { background: #ffbd3e; }
.td-dot.result { background: #ff4d55; }
.td-stage { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 18px; }
.td-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.td-slot > b { font-family: Georgia, serif; font-size: 14px; letter-spacing: 2px; }
.tiger-slot > b { color: #ffbd3e; }
.dragon-slot > b { color: #62d9ff; }
.td-slot > span { font-size: 10px; letter-spacing: 2px; color: #cdb98d; }
.td-card { width: 88px; aspect-ratio: .69; perspective: 1000px; filter: drop-shadow(0 12px 14px #000a); }
.td-card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.8,.2,1); }
.td-card.show .td-card-inner { transform: rotateY(180deg); }
.td-card:not(.show) { animation: td-float 2.2s ease-in-out infinite; }
.td-card-back, .td-card-front { position: absolute; inset: 0; border-radius: 11px; backface-visibility: hidden; border: 4px solid #e7bd59; }
.td-card-back { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #360308 0 5px, #92101d 5px 10px); }
.td-back-mark { display: grid; place-items: center; width: 54%; aspect-ratio: 1; border-radius: 50%; background: #160306; border: 2px solid #ebbd50; color: #f2c85f; font-family: Georgia, serif; font-weight: 900; font-size: 11px; }
.td-card-front { transform: rotateY(180deg); background: #fffaf0; color: #16100e; padding: 8px; font-family: Georgia, serif; }
.td-card-front.red { color: #c7162d; }
.td-corner { position: absolute; top: 6px; left: 7px; font-size: 18px; font-weight: 800; line-height: .8; }
.td-corner small { display: block; font-size: 14px; text-align: center; margin-top: 3px; }
.td-corner.bottom { top: auto; left: auto; bottom: 6px; right: 7px; transform: rotate(180deg); }
.td-big { position: absolute; inset: 0; display: grid; place-items: center; font-size: 42px; }
.td-versus { text-align: center; }
.td-versus span { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: radial-gradient(circle, #f5c758, #9c3209 52%, #3b0606 56%); border: 2px solid #ffdc6c; font: 900 15px Georgia; }
.td-versus small { display: block; width: 70px; margin: 6px 0 0 -11px; font-size: 6px; letter-spacing: 1px; color: #dbc993; }
.td-slot.winner .td-card { transform: translateY(-6px) scale(1.05); filter: drop-shadow(0 0 18px #ffd152); }
.td-road { margin-top: 10px; min-height: 27px; display: flex; align-items: center; gap: 6px; background: #0008; border: 1px solid #5c4021; border-radius: 20px; padding: 4px 9px; }
.td-road small { font-size: 7px; color: #bba57b; letter-spacing: 1px; }
.td-road em { font-size: 8px; color: #766b5d; }
.td-road span { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 8px; font-weight: 900; }
.td-road .tiger { background: #d06a18; }
.td-road .dragon { background: #127fba; }
.td-road .tie { background: #328f4c; }
.td-panel {
  z-index: 5; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: linear-gradient(#160706f5, #040202fc); border: 1px solid #72511f; border-bottom: 0;
  border-radius: 18px 18px 0 0; box-shadow: 0 -15px 50px #000b; flex-shrink: 0;
}
.td-bets {
  display: flex;
  flex-direction: row;
  gap: 6px;
  width: 100%;
  align-items: stretch;
  box-sizing: border-box;
}
.td-zone {
  flex: 1 1 0;
  min-width: 0;
  width: 0;
  height: 72px;
  box-sizing: border-box;
  border-radius: 13px; border: 1px solid #8d6928; position: relative; overflow: hidden;
  cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff;
}
.td-zone.td-tie {
  flex: 0.55 1 0;
  max-width: 88px;
  position: relative;
  transform: none;
  width: 0;
  height: 72px;
  animation: none;
}
.td-zone.td-tiger {
  align-items: flex-start; text-align: left; padding: 8px 10px 8px 12px;
}
.td-zone.td-dragon {
  align-items: flex-end; text-align: right; padding: 8px 12px 8px 10px;
}
.td-zone.td-tiger .td-zone-copy,
.td-zone.td-dragon .td-zone-copy {
  display: flex; flex-direction: column; gap: 2px; width: 100%;
}
.td-zone.td-tiger .td-zone-copy { align-items: flex-start; }
.td-zone.td-dragon .td-zone-copy { align-items: flex-end; }
.td-zone:disabled { opacity: .45; cursor: not-allowed; }
.td-tiger { background: linear-gradient(135deg, #8b250a, #d46c15 55%, #5b1609); }
.td-dragon { background: linear-gradient(135deg, #073c62, #0876aa 55%, #052841); }
.td-tie { background: linear-gradient(135deg, #174b27, #277e3c, #143b20); }
.td-zone span { font-size: 8px; letter-spacing: 2px; opacity: .78; }
.td-zone strong { font: 900 15px Georgia; letter-spacing: 2px; }
.td-zone b { font-size: 11px; color: #ffe7a5; }
.td-zone.winner { outline: 3px solid #ffd052; box-shadow: 0 0 25px #ffc53a88; }
.td-actions { display: flex; flex-direction: row; width: 100%; align-items: stretch; gap: 6px; margin-top: 10px; box-sizing: border-box; }
.td-clear, .td-deal {
  flex: 1 1 0; min-width: 0; width: 0; height: 44px; box-sizing: border-box;
  border-radius: 9px; border: 1px solid #a27828; font-size: 8px; font-weight: 900; letter-spacing: 1px; cursor: pointer; color: #fff;
}
.td-clear { background: #211315; }
.td-deal { background: linear-gradient(#ffd34d, #d5850c); color: #2d1200; border-color: #ffde73; }
.td-clear:disabled, .td-deal:disabled { opacity: .45; cursor: not-allowed; }
.td-betbar { margin-top: 8px; pointer-events: auto; z-index: 8; }
.td-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; }
.td-chips .gb-chip,
.td-chips button {
  min-width: 44px; min-height: 36px; width: auto; height: auto; border-radius: 999px;
  border: 1.5px solid rgba(255,220,99,.45); outline: 0;
  background: radial-gradient(circle, #f5d260 0 30%, #b36a0f 32% 65%, #5d3508 67%);
  cursor: pointer; color: #1a1000; pointer-events: auto;
}
.td-chips button:nth-child(2) { filter: hue-rotate(160deg); }
.td-chips button:nth-child(3) { filter: hue-rotate(300deg); }
.td-chips button:nth-child(4) { filter: hue-rotate(75deg); }
.td-chips button:nth-child(5) { filter: hue-rotate(210deg); }
.td-chips button:nth-child(6) { filter: hue-rotate(40deg); }
.td-chips button:nth-child(7) { filter: hue-rotate(190deg); }
.td-chips button:nth-child(8) { filter: hue-rotate(250deg); }
.td-chips button:nth-child(9) { filter: hue-rotate(20deg); }
.td-chips button:nth-child(10) { filter: hue-rotate(110deg); }
.td-chips .gb-chip.active,
.td-chips button.active { transform: translateY(-4px) scale(1.06); box-shadow: 0 7px 14px #000, 0 0 0 2px #ffdc63; }
.td-chips span { font-size: 10px; font-weight: 900; }
.td-hint { text-align: center; margin: 7px 0 0; font-size: 7px; color: #9b8865; }
.td-amount {
  position: absolute; z-index: 9; left: 50%; top: 62%; min-width: 245px; transform: translate(-50%, -50%);
  padding: 10px 18px; border-radius: 18px; text-align: center; backdrop-filter: blur(12px);
  animation: td-reveal .7s 1.05s cubic-bezier(.16,1,.3,1) both;
}
.td-amount small, .td-amount span { display: block; font-weight: 900; letter-spacing: 3px; font-size: 8px; }
.td-amount strong { display: block; margin: 3px 0; font: 900 30px Georgia, serif; }
.td-amount.amount-win { color: #efffc9; border: 3px solid #ccff54; background: linear-gradient(135deg, #123e17ed, #267c25f5); }
.td-amount.amount-loss { color: #ffe1df; border: 3px solid #ff4949; background: linear-gradient(135deg, #3b090bed, #9b1118f5); }
.td-amount.amount-push { color: #fff; border: 3px solid #56d8ff; background: #12304aed; }
.td-fx { position: absolute; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.td-battle { position: absolute; inset: 0; }
.td-actor { position: absolute; top: 10%; width: min(38%, 220px); filter: drop-shadow(0 12px 18px #000); }
.td-actor img { width: 100%; height: auto; display: block; object-fit: contain; }
.td-actor.tiger-v, .td-actor.tiger-a { left: 2%; }
.td-actor.dragon-a, .td-actor.dragon-v { right: 2%; }
.dragon-a { animation: td-lunge 1.8s both; }
.tiger-a { animation: td-pounce 1.7s both; }
.td-banner {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); padding: 10px 18px; border-radius: 8px;
  font: 900 18px Georgia, serif; letter-spacing: 3px; white-space: nowrap; animation: td-pop 1.8s .2s both;
}
.dragon-finish { color: #fff2bd; border: 2px solid #ff9b25; background: #b42a00f2; }
.tiger-finish { color: #fff3bf; border: 2px solid #ffd861; background: #aa5700f2; }
.td-fire { position: absolute; right: 22%; top: 40%; width: 50%; height: 16%; background: linear-gradient(90deg, transparent, #ff3d00, #ff9800, #fff59b); border-radius: 40%; filter: blur(2px); animation: td-fire 1.2s .2s both; }
.td-claw { position: absolute; left: 16%; top: 28%; width: 68%; height: 40%; }
.td-claw i { position: absolute; left: 0; width: 100%; height: 8px; background: linear-gradient(90deg, transparent, #ffe8a1, #fff); border-radius: 100%; }
.td-claw i:nth-child(1) { top: 20%; } .td-claw i:nth-child(2) { top: 48%; } .td-claw i:nth-child(3) { top: 76%; }
.td-fx .td-tie, .td-battle .td-tie { position: absolute; left: 50%; top: 47%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, #fff 0, #52ff79 12%, #158b35 40%, transparent 70%); font: 900 28px Georgia; animation: td-tie 1.2s both; }
.td-root.battle-dragon .td-arena { animation: tr-shake .55s .25s; }
.td-root.battle-tiger .td-arena { animation: tr-shake .48s .3s; }
.td-clash-blast .tiger-a { left: 8%; animation: td-clash-l 0.85s both; }
.td-clash-blast .dragon-a { right: 8%; left: auto; animation: td-clash-r 0.85s both; }
.td-clash-banner { background: #1a0a00f2; border: 2px solid #ffd052; color: #ffe7a5; }
.td-clash-sparks { position: absolute; inset: 28% 18% 40%; pointer-events: none; }
.td-clash-sparks i {
  position: absolute; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #ffd052 40%, transparent 70%);
  animation: td-spark 0.9s ease-out both;
}
.td-clash-sparks i:nth-child(1) { left: 40%; top: 40%; animation-delay: .05s; }
.td-clash-sparks i:nth-child(2) { left: 55%; top: 30%; animation-delay: .08s; }
.td-clash-sparks i:nth-child(3) { left: 48%; top: 55%; animation-delay: .12s; }
.td-clash-sparks i:nth-child(4) { left: 62%; top: 48%; animation-delay: .04s; }
.td-clash-sparks i:nth-child(5) { left: 35%; top: 50%; animation-delay: .1s; }
.td-clash-sparks i:nth-child(6) { left: 50%; top: 22%; animation-delay: .15s; }
.td-clash-sparks i:nth-child(7) { left: 28%; top: 35%; animation-delay: .07s; }
.td-clash-sparks i:nth-child(8) { left: 68%; top: 38%; animation-delay: .11s; }
@keyframes td-clash-l {
  0% { transform: translateX(-60%) scale(.7); opacity: 0; }
  45% { opacity: 1; transform: translateX(18%) scale(1.15); }
  100% { opacity: 0; transform: translateX(8%) scale(1); }
}
@keyframes td-clash-r {
  0% { transform: translateX(60%) scale(.7); opacity: 0; }
  45% { opacity: 1; transform: translateX(-18%) scale(1.15); }
  100% { opacity: 0; transform: translateX(-8%) scale(1); }
}
@keyframes td-spark {
  0% { transform: scale(.2); opacity: 0; }
  30% { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: translate(var(--sx, 20px), var(--sy, -30px)) scale(.1); }
}
@keyframes td-float { 50% { transform: translateY(-5px); } }
@keyframes td-reveal { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes td-lunge { 0% { transform: translateX(40%) scale(.8); opacity: 0; } 50% { opacity: 1; transform: translateX(-8%) scale(1.1); } 100% { opacity: 0; } }
@keyframes td-pounce { 0% { transform: translateX(-40%) scale(.8); opacity: 0; } 50% { opacity: 1; transform: translateX(8%) scale(1.1); } 100% { opacity: 0; } }
@keyframes td-pop { 0%, 30% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 0; } }
@keyframes td-fire { 0% { transform: scaleX(0); opacity: 0; } 40% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; } }
@keyframes td-tie { 0% { transform: translate(-50%, -50%) scale(0); opacity: 0; } 45% { transform: translate(-50%, -50%) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(2); opacity: 0; } }
@media (max-height: 700px) {
  .td-card { width: 72px; }
  .td-zone { height: 56px; }
  .td-topbar { height: 64px; }
}

body.gb-land-game #app:has(.td-mount),
body.gb-land-game #app:has(.td-root) {
  padding: 0 !important;
  max-width: 100% !important;
}
body.gb-land-game .td-mount,
body.gb-land-game .td-root {
  min-height: 100dvh;
  height: 100dvh;
  overflow: hidden;
}
body.gb-land-game .td-panel {
  overflow-y: auto;
  max-height: 46vh;
  pointer-events: auto;
  z-index: 8;
}
@media (orientation: landscape) {
  body.gb-land-game .td-root {
    flex-direction: row;
    align-items: stretch;
  }
  body.gb-land-game .td-arena {
    flex: 1;
    min-width: 0;
    min-height: 0;
  }
  body.gb-land-game .td-panel {
    width: min(46vw, 460px);
    max-height: none;
    height: 100%;
    border-radius: 0;
    overflow-y: auto;
  }
  body.gb-land-game .td-stage { margin-top: 8px; }
  body.gb-land-game .td-side-art { width: 50%; top: -10%; bottom: -6%; }
  body.gb-land-game .td-bets { width: 100%; }
  body.gb-land-game .td-zone.td-tiger,
  body.gb-land-game .td-zone.td-dragon { flex: 1 1 0; min-width: 0; width: 0; }
}
body.gb-land-game .game-back-btn {
  z-index: 95;
  background: rgba(0,0,0,.78);
  color: #fff;
}

.gb-suspend-popup {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  padding: 20px;
}
.gb-suspend-popup.show { display: flex; }
.gb-suspend-card {
  max-width: 360px;
  width: 100%;
  background: #161a24;
  border: 1px solid rgba(255,107,122,.45);
  border-radius: 16px;
  padding: 22px 18px;
  text-align: center;
}
.gb-suspend-card strong { display: block; color: #ff8a9a; font-size: 1.05rem; margin-bottom: 10px; }
.gb-suspend-card p { margin: 0 0 16px; color: #e8eaed; line-height: 1.45; }
.gb-suspend-card .btn { min-width: 120px; }

/* Home glam promo — original Bn786 host portraits */
.home-glam {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 8px 0 12px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(240,193,75,.35);
  background: linear-gradient(135deg, #2a0a12, #4a1020);
  min-height: 108px;
}
.home-glam img {
  width: 92px; height: 108px; object-fit: cover; object-position: top center; display: block;
}
.home-glam-copy {
  padding: 10px 12px 10px 0;
  display: flex; flex-direction: column; justify-content: center;
}
.home-glam-copy small { color: #f0c14b; font-weight: 800; letter-spacing: .12em; font-size: .62rem; }
.home-glam-copy strong { color: #fff6c8; font-size: 1.02rem; line-height: 1.2; }
.home-glam-copy p { margin: 4px 0 0; color: rgba(255,246,242,.82); font-size: .78rem; }

/* Personal Center lounge (replaces P&L / spend history) */
.pc-lounge { display: grid; gap: 10px; }
.pc-live-row {
  display: flex; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(240,193,75,.08); border: 1px solid rgba(240,193,75,.2);
  color: #fff6c8; font-size: .82rem;
}
.pc-live-row em { color: #2ee59d; font-style: normal; font-weight: 800; }
.pc-fact {
  padding: 12px; border-radius: 12px;
  background: linear-gradient(160deg, #2a1018, #1a080c);
  border: 1px solid rgba(240,193,75,.22);
}
.pc-fact strong { display: block; color: #ffe08a; margin-bottom: 4px; }
.pc-fact p { margin: 0; color: rgba(255,246,242,.82); font-size: .85rem; }

/* Tiger vs Dragon — live-table shake + particles */
.td-root.td-dealing .td-arena,
.td-root.td-slam .td-arena { animation: td-quake .55s cubic-bezier(.36,.07,.19,.97) both; }
.td-root.td-winpulse .td-arena { animation: td-quake .7s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes td-quake {
  0%,100% { transform: translate(0); }
  12% { transform: translate(-7px, 3px) rotate(-.4deg); }
  24% { transform: translate(8px, -4px) rotate(.5deg); }
  36% { transform: translate(-6px, -2px); }
  50% { transform: translate(5px, 4px); }
  68% { transform: translate(-3px, 1px); }
  84% { transform: translate(2px, -1px); }
}
.td-particles { position: absolute; inset: 0; pointer-events: none; z-index: 7; overflow: hidden; }
.td-particles i {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #ffd052 45%, transparent 70%);
  animation: td-sparkfly .9s ease-out forwards;
}
@keyframes td-sparkfly {
  0% { transform: translate(0,0) scale(.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--px, 40px), var(--py, -60px)) scale(.1); opacity: 0; }
}
.td-clash-blast .td-shock {
  position: absolute; left: 50%; top: 42%; width: 28px; height: 28px; margin: -14px 0 0 -14px;
  border-radius: 50%; border: 3px solid #ffe08a;
  animation: td-shock .7s ease-out both;
}
@keyframes td-shock {
  0% { transform: scale(.2); opacity: 1; }
  100% { transform: scale(6.5); opacity: 0; }
}
.td-card.show { animation: td-slam .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes td-slam {
  0% { transform: translateY(-18px) scale(1.08); }
  100% { transform: translateY(0) scale(1); }
}

/* ===== v122 bottomnav 2+1+2 fade dock + v121 lobby scroll ===== */
.dl-x, #dlStripClose { display: none !important; }

.topbar, .bottomnav, .gb-dock-rail, .fav-heart, .pc-backdrop {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html.perf-low .bottomnav,
html.gb-lite .bottomnav,
html[data-perf="low"] .bottomnav,
body.is-scrolling .bottomnav {
  background:
    linear-gradient(180deg,
      rgba(8,2,4,0) 0%,
      rgba(12,4,8,.45) 28%,
      rgba(18,6,10,.82) 62%,
      rgba(8,2,4,.96) 100%) !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

html.perf-low .nav-get .nav-wheel,
html.gb-lite .nav-get .nav-wheel,
body.is-scrolling .nav-get .nav-wheel {
  box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 0 0 3px #8a6010, inset 0 0 12px rgba(255,255,255,.25) !important;
  animation: none !important;
}

html.perf-low .nav-item .nav-ico,
html.gb-lite .nav-item .nav-ico,
body.is-scrolling .nav-item .nav-ico {
  animation: none !important;
}

html.perf-low .nav-get .nav-coin.c3,
html.perf-low .nav-get .nav-coin.c4,
html.gb-lite .nav-get .nav-coin.c3,
html.gb-lite .nav-get .nav-coin.c4 {
  display: block !important;
}

.tile-face::after,
.grid-tile::after,
.lobby-grid .tile::after,
.tile::after,
.game-card::after,
.shelf-tile::after,
.tile-face.tile-flare-on::after,
html:not(.perf-low):not(.gb-lite) .tile-face.tile-flare-on::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  opacity: 0 !important;
  background: none !important;
  transform: none !important;
}

.tile-face::before,
.grid-tile::before,
.lobby-grid .tile::before,
.tile::before,
.game-card::before,
.shelf-tile::before,
html.perf-low .lobby-grid .tile-face::before,
html.gb-lite .lobby-grid .tile-face::before {
  content: none !important;
  display: none !important;
  animation: none !important;
}

.tile-face.tile-gloss::before,
html.perf-low .tile-face.tile-gloss::before,
html.gb-lite .tile-face.tile-gloss::before,
html.perf-low .lobby-grid .tile-face.tile-gloss::before,
html.gb-lite .lobby-grid .tile-face.tile-gloss::before,
body.is-scrolling .tile-face.tile-gloss::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(
    155deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.07) 22%,
    transparent 46%
  ) !important;
  border-radius: inherit;
}

.tile-face,
.lobby-grid .tile-face,
.grid-tile .tile-face {
  box-shadow: 0 2px 6px rgba(0,0,0,.28) !important;
  filter: none !important;
}

html.perf-low .grid-tile,
html.perf-low .tile,
html.perf-low .shelf-tile,
html.gb-lite .grid-tile,
html.gb-lite .tile,
html.gb-lite .shelf-tile {
  content-visibility: visible;
  contain: layout paint;
  transition: none !important;
  filter: none !important;
}

body.is-scrolling .grid-tile,
body.is-scrolling .tile,
body.is-scrolling .shelf-tile,
body.is-scrolling .tile-face {
  transition: none !important;
  filter: none !important;
}

body.is-scrolling #gbCoinRain,
html.perf-low #gbCoinRain,
html.gb-lite #gbCoinRain {
  display: none !important;
}

body.is-scrolling .motion-hero,
html.perf-low .motion-hero,
html.gb-lite .motion-hero {
  display: none !important;
  animation: none !important;
}

body.is-scrolling .live-pulse,
body.is-scrolling .vip-badge.shine,
body.is-scrolling .nav-get .nav-wheel,
body.is-scrolling .nav-get .nav-coin,
body.is-scrolling .mx-badge,
body.is-scrolling .badge,
html.perf-low .live-pulse,
html.gb-lite .live-pulse,
html.perf-low .nav-get .nav-wheel,
html.gb-lite .nav-get .nav-wheel,
html.perf-low .nav-get .nav-coin,
html.gb-lite .nav-get .nav-coin {
  animation: none !important;
}



/* ===== v123 wallet fee cards + available-only balance ===== */
.wallet-balance-panel .wallet-avail-row {
  margin-top: 8px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(240, 193, 75, 0.12);
}
.wallet-balance-panel .wallet-avail {
  font-size: 1.35rem;
  color: #ffe08a;
  letter-spacing: 0.02em;
}
.wd-panel .wd-fee-grid {
  display: grid;
  gap: 10px;
  margin: 0 0 14px;
}
.wd-fee-card {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px 12px 11px;
  border-radius: 12px;
  background:
    linear-gradient(145deg, rgba(42, 24, 10, 0.92), rgba(18, 8, 6, 0.96)),
    radial-gradient(120% 80% at 0% 0%, rgba(240, 193, 75, 0.14), transparent 55%);
  border: 1px solid rgba(240, 193, 75, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 224, 138, 0.08);
}
.wd-fee-card.lucky {
  background:
    linear-gradient(145deg, rgba(36, 18, 28, 0.95), rgba(14, 6, 10, 0.98)),
    radial-gradient(120% 80% at 100% 0%, rgba(196, 30, 42, 0.18), transparent 55%);
  border-color: rgba(240, 193, 75, 0.18);
}
.wd-fee-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #5a3a08;
  background: linear-gradient(160deg, #ffe08a, #f0c14b 55%, #c9a227);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.wd-fee-card.lucky .wd-fee-ico {
  color: #3a1014;
  background: linear-gradient(160deg, #ffe08a, #e8b84a 40%, #c41e2a);
}
.wd-fee-card strong {
  display: block;
  font-size: 0.86rem;
  color: #ffe08a;
  margin-bottom: 2px;
}
.wd-fee-card p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: #b9a88a;
}
.wd-gate {
  margin: 0 0 8px;
  font-size: 0.78rem;
}
.wd-gate strong {
  color: #2ee59d;
}

.jl-chips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  padding: 0 8px 8px;
}
.jl-chips button {
  border: 0;
  border-radius: 8px;
  background: rgba(0,0,0,.35);
  color: #fde68a;
  font-size: 10px;
  font-weight: 800;
  padding: 5px 2px;
  min-width: 0;
}
.jl-chips button.active {
  background: linear-gradient(180deg, #ffe08a, #c9a227);
  color: #1a1000;
}

.chips.sp-stake {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chips.sp-stake .chip { font-size: 0.72rem; padding: 6px 8px; }

.av-qbets {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}

.gb-notify-sheet {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 12px calc(18px + env(safe-area-inset-bottom));
  background: rgba(8, 4, 6, .45);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
}
.gb-notify-sheet.show {
  pointer-events: auto;
  opacity: 1;
}
.gb-notify-card {
  width: min(420px, 100%);
  background: linear-gradient(180deg, #2a1c0c, #140c08);
  border: 1px solid rgba(240, 193, 75, .45);
  border-radius: 16px;
  padding: 16px 14px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,.45);
  color: #fff6e8;
}
.gb-notify-card strong {
  display: block;
  color: #f0c14b;
  font-size: 1rem;
  margin-bottom: 6px;
}
.gb-notify-card p {
  margin: 0 0 12px;
  font-size: .85rem;
  line-height: 1.4;
  color: #e8d5b0;
}
.gb-notify-card.win { border-color: rgba(46, 229, 157, .45); }
.gb-notify-card.win strong { color: #2ee59d; }
.gb-notify-card.lose, .gb-notify-card.bad { border-color: rgba(255, 107, 122, .4); }
.gb-notify-card.lose strong, .gb-notify-card.bad strong { color: #ff8a9a; }
.gb-notify-ok { width: 100%; }

/* v127 amount chart — closed until the stake field is tapped */
.gb-amt-wrap,
.spb-panel-left,
.ck-bet-block,
.jj-bet,
.mp-bet {
  position: relative;
}
.gb-amt-toggle {
  min-width: 92px;
  cursor: pointer;
}
.av-stake-in,
#ckStake,
.gb-amt-toggle,
[data-jili-chart-toggle] {
  cursor: pointer;
}

.spb-qbets:not(.is-open),
.av-qbets:not(.is-open),
.ck-presets:not(.is-open),
.gb-amt-chart:not(.is-open),
.jl-chips:not(.is-open) {
  display: none !important;
}

.spb-panel-row {
  overflow: visible;
}

.spb-qbets.is-open,
.av-qbets.is-open {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 45;
  width: min(340px, 72vw);
  background: #161922;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  gap: 4px;
}

.ck-presets.is-open {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr);
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 45;
  margin-top: 0;
  background: #1c222d;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 -10px 24px rgba(0,0,0,.45);
}

.gb-amt-chart.is-open {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.jl-chips.is-open {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gb-chart-custom {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  align-items: center;
  width: 100%;
  margin-top: 2px;
}
.gb-chart-custom-in {
  flex: 1;
  min-width: 0;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.16);
  background: #0a0c10;
  color: #fff;
  font-weight: 800;
  padding: 6px 8px;
  font-size: .78rem;
}
.gb-chart-custom-ok {
  border: 0;
  border-radius: 8px;
  background: #3d4658;
  color: #fff;
  font-weight: 800;
  padding: 6px 10px;
  font-size: .72rem;
  cursor: pointer;
  flex-shrink: 0;
}
.gb-chart-custom.is-custom .gb-chart-custom-in {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.4);
  background: #3d4658;
}

.spb-menu,
.ck-menu { display: none !important; }
.ck-top-left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.spb-topbar .game-back-btn,
.ck-topbar .game-back-btn {
  position: relative;
  top: auto;
  left: auto;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
body.gb-land-game .spb-topbar .game-back-btn,
body.gb-land-game .ck-topbar .game-back-btn {
  position: relative;
  top: auto;
  left: auto;
  z-index: 20;
}

.gb-round-banner {
  position: fixed;
  left: 50%;
  top: 22%;
  transform: translate(-50%, -50%);
  z-index: 240;
  min-width: 148px;
  padding: 14px 28px;
  border-radius: 14px;
  background: #1d4ed8;
  color: #fff;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: .02em;
  text-align: center;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .45);
  pointer-events: none;
  animation: gb-round-banner-in .18s ease-out;
}
.gb-round-banner.is-lose { background: #1e40af; }
@keyframes gb-round-banner-in {
  from { transform: translate(-50%, -50%) scale(.86); opacity: 0; }
  to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.tr-stake-row,
.td-stake-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.gb-chip-step {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: #3a4150;
  color: #fff;
  font-weight: 900;
  font-size: 1.1rem;
  cursor: pointer;
  flex-shrink: 0;
}
.tr-betbar .av-stake-in,
.td-betbar .av-stake-in {
  width: 110px;
  text-align: center;
  font-weight: 800;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,.28);
  background: #0d1018;
  color: #fff;
  min-height: 36px;
}

/* v129 pop chart — closed until amount tap; overlay so SPIN stays visible */
.fg-game,
.mvp-game,
.jj-root,
.fb-root,
.fw-root,
.jl-stage,
.tr-betbar,
.td-betbar,
.fg-bet,
.mvp-bet,
.fb-bet-ctrl,
.fw-bet-ctrl {
  position: relative;
}
.gb-pop-chart:not(.is-open) {
  display: none !important;
}
.gb-pop-chart.is-open,
.jl-chips.gb-pop-chart.is-open {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(78px, calc(env(safe-area-inset-bottom) + 68px));
  z-index: 88;
  width: auto;
  max-width: 520px;
  margin: 0 auto;
  background: #161922;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,.5);
  gap: 4px;
}
.tr-betbar .gb-pop-chart.is-open,
.td-betbar .gb-pop-chart.is-open {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  top: auto;
  width: auto;
  max-width: none;
}
.gb-pop-chart.is-open button,
.jl-chips.gb-pop-chart.is-open button {
  border: 0;
  border-radius: 8px;
  background: #2a3140;
  color: #f8fafc;
  font-weight: 800;
  padding: 7px 4px;
  font-size: .78rem;
  min-width: 0;
}
.gb-pop-chart.is-open button.active,
.gb-pop-chart.is-open button.selected,
.jl-chips.gb-pop-chart.is-open button.active {
  background: #3d4658;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
}

body.gb-slot-fs .jj-hud,
body.gb-slot-fs .slot-hud,
body.gb-slot-fs .fb-hud,
body.gb-slot-fs .fw-hud,
body.gb-slot-fs .fg-hud {
  overflow: visible;
}
/* Web-only install choice bottom sheet */
.gb-web-install-layer {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(5, 4, 10, 0);
  pointer-events: none;
  transition: background .28s ease;
}
.gb-web-install-layer.show {
  background: rgba(5, 4, 10, .62);
  pointer-events: auto;
}
.gb-web-install-sheet {
  width: min(520px, 100%);
  padding: 10px 16px 16px;
  border: 1px solid rgba(255, 220, 120, .28);
  border-radius: 24px;
  background: linear-gradient(165deg, #21121d 0%, #100c16 68%, #09080d 100%);
  color: #fff;
  box-shadow: 0 -18px 70px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .08);
  transform: translateY(calc(100% + 34px));
  opacity: 0;
  transition: transform .32s cubic-bezier(.2,.85,.3,1), opacity .24s ease;
}
.gb-web-install-layer.show .gb-web-install-sheet {
  transform: translateY(0);
  opacity: 1;
}
.gb-web-install-handle {
  display: block;
  width: 44px;
  height: 4px;
  margin: 0 auto 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .28);
}
.gb-web-install-brand {
  display: flex;
  gap: 12px;
  align-items: center;
}
.gb-web-install-brand img {
  flex: 0 0 auto;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.gb-web-install-brand strong {
  display: block;
  margin-bottom: 3px;
  color: #ffe08a;
  font-size: 1.06rem;
}
.gb-web-install-brand p {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: .82rem;
  line-height: 1.4;
}
.gb-web-install-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 16px;
}
.gb-web-install-actions button {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  padding: 11px 12px;
  font: inherit;
  font-size: .86rem;
  font-weight: 850;
  cursor: pointer;
}
.gb-web-install-download {
  color: #261400;
  background: linear-gradient(180deg, #ffe59a, #d6a72d);
  box-shadow: 0 8px 24px rgba(214, 167, 45, .24);
}
.gb-web-install-continue {
  color: #f3e9ef;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  background: rgba(255, 255, 255, .07);
}
.gb-web-install-actions button:disabled { opacity: .65; cursor: wait; }
@media (max-width: 380px) {
  .gb-web-install-actions { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-web-install-layer,
  .gb-web-install-sheet { transition: none; }
}

/* ===== V153 two-step deposit panel ===== */
.dep-page-head {
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}
.dep-page-head h2 { color: #ffe08a; }
.dep-page-head span {
  color: rgba(255,255,255,.58);
  font-size: .72rem;
  font-weight: 700;
}
.dep-wizard {
  padding: 14px;
  overflow: hidden;
  border-color: rgba(240,193,75,.28);
  background:
    radial-gradient(circle at 100% 0, rgba(240,193,75,.08), transparent 34%),
    linear-gradient(180deg, rgba(28,15,17,.98), rgba(12,13,18,.99));
}
.dep-step[hidden] { display: none !important; }
.dep-stepper {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
  color: rgba(255,255,255,.42);
  font-size: .67rem;
  font-weight: 800;
}
.dep-stepper span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.dep-stepper b {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.55);
}
.dep-stepper span.active { color: #ffe08a; }
.dep-stepper span.active b {
  color: #1a1000;
  background: linear-gradient(160deg, #ffe08a, #f0c14b);
  border-color: #ffe08a;
  box-shadow: 0 0 14px rgba(240,193,75,.28);
}
.dep-stepper i {
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, rgba(240,193,75,.75), rgba(255,255,255,.12));
}
.dep-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 15px 0 10px;
  color: #fff;
  font-size: .93rem;
}
.dep-block-title i {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #f0c14b;
  box-shadow: 0 0 10px rgba(240,193,75,.65);
}
.dep-method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px;
}
.dep-method-card {
  position: relative;
  min-width: 0;
  min-height: 106px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 7px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
  color: #fff;
}
.dep-method-card strong { font-size: .78rem; line-height: 1.1; }
.dep-method-card small { color: rgba(255,255,255,.48); font-size: .61rem; }
.dep-method-card em {
  position: absolute;
  right: 6px;
  bottom: 5px;
  width: 20px;
  height: 20px;
  display: none;
  place-items: center;
  border-radius: 50%;
  background: #f0c14b;
  color: #241700;
  font-style: normal;
  font-weight: 900;
}
.dep-method-card.active {
  border-color: #f0c14b;
  background: rgba(240,193,75,.1);
  box-shadow: inset 0 0 0 1px rgba(240,193,75,.18), 0 7px 20px rgba(0,0,0,.22);
}
.dep-method-card.active em { display: grid; }
.dep-method-logo {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #fff;
  font-family: Rajdhani, Outfit, sans-serif;
  font-size: .95rem;
  font-weight: 900;
  letter-spacing: .03em;
  background: linear-gradient(145deg, #ef233c, #a4071b);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 5px 14px rgba(0,0,0,.28);
}
.dep-method-card.easypaisa .dep-method-logo {
  background: linear-gradient(145deg, #43c96b, #087b3c);
}
.dep-method-card.bank .dep-method-logo {
  background: linear-gradient(145deg, #3b82f6, #173c8f);
}
.dep-amount-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0,1fr));
  gap: 7px;
}
.dep-amount-chip {
  min-width: 0;
  padding: 11px 3px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.035);
  color: rgba(255,255,255,.78);
  font-size: .72rem;
  font-weight: 850;
}
.dep-amount-chip.active {
  color: #1a1000;
  border-color: #ffe08a;
  background: linear-gradient(160deg, #ffe08a, #f0c14b);
  box-shadow: 0 5px 15px rgba(240,193,75,.18);
}
.dep-amount-input {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-top: 6px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: #0d0f14;
  overflow: hidden;
}
.dep-amount-input strong {
  padding: 0 12px;
  color: #ffe08a;
  font-size: .92rem;
}
.dep-form .dep-amount-input input {
  border: 0;
  border-left: 1px solid rgba(255,255,255,.09);
  border-radius: 0;
  background: transparent;
}
.dep-info-line {
  margin: 10px 0 14px;
  color: #f0c14b;
  font-size: .72rem;
  font-weight: 800;
}
.dep-next, .dep-submit {
  min-height: 48px;
  font-size: 1rem;
  border-radius: 14px;
}
.dep-back {
  padding: 3px 0 9px;
  border: 0;
  background: transparent;
  color: #ffe08a;
  font-size: .75rem;
  font-weight: 800;
}
.dep-payable {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(51,65,85,.72), rgba(23,31,43,.86));
  border: 1px solid rgba(148,163,184,.22);
}
.dep-payable span { color: rgba(255,255,255,.7); font-size: .78rem; font-weight: 700; }
.dep-payable strong { color: #fff; font-size: 1.18rem; white-space: nowrap; }
.dep-selected-wallet {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 11px 12px;
  border-radius: 13px;
  border: 1px solid rgba(46,229,157,.28);
  background: rgba(46,229,157,.055);
}
.dep-selected-wallet .dep-method-logo { width: 38px; height: 38px; font-size: .85rem; }
.dep-selected-wallet div { min-width: 0; flex: 1; }
.dep-selected-wallet small { display: block; color: rgba(255,255,255,.48); font-size: .65rem; }
.dep-selected-wallet strong { display: block; color: #fff; font-size: .88rem; }
.dep-selected-wallet > b { color: #2ee59d; font-size: 1.15rem; }
.dep-wizard .dep-payto {
  margin: 0 0 12px;
  padding: 14px;
  border-style: solid;
  background: linear-gradient(145deg, rgba(240,193,75,.12), rgba(240,193,75,.045));
}
.dep-wizard .dep-payto strong {
  margin: 2px 0 10px;
  color: #ffe08a;
  font-size: 1.25rem;
  word-break: break-word;
}
.dep-wizard #depCopyNum { margin-top: 0; }
.dep-file-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0;
  pointer-events: none;
}
.dep-upload-box {
  position: relative;
  min-height: 126px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin: 6px 0 12px;
  padding: 13px;
  border-radius: 14px;
  border: 1.5px dashed rgba(240,193,75,.5);
  background: rgba(240,193,75,.045);
  text-align: center;
  overflow: hidden;
  cursor: pointer;
}
.dep-upload-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(240,193,75,.16);
  color: #ffe08a;
  font-size: 1.35rem;
}
.dep-upload-box strong { color: #fff; font-size: .84rem; }
.dep-upload-box small {
  max-width: 92%;
  color: rgba(255,255,255,.52);
  font-size: .67rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dep-upload-box img {
  width: 100%;
  max-height: 210px;
  margin-top: 7px;
  border-radius: 10px;
  object-fit: contain;
  background: #090a0d;
}
.dep-upload-box img:not([hidden]) ~ * { position: relative; }
.dep-wizard #depHint {
  margin: 9px 2px 0;
  line-height: 1.45;
  font-size: .7rem;
}
@media (max-width: 390px) {
  .dep-method-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .dep-method-card.bank { grid-column: span 2; min-height: 76px; flex-direction: row; }
  .dep-amount-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .dep-stepper { font-size: .61rem; }
  .dep-stepper b { width: 21px; height: 21px; }
  .dep-payable strong { font-size: 1.02rem; }
}