/* ═══════════════════════════════════════════════════════════
   CRAZY TIME — Complete Styles
   Mobile-first responsive, Evolution-inspired dark UI
   ═══════════════════════════════════════════════════════════ */

/* ─── Reset & Base ─── */
*, *::before, *::after {
  margin:0; padding:0; box-sizing:border-box;
  /* Sin pan/zoom del navegador: evita doble tap y pellizco en la mayoría de capas */
  touch-action: none;
}
html {
  font-size:16px; -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family:Arial, Helvetica, sans-serif;
  background:#0a0c12;
  color:#e8e8e8;
  overflow:hidden;
  height:100vh;
  height:100dvh;
  display:flex;
  flex-direction:column;
  overscroll-behavior-y: none;
  overscroll-behavior-x: none;
  -webkit-overflow-scrolling: touch;
}

/* Controles y listas con scroll: solo arrastre vertical, sin zoom */
button, .hamburger-btn, .chip-tray-btn, .bet-card, .quick-group-btn,
input, textarea, select, label,
.history-list, .history-list *,
.guide-scroll, .guide-scroll *,
.drawer-pane, .drawer-pane *,
.wizard-body, .wizard-body *,
.chat-messages, .crazytime-scene {
  touch-action: pan-y;
}
.timer-bar, .timer-fill, #timerBar {
  touch-action: manipulation;
}

/* Bloque principal (el drawer de historial es overlay; no desplaza la ruleta) */
.app-shift {
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

/* ─── HEADER / TOP BAR ─── */
#topBar {
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 12px;
  background:linear-gradient(180deg, #1a1d28 0%, #12141c 100%);
  border-bottom:1px solid rgba(255,215,0,.15);
  gap:8px;
}
.bar-left { display:flex; align-items:center; gap:6px; flex-shrink:0; }

.hamburger-btn {
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  width:34px; height:30px; padding:0 5px; border:none; border-radius:8px;
  background:rgba(255,255,255,.08); cursor:pointer; flex-shrink:0;
}
.hamburger-btn:active { background:rgba(255,255,255,.14); }
body.drawer-open .hamburger-btn { background:rgba(255,215,0,.12); }
.hamburger-line {
  display:block; height:2px; width:100%; background:#e4e4e4; border-radius:1px;
}
.logo {
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:.85rem; color:#ffd700;
  text-shadow:0 0 12px rgba(255,215,0,.4);
}
.player-badge {
  font-size:.7rem; padding:2px 8px;
  background:rgba(255,255,255,.08); border-radius:12px;
  color:#aaa;
}
.bar-center { flex:1; min-width:0; max-width:320px; margin:0 auto; }
.timer-bar {
  position:relative; height:22px;
  background:#1e2030; border-radius:11px;
  overflow:hidden; border:1px solid rgba(255,215,0,.1);
}
.timer-fill {
  position:absolute; top:0; left:0; height:100%;
  width:100%; border-radius:11px;
  background:linear-gradient(90deg, #ffd700, #ff9800);
  transition:width .4s ease;
}
.timer-text {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size:.65rem; font-weight:800; color:#e0e0e0;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  z-index:1;
  letter-spacing:.5px;
}
.bar-right {
  flex-shrink:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:4px;
}
/* Sonido — compacto, alineado con barra superior */
.audio-toggle {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  width:28px; height:28px;
  min-width:28px;
  border-radius:6px;
  border:1px solid rgba(255,215,0,.22);
  background:rgba(28,30,44,.92);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}
/* Iconos SVG (sin emoji): on / muted */
.audio-toggle-sr {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.audio-ic {
  width:15px; height:15px; display:block;
  color:#b8a86e;
  filter:drop-shadow(0 0 3px rgba(255,215,0,.08));
  pointer-events:none;
}
.audio-toggle--muted .audio-ic { color:#7a7a8e; filter:none; }
.audio-toggle--muted .audio-ic-on { display:none; }
.audio-toggle:not(.audio-toggle--muted) .audio-ic-off { display:none; }
.audio-toggle:active { transform:scale(.94); }
.audio-toggle--muted {
  border-color:rgba(160,160,180,.35);
  opacity:.88;
}
@media (max-width:380px) {
  .audio-toggle { width:26px; height:26px; min-width:26px; }
  .audio-ic { width:14px; height:14px; }
}
.balance-box {
  display:flex; flex-direction:column; align-items:flex-end;
  position:relative;
}
.balance-label { font-size:.55rem; color:#888; letter-spacing:1px; }
.balance-amount {
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:.95rem; color:#ffd700;
  transition: text-shadow .3s;
}
.balance-delta {
  position:absolute; right:0;
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:.65rem; pointer-events:none; white-space:nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}
.delta-up   { color:#4cff88; top:100%; }
.delta-down { color:#ff4c4c; top:100%; }

/* ─── MAIN GAME AREA ─── */
#gameArea {
  flex:1; display:flex; flex-direction:column; min-height:0;
  align-items:center; padding:8px 8px 0;
  gap:6px; max-width:600px; margin:0 auto; width:100%;
  position:relative; overflow:hidden;
  touch-action: none;
}

/* ─── TOP SLOT ─── */
.top-slot {
  background:linear-gradient(135deg, #1a1030 0%, #12162e 40%, #0c1020 100%);
  border:1px solid rgba(255,215,0,.25);
  border-radius:14px; padding:0;
  display:flex; flex-direction:column;
  box-shadow:
    0 8px 32px rgba(0,0,0,.6),
    0 0 20px rgba(255,215,0,.06),
    inset 0 1px 0 rgba(255,255,255,.06);
  overflow:hidden;
  max-width:270px;
  align-self:center;
  width:100%;
  position:relative;
}
.top-slot::before {
  content:''; position:absolute; inset:0;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,215,0,.05) 0%, transparent 40%);
  pointer-events:none;
}
.ts-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:6px 14px;
  background:linear-gradient(90deg, rgba(255,215,0,.15), rgba(255,180,0,.06), rgba(255,215,0,.1));
  border-bottom:1px solid rgba(255,215,0,.15);
  position:relative;
}
.ts-header::after {
  content:''; position:absolute; bottom:-1px; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,215,0,.4), transparent);
}
.ts-title {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:.7rem; color:#ffd700; letter-spacing:3px;
  text-shadow:0 0 8px rgba(255,215,0,.3);
}
.ts-subtitle {
  font-size:.5rem; color:rgba(255,215,0,.45); letter-spacing:1.5px;
  font-weight:700; text-transform:uppercase;
}
.ts-body {
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:10px 18px 12px;
}
.ts-reel-wrap {
  position:relative;
}
.ts-reel-wrap::before, .ts-reel-wrap::after {
  content:''; position:absolute; left:-1px; right:-1px; height:8px; z-index:2;
  pointer-events:none;
}
.ts-reel-wrap::before { top:0; background:linear-gradient(180deg, #0c1020, transparent); border-radius:8px 8px 0 0; }
.ts-reel-wrap::after  { bottom:0; background:linear-gradient(0deg, #0c1020, transparent); border-radius:0 0 8px 8px; }
.reel {
  width:64px; height:48px;
  background:linear-gradient(180deg, #06080f, #0a0e1a, #06080f);
  border-radius:10px;
  overflow:hidden; position:relative;
  border:2px solid rgba(255,215,0,.35);
  box-shadow:
    inset 0 2px 10px rgba(0,0,0,.7),
    0 0 8px rgba(255,215,0,.08);
}
.reel-inner {
  display:flex; flex-direction:column;
}
.reel-inner span {
  display:flex; align-items:center; justify-content:center;
  height:48px; min-width:64px;
  font-family:Arial, Helvetica, sans-serif; font-weight:800;
  font-size:1.15rem; color:#fff;
  text-shadow:0 0 6px rgba(255,255,255,.15);
}
.ts-divider {
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.4rem; color:#ffd700; font-weight:900;
  text-shadow:0 0 12px rgba(255,215,0,.5), 0 0 4px rgba(255,215,0,.3);
  animation:ts-glow 2s ease-in-out infinite alternate;
}
@keyframes ts-glow {
  from { text-shadow:0 0 12px rgba(255,215,0,.5), 0 0 4px rgba(255,215,0,.3); }
  to { text-shadow:0 0 18px rgba(255,215,0,.7), 0 0 8px rgba(255,215,0,.5); }
}

/* ─── Barra ronda + chat (misma línea, encima de la ruleta) ─── */
.wheel-toolbar {
  display:flex; align-items:center; justify-content:space-between;
  width:100%; max-width:420px; margin:0 auto;
  flex-shrink:0; gap:10px; padding:4px 6px 8px;
  position:relative; z-index:25;
}
.wheel-toolbar-round {
  padding:5px 11px; border-radius:999px;
  background:linear-gradient(180deg,#1a2030,#10141c);
  border:1px solid rgba(100,180,255,.22);
  font-size:.58rem; font-weight:800; letter-spacing:.06em;
  color:#a8d4ff; text-shadow:0 0 8px rgba(100,180,255,.25);
  white-space:nowrap; flex-shrink:0; line-height:1.2;
}
.wheel-toolbar-chat {
  position:relative; display:flex; flex-direction:column; align-items:flex-end;
  flex-shrink:0;
  transition:opacity .35s ease, transform .35s ease;
}
.wheel-toolbar-chat.chat-hidden {
  opacity:0; pointer-events:none; transform:translateY(-6px);
}

/* ─── WHEEL ─── */
.wheel-wrapper {
  position:relative; width:100%;
  max-width:420px; aspect-ratio:1;
  display:flex; align-items:center; justify-content:center;
  transition:filter .45s ease, box-shadow .45s ease;
}
.wheel-wrapper.wheel--spinning {
  filter:drop-shadow(0 0 18px rgba(255,200,90,.12));
}
.wheel-spinner {
  width:100%; height:100%;
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
}
.wheel-spinner canvas { width:100%!important; height:100%!important; }

/* Static center label */
.wheel-center-label {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:12; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  line-height:1.1;
}
.wcl-crazy {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.15rem; color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,.6), 0 2px 4px rgba(0,0,0,.8);
  letter-spacing:1px;
}
.wcl-time {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:.95rem; color:#ffd700;
  text-shadow:0 0 10px rgba(255,215,0,.6), 0 2px 4px rgba(0,0,0,.8);
  letter-spacing:2px;
}

.pointer-indicator {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:24px; height:30px;
  z-index:15;
  filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
.pointer-indicator::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:100%;
  background:linear-gradient(180deg, #ffd700 0%, #e6a800 40%, #cc8800 100%);
  clip-path:polygon(50% 100%, 0% 0%, 100% 0%);
}
.pointer-indicator::after {
  content:'';
  position:absolute; top:0; left:3px; right:3px;
  height:85%;
  background:linear-gradient(180deg, #fff5c0 0%, #ffd700 50%, #cc8800 100%);
  clip-path:polygon(50% 100%, 0% 0%, 100% 0%);
  opacity:.6;
}

/* ─── RESULTS STRIP ─── */
.results-strip {
  width:100%; display:flex; align-items:center;
  padding:3px 6px;
  background:linear-gradient(180deg, rgba(20,22,32,.85), rgba(12,14,22,.95));
  border-radius:10px; border:1px solid rgba(255,255,255,.06);
  flex-shrink:0; overflow:hidden; position:relative;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.3);
}
.results-list {
  display:flex; gap:3px; flex-wrap:nowrap;
  overflow-x:auto; overflow-y:hidden;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  flex:1; min-width:0;
  touch-action: pan-x;
}
.results-list::-webkit-scrollbar { display:none; }
.result-pill {
  min-width:26px; height:24px; padding:0 5px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px;
  font-size:.55rem; font-weight:800; letter-spacing:.3px;
  color:#fff; white-space:nowrap;
  flex-shrink:0;
  text-shadow:0 1px 2px rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.1);
  background-image:linear-gradient(180deg, rgba(255,255,255,.12) 0%, transparent 50%, rgba(0,0,0,.1) 100%);
  background-blend-mode:overlay;
}
/* Números: discretos, tono apagado */
.result-pill-number {
  opacity:.7;
  box-shadow:0 1px 3px rgba(0,0,0,.4);
  font-size:.52rem;
}
/* Bonos: vibrantes, con glow y más grandes */
.result-pill-bonus {
  min-width:30px; height:26px; padding:0 7px;
  font-size:.6rem; letter-spacing:.5px;
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 2px 6px rgba(0,0,0,.5),
             0 0 10px rgba(255,255,255,.12),
             inset 0 1px 0 rgba(255,255,255,.25),
             inset 0 -1px 0 rgba(0,0,0,.15);
  text-shadow:0 0 6px rgba(255,255,255,.4), 0 1px 2px rgba(0,0,0,.7);
}

/* ─── BETTING SECTION ─── */
.betting-section {
  width:100%; display:flex; flex-direction:column;
  gap:6px; padding-bottom:12px;
}

/* Chip Tray */
.chip-tray {
  display:flex; justify-content:center; gap:4px;
  padding:4px 0; flex-wrap:nowrap;
  transition:opacity .3s ease;
}
.chip-tray-btn {
  width:38px; height:38px; border-radius:50%;
  border:3px solid #888; cursor:pointer;
  background:radial-gradient(circle at 35% 35%, #555, #2a2a2a);
  box-shadow:0 2px 4px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.15);
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  transition:all .15s ease; position:relative;
  box-shadow:0 2px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.15);
}
.chip-tray-btn::before {
  content:''; position:absolute; inset:3px;
  border-radius:50%; border:1.5px dashed rgba(255,255,255,.2);
  pointer-events:none;
}
.chip-tray-btn::after {
  content:''; position:absolute; inset:0;
  border-radius:50%;
  background:conic-gradient(
    transparent 0deg, rgba(255,255,255,.12) 8deg, transparent 16deg,
    transparent 90deg, rgba(255,255,255,.12) 98deg, transparent 106deg,
    transparent 180deg, rgba(255,255,255,.12) 188deg, transparent 196deg,
    transparent 270deg, rgba(255,255,255,.12) 278deg, transparent 286deg
  );
  pointer-events:none;
}
.chip-tray-btn span {
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:.65rem; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.5);
  position:relative; z-index:1;
}
.chip-tray-btn.selected {
  transform:scale(1.18);
  box-shadow:0 0 14px rgba(255,215,0,.5), 0 2px 6px rgba(0,0,0,.5);
}
.chip-tray-btn:active { transform:scale(.92); }
.chip-tray-btn[data-value="1"]    { border-color:#ccc; background:radial-gradient(circle at 35% 35%, #777, #3a3a3a); }
.chip-tray-btn[data-value="5"]    { border-color:#e05252; background:radial-gradient(circle at 35% 35%, #c04040, #6a1a1a); }
.chip-tray-btn[data-value="20"]   { border-color:#f9a825; background:radial-gradient(circle at 35% 35%, #d48e00, #7a5200); }
.chip-tray-btn[data-value="50"]   { border-color:#ab47bc; background:radial-gradient(circle at 35% 35%, #8e24aa, #4a0e6a); }
.chip-tray-btn[data-value="100"]  { border-color:#2196f3; background:radial-gradient(circle at 35% 35%, #2070c0, #0a3060); }
.chip-tray-btn[data-value="500"]  { border-color:#4caf50; background:radial-gradient(circle at 35% 35%, #2e7d32, #1a4a1a); }
.chip-tray-btn[data-value="10"]   { border-color:#26a69a; background:radial-gradient(circle at 35% 35%, #00897b, #004d40); }
.chip-tray-btn[data-value="1000"] { border-color:#ff7043; background:radial-gradient(circle at 35% 35%, #d84315, #6a1a00); }
.chip-tray-btn.selected { border-color:#ffd700 !important; }

/* Bet Grid — groups stacked, each group is 2×2 */
.bet-grid {
  display:flex;
  flex-direction:column;
  gap:4px;
}
.card-group {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  position:relative;
}
.bet-card {
  position:relative; cursor:pointer;
  border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  background:#12141f; transition:all .25s ease;
  min-height:72px;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:8px 4px 6px 30px;
  border-top:3px solid transparent;
}
.card-group > .bet-card:nth-child(1) { border-bottom-right-radius:24px; }
.card-group > .bet-card:nth-child(2) { border-bottom-left-radius:24px; }
.card-group > .bet-card:nth-child(3) { border-top-right-radius:24px; }
.card-group > .bet-card:nth-child(4) { border-top-left-radius:24px; }
/* Shimmer only on bonus cards */
.bc-cf::after, .bc-pa::after, .bc-ch::after, .bc-ct::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(
    105deg,
    transparent 40%,
    rgba(255,255,255,.05) 45%,
    rgba(255,255,255,.1) 50%,
    rgba(255,255,255,.05) 55%,
    transparent 60%
  );
  transform:translateX(-150%);
  animation:card-shimmer 8s ease-in-out infinite;
  pointer-events:none; z-index:1;
}
@keyframes card-shimmer {
  0%, 80% { transform:translateX(-150%); }
  100% { transform:translateX(150%); }
}
.bet-card:hover { border-color:rgba(255,215,0,.25); background:#181a28; }
.bet-card.active {
  border-color:rgba(255,215,0,.5);
  box-shadow:0 0 16px rgba(255,215,0,.15);
}

/* Number cards — border + tinted background */
.bc-1  { border-top-color:#4A9EDB; background:linear-gradient(170deg, rgba(74,158,219,.1) 0%, #12141f 60%); }
.bc-2  { border-top-color:#E8C820; background:linear-gradient(170deg, rgba(232,200,32,.1) 0%, #12141f 60%); }
.bc-5  { border-top-color:#D45CA0; background:linear-gradient(170deg, rgba(212,92,160,.1) 0%, #12141f 60%); }
.bc-10 { border-top-color:#9060C8; background:linear-gradient(170deg, rgba(144,96,200,.1) 0%, #12141f 60%); }

/* Bonus cards — border + tinted background + staggered shimmer */
.bc-cf { border-top-color:#2848A8; background:linear-gradient(170deg, rgba(40,72,168,.12) 0%, #12141f 60%); }
.bc-pa { border-top-color:#D06030; background:linear-gradient(170deg, rgba(208,96,48,.12) 0%, #12141f 60%); }
.bc-ch { border-top-color:#286838; background:linear-gradient(170deg, rgba(40,104,56,.12) 0%, #12141f 60%); }
.bc-ct { border-top-color:#C82040; background:linear-gradient(170deg, rgba(200,32,64,.12) 0%, #12141f 60%); }
.bc-cf::after { animation-delay:0s; }
.bc-pa::after { animation-delay:2s; }
.bc-ch::after { animation-delay:4s; }
.bc-ct::after { animation-delay:6s; }

.card-number {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.8rem; color:#fff;
  line-height:1;
}
.bc-1 .card-number { color:#4A9EDB; }
.bc-2 .card-number { color:#E8C820; }
.bc-5 .card-number { color:#D45CA0; }
.bc-10 .card-number { color:#9060C8; }

.card-bonus-name {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1rem; color:#fff;
  letter-spacing:1px; text-align:center;
  line-height:1.1;
}
.bc-cf .card-bonus-name { color:#5080E0; }
.bc-pa .card-bonus-name { color:#E88050; }
.bc-ch .card-bonus-name { color:#50B868; }
.bc-ct .card-bonus-name { color:#E84050; }

/* Payout ribbon on the left edge */
.card-payout {
  position:absolute; left:0; top:0; bottom:0;
  width:26px;
  display:flex; align-items:center; justify-content:center;
  writing-mode:vertical-lr; text-orientation:mixed;
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:.6rem; letter-spacing:.5px;
  color:rgba(255,255,255,.5);
  border-radius:0 9px 9px 0;
  pointer-events:none;
}
.bc-1  .card-payout { background:rgba(74,158,219,.12); color:rgba(74,158,219,.7); }
.bc-2  .card-payout { background:rgba(232,200,32,.12); color:rgba(232,200,32,.7); }
.bc-5  .card-payout { background:rgba(212,92,160,.12); color:rgba(212,92,160,.7); }
.bc-10 .card-payout { background:rgba(144,96,200,.12); color:rgba(144,96,200,.7); }
.bc-cf .card-payout { background:rgba(40,72,168,.15); color:rgba(80,128,224,.7); }
.bc-pa .card-payout { background:rgba(208,96,48,.15); color:rgba(232,128,80,.7); }
.bc-ch .card-payout { background:rgba(40,104,56,.15); color:rgba(80,184,104,.7); }
.bc-ct .card-payout { background:rgba(200,32,64,.15); color:rgba(232,64,80,.7); }
.card-bet-amount {
  position:absolute; bottom:2px; left:50%;
  transform:translateX(-50%);
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:.55rem; color:#ffd700;
  pointer-events:none; white-space:nowrap;
  z-index:2;
  display:none;
}
.card-chips {
  display:flex; align-items:center; justify-content:flex-end;
  position:absolute;
  bottom:4px; right:28px;
  pointer-events:none;
}
.chip-stack {
  position:relative;
  display:flex; align-items:center; justify-content:center;
}
.placed-chip {
  width:28px; height:28px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #d4a017, #8a6a10);
  border:2.5px solid #ffd700;
  box-shadow:0 2px 5px rgba(0,0,0,.45), inset 0 1px 2px rgba(255,255,255,.2);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(0,0,0,.6), 0 -1px 0 rgba(255,255,255,.15) inset;
  position:relative;
}
.placed-chip::before {
  content:''; position:absolute; inset:3px;
  border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.2);
}
.chip-label {
  font-size:.5rem; font-weight:800; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  z-index:1; line-height:1;
}
.chip-tier-1   { border-color:#ccc; background:radial-gradient(circle at 35% 35%, #777, #3a3a3a); }
.chip-tier-5   { border-color:#e05252; background:radial-gradient(circle at 35% 35%, #c04040, #6a1a1a); }
.chip-tier-10  { border-color:#26a69a; background:radial-gradient(circle at 35% 35%, #00897b, #004d40); }
.chip-tier-20  { border-color:#f9a825; background:radial-gradient(circle at 35% 35%, #d48e00, #7a5200); }
.chip-tier-50  { border-color:#ab47bc; background:radial-gradient(circle at 35% 35%, #8e24aa, #4a0e6a); }
.chip-tier-100 { border-color:#2196f3; background:radial-gradient(circle at 35% 35%, #2070c0, #0a3060); }
.chip-tier-500 { border-color:#4caf50; background:radial-gradient(circle at 35% 35%, #2e7d32, #1a4a1a); }

/* Top Slot Badge — top-left corner */
.top-slot-badge {
  position:absolute; top:3px; left:30px;
  transform:scale(0);
  min-width:24px; padding:1px 5px;
  border-radius:5px;
  background:linear-gradient(135deg, #ffd700, #ff9800);
  color:#1a1a2e; font-family:Arial, Helvetica, sans-serif;
  font-size:.6rem; font-weight:900;
  text-align:center;
  opacity:0;
  pointer-events:none; z-index:6;
  box-shadow:0 2px 8px rgba(255,215,0,.6);
}
.top-slot-badge.visible {
  opacity:1; transform:scale(1);
}

/* Bet Actions */
.bet-actions {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:6px 0;
  transition:opacity .3s ease;
}
.action-btn {
  padding:8px 16px; border:none; border-radius:8px;
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:.6rem; cursor:pointer; transition:all .15s;
  letter-spacing:1px;
}
.btn-clear {
  background:linear-gradient(135deg, #3a1a1a, #2a1010);
  color:#ff6b6b;
  border:1px solid rgba(255,107,107,.2);
}
.btn-clear:hover { background:linear-gradient(135deg, #4a2020, #3a1515); }
.btn-double {
  background:linear-gradient(135deg, #1a3a1a, #102a10);
  color:#6bff6b;
  border:1px solid rgba(107,255,107,.2);
}
.btn-double:hover { background:linear-gradient(135deg, #204a20, #153a15); }
.btn-repeat {
  background:linear-gradient(135deg, #2a2a1a, #1a1a10);
  color:#ffd700;
  border:1px solid rgba(255,215,0,.2);
}
.btn-repeat:hover { background:linear-gradient(135deg, #3a3a20, #2a2a15); }
.btn-repeat.hidden, .btn-double.hidden { display:none; }
.btn-auto {
  background:linear-gradient(135deg, #1a2a3a, #102030);
  color:#64b5f6;
  border:1px solid rgba(100,181,246,.2);
}
.btn-auto:hover { background:linear-gradient(135deg, #203a4a, #153040); }
.btn-auto.active-auto {
  background:linear-gradient(135deg, #1a3a2a, #102a20);
  color:#4caf50; border-color:rgba(76,175,80,.4);
  animation:auto-pulse 1.5s ease-in-out infinite;
}
@keyframes auto-pulse {
  0%,100% { box-shadow:0 0 4px rgba(76,175,80,.2); }
  50% { box-shadow:0 0 12px rgba(76,175,80,.5); }
}
.action-btn:disabled { opacity:.3; cursor:not-allowed; }
.total-bet-box {
  font-size:.65rem; color:#888;
  font-family:Arial, Helvetica, sans-serif;
}
.total-bet-box span { color:#ffd700; font-weight:700; }

/* ─── Quick-play group button (centered in 2×2 grid) ─── */
.quick-group-btn {
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:40px; height:40px; border-radius:50%;
  border:2px solid rgba(255,215,0,.3);
  background:radial-gradient(circle at 40% 35%, #1e1a0e, #100c06);
  color:#ffd700;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  z-index:4;
  transition:all .2s ease;
  box-shadow:0 3px 14px rgba(0,0,0,.7), 0 0 6px rgba(255,215,0,.08);
}
.quick-group-btn:hover {
  transform:translate(-50%, -50%) scale(1.15);
  border-color:rgba(255,215,0,.6);
  box-shadow:0 0 20px rgba(255,215,0,.25), 0 3px 14px rgba(0,0,0,.7);
}
.quick-group-btn:active { transform:translate(-50%, -50%) scale(.92); }
.qgb-svg { width:18px; height:18px; filter:drop-shadow(0 0 3px rgba(255,215,0,.3)); }

/* ─── Auto-play badge on button ─── */
.btn-auto { position:relative; }
.auto-badge {
  position:absolute; top:-6px; left:-6px;
  min-width:18px; height:18px;
  padding:0 4px;
  border-radius:9px;
  background:linear-gradient(135deg, #4caf50, #2e7d32);
  color:#fff;
  font-size:.55rem; font-weight:900;
  line-height:18px; text-align:center;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
  pointer-events:none;
  animation:badge-pop .3s ease;
}
.auto-badge.hidden { display:none; }
@keyframes badge-pop {
  0% { transform:scale(0); }
  60% { transform:scale(1.3); }
  100% { transform:scale(1); }
}

/* ─── Auto-play Modal ─── */
.autoplay-overlay {
  position:fixed; inset:0; z-index:250;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
}
.autoplay-overlay.hidden { display:none; }
.autoplay-modal {
  background:linear-gradient(170deg, #1a1d2a, #0e1018);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px; padding:20px 16px;
  max-width:360px; width:90vw;
  box-shadow:0 20px 60px rgba(0,0,0,.7);
}
.autoplay-header {
  display:flex; align-items:center; justify-content:center;
  gap:8px; position:relative; margin-bottom:8px;
}
.autoplay-icon {
  font-size:.7rem; font-weight:900; letter-spacing:2px;
  color:#ffd700;
  padding:4px 10px;
  background:rgba(255,215,0,.1);
  border-radius:6px;
  border:1px solid rgba(255,215,0,.2);
}
.autoplay-title {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.1rem; color:#fff;
}
.autoplay-close {
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  background:none; border:none; color:#888;
  font-size:1.2rem; cursor:pointer; padding:4px;
}
.autoplay-close:hover { color:#fff; }
.autoplay-subtitle {
  text-align:center; font-size:.65rem; color:#888;
  letter-spacing:1px; font-weight:700; margin-bottom:14px;
}
.autoplay-cost { color:#ffd700; margin-left:4px; }
.autoplay-options {
  display:flex; gap:8px; justify-content:center; flex-wrap:wrap;
}
.autoplay-opt {
  flex:1; min-width:56px; max-width:72px;
  padding:10px 4px 8px;
  border-radius:12px; border:2px solid rgba(255,215,0,.2);
  background:linear-gradient(180deg, #1e2038, #14162a);
  cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  transition:all .2s;
}
.autoplay-opt:hover {
  border-color:rgba(255,215,0,.5);
  background:linear-gradient(180deg, #2a2c48, #1a1c30);
  transform:translateY(-2px);
}
.opt-rounds {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.4rem; color:#ffd700;
  line-height:1;
}
.opt-label {
  font-size:.4rem; font-weight:800; color:#888;
  letter-spacing:2px;
}
.opt-total {
  font-size:.5rem; font-weight:700; color:rgba(255,215,0,.5);
  margin-top:2px;
}

/* ─── Auto-play modal: active state ─── */
.auto-active-info { text-align:center; padding:10px 0 6px; }
.auto-active-info.hidden { display:none; }
.auto-setup-info.hidden { display:none; }
.auto-active-status {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  margin-bottom:14px;
}
.auto-active-label {
  font-size:.55rem; font-weight:900; letter-spacing:3px;
  color:#4caf50;
  padding:3px 12px;
  background:rgba(76,175,80,.12);
  border:1px solid rgba(76,175,80,.25);
  border-radius:20px;
}
.auto-active-rounds {
  font-family:Arial, Helvetica, sans-serif;
  font-size:2.2rem; font-weight:900; color:#ffd700;
  line-height:1.1;
}
.auto-active-sublabel {
  font-size:.6rem; color:#888; font-weight:700;
  letter-spacing:1px; text-transform:uppercase;
}
.auto-stop-modal-btn {
  width:100%; padding:12px;
  border:none; border-radius:12px;
  background:linear-gradient(135deg, #c0392b, #922b21);
  color:#fff; font-weight:900; font-size:.8rem;
  letter-spacing:1px; cursor:pointer;
  transition:all .2s;
  box-shadow:0 4px 14px rgba(192,57,43,.3);
}
.auto-stop-modal-btn:hover {
  background:linear-gradient(135deg, #e74c3c, #c0392b);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(231,76,60,.4);
}

/* ─── Auto-bet change warning modal ─── */
.autochange-overlay {
  position:fixed; inset:0; z-index:260;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
}
.autochange-overlay.hidden { display:none; }
.autochange-modal {
  background:linear-gradient(170deg, #1e2030, #0e1018);
  border:1px solid rgba(255,200,60,.15);
  border-radius:18px; padding:24px 20px 20px;
  max-width:320px; width:88vw;
  box-shadow:0 20px 60px rgba(0,0,0,.7), 0 0 40px rgba(255,200,60,.06);
  text-align:center;
}
.autochange-icon-wrap {
  width:48px; height:48px; margin:0 auto 12px;
  border-radius:50%;
  background:rgba(255,193,7,.12);
  border:2px solid rgba(255,193,7,.3);
  display:flex; align-items:center; justify-content:center;
}
.autochange-icon { width:24px; height:24px; color:#ffc107; }
.autochange-title {
  font-family:Arial, Helvetica, sans-serif;
  font-size:1rem; font-weight:900; color:#fff;
  margin:0 0 8px;
}
.autochange-text {
  font-size:.7rem; color:#aaa; line-height:1.4;
  margin:0 0 14px;
}
.autochange-amounts {
  display:flex; align-items:center; justify-content:center;
  gap:10px; margin:0 0 18px;
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
}
.autochange-old {
  font-size:1.1rem; color:#ff6b6b;
  text-decoration:line-through; opacity:.7;
}
.autochange-arrow { font-size:1rem; color:#888; }
.autochange-new { font-size:1.3rem; color:#4caf50; }
.autochange-actions {
  display:flex; gap:8px;
}
.autochange-btn {
  flex:1; padding:10px 8px;
  border:none; border-radius:10px;
  font-weight:800; font-size:.7rem;
  letter-spacing:.5px; cursor:pointer;
  transition:all .2s;
}
.autochange-confirm {
  background:linear-gradient(135deg, #2e7d32, #1b5e20);
  color:#fff;
  box-shadow:0 3px 10px rgba(46,125,50,.3);
}
.autochange-confirm:hover {
  background:linear-gradient(135deg, #388e3c, #2e7d32);
  transform:translateY(-1px);
}
.autochange-stop {
  background:linear-gradient(135deg, #c0392b, #922b21);
  color:#fff;
  box-shadow:0 3px 10px rgba(192,57,43,.3);
}
.autochange-stop:hover {
  background:linear-gradient(135deg, #e74c3c, #c0392b);
  transform:translateY(-1px);
}

/* Flash Win animation on card */
.bet-card.flash-win {
  animation:flash-card .4s ease 3;
}
@keyframes flash-card {
  0%, 100% { box-shadow:0 0 0 rgba(255,215,0,0); }
  50% { box-shadow:0 0 20px rgba(255,215,0,.6), inset 0 0 10px rgba(255,215,0,.2); }
}

/* ═══ BONUS OVERLAYS ═══ */
.bonus-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.85);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  overflow:hidden;
  transition:opacity .3s, visibility .3s;
}
.bonus-overlay.active { opacity:1; visibility:visible; }
.bonus-inner {
  background:linear-gradient(145deg, #1e2040, #151828);
  border:2px solid rgba(255,215,0,.2);
  border-radius:16px; padding:16px;
  max-width:90vw; max-height:90vh;
  overflow:hidden; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.cashhunt-scene {
  max-width:98vw; width:98vw; padding:8px 4px 36px;
  max-height:95vh;
  position:relative;
}
.bonus-inner h2 {
  font-family:Arial, Helvetica, sans-serif; color:#ffd700;
  font-size:1.1rem; margin-bottom:6px;
}
.bonus-subtitle { color:#aaa; font-size:.75rem; margin-bottom:6px; }

/* ─── TOP SLOT BANNER (generic for all bonus overlays) ─── */
.bonus-ts-banner {
  margin:6px 16px 10px; padding:8px 16px;
  background:linear-gradient(90deg, rgba(255,215,0,.08), rgba(255,215,0,.18), rgba(255,215,0,.08));
  border:1px solid rgba(255,215,0,.3); border-radius:10px;
  font-family:Arial, Helvetica, sans-serif; font-size:.7rem; font-weight:700;
  color:#ffd700; text-align:center; letter-spacing:2px;
  position:relative; overflow:hidden;
  visibility:hidden; opacity:0; height:0; margin:0; padding:0; border:0;
  transition:opacity .2s;
}
.bonus-ts-banner.visible {
  visibility:visible; opacity:1;
  height:auto; margin:6px 16px 10px; padding:8px 16px;
  border:1px solid rgba(255,215,0,.3);
}
.bonus-ts-banner::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,215,0,.15), transparent);
  animation:ts-shimmer 1.5s ease-in-out infinite;
}
@keyframes ts-shimmer {
  0% { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
.bonus-ts-val {
  color:#ff6040; font-size:.9rem; margin-left:6px;
  text-shadow:0 0 10px rgba(255,96,64,.5);
}
.bonus-result {
  display:flex; flex-direction:column; align-items:center;
  gap:4px;
  visibility:hidden; opacity:0;
  height:0; margin:0; overflow:hidden;
  transition:opacity .2s;
}
.bonus-result.visible {
  visibility:visible; opacity:1;
  height:auto; margin-top:12px; overflow:visible;
}
.result-label { font-size:.8rem; color:#aaa; letter-spacing:2px; }
.result-value {
  font-family:Arial, Helvetica, sans-serif; font-size:2.5rem;
  font-weight:900; color:#ffd700;
  text-shadow:0 0 20px rgba(255,215,0,.5);
}

/* ─── COIN FLIP ─── */
.coinflip-scene {
  max-width:360px; width:92vw; padding:0!important;
  border:none!important; overflow:visible;
  background:linear-gradient(170deg, #0c0e28, #151838, #0c0e28)!important;
  border-radius:20px!important;
  box-shadow:0 0 80px rgba(60,40,180,.2), 0 24px 60px rgba(0,0,0,.7)!important;
}
.cf-header {
  padding:18px 20px 6px; display:flex; align-items:center;
  gap:10px; justify-content:center;
}
.cf-icon { font-size:1.6rem; filter:drop-shadow(0 0 6px rgba(255,215,0,.4)); }
.cf-title {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.2rem; color:#ffd700;
  letter-spacing:3px;
  text-shadow:0 0 14px rgba(255,215,0,.5);
}
.cf-ts-banner {
  margin:4px 20px 6px; padding:5px 14px;
  background:linear-gradient(90deg, rgba(255,215,0,.15), rgba(255,215,0,.05));
  border:1px solid rgba(255,215,0,.3); border-radius:8px;
  font-size:.65rem; font-weight:700; color:#ffd700;
  text-align:center; letter-spacing:1px;
  visibility:hidden; opacity:0; height:0; margin:0; padding:0; border:0;
  transition:opacity .2s;
}
.cf-ts-banner.visible {
  visibility:visible; opacity:1;
  height:auto; margin:4px 20px 6px; padding:5px 14px;
  border:1px solid rgba(255,215,0,.3);
}
.cf-ts-val { color:#ff6040; font-size:.85rem; margin-left:4px; }
.cf-sides-preview {
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:8px 20px 14px;
}
.cf-side-card {
  flex:1; padding:10px 8px; border-radius:12px;
  text-align:center;
}
.cf-side-red {
  background:linear-gradient(135deg, rgba(220,30,30,.2), rgba(180,20,20,.06));
  border:1px solid rgba(255,80,80,.25);
}
.cf-side-blue {
  background:linear-gradient(135deg, rgba(30,90,220,.2), rgba(20,60,180,.06));
  border:1px solid rgba(80,140,255,.25);
}
.cf-side-label {
  display:block; font-size:.5rem; color:rgba(255,255,255,.4);
  letter-spacing:2px; font-weight:700; margin-bottom:2px;
}
.cf-side-value {
  display:block; font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.4rem;
}
.cf-side-red .cf-side-value { color:#ff5252; text-shadow:0 0 8px rgba(255,80,80,.3); }
.cf-side-blue .cf-side-value { color:#42a5f5; text-shadow:0 0 8px rgba(66,165,245,.3); }
.cf-vs {
  font-family:Arial, Helvetica, sans-serif; font-weight:900; font-size:.65rem;
  color:rgba(255,255,255,.2); flex-shrink:0;
}
.cf-coin-stage {
  display:flex; flex-direction:column; align-items:center;
  padding:6px 0 20px; position:relative;
}
.cf-coin-container {
  perspective:900px; width:160px; height:160px;
}
.cf-coin {
  width:100%; height:100%; position:relative;
}
.cf-coin-face {
  position:absolute; inset:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:5px solid #ffd700;
  box-shadow:
    0 6px 24px rgba(0,0,0,.6),
    inset 0 -4px 12px rgba(0,0,0,.3),
    inset 0 4px 8px rgba(255,255,255,.1),
    0 0 0 1px rgba(255,215,0,.15);
}
.cf-face-red {
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(circle at 50% 50%, #e53935, #b71c1c);
}
.cf-face-blue {
  background:
    radial-gradient(circle at 40% 30%, rgba(255,255,255,.12), transparent 50%),
    radial-gradient(circle at 50% 50%, #1e88e5, #0d47a1);
}
.cf-coin-inner-ring {
  position:absolute; inset:10px; border-radius:50%;
  border:2px solid rgba(255,215,0,.3);
  pointer-events:none;
}
.cf-coin-text {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:2.2rem; color:#fff; z-index:1;
  text-shadow:0 2px 6px rgba(0,0,0,.5);
}
.cf-coin-shadow {
  width:110px; height:14px; margin-top:10px;
  background:radial-gradient(ellipse, rgba(0,0,0,.35), transparent 70%);
  border-radius:50%;
  transition:width .3s, opacity .3s;
}
.cf-result {
  display:none;
}
.cf-result-label {
  font-size:.55rem; color:rgba(255,255,255,.35);
  letter-spacing:4px; font-weight:700;
}
.cf-result-value {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:2.4rem; color:#ffd700;
  text-shadow:0 0 24px rgba(255,215,0,.5);
  margin:4px 0;
}
.cf-win-amount {
  font-family:Arial, Helvetica, sans-serif; font-weight:700;
  font-size:1.1rem; color:#4caf50;
  text-shadow:0 0 8px rgba(76,175,80,.3);
  visibility:hidden; opacity:0;
  transition:opacity .2s;
}
.cf-win-amount.visible { visibility:visible; opacity:1; }

/* Cash Hunt Grid */
.cashhunt-grid {
  display:grid;
  grid-template-columns:repeat(9, 1fr);
  gap:2px; padding:4px;
  overflow:hidden;
  width:100%;
  max-width:min(98vw, calc(9 * 38px + 8 * 2px));
  margin:0 auto;
  -webkit-mask-image: none;
  mask-image: none;
}
.cashhunt-grid.ch-shuffling {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.ch-timer {
  display:flex; align-items:center; gap:8px;
  width:70%; max-width:260px;
  position:absolute;
  bottom:6px; left:50%; transform:translateX(-50%);
  padding:5px 12px;
  background:rgba(10,12,20,.8);
  border:1px solid rgba(255,215,0,.25);
  border-radius:16px;
  z-index:20;
  visibility:hidden; opacity:0;
  transition:opacity .25s;
}
.ch-timer.visible {
  visibility:visible; opacity:1;
}
.ch-timer-bar {
  flex:1; height:6px; background:rgba(255,255,255,.1);
  border-radius:3px; overflow:hidden;
}
.ch-timer-fill {
  height:100%; width:100%; background:linear-gradient(90deg, #ffd700, #ff8c00);
  border-radius:3px; transform-origin:left;
  transition:width .3s linear;
}
.ch-timer-fill.urgent { background:linear-gradient(90deg, #ff4444, #ff0000); }
.ch-timer-text {
  font-size:.75rem; font-weight:700; color:#ffd700;
  min-width:2em; text-align:center;
}
.cashhunt-cell {
  perspective:400px;
  cursor:default;
  max-width:38px;
  max-height:38px;
}
.ch-cell-inner {
  width:100%;
  aspect-ratio:1;
  position:relative;
  transform-style:preserve-3d;
}
.ch-face {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:3px; font-weight:700;
  backface-visibility:hidden;
}
/* Front face — tier colors */
.ch-front {
  font-size:.5rem;
  border:1px solid #222;
}
.ch-front.ch-common {
  background:linear-gradient(145deg, #252838, #1a1d2a);
  border-color:#333;
  color:#98a0b8;
}
.ch-front.ch-bronze {
  background:linear-gradient(145deg, #352418, #241810);
  border-color:#bbb;
  color:#e0d8cc;
}
.ch-front.ch-silver {
  background:linear-gradient(145deg, #343848, #242838);
  border-color:#c0c8d8;
  color:#e8ecf8;
  text-shadow:0 0 3px rgba(180,200,255,.25);
}
.ch-front.ch-gold {
  background:linear-gradient(145deg, #3e3000, #281c00);
  border-color:#ffd700;
  color:#ffd700;
  text-shadow:0 0 4px rgba(255,215,0,.35);
}
.ch-front.ch-highlight {
  animation:ch-pulse-glow 1.5s ease-in-out infinite alternate;
  border-color:#ff6a00 !important;
  color:#ffcc00 !important;
  text-shadow:0 0 8px rgba(255,160,0,.6), 0 0 16px rgba(255,100,0,.3) !important;
  font-weight:800;
}
@keyframes ch-pulse-glow {
  from { box-shadow:inset 0 0 6px rgba(255,160,0,.2), 0 0 4px rgba(255,160,0,.15); }
  to { box-shadow:inset 0 0 10px rgba(255,160,0,.35), 0 0 10px rgba(255,160,0,.25); }
}
/* Pachinko slot highlight */
.pa-slot-label {
  font-size:.55rem; font-weight:700; color:rgba(255,215,0,.6);
  text-align:center; padding:2px 0; transition:all .3s ease;
}
.pa-slot-double {
  color:rgba(255,100,100,.7) !important;
  text-shadow:0 0 4px rgba(255,60,60,.4);
}
.pa-slot-highlight {
  color:#ffcc00 !important;
  text-shadow:0 0 6px rgba(255,160,0,.6);
  animation:ch-pulse-glow 1.5s ease-in-out infinite alternate;
}
/* Pachinko DOUBLE announcement */
.pach-double-announce {
  position:absolute; left:50%; top:40%; transform:translate(-50%,-50%);
  z-index:20; font-size:1.4rem; font-weight:900; color:#ff4444;
  text-shadow:0 0 20px rgba(255,60,60,.8), 0 0 40px rgba(255,60,60,.4);
  letter-spacing:.05em; pointer-events:none;
  background:rgba(0,0,0,.6); padding:8px 18px; border-radius:12px;
  border:2px solid rgba(255,80,80,.5);
}
/* Back face */
.ch-back {
  background:linear-gradient(145deg, #1a2438, #0e1628);
  border:1px solid #2a3450;
  transform:rotateY(180deg);
}
.ch-back .ch-emoji {
  font-size:.85rem; line-height:1;
  opacity:.2;
  filter:grayscale(50%);
}
/* Pickable state */
.cashhunt-cell.ch-pickable { cursor:pointer; }
.cashhunt-cell.ch-pickable:hover .ch-back {
  background:linear-gradient(145deg, #1e3050, #142040);
  border-color:#4da6ff;
  box-shadow:0 0 10px rgba(77,166,255,.4), inset 0 0 8px rgba(77,166,255,.1);
}
/* Selected cell */
.cashhunt-cell.selected { z-index:10; }
.cashhunt-cell.selected .ch-back,
.cashhunt-cell.selected .ch-front {
  border-color:#00e5ff !important;
  box-shadow:
    0 0 12px rgba(0,229,255,.6),
    0 0 24px rgba(0,229,255,.3),
    inset 0 0 6px rgba(0,229,255,.15) !important;
}
.cashhunt-cell.selected .ch-front {
  background:linear-gradient(145deg, #003040, #001820) !important;
  color:#00e5ff !important;
  text-shadow:0 0 8px rgba(0,229,255,.5) !important;
}
.cashhunt-cell.selected .ch-back {
  background:linear-gradient(145deg, #003040, #001820) !important;
  color:#00e5ff !important;
}

/* Pachinko */
.pachinko-board {
  position:relative; width:100%; max-width:400px; margin:0 auto;
  border-radius:8px; overflow:hidden;
  border:1px solid rgba(100,120,255,0.15);
  contain:paint;
  box-shadow:0 4px 24px rgba(0,0,0,0.4), inset 0 0 40px rgba(50,60,150,0.08);
}
.pachinko-board canvas { width:100%; display:block; }
.pachinko-slots {
  display:flex; gap:3px; justify-content:center;
  flex-wrap:nowrap; margin-top:8px; padding:0 2px;
}
.pachinko-slot {
  flex:1; min-width:0; padding:6px 2px; border-radius:6px;
  background:linear-gradient(180deg, #2a2d50, #1e2040);
  color:#c0c0e0; text-align:center;
  font-family:Arial, Helvetica, sans-serif;
  font-size:.55rem; font-weight:700;
  border:1px solid rgba(100,120,255,0.15);
  transition:all 0.3s ease;
}
.pachinko-slot.hit {
  background:linear-gradient(180deg, #ffd700, #f9a825) !important;
  color:#1a1a2e !important;
  box-shadow:0 0 16px rgba(255,215,0,0.6), 0 0 4px rgba(255,215,0,0.3);
  transform:scale(1.05);
}
.double-slot {
  background:linear-gradient(180deg, #c62828, #8e0000);
  color:#ffcdd2; border-color:rgba(255,100,100,0.3);
}

/* ═══ CRAZY TIME BONUS ═══ */
.crazytime-scene {
  max-width:500px; width:92vw;
  max-height:92vh; overflow-y:auto; overflow-x:hidden;
  padding:0 !important;
  border:none !important;
  background:linear-gradient(170deg, #0c0618, #141030, #0c0618) !important;
  border-radius:16px !important;
  box-shadow:0 0 60px rgba(180,40,40,.12), 0 16px 48px rgba(0,0,0,.8) !important;
  scrollbar-width:none;
}
.crazytime-scene::-webkit-scrollbar { display:none; }
.ct-header {
  padding:12px 16px 2px;
  display:flex; align-items:center; gap:10px;
  justify-content:center;
}
.ct-header-icon { font-size:1.5rem; filter:drop-shadow(0 0 6px rgba(255,215,0,.4)); }
.ct-header-title {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.3rem; color:#ffd700;
  letter-spacing:3px;
  text-shadow:0 0 14px rgba(255,215,0,.5);
}
.ct-subtitle {
  text-align:center; padding:0 16px;
  font-size:.7rem; color:#aaa; margin-bottom:2px;
}
.ct-mult-display {
  display:flex; align-items:center; justify-content:center; gap:8px;
  visibility:hidden; opacity:0;
  height:0; margin:0; padding:0; border:0;
  transition:opacity .3s;
}
.ct-mult-display.visible {
  visibility:visible; opacity:1;
  height:auto; margin:4px 16px 2px; padding:6px 16px;
  border:1px solid rgba(255,60,40,.3);
  background:linear-gradient(90deg, rgba(255,60,40,.06), rgba(255,60,40,.15), rgba(255,60,40,.06));
  border-radius:10px;
}
.ct-mult-label {
  font-size:.55rem; font-weight:700; color:#aaa;
  letter-spacing:2px;
}
.ct-mult-value {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:1.2rem; color:#ff6040;
  text-shadow:0 0 10px rgba(255,96,64,.5);
}
.ct-wheel-container {
  position:relative; width:100%; max-width:440px; margin:0 auto;
  padding:8px 0;
}
/* Sin transición en la ruleta CT: evita “animación” al togglear glow al girar */
.ct-wheel-container { transition:none; }
.ct-wheel-container.wheel--spinning {
  filter:drop-shadow(0 0 22px rgba(200,60,80,.14));
}
.ct-spinner {
  position:relative; width:100%; aspect-ratio:1;
  transform-origin:50% 50%;
  will-change:transform;
  backface-visibility:hidden;
}
.ct-spinner canvas { width:100%!important; height:100%!important; display:block; }
.ct-pointer {
  position:absolute; top:2px; left:50%; transform:translateX(-50%);
  z-index:10;
}
.ct-center-label {
  position:absolute; top:50%; left:50%;
  transform:translate(-50%, -50%);
  z-index:12; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  line-height:1;
}
.ct-center-crazy {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:.8rem; color:#ffd700;
  text-shadow:0 0 8px rgba(255,215,0,.6), 0 2px 4px rgba(0,0,0,.8);
  letter-spacing:1px;
}
.ct-center-time {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:.65rem; color:#ffd700;
  text-shadow:0 0 8px rgba(255,215,0,.6), 0 2px 4px rgba(0,0,0,.8);
  letter-spacing:2px;
}
.ct-special-announce {
  text-align:center; padding:0 16px;
  visibility:hidden; opacity:0;
  height:0; overflow:hidden;
  transition:opacity .3s;
}
.ct-special-announce.visible {
  visibility:visible; opacity:1;
  height:auto; padding:8px 16px;
}
.ct-special-text {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:2rem; color:#ff4040;
  text-shadow:0 0 30px rgba(255,60,40,.8), 0 0 60px rgba(255,60,40,.4);
  letter-spacing:4px;
}
@keyframes ct-pulse-glow {
  0%, 100% { text-shadow:0 0 20px rgba(255,60,40,.6), 0 0 40px rgba(255,60,40,.3); }
  50% { text-shadow:0 0 40px rgba(255,60,40,1), 0 0 80px rgba(255,60,40,.6), 0 0 120px rgba(255,60,40,.3); }
}
.ct-special-text.pulsing {
  animation:ct-pulse-glow .6s ease-in-out infinite;
}

/* ─── Flapper selector buttons ─── */
.ct-flapper-select {
  text-align:center; padding:8px 16px 4px;
}
.ct-flapper-select.hidden { display:none; }
.ct-select-label {
  font-size:.65rem; font-weight:700; color:#ccc;
  letter-spacing:2px; margin-bottom:8px;
  display:flex; align-items:center; justify-content:center; gap:8px;
}
.ct-select-timer {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,#e74c3c,#c0392b);
  color:#fff; font-size:.85rem; font-weight:900;
  box-shadow:0 0 12px rgba(231,76,60,.5);
  transition:transform .15s;
}
.ct-select-timer.urgent {
  background:linear-gradient(135deg,#ff1744,#d50000);
  box-shadow:0 0 20px rgba(255,23,68,.7);
  animation:ct-timer-pulse .5s ease-in-out infinite;
}
@keyframes ct-timer-pulse {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.15); }
}
.ct-select-btns { display:flex; justify-content:center; gap:14px; }
.ct-sel-btn {
  width:56px; height:56px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15); cursor:pointer;
  font-size:1rem; font-weight:900; letter-spacing:1px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.05);
  transition:all .25s; position:relative;
  color:#fff;
}
.ct-sel-btn:hover { transform:scale(1.1); }
.ct-sel-btn.selected {
  transform:scale(1.18);
  border-width:4px;
  box-shadow:0 0 24px var(--sel-glow), inset 0 0 12px rgba(255,255,255,.1);
  animation:ct-sel-lock .5s ease forwards;
}
.ct-sel-btn.ct-sel-disabled {
  opacity:.25; pointer-events:none; transform:scale(.9);
  filter:grayscale(.8);
}
@keyframes ct-sel-lock {
  0% { box-shadow:0 0 0 var(--sel-glow); }
  50% { box-shadow:0 0 40px var(--sel-glow), 0 0 60px var(--sel-glow); }
  100% { box-shadow:0 0 20px var(--sel-glow); }
}
.ct-sel-green {
  border-color:#4CAF50; --sel-glow:rgba(76,175,80,.6);
  background:radial-gradient(circle at 40% 35%, rgba(76,175,80,.25), rgba(76,175,80,.05));
}
.ct-sel-yellow {
  border-color:#FFC107; --sel-glow:rgba(255,193,7,.6);
  background:radial-gradient(circle at 40% 35%, rgba(255,193,7,.25), rgba(255,193,7,.05));
}
.ct-sel-blue {
  border-color:#2196F3; --sel-glow:rgba(33,150,243,.6);
  background:radial-gradient(circle at 40% 35%, rgba(33,150,243,.25), rgba(33,150,243,.05));
}

/* ─── 3 flappers on wheel ─── */
.ct-flappers-wrap {
  position:absolute; top:8px; left:0; right:0;
  aspect-ratio:1; pointer-events:none; z-index:15;
}
.ct-flapper {
  position:absolute; top:0; left:50%;
  width:0; height:50%;
  transform-origin:bottom center;
  transition:opacity .4s ease, transform .4s ease;
}
.ct-fl-pos-green  { transform:translateX(-50%) rotate(-12deg); }
.ct-fl-pos-yellow { transform:translateX(-50%) rotate(0deg); }
.ct-fl-pos-blue   { transform:translateX(-50%) rotate(12deg); }
.ct-fl-tri {
  display:block; width:20px; height:26px;
  margin-left:-10px; margin-top:-10px;
  clip-path:polygon(50% 100%, 0 0, 100% 0);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.8));
  transition:transform .3s ease, filter .3s ease;
}
.ct-fl-green  { background:linear-gradient(180deg, #81C784, #2E7D32); }
.ct-fl-yellow { background:linear-gradient(180deg, #FFD54F, #F57F17); }
.ct-fl-blue   { background:linear-gradient(180deg, #64B5F6, #1565C0); }
.ct-flapper.ct-fl-chosen .ct-fl-tri {
  filter:drop-shadow(0 0 10px rgba(255,215,0,.9)) drop-shadow(0 0 20px rgba(255,215,0,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transform:scale(1.3);
}
.ct-flapper.ct-fl-locked {
  transition:opacity .6s ease, transform .6s ease;
  opacity:0;
}
.ct-fl-pos-green.ct-fl-locked  { transform:translateX(-50%) rotate(-12deg) translateY(-20px); }
.ct-fl-pos-yellow.ct-fl-locked { transform:translateX(-50%) rotate(0deg) translateY(-20px); }
.ct-fl-pos-blue.ct-fl-locked   { transform:translateX(-50%) rotate(12deg) translateY(-20px); }

/* ─── Flapper results ─── */
.ct-flapper-results {
  display:flex; justify-content:center; gap:12px;
  padding:4px 16px;
  visibility:hidden; opacity:0;
  height:0; overflow:hidden;
  transition:opacity .3s;
}
.ct-flapper-results.visible {
  visibility:visible; opacity:1;
  height:auto; padding:8px 16px;
}
.ct-fr-item {
  display:flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:8px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.1);
}
.ct-fr-item.ct-fr-chosen {
  border-color:#ffd700;
  background:rgba(255,215,0,.1);
  box-shadow:0 0 12px rgba(255,215,0,.3);
}
.ct-fr-dot {
  width:10px; height:10px; border-radius:50%;
  flex-shrink:0;
}
.ct-fr-val {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:.9rem; color:#fff;
}

/* ═══ WIN POPUP ═══ */
.win-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
}
.win-overlay.hidden { display:none; }
.win-popup-content {
  text-align:center; padding:30px 50px;
  background:linear-gradient(145deg, #2a1a00, #1a1200);
  border:3px solid #ffd700;
  border-radius:20px;
  box-shadow:0 0 60px rgba(255,215,0,.3);
}
.win-stars { font-size:2rem; margin-bottom:8px; }
.win-amount {
  font-family:Arial, Helvetica, sans-serif; font-weight:900;
  font-size:2.5rem; color:#ffd700;
  text-shadow:0 0 20px rgba(255,215,0,.5);
}
.win-detail { color:#aaa; font-size:.8rem; margin-top:6px; }

/* ═══ CONFETTI ═══ */
.confetti-canvas {
  position:fixed; inset:0; z-index:999;
  pointer-events:none;
}

/* ═══ TOP SLOT SLIDE IN/OUT ═══ */
.top-slot {
  transition:transform .6s cubic-bezier(.34,1.56,.64,1), opacity .5s ease,
             max-height .6s cubic-bezier(.34,1.56,.64,1), padding .4s ease,
             margin .4s ease, border-width .3s ease,
             box-shadow .5s ease;
  overflow:hidden;
}
.top-slot.ts-hidden {
  transform:translateY(-20px) scale(.92);
  opacity:0;
  max-height:0;
  padding:0 !important;
  margin:0 !important;
  border-width:0 !important;
  pointer-events:none;
  box-shadow:none;
}
.top-slot.ts-visible {
  transform:translateY(0) scale(1);
  opacity:1;
  max-height:130px;
  pointer-events:auto;
}

/* ═══ RESPONSIVE ═══ */

/* Mobile layout */
@media (max-width:599px) {
  /* Wheel always full size */
  .wheel-wrapper { max-width:88vw; }
  .wheel-toolbar { max-width:88vw; }

  /* TopSlot floats over the wheel on mobile */
  .top-slot.ts-visible {
    position:absolute;
    top:4px; left:50%; transform:translateX(-50%) scale(1);
    z-index:30;
    max-height:130px;
    max-width:230px;
    box-shadow:0 8px 32px rgba(0,0,0,.7), 0 0 16px rgba(255,215,0,.08);
  }
  .top-slot.ts-hidden {
    position:absolute;
    top:4px; left:50%; transform:translate(-50%, -120%) scale(.9);
    z-index:30;
    max-width:230px;
  }

  /* Game area fills remaining viewport */
  #gameArea {
    height:calc(100vh - 44px);
    height:calc(100dvh - 44px);
    min-height:0;
    padding-bottom:0;
  }

  /* Betting section floats over the wheel */
  .betting-section {
    position:absolute;
    bottom:0; left:0; right:0;
    z-index:20;
    background:linear-gradient(0deg, rgba(10,12,18,.95) 50%, rgba(10,12,18,.82) 80%, transparent 100%);
    padding:6px 8px 12px;
    transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  }

  .bet-card { min-height:56px; }
  .card-number { font-size:1.5rem; }
  .card-bonus-name { font-size:.85rem; }

  /* Smooth phase transitions */
  .bet-card, .card-number, .card-bonus-name {
    transition:all .35s ease;
  }

  /* Results strip floats above betting panel */
  .results-strip {
    position:absolute;
    bottom:0; left:0; right:0;
    z-index:21;
    background:rgba(10,12,18,.92);
    border-radius:0;
    padding:3px 8px;
    transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .35s ease;
  }

  /* Results strip sits just above betting panel */
  .betting-section { bottom:28px; }

  /* Spin phase: disable interaction, dim everything */
  #gameArea.phase-spinning .chip-tray { opacity:.35; pointer-events:none; }
  #gameArea.phase-spinning .bet-actions { opacity:.35; pointer-events:none; }
  #gameArea.phase-spinning .bet-card { pointer-events:none; opacity:.5; }
  #gameArea.phase-spinning .quick-group-btn { opacity:.3; pointer-events:none; }

}

/* Small phones */
@media (max-width:380px) {
  .bet-grid { gap:2px; }
  .card-number { font-size:1.1rem; }
  .card-bonus-name { font-size:.65rem; }
  .bet-card { min-height:42px; padding:3px 2px 2px; }
  .card-payout { width:18px; font-size:.38rem; }
  .chip-tray-btn { width:28px; height:28px; border-width:2px; }
  .chip-tray-btn span { font-size:.5rem; }
  .chip-tray { gap:3px; }
  .logo { font-size:.7rem; }
  .balance-amount { font-size:.8rem; }
  .ts-body { padding:6px 12px 8px; }
  .reel { width:52px; height:42px; }
  .reel-inner span { height:42px; font-size:.95rem; }
  .pointer-indicator { width:22px; height:28px; }
  .placed-chip { width:22px; height:22px; border-width:2px; }
  .chip-label { font-size:.4rem; }
}

/* Tablets and small laptops */
@media (min-width:600px) {
  #gameArea { max-width:560px; padding:12px 16px 0; }
  .bet-grid { gap:10px; }
  .card-group { gap:6px; }
  .card-number { font-size:2rem; }
  .card-bonus-name { font-size:1.1rem; }
  .bet-card { min-height:85px; }
  .card-payout { width:28px; font-size:.55rem; }
  .chip-tray-btn { width:40px; height:40px; }
  .chip-tray-btn span { font-size:.65rem; }
  .wheel-wrapper { max-width:460px; }
  .ch-front { font-size:.55rem; }
  .quick-group-btn { width:46px; height:46px; }
  .qgb-svg { width:22px; height:22px; }
}

/* Desktop */
@media (min-width:900px) {
  body { align-items:center; }
  #gameArea { max-width:640px; padding:16px 24px 0; }
  .wheel-wrapper { max-width:500px; }
  .wheel-toolbar { max-width:500px; }
  .bet-grid { gap:10px; }
  .bet-card { min-height:95px; border-radius:12px; }
  .card-number { font-size:2.2rem; }
  .card-bonus-name { font-size:1.2rem; }
  .card-payout { width:30px; font-size:.6rem; }
  .bonus-inner { max-width:600px; }
  .cashhunt-scene { max-width:75vw; width:auto; min-width:420px; padding:12px; }
  .ch-front { font-size:.6rem; }
  .cashhunt-grid { gap:3px; padding:6px; max-width:min(75vw, calc(9 * 44px + 8 * 3px)); }
  .cashhunt-cell { max-width:44px; max-height:44px; }
}

/* ─── Mantenimiento (apuestas pausadas) ─── */
.maintenance-banner {
  flex-shrink:0;
  padding:7px 14px;
  text-align:center;
  font-size:.62rem; font-weight:800; line-height:1.4;
  letter-spacing:.04em;
  color:#1a0e06;
  background:linear-gradient(90deg,#ffc040,#ff7030);
  border-bottom:1px solid rgba(0,0,0,.15);
  box-shadow:0 2px 12px rgba(255,120,40,.25);
}
.maintenance-banner.hidden { display:none !important; }
.betting-section.maintenance-lock .chip-tray,
.betting-section.maintenance-lock .bet-grid {
  pointer-events:none;
  opacity:0.48;
  filter:grayscale(0.25);
}

/* ─── ADMIN PANEL ─── */
.admin-panel {
  width:100%; border-radius:12px; overflow:hidden;
  background:linear-gradient(180deg, #1a1028, #100818);
  border:1px solid rgba(200,80,255,.28);
  margin-top:6px;
  box-shadow:0 4px 20px rgba(0,0,0,.35);
}
.admin-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 12px; background:linear-gradient(90deg, rgba(140,40,200,.2), rgba(80,40,120,.15));
  border-bottom:1px solid rgba(200,100,255,.15);
}
.admin-title {
  font-size:.72rem; font-weight:800; color:#e8b0ff;
  letter-spacing:.06em;
}
.admin-toggle-btn {
  background:rgba(0,0,0,.2); border:1px solid rgba(200,100,255,.25);
  border-radius:6px; color:#d8a0ff;
  font-size:.65rem; cursor:pointer; padding:4px 10px;
  touch-action:manipulation;
}
.admin-body { padding:10px 12px 12px; max-height:min(70vh, 520px); overflow-y:auto; }
.admin-section {
  margin-bottom:14px; padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.admin-section:last-child { border-bottom:none; margin-bottom:0; padding-bottom:0; }
.admin-section-title {
  font-size:.62rem; font-weight:800; color:#b8a0d0;
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:8px;
}
.admin-section--warn .admin-section-title { color:#ffb060; }
.admin-help {
  font-size:.58rem; color:#888; line-height:1.45; margin-bottom:8px;
}
.admin-label {
  display:block; font-size:.55rem; font-weight:700; color:#777;
  margin-bottom:4px; text-transform:uppercase; letter-spacing:.05em;
}
.admin-textarea {
  width:100%; box-sizing:border-box;
  padding:8px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  background:#12101c; color:#ddd; font-size:.62rem; font-family:inherit;
  resize:vertical; min-height:44px; margin-bottom:8px;
}
.admin-live-line {
  font-size:.6rem; color:#ccc; line-height:1.4; margin-bottom:6px;
  word-break:break-word;
}
.admin-live-row {
  display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap;
}
.admin-pause-badge {
  font-size:.55rem; font-weight:800; padding:4px 10px; border-radius:20px;
  background:rgba(80,200,120,.15); color:#8fdfb0; border:1px solid rgba(80,200,120,.3);
}
.admin-pause-badge.is-paused {
  background:rgba(255,100,60,.15); color:#ff9a70; border-color:rgba(255,100,60,.35);
}
.admin-small-btn {
  padding:5px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:#252030; color:#bbb; font-size:.55rem; font-weight:700;
  cursor:pointer; font-family:inherit; touch-action:manipulation;
}
.admin-pause-actions {
  display:flex; flex-wrap:wrap; gap:8px;
}
.admin-action-btn {
  flex:1; min-width:120px; padding:9px 12px; border-radius:8px;
  border:none; font-size:.6rem; font-weight:800; font-family:inherit;
  cursor:pointer; touch-action:manipulation;
}
.admin-action-btn--danger {
  background:linear-gradient(180deg,#c04030,#882018); color:#fff;
}
.admin-action-btn--ok {
  background:linear-gradient(180deg,#308050,#205038); color:#fff;
}
.admin-section--links { text-align:center; border-bottom:none; }
.admin-ext-link {
  font-size:.58rem; font-weight:700; color:#a8c8ff;
  text-decoration:underline; text-underline-offset:2px;
}
.admin-grid {
  display:grid; grid-template-columns:repeat(8, 1fr); gap:4px;
  margin-bottom:8px;
}
@media (max-width: 480px) {
  .admin-grid { grid-template-columns:repeat(4, 1fr); }
}
.admin-seg-btn {
  padding:6px 0; border-radius:6px; border:1px solid rgba(255,255,255,.1);
  background:#1a1a2a; color:#fff; font-size:.65rem; font-weight:700;
  cursor:pointer; transition:all .15s;
  text-align:center;
}
.admin-seg-btn:hover { border-color:rgba(200,50,255,.5); background:#2a1a3a; }
.admin-seg-btn.active {
  background:#6a20a0; border-color:#d080ff;
  box-shadow:0 0 8px rgba(200,50,255,.4);
}
.admin-seg-btn.an { color:#ffd700; }
.admin-seg-btn.ab { color:#ff80c0; }
.admin-status {
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.admin-status-text {
  font-size:.6rem; color:#888; flex:1;
}
.admin-status-text.forced { color:#ff6040; font-weight:700; }
.admin-clear-btn {
  padding:3px 10px; border-radius:4px;
  background:rgba(255,60,40,.15); border:1px solid rgba(255,60,40,.3);
  color:#ff6040; font-size:.6rem; font-weight:600;
  cursor:pointer; transition:all .15s;
}
.admin-clear-btn:hover { background:rgba(255,60,40,.3); }
.admin-ts-row {
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-bottom:4px;
}
.admin-select {
  flex:1; min-width:72px; max-width:140px;
  padding:6px 8px; border-radius:6px; border:1px solid rgba(255,255,255,.12);
  background:#141420; color:#e8e8f0; font-size:.62rem; font-weight:600;
}

/* ─── Session block (sin usuario / sin saldo) ─── */
.session-block {
  position:fixed; inset:0; z-index:9998;
  background:rgba(6,8,14,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.session-block.hidden { display:none; }
.session-block-inner {
  max-width:360px; text-align:center;
  padding:28px 24px; border-radius:16px;
  background:linear-gradient(180deg,#1a1d2a,#12141c);
  border:1px solid rgba(255,215,0,.2);
  box-shadow:0 12px 40px rgba(0,0,0,.5);
}
.session-block-title { font-weight:800; color:#ffd700; margin-bottom:12px; font-size:1rem; }
.session-block-msg { font-size:.85rem; color:#c8c8c8; line-height:1.45; }

/* ─── Ronda (texto base; pill en .wheel-toolbar-round) ─── */
.round-code-badge {
  font-size:.58rem; font-weight:800; letter-spacing:.06em;
  color:#a8d4ff; text-shadow:0 0 8px rgba(100,180,255,.25);
  white-space:nowrap;
}

.chat-toggle {
  padding:5px 14px; border-radius:999px;
  background:linear-gradient(180deg,#2a3040,#1a1e2a);
  border:1px solid rgba(255,215,0,.25);
  color:#e8e8e8; font-size:.62rem; font-weight:700;
  cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.chat-body {
  position:absolute; top:100%; right:0; margin-top:6px; width:min(340px, 90vw);
  background:#101320; border:1px solid rgba(255,255,255,.08);
  border-radius:14px; overflow:hidden;
  display:flex; flex-direction:column;
  max-height:min(440px, 65vh); box-shadow:0 10px 32px rgba(0,0,0,.7);
  z-index:170;
}
.chat-body.hidden { display:none; }
.chat-messages {
  flex:1; overflow-y:auto; padding:8px 10px; min-height:120px; max-height:min(350px, 50vh);
  display:flex; flex-direction:column; gap:3px;
}
/* ─ Chat rows ─ */
.chat-row {
  display:flex; align-items:flex-end; gap:4px; position:relative;
  padding-bottom:2px; /* espacio para reacciones flotantes */
}
.chat-row.has-reactions { padding-bottom:16px; }
.chat-row-other { justify-content:flex-start; }
.chat-row-self  { justify-content:flex-end; }
/* ─ Bubbles ─ */
.chat-msg {
  position:relative; max-width:80%; padding:5px 10px; border-radius:12px;
  word-break:break-word; line-height:1.4; cursor:pointer;
}
.chat-msg:active { filter:brightness(1.15); }
.chat-msg-other {
  background:#1b2030;
  border:1px solid rgba(255,255,255,.05);
  border-bottom-left-radius:3px;
}
.chat-msg-self {
  background:#1a2d55;
  border:1px solid rgba(80,140,255,.12);
  border-bottom-right-radius:3px;
}
.chat-row-mod { justify-content:center; }
.chat-msg-mod {
  max-width:92%;
  background:linear-gradient(160deg,#4a2818,#2a1510);
  border:1px solid rgba(255,140,60,.4);
  border-radius:12px;
  cursor:default;
}
.chat-msg-mod .chat-user {
  color:#ffb060 !important;
  font-weight:800;
  letter-spacing:.08em;
  font-size:.56rem;
}
.chat-msg-mod .chat-text { color:#fff4e8; }
.chat-msg .chat-user {
  font-size:.58rem; font-weight:800; letter-spacing:.02em;
  margin-bottom:1px; display:block;
}
.chat-msg-other .chat-user { color:#5a9fdf; }
.chat-msg-self .chat-user { color:#80b8f0; }
.chat-msg .chat-text {
  display:block; color:#d8d8d8; font-size:.72rem;
}
/* Reply preview inside bubble */
.chat-reply-preview {
  font-size:.56rem; color:#888; padding:3px 6px; margin-bottom:3px;
  border-left:2px solid #3a6aaa; border-radius:2px;
  background:rgba(255,255,255,.04);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
  cursor:pointer; transition:background .15s;
}
.chat-reply-preview:hover { background:rgba(255,255,255,.08); }
.reply-preview-name {
  display:block; font-weight:800; color:#5aa0e0; font-size:.54rem;
  margin-bottom:1px; letter-spacing:.02em;
}
/* Blink animation when scrolling to a replied message */
.chat-msg-blink {
  animation: msgBlink .5s ease-in-out 3;
}
@keyframes msgBlink {
  0%, 100% { background-color:inherit; }
  50% { background-color:rgba(90,160,224,.25); }
}
/* ─ Emoji reaction button (smiley on hover) ─ */
.chat-emoji-btn {
  background:none; border:none; font-size:.78rem; cursor:pointer;
  opacity:0; padding:2px; line-height:1; flex-shrink:0;
  transition:opacity .2s, transform .15s;
  align-self:center;
}
.chat-row:hover .chat-emoji-btn { opacity:.55; }
.chat-emoji-btn:hover { opacity:1 !important; transform:scale(1.25); }

/* ── Reactions on message (WhatsApp style) ── */
.chat-reactions {
  position:absolute; bottom:-11px;
  display:flex; gap:0; padding:1px 4px;
  border-radius:10px;
  background:#1a1e2e; border:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
  z-index:5; white-space:nowrap;
}
.chat-row-other .chat-reactions { left:6px; }
.chat-row-self  .chat-reactions { right:6px; }
.chat-reactions:empty { display:none; }
.reaction-chip {
  background:none; border:none; cursor:pointer;
  font-size:.68rem; padding:1px 2px; line-height:1.2;
  display:flex; align-items:center; gap:1px;
  transition:transform .1s;
}
.reaction-chip:hover { transform:scale(1.15); }
.reaction-chip .rc-count {
  font-size:.5rem; color:#7788aa; font-weight:600;
}
.reaction-chip.reaction-mine .rc-count {
  color:#6eaaff;
}

/* ── Reaction Picker ── */
.reaction-picker {
  position:fixed; z-index:9999;
  display:flex; align-items:center; gap:2px;
  padding:4px 6px; border-radius:20px;
  background:#1b1f30;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 4px 20px rgba(0,0,0,.7);
  animation: rpIn .15s ease-out;
}
@keyframes rpIn {
  0% { opacity:0; transform:scale(0.8) translateY(6px); }
  100% { opacity:1; transform:scale(1) translateY(0); }
}
.reaction-pick-btn {
  background:none; border:none; font-size:1.15rem; cursor:pointer;
  width:30px; height:30px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; transition:background .12s, transform .1s;
}
.reaction-pick-btn:hover {
  background:rgba(255,255,255,.1);
  transform:scale(1.3);
}
/* Reply bar above input */
.chat-reply-bar {
  display:none; align-items:center; gap:4px; padding:4px 8px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(40,70,130,.15); font-size:.58rem; color:#7aa8d8;
}
.chat-reply-bar.visible { display:flex; }
.reply-bar-text {
  flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.reply-bar-close {
  background:none; border:none; color:#888; cursor:pointer; font-size:.7rem; padding:2px 4px;
}
.reply-bar-close:hover { color:#fff; }
/* Input row */
.chat-input-row { display:flex; gap:4px; padding:6px 8px; border-top:1px solid rgba(255,255,255,.08); }
.chat-input-row input {
  flex:1; min-width:0; padding:7px 10px; border-radius:10px;
  border:1px solid rgba(255,255,255,.12); background:#0a0c12; color:#eee; font-size:.68rem;
}
.chat-input-row input:focus { border-color:rgba(80,140,255,.4); outline:none; }
.chat-input-row input:disabled { opacity:.45; }
.chat-send {
  padding:6px 12px; border-radius:10px;
  background:linear-gradient(180deg,#3050b0,#2040a0); border:none; color:#fff; font-size:.62rem; font-weight:700;
  cursor:pointer; transition:background .2s;
}
.chat-send:hover { background:linear-gradient(180deg,#3a60c0,#2850b0); }
.chat-send:disabled { opacity:.4; cursor:not-allowed; }

/* ─── Historial de rondas (drawer overlay, panel desde la izquierda) ─── */
.history-drawer {
  position:fixed; inset:0; z-index:9990;
  pointer-events:none; visibility:hidden;
}
.history-drawer.open {
  pointer-events:auto; visibility:visible;
}
.history-drawer-backdrop {
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  opacity:0; transition:opacity .28s ease;
}
.history-drawer.open .history-drawer-backdrop { opacity:1; }
.history-drawer-panel {
  position:absolute; top:0; left:0; right:auto; width:min(320px, 88vw); height:100%;
  max-height:100dvh;
  background:#12151c; border-right:1px solid rgba(255,215,0,.15);
  display:flex; flex-direction:column; min-height:0;
  box-shadow:8px 0 32px rgba(0,0,0,.45);
  transform:translateX(-100%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.history-drawer.open .history-drawer-panel { transform:translateX(0); }
.history-drawer-head {
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
  padding:10px 12px 10px; border-bottom:1px solid rgba(255,255,255,.08);
  flex-shrink:0;
}
.drawer-head-row {
  display:flex; justify-content:space-between; align-items:flex-start; gap:10px;
}
.drawer-tabs {
  display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0;
}
.drawer-tab {
  padding:8px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05); color:#aaa; font-size:.62rem; font-weight:800;
  cursor:pointer; font-family:inherit; letter-spacing:.3px;
  transition:background .2s, color .2s, border-color .2s;
}
.drawer-tab--active {
  background:rgba(255,215,0,.12); border-color:rgba(255,215,0,.35);
  color:#ffd700;
}
.drawer-tab:active { transform:scale(0.98); }
.drawer-tour-btn {
  width:100%; padding:9px 10px; border-radius:8px; border:1px dashed rgba(255,215,0,.35);
  background:rgba(255,215,0,.06); color:#e8c85c; font-size:.62rem; font-weight:800;
  cursor:pointer; font-family:inherit; letter-spacing:.25px;
  transition:background .2s, border-color .2s;
}
.drawer-tour-btn:active { background:rgba(255,215,0,.12); }
.history-close {
  padding:6px 12px; border-radius:8px; border:1px solid rgba(255,255,255,.15);
  background:#1e2230; color:#ccc; font-size:.72rem; cursor:pointer;
  flex-shrink:0; align-self:flex-start;
}
.drawer-pane {
  flex:1; min-height:0; display:flex; flex-direction:column;
  overflow:hidden;
}
/* El atributo hidden queda anulado si el autor pone display:flex — hay que reforzarlo */
.drawer-pane[hidden] {
  display:none !important;
}
.history-list {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:10px 12px; font-size:.72rem;
}
.guide-scroll {
  flex:1; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  padding:12px 14px 20px;
  font-size:.68rem; line-height:1.45; color:#c8c8c8;
}
.guide-section { margin-bottom:16px; }
.guide-section:last-of-type { margin-bottom:10px; }
.guide-h {
  font-size:.74rem; font-weight:800; color:#ffd700;
  margin-bottom:6px; letter-spacing:.2px;
}
.guide-p { margin-bottom:8px; }
.guide-p:last-child { margin-bottom:0; }
.guide-ol, .guide-ul { padding-left:1.1rem; margin:0 0 8px; }
.guide-ol li, .guide-ul li { margin-bottom:5px; }
.guide-note {
  margin-top:8px; padding:8px 10px; border-radius:8px;
  background:rgba(255,215,0,.06); border:1px solid rgba(255,215,0,.12);
  color:#e0d4a8; font-size:.62rem;
}
.guide-table {
  width:100%; border-collapse:collapse; font-size:.62rem; margin:6px 0;
}
.guide-table th, .guide-table td {
  padding:6px 8px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08);
}
.guide-table th { color:#888; font-weight:700; font-size:.58rem; text-transform:uppercase; }
.guide-chip {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; border-radius:7px; font-weight:900; font-size:.68rem; color:#fff;
}
.guide-chip.g-n1  { background:#3178B0; }
.guide-chip.g-n2  { background:#B8960A; }
.guide-chip.g-n5  { background:#B84088; }
.guide-chip.g-n10 { background:#7048A8; }
.guide-footer {
  margin-top:14px; padding-top:12px; border-top:1px solid rgba(255,255,255,.08);
  text-align:center; color:#888; font-size:.6rem; font-style:italic;
}
.history-item {
  padding:0; margin-bottom:10px; border-radius:12px;
  background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.07);
  color:#ccc; line-height:1.4; overflow:hidden;
}
.history-item .hi-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:8px 12px; background:rgba(255,255,255,.03);
  border-bottom:1px solid rgba(255,255,255,.05);
}
.history-item .hi-round { color:#a8d4ff; font-weight:800; font-size:.68rem; }
.history-item .hi-time  { color:#666; font-size:.55rem; }
.history-item .hi-body  { padding:8px 12px 10px; }
.history-item .hi-result {
  display:flex; align-items:center; gap:8px; margin-bottom:4px;
}
.history-item .hi-seg {
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:8px;
  font-weight:900; font-size:.7rem; color:#fff; flex-shrink:0;
}
.history-item .hi-seg.seg-1  { background:#3178B0; }
.history-item .hi-seg.seg-2  { background:#B8960A; }
.history-item .hi-seg.seg-5  { background:#B84088; }
.history-item .hi-seg.seg-10 { background:#7048A8; }
.history-item .hi-seg.seg-CF { background:#2040A0; }
.history-item .hi-seg.seg-PA { background:#C05020; }
.history-item .hi-seg.seg-CH { background:#1E5830; }
.history-item .hi-seg.seg-CT { background:#B01838; }
.history-item .hi-type { color:#999; font-size:.6rem; text-transform:uppercase; }
.history-item .hi-ts {
  font-size:.58rem; color:#ffd86a; margin-top:2px;
}
.history-item .hi-bonus {
  display:inline-block; margin-top:4px; padding:2px 8px;
  border-radius:6px; font-size:.55rem; font-weight:700;
  background:rgba(255,215,0,.12); color:#ffd700; border:1px solid rgba(255,215,0,.2);
}

/* ─── Tour guiado (wizard inicial) ─── */
.wizard-overlay {
  position:fixed; inset:0; z-index:10050;
  display:flex; align-items:center; justify-content:center;
  padding:max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.wizard-overlay.hidden { display:none !important; }
.wizard-backdrop {
  position:absolute; inset:0; background:rgba(5,6,12,.85);
  backdrop-filter:blur(5px);
}
.wizard-card {
  position:relative; z-index:1;
  width:min(400px, 94vw);
  max-height:min(82dvh, 620px);
  display:flex; flex-direction:column;
  background:linear-gradient(165deg, #1e2233 0%, #12151c 100%);
  border:1px solid rgba(255,215,0,.25);
  border-radius:16px;
  box-shadow:0 20px 56px rgba(0,0,0,.6);
  padding:16px 18px 14px;
  overflow:hidden;
}
.wizard-progress {
  font-size:.58rem; font-weight:800; color:#666; letter-spacing:.14em;
  text-transform:uppercase; margin-bottom:6px;
}
.wizard-progress strong { color:#ffd700; font-weight:800; }
.wizard-title {
  font-size:.88rem; font-weight:800; color:#ffd700;
  margin-bottom:10px; line-height:1.3; flex-shrink:0;
}
.wizard-body {
  font-size:.72rem; line-height:1.52; color:#d4d4d4;
  white-space:pre-line;
  flex:1; min-height:0;
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  margin-bottom:10px; padding-right:6px;
}
.wizard-hint {
  font-size:.62rem; color:#c4b87a; line-height:1.45;
  padding:9px 11px; border-radius:10px;
  background:rgba(255,215,0,.08); border:1px solid rgba(255,215,0,.14);
  margin-bottom:12px; flex-shrink:0;
}
.wizard-hint:empty { display:none; }
.wizard-actions {
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  justify-content:flex-end; flex-shrink:0;
}
.wizard-btn {
  padding:10px 16px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:#2a3048; color:#e8e8e8; font-size:.65rem; font-weight:700;
  cursor:pointer; font-family:inherit;
  touch-action:manipulation;
}
.wizard-btn:active { transform:scale(0.98); }
.wizard-btn.wizard-primary {
  background:linear-gradient(180deg,#e0b028,#a07812);
  border-color:rgba(255,215,0,.45); color:#1a1408;
}
.wizard-btn.wizard-skip {
  margin-right:auto; background:transparent; color:#888;
  border-style:dashed; border-color:rgba(255,255,255,.2);
}

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(255,215,0,.2); border-radius:4px; }