/* * hub-front-themes E1.F12 (D5): layout y detalles del theme Recreo por pantalla y tamaño, todo bajo * html[data-theme="recreo"]. Cada sección nombra los marcos que reproduce (canvas aprobado, marcos A-* y Main). * Los tokens están en ../tokens.css; la hoja común en ../app.css (no se toca: aquí solo se sobrescribe). * Tamaños: html[data-size=desktop|tablet-h|tablet-v|movil-h|movil-v]; dentro de KitchHero: html[data-kh]. * Los controles se visten solo dentro de .kh-shell, .kh-account-sheet y .kh-login: la bienvenida es siempre Casino (D20). */ /* ── Base: colores por juego (fondo del ícono, barra de hitos, asientos) ───────────────────────────────────────── */ html[data-theme="recreo"] { --r-ink: #1F1A14; --r-cream: #FBF4E6; --r-muted: #5C5246; --r-band-text: #CFC6B8; --r-line: #F1E7D6; --r-me: #FDEBD3; } html[data-theme="recreo"] body { background-color: #FBF4E6; color: #1F1A14; font-family: Figtree, system-ui, sans-serif; } html[data-theme="recreo"] [data-game] { --g: #F1E7D6; } html[data-theme="recreo"] [data-game="pasapaloma"] { --g: #F2B632; } html[data-theme="recreo"] [data-game="donkydoz"] { --g: #7FB7F0; } html[data-theme="recreo"] [data-game="pingpongale"] { --g: #F4A3A8; } html[data-theme="recreo"] [data-game="salvimaticas"] { --g: #9FD8A8; } html[data-theme="recreo"] [data-game="pigeometridash"] { --g: #C9B6F2; } html[data-theme="recreo"] .kh-shell ul, html[data-theme="recreo"] .kh-shell ol { list-style: none; margin: 0; padding: 0; } html[data-theme="recreo"] .kh-shell h1, html[data-theme="recreo"] .kh-shell h2, html[data-theme="recreo"] .kh-shell h3, html[data-theme="recreo"] .kh-shell p { margin: 0; } html[data-theme="recreo"] .kh-shell a { text-decoration: none; } html[data-theme="recreo"] .kh-shell .kh-btn { font-family: Figtree, system-ui, sans-serif; letter-spacing: 0; clip-path: none; } @media (prefers-reduced-motion: no-preference) { html[data-theme="recreo"] .kh-rooms__title::before { animation: kh-recreo-live 2s ease-in-out infinite; } } @keyframes kh-recreo-live { 50% { opacity: 0.45; } } /* ── Marco común: encabezado de marca (Main, A-Inicio-TabletH, A-Inicio-TabletV) ────────────────────────────────── */ html[data-theme="recreo"] .kh-shell[data-nav="header"] { padding: 32px 48px; gap: 24px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-shell[data-nav="header"] { padding: 28px 36px; gap: 20px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-shell[data-nav="header"] { padding: 32px; gap: 18px; } html[data-theme="recreo"] .kh-header { gap: 24px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-header { gap: 18px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-header[data-variant="brand"] { gap: 18px 12px; flex-wrap: wrap; } html[data-theme="recreo"] .kh-header__logo, html[data-theme="recreo"][data-size="tablet-v"] .kh-header__logo { width: 48px; height: 48px; border-radius: 12px; flex: none; } html[data-theme="recreo"] .kh-brand__name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; letter-spacing: -0.5px; color: #1F1A14; white-space: nowrap; } html[data-theme="recreo"] .kh-brand__games { color: #E4572E; } html[data-theme="recreo"] .kh-brand__tag { display: none; } html[data-theme="recreo"][data-size="tablet-h"] .kh-brand__name, html[data-theme="recreo"][data-size="tablet-v"] .kh-brand__name { font-size: 26px; letter-spacing: 0; } /* Navegación en píldoras (activa oscura) */ html[data-theme="recreo"] .kh-nav { font-family: Figtree, system-ui, sans-serif; font-size: 16px; letter-spacing: 0; gap: 6px; } html[data-theme="recreo"] .kh-nav--header { margin-left: 24px; } html[data-theme="recreo"] .kh-nav__link { padding: 10px 18px; border: 0; border-radius: 999px; color: #1F1A14; font-weight: 600; background: transparent; } html[data-theme="recreo"] .kh-nav__link[aria-current="page"] { border: 0; background: #1F1A14; color: #FBF4E6; font-weight: 600; } html[data-theme="recreo"][data-size="tablet-h"] .kh-nav--header, html[data-theme="recreo"][data-size="tablet-v"] .kh-nav--header { margin-left: 0; gap: 6px; font-size: 16px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-nav--header .kh-nav__link, html[data-theme="recreo"][data-size="tablet-v"] .kh-nav--header .kh-nav__link { min-height: 44px; display: inline-flex; align-items: center; } html[data-theme="recreo"][data-size="tablet-h"] .kh-nav--header .kh-nav__link { padding: 9px 16px; } /* Tablet V: la navegación baja a su propia fila bajo el encabezado */ html[data-theme="recreo"][data-size="tablet-v"] .kh-nav--header { order: 10; flex-basis: 100%; } /* Cuenta en píldora con sombra dura */ html[data-theme="recreo"] .kh-account--pill { margin-left: auto; gap: 10px; border: 2px solid #1F1A14; background: #FFFFFF; border-radius: 999px; padding: 6px 16px 6px 6px; font: 600 15px Figtree, sans-serif; color: #1F1A14; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"] .kh-account--pill .kh-account__avatar { width: 34px; height: 34px; border: 0; background: #F2B632; } html[data-theme="recreo"][data-size="tablet-h"] .kh-account--pill, html[data-theme="recreo"][data-size="tablet-v"] .kh-account--pill { gap: 8px; padding: 5px 14px 5px 5px; font-size: 14px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-account--pill .kh-account__avatar, html[data-theme="recreo"][data-size="tablet-v"] .kh-account--pill .kh-account__avatar { width: 30px; height: 30px; } /* Cuenta redonda (móvil y dentro de KitchHero) */ html[data-theme="recreo"] .kh-account:not(.kh-account--pill) .kh-account__avatar { width: 44px; height: 44px; border: 2px solid #1F1A14; background: #F2B632; } /* Botones del theme: primario amarillo con borde de tinta y sombra dura; secundario blanco */ html[data-theme="recreo"] .kh-shell .kh-btn--primary { background: #F2B632; color: #1F1A14; border: 2px solid #1F1A14; border-radius: 12px; box-shadow: 3px 3px 0 #1F1A14; font-size: 16px; font-weight: 700; padding: 11px 22px; } html[data-theme="recreo"] .kh-shell .kh-btn--secondary { background: #FFFFFF; color: #1F1A14; border: 2px solid #1F1A14; border-radius: 12px; font-size: 16px; font-weight: 700; padding: 11px 20px; } /* ── Inicio escritorio (Main) ───────────────────────────────────────────────────────────────────────────────────── */ html[data-theme="recreo"] .kh-greet { display: none; } html[data-theme="recreo"] .kh-inicio { display: flex; flex-direction: column; gap: 22px; } html[data-theme="recreo"] .kh-inicio__main { display: flex; flex-direction: column; gap: 22px; min-width: 0; } html[data-theme="recreo"][data-size="desktop"] .kh-inicio { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 28px; flex-grow: 1; } /* Banda oscura "Tus compas están jugando ahora" */ html[data-theme="recreo"] .kh-rooms--home { background: #1F1A14; color: #FBF4E6; border-radius: 22px; padding: 20px 24px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px 10px; } html[data-theme="recreo"] .kh-rooms--home .kh-rooms__head { display: contents; } html[data-theme="recreo"] .kh-rooms__title { display: flex; align-items: center; gap: 10px; } html[data-theme="recreo"] .kh-rooms__title::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; background: #5BD18B; box-sizing: border-box; } html[data-theme="recreo"] .kh-rooms--home .kh-rooms__title { grid-column: 1; grid-row: 1; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700; } html[data-theme="recreo"] .kh-rooms--home .kh-rooms__sub { grid-column: 2; grid-row: 1; justify-self: end; font-size: 13px; color: #CFC6B8; } html[data-theme="recreo"] .kh-rooms--home .kh-rooms__all { grid-column: 3; grid-row: 1; color: #F2B632; font-weight: 700; font-size: 14px; } html[data-theme="recreo"] .kh-rooms--home .kh-rooms__list, html[data-theme="recreo"] .kh-rooms--home .kh-rooms__empty { grid-column: 1 / -1; grid-row: 2; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms--home .kh-rooms__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } html[data-theme="recreo"] .kh-rooms--home .kh-rooms__list { display: flex; flex-direction: column; gap: 12px; } /* Una sala en la banda */ html[data-theme="recreo"] .kh-rooms--home .kh-room { display: flex; align-items: center; gap: 14px; background: #2C251D; border-radius: 16px; padding: 14px 16px; color: #FBF4E6; } html[data-theme="recreo"] .kh-room__icon { flex: none; display: block; width: 52px; height: 52px; border-radius: 14px; background: var(--g); object-fit: contain; } html[data-theme="recreo"] .kh-rooms--home .kh-room__body { flex-grow: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; row-gap: 2px; font-size: 13px; color: #CFC6B8; } html[data-theme="recreo"] .kh-rooms--home .kh-room__label { flex-basis: 100%; font-weight: 700; font-size: 16px; color: #FBF4E6; } html[data-theme="recreo"] .kh-rooms--home .kh-room__game, html[data-theme="recreo"] .kh-rooms--home .kh-room__code, html[data-theme="recreo"] .kh-rooms--home .kh-room__seats { display: none; } html[data-theme="recreo"] .kh-rooms--home .kh-room__slots::before, html[data-theme="recreo"] .kh-rooms--home .kh-room__state::before { content: '\00a0·\00a0'; } html[data-theme="recreo"] .kh-rooms--home .kh-room__state { text-transform: lowercase; } html[data-theme="recreo"] .kh-room__ctx { flex-basis: 100%; font-size: 12px; font-weight: 600; color: #F2B632; } html[data-theme="recreo"] .kh-room__ctx::first-letter { text-transform: uppercase; } html[data-theme="recreo"] .kh-shell .kh-rooms--home .kh-room__join { flex: none; background: #F2B632; color: #1F1A14; border: 0; box-shadow: none; font-weight: 700; font-size: 16px; padding: 10px 16px; border-radius: 12px; } /* Sin salas en la banda (A-Estado-SinCompas-Desktop / -MovilV) */ html[data-theme="recreo"] .kh-rooms--home[data-state="empty"] .kh-rooms__title::before { background: transparent; border: 2px solid #CFC6B8; animation: none; } html[data-theme="recreo"] .kh-rooms--home[data-state="empty"] .kh-rooms__sub { display: none; } html[data-theme="recreo"] .kh-rooms__empty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 0; text-align: left; } html[data-theme="recreo"] .kh-rooms__empty .kh-empty__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.15; letter-spacing: 0; color: #FBF4E6; } html[data-theme="recreo"] .kh-rooms__empty .kh-empty__text { font-size: 14px; line-height: 1.45; color: #CFC6B8; } html[data-theme="recreo"] .kh-shell .kh-rooms__empty .kh-rooms__create { align-self: flex-start; background: #F2B632; color: #1F1A14; border: 0; box-shadow: none; font-weight: 700; padding: 12px 20px; border-radius: 12px; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms--home[data-state="empty"] { padding: 22px 26px; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms--home[data-state="empty"] .kh-rooms__head { display: none; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms__empty { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 24px; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms__empty .kh-empty__title { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 22px; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms__empty .kh-empty__title::before { content: ''; flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid #CFC6B8; box-sizing: border-box; } html[data-theme="recreo"][data-size="desktop"] .kh-rooms__empty .kh-empty__text { grid-column: 1; font-size: 15px; max-width: 560px; } html[data-theme="recreo"][data-size="desktop"] .kh-shell .kh-rooms__empty .kh-rooms__create { grid-column: 2; grid-row: 1 / span 2; font-size: 16px; padding: 13px 24px; } /* Destacado: panel de arte 220 px a la izquierda */ html[data-theme="recreo"] .kh-featured { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; overflow: hidden; box-shadow: 4px 4px 0 #1F1A14; display: grid; grid-template-columns: 220px minmax(0, 1fr); grid-template-rows: 1fr auto; } html[data-theme="recreo"] .kh-featured__art { grid-column: 1; grid-row: 1 / span 2; display: block; width: 100%; height: 100%; object-fit: contain; background: var(--g); border-right: 2px solid #1F1A14; } html[data-theme="recreo"] .kh-featured__body { padding: 20px 26px 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; } html[data-theme="recreo"] .kh-featured__eyebrow { align-self: flex-start; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 8px; background: #F2B632; color: #1F1A14; } html[data-theme="recreo"] .kh-featured__name { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -0.5px; } html[data-theme="recreo"] .kh-featured__desc { font-size: 15px; color: #5C5246; line-height: 1.4; } html[data-theme="recreo"] .kh-featured__actions { padding: 12px 26px 20px; display: flex; gap: 10px; align-self: start; } html[data-theme="recreo"] .kh-shell .kh-featured__actions .kh-btn--primary { padding: 11px 22px; } html[data-theme="recreo"] .kh-shell .kh-featured__actions .kh-btn--secondary { padding: 11px 20px; } /* "Elige un juego": tarjetas blancas con franja de color */ html[data-theme="recreo"] .kh-games { display: flex; flex-direction: column; gap: 14px; } html[data-theme="recreo"] .kh-games__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 700; } html[data-theme="recreo"] .kh-games__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; } html[data-theme="recreo"] .kh-game__link { height: 100%; color: #1F1A14; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 4px 4px 0 #1F1A14; } html[data-theme="recreo"] .kh-game__icon { display: block; flex: none; width: 100%; height: 108px; object-fit: contain; background: var(--g); } html[data-theme="recreo"] .kh-game__name { display: block; margin: 10px 14px 0; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 18px; } html[data-theme="recreo"] .kh-game__tag { display: block; margin: 3px 14px 0; font-size: 13px; color: #5C5246; line-height: 1.35; } html[data-theme="recreo"] .kh-game__mine { display: block; margin: 7px 14px 12px; font-size: 12px; font-weight: 700; color: #B8401F; } html[data-theme="recreo"] .kh-games__soon { font-size: 14px; color: #5C5246; } /* Tarjeta lateral "Ranking por juego" + resumen de Mis jugadas (columna de 380 px) */ html[data-theme="recreo"] .kh-inicio__side { display: flex; flex-direction: column; min-width: 0; } html[data-theme="recreo"] .kh-board { position: relative; flex-grow: 1; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; padding: 20px; box-shadow: 4px 4px 0 #1F1A14; display: flex; flex-direction: column; gap: 14px; } html[data-theme="recreo"] .kh-board__title { padding-right: 96px; font-family: 'Bricolage Grotesque', sans-serif; font-size: 22px; font-weight: 700; } html[data-theme="recreo"] .kh-board > .kh-board__full { position: absolute; top: 26px; right: 20px; font-size: 13px; font-weight: 700; color: #B8401F; } html[data-theme="recreo"] .kh-board__sub { display: none; } html[data-theme="recreo"] .kh-board__games { display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme="recreo"] .kh-board__games .kh-seg__btn { border: 1px solid #D9CFBF; background: #FFFFFF; color: #1F1A14; border-radius: 999px; padding: 8px 12px; font: 600 13px Figtree, sans-serif; cursor: pointer; } html[data-theme="recreo"] .kh-board__games .kh-seg__btn[aria-pressed="true"] { border-color: #1F1A14; background: #1F1A14; color: #FBF4E6; } html[data-theme="recreo"] .kh-rk-boards { display: flex; gap: 6px; } html[data-theme="recreo"] .kh-rk-boards .kh-seg__btn { border: 0; padding: 6px 10px; border-radius: 8px; background: transparent; color: #5C5246; font: 600 13px Figtree, sans-serif; cursor: pointer; } html[data-theme="recreo"] .kh-rk-boards .kh-seg__btn[aria-pressed="true"] { background: #F2B632; color: #1F1A14; } html[data-theme="recreo"] .kh-rk-periods { display: flex; gap: 4px; background: #F1E7D6; border-radius: 12px; padding: 4px; } html[data-theme="recreo"] .kh-rk-periods .kh-seg__btn { flex-grow: 1; border: 0; padding: 6px 10px; border-radius: 9px; background: transparent; color: #1F1A14; font: 600 13px Figtree, sans-serif; cursor: pointer; } html[data-theme="recreo"] .kh-rk-periods .kh-seg__btn[aria-pressed="true"] { background: #FFFFFF; } html[data-theme="recreo"] .kh-board .kh-rk-list { display: flex; flex-direction: column; gap: 4px; } html[data-theme="recreo"] .kh-board .kh-rk-row:nth-child(n+6) { display: none; } html[data-theme="recreo"] .kh-rk-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; } html[data-theme="recreo"] .kh-rk-row[data-me="true"] { background: #FDEBD3; } html[data-theme="recreo"] .kh-board .kh-rk-row__rank { width: 26px; flex: none; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 18px; } html[data-theme="recreo"] .kh-board .kh-rk-row[data-me="true"] .kh-rk-row__rank { color: #E4572E; } html[data-theme="recreo"] .kh-rk-row__nick { flex-grow: 1; min-width: 0; font-weight: 600; } html[data-theme="recreo"] .kh-rk-row__score { font-variant-numeric: tabular-nums; font-weight: 700; } html[data-theme="recreo"] .kh-board > .kh-board__more { margin-top: auto; color: #1F1A14; background: #FBF4E6; border-radius: 16px; padding: 14px 16px; font-weight: 700; } /* ── Inicio tablet H (A-Inicio-TabletH): salas y destacado lado a lado (450 px); sin tarjeta de ranking ───────────── */ html[data-theme="recreo"][data-size="tablet-h"] .kh-inicio { gap: 20px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-inicio__side { display: none; } html[data-theme="recreo"][data-size="tablet-h"] .kh-inicio__main { display: grid; grid-template-columns: minmax(0, 1fr) 450px; gap: 20px 22px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-inicio__main > .kh-games { grid-column: 1 / -1; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--home, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--home { padding: 18px 20px; row-gap: 12px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__title { font-size: 21px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__sub, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__sub { grid-column: 1 / -1; grid-row: 3; justify-self: start; font-size: 12px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--home .kh-rooms__all, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--home .kh-rooms__all { min-height: 44px; display: inline-flex; align-items: center; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--home .kh-room, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--home .kh-room { padding: 12px 14px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-shell .kh-rooms--home .kh-room__join, html[data-theme="recreo"][data-size="tablet-v"] .kh-shell .kh-rooms--home .kh-room__join { padding: 12px 18px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured { display: flex; flex-direction: column; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured__art { height: 120px; border-right: 0; border-bottom: 2px solid #1F1A14; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured__body { padding: 14px 20px 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured__name { order: 1; font-size: 26px; letter-spacing: 0; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured__eyebrow { order: 2; align-self: center; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured__desc { order: 3; flex-basis: 100%; font-size: 14px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-featured__actions { padding: 12px 20px 18px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-games__title, html[data-theme="recreo"][data-size="tablet-v"] .kh-games__title { font-size: 24px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-game__icon { height: 112px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-game__name { margin: 10px 12px 0; font-size: 17px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-game__tag { margin: 3px 12px 0; } html[data-theme="recreo"][data-size="tablet-h"] .kh-game__mine { margin: 7px 12px 12px; } /* ── Inicio tablet V (A-Inicio-TabletV): una columna; destacado con arte de 200 px; grilla de 3 ─────────────────── */ html[data-theme="recreo"][data-size="tablet-v"] .kh-inicio, html[data-theme="recreo"][data-size="tablet-v"] .kh-inicio__main { gap: 18px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-inicio__side { display: none; } html[data-theme="recreo"][data-size="tablet-v"] .kh-featured { grid-template-columns: 200px minmax(0, 1fr); } html[data-theme="recreo"][data-size="tablet-v"] .kh-featured__body { padding: 18px 22px 0; justify-content: flex-start; } html[data-theme="recreo"][data-size="tablet-v"] .kh-featured__name { font-size: 28px; letter-spacing: 0; } html[data-theme="recreo"][data-size="tablet-v"] .kh-featured__actions { padding: 12px 22px 18px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-shell .kh-featured__actions .kh-btn { padding-top: 12px; padding-bottom: 12px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-games__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-theme="recreo"][data-size="tablet-v"] .kh-game__icon { height: 88px; } /* ── Móvil vertical (A-MovilV, A-Inicio-Bro-MovilV): encabezado propio, contenido que se desplaza y menú fijo al pie ── */ html[data-theme="recreo"] .kh-shell[data-nav="bottom"] { padding: 20px 18px 0; gap: 16px; } html[data-theme="recreo"] .kh-header[data-variant="mobile"] { gap: 0; } html[data-theme="recreo"] .kh-header[data-variant="mobile"] .kh-brand__name { font-size: 22px; letter-spacing: 0; } html[data-theme="recreo"] .kh-header[data-variant="mobile"] .kh-account { margin-left: auto; } html[data-theme="recreo"] .kh-nav--bottom { margin: auto -18px 0; padding: 8px 8px calc(18px + env(safe-area-inset-bottom)); gap: 0; background: #FFFFFF; border-top: 2px solid #1F1A14; font-size: 13px; letter-spacing: 0; } html[data-theme="recreo"] .kh-nav--bottom .kh-nav__link { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: 12px; font-weight: 700; font-size: 13px; color: #1F1A14; } html[data-theme="recreo"] .kh-nav--bottom .kh-nav__link[aria-current="page"] { background: #1F1A14; color: #FBF4E6; font-weight: 700; } html[data-theme="recreo"][data-size="movil-v"] .kh-inicio, html[data-theme="recreo"][data-size="movil-v"] .kh-inicio__main { gap: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home { border-radius: 20px; padding: 14px 16px; gap: 10px 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms__title::before { width: 8px; height: 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-rooms__title, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title { grid-column: 1 / -1; gap: 8px; font-family: Figtree, system-ui, sans-serif; font-size: 15px; font-weight: 700; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-rooms__title[data-short], html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short] { font-size: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-rooms__title[data-short]::after, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title[data-short]::after { content: attr(data-short); font-size: 15px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-rooms__sub, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__sub { display: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-rooms__list { gap: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-rooms__all { grid-column: 1 / -1; grid-row: 3; min-height: 44px; display: flex; align-items: center; justify-content: center; border-top: 1px solid #3A3128; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-room { gap: 10px; padding: 0; background: transparent; border-radius: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-room__icon { width: 44px; height: 44px; border-radius: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home .kh-room__body { font-size: 12px; row-gap: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-shell .kh-rooms--home .kh-room__join { padding: 11px 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--home[data-state="empty"] { padding: 18px 18px 16px; } /* Destacado en móvil V: arte de 84 px con insignia y nombre al lado, botones a lo ancho */ html[data-theme="recreo"][data-size="movil-v"] .kh-featured { border-radius: 20px; padding: 14px; box-shadow: 3px 3px 0 #1F1A14; grid-template-columns: 84px minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__art { grid-row: 1 / span 2; width: 84px; height: 84px; border: 2px solid #1F1A14; border-radius: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__body { display: contents; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin-bottom: 4px; font-size: 11px; padding: 4px 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__name { grid-column: 2; grid-row: 2; align-self: start; font-size: 22px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__desc { grid-column: 1 / -1; grid-row: 3; margin-top: 10px; font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__actions { grid-column: 1 / -1; grid-row: 4; padding: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-shell .kh-featured__actions .kh-btn { padding: 12px; } /* Grilla de 2 en móvil V */ html[data-theme="recreo"][data-size="movil-v"] .kh-games { gap: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-games__title { margin-top: 4px; font-size: 22px; } html[data-theme="recreo"][data-size="movil-v"] .kh-games__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-game__link { border-radius: 18px; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-v"] .kh-game__icon { height: 92px; } html[data-theme="recreo"][data-size="movil-v"] .kh-game__name { margin: 9px 11px 0; font-family: Figtree, system-ui, sans-serif; font-weight: 800; font-size: 15px; } html[data-theme="recreo"][data-size="movil-v"] .kh-game__tag, html[data-theme="recreo"][data-size="movil-h"] .kh-game__tag { display: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-game__mine { margin: 0 11px 11px; } html[data-theme="recreo"][data-size="movil-v"] .kh-games__soon { font-size: 13px; } /* ── Móvil horizontal (A-Inicio-MovilH): columna lateral de 184 px con marca, navegación y cuenta ──────────────── */ html[data-theme="recreo"][data-size="movil-h"] .kh-shell[data-nav="header"] { display: grid; grid-template-columns: 184px minmax(0, 1fr); align-items: stretch; gap: 16px; padding: 16px 20px; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="brand"] { flex-direction: column; align-items: stretch; gap: 6px; } html[data-theme="recreo"][data-size="movil-h"] .kh-header__logo { width: 40px; height: 40px; border-radius: 10px; align-self: flex-start; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="brand"] .kh-brand__name { font-size: 19px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="brand"] .kh-brand { margin-bottom: 6px; } html[data-theme="recreo"][data-size="movil-h"] .kh-nav--header { margin-left: 0; flex-direction: column; gap: 6px; font-size: 16px; } html[data-theme="recreo"][data-size="movil-h"] .kh-nav--header .kh-nav__link { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; border-radius: 12px; font-weight: 700; } html[data-theme="recreo"][data-size="movil-h"] .kh-nav--header .kh-nav__link[aria-current="page"] { font-weight: 700; } html[data-theme="recreo"][data-size="movil-h"] .kh-account--pill { margin: auto 0 0; min-height: 44px; gap: 8px; padding: 4px 12px 4px 4px; font-size: 13px; box-shadow: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-account--pill .kh-account__avatar { width: 32px; height: 32px; } html[data-theme="recreo"][data-size="movil-h"] .kh-main { min-width: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-inicio { gap: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-inicio__side { display: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-inicio__main { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-inicio__main > .kh-games { grid-column: 1 / -1; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home { border-radius: 18px; padding: 12px 14px; gap: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms__title::before { width: 8px; height: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__title { grid-column: 1; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__all { font-size: 13px; min-height: 32px; display: inline-flex; align-items: center; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-rooms__list { gap: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-room { gap: 10px; border-radius: 14px; padding: 8px 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-room__icon { width: 40px; height: 40px; border-radius: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-room__body { font-size: 12px; row-gap: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--home .kh-room__label { font-size: 14px; } html[data-theme="recreo"][data-size="movil-h"] .kh-shell .kh-rooms--home .kh-room__join { padding: 11px 13px; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured { border-radius: 18px; padding: 12px; box-shadow: 3px 3px 0 #1F1A14; grid-template-columns: 52px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured__art { grid-row: 1 / span 2; width: 52px; height: 52px; border: 2px solid #1F1A14; border-radius: 14px; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured__body { display: contents; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured__eyebrow { grid-column: 2; grid-row: 1; align-self: end; padding: 0; background: none; font-size: 11px; color: #B8401F; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured__name { grid-column: 2; grid-row: 2; align-self: start; font-size: 19px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured__desc { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; font-size: 13px; line-height: 1.35; } html[data-theme="recreo"][data-size="movil-h"] .kh-featured__actions { grid-column: 1 / -1; grid-row: 4; align-self: end; padding: 8px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-shell .kh-featured__actions .kh-btn { padding: 10px 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-shell .kh-featured__actions .kh-btn--primary { box-shadow: 2px 2px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-h"] .kh-games { gap: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-games__title { font-size: 18px; } html[data-theme="recreo"][data-size="movil-h"] .kh-games__grid { gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-game__link { border-radius: 16px; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-h"] .kh-game__icon { height: 66px; } html[data-theme="recreo"][data-size="movil-h"] .kh-game__name { margin: 7px 6px 0; font-family: Figtree, system-ui, sans-serif; font-weight: 800; font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-game__mine { margin: 0 6px 9px; font-size: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-games__soon { font-size: 12px; } /* ── Salas escritorio y tablet H (A-Salas-Desktop, A-Salas-TabletH): tarjetas con arte arriba, 3 columnas ─────────── */ html[data-theme="recreo"] .kh-salas { display: flex; flex-direction: column; } html[data-theme="recreo"] .kh-rooms--page { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px 20px; } html[data-theme="recreo"] .kh-rooms--page .kh-rooms__head { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; gap: 6px; } html[data-theme="recreo"] .kh-rooms__back { align-self: flex-start; font-size: 14px; font-weight: 700; color: #B8401F; } html[data-theme="recreo"] .kh-rooms--page .kh-rooms__title { gap: 12px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.5px; } html[data-theme="recreo"] .kh-rooms--page .kh-rooms__title::before { width: 12px; height: 12px; background: #2E9E5B; } html[data-theme="recreo"] .kh-rooms--page .kh-rooms__sub { font-size: 16px; color: #5C5246; } html[data-theme="recreo"] .kh-shell .kh-rooms--page > .kh-rooms__create { grid-column: 2; grid-row: 1; background: #F2B632; box-shadow: 3px 3px 0 #1F1A14; font-size: 16px; padding: 13px 24px; } html[data-theme="recreo"] .kh-rooms--page .kh-rooms__list, html[data-theme="recreo"] .kh-rooms--page .kh-rooms__empty { grid-column: 1 / -1; grid-row: 2; } html[data-theme="recreo"] .kh-rooms--page .kh-rooms__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } html[data-theme="recreo"] .kh-rooms--page .kh-room { position: relative; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 4px 4px 0 #1F1A14; } html[data-theme="recreo"] .kh-rooms--page .kh-room__icon { width: 100%; height: 190px; border-radius: 0; border-bottom: 2px solid #1F1A14; } html[data-theme="recreo"] .kh-rooms--page .kh-room__body { padding: 18px 20px 0; display: flex; flex-wrap: wrap; align-items: center; } html[data-theme="recreo"] .kh-rooms--page .kh-room__label { display: none; } html[data-theme="recreo"] .kh-rooms--page .kh-room__game { order: 1; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; } html[data-theme="recreo"] .kh-rooms--page .kh-room__code { order: 2; margin-left: auto; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: #F1E7D6; letter-spacing: 1px; } html[data-theme="recreo"] .kh-rooms--page .kh-room__code::before { content: 'sala '; } html[data-theme="recreo"] .kh-rooms--page .kh-room__who { order: 3; flex-basis: 100%; margin-top: 12px; font-weight: 700; font-size: 16px; } html[data-theme="recreo"] .kh-rooms--page .kh-room__ctx { order: 4; margin-top: 3px; font-size: 13px; font-weight: 700; color: #B8401F; } html[data-theme="recreo"] .kh-rooms--page .kh-room__seats { order: 5; margin-top: 12px; display: flex; gap: 8px; } html[data-theme="recreo"] .kh-room__seat { display: block; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%; border: 2px solid #1F1A14; background: #FFFFFF; } html[data-theme="recreo"] .kh-room__seat[data-taken="true"] { background: var(--g); } html[data-theme="recreo"] .kh-rooms--page .kh-room__slots { order: 6; margin: 12px 0 0 12px; font-size: 14px; font-weight: 700; } html[data-theme="recreo"] .kh-rooms--page .kh-room__state { order: 7; margin: 12px 0 0 auto; font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: #F1E7D6; color: #1F1A14; } html[data-theme="recreo"] .kh-rooms--page .kh-room__state[data-state="live"] { background: #5BD18B; } html[data-theme="recreo"] .kh-shell .kh-rooms--page .kh-room__join { margin: 12px 20px 20px; background: #F2B632; border: 2px solid #1F1A14; box-shadow: none; font-size: 16px; padding: 13px; text-align: center; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page { gap: 22px 20px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__title, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__title { gap: 10px; font-size: 34px; letter-spacing: 0; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__sub, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__sub { font-size: 15px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms__back, html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms__back { min-height: 32px; display: inline-flex; align-items: center; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-rooms__list { gap: 20px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__icon { height: 160px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__body { padding: 16px 18px 0; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__game { font-size: 22px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__who { font-size: 15px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__seats { gap: 7px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__seat { width: 18px; height: 18px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rooms--page .kh-room__slots { margin-left: 11px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-shell .kh-rooms--page .kh-room__join { margin: 12px 18px 18px; padding: 12px; } /* ── Salas tablet V (A-Salas-TabletV): tarjetas horizontales con arte de 190 px a la izquierda ───────────────────── */ html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page { gap: 22px 16px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-rooms__list { display: flex; flex-direction: column; gap: 22px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room { display: grid; grid-template-columns: 190px minmax(0, 1fr); } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__icon { grid-row: 1 / span 2; height: 100%; min-height: 150px; border-bottom: 0; border-right: 2px solid #1F1A14; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__body { padding: 18px 20px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__code { margin-left: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__state { order: 2; margin: 0 0 0 auto; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__who { margin-top: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__seats { margin-top: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rooms--page .kh-room__slots { margin-top: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-shell .kh-rooms--page .kh-room__join { position: absolute; right: 20px; bottom: 18px; margin: 0; padding: 12px 26px; } /* ── Salas móvil V (A-Salas-MovilV): "Volver a Juegos" y "Crear sala" en una fila; tarjetas compactas ───────────── */ html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page { align-items: center; gap: 14px 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__head, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__head { display: contents; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms__back { grid-column: 1; grid-row: 1; min-height: 44px; display: inline-flex; align-items: center; } html[data-theme="recreo"][data-size="movil-v"] .kh-shell .kh-rooms--page > .kh-rooms__create { grid-column: 2; grid-row: 1; font-size: 16px; padding: 11px 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__title { grid-column: 1 / -1; grid-row: 2; gap: 8px; font-size: 25px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__title::before { width: 10px; height: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__sub { grid-column: 1 / -1; grid-row: 3; margin-top: -10px; font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__list, html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__empty { grid-row: 4; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-rooms__list { display: flex; flex-direction: column; gap: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room { display: grid; grid-template-columns: 50px auto auto minmax(0, 1fr) auto; column-gap: 6px; align-items: center; border-radius: 18px; padding: 12px; box-shadow: 3px 3px 0 #1F1A14; overflow: visible; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__icon { grid-column: 1; grid-row: 1 / span 3; width: 50px; height: 50px; border: 0; border-radius: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__body { display: contents; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__label { display: block; grid-column: 2 / -1; grid-row: 1; margin-left: 4px; font-weight: 800; font-size: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__game, html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__code { display: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__who { grid-column: 2 / -1; grid-row: 2; margin: 0 0 0 4px; font-weight: 400; font-size: 13px; color: #5C5246; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__ctx { grid-column: 2 / -1; grid-row: 3; margin: 0 0 0 4px; font-size: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__seats { grid-column: 1 / span 2; grid-row: 4; margin-top: 10px; gap: 6px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__seat { width: 16px; height: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__slots { grid-column: 3; grid-row: 4; margin: 10px 0 0 2px; font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rooms--page .kh-room__state { grid-column: 4; grid-row: 4; justify-self: start; margin: 10px 0 0; font-size: 12px; padding: 5px 8px; border-radius: 9px; } html[data-theme="recreo"][data-size="movil-v"] .kh-shell .kh-rooms--page .kh-room__join { grid-column: 5; grid-row: 4; margin: 10px 0 0; padding: 11px 16px; } /* ── Salas móvil H (A-MovilH): columna lateral y filas con "2 de 4 / entra ya" a la derecha ─────────────────────── */ html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page { align-items: center; gap: 10px 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms__back { display: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__title { grid-column: 1; grid-row: 1; gap: 8px; font-size: 20px; font-weight: 700; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__title::before { width: 9px; height: 9px; } html[data-theme="recreo"][data-size="movil-h"] .kh-shell .kh-rooms--page > .kh-rooms__create { grid-column: 2; grid-row: 1; box-shadow: none; font-size: 13px; padding: 8px 14px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__sub { grid-column: 1 / -1; grid-row: 2; margin-top: -4px; font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__list, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__empty { grid-row: 3; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-rooms__list { display: flex; flex-direction: column; gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; align-items: center; column-gap: 12px; border-radius: 16px; padding: 10px 12px; box-shadow: 3px 3px 0 #1F1A14; overflow: visible; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__icon { grid-column: 1; grid-row: 1 / span 3; width: 46px; height: 46px; border: 0; border-radius: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__body { display: contents; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__label { display: block; grid-column: 2; grid-row: 1; font-weight: 800; font-size: 16px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__game, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__code, html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__seats { display: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__who { grid-column: 2; grid-row: 2; margin: 0; font-weight: 400; font-size: 12px; color: #5C5246; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__ctx { grid-column: 2; grid-row: 3; margin: 0; font-weight: 400; font-size: 12px; color: #5C5246; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__ctx::first-letter { text-transform: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__slots { grid-column: 3; grid-row: 1 / span 2; align-self: start; justify-self: end; margin: 0; font-size: 12px; color: #5C5246; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__state { grid-column: 3; grid-row: 2 / span 2; align-self: start; justify-self: end; margin: 0; padding: 0; background: none; font-size: 12px; color: #5C5246; text-transform: lowercase; } html[data-theme="recreo"][data-size="movil-h"] .kh-rooms--page .kh-room__state[data-state="live"] { background: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-shell .kh-rooms--page .kh-room__join { grid-column: 4; grid-row: 1 / span 3; margin: 0; background: #C2451F; color: #FFFFFF; border: 0; padding: 11px 16px; } /* ── Rankings escritorio (A-Rankings-Desktop): "Tus puestos" a la izquierda (300 px) y hoja blanca con podio ───────── */ html[data-theme="recreo"] .kh-rankings { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; } html[data-theme="recreo"] .kh-rk-games { display: flex; flex-direction: column; gap: 8px; min-width: 0; } html[data-theme="recreo"][data-size="desktop"] .kh-rk-games::before { content: 'Tus puestos'; margin-bottom: 4px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; } html[data-theme="recreo"] .kh-rk-games ul { display: flex; flex-direction: column; gap: 8px; } html[data-theme="recreo"] .kh-rk-game { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 2px solid transparent; background: transparent; color: #1F1A14; font: 700 16px Figtree, system-ui, sans-serif; text-align: left; cursor: pointer; } html[data-theme="recreo"] .kh-rk-game[aria-pressed="true"] { background: #FFFFFF; border-color: #1F1A14; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"] .kh-rk-game__icon { flex: none; display: block; width: 44px; height: 44px; border-radius: 12px; background: var(--g); object-fit: contain; } html[data-theme="recreo"] .kh-rk-game__rank-label { display: none; } html[data-theme="recreo"] .kh-rk-game__rank { margin-left: auto; font-family: 'Bricolage Grotesque', sans-serif; font-size: 16px; font-weight: 800; color: #B8401F; } html[data-theme="recreo"] .kh-rk-main { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 24px; padding: 24px 30px; box-shadow: 5px 5px 0 #1F1A14; display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 18px 14px; min-width: 0; } html[data-theme="recreo"] .kh-rk-main > * { grid-column: 1 / -1; } html[data-theme="recreo"] .kh-rk-head, html[data-theme="recreo"] .kh-rk-filters { display: contents; } html[data-theme="recreo"] .kh-rk-title { grid-column: 1; grid-row: 1; font-family: 'Bricolage Grotesque', sans-serif; font-size: 34px; font-weight: 700; } html[data-theme="recreo"] .kh-rk-subtitle { display: none; } html[data-theme="recreo"] .kh-rk-main .kh-rk-boards { grid-column: 2; grid-row: 1; } html[data-theme="recreo"] .kh-rk-main .kh-rk-periods { grid-column: 3; grid-row: 1; justify-self: end; } html[data-theme="recreo"] .kh-rk-main .kh-seg__btn { padding: 7px 14px; font-size: 14px; } html[data-theme="recreo"] .kh-rk-main .kh-rk-boards .kh-seg__btn { border-radius: 10px; } html[data-theme="recreo"] .kh-rk-main .kh-rk-periods .kh-seg__btn { flex-grow: 0; } /* Podio II · I · III con barras de color y el puntaje dentro */ html[data-theme="recreo"] .kh-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: end; padding: 0 60px; } html[data-theme="recreo"] .kh-podium__item { --p: #F2B632; --ph: 180px; display: grid; justify-items: center; grid-template-rows: auto auto auto auto; min-width: 0; } html[data-theme="recreo"] .kh-podium__item[data-pos="1"] { order: 2; } html[data-theme="recreo"] .kh-podium__item[data-pos="2"] { order: 1; --p: #F4A3A8; --ph: 130px; } html[data-theme="recreo"] .kh-podium__item[data-pos="3"] { order: 3; --p: #9FD8A8; --ph: 100px; } html[data-theme="recreo"] .kh-podium__avatar { grid-row: 1; margin-bottom: 8px; width: 60px; height: 60px; box-sizing: border-box; border-radius: 50%; background: var(--p); border: 2px solid #1F1A14; display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; } html[data-theme="recreo"] .kh-podium__nick { grid-row: 2; margin-bottom: 8px; font-weight: 700; padding: 4px 10px; border-radius: 999px; text-align: center; } html[data-theme="recreo"] .kh-podium__item[data-me="true"] .kh-podium__nick { background: #FDEBD3; } html[data-theme="recreo"] .kh-podium__bar { grid-row: 3 / span 2; grid-column: 1; justify-self: stretch; height: var(--ph); background: var(--p); border: 2px solid #1F1A14; border-radius: 14px 14px 0 0; box-sizing: border-box; } html[data-theme="recreo"] .kh-podium__score { grid-row: 3; grid-column: 1; align-self: end; position: relative; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; } html[data-theme="recreo"] .kh-podium__rank { grid-row: 4; grid-column: 1; align-self: start; position: relative; margin-top: 2px; font-size: 13px; font-weight: 700; } /* Lista desde el 4.º en dos columnas */ html[data-theme="recreo"] .kh-rk-main .kh-rk-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; } html[data-theme="recreo"] .kh-rk-main .kh-rk-row { padding: 10px 14px; background: #FBF4E6; align-items: baseline; } html[data-theme="recreo"] .kh-rk-main .kh-rk-row[data-me="true"] { background: #FDEBD3; } html[data-theme="recreo"] .kh-rk-main .kh-rk-row__rank { width: 28px; flex: none; font-weight: 800; } html[data-theme="recreo"] .kh-rk-around { display: flex; flex-direction: column; gap: 5px; } html[data-theme="recreo"] .kh-rk-around__title { font-size: 12px; font-weight: 700; color: #5C5246; } html[data-theme="recreo"] .kh-rk-main .kh-rk-list--around { grid-template-columns: minmax(0, 1fr); gap: 4px; } html[data-theme="recreo"] .kh-rk-main .kh-rk-list--around .kh-rk-row[data-me="true"] { border: 2px solid #1F1A14; } html[data-theme="recreo"] .kh-rk-empty { padding: 24px 12px; } html[data-theme="recreo"] .kh-rk-empty .kh-empty__title { font-family: Figtree, system-ui, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; color: #5C5246; } /* ── Rankings tablet V (A-Rankings-TabletV): juegos en fila de 5; título y dificultad arriba; periodo a lo ancho ──── */ html[data-theme="recreo"][data-size="tablet-v"] .kh-rankings { grid-template-columns: minmax(0, 1fr); gap: 18px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-games ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-game { flex-direction: column; gap: 6px; padding: 12px 8px; text-align: center; font-size: 14px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-game__icon { width: 48px; height: 48px; border-radius: 13px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-game__rank { margin-left: 0; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main { padding: 22px 26px; gap: 18px 12px; grid-template-columns: auto minmax(0, 1fr); } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-title { font-size: 30px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main .kh-rk-boards { justify-self: end; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main .kh-rk-periods { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main .kh-seg__btn { min-height: 44px; padding: 6px 14px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main .kh-rk-periods .kh-seg__btn { flex-grow: 1; } html[data-theme="recreo"][data-size="tablet-v"] .kh-podium { gap: 16px; padding: 0; } html[data-theme="recreo"][data-size="tablet-v"] .kh-podium__item { --ph: 190px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-podium__item[data-pos="2"] { --ph: 140px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-podium__item[data-pos="3"] { --ph: 110px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main .kh-rk-list { grid-template-columns: minmax(0, 1fr); gap: 6px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-rk-main .kh-rk-row { padding: 12px 14px; } /* ── Rankings tablet H (A-TabletH): columna de juegos de 260 px; título, dificultad y periodo en una fila ────────── */ html[data-theme="recreo"][data-size="tablet-h"] .kh-rankings { grid-template-columns: 260px minmax(0, 1fr); gap: 24px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-game[aria-pressed="true"] { box-shadow: none; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-game__icon { width: 40px; height: 40px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-game__rank { font-family: Figtree, system-ui, sans-serif; font-size: 12px; font-weight: 700; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-main { padding: 22px 26px; gap: 16px 12px; align-items: baseline; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-title { font-size: 30px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-main .kh-seg__btn { padding: 6px 12px; font-size: 13px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium { gap: 14px; padding: 0; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__item { --ph: 170px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__item[data-pos="2"] { --ph: 120px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__item[data-pos="3"] { --ph: 90px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__avatar { width: 56px; height: 56px; border: 0; font-size: 22px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__nick { padding: 2px 10px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__score { grid-row: 3 / span 2; align-self: center; font-size: 28px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-podium__rank { display: none; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-main .kh-rk-row { padding: 9px 12px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-main .kh-rk-row__rank { width: 24px; } /* ── Rankings móvil V (A-Rankings-MovilV): juegos en carrusel; hoja con título + dificultad, periodo y podio ─────── */ html[data-theme="recreo"][data-size="movil-v"] .kh-rankings, html[data-theme="recreo"][data-size="movil-h"] .kh-rankings { grid-template-columns: minmax(0, 1fr); gap: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-games ul { flex-direction: row; gap: 8px; overflow-x: auto; margin: 0 -18px; padding: 2px 18px 6px; scrollbar-width: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-games li, html[data-theme="recreo"][data-size="movil-h"] .kh-rk-games li { flex: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-game { width: auto; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 14px; font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-game[aria-pressed="true"], html[data-theme="recreo"][data-size="movil-h"] .kh-rk-game[aria-pressed="true"] { box-shadow: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-game__icon { width: 36px; height: 36px; border-radius: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-game__rank { margin-left: 0; font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main { grid-template-columns: auto minmax(0, 1fr); gap: 12px 8px; padding: 14px 14px 16px; border-radius: 20px; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-title { font-size: 24px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-boards { justify-self: end; gap: 2px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-boards .kh-seg__btn { min-height: 44px; padding: 4px 8px; font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-periods { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-periods .kh-seg__btn { flex-grow: 1; min-height: 40px; padding: 0 4px; font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium { gap: 8px; padding: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__item { --ph: 128px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__item[data-pos="2"] { --ph: 96px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__item[data-pos="3"] { --ph: 72px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__avatar { width: 42px; height: 42px; margin-bottom: 6px; font-size: 18px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__nick { margin-bottom: 6px; padding: 2px 8px; font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__bar { border-radius: 12px 12px 0 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__score { font-size: 22px; } html[data-theme="recreo"][data-size="movil-v"] .kh-podium__rank { margin-top: 0; font-size: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-list { grid-template-columns: minmax(0, 1fr); gap: 5px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-row { padding: 9px 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main .kh-rk-row__rank { width: 22px; } /* ── Rankings móvil H (A-Rankings-MovilH): carrusel arriba; podio a la izquierda y "Tu puesto" (250 px) a la derecha ── */ html[data-theme="recreo"][data-size="movil-h"] .kh-rankings { gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-games ul { flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-game { width: auto; gap: 6px; padding: 4px 10px 4px 4px; border-radius: 12px; font-size: 13px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-game__icon { width: 34px; height: 34px; border-radius: 9px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-game__rank { margin-left: 0; font-size: 13px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main { grid-template-columns: auto auto minmax(0, 1fr) 250px; gap: 8px 14px; padding: 10px 14px 12px; border-radius: 18px; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-title { font-size: 20px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-boards { gap: 2px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-periods { grid-column: 3 / -1; gap: 2px; padding: 3px; border-radius: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-seg__btn { min-height: 44px; padding: 6px 8px; font-size: 12px; border-radius: 9px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-periods .kh-seg__btn { border-radius: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-podium { grid-column: 1 / 4; grid-row: 2 / span 2; gap: 8px; padding: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__item { --ph: 110px; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__item[data-pos="2"] { --ph: 84px; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__item[data-pos="3"] { --ph: 64px; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__avatar { width: 34px; height: 34px; margin-bottom: 4px; font-size: 15px; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__nick { margin-bottom: 4px; padding: 0; font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__item[data-me="true"] .kh-podium__nick { background: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__bar { border-radius: 10px 10px 0 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__score { font-size: 18px; } html[data-theme="recreo"][data-size="movil-h"] .kh-podium__rank { margin-top: 0; font-size: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-list { grid-column: 4; grid-row: 2; align-self: start; grid-template-columns: minmax(0, 1fr); gap: 4px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main > .kh-rk-list .kh-rk-row:nth-child(n+4) { display: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-around { grid-column: 4; grid-row: 3; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-row { gap: 10px; padding: 8px 10px; border-radius: 11px; font-size: 14px; } html[data-theme="recreo"][data-size="movil-h"] .kh-rk-main .kh-rk-row__rank { width: 18px; } /* ── Mis jugadas escritorio (A-MisJugadas-Desktop): banda naranja "Tu temporada" con 5 cifras y tarjetas en 3 columnas ── */ html[data-theme="recreo"] .kh-mis { display: flex; flex-direction: column; gap: 24px; } html[data-theme="recreo"] .kh-season { background: #C2451F; color: #FFFFFF; border-radius: 26px; padding: 24px 30px; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(5, minmax(0, 1fr)); gap: 16px; align-items: center; } html[data-theme="recreo"] .kh-season__title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 32px; font-weight: 800; } html[data-theme="recreo"] .kh-season__sub, html[data-theme="recreo"] .kh-season__note, html[data-theme="recreo"] .kh-season__hitos > .kh-bar__fill { display: none; } html[data-theme="recreo"] .kh-stats { display: contents; } html[data-theme="recreo"] .kh-season__hitos, html[data-theme="recreo"] .kh-stat { display: flex; flex-direction: column; min-width: 0; margin: 0; } html[data-theme="recreo"] .kh-season .kh-stat__value { order: 1; margin: 0; font-family: 'Bricolage Grotesque', sans-serif; font-size: 40px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; } html[data-theme="recreo"] .kh-season .kh-stat__label { order: 2; font-size: 13px; text-transform: lowercase; } html[data-theme="recreo"] .kh-stat[data-stat="played"] { order: 1; } html[data-theme="recreo"] .kh-season__hitos { order: 2; } html[data-theme="recreo"] .kh-stat[data-stat="best"] { order: 3; } html[data-theme="recreo"] .kh-stat[data-stat="compas"] { order: 4; } html[data-theme="recreo"] .kh-stat[data-stat="week"] { order: 5; } /* Tarjeta de juego */ html[data-theme="recreo"] .kh-mis-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; } html[data-theme="recreo"] .kh-mis-card > article { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; padding: 18px 20px; box-shadow: 4px 4px 0 #1F1A14; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; } html[data-theme="recreo"] .kh-mis-card__icon { grid-column: 1; grid-row: 1 / span 2; display: block; width: 56px; height: 56px; border-radius: 16px; background: var(--g); object-fit: contain; } html[data-theme="recreo"] .kh-mis-card__name { grid-column: 2; grid-row: 1 / span 2; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; } html[data-theme="recreo"] .kh-mis-card__rank { grid-column: 3; grid-row: 1; justify-self: end; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 30px; line-height: 1.2; } html[data-theme="recreo"] .kh-mis-card__best { grid-column: 3; grid-row: 2; justify-self: end; font-size: 12px; color: #5C5246; text-transform: lowercase; } html[data-theme="recreo"] .kh-mis-card__meta { grid-column: 1 / -1; grid-row: 3; margin-top: 12px; font-size: 13px; color: #5C5246; } html[data-theme="recreo"] .kh-mis-card__hitos { grid-column: 1 / -1; grid-row: 4; margin-top: 12px; display: flex; flex-direction: column; gap: 6px; } html[data-theme="recreo"] .kh-mis-card__hitos-label { font-size: 13px; font-weight: 600; } html[data-theme="recreo"] .kh-mis-card .kh-bar { height: 10px; background: #F1E7D6; border-radius: 999px; overflow: hidden; } html[data-theme="recreo"] .kh-mis-card .kh-bar__fill { display: block; height: 100%; width: var(--kh-pct, 0%); background: var(--g); border-radius: 999px; } html[data-theme="recreo"] .kh-mis-card .kh-chips { grid-column: 1 / -1; grid-row: 5; margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; } html[data-theme="recreo"] .kh-mis-card .kh-chip { min-height: 0; padding: 6px 10px; border-radius: 10px; font: 600 12px Figtree, system-ui, sans-serif; cursor: default; background: #F1E7D6; color: #5C5246; border: 1px dashed #F1E7D6; } html[data-theme="recreo"] .kh-mis-card .kh-chip[data-state="won"] { background: #1F1A14; color: #FBF4E6; border-color: #1F1A14; } html[data-theme="recreo"] .kh-mis-card .kh-chip[data-state="secret"] { background: #FFFFFF; color: #5C5246; border-color: #5C5246; } html[data-theme="recreo"] .kh-mis-card__next { grid-column: 1 / -1; grid-row: 6; align-self: start; margin-top: 12px; padding-top: 10px; border-top: 1px solid #F1E7D6; font-size: 13px; font-weight: 700; color: #B8401F; } html[data-theme="recreo"] .kh-shell .kh-mis-card__continue { grid-column: 3; grid-row: 6; justify-self: end; align-self: start; margin-top: 22px; padding: 11px 18px; font-size: 16px; } /* ── Mis jugadas tablet H (A-MisJugadas-TabletH) ──────────────────────────────────────────────────────────────────── */ html[data-theme="recreo"][data-size="tablet-h"] .kh-mis { gap: 22px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-season { grid-template-columns: minmax(0, 1.5fr) repeat(5, minmax(0, 1fr)); gap: 14px; padding: 20px 26px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-season__title { font-size: 28px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-season .kh-stat__value { font-size: 36px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-mis-list { gap: 20px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-mis-card > article { padding: 16px 18px; grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 12px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-mis-card__icon { width: 52px; height: 52px; border-radius: 15px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-mis-card__name { font-size: 21px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-mis-card__rank { font-size: 28px; } /* ── Mis jugadas tablet V (A-TabletV): cifras en 5 columnas bajo el título; tarjetas a lo ancho con la meta bajo el nombre ── */ html[data-theme="recreo"][data-size="tablet-v"] .kh-mis { gap: 18px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-season { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding: 24px 26px; align-items: start; } html[data-theme="recreo"][data-size="tablet-v"] .kh-season__title { grid-column: span 5; font-size: 28px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-mis-list { display: flex; flex-direction: column; gap: 18px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-mis-card__name { grid-row: 1; align-self: end; } html[data-theme="recreo"][data-size="tablet-v"] .kh-mis-card__meta { grid-column: 2; grid-row: 2; align-self: start; margin-top: 0; } html[data-theme="recreo"][data-size="tablet-v"] .kh-shell .kh-mis-card__continue { margin-top: 22px; } /* ── Mis jugadas móvil V (A-MisJugadas-MovilV): cifras en 3 columnas; tarjetas apiladas; "Continuar" a lo ancho ──── */ html[data-theme="recreo"][data-size="movil-v"] .kh-mis { gap: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-season { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 16px 18px; border-radius: 22px; align-items: start; } html[data-theme="recreo"][data-size="movil-v"] .kh-season__title { grid-column: span 3; font-size: 22px; } html[data-theme="recreo"][data-size="movil-v"] .kh-season .kh-stat__value { font-size: 30px; } html[data-theme="recreo"][data-size="movil-v"] .kh-season .kh-stat__label { font-size: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-list { display: flex; flex-direction: column; gap: 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card > article { padding: 14px; border-radius: 20px; box-shadow: 3px 3px 0 #1F1A14; grid-template-columns: 46px minmax(0, 1fr) auto; column-gap: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card__icon { width: 46px; height: 46px; border-radius: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card__name { font-size: 19px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card__rank { font-size: 24px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card__meta, html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card__hitos, html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card .kh-chips, html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card__next { margin-top: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-mis-card .kh-chip { padding: 6px 9px; } html[data-theme="recreo"][data-size="movil-v"] .kh-shell .kh-mis-card__continue { grid-column: 1 / -1; grid-row: 7; justify-self: stretch; margin-top: 8px; padding: 12px; text-align: center; } /* ── Mis jugadas móvil H (A-MisJugadas-MovilH): banda en una fila y tarjetas de 3 columnas (150 · meta · 150) ────── */ html[data-theme="recreo"][data-size="movil-h"] .kh-mis { gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-season { grid-template-columns: minmax(0, 1.4fr) repeat(5, minmax(0, 1fr)); gap: 10px; padding: 12px 16px; border-radius: 18px; } html[data-theme="recreo"][data-size="movil-h"] .kh-season__title { font-size: 18px; } html[data-theme="recreo"][data-size="movil-h"] .kh-season .kh-stat__value { font-size: 24px; } html[data-theme="recreo"][data-size="movil-h"] .kh-season .kh-stat__label { font-size: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-list { display: flex; flex-direction: column; gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card > article { padding: 10px 12px; border-radius: 16px; box-shadow: 3px 3px 0 #1F1A14; grid-template-columns: 40px 102px minmax(0, 1fr) 150px; column-gap: 8px; row-gap: 6px; align-items: start; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__icon { grid-row: 1; width: 40px; height: 40px; border-radius: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__name { grid-row: 1; align-self: center; font-size: 15px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__rank { grid-column: 1; grid-row: 2; justify-self: start; font-size: 22px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__best { grid-column: 2; grid-row: 2; justify-self: start; align-self: center; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__meta { grid-column: 3; grid-row: 1; margin: 0 0 0 4px; font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__hitos { grid-column: 3; grid-row: 2; margin: 0 0 0 4px; flex-direction: row; align-items: center; gap: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__hitos-label { font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card .kh-bar { flex-grow: 1; height: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card .kh-chips { grid-column: 3; grid-row: 3; margin: 0 0 0 4px; gap: 4px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card .kh-chip { padding: 4px 7px; border-radius: 8px; font-size: 11px; } html[data-theme="recreo"][data-size="movil-h"] .kh-mis-card__next { grid-column: 4; grid-row: 1; align-self: center; margin: 0 0 0 4px; padding: 0; border: 0; font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-shell .kh-mis-card__continue { grid-column: 4; grid-row: 2 / span 2; justify-self: stretch; margin: 0 0 0 4px; padding: 10px 8px; font-size: 13px; box-shadow: none; text-align: center; } /* ── Sin partidas (A-Estado-SinPartidas-MovilV): tarjeta blanca con los íconos de 3 juegos ───────────────────────── */ html[data-theme="recreo"] .kh-mis-empty { align-items: flex-start; text-align: left; gap: 12px; padding: 22px 20px; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; box-shadow: 4px 4px 0 #1F1A14; } html[data-theme="recreo"] .kh-mis-empty::before { content: ''; width: 184px; height: 56px; background: url(/themes/recreo/juegos/pasapaloma.webp) 0 0 / 56px 56px no-repeat, url(/themes/recreo/juegos/donkydoz.webp) 64px 0 / 56px 56px no-repeat, url(/themes/recreo/juegos/pingpongale.webp) 128px 0 / 56px 56px no-repeat, linear-gradient(#F2B632, #F2B632) 0 0 / 56px 56px no-repeat, linear-gradient(#7FB7F0, #7FB7F0) 64px 0 / 56px 56px no-repeat, linear-gradient(#F4A3A8, #F4A3A8) 128px 0 / 56px 56px no-repeat; } html[data-theme="recreo"] .kh-mis-empty .kh-empty__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; line-height: 1.15; letter-spacing: 0; color: #1F1A14; } html[data-theme="recreo"] .kh-mis-empty .kh-empty__text { font-size: 15px; line-height: 1.45; color: #5C5246; } /* ── Mi cuenta (A-Cuenta-Desktop, -TabletH, -TabletV: hoja lateral crema sobre velo; -MovilV, -MovilH: pantalla) ──── */ html[data-theme="recreo"][data-size="desktop"] .kh-account-veil, html[data-theme="recreo"][data-size="tablet-h"] .kh-account-veil, html[data-theme="recreo"][data-size="tablet-v"] .kh-account-veil { background: rgba(31, 26, 20, 0.55); } html[data-theme="recreo"] .kh-account-veil { background-color: #FBF4E6; } html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet, html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet, html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 480px; max-width: 100%; min-height: 0; max-height: none; overflow: auto; background: #FBF4E6; border: 0; border-left: 2px solid #1F1A14; border-radius: 0; box-shadow: none; padding: 26px 28px; gap: 16px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet { width: 640px; padding: 22px 30px; gap: 14px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet { width: 500px; padding: 30px; gap: 20px; } html[data-theme="recreo"] .kh-account-sheet { color: #1F1A14; font-family: Figtree, system-ui, sans-serif; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet { padding: 16px 18px 24px; gap: 14px; } html[data-theme="recreo"][data-size="movil-v"]:not([data-kh]) .kh-account-veil { bottom: calc(72px + env(safe-area-inset-bottom)); } /* Encabezado: "Mi cuenta" a la izquierda y "Volver" a la derecha */ html[data-theme="recreo"] .kh-account-sheet .kh-page-head, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-page-head, html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet .kh-page-head { flex-direction: row; justify-content: flex-start; gap: 10px; } html[data-theme="recreo"] .kh-account-sheet .kh-back, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-back, html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet .kh-back { order: 2; margin-left: auto; width: auto; height: auto; min-height: 44px; border: 0; border-radius: 0; background: none; display: inline-flex; align-items: center; font-size: 0; color: #B8401F; } html[data-theme="recreo"] .kh-account-sheet .kh-back::after, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-back::after, html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet .kh-back::after { content: 'Volver'; font-size: 16px; font-weight: 700; line-height: 1.2; } html[data-theme="recreo"] .kh-account-sheet .kh-page-head__title, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-page-head__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 28px; letter-spacing: 0; color: #1F1A14; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet .kh-page-head__title { font-size: 30px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-page-head__title { font-size: 26px; } /* Perfil */ html[data-theme="recreo"] .kh-acc-profile, html[data-theme="recreo"][data-size="desktop"] .kh-acc-profile, html[data-theme="recreo"][data-size="tablet-h"] .kh-acc-profile { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 20px; padding: 16px 18px; box-shadow: 4px 4px 0 #1F1A14; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 14px; row-gap: 10px; align-items: end; } html[data-theme="recreo"] .kh-acc-avatar-row, html[data-theme="recreo"] .kh-acc-avatar-side, html[data-theme="recreo"] .kh-acc-field { display: contents; } html[data-theme="recreo"] .kh-acc-avatar, html[data-theme="recreo"][data-size="desktop"] .kh-acc-avatar { grid-column: 1; grid-row: 1; justify-self: center; width: 60px; height: 60px; box-sizing: border-box; border: 2px solid #1F1A14; background: #F2B632; } html[data-theme="recreo"][data-size="tablet-v"] .kh-acc-avatar { width: 64px; height: 64px; } html[data-theme="recreo"] .kh-account-sheet .kh-acc-generate { grid-column: 1; grid-row: 2 / span 2; align-self: start; justify-self: center; margin-top: -6px; min-height: 32px; padding: 0; border: 0; background: transparent; color: #B8401F; font: 700 13px Figtree, system-ui, sans-serif; letter-spacing: 0; box-shadow: none; } html[data-theme="recreo"] .kh-acc-avatar-note { grid-column: 1 / -1; grid-row: 6; font: 400 12px Figtree, system-ui, sans-serif; color: #5C5246; } html[data-theme="recreo"] .kh-acc-field > .kh-label { grid-column: 2; grid-row: 1; align-self: start; font: 700 13px Figtree, system-ui, sans-serif; letter-spacing: 0; color: #5C5246; } html[data-theme="recreo"] .kh-acc-field__row { grid-column: 2; grid-row: 1; align-self: end; display: flex; gap: 8px; } html[data-theme="recreo"] .kh-account-sheet .kh-input { height: auto; min-height: 44px; box-sizing: border-box; border: 2px solid #1F1A14; border-radius: 12px; padding: 8px 12px; font: 600 16px Figtree, system-ui, sans-serif; color: #1F1A14; background: #FFFFFF; } html[data-theme="recreo"] .kh-account-sheet .kh-acc-field__row .kh-btn { min-height: 44px; border: 2px solid #1F1A14; background: #F2B632; color: #1F1A14; border-radius: 12px; padding: 8px 18px; font: 700 15px Figtree, system-ui, sans-serif; letter-spacing: 0; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"] .kh-acc-real { grid-column: 1 / -1; grid-row: 4; font-size: 13px; font-weight: 700; color: #1F1A14; } html[data-theme="recreo"] .kh-acc-real::after { content: ' De 2 a 16 caracteres.'; font-weight: 400; color: #5C5246; } html[data-theme="recreo"] .kh-acc-status { grid-column: 1 / -1; grid-row: 5; min-height: 0; font-size: 13px; color: #5C5246; } html[data-theme="recreo"] .kh-acc-status:empty { display: none; } /* La fila del apodo mide 20 px de rótulo + 44 de campo: el avatar queda alineado abajo como en el marco */ html[data-theme="recreo"] .kh-acc-field__row { margin-top: 26px; } /* Mis compas · Cómo les dices a tus amigos */ html[data-theme="recreo"] .kh-acc-links { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 20px; padding: 2px 18px; display: flex; flex-direction: column; } html[data-theme="recreo"] .kh-acc-links__row { min-height: 44px; gap: 8px; border: 0; color: #1F1A14; font: 700 16px Figtree, system-ui, sans-serif; } html[data-theme="recreo"] .kh-acc-links__row + .kh-acc-links__row { border-top: 1px solid #F1E7D6; font-weight: 600; } html[data-theme="recreo"] .kh-acc-links__value { font: 700 16px Figtree, system-ui, sans-serif; color: #B8401F; } html[data-theme="recreo"] .kh-acc-word { border-bottom: 0; border-top: 1px solid #F1E7D6; } html[data-theme="recreo"] .kh-acc-word__err { color: #FFFFFF; } /* Tu theme */ html[data-theme="recreo"] .kh-acc-themes { gap: 8px; } html[data-theme="recreo"] .kh-acc-themes__head { flex-direction: column; align-items: flex-start; gap: 8px; } html[data-theme="recreo"] .kh-account-sheet .kh-acc-themes .kh-acc-h2 { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 20px; letter-spacing: 0; color: #1F1A14; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet .kh-acc-themes .kh-acc-h2 { font-size: 22px; } html[data-theme="recreo"] .kh-acc-themes__note { font: 400 13px Figtree, system-ui, sans-serif; color: #5C5246; } html[data-theme="recreo"] .kh-account-sheet .kh-themes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet .kh-themes { gap: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet .kh-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-themes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-themes[data-variant="account"] .kh-theme-card { border: 2px solid #D9CFBF; background: #FFFFFF; border-radius: 14px; padding: 5px; color: #1F1A14; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 4px 3px; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card[aria-pressed="true"] { border: 2px solid #1F1A14; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__thumb, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-themes[data-variant="account"] .kh-theme-card__thumb { flex-basis: 100%; width: auto; height: 58px; border-radius: 10px; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__logo { display: block; left: 7px; top: 8px; width: 26px; height: 26px; border-radius: 7px; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__ink { display: block; left: 7px; top: 40px; width: 52px; height: 6px; border-radius: 3px; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__ink--short, html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__art { display: none; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__name, html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__name[data-font] { padding-left: 2px; font: 700 13px Figtree, system-ui, sans-serif; letter-spacing: 0; text-transform: lowercase; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__name::first-letter { text-transform: uppercase; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__state { font-size: 11px; color: #5C5246; text-transform: lowercase; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card[aria-pressed="true"] .kh-theme-card__state { padding: 2px 6px; border-radius: 7px; background: #F2B632; color: #1F1A14; font-weight: 700; text-transform: none; } html[data-theme="recreo"] .kh-account-sheet .kh-theme-card__state:empty { display: none; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet .kh-theme-card__thumb { height: 64px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet .kh-theme-card__logo { top: 13px; width: 38px; height: 38px; border-radius: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-account-sheet .kh-theme-card__ink { left: 54px; top: 29px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-account-sheet .kh-theme-card__thumb { height: 64px; } /* Sonido */ html[data-theme="recreo"] .kh-acc-sound { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 20px; padding: 12px 18px; display: flex; flex-direction: column; gap: 2px; } html[data-theme="recreo"] .kh-account-sheet .kh-acc-sound .kh-acc-h2 { margin: 0 0 4px; font: 700 13px Figtree, system-ui, sans-serif; letter-spacing: 0; color: #5C5246; } html[data-theme="recreo"] .kh-acc-sound__row { display: flex; align-items: center; gap: 12px; font: 600 16px Figtree, system-ui, sans-serif; } html[data-theme="recreo"] .kh-acc-sound__label { width: 72px; flex: none; } html[data-theme="recreo"] .kh-account-sheet .kh-range { flex-grow: 1; min-width: 0; min-height: 44px; accent-color: #E4572E; } html[data-theme="recreo"] .kh-acc-sound__mute { gap: 10px; font: 600 16px Figtree, system-ui, sans-serif; } html[data-theme="recreo"] .kh-account-sheet .kh-check { accent-color: #1F1A14; } /* Cerrar sesión (solo fuera de KitchHero) */ html[data-theme="recreo"] .kh-account-sheet .kh-acc-signout, html[data-theme="recreo"][data-size="desktop"] .kh-account-sheet .kh-acc-signout { margin-top: auto; min-height: 44px; padding: 0; border: 2px solid #1F1A14; background: transparent; color: #1F1A14; border-radius: 12px; font: 700 15px Figtree, system-ui, sans-serif; letter-spacing: 0; box-shadow: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-acc-signout { margin-top: 0; min-height: 48px; } html[data-theme="recreo"] .kh-acc-kh { font-size: 13px; color: #5C5246; } /* Tablet H: "Mis compas" y la palabra lado a lado */ html[data-theme="recreo"][data-size="tablet-h"] .kh-acc-profile { padding: 14px 20px; row-gap: 8px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-acc-links { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); column-gap: 18px; padding: 2px 20px; } html[data-theme="recreo"][data-size="tablet-h"] .kh-acc-links__row + .kh-acc-links__row { border-top: 0; } html[data-theme="recreo"][data-size="tablet-h"] .kh-acc-word-slot { grid-column: 1 / -1; } html[data-theme="recreo"][data-size="tablet-v"] .kh-acc-profile { padding: 18px 20px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-acc-links { padding: 2px 20px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-acc-sound { padding: 14px 20px; gap: 4px; } /* Móvil V (A-Cuenta-MovilV): avatar con "Generar otro" enmarcado al lado, apodo debajo; menú al pie visible */ html[data-theme="recreo"][data-size="movil-v"] .kh-acc-profile, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-profile { display: flex; flex-direction: column; gap: 8px; border-radius: 18px; padding: 14px; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-avatar-row, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-avatar-row { display: flex; align-items: center; gap: 12px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-avatar-side, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-avatar-side { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-field, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-field { display: flex; flex-direction: column; gap: 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-avatar { width: 56px; height: 56px; flex: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-acc-generate, html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-acc-generate { margin: 0; min-height: 44px; padding: 0 14px; border: 2px solid #1F1A14; border-radius: 12px; background: #FFFFFF; color: #1F1A14; font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-field__row, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-field__row { margin-top: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-acc-field__row .kh-btn { padding: 8px 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-links, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-links { border-radius: 18px; padding: 2px 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-links__row { min-height: 46px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-links__row + .kh-acc-links__row { font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-theme-card { border-radius: 16px; gap: 5px 4px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-theme-card__thumb { height: 60px; border-radius: 11px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-theme-card__logo { top: 15px; left: 8px; width: 30px; height: 30px; border-radius: 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-theme-card__ink, html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-theme-card__ink { left: 44px; top: 27px; width: 60px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-theme-card__name { font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-account-sheet .kh-theme-card[aria-pressed="true"] .kh-theme-card__state { margin-left: auto; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-sound, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-sound { border-radius: 18px; padding: 10px 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-sound__row { gap: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-acc-sound__label { width: 60px; } /* Móvil H (A-Cuenta-MovilH): logo + "Mi cuenta"; perfil y sonido a la izquierda, theme y compas a la derecha */ html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-content: start; gap: 10px 16px; padding: 14px 20px 16px; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet > .kh-page-head { grid-column: 1 / -1; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-page-head__title { display: flex; align-items: center; gap: 10px; font-size: 22px; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-page-head__title::before { content: ''; flex: none; width: 36px; height: 36px; border-radius: 10px; background: url(/themes/recreo/logo.webp) center / cover no-repeat; } html[data-theme="recreo"][data-size="movil-h"] .kh-acc-profile { grid-column: 1; grid-row: 2; padding: 10px 14px; gap: 6px; } html[data-theme="recreo"][data-size="movil-h"] .kh-acc-avatar { width: 48px; height: 48px; flex: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-acc-sound { grid-column: 1; grid-row: 3; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-acc-sound .kh-acc-h2 { margin: 0; font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-acc-themes { grid-column: 2; grid-row: 2 / span 2; gap: 6px; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-acc-themes .kh-acc-h2 { font-size: 18px; } html[data-theme="recreo"][data-size="movil-h"] .kh-acc-themes__note { display: none; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-theme-card__thumb { height: 52px; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-theme-card__logo { top: 12px; left: 8px; width: 28px; height: 28px; border-radius: 8px; } html[data-theme="recreo"][data-size="movil-h"] .kh-acc-links { grid-column: 2; grid-row: 4; padding: 0 14px; } html[data-theme="recreo"][data-size="movil-h"] .kh-account-sheet .kh-acc-signout, html[data-theme="recreo"][data-size="movil-h"] .kh-acc-kh { grid-column: 1; grid-row: 4; align-self: start; margin-top: 0; } /* ── Mis compas (A-MisCompas-Desktop, A-MisCompas-MovilV) ─────────────────────────────────────────────────────────── */ html[data-theme="recreo"] .kh-compas { gap: 16px; } html[data-theme="recreo"][data-size="desktop"] .kh-compas { width: 880px; } html[data-theme="recreo"] .kh-compas .kh-page-head { flex-direction: column; align-items: flex-start; gap: 16px; } html[data-theme="recreo"] .kh-compas .kh-page-head .kh-account, html[data-theme="recreo"] .kh-compas .kh-page-head__count { display: none; } html[data-theme="recreo"] .kh-compas .kh-back { width: auto; height: auto; border: 0; border-radius: 0; background: none; display: inline-flex; align-items: center; font-size: 0; color: #B8401F; } html[data-theme="recreo"] .kh-compas .kh-back::after { content: 'Volver a Mi cuenta'; font-size: 14px; font-weight: 700; } html[data-theme="recreo"] .kh-compas .kh-page-head__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 40px; letter-spacing: -0.5px; color: #1F1A14; } html[data-theme="recreo"] .kh-compas__intro { margin-top: -10px; font: 400 16px Figtree, system-ui, sans-serif; color: #5C5246; } html[data-theme="recreo"] .kh-compas__tag { font: 700 12px Figtree, system-ui, sans-serif; letter-spacing: 0; color: #5C5246; } html[data-theme="recreo"] .kh-compas__list { gap: 16px; } html[data-theme="recreo"] .kh-compa { background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; padding: 18px 22px; box-shadow: 4px 4px 0 #1F1A14; display: grid; grid-template-columns: 60px minmax(0, 1fr) auto auto; column-gap: 18px; row-gap: 3px; align-items: center; } html[data-theme="recreo"] .kh-compa[data-paused="true"] { background: #F1E7D6; border-color: #1F1A14; box-shadow: none; } html[data-theme="recreo"] .kh-compa__row, html[data-theme="recreo"] .kh-compa > .kh-compa__actions { display: contents; } html[data-theme="recreo"] .kh-compa[data-paused="true"] .kh-compa__row { opacity: 1; } html[data-theme="recreo"] .kh-compas__list > li:nth-child(3n+1) .kh-compa__ini { background: #7FB7F0; } html[data-theme="recreo"] .kh-compas__list > li:nth-child(3n+2) .kh-compa__ini { background: #F4A3A8; } html[data-theme="recreo"] .kh-compas__list > li:nth-child(3n) .kh-compa__ini { background: #9FD8A8; } html[data-theme="recreo"] .kh-compa__ini { grid-column: 1; grid-row: 1 / span 2; width: 60px; height: 60px; box-sizing: border-box; border: 2px solid #1F1A14; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; color: #1F1A14; } html[data-theme="recreo"] .kh-compa__text { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 3px; } html[data-theme="recreo"] .kh-compa:not([data-paused="true"]) .kh-compa__text { grid-row: 1 / span 2; } html[data-theme="recreo"] .kh-compa__nick { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 22px; line-height: 1.2; } html[data-theme="recreo"] .kh-compa__meta { font-size: 14px; color: #5C5246; } html[data-theme="recreo"] .kh-compa__paused { grid-column: 2; grid-row: 2; align-self: start; font: 700 14px Figtree, system-ui, sans-serif; color: #1F1A14; } html[data-theme="recreo"] .kh-compa > .kh-compa__actions .kh-btn { grid-row: 1 / span 2; } html[data-theme="recreo"] .kh-compa .kh-btn { min-height: 44px; border: 2px solid #1F1A14; background: #FFFFFF; color: #1F1A14; border-radius: 12px; padding: 8px 18px; font: 700 15px Figtree, system-ui, sans-serif; letter-spacing: 0; box-shadow: none; } html[data-theme="recreo"] .kh-compa .kh-btn--primary { background: #F2B632; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"] .kh-compa .kh-btn--ghost, html[data-theme="recreo"] .kh-compa__actions .kh-btn--ghost { border: 0; background: transparent; color: #B8401F; padding: 8px 12px; } html[data-theme="recreo"] .kh-compa__err { grid-column: 1 / -1; } /* Confirmar eliminar: hoja blanca centrada sobre velo */ html[data-theme="recreo"] .kh-compa__confirm { position: fixed; z-index: 40; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 440px; max-width: calc(100vw - 32px); box-sizing: border-box; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; padding: 24px 26px; gap: 12px; box-shadow: 5px 5px 0 #1F1A14, 0 0 0 100vmax rgba(31, 26, 20, 0.55); } html[data-theme="recreo"] .kh-compa__question { display: flex; flex-direction: column; gap: 12px; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; } html[data-theme="recreo"] .kh-compa__note { font: 400 15px/1.45 Figtree, system-ui, sans-serif; font-style: normal; color: #5C5246; } html[data-theme="recreo"] .kh-compa__confirm .kh-compa__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; } html[data-theme="recreo"] .kh-compa__confirm .kh-btn { padding: 8px 20px; } html[data-theme="recreo"] .kh-compa__confirm [data-action="remove"] { background: #C2451F; color: #FFFFFF; border: 2px solid #1F1A14; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-v"] .kh-compas { gap: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compas .kh-page-head { gap: 6px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compas .kh-back { min-height: 44px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compas .kh-page-head__title { font-size: 28px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-compas__intro { margin-top: -10px; font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compas__list { gap: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa { grid-template-columns: 48px minmax(0, 1fr) auto; column-gap: 12px; border-radius: 18px; padding: 12px 14px; box-shadow: 3px 3px 0 #1F1A14; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa[data-paused="true"] { box-shadow: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa__ini { width: 48px; height: 48px; font-size: 20px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa__nick { font-size: 18px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa__meta, html[data-theme="recreo"][data-size="movil-v"] .kh-compa__paused { font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa > .kh-compa__actions .kh-btn { grid-row: 3; margin-top: 7px; font-size: 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa > .kh-compa__actions .kh-btn:first-child { grid-column: 1 / span 2; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa > .kh-compa__actions .kh-btn--ghost { grid-column: 3; padding: 0 14px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa__confirm { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; max-width: none; border: 0; border-top: 2px solid #1F1A14; border-radius: 22px 22px 0 0; padding: 22px 20px 28px; gap: 10px; box-shadow: 0 0 0 100vmax rgba(31, 26, 20, 0.55); } html[data-theme="recreo"][data-size="movil-v"] .kh-compa__question { font-size: 22px; } html[data-theme="recreo"][data-size="movil-v"] .kh-compa__confirm .kh-compa__actions .kh-btn { flex-grow: 1; } /* ── Cargando (A-Estado-Cargando-MovilV): el texto y la primera fila en la banda oscura, luego destacado y juegos ─── */ html[data-theme="recreo"] .kh-state--loading { gap: 0; } html[data-theme="recreo"] .kh-state--loading .kh-state__text { display: flex; align-items: center; gap: 8px; margin: 0; padding: 14px 16px 12px; border-radius: 20px 20px 0 0; background: #1F1A14; text-align: left; font: 700 15px Figtree, system-ui, sans-serif; font-style: normal; color: #CFC6B8; } html[data-theme="recreo"] .kh-state--loading .kh-state__text::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #5C5246; } html[data-theme="recreo"] .kh-skel-group { gap: 16px; } html[data-theme="recreo"] .kh-skel-group:has(.kh-skel--card) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; } html[data-theme="recreo"] .kh-skel { border: 2px solid #1F1A14; border-radius: 20px; background: #FFFFFF; box-shadow: 3px 3px 0 #1F1A14; padding: 14px; gap: 12px; } html[data-theme="recreo"] .kh-skel__dot { border: 0; border-radius: 16px; background: #F1E7D6; } html[data-theme="recreo"] .kh-skel__line { height: 14px; border-radius: 7px; background: #F1E7D6; } html[data-theme="recreo"] .kh-skel__line--short { height: 10px; border-radius: 5px; background: #FDEBD3; opacity: 1; } html[data-theme="recreo"] .kh-skel--row { grid-column: 1 / -1; border: 0; border-radius: 0 0 20px 20px; box-shadow: none; background: #1F1A14; padding: 0 16px 14px; gap: 10px; } html[data-theme="recreo"] .kh-skel--row .kh-skel__dot { width: 44px; height: 44px; border-radius: 12px; background: #3A3128; } html[data-theme="recreo"] .kh-skel--row .kh-skel__line { background: #3A3128; } html[data-theme="recreo"] .kh-skel--row .kh-skel__line--short { background: #2C251D; } html[data-theme="recreo"] .kh-skel--hero { grid-column: 1 / -1; } html[data-theme="recreo"] .kh-skel--hero .kh-skel__dot { width: 84px; height: 84px; } html[data-theme="recreo"] .kh-skel--card { padding: 0 0 12px; overflow: hidden; border-radius: 18px; align-items: stretch; gap: 6px; } html[data-theme="recreo"] .kh-skel--card .kh-skel__dot { width: 100%; height: 92px; border-radius: 0; } html[data-theme="recreo"] .kh-skel--card .kh-skel__line { width: 70%; height: 12px; margin: 4px 11px 0; } html[data-theme="recreo"] .kh-skel--card .kh-skel__line--short { width: 50%; height: 10px; margin: 0 11px; } html[data-theme="recreo"] .kh-skel--line { box-shadow: none; padding: 10px 12px; } /* ── Error (A-Estado-Error-MovilV): tarjeta con "!" en rosado, título, texto y "Reintentar" ─────────────────────── */ html[data-theme="recreo"] .kh-state--error { margin-top: 40px; align-items: stretch; text-align: left; gap: 12px; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; padding: 24px 20px 22px; box-shadow: 4px 4px 0 #1F1A14; } html[data-theme="recreo"] .kh-state__logo { display: none; } html[data-theme="recreo"] .kh-state__art::before { content: '!'; width: 64px; height: 64px; box-sizing: border-box; border-radius: 18px; background: #F4A3A8; border: 2px solid #1F1A14; display: grid; place-items: center; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 34px; color: #1F1A14; } html[data-theme="recreo"] .kh-state__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: 0; color: #1F1A14; } html[data-theme="recreo"] .kh-state__body, html[data-theme="recreo"] .kh-state__hint { font: 400 15px/1.45 Figtree, system-ui, sans-serif; font-style: normal; color: #5C5246; } html[data-theme="recreo"] .kh-shell .kh-state__retry { margin-top: 0; min-height: 48px; padding: 0 20px; font-size: 16px; } /* ── Sin ícono del theme (A-Estado-SinIcono-MovilV): la franja de color queda aunque falte la imagen ────────────── */ html[data-theme="recreo"] .kh-game__icon:not([src]), html[data-theme="recreo"] .kh-game__icon[src=""] { font-size: 0; color: transparent; } html[data-theme="recreo"] .kh-game__link:has(.kh-game__icon:not([src]))::before, html[data-theme="recreo"] .kh-game__link:not(:has(.kh-game__icon))::before { content: ''; display: block; height: 92px; background: var(--g); } /* ── Sin sesión (A-Estado-SinSesion-MovilV / -Desktop): marca, juegos en cuadros de color y tarjeta de entrada ──── */ html[data-theme="recreo"] .kh-login { padding: 40px 22px 32px; gap: 22px; align-items: stretch; text-align: left; color: #1F1A14; font-family: Figtree, system-ui, sans-serif; } html[data-theme="recreo"] .kh-login__hero { align-items: flex-start; gap: 12px; } html[data-theme="recreo"] .kh-login__logo { width: 72px; height: 72px; border-radius: 18px; } html[data-theme="recreo"] .kh-login__brand { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 38px; letter-spacing: -0.5px; line-height: 1; color: #1F1A14; } html[data-theme="recreo"] .kh-login__brand .kh-brand__games { color: #E4572E; } html[data-theme="recreo"] .kh-login__chips { align-self: stretch; margin-top: 10px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } html[data-theme="recreo"] .kh-login__chip { width: 100%; height: auto; aspect-ratio: 1; margin: 0; box-sizing: border-box; border-radius: 18px; border: 2px solid #1F1A14; box-shadow: 3px 3px 0 #1F1A14; object-fit: contain; background: #FDEBD3; } html[data-theme="recreo"] .kh-login__chip:nth-child(1) { background: #F2B632; } html[data-theme="recreo"] .kh-login__chip:nth-child(2) { background: #7FB7F0; } html[data-theme="recreo"] .kh-login__chip:nth-child(3) { background: #F4A3A8; } html[data-theme="recreo"] .kh-login__chip:nth-child(4) { background: #9FD8A8; } html[data-theme="recreo"] .kh-login__chip:nth-child(5) { background: #C9B6F2; } html[data-theme="recreo"] .kh-login__card { margin-top: 0; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 22px; padding: 20px; gap: 12px; box-shadow: 4px 4px 0 #1F1A14; } html[data-theme="recreo"] .kh-login__title { font-family: 'Bricolage Grotesque', sans-serif; font-weight: 800; font-size: 24px; letter-spacing: 0; color: #1F1A14; } html[data-theme="recreo"] .kh-login__body, html[data-theme="recreo"] .kh-login__sub { font: 400 15px/1.45 Figtree, system-ui, sans-serif; font-style: normal; color: #5C5246; } html[data-theme="recreo"] .kh-login .kh-login__btn { min-height: 50px; border: 2px solid #1F1A14; border-radius: 12px; background: #1F1A14; color: #FBF4E6; clip-path: none; font: 700 16px Figtree, system-ui, sans-serif; letter-spacing: 0; box-shadow: 3px 3px 0 #E4572E; padding: 0 16px; } html[data-theme="recreo"][data-size="desktop"] .kh-login, html[data-theme="recreo"][data-size="tablet-h"] .kh-login { grid-template-columns: 520px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 24px 64px; align-items: center; padding: 32px 48px; text-align: left; } html[data-theme="recreo"][data-size="desktop"] .kh-login__hero, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__hero { display: contents; } html[data-theme="recreo"][data-size="desktop"] .kh-login__logo, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__logo { grid-column: 1 / -1; grid-row: 1; width: 48px; height: 48px; border-radius: 12px; } html[data-theme="recreo"][data-size="desktop"] .kh-login__brand, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__brand { grid-column: 1 / -1; grid-row: 1; margin-left: 72px; font-size: 30px; } html[data-theme="recreo"][data-size="desktop"] .kh-login__chips, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__chips { grid-column: 2; grid-row: 2; margin: 0; gap: 20px; } html[data-theme="recreo"][data-size="desktop"] .kh-login__chip, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__chip { aspect-ratio: auto; height: 150px; border-radius: 20px; box-shadow: 4px 4px 0 #1F1A14; } html[data-theme="recreo"][data-size="desktop"] .kh-login__card, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__card { grid-column: 1; grid-row: 2; align-items: stretch; text-align: left; border-radius: 26px; padding: 36px 38px; gap: 16px; box-shadow: 5px 5px 0 #1F1A14; } html[data-theme="recreo"][data-size="desktop"] .kh-login__title, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__title { font-size: 44px; letter-spacing: -0.5px; line-height: 1.05; } html[data-theme="recreo"][data-size="desktop"] .kh-login__body, html[data-theme="recreo"][data-size="tablet-h"] .kh-login__body { font-size: 18px; } html[data-theme="recreo"][data-size="desktop"] .kh-login .kh-login__btn, html[data-theme="recreo"][data-size="tablet-h"] .kh-login .kh-login__btn { margin-top: 6px; min-height: 54px; font-size: 17px; border-radius: 14px; box-shadow: 4px 4px 0 #E4572E; } /* ── Dentro de KitchHero (A-KH-*): encabezado compacto y pestañas arriba, nunca menú al pie (D11) ─────────────────── */ html[data-theme="recreo"][data-kh] .kh-shell { padding: 20px 48px; gap: 16px; } html[data-theme="recreo"][data-kh][data-size="tablet-v"] .kh-shell { padding: 18px 28px; } html[data-theme="recreo"][data-kh][data-size="tablet-h"] .kh-shell { padding: 16px 32px; gap: 14px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-shell { padding: 10px 16px 12px; gap: 10px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-shell { padding: 8px 20px; gap: 8px; } html[data-theme="recreo"][data-kh] .kh-main { padding: 0; } html[data-theme="recreo"] .kh-khbar { gap: inherit; } html[data-theme="recreo"][data-kh] .kh-khbar { gap: 16px; } html[data-theme="recreo"][data-kh][data-size="tablet-h"] .kh-khbar { gap: 14px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-khbar { gap: 10px; } html[data-theme="recreo"] .kh-header[data-variant="compact"] { padding: 0; gap: 12px; } html[data-theme="recreo"] .kh-header[data-variant="compact"] .kh-header__logo { width: 40px; height: 40px; border-radius: 11px; } html[data-theme="recreo"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 24px; letter-spacing: -0.5px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-header[data-variant="compact"], html[data-theme="recreo"][data-size="tablet-h"] .kh-header[data-variant="compact"] { gap: 10px; } html[data-theme="recreo"][data-size="tablet-v"] .kh-header[data-variant="compact"] .kh-brand__name, html[data-theme="recreo"][data-size="tablet-h"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 22px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-v"] .kh-header[data-variant="compact"] { gap: 8px; } html[data-theme="recreo"][data-size="movil-v"] .kh-header[data-variant="compact"] .kh-header__logo { width: 36px; height: 36px; border-radius: 10px; } html[data-theme="recreo"][data-size="movil-v"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 18px; letter-spacing: 0; } html[data-theme="recreo"] .kh-header[data-variant="compact"] .kh-account { margin-left: auto; } /* Pestañas: píldoras en escritorio y tablets; control segmentado con borde de tinta en móvil V */ html[data-theme="recreo"] .kh-nav--tabs { display: flex; gap: 6px; border: 0; background: none; font-size: 16px; letter-spacing: 0; } html[data-theme="recreo"] .kh-nav--tabs .kh-nav__link { padding: 10px 18px; border: 0; text-align: left; } html[data-theme="recreo"] .kh-nav--tabs .kh-nav__link[aria-current="page"] { border: 0; } html[data-theme="recreo"][data-size="tablet-v"] .kh-nav--tabs .kh-nav__link, html[data-theme="recreo"][data-size="tablet-h"] .kh-nav--tabs .kh-nav__link { min-height: 44px; display: inline-flex; align-items: center; } html[data-theme="recreo"][data-size="tablet-h"] .kh-nav--tabs .kh-nav__link { padding: 9px 16px; } html[data-theme="recreo"][data-size="movil-v"] .kh-nav--tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; background: #FFFFFF; border: 2px solid #1F1A14; border-radius: 14px; padding: 3px; } html[data-theme="recreo"][data-size="movil-v"] .kh-nav--tabs .kh-nav__link { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 10px; font-weight: 700; font-size: 13px; } html[data-theme="recreo"][data-size="movil-v"] .kh-nav--tabs .kh-nav__link[aria-current="page"] { font-weight: 700; } /* Móvil H: logo, marca, pestañas y cuenta en una sola fila */ html[data-theme="recreo"][data-size="movil-h"] .kh-khbar { flex-direction: row; align-items: center; gap: 10px; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="compact"] { display: contents; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="compact"] .kh-header__logo { order: 1; width: 32px; height: 32px; border-radius: 9px; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="compact"] .kh-brand { order: 2; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="compact"] .kh-brand__name { font-size: 17px; letter-spacing: 0; } html[data-theme="recreo"][data-size="movil-h"] .kh-nav--tabs { order: 3; margin-left: 8px; gap: 4px; } html[data-theme="recreo"][data-size="movil-h"] .kh-nav--tabs .kh-nav__link { min-height: 44px; display: inline-flex; align-items: center; padding: 0 14px; font-weight: 700; font-size: 13px; } html[data-theme="recreo"][data-size="movil-h"] .kh-header[data-variant="compact"] .kh-account { order: 4; } /* Inicio dentro de KitchHero, escritorio (A-KH-Desktop): salas en 3 columnas; destacado y 5 juegos en una fila */ html[data-theme="recreo"][data-kh] .kh-inicio__side { display: none; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-inicio { display: flex; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-rooms--home { padding: 18px 22px; row-gap: 12px; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-rooms--home .kh-rooms__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-inicio__main { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(5, minmax(0, 1fr)); gap: 16px; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-inicio__main > .kh-slot { grid-column: 1 / -1; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-games, html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-games__grid { display: contents; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-games__title { display: none; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-games__soon { grid-column: 1 / -1; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-featured { display: flex; flex-direction: column; border-radius: 20px; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-featured__art { height: 110px; border-right: 0; border-bottom: 2px solid #1F1A14; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-featured__body { padding: 14px 18px 0; justify-content: flex-start; gap: 6px; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-featured__name { font-size: 24px; letter-spacing: 0; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-featured__desc { font-size: 14px; } html[data-theme="recreo"][data-kh][data-size="desktop"] .kh-featured__actions { padding: 10px 18px 16px; } /* Inicio dentro de KitchHero, móvil V (A-KH-MovilV): destacado en una fila y juegos en carrusel */ html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-inicio, html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-inicio__main { gap: 10px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-rooms--home { border-radius: 18px; padding: 12px 14px 6px; gap: 8px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-rooms--home .kh-room__label { font-size: 14px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-shell .kh-rooms--home .kh-room__join { padding: 12px 14px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-rooms--home .kh-rooms__all { font-size: 13px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-featured { border-radius: 18px; padding: 10px 12px; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto auto auto; column-gap: 10px; align-items: start; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-featured__art { grid-row: 1 / span 3; align-self: center; width: 64px; height: 64px; border-radius: 14px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-featured__eyebrow { display: none; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-featured__name { grid-row: 1; font-size: 18px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-featured__desc { grid-column: 2; grid-row: 2; margin-top: 2px; font-size: 12px; line-height: 1.3; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-featured__actions { grid-column: 2; grid-row: 3; display: flex; gap: 6px; padding: 6px 0 0; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-shell .kh-featured__actions .kh-btn { padding: 11px 14px; font-size: 13px; border-radius: 11px; box-shadow: none; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-shell .kh-featured__actions .kh-btn--secondary { padding: 11px 12px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-games { gap: 6px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-games__title { margin: 0; font-size: 18px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-games__grid { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-game { flex: none; width: 128px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-game__link { border-radius: 16px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-game__icon { height: 70px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-game__name { margin: 7px 9px 0; font-size: 13px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-game__mine { margin: 0 9px 9px; font-size: 11px; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .kh-games__soon { font-size: 12px; } /* Inicio dentro de KitchHero, móvil H (A-KH-MovilH): salas, "ver todas", destacado y juegos en una sola fila deslizable */ html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-inicio__main { display: flex; flex-direction: row; align-items: stretch; gap: 10px; overflow-x: auto; margin: 0 -20px; padding: 0 20px 6px; scrollbar-width: none; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-inicio__main > .kh-slot, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__head, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__list, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-games, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-games__grid { display: contents; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__title, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__sub, html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-games__title { display: none; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room { order: 1; flex: none; width: 236px; box-sizing: border-box; flex-direction: column; align-items: stretch; gap: 3px; background: #1F1A14; border-radius: 16px; padding: 10px 12px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__icon { position: absolute; width: 36px; height: 36px; border-radius: 10px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room { position: relative; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-room__label { min-height: 36px; display: flex; align-items: center; padding-left: 44px; font-size: 14px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-shell .kh-rooms--home .kh-room__join { margin-top: auto; padding: 12px; text-align: center; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-rooms--home .kh-rooms__all { order: 2; flex: none; width: 96px; box-sizing: border-box; border: 2px solid #1F1A14; border-radius: 16px; background: #FFFFFF; color: #B8401F; font-size: 13px; display: grid; place-items: center; text-align: center; padding: 8px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-featured { order: 3; flex: none; width: 250px; box-sizing: border-box; border-radius: 16px; padding: 10px 12px; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 8px; row-gap: 4px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-featured__art { grid-row: 1; width: 36px; height: 36px; border: 0; border-radius: 10px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-featured__eyebrow { display: none; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-featured__name { grid-row: 1; align-self: center; font-size: 17px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-featured__desc { grid-row: 2; margin-top: 0; font-size: 12px; line-height: 1.3; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-featured__actions { grid-row: 3; gap: 6px; padding: 0; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-shell .kh-featured__actions .kh-btn { padding: 11px 6px; font-size: 13px; border-radius: 11px; box-shadow: none; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-game { order: 4; flex: none; width: 124px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-game__icon { height: auto; flex-grow: 1; min-height: 0; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-game__name { margin: 6px 8px 0; font-size: 13px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-game__mine { margin: 0 8px 8px; } html[data-theme="recreo"][data-kh][data-size="movil-h"] .kh-games__soon { order: 5; flex: none; width: 130px; box-sizing: border-box; border-radius: 16px; background: #FFFFFF; border: 2px solid #D9CFBF; display: grid; place-items: center; padding: 10px; text-align: center; font-size: 12px; } /* ── Rankings · 3 tableros lado a lado · desviaciones comunes: la vista emite `.kh-rk-trio` en tablet H y escritorio, pero A-TabletH y A-Rankings-Desktop dibujan solo el tablero elegido; aquí no se muestra. */ html[data-theme="recreo"] .kh-rk-trio, html[data-theme="recreo"] .kh-rk-trio__caption { display: none; } /* ── Rankings · cuántas filas muestra la lista (desviaciones comunes, punto 3): A-Rankings-Desktop y A-TabletH hasta el 9.º (2 columnas), A-Rankings-MovilV hasta el 7.º y A-KH-Rankings-MovilV hasta el 6.º; tu fila nunca se esconde. */ html[data-theme="recreo"][data-size="desktop"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+7):not([data-me]) { display: none; } html[data-theme="recreo"][data-size="tablet-h"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+7):not([data-me]) { display: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-rk-main > .kh-rk-list > .kh-rk-row:nth-child(n+5):not([data-me]) { display: none; } html[data-theme="recreo"][data-kh][data-size="movil-v"] .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 ─────────────────────────────────────────────────────── "60 %" a la derecha de cada rango (A-Cuenta-*); en la tarjeta de ranking del Inicio, 3 juegos + "Más" y "Mis jugadas · resumen" con juegos, hitos y mejor puesto (marco Main); sin partidas con "Tu temporada, Emekui" y "Aún no empieza: te falta tu primera partida." (A-Estado-SinPartidas-MovilV); sin ícono, solo la grilla (A-Estado-SinIcono-MovilV). */ html[data-theme="recreo"] .kh-acc-sound__value { width: 44px; flex: none; text-align: right; font-variant-numeric: tabular-nums; font-weight: 400; color: #5C5246; } html[data-theme="recreo"] .kh-board__games .kh-seg__btn[data-game]:nth-child(n+4) { display: none; } html[data-theme="recreo"] .kh-board__games-more { text-decoration: none; } html[data-theme="recreo"] .kh-board__summary { margin-top: auto; text-decoration: none; color: #1F1A14; background: #FBF4E6; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } html[data-theme="recreo"] .kh-board__summary-title { font-weight: 700; } html[data-theme="recreo"] .kh-board__summary-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; } html[data-theme="recreo"] .kh-board__summary-stat { display: flex; flex-direction: column; } html[data-theme="recreo"] .kh-board__summary-value { font-family: 'Bricolage Grotesque', sans-serif; font-size: 26px; font-weight: 800; } html[data-theme="recreo"] .kh-board__summary-label { font-size: 12px; color: #5C5246; } html[data-theme="recreo"] .kh-mis[data-state="empty"] .kh-season { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } html[data-theme="recreo"] .kh-mis[data-state="empty"] .kh-season__hitos, html[data-theme="recreo"] .kh-mis[data-state="empty"] .kh-stats { display: none; } html[data-theme="recreo"] .kh-mis[data-state="empty"] .kh-season__note { display: block; font-size: 14px; color: #FFFFFF; } html[data-theme="recreo"] .kh-inicio[data-state="sin-icono"] [data-slot="rooms"], html[data-theme="recreo"] .kh-inicio[data-state="sin-icono"] .kh-featured, html[data-theme="recreo"] .kh-inicio[data-state="sin-icono"] .kh-greet { display: none; } /* ── Desviaciones comunes, punto 5 · Mis jugadas: la cifra y el rótulo por separado (A-MisJugadas-*) ────────────── "7" grande y "hitos de 31" chico; "1.º" y "en Pasapaloma" en una línea corta, sin cortar palabras. */ html[data-theme="recreo"] .kh-season .kh-stat__value:has(.kh-stat__unit) { display: flex; flex-direction: column; overflow-wrap: normal; } html[data-theme="recreo"] .kh-season .kh-stat__num { white-space: nowrap; } html[data-theme="recreo"] .kh-season .kh-stat__unit { font: 400 13px/1.3 Figtree, system-ui, sans-serif; overflow-wrap: normal; word-break: keep-all; hyphens: none; } html[data-theme="recreo"] .kh-season__hitos:has(.kh-stat__unit) > .kh-stat__label, html[data-theme="recreo"] .kh-stat:has(.kh-stat__unit) > .kh-stat__label { display: none; } html[data-theme="recreo"][data-size="movil-v"] .kh-season .kh-stat__unit { font-size: 12px; } html[data-theme="recreo"][data-size="movil-h"] .kh-season .kh-stat__unit { font-size: 11px; } /* BUG-35: indicador de la fila de juegos (A-KH-MovilV): botón con borde de 2 px y sombra plana */ html[data-theme="recreo"] .kh-scroll-more__btn { border: 2px solid #1F1A14; background: #FFFFFF; color: #1F1A14; font-weight: 800; box-shadow: 2px 2px 0 #1F1A14; } html[data-theme="recreo"] .kh-scroll-more__dot { background: #D9CFBF; opacity: 1; } html[data-theme="recreo"] .kh-scroll-more__dot[data-on] { background: #F2B632; outline: 2px solid #1F1A14; outline-offset: -1px; } /* Vista previa (req. 4.4 · D23): borde de 2 px y sombra plana */ html[data-theme="recreo"] .kh-preview-btn { border: 2px solid #1F1A14; background: #FFFFFF; color: #1F1A14; box-shadow: 2px 2px 0 #1F1A14; font-weight: 800; } html[data-theme="recreo"] .kh-pv { border: 2px solid #1F1A14; } html[data-theme="recreo"] .kh-pv__close, html[data-theme="recreo"] .kh-pv__nav { border: 2px solid #1F1A14; color: #1F1A14; background: #FFFFFF; } /* Vista previa: aquí el cuerpo del destacado es display: contents; el 👀 va en su esquina, sin texto visible (aria-label) */ html[data-theme="recreo"][data-size="movil-v"] .kh-featured__body > .kh-preview-btn, html[data-theme="recreo"][data-size="movil-h"] .kh-featured__body > .kh-preview-btn { position: absolute; top: 8px; right: 8px; margin: 0; min-height: 32px; padding: 0 6px; } html[data-theme="recreo"][data-size="movil-v"] .kh-featured__body > .kh-preview-btn .kh-preview-btn__text, html[data-theme="recreo"][data-size="movil-h"] .kh-featured__body > .kh-preview-btn .kh-preview-btn__text { display: none; }