/* * Tienda web Keplerians — mobile first, legible en vertical y en horizontal. * * La regla de oro del layout: NADA depende de la altura de la ventana. En * horizontal un móvil deja ~350px de alto, así que todo scrollea y el panel de * compra es una hoja inferior que nunca ocupa más del 90% del viewport. */ :root { /* Paleta KNetwork (SPA del juego): verde neón sobre verde muy oscuro, magenta para dinero/Premium */ --bg: #050c07; --bg-soft: #0c1b10cc; --card: #0d1f12cc; --card-hi: #143220; --line: #1e4a2c; --text: #f4fff6; --muted: #8fb89b; --accent: #39ff14; --accent-hi: #7dff62; --magenta: #b31bd6; --magenta-hi: #d43cf5; --gold: #ffb020; --silver: #c9d3dc; --bronze: #d2823c; --danger: #ff6b6b; --radius: 0; --pad: clamp(12px, 3vw, 20px); --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif; } * { box-sizing: border-box; } /* * El atributo `hidden` del HTML lo pone el navegador como `display: none`, pero * con la especificidad más baja que existe: cualquier `display` que pongamos en * una clase lo gana. Sin esto, `.sheet { display: flex }` hacía que la hoja de * compra saliera nada más cargar y no se pudiera cerrar (hidden=true no hacía * nada). Regla global para que no vuelva a pasar con ningún componente. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-text-size-adjust: 100%; } /* Fondo del hub del juego: textura de mosaico rotado (portal/bg.jpg, 512x512, se repite como en Unity), teñida de verde y con deriva lenta en la dirección del grid (~ -10º). Va en una capa fija para que el scroll no lo mueva. */ /* OJO: el color de fondo va en , no en . Un fondo opaco en body se pinta POR ENCIMA de un ::before con z-index negativo (orden de pintado CSS) y tapaba la textura. */ html { background: var(--bg); } body { background: transparent; } body::before { content: ""; position: fixed; inset: -20%; z-index: -1; pointer-events: none; background-image: url("./bg.jpg"); background-repeat: repeat; background-size: 512px 512px; /* La textura es gris oscuro: se tiñe de verde sin apagarla (antes brightness .45 la dejaba casi negra). */ filter: sepia(1) hue-rotate(75deg) saturate(3) brightness(.62) contrast(1.15); opacity: .85; animation: kn-drift 90s linear infinite; } body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 50% 35%, #0e5a2a44 0%, #05140900 60%), linear-gradient(180deg, #05140900 0%, #03070499 100%); } @keyframes kn-drift { from { background-position: 0 0; } to { background-position: 512px -90px; } } @media (prefers-reduced-motion: reduce) { body::before { animation: none; } } h1, h2, h3, .nav-btn, .brand, .lb-name, .lb-score, .lb-rank, .item-price, .sheet-price, .stat strong, .account-text strong, .btn-primary, .wallet-amount { font-family: var(--font-display); font-style: italic; font-weight: 600; letter-spacing: .2px; } h1, h2 { text-transform: uppercase; } body { min-height: 100dvh; display: flex; flex-direction: column; /* Notch y barra de gestos: sin esto, en horizontal el contenido se come el borde */ padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); } /* ── Topbar: jugador a la izquierda, secciones en el centro, Premium/salir a la derecha ── */ /* Flex, no grid: el bloque del jugador mide lo que necesita, el menú se queda con el resto y NUNCA se superpone (QA 17-sep-2026: en móvil apaisado los iconos pisaban las monedas). */ .topbar { display: flex; align-items: center; gap: 10px; padding: 8px var(--pad); border-bottom: 1px solid #1e4a2c66; position: sticky; top: 0; background: #050c07e6; backdrop-filter: blur(8px); z-index: 5; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; text-transform: uppercase; font-size: 18px; color: var(--accent); flex: 0 0 auto; } .brand-dot { width: 10px; height: 10px; border-radius: 0; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .topbar-right { flex: 0 0 auto; margin-left: auto; display: flex; justify-content: flex-end; align-items: center; gap: 10px; } /* Corona Premium en la esquina del avatar, como en el hub del juego. */ .crown { position: absolute; left: -8px; bottom: -8px; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; } .crown svg { width: 100%; height: 100%; fill: var(--magenta); filter: drop-shadow(0 0 3px #000c); } .crown-lg { width: 50px; height: 50px; left: -14px; bottom: -14px; } .account { flex: 0 1 auto; display: flex; align-items: center; gap: 10px; min-width: 0; } /* Avatar + marco equipados (marco ≈ 1,42x del avatar, como la tarjeta de perfil y el juego). */ /* Avatar y marco al MISMO tamaño: el arte del marco ya está pensado para superponerse 1:1. */ .account-cosmetic { position: relative; width: 64px; height: 64px; flex: 0 0 64px; } .account-avatar { position: absolute; inset: 0; width: 64px; height: 64px; object-fit: cover; background: var(--card-hi); border-radius: 0; } .account-frame { position: absolute; inset: 0; width: 64px; height: 64px; object-fit: contain; pointer-events: none; } .account-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; gap: 3px; } .account-text strong { font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(28vw, 220px); background: var(--accent); color: #05240c; padding: 1px 10px; border-radius: 0; transform: skewX(-8deg); display: inline-block; align-self: flex-start; } .account-text small { display: none; } /* ID del jugador en el perfil: grande, clic para copiar */ .profile-id { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 4px; padding: 4px 10px; background: #0f2416cc; border: 1px solid var(--line); color: #fff; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 26px; letter-spacing: 1px; cursor: pointer; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } .profile-id-label { color: var(--muted); font-size: 18px; } .profile-id svg { width: 22px; height: 22px; fill: var(--accent); } .profile-id:hover { border-color: var(--accent); } .profile-id:focus-visible { outline: 2px solid var(--accent); } .profile-id-ok { font-size: 15px; color: var(--accent); font-style: normal; font-family: "Barlow", system-ui, sans-serif; } /* ── Layout ─────────────────────────────────────────── */ main { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--pad); } .view { animation: fade .18s ease-out; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .card { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: clamp(16px, 4vw, 28px); } .card-login { max-width: 420px; margin: clamp(8px, 4vh, 40px) auto; } .center { text-align: center; } h1 { font-size: clamp(20px, 5vw, 26px); margin: 0 0 8px; } h2 { font-size: clamp(17px, 4.5vw, 21px); margin: 0 0 6px; } .muted { color: var(--muted); } .small { font-size: 12px; } .error { color: var(--danger); font-size: 14px; margin-top: 10px; } /* ── Formulario ─────────────────────────────────────── */ label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 6px; } input[type="text"] { width: 100%; padding: 14px; font-size: 20px; letter-spacing: 4px; text-align: center; text-transform: uppercase; font-family: ui-monospace, "SF Mono", Menlo, monospace; color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 0; } input[type="text"]:focus { outline: 2px solid var(--accent); border-color: transparent; } button { font: inherit; cursor: pointer; border-radius: 0; border: 1px solid transparent; } button:disabled { opacity: .55; cursor: default; } .btn-primary { width: 100%; padding: 14px; margin-top: 14px; background: var(--magenta); color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%); border-radius: 0; } .btn-primary:hover:not(:disabled) { background: var(--magenta-hi); } .btn-secondary { width: 100%; padding: 13px; background: var(--card-hi); color: var(--text); border-color: var(--line); } .btn-ghost { background: none; color: var(--muted); padding: 6px 10px; border-color: var(--line); font-size: 13px; } .divider { display: flex; align-items: center; gap: 10px; margin: 20px 0 14px; color: var(--muted); font-size: 12px; } .divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); } .banner { background: #3a2c12; border: 1px solid #7a5a1e; color: #ffd68a; padding: 12px 14px; border-radius: 0; margin-bottom: 16px; font-size: 14px; } /* ── Rejilla del catálogo ───────────────────────────── */ /* * auto-fill + minmax hace todo el trabajo responsive: 2 columnas en un móvil en * vertical, 4-5 en horizontal o tablet, sin una sola media query. */ /* Rejilla en filas: tantas columnas como quepan, sin scroll horizontal. */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(140px, 19vw, 210px), 1fr)); gap: clamp(12px, 2.5vw, 24px); padding: 10px 0 16px; justify-items: stretch; } .grid img, .videos img { -webkit-user-drag: none; user-drag: none; pointer-events: none; } .grid > .item { padding: 10px; gap: 8px; background: transparent; border: 0; align-items: center; text-align: center; } .grid .item-img { width: 100%; height: clamp(120px, 12vw, 160px); aspect-ratio: auto; object-fit: contain; } .grid .item-name { min-height: 2.4em; line-height: 1.2; display: flex; align-items: flex-end; justify-content: center; } .grid .item-price { margin-top: auto; } .grid > .item:hover { transform: translateY(-3px); } .grid .item-img { background: none; filter: drop-shadow(0 0 18px #b8ff3a55); } .grid .item-name { font-family: var(--font-display); font-style: italic; font-size: 22px; color: #fff; text-transform: uppercase; } .grid .item-price { width: 100%; font-size: 21px; padding: 7px 12px; margin-top: 4px; } .item { background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 10px; display: flex; flex-direction: column; gap: 8px; text-align: left; color: var(--text); transition: transform .12s ease, border-color .12s ease; } .item:hover { transform: translateY(-2px); border-color: var(--accent); } .item:active { transform: none; } .item-img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--bg-soft); border-radius: 0; } .item-name { font-size: 14px; font-weight: 600; line-height: 1.25; } .item-price { font-size: 16px; color: #fff; font-weight: 700; margin-top: auto; background: var(--magenta); padding: 4px 10px; text-align: center; clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%); } .item-price.unknown { color: var(--muted); font-weight: 500; } /* ── Hoja de compra ─────────────────────────────────── */ .sheet { position: fixed; inset: 0; z-index: 20; background: #000000b8; display: flex; align-items: flex-end; justify-content: center; } .sheet-panel { position: relative; width: min(440px, 100%); max-height: 90dvh; /* clave en horizontal: nunca tapa toda la pantalla */ overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); animation: up .18s ease-out; } @keyframes up { from { transform: translateY(16px); } to { transform: none; } } @media (min-width: 640px) { .sheet { align-items: center; } .sheet-panel { border-radius: 0; } } .sheet-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 22px; line-height: 1; background: var(--card-hi); color: var(--muted); border-color: var(--line); } /* Imagen del artículo en el diálogo: crece con la pantalla, entre 150 y 260 px, y el hueco queda reservado aunque el render sea pequeño. */ .sheet-img { width: clamp(150px, 32vmin, 260px); height: clamp(150px, 32vmin, 260px); object-fit: contain; display: block; margin: 0 auto 12px; filter: drop-shadow(0 0 22px #b8ff3a55); } .sheet-price { font-size: 26px; font-weight: 700; color: var(--magenta-hi); margin: 12px 0 4px; } .foot { padding: var(--pad); text-align: center; color: var(--muted); font-size: 12px; } /* Google Identity Services inyecta su propio iframe/botón: sólo lo centramos. */ .google-btn { display: flex; justify-content: center; min-height: 44px; } /* ── Monedas del jugador ────────────────────────────── */ /* * Va en la topbar, entre la marca y la cuenta. En móvil vertical el nombre de * la cuenta se encoge (max-width en .account-text strong) para dejarle sitio: * el saldo importa más que ver el nombre entero. */ .wallets { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wallet { display: flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; white-space: nowrap; } .wallet-icon { width: 22px; height: 22px; object-fit: contain; } .wallet-amount { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .topbar { flex-wrap: wrap; row-gap: 6px; } .nav { flex-basis: 100%; order: 3; justify-content: space-around; } .topbar-right { order: 2; } .account-text strong { max-width: 40vw; } .wallet-amount { font-size: 15px; } .nav-btn { font-size: 20px; padding: 6px 8px; } .nav-btn svg, .nav-icon-mask { width: 32px; height: 32px; flex-basis: 32px; } } /* * Botón de Apple. Su JS inyecta un div propio; le damos el mismo ancho y alto * que el de Google para que los dos accesos se vean como iguales — el usuario de * iOS es el 36% de los pagadores y no debe parecer la opción de segunda. */ .apple-btn { display: flex; justify-content: center; margin-top: 8px; min-height: 44px; } .apple-btn > div { width: 320px; max-width: 100%; height: 44px; cursor: pointer; } /* ── Regalo a un amigo (selector de destinatario en la hoja) ─────── */ .item-badge { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; background: var(--accent); color: #fff; border-radius: 0; padding: 3px 8px; } .item { position: relative; } .gift-box { margin: 10px 0 14px; text-align: left; } .gift-label { margin: 0 0 6px; font-weight: 600; font-size: 14px; } .gift-search { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 0; border: 1px solid var(--line); background: var(--card-hi); color: var(--text); font: inherit; } .gift-friends { max-height: 220px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .gift-friend { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border-radius: 0; border: 1px solid transparent; background: var(--card-hi); color: var(--text); font: inherit; cursor: pointer; } .gift-friend:hover { border-color: var(--line); } .gift-friend[aria-selected="true"] { border-color: var(--accent-hi); background: #7c4dff2b; } .gift-friend img { width: 32px; height: 32px; border-radius: 0; object-fit: cover; background: var(--line); flex: 0 0 auto; } .gift-friend .gift-friend-name { font-weight: 600; font-size: 14px; } .gift-friend .gift-friend-id { color: var(--muted); font-size: 11px; } /* ── Carga inicial (entrada con código desde el juego) ─────── */ .loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; min-height: 40dvh; } .spinner { width: 36px; height: 36px; border-radius: 0; border: 3px solid var(--line); border-top-color: var(--accent-hi); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-top-color: var(--accent-hi); } } /* ── Portal: navegación por secciones (como la barra del hub: solo icono, el activo enseña además su nombre) ─────────────────────────────────────── */ .nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; align-items: center; gap: 4px; padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: transparent; color: #2c6e42; border: 0; border-radius: 0; font-size: 28px; text-transform: uppercase; white-space: nowrap; transition: color .15s ease; } .nav-btn svg { width: 42px; height: 42px; fill: currentColor; flex: 0 0 42px; } .nav-btn > span:not(.nav-icon-mask) { display: none; } /* Icono en blanco del juego (Horror Coin) usado como máscara: se tiñe con currentColor como los SVG. */ .nav-icon-mask { display: inline-block; width: 42px; height: 42px; flex: 0 0 42px; background-color: currentColor; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; } .nav-icon-hc { --mask: url("./hc-white.png"); } .nav-btn.active .nav-icon-mask { filter: drop-shadow(0 0 8px #39ff1488); } .nav-btn.active { color: var(--accent); text-shadow: 0 0 10px #39ff1466; } .nav-btn.active svg { filter: drop-shadow(0 0 8px #39ff1488); } .nav-btn.active > span:not(.nav-icon-mask) { display: inline; } .nav-btn:hover { color: var(--accent-hi); } /* ── Perfil ────────────────────────────────────────────────── */ .profile-hero { position: relative; overflow: hidden; border-radius: 0; border: 1px solid var(--line); min-height: 180px; background: var(--card); margin-bottom: 14px; } .profile-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; } .profile-hero.anchor-right .profile-bg { object-position: right center; } .profile-bg-front { pointer-events: none; } .profile-hero-inner { position: relative; display: flex; align-items: center; gap: 16px; padding: clamp(16px, 4vw, 28px); background: linear-gradient(90deg, #0d0b14d9 0%, #0d0b1480 60%, transparent 100%); min-height: 180px; } .profile-cosmetic { position: relative; width: 128px; height: 128px; flex: 0 0 128px; } .profile-avatar { position: absolute; inset: 0; width: 128px; height: 128px; object-fit: cover; border-radius: 0; background: var(--card-hi); } .profile-frame { position: absolute; inset: 0; width: 128px; height: 128px; object-fit: contain; pointer-events: none; } .profile-text h1 { margin: 0 0 4px; text-shadow: 0 1px 6px #000; } .profile-text p { margin: 0; font-size: 13px; } .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 14px; padding: 0 10px; } /* Paralelogramo como los paneles del hub: la caja se sesga y el contenido se endereza. */ .stat { background: var(--card); border: 1px solid var(--line); padding: 16px 22px; display: flex; flex-direction: column; gap: 4px; transform: skewX(-10deg); } .stat > * { transform: skewX(10deg); } .stat { align-items: center; text-align: center; padding: 18px 22px; gap: 6px; } .stat strong { font-size: 46px; line-height: 1; font-variant-numeric: tabular-nums; } .stat span { font-size: 19px; color: var(--muted); font-family: var(--font-display); font-style: italic; text-transform: uppercase; letter-spacing: .3px; } .profile-actions .btn-secondary { margin-top: 10px; } /* ── Rankings ───────────────────────────────────────────────── */ .lb-me { margin: 12px 0 16px; padding: 14px 18px; background: #1a5a2acc; border: 0; display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .lb-me-you { font-size: 18px; color: var(--muted); text-transform: uppercase; } .lb-me-text { font-size: 26px; color: #fff; } .lb-me-score { margin-left: auto; font-size: 28px; color: var(--accent); font-variant-numeric: tabular-nums; } .table-wrap { overflow-x: auto; } .lb { width: 100%; border-collapse: collapse; } .lb { border-collapse: separate; border-spacing: 0 6px; } .lb td { padding: 6px 8px; background: #0f2416cc; vertical-align: middle; } .lb td:first-child { clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%); } .lb td:last-child { clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); } .lb tr.me td { background: #1a5a2acc; box-shadow: inset 3px 0 0 var(--accent); } .lb tr.lb-sep td { text-align: center; color: var(--muted); } .lb-rank { width: 56px; color: #fff; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; } .lb-rank.top1 { color: var(--gold); } .lb-rank.top2 { color: var(--silver); } .lb-rank.top3 { color: var(--bronze); } .lb-who { display: flex; align-items: center; gap: 10px; min-width: 0; } .lb-cosmetic { position: relative; width: 44px; height: 44px; flex: 0 0 44px; } .lb-avatar { position: absolute; inset: 0; width: 44px; height: 44px; object-fit: cover; border-radius: 0; background: var(--card-hi); } .lb-frame { position: absolute; inset: 0; width: 44px; height: 44px; object-fit: contain; pointer-events: none; } .lb-name { font-weight: 600; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lb-score { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--accent); white-space: nowrap; } .lb-me { box-shadow: inset 3px 0 0 var(--accent); font-family: var(--font-display); font-style: italic; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%); } /* ── Novedades ──────────────────────────────────────────────── */ .news-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-bottom: 12px; } .news-block:empty { display: none; } .news-card { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: 0; overflow: hidden; color: var(--text); text-decoration: none; } .news-card img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; background: var(--bg-soft); } .news-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; } .news-body h3 { margin: 0; font-size: 16px; } .news-body p { margin: 0; font-size: 13px; } .news-badge { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; background: var(--accent); color: #fff; border-radius: 0; padding: 2px 8px; } .news-h { margin: 8px 0 10px; } .videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .video { display: flex; flex-direction: column; gap: 6px; color: var(--text); text-decoration: none; } .video img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; background: var(--bg-soft); border: 1px solid var(--line); } .video-title { font-size: 13px; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Banderas (atlas del CDN recortado por CSS, 24x18) ────── */ .flag { display: inline-block; width: 24px; height: 18px; flex: 0 0 24px; background-repeat: no-repeat; border-radius: 0; vertical-align: -3px; background-color: #ffffff10; } .flag.flag-none { visibility: hidden; } .profile-text p .flag { margin-right: 2px; } .card { background: var(--card); } .wallet { background: #0f2416cc; border-color: #1e4a2c; } .wallet-amount { color: #fff; font-size: 17px; } .profile-hero { border-color: var(--line); } .profile-text h1 { color: var(--accent); } .stat { background: #0f2416cc; } .stat strong { color: var(--accent); } .news-badge { background: var(--magenta); } .item { background: #0f2416cc; } .item:hover { border-color: var(--accent); } /* ── Hoja de compra en horizontal (el juego es apaisado): dos columnas cuando hay selector de amigo, y panel ancho centrado; en vertical sigue siendo una hoja inferior. */ @media (orientation: landscape) and (min-width: 640px) { .sheet { align-items: center; } .sheet-panel { width: min(900px, 94vw); max-height: 92dvh; padding: 22px 26px; } .sheet-panel:has(#gift-box:not([hidden])) { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(280px, 1.3fr); grid-template-rows: auto auto auto auto 1fr auto auto; column-gap: 26px; align-items: start; } .sheet-panel:has(#gift-box:not([hidden])) .sheet-img { grid-column: 1; grid-row: 1; width: clamp(150px, 30vmin, 240px); height: clamp(150px, 30vmin, 240px); margin: 0 auto 8px; } .sheet-panel:has(#gift-box:not([hidden])) #sheet-title { grid-column: 1; grid-row: 2; text-align: center; } .sheet-panel:has(#gift-box:not([hidden])) #sheet-desc { grid-column: 1; grid-row: 3; text-align: center; } .sheet-panel:has(#gift-box:not([hidden])) .sheet-price { grid-column: 1; grid-row: 4; text-align: center; } .sheet-panel:has(#gift-box:not([hidden])) #gift-box { grid-column: 2; grid-row: 1 / span 5; margin: 0; } .sheet-panel:has(#gift-box:not([hidden])) .gift-friends { max-height: 46dvh; } .sheet-panel:has(#gift-box:not([hidden])) #sheet-buy { grid-column: 1 / -1; grid-row: 6; } .sheet-panel:has(#gift-box:not([hidden])) #sheet-error, .sheet-panel:has(#gift-box:not([hidden])) > p.small { grid-column: 1 / -1; } .sheet-close { top: 12px; right: 12px; } /* Perfil: aprovechar el ancho */ .profile-hero-inner { gap: 26px; } .stats { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } /* Frase que explica el ranking, encima de la tabla, como en el juego */ .lb-sub { margin: 4px 0 10px; font-family: var(--font-display); font-style: italic; font-size: 22px; color: var(--muted); } /* ── Modo compacto: móvil apaisado (poca altura). El juego se abre así. ───── */ @media (orientation: landscape) and (max-height: 520px) { .topbar { padding: 4px var(--pad); gap: 8px; } .account-cosmetic, .account-avatar, .account-frame { width: 44px; height: 44px; flex-basis: 44px; } .account-text { gap: 1px; } .account-text strong { font-size: 14px; padding: 0 8px; } .wallet-icon { width: 16px; height: 16px; } .wallet-amount { font-size: 13px; } .crown { width: 18px; height: 18px; left: -5px; bottom: -5px; } .nav-btn { font-size: 18px; padding: 4px 8px; gap: 6px; } .nav-btn svg, .nav-icon-mask { width: 28px; height: 28px; flex-basis: 28px; } .btn-ghost { padding: 4px 8px; font-size: 12px; } main { padding: 8px var(--pad); } .grid { padding: 4px 0 8px; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 15vw, 160px), 1fr)); } .grid > .item { padding: 6px; gap: 4px; } .grid .item-img { height: min(30vh, 110px); } .grid .item-name { font-size: 16px; min-height: 2.2em; } .grid .item-price { font-size: 15px; padding: 4px 8px; } .profile-hero, .profile-hero-inner { min-height: 120px; } .profile-cosmetic, .profile-avatar, .profile-frame { width: 84px; height: 84px; flex-basis: 84px; } .crown-lg { width: 30px; height: 30px; left: -8px; bottom: -8px; } .profile-id { font-size: 20px; padding: 2px 8px; } .stats { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .stat { padding: 10px 14px; } .stat strong { font-size: 30px; } .stat span { font-size: 14px; } .lb-me { padding: 8px 12px; } .lb-me-text { font-size: 20px; } .lb-me-score { font-size: 22px; } .lb-sub { font-size: 18px; } .sheet-panel { padding: 14px 18px; } } /* ── Descuento global ─────────────────────────────────────── */ .item-was { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--muted); text-decoration: line-through; } .item-off { position: absolute; top: 6px; right: 6px; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 16px; color: #fff; background: var(--magenta); padding: 2px 8px; clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } .sheet-was { color: var(--muted); font-size: 18px; margin-right: 6px; } /* ── Cartel de promoción de la tienda ─────────────────────── */ .promo { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 4px 0 14px; padding: 12px 18px; background: linear-gradient(90deg, #12321b 0%, #0f2416 60%, #0f241600 100%); border-left: 4px solid var(--magenta); clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%); } .promo-tag { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 34px; line-height: 1; color: #fff; background: var(--magenta); padding: 4px 14px; clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%); box-shadow: 0 0 18px #b31bd666; } .promo-text { font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 30px; color: var(--accent); text-transform: uppercase; text-shadow: 0 0 12px #39ff1455; } .promo-sub { font-size: 14px; color: var(--muted); flex-basis: 100%; } @media (min-width: 700px) { .promo-sub { flex-basis: auto; margin-left: auto; } } @media (orientation: landscape) and (max-height: 520px) { .promo { padding: 6px 12px; gap: 10px; margin-bottom: 8px; } .promo-tag { font-size: 24px; } .promo-text { font-size: 20px; } .promo-sub { font-size: 12px; } }