/* ===== Fichaza · estilos base (layout, componentes, lobby). Los juegos están en juegos.css ===== */
:root {
  --bg: #0a0d12;
  --s1: #10151c;
  --s2: #151c25;
  --s3: #1c2530;
  --s4: #243040;
  --borde: rgba(255,255,255,.07);
  --borde-2: rgba(255,255,255,.12);
  --texto: #9aa6b8;
  --tenue: #6b778a;
  --fuerte: #eef2f7;
  --oro: #d6b25e;
  --oro-2: #b8913b;
  --oro-claro: #f0d690;
  --verde: #34c77b;
  --rojo: #e5484d;
  --azul: #4a90e2;
  --radio: 8px;
  --sombra: 0 10px 30px rgba(0,0,0,.35);
  --lateral: 232px;
  --fuente-titulo: "Barlow Condensed", Inter, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--texto); font: 14px/1.5 Inter, system-ui, sans-serif; min-height: 100vh; }
a { color: var(--fuerte); text-decoration: none; }
h1, h2, h3 { color: var(--fuerte); margin: 0 0 12px; font-family: var(--fuente-titulo); font-weight: 700; letter-spacing: .01em; }
h1 { font-size: 30px; } h2 { font-size: 20px; } h3 { font-size: 16px; }
button, input, select { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.pos { color: var(--verde) !important; } .neg { color: var(--rojo) !important; } .oro { color: var(--oro) !important; }
.der { text-align: right !important; }
.sub { margin: 0 0 12px; }

/* Íconos (sprites SVG) */
.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; vertical-align: -3px; }
.ij { width: 1em; height: 1em; flex: none; fill: currentColor; vertical-align: -.15em; }

/* ---- Marca ---- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--fuente-titulo); font-weight: 700; font-size: 24px; letter-spacing: .06em; text-transform: uppercase; color: var(--fuerte); }
.logo-ficha { width: 30px; height: 30px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 15px; color: #2a1d05; background: radial-gradient(circle at 35% 30%, var(--oro-claro), var(--oro) 50%, var(--oro-2)); box-shadow: inset 0 0 0 2px rgba(255,255,255,.35), 0 0 0 3px rgba(214,178,94,.18); }
.moneda { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--oro-claro), var(--oro) 50%, var(--oro-2)); flex: none; }

/* ---- Layout ---- */
.lateral { position: fixed; inset: 0 auto 0 0; width: var(--lateral); background: var(--s1); border-right: 1px solid var(--borde); padding: 18px 14px; overflow-y: auto; z-index: 40; display: flex; flex-direction: column; }
.lateral .logo { margin: 0 8px 22px; }
.lat-titulo { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); margin: 18px 10px 8px; }
.lat-link { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 6px; font-weight: 500; color: var(--texto); transition: background .15s, color .15s; }
.lat-link:hover { background: var(--s2); color: var(--fuerte); }
.lat-link.activo { background: var(--s3); color: var(--fuerte); box-shadow: inset 2px 0 0 var(--oro); }
.lat-link .i { color: var(--tenue); }
.lat-link.activo .i, .lat-link:hover .i { color: var(--oro); }
.lat-link em { margin-left: auto; font-style: normal; font-size: 11px; color: var(--tenue); background: var(--s2); border-radius: 999px; padding: 1px 8px; }
.lat-pie { margin-top: auto; padding: 14px 10px 0; font-size: 11px; color: var(--tenue); border-top: 1px solid var(--borde); }
.con-menu .cuerpo { margin-left: var(--lateral); }
.cuerpo { min-height: 100vh; display: flex; flex-direction: column; }

.barra { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 28px; background: rgba(10,13,18,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--borde); }
.hamburguesa, .logo-barra { display: none; }
.hamburguesa { background: none; border: 0; color: var(--fuerte); padding: 6px; }
.buscador { display: flex; align-items: center; gap: 8px; background: var(--s2); border: 1px solid var(--borde); border-radius: 8px; padding: 0 12px; width: 300px; color: var(--tenue); }
.buscador input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--fuerte); padding: 9px 0; }
.buscador:focus-within { border-color: var(--borde-2); }
.barra-der { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.cartera { display: flex; align-items: stretch; background: var(--s2); border: 1px solid var(--borde); border-radius: 8px; overflow: hidden; }
.cartera-saldo { display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--fuerte); font-weight: 700; font-variant-numeric: tabular-nums; min-width: 130px; }
.cartera-saldo b.sube { animation: sube .7s ease; }
@keyframes sube { 40% { color: var(--verde); } }
.cartera .btn { border-radius: 0; }
.btn-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--borde); background: var(--s2); color: var(--texto); }
.btn-icono:hover { color: var(--fuerte); border-color: var(--borde-2); }
.avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: var(--fuerte); background: var(--s3); border: 1px solid var(--borde-2); }

.contenido { width: 100%; max-width: 1360px; margin: 0 auto; padding: 26px 28px 40px; flex: 1; }
.pie { padding: 30px 28px; border-top: 1px solid var(--borde); background: var(--s1); font-size: 12px; color: var(--tenue); }
.pie-cols { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 30px; }
.pie p { margin: 6px 0; }
.pie a { color: var(--texto); text-decoration: underline; }
.pie-marca { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sello { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--tenue); font-weight: 800; color: var(--texto); font-size: 12px; }

/* ---- Botones ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radio); padding: 10px 16px; font-weight: 600; color: var(--fuerte); background: var(--s3); white-space: nowrap; transition: background .15s, border-color .15s, transform .05s; }
.btn:hover { background: var(--s4); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-oro, .btn-azul { background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-2)); color: #1c1405; border-color: rgba(255,255,255,.15); }
.btn-oro:hover, .btn-azul:hover { filter: brightness(1.07); background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-2)); }
.btn-verde { background: var(--verde); color: #04140b; }
.btn-rojo { background: var(--rojo); color: #fff; }
.btn-sec { background: var(--s3); border-color: var(--borde); }
.btn-borde { background: transparent; border-color: var(--borde-2); }
.btn-chico { padding: 6px 10px; font-size: 12px; }
.btn-grande { padding: 13px 24px; font-size: 15px; }
.ancho { width: 100%; }

/* ---- Paneles, tablas, formularios ---- */
.panel { background: var(--s1); border: 1px solid var(--borde); border-radius: 12px; padding: 20px; margin-bottom: 22px; }
.panel-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.panel-cab h2 { margin: 0; }
.titulo-pagina { display: flex; align-items: center; gap: 12px; margin: 4px 0 20px; }
.titulo-pagina h1 { margin: 0; }
.titulo-pagina .i { width: 26px; height: 26px; color: var(--oro); }
.grilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.grilla-2 .panel { margin-bottom: 0; }
.grilla-2 + .panel { margin-top: 22px; }
.tabla-scroll { overflow-x: auto; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; font-weight: 500; font-size: 12px; color: var(--tenue); padding: 10px 12px; border-bottom: 1px solid var(--borde); }
.tabla td { padding: 11px 12px; color: var(--fuerte); border-bottom: 1px solid var(--borde); }
.tabla tr:last-child td { border-bottom: 0; }
.tabla tr.yo td { background: rgba(214,178,94,.07); }
.tabla .vacio { text-align: center; color: var(--tenue); }
.tabla .detalle { display: block; font-size: 11px; color: var(--tenue); }
.tabla .corta { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juego-celda { display: flex; align-items: center; gap: 10px; }
.juego-celda img { width: 28px; height: 36px; border-radius: 4px; object-fit: cover; }
.chip { background: var(--s3); border-radius: 4px; padding: 1px 6px; font-size: 11px; color: var(--texto); }
.paginas { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stat { background: var(--s1); border: 1px solid var(--borde); border-radius: 12px; padding: 16px 18px; }
.stat span { display: block; font-size: 12px; color: var(--tenue); }
.stat b { font-family: var(--fuente-titulo); font-size: 26px; color: var(--fuerte); font-weight: 600; }
.alerta { background: rgba(229,72,77,.1); border: 1px solid rgba(229,72,77,.5); color: var(--fuerte); padding: 10px 12px; border-radius: var(--radio); margin-bottom: 14px; }
.fila { display: flex; gap: 8px; align-items: center; }
.fila .entrada { flex: 1; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.tres-col { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 8px; margin-bottom: 12px; }
.entrada, .campo select, .form input:not([type=checkbox]), .select { width: 100%; background: var(--s2); border: 1px solid var(--borde-2); border-radius: 8px; color: var(--fuerte); padding: 10px 12px; outline: none; }
.entrada:focus, .campo select:focus, .form input:focus, .select:focus { border-color: var(--oro-2); }
.entrada.chica { width: 130px; flex: none; }
.tabs { display: inline-flex; background: var(--s2); border: 1px solid var(--borde); border-radius: 8px; padding: 3px; margin-bottom: 12px; flex-wrap: wrap; }
.tab { background: none; border: 0; color: var(--texto); font-weight: 500; padding: 7px 14px; border-radius: 6px; }
.tab.activo { background: var(--s4); color: var(--fuerte); }
.feed .tabla td { font-size: 13px; }
.feed-nuevo td { animation: aparecer .5s ease; }
@keyframes aparecer { from { opacity: 0; transform: translateY(-4px); } }
.texto p { max-width: 820px; }
code { background: var(--s2); padding: 2px 6px; border-radius: 4px; color: var(--fuerte); }

/* ---- Auth ---- */
.sin-menu .contenido { display: grid; place-items: center; }
.auth { width: 100%; max-width: 420px; padding: 30px; }
.form label { display: block; margin-bottom: 14px; font-weight: 500; color: var(--fuerte); }
.form label input { margin-top: 6px; }
.form .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; color: var(--texto); }
.form .check input { margin-top: 4px; }
.form .btn-apostar { margin: 8px 0 16px; }

/* ===== LOBBY ===== */
.hero { position: relative; height: 320px; border-radius: 16px; overflow: hidden; margin-bottom: 22px; border: 1px solid var(--borde); background: var(--s1); }
.slide { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 56px; opacity: 0; transition: opacity .7s; pointer-events: none; background: radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 55%), linear-gradient(110deg, #0b0f15 35%, color-mix(in srgb, var(--c2) 80%, #0b0f15)); }
.slide.activo { opacity: 1; pointer-events: auto; }
.slide-txt { position: relative; z-index: 2; max-width: 520px; }
.slide-tag { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oro); margin-bottom: 10px; }
.slide h1 { font-size: 52px; line-height: 1; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .02em; }
.slide p { font-size: 15px; color: #c3cad6; margin: 0 0 22px; }
.hero-puntos { position: absolute; left: 56px; bottom: 22px; display: flex; gap: 8px; z-index: 3; }
.hero-puntos button { width: 24px; height: 3px; border: 0; padding: 0; background: rgba(255,255,255,.25); border-radius: 2px; }
.hero-puntos button.activo { background: var(--oro); }

.franja { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 12px 18px; background: var(--s1); border: 1px solid var(--borde); border-radius: 12px; margin-bottom: 26px; font-size: 13px; }
.franja b { color: var(--fuerte); font-weight: 600; }
.punto-vivo { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--verde); margin-right: 6px; box-shadow: 0 0 0 3px rgba(52,199,123,.18); }
.ticker { flex: 1; min-width: 260px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.ticker-pista { display: flex; width: max-content; animation: ticker 70s linear infinite; }
.ticker:hover .ticker-pista { animation-play-state: paused; }
.ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; white-space: nowrap; border-right: 1px solid var(--borde); }
.ticker-item img { width: 20px; height: 26px; border-radius: 3px; object-fit: cover; }
@keyframes ticker { to { transform: translateX(-50%); } }

.categorias { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; margin-bottom: 30px; }
.cat-card { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--borde); transition: border-color .2s, transform .2s; }
.cat-card:hover { border-color: rgba(214,178,94,.45); transform: translateY(-2px); }
.cat-card .i { width: 24px; height: 24px; color: var(--oro); }
.cat-card b { color: var(--fuerte); font-weight: 600; }
.cat-card small { color: var(--tenue); }

.fila-juegos { margin-bottom: 30px; }
.fila-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.fila-cab h2 { margin: 0; display: flex; align-items: center; gap: 10px; }
.fila-cab h2 .i { width: 20px; height: 20px; color: var(--oro); }
.fila-cab .ver-todos { margin-left: auto; font-size: 13px; color: var(--texto); }
.fila-cab .ver-todos:hover { color: var(--fuerte); }
.flechas { display: flex; gap: 6px; }
.flechas button { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--s2); border: 1px solid var(--borde); color: var(--texto); }
.flechas button:hover { color: var(--fuerte); }
.carril-juegos { display: grid; grid-auto-flow: column; grid-auto-columns: 168px; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; }
.carril-juegos::-webkit-scrollbar { display: none; }
.carril-juegos .tile { scroll-snap-align: start; }

/* Tarjeta de juego */
.tile { position: relative; display: block; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: var(--s2); border: 1px solid var(--borde); transition: transform .25s, box-shadow .25s, border-color .25s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.5); border-color: rgba(214,178,94,.4); }
.tile-info { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px; display: flex; flex-direction: column; }
.tile-info b { color: #fff; font-family: var(--fuente-titulo); font-size: 17px; font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.tile-info small { font-size: 11px; color: rgba(255,255,255,.6); margin-top: 3px; }
.tile-badge { position: absolute; top: 10px; left: 10px; font-size: 10px; font-weight: 700; letter-spacing: .08em; padding: 3px 7px; border-radius: 4px; background: rgba(10,13,18,.75); color: var(--oro); border: 1px solid rgba(214,178,94,.45); backdrop-filter: blur(4px); }
.tile-badge.hot { color: #ff8a5c; border-color: rgba(255,138,92,.45); }
.tile-play { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) scale(.85); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--oro-claro), var(--oro)); color: #1c1405; opacity: 0; transition: .2s; box-shadow: 0 8px 20px rgba(0,0,0,.5); }
.tile-play .i { width: 24px; height: 24px; fill: currentColor; }
.tile:hover .tile-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.grilla-juegos { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.herramientas { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.herramientas .buscador { width: 280px; }
.herramientas .select { width: auto; padding: 9px 12px; }
.chips-filtro { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-f { background: var(--s2); border: 1px solid var(--borde); color: var(--texto); padding: 7px 14px; border-radius: 999px; font-size: 13px; }
.chip-f:hover { color: var(--fuerte); }
.chip-f.activo { background: rgba(214,178,94,.12); border-color: rgba(214,178,94,.5); color: var(--oro-claro); }
.cuenta-juegos { margin-left: auto; color: var(--tenue); font-size: 13px; }
.vacio-busqueda { text-align: center; padding: 50px 20px; color: var(--tenue); }
.cat-cab { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.cat-cab p { margin: 4px 0 0; }
.miga { font-size: 13px; color: var(--tenue); margin-bottom: 10px; display: flex; gap: 8px; align-items: center; }
.miga a { color: var(--texto); } .miga a:hover { color: var(--fuerte); }

/* Toast */
.toast { position: fixed; top: 80px; right: 24px; z-index: 100; background: var(--s3); color: var(--fuerte); border: 1px solid var(--borde-2); border-left: 3px solid var(--verde); padding: 12px 16px; border-radius: 8px; box-shadow: var(--sombra); max-width: 380px; animation: aparecer .25s ease; }
.toast.error { border-left-color: var(--rojo); }

/* ---- Responsive ---- */
@media (max-width: 1200px) {
  .categorias { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 960px) {
  .lateral { transform: translateX(-100%); transition: transform .2s; box-shadow: var(--sombra); }
  .lateral.abierto { transform: none; }
  .con-menu .cuerpo { margin-left: 0; }
  .hamburguesa, .logo-barra { display: flex; }
  .barra { padding: 0 14px; }
  .buscador { display: none; }
  .grilla-2, .pie-cols { grid-template-columns: 1fr; }
  .slide { padding: 0 24px; }
  .slide h1 { font-size: 38px; }
  .hero-puntos { left: 24px; }
}
@media (max-width: 640px) {
  .contenido { padding: 16px; }
  .avatar, .oc-movil { display: none; }
  .cartera-saldo { min-width: 0; padding: 0 10px; }
  .hero { height: 300px; }
  .categorias { grid-template-columns: repeat(2, 1fr); }
  .carril-juegos { grid-auto-columns: 136px; gap: 10px; }
  .grilla-juegos { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .herramientas .buscador { width: 100%; }
  .flechas { display: none; }
  .tile-info b { font-size: 15px; }
}

/* ===== Tarjetas 3D animadas ===== */
.tile { background: #0b0f15; isolation: isolate; }
.tile-fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden;
  background: radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--c1) 55%, #fff 0%) 0%, color-mix(in srgb, var(--c1) 45%, var(--c2)) 32%, var(--c2) 70%, #06080c 100%); }
.tile-fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(5,7,10,.95) 8%, rgba(5,7,10,0) 48%); }
.tile-rayos { position: absolute; left: 50%; top: 38%; width: 240%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.09) 0 6deg, transparent 6deg 18deg); animation: girarRayos 40s linear infinite;
  mask-image: radial-gradient(circle, #000 12%, transparent 55%); }
@keyframes girarRayos { to { transform: translate(-50%, -50%) rotate(360deg); } }
.tile .i3d { position: absolute; pointer-events: none; user-select: none; }
.tile-3d { left: 50%; top: 36%; width: 64%; transform: translate(-50%, -50%); filter: drop-shadow(0 16px 18px rgba(0,0,0,.55)); animation: flotar3d 4.5s ease-in-out infinite; }
.tile-3d-sec { right: 7%; top: 12%; width: 32%; filter: drop-shadow(0 8px 10px rgba(0,0,0,.5)); animation: flotar3d 3.6s ease-in-out -1.2s infinite; }
@keyframes flotar3d { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -8px; rotate: 3deg; } }
.tile:hover .tile-3d { animation-duration: 1.6s; scale: 1.1; }
.tile img.i3d { height: auto; object-fit: contain; transition: scale .35s; }
.tile-brillo { position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%); transform: translateX(-70%); transition: transform .8s; pointer-events: none; }
.tile:hover .tile-brillo { transform: translateX(70%); }
/* Cartas en abanico */
.tile-cartas { position: absolute; left: 50%; top: 40%; width: 0; height: 0; }
.tile-carta { position: absolute; left: 0; top: 0; transform-origin: 50% 140%;
  transform: translate(-50%, -50%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 11deg)); transition: transform .45s cubic-bezier(.3,1.3,.5,1); animation: mecer 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.4s); }
.tile:hover .tile-carta { transform: translate(-50%, -58%) rotate(calc((var(--i) - (var(--n) - 1) / 2) * 20deg)); }
@keyframes mecer { 50% { margin-top: -5px; } }
.tile-carta .naipe { width: 58px; height: 84px; box-shadow: 0 10px 18px rgba(0,0,0,.55); }
.tile-carta .naipe-pip { font-size: 30px; }
.tile-carta .naipe-figura { width: 36px; height: 50px; } .tile-carta .naipe-figura .ij { font-size: 24px; } .tile-carta .naipe-figura b { display: none; }
.tile-carta .naipe-esq { font-size: 10px; } .tile-carta .naipe-esq b { font-size: 13px; }
.tile-cartas + .tile-3d-sec { right: 6%; top: auto; bottom: 26%; width: 26%; }
@media (prefers-reduced-motion: reduce) { .tile-rayos, .tile-3d, .tile-3d-sec, .tile-carta { animation: none; } }

/* Naipes (también en el lobby) */
.naipe { width: 86px; height: 124px; border-radius: 8px; background: linear-gradient(165deg, #ffffff, #eceff3); color: #14171c; position: relative; flex: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; font-family: Georgia, 'Times New Roman', serif; }
.naipe.rojo { color: #b3122e; }
.naipe-esq { position: absolute; top: 6px; left: 7px; display: flex; flex-direction: column; align-items: center; line-height: 1; font-size: 14px; }
.naipe-esq b { font-size: 19px; font-weight: 700; }
.naipe-esq.abajo { top: auto; left: auto; bottom: 6px; right: 7px; transform: rotate(180deg); }
.naipe-pip { font-size: 42px; }
.naipe-figura { position: relative; display: grid; place-items: center; width: 54px; height: 72px; border: 1px solid currentColor; border-radius: 4px; opacity: .9; }
.naipe-figura .ij { font-size: 36px; }
.naipe-figura b { position: absolute; bottom: 2px; font-size: 13px; }

/* ===== Arte 3D en la interfaz ===== */
.lat-3d { width: 22px; height: 22px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); transition: transform .2s; }
.lat-link:hover .lat-3d, .lat-link.activo .lat-3d { transform: scale(1.15) rotate(-6deg); }
.cat-card { position: relative; overflow: hidden; }
.cat-3d { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); transition: transform .3s; }
.cat-card:hover .cat-3d { transform: scale(1.12) rotate(-8deg); }
.slide-arte { position: absolute; right: 70px; top: 50%; transform: translateY(-50%); width: 300px; height: 300px; }
.slide-halo { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 60%, transparent), transparent 70%); filter: blur(10px); animation: latirHalo 4s ease-in-out infinite; }
@keyframes latirHalo { 50% { transform: scale(1.12); opacity: .8; } }
.slide-3d { position: absolute; left: 50%; top: 50%; width: 230px; transform: translate(-50%, -50%); filter: drop-shadow(0 24px 30px rgba(0,0,0,.6)); animation: flotar3d 5s ease-in-out infinite; }
.slide-3d-sec { position: absolute; right: -10px; top: 0; width: 100px; filter: drop-shadow(0 12px 16px rgba(0,0,0,.5)); animation: flotar3d 4s ease-in-out -1.5s infinite; }
.juego-celda img { object-fit: contain !important; }
.ticker-item img { object-fit: contain !important; }
@media (max-width: 960px) { .slide-arte { right: -30px; width: 220px; height: 220px; opacity: .55; } .slide-3d { width: 170px; } }
.festejo { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 200; }

/* ===== Ambiente y bienvenida ===== */
body { background: radial-gradient(ellipse 60% 40% at 70% -5%, rgba(214,178,94,.10), transparent 70%), radial-gradient(ellipse 50% 40% at 15% 0%, rgba(124,58,237,.10), transparent 70%), var(--bg); background-attachment: fixed; }
.bienvenida { display: grid; grid-template-columns: 1.6fr 1fr .9fr; gap: 12px; margin-bottom: 18px; }
.bv-hola { padding: 6px 4px; }
.bv-hola h1 { font-size: 34px; margin: 0 0 4px; }
.bv-hola p { margin: 0; }
.bv-tarjeta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--s1); border: 1px solid var(--borde); transition: border-color .2s, transform .2s; }
.bv-tarjeta:hover { border-color: rgba(214,178,94,.45); transform: translateY(-2px); }
.bv-tarjeta b { display: block; color: var(--fuerte); }
.bv-tarjeta small { color: var(--tenue); }
.bv-tarjeta .btn { margin-left: auto; }
.bv-bono { background: linear-gradient(120deg, rgba(214,178,94,.16), var(--s1) 60%); }
.bv-3d { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); animation: flotar3d 4s ease-in-out infinite; }
@media (max-width: 960px) { .bienvenida { grid-template-columns: 1fr; } .bv-hola h1 { font-size: 28px; } }

/* ===== Portadas cuadradas estilo casino (logo con relieve) ===== */
.tile { aspect-ratio: 1 / 1; border-radius: 10px; }
.carril-juegos { grid-auto-columns: 184px; }
.grilla-juegos { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.tile-fondo { background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--c1) 70%, #fff 8%) 0%, color-mix(in srgb, var(--c1) 55%, var(--c2)) 30%, var(--c2) 68%, #05070a 100%); }
.tile-fondo::after { background: linear-gradient(to top, rgba(5,7,10,.85) 0%, rgba(5,7,10,.35) 30%, rgba(5,7,10,0) 55%); }
.tile-3d { top: 34%; width: 66%; }
.tile-3d-esq { position: absolute; right: -8%; bottom: 14%; width: 44%; opacity: .95; filter: drop-shadow(0 10px 12px rgba(0,0,0,.55)); animation: flotar3d 5s ease-in-out -2s infinite; rotate: 12deg; }
.tile-cartas { top: 36%; }
.tile-cartas ~ .tile-3d-esq { right: -6%; bottom: 20%; width: 34%; }
/* Logo */
.tile-logo { position: absolute; left: 4%; right: 4%; bottom: 17%; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none;
  font-family: var(--f), 'Luckiest Guy', sans-serif; text-transform: uppercase; line-height: .88; letter-spacing: .01em;
  filter: drop-shadow(0 1px 0 var(--tr)) drop-shadow(0 1px 0 var(--tr)) drop-shadow(0 1px 0 var(--tr)) drop-shadow(0 2px 0 var(--tb)) drop-shadow(0 6px 7px rgba(0,0,0,.7)); }
.logo-linea { display: block; background: linear-gradient(180deg, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.2px var(--tb); padding: 0 2px; max-width: 100%; overflow-wrap: anywhere; }
.logo-chica { display: block; font-size: .42em; line-height: 1; letter-spacing: .12em; color: var(--t1); -webkit-text-stroke: .6px var(--tb); margin: 1px 0; }
.logo-xl { font-size: 38px; } .logo-l { font-size: 31px; } .logo-m { font-size: 25px; } .logo-s { font-size: 20px; }
.tile-cinta { position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%); z-index: 2; white-space: nowrap; font-size: 9.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #1c1405; background: linear-gradient(180deg, var(--oro-claro), var(--oro)); padding: 3px 10px; border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.5); }
.tile-cinta:empty { display: none; }
.tile-play { top: 38%; }
.tile .tile-info { display: none; }
@media (max-width: 640px) {
  .carril-juegos { grid-auto-columns: 148px; }
  .logo-xl { font-size: 31px; } .logo-l { font-size: 25px; } .logo-m { font-size: 20px; } .logo-s { font-size: 16px; }
  .tile-cinta { font-size: 8px; }
}

/* ===== Barra de categorías (estilo casino) ===== */
.categorias { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; padding: 10px 8px; background: var(--s1); border: 1px solid var(--borde); border-radius: 14px; }
.cat-card { flex: 0 1 110px; align-items: center; text-align: center; gap: 4px; padding: 8px 6px; background: transparent; border: 0; border-radius: 10px; }
.cat-card:hover { background: var(--s2); transform: none; }
.cat-card .cat-3d { width: 38px; height: 38px; }
.cat-card b { font-size: 13px; font-weight: 600; line-height: 1.15; }
.cat-card small { font-size: 11px; }
@media (max-width: 640px) { .categorias { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; } .cat-card { flex: 0 0 88px; } }
/* Logo: tamaño relativo a la tarjeta, nunca se corta una palabra; más contraste abajo */
.tile { container-type: inline-size; }
.tile-logo { font-size: var(--fs, 16cqw); bottom: 16%; }
.logo-linea { overflow-wrap: normal; white-space: nowrap; -webkit-text-stroke: 1.6px var(--tb); }
.tile-fondo::after { background: linear-gradient(to top, rgba(5,7,10,.92) 0%, rgba(5,7,10,.6) 26%, rgba(5,7,10,0) 58%); }
.tile-3d { top: 30%; width: 60%; }
.tile-cinta { font-size: 5.2cqw; bottom: 6%; }
.tile-logo { bottom: 19%; line-height: .84; }
.tile-cinta { bottom: 5%; }

/* ===== CELULAR Y TABLET (táctil) ===== */
.velo-menu { display: none; }
@media (max-width: 960px) {
  .velo-menu { display: block; position: fixed; inset: 0; z-index: 39; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .menu-abierto .velo-menu { opacity: 1; pointer-events: auto; }
  body.menu-abierto { overflow: hidden; }
  .lateral { overscroll-behavior: contain; will-change: transform; }
}
/* Barra fija de acción (la arma app.js cuando el juego se apila). */
.barra-accion { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(10,13,18,.97); border-top: 1px solid var(--borde); box-shadow: 0 -8px 24px rgba(0,0,0,.45); }
.barra-accion > * { flex: 1 1 0; min-width: 0; margin: 0 !important; }
.barra-accion [hidden] { display: none !important; }
.barra-accion .btn-apostar { padding: 14px 10px; font-size: 15px; }
.barra-accion .bj-acciones { flex: 2 1 0; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.barra-accion .bj-acciones .btn { padding: 8px 4px; font-size: 12px; }
.barra-accion .guerra-decision { flex: 2 1 0; }
.barra-accion .btn { min-height: 48px; }
body.con-barra-accion { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
body.con-barra-accion .toast { top: auto; bottom: calc(90px + env(safe-area-inset-bottom)); }

/* Pantallas táctiles (celular y tablet): toques cómodos y sin efectos que traban el desplazamiento. */
@media (hover: none) and (pointer: coarse), (max-width: 960px) {
  /* Las portadas animadas (rayos que giran, íconos que flotan con sombra) se repintan en cada cuadro y traban el arrastre. */
  .tile-rayos, .tile-3d, .tile-3d-sec, .tile-3d-esq, .tile-carta, .slide-3d, .slide-3d-sec, .bv-3d, .ticker-pista { animation: none !important; }
  .barra { backdrop-filter: none; background: #0b0f15; }
}
@media (hover: none) and (pointer: coarse) {
  a, button, input, select, label, .casilla, canvas { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .juego-layout { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  .juego-layout input { -webkit-user-select: text; user-select: text; }
  /* En iOS, un campo con letra menor a 16px hace zoom al tocarlo. */
  input, select { font-size: 16px !important; }
  .btn, .seg-btn, .monto button { min-height: 44px; }
  .fichas-sel .ficha { width: 44px; height: 44px; }
  .monto button { min-width: 44px; }
  .oc-movil { display: none; }
  .tile:hover .tile-3d { scale: none; }
}/* Encabezado en celular: todo tiene que entrar en el ancho (antes el saldo + bono empujaban la página hacia el costado). */
.cuerpo { overflow-x: clip; }
@media (max-width: 640px) {
  .barra { gap: 8px; padding: 0 10px; }
  .barra-der { gap: 6px; min-width: 0; }
  .cartera { min-width: 0; }
  .cartera-saldo { font-size: 13px; gap: 6px; padding: 0 8px; }
  .cartera [data-bono] { padding: 0 10px; }
  .cartera [data-bono] span { display: none; }
  .btn-icono { width: 36px; height: 36px; }
}

/* ===== PANEL DE ADMINISTRACIÓN (/admin) ===== */
.panel-admin .barra .logo small { font-size: 11px; vertical-align: middle; margin-left: 4px; }
.rol-chip { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--borde-2); color: var(--texto); white-space: nowrap; }
.rol-superadmin { border-color: rgba(214,178,94,.6); color: var(--oro-claro); }
.rol-creadmin { border-color: rgba(190,140,255,.55); color: #d4b8ff; }
.rol-admin { border-color: rgba(95,180,255,.5); color: #9fd0ff; }
.rol-cajero { border-color: rgba(52,199,123,.5); color: #8fe3b4; }
.alerta.ok { background: rgba(52,199,123,.1); border-color: rgba(52,199,123,.5); }
.stat b small { font-size: 14px; color: var(--tenue); font-family: Inter, sans-serif; }
.grilla-panel { display: grid; grid-template-columns: 320px 1fr; gap: 22px; align-items: start; margin-bottom: 22px; }
.grilla-panel .panel { margin-bottom: 0; min-width: 0; }
.tabla-cuentas td { vertical-align: middle; }
.tabla-cuentas tr.inactivo td { opacity: .55; }
.acciones-fichas { flex-wrap: nowrap; }
.acciones-fichas .entrada.chica { width: 110px; }
.mas-acciones { position: relative; }
.mas-acciones summary { list-style: none; cursor: pointer; }
.mas-acciones summary::-webkit-details-marker { display: none; }
.mas-caja { margin-top: 8px; width: 320px; background: var(--s2); border: 1px solid var(--borde-2); border-radius: 10px; padding: 12px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.mas-caja small { color: var(--tenue); }
.fila-envuelve { flex-wrap: wrap; }
.fila-envuelve .entrada { min-width: 180px; }
@media (max-width: 960px) {
  .grilla-panel { grid-template-columns: 1fr; }
  .panel-admin .rol-chip { display: none; }
  .mas-caja { width: min(330px, 86vw); }
}

/* Botón principal (juegos, ingreso y panel). */
.btn-apostar { width: 100%; border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 15px; font-weight: 700; font-size: 15px; letter-spacing: .04em; text-transform: uppercase;
  background: linear-gradient(180deg, var(--oro-claro), var(--oro) 55%, var(--oro-2)); color: #1c1405; box-shadow: 0 8px 20px rgba(214,178,94,.18); transition: filter .15s, transform .05s; margin-top: 4px; }
.btn-apostar:hover { filter: brightness(1.07); }
.btn-apostar:active { transform: translateY(1px); }
.panel-admin .contenido { display: block; place-items: normal; width: 100%; max-width: 1320px; margin: 0 auto; }
.panel-admin .contenido > .auth { margin: 40px auto; }
/* Panel: pestañas del super admin y comisiones de cajeros. */
.pestanas { display: flex; gap: 6px; margin: -6px 0 20px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.pestanas a { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; color: var(--texto); border-bottom: 2px solid transparent; white-space: nowrap; }
.pestanas a.activo { color: var(--oro-claro); border-bottom-color: var(--oro); }
.pestanas .i { width: 18px; height: 18px; }
.stat-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--tenue); }
.stat-comision { border-color: rgba(214,178,94,.45); }
.cierre-form { flex-wrap: wrap; }
.cierre-form .select { width: auto; }
.tabla-comisiones td { vertical-align: middle; }
.puesto { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-weight: 700; font-size: 13px; background: var(--s3); color: var(--texto); }
.puesto.p1 { background: linear-gradient(180deg, #f6d67a, #b8913b); color: #1c1405; }
.puesto.p2 { background: linear-gradient(180deg, #e8edf3, #8e9aab); color: #12161c; }
.puesto.p3 { background: linear-gradient(180deg, #e0a06a, #9a5a26); color: #1c0e04; }
.barra-col { min-width: 180px; }
.barra-neto { position: relative; height: 26px; background: var(--s2); border-radius: 6px; overflow: hidden; }
.barra-neto i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, rgba(214,178,94,.25), rgba(214,178,94,.6)); border-radius: 6px; }
.barra-neto span { position: relative; display: block; padding: 4px 8px; font-weight: 600; font-size: 13px; color: var(--fuerte); }
.porcentaje-form { flex-wrap: nowrap; }
.porcentaje-form .entrada { width: 70px; flex: none; text-align: right; }
.campo-mini { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--tenue); }
.campo-mini .select, .campo-mini .entrada { width: auto; min-width: 130px; }
.campo-mini[hidden] { display: none; }
.campo-mini.nota { align-self: flex-end; padding-bottom: 10px; font-size: 13px; color: var(--texto); }
.cierre-form { align-items: flex-end; gap: 12px; }
.stat-alerta { border-color: rgba(242,181,58,.6); }
/* Fichas de cajero y de equipo. */
.link-cuenta { color: var(--fuerte); }
.link-cuenta:hover b { color: var(--oro-claro); text-decoration: underline; }
.tabla .detalle a { color: var(--oro); }
.cuenta-detalle { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 12px 0 16px; }
.cuenta-detalle dt { color: var(--tenue); }
.cuenta-detalle dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; color: var(--fuerte); }
.tabla tr.total td { font-weight: 700; border-top: 1px solid var(--borde-2); }
.tabla tr.en-curso td:first-child { box-shadow: inset 3px 0 0 var(--oro); }
.tabla-alta { max-height: 460px; overflow-y: auto; }
.barra-neto.negativa span { color: #ff8a8f; }

/* ===== ESTILO STAKE: azul pizarra, plano, sin brillos ===== */
:root {
  --bg: #1a2c38; --s1: #0f212e; --s2: #213743; --s3: #2f4553; --s4: #3d5564;
  --borde: #2f4553; --borde-2: #3d5564;
  --texto: #b1bad3; --tenue: #7f92ab; --fuerte: #ffffff;
  --verde: #00e701; --rojo: #ed4163; --azul: #1475e1;
  --oro: #1475e1; --oro-2: #105eb5; --oro-claro: #7ab6ff;   /* el acento pasa a ser azul */
  --sombra: 0 4px 12px rgba(0,0,0,.25);
  --fuente-titulo: Inter, system-ui, sans-serif;
}
body { background: var(--bg); }
h1, h2, h3 { font-weight: 700; letter-spacing: 0; }
/* Ficha y moneda siguen doradas (son las fichas). */
.moneda { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c64a 50%, #b8913b); }
.logo-ficha { background: radial-gradient(circle at 35% 30%, #fff3b0, #f2c64a 50%, #b8913b); }
.logo { letter-spacing: .02em; }
/* Menú lateral y barra. */
.lateral { background: var(--s1); border-right: 0; box-shadow: 0 0 16px rgba(0,0,0,.3); }
.lat-titulo { color: var(--tenue); }
.lat-link { color: #fff; font-weight: 600; }
.lat-link:hover { background: var(--s2); }
.lat-link.activo { background: var(--s2); box-shadow: none; }
.lat-link .i { color: var(--texto); }
.lat-link.activo .i, .lat-link:hover .i { color: #fff; }
.lat-link em { background: var(--s3); color: var(--texto); }
.lat-3d { filter: none; }
.barra { background: var(--bg); border-bottom: 0; backdrop-filter: none; box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.buscador { background: var(--s1); border: 2px solid var(--s3); border-radius: 999px; }
.cartera { background: var(--s1); border: 0; border-radius: 6px; box-shadow: none; }
.cartera-saldo { color: #fff; }
/* Botones: apostar en verde, principal en azul, secundario gris azulado. */
.btn { border-radius: 6px; font-weight: 600; }
.btn-sec { background: var(--s3); border-color: transparent; color: #fff; }
.btn-sec:hover { background: var(--s4); }
.btn-oro, .btn-azul, .btn-oro:hover, .btn-azul:hover { background: var(--azul); color: #fff; border-color: transparent; filter: none; }
.btn-oro:hover, .btn-azul:hover { background: #1a82f5; }
.btn-apostar { background: var(--verde); color: #05080a; border: 0; box-shadow: none; border-radius: 6px; text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn-apostar:hover { filter: brightness(1.08); }
/* Campos, paneles y tablas. */
.entrada, .campo select, .form input:not([type=checkbox]), .select { background: var(--s1); border: 2px solid var(--s3); border-radius: 6px; color: #fff; }
.panel, .stat { background: var(--s2); border: 0; box-shadow: none; }
.tabla th { color: var(--texto); border-color: var(--s3); }
.tabla td { border-color: var(--s3); }
.chip { background: var(--s3); color: #fff; }
/* Lobby. */
.hero { border: 0; border-radius: 8px; }
.slide h1 { color: #fff; }
.franja { background: var(--s2); border: 0; }
.bienvenida .bv-tarjeta { background: var(--s2); border: 0; }
.bienvenida .bv-tarjeta:hover { background: var(--s3); transform: none; }
.bv-3d { animation: none; }
.categorias { background: transparent; border: 0; padding: 0; gap: 8px; }
.cat-card { background: var(--s2); border-radius: 8px; }
.cat-card:hover { background: var(--s3); }
.cat-card .cat-3d { filter: none; }
.fila-cab h2 { font-size: 18px; }
.fila-cab h2 .i, .fila-ico .i { color: var(--texto); }
.fila-cab .ver-todos { color: var(--texto); font-weight: 600; }
.flechas button { background: var(--s2); border: 0; color: #fff; border-radius: 999px; }
.tile { border: 0; border-radius: 8px; transition: transform .2s; }
.tile:hover { transform: translateY(-5px); box-shadow: none; }
.tile-badge { border-radius: 4px; }
/* Portadas en reposo: sin rayos ni íconos flotando (estilo más sobrio). */
.tile-rayos, .tile-3d, .tile-3d-sec, .tile-3d-esq, .tile-carta, .slide-3d, .slide-3d-sec { animation: none !important; }
.alerta.ok { background: rgba(0,231,1,.08); border-color: rgba(0,231,1,.4); }

/* =====================================================================
   CASINO NEGRO Y ORO (26/09) — reemplaza el azul pizarra "Stake":
   todo el sitio en negro con acentos dorados, como las máquinas.
   ===================================================================== */
:root {
  --bg: #0d0f13; --s1: #0a0b0e; --s2: #15181e; --s3: #20242c; --s4: #2c313b;
  --borde: #23272f; --borde-2: #323844;
  --texto: #b9bfcb; --tenue: #7c8494; --fuerte: #ffffff;
  --oro: #f2c64a; --oro-2: #b8913b; --oro-claro: #ffe39a;
  --acento: #f2c64a;
}
body { background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242,198,74,.06), transparent 60%), var(--bg); }
.lateral { background: #08090c; border-right: 1px solid #1a1d23; }
.lat-titulo { color: #8a7440; letter-spacing: .14em; }
.lat-link:hover, .lat-link.activo { background: #15181e; }
.lat-link.activo { box-shadow: inset 3px 0 0 var(--oro); color: var(--oro-claro); }
.lat-link.activo .i { color: var(--oro); }
.lat-link em { background: #1c2027; }
.barra { background: rgba(13,15,19,.92); border-bottom: 1px solid #1a1d23; box-shadow: none; }
.buscador { background: #0a0b0e; border: 1px solid #262a33; }
.buscador:focus-within { border-color: var(--oro-2); }
.cartera { background: #0a0b0e; border: 1px solid #262a33; }
/* Botones: principal dorado, secundario grafito */
.btn-oro, .btn-azul, .btn-oro:hover, .btn-azul:hover { background: linear-gradient(180deg, #ffe39a, #f2c64a 45%, #c8962e); color: #1c1405; border: 0; }
.btn-oro:hover, .btn-azul:hover { filter: brightness(1.07); }
.btn-sec { background: #1c2027; border: 1px solid #2c313b; color: #fff; }
.btn-sec:hover { background: #252a33; }
.btn-apostar { background: linear-gradient(180deg, #ffe39a 0%, #f2c64a 45%, #c8962e 100%); color: #1c1405; border: 0; border-radius: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(242,198,74,.18), inset 0 -3px 0 rgba(0,0,0,.18); }
.btn-apostar:hover { filter: brightness(1.06); }
.entrada, .campo select, .form input:not([type=checkbox]), .select { background: #0a0b0e; border: 1px solid #2a2f38; }
.entrada:focus, .form input:focus { border-color: var(--oro-2); outline: none; }
.panel, .stat { background: #13161b; border: 1px solid #1f232a; }
a { color: var(--oro); }
/* Lobby */
.hero { border: 1px solid #1f232a; border-radius: 14px; }
.slide { background: radial-gradient(circle at 78% 50%, color-mix(in srgb, var(--c1) 22%, transparent), transparent 55%), linear-gradient(110deg, #08090c 38%, color-mix(in srgb, var(--c2) 70%, #08090c)); }
.slide h1 { font-family: 'Cinzel', serif; letter-spacing: .02em; }
.slide-tag { color: var(--oro); }
.slide-halo { animation: none; opacity: .5; }
.hero-puntos button.activo { background: var(--oro); }
.franja { background: #111318; border: 1px solid #1f232a; }
.bienvenida .bv-tarjeta { background: #111318; border: 1px solid #1f232a; }
.bienvenida .bv-tarjeta:hover { background: #171a20; border-color: #3a3222; }
.categorias { gap: 6px; }
.cat-card { background: #111318; border: 1px solid #1f232a; }
.cat-card:hover { background: #171a20; border-color: #4a3d1e; }
.fila-cab h2 { font-family: 'Cinzel', serif; font-size: 19px; letter-spacing: .03em; color: #f4f1e8; }
.fila-cab h2 .i, .fila-ico .i { color: var(--oro); }
.fila-cab .ver-todos { color: var(--oro); }
.flechas button { background: #15181e; border: 1px solid #262a33; }
.flechas button:hover { border-color: var(--oro-2); }
/* Portadas: fondo del tema oscuro y sobrio (sin rayos de colores), marco fino que se enciende en dorado. */
.tile { border-radius: 10px; box-shadow: 0 0 0 1px #1f232a; transition: transform .2s, box-shadow .2s; }
.tile:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--oro-2), 0 10px 26px rgba(0,0,0,.55); }
.tile-rayos { display: none; }
.tile-fondo { background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--c1) 28%, var(--c2)) 0%, color-mix(in srgb, var(--c2) 85%, #000) 55%, #050608 100%); }
.tile-fondo::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.02) 0 2px, transparent 2px 12px); }
.tile-cinta { background: rgba(8,9,12,.85); color: var(--oro); border: 1px solid rgba(242,198,74,.45); box-shadow: none; }
.tile-badge { background: #1f9d55; color: #fff; border: 0; font-size: 9.5px; letter-spacing: .06em; padding: 3px 7px; }
.tile-badge.hot { background: #c81e2e; }
.tile-play { background: linear-gradient(180deg, #ffe39a, #f2c64a 45%, #c8962e); }

/* 30/09: menú agrupado; cada categoría en una sola línea. */
.lat-link { white-space: nowrap; }
.lat-titulo { margin-top: 14px; }

/* Portadas horneadas de las máquinas con arte 3D (01/10) */
.tile-portada:not(.tp) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.tile:hover .tile-portada:not(.tp) img { transform: scale(1.06); }
.tile-con-portada .tile-logo { font-size: calc(var(--fs, 16cqw) * .72); bottom: 23%; }
.tile-con-portada .tile-fondo::after { background: linear-gradient(to top, rgba(5,7,10,.85) 6%, rgba(5,7,10,0) 40%); }

/* ---------- Portada animada (01/10): capas que cobran vida al pasar el mouse. Sólo transform y opacity. ---------- */
.tp > *, .tp-capas > * { position: absolute; pointer-events: none; }
/* Rendimiento: en reposo cada portada es una sola imagen horneada (tp-foto). Las capas animadas las arma app.js al pasar
   el mouse, y sólo se ven mientras la tarjeta está en hover. Las tarjetas fuera de pantalla no se pintan. */
.tile { content-visibility: auto; contain-intrinsic-size: auto 300px; }
.tp .tp-foto { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp .tp-capas { inset: 0; opacity: 0; transition: opacity .25s; }
.tile:hover .tp .tp-capas.lista { opacity: 1; }
.tp .tp-fondo { inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tp .tp-rayos { left: 50%; top: 34%; width: 170%; aspect-ratio: 1; translate: -50% -50%; background: url(rayos.webp) center / contain no-repeat; opacity: .6;
  transition: opacity .4s, scale .6s; }
.tp .tp-pers { left: 50%; top: 33%; width: 40%; translate: -50% -50%; transition: transform .5s cubic-bezier(.3,1.6,.5,1);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--luz-tp) 80%, transparent)) drop-shadow(0 12px 10px rgba(0,0,0,.6)); }
.tp .tp-esq { left: 80%; top: 50%; width: 26%; translate: -50% -50%; rotate: -8deg; transition: transform .4s ease;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--luz-tp) 70%, transparent)) drop-shadow(0 10px 8px rgba(0,0,0,.6)); }
.tp .tp-moneda { translate: -50% -50%; transform: rotate(var(--r)) scaleX(var(--a)); transition: transform .6s cubic-bezier(.2,1.2,.4,1); }
.tp .tp-atras { opacity: .8; filter: none; }
.tp .tp-destello { width: 7%; aspect-ratio: 1; translate: -50% -50%; opacity: .75; transition: opacity .3s;
  background: radial-gradient(circle, #fff 0 10%, transparent 11%), linear-gradient(0deg, transparent 45%, #fff8e0 50%, transparent 55%), linear-gradient(90deg, transparent 45%, #fff8e0 50%, transparent 55%); }
.tp .tp-marco { inset: 0; width: 100%; height: 100%; z-index: 1; }
.tp .tp-reflejo { inset: -10% -80%; z-index: 2; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-70%); }
.tile-con-portada .tile-play { display: none; }
/* al pasar el mouse */
.tile:hover .tp .tp-fondo { transform: scale(1.08); }
.tile:hover .tp .tp-rayos { opacity: 1; animation: tp-gira 6s linear infinite; }
.tile:hover .tp .tp-pers { transform: translateY(-6%) scale(1.14); animation: tp-flota 1.6s .5s ease-in-out infinite alternate; }
.tile:hover .tp .tp-esq { animation: tp-sacude .7s ease-in-out infinite; }
.tile:hover .tp .tp-destello { animation: tp-titila .9s ease-in-out infinite alternate; }
.tile:hover .tp .d2 { animation-delay: .3s; } .tile:hover .tp .d3 { animation-delay: .5s; } .tile:hover .tp .d4 { animation-delay: .15s; } .tile:hover .tp .d5 { animation-delay: .7s; }
.tile:hover .tp .tp-reflejo { transition: transform .9s ease; transform: translateX(70%); }
.tile:hover .tp .m1 { transform: translate(-40%, -60%) rotate(calc(var(--r) + 200deg)) scaleX(var(--a)); animation: tp-moneda 1.2s linear infinite; }
.tile:hover .tp .m2 { transform: translate(50%, -50%) rotate(calc(var(--r) - 180deg)) scaleX(var(--a)); animation: tp-moneda 1.4s linear infinite reverse; }
.tile:hover .tp .m3 { transform: translate(-60%, 40%) rotate(calc(var(--r) + 160deg)) scaleX(var(--a)); animation: tp-moneda 1.1s linear infinite; }
.tile:hover .tp .m4 { transform: translate(50%, 60%) rotate(calc(var(--r) - 150deg)) scaleX(var(--a)); animation: tp-moneda 1.3s linear infinite reverse; }
.tile:hover .tp .m5 { transform: translate(0, -80%) rotate(calc(var(--r) + 220deg)) scaleX(var(--a)); animation: tp-moneda 1s linear infinite; }
@keyframes tp-gira { to { rotate: 360deg; } }
@keyframes tp-flota { from { translate: -50% -50%; } to { translate: -50% -56%; } }
@keyframes tp-sacude { 0%, 100% { rotate: -8deg; } 25% { rotate: -14deg; } 75% { rotate: -2deg; } }
@keyframes tp-titila { from { opacity: .3; scale: .7; } to { opacity: 1; scale: 1.25; } }
@keyframes tp-moneda { 0% { scale: 1 1; } 50% { scale: .15 1; } 100% { scale: 1 1; } }
@media (prefers-reduced-motion: reduce) { .tile:hover .tp * { animation: none !important; } }

/* Logo 3D AAA en la miniatura del lobby (01/10) */
.tile-logo.tile-logo-img { font-size: 0; }
.tile-logo.tile-logo-img img { display: block; width: 86%; max-height: 34%; margin: 0 auto; object-fit: contain; filter: drop-shadow(0 4px 10px rgba(0,0,0,.8)); }

/* Rendimiento (01/10): en el lobby nada se mueve en reposo; las tarjetas cobran vida sólo al pasar el mouse. */
.tile:not(:hover) .tile-rayos, .tile:not(:hover) .tile-3d, .tile:not(:hover) .tile-3d-sec, .tile:not(:hover) .tile-3d-esq, .tile:not(:hover) .tile-carta { animation-play-state: paused; }