/* Casino — saldo virtual + juegos provably fair. Reusa tokens de index.css. */ /* página scrolleable: el juego ocupa ~1 pantalla y el panel de abajo asoma (estilo Shuffle) */ /* overflow-x: CLIP (no hidden): clipea el desborde horizontal igual que hidden PERO no crea un contenedor de scroll → no rompe el position:sticky de la barra de saldo mobile. Con `hidden` el body se volvía scroll-container y la barra no quedaba fija al bajar. */ html, body { height: auto; min-height: 100%; overflow-x: clip; } .casino { position: relative; z-index: 2; } /* ==================== GATE (sin login) ==================== */ .casino-gate { min-height: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 24px; } .casino-gate .gate-emoji { font-size: 64px; } .casino-gate h1 { font-family: 'Bebas Neue', sans-serif; font-size: 40px; letter-spacing: 4px; } .casino-gate p { color: var(--text-dim); max-width: 420px; line-height: 1.6; } .casino-gate .gate-login { display: inline-flex; align-items: center; gap: 10px; font-family: 'Bebas Neue', sans-serif; font-size: 20px; letter-spacing: 2px; text-decoration: none; color: #0a0a0e; background: #53fc18; padding: 12px 30px; border-radius: 999px; box-shadow: 0 6px 24px rgba(83, 252, 24, 0.35); } /* ==================== SHELL (grilla: izq | [juego / panel] | der) ==================== */ /* Página scrolleable estilo Shuffle: el juego (columna del medio) ocupa ~1 pantalla y el panel inferior queda asomando debajo. Las columnas laterales son STICKY: quedan pegadas arriba mientras scrolleás el centro. */ .casino-shell { display: grid; grid-template-columns: 170px minmax(0, 1fr) 258px; gap: 14px; max-width: 1500px; margin: 0 auto; padding: 14px; align-items: start; /* clave: los laterales toman su alto de contenido y hacen sticky */ } /* IZQUIERDA: lista de originales (sticky) */ .casino-side { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 12px; display: flex; flex-direction: column; gap: 4px; position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; } /* CENTRO: juego (alto ~1 pantalla) + panel inferior asomando */ .casino-center { min-width: 0; display: flex; flex-direction: column; gap: 14px; } .side-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 2px; color: var(--text-dim); padding: 4px 8px 8px; } /* DERECHA: saldo + rakeback (sticky) */ .casino-right { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; padding: 14px; position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow-y: auto; } /* cada item del panel derecho en su propio recuadro, con aire entre ellos */ .bal-card { text-align: center; display: flex; flex-direction: column; gap: 14px; } .bal-top { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 9px; padding: 16px 12px 14px; } .bal-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 2px; color: var(--text-dim); } .bal-amount { font-family: 'Bebas Neue', sans-serif; font-size: 40px; line-height: 1.1; color: var(--gold); margin: 4px 0 0; transition: transform 0.15s; display: inline-flex; align-items: center; gap: 9px; /* moneda centrada con el número */ } .bal-amount.bump { transform: scale(1.12); } .bal-amount .coin { font-size: 36px; } /* Bob Coin como imagen (NO depende de la fuente de emoji, se ve en todos los dispositivos). Se dimensiona con font-size: 1em = diámetro. El círculo recorta las esquinas oscuras de la imagen. */ .coin { display: inline-block; width: 1em; height: 1em; vertical-align: -0.16em; border-radius: 50%; background: url('/img/bobcoin.png') center / cover no-repeat; box-shadow: 0 1px 2px rgba(0,0,0,0.4); } .pf-btn { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; color: #d8d8de; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 11px; padding: 12px; cursor: pointer; transition: all 0.15s; } .pf-btn:hover { color: #fff; border-color: var(--border-hot); background: rgba(255,255,255,0.07); } .pf-btn.off { opacity: 0.55; } .dev-box { display: flex; gap: 6px; } .dev-box input { flex: 1; min-width: 0; background: var(--bg-1); border: 1px solid var(--border); border-radius: 6px; color: #fff; padding: 6px; font-size: 12px; } .dev-box button { background: var(--gold); color: #000; border: none; border-radius: 6px; padding: 6px 10px; font-weight: 800; cursor: pointer; font-size: 12px; } .game-list { display: flex; flex-direction: column; gap: 6px; } .game-item { display: flex; align-items: center; justify-content: space-between; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 2px; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 11px 14px; cursor: pointer; transition: all 0.15s; text-align: left; } .game-item:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.03); } .game-item.active { color: #fff; background: rgba(255, 26, 60, 0.13); border-color: var(--border-hot); } .game-item:disabled { opacity: 0.4; cursor: not-allowed; } .game-item .soon { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; padding: 2px 6px; border-radius: 999px; background: rgba(255,201,64,0.14); color: var(--gold); } /* ==================== CENTRO: el juego (stage estilo Shuffle) ==================== */ .casino-main { /* alto contenido tipo Shuffle (no pantalla completa): el panel de abajo asoma. El fondo/borde/sombra viven en .casino-stage (que envuelve juego + barra). */ height: min(calc(100vh - var(--topbar-h) - 32px), 720px); min-height: 520px; min-width: 0; overflow: hidden; flex-shrink: 0; } .pane { height: 100%; display: none; } .pane.active { display: flex; } /* zona de juego: un punto más clara que los controles, como el "stage" de Shuffle */ .pk-board { background: rgba(255, 255, 255, 0.022); } /* ==================== PLINKO ==================== */ #pane-plinko { gap: 0; } .pk-controls { width: 280px; flex-shrink: 0; padding: 18px; display: flex; flex-direction: column; gap: 14px; border-right: 1px solid var(--border); /* si el panel supera el alto del stage (p. ej. modo auto con muchos campos), scrollea acá adentro en vez de recortarse contra el overflow:hidden del stage */ overflow-y: auto; min-height: 0; } .pk-field label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 1px; color: #c9c9d2; margin-bottom: 8px; font-weight: 600; } .seg { display: flex; gap: 6px; } .seg button { flex: 1; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1px; color: #e8e8ee; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; padding: 10px 0; cursor: pointer; transition: all 0.15s; } .seg button:hover { color: #fff; background: rgba(255, 255, 255, 0.09); border-color: var(--border-hot); } .seg button.on[data-risk="low"] { color: var(--green); border-color: var(--green); } .seg button.on[data-risk="classic"]{ color: #fff; border-color: var(--border-hot); } .seg button.on[data-risk="medium"] { color: #ff9b3d; border-color: #ff9b3d; } .seg button.on[data-risk="high"] { color: var(--red); border-color: var(--red); } /* Dificultad de Keno: dropdown (reemplaza los botones .seg; ahora muestra la selección y deja lugar para más niveles). color-scheme + option oscuras para que el popup no sea blanco. */ .kn-risk { width: 100%; box-sizing: border-box; cursor: pointer; color-scheme: dark; appearance: none; -webkit-appearance: none; -moz-appearance: none; font-family: 'Bebas Neue', sans-serif; font-size: 18px; letter-spacing: 1px; color: #fff; /* chevron custom (SVG inline) en vez de la flecha nativa fea */ background: rgba(255, 255, 255, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 12px center; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; padding: 10px 36px 10px 12px; transition: border-color 0.15s; } .kn-risk:hover, .kn-risk:focus { outline: none; border-color: var(--border-hot); } .kn-risk:disabled { opacity: 0.5; cursor: default; } .kn-risk option { background: var(--bg-1); color: #fff; } .rows-row { display: flex; align-items: center; gap: 12px; } .rows-row input[type=range] { flex: 1; accent-color: var(--red); } .rows-val { font-family: 'Bebas Neue', sans-serif; font-size: 22px; min-width: 30px; text-align: center; color: #fff; } .bet-input { display: flex; gap: 6px; } .bet-input input { flex: 1; min-width: 0; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; color: #fff; padding: 11px 12px; font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; } .bet-input input:focus { outline: none; border-color: var(--border-hot); } .bet-input button { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: #e8e8ee; padding: 0 13px; cursor: pointer; font-size: 14px; font-weight: 700; } .bet-input button:hover { color: #fff; background: rgba(255, 255, 255, 0.09); border-color: var(--border-hot); } .bet-btn { font-family: 'Bebas Neue', sans-serif; font-size: 24px; letter-spacing: 3px; color: #fff; background: linear-gradient(135deg, var(--red), var(--red-deep)); border: none; border-radius: 12px; padding: 16px; cursor: pointer; box-shadow: 0 6px 24px var(--red-glow); transition: all 0.15s; } .bet-btn:hover { transform: translateY(-1px); } .bet-btn:active { transform: translateY(1px); } .bet-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; } /* modo libre: apuesta 0, se juega gratis. Look sobrio (no el rojo de plata real). */ .bet-btn.free { background: linear-gradient(135deg, #2b6f6a, #1e4f57); box-shadow: 0 6px 24px rgba(43, 111, 106, 0.35); } .pk-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8e8e98; line-height: 1.55; } /* ==================== MODO AUTO ==================== */ /* toggle Manual / Auto arriba de los controles */ .mode-toggle { display: flex; gap: 6px; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 4px; } .mode-btn { flex: 1; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: var(--text-dim); background: transparent; border: none; border-radius: 7px; padding: 8px 0; cursor: pointer; transition: all 0.15s; } .mode-btn:hover { color: #fff; } .mode-btn.on { color: #fff; background: rgba(255, 26, 60, 0.16); } .mode-toggle.locked { opacity: 0.5; pointer-events: none; } .auto-block { display: flex; flex-direction: column; gap: 14px; } .auto-inf { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: #e8e8ee; padding: 0 13px; cursor: pointer; font-size: 17px; font-weight: 700; } .auto-inf:hover { color: #fff; border-color: var(--border-hot); } .auto-cfg { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; color: #d8d8de; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: all 0.15s; } .auto-cfg:hover { color: #fff; border-color: var(--border-hot); background: rgba(255,255,255,0.07); } /* botón iniciar/detener autoapuesta */ .auto-start { background: linear-gradient(135deg, var(--red), var(--red-deep)); box-shadow: 0 6px 24px var(--red-glow); } .auto-start.stop { background: linear-gradient(135deg, var(--red), var(--red-deep)); box-shadow: 0 6px 24px var(--red-glow); } /* dificultad bloqueada durante una ronda/autoapuesta */ .seg.locked { opacity: 0.45; pointer-events: none; } input[type=range]:disabled { opacity: 0.45; } /* modal Configurar Auto (reusa .pf-modal / .pf-card) */ .auto-card { max-width: 480px; } .auto-row { margin-bottom: 16px; } .auto-row > label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 7px; } .auto-seg { display: flex; gap: 6px; align-items: stretch; } .auto-seg button { font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 1px; color: #e8e8ee; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.13); border-radius: 8px; padding: 9px 16px; cursor: pointer; transition: all 0.15s; } .auto-seg button:hover { color: #fff; border-color: var(--border-hot); } .auto-seg button.on { color: #fff; background: rgba(226,17,46,0.20); border-color: var(--red); } .auto-pct { flex: 1; display: flex; align-items: center; gap: 4px; justify-content: flex-end; } .auto-pct input { width: 80px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: #fff; padding: 9px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 700; text-align: right; } .auto-pct input:disabled { opacity: 0.4; } .auto-pct span { color: var(--text-dim); font-family: 'JetBrains Mono', monospace; font-size: 13px; } .auto-stop { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: #fff; padding: 11px; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; } .auto-stop:focus, .auto-pct input:focus { outline: none; border-color: var(--border-hot); } .pk-board { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; } #pkCanvas { max-width: 100%; max-height: 100%; } .pk-sound { position: absolute; top: 14px; left: 16px; z-index: 3; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 15px; transition: all 0.15s; } .pk-sound:hover { border-color: var(--border-hot); } .pk-sound.off { opacity: 0.45; } /* últimas caídas: columna de chips de multiplicador a la derecha del tablero (dentro del card, estilo Shuffle). El más reciente arriba. */ .pk-recent { position: absolute; top: 14px; right: 12px; z-index: 3; display: flex; flex-direction: column; gap: 6px; pointer-events: none; } .pk-recent .pk-chip { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 12px; color: #160e05; text-align: center; min-width: 44px; padding: 5px 8px; border-radius: 7px; box-shadow: 0 2px 8px rgba(0,0,0,0.35); animation: chipIn 0.18s ease; } @keyframes chipIn { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } } /* chips de Dice/Limbo: verde si ganaste, neutro si perdiste (color por clase, no inline) */ .pk-chip.win { background: var(--green); color: #042b15; } .pk-chip.loss { background: var(--panel-solid); color: #cfcfd6; border: 1px solid var(--border); box-shadow: none; } .pk-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--panel-solid); border: 1px solid var(--border-hot); border-radius: 8px; padding: 7px 10px; transform: translate(-50%, -130%); font-family: 'JetBrains Mono', monospace; font-size: 12px; white-space: nowrap; box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .pk-tip .tip-mult { color: #fff; font-weight: 700; } .pk-tip .tip-chance { color: var(--text-dim); } /* ==================== TOASTS ==================== */ .toast-wrap { position: fixed; top: 78px; right: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; } .toast { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 10px; backdrop-filter: blur(8px); border: 1px solid var(--border); animation: toastIn 0.2s ease; } .toast.win { color: var(--green); background: rgba(0,230,118,0.12); border-color: rgba(0,230,118,0.4); } .toast.loss { color: var(--text-dim); background: rgba(255,255,255,0.04); } @keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } } /* ==================== PF MODAL ==================== */ .pf-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.7); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: 20px; } .pf-modal .pf-card { background: var(--panel-solid); border: 1px solid var(--border-hot); border-radius: 9px; padding: 26px; max-width: 520px; width: 100%; /* No pasar del alto de pantalla (mobile con varias tarjetas) → scroll interno. */ max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; /* el scroll del modal NO se encadena al fondo (no arrastra la página de atrás). */ overscroll-behavior: contain; } /* Con el menú abierto, el fondo queda clavado (solo scrollea el menú). */ body.menu-open { overflow: hidden; } .pf-card h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; letter-spacing: 2px; margin-bottom: 6px; } .pf-card .pf-sub { color: var(--text-dim); font-size: 13px; line-height: 1.5; margin-bottom: 18px; } .pf-row { margin-bottom: 14px; } .pf-row label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 5px; } .pf-row .mono { font-family: 'JetBrains Mono', monospace; font-size: 12px; word-break: break-all; color: #fff; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; padding: 9px; } .pf-row input.mono { width: 100%; } .pf-actions { display: flex; gap: 10px; margin-top: 18px; } .pf-actions button { flex: 1; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; border-radius: 10px; padding: 11px; cursor: pointer; border: 1px solid var(--border); } .pf-actions .rotate { color: #fff; background: linear-gradient(135deg, var(--red), var(--red-deep)); border: none; } .pf-actions .close { color: var(--text-dim); background: transparent; } .pf-revealed { margin-top: 16px; padding: 12px; border-radius: 10px; background: rgba(0,230,118,0.06); border: 1px solid rgba(0,230,118,0.25); } .pf-revealed .lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--green); letter-spacing: 1px; } .pf-revealed .val { font-family: 'JetBrains Mono', monospace; font-size: 11px; word-break: break-all; color: #fff; margin-top: 3px; } /* modal confirmar "max" (apostar TODO el saldo): contenido centrado + botón rojo a lo ancho */ .maxbet-card { text-align: center; max-width: 440px; } .maxbet-card .pf-sub { margin-bottom: 20px; } .maxbet-card #maxBetGo { display: block; width: 100%; } /* ==================== KENO ==================== */ .kn-board-wrap { gap: 18px; } .kn-actions { display: flex; gap: 8px; } .kn-actions button { flex: 1; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 8px; color: #e8e8ee; padding: 10px 0; cursor: pointer; font-size: 14px; font-weight: 700; } .kn-actions button:hover { color: #fff; background: rgba(255, 255, 255, 0.09); border-color: var(--border-hot); } /* durante una ronda (revelado/auto) los controles quedan deshabilitados y atenuados */ .kn-actions button:disabled, .bet-input button:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .kn-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; /* aire entre celdas (estilo Shuffle) */ width: min(100%, 720px); /* un poco más chico */ } .keno-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: clamp(16px, 2.4vw, 26px); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; color: #fff; cursor: pointer; transition: transform 0.1s, background 0.15s, color 0.15s, box-shadow 0.15s; user-select: none; } .keno-cell:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-hot); transform: translateY(-1px); } .keno-cell.selected { background: linear-gradient(135deg, var(--red), var(--red-deep)); color: #fff; border-color: transparent; box-shadow: 0 4px 16px var(--red-glow); } /* sorteado pero NO elegido: bolita clara y bien marcada (antes era solo una línea fina) */ .keno-cell.drawn { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.7); color: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, 0.28); transform: scale(1.04); } /* acierto (elegido Y sorteado): verde, gana a todo lo demás */ .keno-cell.hit { background: linear-gradient(135deg, var(--green), #00a152); color: #042b15; border-color: transparent; box-shadow: 0 0 22px rgba(0, 230, 118, 0.65); transform: scale(1.1); } .keno-cell.disabled { opacity: 0.5; pointer-events: none; } /* tabla de pagos estilo Shuffle: caja de multiplicador arriba + "Nx 💎" abajo */ .kn-paytable { display: flex; gap: 6px; justify-content: center; width: min(100%, 720px); } .kn-pay { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; text-align: center; } .kn-pay-mult { font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 12px; color: #fff; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 8px; padding: 9px 4px; transition: all 0.15s; white-space: nowrap; } .kn-pay-hits { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 700; color: var(--text-dim); display: flex; align-items: center; justify-content: center; gap: 4px; } .kn-gem { width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #8effc0, #16c264); box-shadow: 0 0 5px rgba(22, 194, 100, 0.6); display: inline-block; } /* fila ganadora: la caja del multiplicador acertado se prende en verde */ .kn-pay.on .kn-pay-mult { border-color: var(--green); background: rgba(0, 230, 118, 0.16); color: var(--green); box-shadow: 0 0 16px rgba(0, 230, 118, 0.35); transform: translateY(-2px); } .kn-pay.on .kn-pay-hits { color: var(--green); } /* barra/selector de estado (cuando no hay números elegidos): caja oscura full-width centrada, estilo Shuffle ("Seleccione 1-10 números para jugar"). */ .kn-pay-msg { color: var(--text-dim); font-size: 13px; text-align: center; width: 100%; padding: 18px 16px; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 6px; } /* mobile: con 11 casillas (0..10 aciertos) el ancho por celda es chico y los multiplicadores largos ("100x", "1000x") se salían de la caja. Achicamos fuente, padding y gap para que SIEMPRE entren. */ @media (max-width: 620px) { .kn-paytable { gap: 3px; } .kn-pay-mult { font-size: 9px; padding: 7px 1px; letter-spacing: -0.4px; } .kn-pay-hits { font-size: 9px; gap: 2px; } .kn-gem { width: 7px; height: 7px; } } /* ==================== MINES ==================== */ .mn-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 10px; width: min(94%, 540px); aspect-ratio: 1; } .mine-cell { display: flex; align-items: center; justify-content: center; font-size: clamp(20px, 4vw, 30px); background: var(--panel); border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: transform 0.1s, background 0.15s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } .mine-cell:hover:not(.revealed) { background: rgba(255,255,255,0.06); transform: translateY(-2px); border-color: var(--border-hot); } .mine-cell.revealed { cursor: default; } .mine-cell.gem { background: rgba(0,230,118,0.12); border-color: rgba(0,230,118,0.4); animation: pop 0.2s ease; } .mine-cell.mine { background: rgba(255,26,60,0.16); border-color: var(--border-hot); animation: pop 0.2s ease; } .mine-cell.mine.hit { box-shadow: 0 0 22px var(--red-glow); } .mine-cell.dim { opacity: 0.4; } @keyframes pop { from { transform: scale(0.6); } to { transform: scale(1); } } .mn-grid.locked { pointer-events: none; } .mn-status { display: flex; gap: 10px; } .mn-stat { flex: 1; background: var(--bg-1); border: 1px solid var(--border); border-radius: 10px; padding: 10px; text-align: center; } .mn-stat span { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--text-dim); display: block; } .mn-stat b { font-family: 'Bebas Neue', sans-serif; font-size: 22px; color: var(--gold); } .mn-cashout { background: linear-gradient(135deg, var(--green), #00a152); box-shadow: 0 4px 20px rgba(0,230,118,0.35); } .mn-random { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: #e8e8ee; box-shadow: none; font-size: 18px; letter-spacing: 1px; } .mn-random:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--border-hot); transform: translateY(-1px); } .mn-random:disabled { opacity: 0.5; cursor: not-allowed; } /* casilla marcada como auto-pick (modo auto de Mines) */ /* casilla auto-pick: SOLO color (sin ◎ en el medio). Azul cian para no confundir con el rojo (que significa mina/malo) ni con el verde de los aciertos. */ .mine-cell.planned { background: rgba(45,182,255,0.15); border-color: #2db6ff; box-shadow: inset 0 0 0 2px rgba(45,182,255,0.5); } /* resalte de TUS elegidas sobre el tablero ya revelado (auto) — bien marcado */ .mine-cell.pick { border-color: #7cd4ff !important; box-shadow: inset 0 0 0 3px #7cd4ff, 0 0 18px rgba(45,182,255,0.8); z-index: 2; } .mine-cell.planned { z-index: 2; } /* ==================== TOWER ==================== */ /* Escenario: la torre a la izquierda + la waifu asomada en una "ventana" de castillo (todo CSS) a la derecha. Sin cuadrícula: fondo limpio con glow rojo. */ .tw-board { position: relative; } .tw-stage { position: relative; width: min(96%, 680px); height: min(72vh, 580px); display: flex; align-items: center; justify-content: center; gap: 16px; padding: 18px; border-radius: 18px; background: radial-gradient(85% 65% at 50% -8%, rgba(180,18,45,0.22), transparent 60%), linear-gradient(180deg, #1f121a 0%, #160c12 55%, #0f090d 100%); border: 1px solid rgba(180,18,45,0.28); box-shadow: inset 0 0 90px rgba(0,0,0,0.6), 0 12px 44px rgba(0,0,0,0.55); } /* La torre tiene ALTURA FIJA: las 9 filas se reparten el alto por igual (flex:1), así mide lo mismo en cualquier dificultad. Solo cambia el ANCHO de cada ladrillo según las columnas (2 a 4), nunca la altura total. */ .tw-tower { --tw-cols: 4; flex: 1 1 auto; height: 100%; align-self: stretch; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; background: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0.45)); border: 1px solid rgba(255,255,255,0.05); } .tw-row { flex: 1 1 0; min-height: 0; display: flex; align-items: stretch; gap: 12px; } .tw-cells { flex: 1; display: grid; grid-template-columns: repeat(var(--tw-cols), 1fr); gap: 8px; } .tw-cell { height: 100%; min-height: 0; border-radius: 9px; background: linear-gradient(180deg, #2b1a23, #1c1119); border: 1px solid rgba(255,255,255,0.05); background-size: auto 90%; background-repeat: no-repeat; background-position: center; box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -5px 12px rgba(0,0,0,0.5); transition: box-shadow 0.12s, background-color 0.12s; } /* camino pre-elegido en modo AUTO */ .tw-cell.planned { background: rgba(0,230,118,0.16); border-color: #00e676; box-shadow: inset 0 0 0 2px rgba(0,230,118,0.55), 0 0 12px rgba(0,230,118,0.35); } /* fila actual = jugable: SOLO cambian los ladrillos (color/borde). Nada se mueve, ni se anima el marco — igual que Shuffle. */ /* OJO: scopear con :not(.reveal) para NO pisarle el background-image (llave/bomba) a las casillas reveladas — estas reglas tienen más especificidad que .tw-cell.key. */ .tw-row.current .tw-cell:not(.reveal) { cursor: pointer; background: linear-gradient(180deg, #3c1422, #2a0e18); border-color: var(--border-hot); box-shadow: inset 0 0 0 1px rgba(180,18,45,0.55); } .tw-row.current .tw-cell:not(.reveal):hover { background: linear-gradient(180deg, #511a2c, #38121f); box-shadow: inset 0 0 0 1px rgba(255,110,135,0.85); } /* filas aún no jugadas (arriba) y ya subidas (abajo) */ .tw-row.locked { opacity: 0.42; } .tw-row.done .tw-cell:not(.reveal) { background: linear-gradient(180deg, #241620, #170e15); } /* ladrillo revelado: llave (seguro) o bomba */ .tw-cell.reveal { cursor: default; } .tw-cell.key { background-color: rgba(0,230,118,0.22); border-color: #00e676; background-image: url('/img/tower/key.png'); box-shadow: inset 0 0 14px rgba(0,230,118,0.35), 0 0 12px rgba(0,230,118,0.3); animation: pop 0.2s ease; } .tw-cell.bomb { background-color: rgba(180,18,45,0.38); border-color: #ff3b5c; background-image: url('/img/tower/bomb.png'); box-shadow: inset 0 0 14px rgba(255,59,92,0.4), 0 0 12px rgba(180,18,45,0.45); animation: pop 0.2s ease; } .tw-cell.bomb.hit { box-shadow: 0 0 30px var(--red-glow), inset 0 0 16px rgba(255,59,92,0.6); } .tw-cell.dim { opacity: 0.4; } .tw-cell.pick { border-color: #00e676 !important; box-shadow: inset 0 0 0 2px #00e676; z-index: 2; } .tw-tower.locked { pointer-events: none; } .tw-rmult { width: 58px; flex: none; text-align: left; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); } .tw-row.current .tw-rmult { color: var(--gold); font-weight: 800; } /* la waifu en una ventana ojival de piedra (CSS), CHICA y centrada en vertical (≈ media altura del tablero) y recortada bien arriba (cabeza+escote) — las piernas/torso bajo quedan fuera, como en Shuffle. */ .tw-waifu { flex: 0 0 29%; max-width: 188px; align-self: center; height: 60%; position: relative; border-radius: 90px 90px 12px 12px; overflow: hidden; background: linear-gradient(180deg, #2a1620, #140b11); border: 3px solid #3a2731; box-shadow: inset 0 0 0 3px rgba(180,18,45,0.25), inset 0 -30px 50px rgba(0,0,0,0.6), 0 8px 30px rgba(0,0,0,0.5); } /* zoom al torso (hombros → manos), recortando cabeza-arriba y piernas — el "recuadro celeste" que marcó el user. transform-origin define en qué parte se centra el zoom. */ .tw-waifu img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transform: scale(1.18); transform-origin: 50% 12%; display: block; } /* repisa inferior de la ventana */ .tw-waifu::after { content: ''; position: absolute; left: -3px; right: -3px; bottom: 0; height: 15px; background: linear-gradient(180deg, #4a3340, #271a22); border-top: 2px solid rgba(180,18,45,0.45); } /* mini-íconos llave/bomba (dropdown de dificultad + popup) */ .tw-ic { display: inline-block; width: 16px; height: 16px; background-size: contain; background-repeat: no-repeat; background-position: center; vertical-align: middle; } .tw-ic.key { background-image: url('/img/tower/key.png'); } .tw-ic.bomb { background-image: url('/img/tower/bomb.png'); } /* selector de dificultad (dropdown estilo Shuffle) */ .tw-diff { position: relative; } .tw-diff-btn { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: #fff; padding: 11px 12px; cursor: pointer; font: inherit; font-weight: 700; } .tw-diff-btn .tw-diff-ics { margin-left: auto; display: inline-flex; gap: 3px; } .tw-diff-btn .tw-caret { color: var(--text-dim); transition: transform 0.15s; } .tw-diff.open .tw-diff-btn .tw-caret { transform: rotate(180deg); } .tw-diff-btn.locked { opacity: 0.55; pointer-events: none; } .tw-diff-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 20; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-shadow: 0 16px 44px rgba(0,0,0,0.6); } .tw-diff.open .tw-diff-menu { display: block; } .tw-diff-opt { width: 100%; box-sizing: border-box; display: flex; align-items: center; gap: 10px; background: transparent; border: none; border-radius: 7px; color: #e8e8ee; padding: 9px 10px; cursor: pointer; font: inherit; font-weight: 700; text-align: left; } .tw-diff-opt .tw-diff-ics { margin-left: auto; display: inline-flex; gap: 3px; } .tw-diff-opt:hover { background: rgba(255,255,255,0.06); } .tw-diff-opt.on { color: #fff; background: rgba(180,18,45,0.22); } @media (max-width: 720px) { .tw-waifu { display: none; } .tw-rmult { width: 44px; font-size: 10px; } .tw-cell { min-height: 34px; } } /* popup centrado de ganancia por ronda (estilo Shuffle): pastilla VERDE con el multiplicador arriba + franja OSCURA con el monto ganado y las gemas debajo. Clase compartida .cz-winpop → la usan Mines (#mnWinPop) y Keno (#knWinPop). */ .cz-winpop { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: stretch; min-width: 132px; border-radius: 9px; overflow: hidden; box-shadow: 0 14px 44px rgba(0, 230, 118, 0.45); animation: winPop 0.18s ease; } .cz-wp-mult { background: var(--green); color: #042b15; text-align: center; font-family: 'Bebas Neue', sans-serif; font-size: 40px; line-height: 1; letter-spacing: 1px; padding: 12px 26px; } .cz-wp-stats { background: rgba(8, 12, 9, 0.96); text-align: center; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 9px 18px; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 15px; color: #fff; border-top: 1px solid rgba(0, 230, 118, 0.4); } .cz-wp-amt { display: inline-flex; align-items: center; gap: 5px; } .cz-wp-amt .coin { font-size: 16px; } .cz-wp-gems { display: inline-flex; align-items: center; gap: 5px; color: var(--text-dim); } .cz-wp-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; background: radial-gradient(circle at 35% 30%, #8effc0, #16c264); box-shadow: 0 0 6px rgba(22, 194, 100, 0.6); } /* Variantes del punto para el popup de la ruleta (color del número ganador). */ .cz-wp-dot.red { background: radial-gradient(circle at 35% 30%, #ff7a90, #d4133a); box-shadow: 0 0 6px rgba(212,19,58,0.6); } .cz-wp-dot.black { background: radial-gradient(circle at 35% 30%, #5a5a66, #1c1c22); box-shadow: 0 0 6px rgba(0,0,0,0.6); } @keyframes winPop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* ==================== DICE ==================== */ .dc-board { flex-direction: column; gap: 26px; padding: 30px 40px; justify-content: center; } .dc-result { font-family: 'Bebas Neue', sans-serif; font-size: 56px; line-height: 1; color: var(--text-dim); min-height: 56px; } .dc-result.win { color: var(--green); text-shadow: 0 0 22px rgba(0,230,118,0.4); } .dc-result.loss { color: var(--red); } .dc-slidewrap { position: relative; width: min(100%, 620px); height: 40px; display: flex; align-items: center; } .dc-bar { position: relative; width: 100%; height: 12px; border-radius: 999px; background: var(--red); overflow: hidden; } .dc-bar-win { position: absolute; top: 0; bottom: 0; right: 0; left: 50%; background: var(--green); } .dc-range { position: absolute; left: 0; width: 100%; margin: 0; height: 40px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .dc-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 34px; border-radius: 6px; background: linear-gradient(180deg, #fff, #c9c9d6); border: 1px solid #888; box-shadow: 0 2px 8px rgba(0,0,0,0.5); } .dc-range::-moz-range-thumb { width: 16px; height: 34px; border-radius: 6px; background: linear-gradient(180deg, #fff, #c9c9d6); border: 1px solid #888; } .dc-marker { position: absolute; top: -32px; transform: translateX(-50%); z-index: 4; pointer-events: none; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 13px; color: #160e05; background: #fff; padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .dc-marker::after { content: ''; position: absolute; left: 50%; bottom: -5px; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #fff; } .dc-marker.win { background: var(--green); } .dc-marker.win::after { border-top-color: var(--green); } .dc-marker.loss { background: var(--red); color: #fff; } .dc-marker.loss::after { border-top-color: var(--red); } .dc-scale { width: min(100%, 620px); display: flex; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text-dim); } .dc-fields { width: min(100%, 620px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 6px; } .dc-fieldbox label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1px; color: var(--text-dim); margin-bottom: 5px; } .dc-fieldbox input { width: 100%; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: #fff; padding: 10px; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 700; } .dc-fieldbox input:focus { outline: none; border-color: var(--border-hot); } .dc-fieldbox input:read-only { opacity: 0.7; } /* toggle por encima / por debajo (icono dentro del campo objetivo, estilo Shuffle) */ .dc-over-wrap { position: relative; } .dc-over-wrap input { padding-right: 40px; } #dcFlip { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); border-radius: 6px; color: var(--text-dim); cursor: pointer; font-size: 15px; line-height: 1; transition: all 0.15s; } #dcFlip:hover { color: #fff; border-color: var(--border-hot); background: rgba(255, 26, 60, 0.12); } /* ==================== LIMBO ==================== */ .lb-board { justify-content: center; } .lb-display { font-family: 'Bebas Neue', sans-serif; font-size: clamp(56px, 11vw, 120px); line-height: 1; letter-spacing: 2px; color: #fff; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 10px; padding: 36px 64px; transition: color 0.12s, transform 0.12s, text-shadow 0.12s; } .lb-display.win { color: var(--green); text-shadow: 0 0 34px rgba(0, 230, 118, 0.55); transform: scale(1.04); } .lb-display.loss { color: var(--red); } /* ==================== POLLITO (cruzá la ruta, con estado) ==================== */ /* Escena estilo Shuffle: vereda (pasto + semáforo + señal) + ruta de carriles con alcantarilla y chip de multiplicador. Todo CSS/SVG (los sprites viven en chicken.js). El pollito es un hijo absoluto del strip scrolleable (scrollea con la ruta) y está PARADO sobre la fila de alcantarillas (top = 46% - su altura). OJO: --ck-side-w / --ck-lane-w tienen que coincidir con SIDE_W/LANE_W del JS. */ .ck-board { position: relative; justify-content: center; } .ck-road { --ck-side-w: 112px; --ck-lane-w: 104px; position: relative; display: flex; align-items: stretch; width: 100%; height: min(560px, 64vh); overflow-x: auto; overflow-y: hidden; border-radius: 14px; background: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.025), transparent 60%), linear-gradient(180deg, #1c1518, #151013 55%, #120d10); border: 1px solid rgba(255, 255, 255, 0.08); scrollbar-width: none; /* sin barra: el juego auto-centra al pollito */ } .ck-road::-webkit-scrollbar { display: none; } /* con luz verde, SOLO el próximo carril es clickeable (= IR) */ .ck-road.go .ck-lane.next { cursor: pointer; } .ck-road.shake { animation: ck-shake 0.42s; } @keyframes ck-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } } /* vereda: franja de pasto con arbustos + caminito de baldosas con cordón blanco */ .ck-side { flex: 0 0 var(--ck-side-w); display: flex; align-items: stretch; } .ck-grass { width: 32%; background: radial-gradient(circle at 45% 14%, #2a3f26 0 34%, transparent 35%), radial-gradient(circle at 72% 42%, #223420 0 28%, transparent 29%), radial-gradient(circle at 38% 66%, #2a3f26 0 30%, transparent 31%), radial-gradient(circle at 65% 90%, #223420 0 26%, transparent 27%), #1b2a18; } .ck-walk { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 14px 0 12px; background: repeating-linear-gradient(180deg, #2f282c 0 52px, #282126 52px 56px); border-right: 5px solid #ece6da; box-shadow: inset -10px 0 16px rgba(0, 0, 0, 0.3); } .ck-side-end .ck-walk { border-right: 0; box-shadow: inset 10px 0 16px rgba(0, 0, 0, 0.3); } .ck-light-svg { width: 32px; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); } .ck-sign-svg { width: 50px; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.45)); } /* trofeo de la meta: un poco MÁS ARRIBA que la fila de alcantarillas, bien grande */ .ck-trophy-svg { position: absolute; left: 50%; top: calc(46% - 150px); transform: translateX(-50%); width: 86px; height: auto; filter: drop-shadow(0 7px 12px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 22px rgba(255, 201, 64, 0.3)); } /* franja de META a cuadros (borde de la vereda de llegada) */ .ck-finish { flex: 0 0 16px; background: conic-gradient(#ece6da 0 25%, #15100d 25% 50%, #ece6da 50% 75%, #15100d 75%); background-size: 16px 16px; } /* LEDs del semáforo: verde mientras se juega, rojo cuando lo agarran */ .ck-road.go .ck-led-green { fill: #2ecc71; } .ck-road.go .ck-led-red { fill: #451016; } .ck-road.stop .ck-led-red { fill: #ff1a3c; } .ck-road.stop .ck-led-green { fill: #0e3d22; } /* carril: asfalto + alcantarilla al centro + chip de multiplicador abajo */ .ck-lane { position: relative; flex: 0 0 var(--ck-lane-w); border-right: 3px dashed rgba(255, 255, 255, 0.14); transition: background 0.18s; overflow: hidden; } .ck-lane:last-of-type { border-right: 0; } .ck-hole { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); width: 80px; opacity: 0.95; } .ck-hole-svg { display: block; width: 100%; height: auto; overflow: visible; } /* la TAPA de la alcantarilla: sale volando cuando el pollito se cae adentro */ .ck-lid { transform-box: fill-box; transform-origin: center; } .ck-lane.open .ck-lid { animation: ck-lid-open 0.5s ease-out forwards; } @keyframes ck-lid-open { 0% { transform: translate(0, 0) rotate(0); } 60% { transform: translate(30px, -26px) rotate(26deg); } 100% { transform: translate(40px, -12px) rotate(34deg); } } .ck-chip { position: absolute; left: 50%; bottom: 11%; transform: translateX(-50%); font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 13.5px; white-space: nowrap; color: var(--text-dim); background: #251c20; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 9px; padding: 6px 11px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55); transition: background 0.15s, color 0.15s, border-color 0.15s; } .ck-lane.next { background: rgba(255, 201, 64, 0.05); } .ck-lane.next .ck-chip { color: #fff; border-color: rgba(255, 201, 64, 0.6); animation: ck-chip-pulse 1.3s ease-in-out infinite; } @keyframes ck-chip-pulse { 0%, 100% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 0 rgba(255, 201, 64, 0); } 50% { box-shadow: 0 3px 0 rgba(0, 0, 0, 0.55), 0 0 16px rgba(255, 201, 64, 0.4); } } .ck-lane.passed .ck-chip { background: var(--green); color: #06250f; border-color: var(--green); } /* carril YA CRUZADO: la TAPA misma se pinta de verde (chapa + centro + ranuras) */ .ck-lane.passed .ck-lid-top { fill: #1f6136; } .ck-lane.passed .ck-lid-in { fill: #174a29; } .ck-lane.passed .ck-lid-slots { stroke: #2f8a4d; } .ck-lane.passed .ck-hole { filter: drop-shadow(0 0 10px rgba(0, 230, 118, 0.22)); } .ck-lane.boom { background: rgba(255, 26, 60, 0.1); } .ck-lane.boom .ck-chip { background: var(--red); color: #fff; border-color: var(--red); animation: none; } .ck-lane.ghost .ck-chip { border-color: rgba(255, 26, 60, 0.5); } /* el pollito (PNG del user en /img/pollito.png): left lo setea el JS en px del contenido scrolleable. Parado SOBRE la alcantarilla. transform-origin abajo para que el planchado lo aplaste CONTRA el piso. */ .ck-spr { display: block; width: 100%; height: auto; } .ck-png { display: block; width: 100%; height: auto; } .ck-chick { position: absolute; top: calc(46% - 76px); width: 70px; z-index: 5; transform: translateX(-50%); transform-origin: 50% 100%; transition: left 0.32s cubic-bezier(0.45, 0, 0.4, 1); filter: drop-shadow(0 7px 6px rgba(0, 0, 0, 0.5)); pointer-events: none; } .ck-chick.hop { animation: ck-hop 0.34s ease-out; } @keyframes ck-hop { 0% { transform: translateX(-50%) translateY(0) scale(1, 1); } 18% { transform: translateX(-50%) translateY(3px) scale(1.07, 0.88); } 55% { transform: translateX(-50%) translateY(-34px) scale(0.93, 1.1); } 85% { transform: translateX(-50%) translateY(3px) scale(1.1, 0.86); } 100% { transform: translateX(-50%) translateY(0) scale(1, 1); } } /* muertes: planchado = el MISMO png aplastado contra el piso (origen abajo) */ .ck-chick.flat { animation: ck-flatten 0.22s ease-in forwards; } @keyframes ck-flatten { 0% { transform: translateX(-50%) scale(1, 1); } 55% { transform: translateX(-50%) scale(1.5, 0.1); } 100% { transform: translateX(-50%) scale(1.35, 0.18); } } .ck-chick.sink { animation: ck-sink 0.64s ease-in forwards; } @keyframes ck-sink { 0% { transform: translateX(-50%) translateY(0) rotate(0) scale(1); opacity: 1; } 45% { transform: translateX(-50%) translateY(22px) rotate(-16deg) scale(0.7); opacity: 1; } 100% { transform: translateX(-50%) translateY(44px) rotate(-34deg) scale(0.15); opacity: 0; } } .ck-chick.roast { width: 62px; top: calc(46% - 44px); animation: ck-roast-in 0.32s ease-out; } @keyframes ck-roast-in { from { transform: translateX(-50%) scale(0.5); } to { transform: translateX(-50%) scale(1); } } /* autos: ambient (decorativos, carriles de adelante) y asesino (el que te pisa) */ .ck-amb, .ck-killer { position: absolute; top: 0; left: 50%; width: 56px; z-index: 3; animation: ck-drive linear forwards; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.55)); pointer-events: none; } .ck-killer { width: 62px; z-index: 6; animation-duration: 0.5s; } @keyframes ck-drive { from { transform: translate(-50%, -130px); } to { transform: translate(-50%, 660px); } } /* auto fantasma: dónde te esperaba (revelado al cobrar) */ .ck-ghostcar { position: absolute; top: 30%; left: 50%; width: 48px; z-index: 2; transform: translateX(-50%); opacity: 0.42; pointer-events: none; } /* plumitas al caer en la alcantarilla */ .ck-feather { position: absolute; top: 40%; left: 50%; width: 10px; height: 10px; z-index: 6; background: #fff; border-radius: 60% 40% 55% 45%; animation: ck-feather 0.75s ease-out forwards; opacity: 0; pointer-events: none; } @keyframes ck-feather { 0% { opacity: 1; transform: translate(-50%, 0) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 20px)), -56px) rotate(220deg); } } /* llamas que salen de la alcantarilla (muerte "pollo asado") */ .ck-flame { position: absolute; top: 36%; left: 50%; width: 18px; height: 30px; z-index: 4; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 88%, #ffd54d 0 26%, #ff8a2a 52%, #e2112e 78%, transparent 92%); border-radius: 50% 50% 38% 62% / 72% 72% 28% 28%; transform-origin: 50% 100%; animation: ck-flame 0.42s ease-in-out infinite alternate; pointer-events: none; } @keyframes ck-flame { from { transform: translateX(-50%) scale(0.85, 0.9) rotate(-4deg); opacity: 0.85; } to { transform: translateX(-50%) scale(1.1, 1.3) rotate(5deg); opacity: 1; } } /* humito del pollo asado */ .ck-smoke { position: absolute; top: 28%; left: 50%; width: 28px; height: 28px; z-index: 6; background: radial-gradient(circle, rgba(220, 210, 200, 0.85), rgba(220, 210, 200, 0)); border-radius: 50%; animation: ck-smoke 0.85s ease-out forwards; pointer-events: none; } .ck-smoke.s2 { width: 18px; height: 18px; animation-delay: 0.22s; animation-duration: 1s; } @keyframes ck-smoke { 0% { opacity: 0.9; transform: translate(-50%, 0) scale(0.5); } 100% { opacity: 0; transform: translate(-50%, -52px) scale(2.2); } } /* cartel de cierre al PERDER (al ganar sale el cz-winpop de siempre) */ .ck-endpop { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); z-index: 30; text-align: center; padding: 18px 28px; border-radius: 14px; background: rgba(22, 8, 11, 0.94); border: 1px solid var(--red); box-shadow: 0 0 44px rgba(255, 26, 60, 0.28), 0 18px 40px rgba(0, 0, 0, 0.55); pointer-events: none; animation: ck-endpop-in 0.22s ease-out; } @keyframes ck-endpop-in { from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .ck-end-title { font-family: 'Bebas Neue', sans-serif; font-size: 32px; letter-spacing: 0.6px; color: var(--red); } /* multiplicador siguiente dentro del botón IR */ .ck-go-next { margin-left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 12px; opacity: 0.85; background: rgba(0, 0, 0, 0.22); border-radius: 6px; padding: 2px 7px; } @media (max-width: 640px) { .ck-road { height: min(380px, 52vh); } .ck-endpop { width: max-content; max-width: 86%; padding: 14px 18px; } .ck-end-title { font-size: 24px; } } /* ==================== SNAKES (dados → serpiente, con estado) ==================== */ .sn-board { justify-content: center; } .sn-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 12px; width: min(560px, 96%); aspect-ratio: 1; } .sn-cell { display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: clamp(14px, 2.6vw, 22px); color: var(--text); transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s; } .sn-cell.loss { color: var(--text-mute); background: rgba(255, 255, 255, 0.012); border-color: rgba(255, 255, 255, 0.05); } .sn-snake { font-size: 1.6em; line-height: 1; opacity: 0.5; } /* mapa de calor: t0 = suma rara y jugosa (dorado fuerte) … t4 = común y tenue */ .sn-cell.t0 { border-color: rgba(255, 201, 64, 0.6); box-shadow: inset 0 0 20px rgba(255, 201, 64, 0.09); } .sn-cell.t0 .sn-mult { color: var(--gold); } .sn-cell.t1 { border-color: rgba(255, 201, 64, 0.4); } .sn-cell.t1 .sn-mult { color: #ffda7a; } .sn-cell.t2 { border-color: rgba(255, 201, 64, 0.24); } .sn-cell.t2 .sn-mult { color: #ffe9b0; } .sn-cell.t3 { border-color: rgba(255, 255, 255, 0.16); } .sn-cell.t4 { border-color: rgba(255, 255, 255, 0.1); } /* casilla de SALIDA (esquina): de acá arranca la serpiente */ .sn-cell.sn-start { background: rgba(255, 255, 255, 0.02); border-style: dashed; border-color: rgba(255, 255, 255, 0.16); } .sn-start-ic { color: var(--text-mute); font-size: 1.3em; opacity: 0.8; } .sn-cell.sn-start.trail { background: rgba(255, 201, 64, 0.2); border-style: solid; border-color: rgba(255, 201, 64, 0.5); } /* el "color" que viaja desde la primera casilla hasta donde cae */ .sn-cell.trail { background: rgba(255, 201, 64, 0.18); border-color: rgba(255, 201, 64, 0.5); transform: scale(1.04); } /* casilla buena donde aterriza = amarillo */ .sn-cell.win { background: var(--gold); color: #2a1d00; border-color: var(--gold); box-shadow: 0 0 30px rgba(255, 201, 64, 0.55); transform: scale(1.07); } /* casilla mala = serpiente roja */ .sn-cell.snake { background: var(--red-deep); border-color: var(--red); box-shadow: 0 0 26px var(--red-glow); transform: scale(1.05); } .sn-cell.snake .sn-snake { opacity: 1; } .sn-center { grid-row: 2 / 4; grid-column: 2 / 4; display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: center; padding: 6px; } .sn-dice { display: flex; gap: 12px; } .sn-die { width: clamp(40px, 8vw, 58px); aspect-ratio: 1; padding: 8px; background: #f4eff1; border-radius: 13px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; } .sn-pip { border-radius: 50%; } .sn-pip.on { background: #1a1012; } .sn-display { font-family: 'Bebas Neue', sans-serif; font-size: clamp(30px, 6.5vw, 52px); line-height: 1; letter-spacing: 1px; color: var(--text-dim); transition: color 0.12s, text-shadow 0.12s; } .sn-display.win { color: var(--green); text-shadow: 0 0 28px rgba(43, 212, 125, 0.5); } .sn-display.loss { color: var(--red); } /* ==================== HILO (cartas, con estado) ==================== */ .hl-board { justify-content: center; gap: 20px; } .hl-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 250px; } .hl-deck { position: absolute; width: clamp(120px, 20vw, 168px); aspect-ratio: 5 / 7; border-radius: 14px; background: repeating-linear-gradient(135deg, #2a1230 0 8px, #3a1842 8px 16px); border: 1px solid var(--border); transform: translate(12px, 12px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } .hl-card { position: relative; z-index: 1; width: clamp(120px, 20vw, 168px); aspect-ratio: 5 / 7; border-radius: 14px; background: #f4eff1; color: #1a1012; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5); border-bottom: 5px solid var(--red); } .hl-card.red { color: var(--red); } .hl-card .hl-rank { font-family: 'Bebas Neue', sans-serif; font-size: clamp(48px, 10vw, 86px); line-height: 0.9; } .hl-card .hl-suit { font-size: clamp(28px, 6vw, 50px); line-height: 1; } .hl-card.back { background: repeating-linear-gradient(135deg, #2a1230 0 8px, #3a1842 8px 16px); border-bottom-color: var(--border); } .hl-card.flip { animation: hlFlip 0.23s ease; } @keyframes hlFlip { from { transform: rotateY(85deg) scale(0.92); opacity: 0.3; } to { transform: none; opacity: 1; } } .hl-card.win { box-shadow: 0 0 32px rgba(43, 212, 125, 0.55); } .hl-card.lose { box-shadow: 0 0 32px var(--red-glow); } .hl-mult { position: absolute; top: -8px; right: -8px; z-index: 2; font-family: 'Bebas Neue', sans-serif; font-size: 24px; background: var(--panel-solid); border: 1px solid var(--border); border-radius: 8px; padding: 2px 10px; color: var(--green); } .hl-history { display: flex; gap: 6px; overflow-x: auto; max-width: 94%; padding: 4px; scrollbar-width: none; } .hl-history::-webkit-scrollbar { display: none; } .hl-hist { flex: none; width: 34px; height: 46px; border-radius: 6px; background: #f4eff1; color: #1a1012; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; line-height: 1; border: 2px solid transparent; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } .hl-hist.red { color: var(--red); } .hl-hist.win { border-color: var(--green); } .hl-hist.bust { border-color: var(--red); } .hl-hist.skip { opacity: 0.5; } .hl-hist.start { border-color: var(--gold); } /* botones de adivinanza (Mayor/Menor) */ .hl-guess { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 12px 14px; border-radius: 8px; cursor: pointer; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text); font-family: 'Inter', sans-serif; font-weight: 700; font-size: 14px; transition: all 0.15s; } .hl-guess:hover:not(:disabled) { border-color: var(--border-hot); background: rgba(255, 255, 255, 0.07); } .hl-guess:disabled { opacity: 0.45; cursor: default; } .hl-guess.up:not(:disabled) { border-color: rgba(43, 212, 125, 0.45); } .hl-guess.down:not(:disabled) { border-color: rgba(255, 201, 64, 0.45); } .hl-g-stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .hl-g-stat b { font-family: 'JetBrains Mono', monospace; font-size: 14px; } .hl-g-stat i { font-style: normal; font-size: 11px; color: var(--text-dim); } .hl-skip { background: transparent; border: 1px solid var(--border); } .hl-skip:disabled { opacity: 0.45; } /* ==================== RAKEBACK (columna derecha) ==================== */ .rb-card { padding: 14px; border-radius: 9px; background: rgba(255, 201, 64, 0.07); border: 1px solid rgba(255, 201, 64, 0.28); } .rb-row { display: flex; align-items: center; justify-content: space-between; } .rb-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--gold); } .rb-amount { font-family: 'Bebas Neue', sans-serif; font-size: 24px; color: var(--gold); line-height: 1; } .rb-sub { font-size: 10px; color: var(--text-dim); margin: 6px 0 10px; line-height: 1.4; } .rb-claim { width: 100%; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; color: #160e05; background: linear-gradient(135deg, var(--gold), #c89a1f); border: none; border-radius: 9px; padding: 10px; cursor: pointer; transition: all 0.15s; } .rb-claim:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(255, 201, 64, 0.4); } .rb-claim:disabled { opacity: 0.4; cursor: not-allowed; } /* ==================== TIPS (tipear a otro jugador) ==================== */ .tip-card { padding: 14px; border-radius: 9px; text-align: left; background: rgba(0, 230, 118, 0.06); border: 1px solid rgba(0, 230, 118, 0.26); display: flex; flex-direction: column; gap: 8px; } .tip-title { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 1.5px; color: var(--green); } .tip-card input { width: 100%; box-sizing: border-box; background: var(--bg-1); border: 1px solid var(--border); border-radius: 8px; color: #fff; padding: 9px 10px; font-size: 13px; font-family: 'JetBrains Mono', monospace; } .tip-card input:focus { outline: none; border-color: var(--green); } /* Autocompletado del destinatario de la propina (dropdown bajo el input) */ .tip-ac { position: relative; } .tip-sug { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 20; background: var(--panel-solid); border: 1px solid var(--border-hot); border-radius: 8px; max-height: 200px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); } .tip-sug.hidden { display: none; } .tip-sug-row { padding: 8px 10px; font-size: 13px; font-family: 'JetBrains Mono', monospace; color: #e8e8ec; cursor: pointer; border-bottom: 1px solid var(--border); } .tip-sug-row:last-child { border-bottom: none; } .tip-sug-row:hover { background: rgba(0, 230, 118, 0.12); color: #fff; } .tip-send { width: 100%; font-family: 'Bebas Neue', sans-serif; font-size: 16px; letter-spacing: 2px; color: #042b15; background: linear-gradient(135deg, var(--green), #00a152); border: none; border-radius: 9px; padding: 10px; cursor: pointer; transition: all 0.15s; } .tip-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 230, 118, 0.4); } .tip-send:disabled { opacity: 0.5; cursor: not-allowed; } .tip-msg { font-size: 11px; line-height: 1.4; min-height: 14px; } .tip-msg.err { color: var(--red); } .tip-msg.ok { color: var(--green); } /* toggle propina pública/privada */ .tip-public { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--text-dim); user-select: none; } .tip-public input { width: 16px; height: 16px; accent-color: var(--green); cursor: pointer; flex: none; } .tip-public b { color: var(--text); } /* ==================== RECOMPENSAS (Sus premios) ==================== */ .rewards-btn { position: relative; } .rw-dot { position: absolute; top: 9px; right: 11px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); animation: rwPulse 1.6s ease-in-out infinite; } @keyframes rwPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .rewards-card { max-width: 470px; } /* Modal "Mi perfil" (tabbar mobile): acciones apiladas + badge VIP arriba. */ .me-actions { display: flex; flex-direction: column; gap: 6px; margin: 14px 0 4px; } #meModal .account-vip { margin: 12px 0 4px; } .rw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 6px 0 4px; } .rw-item { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 9px; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .rw-top { width: 100%; display: flex; align-items: center; justify-content: space-between; } .rw-when { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.5px; color: var(--text-dim); } .rw-gift { font-size: 14px; opacity: 0.7; } .rw-emoji { font-size: 34px; line-height: 1; margin: 2px 0; } .rw-name { font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: 1px; color: #fff; line-height: 1.15; } .rw-slot { color: var(--gold); } .rw-claim { width: 100%; font-family: 'Bebas Neue', sans-serif; font-size: 15px; letter-spacing: 1.5px; color: #042b15; background: linear-gradient(135deg, var(--green), #00a152); border: none; border-radius: 9px; padding: 9px; cursor: pointer; transition: all 0.15s; margin-top: auto; } .rw-claim:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 16px rgba(0, 230, 118, 0.4); } .rw-claim:disabled { opacity: 0.4; cursor: not-allowed; } .rw-timer { width: 100%; font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 800; color: #fff; background: var(--bg-1); border: 1px solid var(--border); border-radius: 9px; padding: 9px; margin-top: auto; } @media (max-width: 560px) { .rw-grid { grid-template-columns: 1fr; } } /* En mobile los modales (Recompensas/Perfil/Tip) ocupan TODA la pantalla: sin padding afuera no hay zona muerta donde el dedo "scrollee fuera" — todo el toque cae en la tarjeta y scrollea su contenido. El botón Cerrar queda STICKY abajo, siempre visible. */ @media (max-width: 560px) { .pf-modal { padding: 0; } .pf-modal .pf-card { max-width: none; border-radius: 0; min-height: 100dvh; max-height: 100dvh; padding-bottom: 0; } .pf-modal .pf-card .pf-actions { position: sticky; bottom: 0; margin: 18px -26px 0; padding: 14px 26px; padding-bottom: calc(14px + env(safe-area-inset-bottom)); background: var(--panel-solid); border-top: 1px solid var(--border); } /* EXCEPCIÓN: el PERFIL y la TABLA DE PAGOS no van full-screen → card centrada que ajusta al contenido, no se come la pantalla. (Recompensas/Tip sí siguen full-screen.) */ .pf-modal .pf-card.prof-card, .pf-modal .pf-card.sl-pay-card, .pf-modal .pf-card.vip-rank-card { min-height: 0; max-height: calc(100dvh - 28px); max-width: 420px; width: calc(100% - 28px); margin: auto; border-radius: 14px; overflow-y: auto; } } /* ==================== PANEL INFERIOR (leaderboard + descripción) ==================== */ /* mismo ancho que el juego (vive en .casino-center); crece con su contenido y la página entera scrollea (no scroll interno) */ .casino-bottom { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; } .cb-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; flex-shrink: 0; padding: 13px 18px; border-bottom: 1px solid var(--border); } .cb-title { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: 3px; color: #fff; } .cb-tabs { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; } .cb-tab { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text-dim); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: all 0.15s; } .cb-tab:hover { color: #fff; } .cb-tab.active { color: #fff; background: rgba(255, 26, 60, 0.12); border-color: var(--border-hot); } .cb-body { padding: 6px 8px 12px; min-height: 150px; } .cb-pane { display: none; } .cb-pane.active { display: block; } /* ==================== GUIRNALDA MUNDIAL 2026 ==================== */ /* Banderines triangulares celeste/blanco colgando de un hilo, dibujados con un SVG inline (data-URI) → cero requests, livianísimo, se ve igual en todos lados (los emoji de bandera no renderizan en Windows). Franja finita arriba del casino. */ .mundial-bunting { /* OVERLAY: posición absoluta para NO empujar el layout (cuelga del borde inferior del topbar). Puede pisar un poco el tope de las columnas, a propósito (queda como adorno). */ position: absolute; top: var(--topbar-h); left: 0; right: 0; z-index: 4; height: 32px; /* banderines PEGADOS uno al lado del otro, pero cuyas puntas siguen una cuerda que se hamaca (sube en los anclajes, baja en el medio). Celeste/blanco alternados. SVG inline. */ background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='32'%3E%3Cpath%20d='M0,4%20Q60,28%20120,4'%20fill='none'%20stroke='rgba(255,255,255,0.4)'%20stroke-width='1.2'/%3E%3Cpolygon%20points='0,4%2020,10.7%2010,21.7'%20fill='%236cb7e6'/%3E%3Cpolygon%20points='20,10.7%2040,14.7%2030,27'%20fill='%23eef4f9'/%3E%3Cpolygon%20points='40,14.7%2060,16%2050,29.7'%20fill='%236cb7e6'/%3E%3Cpolygon%20points='60,16%2080,14.7%2070,29.7'%20fill='%23eef4f9'/%3E%3Cpolygon%20points='80,14.7%20100,10.7%2090,27'%20fill='%236cb7e6'/%3E%3Cpolygon%20points='100,10.7%20120,4%20110,21.7'%20fill='%23eef4f9'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: top center; background-size: 120px 32px; pointer-events: none; } @media (max-width: 740px) { .mundial-bunting { height: 26px; background-size: 96px 26px; } } /* ==================== FEED DE APUESTAS ==================== */ .bets-feed { background: var(--panel); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; margin-top: 14px; } .bf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 11px 14px; border-bottom: 1px solid var(--border); } .bf-collapse { background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; color: var(--text-dim); cursor: pointer; width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: all 0.15s; } .bf-collapse:hover { color: #fff; } .bf-caret { transition: transform 0.2s; font-size: 13px; } .bets-feed.collapsed .bf-caret { transform: rotate(-90deg); } .bets-feed.collapsed .bf-body { display: none; } .bets-feed.collapsed .bf-head { border-bottom: none; } .bf-tabs { display: flex; gap: 6px; flex-wrap: wrap; } .bf-tab { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 700; color: var(--text-dim); background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: all 0.15s; } .bf-tab:hover { color: #fff; } .bf-tab.active { color: #fff; background: rgba(255,26,60,0.12); border-color: var(--border-hot); } .bf-limit { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #fff; background: rgba(255,255,255,0.04); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; cursor: pointer; color-scheme: dark; /* el popup nativo del select se dibuja oscuro, no en blanco */ } /* el desplegable del select (las