@import url('/assets/lobby-retro-dev.css?v=20260906-1'); @import url('/assets/lobby-retro-dev-v2.css?v=20260906-2'); @import url('/assets/lobby-polish-dev.css?v=20260906-1'); @import url('/assets/rtk-brand-2026.css?v=20260906-1'); /* ============================================================ RTK Games · preloader crítico de PRIMER PAINT Este archivo se carga en , antes del body del lobby. Por eso el usuario ve primero esta pantalla y nunca el lobby desnudo seguido por un splash tardío. ============================================================ */ html::before{ content:'RTK GAMES\A Preparando tu sala de juegos…'; white-space:pre; position:fixed; inset:0; z-index:2147483646; display:grid; place-items:center; padding-top:86px; box-sizing:border-box; text-align:center; color:#fff; font:900 22px/1.8 Inter,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:.025em; background: radial-gradient(circle at 50% 38%,rgba(155,77,255,.24),transparent 30%), radial-gradient(circle at 52% 48%,rgba(255,216,61,.08),transparent 36%), linear-gradient(180deg,#10072d 0%,#09051e 55%,#05040f 100%); box-shadow:inset 0 0 120px rgba(0,0,0,.38); pointer-events:auto; animation:rtkStartupCover .28s 1.08s ease forwards; } html::after{ content:''; position:fixed; z-index:2147483647; left:50%; top:calc(50% - 58px); width:52px; height:52px; margin:-26px 0 0 -26px; box-sizing:border-box; border-radius:50%; border:4px solid rgba(255,255,255,.13); border-top-color:#ffd83d; border-right-color:#9b4dff; box-shadow:0 0 34px rgba(155,77,255,.32),inset 0 0 18px rgba(255,216,61,.08); pointer-events:none; animation:rtkStartupSpin .72s linear infinite,rtkStartupCover .28s 1.08s ease forwards; } @keyframes rtkStartupSpin{to{transform:rotate(360deg)}} @keyframes rtkStartupCover{ 0%{opacity:1;visibility:visible} 100%{opacity:0;visibility:hidden} } /* La intro V2 anterior se inyectaba ~1.8 s tarde y causaba el efecto “entra el lobby y luego aparece el preloading”. Se desactiva porque ahora el preloader verdadero ocurre antes del primer render. */ .rtk-v2-intro{display:none!important} @media(max-width:600px){ html::before{font-size:18px;line-height:1.75;padding-top:78px} html::after{width:46px;height:46px;margin:-23px 0 0 -23px;top:calc(50% - 54px)} } @media(prefers-reduced-motion:reduce){ html::after{animation:rtkStartupCover .18s .72s ease forwards} html::before{animation:rtkStartupCover .18s .72s ease forwards} } /* RTK Games sidebar shell · purple/yellow develop theme */ .sidebar{scrollbar-width:thin;scrollbar-color:#7c2dff transparent;scroll-behavior:smooth} .sidebar::-webkit-scrollbar{width:7px} .sidebar::-webkit-scrollbar-track{background:transparent} .sidebar::-webkit-scrollbar-thumb{background:linear-gradient(#9b4dff,#ffd83d);border-radius:999px;border:2px solid #08051d} .sidebar::-webkit-scrollbar-thumb:hover{background:#ffd83d} .sidebar:before{content:'';position:sticky;display:block;top:-18px;height:12px;margin:-18px -14px 8px;z-index:5;background:linear-gradient(#0b0725,transparent);pointer-events:none} .menu a{position:relative;overflow:hidden;transition:background .18s,color .18s,transform .18s,border-color .18s;border:1px solid transparent} .menu a:hover{transform:translateX(3px);border-color:rgba(155,77,255,.34)} .menu a.active{background:linear-gradient(90deg,rgba(124,45,255,.30),rgba(255,216,61,.06));border-color:rgba(155,77,255,.38);box-shadow:inset 3px 0 0 #ffd83d} .menu a.active:after{content:'';position:absolute;right:10px;width:6px;height:6px;border-radius:50%;background:#ffd83d;box-shadow:0 0 12px rgba(255,216,61,.65)} .menu a i{transition:transform .18s,color .18s} .menu a:hover i{transform:scale(1.12)} .sidebar-scroll-progress{position:fixed;left:0;top:0;width:3px;height:0;background:linear-gradient(#9b4dff,#ffd83d);z-index:25;box-shadow:0 0 12px rgba(124,45,255,.55)} .menu-panel{display:none;margin:10px 4px 14px;padding:13px;border:1px solid rgba(155,77,255,.28);border-radius:13px;background:#120d35} .menu-panel.show{display:block;animation:panelIn .18s ease} .menu-panel h4{margin:0 0 8px;font-size:13px;color:#fff} .menu-panel p{margin:0;color:#9d92c7;font-size:11px;line-height:1.5} .menu-panel .panel-action{display:flex;align-items:center;gap:7px;margin-top:10px;padding:9px 10px;border-radius:9px;background:#241353;color:#fff;font-size:11px;font-weight:900} .menu-panel .panel-action:hover{background:#351a73} @keyframes panelIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}} /* Wallet siempre visible arriba del panel lateral, justo debajo del logo. */ .sidebar{display:flex;flex-direction:column} .sidebar>.logo{order:0} .sidebar>.mini-card{order:1;margin:0 0 12px;padding:13px;border-color:rgba(97,217,255,.34);background:linear-gradient(145deg,#163854,#10283e);box-shadow:0 10px 28px rgba(0,0,0,.24)} .sidebar>.mini-card strong{display:flex;align-items:center;gap:7px;color:#fff} .sidebar>.mini-card p{margin:6px 0 10px} .sidebar>.mini-card button{min-height:42px} .sidebar>.menu-group{order:2} .sidebar>#rtkSidebarBonus,.sidebar>.rtk-sidebar-bonus{order:3} .sidebar>.mini-card.is-live{border-color:rgba(97,217,255,.62);box-shadow:0 0 0 1px rgba(97,217,255,.12),0 10px 28px rgba(0,0,0,.28)} /* Acceso claro: iniciar sesión ocupa una fila propia debajo de Crear cuenta. */ .rtk-hero-login{ flex:1 0 100%; min-height:48px; border:1px solid rgba(255,216,61,.48); border-radius:12px; background:rgba(12,7,35,.78); color:#fff; font-weight:900; cursor:pointer; } .rtk-hero-login:hover{background:rgba(155,77,255,.24);border-color:#ffd83d} .rtk-hero-login:focus-visible{outline:3px solid rgba(255,216,61,.42);outline-offset:2px} /* Mini sección de depósitos y links de regalo. */ .rtk-wallet-links{margin:16px 0;padding:16px;border:1px solid rgba(155,77,255,.34);border-radius:18px;background:linear-gradient(145deg,rgba(31,18,70,.95),rgba(12,8,31,.96))}.rtk-wallet-links-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}.rtk-wallet-links-head>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:linear-gradient(135deg,#9b4dff,#6330bd);color:#ffd83d}.rtk-wallet-links h2{margin:0;font-size:17px}.rtk-wallet-links p{margin:3px 0 0;color:#a99dcc;font-size:11px}.rtk-wallet-links-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.rtk-wallet-links-grid a{display:grid;grid-template-columns:34px minmax(0,1fr) 16px;align-items:center;gap:9px;padding:12px;border:1px solid rgba(255,255,255,.10);border-radius:13px;background:rgba(255,255,255,.045);color:#fff}.rtk-wallet-links-grid a>i:first-child{color:#ffd83d;font-size:19px}.rtk-wallet-links-grid b,.rtk-wallet-links-grid small{display:block}.rtk-wallet-links-grid b{font-size:12px}.rtk-wallet-links-grid small{margin-top:3px;color:#9f94c1;font-size:9px}.rtk-wallet-links-grid a>i:last-child{color:#756a99;font-size:10px}@media(max-width:560px){.rtk-wallet-links-grid{grid-template-columns:1fr}} /* ============================================================ MOBILE SCROLL RECOVERY En Android/Chrome/WebView algunos estados de overflow:hidden del body pueden quedarse pegados después de cerrar drawer, search o Wallet. En móvil no necesitamos bloquear el documento: las capas son fixed y ya interceptan los toques. Así evitamos el freeze. ============================================================ */ html,body{overflow-x:hidden} body:not(.is-locked){overflow-y:auto!important} @media(max-width:1023px){ html{ height:auto!important; min-height:100%!important; overflow-y:auto!important; overscroll-behavior-y:auto!important; } body, body.is-locked, body.drawer-open, body.search-open{ height:auto!important; min-height:100%!important; max-height:none!important; overflow-y:auto!important; overscroll-behavior-y:auto!important; touch-action:auto!important; } .sidebar,.search,.modal{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } .rtk-quick-slider, .rtk-quick-slider__viewport, .rtk-quick-slider__track{ touch-action:pan-y pinch-zoom!important; } .snap-row, .provider-tabs, .rtk-start-grid, .urgentgames-grid, .arcade-grid{ overscroll-behavior-y:auto!important; } } /* ============================================================ DESKTOP SCROLL RECOVERY is-locked se comparte entre drawer, búsqueda y wallet. Si alguno de esos flujos deja la clase huérfana, el CSS inline del lobby (body.is-locked{overflow:hidden}) congela el documento completo. En desktop recuperamos el scroll SOLO cuando no existe ninguna capa que realmente necesite bloquear el fondo. ============================================================ */ @media(min-width:1024px){ @supports selector(body:has(#walletModal.show)){ body.is-locked:not(.drawer-open):not(.search-open):not(:has(#walletModal.show)){ height:auto!important; min-height:100%!important; max-height:none!important; overflow-y:auto!important; overscroll-behavior-y:auto!important; touch-action:auto!important; } } } /* ============================================================ HARD SCROLL UNLOCK El lobby no debe inmovilizar nunca el documento completo. Drawer, búsqueda y Wallet son capas fixed y gestionan su propia interacción. Esto neutraliza cualquier is-locked huérfano, estilos inline o estado restaurado por BFCache y deja el eje vertical siempre disponible. ============================================================ */ html, body, body.is-locked, body.drawer-open, body.search-open{ height:auto!important; min-height:100%!important; max-height:none!important; overflow-y:auto!important; overscroll-behavior-y:auto!important; touch-action:pan-y pinch-zoom!important; } body{ position:relative!important; top:auto!important; bottom:auto!important; } .modal,.search,.sidebar{ overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } /* El loader de salida no debe poder congelar el lobby para siempre si una navegación falla o la página vuelve desde el back/forward cache. */ #launchLoader.show{animation:rtkLaunchLoaderFailSafe 0s 5s forwards} @keyframes rtkLaunchLoaderFailSafe{to{opacity:0;visibility:hidden;pointer-events:none}}