/* * hub-front-themes: layout y detalles del theme casino por pantalla y tamaño (E1.F10–F13), todo bajo [data-theme="casino"]. * Cada sección nombra los marcos que reproduce (D5). Los tokens están en ../tokens.css. * * E1.F10 (Casino, marcos D-*): medidas, fuentes, colores y orden copiados del HTML de cada marco del canvas aprobado. * Convención de selectores (html lleva data-theme, data-size y data-kh a la vez): * [data-theme="casino"] .x todos los tamaños * [data-theme="casino"][data-size="desktop"] .x un tamaño (desktop | tablet-h | tablet-v | movil-h | movil-v) * [data-theme="casino"][data-kh] .x dentro de KitchHero * [data-size="…"] [data-theme="casino"] .kh-welcome la bienvenida (siempre Casino, D20, aunque el theme sea otro) * Pantalla actual: .kh-shell:has(.kh-view-slot[data-view=juegos|salas|rankings|misJugadas|compas]). */ /* ══ E1.F10.T1 · Marco común: encabezado, navegación y cuenta (D-Desktop, D-Inicio-TabletH y el resto) ══ */ [data-theme="casino"] .kh-nav__link { font-weight: 400; } [data-theme="casino"] .kh-nav--header .kh-nav__link[aria-current="page"] { font-weight: 400; border-bottom-width: 1px; padding-bottom: 6px; } [data-theme="casino"] .kh-account--pill { background: rgba(8, 26, 20, 0.7); } [data-theme="casino"] .kh-account__avatar { background: rgba(8, 26, 20, 0.7); font: 700 16px Cinzel, serif; color: #F2D38A; } [data-theme="casino"] .kh-account--pill .kh-account__avatar { background: none; } /* Escritorio (D-Desktop): 30/52 px, logo 62, marca 26 px */ [data-theme="casino"][data-size="desktop"] .kh-shell[data-nav="header"] { gap: 22px; } [data-theme="casino"][data-size="desktop"] .kh-shell:has(.kh-view-slot[data-view="salas"]) { gap: 26px; } [data-theme="casino"][data-size="desktop"] .kh-shell:has(.kh-view-slot[data-view="compas"]) { gap: 24px; } /* Tablet H (D-Inicio-TabletH, D-Salas-TabletH, D-TabletH): 26/38 px, logo 50, marca 20 px sin lema */ [data-theme="casino"][data-size="tablet-h"] .kh-shell[data-nav="header"] { padding: 26px 38px; gap: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-shell:has(.kh-view-slot[data-view="salas"]) { gap: 22px; } [data-theme="casino"][data-size="tablet-h"] .kh-shell:has(.kh-view-slot[data-view="rankings"]) { gap: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-header { gap: 14px; } [data-theme="casino"][data-size="tablet-h"] .kh-header__logo { width: 50px; height: 50px; } [data-theme="casino"][data-size="tablet-h"] .kh-brand__name { font-size: 20px; letter-spacing: 4px; } [data-theme="casino"][data-size="tablet-h"] .kh-brand__tag { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-nav--header { margin-left: 30px; gap: 22px; font-size: 13px; } [data-theme="casino"][data-size="tablet-h"] .kh-nav--header .kh-nav__link { padding: 14px 0 6px; } [data-theme="casino"][data-size="tablet-h"] .kh-account--pill { padding: 4px 16px 4px 4px; } /* Tablet V (D-Inicio-TabletV, D-Salas-TabletV, D-Rankings-TabletV, D-TabletV): menú en su propia fila, centrado */ [data-theme="casino"][data-size="tablet-v"] .kh-shell[data-nav="header"] { padding: 30px 34px; gap: 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-shell:has(.kh-view-slot[data-view="salas"]) { gap: 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-header { flex-wrap: wrap; column-gap: 14px; row-gap: 10px; } [data-theme="casino"][data-size="tablet-v"] .kh-header__logo { width: 52px; height: 52px; } [data-theme="casino"][data-size="tablet-v"] .kh-brand__name { font-size: 20px; letter-spacing: 4px; } [data-theme="casino"][data-size="tablet-v"] .kh-shell:has(.kh-view-slot[data-view="juegos"]) .kh-brand__tag { display: block; font-size: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-nav--header { order: 5; flex: 1 0 100%; margin: 0; justify-content: center; gap: 30px; font-size: 13px; letter-spacing: 3px; border-top: 1px solid #7A6230; border-bottom: 1px solid #7A6230; } [data-theme="casino"][data-size="tablet-v"] .kh-nav--header .kh-nav__link { padding: 14px 0 12px; } [data-theme="casino"][data-size="tablet-v"] .kh-nav--header .kh-nav__link[aria-current="page"] { font-weight: 700; padding: 14px 0 11px; } [data-theme="casino"][data-size="tablet-v"] .kh-account { order: 3; } [data-theme="casino"][data-size="tablet-v"] .kh-account--pill { padding: 4px 16px 4px 4px; } /* Tablets fuera del Inicio: cuenta redonda de 46 px (D-Salas-TabletH/V, D-TabletH, D-MisJugadas-TabletH) */ [data-theme="casino"][data-size="tablet-h"] .kh-shell:not(:has(.kh-view-slot[data-view="juegos"])) .kh-account--pill, [data-theme="casino"][data-size="tablet-v"] .kh-shell:not(:has(.kh-view-slot[data-view="juegos"])) .kh-account--pill, [data-theme="casino"][data-size="movil-h"] .kh-account--pill { padding: 0; border: 0; background: none; } [data-theme="casino"][data-size="tablet-h"] .kh-shell:not(:has(.kh-view-slot[data-view="juegos"])) .kh-account--pill .kh-account__avatar, [data-theme="casino"][data-size="tablet-v"] .kh-shell:not(:has(.kh-view-slot[data-view="juegos"])) .kh-account--pill .kh-account__avatar { width: 46px; height: 46px; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"][data-size="tablet-h"] .kh-shell:not(:has(.kh-view-slot[data-view="juegos"])) .kh-account__nick, [data-theme="casino"][data-size="tablet-v"] .kh-shell:not(:has(.kh-view-slot[data-view="juegos"])) .kh-account__nick, [data-theme="casino"][data-size="movil-h"] .kh-account__nick { display: none; } /* Móvil H (D-Inicio-MovilH, D-MovilH, D-Rankings-MovilH): 12/22/14 px, logo 40, marca 15 px, menú de 44 px, cuenta redonda */ [data-theme="casino"][data-size="movil-h"] .kh-shell[data-nav="header"] { padding: 12px 22px 14px; gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-shell:has(.kh-view-slot[data-view="salas"]) { gap: 8px; } [data-theme="casino"][data-size="movil-h"] .kh-header { gap: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-header__logo { width: 40px; height: 40px; } [data-theme="casino"][data-size="movil-h"] .kh-brand__name { font-size: 15px; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-h"] .kh-nav--header { margin-left: 18px; gap: 4px; font-size: 11px; letter-spacing: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-nav--header .kh-nav__link { display: flex; align-items: center; height: 44px; padding: 0 10px; border: 0; } [data-theme="casino"][data-size="movil-h"] .kh-nav--header .kh-nav__link[aria-current="page"] { font-weight: 700; padding: 0 10px; } [data-theme="casino"][data-size="movil-h"] .kh-account__avatar { width: 44px; height: 44px; background: rgba(8, 26, 20, 0.7); } /* Móvil V (D-MovilV y todos los *-MovilV): encabezado propio (logo 40, marca 15 px, cuenta 44) y menú fijo al pie */ [data-theme="casino"] .kh-header[data-variant="mobile"] { gap: 10px; } [data-theme="casino"] .kh-header[data-variant="mobile"] .kh-header__logo { width: 40px; height: 40px; } [data-theme="casino"] .kh-header[data-variant="mobile"] .kh-brand__name { font-size: 15px; letter-spacing: 3px; } [data-theme="casino"] .kh-header[data-variant="mobile"] .kh-brand__tag, [data-theme="casino"] .kh-header[data-variant="mobile"] .kh-nav { display: none; } [data-theme="casino"] .kh-shell[data-nav="bottom"] { gap: 14px; } [data-theme="casino"] .kh-shell[data-nav="bottom"]:has(.kh-view-slot[data-view="rankings"]), [data-theme="casino"] .kh-shell[data-nav="bottom"]:has(.kh-view-slot[data-view="misJugadas"]), [data-theme="casino"] .kh-shell[data-nav="bottom"]:has(.kh-view-slot[data-view="compas"]) { gap: 12px; } /* Mis compas en móvil dibuja su propio encabezado (volver, título, cuenta): sin el de la marca (D-MisCompas-MovilV) */ [data-theme="casino"] .kh-shell:has(.kh-view-slot[data-view="compas"]) > .kh-header[data-variant="mobile"] { display: none; } /* El fondo cubre toda la página, no solo la ventana (el marco lo estira a su alto completo) */ html[data-theme="casino"] { min-height: 100%; } [data-theme="casino"] body { background-attachment: scroll; background-size: cover; } /* ══ Base de las vistas de Casino: sin viñetas, sin subrayado, sin márgenes del navegador ══ */ [data-theme="casino"] .kh-view ul, [data-theme="casino"] .kh-view ol, [data-theme="casino"] .kh-board ol, [data-theme="casino"] .kh-compas ul { list-style: none; margin: 0; padding: 0; } [data-theme="casino"] .kh-view h1, [data-theme="casino"] .kh-view h2, [data-theme="casino"] .kh-view h3, [data-theme="casino"] .kh-view p, [data-theme="casino"] .kh-view dl, [data-theme="casino"] .kh-view dd, [data-theme="casino"] .kh-board h2, [data-theme="casino"] .kh-board p { margin: 0; } [data-theme="casino"] .kh-view a, [data-theme="casino"] .kh-board a { text-decoration: none; } [data-theme="casino"] .kh-view-slot > .kh-view { flex: 1 0 auto; } [data-theme="casino"] .kh-seg__btn { border-radius: 0; cursor: pointer; } /* ══ E1.F10.T1 · Inicio escritorio (D-Desktop, D-Estado-SinCompas-Desktop) ══ */ [data-theme="casino"] .kh-inicio { display: flex; flex-direction: column; gap: 14px; } [data-theme="casino"] .kh-inicio__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } [data-theme="casino"] .kh-greet { display: none; text-align: center; } [data-theme="casino"] .kh-greet__title { font: 700 30px Cinzel, serif; letter-spacing: 2px; text-transform: uppercase; } [data-theme="casino"] .kh-greet__text { font: italic 400 22px 'Cormorant Garamond', serif; color: #E3B85A; } /* Salas en el Inicio: el bloque */ [data-theme="casino"] .kh-rooms--home { display: flex; flex-direction: column; gap: 12px; } [data-theme="casino"] .kh-rooms__head { display: flex; align-items: baseline; gap: 14px; } [data-theme="casino"] .kh-rooms__title { font-family: Cinzel, serif; font-size: 20px; letter-spacing: 3px; color: #F2D38A; } [data-theme="casino"] .kh-rooms__sub { font: italic 400 18px 'Cormorant Garamond', serif; color: #D9A845; } [data-theme="casino"] .kh-rooms__all { margin-left: auto; font: 700 12px Cinzel, serif; letter-spacing: 3px; color: #F2D38A; text-decoration: none; } [data-theme="casino"] .kh-rooms__back { font: 400 12px Cinzel, serif; letter-spacing: 3px; color: #D9A845; text-decoration: none; } /* Títulos por tamaño: el corto (data-short) y el "ver todas" largo (data-long). Donde el marco los usa, el texto propio queda en 0 px (sin espaciado, para que no ocupe) y se pinta el del atributo; el lector de pantalla lee el propio. */ [data-theme="casino"] .kh-rooms__title[data-short]::before { content: attr(data-short); content: attr(data-short) / ''; } [data-theme="casino"] .kh-rooms__all[data-long]::before { content: attr(data-long); content: attr(data-long) / ''; } [data-theme="casino"] .kh-rooms__title[data-short]::before, [data-theme="casino"] .kh-rooms__all[data-long]::before { display: none; } /* Una sala: "Pasapaloma · GATO" / "Cóndor Veloz 7 y 1 más · 2 de 4" / [ENTRA YA] jugaste con ellos ayer */ [data-theme="casino"] .kh-room { display: flex; align-items: center; gap: 14px; background: rgba(14, 42, 34, 0.85); border: 1px solid #7A6230; border-radius: 14px; padding: 12px 14px; } [data-theme="casino"] .kh-room__icon { width: 58px; height: 58px; flex: none; border-radius: 50%; object-fit: cover; } [data-theme="casino"] .kh-room__body { flex-grow: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; } [data-theme="casino"] .kh-room__body::before, [data-theme="casino"] .kh-room__body::after { content: ''; flex: 1 0 100%; height: 0; } [data-theme="casino"] .kh-room__label { display: none; order: 0; font: 600 18px 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-room__game { order: 1; font: 600 22px 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-room__code { order: 2; font: 600 22px 'Cormorant Garamond', serif; color: #F2D38A; } [data-theme="casino"] .kh-room__code::before { content: '\00a0·\00a0'; color: #F4E6C4; } [data-theme="casino"] .kh-room__body::before { order: 3; } [data-theme="casino"] .kh-room__who { order: 4; font-size: 13px; color: #CDBB92; } [data-theme="casino"] .kh-room__slots { order: 5; font-size: 13px; color: #CDBB92; } [data-theme="casino"] .kh-room__slots::before { content: '\00a0·\00a0'; } [data-theme="casino"] .kh-room__seats { display: none; } [data-theme="casino"] .kh-room__body::after { order: 6; } [data-theme="casino"] .kh-room__state { order: 7; margin-top: 4px; font: 700 10px Cinzel, serif; letter-spacing: 2px; padding: 3px 8px; border-radius: 999px; border: 1px solid #D9A845; background: rgba(217, 168, 69, 0.18); color: #F2D38A; } [data-theme="casino"] .kh-room__state[data-state="wait"] { border-color: #7A6230; background: transparent; color: #CDBB92; } [data-theme="casino"] .kh-room__ctx { order: 8; margin: 4px 0 0 8px; font: italic 400 16px 'Cormorant Garamond', serif; color: #D9A845; } [data-theme="casino"] .kh-room__join { flex: none; min-height: 0; font-size: 13px; letter-spacing: 2px; padding: 12px 18px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } [data-theme="casino"] .kh-rooms__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } /* Destacado */ [data-theme="casino"] .kh-featured { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.78); padding: 12px 22px; display: flex; align-items: center; gap: 22px; } [data-theme="casino"] .kh-featured__art { width: 100px; height: 100px; flex: none; border-radius: 50%; object-fit: cover; } [data-theme="casino"] .kh-featured__body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } [data-theme="casino"] .kh-featured__eyebrow { font: 400 12px Cinzel, serif; letter-spacing: 4px; color: #D9A845; } [data-theme="casino"] .kh-featured__name { font: 600 38px/1 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-featured__desc { font-size: 15px; color: #CDBB92; } [data-theme="casino"] .kh-featured__actions { display: flex; align-items: center; gap: 12px; flex: none; } [data-theme="casino"] .kh-featured .kh-btn--primary { padding: 15px 28px; } [data-theme="casino"] .kh-btn--secondary { background: rgba(8, 26, 20, 0.7); border-color: #D9A845; color: #F2D38A; } [data-theme="casino"] .kh-featured .kh-btn--secondary { font-size: 13px; letter-spacing: 2px; padding: 13px 20px; } /* Elige tu mesa */ [data-theme="casino"] .kh-games { display: flex; flex-direction: column; gap: 14px; } [data-theme="casino"] .kh-games__title { text-align: center; font-family: Cinzel, serif; font-size: 16px; letter-spacing: 6px; color: #D9A845; } [data-theme="casino"] .kh-games__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; } [data-theme="casino"] .kh-game { display: flex; min-width: 0; } [data-theme="casino"] .kh-game__link { flex: 1 1 auto; min-width: 0; text-decoration: none; color: #F4E6C4; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px 16px; border: 1px solid #7A6230; border-radius: 18px; background: rgba(8, 26, 20, 0.6); text-align: center; } [data-theme="casino"] .kh-game__icon { display: block; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; } [data-theme="casino"] .kh-game__name { font: 600 24px/1 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-game__tag { font-size: 12px; color: #CDBB92; } [data-theme="casino"] .kh-game__mine { font: italic 400 17px 'Cormorant Garamond', serif; color: #F2D38A; } [data-theme="casino"] .kh-games__soon { text-align: center; font: italic 400 18px 'Cormorant Garamond', serif; color: #CDBB92; } /* Cuadro de honor (tarjeta lateral) */ [data-theme="casino"] .kh-board { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.78); padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; height: 100%; } [data-theme="casino"] .kh-board__title { text-align: center; font-family: Cinzel, serif; font-size: 22px; letter-spacing: 4px; color: #F2D38A; } [data-theme="casino"] .kh-board__sub { text-align: center; font: italic 400 20px 'Cormorant Garamond', serif; color: #D9A845; } [data-theme="casino"] .kh-seg { display: flex; justify-content: center; gap: 8px; } [data-theme="casino"] .kh-seg__btn { padding: 6px 10px; border: 1px solid #7A6230; background: transparent; color: #F4E6C4; font: 400 11px Cinzel, serif; letter-spacing: 2px; text-transform: uppercase; } [data-theme="casino"] .kh-seg__btn[aria-pressed="true"] { background: #D9A845; border-color: #D9A845; color: #1B1206; } [data-theme="casino"] .kh-rk-list { display: flex; flex-direction: column; gap: 4px; } [data-theme="casino"] .kh-rk-row { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; background: transparent; border: 1px solid transparent; } [data-theme="casino"] .kh-rk-row[data-me="true"] { background: rgba(217, 168, 69, 0.18); border-color: #D9A845; } [data-theme="casino"] .kh-rk-row__rank { width: 30px; flex: none; font: 700 16px Cinzel, serif; color: #D9A845; } [data-theme="casino"] .kh-rk-row__nick { flex-grow: 1; min-width: 0; font: 600 19px 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-rk-row__score { font: 700 16px Cinzel, serif; color: #F2D38A; } [data-theme="casino"] .kh-board__more { margin-top: auto; text-align: center; font: 700 16px Cinzel, serif; letter-spacing: 3px; text-transform: uppercase; color: #1B1206; background: #E3B85A; padding: 15px; text-decoration: none; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); } [data-theme="casino"][data-size="desktop"] .kh-inicio { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: 30px; align-items: stretch; } [data-theme="casino"][data-size="desktop"] .kh-inicio__main { gap: 22px; } [data-theme="casino"][data-size="desktop"] .kh-rooms--home { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 18px 22px; } /* Sin compas (D-Estado-SinCompas-Desktop / -MovilV): el aviso reemplaza al bloque de salas */ [data-theme="casino"] .kh-rooms[data-state="empty"] > .kh-rooms__head { display: none; } [data-theme="casino"] .kh-rooms--home[data-state="empty"] { border: 0; background: none; padding: 0; } [data-theme="casino"] .kh-rooms__empty { border: 1px dashed #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 20px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 22px; row-gap: 6px; align-items: center; text-align: left; } [data-theme="casino"] .kh-rooms__empty .kh-empty__title { grid-column: 1; font-family: Cinzel, serif; font-size: 20px; letter-spacing: 3px; color: #F2D38A; } [data-theme="casino"] .kh-rooms__empty .kh-empty__text { grid-column: 1; font: italic 400 20px 'Cormorant Garamond', serif; color: #F4E6C4; } [data-theme="casino"] .kh-rooms__empty .kh-rooms__create { grid-column: 2; grid-row: 1 / span 2; border: 0; border-radius: 0; background: #E3B85A; color: #1B1206; font-size: 14px; letter-spacing: 3px; padding: 15px 28px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); } [data-theme="casino"][data-size="desktop"] .kh-inicio:has(.kh-rooms[data-state="empty"]) .kh-featured { padding: 16px 22px; } [data-theme="casino"][data-size="desktop"] .kh-inicio:has(.kh-rooms[data-state="empty"]) .kh-featured__art { width: 116px; height: 116px; } /* ══ E1.F10.T1 · Inicio tablet H (D-Inicio-TabletH): salas y destacado lado a lado, sin cuadro de honor ══ */ [data-theme="casino"][data-size="tablet-h"] .kh-inicio { gap: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-inicio__side { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-inicio__main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-inicio__main > .kh-games { grid-column: 1 / -1; gap: 12px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 16px 18px; gap: 10px; height: 100%; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__title { grid-column: 1; font-size: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__sub { grid-column: 1; font-size: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__all { grid-column: 2; grid-row: 1 / span 2; padding: 14px 0; font-size: 11px; letter-spacing: 2px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__list { display: flex; flex-direction: column; gap: 10px; } [data-theme="casino"][data-size="tablet-h"] .kh-room { gap: 12px; padding: 10px 12px; } [data-theme="casino"][data-size="tablet-h"] .kh-room__icon { width: 54px; height: 54px; } [data-theme="casino"][data-size="tablet-h"] .kh-room__game, [data-theme="casino"][data-size="tablet-h"] .kh-room__code { font-size: 20px; } [data-theme="casino"][data-size="tablet-h"] .kh-room__state { margin-top: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-room__ctx { margin-top: 3px; font-size: 15px; } [data-theme="casino"][data-size="tablet-h"] .kh-room__join { font-size: 12px; padding: 15px 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-featured { display: grid; grid-template-columns: 104px minmax(0, 1fr); column-gap: 16px; row-gap: 10px; padding: 16px 20px; align-items: center; } [data-theme="casino"][data-size="tablet-h"] .kh-featured__art { width: 104px; height: 104px; } [data-theme="casino"][data-size="tablet-h"] .kh-featured__eyebrow { font-size: 11px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-featured__name { font-size: 34px; } [data-theme="casino"][data-size="tablet-h"] .kh-featured__desc { font-size: 14px; } [data-theme="casino"][data-size="tablet-h"] .kh-featured__actions { grid-column: 1 / -1; align-self: end; } [data-theme="casino"][data-size="tablet-h"] .kh-featured .kh-btn--primary { padding: 15px 30px; } [data-theme="casino"][data-size="tablet-h"] .kh-featured .kh-btn--secondary { padding: 14px 20px; } [data-theme="casino"][data-size="tablet-h"] .kh-games__title { font-size: 15px; } [data-theme="casino"][data-size="tablet-h"] .kh-games__grid { gap: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-game__link { gap: 8px; padding: 14px 10px; } [data-theme="casino"][data-size="tablet-h"] .kh-game__icon { width: 112px; height: 112px; } [data-theme="casino"][data-size="tablet-h"] .kh-game__name { font-size: 22px; } [data-theme="casino"][data-size="tablet-h"] .kh-game__tag { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-game__mine { font-size: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__title[data-short], [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__all[data-long] { font-size: 0; letter-spacing: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__title[data-short]::before { display: inline; font-size: 16px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__all[data-long]::before { display: inline; font-size: 11px; letter-spacing: 2px; } /* ══ E1.F10.T2 · Inicio tablet V (D-Inicio-TabletV) ══ */ [data-theme="casino"][data-size="tablet-v"] .kh-inicio, [data-theme="casino"][data-size="tablet-v"] .kh-inicio__main { gap: 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 18px 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__title { grid-column: 1; font-size: 18px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__sub { grid-column: 1; font-size: 17px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__all { grid-column: 2; grid-row: 1 / span 2; padding: 14px 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__all[data-long] { font-size: 0; letter-spacing: 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__all[data-long]::before { display: inline; font-size: 12px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__list { gap: 12px; } /* Sala en dos filas: ficha + texto arriba; estado a la izquierda y SENTARME a la derecha abajo */ [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; padding: 12px 14px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room__icon { width: 56px; height: 56px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room__game, [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room__code { font-size: 21px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room__ctx { order: 7; margin: 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room__state { position: absolute; left: 14px; bottom: 24px; margin: 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--home .kh-room__join { grid-column: 1 / -1; justify-self: end; font-size: 12px; padding: 15px 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-featured { display: grid; grid-template-columns: 150px minmax(0, 1fr); column-gap: 22px; row-gap: 8px; padding: 18px 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-featured__art { grid-row: 1 / span 2; width: 150px; height: 150px; align-self: center; } [data-theme="casino"][data-size="tablet-v"] .kh-featured__body { gap: 8px; align-self: end; } [data-theme="casino"][data-size="tablet-v"] .kh-featured__name { font-size: 42px; } [data-theme="casino"][data-size="tablet-v"] .kh-featured__desc { font-size: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-featured__actions { grid-column: 2; align-self: start; margin-top: 4px; } [data-theme="casino"][data-size="tablet-v"] .kh-featured .kh-btn--primary { padding: 15px 30px; } [data-theme="casino"][data-size="tablet-v"] .kh-featured .kh-btn--secondary { padding: 14px 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-games__title { font-size: 15px; } [data-theme="casino"][data-size="tablet-v"] .kh-games__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-game { width: 240px; } [data-theme="casino"][data-size="tablet-v"] .kh-game__link { gap: 8px; padding: 14px 10px; } [data-theme="casino"][data-size="tablet-v"] .kh-game__icon { width: 100px; height: 100px; } [data-theme="casino"][data-size="tablet-v"] .kh-game__name { font-size: 23px; } [data-theme="casino"][data-size="tablet-v"] .kh-game__tag { display: none; } /* ══ E1.F10.T2 · Inicio móvil V (D-MovilV, D-Inicio-Bro-MovilV, D-Estado-SinCompas-MovilV) ══ */ [data-theme="casino"][data-size="movil-v"] .kh-greet { display: block; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home { gap: 8px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__head { align-items: center; gap: 8px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__title { font-size: 12px; color: #D9A845; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__title[data-short] { font-size: 0; letter-spacing: 0; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__title[data-short]::before { display: inline; font-size: 12px; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__sub { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__all { display: flex; align-items: center; min-height: 44px; font-size: 11px; letter-spacing: 2px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-rooms__list { display: flex; flex-direction: column; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room:nth-child(n+2) { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room { gap: 10px; border-color: #D9A845; background: rgba(8, 26, 20, 0.75); padding: 10px 12px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__icon { width: 46px; height: 46px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__label { display: block; flex: 1 0 100%; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__game, [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__code, [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__body::before { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__who, [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__slots { font-size: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__state { margin-top: 3px; font-size: 9px; padding: 2px 7px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__ctx { margin: 3px 0 0 6px; font-size: 14px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--home .kh-room__join { font-size: 12px; letter-spacing: 1px; padding: 15px 12px; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); } [data-theme="casino"][data-size="movil-v"] .kh-featured { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; border-radius: 16px; padding: 14px; } [data-theme="casino"][data-size="movil-v"] .kh-featured__art { width: 76px; height: 76px; } [data-theme="casino"][data-size="movil-v"] .kh-featured__body { gap: 2px; } [data-theme="casino"][data-size="movil-v"] .kh-featured__eyebrow { font-size: 10px; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-v"] .kh-featured__name { font-size: 26px; line-height: 1.05; } [data-theme="casino"][data-size="movil-v"] .kh-featured__desc { font-size: 13px; } [data-theme="casino"][data-size="movil-v"] .kh-featured__actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } [data-theme="casino"][data-size="movil-v"] .kh-featured .kh-btn--primary { font-size: 13px; letter-spacing: 2px; padding: 15px 10px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } [data-theme="casino"][data-size="movil-v"] .kh-featured .kh-btn--secondary { font-size: 12px; padding: 14px 10px; } [data-theme="casino"][data-size="movil-v"] .kh-games__title { font-size: 12px; font-weight: 400; letter-spacing: 5px; } [data-theme="casino"][data-size="movil-v"] .kh-games__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-game[data-featured="true"] { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-game__link { gap: 6px; padding: 12px 8px; border-radius: 16px; } [data-theme="casino"][data-size="movil-v"] .kh-game__icon { width: 92px; height: 92px; } [data-theme="casino"][data-size="movil-v"] .kh-game__name { font-size: 19px; } [data-theme="casino"][data-size="movil-v"] .kh-game__tag { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-game__mine { font-size: 15px; } [data-theme="casino"][data-size="movil-v"] .kh-games__soon { font-size: 16px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms__empty { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 10px; border-radius: 16px; background: rgba(8, 26, 20, 0.75); padding: 18px 16px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms__empty .kh-empty__title { font-size: 14px; letter-spacing: 2px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms__empty .kh-empty__text { font-size: 18px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms__empty .kh-rooms__create { grid-column: 1; grid-row: auto; margin-top: 4px; font-size: 13px; letter-spacing: 2px; padding: 15px 30px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } /* ══ E1.F10.T2 · Inicio móvil H (D-Inicio-MovilH): salas y destacado lado a lado; 5 juegos en una fila, sin título ══ */ [data-theme="casino"][data-size="movil-h"] .kh-inicio, [data-theme="casino"][data-size="movil-h"] .kh-inicio__main { gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-inicio__main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-inicio__main > .kh-games { grid-column: 1 / -1; gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home { height: 100%; border: 1px solid #D9A845; border-radius: 16px; background: rgba(8, 26, 20, 0.75); padding: 10px 12px; gap: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-rooms__head { align-items: center; gap: 8px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short] { font-size: 0; letter-spacing: 0; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short]::before { display: inline; font-size: 12px; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-rooms__sub { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-rooms__all { display: flex; align-items: center; min-height: 36px; font-size: 10px; letter-spacing: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-rooms__list { display: flex; flex-direction: column; gap: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room { gap: 8px; padding: 0; border: 0; background: none; border-radius: 0; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__icon { width: 40px; height: 40px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__game, [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__code { font-size: 16px; line-height: 1.1; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__who, [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__slots { font-size: 11px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__state { order: 5; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; font: 400 11px Jost, system-ui, sans-serif; letter-spacing: 0; color: #F2D38A; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__state::before { content: '\00a0·\00a0'; color: #CDBB92; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__state[data-state="wait"] { color: #CDBB92; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__ctx { margin: 0; font-size: 13px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--home .kh-room__join { font-size: 11px; letter-spacing: 1px; padding: 15px 11px; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); } [data-theme="casino"][data-size="movil-h"] .kh-featured { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; row-gap: 8px; border-radius: 16px; padding: 10px 12px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__art { width: 64px; height: 64px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__body { gap: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__eyebrow { font-size: 9px; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__name { font-size: 22px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__desc { font-size: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__actions { grid-column: 1 / -1; align-self: end; gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-featured__actions .kh-btn { flex: 1 1 0; } [data-theme="casino"][data-size="movil-h"] .kh-featured .kh-btn--primary { font-size: 12px; letter-spacing: 2px; padding: 15px 10px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } [data-theme="casino"][data-size="movil-h"] .kh-featured .kh-btn--secondary { font-size: 11px; padding: 14px 10px; } [data-theme="casino"][data-size="movil-h"] .kh-games__title { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-games__grid { gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-game__link { gap: 4px; padding: 8px 6px; border-radius: 14px; } [data-theme="casino"][data-size="movil-h"] .kh-game__icon { width: 60px; height: 60px; } [data-theme="casino"][data-size="movil-h"] .kh-game__name { font-size: 16px; } [data-theme="casino"][data-size="movil-h"] .kh-game__tag { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-game__mine { font-size: 13px; } [data-theme="casino"][data-size="movil-h"] .kh-games__soon { font-size: 15px; } /* ══ E1.F10.T3 · Salas (D-Salas-Desktop, D-Salas-TabletH, D-Salas-TabletV, D-Salas-MovilV, D-MovilH) ══ */ [data-theme="casino"] .kh-rooms--page { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; row-gap: 26px; } [data-theme="casino"] .kh-rooms--page > .kh-rooms__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } [data-theme="casino"] .kh-rooms--page .kh-rooms__title { font: 700 40px Cinzel, serif; letter-spacing: 4px; color: #F4E6C4; } [data-theme="casino"] .kh-rooms--page .kh-rooms__sub { font-size: 24px; color: #E3B85A; } [data-theme="casino"] .kh-rooms--page > .kh-rooms__create { font-size: 14px; letter-spacing: 3px; padding: 15px 28px; } [data-theme="casino"] .kh-rooms--page > .kh-rooms__list, [data-theme="casino"] .kh-rooms--page > .kh-rooms__empty { grid-column: 1 / -1; } [data-theme="casino"] .kh-rooms--page .kh-rooms__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; } /* Tarjeta de mesa: ficha, MESA, código, juego, quién · cupos, estado + relación, SENTARME */ [data-theme="casino"] .kh-rooms--page .kh-room { flex-direction: column; align-items: center; gap: 10px; text-align: center; border-color: #D9A845; border-radius: 22px; background: rgba(8, 26, 20, 0.78); padding: 28px 26px 26px; } [data-theme="casino"] .kh-rooms--page .kh-room__icon { width: 170px; height: 170px; } [data-theme="casino"] .kh-rooms--page .kh-room__body { align-self: stretch; justify-content: center; } [data-theme="casino"] .kh-rooms--page .kh-room__body::before { display: none; } [data-theme="casino"] .kh-rooms--page .kh-room__code { order: 1; flex: 1 0 100%; font: 700 38px/1 Cinzel, serif; letter-spacing: 8px; color: #F2D38A; } [data-theme="casino"] .kh-rooms--page .kh-room__code::before { content: 'MESA'; content: 'MESA' / ''; display: block; margin-bottom: 10px; font: 400 12px/1.35 Cinzel, serif; letter-spacing: 4px; color: #D9A845; } [data-theme="casino"] .kh-rooms--page .kh-room__game { order: 2; flex: 1 0 100%; margin-top: 10px; font-size: 30px; line-height: 1; } [data-theme="casino"] .kh-rooms--page .kh-room__who { order: 3; margin-top: 10px; font-size: 15px; } [data-theme="casino"] .kh-rooms--page .kh-room__slots { order: 4; margin-top: 10px; font-size: 15px; } [data-theme="casino"] .kh-rooms--page .kh-room__body::after { order: 5; } [data-theme="casino"] .kh-rooms--page .kh-room__state { order: 6; margin-top: 10px; font-size: 11px; padding: 4px 10px; } [data-theme="casino"] .kh-rooms--page .kh-room__ctx { order: 7; margin: 10px 0 0 10px; font-size: 19px; } [data-theme="casino"] .kh-rooms--page .kh-room__join { margin-top: 10px; align-self: stretch; font-size: 15px; letter-spacing: 3px; padding: 16px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); } /* Tablet H */ [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page { column-gap: 20px; row-gap: 22px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page > .kh-rooms__head { gap: 4px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__back { padding: 8px 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__title { font-size: 32px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__sub { font-size: 22px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page > .kh-rooms__create { font-size: 13px; padding: 15px 26px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__list { gap: 20px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room { gap: 8px; border-radius: 20px; padding: 24px 20px 20px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__icon { width: 140px; height: 140px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__code { font-size: 32px; letter-spacing: 7px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__code::before { margin-bottom: 8px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__game { margin-top: 8px; font-size: 27px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__who, [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__slots { margin-top: 8px; font-size: 14px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__state { margin-top: 8px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__ctx { flex: 1 0 100%; margin: 8px 0 0; font-size: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-rooms--page .kh-room__join { margin-top: 8px; font-size: 14px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); } /* Tablet V: encabezado centrado con CREAR MESA debajo; mesas en filas (ficha 130 px a la izquierda) */ [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page > .kh-rooms__head { align-items: center; text-align: center; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__back { padding: 10px 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__title { font-size: 36px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page > .kh-rooms__create { margin-top: -8px; font-size: 13px; padding: 15px 26px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__list { justify-self: stretch; display: flex; flex-direction: column; gap: 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room { display: grid; grid-template-columns: 130px minmax(0, 1fr); column-gap: 22px; align-items: center; text-align: left; border-radius: 20px; padding: 20px 24px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__icon { grid-row: 1; grid-column: 1; width: 130px; height: 130px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__body { grid-row: 1; grid-column: 2; justify-content: flex-start; align-items: baseline; row-gap: 8px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__game { order: 1; flex: 0 1 auto; margin: 0; font-size: 32px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__code { order: 2; flex: none; margin-left: auto; font: 700 30px Cinzel, serif; letter-spacing: 6px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__code::before { display: inline; margin: 0 14px 0 0; font-size: 12px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__body::before { display: block; order: 3; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__who, [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__slots { order: 4; margin: 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__slots { order: 5; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__body::after { order: 6; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__state { order: 7; margin: 0; align-self: center; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__ctx { order: 8; margin: 0 0 0 10px; min-height: 49px; display: flex; align-items: center; align-self: center; } [data-theme="casino"][data-size="tablet-v"] .kh-rooms--page .kh-room__join { grid-row: 1; grid-column: 2; align-self: end; justify-self: end; margin: 0; font-size: 14px; padding: 15px 26px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); } /* Móvil V: título centrado, CREAR MESA centrado, mesas en tarjetas de dos filas */ [data-theme="casino"][data-size="movil-v"] .kh-rooms--page { grid-template-columns: minmax(0, 1fr); justify-items: center; row-gap: 14px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page > .kh-rooms__head { align-items: center; text-align: center; gap: 2px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-rooms__back { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-rooms__title { font-size: 24px; letter-spacing: 2px; line-height: 1.15; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-rooms__sub { font-size: 19px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page > .kh-rooms__create { font-size: 12px; letter-spacing: 3px; padding: 14px 26px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-rooms__list { justify-self: stretch; display: flex; flex-direction: column; gap: 14px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room { position: relative; display: grid; grid-template-columns: 60px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; text-align: left; border-radius: 16px; padding: 12px 14px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__icon { width: 60px; height: 60px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__body { justify-content: flex-start; align-items: baseline; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__game { order: 1; flex: 0 1 auto; margin: 0; font-size: 21px; line-height: 1.1; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__code { order: 2; flex: none; margin-left: auto; padding-left: 8px; font: 700 17px Cinzel, serif; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__code::before { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__body::before { display: block; order: 3; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__who { order: 4; margin: 0; font-size: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__slots { order: 5; margin: 0; font-size: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__ctx { order: 7; flex: 1 0 100%; margin: 0; font-size: 15px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__state { position: absolute; left: 14px; bottom: 25px; margin: 0; font-size: 10px; padding: 3px 9px; } [data-theme="casino"][data-size="movil-v"] .kh-rooms--page .kh-room__join { grid-column: 1 / -1; justify-self: end; align-self: auto; margin: 0; font-size: 12px; letter-spacing: 2px; padding: 15px 22px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } /* Móvil H (D-MovilH): título y CREAR MESA en una fila; 3 mesas en columnas */ [data-theme="casino"][data-size="movil-h"] .kh-rooms--page { align-items: center; column-gap: 12px; row-gap: 8px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page > .kh-rooms__head { gap: 0; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-rooms__back { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-rooms__title { font-size: 18px; font-weight: 400; letter-spacing: 3px; color: #F2D38A; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-rooms__sub { font-size: 16px; color: #D9A845; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page > .kh-rooms__create { font-size: 12px; letter-spacing: 2px; padding: 14px 18px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-rooms__list { gap: 14px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room { gap: 3px; border-radius: 16px; padding: 10px 12px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__icon { width: 52px; height: 52px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__game { order: 1; margin: 0; font-size: 19px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__code { order: 2; margin-top: 3px; font-size: 17px; line-height: 1.35; letter-spacing: 4px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__code::before { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__who, [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__slots { margin-top: 3px; font-size: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__state { margin-top: 3px; font-size: 9px; padding: 2px 7px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__ctx { margin: 3px 0 0 6px; font-size: 14px; } [data-theme="casino"][data-size="movil-h"] .kh-rooms--page .kh-room__join { margin-top: auto; font-size: 12px; letter-spacing: 2px; padding: 14px 11px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } /* ══ E1.F10.T4 · Rankings escritorio (D-Rankings-Desktop) ══ */ [data-theme="casino"] .kh-rankings { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 30px; align-items: stretch; } [data-theme="casino"] .kh-rk-games { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.78); padding: 20px 18px; display: flex; flex-direction: column; gap: 10px; } [data-theme="casino"] .kh-rk-games::before { content: '— ELIGE TU MESA —'; content: '— ELIGE TU MESA —' / ''; text-align: center; font: 700 16px Cinzel, serif; letter-spacing: 4px; color: #D9A845; } [data-theme="casino"] .kh-rk-games ul { display: flex; flex-direction: column; gap: 10px; } [data-theme="casino"] .kh-rk-game { width: 100%; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 12px; border-radius: 14px; border: 1px solid #7A6230; background: rgba(14, 42, 34, 0.85); color: #F4E6C4; cursor: pointer; text-align: left; } [data-theme="casino"] .kh-rk-game[aria-pressed="true"] { background: rgba(217, 168, 69, 0.18); border-color: #D9A845; } [data-theme="casino"] .kh-rk-game__icon { grid-row: 1 / span 2; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } [data-theme="casino"] .kh-rk-game__name { grid-row: 1 / span 2; font: 600 21px 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-rk-game__rank-label { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; font: 400 9px Cinzel, serif; letter-spacing: 2px; text-transform: uppercase; color: #CDBB92; } [data-theme="casino"] .kh-rk-game__rank { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; font: 700 20px Cinzel, serif; color: #F2D38A; } [data-theme="casino"] .kh-rk-main { min-width: 0; border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 22px 30px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 18px; row-gap: 16px; align-content: start; } [data-theme="casino"] .kh-rk-head { display: flex; flex-direction: column; align-self: center; } [data-theme="casino"] .kh-rk-title { font-family: Cinzel, serif; font-size: 28px; letter-spacing: 4px; color: #F2D38A; } [data-theme="casino"] .kh-rk-subtitle { font: italic 400 21px 'Cormorant Garamond', serif; color: #D9A845; } [data-theme="casino"] .kh-rk-filters { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } [data-theme="casino"] .kh-rk-filters .kh-seg { gap: 6px; } [data-theme="casino"] .kh-rk-filters .kh-seg__btn { padding: 8px 14px; font-size: 12px; } [data-theme="casino"] .kh-rk-main > .kh-podium, [data-theme="casino"] .kh-rk-main > .kh-rk-list, [data-theme="casino"] .kh-rk-main > .kh-rk-around, [data-theme="casino"] .kh-rk-main > .kh-rk-empty { grid-column: 1 / -1; width: 640px; max-width: 100%; justify-self: center; } /* Podio II · I · III con su pedestal */ [data-theme="casino"] .kh-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 18px; } [data-theme="casino"] .kh-podium__item { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } [data-theme="casino"] .kh-podium__item[data-pos="2"] { order: 1; } [data-theme="casino"] .kh-podium__item[data-pos="1"] { order: 2; } [data-theme="casino"] .kh-podium__item[data-pos="3"] { order: 3; } [data-theme="casino"] .kh-podium__rank { width: 74px; height: 74px; border-radius: 50%; border: 3px solid #D9A845; display: grid; place-items: center; font: 700 26px Cinzel, serif; background: rgba(8, 26, 20, 0.8); color: #F2D38A; } [data-theme="casino"] .kh-podium__item[data-pos="1"] .kh-podium__rank { background: #E3B85A; color: #1B1206; } [data-theme="casino"] .kh-podium__avatar { display: none; } [data-theme="casino"] .kh-podium__nick { font: 600 22px 'Cormorant Garamond', serif; text-align: center; } [data-theme="casino"] .kh-podium__score { font: 700 20px Cinzel, serif; color: #F2D38A; } [data-theme="casino"] .kh-podium__bar { align-self: stretch; height: 64px; border: 1px solid #7A6230; border-bottom: 0; border-radius: 14px 14px 0 0; background: rgba(217, 168, 69, 0.1); } [data-theme="casino"] .kh-podium__item[data-pos="1"] .kh-podium__bar { height: 140px; } [data-theme="casino"] .kh-podium__item[data-pos="2"] .kh-podium__bar { height: 96px; } [data-theme="casino"] .kh-podium__item[data-me="true"] .kh-podium__bar { background: rgba(217, 168, 69, 0.28); border-color: #E3B85A; } [data-theme="casino"] .kh-rk-main .kh-rk-row { padding: 9px 14px; } [data-theme="casino"] .kh-rk-main .kh-rk-row__rank { width: 40px; } [data-theme="casino"] .kh-rk-main .kh-rk-row[data-me="true"] { background: rgba(217, 168, 69, 0.2); } /* Tu puesto fuera del top: "· · ·" y tus filas */ [data-theme="casino"] .kh-rk-around { display: flex; flex-direction: column; gap: 4px; } [data-theme="casino"] .kh-rk-around__title { font-size: 0; text-align: center; } [data-theme="casino"] .kh-rk-around__title::before { content: '· · ·'; content: '· · ·' / ''; font: 400 16px Cinzel, serif; letter-spacing: 6px; color: #7A6230; } [data-theme="casino"] .kh-rk-empty .kh-empty__title { font: italic 400 21px 'Cormorant Garamond', serif; letter-spacing: 0; color: #E3B85A; } /* ══ E1.F10.T4 · Rankings tablet V y tablet H (D-Rankings-TabletV, D-TabletH) ══ Título centrado, pestañas de juegos con su ficha, filtros centrados y el podio con la tabla en un panel. */ [data-theme="casino"][data-size="tablet-v"] .kh-rankings, [data-theme="casino"][data-size="tablet-h"] .kh-rankings { grid-template-columns: minmax(0, 1fr); row-gap: 20px; column-gap: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rankings { row-gap: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main { display: contents; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-head, [data-theme="casino"][data-size="tablet-h"] .kh-rk-head { grid-row: 1; text-align: center; gap: 4px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-title, [data-theme="casino"][data-size="tablet-h"] .kh-rk-title { font-size: 36px; font-weight: 700; letter-spacing: 3px; color: #F4E6C4; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-title { font-size: 28px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-subtitle, [data-theme="casino"][data-size="tablet-h"] .kh-rk-subtitle { font-size: 22px; color: #E3B85A; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-games, [data-theme="casino"][data-size="tablet-h"] .kh-rk-games { grid-row: 2; border: 0; background: none; padding: 0; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-games::before, [data-theme="casino"][data-size="tablet-h"] .kh-rk-games::before { display: none; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-games ul, [data-theme="casino"][data-size="tablet-h"] .kh-rk-games ul { flex-direction: row; justify-content: center; gap: 14px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-games ul { gap: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game { width: 132px; grid-template-columns: auto auto; grid-template-rows: auto; justify-content: center; justify-items: center; align-items: end; column-gap: 4px; row-gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; color: #CDBB92; text-align: center; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-game { width: auto; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game[aria-pressed="true"], [data-theme="casino"][data-size="tablet-h"] .kh-rk-game[aria-pressed="true"] { background: transparent; color: #F2D38A; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game__icon, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game__icon { grid-column: 1 / -1; grid-row: 1; width: 62px; height: 62px; opacity: 0.7; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game[aria-pressed="true"] .kh-rk-game__icon, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game[aria-pressed="true"] .kh-rk-game__icon { width: 86px; height: 86px; opacity: 1; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game__name, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game__name { grid-column: 1 / -1; grid-row: 2; font-size: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game__rank-label, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game__rank-label, [data-theme="casino"][data-size="tablet-v"] .kh-rk-game__rank, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game__rank { grid-row: 3; align-self: baseline; font: 700 12px Cinzel, serif; letter-spacing: 1px; color: #D9A845; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game__rank-label, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game__rank-label { grid-column: 1; justify-self: end; text-transform: lowercase; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-game__rank, [data-theme="casino"][data-size="tablet-h"] .kh-rk-game__rank { grid-column: 2; justify-self: start; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-filters, [data-theme="casino"][data-size="tablet-h"] .kh-rk-filters { grid-row: 3; align-items: center; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-filters .kh-seg, [data-theme="casino"][data-size="tablet-h"] .kh-rk-filters .kh-seg { gap: 8px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-filters .kh-seg__btn, [data-theme="casino"][data-size="tablet-h"] .kh-rk-filters .kh-seg__btn { min-height: 44px; padding: 0 20px; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"][data-size="tablet-h"] .kh-rk-filters .kh-seg__btn { padding: 0 18px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-filters .kh-seg__btn[aria-pressed="true"], [data-theme="casino"][data-size="tablet-h"] .kh-rk-filters .kh-seg__btn[aria-pressed="true"] { background: #D9A845; } /* El panel: un fondo detrás del podio, la tabla y tu puesto (filas 4 a 6 de la grilla) */ [data-theme="casino"][data-size="tablet-v"] .kh-rankings::after, [data-theme="casino"][data-size="tablet-h"] .kh-rankings::after { content: ''; grid-column: 1; grid-row: 4 / span 2; z-index: 0; border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.78); } [data-theme="casino"][data-size="tablet-v"] .kh-rankings:has(.kh-rk-around)::after, [data-theme="casino"][data-size="tablet-h"] .kh-rankings:has(.kh-rk-around)::after { grid-row: 4 / span 3; } [data-theme="casino"][data-size="tablet-v"] .kh-rankings:has(.kh-rk-empty)::after, [data-theme="casino"][data-size="tablet-h"] .kh-rankings:has(.kh-rk-empty)::after { grid-row: 4; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main > *, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main > * { position: relative; z-index: 1; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main > .kh-podium, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main > .kh-podium, [data-theme="casino"][data-size="tablet-v"] .kh-rk-main > .kh-rk-empty, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main > .kh-rk-empty { grid-row: 4; width: auto; justify-self: stretch; margin: 22px 28px -4px; gap: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main > .kh-rk-empty, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main > .kh-rk-empty { margin-bottom: 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main > .kh-rk-list, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main > .kh-rk-list { grid-row: 5; width: auto; justify-self: stretch; margin: 0 28px 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main > .kh-rk-around, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main > .kh-rk-around { grid-row: 6; width: auto; justify-self: stretch; margin: -38px 28px 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-podium__rank, [data-theme="casino"][data-size="tablet-h"] .kh-podium__rank { width: 66px; height: 66px; font-size: 23px; } [data-theme="casino"][data-size="tablet-v"] .kh-podium__nick, [data-theme="casino"][data-size="tablet-h"] .kh-podium__nick { font-size: 21px; } [data-theme="casino"][data-size="tablet-v"] .kh-podium__score, [data-theme="casino"][data-size="tablet-h"] .kh-podium__score { font-size: 18px; } [data-theme="casino"][data-size="tablet-v"] .kh-podium__bar, [data-theme="casino"][data-size="tablet-h"] .kh-podium__bar { height: 56px; } [data-theme="casino"][data-size="tablet-v"] .kh-podium__item[data-pos="1"] .kh-podium__bar, [data-theme="casino"][data-size="tablet-h"] .kh-podium__item[data-pos="1"] .kh-podium__bar { height: 120px; } [data-theme="casino"][data-size="tablet-v"] .kh-podium__item[data-pos="2"] .kh-podium__bar, [data-theme="casino"][data-size="tablet-h"] .kh-podium__item[data-pos="2"] .kh-podium__bar { height: 86px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main .kh-rk-row, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main .kh-rk-row { padding: 10px 14px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main .kh-rk-row__rank, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main .kh-rk-row__rank { width: 48px; } [data-theme="casino"][data-size="tablet-v"] .kh-rk-main .kh-rk-row__nick, [data-theme="casino"][data-size="tablet-h"] .kh-rk-main .kh-rk-row__nick { font-size: 20px; } /* ══ E1.F10.T5 · Rankings móvil V (D-Rankings-MovilV, D-KH-Rankings-MovilV) ══ */ [data-theme="casino"][data-size="movil-v"] .kh-rankings { display: flex; flex-direction: column; gap: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-main { display: contents; } [data-theme="casino"][data-size="movil-v"] .kh-rk-head { order: 1; text-align: center; } [data-theme="casino"][data-size="movil-v"] .kh-rk-title { font-size: 24px; font-weight: 700; letter-spacing: 2px; color: #F4E6C4; } [data-theme="casino"][data-size="movil-v"] .kh-rk-subtitle { font-size: 18px; color: #E3B85A; } [data-theme="casino"][data-size="movil-v"] .kh-rk-games { order: 2; border: 0; background: none; padding: 0; } [data-theme="casino"][data-size="movil-v"] .kh-rk-games::before { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rk-games ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 0; border: 0; border-radius: 0; background: transparent; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game[aria-pressed="true"] { background: transparent; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game__icon { width: 56px; height: 56px; box-sizing: border-box; border: 2px solid transparent; opacity: 0.7; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game[aria-pressed="true"] .kh-rk-game__icon { border-color: #E3B85A; opacity: 1; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game__name, [data-theme="casino"][data-size="movil-v"] .kh-rk-game__rank-label { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game__rank { font-size: 13px; color: #CDBB92; } [data-theme="casino"][data-size="movil-v"] .kh-rk-game[aria-pressed="true"] .kh-rk-game__rank { color: #F2D38A; } [data-theme="casino"][data-size="movil-v"] .kh-rk-filters { order: 3; align-items: stretch; gap: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-filters .kh-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-filters .kh-seg__btn { min-height: 44px; padding: 0; font-size: 11px; letter-spacing: 1px; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"][data-size="movil-v"] .kh-rk-filters .kh-seg__btn[aria-pressed="true"] { background: #D9A845; } [data-theme="casino"][data-size="movil-v"] .kh-rk-main > .kh-podium, [data-theme="casino"][data-size="movil-v"] .kh-rk-main > .kh-rk-list, [data-theme="casino"][data-size="movil-v"] .kh-rk-main > .kh-rk-around, [data-theme="casino"][data-size="movil-v"] .kh-rk-main > .kh-rk-empty { order: 4; width: auto; } [data-theme="casino"][data-size="movil-v"] .kh-podium { gap: 10px; } [data-theme="casino"][data-size="movil-v"] .kh-podium__item { gap: 4px; } [data-theme="casino"][data-size="movil-v"] .kh-podium__rank { width: 50px; height: 50px; border-width: 2px; font-size: 18px; } [data-theme="casino"][data-size="movil-v"] .kh-podium__nick { font-size: 17px; line-height: 1.1; } [data-theme="casino"][data-size="movil-v"] .kh-podium__score { font-size: 15px; } [data-theme="casino"][data-size="movil-v"] .kh-podium__bar { height: 40px; border-radius: 12px 12px 0 0; } [data-theme="casino"][data-size="movil-v"] .kh-podium__item[data-pos="1"] .kh-podium__bar { height: 88px; } [data-theme="casino"][data-size="movil-v"] .kh-podium__item[data-pos="2"] .kh-podium__bar { height: 60px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-list { gap: 3px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-main .kh-rk-row { gap: 10px; padding: 9px 12px; background: rgba(8, 26, 20, 0.7); border: 0; } [data-theme="casino"][data-size="movil-v"] .kh-rk-main .kh-rk-row[data-me="true"] { background: rgba(217, 168, 69, 0.2); border: 1px solid #D9A845; } [data-theme="casino"][data-size="movil-v"] .kh-rk-main .kh-rk-row__rank { width: 34px; } [data-theme="casino"][data-size="movil-v"] .kh-rk-main .kh-rk-row__nick { font-size: 18px; } /* ══ E1.F10.T5 · Rankings móvil H (D-Rankings-MovilH): juegos en columna a la izquierda y el panel a la derecha ══ */ [data-theme="casino"][data-size="movil-h"] .kh-rankings { grid-template-columns: 196px minmax(0, 1fr); gap: 14px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-games { border: 0; background: none; padding: 0; } [data-theme="casino"][data-size="movil-h"] .kh-rk-games::before { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-rk-games ul { gap: 4px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-game { grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 8px; min-height: 48px; padding: 2px 10px 2px 4px; border-radius: 999px; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"][data-size="movil-h"] .kh-rk-game__icon { width: 40px; height: 40px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-game__name { font-size: 16px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-game__rank-label { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-rk-game__rank { grid-row: 1 / span 2; align-self: center; font-size: 14px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main { border-radius: 16px; background: rgba(8, 26, 20, 0.78); padding: 10px 14px; grid-template-columns: 236px minmax(0, 1fr); column-gap: 14px; row-gap: 8px; align-items: end; } [data-theme="casino"][data-size="movil-h"] .kh-rk-head { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-title { font-size: 14px; letter-spacing: 3px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-subtitle { font-size: 16px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-filters { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-filters .kh-seg { gap: 4px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-filters .kh-rk-periods { margin-left: auto; } [data-theme="casino"][data-size="movil-h"] .kh-rk-filters .kh-seg__btn { min-height: 44px; padding: 0 8px; font-size: 10px; letter-spacing: 1px; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"][data-size="movil-h"] .kh-rk-filters .kh-seg__btn[aria-pressed="true"] { background: #D9A845; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main > .kh-podium { grid-column: 1; grid-row: 3; width: auto; gap: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main > .kh-rk-list, [data-theme="casino"][data-size="movil-h"] .kh-rk-main > .kh-rk-around { grid-column: 2; grid-row: 3; width: auto; justify-self: stretch; gap: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main > .kh-rk-around { grid-row: 4; } [data-theme="casino"][data-size="movil-h"] .kh-podium__item { gap: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-podium__rank { width: 38px; height: 38px; border-width: 2px; font-size: 14px; } [data-theme="casino"][data-size="movil-h"] .kh-podium__nick { font-size: 14px; line-height: 1.1; } [data-theme="casino"][data-size="movil-h"] .kh-podium__score { font-size: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-podium__bar { height: 34px; border-radius: 10px 10px 0 0; } [data-theme="casino"][data-size="movil-h"] .kh-podium__item[data-pos="1"] .kh-podium__bar { height: 76px; } [data-theme="casino"][data-size="movil-h"] .kh-podium__item[data-pos="2"] .kh-podium__bar { height: 52px; } [data-theme="casino"][data-size="movil-h"] .kh-podium__item[data-me="true"] .kh-podium__bar { background: rgba(217, 168, 69, 0.1); border-color: #7A6230; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main .kh-rk-row { gap: 8px; padding: 5px 10px; border-radius: 8px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main .kh-rk-row__rank { width: 40px; font-size: 13px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main .kh-rk-row__nick { font-size: 16px; } [data-theme="casino"][data-size="movil-h"] .kh-rk-main .kh-rk-row__score { font-size: 13px; } /* ══ E1.F10.T6 · Mis jugadas escritorio (D-MisJugadas-Desktop) ══ */ [data-theme="casino"] .kh-mis[data-state="list"] { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 30px; align-items: stretch; } [data-theme="casino"] .kh-season { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.78); padding: 24px 26px; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } [data-theme="casino"] .kh-season__title { font: 700 32px Cinzel, serif; letter-spacing: 3px; color: #F4E6C4; } [data-theme="casino"] .kh-season__sub { margin-top: -18px; font: italic 400 22px 'Cormorant Garamond', serif; color: #E3B85A; } [data-theme="casino"] .kh-season__note { display: none; } /* Anillo de hitos: "Hitos / 7 / 31" dentro de un aro dorado */ [data-theme="casino"] .kh-season__hitos { width: 200px; height: 200px; flex: none; box-sizing: border-box; border-radius: 50%; border: 12px solid rgba(217, 168, 69, 0.25); border-top-color: #E3B85A; border-right-color: #E3B85A; background: rgba(8, 26, 20, 0.6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } [data-theme="casino"] .kh-season__hitos .kh-stat__label { font: 600 38px 'Cormorant Garamond', serif; letter-spacing: 0; text-transform: none; color: #F4E6C4; } [data-theme="casino"] .kh-season__hitos .kh-stat__value { font: 400 20px Cinzel, serif; color: #F2D38A; } [data-theme="casino"] .kh-season__hitos .kh-bar__fill { display: none; } [data-theme="casino"] .kh-stats { align-self: stretch; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 12px; text-align: center; } [data-theme="casino"] .kh-stat[data-stat="best"] { grid-column: 1 / -1; } [data-theme="casino"] .kh-stat__label { display: block; font: 400 10px Cinzel, serif; letter-spacing: 1px; text-transform: uppercase; color: #CDBB92; } [data-theme="casino"] .kh-stat__value { font: 700 30px Cinzel, serif; color: #F4E6C4; } [data-theme="casino"] .kh-stat[data-stat="best"] .kh-stat__value { color: #F2D38A; } [data-theme="casino"] .kh-mis-list { display: flex; flex-direction: column; gap: 16px; min-width: 0; } [data-theme="casino"] .kh-mis-card > article { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 16px 22px; display: grid; grid-template-columns: 110px auto minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; align-items: center; } [data-theme="casino"] .kh-mis-card__icon { grid-column: 1; grid-row: 1 / span 4; width: 110px; height: 110px; margin-right: 10px; border-radius: 50%; object-fit: cover; } [data-theme="casino"] .kh-mis-card__name { grid-column: 2; grid-row: 1; align-self: baseline; font: 600 30px 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-mis-card__meta { grid-column: 3; grid-row: 1; align-self: baseline; font-size: 13px; color: #CDBB92; } [data-theme="casino"] .kh-mis-card__rank { grid-column: 4; grid-row: 1; align-self: baseline; justify-self: end; font: 700 24px Cinzel, serif; color: #F2D38A; } [data-theme="casino"] .kh-mis-card__best { display: none; } [data-theme="casino"] .kh-mis-card__hitos { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 12px; } [data-theme="casino"] .kh-mis-card__hitos-label { font: 400 11px Cinzel, serif; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; color: #CDBB92; } [data-theme="casino"] .kh-mis-card .kh-bar { flex-grow: 1; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(217, 168, 69, 0.2); } [data-theme="casino"] .kh-mis-card .kh-bar__fill { display: block; height: 100%; width: var(--kh-pct, 0%); background: #E3B85A; } [data-theme="casino"] .kh-mis-card .kh-chips { grid-column: 2 / -1; grid-row: 3; display: flex; flex-wrap: wrap; gap: 6px; } [data-theme="casino"] .kh-mis-card .kh-chip { min-height: 0; padding: 5px 10px; border-radius: 999px; border: 1px solid #7A6230; background: transparent; color: #CDBB92; font: 400 12px Jost, system-ui, sans-serif; cursor: default; } [data-theme="casino"] .kh-mis-card .kh-chip[data-state="won"] { background: #E3B85A; border-color: #E3B85A; color: #1B1206; } [data-theme="casino"] .kh-mis-card__next { grid-column: 2 / 4; grid-row: 4; font: italic 400 18px 'Cormorant Garamond', serif; color: #D9A845; } [data-theme="casino"] .kh-mis-card__continue { grid-column: 4; grid-row: 4; justify-self: end; min-height: 0; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; padding: 13px 20px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } [data-theme="casino"] .kh-mis-card:not(:has(.kh-mis-card__continue)) .kh-mis-card__next { grid-column: 2 / -1; } /* ══ E1.F10.T6 · Mis jugadas tablet V (D-TabletV): título arriba, anillo y cifras en una fila, tarjetas en columna ══ */ [data-theme="casino"][data-size="tablet-v"] .kh-mis[data-state="list"] { display: flex; flex-direction: column; gap: 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-season { border: 0; background: none; padding: 0; display: grid; grid-template-columns: auto auto; justify-content: center; column-gap: 36px; row-gap: 4px; align-items: center; } [data-theme="casino"][data-size="tablet-v"] .kh-season__title { grid-column: 1 / -1; font-size: 40px; } [data-theme="casino"][data-size="tablet-v"] .kh-season__sub { grid-column: 1 / -1; margin: 0 0 16px; font-size: 24px; } [data-theme="casino"][data-size="tablet-v"] .kh-season__hitos { width: 210px; height: 210px; } [data-theme="casino"][data-size="tablet-v"] .kh-season__hitos .kh-stat__label { font-size: 40px; } [data-theme="casino"][data-size="tablet-v"] .kh-stats { gap: 12px 28px; text-align: left; } [data-theme="casino"][data-size="tablet-v"] .kh-stat__label { font-size: 12px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-v"] .kh-stat__value { font-size: 34px; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-list { gap: 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card > article { grid-template-columns: 96px minmax(0, 1fr) auto; column-gap: 18px; padding: 16px 20px; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__icon { grid-row: 1 / span 5; width: 96px; height: 96px; margin: 0; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__name { font-size: 28px; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__rank { grid-column: 3; font-size: 22px; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__meta { grid-column: 2 / -1; grid-row: 2; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__hitos { grid-row: 3; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__hitos-label { display: none; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card .kh-chips { grid-row: 4; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__next { grid-column: 2; grid-row: 5; } [data-theme="casino"][data-size="tablet-v"] .kh-mis-card__continue { grid-column: 3; grid-row: 5; padding: 15px 20px; } /* ══ E1.F10.T6 · Mis jugadas tablet H (D-MisJugadas-TabletH): temporada en una franja y 3 tarjetas en columnas ══ */ [data-theme="casino"][data-size="tablet-h"] .kh-mis[data-state="list"] { display: flex; flex-direction: column; gap: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-season { display: grid; grid-template-columns: auto 140px minmax(0, 1fr); column-gap: 34px; row-gap: 0; align-items: center; text-align: left; border-radius: 18px; background: rgba(8, 26, 20, 0.72); padding: 16px 28px; } [data-theme="casino"][data-size="tablet-h"] .kh-season__title { grid-column: 1; grid-row: 1; align-self: end; } [data-theme="casino"][data-size="tablet-h"] .kh-season__sub { grid-column: 1; grid-row: 2; align-self: start; margin: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-season__hitos { grid-column: 2; grid-row: 1 / span 2; width: 140px; height: 140px; border-width: 10px; } [data-theme="casino"][data-size="tablet-h"] .kh-season__hitos .kh-stat__label { font-size: 28px; } [data-theme="casino"][data-size="tablet-h"] .kh-season__hitos .kh-stat__value { font-size: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-stats { grid-column: 3; grid-row: 1 / span 2; justify-self: end; align-self: center; gap: 8px 30px; text-align: left; } [data-theme="casino"][data-size="tablet-h"] .kh-stat__label { font-size: 11px; letter-spacing: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card, [data-theme="casino"][data-size="tablet-h"] .kh-mis-card > article { height: 100%; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card > article { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto 1fr; column-gap: 14px; row-gap: 10px; padding: 18px; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__icon { grid-row: 1; width: 80px; height: 80px; margin: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__name { align-self: center; font-size: 27px; line-height: 1; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__rank { grid-column: 3; align-self: center; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__meta { grid-column: 1 / -1; grid-row: 2; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__hitos { grid-column: 1 / -1; grid-row: 3; gap: 10px; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card .kh-chips { grid-column: 1 / -1; grid-row: 4; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__next, [data-theme="casino"][data-size="tablet-h"] .kh-mis-card:not(:has(.kh-mis-card__continue)) .kh-mis-card__next { grid-column: 1 / -1; grid-row: 5; } [data-theme="casino"][data-size="tablet-h"] .kh-mis-card__continue { grid-column: 1 / -1; grid-row: 6; align-self: end; justify-self: stretch; text-align: center; font-size: 13px; padding: 15px 20px; clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%); } /* ══ E1.F10.T7 · Mis jugadas móvil V (D-MisJugadas-MovilV, D-KH-MisJugadas-MovilV) ══ */ [data-theme="casino"][data-size="movil-v"] .kh-mis[data-state="list"] { display: flex; flex-direction: column; gap: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-season { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 0; align-items: center; border: 0; background: none; padding: 0; } [data-theme="casino"][data-size="movil-v"] .kh-season::before { content: ''; grid-column: 1 / -1; grid-row: 3; align-self: stretch; border: 1px solid #D9A845; border-radius: 16px; background: rgba(8, 26, 20, 0.72); } [data-theme="casino"][data-size="movil-v"] .kh-season__title { grid-column: 1 / -1; grid-row: 1; font-size: 28px; letter-spacing: 2px; } [data-theme="casino"][data-size="movil-v"] .kh-season__sub { grid-column: 1 / -1; grid-row: 2; margin: 0 0 12px; font-size: 20px; } [data-theme="casino"][data-size="movil-v"] .kh-season__hitos { grid-column: 1; grid-row: 3; position: relative; width: 112px; height: 112px; border-width: 9px; margin: 12px 0 12px 14px; } [data-theme="casino"][data-size="movil-v"] .kh-season__hitos .kh-stat__label { font-size: 22px; } [data-theme="casino"][data-size="movil-v"] .kh-season__hitos .kh-stat__value { font-size: 14px; } [data-theme="casino"][data-size="movil-v"] .kh-stats { grid-column: 2; grid-row: 3; position: relative; margin: 0 14px 0 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; text-align: left; } [data-theme="casino"][data-size="movil-v"] .kh-stat[data-stat="best"] { grid-column: auto; } [data-theme="casino"][data-size="movil-v"] .kh-stat__label { font-size: 9px; } [data-theme="casino"][data-size="movil-v"] .kh-stat__value { font-size: 22px; } [data-theme="casino"][data-size="movil-v"] .kh-stat[data-stat="best"] .kh-stat__value { font-size: 16px; line-height: 1.5; } [data-theme="casino"][data-size="movil-v"] .kh-mis-list { gap: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card > article { grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 12px; row-gap: 8px; border-radius: 16px; padding: 14px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__icon { grid-row: 1; width: 56px; height: 56px; margin: 0; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__name { align-self: center; font-size: 24px; line-height: 1; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__rank { grid-column: 3; align-self: center; font-size: 22px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__meta { grid-column: 1 / -1; grid-row: 2; font-size: 12px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__hitos { grid-column: 1 / -1; grid-row: 3; gap: 10px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__hitos-label { font-size: 10px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card .kh-chips { grid-column: 1 / -1; grid-row: 4; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card .kh-chip { font-size: 11px; padding: 5px 9px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__next, [data-theme="casino"][data-size="movil-v"] .kh-mis-card:not(:has(.kh-mis-card__continue)) .kh-mis-card__next { grid-column: 1 / -1; grid-row: 5; font-size: 17px; } [data-theme="casino"][data-size="movil-v"] .kh-mis-card__continue { grid-column: 1 / -1; grid-row: 6; justify-self: stretch; text-align: center; padding: 15px 20px; } /* ══ E1.F10.T7 · Mis jugadas móvil H (D-MisJugadas-MovilH): franja con 5 cifras y 3 tarjetas ══ */ [data-theme="casino"][data-size="movil-h"] .kh-mis[data-state="list"] { display: flex; flex-direction: column; gap: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-season { display: grid; grid-template-columns: auto minmax(0, 1fr) repeat(5, auto); column-gap: 22px; row-gap: 0; align-items: center; text-align: left; border-radius: 14px; background: rgba(8, 26, 20, 0.72); padding: 8px 18px; } [data-theme="casino"][data-size="movil-h"] .kh-season__title { grid-column: 1; grid-row: 1; font-size: 18px; letter-spacing: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-season__sub { grid-column: 1; grid-row: 2; margin: 0; font-size: 16px; } [data-theme="casino"][data-size="movil-h"] .kh-stats { display: contents; } [data-theme="casino"][data-size="movil-h"] .kh-stat, [data-theme="casino"][data-size="movil-h"] .kh-season__hitos { grid-row: 1 / span 2; } [data-theme="casino"][data-size="movil-h"] .kh-stat[data-stat="played"] { grid-column: 3; } [data-theme="casino"][data-size="movil-h"] .kh-season__hitos { grid-column: 4; width: auto; height: auto; border: 0; border-radius: 0; background: none; align-items: flex-start; text-align: left; } [data-theme="casino"][data-size="movil-h"] .kh-season__hitos .kh-stat__label { font: 400 9px Cinzel, serif; letter-spacing: 1px; text-transform: uppercase; color: #CDBB92; } [data-theme="casino"][data-size="movil-h"] .kh-season__hitos .kh-stat__value { font: 700 20px Cinzel, serif; color: #F2D38A; } [data-theme="casino"][data-size="movil-h"] .kh-stat[data-stat="best"] { grid-column: 5; } [data-theme="casino"][data-size="movil-h"] .kh-stat[data-stat="compas"] { grid-column: 6; } [data-theme="casino"][data-size="movil-h"] .kh-stat[data-stat="week"] { grid-column: 7; } [data-theme="casino"][data-size="movil-h"] .kh-stat__label { font-size: 9px; } [data-theme="casino"][data-size="movil-h"] .kh-stat__value { font-size: 20px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card, [data-theme="casino"][data-size="movil-h"] .kh-mis-card > article { height: 100%; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card > article { grid-template-columns: 44px minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto auto 1fr; column-gap: 10px; row-gap: 6px; border-radius: 16px; padding: 10px 12px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__icon { grid-row: 1; width: 44px; height: 44px; margin: 0; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__name { align-self: center; font-size: 20px; line-height: 1; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__rank { grid-column: 3; align-self: center; font-size: 18px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__meta { grid-column: 1 / -1; grid-row: 2; font-size: 11px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__hitos { grid-column: 1 / -1; grid-row: 3; gap: 8px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__hitos-label { font-size: 9px; letter-spacing: 1px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card .kh-bar { height: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card .kh-chips { grid-column: 1 / -1; grid-row: 4; gap: 4px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card .kh-chip { font-size: 11px; padding: 3px 8px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__next, [data-theme="casino"][data-size="movil-h"] .kh-mis-card:not(:has(.kh-mis-card__continue)) .kh-mis-card__next { grid-column: 1 / -1; grid-row: 5; font-size: 15px; } [data-theme="casino"][data-size="movil-h"] .kh-mis-card__continue { grid-column: 1 / -1; grid-row: 6; align-self: end; justify-self: stretch; text-align: center; font-size: 11px; padding: 15px 12px; } /* ══ E1.F10.T8 · Mi cuenta (D-Cuenta-Desktop, -TabletH, -TabletV, -MovilV, -MovilH; D-KH-Cuenta-MovilV) ══ */ [data-theme="casino"][data-size="desktop"] .kh-account-veil__close, [data-theme="casino"][data-size="tablet-h"] .kh-account-veil__close, [data-theme="casino"][data-size="tablet-v"] .kh-account-veil__close { background: rgba(4, 12, 9, 0.66); } [data-theme="casino"] .kh-account-sheet .kh-back { border-color: #7A6230; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"] .kh-account-sheet .kh-page-head__title { font-weight: 400; } [data-theme="casino"] .kh-account-sheet .kh-btn--secondary { background: transparent; } [data-theme="casino"] .kh-acc-avatar-row { gap: 14px; } [data-theme="casino"] .kh-acc-generate { padding: 0 16px; font-size: 11px; } [data-theme="casino"] .kh-acc-field .kh-label { letter-spacing: 2px; font-size: 10px; color: #CDBB92; } [data-theme="casino"] .kh-acc-nick { padding: 0 12px; border-color: #D9A845; background: rgba(14, 42, 34, 0.9); } [data-theme="casino"] .kh-acc-field__row .kh-btn { height: 46px; padding: 0 14px; font-size: 11px; } [data-theme="casino"] .kh-acc-real { font-size: 13px; color: #E3B85A; } [data-theme="casino"] .kh-acc-links__row { color: #F4E6C4; } [data-theme="casino"] .kh-acc-links__row[data-action="word"] { font-size: 17px; } [data-theme="casino"] .kh-acc-links__row[data-action="word"] .kh-acc-links__value { font-size: 12px; } [data-theme="casino"] .kh-acc-themes__head { gap: 8px; } [data-theme="casino"] .kh-acc-themes__note { color: #D9A845; } [data-theme="casino"] .kh-theme-card { background: rgba(14, 42, 34, 0.85); border-color: #7A6230; } [data-theme="casino"] .kh-theme-card[aria-pressed="true"] { border-color: #E3B85A; } [data-theme="casino"] .kh-theme-card__state { color: #CDBB92; } [data-theme="casino"] .kh-theme-card[aria-pressed="true"] .kh-theme-card__state { color: #F2D38A; } [data-theme="casino"] .kh-acc-signout { font-size: 12px; letter-spacing: 3px; border-color: #D9A845; color: #F2D38A; } [data-theme="casino"] .kh-account-sheet .kh-acc-signout { background: rgba(8, 26, 20, 0.7); } [data-theme="casino"] .kh-acc-kh { display: none; } /* Móvil V: la tarjeta del theme con el nombre y el estado uno sobre otro */ [data-theme="casino"] .kh-themes[data-variant="account"] .kh-theme-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: center; } [data-theme="casino"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { grid-row: 1 / span 2; } [data-theme="casino"] .kh-themes[data-variant="account"] .kh-theme-card__name { align-self: end; } [data-theme="casino"] .kh-themes[data-variant="account"] .kh-theme-card__state { align-self: start; } /* Móvil V fuera de KitchHero: el menú al pie sigue a la vista sobre Mi cuenta (D-Cuenta-MovilV) */ [data-theme="casino"][data-size="movil-v"][data-overlay]:not([data-kh]) .kh-nav--bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0; } [data-theme="casino"][data-size="movil-v"]:not([data-kh]) .kh-account-sheet { padding-bottom: calc(96px + env(safe-area-inset-bottom)); } /* Escritorio y tablet H: hoja lateral; miniaturas con logo, tinta y avatar */ [data-theme="casino"][data-size="desktop"] .kh-acc-avatar-row { gap: 18px; } [data-theme="casino"][data-size="desktop"] .kh-acc-avatar-side { gap: 6px; } [data-theme="casino"][data-size="desktop"] .kh-acc-avatar-note { font-size: 17px; color: #CDBB92; } [data-theme="casino"][data-size="desktop"] .kh-acc-generate, [data-theme="casino"][data-size="tablet-h"] .kh-acc-generate, [data-theme="casino"][data-size="tablet-v"] .kh-acc-generate { padding: 0 18px; font-size: 12px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-generate { padding: 0 16px; } [data-theme="casino"][data-size="desktop"] .kh-acc-field, [data-theme="casino"][data-size="tablet-h"] .kh-acc-field, [data-theme="casino"][data-size="tablet-v"] .kh-acc-field { gap: 6px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-field, [data-theme="casino"][data-size="tablet-v"] .kh-acc-field { gap: 5px; } [data-theme="casino"][data-size="desktop"] .kh-acc-field .kh-label, [data-theme="casino"][data-size="tablet-h"] .kh-acc-field .kh-label, [data-theme="casino"][data-size="tablet-v"] .kh-acc-field .kh-label { font-size: 11px; letter-spacing: 3px; } [data-theme="casino"][data-size="desktop"] .kh-acc-nick, [data-theme="casino"][data-size="tablet-h"] .kh-acc-nick, [data-theme="casino"][data-size="tablet-v"] .kh-acc-nick { padding: 0 14px; font-size: 21px; } [data-theme="casino"][data-size="desktop"] .kh-acc-field__row .kh-btn, [data-theme="casino"][data-size="tablet-h"] .kh-acc-field__row .kh-btn, [data-theme="casino"][data-size="tablet-v"] .kh-acc-field__row .kh-btn { padding: 0 16px; font-size: 12px; } [data-theme="casino"][data-size="desktop"] .kh-acc-real, [data-theme="casino"][data-size="tablet-h"] .kh-acc-real, [data-theme="casino"][data-size="tablet-v"] .kh-acc-real { font-size: 14px; } [data-theme="casino"][data-size="desktop"] .kh-acc-links__row { font-size: 20px; } [data-theme="casino"][data-size="desktop"] .kh-acc-links__row[data-action="word"] { font-size: 20px; } [data-theme="casino"][data-size="desktop"] .kh-acc-links__row[data-action="word"] .kh-acc-links__value, [data-theme="casino"][data-size="tablet-h"] .kh-acc-links__row[data-action="word"] .kh-acc-links__value { font-size: 13px; letter-spacing: 1px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-links__row { min-height: 46px; font-size: 19px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-links__row[data-action="word"] { font-size: 19px; } [data-theme="casino"][data-size="desktop"] .kh-acc-themes__head, [data-theme="casino"][data-size="tablet-h"] .kh-acc-themes__head, [data-theme="casino"][data-size="tablet-v"] .kh-acc-themes__head { gap: 10px; } [data-theme="casino"][data-size="desktop"] .kh-acc-h2, [data-theme="casino"][data-size="tablet-h"] .kh-acc-h2, [data-theme="casino"][data-size="tablet-v"] .kh-acc-h2 { font-size: 14px; } [data-theme="casino"][data-size="desktop"] .kh-acc-sound .kh-acc-h2 { margin-bottom: 2px; } [data-theme="casino"][data-size="desktop"] .kh-acc-themes__note, [data-theme="casino"][data-size="tablet-h"] .kh-acc-themes__note { font-size: 16px; } [data-theme="casino"][data-size="desktop"] .kh-themes[data-variant="account"], [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] { gap: 10px; } [data-theme="casino"][data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card, [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card, [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card { display: flex; flex-direction: column; align-items: stretch; gap: 4px; } [data-theme="casino"][data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card__thumb, [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { width: auto; height: 78px; } [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { height: 72px; } [data-theme="casino"][data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card__logo, [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__logo, [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__logo { display: block; left: 6px; top: 6px; width: 22px; height: 22px; } [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__logo { width: 20px; height: 20px; } [data-theme="casino"] .kh-themes .kh-theme-card[data-theme-id="neon"] .kh-theme-card__logo, [data-theme="casino"] .kh-themes .kh-theme-card[data-theme-id="recreo"] .kh-theme-card__logo, [data-theme="casino"] .kh-themes .kh-theme-card[data-theme-id="cuaderno"] .kh-theme-card__logo { border-radius: 6px; } [data-theme="casino"][data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card__ink, [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__ink, [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__ink { display: block; left: 34px; top: 11px; width: 44px; height: 5px; border-radius: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__ink { left: 32px; top: 10px; width: 40px; } [data-theme="casino"] .kh-themes[data-variant="account"] .kh-theme-card__ink--short { display: none !important; } [data-theme="casino"][data-size="desktop"] .kh-themes[data-variant="account"] .kh-theme-card__art, [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__art, [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__art { left: auto; top: auto; right: 6px; bottom: 5px; width: 44px; height: 44px; } [data-theme="casino"][data-size="tablet-h"] .kh-themes[data-variant="account"] .kh-theme-card__art { width: 42px; height: 42px; } [data-theme="casino"][data-size="desktop"] .kh-acc-sound__row, [data-theme="casino"][data-size="tablet-h"] .kh-acc-sound__row, [data-theme="casino"][data-size="tablet-v"] .kh-acc-sound__row { grid-template-columns: 90px minmax(0, 1fr); font-size: 19px; } [data-theme="casino"][data-size="desktop"] .kh-acc-sound__mute, [data-theme="casino"][data-size="tablet-h"] .kh-acc-sound__mute, [data-theme="casino"][data-size="tablet-v"] .kh-acc-sound__mute { font-size: 19px; } [data-theme="casino"][data-size="desktop"] .kh-acc-signout, [data-theme="casino"][data-size="tablet-h"] .kh-acc-signout, [data-theme="casino"][data-size="tablet-v"] .kh-acc-signout { margin-top: auto; font-size: 13px; background: transparent !important; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-signout { padding: 14px; } [data-theme="casino"][data-size="tablet-h"] .kh-page-head__title { font-size: 22px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-avatar-row { gap: 16px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-avatar { width: 80px; height: 80px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-avatar-side, [data-theme="casino"][data-size="tablet-v"] .kh-acc-avatar-side { gap: 4px; } [data-theme="casino"][data-size="tablet-h"] .kh-acc-avatar-note, [data-theme="casino"][data-size="tablet-v"] .kh-acc-avatar-note { font-size: 16px; color: #CDBB92; } /* Tablet V: hoja inferior con asa y dos columnas (perfil y enlaces | ambiente y sonido) */ [data-theme="casino"][data-size="tablet-v"] .kh-account-sheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 16px; align-content: start; } [data-theme="casino"][data-size="tablet-v"] .kh-account-sheet::before { content: ''; grid-column: 1 / -1; justify-self: center; width: 60px; height: 5px; border-radius: 3px; background: #7A6230; margin-bottom: 2px; } [data-theme="casino"][data-size="tablet-v"] .kh-account-sheet > .kh-page-head { grid-column: 1 / -1; flex-direction: row-reverse; justify-content: space-between; } [data-theme="casino"][data-size="tablet-v"] .kh-account-sheet .kh-back { font-size: 0; background: none; } [data-theme="casino"][data-size="tablet-v"] .kh-account-sheet .kh-back::after { content: '×'; font-size: 24px; line-height: 1; } [data-theme="casino"][data-size="tablet-v"] .kh-account-sheet .kh-page-head__title { font-size: 24px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-profile { grid-column: 1; grid-row: 3; border: 0; background: none; padding: 0; gap: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-avatar { width: 84px; height: 84px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-avatar-row { gap: 16px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-links { grid-column: 1; grid-row: 4; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-links__row[data-action="word"] { font-size: 18px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-signout { grid-column: 1; grid-row: 5; align-self: end; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-themes { grid-column: 2; grid-row: 3 / span 2; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-sound { grid-column: 2; grid-row: 5; } [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] { gap: 10px; } [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { width: auto; height: 84px; } [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__logo { left: 7px; top: 7px; width: 24px; height: 24px; } [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__ink { left: 38px; top: 12px; width: 56px; height: 6px; } [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__art { right: 8px; bottom: 6px; width: 54px; height: 54px; } [data-theme="casino"][data-size="tablet-v"] .kh-themes[data-variant="account"] .kh-theme-card__name { font-size: 13px; letter-spacing: 2px; } [data-theme="casino"][data-size="tablet-v"] .kh-acc-themes__note { font-size: 15px; } /* Móvil H: volver + MI CUENTA y dos paneles */ [data-theme="casino"][data-size="movil-h"] .kh-account-sheet { padding: 12px 22px 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; row-gap: 8px; align-content: start; } [data-theme="casino"][data-size="movil-h"] .kh-account-sheet::before, [data-theme="casino"][data-size="movil-h"] .kh-account-sheet::after { content: ''; grid-row: 2 / span 3; border: 1px solid #D9A845; border-radius: 16px; background: rgba(8, 20, 16, 0.88); } [data-theme="casino"][data-size="movil-h"] .kh-account-sheet::before { grid-column: 1; margin-top: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-account-sheet::after { grid-column: 2; margin-top: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-account-sheet > * { position: relative; z-index: 1; } [data-theme="casino"][data-size="movil-h"] .kh-account-sheet > .kh-page-head { grid-column: 1 / -1; grid-row: 1; gap: 12px; margin-bottom: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-account-sheet .kh-page-head__title { font-size: 18px; letter-spacing: 4px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-profile { grid-column: 1; grid-row: 2; border: 0; background: none; padding: 12px 14px 0; gap: 8px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-avatar-row { gap: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-avatar { width: 56px; height: 56px; border-width: 2px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-avatar-side { gap: 0; } [data-theme="casino"][data-size="movil-h"] .kh-acc-generate { padding: 0 14px; font-size: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-avatar-note { font-size: 14px; color: #CDBB92; } [data-theme="casino"][data-size="movil-h"] .kh-acc-field { gap: 4px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-field__row { gap: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-nick { height: 44px; font-size: 19px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-field__row .kh-btn { height: 44px; padding: 0 12px; font-size: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-real { font-size: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-links { grid-column: 1; grid-row: 3 / span 2; align-self: start; margin: 0 14px 10px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-links__row { min-height: 44px; gap: 8px; font-size: 17px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-links__row[data-action="word"] { font-size: 16px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-links__row .kh-acc-links__value { font-size: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-links__row[data-action="word"] .kh-acc-links__value { font-size: 11px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-themes { grid-column: 2; grid-row: 2; padding: 12px 14px 0; gap: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-themes__note { display: none; } [data-theme="casino"][data-size="movil-h"] .kh-acc-h2 { font-size: 12px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-sound { grid-column: 2; grid-row: 3; margin: 0 14px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-sound__row { grid-template-columns: 70px minmax(0, 1fr); gap: 10px; font-size: 17px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-sound__mute { gap: 10px; font-size: 17px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-sound__mute .kh-check { width: 20px; height: 20px; } [data-theme="casino"][data-size="movil-h"] .kh-acc-signout { grid-column: 2; grid-row: 3; align-self: end; justify-self: end; width: auto; margin: 0 14px 10px 0; padding: 14px; font-size: 10px; letter-spacing: 2px; background: transparent !important; } /* Móvil H y dentro de KitchHero: 4 miniaturas en fila con el avatar centrado */ [data-theme="casino"][data-size="movil-h"] .kh-themes[data-variant="account"], [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } [data-theme="casino"][data-size="movil-h"] .kh-themes[data-variant="account"] .kh-theme-card, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 3px; } [data-theme="casino"][data-size="movil-h"] .kh-themes[data-variant="account"] .kh-theme-card__thumb, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { width: 100%; height: 56px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card__thumb { height: 52px; } [data-theme="casino"][data-size="movil-h"] .kh-themes[data-variant="account"] .kh-theme-card__art, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card__art { left: 50%; top: 5px; transform: translateX(-50%); width: 46px; height: 46px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card__art { width: 42px; height: 42px; } [data-theme="casino"][data-size="movil-h"] .kh-themes[data-variant="account"] .kh-theme-card__name, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card__name { font-size: 10px; } [data-theme="casino"][data-size="movil-h"] .kh-themes[data-variant="account"] .kh-theme-card__state, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-themes[data-variant="account"] .kh-theme-card__state { font-size: 11px; } /* Dentro de KitchHero (D-KH-Cuenta-MovilV): la barra compacta y las pestañas quedan arriba; MI CUENTA sin volver */ [data-theme="casino"][data-kh][data-overlay] .kh-khbar { position: relative; z-index: 25; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-account-sheet { padding: 104px 16px 12px; gap: 8px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-account-sheet .kh-back { display: none; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-account-sheet .kh-page-head__title { font-size: 16px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-profile { border: 0; background: none; padding: 0; gap: 8px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-avatar-row { gap: 12px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-avatar { width: 60px; height: 60px; border-width: 2px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-avatar-side { gap: 0; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-generate { padding: 0 14px; font-size: 10px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-avatar-note { font-size: 14px; color: #CDBB92; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-field { gap: 4px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-nick { height: 44px; font-size: 19px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-field__row .kh-btn { height: 44px; padding: 0 12px; font-size: 10px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-real { font-size: 12px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-links__row { min-height: 44px; gap: 8px; font-size: 18px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-links__row[data-action="word"] { font-size: 16px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-themes { gap: 6px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-themes__note { display: none; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-h2 { font-size: 12px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-sound__row, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-acc-sound__mute { font-size: 17px; gap: 10px; } /* ══ E1.F10.T9 · Mis compas (D-MisCompas-Desktop, D-MisCompas-MovilV, D-KH-MisCompas-MovilV) ══ */ [data-theme="casino"] .kh-compas .kh-page-head__title { font-weight: 400; } [data-theme="casino"] .kh-compas .kh-back { border-color: #7A6230; background: rgba(8, 26, 20, 0.7); } [data-theme="casino"] .kh-compas .kh-page-head__count { color: #E3B85A; } [data-theme="casino"] .kh-compa { background: rgba(8, 26, 20, 0.8); } [data-theme="casino"] .kh-compa__ini { background: rgba(217, 168, 69, 0.12); border-color: #D9A845; color: #F2D38A; } [data-theme="casino"] .kh-compa__paused { color: #E3B85A; } [data-theme="casino"] .kh-compa__actions .kh-btn { font-size: 11px; letter-spacing: 2px; } [data-theme="casino"] .kh-compa__actions .kh-btn--secondary { background: transparent; } [data-theme="casino"] .kh-compa__actions .kh-btn--ghost { border-color: #7A6230; color: #CDBB92; font-weight: 700; } [data-theme="casino"] .kh-compa__actions .kh-btn--primary { min-height: 44px; padding: 0 22px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } [data-theme="casino"] .kh-compa__note { color: #CDBB92; } /* Escritorio y tablets: "← VOLVER A MI CUENTA" arriba, título grande y las acciones a la derecha de cada compa */ [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas .kh-page-head { flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 16px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas .kh-back { flex: 1 0 100%; width: auto; height: auto; border: 0; border-radius: 0; background: none; display: block; font-size: 0; text-align: left; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas .kh-back::after { content: '← VOLVER A MI CUENTA'; content: '← VOLVER A MI CUENTA' / ''; font: 400 12px Cinzel, serif; letter-spacing: 3px; color: #D9A845; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas .kh-page-head__title { font-weight: 700; font-size: 38px; letter-spacing: 4px; color: #F4E6C4; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas .kh-page-head__count { font-size: 18px; color: #F2D38A; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas .kh-page-head .kh-account { display: none; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compas__intro { margin: -6px 0 6px; font-size: 22px; color: #E3B85A; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; column-gap: 18px; row-gap: 2px; align-items: center; border-radius: 18px; padding: 16px 20px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__row { display: contents; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__ini { grid-column: 1; grid-row: 1 / span 2; width: 64px; height: 64px; font-size: 24px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__text { grid-column: 2; grid-row: 1; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__nick { font-size: 26px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__meta { font-size: 14px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__paused { grid-column: 2; grid-row: 2; font-size: 18px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__actions { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 8px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__actions .kh-btn { font-size: 12px; padding: 0 20px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__actions .kh-btn--ghost { padding: 0 16px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__confirm, [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__err { grid-column: 1 / -1; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__confirm { margin-top: 10px; padding-top: 12px; flex-direction: row; align-items: center; gap: 12px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__question { flex-grow: 1; font-size: 20px; } [data-theme="casino"]:not([data-size="movil-v"]):not([data-kh]) .kh-compa__confirm .kh-compa__actions { display: flex; } /* ══ E1.F10.T9 · Estados: cargando (D-Estado-Cargando-MovilV) ══ */ [data-theme="casino"] .kh-state--loading { gap: 14px; } [data-theme="casino"] .kh-skel-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } [data-theme="casino"] .kh-skel { border-color: #7A6230; background: rgba(8, 26, 20, 0.75); } [data-theme="casino"] .kh-skel__dot { border-color: #7A6230; background: rgba(217, 168, 69, 0.12); } [data-theme="casino"] .kh-skel__line { background: rgba(217, 168, 69, 0.22); } [data-theme="casino"] .kh-skel__line--short { background: rgba(217, 168, 69, 0.14); opacity: 1; border-radius: 5px; } [data-theme="casino"] .kh-skel--row, [data-theme="casino"] .kh-skel--hero, [data-theme="casino"] .kh-skel--line { grid-column: 1 / -1; } [data-theme="casino"] .kh-skel--row { order: 1; display: grid; grid-template-columns: 46px minmax(0, 1fr) 92px; column-gap: 10px; row-gap: 8px; align-items: center; border-radius: 14px; } [data-theme="casino"] .kh-skel--row .kh-skel__dot { grid-row: 1 / span 2; } [data-theme="casino"] .kh-skel--row .kh-skel__line { grid-column: 2; align-self: end; } [data-theme="casino"] .kh-skel--row .kh-skel__line--short { align-self: start; } [data-theme="casino"] .kh-skel--row::after { content: ''; grid-column: 3; grid-row: 1 / span 2; width: 92px; height: 42px; background: rgba(217, 168, 69, 0.22); clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 50%, calc(100% - 8px) 100%, 8px 100%, 0 50%); } [data-theme="casino"] .kh-skel--hero { order: 2; display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; row-gap: 8px; align-content: center; border-color: #7A6230; border-radius: 16px; padding: 14px; } [data-theme="casino"] .kh-skel--hero .kh-skel__dot { grid-row: 1 / span 3; } [data-theme="casino"] .kh-skel--hero::before { content: ''; grid-column: 2; grid-row: 1; width: 50%; height: 8px; border-radius: 4px; background: rgba(217, 168, 69, 0.14); } [data-theme="casino"] .kh-skel--hero .kh-skel__line { grid-column: 2; grid-row: 2; width: 80%; height: 16px; border-radius: 8px; } [data-theme="casino"] .kh-skel--hero .kh-skel__line--short { grid-row: 3; width: 90%; height: 9px; } [data-theme="casino"] .kh-skel-group::before { content: '— ELIGE TU MESA —'; content: '— ELIGE TU MESA —' / ''; order: 3; grid-column: 1 / -1; text-align: center; font: 400 12px Cinzel, serif; letter-spacing: 5px; color: #D9A845; } [data-theme="casino"] .kh-skel-group:not(:has(.kh-skel--card))::before { display: none; } [data-theme="casino"] .kh-skel--card { order: 4; align-items: center; gap: 10px; padding: 14px 8px; border-radius: 16px; background: rgba(8, 26, 20, 0.6); } [data-theme="casino"] .kh-skel--card .kh-skel__line { width: 60%; } @media (prefers-reduced-motion: no-preference) { [data-theme="casino"] .kh-skel { animation: kh-casino-brillo 1.4s ease-in-out infinite; } } @keyframes kh-casino-brillo { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* ══ Estados: error (D-Estado-Error-MovilV) ══ */ [data-theme="casino"] .kh-state--error { background: rgba(8, 26, 20, 0.82); border-color: #D9A845; } [data-theme="casino"] .kh-state__art { position: relative; display: block; width: 110px; height: 110px; } [data-theme="casino"] .kh-state__art::after { content: ''; position: absolute; left: -6px; right: -6px; top: 52px; height: 4px; background: #D9A845; transform: rotate(-24deg); } [data-theme="casino"] .kh-state__title { color: #F2D38A; } [data-theme="casino"] .kh-state__body { color: #F4E6C4; } [data-theme="casino"] .kh-state__retry { font-size: 14px; letter-spacing: 3px; padding: 16px 34px; } /* ══ Estados: juego sin ícono (D-Estado-SinIcono-MovilV): la inicial en el lugar del ícono ══ */ [data-theme="casino"] .kh-game__icon--base { box-sizing: border-box; border-radius: 18px; border: 2px dashed #9AA6AD; background: #E9EDEF; color: #1C2E38; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font: 700 30px/1 system-ui, -apple-system, 'Segoe UI', sans-serif; } [data-theme="casino"] .kh-game__icon--base::after { content: 'ÍCONO BASE'; font-size: 9px; font-weight: 600; letter-spacing: 0.5px; } /* ══ Estados: sin partidas (D-Estado-SinPartidas-MovilV) ══ */ [data-theme="casino"] .kh-mis[data-state="empty"] { display: flex; flex-direction: column; gap: 16px; } [data-theme="casino"] .kh-mis[data-state="empty"]::before { content: 'MIS JUGADAS'; content: 'MIS JUGADAS' / ''; text-align: center; font: 700 28px Cinzel, serif; letter-spacing: 2px; color: #F4E6C4; } [data-theme="casino"] .kh-mis-empty { border: 1px dashed #D9A845; border-radius: 16px; background: rgba(8, 26, 20, 0.78); padding: 20px 18px; gap: 12px; } [data-theme="casino"] .kh-mis-empty .kh-empty__title { font-size: 16px; letter-spacing: 3px; color: #F2D38A; } [data-theme="casino"] .kh-mis-empty .kh-empty__text { font: italic 400 19px 'Cormorant Garamond', serif; } [data-theme="casino"] .kh-mis-empty .kh-btn { margin-top: 4px; font-size: 13px; letter-spacing: 2px; padding: 15px 28px; clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 10px 100%, 0 50%); } /* ══ Estados: sin sesión (D-Estado-SinSesion-MovilV, D-Estado-SinSesion-Desktop) ══ */ [data-theme="casino"] .kh-login__card { background: rgba(8, 26, 20, 0.82); border-color: #D9A845; } [data-theme="casino"] .kh-login__btn { font-size: 14px; letter-spacing: 2px; padding: 17px 16px; } [data-theme="casino"][data-size="movil-v"] .kh-login__logo { display: none; } [data-theme="casino"][data-size="movil-v"] .kh-login__hero { gap: 22px; } [data-theme="casino"][data-size="movil-v"] .kh-login__tag { margin-top: -22px; } [data-theme="casino"][data-size="desktop"] .kh-login, [data-theme="casino"][data-size="tablet-h"] .kh-login { grid-template-columns: 62px minmax(0, 1fr) 520px; grid-template-rows: auto auto 1fr auto auto 1fr; column-gap: 18px; row-gap: 0; padding: 30px 52px; } [data-theme="casino"][data-size="desktop"] .kh-login__hero, [data-theme="casino"][data-size="tablet-h"] .kh-login__hero { display: contents; } [data-theme="casino"][data-size="desktop"] .kh-login__logo, [data-theme="casino"][data-size="tablet-h"] .kh-login__logo { grid-column: 1; grid-row: 1 / span 2; width: 62px; height: 62px; } [data-theme="casino"][data-size="desktop"] .kh-login__brand, [data-theme="casino"][data-size="tablet-h"] .kh-login__brand { grid-column: 2; grid-row: 1; align-self: end; font-size: 26px; letter-spacing: 4px; } [data-theme="casino"][data-size="desktop"] .kh-login__tag, [data-theme="casino"][data-size="tablet-h"] .kh-login__tag { grid-column: 2; grid-row: 2; margin: 0; font-size: 18px; } [data-theme="casino"][data-size="desktop"] .kh-login::before, [data-theme="casino"][data-size="tablet-h"] .kh-login::before { content: 'LA CASA\A TE ESPERA'; content: 'LA CASA\A TE ESPERA' / ''; white-space: pre-line; grid-column: 1 / 3; grid-row: 4; margin-bottom: 26px; font: 700 54px/1.1 Cinzel, serif; letter-spacing: 4px; color: #F4E6C4; } [data-theme="casino"][data-size="desktop"] .kh-login__chips, [data-theme="casino"][data-size="tablet-h"] .kh-login__chips { grid-column: 1 / 3; grid-row: 5; justify-content: flex-start; padding-left: 20px; } [data-theme="casino"][data-size="desktop"] .kh-login__chip, [data-theme="casino"][data-size="tablet-h"] .kh-login__chip { width: 118px; height: 118px; margin-left: -20px; border-width: 3px; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45); } [data-theme="casino"][data-size="desktop"] .kh-login__card, [data-theme="casino"][data-size="tablet-h"] .kh-login__card { grid-column: 3; grid-row: 3 / span 4; align-self: center; margin-left: 42px; gap: 18px; background: rgba(8, 26, 20, 0.85); } [data-theme="casino"][data-size="desktop"] .kh-login__title, [data-theme="casino"][data-size="tablet-h"] .kh-login__title { font-size: 26px; letter-spacing: 4px; color: #F2D38A; } [data-theme="casino"][data-size="desktop"] .kh-login__body, [data-theme="casino"][data-size="tablet-h"] .kh-login__body { font-size: 22px; } [data-theme="casino"][data-size="desktop"] .kh-login__btn, [data-theme="casino"][data-size="tablet-h"] .kh-login__btn { margin-top: 8px; font-size: 16px; letter-spacing: 3px; padding: 18px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); } /* ══ E1.F10.T10 · Dentro de KitchHero (D-KH-Desktop, -TabletV, -TabletH, -MovilV, -MovilH y D-KH-*-MovilV) ══ La barra de la app (arriba y al pie) la dibuja KitchHero, no el hub: aquí solo la barra compacta y las pestañas. */ [data-theme="casino"][data-kh] .kh-nav--tabs { background: rgba(8, 20, 16, 0.6); border-bottom-color: #7A6230; font-size: 11px; letter-spacing: 2px; } [data-theme="casino"][data-kh] .kh-nav--tabs .kh-nav__link { padding: 14px 4px; color: #CDBB92; } [data-theme="casino"][data-kh] .kh-nav--tabs .kh-nav__link[aria-current="page"] { font-weight: 700; color: #F2D38A; padding-bottom: 12px; border-bottom-color: #D9A845; } [data-theme="casino"][data-kh] .kh-header[data-variant="compact"] .kh-brand__name { letter-spacing: 3px; } [data-theme="casino"][data-kh] .kh-header[data-variant="compact"] .kh-account__avatar { width: 44px; height: 44px; } [data-theme="casino"][data-kh][data-overlay] .kh-header[data-variant="compact"] .kh-account__avatar { border-color: #E3B85A; box-shadow: 0 0 0 2px rgba(227, 184, 90, 0.35); } [data-theme="casino"][data-kh] .kh-greet { display: none; } /* Escritorio y tablet H: logo, marca, secciones y cuenta en una sola barra */ [data-theme="casino"][data-kh][data-size="desktop"] .kh-khbar, [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-khbar { flex-direction: row; align-items: center; gap: 14px; padding: 6px 40px 0 52px; border-bottom: 1px solid #7A6230; background: rgba(8, 20, 16, 0.6); } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-khbar { gap: 12px; padding: 6px 24px 0 32px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-header[data-variant="compact"], [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-header[data-variant="compact"] { display: contents; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-khbar .kh-header__logo { order: 1; width: 38px; height: 38px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-khbar .kh-header__logo { order: 1; width: 36px; height: 36px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-khbar .kh-brand { order: 2; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-khbar .kh-brand { order: 2; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-khbar .kh-brand__name { font-size: 17px; letter-spacing: 4px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-khbar .kh-brand__name { font-size: 15px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-nav--tabs, [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-nav--tabs { order: 3; display: flex; gap: 28px; margin-left: 36px; border: 0; background: none; font-size: 13px; letter-spacing: 3px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-nav--tabs { gap: 26px; margin-left: 30px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-nav--tabs .kh-nav__link, [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-nav--tabs .kh-nav__link { padding: 14px 0 13px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-nav--tabs .kh-nav__link[aria-current="page"], [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-nav--tabs .kh-nav__link[aria-current="page"] { padding-bottom: 11px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-khbar .kh-account, [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-khbar .kh-account { order: 4; margin: 0 0 4px auto; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-main { padding: 18px 52px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-main { padding: 16px 32px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-inicio { grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-inicio__main { gap: 16px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-rooms--home { padding: 14px 20px; gap: 10px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-rooms--home .kh-rooms__title { font-size: 18px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-rooms--home .kh-rooms__sub { font-size: 17px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-room { padding: 10px 14px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-room__icon { width: 54px; height: 54px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-room__game, [data-theme="casino"][data-kh][data-size="desktop"] .kh-room__code { font-size: 21px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-featured { padding: 14px 22px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-featured__name { font-size: 34px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-games { gap: 12px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-games__title { font-size: 15px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-games__grid { gap: 16px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-game__link { gap: 8px; padding: 14px 10px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-game__icon { width: 118px; height: 118px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-game__name { font-size: 22px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-game__tag { display: none; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-game__mine { font-size: 16px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-games__soon { font-size: 17px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-board { padding: 18px 22px; gap: 12px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-board__title { font-size: 20px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-board__sub { font-size: 19px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-rk-row { padding: 8px 12px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-rk-row__nick { font-size: 18px; } [data-theme="casino"][data-kh][data-size="desktop"] .kh-board__more { padding: 14px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-inicio, [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-inicio__main { gap: 14px; column-gap: 16px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-rooms--home { padding: 12px 16px; gap: 8px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-featured { padding: 14px 18px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-games { gap: 10px; } [data-theme="casino"][data-kh][data-size="tablet-h"] .kh-games__grid { gap: 14px; } /* Tablet V: marca y cuenta arriba; pestañas centradas debajo */ [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-header[data-variant="compact"] { gap: 12px; padding: 8px 24px 4px 28px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-header[data-variant="compact"] .kh-header__logo { width: 38px; height: 38px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 16px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-nav--tabs { display: flex; justify-content: center; gap: 36px; font-size: 13px; letter-spacing: 3px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-nav--tabs .kh-nav__link { padding: 14px 0 13px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-nav--tabs .kh-nav__link[aria-current="page"] { padding-bottom: 11px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-main { padding: 20px 28px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-inicio, [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-inicio__main { gap: 18px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-rooms--home { padding: 16px 18px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-games__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } [data-theme="casino"][data-kh][data-size="tablet-v"] .kh-game { width: auto; } /* Móvil V (D-KH-MovilV): una mesa, destacado compacto y los juegos en una fila que se desliza */ [data-theme="casino"][data-kh][data-size="movil-v"] .kh-inicio, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-inicio__main { gap: 12px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-rooms--home { gap: 6px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-featured { padding: 12px 14px; grid-template-columns: 64px minmax(0, 1fr); row-gap: 10px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-featured__art { width: 64px; height: 64px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-featured__name { font-size: 24px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-featured__desc { font-size: 12px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-games__grid { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-game, [data-theme="casino"][data-kh][data-size="movil-v"] .kh-game[data-featured="true"] { display: flex; flex: none; width: 126px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-game__link { gap: 5px; padding: 10px 6px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-game__icon { width: 76px; height: 76px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-game__name { font-size: 17px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-game__mine { font-size: 14px; } [data-theme="casino"][data-kh][data-size="movil-v"] .kh-games__soon { font-size: 15px; } /* Móvil H (D-KH-MovilH): barra de 44 px y todo el Inicio en una sola franja que se desliza */ [data-theme="casino"][data-kh][data-size="movil-h"] .kh-khbar { flex-direction: row; align-items: center; gap: 10px; padding: 2px 12px 0 16px; border-bottom: 1px solid #7A6230; background: rgba(8, 20, 16, 0.6); } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-header[data-variant="compact"] { display: contents; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-khbar .kh-header__logo { order: 1; width: 28px; height: 28px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-khbar .kh-brand { order: 2; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-khbar .kh-brand__name { font-size: 12px; letter-spacing: 2px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-nav--tabs { order: 3; display: flex; gap: 2px; margin-left: 16px; border: 0; background: none; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-nav--tabs .kh-nav__link { display: flex; align-items: center; height: 44px; padding: 0 12px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-nav--tabs .kh-nav__link[aria-current="page"] { padding: 2px 12px 0; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-khbar .kh-account { order: 4; margin-left: auto; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-main { padding: 6px 0 0; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-inicio { position: relative; padding-top: 22px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-inicio__main { display: flex; flex-direction: row; align-items: stretch; gap: 10px; overflow-x: auto; padding: 0 16px 10px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-inicio__main > .kh-slot, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-inicio__main .kh-rooms--home, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-inicio__main .kh-rooms__list, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-inicio__main > .kh-games, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-games__grid { display: contents; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__head { position: absolute; top: 0; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short] { font-size: 0; letter-spacing: 0; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short]::before { display: inline; font: 400 10px Cinzel, serif; letter-spacing: 3px; color: #D9A845; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short]::after { content: ' · MESA DESTACADA · ELIGE TU MESA'; content: ' · MESA DESTACADA · ELIGE TU MESA' / ''; font: 400 10px Cinzel, serif; letter-spacing: 3px; color: #D9A845; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__sub, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-games__title { display: none; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__all { padding: 0; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__all[data-long] { font-size: 0; letter-spacing: 0; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__all[data-long]::before { display: inline; font-size: 10px; letter-spacing: 2px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room { flex: none; width: 226px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 5px; align-content: start; border: 1px solid #D9A845; border-radius: 14px; background: rgba(8, 26, 20, 0.8); padding: 10px 12px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__icon { width: 40px; height: 40px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__body { grid-column: 1 / -1; grid-row: 1; padding-left: 48px; min-height: 40px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__icon { grid-column: 1; grid-row: 1; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__game, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__code { font-size: 17px; line-height: 1.1; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__who, [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__slots { font-size: 11px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__state { margin: 8px 0 0 -48px; font-size: 9px; padding: 2px 7px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__ctx { margin: 8px 0 0 6px; font-size: 13px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__join { grid-column: 1 / -1; margin-top: auto; font-size: 11px; padding: 15px 10px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured { flex: none; width: 262px; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; border-radius: 14px; background: rgba(8, 26, 20, 0.8); padding: 10px 12px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__art { width: 48px; height: 48px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__body { display: contents; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__eyebrow { grid-column: 2; grid-row: 1; align-self: end; font-size: 9px; letter-spacing: 2px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__art { grid-column: 1; grid-row: 1 / span 2; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__name { grid-column: 2; grid-row: 2; align-self: start; font-size: 20px; line-height: 1.05; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__desc { grid-column: 1 / -1; font-size: 11px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__actions { grid-column: 1 / -1; align-self: end; gap: 8px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__actions .kh-btn { flex: 1 1 0; padding: 15px 8px; font-size: 11px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured .kh-btn--secondary { font-size: 10px; letter-spacing: 1px; padding: 14px 8px; background: none; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-game { flex: none; width: 124px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-game__link { justify-content: center; gap: 4px; padding: 8px 6px; border-radius: 14px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-game__icon { width: 70px; height: 70px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-game__name { font-size: 16px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-game__mine { font-size: 13px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-games__soon { flex: none; width: 150px; align-self: center; text-align: left; font-size: 15px; } /* ══ E1.F10.T11 · Bienvenida de 3 pasos (D-ElegirTheme-*, D-Bienvenida2-*, D-Bienvenida3-*, D-KH-ElegirTheme-MovilV) Siempre en Casino (D20): el velo lleva data-theme="casino" aunque el theme del jugador sea otro. ══ */ [data-theme="casino"] .kh-welcome__step { color: #D9A845; } [data-theme="casino"] .kh-welcome__track { background: rgba(217, 168, 69, 0.2); } [data-theme="casino"] .kh-welcome .kh-btn--secondary { background: transparent; border-color: #D9A845; color: #F2D38A; } [data-theme="casino"] .kh-welcome__next { font-size: 14px; letter-spacing: 3px; padding: 17px 20px; } [data-theme="casino"] .kh-welcome__actions > .kh-welcome__later-btn { font-size: 12px; letter-spacing: 3px; padding: 14px 20px; } [data-theme="casino"] .kh-welcome__pair .kh-welcome__back { font-size: 12px; letter-spacing: 2px; padding: 14px 10px; } [data-theme="casino"] .kh-welcome__pair .kh-welcome__later-btn { font-size: 12px; letter-spacing: 2px; font-weight: 400; color: #CDBB92; padding: 15px 10px; } [data-theme="casino"] .kh-welcome__label, [data-theme="casino"] .kh-welcome__field .kh-label { font-size: 10px; letter-spacing: 2px; color: #CDBB92; } [data-theme="casino"] .kh-welcome__input { border-color: #D9A845; background: rgba(14, 42, 34, 0.9); } [data-theme="casino"] .kh-welcome__invent { font-size: 11px; padding: 0 18px; } [data-theme="casino"] .kh-welcome__warn { border-color: #E3B85A; background: rgba(227, 184, 90, 0.12); color: #F4E6C4; } [data-theme="casino"] .kh-welcome__preview { background: rgba(8, 26, 20, 0.8); border-color: #D9A845; } [data-theme="casino"] .kh-welcome__preview-label { color: #CDBB92; } [data-theme="casino"] .kh-welcome__preview-up { color: #F4E6C4; } [data-theme="casino"] .kh-welcome__preview-line { color: #E3B85A; } [data-theme="casino"] .kh-words__chip { border-color: #7A6230; background: rgba(14, 42, 34, 0.85); color: #F4E6C4; } [data-theme="casino"] .kh-words__chip[aria-pressed="true"] { background: #E3B85A; border-color: #E3B85A; color: #1B1206; } [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card { border-color: #7A6230; background: rgba(14, 42, 34, 0.85); } [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card[aria-pressed="true"] { border-color: #E3B85A; background: rgba(217, 168, 69, 0.14); } [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__note { color: #CDBB92; } /* Escritorio y tablet H: diálogo centrado sobre el velo */ [data-size="desktop"] [data-theme="casino"] .kh-welcome__step, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__step, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__step { font-size: 12px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome[data-step="1"] .kh-welcome__logo { width: 64px; height: 64px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome[data-step="1"] .kh-welcome__title { font-size: 32px; letter-spacing: 5px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome[data-step="1"] .kh-welcome__sub { margin-top: 6px; font-size: 22px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card { gap: 10px; padding: 10px; border-radius: 16px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__thumb { height: 150px; border-radius: 12px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__logo { left: 12px; top: 12px; width: 34px; height: 34px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__ink { left: 56px; top: 18px; width: 90px; height: 9px; border-radius: 5px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__ink--short { top: 33px; width: 56px; height: 6px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__art { right: 12px; bottom: 10px; width: 84px; height: 84px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__name { font-size: 16px; letter-spacing: 3px; } [data-size="desktop"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__note { font-size: 16px; } /* Paso 1: AHORA NO y SIGUIENTE centrados en una fila; pasos 2 y 3: ← ATRÁS · AHORA NO · SIGUIENTE */ [data-size="desktop"] [data-theme="casino"] .kh-welcome__actions, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__actions { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 14px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__pair, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__pair { display: contents; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__actions > .kh-welcome__later-btn, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__actions > .kh-welcome__later-btn { order: 1; font-size: 13px; padding: 15px 26px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__back, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__back { order: 1; font-size: 13px !important; letter-spacing: 3px !important; padding: 15px 24px !important; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__pair .kh-welcome__later-btn, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__pair .kh-welcome__later-btn { order: 2; margin-left: auto; padding: 0 8px; letter-spacing: 3px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__next, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__next { order: 3; font-size: 15px; padding: 17px 40px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); } [data-size="desktop"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__actions, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__actions { justify-content: flex-start; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__later, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__later { order: 4; flex: 1 0 100%; font-size: 13px; } /* Pasos 2 y 3 en escritorio y tablets: apodo e INVENTAR OTRO en una fila */ [data-size="desktop"] [data-theme="casino"] .kh-welcome__avatar, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__avatar { width: 104px; height: 104px; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__avatar { width: 110px; height: 110px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__title, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__title, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__title { font-size: 26px; letter-spacing: 3px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__sub, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__sub, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__sub { margin-top: 6px; font-size: 21px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__field, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__field, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__field { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; row-gap: 8px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__field > :not(.kh-welcome__input):not(.kh-welcome__invent), [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__field > :not(.kh-welcome__input):not(.kh-welcome__invent), [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__field > :not(.kh-welcome__input):not(.kh-welcome__invent) { grid-column: 1 / -1; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__field .kh-label, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__field .kh-label, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__field .kh-label { font-size: 11px; letter-spacing: 3px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__input, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__input, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__input { height: 52px; padding: 0 16px; font-size: 24px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__invent, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__invent, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__invent { align-self: stretch; height: 52px; padding: 0 20px; font-size: 12px; } [data-size="desktop"] [data-theme="casino"] .kh-welcome__warn, [data-size="tablet-h"] [data-theme="casino"] .kh-welcome__warn, [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__warn { margin-top: 4px; padding: 12px 16px; font-size: 16px; } /* Tablet V: hoja inferior; ← ATRÁS (1/3) y SIGUIENTE (2/3), AHORA NO debajo */ [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__actions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 14px; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__pair { display: contents; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__back { grid-column: 1; grid-row: 1; font-size: 13px !important; letter-spacing: 3px !important; padding: 16px 20px !important; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome:not([data-step="1"]) .kh-welcome__next { grid-column: 2; grid-row: 1; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome[data-step="1"] .kh-welcome__next { grid-column: 1 / -1; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__next { font-size: 15px; padding: 17px 30px; clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 14px 100%, 0 50%); } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__later-btn { grid-column: 1 / -1; justify-self: center; font-size: 12px; letter-spacing: 3px; } [data-size="tablet-v"] [data-theme="casino"] .kh-welcome__later { grid-column: 1 / -1; margin-top: -12px; font-size: 13px; } /* Móvil H: columna de 250/270 px con el texto y las acciones; a la derecha los themes, el apodo o las palabras */ [data-size="movil-h"] [data-theme="casino"] .kh-welcome { text-align: left; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__step { font-size: 11px; letter-spacing: 2px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__logo { display: none; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__title { font-size: 18px; letter-spacing: 2px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="1"] .kh-welcome__title { font-size: 19px; letter-spacing: 3px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__sub { margin: 0; font-size: 16px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="1"] .kh-welcome__sub { font-size: 17px; } [data-size="movil-h"] [data-theme="casino"] .kh-themes[data-variant="welcome"] .kh-theme-card__thumb { height: 180px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__next { font-size: 13px; letter-spacing: 2px; padding: 16px 14px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__actions > .kh-welcome__later-btn { font-size: 11px; padding: 14px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome__later { font-size: 11px; text-align: center; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] { grid-template-columns: 270px minmax(0, 1fr); column-gap: 22px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] > .kh-welcome__progress { grid-column: 1; grid-row: 1; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] > .kh-welcome__head { grid-column: 1; grid-row: 2; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] > .kh-welcome__preview { grid-column: 1; grid-row: 3; padding: 10px 12px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] > .kh-words { grid-column: 2; grid-row: 1 / span 2; justify-content: flex-start; align-self: end; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] > .kh-words__custom { grid-column: 2; grid-row: 2; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] > .kh-welcome__actions { grid-column: 2; grid-row: 3; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] .kh-welcome__pair { display: contents; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] .kh-welcome__back { order: 1; font-size: 11px; padding: 14px 18px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] .kh-welcome__pair .kh-welcome__later-btn { order: 2; margin-left: auto; font-size: 11px; padding: 0 8px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] .kh-welcome__next { order: 3; padding: 16px 24px; } [data-size="movil-h"] [data-theme="casino"] .kh-welcome[data-step="3"] .kh-welcome__later { order: 4; flex: 1 0 100%; text-align: right; } /* ══ Rankings · los 3 tableros lado a lado (D-TabletH) · desviaciones comunes ══ La vista emite `.kh-rk-trio` en tablet H y escritorio; D-TabletH lo dibuja en tablet H: las fichas de los juegos, el periodo y FÁCIL · MEDIO · DIFÍCIL en 3 paneles, sin título, sin selector de dificultad ni el tablero elegido. */ [data-theme="casino"] .kh-rk-trio, [data-theme="casino"] .kh-rk-trio__caption { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-head, [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-boards, [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-main > .kh-podium, [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-main > .kh-rk-list, [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-main > .kh-rk-around, [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-main > .kh-rk-empty { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio]::after { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] { grid-template-rows: auto auto minmax(0, 1fr); flex-grow: 1; min-height: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-games { grid-row: 1; } [data-theme="casino"][data-size="tablet-h"] .kh-rankings[data-trio] .kh-rk-filters { grid-row: 2; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio { grid-row: 3; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; min-height: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio__board { border: 1px solid #D9A845; border-radius: 18px; background: rgba(8, 26, 20, 0.78); padding: 14px 18px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio__head { display: flex; flex-direction: column; gap: 8px; text-align: center; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio__title { margin: 0; font: 700 18px Cinzel, serif; letter-spacing: 4px; text-transform: uppercase; color: #F2D38A; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio__sub { margin: 0; font: italic 400 18px 'Cormorant Garamond', serif; color: #D9A845; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium { gap: 8px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__item { gap: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__rank { width: 40px; height: 40px; border-width: 2px; font-size: 15px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__nick { font-size: 15px; line-height: 1.1; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__score { font-size: 13px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__bar { height: 30px; border-radius: 10px 10px 0 0; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__item[data-pos="1"] .kh-podium__bar { height: 64px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-podium__item[data-pos="2"] .kh-podium__bar { height: 44px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-list { gap: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row { gap: 10px; padding: 8px 10px; border-radius: 10px; border: 1px solid transparent; background: transparent; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row[data-me="true"] { background: rgba(217, 168, 69, 0.2); border-color: #D9A845; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row__rank { width: 38px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-row__nick { font-size: 18px; } /* Con tu puesto fuera del top, el marco deja 1 fila antes de "· · ·" */ [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio__board:has(.kh-rk-around) > .kh-rk-list > .kh-rk-row:nth-child(n+2) { display: none; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-around { gap: 3px; } [data-theme="casino"][data-size="tablet-h"] .kh-rk-trio .kh-rk-empty .kh-empty__title { font-size: 18px; text-align: center; } /* ══ Rankings · cuántas filas muestra la lista (desviaciones comunes, punto 3) ══ Los marcos D-Rankings-* y D-TabletH llegan hasta el VI; tu fila nunca se esconde. */ [data-theme="casino"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+4):not([data-me]) { display: none; } /* ══ Desviaciones comunes, punto 4 · elementos que faltaban ══ Sin partidas (D-Estado-SinPartidas-MovilV): la temporada en cero con "MIS JUGADAS", "La temporada de Emekui" y "Hitos 0 / 31" (la vista ya la emite; antes el título salía de ::before). Sin ícono (D-Estado-SinIcono-MovilV): el marco dibuja solo la grilla de juegos. */ [data-theme="casino"] .kh-mis[data-state="empty"]::before { display: none; } [data-theme="casino"] .kh-mis[data-state="empty"] .kh-stats, [data-theme="casino"] .kh-mis[data-state="empty"] .kh-season__note { display: none; } [data-theme="casino"] .kh-inicio[data-state="sin-icono"] [data-slot="rooms"], [data-theme="casino"] .kh-inicio[data-state="sin-icono"] .kh-featured, [data-theme="casino"] .kh-inicio[data-state="sin-icono"] .kh-greet { display: none; } /* BUG-35: indicador de la fila «Elige tu mesa» (D-KH-MovilV): ficha dorada, puntos como fichas */ [data-theme="casino"] .kh-scroll-more__btn { border-color: #D9A845; background: rgba(8, 26, 20, 0.7); color: #F2D38A; font-family: Cinzel, serif; } [data-theme="casino"] .kh-scroll-more__dot { background: #7A6230; } [data-theme="casino"] .kh-scroll-more__dot[data-on] { background: #E3B85A; } /* Vista previa (req. 4.4 · D23): ficha dorada y título en versales */ [data-theme="casino"] .kh-preview-btn { border-color: #D9A845; background: rgba(8, 26, 20, 0.85); color: #F2D38A; } [data-theme="casino"] .kh-pv { border-color: #D9A845; } [data-theme="casino"] .kh-pv__title { color: #F2D38A; font-size: 16px; } /* Vista previa: aquí el cuerpo del destacado es display: contents; el 👀 va en su esquina, sin texto visible (aria-label) */ [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__body > .kh-preview-btn { position: absolute; top: 8px; right: 8px; margin: 0; min-height: 32px; padding: 0 6px; } [data-theme="casino"][data-kh][data-size="movil-h"] .kh-featured__body > .kh-preview-btn .kh-preview-btn__text { display: none; }